@atlaskit/tokens 0.10.28 → 0.10.30

package/dist/cjs/artifacts/typescript/atlassian-spacing-token-default-values.js

@@ -11,11 +11,10 @@ exports.default = void 0;
  * Token names mapped to their value in the default Atlassian themes ('light spacing').
  * These default values are used by the Babel plugin to optionally provide automatic fallbacks.
  *
- * @codegen <<SignedSource::e575bc332dcc60d3fe9e378605bc9100>>
+ * @codegen <<SignedSource::05c2fcc3d0dba0931605dc98f7540009>>
  * @codegenCommand yarn build tokens
  */
 var defaultTokenValues = {
-  'spacing.container.gutter': '8px',
   'spacing.scale.0': '0px',
   'spacing.scale.100': '8px',
   'spacing.scale.150': '12px',
@@ -27,7 +26,71 @@ var defaultTokenValues = {
   'spacing.scale.600': '48px',
   'spacing.scale.025': '2px',
   'spacing.scale.050': '4px',
-  'spacing.scale.075': '6px'
+  'spacing.scale.075': '6px',
+  'spacing.scaleLinear.0': '0px',
+  'spacing.scaleLinear.100': '2px',
+  'spacing.scaleLinear.200': '4px',
+  'spacing.scaleLinear.300': '6px',
+  'spacing.scaleLinear.400': '8px',
+  'spacing.scaleLinear.500': '12px',
+  'spacing.scaleLinear.600': '16px',
+  'spacing.scaleLinear.700': '20px',
+  'spacing.scaleLinear.800': '24px',
+  'spacing.scaleLinear.900': '32px',
+  'spacing.scaleLinear.1000': '40px',
+  'spacing.scaleLinear.1100': '48px',
+  'spacing.pixel.0': '0px',
+  'spacing.pixel.2': '2px',
+  'spacing.pixel.4': '4px',
+  'spacing.pixel.6': '6px',
+  'spacing.pixel.8': '8px',
+  'spacing.pixel.12': '12px',
+  'spacing.pixel.16': '16px',
+  'spacing.pixel.20': '20px',
+  'spacing.pixel.24': '24px',
+  'spacing.pixel.32': '32px',
+  'spacing.pixel.40': '40px',
+  'spacing.pixel.48': '48px',
+  'spacing.size.none': '0px',
+  'spacing.size.xxxxSmall': '2px',
+  'spacing.size.xxxSmall': '4px',
+  'spacing.size.xxSmall': '6px',
+  'spacing.size.xsmall': '8px',
+  'spacing.size.small': '12px',
+  'spacing.size.medium': '16px',
+  'spacing.size.large': '20px',
+  'spacing.size.xlarge': '24px',
+  'spacing.size.xxlarge': '32px',
+  'spacing.size.xxxlarge': '40px',
+  'spacing.size.xxxxlarge': '48px',
+  'spacing.ecl.element.2': '2px',
+  'spacing.ecl.element.4': '4px',
+  'spacing.ecl.element.6': '6px',
+  'spacing.ecl.element.8': '8px',
+  'spacing.ecl.container.12': '12px',
+  'spacing.ecl.container.16': '16px',
+  'spacing.ecl.container.20': '20px',
+  'spacing.ecl.container.24': '24px',
+  'spacing.ecl.layout.32': '32px',
+  'spacing.ecl.layout.40': '40px',
+  'spacing.ecl.layout.64': '48px',
+  'spacing.ccc.component.2': '2px',
+  'spacing.ccc.component.4': '4px',
+  'spacing.ccc.component.6': '6px',
+  'spacing.ccc.component.8': '8px',
+  'spacing.ccc.content.12': '12px',
+  'spacing.ccc.content.16': '16px',
+  'spacing.ccc.content.20': '20px',
+  'spacing.ccc.content.24': '24px',
+  'spacing.ccc.container.32': '32px',
+  'spacing.ccc.container.40': '40px',
+  'spacing.ccc.container.48': '48px',
+  'spacing.gap.100': '8px',
+  'spacing.gap.200': '16px',
+  'spacing.gap.300': '24px',
+  'spacing.inset.100': '8px',
+  'spacing.inset.200': '16px',
+  'spacing.inset.300': '24px'
 };
 var _default = defaultTokenValues;
 exports.default = _default;

package/dist/cjs/artifacts/typescript/atlassian-spacing-token-names.js

@@ -7,11 +7,10 @@ exports.default = void 0;
 
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::873e77ae05fb3ff2730f5f6110aaeae3>>
+ * @codegen <<SignedSource::1808e289835f4813ce4782e16cce419d>>
  * @codegenCommand yarn build tokens
  */
 var tokens = {
-  'spacing.container.gutter': '--ds-container-gutter',
   'spacing.scale.0': '--ds-scale-0',
   'spacing.scale.100': '--ds-scale-100',
   'spacing.scale.150': '--ds-scale-150',
@@ -23,7 +22,71 @@ var tokens = {
   'spacing.scale.600': '--ds-scale-600',
   'spacing.scale.025': '--ds-scale-025',
   'spacing.scale.050': '--ds-scale-050',
-  'spacing.scale.075': '--ds-scale-075'
+  'spacing.scale.075': '--ds-scale-075',
+  'spacing.scaleLinear.0': '--ds-scaleLinear-0',
+  'spacing.scaleLinear.100': '--ds-scaleLinear-100',
+  'spacing.scaleLinear.200': '--ds-scaleLinear-200',
+  'spacing.scaleLinear.300': '--ds-scaleLinear-300',
+  'spacing.scaleLinear.400': '--ds-scaleLinear-400',
+  'spacing.scaleLinear.500': '--ds-scaleLinear-500',
+  'spacing.scaleLinear.600': '--ds-scaleLinear-600',
+  'spacing.scaleLinear.700': '--ds-scaleLinear-700',
+  'spacing.scaleLinear.800': '--ds-scaleLinear-800',
+  'spacing.scaleLinear.900': '--ds-scaleLinear-900',
+  'spacing.scaleLinear.1000': '--ds-scaleLinear-1000',
+  'spacing.scaleLinear.1100': '--ds-scaleLinear-1100',
+  'spacing.pixel.0': '--ds-pixel-0',
+  'spacing.pixel.2': '--ds-pixel-2',
+  'spacing.pixel.4': '--ds-pixel-4',
+  'spacing.pixel.6': '--ds-pixel-6',
+  'spacing.pixel.8': '--ds-pixel-8',
+  'spacing.pixel.12': '--ds-pixel-12',
+  'spacing.pixel.16': '--ds-pixel-16',
+  'spacing.pixel.20': '--ds-pixel-20',
+  'spacing.pixel.24': '--ds-pixel-24',
+  'spacing.pixel.32': '--ds-pixel-32',
+  'spacing.pixel.40': '--ds-pixel-40',
+  'spacing.pixel.48': '--ds-pixel-48',
+  'spacing.size.none': '--ds-size-none',
+  'spacing.size.xxxxSmall': '--ds-size-xxxxSmall',
+  'spacing.size.xxxSmall': '--ds-size-xxxSmall',
+  'spacing.size.xxSmall': '--ds-size-xxSmall',
+  'spacing.size.xsmall': '--ds-size-xsmall',
+  'spacing.size.small': '--ds-size-small',
+  'spacing.size.medium': '--ds-size-medium',
+  'spacing.size.large': '--ds-size-large',
+  'spacing.size.xlarge': '--ds-size-xlarge',
+  'spacing.size.xxlarge': '--ds-size-xxlarge',
+  'spacing.size.xxxlarge': '--ds-size-xxxlarge',
+  'spacing.size.xxxxlarge': '--ds-size-xxxxlarge',
+  'spacing.ecl.element.2': '--ds-ecl-element-2',
+  'spacing.ecl.element.4': '--ds-ecl-element-4',
+  'spacing.ecl.element.6': '--ds-ecl-element-6',
+  'spacing.ecl.element.8': '--ds-ecl-element-8',
+  'spacing.ecl.container.12': '--ds-ecl-container-12',
+  'spacing.ecl.container.16': '--ds-ecl-container-16',
+  'spacing.ecl.container.20': '--ds-ecl-container-20',
+  'spacing.ecl.container.24': '--ds-ecl-container-24',
+  'spacing.ecl.layout.32': '--ds-ecl-layout-32',
+  'spacing.ecl.layout.40': '--ds-ecl-layout-40',
+  'spacing.ecl.layout.64': '--ds-ecl-layout-64',
+  'spacing.ccc.component.2': '--ds-ccc-component-2',
+  'spacing.ccc.component.4': '--ds-ccc-component-4',
+  'spacing.ccc.component.6': '--ds-ccc-component-6',
+  'spacing.ccc.component.8': '--ds-ccc-component-8',
+  'spacing.ccc.content.12': '--ds-ccc-content-12',
+  'spacing.ccc.content.16': '--ds-ccc-content-16',
+  'spacing.ccc.content.20': '--ds-ccc-content-20',
+  'spacing.ccc.content.24': '--ds-ccc-content-24',
+  'spacing.ccc.container.32': '--ds-ccc-container-32',
+  'spacing.ccc.container.40': '--ds-ccc-container-40',
+  'spacing.ccc.container.48': '--ds-ccc-container-48',
+  'spacing.gap.100': '--ds-gap-100',
+  'spacing.gap.200': '--ds-gap-200',
+  'spacing.gap.300': '--ds-gap-300',
+  'spacing.inset.100': '--ds-inset-100',
+  'spacing.inset.200': '--ds-inset-200',
+  'spacing.inset.300': '--ds-inset-300'
 };
 var _default = tokens;
 exports.default = _default;

package/dist/cjs/constants.js

@@ -3,25 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TOKEN_NOT_FOUND_CSS_VAR = exports.THEME_NAME_MAP = exports.THEME_DATA_ATTRIBUTE = exports.THEMES = exports.DEFAULT_THEME = exports.CSS_VAR_FULL = exports.CSS_PREFIX = void 0;
-var THEMES = ['light', 'dark', 'legacy-light', 'legacy-dark', 'spacing'];
-exports.THEMES = THEMES;
+exports.TOKEN_NOT_FOUND_CSS_VAR = exports.THEME_DATA_ATTRIBUTE = exports.DEFAULT_THEME = exports.CSS_VAR_FULL = exports.CSS_PREFIX = exports.COLOR_MODE_ATTRIBUTE = void 0;
 var THEME_DATA_ATTRIBUTE = 'data-theme';
 exports.THEME_DATA_ATTRIBUTE = THEME_DATA_ATTRIBUTE;
+var COLOR_MODE_ATTRIBUTE = 'data-color-mode';
+exports.COLOR_MODE_ATTRIBUTE = COLOR_MODE_ATTRIBUTE;
 var DEFAULT_THEME = 'light spacing';
 exports.DEFAULT_THEME = DEFAULT_THEME;
 var CSS_PREFIX = 'ds';
 exports.CSS_PREFIX = CSS_PREFIX;
-var CSS_VAR_FULL = ['opacity']; // Maps the longer theme name to a shorthand used in css/code
-
+var CSS_VAR_FULL = ['opacity'];
 exports.CSS_VAR_FULL = CSS_VAR_FULL;
-var THEME_NAME_MAP = {
-  'atlassian-light': 'light',
-  'atlassian-dark': 'dark',
-  'atlassian-legacy-light': 'legacy-light',
-  'atlassian-legacy-dark': 'legacy-dark',
-  'atlassian-spacing': 'spacing'
-};
-exports.THEME_NAME_MAP = THEME_NAME_MAP;
 var TOKEN_NOT_FOUND_CSS_VAR = "--".concat(CSS_PREFIX, "-token-not-found");
 exports.TOKEN_NOT_FOUND_CSS_VAR = TOKEN_NOT_FOUND_CSS_VAR;

package/dist/cjs/get-token.js

@@ -14,7 +14,7 @@ var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var _constants = require("./constants");
 
 var name = "@atlaskit/tokens";
-var version = "0.10.28";
+var version = "0.10.30";
 
 function token(path, fallback) {
   var token = _tokenNames.default[path];

package/dist/cjs/index.js

@@ -17,6 +17,12 @@ Object.defineProperty(exports, "setGlobalTheme", {
     return _setGlobalTheme.default;
   }
 });
+Object.defineProperty(exports, "themeConfig", {
+  enumerable: true,
+  get: function get() {
+    return _themeConfig.default;
+  }
+});
 Object.defineProperty(exports, "token", {
   enumerable: true,
   get: function get() {
@@ -34,4 +40,6 @@ var _getToken = _interopRequireDefault(require("./get-token"));
 
 var _setGlobalTheme = _interopRequireDefault(require("./set-global-theme"));
 
+var _themeConfig = _interopRequireDefault(require("./theme-config"));
+
 var _themeChangeObserver = require("./theme-change-observer");

package/dist/cjs/set-global-theme.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -7,15 +9,39 @@ exports.default = void 0;
 
 var _constants = require("./constants");
 
-var setGlobalTheme = function setGlobalTheme(theme) {
+var _themeConfig = _interopRequireDefault(require("./theme-config"));
+
+var setGlobalTheme = function setGlobalTheme(themeId) {
+  var shouldMatchSystem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var theme = Object.values(_themeConfig.default).find(function (_ref) {
+    var id = _ref.id;
+    return id === themeId;
+  });
+
   if (process.env.NODE_ENV !== 'production') {
-    if (!_constants.THEMES.includes(theme)) {
-      throw new Error("setGlobalTheme only accepts themes: ".concat(_constants.THEMES.join(', ')));
+    if (!theme) {
+      var themeIds = Object.values(_themeConfig.default).map(function (_ref2) {
+        var id = _ref2.id;
+        return id;
+      });
+      throw new Error("setGlobalTheme only accepts themes: ".concat(themeIds.join(', ')));
     }
   }
 
+  if (!theme) {
+    return;
+  }
+
   var element = document.documentElement;
-  element.setAttribute('data-theme', theme);
+  element.setAttribute(_constants.THEME_DATA_ATTRIBUTE, theme.id);
+
+  if (theme.attributes.type === 'color') {
+    element.setAttribute(_constants.COLOR_MODE_ATTRIBUTE, theme.attributes.mode);
+  }
+
+  if (shouldMatchSystem) {
+    element.setAttribute(_constants.COLOR_MODE_ATTRIBUTE, 'auto');
+  }
 };
 
 var _default = setGlobalTheme;

package/dist/cjs/theme-change-observer.js

@@ -20,7 +20,7 @@ var _react = require("react");
 var _constants = require("./constants");
 
 var getGlobalTheme = function getGlobalTheme() {
-  return typeof document !== 'undefined' ? document.documentElement.getAttribute(_constants.THEME_DATA_ATTRIBUTE) : null;
+  return typeof document !== 'undefined' ? document.documentElement.getAttribute(_constants.COLOR_MODE_ATTRIBUTE) : null;
 };
 /**
  * A MutationObserver which watches the `<html>` element for changes to the theme.
@@ -41,6 +41,7 @@ var ThemeMutationObserver = /*#__PURE__*/function () {
   function ThemeMutationObserver(callback) {
     (0, _classCallCheck2.default)(this, ThemeMutationObserver);
     (0, _defineProperty2.default)(this, "observer", null);
+    (0, _defineProperty2.default)(this, "mediaObserver", null);
     this.callback = callback;
   }
 
@@ -56,7 +57,7 @@ var ThemeMutationObserver = /*#__PURE__*/function () {
       }
 
       this.observer.observe(document.documentElement, {
-        attributeFilter: [_constants.THEME_DATA_ATTRIBUTE]
+        attributeFilter: [_constants.COLOR_MODE_ATTRIBUTE]
       });
     }
   }, {

package/dist/cjs/theme-config.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * This file contains the source of truth for themes and all associated meta data.
+ */
+
+/**
+ * Themes: The internal identifier of a theme.
+ * These ids are what the actual theme files/folders are called.
+ * style-dictionary will attempt to locate these in the file-system.
+ */
+
+/**
+ * Theme kinds: The type of theme.
+ * Some themes are entirely focused on Color, whilst others are purely focused on spacing.
+ * In the future other types may be introduced such as typography.
+ */
+
+/**
+ * Theme modes: The general purpose of a theme.
+ * This attr is used to apply the appropriate system-preference media selector
+ * It may also be used as a selector for mode-specific overrides such as light/dark images.
+ * The idea is there may exist many color themes, but every theme must either fit into light or dark.
+ */
+
+/**
+ * Theme ids: The value that will mounted to the DOM as a data attr
+ * For example: `data-theme="light"
+ *
+ * These ids must be kebab case
+ */
+
+/**
+ * Palettes: The set of base tokens a given theme may be populated with.
+ * For example: legacy light & dark themes use the "legacyPalette" containing colors from our
+ * previous color set.
+ */
+
+/**
+ * ThemeConfig: the source of truth for all theme meta-data.
+ * This object should be used whenever interfacing with themes.
+ */
+var themeConfig = {
+  'atlassian-light': {
+    id: 'light',
+    displayName: 'Light Theme',
+    palette: 'defaultPalette',
+    attributes: {
+      type: 'color',
+      mode: 'light'
+    }
+  },
+  'atlassian-dark': {
+    id: 'dark',
+    displayName: 'Dark Theme',
+    palette: 'defaultPalette',
+    attributes: {
+      type: 'color',
+      mode: 'dark'
+    }
+  },
+  'atlassian-legacy-light': {
+    id: 'legacy-light',
+    displayName: 'Light Theme (legacy)',
+    palette: 'legacyPalette',
+    attributes: {
+      type: 'color',
+      mode: 'light'
+    }
+  },
+  'atlassian-legacy-dark': {
+    id: 'legacy-dark',
+    displayName: 'Dark Theme (legacy)',
+    palette: 'legacyPalette',
+    attributes: {
+      type: 'color',
+      mode: 'dark'
+    }
+  },
+  'atlassian-spacing': {
+    id: 'spacing',
+    displayName: 'Atlassian Spacing',
+    palette: 'spacingScale',
+    attributes: {
+      type: 'spacing'
+    }
+  }
+};
+var _default = themeConfig;
+exports.default = _default;

package/dist/cjs/tokens/atlassian-spacing/spacing.js

@@ -6,11 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var spacing = {
   spacing: {
-    container: {
-      gutter: {
-        value: 'Space100'
-      }
-    },
     scale: {
       '0': {
         value: 'Space0'
@@ -48,6 +43,224 @@ var spacing = {
       '600': {
         value: 'Space600'
       }
+    },
+    scaleLinear: {
+      '0': {
+        value: 'Space0'
+      },
+      '100': {
+        value: 'Space025'
+      },
+      '200': {
+        value: 'Space050'
+      },
+      '300': {
+        value: 'Space075'
+      },
+      '400': {
+        value: 'Space100'
+      },
+      '500': {
+        value: 'Space150'
+      },
+      '600': {
+        value: 'Space200'
+      },
+      '700': {
+        value: 'Space250'
+      },
+      '800': {
+        value: 'Space300'
+      },
+      '900': {
+        value: 'Space400'
+      },
+      '1000': {
+        value: 'Space500'
+      },
+      '1100': {
+        value: 'Space600'
+      }
+    },
+    pixel: {
+      '0': {
+        value: 'Space0'
+      },
+      '2': {
+        value: 'Space025'
+      },
+      '4': {
+        value: 'Space050'
+      },
+      '6': {
+        value: 'Space075'
+      },
+      '8': {
+        value: 'Space100'
+      },
+      '12': {
+        value: 'Space150'
+      },
+      '16': {
+        value: 'Space200'
+      },
+      '20': {
+        value: 'Space250'
+      },
+      '24': {
+        value: 'Space300'
+      },
+      '32': {
+        value: 'Space400'
+      },
+      '40': {
+        value: 'Space500'
+      },
+      '48': {
+        value: 'Space600'
+      }
+    },
+    size: {
+      none: {
+        value: 'Space0'
+      },
+      xxxxSmall: {
+        value: 'Space025'
+      },
+      xxxSmall: {
+        value: 'Space050'
+      },
+      xxSmall: {
+        value: 'Space075'
+      },
+      xsmall: {
+        value: 'Space100'
+      },
+      small: {
+        value: 'Space150'
+      },
+      medium: {
+        value: 'Space200'
+      },
+      large: {
+        value: 'Space250'
+      },
+      xlarge: {
+        value: 'Space300'
+      },
+      xxlarge: {
+        value: 'Space400'
+      },
+      xxxlarge: {
+        value: 'Space500'
+      },
+      xxxxlarge: {
+        value: 'Space600'
+      }
+    },
+    ecl: {
+      element: {
+        '2': {
+          value: 'Space025'
+        },
+        '4': {
+          value: 'Space050'
+        },
+        '6': {
+          value: 'Space075'
+        },
+        '8': {
+          value: 'Space100'
+        }
+      },
+      container: {
+        '12': {
+          value: 'Space150'
+        },
+        '16': {
+          value: 'Space200'
+        },
+        '20': {
+          value: 'Space250'
+        },
+        '24': {
+          value: 'Space300'
+        }
+      },
+      layout: {
+        '32': {
+          value: 'Space400'
+        },
+        '40': {
+          value: 'Space500'
+        },
+        '64': {
+          value: 'Space600'
+        }
+      }
+    },
+    ccc: {
+      component: {
+        '2': {
+          value: 'Space025'
+        },
+        '4': {
+          value: 'Space050'
+        },
+        '6': {
+          value: 'Space075'
+        },
+        '8': {
+          value: 'Space100'
+        }
+      },
+      content: {
+        '12': {
+          value: 'Space150'
+        },
+        '16': {
+          value: 'Space200'
+        },
+        '20': {
+          value: 'Space250'
+        },
+        '24': {
+          value: 'Space300'
+        }
+      },
+      container: {
+        '32': {
+          value: 'Space400'
+        },
+        '40': {
+          value: 'Space500'
+        },
+        '48': {
+          value: 'Space600'
+        }
+      }
+    },
+    gap: {
+      100: {
+        value: 'Space100'
+      },
+      200: {
+        value: 'Space200'
+      },
+      300: {
+        value: 'Space300'
+      }
+    },
+    inset: {
+      100: {
+        value: 'Space100'
+      },
+      200: {
+        value: 'Space200'
+      },
+      300: {
+        value: 'Space300'
+      }
     }
   }
 };