From 4ff0c98d156f39793cb5ed44033302ce0107a671 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <32556167+jnm2377@users.noreply.github.com>
Date: Thu, 31 Mar 2022 00:07:11 -0500
Subject: [PATCH] feat: update color page tokens (#2840)

* fix: icon button component demo

* Revert "fix: icon button component demo"

This reverts commit 30aa011643054b7e6d96afe61327a750ee1bcc37.

* feat: update color tokens

* fix: remove inline notification
---
 src/data/guidelines/color-tokens.js  | 1768 +++++++++++++++++++-------
 src/pages/guidelines/color/usage.mdx |    9 -
 2 files changed, 1291 insertions(+), 486 deletions(-)

diff --git a/src/data/guidelines/color-tokens.js b/src/data/guidelines/color-tokens.js
index 3c0784a226c..be10a1f7180 100644
--- a/src/data/guidelines/color-tokens.js
+++ b/src/data/guidelines/color-tokens.js
@@ -1,7 +1,7 @@
 /* eslint-disable */
 const colorTokens = {
   'core-tokens': {
-    '$ui-background': {
+    $background: {
       role: ['Default page background'],
       value: {
         white: {
@@ -22,8 +22,29 @@ const colorTokens = {
         },
       },
     },
-    '$interactive-01': {
-      role: ['Primary interactive color', 'Primary buttons'],
+    '$background-inverse': {
+      role: ['High contrast backgrounds', 'High contrast elements'],
+      value: {
+        white: {
+          name: 'Gray 80',
+          hex: '#393939',
+        },
+        g10: {
+          name: 'Gray 80',
+          hex: '#393939',
+        },
+        g90: {
+          name: 'Gray 10',
+          hex: '#f4f4f4',
+        },
+        g100: {
+          name: 'Gray 10',
+          hex: '#f4f4f4',
+        },
+      },
+    },
+    '$background-brand': {
+      role: ['Primary interactive color'],
       value: {
         white: {
           name: 'Blue 60',
@@ -43,29 +64,34 @@ const colorTokens = {
         },
       },
     },
-    '$interactive-02': {
-      role: ['Secondary interactive color', 'Secondary button'],
+    $interactive: {
+      role: [
+        '3:1 AA contrast',
+        'Selected elements',
+        'Active elements',
+        'Accent icons',
+      ],
       value: {
         white: {
-          name: 'Gray 80',
-          hex: '#393939',
+          name: 'Blue 60',
+          hex: '#0f62fe',
         },
         g10: {
-          name: 'Gray 80',
-          hex: '#393939',
+          name: 'Blue 60',
+          hex: '#0f62fe',
         },
         g90: {
-          name: 'Gray 60',
-          hex: '#6f6f6f',
+          name: 'Blue 50',
+          hex: '#4589ff',
         },
         g100: {
-          name: 'Gray 60',
-          hex: '#6f6f6f',
+          name: 'Blue 50',
+          hex: '#4589ff',
         },
       },
     },
-    '$interactive-03': {
-      role: ['4.5:1 AA contrast', 'Tertiary button'],
+    '$button-primary': {
+      role: ['Primary interactive color', 'Primary buttons'],
       value: {
         white: {
           name: 'Blue 60',
@@ -76,22 +102,38 @@ const colorTokens = {
           hex: '#0f62fe',
         },
         g90: {
-          name: 'White',
-          hex: '#ffffff',
+          name: 'Blue 60',
+          hex: '#0f62fe',
         },
         g100: {
-          name: 'White',
-          hex: '#ffffff',
+          name: 'Blue 60',
+          hex: '#0f62fe',
         },
       },
     },
-    '$interactive-04': {
-      role: [
-        '3:1 AA contrast',
-        'Selected elements',
-        'Active elements',
-        'Accent icons',
-      ],
+    '$button-secondary': {
+      role: ['Secondary interactive color', 'Secondary button'],
+      value: {
+        white: {
+          name: 'Gray 80',
+          hex: '#393939',
+        },
+        g10: {
+          name: 'Gray 80',
+          hex: '#393939',
+        },
+        g90: {
+          name: 'Gray 60',
+          hex: '#6f6f6f',
+        },
+        g100: {
+          name: 'Gray 60',
+          hex: '#6f6f6f',
+        },
+      },
+    },
+    '$button-tertiary': {
+      role: ['4.5:1 AA contrast', 'Tertiary button'],
       value: {
         white: {
           name: 'Blue 60',
@@ -102,16 +144,16 @@ const colorTokens = {
           hex: '#0f62fe',
         },
         g90: {
-          name: 'Blue 50',
-          hex: '#4589ff',
+          name: 'White',
+          hex: '#ffffff',
         },
         g100: {
-          name: 'Blue 50',
-          hex: '#4589ff',
+          name: 'White',
+          hex: '#ffffff',
         },
       },
     },
-    '$danger-01': {
+    '$button-danger-primary': {
       role: ['Danger button background', '3:1 AA contrast'],
       value: {
         white: {
@@ -132,7 +174,7 @@ const colorTokens = {
         },
       },
     },
-    '$danger-02': {
+    '$button-danger-secondary': {
       role: ['Danger button variant', 'Text', 'Icon', 'Border'],
       value: {
         white: {
@@ -153,9 +195,30 @@ const colorTokens = {
         },
       },
     },
-    '$ui-01': {
+    '$button-separator': {
+      role: ['3:1 aa element contrast', 'Fluid button separator'],
+      value: {
+        white: {
+          name: 'Gray 20',
+          hex: '#e0e0e0',
+        },
+        g10: {
+          name: 'Gray 20',
+          hex: '#e0e0e0',
+        },
+        g90: {
+          name: 'Gray 100',
+          hex: '#161616',
+        },
+        g100: {
+          name: 'Gray 100',
+          hex: '#161616',
+        },
+      },
+    },
+    '$layer-01': {
       role: [
-        'Container background on $ui-background',
+        'Container background on $background',
         'Secondary page background',
       ],
       value: {
@@ -177,8 +240,8 @@ const colorTokens = {
         },
       },
     },
-    '$ui-02': {
-      role: ['Container background on $ui-01', '`Light` variant background'],
+    '$layer-02': {
+      role: ['Container background on $layer-01'],
       value: {
         white: {
           name: 'White',
@@ -198,54 +261,29 @@ const colorTokens = {
         },
       },
     },
-    '$ui-03': {
-      role: ['Subtle border', 'Tertiary background'],
-      value: {
-        white: {
-          name: 'Gray 20',
-          hex: '#e0e0e0',
-        },
-        g10: {
-          name: 'Gray 20',
-          hex: '#e0e0e0',
-        },
-        g90: {
-          name: 'Gray 70',
-          hex: '#525252',
-        },
-        g100: {
-          name: 'Gray 80',
-          hex: '#393939',
-        },
-      },
-    },
-    '$ui-04': {
-      role: ['3:1 aa element contrast', 'Medium contrast border'],
+    '$layer-03': {
+      role: ['Container background on $layer-02'],
       value: {
         white: {
-          name: 'Gray 50',
-          hex: '#8d8d8d',
+          name: 'Gray 10',
+          hex: '#f4f4f4',
         },
         g10: {
-          name: 'Gray 50',
-          hex: '#8d8d8d',
+          name: 'White',
+          hex: '#ffffff',
         },
         g90: {
-          name: 'Gray 50',
-          hex: '#8d8d8d',
-        },
-        g100: {
           name: 'Gray 60',
           hex: '#6f6f6f',
         },
+        g100: {
+          name: 'Gray 70',
+          hex: '#525252',
+        },
       },
     },
-    '$ui-05': {
-      role: [
-        '4.5:1 aa element contrast',
-        'High contrast border',
-        'Emphasis elements',
-      ],
+    '$layer-selected-inverse': {
+      role: ['4.5:1 aa element contrast', 'Emphasis elements'],
       value: {
         white: {
           name: 'Gray 100',
@@ -265,8 +303,8 @@ const colorTokens = {
         },
       },
     },
-    '$button-separator': {
-      role: ['3:1 aa element contrast', 'Fluid button separator'],
+    '$layer-accent-01': {
+      role: ['Tertiary background'],
       value: {
         white: {
           name: 'Gray 20',
@@ -277,17 +315,17 @@ const colorTokens = {
           hex: '#e0e0e0',
         },
         g90: {
-          name: 'Gray 100',
-          hex: '#161616',
+          name: 'Gray 70',
+          hex: '#525252',
         },
         g100: {
-          name: 'Gray 100',
-          hex: '#161616',
+          name: 'Gray 80',
+          hex: '#393939',
         },
       },
     },
-    '$decorative-01': {
-      role: ['“Light” variant elements'],
+    '$layer-accent-02': {
+      role: ['Tertiary background'],
       value: {
         white: {
           name: 'Gray 20',
@@ -307,202 +345,223 @@ const colorTokens = {
         },
       },
     },
-    '$text-01': {
-      role: [
-        'Primary text',
-        'Body copy',
-        'Headers',
-        'Hover text color for $text-02',
-      ],
+    '$layer-accent-03': {
+      role: ['Tertiary background'],
       value: {
         white: {
-          name: 'Gray 100',
-          hex: '#161616',
+          name: 'Gray 20',
+          hex: '#e0e0e0',
         },
         g10: {
-          name: 'Gray 100',
-          hex: '#161616',
+          name: 'Gray 20',
+          hex: '#e0e0e0',
         },
         g90: {
-          name: 'Gray 10',
-          hex: '#f4f4f4',
+          name: 'Gray 50',
+          hex: '#8d8d8d',
         },
         g100: {
-          name: 'Gray 10',
-          hex: '#f4f4f4',
+          name: 'Gray 60',
+          hex: '#6f6f6f',
         },
       },
     },
-    '$text-02': {
-      role: ['Secondary text', 'Input labels'],
+    '$toggle-off': {
+      role: ['3:1 aa element contrast'],
       value: {
         white: {
-          name: 'Gray 70',
-          hex: '#525252',
+          name: 'Gray 50',
+          hex: '#8d8d8d',
         },
         g10: {
-          name: 'Gray 70',
-          hex: '#525252',
+          name: 'Gray 50',
+          hex: '#8d8d8d',
         },
         g90: {
-          name: 'Gray 30',
-          hex: '#c6c6c6',
+          name: 'Gray 50',
+          hex: '#8d8d8d',
         },
         g100: {
-          name: 'Gray 30',
-          hex: '#c6c6c6',
+          name: 'Gray 60',
+          hex: '#6f6f6f',
         },
       },
     },
-    '$text-03': {
-      role: ['Placeholder text'],
+    '$border-interactive': {
+      role: [
+        '3:1 AA contrast',
+        'Selected elements',
+        'Active elements',
+        'Accent icons',
+      ],
       value: {
         white: {
-          name: 'Gray 40',
-          hex: '#a8a8a8',
+          name: 'Blue 60',
+          hex: '#0f62fe',
         },
         g10: {
-          name: 'Gray 40',
-          hex: '#a8a8a8',
+          name: 'Blue 60',
+          hex: '#0f62fe',
         },
         g90: {
-          name: 'Gray 60',
-          hex: '#6f6f6f',
+          name: 'Blue 50',
+          hex: '#4589ff',
         },
         g100: {
-          name: 'Gray 60',
-          hex: '#6f6f6f',
+          name: 'Blue 50',
+          hex: '#4589ff',
         },
       },
     },
-    '$text-04': {
-      role: ['Text on interactive colors'],
+    '$border-subtle-00': {
+      role: ['Subtle border'],
       value: {
         white: {
-          name: 'White',
-          hex: '#ffffff',
+          name: 'Gray 20',
+          hex: '#e0e0e0',
         },
         g10: {
-          name: 'White',
-          hex: '#ffffff',
+          name: 'Gray 20',
+          hex: '#e0e0e0',
         },
         g90: {
-          name: 'White',
-          hex: '#ffffff',
+          name: 'Gray 70',
+          hex: '#525252',
         },
         g100: {
-          name: 'White',
-          hex: '#ffffff',
+          name: 'Gray 80',
+          hex: '#393939',
         },
       },
     },
-    '$text-05': {
-      role: ['Tertiary text', 'Help text'],
+    '$border-subtle-01': {
+      role: ['Subtle border'],
       value: {
         white: {
-          name: 'Gray 60',
-          hex: '#6f6f6f',
+          name: 'Gray 20',
+          hex: '#e0e0e0',
         },
         g10: {
-          name: 'Gray 60',
-          hex: '#6f6f6f',
+          name: 'Gray 20',
+          hex: '#e0e0e0',
         },
         g90: {
-          name: 'Gray 50',
-          hex: '#8d8d8d',
+          name: 'Gray 70',
+          hex: '#525252',
         },
         g100: {
-          name: 'Gray 50',
-          hex: '#8d8d8d',
+          name: 'Gray 80',
+          hex: '#393939',
         },
       },
     },
-    '$text-error': {
-      role: ['Error message text'],
+    '$border-subtle-02': {
+      role: ['“Light” variant elements'],
       value: {
         white: {
-          name: 'Red 60',
-          hex: '#da1e28',
+          name: 'Gray 20',
+          hex: '#e0e0e0',
         },
         g10: {
-          name: 'Red 60',
-          hex: '#da1e28',
+          name: 'Gray 20',
+          hex: '#e0e0e0',
         },
         g90: {
-          name: 'Red 30',
-          hex: '#ffb3b8',
+          name: 'Gray 60',
+          hex: '#6f6f6f',
         },
         g100: {
-          name: 'Red 40',
-          hex: '#ff8389',
+          name: 'Gray 70',
+          hex: '#525252',
         },
       },
     },
-    '$link-01': {
-      role: ['Primary links', 'Ghost button'],
+    '$border-subtle-03': {
+      role: ['“Light” variant elements'],
       value: {
         white: {
-          name: 'Blue 60',
-          hex: '#0f62fe',
+          name: 'Gray 20',
+          hex: '#e0e0e0',
         },
         g10: {
-          name: 'Blue 60',
-          hex: '#0f62fe',
+          name: 'Gray 20',
+          hex: '#e0e0e0',
         },
         g90: {
-          name: 'Blue 40',
-          hex: '#78a9ff',
+          name: 'Gray 50',
+          hex: '#8d8d8d',
         },
         g100: {
-          name: 'Blue 40',
-          hex: '#78a9ff',
+          name: 'Gray 60',
+          hex: '#6f6f6f',
         },
       },
     },
-    '$link-02': {
-      role: ['Secondary link color for lower contrast backgrounds'],
+    '$border-strong-01': {
+      role: ['3:1 aa element contrast', 'Medium contrast border'],
       value: {
         white: {
-          name: 'Blue 70',
-          hex: '#0043ce',
+          name: 'Gray 50',
+          hex: '#8d8d8d',
         },
         g10: {
-          name: 'Blue 70',
-          hex: '#0043ce',
+          name: 'Gray 50',
+          hex: '#8d8d8d',
         },
         g90: {
-          name: 'Blue 30',
-          hex: '#a6c8ff',
+          name: 'Gray 50',
+          hex: '#8d8d8d',
         },
         g100: {
-          name: 'Blue 30',
-          hex: '#a6c8ff',
+          name: 'Gray 60',
+          hex: '#6f6f6f',
         },
       },
     },
-    '$inverse-link': {
-      role: ['Links on $inverse-02 backgrounds'],
+    '$border-strong-02': {
+      role: ['3:1 aa element contrast', 'Medium contrast border'],
       value: {
         white: {
-          name: 'Blue 40',
-          hex: '#78a9ff',
+          name: 'Gray 50',
+          hex: '#8d8d8d',
         },
         g10: {
-          name: 'Blue 40',
-          hex: '#78a9ff',
+          name: 'Gray 50',
+          hex: '#8d8d8d',
         },
         g90: {
-          name: 'Blue 60',
-          hex: '#0f62fe',
+          name: 'Gray 40',
+          hex: '#a8a8a8',
         },
         g100: {
-          name: 'Blue 60',
-          hex: '#0f62fe',
+          name: 'Gray 50',
+          hex: '#8d8d8d',
         },
       },
     },
-    '$icon-01': {
-      role: ['Primary icons'],
+    '$border-strong-03': {
+      role: ['3:1 aa element contrast', 'Medium contrast border'],
+      value: {
+        white: {
+          name: 'Gray 50',
+          hex: '#8d8d8d',
+        },
+        g10: {
+          name: 'Gray 50',
+          hex: '#8d8d8d',
+        },
+        g90: {
+          name: 'Gray 30',
+          hex: '#c6c6c6',
+        },
+        g100: {
+          name: 'Gray 40',
+          hex: '#a8a8a8',
+        },
+      },
+    },
+    '$border-inverse': {
+      role: ['4.5:1 aa element contrast', 'High contrast border'],
       value: {
         white: {
           name: 'Gray 100',
@@ -522,8 +581,34 @@ const colorTokens = {
         },
       },
     },
-    '$icon-02': {
-      role: ['Secondary icons'],
+    '$text-primary': {
+      role: [
+        'Primary text',
+        'Body copy',
+        'Headers',
+        'Hover text color for $text-secondary',
+      ],
+      value: {
+        white: {
+          name: 'Gray 100',
+          hex: '#161616',
+        },
+        g10: {
+          name: 'Gray 100',
+          hex: '#161616',
+        },
+        g90: {
+          name: 'Gray 10',
+          hex: '#f4f4f4',
+        },
+        g100: {
+          name: 'Gray 10',
+          hex: '#f4f4f4',
+        },
+      },
+    },
+    '$text-secondary': {
+      role: ['Secondary text', 'Input labels'],
       value: {
         white: {
           name: 'Gray 70',
@@ -543,8 +628,29 @@ const colorTokens = {
         },
       },
     },
-    '$icon-03': {
-      role: [`Icons on interactive colors`, `Icons on non-ui colors`],
+    '$text-placeholder': {
+      role: ['Placeholder text'],
+      value: {
+        white: {
+          name: 'Gray 40',
+          hex: '#a8a8a8',
+        },
+        g10: {
+          name: 'Gray 40',
+          hex: '#a8a8a8',
+        },
+        g90: {
+          name: 'Gray 60',
+          hex: '#6f6f6f',
+        },
+        g100: {
+          name: 'Gray 60',
+          hex: '#6f6f6f',
+        },
+      },
+    },
+    '$text-on-color': {
+      role: ['Text on interactive colors'],
       value: {
         white: {
           name: 'White',
@@ -564,50 +670,50 @@ const colorTokens = {
         },
       },
     },
-    '$field-01': {
-      role: ['Default input fields', 'Fields on $ui-backgrounds'],
+    '$text-helper': {
+      role: ['Tertiary text', 'Help text'],
       value: {
         white: {
-          name: 'Gray 10',
-          hex: '#f4f4f4',
+          name: 'Gray 60',
+          hex: '#6f6f6f',
         },
         g10: {
-          name: 'White',
-          hex: '#ffffff',
+          name: 'Gray 60',
+          hex: '#6f6f6f',
         },
         g90: {
-          name: 'Gray 80',
-          hex: '#393939',
+          name: 'Gray 50',
+          hex: '#8d8d8d',
         },
         g100: {
-          name: 'Gray 90',
-          hex: '#262626',
+          name: 'Gray 50',
+          hex: '#8d8d8d',
         },
       },
     },
-    '$field-02': {
-      role: ['“Light” variant input fields', 'Fields on $ui-01 backgrounds'],
+    '$text-error': {
+      role: ['Error message text'],
       value: {
         white: {
-          name: 'White',
-          hex: '#ffffff',
+          name: 'Red 60',
+          hex: '#da1e28',
         },
         g10: {
-          name: 'Gray 10',
-          hex: '#f4f4f4',
+          name: 'Red 60',
+          hex: '#da1e28',
         },
         g90: {
-          name: 'Gray 70',
-          hex: '#525252',
+          name: 'Red 30',
+          hex: '#ffb3b8',
         },
         g100: {
-          name: 'Gray 80',
-          hex: '#393939',
+          name: 'Red 40',
+          hex: '#ff8389',
         },
       },
     },
-    '$inverse-01': {
-      role: ['Inverse text color', 'Inverse icon color'],
+    '$text-inverse': {
+      role: ['Inverse text color'],
       value: {
         white: {
           name: 'White',
@@ -627,100 +733,310 @@ const colorTokens = {
         },
       },
     },
-    '$inverse-02': {
-      role: ['High contrast backgrounds', 'High contrast elements'],
+    '$link-primary': {
+      role: ['Primary links'],
       value: {
         white: {
-          name: 'Gray 80',
-          hex: '#393939',
+          name: 'Blue 60',
+          hex: '#0f62fe',
         },
         g10: {
-          name: 'Gray 80',
-          hex: '#393939',
+          name: 'Blue 60',
+          hex: '#0f62fe',
         },
         g90: {
-          name: 'Gray 10',
-          hex: '#f4f4f4',
+          name: 'Blue 40',
+          hex: '#78a9ff',
         },
         g100: {
-          name: 'Gray 10',
-          hex: '#f4f4f4',
+          name: 'Blue 40',
+          hex: '#78a9ff',
         },
       },
     },
-    '$support-01': {
-      role: ['Error'],
+    '$link-secondary': {
+      role: ['Secondary link color for lower contrast backgrounds'],
       value: {
         white: {
-          name: 'Red 60',
-          hex: '#da1e28',
+          name: 'Blue 70',
+          hex: '#0043ce',
         },
         g10: {
-          name: 'Red 60',
-          hex: '#da1e28',
+          name: 'Blue 70',
+          hex: '#0043ce',
         },
         g90: {
-          name: 'Red 40',
-          hex: '#ff8389',
+          name: 'Blue 30',
+          hex: '#a6c8ff',
         },
         g100: {
-          name: 'Red 50',
-          hex: '#fa4d56',
+          name: 'Blue 30',
+          hex: '#a6c8ff',
         },
       },
     },
-    '$support-02': {
-      role: ['Success'],
+    '$link-inverse': {
+      role: ['Links on $background-inverse backgrounds'],
       value: {
         white: {
-          name: 'Green 60',
-          hex: '#198038',
+          name: 'Blue 40',
+          hex: '#78a9ff',
         },
         g10: {
-          name: 'Green 60',
-          hex: '#198038',
+          name: 'Blue 40',
+          hex: '#78a9ff',
         },
         g90: {
-          name: 'Green 40',
-          hex: '#42be65',
+          name: 'Blue 60',
+          hex: '#0f62fe',
         },
         g100: {
-          name: 'Green 40',
-          hex: '#42be65',
+          name: 'Blue 60',
+          hex: '#0f62fe',
         },
       },
     },
-    '$support-03': {
-      role: ['Warning'],
+    '$icon-primary': {
+      role: ['Primary icons'],
       value: {
         white: {
-          name: 'Yellow',
-          hex: '#f1c21b',
+          name: 'Gray 100',
+          hex: '#161616',
         },
         g10: {
-          name: 'Yellow',
-          hex: '#f1c21b',
+          name: 'Gray 100',
+          hex: '#161616',
         },
         g90: {
-          name: 'Yellow',
-          hex: '#f1c21b',
+          name: 'Gray 10',
+          hex: '#f4f4f4',
         },
         g100: {
-          name: 'Yellow',
-          hex: '#f1c21b',
+          name: 'Gray 10',
+          hex: '#f4f4f4',
         },
       },
     },
-    '$support-04': {
-      role: ['Information'],
+    '$icon-secondary': {
+      role: ['Secondary icons'],
       value: {
         white: {
-          name: 'Blue 70',
-          hex: '#0043ce',
+          name: 'Gray 70',
+          hex: '#525252',
         },
         g10: {
-          name: 'Blue 70',
-          hex: '#0043ce',
+          name: 'Gray 70',
+          hex: '#525252',
+        },
+        g90: {
+          name: 'Gray 30',
+          hex: '#c6c6c6',
+        },
+        g100: {
+          name: 'Gray 30',
+          hex: '#c6c6c6',
+        },
+      },
+    },
+    '$icon-on-color': {
+      role: [`Icons on interactive colors`, `Icons on non-ui colors`],
+      value: {
+        white: {
+          name: 'White',
+          hex: '#ffffff',
+        },
+        g10: {
+          name: 'White',
+          hex: '#ffffff',
+        },
+        g90: {
+          name: 'White',
+          hex: '#ffffff',
+        },
+        g100: {
+          name: 'White',
+          hex: '#ffffff',
+        },
+      },
+    },
+    '$icon-inverse': {
+      role: ['Inverse icon color'],
+      value: {
+        white: {
+          name: 'White',
+          hex: '#ffffff',
+        },
+        g10: {
+          name: 'White',
+          hex: '#ffffff',
+        },
+        g90: {
+          name: 'Gray 100',
+          hex: '#161616',
+        },
+        g100: {
+          name: 'Gray 100',
+          hex: '#161616',
+        },
+      },
+    },
+    '$field-01': {
+      role: ['Default input fields', 'Fields on $ui-backgrounds'],
+      value: {
+        white: {
+          name: 'Gray 10',
+          hex: '#f4f4f4',
+        },
+        g10: {
+          name: 'White',
+          hex: '#ffffff',
+        },
+        g90: {
+          name: 'Gray 80',
+          hex: '#393939',
+        },
+        g100: {
+          name: 'Gray 90',
+          hex: '#262626',
+        },
+      },
+    },
+    '$field-02': {
+      role: ['“Light” variant input fields', 'Fields on $ui-01 backgrounds'],
+      value: {
+        white: {
+          name: 'White',
+          hex: '#ffffff',
+        },
+        g10: {
+          name: 'Gray 10',
+          hex: '#f4f4f4',
+        },
+        g90: {
+          name: 'Gray 70',
+          hex: '#525252',
+        },
+        g100: {
+          name: 'Gray 80',
+          hex: '#393939',
+        },
+      },
+    },
+    '$field-03': {
+      role: ['“Light” variant input fields', 'Fields on $ui-01 backgrounds'],
+      value: {
+        white: {
+          name: 'Gray 10',
+          hex: '#f4f4f4',
+        },
+        g10: {
+          name: 'White',
+          hex: '#ffffff',
+        },
+        g90: {
+          name: 'Gray 60',
+          hex: '#6f6f6f',
+        },
+        g100: {
+          name: 'Gray 70',
+          hex: '#525252',
+        },
+      },
+    },
+    '$focus-inset': {
+      role: ['Inverse text color', 'Inverse icon color'],
+      value: {
+        white: {
+          name: 'White',
+          hex: '#ffffff',
+        },
+        g10: {
+          name: 'White',
+          hex: '#ffffff',
+        },
+        g90: {
+          name: 'Gray 100',
+          hex: '#161616',
+        },
+        g100: {
+          name: 'Gray 100',
+          hex: '#161616',
+        },
+      },
+    },
+    '$support-error': {
+      role: ['Error'],
+      value: {
+        white: {
+          name: 'Red 60',
+          hex: '#da1e28',
+        },
+        g10: {
+          name: 'Red 60',
+          hex: '#da1e28',
+        },
+        g90: {
+          name: 'Red 40',
+          hex: '#ff8389',
+        },
+        g100: {
+          name: 'Red 50',
+          hex: '#fa4d56',
+        },
+      },
+    },
+    '$support-success': {
+      role: ['Success'],
+      value: {
+        white: {
+          name: 'Green 60',
+          hex: '#198038',
+        },
+        g10: {
+          name: 'Green 60',
+          hex: '#198038',
+        },
+        g90: {
+          name: 'Green 40',
+          hex: '#42be65',
+        },
+        g100: {
+          name: 'Green 40',
+          hex: '#42be65',
+        },
+      },
+    },
+    '$support-warning': {
+      role: ['Warning'],
+      value: {
+        white: {
+          name: 'Yellow',
+          hex: '#f1c21b',
+        },
+        g10: {
+          name: 'Yellow',
+          hex: '#f1c21b',
+        },
+        g90: {
+          name: 'Yellow',
+          hex: '#f1c21b',
+        },
+        g100: {
+          name: 'Yellow',
+          hex: '#f1c21b',
+        },
+      },
+    },
+    '$support-info': {
+      role: ['Information'],
+      value: {
+        white: {
+          name: 'Blue 70',
+          hex: '#0043ce',
+        },
+        g10: {
+          name: 'Blue 70',
+          hex: '#0043ce',
         },
         g90: {
           name: 'Blue 50',
@@ -732,7 +1048,7 @@ const colorTokens = {
         },
       },
     },
-    '$inverse-support-01': {
+    '$support-error-inverse': {
       role: ['Danger in high contrast moments'],
       value: {
         white: {
@@ -753,7 +1069,7 @@ const colorTokens = {
         },
       },
     },
-    '$inverse-support-02': {
+    '$support-success-inverse': {
       role: ['Success in high contrast moments'],
       value: {
         white: {
@@ -774,7 +1090,7 @@ const colorTokens = {
         },
       },
     },
-    '$inverse-support-03': {
+    '$support-warning-inverse': {
       role: ['Warning in high contrast moments'],
       value: {
         white: {
@@ -795,7 +1111,7 @@ const colorTokens = {
         },
       },
     },
-    '$inverse-support-04': {
+    '$support-info-inverse': {
       role: ['Information in high contrast moments'],
       value: {
         white: {
@@ -816,7 +1132,7 @@ const colorTokens = {
         },
       },
     },
-    '$overlay-01': {
+    $overlay: {
       role: ['Background overlay'],
       value: {
         white: {
@@ -860,7 +1176,7 @@ const colorTokens = {
         },
       },
     },
-    '$inverse-focus-ui': {
+    '$focus-inverse': {
       role: ['Focus on high contrast moments'],
       value: {
         white: {
@@ -881,8 +1197,8 @@ const colorTokens = {
         },
       },
     },
-    '$hover-primary': {
-      role: ['$interactive-01 hover'],
+    '$button-primary-hover': {
+      role: ['$button-primary hover'],
       value: {
         white: {
           name: 'Blue 60 hover',
@@ -902,29 +1218,8 @@ const colorTokens = {
         },
       },
     },
-    '$hover-primary-text': {
-      role: ['$interactive-01 text hover'],
-      value: {
-        white: {
-          name: 'Blue 70',
-          hex: '#0043ce',
-        },
-        g10: {
-          name: 'Blue 70',
-          hex: '#0043ce',
-        },
-        g90: {
-          name: 'Blue 30',
-          hex: '#a6c8ff',
-        },
-        g100: {
-          name: 'Blue 30',
-          hex: '#a6c8ff',
-        },
-      },
-    },
-    '$hover-secondary': {
-      role: ['$interactive-02 hover'],
+    '$button-secondary-hover': {
+      role: ['$button-secondary hover'],
       value: {
         white: {
           name: 'Gray 80 hover',
@@ -944,8 +1239,8 @@ const colorTokens = {
         },
       },
     },
-    '$hover-tertiary': {
-      role: ['$interactive-03 hover', '$inverse-01 hover'],
+    '$button-tertiary-hover': {
+      role: ['$button-tertiary hover'],
       value: {
         white: {
           name: 'Blue 60 hover',
@@ -965,92 +1260,638 @@ const colorTokens = {
         },
       },
     },
-    '$hover-ui': {
-      role: ['$ui-01 hover', '$ui-02 hover', 'Transparent background hover'],
+    '$button-danger-hover': {
+      role: ['Danger hover', '$support-01 hover'],
       value: {
         white: {
-          name: 'Gray 10 hover',
-          hex: '#e5e5e5',
+          name: 'Red 60 hover',
+          hex: '#ba1b23',
         },
         g10: {
-          name: 'Gray 10 hover',
-          hex: '#e5e5e5',
+          name: 'Red 60 hover',
+          hex: '#ba1b23',
         },
         g90: {
-          name: 'Gray 80 hover',
-          hex: '#4c4c4c',
+          name: 'Red 60 hover',
+          hex: '#ba1b23',
         },
         g100: {
-          name: 'Gray 90 hover',
-          hex: '#353535',
+          name: 'Red 60 hover',
+          hex: '#ba1b23',
         },
       },
     },
-    '$hover-light-ui': {
-      role: ['“Light” variant hover'],
+    '$button-primary-active': {
+      role: ['$button-primary active'],
       value: {
         white: {
-          name: 'Gray 10 hover',
-          hex: '#e5e5e5',
+          name: 'Blue 80',
+          hex: '#002d9c',
         },
         g10: {
-          name: 'Gray 10 hover',
-          hex: '#e5e5e5',
+          name: 'Blue 80',
+          hex: '#002d9c',
         },
         g90: {
-          name: 'Gray 70 hover',
-          hex: '#656565',
+          name: 'Blue 80',
+          hex: '#002d9c',
         },
         g100: {
-          name: 'Gray 80 hover',
-          hex: '#4c4c4c',
+          name: 'Blue 80',
+          hex: '#002d9c',
+        },
+      },
+    },
+    '$button-secondary-active': {
+      role: ['$button-secondary active'],
+      value: {
+        white: {
+          name: 'Gray 60',
+          hex: '#6f6f6f',
+        },
+        g10: {
+          name: 'Gray 60',
+          hex: '#6f6f6f',
+        },
+        g90: {
+          name: 'Gray 80',
+          hex: '#393939',
+        },
+        g100: {
+          name: 'Gray 80',
+          hex: '#393939',
+        },
+      },
+    },
+    '$button-tertiary-active': {
+      role: ['$button-tertiary active'],
+      value: {
+        white: {
+          name: 'Blue 80',
+          hex: '#002d9c',
+        },
+        g10: {
+          name: 'Blue 80',
+          hex: '#002d9c',
+        },
+        g90: {
+          name: 'Gray 30',
+          hex: '#c6c6c6',
+        },
+        g100: {
+          name: 'Gray 30',
+          hex: '#c6c6c6',
+        },
+      },
+    },
+    '$button-danger-active': {
+      role: ['Danger active', '$support-error active'],
+      value: {
+        white: {
+          name: 'Red 80',
+          hex: '#750e13',
+        },
+        g10: {
+          name: 'Red 80',
+          hex: '#750e13',
+        },
+        g90: {
+          name: 'Red 80',
+          hex: '#750e13',
+        },
+        g100: {
+          name: 'Red 80',
+          hex: '#750e13',
+        },
+      },
+    },
+    '$button-disabled': {
+      role: ['Disabled elements'],
+      value: {
+        white: {
+          name: 'Gray 30',
+          hex: '#c6c6c6',
+        },
+        g10: {
+          name: 'Gray 30',
+          hex: '#c6c6c6',
+        },
+        g90: {
+          name: 'Gray 60',
+          hex: '#6f6f6f',
+        },
+        g100: {
+          name: 'Gray 70',
+          hex: '#525252',
+        },
+      },
+    },
+    '$background-hover': {
+      role: ['$background hover', 'Transparent background hover'],
+      value: {
+        white: {
+          name: 'Gray 10 hover',
+          hex: '#e5e5e5',
+        },
+        g10: {
+          name: 'Gray 10 hover',
+          hex: '#e5e5e5',
+        },
+        g90: {
+          name: 'Gray 80 hover',
+          hex: '#4c4c4c',
+        },
+        g100: {
+          name: 'Gray 90 hover',
+          hex: '#353535',
+        },
+      },
+    },
+    '$background-selected-hover': {
+      role: ['Selected row hover'],
+      value: {
+        white: {
+          name: 'Gray 20 hover',
+          hex: '#cacaca',
+        },
+        g10: {
+          name: 'Gray 20 hover',
+          hex: '#cacaca',
+        },
+        g90: {
+          name: 'Gray 70 hover',
+          hex: '#656565',
+        },
+        g100: {
+          name: 'Gray 80 hover',
+          hex: '#4c4c4c',
+        },
+      },
+    },
+    '$background-inverse-hover': {
+      role: ['Hover for $background-inverse'],
+      value: {
+        white: {
+          name: 'Gray 80 hover',
+          hex: '#4c4c4c',
+        },
+        g10: {
+          name: 'Gray 80 hover',
+          hex: '#4c4c4c',
+        },
+        g90: {
+          name: 'Gray 10 hover',
+          hex: '#e5e5e5',
+        },
+        g100: {
+          name: 'Gray 10 hover',
+          hex: '#e5e5e5',
+        },
+      },
+    },
+    '$background-active': {
+      role: ['$background active'],
+      value: {
+        white: {
+          name: 'Gray 30',
+          hex: '#c6c6c6',
+        },
+        g10: {
+          name: 'Gray 30',
+          hex: '#c6c6c6',
+        },
+        g90: {
+          name: 'Gray 60',
+          hex: '#6f6f6f',
+        },
+        g100: {
+          name: 'Gray 70',
+          hex: '#525252',
+        },
+      },
+    },
+    '$background-selected': {
+      role: ['Selected UI elements'],
+      value: {
+        white: {
+          name: 'Gray 20',
+          hex: '#e0e0e0',
+        },
+        g10: {
+          name: 'Gray 20',
+          hex: '#e0e0e0',
+        },
+        g90: {
+          name: 'Gray 70',
+          hex: '#525252',
+        },
+        g100: {
+          name: 'Gray 80',
+          hex: '#393939',
+        },
+      },
+    },
+    '$layer-hover-01': {
+      role: ['$layer-01 hover', 'Transparent background hover'],
+      value: {
+        white: {
+          name: 'Gray 10 hover',
+          hex: '#e5e5e5',
+        },
+        g10: {
+          name: 'Gray 10 hover',
+          hex: '#e5e5e5',
+        },
+        g90: {
+          name: 'Gray 80 hover',
+          hex: '#4c4c4c',
+        },
+        g100: {
+          name: 'Gray 90 hover',
+          hex: '#353535',
+        },
+      },
+    },
+    '$layer-hover-02': {
+      role: ['$layer-02 hover'],
+      value: {
+        white: {
+          name: 'Gray 10 hover',
+          hex: '#e5e5e5',
+        },
+        g10: {
+          name: 'Gray 10 hover',
+          hex: '#e5e5e5',
+        },
+        g90: {
+          name: 'Gray 70 hover',
+          hex: '#656565',
+        },
+        g100: {
+          name: 'Gray 80 hover',
+          hex: '#4c4c4c',
+        },
+      },
+    },
+    '$layer-hover-03': {
+      role: ['$layer-03 hover'],
+      value: {
+        white: {
+          name: 'Gray 10 hover',
+          hex: '#e5e5e5',
+        },
+        g10: {
+          name: 'Gray 10 hover',
+          hex: '#e5e5e5',
+        },
+        g90: {
+          name: 'Gray 60 hover',
+          hex: '#5e5e5e',
+        },
+        g100: {
+          name: 'Gray 70 hover',
+          hex: '#656565',
+        },
+      },
+    },
+    '$layer-accent-hover-01': {
+      role: ['Selected row hover'],
+      value: {
+        white: {
+          name: 'Gray 20 hover',
+          hex: '#cacaca',
+        },
+        g10: {
+          name: 'Gray 20 hover',
+          hex: '#cacaca',
+        },
+        g90: {
+          name: 'Gray 70 hover',
+          hex: '#656565',
+        },
+        g100: {
+          name: 'Gray 80 hover',
+          hex: '#4c4c4c',
+        },
+      },
+    },
+    '$layer-accent-hover-02': {
+      role: ['Selected row hover'],
+      value: {
+        white: {
+          name: 'Gray 20 hover',
+          hex: '#cacaca',
+        },
+        g10: {
+          name: 'Gray 20 hover',
+          hex: '#cacaca',
+        },
+        g90: {
+          name: 'Gray 60 hover',
+          hex: '#5e5e5e',
+        },
+        g100: {
+          name: 'Gray 70 hover',
+          hex: '#656565',
+        },
+      },
+    },
+    '$layer-accent-hover-03': {
+      role: ['Selected row hover'],
+      value: {
+        white: {
+          name: 'Gray 20 hover',
+          hex: '#cacaca',
+        },
+        g10: {
+          name: 'Gray 20 hover',
+          hex: '#cacaca',
+        },
+        g90: {
+          name: 'Gray 50 hover',
+          hex: '#7a7a7a',
+        },
+        g100: {
+          name: 'Gray 60 hover',
+          hex: '#5e5e5e',
+        },
+      },
+    },
+    '$layer-selected-hover-01': {
+      role: ['Selected row hover'],
+      value: {
+        white: {
+          name: 'Gray 20 hover',
+          hex: '#cacaca',
+        },
+        g10: {
+          name: 'Gray 20 hover',
+          hex: '#cacaca',
+        },
+        g90: {
+          name: 'Gray 70 hover',
+          hex: '#656565',
+        },
+        g100: {
+          name: 'Gray 80 hover',
+          hex: '#4c4c4c',
+        },
+      },
+    },
+    '$layer-selected-hover-02': {
+      role: ['Selected row hover'],
+      value: {
+        white: {
+          name: 'Gray 20 hover',
+          hex: '#cacaca',
+        },
+        g10: {
+          name: 'Gray 20 hover',
+          hex: '#cacaca',
+        },
+        g90: {
+          name: 'Gray 60 hover',
+          hex: '#5e5e5e',
+        },
+        g100: {
+          name: 'Gray 70 hover',
+          hex: '#656565',
+        },
+      },
+    },
+    '$layer-selected-hover-03': {
+      role: ['Selected row hover'],
+      value: {
+        white: {
+          name: 'Gray 20 hover',
+          hex: '#cacaca',
+        },
+        g10: {
+          name: 'Gray 20 hover',
+          hex: '#cacaca',
+        },
+        g90: {
+          name: 'Gray 70 hover',
+          hex: '#656565',
+        },
+        g100: {
+          name: 'Gray 60 hover',
+          hex: '#5e5e5e',
+        },
+      },
+    },
+    '$layer-active-01': {
+      role: ['$layer-01 active'],
+      value: {
+        white: {
+          name: 'Gray 30',
+          hex: '#c6c6c6',
+        },
+        g10: {
+          name: 'Gray 30',
+          hex: '#c6c6c6',
+        },
+        g90: {
+          name: 'Gray 60',
+          hex: '#6f6f6f',
+        },
+        g100: {
+          name: 'Gray 70',
+          hex: '#525252',
+        },
+      },
+    },
+    '$layer-active-02': {
+      role: ['$layer-02 active'],
+      value: {
+        white: {
+          name: 'Gray 30',
+          hex: '#c6c6c6',
+        },
+        g10: {
+          name: 'Gray 30',
+          hex: '#c6c6c6',
+        },
+        g90: {
+          name: 'Gray 50',
+          hex: '#8d8d8d',
+        },
+        g100: {
+          name: 'Gray 60',
+          hex: '#6f6f6f',
+        },
+      },
+    },
+    '$layer-active-03': {
+      role: ['$layer-02 active'],
+      value: {
+        white: {
+          name: 'Gray 30',
+          hex: '#c6c6c6',
+        },
+        g10: {
+          name: 'Gray 30',
+          hex: '#c6c6c6',
+        },
+        g90: {
+          name: 'Gray 80',
+          hex: '#393939',
+        },
+        g100: {
+          name: 'Gray 50',
+          hex: '#8d8d8d',
+        },
+      },
+    },
+    '$layer-selected-01': {
+      role: ['Selected UI elements'],
+      value: {
+        white: {
+          name: 'Gray 20',
+          hex: '#e0e0e0',
+        },
+        g10: {
+          name: 'Gray 20',
+          hex: '#e0e0e0',
+        },
+        g90: {
+          name: 'Gray 70',
+          hex: '#525252',
+        },
+        g100: {
+          name: 'Gray 80',
+          hex: '#393939',
+        },
+      },
+    },
+    '$layer-selected-02': {
+      role: ['$layer-02 selected'],
+      value: {
+        white: {
+          name: 'Gray 20',
+          hex: '#e0e0e0',
+        },
+        g10: {
+          name: 'Gray 20',
+          hex: '#e0e0e0',
+        },
+        g90: {
+          name: 'Gray 60',
+          hex: '#6f6f6f',
+        },
+        g100: {
+          name: 'Gray 70',
+          hex: '#525252',
+        },
+      },
+    },
+    '$layer-selected-03': {
+      role: ['$layer-02 selected'],
+      value: {
+        white: {
+          name: 'Gray 20',
+          hex: '#e0e0e0',
+        },
+        g10: {
+          name: 'Gray 20',
+          hex: '#e0e0e0',
+        },
+        g90: {
+          name: 'Gray 70',
+          hex: '#525252',
+        },
+        g100: {
+          name: 'Gray 60',
+          hex: '#6f6f6f',
+        },
+      },
+    },
+    '$layer-accent-active-01': {
+      role: ['$layer-accent-01 active'],
+      value: {
+        white: {
+          name: 'Gray 30',
+          hex: '#c6c6c6',
+        },
+        g10: {
+          name: 'Gray 30',
+          hex: '#c6c6c6',
+        },
+        g90: {
+          name: 'Gray 60',
+          hex: '#6f6f6f',
+        },
+        g100: {
+          name: 'Gray 70',
+          hex: '#525252',
+        },
+      },
+    },
+    '$layer-accent-active-02': {
+      role: ['$layer-accent-02 active'],
+      value: {
+        white: {
+          name: 'Gray 40',
+          hex: '#a8a8a8',
+        },
+        g10: {
+          name: 'Gray 40',
+          hex: '#a8a8a8',
+        },
+        g90: {
+          name: 'Gray 80',
+          hex: '#393939',
+        },
+        g100: {
+          name: 'Gray 50',
+          hex: '#8d8d8d',
         },
       },
     },
-    '$hover-selected-ui': {
-      role: ['Selected row hover'],
+    '$layer-accent-active-03': {
+      role: ['$layer-accent-03 active'],
       value: {
         white: {
-          name: 'Gray 20 hover',
-          hex: '#cacaca',
+          name: 'Gray 40',
+          hex: '#a8a8a8',
         },
         g10: {
-          name: 'Gray 20 hover',
-          hex: '#cacaca',
+          name: 'Gray 40',
+          hex: '#a8a8a8',
         },
         g90: {
-          name: 'Gray 70 hover',
-          hex: '#656565',
+          name: 'Gray 70',
+          hex: '#525252',
         },
         g100: {
-          name: 'Gray 80 hover',
-          hex: '#4c4c4c',
+          name: 'Gray 80',
+          hex: '#393939',
         },
       },
     },
-    '$hover-danger': {
-      role: ['Danger hover', '$support-01 hover'],
+    '$layer-selected-disabled': {
+      role: ['Disabled selected layer'],
       value: {
         white: {
-          name: 'Red 60 hover',
-          hex: '#ba1b23',
+          name: 'Gray 50',
+          hex: '#8d8d8d',
         },
         g10: {
-          name: 'Red 60 hover',
-          hex: '#ba1b23',
+          name: 'Gray 50',
+          hex: '#8d8d8d',
         },
         g90: {
-          name: 'Red 60 hover',
-          hex: '#ba1b23',
+          name: 'Gray 50',
+          hex: '#8d8d8d',
         },
         g100: {
-          name: 'Red 60 hover',
-          hex: '#ba1b23',
+          name: 'Gray 60',
+          hex: '#6f6f6f',
         },
       },
     },
-    '$hover-row': {
-      role: ['Row hover'],
+    '$field-hover-01': {
+      role: ['$field-01 hover', 'Transparent background hover'],
       value: {
         white: {
           name: 'Gray 10 hover',
@@ -1070,113 +1911,92 @@ const colorTokens = {
         },
       },
     },
-    '$inverse-hover-ui': {
-      role: ['Hover for $inverse-02'],
+    '$field-hover-02': {
+      role: ['$field-02 hover', 'Transparent background hover'],
       value: {
         white: {
-          name: 'Gray 80 hover',
-          hex: '#4c4c4c',
-        },
-        g10: {
-          name: 'Gray 80 hover',
-          hex: '#4c4c4c',
-        },
-        g90: {
           name: 'Gray 10 hover',
           hex: '#e5e5e5',
         },
-        g100: {
+        g10: {
           name: 'Gray 10 hover',
           hex: '#e5e5e5',
         },
-      },
-    },
-    '$active-primary': {
-      role: ['$interactive-01 active'],
-      value: {
-        white: {
-          name: 'Blue 80',
-          hex: '#002d9c',
-        },
-        g10: {
-          name: 'Blue 80',
-          hex: '#002d9c',
-        },
         g90: {
-          name: 'Blue 80',
-          hex: '#002d9c',
+          name: 'Gray 80 hover',
+          hex: '#4c4c4c',
         },
         g100: {
-          name: 'Blue 80',
-          hex: '#002d9c',
+          name: 'Gray 90 hover',
+          hex: '#353535',
         },
       },
     },
-    '$active-secondary': {
-      role: ['$interactive-02 active', '$inverse-01 active'],
+    '$field-hover-03': {
+      role: ['$field-02 hover', 'Transparent background hover'],
       value: {
         white: {
-          name: 'Gray 60',
-          hex: '#6f6f6f',
+          name: 'Gray 10 hover',
+          hex: '#e5e5e5',
         },
         g10: {
-          name: 'Gray 60',
-          hex: '#6f6f6f',
+          name: 'Gray 10 hover',
+          hex: '#e5e5e5',
         },
         g90: {
-          name: 'Gray 80',
-          hex: '#393939',
+          name: 'Gray 60 hover',
+          hex: '#5e5e5e',
         },
         g100: {
-          name: 'Gray 80',
-          hex: '#393939',
+          name: 'Gray 70 hover',
+          hex: '#636363',
         },
       },
     },
-    '$active-tertiary': {
-      role: ['$interactive-03 active'],
+    $highlight: {
+      role: ['$interactive-01 highlight'],
       value: {
         white: {
-          name: 'Blue 80',
-          hex: '#002d9c',
+          name: 'Blue 20',
+          hex: '#d0e2ff',
         },
         g10: {
-          name: 'Blue 80',
-          hex: '#002d9c',
+          name: 'Blue 10',
+          hex: '#edf5ff',
         },
         g90: {
-          name: 'Gray 30',
-          hex: '#c6c6c6',
+          name: 'Blue 80',
+          hex: '#002d9c',
         },
         g100: {
-          name: 'Gray 30',
-          hex: '#c6c6c6',
+          name: 'Blue 90',
+          hex: '#001d6c',
         },
       },
     },
-    '$active-ui': {
-      role: ['$ui-01 active', '$ui-02 active'],
+    '$skeleton-background': {
+      role: ['Skeleton state of graphics'],
       value: {
         white: {
-          name: 'Gray 30',
-          hex: '#c6c6c6',
+          name: 'Gray 10 hover',
+          hex: '#e5e5e5',
         },
         g10: {
-          name: 'Gray 30',
-          hex: '#c6c6c6',
+          name: 'Gray 10 hover',
+          hex: '#e5e5e5',
         },
         g90: {
-          name: 'Gray 60',
-          hex: '#6f6f6f',
+          name: 'Gray 80 hover',
+          hex: '#353535',
         },
         g100: {
-          name: 'Gray 70',
-          hex: '#525252',
+          name: 'Gray 80 hover',
+          hex: '#353535',
         },
       },
     },
-    '$active-light-ui': {
-      role: ['“Light” variant active'],
+    '$skeleton-element': {
+      role: ['Skeleton state of texts'],
       value: {
         white: {
           name: 'Gray 30',
@@ -1187,67 +2007,67 @@ const colorTokens = {
           hex: '#c6c6c6',
         },
         g90: {
-          name: 'Gray 50',
-          hex: '#8d8d8d',
+          name: 'Gray 70',
+          hex: '#525252',
         },
         g100: {
-          name: 'Gray 60',
-          hex: '#6f6f6f',
+          name: 'Gray 70',
+          hex: '#525252',
         },
       },
     },
-    '$active-danger': {
-      role: ['Danger active', '$support-01 active'],
+    '$link-primary-hover': {
+      role: ['$button-primary text hover'],
       value: {
         white: {
-          name: 'Red 80',
-          hex: '#750e13',
+          name: 'Blue 70',
+          hex: '#0043ce',
         },
         g10: {
-          name: 'Red 80',
-          hex: '#750e13',
+          name: 'Blue 70',
+          hex: '#0043ce',
         },
         g90: {
-          name: 'Red 80',
-          hex: '#750e13',
+          name: 'Blue 30',
+          hex: '#a6c8ff',
         },
         g100: {
-          name: 'Red 80',
-          hex: '#750e13',
+          name: 'Blue 30',
+          hex: '#a6c8ff',
         },
       },
     },
-    '$selected-ui': {
-      role: ['Selected UI elements'],
+    '$link-visited': {
+      role: ['Visited links'],
       value: {
         white: {
-          name: 'Gray 20',
-          hex: '#e0e0e0',
+          name: 'Purple 60',
+          hex: '#8a3ffc',
         },
         g10: {
-          name: 'Gray 20',
-          hex: '#e0e0e0',
+          name: 'Purple 60',
+          hex: '#8a3ffc',
         },
         g90: {
-          name: 'Gray 70',
-          hex: '#525252',
+          name: 'Purple 40',
+          hex: '#be95ff',
         },
         g100: {
-          name: 'Gray 80',
-          hex: '#393939',
+          name: 'Purple 40',
+          hex: '#be95ff',
         },
       },
     },
-    '$selected-light-ui': {
-      role: ['“Light” variant selected'],
+    '$border-subtle-selected-01': {
+      role: ['$border-subtle-01 selected'],
       value: {
         white: {
-          name: 'Gray 20',
-          hex: '#e0e0e0',
+          name: 'Gray 30',
+          hex: '#c6c6c6',
         },
         g10: {
-          name: 'Gray 20',
-          hex: '#e0e0e0',
+          name: 'Gray 30',
+          hex: '#c6c6c6',
         },
         g90: {
           name: 'Gray 60',
@@ -1259,50 +2079,50 @@ const colorTokens = {
         },
       },
     },
-    $highlight: {
-      role: ['$interactive-01 highlight'],
+    '$border-subtle-selected-02': {
+      role: ['$border-subtle-02 selected'],
       value: {
         white: {
-          name: 'Blue 20',
-          hex: '#d0e2ff',
+          name: 'Gray 30',
+          hex: '#c6c6c6',
         },
         g10: {
-          name: 'Blue 10',
-          hex: '#edf5ff',
+          name: 'Gray 30',
+          hex: '#c6c6c6',
         },
         g90: {
-          name: 'Blue 80',
-          hex: '#002d9c',
+          name: 'Gray 50',
+          hex: '#8d8d8d',
         },
         g100: {
-          name: 'Blue 90',
-          hex: '#001d6c',
+          name: 'Gray 60',
+          hex: '#6f6f6f',
         },
       },
     },
-    '$skeleton-01': {
-      role: ['Skeleton state of graphics'],
+    '$border-subtle-selected-03': {
+      role: ['$border-subtle-03 selected'],
       value: {
         white: {
-          name: 'Gray 10 hover',
-          hex: '#e5e5e5',
+          name: 'Gray 30',
+          hex: '#c6c6c6',
         },
         g10: {
-          name: 'Gray 10 hover',
-          hex: '#e5e5e5',
+          name: 'Gray 30',
+          hex: '#c6c6c6',
         },
         g90: {
-          name: 'Gray 80 hover',
-          hex: '#353535',
+          name: 'Gray 40',
+          hex: '#a8a8a8',
         },
         g100: {
-          name: 'Gray 80 hover',
-          hex: '#353535',
+          name: 'Gray 50',
+          hex: '#8d8d8d',
         },
       },
     },
-    '$skeleton-02': {
-      role: ['Skeleton state of texts'],
+    '$border-disabled': {
+      role: ['Disabled border'],
       value: {
         white: {
           name: 'Gray 30',
@@ -1313,8 +2133,8 @@ const colorTokens = {
           hex: '#c6c6c6',
         },
         g90: {
-          name: 'Gray 70',
-          hex: '#525252',
+          name: 'Gray 60',
+          hex: '#6f6f6f',
         },
         g100: {
           name: 'Gray 70',
@@ -1322,77 +2142,71 @@ const colorTokens = {
         },
       },
     },
-    '$visited-link': {
-      role: ['Visited links'],
+    '$text-disabled': {
+      role: ['Disabled text'],
       value: {
         white: {
-          name: 'Purple 60',
-          hex: '#8a3ffc',
+          name: 'Gray 30',
+          hex: '#c6c6c6',
         },
         g10: {
-          name: 'Purple 60',
-          hex: '#8a3ffc',
+          name: 'Gray 30',
+          hex: '#c6c6c6',
         },
         g90: {
-          name: 'Purple 40',
-          hex: '#be95ff',
+          name: 'Gray 60',
+          hex: '#6f6f6f',
         },
         g100: {
-          name: 'Purple 40',
-          hex: '#be95ff',
+          name: 'Gray 70',
+          hex: '#525252',
         },
       },
     },
-    '$disabled-01': {
-      role: ['Disabled fields', 'Disabled backgrounds', 'Disabled border'],
+    '$icon-disabled': {
+      role: ['Disabled icons'],
       value: {
         white: {
-          name: 'Gray 10',
-          hex: '#f4f4f4',
+          name: 'Gray 30',
+          hex: '#c6c6c6',
         },
         g10: {
-          name: 'White',
-          hex: '#ffffff',
+          name: 'Gray 30',
+          hex: '#c6c6c6',
         },
         g90: {
-          name: 'Gray 80',
-          hex: '#393939',
+          name: 'Gray 60',
+          hex: '#6f6f6f',
         },
         g100: {
-          name: 'Gray 90',
-          hex: '#262626',
+          name: 'Gray 70',
+          hex: '#525252',
         },
       },
     },
-    '$disabled-02': {
-      role: [
-        'Disabled elements on $disabled-01',
-        'Disabled label',
-        'Disabled text on $disabled-01',
-        'Disabled icons',
-        'Disabled border',
-      ],
+    '$icon-on-color-disabled': {
+      role: ['Disabled icon'],
       value: {
         white: {
-          name: 'Gray 30',
-          hex: '#c6c6c6',
+          name: 'Gray 50',
+          hex: '#8d8d8d',
         },
         g10: {
-          name: 'Gray 30',
-          hex: '#c6c6c6',
+          name: 'Gray 50',
+          hex: '#8d8d8d',
         },
         g90: {
-          name: 'Gray 60',
-          hex: '#6f6f6f',
+          name: 'Gray 50',
+          hex: '#8d8d8d',
         },
         g100: {
-          name: 'Gray 70',
-          hex: '#525252',
+          name: 'Gray 60',
+          hex: '#6f6f6f',
         },
       },
     },
-    '$disabled-03': {
-      role: ['Disabled text on $disabled-02', 'Disabled icons on $disabled-02'],
+    '$text-on-color-disabled': {
+      role: ['Disabled text'],
       value: {
         white: {
           name: 'Gray 50',
diff --git a/src/pages/guidelines/color/usage.mdx b/src/pages/guidelines/color/usage.mdx
index 582ab02491e..3487efb07f9 100755
--- a/src/pages/guidelines/color/usage.mdx
+++ b/src/pages/guidelines/color/usage.mdx
@@ -8,15 +8,6 @@ tabs: ['Overview', 'Usage', 'Code', 'Implementation']
 
 import ColorTokenTable from 'components/ColorTokenTable';
 
-<InlineNotification>
-
-**Outdated content:** The tokens listed in the table are from v10 but will be
-updated soon. For now, check out
-[v11 elements](https://carbon-elements.netlify.app/themes/examples/preview-v11/)
-preview to see the v11 tokens and values.
-
-</InlineNotification>
-
 ## Tokens by theme
 
 <ColorTokenTable />