@atlaskit/tokens 8.2.0 → 8.4.0

package/dist/cjs/entry-points/token-metadata.codegen.js

@@ -9,7 +9,7 @@ exports.tokens = void 0;
  *
  * Metadata for generation of of `@atlaskit/ads-mcp` and https://atlassian.design/llms-tokens.txt.
  *
- * @codegen <<SignedSource::b641ae01a1e0cba6256542b047415d41>>
+ * @codegen <<SignedSource::d2c7d478f4be0c1217d656e8c1c6ce83>>
  * @codegenCommand yarn build tokens
  */
 
@@ -140,9 +140,14 @@ var tokens = exports.tokens = [{
   exampleValue: '#1868DB'
 }, {
   name: 'color.text.danger',
-  path: ['color', 'text', 'danger'],
+  path: ['color', 'text', 'danger', '[default]'],
   description: 'Use for critical text, such as input field error messaging.',
   exampleValue: '#AE2E24'
+}, {
+  name: 'color.text.danger.bolder',
+  path: ['color', 'text', 'danger', 'bolder'],
+  description: 'Use for text on top of danger semantic labels to ensure accessibility and desired visual appearance.',
+  exampleValue: '#5D1F1A'
 }, {
   name: 'color.text.warning',
   path: ['color', 'text', 'warning', '[default]'],
@@ -153,21 +158,41 @@ var tokens = exports.tokens = [{
   path: ['color', 'text', 'warning', 'inverse'],
   description: 'Use for text when on bold warning backgrounds.',
   exampleValue: '#292A2E'
+}, {
+  name: 'color.text.warning.bolder',
+  path: ['color', 'text', 'warning', 'bolder'],
+  description: 'Use for text on top of warning semantic labels to ensure accessibility and desired visual appearance.',
+  exampleValue: '#693200'
 }, {
   name: 'color.text.success',
-  path: ['color', 'text', 'success'],
+  path: ['color', 'text', 'success', '[default]'],
   description: 'Use for text to communicate a favorable outcome, such as input field success messaging.',
   exampleValue: '#4C6B1F'
+}, {
+  name: 'color.text.success.bolder',
+  path: ['color', 'text', 'success', 'bolder'],
+  description: 'Use for text on top of success semantic labels to ensure accessibility and desired visual appearance.',
+  exampleValue: '#37471F'
 }, {
   name: 'color.text.discovery',
-  path: ['color', 'text', 'discovery'],
+  path: ['color', 'text', 'discovery', '[default]'],
   description: 'Use for text to emphasize change or something new, such as in new lozenges.',
   exampleValue: '#803FA5'
+}, {
+  name: 'color.text.discovery.bolder',
+  path: ['color', 'text', 'discovery', 'bolder'],
+  description: 'Use for text on top of discovery semantic labels to ensure accessibility and desired visual appearance.',
+  exampleValue: '#48245D'
 }, {
   name: 'color.text.information',
-  path: ['color', 'text', 'information'],
+  path: ['color', 'text', 'information', '[default]'],
   description: 'Use for informative text or to communicate something is in progress, such as in-progress lozenges.',
   exampleValue: '#1558BC'
+}, {
+  name: 'color.text.information.bolder',
+  path: ['color', 'text', 'information', 'bolder'],
+  description: 'Use for text on top of information semantic labels to ensure accessibility and desired visual appearance.',
+  exampleValue: '#123263'
 }, {
   name: 'color.text.subtlest',
   path: ['color', 'text', 'subtlest'],
@@ -1198,6 +1223,21 @@ var tokens = exports.tokens = [{
   path: ['color', 'background', 'danger', '[default]', 'pressed'],
   description: 'Pressed state for color.background.danger',
   exampleValue: '#FFB8B2'
+}, {
+  name: 'color.background.danger.subtler',
+  path: ['color', 'background', 'danger', 'subtler', '[default]'],
+  description: 'Use for backgrounds of danger lozenges and badges to ensure accessibility and desired visual appearance.',
+  exampleValue: '#FFD5D2'
+}, {
+  name: 'color.background.danger.subtler.hovered',
+  path: ['color', 'background', 'danger', 'subtler', 'hovered'],
+  description: 'Hovered state of color.background.danger.subtler',
+  exampleValue: '#FFB8B2'
+}, {
+  name: 'color.background.danger.subtler.pressed',
+  path: ['color', 'background', 'danger', 'subtler', 'pressed'],
+  description: 'Pressed state of color.background.danger.subtler',
+  exampleValue: '#FD9891'
 }, {
   name: 'color.background.danger.bold',
   path: ['color', 'background', 'danger', 'bold', '[default]'],
@@ -1228,6 +1268,21 @@ var tokens = exports.tokens = [{
   path: ['color', 'background', 'warning', '[default]', 'pressed'],
   description: 'Pressed state for color.background.warning',
   exampleValue: '#FBD779'
+}, {
+  name: 'color.background.warning.subtler',
+  path: ['color', 'background', 'warning', 'subtler', '[default]'],
+  description: 'Use for backgrounds of warning lozenges and badges to ensure accessibility and desired visual appearance.',
+  exampleValue: '#FCE4A6'
+}, {
+  name: 'color.background.warning.subtler.hovered',
+  path: ['color', 'background', 'warning', 'subtler', 'hovered'],
+  description: 'Hovered state of color.background.warning.subtler',
+  exampleValue: '#FBD779'
+}, {
+  name: 'color.background.warning.subtler.pressed',
+  path: ['color', 'background', 'warning', 'subtler', 'pressed'],
+  description: 'Pressed state of color.background.warning.subtler',
+  exampleValue: '#FBC828'
 }, {
   name: 'color.background.warning.bold',
   path: ['color', 'background', 'warning', 'bold', '[default]'],
@@ -1258,6 +1313,21 @@ var tokens = exports.tokens = [{
   path: ['color', 'background', 'success', '[default]', 'pressed'],
   description: 'Pressed state for color.background.success',
   exampleValue: '#BDE97C'
+}, {
+  name: 'color.background.success.subtler',
+  path: ['color', 'background', 'success', 'subtler', '[default]'],
+  description: 'Use for backgrounds of success lozenges and badges to ensure accessibility and desired visual appearance.',
+  exampleValue: '#D3F1A7'
+}, {
+  name: 'color.background.success.subtler.hovered',
+  path: ['color', 'background', 'success', 'subtler', 'hovered'],
+  description: 'Hovered state of color.background.success.subtler',
+  exampleValue: '#BDE97C'
+}, {
+  name: 'color.background.success.subtler.pressed',
+  path: ['color', 'background', 'success', 'subtler', 'pressed'],
+  description: 'Pressed state of color.background.success.subtler',
+  exampleValue: '#B3DF72'
 }, {
   name: 'color.background.success.bold',
   path: ['color', 'background', 'success', 'bold', '[default]'],
@@ -1288,6 +1358,21 @@ var tokens = exports.tokens = [{
   path: ['color', 'background', 'discovery', '[default]', 'pressed'],
   description: 'Pressed state for color.background.discovery',
   exampleValue: '#E3BDFA'
+}, {
+  name: 'color.background.discovery.subtler',
+  path: ['color', 'background', 'discovery', 'subtler', '[default]'],
+  description: 'Use for backgrounds of discovery lozenges and badges to ensure accessibility and desired visual appearance.',
+  exampleValue: '#EED7FC'
+}, {
+  name: 'color.background.discovery.subtler.hovered',
+  path: ['color', 'background', 'discovery', 'subtler', 'hovered'],
+  description: 'Hovered state of color.background.discovery.subtler',
+  exampleValue: '#E3BDFA'
+}, {
+  name: 'color.background.discovery.subtler.pressed',
+  path: ['color', 'background', 'discovery', 'subtler', 'pressed'],
+  description: 'Pressed state of color.background.discovery.subtler',
+  exampleValue: '#D8A0F7'
 }, {
   name: 'color.background.discovery.bold',
   path: ['color', 'background', 'discovery', 'bold', '[default]'],
@@ -1318,6 +1403,21 @@ var tokens = exports.tokens = [{
   path: ['color', 'background', 'information', '[default]', 'pressed'],
   description: 'Pressed state of color.background.information',
   exampleValue: '#ADCBFB'
+}, {
+  name: 'color.background.information.subtler',
+  path: ['color', 'background', 'information', 'subtler', '[default]'],
+  description: 'Use for backgrounds of information lozenges and badges to ensure accessibility and desired visual appearance.',
+  exampleValue: '#CFE1FD'
+}, {
+  name: 'color.background.information.subtler.hovered',
+  path: ['color', 'background', 'information', 'subtler', 'hovered'],
+  description: 'Hovered state of color.background.information.subtler',
+  exampleValue: '#ADCBFB'
+}, {
+  name: 'color.background.information.subtler.pressed',
+  path: ['color', 'background', 'information', 'subtler', 'pressed'],
+  description: 'Pressed state of color.background.information.subtler',
+  exampleValue: '#8FB8F6'
 }, {
   name: 'color.background.information.bold',
   path: ['color', 'background', 'information', 'bold', '[default]'],

package/dist/cjs/get-theme-html-attrs.js

@@ -42,7 +42,7 @@ var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
     _ref$contrastMode = _ref.contrastMode,
     contrastMode = _ref$contrastMode === void 0 ? _themeConfig.themeStateDefaults['contrastMode'] : _ref$contrastMode,
     _ref$shape = _ref.shape,
-    shape = _ref$shape === void 0 ? _themeConfig.themeStateDefaults['shape'] : _ref$shape,
+    shape = _ref$shape === void 0 ? _themeConfig.themeStateDefaults['shape']() : _ref$shape,
     _ref$spacing = _ref.spacing,
     spacing = _ref$spacing === void 0 ? _themeConfig.themeStateDefaults['spacing'] : _ref$spacing,
     _ref$typography = _ref.typography,

package/dist/cjs/get-theme-styles.js

@@ -53,7 +53,7 @@ var getThemeStyles = /*#__PURE__*/function () {
               contrastMode: (preferences === null || preferences === void 0 ? void 0 : preferences.contrastMode) || _themeConfig.themeStateDefaults['contrastMode'],
               dark: (preferences === null || preferences === void 0 ? void 0 : preferences.dark) || _themeConfig.themeStateDefaults['dark'],
               light: (preferences === null || preferences === void 0 ? void 0 : preferences.light) || _themeConfig.themeStateDefaults['light'],
-              shape: (preferences === null || preferences === void 0 ? void 0 : preferences.shape) || _themeConfig.themeStateDefaults['shape'],
+              shape: (preferences === null || preferences === void 0 ? void 0 : preferences.shape) || _themeConfig.themeStateDefaults['shape'](),
               spacing: (preferences === null || preferences === void 0 ? void 0 : preferences.spacing) || _themeConfig.themeStateDefaults['spacing'],
               typography: (preferences === null || preferences === void 0 ? void 0 : preferences.typography) || _themeConfig.themeStateDefaults['typography']()
             };

package/dist/cjs/set-global-theme.js

@@ -83,8 +83,9 @@ var setGlobalTheme = /*#__PURE__*/function () {
           nextThemeState = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : {};
           themeLoader = _args3.length > 1 ? _args3[1] : undefined;
           _ref2 = typeof nextThemeState === 'function' ? nextThemeState(_objectSpread(_objectSpread({}, _themeConfig.themeStateDefaults), {}, {
-            typography: _themeConfig.themeStateDefaults['typography']()
-          }, (0, _getGlobalTheme.default)())) : nextThemeState, _ref2$colorMode = _ref2.colorMode, colorMode = _ref2$colorMode === void 0 ? _themeConfig.themeStateDefaults['colorMode'] : _ref2$colorMode, _ref2$contrastMode = _ref2.contrastMode, contrastMode = _ref2$contrastMode === void 0 ? _themeConfig.themeStateDefaults['contrastMode'] : _ref2$contrastMode, _ref2$dark = _ref2.dark, dark = _ref2$dark === void 0 ? _themeConfig.themeStateDefaults['dark'] : _ref2$dark, _ref2$light = _ref2.light, light = _ref2$light === void 0 ? _themeConfig.themeStateDefaults['light'] : _ref2$light, _ref2$shape = _ref2.shape, shape = _ref2$shape === void 0 ? _themeConfig.themeStateDefaults['shape'] : _ref2$shape, _ref2$spacing = _ref2.spacing, spacing = _ref2$spacing === void 0 ? _themeConfig.themeStateDefaults['spacing'] : _ref2$spacing, _ref2$typography = _ref2.typography, typography = _ref2$typography === void 0 ? _themeConfig.themeStateDefaults['typography']() : _ref2$typography, _ref2$UNSAFE_themeOpt = _ref2.UNSAFE_themeOptions, UNSAFE_themeOptions = _ref2$UNSAFE_themeOpt === void 0 ? _themeConfig.themeStateDefaults['UNSAFE_themeOptions'] : _ref2$UNSAFE_themeOpt; // CLEANUP: Remove. This blocks application of increased contrast themes
+            typography: _themeConfig.themeStateDefaults['typography'](),
+            shape: _themeConfig.themeStateDefaults['shape']()
+          }, (0, _getGlobalTheme.default)())) : nextThemeState, _ref2$colorMode = _ref2.colorMode, colorMode = _ref2$colorMode === void 0 ? _themeConfig.themeStateDefaults['colorMode'] : _ref2$colorMode, _ref2$contrastMode = _ref2.contrastMode, contrastMode = _ref2$contrastMode === void 0 ? _themeConfig.themeStateDefaults['contrastMode'] : _ref2$contrastMode, _ref2$dark = _ref2.dark, dark = _ref2$dark === void 0 ? _themeConfig.themeStateDefaults['dark'] : _ref2$dark, _ref2$light = _ref2.light, light = _ref2$light === void 0 ? _themeConfig.themeStateDefaults['light'] : _ref2$light, _ref2$shape = _ref2.shape, shape = _ref2$shape === void 0 ? _themeConfig.themeStateDefaults['shape']() : _ref2$shape, _ref2$spacing = _ref2.spacing, spacing = _ref2$spacing === void 0 ? _themeConfig.themeStateDefaults['spacing'] : _ref2$spacing, _ref2$typography = _ref2.typography, typography = _ref2$typography === void 0 ? _themeConfig.themeStateDefaults['typography']() : _ref2$typography, _ref2$UNSAFE_themeOpt = _ref2.UNSAFE_themeOptions, UNSAFE_themeOptions = _ref2$UNSAFE_themeOpt === void 0 ? _themeConfig.themeStateDefaults['UNSAFE_themeOptions'] : _ref2$UNSAFE_themeOpt; // CLEANUP: Remove. This blocks application of increased contrast themes
           // without the feature flag enabled.
           if (!(0, _platformFeatureFlags.fg)('platform_increased-contrast-themes')) {
             if (light === 'light-increased-contrast') {

package/dist/cjs/theme-config.js

@@ -220,7 +220,12 @@ var themeStateDefaults = exports.themeStateDefaults = {
   contrastMode: 'auto',
   dark: 'dark',
   light: 'light',
-  shape: undefined,
+  shape: function shape() {
+    if ((0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default')) {
+      return 'shape';
+    }
+    return undefined;
+  },
   spacing: 'spacing',
   typography: function typography() {
     if ((0, _platformFeatureFlags.fg)('platform-disable-default-typography')) {