@atlaskit/tokens 0.10.27 → 0.10.29

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

@@ -21,8 +21,7 @@ var 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.'
         }
@@ -30,8 +29,7 @@ var 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.'
         }
@@ -39,8 +37,7 @@ var spacing = {
       '050': {
         attributes: {
           group: 'spacing',
-          state: 'experimental',
-          replacement: '4px',
+          state: 'active',
           introduced: '0.10.16',
           description: 'Helpful guidance goes here'
         }
@@ -48,8 +45,7 @@ var spacing = {
       '075': {
         attributes: {
           group: 'spacing',
-          state: 'experimental',
-          replacement: '6px',
+          state: 'active',
           introduced: '0.10.16',
           description: 'Helpful guidance goes here'
         }
@@ -57,8 +53,7 @@ var spacing = {
       '100': {
         attributes: {
           group: 'spacing',
-          state: 'experimental',
-          replacement: '8px',
+          state: 'active',
           introduced: '0.10.16',
           description: 'Helpful guidance goes here'
         }
@@ -66,8 +61,7 @@ var spacing = {
       '150': {
         attributes: {
           group: 'spacing',
-          state: 'experimental',
-          replacement: '12px',
+          state: 'active',
           introduced: '0.10.16',
           description: 'Helpful guidance goes here'
         }
@@ -75,8 +69,7 @@ var spacing = {
       '200': {
         attributes: {
           group: 'spacing',
-          state: 'experimental',
-          replacement: '16px',
+          state: 'active',
           introduced: '0.10.16',
           description: 'Helpful guidance goes here'
         }
@@ -84,8 +77,7 @@ var spacing = {
       '250': {
         attributes: {
           group: 'spacing',
-          state: 'experimental',
-          replacement: '20px',
+          state: 'active',
           introduced: '0.10.16',
           description: 'Helpful guidance goes here'
         }
@@ -93,8 +85,7 @@ var spacing = {
       '300': {
         attributes: {
           group: 'spacing',
-          state: 'experimental',
-          replacement: '24px',
+          state: 'active',
           introduced: '0.10.16',
           description: 'Helpful guidance goes here'
         }
@@ -102,8 +93,7 @@ var spacing = {
       '400': {
         attributes: {
           group: 'spacing',
-          state: 'experimental',
-          replacement: '32px',
+          state: 'active',
           introduced: '0.10.16',
           description: 'Helpful guidance goes here'
         }
@@ -111,8 +101,7 @@ var spacing = {
       '500': {
         attributes: {
           group: 'spacing',
-          state: 'experimental',
-          replacement: '40px',
+          state: 'active',
           introduced: '0.10.16',
           description: 'Helpful guidance goes here'
         }
@@ -120,8 +109,7 @@ var spacing = {
       '600': {
         attributes: {
           group: 'spacing',
-          state: 'experimental',
-          replacement: '48px',
+          state: 'active',
           introduced: '0.10.16',
           description: 'Helpful guidance goes here'
         }

package/dist/cjs/version.json

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

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

package/dist/es2019/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
  */
 const 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/es2019/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/es2019/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/es2019/constants.js

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

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

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

package/dist/es2019/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';
 const name = "@atlaskit/tokens";
-const version = "0.10.27";
+const version = "0.10.29";
 
 function token(path, fallback) {
   let token = tokens[path];

package/dist/es2019/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/es2019/palettes/spacing-scale.js

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

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

@@ -1,14 +1,34 @@
-import { THEMES } from './constants';
+import { COLOR_MODE_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
+import themeConfig from './theme-config';
+
+const setGlobalTheme = (themeId, shouldMatchSystem = false) => {
+  const theme = Object.values(themeConfig).find(({
+    id
+  }) => id === themeId);
 
-const setGlobalTheme = theme => {
   if (process.env.NODE_ENV !== 'production') {
-    if (!THEMES.includes(theme)) {
-      throw new Error(`setGlobalTheme only accepts themes: ${THEMES.join(', ')}`);
+    if (!theme) {
+      const themeIds = Object.values(themeConfig).map(({
+        id
+      }) => id);
+      throw new Error(`setGlobalTheme only accepts themes: ${themeIds.join(', ')}`);
     }
   }
 
+  if (!theme) {
+    return;
+  }
+
   const 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;

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

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { useEffect, useState } from 'react';
-import { THEME_DATA_ATTRIBUTE } from './constants';
+import { COLOR_MODE_ATTRIBUTE } from './constants';
 
-const getGlobalTheme = () => typeof document !== 'undefined' ? document.documentElement.getAttribute(THEME_DATA_ATTRIBUTE) : null;
+const getGlobalTheme = () => typeof document !== 'undefined' ? document.documentElement.getAttribute(COLOR_MODE_ATTRIBUTE) : null;
 /**
  * A MutationObserver which watches the `<html>` element for changes to the theme.
  *
@@ -22,6 +22,8 @@ export class ThemeMutationObserver {
   constructor(callback) {
     _defineProperty(this, "observer", null);
 
+    _defineProperty(this, "mediaObserver", null);
+
     this.callback = callback;
   }
 
@@ -33,7 +35,7 @@ export class ThemeMutationObserver {
     }
 
     this.observer.observe(document.documentElement, {
-      attributeFilter: [THEME_DATA_ATTRIBUTE]
+      attributeFilter: [COLOR_MODE_ATTRIBUTE]
     });
   }