@atlaskit/tokens 1.22.1 → 1.24.0

package/dist/es2019/artifacts/themes/atlassian-dark.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::3d85ad6445c9e91ba4be74807676d20d>>
+ * @codegen <<SignedSource::e988c9f1dbc5f3401409a53e6b2d71e2>>
  * @codegenCommand yarn build tokens
  */
 export default `
@@ -42,6 +42,7 @@ html[data-color-mode="dark"][data-theme~="dark:dark"] {
   --ds-text-subtle: #9FADBC;
   --ds-link: #579DFF;
   --ds-link-pressed: #85B8FF;
+  --ds-link-visited: #B8ACF6;
   --ds-icon: #9FADBC;
   --ds-icon-accent-lime: #82B536;
   --ds-icon-accent-red: #EF5C48;

package/dist/es2019/artifacts/themes/atlassian-legacy-dark.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0ca328e17457ed4f82d7463a4a3e8b82>>
+ * @codegen <<SignedSource::cbc95efad14e4b8f73c4b91d9c616f52>>
  * @codegenCommand yarn build tokens
  */
 export default `
@@ -42,6 +42,7 @@ html[data-color-mode="dark"][data-theme~="dark:legacy-dark"] {
   --ds-text-subtle: #9FB0CC;
   --ds-link: #0052CC;
   --ds-link-pressed: #0065FF;
+  --ds-link-visited: #6554C0;
   --ds-icon: #DCE5F5;
   --ds-icon-accent-lime: #6A9A23;
   --ds-icon-accent-red: #BF2600;

package/dist/es2019/artifacts/themes/atlassian-legacy-light.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8adee2e1e5e653298a65f7f29ffd0bda>>
+ * @codegen <<SignedSource::864da039f8f9b771294919957d8579f4>>
  * @codegenCommand yarn build tokens
  */
 export default `
@@ -42,6 +42,7 @@ html[data-color-mode="dark"][data-theme~="dark:legacy-light"] {
   --ds-text-subtle: #42526E;
   --ds-link: #0052CC;
   --ds-link-pressed: #0747A6;
+  --ds-link-visited: #403294;
   --ds-icon: #505F79;
   --ds-icon-accent-lime: #6A9A23;
   --ds-icon-accent-red: #FF5630;

package/dist/es2019/artifacts/themes/atlassian-light.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::652f949fb680727e4cfebdb69b570a15>>
+ * @codegen <<SignedSource::8c2806dec8e3f2fc93f7bc93229db8b9>>
  * @codegenCommand yarn build tokens
  */
 export default `
@@ -42,6 +42,7 @@ html[data-color-mode="dark"][data-theme~="dark:light"] {
   --ds-text-subtle: #44546F;
   --ds-link: #0C66E4;
   --ds-link-pressed: #0055CC;
+  --ds-link-visited: #5E4DB2;
   --ds-icon: #44546F;
   --ds-icon-accent-lime: #6A9A23;
   --ds-icon-accent-red: #E34935;

package/dist/es2019/artifacts/token-default-values.js

@@ -7,7 +7,7 @@
  * Token names mapped to their value in the default Atlassian themes ('light').
  * These default values are used by the Babel plugin to optionally provide automatic fallbacks.
  *
- * @codegen <<SignedSource::2ed9c3b5219514c1dd5c348fb4647ed3>>
+ * @codegen <<SignedSource::2055e9d3b964a68e35d40fda2189f30a>>
  * @codegenCommand yarn build tokens
  */
 const defaultTokenValues = {
@@ -46,6 +46,7 @@ const defaultTokenValues = {
   'color.text.subtle': '#44546F',
   'color.link': '#0C66E4',
   'color.link.pressed': '#0055CC',
+  'color.link.visited': '#5E4DB2',
   'color.icon': '#44546F',
   'color.icon.accent.lime': '#6A9A23',
   'color.icon.accent.red': '#E34935',

package/dist/es2019/artifacts/token-names.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9b8fdc7df9d7269fb27f22c5e06d7743>>
+ * @codegen <<SignedSource::85873830ffd9373b872fe41c841504eb>>
  * @codegenCommand yarn build tokens
  */
 const tokens = {
@@ -39,6 +39,7 @@ const tokens = {
   'color.text.subtle': '--ds-text-subtle',
   'color.link': '--ds-link',
   'color.link.pressed': '--ds-link-pressed',
+  'color.link.visited': '--ds-link-visited',
   'color.icon': '--ds-icon',
   'color.icon.accent.lime': '--ds-icon-accent-lime',
   'color.icon.accent.red': '--ds-icon-accent-red',

package/dist/es2019/artifacts/tokens-raw/atlassian-dark.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::a80d8cbd5dd6567623aa21c92718805d>>
+ * @codegen <<SignedSource::53fe3ce214e188eaafa0c96c9d57e282>>
  * @codegenCommand yarn build tokens
  */
 const tokens = [{
@@ -773,6 +773,28 @@ const tokens = [{
   "name": "color.link.pressed",
   "path": ["color", "link", "pressed"],
   "cleanName": "color.link.pressed"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.23.0",
+    "description": "Use for links in a visited state."
+  },
+  "value": "#B8ACF6",
+  "filePath": "src/tokens/atlassian-dark/color/text.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.23.0",
+      "description": "Use for links in a visited state."
+    },
+    "value": "Purple300"
+  },
+  "name": "color.link.visited",
+  "path": ["color", "link", "visited"],
+  "cleanName": "color.link.visited"
 }, {
   "attributes": {
     "group": "paint",

package/dist/es2019/artifacts/tokens-raw/atlassian-legacy-dark.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d20511e24953b6338bedcac850c9ecf7>>
+ * @codegen <<SignedSource::bee85f1b04f33c290a4e90dad09a8602>>
  * @codegenCommand yarn build tokens
  */
 const tokens = [{
@@ -773,6 +773,28 @@ const tokens = [{
   "name": "color.link.pressed",
   "path": ["color", "link", "pressed"],
   "cleanName": "color.link.pressed"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.23.0",
+    "description": "Use for links in a visited state."
+  },
+  "value": "#6554C0",
+  "filePath": "src/tokens/atlassian-legacy-dark/color/text.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.23.0",
+      "description": "Use for links in a visited state."
+    },
+    "value": "P300"
+  },
+  "name": "color.link.visited",
+  "path": ["color", "link", "visited"],
+  "cleanName": "color.link.visited"
 }, {
   "attributes": {
     "group": "paint",

package/dist/es2019/artifacts/tokens-raw/atlassian-legacy-light.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9faa03010b915213b0e7b73c8c9a4264>>
+ * @codegen <<SignedSource::3335668d6b974c0aae9b4e7246358fd2>>
  * @codegenCommand yarn build tokens
  */
 const tokens = [{
@@ -773,6 +773,28 @@ const tokens = [{
   "name": "color.link.pressed",
   "path": ["color", "link", "pressed"],
   "cleanName": "color.link.pressed"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.23.0",
+    "description": "Use for links in a visited state."
+  },
+  "value": "#403294",
+  "filePath": "src/tokens/atlassian-legacy-light/color/text.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.23.0",
+      "description": "Use for links in a visited state."
+    },
+    "value": "P500"
+  },
+  "name": "color.link.visited",
+  "path": ["color", "link", "visited"],
+  "cleanName": "color.link.visited"
 }, {
   "attributes": {
     "group": "paint",

package/dist/es2019/artifacts/tokens-raw/atlassian-light.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::656f1845b17c239ea0ba3e5d62dcba09>>
+ * @codegen <<SignedSource::6009ba9010fc2a039dc1080a936d9f80>>
  * @codegenCommand yarn build tokens
  */
 const tokens = [{
@@ -773,6 +773,28 @@ const tokens = [{
   "name": "color.link.pressed",
   "path": ["color", "link", "pressed"],
   "cleanName": "color.link.pressed"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.23.0",
+    "description": "Use for links in a visited state."
+  },
+  "value": "#5E4DB2",
+  "filePath": "src/tokens/atlassian-light/color/text.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.23.0",
+      "description": "Use for links in a visited state."
+    },
+    "value": "Purple800"
+  },
+  "name": "color.link.visited",
+  "path": ["color", "link", "visited"],
+  "cleanName": "color.link.visited"
 }, {
   "attributes": {
     "group": "paint",

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-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.1";
+const version = "1.24.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.1";
+const version = "1.24.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

@@ -178,4 +178,10 @@ export const themeStateDefaults = {
   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/tokens/atlassian-dark/color/text.js

@@ -49,6 +49,9 @@ const color = {
       },
       pressed: {
         value: 'Blue300'
+      },
+      visited: {
+        value: 'Purple300'
       }
     }
   }

package/dist/es2019/tokens/atlassian-legacy-dark/color/text.js

@@ -49,6 +49,9 @@ const color = {
       },
       pressed: {
         value: 'B300'
+      },
+      visited: {
+        value: 'P300'
       }
     }
   }

package/dist/es2019/tokens/atlassian-legacy-light/color/text.js

@@ -49,6 +49,9 @@ const color = {
       },
       pressed: {
         value: 'B500'
+      },
+      visited: {
+        value: 'P500'
       }
     }
   }

package/dist/es2019/tokens/atlassian-light/color/text.js

@@ -49,6 +49,9 @@ const color = {
       },
       pressed: {
         value: 'Blue800'
+      },
+      visited: {
+        value: 'Purple800'
       }
     }
   }

package/dist/es2019/tokens/default/color/text.js

@@ -124,6 +124,14 @@ const color = {
           introduced: '0.6.0',
           description: 'Use for links in a pressed state.'
         }
+      },
+      visited: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          introduced: '1.23.0',
+          description: 'Use for links in a visited state.'
+        }
       }
     }
   }

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;