@atlaskit/tokens 1.12.0 → 1.13.0

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

@@ -87,6 +87,17 @@ var color = {
         }
       },
       brand: {
+        subtlest: {
+          '[default]': {
+            value: 'B75'
+          },
+          hovered: {
+            value: 'B50'
+          },
+          pressed: {
+            value: 'B100'
+          }
+        },
         bold: {
           '[default]': {
             value: 'B400'
@@ -97,6 +108,17 @@ var color = {
           pressed: {
             value: 'B500'
           }
+        },
+        boldest: {
+          '[default]': {
+            value: 'B500'
+          },
+          hovered: {
+            value: 'B400'
+          },
+          pressed: {
+            value: 'B500'
+          }
         }
       },
       selected: {

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

@@ -87,6 +87,17 @@ var color = {
         }
       },
       brand: {
+        subtlest: {
+          '[default]': {
+            value: 'Blue100'
+          },
+          hovered: {
+            value: 'Blue200'
+          },
+          pressed: {
+            value: 'Blue300'
+          }
+        },
         bold: {
           '[default]': {
             value: 'Blue700'
@@ -97,6 +108,17 @@ var color = {
           pressed: {
             value: 'Blue900'
           }
+        },
+        boldest: {
+          '[default]': {
+            value: 'Blue1000'
+          },
+          hovered: {
+            value: 'Blue900'
+          },
+          pressed: {
+            value: 'Blue800'
+          }
         }
       },
       selected: {

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

@@ -176,6 +176,32 @@ var 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: {
@@ -190,7 +216,7 @@ var 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: {
@@ -198,7 +224,33 @@ var 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/cjs/utils/generate-custom-color-ramp.js

@@ -8,14 +8,14 @@ exports.getClosestColorIndex = exports.generateTokenMapWithContrastCheck = expor
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _atlassianDark = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-dark"));
+var _atlassianDarkTokenValueForContrastCheck = _interopRequireDefault(require("../artifacts/atlassian-dark-token-value-for-contrast-check"));
 var _colorUtils = require("./color-utils");
 var _customThemeTokenContrastCheck = require("./custom-theme-token-contrast-check");
 var _hctColorUtils = require("./hct-color-utils");
 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; }
-var lowLuminanceContrastRatios = [1.12, 1.33, 2.03, 2.73, 3.33, 4.27, 5.2, 6.62, 12.46, 15.98];
-var highLuminanceContrastRatios = [1.08, 1.24, 1.55, 1.99, 2.45, 3.34, 4.64, 6.1, 10.19, 13.43];
+var lowLuminanceContrastRatios = [1.12, 1.33, 2.03, 2.73, 3.33, 4.27, 5.2, 6.62, 12.46, 14.25];
+var highLuminanceContrastRatios = [1.08, 1.24, 1.55, 1.99, 2.45, 3.34, 4.64, 6.1, 10.19, 12.6];
 var getClosestColorIndex = function getClosestColorIndex(themeRamp, brandColor) {
   // Iterate over themeRamp and find whichever color is closest to brandColor
   var closestColorIndex = 0;
@@ -109,9 +109,15 @@ var generateTokenMap = function 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,
@@ -129,9 +135,15 @@ var generateTokenMap = function 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,
@@ -171,10 +183,7 @@ var generateTokenMap = function generateTokenMap(brandColor, mode, themeRamp) {
    * in dark mode, shift color.background.brand.bold to the brand color
    */
   if (inputContrast < 4.5) {
-    var _rawTokensDark$find;
-    var inverseTextColor = (_rawTokensDark$find = _atlassianDark.default.find(function (token) {
-      return token.cleanName === 'color.text.inverse';
-    })) === null || _rawTokensDark$find === void 0 ? void 0 : _rawTokensDark$find.value;
+    var inverseTextColor = _atlassianDarkTokenValueForContrastCheck.default['color.text.inverse'];
     if ((0, _colorUtils.getContrastRatio)(inverseTextColor, brandColor) >= 4.5 && closestColorIndex >= 2) {
       customThemeTokenMapDark['color.background.brand.bold'] = closestColorIndex;
       customThemeTokenMapDark['color.background.brand.bold.hovered'] = closestColorIndex - 1;

package/dist/cjs/version.json

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

package/dist/es2019/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
  */
 const tokenValues = {
@@ -12,6 +12,7 @@ const 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/es2019/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
  */
 const tokenValues = {
@@ -12,6 +12,7 @@ const 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;