@atlaskit/tokens 0.10.27 → 0.10.29

package/dist/cjs/artifacts/rename-mapping/atlassian-spacing.js

@@ -19,61 +19,13 @@ exports.default = void 0;
  * These changes will then be picked up by our tooling which will attempt to
  * migrate as many of these renames as possible.
  *
- * @codegen <<SignedSource::96a569b32686a2088f106c2ec4cd75d3>>
+ * @codegen <<SignedSource::a90d6d19262ac37cb4095da71ba3035c>>
  * @codegenCommand yarn build tokens
  */
 var renameMapper = [{
   "path": "spacing.container.gutter",
   "state": "experimental",
   "replacement": "8px"
-}, {
-  "path": "spacing.scale.0",
-  "state": "experimental",
-  "replacement": "0"
-}, {
-  "path": "spacing.scale.100",
-  "state": "experimental",
-  "replacement": "8px"
-}, {
-  "path": "spacing.scale.150",
-  "state": "experimental",
-  "replacement": "12px"
-}, {
-  "path": "spacing.scale.200",
-  "state": "experimental",
-  "replacement": "16px"
-}, {
-  "path": "spacing.scale.250",
-  "state": "experimental",
-  "replacement": "20px"
-}, {
-  "path": "spacing.scale.300",
-  "state": "experimental",
-  "replacement": "24px"
-}, {
-  "path": "spacing.scale.400",
-  "state": "experimental",
-  "replacement": "32px"
-}, {
-  "path": "spacing.scale.500",
-  "state": "experimental",
-  "replacement": "40px"
-}, {
-  "path": "spacing.scale.600",
-  "state": "experimental",
-  "replacement": "48px"
-}, {
-  "path": "spacing.scale.025",
-  "state": "experimental",
-  "replacement": "2px"
-}, {
-  "path": "spacing.scale.050",
-  "state": "experimental",
-  "replacement": "4px"
-}, {
-  "path": "spacing.scale.075",
-  "state": "experimental",
-  "replacement": "6px"
 }];
 var _default = renameMapper;
 exports.default = _default;

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

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::fd4d0992b574a7a22bc1b95ebcdaafc8>>
+ * @codegen <<SignedSource::e19d1d58b2463145dd0eae095e3d0b36>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -36,19 +36,17 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "spacing",
-    "state": "experimental",
-    "replacement": "0",
+    "state": "active",
     "introduced": "0.10.16",
     "description": "Equates to `0`. Can be used for resetting default spacing styles."
   },
-  "value": "0",
+  "value": "0px",
   "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
   "isSource": true,
   "original": {
     "attributes": {
       "group": "spacing",
-      "state": "experimental",
-      "replacement": "0",
+      "state": "active",
       "introduced": "0.10.16",
       "description": "Equates to `0`. Can be used for resetting default spacing styles."
     },
@@ -59,8 +57,7 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "spacing",
-    "state": "experimental",
-    "replacement": "8px",
+    "state": "active",
     "introduced": "0.10.16",
     "description": "Helpful guidance goes here"
   },
@@ -70,8 +67,7 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "spacing",
-      "state": "experimental",
-      "replacement": "8px",
+      "state": "active",
       "introduced": "0.10.16",
       "description": "Helpful guidance goes here"
     },
@@ -82,8 +78,7 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "spacing",
-    "state": "experimental",
-    "replacement": "12px",
+    "state": "active",
     "introduced": "0.10.16",
     "description": "Helpful guidance goes here"
   },
@@ -93,8 +88,7 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "spacing",
-      "state": "experimental",
-      "replacement": "12px",
+      "state": "active",
       "introduced": "0.10.16",
       "description": "Helpful guidance goes here"
     },
@@ -105,8 +99,7 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "spacing",
-    "state": "experimental",
-    "replacement": "16px",
+    "state": "active",
     "introduced": "0.10.16",
     "description": "Helpful guidance goes here"
   },
@@ -116,8 +109,7 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "spacing",
-      "state": "experimental",
-      "replacement": "16px",
+      "state": "active",
       "introduced": "0.10.16",
       "description": "Helpful guidance goes here"
     },
@@ -128,8 +120,7 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "spacing",
-    "state": "experimental",
-    "replacement": "20px",
+    "state": "active",
     "introduced": "0.10.16",
     "description": "Helpful guidance goes here"
   },
@@ -139,8 +130,7 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "spacing",
-      "state": "experimental",
-      "replacement": "20px",
+      "state": "active",
       "introduced": "0.10.16",
       "description": "Helpful guidance goes here"
     },
@@ -151,8 +141,7 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "spacing",
-    "state": "experimental",
-    "replacement": "24px",
+    "state": "active",
     "introduced": "0.10.16",
     "description": "Helpful guidance goes here"
   },
@@ -162,8 +151,7 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "spacing",
-      "state": "experimental",
-      "replacement": "24px",
+      "state": "active",
       "introduced": "0.10.16",
       "description": "Helpful guidance goes here"
     },
@@ -174,8 +162,7 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "spacing",
-    "state": "experimental",
-    "replacement": "32px",
+    "state": "active",
     "introduced": "0.10.16",
     "description": "Helpful guidance goes here"
   },
@@ -185,8 +172,7 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "spacing",
-      "state": "experimental",
-      "replacement": "32px",
+      "state": "active",
       "introduced": "0.10.16",
       "description": "Helpful guidance goes here"
     },
@@ -197,8 +183,7 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "spacing",
-    "state": "experimental",
-    "replacement": "40px",
+    "state": "active",
     "introduced": "0.10.16",
     "description": "Helpful guidance goes here"
   },
@@ -208,8 +193,7 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "spacing",
-      "state": "experimental",
-      "replacement": "40px",
+      "state": "active",
       "introduced": "0.10.16",
       "description": "Helpful guidance goes here"
     },
@@ -220,8 +204,7 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "spacing",
-    "state": "experimental",
-    "replacement": "48px",
+    "state": "active",
     "introduced": "0.10.16",
     "description": "Helpful guidance goes here"
   },
@@ -231,8 +214,7 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "spacing",
-      "state": "experimental",
-      "replacement": "48px",
+      "state": "active",
       "introduced": "0.10.16",
       "description": "Helpful guidance goes here"
     },
@@ -243,8 +225,7 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "spacing",
-    "state": "experimental",
-    "replacement": "2px",
+    "state": "active",
     "introduced": "0.10.16",
     "description": "Use for spacing in compact scenarios. The smallest value in our scale."
   },
@@ -254,8 +235,7 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "spacing",
-      "state": "experimental",
-      "replacement": "2px",
+      "state": "active",
       "introduced": "0.10.16",
       "description": "Use for spacing in compact scenarios. The smallest value in our scale."
     },
@@ -266,8 +246,7 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "spacing",
-    "state": "experimental",
-    "replacement": "4px",
+    "state": "active",
     "introduced": "0.10.16",
     "description": "Helpful guidance goes here"
   },
@@ -277,8 +256,7 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "spacing",
-      "state": "experimental",
-      "replacement": "4px",
+      "state": "active",
       "introduced": "0.10.16",
       "description": "Helpful guidance goes here"
     },
@@ -289,8 +267,7 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "spacing",
-    "state": "experimental",
-    "replacement": "6px",
+    "state": "active",
     "introduced": "0.10.16",
     "description": "Helpful guidance goes here"
   },
@@ -300,8 +277,7 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "spacing",
-      "state": "experimental",
-      "replacement": "6px",
+      "state": "active",
       "introduced": "0.10.16",
       "description": "Helpful guidance goes here"
     },

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

@@ -11,12 +11,12 @@ 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::c5f4991ca82e83d24ff38509c8df5121>>
+ * @codegen <<SignedSource::e575bc332dcc60d3fe9e378605bc9100>>
  * @codegenCommand yarn build tokens
  */
 var defaultTokenValues = {
   'spacing.container.gutter': '8px',
-  'spacing.scale.0': '0',
+  'spacing.scale.0': '0px',
   'spacing.scale.100': '8px',
   'spacing.scale.150': '12px',
   'spacing.scale.200': '16px',

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/entry-points/spacing-raw.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _atlassianSpacing.default;
+  }
+});
+
+var _atlassianSpacing = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-spacing"));

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.27";
+var version = "0.10.29";
 
 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/palettes/spacing-scale.js

@@ -8,7 +8,7 @@ var scale = {
   spacing: {
     scale: {
       Space0: {
-        value: '0',
+        value: '0px',
         attributes: {
           group: 'scale'
         }

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;