@atlaskit/tokens 0.10.27 → 0.10.29

package/dist/es2019/theme-config.js

@@ -0,0 +1,87 @@
+/**
+ * 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.
+ */
+const 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'
+    }
+  }
+};
+export default themeConfig;

package/dist/es2019/tokens/default/spacing/spacing.js

@@ -15,8 +15,7 @@ const spacing = {
       '0': {
         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.'
         }
@@ -24,8 +23,7 @@ const spacing = {
       '025': {
         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.'
         }
@@ -33,8 +31,7 @@ const spacing = {
       '050': {
         attributes: {
           group: 'spacing',
-          state: 'experimental',
-          replacement: '4px',
+          state: 'active',
           introduced: '0.10.16',
           description: 'Helpful guidance goes here'
         }
@@ -42,8 +39,7 @@ const spacing = {
       '075': {
         attributes: {
           group: 'spacing',
-          state: 'experimental',
-          replacement: '6px',
+          state: 'active',
           introduced: '0.10.16',
           description: 'Helpful guidance goes here'
         }
@@ -51,8 +47,7 @@ const spacing = {
       '100': {
         attributes: {
           group: 'spacing',
-          state: 'experimental',
-          replacement: '8px',
+          state: 'active',
           introduced: '0.10.16',
           description: 'Helpful guidance goes here'
         }
@@ -60,8 +55,7 @@ const spacing = {
       '150': {
         attributes: {
           group: 'spacing',
-          state: 'experimental',
-          replacement: '12px',
+          state: 'active',
           introduced: '0.10.16',
           description: 'Helpful guidance goes here'
         }
@@ -69,8 +63,7 @@ const spacing = {
       '200': {
         attributes: {
           group: 'spacing',
-          state: 'experimental',
-          replacement: '16px',
+          state: 'active',
           introduced: '0.10.16',
           description: 'Helpful guidance goes here'
         }
@@ -78,8 +71,7 @@ const spacing = {
       '250': {
         attributes: {
           group: 'spacing',
-          state: 'experimental',
-          replacement: '20px',
+          state: 'active',
           introduced: '0.10.16',
           description: 'Helpful guidance goes here'
         }
@@ -87,8 +79,7 @@ const spacing = {
       '300': {
         attributes: {
           group: 'spacing',
-          state: 'experimental',
-          replacement: '24px',
+          state: 'active',
           introduced: '0.10.16',
           description: 'Helpful guidance goes here'
         }
@@ -96,8 +87,7 @@ const spacing = {
       '400': {
         attributes: {
           group: 'spacing',
-          state: 'experimental',
-          replacement: '32px',
+          state: 'active',
           introduced: '0.10.16',
           description: 'Helpful guidance goes here'
         }
@@ -105,8 +95,7 @@ const spacing = {
       '500': {
         attributes: {
           group: 'spacing',
-          state: 'experimental',
-          replacement: '40px',
+          state: 'active',
           introduced: '0.10.16',
           description: 'Helpful guidance goes here'
         }
@@ -114,8 +103,7 @@ const spacing = {
       '600': {
         attributes: {
           group: 'spacing',
-          state: 'experimental',
-          replacement: '48px',
+          state: 'active',
           introduced: '0.10.16',
           description: 'Helpful guidance goes here'
         }

package/dist/es2019/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "0.10.27",
+	"version": "0.10.29",
 	"sideEffects": [
 		"**/*.css"
 	]

package/dist/esm/artifacts/palettes-raw/spacing-scale.js

@@ -1,17 +1,17 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::08ae35ae5d6bfe790b538db89c5876de>>
+ * @codegen <<SignedSource::9ec4d3766ad54f86aa1d9891b0f32317>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
-  "value": "0",
+  "value": "0px",
   "attributes": {
     "group": "scale"
   },
   "filePath": "src/palettes/spacing-scale.tsx",
   "isSource": true,
   "original": {
-    "value": "0",
+    "value": "0px",
     "attributes": {
       "group": "scale"
     }

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

@@ -12,60 +12,12 @@
  * 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"
 }];
 export default renameMapper;

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

@@ -1,6 +1,6 @@
 /**
  * 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 = [{
@@ -29,19 +29,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."
     },
@@ -52,8 +50,7 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "spacing",
-    "state": "experimental",
-    "replacement": "8px",
+    "state": "active",
     "introduced": "0.10.16",
     "description": "Helpful guidance goes here"
   },
@@ -63,8 +60,7 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "spacing",
-      "state": "experimental",
-      "replacement": "8px",
+      "state": "active",
       "introduced": "0.10.16",
       "description": "Helpful guidance goes here"
     },
@@ -75,8 +71,7 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "spacing",
-    "state": "experimental",
-    "replacement": "12px",
+    "state": "active",
     "introduced": "0.10.16",
     "description": "Helpful guidance goes here"
   },
@@ -86,8 +81,7 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "spacing",
-      "state": "experimental",
-      "replacement": "12px",
+      "state": "active",
       "introduced": "0.10.16",
       "description": "Helpful guidance goes here"
     },
@@ -98,8 +92,7 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "spacing",
-    "state": "experimental",
-    "replacement": "16px",
+    "state": "active",
     "introduced": "0.10.16",
     "description": "Helpful guidance goes here"
   },
@@ -109,8 +102,7 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "spacing",
-      "state": "experimental",
-      "replacement": "16px",
+      "state": "active",
       "introduced": "0.10.16",
       "description": "Helpful guidance goes here"
     },
@@ -121,8 +113,7 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "spacing",
-    "state": "experimental",
-    "replacement": "20px",
+    "state": "active",
     "introduced": "0.10.16",
     "description": "Helpful guidance goes here"
   },
@@ -132,8 +123,7 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "spacing",
-      "state": "experimental",
-      "replacement": "20px",
+      "state": "active",
       "introduced": "0.10.16",
       "description": "Helpful guidance goes here"
     },
@@ -144,8 +134,7 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "spacing",
-    "state": "experimental",
-    "replacement": "24px",
+    "state": "active",
     "introduced": "0.10.16",
     "description": "Helpful guidance goes here"
   },
@@ -155,8 +144,7 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "spacing",
-      "state": "experimental",
-      "replacement": "24px",
+      "state": "active",
       "introduced": "0.10.16",
       "description": "Helpful guidance goes here"
     },
@@ -167,8 +155,7 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "spacing",
-    "state": "experimental",
-    "replacement": "32px",
+    "state": "active",
     "introduced": "0.10.16",
     "description": "Helpful guidance goes here"
   },
@@ -178,8 +165,7 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "spacing",
-      "state": "experimental",
-      "replacement": "32px",
+      "state": "active",
       "introduced": "0.10.16",
       "description": "Helpful guidance goes here"
     },
@@ -190,8 +176,7 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "spacing",
-    "state": "experimental",
-    "replacement": "40px",
+    "state": "active",
     "introduced": "0.10.16",
     "description": "Helpful guidance goes here"
   },
@@ -201,8 +186,7 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "spacing",
-      "state": "experimental",
-      "replacement": "40px",
+      "state": "active",
       "introduced": "0.10.16",
       "description": "Helpful guidance goes here"
     },
@@ -213,8 +197,7 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "spacing",
-    "state": "experimental",
-    "replacement": "48px",
+    "state": "active",
     "introduced": "0.10.16",
     "description": "Helpful guidance goes here"
   },
@@ -224,8 +207,7 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "spacing",
-      "state": "experimental",
-      "replacement": "48px",
+      "state": "active",
       "introduced": "0.10.16",
       "description": "Helpful guidance goes here"
     },
@@ -236,8 +218,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."
   },
@@ -247,8 +228,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."
     },
@@ -259,8 +239,7 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "spacing",
-    "state": "experimental",
-    "replacement": "4px",
+    "state": "active",
     "introduced": "0.10.16",
     "description": "Helpful guidance goes here"
   },
@@ -270,8 +249,7 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "spacing",
-      "state": "experimental",
-      "replacement": "4px",
+      "state": "active",
       "introduced": "0.10.16",
       "description": "Helpful guidance goes here"
     },
@@ -282,8 +260,7 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "spacing",
-    "state": "experimental",
-    "replacement": "6px",
+    "state": "active",
     "introduced": "0.10.16",
     "description": "Helpful guidance goes here"
   },
@@ -293,8 +270,7 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "spacing",
-      "state": "experimental",
-      "replacement": "6px",
+      "state": "active",
       "introduced": "0.10.16",
       "description": "Helpful guidance goes here"
     },

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

@@ -4,12 +4,12 @@
  * 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/esm/artifacts/typescript/atlassian-spacing-types-internal.js

@@ -1,7 +1 @@
-/**
- * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::09e6dd0e22e09011160890dfb93241da>>
- * @codegenCommand yarn build tokens
- */
-// No active tokens in this theme
 export {};

package/dist/esm/artifacts/typescript/atlassian-spacing-types.js

@@ -1,7 +1 @@
-/**
- * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::09e6dd0e22e09011160890dfb93241da>>
- * @codegenCommand yarn build tokens
- */
-// No active tokens in this theme
 export {};

package/dist/esm/constants.js

@@ -1,14 +1,6 @@
-export var THEMES = ['light', 'dark', 'legacy-light', 'legacy-dark', 'spacing'];
 export var THEME_DATA_ATTRIBUTE = 'data-theme';
+export var COLOR_MODE_ATTRIBUTE = 'data-color-mode';
 export var DEFAULT_THEME = 'light spacing';
 export var CSS_PREFIX = 'ds';
-export var CSS_VAR_FULL = ['opacity']; // Maps the longer theme name to a shorthand used in css/code
-
-export var THEME_NAME_MAP = {
-  'atlassian-light': 'light',
-  'atlassian-dark': 'dark',
-  'atlassian-legacy-light': 'legacy-light',
-  'atlassian-legacy-dark': 'legacy-dark',
-  'atlassian-spacing': 'spacing'
-};
+export var CSS_VAR_FULL = ['opacity'];
 export var TOKEN_NOT_FOUND_CSS_VAR = "--".concat(CSS_PREFIX, "-token-not-found");

package/dist/esm/entry-points/spacing-raw.js

@@ -0,0 +1 @@
+export { default } from '../artifacts/tokens-raw/atlassian-spacing';

package/dist/esm/get-token.js

@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
 var name = "@atlaskit/tokens";
-var version = "0.10.27";
+var version = "0.10.29";
 
 function token(path, fallback) {
   var token = tokens[path];

package/dist/esm/index.js

@@ -1,3 +1,4 @@
 export { default as token } from './get-token';
 export { default as setGlobalTheme } from './set-global-theme';
+export { default as themeConfig } from './theme-config';
 export { useThemeObserver, ThemeMutationObserver } from './theme-change-observer';

package/dist/esm/palettes/spacing-scale.js

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

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

@@ -1,14 +1,37 @@
-import { THEMES } from './constants';
+import { COLOR_MODE_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
+import themeConfig from './theme-config';
+
+var setGlobalTheme = function setGlobalTheme(themeId) {
+  var shouldMatchSystem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var theme = Object.values(themeConfig).find(function (_ref) {
+    var id = _ref.id;
+    return id === themeId;
+  });
 
-var setGlobalTheme = function setGlobalTheme(theme) {
   if (process.env.NODE_ENV !== 'production') {
-    if (!THEMES.includes(theme)) {
-      throw new Error("setGlobalTheme only accepts themes: ".concat(THEMES.join(', ')));
+    if (!theme) {
+      var themeIds = Object.values(themeConfig).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(THEME_DATA_ATTRIBUTE, theme.id);
+
+  if (theme.attributes.type === 'color') {
+    element.setAttribute(COLOR_MODE_ATTRIBUTE, theme.attributes.mode);
+  }
+
+  if (shouldMatchSystem) {
+    element.setAttribute(COLOR_MODE_ATTRIBUTE, 'auto');
+  }
 };
 
 export default setGlobalTheme;