@atlaskit/ads-mcp 0.17.0 → 0.17.2

package/dist/cjs/tools/get-tokens/token-mcp-structured-content.codegen.js

@@ -1,2356 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.tokenMcpStructuredContent = void 0;
-/**
- * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- *
- * Structured content for MCP (JSON) for tokens from token-metadata.
- *
- * @codegen <<SignedSource::1373abb13616c49e336b0e694b149fe8>>
- * @codegenCommand yarn build structured-docs
- */
-
-var tokenMcpStructuredContent = exports.tokenMcpStructuredContent = [{
-  content: '{"name":"color.text","description":"Use for primary text, such as body copy, sentence case headers, and buttons."}',
-  name: 'color.text',
-  description: 'Use for primary text, such as body copy, sentence case headers, and buttons.',
-  exampleValue: '#292A2E'
-}, {
-  content: '{"name":"color.text.accent.lime","description":"Use for lime text on subtlest and subtler lime accent backgrounds when there is no meaning tied to the color."}',
-  name: 'color.text.accent.lime',
-  description: 'Use for lime text on subtlest and subtler lime accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#4C6B1F'
-}, {
-  content: '{"name":"color.text.accent.lime.bolder","description":"Use for lime text on subtle lime accent backgrounds when there is no meaning tied to the color."}',
-  name: 'color.text.accent.lime.bolder',
-  description: 'Use for lime text on subtle lime accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#37471F'
-}, {
-  content: '{"name":"color.text.accent.red","description":"Use for red text on subtlest and subtler red accent backgrounds when there is no meaning tied to the color."}',
-  name: 'color.text.accent.red',
-  description: 'Use for red text on subtlest and subtler red accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#AE2E24'
-}, {
-  content: '{"name":"color.text.accent.red.bolder","description":"Use for red text on subtle red accent backgrounds when there is no meaning tied to the color."}',
-  name: 'color.text.accent.red.bolder',
-  description: 'Use for red text on subtle red accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#5D1F1A'
-}, {
-  content: '{"name":"color.text.accent.orange","description":"Use for orange text on subtlest and subtler orange accent backgrounds when there is no meaning tied to the color."}',
-  name: 'color.text.accent.orange',
-  description: 'Use for orange text on subtlest and subtler orange accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#9E4C00'
-}, {
-  content: '{"name":"color.text.accent.orange.bolder","description":"Use for orange text on subtle orange accent backgrounds when there is no meaning tied to the color."}',
-  name: 'color.text.accent.orange.bolder',
-  description: 'Use for orange text on subtle orange accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#693200'
-}, {
-  content: '{"name":"color.text.accent.yellow","description":"Use for yellow text on subtlest and subtler yellow accent backgrounds when there is no meaning tied to the color."}',
-  name: 'color.text.accent.yellow',
-  description: 'Use for yellow text on subtlest and subtler yellow accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#7F5F01'
-}, {
-  content: '{"name":"color.text.accent.yellow.bolder","description":"Use for yellow text on subtle yellow accent backgrounds when there is no meaning tied to the color."}',
-  name: 'color.text.accent.yellow.bolder',
-  description: 'Use for yellow text on subtle yellow accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#533F04'
-}, {
-  content: '{"name":"color.text.accent.green","description":"Use for green text on subtlest and subtler green accent backgrounds when there is no meaning tied to the color."}',
-  name: 'color.text.accent.green',
-  description: 'Use for green text on subtlest and subtler green accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#216E4E'
-}, {
-  content: '{"name":"color.text.accent.green.bolder","description":"Use for green text on subtle green accent backgrounds when there is no meaning tied to the color."}',
-  name: 'color.text.accent.green.bolder',
-  description: 'Use for green text on subtle green accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#164B35'
-}, {
-  content: '{"name":"color.text.accent.teal","description":"Use for teal text on subtlest and subtler teal accent backgrounds when there is no meaning tied to the color."}',
-  name: 'color.text.accent.teal',
-  description: 'Use for teal text on subtlest and subtler teal accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#206A83'
-}, {
-  content: '{"name":"color.text.accent.teal.bolder","description":"Use for teal text on subtle teal accent backgrounds when there is no meaning tied to the color."}',
-  name: 'color.text.accent.teal.bolder',
-  description: 'Use for teal text on subtle teal accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#164555'
-}, {
-  content: '{"name":"color.text.accent.blue","description":"Use for blue text on subtlest and subtler blue accent backgrounds when there is no meaning tied to the color."}',
-  name: 'color.text.accent.blue',
-  description: 'Use for blue text on subtlest and subtler blue accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#1558BC'
-}, {
-  content: '{"name":"color.text.accent.blue.bolder","description":"Use for blue text on subtle blue accent backgrounds when there is no meaning tied to the color."}',
-  name: 'color.text.accent.blue.bolder',
-  description: 'Use for blue text on subtle blue accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#123263'
-}, {
-  content: '{"name":"color.text.accent.purple","description":"Use for purple text on subtlest and subtler purple accent backgrounds when there is no meaning tied to the color."}',
-  name: 'color.text.accent.purple',
-  description: 'Use for purple text on subtlest and subtler purple accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#803FA5'
-}, {
-  content: '{"name":"color.text.accent.purple.bolder","description":"Use for purple text on subtle purple accent backgrounds when there is no meaning tied to the color."}',
-  name: 'color.text.accent.purple.bolder',
-  description: 'Use for purple text on subtle purple accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#48245D'
-}, {
-  content: '{"name":"color.text.accent.magenta","description":"Use for magenta text on subtlest and subtler magenta accent backgrounds when there is no meaning tied to the color."}',
-  name: 'color.text.accent.magenta',
-  description: 'Use for magenta text on subtlest and subtler magenta accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#943D73'
-}, {
-  content: '{"name":"color.text.accent.magenta.bolder","description":"Use for magenta text on subtle magenta accent backgrounds when there is no meaning tied to the color."}',
-  name: 'color.text.accent.magenta.bolder',
-  description: 'Use for magenta text on subtle magenta accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#50253F'
-}, {
-  content: '{"name":"color.text.accent.gray","description":"Use for text on non-bold gray accent backgrounds, such as colored tags."}',
-  name: 'color.text.accent.gray',
-  description: 'Use for text on non-bold gray accent backgrounds, such as colored tags.',
-  exampleValue: '#505258'
-}, {
-  content: '{"name":"color.text.accent.gray.bolder","description":"Use for text and icons on gray subtle accent backgrounds."}',
-  name: 'color.text.accent.gray.bolder',
-  description: 'Use for text and icons on gray subtle accent backgrounds.',
-  exampleValue: '#1E1F21'
-}, {
-  content: '{"name":"color.text.disabled","description":"Use for text in a disabled state."}',
-  name: 'color.text.disabled',
-  description: 'Use for text in a disabled state.',
-  exampleValue: '#080F214A'
-}, {
-  content: '{"name":"color.text.inverse","description":"Use for text on bold backgrounds."}',
-  name: 'color.text.inverse',
-  description: 'Use for text on bold backgrounds.',
-  exampleValue: '#FFFFFF'
-}, {
-  content: '{"name":"color.text.selected","description":"Use for text in selected or opened states, such as tabs and dropdown buttons."}',
-  name: 'color.text.selected',
-  description: 'Use for text in selected or opened states, such as tabs and dropdown buttons.',
-  exampleValue: '#1868DB'
-}, {
-  content: '{"name":"color.text.brand","description":"Use for text that reinforces our brand."}',
-  name: 'color.text.brand',
-  description: 'Use for text that reinforces our brand.',
-  exampleValue: '#1868DB'
-}, {
-  content: '{"name":"color.text.danger","description":"Use for critical text, such as input field error messaging."}',
-  name: 'color.text.danger',
-  description: 'Use for critical text, such as input field error messaging.',
-  exampleValue: '#AE2E24'
-}, {
-  content: '{"name":"color.text.danger.bolder","description":"Use for text on top of danger semantic labels to ensure accessibility and desired visual appearance."}',
-  name: 'color.text.danger.bolder',
-  description: 'Use for text on top of danger semantic labels to ensure accessibility and desired visual appearance.',
-  exampleValue: '#5D1F1A'
-}, {
-  content: '{"name":"color.text.warning","description":"Use for text to emphasize caution, such as in moved lozenges."}',
-  name: 'color.text.warning',
-  description: 'Use for text to emphasize caution, such as in moved lozenges.',
-  exampleValue: '#9E4C00'
-}, {
-  content: '{"name":"color.text.warning.inverse","description":"Use for text when on bold warning backgrounds."}',
-  name: 'color.text.warning.inverse',
-  description: 'Use for text when on bold warning backgrounds.',
-  exampleValue: '#292A2E'
-}, {
-  content: '{"name":"color.text.warning.bolder","description":"Use for text on top of warning semantic labels to ensure accessibility and desired visual appearance."}',
-  name: 'color.text.warning.bolder',
-  description: 'Use for text on top of warning semantic labels to ensure accessibility and desired visual appearance.',
-  exampleValue: '#693200'
-}, {
-  content: '{"name":"color.text.success","description":"Use for text to communicate a favorable outcome, such as input field success messaging."}',
-  name: 'color.text.success',
-  description: 'Use for text to communicate a favorable outcome, such as input field success messaging.',
-  exampleValue: '#4C6B1F'
-}, {
-  content: '{"name":"color.text.success.bolder","description":"Use for text on top of success semantic labels to ensure accessibility and desired visual appearance."}',
-  name: 'color.text.success.bolder',
-  description: 'Use for text on top of success semantic labels to ensure accessibility and desired visual appearance.',
-  exampleValue: '#37471F'
-}, {
-  content: '{"name":"color.text.discovery","description":"Use for text to emphasize change or something new, such as in new lozenges."}',
-  name: 'color.text.discovery',
-  description: 'Use for text to emphasize change or something new, such as in new lozenges.',
-  exampleValue: '#803FA5'
-}, {
-  content: '{"name":"color.text.discovery.bolder","description":"Use for text on top of discovery semantic labels to ensure accessibility and desired visual appearance."}',
-  name: 'color.text.discovery.bolder',
-  description: 'Use for text on top of discovery semantic labels to ensure accessibility and desired visual appearance.',
-  exampleValue: '#48245D'
-}, {
-  content: '{"name":"color.text.information","description":"Use for informative text or to communicate something is in progress, such as in-progress lozenges."}',
-  name: 'color.text.information',
-  description: 'Use for informative text or to communicate something is in progress, such as in-progress lozenges.',
-  exampleValue: '#1558BC'
-}, {
-  content: '{"name":"color.text.information.bolder","description":"Use for text on top of information semantic labels to ensure accessibility and desired visual appearance."}',
-  name: 'color.text.information.bolder',
-  description: 'Use for text on top of information semantic labels to ensure accessibility and desired visual appearance.',
-  exampleValue: '#123263'
-}, {
-  content: '{"name":"color.text.subtlest","description":"Use for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text."}',
-  name: 'color.text.subtlest',
-  description: 'Use for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text.',
-  exampleValue: '#6B6E76'
-}, {
-  content: '{"name":"color.text.subtle","description":"Use for secondary text, such as navigation, subtle button links, input field labels, and all caps subheadings."}',
-  name: 'color.text.subtle',
-  description: 'Use for secondary text, such as navigation, subtle button links, input field labels, and all caps subheadings.',
-  exampleValue: '#505258'
-}, {
-  content: '{"name":"color.link","description":"Use for links in a default or hovered state. Add an underline for hovered states."}',
-  name: 'color.link',
-  description: 'Use for links in a default or hovered state. Add an underline for hovered states.',
-  exampleValue: '#1868DB'
-}, {
-  content: '{"name":"color.link.pressed","description":"Use for links in a pressed state."}',
-  name: 'color.link.pressed',
-  description: 'Use for links in a pressed state.',
-  exampleValue: '#1558BC'
-}, {
-  content: '{"name":"color.link.visited","description":"Use for visited links."}',
-  name: 'color.link.visited',
-  description: 'Use for visited links.',
-  exampleValue: '#803FA5'
-}, {
-  content: '{"name":"color.link.visited.pressed","description":"Use for visited links in a pressed state."}',
-  name: 'color.link.visited.pressed',
-  description: 'Use for visited links in a pressed state.',
-  exampleValue: '#48245D'
-}, {
-  content: '{"name":"color.icon","description":"Use for icon-only buttons, or icons paired with color.text"}',
-  name: 'color.icon',
-  description: 'Use for icon-only buttons, or icons paired with color.text',
-  exampleValue: '#292A2E'
-}, {
-  content: '{"name":"color.icon.accent.lime","description":"Use for lime icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons."}',
-  name: 'color.icon.accent.lime',
-  description: 'Use for lime icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
-  exampleValue: '#6A9A23'
-}, {
-  content: '{"name":"color.icon.accent.red","description":"Use for red icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons."}',
-  name: 'color.icon.accent.red',
-  description: 'Use for red icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
-  exampleValue: '#C9372C'
-}, {
-  content: '{"name":"color.icon.accent.orange","description":"Use for orange icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons."}',
-  name: 'color.icon.accent.orange',
-  description: 'Use for orange icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
-  exampleValue: '#E06C00'
-}, {
-  content: '{"name":"color.icon.accent.yellow","description":"Use for yellow icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons."}',
-  name: 'color.icon.accent.yellow',
-  description: 'Use for yellow icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
-  exampleValue: '#B38600'
-}, {
-  content: '{"name":"color.icon.accent.green","description":"Use for green icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons."}',
-  name: 'color.icon.accent.green',
-  description: 'Use for green icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
-  exampleValue: '#22A06B'
-}, {
-  content: '{"name":"color.icon.accent.teal","description":"Use for teal icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons."}',
-  name: 'color.icon.accent.teal',
-  description: 'Use for teal icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
-  exampleValue: '#2898BD'
-}, {
-  content: '{"name":"color.icon.accent.blue","description":"Use for blue icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons."}',
-  name: 'color.icon.accent.blue',
-  description: 'Use for blue icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
-  exampleValue: '#357DE8'
-}, {
-  content: '{"name":"color.icon.accent.purple","description":"Use for purple icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons."}',
-  name: 'color.icon.accent.purple',
-  description: 'Use for purple icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
-  exampleValue: '#AF59E1'
-}, {
-  content: '{"name":"color.icon.accent.magenta","description":"Use for magenta icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons."}',
-  name: 'color.icon.accent.magenta',
-  description: 'Use for magenta icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
-  exampleValue: '#CD519D'
-}, {
-  content: '{"name":"color.icon.accent.gray","description":"Use for icons on non-bold gray accent backgrounds, such as file type icons."}',
-  name: 'color.icon.accent.gray',
-  description: 'Use for icons on non-bold gray accent backgrounds, such as file type icons.',
-  exampleValue: '#7D818A'
-}, {
-  content: '{"name":"color.icon.disabled","description":"Use for icons in a disabled state."}',
-  name: 'color.icon.disabled',
-  description: 'Use for icons in a disabled state.',
-  exampleValue: '#080F214A'
-}, {
-  content: '{"name":"color.icon.inverse","description":"Use for icons on bold backgrounds."}',
-  name: 'color.icon.inverse',
-  description: 'Use for icons on bold backgrounds.',
-  exampleValue: '#FFFFFF'
-}, {
-  content: '{"name":"color.icon.selected","description":"Use for icons in selected or opened states, such as those used in dropdown buttons."}',
-  name: 'color.icon.selected',
-  description: 'Use for icons in selected or opened states, such as those used in dropdown buttons.',
-  exampleValue: '#1868DB'
-}, {
-  content: '{"name":"color.icon.brand","description":"Use for icons that reinforce our brand."}',
-  name: 'color.icon.brand',
-  description: 'Use for icons that reinforce our brand.',
-  exampleValue: '#1868DB'
-}, {
-  content: '{"name":"color.icon.danger","description":"Use for icons communicating critical information, such as those used in error handing."}',
-  name: 'color.icon.danger',
-  description: 'Use for icons communicating critical information, such as those used in error handing.',
-  exampleValue: '#C9372C'
-}, {
-  content: '{"name":"color.icon.warning","description":"Use for icons communicating caution, such as those used in warning section messages."}',
-  name: 'color.icon.warning',
-  description: 'Use for icons communicating caution, such as those used in warning section messages.',
-  exampleValue: '#E06C00'
-}, {
-  content: '{"name":"color.icon.warning.inverse","description":"Use for icons when on bold warning backgrounds."}',
-  name: 'color.icon.warning.inverse',
-  description: 'Use for icons when on bold warning backgrounds.',
-  exampleValue: '#292A2E'
-}, {
-  content: '{"name":"color.icon.success","description":"Use for icons communicating a favorable outcome, such as those used in success section messaged."}',
-  name: 'color.icon.success',
-  description: 'Use for icons communicating a favorable outcome, such as those used in success section messaged.',
-  exampleValue: '#6A9A23'
-}, {
-  content: '{"name":"color.icon.discovery","description":"Use for icons communicating change or something new, such as discovery section messages."}',
-  name: 'color.icon.discovery',
-  description: 'Use for icons communicating change or something new, such as discovery section messages.',
-  exampleValue: '#AF59E1'
-}, {
-  content: '{"name":"color.icon.information","description":"Use for icons communicating information or something in-progress, such as information section messages."}',
-  name: 'color.icon.information',
-  description: 'Use for icons communicating information or something in-progress, such as information section messages.',
-  exampleValue: '#357DE8'
-}, {
-  content: '{"name":"color.icon.subtlest","description":"Use for icons paired with color.text.subtlest"}',
-  name: 'color.icon.subtlest',
-  description: 'Use for icons paired with color.text.subtlest',
-  exampleValue: '#6B6E76'
-}, {
-  content: '{"name":"color.icon.subtle","description":"Use for icons paired with color.text.subtle"}',
-  name: 'color.icon.subtle',
-  description: 'Use for icons paired with color.text.subtle',
-  exampleValue: '#505258'
-}, {
-  content: '{"name":"color.border","description":"Use to visually group or separate UI elements, such as flat cards or side panel dividers."}',
-  name: 'color.border',
-  description: 'Use to visually group or separate UI elements, such as flat cards or side panel dividers.',
-  exampleValue: '#0B120E24'
-}, {
-  content: '{"name":"color.border.accent.lime","description":"Use for lime borders on non-bold backgrounds when there is no meaning tied to the color."}',
-  name: 'color.border.accent.lime',
-  description: 'Use for lime borders on non-bold backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#6A9A23'
-}, {
-  content: '{"name":"color.border.accent.red","description":"Use for red borders on non-bold backgrounds when there is no meaning tied to the color."}',
-  name: 'color.border.accent.red',
-  description: 'Use for red borders on non-bold backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#E2483D'
-}, {
-  content: '{"name":"color.border.accent.orange","description":"Use for orange borders on non-bold backgrounds when there is no meaning tied to the color."}',
-  name: 'color.border.accent.orange',
-  description: 'Use for orange borders on non-bold backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#E06C00'
-}, {
-  content: '{"name":"color.border.accent.yellow","description":"Use for yellow borders on non-bold backgrounds when there is no meaning tied to the color."}',
-  name: 'color.border.accent.yellow',
-  description: 'Use for yellow borders on non-bold backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#B38600'
-}, {
-  content: '{"name":"color.border.accent.green","description":"Use for green borders on non-bold backgrounds when there is no meaning tied to the color."}',
-  name: 'color.border.accent.green',
-  description: 'Use for green borders on non-bold backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#22A06B'
-}, {
-  content: '{"name":"color.border.accent.teal","description":"Use for teal borders on non-bold backgrounds when there is no meaning tied to the color."}',
-  name: 'color.border.accent.teal',
-  description: 'Use for teal borders on non-bold backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#2898BD'
-}, {
-  content: '{"name":"color.border.accent.blue","description":"Use for blue borders on non-bold backgrounds when there is no meaning tied to the color."}',
-  name: 'color.border.accent.blue',
-  description: 'Use for blue borders on non-bold backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#357DE8'
-}, {
-  content: '{"name":"color.border.accent.purple","description":"Use for purple borders on non-bold backgrounds when there is no meaning tied to the color."}',
-  name: 'color.border.accent.purple',
-  description: 'Use for purple borders on non-bold backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#AF59E1'
-}, {
-  content: '{"name":"color.border.accent.magenta","description":"Use for magenta borders on non-bold backgrounds when there is no meaning tied to the color."}',
-  name: 'color.border.accent.magenta',
-  description: 'Use for magenta borders on non-bold backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#CD519D'
-}, {
-  content: '{"name":"color.border.accent.gray","description":"Use for borders on non-bold gray accent backgrounds."}',
-  name: 'color.border.accent.gray',
-  description: 'Use for borders on non-bold gray accent backgrounds.',
-  exampleValue: '#7D818A'
-}, {
-  content: '{"name":"color.border.disabled","description":"Use for borders of elements in a disabled state."}',
-  name: 'color.border.disabled',
-  description: 'Use for borders of elements in a disabled state.',
-  exampleValue: '#0515240F'
-}, {
-  content: '{"name":"color.border.focused","description":"Use for focus rings of elements in a focus state."}',
-  name: 'color.border.focused',
-  description: 'Use for focus rings of elements in a focus state.',
-  exampleValue: '#4688EC'
-}, {
-  content: '{"name":"color.border.input","description":"Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons."}',
-  name: 'color.border.input',
-  description: 'Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons.',
-  exampleValue: '#8C8F97'
-}, {
-  content: '{"name":"color.border.inverse","description":"Use for borders on bold backgrounds."}',
-  name: 'color.border.inverse',
-  description: 'Use for borders on bold backgrounds.',
-  exampleValue: '#FFFFFF'
-}, {
-  content: '{"name":"color.border.selected","description":"Use for borders or visual indicators of elements in a selected or opened state, such as in tabs or menu items."}',
-  name: 'color.border.selected',
-  description: 'Use for borders or visual indicators of elements in a selected or opened state, such as in tabs or menu items.',
-  exampleValue: '#1868DB'
-}, {
-  content: '{"name":"color.border.brand","description":"Use for borders or visual indicators of elements that reinforce our brand, such as logos or primary buttons."}',
-  name: 'color.border.brand',
-  description: 'Use for borders or visual indicators of elements that reinforce our brand, such as logos or primary buttons.',
-  exampleValue: '#1868DB'
-}, {
-  content: '{"name":"color.border.danger","description":"Use for borders communicating critical information, such as the borders on invalid text fields."}',
-  name: 'color.border.danger',
-  description: 'Use for borders communicating critical information, such as the borders on invalid text fields.',
-  exampleValue: '#E2483D'
-}, {
-  content: '{"name":"color.border.warning","description":"Use for borders communicating caution."}',
-  name: 'color.border.warning',
-  description: 'Use for borders communicating caution.',
-  exampleValue: '#E06C00'
-}, {
-  content: '{"name":"color.border.success","description":"Use for borders communicating a favorable outcome, such as the borders on validated text fields."}',
-  name: 'color.border.success',
-  description: 'Use for borders communicating a favorable outcome, such as the borders on validated text fields.',
-  exampleValue: '#6A9A23'
-}, {
-  content: '{"name":"color.border.discovery","description":"Use for borders communicating change or something new, such as the borders in onboarding spotlights."}',
-  name: 'color.border.discovery',
-  description: 'Use for borders communicating change or something new, such as the borders in onboarding spotlights.',
-  exampleValue: '#AF59E1'
-}, {
-  content: '{"name":"color.border.information","description":"Use for borders communicating information or something in-progress."}',
-  name: 'color.border.information',
-  description: 'Use for borders communicating information or something in-progress.',
-  exampleValue: '#357DE8'
-}, {
-  content: '{"name":"color.border.bold","description":"A neutral border option that passes min 3:1 contrast ratios."}',
-  name: 'color.border.bold',
-  description: 'A neutral border option that passes min 3:1 contrast ratios.',
-  exampleValue: '#7D818A'
-}, {
-  content: '{"name":"color.background.accent.lime.subtlest","description":"Use for for backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."}',
-  name: 'color.background.accent.lime.subtlest',
-  description: 'Use for for backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
-  exampleValue: '#EFFFD6'
-}, {
-  content: '{"name":"color.background.accent.lime.subtlest.hovered","description":"Hovered state of color.background.accent.lime.subtlest."}',
-  name: 'color.background.accent.lime.subtlest.hovered',
-  description: 'Hovered state of color.background.accent.lime.subtlest.',
-  exampleValue: '#D3F1A7'
-}, {
-  content: '{"name":"color.background.accent.lime.subtlest.pressed","description":"Pressed state of color.background.accent.lime.subtlest."}',
-  name: 'color.background.accent.lime.subtlest.pressed',
-  description: 'Pressed state of color.background.accent.lime.subtlest.',
-  exampleValue: '#BDE97C'
-}, {
-  content: '{"name":"color.background.accent.lime.subtler","description":"Use for for backgrounds when there is no meaning tied to the color, such as colored tags."}',
-  name: 'color.background.accent.lime.subtler',
-  description: 'Use for for backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#D3F1A7'
-}, {
-  content: '{"name":"color.background.accent.lime.subtler.hovered","description":"Hovered state of color.background.accent.lime.subtler."}',
-  name: 'color.background.accent.lime.subtler.hovered',
-  description: 'Hovered state of color.background.accent.lime.subtler.',
-  exampleValue: '#BDE97C'
-}, {
-  content: '{"name":"color.background.accent.lime.subtler.pressed","description":"Pressed state of color.background.accent.lime.subtler."}',
-  name: 'color.background.accent.lime.subtler.pressed',
-  description: 'Pressed state of color.background.accent.lime.subtler.',
-  exampleValue: '#B3DF72'
-}, {
-  content: '{"name":"color.background.accent.lime.subtle","description":"Use for vibrant for backgrounds when there is no meaning tied to the color, such as colored tags."}',
-  name: 'color.background.accent.lime.subtle',
-  description: 'Use for vibrant for backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#94C748'
-}, {
-  content: '{"name":"color.background.accent.lime.subtle.hovered","description":"Hovered state of color.background.accent.lime.subtle."}',
-  name: 'color.background.accent.lime.subtle.hovered',
-  description: 'Hovered state of color.background.accent.lime.subtle.',
-  exampleValue: '#B3DF72'
-}, {
-  content: '{"name":"color.background.accent.lime.subtle.pressed","description":"Pressed state of color.background.accent.lime.subtle."}',
-  name: 'color.background.accent.lime.subtle.pressed',
-  description: 'Pressed state of color.background.accent.lime.subtle.',
-  exampleValue: '#BDE97C'
-}, {
-  content: '{"name":"color.background.accent.lime.bolder","description":"Use for for backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."}',
-  name: 'color.background.accent.lime.bolder',
-  description: 'Use for for backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
-  exampleValue: '#5B7F24'
-}, {
-  content: '{"name":"color.background.accent.lime.bolder.hovered","description":"Hovered state of color.background.accent.lime.bolder."}',
-  name: 'color.background.accent.lime.bolder.hovered',
-  description: 'Hovered state of color.background.accent.lime.bolder.',
-  exampleValue: '#4C6B1F'
-}, {
-  content: '{"name":"color.background.accent.lime.bolder.pressed","description":"Pressed state of color.background.accent.lime.bolder."}',
-  name: 'color.background.accent.lime.bolder.pressed',
-  description: 'Pressed state of color.background.accent.lime.bolder.',
-  exampleValue: '#3F5224'
-}, {
-  content: '{"name":"color.background.accent.red.subtlest","description":"Use for red backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."}',
-  name: 'color.background.accent.red.subtlest',
-  description: 'Use for red backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
-  exampleValue: '#FFECEB'
-}, {
-  content: '{"name":"color.background.accent.red.subtlest.hovered","description":"Hovered state of color.background.accent.red.subtlest."}',
-  name: 'color.background.accent.red.subtlest.hovered',
-  description: 'Hovered state of color.background.accent.red.subtlest.',
-  exampleValue: '#FFD5D2'
-}, {
-  content: '{"name":"color.background.accent.red.subtlest.pressed","description":"Pressed state of color.background.accent.red.subtlest."}',
-  name: 'color.background.accent.red.subtlest.pressed',
-  description: 'Pressed state of color.background.accent.red.subtlest.',
-  exampleValue: '#FFB8B2'
-}, {
-  content: '{"name":"color.background.accent.red.subtler","description":"Use for red backgrounds when there is no meaning tied to the color, such as colored tags."}',
-  name: 'color.background.accent.red.subtler',
-  description: 'Use for red backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#FFD5D2'
-}, {
-  content: '{"name":"color.background.accent.red.subtler.hovered","description":"Hovered state of color.background.accent.red.subtler."}',
-  name: 'color.background.accent.red.subtler.hovered',
-  description: 'Hovered state of color.background.accent.red.subtler.',
-  exampleValue: '#FFB8B2'
-}, {
-  content: '{"name":"color.background.accent.red.subtler.pressed","description":"Pressed state of color.background.accent.red.subtler."}',
-  name: 'color.background.accent.red.subtler.pressed',
-  description: 'Pressed state of color.background.accent.red.subtler.',
-  exampleValue: '#FD9891'
-}, {
-  content: '{"name":"color.background.accent.red.subtle","description":"Use for vibrant red backgrounds when there is no meaning tied to the color, such as colored tags."}',
-  name: 'color.background.accent.red.subtle',
-  description: 'Use for vibrant red backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#F87168'
-}, {
-  content: '{"name":"color.background.accent.red.subtle.hovered","description":"Hovered state of color.background.accent.red.subtle."}',
-  name: 'color.background.accent.red.subtle.hovered',
-  description: 'Hovered state of color.background.accent.red.subtle.',
-  exampleValue: '#FD9891'
-}, {
-  content: '{"name":"color.background.accent.red.subtle.pressed","description":"Pressed state of color.background.accent.red.subtle."}',
-  name: 'color.background.accent.red.subtle.pressed',
-  description: 'Pressed state of color.background.accent.red.subtle.',
-  exampleValue: '#FFB8B2'
-}, {
-  content: '{"name":"color.background.accent.red.bolder","description":"Use for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."}',
-  name: 'color.background.accent.red.bolder',
-  description: 'Use for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
-  exampleValue: '#C9372C'
-}, {
-  content: '{"name":"color.background.accent.red.bolder.hovered","description":"Hovered state of color.background.accent.red.bolder."}',
-  name: 'color.background.accent.red.bolder.hovered',
-  description: 'Hovered state of color.background.accent.red.bolder.',
-  exampleValue: '#AE2E24'
-}, {
-  content: '{"name":"color.background.accent.red.bolder.pressed","description":"Pressed state of color.background.accent.red.bolder."}',
-  name: 'color.background.accent.red.bolder.pressed',
-  description: 'Pressed state of color.background.accent.red.bolder.',
-  exampleValue: '#872821'
-}, {
-  content: '{"name":"color.background.accent.orange.subtlest","description":"Use for orange backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."}',
-  name: 'color.background.accent.orange.subtlest',
-  description: 'Use for orange backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
-  exampleValue: '#FFF5DB'
-}, {
-  content: '{"name":"color.background.accent.orange.subtlest.hovered","description":"Hovered state of color.background.accent.orange.subtlest."}',
-  name: 'color.background.accent.orange.subtlest.hovered',
-  description: 'Hovered state of color.background.accent.orange.subtlest.',
-  exampleValue: '#FCE4A6'
-}, {
-  content: '{"name":"color.background.accent.orange.subtlest.pressed","description":"Pressed state of color.background.accent.orange.subtlest."}',
-  name: 'color.background.accent.orange.subtlest.pressed',
-  description: 'Pressed state of color.background.accent.orange.subtlest.',
-  exampleValue: '#FBD779'
-}, {
-  content: '{"name":"color.background.accent.orange.subtler","description":"Use for orange backgrounds when there is no meaning tied to the color, such as colored tags."}',
-  name: 'color.background.accent.orange.subtler',
-  description: 'Use for orange backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#FCE4A6'
-}, {
-  content: '{"name":"color.background.accent.orange.subtler.hovered","description":"Hovered state of color.background.accent.orange.subtler."}',
-  name: 'color.background.accent.orange.subtler.hovered',
-  description: 'Hovered state of color.background.accent.orange.subtler.',
-  exampleValue: '#FBD779'
-}, {
-  content: '{"name":"color.background.accent.orange.subtler.pressed","description":"Pressed state of color.background.accent.orange.subtler."}',
-  name: 'color.background.accent.orange.subtler.pressed',
-  description: 'Pressed state of color.background.accent.orange.subtler.',
-  exampleValue: '#FBC828'
-}, {
-  content: '{"name":"color.background.accent.orange.subtle","description":"Use for vibrant orange backgrounds when there is no meaning tied to the color, such as colored tags."}',
-  name: 'color.background.accent.orange.subtle',
-  description: 'Use for vibrant orange backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#FCA700'
-}, {
-  content: '{"name":"color.background.accent.orange.subtle.hovered","description":"Hovered state of color.background.accent.orange.subtle."}',
-  name: 'color.background.accent.orange.subtle.hovered',
-  description: 'Hovered state of color.background.accent.orange.subtle.',
-  exampleValue: '#FBC828'
-}, {
-  content: '{"name":"color.background.accent.orange.subtle.pressed","description":"Pressed state of color.background.accent.orange.subtle."}',
-  name: 'color.background.accent.orange.subtle.pressed',
-  description: 'Pressed state of color.background.accent.orange.subtle.',
-  exampleValue: '#FBD779'
-}, {
-  content: '{"name":"color.background.accent.orange.bolder","description":"Use for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."}',
-  name: 'color.background.accent.orange.bolder',
-  description: 'Use for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
-  exampleValue: '#BD5B00'
-}, {
-  content: '{"name":"color.background.accent.orange.bolder.hovered","description":"Hovered state of color.background.accent.orange.bolder."}',
-  name: 'color.background.accent.orange.bolder.hovered',
-  description: 'Hovered state of color.background.accent.orange.bolder.',
-  exampleValue: '#9E4C00'
-}, {
-  content: '{"name":"color.background.accent.orange.bolder.pressed","description":"Pressed state of color.background.accent.orange.bolder."}',
-  name: 'color.background.accent.orange.bolder.pressed',
-  description: 'Pressed state of color.background.accent.orange.bolder.',
-  exampleValue: '#7A3B00'
-}, {
-  content: '{"name":"color.background.accent.yellow.subtlest","description":"Use for yellow backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."}',
-  name: 'color.background.accent.yellow.subtlest',
-  description: 'Use for yellow backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
-  exampleValue: '#FEF7C8'
-}, {
-  content: '{"name":"color.background.accent.yellow.subtlest.hovered","description":"Hovered state of color.background.accent.yellow.subtlest."}',
-  name: 'color.background.accent.yellow.subtlest.hovered',
-  description: 'Hovered state of color.background.accent.yellow.subtlest.',
-  exampleValue: '#F5E989'
-}, {
-  content: '{"name":"color.background.accent.yellow.subtlest.pressed","description":"Pressed state of color.background.accent.yellow.subtlest."}',
-  name: 'color.background.accent.yellow.subtlest.pressed',
-  description: 'Pressed state of color.background.accent.yellow.subtlest.',
-  exampleValue: '#EFDD4E'
-}, {
-  content: '{"name":"color.background.accent.yellow.subtler","description":"Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags."}',
-  name: 'color.background.accent.yellow.subtler',
-  description: 'Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#F5E989'
-}, {
-  content: '{"name":"color.background.accent.yellow.subtler.hovered","description":"Hovered state of color.background.accent.yellow.subtler."}',
-  name: 'color.background.accent.yellow.subtler.hovered',
-  description: 'Hovered state of color.background.accent.yellow.subtler.',
-  exampleValue: '#EFDD4E'
-}, {
-  content: '{"name":"color.background.accent.yellow.subtler.pressed","description":"Pressed state of color.background.accent.yellow.subtler."}',
-  name: 'color.background.accent.yellow.subtler.pressed',
-  description: 'Pressed state of color.background.accent.yellow.subtler.',
-  exampleValue: '#EED12B'
-}, {
-  content: '{"name":"color.background.accent.yellow.subtle","description":"Use for vibrant yellow backgrounds when there is no meaning tied to the color, such as colored tags."}',
-  name: 'color.background.accent.yellow.subtle',
-  description: 'Use for vibrant yellow backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#EED12B'
-}, {
-  content: '{"name":"color.background.accent.yellow.subtle.hovered","description":"Hovered state of color.background.accent.yellow.subtle."}',
-  name: 'color.background.accent.yellow.subtle.hovered',
-  description: 'Hovered state of color.background.accent.yellow.subtle.',
-  exampleValue: '#DDB30E'
-}, {
-  content: '{"name":"color.background.accent.yellow.subtle.pressed","description":"Pressed state of color.background.accent.yellow.subtle."}',
-  name: 'color.background.accent.yellow.subtle.pressed',
-  description: 'Pressed state of color.background.accent.yellow.subtle.',
-  exampleValue: '#EFDD4E'
-}, {
-  content: '{"name":"color.background.accent.yellow.bolder","description":"Use for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."}',
-  name: 'color.background.accent.yellow.bolder',
-  description: 'Use for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
-  exampleValue: '#946F00'
-}, {
-  content: '{"name":"color.background.accent.yellow.bolder.hovered","description":"Hovered state of color.background.accent.yellow.bolder."}',
-  name: 'color.background.accent.yellow.bolder.hovered',
-  description: 'Hovered state of color.background.accent.yellow.bolder.',
-  exampleValue: '#7F5F01'
-}, {
-  content: '{"name":"color.background.accent.yellow.bolder.pressed","description":"Pressed state of color.background.accent.yellow.bolder."}',
-  name: 'color.background.accent.yellow.bolder.pressed',
-  description: 'Pressed state of color.background.accent.yellow.bolder.',
-  exampleValue: '#614A05'
-}, {
-  content: '{"name":"color.background.accent.green.subtlest","description":"Use for green backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."}',
-  name: 'color.background.accent.green.subtlest',
-  description: 'Use for green backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
-  exampleValue: '#DCFFF1'
-}, {
-  content: '{"name":"color.background.accent.green.subtlest.hovered","description":"Hovered state of color.background.accent.green.subtlest."}',
-  name: 'color.background.accent.green.subtlest.hovered',
-  description: 'Hovered state of color.background.accent.green.subtlest.',
-  exampleValue: '#BAF3DB'
-}, {
-  content: '{"name":"color.background.accent.green.subtlest.pressed","description":"Pressed state of color.background.accent.green.subtlest."}',
-  name: 'color.background.accent.green.subtlest.pressed',
-  description: 'Pressed state of color.background.accent.green.subtlest.',
-  exampleValue: '#97EDC9'
-}, {
-  content: '{"name":"color.background.accent.green.subtler","description":"Use for green backgrounds when there is no meaning tied to the color, such as colored tags."}',
-  name: 'color.background.accent.green.subtler',
-  description: 'Use for green backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#BAF3DB'
-}, {
-  content: '{"name":"color.background.accent.green.subtler.hovered","description":"Hovered state of color.background.accent.green.subtler."}',
-  name: 'color.background.accent.green.subtler.hovered',
-  description: 'Hovered state of color.background.accent.green.subtler.',
-  exampleValue: '#97EDC9'
-}, {
-  content: '{"name":"color.background.accent.green.subtler.pressed","description":"Pressed state of color.background.accent.green.subtler."}',
-  name: 'color.background.accent.green.subtler.pressed',
-  description: 'Pressed state of color.background.accent.green.subtler.',
-  exampleValue: '#7EE2B8'
-}, {
-  content: '{"name":"color.background.accent.green.subtle","description":"Use for vibrant green backgrounds when there is no meaning tied to the color, such as colored tags."}',
-  name: 'color.background.accent.green.subtle',
-  description: 'Use for vibrant green backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#4BCE97'
-}, {
-  content: '{"name":"color.background.accent.green.subtle.hovered","description":"Hovered state of color.background.accent.green.subtle."}',
-  name: 'color.background.accent.green.subtle.hovered',
-  description: 'Hovered state of color.background.accent.green.subtle.',
-  exampleValue: '#7EE2B8'
-}, {
-  content: '{"name":"color.background.accent.green.subtle.pressed","description":"Pressed state of color.background.accent.green.subtle."}',
-  name: 'color.background.accent.green.subtle.pressed',
-  description: 'Pressed state of color.background.accent.green.subtle.',
-  exampleValue: '#97EDC9'
-}, {
-  content: '{"name":"color.background.accent.green.bolder","description":"Use for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."}',
-  name: 'color.background.accent.green.bolder',
-  description: 'Use for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
-  exampleValue: '#1F845A'
-}, {
-  content: '{"name":"color.background.accent.green.bolder.hovered","description":"Hovered state of color.background.accent.green.bolder."}',
-  name: 'color.background.accent.green.bolder.hovered',
-  description: 'Hovered state of color.background.accent.green.bolder.',
-  exampleValue: '#216E4E'
-}, {
-  content: '{"name":"color.background.accent.green.bolder.pressed","description":"Pressed state of color.background.accent.green.bolder."}',
-  name: 'color.background.accent.green.bolder.pressed',
-  description: 'Pressed state of color.background.accent.green.bolder.',
-  exampleValue: '#19573D'
-}, {
-  content: '{"name":"color.background.accent.teal.subtlest","description":"Use for teal backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."}',
-  name: 'color.background.accent.teal.subtlest',
-  description: 'Use for teal backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
-  exampleValue: '#E7F9FF'
-}, {
-  content: '{"name":"color.background.accent.teal.subtlest.hovered","description":"Hovered state of color.background.accent.teal.subtlest."}',
-  name: 'color.background.accent.teal.subtlest.hovered',
-  description: 'Hovered state of color.background.accent.teal.subtlest.',
-  exampleValue: '#C6EDFB'
-}, {
-  content: '{"name":"color.background.accent.teal.subtlest.pressed","description":"Pressed state of color.background.accent.teal.subtlest."}',
-  name: 'color.background.accent.teal.subtlest.pressed',
-  description: 'Pressed state of color.background.accent.teal.subtlest.',
-  exampleValue: '#B1E4F7'
-}, {
-  content: '{"name":"color.background.accent.teal.subtler","description":"Use for teal backgrounds when there is no meaning tied to the color, such as colored tags."}',
-  name: 'color.background.accent.teal.subtler',
-  description: 'Use for teal backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#C6EDFB'
-}, {
-  content: '{"name":"color.background.accent.teal.subtler.hovered","description":"Hovered state of color.background.accent.teal.subtler."}',
-  name: 'color.background.accent.teal.subtler.hovered',
-  description: 'Hovered state of color.background.accent.teal.subtler.',
-  exampleValue: '#B1E4F7'
-}, {
-  content: '{"name":"color.background.accent.teal.subtler.pressed","description":"Pressed state of color.background.accent.teal.subtler."}',
-  name: 'color.background.accent.teal.subtler.pressed',
-  description: 'Pressed state of color.background.accent.teal.subtler.',
-  exampleValue: '#9DD9EE'
-}, {
-  content: '{"name":"color.background.accent.teal.subtle","description":"Use for vibrant teal backgrounds when there is no meaning tied to the color, such as colored tags."}',
-  name: 'color.background.accent.teal.subtle',
-  description: 'Use for vibrant teal backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#6CC3E0'
-}, {
-  content: '{"name":"color.background.accent.teal.subtle.hovered","description":"Hovered state of color.background.accent.teal.subtle."}',
-  name: 'color.background.accent.teal.subtle.hovered',
-  description: 'Hovered state of color.background.accent.teal.subtle.',
-  exampleValue: '#9DD9EE'
-}, {
-  content: '{"name":"color.background.accent.teal.subtle.pressed","description":"Pressed state of color.background.accent.teal.subtle."}',
-  name: 'color.background.accent.teal.subtle.pressed',
-  description: 'Pressed state of color.background.accent.teal.subtle.',
-  exampleValue: '#B1E4F7'
-}, {
-  content: '{"name":"color.background.accent.teal.bolder","description":"Use for teal backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."}',
-  name: 'color.background.accent.teal.bolder',
-  description: 'Use for teal backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
-  exampleValue: '#227D9B'
-}, {
-  content: '{"name":"color.background.accent.teal.bolder.hovered","description":"Hovered state of color.background.accent.teal.bolder."}',
-  name: 'color.background.accent.teal.bolder.hovered',
-  description: 'Hovered state of color.background.accent.teal.bolder.',
-  exampleValue: '#206A83'
-}, {
-  content: '{"name":"color.background.accent.teal.bolder.pressed","description":"Pressed state of color.background.accent.teal.bolder."}',
-  name: 'color.background.accent.teal.bolder.pressed',
-  description: 'Pressed state of color.background.accent.teal.bolder.',
-  exampleValue: '#1A5265'
-}, {
-  content: '{"name":"color.background.accent.blue.subtlest","description":"Use for blue backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."}',
-  name: 'color.background.accent.blue.subtlest',
-  description: 'Use for blue backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
-  exampleValue: '#E9F2FE'
-}, {
-  content: '{"name":"color.background.accent.blue.subtlest.hovered","description":"Hovered state of color.background.accent.blue.subtlest."}',
-  name: 'color.background.accent.blue.subtlest.hovered',
-  description: 'Hovered state of color.background.accent.blue.subtlest.',
-  exampleValue: '#CFE1FD'
-}, {
-  content: '{"name":"color.background.accent.blue.subtlest.pressed","description":"Pressed state of color.background.accent.blue.subtlest."}',
-  name: 'color.background.accent.blue.subtlest.pressed',
-  description: 'Pressed state of color.background.accent.blue.subtlest.',
-  exampleValue: '#ADCBFB'
-}, {
-  content: '{"name":"color.background.accent.blue.subtler","description":"Use for blue backgrounds when there is no meaning tied to the color, such as colored tags."}',
-  name: 'color.background.accent.blue.subtler',
-  description: 'Use for blue backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#CFE1FD'
-}, {
-  content: '{"name":"color.background.accent.blue.subtler.hovered","description":"Hovered state of color.background.accent.blue.subtler."}',
-  name: 'color.background.accent.blue.subtler.hovered',
-  description: 'Hovered state of color.background.accent.blue.subtler.',
-  exampleValue: '#ADCBFB'
-}, {
-  content: '{"name":"color.background.accent.blue.subtler.pressed","description":"Pressed state of color.background.accent.blue.subtler."}',
-  name: 'color.background.accent.blue.subtler.pressed',
-  description: 'Pressed state of color.background.accent.blue.subtler.',
-  exampleValue: '#8FB8F6'
-}, {
-  content: '{"name":"color.background.accent.blue.subtle","description":"Use for vibrant blue backgrounds when there is no meaning tied to the color, such as colored tags."}',
-  name: 'color.background.accent.blue.subtle',
-  description: 'Use for vibrant blue backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#669DF1'
-}, {
-  content: '{"name":"color.background.accent.blue.subtle.hovered","description":"Hovered state of color.background.accent.blue.subtle."}',
-  name: 'color.background.accent.blue.subtle.hovered',
-  description: 'Hovered state of color.background.accent.blue.subtle.',
-  exampleValue: '#8FB8F6'
-}, {
-  content: '{"name":"color.background.accent.blue.subtle.pressed","description":"Pressed state of color.background.accent.blue.subtle."}',
-  name: 'color.background.accent.blue.subtle.pressed',
-  description: 'Pressed state of color.background.accent.blue.subtle.',
-  exampleValue: '#ADCBFB'
-}, {
-  content: '{"name":"color.background.accent.blue.bolder","description":"Use for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."}',
-  name: 'color.background.accent.blue.bolder',
-  description: 'Use for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
-  exampleValue: '#1868DB'
-}, {
-  content: '{"name":"color.background.accent.blue.bolder.hovered","description":"Hovered state of color.background.accent.blue.bolder."}',
-  name: 'color.background.accent.blue.bolder.hovered',
-  description: 'Hovered state of color.background.accent.blue.bolder.',
-  exampleValue: '#1558BC'
-}, {
-  content: '{"name":"color.background.accent.blue.bolder.pressed","description":"Pressed state of color.background.accent.blue.bolder."}',
-  name: 'color.background.accent.blue.bolder.pressed',
-  description: 'Pressed state of color.background.accent.blue.bolder.',
-  exampleValue: '#144794'
-}, {
-  content: '{"name":"color.background.accent.purple.subtlest","description":"Use for purple backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."}',
-  name: 'color.background.accent.purple.subtlest',
-  description: 'Use for purple backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
-  exampleValue: '#F8EEFE'
-}, {
-  content: '{"name":"color.background.accent.purple.subtlest.hovered","description":"Hovered state of color.background.accent.purple.subtlest."}',
-  name: 'color.background.accent.purple.subtlest.hovered',
-  description: 'Hovered state of color.background.accent.purple.subtlest.',
-  exampleValue: '#EED7FC'
-}, {
-  content: '{"name":"color.background.accent.purple.subtlest.pressed","description":"Pressed state of color.background.accent.purple.subtlest."}',
-  name: 'color.background.accent.purple.subtlest.pressed',
-  description: 'Pressed state of color.background.accent.purple.subtlest.',
-  exampleValue: '#E3BDFA'
-}, {
-  content: '{"name":"color.background.accent.purple.subtler","description":"Use for purple backgrounds when there is no meaning tied to the color, such as colored tags."}',
-  name: 'color.background.accent.purple.subtler',
-  description: 'Use for purple backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#EED7FC'
-}, {
-  content: '{"name":"color.background.accent.purple.subtler.hovered","description":"Hovered state of color.background.accent.purple.subtler."}',
-  name: 'color.background.accent.purple.subtler.hovered',
-  description: 'Hovered state of color.background.accent.purple.subtler.',
-  exampleValue: '#E3BDFA'
-}, {
-  content: '{"name":"color.background.accent.purple.subtler.pressed","description":"Pressed state of color.background.accent.purple.subtler."}',
-  name: 'color.background.accent.purple.subtler.pressed',
-  description: 'Pressed state of color.background.accent.purple.subtler.',
-  exampleValue: '#D8A0F7'
-}, {
-  content: '{"name":"color.background.accent.purple.subtle","description":"Use for vibrant purple backgrounds when there is no meaning tied to the color, such as colored tags."}',
-  name: 'color.background.accent.purple.subtle',
-  description: 'Use for vibrant purple backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#C97CF4'
-}, {
-  content: '{"name":"color.background.accent.purple.subtle.hovered","description":"Hovered state of color.background.accent.purple.subtle."}',
-  name: 'color.background.accent.purple.subtle.hovered',
-  description: 'Hovered state of color.background.accent.purple.subtle.',
-  exampleValue: '#D8A0F7'
-}, {
-  content: '{"name":"color.background.accent.purple.subtle.pressed","description":"Pressed state of color.background.accent.purple.subtle."}',
-  name: 'color.background.accent.purple.subtle.pressed',
-  description: 'Pressed state of color.background.accent.purple.subtle.',
-  exampleValue: '#E3BDFA'
-}, {
-  content: '{"name":"color.background.accent.purple.bolder","description":"Use for purple backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."}',
-  name: 'color.background.accent.purple.bolder',
-  description: 'Use for purple backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
-  exampleValue: '#964AC0'
-}, {
-  content: '{"name":"color.background.accent.purple.bolder.hovered","description":"Hovered state of color.background.accent.purple.bolder."}',
-  name: 'color.background.accent.purple.bolder.hovered',
-  description: 'Hovered state of color.background.accent.purple.bolder.',
-  exampleValue: '#803FA5'
-}, {
-  content: '{"name":"color.background.accent.purple.bolder.pressed","description":"Pressed state of color.background.accent.purple.bolder."}',
-  name: 'color.background.accent.purple.bolder.pressed',
-  description: 'Pressed state of color.background.accent.purple.bolder.',
-  exampleValue: '#673286'
-}, {
-  content: '{"name":"color.background.accent.magenta.subtlest","description":"Use for magenta backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."}',
-  name: 'color.background.accent.magenta.subtlest',
-  description: 'Use for magenta backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
-  exampleValue: '#FFECF8'
-}, {
-  content: '{"name":"color.background.accent.magenta.subtlest.hovered","description":"Hovered state of color.background.accent.magenta.subtlest."}',
-  name: 'color.background.accent.magenta.subtlest.hovered',
-  description: 'Hovered state of color.background.accent.magenta.subtlest.',
-  exampleValue: '#FDD0EC'
-}, {
-  content: '{"name":"color.background.accent.magenta.subtlest.pressed","description":"Pressed state of color.background.accent.magenta.subtlest."}',
-  name: 'color.background.accent.magenta.subtlest.pressed',
-  description: 'Pressed state of color.background.accent.magenta.subtlest.',
-  exampleValue: '#FCB6E1'
-}, {
-  content: '{"name":"color.background.accent.magenta.subtler","description":"Use for magenta backgrounds when there is no meaning tied to the color, such as colored tags."}',
-  name: 'color.background.accent.magenta.subtler',
-  description: 'Use for magenta backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#FDD0EC'
-}, {
-  content: '{"name":"color.background.accent.magenta.subtler.hovered","description":"Hovered state of color.background.accent.magenta.subtler."}',
-  name: 'color.background.accent.magenta.subtler.hovered',
-  description: 'Hovered state of color.background.accent.magenta.subtler.',
-  exampleValue: '#FCB6E1'
-}, {
-  content: '{"name":"color.background.accent.magenta.subtler.pressed","description":"Pressed state of color.background.accent.magenta.subtler."}',
-  name: 'color.background.accent.magenta.subtler.pressed',
-  description: 'Pressed state of color.background.accent.magenta.subtler.',
-  exampleValue: '#F797D2'
-}, {
-  content: '{"name":"color.background.accent.magenta.subtle","description":"Use for vibrant magenta backgrounds when there is no meaning tied to the color, such as colored tags."}',
-  name: 'color.background.accent.magenta.subtle',
-  description: 'Use for vibrant magenta backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#E774BB'
-}, {
-  content: '{"name":"color.background.accent.magenta.subtle.hovered","description":"Hovered state of color.background.accent.magenta.subtle."}',
-  name: 'color.background.accent.magenta.subtle.hovered',
-  description: 'Hovered state of color.background.accent.magenta.subtle.',
-  exampleValue: '#F797D2'
-}, {
-  content: '{"name":"color.background.accent.magenta.subtle.pressed","description":"Pressed state of color.background.accent.magenta.subtle."}',
-  name: 'color.background.accent.magenta.subtle.pressed',
-  description: 'Pressed state of color.background.accent.magenta.subtle.',
-  exampleValue: '#FCB6E1'
-}, {
-  content: '{"name":"color.background.accent.magenta.bolder","description":"Use for magenta backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."}',
-  name: 'color.background.accent.magenta.bolder',
-  description: 'Use for magenta backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
-  exampleValue: '#AE4787'
-}, {
-  content: '{"name":"color.background.accent.magenta.bolder.hovered","description":"Hovered state of color.background.accent.magenta.bolder."}',
-  name: 'color.background.accent.magenta.bolder.hovered',
-  description: 'Hovered state of color.background.accent.magenta.bolder.',
-  exampleValue: '#943D73'
-}, {
-  content: '{"name":"color.background.accent.magenta.bolder.pressed","description":"Pressed state of color.background.accent.magenta.bolder."}',
-  name: 'color.background.accent.magenta.bolder.pressed',
-  description: 'Pressed state of color.background.accent.magenta.bolder.',
-  exampleValue: '#77325B'
-}, {
-  content: '{"name":"color.background.accent.gray.subtlest","description":"Use for gray backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color."}',
-  name: 'color.background.accent.gray.subtlest',
-  description: 'Use for gray backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
-  exampleValue: '#F0F1F2'
-}, {
-  content: '{"name":"color.background.accent.gray.subtlest.hovered","description":"Hovered state of color.background.accent.gray.subtlest."}',
-  name: 'color.background.accent.gray.subtlest.hovered',
-  description: 'Hovered state of color.background.accent.gray.subtlest.',
-  exampleValue: '#DDDEE1'
-}, {
-  content: '{"name":"color.background.accent.gray.subtlest.pressed","description":"Pressed state of color.background.accent.gray.subtlest."}',
-  name: 'color.background.accent.gray.subtlest.pressed',
-  description: 'Pressed state of color.background.accent.gray.subtlest.',
-  exampleValue: '#B7B9BE'
-}, {
-  content: '{"name":"color.background.accent.gray.subtler","description":"Use for gray backgrounds when there is no meaning tied to the color, such as colored tags."}',
-  name: 'color.background.accent.gray.subtler',
-  description: 'Use for gray backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#DDDEE1'
-}, {
-  content: '{"name":"color.background.accent.gray.subtler.hovered","description":"Hovered state of color.background.accent.gray.subtler."}',
-  name: 'color.background.accent.gray.subtler.hovered',
-  description: 'Hovered state of color.background.accent.gray.subtler.',
-  exampleValue: '#B7B9BE'
-}, {
-  content: '{"name":"color.background.accent.gray.subtler.pressed","description":"Pressed state of color.background.accent.gray.subtler."}',
-  name: 'color.background.accent.gray.subtler.pressed',
-  description: 'Pressed state of color.background.accent.gray.subtler.',
-  exampleValue: '#8C8F97'
-}, {
-  content: '{"name":"color.background.accent.gray.subtle","description":"Use for vibrant gray backgrounds when there is no meaning tied to the color, such as colored tags."}',
-  name: 'color.background.accent.gray.subtle',
-  description: 'Use for vibrant gray backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#8C8F97'
-}, {
-  content: '{"name":"color.background.accent.gray.subtle.hovered","description":"Hovered state of color.background.accent.gray.subtle."}',
-  name: 'color.background.accent.gray.subtle.hovered',
-  description: 'Hovered state of color.background.accent.gray.subtle.',
-  exampleValue: '#B7B9BE'
-}, {
-  content: '{"name":"color.background.accent.gray.subtle.pressed","description":"Pressed state of color.background.accent.gray.subtle."}',
-  name: 'color.background.accent.gray.subtle.pressed',
-  description: 'Pressed state of color.background.accent.gray.subtle.',
-  exampleValue: '#DDDEE1'
-}, {
-  content: '{"name":"color.background.accent.gray.bolder","description":"Use for gray backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements."}',
-  name: 'color.background.accent.gray.bolder',
-  description: 'Use for gray backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
-  exampleValue: '#6B6E76'
-}, {
-  content: '{"name":"color.background.accent.gray.bolder.hovered","description":"Hovered state of color.background.accent.gray.bolder."}',
-  name: 'color.background.accent.gray.bolder.hovered',
-  description: 'Hovered state of color.background.accent.gray.bolder.',
-  exampleValue: '#505258'
-}, {
-  content: '{"name":"color.background.accent.gray.bolder.pressed","description":"Pressed state of color.background.accent.gray.subtlest."}',
-  name: 'color.background.accent.gray.bolder.pressed',
-  description: 'Pressed state of color.background.accent.gray.subtlest.',
-  exampleValue: '#3B3D42'
-}, {
-  content: '{"name":"color.background.disabled","description":"Use for backgrounds of elements in a disabled state."}',
-  name: 'color.background.disabled',
-  description: 'Use for backgrounds of elements in a disabled state.',
-  exampleValue: '#17171708'
-}, {
-  content: '{"name":"color.background.input","description":"Use for background of form UI elements, such as text fields, checkboxes, and radio buttons."}',
-  name: 'color.background.input',
-  description: 'Use for background of form UI elements, such as text fields, checkboxes, and radio buttons.',
-  exampleValue: '#FFFFFF'
-}, {
-  content: '{"name":"color.background.input.hovered","description":"Hovered state for color.background.input"}',
-  name: 'color.background.input.hovered',
-  description: 'Hovered state for color.background.input',
-  exampleValue: '#F8F8F8'
-}, {
-  content: '{"name":"color.background.input.pressed","description":"Pressed state for color.background.input"}',
-  name: 'color.background.input.pressed',
-  description: 'Pressed state for color.background.input',
-  exampleValue: '#FFFFFF'
-}, {
-  content: '{"name":"color.background.inverse.subtle","description":"Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards."}',
-  name: 'color.background.inverse.subtle',
-  description: 'Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards.',
-  exampleValue: '#00000029'
-}, {
-  content: '{"name":"color.background.inverse.subtle.hovered","description":"Use for the hovered state of color.background.inverse.subtle"}',
-  name: 'color.background.inverse.subtle.hovered',
-  description: 'Use for the hovered state of color.background.inverse.subtle',
-  exampleValue: '#0000003D'
-}, {
-  content: '{"name":"color.background.inverse.subtle.pressed","description":"Use for the pressed state of color.background.inverse.subtle"}',
-  name: 'color.background.inverse.subtle.pressed',
-  description: 'Use for the pressed state of color.background.inverse.subtle',
-  exampleValue: '#00000052'
-}, {
-  content: '{"name":"color.background.neutral","description":"The default background for neutral elements, such as default buttons."}',
-  name: 'color.background.neutral',
-  description: 'The default background for neutral elements, such as default buttons.',
-  exampleValue: '#0515240F'
-}, {
-  content: '{"name":"color.background.neutral.hovered","description":"Hovered state for color.background.neutral"}',
-  name: 'color.background.neutral.hovered',
-  description: 'Hovered state for color.background.neutral',
-  exampleValue: '#0B120E24'
-}, {
-  content: '{"name":"color.background.neutral.pressed","description":"Pressed state for color.background.neutral"}',
-  name: 'color.background.neutral.pressed',
-  description: 'Pressed state for color.background.neutral',
-  exampleValue: '#080F214A'
-}, {
-  content: '{"name":"color.background.neutral.subtle","description":"Use for the background of elements that appear to have no background in a resting state, such as subtle buttons and menu items."}',
-  name: 'color.background.neutral.subtle',
-  description: 'Use for the background of elements that appear to have no background in a resting state, such as subtle buttons and menu items.',
-  exampleValue: '#00000000'
-}, {
-  content: '{"name":"color.background.neutral.subtle.hovered","description":"Hovered state for color.background.neutral.subtle"}',
-  name: 'color.background.neutral.subtle.hovered',
-  description: 'Hovered state for color.background.neutral.subtle',
-  exampleValue: '#0515240F'
-}, {
-  content: '{"name":"color.background.neutral.subtle.pressed","description":"Pressed state for color.background.neutral.subtle"}',
-  name: 'color.background.neutral.subtle.pressed',
-  description: 'Pressed state for color.background.neutral.subtle',
-  exampleValue: '#0B120E24'
-}, {
-  content: '{"name":"color.background.neutral.bold","description":"A vibrant background option for neutral UI elements, such as announcement banners."}',
-  name: 'color.background.neutral.bold',
-  description: 'A vibrant background option for neutral UI elements, such as announcement banners.',
-  exampleValue: '#292A2E'
-}, {
-  content: '{"name":"color.background.neutral.bold.hovered","description":"Hovered state of color.background.neutral.bold"}',
-  name: 'color.background.neutral.bold.hovered',
-  description: 'Hovered state of color.background.neutral.bold',
-  exampleValue: '#3B3D42'
-}, {
-  content: '{"name":"color.background.neutral.bold.pressed","description":"Pressed state of color.background.neutral.bold"}',
-  name: 'color.background.neutral.bold.pressed',
-  description: 'Pressed state of color.background.neutral.bold',
-  exampleValue: '#505258'
-}, {
-  content: '{"name":"color.background.selected","description":"Use for the background of elements in a selected state, such as in opened dropdown buttons."}',
-  name: 'color.background.selected',
-  description: 'Use for the background of elements in a selected state, such as in opened dropdown buttons.',
-  exampleValue: '#E9F2FE'
-}, {
-  content: '{"name":"color.background.selected.hovered","description":"Hovered state for color.background.selected"}',
-  name: 'color.background.selected.hovered',
-  description: 'Hovered state for color.background.selected',
-  exampleValue: '#CFE1FD'
-}, {
-  content: '{"name":"color.background.selected.pressed","description":"Pressed state for color.background.selected"}',
-  name: 'color.background.selected.pressed',
-  description: 'Pressed state for color.background.selected',
-  exampleValue: '#8FB8F6'
-}, {
-  content: '{"name":"color.background.selected.bold","description":"Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons."}',
-  name: 'color.background.selected.bold',
-  description: 'Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons.',
-  exampleValue: '#1868DB'
-}, {
-  content: '{"name":"color.background.selected.bold.hovered","description":"Hovered state of color.background.selected.bold"}',
-  name: 'color.background.selected.bold.hovered',
-  description: 'Hovered state of color.background.selected.bold',
-  exampleValue: '#1558BC'
-}, {
-  content: '{"name":"color.background.selected.bold.pressed","description":"Pressed state of color.background.selected.bold"}',
-  name: 'color.background.selected.bold.pressed',
-  description: 'Pressed state of color.background.selected.bold',
-  exampleValue: '#123263'
-}, {
-  content: '{"name":"color.background.brand.subtlest","description":"Use for the background of elements used to reinforce our brand, but with less emphasis."}',
-  name: 'color.background.brand.subtlest',
-  description: 'Use for the background of elements used to reinforce our brand, but with less emphasis.',
-  exampleValue: '#E9F2FE'
-}, {
-  content: '{"name":"color.background.brand.subtlest.hovered","description":"Hovered state of color.background.brand.subtlest."}',
-  name: 'color.background.brand.subtlest.hovered',
-  description: 'Hovered state of color.background.brand.subtlest.',
-  exampleValue: '#CFE1FD'
-}, {
-  content: '{"name":"color.background.brand.subtlest.pressed","description":"Pressed state of color.background.brand.subtlest"}',
-  name: 'color.background.brand.subtlest.pressed',
-  description: 'Pressed state of color.background.brand.subtlest',
-  exampleValue: '#ADCBFB'
-}, {
-  content: '{"name":"color.background.brand.bold","description":"Use for the background of elements used to reinforce our brand, but with more emphasis."}',
-  name: 'color.background.brand.bold',
-  description: 'Use for the background of elements used to reinforce our brand, but with more emphasis.',
-  exampleValue: '#1868DB'
-}, {
-  content: '{"name":"color.background.brand.bold.hovered","description":"Hovered state of color.background.brand.bold."}',
-  name: 'color.background.brand.bold.hovered',
-  description: 'Hovered state of color.background.brand.bold.',
-  exampleValue: '#1558BC'
-}, {
-  content: '{"name":"color.background.brand.bold.pressed","description":"Pressed state of color.background.brand.bold."}',
-  name: 'color.background.brand.bold.pressed',
-  description: 'Pressed state of color.background.brand.bold.',
-  exampleValue: '#144794'
-}, {
-  content: '{"name":"color.background.brand.boldest","description":"Use for the background of elements used to reinforce our brand, that need to stand out a lot."}',
-  name: 'color.background.brand.boldest',
-  description: 'Use for the background of elements used to reinforce our brand, that need to stand out a lot.',
-  exampleValue: '#1C2B42'
-}, {
-  content: '{"name":"color.background.brand.boldest.hovered","description":"Hovered state of color.background.brand.boldest."}',
-  name: 'color.background.brand.boldest.hovered',
-  description: 'Hovered state of color.background.brand.boldest.',
-  exampleValue: '#123263'
-}, {
-  content: '{"name":"color.background.brand.boldest.pressed","description":"Pressed state of color.background.brand.boldest."}',
-  name: 'color.background.brand.boldest.pressed',
-  description: 'Pressed state of color.background.brand.boldest.',
-  exampleValue: '#144794'
-}, {
-  content: '{"name":"color.background.danger","description":"Use for backgrounds communicating critical information, such in error section messages."}',
-  name: 'color.background.danger',
-  description: 'Use for backgrounds communicating critical information, such in error section messages.',
-  exampleValue: '#FFECEB'
-}, {
-  content: '{"name":"color.background.danger.hovered","description":"Hovered state for color.background.danger"}',
-  name: 'color.background.danger.hovered',
-  description: 'Hovered state for color.background.danger',
-  exampleValue: '#FFD5D2'
-}, {
-  content: '{"name":"color.background.danger.pressed","description":"Pressed state for color.background.danger"}',
-  name: 'color.background.danger.pressed',
-  description: 'Pressed state for color.background.danger',
-  exampleValue: '#FFB8B2'
-}, {
-  content: '{"name":"color.background.danger.subtler","description":"Use for backgrounds of danger lozenges and badges to ensure accessibility and desired visual appearance."}',
-  name: 'color.background.danger.subtler',
-  description: 'Use for backgrounds of danger lozenges and badges to ensure accessibility and desired visual appearance.',
-  exampleValue: '#FFD5D2'
-}, {
-  content: '{"name":"color.background.danger.subtler.hovered","description":"Hovered state of color.background.danger.subtler"}',
-  name: 'color.background.danger.subtler.hovered',
-  description: 'Hovered state of color.background.danger.subtler',
-  exampleValue: '#FFB8B2'
-}, {
-  content: '{"name":"color.background.danger.subtler.pressed","description":"Pressed state of color.background.danger.subtler"}',
-  name: 'color.background.danger.subtler.pressed',
-  description: 'Pressed state of color.background.danger.subtler',
-  exampleValue: '#FD9891'
-}, {
-  content: '{"name":"color.background.danger.bold","description":"A vibrant background option for communicating critical information, such as in danger buttons and error banners."}',
-  name: 'color.background.danger.bold',
-  description: 'A vibrant background option for communicating critical information, such as in danger buttons and error banners.',
-  exampleValue: '#C9372C'
-}, {
-  content: '{"name":"color.background.danger.bold.hovered","description":"Hovered state of color.background.danger.bold"}',
-  name: 'color.background.danger.bold.hovered',
-  description: 'Hovered state of color.background.danger.bold',
-  exampleValue: '#AE2E24'
-}, {
-  content: '{"name":"color.background.danger.bold.pressed","description":"Pressed state of color.background.danger.bold"}',
-  name: 'color.background.danger.bold.pressed',
-  description: 'Pressed state of color.background.danger.bold',
-  exampleValue: '#872821'
-}, {
-  content: '{"name":"color.background.warning","description":"Use for backgrounds communicating caution, such as in warning section messages."}',
-  name: 'color.background.warning',
-  description: 'Use for backgrounds communicating caution, such as in warning section messages.',
-  exampleValue: '#FFF5DB'
-}, {
-  content: '{"name":"color.background.warning.hovered","description":"Hovered state for color.background.warning"}',
-  name: 'color.background.warning.hovered',
-  description: 'Hovered state for color.background.warning',
-  exampleValue: '#FCE4A6'
-}, {
-  content: '{"name":"color.background.warning.pressed","description":"Pressed state for color.background.warning"}',
-  name: 'color.background.warning.pressed',
-  description: 'Pressed state for color.background.warning',
-  exampleValue: '#FBD779'
-}, {
-  content: '{"name":"color.background.warning.subtler","description":"Use for backgrounds of warning lozenges and badges to ensure accessibility and desired visual appearance."}',
-  name: 'color.background.warning.subtler',
-  description: 'Use for backgrounds of warning lozenges and badges to ensure accessibility and desired visual appearance.',
-  exampleValue: '#FCE4A6'
-}, {
-  content: '{"name":"color.background.warning.subtler.hovered","description":"Hovered state of color.background.warning.subtler"}',
-  name: 'color.background.warning.subtler.hovered',
-  description: 'Hovered state of color.background.warning.subtler',
-  exampleValue: '#FBD779'
-}, {
-  content: '{"name":"color.background.warning.subtler.pressed","description":"Pressed state of color.background.warning.subtler"}',
-  name: 'color.background.warning.subtler.pressed',
-  description: 'Pressed state of color.background.warning.subtler',
-  exampleValue: '#FBC828'
-}, {
-  content: '{"name":"color.background.warning.bold","description":"A vibrant background option for communicating caution, such as in warning buttons and warning banners."}',
-  name: 'color.background.warning.bold',
-  description: 'A vibrant background option for communicating caution, such as in warning buttons and warning banners.',
-  exampleValue: '#FBC828'
-}, {
-  content: '{"name":"color.background.warning.bold.hovered","description":"Hovered state of color.background.warning.bold"}',
-  name: 'color.background.warning.bold.hovered',
-  description: 'Hovered state of color.background.warning.bold',
-  exampleValue: '#FCA700'
-}, {
-  content: '{"name":"color.background.warning.bold.pressed","description":"Pressed state of color.background.warning.bold"}',
-  name: 'color.background.warning.bold.pressed',
-  description: 'Pressed state of color.background.warning.bold',
-  exampleValue: '#F68909'
-}, {
-  content: '{"name":"color.background.success","description":"Use for backgrounds communicating a favorable outcome, such as in success section messages."}',
-  name: 'color.background.success',
-  description: 'Use for backgrounds communicating a favorable outcome, such as in success section messages.',
-  exampleValue: '#EFFFD6'
-}, {
-  content: '{"name":"color.background.success.hovered","description":"Hovered state for color.background.success"}',
-  name: 'color.background.success.hovered',
-  description: 'Hovered state for color.background.success',
-  exampleValue: '#D3F1A7'
-}, {
-  content: '{"name":"color.background.success.pressed","description":"Pressed state for color.background.success"}',
-  name: 'color.background.success.pressed',
-  description: 'Pressed state for color.background.success',
-  exampleValue: '#BDE97C'
-}, {
-  content: '{"name":"color.background.success.subtler","description":"Use for backgrounds of success lozenges and badges to ensure accessibility and desired visual appearance."}',
-  name: 'color.background.success.subtler',
-  description: 'Use for backgrounds of success lozenges and badges to ensure accessibility and desired visual appearance.',
-  exampleValue: '#D3F1A7'
-}, {
-  content: '{"name":"color.background.success.subtler.hovered","description":"Hovered state of color.background.success.subtler"}',
-  name: 'color.background.success.subtler.hovered',
-  description: 'Hovered state of color.background.success.subtler',
-  exampleValue: '#BDE97C'
-}, {
-  content: '{"name":"color.background.success.subtler.pressed","description":"Pressed state of color.background.success.subtler"}',
-  name: 'color.background.success.subtler.pressed',
-  description: 'Pressed state of color.background.success.subtler',
-  exampleValue: '#B3DF72'
-}, {
-  content: '{"name":"color.background.success.bold","description":"A vibrant background option for communicating a favorable outcome, such as in checked toggles."}',
-  name: 'color.background.success.bold',
-  description: 'A vibrant background option for communicating a favorable outcome, such as in checked toggles.',
-  exampleValue: '#5B7F24'
-}, {
-  content: '{"name":"color.background.success.bold.hovered","description":"Hovered state of color.background.success.bold"}',
-  name: 'color.background.success.bold.hovered',
-  description: 'Hovered state of color.background.success.bold',
-  exampleValue: '#4C6B1F'
-}, {
-  content: '{"name":"color.background.success.bold.pressed","description":"Pressed state of color.background.success.bold"}',
-  name: 'color.background.success.bold.pressed',
-  description: 'Pressed state of color.background.success.bold',
-  exampleValue: '#3F5224'
-}, {
-  content: '{"name":"color.background.discovery","description":"Use for backgrounds communicating change or something new, such as in discovery section messages."}',
-  name: 'color.background.discovery',
-  description: 'Use for backgrounds communicating change or something new, such as in discovery section messages.',
-  exampleValue: '#F8EEFE'
-}, {
-  content: '{"name":"color.background.discovery.hovered","description":"Hover state for color.background.discovery"}',
-  name: 'color.background.discovery.hovered',
-  description: 'Hover state for color.background.discovery',
-  exampleValue: '#EED7FC'
-}, {
-  content: '{"name":"color.background.discovery.pressed","description":"Pressed state for color.background.discovery"}',
-  name: 'color.background.discovery.pressed',
-  description: 'Pressed state for color.background.discovery',
-  exampleValue: '#E3BDFA'
-}, {
-  content: '{"name":"color.background.discovery.subtler","description":"Use for backgrounds of discovery lozenges and badges to ensure accessibility and desired visual appearance."}',
-  name: 'color.background.discovery.subtler',
-  description: 'Use for backgrounds of discovery lozenges and badges to ensure accessibility and desired visual appearance.',
-  exampleValue: '#EED7FC'
-}, {
-  content: '{"name":"color.background.discovery.subtler.hovered","description":"Hovered state of color.background.discovery.subtler"}',
-  name: 'color.background.discovery.subtler.hovered',
-  description: 'Hovered state of color.background.discovery.subtler',
-  exampleValue: '#E3BDFA'
-}, {
-  content: '{"name":"color.background.discovery.subtler.pressed","description":"Pressed state of color.background.discovery.subtler"}',
-  name: 'color.background.discovery.subtler.pressed',
-  description: 'Pressed state of color.background.discovery.subtler',
-  exampleValue: '#D8A0F7'
-}, {
-  content: '{"name":"color.background.discovery.bold","description":"A vibrant background option communicating change or something new, such as in onboarding spotlights."}',
-  name: 'color.background.discovery.bold',
-  description: 'A vibrant background option communicating change or something new, such as in onboarding spotlights.',
-  exampleValue: '#964AC0'
-}, {
-  content: '{"name":"color.background.discovery.bold.hovered","description":"Hovered state of color.background.discovery.bold"}',
-  name: 'color.background.discovery.bold.hovered',
-  description: 'Hovered state of color.background.discovery.bold',
-  exampleValue: '#803FA5'
-}, {
-  content: '{"name":"color.background.discovery.bold.pressed","description":"Pressed state of color.background.discovery.bold"}',
-  name: 'color.background.discovery.bold.pressed',
-  description: 'Pressed state of color.background.discovery.bold',
-  exampleValue: '#673286'
-}, {
-  content: '{"name":"color.background.information","description":"Use for backgrounds communicating information or something in-progress, such as in information section messages."}',
-  name: 'color.background.information',
-  description: 'Use for backgrounds communicating information or something in-progress, such as in information section messages.',
-  exampleValue: '#E9F2FE'
-}, {
-  content: '{"name":"color.background.information.hovered","description":"Hovered state of color.background.information"}',
-  name: 'color.background.information.hovered',
-  description: 'Hovered state of color.background.information',
-  exampleValue: '#CFE1FD'
-}, {
-  content: '{"name":"color.background.information.pressed","description":"Pressed state of color.background.information"}',
-  name: 'color.background.information.pressed',
-  description: 'Pressed state of color.background.information',
-  exampleValue: '#ADCBFB'
-}, {
-  content: '{"name":"color.background.information.subtler","description":"Use for backgrounds of information lozenges and badges to ensure accessibility and desired visual appearance."}',
-  name: 'color.background.information.subtler',
-  description: 'Use for backgrounds of information lozenges and badges to ensure accessibility and desired visual appearance.',
-  exampleValue: '#CFE1FD'
-}, {
-  content: '{"name":"color.background.information.subtler.hovered","description":"Hovered state of color.background.information.subtler"}',
-  name: 'color.background.information.subtler.hovered',
-  description: 'Hovered state of color.background.information.subtler',
-  exampleValue: '#ADCBFB'
-}, {
-  content: '{"name":"color.background.information.subtler.pressed","description":"Pressed state of color.background.information.subtler"}',
-  name: 'color.background.information.subtler.pressed',
-  description: 'Pressed state of color.background.information.subtler',
-  exampleValue: '#8FB8F6'
-}, {
-  content: '{"name":"color.background.information.bold","description":"A vibrant background option for communicating information or something in-progress."}',
-  name: 'color.background.information.bold',
-  description: 'A vibrant background option for communicating information or something in-progress.',
-  exampleValue: '#1868DB'
-}, {
-  content: '{"name":"color.background.information.bold.hovered","description":"Hovered state of color.background.information.bold"}',
-  name: 'color.background.information.bold.hovered',
-  description: 'Hovered state of color.background.information.bold',
-  exampleValue: '#1558BC'
-}, {
-  content: '{"name":"color.background.information.bold.pressed","description":"Pressed state of color.background.information.bold"}',
-  name: 'color.background.information.bold.pressed',
-  description: 'Pressed state of color.background.information.bold',
-  exampleValue: '#144794'
-}, {
-  content: '{"name":"color.blanket","description":"Use for the screen overlay that appears with modal dialogs"}',
-  name: 'color.blanket',
-  description: 'Use for the screen overlay that appears with modal dialogs',
-  exampleValue: '#050C1F75'
-}, {
-  content: '{"name":"color.blanket.selected","description":"Use as an overlay to communicate selected states when a simple background color change isn\'t possible, such as in Editor block elements"}',
-  name: 'color.blanket.selected',
-  description: "Use as an overlay to communicate selected states when a simple background color change isn't possible, such as in Editor block elements",
-  exampleValue: '#388BFF14'
-}, {
-  content: '{"name":"color.blanket.danger","description":"Use as an overlay to communicate danger states when a simple background color change isn\'t possible, such as deletion of Editor block elements"}',
-  name: 'color.blanket.danger',
-  description: "Use as an overlay to communicate danger states when a simple background color change isn't possible, such as deletion of Editor block elements",
-  exampleValue: '#EF5C4814'
-}, {
-  content: '{"name":"color.interaction.hovered","description":"Use as a background overlay for elements in a hovered state when their background color cannot change, such as avatars."}',
-  name: 'color.interaction.hovered',
-  description: 'Use as a background overlay for elements in a hovered state when their background color cannot change, such as avatars.',
-  exampleValue: '#00000029'
-}, {
-  content: '{"name":"color.interaction.pressed","description":"Use as a background overlay for elements in a pressed state when their background color cannot change, such as avatars."}',
-  name: 'color.interaction.pressed',
-  description: 'Use as a background overlay for elements in a pressed state when their background color cannot change, such as avatars.',
-  exampleValue: '#00000052'
-}, {
-  content: '{"name":"color.skeleton","description":"Use for skeleton loading states"}',
-  name: 'color.skeleton',
-  description: 'Use for skeleton loading states',
-  exampleValue: '#0515240F'
-}, {
-  content: '{"name":"color.skeleton.subtle","description":"Use for the pulse or shimmer effect in skeleton loading states"}',
-  name: 'color.skeleton.subtle',
-  description: 'Use for the pulse or shimmer effect in skeleton loading states',
-  exampleValue: '#17171708'
-}, {
-  content: '{"name":"color.chart.categorical.1","description":"For data visualisation only. Follow numbered sequence."}',
-  name: 'color.chart.categorical.1',
-  description: 'For data visualisation only. Follow numbered sequence.',
-  exampleValue: '#357DE8'
-}, {
-  content: '{"name":"color.chart.categorical.1.hovered","description":"Hovered state of color.chart.categorical.1."}',
-  name: 'color.chart.categorical.1.hovered',
-  description: 'Hovered state of color.chart.categorical.1.',
-  exampleValue: '#1868DB'
-}, {
-  content: '{"name":"color.chart.categorical.2","description":"For data visualisation only. Follow numbered sequence."}',
-  name: 'color.chart.categorical.2',
-  description: 'For data visualisation only. Follow numbered sequence.',
-  exampleValue: '#82B536'
-}, {
-  content: '{"name":"color.chart.categorical.2.hovered","description":"Hovered state of color.chart.categorical.2."}',
-  name: 'color.chart.categorical.2.hovered',
-  description: 'Hovered state of color.chart.categorical.2.',
-  exampleValue: '#6A9A23'
-}, {
-  content: '{"name":"color.chart.categorical.3","description":"For data visualisation only. Follow numbered sequence."}',
-  name: 'color.chart.categorical.3',
-  description: 'For data visualisation only. Follow numbered sequence.',
-  exampleValue: '#BF63F3'
-}, {
-  content: '{"name":"color.chart.categorical.3.hovered","description":"Hovered state of color.chart.categorical.3."}',
-  name: 'color.chart.categorical.3.hovered',
-  description: 'Hovered state of color.chart.categorical.3.',
-  exampleValue: '#AF59E1'
-}, {
-  content: '{"name":"color.chart.categorical.4","description":"For data visualisation only. Follow numbered sequence."}',
-  name: 'color.chart.categorical.4',
-  description: 'For data visualisation only. Follow numbered sequence.',
-  exampleValue: '#F68909'
-}, {
-  content: '{"name":"color.chart.categorical.4.hovered","description":"Hovered state of color.chart.categorical.4."}',
-  name: 'color.chart.categorical.4.hovered',
-  description: 'Hovered state of color.chart.categorical.4.',
-  exampleValue: '#E06C00'
-}, {
-  content: '{"name":"color.chart.categorical.5","description":"For data visualisation only. Follow numbered sequence."}',
-  name: 'color.chart.categorical.5',
-  description: 'For data visualisation only. Follow numbered sequence.',
-  exampleValue: '#1558BC'
-}, {
-  content: '{"name":"color.chart.categorical.5.hovered","description":"Hovered state of color.chart.categorical.5."}',
-  name: 'color.chart.categorical.5.hovered',
-  description: 'Hovered state of color.chart.categorical.5.',
-  exampleValue: '#123263'
-}, {
-  content: '{"name":"color.chart.categorical.6","description":"For data visualisation only. Follow numbered sequence."}',
-  name: 'color.chart.categorical.6',
-  description: 'For data visualisation only. Follow numbered sequence.',
-  exampleValue: '#964AC0'
-}, {
-  content: '{"name":"color.chart.categorical.6.hovered","description":"Hovered state of color.chart.categorical.6."}',
-  name: 'color.chart.categorical.6.hovered',
-  description: 'Hovered state of color.chart.categorical.6.',
-  exampleValue: '#803FA5'
-}, {
-  content: '{"name":"color.chart.categorical.7","description":"For data visualisation only. Follow numbered sequence."}',
-  name: 'color.chart.categorical.7',
-  description: 'For data visualisation only. Follow numbered sequence.',
-  exampleValue: '#42B2D7'
-}, {
-  content: '{"name":"color.chart.categorical.7.hovered","description":"Hovered state of color.chart.categorical.7."}',
-  name: 'color.chart.categorical.7.hovered',
-  description: 'Hovered state of color.chart.categorical.7.',
-  exampleValue: '#2898BD'
-}, {
-  content: '{"name":"color.chart.categorical.8","description":"For data visualisation only. Follow numbered sequence."}',
-  name: 'color.chart.categorical.8',
-  description: 'For data visualisation only. Follow numbered sequence.',
-  exampleValue: '#BD5B00'
-}, {
-  content: '{"name":"color.chart.categorical.8.hovered","description":"Hovered state of color.chart.categorical.8."}',
-  name: 'color.chart.categorical.8.hovered',
-  description: 'Hovered state of color.chart.categorical.8.',
-  exampleValue: '#7A3B00'
-}, {
-  content: '{"name":"color.chart.lime.bold","description":"For data visualisation only."}',
-  name: 'color.chart.lime.bold',
-  description: 'For data visualisation only.',
-  exampleValue: '#6A9A23'
-}, {
-  content: '{"name":"color.chart.lime.bold.hovered","description":"Hovered state of color.chart.lime.bold."}',
-  name: 'color.chart.lime.bold.hovered',
-  description: 'Hovered state of color.chart.lime.bold.',
-  exampleValue: '#5B7F24'
-}, {
-  content: '{"name":"color.chart.lime.bolder","description":"For data visualisation only."}',
-  name: 'color.chart.lime.bolder',
-  description: 'For data visualisation only.',
-  exampleValue: '#5B7F24'
-}, {
-  content: '{"name":"color.chart.lime.bolder.hovered","description":"Hovered state of color.chart.lime.bolder."}',
-  name: 'color.chart.lime.bolder.hovered',
-  description: 'Hovered state of color.chart.lime.bolder.',
-  exampleValue: '#4C6B1F'
-}, {
-  content: '{"name":"color.chart.lime.boldest","description":"For data visualisation only."}',
-  name: 'color.chart.lime.boldest',
-  description: 'For data visualisation only.',
-  exampleValue: '#4C6B1F'
-}, {
-  content: '{"name":"color.chart.lime.boldest.hovered","description":"Hovered state of color.chart.lime.boldest."}',
-  name: 'color.chart.lime.boldest.hovered',
-  description: 'Hovered state of color.chart.lime.boldest.',
-  exampleValue: '#37471F'
-}, {
-  content: '{"name":"color.chart.neutral","description":"A secondary color for data visualisation or to communicate \'to-do\' statues."}',
-  name: 'color.chart.neutral',
-  description: "A secondary color for data visualisation or to communicate 'to-do' statues.",
-  exampleValue: '#8C8F97'
-}, {
-  content: '{"name":"color.chart.neutral.hovered","description":"Hovered state of color.chart.neutral."}',
-  name: 'color.chart.neutral.hovered',
-  description: 'Hovered state of color.chart.neutral.',
-  exampleValue: '#7D818A'
-}, {
-  content: '{"name":"color.chart.red.bold","description":"For data visualisation only."}',
-  name: 'color.chart.red.bold',
-  description: 'For data visualisation only.',
-  exampleValue: '#F15B50'
-}, {
-  content: '{"name":"color.chart.red.bold.hovered","description":"Hovered state of color.chart.red.bold."}',
-  name: 'color.chart.red.bold.hovered',
-  description: 'Hovered state of color.chart.red.bold.',
-  exampleValue: '#E2483D'
-}, {
-  content: '{"name":"color.chart.red.bolder","description":"For data visualisation only."}',
-  name: 'color.chart.red.bolder',
-  description: 'For data visualisation only.',
-  exampleValue: '#E2483D'
-}, {
-  content: '{"name":"color.chart.red.bolder.hovered","description":"Hovered state of color.chart.red.bolder."}',
-  name: 'color.chart.red.bolder.hovered',
-  description: 'Hovered state of color.chart.red.bolder.',
-  exampleValue: '#C9372C'
-}, {
-  content: '{"name":"color.chart.red.boldest","description":"For data visualisation only."}',
-  name: 'color.chart.red.boldest',
-  description: 'For data visualisation only.',
-  exampleValue: '#AE2E24'
-}, {
-  content: '{"name":"color.chart.red.boldest.hovered","description":"Hovered state of color.chart.red.boldest."}',
-  name: 'color.chart.red.boldest.hovered',
-  description: 'Hovered state of color.chart.red.boldest.',
-  exampleValue: '#5D1F1A'
-}, {
-  content: '{"name":"color.chart.orange.bold","description":"For data visualisation only."}',
-  name: 'color.chart.orange.bold',
-  description: 'For data visualisation only.',
-  exampleValue: '#E06C00'
-}, {
-  content: '{"name":"color.chart.orange.bold.hovered","description":"Hovered state of color.chart.orange.bold."}',
-  name: 'color.chart.orange.bold.hovered',
-  description: 'Hovered state of color.chart.orange.bold.',
-  exampleValue: '#BD5B00'
-}, {
-  content: '{"name":"color.chart.orange.bolder","description":"For data visualisation only."}',
-  name: 'color.chart.orange.bolder',
-  description: 'For data visualisation only.',
-  exampleValue: '#BD5B00'
-}, {
-  content: '{"name":"color.chart.orange.bolder.hovered","description":"Hovered state of color.chart.orange.bolder."}',
-  name: 'color.chart.orange.bolder.hovered',
-  description: 'Hovered state of color.chart.orange.bolder.',
-  exampleValue: '#9E4C00'
-}, {
-  content: '{"name":"color.chart.orange.boldest","description":"For data visualisation only."}',
-  name: 'color.chart.orange.boldest',
-  description: 'For data visualisation only.',
-  exampleValue: '#7A3B00'
-}, {
-  content: '{"name":"color.chart.orange.boldest.hovered","description":"Hovered state of color.chart.orange.boldest."}',
-  name: 'color.chart.orange.boldest.hovered',
-  description: 'Hovered state of color.chart.orange.boldest.',
-  exampleValue: '#693200'
-}, {
-  content: '{"name":"color.chart.yellow.bold","description":"For data visualisation only."}',
-  name: 'color.chart.yellow.bold',
-  description: 'For data visualisation only.',
-  exampleValue: '#B38600'
-}, {
-  content: '{"name":"color.chart.yellow.bold.hovered","description":"Hovered state of color.chart.yellow.bold."}',
-  name: 'color.chart.yellow.bold.hovered',
-  description: 'Hovered state of color.chart.yellow.bold.',
-  exampleValue: '#946F00'
-}, {
-  content: '{"name":"color.chart.yellow.bolder","description":"For data visualisation only."}',
-  name: 'color.chart.yellow.bolder',
-  description: 'For data visualisation only.',
-  exampleValue: '#946F00'
-}, {
-  content: '{"name":"color.chart.yellow.bolder.hovered","description":"Hovered state of color.chart.yellow.bolder."}',
-  name: 'color.chart.yellow.bolder.hovered',
-  description: 'Hovered state of color.chart.yellow.bolder.',
-  exampleValue: '#7F5F01'
-}, {
-  content: '{"name":"color.chart.yellow.boldest","description":"For data visualisation only."}',
-  name: 'color.chart.yellow.boldest',
-  description: 'For data visualisation only.',
-  exampleValue: '#7F5F01'
-}, {
-  content: '{"name":"color.chart.yellow.boldest.hovered","description":"Hovered state of color.chart.yellow.boldest."}',
-  name: 'color.chart.yellow.boldest.hovered',
-  description: 'Hovered state of color.chart.yellow.boldest.',
-  exampleValue: '#533F04'
-}, {
-  content: '{"name":"color.chart.green.bold","description":"For data visualisation only."}',
-  name: 'color.chart.green.bold',
-  description: 'For data visualisation only.',
-  exampleValue: '#22A06B'
-}, {
-  content: '{"name":"color.chart.green.bold.hovered","description":"Hovered state of color.chart.green.bold."}',
-  name: 'color.chart.green.bold.hovered',
-  description: 'Hovered state of color.chart.green.bold.',
-  exampleValue: '#1F845A'
-}, {
-  content: '{"name":"color.chart.green.bolder","description":"For data visualisation only."}',
-  name: 'color.chart.green.bolder',
-  description: 'For data visualisation only.',
-  exampleValue: '#1F845A'
-}, {
-  content: '{"name":"color.chart.green.bolder.hovered","description":"Hovered state of color.chart.green.bolder."}',
-  name: 'color.chart.green.bolder.hovered',
-  description: 'Hovered state of color.chart.green.bolder.',
-  exampleValue: '#216E4E'
-}, {
-  content: '{"name":"color.chart.green.boldest","description":"For data visualisation only."}',
-  name: 'color.chart.green.boldest',
-  description: 'For data visualisation only.',
-  exampleValue: '#216E4E'
-}, {
-  content: '{"name":"color.chart.green.boldest.hovered","description":"Hovered state of color.chart.green.boldest."}',
-  name: 'color.chart.green.boldest.hovered',
-  description: 'Hovered state of color.chart.green.boldest.',
-  exampleValue: '#164B35'
-}, {
-  content: '{"name":"color.chart.teal.bold","description":"For data visualisation only."}',
-  name: 'color.chart.teal.bold',
-  description: 'For data visualisation only.',
-  exampleValue: '#2898BD'
-}, {
-  content: '{"name":"color.chart.teal.bold.hovered","description":"Hovered state of color.chart.teal.bold."}',
-  name: 'color.chart.teal.bold.hovered',
-  description: 'Hovered state of color.chart.teal.bold.',
-  exampleValue: '#227D9B'
-}, {
-  content: '{"name":"color.chart.teal.bolder","description":"For data visualisation only."}',
-  name: 'color.chart.teal.bolder',
-  description: 'For data visualisation only.',
-  exampleValue: '#227D9B'
-}, {
-  content: '{"name":"color.chart.teal.bolder.hovered","description":"Hovered state of color.chart.teal.bolder."}',
-  name: 'color.chart.teal.bolder.hovered',
-  description: 'Hovered state of color.chart.teal.bolder.',
-  exampleValue: '#206A83'
-}, {
-  content: '{"name":"color.chart.teal.boldest","description":"For data visualisation only."}',
-  name: 'color.chart.teal.boldest',
-  description: 'For data visualisation only.',
-  exampleValue: '#206A83'
-}, {
-  content: '{"name":"color.chart.teal.boldest.hovered","description":"Hovered state of color.chart.teal.boldest."}',
-  name: 'color.chart.teal.boldest.hovered',
-  description: 'Hovered state of color.chart.teal.boldest.',
-  exampleValue: '#164555'
-}, {
-  content: '{"name":"color.chart.blue.bold","description":"For data visualisation only."}',
-  name: 'color.chart.blue.bold',
-  description: 'For data visualisation only.',
-  exampleValue: '#4688EC'
-}, {
-  content: '{"name":"color.chart.blue.bold.hovered","description":"Hovered state of color.chart.blue.bold."}',
-  name: 'color.chart.blue.bold.hovered',
-  description: 'Hovered state of color.chart.blue.bold.',
-  exampleValue: '#357DE8'
-}, {
-  content: '{"name":"color.chart.blue.bolder","description":"For data visualisation only."}',
-  name: 'color.chart.blue.bolder',
-  description: 'For data visualisation only.',
-  exampleValue: '#357DE8'
-}, {
-  content: '{"name":"color.chart.blue.bolder.hovered","description":"Hovered state of color.chart.blue.bolder."}',
-  name: 'color.chart.blue.bolder.hovered',
-  description: 'Hovered state of color.chart.blue.bolder.',
-  exampleValue: '#1868DB'
-}, {
-  content: '{"name":"color.chart.blue.boldest","description":"For data visualisation only."}',
-  name: 'color.chart.blue.boldest',
-  description: 'For data visualisation only.',
-  exampleValue: '#1558BC'
-}, {
-  content: '{"name":"color.chart.blue.boldest.hovered","description":"Hovered state of color.chart.blue.boldest."}',
-  name: 'color.chart.blue.boldest.hovered',
-  description: 'Hovered state of color.chart.blue.boldest.',
-  exampleValue: '#123263'
-}, {
-  content: '{"name":"color.chart.purple.bold","description":"For data visualisation only."}',
-  name: 'color.chart.purple.bold',
-  description: 'For data visualisation only.',
-  exampleValue: '#BF63F3'
-}, {
-  content: '{"name":"color.chart.purple.bold.hovered","description":"Hovered state of color.chart.purple.bold."}',
-  name: 'color.chart.purple.bold.hovered',
-  description: 'Hovered state of color.chart.purple.bold.',
-  exampleValue: '#AF59E1'
-}, {
-  content: '{"name":"color.chart.purple.bolder","description":"For data visualisation only."}',
-  name: 'color.chart.purple.bolder',
-  description: 'For data visualisation only.',
-  exampleValue: '#AF59E1'
-}, {
-  content: '{"name":"color.chart.purple.bolder.hovered","description":"Hovered state of color.chart.purple.bolder."}',
-  name: 'color.chart.purple.bolder.hovered',
-  description: 'Hovered state of color.chart.purple.bolder.',
-  exampleValue: '#964AC0'
-}, {
-  content: '{"name":"color.chart.purple.boldest","description":"For data visualisation only."}',
-  name: 'color.chart.purple.boldest',
-  description: 'For data visualisation only.',
-  exampleValue: '#803FA5'
-}, {
-  content: '{"name":"color.chart.purple.boldest.hovered","description":"Hovered state of color.chart.purple.boldest."}',
-  name: 'color.chart.purple.boldest.hovered',
-  description: 'Hovered state of color.chart.purple.boldest.',
-  exampleValue: '#48245D'
-}, {
-  content: '{"name":"color.chart.magenta.bold","description":"For data visualisation only."}',
-  name: 'color.chart.magenta.bold',
-  description: 'For data visualisation only.',
-  exampleValue: '#DA62AC'
-}, {
-  content: '{"name":"color.chart.magenta.bold.hovered","description":"Hovered state of color.chart.magenta.bold."}',
-  name: 'color.chart.magenta.bold.hovered',
-  description: 'Hovered state of color.chart.magenta.bold.',
-  exampleValue: '#CD519D'
-}, {
-  content: '{"name":"color.chart.magenta.bolder","description":"For data visualisation only."}',
-  name: 'color.chart.magenta.bolder',
-  description: 'For data visualisation only.',
-  exampleValue: '#CD519D'
-}, {
-  content: '{"name":"color.chart.magenta.bolder.hovered","description":"Hovered state of color.chart.magenta.bolder."}',
-  name: 'color.chart.magenta.bolder.hovered',
-  description: 'Hovered state of color.chart.magenta.bolder.',
-  exampleValue: '#AE4787'
-}, {
-  content: '{"name":"color.chart.magenta.boldest","description":"For data visualisation only."}',
-  name: 'color.chart.magenta.boldest',
-  description: 'For data visualisation only.',
-  exampleValue: '#943D73'
-}, {
-  content: '{"name":"color.chart.magenta.boldest.hovered","description":"Hovered state of color.chart.magenta.boldest."}',
-  name: 'color.chart.magenta.boldest.hovered',
-  description: 'Hovered state of color.chart.magenta.boldest.',
-  exampleValue: '#50253F'
-}, {
-  content: '{"name":"color.chart.gray.bold","description":"For data visualisation only."}',
-  name: 'color.chart.gray.bold',
-  description: 'For data visualisation only.',
-  exampleValue: '#8C8F97'
-}, {
-  content: '{"name":"color.chart.gray.bold.hovered","description":"Hovered state of color.chart.gray.bold."}',
-  name: 'color.chart.gray.bold.hovered',
-  description: 'Hovered state of color.chart.gray.bold.',
-  exampleValue: '#7D818A'
-}, {
-  content: '{"name":"color.chart.gray.bolder","description":"For data visualisation only."}',
-  name: 'color.chart.gray.bolder',
-  description: 'For data visualisation only.',
-  exampleValue: '#7D818A'
-}, {
-  content: '{"name":"color.chart.gray.bolder.hovered","description":"Hovered state of color.chart.gray.bolder."}',
-  name: 'color.chart.gray.bolder.hovered',
-  description: 'Hovered state of color.chart.gray.bolder.',
-  exampleValue: '#6B6E76'
-}, {
-  content: '{"name":"color.chart.gray.boldest","description":"For data visualisation only."}',
-  name: 'color.chart.gray.boldest',
-  description: 'For data visualisation only.',
-  exampleValue: '#505258'
-}, {
-  content: '{"name":"color.chart.gray.boldest.hovered","description":"Hovered state of color.chart.gray.boldest."}',
-  name: 'color.chart.gray.boldest.hovered',
-  description: 'Hovered state of color.chart.gray.boldest.',
-  exampleValue: '#3B3D42'
-}, {
-  content: '{"name":"color.chart.brand","description":"Our primary color for data visualisation. Use when only one color is required."}',
-  name: 'color.chart.brand',
-  description: 'Our primary color for data visualisation. Use when only one color is required.',
-  exampleValue: '#357DE8'
-}, {
-  content: '{"name":"color.chart.brand.hovered","description":"Hovered state of color.chart.brand."}',
-  name: 'color.chart.brand.hovered',
-  description: 'Hovered state of color.chart.brand.',
-  exampleValue: '#1868DB'
-}, {
-  content: '{"name":"color.chart.danger","description":"For data visualisation communicating negative information, such as \'off track\'."}',
-  name: 'color.chart.danger',
-  description: "For data visualisation communicating negative information, such as 'off track'.",
-  exampleValue: '#E2483D'
-}, {
-  content: '{"name":"color.chart.danger.hovered","description":"Hovered state of color.chart.danger."}',
-  name: 'color.chart.danger.hovered',
-  description: 'Hovered state of color.chart.danger.',
-  exampleValue: '#C9372C'
-}, {
-  content: '{"name":"color.chart.danger.bold","description":"A stronger emphasis option of color.chart.danger."}',
-  name: 'color.chart.danger.bold',
-  description: 'A stronger emphasis option of color.chart.danger.',
-  exampleValue: '#872821'
-}, {
-  content: '{"name":"color.chart.danger.bold.hovered","description":"Hovered state of color.chart.danger.bold."}',
-  name: 'color.chart.danger.bold.hovered',
-  description: 'Hovered state of color.chart.danger.bold.',
-  exampleValue: '#5D1F1A'
-}, {
-  content: '{"name":"color.chart.warning","description":"For data visualisation communicating caution, such as \'at risk\' statuses."}',
-  name: 'color.chart.warning',
-  description: "For data visualisation communicating caution, such as 'at risk' statuses.",
-  exampleValue: '#F68909'
-}, {
-  content: '{"name":"color.chart.warning.hovered","description":"Hovered state of color.chart.warning."}',
-  name: 'color.chart.warning.hovered',
-  description: 'Hovered state of color.chart.warning.',
-  exampleValue: '#E06C00'
-}, {
-  content: '{"name":"color.chart.warning.bold","description":"A stronger emphasis option of color.chart.warning."}',
-  name: 'color.chart.warning.bold',
-  description: 'A stronger emphasis option of color.chart.warning.',
-  exampleValue: '#BD5B00'
-}, {
-  content: '{"name":"color.chart.warning.bold.hovered","description":"Hovered state of color.chart.warning.bold."}',
-  name: 'color.chart.warning.bold.hovered',
-  description: 'Hovered state of color.chart.warning.bold.',
-  exampleValue: '#9E4C00'
-}, {
-  content: '{"name":"color.chart.success","description":"For data visualisation communicating positive information, such as \'on track\'."}',
-  name: 'color.chart.success',
-  description: "For data visualisation communicating positive information, such as 'on track'.",
-  exampleValue: '#82B536'
-}, {
-  content: '{"name":"color.chart.success.hovered","description":"Hovered state of color.chart.success."}',
-  name: 'color.chart.success.hovered',
-  description: 'Hovered state of color.chart.success.',
-  exampleValue: '#6A9A23'
-}, {
-  content: '{"name":"color.chart.success.bold","description":"A stronger emphasis option of color.chart.success."}',
-  name: 'color.chart.success.bold',
-  description: 'A stronger emphasis option of color.chart.success.',
-  exampleValue: '#5B7F24'
-}, {
-  content: '{"name":"color.chart.success.bold.hovered","description":"Hovered state of color.chart.success.bold."}',
-  name: 'color.chart.success.bold.hovered',
-  description: 'Hovered state of color.chart.success.bold.',
-  exampleValue: '#4C6B1F'
-}, {
-  content: '{"name":"color.chart.discovery","description":"For data visualisation communicating \'new\' statuses."}',
-  name: 'color.chart.discovery',
-  description: "For data visualisation communicating 'new' statuses.",
-  exampleValue: '#BF63F3'
-}, {
-  content: '{"name":"color.chart.discovery.hovered","description":"Hovered state of color.chart.discovery."}',
-  name: 'color.chart.discovery.hovered',
-  description: 'Hovered state of color.chart.discovery.',
-  exampleValue: '#AF59E1'
-}, {
-  content: '{"name":"color.chart.discovery.bold","description":"A stronger emphasis option of color.chart.discovery."}',
-  name: 'color.chart.discovery.bold',
-  description: 'A stronger emphasis option of color.chart.discovery.',
-  exampleValue: '#803FA5'
-}, {
-  content: '{"name":"color.chart.discovery.bold.hovered","description":"Hovered state of color.chart.discovery.bold."}',
-  name: 'color.chart.discovery.bold.hovered',
-  description: 'Hovered state of color.chart.discovery.bold.',
-  exampleValue: '#964AC0'
-}, {
-  content: '{"name":"color.chart.information","description":"For data visualisation communicating low priority or in-progress statuses."}',
-  name: 'color.chart.information',
-  description: 'For data visualisation communicating low priority or in-progress statuses.',
-  exampleValue: '#357DE8'
-}, {
-  content: '{"name":"color.chart.information.hovered","description":"Hovered state of color.chart.information."}',
-  name: 'color.chart.information.hovered',
-  description: 'Hovered state of color.chart.information.',
-  exampleValue: '#1868DB'
-}, {
-  content: '{"name":"color.chart.information.bold","description":"A stronger emphasis option of color.chart.information."}',
-  name: 'color.chart.information.bold',
-  description: 'A stronger emphasis option of color.chart.information.',
-  exampleValue: '#1558BC'
-}, {
-  content: '{"name":"color.chart.information.bold.hovered","description":"Hovered state of color.chart.information.bold."}',
-  name: 'color.chart.information.bold.hovered',
-  description: 'Hovered state of color.chart.information.bold.',
-  exampleValue: '#123263'
-}, {
-  content: '{"name":"elevation.surface","description":"Use as the primary background for the UI."}',
-  name: 'elevation.surface',
-  description: 'Use as the primary background for the UI.',
-  exampleValue: '#FFFFFF'
-}, {
-  content: '{"name":"elevation.surface.hovered","description":"Hovered state of elevation.surface"}',
-  name: 'elevation.surface.hovered',
-  description: 'Hovered state of elevation.surface',
-  exampleValue: '#F0F1F2'
-}, {
-  content: '{"name":"elevation.surface.pressed","description":"Pressed state of elevation.surface"}',
-  name: 'elevation.surface.pressed',
-  description: 'Pressed state of elevation.surface',
-  exampleValue: '#DDDEE1'
-}, {
-  content: '{"name":"elevation.surface.overlay","description":"Use for the background of elements that sit on top of they UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons. Also use for the background of raised cards in a dragged state. Combine with elevation.shadow.overlay."}',
-  name: 'elevation.surface.overlay',
-  description: 'Use for the background of elements that sit on top of they UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons. Also use for the background of raised cards in a dragged state. Combine with elevation.shadow.overlay.',
-  exampleValue: '#FFFFFF'
-}, {
-  content: '{"name":"elevation.surface.overlay.hovered","description":"Hovered state of elevation.surface.overlay"}',
-  name: 'elevation.surface.overlay.hovered',
-  description: 'Hovered state of elevation.surface.overlay',
-  exampleValue: '#F0F1F2'
-}, {
-  content: '{"name":"elevation.surface.overlay.pressed","description":"Pressed state of elevation.surface.overlay"}',
-  name: 'elevation.surface.overlay.pressed',
-  description: 'Pressed state of elevation.surface.overlay',
-  exampleValue: '#DDDEE1'
-}, {
-  content: '{"name":"elevation.surface.raised","description":"Use for the background of cards that can be moved, such as Jira cards on a Kanban board. Combine with elevation.shadow.raised."}',
-  name: 'elevation.surface.raised',
-  description: 'Use for the background of cards that can be moved, such as Jira cards on a Kanban board. Combine with elevation.shadow.raised.',
-  exampleValue: '#FFFFFF'
-}, {
-  content: '{"name":"elevation.surface.raised.hovered","description":"Hovered state of elevation.surface.raised"}',
-  name: 'elevation.surface.raised.hovered',
-  description: 'Hovered state of elevation.surface.raised',
-  exampleValue: '#F0F1F2'
-}, {
-  content: '{"name":"elevation.surface.raised.pressed","description":"Pressed state of elevation.surface.raised"}',
-  name: 'elevation.surface.raised.pressed',
-  description: 'Pressed state of elevation.surface.raised',
-  exampleValue: '#DDDEE1'
-}, {
-  content: '{"name":"elevation.surface.sunken","description":"A secondary background for the UI commonly used for grouping items, such as Jira cards in columns."}',
-  name: 'elevation.surface.sunken',
-  description: 'A secondary background for the UI commonly used for grouping items, such as Jira cards in columns.',
-  exampleValue: '#F8F8F8'
-}, {
-  content: '{"name":"elevation.shadow.overflow","description":"Use to create a shadow when content scrolls under other content."}',
-  name: 'elevation.shadow.overflow',
-  description: 'Use to create a shadow when content scrolls under other content.',
-  exampleValue: '0px 0px 8px #1E1F2129, 0px 0px 1px #1E1F211F'
-}, {
-  content: '{"name":"elevation.shadow.overflow.perimeter","description":"Use only when elevation.shadow.overflow is not technically feasible to implement. Pair with elevation.shadow.overflow.spread to replicate the overflow shadow."}',
-  name: 'elevation.shadow.overflow.perimeter',
-  description: 'Use only when elevation.shadow.overflow is not technically feasible to implement. Pair with elevation.shadow.overflow.spread to replicate the overflow shadow.',
-  exampleValue: '#1E1F211f'
-}, {
-  content: '{"name":"elevation.shadow.overflow.spread","description":"Use only when elevation.shadow.overflow is not technically feasible to implement. Pair with elevation.shadow.overflow.perimeter to replicate the overflow shadow."}',
-  name: 'elevation.shadow.overflow.spread',
-  description: 'Use only when elevation.shadow.overflow is not technically feasible to implement. Pair with elevation.shadow.overflow.perimeter to replicate the overflow shadow.',
-  exampleValue: '#1E1F2129'
-}, {
-  content: '{"name":"elevation.shadow.overlay","description":"Use for the box shadow of elements that sit on top of the UI, such as modals, dropdown menus, flags, and inline dialogs. Combine with elevation.surface.overlay\\n\\nAlso use for the box shadow of raised cards in a dragged state."}',
-  name: 'elevation.shadow.overlay',
-  description: 'Use for the box shadow of elements that sit on top of the UI, such as modals, dropdown menus, flags, and inline dialogs. Combine with elevation.surface.overlay\n\nAlso use for the box shadow of raised cards in a dragged state.',
-  exampleValue: '0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214F'
-}, {
-  content: '{"name":"elevation.shadow.raised","description":"Use for the box shadow of raised card elements, such as Jira cards on a Kanban board. Combine with elevation.surface.raised"}',
-  name: 'elevation.shadow.raised',
-  description: 'Use for the box shadow of raised card elements, such as Jira cards on a Kanban board. Combine with elevation.surface.raised',
-  exampleValue: '0px 1px 1px #1E1F2140, 0px 0px 1px #1E1F214F'
-}, {
-  content: '{"name":"opacity.disabled","description":"Apply to images when in a disabled state."}',
-  name: 'opacity.disabled',
-  description: 'Apply to images when in a disabled state.',
-  exampleValue: '0.4'
-}, {
-  content: '{"name":"opacity.loading","description":"Apply to content that sits under a loading spinner."}',
-  name: 'opacity.loading',
-  description: 'Apply to content that sits under a loading spinner.',
-  exampleValue: '0.2'
-}, {
-  content: '{"name":"utility.UNSAFE.transparent","description":"Transparent token used for backwards compatibility between new and old theming solutions"}',
-  name: 'utility.UNSAFE.transparent',
-  description: 'Transparent token used for backwards compatibility between new and old theming solutions',
-  exampleValue: 'transparent'
-}, {
-  content: '{"name":"utility.elevation.surface.current","description":"A dynamic token that represents the current surface color set by a parent element. It defaults to the \'elevation.surface\' token value."}',
-  name: 'utility.elevation.surface.current',
-  description: "A dynamic token that represents the current surface color set by a parent element. It defaults to the 'elevation.surface' token value.",
-  exampleValue: '#FFFFFF'
-}, {
-  content: '{"name":"space.0","description":"Equates to `0`. Use for resetting default spacing styles."}',
-  name: 'space.0',
-  description: 'Equates to `0`. Use for resetting default spacing styles.',
-  exampleValue: '0rem'
-}, {
-  content: '{"name":"space.025","description":"Use for small and compact pieces of UI."}',
-  name: 'space.025',
-  description: 'Use for small and compact pieces of UI.',
-  exampleValue: '0.125rem'
-}, {
-  content: '{"name":"space.050","description":"Use for small and compact pieces of UI."}',
-  name: 'space.050',
-  description: 'Use for small and compact pieces of UI.',
-  exampleValue: '0.25rem'
-}, {
-  content: '{"name":"space.075","description":"Use for small and compact pieces of UI."}',
-  name: 'space.075',
-  description: 'Use for small and compact pieces of UI.',
-  exampleValue: '0.375rem'
-}, {
-  content: '{"name":"space.100","description":"Use for small and compact pieces of UI."}',
-  name: 'space.100',
-  description: 'Use for small and compact pieces of UI.',
-  exampleValue: '0.5rem'
-}, {
-  content: '{"name":"space.150","description":"Use for larger and less dense pieces of UI."}',
-  name: 'space.150',
-  description: 'Use for larger and less dense pieces of UI.',
-  exampleValue: '0.75rem'
-}, {
-  content: '{"name":"space.200","description":"Use for larger and less dense pieces of UI."}',
-  name: 'space.200',
-  description: 'Use for larger and less dense pieces of UI.',
-  exampleValue: '1rem'
-}, {
-  content: '{"name":"space.250","description":"Use for larger and less dense pieces of UI."}',
-  name: 'space.250',
-  description: 'Use for larger and less dense pieces of UI.',
-  exampleValue: '1.25rem'
-}, {
-  content: '{"name":"space.300","description":"Use for larger and less dense pieces of UI."}',
-  name: 'space.300',
-  description: 'Use for larger and less dense pieces of UI.',
-  exampleValue: '1.5rem'
-}, {
-  content: '{"name":"space.400","description":"Use for the largest pieces of UI and for layout elements."}',
-  name: 'space.400',
-  description: 'Use for the largest pieces of UI and for layout elements.',
-  exampleValue: '2rem'
-}, {
-  content: '{"name":"space.500","description":"Use for the largest pieces of UI and for layout elements."}',
-  name: 'space.500',
-  description: 'Use for the largest pieces of UI and for layout elements.',
-  exampleValue: '2.5rem'
-}, {
-  content: '{"name":"space.600","description":"Use for the largest pieces of UI and for layout elements."}',
-  name: 'space.600',
-  description: 'Use for the largest pieces of UI and for layout elements.',
-  exampleValue: '3rem'
-}, {
-  content: '{"name":"space.800","description":"Use for the largest pieces of UI and for layout elements."}',
-  name: 'space.800',
-  description: 'Use for the largest pieces of UI and for layout elements.',
-  exampleValue: '4rem'
-}, {
-  content: '{"name":"space.1000","description":"Use for the largest pieces of UI and for layout elements."}',
-  name: 'space.1000',
-  description: 'Use for the largest pieces of UI and for layout elements.',
-  exampleValue: '5rem'
-}, {
-  content: '{"name":"space.negative.025","description":"Use to negate parent whitespace or overlap small pieces of UI."}',
-  name: 'space.negative.025',
-  description: 'Use to negate parent whitespace or overlap small pieces of UI.',
-  exampleValue: '-0.125rem'
-}, {
-  content: '{"name":"space.negative.050","description":"Use to negate parent whitespace or overlap small pieces of UI."}',
-  name: 'space.negative.050',
-  description: 'Use to negate parent whitespace or overlap small pieces of UI.',
-  exampleValue: '-0.25rem'
-}, {
-  content: '{"name":"space.negative.075","description":"Use to negate parent whitespace or overlap small pieces of UI."}',
-  name: 'space.negative.075',
-  description: 'Use to negate parent whitespace or overlap small pieces of UI.',
-  exampleValue: '-0.375rem'
-}, {
-  content: '{"name":"space.negative.100","description":"Use to negate parent whitespace or overlap small pieces of UI."}',
-  name: 'space.negative.100',
-  description: 'Use to negate parent whitespace or overlap small pieces of UI.',
-  exampleValue: '-0.5rem'
-}, {
-  content: '{"name":"space.negative.150","description":"Use to negate parent whitespace or overlap larger pieces of UI."}',
-  name: 'space.negative.150',
-  description: 'Use to negate parent whitespace or overlap larger pieces of UI.',
-  exampleValue: '-0.75rem'
-}, {
-  content: '{"name":"space.negative.200","description":"Use to negate parent whitespace or overlap larger pieces of UI."}',
-  name: 'space.negative.200',
-  description: 'Use to negate parent whitespace or overlap larger pieces of UI.',
-  exampleValue: '-1rem'
-}, {
-  content: '{"name":"space.negative.250","description":"Use to negate parent whitespace or overlap larger pieces of UI."}',
-  name: 'space.negative.250',
-  description: 'Use to negate parent whitespace or overlap larger pieces of UI.',
-  exampleValue: '-1.25rem'
-}, {
-  content: '{"name":"space.negative.300","description":"Use to negate parent whitespace or overlap larger pieces of UI."}',
-  name: 'space.negative.300',
-  description: 'Use to negate parent whitespace or overlap larger pieces of UI.',
-  exampleValue: '-1.5rem'
-}, {
-  content: '{"name":"space.negative.400","description":"Use to negate parent whitespace or overlap the largest pieces of UI."}',
-  name: 'space.negative.400',
-  description: 'Use to negate parent whitespace or overlap the largest pieces of UI.',
-  exampleValue: '-2rem'
-}, {
-  content: '{"name":"font.heading.xxlarge","description":"For overlapping brand with app promotions, such as marketplace content. Migrate instances of H900 to Heading XXL."}',
-  name: 'font.heading.xxlarge',
-  description: 'For overlapping brand with app promotions, such as marketplace content. Migrate instances of H900 to Heading XXL.',
-  exampleValue: 'normal 653 2rem/2.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
-}, {
-  content: '{"name":"font.heading.xlarge","description":"For overlapping brand with app promotions, such as marketplace content. Migrate instances of H800 to Heading XL."}',
-  name: 'font.heading.xlarge',
-  description: 'For overlapping brand with app promotions, such as marketplace content. Migrate instances of H800 to Heading XL.',
-  exampleValue: 'normal 653 1.75rem/2rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
-}, {
-  content: '{"name":"font.heading.large","description":"App page titles, such as forms. Migrate instances of H700 to Heading L."}',
-  name: 'font.heading.large',
-  description: 'App page titles, such as forms. Migrate instances of H700 to Heading L.',
-  exampleValue: 'normal 653 1.5rem/1.75rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
-}, {
-  content: '{"name":"font.heading.medium","description":"Headers in large components, such as modal dialogs. Migrate instances of H600 to Heading M."}',
-  name: 'font.heading.medium',
-  description: 'Headers in large components, such as modal dialogs. Migrate instances of H600 to Heading M.',
-  exampleValue: 'normal 653 1.25rem/1.5rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
-}, {
-  content: '{"name":"font.heading.small","description":"For headers in small components where space is limited. Migrate instances of H500 to Heading S."}',
-  name: 'font.heading.small',
-  description: 'For headers in small components where space is limited. Migrate instances of H500 to Heading S.',
-  exampleValue: 'normal 653 1rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
-}, {
-  content: '{"name":"font.heading.xsmall","description":"For headers in small components where space is limited. Migrate instances of H400 to Heading XS."}',
-  name: 'font.heading.xsmall',
-  description: 'For headers in small components where space is limited. Migrate instances of H400 to Heading XS.',
-  exampleValue: 'normal 653 0.875rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
-}, {
-  content: '{"name":"font.heading.xxsmall","description":"For headers in fine print or tight spaces. Use sparingly. Migrate instances of H100, H200 and H300 to Heading XXS."}',
-  name: 'font.heading.xxsmall',
-  description: 'For headers in fine print or tight spaces. Use sparingly. Migrate instances of H100, H200 and H300 to Heading XXS.',
-  exampleValue: 'normal 653 0.75rem/1rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
-}, {
-  content: '{"name":"font.body.large","description":"For long-form text, such as in blogs."}',
-  name: 'font.body.large',
-  description: 'For long-form text, such as in blogs.',
-  exampleValue: 'normal 400 1rem/1.5rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
-}, {
-  content: '{"name":"font.body","description":"Use in short descriptions or labels. The default size for text in components. Migrate instances of Paragraph Default and UI Text to Body M."}',
-  name: 'font.body',
-  description: 'Use in short descriptions or labels. The default size for text in components. Migrate instances of Paragraph Default and UI Text to Body M.',
-  exampleValue: 'normal 400 0.875rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
-}, {
-  content: '{"name":"font.body.small","description":"Use in secondary level content such as fine print or semantic messaging. Use sparingly. Migrate instances of Small text to Body S."}',
-  name: 'font.body.small',
-  description: 'Use in secondary level content such as fine print or semantic messaging. Use sparingly. Migrate instances of Small text to Body S.',
-  exampleValue: 'normal 400 0.75rem/1rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
-}, {
-  content: '{"name":"font.body.UNSAFE_small","description":"UNSAFE - Do not use. Temporary 12px fontsize token. Will be deprecated and replaced with stable small token"}',
-  name: 'font.body.UNSAFE_small',
-  description: 'UNSAFE - Do not use. Temporary 12px fontsize token. Will be deprecated and replaced with stable small token',
-  exampleValue: 'normal 400 0.75rem/1rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
-}, {
-  content: '{"name":"font.metric.large","description":"Use to emphasize a number within a large donut."}',
-  name: 'font.metric.large',
-  description: 'Use to emphasize a number within a large donut.',
-  exampleValue: 'normal 653 1.75rem/2rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
-}, {
-  content: '{"name":"font.metric.medium","description":"Use to emphasize a number within a medium donut."}',
-  name: 'font.metric.medium',
-  description: 'Use to emphasize a number within a medium donut.',
-  exampleValue: 'normal 653 1.5rem/1.75rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
-}, {
-  content: '{"name":"font.metric.small","description":"Use to emphasize a number and words in single-value tiles, or small donuts."}',
-  name: 'font.metric.small',
-  description: 'Use to emphasize a number and words in single-value tiles, or small donuts.',
-  exampleValue: 'normal 653 1rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
-}, {
-  content: '{"name":"font.code","description":"For representing code only, either inline or in code blocks."}',
-  name: 'font.code',
-  description: 'For representing code only, either inline or in code blocks.',
-  exampleValue: 'normal 400 0.875em/1 "Atlassian Mono", ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace'
-}, {
-  content: '{"name":"font.weight.regular","description":"Default font weight for body text styles."}',
-  name: 'font.weight.regular',
-  description: 'Default font weight for body text styles.',
-  exampleValue: '400'
-}, {
-  content: '{"name":"font.weight.medium","description":"For all text that may appear beside iconography, such as in a button."}',
-  name: 'font.weight.medium',
-  description: 'For all text that may appear beside iconography, such as in a button.',
-  exampleValue: '500'
-}, {
-  content: '{"name":"font.weight.semibold","description":"Use with caution as fallback fonts do not support this font weight and will default to bold weight."}',
-  name: 'font.weight.semibold',
-  description: 'Use with caution as fallback fonts do not support this font weight and will default to bold weight.',
-  exampleValue: '600'
-}, {
-  content: '{"name":"font.weight.bold","description":"Use sparingly for emphasising text, such as in a lozenge."}',
-  name: 'font.weight.bold',
-  description: 'Use sparingly for emphasising text, such as in a lozenge.',
-  exampleValue: '653'
-}, {
-  content: '{"name":"font.family.heading","description":"For our default UI heading text."}',
-  name: 'font.family.heading',
-  description: 'For our default UI heading text.',
-  exampleValue: '"Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
-}, {
-  content: '{"name":"font.family.body","description":"For our default UI body text."}',
-  name: 'font.family.body',
-  description: 'For our default UI body text.',
-  exampleValue: '"Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
-}, {
-  content: '{"name":"font.family.code","description":"For representing code only."}',
-  name: 'font.family.code',
-  description: 'For representing code only.',
-  exampleValue: '"Atlassian Mono", ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace'
-}, {
-  content: '{"name":"font.family.brand.heading","description":"For our brand heading text. Uses Charlie Display."}',
-  name: 'font.family.brand.heading',
-  description: 'For our brand heading text. Uses Charlie Display.',
-  exampleValue: '"Charlie Display", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
-}, {
-  content: '{"name":"font.family.brand.body","description":"For our brand body text. Uses Charlie Text."}',
-  name: 'font.family.brand.body',
-  description: 'For our brand body text. Uses Charlie Text.',
-  exampleValue: '"Charlie Text", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
-}, {
-  content: '{"name":"radius.xsmall","description":"Use for small detail elements: badges, checkboxes, avatar labels, keyboard shortcuts."}',
-  name: 'radius.xsmall',
-  description: 'Use for small detail elements: badges, checkboxes, avatar labels, keyboard shortcuts.',
-  exampleValue: '0.125rem'
-}, {
-  content: '{"name":"radius.small","description":"Use for supporting elements: labels, lozenges, timestamps, tags, dates, tooltip containers, imagery inside a table, compact buttons."}',
-  name: 'radius.small',
-  description: 'Use for supporting elements: labels, lozenges, timestamps, tags, dates, tooltip containers, imagery inside a table, compact buttons.',
-  exampleValue: '0.25rem'
-}, {
-  content: '{"name":"radius.medium","description":"Use for interactive elements: buttons, inputs, text areas, selects, navigation items, smart links."}',
-  name: 'radius.medium',
-  description: 'Use for interactive elements: buttons, inputs, text areas, selects, navigation items, smart links.',
-  exampleValue: '0.375rem'
-}, {
-  content: '{"name":"radius.large","description":"Use for containment elements: cards, in-page containers, floating UI, dropdown menus."}',
-  name: 'radius.large',
-  description: 'Use for containment elements: cards, in-page containers, floating UI, dropdown menus.',
-  exampleValue: '0.5rem'
-}, {
-  content: '{"name":"radius.xlarge","description":"Use for large page elements: full-page containers, large containers, modals, Kanban columns, tables."}',
-  name: 'radius.xlarge',
-  description: 'Use for large page elements: full-page containers, large containers, modals, Kanban columns, tables.',
-  exampleValue: '0.75rem'
-}, {
-  content: '{"name":"radius.xxlarge","description":"Use for video player containers."}',
-  name: 'radius.xxlarge',
-  description: 'Use for video player containers.',
-  exampleValue: '1rem'
-}, {
-  content: '{"name":"radius.full","description":"Use for circular elements (user/people related): avatars, names, user-related UI, emoji reactions."}',
-  name: 'radius.full',
-  description: 'Use for circular elements (user/people related): avatars, names, user-related UI, emoji reactions.',
-  exampleValue: '624.9375rem'
-}, {
-  content: '{"name":"radius.tile","description":"Use this specific radius token exclusively for the tile component system."}',
-  name: 'radius.tile',
-  description: 'Use this specific radius token exclusively for the tile component system.',
-  exampleValue: '25%'
-}, {
-  content: '{"name":"border.width","description":"The default width for all standard component borders and dividers."}',
-  name: 'border.width',
-  description: 'The default width for all standard component borders and dividers.',
-  exampleValue: '0.0625rem'
-}, {
-  content: '{"name":"border.width.selected","description":"The width used to indicate a selected element, such as an active tab or a chosen item."}',
-  name: 'border.width.selected',
-  description: 'The width used to indicate a selected element, such as an active tab or a chosen item.',
-  exampleValue: '0.125rem'
-}, {
-  content: '{"name":"border.width.focused","description":"The width used for the focus ring on interactive elements."}',
-  name: 'border.width.focused',
-  description: 'The width used for the focus ring on interactive elements.',
-  exampleValue: '0.125rem'
-}];