@atlaskit/tokens 1.13.0 → 1.13.2

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

@@ -0,0 +1,62 @@
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { COLOR_MODE_ATTRIBUTE, CUSTOM_THEME_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
+import { themeStateDefaults } from './theme-config';
+import { themeObjectToString } from './theme-state-transformer';
+import { isValidBrandHex } from './utils/color-utils';
+import { hash } from './utils/hash';
+const defaultColorMode = 'light';
+
+/**
+ * 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.
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
+ *
+ * @returns {Object} Object of HTML attributes to be applied to the document root
+ */
+const getThemeHtmlAttrs = ({
+  colorMode = themeStateDefaults['colorMode'],
+  dark = themeStateDefaults['dark'],
+  light = themeStateDefaults['light'],
+  shape = themeStateDefaults['shape'],
+  spacing = themeStateDefaults['spacing'],
+  typography = themeStateDefaults['typography'],
+  UNSAFE_themeOptions = themeStateDefaults['UNSAFE_themeOptions']
+} = {}) => {
+  let themePreferences = {
+    dark,
+    light,
+    shape,
+    spacing,
+    typography
+  };
+
+  // Load spacing by default, currently behind a feature flag
+  if (getBooleanFF('platform.design-system-team.space-and-shape-tokens_q5me6')) {
+    themePreferences = {
+      dark,
+      light,
+      shape,
+      spacing: 'spacing',
+      typography
+    };
+  }
+  const themeAttribute = themeObjectToString(themePreferences);
+  const result = {
+    [THEME_DATA_ATTRIBUTE]: themeAttribute,
+    [COLOR_MODE_ATTRIBUTE]: colorMode === 'auto' ? defaultColorMode : colorMode
+  };
+  if (UNSAFE_themeOptions && isValidBrandHex(UNSAFE_themeOptions.brandColor)) {
+    const optionString = JSON.stringify(UNSAFE_themeOptions);
+    const uniqueId = hash(optionString);
+    result[CUSTOM_THEME_ATTRIBUTE] = uniqueId;
+  }
+  return result;
+};
+export default getThemeHtmlAttrs;

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

@@ -0,0 +1,72 @@
+import { themeIdsWithOverrides, themeStateDefaults } from './theme-config';
+import { isValidBrandHex } from './utils/color-utils';
+import { getThemePreferences } from './utils/get-theme-preferences';
+import { loadThemeCss } from './utils/theme-loading';
+/**
+ * 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.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
+ *
+ * @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 array will be empty.
+ */
+const getThemeStyles = async preferences => {
+  let themePreferences;
+  if (preferences === 'all') {
+    themePreferences = themeIdsWithOverrides;
+  } else {
+    themePreferences = getThemePreferences({
+      colorMode: (preferences === null || preferences === void 0 ? void 0 : preferences.colorMode) || themeStateDefaults['colorMode'],
+      dark: (preferences === null || preferences === void 0 ? void 0 : preferences.dark) || themeStateDefaults['dark'],
+      light: (preferences === null || preferences === void 0 ? void 0 : preferences.light) || themeStateDefaults['light'],
+      shape: (preferences === null || preferences === void 0 ? void 0 : preferences.shape) || themeStateDefaults['shape'],
+      spacing: (preferences === null || preferences === void 0 ? void 0 : preferences.spacing) || themeStateDefaults['spacing'],
+      typography: (preferences === null || preferences === void 0 ? void 0 : preferences.typography) || themeStateDefaults['typography']
+    });
+  }
+  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 undefined if there's an error loading it, will be filtered out later.
+      return undefined;
+    }
+  }),
+  // Add custom themes if they're present
+  (async () => {
+    var _preferences$UNSAFE_t;
+    if (preferences !== 'all' && preferences !== null && preferences !== void 0 && preferences.UNSAFE_themeOptions && isValidBrandHex(preferences === null || preferences === void 0 ? void 0 : (_preferences$UNSAFE_t = preferences.UNSAFE_themeOptions) === null || _preferences$UNSAFE_t === void 0 ? void 0 : _preferences$UNSAFE_t.brandColor)) {
+      try {
+        const {
+          getCustomThemeStyles
+        } = await import( /* webpackChunkName: "@atlaskit-internal_atlassian-custom-theme" */
+        './custom-theme');
+        const customThemeStyles = await getCustomThemeStyles({
+          colorMode: (preferences === null || preferences === void 0 ? void 0 : preferences.colorMode) || themeStateDefaults['colorMode'],
+          UNSAFE_themeOptions: preferences === null || preferences === void 0 ? void 0 : preferences.UNSAFE_themeOptions
+        });
+        return customThemeStyles;
+      } catch {
+        // Return undefined if there's an error loading it, will be filtered out later.
+        return undefined;
+      }
+    }
+  })()]);
+  return results.flat().filter(theme => theme !== undefined);
+};
+export default getThemeStyles;

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 = "0.0.0-development";
+const version = "1.13.2";
 /**
  * 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 = "0.0.0-development";
+const version = "1.13.2";
 /**
  * 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

@@ -1,8 +1,11 @@
+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, getThemeStyles, getThemeHtmlAttrs, getSSRAutoScript } from './set-global-theme';
-export { default as themeConfig } from './theme-config';
-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';
+export { default as setGlobalTheme } from './set-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';
+export { default as useThemeObserver } from './use-theme-observer';
+export { default as ThemeMutationObserver } from './theme-mutation-observer';
+export { default as getGlobalTheme } from './get-global-theme';
+export { themeStringToObject, themeObjectToString } from './theme-state-transformer';

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

@@ -1,30 +1,18 @@
 import { bind } from 'bind-event-listener';
 import noop from '@atlaskit/ds-lib/noop';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { COLOR_MODE_ATTRIBUTE, CUSTOM_THEME_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
-import { themeIdsWithOverrides } from './theme-config';
+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 { findMissingCustomStyleElements } from './utils/custom-theme-loading-utils';
-import { hash } from './utils/hash';
-import { loadAndAppendThemeCss, loadThemeCss } from './utils/theme-loading';
-import { themeObjectToString } from './utils/theme-state-transformer';
+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 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;
-export const themeStateDefaults = {
-  colorMode: 'auto',
-  dark: 'dark',
-  light: 'light',
-  shape: undefined,
-  spacing: undefined,
-  typography: undefined,
-  UNSAFE_themeOptions: undefined
-};
 
 /**
  * Updates the current theme when the system theme changes. Should be bound
@@ -35,33 +23,6 @@ const checkNativeListener = function (e) {
   const element = document.documentElement;
   element.setAttribute(COLOR_MODE_ATTRIBUTE, e.matches ? 'dark' : 'light');
 };
-const getThemePreferences = themeState => {
-  const {
-    colorMode,
-    dark,
-    light,
-    shape,
-    spacing,
-    typography
-  } = themeState;
-  const themePreferences = colorMode === 'auto' ? [light, dark] : [themeState[colorMode]];
-  [shape, spacing, typography].forEach(themeId => {
-    if (themeId) {
-      themePreferences.push(themeId);
-    }
-  });
-  if (getBooleanFF('platform.design-system-team.border-checkbox_nyoiu')) {
-    themePreferences.push(`${themePreferences.includes('dark') ? 'dark' : 'light'}-new-input-border`);
-  }
-
-  // Load shape and spacing by default, currently behind a feature flag
-  if (getBooleanFF('platform.design-system-team.space-and-shape-tokens_q5me6')) {
-    if (!themePreferences.includes('spacing')) {
-      themePreferences.push('spacing');
-    }
-  }
-  return [...new Set(themePreferences)];
-};
 
 /**
  * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-mode` attributes on your page's <html> tag.
@@ -145,145 +106,4 @@ const setGlobalTheme = async ({
   });
   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.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
- *
- * @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 array will be empty.
- */
-export const getThemeStyles = async preferences => {
-  let themePreferences;
-  if (preferences === 'all') {
-    themePreferences = themeIdsWithOverrides;
-  } else {
-    themePreferences = getThemePreferences({
-      colorMode: (preferences === null || preferences === void 0 ? void 0 : preferences.colorMode) || themeStateDefaults['colorMode'],
-      dark: (preferences === null || preferences === void 0 ? void 0 : preferences.dark) || themeStateDefaults['dark'],
-      light: (preferences === null || preferences === void 0 ? void 0 : preferences.light) || themeStateDefaults['light'],
-      shape: (preferences === null || preferences === void 0 ? void 0 : preferences.shape) || themeStateDefaults['shape'],
-      spacing: (preferences === null || preferences === void 0 ? void 0 : preferences.spacing) || themeStateDefaults['spacing'],
-      typography: (preferences === null || preferences === void 0 ? void 0 : preferences.typography) || themeStateDefaults['typography']
-    });
-  }
-  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 undefined if there's an error loading it, will be filtered out later.
-      return undefined;
-    }
-  }),
-  // Add custom themes if they're present
-  (async () => {
-    var _preferences$UNSAFE_t;
-    if (preferences !== 'all' && preferences !== null && preferences !== void 0 && preferences.UNSAFE_themeOptions && isValidBrandHex(preferences === null || preferences === void 0 ? void 0 : (_preferences$UNSAFE_t = preferences.UNSAFE_themeOptions) === null || _preferences$UNSAFE_t === void 0 ? void 0 : _preferences$UNSAFE_t.brandColor)) {
-      try {
-        const {
-          getCustomThemeStyles
-        } = await import( /* webpackChunkName: "@atlaskit-internal_atlassian-custom-theme" */
-        './custom-theme');
-        const customThemeStyles = await getCustomThemeStyles({
-          colorMode: (preferences === null || preferences === void 0 ? void 0 : preferences.colorMode) || themeStateDefaults['colorMode'],
-          UNSAFE_themeOptions: preferences === null || preferences === void 0 ? void 0 : preferences.UNSAFE_themeOptions
-        });
-        return customThemeStyles;
-      } catch {
-        // Return undefined if there's an error loading it, will be filtered out later.
-        return undefined;
-      }
-    }
-  })()]);
-  return results.flat().filter(theme => theme !== undefined);
-};
-
-/**
- * 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.
- * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
- *
- * @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'],
-  shape = themeStateDefaults['shape'],
-  spacing = themeStateDefaults['spacing'],
-  typography = themeStateDefaults['typography'],
-  UNSAFE_themeOptions = themeStateDefaults['UNSAFE_themeOptions']
-} = {}) => {
-  let themePreferences = {
-    dark,
-    light,
-    shape,
-    spacing,
-    typography
-  };
-
-  // Load spacing by default, currently behind a feature flag
-  if (getBooleanFF('platform.design-system-team.space-and-shape-tokens_q5me6')) {
-    themePreferences = {
-      dark,
-      light,
-      shape,
-      spacing: 'spacing',
-      typography
-    };
-  }
-  const themeAttribute = themeObjectToString(themePreferences);
-  const result = {
-    [THEME_DATA_ATTRIBUTE]: themeAttribute,
-    [COLOR_MODE_ATTRIBUTE]: colorMode === 'auto' ? defaultColorMode : colorMode
-  };
-  if (UNSAFE_themeOptions && isValidBrandHex(UNSAFE_themeOptions.brandColor)) {
-    const optionString = JSON.stringify(UNSAFE_themeOptions);
-    const uniqueId = hash(optionString);
-    result[CUSTOM_THEME_ATTRIBUTE] = uniqueId;
-  }
-  return result;
-};
-
-/**
- * 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

@@ -141,4 +141,25 @@ const themeConfig = {
     }
   }
 };
+
+/**
+ * ThemeOptionsSchema: additional configuration options used to customize Atlassian's themes
+ */
+
+/**
+ * ThemeState: the standard representation of an app's current theme and preferences
+ */
+
+/**
+ * themeStateDefaults: the default values for ThemeState used by theming utilities
+ */
+export const themeStateDefaults = {
+  colorMode: 'auto',
+  dark: 'dark',
+  light: 'light',
+  shape: undefined,
+  spacing: undefined,
+  typography: undefined,
+  UNSAFE_themeOptions: undefined
+};
 export default themeConfig;

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

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { COLOR_MODE_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
-import { getGlobalTheme } from './get-global-theme';
+import getGlobalTheme from './get-global-theme';
 /**
  * A MutationObserver which watches the `<html>` element for changes to the theme.
  *
@@ -14,7 +14,7 @@ import { getGlobalTheme } from './get-global-theme';
  * observer.observe();
  * ```
  */
-export class ThemeMutationObserver {
+export default class ThemeMutationObserver {
   constructor(callback) {
     _defineProperty(this, "observer", null);
     _defineProperty(this, "mediaObserver", null);

package/dist/es2019/{utils/theme-state-transformer.js → theme-state-transformer.js}

@@ -1,4 +1,4 @@
-import { themeIds } from '../theme-config';
+import { themeIds } from './theme-config';
 const themeKinds = ['light', 'dark', 'spacing', 'typography', 'shape'];
 const isThemeKind = themeKind => {
   return themeKinds.find(kind => kind === themeKind) !== undefined;

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

@@ -11,7 +11,7 @@ const color = {
         value: 'N0'
       },
       focused: {
-        value: 'B100'
+        value: 'B200'
       },
       input: {
         value: 'N10'

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

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { getGlobalTheme } from './get-global-theme';
-import { ThemeMutationObserver } from './theme-mutation-observer';
+import getGlobalTheme from './get-global-theme';
+import ThemeMutationObserver from './theme-mutation-observer';
 
 /**
  * A React hook which returns the current themes and color-mode set on `<html>`.
@@ -15,7 +15,7 @@ import { ThemeMutationObserver } from './theme-mutation-observer';
  * }, [theme.colorMode]);
  * ```
  */
-export const useThemeObserver = () => {
+const useThemeObserver = () => {
   const [theme, setTheme] = useState(getGlobalTheme());
   useEffect(() => {
     const observer = new ThemeMutationObserver(theme => setTheme(theme));
@@ -23,4 +23,5 @@ export const useThemeObserver = () => {
     return () => observer.disconnect();
   }, []);
   return theme;
-};
+};
+export default useThemeObserver;

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

@@ -0,0 +1,28 @@
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+export const getThemePreferences = themeState => {
+  const {
+    colorMode,
+    dark,
+    light,
+    shape,
+    spacing,
+    typography
+  } = themeState;
+  const themePreferences = colorMode === 'auto' ? [light, dark] : [themeState[colorMode]];
+  [shape, spacing, typography].forEach(themeId => {
+    if (themeId) {
+      themePreferences.push(themeId);
+    }
+  });
+  if (getBooleanFF('platform.design-system-team.border-checkbox_nyoiu')) {
+    themePreferences.push(`${themePreferences.includes('dark') ? 'dark' : 'light'}-new-input-border`);
+  }
+
+  // Load shape and spacing by default, currently behind a feature flag
+  if (getBooleanFF('platform.design-system-team.space-and-shape-tokens_q5me6')) {
+    if (!themePreferences.includes('spacing')) {
+      themePreferences.push('spacing');
+    }
+  }
+  return [...new Set(themePreferences)];
+};

package/dist/es2019/utils/theme-loading.js

@@ -15,4 +15,5 @@ export const loadThemeCss = async themeId => {
     default: themeCss
   } = await themeImportMap[themeId]();
   return themeCss;
-};
+};
+export const darkModeMediaQuery = '(prefers-color-scheme: dark)';

package/dist/es2019/version.json

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

package/dist/esm/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::9bf19250d90797c5238589fae51defe5>>
+ * @codegen <<SignedSource::6c33e244168e3fd752767b58505680ca>>
  * @codegenCommand yarn build tokens
  */
-export default "\nhtml[data-color-mode=\"light\"][data-theme~=\"light:legacy-light\"],\nhtml[data-color-mode=\"dark\"][data-theme~=\"dark:legacy-light\"] {\n  color-scheme: light;\n  --ds-text: #172B4D;\n  --ds-text-accent-lime: #4C6B1F;\n  --ds-text-accent-lime-bolder: #37471F;\n  --ds-text-accent-red: #DE350B;\n  --ds-text-accent-red-bolder: #BF2600;\n  --ds-text-accent-orange: #F18D13;\n  --ds-text-accent-orange-bolder: #B65C02;\n  --ds-text-accent-yellow: #FF991F;\n  --ds-text-accent-yellow-bolder: #FF8B00;\n  --ds-text-accent-green: #00875A;\n  --ds-text-accent-green-bolder: #006644;\n  --ds-text-accent-teal: #00A3BF;\n  --ds-text-accent-teal-bolder: #008DA6;\n  --ds-text-accent-blue: #0052CC;\n  --ds-text-accent-blue-bolder: #0747A6;\n  --ds-text-accent-purple: #5243AA;\n  --ds-text-accent-purple-bolder: #403294;\n  --ds-text-accent-magenta: #E774BB;\n  --ds-text-accent-magenta-bolder: #DA62AC;\n  --ds-text-accent-gray: #505F79;\n  --ds-text-accent-gray-bolder: #172B4D;\n  --ds-text-disabled: #A5ADBA;\n  --ds-text-inverse: #FFFFFF;\n  --ds-text-selected: #0052CC;\n  --ds-text-brand: #0065FF;\n  --ds-text-danger: #DE350B;\n  --ds-text-warning: #974F0C;\n  --ds-text-warning-inverse: #172B4D;\n  --ds-text-success: #006644;\n  --ds-text-discovery: #403294;\n  --ds-text-information: #0052CC;\n  --ds-text-subtlest: #7A869A;\n  --ds-text-subtle: #42526E;\n  --ds-link: #0052CC;\n  --ds-link-pressed: #0747A6;\n  --ds-icon: #505F79;\n  --ds-icon-accent-lime: #6A9A23;\n  --ds-icon-accent-red: #FF5630;\n  --ds-icon-accent-orange: #D94008;\n  --ds-icon-accent-yellow: #FFAB00;\n  --ds-icon-accent-green: #36B37E;\n  --ds-icon-accent-teal: #00B8D9;\n  --ds-icon-accent-blue: #0065FF;\n  --ds-icon-accent-purple: #6554C0;\n  --ds-icon-accent-magenta: #CD519D;\n  --ds-icon-accent-gray: #5E6C84;\n  --ds-icon-disabled: #8993A4;\n  --ds-icon-inverse: #FFFFFF;\n  --ds-icon-selected: #0052CC;\n  --ds-icon-brand: #0065FF;\n  --ds-icon-danger: #DE350B;\n  --ds-icon-warning: #FFC400;\n  --ds-icon-warning-inverse: #253858;\n  --ds-icon-success: #00875A;\n  --ds-icon-discovery: #8777D9;\n  --ds-icon-information: #0747A6;\n  --ds-icon-subtle: #6B778C;\n  --ds-border: #091e4221;\n  --ds-border-accent-lime: #6A9A23;\n  --ds-border-accent-red: #FF5630;\n  --ds-border-accent-orange: #D94008;\n  --ds-border-accent-yellow: #FFAB00;\n  --ds-border-accent-green: #36B37E;\n  --ds-border-accent-teal: #00B8D9;\n  --ds-border-accent-blue: #0065FF;\n  --ds-border-accent-purple: #6554C0;\n  --ds-border-accent-magenta: #CD519D;\n  --ds-border-accent-gray: #5E6C84;\n  --ds-border-disabled: #FAFBFC;\n  --ds-border-focused: #4C9AFF;\n  --ds-border-input: #FAFBFC;\n  --ds-border-inverse: #FFFFFF;\n  --ds-border-selected: #0052CC;\n  --ds-border-brand: #0052CC;\n  --ds-border-danger: #FF5630;\n  --ds-border-warning: #FFC400;\n  --ds-border-success: #00875A;\n  --ds-border-discovery: #998DD9;\n  --ds-border-information: #0065FF;\n  --ds-border-bold: #344563;\n  --ds-background-accent-lime-subtlest: #EEFBDA;\n  --ds-background-accent-lime-subtler: #D3F1A7;\n  --ds-background-accent-lime-subtle: #94C748;\n  --ds-background-accent-lime-bolder: #5B7F24;\n  --ds-background-accent-red-subtlest: #FF8F73;\n  --ds-background-accent-red-subtler: #FF7452;\n  --ds-background-accent-red-subtle: #DE350B;\n  --ds-background-accent-red-bolder: #DE350B;\n  --ds-background-accent-orange-subtlest: #F18D13;\n  --ds-background-accent-orange-subtler: #B65C02;\n  --ds-background-accent-orange-subtle: #5F3811;\n  --ds-background-accent-orange-bolder: #43290F;\n  --ds-background-accent-yellow-subtlest: #FFE380;\n  --ds-background-accent-yellow-subtler: #FFC400;\n  --ds-background-accent-yellow-subtle: #FF991F;\n  --ds-background-accent-yellow-bolder: #FF991F;\n  --ds-background-accent-green-subtlest: #79F2C0;\n  --ds-background-accent-green-subtler: #57D9A3;\n  --ds-background-accent-green-subtle: #00875A;\n  --ds-background-accent-green-bolder: #00875A;\n  --ds-background-accent-teal-subtlest: #79E2F2;\n  --ds-background-accent-teal-subtler: #00C7E6;\n  --ds-background-accent-teal-subtle: #00A3BF;\n  --ds-background-accent-teal-bolder: #00A3BF;\n  --ds-background-accent-blue-subtlest: #4C9AFF;\n  --ds-background-accent-blue-subtler: #2684FF;\n  --ds-background-accent-blue-subtle: #0052CC;\n  --ds-background-accent-blue-bolder: #0052CC;\n  --ds-background-accent-purple-subtlest: #998DD9;\n  --ds-background-accent-purple-subtler: #8777D9;\n  --ds-background-accent-purple-subtle: #5243AA;\n  --ds-background-accent-purple-bolder: #5243AA;\n  --ds-background-accent-magenta-subtlest: #E774BB;\n  --ds-background-accent-magenta-subtler: #E774BB;\n  --ds-background-accent-magenta-subtle: #E774BB;\n  --ds-background-accent-magenta-bolder: #E774BB;\n  --ds-background-accent-gray-subtlest: #6B778C;\n  --ds-background-accent-gray-subtler: #5E6C84;\n  --ds-background-accent-gray-subtle: #42526E;\n  --ds-background-accent-gray-bolder: #505F79;\n  --ds-background-disabled: #091e4289;\n  --ds-background-input: #FAFBFC;\n  --ds-background-input-hovered: #EBECF0;\n  --ds-background-input-pressed: #FFFFFF;\n  --ds-background-inverse-subtle: #00000029;\n  --ds-background-inverse-subtle-hovered: #0000003D;\n  --ds-background-inverse-subtle-pressed: #00000052;\n  --ds-background-neutral: #DFE1E6;\n  --ds-background-neutral-hovered: #091e4214;\n  --ds-background-neutral-pressed: #B3D4FF;\n  --ds-background-neutral-subtle: transparent;\n  --ds-background-neutral-subtle-hovered: #091e4214;\n  --ds-background-neutral-subtle-pressed: #B3D4FF;\n  --ds-background-neutral-bold: #42526E;\n  --ds-background-neutral-bold-hovered: #505F79;\n  --ds-background-neutral-bold-pressed: #344563;\n  --ds-background-selected: #DEEBFF;\n  --ds-background-selected-hovered: #B3D4FF;\n  --ds-background-selected-pressed: #4C9AFF;\n  --ds-background-selected-bold: #0052CC;\n  --ds-background-selected-bold-hovered: #2684FF;\n  --ds-background-selected-bold-pressed: #0052CC;\n  --ds-background-brand-subtlest: #B3D4FF;\n  --ds-background-brand-subtlest-hovered: #DEEBFF;\n  --ds-background-brand-subtlest-pressed: #4C9AFF;\n  --ds-background-brand-bold: #0052CC;\n  --ds-background-brand-bold-hovered: #0065FF;\n  --ds-background-brand-bold-pressed: #0747A6;\n  --ds-background-brand-boldest: #0747A6;\n  --ds-background-brand-boldest-hovered: #0052CC;\n  --ds-background-brand-boldest-pressed: #0747A6;\n  --ds-background-danger: #FFEBE6;\n  --ds-background-danger-hovered: #FFBDAD;\n  --ds-background-danger-pressed: #FF8F73;\n  --ds-background-danger-bold: #DE350B;\n  --ds-background-danger-bold-hovered: #FF5630;\n  --ds-background-danger-bold-pressed: #BF2600;\n  --ds-background-warning: #FFFAE6;\n  --ds-background-warning-hovered: #FFF0B3;\n  --ds-background-warning-pressed: #FFE380;\n  --ds-background-warning-bold: #FFAB00;\n  --ds-background-warning-bold-hovered: #FFC400;\n  --ds-background-warning-bold-pressed: #FF991F;\n  --ds-background-success: #E3FCEF;\n  --ds-background-success-hovered: #ABF5D1;\n  --ds-background-success-pressed: #79F2C0;\n  --ds-background-success-bold: #00875A;\n  --ds-background-success-bold-hovered: #57D9A3;\n  --ds-background-success-bold-pressed: #00875A;\n  --ds-background-discovery: #EAE6FF;\n  --ds-background-discovery-hovered: #C0B6F2;\n  --ds-background-discovery-pressed: #998DD9;\n  --ds-background-discovery-bold: #5243AA;\n  --ds-background-discovery-bold-hovered: #8777D9;\n  --ds-background-discovery-bold-pressed: #5243AA;\n  --ds-background-information: #DEEBFF;\n  --ds-background-information-hovered: #B3D4FF;\n  --ds-background-information-pressed: #4C9AFF;\n  --ds-background-information-bold: #0052CC;\n  --ds-background-information-bold-hovered: #2684FF;\n  --ds-background-information-bold-pressed: #0052CC;\n  --ds-blanket: #091e4289;\n  --ds-blanket-selected: #388BFF14;\n  --ds-blanket-danger: #EF5C4814;\n  --ds-interaction-hovered: #00000029;\n  --ds-interaction-pressed: #00000052;\n  --ds-skeleton: #F4F5F7;\n  --ds-skeleton-subtle: #091e420a;\n  --ds-chart-categorical-1: #00B8D9;\n  --ds-chart-categorical-1-hovered: #00A3BF;\n  --ds-chart-categorical-2: #5243AA;\n  --ds-chart-categorical-2-hovered: #403294;\n  --ds-chart-categorical-3: #D94008;\n  --ds-chart-categorical-3-hovered: #B65C02;\n  --ds-chart-categorical-4: #943D73;\n  --ds-chart-categorical-4-hovered: #50253F;\n  --ds-chart-categorical-5: #0052CC;\n  --ds-chart-categorical-5-hovered: #0747A6;\n  --ds-chart-categorical-6: #5243AA;\n  --ds-chart-categorical-6-hovered: #403294;\n  --ds-chart-categorical-7: #50253F;\n  --ds-chart-categorical-7-hovered: #341829;\n  --ds-chart-categorical-8: #974F0C;\n  --ds-chart-categorical-8-hovered: #5F3811;\n  --ds-chart-lime-bold: #6A9A23;\n  --ds-chart-lime-bold-hovered: #5B7F24;\n  --ds-chart-lime-bolder: #5B7F24;\n  --ds-chart-lime-bolder-hovered: #4C6B1F;\n  --ds-chart-lime-boldest: #4C6B1F;\n  --ds-chart-lime-boldest-hovered: #37471F;\n  --ds-chart-neutral: #5E6C84;\n  --ds-chart-neutral-hovered: #505F79;\n  --ds-chart-red-bold: #FF5630;\n  --ds-chart-red-bold-hovered: #DE350B;\n  --ds-chart-red-bolder: #DE350B;\n  --ds-chart-red-bolder-hovered: #BF2600;\n  --ds-chart-red-boldest: #BF2600;\n  --ds-chart-red-boldest-hovered: #BF2600;\n  --ds-chart-orange-bold: #D97008;\n  --ds-chart-orange-bold-hovered: #B65C02;\n  --ds-chart-orange-bolder: #B65C02;\n  --ds-chart-orange-bolder-hovered: #974F0C;\n  --ds-chart-orange-boldest: #974F0C;\n  --ds-chart-orange-boldest-hovered: #5F3811;\n  --ds-chart-yellow-bold: #FFAB00;\n  --ds-chart-yellow-bold-hovered: #FF991F;\n  --ds-chart-yellow-bolder: #FF991F;\n  --ds-chart-yellow-bolder-hovered: #FF8B00;\n  --ds-chart-yellow-boldest: #FF8B00;\n  --ds-chart-yellow-boldest-hovered: #FF8B00;\n  --ds-chart-green-bold: #36B37E;\n  --ds-chart-green-bold-hovered: #00875A;\n  --ds-chart-green-bolder: #00875A;\n  --ds-chart-green-bolder-hovered: #006644;\n  --ds-chart-green-boldest: #006644;\n  --ds-chart-green-boldest-hovered: #006644;\n  --ds-chart-teal-bold: #00B8D9;\n  --ds-chart-teal-bold-hovered: #00A3BF;\n  --ds-chart-teal-bolder: #00A3BF;\n  --ds-chart-teal-bolder-hovered: #008DA6;\n  --ds-chart-teal-boldest: #008DA6;\n  --ds-chart-teal-boldest-hovered: #008DA6;\n  --ds-chart-blue-bold: #0065FF;\n  --ds-chart-blue-bold-hovered: #0052CC;\n  --ds-chart-blue-bolder: #0052CC;\n  --ds-chart-blue-bolder-hovered: #0747A6;\n  --ds-chart-blue-boldest: #0747A6;\n  --ds-chart-blue-boldest-hovered: #0747A6;\n  --ds-chart-purple-bold: #6554C0;\n  --ds-chart-purple-bold-hovered: #5243AA;\n  --ds-chart-purple-bolder: #5243AA;\n  --ds-chart-purple-bolder-hovered: #403294;\n  --ds-chart-purple-boldest: #403294;\n  --ds-chart-purple-boldest-hovered: #403294;\n  --ds-chart-magenta-bold: #DA62AC;\n  --ds-chart-magenta-bold-hovered: #CD519D;\n  --ds-chart-magenta-bolder: #CD519D;\n  --ds-chart-magenta-bolder-hovered: #AE4787;\n  --ds-chart-magenta-boldest: #943D73;\n  --ds-chart-magenta-boldest-hovered: #50253F;\n  --ds-chart-gray-bold: #5E6C84;\n  --ds-chart-gray-bold-hovered: #505F79;\n  --ds-chart-gray-bolder: #505F79;\n  --ds-chart-gray-bolder-hovered: #42526E;\n  --ds-chart-gray-boldest: #42526E;\n  --ds-chart-gray-boldest-hovered: #42526E;\n  --ds-chart-brand: #0065FF;\n  --ds-chart-brand-hovered: #0052CC;\n  --ds-chart-danger: #FF5630;\n  --ds-chart-danger-hovered: #DE350B;\n  --ds-chart-danger-bold: #DE350B;\n  --ds-chart-danger-bold-hovered: #BF2600;\n  --ds-chart-warning: #FFAB00;\n  --ds-chart-warning-hovered: #FF991F;\n  --ds-chart-warning-bold: #FF991F;\n  --ds-chart-warning-bold-hovered: #FF8B00;\n  --ds-chart-success: #36B37E;\n  --ds-chart-success-hovered: #00875A;\n  --ds-chart-success-bold: #00875A;\n  --ds-chart-success-bold-hovered: #006644;\n  --ds-chart-discovery: #6554C0;\n  --ds-chart-discovery-hovered: #5243AA;\n  --ds-chart-discovery-bold: #5243AA;\n  --ds-chart-discovery-bold-hovered: #403294;\n  --ds-chart-information: #0065FF;\n  --ds-chart-information-hovered: #0052CC;\n  --ds-chart-information-bold: #0052CC;\n  --ds-chart-information-bold-hovered: #0747A6;\n  --ds-surface: #FFFFFF;\n  --ds-surface-hovered: #FAFBFC;\n  --ds-surface-pressed: #F4F5F7;\n  --ds-surface-overlay: #FFFFFF;\n  --ds-surface-overlay-hovered: #FAFBFC;\n  --ds-surface-overlay-pressed: #F4F5F7;\n  --ds-surface-raised: #FFFFFF;\n  --ds-surface-raised-hovered: #FAFBFC;\n  --ds-surface-raised-pressed: #F4F5F7;\n  --ds-surface-sunken: #F4F5F7;\n  --ds-shadow-overflow: 0px 0px 8px #091e4229, 0px 0px 1px #091e421F;\n  --ds-shadow-overflow-perimeter: #091e421f;\n  --ds-shadow-overflow-spread: #091e4229;\n  --ds-shadow-overlay: 0px 8px 12px #091e4226, 0px 0px 1px #091e424F;\n  --ds-shadow-raised: 0px 1px 1px #091e4240, 0px 0px 1px #091e424F;\n  --ds-opacity-disabled: 0.4;\n  --ds-opacity-loading: 0.2;\n  --ds-UNSAFE-transparent: transparent;\n}\n";
+export default "\nhtml[data-color-mode=\"light\"][data-theme~=\"light:legacy-light\"],\nhtml[data-color-mode=\"dark\"][data-theme~=\"dark:legacy-light\"] {\n  color-scheme: light;\n  --ds-text: #172B4D;\n  --ds-text-accent-lime: #4C6B1F;\n  --ds-text-accent-lime-bolder: #37471F;\n  --ds-text-accent-red: #DE350B;\n  --ds-text-accent-red-bolder: #BF2600;\n  --ds-text-accent-orange: #F18D13;\n  --ds-text-accent-orange-bolder: #B65C02;\n  --ds-text-accent-yellow: #FF991F;\n  --ds-text-accent-yellow-bolder: #FF8B00;\n  --ds-text-accent-green: #00875A;\n  --ds-text-accent-green-bolder: #006644;\n  --ds-text-accent-teal: #00A3BF;\n  --ds-text-accent-teal-bolder: #008DA6;\n  --ds-text-accent-blue: #0052CC;\n  --ds-text-accent-blue-bolder: #0747A6;\n  --ds-text-accent-purple: #5243AA;\n  --ds-text-accent-purple-bolder: #403294;\n  --ds-text-accent-magenta: #E774BB;\n  --ds-text-accent-magenta-bolder: #DA62AC;\n  --ds-text-accent-gray: #505F79;\n  --ds-text-accent-gray-bolder: #172B4D;\n  --ds-text-disabled: #A5ADBA;\n  --ds-text-inverse: #FFFFFF;\n  --ds-text-selected: #0052CC;\n  --ds-text-brand: #0065FF;\n  --ds-text-danger: #DE350B;\n  --ds-text-warning: #974F0C;\n  --ds-text-warning-inverse: #172B4D;\n  --ds-text-success: #006644;\n  --ds-text-discovery: #403294;\n  --ds-text-information: #0052CC;\n  --ds-text-subtlest: #7A869A;\n  --ds-text-subtle: #42526E;\n  --ds-link: #0052CC;\n  --ds-link-pressed: #0747A6;\n  --ds-icon: #505F79;\n  --ds-icon-accent-lime: #6A9A23;\n  --ds-icon-accent-red: #FF5630;\n  --ds-icon-accent-orange: #D94008;\n  --ds-icon-accent-yellow: #FFAB00;\n  --ds-icon-accent-green: #36B37E;\n  --ds-icon-accent-teal: #00B8D9;\n  --ds-icon-accent-blue: #0065FF;\n  --ds-icon-accent-purple: #6554C0;\n  --ds-icon-accent-magenta: #CD519D;\n  --ds-icon-accent-gray: #5E6C84;\n  --ds-icon-disabled: #8993A4;\n  --ds-icon-inverse: #FFFFFF;\n  --ds-icon-selected: #0052CC;\n  --ds-icon-brand: #0065FF;\n  --ds-icon-danger: #DE350B;\n  --ds-icon-warning: #FFC400;\n  --ds-icon-warning-inverse: #253858;\n  --ds-icon-success: #00875A;\n  --ds-icon-discovery: #8777D9;\n  --ds-icon-information: #0747A6;\n  --ds-icon-subtle: #6B778C;\n  --ds-border: #091e4221;\n  --ds-border-accent-lime: #6A9A23;\n  --ds-border-accent-red: #FF5630;\n  --ds-border-accent-orange: #D94008;\n  --ds-border-accent-yellow: #FFAB00;\n  --ds-border-accent-green: #36B37E;\n  --ds-border-accent-teal: #00B8D9;\n  --ds-border-accent-blue: #0065FF;\n  --ds-border-accent-purple: #6554C0;\n  --ds-border-accent-magenta: #CD519D;\n  --ds-border-accent-gray: #5E6C84;\n  --ds-border-disabled: #FAFBFC;\n  --ds-border-focused: #2684FF;\n  --ds-border-input: #FAFBFC;\n  --ds-border-inverse: #FFFFFF;\n  --ds-border-selected: #0052CC;\n  --ds-border-brand: #0052CC;\n  --ds-border-danger: #FF5630;\n  --ds-border-warning: #FFC400;\n  --ds-border-success: #00875A;\n  --ds-border-discovery: #998DD9;\n  --ds-border-information: #0065FF;\n  --ds-border-bold: #344563;\n  --ds-background-accent-lime-subtlest: #EEFBDA;\n  --ds-background-accent-lime-subtler: #D3F1A7;\n  --ds-background-accent-lime-subtle: #94C748;\n  --ds-background-accent-lime-bolder: #5B7F24;\n  --ds-background-accent-red-subtlest: #FF8F73;\n  --ds-background-accent-red-subtler: #FF7452;\n  --ds-background-accent-red-subtle: #DE350B;\n  --ds-background-accent-red-bolder: #DE350B;\n  --ds-background-accent-orange-subtlest: #F18D13;\n  --ds-background-accent-orange-subtler: #B65C02;\n  --ds-background-accent-orange-subtle: #5F3811;\n  --ds-background-accent-orange-bolder: #43290F;\n  --ds-background-accent-yellow-subtlest: #FFE380;\n  --ds-background-accent-yellow-subtler: #FFC400;\n  --ds-background-accent-yellow-subtle: #FF991F;\n  --ds-background-accent-yellow-bolder: #FF991F;\n  --ds-background-accent-green-subtlest: #79F2C0;\n  --ds-background-accent-green-subtler: #57D9A3;\n  --ds-background-accent-green-subtle: #00875A;\n  --ds-background-accent-green-bolder: #00875A;\n  --ds-background-accent-teal-subtlest: #79E2F2;\n  --ds-background-accent-teal-subtler: #00C7E6;\n  --ds-background-accent-teal-subtle: #00A3BF;\n  --ds-background-accent-teal-bolder: #00A3BF;\n  --ds-background-accent-blue-subtlest: #4C9AFF;\n  --ds-background-accent-blue-subtler: #2684FF;\n  --ds-background-accent-blue-subtle: #0052CC;\n  --ds-background-accent-blue-bolder: #0052CC;\n  --ds-background-accent-purple-subtlest: #998DD9;\n  --ds-background-accent-purple-subtler: #8777D9;\n  --ds-background-accent-purple-subtle: #5243AA;\n  --ds-background-accent-purple-bolder: #5243AA;\n  --ds-background-accent-magenta-subtlest: #E774BB;\n  --ds-background-accent-magenta-subtler: #E774BB;\n  --ds-background-accent-magenta-subtle: #E774BB;\n  --ds-background-accent-magenta-bolder: #E774BB;\n  --ds-background-accent-gray-subtlest: #6B778C;\n  --ds-background-accent-gray-subtler: #5E6C84;\n  --ds-background-accent-gray-subtle: #42526E;\n  --ds-background-accent-gray-bolder: #505F79;\n  --ds-background-disabled: #091e4289;\n  --ds-background-input: #FAFBFC;\n  --ds-background-input-hovered: #EBECF0;\n  --ds-background-input-pressed: #FFFFFF;\n  --ds-background-inverse-subtle: #00000029;\n  --ds-background-inverse-subtle-hovered: #0000003D;\n  --ds-background-inverse-subtle-pressed: #00000052;\n  --ds-background-neutral: #DFE1E6;\n  --ds-background-neutral-hovered: #091e4214;\n  --ds-background-neutral-pressed: #B3D4FF;\n  --ds-background-neutral-subtle: transparent;\n  --ds-background-neutral-subtle-hovered: #091e4214;\n  --ds-background-neutral-subtle-pressed: #B3D4FF;\n  --ds-background-neutral-bold: #42526E;\n  --ds-background-neutral-bold-hovered: #505F79;\n  --ds-background-neutral-bold-pressed: #344563;\n  --ds-background-selected: #DEEBFF;\n  --ds-background-selected-hovered: #B3D4FF;\n  --ds-background-selected-pressed: #4C9AFF;\n  --ds-background-selected-bold: #0052CC;\n  --ds-background-selected-bold-hovered: #2684FF;\n  --ds-background-selected-bold-pressed: #0052CC;\n  --ds-background-brand-subtlest: #B3D4FF;\n  --ds-background-brand-subtlest-hovered: #DEEBFF;\n  --ds-background-brand-subtlest-pressed: #4C9AFF;\n  --ds-background-brand-bold: #0052CC;\n  --ds-background-brand-bold-hovered: #0065FF;\n  --ds-background-brand-bold-pressed: #0747A6;\n  --ds-background-brand-boldest: #0747A6;\n  --ds-background-brand-boldest-hovered: #0052CC;\n  --ds-background-brand-boldest-pressed: #0747A6;\n  --ds-background-danger: #FFEBE6;\n  --ds-background-danger-hovered: #FFBDAD;\n  --ds-background-danger-pressed: #FF8F73;\n  --ds-background-danger-bold: #DE350B;\n  --ds-background-danger-bold-hovered: #FF5630;\n  --ds-background-danger-bold-pressed: #BF2600;\n  --ds-background-warning: #FFFAE6;\n  --ds-background-warning-hovered: #FFF0B3;\n  --ds-background-warning-pressed: #FFE380;\n  --ds-background-warning-bold: #FFAB00;\n  --ds-background-warning-bold-hovered: #FFC400;\n  --ds-background-warning-bold-pressed: #FF991F;\n  --ds-background-success: #E3FCEF;\n  --ds-background-success-hovered: #ABF5D1;\n  --ds-background-success-pressed: #79F2C0;\n  --ds-background-success-bold: #00875A;\n  --ds-background-success-bold-hovered: #57D9A3;\n  --ds-background-success-bold-pressed: #00875A;\n  --ds-background-discovery: #EAE6FF;\n  --ds-background-discovery-hovered: #C0B6F2;\n  --ds-background-discovery-pressed: #998DD9;\n  --ds-background-discovery-bold: #5243AA;\n  --ds-background-discovery-bold-hovered: #8777D9;\n  --ds-background-discovery-bold-pressed: #5243AA;\n  --ds-background-information: #DEEBFF;\n  --ds-background-information-hovered: #B3D4FF;\n  --ds-background-information-pressed: #4C9AFF;\n  --ds-background-information-bold: #0052CC;\n  --ds-background-information-bold-hovered: #2684FF;\n  --ds-background-information-bold-pressed: #0052CC;\n  --ds-blanket: #091e4289;\n  --ds-blanket-selected: #388BFF14;\n  --ds-blanket-danger: #EF5C4814;\n  --ds-interaction-hovered: #00000029;\n  --ds-interaction-pressed: #00000052;\n  --ds-skeleton: #F4F5F7;\n  --ds-skeleton-subtle: #091e420a;\n  --ds-chart-categorical-1: #00B8D9;\n  --ds-chart-categorical-1-hovered: #00A3BF;\n  --ds-chart-categorical-2: #5243AA;\n  --ds-chart-categorical-2-hovered: #403294;\n  --ds-chart-categorical-3: #D94008;\n  --ds-chart-categorical-3-hovered: #B65C02;\n  --ds-chart-categorical-4: #943D73;\n  --ds-chart-categorical-4-hovered: #50253F;\n  --ds-chart-categorical-5: #0052CC;\n  --ds-chart-categorical-5-hovered: #0747A6;\n  --ds-chart-categorical-6: #5243AA;\n  --ds-chart-categorical-6-hovered: #403294;\n  --ds-chart-categorical-7: #50253F;\n  --ds-chart-categorical-7-hovered: #341829;\n  --ds-chart-categorical-8: #974F0C;\n  --ds-chart-categorical-8-hovered: #5F3811;\n  --ds-chart-lime-bold: #6A9A23;\n  --ds-chart-lime-bold-hovered: #5B7F24;\n  --ds-chart-lime-bolder: #5B7F24;\n  --ds-chart-lime-bolder-hovered: #4C6B1F;\n  --ds-chart-lime-boldest: #4C6B1F;\n  --ds-chart-lime-boldest-hovered: #37471F;\n  --ds-chart-neutral: #5E6C84;\n  --ds-chart-neutral-hovered: #505F79;\n  --ds-chart-red-bold: #FF5630;\n  --ds-chart-red-bold-hovered: #DE350B;\n  --ds-chart-red-bolder: #DE350B;\n  --ds-chart-red-bolder-hovered: #BF2600;\n  --ds-chart-red-boldest: #BF2600;\n  --ds-chart-red-boldest-hovered: #BF2600;\n  --ds-chart-orange-bold: #D97008;\n  --ds-chart-orange-bold-hovered: #B65C02;\n  --ds-chart-orange-bolder: #B65C02;\n  --ds-chart-orange-bolder-hovered: #974F0C;\n  --ds-chart-orange-boldest: #974F0C;\n  --ds-chart-orange-boldest-hovered: #5F3811;\n  --ds-chart-yellow-bold: #FFAB00;\n  --ds-chart-yellow-bold-hovered: #FF991F;\n  --ds-chart-yellow-bolder: #FF991F;\n  --ds-chart-yellow-bolder-hovered: #FF8B00;\n  --ds-chart-yellow-boldest: #FF8B00;\n  --ds-chart-yellow-boldest-hovered: #FF8B00;\n  --ds-chart-green-bold: #36B37E;\n  --ds-chart-green-bold-hovered: #00875A;\n  --ds-chart-green-bolder: #00875A;\n  --ds-chart-green-bolder-hovered: #006644;\n  --ds-chart-green-boldest: #006644;\n  --ds-chart-green-boldest-hovered: #006644;\n  --ds-chart-teal-bold: #00B8D9;\n  --ds-chart-teal-bold-hovered: #00A3BF;\n  --ds-chart-teal-bolder: #00A3BF;\n  --ds-chart-teal-bolder-hovered: #008DA6;\n  --ds-chart-teal-boldest: #008DA6;\n  --ds-chart-teal-boldest-hovered: #008DA6;\n  --ds-chart-blue-bold: #0065FF;\n  --ds-chart-blue-bold-hovered: #0052CC;\n  --ds-chart-blue-bolder: #0052CC;\n  --ds-chart-blue-bolder-hovered: #0747A6;\n  --ds-chart-blue-boldest: #0747A6;\n  --ds-chart-blue-boldest-hovered: #0747A6;\n  --ds-chart-purple-bold: #6554C0;\n  --ds-chart-purple-bold-hovered: #5243AA;\n  --ds-chart-purple-bolder: #5243AA;\n  --ds-chart-purple-bolder-hovered: #403294;\n  --ds-chart-purple-boldest: #403294;\n  --ds-chart-purple-boldest-hovered: #403294;\n  --ds-chart-magenta-bold: #DA62AC;\n  --ds-chart-magenta-bold-hovered: #CD519D;\n  --ds-chart-magenta-bolder: #CD519D;\n  --ds-chart-magenta-bolder-hovered: #AE4787;\n  --ds-chart-magenta-boldest: #943D73;\n  --ds-chart-magenta-boldest-hovered: #50253F;\n  --ds-chart-gray-bold: #5E6C84;\n  --ds-chart-gray-bold-hovered: #505F79;\n  --ds-chart-gray-bolder: #505F79;\n  --ds-chart-gray-bolder-hovered: #42526E;\n  --ds-chart-gray-boldest: #42526E;\n  --ds-chart-gray-boldest-hovered: #42526E;\n  --ds-chart-brand: #0065FF;\n  --ds-chart-brand-hovered: #0052CC;\n  --ds-chart-danger: #FF5630;\n  --ds-chart-danger-hovered: #DE350B;\n  --ds-chart-danger-bold: #DE350B;\n  --ds-chart-danger-bold-hovered: #BF2600;\n  --ds-chart-warning: #FFAB00;\n  --ds-chart-warning-hovered: #FF991F;\n  --ds-chart-warning-bold: #FF991F;\n  --ds-chart-warning-bold-hovered: #FF8B00;\n  --ds-chart-success: #36B37E;\n  --ds-chart-success-hovered: #00875A;\n  --ds-chart-success-bold: #00875A;\n  --ds-chart-success-bold-hovered: #006644;\n  --ds-chart-discovery: #6554C0;\n  --ds-chart-discovery-hovered: #5243AA;\n  --ds-chart-discovery-bold: #5243AA;\n  --ds-chart-discovery-bold-hovered: #403294;\n  --ds-chart-information: #0065FF;\n  --ds-chart-information-hovered: #0052CC;\n  --ds-chart-information-bold: #0052CC;\n  --ds-chart-information-bold-hovered: #0747A6;\n  --ds-surface: #FFFFFF;\n  --ds-surface-hovered: #FAFBFC;\n  --ds-surface-pressed: #F4F5F7;\n  --ds-surface-overlay: #FFFFFF;\n  --ds-surface-overlay-hovered: #FAFBFC;\n  --ds-surface-overlay-pressed: #F4F5F7;\n  --ds-surface-raised: #FFFFFF;\n  --ds-surface-raised-hovered: #FAFBFC;\n  --ds-surface-raised-pressed: #F4F5F7;\n  --ds-surface-sunken: #F4F5F7;\n  --ds-shadow-overflow: 0px 0px 8px #091e4229, 0px 0px 1px #091e421F;\n  --ds-shadow-overflow-perimeter: #091e421f;\n  --ds-shadow-overflow-spread: #091e4229;\n  --ds-shadow-overlay: 0px 8px 12px #091e4226, 0px 0px 1px #091e424F;\n  --ds-shadow-raised: 0px 1px 1px #091e4240, 0px 0px 1px #091e424F;\n  --ds-opacity-disabled: 0.4;\n  --ds-opacity-loading: 0.2;\n  --ds-UNSAFE-transparent: transparent;\n}\n";

package/dist/esm/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::8b7aab21b157bced2314e03774c8445e>>
+ * @codegen <<SignedSource::309519b3d309ba66f31d019788cc5ef0>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -1528,7 +1528,7 @@ var tokens = [{
     "introduced": "0.6.0",
     "description": "Use for focus rings of elements in a focus state."
   },
-  "value": "#4C9AFF",
+  "value": "#2684FF",
   "filePath": "src/tokens/atlassian-legacy-light/color/border.tsx",
   "isSource": true,
   "original": {
@@ -1538,7 +1538,7 @@ var tokens = [{
       "introduced": "0.6.0",
       "description": "Use for focus rings of elements in a focus state."
     },
-    "value": "B100"
+    "value": "B200"
   },
   "name": "color.border.focused",
   "path": ["color", "border", "focused"],