@atlaskit/tokens 0.10.28 → 0.10.30

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

@@ -4,11 +4,10 @@
  * 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',
@@ -20,6 +19,70 @@ 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'
 };
 export default defaultTokenValues;

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

@@ -1,10 +1,9 @@
 /**
  * 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',
@@ -16,6 +15,70 @@ 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'
 };
 export default tokens;

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/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.28";
+var version = "0.10.30";
 
 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/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;

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

@@ -3,10 +3,10 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { useEffect, useState } from 'react';
-import { THEME_DATA_ATTRIBUTE } from './constants';
+import { COLOR_MODE_ATTRIBUTE } from './constants';
 
 var getGlobalTheme = function getGlobalTheme() {
-  return typeof document !== 'undefined' ? document.documentElement.getAttribute(THEME_DATA_ATTRIBUTE) : null;
+  return typeof document !== 'undefined' ? document.documentElement.getAttribute(COLOR_MODE_ATTRIBUTE) : null;
 };
 /**
  * A MutationObserver which watches the `<html>` element for changes to the theme.
@@ -29,6 +29,8 @@ export var ThemeMutationObserver = /*#__PURE__*/function () {
 
     _defineProperty(this, "observer", null);
 
+    _defineProperty(this, "mediaObserver", null);
+
     this.callback = callback;
   }
 
@@ -44,7 +46,7 @@ export var ThemeMutationObserver = /*#__PURE__*/function () {
       }
 
       this.observer.observe(document.documentElement, {
-        attributeFilter: [THEME_DATA_ATTRIBUTE]
+        attributeFilter: [COLOR_MODE_ATTRIBUTE]
       });
     }
   }, {

package/dist/esm/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.
+ */
+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'
+    }
+  }
+};
+export default themeConfig;

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

@@ -1,10 +1,5 @@
 var spacing = {
   spacing: {
-    container: {
-      gutter: {
-        value: 'Space100'
-      }
-    },
     scale: {
       '0': {
         value: 'Space0'
@@ -42,6 +37,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'
+      }
     }
   }
 };