@atlaskit/tokens 13.1.1 → 13.2.0

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

@@ -9,7 +9,7 @@ exports.tokens = void 0;
  *
  * Metadata for generation of `@atlaskit/ads-mcp` and https://atlassian.design/llms-tokens.txt.
  *
- * @codegen <<SignedSource::ecdf4f84ae7b36849943b200af52ee54>>
+ * @codegen <<SignedSource::620de1bdd9882e214dcc9ae141009ae7>>
  * @codegenCommand yarn build tokens
  */
 
@@ -1041,94 +1041,184 @@ var tokens = exports.tokens = [{
   }
 }, {
   name: 'color.border.accent.lime',
-  path: ['color', 'border', 'accent', 'lime'],
+  path: ['color', 'border', 'accent', 'lime', '[default]'],
   description: 'Use for lime borders on non-bold backgrounds when there is no meaning tied to the color.',
   exampleValue: '#6A9A23',
   usageGuidelines: {
     usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
     cssProperties: ['border-color', 'outline-color']
   }
+}, {
+  name: 'color.border.accent.lime.subtle',
+  path: ['color', 'border', 'accent', 'lime', 'subtle'],
+  description: 'Use for decorative lime borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#B3DF72',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
 }, {
   name: 'color.border.accent.red',
-  path: ['color', 'border', 'accent', 'red'],
+  path: ['color', 'border', 'accent', 'red', '[default]'],
   description: 'Use for red borders on non-bold backgrounds when there is no meaning tied to the color.',
   exampleValue: '#E2483D',
   usageGuidelines: {
     usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
     cssProperties: ['border-color', 'outline-color']
   }
+}, {
+  name: 'color.border.accent.red.subtle',
+  path: ['color', 'border', 'accent', 'red', 'subtle'],
+  description: 'Use for decorative red borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#FD9891',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
 }, {
   name: 'color.border.accent.orange',
-  path: ['color', 'border', 'accent', 'orange'],
+  path: ['color', 'border', 'accent', 'orange', '[default]'],
   description: 'Use for orange borders on non-bold backgrounds when there is no meaning tied to the color.',
   exampleValue: '#E06C00',
   usageGuidelines: {
     usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
     cssProperties: ['border-color', 'outline-color']
   }
+}, {
+  name: 'color.border.accent.orange.subtle',
+  path: ['color', 'border', 'accent', 'orange', 'subtle'],
+  description: 'Use for decorative orange borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#FBC828',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
 }, {
   name: 'color.border.accent.yellow',
-  path: ['color', 'border', 'accent', 'yellow'],
+  path: ['color', 'border', 'accent', 'yellow', '[default]'],
   description: 'Use for yellow borders on non-bold backgrounds when there is no meaning tied to the color.',
   exampleValue: '#B38600',
   usageGuidelines: {
     usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
     cssProperties: ['border-color', 'outline-color']
   }
+}, {
+  name: 'color.border.accent.yellow.subtle',
+  path: ['color', 'border', 'accent', 'yellow', 'subtle'],
+  description: 'Use for decorative yellow borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#EED12B',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
 }, {
   name: 'color.border.accent.green',
-  path: ['color', 'border', 'accent', 'green'],
+  path: ['color', 'border', 'accent', 'green', '[default]'],
   description: 'Use for green borders on non-bold backgrounds when there is no meaning tied to the color.',
   exampleValue: '#22A06B',
   usageGuidelines: {
     usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
     cssProperties: ['border-color', 'outline-color']
   }
+}, {
+  name: 'color.border.accent.green.subtle',
+  path: ['color', 'border', 'accent', 'green', 'subtle'],
+  description: 'Use for decorative green borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#7EE2B8',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
 }, {
   name: 'color.border.accent.teal',
-  path: ['color', 'border', 'accent', 'teal'],
+  path: ['color', 'border', 'accent', 'teal', '[default]'],
   description: 'Use for teal borders on non-bold backgrounds when there is no meaning tied to the color.',
   exampleValue: '#2898BD',
   usageGuidelines: {
     usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
     cssProperties: ['border-color', 'outline-color']
   }
+}, {
+  name: 'color.border.accent.teal.subtle',
+  path: ['color', 'border', 'accent', 'teal', 'subtle'],
+  description: 'Use for decorative teal borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#9DD9EE',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
 }, {
   name: 'color.border.accent.blue',
-  path: ['color', 'border', 'accent', 'blue'],
+  path: ['color', 'border', 'accent', 'blue', '[default]'],
   description: 'Use for blue borders on non-bold backgrounds when there is no meaning tied to the color.',
   exampleValue: '#357DE8',
   usageGuidelines: {
     usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
     cssProperties: ['border-color', 'outline-color']
   }
+}, {
+  name: 'color.border.accent.blue.subtle',
+  path: ['color', 'border', 'accent', 'blue', 'subtle'],
+  description: 'Use for decorative blue borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#8FB8F6',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
 }, {
   name: 'color.border.accent.purple',
-  path: ['color', 'border', 'accent', 'purple'],
+  path: ['color', 'border', 'accent', 'purple', '[default]'],
   description: 'Use for purple borders on non-bold backgrounds when there is no meaning tied to the color.',
   exampleValue: '#AF59E1',
   usageGuidelines: {
     usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
     cssProperties: ['border-color', 'outline-color']
   }
+}, {
+  name: 'color.border.accent.purple.subtle',
+  path: ['color', 'border', 'accent', 'purple', 'subtle'],
+  description: 'Use for decorative purple borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#D8A0F7',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
 }, {
   name: 'color.border.accent.magenta',
-  path: ['color', 'border', 'accent', 'magenta'],
+  path: ['color', 'border', 'accent', 'magenta', '[default]'],
   description: 'Use for magenta borders on non-bold backgrounds when there is no meaning tied to the color.',
   exampleValue: '#CD519D',
   usageGuidelines: {
     usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
     cssProperties: ['border-color', 'outline-color']
   }
+}, {
+  name: 'color.border.accent.magenta.subtle',
+  path: ['color', 'border', 'accent', 'magenta', 'subtle'],
+  description: 'Use for decorative magenta borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#F797D2',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
 }, {
   name: 'color.border.accent.gray',
-  path: ['color', 'border', 'accent', 'gray'],
+  path: ['color', 'border', 'accent', 'gray', '[default]'],
   description: 'Use for borders on non-bold gray accent backgrounds.',
   exampleValue: '#7D818A',
   usageGuidelines: {
     usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
     cssProperties: ['border-color', 'outline-color']
   }
+}, {
+  name: 'color.border.accent.gray.subtle',
+  path: ['color', 'border', 'accent', 'gray', 'subtle'],
+  description: 'Use for decorative gray borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#DDDEE1',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
 }, {
   name: 'color.border.disabled',
   path: ['color', 'border', 'disabled'],
@@ -1185,49 +1275,94 @@ var tokens = exports.tokens = [{
   }
 }, {
   name: 'color.border.danger',
-  path: ['color', 'border', 'danger'],
+  path: ['color', 'border', 'danger', '[default]'],
   description: 'Use for borders communicating critical information, such as the borders on invalid text fields.',
   exampleValue: '#E2483D',
   usageGuidelines: {
     usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
     cssProperties: ['border-color', 'outline-color']
   }
+}, {
+  name: 'color.border.danger.subtle',
+  path: ['color', 'border', 'danger', 'subtle'],
+  description: 'Use for decorative danger borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#FD9891',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
 }, {
   name: 'color.border.warning',
-  path: ['color', 'border', 'warning'],
+  path: ['color', 'border', 'warning', '[default]'],
   description: 'Use for borders communicating caution.',
   exampleValue: '#E06C00',
   usageGuidelines: {
     usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
     cssProperties: ['border-color', 'outline-color']
   }
+}, {
+  name: 'color.border.warning.subtle',
+  path: ['color', 'border', 'warning', 'subtle'],
+  description: 'Use for decorative warning borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#FBC828',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
 }, {
   name: 'color.border.success',
-  path: ['color', 'border', 'success'],
+  path: ['color', 'border', 'success', '[default]'],
   description: 'Use for borders communicating a favorable outcome, such as the borders on validated text fields.',
   exampleValue: '#6A9A23',
   usageGuidelines: {
     usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
     cssProperties: ['border-color', 'outline-color']
   }
+}, {
+  name: 'color.border.success.subtle',
+  path: ['color', 'border', 'success', 'subtle'],
+  description: 'Use for decorative success borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#B3DF72',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
 }, {
   name: 'color.border.discovery',
-  path: ['color', 'border', 'discovery'],
+  path: ['color', 'border', 'discovery', '[default]'],
   description: 'Use for borders communicating change or something new, such as the borders in onboarding spotlights.',
   exampleValue: '#AF59E1',
   usageGuidelines: {
     usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
     cssProperties: ['border-color', 'outline-color']
   }
+}, {
+  name: 'color.border.discovery.subtle',
+  path: ['color', 'border', 'discovery', 'subtle'],
+  description: 'Use for decorative discovery borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#D8A0F7',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
 }, {
   name: 'color.border.information',
-  path: ['color', 'border', 'information'],
+  path: ['color', 'border', 'information', '[default]'],
   description: 'Use for borders communicating information or something in-progress.',
   exampleValue: '#357DE8',
   usageGuidelines: {
     usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
     cssProperties: ['border-color', 'outline-color']
   }
+}, {
+  name: 'color.border.information.subtle',
+  path: ['color', 'border', 'information', 'subtle'],
+  description: 'Use for decorative information borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#8FB8F6',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
 }, {
   name: 'color.border.bold',
   path: ['color', 'border', 'bold'],
@@ -2650,6 +2785,15 @@ var tokens = exports.tokens = [{
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
+}, {
+  name: 'color.background.danger.subtle',
+  path: ['color', 'background', 'danger', 'subtle', '[default]'],
+  description: 'Background colour for non-interactive elements communicating critical danger information (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.danger.bold or color.background.danger.subtler for interactive states.',
+  exampleValue: '#FD9891',
+  usageGuidelines: {
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
+  }
 }, {
   name: 'color.background.danger.bold',
   path: ['color', 'background', 'danger', 'bold', '[default]'],
@@ -2731,6 +2875,15 @@ var tokens = exports.tokens = [{
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
+}, {
+  name: 'color.background.warning.subtle',
+  path: ['color', 'background', 'warning', 'subtle', '[default]'],
+  description: 'Background colour for non-interactive elements communicating caution (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.warning.bold or color.background.warning.subtler for interactive states.',
+  exampleValue: '#FBD779',
+  usageGuidelines: {
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
+  }
 }, {
   name: 'color.background.warning.bold',
   path: ['color', 'background', 'warning', 'bold', '[default]'],
@@ -2812,6 +2965,15 @@ var tokens = exports.tokens = [{
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
+}, {
+  name: 'color.background.success.subtle',
+  path: ['color', 'background', 'success', 'subtle', '[default]'],
+  description: 'Background colour for non-interactive elements communicating success (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.success.bold or color.background.success.subtler for interactive states.',
+  exampleValue: '#B3DF72',
+  usageGuidelines: {
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
+  }
 }, {
   name: 'color.background.success.bold',
   path: ['color', 'background', 'success', 'bold', '[default]'],
@@ -2893,6 +3055,15 @@ var tokens = exports.tokens = [{
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
+}, {
+  name: 'color.background.discovery.subtle',
+  path: ['color', 'background', 'discovery', 'subtle', '[default]'],
+  description: 'Background colour for non-interactive elements communicating discovery (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.discovery.bold or color.background.discovery.subtler for interactive states.',
+  exampleValue: '#D8A0F7',
+  usageGuidelines: {
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
+  }
 }, {
   name: 'color.background.discovery.bold',
   path: ['color', 'background', 'discovery', 'bold', '[default]'],
@@ -2974,6 +3145,15 @@ var tokens = exports.tokens = [{
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
+}, {
+  name: 'color.background.information.subtle',
+  path: ['color', 'background', 'information', 'subtle', '[default]'],
+  description: 'Background colour for non-interactive elements communicating information (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.information.bold or color.background.information.subtler for interactive states.',
+  exampleValue: '#8FB8F6',
+  usageGuidelines: {
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
+  }
 }, {
   name: 'color.background.information.bold',
   path: ['color', 'background', 'information', 'bold', '[default]'],