mx-design-tokens - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/tokens/backgroundColor.js

+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _core = _interopRequireDefault(require("./core"));
+
+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(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 _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 light = {
+  LinkButtonHover: _core["default"].Color.Primary100,
+  PrimaryButton: _core["default"].Color.Primary300,
+  PrimaryButtonHover: _core["default"].Color.Primary400,
+  PrimaryButtonDisabled: _core["default"].Color.Neutral200,
+  NeutralButton: _core["default"].Color.NeutralWhite,
+  TransparentButtonHover: _core["default"].Color.Primary100,
+  TransparentButtonDisabled: _core["default"].Color.Neutral600,
+  Input: _core["default"].Color.Neutral100,
+  InputFocus: _core["default"].Color.NeutralWhite,
+  InputDisabled: _core["default"].Color.TransparentNeutral100,
+  Modal: _core["default"].Color.NeutralWhite
+};
+
+var dark = _objectSpread({}, light);
+
+var _default = {
+  light: light,
+  dark: dark
+};
+exports["default"] = _default;

dist/tokens/borderColor.js

+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _core = _interopRequireDefault(require("./core"));
+
+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(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 _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 light = {
+  NeutralButton: _core["default"].Color.Neutral400,
+  NeutralButtonHover: _core["default"].Color.Primary400,
+  // NeutralButtonDisabled: core.Color.Neutral400,
+  Input: _core["default"].Color.Neutral400,
+  InputHover: _core["default"].Color.Neutral600,
+  InputFocus: _core["default"].Color.Primary300,
+  InputError: _core["default"].Color.Error300,
+  InputDisabled: _core["default"].Color.TransparentNeutral400,
+  LinkButtonHover: _core["default"].Color.Neutral400,
+  Dropdown: _core["default"].Color.Neutral400,
+  DropdownHover: _core["default"].Color.Neutral600,
+  DropdownFocus: _core["default"].Color.Primary300,
+  DropdownError: _core["default"].Color.Error300,
+  DropdownDisabled: _core["default"].Color.TransparentNeutral400
+};
+
+var dark = _objectSpread({}, light);
+
+var _default = {
+  light: light,
+  dark: dark
+};
+exports["default"] = _default;

dist/tokens/borderRadius.js

+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _core = _interopRequireDefault(require("./core"));
+
+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(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 _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 light = {
+  Button: _core["default"].BorderRadius.Medium,
+  Input: _core["default"].BorderRadius.Medium,
+  Modal: _core["default"].BorderRadius.Medium,
+  ModalClose: _core["default"].BorderRadius.Medium,
+  DropdownToggle: _core["default"].BorderRadius.Medium,
+  DropdownMenu: _core["default"].BorderRadius.Medium,
+  Container: _core["default"].BorderRadius.Medium,
+  Card: _core["default"].BorderRadius.Medium
+};
+
+var dark = _objectSpread({}, light);
+
+var _default = {
+  light: light,
+  dark: dark
+};
+exports["default"] = _default;

dist/tokens/boxShadow.js

+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _core = _interopRequireDefault(require("./core"));
+
+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(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 _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 light = {
+  Card: _core["default"].BoxShadow.Low,
+  DropdownMenu: _core["default"].BoxShadow.Medium,
+  Modal: _core["default"].BoxShadow.High,
+  BottomBar: _core["default"].BoxShadow.Top,
+  Drawer: _core["default"].BoxShadow.Left
+};
+
+var dark = _objectSpread({}, light);
+
+var _default = {
+  light: light,
+  dark: dark
+};
+exports["default"] = _default;

dist/tokens/fontSize.js

+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _core = _interopRequireDefault(require("./core"));
+
+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(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 _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 light = {
+  Input: _core["default"].FontSize.Body,
+  InputLabel: _core["default"].FontSize.Body,
+  InputHelpText: _core["default"].FontSize.Small,
+  TextArea: _core["default"].FontSize.Body,
+  TextAreaHelpText: _core["default"].FontSize.Small,
+  DropdownToggle: _core["default"].FontSize.Body,
+  DropdownItems: _core["default"].FontSize.Body,
+  ModalHeader: _core["default"].FontSize.H3,
+  LinkButtonSmall: _core["default"].FontSize.Small,
+  LinkButtonLarge: _core["default"].FontSize.Body,
+  Button: _core["default"].FontSize.Body
+};
+
+var dark = _objectSpread({}, light);
+
+var _default = {
+  light: light,
+  dark: dark
+};
+exports["default"] = _default;

dist/tokens/textColor.js

+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _core = _interopRequireDefault(require("./core"));
+
+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(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 _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 light = {
+  Default: _core["default"].Color.Neutral900,
+  Secondary: _core["default"].Color.Neutral700,
+  Active: _core["default"].Color.Primary300,
+  ActiveHover: _core["default"].Color.Primary400,
+  Error: _core["default"].Color.Error300,
+  Disabled: _core["default"].Color.Neutral600,
+  InputPlaceholder: _core["default"].Color.Neutral600,
+  LinkButton: _core["default"].Color.Primary300,
+  LinkButtonHover: _core["default"].Color.Primary400,
+  PrimaryButton: _core["default"].Color.NeutralWhite,
+  PrimaryButtonDisabled: _core["default"].Color.Neutral500,
+  NeutralButton: _core["default"].Color.Primary300,
+  NeutralButtonHover: _core["default"].Color.Primary400,
+  NeutralButtonDisabled: _core["default"].Color.Neutral600,
+  TransparentButton: _core["default"].Color.Primary300,
+  TransparentButtonHover: _core["default"].Color.Primary400,
+  TransparentButtonDisabled: _core["default"].Color.Neutral600
+};
+
+var dark = _objectSpread({}, light);
+
+var _default = {
+  light: light,
+  dark: dark
+};
+exports["default"] = _default;

dist/index.js

@@ -10,13 +10,15 @@ "use strict";
 
-var _backgroundColors = _interopRequireDefault(require("./tokens/backgroundColors"));
+var _backgroundColor = _interopRequireDefault(require("./tokens/backgroundColor"));
 
-var _borderColors = _interopRequireDefault(require("./tokens/borderColors"));
+var _borderColor = _interopRequireDefault(require("./tokens/borderColor"));
 
-var _borderRadii = _interopRequireDefault(require("./tokens/borderRadii"));
+var _borderRadius = _interopRequireDefault(require("./tokens/borderRadius"));
 
-var _shadows = _interopRequireDefault(require("./tokens/shadows"));
+var _boxShadow = _interopRequireDefault(require("./tokens/boxShadow"));
 
+var _fontSize = _interopRequireDefault(require("./tokens/fontSize"));
+
 var _spacing = _interopRequireDefault(require("./tokens/spacing"));
 
-var _textColors = _interopRequireDefault(require("./tokens/textColors"));
+var _textColor = _interopRequireDefault(require("./tokens/textColor"));
 
@@ -33,8 +35,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
   return _objectSpread({}, _core["default"], {
-    BackgroundColors: _backgroundColors["default"][themeName],
-    BorderColors: _borderColors["default"][themeName],
-    BorderRadii: _objectSpread({}, _core["default"].BorderRadii, {}, _borderRadii["default"][themeName]),
-    Shadows: _objectSpread({}, _core["default"].Shadows, {}, _shadows["default"][themeName]),
+    BackgroundColor: _backgroundColor["default"][themeName],
+    BorderColor: _borderColor["default"][themeName],
+    BorderRadius: _objectSpread({}, _core["default"].BorderRadius, {}, _borderRadius["default"][themeName]),
+    BoxShadow: _objectSpread({}, _core["default"].BoxShadow, {}, _boxShadow["default"][themeName]),
+    FontSize: _objectSpread({}, _core["default"].FontSize, {}, _fontSize["default"][themeName]),
     Spacing: _objectSpread({}, _core["default"].Spacing, {}, _spacing["default"][themeName]),
-    TextColors: _textColors["default"][themeName]
+    TextColor: _textColor["default"][themeName]
   });
@@ -41,0 +44,0 @@ };

dist/tokens/core.js

@@ -9,85 +9,91 @@ "use strict";
 var _default = {
-  Colors: {
-    "Primary100": "#EAF1FB",
-    "Primary200": "#528AE0",
-    "Primary300": "#2F73DA",
-    "Primary400": "#165ECC",
-    "Primary500": "#034AB3",
-    "NeutralWhite": "#FFFFFF",
-    "Neutral100": "#F7F9FC",
-    "Neutral200": "#EDF1F7",
-    "Neutral300": "#E2E8F0",
-    "Neutral400": "#CBD3DF",
-    "Neutral500": "#A4B0C1",
-    "Neutral600": "#768397",
-    "Neutral700": "#454F5E",
-    "Neutral800": "#2D3847",
-    "Neutral900": "#19212C",
-    "Success100": "#B3F7D0",
-    "Success200": "#79F3C0",
-    "Success300": "#1AD6A8",
-    "Success400": "#00BE8E",
-    "Success500": "#008557",
-    "Warning100": "#FEF7B9",
-    "Warning200": "#FFDA6C",
-    "Warning300": "#FFB400",
-    "Warning400": "#FA8902",
-    "Warning500": "#C33E01",
-    "Error100": "#FECAC9",
-    "Error200": "#FF8589",
-    "Error300": "#DC2346",
-    "error400": "#C3003E",
-    "error500": "#8D003C",
-    "TransparentNeutral100": "rgba(247, 249, 252, 0.55)",
-    "TransparentNeutral400": "rgba(203, 211, 223, 0.55)",
-    "TransparentScrim": "rgba(0, 0, 0, 0.25)"
+  Color: {
+    Primary100: '#EAF1FB',
+    Primary200: '#528AE0',
+    Primary300: '#2F73DA',
+    Primary400: '#165ECC',
+    Primary500: '#034AB3',
+    NeutralWhite: '#FFFFFF',
+    Neutral100: '#F7F9FC',
+    Neutral200: '#EDF1F7',
+    Neutral300: '#E2E8F0',
+    Neutral400: '#CBD3DF',
+    Neutral500: '#A4B0C1',
+    Neutral600: '#768397',
+    Neutral700: '#454F5E',
+    Neutral800: '#2D3847',
+    Neutral900: '#19212C',
+    Success100: '#B3F7D0',
+    Success200: '#79F3C0',
+    Success300: '#1AD6A8',
+    Success400: '#00BE8E',
+    Success500: '#008557',
+    Warning100: '#FEF7B9',
+    Warning200: '#FFDA6C',
+    Warning300: '#FFB400',
+    Warning400: '#FA8902',
+    Warning500: '#C33E01',
+    Error100: '#FECAC9',
+    Error200: '#FF8589',
+    Error300: '#DC2346',
+    Error400: '#C3003E',
+    Error500: '#8D003C',
+    TransparentNeutral100: 'rgba(247, 249, 252, 0.55)',
+    TransparentNeutral400: 'rgba(203, 211, 223, 0.55)',
+    TransparentScrim: 'rgba(0, 0, 0, 0.25)'
   },
-  Shadows: {
-    "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)"
+  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: '0 0 0 2px rgba(82, 138, 224, 0.8)'
   },
-  BorderRadii: {
-    "Small": "2px",
-    "Medium": "4px",
-    "Large": "16px"
+  BorderRadius: {
+    Small: '2px',
+    Medium: '4px',
+    Large: '16px'
   },
-  FontSizes: {
-    "Tiny": "10px",
-    "XSmall": "12px",
-    "Small": "14px",
-    "ParagraphSmall": "14px",
-    "Body": "16px",
-    "Paragraph": "16px",
-    "H3": "20px",
-    "H2": "24px",
-    "H1": "36px"
+  FontSize: {
+    Tiny: '10px',
+    XSmall: '12px',
+    Small: '14px',
+    ParagraphSmall: '14px',
+    Body: '16px',
+    Paragraph: '16px',
+    H3: '20px',
+    H2: '24px',
+    H1: '36px'
   },
-  LineHeights: {
-    "Tiny": "12px",
-    "XSmall": "16px",
-    "Small": "16px",
-    "ParagraphSmall": "20px",
-    "Body": "20px",
-    "Paragraph": "24px",
-    "H3": "24px",
-    "H2": "32px",
-    "H1": "44px"
+  FontWeight: {
+    Regular: '400',
+    Semibold: '600',
+    Bold: '700'
   },
+  LineHeight: {
+    Tiny: '12px',
+    XSmall: '16px',
+    Small: '16px',
+    ParagraphSmall: '20px',
+    Body: '20px',
+    Paragraph: '24px',
+    H3: '24px',
+    H2: '32px',
+    H1: '44px'
+  },
   Spacing: {
-    "Tiny": "4px",
-    "XSmall": "8px",
-    "Small": "12px",
-    "Medium": "16px",
-    "Large": "24px",
-    "XLarge": "32px",
-    "XXLarge": "40px",
-    "XXXLarge": "48px",
-    "Jumbo": "64px",
-    "SuperJumbo": "96px"
+    Tiny: '4px',
+    XSmall: '8px',
+    Small: '12px',
+    Medium: '16px',
+    Large: '24px',
+    XLarge: '32px',
+    XXLarge: '40px',
+    XXXLarge: '48px',
+    Jumbo: '64px',
+    SuperJumbo: '96px'
   }
 };
 exports["default"] = _default;

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

32969

60.12%

Number of package files

17

54.55%

Lines of code

522

56.29%

No dependency changes