@atlaskit/tokens 0.13.5 → 1.0.0

package/dist/es2019/babel-plugin/plugin.js

@@ -9,41 +9,38 @@ export default function plugin() {
           path.traverse({
             CallExpression(path) {
               const tokenImportScope = getTokenImportScope(path);
-
               if (!tokenImportScope) {
                 return;
-              } // Check arguments have correct format
-
+              }
 
+              // Check arguments have correct format
               if (!path.node.arguments[0]) {
                 throw new Error(`token() requires at least one argument`);
               } else if (!t.isStringLiteral(path.node.arguments[0])) {
                 throw new Error(`token() must have a string as the first argument`);
               } else if (path.node.arguments.length > 2) {
                 throw new Error(`token() does not accept ${path.node.arguments.length} arguments`);
-              } // Check the token exists
-
+              }
 
+              // Check the token exists
               const tokenName = path.node.arguments[0].value;
               const cssTokenValue = tokenNames[tokenName];
-
               if (!cssTokenValue) {
                 throw new Error(`token '${tokenName}' does not exist`);
               }
+              var replacementNode;
 
-              var replacementNode; // if no fallback is set, optionally find one from the default theme
-
+              // if no fallback is set, optionally find one from the default theme
               if (path.node.arguments.length < 2) {
                 if (state.opts.shouldUseAutoFallback) {
                   replacementNode = t.stringLiteral(`var(${cssTokenValue}, ${getDefaultFallback(tokenName)})`);
                 } else {
                   replacementNode = t.stringLiteral(`var(${cssTokenValue})`);
                 }
-              } // Handle fallbacks
-
+              }
 
+              // Handle fallbacks
               const fallback = path.node.arguments[1];
-
               if (t.isStringLiteral(fallback)) {
                 // String literals can be concatenated into css variable call
                 // Empty string fallbacks are ignored. For now, as the user did specify a fallback, no default is inserted
@@ -58,17 +55,15 @@ export default function plugin() {
                   raw: ')',
                   cooked: ')'
                 }, true)], [fallback]);
-              } // Replace path and call scope.crawl() to refresh the scope bindings + references
-
-
-              replacementNode && path.replaceWith(replacementNode); // @ts-ignore crawl is a valid property
+              }
 
+              // Replace path and call scope.crawl() to refresh the scope bindings + references
+              replacementNode && path.replaceWith(replacementNode);
+              // @ts-ignore crawl is a valid property
               tokenImportScope.crawl();
             }
-
           });
         },
-
         exit(path) {
           path.traverse({
             ImportDeclaration(path) {
@@ -76,84 +71,69 @@ export default function plugin() {
               if (path.node.source.value !== '@atlaskit/tokens') {
                 return;
               }
-
               path.get('specifiers').forEach(specifier => {
                 if (!specifier.isImportSpecifier()) {
                   return;
                 }
-
                 if (getNonAliasedImportName(specifier.node) !== 'token') {
                   return;
                 }
+                const binding = path.scope.bindings[getAliasedImportName(specifier.node)];
 
-                const binding = path.scope.bindings[getAliasedImportName(specifier.node)]; // if no longer used, remove
-
+                // if no longer used, remove
                 if (!binding.referenced) {
                   specifier.remove();
                 }
-              }); // remove '@atlaskit/tokens' import if it is no longer needed
+              });
 
+              // remove '@atlaskit/tokens' import if it is no longer needed
               if (path.get('specifiers').length === 0) {
                 path.remove();
               }
             }
-
           });
         }
-
       }
     }
   };
 }
-
 function getDefaultFallback(tokenName) {
   return tokenDefaultValues[tokenName];
 }
-
 function getNonAliasedImportName(node) {
   if (t.isIdentifier(node.imported)) {
     return node.imported.name;
   }
-
   return node.imported.value;
 }
-
 function getAliasedImportName(node) {
   return node.local.name;
 }
+
 /**
  * Determine if the current call is to a token function, and
  * return the relevant scope
  */
-
-
 function getTokenImportScope(path) {
   const callee = path.node.callee;
-
   if (!t.isIdentifier(callee)) {
     return undefined;
   }
-
   const binding = getTokenBinding(path.scope, callee.name);
-
   if (!binding || !t.isImportSpecifier(binding.path.node)) {
     return undefined;
   }
-
   if (binding.path.parent && t.isImportDeclaration(binding.path.parent)) {
     if (binding.path.parent.source.value !== '@atlaskit/tokens') {
       return undefined;
     }
   }
-
   return getNonAliasedImportName(binding.path.node) === 'token' ? binding.scope : undefined;
 }
-
 function getTokenBinding(scope, name) {
   if (!scope) {
     return undefined;
   }
-
   if (scope.bindings[name]) {
     return scope.bindings[name];
   } else {

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

@@ -0,0 +1,20 @@
+import { COLOR_MODE_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
+import { themeColorModes } from './theme-config';
+import { themeStringToObject } from './utils/theme-state-transformer';
+const isThemeColorMode = colorMode => {
+  return themeColorModes.find(mode => mode === colorMode) !== undefined;
+};
+export const getGlobalTheme = () => {
+  if (typeof document === 'undefined') {
+    return {};
+  }
+  const element = document.documentElement;
+  const colorMode = element.getAttribute(COLOR_MODE_ATTRIBUTE) || '';
+  const theme = element.getAttribute(THEME_DATA_ATTRIBUTE) || '';
+  return {
+    ...themeStringToObject(theme),
+    ...(isThemeColorMode(colorMode) && {
+      colorMode
+    })
+  };
+};

package/dist/es2019/get-token-value.js

@@ -1,8 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 const name = "@atlaskit/tokens";
-const version = "0.13.5";
-
+const version = "1.0.0";
 /**
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
  * resulting CSS Custom Property.
@@ -27,18 +26,14 @@ const version = "0.13.5";
 function getTokenValue(tokenId, fallback = '') {
   let token = tokens[tokenId];
   let tokenValue = fallback;
-
   if (process.env.NODE_ENV !== 'production' && !token) {
     warnOnce(`Unknown token id at path: ${tokenId} for ${name}@${version}`);
   }
-
   if (typeof window === 'undefined') {
     return tokenValue;
   }
-
   tokenValue = window.getComputedStyle(document.documentElement).getPropertyValue(token);
   tokenValue = tokenValue || fallback;
   return tokenValue;
 }
-
 export default getTokenValue;

package/dist/es2019/get-token.js

@@ -2,8 +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.13.5";
-
+const version = "1.0.0";
 /**
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
  * This should be used to implement design decisions throughout your application.
@@ -28,19 +27,15 @@ const version = "0.13.5";
  */
 function token(path, fallback) {
   let token = tokens[path];
-
   if (process.env.NODE_ENV !== 'production' && !token) {
-    token = tokens['utility.UNSAFE_util.MISSING_TOKEN'];
     warnOnce(`Unknown token id at path: ${path} for ${name}@${version}`);
-  } // if the token is not found - replacing it with variable name without any value, to avoid it being undefined which would result in invalid css
-
+  }
 
+  // if the token is not found - replacing it with variable name without any value, to avoid it being undefined which would result in invalid css
   if (!token) {
     token = TOKEN_NOT_FOUND_CSS_VAR;
   }
-
   const tokenCall = fallback ? `var(${token}, ${fallback})` : `var(${token})`;
   return tokenCall;
 }
-
 export default token;

package/dist/es2019/index.js

@@ -1,5 +1,8 @@
 export { default as token } from './get-token';
 export { default as getTokenValue } from './get-token-value';
-export { default as setGlobalTheme } from './set-global-theme';
+export { default as setGlobalTheme, getThemeStyles, getThemeHtmlAttrs, getSSRAutoScript } from './set-global-theme';
 export { default as themeConfig } from './theme-config';
-export { useThemeObserver, ThemeMutationObserver } from './theme-change-observer';
+export { useThemeObserver } from './use-theme-observer';
+export { ThemeMutationObserver } from './theme-mutation-observer';
+export { getGlobalTheme } from './get-global-theme';
+export { themeStringToObject, themeObjectToString } from './utils/theme-state-transformer';

package/dist/es2019/palettes/legacy-palette.js

@@ -3,6 +3,7 @@
  *
  * This palette should be exclusively used for backwards compatible themes
  */
+
 const palette = {
   value: {
     opacity: {

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

@@ -1,6 +1,7 @@
 /**
  * Types are inferred from the base tokens below
  */
+
 const baseSpacingTokens = {
   Space0: {
     value: '0',

package/dist/es2019/palettes/typography-palette.js

@@ -135,7 +135,8 @@ const fontSizeScale = {
   }
 };
 const typographyPalette = {
-  typography: { ...fontSizeScale,
+  typography: {
+    ...fontSizeScale,
     ...fontWeightScale,
     ...fontFamilyPalette,
     ...lineHeightScale

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

@@ -1,46 +1,176 @@
+import { bind } from 'bind-event-listener';
+import noop from '@atlaskit/ds-lib/noop';
 import { COLOR_MODE_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
-import themeConfig from './theme-config';
+import { loadAndAppendThemeCss, loadThemeCss } from './utils/theme-loading';
+import { themeObjectToString } from './utils/theme-state-transformer';
+const defaultColorMode = 'light';
+const isMatchMediaAvailable = typeof window !== 'undefined' && 'matchMedia' in window;
+const darkModeMediaQuery = '(prefers-color-scheme: dark)';
+const darkModeMql = isMatchMediaAvailable && window.matchMedia(darkModeMediaQuery);
+let unbindThemeChangeListener = noop;
+const themeStateDefaults = {
+  colorMode: 'auto',
+  dark: 'dark',
+  light: 'light',
+  spacing: undefined,
+  typography: undefined
+};
+
 /**
- * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-scheme` attributes on your page's <html> tag.
+ * Updates the current theme when the system theme changes. Should be bound
+ * to an event listener listening on the '(prefers-color-scheme: dark)' query
+ * @param e The event representing a change in system theme.
+ */
+const checkNativeListener = function (e) {
+  const element = document.documentElement;
+  element.setAttribute(COLOR_MODE_ATTRIBUTE, e.matches ? 'dark' : 'light');
+};
+
+/**
+ * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-mode` attributes on your page's <html> tag.
  *
- * @param {string} themeId - Which theme should be used by default.
- * @param {string} [shouldMatchSystem=false] - Whether the theme should automatically switch between themes to match the system preference.
+ * @param {Object<string, string>} themeState The themes and color mode that should be applied.
+ * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
+ * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
+ * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
+ * @param {string} themeState.spacing The spacing theme to be applied.
+ * @param {string} themeState.typography The typography theme to be applied.
+ *
+ * @returns A Promise of an unbind function, that can be used to stop listening for changes to system theme.
  *
  * @example
  * ```
- * // Set light theme as the default theme, but switch to others based on the system color theme.
- * setGlobalTheme('light', true);
+ * setGlobalTheme({colorMode: 'auto', light: 'light', dark: 'dark', spacing: 'spacing'});
  * ```
  */
-
-const setGlobalTheme = (themeId, shouldMatchSystem = false) => {
-  const theme = Object.values(themeConfig).find(({
-    id
-  }) => id === themeId);
-
-  if (process.env.NODE_ENV !== 'production') {
-    if (!theme) {
-      const themeIds = Object.values(themeConfig).map(({
-        id
-      }) => id);
-      throw new Error(`setGlobalTheme only accepts themes: ${themeIds.join(', ')}`);
-    }
-  }
-
-  if (!theme) {
-    return;
+const setGlobalTheme = async ({
+  colorMode = themeStateDefaults['colorMode'],
+  dark = themeStateDefaults['dark'],
+  light = themeStateDefaults['light'],
+  spacing = themeStateDefaults['spacing'],
+  typography = themeStateDefaults['typography']
+} = {}) => {
+  // Dedupe list of themes to avoid race condition
+  const themePreferences = new Set([dark, light, spacing, typography]);
+  await Promise.all([...themePreferences].filter(themeId => themeId !== undefined).map(async themeId => await loadAndAppendThemeCss(themeId)));
+  if (colorMode === 'auto' && darkModeMql) {
+    colorMode = darkModeMql.matches ? 'dark' : 'light';
+    // Add an event listener for changes to the system theme.
+    // If the function exists, it will not be added again.
+    unbindThemeChangeListener = bind(darkModeMql, {
+      type: 'change',
+      listener: checkNativeListener
+    });
+  } else {
+    unbindThemeChangeListener();
   }
+  const themeAttributes = getThemeHtmlAttrs({
+    colorMode,
+    dark,
+    light,
+    spacing,
+    typography
+  });
+  Object.entries(themeAttributes).forEach(([key, value]) => {
+    document.documentElement.setAttribute(key, value);
+  });
+  return unbindThemeChangeListener;
+};
+/**
+ * Takes an object containing theme preferences, and returns an array of objects for use in applying styles to the document head.
+ * Only supplies the color themes necessary for initial render, based on the current themeState. I.e. if in light mode, dark mode themes are not returned.
+ *
+ * @param {Object<string, string>} themeState The themes and color mode that should be applied.
+ * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
+ * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
+ * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
+ * @param {string} themeState.spacing The spacing theme to be applied.
+ * @param {string} themeState.typography The typography theme to be applied.
+ *
+ * @returns A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
+ * If an error is encountered while loading themes, the themes arrav will be emptv.
+ */
+export const getThemeStyles = async ({
+  colorMode = themeStateDefaults['colorMode'],
+  dark = themeStateDefaults['dark'],
+  light = themeStateDefaults['light'],
+  spacing = themeStateDefaults['spacing'],
+  typography = themeStateDefaults['typography']
+} = {}) => {
+  const themePreferences = colorMode === 'auto' ? [light, dark] : [colorMode];
+  [spacing, typography].forEach(themeId => {
+    if (themeId) {
+      themePreferences.push(themeId);
+    }
+  });
+  const results = await Promise.all(themePreferences.map(async themeId => {
+    try {
+      const css = await loadThemeCss(themeId);
+      return {
+        id: themeId,
+        attrs: {
+          'data-theme': themeId
+        },
+        css
+      };
+    } catch {
+      // Return an empty string if there's an error loading it.
+      return undefined;
+    }
+  }));
+  return results.filter(theme => theme !== undefined);
+};
 
-  const element = document.documentElement;
-  element.setAttribute(THEME_DATA_ATTRIBUTE, theme.id);
-
-  if (theme.attributes.type === 'color') {
-    element.setAttribute(COLOR_MODE_ATTRIBUTE, theme.attributes.mode);
-  }
+/**
+ * Server-side rendering utility. Generates the valid HTML attributes for a given theme.
+ * Note: this utility does not handle automatic theme switching.
+ *
+ * @param {Object<string, string>} themeOptions - Theme options object
+ * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
+ * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
+ * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
+ * @param {string} themeState.spacing The spacing theme to be applied.
+ * @param {string} themeState.typography The typography theme to be applied.
+ *
+ * @returns {Object} Object of HTML attributes to be applied to the document root
+ */
+export const getThemeHtmlAttrs = ({
+  colorMode = themeStateDefaults['colorMode'],
+  dark = themeStateDefaults['dark'],
+  light = themeStateDefaults['light'],
+  spacing = themeStateDefaults['spacing'],
+  typography = themeStateDefaults['typography']
+} = {}) => {
+  const themePreferences = {
+    dark,
+    light,
+    spacing,
+    typography
+  };
+  const themeAttribute = themeObjectToString(themePreferences);
+  return {
+    [THEME_DATA_ATTRIBUTE]: themeAttribute,
+    [COLOR_MODE_ATTRIBUTE]: colorMode === 'auto' ? defaultColorMode : colorMode
+  };
+};
 
-  if (shouldMatchSystem) {
-    element.setAttribute(COLOR_MODE_ATTRIBUTE, 'auto');
+/**
+ * Provides a script that, when executed before paint, sets the `data-color-mode` attribute based on the current system theme,
+ * to enable SSR support for automatic theme switching, avoid a flash of un-themed content on first paint.
+ *
+ * @param {string} colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
+ *
+ * @returns {string} A string to be added to the innerHTML of a script tag in the document head
+ */
+export const getSSRAutoScript = colorMode => {
+  return colorMode === 'auto' ? `(
+  () => {
+    try {
+      const mql = window.matchMedia('${darkModeMediaQuery}');
+      const colorMode = mql.matches ? 'dark' : 'light';
+      document.documentElement.setAttribute('${COLOR_MODE_ATTRIBUTE}', colorMode);
+    } catch (e) {}
   }
+)()` : undefined;
 };
-
 export default setGlobalTheme;

package/dist/es2019/theme-config.js

@@ -16,34 +16,18 @@
 
 /**
  * Theme modes: The general purpose of a theme.
- * This attr is used to apply the appropriate system-preference media selector
+ * This attr is used to apply the appropriate system-preference option
  * 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.
  */
-
+export const themeColorModes = ['light', 'dark', 'auto'];
 /**
- * Theme ids: The value that will mounted to the DOM as a data attr
- * For example: `data-theme="light"
+ * Theme ids: The value that will be mounted to the DOM as a data attr
+ * For example: `data-theme="light:light dark:dark spacing:spacing"
  *
  * These ids must be kebab case
  */
-
-/**
- * Theme to use a base. This will create the theme as
- * an extension with all token values marked as optional
- * to allow tokens to be overridden as required.
- */
-
-/**
- * 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.
- */
+export const themeIds = ['light', 'dark', 'legacy-light', 'legacy-dark', 'spacing', 'typography'];
 const themeConfig = {
   'atlassian-light': {
     id: 'light',

package/dist/es2019/{theme-change-observer.js → theme-mutation-observer.js}

@@ -1,8 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { useEffect, useState } from 'react';
-import { THEME_DATA_ATTRIBUTE } from './constants';
-
-const getGlobalTheme = () => typeof document !== 'undefined' ? document.documentElement.getAttribute(THEME_DATA_ATTRIBUTE) : null;
+import { COLOR_MODE_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
+import { getGlobalTheme } from './get-global-theme';
 /**
  * A MutationObserver which watches the `<html>` element for changes to the theme.
  *
@@ -16,54 +14,23 @@ const getGlobalTheme = () => typeof document !== 'undefined' ? document.document
  * observer.observe();
  * ```
  */
-
-
 export class ThemeMutationObserver {
   constructor(callback) {
     _defineProperty(this, "observer", null);
-
     _defineProperty(this, "mediaObserver", null);
-
     this.callback = callback;
   }
-
   observe() {
     if (!this.observer) {
       this.observer = new MutationObserver(() => {
         this.callback(getGlobalTheme());
       });
     }
-
     this.observer.observe(document.documentElement, {
-      attributeFilter: [THEME_DATA_ATTRIBUTE]
+      attributeFilter: [THEME_DATA_ATTRIBUTE, COLOR_MODE_ATTRIBUTE]
     });
   }
-
   disconnect() {
     this.observer && this.observer.disconnect();
   }
-
-}
-/**
- * A React hook which returns the current theme set on `<html>`, or `null` if not set.
- *
- * @example
- * ```
- * const theme = useThemeObserver(); // Returns 'light' or 'dark'
- *
- * // Performing side effects when it changes
- * useEffect(() => {
- *   console.log(`The theme has changed to ${theme}`);
- * }, [theme]);
- * ```
- */
-
-export const useThemeObserver = () => {
-  const [theme, setTheme] = useState(getGlobalTheme());
-  useEffect(() => {
-    const observer = new ThemeMutationObserver(theme => setTheme(theme));
-    observer.observe();
-    return () => observer.disconnect();
-  }, []);
-  return theme;
-};
+}

package/dist/es2019/tokens/atlassian-dark/utility/utility.js

@@ -1,10 +1,7 @@
 const utility = {
-  UNSAFE_util: {
+  UNSAFE: {
     transparent: {
       value: 'transparent'
-    },
-    MISSING_TOKEN: {
-      value: '#FA11F2'
     }
   }
 };

package/dist/es2019/tokens/atlassian-legacy-dark/utility/utility.js

@@ -1,10 +1,7 @@
 const utility = {
-  UNSAFE_util: {
+  UNSAFE: {
     transparent: {
       value: 'transparent'
-    },
-    MISSING_TOKEN: {
-      value: '#FA11F2'
     }
   }
 };

package/dist/es2019/tokens/atlassian-legacy-light/utility/utility.js

@@ -1,10 +1,7 @@
 const utility = {
-  UNSAFE_util: {
+  UNSAFE: {
     transparent: {
       value: 'transparent'
-    },
-    MISSING_TOKEN: {
-      value: '#FA11F2'
     }
   }
 };

package/dist/es2019/tokens/atlassian-light/utility/utility.js

@@ -1,10 +1,7 @@
 const utility = {
-  UNSAFE_util: {
+  UNSAFE: {
     transparent: {
       value: 'transparent'
-    },
-    MISSING_TOKEN: {
-      value: '#FA11F2'
     }
   }
 };