@atlaskit/tokens 1.12.0 → 1.13.1

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

@@ -1,9 +1,9 @@
-import rawTokensDark from '../artifacts/tokens-raw/atlassian-dark';
+import rawTokensDark from '../artifacts/atlassian-dark-token-value-for-contrast-check';
 import { deltaE, getContrastRatio, hexToHSL, hexToRgb, hexToRgbA, HSLToRGB, relativeLuminanceW3C, rgbToHex } from './color-utils';
 import { additionalContrastChecker } from './custom-theme-token-contrast-check';
 import { argbFromRgba, Contrast, Hct, rgbaFromArgb } from './hct-color-utils';
-const lowLuminanceContrastRatios = [1.12, 1.33, 2.03, 2.73, 3.33, 4.27, 5.2, 6.62, 12.46, 15.98];
-const highLuminanceContrastRatios = [1.08, 1.24, 1.55, 1.99, 2.45, 3.34, 4.64, 6.1, 10.19, 13.43];
+const lowLuminanceContrastRatios = [1.12, 1.33, 2.03, 2.73, 3.33, 4.27, 5.2, 6.62, 12.46, 14.25];
+const highLuminanceContrastRatios = [1.08, 1.24, 1.55, 1.99, 2.45, 3.34, 4.64, 6.1, 10.19, 12.6];
 export const getClosestColorIndex = (themeRamp, brandColor) => {
   // Iterate over themeRamp and find whichever color is closest to brandColor
   let closestColorIndex = 0;
@@ -90,9 +90,15 @@ export const generateTokenMap = (brandColor, mode, themeRamp) => {
     customThemeTokenMapLight = {
       'color.text.brand': closestColorIndex,
       'color.icon.brand': closestColorIndex,
+      'color.background.brand.subtlest': 0,
+      'color.background.brand.subtlest.hovered': 1,
+      'color.background.brand.subtlest.pressed': 2,
       'color.background.brand.bold': closestColorIndex,
       'color.background.brand.bold.hovered': brandBoldSelectedHoveredIndex,
       'color.background.brand.bold.pressed': brandBoldSelectedPressedIndex,
+      'color.background.brand.boldest': 9,
+      'color.background.brand.boldest.hovered': 8,
+      'color.background.brand.boldest.pressed': 7,
       'color.border.brand': closestColorIndex,
       'color.text.selected': closestColorIndex,
       'color.icon.selected': closestColorIndex,
@@ -110,9 +116,15 @@ export const generateTokenMap = (brandColor, mode, themeRamp) => {
     };
   } else {
     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.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.hovered': 7,
@@ -149,8 +161,7 @@ export const generateTokenMap = (brandColor, mode, themeRamp) => {
    * in dark mode, shift color.background.brand.bold to the brand color
    */
   if (inputContrast < 4.5) {
-    var _rawTokensDark$find;
-    const inverseTextColor = (_rawTokensDark$find = rawTokensDark.find(token => token.cleanName === 'color.text.inverse')) === null || _rawTokensDark$find === void 0 ? void 0 : _rawTokensDark$find.value;
+    const inverseTextColor = rawTokensDark['color.text.inverse'];
     if (getContrastRatio(inverseTextColor, brandColor) >= 4.5 && closestColorIndex >= 2) {
       customThemeTokenMapDark['color.background.brand.bold'] = closestColorIndex;
       customThemeTokenMapDark['color.background.brand.bold.hovered'] = closestColorIndex - 1;

package/dist/es2019/version.json

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

package/dist/esm/artifacts/atlassian-dark-token-value-for-contrast-check.js

@@ -3,7 +3,7 @@
  *
  * Token names mapped to their values, used for contrast checking when generating custom themes
  *
- * @codegen <<SignedSource::1ddd5cd744975e8df5a191332ec8a42c>>
+ * @codegen <<SignedSource::2d922d82772ca155fb2fe7b5c63dc69a>>
  * @codegenCommand yarn build tokens
  */
 var tokenValues = {
@@ -12,6 +12,7 @@ var tokenValues = {
   'color.text.selected': '#579DFF',
   'color.background.selected': '#092957',
   'color.border.brand': '#579DFF',
-  'color.chart.brand': '#388BFF'
+  'color.chart.brand': '#388BFF',
+  'color.text.inverse': '#1D2125'
 };
 export default tokenValues;

package/dist/esm/artifacts/atlassian-light-token-value-for-contrast-check.js

@@ -3,7 +3,7 @@
  *
  * Token names mapped to their values, used for contrast checking when generating custom themes
  *
- * @codegen <<SignedSource::b59877585fad151840dbf6c212c56e34>>
+ * @codegen <<SignedSource::068e846d4121ab9afc08e7a1f99dbb5e>>
  * @codegenCommand yarn build tokens
  */
 var tokenValues = {
@@ -12,6 +12,7 @@ var tokenValues = {
   'color.text.selected': '#0C66E4',
   'color.background.selected': '#E9F2FF',
   'color.border.brand': '#0C66E4',
-  'color.chart.brand': '#1D7AFC'
+  'color.chart.brand': '#1D7AFC',
+  'color.text.inverse': '#FFFFFF'
 };
 export default tokenValues;