vcc-ui - npm Package Compare versions

Comparing version 1.0.0-rc.6 to 1.0.0-rc.7

es/components/button/index.js

@@ -19,25 +19,25 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var intentStyleMap = function intentStyleMap(_ref) {
-  var colors = _ref.colors;
+  var tokens = _ref.tokens;
   return {
     primary: {
-      color: colors.primary,
-      defaultForeground: colors.white,
-      highlight: colors.primaryLight,
-      activeBackground: colors.primaryLight
+      color: tokens.buttonPrimaryColor,
+      defaultForeground: tokens.buttonPrimaryForeground,
+      highlight: tokens.buttonPrimaryHoverBackground,
+      activeBackground: tokens.buttonPrimaryActiveBackground
     },
     "primary-light": {
-      color: colors.white,
-      defaultForeground: colors.black,
-      activeBackground: "#eee"
+      color: tokens.buttonPrimaryLightColor,
+      defaultForeground: tokens.buttonPrimaryLightForeground,
+      activeBackground: tokens.buttonPrimaryLightActiveBackground
     },
     secondary: {
-      color: colors.secondary,
-      defaultForeground: colors.white,
-      activeBackground: colors.secondaryLight
+      color: tokens.buttonSecondaryColor,
+      defaultForeground: tokens.buttonSecondaryForeground,
+      activeBackground: tokens.buttonSecondaryActiveBackground
     },
     destructive: {
-      color: colors.destructive,
-      defaultForeground: colors.white,
-      highlight: colors.destructiveLight,
-      activeBackground: colors.destructiveLight
+      color: tokens.buttonDestructiveColor,
+      defaultForeground: tokens.buttonDestructiveForeground,
+      highlight: tokens.buttonDestructiveHoverBackground,
+      activeBackground: tokens.buttonDestructiveActiveBackground
     }
@@ -72,3 +72,3 @@ };
     alignItems: "baseline",
-    padding: "17px 50px",
+    padding: "".concat(theme.tokens.buttonPaddingVertical, "px ").concat(theme.tokens.buttonPaddingHorizontal, "px"),
     textAlign: "center",
@@ -75,0 +75,0 @@ fontSize: 15,

es/components/button/stories.js

@@ -24,3 +24,3 @@ import React from "react";
   },
-  default: "up"
+  default: "right"
 };
@@ -27,0 +27,0 @@ storiesOf("Actions/Button", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("Primary", function () {

es/components/checkbox/index.js

@@ -26,14 +26,14 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
     outline: 0,
-    borderColor: theme.colors.inputBorder,
-    background: theme.colors.inputBackground,
+    borderColor: theme.tokens.inputBorder,
+    background: theme.tokens.inputBackground,
     ":focus": {
-      borderColor: theme.colors.inputBorderFocus
+      borderColor: theme.tokens.inputBorderFocus
     },
     "[disabled]": {
       cursor: "not-allowed",
-      borderColor: theme.colors.inputDisabledBorder,
+      borderColor: theme.tokens.inputDisabledBorder,
       ":checked": {
         ":before": {
-          borderRight: "2px solid ".concat(theme.colors.inputDisabledControl),
-          borderBottom: "2px solid ".concat(theme.colors.inputDisabledControl)
+          borderRight: "2px solid ".concat(theme.tokens.inputDisabledControl),
+          borderBottom: "2px solid ".concat(theme.tokens.inputDisabledControl)
         }
@@ -51,4 +51,4 @@ }
         position: "absolute",
-        borderRight: "2px solid ".concat(theme.colors.inputControl),
-        borderBottom: "2px solid ".concat(theme.colors.inputControl)
+        borderRight: "2px solid ".concat(theme.tokens.inputControl),
+        borderBottom: "2px solid ".concat(theme.tokens.inputControl)
       }
@@ -55,0 +55,0 @@ }

es/components/nav/index.js

@@ -13,2 +13,4 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
@@ -18,4 +20,2 @@
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 import React from "react";
@@ -86,3 +86,3 @@ import PropTypes from "prop-types";
     };
-    _this.toggleVisibility = _this.toggleVisibility.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.toggleVisibility = _this.toggleVisibility.bind(_assertThisInitialized(_this));
     return _this;
@@ -89,0 +89,0 @@ }

es/components/radio/index.js

@@ -26,7 +26,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
     cursor: "pointer",
-    borderColor: theme.colors.inputBorder,
-    background: theme.colors.inputBackground,
+    borderColor: theme.tokens.inputBorder,
+    background: theme.tokens.inputBackground,
     outline: 0,
     ":focus": {
-      borderColor: theme.colors.inputBorderFocus
+      borderColor: theme.tokens.inputBorderFocus
     },
@@ -40,3 +40,3 @@ ":checked": {
         height: 8,
-        backgroundColor: theme.colors.inputControl,
+        backgroundColor: theme.tokens.inputControl,
         position: "absolute"
@@ -47,6 +47,6 @@ }
       cursor: "not-allowed",
-      borderColor: theme.colors.inputDisabledBorder,
+      borderColor: theme.tokens.inputDisabledBorder,
       ":checked": {
         ":before": {
-          backgroundColor: theme.colors.inputDisabledControl
+          backgroundColor: theme.tokens.inputDisabledControl
         }
@@ -53,0 +53,0 @@ }

es/components/select-input/index.js

@@ -18,3 +18,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
       disabled = _ref.disabled;
-  return disabled ? theme.colors.inputDisabledControl : theme.colors.inputControl;
+  return disabled ? theme.tokens.inputDisabledControl : theme.tokens.inputControl;
 };
@@ -82,7 +82,7 @@
     outline: 0,
-    borderColor: theme.colors.inputBorder,
-    backgroundColor: theme.colors.inputBackground,
+    borderColor: theme.tokens.inputBorder,
+    backgroundColor: theme.tokens.inputBackground,
     cursor: disabled ? "not-allowed" : "pointer",
     ":focus": {
-      borderColor: theme.colors.inputBorderFocus
+      borderColor: theme.tokens.inputBorderFocus
     }
@@ -89,0 +89,0 @@ };

es/components/select-input/stories.js

@@ -13,2 +13,4 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
@@ -18,4 +20,2 @@
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -47,3 +47,3 @@
 
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
+      _defineProperty(_assertThisInitialized(_this), "state", {
         options: [{
@@ -78,3 +78,3 @@ value: "bilmodell",
 
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleChange", function (e) {
+      _defineProperty(_assertThisInitialized(_this), "handleChange", function (e) {
         _this.setState({
@@ -122,3 +122,3 @@ value: e.target.value
 
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this2)), "state", {
+      _defineProperty(_assertThisInitialized(_this2), "state", {
         options: [{
@@ -149,3 +149,3 @@ value: "bilmodell",
 
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this2)), "handleChange", function (e) {
+      _defineProperty(_assertThisInitialized(_this2), "handleChange", function (e) {
         _this2.setState({
@@ -194,3 +194,3 @@ value: e.target.value
 
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this3)), "state", {
+      _defineProperty(_assertThisInitialized(_this3), "state", {
         options: [{
@@ -225,3 +225,3 @@ value: "bilmodell",
 
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this3)), "onChange", function (e) {
+      _defineProperty(_assertThisInitialized(_this3), "onChange", function (e) {
         _this3.setState({
@@ -228,0 +228,0 @@ value: e.target.value

es/components/slider/index.js

@@ -13,2 +13,4 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
@@ -18,4 +20,2 @@
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -48,4 +48,4 @@
     height: THUMB_HEIGHT,
-    border: "1px solid " + theme.colors.inputBorder,
-    background: theme.colors.inputBackground,
+    border: "1px solid " + theme.tokens.inputBorder,
+    background: theme.tokens.inputBackground,
     cursor: disabled ? "not-allowed" : "ew-resize",
@@ -57,3 +57,3 @@ display: "flex",
     ":focus": {
-      borderColor: theme.colors.inputBorderFocus
+      borderColor: theme.tokens.inputBorderFocus
     },
@@ -81,3 +81,3 @@ extend: {
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
+    _defineProperty(_assertThisInitialized(_this), "state", {
       isDragging: false,
@@ -88,3 +88,3 @@ lastStep: 0,
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "componentDidUpdate", function (prevProps) {
+    _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function (prevProps) {
       var initialValue = _this.props.initialValue;
@@ -102,3 +102,3 @@ var prevInitialValue = prevProps.initialValue;
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleChange", function () {
+    _defineProperty(_assertThisInitialized(_this), "handleChange", function () {
       var _this$props$onChange = _this.props.onChange,
@@ -117,15 +117,15 @@ onChange = _this$props$onChange === void 0 ? function () {} : _this$props$onChange;
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getElementProperty", function (element, property) {
+    _defineProperty(_assertThisInitialized(_this), "getElementProperty", function (element, property) {
       return element && element.getBoundingClientRect ? element.getBoundingClientRect()[property] : 0;
     });
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getElementWidth", function (element) {
+    _defineProperty(_assertThisInitialized(_this), "getElementWidth", function (element) {
       return _this.getElementProperty(element, "width");
     });
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getElementLeft", function (element) {
+    _defineProperty(_assertThisInitialized(_this), "getElementLeft", function (element) {
       return _this.getElementProperty(element, "left");
     });
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getNumberOfSteps", function () {
+    _defineProperty(_assertThisInitialized(_this), "getNumberOfSteps", function () {
       var _this$props = _this.props,
@@ -145,3 +145,3 @@ step = _this$props.step,
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getStepAtPercentagePosition", function (percentagePosition) {
+    _defineProperty(_assertThisInitialized(_this), "getStepAtPercentagePosition", function (percentagePosition) {
       var steps = _this.getNumberOfSteps();
@@ -152,3 +152,3 @@
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getStepForValue", function (value) {
+    _defineProperty(_assertThisInitialized(_this), "getStepForValue", function (value) {
       var _this$props2 = _this.props,
@@ -172,3 +172,3 @@ minValue = _this$props2.minValue,
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getValueAtStepPosition", function (step) {
+    _defineProperty(_assertThisInitialized(_this), "getValueAtStepPosition", function (step) {
       var _this$props3 = _this.props,
@@ -191,3 +191,3 @@ minValue = _this$props3.minValue,
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getCurrentValue", function () {
+    _defineProperty(_assertThisInitialized(_this), "getCurrentValue", function () {
       var currentStep = _this.state.currentStep;
@@ -197,3 +197,3 @@ return _this.getValueAtStepPosition(currentStep);
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "updateCurrentStep", function (position) {
+    _defineProperty(_assertThisInitialized(_this), "updateCurrentStep", function (position) {
       var trackWidth = _this.getElementWidth(_this.trackRef.current);
@@ -218,3 +218,3 @@
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getLeftPositionFromCurrentStep", function () {
+    _defineProperty(_assertThisInitialized(_this), "getLeftPositionFromCurrentStep", function () {
       if (!_this.trackRef || !_this.thumbRef) {
@@ -238,3 +238,3 @@ return 0;
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleMouseDown", function (e) {
+    _defineProperty(_assertThisInitialized(_this), "handleMouseDown", function (e) {
       _this.updateCurrentStep(e.clientX);
@@ -247,3 +247,3 @@
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleDragStart", function () {
+    _defineProperty(_assertThisInitialized(_this), "handleDragStart", function () {
       _this.setState({
@@ -258,3 +258,3 @@ isDragging: true,
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleDrag", function (e) {
+    _defineProperty(_assertThisInitialized(_this), "handleDrag", function (e) {
       var onMoveStart = _this.props.onMoveStart;
@@ -276,3 +276,3 @@
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleDragEnd", function () {
+    _defineProperty(_assertThisInitialized(_this), "handleDragEnd", function () {
       var onMoveEnd = _this.props.onMoveEnd;
@@ -298,3 +298,3 @@
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "adjustCurrentStepBy", function (diff) {
+    _defineProperty(_assertThisInitialized(_this), "adjustCurrentStepBy", function (diff) {
       var currentStep = _this.state.currentStep;
@@ -311,3 +311,3 @@
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleKeyDown", function (e) {
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (e) {
       e.preventDefault();
@@ -430,6 +430,6 @@ e.stopPropagation();
       }, React.createElement(Arrow, {
-        color: theme.colors[disabled ? "inputDisabledControl" : "inputControl"],
+        color: theme.tokens[disabled ? "inputDisabledControl" : "inputControl"],
         direction: "left"
       }), React.createElement(Arrow, {
-        color: theme.colors[disabled ? "inputDisabledControl" : "inputControl"],
+        color: theme.tokens[disabled ? "inputDisabledControl" : "inputControl"],
         direction: "right"
@@ -460,4 +460,4 @@ }));
           borderStyle: "solid",
-          borderColor: theme.colors.inputBorder,
-          background: theme.colors.inputBackground,
+          borderColor: theme.tokens.inputBorder,
+          background: theme.tokens.inputBackground,
           cursor: this.props.disabled ? "not-allwoed" : "pointer"
@@ -464,0 +464,0 @@ }, getThemeStyle("sliderTrack", theme)],

es/components/tab-nav/index.js

@@ -13,2 +13,4 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
@@ -18,4 +20,2 @@
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -47,5 +47,5 @@
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {});
+    _defineProperty(_assertThisInitialized(_this), "state", {});
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getActiveIndex", function () {
+    _defineProperty(_assertThisInitialized(_this), "getActiveIndex", function () {
       var children = _this.props.children;
@@ -52,0 +52,0 @@ return children.length ? children.filter(Boolean).findIndex(function (child) {

es/components/text-input/index.js

@@ -36,15 +36,15 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
     outline: 0,
-    borderColor: theme.colors.inputBorder,
-    color: theme.colors.inputText,
-    background: theme.colors.inputBackground,
+    borderColor: theme.tokens.inputBorder,
+    color: theme.tokens.inputText,
+    background: theme.tokens.inputBackground,
     ":focus": {
-      borderColor: theme.colors.inputBorderFocus
+      borderColor: theme.tokens.inputBorderFocus
     },
     "::placeholder": {
-      color: theme.colors.inputPlaceholder
+      color: theme.tokens.inputPlaceholder
     },
     "[disabled]": {
       cursor: "not-allowed",
-      color: theme.colors.inputDisabledText,
-      borderColor: theme.colors.inputBorderDisabled
+      color: theme.tokens.inputDisabledText,
+      borderColor: theme.tokens.inputBorderDisabled
     }
@@ -51,0 +51,0 @@ };

es/components/toggle/index.js

@@ -27,3 +27,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
     ":focus + span": {
-      borderColor: theme.colors.inputBorderFocus
+      borderColor: theme.tokens.inputBorderFocus
     }
@@ -47,7 +47,7 @@ };
     outline: 0,
-    borderColor: theme.colors.inputBorder,
-    background: theme.colors.inputBackground,
+    borderColor: theme.tokens.inputBorder,
+    background: theme.tokens.inputBackground,
     cursor: disabled ? "not-allowed" : "pointer",
     ":focus": {
-      borderColor: theme.colors.inputBorderFocus
+      borderColor: theme.tokens.inputBorderFocus
     },
@@ -61,3 +61,3 @@ "::after": {
       height: 17,
-      background: disabled ? theme.colors.inputDisabledControl : theme.colors.inputControl,
+      background: disabled ? theme.tokens.inputDisabledControl : theme.tokens.inputControl,
       borderRadius: "50%",
@@ -64,0 +64,0 @@ transition: "transform 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000)",

es/components/toggle/stories.js

@@ -13,2 +13,4 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
@@ -18,4 +20,2 @@
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -47,3 +47,3 @@
 
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
+      _defineProperty(_assertThisInitialized(_this), "state", {
         checked: false
@@ -94,3 +94,3 @@ });
 
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this3)), "state", {
+      _defineProperty(_assertThisInitialized(_this3), "state", {
         checked: false
@@ -97,0 +97,0 @@ });

es/deprecate.js

@@ -1,5 +0,1 @@
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 var isProduction = process.env.NODE_ENV === "production";
@@ -17,14 +13,2 @@ var cache = {};
   }
-}
-export function deprecateObjectProperty(obj, property, message) {
-  // we have to create a copy or else the property would redefine
-  // its value over and over again leading to a max call stack error
-  var copy = _objectSpread({}, obj);
-
-  Object.defineProperty(obj, property, {
-    get: function get() {
-      deprecate(message);
-      return copy[property];
-    }
-  });
 }

es/story-wrapper.js

@@ -11,8 +11,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
 import polestarTheme from "./themes/polestar";
-import unicornTheme from "./themes/unicorn";
 var renderer = styleRenderer();
 var themes = {
   volvo: volvoTheme,
-  polestar: polestarTheme,
-  unicorn: unicornTheme
+  polestar: polestarTheme
 };
@@ -19,0 +17,0 @@ var defaultTheme = "volvo";

es/styleguide/provider.js

@@ -25,4 +25,4 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 import PropTypes from "prop-types";
-import { RendererProvider } from "react-fela";
 import { ThemeProvider } from "../theme-provider";
+import { StyleProvider as RendererProvider } from "../style-provider";
 import volvoTheme from "../themes/volvo";
@@ -29,0 +29,0 @@

es/themes/polestar.js

@@ -1,43 +0,47 @@
-// NOTE: For now this is just a hard copy of the volvo theme
-// it should be customized at some point to match the specific brand values
-import { deprecateObjectProperty } from "../deprecate";
-/*
- * Please DO NOT use HEX shorthand for colors (eg. #333)
- * as it breaks compatibility with opacity suffixes
- * (eg. #333333AA)
- */
-
 var colors = {
   black: "#000000",
-  // grey1: "#161618",
+  white: "#FFFFFF",
   grey1: "rgb(30, 30, 30)",
-  // grey2: "#3D3D43",
   grey2: "rgb(65, 65, 65)",
-  // grey3: "#57575C",
   grey3: "rgb(100, 100,100)",
-  // grey4: "#75757A",
   grey4: "rgb(135, 135, 135)",
-  // grey5: "#C0C0C6",
   grey5: "rgb(165, 165, 165)",
-  // grey6: "#E8E8EE",
   grey6: "rgb(195, 195, 195)",
-  // grey7: "#F4F4FA",
   grey7: "rgb(225, 225, 225)",
-  // grey8: "#F0F0F0",
   grey8: "rgb(240, 240, 240)",
-  white: "#FFFFFF",
   primary: "#D3BC8D",
-  // TODO: eventually deprecate later
-  red: "#c42121",
-  redLight: "#de3b3b",
-  // secondary: "#c42121",
-  // secondaryLight: "#de3b3b",
-  // deprecated
-  blue: "#2b7bcd",
-  primaryBlue: "#007bcd",
-  primaryBlueLight: "#008ae6"
+  primaryLight: "#008ae6",
+  secondary: "#000000",
+  secondaryLight: "#161618",
+  destructive: "#C60C46",
+  destructiveLight: "#db0f4f"
 };
-deprecateObjectProperty(colors, "blue", 'Named colors like "blue" are deprecated. Use "primary" instead.');
-deprecateObjectProperty(colors, "primaryBlue", 'Named colors liked "primaryBlue" are deprecated. Use "primary" instead.');
-deprecateObjectProperty(colors, "primaryBlueLight", 'Named colors like "primaryBlueLight" are deprecated. Use "primaryLight" instead.'); // no s in here as thats the default at 0-480
+var tokens = {
+  buttonPaddingVertical: 16,
+  buttonPaddingHorizontal: 16,
+  buttonPrimaryColor: colors.primary,
+  buttonPrimaryForeground: colors.black,
+  buttonPrimaryHoverBackground: colors.primary,
+  buttonPrimaryActiveBackground: colors.primary,
+  buttonPrimaryLightColor: colors.white,
+  buttonPrimaryLightForeground: colors.black,
+  buttonPrimaryLightActiveBackground: colors.white,
+  buttonSecondaryColor: colors.black,
+  buttonSecondaryForeground: colors.white,
+  buttonDestructiveColor: colors.destructive,
+  buttonDestructiveForeground: colors.white,
+  buttonDestructiveHoverBackground: colors.destructiveLight,
+  buttonDestructiveActiveBackground: colors.destructive,
+  inputPadingVertical: 24,
+  inputPaddingHorizontal: 24,
+  inputForeground: "#222",
+  inputDisabledForeground: "#ccc",
+  inputDisabledControl: "#ccc",
+  inputDisabledBorder: "#f1f1f1",
+  inputBackground: "#fff",
+  inputBorder: colors.grey7,
+  inputBorderFocus: colors.grey5,
+  inputPlaceholder: colors.grey6,
+  inputControl: colors.primary
+}; // no s in here as thats the default at 0-480
 
@@ -91,2 +95,10 @@ var breakpointSizes = {
 var icons = ["account", "email", "search", "globe", "facebook", "twitter", "youtube", "linkedin", "instagram", "pinterest", "youku", "vkontakte", "wechat", "weibo"];
+var fonts = [{
+  fontFamily: "Polestar Unica77",
+  fontWeight: 400,
+  src: ["polestar-unica77/polestar-unica77-regular.woff2", "polestar-unica77/polestar-unica77-regular.ttf"]
+}];
+var fontTypes = {
+  UNICA77: "Polestar Unica77, Arial, sans-serif"
+};
 var logoImages = {
@@ -108,6 +120,7 @@ "wordmark-black": "polestar-wordmark-black.svg",
   colors: colors,
+  tokens: tokens,
   icons: icons,
-  fonts: [],
+  fonts: fonts,
   fontsPath: "/",
-  fontTypes: {},
+  fontTypes: fontTypes,
   logoImages: logoImages,
@@ -117,3 +130,40 @@ logoImagesPath: "/",
   // placeholder for custom brand styles
-  styles: {}
+  styles: {
+    button: function button(_ref) {
+      var theme = _ref.theme;
+      return {
+        fontFamily: theme.fontTypes.UNICA77
+      };
+    },
+    link: function link(_ref2) {
+      var theme = _ref2.theme;
+      return {
+        fontFamily: theme.fontTypes.UNICA77
+      };
+    },
+    navItem: function navItem(_ref3) {
+      var theme = _ref3.theme;
+      return {
+        fontFamily: theme.fontTypes.UNICA77
+      };
+    },
+    tabNavItem: function tabNavItem(_ref4) {
+      var theme = _ref4.theme;
+      return {
+        fontFamily: theme.fontTypes.UNICA77
+      };
+    },
+    tabNavBackButton: function tabNavBackButton(_ref5) {
+      var theme = _ref5.theme;
+      return {
+        fontFamily: theme.fontTypes.UNICA77
+      };
+    },
+    textInput: function textInput(_ref6) {
+      var theme = _ref6.theme;
+      return {
+        fontFamily: theme.fontTypes.UNICA77
+      };
+    }
+  }
 };

es/themes/volvo.js

@@ -1,28 +0,12 @@
-import { deprecateObjectProperty } from "../deprecate";
-/*
- * Please DO NOT use HEX shorthand for colors (eg. #333)
- * as it breaks compatibility with opacity suffixes
- * (eg. #333333AA)
- */
-
 var colors = {
   black: "#000000",
-  // grey1: "#161618",
+  white: "#FFFFFF",
   grey1: "rgb(30, 30, 30)",
-  // grey2: "#3D3D43",
   grey2: "rgb(65, 65, 65)",
-  // grey3: "#57575C",
   grey3: "rgb(100, 100,100)",
-  // grey4: "#75757A",
   grey4: "rgb(135, 135, 135)",
-  // grey5: "#C0C0C6",
   grey5: "rgb(165, 165, 165)",
-  // grey6: "#E8E8EE",
   grey6: "rgb(195, 195, 195)",
-  // grey7: "#F4F4FA",
   grey7: "rgb(225, 225, 225)",
-  // grey8: "#F0F0F0",
   grey8: "rgb(240, 240, 240)",
-  white: "#FFFFFF",
-  // themed colors
   primary: "#007bcd",
@@ -33,38 +17,32 @@ primaryLight: "#008ae6",
   destructive: "#C60C46",
-  destructiveLight: "#db0f4f",
-  red: "#C60C46",
-  redLight: "#db0f4f",
-  blue: "#2b7bcd",
-  primaryBlue: "#007bcd",
-  primaryBlueLight: "#008ae6",
-
-  // Input Styles
-  get inputBorder() {
-    return this.grey7;
-  },
-
-  get inputBorderFocus() {
-    return this.grey5;
-  },
-
-  get inputPlaceholder() {
-    return this.grey6;
-  },
-
-  get inputControl() {
-    return this.primaryLight;
-  },
-
-  inputText: "#222",
-  inputDisabledText: "#ccc",
+  destructiveLight: "#db0f4f"
+};
+var tokens = {
+  buttonPaddingVertical: 17,
+  buttonPaddingHorizontal: 50,
+  buttonPrimaryColor: colors.primary,
+  buttonPrimaryForeground: colors.white,
+  buttonPrimaryHoverBackground: colors.primaryLight,
+  buttonPrimaryActiveBackground: colors.primary,
+  buttonPrimaryLightColor: colors.white,
+  buttonPrimaryLightForeground: colors.black,
+  buttonPrimaryLightActiveBackground: colors.white,
+  buttonSecondaryColor: colors.black,
+  buttonSecondaryForeground: colors.white,
+  buttonDestructiveColor: colors.destructive,
+  buttonDestructiveForeground: colors.white,
+  buttonDestructiveHoverBackground: colors.destructiveLight,
+  buttonDestructiveActiveBackground: colors.destrutive,
+  inputPadingVertical: 24,
+  inputPaddingHorizontal: 24,
+  inputForeground: "#222",
+  inputDisabledForeground: "#ccc",
   inputDisabledControl: "#ccc",
   inputDisabledBorder: "#f1f1f1",
-  inputBackground: "#fff"
+  inputBackground: "#fff",
+  inputBorder: colors.grey7,
+  inputBorderFocus: colors.grey5,
+  inputPlaceholder: colors.grey6,
+  inputControl: colors.primaryLight
 };
-deprecateObjectProperty(colors, "blue", 'Named colors like "blue" are deprecated. Use "primary" instead.');
-deprecateObjectProperty(colors, "primaryBlue", 'Named colors liked "primaryBlue" are deprecated. Use "primary" instead.');
-deprecateObjectProperty(colors, "primaryBlueLight", 'Named colors like "primaryBlueLight" are deprecated. Use "primaryLight" instead.');
-deprecateObjectProperty(colors, "red", 'Named colors like "red" are deprecated. Use "destructive" instead.');
-deprecateObjectProperty(colors, "redLight", 'Named colors like "redLight" are deprecated. Use "destructiveLight" instead.'); // no s in here as thats the default at 0-480
-
 var breakpointSizes = {
@@ -228,2 +206,3 @@ m: 480,
   colors: colors,
+  tokens: tokens,
   icons: icons,
@@ -230,0 +209,0 @@ fonts: fonts,

lib/components/button/index.js

@@ -37,25 +37,25 @@ "use strict";
 var intentStyleMap = function intentStyleMap(_ref) {
-  var colors = _ref.colors;
+  var tokens = _ref.tokens;
   return {
     primary: {
-      color: colors.primary,
-      defaultForeground: colors.white,
-      highlight: colors.primaryLight,
-      activeBackground: colors.primaryLight
+      color: tokens.buttonPrimaryColor,
+      defaultForeground: tokens.buttonPrimaryForeground,
+      highlight: tokens.buttonPrimaryHoverBackground,
+      activeBackground: tokens.buttonPrimaryActiveBackground
     },
     "primary-light": {
-      color: colors.white,
-      defaultForeground: colors.black,
-      activeBackground: "#eee"
+      color: tokens.buttonPrimaryLightColor,
+      defaultForeground: tokens.buttonPrimaryLightForeground,
+      activeBackground: tokens.buttonPrimaryLightActiveBackground
     },
     secondary: {
-      color: colors.secondary,
-      defaultForeground: colors.white,
-      activeBackground: colors.secondaryLight
+      color: tokens.buttonSecondaryColor,
+      defaultForeground: tokens.buttonSecondaryForeground,
+      activeBackground: tokens.buttonSecondaryActiveBackground
     },
     destructive: {
-      color: colors.destructive,
-      defaultForeground: colors.white,
-      highlight: colors.destructiveLight,
-      activeBackground: colors.destructiveLight
+      color: tokens.buttonDestructiveColor,
+      defaultForeground: tokens.buttonDestructiveForeground,
+      highlight: tokens.buttonDestructiveHoverBackground,
+      activeBackground: tokens.buttonDestructiveActiveBackground
     }
@@ -90,3 +90,3 @@ };
     alignItems: "baseline",
-    padding: "17px 50px",
+    padding: "".concat(theme.tokens.buttonPaddingVertical, "px ").concat(theme.tokens.buttonPaddingHorizontal, "px"),
     textAlign: "center",
@@ -93,0 +93,0 @@ fontSize: 15,

lib/components/button/stories.js

@@ -33,3 +33,3 @@ "use strict";
   },
-  default: "up"
+  default: "right"
 };
@@ -36,0 +36,0 @@ (0, _react2.storiesOf)("Actions/Button", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("Primary", function () {

lib/components/checkbox/index.js

@@ -39,14 +39,14 @@ "use strict";
     outline: 0,
-    borderColor: theme.colors.inputBorder,
-    background: theme.colors.inputBackground,
+    borderColor: theme.tokens.inputBorder,
+    background: theme.tokens.inputBackground,
     ":focus": {
-      borderColor: theme.colors.inputBorderFocus
+      borderColor: theme.tokens.inputBorderFocus
     },
     "[disabled]": {
       cursor: "not-allowed",
-      borderColor: theme.colors.inputDisabledBorder,
+      borderColor: theme.tokens.inputDisabledBorder,
       ":checked": {
         ":before": {
-          borderRight: "2px solid ".concat(theme.colors.inputDisabledControl),
-          borderBottom: "2px solid ".concat(theme.colors.inputDisabledControl)
+          borderRight: "2px solid ".concat(theme.tokens.inputDisabledControl),
+          borderBottom: "2px solid ".concat(theme.tokens.inputDisabledControl)
         }
@@ -64,4 +64,4 @@ }
         position: "absolute",
-        borderRight: "2px solid ".concat(theme.colors.inputControl),
-        borderBottom: "2px solid ".concat(theme.colors.inputControl)
+        borderRight: "2px solid ".concat(theme.tokens.inputControl),
+        borderBottom: "2px solid ".concat(theme.tokens.inputControl)
       }
@@ -68,0 +68,0 @@ }

lib/components/nav/index.js

@@ -32,2 +32,4 @@ "use strict";
 
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
@@ -37,4 +39,2 @@
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 var hideOnScrollOffsetTop = 80;
@@ -100,3 +100,3 @@
     };
-    _this.toggleVisibility = _this.toggleVisibility.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.toggleVisibility = _this.toggleVisibility.bind(_assertThisInitialized(_this));
     return _this;
@@ -103,0 +103,0 @@ }

lib/components/radio/index.js

@@ -39,7 +39,7 @@ "use strict";
     cursor: "pointer",
-    borderColor: theme.colors.inputBorder,
-    background: theme.colors.inputBackground,
+    borderColor: theme.tokens.inputBorder,
+    background: theme.tokens.inputBackground,
     outline: 0,
     ":focus": {
-      borderColor: theme.colors.inputBorderFocus
+      borderColor: theme.tokens.inputBorderFocus
     },
@@ -53,3 +53,3 @@ ":checked": {
         height: 8,
-        backgroundColor: theme.colors.inputControl,
+        backgroundColor: theme.tokens.inputControl,
         position: "absolute"
@@ -60,6 +60,6 @@ }
       cursor: "not-allowed",
-      borderColor: theme.colors.inputDisabledBorder,
+      borderColor: theme.tokens.inputDisabledBorder,
       ":checked": {
         ":before": {
-          backgroundColor: theme.colors.inputDisabledControl
+          backgroundColor: theme.tokens.inputDisabledControl
         }
@@ -66,0 +66,0 @@ }

lib/components/select-input/index.js

@@ -31,3 +31,3 @@ "use strict";
       disabled = _ref.disabled;
-  return disabled ? theme.colors.inputDisabledControl : theme.colors.inputControl;
+  return disabled ? theme.tokens.inputDisabledControl : theme.tokens.inputControl;
 };
@@ -95,7 +95,7 @@
     outline: 0,
-    borderColor: theme.colors.inputBorder,
-    backgroundColor: theme.colors.inputBackground,
+    borderColor: theme.tokens.inputBorder,
+    backgroundColor: theme.tokens.inputBackground,
     cursor: disabled ? "not-allowed" : "pointer",
     ":focus": {
-      borderColor: theme.colors.inputBorderFocus
+      borderColor: theme.tokens.inputBorderFocus
     }
@@ -102,0 +102,0 @@ };

lib/components/select-input/stories.js

@@ -27,2 +27,4 @@ "use strict";
 
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
@@ -32,4 +34,2 @@
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -56,3 +56,3 @@
 
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
+      _defineProperty(_assertThisInitialized(_this), "state", {
         options: [{
@@ -87,3 +87,3 @@ value: "bilmodell",
 
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleChange", function (e) {
+      _defineProperty(_assertThisInitialized(_this), "handleChange", function (e) {
         _this.setState({
@@ -131,3 +131,3 @@ value: e.target.value
 
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this2)), "state", {
+      _defineProperty(_assertThisInitialized(_this2), "state", {
         options: [{
@@ -158,3 +158,3 @@ value: "bilmodell",
 
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this2)), "handleChange", function (e) {
+      _defineProperty(_assertThisInitialized(_this2), "handleChange", function (e) {
         _this2.setState({
@@ -203,3 +203,3 @@ value: e.target.value
 
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this3)), "state", {
+      _defineProperty(_assertThisInitialized(_this3), "state", {
         options: [{
@@ -234,3 +234,3 @@ value: "bilmodell",
 
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this3)), "onChange", function (e) {
+      _defineProperty(_assertThisInitialized(_this3), "onChange", function (e) {
         _this3.setState({
@@ -237,0 +237,0 @@ value: e.target.value

lib/components/slider/index.js

@@ -38,2 +38,4 @@ "use strict";
 
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
@@ -43,4 +45,2 @@
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -66,4 +66,4 @@
     height: THUMB_HEIGHT,
-    border: "1px solid " + theme.colors.inputBorder,
-    background: theme.colors.inputBackground,
+    border: "1px solid " + theme.tokens.inputBorder,
+    background: theme.tokens.inputBackground,
     cursor: disabled ? "not-allowed" : "ew-resize",
@@ -75,3 +75,3 @@ display: "flex",
     ":focus": {
-      borderColor: theme.colors.inputBorderFocus
+      borderColor: theme.tokens.inputBorderFocus
     },
@@ -99,3 +99,3 @@ extend: {
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
+    _defineProperty(_assertThisInitialized(_this), "state", {
       isDragging: false,
@@ -106,3 +106,3 @@ lastStep: 0,
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "componentDidUpdate", function (prevProps) {
+    _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function (prevProps) {
       var initialValue = _this.props.initialValue;
@@ -120,3 +120,3 @@ var prevInitialValue = prevProps.initialValue;
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleChange", function () {
+    _defineProperty(_assertThisInitialized(_this), "handleChange", function () {
       var _this$props$onChange = _this.props.onChange,
@@ -135,15 +135,15 @@ onChange = _this$props$onChange === void 0 ? function () {} : _this$props$onChange;
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getElementProperty", function (element, property) {
+    _defineProperty(_assertThisInitialized(_this), "getElementProperty", function (element, property) {
       return element && element.getBoundingClientRect ? element.getBoundingClientRect()[property] : 0;
     });
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getElementWidth", function (element) {
+    _defineProperty(_assertThisInitialized(_this), "getElementWidth", function (element) {
       return _this.getElementProperty(element, "width");
     });
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getElementLeft", function (element) {
+    _defineProperty(_assertThisInitialized(_this), "getElementLeft", function (element) {
       return _this.getElementProperty(element, "left");
     });
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getNumberOfSteps", function () {
+    _defineProperty(_assertThisInitialized(_this), "getNumberOfSteps", function () {
       var _this$props = _this.props,
@@ -163,3 +163,3 @@ step = _this$props.step,
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getStepAtPercentagePosition", function (percentagePosition) {
+    _defineProperty(_assertThisInitialized(_this), "getStepAtPercentagePosition", function (percentagePosition) {
       var steps = _this.getNumberOfSteps();
@@ -170,3 +170,3 @@
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getStepForValue", function (value) {
+    _defineProperty(_assertThisInitialized(_this), "getStepForValue", function (value) {
       var _this$props2 = _this.props,
@@ -190,3 +190,3 @@ minValue = _this$props2.minValue,
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getValueAtStepPosition", function (step) {
+    _defineProperty(_assertThisInitialized(_this), "getValueAtStepPosition", function (step) {
       var _this$props3 = _this.props,
@@ -209,3 +209,3 @@ minValue = _this$props3.minValue,
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getCurrentValue", function () {
+    _defineProperty(_assertThisInitialized(_this), "getCurrentValue", function () {
       var currentStep = _this.state.currentStep;
@@ -215,3 +215,3 @@ return _this.getValueAtStepPosition(currentStep);
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "updateCurrentStep", function (position) {
+    _defineProperty(_assertThisInitialized(_this), "updateCurrentStep", function (position) {
       var trackWidth = _this.getElementWidth(_this.trackRef.current);
@@ -236,3 +236,3 @@
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getLeftPositionFromCurrentStep", function () {
+    _defineProperty(_assertThisInitialized(_this), "getLeftPositionFromCurrentStep", function () {
       if (!_this.trackRef || !_this.thumbRef) {
@@ -256,3 +256,3 @@ return 0;
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleMouseDown", function (e) {
+    _defineProperty(_assertThisInitialized(_this), "handleMouseDown", function (e) {
       _this.updateCurrentStep(e.clientX);
@@ -265,3 +265,3 @@
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleDragStart", function () {
+    _defineProperty(_assertThisInitialized(_this), "handleDragStart", function () {
       _this.setState({
@@ -276,3 +276,3 @@ isDragging: true,
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleDrag", function (e) {
+    _defineProperty(_assertThisInitialized(_this), "handleDrag", function (e) {
       var onMoveStart = _this.props.onMoveStart;
@@ -294,3 +294,3 @@
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleDragEnd", function () {
+    _defineProperty(_assertThisInitialized(_this), "handleDragEnd", function () {
       var onMoveEnd = _this.props.onMoveEnd;
@@ -316,3 +316,3 @@
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "adjustCurrentStepBy", function (diff) {
+    _defineProperty(_assertThisInitialized(_this), "adjustCurrentStepBy", function (diff) {
       var currentStep = _this.state.currentStep;
@@ -329,3 +329,3 @@
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleKeyDown", function (e) {
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (e) {
       e.preventDefault();
@@ -448,6 +448,6 @@ e.stopPropagation();
       }, _react.default.createElement(_arrow.Arrow, {
-        color: theme.colors[disabled ? "inputDisabledControl" : "inputControl"],
+        color: theme.tokens[disabled ? "inputDisabledControl" : "inputControl"],
         direction: "left"
       }), _react.default.createElement(_arrow.Arrow, {
-        color: theme.colors[disabled ? "inputDisabledControl" : "inputControl"],
+        color: theme.tokens[disabled ? "inputDisabledControl" : "inputControl"],
         direction: "right"
@@ -478,4 +478,4 @@ }));
           borderStyle: "solid",
-          borderColor: theme.colors.inputBorder,
-          background: theme.colors.inputBackground,
+          borderColor: theme.tokens.inputBorder,
+          background: theme.tokens.inputBackground,
           cursor: this.props.disabled ? "not-allwoed" : "pointer"
@@ -482,0 +482,0 @@ }, (0, _getThemeStyle.getThemeStyle)("sliderTrack", theme)],

lib/components/tab-nav/index.js

@@ -44,2 +44,4 @@ "use strict";
 
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
@@ -49,4 +51,2 @@
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -69,5 +69,5 @@
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {});
+    _defineProperty(_assertThisInitialized(_this), "state", {});
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getActiveIndex", function () {
+    _defineProperty(_assertThisInitialized(_this), "getActiveIndex", function () {
       var children = _this.props.children;
@@ -74,0 +74,0 @@ return children.length ? children.filter(Boolean).findIndex(function (child) {

lib/components/text-input/index.js

@@ -52,15 +52,15 @@ "use strict";
     outline: 0,
-    borderColor: theme.colors.inputBorder,
-    color: theme.colors.inputText,
-    background: theme.colors.inputBackground,
+    borderColor: theme.tokens.inputBorder,
+    color: theme.tokens.inputText,
+    background: theme.tokens.inputBackground,
     ":focus": {
-      borderColor: theme.colors.inputBorderFocus
+      borderColor: theme.tokens.inputBorderFocus
     },
     "::placeholder": {
-      color: theme.colors.inputPlaceholder
+      color: theme.tokens.inputPlaceholder
     },
     "[disabled]": {
       cursor: "not-allowed",
-      color: theme.colors.inputDisabledText,
-      borderColor: theme.colors.inputBorderDisabled
+      color: theme.tokens.inputDisabledText,
+      borderColor: theme.tokens.inputBorderDisabled
     }
@@ -67,0 +67,0 @@ };

lib/components/toggle/index.js

@@ -40,3 +40,3 @@ "use strict";
     ":focus + span": {
-      borderColor: theme.colors.inputBorderFocus
+      borderColor: theme.tokens.inputBorderFocus
     }
@@ -60,7 +60,7 @@ };
     outline: 0,
-    borderColor: theme.colors.inputBorder,
-    background: theme.colors.inputBackground,
+    borderColor: theme.tokens.inputBorder,
+    background: theme.tokens.inputBackground,
     cursor: disabled ? "not-allowed" : "pointer",
     ":focus": {
-      borderColor: theme.colors.inputBorderFocus
+      borderColor: theme.tokens.inputBorderFocus
     },
@@ -74,3 +74,3 @@ "::after": {
       height: 17,
-      background: disabled ? theme.colors.inputDisabledControl : theme.colors.inputControl,
+      background: disabled ? theme.tokens.inputDisabledControl : theme.tokens.inputControl,
       borderRadius: "50%",
@@ -77,0 +77,0 @@ transition: "transform 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000)",

lib/components/toggle/stories.js

@@ -27,2 +27,4 @@ "use strict";
 
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
@@ -32,4 +34,2 @@
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -56,3 +56,3 @@
 
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
+      _defineProperty(_assertThisInitialized(_this), "state", {
         checked: false
@@ -103,3 +103,3 @@ });
 
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this3)), "state", {
+      _defineProperty(_assertThisInitialized(_this3), "state", {
         checked: false
@@ -106,0 +106,0 @@ });

lib/deprecate.js

@@ -7,8 +7,2 @@ "use strict";
 exports.deprecate = deprecate;
-exports.deprecateObjectProperty = deprecateObjectProperty;
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 var isProduction = process.env.NODE_ENV === "production";
@@ -27,15 +21,2 @@ var cache = {};
   }
-}
-
-function deprecateObjectProperty(obj, property, message) {
-  // we have to create a copy or else the property would redefine
-  // its value over and over again leading to a max call stack error
-  var copy = _objectSpread({}, obj);
-
-  Object.defineProperty(obj, property, {
-    get: function get() {
-      deprecate(message);
-      return copy[property];
-    }
-  });
 }

lib/story-wrapper.js

@@ -21,4 +21,2 @@ "use strict";
 
-var _unicorn = _interopRequireDefault(require("./themes/unicorn"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -33,4 +31,3 @@
   volvo: _volvo.default,
-  polestar: _polestar.default,
-  unicorn: _unicorn.default
+  polestar: _polestar.default
 };
@@ -37,0 +34,0 @@ var defaultTheme = "volvo";

lib/styleguide/provider.js

@@ -12,6 +12,6 @@ "use strict";
 
-var _reactFela = require("react-fela");
-
 var _themeProvider = require("../theme-provider");
 
+var _styleProvider = require("../style-provider");
+
 var _volvo = _interopRequireDefault(require("../themes/volvo"));
@@ -67,3 +67,3 @@
 
-      return _react.default.createElement(_reactFela.RendererProvider, null, _react.default.createElement(_themeProvider.ThemeProvider, {
+      return _react.default.createElement(_styleProvider.StyleProvider, null, _react.default.createElement(_themeProvider.ThemeProvider, {
         theme: theme
@@ -70,0 +70,0 @@ }, this.props.children));

lib/themes/polestar.js

@@ -7,46 +7,48 @@ "use strict";
 exports.default = void 0;
-
-var _deprecate = require("../deprecate");
-
-// NOTE: For now this is just a hard copy of the volvo theme
-// it should be customized at some point to match the specific brand values
-
-/*
- * Please DO NOT use HEX shorthand for colors (eg. #333)
- * as it breaks compatibility with opacity suffixes
- * (eg. #333333AA)
- */
 var colors = {
   black: "#000000",
-  // grey1: "#161618",
+  white: "#FFFFFF",
   grey1: "rgb(30, 30, 30)",
-  // grey2: "#3D3D43",
   grey2: "rgb(65, 65, 65)",
-  // grey3: "#57575C",
   grey3: "rgb(100, 100,100)",
-  // grey4: "#75757A",
   grey4: "rgb(135, 135, 135)",
-  // grey5: "#C0C0C6",
   grey5: "rgb(165, 165, 165)",
-  // grey6: "#E8E8EE",
   grey6: "rgb(195, 195, 195)",
-  // grey7: "#F4F4FA",
   grey7: "rgb(225, 225, 225)",
-  // grey8: "#F0F0F0",
   grey8: "rgb(240, 240, 240)",
-  white: "#FFFFFF",
   primary: "#D3BC8D",
-  // TODO: eventually deprecate later
-  red: "#c42121",
-  redLight: "#de3b3b",
-  // secondary: "#c42121",
-  // secondaryLight: "#de3b3b",
-  // deprecated
-  blue: "#2b7bcd",
-  primaryBlue: "#007bcd",
-  primaryBlueLight: "#008ae6"
+  primaryLight: "#008ae6",
+  secondary: "#000000",
+  secondaryLight: "#161618",
+  destructive: "#C60C46",
+  destructiveLight: "#db0f4f"
 };
-(0, _deprecate.deprecateObjectProperty)(colors, "blue", 'Named colors like "blue" are deprecated. Use "primary" instead.');
-(0, _deprecate.deprecateObjectProperty)(colors, "primaryBlue", 'Named colors liked "primaryBlue" are deprecated. Use "primary" instead.');
-(0, _deprecate.deprecateObjectProperty)(colors, "primaryBlueLight", 'Named colors like "primaryBlueLight" are deprecated. Use "primaryLight" instead.'); // no s in here as thats the default at 0-480
+var tokens = {
+  buttonPaddingVertical: 16,
+  buttonPaddingHorizontal: 16,
+  buttonPrimaryColor: colors.primary,
+  buttonPrimaryForeground: colors.black,
+  buttonPrimaryHoverBackground: colors.primary,
+  buttonPrimaryActiveBackground: colors.primary,
+  buttonPrimaryLightColor: colors.white,
+  buttonPrimaryLightForeground: colors.black,
+  buttonPrimaryLightActiveBackground: colors.white,
+  buttonSecondaryColor: colors.black,
+  buttonSecondaryForeground: colors.white,
+  buttonDestructiveColor: colors.destructive,
+  buttonDestructiveForeground: colors.white,
+  buttonDestructiveHoverBackground: colors.destructiveLight,
+  buttonDestructiveActiveBackground: colors.destructive,
+  inputPadingVertical: 24,
+  inputPaddingHorizontal: 24,
+  inputForeground: "#222",
+  inputDisabledForeground: "#ccc",
+  inputDisabledControl: "#ccc",
+  inputDisabledBorder: "#f1f1f1",
+  inputBackground: "#fff",
+  inputBorder: colors.grey7,
+  inputBorderFocus: colors.grey5,
+  inputPlaceholder: colors.grey6,
+  inputControl: colors.primary
+}; // no s in here as thats the default at 0-480
 
@@ -100,2 +102,10 @@ var breakpointSizes = {
 var icons = ["account", "email", "search", "globe", "facebook", "twitter", "youtube", "linkedin", "instagram", "pinterest", "youku", "vkontakte", "wechat", "weibo"];
+var fonts = [{
+  fontFamily: "Polestar Unica77",
+  fontWeight: 400,
+  src: ["polestar-unica77/polestar-unica77-regular.woff2", "polestar-unica77/polestar-unica77-regular.ttf"]
+}];
+var fontTypes = {
+  UNICA77: "Polestar Unica77, Arial, sans-serif"
+};
 var logoImages = {
@@ -117,6 +127,7 @@ "wordmark-black": "polestar-wordmark-black.svg",
   colors: colors,
+  tokens: tokens,
   icons: icons,
-  fonts: [],
+  fonts: fonts,
   fontsPath: "/",
-  fontTypes: {},
+  fontTypes: fontTypes,
   logoImages: logoImages,
@@ -126,4 +137,41 @@ logoImagesPath: "/",
   // placeholder for custom brand styles
-  styles: {}
+  styles: {
+    button: function button(_ref) {
+      var theme = _ref.theme;
+      return {
+        fontFamily: theme.fontTypes.UNICA77
+      };
+    },
+    link: function link(_ref2) {
+      var theme = _ref2.theme;
+      return {
+        fontFamily: theme.fontTypes.UNICA77
+      };
+    },
+    navItem: function navItem(_ref3) {
+      var theme = _ref3.theme;
+      return {
+        fontFamily: theme.fontTypes.UNICA77
+      };
+    },
+    tabNavItem: function tabNavItem(_ref4) {
+      var theme = _ref4.theme;
+      return {
+        fontFamily: theme.fontTypes.UNICA77
+      };
+    },
+    tabNavBackButton: function tabNavBackButton(_ref5) {
+      var theme = _ref5.theme;
+      return {
+        fontFamily: theme.fontTypes.UNICA77
+      };
+    },
+    textInput: function textInput(_ref6) {
+      var theme = _ref6.theme;
+      return {
+        fontFamily: theme.fontTypes.UNICA77
+      };
+    }
+  }
 };
 exports.default = _default;

lib/themes/volvo.js

@@ -7,30 +7,13 @@ "use strict";
 exports.default = void 0;
-
-var _deprecate = require("../deprecate");
-
-/*
- * Please DO NOT use HEX shorthand for colors (eg. #333)
- * as it breaks compatibility with opacity suffixes
- * (eg. #333333AA)
- */
 var colors = {
   black: "#000000",
-  // grey1: "#161618",
+  white: "#FFFFFF",
   grey1: "rgb(30, 30, 30)",
-  // grey2: "#3D3D43",
   grey2: "rgb(65, 65, 65)",
-  // grey3: "#57575C",
   grey3: "rgb(100, 100,100)",
-  // grey4: "#75757A",
   grey4: "rgb(135, 135, 135)",
-  // grey5: "#C0C0C6",
   grey5: "rgb(165, 165, 165)",
-  // grey6: "#E8E8EE",
   grey6: "rgb(195, 195, 195)",
-  // grey7: "#F4F4FA",
   grey7: "rgb(225, 225, 225)",
-  // grey8: "#F0F0F0",
   grey8: "rgb(240, 240, 240)",
-  white: "#FFFFFF",
-  // themed colors
   primary: "#007bcd",
@@ -41,38 +24,32 @@ primaryLight: "#008ae6",
   destructive: "#C60C46",
-  destructiveLight: "#db0f4f",
-  red: "#C60C46",
-  redLight: "#db0f4f",
-  blue: "#2b7bcd",
-  primaryBlue: "#007bcd",
-  primaryBlueLight: "#008ae6",
-
-  // Input Styles
-  get inputBorder() {
-    return this.grey7;
-  },
-
-  get inputBorderFocus() {
-    return this.grey5;
-  },
-
-  get inputPlaceholder() {
-    return this.grey6;
-  },
-
-  get inputControl() {
-    return this.primaryLight;
-  },
-
-  inputText: "#222",
-  inputDisabledText: "#ccc",
+  destructiveLight: "#db0f4f"
+};
+var tokens = {
+  buttonPaddingVertical: 17,
+  buttonPaddingHorizontal: 50,
+  buttonPrimaryColor: colors.primary,
+  buttonPrimaryForeground: colors.white,
+  buttonPrimaryHoverBackground: colors.primaryLight,
+  buttonPrimaryActiveBackground: colors.primary,
+  buttonPrimaryLightColor: colors.white,
+  buttonPrimaryLightForeground: colors.black,
+  buttonPrimaryLightActiveBackground: colors.white,
+  buttonSecondaryColor: colors.black,
+  buttonSecondaryForeground: colors.white,
+  buttonDestructiveColor: colors.destructive,
+  buttonDestructiveForeground: colors.white,
+  buttonDestructiveHoverBackground: colors.destructiveLight,
+  buttonDestructiveActiveBackground: colors.destrutive,
+  inputPadingVertical: 24,
+  inputPaddingHorizontal: 24,
+  inputForeground: "#222",
+  inputDisabledForeground: "#ccc",
   inputDisabledControl: "#ccc",
   inputDisabledBorder: "#f1f1f1",
-  inputBackground: "#fff"
+  inputBackground: "#fff",
+  inputBorder: colors.grey7,
+  inputBorderFocus: colors.grey5,
+  inputPlaceholder: colors.grey6,
+  inputControl: colors.primaryLight
 };
-(0, _deprecate.deprecateObjectProperty)(colors, "blue", 'Named colors like "blue" are deprecated. Use "primary" instead.');
-(0, _deprecate.deprecateObjectProperty)(colors, "primaryBlue", 'Named colors liked "primaryBlue" are deprecated. Use "primary" instead.');
-(0, _deprecate.deprecateObjectProperty)(colors, "primaryBlueLight", 'Named colors like "primaryBlueLight" are deprecated. Use "primaryLight" instead.');
-(0, _deprecate.deprecateObjectProperty)(colors, "red", 'Named colors like "red" are deprecated. Use "destructive" instead.');
-(0, _deprecate.deprecateObjectProperty)(colors, "redLight", 'Named colors like "redLight" are deprecated. Use "destructiveLight" instead.'); // no s in here as thats the default at 0-480
-
 var breakpointSizes = {
@@ -236,2 +213,3 @@ m: 480,
   colors: colors,
+  tokens: tokens,
   icons: icons,
@@ -238,0 +216,0 @@ fonts: fonts,

package.json

 {
 	"name": "vcc-ui",
-	"version": "1.0.0-rc.6",
+	"version": "1.0.0-rc.7",
 	"license": "LicenseRef-LICENSE",
@@ -44,8 +44,8 @@ "main": "lib/index.js",
 	"devDependencies": {
-		"@babel/cli": "^7.2.0",
-		"@babel/core": "^7.2.0",
+		"@babel/cli": "^7.4.4",
+		"@babel/core": "^7.4.4",
 		"@babel/plugin-proposal-class-properties": "^7.2.1",
-		"@babel/plugin-transform-modules-commonjs": "^7.2.0",
+		"@babel/plugin-transform-modules-commonjs": "^7.4.4",
 		"@babel/polyfill": "^7.0.0",
-		"@babel/preset-env": "^7.0.0",
+		"@babel/preset-env": "^7.4.4",
 		"@babel/preset-react": "^7.0.0",
@@ -64,5 +64,5 @@ "@storybook/addon-actions": "^5.0.11",
 		"cross-env": "5.0.5",
-		"enzyme": "^3.3.0",
+		"enzyme": "^3.9.0",
 		"enzyme-adapter-react-16": "^1.1.1",
-		"eslint": "^5.3.0",
+		"eslint": "^5.16.0",
 		"eslint-config-prettier": "^2.9.0",
@@ -69,0 +69,0 @@ "eslint-plugin-compat": "^2.6.3",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

6557759

decreased by-0.14%

Number of package files

264

decreased by-0.75%

Lines of code

12033

decreased by-1.71%

No dependency changes