@atlaskit/tokens 1.22.0 → 1.23.0

package/dist/cjs/utils/color-mode-listeners.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _bindEventListener = require("bind-event-listener");
+var _constants = require("../constants");
+var _themeLoading = require("./theme-loading");
+var isMatchMediaAvailable = typeof window !== 'undefined' && 'matchMedia' in window;
+
+/**
+ * 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.
+ */
+function checkNativeListener(e) {
+  var element = document.documentElement;
+  element.setAttribute(_constants.COLOR_MODE_ATTRIBUTE, e.matches ? 'dark' : 'light');
+}
+var darkModeMql = isMatchMediaAvailable && window.matchMedia(_themeLoading.darkModeMediaQuery);
+var ColorModeObserver = /*#__PURE__*/function () {
+  function ColorModeObserver() {
+    (0, _classCallCheck2.default)(this, ColorModeObserver);
+    (0, _defineProperty2.default)(this, "unbindThemeChangeListener", null);
+  }
+  (0, _createClass2.default)(ColorModeObserver, [{
+    key: "getColorMode",
+    value: function getColorMode() {
+      if (!darkModeMql) {
+        return 'light';
+      }
+      return darkModeMql !== null && darkModeMql !== void 0 && darkModeMql.matches ? 'dark' : 'light';
+    }
+  }, {
+    key: "bind",
+    value: function bind() {
+      if (darkModeMql && this.unbindThemeChangeListener === null) {
+        this.unbindThemeChangeListener = (0, _bindEventListener.bind)(darkModeMql, {
+          type: 'change',
+          listener: checkNativeListener
+        });
+      }
+    }
+  }, {
+    key: "unbind",
+    value: function unbind() {
+      if (this.unbindThemeChangeListener) {
+        this.unbindThemeChangeListener();
+        this.unbindThemeChangeListener = null;
+      }
+    }
+  }]);
+  return ColorModeObserver;
+}();
+/**
+ * A singleton color mode observer - binds "auto" switching logic to a single `mediaQueryList` listener
+ * that can be unbound by any consumer when no longer needed.
+ */
+var SingletonColorModeObserver = new ColorModeObserver();
+var _default = SingletonColorModeObserver;
+exports.default = _default;

package/dist/cjs/utils/configure-page.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = configurePage;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _getThemeHtmlAttrs = _interopRequireDefault(require("../get-theme-html-attrs"));
+var _colorModeListeners = _interopRequireDefault(require("./color-mode-listeners"));
+/**
+ * Given ThemeState, sets appropriate html attributes on the documentElement,
+ * adds a listener to keep colorMode updated, and returns a function to unbind.
+ */
+function configurePage(themeState) {
+  if (themeState.colorMode === 'auto') {
+    // Set colorMode based on the user preference
+    themeState.colorMode = _colorModeListeners.default.getColorMode();
+    // Bind a listener (if one doesn't already exist) to keep colorMode updated
+    _colorModeListeners.default.bind();
+  } else {
+    _colorModeListeners.default.unbind();
+  }
+  var themeAttributes = (0, _getThemeHtmlAttrs.default)(themeState);
+  Object.entries(themeAttributes).forEach(function (_ref) {
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    document.documentElement.setAttribute(key, value);
+  });
+  return function () {
+    return _colorModeListeners.default.unbind;
+  };
+}

package/dist/cjs/utils/get-theme-preferences.js

@@ -23,11 +23,6 @@ var getThemePreferences = function getThemePreferences(themeState) {
   if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu')) {
     themePreferences.push("".concat(themePreferences.includes('dark') ? 'dark' : 'light', "-new-input-border"));
   }
-
-  // Load spacing by default
-  if (!themePreferences.includes('spacing')) {
-    themePreferences.push('spacing');
-  }
   return (0, _toConsumableArray2.default)(new Set(themePreferences));
 };
 exports.getThemePreferences = getThemePreferences;

package/dist/es2019/constants.js

@@ -1,6 +1,7 @@
 export const THEME_DATA_ATTRIBUTE = 'data-theme';
 export const COLOR_MODE_ATTRIBUTE = 'data-color-mode';
 export const CUSTOM_THEME_ATTRIBUTE = 'data-custom-theme';
+export const DEFAULT_THEME = 'light';
 export const CSS_PREFIX = 'ds';
 export const CSS_VAR_FULL = ['opacity', 'font', 'space', 'border'];
 export const TOKEN_NOT_FOUND_CSS_VAR = `--${CSS_PREFIX}-token-not-found`;

package/dist/es2019/custom-theme.js

@@ -18,10 +18,10 @@ export const CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD = 10;
  * @param {string} themeState.colorMode Determines which color theme is applied
  * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
  *
- * @returns A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
+ * @returns 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 array will be empty.
  */
-export async function getCustomThemeStyles(themeState) {
+export function getCustomThemeStyles(themeState) {
   var _themeState$UNSAFE_th;
   const brandColor = themeState === null || themeState === void 0 ? void 0 : (_themeState$UNSAFE_th = themeState.UNSAFE_themeOptions) === null || _themeState$UNSAFE_th === void 0 ? void 0 : _themeState$UNSAFE_th.brandColor;
   const mode = (themeState === null || themeState === void 0 ? void 0 : themeState.colorMode) || themeStateDefaults['colorMode'];
@@ -64,8 +64,8 @@ html[${CUSTOM_THEME_ATTRIBUTE}="${uniqueId}"][${COLOR_MODE_ATTRIBUTE}="dark"][da
   }
   return themes;
 }
-export async function loadAndAppendCustomThemeCss(themeState) {
-  const themes = await getCustomThemeStyles(themeState);
+export function loadAndAppendCustomThemeCss(themeState) {
+  const themes = getCustomThemeStyles(themeState);
   limitSizeOfCustomStyleElements(CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD);
   themes.map(theme => {
     const styleTag = document.createElement('style');

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

@@ -0,0 +1,53 @@
+import { themeStateDefaults } from './theme-config';
+import configurePage from './utils/configure-page';
+import { getThemePreferences } from './utils/get-theme-preferences';
+
+/**
+ * Synchronously sets the theme globally at runtime. Themes are not loaded;
+ * use `getThemeStyles` and other server-side utilities to generate and load them.
+ *
+ * @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.shape The shape theme to be applied.
+ * @param {string} themeState.spacing The spacing theme to be applied.
+ * @param {string} themeState.typography The typography theme to be applied.
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
+ * @param {function} themeLoader Callback function used to override the default theme loading functionality.
+ *
+ * @returns An unbind function, that can be used to stop listening for changes to system theme.
+ *
+ * @example
+ * ```
+ * enableGlobalTheme({colorMode: 'auto', light: 'light', dark: 'dark', spacing: 'spacing'});
+ * ```
+ */
+const enableGlobalTheme = ({
+  colorMode = themeStateDefaults['colorMode'],
+  dark = themeStateDefaults['dark'],
+  light = themeStateDefaults['light'],
+  shape = themeStateDefaults['shape'],
+  spacing = themeStateDefaults['spacing'],
+  typography = themeStateDefaults['typography'],
+  UNSAFE_themeOptions = themeStateDefaults['UNSAFE_themeOptions']
+} = {}, themeLoader) => {
+  const themeState = {
+    colorMode,
+    dark,
+    light,
+    shape,
+    spacing,
+    typography,
+    UNSAFE_themeOptions: themeLoader ? undefined : UNSAFE_themeOptions
+  };
+
+  // Determine what to load and call theme loader
+  const themePreferences = getThemePreferences(themeState);
+  if (themeLoader) {
+    themePreferences.map(themeId => themeLoader(themeId));
+  }
+  const autoUnbind = configurePage(themeState);
+  return autoUnbind;
+};
+export default enableGlobalTheme;

package/dist/es2019/entry-points/custom-themes.js

@@ -0,0 +1 @@
+export { default as UNSAFE_loadCustomThemeStyles } from '../load-custom-theme-styles';

package/dist/es2019/get-theme-html-attrs.js

@@ -28,15 +28,13 @@ const getThemeHtmlAttrs = ({
   typography = themeStateDefaults['typography'],
   UNSAFE_themeOptions = themeStateDefaults['UNSAFE_themeOptions']
 } = {}) => {
-  let themePreferences = {
+  const themeAttribute = themeObjectToString({
     dark,
     light,
     shape,
-    // Load spacing by default
-    spacing: spacing || 'spacing',
+    spacing,
     typography
-  };
-  const themeAttribute = themeObjectToString(themePreferences);
+  });
   const result = {
     [THEME_DATA_ATTRIBUTE]: themeAttribute,
     [COLOR_MODE_ATTRIBUTE]: colorMode === 'auto' ? defaultColorMode : colorMode

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

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 const name = "@atlaskit/tokens";
-const version = "1.22.0";
+const version = "1.23.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.

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 = "1.22.0";
+const version = "1.23.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.

package/dist/es2019/index.js

@@ -2,6 +2,7 @@ export { default as themeConfig } from './theme-config';
 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 enableGlobalTheme } from './enable-global-theme';
 export { default as getThemeStyles } from './get-theme-styles';
 export { default as getThemeHtmlAttrs } from './get-theme-html-attrs';
 export { default as getSSRAutoScript } from './get-ssr-auto-script';

package/dist/es2019/load-custom-theme-styles.js

@@ -0,0 +1,37 @@
+import { loadAndAppendCustomThemeCss } from './custom-theme';
+import { themeStateDefaults } from './theme-config';
+import { isValidBrandHex } from './utils/color-utils';
+import { findMissingCustomStyleElements } from './utils/custom-theme-loading-utils';
+
+/**
+ * Synchronously generates and applies custom theme styles to the page.
+ *
+ * @param {Object<string, string>} themeState The themes and color mode that should be applied.
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
+ *
+ * @example
+ * ```
+ * UNSAFE_loadCustomThemeStyles({
+ *    colorMode: 'auto',
+ *    UNSAFE_themeOptions: { brandColor: '#FF0000' }
+ * });
+ * ```
+ */
+const UNSAFE_loadCustomThemeStyles = ({
+  colorMode = themeStateDefaults['colorMode'],
+  UNSAFE_themeOptions = themeStateDefaults['UNSAFE_themeOptions']
+} = {}) => {
+  // Load custom theme styles
+  if (UNSAFE_themeOptions && isValidBrandHex(UNSAFE_themeOptions === null || UNSAFE_themeOptions === void 0 ? void 0 : UNSAFE_themeOptions.brandColor)) {
+    const attrOfMissingCustomStyles = findMissingCustomStyleElements(UNSAFE_themeOptions, colorMode);
+    if (attrOfMissingCustomStyles.length !== 0) {
+      loadAndAppendCustomThemeCss({
+        colorMode: attrOfMissingCustomStyles.length === 2 ? 'auto' :
+        // only load the missing custom theme styles
+        attrOfMissingCustomStyles[0],
+        UNSAFE_themeOptions
+      });
+    }
+  }
+};
+export default UNSAFE_loadCustomThemeStyles;

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

@@ -1,28 +1,9 @@
-import { bind } from 'bind-event-listener';
-import noop from '@atlaskit/ds-lib/noop';
-import { COLOR_MODE_ATTRIBUTE } from './constants';
-import getThemeHtmlAttrs from './get-theme-html-attrs';
 import { themeStateDefaults } from './theme-config';
 import { isValidBrandHex } from './utils/color-utils';
+import configurePage from './utils/configure-page';
 import { findMissingCustomStyleElements } from './utils/custom-theme-loading-utils';
 import { getThemePreferences } from './utils/get-theme-preferences';
-import { darkModeMediaQuery, loadAndAppendThemeCss } from './utils/theme-loading';
-
-// Represents theme state once mounted to the page (auto is hidden from observers)
-
-const isMatchMediaAvailable = typeof window !== 'undefined' && 'matchMedia' in window;
-const darkModeMql = isMatchMediaAvailable && window.matchMedia(darkModeMediaQuery);
-let unbindThemeChangeListener = noop;
-
-/**
- * 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');
-};
+import { loadAndAppendThemeCss } from './utils/theme-loading';
 
 /**
  * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-mode` attributes on your page's <html> tag.
@@ -53,57 +34,45 @@ const setGlobalTheme = async ({
   typography = themeStateDefaults['typography'],
   UNSAFE_themeOptions = themeStateDefaults['UNSAFE_themeOptions']
 } = {}, themeLoader) => {
-  const themePreferences = getThemePreferences({
+  const themeState = {
     colorMode,
     dark,
     light,
     shape,
     spacing,
-    typography
-  });
+    typography,
+    UNSAFE_themeOptions: themeLoader ? undefined : UNSAFE_themeOptions
+  };
+
+  // Determine what to load and loading strategy
+  const themePreferences = getThemePreferences(themeState);
   const loadingStrategy = themeLoader ? themeLoader : loadAndAppendThemeCss;
-  await Promise.all([...themePreferences.map(async themeId => await loadingStrategy(themeId)), (async () => {
-    if (!themeLoader && UNSAFE_themeOptions && isValidBrandHex(UNSAFE_themeOptions === null || UNSAFE_themeOptions === void 0 ? void 0 : UNSAFE_themeOptions.brandColor)) {
-      const mode = colorMode || themeStateDefaults['colorMode'];
-      const attrOfMissingCustomStyles = findMissingCustomStyleElements(UNSAFE_themeOptions, mode);
-      if (attrOfMissingCustomStyles.length === 0) {
-        return false;
-      }
-      const {
-        loadAndAppendCustomThemeCss
-      } = await import( /* webpackChunkName: "@atlaskit-internal_atlassian-custom-theme" */
-      './custom-theme');
-      await loadAndAppendCustomThemeCss({
-        colorMode: attrOfMissingCustomStyles.length === 2 ? 'auto' :
-        // only load the missing custom theme styles
-        attrOfMissingCustomStyles[0],
-        UNSAFE_themeOptions
-      });
+
+  // Load standard themes
+  const loadingTasks = themePreferences.map(async themeId => await loadingStrategy(themeId));
+
+  // Load custom themes if needed
+  if (!themeLoader && UNSAFE_themeOptions && isValidBrandHex(UNSAFE_themeOptions === null || UNSAFE_themeOptions === void 0 ? void 0 : UNSAFE_themeOptions.brandColor)) {
+    const mode = colorMode || themeStateDefaults['colorMode'];
+    const attrOfMissingCustomStyles = findMissingCustomStyleElements(UNSAFE_themeOptions, mode);
+    if (attrOfMissingCustomStyles.length > 0) {
+      // Load custom theme styles
+      loadingTasks.push((async () => {
+        const {
+          loadAndAppendCustomThemeCss
+        } = await import( /* webpackChunkName: "@atlaskit-internal_atlassian-custom-theme" */
+        './custom-theme');
+        loadAndAppendCustomThemeCss({
+          colorMode: attrOfMissingCustomStyles.length === 2 ? 'auto' :
+          // only load the missing custom theme styles
+          attrOfMissingCustomStyles[0],
+          UNSAFE_themeOptions
+        });
+      })());
     }
-  })()]);
-  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,
-    shape,
-    spacing,
-    typography,
-    UNSAFE_themeOptions: themeLoader ? undefined : UNSAFE_themeOptions
-  });
-  Object.entries(themeAttributes).forEach(([key, value]) => {
-    document.documentElement.setAttribute(key, value);
-  });
-  return unbindThemeChangeListener;
+  await Promise.all(loadingTasks);
+  const autoUnbind = configurePage(themeState);
+  return autoUnbind;
 };
 export default setGlobalTheme;

package/dist/es2019/theme-config.js

@@ -174,8 +174,14 @@ export const themeStateDefaults = {
   dark: 'dark',
   light: 'light',
   shape: undefined,
-  spacing: undefined,
+  spacing: 'spacing',
   typography: undefined,
   UNSAFE_themeOptions: undefined
 };
+
+/**
+ * Represents theme state once mounted to the page
+ * (the page doesn't have an "auto" color mode, it's either light or dark)
+ */
+
 export default themeConfig;

package/dist/es2019/utils/color-mode-listeners.js

@@ -0,0 +1,48 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { bind } from 'bind-event-listener';
+import { COLOR_MODE_ATTRIBUTE } from '../constants';
+import { darkModeMediaQuery } from './theme-loading';
+const isMatchMediaAvailable = typeof window !== 'undefined' && 'matchMedia' in window;
+
+/**
+ * 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.
+ */
+function checkNativeListener(e) {
+  const element = document.documentElement;
+  element.setAttribute(COLOR_MODE_ATTRIBUTE, e.matches ? 'dark' : 'light');
+}
+const darkModeMql = isMatchMediaAvailable && window.matchMedia(darkModeMediaQuery);
+class ColorModeObserver {
+  constructor() {
+    _defineProperty(this, "unbindThemeChangeListener", null);
+  }
+  getColorMode() {
+    if (!darkModeMql) {
+      return 'light';
+    }
+    return darkModeMql !== null && darkModeMql !== void 0 && darkModeMql.matches ? 'dark' : 'light';
+  }
+  bind() {
+    if (darkModeMql && this.unbindThemeChangeListener === null) {
+      this.unbindThemeChangeListener = bind(darkModeMql, {
+        type: 'change',
+        listener: checkNativeListener
+      });
+    }
+  }
+  unbind() {
+    if (this.unbindThemeChangeListener) {
+      this.unbindThemeChangeListener();
+      this.unbindThemeChangeListener = null;
+    }
+  }
+}
+
+/**
+ * A singleton color mode observer - binds "auto" switching logic to a single `mediaQueryList` listener
+ * that can be unbound by any consumer when no longer needed.
+ */
+const SingletonColorModeObserver = new ColorModeObserver();
+export default SingletonColorModeObserver;

package/dist/es2019/utils/configure-page.js

@@ -0,0 +1,22 @@
+import getThemeHtmlAttrs from '../get-theme-html-attrs';
+import ColorModeObserver from './color-mode-listeners';
+
+/**
+ * Given ThemeState, sets appropriate html attributes on the documentElement,
+ * adds a listener to keep colorMode updated, and returns a function to unbind.
+ */
+export default function configurePage(themeState) {
+  if (themeState.colorMode === 'auto') {
+    // Set colorMode based on the user preference
+    themeState.colorMode = ColorModeObserver.getColorMode();
+    // Bind a listener (if one doesn't already exist) to keep colorMode updated
+    ColorModeObserver.bind();
+  } else {
+    ColorModeObserver.unbind();
+  }
+  const themeAttributes = getThemeHtmlAttrs(themeState);
+  Object.entries(themeAttributes).forEach(([key, value]) => {
+    document.documentElement.setAttribute(key, value);
+  });
+  return () => ColorModeObserver.unbind;
+}

package/dist/es2019/utils/get-theme-preferences.js

@@ -17,10 +17,5 @@ export const getThemePreferences = themeState => {
   if (getBooleanFF('platform.design-system-team.border-checkbox_nyoiu')) {
     themePreferences.push(`${themePreferences.includes('dark') ? 'dark' : 'light'}-new-input-border`);
   }
-
-  // Load spacing by default
-  if (!themePreferences.includes('spacing')) {
-    themePreferences.push('spacing');
-  }
   return [...new Set(themePreferences)];
 };

package/dist/esm/constants.js

@@ -1,6 +1,7 @@
 export var THEME_DATA_ATTRIBUTE = 'data-theme';
 export var COLOR_MODE_ATTRIBUTE = 'data-color-mode';
 export var CUSTOM_THEME_ATTRIBUTE = 'data-custom-theme';
+export var DEFAULT_THEME = 'light';
 export var CSS_PREFIX = 'ds';
 export var CSS_VAR_FULL = ['opacity', 'font', 'space', 'border'];
 export var TOKEN_NOT_FOUND_CSS_VAR = "--".concat(CSS_PREFIX, "-token-not-found");