@atlaskit/tokens 1.11.3 → 1.13.0

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.11.3";
+var 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/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.11.3";
+var 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/esm/set-global-theme.js

@@ -6,8 +6,11 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { bind } from 'bind-event-listener';
 import noop from '@atlaskit/ds-lib/noop';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { COLOR_MODE_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
+import { COLOR_MODE_ATTRIBUTE, CUSTOM_THEME_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
 import { themeIdsWithOverrides } from './theme-config';
+import { isValidBrandHex } from './utils/color-utils';
+import { findMissingCustomStyleElements } from './utils/custom-theme-loading-utils';
+import { hash } from './utils/hash';
 import { loadAndAppendThemeCss, loadThemeCss } from './utils/theme-loading';
 import { themeObjectToString } from './utils/theme-state-transformer';
 
@@ -18,13 +21,14 @@ var isMatchMediaAvailable = typeof window !== 'undefined' && 'matchMedia' in win
 var darkModeMediaQuery = '(prefers-color-scheme: dark)';
 var darkModeMql = isMatchMediaAvailable && window.matchMedia(darkModeMediaQuery);
 var unbindThemeChangeListener = noop;
-var themeStateDefaults = {
+export var themeStateDefaults = {
   colorMode: 'auto',
   dark: 'dark',
   light: 'light',
   shape: undefined,
   spacing: undefined,
-  typography: undefined
+  typography: undefined,
+  UNSAFE_themeOptions: undefined
 };
 
 /**
@@ -72,6 +76,7 @@ var getThemePreferences = function getThemePreferences(themeState) {
  * @param {string} themeState.shape The shape theme to be applied.
  * @param {string} themeState.spacing The spacing theme to be applied.
  * @param {string} themeState.typography The typography theme to be applied.
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
  * @param {function} themeLoader Callback function used to override the default theme loading functionality.
  *
  * @returns A Promise of an unbind function, that can be used to stop listening for changes to system theme.
@@ -82,7 +87,7 @@ var getThemePreferences = function getThemePreferences(themeState) {
  * ```
  */
 var setGlobalTheme = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
     var _ref2,
       _ref2$colorMode,
       colorMode,
@@ -96,16 +101,18 @@ var setGlobalTheme = /*#__PURE__*/function () {
       spacing,
       _ref2$typography,
       typography,
+      _ref2$UNSAFE_themeOpt,
+      UNSAFE_themeOptions,
       themeLoader,
       themePreferences,
       loadingStrategy,
       themeAttributes,
-      _args2 = arguments;
-    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
+      _args3 = arguments;
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
         case 0:
-          _ref2 = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : {}, _ref2$colorMode = _ref2.colorMode, colorMode = _ref2$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref2$colorMode, _ref2$dark = _ref2.dark, dark = _ref2$dark === void 0 ? themeStateDefaults['dark'] : _ref2$dark, _ref2$light = _ref2.light, light = _ref2$light === void 0 ? themeStateDefaults['light'] : _ref2$light, _ref2$shape = _ref2.shape, shape = _ref2$shape === void 0 ? themeStateDefaults['shape'] : _ref2$shape, _ref2$spacing = _ref2.spacing, spacing = _ref2$spacing === void 0 ? themeStateDefaults['spacing'] : _ref2$spacing, _ref2$typography = _ref2.typography, typography = _ref2$typography === void 0 ? themeStateDefaults['typography'] : _ref2$typography;
-          themeLoader = _args2.length > 1 ? _args2[1] : undefined;
+          _ref2 = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : {}, _ref2$colorMode = _ref2.colorMode, colorMode = _ref2$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref2$colorMode, _ref2$dark = _ref2.dark, dark = _ref2$dark === void 0 ? themeStateDefaults['dark'] : _ref2$dark, _ref2$light = _ref2.light, light = _ref2$light === void 0 ? themeStateDefaults['light'] : _ref2$light, _ref2$shape = _ref2.shape, shape = _ref2$shape === void 0 ? themeStateDefaults['shape'] : _ref2$shape, _ref2$spacing = _ref2.spacing, spacing = _ref2$spacing === void 0 ? themeStateDefaults['spacing'] : _ref2$spacing, _ref2$typography = _ref2.typography, typography = _ref2$typography === void 0 ? themeStateDefaults['typography'] : _ref2$typography, _ref2$UNSAFE_themeOpt = _ref2.UNSAFE_themeOptions, UNSAFE_themeOptions = _ref2$UNSAFE_themeOpt === void 0 ? themeStateDefaults['UNSAFE_themeOptions'] : _ref2$UNSAFE_themeOpt;
+          themeLoader = _args3.length > 1 ? _args3[1] : undefined;
           themePreferences = getThemePreferences({
             colorMode: colorMode,
             dark: dark,
@@ -115,8 +122,8 @@ var setGlobalTheme = /*#__PURE__*/function () {
             typography: typography
           });
           loadingStrategy = themeLoader ? themeLoader : loadAndAppendThemeCss;
-          _context2.next = 6;
-          return Promise.all(themePreferences.map( /*#__PURE__*/function () {
+          _context3.next = 6;
+          return Promise.all([].concat(_toConsumableArray(themePreferences.map( /*#__PURE__*/function () {
             var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(themeId) {
               return _regeneratorRuntime.wrap(function _callee$(_context) {
                 while (1) switch (_context.prev = _context.next) {
@@ -134,7 +141,42 @@ var setGlobalTheme = /*#__PURE__*/function () {
             return function (_x) {
               return _ref3.apply(this, arguments);
             };
-          }()));
+          }())), [_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+            var mode, attrOfMissingCustomStyles, _yield$import, loadAndAppendCustomThemeCss;
+            return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+              while (1) switch (_context2.prev = _context2.next) {
+                case 0:
+                  if (!(!themeLoader && UNSAFE_themeOptions && isValidBrandHex(UNSAFE_themeOptions === null || UNSAFE_themeOptions === void 0 ? void 0 : UNSAFE_themeOptions.brandColor))) {
+                    _context2.next = 11;
+                    break;
+                  }
+                  mode = colorMode || themeStateDefaults['colorMode'];
+                  attrOfMissingCustomStyles = findMissingCustomStyleElements(UNSAFE_themeOptions, mode);
+                  if (!(attrOfMissingCustomStyles.length === 0)) {
+                    _context2.next = 5;
+                    break;
+                  }
+                  return _context2.abrupt("return", false);
+                case 5:
+                  _context2.next = 7;
+                  return import( /* webpackChunkName: "@atlaskit-internal_atlassian-custom-theme" */
+                  './custom-theme');
+                case 7:
+                  _yield$import = _context2.sent;
+                  loadAndAppendCustomThemeCss = _yield$import.loadAndAppendCustomThemeCss;
+                  _context2.next = 11;
+                  return loadAndAppendCustomThemeCss({
+                    colorMode: attrOfMissingCustomStyles.length === 2 ? 'auto' :
+                    // only load the missing custom theme styles
+                    attrOfMissingCustomStyles[0],
+                    UNSAFE_themeOptions: UNSAFE_themeOptions
+                  });
+                case 11:
+                case "end":
+                  return _context2.stop();
+              }
+            }, _callee2);
+          }))()]));
         case 6:
           if (colorMode === 'auto' && darkModeMql) {
             colorMode = darkModeMql.matches ? 'dark' : 'light';
@@ -153,20 +195,21 @@ var setGlobalTheme = /*#__PURE__*/function () {
             light: light,
             shape: shape,
             spacing: spacing,
-            typography: typography
+            typography: typography,
+            UNSAFE_themeOptions: themeLoader ? undefined : UNSAFE_themeOptions
           });
-          Object.entries(themeAttributes).forEach(function (_ref4) {
-            var _ref5 = _slicedToArray(_ref4, 2),
-              key = _ref5[0],
-              value = _ref5[1];
+          Object.entries(themeAttributes).forEach(function (_ref5) {
+            var _ref6 = _slicedToArray(_ref5, 2),
+              key = _ref6[0],
+              value = _ref6[1];
             document.documentElement.setAttribute(key, value);
           });
-          return _context2.abrupt("return", unbindThemeChangeListener);
+          return _context3.abrupt("return", unbindThemeChangeListener);
         case 10:
         case "end":
-          return _context2.stop();
+          return _context3.stop();
       }
-    }, _callee2);
+    }, _callee3);
   }));
   return function setGlobalTheme() {
     return _ref.apply(this, arguments);
@@ -183,15 +226,16 @@ var setGlobalTheme = /*#__PURE__*/function () {
  * @param {string} themeState.shape The shape theme to be applied.
  * @param {string} themeState.spacing The spacing theme to be applied.
  * @param {string} themeState.typography The typography theme to be applied.
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
  *
  * @returns A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
- * If an error is encountered while loading themes, the themes arrav will be emptv.
+ * If an error is encountered while loading themes, the themes array will be empty.
  */
 export var getThemeStyles = /*#__PURE__*/function () {
-  var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(preferences) {
+  var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6(preferences) {
     var themePreferences, results;
-    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-      while (1) switch (_context4.prev = _context4.next) {
+    return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
         case 0:
           if (preferences === 'all') {
             themePreferences = themeIdsWithOverrides;
@@ -205,19 +249,19 @@ export var getThemeStyles = /*#__PURE__*/function () {
               typography: (preferences === null || preferences === void 0 ? void 0 : preferences.typography) || themeStateDefaults['typography']
             });
           }
-          _context4.next = 3;
-          return Promise.all(themePreferences.map( /*#__PURE__*/function () {
-            var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(themeId) {
+          _context6.next = 3;
+          return Promise.all([].concat(_toConsumableArray(themePreferences.map( /*#__PURE__*/function () {
+            var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(themeId) {
               var css;
-              return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-                while (1) switch (_context3.prev = _context3.next) {
+              return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+                while (1) switch (_context4.prev = _context4.next) {
                   case 0:
-                    _context3.prev = 0;
-                    _context3.next = 3;
+                    _context4.prev = 0;
+                    _context4.next = 3;
                     return loadThemeCss(themeId);
                   case 3:
-                    css = _context3.sent;
-                    return _context3.abrupt("return", {
+                    css = _context4.sent;
+                    return _context4.abrupt("return", {
                       id: themeId,
                       attrs: {
                         'data-theme': themeId
@@ -225,32 +269,68 @@ export var getThemeStyles = /*#__PURE__*/function () {
                       css: css
                     });
                   case 7:
-                    _context3.prev = 7;
-                    _context3.t0 = _context3["catch"](0);
-                    return _context3.abrupt("return", undefined);
+                    _context4.prev = 7;
+                    _context4.t0 = _context4["catch"](0);
+                    return _context4.abrupt("return", undefined);
                   case 10:
                   case "end":
-                    return _context3.stop();
+                    return _context4.stop();
                 }
-              }, _callee3, null, [[0, 7]]);
+              }, _callee4, null, [[0, 7]]);
             }));
             return function (_x3) {
-              return _ref7.apply(this, arguments);
+              return _ref8.apply(this, arguments);
             };
-          }()));
+          }())), [
+          // Add custom themes if they're present
+          _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+            var _preferences$UNSAFE_t;
+            var _yield$import2, getCustomThemeStyles, customThemeStyles;
+            return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+              while (1) switch (_context5.prev = _context5.next) {
+                case 0:
+                  if (!(preferences !== 'all' && preferences !== null && preferences !== void 0 && preferences.UNSAFE_themeOptions && isValidBrandHex(preferences === null || preferences === void 0 ? void 0 : (_preferences$UNSAFE_t = preferences.UNSAFE_themeOptions) === null || _preferences$UNSAFE_t === void 0 ? void 0 : _preferences$UNSAFE_t.brandColor))) {
+                    _context5.next = 15;
+                    break;
+                  }
+                  _context5.prev = 1;
+                  _context5.next = 4;
+                  return import( /* webpackChunkName: "@atlaskit-internal_atlassian-custom-theme" */
+                  './custom-theme');
+                case 4:
+                  _yield$import2 = _context5.sent;
+                  getCustomThemeStyles = _yield$import2.getCustomThemeStyles;
+                  _context5.next = 8;
+                  return getCustomThemeStyles({
+                    colorMode: (preferences === null || preferences === void 0 ? void 0 : preferences.colorMode) || themeStateDefaults['colorMode'],
+                    UNSAFE_themeOptions: preferences === null || preferences === void 0 ? void 0 : preferences.UNSAFE_themeOptions
+                  });
+                case 8:
+                  customThemeStyles = _context5.sent;
+                  return _context5.abrupt("return", customThemeStyles);
+                case 12:
+                  _context5.prev = 12;
+                  _context5.t0 = _context5["catch"](1);
+                  return _context5.abrupt("return", undefined);
+                case 15:
+                case "end":
+                  return _context5.stop();
+              }
+            }, _callee5, null, [[1, 12]]);
+          }))()]));
         case 3:
-          results = _context4.sent;
-          return _context4.abrupt("return", results.filter(function (theme) {
+          results = _context6.sent;
+          return _context6.abrupt("return", results.flat().filter(function (theme) {
             return theme !== undefined;
           }));
         case 5:
         case "end":
-          return _context4.stop();
+          return _context6.stop();
       }
-    }, _callee4);
+    }, _callee6);
   }));
   return function getThemeStyles(_x2) {
-    return _ref6.apply(this, arguments);
+    return _ref7.apply(this, arguments);
   };
 }();
 
@@ -264,24 +344,27 @@ export var getThemeStyles = /*#__PURE__*/function () {
  * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
  * @param {string} themeState.spacing The spacing theme to be applied.
  * @param {string} themeState.typography The typography theme to be applied.
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
  *
  * @returns {Object} Object of HTML attributes to be applied to the document root
  */
 export var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
-  var _ref9;
-  var _ref8 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref8$colorMode = _ref8.colorMode,
-    colorMode = _ref8$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref8$colorMode,
-    _ref8$dark = _ref8.dark,
-    dark = _ref8$dark === void 0 ? themeStateDefaults['dark'] : _ref8$dark,
-    _ref8$light = _ref8.light,
-    light = _ref8$light === void 0 ? themeStateDefaults['light'] : _ref8$light,
-    _ref8$shape = _ref8.shape,
-    shape = _ref8$shape === void 0 ? themeStateDefaults['shape'] : _ref8$shape,
-    _ref8$spacing = _ref8.spacing,
-    spacing = _ref8$spacing === void 0 ? themeStateDefaults['spacing'] : _ref8$spacing,
-    _ref8$typography = _ref8.typography,
-    typography = _ref8$typography === void 0 ? themeStateDefaults['typography'] : _ref8$typography;
+  var _result;
+  var _ref10 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref10$colorMode = _ref10.colorMode,
+    colorMode = _ref10$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref10$colorMode,
+    _ref10$dark = _ref10.dark,
+    dark = _ref10$dark === void 0 ? themeStateDefaults['dark'] : _ref10$dark,
+    _ref10$light = _ref10.light,
+    light = _ref10$light === void 0 ? themeStateDefaults['light'] : _ref10$light,
+    _ref10$shape = _ref10.shape,
+    shape = _ref10$shape === void 0 ? themeStateDefaults['shape'] : _ref10$shape,
+    _ref10$spacing = _ref10.spacing,
+    spacing = _ref10$spacing === void 0 ? themeStateDefaults['spacing'] : _ref10$spacing,
+    _ref10$typography = _ref10.typography,
+    typography = _ref10$typography === void 0 ? themeStateDefaults['typography'] : _ref10$typography,
+    _ref10$UNSAFE_themeOp = _ref10.UNSAFE_themeOptions,
+    UNSAFE_themeOptions = _ref10$UNSAFE_themeOp === void 0 ? themeStateDefaults['UNSAFE_themeOptions'] : _ref10$UNSAFE_themeOp;
   var themePreferences = {
     dark: dark,
     light: light,
@@ -301,7 +384,13 @@ export var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
     };
   }
   var themeAttribute = themeObjectToString(themePreferences);
-  return _ref9 = {}, _defineProperty(_ref9, THEME_DATA_ATTRIBUTE, themeAttribute), _defineProperty(_ref9, COLOR_MODE_ATTRIBUTE, colorMode === 'auto' ? defaultColorMode : colorMode), _ref9;
+  var result = (_result = {}, _defineProperty(_result, THEME_DATA_ATTRIBUTE, themeAttribute), _defineProperty(_result, COLOR_MODE_ATTRIBUTE, colorMode === 'auto' ? defaultColorMode : colorMode), _result);
+  if (UNSAFE_themeOptions && isValidBrandHex(UNSAFE_themeOptions.brandColor)) {
+    var optionString = JSON.stringify(UNSAFE_themeOptions);
+    var uniqueId = hash(optionString);
+    result[CUSTOM_THEME_ATTRIBUTE] = uniqueId;
+  }
+  return result;
 };
 
 /**

package/dist/esm/tokens/atlassian-dark/color/background.js

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

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

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

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

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

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

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

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

@@ -170,6 +170,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: {
@@ -184,7 +210,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: {
@@ -192,7 +218,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.'
             }
           }
         }