@atlaskit/tokens 8.2.0 → 8.4.0

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

@@ -3,7 +3,7 @@
  *
  * 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
  */
 
@@ -134,9 +134,14 @@ export const 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]'],
@@ -147,21 +152,41 @@ export const 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'],
@@ -1192,6 +1217,21 @@ export const 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]'],
@@ -1222,6 +1262,21 @@ export const 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]'],
@@ -1252,6 +1307,21 @@ export const 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]'],
@@ -1282,6 +1352,21 @@ export const 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]'],
@@ -1312,6 +1397,21 @@ export const 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/es2019/get-theme-html-attrs.js

@@ -26,7 +26,7 @@ const getThemeHtmlAttrs = ({
   dark = themeStateDefaults['dark'],
   light = themeStateDefaults['light'],
   contrastMode = themeStateDefaults['contrastMode'],
-  shape = themeStateDefaults['shape'],
+  shape = themeStateDefaults['shape'](),
   spacing = themeStateDefaults['spacing'],
   typography = themeStateDefaults['typography'](),
   UNSAFE_themeOptions = themeStateDefaults['UNSAFE_themeOptions']

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

@@ -35,7 +35,7 @@ const getThemeStyles = async preferences => {
       contrastMode: (preferences === null || preferences === void 0 ? void 0 : preferences.contrastMode) || themeStateDefaults['contrastMode'],
       dark: (preferences === null || preferences === void 0 ? void 0 : preferences.dark) || themeStateDefaults['dark'],
       light: (preferences === null || preferences === void 0 ? void 0 : preferences.light) || themeStateDefaults['light'],
-      shape: (preferences === null || preferences === void 0 ? void 0 : preferences.shape) || themeStateDefaults['shape'],
+      shape: (preferences === null || preferences === void 0 ? void 0 : preferences.shape) || themeStateDefaults['shape'](),
       spacing: (preferences === null || preferences === void 0 ? void 0 : preferences.spacing) || themeStateDefaults['spacing'],
       typography: (preferences === null || preferences === void 0 ? void 0 : preferences.typography) || themeStateDefaults['typography']()
     };

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

@@ -34,13 +34,14 @@ const setGlobalTheme = async (nextThemeState = {}, themeLoader) => {
     contrastMode = themeStateDefaults['contrastMode'],
     dark = themeStateDefaults['dark'],
     light = themeStateDefaults['light'],
-    shape = themeStateDefaults['shape'],
+    shape = themeStateDefaults['shape'](),
     spacing = themeStateDefaults['spacing'],
     typography = themeStateDefaults['typography'](),
     UNSAFE_themeOptions = themeStateDefaults['UNSAFE_themeOptions']
   } = typeof nextThemeState === 'function' ? nextThemeState({
     ...themeStateDefaults,
     typography: themeStateDefaults['typography'](),
+    shape: themeStateDefaults['shape'](),
     ...getGlobalTheme()
   }) : nextThemeState;
 

package/dist/es2019/theme-config.js

@@ -215,7 +215,12 @@ export const themeStateDefaults = {
   contrastMode: 'auto',
   dark: 'dark',
   light: 'light',
-  shape: undefined,
+  shape: () => {
+    if (fg('platform-dst-shape-theme-default')) {
+      return 'shape';
+    }
+    return undefined;
+  },
   spacing: 'spacing',
   typography: () => {
     if (fg('platform-disable-default-typography')) {