@atlaskit/tokens 7.1.0 → 8.0.0

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

@@ -3,7 +3,7 @@
  *
  * Metadata for generation of of `@atlaskit/ads-mcp` and https://atlassian.design/llms-tokens.txt.
  *
- * @codegen <<SignedSource::fc7eb246882a1c2dfeef3f7836f83459>>
+ * @codegen <<SignedSource::2df7129dadaefaa82ff5761d8db12e31>>
  * @codegenCommand yarn build tokens
  */
 
@@ -11,7 +11,7 @@ export var tokens = [{
   name: 'color.text',
   path: ['color', 'text', '[default]'],
   description: 'Use for primary text, such as body copy, sentence case headers, and buttons.',
-  exampleValue: '#172B4D'
+  exampleValue: '#292A2E'
 }, {
   name: 'color.text.accent.lime',
   path: ['color', 'text', 'accent', 'lime', '[default]'],
@@ -36,12 +36,12 @@ export var tokens = [{
   name: 'color.text.accent.orange',
   path: ['color', 'text', 'accent', 'orange', '[default]'],
   description: 'Use for orange text on subtlest and subtler orange accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#A54800'
+  exampleValue: '#9E4C00'
 }, {
   name: 'color.text.accent.orange.bolder',
   path: ['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: '#702E00'
+  exampleValue: '#693200'
 }, {
   name: 'color.text.accent.yellow',
   path: ['color', 'text', 'accent', 'yellow', '[default]'],
@@ -76,22 +76,22 @@ export var tokens = [{
   name: 'color.text.accent.blue',
   path: ['color', 'text', 'accent', 'blue', '[default]'],
   description: 'Use for blue text on subtlest and subtler blue accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#0055CC'
+  exampleValue: '#1558BC'
 }, {
   name: 'color.text.accent.blue.bolder',
   path: ['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: '#09326C'
+  exampleValue: '#123263'
 }, {
   name: 'color.text.accent.purple',
   path: ['color', 'text', 'accent', 'purple', '[default]'],
   description: 'Use for purple text on subtlest and subtler purple accent backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#5E4DB2'
+  exampleValue: '#803FA5'
 }, {
   name: 'color.text.accent.purple.bolder',
   path: ['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: '#352C63'
+  exampleValue: '#48245D'
 }, {
   name: 'color.text.accent.magenta',
   path: ['color', 'text', 'accent', 'magenta', '[default]'],
@@ -106,17 +106,17 @@ export var tokens = [{
   name: 'color.text.accent.gray',
   path: ['color', 'text', 'accent', 'gray', '[default]'],
   description: 'Use for text on non-bold gray accent backgrounds, such as colored tags.',
-  exampleValue: '#44546F'
+  exampleValue: '#505258'
 }, {
   name: 'color.text.accent.gray.bolder',
   path: ['color', 'text', 'accent', 'gray', 'bolder'],
   description: 'Use for text and icons on gray subtle accent backgrounds.',
-  exampleValue: '#091E42'
+  exampleValue: '#1E1F21'
 }, {
   name: 'color.text.disabled',
   path: ['color', 'text', 'disabled'],
   description: 'Use for text in a disabled state.',
-  exampleValue: '#091E424F'
+  exampleValue: '#080F214A'
 }, {
   name: 'color.text.inverse',
   path: ['color', 'text', 'inverse'],
@@ -126,12 +126,12 @@ export var tokens = [{
   name: 'color.text.selected',
   path: ['color', 'text', 'selected'],
   description: 'Use for text in selected or opened states, such as tabs and dropdown buttons.',
-  exampleValue: '#0C66E4'
+  exampleValue: '#1868DB'
 }, {
   name: 'color.text.brand',
   path: ['color', 'text', 'brand'],
   description: 'Use for text that reinforces our brand.',
-  exampleValue: '#0C66E4'
+  exampleValue: '#1868DB'
 }, {
   name: 'color.text.danger',
   path: ['color', 'text', 'danger'],
@@ -141,62 +141,62 @@ export var tokens = [{
   name: 'color.text.warning',
   path: ['color', 'text', 'warning', '[default]'],
   description: 'Use for text to emphasize caution, such as in moved lozenges.',
-  exampleValue: '#A54800'
+  exampleValue: '#9E4C00'
 }, {
   name: 'color.text.warning.inverse',
   path: ['color', 'text', 'warning', 'inverse'],
   description: 'Use for text when on bold warning backgrounds.',
-  exampleValue: '#172B4D'
+  exampleValue: '#292A2E'
 }, {
   name: 'color.text.success',
   path: ['color', 'text', 'success'],
   description: 'Use for text to communicate a favorable outcome, such as input field success messaging.',
-  exampleValue: '#216E4E'
+  exampleValue: '#4C6B1F'
 }, {
   name: 'color.text.discovery',
   path: ['color', 'text', 'discovery'],
   description: 'Use for text to emphasize change or something new, such as in new lozenges.',
-  exampleValue: '#5E4DB2'
+  exampleValue: '#803FA5'
 }, {
   name: 'color.text.information',
   path: ['color', 'text', 'information'],
   description: 'Use for informative text or to communicate something is in progress, such as in-progress lozenges.',
-  exampleValue: '#0055CC'
+  exampleValue: '#1558BC'
 }, {
   name: 'color.text.subtlest',
   path: ['color', 'text', 'subtlest'],
   description: 'Use for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text.',
-  exampleValue: '#626F86'
+  exampleValue: '#6B6E76'
 }, {
   name: 'color.text.subtle',
   path: ['color', 'text', 'subtle'],
   description: 'Use for secondary text, such as navigation, subtle button links, input field labels, and all caps subheadings.',
-  exampleValue: '#44546F'
+  exampleValue: '#505258'
 }, {
   name: 'color.link',
   path: ['color', 'link', '[default]'],
   description: 'Use for links in a default or hovered state. Add an underline for hovered states.',
-  exampleValue: '#0C66E4'
+  exampleValue: '#1868DB'
 }, {
   name: 'color.link.pressed',
   path: ['color', 'link', 'pressed'],
   description: 'Use for links in a pressed state.',
-  exampleValue: '#0055CC'
+  exampleValue: '#1558BC'
 }, {
   name: 'color.link.visited',
   path: ['color', 'link', 'visited', '[default]'],
   description: 'Use for visited links.',
-  exampleValue: '#5E4DB2'
+  exampleValue: '#803FA5'
 }, {
   name: 'color.link.visited.pressed',
   path: ['color', 'link', 'visited', 'pressed'],
   description: 'Use for visited links in a pressed state.',
-  exampleValue: '#352C63'
+  exampleValue: '#48245D'
 }, {
   name: 'color.icon',
   path: ['color', 'icon', '[default]'],
   description: 'Use for icon-only buttons, or icons paired with color.text',
-  exampleValue: '#44546F'
+  exampleValue: '#292A2E'
 }, {
   name: 'color.icon.accent.lime',
   path: ['color', 'icon', 'accent', 'lime'],
@@ -211,7 +211,7 @@ export var tokens = [{
   name: 'color.icon.accent.orange',
   path: ['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: '#E56910'
+  exampleValue: '#E06C00'
 }, {
   name: 'color.icon.accent.yellow',
   path: ['color', 'icon', 'accent', 'yellow'],
@@ -231,12 +231,12 @@ export var tokens = [{
   name: 'color.icon.accent.blue',
   path: ['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: '#1D7AFC'
+  exampleValue: '#357DE8'
 }, {
   name: 'color.icon.accent.purple',
   path: ['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: '#8270DB'
+  exampleValue: '#AF59E1'
 }, {
   name: 'color.icon.accent.magenta',
   path: ['color', 'icon', 'accent', 'magenta'],
@@ -246,12 +246,12 @@ export var tokens = [{
   name: 'color.icon.accent.gray',
   path: ['color', 'icon', 'accent', 'gray'],
   description: 'Use for icons on non-bold gray accent backgrounds, such as file type icons.',
-  exampleValue: '#758195'
+  exampleValue: '#7D818A'
 }, {
   name: 'color.icon.disabled',
   path: ['color', 'icon', 'disabled'],
   description: 'Use for icons in a disabled state.',
-  exampleValue: '#091E424F'
+  exampleValue: '#080F214A'
 }, {
   name: 'color.icon.inverse',
   path: ['color', 'icon', 'inverse'],
@@ -261,12 +261,12 @@ export var tokens = [{
   name: 'color.icon.selected',
   path: ['color', 'icon', 'selected'],
   description: 'Use for icons in selected or opened states, such as those used in dropdown buttons.',
-  exampleValue: '#0C66E4'
+  exampleValue: '#1868DB'
 }, {
   name: 'color.icon.brand',
   path: ['color', 'icon', 'brand'],
   description: 'Use for icons that reinforce our brand.',
-  exampleValue: '#0C66E4'
+  exampleValue: '#1868DB'
 }, {
   name: 'color.icon.danger',
   path: ['color', 'icon', 'danger'],
@@ -276,42 +276,42 @@ export var tokens = [{
   name: 'color.icon.warning',
   path: ['color', 'icon', 'warning', '[default]'],
   description: 'Use for icons communicating caution, such as those used in warning section messages.',
-  exampleValue: '#E56910'
+  exampleValue: '#E06C00'
 }, {
   name: 'color.icon.warning.inverse',
   path: ['color', 'icon', 'warning', 'inverse'],
   description: 'Use for icons when on bold warning backgrounds.',
-  exampleValue: '#172B4D'
+  exampleValue: '#292A2E'
 }, {
   name: 'color.icon.success',
   path: ['color', 'icon', 'success'],
   description: 'Use for icons communicating a favorable outcome, such as those used in success section messaged.',
-  exampleValue: '#22A06B'
+  exampleValue: '#6A9A23'
 }, {
   name: 'color.icon.discovery',
   path: ['color', 'icon', 'discovery'],
   description: 'Use for icons communicating change or something new, such as discovery section messages.',
-  exampleValue: '#8270DB'
+  exampleValue: '#AF59E1'
 }, {
   name: 'color.icon.information',
   path: ['color', 'icon', 'information'],
   description: 'Use for icons communicating information or something in-progress, such as information section messages.',
-  exampleValue: '#1D7AFC'
+  exampleValue: '#357DE8'
 }, {
   name: 'color.icon.subtlest',
   path: ['color', 'icon', 'subtlest'],
   description: 'Use for icons paired with color.text.subtlest',
-  exampleValue: '#626F86'
+  exampleValue: '#6B6E76'
 }, {
   name: 'color.icon.subtle',
   path: ['color', 'icon', 'subtle'],
   description: 'Use for icons paired with color.text.subtle',
-  exampleValue: '#626F86'
+  exampleValue: '#505258'
 }, {
   name: 'color.border',
   path: ['color', 'border', '[default]'],
   description: 'Use to visually group or separate UI elements, such as flat cards or side panel dividers.',
-  exampleValue: '#091E4224'
+  exampleValue: '#0B120E24'
 }, {
   name: 'color.border.accent.lime',
   path: ['color', 'border', 'accent', 'lime'],
@@ -326,7 +326,7 @@ export var tokens = [{
   name: 'color.border.accent.orange',
   path: ['color', 'border', 'accent', 'orange'],
   description: 'Use for orange borders on non-bold backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#E56910'
+  exampleValue: '#E06C00'
 }, {
   name: 'color.border.accent.yellow',
   path: ['color', 'border', 'accent', 'yellow'],
@@ -346,12 +346,12 @@ export var tokens = [{
   name: 'color.border.accent.blue',
   path: ['color', 'border', 'accent', 'blue'],
   description: 'Use for blue borders on non-bold backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#1D7AFC'
+  exampleValue: '#357DE8'
 }, {
   name: 'color.border.accent.purple',
   path: ['color', 'border', 'accent', 'purple'],
   description: 'Use for purple borders on non-bold backgrounds when there is no meaning tied to the color.',
-  exampleValue: '#8270DB'
+  exampleValue: '#AF59E1'
 }, {
   name: 'color.border.accent.magenta',
   path: ['color', 'border', 'accent', 'magenta'],
@@ -361,22 +361,22 @@ export var tokens = [{
   name: 'color.border.accent.gray',
   path: ['color', 'border', 'accent', 'gray'],
   description: 'Use for borders on non-bold gray accent backgrounds.',
-  exampleValue: '#758195'
+  exampleValue: '#7D818A'
 }, {
   name: 'color.border.disabled',
   path: ['color', 'border', 'disabled'],
   description: 'Use for borders of elements in a disabled state.',
-  exampleValue: '#091E420F'
+  exampleValue: '#0515240F'
 }, {
   name: 'color.border.focused',
   path: ['color', 'border', 'focused'],
   description: 'Use for focus rings of elements in a focus state.',
-  exampleValue: '#388BFF'
+  exampleValue: '#4688EC'
 }, {
   name: 'color.border.input',
   path: ['color', 'border', 'input'],
   description: 'Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons.',
-  exampleValue: '#8590A2'
+  exampleValue: '#8C8F97'
 }, {
   name: 'color.border.inverse',
   path: ['color', 'border', 'inverse'],
@@ -386,12 +386,12 @@ export var tokens = [{
   name: 'color.border.selected',
   path: ['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: '#0C66E4'
+  exampleValue: '#1868DB'
 }, {
   name: 'color.border.brand',
   path: ['color', 'border', 'brand'],
   description: 'Use for borders or visual indicators of elements that reinforce our brand, such as logos or primary buttons.',
-  exampleValue: '#0C66E4'
+  exampleValue: '#1868DB'
 }, {
   name: 'color.border.danger',
   path: ['color', 'border', 'danger'],
@@ -401,27 +401,27 @@ export var tokens = [{
   name: 'color.border.warning',
   path: ['color', 'border', 'warning'],
   description: 'Use for borders communicating caution.',
-  exampleValue: '#E56910'
+  exampleValue: '#E06C00'
 }, {
   name: 'color.border.success',
   path: ['color', 'border', 'success'],
   description: 'Use for borders communicating a favorable outcome, such as the borders on validated text fields.',
-  exampleValue: '#22A06B'
+  exampleValue: '#6A9A23'
 }, {
   name: 'color.border.discovery',
   path: ['color', 'border', 'discovery'],
   description: 'Use for borders communicating change or something new, such as the borders in onboarding spotlights.',
-  exampleValue: '#8270DB'
+  exampleValue: '#AF59E1'
 }, {
   name: 'color.border.information',
   path: ['color', 'border', 'information'],
   description: 'Use for borders communicating information or something in-progress.',
-  exampleValue: '#1D7AFC'
+  exampleValue: '#357DE8'
 }, {
   name: 'color.border.bold',
   path: ['color', 'border', 'bold'],
   description: 'A neutral border option that passes min 3:1 contrast ratios.',
-  exampleValue: '#758195'
+  exampleValue: '#7D818A'
 }, {
   name: 'color.background.accent.lime.subtlest',
   path: ['color', 'background', 'accent', 'lime', 'subtlest', '[default]'],
@@ -436,7 +436,7 @@ export var tokens = [{
   name: 'color.background.accent.lime.subtlest.pressed',
   path: ['color', 'background', 'accent', 'lime', 'subtlest', 'pressed'],
   description: 'Pressed state of color.background.accent.lime.subtlest.',
-  exampleValue: '#B3DF72'
+  exampleValue: '#BDE97C'
 }, {
   name: 'color.background.accent.lime.subtler',
   path: ['color', 'background', 'accent', 'lime', 'subtler', '[default]'],
@@ -446,12 +446,12 @@ export var tokens = [{
   name: 'color.background.accent.lime.subtler.hovered',
   path: ['color', 'background', 'accent', 'lime', 'subtler', 'hovered'],
   description: 'Hovered state of color.background.accent.lime.subtler.',
-  exampleValue: '#B3DF72'
+  exampleValue: '#BDE97C'
 }, {
   name: 'color.background.accent.lime.subtler.pressed',
   path: ['color', 'background', 'accent', 'lime', 'subtler', 'pressed'],
   description: 'Pressed state of color.background.accent.lime.subtler.',
-  exampleValue: '#94C748'
+  exampleValue: '#B3DF72'
 }, {
   name: 'color.background.accent.lime.subtle',
   path: ['color', 'background', 'accent', 'lime', 'subtle', '[default]'],
@@ -466,7 +466,7 @@ export var tokens = [{
   name: 'color.background.accent.lime.subtle.pressed',
   path: ['color', 'background', 'accent', 'lime', 'subtle', 'pressed'],
   description: 'Pressed state of color.background.accent.lime.subtle.',
-  exampleValue: '#D3F1A7'
+  exampleValue: '#BDE97C'
 }, {
   name: 'color.background.accent.lime.bolder',
   path: ['color', 'background', 'accent', 'lime', 'bolder', '[default]'],
@@ -481,7 +481,7 @@ export var tokens = [{
   name: 'color.background.accent.lime.bolder.pressed',
   path: ['color', 'background', 'accent', 'lime', 'bolder', 'pressed'],
   description: 'Pressed state of color.background.accent.lime.bolder.',
-  exampleValue: '#37471F'
+  exampleValue: '#3F5224'
 }, {
   name: 'color.background.accent.red.subtlest',
   path: ['color', 'background', 'accent', 'red', 'subtlest', '[default]'],
@@ -496,7 +496,7 @@ export var tokens = [{
   name: 'color.background.accent.red.subtlest.pressed',
   path: ['color', 'background', 'accent', 'red', 'subtlest', 'pressed'],
   description: 'Pressed state of color.background.accent.red.subtlest.',
-  exampleValue: '#FD9891'
+  exampleValue: '#FFB8B2'
 }, {
   name: 'color.background.accent.red.subtler',
   path: ['color', 'background', 'accent', 'red', 'subtler', '[default]'],
@@ -506,12 +506,12 @@ export var tokens = [{
   name: 'color.background.accent.red.subtler.hovered',
   path: ['color', 'background', 'accent', 'red', 'subtler', 'hovered'],
   description: 'Hovered state of color.background.accent.red.subtler.',
-  exampleValue: '#FD9891'
+  exampleValue: '#FFB8B2'
 }, {
   name: 'color.background.accent.red.subtler.pressed',
   path: ['color', 'background', 'accent', 'red', 'subtler', 'pressed'],
   description: 'Pressed state of color.background.accent.red.subtler.',
-  exampleValue: '#F87168'
+  exampleValue: '#FD9891'
 }, {
   name: 'color.background.accent.red.subtle',
   path: ['color', 'background', 'accent', 'red', 'subtle', '[default]'],
@@ -526,7 +526,7 @@ export var tokens = [{
   name: 'color.background.accent.red.subtle.pressed',
   path: ['color', 'background', 'accent', 'red', 'subtle', 'pressed'],
   description: 'Pressed state of color.background.accent.red.subtle.',
-  exampleValue: '#FFD5D2'
+  exampleValue: '#FFB8B2'
 }, {
   name: 'color.background.accent.red.bolder',
   path: ['color', 'background', 'accent', 'red', 'bolder', '[default]'],
@@ -541,112 +541,112 @@ export var tokens = [{
   name: 'color.background.accent.red.bolder.pressed',
   path: ['color', 'background', 'accent', 'red', 'bolder', 'pressed'],
   description: 'Pressed state of color.background.accent.red.bolder.',
-  exampleValue: '#5D1F1A'
+  exampleValue: '#872821'
 }, {
   name: 'color.background.accent.orange.subtlest',
   path: ['color', 'background', 'accent', 'orange', 'subtlest', '[default]'],
   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: '#FFF3EB'
+  exampleValue: '#FFF5DB'
 }, {
   name: 'color.background.accent.orange.subtlest.hovered',
   path: ['color', 'background', 'accent', 'orange', 'subtlest', 'hovered'],
   description: 'Hovered state of color.background.accent.orange.subtlest.',
-  exampleValue: '#FEDEC8'
+  exampleValue: '#FCE4A6'
 }, {
   name: 'color.background.accent.orange.subtlest.pressed',
   path: ['color', 'background', 'accent', 'orange', 'subtlest', 'pressed'],
   description: 'Pressed state of color.background.accent.orange.subtlest.',
-  exampleValue: '#FEC195'
+  exampleValue: '#FBD779'
 }, {
   name: 'color.background.accent.orange.subtler',
   path: ['color', 'background', 'accent', 'orange', 'subtler', '[default]'],
   description: 'Use for orange backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#FEDEC8'
+  exampleValue: '#FCE4A6'
 }, {
   name: 'color.background.accent.orange.subtler.hovered',
   path: ['color', 'background', 'accent', 'orange', 'subtler', 'hovered'],
   description: 'Hovered state of color.background.accent.orange.subtler.',
-  exampleValue: '#FEC195'
+  exampleValue: '#FBD779'
 }, {
   name: 'color.background.accent.orange.subtler.pressed',
   path: ['color', 'background', 'accent', 'orange', 'subtler', 'pressed'],
   description: 'Pressed state of color.background.accent.orange.subtler.',
-  exampleValue: '#FEA362'
+  exampleValue: '#FBC828'
 }, {
   name: 'color.background.accent.orange.subtle',
   path: ['color', 'background', 'accent', 'orange', 'subtle', '[default]'],
   description: 'Use for vibrant orange backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#FEA362'
+  exampleValue: '#FCA700'
 }, {
   name: 'color.background.accent.orange.subtle.hovered',
   path: ['color', 'background', 'accent', 'orange', 'subtle', 'hovered'],
   description: 'Hovered state of color.background.accent.orange.subtle.',
-  exampleValue: '#FEC195'
+  exampleValue: '#FBC828'
 }, {
   name: 'color.background.accent.orange.subtle.pressed',
   path: ['color', 'background', 'accent', 'orange', 'subtle', 'pressed'],
   description: 'Pressed state of color.background.accent.orange.subtle.',
-  exampleValue: '#FEDEC8'
+  exampleValue: '#FBD779'
 }, {
   name: 'color.background.accent.orange.bolder',
   path: ['color', 'background', 'accent', 'orange', 'bolder', '[default]'],
   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: '#C25100'
+  exampleValue: '#BD5B00'
 }, {
   name: 'color.background.accent.orange.bolder.hovered',
   path: ['color', 'background', 'accent', 'orange', 'bolder', 'hovered'],
   description: 'Hovered state of color.background.accent.orange.bolder.',
-  exampleValue: '#A54800'
+  exampleValue: '#9E4C00'
 }, {
   name: 'color.background.accent.orange.bolder.pressed',
   path: ['color', 'background', 'accent', 'orange', 'bolder', 'pressed'],
   description: 'Pressed state of color.background.accent.orange.bolder.',
-  exampleValue: '#702E00'
+  exampleValue: '#7A3B00'
 }, {
   name: 'color.background.accent.yellow.subtlest',
   path: ['color', 'background', 'accent', 'yellow', 'subtlest', '[default]'],
   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: '#FFF7D6'
+  exampleValue: '#FEF7C8'
 }, {
   name: 'color.background.accent.yellow.subtlest.hovered',
   path: ['color', 'background', 'accent', 'yellow', 'subtlest', 'hovered'],
   description: 'Hovered state of color.background.accent.yellow.subtlest.',
-  exampleValue: '#F8E6A0'
+  exampleValue: '#F5E989'
 }, {
   name: 'color.background.accent.yellow.subtlest.pressed',
   path: ['color', 'background', 'accent', 'yellow', 'subtlest', 'pressed'],
   description: 'Pressed state of color.background.accent.yellow.subtlest.',
-  exampleValue: '#F5CD47'
+  exampleValue: '#EFDD4E'
 }, {
   name: 'color.background.accent.yellow.subtler',
   path: ['color', 'background', 'accent', 'yellow', 'subtler', '[default]'],
   description: 'Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#F8E6A0'
+  exampleValue: '#F5E989'
 }, {
   name: 'color.background.accent.yellow.subtler.hovered',
   path: ['color', 'background', 'accent', 'yellow', 'subtler', 'hovered'],
   description: 'Hovered state of color.background.accent.yellow.subtler.',
-  exampleValue: '#F5CD47'
+  exampleValue: '#EFDD4E'
 }, {
   name: 'color.background.accent.yellow.subtler.pressed',
   path: ['color', 'background', 'accent', 'yellow', 'subtler', 'pressed'],
   description: 'Pressed state of color.background.accent.yellow.subtler.',
-  exampleValue: '#E2B203'
+  exampleValue: '#EED12B'
 }, {
   name: 'color.background.accent.yellow.subtle',
   path: ['color', 'background', 'accent', 'yellow', 'subtle', '[default]'],
   description: 'Use for vibrant yellow backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#F5CD47'
+  exampleValue: '#EED12B'
 }, {
   name: 'color.background.accent.yellow.subtle.hovered',
   path: ['color', 'background', 'accent', 'yellow', 'subtle', 'hovered'],
   description: 'Hovered state of color.background.accent.yellow.subtle.',
-  exampleValue: '#E2B203'
+  exampleValue: '#DDB30E'
 }, {
   name: 'color.background.accent.yellow.subtle.pressed',
   path: ['color', 'background', 'accent', 'yellow', 'subtle', 'pressed'],
   description: 'Pressed state of color.background.accent.yellow.subtle.',
-  exampleValue: '#CF9F02'
+  exampleValue: '#EFDD4E'
 }, {
   name: 'color.background.accent.yellow.bolder',
   path: ['color', 'background', 'accent', 'yellow', 'bolder', '[default]'],
@@ -661,7 +661,7 @@ export var tokens = [{
   name: 'color.background.accent.yellow.bolder.pressed',
   path: ['color', 'background', 'accent', 'yellow', 'bolder', 'pressed'],
   description: 'Pressed state of color.background.accent.yellow.bolder.',
-  exampleValue: '#533F04'
+  exampleValue: '#614A05'
 }, {
   name: 'color.background.accent.green.subtlest',
   path: ['color', 'background', 'accent', 'green', 'subtlest', '[default]'],
@@ -676,7 +676,7 @@ export var tokens = [{
   name: 'color.background.accent.green.subtlest.pressed',
   path: ['color', 'background', 'accent', 'green', 'subtlest', 'pressed'],
   description: 'Pressed state of color.background.accent.green.subtlest.',
-  exampleValue: '#7EE2B8'
+  exampleValue: '#97EDC9'
 }, {
   name: 'color.background.accent.green.subtler',
   path: ['color', 'background', 'accent', 'green', 'subtler', '[default]'],
@@ -686,12 +686,12 @@ export var tokens = [{
   name: 'color.background.accent.green.subtler.hovered',
   path: ['color', 'background', 'accent', 'green', 'subtler', 'hovered'],
   description: 'Hovered state of color.background.accent.green.subtler.',
-  exampleValue: '#7EE2B8'
+  exampleValue: '#97EDC9'
 }, {
   name: 'color.background.accent.green.subtler.pressed',
   path: ['color', 'background', 'accent', 'green', 'subtler', 'pressed'],
   description: 'Pressed state of color.background.accent.green.subtler.',
-  exampleValue: '#4BCE97'
+  exampleValue: '#7EE2B8'
 }, {
   name: 'color.background.accent.green.subtle',
   path: ['color', 'background', 'accent', 'green', 'subtle', '[default]'],
@@ -706,7 +706,7 @@ export var tokens = [{
   name: 'color.background.accent.green.subtle.pressed',
   path: ['color', 'background', 'accent', 'green', 'subtle', 'pressed'],
   description: 'Pressed state of color.background.accent.green.subtle.',
-  exampleValue: '#BAF3DB'
+  exampleValue: '#97EDC9'
 }, {
   name: 'color.background.accent.green.bolder',
   path: ['color', 'background', 'accent', 'green', 'bolder', '[default]'],
@@ -721,7 +721,7 @@ export var tokens = [{
   name: 'color.background.accent.green.bolder.pressed',
   path: ['color', 'background', 'accent', 'green', 'bolder', 'pressed'],
   description: 'Pressed state of color.background.accent.green.bolder.',
-  exampleValue: '#164B35'
+  exampleValue: '#19573D'
 }, {
   name: 'color.background.accent.teal.subtlest',
   path: ['color', 'background', 'accent', 'teal', 'subtlest', '[default]'],
@@ -736,7 +736,7 @@ export var tokens = [{
   name: 'color.background.accent.teal.subtlest.pressed',
   path: ['color', 'background', 'accent', 'teal', 'subtlest', 'pressed'],
   description: 'Pressed state of color.background.accent.teal.subtlest.',
-  exampleValue: '#9DD9EE'
+  exampleValue: '#B1E4F7'
 }, {
   name: 'color.background.accent.teal.subtler',
   path: ['color', 'background', 'accent', 'teal', 'subtler', '[default]'],
@@ -746,12 +746,12 @@ export var tokens = [{
   name: 'color.background.accent.teal.subtler.hovered',
   path: ['color', 'background', 'accent', 'teal', 'subtler', 'hovered'],
   description: 'Hovered state of color.background.accent.teal.subtler.',
-  exampleValue: '#9DD9EE'
+  exampleValue: '#B1E4F7'
 }, {
   name: 'color.background.accent.teal.subtler.pressed',
   path: ['color', 'background', 'accent', 'teal', 'subtler', 'pressed'],
   description: 'Pressed state of color.background.accent.teal.subtler.',
-  exampleValue: '#6CC3E0'
+  exampleValue: '#9DD9EE'
 }, {
   name: 'color.background.accent.teal.subtle',
   path: ['color', 'background', 'accent', 'teal', 'subtle', '[default]'],
@@ -766,7 +766,7 @@ export var tokens = [{
   name: 'color.background.accent.teal.subtle.pressed',
   path: ['color', 'background', 'accent', 'teal', 'subtle', 'pressed'],
   description: 'Pressed state of color.background.accent.teal.subtle.',
-  exampleValue: '#C6EDFB'
+  exampleValue: '#B1E4F7'
 }, {
   name: 'color.background.accent.teal.bolder',
   path: ['color', 'background', 'accent', 'teal', 'bolder', '[default]'],
@@ -781,127 +781,127 @@ export var tokens = [{
   name: 'color.background.accent.teal.bolder.pressed',
   path: ['color', 'background', 'accent', 'teal', 'bolder', 'pressed'],
   description: 'Pressed state of color.background.accent.teal.bolder.',
-  exampleValue: '#164555'
+  exampleValue: '#1A5265'
 }, {
   name: 'color.background.accent.blue.subtlest',
   path: ['color', 'background', 'accent', 'blue', 'subtlest', '[default]'],
   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: '#E9F2FF'
+  exampleValue: '#E9F2FE'
 }, {
   name: 'color.background.accent.blue.subtlest.hovered',
   path: ['color', 'background', 'accent', 'blue', 'subtlest', 'hovered'],
   description: 'Hovered state of color.background.accent.blue.subtlest.',
-  exampleValue: '#CCE0FF'
+  exampleValue: '#CFE1FD'
 }, {
   name: 'color.background.accent.blue.subtlest.pressed',
   path: ['color', 'background', 'accent', 'blue', 'subtlest', 'pressed'],
   description: 'Pressed state of color.background.accent.blue.subtlest.',
-  exampleValue: '#85B8FF'
+  exampleValue: '#ADCBFB'
 }, {
   name: 'color.background.accent.blue.subtler',
   path: ['color', 'background', 'accent', 'blue', 'subtler', '[default]'],
   description: 'Use for blue backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#CCE0FF'
+  exampleValue: '#CFE1FD'
 }, {
   name: 'color.background.accent.blue.subtler.hovered',
   path: ['color', 'background', 'accent', 'blue', 'subtler', 'hovered'],
   description: 'Hovered state of color.background.accent.blue.subtler.',
-  exampleValue: '#85B8FF'
+  exampleValue: '#ADCBFB'
 }, {
   name: 'color.background.accent.blue.subtler.pressed',
   path: ['color', 'background', 'accent', 'blue', 'subtler', 'pressed'],
   description: 'Pressed state of color.background.accent.blue.subtler.',
-  exampleValue: '#579DFF'
+  exampleValue: '#8FB8F6'
 }, {
   name: 'color.background.accent.blue.subtle',
   path: ['color', 'background', 'accent', 'blue', 'subtle', '[default]'],
   description: 'Use for vibrant blue backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#579DFF'
+  exampleValue: '#669DF1'
 }, {
   name: 'color.background.accent.blue.subtle.hovered',
   path: ['color', 'background', 'accent', 'blue', 'subtle', 'hovered'],
   description: 'Hovered state of color.background.accent.blue.subtle.',
-  exampleValue: '#85B8FF'
+  exampleValue: '#8FB8F6'
 }, {
   name: 'color.background.accent.blue.subtle.pressed',
   path: ['color', 'background', 'accent', 'blue', 'subtle', 'pressed'],
   description: 'Pressed state of color.background.accent.blue.subtle.',
-  exampleValue: '#CCE0FF'
+  exampleValue: '#ADCBFB'
 }, {
   name: 'color.background.accent.blue.bolder',
   path: ['color', 'background', 'accent', 'blue', 'bolder', '[default]'],
   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: '#0C66E4'
+  exampleValue: '#1868DB'
 }, {
   name: 'color.background.accent.blue.bolder.hovered',
   path: ['color', 'background', 'accent', 'blue', 'bolder', 'hovered'],
   description: 'Hovered state of color.background.accent.blue.bolder.',
-  exampleValue: '#0055CC'
+  exampleValue: '#1558BC'
 }, {
   name: 'color.background.accent.blue.bolder.pressed',
   path: ['color', 'background', 'accent', 'blue', 'bolder', 'pressed'],
   description: 'Pressed state of color.background.accent.blue.bolder.',
-  exampleValue: '#09326C'
+  exampleValue: '#144794'
 }, {
   name: 'color.background.accent.purple.subtlest',
   path: ['color', 'background', 'accent', 'purple', 'subtlest', '[default]'],
   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: '#F3F0FF'
+  exampleValue: '#F8EEFE'
 }, {
   name: 'color.background.accent.purple.subtlest.hovered',
   path: ['color', 'background', 'accent', 'purple', 'subtlest', 'hovered'],
   description: 'Hovered state of color.background.accent.purple.subtlest.',
-  exampleValue: '#DFD8FD'
+  exampleValue: '#EED7FC'
 }, {
   name: 'color.background.accent.purple.subtlest.pressed',
   path: ['color', 'background', 'accent', 'purple', 'subtlest', 'pressed'],
   description: 'Pressed state of color.background.accent.purple.subtlest.',
-  exampleValue: '#B8ACF6'
+  exampleValue: '#E3BDFA'
 }, {
   name: 'color.background.accent.purple.subtler',
   path: ['color', 'background', 'accent', 'purple', 'subtler', '[default]'],
   description: 'Use for purple backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#DFD8FD'
+  exampleValue: '#EED7FC'
 }, {
   name: 'color.background.accent.purple.subtler.hovered',
   path: ['color', 'background', 'accent', 'purple', 'subtler', 'hovered'],
   description: 'Hovered state of color.background.accent.purple.subtler.',
-  exampleValue: '#B8ACF6'
+  exampleValue: '#E3BDFA'
 }, {
   name: 'color.background.accent.purple.subtler.pressed',
   path: ['color', 'background', 'accent', 'purple', 'subtler', 'pressed'],
   description: 'Pressed state of color.background.accent.purple.subtler.',
-  exampleValue: '#9F8FEF'
+  exampleValue: '#D8A0F7'
 }, {
   name: 'color.background.accent.purple.subtle',
   path: ['color', 'background', 'accent', 'purple', 'subtle', '[default]'],
   description: 'Use for vibrant purple backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#9F8FEF'
+  exampleValue: '#C97CF4'
 }, {
   name: 'color.background.accent.purple.subtle.hovered',
   path: ['color', 'background', 'accent', 'purple', 'subtle', 'hovered'],
   description: 'Hovered state of color.background.accent.purple.subtle.',
-  exampleValue: '#B8ACF6'
+  exampleValue: '#D8A0F7'
 }, {
   name: 'color.background.accent.purple.subtle.pressed',
   path: ['color', 'background', 'accent', 'purple', 'subtle', 'pressed'],
   description: 'Pressed state of color.background.accent.purple.subtle.',
-  exampleValue: '#DFD8FD'
+  exampleValue: '#E3BDFA'
 }, {
   name: 'color.background.accent.purple.bolder',
   path: ['color', 'background', 'accent', 'purple', 'bolder', '[default]'],
   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: '#6E5DC6'
+  exampleValue: '#964AC0'
 }, {
   name: 'color.background.accent.purple.bolder.hovered',
   path: ['color', 'background', 'accent', 'purple', 'bolder', 'hovered'],
   description: 'Hovered state of color.background.accent.purple.bolder.',
-  exampleValue: '#5E4DB2'
+  exampleValue: '#803FA5'
 }, {
   name: 'color.background.accent.purple.bolder.pressed',
   path: ['color', 'background', 'accent', 'purple', 'bolder', 'pressed'],
   description: 'Pressed state of color.background.accent.purple.bolder.',
-  exampleValue: '#352C63'
+  exampleValue: '#673286'
 }, {
   name: 'color.background.accent.magenta.subtlest',
   path: ['color', 'background', 'accent', 'magenta', 'subtlest', '[default]'],
@@ -916,7 +916,7 @@ export var tokens = [{
   name: 'color.background.accent.magenta.subtlest.pressed',
   path: ['color', 'background', 'accent', 'magenta', 'subtlest', 'pressed'],
   description: 'Pressed state of color.background.accent.magenta.subtlest.',
-  exampleValue: '#F797D2'
+  exampleValue: '#FCB6E1'
 }, {
   name: 'color.background.accent.magenta.subtler',
   path: ['color', 'background', 'accent', 'magenta', 'subtler', '[default]'],
@@ -926,12 +926,12 @@ export var tokens = [{
   name: 'color.background.accent.magenta.subtler.hovered',
   path: ['color', 'background', 'accent', 'magenta', 'subtler', 'hovered'],
   description: 'Hovered state of color.background.accent.magenta.subtler.',
-  exampleValue: '#F797D2'
+  exampleValue: '#FCB6E1'
 }, {
   name: 'color.background.accent.magenta.subtler.pressed',
   path: ['color', 'background', 'accent', 'magenta', 'subtler', 'pressed'],
   description: 'Pressed state of color.background.accent.magenta.subtler.',
-  exampleValue: '#E774BB'
+  exampleValue: '#F797D2'
 }, {
   name: 'color.background.accent.magenta.subtle',
   path: ['color', 'background', 'accent', 'magenta', 'subtle', '[default]'],
@@ -946,7 +946,7 @@ export var tokens = [{
   name: 'color.background.accent.magenta.subtle.pressed',
   path: ['color', 'background', 'accent', 'magenta', 'subtle', 'pressed'],
   description: 'Pressed state of color.background.accent.magenta.subtle.',
-  exampleValue: '#FDD0EC'
+  exampleValue: '#FCB6E1'
 }, {
   name: 'color.background.accent.magenta.bolder',
   path: ['color', 'background', 'accent', 'magenta', 'bolder', '[default]'],
@@ -961,72 +961,72 @@ export var tokens = [{
   name: 'color.background.accent.magenta.bolder.pressed',
   path: ['color', 'background', 'accent', 'magenta', 'bolder', 'pressed'],
   description: 'Pressed state of color.background.accent.magenta.bolder.',
-  exampleValue: '#50253F'
+  exampleValue: '#77325B'
 }, {
   name: 'color.background.accent.gray.subtlest',
   path: ['color', 'background', 'accent', 'gray', 'subtlest', '[default]'],
   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: '#F1F2F4'
+  exampleValue: '#F0F1F2'
 }, {
   name: 'color.background.accent.gray.subtlest.hovered',
   path: ['color', 'background', 'accent', 'gray', 'subtlest', 'hovered'],
   description: 'Hovered state of color.background.accent.gray.subtlest.',
-  exampleValue: '#DCDFE4'
+  exampleValue: '#DDDEE1'
 }, {
   name: 'color.background.accent.gray.subtlest.pressed',
   path: ['color', 'background', 'accent', 'gray', 'subtlest', 'pressed'],
   description: 'Pressed state of color.background.accent.gray.subtlest.',
-  exampleValue: '#B3B9C4'
+  exampleValue: '#B7B9BE'
 }, {
   name: 'color.background.accent.gray.subtler',
   path: ['color', 'background', 'accent', 'gray', 'subtler', '[default]'],
   description: 'Use for gray backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#DCDFE4'
+  exampleValue: '#DDDEE1'
 }, {
   name: 'color.background.accent.gray.subtler.hovered',
   path: ['color', 'background', 'accent', 'gray', 'subtler', 'hovered'],
   description: 'Hovered state of color.background.accent.gray.subtler.',
-  exampleValue: '#B3B9C4'
+  exampleValue: '#B7B9BE'
 }, {
   name: 'color.background.accent.gray.subtler.pressed',
   path: ['color', 'background', 'accent', 'gray', 'subtler', 'pressed'],
   description: 'Pressed state of color.background.accent.gray.subtler.',
-  exampleValue: '#8590A2'
+  exampleValue: '#8C8F97'
 }, {
   name: 'color.background.accent.gray.subtle',
   path: ['color', 'background', 'accent', 'gray', 'subtle', '[default]'],
   description: 'Use for vibrant gray backgrounds when there is no meaning tied to the color, such as colored tags.',
-  exampleValue: '#8590A2'
+  exampleValue: '#8C8F97'
 }, {
   name: 'color.background.accent.gray.subtle.hovered',
   path: ['color', 'background', 'accent', 'gray', 'subtle', 'hovered'],
   description: 'Hovered state of color.background.accent.gray.subtle.',
-  exampleValue: '#B3B9C4'
+  exampleValue: '#B7B9BE'
 }, {
   name: 'color.background.accent.gray.subtle.pressed',
   path: ['color', 'background', 'accent', 'gray', 'subtle', 'pressed'],
   description: 'Pressed state of color.background.accent.gray.subtle.',
-  exampleValue: '#DCDFE4'
+  exampleValue: '#DDDEE1'
 }, {
   name: 'color.background.accent.gray.bolder',
   path: ['color', 'background', 'accent', 'gray', 'bolder', '[default]'],
   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: '#626F86'
+  exampleValue: '#6B6E76'
 }, {
   name: 'color.background.accent.gray.bolder.hovered',
   path: ['color', 'background', 'accent', 'gray', 'bolder', 'hovered'],
   description: 'Hovered state of color.background.accent.gray.bolder.',
-  exampleValue: '#44546F'
+  exampleValue: '#505258'
 }, {
   name: 'color.background.accent.gray.bolder.pressed',
   path: ['color', 'background', 'accent', 'gray', 'bolder', 'pressed'],
   description: 'Pressed state of color.background.accent.gray.subtlest.',
-  exampleValue: '#2C3E5D'
+  exampleValue: '#3B3D42'
 }, {
   name: 'color.background.disabled',
   path: ['color', 'background', 'disabled'],
   description: 'Use for backgrounds of elements in a disabled state.',
-  exampleValue: '#091E4208'
+  exampleValue: '#17171708'
 }, {
   name: 'color.background.input',
   path: ['color', 'background', 'input', '[default]'],
@@ -1036,7 +1036,7 @@ export var tokens = [{
   name: 'color.background.input.hovered',
   path: ['color', 'background', 'input', 'hovered'],
   description: 'Hovered state for color.background.input',
-  exampleValue: '#F7F8F9'
+  exampleValue: '#F8F8F8'
 }, {
   name: 'color.background.input.pressed',
   path: ['color', 'background', 'input', 'pressed'],
@@ -1061,17 +1061,17 @@ export var tokens = [{
   name: 'color.background.neutral',
   path: ['color', 'background', 'neutral', '[default]', '[default]'],
   description: 'The default background for neutral elements, such as default buttons.',
-  exampleValue: '#091E420F'
+  exampleValue: '#0515240F'
 }, {
   name: 'color.background.neutral.hovered',
   path: ['color', 'background', 'neutral', '[default]', 'hovered'],
   description: 'Hovered state for color.background.neutral',
-  exampleValue: '#091E4224'
+  exampleValue: '#0B120E24'
 }, {
   name: 'color.background.neutral.pressed',
   path: ['color', 'background', 'neutral', '[default]', 'pressed'],
   description: 'Pressed state for color.background.neutral',
-  exampleValue: '#091E424F'
+  exampleValue: '#080F214A'
 }, {
   name: 'color.background.neutral.subtle',
   path: ['color', 'background', 'neutral', 'subtle', '[default]'],
@@ -1081,102 +1081,102 @@ export var tokens = [{
   name: 'color.background.neutral.subtle.hovered',
   path: ['color', 'background', 'neutral', 'subtle', 'hovered'],
   description: 'Hovered state for color.background.neutral.subtle',
-  exampleValue: '#091E420F'
+  exampleValue: '#0515240F'
 }, {
   name: 'color.background.neutral.subtle.pressed',
   path: ['color', 'background', 'neutral', 'subtle', 'pressed'],
   description: 'Pressed state for color.background.neutral.subtle',
-  exampleValue: '#091E4224'
+  exampleValue: '#0B120E24'
 }, {
   name: 'color.background.neutral.bold',
   path: ['color', 'background', 'neutral', 'bold', '[default]'],
   description: 'A vibrant background option for neutral UI elements, such as announcement banners.',
-  exampleValue: '#44546F'
+  exampleValue: '#292A2E'
 }, {
   name: 'color.background.neutral.bold.hovered',
   path: ['color', 'background', 'neutral', 'bold', 'hovered'],
   description: 'Hovered state of color.background.neutral.bold',
-  exampleValue: '#2C3E5D'
+  exampleValue: '#3B3D42'
 }, {
   name: 'color.background.neutral.bold.pressed',
   path: ['color', 'background', 'neutral', 'bold', 'pressed'],
   description: 'Pressed state of color.background.neutral.bold',
-  exampleValue: '#172B4D'
+  exampleValue: '#505258'
 }, {
   name: 'color.background.selected',
   path: ['color', 'background', 'selected', '[default]', '[default]'],
   description: 'Use for the background of elements in a selected state, such as in opened dropdown buttons.',
-  exampleValue: '#E9F2FF'
+  exampleValue: '#E9F2FE'
 }, {
   name: 'color.background.selected.hovered',
   path: ['color', 'background', 'selected', '[default]', 'hovered'],
   description: 'Hovered state for color.background.selected',
-  exampleValue: '#CCE0FF'
+  exampleValue: '#CFE1FD'
 }, {
   name: 'color.background.selected.pressed',
   path: ['color', 'background', 'selected', '[default]', 'pressed'],
   description: 'Pressed state for color.background.selected',
-  exampleValue: '#85B8FF'
+  exampleValue: '#8FB8F6'
 }, {
   name: 'color.background.selected.bold',
   path: ['color', 'background', 'selected', 'bold', '[default]'],
   description: 'Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons.',
-  exampleValue: '#0C66E4'
+  exampleValue: '#1868DB'
 }, {
   name: 'color.background.selected.bold.hovered',
   path: ['color', 'background', 'selected', 'bold', 'hovered'],
   description: 'Hovered state of color.background.selected.bold',
-  exampleValue: '#0055CC'
+  exampleValue: '#1558BC'
 }, {
   name: 'color.background.selected.bold.pressed',
   path: ['color', 'background', 'selected', 'bold', 'pressed'],
   description: 'Pressed state of color.background.selected.bold',
-  exampleValue: '#09326C'
+  exampleValue: '#123263'
 }, {
   name: 'color.background.brand.subtlest',
   path: ['color', 'background', 'brand', 'subtlest', '[default]'],
   description: 'Use for the background of elements used to reinforce our brand, but with less emphasis.',
-  exampleValue: '#E9F2FF'
+  exampleValue: '#E9F2FE'
 }, {
   name: 'color.background.brand.subtlest.hovered',
   path: ['color', 'background', 'brand', 'subtlest', 'hovered'],
   description: 'Hovered state of color.background.brand.subtlest.',
-  exampleValue: '#CCE0FF'
+  exampleValue: '#CFE1FD'
 }, {
   name: 'color.background.brand.subtlest.pressed',
   path: ['color', 'background', 'brand', 'subtlest', 'pressed'],
   description: 'Pressed state of color.background.brand.subtlest',
-  exampleValue: '#85B8FF'
+  exampleValue: '#ADCBFB'
 }, {
   name: 'color.background.brand.bold',
   path: ['color', 'background', 'brand', 'bold', '[default]'],
   description: 'Use for the background of elements used to reinforce our brand, but with more emphasis.',
-  exampleValue: '#0C66E4'
+  exampleValue: '#1868DB'
 }, {
   name: 'color.background.brand.bold.hovered',
   path: ['color', 'background', 'brand', 'bold', 'hovered'],
   description: 'Hovered state of color.background.brand.bold.',
-  exampleValue: '#0055CC'
+  exampleValue: '#1558BC'
 }, {
   name: 'color.background.brand.bold.pressed',
   path: ['color', 'background', 'brand', 'bold', 'pressed'],
   description: 'Pressed state of color.background.brand.bold.',
-  exampleValue: '#09326C'
+  exampleValue: '#144794'
 }, {
   name: 'color.background.brand.boldest',
   path: ['color', 'background', 'brand', 'boldest', '[default]'],
   description: 'Use for the background of elements used to reinforce our brand, that need to stand out a lot.',
-  exampleValue: '#1C2B41'
+  exampleValue: '#1C2B42'
 }, {
   name: 'color.background.brand.boldest.hovered',
   path: ['color', 'background', 'brand', 'boldest', 'hovered'],
   description: 'Hovered state of color.background.brand.boldest.',
-  exampleValue: '#09326C'
+  exampleValue: '#123263'
 }, {
   name: 'color.background.brand.boldest.pressed',
   path: ['color', 'background', 'brand', 'boldest', 'pressed'],
   description: 'Pressed state of color.background.brand.boldest.',
-  exampleValue: '#0055CC'
+  exampleValue: '#144794'
 }, {
   name: 'color.background.danger',
   path: ['color', 'background', 'danger', '[default]', '[default]'],
@@ -1191,7 +1191,7 @@ export var tokens = [{
   name: 'color.background.danger.pressed',
   path: ['color', 'background', 'danger', '[default]', 'pressed'],
   description: 'Pressed state for color.background.danger',
-  exampleValue: '#FD9891'
+  exampleValue: '#FFB8B2'
 }, {
   name: 'color.background.danger.bold',
   path: ['color', 'background', 'danger', 'bold', '[default]'],
@@ -1206,132 +1206,132 @@ export var tokens = [{
   name: 'color.background.danger.bold.pressed',
   path: ['color', 'background', 'danger', 'bold', 'pressed'],
   description: 'Pressed state of color.background.danger.bold',
-  exampleValue: '#5D1F1A'
+  exampleValue: '#872821'
 }, {
   name: 'color.background.warning',
   path: ['color', 'background', 'warning', '[default]', '[default]'],
   description: 'Use for backgrounds communicating caution, such as in warning section messages.',
-  exampleValue: '#FFF7D6'
+  exampleValue: '#FFF5DB'
 }, {
   name: 'color.background.warning.hovered',
   path: ['color', 'background', 'warning', '[default]', 'hovered'],
   description: 'Hovered state for color.background.warning',
-  exampleValue: '#F8E6A0'
+  exampleValue: '#FCE4A6'
 }, {
   name: 'color.background.warning.pressed',
   path: ['color', 'background', 'warning', '[default]', 'pressed'],
   description: 'Pressed state for color.background.warning',
-  exampleValue: '#F5CD47'
+  exampleValue: '#FBD779'
 }, {
   name: 'color.background.warning.bold',
   path: ['color', 'background', 'warning', 'bold', '[default]'],
   description: 'A vibrant background option for communicating caution, such as in warning buttons and warning banners.',
-  exampleValue: '#F5CD47'
+  exampleValue: '#FBC828'
 }, {
   name: 'color.background.warning.bold.hovered',
   path: ['color', 'background', 'warning', 'bold', 'hovered'],
   description: 'Hovered state of color.background.warning.bold',
-  exampleValue: '#E2B203'
+  exampleValue: '#FCA700'
 }, {
   name: 'color.background.warning.bold.pressed',
   path: ['color', 'background', 'warning', 'bold', 'pressed'],
   description: 'Pressed state of color.background.warning.bold',
-  exampleValue: '#CF9F02'
+  exampleValue: '#F68909'
 }, {
   name: 'color.background.success',
   path: ['color', 'background', 'success', '[default]', '[default]'],
   description: 'Use for backgrounds communicating a favorable outcome, such as in success section messages.',
-  exampleValue: '#DCFFF1'
+  exampleValue: '#EFFFD6'
 }, {
   name: 'color.background.success.hovered',
   path: ['color', 'background', 'success', '[default]', 'hovered'],
   description: 'Hovered state for color.background.success',
-  exampleValue: '#BAF3DB'
+  exampleValue: '#D3F1A7'
 }, {
   name: 'color.background.success.pressed',
   path: ['color', 'background', 'success', '[default]', 'pressed'],
   description: 'Pressed state for color.background.success',
-  exampleValue: '#7EE2B8'
+  exampleValue: '#BDE97C'
 }, {
   name: 'color.background.success.bold',
   path: ['color', 'background', 'success', 'bold', '[default]'],
   description: 'A vibrant background option for communicating a favorable outcome, such as in checked toggles.',
-  exampleValue: '#1F845A'
+  exampleValue: '#5B7F24'
 }, {
   name: 'color.background.success.bold.hovered',
   path: ['color', 'background', 'success', 'bold', 'hovered'],
   description: 'Hovered state of color.background.success.bold',
-  exampleValue: '#216E4E'
+  exampleValue: '#4C6B1F'
 }, {
   name: 'color.background.success.bold.pressed',
   path: ['color', 'background', 'success', 'bold', 'pressed'],
   description: 'Pressed state of color.background.success.bold',
-  exampleValue: '#164B35'
+  exampleValue: '#3F5224'
 }, {
   name: 'color.background.discovery',
   path: ['color', 'background', 'discovery', '[default]', '[default]'],
   description: 'Use for backgrounds communicating change or something new, such as in discovery section messages.',
-  exampleValue: '#F3F0FF'
+  exampleValue: '#F8EEFE'
 }, {
   name: 'color.background.discovery.hovered',
   path: ['color', 'background', 'discovery', '[default]', 'hovered'],
   description: 'Hover state for color.background.discovery',
-  exampleValue: '#DFD8FD'
+  exampleValue: '#EED7FC'
 }, {
   name: 'color.background.discovery.pressed',
   path: ['color', 'background', 'discovery', '[default]', 'pressed'],
   description: 'Pressed state for color.background.discovery',
-  exampleValue: '#B8ACF6'
+  exampleValue: '#E3BDFA'
 }, {
   name: 'color.background.discovery.bold',
   path: ['color', 'background', 'discovery', 'bold', '[default]'],
   description: 'A vibrant background option communicating change or something new, such as in onboarding spotlights.',
-  exampleValue: '#6E5DC6'
+  exampleValue: '#964AC0'
 }, {
   name: 'color.background.discovery.bold.hovered',
   path: ['color', 'background', 'discovery', 'bold', 'hovered'],
   description: 'Hovered state of color.background.discovery.bold',
-  exampleValue: '#5E4DB2'
+  exampleValue: '#803FA5'
 }, {
   name: 'color.background.discovery.bold.pressed',
   path: ['color', 'background', 'discovery', 'bold', 'pressed'],
   description: 'Pressed state of color.background.discovery.bold',
-  exampleValue: '#352C63'
+  exampleValue: '#673286'
 }, {
   name: 'color.background.information',
   path: ['color', 'background', 'information', '[default]', '[default]'],
   description: 'Use for backgrounds communicating information or something in-progress, such as in information section messages.',
-  exampleValue: '#E9F2FF'
+  exampleValue: '#E9F2FE'
 }, {
   name: 'color.background.information.hovered',
   path: ['color', 'background', 'information', '[default]', 'hovered'],
   description: 'Hovered state of color.background.information',
-  exampleValue: '#CCE0FF'
+  exampleValue: '#CFE1FD'
 }, {
   name: 'color.background.information.pressed',
   path: ['color', 'background', 'information', '[default]', 'pressed'],
   description: 'Pressed state of color.background.information',
-  exampleValue: '#85B8FF'
+  exampleValue: '#ADCBFB'
 }, {
   name: 'color.background.information.bold',
   path: ['color', 'background', 'information', 'bold', '[default]'],
   description: 'A vibrant background option for communicating information or something in-progress.',
-  exampleValue: '#0C66E4'
+  exampleValue: '#1868DB'
 }, {
   name: 'color.background.information.bold.hovered',
   path: ['color', 'background', 'information', 'bold', 'hovered'],
   description: 'Hovered state of color.background.information.bold',
-  exampleValue: '#0055CC'
+  exampleValue: '#1558BC'
 }, {
   name: 'color.background.information.bold.pressed',
   path: ['color', 'background', 'information', 'bold', 'pressed'],
   description: 'Pressed state of color.background.information.bold',
-  exampleValue: '#09326C'
+  exampleValue: '#144794'
 }, {
   name: 'color.blanket',
   path: ['color', 'blanket', '[default]'],
   description: 'Use for the screen overlay that appears with modal dialogs',
-  exampleValue: '#091E427D'
+  exampleValue: '#050C1F75'
 }, {
   name: 'color.blanket.selected',
   path: ['color', 'blanket', 'selected'],
@@ -1356,92 +1356,92 @@ export var tokens = [{
   name: 'color.skeleton',
   path: ['color', 'skeleton', '[default]'],
   description: 'Use for skeleton loading states',
-  exampleValue: '#091E420F'
+  exampleValue: '#0515240F'
 }, {
   name: 'color.skeleton.subtle',
   path: ['color', 'skeleton', 'subtle'],
   description: 'Use for the pulse or shimmer effect in skeleton loading states',
-  exampleValue: '#091E4208'
+  exampleValue: '#17171708'
 }, {
   name: 'color.chart.categorical.1',
   path: ['color', 'chart', 'categorical', '1', '[default]'],
   description: 'For data visualisation only. Follow numbered sequence.',
-  exampleValue: '#2898BD'
+  exampleValue: '#357DE8'
 }, {
   name: 'color.chart.categorical.1.hovered',
   path: ['color', 'chart', 'categorical', '1', 'hovered'],
   description: 'Hovered state of color.chart.categorical.1.',
-  exampleValue: '#227D9B'
+  exampleValue: '#1868DB'
 }, {
   name: 'color.chart.categorical.2',
   path: ['color', 'chart', 'categorical', '2', '[default]'],
   description: 'For data visualisation only. Follow numbered sequence.',
-  exampleValue: '#5E4DB2'
+  exampleValue: '#82B536'
 }, {
   name: 'color.chart.categorical.2.hovered',
   path: ['color', 'chart', 'categorical', '2', 'hovered'],
   description: 'Hovered state of color.chart.categorical.2.',
-  exampleValue: '#352C63'
+  exampleValue: '#6A9A23'
 }, {
   name: 'color.chart.categorical.3',
   path: ['color', 'chart', 'categorical', '3', '[default]'],
   description: 'For data visualisation only. Follow numbered sequence.',
-  exampleValue: '#E56910'
+  exampleValue: '#BF63F3'
 }, {
   name: 'color.chart.categorical.3.hovered',
   path: ['color', 'chart', 'categorical', '3', 'hovered'],
   description: 'Hovered state of color.chart.categorical.3.',
-  exampleValue: '#C25100'
+  exampleValue: '#AF59E1'
 }, {
   name: 'color.chart.categorical.4',
   path: ['color', 'chart', 'categorical', '4', '[default]'],
   description: 'For data visualisation only. Follow numbered sequence.',
-  exampleValue: '#943D73'
+  exampleValue: '#F68909'
 }, {
   name: 'color.chart.categorical.4.hovered',
   path: ['color', 'chart', 'categorical', '4', 'hovered'],
   description: 'Hovered state of color.chart.categorical.4.',
-  exampleValue: '#50253F'
+  exampleValue: '#E06C00'
 }, {
   name: 'color.chart.categorical.5',
   path: ['color', 'chart', 'categorical', '5', '[default]'],
   description: 'For data visualisation only. Follow numbered sequence.',
-  exampleValue: '#09326C'
+  exampleValue: '#1558BC'
 }, {
   name: 'color.chart.categorical.5.hovered',
   path: ['color', 'chart', 'categorical', '5', 'hovered'],
   description: 'Hovered state of color.chart.categorical.5.',
-  exampleValue: '#1C2B41'
+  exampleValue: '#123263'
 }, {
   name: 'color.chart.categorical.6',
   path: ['color', 'chart', 'categorical', '6', '[default]'],
   description: 'For data visualisation only. Follow numbered sequence.',
-  exampleValue: '#8F7EE7'
+  exampleValue: '#964AC0'
 }, {
   name: 'color.chart.categorical.6.hovered',
   path: ['color', 'chart', 'categorical', '6', 'hovered'],
   description: 'Hovered state of color.chart.categorical.6.',
-  exampleValue: '#8270DB'
+  exampleValue: '#803FA5'
 }, {
   name: 'color.chart.categorical.7',
   path: ['color', 'chart', 'categorical', '7', '[default]'],
   description: 'For data visualisation only. Follow numbered sequence.',
-  exampleValue: '#50253F'
+  exampleValue: '#42B2D7'
 }, {
   name: 'color.chart.categorical.7.hovered',
   path: ['color', 'chart', 'categorical', '7', 'hovered'],
   description: 'Hovered state of color.chart.categorical.7.',
-  exampleValue: '#3D2232'
+  exampleValue: '#2898BD'
 }, {
   name: 'color.chart.categorical.8',
   path: ['color', 'chart', 'categorical', '8', '[default]'],
   description: 'For data visualisation only. Follow numbered sequence.',
-  exampleValue: '#A54800'
+  exampleValue: '#BD5B00'
 }, {
   name: 'color.chart.categorical.8.hovered',
   path: ['color', 'chart', 'categorical', '8', 'hovered'],
   description: 'Hovered state of color.chart.categorical.8.',
-  exampleValue: '#702E00'
+  exampleValue: '#7A3B00'
 }, {
   name: 'color.chart.lime.bold',
   path: ['color', 'chart', 'lime', 'bold', '[default]'],
@@ -1476,12 +1476,12 @@ export var tokens = [{
   name: 'color.chart.neutral',
   path: ['color', 'chart', 'neutral', '[default]'],
   description: "A secondary color for data visualisation or to communicate 'to-do' statues.",
-  exampleValue: '#8590A2'
+  exampleValue: '#8C8F97'
 }, {
   name: 'color.chart.neutral.hovered',
   path: ['color', 'chart', 'neutral', 'hovered'],
   description: 'Hovered state of color.chart.neutral.',
-  exampleValue: '#758195'
+  exampleValue: '#7D818A'
 }, {
   name: 'color.chart.red.bold',
   path: ['color', 'chart', 'red', 'bold', '[default]'],
@@ -1516,32 +1516,32 @@ export var tokens = [{
   name: 'color.chart.orange.bold',
   path: ['color', 'chart', 'orange', 'bold', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#E56910'
+  exampleValue: '#E06C00'
 }, {
   name: 'color.chart.orange.bold.hovered',
   path: ['color', 'chart', 'orange', 'bold', 'hovered'],
   description: 'Hovered state of color.chart.orange.bold.',
-  exampleValue: '#C25100'
+  exampleValue: '#BD5B00'
 }, {
   name: 'color.chart.orange.bolder',
   path: ['color', 'chart', 'orange', 'bolder', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#C25100'
+  exampleValue: '#BD5B00'
 }, {
   name: 'color.chart.orange.bolder.hovered',
   path: ['color', 'chart', 'orange', 'bolder', 'hovered'],
   description: 'Hovered state of color.chart.orange.bolder.',
-  exampleValue: '#A54800'
+  exampleValue: '#9E4C00'
 }, {
   name: 'color.chart.orange.boldest',
   path: ['color', 'chart', 'orange', 'boldest', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#A54800'
+  exampleValue: '#7A3B00'
 }, {
   name: 'color.chart.orange.boldest.hovered',
   path: ['color', 'chart', 'orange', 'boldest', 'hovered'],
   description: 'Hovered state of color.chart.orange.boldest.',
-  exampleValue: '#702E00'
+  exampleValue: '#693200'
 }, {
   name: 'color.chart.yellow.bold',
   path: ['color', 'chart', 'yellow', 'bold', '[default]'],
@@ -1636,62 +1636,62 @@ export var tokens = [{
   name: 'color.chart.blue.bold',
   path: ['color', 'chart', 'blue', 'bold', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#388BFF'
+  exampleValue: '#4688EC'
 }, {
   name: 'color.chart.blue.bold.hovered',
   path: ['color', 'chart', 'blue', 'bold', 'hovered'],
   description: 'Hovered state of color.chart.blue.bold.',
-  exampleValue: '#1D7AFC'
+  exampleValue: '#357DE8'
 }, {
   name: 'color.chart.blue.bolder',
   path: ['color', 'chart', 'blue', 'bolder', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#1D7AFC'
+  exampleValue: '#357DE8'
 }, {
   name: 'color.chart.blue.bolder.hovered',
   path: ['color', 'chart', 'blue', 'bolder', 'hovered'],
   description: 'Hovered state of color.chart.blue.bolder.',
-  exampleValue: '#0C66E4'
+  exampleValue: '#1868DB'
 }, {
   name: 'color.chart.blue.boldest',
   path: ['color', 'chart', 'blue', 'boldest', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#0055CC'
+  exampleValue: '#1558BC'
 }, {
   name: 'color.chart.blue.boldest.hovered',
   path: ['color', 'chart', 'blue', 'boldest', 'hovered'],
   description: 'Hovered state of color.chart.blue.boldest.',
-  exampleValue: '#09326C'
+  exampleValue: '#123263'
 }, {
   name: 'color.chart.purple.bold',
   path: ['color', 'chart', 'purple', 'bold', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#8F7EE7'
+  exampleValue: '#BF63F3'
 }, {
   name: 'color.chart.purple.bold.hovered',
   path: ['color', 'chart', 'purple', 'bold', 'hovered'],
   description: 'Hovered state of color.chart.purple.bold.',
-  exampleValue: '#8270DB'
+  exampleValue: '#AF59E1'
 }, {
   name: 'color.chart.purple.bolder',
   path: ['color', 'chart', 'purple', 'bolder', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#8270DB'
+  exampleValue: '#AF59E1'
 }, {
   name: 'color.chart.purple.bolder.hovered',
   path: ['color', 'chart', 'purple', 'bolder', 'hovered'],
   description: 'Hovered state of color.chart.purple.bolder.',
-  exampleValue: '#6E5DC6'
+  exampleValue: '#964AC0'
 }, {
   name: 'color.chart.purple.boldest',
   path: ['color', 'chart', 'purple', 'boldest', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#5E4DB2'
+  exampleValue: '#803FA5'
 }, {
   name: 'color.chart.purple.boldest.hovered',
   path: ['color', 'chart', 'purple', 'boldest', 'hovered'],
   description: 'Hovered state of color.chart.purple.boldest.',
-  exampleValue: '#352C63'
+  exampleValue: '#48245D'
 }, {
   name: 'color.chart.magenta.bold',
   path: ['color', 'chart', 'magenta', 'bold', '[default]'],
@@ -1726,57 +1726,57 @@ export var tokens = [{
   name: 'color.chart.gray.bold',
   path: ['color', 'chart', 'gray', 'bold', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#8590A2'
+  exampleValue: '#8C8F97'
 }, {
   name: 'color.chart.gray.bold.hovered',
   path: ['color', 'chart', 'gray', 'bold', 'hovered'],
   description: 'Hovered state of color.chart.gray.bold.',
-  exampleValue: '#758195'
+  exampleValue: '#7D818A'
 }, {
   name: 'color.chart.gray.bolder',
   path: ['color', 'chart', 'gray', 'bolder', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#758195'
+  exampleValue: '#7D818A'
 }, {
   name: 'color.chart.gray.bolder.hovered',
   path: ['color', 'chart', 'gray', 'bolder', 'hovered'],
   description: 'Hovered state of color.chart.gray.bolder.',
-  exampleValue: '#626F86'
+  exampleValue: '#6B6E76'
 }, {
   name: 'color.chart.gray.boldest',
   path: ['color', 'chart', 'gray', 'boldest', '[default]'],
   description: 'For data visualisation only.',
-  exampleValue: '#44546F'
+  exampleValue: '#505258'
 }, {
   name: 'color.chart.gray.boldest.hovered',
   path: ['color', 'chart', 'gray', 'boldest', 'hovered'],
   description: 'Hovered state of color.chart.gray.boldest.',
-  exampleValue: '#2C3E5D'
+  exampleValue: '#3B3D42'
 }, {
   name: 'color.chart.brand',
   path: ['color', 'chart', 'brand', '[default]'],
   description: 'Our primary color for data visualisation. Use when only one color is required.',
-  exampleValue: '#1D7AFC'
+  exampleValue: '#357DE8'
 }, {
   name: 'color.chart.brand.hovered',
   path: ['color', 'chart', 'brand', 'hovered'],
   description: 'Hovered state of color.chart.brand.',
-  exampleValue: '#0C66E4'
+  exampleValue: '#1868DB'
 }, {
   name: 'color.chart.danger',
   path: ['color', 'chart', 'danger', '[default]', '[default]'],
   description: "For data visualisation communicating negative information, such as 'off track'.",
-  exampleValue: '#F15B50'
+  exampleValue: '#E2483D'
 }, {
   name: 'color.chart.danger.hovered',
   path: ['color', 'chart', 'danger', '[default]', 'hovered'],
   description: 'Hovered state of color.chart.danger.',
-  exampleValue: '#E2483D'
+  exampleValue: '#C9372C'
 }, {
   name: 'color.chart.danger.bold',
   path: ['color', 'chart', 'danger', 'bold', '[default]'],
   description: 'A stronger emphasis option of color.chart.danger.',
-  exampleValue: '#AE2E24'
+  exampleValue: '#872821'
 }, {
   name: 'color.chart.danger.bold.hovered',
   path: ['color', 'chart', 'danger', 'bold', 'hovered'],
@@ -1786,82 +1786,82 @@ export var tokens = [{
   name: 'color.chart.warning',
   path: ['color', 'chart', 'warning', '[default]', '[default]'],
   description: "For data visualisation communicating caution, such as 'at risk' statuses.",
-  exampleValue: '#B38600'
+  exampleValue: '#F68909'
 }, {
   name: 'color.chart.warning.hovered',
   path: ['color', 'chart', 'warning', '[default]', 'hovered'],
   description: 'Hovered state of color.chart.warning.',
-  exampleValue: '#946F00'
+  exampleValue: '#E06C00'
 }, {
   name: 'color.chart.warning.bold',
   path: ['color', 'chart', 'warning', 'bold', '[default]'],
   description: 'A stronger emphasis option of color.chart.warning.',
-  exampleValue: '#7F5F01'
+  exampleValue: '#BD5B00'
 }, {
   name: 'color.chart.warning.bold.hovered',
   path: ['color', 'chart', 'warning', 'bold', 'hovered'],
   description: 'Hovered state of color.chart.warning.bold.',
-  exampleValue: '#533F04'
+  exampleValue: '#9E4C00'
 }, {
   name: 'color.chart.success',
   path: ['color', 'chart', 'success', '[default]', '[default]'],
   description: "For data visualisation communicating positive information, such as 'on track'.",
-  exampleValue: '#22A06B'
+  exampleValue: '#82B536'
 }, {
   name: 'color.chart.success.hovered',
   path: ['color', 'chart', 'success', '[default]', 'hovered'],
   description: 'Hovered state of color.chart.success.',
-  exampleValue: '#1F845A'
+  exampleValue: '#6A9A23'
 }, {
   name: 'color.chart.success.bold',
   path: ['color', 'chart', 'success', 'bold', '[default]'],
   description: 'A stronger emphasis option of color.chart.success.',
-  exampleValue: '#216E4E'
+  exampleValue: '#5B7F24'
 }, {
   name: 'color.chart.success.bold.hovered',
   path: ['color', 'chart', 'success', 'bold', 'hovered'],
   description: 'Hovered state of color.chart.success.bold.',
-  exampleValue: '#164B35'
+  exampleValue: '#4C6B1F'
 }, {
   name: 'color.chart.discovery',
   path: ['color', 'chart', 'discovery', '[default]', '[default]'],
   description: "For data visualisation communicating 'new' statuses.",
-  exampleValue: '#8F7EE7'
+  exampleValue: '#BF63F3'
 }, {
   name: 'color.chart.discovery.hovered',
   path: ['color', 'chart', 'discovery', '[default]', 'hovered'],
   description: 'Hovered state of color.chart.discovery.',
-  exampleValue: '#8270DB'
+  exampleValue: '#AF59E1'
 }, {
   name: 'color.chart.discovery.bold',
   path: ['color', 'chart', 'discovery', 'bold', '[default]'],
   description: 'A stronger emphasis option of color.chart.discovery.',
-  exampleValue: '#5E4DB2'
+  exampleValue: '#803FA5'
 }, {
   name: 'color.chart.discovery.bold.hovered',
   path: ['color', 'chart', 'discovery', 'bold', 'hovered'],
   description: 'Hovered state of color.chart.discovery.bold.',
-  exampleValue: '#352C63'
+  exampleValue: '#964AC0'
 }, {
   name: 'color.chart.information',
   path: ['color', 'chart', 'information', '[default]', '[default]'],
   description: 'For data visualisation communicating low priority or in-progress statuses.',
-  exampleValue: '#388BFF'
+  exampleValue: '#357DE8'
 }, {
   name: 'color.chart.information.hovered',
   path: ['color', 'chart', 'information', '[default]', 'hovered'],
   description: 'Hovered state of color.chart.information.',
-  exampleValue: '#1D7AFC'
+  exampleValue: '#1868DB'
 }, {
   name: 'color.chart.information.bold',
   path: ['color', 'chart', 'information', 'bold', '[default]'],
   description: 'A stronger emphasis option of color.chart.information.',
-  exampleValue: '#0055CC'
+  exampleValue: '#1558BC'
 }, {
   name: 'color.chart.information.bold.hovered',
   path: ['color', 'chart', 'information', 'bold', 'hovered'],
   description: 'Hovered state of color.chart.information.bold.',
-  exampleValue: '#09326C'
+  exampleValue: '#123263'
 }, {
   name: 'elevation.surface',
   path: ['elevation', 'surface', '[default]', '[default]'],
@@ -1871,12 +1871,12 @@ export var tokens = [{
   name: 'elevation.surface.hovered',
   path: ['elevation', 'surface', '[default]', 'hovered'],
   description: 'Hovered state of elevation.surface',
-  exampleValue: '#F1F2F4'
+  exampleValue: '#F0F1F2'
 }, {
   name: 'elevation.surface.pressed',
   path: ['elevation', 'surface', '[default]', 'pressed'],
   description: 'Pressed state of elevation.surface',
-  exampleValue: '#DCDFE4'
+  exampleValue: '#DDDEE1'
 }, {
   name: 'elevation.surface.overlay',
   path: ['elevation', 'surface', 'overlay', '[default]'],
@@ -1886,12 +1886,12 @@ export var tokens = [{
   name: 'elevation.surface.overlay.hovered',
   path: ['elevation', 'surface', 'overlay', 'hovered'],
   description: 'Hovered state of elevation.surface.overlay',
-  exampleValue: '#F1F2F4'
+  exampleValue: '#F0F1F2'
 }, {
   name: 'elevation.surface.overlay.pressed',
   path: ['elevation', 'surface', 'overlay', 'pressed'],
   description: 'Pressed state of elevation.surface.overlay',
-  exampleValue: '#DCDFE4'
+  exampleValue: '#DDDEE1'
 }, {
   name: 'elevation.surface.raised',
   path: ['elevation', 'surface', 'raised', '[default]'],
@@ -1901,42 +1901,42 @@ export var tokens = [{
   name: 'elevation.surface.raised.hovered',
   path: ['elevation', 'surface', 'raised', 'hovered'],
   description: 'Hovered state of elevation.surface.raised',
-  exampleValue: '#F1F2F4'
+  exampleValue: '#F0F1F2'
 }, {
   name: 'elevation.surface.raised.pressed',
   path: ['elevation', 'surface', 'raised', 'pressed'],
   description: 'Pressed state of elevation.surface.raised',
-  exampleValue: '#DCDFE4'
+  exampleValue: '#DDDEE1'
 }, {
   name: 'elevation.surface.sunken',
   path: ['elevation', 'surface', 'sunken'],
   description: 'A secondary background for the UI commonly used for grouping items, such as Jira cards in columns.',
-  exampleValue: '#F7F8F9'
+  exampleValue: '#F8F8F8'
 }, {
   name: 'elevation.shadow.overflow',
   path: ['elevation', 'shadow', 'overflow', '[default]'],
   description: 'Use to create a shadow when content scrolls under other content.',
-  exampleValue: '0px 0px 8px #091E4229, 0px 0px 1px #091E421F'
+  exampleValue: '0px 0px 8px #1E1F2129, 0px 0px 1px #1E1F211F'
 }, {
   name: 'elevation.shadow.overflow.perimeter',
   path: ['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: '#091e421f'
+  exampleValue: '#1E1F211f'
 }, {
   name: 'elevation.shadow.overflow.spread',
   path: ['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: '#091e4229'
+  exampleValue: '#1E1F2129'
 }, {
   name: 'elevation.shadow.overlay',
   path: ['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 #091E4226, 0px 0px 1px #091E424F'
+  exampleValue: '0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214F'
 }, {
   name: 'elevation.shadow.raised',
   path: ['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 #091E4240, 0px 0px 1px #091E424F'
+  exampleValue: '0px 1px 1px #1E1F2140, 0px 0px 1px #1E1F214F'
 }, {
   name: 'opacity.disabled',
   path: ['opacity', 'disabled'],