@atlaskit/tokens 1.12.0 → 1.13.0

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0b9efb6f5e343e1cbb90bf2ead8a25da>>
+ * @codegen <<SignedSource::8b7aab21b157bced2314e03774c8445e>>
  * @codegenCommand yarn build tokens
  */
 const tokens = [{
@@ -3127,6 +3127,72 @@ const tokens = [{
   "name": "color.background.selected.bold.pressed",
   "path": ["color", "background", "selected", "bold", "pressed"],
   "cleanName": "color.background.selected.bold.pressed"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Use for the background of elements used to reinforce our brand, but with less emphasis."
+  },
+  "value": "#B3D4FF",
+  "filePath": "src/tokens/atlassian-legacy-light/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Use for the background of elements used to reinforce our brand, but with less emphasis."
+    },
+    "value": "B75"
+  },
+  "name": "color.background.brand.subtlest.[default]",
+  "path": ["color", "background", "brand", "subtlest", "[default]"],
+  "cleanName": "color.background.brand.subtlest"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Hovered state of color.background.brand.subtlest."
+  },
+  "value": "#DEEBFF",
+  "filePath": "src/tokens/atlassian-legacy-light/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Hovered state of color.background.brand.subtlest."
+    },
+    "value": "B50"
+  },
+  "name": "color.background.brand.subtlest.hovered",
+  "path": ["color", "background", "brand", "subtlest", "hovered"],
+  "cleanName": "color.background.brand.subtlest.hovered"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Pressed state of color.background.brand.subtlest"
+  },
+  "value": "#4C9AFF",
+  "filePath": "src/tokens/atlassian-legacy-light/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Pressed state of color.background.brand.subtlest"
+    },
+    "value": "B100"
+  },
+  "name": "color.background.brand.subtlest.pressed",
+  "path": ["color", "background", "brand", "subtlest", "pressed"],
+  "cleanName": "color.background.brand.subtlest.pressed"
 }, {
   "attributes": {
     "group": "paint",
@@ -3154,7 +3220,7 @@ const tokens = [{
     "group": "paint",
     "state": "active",
     "introduced": "0.6.0",
-    "description": "Hovered state of color.background.brand.bold"
+    "description": "Hovered state of color.background.brand.bold."
   },
   "value": "#0065FF",
   "filePath": "src/tokens/atlassian-legacy-light/color/background.tsx",
@@ -3164,7 +3230,7 @@ const tokens = [{
       "group": "paint",
       "state": "active",
       "introduced": "0.6.0",
-      "description": "Hovered state of color.background.brand.bold"
+      "description": "Hovered state of color.background.brand.bold."
     },
     "value": "B300"
   },
@@ -3176,7 +3242,7 @@ const tokens = [{
     "group": "paint",
     "state": "active",
     "introduced": "0.6.0",
-    "description": "Pressed state of color.background.brand.bold"
+    "description": "Pressed state of color.background.brand.bold."
   },
   "value": "#0747A6",
   "filePath": "src/tokens/atlassian-legacy-light/color/background.tsx",
@@ -3186,13 +3252,79 @@ const tokens = [{
       "group": "paint",
       "state": "active",
       "introduced": "0.6.0",
-      "description": "Pressed state of color.background.brand.bold"
+      "description": "Pressed state of color.background.brand.bold."
     },
     "value": "B500"
   },
   "name": "color.background.brand.bold.pressed",
   "path": ["color", "background", "brand", "bold", "pressed"],
   "cleanName": "color.background.brand.bold.pressed"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Use for the background of elements used to reinforce our brand, that need to stand out a lot."
+  },
+  "value": "#0747A6",
+  "filePath": "src/tokens/atlassian-legacy-light/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Use for the background of elements used to reinforce our brand, that need to stand out a lot."
+    },
+    "value": "B500"
+  },
+  "name": "color.background.brand.boldest.[default]",
+  "path": ["color", "background", "brand", "boldest", "[default]"],
+  "cleanName": "color.background.brand.boldest"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Hovered state of color.background.brand.boldest."
+  },
+  "value": "#0052CC",
+  "filePath": "src/tokens/atlassian-legacy-light/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Hovered state of color.background.brand.boldest."
+    },
+    "value": "B400"
+  },
+  "name": "color.background.brand.boldest.hovered",
+  "path": ["color", "background", "brand", "boldest", "hovered"],
+  "cleanName": "color.background.brand.boldest.hovered"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Pressed state of color.background.brand.boldest."
+  },
+  "value": "#0747A6",
+  "filePath": "src/tokens/atlassian-legacy-light/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Pressed state of color.background.brand.boldest."
+    },
+    "value": "B500"
+  },
+  "name": "color.background.brand.boldest.pressed",
+  "path": ["color", "background", "brand", "boldest", "pressed"],
+  "cleanName": "color.background.brand.boldest.pressed"
 }, {
   "attributes": {
     "group": "paint",

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d67f95200a3e54c2a2adadc78198392e>>
+ * @codegen <<SignedSource::c96324369c8a09e129803eff1f33d1e8>>
  * @codegenCommand yarn build tokens
  */
 const tokens = [{
@@ -3127,6 +3127,72 @@ const tokens = [{
   "name": "color.background.selected.bold.pressed",
   "path": ["color", "background", "selected", "bold", "pressed"],
   "cleanName": "color.background.selected.bold.pressed"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Use for the background of elements used to reinforce our brand, but with less emphasis."
+  },
+  "value": "#E9F2FF",
+  "filePath": "src/tokens/atlassian-light/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Use for the background of elements used to reinforce our brand, but with less emphasis."
+    },
+    "value": "Blue100"
+  },
+  "name": "color.background.brand.subtlest.[default]",
+  "path": ["color", "background", "brand", "subtlest", "[default]"],
+  "cleanName": "color.background.brand.subtlest"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Hovered state of color.background.brand.subtlest."
+  },
+  "value": "#CCE0FF",
+  "filePath": "src/tokens/atlassian-light/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Hovered state of color.background.brand.subtlest."
+    },
+    "value": "Blue200"
+  },
+  "name": "color.background.brand.subtlest.hovered",
+  "path": ["color", "background", "brand", "subtlest", "hovered"],
+  "cleanName": "color.background.brand.subtlest.hovered"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Pressed state of color.background.brand.subtlest"
+  },
+  "value": "#85B8FF",
+  "filePath": "src/tokens/atlassian-light/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Pressed state of color.background.brand.subtlest"
+    },
+    "value": "Blue300"
+  },
+  "name": "color.background.brand.subtlest.pressed",
+  "path": ["color", "background", "brand", "subtlest", "pressed"],
+  "cleanName": "color.background.brand.subtlest.pressed"
 }, {
   "attributes": {
     "group": "paint",
@@ -3154,7 +3220,7 @@ const tokens = [{
     "group": "paint",
     "state": "active",
     "introduced": "0.6.0",
-    "description": "Hovered state of color.background.brand.bold"
+    "description": "Hovered state of color.background.brand.bold."
   },
   "value": "#0055CC",
   "filePath": "src/tokens/atlassian-light/color/background.tsx",
@@ -3164,7 +3230,7 @@ const tokens = [{
       "group": "paint",
       "state": "active",
       "introduced": "0.6.0",
-      "description": "Hovered state of color.background.brand.bold"
+      "description": "Hovered state of color.background.brand.bold."
     },
     "value": "Blue800"
   },
@@ -3176,7 +3242,7 @@ const tokens = [{
     "group": "paint",
     "state": "active",
     "introduced": "0.6.0",
-    "description": "Pressed state of color.background.brand.bold"
+    "description": "Pressed state of color.background.brand.bold."
   },
   "value": "#09326C",
   "filePath": "src/tokens/atlassian-light/color/background.tsx",
@@ -3186,13 +3252,79 @@ const tokens = [{
       "group": "paint",
       "state": "active",
       "introduced": "0.6.0",
-      "description": "Pressed state of color.background.brand.bold"
+      "description": "Pressed state of color.background.brand.bold."
     },
     "value": "Blue900"
   },
   "name": "color.background.brand.bold.pressed",
   "path": ["color", "background", "brand", "bold", "pressed"],
   "cleanName": "color.background.brand.bold.pressed"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Use for the background of elements used to reinforce our brand, that need to stand out a lot."
+  },
+  "value": "#092957",
+  "filePath": "src/tokens/atlassian-light/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Use for the background of elements used to reinforce our brand, that need to stand out a lot."
+    },
+    "value": "Blue1000"
+  },
+  "name": "color.background.brand.boldest.[default]",
+  "path": ["color", "background", "brand", "boldest", "[default]"],
+  "cleanName": "color.background.brand.boldest"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Hovered state of color.background.brand.boldest."
+  },
+  "value": "#09326C",
+  "filePath": "src/tokens/atlassian-light/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Hovered state of color.background.brand.boldest."
+    },
+    "value": "Blue900"
+  },
+  "name": "color.background.brand.boldest.hovered",
+  "path": ["color", "background", "brand", "boldest", "hovered"],
+  "cleanName": "color.background.brand.boldest.hovered"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Pressed state of color.background.brand.boldest."
+  },
+  "value": "#0055CC",
+  "filePath": "src/tokens/atlassian-light/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Pressed state of color.background.brand.boldest."
+    },
+    "value": "Blue800"
+  },
+  "name": "color.background.brand.boldest.pressed",
+  "path": ["color", "background", "brand", "boldest", "pressed"],
+  "cleanName": "color.background.brand.boldest.pressed"
 }, {
   "attributes": {
     "group": "paint",

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.12.0";
+const version = "0.0.0-development";
 /**
  * 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.12.0";
+const version = "0.0.0-development";
 /**
  * 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/tokens/atlassian-dark/color/background.js

@@ -82,6 +82,17 @@ const color = {
         }
       },
       brand: {
+        subtlest: {
+          '[default]': {
+            value: 'Blue1000'
+          },
+          hovered: {
+            value: 'Blue900'
+          },
+          pressed: {
+            value: 'Blue800'
+          }
+        },
         bold: {
           '[default]': {
             value: 'Blue400'
@@ -92,6 +103,17 @@ const color = {
           pressed: {
             value: 'Blue200'
           }
+        },
+        boldest: {
+          '[default]': {
+            value: 'Blue100'
+          },
+          hovered: {
+            value: 'Blue200'
+          },
+          pressed: {
+            value: 'Blue300'
+          }
         }
       },
       selected: {

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

@@ -81,6 +81,17 @@ const color = {
         }
       },
       brand: {
+        subtlest: {
+          '[default]': {
+            value: 'B500'
+          },
+          hovered: {
+            value: 'B400'
+          },
+          pressed: {
+            value: 'B500'
+          }
+        },
         bold: {
           '[default]': {
             value: 'B400'
@@ -91,6 +102,17 @@ const color = {
           pressed: {
             value: 'B500'
           }
+        },
+        boldest: {
+          '[default]': {
+            value: 'B75'
+          },
+          hovered: {
+            value: 'B50'
+          },
+          pressed: {
+            value: 'B100'
+          }
         }
       },
       selected: {

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

@@ -81,6 +81,17 @@ const color = {
         }
       },
       brand: {
+        subtlest: {
+          '[default]': {
+            value: 'B75'
+          },
+          hovered: {
+            value: 'B50'
+          },
+          pressed: {
+            value: 'B100'
+          }
+        },
         bold: {
           '[default]': {
             value: 'B400'
@@ -91,6 +102,17 @@ const color = {
           pressed: {
             value: 'B500'
           }
+        },
+        boldest: {
+          '[default]': {
+            value: 'B500'
+          },
+          hovered: {
+            value: 'B400'
+          },
+          pressed: {
+            value: 'B500'
+          }
         }
       },
       selected: {

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

@@ -81,6 +81,17 @@ const color = {
         }
       },
       brand: {
+        subtlest: {
+          '[default]': {
+            value: 'Blue100'
+          },
+          hovered: {
+            value: 'Blue200'
+          },
+          pressed: {
+            value: 'Blue300'
+          }
+        },
         bold: {
           '[default]': {
             value: 'Blue700'
@@ -91,6 +102,17 @@ const color = {
           pressed: {
             value: 'Blue900'
           }
+        },
+        boldest: {
+          '[default]': {
+            value: 'Blue1000'
+          },
+          hovered: {
+            value: 'Blue900'
+          },
+          pressed: {
+            value: 'Blue800'
+          }
         }
       },
       selected: {

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

@@ -170,6 +170,32 @@ const color = {
         }
       },
       brand: {
+        subtlest: {
+          '[default]': {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              introduced: '1.13.0',
+              description: 'Use for the background of elements used to reinforce our brand, but with less emphasis.'
+            }
+          },
+          hovered: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              introduced: '1.13.0',
+              description: 'Hovered state of color.background.brand.subtlest.'
+            }
+          },
+          pressed: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              introduced: '1.13.0',
+              description: 'Pressed state of color.background.brand.subtlest'
+            }
+          }
+        },
         bold: {
           '[default]': {
             attributes: {
@@ -184,7 +210,7 @@ const color = {
               group: 'paint',
               state: 'active',
               introduced: '0.6.0',
-              description: 'Hovered state of color.background.brand.bold'
+              description: 'Hovered state of color.background.brand.bold.'
             }
           },
           pressed: {
@@ -192,7 +218,33 @@ const color = {
               group: 'paint',
               state: 'active',
               introduced: '0.6.0',
-              description: 'Pressed state of color.background.brand.bold'
+              description: 'Pressed state of color.background.brand.bold.'
+            }
+          }
+        },
+        boldest: {
+          '[default]': {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              introduced: '1.13.0',
+              description: 'Use for the background of elements used to reinforce our brand, that need to stand out a lot.'
+            }
+          },
+          hovered: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              introduced: '1.13.0',
+              description: 'Hovered state of color.background.brand.boldest.'
+            }
+          },
+          pressed: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              introduced: '1.13.0',
+              description: 'Pressed state of color.background.brand.boldest.'
             }
           }
         }

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.0",
 	"sideEffects": [
 		"**/*.css"
 	]