mx-design-tokens - npm Package Compare versions

Comparing version 9.0.1 to 10.0.0

dist/index.js

@@ -6,6 +6,10 @@ "use strict";
 });
-exports.dark = exports.light = exports.buildTheme = exports.targets = void 0;
+exports.dark = exports.light = exports.buildTheme = exports.themes = exports.targets = void 0;
 
-var _core = _interopRequireDefault(require("./tokens/core"));
+var _core = _interopRequireDefault(require("./core"));
 
+var _mods = require("./mods");
+
+var _utils = require("./utils");
+
 var _backgroundColor = _interopRequireDefault(require("./tokens/backgroundColor"));
@@ -27,10 +31,6 @@
 
+var _zIndex = _interopRequireDefault(require("./tokens/zIndex"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(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 targets = {
@@ -42,34 +42,55 @@ REACT: 'react',
 exports.targets = targets;
+var themes = {
+  LIGHT: 'light',
+  DARK: 'dark'
+};
+exports.themes = themes;
 
-var buildTheme = function buildTheme(themeName) {
+var getSectionTokens = function getSectionTokens() {
+  var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : themes.LIGHT;
+  var base = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _core["default"];
+  return {
+    BackgroundColor: _backgroundColor["default"][theme](base),
+    BorderColor: _borderColor["default"][theme](base),
+    BorderRadius: _borderRadius["default"][theme](base),
+    BoxShadow: _boxShadow["default"][theme](base),
+    LetterSpacing: _letterSpacing["default"][theme](base),
+    FontSize: _fontSize["default"][theme](base),
+    Spacing: _spacing["default"][theme](base),
+    TextColor: _textColor["default"][theme](base),
+    ZIndex: _zIndex["default"][theme](base)
+  };
+};
+
+var buildTheme = function buildTheme() {
+  var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : themes.LIGHT;
   var target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : targets.REACT;
-  var customColors = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var customFonts = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  var tokenOverrides = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  // core token changes propagate down
+  var baseCore = Object.assign({}, _core["default"]);
+  var baseLeaf = getSectionTokens(theme);
+  var baseParts = (0, _utils.splitTokens)(tokenOverrides, baseCore, baseLeaf);
+  var updatedCore = (0, _utils.collapseTokens)(baseParts.updatedTokens.core);
+  var mergedCore = (0, _utils.deepMerge)(baseCore, updatedCore);
+  var customCore = (0, _mods.applyTargetModifications)(target, mergedCore);
+  var customLeaf = getSectionTokens(theme, customCore);
+  var customBoth = (0, _utils.deepMerge)(customCore, customLeaf); // leaf token changes take priority over core token changes
 
-  var customCore = _objectSpread(_objectSpread({}, _core["default"]), {}, {
-    Color: _objectSpread(_objectSpread({}, _core["default"].Color), customColors),
-    Font: _objectSpread(_objectSpread({}, _core["default"].Font), customFonts)
+  var mergedLeaf = {};
+  var leafChanges = baseParts.updatedTokens.leaf;
+  leafChanges.map(function (l) {
+    mergedLeaf = (0, _utils.deepMerge)(mergedLeaf, l);
   });
-
-  var builtCore = {};
-  Object.keys(customCore).forEach(function (coreKey) {
-    var value = typeof customCore[coreKey] === 'function' ? customCore[coreKey](target) : customCore[coreKey];
-    builtCore[coreKey] = value;
+  var newChanges = baseParts.updatedTokens["new"];
+  newChanges.map(function (n) {
+    mergedLeaf = (0, _utils.deepMerge)(mergedLeaf, n);
   });
-  return _objectSpread(_objectSpread({}, builtCore), {}, {
-    BackgroundColor: _backgroundColor["default"][themeName](builtCore),
-    BorderColor: _borderColor["default"][themeName](builtCore),
-    BorderRadius: _objectSpread(_objectSpread({}, _core["default"].BorderRadius), _borderRadius["default"][themeName](builtCore)),
-    BoxShadow: _objectSpread(_objectSpread({}, _core["default"].BoxShadow), _boxShadow["default"][themeName](builtCore)),
-    LetterSpacing: _letterSpacing["default"][themeName](builtCore),
-    FontSize: _objectSpread(_objectSpread({}, _core["default"].FontSize), _fontSize["default"][themeName](builtCore)),
-    Spacing: _objectSpread(_objectSpread({}, _core["default"].Spacing), _spacing["default"][themeName](builtCore)),
-    TextColor: _textColor["default"][themeName](builtCore)
-  });
+  var builtTokens = (0, _utils.deepMerge)(customBoth, mergedLeaf);
+  return builtTokens;
 };
 
 exports.buildTheme = buildTheme;
-var light = buildTheme('light');
+var light = buildTheme(themes.LIGHT);
 exports.light = light;
-var dark = buildTheme('dark');
+var dark = buildTheme(themes.DARK);
 exports.dark = dark;

dist/tokens/borderRadius.js

@@ -15,3 +15,3 @@ "use strict";
 var light = function light(core) {
-  return {
+  return _objectSpread(_objectSpread({}, core.BorderRadius), {}, {
     // Button
@@ -25,3 +25,3 @@ Button: core.BorderRadius.Medium,
     // Chip
-    Chip: core.BorderRadius.Small,
+    Chip: core.BorderRadius.XLarge,
     // Container
@@ -41,3 +41,3 @@ Container: core.BorderRadius.Medium,
     Tooltip: core.BorderRadius.Medium
-  };
+  });
 };
@@ -44,0 +44,0 @@

dist/tokens/fontSize.js

@@ -15,3 +15,3 @@ "use strict";
 var light = function light(core) {
-  return {
+  return _objectSpread(_objectSpread({}, core.FontSize), {}, {
     // Button
@@ -38,3 +38,3 @@ Button: core.FontSize.Body,
     TooltipText: core.FontSize.ParagraphSmall
-  };
+  });
 };
@@ -41,0 +41,0 @@

dist/tokens/spacing.js

@@ -15,3 +15,3 @@ "use strict";
 var light = function light(core) {
-  return {
+  return _objectSpread(_objectSpread({}, core.Spacing), {}, {
     // Button
@@ -60,3 +60,3 @@ ButtonPadding: core.Spacing.Small,
     TooltipPadding: core.Spacing.Small
-  };
+  });
 };
@@ -63,0 +63,0 @@

dist/tokens/textColor.js

@@ -100,3 +100,3 @@ "use strict";
     // Dropdown
-    DropdownMenuItemActive: core.Color.White,
+    DropdownMenuItemActive: core.Color.NeutralWhite,
     // Chip
@@ -103,0 +103,0 @@ ChipDefault: core.Color.NeutralWhite,

dist/tokens/zIndex.js

@@ -8,5 +8,5 @@ "use strict";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
@@ -13,0 +13,0 @@ 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; }

package.json

 {
   "name": "mx-design-tokens",
-  "version": "9.0.1",
+  "version": "10.0.0",
   "description": "Design Tokens",
@@ -10,6 +10,3 @@ "main": "dist/index.js",
   },
-  "files": [
-    "dist",
-    "json"
-  ],
+  "files": ["dist"],
   "repository": {
@@ -16,0 +13,0 @@ "type": "git",

README.md

 # MX Design Tokens
 
-A very simple utility for sharing themed styling information.
+A simple utility for sharing themed styling information.
 
@@ -16,3 +16,3 @@ ## Installation
 ```
-import { light, dark, targets } from 'mx-design-tokens'
+import { light, dark } from 'mx-design-tokens'
 ```
@@ -25,3 +25,13 @@
 
-const theme = buildTheme('light', targets.REACT, { Primary300: '#876543' })
+const myCustomOverrides = {
+  "Color": {
+    "Brand300": "green"
+  },
+  "Custom": {
+    "ButtonHeight": 42,
+    "InputText": "lime"
+  }
+}
+
+const greenTheme = buildTheme('light', 'react', myCustomOverrides)
 ```
@@ -42,13 +52,24 @@
 
-[CLICK HERE](docs/tokens.md) for a list of all the current tokens available with default colors from the light theme.
+| Token Output Types                                                                        | Description |
+| :---------------------------------------------------------------------------------------- | :----- |
+| [Markdown](https://github.com/mxenabled/mx-design-tokens/blob/master/dist/output/md/tokens.md) | documentation for [light theme tokens](https://github.com/mxenabled/mx-design-tokens/blob/master/dist/output/md/tokens.md#-light-theme-tokens) |
+|   | documentation for [dark theme tokens](https://github.com/mxenabled/mx-design-tokens/blob/master/dist/output/md/tokens.md#-dark-theme-tokens) theme tokens |
+| [JSON - React Web Apps](https://github.com/mxenabled/mx-design-tokens/blob/master/dist/output/json/light.json)                                      |
+| [SCSS - Sass / Rails Apps](https://github.com/mxenabled/mx-design-tokens/blob/master/dist/output/scss/light.scss)                                   |
+| [CSS - Other Web Apps](https://github.com/mxenabled/mx-design-tokens/blob/master/dist/output/css/light.css)                                         |
+| JSON - React Native Apps (_work in progress..._)                                          |
+| JSON - Mobile OS Apps (_work in progress..._)                                             |
 
 ## Generate files from Tokens
 
-| Command              | Description                                                                 |
-| -------------------- | --------------------------------------------------------------------------- |
-| `npm run build:docs` | Update the markdown for viewing the [tokens](docs/tokens.md)                |
-| `npm run build:json` | Compile static JSON tokens for development                                  |
-| `npm run build:scss` | Compile static SCSS files for projects using [Sass](https://sass-lang.com/) |
-| `npm run build:css`  | Compile static CSS variables for use in any web project                     |
-| `npm run build:all`  | Builds everything above in one easy step                                    |
+| Command              | Description                                                                                              |
+| :------------------- | :------------------------------------------------------------------------------------------------------- |
+|                      |                                                                                                          |
+| `npm run build:all`  | Builds everything in one easy step                                                                       |
+|                      |                                                                                                          |
+| `npm run build`      | Compile `src` files out to the `dist` folder                                                             |
+| `npm run build:docs` | Compile markdown documentation for [viewing all the tokens](https://github.com/mxenabled/mx-design-tokens/blob/master/dist/output/md/tokens.md)                    |
+| `npm run build:json` | Compile static [JSON](https://www.json.org/) files to use as style objects in React Web Apps             |
+| `npm run build:scss` | Compile static [SCSS](https://sass-lang.com/) variables to use in Sass / Rails Apps                      |
+| `npm run build:css`  | Compile static [CSS](https://www.w3.org/Style/CSS/Overview.en.html) variables for use in any web project |
 
@@ -55,0 +76,0 @@ ## Publishing to NPM

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

188847

increased by219.37%

Number of package files

24

increased by50%

Lines of code

2800

increased by191.36%

Number of lines in readme file

81

increased by35%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes