mx-design-tokens - npm Package Compare versions

Comparing version 4.1.0 to 5.0.0

CHANGELOG.md

@@ -7,2 +7,31 @@ # Changelog
 
+## [5.0.0] - 03-20-2020
+
+### Added
+- `core.Resolution` exports the int version of `core.MediaQuery`.
+- Ability to pass in a build `target` to the buildTheme function.
+- Exports `targets` const for use in other repos.
+- `core.LineHeight` accepts the `REACT` target to add the `px` definition.
+- `core.BoxShadow` accepts `target` with the current focus being `REACT`. Exploration still required.
+- `core.Easing` accepts `target`. Still exploring non web solutions.
+- `InputPaddingTop`
+- `InputPaddingRight`
+- `InputPaddingBottom`
+- `InputPaddingLeft`
+- `InputLabelPaddingLeft`
+- `InputLabelPaddingRight`
+
+### Changed
+- Argument order of `buildTheme`.
+- `core.Time.*` is now an int without the `ms`.
+- `core.MediaQuery.*` includes `px` as it's implied web values.
+
+### Removed
+- Removed `core.BorderRadius.Rounded` as a circle is created completely differently across the different platforms.
+- Removed `InputPadding` in favor of individually specified tokens.
+- Removed `InputLabelPadding` in favor of individually specified tokens.
+- Removed `BorderRadius.Radio` as it used `Rounded`.
+- Removed `BorderRadius.Switch` as it used `Rounded`.
+
+
 ## [4.1.0] - 03-16-2020
@@ -9,0 +38,0 @@

dist/index.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.dark = exports.light = exports.buildTheme = void 0;
+exports.dark = exports.light = exports.buildTheme = exports.targets = void 0;
 
@@ -33,4 +33,12 @@ var _core = _interopRequireDefault(require("./tokens/core"));
 
+var targets = {
+  REACT: 'react',
+  REACT_NATIVE: 'react_native',
+  NATIVE: 'native'
+};
+exports.targets = targets;
+
 var buildTheme = function buildTheme(themeName) {
-  var customColors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : targets.REACT;
+  var customColors = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
@@ -41,11 +49,16 @@ var customCore = _objectSpread({}, _core["default"], {
 
-  return _objectSpread({}, customCore, {
-    BackgroundColor: _backgroundColor["default"][themeName](customCore),
-    BorderColor: _borderColor["default"][themeName](customCore),
-    BorderRadius: _objectSpread({}, _core["default"].BorderRadius, {}, _borderRadius["default"][themeName](customCore)),
-    BoxShadow: _objectSpread({}, _core["default"].BoxShadow, {}, _boxShadow["default"][themeName](customCore)),
-    FontSize: _objectSpread({}, _core["default"].FontSize, {}, _fontSize["default"][themeName](customCore)),
-    Spacing: _objectSpread({}, _core["default"].Spacing, {}, _spacing["default"][themeName](customCore)),
-    TextColor: _textColor["default"][themeName](customCore)
+  var builtCore = {};
+  Object.keys(customCore).forEach(function (coreKey) {
+    var value = typeof customCore[coreKey] === 'function' ? customCore[coreKey](target) : customCore[coreKey];
+    builtCore[coreKey] = value;
   });
+  return _objectSpread({}, builtCore, {
+    BackgroundColor: _backgroundColor["default"][themeName](builtCore),
+    BorderColor: _borderColor["default"][themeName](builtCore),
+    BorderRadius: _objectSpread({}, _core["default"].BorderRadius, {}, _borderRadius["default"][themeName](builtCore)),
+    BoxShadow: _objectSpread({}, _core["default"].BoxShadow, {}, _boxShadow["default"][themeName](builtCore)),
+    FontSize: _objectSpread({}, _core["default"].FontSize, {}, _fontSize["default"][themeName](builtCore)),
+    Spacing: _objectSpread({}, _core["default"].Spacing, {}, _spacing["default"][themeName](builtCore)),
+    TextColor: _textColor["default"][themeName](builtCore)
+  });
 };
@@ -52,0 +65,0 @@

dist/tokens/borderRadius.js

@@ -24,6 +24,4 @@ "use strict";
     Card: core.BorderRadius.Medium,
-    Switch: core.BorderRadius.Rounded,
     Tooltip: core.BorderRadius.Medium,
-    Checkbox: core.BorderRadius.Small,
-    Radio: core.BorderRadius.Rounded
+    Checkbox: core.BorderRadius.Small
   };
@@ -30,0 +28,0 @@ };

dist/tokens/core.js

@@ -7,3 +7,13 @@ "use strict";
 exports["default"] = void 0;
-// This should not be modified
+
+var _index = require("../index");
+
+var addPx = function addPx(obj) {
+  var newObj = {};
+  Object.keys(obj).forEach(function (key) {
+    newObj[key] = "".concat(obj[key], "px");
+  });
+  return newObj;
+};
+
 var _default = {
@@ -46,10 +56,25 @@ Color: {
   },
-  BoxShadow: {
-    Low: ' 0px 1px 3px rgba(87, 102, 117, 0.2)',
-    Medium: ' 0px 3px 8px rgba(87, 102, 117, 0.15)',
-    High: ' 0px 10px 20px rgba(87, 102, 117, 0.16)',
-    Top: ' 0px -1px 3px rgba(87, 102, 117, 0.2)',
-    Left: ' -1px 0px 3px rgba(87, 102, 117, 0.2)',
-    Right: ' 1px 0px 3px rgba(87, 102, 117, 0.2)',
-    Focus: '0px 0px 0px 2px rgba(82, 138, 224, 0.8)'
+  BoxShadow: function BoxShadow(target) {
+    if (target === _index.targets.REACT) {
+      return {
+        Low: ' 0px 1px 3px rgba(87, 102, 117, 0.2)',
+        Medium: ' 0px 3px 8px rgba(87, 102, 117, 0.15)',
+        High: ' 0px 10px 20px rgba(87, 102, 117, 0.16)',
+        Top: ' 0px -1px 3px rgba(87, 102, 117, 0.2)',
+        Left: ' -1px 0px 3px rgba(87, 102, 117, 0.2)',
+        Right: ' 1px 0px 3px rgba(87, 102, 117, 0.2)',
+        Focus: '0px 0px 0px 2px rgba(82, 138, 224, 0.8)'
+      };
+    } // TODO: explore mobile solutions more
+
+
+    return {
+      Low: '',
+      Medium: '',
+      High: '',
+      Top: '',
+      Left: '',
+      Right: '',
+      Focus: ''
+    };
   },
@@ -59,4 +84,3 @@ BorderRadius: {
     Medium: 4,
-    Large: 16,
-    Rounded: "50%"
+    Large: 16
   },
@@ -79,12 +103,20 @@ FontSize: {
   },
-  LineHeight: {
-    Tiny: 12,
-    XSmall: 14,
-    Small: 16,
-    ParagraphSmall: 20,
-    Body: 20,
-    Paragraph: 24,
-    H3: 24,
-    H2: 32,
-    H1: 40
+  LineHeight: function LineHeight(target) {
+    var base = {
+      Tiny: 12,
+      XSmall: 14,
+      Small: 16,
+      ParagraphSmall: 20,
+      Body: 20,
+      Paragraph: 24,
+      H3: 24,
+      H2: 32,
+      H1: 40
+    };
+
+    if (target === _index.targets.REACT) {
+      return addPx(base);
+    }
+
+    return base;
   },
@@ -104,10 +136,31 @@ Spacing: {
   Time: {
-    Short: "300ms",
-    Med: "500ms",
-    Long: "1000ms"
+    Short: 300,
+    Med: 500,
+    Long: 1000
   },
-  Easing: {
-    Default: "cubic-bezier(.475,.425,0,.995)"
+  Easing: function Easing(target) {
+    if (target === _index.targets.REACT) {
+      return {
+        Default: "cubic-bezier(.475,.425,0,.995)"
+      };
+    } // TODO: Define type cubic-bezier?
+
+
+    return {
+      Default: {
+        x1: 0.475,
+        y1: 0.425,
+        x2: 0,
+        y2: 0.995
+      }
+    };
   },
+  // Convenience values as web consumes both constantly
   MediaQuery: {
+    Small: '576px',
+    Med: '768px',
+    Large: '992px',
+    XLarge: '1200px'
+  },
+  Resolution: {
     Small: 576,
@@ -114,0 +167,0 @@ Med: 768,

dist/tokens/spacing.js

@@ -16,19 +16,33 @@ "use strict";
   return {
+    // Button
     ButtonPadding: core.Spacing.Small,
+    // Card
+    CardSidePadding: core.Spacing.Medium,
+    // Checkbox
     CheckboxLabelMarginLeft: core.Spacing.Small,
     CheckboxLabelMarginRight: core.Spacing.Small,
+    // Container
+    ContainerSidePadding: core.Spacing.Large,
+    // Dropdown
+    DropdownToggle: core.Spacing.Small,
+    DropdownItemPaddingTopBottom: core.Spacing.Small,
+    DropdownItemPaddingLeftRight: core.Spacing.XSmall,
+    // Input
+    InputLabelTop: -Math.abs(core.Spacing.XSmall),
+    InputLabelMarginLeft: core.Spacing.Small,
+    InputLabelPaddingLeft: core.Spacing.Tiny,
+    InputLabelPaddingRight: core.Spacing.Tiny,
+    InputPaddingTop: core.Spacing.Medium,
+    InputPaddingRight: core.Spacing.Small,
+    InputPaddingBottom: core.Spacing.Small,
+    InputPaddingLeft: core.Spacing.Small,
+    InputHelpTextMarginTop: core.Spacing.Tiny,
+    // Modal
+    ModalPadding: core.Spacing.Small,
+    // Switch
     SwitchLabelMarginLeft: core.Spacing.Small,
     SwitchLabelMarginRight: core.Spacing.Small,
-    InputLabelTop: "-".concat(core.Spacing.XSmall),
-    InputLabelMarginLeft: core.Spacing.Small,
-    InputLabelPadding: "0 ".concat(core.Spacing.Tiny),
-    InputPadding: "".concat(core.Spacing.Medium, " ").concat(core.Spacing.Small, " ").concat(core.Spacing.Small, " ").concat(core.Spacing.Small),
-    InputHelpTextMarginTop: core.Spacing.Tiny,
+    // TextArea
     TextAreaPadding: core.Spacing.Small,
-    DropdownToggle: core.Spacing.Small,
-    DropdownItemPaddingTopBottom: core.Spacing.Small,
-    DropdownItemPaddingLeftright: core.Spacing.XSmall,
-    ModalPadding: core.Spacing.Small,
-    ContainerSidePadding: core.Spacing.Large,
-    CardSidePadding: core.Spacing.Medium,
+    // Tooltip
     TooltipPadding: core.Spacing.Small
@@ -35,0 +49,0 @@ };

package.json

 {
   "name": "mx-design-tokens",
-  "version": "4.1.0",
+  "version": "5.0.0",
   "description": "Design Tokens",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

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

Improved metrics

Total package byte prevSize

53577

increased by5.39%

Lines of code

778

increased by9.58%

No dependency changes