@atlaskit/tokens 1.13.2 → 1.14.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/tokens
 
+## 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
+
+- [`d9d7c284713`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d9d7c284713) - Add custom theming support to `ThemeObjectToString` and `ThemeStringToObject` functions.
+
 ## 1.13.2
 
 ### Patch Changes

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.13.2";
+var version = "1.14.1";
 /**
  * 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.13.2";
+var version = "1.14.1";
 /**
  * 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/theme-state-transformer.js

@@ -5,9 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.themeStringToObject = exports.themeObjectToString = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _themeConfig = require("./theme-config");
 var themeKinds = ['light', 'dark', 'spacing', 'typography', 'shape'];
+var customThemeOptions = 'UNSAFE_themeOptions';
 var isThemeKind = function isThemeKind(themeKind) {
   return themeKinds.find(function (kind) {
     return kind === themeKind;
@@ -35,7 +37,7 @@ var isColorMode = function isColorMode(modeId) {
  */
 var themeStringToObject = function themeStringToObject(themeState) {
   return themeState.split(' ').map(function (theme) {
-    return theme.split(':');
+    return theme.split(/:([\s\S]*)/);
   }).reduce(function (themeObject, _ref) {
     var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
       kind = _ref2[0],
@@ -47,6 +49,13 @@ var themeStringToObject = function themeStringToObject(themeState) {
       // @ts-expect-error FIXME - this is a valid ts error
       themeObject[kind] = id;
     }
+    if (kind === customThemeOptions) {
+      try {
+        themeObject[customThemeOptions] = JSON.parse(id);
+      } catch (e) {
+        new Error('Invalid custom theme string');
+      }
+    }
     return themeObject;
   }, {});
 };
@@ -68,7 +77,16 @@ var themeObjectToString = function themeObjectToString(themeState) {
     var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
       kind = _ref4[0],
       id = _ref4[1];
-    return (kind === 'colorMode' || isThemeKind(kind)) && typeof id === 'string' && (isThemeIds(id) || isColorMode(id)) ? themeString + "".concat(themeString ? ' ' : '') + "".concat(kind, ":").concat(id) : themeString;
+    if (
+    // colorMode theme state
+    kind === 'colorMode' && typeof id === 'string' && isColorMode(id) ||
+    // custom theme state
+    kind === customThemeOptions && (0, _typeof2.default)(id) === 'object' ||
+    // other theme states
+    isThemeKind(kind) && typeof id === 'string' && isThemeIds(id)) {
+      return themeString + "".concat(themeString ? ' ' : '') + "".concat(kind, ":").concat((0, _typeof2.default)(id) === 'object' ? JSON.stringify(id) : id);
+    }
+    return themeString;
   }, '');
 };
 exports.themeObjectToString = themeObjectToString;

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/cjs/version.json

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

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.13.2";
+const version = "1.14.1";
 /**
  * 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.13.2";
+const version = "1.14.1";
 /**
  * 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/theme-state-transformer.js

@@ -1,5 +1,6 @@
 import { themeIds } from './theme-config';
 const themeKinds = ['light', 'dark', 'spacing', 'typography', 'shape'];
+const customThemeOptions = 'UNSAFE_themeOptions';
 const isThemeKind = themeKind => {
   return themeKinds.find(kind => kind === themeKind) !== undefined;
 };
@@ -22,7 +23,7 @@ const isColorMode = modeId => {
  * ```
  */
 export const themeStringToObject = themeState => {
-  return themeState.split(' ').map(theme => theme.split(':')).reduce((themeObject, [kind, id]) => {
+  return themeState.split(' ').map(theme => theme.split(/:(.*)/s)).reduce((themeObject, [kind, id]) => {
     if (kind === 'colorMode' && isColorMode(id)) {
       themeObject[kind] = id;
     }
@@ -30,6 +31,13 @@ export const themeStringToObject = themeState => {
       // @ts-expect-error FIXME - this is a valid ts error
       themeObject[kind] = id;
     }
+    if (kind === customThemeOptions) {
+      try {
+        themeObject[customThemeOptions] = JSON.parse(id);
+      } catch (e) {
+        new Error('Invalid custom theme string');
+      }
+    }
     return themeObject;
   }, {});
 };
@@ -45,6 +53,15 @@ export const themeStringToObject = themeState => {
  * // returns 'dark:dark light:legacy-light spacing:spacing'
  * ```
  */
-export const themeObjectToString = themeState => {
-  return Object.entries(themeState).reduce((themeString, [kind, id]) => (kind === 'colorMode' || isThemeKind(kind)) && typeof id === 'string' && (isThemeIds(id) || isColorMode(id)) ? themeString + `${themeString ? ' ' : ''}` + `${kind}:${id}` : themeString, '');
-};
+export const themeObjectToString = themeState => Object.entries(themeState).reduce((themeString, [kind, id]) => {
+  if (
+  // colorMode theme state
+  kind === 'colorMode' && typeof id === 'string' && isColorMode(id) ||
+  // custom theme state
+  kind === customThemeOptions && typeof id === 'object' ||
+  // other theme states
+  isThemeKind(kind) && typeof id === 'string' && isThemeIds(id)) {
+    return themeString + `${themeString ? ' ' : ''}` + `${kind}:${typeof id === 'object' ? JSON.stringify(id) : id}`;
+  }
+  return themeString;
+}, '');

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/es2019/version.json

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

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.13.2";
+var version = "1.14.1";
 /**
  * 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.13.2";
+var version = "1.14.1";
 /**
  * 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/theme-state-transformer.js

@@ -1,6 +1,8 @@
+import _typeof from "@babel/runtime/helpers/typeof";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { themeIds } from './theme-config';
 var themeKinds = ['light', 'dark', 'spacing', 'typography', 'shape'];
+var customThemeOptions = 'UNSAFE_themeOptions';
 var isThemeKind = function isThemeKind(themeKind) {
   return themeKinds.find(function (kind) {
     return kind === themeKind;
@@ -28,7 +30,7 @@ var isColorMode = function isColorMode(modeId) {
  */
 export var themeStringToObject = function themeStringToObject(themeState) {
   return themeState.split(' ').map(function (theme) {
-    return theme.split(':');
+    return theme.split(/:([\s\S]*)/);
   }).reduce(function (themeObject, _ref) {
     var _ref2 = _slicedToArray(_ref, 2),
       kind = _ref2[0],
@@ -40,6 +42,13 @@ export var themeStringToObject = function themeStringToObject(themeState) {
       // @ts-expect-error FIXME - this is a valid ts error
       themeObject[kind] = id;
     }
+    if (kind === customThemeOptions) {
+      try {
+        themeObject[customThemeOptions] = JSON.parse(id);
+      } catch (e) {
+        new Error('Invalid custom theme string');
+      }
+    }
     return themeObject;
   }, {});
 };
@@ -60,6 +69,15 @@ export var themeObjectToString = function themeObjectToString(themeState) {
     var _ref4 = _slicedToArray(_ref3, 2),
       kind = _ref4[0],
       id = _ref4[1];
-    return (kind === 'colorMode' || isThemeKind(kind)) && typeof id === 'string' && (isThemeIds(id) || isColorMode(id)) ? themeString + "".concat(themeString ? ' ' : '') + "".concat(kind, ":").concat(id) : themeString;
+    if (
+    // colorMode theme state
+    kind === 'colorMode' && typeof id === 'string' && isColorMode(id) ||
+    // custom theme state
+    kind === customThemeOptions && _typeof(id) === 'object' ||
+    // other theme states
+    isThemeKind(kind) && typeof id === 'string' && isThemeIds(id)) {
+      return themeString + "".concat(themeString ? ' ' : '') + "".concat(kind, ":").concat(_typeof(id) === 'object' ? JSON.stringify(id) : id);
+    }
+    return themeString;
   }, '');
 };

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/esm/version.json

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

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/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.13.2",
+  "version": "1.14.1",
   "description": "Design tokens are the single source of truth to name and store design decisions.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"