[DevToolsGM3Colors] Introduce Chrome Material color tokens to DevTools

Bug: 1456677
Change-Id: I5ff5c4074eb7ae0819b7593f0be332fec8f1132d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4650361
Auto-Submit: Kateryna Prokopenko <kprokopenko@chromium.org>
Commit-Queue: Kateryna Prokopenko <kprokopenko@chromium.org>
Reviewed-by: Danil Somsikov <dsv@chromium.org>

diff --git a/config/gni/devtools_grd_files.gni b/config/gni/devtools_grd_files.gni
index eecc288..e482236 100644
--- a/config/gni/devtools_grd_files.gni
+++ b/config/gni/devtools_grd_files.gni

@@ -2060,6 +2060,7 @@
   "front_end/ui/legacy/textPrompt.css.legacy.js",
   "front_end/ui/legacy/themeColors.css.legacy.js",
   "front_end/ui/legacy/theme_support/theme_support_impl.js",
+  "front_end/ui/legacy/tokens.css.legacy.js",
   "front_end/ui/legacy/toolbar.css.legacy.js",
   "front_end/ui/legacy/treeoutline.css.legacy.js",
   "front_end/ui/legacy/utils/create-shadow-root-with-core-styles.js",

diff --git a/front_end/ui/legacy/BUILD.gn b/front_end/ui/legacy/BUILD.gn
index c0ff2a3..38efc67 100644
--- a/front_end/ui/legacy/BUILD.gn
+++ b/front_end/ui/legacy/BUILD.gn

@@ -50,6 +50,7 @@
     "textButton.css",
     "textPrompt.css",
     "themeColors.css",
+    "tokens.css",
     "toolbar.css",
     "treeoutline.css",
     "viewContainers.css",
@@ -63,6 +64,7 @@
     "applicationColorTokens.css",
     "inspectorCommon.css",
     "themeColors.css",
+    "tokens.css",
   ]
 }
 

diff --git a/front_end/ui/legacy/themeColors.css b/front_end/ui/legacy/themeColors.css
index f66e1a5..67d2e09 100644
--- a/front_end/ui/legacy/themeColors.css
+++ b/front_end/ui/legacy/themeColors.css

@@ -213,6 +213,143 @@
   --color-turqoise-bright: rgb(0 152 196);
   --color-yellow: rgb(121 89 0);
   --color-yellow-bright: rgb(186 130 14);
+
+  /* Chrome Desktop Design System */
+
+  /* Use on all surfaces */
+
+  --sys-color-on-surface: var(--ref-palette-neutral10);
+  --sys-color-on-surface-subtle: var(--ref-palette-neutral30);
+  --sys-color-on-surface-secondary: var(--ref-palette-neutral30);
+  --sys-color-on-surface-primary: var(--ref-palette-primary10);
+
+  /* Universal surfaces */
+
+  --sys-color-surface: var(--ref-palette-neutral100);
+  --sys-color-surface-variant: var(--ref-palette-neutral-variant90);
+
+  /* Containers */
+
+  --sys-color-tonal-container: var(--ref-palette-primary90);
+  --sys-color-on-tonal-container: var(--ref-palette-primary10);
+  --sys-color-tertiary-container: var(--ref-palette-tertiary90);
+  --sys-color-on-tertiary-container: var(--ref-palette-tertiary10);
+  --sys-color-error-container: var(--ref-palette-error90);
+  --sys-color-on-error-container: var(--ref-palette-error10);
+  --sys-color-neutral-container: var(--ref-palette-neutral95);
+  --sys-color-omnibox-container: var(--sys-color-surface4);
+
+  /* Prominent accent colors */
+
+  --sys-color-primary: var(--ref-palette-primary40);
+  --sys-color-on-primary: var(--ref-palette-primary100);
+  --sys-color-secondary: var(--ref-palette-secondary40);
+  --sys-color-on-secondary: var(--ref-palette-secondary100);
+  --sys-color-tertiary: var(--ref-palette-tertiary40);
+  --sys-color-on-tertiary: var(--ref-palette-tertiary100);
+  --sys-color-error: var(--ref-palette-error40);
+  --sys-color-on-error: var(--ref-palette-error100);
+
+  /* Chrome base surface */
+
+  --sys-color-base: var(--ref-palette-neutral100);
+  --sys-color-base-container: rgb(237 242 250 / 100%);
+  --sys-color-base-container-elevated: var(--ref-palette-neutral100);
+
+  /* Corresponding base on colors */
+
+  --sys-color-on-base: var(--ref-palette-neutral10);
+  --sys-color-on-base-divider: var(--ref-palette-primary90);
+
+  /* Inverse */
+
+  --sys-color-inverse-surface: var(--ref-palette-neutral20);
+  --sys-color-inverse-primary: var(--ref-palette-primary80);
+  --sys-color-inverse-on-surface: var(--ref-palette-neutral95);
+
+  /* Outlines */
+
+  --sys-color-color-outline: var(--ref-palette-neutral-variant50);
+  --sys-color-tonal-outline: var(--ref-palette-primary80);
+  --sys-color-neutral-outline: var(--ref-palette-neutral80);
+  --sys-color-divider: var(--ref-palette-primary90);
+
+  /* States */
+
+  --sys-color-state-hover-on-prominent: color-mix(in sRGB, var(--ref-palette-neutral99) 10%, transparent);
+  --sys-color-state-hover-on-subtle: color-mix(in sRGB, var(--ref-palette-neutral10) 6%, transparent);
+  --sys-color-state-hover-dim-blend-protection: color-mix(in sRGB, var(--ref-palette-neutral10) 6%, transparent);
+  --sys-color-state-hover-bright-blend-protection: color-mix(in sRGB, var(--ref-palette-neutral10) 6%, transparent);
+  --sys-color-state-ripple-neutral-on-prominent: color-mix(in sRGB, var(--ref-palette-neutral99) 16%, transparent);
+  --sys-color-state-ripple-neutral-on-subtle: color-mix(in sRGB, var(--ref-palette-neutral10) 8%, transparent);
+  --sys-color-state-ripple-primary: color-mix(in sRGB, var(--ref-palette-primary70) 32%, transparent);
+  --sys-color-state-focus-ring: var(--ref-palette-primary40);
+  --sys-color-state-focus-highlight: color-mix(in sRGB, var(--ref-palette-neutral10) 6%, transparent);
+  --sys-color-state-disabled: color-mix(in sRGB, var(--ref-palette-neutral10) 38%, transparent);
+  --sys-color-state-disabled-container: color-mix(in sRGB, var(--ref-palette-neutral10) 12%, transparent);
+  --sys-color-state-header-hover: var(--ref-palette-primary80);
+  --sys-color-state-on-header-hover: var(--ref-palette-primary20);
+
+  /* Surfaces */
+
+  --sys-color-surface5: color-mix(in sRGB, rgb(105 145 214) 14%, rgb(255 255 255));
+  --sys-color-surface4: color-mix(in sRGB, rgb(105 145 214) 12%, rgb(255 255 255));
+  --sys-color-surface3: color-mix(in sRGB, rgb(105 145 214) 11%, rgb(255 255 255));
+  --sys-color-surface2: color-mix(in sRGB, rgb(105 145 214) 8%, rgb(255 255 255));
+  --sys-color-surface1: color-mix(in sRGB, rgb(105 145 214) 5%, rgb(255 255 255));
+
+  /* Chrome DevTools Design System */
+
+  /* Prominent accent colors */
+
+  --sys-color-primary-bright: var(--ref-palette-primary50);
+  --sys-color-blue-bright: var(--ref-palette-blue50);
+  --sys-color-green-bright: var(--ref-palette-green50);
+  --sys-color-error-bright: var(--ref-palette-error50);
+  --sys-color-orange-bright: var(--ref-palette-orange65);
+  --sys-color-yellow-bright: var(--ref-palette-yellow55);
+  --sys-color-cyan-bright: var(--ref-palette-cyan50);
+  --sys-color-purple-bright: var(--ref-palette-purple50);
+  --sys-color-neutral-bright: var(--ref-palette-neutral70);
+
+  /* Universal surfaces */
+
+  --sys-color-cdt-base: var(--sys-color-base-container);
+  --sys-color-cdt-base-container: var(--sys-color-base);
+
+  /* Tinted surfaces */
+
+  --sys-color-surface-yellow: color-mix(in sRGB, var(--ref-palette-yellow70) 10%, var(var(--sys-color-base-container)));
+  --sys-color-surface-error: color-mix(in sRGB, var(--ref-palette-error70) 15%, var(var(--sys-color-base-container)));
+
+  /* Corresponding on colors */
+
+  --sys-color-on-surface-yellow: var(--ref-palette-yellow20);
+  --sys-color-on-surface-error: var(--ref-palette-error30);
+
+  /* Syntax highlighting */
+
+  --sys-color-token-variable: var(--sys-color-on-surface);
+  --sys-color-token-property: var(--sys-color-on-surface);
+  --sys-color-token-property-special: var(--ref-palette-error50);
+  --sys-color-token-type: var(--ref-palette-tertiary50);
+  --sys-color-token-definition: var(--ref-palette-primary30);
+  --sys-color-token-variable-special: var(--ref-palette-primary30);
+  --sys-color-token-builtin: var(--ref-palette-primary20);
+  --sys-color-token-keyword: var(--ref-palette-pink40);
+  --sys-color-token-number: var(--ref-palette-primary40);
+  --sys-color-token-string: var(--ref-palette-error40);
+  --sys-color-token-string-special: var(--ref-palette-error50);
+  --sys-color-token-atom: var(--ref-palette-primary20);
+  --sys-color-token-tag: var(--ref-palette-pink30);
+  --sys-color-token-attribute: var(--ref-palette-orange40);
+  --sys-color-token-attribute-value: var(--ref-palette-primary30);
+  --sys-color-token-comment: var(--ref-palette-tertiary40);
+  --sys-color-token-meta: var(--ref-palette-neutral60);
+  --sys-color-token-deleted: var(--ref-palette-error50);
+  --sys-color-token-inserted: var(--ref-palette-tertiary60);
+  --sys-color-token-pseudo-element: var(--ref-palette-primary40);
+  --sys-color-token-subtle: var(--ref-palette-neutral60);
 }
 
 .-theme-with-dark-background {
@@ -380,4 +517,141 @@
   --color-turqoise-bright: rgb(56 185 222);
   --color-yellow: rgb(251 188 5);
   --color-yellow-bright: rgb(217 162 0);
+
+  /* Chrome Desktop Design System */
+
+  /* Use on all surfaces */
+
+  --sys-color-on-surface: var(--ref-palette-neutral90);
+  --sys-color-on-surface-subtle: var(--ref-palette-neutral80);
+  --sys-color-on-surface-secondary: var(--ref-palette-neutral80);
+  --sys-color-on-surface-primary: var(--ref-palette-primary90);
+
+  /* Universal surfaces */
+
+  --sys-color-surface: var(--ref-palette-neutral10);
+  --sys-color-surface-variant: var(--ref-palette-neutral-variant30);
+
+  /* Containers */
+
+  --sys-color-tonal-container: var(--ref-palette-secondary30);
+  --sys-color-on-tonal-container: var(--ref-palette-secondary90);
+  --sys-color-tertiary-container: var(--ref-palette-tertiary30);
+  --sys-color-on-tertiary-container: var(--ref-palette-tertiary90);
+  --sys-color-error-container: var(--ref-palette-error30);
+  --sys-color-on-error-container: var(--ref-palette-error90);
+  --sys-color-neutral-container: var(--ref-palette-neutral15);
+  --sys-color-omnibox-container: var(--ref-palette-neutral15);
+
+  /* Prominent accent colors */
+
+  --sys-color-primary: var(--ref-palette-primary80);
+  --sys-color-on-primary: var(--ref-palette-primary20);
+  --sys-color-secondary: var(--ref-palette-secondary80);
+  --sys-color-on-secondary: var(--ref-palette-secondary20);
+  --sys-color-tertiary: var(--ref-palette-tertiary80);
+  --sys-color-on-tertiary: var(--ref-palette-tertiary20);
+  --sys-color-error: var(--ref-palette-error80);
+  --sys-color-on-error: var(--ref-palette-error20);
+
+  /* Chrome base surface */
+
+  --sys-color-base: var(--ref-palette-neutral25);
+  --sys-color-base-container: var(--ref-palette-neutral15);
+  --sys-color-base-container-elevated: var(--ref-palette-neutral25);
+
+  /* Corresponding base on colors */
+
+  --sys-color-on-base: var(--ref-palette-neutral90);
+  --sys-color-on-base-divider: var(--ref-palette-neutral40);
+
+  /* Inverse */
+
+  --sys-color-inverse-surface: var(--ref-palette-neutral90);
+  --sys-color-inverse-primary: var(--ref-palette-primary40);
+  --sys-color-inverse-on-surface: var(--ref-palette-neutral10);
+
+  /* Outlines */
+
+  --sys-color-outline: var(--ref-palette-neutral-variant60);
+  --sys-color-tonal-outline: var(--ref-palette-secondary40);
+  --sys-color-neutral-outline: var(--ref-palette-neutral40);
+  --sys-color-divider: var(--ref-palette-neutral30);
+
+  /* States */
+
+  --sys-color-state-hover-on-prominent: color-mix(in sRGB, var(--ref-palette-neutral10) 6%, transparent);
+  --sys-color-state-hover-on-subtle: color-mix(in sRGB, var(--ref-palette-neutral99) 10%, transparent);
+  --sys-color-state-hover-dim-blend-protection: color-mix(in sRGB, var(--ref-palette-neutral10) 10%, transparent);
+  --sys-color-state-hover-bright-blend-protection: color-mix(in sRGB, var(--ref-palette-neutral10) 16%, transparent);
+  --sys-color-state-ripple-neutral-on-prominent: color-mix(in sRGB, var(--ref-palette-neutral10) 12%, transparent);
+  --sys-color-state-ripple-neutral-on-subtle: color-mix(in sRGB, var(--ref-palette-neutral99) 16%, transparent);
+  --sys-color-state-ripple-primary: color-mix(in sRGB, var(--ref-palette-primary60) 32%, transparent);
+  --sys-color-state-focus-ring: var(--ref-palette-primary80);
+  --sys-color-state-focus-highlight: color-mix(in sRGB, var(--ref-palette-neutral99) 10%, transparent);
+  --sys-color-state-disabled: color-mix(in sRGB, var(--ref-palette-neutral90) 30%, transparent);
+  --sys-color-state-disabled-container: color-mix(in sRGB, var(--ref-neutral90) 12%, transparent);
+  --sys-color-state-header-hover: var(--ref-palette-secondary30);
+  --sys-color-state-on-header-hover: var(--ref-palette-secondary90);
+
+  /* Surfaces */
+
+  --sys-color-surface5: color-mix(in sRGB, rgb(209 225 255) 14%, rgb(31 31 31));
+  --sys-color-surface4: color-mix(in sRGB, rgb(209 225 255) 12%, rgb(31 31 31));
+  --sys-color-surface3: color-mix(in sRGB, rgb(209 225 255) 11%, rgb(31 31 31));
+  --sys-color-surface2: color-mix(in sRGB, rgb(209 225 255) 8%, rgb(31 31 31));
+  --sys-color-surface1: color-mix(in sRGB, rgb(209 225 255) 5%, rgb(31 31 31));
+
+  /* Chrome DevTools Design System */
+
+  /* Prominent accent colors */
+
+  --sys-color-primary-bright: var(--ref-palette-primary70);
+  --sys-color-blue-bright: var(--ref-palette-blue70);
+  --sys-color-green-bright: var(--ref-palette-tertiary70);
+  --sys-color-error-bright: var(--ref-palette-error60);
+  --sys-color-orange-bright: var(--ref-palette-orange70);
+  --sys-color-yellow-bright: var(--ref-palette-yellow70);
+  --sys-color-cyan-bright: var(--ref-palette-cyan70);
+  --sys-color-purple-bright: var(--ref-palette-purple70);
+  --sys-color-neutral-bright: var(--ref-palette-neutral50);
+
+  /* Universal surfaces */
+
+  --sys-color-cdt-base: var(--sys-color-color-base);
+  --sys-color-cdt-base-container: var(--sys-color-base-container);
+
+  /* Tinted surfaces */
+
+  --sys-color-surface-yellow: color-mix(in sRGB, var(--ref-palette-yellow70) 12%, var(var(--sys-color-base-container)));
+  --sys-color-surface-error: color-mix(in sRGB, var(--ref-palette-error60) 20%, var(var(--sys-color-base-container)));
+
+  /* Corresponding on colors */
+
+  --sys-color-on-surface-yellow: var(--ref-palette-yellow90);
+  --sys-color-on-surface-error: var(--ref-palette-error90);
+
+  /* Syntax highlighting */
+
+  --sys-color-token-variable: var(--ref-palette-neutral80);
+  --sys-color-token-property: var(--ref-palette-yellow70);
+  --sys-color-token-property-special: var(--ref-palette-cyan80);
+  --sys-color-token-type: var(--ref-palette-primary70);
+  --sys-color-token-definition: var(--ref-palette-primary70);
+  --sys-color-token-variable-special: var(--ref-palette-primary40);
+  --sys-color-token-builtin: var(--ref-palette-primary80);
+  --sys-color-token-keyword: var(--ref-palette-primary40);
+  --sys-color-token-number: var(--ref-palette-tertiary90);
+  --sys-color-token-string: var(--ref-palette-orange70);
+  --sys-color-token-string-special: var(--ref-palette-orange70);
+  --sys-color-token-atom: var(--ref-palette-tertiary90);
+  --sys-color-token-tag: var(--ref-palette-primary70);
+  --sys-color-token-attribute: var(--ref-palette-primary80);
+  --sys-color-token-attribute-value: var(--ref-palette-orange70);
+  --sys-color-token-comment: var(--ref-palette-neutral70);
+  --sys-color-token-meta: var(--ref-palette-neutral60);
+  --sys-color-token-deleted: var(--ref-palette-error50);
+  --sys-color-token-inserted: var(--ref-palette-tertiary60);
+  --sys-color-token-pseudo-element: var(--ref-palette-pink70);
+  --sys-color-token-subtle: var(--ref-palette-neutral60);
 }

diff --git a/front_end/ui/legacy/tokens.css b/front_end/ui/legacy/tokens.css
new file mode 100644
index 0000000..ef63fdd
--- /dev/null
+++ b/front_end/ui/legacy/tokens.css

@@ -0,0 +1,180 @@
+/*
+ * Copyright 2023 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+/* Ref tokens */
+
+:root {
+  --ref-palette-primary0: rgb(0 0 0 / 100%);
+  --ref-palette-primary10: rgb(4 30 73 / 100%);
+  --ref-palette-primary20: rgb(6 46 111 / 100%);
+  --ref-palette-primary30: rgb(8 66 160 / 100%);
+  --ref-palette-primary40: rgb(11 87 208 / 100%);
+  --ref-palette-primary50: rgb(27 110 243 / 100%);
+  --ref-palette-primary60: rgb(76 141 246 / 100%);
+  --ref-palette-primary70: rgb(124 172 248 / 100%);
+  --ref-palette-primary80: rgb(168 199 250 / 100%);
+  --ref-palette-primary90: rgb(211 227 253 / 100%);
+  --ref-palette-primary95: rgb(236 243 254 / 100%);
+  --ref-palette-primary99: rgb(250 251 255 / 100%);
+  --ref-palette-primary100: rgb(255 255 255 / 100%);
+  --ref-palette-secondary0: rgb(0 0 0 / 100%);
+  --ref-palette-secondary10: rgb(0 29 53 / 100%);
+  --ref-palette-secondary20: rgb(0 51 85 / 100%);
+  --ref-palette-secondary30: rgb(0 74 119 / 100%);
+  --ref-palette-secondary40: rgb(0 99 155 / 100%);
+  --ref-palette-secondary50: rgb(4 125 183 / 100%);
+  --ref-palette-secondary60: rgb(57 152 211 / 100%);
+  --ref-palette-secondary70: rgb(90 179 240 / 100%);
+  --ref-palette-secondary80: rgb(127 207 255 / 100%);
+  --ref-palette-secondary90: rgb(223 243 255 / 100%);
+  --ref-palette-secondary95: rgb(223 243 255 / 100%);
+  --ref-palette-secondary99: rgb(247 252 255 / 100%);
+  --ref-palette-secondary100: rgb(255 255 255 / 100%);
+  --ref-palette-tertiary0: rgb(0 0 0 / 100%);
+  --ref-palette-tertiary10: rgb(7 39 17 / 100%);
+  --ref-palette-tertiary20: rgb(10 56 24 / 100%);
+  --ref-palette-tertiary30: rgb(15 82 35 / 100%);
+  --ref-palette-tertiary40: rgb(20 108 46 / 100%);
+  --ref-palette-tertiary50: rgb(25 134 57 / 100%);
+  --ref-palette-tertiary60: rgb(30 164 70 / 100%);
+  --ref-palette-tertiary70: rgb(55 190 95 / 100%);
+  --ref-palette-tertiary80: rgb(109 213 140 / 100%);
+  --ref-palette-tertiary90: rgb(196 238 208 / 100%);
+  --ref-palette-tertiary95: rgb(231 248 237 / 100%);
+  --ref-palette-tertiary99: rgb(242 255 238 / 100%);
+  --ref-palette-tertiary100: rgb(255 255 255 / 100%);
+  --ref-palette-error0: rgb(0 0 0 / 100%);
+  --ref-palette-error10: rgb(65 14 11 / 100%);
+  --ref-palette-error20: rgb(96 20 16 / 100%);
+  --ref-palette-error30: rgb(140 29 24 / 100%);
+  --ref-palette-error40: rgb(179 38 30 / 100%);
+  --ref-palette-error50: rgb(220 54 46 / 100%);
+  --ref-palette-error60: rgb(228 105 98 / 100%);
+  --ref-palette-error70: rgb(236 146 142 / 100%);
+  --ref-palette-error80: rgb(242 184 181 / 100%);
+  --ref-palette-error90: rgb(249 222 220 / 100%);
+  --ref-palette-error95: rgb(231 248 237 / 100%);
+  --ref-palette-error99: rgb(242 255 238 / 100%);
+  --ref-palette-error100: rgb(255 255 255 / 100%);
+  --ref-palette-neutral0: rgb(0 0 0 / 100%);
+  --ref-palette-neutral10: rgb(31 31 31 / 100%);
+  --ref-palette-neutral15: rgb(40 40 40 / 100%);
+  --ref-palette-neutral20: rgb(48 48 48 / 100%);
+  --ref-palette-neutral30: rgb(71 71 71 / 100%);
+  --ref-palette-neutral40: rgb(94 94 94 / 100%);
+  --ref-palette-neutral50: rgb(117 117 117 / 100%);
+  --ref-palette-neutral60: rgb(143 143 143 / 100%);
+  --ref-palette-neutral70: rgb(171 171 171 / 100%);
+  --ref-palette-neutral80: rgb(199 199 199 / 100%);
+  --ref-palette-neutral90: rgb(227 227 227 / 100%);
+  --ref-palette-neutral95: rgb(242 242 242 / 100%);
+  --ref-palette-neutral99: rgb(253 252 251 / 100%);
+  --ref-palette-neutral100: rgb(255 255 255 / 100%);
+  --ref-palette-neutral-variant0: rgb(0 0 0 / 100%);
+  --ref-palette-neutral-variant10: rgb(25 29 28 / 100%);
+  --ref-palette-neutral-variant20: rgb(45 49 47 / 100%);
+  --ref-palette-neutral-variant30: rgb(68 71 70 / 100%);
+  --ref-palette-neutral-variant40: rgb(92 95 94 / 100%);
+  --ref-palette-neutral-variant50: rgb(116 119 117 / 100%);
+  --ref-palette-neutral-variant60: rgb(142 145 143 / 100%);
+  --ref-palette-neutral-variant70: rgb(169 172 170 / 100%);
+  --ref-palette-neutral-variant80: rgb(196 199 197 / 100%);
+  --ref-palette-neutral-variant90: rgb(225 227 225 / 100%);
+  --ref-palette-neutral-variant95: rgb(239 242 239 / 100%);
+  --ref-palette-neutral-variant99: rgb(250 253 251 / 100%);
+  --ref-palette-neutral-variant100: rgb(255 255 255 / 100%);
+  --ref-palette-blue0: rgb(0 0 0 / 100%);
+  --ref-palette-blue10: rgb(4 30 73 / 100%);
+  --ref-palette-blue20: rgb(6 46 111 / 100%);
+  --ref-palette-blue30: rgb(8 66 160 / 100%);
+  --ref-palette-blue40: rgb(11 87 208 / 100%);
+  --ref-palette-blue50: rgb(27 110 243 / 100%);
+  --ref-palette-blue60: rgb(76 141 246 / 100%);
+  --ref-palette-blue70: rgb(124 172 248 / 100%);
+  --ref-palette-blue80: rgb(168 199 250 / 100%);
+  --ref-palette-blue90: rgb(211 227 253 / 100%);
+  --ref-palette-blue95: rgb(236 243 254 / 100%);
+  --ref-palette-blue99: rgb(250 251 255 / 100%);
+  --ref-palette-blue100: rgb(255 255 255 / 100%);
+  --ref-palette-green0: rgb(0 0 0 / 100%);
+  --ref-palette-green10: rgb(7 39 17 / 100%);
+  --ref-palette-green20: rgb(10 56 24 / 100%);
+  --ref-palette-green30: rgb(15 82 35 / 100%);
+  --ref-palette-green40: rgb(20 108 46 / 100%);
+  --ref-palette-green50: rgb(25 134 57 / 100%);
+  --ref-palette-green60: rgb(30 164 70 / 100%);
+  --ref-palette-green70: rgb(55 190 95 / 100%);
+  --ref-palette-green80: rgb(109 213 140 / 100%);
+  --ref-palette-green90: rgb(196 238 208 / 100%);
+  --ref-palette-green95: rgb(231 248 237 / 100%);
+  --ref-palette-green99: rgb(242 255 238 / 100%);
+  --ref-palette-green100: rgb(255 255 255 / 100%);
+  --ref-palette-orange0: rgb(0 0 0 / 100%);
+  --ref-palette-orange10: rgb(53 16 2 / 100%);
+  --ref-palette-orange20: rgb(85 32 5 / 100%);
+  --ref-palette-orange30: rgb(121 50 11 / 100%);
+  --ref-palette-orange40: rgb(159 67 18 / 100%);
+  --ref-palette-orange50: rgb(198 85 26 / 100%);
+  --ref-palette-orange60: rgb(232 110 48 / 100%);
+  --ref-palette-orange70: rgb(254 141 89 / 100%);
+  --ref-palette-orange80: rgb(254 183 150 / 100%);
+  --ref-palette-orange90: rgb(255 220 204 / 100%);
+  --ref-palette-orange95: rgb(255 236 230 / 100%);
+  --ref-palette-orange99: rgb(255 251 255 / 100%);
+  --ref-palette-orange100: rgb(255 255 255 / 100%);
+  --ref-palette-yellow0: rgb(0 0 0 / 100%);
+  --ref-palette-yellow10: rgb(69 27 6 / 100%);
+  --ref-palette-yellow20: rgb(120 54 22 / 100%);
+  --ref-palette-yellow30: rgb(145 66 24 / 100%);
+  --ref-palette-yellow40: rgb(179 84 27 / 100%);
+  --ref-palette-yellow50: rgb(216 121 33 / 100%);
+  --ref-palette-yellow60: rgb(244 159 42 / 100%);
+  --ref-palette-yellow70: rgb(250 191 58 / 100%);
+  --ref-palette-yellow80: rgb(252 212 89 / 100%);
+  --ref-palette-yellow90: rgb(253 233 160 / 100%);
+  --ref-palette-yellow95: rgb(254 243 200 / 100%);
+  --ref-palette-yellow99: rgb(255 251 235 / 100%);
+  --ref-palette-yellow100: rgb(255 255 255 / 100%);
+  --ref-palette-cyan0: rgb(0 0 0 / 100%);
+  --ref-palette-cyan10: rgb(0 31 40 / 100%);
+  --ref-palette-cyan20: rgb(0 53 67 / 100%);
+  --ref-palette-cyan30: rgb(0 78 96 / 100%);
+  --ref-palette-cyan40: rgb(0 103 127 / 100%);
+  --ref-palette-cyan50: rgb(0 130 159 / 100%);
+  --ref-palette-cyan60: rgb(0 157 193 / 100%);
+  --ref-palette-cyan70: rgb(56 185 222 / 100%);
+  --ref-palette-cyan80: rgb(92 213 251 / 100%);
+  --ref-palette-cyan90: rgb(183 234 255 / 100%);
+  --ref-palette-cyan95: rgb(221 245 255 / 100%);
+  --ref-palette-cyan99: rgb(249 253 255 / 100%);
+  --ref-palette-cyan100: rgb(255 255 255 / 100%);
+  --ref-palette-purple0: rgb(0 0 0 / 100%);
+  --ref-palette-purple10: rgb(47 0 77 / 100%);
+  --ref-palette-purple20: rgb(77 0 122 / 100%);
+  --ref-palette-purple30: rgb(110 0 171 / 100%);
+  --ref-palette-purple40: rgb(140 30 211 / 100%);
+  --ref-palette-purple50: rgb(167 67 238 / 100%);
+  --ref-palette-purple60: rgb(191 103 255 / 100%);
+  --ref-palette-purple70: rgb(209 144 255 / 100%);
+  --ref-palette-purple80: rgb(226 182 255 / 100%);
+  --ref-palette-purple90: rgb(243 218 255 / 100%);
+  --ref-palette-purple95: rgb(251 236 255 / 100%);
+  --ref-palette-purple99: rgb(249 253 255 / 100%);
+  --ref-palette-purple100: rgb(255 255 255 / 100%);
+  --ref-palette-pink0: rgb(0 0 0 / 100%);
+  --ref-palette-pink10: rgb(62 0 29 / 100%);
+  --ref-palette-pink20: rgb(101 0 51 / 100%);
+  --ref-palette-pink30: rgb(142 0 75 / 100%);
+  --ref-palette-pink40: rgb(185 0 99 / 100%);
+  --ref-palette-pink50: rgb(223 35 125 / 100%);
+  --ref-palette-pink60: rgb(255 72 150 / 100%);
+  --ref-palette-pink70: rgb(255 132 175 / 100%);
+  --ref-palette-pink80: rgb(255 177 200 / 100%);
+  --ref-palette-pink90: rgb(255 217 226 / 100%);
+  --ref-palette-pink95: rgb(255 236 240 / 100%);
+  --ref-palette-pink99: rgb(255 251 255 / 100%);
+  --ref-palette-pink100: rgb(255 255 255 / 100%);
+}

diff --git a/front_end/ui/legacy/utils/inject-core-styles.ts b/front_end/ui/legacy/utils/inject-core-styles.ts
index 9be2492..67e03c7 100644
--- a/front_end/ui/legacy/utils/inject-core-styles.ts
+++ b/front_end/ui/legacy/utils/inject-core-styles.ts

@@ -7,12 +7,14 @@
 import textButtonStyles from '../textButton.css.legacy.js';
 import * as ThemeSupport from '../theme_support/theme_support.js';
 import themeColorsStyles from '../themeColors.css.legacy.js';
+import tokens from '../tokens.css.legacy.js';
 
 export function injectCoreStyles(root: Element|ShadowRoot): void {
   ThemeSupport.ThemeSupport.instance().appendStyle(root, applicationColorTokensStyles);
   ThemeSupport.ThemeSupport.instance().appendStyle(root, inspectorCommonStyles);
   ThemeSupport.ThemeSupport.instance().appendStyle(root, textButtonStyles);
   ThemeSupport.ThemeSupport.instance().appendStyle(root, themeColorsStyles);
+  ThemeSupport.ThemeSupport.instance().appendStyle(root, tokens);
 
   ThemeSupport.ThemeSupport.instance().injectHighlightStyleSheets(root);
   ThemeSupport.ThemeSupport.instance().injectCustomStyleSheets(root);

diff --git a/scripts/stylelint_rules/lib/use_theme_colors.js b/scripts/stylelint_rules/lib/use_theme_colors.js
index bba86fc..9f56461 100644
--- a/scripts/stylelint_rules/lib/use_theme_colors.js
+++ b/scripts/stylelint_rules/lib/use_theme_colors.js

@@ -47,6 +47,7 @@
 const applicationColorsPath =
     path.join(__dirname, '..', '..', '..', 'front_end', 'ui', 'legacy', 'applicationColorTokens.css');
 const themeColorsPath = path.join(__dirname, '..', '..', '..', 'front_end', 'ui', 'legacy', 'themeColors.css');
+const tokensPath = path.join(__dirname, '..', '..', '..', 'front_end', 'ui', 'legacy', 'tokens.css');
 const inspectorCommonPath = path.join(__dirname, '..', '..', '..', 'front_end', 'ui', 'legacy', 'inspectorCommon.css');
 
 function getRootVariableDeclarationsFromCSSFile(filePath) {
@@ -66,9 +67,12 @@
 
 const DEFINED_APPLICATION_COLOR_VARIABLES = getRootVariableDeclarationsFromCSSFile(applicationColorsPath);
 const DEFINED_THEME_COLOR_VARIABLES = getRootVariableDeclarationsFromCSSFile(themeColorsPath);
+const DEFINED_COLOR_TOKEN_VARIABLES = getRootVariableDeclarationsFromCSSFile(tokensPath);
 const DEFINED_INSPECTOR_STYLE_VARIABLES = getRootVariableDeclarationsFromCSSFile(inspectorCommonPath);
-const ALL_DEFINED_VARIABLES = new Set(
-    [...DEFINED_APPLICATION_COLOR_VARIABLES, ...DEFINED_THEME_COLOR_VARIABLES, ...DEFINED_INSPECTOR_STYLE_VARIABLES]);
+const ALL_DEFINED_VARIABLES = new Set([
+  ...DEFINED_APPLICATION_COLOR_VARIABLES, ...DEFINED_THEME_COLOR_VARIABLES, ...DEFINED_COLOR_TOKEN_VARIABLES,
+  ...DEFINED_INSPECTOR_STYLE_VARIABLES
+]);
 
 module.exports = stylelint.createPlugin(RULE_NAME, function(primary, secondary, context) {
   return function(postcssRoot, postcssResult) {