@atlaskit/tokens 1.14.0 → 1.14.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/tokens
 
+## 1.14.2
+
+### Patch Changes
+
+- [`8e1667c2c03`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8e1667c2c03) - Adds the ability to specify a fallback theme in the tokens Babel plugin via the `defaultTheme` option. Also adds 'legacy-light' as one of the available themes, while keeping 'light' as the default if nothing is provided.
+
+## 1.14.1
+
+### Patch Changes
+
+- [`b423f118bb8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b423f118bb8) - Adjusted color generation system for custom theming to improve accessibility.
+
 ## 1.14.0
 
 ### Minor Changes

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

@@ -7,10 +7,13 @@ exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  *
+ * DEPRECATED, PLEASE DO NOT USE.
+ * Default values can now be based on either light or legacy-light themes, whereas this only contains light theme values.
+ *
  * 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::cd2ec139d4552898a3fc16a50aac159c>>
+ * @codegen <<SignedSource::b5a6322ad7a59d086ea12e85ec78c8f0>>
  * @codegenCommand yarn build tokens
  */
 var defaultTokenValues = {

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

@@ -6,11 +6,40 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = plugin;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var t = _interopRequireWildcard(require("@babel/types"));
-var _tokenDefaultValues = _interopRequireDefault(require("../artifacts/token-default-values"));
 var _tokenNames = _interopRequireDefault(require("../artifacts/token-names"));
+var _atlassianLegacyLight = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-legacy-light"));
+var _atlassianLight = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-light"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+// Convert raw tokens to key-value pairs { token: value }
+var getThemeValues = function getThemeValues(theme) {
+  var tokensToMap = theme === 'light' ? _atlassianLight.default : _atlassianLegacyLight.default;
+  return tokensToMap.reduce(function (formatted, rawToken) {
+    var value;
+    if (typeof rawToken.value === 'string') {
+      value = rawToken.value;
+    } else if (typeof rawToken.value === 'number') {
+      value = rawToken.value.toString();
+    } else {
+      // If it's a box shadow, it'll be an array of values that needs to be
+      // formatted to look like '0px 0px 8px #091e4229, 0px 0px 1px #091e421F'
+      value = rawToken.value.reduce(function (prev, curr, index) {
+        var value = "".concat(curr.offset.x, "px ").concat(curr.offset.y, "px ").concat(curr.radius, "px ").concat(curr.color);
+        if (index === 0) {
+          value += ", ";
+        }
+        return prev + value;
+      }, '');
+    }
+    return _objectSpread(_objectSpread({}, formatted), {}, (0, _defineProperty2.default)({}, rawToken.cleanName, value));
+  }, {});
+};
+var lightValues = getThemeValues('light');
+var legacyLightValues = getThemeValues('legacy-light');
 function plugin() {
   return {
     visitor: {
@@ -55,7 +84,7 @@ function plugin() {
               // if no fallback is set, optionally find one from the default theme
               if (path.node.arguments.length < 2) {
                 if (state.opts.shouldUseAutoFallback) {
-                  replacementNode = t.stringLiteral("var(".concat(cssTokenValue, ", ").concat(getDefaultFallback(tokenName), ")"));
+                  replacementNode = t.stringLiteral("var(".concat(cssTokenValue, ", ").concat(getDefaultFallback(tokenName, state.opts.defaultTheme), ")"));
                 } else {
                   replacementNode = t.stringLiteral("var(".concat(cssTokenValue, ")"));
                 }
@@ -120,7 +149,9 @@ function plugin() {
   };
 }
 function getDefaultFallback(tokenName) {
-  return _tokenDefaultValues.default[tokenName];
+  var theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'light';
+  var tokens = theme === 'legacy-light' ? legacyLightValues : lightValues;
+  return tokens[tokenName];
 }
 function getNonAliasedImportName(node) {
   if (t.isIdentifier(node.imported)) {

package/dist/cjs/constants.js

@@ -3,15 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TOKEN_NOT_FOUND_CSS_VAR = exports.THEME_DATA_ATTRIBUTE = exports.DEFAULT_THEME = exports.CUSTOM_THEME_ATTRIBUTE = exports.CSS_VAR_FULL = exports.CSS_PREFIX = exports.COLOR_MODE_ATTRIBUTE = void 0;
+exports.TOKEN_NOT_FOUND_CSS_VAR = exports.THEME_DATA_ATTRIBUTE = exports.CUSTOM_THEME_ATTRIBUTE = exports.CSS_VAR_FULL = exports.CSS_PREFIX = exports.COLOR_MODE_ATTRIBUTE = void 0;
 var THEME_DATA_ATTRIBUTE = 'data-theme';
 exports.THEME_DATA_ATTRIBUTE = THEME_DATA_ATTRIBUTE;
 var COLOR_MODE_ATTRIBUTE = 'data-color-mode';
 exports.COLOR_MODE_ATTRIBUTE = COLOR_MODE_ATTRIBUTE;
 var CUSTOM_THEME_ATTRIBUTE = 'data-custom-theme';
 exports.CUSTOM_THEME_ATTRIBUTE = CUSTOM_THEME_ATTRIBUTE;
-var DEFAULT_THEME = 'light';
-exports.DEFAULT_THEME = DEFAULT_THEME;
 var CSS_PREFIX = 'ds';
 exports.CSS_PREFIX = CSS_PREFIX;
 var CSS_VAR_FULL = ['opacity', 'font', 'space', 'border'];

package/dist/cjs/custom-theme.js

@@ -47,7 +47,7 @@ function _getCustomThemeStyles() {
           mode = (themeState === null || themeState === void 0 ? void 0 : themeState.colorMode) || _themeConfig.themeStateDefaults['colorMode'];
           optionString = JSON.stringify(themeState === null || themeState === void 0 ? void 0 : themeState.UNSAFE_themeOptions);
           uniqueId = (0, _hash.hash)(optionString);
-          themeRamp = (0, _generateCustomColorRamp.generateColors)(brandColor); // outputs object to generate to CSS from
+          themeRamp = (0, _generateCustomColorRamp.generateColors)(brandColor).ramp; // outputs object to generate to CSS from
           themes = [];
           tokenMaps = (0, _generateCustomColorRamp.generateTokenMapWithContrastCheck)(brandColor, mode, themeRamp);
           if ((mode === 'light' || mode === 'auto') && tokenMaps.light) {

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

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var name = "@atlaskit/tokens";
-var version = "1.14.0";
+var version = "1.14.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/cjs/get-token.js

@@ -9,7 +9,7 @@ var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var _constants = require("./constants");
 var name = "@atlaskit/tokens";
-var version = "1.14.0";
+var version = "1.14.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/cjs/utils/custom-theme-loading-utils.js

@@ -42,6 +42,6 @@ function reduceTokenMap(tokenMap, themeRamp) {
       key = _ref2[0],
       value = _ref2[1];
     var cssVar = _tokenNames.default[key];
-    return cssVar ? "".concat(acc, "\n  ").concat(cssVar, ": ").concat(themeRamp[value], ";") : acc;
+    return cssVar ? "".concat(acc, "\n  ").concat(cssVar, ": ").concat(typeof value === 'string' ? value : themeRamp[value], ";") : acc;
   }, '');
 }

package/dist/cjs/utils/custom-theme-token-contrast-check.js

@@ -17,6 +17,14 @@ var additionalChecks = [{
   // In light mode: darken the following tokens by one base token
   // In dark mode: lighten the following tokens by one base token
   'color.text.brand', 'color.text.selected', 'color.link', 'color.link.pressed', 'color.icon.brand', 'color.icon.selected']
+}, {
+  foreground: 'color.text.brand',
+  backgroundLight: 'color.background.selected',
+  backgroundDark: 'color.background.selected',
+  desiredContrast: 4.5,
+  // In light mode: darken the following tokens by one base token
+  // In dark mode: lighten the following tokens by one base toke
+  updatedTokens: ['color.text.brand', 'color.link', 'color.link.pressed']
 }, {
   foreground: 'color.text.selected',
   backgroundLight: 'color.background.selected',
@@ -59,13 +67,17 @@ var additionalContrastChecker = function additionalContrastChecker(_ref) {
       desiredContrast = pairing.desiredContrast,
       updatedTokens = pairing.updatedTokens;
     var background = mode === 'light' ? backgroundLight : backgroundDark;
-    var foregroundColor = brandTokens.includes(foreground) ? themeRamp[customThemeTokenMap[foreground]] : getColorFromTokenRaw(foreground, mode);
-    var backgroundColor = brandTokens.includes(background) ? themeRamp[customThemeTokenMap[background]] : getColorFromTokenRaw(background, mode);
+    var foregroundTokenValue = customThemeTokenMap[foreground];
+    var backgroundTokenValue = customThemeTokenMap[background];
+    var foregroundColor = brandTokens.includes(foreground) ? typeof foregroundTokenValue === 'string' ? foregroundTokenValue : themeRamp[foregroundTokenValue] : getColorFromTokenRaw(foreground, mode);
+    var backgroundColor = brandTokens.includes(background) ? typeof backgroundTokenValue === 'string' ? backgroundTokenValue : themeRamp[backgroundTokenValue] : getColorFromTokenRaw(background, mode);
     var contrast = (0, _colorUtils.getContrastRatio)(foregroundColor, backgroundColor);
     if (contrast <= desiredContrast) {
       updatedTokens.forEach(function (token) {
         var rampValue = customThemeTokenMap[token];
-        updatedCustomThemeTokenMap[token] = mode === 'light' ? rampValue + 1 : rampValue - 1;
+        if (typeof rampValue === 'number') {
+          updatedCustomThemeTokenMap[token] = mode === 'light' ? rampValue + 1 : rampValue - 1;
+        }
       });
     }
   });

package/dist/cjs/utils/generate-custom-color-ramp.js

@@ -54,7 +54,11 @@ var generateColors = function generateColors(brandColor) {
   // Replace closet color with brandColor
   var updatedThemeRamp = (0, _toConsumableArray2.default)(themeRamp);
   updatedThemeRamp[closestColorIndex] = brandColor;
-  return updatedThemeRamp;
+  return {
+    ramp: updatedThemeRamp,
+    // add the replaced color into the result
+    replacedColor: themeRamp[closestColorIndex]
+  };
 };
 
 /**
@@ -78,7 +82,10 @@ function getInteractionStates(rampPosition, number, colors) {
   return result;
 }
 var generateTokenMap = function generateTokenMap(brandColor, mode, themeRamp) {
-  var colors = themeRamp || generateColors(brandColor);
+  var _generateColors = generateColors(brandColor),
+    ramp = _generateColors.ramp,
+    replacedColor = _generateColors.replacedColor;
+  var colors = themeRamp || ramp;
   var closestColorIndex = getClosestColorIndex(colors, brandColor);
   var customThemeTokenMapLight = {};
   var customThemeTokenMapDark = {};
@@ -94,6 +101,12 @@ var generateTokenMap = function generateTokenMap(brandColor, mode, themeRamp) {
       _getInteractionStates2 = (0, _slicedToArray2.default)(_getInteractionStates, 2),
       brandBoldSelectedHoveredIndex = _getInteractionStates2[0],
       brandBoldSelectedPressedIndex = _getInteractionStates2[1];
+    var brandTextIndex = closestColorIndex;
+    if (inputContrast < 5.4 && inputContrast >= 4.8 && closestColorIndex === 6) {
+      // Use the one-level darker closest color (X800) for color.text.brand
+      // and color.link to avoid contrast breaches
+      brandTextIndex = closestColorIndex + 1;
+    }
 
     /**
      * Generate interaction token for color.link:
@@ -103,11 +116,11 @@ var generateTokenMap = function generateTokenMap(brandColor, mode, themeRamp) {
      * If inputted color replaces X700-X900
      * - Shift one 1 step darker
      */
-    var _getInteractionStates3 = getInteractionStates(closestColorIndex, 1, colors),
+    var _getInteractionStates3 = getInteractionStates(brandTextIndex, 1, colors),
       _getInteractionStates4 = (0, _slicedToArray2.default)(_getInteractionStates3, 1),
       linkPressed = _getInteractionStates4[0];
     customThemeTokenMapLight = {
-      'color.text.brand': closestColorIndex,
+      'color.text.brand': brandTextIndex,
       'color.icon.brand': closestColorIndex,
       'color.background.brand.subtlest': 0,
       'color.background.brand.subtlest.hovered': 1,
@@ -119,13 +132,13 @@ var generateTokenMap = function generateTokenMap(brandColor, mode, themeRamp) {
       'color.background.brand.boldest.hovered': 8,
       'color.background.brand.boldest.pressed': 7,
       'color.border.brand': closestColorIndex,
-      'color.text.selected': closestColorIndex,
+      'color.text.selected': brandTextIndex,
       'color.icon.selected': closestColorIndex,
       'color.background.selected.bold': closestColorIndex,
       'color.background.selected.bold.hovered': brandBoldSelectedHoveredIndex,
       'color.background.selected.bold.pressed': brandBoldSelectedPressedIndex,
       'color.border.selected': closestColorIndex,
-      'color.link': closestColorIndex,
+      'color.link': brandTextIndex,
       'color.link.pressed': linkPressed,
       'color.chart.brand': 5,
       'color.chart.brand.hovered': 6,
@@ -134,18 +147,25 @@ var generateTokenMap = function generateTokenMap(brandColor, mode, themeRamp) {
       'color.background.selected.pressed': 2
     };
   } else {
+    var brandBackgroundIndex = 6;
+    if (inputContrast < 4.5 && inputContrast >= 4 && closestColorIndex === 6) {
+      // Use the generated closest color instead of the input brand color for
+      // color.background.selected.bold and color.background.brand.bold
+      // to avoid contrast breaches
+      brandBackgroundIndex = replacedColor;
+    }
     customThemeTokenMapLight = {
       'color.background.brand.subtlest': 0,
       'color.background.brand.subtlest.hovered': 1,
       'color.background.brand.subtlest.pressed': 2,
-      'color.background.brand.bold': 6,
+      'color.background.brand.bold': brandBackgroundIndex,
       'color.background.brand.bold.hovered': 7,
       'color.background.brand.bold.pressed': 8,
       'color.background.brand.boldest': 9,
       'color.background.brand.boldest.hovered': 8,
       'color.background.brand.boldest.pressed': 7,
       'color.border.brand': 6,
-      'color.background.selected.bold': 6,
+      'color.background.selected.bold': brandBackgroundIndex,
       'color.background.selected.bold.hovered': 7,
       'color.background.selected.bold.pressed': 8,
       'color.text.brand': 6,
@@ -175,7 +195,7 @@ var generateTokenMap = function generateTokenMap(brandColor, mode, themeRamp) {
     var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
       key = _ref2[0],
       value = _ref2[1];
-    customThemeTokenMapDark[key] = 9 - value;
+    customThemeTokenMapDark[key] = 9 - (typeof value === 'string' ? closestColorIndex : value);
   });
 
   /**
@@ -202,7 +222,7 @@ var generateTokenMap = function generateTokenMap(brandColor, mode, themeRamp) {
 };
 exports.generateTokenMap = generateTokenMap;
 var generateTokenMapWithContrastCheck = function generateTokenMapWithContrastCheck(brandColor, mode, themeRamp) {
-  var colors = themeRamp || generateColors(brandColor);
+  var colors = themeRamp || generateColors(brandColor).ramp;
   var tokenMaps = generateTokenMap(brandColor, mode, colors);
   var result = {};
   Object.entries(tokenMaps).forEach(function (_ref3) {

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

@@ -1,10 +1,13 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  *
+ * DEPRECATED, PLEASE DO NOT USE.
+ * Default values can now be based on either light or legacy-light themes, whereas this only contains light theme values.
+ *
  * 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::cd2ec139d4552898a3fc16a50aac159c>>
+ * @codegen <<SignedSource::b5a6322ad7a59d086ea12e85ec78c8f0>>
  * @codegenCommand yarn build tokens
  */
 const defaultTokenValues = {

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

@@ -1,6 +1,35 @@
 import * as t from '@babel/types';
-import tokenDefaultValues from '../artifacts/token-default-values';
 import tokenNames from '../artifacts/token-names';
+import legacyLight from '../artifacts/tokens-raw/atlassian-legacy-light';
+import light from '../artifacts/tokens-raw/atlassian-light';
+// Convert raw tokens to key-value pairs { token: value }
+const getThemeValues = theme => {
+  const tokensToMap = theme === 'light' ? light : legacyLight;
+  return tokensToMap.reduce((formatted, rawToken) => {
+    let value;
+    if (typeof rawToken.value === 'string') {
+      value = rawToken.value;
+    } else if (typeof rawToken.value === 'number') {
+      value = rawToken.value.toString();
+    } else {
+      // If it's a box shadow, it'll be an array of values that needs to be
+      // formatted to look like '0px 0px 8px #091e4229, 0px 0px 1px #091e421F'
+      value = rawToken.value.reduce((prev, curr, index) => {
+        let value = `${curr.offset.x}px ${curr.offset.y}px ${curr.radius}px ${curr.color}`;
+        if (index === 0) {
+          value += `, `;
+        }
+        return prev + value;
+      }, '');
+    }
+    return {
+      ...formatted,
+      [rawToken.cleanName]: value
+    };
+  }, {});
+};
+const lightValues = getThemeValues('light');
+const legacyLightValues = getThemeValues('legacy-light');
 export default function plugin() {
   return {
     visitor: {
@@ -37,7 +66,7 @@ export default function plugin() {
               // if no fallback is set, optionally find one from the default theme
               if (path.node.arguments.length < 2) {
                 if (state.opts.shouldUseAutoFallback) {
-                  replacementNode = t.stringLiteral(`var(${cssTokenValue}, ${getDefaultFallback(tokenName)})`);
+                  replacementNode = t.stringLiteral(`var(${cssTokenValue}, ${getDefaultFallback(tokenName, state.opts.defaultTheme)})`);
                 } else {
                   replacementNode = t.stringLiteral(`var(${cssTokenValue})`);
                 }
@@ -101,8 +130,9 @@ export default function plugin() {
     }
   };
 }
-function getDefaultFallback(tokenName) {
-  return tokenDefaultValues[tokenName];
+function getDefaultFallback(tokenName, theme = 'light') {
+  const tokens = theme === 'legacy-light' ? legacyLightValues : lightValues;
+  return tokens[tokenName];
 }
 function getNonAliasedImportName(node) {
   if (t.isIdentifier(node.imported)) {

package/dist/es2019/constants.js

@@ -1,7 +1,6 @@
 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

@@ -27,7 +27,7 @@ export async function getCustomThemeStyles(themeState) {
   const mode = (themeState === null || themeState === void 0 ? void 0 : themeState.colorMode) || themeStateDefaults['colorMode'];
   const optionString = JSON.stringify(themeState === null || themeState === void 0 ? void 0 : themeState.UNSAFE_themeOptions);
   const uniqueId = hash(optionString);
-  const themeRamp = generateColors(brandColor);
+  const themeRamp = generateColors(brandColor).ramp;
 
   // outputs object to generate to CSS from
   const themes = [];

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.14.0";
+const version = "1.14.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 = "1.14.0";
+const version = "1.14.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/utils/custom-theme-loading-utils.js

@@ -26,6 +26,6 @@ export function limitSizeOfCustomStyleElements(sizeThreshold) {
 export function reduceTokenMap(tokenMap, themeRamp) {
   return Object.entries(tokenMap).reduce((acc, [key, value]) => {
     const cssVar = tokens[key];
-    return cssVar ? `${acc}\n  ${cssVar}: ${themeRamp[value]};` : acc;
+    return cssVar ? `${acc}\n  ${cssVar}: ${typeof value === 'string' ? value : themeRamp[value]};` : acc;
   }, '');
 }

package/dist/es2019/utils/custom-theme-token-contrast-check.js

@@ -10,6 +10,14 @@ export const additionalChecks = [{
   // In light mode: darken the following tokens by one base token
   // In dark mode: lighten the following tokens by one base token
   'color.text.brand', 'color.text.selected', 'color.link', 'color.link.pressed', 'color.icon.brand', 'color.icon.selected']
+}, {
+  foreground: 'color.text.brand',
+  backgroundLight: 'color.background.selected',
+  backgroundDark: 'color.background.selected',
+  desiredContrast: 4.5,
+  // In light mode: darken the following tokens by one base token
+  // In dark mode: lighten the following tokens by one base toke
+  updatedTokens: ['color.text.brand', 'color.link', 'color.link.pressed']
 }, {
   foreground: 'color.text.selected',
   backgroundLight: 'color.background.selected',
@@ -54,13 +62,17 @@ export const additionalContrastChecker = ({
       updatedTokens
     } = pairing;
     const background = mode === 'light' ? backgroundLight : backgroundDark;
-    const foregroundColor = brandTokens.includes(foreground) ? themeRamp[customThemeTokenMap[foreground]] : getColorFromTokenRaw(foreground, mode);
-    const backgroundColor = brandTokens.includes(background) ? themeRamp[customThemeTokenMap[background]] : getColorFromTokenRaw(background, mode);
+    const foregroundTokenValue = customThemeTokenMap[foreground];
+    const backgroundTokenValue = customThemeTokenMap[background];
+    const foregroundColor = brandTokens.includes(foreground) ? typeof foregroundTokenValue === 'string' ? foregroundTokenValue : themeRamp[foregroundTokenValue] : getColorFromTokenRaw(foreground, mode);
+    const backgroundColor = brandTokens.includes(background) ? typeof backgroundTokenValue === 'string' ? backgroundTokenValue : themeRamp[backgroundTokenValue] : getColorFromTokenRaw(background, mode);
     const contrast = getContrastRatio(foregroundColor, backgroundColor);
     if (contrast <= desiredContrast) {
       updatedTokens.forEach(token => {
         const rampValue = customThemeTokenMap[token];
-        updatedCustomThemeTokenMap[token] = mode === 'light' ? rampValue + 1 : rampValue - 1;
+        if (typeof rampValue === 'number') {
+          updatedCustomThemeTokenMap[token] = mode === 'light' ? rampValue + 1 : rampValue - 1;
+        }
       });
     }
   });

package/dist/es2019/utils/generate-custom-color-ramp.js

@@ -41,7 +41,11 @@ export const generateColors = brandColor => {
   // Replace closet color with brandColor
   const updatedThemeRamp = [...themeRamp];
   updatedThemeRamp[closestColorIndex] = brandColor;
-  return updatedThemeRamp;
+  return {
+    ramp: updatedThemeRamp,
+    // add the replaced color into the result
+    replacedColor: themeRamp[closestColorIndex]
+  };
 };
 
 /**
@@ -64,7 +68,11 @@ function getInteractionStates(rampPosition, number, colors) {
   return result;
 }
 export const generateTokenMap = (brandColor, mode, themeRamp) => {
-  const colors = themeRamp || generateColors(brandColor);
+  const {
+    ramp,
+    replacedColor
+  } = generateColors(brandColor);
+  const colors = themeRamp || ramp;
   const closestColorIndex = getClosestColorIndex(colors, brandColor);
   let customThemeTokenMapLight = {};
   let customThemeTokenMapDark = {};
@@ -77,6 +85,12 @@ export const generateTokenMap = (brandColor, mode, themeRamp) => {
      * - color.background.selected.bold
      */
     const [brandBoldSelectedHoveredIndex, brandBoldSelectedPressedIndex] = getInteractionStates(closestColorIndex, 2, colors);
+    let brandTextIndex = closestColorIndex;
+    if (inputContrast < 5.4 && inputContrast >= 4.8 && closestColorIndex === 6) {
+      // Use the one-level darker closest color (X800) for color.text.brand
+      // and color.link to avoid contrast breaches
+      brandTextIndex = closestColorIndex + 1;
+    }
 
     /**
      * Generate interaction token for color.link:
@@ -86,9 +100,9 @@ export const generateTokenMap = (brandColor, mode, themeRamp) => {
      * If inputted color replaces X700-X900
      * - Shift one 1 step darker
      */
-    const [linkPressed] = getInteractionStates(closestColorIndex, 1, colors);
+    const [linkPressed] = getInteractionStates(brandTextIndex, 1, colors);
     customThemeTokenMapLight = {
-      'color.text.brand': closestColorIndex,
+      'color.text.brand': brandTextIndex,
       'color.icon.brand': closestColorIndex,
       'color.background.brand.subtlest': 0,
       'color.background.brand.subtlest.hovered': 1,
@@ -100,13 +114,13 @@ export const generateTokenMap = (brandColor, mode, themeRamp) => {
       'color.background.brand.boldest.hovered': 8,
       'color.background.brand.boldest.pressed': 7,
       'color.border.brand': closestColorIndex,
-      'color.text.selected': closestColorIndex,
+      'color.text.selected': brandTextIndex,
       'color.icon.selected': closestColorIndex,
       'color.background.selected.bold': closestColorIndex,
       'color.background.selected.bold.hovered': brandBoldSelectedHoveredIndex,
       'color.background.selected.bold.pressed': brandBoldSelectedPressedIndex,
       'color.border.selected': closestColorIndex,
-      'color.link': closestColorIndex,
+      'color.link': brandTextIndex,
       'color.link.pressed': linkPressed,
       'color.chart.brand': 5,
       'color.chart.brand.hovered': 6,
@@ -115,18 +129,25 @@ export const generateTokenMap = (brandColor, mode, themeRamp) => {
       'color.background.selected.pressed': 2
     };
   } else {
+    let brandBackgroundIndex = 6;
+    if (inputContrast < 4.5 && inputContrast >= 4 && closestColorIndex === 6) {
+      // Use the generated closest color instead of the input brand color for
+      // color.background.selected.bold and color.background.brand.bold
+      // to avoid contrast breaches
+      brandBackgroundIndex = replacedColor;
+    }
     customThemeTokenMapLight = {
       'color.background.brand.subtlest': 0,
       'color.background.brand.subtlest.hovered': 1,
       'color.background.brand.subtlest.pressed': 2,
-      'color.background.brand.bold': 6,
+      'color.background.brand.bold': brandBackgroundIndex,
       'color.background.brand.bold.hovered': 7,
       'color.background.brand.bold.pressed': 8,
       'color.background.brand.boldest': 9,
       'color.background.brand.boldest.hovered': 8,
       'color.background.brand.boldest.pressed': 7,
       'color.border.brand': 6,
-      'color.background.selected.bold': 6,
+      'color.background.selected.bold': brandBackgroundIndex,
       'color.background.selected.bold.hovered': 7,
       'color.background.selected.bold.pressed': 8,
       'color.text.brand': 6,
@@ -153,7 +174,7 @@ export const generateTokenMap = (brandColor, mode, themeRamp) => {
    * Generate dark mode values using rule of symmetry
    */
   Object.entries(customThemeTokenMapLight).forEach(([key, value]) => {
-    customThemeTokenMapDark[key] = 9 - value;
+    customThemeTokenMapDark[key] = 9 - (typeof value === 'string' ? closestColorIndex : value);
   });
 
   /**
@@ -179,7 +200,7 @@ export const generateTokenMap = (brandColor, mode, themeRamp) => {
   };
 };
 export const generateTokenMapWithContrastCheck = (brandColor, mode, themeRamp) => {
-  const colors = themeRamp || generateColors(brandColor);
+  const colors = themeRamp || generateColors(brandColor).ramp;
   const tokenMaps = generateTokenMap(brandColor, mode, colors);
   const result = {};
   Object.entries(tokenMaps).forEach(([mode, map]) => {

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

@@ -1,10 +1,13 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  *
+ * DEPRECATED, PLEASE DO NOT USE.
+ * Default values can now be based on either light or legacy-light themes, whereas this only contains light theme values.
+ *
  * 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::cd2ec139d4552898a3fc16a50aac159c>>
+ * @codegen <<SignedSource::b5a6322ad7a59d086ea12e85ec78c8f0>>
  * @codegenCommand yarn build tokens
  */
 var defaultTokenValues = {

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

@@ -1,6 +1,35 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import * as t from '@babel/types';
-import tokenDefaultValues from '../artifacts/token-default-values';
 import tokenNames from '../artifacts/token-names';
+import legacyLight from '../artifacts/tokens-raw/atlassian-legacy-light';
+import light from '../artifacts/tokens-raw/atlassian-light';
+// Convert raw tokens to key-value pairs { token: value }
+var getThemeValues = function getThemeValues(theme) {
+  var tokensToMap = theme === 'light' ? light : legacyLight;
+  return tokensToMap.reduce(function (formatted, rawToken) {
+    var value;
+    if (typeof rawToken.value === 'string') {
+      value = rawToken.value;
+    } else if (typeof rawToken.value === 'number') {
+      value = rawToken.value.toString();
+    } else {
+      // If it's a box shadow, it'll be an array of values that needs to be
+      // formatted to look like '0px 0px 8px #091e4229, 0px 0px 1px #091e421F'
+      value = rawToken.value.reduce(function (prev, curr, index) {
+        var value = "".concat(curr.offset.x, "px ").concat(curr.offset.y, "px ").concat(curr.radius, "px ").concat(curr.color);
+        if (index === 0) {
+          value += ", ";
+        }
+        return prev + value;
+      }, '');
+    }
+    return _objectSpread(_objectSpread({}, formatted), {}, _defineProperty({}, rawToken.cleanName, value));
+  }, {});
+};
+var lightValues = getThemeValues('light');
+var legacyLightValues = getThemeValues('legacy-light');
 export default function plugin() {
   return {
     visitor: {
@@ -45,7 +74,7 @@ export default function plugin() {
               // if no fallback is set, optionally find one from the default theme
               if (path.node.arguments.length < 2) {
                 if (state.opts.shouldUseAutoFallback) {
-                  replacementNode = t.stringLiteral("var(".concat(cssTokenValue, ", ").concat(getDefaultFallback(tokenName), ")"));
+                  replacementNode = t.stringLiteral("var(".concat(cssTokenValue, ", ").concat(getDefaultFallback(tokenName, state.opts.defaultTheme), ")"));
                 } else {
                   replacementNode = t.stringLiteral("var(".concat(cssTokenValue, ")"));
                 }
@@ -110,7 +139,9 @@ export default function plugin() {
   };
 }
 function getDefaultFallback(tokenName) {
-  return tokenDefaultValues[tokenName];
+  var theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'light';
+  var tokens = theme === 'legacy-light' ? legacyLightValues : lightValues;
+  return tokens[tokenName];
 }
 function getNonAliasedImportName(node) {
   if (t.isIdentifier(node.imported)) {

package/dist/esm/constants.js

@@ -1,7 +1,6 @@
 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");

package/dist/esm/custom-theme.js

@@ -37,7 +37,7 @@ function _getCustomThemeStyles() {
           mode = (themeState === null || themeState === void 0 ? void 0 : themeState.colorMode) || themeStateDefaults['colorMode'];
           optionString = JSON.stringify(themeState === null || themeState === void 0 ? void 0 : themeState.UNSAFE_themeOptions);
           uniqueId = hash(optionString);
-          themeRamp = generateColors(brandColor); // outputs object to generate to CSS from
+          themeRamp = generateColors(brandColor).ramp; // outputs object to generate to CSS from
           themes = [];
           tokenMaps = generateTokenMapWithContrastCheck(brandColor, mode, themeRamp);
           if ((mode === 'light' || mode === 'auto') && tokenMaps.light) {

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

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 var name = "@atlaskit/tokens";
-var version = "1.14.0";
+var version = "1.14.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/esm/get-token.js

@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
 var name = "@atlaskit/tokens";
-var version = "1.14.0";
+var version = "1.14.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/esm/utils/custom-theme-loading-utils.js

@@ -33,6 +33,6 @@ export function reduceTokenMap(tokenMap, themeRamp) {
       key = _ref2[0],
       value = _ref2[1];
     var cssVar = tokens[key];
-    return cssVar ? "".concat(acc, "\n  ").concat(cssVar, ": ").concat(themeRamp[value], ";") : acc;
+    return cssVar ? "".concat(acc, "\n  ").concat(cssVar, ": ").concat(typeof value === 'string' ? value : themeRamp[value], ";") : acc;
   }, '');
 }

package/dist/esm/utils/custom-theme-token-contrast-check.js

@@ -10,6 +10,14 @@ export var additionalChecks = [{
   // In light mode: darken the following tokens by one base token
   // In dark mode: lighten the following tokens by one base token
   'color.text.brand', 'color.text.selected', 'color.link', 'color.link.pressed', 'color.icon.brand', 'color.icon.selected']
+}, {
+  foreground: 'color.text.brand',
+  backgroundLight: 'color.background.selected',
+  backgroundDark: 'color.background.selected',
+  desiredContrast: 4.5,
+  // In light mode: darken the following tokens by one base token
+  // In dark mode: lighten the following tokens by one base toke
+  updatedTokens: ['color.text.brand', 'color.link', 'color.link.pressed']
 }, {
   foreground: 'color.text.selected',
   backgroundLight: 'color.background.selected',
@@ -51,13 +59,17 @@ export var additionalContrastChecker = function additionalContrastChecker(_ref)
       desiredContrast = pairing.desiredContrast,
       updatedTokens = pairing.updatedTokens;
     var background = mode === 'light' ? backgroundLight : backgroundDark;
-    var foregroundColor = brandTokens.includes(foreground) ? themeRamp[customThemeTokenMap[foreground]] : getColorFromTokenRaw(foreground, mode);
-    var backgroundColor = brandTokens.includes(background) ? themeRamp[customThemeTokenMap[background]] : getColorFromTokenRaw(background, mode);
+    var foregroundTokenValue = customThemeTokenMap[foreground];
+    var backgroundTokenValue = customThemeTokenMap[background];
+    var foregroundColor = brandTokens.includes(foreground) ? typeof foregroundTokenValue === 'string' ? foregroundTokenValue : themeRamp[foregroundTokenValue] : getColorFromTokenRaw(foreground, mode);
+    var backgroundColor = brandTokens.includes(background) ? typeof backgroundTokenValue === 'string' ? backgroundTokenValue : themeRamp[backgroundTokenValue] : getColorFromTokenRaw(background, mode);
     var contrast = getContrastRatio(foregroundColor, backgroundColor);
     if (contrast <= desiredContrast) {
       updatedTokens.forEach(function (token) {
         var rampValue = customThemeTokenMap[token];
-        updatedCustomThemeTokenMap[token] = mode === 'light' ? rampValue + 1 : rampValue - 1;
+        if (typeof rampValue === 'number') {
+          updatedCustomThemeTokenMap[token] = mode === 'light' ? rampValue + 1 : rampValue - 1;
+        }
       });
     }
   });

package/dist/esm/utils/generate-custom-color-ramp.js

@@ -46,7 +46,11 @@ export var generateColors = function generateColors(brandColor) {
   // Replace closet color with brandColor
   var updatedThemeRamp = _toConsumableArray(themeRamp);
   updatedThemeRamp[closestColorIndex] = brandColor;
-  return updatedThemeRamp;
+  return {
+    ramp: updatedThemeRamp,
+    // add the replaced color into the result
+    replacedColor: themeRamp[closestColorIndex]
+  };
 };
 
 /**
@@ -69,7 +73,10 @@ function getInteractionStates(rampPosition, number, colors) {
   return result;
 }
 export var generateTokenMap = function generateTokenMap(brandColor, mode, themeRamp) {
-  var colors = themeRamp || generateColors(brandColor);
+  var _generateColors = generateColors(brandColor),
+    ramp = _generateColors.ramp,
+    replacedColor = _generateColors.replacedColor;
+  var colors = themeRamp || ramp;
   var closestColorIndex = getClosestColorIndex(colors, brandColor);
   var customThemeTokenMapLight = {};
   var customThemeTokenMapDark = {};
@@ -85,6 +92,12 @@ export var generateTokenMap = function generateTokenMap(brandColor, mode, themeR
       _getInteractionStates2 = _slicedToArray(_getInteractionStates, 2),
       brandBoldSelectedHoveredIndex = _getInteractionStates2[0],
       brandBoldSelectedPressedIndex = _getInteractionStates2[1];
+    var brandTextIndex = closestColorIndex;
+    if (inputContrast < 5.4 && inputContrast >= 4.8 && closestColorIndex === 6) {
+      // Use the one-level darker closest color (X800) for color.text.brand
+      // and color.link to avoid contrast breaches
+      brandTextIndex = closestColorIndex + 1;
+    }
 
     /**
      * Generate interaction token for color.link:
@@ -94,11 +107,11 @@ export var generateTokenMap = function generateTokenMap(brandColor, mode, themeR
      * If inputted color replaces X700-X900
      * - Shift one 1 step darker
      */
-    var _getInteractionStates3 = getInteractionStates(closestColorIndex, 1, colors),
+    var _getInteractionStates3 = getInteractionStates(brandTextIndex, 1, colors),
       _getInteractionStates4 = _slicedToArray(_getInteractionStates3, 1),
       linkPressed = _getInteractionStates4[0];
     customThemeTokenMapLight = {
-      'color.text.brand': closestColorIndex,
+      'color.text.brand': brandTextIndex,
       'color.icon.brand': closestColorIndex,
       'color.background.brand.subtlest': 0,
       'color.background.brand.subtlest.hovered': 1,
@@ -110,13 +123,13 @@ export var generateTokenMap = function generateTokenMap(brandColor, mode, themeR
       'color.background.brand.boldest.hovered': 8,
       'color.background.brand.boldest.pressed': 7,
       'color.border.brand': closestColorIndex,
-      'color.text.selected': closestColorIndex,
+      'color.text.selected': brandTextIndex,
       'color.icon.selected': closestColorIndex,
       'color.background.selected.bold': closestColorIndex,
       'color.background.selected.bold.hovered': brandBoldSelectedHoveredIndex,
       'color.background.selected.bold.pressed': brandBoldSelectedPressedIndex,
       'color.border.selected': closestColorIndex,
-      'color.link': closestColorIndex,
+      'color.link': brandTextIndex,
       'color.link.pressed': linkPressed,
       'color.chart.brand': 5,
       'color.chart.brand.hovered': 6,
@@ -125,18 +138,25 @@ export var generateTokenMap = function generateTokenMap(brandColor, mode, themeR
       'color.background.selected.pressed': 2
     };
   } else {
+    var brandBackgroundIndex = 6;
+    if (inputContrast < 4.5 && inputContrast >= 4 && closestColorIndex === 6) {
+      // Use the generated closest color instead of the input brand color for
+      // color.background.selected.bold and color.background.brand.bold
+      // to avoid contrast breaches
+      brandBackgroundIndex = replacedColor;
+    }
     customThemeTokenMapLight = {
       'color.background.brand.subtlest': 0,
       'color.background.brand.subtlest.hovered': 1,
       'color.background.brand.subtlest.pressed': 2,
-      'color.background.brand.bold': 6,
+      'color.background.brand.bold': brandBackgroundIndex,
       'color.background.brand.bold.hovered': 7,
       'color.background.brand.bold.pressed': 8,
       'color.background.brand.boldest': 9,
       'color.background.brand.boldest.hovered': 8,
       'color.background.brand.boldest.pressed': 7,
       'color.border.brand': 6,
-      'color.background.selected.bold': 6,
+      'color.background.selected.bold': brandBackgroundIndex,
       'color.background.selected.bold.hovered': 7,
       'color.background.selected.bold.pressed': 8,
       'color.text.brand': 6,
@@ -166,7 +186,7 @@ export var generateTokenMap = function generateTokenMap(brandColor, mode, themeR
     var _ref2 = _slicedToArray(_ref, 2),
       key = _ref2[0],
       value = _ref2[1];
-    customThemeTokenMapDark[key] = 9 - value;
+    customThemeTokenMapDark[key] = 9 - (typeof value === 'string' ? closestColorIndex : value);
   });
 
   /**
@@ -192,7 +212,7 @@ export var generateTokenMap = function generateTokenMap(brandColor, mode, themeR
   };
 };
 export var generateTokenMapWithContrastCheck = function generateTokenMapWithContrastCheck(brandColor, mode, themeRamp) {
-  var colors = themeRamp || generateColors(brandColor);
+  var colors = themeRamp || generateColors(brandColor).ramp;
   var tokenMaps = generateTokenMap(brandColor, mode, colors);
   var result = {};
   Object.entries(tokenMaps).forEach(function (_ref3) {

package/dist/types/artifacts/token-default-values.d.ts

@@ -1,10 +1,13 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  *
+ * DEPRECATED, PLEASE DO NOT USE.
+ * Default values can now be based on either light or legacy-light themes, whereas this only contains light theme values.
+ *
  * 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::cd2ec139d4552898a3fc16a50aac159c>>
+ * @codegen <<SignedSource::b5a6322ad7a59d086ea12e85ec78c8f0>>
  * @codegenCommand yarn build tokens
  */
 declare const defaultTokenValues: {

package/dist/types/babel-plugin/plugin.d.ts

@@ -1,14 +1,17 @@
 import { NodePath } from '@babel/traverse';
 import * as t from '@babel/types';
+type DefaultTheme = 'light' | 'legacy-light';
 export default function plugin(): {
     visitor: {
         Program: {
             enter(path: NodePath<t.Program>, state: {
                 opts: {
                     shouldUseAutoFallback?: boolean;
+                    defaultTheme?: DefaultTheme;
                 };
             }): void;
             exit(path: NodePath<t.Program>): void;
         };
     };
 };
+export {};

package/dist/types/constants.d.ts

@@ -1,7 +1,6 @@
 export declare const THEME_DATA_ATTRIBUTE = "data-theme";
 export declare const COLOR_MODE_ATTRIBUTE = "data-color-mode";
 export declare const CUSTOM_THEME_ATTRIBUTE = "data-custom-theme";
-export declare const DEFAULT_THEME = "light";
 export declare const CSS_PREFIX = "ds";
 export declare const CSS_VAR_FULL: string[];
 export declare const TOKEN_NOT_FOUND_CSS_VAR: string;

package/dist/types/utils/custom-theme-loading-utils.d.ts

@@ -5,6 +5,6 @@ type ThemeAttributeId = 'light' | 'dark';
 export declare function findMissingCustomStyleElements(UNSAFE_themeOptions: ThemeOptionsSchema, mode: ThemeColorModes): ThemeAttributeId[];
 export declare function limitSizeOfCustomStyleElements(sizeThreshold: number): void;
 export declare function reduceTokenMap(tokenMap: {
-    [key in Token]?: number;
+    [key in Token]?: number | string;
 }, themeRamp: string[]): string;
 export {};

package/dist/types/utils/custom-theme-token-contrast-check.d.ts

@@ -10,7 +10,7 @@ interface AdditionalContrastCheck {
 export declare const additionalChecks: AdditionalContrastCheck[];
 export declare const additionalContrastChecker: ({ customThemeTokenMap, mode, themeRamp, }: {
     customThemeTokenMap: {
-        [key: string]: number;
+        [key: string]: string | number;
     };
     mode: 'light' | 'dark';
     themeRamp: string[];

package/dist/types/utils/generate-custom-color-ramp.d.ts

@@ -2,11 +2,14 @@ import tokens from '../artifacts/token-names';
 import { CSSColor, ThemeColorModes } from '../theme-config';
 type Token = keyof typeof tokens;
 type TokenMap = {
-    [key in Token]?: number;
+    [key in Token]?: number | string;
 };
 type Mode = 'light' | 'dark';
 export declare const getClosestColorIndex: (themeRamp: CSSColor[], brandColor: CSSColor) => number;
-export declare const generateColors: (brandColor: CSSColor) => CSSColor[];
+export declare const generateColors: (brandColor: CSSColor) => {
+    ramp: CSSColor[];
+    replacedColor: CSSColor;
+};
 export declare const generateTokenMap: (brandColor: CSSColor, mode: ThemeColorModes, themeRamp?: CSSColor[]) => {
     light?: TokenMap | undefined;
     dark?: TokenMap | undefined;

package/dist/types-ts4.5/artifacts/token-default-values.d.ts

@@ -1,10 +1,13 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  *
+ * DEPRECATED, PLEASE DO NOT USE.
+ * Default values can now be based on either light or legacy-light themes, whereas this only contains light theme values.
+ *
  * 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::cd2ec139d4552898a3fc16a50aac159c>>
+ * @codegen <<SignedSource::b5a6322ad7a59d086ea12e85ec78c8f0>>
  * @codegenCommand yarn build tokens
  */
 declare const defaultTokenValues: {

package/dist/types-ts4.5/babel-plugin/plugin.d.ts

@@ -1,14 +1,17 @@
 import { NodePath } from '@babel/traverse';
 import * as t from '@babel/types';
+type DefaultTheme = 'light' | 'legacy-light';
 export default function plugin(): {
     visitor: {
         Program: {
             enter(path: NodePath<t.Program>, state: {
                 opts: {
                     shouldUseAutoFallback?: boolean;
+                    defaultTheme?: DefaultTheme;
                 };
             }): void;
             exit(path: NodePath<t.Program>): void;
         };
     };
 };
+export {};

package/dist/types-ts4.5/constants.d.ts

@@ -1,7 +1,6 @@
 export declare const THEME_DATA_ATTRIBUTE = "data-theme";
 export declare const COLOR_MODE_ATTRIBUTE = "data-color-mode";
 export declare const CUSTOM_THEME_ATTRIBUTE = "data-custom-theme";
-export declare const DEFAULT_THEME = "light";
 export declare const CSS_PREFIX = "ds";
 export declare const CSS_VAR_FULL: string[];
 export declare const TOKEN_NOT_FOUND_CSS_VAR: string;

package/dist/types-ts4.5/utils/custom-theme-loading-utils.d.ts

@@ -5,6 +5,6 @@ type ThemeAttributeId = 'light' | 'dark';
 export declare function findMissingCustomStyleElements(UNSAFE_themeOptions: ThemeOptionsSchema, mode: ThemeColorModes): ThemeAttributeId[];
 export declare function limitSizeOfCustomStyleElements(sizeThreshold: number): void;
 export declare function reduceTokenMap(tokenMap: {
-    [key in Token]?: number;
+    [key in Token]?: number | string;
 }, themeRamp: string[]): string;
 export {};

package/dist/types-ts4.5/utils/custom-theme-token-contrast-check.d.ts

@@ -10,7 +10,7 @@ interface AdditionalContrastCheck {
 export declare const additionalChecks: AdditionalContrastCheck[];
 export declare const additionalContrastChecker: ({ customThemeTokenMap, mode, themeRamp, }: {
     customThemeTokenMap: {
-        [key: string]: number;
+        [key: string]: string | number;
     };
     mode: 'light' | 'dark';
     themeRamp: string[];

package/dist/types-ts4.5/utils/generate-custom-color-ramp.d.ts

@@ -2,11 +2,14 @@ import tokens from '../artifacts/token-names';
 import { CSSColor, ThemeColorModes } from '../theme-config';
 type Token = keyof typeof tokens;
 type TokenMap = {
-    [key in Token]?: number;
+    [key in Token]?: number | string;
 };
 type Mode = 'light' | 'dark';
 export declare const getClosestColorIndex: (themeRamp: CSSColor[], brandColor: CSSColor) => number;
-export declare const generateColors: (brandColor: CSSColor) => CSSColor[];
+export declare const generateColors: (brandColor: CSSColor) => {
+    ramp: CSSColor[];
+    replacedColor: CSSColor;
+};
 export declare const generateTokenMap: (brandColor: CSSColor, mode: ThemeColorModes, themeRamp?: CSSColor[]) => {
     light?: TokenMap | undefined;
     dark?: TokenMap | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "1.14.0",
+  "version": "1.14.2",
   "description": "Design tokens are the single source of truth to name and store design decisions.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/dist/cjs/version.json

@@ -1,7 +0,0 @@
-{
-	"name": "@atlaskit/tokens",
-	"version": "1.14.0",
-	"sideEffects": [
-		"**/*.css"
-	]
-}

package/dist/es2019/version.json

@@ -1,7 +0,0 @@
-{
-	"name": "@atlaskit/tokens",
-	"version": "1.14.0",
-	"sideEffects": [
-		"**/*.css"
-	]
-}

package/dist/esm/version.json

@@ -1,7 +0,0 @@
-{
-	"name": "@atlaskit/tokens",
-	"version": "1.14.0",
-	"sideEffects": [
-		"**/*.css"
-	]
-}