diff --git a/.changeset/afraid-teachers-do.md b/.changeset/afraid-teachers-do.md
new file mode 100644
index 00000000000..5212dfc34f7
--- /dev/null
+++ b/.changeset/afraid-teachers-do.md
@@ -0,0 +1,6 @@
+---
+"@primer/react": minor
+---
+
+- Adds CSS variable color values to the legacy Primitive design tokens.
+- Three values include: the new v8 color CSS variable, a fallback of the old color CSS variable, and the raw value.
diff --git a/src/BranchName/__tests__/__snapshots__/BranchName.test.tsx.snap b/src/BranchName/__tests__/__snapshots__/BranchName.test.tsx.snap
index ca0731c2120..7d9fced9902 100644
--- a/src/BranchName/__tests__/__snapshots__/BranchName.test.tsx.snap
+++ b/src/BranchName/__tests__/__snapshots__/BranchName.test.tsx.snap
@@ -6,8 +6,8 @@ exports[`BranchName renders consistently 1`] = `
   padding: 2px 6px;
   font-size: 12px;
   font-family: var(--fontStack-monospace),SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
-  color: #0969da;
-  background-color: #ddf4ff;
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  background-color: var(--bgColor-accent-muted,var(--color-accent-subtle,#ddf4ff));
   border-radius: 6px;
   -webkit-text-decoration: none;
   text-decoration: none;
diff --git a/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap b/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap
index 4a5dfe6b84f..ab1c66c11a2 100644
--- a/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap
+++ b/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Breadcrumbs.Item renders consistently 1`] = `
 .c0 {
-  color: #0969da;
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   display: inline-block;
   font-size: 14px;
   -webkit-text-decoration: none;
@@ -15,7 +15,7 @@ exports[`Breadcrumbs.Item renders consistently 1`] = `
 }
 
 .c0.selected {
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   pointer-events: none;
 }
 
@@ -27,7 +27,7 @@ exports[`Breadcrumbs.Item renders consistently 1`] = `
 
 exports[`Breadcrumbs.Item respects the "selected" prop 1`] = `
 .c0 {
-  color: #0969da;
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   display: inline-block;
   font-size: 14px;
   -webkit-text-decoration: none;
@@ -40,7 +40,7 @@ exports[`Breadcrumbs.Item respects the "selected" prop 1`] = `
 }
 
 .c0.selected {
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   pointer-events: none;
 }
 
diff --git a/src/Button/__tests__/__snapshots__/Button.test.tsx.snap b/src/Button/__tests__/__snapshots__/Button.test.tsx.snap
index 67da6d5e057..35e9430dedb 100644
--- a/src/Button/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/Button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`Button renders consistently 1`] = `
 .c0 {
   border-radius: 6px;
   border: 1px solid;
-  border-color: var(--button-default-borderColor-rest,rgba(31,35,40,0.15));
+  border-color: var(--button-default-borderColor-rest,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));
   font-family: inherit;
   font-weight: 500;
   font-size: 14px;
@@ -48,14 +48,14 @@ exports[`Button renders consistently 1`] = `
   transition: 80ms cubic-bezier(0.65,0,0.35,1);
   -webkit-transition-property: color,fill,background-color,border-color;
   transition-property: color,fill,background-color,border-color;
-  color: #24292f;
-  background-color: #f6f8fa;
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  color: var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));
+  background-color: var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));
+  box-shadow: var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04))),var(--button-default-shadow-inset,var(--color-btn-inset-shadow,inset 0 1px 0 rgba(255,255,255,0.25)));
 }
 
 .c0:focus:not(:disabled) {
   box-shadow: none;
-  outline: 2px solid #0969da;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -2px;
 }
 
@@ -65,7 +65,7 @@ exports[`Button renders consistently 1`] = `
 
 .c0:focus-visible:not(:disabled) {
   box-shadow: none;
-  outline: 2px solid #0969da;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -2px;
 }
 
@@ -98,7 +98,7 @@ exports[`Button renders consistently 1`] = `
 .c0:disabled {
   cursor: not-allowed;
   box-shadow: none;
-  color: #8c959f;
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
 .c0:disabled [data-component=ButtonCounter] {
@@ -161,9 +161,9 @@ exports[`Button renders consistently 1`] = `
 }
 
 .c0[data-inactive]:not([disabled]) {
-  background-color: var(--button-inactive-bgColor,#eaeef2);
-  border-color: var(--button-inactive-bgColor,#eaeef2);
-  color: var(--button-inactive-fgColor,#57606a);
+  background-color: var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));
+  border-color: var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));
+  color: var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));
 }
 
 .c0[data-inactive]:not([disabled]):focus-visible {
@@ -209,24 +209,24 @@ exports[`Button renders consistently 1`] = `
 }
 
 .c0:hover:not([disabled]):not([data-inactive]) {
-  background-color: #f3f4f6;
-  border-color: var(--button-default-borderColor-hover,rgba(31,35,40,0.15));
+  background-color: var(--button-default-bgColor-hover,var(--color-btn-hover-bg,#f3f4f6));
+  border-color: var(--button-default-borderColor-hover,var(--button-default-borderColor-hover,var(--color-btn-hover-border,rgba(31,35,40,0.15))));
 }
 
 .c0:active:not([disabled]):not([data-inactive]) {
-  background-color: hsla(220,14%,93%,1);
-  border-color: var(--button-default-borderColor-active,rgba(31,35,40,0.15));
+  background-color: var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));
+  border-color: var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));
 }
 
 .c0[aria-expanded=true] {
-  background-color: hsla(220,14%,93%,1);
-  border-color: var(--button-default-borderColor-active,rgba(31,35,40,0.15));
+  background-color: var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));
+  border-color: var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));
 }
 
 .c0 [data-component="leadingVisual"],
 .c0 [data-component="trailingVisual"],
 .c0 [data-component="trailingAction"] {
-  color: var(--button-color,#656d76);
+  color: var(--button-color,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 @media (forced-colors:active) {
diff --git a/src/ConfirmationDialog/__snapshots__/ConfirmationDialog.test.tsx.snap b/src/ConfirmationDialog/__snapshots__/ConfirmationDialog.test.tsx.snap
index d79269a8efe..6ca0086ec8e 100644
--- a/src/ConfirmationDialog/__snapshots__/ConfirmationDialog.test.tsx.snap
+++ b/src/ConfirmationDialog/__snapshots__/ConfirmationDialog.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`ConfirmationDialog renders consistently 1`] = `
 .c0 {
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   line-height: 1.5;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c1 {
@@ -49,29 +49,29 @@ exports[`ConfirmationDialog renders consistently 1`] = `
 }
 
 .c2 {
-  color: #24292f;
-  background-color: #f6f8fa;
-  border: 1px solid rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  color: var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));
+  background-color: var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));
+  border: 1px solid var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15)));
+  box-shadow: var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04))),var(--button-default-shadow-inset,var(--color-btn-inset-shadow,inset 0 1px 0 rgba(255,255,255,0.25)));
 }
 
 .c2:hover {
-  background-color: #f3f4f6;
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--button-default-bgColor-hover,var(--color-btn-hover-bg,#f3f4f6));
+  border-color: var(--button-default-borderColor-hover,var(--color-btn-hover-border,rgba(31,35,40,0.15)));
 }
 
 .c2:focus {
-  outline: solid 2px #0969da;
+  outline: solid 2px var(--fgColor-accent,var(--color-accent-fg,#0969da));
 }
 
 .c2:active {
-  background-color: hsla(220,14%,94%,1);
+  background-color: var(--button-default-bgColor-selected,var(--color-btn-selected-bg,hsla(220,14%,94%,1)));
 }
 
 .c2:disabled {
-  color: #8c959f;
-  background-color: #f6f8fa;
-  border-color: rgba(31,35,40,0.15);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));
+  border-color: var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15)));
 }
 
 <div
diff --git a/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap b/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap
index e58baa1e1cc..113cc869450 100644
--- a/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap
+++ b/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap
@@ -9,8 +9,8 @@ exports[`CounterLabel renders consistently 1`] = `
   font-weight: 600;
   line-height: 1;
   border-radius: 20px;
-  background-color: rgba(175,184,193,0.2);
-  color: #1F2328;
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c0:empty {
diff --git a/src/Flash/__tests__/Flash.test.tsx b/src/Flash/__tests__/Flash.test.tsx
index a9314b7e78f..dbfb01bc77b 100644
--- a/src/Flash/__tests__/Flash.test.tsx
+++ b/src/Flash/__tests__/Flash.test.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import Flash from '..'
-import theme from '../../theme'
 import {render, behavesAsComponent, checkExports} from '../../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import {axe} from 'jest-axe'
@@ -27,16 +26,19 @@ describe('Flash', () => {
   it('respects the "variant" prop', () => {
     expect(render(<Flash variant="warning" />)).toHaveStyleRule(
       'background-color',
-      theme.colorSchemes.light.colors.attention?.subtle,
+      'var(--bgColor-attention-muted,var(--color-attention-subtle,#fff8c5))',
     )
     expect(render(<Flash variant="danger" />)).toHaveStyleRule(
       'background-color',
-      theme.colorSchemes.light.colors.danger?.subtle,
+      'var(--bgColor-danger-muted,var(--color-danger-subtle,#ffebe9))',
     )
     expect(render(<Flash variant="success" />)).toHaveStyleRule(
       'background-color',
-      theme.colorSchemes.light.colors.success?.subtle,
+      'var(--bgColor-success-muted,var(--color-success-subtle,#dafbe1))',
+    )
+    expect(render(<Flash />)).toHaveStyleRule(
+      'background-color',
+      'var(--bgColor-accent-muted,var(--color-accent-subtle,#ddf4ff))',
     )
-    expect(render(<Flash />)).toHaveStyleRule('background-color', theme.colorSchemes.light.colors.accent?.subtle)
   })
 })
diff --git a/src/Flash/__tests__/__snapshots__/Flash.test.tsx.snap b/src/Flash/__tests__/__snapshots__/Flash.test.tsx.snap
index e9d29a2ea00..db54fd249f3 100644
--- a/src/Flash/__tests__/__snapshots__/Flash.test.tsx.snap
+++ b/src/Flash/__tests__/__snapshots__/Flash.test.tsx.snap
@@ -3,15 +3,15 @@
 exports[`Flash renders consistently 1`] = `
 .c0 {
   position: relative;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   padding: 16px;
   border-style: solid;
   border-width: 1px;
   border-radius: 6px;
   margin-top: 0;
-  color: #1F2328;
-  background-color: #ddf4ff;
-  border-color: rgba(84,174,255,0.4);
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  background-color: var(--bgColor-accent-muted,var(--color-accent-subtle,#ddf4ff));
+  border-color: var(--borderColor-accent-muted,var(--color-accent-muted,rgba(84,174,255,0.4)));
 }
 
 .c0 p:last-child {
@@ -23,7 +23,7 @@ exports[`Flash renders consistently 1`] = `
 }
 
 .c0 svg {
-  color: #0969da;
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
 }
 
 <div
diff --git a/src/Link/__tests__/__snapshots__/Link.test.tsx.snap b/src/Link/__tests__/__snapshots__/Link.test.tsx.snap
index 658a558b9fe..54c389bde72 100644
--- a/src/Link/__tests__/__snapshots__/Link.test.tsx.snap
+++ b/src/Link/__tests__/__snapshots__/Link.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Link applies button styles when rendering a button element 1`] = `
 .c1 {
-  color: #0969da;
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -41,7 +41,7 @@ exports[`Link applies button styles when rendering a button element 1`] = `
 
 exports[`Link passes href down to link element 1`] = `
 .c1 {
-  color: #0969da;
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -81,7 +81,7 @@ exports[`Link passes href down to link element 1`] = `
 
 exports[`Link renders consistently 1`] = `
 .c1 {
-  color: #0969da;
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -120,7 +120,7 @@ exports[`Link renders consistently 1`] = `
 
 exports[`Link respects hoverColor prop 1`] = `
 .c1 {
-  color: #0969da;
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -133,7 +133,7 @@ exports[`Link respects hoverColor prop 1`] = `
 .c1:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
-  color: #0969da;
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
 }
 
 .c1:is(button) {
@@ -160,10 +160,10 @@ exports[`Link respects hoverColor prop 1`] = `
 
 exports[`Link respects the  "sx" prop when "muted" prop is also passed 1`] = `
 .c1 {
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-text-decoration: none;
   text-decoration: none;
-  color: #ffffff;
+  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
 }
 
 [data-a11y-link-underlines='true'] .c0[data-inline='true'] {
@@ -174,7 +174,7 @@ exports[`Link respects the  "sx" prop when "muted" prop is also passed 1`] = `
 .c1:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
-  color: #0969da;
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
 }
 
 .c1:is(button) {
@@ -202,7 +202,7 @@ exports[`Link respects the  "sx" prop when "muted" prop is also passed 1`] = `
 
 exports[`Link respects the "muted" prop 1`] = `
 .c1 {
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -215,7 +215,7 @@ exports[`Link respects the "muted" prop 1`] = `
 .c1:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
-  color: #0969da;
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
 }
 
 .c1:is(button) {
diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap
index c6a9f6aafbc..e672d3964c0 100644
--- a/src/NavList/__snapshots__/NavList.test.tsx.snap
+++ b/src/NavList/__snapshots__/NavList.test.tsx.snap
@@ -49,7 +49,7 @@ exports[`NavList renders a simple list 1`] = `
   border-radius: 6px;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -62,7 +62,7 @@ exports[`NavList renders a simple list 1`] = `
   margin-top: unset;
   margin-bottom: unset;
   font-weight: 600;
-  background-color: rgba(208,215,222,0.24);
+  background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
 .c2[aria-disabled],
@@ -93,7 +93,7 @@ exports[`NavList renders a simple list 1`] = `
 }
 
 .c2:not(:first-of-type) {
-  --divider-color: rgba(208,215,222,0.48);
+  --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
 [data-component="ActionList.Divider"] + .c1 {
@@ -118,7 +118,7 @@ exports[`NavList renders a simple list 1`] = `
   width: 4px;
   height: 24px;
   content: "";
-  background-color: #0969da;
+  background-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   border-radius: 6px;
 }
 
@@ -140,7 +140,7 @@ exports[`NavList renders a simple list 1`] = `
   border-radius: 6px;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -182,7 +182,7 @@ exports[`NavList renders a simple list 1`] = `
 }
 
 .c7:not(:first-of-type) {
-  --divider-color: rgba(208,215,222,0.48);
+  --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
 [data-component="ActionList.Divider"] + .c1 {
@@ -201,7 +201,7 @@ exports[`NavList renders a simple list 1`] = `
 }
 
 .c4 {
-  color: #0969da;
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   -webkit-text-decoration: none;
   text-decoration: none;
   padding-left: 8px;
@@ -255,21 +255,21 @@ exports[`NavList renders a simple list 1`] = `
 
 @media (hover:hover) and (pointer:fine) {
   .c2:hover:not([aria-disabled]):not([data-inactive]) {
-    background-color: rgba(208,215,222,0.32);
-    color: #1F2328;
-    box-shadow: inset 0 0 0 max(1px,0.0625rem) rgba(0,0,0,0);
+    background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
+    color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+    box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
   .c2:focus-visible,
   .c2 > a:focus-visible {
     outline: none;
     border: 2 solid;
-    box-shadow: 0 0 0 2px #0969da;
+    box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
   }
 
   .c2:active:not([aria-disabled]):not([data-inactive]) {
-    background-color: rgba(208,215,222,0.48);
-    color: #1F2328;
+    background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
+    color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
 }
 
@@ -281,21 +281,21 @@ exports[`NavList renders a simple list 1`] = `
 
 @media (hover:hover) and (pointer:fine) {
   .c7:hover:not([aria-disabled]):not([data-inactive]) {
-    background-color: rgba(208,215,222,0.32);
-    color: #1F2328;
-    box-shadow: inset 0 0 0 max(1px,0.0625rem) rgba(0,0,0,0);
+    background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
+    color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+    box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
   .c7:focus-visible,
   .c7 > a:focus-visible {
     outline: none;
     border: 2 solid;
-    box-shadow: 0 0 0 2px #0969da;
+    box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
   }
 
   .c7:active:not([aria-disabled]):not([data-inactive]) {
-    background-color: rgba(208,215,222,0.48);
-    color: #1F2328;
+    background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
+    color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
 }
 
@@ -390,7 +390,7 @@ exports[`NavList renders a simple list 1`] = `
 exports[`NavList renders with groups 1`] = `
 .c1 {
   height: 1px;
-  background-color: rgba(208,215,222,0.48);
+  background-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
   margin-top: calc(8px - 1px);
   margin-bottom: 8px;
   list-style: none;
@@ -445,7 +445,7 @@ exports[`NavList renders with groups 1`] = `
   padding-right: 16px;
   font-size: 12px;
   font-weight: 600;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
 .c0 {
@@ -473,7 +473,7 @@ exports[`NavList renders with groups 1`] = `
   border-radius: 6px;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -486,7 +486,7 @@ exports[`NavList renders with groups 1`] = `
   margin-top: unset;
   margin-bottom: unset;
   font-weight: 600;
-  background-color: rgba(208,215,222,0.24);
+  background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
 .c6[aria-disabled],
@@ -517,7 +517,7 @@ exports[`NavList renders with groups 1`] = `
 }
 
 .c6:not(:first-of-type) {
-  --divider-color: rgba(208,215,222,0.48);
+  --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
 [data-component="ActionList.Divider"] + .c5 {
@@ -542,7 +542,7 @@ exports[`NavList renders with groups 1`] = `
   width: 4px;
   height: 24px;
   content: "";
-  background-color: #0969da;
+  background-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   border-radius: 6px;
 }
 
@@ -564,7 +564,7 @@ exports[`NavList renders with groups 1`] = `
   border-radius: 6px;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -606,7 +606,7 @@ exports[`NavList renders with groups 1`] = `
 }
 
 .c11:not(:first-of-type) {
-  --divider-color: rgba(208,215,222,0.48);
+  --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
 [data-component="ActionList.Divider"] + .c5 {
@@ -625,7 +625,7 @@ exports[`NavList renders with groups 1`] = `
 }
 
 .c8 {
-  color: #0969da;
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   -webkit-text-decoration: none;
   text-decoration: none;
   padding-left: 8px;
@@ -679,21 +679,21 @@ exports[`NavList renders with groups 1`] = `
 
 @media (hover:hover) and (pointer:fine) {
   .c6:hover:not([aria-disabled]):not([data-inactive]) {
-    background-color: rgba(208,215,222,0.32);
-    color: #1F2328;
-    box-shadow: inset 0 0 0 max(1px,0.0625rem) rgba(0,0,0,0);
+    background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
+    color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+    box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
   .c6:focus-visible,
   .c6 > a:focus-visible {
     outline: none;
     border: 2 solid;
-    box-shadow: 0 0 0 2px #0969da;
+    box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
   }
 
   .c6:active:not([aria-disabled]):not([data-inactive]) {
-    background-color: rgba(208,215,222,0.48);
-    color: #1F2328;
+    background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
+    color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
 }
 
@@ -705,21 +705,21 @@ exports[`NavList renders with groups 1`] = `
 
 @media (hover:hover) and (pointer:fine) {
   .c11:hover:not([aria-disabled]):not([data-inactive]) {
-    background-color: rgba(208,215,222,0.32);
-    color: #1F2328;
-    box-shadow: inset 0 0 0 max(1px,0.0625rem) rgba(0,0,0,0);
+    background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
+    color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+    box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
   .c11:focus-visible,
   .c11 > a:focus-visible {
     outline: none;
     border: 2 solid;
-    box-shadow: 0 0 0 2px #0969da;
+    box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
   }
 
   .c11:active:not([aria-disabled]):not([data-inactive]) {
-    background-color: rgba(208,215,222,0.48);
-    color: #1F2328;
+    background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
+    color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
 }
 
@@ -872,14 +872,14 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   margin-left: 8px;
   font-weight: initial;
 }
 
 [data-variant="danger"]:hover .c1,
 [data-variant="danger"]:active .c8 {
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c10 {
@@ -928,7 +928,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   border-radius: 6px;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -941,7 +941,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   margin-top: unset;
   margin-bottom: unset;
   font-weight: 600;
-  background-color: rgba(208,215,222,0.24);
+  background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
 .c11[aria-disabled],
@@ -972,7 +972,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
 }
 
 .c11:not(:first-of-type) {
-  --divider-color: rgba(208,215,222,0.48);
+  --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
 [data-component="ActionList.Divider"] + .c3 {
@@ -997,7 +997,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   width: 4px;
   height: 24px;
   content: "";
-  background-color: #0969da;
+  background-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   border-radius: 6px;
 }
 
@@ -1018,7 +1018,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   border-radius: 6px;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -1061,7 +1061,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
 }
 
 .c4:not(:first-of-type) {
-  --divider-color: rgba(208,215,222,0.48);
+  --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
 [data-component="ActionList.Divider"] + .c3 {
@@ -1080,7 +1080,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
 }
 
 .c13 {
-  color: #0969da;
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   -webkit-text-decoration: none;
   text-decoration: none;
   padding-left: 16px;
@@ -1144,21 +1144,21 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
 
 @media (hover:hover) and (pointer:fine) {
   .c11:hover:not([aria-disabled]):not([data-inactive]) {
-    background-color: rgba(208,215,222,0.32);
-    color: #1F2328;
-    box-shadow: inset 0 0 0 max(1px,0.0625rem) rgba(0,0,0,0);
+    background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
+    color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+    box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
   .c11:focus-visible,
   .c11 > a:focus-visible {
     outline: none;
     border: 2 solid;
-    box-shadow: 0 0 0 2px #0969da;
+    box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
   }
 
   .c11:active:not([aria-disabled]):not([data-inactive]) {
-    background-color: rgba(208,215,222,0.48);
-    color: #1F2328;
+    background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
+    color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
 }
 
@@ -1170,21 +1170,21 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
 
 @media (hover:hover) and (pointer:fine) {
   .c4:hover:not([aria-disabled]):not([data-inactive]) {
-    background-color: rgba(208,215,222,0.32);
-    color: #1F2328;
-    box-shadow: inset 0 0 0 max(1px,0.0625rem) rgba(0,0,0,0);
+    background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
+    color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+    box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
   .c4:focus-visible,
   .c4 > a:focus-visible {
     outline: none;
     border: 2 solid;
-    box-shadow: 0 0 0 2px #0969da;
+    box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
   }
 
   .c4:active:not([aria-disabled]):not([data-inactive]) {
-    background-color: rgba(208,215,222,0.48);
-    color: #1F2328;
+    background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
+    color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
 }
 
@@ -1330,14 +1330,14 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   margin-left: 8px;
   font-weight: initial;
 }
 
 [data-variant="danger"]:hover .c1,
 [data-variant="danger"]:active .c8 {
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c10 {
@@ -1386,7 +1386,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   border-radius: 6px;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -1399,7 +1399,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   margin-top: unset;
   margin-bottom: unset;
   font-weight: 600;
-  background-color: rgba(208,215,222,0.24);
+  background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
 .c11[aria-disabled],
@@ -1430,7 +1430,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
 }
 
 .c11:not(:first-of-type) {
-  --divider-color: rgba(208,215,222,0.48);
+  --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
 [data-component="ActionList.Divider"] + .c3 {
@@ -1455,7 +1455,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   width: 4px;
   height: 24px;
   content: "";
-  background-color: #0969da;
+  background-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   border-radius: 6px;
 }
 
@@ -1485,7 +1485,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   border-radius: 6px;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -1498,7 +1498,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   margin-top: unset;
   margin-bottom: unset;
   font-weight: 600;
-  background-color: rgba(208,215,222,0.24);
+  background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
 .c4[aria-disabled],
@@ -1529,7 +1529,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
 }
 
 .c4:not(:first-of-type) {
-  --divider-color: rgba(208,215,222,0.48);
+  --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
 [data-component="ActionList.Divider"] + .c3 {
@@ -1554,12 +1554,12 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   width: 4px;
   height: 24px;
   content: "";
-  background-color: #0969da;
+  background-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   border-radius: 6px;
 }
 
 .c13 {
-  color: #0969da;
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   -webkit-text-decoration: none;
   text-decoration: none;
   padding-left: 16px;
@@ -1623,21 +1623,21 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
 
 @media (hover:hover) and (pointer:fine) {
   .c11:hover:not([aria-disabled]):not([data-inactive]) {
-    background-color: rgba(208,215,222,0.32);
-    color: #1F2328;
-    box-shadow: inset 0 0 0 max(1px,0.0625rem) rgba(0,0,0,0);
+    background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
+    color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+    box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
   .c11:focus-visible,
   .c11 > a:focus-visible {
     outline: none;
     border: 2 solid;
-    box-shadow: 0 0 0 2px #0969da;
+    box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
   }
 
   .c11:active:not([aria-disabled]):not([data-inactive]) {
-    background-color: rgba(208,215,222,0.48);
-    color: #1F2328;
+    background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
+    color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
 }
 
@@ -1657,21 +1657,21 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
 
 @media (hover:hover) and (pointer:fine) {
   .c4:hover:not([aria-disabled]):not([data-inactive]) {
-    background-color: rgba(208,215,222,0.32);
-    color: #1F2328;
-    box-shadow: inset 0 0 0 max(1px,0.0625rem) rgba(0,0,0,0);
+    background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
+    color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+    box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
   .c4:focus-visible,
   .c4 > a:focus-visible {
     outline: none;
     border: 2 solid;
-    box-shadow: 0 0 0 2px #0969da;
+    box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
   }
 
   .c4:active:not([aria-disabled]):not([data-inactive]) {
-    background-color: rgba(208,215,222,0.48);
-    color: #1F2328;
+    background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
+    color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
 }
 
diff --git a/src/SegmentedControl/__snapshots__/SegmentedControl.test.tsx.snap b/src/SegmentedControl/__snapshots__/SegmentedControl.test.tsx.snap
index 459dc27156d..7e9705e3612 100644
--- a/src/SegmentedControl/__snapshots__/SegmentedControl.test.tsx.snap
+++ b/src/SegmentedControl/__snapshots__/SegmentedControl.test.tsx.snap
@@ -48,7 +48,7 @@ exports[`SegmentedControl renders consistently 1`] = `
   flex-grow: 1;
   margin-top: -1px;
   margin-bottom: -1px;
-  --separator-color: #d0d7de;
+  --separator-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c3:not(:last-child) {
@@ -100,8 +100,8 @@ exports[`SegmentedControl renders consistently 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: #ffffff;
-  border-color: #8c959f;
+  background-color: var(--controlKnob-bgColor-rest,var(--color-segmented-control-button-bg,#ffffff));
+  border-color: var(--controlKnob-borderColor-rest,var(--color-segmented-control-button-hover-active-selected-border,#8c959f));
   border-style: solid;
   border-width: 1px;
   border-radius: var(--segmented-control-outer-radius);
@@ -119,7 +119,7 @@ exports[`SegmentedControl renders consistently 1`] = `
 }
 
 .c2 svg {
-  fill: #656d76;
+  fill: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
 .c2:focus:focus-visible:not(:last-child):after {
@@ -182,15 +182,15 @@ exports[`SegmentedControl renders consistently 1`] = `
 }
 
 .c4 svg {
-  fill: #656d76;
+  fill: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
 .c4:hover .segmentedControl-content {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--controlTrack-bgColor-hover,var(--color-segmented-control-button-hover-bg,rgba(175,184,193,0.2)));
 }
 
 .c4:active .segmentedControl-content {
-  background-color: rgba(175,184,193,0.4);
+  background-color: var(--controlTrack-bgColor-active,var(--color-segmented-control-button-hover-active-bg,rgba(175,184,193,0.4)));
 }
 
 .c4:focus:focus-visible:not(:last-child):after {
@@ -253,15 +253,15 @@ exports[`SegmentedControl renders consistently 1`] = `
 }
 
 .c5 svg {
-  fill: #656d76;
+  fill: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
 .c5:hover .segmentedControl-content {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--controlTrack-bgColor-hover,var(--color-segmented-control-button-hover-bg,rgba(175,184,193,0.2)));
 }
 
 .c5:active .segmentedControl-content {
-  background-color: rgba(175,184,193,0.4);
+  background-color: var(--controlTrack-bgColor-active,var(--color-segmented-control-button-hover-active-bg,rgba(175,184,193,0.4)));
 }
 
 .c5:focus:focus-visible:not(:last-child):after {
@@ -283,7 +283,7 @@ exports[`SegmentedControl renders consistently 1`] = `
 }
 
 .c0 {
-  background-color: #eaeef2;
+  background-color: var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg,#eaeef2));
   border-radius: 6px;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
diff --git a/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap b/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap
index 0b105cd6a03..d86bf5f17f1 100644
--- a/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap
+++ b/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`SelectPanel renders consistently 1`] = `
 .c0 {
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   line-height: 1.5;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c2 {
@@ -25,7 +25,7 @@ exports[`SelectPanel renders consistently 1`] = `
 .c1 {
   border-radius: 6px;
   border: 1px solid;
-  border-color: var(--button-default-borderColor-rest,rgba(31,35,40,0.15));
+  border-color: var(--button-default-borderColor-rest,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));
   font-family: inherit;
   font-weight: 500;
   font-size: 14px;
@@ -62,14 +62,14 @@ exports[`SelectPanel renders consistently 1`] = `
   transition: 80ms cubic-bezier(0.65,0,0.35,1);
   -webkit-transition-property: color,fill,background-color,border-color;
   transition-property: color,fill,background-color,border-color;
-  color: #24292f;
-  background-color: #f6f8fa;
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  color: var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));
+  background-color: var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));
+  box-shadow: var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04))),var(--button-default-shadow-inset,var(--color-btn-inset-shadow,inset 0 1px 0 rgba(255,255,255,0.25)));
 }
 
 .c1:focus:not(:disabled) {
   box-shadow: none;
-  outline: 2px solid #0969da;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -2px;
 }
 
@@ -79,7 +79,7 @@ exports[`SelectPanel renders consistently 1`] = `
 
 .c1:focus-visible:not(:disabled) {
   box-shadow: none;
-  outline: 2px solid #0969da;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -2px;
 }
 
@@ -112,7 +112,7 @@ exports[`SelectPanel renders consistently 1`] = `
 .c1:disabled {
   cursor: not-allowed;
   box-shadow: none;
-  color: #8c959f;
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
 .c1:disabled [data-component=ButtonCounter] {
@@ -175,9 +175,9 @@ exports[`SelectPanel renders consistently 1`] = `
 }
 
 .c1[data-inactive]:not([disabled]) {
-  background-color: var(--button-inactive-bgColor,#eaeef2);
-  border-color: var(--button-inactive-bgColor,#eaeef2);
-  color: var(--button-inactive-fgColor,#57606a);
+  background-color: var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));
+  border-color: var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));
+  color: var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));
 }
 
 .c1[data-inactive]:not([disabled]):focus-visible {
@@ -223,24 +223,24 @@ exports[`SelectPanel renders consistently 1`] = `
 }
 
 .c1:hover:not([disabled]):not([data-inactive]) {
-  background-color: #f3f4f6;
-  border-color: var(--button-default-borderColor-hover,rgba(31,35,40,0.15));
+  background-color: var(--button-default-bgColor-hover,var(--color-btn-hover-bg,#f3f4f6));
+  border-color: var(--button-default-borderColor-hover,var(--button-default-borderColor-hover,var(--color-btn-hover-border,rgba(31,35,40,0.15))));
 }
 
 .c1:active:not([disabled]):not([data-inactive]) {
-  background-color: hsla(220,14%,93%,1);
-  border-color: var(--button-default-borderColor-active,rgba(31,35,40,0.15));
+  background-color: var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));
+  border-color: var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));
 }
 
 .c1[aria-expanded=true] {
-  background-color: hsla(220,14%,93%,1);
-  border-color: var(--button-default-borderColor-active,rgba(31,35,40,0.15));
+  background-color: var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));
+  border-color: var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));
 }
 
 .c1 [data-component="leadingVisual"],
 .c1 [data-component="trailingVisual"],
 .c1 [data-component="trailingAction"] {
-  color: var(--button-color,#656d76);
+  color: var(--button-color,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 @media (forced-colors:active) {
diff --git a/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap b/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap
index 2e8635f42ae..fa4e09ed69c 100644
--- a/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap
+++ b/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap
@@ -32,7 +32,7 @@ exports[`SplitPageLayout renders default layout 1`] = `
   margin-right: 0;
   display: block;
   height: 1px;
-  background-color: #d0d7de;
+  background-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
   margin-top: 0;
 }
 
@@ -138,7 +138,7 @@ exports[`SplitPageLayout renders default layout 1`] = `
   margin-right: 0;
   display: block;
   height: 1px;
-  background-color: #d0d7de;
+  background-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
   margin-bottom: 0;
 }
 
diff --git a/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap b/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap
index 3cfa27adfe5..0797594404a 100644
--- a/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap
+++ b/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap
@@ -16,11 +16,11 @@ exports[`StateLabel renders children 1`] = `
   align-items: center;
   font-weight: 600;
   line-height: 16px;
-  color: #ffffff;
+  color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
   text-align: center;
   border-radius: 100px;
-  background-color: #1f883d;
-  color: #ffffff;
+  background-color: var(--bgColor-open-emphasis,var(--color-open-emphasis,#1f883d));
+  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
   padding-left: 12px;
   padding-right: 12px;
   padding-top: 8px;
@@ -76,11 +76,11 @@ exports[`StateLabel renders consistently 1`] = `
   align-items: center;
   font-weight: 600;
   line-height: 16px;
-  color: #ffffff;
+  color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
   text-align: center;
   border-radius: 100px;
-  background-color: #1f883d;
-  color: #ffffff;
+  background-color: var(--bgColor-open-emphasis,var(--color-open-emphasis,#1f883d));
+  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
   padding-left: 12px;
   padding-right: 12px;
   padding-top: 8px;
@@ -136,11 +136,11 @@ exports[`StateLabel respects the status prop 1`] = `
   align-items: center;
   font-weight: 600;
   line-height: 16px;
-  color: #ffffff;
+  color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
   text-align: center;
   border-radius: 100px;
-  background-color: #1f883d;
-  color: #ffffff;
+  background-color: var(--bgColor-open-emphasis,var(--color-open-emphasis,#1f883d));
+  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
   padding-left: 12px;
   padding-right: 12px;
   padding-top: 8px;
@@ -195,11 +195,11 @@ exports[`StateLabel respects the status prop 2`] = `
   align-items: center;
   font-weight: 600;
   line-height: 16px;
-  color: #ffffff;
+  color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
   text-align: center;
   border-radius: 100px;
-  background-color: #8250df;
-  color: #ffffff;
+  background-color: var(--bgColor-done-emphasis,var(--color-done-emphasis,#8250df));
+  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
   padding-left: 12px;
   padding-right: 12px;
   padding-top: 8px;
@@ -254,11 +254,11 @@ exports[`StateLabel respects the status prop 3`] = `
   align-items: center;
   font-weight: 600;
   line-height: 16px;
-  color: #ffffff;
+  color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
   text-align: center;
   border-radius: 100px;
-  background-color: #6e7781;
-  color: #ffffff;
+  background-color: var(--bgColor-neutral-emphasis,var(--color-neutral-emphasis,#6e7781));
+  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
   padding-left: 12px;
   padding-right: 12px;
   padding-top: 8px;
@@ -310,11 +310,11 @@ exports[`StateLabel respects the status prop 4`] = `
   align-items: center;
   font-weight: 600;
   line-height: 16px;
-  color: #ffffff;
+  color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
   text-align: center;
   border-radius: 100px;
-  background-color: #8250df;
-  color: #ffffff;
+  background-color: var(--bgColor-done-emphasis,var(--color-done-emphasis,#8250df));
+  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
   padding-left: 12px;
   padding-right: 12px;
   padding-top: 8px;
@@ -366,11 +366,11 @@ exports[`StateLabel respects the status prop 5`] = `
   align-items: center;
   font-weight: 600;
   line-height: 16px;
-  color: #ffffff;
+  color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
   text-align: center;
   border-radius: 100px;
-  background-color: #9a6700;
-  color: #ffffff;
+  background-color: var(--bgColor-attention-emphasis,var(--color-attention-emphasis,#9a6700));
+  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
   padding-left: 12px;
   padding-right: 12px;
   padding-top: 8px;
@@ -422,11 +422,11 @@ exports[`StateLabel respects the variant prop 1`] = `
   align-items: center;
   font-weight: 600;
   line-height: 16px;
-  color: #ffffff;
+  color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
   text-align: center;
   border-radius: 100px;
-  background-color: #1f883d;
-  color: #ffffff;
+  background-color: var(--bgColor-open-emphasis,var(--color-open-emphasis,#1f883d));
+  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
   padding-left: 8px;
   padding-right: 8px;
   padding-top: 4px;
@@ -481,11 +481,11 @@ exports[`StateLabel respects the variant prop 2`] = `
   align-items: center;
   font-weight: 600;
   line-height: 16px;
-  color: #ffffff;
+  color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
   text-align: center;
   border-radius: 100px;
-  background-color: #1f883d;
-  color: #ffffff;
+  background-color: var(--bgColor-open-emphasis,var(--color-open-emphasis,#1f883d));
+  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
   padding-left: 12px;
   padding-right: 12px;
   padding-top: 8px;
diff --git a/src/TabNav/__tests__/__snapshots__/TabNav.test.tsx.snap b/src/TabNav/__tests__/__snapshots__/TabNav.test.tsx.snap
index fe365f58ce8..1b8381aaa9e 100644
--- a/src/TabNav/__tests__/__snapshots__/TabNav.test.tsx.snap
+++ b/src/TabNav/__tests__/__snapshots__/TabNav.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`TabNav TabNav.Link renders consistently 1`] = `
   padding: 8px 12px;
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   -webkit-text-decoration: none;
   text-decoration: none;
   background-color: transparent;
@@ -15,7 +15,7 @@ exports[`TabNav TabNav.Link renders consistently 1`] = `
 
 .c0:focus:not(:disabled) {
   box-shadow: none;
-  outline: 2px solid #0969da;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -6px;
 }
 
@@ -25,23 +25,23 @@ exports[`TabNav TabNav.Link renders consistently 1`] = `
 
 .c0:focus-visible:not(:disabled) {
   box-shadow: none;
-  outline: 2px solid #0969da;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -6px;
 }
 
 .c0:hover,
 .c0:focus {
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
 .c0.selected {
-  color: #1F2328;
-  border-color: #d0d7de;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  border-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
   border-top-right-radius: 6px;
   border-top-left-radius: 6px;
-  background-color: #ffffff;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
 }
 
 <a
@@ -64,7 +64,7 @@ exports[`TabNav renders consistently 1`] = `
 
 .c0 {
   margin-top: 0;
-  border-bottom: 1px solid #d0d7de;
+  border-bottom: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 <div
diff --git a/src/Timeline/__tests__/__snapshots__/Timeline.test.tsx.snap b/src/Timeline/__tests__/__snapshots__/Timeline.test.tsx.snap
index e7455fe8441..ba71d0615a7 100644
--- a/src/Timeline/__tests__/__snapshots__/Timeline.test.tsx.snap
+++ b/src/Timeline/__tests__/__snapshots__/Timeline.test.tsx.snap
@@ -49,8 +49,8 @@ exports[`Timeline.Badge renders consistently 1`] = `
 .c1 {
   margin-right: 8px;
   margin-left: -15px;
-  color: #656d76;
-  background-color: #eaeef2;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  background-color: var(--timelineBadge-bgColor,var(--color-timeline-badge-bg,#eaeef2));
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -72,7 +72,7 @@ exports[`Timeline.Badge renders consistently 1`] = `
   border-radius: 50%;
   border-width: 2px;
   border-style: solid;
-  border-color: #ffffff;
+  border-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
 }
 
 <div
@@ -108,7 +108,7 @@ exports[`Timeline.Item renders consistently 1`] = `
   display: block;
   width: 2px;
   content: '';
-  background-color: hsla(210,18%,87%,1);
+  background-color: var(--borderColor-muted,var(--color-border-muted,hsla(210,18%,87%,1)));
 }
 
 <div
@@ -137,7 +137,7 @@ exports[`Timeline.Item renders with condensed prop 1`] = `
   display: block;
   width: 2px;
   content: '';
-  background-color: hsla(210,18%,87%,1);
+  background-color: var(--borderColor-muted,var(--color-border-muted,hsla(210,18%,87%,1)));
 }
 
 .c0:last-child {
@@ -148,8 +148,8 @@ exports[`Timeline.Item renders with condensed prop 1`] = `
   height: 16px;
   margin-top: 8px;
   margin-bottom: 8px;
-  color: #656d76;
-  background-color: #ffffff;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
   border: 0;
 }
 
diff --git a/src/ToggleSwitch/__snapshots__/ToggleSwitch.test.tsx.snap b/src/ToggleSwitch/__snapshots__/ToggleSwitch.test.tsx.snap
index f5a73758d01..28ca1ee6884 100644
--- a/src/ToggleSwitch/__snapshots__/ToggleSwitch.test.tsx.snap
+++ b/src/ToggleSwitch/__snapshots__/ToggleSwitch.test.tsx.snap
@@ -40,7 +40,7 @@ exports[`ToggleSwitch renders consistently 1`] = `
 }
 
 .c6 {
-  color: #ffffff;
+  color: var(--control-checked-fgColor-rest,var(--color-switch-track-checked-fg,#ffffff));
   line-height: 0;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
@@ -63,7 +63,7 @@ exports[`ToggleSwitch renders consistently 1`] = `
 }
 
 .c7 {
-  color: #656d76;
+  color: var(--controlTrack-fgColor-rest,var(--color-switch-track-fg,#656d76));
   line-height: 0;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
@@ -87,7 +87,7 @@ exports[`ToggleSwitch renders consistently 1`] = `
 
 .c1 {
   font-size: 14px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   margin-left: 8px;
   margin-right: 8px;
   position: relative;
@@ -122,29 +122,29 @@ exports[`ToggleSwitch renders consistently 1`] = `
   outline-offset: 3px;
   position: relative;
   overflow: hidden;
-  background-color: #eaeef2;
+  background-color: var(--controlTrack-bgColor-rest,var(--color-switch-track-bg,#eaeef2));
   border-color: transparent;
 }
 
 .c4:hover,
 .c4:focus:focus-visible {
-  background-color: hsla(210,24%,90%,1);
+  background-color: var(--controlTrack-bgColor-hover,var(--color-switch-track-hover-bg,hsla(210,24%,90%,1)));
 }
 
 .c4:active,
 .c4:active:focus-visible {
-  background-color: hsla(210,24%,88%,1);
+  background-color: var(--controlTrack-bgColor-active,var(--color-switch-track-active-bg,hsla(210,24%,88%,1)));
 }
 
 .c4:active {
-  background-color: hsla(210,24%,88%,1);
+  background-color: var(--controlTrack-bgColor-active,var(--color-switch-track-active-bg,hsla(210,24%,88%,1)));
 }
 
 .c8 {
-  background-color: #ffffff;
+  background-color: var(--controlKnob-bgColor-rest,var(--color-switch-knob-bg,#ffffff));
   border-width: 1px;
   border-style: solid;
-  border-color: #858F99;
+  border-color: var(--controlKnob-borderColor-rest,var(--color-switch-knob-border,#858F99));
   border-radius: calc(6px - 1px);
   width: 50%;
   position: absolute;
diff --git a/src/Token/__tests__/__snapshots__/Token.test.tsx.snap b/src/Token/__tests__/__snapshots__/Token.test.tsx.snap
index 607d9763155..93bd22bd132 100644
--- a/src/Token/__tests__/__snapshots__/Token.test.tsx.snap
+++ b/src/Token/__tests__/__snapshots__/Token.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`Token components AvatarToken renders all sizes 1`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
-  box-shadow: 0 0 0 1px rgba(31,35,40,0.15);
+  box-shadow: 0 0 0 1px var(--avatar-borderColor,var(--color-avatar-border,rgba(31,35,40,0.15)));
   height: var(--avatar-size);
   width: var(--avatar-size);
   --avatar-size: 16px;
@@ -58,11 +58,11 @@ exports[`Token components AvatarToken renders all sizes 1`] = `
   line-height: 16px;
   padding-left: 4px;
   padding-right: 4px;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
   padding-left: 4px;
@@ -110,11 +110,11 @@ exports[`Token components AvatarToken renders all sizes 1`] = `
 
 .c6:hover,
 .c6:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c6:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c4 {
@@ -254,7 +254,7 @@ exports[`Token components AvatarToken renders all sizes 2`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
-  box-shadow: 0 0 0 1px rgba(31,35,40,0.15);
+  box-shadow: 0 0 0 1px var(--avatar-borderColor,var(--color-avatar-border,rgba(31,35,40,0.15)));
   height: var(--avatar-size);
   width: var(--avatar-size);
   --avatar-size: 20px;
@@ -284,11 +284,11 @@ exports[`Token components AvatarToken renders all sizes 2`] = `
   line-height: 20px;
   padding-left: 8px;
   padding-right: 8px;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
   padding-left: 4px;
@@ -336,11 +336,11 @@ exports[`Token components AvatarToken renders all sizes 2`] = `
 
 .c6:hover,
 .c6:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c6:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c4 {
@@ -480,7 +480,7 @@ exports[`Token components AvatarToken renders all sizes 3`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
-  box-shadow: 0 0 0 1px rgba(31,35,40,0.15);
+  box-shadow: 0 0 0 1px var(--avatar-borderColor,var(--color-avatar-border,rgba(31,35,40,0.15)));
   height: var(--avatar-size);
   width: var(--avatar-size);
   --avatar-size: 24px;
@@ -510,11 +510,11 @@ exports[`Token components AvatarToken renders all sizes 3`] = `
   line-height: 24px;
   padding-left: 8px;
   padding-right: 8px;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
   padding-left: 4px;
@@ -562,11 +562,11 @@ exports[`Token components AvatarToken renders all sizes 3`] = `
 
 .c6:hover,
 .c6:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c6:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c4 {
@@ -706,7 +706,7 @@ exports[`Token components AvatarToken renders all sizes 4`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
-  box-shadow: 0 0 0 1px rgba(31,35,40,0.15);
+  box-shadow: 0 0 0 1px var(--avatar-borderColor,var(--color-avatar-border,rgba(31,35,40,0.15)));
   height: var(--avatar-size);
   width: var(--avatar-size);
   --avatar-size: 32px;
@@ -738,11 +738,11 @@ exports[`Token components AvatarToken renders all sizes 4`] = `
   padding-right: 16px;
   padding-top: 0;
   padding-bottom: 0;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
   padding-left: 4px;
@@ -790,11 +790,11 @@ exports[`Token components AvatarToken renders all sizes 4`] = `
 
 .c6:hover,
 .c6:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c6:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c4 {
@@ -929,11 +929,11 @@ exports[`Token components AvatarToken renders consistently 1`] = `
   line-height: 20px;
   padding-left: 8px;
   padding-right: 8px;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
 }
 
@@ -1001,7 +1001,7 @@ exports[`Token components AvatarToken renders isSelected 1`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
-  box-shadow: 0 0 0 1px rgba(31,35,40,0.15);
+  box-shadow: 0 0 0 1px var(--avatar-borderColor,var(--color-avatar-border,rgba(31,35,40,0.15)));
   height: var(--avatar-size);
   width: var(--avatar-size);
   --avatar-size: 20px;
@@ -1031,11 +1031,11 @@ exports[`Token components AvatarToken renders isSelected 1`] = `
   line-height: 20px;
   padding-left: 8px;
   padding-right: 8px;
-  background-color: rgba(234,238,242,0.5);
-  border-color: #1F2328;
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   border-style: solid;
   border-width: 1px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   max-width: 100%;
   padding-left: 4px;
 }
@@ -1142,7 +1142,7 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
-  box-shadow: 0 0 0 1px rgba(31,35,40,0.15);
+  box-shadow: 0 0 0 1px var(--avatar-borderColor,var(--color-avatar-border,rgba(31,35,40,0.15)));
   height: var(--avatar-size);
   width: var(--avatar-size);
   --avatar-size: 20px;
@@ -1172,11 +1172,11 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
   line-height: 20px;
   padding-left: 8px;
   padding-right: 8px;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
   padding-left: 4px;
@@ -1224,11 +1224,11 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
 
 .c6:hover,
 .c6:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c6:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c4 {
@@ -1425,11 +1425,11 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = `
 
 .c2:hover,
 .c2:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c2:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c1 {
@@ -1598,11 +1598,11 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = `
 
 .c2:hover,
 .c2:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c2:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c1 {
@@ -1771,11 +1771,11 @@ exports[`Token components IssueLabelToken renders all sizes 3`] = `
 
 .c2:hover,
 .c2:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c2:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c1 {
@@ -1946,11 +1946,11 @@ exports[`Token components IssueLabelToken renders all sizes 4`] = `
 
 .c2:hover,
 .c2:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c2:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c1 {
@@ -2057,11 +2057,11 @@ exports[`Token components IssueLabelToken renders consistently 1`] = `
   line-height: 20px;
   padding-left: 8px;
   padding-right: 8px;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
 }
 
@@ -2199,11 +2199,11 @@ exports[`Token components IssueLabelToken renders custom fill color 1`] = `
 
 .c2:hover,
 .c2:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c2:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c1 {
@@ -2372,11 +2372,11 @@ exports[`Token components IssueLabelToken renders default fill color 1`] = `
 
 .c2:hover,
 .c2:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c2:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c1 {
@@ -2656,11 +2656,11 @@ exports[`Token components IssueLabelToken renders with a remove button 1`] = `
 
 .c2:hover,
 .c2:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c2:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c1 {
@@ -2780,11 +2780,11 @@ exports[`Token components Token renders all sizes 1`] = `
   line-height: 16px;
   padding-left: 4px;
   padding-right: 4px;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
 }
@@ -2831,11 +2831,11 @@ exports[`Token components Token renders all sizes 1`] = `
 
 .c3:hover,
 .c3:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c3:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c1 {
@@ -2960,11 +2960,11 @@ exports[`Token components Token renders all sizes 2`] = `
   line-height: 20px;
   padding-left: 8px;
   padding-right: 8px;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
 }
@@ -3011,11 +3011,11 @@ exports[`Token components Token renders all sizes 2`] = `
 
 .c3:hover,
 .c3:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c3:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c1 {
@@ -3140,11 +3140,11 @@ exports[`Token components Token renders all sizes 3`] = `
   line-height: 24px;
   padding-left: 8px;
   padding-right: 8px;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
 }
@@ -3191,11 +3191,11 @@ exports[`Token components Token renders all sizes 3`] = `
 
 .c3:hover,
 .c3:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c3:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c1 {
@@ -3322,11 +3322,11 @@ exports[`Token components Token renders all sizes 4`] = `
   padding-right: 16px;
   padding-top: 0;
   padding-bottom: 0;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
 }
@@ -3373,11 +3373,11 @@ exports[`Token components Token renders all sizes 4`] = `
 
 .c3:hover,
 .c3:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c3:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c1 {
@@ -3489,11 +3489,11 @@ exports[`Token components Token renders consistently 1`] = `
   line-height: 20px;
   padding-left: 8px;
   padding-right: 8px;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
 }
 
@@ -3569,11 +3569,11 @@ exports[`Token components Token renders isSelected 1`] = `
   line-height: 20px;
   padding-left: 8px;
   padding-right: 8px;
-  background-color: rgba(234,238,242,0.5);
-  border-color: #1F2328;
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   border-style: solid;
   border-width: 1px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   max-width: 100%;
 }
 
@@ -3659,11 +3659,11 @@ exports[`Token components Token renders with a leadingVisual 1`] = `
   line-height: 20px;
   padding-left: 8px;
   padding-right: 8px;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
 }
 
@@ -3765,11 +3765,11 @@ exports[`Token components Token renders with a remove button 1`] = `
   line-height: 20px;
   padding-left: 8px;
   padding-right: 8px;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
 }
@@ -3816,11 +3816,11 @@ exports[`Token components Token renders with a remove button 1`] = `
 
 .c3:hover,
 .c3:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c3:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c1 {
diff --git a/src/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/src/Tooltip/__snapshots__/Tooltip.test.tsx.snap
index 2438acd8319..aaf94cb94e9 100644
--- a/src/Tooltip/__snapshots__/Tooltip.test.tsx.snap
+++ b/src/Tooltip/__snapshots__/Tooltip.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`Tooltip renders consistently 1`] = `
   display: none;
   width: 0px;
   height: 0px;
-  color: #24292f;
+  color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
   pointer-events: none;
   content: '';
   border: 6px solid transparent;
@@ -26,7 +26,7 @@ exports[`Tooltip renders consistently 1`] = `
   padding: 0.5em 0.75em;
   font: normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   -webkit-font-smoothing: subpixel-antialiased;
-  color: #ffffff;
+  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
   text-align: center;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -40,7 +40,7 @@ exports[`Tooltip renders consistently 1`] = `
   white-space: pre;
   pointer-events: none;
   content: attr(aria-label);
-  background: #24292f;
+  background: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
   border-radius: 3px;
   opacity: 0;
 }
@@ -102,7 +102,7 @@ exports[`Tooltip renders consistently 1`] = `
   right: 50%;
   bottom: -7px;
   margin-right: -6px;
-  border-bottom-color: #24292f;
+  border-bottom-color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
 }
 
 .c0.tooltipped-se::after {
@@ -130,7 +130,7 @@ exports[`Tooltip renders consistently 1`] = `
   right: 50%;
   bottom: auto;
   margin-right: -6px;
-  border-top-color: #24292f;
+  border-top-color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
 }
 
 .c0.tooltipped-ne::after {
@@ -164,7 +164,7 @@ exports[`Tooltip renders consistently 1`] = `
   bottom: 50%;
   left: -7px;
   margin-top: -6px;
-  border-left-color: #24292f;
+  border-left-color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
 }
 
 .c0.tooltipped-e::after {
@@ -181,7 +181,7 @@ exports[`Tooltip renders consistently 1`] = `
   right: -7px;
   bottom: 50%;
   margin-top: -6px;
-  border-right-color: #24292f;
+  border-right-color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
 }
 
 .c0.tooltipped-multiline::after {
diff --git a/src/__tests__/CircleOcticon.test.tsx b/src/__tests__/CircleOcticon.test.tsx
index f4a898999a1..a6aa1ece80a 100644
--- a/src/__tests__/CircleOcticon.test.tsx
+++ b/src/__tests__/CircleOcticon.test.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import {CheckIcon} from '@primer/octicons-react'
-import theme from '../theme'
 import {CircleOcticon} from '..'
 import {render, behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
@@ -37,7 +36,7 @@ describe('CircleOcticon', () => {
   it('respects the bg prop', () => {
     expect(render(<CircleOcticon icon={CheckIcon} bg="danger.subtle" />)).toHaveStyleRule(
       'background-color',
-      theme.colorSchemes.light.colors.danger?.subtle,
+      'var(--bgColor-danger-muted,var(--color-danger-subtle,#ffebe9))',
     )
   })
 
diff --git a/src/__tests__/Label.test.tsx b/src/__tests__/Label.test.tsx
index 9087a7a2f8a..99250dc5d4d 100644
--- a/src/__tests__/Label.test.tsx
+++ b/src/__tests__/Label.test.tsx
@@ -22,7 +22,7 @@ describe('Label', () => {
   })
   it('default variant is rendered as "default"', () => {
     const expectedStyles = {
-      ['border-color']: '#d0d7de',
+      ['border-color']: 'var(--borderColor-default,var(--color-border-default,#d0d7de))',
     }
     const defaultStyles = renderStyles(<Label />)
 
diff --git a/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap b/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap
index ba6d34d8eb9..f573b0c0663 100644
--- a/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap
+++ b/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`Pagination renders consistently 1`] = `
   padding: 0.5rem calc((2rem - 1.25rem) / 2);
   font-style: normal;
   line-height: 1;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
@@ -38,7 +38,7 @@ exports[`Pagination renders consistently 1`] = `
 .c2:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: rgba(208,215,222,0.32);
+  background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
   outline: 0;
   -webkit-transition-duration: 0.1s;
   transition-duration: 0.1s;
@@ -46,7 +46,7 @@ exports[`Pagination renders consistently 1`] = `
 
 .c2:focus:not(:disabled) {
   box-shadow: none;
-  outline: 2px solid #0969da;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: 0;
 }
 
@@ -56,29 +56,29 @@ exports[`Pagination renders consistently 1`] = `
 
 .c2:focus-visible:not(:disabled) {
   box-shadow: none;
-  outline: 2px solid #0969da;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: 0;
 }
 
 .c2:active {
-  border-color: hsla(210,18%,87%,1);
+  border-color: var(--borderColor-muted,var(--color-border-muted,hsla(210,18%,87%,1)));
 }
 
 .c2[rel='prev'],
 .c2[rel='next'] {
-  color: #0969da;
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
 }
 
 .c2[aria-current],
 .c2[aria-current]:hover {
-  color: #ffffff;
-  background-color: #0969da;
+  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
+  background-color: var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
   border-color: transparent;
 }
 
 .c2[aria-disabled],
 .c2[aria-disabled]:hover {
-  color: #8c959f;
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
   cursor: default;
   background-color: transparent;
   border-color: transparent;
@@ -92,7 +92,7 @@ exports[`Pagination renders consistently 1`] = `
 .c2[aria-disabled]:hover,
 .c2[role='presentation'],
 .c2[role='presentation']:hover {
-  color: #8c959f;
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
   cursor: default;
   background-color: transparent;
 }
diff --git a/src/__tests__/PointerBox.test.tsx b/src/__tests__/PointerBox.test.tsx
index 4b5c6f99aa1..a862c7e4dd5 100644
--- a/src/__tests__/PointerBox.test.tsx
+++ b/src/__tests__/PointerBox.test.tsx
@@ -45,12 +45,14 @@ describe('PointerBox', () => {
     const viaSxProp = renderStyles(<PointerBox sx={{bg: mockBg}} />)
     expect(viaStyledSystem).toEqual(
       expect.objectContaining({
-        'background-image': 'linear-gradient(var(--custom-bg),var(--custom-bg)),linear-gradient(#ffffff,#ffffff)',
+        'background-image':
+          'linear-gradient(var(--custom-bg),var(--custom-bg)),linear-gradient(var(--bgColor-default,var(--color-canvas-default,#ffffff)),var(--bgColor-default,var(--color-canvas-default,#ffffff)))',
       }),
     )
     expect(viaSxProp).toEqual(
       expect.objectContaining({
-        'background-image': 'linear-gradient(var(--custom-bg),var(--custom-bg)),linear-gradient(#ffffff,#ffffff)',
+        'background-image':
+          'linear-gradient(var(--custom-bg),var(--custom-bg)),linear-gradient(var(--bgColor-default,var(--color-canvas-default,#ffffff)),var(--bgColor-default,var(--color-canvas-default,#ffffff)))',
       }),
     )
   })
diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
index 67221dbfe60..d7d29bc0af7 100644
--- a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`ActionMenu renders consistently 1`] = `
 .c0 {
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   line-height: 1.5;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c2 {
@@ -25,7 +25,7 @@ exports[`ActionMenu renders consistently 1`] = `
 .c1 {
   border-radius: 6px;
   border: 1px solid;
-  border-color: var(--button-default-borderColor-rest,rgba(31,35,40,0.15));
+  border-color: var(--button-default-borderColor-rest,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));
   font-family: inherit;
   font-weight: 500;
   font-size: 14px;
@@ -62,14 +62,14 @@ exports[`ActionMenu renders consistently 1`] = `
   transition: 80ms cubic-bezier(0.65,0,0.35,1);
   -webkit-transition-property: color,fill,background-color,border-color;
   transition-property: color,fill,background-color,border-color;
-  color: #24292f;
-  background-color: #f6f8fa;
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  color: var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));
+  background-color: var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));
+  box-shadow: var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04))),var(--button-default-shadow-inset,var(--color-btn-inset-shadow,inset 0 1px 0 rgba(255,255,255,0.25)));
 }
 
 .c1:focus:not(:disabled) {
   box-shadow: none;
-  outline: 2px solid #0969da;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -2px;
 }
 
@@ -79,7 +79,7 @@ exports[`ActionMenu renders consistently 1`] = `
 
 .c1:focus-visible:not(:disabled) {
   box-shadow: none;
-  outline: 2px solid #0969da;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -2px;
 }
 
@@ -112,7 +112,7 @@ exports[`ActionMenu renders consistently 1`] = `
 .c1:disabled {
   cursor: not-allowed;
   box-shadow: none;
-  color: #8c959f;
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
 .c1:disabled [data-component=ButtonCounter] {
@@ -175,9 +175,9 @@ exports[`ActionMenu renders consistently 1`] = `
 }
 
 .c1[data-inactive]:not([disabled]) {
-  background-color: var(--button-inactive-bgColor,#eaeef2);
-  border-color: var(--button-inactive-bgColor,#eaeef2);
-  color: var(--button-inactive-fgColor,#57606a);
+  background-color: var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));
+  border-color: var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));
+  color: var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));
 }
 
 .c1[data-inactive]:not([disabled]):focus-visible {
@@ -223,24 +223,24 @@ exports[`ActionMenu renders consistently 1`] = `
 }
 
 .c1:hover:not([disabled]):not([data-inactive]) {
-  background-color: #f3f4f6;
-  border-color: var(--button-default-borderColor-hover,rgba(31,35,40,0.15));
+  background-color: var(--button-default-bgColor-hover,var(--color-btn-hover-bg,#f3f4f6));
+  border-color: var(--button-default-borderColor-hover,var(--button-default-borderColor-hover,var(--color-btn-hover-border,rgba(31,35,40,0.15))));
 }
 
 .c1:active:not([disabled]):not([data-inactive]) {
-  background-color: hsla(220,14%,93%,1);
-  border-color: var(--button-default-borderColor-active,rgba(31,35,40,0.15));
+  background-color: var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));
+  border-color: var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));
 }
 
 .c1[aria-expanded=true] {
-  background-color: hsla(220,14%,93%,1);
-  border-color: var(--button-default-borderColor-active,rgba(31,35,40,0.15));
+  background-color: var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));
+  border-color: var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));
 }
 
 .c1 [data-component="leadingVisual"],
 .c1 [data-component="trailingVisual"],
 .c1 [data-component="trailingAction"] {
-  color: var(--button-color,#656d76);
+  color: var(--button-color,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
 }
 
 @media (forced-colors:active) {
diff --git a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
index 09be4a32c49..e1f18bef413 100644
--- a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
+++ b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`AnchoredOverlay renders consistently 1`] = `
 .c0 {
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   line-height: 1.5;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c1 {
@@ -49,29 +49,29 @@ exports[`AnchoredOverlay renders consistently 1`] = `
 }
 
 .c2 {
-  color: #24292f;
-  background-color: #f6f8fa;
-  border: 1px solid rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  color: var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));
+  background-color: var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));
+  border: 1px solid var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15)));
+  box-shadow: var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04))),var(--button-default-shadow-inset,var(--color-btn-inset-shadow,inset 0 1px 0 rgba(255,255,255,0.25)));
 }
 
 .c2:hover {
-  background-color: #f3f4f6;
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--button-default-bgColor-hover,var(--color-btn-hover-bg,#f3f4f6));
+  border-color: var(--button-default-borderColor-hover,var(--color-btn-hover-border,rgba(31,35,40,0.15)));
 }
 
 .c2:focus {
-  outline: solid 2px #0969da;
+  outline: solid 2px var(--fgColor-accent,var(--color-accent-fg,#0969da));
 }
 
 .c2:active {
-  background-color: hsla(220,14%,94%,1);
+  background-color: var(--button-default-bgColor-selected,var(--color-btn-selected-bg,hsla(220,14%,94%,1)));
 }
 
 .c2:disabled {
-  color: #8c959f;
-  background-color: #f6f8fa;
-  border-color: rgba(31,35,40,0.15);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));
+  border-color: var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15)));
 }
 
 <div
@@ -100,12 +100,12 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
 .c0 {
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   line-height: 1.5;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c3 {
-  background-color: #ffffff;
-  box-shadow: 0 1px 3px rgba(31,35,40,0.12),0 8px 24px rgba(66,74,83,0.12);
+  background-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
+  box-shadow: var(--shadow-floating-small,var(--color-overlay-shadow,0 1px 3px rgba(31,35,40,0.12),0 8px 24px rgba(66,74,83,0.12)));
   position: absolute;
   min-width: 192px;
   height: auto;
@@ -163,29 +163,29 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
 }
 
 .c2 {
-  color: #24292f;
-  background-color: #f6f8fa;
-  border: 1px solid rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  color: var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));
+  background-color: var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));
+  border: 1px solid var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15)));
+  box-shadow: var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04))),var(--button-default-shadow-inset,var(--color-btn-inset-shadow,inset 0 1px 0 rgba(255,255,255,0.25)));
 }
 
 .c2:hover {
-  background-color: #f3f4f6;
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--button-default-bgColor-hover,var(--color-btn-hover-bg,#f3f4f6));
+  border-color: var(--button-default-borderColor-hover,var(--color-btn-hover-border,rgba(31,35,40,0.15)));
 }
 
 .c2:focus {
-  outline: solid 2px #0969da;
+  outline: solid 2px var(--fgColor-accent,var(--color-accent-fg,#0969da));
 }
 
 .c2:active {
-  background-color: hsla(220,14%,94%,1);
+  background-color: var(--button-default-bgColor-selected,var(--color-btn-selected-bg,hsla(220,14%,94%,1)));
 }
 
 .c2:disabled {
-  color: #8c959f;
-  background-color: #f6f8fa;
-  border-color: rgba(31,35,40,0.15);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));
+  border-color: var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15)));
 }
 
 @media (forced-colors:active) {
diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index c569d6033de..eb4f351e329 100644
--- a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -5,13 +5,13 @@ exports[`snapshots renders a custom empty state message 1`] = `
   .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -34,24 +34,24 @@ exports[`snapshots renders a custom empty state message 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -75,7 +75,7 @@ exports[`snapshots renders a custom empty state message 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -172,13 +172,13 @@ exports[`snapshots renders a loading state 1`] = `
   .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -201,24 +201,24 @@ exports[`snapshots renders a loading state 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -242,7 +242,7 @@ exports[`snapshots renders a loading state 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -374,13 +374,13 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -403,24 +403,24 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -444,7 +444,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -540,7 +540,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 }
 
 .c6 {
-  border-color: #6e7781;
+  border-color: var(--bgColor-neutral-emphasis,var(--color-neutral-emphasis,#6e7781));
   border-style: solid;
   border-width: 1px;
   border-radius: 3px;
@@ -550,7 +550,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   margin: 0;
   place-content: center;
   width: var(--base-size-16,16px);
-  background-color: #ffffff;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
   -webkit-transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms;
   transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms;
 }
@@ -560,7 +560,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   height: var(--base-size-16,16px);
   visibility: hidden;
   content: "";
-  background-color: #ffffff;
+  background-color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
   -webkit-transition: visibility 0s linear 230ms;
   transition: visibility 0s linear 230ms;
   -webkit-clip-path: inset(var(--base-size-16,16px) 0 0 0);
@@ -620,7 +620,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   -ms-flex-negative: 0;
   flex-shrink: 0;
   margin-right: 8px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
 .c9 svg {
@@ -629,7 +629,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 
 [data-variant="danger"]:hover .c4,
 [data-variant="danger"]:active .c9 {
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c0 {
@@ -670,7 +670,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   border-radius: 6px;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -712,7 +712,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 }
 
 .c3:not(:first-of-type) {
-  --divider-color: rgba(208,215,222,0.48);
+  --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
 [data-component="ActionList.Divider"] + .c2 {
@@ -741,21 +741,21 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 
 @media (hover:hover) and (pointer:fine) {
   .c3:hover:not([aria-disabled]):not([data-inactive]) {
-    background-color: rgba(208,215,222,0.32);
-    color: #1F2328;
-    box-shadow: inset 0 0 0 max(1px,0.0625rem) rgba(0,0,0,0);
+    background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
+    color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+    box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
   .c3:focus-visible,
   .c3 > a:focus-visible {
     outline: none;
     border: 2 solid;
-    box-shadow: 0 0 0 2px #0969da;
+    box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
   }
 
   .c3:active:not([aria-disabled]):not([data-inactive]) {
-    background-color: rgba(208,215,222,0.48);
-    color: #1F2328;
+    background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
+    color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
 }
 
@@ -1165,13 +1165,13 @@ exports[`snapshots renders a multiselect input 1`] = `
   .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1194,24 +1194,24 @@ exports[`snapshots renders a multiselect input 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -1235,7 +1235,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -1323,7 +1323,7 @@ exports[`snapshots renders a multiselect input 1`] = `
 }
 
 .c5 {
-  border-color: #6e7781;
+  border-color: var(--bgColor-neutral-emphasis,var(--color-neutral-emphasis,#6e7781));
   border-style: solid;
   border-width: 1px;
   border-radius: 3px;
@@ -1333,7 +1333,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   margin: 0;
   place-content: center;
   width: var(--base-size-16,16px);
-  background-color: #ffffff;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
   -webkit-transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms;
   transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms;
 }
@@ -1343,7 +1343,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   height: var(--base-size-16,16px);
   visibility: hidden;
   content: "";
-  background-color: #ffffff;
+  background-color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
   -webkit-transition: visibility 0s linear 230ms;
   transition: visibility 0s linear 230ms;
   -webkit-clip-path: inset(var(--base-size-16,16px) 0 0 0);
@@ -1421,7 +1421,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   border-radius: 6px;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -1463,7 +1463,7 @@ exports[`snapshots renders a multiselect input 1`] = `
 }
 
 .c3:not(:first-of-type) {
-  --divider-color: rgba(208,215,222,0.48);
+  --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
 [data-component="ActionList.Divider"] + .c2 {
@@ -1483,21 +1483,21 @@ exports[`snapshots renders a multiselect input 1`] = `
 
 @media (hover:hover) and (pointer:fine) {
   .c3:hover:not([aria-disabled]):not([data-inactive]) {
-    background-color: rgba(208,215,222,0.32);
-    color: #1F2328;
-    box-shadow: inset 0 0 0 max(1px,0.0625rem) rgba(0,0,0,0);
+    background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
+    color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+    box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
   .c3:focus-visible,
   .c3 > a:focus-visible {
     outline: none;
     border: 2 solid;
-    box-shadow: 0 0 0 2px #0969da;
+    box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
   }
 
   .c3:active:not([aria-disabled]):not([data-inactive]) {
-    background-color: rgba(208,215,222,0.48);
-    color: #1F2328;
+    background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
+    color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
 }
 
@@ -1842,13 +1842,13 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1871,24 +1871,24 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -1912,7 +1912,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -2008,7 +2008,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 }
 
 .c5 {
-  border-color: #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   border-style: solid;
   border-width: 1px;
   border-radius: 3px;
@@ -2018,7 +2018,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   margin: 0;
   place-content: center;
   width: var(--base-size-16,16px);
-  background-color: #0969da;
+  background-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   -webkit-transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1);
   transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1);
 }
@@ -2028,7 +2028,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   height: var(--base-size-16,16px);
   visibility: visible;
   content: "";
-  background-color: #ffffff;
+  background-color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
   -webkit-transition: visibility 0s linear 0s;
   transition: visibility 0s linear 0s;
   -webkit-clip-path: inset(var(--base-size-16,16px) 0 0 0);
@@ -2069,7 +2069,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 }
 
 .c9 {
-  border-color: #6e7781;
+  border-color: var(--bgColor-neutral-emphasis,var(--color-neutral-emphasis,#6e7781));
   border-style: solid;
   border-width: 1px;
   border-radius: 3px;
@@ -2079,7 +2079,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   margin: 0;
   place-content: center;
   width: var(--base-size-16,16px);
-  background-color: #ffffff;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
   -webkit-transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms;
   transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms;
 }
@@ -2089,7 +2089,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   height: var(--base-size-16,16px);
   visibility: hidden;
   content: "";
-  background-color: #ffffff;
+  background-color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
   -webkit-transition: visibility 0s linear 230ms;
   transition: visibility 0s linear 230ms;
   -webkit-clip-path: inset(var(--base-size-16,16px) 0 0 0);
@@ -2144,7 +2144,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   border-radius: 6px;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -2166,8 +2166,8 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 .c3[aria-disabled] [data-component="ActionList.Checkbox"],
 .c3[data-inactive] [data-component="ActionList.Checkbox"] {
   cursor: not-allowed;
-  background-color: #656d76;
-  border-color: #656d76;
+  background-color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  border-color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
 .c3 [data-component="ActionList.Item--DividerContainer"] {
@@ -2186,7 +2186,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 }
 
 .c3:not(:first-of-type) {
-  --divider-color: rgba(208,215,222,0.48);
+  --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
 [data-component="ActionList.Divider"] + .c2 {
@@ -2222,7 +2222,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   border-radius: 6px;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -2264,7 +2264,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 }
 
 .c8:not(:first-of-type) {
-  --divider-color: rgba(208,215,222,0.48);
+  --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
 [data-component="ActionList.Divider"] + .c2 {
@@ -2284,21 +2284,21 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 
 @media (hover:hover) and (pointer:fine) {
   .c3:hover:not([aria-disabled]):not([data-inactive]) {
-    background-color: rgba(208,215,222,0.32);
-    color: #1F2328;
-    box-shadow: inset 0 0 0 max(1px,0.0625rem) rgba(0,0,0,0);
+    background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
+    color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+    box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
   .c3:focus-visible,
   .c3 > a:focus-visible {
     outline: none;
     border: 2 solid;
-    box-shadow: 0 0 0 2px #0969da;
+    box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
   }
 
   .c3:active:not([aria-disabled]):not([data-inactive]) {
-    background-color: rgba(208,215,222,0.48);
-    color: #1F2328;
+    background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
+    color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
 }
 
@@ -2310,21 +2310,21 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 
 @media (hover:hover) and (pointer:fine) {
   .c8:hover:not([aria-disabled]):not([data-inactive]) {
-    background-color: rgba(208,215,222,0.32);
-    color: #1F2328;
-    box-shadow: inset 0 0 0 max(1px,0.0625rem) rgba(0,0,0,0);
+    background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
+    color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+    box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
   .c8:focus-visible,
   .c8 > a:focus-visible {
     outline: none;
     border: 2 solid;
-    box-shadow: 0 0 0 2px #0969da;
+    box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
   }
 
   .c8:active:not([aria-disabled]):not([data-inactive]) {
-    background-color: rgba(208,215,222,0.48);
-    color: #1F2328;
+    background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
+    color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
 }
 
@@ -2669,13 +2669,13 @@ exports[`snapshots renders a single select input 1`] = `
   .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2698,24 +2698,24 @@ exports[`snapshots renders a single select input 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -2739,7 +2739,7 @@ exports[`snapshots renders a single select input 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -2887,7 +2887,7 @@ exports[`snapshots renders a single select input 1`] = `
   border-radius: 6px;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -2929,7 +2929,7 @@ exports[`snapshots renders a single select input 1`] = `
 }
 
 .c3:not(:first-of-type) {
-  --divider-color: rgba(208,215,222,0.48);
+  --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
 [data-component="ActionList.Divider"] + .c2 {
@@ -2949,21 +2949,21 @@ exports[`snapshots renders a single select input 1`] = `
 
 @media (hover:hover) and (pointer:fine) {
   .c3:hover:not([aria-disabled]):not([data-inactive]) {
-    background-color: rgba(208,215,222,0.32);
-    color: #1F2328;
-    box-shadow: inset 0 0 0 max(1px,0.0625rem) rgba(0,0,0,0);
+    background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
+    color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+    box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
   .c3:focus-visible,
   .c3 > a:focus-visible {
     outline: none;
     border: 2 solid;
-    box-shadow: 0 0 0 2px #0969da;
+    box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
   }
 
   .c3:active:not([aria-disabled]):not([data-inactive]) {
-    background-color: rgba(208,215,222,0.48);
-    color: #1F2328;
+    background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
+    color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
 }
 
@@ -3340,7 +3340,7 @@ exports[`snapshots renders with a custom text input component 1`] = `
   border-radius: 6px;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -3382,7 +3382,7 @@ exports[`snapshots renders with a custom text input component 1`] = `
 }
 
 .c3:not(:first-of-type) {
-  --divider-color: rgba(208,215,222,0.48);
+  --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
 [data-component="ActionList.Divider"] + .c2 {
@@ -3402,21 +3402,21 @@ exports[`snapshots renders with a custom text input component 1`] = `
 
 @media (hover:hover) and (pointer:fine) {
   .c3:hover:not([aria-disabled]):not([data-inactive]) {
-    background-color: rgba(208,215,222,0.32);
-    color: #1F2328;
-    box-shadow: inset 0 0 0 max(1px,0.0625rem) rgba(0,0,0,0);
+    background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
+    color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+    box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
   .c3:focus-visible,
   .c3 > a:focus-visible {
     outline: none;
     border: 2 solid;
-    box-shadow: 0 0 0 2px #0969da;
+    box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
   }
 
   .c3:active:not([aria-disabled]):not([data-inactive]) {
-    background-color: rgba(208,215,222,0.48);
-    color: #1F2328;
+    background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
+    color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
 }
 
@@ -3697,13 +3697,13 @@ exports[`snapshots renders with an input value 1`] = `
   .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3726,24 +3726,24 @@ exports[`snapshots renders with an input value 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -3767,7 +3767,7 @@ exports[`snapshots renders with an input value 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
diff --git a/src/__tests__/__snapshots__/Avatar.test.tsx.snap b/src/__tests__/__snapshots__/Avatar.test.tsx.snap
index b2e0a81ff11..c3ab6eb64fa 100644
--- a/src/__tests__/__snapshots__/Avatar.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Avatar.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`Avatar renders consistently 1`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
-  box-shadow: 0 0 0 1px rgba(31,35,40,0.15);
+  box-shadow: 0 0 0 1px var(--avatar-borderColor,var(--color-avatar-border,rgba(31,35,40,0.15)));
   height: var(--avatar-size);
   width: var(--avatar-size);
   --avatar-size: 20px;
diff --git a/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap b/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap
index 8db11d1caf6..e220661e680 100644
--- a/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap
+++ b/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap
@@ -30,7 +30,7 @@ exports[`Avatar renders consistently 1`] = `
   flex-shrink: 0;
   height: var(--avatar-stack-size);
   width: var(--avatar-stack-size);
-  box-shadow: 0 0 0 var(--avatar-border-width) #ffffff;
+  box-shadow: 0 0 0 var(--avatar-border-width) var(--bgColor-default,var(--color-canvas-default,#ffffff));
   position: relative;
   overflow: hidden;
 }
@@ -201,7 +201,7 @@ exports[`Avatar respects alignRight props 1`] = `
   flex-shrink: 0;
   height: var(--avatar-stack-size);
   width: var(--avatar-stack-size);
-  box-shadow: 0 0 0 var(--avatar-border-width) #ffffff;
+  box-shadow: 0 0 0 var(--avatar-border-width) var(--bgColor-default,var(--color-canvas-default,#ffffff));
   position: relative;
   overflow: hidden;
 }
diff --git a/src/__tests__/__snapshots__/Caret.test.tsx.snap b/src/__tests__/__snapshots__/Caret.test.tsx.snap
index c7af9d5eddb..c0670947ab9 100644
--- a/src/__tests__/__snapshots__/Caret.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Caret.test.tsx.snap
@@ -20,16 +20,16 @@ exports[`Caret renders cardinal directions 1`] = `
   >
     <path
       d="M-8,0L0,8L8,0L-8,0Z"
-      fill="#ffffff"
+      fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
     />
     <path
       d="M-8,0L0,8L8,0L-8,0Z"
-      fill="#ffffff"
+      fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
     />
     <path
       d="M-8,0L0,8L8,0"
       fill="none"
-      stroke="#d0d7de"
+      stroke="var(--borderColor-default, var(--color-border-default, #d0d7de))"
       strokeWidth="1px"
     />
   </g>
@@ -56,16 +56,16 @@ exports[`Caret renders cardinal directions 2`] = `
   >
     <path
       d="M-8,0L0,8L8,0L-8,0Z"
-      fill="#ffffff"
+      fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
     />
     <path
       d="M-8,0L0,8L8,0L-8,0Z"
-      fill="#ffffff"
+      fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
     />
     <path
       d="M-8,0L0,8L8,0"
       fill="none"
-      stroke="#d0d7de"
+      stroke="var(--borderColor-default, var(--color-border-default, #d0d7de))"
       strokeWidth="1px"
     />
   </g>
@@ -92,16 +92,16 @@ exports[`Caret renders cardinal directions 3`] = `
   >
     <path
       d="M-8,0L0,8L8,0L-8,0Z"
-      fill="#ffffff"
+      fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
     />
     <path
       d="M-8,0L0,8L8,0L-8,0Z"
-      fill="#ffffff"
+      fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
     />
     <path
       d="M-8,0L0,8L8,0"
       fill="none"
-      stroke="#d0d7de"
+      stroke="var(--borderColor-default, var(--color-border-default, #d0d7de))"
       strokeWidth="1px"
     />
   </g>
@@ -128,16 +128,16 @@ exports[`Caret renders cardinal directions 4`] = `
   >
     <path
       d="M-8,0L0,8L8,0L-8,0Z"
-      fill="#ffffff"
+      fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
     />
     <path
       d="M-8,0L0,8L8,0L-8,0Z"
-      fill="#ffffff"
+      fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
     />
     <path
       d="M-8,0L0,8L8,0"
       fill="none"
-      stroke="#d0d7de"
+      stroke="var(--borderColor-default, var(--color-border-default, #d0d7de))"
       strokeWidth="1px"
     />
   </g>
@@ -164,16 +164,16 @@ exports[`Caret renders cardinal directions 5`] = `
   >
     <path
       d="M-8,0L0,8L8,0L-8,0Z"
-      fill="#ffffff"
+      fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
     />
     <path
       d="M-8,0L0,8L8,0L-8,0Z"
-      fill="#ffffff"
+      fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
     />
     <path
       d="M-8,0L0,8L8,0"
       fill="none"
-      stroke="#d0d7de"
+      stroke="var(--borderColor-default, var(--color-border-default, #d0d7de))"
       strokeWidth="1px"
     />
   </g>
@@ -200,16 +200,16 @@ exports[`Caret renders cardinal directions 6`] = `
   >
     <path
       d="M-8,0L0,8L8,0L-8,0Z"
-      fill="#ffffff"
+      fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
     />
     <path
       d="M-8,0L0,8L8,0L-8,0Z"
-      fill="#ffffff"
+      fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
     />
     <path
       d="M-8,0L0,8L8,0"
       fill="none"
-      stroke="#d0d7de"
+      stroke="var(--borderColor-default, var(--color-border-default, #d0d7de))"
       strokeWidth="1px"
     />
   </g>
@@ -236,16 +236,16 @@ exports[`Caret renders cardinal directions 7`] = `
   >
     <path
       d="M-8,0L0,8L8,0L-8,0Z"
-      fill="#ffffff"
+      fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
     />
     <path
       d="M-8,0L0,8L8,0L-8,0Z"
-      fill="#ffffff"
+      fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
     />
     <path
       d="M-8,0L0,8L8,0"
       fill="none"
-      stroke="#d0d7de"
+      stroke="var(--borderColor-default, var(--color-border-default, #d0d7de))"
       strokeWidth="1px"
     />
   </g>
@@ -272,16 +272,16 @@ exports[`Caret renders cardinal directions 8`] = `
   >
     <path
       d="M-8,0L0,8L8,0L-8,0Z"
-      fill="#ffffff"
+      fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
     />
     <path
       d="M-8,0L0,8L8,0L-8,0Z"
-      fill="#ffffff"
+      fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
     />
     <path
       d="M-8,0L0,8L8,0"
       fill="none"
-      stroke="#d0d7de"
+      stroke="var(--borderColor-default, var(--color-border-default, #d0d7de))"
       strokeWidth="1px"
     />
   </g>
@@ -308,16 +308,16 @@ exports[`Caret renders cardinal directions 9`] = `
   >
     <path
       d="M-8,0L0,8L8,0L-8,0Z"
-      fill="#ffffff"
+      fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
     />
     <path
       d="M-8,0L0,8L8,0L-8,0Z"
-      fill="#ffffff"
+      fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
     />
     <path
       d="M-8,0L0,8L8,0"
       fill="none"
-      stroke="#d0d7de"
+      stroke="var(--borderColor-default, var(--color-border-default, #d0d7de))"
       strokeWidth="1px"
     />
   </g>
@@ -344,16 +344,16 @@ exports[`Caret renders cardinal directions 10`] = `
   >
     <path
       d="M-8,0L0,8L8,0L-8,0Z"
-      fill="#ffffff"
+      fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
     />
     <path
       d="M-8,0L0,8L8,0L-8,0Z"
-      fill="#ffffff"
+      fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
     />
     <path
       d="M-8,0L0,8L8,0"
       fill="none"
-      stroke="#d0d7de"
+      stroke="var(--borderColor-default, var(--color-border-default, #d0d7de))"
       strokeWidth="1px"
     />
   </g>
@@ -380,16 +380,16 @@ exports[`Caret renders cardinal directions 11`] = `
   >
     <path
       d="M-8,0L0,8L8,0L-8,0Z"
-      fill="#ffffff"
+      fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
     />
     <path
       d="M-8,0L0,8L8,0L-8,0Z"
-      fill="#ffffff"
+      fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
     />
     <path
       d="M-8,0L0,8L8,0"
       fill="none"
-      stroke="#d0d7de"
+      stroke="var(--borderColor-default, var(--color-border-default, #d0d7de))"
       strokeWidth="1px"
     />
   </g>
@@ -416,16 +416,16 @@ exports[`Caret renders cardinal directions 12`] = `
   >
     <path
       d="M-8,0L0,8L8,0L-8,0Z"
-      fill="#ffffff"
+      fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
     />
     <path
       d="M-8,0L0,8L8,0L-8,0Z"
-      fill="#ffffff"
+      fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
     />
     <path
       d="M-8,0L0,8L8,0"
       fill="none"
-      stroke="#d0d7de"
+      stroke="var(--borderColor-default, var(--color-border-default, #d0d7de))"
       strokeWidth="1px"
     />
   </g>
diff --git a/src/__tests__/__snapshots__/Checkbox.test.tsx.snap b/src/__tests__/__snapshots__/Checkbox.test.tsx.snap
index 95b7436368b..9d3b1ae45cc 100644
--- a/src/__tests__/__snapshots__/Checkbox.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Checkbox.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Checkbox renders consistently 1`] = `
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  border-color: #6e7781;
+  border-color: var(--bgColor-neutral-emphasis,var(--color-neutral-emphasis,#6e7781));
   border-style: solid;
   border-width: 1px;
   cursor: pointer;
@@ -23,7 +23,7 @@ exports[`Checkbox renders consistently 1`] = `
 
 .c0:disabled {
   background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
-  border-color: #d0d7de;
+  border-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0::before {
@@ -31,7 +31,7 @@ exports[`Checkbox renders consistently 1`] = `
   height: var(--base-size-16,16px);
   visibility: hidden;
   content: '';
-  background-color: #ffffff;
+  background-color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
   -webkit-transition: visibility 0s linear 230ms;
   transition: visibility 0s linear 230ms;
   -webkit-clip-path: inset(var(--base-size-16,16px) 0 0 0);
@@ -50,8 +50,8 @@ exports[`Checkbox renders consistently 1`] = `
 
 .c0:checked,
 .c0:indeterminate {
-  background: #0969da;
-  border-color: #0969da;
+  background: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
 }
 
 .c0:checked::before,
@@ -73,17 +73,17 @@ exports[`Checkbox renders consistently 1`] = `
 
 .c0:checked:disabled {
   cursor: not-allowed;
-  background-color: #656d76;
-  border-color: #656d76;
+  background-color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  border-color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   opacity: 1;
 }
 
 .c0:checked:disabled::before {
-  background-color: #ffffff;
+  background-color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
 }
 
 .c0:indeterminate {
-  background: #0969da;
+  background: var(--fgColor-accent,var(--color-accent-fg,#0969da));
 }
 
 .c0:indeterminate::before {
@@ -94,7 +94,7 @@ exports[`Checkbox renders consistently 1`] = `
 
 .c0:focus:not(:disabled) {
   box-shadow: none;
-  outline: 2px solid #0969da;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: 2px;
 }
 
@@ -104,7 +104,7 @@ exports[`Checkbox renders consistently 1`] = `
 
 .c0:focus-visible:not(:disabled) {
   box-shadow: none;
-  outline: 2px solid #0969da;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: 2px;
 }
 
diff --git a/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap b/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap
index a24e2fcdabb..0db7301e75c 100644
--- a/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap
+++ b/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`CheckboxGroup renders consistently 1`] = `
   font-weight: 600;
   font-size: 14px;
   display: block;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   cursor: pointer;
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
@@ -72,7 +72,7 @@ exports[`CheckboxGroup renders consistently 1`] = `
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  border-color: #6e7781;
+  border-color: var(--bgColor-neutral-emphasis,var(--color-neutral-emphasis,#6e7781));
   border-style: solid;
   border-width: 1px;
   cursor: pointer;
@@ -90,7 +90,7 @@ exports[`CheckboxGroup renders consistently 1`] = `
 
 .c6:disabled {
   background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
-  border-color: #d0d7de;
+  border-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c6::before {
@@ -98,7 +98,7 @@ exports[`CheckboxGroup renders consistently 1`] = `
   height: var(--base-size-16,16px);
   visibility: hidden;
   content: '';
-  background-color: #ffffff;
+  background-color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
   -webkit-transition: visibility 0s linear 230ms;
   transition: visibility 0s linear 230ms;
   -webkit-clip-path: inset(var(--base-size-16,16px) 0 0 0);
@@ -117,8 +117,8 @@ exports[`CheckboxGroup renders consistently 1`] = `
 
 .c6:checked,
 .c6:indeterminate {
-  background: #0969da;
-  border-color: #0969da;
+  background: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
 }
 
 .c6:checked::before,
@@ -140,17 +140,17 @@ exports[`CheckboxGroup renders consistently 1`] = `
 
 .c6:checked:disabled {
   cursor: not-allowed;
-  background-color: #656d76;
-  border-color: #656d76;
+  background-color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  border-color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   opacity: 1;
 }
 
 .c6:checked:disabled::before {
-  background-color: #ffffff;
+  background-color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
 }
 
 .c6:indeterminate {
-  background: #0969da;
+  background: var(--fgColor-accent,var(--color-accent-fg,#0969da));
 }
 
 .c6:indeterminate::before {
@@ -161,7 +161,7 @@ exports[`CheckboxGroup renders consistently 1`] = `
 
 .c6:focus:not(:disabled) {
   box-shadow: none;
-  outline: 2px solid #0969da;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: 2px;
 }
 
@@ -171,7 +171,7 @@ exports[`CheckboxGroup renders consistently 1`] = `
 
 .c6:focus-visible:not(:disabled) {
   box-shadow: none;
-  outline: 2px solid #0969da;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: 2px;
 }
 
diff --git a/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap b/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap
index 625b1dfd993..87c932814c3 100644
--- a/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap
+++ b/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`CheckboxOrRadioGroup renders consistently 1`] = `
   font-weight: 600;
   font-size: 14px;
   display: block;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   cursor: pointer;
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
@@ -72,7 +72,7 @@ exports[`CheckboxOrRadioGroup renders consistently 1`] = `
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  border-color: #6e7781;
+  border-color: var(--bgColor-neutral-emphasis,var(--color-neutral-emphasis,#6e7781));
   border-style: solid;
   border-width: 1px;
   cursor: pointer;
@@ -90,22 +90,22 @@ exports[`CheckboxOrRadioGroup renders consistently 1`] = `
 
 .c6:disabled {
   background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
-  border-color: #d0d7de;
+  border-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c6:checked {
-  border-color: #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   border-width: var(--base-size-4,4px);
 }
 
 .c6:checked:disabled {
   cursor: not-allowed;
-  border-color: #656d76;
+  border-color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
 .c6:focus:not(:disabled) {
   box-shadow: none;
-  outline: 2px solid #0969da;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: 2px;
 }
 
@@ -115,7 +115,7 @@ exports[`CheckboxOrRadioGroup renders consistently 1`] = `
 
 .c6:focus-visible:not(:disabled) {
   box-shadow: none;
-  outline: 2px solid #0969da;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: 2px;
 }
 
diff --git a/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap b/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap
index faadaa00060..dff05781dd5 100644
--- a/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap
+++ b/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap
@@ -45,9 +45,9 @@ exports[`CircleBadge renders consistently 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  background-color: #ffffff;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
   border-radius: 50%;
-  box-shadow: 0 3px 6px rgba(140,149,159,0.15);
+  box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
   width: 96px;
   height: 96px;
 }
@@ -76,9 +76,9 @@ exports[`CircleBadge respects the inline prop 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  background-color: #ffffff;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
   border-radius: 50%;
-  box-shadow: 0 3px 6px rgba(140,149,159,0.15);
+  box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
   width: 96px;
   height: 96px;
 }
@@ -102,9 +102,9 @@ exports[`CircleBadge respects the variant prop 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  background-color: #ffffff;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
   border-radius: 50%;
-  box-shadow: 0 3px 6px rgba(140,149,159,0.15);
+  box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
   width: 128px;
   height: 128px;
 }
@@ -128,9 +128,9 @@ exports[`CircleBadge uses the size prop to override the variant prop 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  background-color: #ffffff;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
   border-radius: 50%;
-  box-shadow: 0 3px 6px rgba(140,149,159,0.15);
+  box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
   width: 20px;
   height: 20px;
 }
diff --git a/src/__tests__/__snapshots__/CircleOcticon.test.tsx.snap b/src/__tests__/__snapshots__/CircleOcticon.test.tsx.snap
index b71132c736d..028b8c7a247 100644
--- a/src/__tests__/__snapshots__/CircleOcticon.test.tsx.snap
+++ b/src/__tests__/__snapshots__/CircleOcticon.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`CircleOcticon renders consistently 1`] = `
   border-width: 0;
   border-radius: 50%;
   border-style: solid;
-  border-color: #d0d7de;
+  border-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c1 {
diff --git a/src/__tests__/__snapshots__/Dialog.test.tsx.snap b/src/__tests__/__snapshots__/Dialog.test.tsx.snap
index f3aaf3ab027..cc062963d90 100644
--- a/src/__tests__/__snapshots__/Dialog.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Dialog.test.tsx.snap
@@ -3,19 +3,19 @@
 exports[`Dialog Dialog.Header renders consistently 1`] = `
 .c0 {
   padding: 16px;
-  background-color: #f6f8fa;
+  background-color: var(--bgColor-muted,var(--color-canvas-subtle,#f6f8fa));
 }
 
 .c2 {
   font-size: 14px;
   font-weight: 600;
   font-family: sans-serif;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c1 {
   border-radius: 6px 6px 0px 0px;
-  border-bottom: 1px solid #d0d7de;
+  border-bottom: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -54,7 +54,7 @@ exports[`Dialog renders consistently 1`] = `
   content: ' ';
   background: transparent;
   z-index: 99;
-  background: rgba(31,35,40,0.5);
+  background: var(--overlay-backdrop-bgColor,var(--color-primer-fg-canvas-backdrop,rgba(31,35,40,0.5)));
 }
 
 @media (forced-colors:active) {
@@ -74,7 +74,7 @@ exports[`Dialog renders consistently 1`] = `
   />,
   .c2 {
   padding: 16px;
-  background-color: #f6f8fa;
+  background-color: var(--bgColor-muted,var(--color-canvas-subtle,#f6f8fa));
 }
 
 .c5 {
@@ -121,14 +121,14 @@ exports[`Dialog renders consistently 1`] = `
   transition: 80ms cubic-bezier(0.65,0,0.35,1);
   -webkit-transition-property: color,fill,background-color,border-color;
   transition-property: color,fill,background-color,border-color;
-  color: #24292f;
+  color: var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));
   background-color: transparent;
   box-shadow: none;
 }
 
 .c1:focus:not(:disabled) {
   box-shadow: none;
-  outline: 2px solid #0969da;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -2px;
 }
 
@@ -138,7 +138,7 @@ exports[`Dialog renders consistently 1`] = `
 
 .c1:focus-visible:not(:disabled) {
   box-shadow: none;
-  outline: 2px solid #0969da;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -2px;
 }
 
@@ -171,7 +171,7 @@ exports[`Dialog renders consistently 1`] = `
 .c1:disabled {
   cursor: not-allowed;
   box-shadow: none;
-  color: #8c959f;
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
 .c1:disabled [data-component=ButtonCounter],
@@ -236,9 +236,9 @@ exports[`Dialog renders consistently 1`] = `
 }
 
 .c1[data-inactive]:not([disabled]) {
-  background-color: var(--button-inactive-bgColor,#eaeef2);
-  border-color: var(--button-inactive-bgColor,#eaeef2);
-  color: var(--button-inactive-fgColor,#57606a);
+  background-color: var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));
+  border-color: var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));
+  color: var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));
 }
 
 .c1[data-inactive]:not([disabled]):focus-visible {
@@ -247,7 +247,7 @@ exports[`Dialog renders consistently 1`] = `
 
 .c1 [data-component="leadingVisual"] {
   grid-area: leadingVisual;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
 .c1 [data-component="text"] {
@@ -262,7 +262,7 @@ exports[`Dialog renders consistently 1`] = `
 
 .c1 [data-component="trailingAction"] {
   margin-right: -4px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
 .c1 [data-component="buttonContent"] {
@@ -286,34 +286,34 @@ exports[`Dialog renders consistently 1`] = `
 }
 
 .c1:hover:not([disabled]) {
-  background-color: rgba(208,215,222,0.32);
+  background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
 }
 
 .c1:active:not([disabled]) {
-  background-color: rgba(208,215,222,0.48);
+  background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
 }
 
 .c1[aria-expanded=true] {
-  background-color: rgba(208,215,222,0.24);
+  background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
 .c1[data-component="IconButton"][data-no-visuals] {
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
 .c1[data-no-visuals] {
-  color: #0969da;
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   position: absolute;
   top: 8px;
   right: 16px;
 }
 
 .c1:has([data-component="ButtonCounter"]) {
-  color: #24292f;
+  color: var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));
 }
 
 .c1:disabled[data-no-visuals] {
-  color: #8c959f;
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
 .c1:disabled[data-no-visuals] [data-component=ButtonCounter] {
@@ -324,7 +324,7 @@ exports[`Dialog renders consistently 1`] = `
   font-size: 14px;
   font-weight: 600;
   font-family: sans-serif;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c6 {
@@ -332,7 +332,7 @@ exports[`Dialog renders consistently 1`] = `
 }
 
 .c0 {
-  box-shadow: 0 8px 24px rgba(140,149,159,0.2);
+  box-shadow: var(--shadow-floating-large,var(--color-shadow-large,0 8px 24px rgba(140,149,159,0.2)));
   border-radius: 6px;
   position: fixed;
   top: 0;
@@ -343,14 +343,14 @@ exports[`Dialog renders consistently 1`] = `
   max-height: 80vh;
   z-index: 999;
   margin: 10vh auto;
-  background-color: #ffffff;
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
   width: 440px;
   outline: none;
 }
 
 .c3 {
   border-radius: 6px 6px 0px 0px;
-  border-bottom: 1px solid #d0d7de;
+  border-bottom: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
diff --git a/src/__tests__/__snapshots__/Header.test.tsx.snap b/src/__tests__/__snapshots__/Header.test.tsx.snap
index 6b9d2f71c46..05c638ad8a9 100644
--- a/src/__tests__/__snapshots__/Header.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Header.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`Header Header.Item renders consistently 1`] = `
 exports[`Header Header.Link renders consistently 1`] = `
 .c0 {
   font-weight: 600;
-  color: #ffffff;
+  color: var(--header-fgColor-logo,var(--color-header-logo,#ffffff));
   white-space: nowrap;
   cursor: pointer;
   -webkit-text-decoration: none;
@@ -44,7 +44,7 @@ exports[`Header Header.Link renders consistently 1`] = `
 
 .c0:hover,
 .c0:focus {
-  color: rgba(255,255,255,0.7);
+  color: var(--header-fgColor-default,var(--color-header-text,rgba(255,255,255,0.7)));
 }
 
 <a
@@ -62,8 +62,8 @@ exports[`Header renders consistently 1`] = `
   padding: 16px;
   font-size: 14px;
   line-height: 1.5;
-  color: rgba(255,255,255,0.7);
-  background-color: #24292f;
+  color: var(--header-fgColor-default,var(--color-header-text,rgba(255,255,255,0.7)));
+  background-color: var(--header-bgColor,var(--color-header-bg,#24292f));
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
diff --git a/src/__tests__/__snapshots__/Pagehead.test.tsx.snap b/src/__tests__/__snapshots__/Pagehead.test.tsx.snap
index ebfe2fecc34..edfc93ad6c5 100644
--- a/src/__tests__/__snapshots__/Pagehead.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Pagehead.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Pagehead renders consistently 1`] = `
   padding-top: 24px;
   padding-bottom: 24px;
   margin-bottom: 24px;
-  border-bottom: 1px solid #d0d7de;
+  border-bottom: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 <div
diff --git a/src/__tests__/__snapshots__/PointerBox.test.tsx.snap b/src/__tests__/__snapshots__/PointerBox.test.tsx.snap
index 5dcd6e36972..d08889712a2 100644
--- a/src/__tests__/__snapshots__/PointerBox.test.tsx.snap
+++ b/src/__tests__/__snapshots__/PointerBox.test.tsx.snap
@@ -2,13 +2,13 @@
 
 exports[`PointerBox applies the background color via "bg" prop for backwards compatibility 1`] = `
 .c0 {
-  background-color: #cf222e;
+  background-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
   border-width: 1px;
   border-style: solid;
-  border-color: #d0d7de;
+  border-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
   border-radius: 6px;
-  --custom-bg: #cf222e;
-  background-image: linear-gradient(var(--custom-bg),var(--custom-bg)),linear-gradient(#ffffff,#ffffff);
+  --custom-bg: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+  background-image: linear-gradient(var(--custom-bg),var(--custom-bg)),linear-gradient(var(--bgColor-default,var(--color-canvas-default,#ffffff)),var(--bgColor-default,var(--color-canvas-default,#ffffff)));
   position: relative;
 }
 
@@ -34,16 +34,16 @@ exports[`PointerBox applies the background color via "bg" prop for backwards com
     >
       <path
         d="M-8,0L0,8L8,0L-8,0Z"
-        fill="#ffffff"
+        fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
       />
       <path
         d="M-8,0L0,8L8,0L-8,0Z"
-        fill="#cf222e"
+        fill="var(--borderColor-danger-emphasis, var(--color-danger-emphasis, #cf222e))"
       />
       <path
         d="M-8,0L0,8L8,0"
         fill="none"
-        stroke="#d0d7de"
+        stroke="var(--borderColor-default, var(--color-border-default, #d0d7de))"
         strokeWidth="1px"
       />
     </g>
@@ -55,10 +55,10 @@ exports[`PointerBox applies the background color via sx prop 1`] = `
 .c0 {
   border-width: 1px;
   border-style: solid;
-  border-color: #d0d7de;
+  border-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
   border-radius: 6px;
-  --custom-bg: #cf222e;
-  background-image: linear-gradient(var(--custom-bg),var(--custom-bg)),linear-gradient(#ffffff,#ffffff);
+  --custom-bg: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
+  background-image: linear-gradient(var(--custom-bg),var(--custom-bg)),linear-gradient(var(--bgColor-default,var(--color-canvas-default,#ffffff)),var(--bgColor-default,var(--color-canvas-default,#ffffff)));
   position: relative;
 }
 
@@ -84,16 +84,16 @@ exports[`PointerBox applies the background color via sx prop 1`] = `
     >
       <path
         d="M-8,0L0,8L8,0L-8,0Z"
-        fill="#ffffff"
+        fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
       />
       <path
         d="M-8,0L0,8L8,0L-8,0Z"
-        fill="#cf222e"
+        fill="var(--borderColor-danger-emphasis, var(--color-danger-emphasis, #cf222e))"
       />
       <path
         d="M-8,0L0,8L8,0"
         fill="none"
-        stroke="#d0d7de"
+        stroke="var(--borderColor-default, var(--color-border-default, #d0d7de))"
         strokeWidth="1px"
       />
     </g>
@@ -105,7 +105,7 @@ exports[`PointerBox applies the border color via "borderColor" prop for backward
 .c0 {
   border-width: 1px;
   border-style: solid;
-  border-color: #cf222e;
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
   border-radius: 6px;
   position: relative;
 }
@@ -132,16 +132,16 @@ exports[`PointerBox applies the border color via "borderColor" prop for backward
     >
       <path
         d="M-8,0L0,8L8,0L-8,0Z"
-        fill="#ffffff"
+        fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
       />
       <path
         d="M-8,0L0,8L8,0L-8,0Z"
-        fill="#ffffff"
+        fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
       />
       <path
         d="M-8,0L0,8L8,0"
         fill="none"
-        stroke="#cf222e"
+        stroke="var(--borderColor-danger-emphasis, var(--color-danger-emphasis, #cf222e))"
         strokeWidth="1px"
       />
     </g>
@@ -153,9 +153,9 @@ exports[`PointerBox applies the border color via sx prop 1`] = `
 .c0 {
   border-width: 1px;
   border-style: solid;
-  border-color: #d0d7de;
+  border-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
   border-radius: 6px;
-  border-color: #cf222e;
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
   position: relative;
 }
 
@@ -181,16 +181,16 @@ exports[`PointerBox applies the border color via sx prop 1`] = `
     >
       <path
         d="M-8,0L0,8L8,0L-8,0Z"
-        fill="#ffffff"
+        fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
       />
       <path
         d="M-8,0L0,8L8,0L-8,0Z"
-        fill="#ffffff"
+        fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
       />
       <path
         d="M-8,0L0,8L8,0"
         fill="none"
-        stroke="#cf222e"
+        stroke="var(--borderColor-danger-emphasis, var(--color-danger-emphasis, #cf222e))"
         strokeWidth="1px"
       />
     </g>
@@ -202,7 +202,7 @@ exports[`PointerBox renders a <Caret> in <Box> with relative positioning 1`] = `
 .c0 {
   border-width: 1px;
   border-style: solid;
-  border-color: #d0d7de;
+  border-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
   border-radius: 6px;
   position: relative;
 }
@@ -229,16 +229,16 @@ exports[`PointerBox renders a <Caret> in <Box> with relative positioning 1`] = `
     >
       <path
         d="M-8,0L0,8L8,0L-8,0Z"
-        fill="#ffffff"
+        fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
       />
       <path
         d="M-8,0L0,8L8,0L-8,0Z"
-        fill="#ffffff"
+        fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
       />
       <path
         d="M-8,0L0,8L8,0"
         fill="none"
-        stroke="#d0d7de"
+        stroke="var(--borderColor-default, var(--color-border-default, #d0d7de))"
         strokeWidth="1px"
       />
     </g>
@@ -250,7 +250,7 @@ exports[`PointerBox renders consistently 1`] = `
 .c0 {
   border-width: 1px;
   border-style: solid;
-  border-color: #d0d7de;
+  border-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
   border-radius: 6px;
   position: relative;
 }
@@ -277,16 +277,16 @@ exports[`PointerBox renders consistently 1`] = `
     >
       <path
         d="M-8,0L0,8L8,0L-8,0Z"
-        fill="#ffffff"
+        fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
       />
       <path
         d="M-8,0L0,8L8,0L-8,0Z"
-        fill="#ffffff"
+        fill="var(--bgColor-default, var(--color-canvas-default, #ffffff))"
       />
       <path
         d="M-8,0L0,8L8,0"
         fill="none"
-        stroke="#d0d7de"
+        stroke="var(--borderColor-default, var(--color-border-default, #d0d7de))"
         strokeWidth="1px"
       />
     </g>
diff --git a/src/__tests__/__snapshots__/Popover.test.tsx.snap b/src/__tests__/__snapshots__/Popover.test.tsx.snap
index c524d5caae9..8890bf164b0 100644
--- a/src/__tests__/__snapshots__/Popover.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Popover.test.tsx.snap
@@ -8,14 +8,14 @@ exports[`Popover Popover.Content renders consistently 1`] = `
 }
 
 .c3 {
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
   border-radius: 6px;
   position: relative;
   width: 232px;
   margin-right: auto;
   margin-left: auto;
   padding: 24px;
-  background-color: #ffffff;
+  background-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c3::before,
@@ -30,14 +30,14 @@ exports[`Popover Popover.Content renders consistently 1`] = `
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
-  border-bottom-color: #d0d7de;
+  border-bottom-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c3::after {
   top: -14px;
   margin-left: -8px;
   border: 7px solid transparent;
-  border-bottom-color: #ffffff;
+  border-bottom-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--bottom .c2::before,
@@ -54,14 +54,14 @@ exports[`Popover Popover.Content renders consistently 1`] = `
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--bottom-left .c3::before {
   bottom: -16px;
-  border-top-color: #d0d7de;
+  border-top-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--bottom .c2::after,
 .c0.caret-pos--bottom-right .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
   bottom: -14px;
-  border-top-color: #ffffff;
+  border-top-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--top-right .c2,
@@ -147,28 +147,28 @@ exports[`Popover Popover.Content renders consistently 1`] = `
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before {
   right: -16px;
-  border-left-color: #d0d7de;
+  border-left-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--right .c2::after,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--right-bottom .c3::after {
   right: -14px;
-  border-left-color: #ffffff;
+  border-left-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--left .c2::before,
 .c0.caret-pos--left-top .c3::before,
 .c0.caret-pos--left-bottom .c3::before {
   left: -16px;
-  border-right-color: #d0d7de;
+  border-right-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--left .c2::after,
 .c0.caret-pos--left-top .c3::after,
 .c0.caret-pos--left-bottom .c3::after {
   left: -14px;
-  border-right-color: #ffffff;
+  border-right-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--right-top .c2::before,
@@ -215,14 +215,14 @@ exports[`Popover renders consistently 1`] = `
 }
 
 .c3 {
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
   border-radius: 6px;
   position: relative;
   width: 232px;
   margin-right: auto;
   margin-left: auto;
   padding: 24px;
-  background-color: #ffffff;
+  background-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c3::before,
@@ -237,14 +237,14 @@ exports[`Popover renders consistently 1`] = `
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
-  border-bottom-color: #d0d7de;
+  border-bottom-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c3::after {
   top: -14px;
   margin-left: -8px;
   border: 7px solid transparent;
-  border-bottom-color: #ffffff;
+  border-bottom-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--bottom .c2::before,
@@ -261,14 +261,14 @@ exports[`Popover renders consistently 1`] = `
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--bottom-left .c3::before {
   bottom: -16px;
-  border-top-color: #d0d7de;
+  border-top-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--bottom .c2::after,
 .c0.caret-pos--bottom-right .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
   bottom: -14px;
-  border-top-color: #ffffff;
+  border-top-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--top-right .c2,
@@ -354,28 +354,28 @@ exports[`Popover renders consistently 1`] = `
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before {
   right: -16px;
-  border-left-color: #d0d7de;
+  border-left-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--right .c2::after,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--right-bottom .c3::after {
   right: -14px;
-  border-left-color: #ffffff;
+  border-left-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--left .c2::before,
 .c0.caret-pos--left-top .c3::before,
 .c0.caret-pos--left-bottom .c3::before {
   left: -16px;
-  border-right-color: #d0d7de;
+  border-right-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--left .c2::after,
 .c0.caret-pos--left-top .c3::after,
 .c0.caret-pos--left-bottom .c3::after {
   left: -14px;
-  border-right-color: #ffffff;
+  border-right-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--right-top .c2::before,
@@ -422,14 +422,14 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = `
 }
 
 .c3 {
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
   border-radius: 6px;
   position: relative;
   width: 232px;
   margin-right: auto;
   margin-left: auto;
   padding: 24px;
-  background-color: #ffffff;
+  background-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c3::before,
@@ -444,14 +444,14 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = `
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
-  border-bottom-color: #d0d7de;
+  border-bottom-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c3::after {
   top: -14px;
   margin-left: -8px;
   border: 7px solid transparent;
-  border-bottom-color: #ffffff;
+  border-bottom-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--bottom .c2::before,
@@ -468,14 +468,14 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = `
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--bottom-left .c3::before {
   bottom: -16px;
-  border-top-color: #d0d7de;
+  border-top-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--bottom .c2::after,
 .c0.caret-pos--bottom-right .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
   bottom: -14px;
-  border-top-color: #ffffff;
+  border-top-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--top-right .c2,
@@ -561,28 +561,28 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = `
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before {
   right: -16px;
-  border-left-color: #d0d7de;
+  border-left-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--right .c2::after,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--right-bottom .c3::after {
   right: -14px;
-  border-left-color: #ffffff;
+  border-left-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--left .c2::before,
 .c0.caret-pos--left-top .c3::before,
 .c0.caret-pos--left-bottom .c3::before {
   left: -16px;
-  border-right-color: #d0d7de;
+  border-right-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--left .c2::after,
 .c0.caret-pos--left-top .c3::after,
 .c0.caret-pos--left-bottom .c3::after {
   left: -14px;
-  border-right-color: #ffffff;
+  border-right-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--right-top .c2::before,
@@ -629,14 +629,14 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = `
 }
 
 .c3 {
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
   border-radius: 6px;
   position: relative;
   width: 232px;
   margin-right: auto;
   margin-left: auto;
   padding: 24px;
-  background-color: #ffffff;
+  background-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c3::before,
@@ -651,14 +651,14 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = `
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
-  border-bottom-color: #d0d7de;
+  border-bottom-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c3::after {
   top: -14px;
   margin-left: -8px;
   border: 7px solid transparent;
-  border-bottom-color: #ffffff;
+  border-bottom-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--bottom .c2::before,
@@ -675,14 +675,14 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = `
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--bottom-left .c3::before {
   bottom: -16px;
-  border-top-color: #d0d7de;
+  border-top-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--bottom .c2::after,
 .c0.caret-pos--bottom-right .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
   bottom: -14px;
-  border-top-color: #ffffff;
+  border-top-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--top-right .c2,
@@ -768,28 +768,28 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = `
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before {
   right: -16px;
-  border-left-color: #d0d7de;
+  border-left-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--right .c2::after,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--right-bottom .c3::after {
   right: -14px;
-  border-left-color: #ffffff;
+  border-left-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--left .c2::before,
 .c0.caret-pos--left-top .c3::before,
 .c0.caret-pos--left-bottom .c3::before {
   left: -16px;
-  border-right-color: #d0d7de;
+  border-right-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--left .c2::after,
 .c0.caret-pos--left-top .c3::after,
 .c0.caret-pos--left-bottom .c3::after {
   left: -14px;
-  border-right-color: #ffffff;
+  border-right-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--right-top .c2::before,
@@ -836,14 +836,14 @@ exports[`Popover renders correctly for a caret position of bottom-right 1`] = `
 }
 
 .c3 {
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
   border-radius: 6px;
   position: relative;
   width: 232px;
   margin-right: auto;
   margin-left: auto;
   padding: 24px;
-  background-color: #ffffff;
+  background-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c3::before,
@@ -858,14 +858,14 @@ exports[`Popover renders correctly for a caret position of bottom-right 1`] = `
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
-  border-bottom-color: #d0d7de;
+  border-bottom-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c3::after {
   top: -14px;
   margin-left: -8px;
   border: 7px solid transparent;
-  border-bottom-color: #ffffff;
+  border-bottom-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--bottom .c2::before,
@@ -882,14 +882,14 @@ exports[`Popover renders correctly for a caret position of bottom-right 1`] = `
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--bottom-left .c3::before {
   bottom: -16px;
-  border-top-color: #d0d7de;
+  border-top-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--bottom .c2::after,
 .c0.caret-pos--bottom-right .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
   bottom: -14px;
-  border-top-color: #ffffff;
+  border-top-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--top-right .c2,
@@ -975,28 +975,28 @@ exports[`Popover renders correctly for a caret position of bottom-right 1`] = `
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before {
   right: -16px;
-  border-left-color: #d0d7de;
+  border-left-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--right .c2::after,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--right-bottom .c3::after {
   right: -14px;
-  border-left-color: #ffffff;
+  border-left-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--left .c2::before,
 .c0.caret-pos--left-top .c3::before,
 .c0.caret-pos--left-bottom .c3::before {
   left: -16px;
-  border-right-color: #d0d7de;
+  border-right-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--left .c2::after,
 .c0.caret-pos--left-top .c3::after,
 .c0.caret-pos--left-bottom .c3::after {
   left: -14px;
-  border-right-color: #ffffff;
+  border-right-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--right-top .c2::before,
@@ -1043,14 +1043,14 @@ exports[`Popover renders correctly for a caret position of left 1`] = `
 }
 
 .c3 {
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
   border-radius: 6px;
   position: relative;
   width: 232px;
   margin-right: auto;
   margin-left: auto;
   padding: 24px;
-  background-color: #ffffff;
+  background-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c3::before,
@@ -1065,14 +1065,14 @@ exports[`Popover renders correctly for a caret position of left 1`] = `
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
-  border-bottom-color: #d0d7de;
+  border-bottom-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c3::after {
   top: -14px;
   margin-left: -8px;
   border: 7px solid transparent;
-  border-bottom-color: #ffffff;
+  border-bottom-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--bottom .c2::before,
@@ -1089,14 +1089,14 @@ exports[`Popover renders correctly for a caret position of left 1`] = `
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--bottom-left .c3::before {
   bottom: -16px;
-  border-top-color: #d0d7de;
+  border-top-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--bottom .c2::after,
 .c0.caret-pos--bottom-right .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
   bottom: -14px;
-  border-top-color: #ffffff;
+  border-top-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--top-right .c2,
@@ -1182,28 +1182,28 @@ exports[`Popover renders correctly for a caret position of left 1`] = `
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before {
   right: -16px;
-  border-left-color: #d0d7de;
+  border-left-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--right .c2::after,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--right-bottom .c3::after {
   right: -14px;
-  border-left-color: #ffffff;
+  border-left-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--left .c2::before,
 .c0.caret-pos--left-top .c3::before,
 .c0.caret-pos--left-bottom .c3::before {
   left: -16px;
-  border-right-color: #d0d7de;
+  border-right-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--left .c2::after,
 .c0.caret-pos--left-top .c3::after,
 .c0.caret-pos--left-bottom .c3::after {
   left: -14px;
-  border-right-color: #ffffff;
+  border-right-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--right-top .c2::before,
@@ -1250,14 +1250,14 @@ exports[`Popover renders correctly for a caret position of left-bottom 1`] = `
 }
 
 .c3 {
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
   border-radius: 6px;
   position: relative;
   width: 232px;
   margin-right: auto;
   margin-left: auto;
   padding: 24px;
-  background-color: #ffffff;
+  background-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c3::before,
@@ -1272,14 +1272,14 @@ exports[`Popover renders correctly for a caret position of left-bottom 1`] = `
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
-  border-bottom-color: #d0d7de;
+  border-bottom-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c3::after {
   top: -14px;
   margin-left: -8px;
   border: 7px solid transparent;
-  border-bottom-color: #ffffff;
+  border-bottom-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--bottom .c2::before,
@@ -1296,14 +1296,14 @@ exports[`Popover renders correctly for a caret position of left-bottom 1`] = `
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--bottom-left .c3::before {
   bottom: -16px;
-  border-top-color: #d0d7de;
+  border-top-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--bottom .c2::after,
 .c0.caret-pos--bottom-right .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
   bottom: -14px;
-  border-top-color: #ffffff;
+  border-top-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--top-right .c2,
@@ -1389,28 +1389,28 @@ exports[`Popover renders correctly for a caret position of left-bottom 1`] = `
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before {
   right: -16px;
-  border-left-color: #d0d7de;
+  border-left-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--right .c2::after,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--right-bottom .c3::after {
   right: -14px;
-  border-left-color: #ffffff;
+  border-left-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--left .c2::before,
 .c0.caret-pos--left-top .c3::before,
 .c0.caret-pos--left-bottom .c3::before {
   left: -16px;
-  border-right-color: #d0d7de;
+  border-right-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--left .c2::after,
 .c0.caret-pos--left-top .c3::after,
 .c0.caret-pos--left-bottom .c3::after {
   left: -14px;
-  border-right-color: #ffffff;
+  border-right-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--right-top .c2::before,
@@ -1457,14 +1457,14 @@ exports[`Popover renders correctly for a caret position of left-top 1`] = `
 }
 
 .c3 {
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
   border-radius: 6px;
   position: relative;
   width: 232px;
   margin-right: auto;
   margin-left: auto;
   padding: 24px;
-  background-color: #ffffff;
+  background-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c3::before,
@@ -1479,14 +1479,14 @@ exports[`Popover renders correctly for a caret position of left-top 1`] = `
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
-  border-bottom-color: #d0d7de;
+  border-bottom-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c3::after {
   top: -14px;
   margin-left: -8px;
   border: 7px solid transparent;
-  border-bottom-color: #ffffff;
+  border-bottom-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--bottom .c2::before,
@@ -1503,14 +1503,14 @@ exports[`Popover renders correctly for a caret position of left-top 1`] = `
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--bottom-left .c3::before {
   bottom: -16px;
-  border-top-color: #d0d7de;
+  border-top-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--bottom .c2::after,
 .c0.caret-pos--bottom-right .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
   bottom: -14px;
-  border-top-color: #ffffff;
+  border-top-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--top-right .c2,
@@ -1596,28 +1596,28 @@ exports[`Popover renders correctly for a caret position of left-top 1`] = `
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before {
   right: -16px;
-  border-left-color: #d0d7de;
+  border-left-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--right .c2::after,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--right-bottom .c3::after {
   right: -14px;
-  border-left-color: #ffffff;
+  border-left-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--left .c2::before,
 .c0.caret-pos--left-top .c3::before,
 .c0.caret-pos--left-bottom .c3::before {
   left: -16px;
-  border-right-color: #d0d7de;
+  border-right-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--left .c2::after,
 .c0.caret-pos--left-top .c3::after,
 .c0.caret-pos--left-bottom .c3::after {
   left: -14px;
-  border-right-color: #ffffff;
+  border-right-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--right-top .c2::before,
@@ -1664,14 +1664,14 @@ exports[`Popover renders correctly for a caret position of right 1`] = `
 }
 
 .c3 {
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
   border-radius: 6px;
   position: relative;
   width: 232px;
   margin-right: auto;
   margin-left: auto;
   padding: 24px;
-  background-color: #ffffff;
+  background-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c3::before,
@@ -1686,14 +1686,14 @@ exports[`Popover renders correctly for a caret position of right 1`] = `
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
-  border-bottom-color: #d0d7de;
+  border-bottom-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c3::after {
   top: -14px;
   margin-left: -8px;
   border: 7px solid transparent;
-  border-bottom-color: #ffffff;
+  border-bottom-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--bottom .c2::before,
@@ -1710,14 +1710,14 @@ exports[`Popover renders correctly for a caret position of right 1`] = `
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--bottom-left .c3::before {
   bottom: -16px;
-  border-top-color: #d0d7de;
+  border-top-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--bottom .c2::after,
 .c0.caret-pos--bottom-right .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
   bottom: -14px;
-  border-top-color: #ffffff;
+  border-top-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--top-right .c2,
@@ -1803,28 +1803,28 @@ exports[`Popover renders correctly for a caret position of right 1`] = `
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before {
   right: -16px;
-  border-left-color: #d0d7de;
+  border-left-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--right .c2::after,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--right-bottom .c3::after {
   right: -14px;
-  border-left-color: #ffffff;
+  border-left-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--left .c2::before,
 .c0.caret-pos--left-top .c3::before,
 .c0.caret-pos--left-bottom .c3::before {
   left: -16px;
-  border-right-color: #d0d7de;
+  border-right-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--left .c2::after,
 .c0.caret-pos--left-top .c3::after,
 .c0.caret-pos--left-bottom .c3::after {
   left: -14px;
-  border-right-color: #ffffff;
+  border-right-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--right-top .c2::before,
@@ -1871,14 +1871,14 @@ exports[`Popover renders correctly for a caret position of right-bottom 1`] = `
 }
 
 .c3 {
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
   border-radius: 6px;
   position: relative;
   width: 232px;
   margin-right: auto;
   margin-left: auto;
   padding: 24px;
-  background-color: #ffffff;
+  background-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c3::before,
@@ -1893,14 +1893,14 @@ exports[`Popover renders correctly for a caret position of right-bottom 1`] = `
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
-  border-bottom-color: #d0d7de;
+  border-bottom-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c3::after {
   top: -14px;
   margin-left: -8px;
   border: 7px solid transparent;
-  border-bottom-color: #ffffff;
+  border-bottom-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--bottom .c2::before,
@@ -1917,14 +1917,14 @@ exports[`Popover renders correctly for a caret position of right-bottom 1`] = `
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--bottom-left .c3::before {
   bottom: -16px;
-  border-top-color: #d0d7de;
+  border-top-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--bottom .c2::after,
 .c0.caret-pos--bottom-right .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
   bottom: -14px;
-  border-top-color: #ffffff;
+  border-top-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--top-right .c2,
@@ -2010,28 +2010,28 @@ exports[`Popover renders correctly for a caret position of right-bottom 1`] = `
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before {
   right: -16px;
-  border-left-color: #d0d7de;
+  border-left-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--right .c2::after,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--right-bottom .c3::after {
   right: -14px;
-  border-left-color: #ffffff;
+  border-left-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--left .c2::before,
 .c0.caret-pos--left-top .c3::before,
 .c0.caret-pos--left-bottom .c3::before {
   left: -16px;
-  border-right-color: #d0d7de;
+  border-right-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--left .c2::after,
 .c0.caret-pos--left-top .c3::after,
 .c0.caret-pos--left-bottom .c3::after {
   left: -14px;
-  border-right-color: #ffffff;
+  border-right-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--right-top .c2::before,
@@ -2078,14 +2078,14 @@ exports[`Popover renders correctly for a caret position of right-top 1`] = `
 }
 
 .c3 {
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
   border-radius: 6px;
   position: relative;
   width: 232px;
   margin-right: auto;
   margin-left: auto;
   padding: 24px;
-  background-color: #ffffff;
+  background-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c3::before,
@@ -2100,14 +2100,14 @@ exports[`Popover renders correctly for a caret position of right-top 1`] = `
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
-  border-bottom-color: #d0d7de;
+  border-bottom-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c3::after {
   top: -14px;
   margin-left: -8px;
   border: 7px solid transparent;
-  border-bottom-color: #ffffff;
+  border-bottom-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--bottom .c2::before,
@@ -2124,14 +2124,14 @@ exports[`Popover renders correctly for a caret position of right-top 1`] = `
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--bottom-left .c3::before {
   bottom: -16px;
-  border-top-color: #d0d7de;
+  border-top-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--bottom .c2::after,
 .c0.caret-pos--bottom-right .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
   bottom: -14px;
-  border-top-color: #ffffff;
+  border-top-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--top-right .c2,
@@ -2217,28 +2217,28 @@ exports[`Popover renders correctly for a caret position of right-top 1`] = `
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before {
   right: -16px;
-  border-left-color: #d0d7de;
+  border-left-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--right .c2::after,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--right-bottom .c3::after {
   right: -14px;
-  border-left-color: #ffffff;
+  border-left-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--left .c2::before,
 .c0.caret-pos--left-top .c3::before,
 .c0.caret-pos--left-bottom .c3::before {
   left: -16px;
-  border-right-color: #d0d7de;
+  border-right-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--left .c2::after,
 .c0.caret-pos--left-top .c3::after,
 .c0.caret-pos--left-bottom .c3::after {
   left: -14px;
-  border-right-color: #ffffff;
+  border-right-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--right-top .c2::before,
@@ -2285,14 +2285,14 @@ exports[`Popover renders correctly for a caret position of top 1`] = `
 }
 
 .c3 {
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
   border-radius: 6px;
   position: relative;
   width: 232px;
   margin-right: auto;
   margin-left: auto;
   padding: 24px;
-  background-color: #ffffff;
+  background-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c3::before,
@@ -2307,14 +2307,14 @@ exports[`Popover renders correctly for a caret position of top 1`] = `
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
-  border-bottom-color: #d0d7de;
+  border-bottom-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c3::after {
   top: -14px;
   margin-left: -8px;
   border: 7px solid transparent;
-  border-bottom-color: #ffffff;
+  border-bottom-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--bottom .c2::before,
@@ -2331,14 +2331,14 @@ exports[`Popover renders correctly for a caret position of top 1`] = `
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--bottom-left .c3::before {
   bottom: -16px;
-  border-top-color: #d0d7de;
+  border-top-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--bottom .c2::after,
 .c0.caret-pos--bottom-right .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
   bottom: -14px;
-  border-top-color: #ffffff;
+  border-top-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--top-right .c2,
@@ -2424,28 +2424,28 @@ exports[`Popover renders correctly for a caret position of top 1`] = `
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before {
   right: -16px;
-  border-left-color: #d0d7de;
+  border-left-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--right .c2::after,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--right-bottom .c3::after {
   right: -14px;
-  border-left-color: #ffffff;
+  border-left-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--left .c2::before,
 .c0.caret-pos--left-top .c3::before,
 .c0.caret-pos--left-bottom .c3::before {
   left: -16px;
-  border-right-color: #d0d7de;
+  border-right-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--left .c2::after,
 .c0.caret-pos--left-top .c3::after,
 .c0.caret-pos--left-bottom .c3::after {
   left: -14px;
-  border-right-color: #ffffff;
+  border-right-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--right-top .c2::before,
@@ -2492,14 +2492,14 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = `
 }
 
 .c3 {
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
   border-radius: 6px;
   position: relative;
   width: 232px;
   margin-right: auto;
   margin-left: auto;
   padding: 24px;
-  background-color: #ffffff;
+  background-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c3::before,
@@ -2514,14 +2514,14 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = `
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
-  border-bottom-color: #d0d7de;
+  border-bottom-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c3::after {
   top: -14px;
   margin-left: -8px;
   border: 7px solid transparent;
-  border-bottom-color: #ffffff;
+  border-bottom-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--bottom .c2::before,
@@ -2538,14 +2538,14 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = `
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--bottom-left .c3::before {
   bottom: -16px;
-  border-top-color: #d0d7de;
+  border-top-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--bottom .c2::after,
 .c0.caret-pos--bottom-right .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
   bottom: -14px;
-  border-top-color: #ffffff;
+  border-top-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--top-right .c2,
@@ -2631,28 +2631,28 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = `
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before {
   right: -16px;
-  border-left-color: #d0d7de;
+  border-left-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--right .c2::after,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--right-bottom .c3::after {
   right: -14px;
-  border-left-color: #ffffff;
+  border-left-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--left .c2::before,
 .c0.caret-pos--left-top .c3::before,
 .c0.caret-pos--left-bottom .c3::before {
   left: -16px;
-  border-right-color: #d0d7de;
+  border-right-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--left .c2::after,
 .c0.caret-pos--left-top .c3::after,
 .c0.caret-pos--left-bottom .c3::after {
   left: -14px;
-  border-right-color: #ffffff;
+  border-right-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--right-top .c2::before,
@@ -2699,14 +2699,14 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = `
 }
 
 .c3 {
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
   border-radius: 6px;
   position: relative;
   width: 232px;
   margin-right: auto;
   margin-left: auto;
   padding: 24px;
-  background-color: #ffffff;
+  background-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c3::before,
@@ -2721,14 +2721,14 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = `
   top: -16px;
   margin-left: -9px;
   border: 8px solid transparent;
-  border-bottom-color: #d0d7de;
+  border-bottom-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c3::after {
   top: -14px;
   margin-left: -8px;
   border: 7px solid transparent;
-  border-bottom-color: #ffffff;
+  border-bottom-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--bottom .c2::before,
@@ -2745,14 +2745,14 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = `
 .c0.caret-pos--bottom-right .c3::before,
 .c0.caret-pos--bottom-left .c3::before {
   bottom: -16px;
-  border-top-color: #d0d7de;
+  border-top-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--bottom .c2::after,
 .c0.caret-pos--bottom-right .c3::after,
 .c0.caret-pos--bottom-left .c3::after {
   bottom: -14px;
-  border-top-color: #ffffff;
+  border-top-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--top-right .c2,
@@ -2838,28 +2838,28 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = `
 .c0.caret-pos--right-top .c3::before,
 .c0.caret-pos--right-bottom .c3::before {
   right: -16px;
-  border-left-color: #d0d7de;
+  border-left-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--right .c2::after,
 .c0.caret-pos--right-top .c3::after,
 .c0.caret-pos--right-bottom .c3::after {
   right: -14px;
-  border-left-color: #ffffff;
+  border-left-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--left .c2::before,
 .c0.caret-pos--left-top .c3::before,
 .c0.caret-pos--left-bottom .c3::before {
   left: -16px;
-  border-right-color: #d0d7de;
+  border-right-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0.caret-pos--left .c2::after,
 .c0.caret-pos--left-top .c3::after,
 .c0.caret-pos--left-bottom .c3::after {
   left: -14px;
-  border-right-color: #ffffff;
+  border-right-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
 }
 
 .c0.caret-pos--right-top .c2::before,
diff --git a/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap b/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap
index 7e516f82971..d08b58c5a36 100644
--- a/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap
@@ -3,8 +3,8 @@
 exports[`ProgressBar renders consistently 1`] = `
 .c1 {
   width: 0;
-  background-color: #1f883d;
-  background-color: #1f883d;
+  background-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  background-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0 {
@@ -13,7 +13,7 @@ exports[`ProgressBar renders consistently 1`] = `
   display: -ms-flexbox;
   display: flex;
   overflow: hidden;
-  background-color: #d0d7de;
+  background-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
   border-radius: 3px;
   height: 8px;
 }
@@ -49,8 +49,8 @@ exports[`ProgressBar renders consistently 1`] = `
 exports[`ProgressBar respects the "progress" prop 1`] = `
 .c1 {
   width: 80%;
-  background-color: #1f883d;
-  background-color: #1f883d;
+  background-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
+  background-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
 }
 
 .c0 {
@@ -59,7 +59,7 @@ exports[`ProgressBar respects the "progress" prop 1`] = `
   display: -ms-flexbox;
   display: flex;
   overflow: hidden;
-  background-color: #d0d7de;
+  background-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
   border-radius: 3px;
   height: 8px;
 }
diff --git a/src/__tests__/__snapshots__/Radio.test.tsx.snap b/src/__tests__/__snapshots__/Radio.test.tsx.snap
index caad863c07d..f755111be63 100644
--- a/src/__tests__/__snapshots__/Radio.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Radio.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Radio renders consistently 1`] = `
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  border-color: #6e7781;
+  border-color: var(--bgColor-neutral-emphasis,var(--color-neutral-emphasis,#6e7781));
   border-style: solid;
   border-width: 1px;
   cursor: pointer;
@@ -23,22 +23,22 @@ exports[`Radio renders consistently 1`] = `
 
 .c0:disabled {
   background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
-  border-color: #d0d7de;
+  border-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0:checked {
-  border-color: #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   border-width: var(--base-size-4,4px);
 }
 
 .c0:checked:disabled {
   cursor: not-allowed;
-  border-color: #656d76;
+  border-color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
 .c0:focus:not(:disabled) {
   box-shadow: none;
-  outline: 2px solid #0969da;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: 2px;
 }
 
@@ -48,7 +48,7 @@ exports[`Radio renders consistently 1`] = `
 
 .c0:focus-visible:not(:disabled) {
   box-shadow: none;
-  outline: 2px solid #0969da;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: 2px;
 }
 
diff --git a/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap b/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap
index eb0359a1367..8fbe5bbc2a4 100644
--- a/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap
+++ b/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`RadioGroup renders consistently 1`] = `
   font-weight: 600;
   font-size: 14px;
   display: block;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   cursor: pointer;
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
@@ -72,7 +72,7 @@ exports[`RadioGroup renders consistently 1`] = `
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  border-color: #6e7781;
+  border-color: var(--bgColor-neutral-emphasis,var(--color-neutral-emphasis,#6e7781));
   border-style: solid;
   border-width: 1px;
   cursor: pointer;
@@ -90,22 +90,22 @@ exports[`RadioGroup renders consistently 1`] = `
 
 .c6:disabled {
   background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
-  border-color: #d0d7de;
+  border-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c6:checked {
-  border-color: #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   border-width: var(--base-size-4,4px);
 }
 
 .c6:checked:disabled {
   cursor: not-allowed;
-  border-color: #656d76;
+  border-color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
 .c6:focus:not(:disabled) {
   box-shadow: none;
-  outline: 2px solid #0969da;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: 2px;
 }
 
@@ -115,7 +115,7 @@ exports[`RadioGroup renders consistently 1`] = `
 
 .c6:focus-visible:not(:disabled) {
   box-shadow: none;
-  outline: 2px solid #0969da;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: 2px;
 }
 
diff --git a/src/__tests__/__snapshots__/SideNav.test.tsx.snap b/src/__tests__/__snapshots__/SideNav.test.tsx.snap
index 3035d022ad4..c2c664a7aa8 100644
--- a/src/__tests__/__snapshots__/SideNav.test.tsx.snap
+++ b/src/__tests__/__snapshots__/SideNav.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`SideNav SideNav.Link renders consistently 1`] = `
 .c1 {
-  color: #0969da;
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -51,12 +51,12 @@ exports[`SideNav renders consistently 1`] = `
 .c0 {
   border-width: 0;
   border-style: solid;
-  border-color: #d0d7de;
+  border-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
   border-radius: 6px;
 }
 
 .c1 {
-  background-color: #f6f8fa;
+  background-color: var(--bgColor-muted,var(--color-canvas-subtle,#f6f8fa));
 }
 
 <nav
diff --git a/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap b/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap
index f71727364e0..1450491d029 100644
--- a/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap
+++ b/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap
@@ -8,13 +8,13 @@ exports[`SubNav.Link renders consistently 1`] = `
   font-size: 14px;
   line-height: 20px;
   min-height: 34px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   text-align: center;
   -webkit-text-decoration: none;
   text-decoration: none;
-  border-top: 1px solid #d0d7de;
-  border-bottom: 1px solid #d0d7de;
-  border-right: 1px solid #d0d7de;
+  border-top: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
+  border-bottom: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
+  border-right: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -28,7 +28,7 @@ exports[`SubNav.Link renders consistently 1`] = `
 .c0:first-of-type {
   border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;
-  border-left: 1px solid #d0d7de;
+  border-left: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0:last-of-type {
@@ -40,24 +40,24 @@ exports[`SubNav.Link renders consistently 1`] = `
 .c0:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #f6f8fa;
+  background-color: var(--bgColor-muted,var(--color-canvas-subtle,#f6f8fa));
   -webkit-transition: background-color 0.2s ease;
   transition: background-color 0.2s ease;
 }
 
 .c0:hover .SubNav-octicon,
 .c0:focus .SubNav-octicon {
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
 .c0.selected {
-  color: #ffffff;
-  background-color: #0969da;
-  border-color: #0969da;
+  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
+  background-color: var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
+  border-color: var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
 }
 
 .c0.selected .SubNav-octicon {
-  color: #ffffff;
+  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
 }
 
 <a
@@ -73,13 +73,13 @@ exports[`SubNav.Link respects the "selected" prop 1`] = `
   font-size: 14px;
   line-height: 20px;
   min-height: 34px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   text-align: center;
   -webkit-text-decoration: none;
   text-decoration: none;
-  border-top: 1px solid #d0d7de;
-  border-bottom: 1px solid #d0d7de;
-  border-right: 1px solid #d0d7de;
+  border-top: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
+  border-bottom: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
+  border-right: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -93,7 +93,7 @@ exports[`SubNav.Link respects the "selected" prop 1`] = `
 .c0:first-of-type {
   border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;
-  border-left: 1px solid #d0d7de;
+  border-left: 1px solid var(--borderColor-default,var(--color-border-default,#d0d7de));
 }
 
 .c0:last-of-type {
@@ -105,24 +105,24 @@ exports[`SubNav.Link respects the "selected" prop 1`] = `
 .c0:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #f6f8fa;
+  background-color: var(--bgColor-muted,var(--color-canvas-subtle,#f6f8fa));
   -webkit-transition: background-color 0.2s ease;
   transition: background-color 0.2s ease;
 }
 
 .c0:hover .SubNav-octicon,
 .c0:focus .SubNav-octicon {
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
 .c0.selected {
-  color: #ffffff;
-  background-color: #0969da;
-  border-color: #0969da;
+  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
+  background-color: var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
+  border-color: var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
 }
 
 .c0.selected .SubNav-octicon {
-  color: #ffffff;
+  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
 }
 
 <a
diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 0df3975bf7b..52701952b9a 100644
--- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -4,13 +4,13 @@ exports[`TextInput renders 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -33,24 +33,24 @@ exports[`TextInput renders 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -74,7 +74,7 @@ exports[`TextInput renders 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -126,13 +126,13 @@ exports[`TextInput renders block 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -163,24 +163,24 @@ exports[`TextInput renders block 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -204,7 +204,7 @@ exports[`TextInput renders block 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -256,13 +256,13 @@ exports[`TextInput renders consistently 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -285,24 +285,24 @@ exports[`TextInput renders consistently 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -326,7 +326,7 @@ exports[`TextInput renders consistently 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -377,13 +377,13 @@ exports[`TextInput renders contrast 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -394,7 +394,7 @@ exports[`TextInput renders contrast 1`] = `
   align-items: stretch;
   min-height: 32px;
   overflow: hidden;
-  background-color: #f6f8fa;
+  background-color: var(--bgColor-inset,var(--color-canvas-inset,#f6f8fa));
 }
 
 .c0 input,
@@ -407,24 +407,24 @@ exports[`TextInput renders contrast 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -448,7 +448,7 @@ exports[`TextInput renders contrast 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -500,13 +500,13 @@ exports[`TextInput renders error 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -517,7 +517,7 @@ exports[`TextInput renders error 1`] = `
   align-items: stretch;
   min-height: 32px;
   overflow: hidden;
-  border-color: #cf222e;
+  border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e));
 }
 
 .c0 input,
@@ -530,24 +530,24 @@ exports[`TextInput renders error 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -556,8 +556,8 @@ exports[`TextInput renders error 1`] = `
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -577,7 +577,7 @@ exports[`TextInput renders error 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -629,13 +629,13 @@ exports[`TextInput renders large 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -664,24 +664,24 @@ exports[`TextInput renders large 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -705,7 +705,7 @@ exports[`TextInput renders large 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -758,13 +758,13 @@ exports[`TextInput renders leadingVisual 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -787,24 +787,24 @@ exports[`TextInput renders leadingVisual 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -828,7 +828,7 @@ exports[`TextInput renders leadingVisual 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -907,13 +907,13 @@ exports[`TextInput renders leadingVisual 2`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -936,24 +936,24 @@ exports[`TextInput renders leadingVisual 2`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -977,7 +977,7 @@ exports[`TextInput renders leadingVisual 2`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -1056,13 +1056,13 @@ exports[`TextInput renders leadingVisual 3`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1085,24 +1085,24 @@ exports[`TextInput renders leadingVisual 3`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -1126,7 +1126,7 @@ exports[`TextInput renders leadingVisual 3`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -1186,13 +1186,13 @@ exports[`TextInput renders leadingVisual 4`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1215,24 +1215,24 @@ exports[`TextInput renders leadingVisual 4`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -1256,7 +1256,7 @@ exports[`TextInput renders leadingVisual 4`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -1316,13 +1316,13 @@ exports[`TextInput renders monospace 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1346,24 +1346,24 @@ exports[`TextInput renders monospace 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -1387,7 +1387,7 @@ exports[`TextInput renders monospace 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -1439,13 +1439,13 @@ exports[`TextInput renders placeholder 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1468,24 +1468,24 @@ exports[`TextInput renders placeholder 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -1509,7 +1509,7 @@ exports[`TextInput renders placeholder 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -1562,13 +1562,13 @@ exports[`TextInput renders small 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1599,24 +1599,24 @@ exports[`TextInput renders small 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -1640,7 +1640,7 @@ exports[`TextInput renders small 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -1736,14 +1736,14 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   transition: 80ms cubic-bezier(0.65,0,0.35,1);
   -webkit-transition-property: color,fill,background-color,border-color;
   transition-property: color,fill,background-color,border-color;
-  color: #24292f;
+  color: var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));
   background-color: transparent;
   box-shadow: none;
 }
 
 .c5:focus:not(:disabled) {
   box-shadow: none;
-  outline: 2px solid #0969da;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -2px;
 }
 
@@ -1753,7 +1753,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 
 .c5:focus-visible:not(:disabled) {
   box-shadow: none;
-  outline: 2px solid #0969da;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -2px;
 }
 
@@ -1786,7 +1786,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 .c5:disabled {
   cursor: not-allowed;
   box-shadow: none;
-  color: #8c959f;
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
 .c5:disabled [data-component=ButtonCounter],
@@ -1851,9 +1851,9 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 }
 
 .c5[data-inactive]:not([disabled]) {
-  background-color: var(--button-inactive-bgColor,#eaeef2);
-  border-color: var(--button-inactive-bgColor,#eaeef2);
-  color: var(--button-inactive-fgColor,#57606a);
+  background-color: var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));
+  border-color: var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));
+  color: var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));
 }
 
 .c5[data-inactive]:not([disabled]):focus-visible {
@@ -1862,7 +1862,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 
 .c5 [data-component="leadingVisual"] {
   grid-area: leadingVisual;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
 .c5 [data-component="text"] {
@@ -1877,7 +1877,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 
 .c5 [data-component="trailingAction"] {
   margin-right: -4px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
 .c5 [data-component="buttonContent"] {
@@ -1901,31 +1901,31 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 }
 
 .c5:hover:not([disabled]) {
-  background-color: rgba(208,215,222,0.32);
+  background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
 }
 
 .c5:active:not([disabled]) {
-  background-color: rgba(208,215,222,0.48);
+  background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
 }
 
 .c5[aria-expanded=true] {
-  background-color: rgba(208,215,222,0.24);
+  background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
 .c5[data-component="IconButton"][data-no-visuals] {
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
 .c5[data-no-visuals] {
-  color: #0969da;
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
 }
 
 .c5:has([data-component="ButtonCounter"]) {
-  color: #24292f;
+  color: var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));
 }
 
 .c5:disabled[data-no-visuals] {
-  color: #8c959f;
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
 .c5:disabled[data-no-visuals] [data-component=ButtonCounter] {
@@ -1948,13 +1948,13 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1977,19 +1977,19 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0 > textarea {
@@ -2012,7 +2012,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -2035,7 +2035,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   display: none;
   width: 0px;
   height: 0px;
-  color: #24292f;
+  color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
   pointer-events: none;
   content: '';
   border: 6px solid transparent;
@@ -2049,7 +2049,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   padding: 0.5em 0.75em;
   font: normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   -webkit-font-smoothing: subpixel-antialiased;
-  color: #ffffff;
+  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
   text-align: center;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -2063,7 +2063,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   white-space: pre;
   pointer-events: none;
   content: attr(aria-label);
-  background: #24292f;
+  background: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
   border-radius: 3px;
   opacity: 0;
 }
@@ -2125,7 +2125,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   right: 50%;
   bottom: -7px;
   margin-right: -6px;
-  border-bottom-color: #24292f;
+  border-bottom-color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
 }
 
 .c4.tooltipped-se::after {
@@ -2153,7 +2153,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   right: 50%;
   bottom: auto;
   margin-right: -6px;
-  border-top-color: #24292f;
+  border-top-color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
 }
 
 .c4.tooltipped-ne::after {
@@ -2187,7 +2187,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   bottom: 50%;
   left: -7px;
   margin-top: -6px;
-  border-left-color: #24292f;
+  border-left-color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
 }
 
 .c4.tooltipped-e::after {
@@ -2204,7 +2204,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   right: -7px;
   bottom: 50%;
   margin-top: -6px;
-  border-right-color: #24292f;
+  border-right-color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
 }
 
 .c4.tooltipped-multiline::after {
@@ -2403,14 +2403,14 @@ exports[`TextInput renders trailingAction text button 1`] = `
   transition: 80ms cubic-bezier(0.65,0,0.35,1);
   -webkit-transition-property: color,fill,background-color,border-color;
   transition-property: color,fill,background-color,border-color;
-  color: #24292f;
+  color: var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));
   background-color: transparent;
   box-shadow: none;
 }
 
 .c4:focus:not(:disabled) {
   box-shadow: none;
-  outline: 2px solid #0969da;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -2px;
 }
 
@@ -2420,7 +2420,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
 
 .c4:focus-visible:not(:disabled) {
   box-shadow: none;
-  outline: 2px solid #0969da;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -2px;
 }
 
@@ -2453,7 +2453,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
 .c4:disabled {
   cursor: not-allowed;
   box-shadow: none;
-  color: #8c959f;
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
 .c4:disabled [data-component=ButtonCounter],
@@ -2518,9 +2518,9 @@ exports[`TextInput renders trailingAction text button 1`] = `
 }
 
 .c4[data-inactive]:not([disabled]) {
-  background-color: var(--button-inactive-bgColor,#eaeef2);
-  border-color: var(--button-inactive-bgColor,#eaeef2);
-  color: var(--button-inactive-fgColor,#57606a);
+  background-color: var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));
+  border-color: var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));
+  color: var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));
 }
 
 .c4[data-inactive]:not([disabled]):focus-visible {
@@ -2529,7 +2529,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
 
 .c4 [data-component="leadingVisual"] {
   grid-area: leadingVisual;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
 .c4 [data-component="text"] {
@@ -2544,7 +2544,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
 
 .c4 [data-component="trailingAction"] {
   margin-right: -4px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
 .c4 [data-component="buttonContent"] {
@@ -2568,23 +2568,23 @@ exports[`TextInput renders trailingAction text button 1`] = `
 }
 
 .c4:hover:not([disabled]) {
-  background-color: rgba(208,215,222,0.32);
+  background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
 }
 
 .c4:active:not([disabled]) {
-  background-color: rgba(208,215,222,0.48);
+  background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
 }
 
 .c4[aria-expanded=true] {
-  background-color: rgba(208,215,222,0.24);
+  background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
 .c4[data-component="IconButton"][data-no-visuals] {
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
 .c4[data-no-visuals] {
-  color: #0969da;
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   padding-top: 2px;
   padding-right: 4px;
   padding-bottom: 2px;
@@ -2598,11 +2598,11 @@ exports[`TextInput renders trailingAction text button 1`] = `
 }
 
 .c4:has([data-component="ButtonCounter"]) {
-  color: #24292f;
+  color: var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));
 }
 
 .c4:disabled[data-no-visuals] {
-  color: #8c959f;
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
 .c4:disabled[data-no-visuals] [data-component=ButtonCounter] {
@@ -2612,13 +2612,13 @@ exports[`TextInput renders trailingAction text button 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2641,19 +2641,19 @@ exports[`TextInput renders trailingAction text button 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0 > textarea {
@@ -2676,7 +2676,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -2822,14 +2822,14 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   transition: 80ms cubic-bezier(0.65,0,0.35,1);
   -webkit-transition-property: color,fill,background-color,border-color;
   transition-property: color,fill,background-color,border-color;
-  color: #24292f;
+  color: var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));
   background-color: transparent;
   box-shadow: none;
 }
 
 .c5:focus:not(:disabled) {
   box-shadow: none;
-  outline: 2px solid #0969da;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -2px;
 }
 
@@ -2839,7 +2839,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 
 .c5:focus-visible:not(:disabled) {
   box-shadow: none;
-  outline: 2px solid #0969da;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -2px;
 }
 
@@ -2872,7 +2872,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 .c5:disabled {
   cursor: not-allowed;
   box-shadow: none;
-  color: #8c959f;
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
 .c5:disabled [data-component=ButtonCounter],
@@ -2937,9 +2937,9 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 }
 
 .c5[data-inactive]:not([disabled]) {
-  background-color: var(--button-inactive-bgColor,#eaeef2);
-  border-color: var(--button-inactive-bgColor,#eaeef2);
-  color: var(--button-inactive-fgColor,#57606a);
+  background-color: var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));
+  border-color: var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));
+  color: var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));
 }
 
 .c5[data-inactive]:not([disabled]):focus-visible {
@@ -2948,7 +2948,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 
 .c5 [data-component="leadingVisual"] {
   grid-area: leadingVisual;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
 .c5 [data-component="text"] {
@@ -2963,7 +2963,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 
 .c5 [data-component="trailingAction"] {
   margin-right: -4px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
 .c5 [data-component="buttonContent"] {
@@ -2987,23 +2987,23 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 }
 
 .c5:hover:not([disabled]) {
-  background-color: rgba(208,215,222,0.32);
+  background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
 }
 
 .c5:active:not([disabled]) {
-  background-color: rgba(208,215,222,0.48);
+  background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
 }
 
 .c5[aria-expanded=true] {
-  background-color: rgba(208,215,222,0.24);
+  background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
 .c5[data-component="IconButton"][data-no-visuals] {
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
 .c5[data-no-visuals] {
-  color: #0969da;
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   padding-top: 2px;
   padding-right: 4px;
   padding-bottom: 2px;
@@ -3017,11 +3017,11 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 }
 
 .c5:has([data-component="ButtonCounter"]) {
-  color: #24292f;
+  color: var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));
 }
 
 .c5:disabled[data-no-visuals] {
-  color: #8c959f;
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
 .c5:disabled[data-no-visuals] [data-component=ButtonCounter] {
@@ -3031,13 +3031,13 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3060,19 +3060,19 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0 > textarea {
@@ -3095,7 +3095,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -3119,7 +3119,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   display: none;
   width: 0px;
   height: 0px;
-  color: #24292f;
+  color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
   pointer-events: none;
   content: '';
   border: 6px solid transparent;
@@ -3133,7 +3133,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   padding: 0.5em 0.75em;
   font: normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   -webkit-font-smoothing: subpixel-antialiased;
-  color: #ffffff;
+  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
   text-align: center;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -3147,7 +3147,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   white-space: pre;
   pointer-events: none;
   content: attr(aria-label);
-  background: #24292f;
+  background: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
   border-radius: 3px;
   opacity: 0;
 }
@@ -3209,7 +3209,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   right: 50%;
   bottom: -7px;
   margin-right: -6px;
-  border-bottom-color: #24292f;
+  border-bottom-color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
 }
 
 .c4.tooltipped-se::after {
@@ -3237,7 +3237,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   right: 50%;
   bottom: auto;
   margin-right: -6px;
-  border-top-color: #24292f;
+  border-top-color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
 }
 
 .c4.tooltipped-ne::after {
@@ -3271,7 +3271,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   bottom: 50%;
   left: -7px;
   margin-top: -6px;
-  border-left-color: #24292f;
+  border-left-color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
 }
 
 .c4.tooltipped-e::after {
@@ -3288,7 +3288,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   right: -7px;
   bottom: 50%;
   margin-top: -6px;
-  border-right-color: #24292f;
+  border-right-color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
 }
 
 .c4.tooltipped-multiline::after {
@@ -3423,13 +3423,13 @@ exports[`TextInput renders trailingVisual 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3452,24 +3452,24 @@ exports[`TextInput renders trailingVisual 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -3493,7 +3493,7 @@ exports[`TextInput renders trailingVisual 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -3572,13 +3572,13 @@ exports[`TextInput renders trailingVisual 2`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3601,24 +3601,24 @@ exports[`TextInput renders trailingVisual 2`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -3642,7 +3642,7 @@ exports[`TextInput renders trailingVisual 2`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -3721,13 +3721,13 @@ exports[`TextInput renders trailingVisual 3`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3750,24 +3750,24 @@ exports[`TextInput renders trailingVisual 3`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -3791,7 +3791,7 @@ exports[`TextInput renders trailingVisual 3`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -3851,13 +3851,13 @@ exports[`TextInput renders trailingVisual 4`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3880,24 +3880,24 @@ exports[`TextInput renders trailingVisual 4`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -3921,7 +3921,7 @@ exports[`TextInput renders trailingVisual 4`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -3996,13 +3996,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4025,24 +4025,24 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -4066,7 +4066,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -4180,13 +4180,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4209,24 +4209,24 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -4250,7 +4250,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -4396,13 +4396,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4425,24 +4425,24 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -4466,7 +4466,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -4589,13 +4589,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4618,24 +4618,24 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -4659,7 +4659,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -4851,13 +4851,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4880,24 +4880,24 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -4921,7 +4921,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -5113,13 +5113,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -5142,24 +5142,24 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -5183,7 +5183,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -5369,13 +5369,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -5398,24 +5398,24 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -5439,7 +5439,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -5593,13 +5593,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -5622,24 +5622,24 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -5663,7 +5663,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -5849,13 +5849,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -5878,24 +5878,24 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -5919,7 +5919,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -6082,13 +6082,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -6119,24 +6119,24 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -6160,7 +6160,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -6393,13 +6393,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -6422,24 +6422,24 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -6463,7 +6463,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -6695,13 +6695,13 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -6730,24 +6730,24 @@ exports[`TextInput renders with a loading indicator 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -6771,7 +6771,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -6970,13 +6970,13 @@ exports[`TextInput should render a password input 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -6999,24 +6999,24 @@ exports[`TextInput should render a password input 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -7040,7 +7040,7 @@ exports[`TextInput should render a password input 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index feaf7c79688..414e0765ee6 100644
--- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -55,13 +55,13 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -88,24 +88,24 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -132,7 +132,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -183,19 +183,19 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   padding-right: 16px;
   padding-top: 0;
   padding-bottom: 0;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
 }
 
 .c5:hover {
-  background-color: rgba(175,184,193,0.2);
-  box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c8 {
@@ -240,11 +240,11 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
 
 .c8:hover,
 .c8:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c8:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c6 {
@@ -830,19 +830,19 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 
 .c9 {
   font-size: 16px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -869,24 +869,24 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -913,7 +913,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -964,19 +964,19 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   padding-right: 16px;
   padding-top: 0;
   padding-bottom: 0;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
 }
 
 .c5:hover {
-  background-color: rgba(175,184,193,0.2);
-  box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c8 {
@@ -1021,11 +1021,11 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 
 .c8:hover,
 .c8:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c8:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c6 {
@@ -1249,13 +1249,13 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1295,24 +1295,24 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -1344,7 +1344,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -1457,13 +1457,13 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1492,24 +1492,24 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -1538,7 +1538,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -1589,19 +1589,19 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   padding-right: 16px;
   padding-top: 0;
   padding-bottom: 0;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
 }
 
 .c5:hover {
-  background-color: rgba(175,184,193,0.2);
-  box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c8 {
@@ -1646,11 +1646,11 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 
 .c8:hover,
 .c8:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c8:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c6 {
@@ -2185,13 +2185,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2225,24 +2225,24 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -2269,7 +2269,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -2318,19 +2318,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   line-height: 16px;
   padding-left: 4px;
   padding-right: 4px;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
 }
 
 .c5:hover {
-  background-color: rgba(175,184,193,0.2);
-  box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c8 {
@@ -2375,11 +2375,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 
 .c8:hover,
 .c8:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c8:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c6 {
@@ -2914,13 +2914,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2954,24 +2954,24 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -2998,7 +2998,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -3047,19 +3047,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   line-height: 20px;
   padding-left: 8px;
   padding-right: 8px;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
 }
 
 .c5:hover {
-  background-color: rgba(175,184,193,0.2);
-  box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c8 {
@@ -3104,11 +3104,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 
 .c8:hover,
 .c8:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c8:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c6 {
@@ -3643,13 +3643,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3676,24 +3676,24 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -3720,7 +3720,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -3769,19 +3769,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   line-height: 24px;
   padding-left: 8px;
   padding-right: 8px;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
 }
 
 .c5:hover {
-  background-color: rgba(175,184,193,0.2);
-  box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c8 {
@@ -3826,11 +3826,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 
 .c8:hover,
 .c8:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c8:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c6 {
@@ -4369,13 +4369,13 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4402,24 +4402,24 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -4446,7 +4446,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -4497,19 +4497,19 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   padding-right: 16px;
   padding-top: 0;
   padding-bottom: 0;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
 }
 
 .c5:hover {
-  background-color: rgba(175,184,193,0.2);
-  box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c8 {
@@ -4554,11 +4554,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 
 .c8:hover,
 .c8:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c8:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c6 {
@@ -5097,13 +5097,13 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -5131,24 +5131,24 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -5176,7 +5176,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -5227,19 +5227,19 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   padding-right: 16px;
   padding-top: 0;
   padding-bottom: 0;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
 }
 
 .c5:hover {
-  background-color: rgba(175,184,193,0.2);
-  box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c8 {
@@ -5284,11 +5284,11 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 
 .c8:hover,
 .c8:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c8:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c6 {
@@ -5823,13 +5823,13 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -5856,24 +5856,24 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -5900,7 +5900,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -5951,18 +5951,18 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   padding-right: 16px;
   padding-top: 0;
   padding-bottom: 0;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
 }
 
 .c5:hover {
-  background-color: rgba(175,184,193,0.2);
-  box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c6 {
@@ -6272,13 +6272,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -6305,24 +6305,24 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -6349,7 +6349,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -6400,19 +6400,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 16px;
   padding-top: 0;
   padding-bottom: 0;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
 }
 
 .c5:hover {
-  background-color: rgba(175,184,193,0.2);
-  box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c8 {
@@ -6457,11 +6457,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c8:hover,
 .c8:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c8:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c6 {
@@ -7055,13 +7055,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -7088,24 +7088,24 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -7132,7 +7132,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -7183,19 +7183,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 16px;
   padding-top: 0;
   padding-bottom: 0;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
 }
 
 .c7:hover {
-  background-color: rgba(175,184,193,0.2);
-  box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c10 {
@@ -7240,11 +7240,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c10:hover,
 .c10:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c10:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c8 {
@@ -7870,13 +7870,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -7903,24 +7903,24 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -7947,7 +7947,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -7998,19 +7998,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 16px;
   padding-top: 0;
   padding-bottom: 0;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
 }
 
 .c5:hover {
-  background-color: rgba(175,184,193,0.2);
-  box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c8 {
@@ -8055,11 +8055,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c8:hover,
 .c8:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c8:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c6 {
@@ -8662,13 +8662,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -8695,24 +8695,24 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -8739,7 +8739,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -8790,19 +8790,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 16px;
   padding-top: 0;
   padding-bottom: 0;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
 }
 
 .c8:hover {
-  background-color: rgba(175,184,193,0.2);
-  box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c11 {
@@ -8847,11 +8847,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c11:hover,
 .c11:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c11:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c9 {
@@ -9523,13 +9523,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -9556,24 +9556,24 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -9600,7 +9600,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -9651,19 +9651,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 16px;
   padding-top: 0;
   padding-bottom: 0;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
 }
 
 .c8:hover {
-  background-color: rgba(175,184,193,0.2);
-  box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c11 {
@@ -9708,11 +9708,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c11:hover,
 .c11:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c11:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c9 {
@@ -10384,13 +10384,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -10417,24 +10417,24 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -10461,7 +10461,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -10512,19 +10512,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 16px;
   padding-top: 0;
   padding-bottom: 0;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
 }
 
 .c8:hover {
-  background-color: rgba(175,184,193,0.2);
-  box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c11 {
@@ -10569,11 +10569,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c11:hover,
 .c11:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c11:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c9 {
@@ -11239,13 +11239,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -11272,24 +11272,24 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -11316,7 +11316,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -11367,19 +11367,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 16px;
   padding-top: 0;
   padding-bottom: 0;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
 }
 
 .c5:hover {
-  background-color: rgba(175,184,193,0.2);
-  box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c8 {
@@ -11424,11 +11424,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c8:hover,
 .c8:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c8:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c6 {
@@ -12062,13 +12062,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -12095,24 +12095,24 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -12139,7 +12139,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -12190,19 +12190,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 16px;
   padding-top: 0;
   padding-bottom: 0;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
 }
 
 .c7:hover {
-  background-color: rgba(175,184,193,0.2);
-  box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c10 {
@@ -12247,11 +12247,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c10:hover,
 .c10:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c10:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c8 {
@@ -12917,13 +12917,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -12950,24 +12950,24 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -12994,7 +12994,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -13045,19 +13045,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 16px;
   padding-top: 0;
   padding-bottom: 0;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
 }
 
 .c5:hover {
-  background-color: rgba(175,184,193,0.2);
-  box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c8 {
@@ -13102,11 +13102,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c8:hover,
 .c8:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c8:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c6 {
@@ -13749,13 +13749,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -13789,24 +13789,24 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -13833,7 +13833,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -13882,19 +13882,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   line-height: 16px;
   padding-left: 4px;
   padding-right: 4px;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
 }
 
 .c8:hover {
-  background-color: rgba(175,184,193,0.2);
-  box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c11 {
@@ -13939,11 +13939,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c11:hover,
 .c11:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c11:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c9 {
@@ -14655,13 +14655,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -14688,24 +14688,24 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -14732,7 +14732,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -14783,19 +14783,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-right: 16px;
   padding-top: 0;
   padding-bottom: 0;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
 }
 
 .c8:hover {
-  background-color: rgba(175,184,193,0.2);
-  box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c11 {
@@ -14840,11 +14840,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c11:hover,
 .c11:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c11:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c9 {
@@ -15556,13 +15556,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -15589,24 +15589,24 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -15633,7 +15633,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -15682,19 +15682,19 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   line-height: 24px;
   padding-left: 8px;
   padding-right: 8px;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
 }
 
 .c8:hover {
-  background-color: rgba(175,184,193,0.2);
-  box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c11 {
@@ -15739,11 +15739,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 
 .c11:hover,
 .c11:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c11:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c9 {
@@ -16421,13 +16421,13 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -16454,24 +16454,24 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -16498,7 +16498,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -16549,19 +16549,19 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   padding-right: 16px;
   padding-top: 0;
   padding-bottom: 0;
-  background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
+  border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   max-width: 100%;
   padding-right: 0;
 }
 
 .c5:hover {
-  background-color: rgba(175,184,193,0.2);
-  box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
+  box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c8 {
@@ -16606,11 +16606,11 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 
 .c8:hover,
 .c8:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c8:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c6 {
@@ -17132,13 +17132,13 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -17165,24 +17165,24 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -17209,7 +17209,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -17282,7 +17282,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 
 .c5:hover {
   background-image: linear-gradient(rgba(0,0,0,0.15),rgba(0,0,0,0.15)),linear-gradient(rgb(var(--label-r),var(--label-g),var(--label-b)),rgb(var(--label-r),var(--label-g),var(--label-b)));
-  box-shadow: 0 3px 6px rgba(140,149,159,0.15);
+  box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15)));
 }
 
 .c7 {
@@ -17329,11 +17329,11 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 
 .c7:hover,
 .c7:focus {
-  background-color: rgba(175,184,193,0.2);
+  background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
 }
 
 .c7:active {
-  background-color: rgba(234,238,242,0.5);
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));
 }
 
 .c6 {
@@ -17815,13 +17815,13 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -17848,24 +17848,24 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
@@ -17892,7 +17892,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
diff --git a/src/__tests__/__snapshots__/Textarea.test.tsx.snap b/src/__tests__/__snapshots__/Textarea.test.tsx.snap
index 198752d7241..9e4a1797768 100644
--- a/src/__tests__/__snapshots__/Textarea.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Textarea.test.tsx.snap
@@ -4,13 +4,13 @@ exports[`Textarea renders consistently 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid var(--control-borderColor-rest,#d0d7de);
+  background-color: var(--bgColor-default,var(--color-canvas-default,#ffffff));
+  border: 1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -33,24 +33,24 @@ exports[`Textarea renders consistently 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::-moz-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:-ms-input-placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0::placeholder {
-  color: #6e7781;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
 .c0:focus-within {
-  border-color: #0969da;
-  outline: 2px solid #0969da;
+  border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
   outline-offset: -1px;
 }
 
diff --git a/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap b/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap
index 101fd03be24..f12d32801c4 100644
--- a/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`has default theme 1`] = `
 .c0 {
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   margin-bottom: 4px;
 }
 
diff --git a/src/__tests__/deprecated/__snapshots__/ActionList.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/ActionList.test.tsx.snap
index ed2dcc6d095..d0d25a3f4ec 100644
--- a/src/__tests__/deprecated/__snapshots__/ActionList.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/ActionList.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`ActionList renders consistently 1`] = `
 .c0[data-has-active-descendant],
 .c0:focus-within {
   --item-hover-bg-override: none;
-  --item-hover-divider-border-color-override: hsla(210,18%,87%,1);
+  --item-hover-divider-border-color-override: var(--borderColor-muted,var(--color-border-muted,hsla(210,18%,87%,1)));
 }
 
 <div
@@ -66,7 +66,7 @@ exports[`ActionList.Item renders consistently 1`] = `
   display: -ms-flexbox;
   display: flex;
   border-radius: 6px;
-  color: #1F2328;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
   -webkit-text-decoration: none;
@@ -83,7 +83,7 @@ exports[`ActionList.Item renders consistently 1`] = `
   position: absolute;
   width: 100%;
   top: -7px;
-  border: 0 solid hsla(210,18%,87%,1);
+  border: 0 solid var(--borderColor-muted,var(--color-border-muted,hsla(210,18%,87%,1)));
   border-top-width: 0;
 }
 
@@ -100,25 +100,25 @@ exports[`ActionList.Item renders consistently 1`] = `
 }
 
 .c1[data-is-active-descendant='activated-directly'] {
-  background: rgba(208,215,222,0.48);
+  background: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
 }
 
 .c1[data-is-active-descendant='activated-indirectly'] {
-  background: rgba(208,215,222,0.32);
+  background: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
 }
 
 .c1:focus {
-  background: rgba(208,215,222,0.48);
+  background: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
   outline: none;
 }
 
 .c1:active {
-  background: rgba(208,215,222,0.48);
+  background: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
 }
 
 @media (hover:hover) and (pointer:fine) {
   .c1:hover {
-    background: var( --item-hover-bg-override,rgba(208,215,222,0.32) );
+    background: var( --item-hover-bg-override,var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32))) );
     cursor: pointer;
   }
 }
diff --git a/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap
index 4cb12fa158d..29d271bacb8 100644
--- a/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap
@@ -43,29 +43,29 @@ exports[`ActionMenu renders consistently 1`] = `
 }
 
 .c1 {
-  color: #24292f;
-  background-color: #f6f8fa;
-  border: 1px solid rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  color: var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));
+  background-color: var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));
+  border: 1px solid var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15)));
+  box-shadow: var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04))),var(--button-default-shadow-inset,var(--color-btn-inset-shadow,inset 0 1px 0 rgba(255,255,255,0.25)));
 }
 
 .c1:hover {
-  background-color: #f3f4f6;
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--button-default-bgColor-hover,var(--color-btn-hover-bg,#f3f4f6));
+  border-color: var(--button-default-borderColor-hover,var(--color-btn-hover-border,rgba(31,35,40,0.15)));
 }
 
 .c1:focus {
-  outline: solid 2px #0969da;
+  outline: solid 2px var(--fgColor-accent,var(--color-accent-fg,#0969da));
 }
 
 .c1:active {
-  background-color: hsla(220,14%,94%,1);
+  background-color: var(--button-default-bgColor-selected,var(--color-btn-selected-bg,hsla(220,14%,94%,1)));
 }
 
 .c1:disabled {
-  color: #8c959f;
-  background-color: #f6f8fa;
-  border-color: rgba(31,35,40,0.15);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));
+  border-color: var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15)));
 }
 
 <button
diff --git a/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap
index 412399621ca..0ecf50f7bbf 100644
--- a/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap
@@ -43,29 +43,29 @@ exports[`Button renders consistently 1`] = `
 }
 
 .c1 {
-  color: #24292f;
-  background-color: #f6f8fa;
-  border: 1px solid rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  color: var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));
+  background-color: var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));
+  border: 1px solid var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15)));
+  box-shadow: var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04))),var(--button-default-shadow-inset,var(--color-btn-inset-shadow,inset 0 1px 0 rgba(255,255,255,0.25)));
 }
 
 .c1:hover {
-  background-color: #f3f4f6;
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--button-default-bgColor-hover,var(--color-btn-hover-bg,#f3f4f6));
+  border-color: var(--button-default-borderColor-hover,var(--color-btn-hover-border,rgba(31,35,40,0.15)));
 }
 
 .c1:focus {
-  outline: solid 2px #0969da;
+  outline: solid 2px var(--fgColor-accent,var(--color-accent-fg,#0969da));
 }
 
 .c1:active {
-  background-color: hsla(220,14%,94%,1);
+  background-color: var(--button-default-bgColor-selected,var(--color-btn-selected-bg,hsla(220,14%,94%,1)));
 }
 
 .c1:disabled {
-  color: #8c959f;
-  background-color: #f6f8fa;
-  border-color: rgba(31,35,40,0.15);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));
+  border-color: var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15)));
 }
 
 <button
@@ -116,29 +116,29 @@ exports[`Button respects the "disabled" prop 1`] = `
 }
 
 .c1 {
-  color: #24292f;
-  background-color: #f6f8fa;
-  border: 1px solid rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  color: var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));
+  background-color: var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));
+  border: 1px solid var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15)));
+  box-shadow: var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04))),var(--button-default-shadow-inset,var(--color-btn-inset-shadow,inset 0 1px 0 rgba(255,255,255,0.25)));
 }
 
 .c1:hover {
-  background-color: #f3f4f6;
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--button-default-bgColor-hover,var(--color-btn-hover-bg,#f3f4f6));
+  border-color: var(--button-default-borderColor-hover,var(--color-btn-hover-border,rgba(31,35,40,0.15)));
 }
 
 .c1:focus {
-  outline: solid 2px #0969da;
+  outline: solid 2px var(--fgColor-accent,var(--color-accent-fg,#0969da));
 }
 
 .c1:active {
-  background-color: hsla(220,14%,94%,1);
+  background-color: var(--button-default-bgColor-selected,var(--color-btn-selected-bg,hsla(220,14%,94%,1)));
 }
 
 .c1:disabled {
-  color: #8c959f;
-  background-color: #f6f8fa;
-  border-color: rgba(31,35,40,0.15);
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+  background-color: var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));
+  border-color: var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15)));
 }
 
 <button
@@ -190,29 +190,29 @@ exports[`ButtonDanger renders consistently 1`] = `
 }
 
 .c1 {
-  color: #cf222e;
-  border: 1px solid rgba(31,35,40,0.15);
-  background-color: #f6f8fa;
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04);
+  color: var(--button-danger-fgColor-rest,var(--color-btn-danger-text,#cf222e));
+  border: 1px solid var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15)));
+  background-color: var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));
+  box-shadow: var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04)));
 }
 
 .c1:hover {
-  color: #ffffff;
-  background-color: #a40e26;
-  border-color: rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.1);
+  color: var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text,#ffffff));
+  background-color: var(--button-danger-bgColor-hover,var(--color-btn-danger-hover-bg,#a40e26));
+  border-color: var(--button-danger-borderColor-hover,var(--color-btn-danger-hover-border,rgba(31,35,40,0.15)));
+  box-shadow: var(--shadow-resting-small,var(--color-btn-danger-hover-shadow,0 1px 0 rgba(31,35,40,0.1)));
 }
 
 .c1:active {
-  color: #ffffff;
-  background-color: hsla(356,72%,44%,1);
-  box-shadow: inset 0 1px 0 rgba(76,0,20,0.2);
-  border-color: rgba(31,35,40,0.15);
+  color: var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text,#ffffff));
+  background-color: var(--button-danger-bgColor-active,var(--color-btn-danger-selected-bg,hsla(356,72%,44%,1)));
+  box-shadow: var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow,inset 0 1px 0 rgba(76,0,20,0.2)));
+  border-color: var(--button-danger-borderColor-active,var(--color-btn-danger-selected-border,rgba(31,35,40,0.15)));
 }
 
 .c1:disabled {
-  color: rgba(207,34,46,0.5);
-  background-color: #f6f8fa;
+  color: var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text,rgba(207,34,46,0.5)));
+  background-color: var(--button-danger-bgColor-disabled,var(--color-btn-danger-disabled-bg,#f6f8fa));
 }
 
 <button
@@ -263,29 +263,29 @@ exports[`ButtonDanger renders correct disabled styles 1`] = `
 }
 
 .c1 {
-  color: #cf222e;
-  border: 1px solid rgba(31,35,40,0.15);
-  background-color: #f6f8fa;
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04);
+  color: var(--button-danger-fgColor-rest,var(--color-btn-danger-text,#cf222e));
+  border: 1px solid var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15)));
+  background-color: var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));
+  box-shadow: var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04)));
 }
 
 .c1:hover {
-  color: #ffffff;
-  background-color: #a40e26;
-  border-color: rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.1);
+  color: var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text,#ffffff));
+  background-color: var(--button-danger-bgColor-hover,var(--color-btn-danger-hover-bg,#a40e26));
+  border-color: var(--button-danger-borderColor-hover,var(--color-btn-danger-hover-border,rgba(31,35,40,0.15)));
+  box-shadow: var(--shadow-resting-small,var(--color-btn-danger-hover-shadow,0 1px 0 rgba(31,35,40,0.1)));
 }
 
 .c1:active {
-  color: #ffffff;
-  background-color: hsla(356,72%,44%,1);
-  box-shadow: inset 0 1px 0 rgba(76,0,20,0.2);
-  border-color: rgba(31,35,40,0.15);
+  color: var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text,#ffffff));
+  background-color: var(--button-danger-bgColor-active,var(--color-btn-danger-selected-bg,hsla(356,72%,44%,1)));
+  box-shadow: var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow,inset 0 1px 0 rgba(76,0,20,0.2)));
+  border-color: var(--button-danger-borderColor-active,var(--color-btn-danger-selected-border,rgba(31,35,40,0.15)));
 }
 
 .c1:disabled {
-  color: rgba(207,34,46,0.5);
-  background-color: #f6f8fa;
+  color: var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text,rgba(207,34,46,0.5)));
+  background-color: var(--button-danger-bgColor-disabled,var(--color-btn-danger-disabled-bg,#f6f8fa));
 }
 
 <button
@@ -374,30 +374,30 @@ exports[`ButtonInvisible renders consistently 1`] = `
 }
 
 .c1 {
-  color: #0969da;
-  border: 1px solid rgba(31,35,40,0.15);
-  background-color: #f6f8fa;
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04);
+  color: var(--button-outline-fgColor-rest,var(--color-btn-outline-text,#0969da));
+  border: 1px solid var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15)));
+  background-color: var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));
+  box-shadow: var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04)));
 }
 
 .c1:hover {
-  color: #ffffff;
-  background-color: #0969da;
-  border-color: rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.1);
+  color: var(--button-outline-fgColor-hover,var(--color-btn-outline-hover-text,#ffffff));
+  background-color: var(--button-outline-bgColor-hover,var(--color-btn-outline-hover-bg,#0969da));
+  border-color: var(--button-outline-borderColor-hover,var(--color-btn-outline-hover-border,rgba(31,35,40,0.15)));
+  box-shadow: var(--shadow-resting-small,var(--color-btn-outline-hover-shadow,0 1px 0 rgba(31,35,40,0.1)));
 }
 
 .c1:active {
-  color: #ffffff;
-  background-color: hsla(212,92%,42%,1);
-  box-shadow: inset 0 1px 0 rgba(0,33,85,0.2);
-  border-color: rgba(31,35,40,0.15);
+  color: var(--button-outline-fgColor-active,var(--color-btn-outline-selected-text,#ffffff));
+  background-color: var(--button-outline-bgColor-active,var(--color-btn-outline-selected-bg,hsla(212,92%,42%,1)));
+  box-shadow: var(--button-outline-shadow-selected,var(--color-btn-outline-selected-shadow,inset 0 1px 0 rgba(0,33,85,0.2)));
+  border-color: var(--button-outline-borderColor-active,var(--color-btn-outline-selected-border,rgba(31,35,40,0.15)));
 }
 
 .c1:disabled {
-  color: rgba(9,105,218,0.5);
-  background-color: #f6f8fa;
-  border-color: rgba(31,35,40,0.15);
+  color: var(--button-outline-fgColor-disabled,var(--color-btn-outline-disabled-text,rgba(9,105,218,0.5)));
+  background-color: var(--button-outline-bgColor-disabled,var(--color-btn-outline-disabled-bg,#f6f8fa));
+  border-color: var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15)));
 }
 
 <button
@@ -448,7 +448,7 @@ exports[`ButtonInvisible renders correct disabled styles 1`] = `
 }
 
 .c1 {
-  color: #0969da;
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   background-color: transparent;
   border: 0;
   border-radius: 6px;
@@ -456,19 +456,19 @@ exports[`ButtonInvisible renders correct disabled styles 1`] = `
 }
 
 .c1:disabled {
-  color: #8c959f;
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
 .c1:focus {
-  outline: solid 2px #0969da;
+  outline: solid 2px var(--fgColor-accent,var(--color-accent-fg,#0969da));
 }
 
 .c1:hover {
-  background-color: #f3f4f6;
+  background-color: var(--button-default-bgColor-hover,var(--color-btn-hover-bg,#f3f4f6));
 }
 
 .c1:active {
-  background-color: hsla(220,14%,94%,1);
+  background-color: var(--button-default-bgColor-selected,var(--color-btn-selected-bg,hsla(220,14%,94%,1)));
 }
 
 <button
@@ -520,30 +520,30 @@ exports[`ButtonOutline renders consistently 1`] = `
 }
 
 .c1 {
-  color: #0969da;
-  border: 1px solid rgba(31,35,40,0.15);
-  background-color: #f6f8fa;
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04);
+  color: var(--button-outline-fgColor-rest,var(--color-btn-outline-text,#0969da));
+  border: 1px solid var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15)));
+  background-color: var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));
+  box-shadow: var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04)));
 }
 
 .c1:hover {
-  color: #ffffff;
-  background-color: #0969da;
-  border-color: rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.1);
+  color: var(--button-outline-fgColor-hover,var(--color-btn-outline-hover-text,#ffffff));
+  background-color: var(--button-outline-bgColor-hover,var(--color-btn-outline-hover-bg,#0969da));
+  border-color: var(--button-outline-borderColor-hover,var(--color-btn-outline-hover-border,rgba(31,35,40,0.15)));
+  box-shadow: var(--shadow-resting-small,var(--color-btn-outline-hover-shadow,0 1px 0 rgba(31,35,40,0.1)));
 }
 
 .c1:active {
-  color: #ffffff;
-  background-color: hsla(212,92%,42%,1);
-  box-shadow: inset 0 1px 0 rgba(0,33,85,0.2);
-  border-color: rgba(31,35,40,0.15);
+  color: var(--button-outline-fgColor-active,var(--color-btn-outline-selected-text,#ffffff));
+  background-color: var(--button-outline-bgColor-active,var(--color-btn-outline-selected-bg,hsla(212,92%,42%,1)));
+  box-shadow: var(--button-outline-shadow-selected,var(--color-btn-outline-selected-shadow,inset 0 1px 0 rgba(0,33,85,0.2)));
+  border-color: var(--button-outline-borderColor-active,var(--color-btn-outline-selected-border,rgba(31,35,40,0.15)));
 }
 
 .c1:disabled {
-  color: rgba(9,105,218,0.5);
-  background-color: #f6f8fa;
-  border-color: rgba(31,35,40,0.15);
+  color: var(--button-outline-fgColor-disabled,var(--color-btn-outline-disabled-text,rgba(9,105,218,0.5)));
+  background-color: var(--button-outline-bgColor-disabled,var(--color-btn-outline-disabled-bg,#f6f8fa));
+  border-color: var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15)));
 }
 
 <button
@@ -594,30 +594,30 @@ exports[`ButtonOutline renders correct disabled styles 1`] = `
 }
 
 .c1 {
-  color: #0969da;
-  border: 1px solid rgba(31,35,40,0.15);
-  background-color: #f6f8fa;
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04);
+  color: var(--button-outline-fgColor-rest,var(--color-btn-outline-text,#0969da));
+  border: 1px solid var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15)));
+  background-color: var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));
+  box-shadow: var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04)));
 }
 
 .c1:hover {
-  color: #ffffff;
-  background-color: #0969da;
-  border-color: rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.1);
+  color: var(--button-outline-fgColor-hover,var(--color-btn-outline-hover-text,#ffffff));
+  background-color: var(--button-outline-bgColor-hover,var(--color-btn-outline-hover-bg,#0969da));
+  border-color: var(--button-outline-borderColor-hover,var(--color-btn-outline-hover-border,rgba(31,35,40,0.15)));
+  box-shadow: var(--shadow-resting-small,var(--color-btn-outline-hover-shadow,0 1px 0 rgba(31,35,40,0.1)));
 }
 
 .c1:active {
-  color: #ffffff;
-  background-color: hsla(212,92%,42%,1);
-  box-shadow: inset 0 1px 0 rgba(0,33,85,0.2);
-  border-color: rgba(31,35,40,0.15);
+  color: var(--button-outline-fgColor-active,var(--color-btn-outline-selected-text,#ffffff));
+  background-color: var(--button-outline-bgColor-active,var(--color-btn-outline-selected-bg,hsla(212,92%,42%,1)));
+  box-shadow: var(--button-outline-shadow-selected,var(--color-btn-outline-selected-shadow,inset 0 1px 0 rgba(0,33,85,0.2)));
+  border-color: var(--button-outline-borderColor-active,var(--color-btn-outline-selected-border,rgba(31,35,40,0.15)));
 }
 
 .c1:disabled {
-  color: rgba(9,105,218,0.5);
-  background-color: #f6f8fa;
-  border-color: rgba(31,35,40,0.15);
+  color: var(--button-outline-fgColor-disabled,var(--color-btn-outline-disabled-text,rgba(9,105,218,0.5)));
+  background-color: var(--button-outline-bgColor-disabled,var(--color-btn-outline-disabled-bg,#f6f8fa));
+  border-color: var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15)));
 }
 
 <button
@@ -669,26 +669,26 @@ exports[`ButtonPrimary renders consistently 1`] = `
 }
 
 .c1 {
-  color: #ffffff;
-  border: 1px solid rgba(31,35,40,0.15);
-  background-color: #1f883d;
-  box-shadow: 0 1px 0 rgba(31,35,40,0.1);
+  color: var(--button-primary-fgColor-rest,var(--color-btn-primary-text,#ffffff));
+  border: 1px solid var(--button-primary-borderColor-rest,var(--color-btn-primary-border,rgba(31,35,40,0.15)));
+  background-color: var(--button-primary-bgColor-rest,var(--color-btn-primary-bg,#1f883d));
+  box-shadow: var(--shadow-resting-small,var(--color-btn-primary-shadow,0 1px 0 rgba(31,35,40,0.1)));
 }
 
 .c1:hover {
-  background-color: #1a7f37;
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg,#1a7f37));
+  border-color: var(--button-primary-borderColor-hover,var(--color-btn-primary-hover-border,rgba(31,35,40,0.15)));
 }
 
 .c1:active {
-  background-color: hsla(137,66%,28%,1);
-  box-shadow: inset 0 1px 0 rgba(0,45,17,0.2);
+  background-color: var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg,hsla(137,66%,28%,1)));
+  box-shadow: var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow,inset 0 1px 0 rgba(0,45,17,0.2)));
 }
 
 .c1:disabled {
-  color: rgba(255,255,255,0.8);
-  background-color: #94d3a2;
-  border-color: rgba(31,35,40,0.15);
+  color: var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text,rgba(255,255,255,0.8)));
+  background-color: var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg,#94d3a2));
+  border-color: var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border,rgba(31,35,40,0.15)));
 }
 
 <button
@@ -739,26 +739,26 @@ exports[`ButtonPrimary renders correct disabled styles 1`] = `
 }
 
 .c1 {
-  color: #ffffff;
-  border: 1px solid rgba(31,35,40,0.15);
-  background-color: #1f883d;
-  box-shadow: 0 1px 0 rgba(31,35,40,0.1);
+  color: var(--button-primary-fgColor-rest,var(--color-btn-primary-text,#ffffff));
+  border: 1px solid var(--button-primary-borderColor-rest,var(--color-btn-primary-border,rgba(31,35,40,0.15)));
+  background-color: var(--button-primary-bgColor-rest,var(--color-btn-primary-bg,#1f883d));
+  box-shadow: var(--shadow-resting-small,var(--color-btn-primary-shadow,0 1px 0 rgba(31,35,40,0.1)));
 }
 
 .c1:hover {
-  background-color: #1a7f37;
-  border-color: rgba(31,35,40,0.15);
+  background-color: var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg,#1a7f37));
+  border-color: var(--button-primary-borderColor-hover,var(--color-btn-primary-hover-border,rgba(31,35,40,0.15)));
 }
 
 .c1:active {
-  background-color: hsla(137,66%,28%,1);
-  box-shadow: inset 0 1px 0 rgba(0,45,17,0.2);
+  background-color: var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg,hsla(137,66%,28%,1)));
+  box-shadow: var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow,inset 0 1px 0 rgba(0,45,17,0.2)));
 }
 
 .c1:disabled {
-  color: rgba(255,255,255,0.8);
-  background-color: #94d3a2;
-  border-color: rgba(31,35,40,0.15);
+  color: var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text,rgba(255,255,255,0.8)));
+  background-color: var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg,#94d3a2));
+  border-color: var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border,rgba(31,35,40,0.15)));
 }
 
 <button
@@ -772,7 +772,7 @@ exports[`ButtonTableList renders consistently 1`] = `
   display: inline-block;
   padding: 0;
   font-size: 14px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   -webkit-text-decoration: none;
   text-decoration: none;
   white-space: nowrap;
@@ -795,7 +795,7 @@ exports[`ButtonTableList renders consistently 1`] = `
 
 .c0:disabled,
 .c0:disabled:hover {
-  color: #8c959f;
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
   cursor: default;
 }
 
diff --git a/src/__tests__/deprecated/__snapshots__/FilterListItem.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/FilterListItem.test.tsx.snap
index ecc0b3122cd..0b8222c151f 100644
--- a/src/__tests__/deprecated/__snapshots__/FilterListItem.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/FilterListItem.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`FilterList.Item renders consistently 1`] = `
   margin: 0 0 5px 0;
   overflow: hidden;
   font-size: 14px;
-  color: #656d76;
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   background-color: !important;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -21,12 +21,12 @@ exports[`FilterList.Item renders consistently 1`] = `
 .c0:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #f6f8fa;
+  background-color: var(--bgColor-muted,var(--color-canvas-subtle,#f6f8fa));
 }
 
 .c0:active {
-  color: #ffffff;
-  background-color: #0969da;
+  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
+  background-color: var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
 }
 
 .c0 .count {
@@ -47,8 +47,8 @@ exports[`FilterList.Item respects the "selected" prop 1`] = `
   margin: 0 0 5px 0;
   overflow: hidden;
   font-size: 14px;
-  color: #ffffff;
-  background-color: #0969da!important;
+  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
+  background-color: var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da))!important;
   -webkit-text-decoration: none;
   text-decoration: none;
   text-overflow: ellipsis;
@@ -60,12 +60,12 @@ exports[`FilterList.Item respects the "selected" prop 1`] = `
 .c0:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #f6f8fa;
+  background-color: var(--bgColor-muted,var(--color-canvas-subtle,#f6f8fa));
 }
 
 .c0:active {
-  color: #ffffff;
-  background-color: #0969da;
+  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
+  background-color: var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
 }
 
 .c0 .count {
diff --git a/src/legacy-theme/ts/colors/dark.ts b/src/legacy-theme/ts/colors/dark.ts
index 14e98911728..4dbfcd39283 100644
--- a/src/legacy-theme/ts/colors/dark.ts
+++ b/src/legacy-theme/ts/colors/dark.ts
@@ -1,503 +1,532 @@
 const colors = {
-  canvasDefaultTransparent: 'rgba(13,17,23,0)',
-  pageHeaderBg: '#0d1117',
+  canvasDefaultTransparent: 'var(--bgColor-transparent, var(--color-canvas-default-transparent, rgba(13,17,23,0)))',
+  pageHeaderBg: 'var(--page-header-bgColor, var(--color-page-header-bg, #0d1117))',
   marketingIcon: {
-    primary: '#79c0ff',
-    secondary: '#1f6feb',
+    primary: 'var(--color-marketing-icon-primary, #79c0ff)',
+    secondary: 'var(--color-marketing-icon-secondary, #1f6feb)',
   },
   diffBlob: {
     addition: {
-      numText: '#e6edf3',
-      fg: '#e6edf3',
-      numBg: 'rgba(63,185,80,0.3)',
-      lineBg: 'rgba(46,160,67,0.15)',
-      wordBg: 'rgba(46,160,67,0.4)',
+      numText: 'var(--diffBlob-addition-fgColor-num, var(--color-diff-blob-addition-num-text, #e6edf3))',
+      fg: 'var(--diffBlob-addition-fgColor-text, var(--color-diff-blob-addition-fg, #e6edf3))',
+      numBg: 'var(--diffBlob-addition-bgColor-num, var(--color-diff-blob-addition-num-bg, rgba(63,185,80,0.3)))',
+      lineBg: 'var(--diffBlob-addition-bgColor-line, var(--color-diff-blob-addition-line-bg, rgba(46,160,67,0.15)))',
+      wordBg: 'var(--diffBlob-addition-bgColor-word, var(--color-diff-blob-addition-word-bg, rgba(46,160,67,0.4)))',
     },
     deletion: {
-      numText: '#e6edf3',
-      fg: '#e6edf3',
-      numBg: 'rgba(248,81,73,0.3)',
-      lineBg: 'rgba(248,81,73,0.1)',
-      wordBg: 'rgba(248,81,73,0.4)',
+      numText: 'var(--diffBlob-deletion-fgColor-num, var(--color-diff-blob-deletion-num-text, #e6edf3))',
+      fg: 'var(--diffBlob-deletion-fgColor-text, var(--color-diff-blob-deletion-fg, #e6edf3))',
+      numBg: 'var(--diffBlob-deletion-bgColor-num, var(--color-diff-blob-deletion-num-bg, rgba(248,81,73,0.3)))',
+      lineBg: 'var(--diffBlob-deletion-bgColor-line, var(--color-diff-blob-deletion-line-bg, rgba(248,81,73,0.1)))',
+      wordBg: 'var(--diffBlob-deletion-bgColor-word, var(--color-diff-blob-deletion-word-bg, rgba(248,81,73,0.4)))',
     },
     hunk: {
-      numBg: 'rgba(56,139,253,0.4)',
+      numBg: 'var(--diffBlob-hunk-bgColor-num, var(--color-diff-blob-hunk-num-bg, rgba(56,139,253,0.4)))',
     },
     expander: {
-      icon: '#7d8590',
+      icon: 'var(--diffBlob-expander-iconColor, var(--color-diff-blob-expander-icon, #848d97))',
     },
-    selectedLineHighlightMixBlendMode: 'screen',
+    selectedLineHighlightMixBlendMode: 'var(--color-diff-blob-selected-line-highlight-mix-blend-mode, screen)',
   },
   diffstat: {
-    deletionBorder: 'rgba(240,246,252,0.1)',
-    additionBorder: 'rgba(240,246,252,0.1)',
-    additionBg: '#3fb950',
+    deletionBorder: 'var(--color-diffstat-deletion-border, rgba(240,246,252,0.1))',
+    additionBorder: 'var(--color-diffstat-addition-border, rgba(240,246,252,0.1))',
+    additionBg: 'var(--diffStat-addition-bgColor, var(--color-diffstat-addition-bg, #3fb950))',
   },
   searchKeyword: {
-    hl: 'rgba(210,153,34,0.4)',
+    hl: 'var(--highlight-neutral-bgColor, var(--color-search-keyword-hl, rgba(210,153,34,0.4)))',
   },
   prettylights: {
     syntax: {
-      comment: '#8b949e',
-      constant: '#79c0ff',
-      entity: '#d2a8ff',
-      storageModifierImport: '#c9d1d9',
-      entityTag: '#7ee787',
-      keyword: '#ff7b72',
-      string: '#a5d6ff',
-      variable: '#ffa657',
-      brackethighlighterUnmatched: '#f85149',
-      invalidIllegalText: '#f0f6fc',
-      invalidIllegalBg: '#8e1519',
-      carriageReturnText: '#f0f6fc',
-      carriageReturnBg: '#b62324',
-      stringRegexp: '#7ee787',
-      markupList: '#f2cc60',
-      markupHeading: '#1f6feb',
-      markupItalic: '#c9d1d9',
-      markupBold: '#c9d1d9',
-      markupDeletedText: '#ffdcd7',
-      markupDeletedBg: '#67060c',
-      markupInsertedText: '#aff5b4',
-      markupInsertedBg: '#033a16',
-      markupChangedText: '#ffdfb6',
-      markupChangedBg: '#5a1e02',
-      markupIgnoredText: '#c9d1d9',
-      markupIgnoredBg: '#1158c7',
-      metaDiffRange: '#d2a8ff',
-      brackethighlighterAngle: '#8b949e',
-      sublimelinterGutterMark: '#484f58',
-      constantOtherReferenceLink: '#a5d6ff',
+      comment: 'var(--color-prettylights-syntax-comment, #8b949e)',
+      constant: 'var(--color-prettylights-syntax-constant, #79c0ff)',
+      entity: 'var(--color-prettylights-syntax-entity, #d2a8ff)',
+      storageModifierImport: 'var(--color-prettylights-syntax-storage-modifier-import, #c9d1d9)',
+      entityTag: 'var(--color-prettylights-syntax-entity-tag, #7ee787)',
+      keyword: 'var(--color-prettylights-syntax-keyword, #ff7b72)',
+      string: 'var(--color-prettylights-syntax-string, #a5d6ff)',
+      variable: 'var(--color-prettylights-syntax-variable, #ffa657)',
+      brackethighlighterUnmatched: 'var(--color-prettylights-syntax-brackethighlighter-unmatched, #f85149)',
+      invalidIllegalText: 'var(--color-prettylights-syntax-invalid-illegal-text, #f0f6fc)',
+      invalidIllegalBg: 'var(--color-prettylights-syntax-invalid-illegal-bg, #8e1519)',
+      carriageReturnText: 'var(--color-prettylights-syntax-carriage-return-text, #f0f6fc)',
+      carriageReturnBg: 'var(--color-prettylights-syntax-carriage-return-bg, #b62324)',
+      stringRegexp: 'var(--color-prettylights-syntax-string-regexp, #7ee787)',
+      markupList: 'var(--color-prettylights-syntax-markup-list, #f2cc60)',
+      markupHeading: 'var(--color-prettylights-syntax-markup-heading, #1f6feb)',
+      markupItalic: 'var(--color-prettylights-syntax-markup-italic, #c9d1d9)',
+      markupBold: 'var(--color-prettylights-syntax-markup-bold, #c9d1d9)',
+      markupDeletedText: 'var(--color-prettylights-syntax-markup-deleted-text, #ffdcd7)',
+      markupDeletedBg: 'var(--color-prettylights-syntax-markup-deleted-bg, #67060c)',
+      markupInsertedText: 'var(--color-prettylights-syntax-markup-inserted-text, #aff5b4)',
+      markupInsertedBg: 'var(--color-prettylights-syntax-markup-inserted-bg, #033a16)',
+      markupChangedText: 'var(--color-prettylights-syntax-markup-changed-text, #ffdfb6)',
+      markupChangedBg: 'var(--color-prettylights-syntax-markup-changed-bg, #5a1e02)',
+      markupIgnoredText: 'var(--color-prettylights-syntax-markup-ignored-text, #c9d1d9)',
+      markupIgnoredBg: 'var(--color-prettylights-syntax-markup-ignored-bg, #1158c7)',
+      metaDiffRange: 'var(--color-prettylights-syntax-meta-diff-range, #d2a8ff)',
+      brackethighlighterAngle: 'var(--color-prettylights-syntax-brackethighlighter-angle, #8b949e)',
+      sublimelinterGutterMark: 'var(--color-prettylights-syntax-sublimelinter-gutter-mark, #484f58)',
+      constantOtherReferenceLink: 'var(--color-prettylights-syntax-constant-other-reference-link, #a5d6ff)',
     },
   },
   codemirror: {
-    text: '#e6edf3',
-    bg: '#0d1117',
-    guttersBg: '#0d1117',
-    guttermarkerText: '#0d1117',
-    guttermarkerSubtleText: '#6e7681',
-    linenumberText: '#7d8590',
-    cursor: '#e6edf3',
-    selectionBg: 'rgba(56,139,253,0.4)',
-    activelineBg: 'rgba(110,118,129,0.1)',
-    matchingbracketText: '#e6edf3',
-    linesBg: '#0d1117',
+    text: 'var(--codeMirror-fgColor, var(--color-codemirror-text, #e6edf3))',
+    bg: 'var(--codeMirror-bgColor, var(--color-codemirror-bg, #0d1117))',
+    guttersBg: 'var(--codeMirror-gutters-bgColor, var(--color-codemirror-gutters-bg, #0d1117))',
+    guttermarkerText:
+      'var(--codeMirror-gutterMarker-fgColor-default, var(--color-codemirror-guttermarker-text, #0d1117))',
+    guttermarkerSubtleText:
+      'var(--codeMirror-gutterMarker-fgColor-muted, var(--color-codemirror-guttermarker-subtle-text, #6e7681))',
+    linenumberText: 'var(--codeMirror-lineNumber-fgColor, var(--color-codemirror-linenumber-text, #848d97))',
+    cursor: 'var(--codeMirror-cursor-fgColor, var(--color-codemirror-cursor, #e6edf3))',
+    selectionBg: 'var(--codeMirror-selection-bgColor, var(--color-codemirror-selection-bg, rgba(56,139,253,0.4)))',
+    activelineBg: 'var(--codeMirror-activeline-bgColor, var(--color-codemirror-activeline-bg, rgba(110,118,129,0.1)))',
+    matchingbracketText:
+      'var(--codeMirror-matchingBracket-fgColor, var(--color-codemirror-matchingbracket-text, #e6edf3))',
+    linesBg: 'var(--codeMirror-lines-bgColor, var(--color-codemirror-lines-bg, #0d1117))',
     syntax: {
-      comment: '#8b949e',
-      constant: '#79c0ff',
-      entity: '#d2a8ff',
-      keyword: '#ff7b72',
-      storage: '#ff7b72',
-      string: '#a5d6ff',
-      support: '#79c0ff',
-      variable: '#ffa657',
+      comment: 'var(--codeMirror-syntax-fgColor-comment, var(--color-codemirror-syntax-comment, #8b949e))',
+      constant: 'var(--codeMirror-syntax-fgColor-constant, var(--color-codemirror-syntax-constant, #79c0ff))',
+      entity: 'var(--codeMirror-syntax-fgColor-entity, var(--color-codemirror-syntax-entity, #d2a8ff))',
+      keyword: 'var(--codeMirror-syntax-fgColor-keyword, var(--color-codemirror-syntax-keyword, #ff7b72))',
+      storage: 'var(--codeMirror-syntax-fgColor-storage, var(--color-codemirror-syntax-storage, #ff7b72))',
+      string: 'var(--codeMirror-syntax-fgColor-string, var(--color-codemirror-syntax-string, #a5d6ff))',
+      support: 'var(--codeMirror-syntax-fgColor-support, var(--color-codemirror-syntax-support, #79c0ff))',
+      variable: 'var(--codeMirror-syntax-fgColor-variable, var(--color-codemirror-syntax-variable, #ffa657))',
     },
   },
   checks: {
-    bg: '#010409',
-    runBorderWidth: '1px',
-    containerBorderWidth: '1px',
-    textPrimary: '#e6edf3',
-    textSecondary: '#7d8590',
-    textLink: '#2f81f7',
-    btnIcon: '#7d8590',
-    btnHoverIcon: '#e6edf3',
-    btnHoverBg: 'rgba(110,118,129,0.1)',
-    inputText: '#7d8590',
-    inputPlaceholderText: '#6e7681',
-    inputFocusText: '#e6edf3',
-    inputBg: '#161b22',
-    inputShadow: '0 0 0 1px (obj) => (0, get_1.default)(obj, path)',
-    donutError: '#f85149',
-    donutPending: '#d29922',
-    donutSuccess: '#2ea043',
-    donutNeutral: '#8b949e',
-    dropdownText: '#e6edf3',
-    dropdownBg: '#161b22',
-    dropdownBorder: '#30363d',
-    dropdownShadow: 'rgba(1,4,9,0.3)',
-    dropdownHoverText: '#e6edf3',
-    dropdownHoverBg: 'rgba(110,118,129,0.1)',
-    dropdownBtnHoverText: '#e6edf3',
-    dropdownBtnHoverBg: 'rgba(110,118,129,0.1)',
-    scrollbarThumbBg: 'rgba(110,118,129,0.4)',
-    headerLabelText: '#7d8590',
-    headerLabelOpenText: '#e6edf3',
-    headerBorder: '#21262d',
-    headerIcon: '#7d8590',
-    lineText: '#7d8590',
-    lineNumText: '#6e7681',
-    lineTimestampText: '#6e7681',
-    lineHoverBg: 'rgba(110,118,129,0.1)',
-    lineSelectedBg: 'rgba(56,139,253,0.1)',
-    lineSelectedNumText: '#2f81f7',
-    lineDtFmText: '#ffffff',
-    lineDtFmBg: '#9e6a03',
-    gateBg: 'rgba(187,128,9,0.15)',
-    gateText: '#7d8590',
-    gateWaitingText: '#d29922',
-    stepHeaderOpenBg: '#161b22',
-    stepErrorText: '#f85149',
-    stepWarningText: '#d29922',
-    loglineText: '#7d8590',
-    loglineNumText: '#6e7681',
-    loglineDebugText: '#a371f7',
-    loglineErrorText: '#7d8590',
-    loglineErrorNumText: '#6e7681',
-    loglineErrorBg: 'rgba(248,81,73,0.1)',
-    loglineWarningText: '#7d8590',
-    loglineWarningNumText: '#d29922',
-    loglineWarningBg: 'rgba(187,128,9,0.15)',
-    loglineCommandText: '#2f81f7',
-    loglineSectionText: '#3fb950',
+    bg: 'var(--color-checks-bg, #010409)',
+    runBorderWidth: 'var(--color-checks-run-border-width, 1px)',
+    containerBorderWidth: 'var(--color-checks-container-border-width, 1px)',
+    textPrimary: 'var(--color-checks-text-primary, #e6edf3)',
+    textSecondary: 'var(--color-checks-text-secondary, #848d97)',
+    textLink: 'var(--color-checks-text-link, #2f81f7)',
+    btnIcon: 'var(--color-checks-btn-icon, #848d97)',
+    btnHoverIcon: 'var(--color-checks-btn-hover-icon, #e6edf3)',
+    btnHoverBg: 'var(--color-checks-btn-hover-bg, rgba(110,118,129,0.1))',
+    inputText: 'var(--color-checks-input-text, #848d97)',
+    inputPlaceholderText: 'var(--color-checks-input-placeholder-text, #6e7681)',
+    inputFocusText: 'var(--color-checks-input-focus-text, #e6edf3)',
+    inputBg: 'var(--color-checks-input-bg, #161b22)',
+    inputShadow: 'var(--color-checks-input-shadow, 0 0 0 1px #30363d)',
+    donutError: 'var(--color-checks-donut-error, #f85149)',
+    donutPending: 'var(--color-checks-donut-pending, #d29922)',
+    donutSuccess: 'var(--color-checks-donut-success, #2ea043)',
+    donutNeutral: 'var(--color-checks-donut-neutral, #8b949e)',
+    dropdownText: 'var(--color-checks-dropdown-text, #e6edf3)',
+    dropdownBg: 'var(--color-checks-dropdown-bg, #161b22)',
+    dropdownBorder: 'var(--color-checks-dropdown-border, #30363d)',
+    dropdownShadow: 'var(--color-checks-dropdown-shadow, rgba(1,4,9,0.3))',
+    dropdownHoverText: 'var(--color-checks-dropdown-hover-text, #e6edf3)',
+    dropdownHoverBg: 'var(--color-checks-dropdown-hover-bg, rgba(110,118,129,0.1))',
+    dropdownBtnHoverText: 'var(--color-checks-dropdown-btn-hover-text, #e6edf3)',
+    dropdownBtnHoverBg: 'var(--color-checks-dropdown-btn-hover-bg, rgba(110,118,129,0.1))',
+    scrollbarThumbBg: 'var(--color-checks-scrollbar-thumb-bg, rgba(110,118,129,0.4))',
+    headerLabelText: 'var(--color-checks-header-label-text, #848d97)',
+    headerLabelOpenText: 'var(--color-checks-header-label-open-text, #e6edf3)',
+    headerBorder: 'var(--color-checks-header-border, #21262d)',
+    headerIcon: 'var(--color-checks-header-icon, #848d97)',
+    lineText: 'var(--color-checks-line-text, #848d97)',
+    lineNumText: 'var(--color-checks-line-num-text, #6e7681)',
+    lineTimestampText: 'var(--color-checks-line-timestamp-text, #6e7681)',
+    lineHoverBg: 'var(--color-checks-line-hover-bg, rgba(110,118,129,0.1))',
+    lineSelectedBg: 'var(--color-checks-line-selected-bg, rgba(56,139,253,0.1))',
+    lineSelectedNumText: 'var(--color-checks-line-selected-num-text, #2f81f7)',
+    lineDtFmText: 'var(--color-checks-line-dt-fm-text, #ffffff)',
+    lineDtFmBg: 'var(--color-checks-line-dt-fm-bg, #9e6a03)',
+    gateBg: 'var(--color-checks-gate-bg, rgba(187,128,9,0.15))',
+    gateText: 'var(--color-checks-gate-text, #848d97)',
+    gateWaitingText: 'var(--color-checks-gate-waiting-text, #d29922)',
+    stepHeaderOpenBg: 'var(--color-checks-step-header-open-bg, #161b22)',
+    stepErrorText: 'var(--color-checks-step-error-text, #f85149)',
+    stepWarningText: 'var(--color-checks-step-warning-text, #d29922)',
+    loglineText: 'var(--color-checks-logline-text, #848d97)',
+    loglineNumText: 'var(--color-checks-logline-num-text, #6e7681)',
+    loglineDebugText: 'var(--color-checks-logline-debug-text, #a371f7)',
+    loglineErrorText: 'var(--color-checks-logline-error-text, #848d97)',
+    loglineErrorNumText: 'var(--color-checks-logline-error-num-text, #6e7681)',
+    loglineErrorBg: 'var(--color-checks-logline-error-bg, rgba(248,81,73,0.1))',
+    loglineWarningText: 'var(--color-checks-logline-warning-text, #848d97)',
+    loglineWarningNumText: 'var(--color-checks-logline-warning-num-text, #d29922)',
+    loglineWarningBg: 'var(--color-checks-logline-warning-bg, rgba(187,128,9,0.15))',
+    loglineCommandText: 'var(--color-checks-logline-command-text, #2f81f7)',
+    loglineSectionText: 'var(--color-checks-logline-section-text, #3fb950)',
     ansi: {
-      black: '#0d1117',
-      blackBright: '#161b22',
-      white: '#b1bac4',
-      whiteBright: '#b1bac4',
-      gray: '#6e7681',
-      red: '#ff7b72',
-      redBright: '#ffa198',
-      green: '#3fb950',
-      greenBright: '#56d364',
-      yellow: '#d29922',
-      yellowBright: '#e3b341',
-      blue: '#58a6ff',
-      blueBright: '#79c0ff',
-      magenta: '#bc8cff',
-      magentaBright: '#d2a8ff',
-      cyan: '#76e3ea',
-      cyanBright: '#b3f0ff',
+      black: 'var(--color-checks-ansi-black, #0d1117)',
+      blackBright: 'var(--color-checks-ansi-black-bright, #161b22)',
+      white: 'var(--color-checks-ansi-white, #b1bac4))',
+      whiteBright: 'var(--color-checks-ansi-white-bright, #b1bac4)',
+      gray: 'var(--color-checks-ansi-gray, #6e7681)',
+      red: 'var(--color-checks-ansi-red, #ff7b72)',
+      redBright: 'var(--color-checks-ansi-red-bright, #ffa198)',
+      green: 'var(--color-checks-ansi-green, #3fb950)',
+      greenBright: 'var(--color-checks-ansi-green-bright, #56d364)',
+      yellow: 'var(--color-checks-ansi-yellow, #d29922)',
+      yellowBright: 'var(--color-checks-ansi-yellow-bright, #e3b341)',
+      blue: 'var(--color-checks-ansi-blue, #58a6ff)',
+      blueBright: 'var(--color-checks-ansi-blue-bright, #79c0ff)',
+      magenta: 'var(--color-checks-ansi-magenta, #bc8cff)',
+      magentaBright: 'var(--color-checks-ansi-magenta-bright, #d2a8ff)',
+      cyan: 'var(--color-checks-ansi-cyan, #76e3ea)',
+      cyanBright: 'var(--color-checks-ansi-cyan-bright, #b3f0ff)',
     },
   },
   project: {
-    headerBg: '#0d1117',
-    sidebarBg: '#161b22',
-    gradientIn: '#161b22',
-    gradientOut: 'rgba(22,27,34,0)',
+    headerBg: 'var(--color-project-header-bg, #0d1117)',
+    sidebarBg: 'var(--color-project-sidebar-bg, #161b22)',
+    gradientIn: 'var(--color-project-gradient-in, #161b22)',
+    gradientOut: 'var(--color-project-gradient-out, rgba(22,27,34,0))',
   },
   mktg: {
     btn: {
-      bg: '#f6f8fa',
+      bg: 'var(--color-mktg-btn-bg, #f6f8fa))',
       shadow: {
-        outline: 'rgb(255 255 255 / 25%) 0 0 0 1px inset',
-        focus: 'rgb(255 255 255 / 25%) 0 0 0 4px',
+        outline: 'var(--color-mktg-btn-shadow-outline, rgb(255 255 255 / 25%) 0 0 0 1px inset))',
+        focus: 'var(--color-mktg-btn-shadow-focus, rgb(255 255 255 / 25%) 0 0 0 4px))',
         hover:
-          '0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07)',
-        hoverMuted: 'rgb(255 255 255) 0 0 0 2px inset',
+          'var(--color-mktg-btn-shadow-hover, 0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07)))',
+        hoverMuted: 'var(--color-mktg-btn-shadow-hover-muted, rgb(255 255 255) 0 0 0 2px inset))',
       },
     },
   },
   control: {
     borderColor: {
-      emphasis: '#606771',
+      emphasis: 'var(--color-control-border-color-emphasis, #606771)',
     },
   },
   avatar: {
-    bg: 'rgba(255,255,255,0.1)',
-    border: 'rgba(240,246,252,0.1)',
-    stackFade: '#30363d',
-    stackFadeMore: '#21262d',
-    childShadow: '0 0 0 2px #0d1117',
+    bg: 'var(--avatar-bgColor, var(--color-avatar-bg, rgba(255,255,255,0.1)))',
+    border: 'var(--avatar-borderColor, var(--color-avatar-border, rgba(240,246,252,0.1)))',
+    stackFade: 'var(--avatarStack-fade-bgColor-default, var(--color-avatar-stack-fade, #30363d))',
+    stackFadeMore: 'var(--avatarStack-fade-bgColor-muted, var(--color-avatar-stack-fade-more, #21262d))',
+    childShadow: 'var(--avatar-shadow, var(--color-avatar-child-shadow, 0 0 0 2px #0d1117))',
   },
   topicTag: {
-    border: 'rgba(0,0,0,0)',
+    border: 'var(--topicTag-borderColor, var(--color-topic-tag-border, transparent))',
   },
   counter: {
-    border: 'rgba(0,0,0,0)',
+    border: 'var(--counter-borderColor, var(--color-counter-border, transparent))',
   },
   selectMenu: {
-    backdropBorder: '#484f58',
-    tapHighlight: 'rgba(48,54,61,0.5)',
-    tapFocusBg: '#0c2d6b',
+    backdropBorder: 'var(--selectMenu-borderColor, var(--color-select-menu-backdrop-border, #484f58))',
+    tapHighlight: 'var(--control-bgColor-active, var(--color-select-menu-tap-highlight, rgba(48,54,61,0.5)))',
+    tapFocusBg: 'var(--selectMenu-bgColor-active, var(--color-select-menu-tap-focus-bg, #0c2d6b))',
   },
   overlay: {
-    shadow: '0 0 0 1px #30363d, 0 16px 32px rgba(1,4,9,0.85)',
-    backdrop: 'rgba(22,27,34,0.4)',
+    shadow:
+      'var(--shadow-floating-small, var(--color-overlay-shadow, 0 0 0 1px #30363d, 0 16px 32px rgba(1,4,9,0.85)))',
+    backdrop: 'var(--overlay-backdrop-bgColor, var(--color-overlay-backdrop, rgba(22,27,34,0.4)))',
   },
   header: {
-    text: 'rgba(255,255,255,0.7)',
-    bg: '#161b22',
-    divider: '#8b949e',
-    logo: '#f0f6fc',
+    text: 'var(--header-fgColor-default, var(--color-header-text, rgba(255,255,255,0.7)))',
+    bg: 'var(--header-bgColor, var(--color-header-bg, #161b22))',
+    divider: 'var(--header-borderColor-divider, var(--color-header-divider, #8b949e))',
+    logo: 'var(--header-fgColor-logo, var(--color-header-logo, #f0f6fc))',
   },
   headerSearch: {
-    bg: '#0d1117',
-    border: '#30363d',
+    bg: 'var(--headerSearch-bgColor, var(--color-header-search-bg, #0d1117))',
+    border: 'var(--headerSearch-borderColor, var(--color-header-search-border, #30363d))',
   },
   sidenav: {
-    selectedBg: '#21262d',
+    selectedBg: 'var(--sideNav-bgColor-selected, var(--color-sidenav-selected-bg, #21262d))',
   },
   menu: {
-    bgActive: '#161b22',
+    bgActive: 'var(--menu-bgColor-active, var(--color-menu-bg-active, #161b22))',
   },
   input: {
-    disabledBg: 'rgba(110,118,129,0)',
+    disabledBg: 'var(--control-bgColor-disabled, var(--color-input-disabled-bg, rgba(110,118,129,0)))',
   },
   timeline: {
-    badgeBg: '#21262d',
+    badgeBg: 'var(--timelineBadge-bgColor, var(--color-timeline-badge-bg, #21262d))',
   },
   ansi: {
-    black: '#484f58',
-    blackBright: '#6e7681',
-    white: '#b1bac4',
-    whiteBright: '#ffffff',
-    gray: '#6e7681',
-    red: '#ff7b72',
-    redBright: '#ffa198',
-    green: '#3fb950',
-    greenBright: '#56d364',
-    yellow: '#d29922',
-    yellowBright: '#e3b341',
-    blue: '#58a6ff',
-    blueBright: '#79c0ff',
-    magenta: '#bc8cff',
-    magentaBright: '#d2a8ff',
-    cyan: '#39c5cf',
-    cyanBright: '#56d4dd',
+    black: 'var(--color-ansi-black, #484f58)',
+    blackBright: 'var(--color-ansi-black-bright, #6e7681)',
+    white: 'var(--color-ansi-white, #b1bac4)',
+    whiteBright: 'var(--color-ansi-white-bright, #ffffff)',
+    gray: 'var(--color-ansi-gray, #6e7681)',
+    red: 'var(--color-ansi-red, #ff7b72)',
+    redBright: 'var(--color-ansi-red-bright, #ffa198)',
+    green: 'var(--color-ansi-green, #3fb950)',
+    greenBright: 'var(--color-ansi-green-bright, #56d364)',
+    yellow: 'var(--color-ansi-yellow, #d29922)',
+    yellowBright: 'var(--color-ansi-yellow-bright, #e3b341)',
+    blue: 'var(--color-ansi-blue, #58a6ff)',
+    blueBright: 'var(--color-ansi-blue-bright, #79c0ff)',
+    magenta: 'var(--color-ansi-magenta, #bc8cff)',
+    magentaBright: 'var(--color-ansi-magenta-bright, #d2a8ff)',
+    cyan: 'var(--color-ansi-cyan, #39c5cf)',
+    cyanBright: 'var(--color-ansi-cyan-bright, #56d4dd)',
   },
   btn: {
-    text: '#c9d1d9',
-    bg: '#21262d',
-    border: 'rgba(240,246,252,0.1)',
-    shadow: '0 0 transparent',
-    insetShadow: '0 0 transparent',
-    hoverBg: '#30363d',
-    hoverBorder: '#8b949e',
-    activeBg: 'hsla(212,12%,18%,1)',
-    activeBorder: '#6e7681',
-    selectedBg: '#161b22',
-    counterBg: '#30363d',
+    text: 'var(--button-default-fgColor-rest, var(--color-btn-text, #c9d1d9))',
+    bg: 'var(--button-default-bgColor-rest, var(--color-btn-bg, #21262d))',
+    border: 'var(--button-default-borderColor-rest, var(--color-btn-border, rgba(240,246,252,0.1)))',
+    shadow: 'var(--button-default-shadow-resting, var(--color-btn-shadow, 0 0 transparent))',
+    insetShadow: 'var(--button-default-shadow-inset, var(--color-btn-inset-shadow, 0 0 transparent))',
+    hoverBg: 'var(--button-default-bgColor-hover, var(--color-btn-hover-bg, #30363d))',
+    hoverBorder: 'var(--button-default-borderColor-hover, var(--color-btn-hover-border, #8b949e))',
+    activeBg: 'var(--button-default-bgColor-active, var(--color-btn-active-bg, hsla(212,12%,18%,1)))',
+    activeBorder: 'var(--button-default-borderColor-active, var(--color-btn-active-border, #6e7681))',
+    selectedBg: 'var(--button-default-bgColor-selected, var(--color-btn-selected-bg, #161b22))',
+    counterBg: 'var(--buttonCounter-default-bgColor-rest, var(--color-btn-counter-bg, #30363d))',
     primary: {
-      text: '#ffffff',
-      bg: '#238636',
-      border: 'rgba(240,246,252,0.1)',
-      shadow: '0 0 transparent',
-      insetShadow: '0 0 transparent',
-      hoverBg: '#2ea043',
-      hoverBorder: 'rgba(240,246,252,0.1)',
-      selectedBg: '#238636',
-      selectedShadow: '0 0 transparent',
-      disabledText: 'rgba(255,255,255,0.5)',
-      disabledBg: 'rgba(35,134,54,0.6)',
-      disabledBorder: 'rgba(240,246,252,0.1)',
-      icon: '#ffffff',
-      counterBg: 'rgba(4,38,15,0.2)',
+      text: 'var(--button-primary-fgColor-rest, var(--color-btn-primary-text, #ffffff))',
+      bg: 'var(--button-primary-bgColor-rest, var(--color-btn-primary-bg, #238636))',
+      border: 'var(--button-primary-borderColor-rest, var(--color-btn-primary-border, rgba(240,246,252,0.1)))',
+      shadow: 'var(--shadow-resting-small, var(--color-btn-primary-shadow, 0 0 transparent))',
+      insetShadow: 'var(--shadow-highlight, var(--color-btn-primary-inset-shadow, 0 0 transparent))',
+      hoverBg: 'var(--button-primary-bgColor-hover, var(--color-btn-primary-hover-bg, #2ea043))',
+      hoverBorder:
+        'var(--button-primary-borderColor-hover, var(--color-btn-primary-hover-border, rgba(240,246,252,0.1)))',
+      selectedBg: 'var(--button-primary-bgColor-active, var(--color-btn-primary-selected-bg, #238636))',
+      selectedShadow:
+        'var(--button-primary-shadow-selected, var(--color-btn-primary-selected-shadow, 0 0 transparent))',
+      disabledText:
+        'var(--button-primary-fgColor-disabled, var(--color-btn-primary-disabled-text, rgba(255,255,255,0.5)))',
+      disabledBg: 'var(--button-primary-bgColor-disabled, var(--color-btn-primary-disabled-bg, rgba(35,134,54,0.6)))',
+      disabledBorder:
+        'var(--button-primary-borderColor-disabled, var(--color-btn-primary-disabled-border, rgba(240,246,252,0.1)))',
+      icon: 'var(--button-primary-iconColor-rest, var(--color-btn-primary-icon, #ffffff))',
+      counterBg: 'var(--buttonCounter-primary-bgColor-rest, var(--color-btn-primary-counter-bg, rgba(4,38,15,0.2)))',
     },
     outline: {
-      text: '#388bfd',
-      hoverText: '#58a6ff',
-      hoverBg: '#30363d',
-      hoverBorder: 'rgba(240,246,252,0.1)',
-      hoverShadow: '0 1px 0 rgba(1,4,9,0.1)',
-      hoverInsetShadow: 'inset 0 1px 0 rgba(255,255,255,0.03)',
-      hoverCounterBg: 'rgba(5,29,77,0.2)',
-      selectedText: '#ffffff',
-      selectedBg: '#0d419d',
-      selectedBorder: 'rgba(240,246,252,0.1)',
-      selectedShadow: '0 0 transparent',
-      disabledText: 'rgba(88,166,255,0.5)',
-      disabledBg: '#0d1117',
-      disabledCounterBg: 'rgba(31,111,235,0.05)',
-      counterBg: 'rgba(5,29,77,0.2)',
-      hoverCounterFg: '#58a6ff',
-      disabledCounterFg: 'rgba(47,129,247,0.5)',
-      counterFg: '#388bfd',
+      text: 'var(--button-outline-fgColor-rest, var(--color-btn-outline-text, #388bfd))',
+      hoverText: 'var(--button-outline-fgColor-hover, var(--color-btn-outline-hover-text, #58a6ff))',
+      hoverBg: 'var(--button-outline-bgColor-hover, var(--color-btn-outline-hover-bg, #30363d))',
+      hoverBorder:
+        'var(--button-outline-borderColor-hover, var(--color-btn-outline-hover-border, rgba(240,246,252,0.1)))',
+      hoverShadow:
+        'var(--shadow-resting-small, var(--color-btn-outline-hover-shadow, 0 1px 0 rgba(1,4,9,0.1)))// HI_KATIE: no matches',
+      hoverInsetShadow:
+        'var(--shadow-highlight, var(--color-btn-outline-hover-inset-shadow, inset 0 1px 0 rgba(255,255,255,0.03)))// HI_KATIE: no matches',
+      hoverCounterBg:
+        'var(--buttonCounter-outline-bgColor-hover, var(--color-btn-outline-hover-counter-bg, rgba(5,29,77,0.2)))',
+      selectedText: 'var(--button-outline-fgColor-active, var(--color-btn-outline-selected-text, #ffffff))',
+      selectedBg: 'var(--button-outline-bgColor-active, var(--color-btn-outline-selected-bg, #0d419d))',
+      selectedBorder:
+        'var(--button-outline-borderColor-active, var(--color-btn-outline-selected-border, rgba(240,246,252,0.1)))',
+      selectedShadow:
+        'var(--button-outline-shadow-selected, var(--color-btn-outline-selected-shadow, 0 0 transparent))',
+      disabledText:
+        'var(--button-outline-fgColor-disabled, var(--color-btn-outline-disabled-text, rgba(88,166,255,0.5)))',
+      disabledBg: 'var(--button-outline-bgColor-disabled, var(--color-btn-outline-disabled-bg, #0d1117))',
+      disabledCounterBg:
+        'var(--buttonCounter-outline-bgColor-disabled, var(--color-btn-outline-disabled-counter-bg, rgba(31,111,235,0.05)))',
+      counterBg: 'var(--buttonCounter-outline-bgColor-rest, var(--color-btn-outline-counter-bg, rgba(5,29,77,0.2)))',
+      hoverCounterFg: 'var(--buttonCounter-outline-fgColor-hover, var(--color-btn-outline-hover-counter-fg, #58a6ff))',
+      disabledCounterFg:
+        'var(--buttonCounter-outline-fgColor-disabled, var(--color-btn-outline-disabled-counter-fg, rgba(47,129,247,0.5)))',
+      counterFg: 'var(--buttonCounter-outline-fgColor-rest, var(--color-btn-outline-counter-fg, #388bfd))',
     },
     danger: {
-      text: '#f85149',
-      hoverText: '#ffffff',
-      hoverBg: '#da3633',
-      hoverBorder: '#f85149',
-      hoverShadow: '0 0 transparent',
-      hoverInsetShadow: '0 0 transparent',
-      hoverIcon: '#ffffff',
-      hoverCounterBg: 'rgba(255,255,255,0.2)',
-      selectedText: '#ffffff',
-      selectedBg: '#b62324',
-      selectedBorder: '#ff7b72',
-      selectedShadow: '0 0 transparent',
-      disabledText: 'rgba(248,81,73,0.5)',
-      disabledBg: '#0d1117',
-      disabledCounterBg: 'rgba(218,54,51,0.05)',
-      counterBg: 'rgba(73,2,2,0.2)',
-      icon: '#f85149',
-      counterFg: '#f85149',
-      disabledCounterFg: 'rgba(248,81,73,0.5)',
-      hoverCounterFg: '#ffffff',
+      text: 'var(--button-danger-fgColor-rest, var(--color-btn-danger-text, #f85149))',
+      hoverText: 'var(--button-danger-fgColor-hover, var(--color-btn-danger-hover-text, #ffffff))',
+      hoverBg: 'var(--button-danger-bgColor-hover, var(--color-btn-danger-hover-bg, #da3633))',
+      hoverBorder: 'var(--button-danger-borderColor-hover, var(--color-btn-danger-hover-border, #f85149))',
+      hoverShadow: 'var(--shadow-resting-small, var(--color-btn-danger-hover-shadow, 0 0 transparent))',
+      hoverInsetShadow: 'var(--shadow-highlight, var(--color-btn-danger-hover-inset-shadow, 0 0 transparent))',
+      hoverIcon: 'var(--button-danger-iconColor-hover, var(--color-btn-danger-hover-icon, #ffffff))',
+      hoverCounterBg:
+        'var(--buttonCounter-danger-bgColor-hover, var(--color-btn-danger-hover-counter-bg, rgba(255,255,255,0.2)))',
+      selectedText: 'var(--button-danger-fgColor-active, var(--color-btn-danger-selected-text, #ffffff))',
+      selectedBg: 'var(--button-danger-bgColor-active, var(--color-btn-danger-selected-bg, #b62324))',
+      selectedBorder: 'var(--button-danger-borderColor-active, var(--color-btn-danger-selected-border, #ff7b72))',
+      selectedShadow: 'var(--button-danger-shadow-selected, var(--color-btn-danger-selected-shadow, 0 0 transparent))',
+      disabledText: 'var(--button-danger-fgColor-disabled, var(--color-btn-danger-disabled-text, rgba(248,81,73,0.5)))',
+      disabledBg: 'var(--button-danger-bgColor-disabled, var(--color-btn-danger-disabled-bg, #0d1117))',
+      disabledCounterBg:
+        'var(--buttonCounter-danger-bgColor-disabled, var(--color-btn-danger-disabled-counter-bg, rgba(218,54,51,0.05)))',
+      counterBg: 'var(--buttonCounter-danger-bgColor-rest, var(--color-btn-danger-counter-bg, rgba(73,2,2,0.2)))',
+      icon: 'var(--button-danger-iconColor-rest, var(--color-btn-danger-icon, #f85149))',
+      counterFg: 'var(--buttonCounter-danger-fgColor-rest, var(--color-btn-danger-counter-fg, #f85149))',
+      disabledCounterFg:
+        'var(--buttonCounter-danger-fgColor-disabled, var(--color-btn-danger-disabled-counter-fg, rgba(248,81,73,0.5)))',
+      hoverCounterFg: 'var(--buttonCounter-danger-fgColor-hover, var(--color-btn-danger-hover-counter-fg, #ffffff))',
     },
     inactive: {
-      bg: '#21262d',
-      text: '#8b949e',
+      bg: 'var(--button-inactive-bgColor-rest, var(--color-btn-inactive-bg, #21262d))',
+      text: 'var(--button-inactive-fgColor-rest, var(--color-btn-inactive-text, #8b949e))',
     },
   },
   underlinenav: {
-    icon: '#6e7681',
-    borderHover: 'rgba(110,118,129,0.4)',
+    icon: 'var(--underlineNav-iconColor-rest, var(--color-underlinenav-icon, #6e7681))',
+    borderHover: 'var(--underlineNav-borderColor-hover, var(--color-underlinenav-border-hover, rgba(110,118,129,0.4)))',
   },
   actionListItem: {
-    inlineDivider: 'rgba(48,54,61,0.48)',
+    inlineDivider: 'var(--borderColor-muted, var(--color-action-list-item-inline-divider, rgba(48,54,61,0.48)))',
     default: {
-      hoverBg: 'rgba(177,186,196,0.12)',
-      hoverBorder: 'rgba(0,0,0,0)',
-      activeBg: 'rgba(177,186,196,0.2)',
-      activeBorder: 'rgba(0,0,0,0)',
-      selectedBg: 'rgba(177,186,196,0.08)',
+      hoverBg:
+        'var(--control-transparent-bgColor-hover, var(--color-action-list-item-default-hover-bg, rgba(177,186,196,0.12)))',
+      hoverBorder:
+        'var(--control-transparent-borderColor-hover, var(--color-action-list-item-default-hover-border, transparent))',
+      activeBg:
+        'var(--control-transparent-bgColor-active, var(--color-action-list-item-default-active-bg, rgba(177,186,196,0.2)))',
+      activeBorder:
+        'var(--control-transparent-borderColor-active, var(--color-action-list-item-default-active-border, transparent))',
+      selectedBg:
+        'var(--control-transparent-bgColor-selected, var(--color-action-list-item-default-selected-bg, rgba(177,186,196,0.08)))',
     },
     danger: {
-      hoverBg: 'rgba(248,81,73,0.16)',
-      activeBg: 'rgba(248,81,73,0.24)',
-      hoverText: '#ff7b72',
+      hoverBg:
+        'var(--control-danger-bgColor-hover, var(--color-action-list-item-danger-hover-bg, rgba(248,81,73,0.16)))',
+      activeBg:
+        'var(--control-danger-bgColor-active, var(--color-action-list-item-danger-active-bg, rgba(248,81,73,0.24)))',
+      hoverText: 'var(--control-danger-fgColor-hover, var(--color-action-list-item-danger-hover-text, #ff7b72))',
     },
   },
   switchTrack: {
-    bg: 'rgba(110,118,129,0.1)',
-    hoverBg: 'hsla(215,8%,72%,0.1)',
-    activeBg: 'rgba(110,118,129,0.4)',
-    disabledBg: '#21262d',
-    fg: '#7d8590',
-    disabledFg: '#010409',
-    border: 'rgba(0,0,0,0)',
+    bg: 'var(--controlTrack-bgColor-rest, var(--color-switch-track-bg, rgba(110,118,129,0.1)))',
+    hoverBg: 'var(--controlTrack-bgColor-hover, var(--color-switch-track-hover-bg, hsla(215,8%,72%,0.1)))',
+    activeBg: 'var(--controlTrack-bgColor-active, var(--color-switch-track-active-bg, rgba(110,118,129,0.4)))',
+    disabledBg: 'var(--controlTrack-bgColor-disabled, var(--color-switch-track-disabled-bg, #21262d))',
+    fg: 'var(--controlTrack-fgColor-rest, var(--color-switch-track-fg, #848d97))',
+    disabledFg: 'var(--controlTrack-fgColor-disabled, var(--color-switch-track-disabled-fg, #010409))',
+    border: 'var(--controlTrack-borderColor-rest, var(--color-switch-track-border, transparent))',
     checked: {
-      bg: 'rgba(31,111,235,0.35)',
-      hoverBg: 'rgba(31,111,235,0.5)',
-      activeBg: 'rgba(31,111,235,0.65)',
-      fg: '#ffffff',
-      disabledFg: '#010409',
-      border: 'rgba(0,0,0,0)',
+      bg: 'var(--control-checked-bgColor-rest, var(--color-switch-track-checked-bg, rgba(31,111,235,0.35)))',
+      hoverBg: 'var(--control-checked-bgColor-hover, var(--color-switch-track-checked-hover-bg, rgba(31,111,235,0.5)))',
+      activeBg:
+        'var(--control-checked-bgColor-active, var(--color-switch-track-checked-active-bg, rgba(31,111,235,0.65)))',
+      fg: 'var(--control-checked-fgColor-rest, var(--color-switch-track-checked-fg, #ffffff))',
+      disabledFg: 'var(--control-checked-fgColor-disabled, var(--color-switch-track-checked-disabled-fg, #010409))',
+      border: 'var(--borderColor-transparent, var(--color-switch-track-checked-border, transparent))',
     },
   },
   switchKnob: {
-    bg: '#0d1117',
-    border: '#606771',
-    disabledBg: '#161b22',
+    bg: 'var(--controlKnob-bgColor-rest, var(--color-switch-knob-bg, #0d1117))',
+    border: 'var(--controlKnob-borderColor-rest, var(--color-switch-knob-border, #606771))',
+    disabledBg: 'var(--controlKnob-bgColor-disabled, var(--color-switch-knob-disabled-bg, #161b22))',
     checked: {
-      bg: '#0d1117',
-      disabledBg: '#161b22',
-      border: 'rgba(31,111,235,0.35)',
+      bg: 'var(--controlKnob-bgColor-checked, var(--color-switch-knob-checked-bg, #0d1117))',
+      disabledBg: 'var(--controlKnob-bgColor-disabled, var(--color-switch-knob-checked-disabled-bg, #161b22))',
+      border: 'var(--controlKnob-borderColor-checked, var(--color-switch-knob-checked-border, rgba(31,111,235,0.35)))',
     },
   },
   segmentedControl: {
-    bg: 'rgba(110,118,129,0.1)',
+    bg: 'var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg, rgba(110,118,129,0.1)))',
     button: {
-      bg: '#0d1117',
+      bg: 'var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg, #0d1117))',
       hover: {
-        bg: '#30363d',
+        bg: 'var(--controlTrack-bgColor-hover, var(--color-segmented-control-button-hover-bg, #30363d))',
       },
       active: {
-        bg: '#21262d',
+        bg: 'var(--controlTrack-bgColor-active, var(--color-segmented-control-button-active-bg, #21262d))',
       },
       selected: {
-        border: '#6e7681',
+        border: 'var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-selected-border, #6e7681))',
       },
     },
   },
   treeViewItem: {
     chevron: {
-      hoverBg: 'rgba(177,186,196,0.12)',
+      hoverBg:
+        'var(--control-transparent-bgColor-hover, var(--color-tree-view-item-chevron-hover-bg, rgba(177,186,196,0.12)))',
     },
     directory: {
-      fill: '#7d8590',
+      fill: 'var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-directory-fill, #848d97))',
     },
   },
   fg: {
-    default: '#e6edf3',
-    muted: '#7d8590',
-    subtle: '#6e7681',
-    onEmphasis: '#ffffff',
+    default: 'var(--fgColor-default, var(--color-fg-default, #e6edf3))',
+    muted: 'var(--fgColor-muted, var(--color-fg-muted, #848d97))',
+    subtle: 'var(--fgColor-muted, var(--color-fg-subtle, #6e7681))',
+    onEmphasis: 'var(--fgColor-onEmphasis, var(--color-fg-on-emphasis, #ffffff))',
   },
   canvas: {
-    default: '#0d1117',
-    overlay: '#161b22',
-    inset: '#010409',
-    subtle: '#161b22',
+    default: 'var(--bgColor-default, var(--color-canvas-default, #0d1117))',
+    overlay: 'var(--overlay-bgColor, var(--color-canvas-overlay, #161b22))',
+    inset: 'var(--bgColor-inset, var(--color-canvas-inset, #010409))',
+    subtle: 'var(--bgColor-muted, var(--color-canvas-subtle, #161b22))',
   },
   border: {
-    default: '#30363d',
-    muted: '#21262d',
-    subtle: 'rgba(240,246,252,0.1)',
+    default: 'var(--borderColor-default, var(--color-border-default, #30363d))',
+    muted: 'var(--borderColor-muted, var(--color-border-muted, #21262d))',
+    subtle: 'var(--borderColor-muted, var(--color-border-subtle, rgba(240,246,252,0.1)))',
   },
   shadow: {
-    small: '0 0 transparent',
-    medium: '0 3px 6px #010409',
-    large: '0 8px 24px #010409',
-    extraLarge: '0 12px 48px #010409',
+    small: 'var(--shadow-resting-small, var(--color-shadow-small, 0 0 transparent))',
+    medium: 'var(--shadow-resting-medium, var(--color-shadow-medium, 0 3px 6px #010409))',
+    large: 'var(--shadow-floating-large, var(--color-shadow-large, 0 8px 24px #010409))',
+    extraLarge: 'var(--shadow-floating-xlarge, var(--color-shadow-extra-large, 0 12px 48px #010409))',
   },
   neutral: {
-    emphasisPlus: '#6e7681',
-    emphasis: '#6e7681',
-    muted: 'rgba(110,118,129,0.4)',
-    subtle: 'rgba(110,118,129,0.1)',
+    emphasisPlus: 'var(--bgColor-emphasis, var(--color-neutral-emphasis-plus, #6e7681))',
+    emphasis: 'var(--bgColor-neutral-emphasis, var(--color-neutral-emphasis, #6e7681))',
+    muted: 'var(--borderColor-neutral-muted, var(--color-neutral-muted, rgba(110,118,129,0.4)))',
+    subtle: 'var(--bgColor-neutral-muted, var(--color-neutral-subtle, rgba(110,118,129,0.1)))',
   },
   accent: {
-    fg: '#2f81f7',
-    emphasis: '#1f6feb',
-    muted: 'rgba(56,139,253,0.4)',
-    subtle: 'rgba(56,139,253,0.1)',
+    fg: 'var(--fgColor-accent, var(--color-accent-fg, #2f81f7))',
+    emphasis: 'var(--bgColor-accent-emphasis, var(--color-accent-emphasis, #1f6feb))',
+    muted: 'var(--borderColor-accent-muted, var(--color-accent-muted, rgba(56,139,253,0.4)))',
+    subtle: 'var(--bgColor-accent-muted, var(--color-accent-subtle, rgba(56,139,253,0.1)))',
   },
   success: {
-    fg: '#3fb950',
-    emphasis: '#238636',
-    muted: 'rgba(46,160,67,0.4)',
-    subtle: 'rgba(46,160,67,0.15)',
+    fg: 'var(--fgColor-success, var(--color-success-fg, #3fb950))',
+    emphasis: 'var(--bgColor-success-emphasis, var(--color-success-emphasis, #238636))',
+    muted: 'var(--borderColor-success-muted, var(--color-success-muted, rgba(46,160,67,0.4)))',
+    subtle: 'var(--bgColor-success-muted, var(--color-success-subtle, rgba(46,160,67,0.15)))',
   },
   attention: {
-    fg: '#d29922',
-    emphasis: '#9e6a03',
-    muted: 'rgba(187,128,9,0.4)',
-    subtle: 'rgba(187,128,9,0.15)',
+    fg: 'var(--fgColor-attention, var(--color-attention-fg, #d29922))',
+    emphasis: 'var(--bgColor-attention-emphasis, var(--color-attention-emphasis, #9e6a03))',
+    muted: 'var(--borderColor-attention-muted, var(--color-attention-muted, rgba(187,128,9,0.4)))',
+    subtle: 'var(--bgColor-attention-muted, var(--color-attention-subtle, rgba(187,128,9,0.15)))',
   },
   severe: {
-    fg: '#db6d28',
-    emphasis: '#bd561d',
-    muted: 'rgba(219,109,40,0.4)',
-    subtle: 'rgba(219,109,40,0.1)',
+    fg: 'var(--fgColor-severe, var(--color-severe-fg, #db6d28))',
+    emphasis: 'var(--bgColor-severe-emphasis, var(--color-severe-emphasis, #bd561d))',
+    muted: 'var(--borderColor-severe-muted, var(--color-severe-muted, rgba(219,109,40,0.4)))',
+    subtle: 'var(--bgColor-severe-muted, var(--color-severe-subtle, rgba(219,109,40,0.1)))',
   },
   danger: {
-    fg: '#f85149',
-    emphasis: '#da3633',
-    muted: 'rgba(248,81,73,0.4)',
-    subtle: 'rgba(248,81,73,0.1)',
+    fg: 'var(--fgColor-danger, var(--color-danger-fg, #f85149))',
+    emphasis: 'var(--borderColor-danger-emphasis, var(--color-danger-emphasis, #da3633))',
+    muted: 'var(--borderColor-danger-muted, var(--color-danger-muted, rgba(248,81,73,0.4)))',
+    subtle: 'var(--bgColor-danger-muted, var(--color-danger-subtle, rgba(248,81,73,0.1)))',
   },
   open: {
-    fg: '#3fb950',
-    emphasis: '#238636',
-    muted: 'rgba(46,160,67,0.4)',
-    subtle: 'rgba(46,160,67,0.15)',
+    fg: 'var(--fgColor-open, var(--color-open-fg, #3fb950))',
+    emphasis: 'var(--bgColor-open-emphasis, var(--color-open-emphasis, #238636))',
+    muted: 'var(--borderColor-open-muted, var(--color-open-muted, rgba(46,160,67,0.4)))',
+    subtle: 'var(--bgColor-open-muted, var(--color-open-subtle, rgba(46,160,67,0.15)))',
   },
   closed: {
-    fg: '#f85149',
-    emphasis: '#da3633',
-    muted: 'rgba(248,81,73,0.4)',
-    subtle: 'rgba(248,81,73,0.15)',
+    fg: 'var(--fgColor-closed, var(--color-closed-fg, #f85149))',
+    emphasis: 'var(--bgColor-closed-emphasis, var(--color-closed-emphasis, #da3633))',
+    muted: 'var(--borderColor-closed-muted, var(--color-closed-muted, rgba(248,81,73,0.4)))',
+    subtle: 'var(--bgColor-closed-muted, var(--color-closed-subtle, rgba(248,81,73,0.15)))',
   },
   done: {
-    fg: '#a371f7',
-    emphasis: '#8957e5',
-    muted: 'rgba(163,113,247,0.4)',
-    subtle: 'rgba(163,113,247,0.1)',
+    fg: 'var(--fgColor-done, var(--color-done-fg, #a371f7))',
+    emphasis: 'var(--bgColor-done-emphasis, var(--color-done-emphasis, #8957e5))',
+    muted: 'var(--borderColor-done-muted, var(--color-done-muted, rgba(163,113,247,0.4)))',
+    subtle: 'var(--bgColor-done-muted, var(--color-done-subtle, rgba(163,113,247,0.1)))',
   },
   sponsors: {
-    fg: '#db61a2',
-    emphasis: '#bf4b8a',
-    muted: 'rgba(219,97,162,0.4)',
-    subtle: 'rgba(219,97,162,0.1)',
+    fg: 'var(--fgColor-sponsors, var(--color-sponsors-fg, #db61a2))',
+    emphasis: 'var(--bgColor-sponsors-emphasis, var(--color-sponsors-emphasis, #bf4b8a))',
+    muted: 'var(--borderColor-sponsors-muted, var(--color-sponsors-muted, rgba(219,97,162,0.4)))',
+    subtle: 'var(--bgColor-sponsors-muted, var(--color-sponsors-subtle, rgba(219,97,162,0.1)))',
   },
   primer: {
     fg: {
-      disabled: '#484f58',
+      disabled: 'var(--fgColor-disabled, var(--color-primer-fg-disabled, #484f58))',
     },
     canvas: {
-      backdrop: 'rgba(1,4,9,0.8)',
-      sticky: 'rgba(13,17,23,0.95)',
+      backdrop: 'var(--overlay-backdrop-bgColor, var(--color-primer-canvas-backdrop, rgba(1,4,9,0.8)))',
+      sticky: 'var(--color-primer-canvas-sticky, rgba(13,17,23,0.95))',
     },
     border: {
-      active: '#f78166',
-      contrast: 'rgba(255,255,255,0.2)',
+      active: 'var(--underlineNav-borderColor-active, var(--color-primer-border-active, #f78166))',
+      contrast: 'var(--borderColor-muted, var(--color-primer-border-contrast, rgba(255,255,255,0.2)))',
     },
     shadow: {
-      highlight: '0 0 transparent',
-      inset: '0 0 transparent',
+      highlight: 'var(--shadow-highlight, var(--color-primer-shadow-highlight, 0 0 transparent))',
+      inset: 'var(--shadow-inset, var(--color-primer-shadow-inset, 0 0 transparent))',
     },
   },
   scale: {
diff --git a/src/legacy-theme/ts/colors/dark_colorblind.ts b/src/legacy-theme/ts/colors/dark_colorblind.ts
index ba78797e6fe..0c337764a2e 100644
--- a/src/legacy-theme/ts/colors/dark_colorblind.ts
+++ b/src/legacy-theme/ts/colors/dark_colorblind.ts
@@ -1,463 +1,493 @@
 const colors = {
-  canvasDefaultTransparent: 'rgba(13,17,23,0)',
-  pageHeaderBg: '#0d1117',
+  canvasDefaultTransparent: 'var(--bgColor-transparent, var(--color-canvas-default-transparent, rgba(13,17,23,0)))',
+  pageHeaderBg: 'var(--page-header-bgColor, var(--color-page-header-bg, #0d1117))',
   marketingIcon: {
-    primary: '#79c0ff',
-    secondary: '#1f6feb',
+    primary: 'var(--color-marketing-icon-primary, #79c0ff)',
+    secondary: 'var(--color-marketing-icon-secondary, #1f6feb)',
   },
   diffBlob: {
     addition: {
-      numText: '#c9d1d9',
-      fg: '#c9d1d9',
-      numBg: 'rgba(88,166,255,0.3)',
-      lineBg: 'rgba(56,139,253,0.15)',
-      wordBg: 'rgba(56,139,253,0.4)',
+      numText: 'var(--diffBlob-addition-fgColor-num, var(--color-diff-blob-addition-num-text, #c9d1d9))',
+      fg: 'var(--diffBlob-addition-fgColor-text, var(--color-diff-blob-addition-fg, #c9d1d9))',
+      numBg: 'var(--diffBlob-addition-bgColor-num, var(--color-diff-blob-addition-num-bg, rgba(88,166,255,0.3)))',
+      lineBg: 'var(--diffBlob-addition-bgColor-line, var(--color-diff-blob-addition-line-bg, rgba(56,139,253,0.15)))',
+      wordBg: 'var(--diffBlob-addition-bgColor-word, var(--color-diff-blob-addition-word-bg, rgba(56,139,253,0.4)))',
     },
     deletion: {
-      numText: '#c9d1d9',
-      fg: '#c9d1d9',
-      numBg: 'rgba(212,118,22,0.3)',
-      lineBg: 'rgba(212,118,22,0.1)',
-      wordBg: 'rgba(212,118,22,0.4)',
+      numText: 'var(--diffBlob-deletion-fgColor-num, var(--color-diff-blob-deletion-num-text, #c9d1d9))',
+      fg: 'var(--diffBlob-deletion-fgColor-text, var(--color-diff-blob-deletion-fg, #c9d1d9))',
+      numBg: 'var(--diffBlob-deletion-bgColor-num, var(--color-diff-blob-deletion-num-bg, rgba(212,118,22,0.3)))',
+      lineBg: 'var(--diffBlob-deletion-bgColor-line, var(--color-diff-blob-deletion-line-bg, rgba(212,118,22,0.1)))',
+      wordBg: 'var(--diffBlob-deletion-bgColor-word, var(--color-diff-blob-deletion-word-bg, rgba(212,118,22,0.4)))',
     },
     hunk: {
-      numBg: 'rgba(56,139,253,0.4)',
+      numBg: 'var(--diffBlob-hunk-bgColor-num, var(--color-diff-blob-hunk-num-bg, rgba(56,139,253,0.4)))',
     },
     expander: {
-      icon: '#8b949e',
+      icon: 'var(--diffBlob-expander-iconColor, var(--color-diff-blob-expander-icon, #8b949e))',
     },
-    selectedLineHighlightMixBlendMode: 'screen',
+    selectedLineHighlightMixBlendMode: 'var(--color-diff-blob-selected-line-highlight-mix-blend-mode, screen)',
   },
   diffstat: {
-    deletionBorder: 'rgba(240,246,252,0.1)',
-    additionBorder: 'rgba(240,246,252,0.1)',
-    additionBg: '#58a6ff',
+    deletionBorder: 'var(--color-diffstat-deletion-border, rgba(240,246,252,0.1))',
+    additionBorder: 'var(--color-diffstat-addition-border, rgba(240,246,252,0.1))',
+    additionBg: 'var(--diffStat-addition-bgColor, var(--color-diffstat-addition-bg, #58a6ff))',
   },
   searchKeyword: {
-    hl: 'rgba(210,153,34,0.4)',
+    hl: 'var(--highlight-neutral-bgColor, var(--color-search-keyword-hl, rgba(210,153,34,0.4)))',
   },
   prettylights: {
     syntax: {
-      comment: '#8b949e',
-      constant: '#79c0ff',
-      entity: '#d2a8ff',
-      storageModifierImport: '#c9d1d9',
-      entityTag: '#a5d6ff',
-      keyword: '#ec8e2c',
-      string: '#a5d6ff',
-      variable: '#fdac54',
-      brackethighlighterUnmatched: '#d47616',
-      invalidIllegalText: '#f0f6fc',
-      invalidIllegalBg: '#6c3906',
-      carriageReturnText: '#f0f6fc',
-      carriageReturnBg: '#914d04',
-      stringRegexp: '#a5d6ff',
-      markupList: '#f2cc60',
-      markupHeading: '#1f6feb',
-      markupItalic: '#c9d1d9',
-      markupBold: '#c9d1d9',
-      markupDeletedText: '#ffe2bb',
-      markupDeletedBg: '#4e2906',
-      markupInsertedText: '#cae8ff',
-      markupInsertedBg: '#0c2d6b',
-      markupChangedText: '#ffe2bb',
-      markupChangedBg: '#4e2906',
-      markupIgnoredText: '#c9d1d9',
-      markupIgnoredBg: '#1158c7',
-      metaDiffRange: '#d2a8ff',
-      brackethighlighterAngle: '#8b949e',
-      sublimelinterGutterMark: '#484f58',
-      constantOtherReferenceLink: '#a5d6ff',
+      comment: 'var(--color-prettylights-syntax-comment, #8b949e)',
+      constant: 'var(--color-prettylights-syntax-constant, #79c0ff)',
+      entity: 'var(--color-prettylights-syntax-entity, #d2a8ff)',
+      storageModifierImport: 'var(--color-prettylights-syntax-storage-modifier-import, #c9d1d9)',
+      entityTag: 'var(--color-prettylights-syntax-entity-tag, #a5d6ff)',
+      keyword: 'var(--color-prettylights-syntax-keyword, #ec8e2c)',
+      string: 'var(--color-prettylights-syntax-string, #a5d6ff)',
+      variable: 'var(--color-prettylights-syntax-variable, #fdac54)',
+      brackethighlighterUnmatched: 'var(--color-prettylights-syntax-brackethighlighter-unmatched, #d47616)',
+      invalidIllegalText: 'var(--color-prettylights-syntax-invalid-illegal-text, #f0f6fc)',
+      invalidIllegalBg: 'var(--color-prettylights-syntax-invalid-illegal-bg, #6c3906)',
+      carriageReturnText: 'var(--color-prettylights-syntax-carriage-return-text, #f0f6fc)',
+      carriageReturnBg: 'var(--color-prettylights-syntax-carriage-return-bg, #914d04)',
+      stringRegexp: 'var(--color-prettylights-syntax-string-regexp, #a5d6ff)',
+      markupList: 'var(--color-prettylights-syntax-markup-list, #f2cc60)',
+      markupHeading: 'var(--color-prettylights-syntax-markup-heading, #1f6feb)',
+      markupItalic: 'var(--color-prettylights-syntax-markup-italic, #c9d1d9)',
+      markupBold: 'var(--color-prettylights-syntax-markup-bold, #c9d1d9)',
+      markupDeletedText: 'var(--color-prettylights-syntax-markup-deleted-text, #ffe2bb)',
+      markupDeletedBg: 'var(--color-prettylights-syntax-markup-deleted-bg, #4e2906)',
+      markupInsertedText: 'var(--color-prettylights-syntax-markup-inserted-text, #cae8ff)',
+      markupInsertedBg: 'var(--color-prettylights-syntax-markup-inserted-bg, #0c2d6b)',
+      markupChangedText: 'var(--color-prettylights-syntax-markup-changed-text, #ffe2bb)',
+      markupChangedBg: 'var(--color-prettylights-syntax-markup-changed-bg, #4e2906)',
+      markupIgnoredText: 'var(--color-prettylights-syntax-markup-ignored-text, #c9d1d9)',
+      markupIgnoredBg: 'var(--color-prettylights-syntax-markup-ignored-bg, #1158c7)',
+      metaDiffRange: 'var(--color-prettylights-syntax-meta-diff-range, #d2a8ff)',
+      brackethighlighterAngle: 'var(--color-prettylights-syntax-brackethighlighter-angle, #8b949e)',
+      sublimelinterGutterMark: 'var(--color-prettylights-syntax-sublimelinter-gutter-mark, #484f58)',
+      constantOtherReferenceLink: 'var(--color-prettylights-syntax-constant-other-reference-link, #a5d6ff)',
     },
   },
   codemirror: {
-    text: '#c9d1d9',
-    bg: '#0d1117',
-    guttersBg: '#0d1117',
-    guttermarkerText: '#0d1117',
-    guttermarkerSubtleText: '#6e7681',
-    linenumberText: '#8b949e',
-    cursor: '#c9d1d9',
-    selectionBg: 'rgba(56,139,253,0.4)',
-    activelineBg: 'rgba(110,118,129,0.1)',
-    matchingbracketText: '#c9d1d9',
-    linesBg: '#0d1117',
+    text: 'var(--codeMirror-fgColor, var(--color-codemirror-text, #c9d1d9))',
+    bg: 'var(--codeMirror-bgColor, var(--color-codemirror-bg, #0d1117))',
+    guttersBg: 'var(--codeMirror-gutters-bgColor, var(--color-codemirror-gutters-bg, #0d1117))',
+    guttermarkerText:
+      'var(--codeMirror-gutterMarker-fgColor-default, var(--color-codemirror-guttermarker-text, #0d1117))',
+    guttermarkerSubtleText:
+      'var(--codeMirror-gutterMarker-fgColor-muted, var(--color-codemirror-guttermarker-subtle-text, #6e7681))',
+    linenumberText: 'var(--codeMirror-lineNumber-fgColor, var(--color-codemirror-linenumber-text, #8b949e))',
+    cursor: 'var(--codeMirror-cursor-fgColor, var(--color-codemirror-cursor, #c9d1d9))',
+    selectionBg: 'var(--codeMirror-selection-bgColor, var(--color-codemirror-selection-bg, rgba(56,139,253,0.4)))',
+    activelineBg: 'var(--codeMirror-activeline-bgColor, var(--color-codemirror-activeline-bg, rgba(110,118,129,0.1)))',
+    matchingbracketText:
+      'var(--codeMirror-matchingBracket-fgColor, var(--color-codemirror-matchingbracket-text, #c9d1d9))',
+    linesBg: 'var(--codeMirror-lines-bgColor, var(--color-codemirror-lines-bg, #0d1117))',
     syntax: {
-      comment: '#8b949e',
-      constant: '#79c0ff',
-      entity: '#d2a8ff',
-      keyword: '#ec8e2c',
-      storage: '#ec8e2c',
-      string: '#a5d6ff',
-      support: '#79c0ff',
-      variable: '#fdac54',
+      comment: 'var(--codeMirror-syntax-fgColor-comment, var(--color-codemirror-syntax-comment, #8b949e))',
+      constant: 'var(--codeMirror-syntax-fgColor-constant, var(--color-codemirror-syntax-constant, #79c0ff))',
+      entity: 'var(--codeMirror-syntax-fgColor-entity, var(--color-codemirror-syntax-entity, #d2a8ff))',
+      keyword: 'var(--codeMirror-syntax-fgColor-keyword, var(--color-codemirror-syntax-keyword, #ec8e2c))',
+      storage: 'var(--codeMirror-syntax-fgColor-storage, var(--color-codemirror-syntax-storage, #ec8e2c))',
+      string: 'var(--codeMirror-syntax-fgColor-string, var(--color-codemirror-syntax-string, #a5d6ff))',
+      support: 'var(--codeMirror-syntax-fgColor-support, var(--color-codemirror-syntax-support, #79c0ff))',
+      variable: 'var(--codeMirror-syntax-fgColor-variable, var(--color-codemirror-syntax-variable, #fdac54))',
     },
   },
   checks: {
-    bg: '#010409',
-    runBorderWidth: '1px',
-    containerBorderWidth: '1px',
-    textPrimary: '#c9d1d9',
-    textSecondary: '#8b949e',
-    textLink: '#58a6ff',
-    btnIcon: '#8b949e',
-    btnHoverIcon: '#c9d1d9',
-    btnHoverBg: 'rgba(110,118,129,0.1)',
-    inputText: '#8b949e',
-    inputPlaceholderText: '#6e7681',
-    inputFocusText: '#c9d1d9',
-    inputBg: '#161b22',
-    inputShadow: '0 0 0 1px (obj) => (0, get_1.default)(obj, path)',
-    donutError: '#d47616',
-    donutPending: '#d29922',
-    donutSuccess: '#388bfd',
-    donutNeutral: '#8b949e',
-    dropdownText: '#c9d1d9',
-    dropdownBg: '#161b22',
-    dropdownBorder: '#30363d',
-    dropdownShadow: 'rgba(1,4,9,0.3)',
-    dropdownHoverText: '#c9d1d9',
-    dropdownHoverBg: 'rgba(110,118,129,0.1)',
-    dropdownBtnHoverText: '#c9d1d9',
-    dropdownBtnHoverBg: 'rgba(110,118,129,0.1)',
-    scrollbarThumbBg: 'rgba(110,118,129,0.4)',
-    headerLabelText: '#8b949e',
-    headerLabelOpenText: '#c9d1d9',
-    headerBorder: '#21262d',
-    headerIcon: '#8b949e',
-    lineText: '#8b949e',
-    lineNumText: '#6e7681',
-    lineTimestampText: '#6e7681',
-    lineHoverBg: 'rgba(110,118,129,0.1)',
-    lineSelectedBg: 'rgba(56,139,253,0.1)',
-    lineSelectedNumText: '#58a6ff',
-    lineDtFmText: '#ffffff',
-    lineDtFmBg: '#9e6a03',
-    gateBg: 'rgba(187,128,9,0.15)',
-    gateText: '#8b949e',
-    gateWaitingText: '#d29922',
-    stepHeaderOpenBg: '#161b22',
-    stepErrorText: '#d47616',
-    stepWarningText: '#d29922',
-    loglineText: '#8b949e',
-    loglineNumText: '#6e7681',
-    loglineDebugText: '#a371f7',
-    loglineErrorText: '#8b949e',
-    loglineErrorNumText: '#6e7681',
-    loglineErrorBg: 'rgba(212,118,22,0.1)',
-    loglineWarningText: '#8b949e',
-    loglineWarningNumText: '#d29922',
-    loglineWarningBg: 'rgba(187,128,9,0.15)',
-    loglineCommandText: '#58a6ff',
-    loglineSectionText: '#58a6ff',
+    bg: 'var(--color-checks-bg, #010409)',
+    runBorderWidth: 'var(--color-checks-run-border-width, 1px)',
+    containerBorderWidth: 'var(--color-checks-container-border-width, 1px)',
+    textPrimary: 'var(--color-checks-text-primary, #c9d1d9)',
+    textSecondary: 'var(--color-checks-text-secondary, #8b949e)',
+    textLink: 'var(--color-checks-text-link, #58a6ff)',
+    btnIcon: 'var(--color-checks-btn-icon, #8b949e)',
+    btnHoverIcon: 'var(--color-checks-btn-hover-icon, #c9d1d9)',
+    btnHoverBg: 'var(--color-checks-btn-hover-bg, rgba(110,118,129,0.1))',
+    inputText: 'var(--color-checks-input-text, #8b949e)',
+    inputPlaceholderText: 'var(--color-checks-input-placeholder-text, #6e7681)',
+    inputFocusText: 'var(--color-checks-input-focus-text, #c9d1d9)',
+    inputBg: 'var(--color-checks-input-bg, #161b22)',
+    inputShadow: 'var(--color-checks-input-shadow, 0 0 0 1px #30363d)',
+    donutError: 'var(--color-checks-donut-error, #d47616)',
+    donutPending: 'var(--color-checks-donut-pending, #d29922)',
+    donutSuccess: 'var(--color-checks-donut-success, #388bfd)',
+    donutNeutral: 'var(--color-checks-donut-neutral, #8b949e)',
+    dropdownText: 'var(--color-checks-dropdown-text, #c9d1d9)',
+    dropdownBg: 'var(--color-checks-dropdown-bg, #161b22)',
+    dropdownBorder: 'var(--color-checks-dropdown-border, #30363d)',
+    dropdownShadow: 'var(--color-checks-dropdown-shadow, rgba(1,4,9,0.3))',
+    dropdownHoverText: 'var(--color-checks-dropdown-hover-text, #c9d1d9)',
+    dropdownHoverBg: 'var(--color-checks-dropdown-hover-bg, rgba(110,118,129,0.1))',
+    dropdownBtnHoverText: 'var(--color-checks-dropdown-btn-hover-text, #c9d1d9)',
+    dropdownBtnHoverBg: 'var(--color-checks-dropdown-btn-hover-bg, rgba(110,118,129,0.1))',
+    scrollbarThumbBg: 'var(--color-checks-scrollbar-thumb-bg, rgba(110,118,129,0.4))',
+    headerLabelText: 'var(--color-checks-header-label-text, #8b949e)',
+    headerLabelOpenText: 'var(--color-checks-header-label-open-text, #c9d1d9)',
+    headerBorder: 'var(--color-checks-header-border, #21262d)',
+    headerIcon: 'var(--color-checks-header-icon, #8b949e)',
+    lineText: 'var(--color-checks-line-text, #8b949e)',
+    lineNumText: 'var(--color-checks-line-num-text, #6e7681)',
+    lineTimestampText: 'var(--color-checks-line-timestamp-text, #6e7681)',
+    lineHoverBg: 'var(--color-checks-line-hover-bg, rgba(110,118,129,0.1))',
+    lineSelectedBg: 'var(--color-checks-line-selected-bg, rgba(56,139,253,0.1))',
+    lineSelectedNumText: 'var(--color-checks-line-selected-num-text, #58a6ff)',
+    lineDtFmText: 'var(--color-checks-line-dt-fm-text, #ffffff)',
+    lineDtFmBg: 'var(--color-checks-line-dt-fm-bg, #9e6a03)',
+    gateBg: 'var(--color-checks-gate-bg, rgba(187,128,9,0.15))',
+    gateText: 'var(--color-checks-gate-text, #8b949e)',
+    gateWaitingText: 'var(--color-checks-gate-waiting-text, #d29922)',
+    stepHeaderOpenBg: 'var(--color-checks-step-header-open-bg, #161b22)',
+    stepErrorText: 'var(--color-checks-step-error-text, #d47616)',
+    stepWarningText: 'var(--color-checks-step-warning-text, #d29922)',
+    loglineText: 'var(--color-checks-logline-text, #8b949e)',
+    loglineNumText: 'var(--color-checks-logline-num-text, #6e7681)',
+    loglineDebugText: 'var(--color-checks-logline-debug-text, #a371f7)',
+    loglineErrorText: 'var(--color-checks-logline-error-text, #8b949e)',
+    loglineErrorNumText: 'var(--color-checks-logline-error-num-text, #6e7681)',
+    loglineErrorBg: 'var(--color-checks-logline-error-bg, rgba(212,118,22,0.1))',
+    loglineWarningText: 'var(--color-checks-logline-warning-text, #8b949e)',
+    loglineWarningNumText: 'var(--color-checks-logline-warning-num-text, #d29922)',
+    loglineWarningBg: 'var(--color-checks-logline-warning-bg, rgba(187,128,9,0.15))',
+    loglineCommandText: 'var(--color-checks-logline-command-text, #58a6ff)',
+    loglineSectionText: 'var(--color-checks-logline-section-text, #58a6ff)',
     ansi: {
-      black: '#0d1117',
-      blackBright: '#161b22',
-      white: '#b1bac4',
-      whiteBright: '#b1bac4',
-      gray: '#6e7681',
-      red: '#ec8e2c',
-      redBright: '#fdac54',
-      green: '#58a6ff',
-      greenBright: '#79c0ff',
-      yellow: '#d29922',
-      yellowBright: '#e3b341',
-      blue: '#58a6ff',
-      blueBright: '#79c0ff',
-      magenta: '#bc8cff',
-      magentaBright: '#d2a8ff',
-      cyan: '#76e3ea',
-      cyanBright: '#b3f0ff',
+      black: 'var(--color-checks-ansi-black, #0d1117)',
+      blackBright: 'var(--color-checks-ansi-black-bright, #161b22)',
+      white: 'var(--color-checks-ansi-white, #b1bac4))',
+      whiteBright: 'var(--color-checks-ansi-white-bright, #b1bac4)',
+      gray: 'var(--color-checks-ansi-gray, #6e7681)',
+      red: 'var(--color-checks-ansi-red, #ec8e2c)',
+      redBright: 'var(--color-checks-ansi-red-bright, #fdac54)',
+      green: 'var(--color-checks-ansi-green, #58a6ff)',
+      greenBright: 'var(--color-checks-ansi-green-bright, #79c0ff)',
+      yellow: 'var(--color-checks-ansi-yellow, #d29922)',
+      yellowBright: 'var(--color-checks-ansi-yellow-bright, #e3b341)',
+      blue: 'var(--color-checks-ansi-blue, #58a6ff)',
+      blueBright: 'var(--color-checks-ansi-blue-bright, #79c0ff)',
+      magenta: 'var(--color-checks-ansi-magenta, #bc8cff)',
+      magentaBright: 'var(--color-checks-ansi-magenta-bright, #d2a8ff)',
+      cyan: 'var(--color-checks-ansi-cyan, #76e3ea)',
+      cyanBright: 'var(--color-checks-ansi-cyan-bright, #b3f0ff)',
     },
   },
   project: {
-    headerBg: '#0d1117',
-    sidebarBg: '#161b22',
-    gradientIn: '#161b22',
-    gradientOut: 'rgba(22,27,34,0)',
+    headerBg: 'var(--color-project-header-bg, #0d1117)',
+    sidebarBg: 'var(--color-project-sidebar-bg, #161b22)',
+    gradientIn: 'var(--color-project-gradient-in, #161b22)',
+    gradientOut: 'var(--color-project-gradient-out, rgba(22,27,34,0))',
   },
   mktg: {
     btn: {
-      bg: '#f6f8fa',
+      bg: 'var(--color-mktg-btn-bg, #f6f8fa))',
       shadow: {
-        outline: 'rgb(255 255 255 / 25%) 0 0 0 1px inset',
-        focus: 'rgb(255 255 255 / 25%) 0 0 0 4px',
+        outline: 'var(--color-mktg-btn-shadow-outline, rgb(255 255 255 / 25%) 0 0 0 1px inset))',
+        focus: 'var(--color-mktg-btn-shadow-focus, rgb(255 255 255 / 25%) 0 0 0 4px))',
         hover:
-          '0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07)',
-        hoverMuted: 'rgb(255 255 255) 0 0 0 2px inset',
+          'var(--color-mktg-btn-shadow-hover, 0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07)))',
+        hoverMuted: 'var(--color-mktg-btn-shadow-hover-muted, rgb(255 255 255) 0 0 0 2px inset))',
       },
     },
   },
   control: {
     borderColor: {
-      emphasis: '#606771',
+      emphasis: 'var(--color-control-border-color-emphasis, #606771)',
     },
   },
   avatar: {
-    bg: 'rgba(255,255,255,0.1)',
-    border: 'rgba(240,246,252,0.1)',
-    stackFade: '#30363d',
-    stackFadeMore: '#21262d',
-    childShadow: '0 0 0 2px #0d1117',
+    bg: 'var(--avatar-bgColor, var(--color-avatar-bg, rgba(255,255,255,0.1)))',
+    border: 'var(--avatar-borderColor, var(--color-avatar-border, rgba(240,246,252,0.1)))',
+    stackFade: 'var(--avatarStack-fade-bgColor-default, var(--color-avatar-stack-fade, #30363d))',
+    stackFadeMore: 'var(--avatarStack-fade-bgColor-muted, var(--color-avatar-stack-fade-more, #21262d))',
+    childShadow: 'var(--avatar-shadow, var(--color-avatar-child-shadow, 0 0 0 2px #0d1117))',
   },
   topicTag: {
-    border: 'rgba(0,0,0,0)',
+    border: 'var(--topicTag-borderColor, var(--color-topic-tag-border, transparent))',
   },
   counter: {
-    border: 'rgba(0,0,0,0)',
+    border: 'var(--counter-borderColor, var(--color-counter-border, transparent))',
   },
   selectMenu: {
-    backdropBorder: '#484f58',
-    tapHighlight: 'rgba(48,54,61,0.5)',
-    tapFocusBg: '#0c2d6b',
+    backdropBorder: 'var(--selectMenu-borderColor, var(--color-select-menu-backdrop-border, #484f58))',
+    tapHighlight: 'var(--control-bgColor-active, var(--color-select-menu-tap-highlight, rgba(48,54,61,0.5)))',
+    tapFocusBg: 'var(--selectMenu-bgColor-active, var(--color-select-menu-tap-focus-bg, #0c2d6b))',
   },
   overlay: {
-    shadow: '0 0 0 1px #30363d, 0 16px 32px rgba(1,4,9,0.85)',
-    backdrop: 'rgba(22,27,34,0.4)',
+    shadow:
+      'var(--shadow-floating-small, var(--color-overlay-shadow, 0 0 0 1px #30363d, 0 16px 32px rgba(1,4,9,0.85)))',
+    backdrop: 'var(--overlay-backdrop-bgColor, var(--color-overlay-backdrop, rgba(22,27,34,0.4)))',
   },
   header: {
-    text: 'rgba(255,255,255,0.7)',
-    bg: '#161b22',
-    divider: '#8b949e',
-    logo: '#f0f6fc',
+    text: 'var(--header-fgColor-default, var(--color-header-text, rgba(255,255,255,0.7)))',
+    bg: 'var(--header-bgColor, var(--color-header-bg, #161b22))',
+    divider: 'var(--header-borderColor-divider, var(--color-header-divider, #8b949e))',
+    logo: 'var(--header-fgColor-logo, var(--color-header-logo, #f0f6fc))',
   },
   headerSearch: {
-    bg: '#0d1117',
-    border: '#30363d',
+    bg: 'var(--headerSearch-bgColor, var(--color-header-search-bg, #0d1117))',
+    border: 'var(--headerSearch-borderColor, var(--color-header-search-border, #30363d))',
   },
   sidenav: {
-    selectedBg: '#21262d',
+    selectedBg: 'var(--sideNav-bgColor-selected, var(--color-sidenav-selected-bg, #21262d))',
   },
   menu: {
-    bgActive: '#161b22',
+    bgActive: 'var(--menu-bgColor-active, var(--color-menu-bg-active, #161b22))',
   },
   input: {
-    disabledBg: 'rgba(110,118,129,0)',
+    disabledBg: 'var(--control-bgColor-disabled, var(--color-input-disabled-bg, rgba(110,118,129,0)))',
   },
   timeline: {
-    badgeBg: '#21262d',
+    badgeBg: 'var(--timelineBadge-bgColor, var(--color-timeline-badge-bg, #21262d))',
   },
   ansi: {
-    black: '#484f58',
-    blackBright: '#6e7681',
-    white: '#b1bac4',
-    whiteBright: '#ffffff',
-    gray: '#6e7681',
-    red: '#ec8e2c',
-    redBright: '#fdac54',
-    green: '#58a6ff',
-    greenBright: '#79c0ff',
-    yellow: '#d29922',
-    yellowBright: '#e3b341',
-    blue: '#58a6ff',
-    blueBright: '#79c0ff',
-    magenta: '#bc8cff',
-    magentaBright: '#d2a8ff',
-    cyan: '#39c5cf',
-    cyanBright: '#56d4dd',
+    black: 'var(--color-ansi-black, #484f58)',
+    blackBright: 'var(--color-ansi-black-bright, #6e7681)',
+    white: 'var(--color-ansi-white, #b1bac4)',
+    whiteBright: 'var(--color-ansi-white-bright, #ffffff)',
+    gray: 'var(--color-ansi-gray, #6e7681)',
+    red: 'var(--color-ansi-red, #ec8e2c)',
+    redBright: 'var(--color-ansi-red-bright, #fdac54)',
+    green: 'var(--color-ansi-green, #58a6ff)',
+    greenBright: 'var(--color-ansi-green-bright, #79c0ff)',
+    yellow: 'var(--color-ansi-yellow, #d29922)',
+    yellowBright: 'var(--color-ansi-yellow-bright, #e3b341)',
+    blue: 'var(--color-ansi-blue, #58a6ff)',
+    blueBright: 'var(--color-ansi-blue-bright, #79c0ff)',
+    magenta: 'var(--color-ansi-magenta, #bc8cff)',
+    magentaBright: 'var(--color-ansi-magenta-bright, #d2a8ff)',
+    cyan: 'var(--color-ansi-cyan, #39c5cf)',
+    cyanBright: 'var(--color-ansi-cyan-bright, #56d4dd)',
   },
   btn: {
-    text: '#c9d1d9',
-    bg: '#21262d',
-    border: 'rgba(240,246,252,0.1)',
-    shadow: '0 0 transparent',
-    insetShadow: '0 0 transparent',
-    hoverBg: '#30363d',
-    hoverBorder: '#8b949e',
-    activeBg: 'hsla(212,12%,18%,1)',
-    activeBorder: '#6e7681',
-    selectedBg: '#161b22',
-    counterBg: '#30363d',
+    text: 'var(--button-default-fgColor-rest, var(--color-btn-text, #c9d1d9))',
+    bg: 'var(--button-default-bgColor-rest, var(--color-btn-bg, #21262d))',
+    border: 'var(--button-default-borderColor-rest, var(--color-btn-border, rgba(240,246,252,0.1)))',
+    shadow: 'var(--button-default-shadow-resting, var(--color-btn-shadow, 0 0 transparent))',
+    insetShadow: 'var(--button-default-shadow-inset, var(--color-btn-inset-shadow, 0 0 transparent))',
+    hoverBg: 'var(--button-default-bgColor-hover, var(--color-btn-hover-bg, #30363d))',
+    hoverBorder: 'var(--button-default-borderColor-hover, var(--color-btn-hover-border, #8b949e))',
+    activeBg: 'var(--button-default-bgColor-active, var(--color-btn-active-bg, hsla(212,12%,18%,1)))',
+    activeBorder: 'var(--button-default-borderColor-active, var(--color-btn-active-border, #6e7681))',
+    selectedBg: 'var(--button-default-bgColor-selected, var(--color-btn-selected-bg, #161b22))',
+    counterBg: 'var(--buttonCounter-default-bgColor-rest, var(--color-btn-counter-bg, #30363d))',
     primary: {
-      text: '#ffffff',
-      bg: '#1f6feb',
-      border: 'rgba(240,246,252,0.1)',
-      shadow: '0 0 transparent',
-      insetShadow: '0 0 transparent',
-      hoverBg: '#388bfd',
-      hoverBorder: 'rgba(240,246,252,0.1)',
-      selectedBg: '#1f6feb',
-      selectedShadow: '0 0 transparent',
-      disabledText: 'rgba(255,255,255,0.5)',
-      disabledBg: 'rgba(31,111,235,0.6)',
-      disabledBorder: 'rgba(240,246,252,0.1)',
-      icon: '#ffffff',
-      counterBg: 'rgba(5,29,77,0.2)',
+      text: 'var(--button-primary-fgColor-rest, var(--color-btn-primary-text, #ffffff))',
+      bg: 'var(--button-primary-bgColor-rest, var(--color-btn-primary-bg, #1f6feb))',
+      border: 'var(--button-primary-borderColor-rest, var(--color-btn-primary-border, rgba(240,246,252,0.1)))',
+      shadow: 'var(--shadow-resting-small, var(--color-btn-primary-shadow, 0 0 transparent))',
+      insetShadow: 'var(--shadow-highlight, var(--color-btn-primary-inset-shadow, 0 0 transparent))',
+      hoverBg: 'var(--button-primary-bgColor-hover, var(--color-btn-primary-hover-bg, #388bfd))',
+      hoverBorder:
+        'var(--button-primary-borderColor-hover, var(--color-btn-primary-hover-border, rgba(240,246,252,0.1)))',
+      selectedBg: 'var(--button-primary-bgColor-active, var(--color-btn-primary-selected-bg, #1f6feb))',
+      selectedShadow:
+        'var(--button-primary-shadow-selected, var(--color-btn-primary-selected-shadow, 0 0 transparent))',
+      disabledText:
+        'var(--button-primary-fgColor-disabled, var(--color-btn-primary-disabled-text, rgba(255,255,255,0.5)))',
+      disabledBg: 'var(--button-primary-bgColor-disabled, var(--color-btn-primary-disabled-bg, rgba(31,111,235,0.6)))',
+      disabledBorder:
+        'var(--button-primary-borderColor-disabled, var(--color-btn-primary-disabled-border, rgba(240,246,252,0.1)))',
+      icon: 'var(--button-primary-iconColor-rest, var(--color-btn-primary-icon, #ffffff))',
+      counterBg: 'var(--buttonCounter-primary-bgColor-rest, var(--color-btn-primary-counter-bg, rgba(5,29,77,0.2)))',
     },
     outline: {
-      text: '#388bfd',
-      hoverText: '#58a6ff',
-      hoverBg: '#30363d',
-      hoverBorder: 'rgba(240,246,252,0.1)',
-      hoverShadow: '0 1px 0 rgba(1,4,9,0.1)',
-      hoverInsetShadow: 'inset 0 1px 0 rgba(255,255,255,0.03)',
-      hoverCounterBg: 'rgba(5,29,77,0.2)',
-      selectedText: '#ffffff',
-      selectedBg: '#0d419d',
-      selectedBorder: 'rgba(240,246,252,0.1)',
-      selectedShadow: '0 0 transparent',
-      disabledText: 'rgba(88,166,255,0.5)',
-      disabledBg: '#0d1117',
-      disabledCounterBg: 'rgba(31,111,235,0.05)',
-      counterBg: 'rgba(5,29,77,0.2)',
-      hoverCounterFg: '#58a6ff',
-      disabledCounterFg: 'rgba(88,166,255,0.5)',
-      counterFg: '#388bfd',
+      text: 'var(--button-outline-fgColor-rest, var(--color-btn-outline-text, #388bfd))',
+      hoverText: 'var(--button-outline-fgColor-hover, var(--color-btn-outline-hover-text, #58a6ff))',
+      hoverBg: 'var(--button-outline-bgColor-hover, var(--color-btn-outline-hover-bg, #30363d))',
+      hoverBorder:
+        'var(--button-outline-borderColor-hover, var(--color-btn-outline-hover-border, rgba(240,246,252,0.1)))',
+      hoverShadow:
+        'var(--shadow-resting-small, var(--color-btn-outline-hover-shadow, 0 1px 0 rgba(1,4,9,0.1)))// HI_KATIE: no matches',
+      hoverInsetShadow:
+        'var(--shadow-highlight, var(--color-btn-outline-hover-inset-shadow, inset 0 1px 0 rgba(255,255,255,0.03)))// HI_KATIE: no matches',
+      hoverCounterBg:
+        'var(--buttonCounter-outline-bgColor-hover, var(--color-btn-outline-hover-counter-bg, rgba(5,29,77,0.2)))',
+      selectedText: 'var(--button-outline-fgColor-active, var(--color-btn-outline-selected-text, #ffffff))',
+      selectedBg: 'var(--button-outline-bgColor-active, var(--color-btn-outline-selected-bg, #0d419d))',
+      selectedBorder:
+        'var(--button-outline-borderColor-active, var(--color-btn-outline-selected-border, rgba(240,246,252,0.1)))',
+      selectedShadow:
+        'var(--button-outline-shadow-selected, var(--color-btn-outline-selected-shadow, 0 0 transparent))',
+      disabledText:
+        'var(--button-outline-fgColor-disabled, var(--color-btn-outline-disabled-text, rgba(88,166,255,0.5)))',
+      disabledBg: 'var(--button-outline-bgColor-disabled, var(--color-btn-outline-disabled-bg, #0d1117))',
+      disabledCounterBg:
+        'var(--buttonCounter-outline-bgColor-disabled, var(--color-btn-outline-disabled-counter-bg, rgba(31,111,235,0.05)))',
+      counterBg: 'var(--buttonCounter-outline-bgColor-rest, var(--color-btn-outline-counter-bg, rgba(5,29,77,0.2)))',
+      hoverCounterFg: 'var(--buttonCounter-outline-fgColor-hover, var(--color-btn-outline-hover-counter-fg, #58a6ff))',
+      disabledCounterFg:
+        'var(--buttonCounter-outline-fgColor-disabled, var(--color-btn-outline-disabled-counter-fg, rgba(88,166,255,0.5)))',
+      counterFg: 'var(--buttonCounter-outline-fgColor-rest, var(--color-btn-outline-counter-fg, #388bfd))',
     },
     danger: {
-      text: '#d47616',
-      hoverText: '#ffffff',
-      hoverBg: '#b76100',
-      hoverBorder: '#d47616',
-      hoverShadow: '0 0 transparent',
-      hoverInsetShadow: '0 0 transparent',
-      hoverIcon: '#ffffff',
-      hoverCounterBg: 'rgba(255,255,255,0.2)',
-      selectedText: '#ffffff',
-      selectedBg: '#914d04',
-      selectedBorder: '#ec8e2c',
-      selectedShadow: '0 0 transparent',
-      disabledText: 'rgba(212,118,22,0.5)',
-      disabledBg: '#0d1117',
-      disabledCounterBg: 'rgba(183,97,0,0.05)',
-      counterBg: 'rgba(51,28,4,0.2)',
-      icon: '#d47616',
-      counterFg: '#d47616',
-      disabledCounterFg: 'rgba(212,118,22,0.5)',
-      hoverCounterFg: '#ffffff',
+      text: 'var(--button-danger-fgColor-rest, var(--color-btn-danger-text, #d47616))',
+      hoverText: 'var(--button-danger-fgColor-hover, var(--color-btn-danger-hover-text, #ffffff))',
+      hoverBg: 'var(--button-danger-bgColor-hover, var(--color-btn-danger-hover-bg, #b76100))',
+      hoverBorder: 'var(--button-danger-borderColor-hover, var(--color-btn-danger-hover-border, #d47616))',
+      hoverShadow: 'var(--shadow-resting-small, var(--color-btn-danger-hover-shadow, 0 0 transparent))',
+      hoverInsetShadow: 'var(--shadow-highlight, var(--color-btn-danger-hover-inset-shadow, 0 0 transparent))',
+      hoverIcon: 'var(--button-danger-iconColor-hover, var(--color-btn-danger-hover-icon, #ffffff))',
+      hoverCounterBg:
+        'var(--buttonCounter-danger-bgColor-hover, var(--color-btn-danger-hover-counter-bg, rgba(255,255,255,0.2)))',
+      selectedText: 'var(--button-danger-fgColor-active, var(--color-btn-danger-selected-text, #ffffff))',
+      selectedBg: 'var(--button-danger-bgColor-active, var(--color-btn-danger-selected-bg, #914d04))',
+      selectedBorder: 'var(--button-danger-borderColor-active, var(--color-btn-danger-selected-border, #ec8e2c))',
+      selectedShadow: 'var(--button-danger-shadow-selected, var(--color-btn-danger-selected-shadow, 0 0 transparent))',
+      disabledText:
+        'var(--button-danger-fgColor-disabled, var(--color-btn-danger-disabled-text, rgba(212,118,22,0.5)))',
+      disabledBg: 'var(--button-danger-bgColor-disabled, var(--color-btn-danger-disabled-bg, #0d1117))',
+      disabledCounterBg:
+        'var(--buttonCounter-danger-bgColor-disabled, var(--color-btn-danger-disabled-counter-bg, rgba(183,97,0,0.05)))',
+      counterBg: 'var(--buttonCounter-danger-bgColor-rest, var(--color-btn-danger-counter-bg, rgba(51,28,4,0.2)))',
+      icon: 'var(--button-danger-iconColor-rest, var(--color-btn-danger-icon, #d47616))',
+      counterFg: 'var(--buttonCounter-danger-fgColor-rest, var(--color-btn-danger-counter-fg, #d47616))',
+      disabledCounterFg:
+        'var(--buttonCounter-danger-fgColor-disabled, var(--color-btn-danger-disabled-counter-fg, rgba(212,118,22,0.5)))',
+      hoverCounterFg: 'var(--buttonCounter-danger-fgColor-hover, var(--color-btn-danger-hover-counter-fg, #ffffff))',
     },
     inactive: {
-      bg: '#21262d',
-      text: '#8b949e',
+      bg: 'var(--button-inactive-bgColor-rest, var(--color-btn-inactive-bg, #21262d))',
+      text: 'var(--button-inactive-fgColor-rest, var(--color-btn-inactive-text, #8b949e))',
     },
   },
   underlinenav: {
-    icon: '#6e7681',
-    borderHover: 'rgba(110,118,129,0.4)',
+    icon: 'var(--underlineNav-iconColor-rest, var(--color-underlinenav-icon, #6e7681))',
+    borderHover: 'var(--underlineNav-borderColor-hover, var(--color-underlinenav-border-hover, rgba(110,118,129,0.4)))',
   },
   actionListItem: {
-    inlineDivider: 'rgba(48,54,61,0.48)',
+    inlineDivider: 'var(--borderColor-muted, var(--color-action-list-item-inline-divider, rgba(48,54,61,0.48)))',
     default: {
-      hoverBg: 'rgba(177,186,196,0.12)',
-      hoverBorder: 'rgba(0,0,0,0)',
-      activeBg: 'rgba(177,186,196,0.2)',
-      activeBorder: 'rgba(0,0,0,0)',
-      selectedBg: 'rgba(177,186,196,0.08)',
+      hoverBg:
+        'var(--control-transparent-bgColor-hover, var(--color-action-list-item-default-hover-bg, rgba(177,186,196,0.12)))',
+      hoverBorder:
+        'var(--control-transparent-borderColor-hover, var(--color-action-list-item-default-hover-border, transparent))',
+      activeBg:
+        'var(--control-transparent-bgColor-active, var(--color-action-list-item-default-active-bg, rgba(177,186,196,0.2)))',
+      activeBorder:
+        'var(--control-transparent-borderColor-active, var(--color-action-list-item-default-active-border, transparent))',
+      selectedBg:
+        'var(--control-transparent-bgColor-selected, var(--color-action-list-item-default-selected-bg, rgba(177,186,196,0.08)))',
     },
     danger: {
-      hoverBg: 'rgba(212,118,22,0.16)',
-      activeBg: 'rgba(212,118,22,0.24)',
-      hoverText: '#ec8e2c',
+      hoverBg:
+        'var(--control-danger-bgColor-hover, var(--color-action-list-item-danger-hover-bg, rgba(212,118,22,0.16)))',
+      activeBg:
+        'var(--control-danger-bgColor-active, var(--color-action-list-item-danger-active-bg, rgba(212,118,22,0.24)))',
+      hoverText: 'var(--control-danger-fgColor-hover, var(--color-action-list-item-danger-hover-text, #ec8e2c))',
     },
   },
   switchTrack: {
-    bg: 'rgba(110,118,129,0.1)',
-    hoverBg: 'hsla(215,8%,72%,0.1)',
-    activeBg: 'rgba(110,118,129,0.4)',
-    disabledBg: '#21262d',
-    fg: '#8b949e',
-    disabledFg: '#010409',
-    border: 'rgba(0,0,0,0)',
+    bg: 'var(--controlTrack-bgColor-rest, var(--color-switch-track-bg, rgba(110,118,129,0.1)))',
+    hoverBg: 'var(--controlTrack-bgColor-hover, var(--color-switch-track-hover-bg, hsla(215,8%,72%,0.1)))',
+    activeBg: 'var(--controlTrack-bgColor-active, var(--color-switch-track-active-bg, rgba(110,118,129,0.4)))',
+    disabledBg: 'var(--controlTrack-bgColor-disabled, var(--color-switch-track-disabled-bg, #21262d))',
+    fg: 'var(--controlTrack-fgColor-rest, var(--color-switch-track-fg, #8b949e))',
+    disabledFg: 'var(--controlTrack-fgColor-disabled, var(--color-switch-track-disabled-fg, #010409))',
+    border: 'var(--controlTrack-borderColor-rest, var(--color-switch-track-border, transparent))',
     checked: {
-      bg: 'rgba(31,111,235,0.35)',
-      hoverBg: 'rgba(31,111,235,0.5)',
-      activeBg: 'rgba(31,111,235,0.65)',
-      fg: '#ffffff',
-      disabledFg: '#010409',
-      border: 'rgba(0,0,0,0)',
+      bg: 'var(--control-checked-bgColor-rest, var(--color-switch-track-checked-bg, rgba(31,111,235,0.35)))',
+      hoverBg: 'var(--control-checked-bgColor-hover, var(--color-switch-track-checked-hover-bg, rgba(31,111,235,0.5)))',
+      activeBg:
+        'var(--control-checked-bgColor-active, var(--color-switch-track-checked-active-bg, rgba(31,111,235,0.65)))',
+      fg: 'var(--control-checked-fgColor-rest, var(--color-switch-track-checked-fg, #ffffff))',
+      disabledFg: 'var(--control-checked-fgColor-disabled, var(--color-switch-track-checked-disabled-fg, #010409))',
+      border: 'var(--borderColor-transparent, var(--color-switch-track-checked-border, transparent))',
     },
   },
   switchKnob: {
-    bg: '#0d1117',
-    border: '#606771',
-    disabledBg: '#161b22',
+    bg: 'var(--controlKnob-bgColor-rest, var(--color-switch-knob-bg, #0d1117))',
+    border: 'var(--controlKnob-borderColor-rest, var(--color-switch-knob-border, #606771))',
+    disabledBg: 'var(--controlKnob-bgColor-disabled, var(--color-switch-knob-disabled-bg, #161b22))',
     checked: {
-      bg: '#0d1117',
-      disabledBg: '#161b22',
-      border: 'rgba(31,111,235,0.35)',
+      bg: 'var(--controlKnob-bgColor-checked, var(--color-switch-knob-checked-bg, #0d1117))',
+      disabledBg: 'var(--controlKnob-bgColor-disabled, var(--color-switch-knob-checked-disabled-bg, #161b22))',
+      border: 'var(--controlKnob-borderColor-checked, var(--color-switch-knob-checked-border, rgba(31,111,235,0.35)))',
     },
   },
   segmentedControl: {
-    bg: 'rgba(110,118,129,0.1)',
+    bg: 'var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg, rgba(110,118,129,0.1)))',
     button: {
-      bg: '#0d1117',
+      bg: 'var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg, #0d1117))',
       hover: {
-        bg: '#30363d',
+        bg: 'var(--controlTrack-bgColor-hover, var(--color-segmented-control-button-hover-bg, #30363d))',
       },
       active: {
-        bg: '#21262d',
+        bg: 'var(--controlTrack-bgColor-active, var(--color-segmented-control-button-active-bg, #21262d))',
       },
       selected: {
-        border: '#6e7681',
+        border: 'var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-selected-border, #6e7681))',
       },
     },
   },
   treeViewItem: {
     chevron: {
-      hoverBg: 'rgba(177,186,196,0.12)',
+      hoverBg:
+        'var(--control-transparent-bgColor-hover, var(--color-tree-view-item-chevron-hover-bg, rgba(177,186,196,0.12)))',
     },
     directory: {
-      fill: '#8b949e',
+      fill: 'var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-directory-fill, #8b949e))',
     },
   },
   fg: {
     default: '#c9d1d9',
     muted: '#8b949e',
-    subtle: '#6e7681',
-    onEmphasis: '#ffffff',
+    subtle: 'var(--fgColor-muted, var(--color-fg-subtle, #6e7681))',
+    onEmphasis: 'var(--fgColor-onEmphasis, var(--color-fg-on-emphasis, #ffffff))',
   },
   canvas: {
-    default: '#0d1117',
-    overlay: '#161b22',
-    inset: '#010409',
-    subtle: '#161b22',
+    default: 'var(--bgColor-default, var(--color-canvas-default, #0d1117))',
+    overlay: 'var(--overlay-bgColor, var(--color-canvas-overlay, #161b22))',
+    inset: 'var(--bgColor-inset, var(--color-canvas-inset, #010409))',
+    subtle: 'var(--bgColor-muted, var(--color-canvas-subtle, #161b22))',
   },
   border: {
-    default: '#30363d',
-    muted: '#21262d',
-    subtle: 'rgba(240,246,252,0.1)',
+    default: 'var(--borderColor-default, var(--color-border-default, #30363d))',
+    muted: 'var(--borderColor-muted, var(--color-border-muted, #21262d))',
+    subtle: 'var(--borderColor-muted, var(--color-border-subtle, rgba(240,246,252,0.1)))',
   },
   shadow: {
-    small: '0 0 transparent',
-    medium: '0 3px 6px #010409',
-    large: '0 8px 24px #010409',
-    extraLarge: '0 12px 48px #010409',
+    small: 'var(--shadow-resting-small, var(--color-shadow-small, 0 0 transparent))',
+    medium: 'var(--shadow-resting-medium, var(--color-shadow-medium, 0 3px 6px #010409))',
+    large: 'var(--shadow-floating-large, var(--color-shadow-large, 0 8px 24px #010409))',
+    extraLarge: 'var(--shadow-floating-xlarge, var(--color-shadow-extra-large, 0 12px 48px #010409))',
   },
   neutral: {
-    emphasisPlus: '#6e7681',
-    emphasis: '#6e7681',
-    muted: 'rgba(110,118,129,0.4)',
-    subtle: 'rgba(110,118,129,0.1)',
+    emphasisPlus: 'var(--bgColor-emphasis, var(--color-neutral-emphasis-plus, #6e7681))',
+    emphasis: 'var(--bgColor-neutral-emphasis, var(--color-neutral-emphasis, #6e7681))',
+    muted: 'var(--borderColor-neutral-muted, var(--color-neutral-muted, rgba(110,118,129,0.4)))',
+    subtle: 'var(--bgColor-neutral-muted, var(--color-neutral-subtle, rgba(110,118,129,0.1)))',
   },
   accent: {
     fg: '#58a6ff',
-    emphasis: '#1f6feb',
-    muted: 'rgba(56,139,253,0.4)',
-    subtle: 'rgba(56,139,253,0.1)',
+    emphasis: 'var(--bgColor-accent-emphasis, var(--color-accent-emphasis, #1f6feb))',
+    muted: 'var(--borderColor-accent-muted, var(--color-accent-muted, rgba(56,139,253,0.4)))',
+    subtle: 'var(--bgColor-accent-muted, var(--color-accent-subtle, rgba(56,139,253,0.1)))',
   },
   success: {
-    fg: '#58a6ff',
-    emphasis: '#1f6feb',
-    muted: 'rgba(56,139,253,0.4)',
-    subtle: 'rgba(56,139,253,0.15)',
+    fg: 'var(--fgColor-success, var(--color-success-fg, #58a6ff))',
+    emphasis: 'var(--bgColor-success-emphasis, var(--color-success-emphasis, #1f6feb))',
+    muted: 'var(--borderColor-success-muted, var(--color-success-muted, rgba(56,139,253,0.4)))',
+    subtle: 'var(--bgColor-success-muted, var(--color-success-subtle, rgba(56,139,253,0.15)))',
   },
   attention: {
-    fg: '#d29922',
-    emphasis: '#9e6a03',
-    muted: 'rgba(187,128,9,0.4)',
-    subtle: 'rgba(187,128,9,0.15)',
+    fg: 'var(--fgColor-attention, var(--color-attention-fg, #d29922))',
+    emphasis: 'var(--bgColor-attention-emphasis, var(--color-attention-emphasis, #9e6a03))',
+    muted: 'var(--borderColor-attention-muted, var(--color-attention-muted, rgba(187,128,9,0.4)))',
+    subtle: 'var(--bgColor-attention-muted, var(--color-attention-subtle, rgba(187,128,9,0.15)))',
   },
   severe: {
-    fg: '#d47616',
-    emphasis: '#b76100',
-    muted: 'rgba(212,118,22,0.4)',
-    subtle: 'rgba(212,118,22,0.1)',
+    fg: 'var(--fgColor-severe, var(--color-severe-fg, #d47616))',
+    emphasis: 'var(--bgColor-severe-emphasis, var(--color-severe-emphasis, #b76100))',
+    muted: 'var(--borderColor-severe-muted, var(--color-severe-muted, rgba(212,118,22,0.4)))',
+    subtle: 'var(--bgColor-severe-muted, var(--color-severe-subtle, rgba(212,118,22,0.1)))',
   },
   danger: {
-    fg: '#d47616',
-    emphasis: '#b76100',
-    muted: 'rgba(212,118,22,0.4)',
-    subtle: 'rgba(212,118,22,0.1)',
+    fg: 'var(--fgColor-danger, var(--color-danger-fg, #d47616))',
+    emphasis: 'var(--borderColor-danger-emphasis, var(--color-danger-emphasis, #b76100))',
+    muted: 'var(--borderColor-danger-muted, var(--color-danger-muted, rgba(212,118,22,0.4)))',
+    subtle: 'var(--bgColor-danger-muted, var(--color-danger-subtle, rgba(212,118,22,0.1)))',
   },
   open: {
     fg: '#ec8e2c',
@@ -472,32 +502,32 @@ const colors = {
     subtle: 'rgba(110,118,129,0.1)',
   },
   done: {
-    fg: '#a371f7',
-    emphasis: '#8957e5',
-    muted: 'rgba(163,113,247,0.4)',
-    subtle: 'rgba(163,113,247,0.1)',
+    fg: 'var(--fgColor-done, var(--color-done-fg, #a371f7))',
+    emphasis: 'var(--bgColor-done-emphasis, var(--color-done-emphasis, #8957e5))',
+    muted: 'var(--borderColor-done-muted, var(--color-done-muted, rgba(163,113,247,0.4)))',
+    subtle: 'var(--bgColor-done-muted, var(--color-done-subtle, rgba(163,113,247,0.1)))',
   },
   sponsors: {
-    fg: '#db61a2',
-    emphasis: '#bf4b8a',
-    muted: 'rgba(219,97,162,0.4)',
-    subtle: 'rgba(219,97,162,0.1)',
+    fg: 'var(--fgColor-sponsors, var(--color-sponsors-fg, #db61a2))',
+    emphasis: 'var(--bgColor-sponsors-emphasis, var(--color-sponsors-emphasis, #bf4b8a))',
+    muted: 'var(--borderColor-sponsors-muted, var(--color-sponsors-muted, rgba(219,97,162,0.4)))',
+    subtle: 'var(--bgColor-sponsors-muted, var(--color-sponsors-subtle, rgba(219,97,162,0.1)))',
   },
   primer: {
     fg: {
-      disabled: '#484f58',
+      disabled: 'var(--fgColor-disabled, var(--color-primer-fg-disabled, #484f58))',
     },
     canvas: {
-      backdrop: 'rgba(1,4,9,0.8)',
-      sticky: 'rgba(13,17,23,0.95)',
+      backdrop: 'var(--overlay-backdrop-bgColor, var(--color-primer-canvas-backdrop, rgba(1,4,9,0.8)))',
+      sticky: 'var(--color-primer-canvas-sticky, rgba(13,17,23,0.95))',
     },
     border: {
-      active: '#f78166',
-      contrast: 'rgba(255,255,255,0.2)',
+      active: 'var(--underlineNav-borderColor-active, var(--color-primer-border-active, #f78166))',
+      contrast: 'var(--borderColor-muted, var(--color-primer-border-contrast, rgba(255,255,255,0.2)))',
     },
     shadow: {
-      highlight: '0 0 transparent',
-      inset: '0 0 transparent',
+      highlight: 'var(--shadow-highlight, var(--color-primer-shadow-highlight, 0 0 transparent))',
+      inset: 'var(--shadow-inset, var(--color-primer-shadow-inset, 0 0 transparent))',
     },
   },
   scale: {
diff --git a/src/legacy-theme/ts/colors/dark_dimmed.ts b/src/legacy-theme/ts/colors/dark_dimmed.ts
index bbef4b8883f..8c3dc1fa397 100644
--- a/src/legacy-theme/ts/colors/dark_dimmed.ts
+++ b/src/legacy-theme/ts/colors/dark_dimmed.ts
@@ -1,503 +1,532 @@
 const colors = {
-  canvasDefaultTransparent: 'rgba(34,39,46,0)',
-  pageHeaderBg: '#22272e',
+  canvasDefaultTransparent: 'var(--bgColor-transparent, var(--color-canvas-default-transparent, rgba(34,39,46,0)))',
+  pageHeaderBg: 'var(--page-header-bgColor, var(--color-page-header-bg, #22272e))',
   marketingIcon: {
-    primary: '#6cb6ff',
-    secondary: '#316dca',
+    primary: 'var(--color-marketing-icon-primary, #6cb6ff)',
+    secondary: 'var(--color-marketing-icon-secondary, #316dca)',
   },
   diffBlob: {
     addition: {
-      numText: '#adbac7',
-      fg: '#adbac7',
-      numBg: 'rgba(87,171,90,0.3)',
-      lineBg: 'rgba(70,149,74,0.15)',
-      wordBg: 'rgba(70,149,74,0.4)',
+      numText: 'var(--diffBlob-addition-fgColor-num, var(--color-diff-blob-addition-num-text, #adbac7))',
+      fg: 'var(--diffBlob-addition-fgColor-text, var(--color-diff-blob-addition-fg, #adbac7))',
+      numBg: 'var(--diffBlob-addition-bgColor-num, var(--color-diff-blob-addition-num-bg, rgba(87,171,90,0.3)))',
+      lineBg: 'var(--diffBlob-addition-bgColor-line, var(--color-diff-blob-addition-line-bg, rgba(70,149,74,0.15)))',
+      wordBg: 'var(--diffBlob-addition-bgColor-word, var(--color-diff-blob-addition-word-bg, rgba(70,149,74,0.4)))',
     },
     deletion: {
-      numText: '#adbac7',
-      fg: '#adbac7',
-      numBg: 'rgba(229,83,75,0.3)',
-      lineBg: 'rgba(229,83,75,0.1)',
-      wordBg: 'rgba(229,83,75,0.4)',
+      numText: 'var(--diffBlob-deletion-fgColor-num, var(--color-diff-blob-deletion-num-text, #adbac7))',
+      fg: 'var(--diffBlob-deletion-fgColor-text, var(--color-diff-blob-deletion-fg, #adbac7))',
+      numBg: 'var(--diffBlob-deletion-bgColor-num, var(--color-diff-blob-deletion-num-bg, rgba(229,83,75,0.3)))',
+      lineBg: 'var(--diffBlob-deletion-bgColor-line, var(--color-diff-blob-deletion-line-bg, rgba(229,83,75,0.1)))',
+      wordBg: 'var(--diffBlob-deletion-bgColor-word, var(--color-diff-blob-deletion-word-bg, rgba(229,83,75,0.4)))',
     },
     hunk: {
-      numBg: 'rgba(65,132,228,0.4)',
+      numBg: 'var(--diffBlob-hunk-bgColor-num, var(--color-diff-blob-hunk-num-bg, rgba(65,132,228,0.4)))',
     },
     expander: {
       icon: '#adbac7',
     },
-    selectedLineHighlightMixBlendMode: 'screen',
+    selectedLineHighlightMixBlendMode: 'var(--color-diff-blob-selected-line-highlight-mix-blend-mode, screen)',
   },
   diffstat: {
-    deletionBorder: 'rgba(205,217,229,0.1)',
-    additionBorder: 'rgba(205,217,229,0.1)',
-    additionBg: '#57ab5a',
+    deletionBorder: 'var(--color-diffstat-deletion-border, rgba(205,217,229,0.1))',
+    additionBorder: 'var(--color-diffstat-addition-border, rgba(205,217,229,0.1))',
+    additionBg: 'var(--diffStat-addition-bgColor, var(--color-diffstat-addition-bg, #57ab5a))',
   },
   searchKeyword: {
-    hl: 'rgba(198,144,38,0.4)',
+    hl: 'var(--highlight-neutral-bgColor, var(--color-search-keyword-hl, rgba(198,144,38,0.4)))',
   },
   prettylights: {
     syntax: {
-      comment: '#768390',
-      constant: '#6cb6ff',
-      entity: '#dcbdfb',
-      storageModifierImport: '#adbac7',
-      entityTag: '#8ddb8c',
-      keyword: '#f47067',
-      string: '#96d0ff',
-      variable: '#f69d50',
-      brackethighlighterUnmatched: '#e5534b',
-      invalidIllegalText: '#cdd9e5',
-      invalidIllegalBg: '#922323',
-      carriageReturnText: '#cdd9e5',
-      carriageReturnBg: '#ad2e2c',
-      stringRegexp: '#8ddb8c',
-      markupList: '#eac55f',
-      markupHeading: '#316dca',
-      markupItalic: '#adbac7',
-      markupBold: '#adbac7',
-      markupDeletedText: '#ffd8d3',
-      markupDeletedBg: '#78191b',
-      markupInsertedText: '#b4f1b4',
-      markupInsertedBg: '#1b4721',
-      markupChangedText: '#ffddb0',
-      markupChangedBg: '#682d0f',
-      markupIgnoredText: '#adbac7',
-      markupIgnoredBg: '#255ab2',
-      metaDiffRange: '#dcbdfb',
-      brackethighlighterAngle: '#768390',
-      sublimelinterGutterMark: '#545d68',
-      constantOtherReferenceLink: '#96d0ff',
+      comment: 'var(--color-prettylights-syntax-comment, #768390)',
+      constant: 'var(--color-prettylights-syntax-constant, #6cb6ff)',
+      entity: 'var(--color-prettylights-syntax-entity, #dcbdfb)',
+      storageModifierImport: 'var(--color-prettylights-syntax-storage-modifier-import, #adbac7)',
+      entityTag: 'var(--color-prettylights-syntax-entity-tag, #8ddb8c)',
+      keyword: 'var(--color-prettylights-syntax-keyword, #f47067)',
+      string: 'var(--color-prettylights-syntax-string, #96d0ff)',
+      variable: 'var(--color-prettylights-syntax-variable, #f69d50)',
+      brackethighlighterUnmatched: 'var(--color-prettylights-syntax-brackethighlighter-unmatched, #e5534b)',
+      invalidIllegalText: 'var(--color-prettylights-syntax-invalid-illegal-text, #cdd9e5)',
+      invalidIllegalBg: 'var(--color-prettylights-syntax-invalid-illegal-bg, #922323)',
+      carriageReturnText: 'var(--color-prettylights-syntax-carriage-return-text, #cdd9e5)',
+      carriageReturnBg: 'var(--color-prettylights-syntax-carriage-return-bg, #ad2e2c)',
+      stringRegexp: 'var(--color-prettylights-syntax-string-regexp, #8ddb8c)',
+      markupList: 'var(--color-prettylights-syntax-markup-list, #eac55f)',
+      markupHeading: 'var(--color-prettylights-syntax-markup-heading, #316dca)',
+      markupItalic: 'var(--color-prettylights-syntax-markup-italic, #adbac7)',
+      markupBold: 'var(--color-prettylights-syntax-markup-bold, #adbac7)',
+      markupDeletedText: 'var(--color-prettylights-syntax-markup-deleted-text, #ffd8d3)',
+      markupDeletedBg: 'var(--color-prettylights-syntax-markup-deleted-bg, #78191b)',
+      markupInsertedText: 'var(--color-prettylights-syntax-markup-inserted-text, #b4f1b4)',
+      markupInsertedBg: 'var(--color-prettylights-syntax-markup-inserted-bg, #1b4721)',
+      markupChangedText: 'var(--color-prettylights-syntax-markup-changed-text, #ffddb0)',
+      markupChangedBg: 'var(--color-prettylights-syntax-markup-changed-bg, #682d0f)',
+      markupIgnoredText: 'var(--color-prettylights-syntax-markup-ignored-text, #adbac7)',
+      markupIgnoredBg: 'var(--color-prettylights-syntax-markup-ignored-bg, #255ab2)',
+      metaDiffRange: 'var(--color-prettylights-syntax-meta-diff-range, #dcbdfb)',
+      brackethighlighterAngle: 'var(--color-prettylights-syntax-brackethighlighter-angle, #768390)',
+      sublimelinterGutterMark: 'var(--color-prettylights-syntax-sublimelinter-gutter-mark, #545d68)',
+      constantOtherReferenceLink: 'var(--color-prettylights-syntax-constant-other-reference-link, #96d0ff)',
     },
   },
   codemirror: {
-    text: '#adbac7',
-    bg: '#22272e',
-    guttersBg: '#22272e',
-    guttermarkerText: '#22272e',
-    guttermarkerSubtleText: '#636e7b',
-    linenumberText: '#768390',
-    cursor: '#adbac7',
-    selectionBg: 'rgba(65,132,228,0.4)',
-    activelineBg: 'rgba(99,110,123,0.1)',
-    matchingbracketText: '#adbac7',
-    linesBg: '#22272e',
+    text: 'var(--codeMirror-fgColor, var(--color-codemirror-text, #adbac7))',
+    bg: 'var(--codeMirror-bgColor, var(--color-codemirror-bg, #22272e))',
+    guttersBg: 'var(--codeMirror-gutters-bgColor, var(--color-codemirror-gutters-bg, #22272e))',
+    guttermarkerText:
+      'var(--codeMirror-gutterMarker-fgColor-default, var(--color-codemirror-guttermarker-text, #22272e))',
+    guttermarkerSubtleText:
+      'var(--codeMirror-gutterMarker-fgColor-muted, var(--color-codemirror-guttermarker-subtle-text, #636e7b))',
+    linenumberText: 'var(--codeMirror-lineNumber-fgColor, var(--color-codemirror-linenumber-text, #768390))',
+    cursor: 'var(--codeMirror-cursor-fgColor, var(--color-codemirror-cursor, #adbac7))',
+    selectionBg: 'var(--codeMirror-selection-bgColor, var(--color-codemirror-selection-bg, rgba(65,132,228,0.4)))',
+    activelineBg: 'var(--codeMirror-activeline-bgColor, var(--color-codemirror-activeline-bg, rgba(99,110,123,0.1)))',
+    matchingbracketText:
+      'var(--codeMirror-matchingBracket-fgColor, var(--color-codemirror-matchingbracket-text, #adbac7))',
+    linesBg: 'var(--codeMirror-lines-bgColor, var(--color-codemirror-lines-bg, #22272e))',
     syntax: {
-      comment: '#768390',
-      constant: '#6cb6ff',
-      entity: '#dcbdfb',
-      keyword: '#f47067',
-      storage: '#f47067',
-      string: '#96d0ff',
-      support: '#6cb6ff',
-      variable: '#f69d50',
+      comment: 'var(--codeMirror-syntax-fgColor-comment, var(--color-codemirror-syntax-comment, #768390))',
+      constant: 'var(--codeMirror-syntax-fgColor-constant, var(--color-codemirror-syntax-constant, #6cb6ff))',
+      entity: 'var(--codeMirror-syntax-fgColor-entity, var(--color-codemirror-syntax-entity, #dcbdfb))',
+      keyword: 'var(--codeMirror-syntax-fgColor-keyword, var(--color-codemirror-syntax-keyword, #f47067))',
+      storage: 'var(--codeMirror-syntax-fgColor-storage, var(--color-codemirror-syntax-storage, #f47067))',
+      string: 'var(--codeMirror-syntax-fgColor-string, var(--color-codemirror-syntax-string, #96d0ff))',
+      support: 'var(--codeMirror-syntax-fgColor-support, var(--color-codemirror-syntax-support, #6cb6ff))',
+      variable: 'var(--codeMirror-syntax-fgColor-variable, var(--color-codemirror-syntax-variable, #f69d50))',
     },
   },
   checks: {
-    bg: '#1c2128',
-    runBorderWidth: '1px',
-    containerBorderWidth: '1px',
-    textPrimary: '#adbac7',
-    textSecondary: '#768390',
-    textLink: '#539bf5',
-    btnIcon: '#768390',
-    btnHoverIcon: '#adbac7',
-    btnHoverBg: 'rgba(99,110,123,0.1)',
-    inputText: '#768390',
-    inputPlaceholderText: '#636e7b',
-    inputFocusText: '#adbac7',
-    inputBg: '#2d333b',
-    inputShadow: '0 0 0 1px (obj) => (0, get_1.default)(obj, path)',
-    donutError: '#e5534b',
-    donutPending: '#c69026',
-    donutSuccess: '#46954a',
-    donutNeutral: '#768390',
-    dropdownText: '#adbac7',
-    dropdownBg: '#2d333b',
-    dropdownBorder: '#444c56',
-    dropdownShadow: 'rgba(28,33,40,0.3)',
-    dropdownHoverText: '#adbac7',
-    dropdownHoverBg: 'rgba(99,110,123,0.1)',
-    dropdownBtnHoverText: '#adbac7',
-    dropdownBtnHoverBg: 'rgba(99,110,123,0.1)',
-    scrollbarThumbBg: 'rgba(99,110,123,0.4)',
-    headerLabelText: '#768390',
-    headerLabelOpenText: '#adbac7',
-    headerBorder: '#373e47',
-    headerIcon: '#768390',
-    lineText: '#768390',
-    lineNumText: '#636e7b',
-    lineTimestampText: '#636e7b',
-    lineHoverBg: 'rgba(99,110,123,0.1)',
-    lineSelectedBg: 'rgba(65,132,228,0.1)',
-    lineSelectedNumText: '#539bf5',
-    lineDtFmText: '#cdd9e5',
-    lineDtFmBg: '#966600',
-    gateBg: 'rgba(174,124,20,0.15)',
-    gateText: '#768390',
-    gateWaitingText: '#c69026',
-    stepHeaderOpenBg: '#2d333b',
-    stepErrorText: '#e5534b',
-    stepWarningText: '#c69026',
-    loglineText: '#768390',
-    loglineNumText: '#636e7b',
-    loglineDebugText: '#986ee2',
-    loglineErrorText: '#768390',
-    loglineErrorNumText: '#636e7b',
-    loglineErrorBg: 'rgba(229,83,75,0.1)',
-    loglineWarningText: '#768390',
-    loglineWarningNumText: '#c69026',
-    loglineWarningBg: 'rgba(174,124,20,0.15)',
-    loglineCommandText: '#539bf5',
-    loglineSectionText: '#57ab5a',
+    bg: 'var(--color-checks-bg, #1c2128)',
+    runBorderWidth: 'var(--color-checks-run-border-width, 1px)',
+    containerBorderWidth: 'var(--color-checks-container-border-width, 1px)',
+    textPrimary: 'var(--color-checks-text-primary, #adbac7)',
+    textSecondary: 'var(--color-checks-text-secondary, #768390)',
+    textLink: 'var(--color-checks-text-link, #539bf5)',
+    btnIcon: 'var(--color-checks-btn-icon, #768390)',
+    btnHoverIcon: 'var(--color-checks-btn-hover-icon, #adbac7)',
+    btnHoverBg: 'var(--color-checks-btn-hover-bg, rgba(99,110,123,0.1))',
+    inputText: 'var(--color-checks-input-text, #768390)',
+    inputPlaceholderText: 'var(--color-checks-input-placeholder-text, #636e7b)',
+    inputFocusText: 'var(--color-checks-input-focus-text, #adbac7)',
+    inputBg: 'var(--color-checks-input-bg, #2d333b)',
+    inputShadow: 'var(--color-checks-input-shadow, 0 0 0 1px #444c56)',
+    donutError: 'var(--color-checks-donut-error, #e5534b)',
+    donutPending: 'var(--color-checks-donut-pending, #c69026)',
+    donutSuccess: 'var(--color-checks-donut-success, #46954a)',
+    donutNeutral: 'var(--color-checks-donut-neutral, #768390)',
+    dropdownText: 'var(--color-checks-dropdown-text, #adbac7)',
+    dropdownBg: 'var(--color-checks-dropdown-bg, #2d333b)',
+    dropdownBorder: 'var(--color-checks-dropdown-border, #444c56)',
+    dropdownShadow: 'var(--color-checks-dropdown-shadow, rgba(28,33,40,0.3))',
+    dropdownHoverText: 'var(--color-checks-dropdown-hover-text, #adbac7)',
+    dropdownHoverBg: 'var(--color-checks-dropdown-hover-bg, rgba(99,110,123,0.1))',
+    dropdownBtnHoverText: 'var(--color-checks-dropdown-btn-hover-text, #adbac7)',
+    dropdownBtnHoverBg: 'var(--color-checks-dropdown-btn-hover-bg, rgba(99,110,123,0.1))',
+    scrollbarThumbBg: 'var(--color-checks-scrollbar-thumb-bg, rgba(99,110,123,0.4))',
+    headerLabelText: 'var(--color-checks-header-label-text, #768390)',
+    headerLabelOpenText: 'var(--color-checks-header-label-open-text, #adbac7)',
+    headerBorder: 'var(--color-checks-header-border, #373e47)',
+    headerIcon: 'var(--color-checks-header-icon, #768390)',
+    lineText: 'var(--color-checks-line-text, #768390)',
+    lineNumText: 'var(--color-checks-line-num-text, #636e7b)',
+    lineTimestampText: 'var(--color-checks-line-timestamp-text, #636e7b)',
+    lineHoverBg: 'var(--color-checks-line-hover-bg, rgba(99,110,123,0.1))',
+    lineSelectedBg: 'var(--color-checks-line-selected-bg, rgba(65,132,228,0.1))',
+    lineSelectedNumText: 'var(--color-checks-line-selected-num-text, #539bf5)',
+    lineDtFmText: 'var(--color-checks-line-dt-fm-text, #cdd9e5)',
+    lineDtFmBg: 'var(--color-checks-line-dt-fm-bg, #966600)',
+    gateBg: 'var(--color-checks-gate-bg, rgba(174,124,20,0.15))',
+    gateText: 'var(--color-checks-gate-text, #768390)',
+    gateWaitingText: 'var(--color-checks-gate-waiting-text, #c69026)',
+    stepHeaderOpenBg: 'var(--color-checks-step-header-open-bg, #2d333b)',
+    stepErrorText: 'var(--color-checks-step-error-text, #e5534b)',
+    stepWarningText: 'var(--color-checks-step-warning-text, #c69026)',
+    loglineText: 'var(--color-checks-logline-text, #768390)',
+    loglineNumText: 'var(--color-checks-logline-num-text, #636e7b)',
+    loglineDebugText: 'var(--color-checks-logline-debug-text, #986ee2)',
+    loglineErrorText: 'var(--color-checks-logline-error-text, #768390)',
+    loglineErrorNumText: 'var(--color-checks-logline-error-num-text, #636e7b)',
+    loglineErrorBg: 'var(--color-checks-logline-error-bg, rgba(229,83,75,0.1))',
+    loglineWarningText: 'var(--color-checks-logline-warning-text, #768390)',
+    loglineWarningNumText: 'var(--color-checks-logline-warning-num-text, #c69026)',
+    loglineWarningBg: 'var(--color-checks-logline-warning-bg, rgba(174,124,20,0.15))',
+    loglineCommandText: 'var(--color-checks-logline-command-text, #539bf5)',
+    loglineSectionText: 'var(--color-checks-logline-section-text, #57ab5a)',
     ansi: {
-      black: '#22272e',
-      blackBright: '#2d333b',
-      white: '#909dab',
-      whiteBright: '#909dab',
-      gray: '#636e7b',
-      red: '#f47067',
-      redBright: '#ff938a',
-      green: '#57ab5a',
-      greenBright: '#6bc46d',
-      yellow: '#c69026',
-      yellowBright: '#daaa3f',
-      blue: '#539bf5',
-      blueBright: '#6cb6ff',
-      magenta: '#b083f0',
-      magentaBright: '#dcbdfb',
-      cyan: '#76e3ea',
-      cyanBright: '#b3f0ff',
+      black: 'var(--color-checks-ansi-black, #22272e)',
+      blackBright: 'var(--color-checks-ansi-black-bright, #2d333b)',
+      white: 'var(--color-checks-ansi-white, #909dab))',
+      whiteBright: 'var(--color-checks-ansi-white-bright, #909dab)',
+      gray: 'var(--color-checks-ansi-gray, #636e7b)',
+      red: 'var(--color-checks-ansi-red, #f47067)',
+      redBright: 'var(--color-checks-ansi-red-bright, #ff938a)',
+      green: 'var(--color-checks-ansi-green, #57ab5a)',
+      greenBright: 'var(--color-checks-ansi-green-bright, #6bc46d)',
+      yellow: 'var(--color-checks-ansi-yellow, #c69026)',
+      yellowBright: 'var(--color-checks-ansi-yellow-bright, #daaa3f)',
+      blue: 'var(--color-checks-ansi-blue, #539bf5)',
+      blueBright: 'var(--color-checks-ansi-blue-bright, #6cb6ff)',
+      magenta: 'var(--color-checks-ansi-magenta, #b083f0)',
+      magentaBright: 'var(--color-checks-ansi-magenta-bright, #dcbdfb)',
+      cyan: 'var(--color-checks-ansi-cyan, #76e3ea)',
+      cyanBright: 'var(--color-checks-ansi-cyan-bright, #b3f0ff)',
     },
   },
   project: {
-    headerBg: '#22272e',
-    sidebarBg: '#2d333b',
-    gradientIn: '#2d333b',
-    gradientOut: 'rgba(45,51,59,0)',
+    headerBg: 'var(--color-project-header-bg, #22272e)',
+    sidebarBg: 'var(--color-project-sidebar-bg, #2d333b)',
+    gradientIn: 'var(--color-project-gradient-in, #2d333b)',
+    gradientOut: 'var(--color-project-gradient-out, rgba(45,51,59,0))',
   },
   mktg: {
     btn: {
-      bg: '#f6f8fa',
+      bg: 'var(--color-mktg-btn-bg, #f6f8fa))',
       shadow: {
-        outline: 'rgb(255 255 255 / 25%) 0 0 0 1px inset',
-        focus: 'rgb(255 255 255 / 25%) 0 0 0 4px',
+        outline: 'var(--color-mktg-btn-shadow-outline, rgb(255 255 255 / 25%) 0 0 0 1px inset))',
+        focus: 'var(--color-mktg-btn-shadow-focus, rgb(255 255 255 / 25%) 0 0 0 4px))',
         hover:
-          '0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07)',
-        hoverMuted: 'rgb(255 255 255) 0 0 0 2px inset',
+          'var(--color-mktg-btn-shadow-hover, 0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07)))',
+        hoverMuted: 'var(--color-mktg-btn-shadow-hover-muted, rgb(255 255 255) 0 0 0 2px inset))',
       },
     },
   },
   control: {
     borderColor: {
-      emphasis: '#606771',
+      emphasis: 'var(--color-control-border-color-emphasis, #606771)',
     },
   },
   avatar: {
-    bg: 'rgba(205,217,229,0.1)',
-    border: 'rgba(205,217,229,0.1)',
-    stackFade: '#444c56',
-    stackFadeMore: '#373e47',
-    childShadow: '0 0 0 2px #22272e',
+    bg: 'var(--avatar-bgColor, var(--color-avatar-bg, rgba(205,217,229,0.1)))',
+    border: 'var(--avatar-borderColor, var(--color-avatar-border, rgba(205,217,229,0.1)))',
+    stackFade: 'var(--avatarStack-fade-bgColor-default, var(--color-avatar-stack-fade, #444c56))',
+    stackFadeMore: 'var(--avatarStack-fade-bgColor-muted, var(--color-avatar-stack-fade-more, #373e47))',
+    childShadow: 'var(--avatar-shadow, var(--color-avatar-child-shadow, 0 0 0 2px #22272e))',
   },
   topicTag: {
-    border: 'rgba(0,0,0,0)',
+    border: 'var(--topicTag-borderColor, var(--color-topic-tag-border, transparent))',
   },
   counter: {
-    border: 'rgba(0,0,0,0)',
+    border: 'var(--counter-borderColor, var(--color-counter-border, transparent))',
   },
   selectMenu: {
-    backdropBorder: '#545d68',
-    tapHighlight: 'rgba(68,76,86,0.5)',
-    tapFocusBg: '#143d79',
+    backdropBorder: 'var(--selectMenu-borderColor, var(--color-select-menu-backdrop-border, #545d68))',
+    tapHighlight: 'var(--control-bgColor-active, var(--color-select-menu-tap-highlight, rgba(68,76,86,0.5)))',
+    tapFocusBg: 'var(--selectMenu-bgColor-active, var(--color-select-menu-tap-focus-bg, #143d79))',
   },
   overlay: {
-    shadow: '0 0 0 1px #444c56, 0 16px 32px rgba(28,33,40,0.85)',
-    backdrop: 'rgba(45,51,59,0.4)',
+    shadow:
+      'var(--shadow-floating-small, var(--color-overlay-shadow, 0 0 0 1px #444c56, 0 16px 32px rgba(28,33,40,0.85)))',
+    backdrop: 'var(--overlay-backdrop-bgColor, var(--color-overlay-backdrop, rgba(45,51,59,0.4)))',
   },
   header: {
-    text: 'rgba(205,217,229,0.7)',
-    bg: '#2d333b',
-    divider: '#768390',
-    logo: '#cdd9e5',
+    text: 'var(--header-fgColor-default, var(--color-header-text, rgba(205,217,229,0.7)))',
+    bg: 'var(--header-bgColor, var(--color-header-bg, #2d333b))',
+    divider: 'var(--header-borderColor-divider, var(--color-header-divider, #768390))',
+    logo: 'var(--header-fgColor-logo, var(--color-header-logo, #cdd9e5))',
   },
   headerSearch: {
-    bg: '#22272e',
-    border: '#444c56',
+    bg: 'var(--headerSearch-bgColor, var(--color-header-search-bg, #22272e))',
+    border: 'var(--headerSearch-borderColor, var(--color-header-search-border, #444c56))',
   },
   sidenav: {
-    selectedBg: '#373e47',
+    selectedBg: 'var(--sideNav-bgColor-selected, var(--color-sidenav-selected-bg, #373e47))',
   },
   menu: {
-    bgActive: '#2d333b',
+    bgActive: 'var(--menu-bgColor-active, var(--color-menu-bg-active, #2d333b))',
   },
   input: {
-    disabledBg: 'rgba(99,110,123,0)',
+    disabledBg: 'var(--control-bgColor-disabled, var(--color-input-disabled-bg, rgba(99,110,123,0)))',
   },
   timeline: {
-    badgeBg: '#373e47',
+    badgeBg: 'var(--timelineBadge-bgColor, var(--color-timeline-badge-bg, #373e47))',
   },
   ansi: {
-    black: '#545d68',
-    blackBright: '#636e7b',
-    white: '#909dab',
-    whiteBright: '#cdd9e5',
-    gray: '#636e7b',
-    red: '#f47067',
-    redBright: '#ff938a',
-    green: '#57ab5a',
-    greenBright: '#6bc46d',
-    yellow: '#c69026',
-    yellowBright: '#daaa3f',
-    blue: '#539bf5',
-    blueBright: '#6cb6ff',
-    magenta: '#b083f0',
-    magentaBright: '#dcbdfb',
-    cyan: '#39c5cf',
-    cyanBright: '#56d4dd',
+    black: 'var(--color-ansi-black, #545d68)',
+    blackBright: 'var(--color-ansi-black-bright, #636e7b)',
+    white: 'var(--color-ansi-white, #909dab)',
+    whiteBright: 'var(--color-ansi-white-bright, #cdd9e5)',
+    gray: 'var(--color-ansi-gray, #636e7b)',
+    red: 'var(--color-ansi-red, #f47067)',
+    redBright: 'var(--color-ansi-red-bright, #ff938a)',
+    green: 'var(--color-ansi-green, #57ab5a)',
+    greenBright: 'var(--color-ansi-green-bright, #6bc46d)',
+    yellow: 'var(--color-ansi-yellow, #c69026)',
+    yellowBright: 'var(--color-ansi-yellow-bright, #daaa3f)',
+    blue: 'var(--color-ansi-blue, #539bf5)',
+    blueBright: 'var(--color-ansi-blue-bright, #6cb6ff)',
+    magenta: 'var(--color-ansi-magenta, #b083f0)',
+    magentaBright: 'var(--color-ansi-magenta-bright, #dcbdfb)',
+    cyan: 'var(--color-ansi-cyan, #39c5cf)',
+    cyanBright: 'var(--color-ansi-cyan-bright, #56d4dd)',
   },
   btn: {
-    text: '#adbac7',
-    bg: '#373e47',
-    border: 'rgba(205,217,229,0.1)',
-    shadow: '0 0 transparent',
-    insetShadow: '0 0 transparent',
-    hoverBg: '#444c56',
-    hoverBorder: '#768390',
-    activeBg: 'hsla(213,12%,27%,1)',
-    activeBorder: '#636e7b',
-    selectedBg: '#2d333b',
-    counterBg: '#444c56',
+    text: 'var(--button-default-fgColor-rest, var(--color-btn-text, #adbac7))',
+    bg: 'var(--button-default-bgColor-rest, var(--color-btn-bg, #373e47))',
+    border: 'var(--button-default-borderColor-rest, var(--color-btn-border, rgba(205,217,229,0.1)))',
+    shadow: 'var(--button-default-shadow-resting, var(--color-btn-shadow, 0 0 transparent))',
+    insetShadow: 'var(--button-default-shadow-inset, var(--color-btn-inset-shadow, 0 0 transparent))',
+    hoverBg: 'var(--button-default-bgColor-hover, var(--color-btn-hover-bg, #444c56))',
+    hoverBorder: 'var(--button-default-borderColor-hover, var(--color-btn-hover-border, #768390))',
+    activeBg: 'var(--button-default-bgColor-active, var(--color-btn-active-bg, hsla(213,12%,27%,1)))',
+    activeBorder: 'var(--button-default-borderColor-active, var(--color-btn-active-border, #636e7b))',
+    selectedBg: 'var(--button-default-bgColor-selected, var(--color-btn-selected-bg, #2d333b))',
+    counterBg: 'var(--buttonCounter-default-bgColor-rest, var(--color-btn-counter-bg, #444c56))',
     primary: {
-      text: '#ffffff',
-      bg: '#347d39',
-      border: 'rgba(205,217,229,0.1)',
-      shadow: '0 0 transparent',
-      insetShadow: '0 0 transparent',
-      hoverBg: '#46954a',
-      hoverBorder: 'rgba(205,217,229,0.1)',
-      selectedBg: '#347d39',
-      selectedShadow: '0 0 transparent',
-      disabledText: 'rgba(205,217,229,0.5)',
-      disabledBg: 'rgba(52,125,57,0.6)',
-      disabledBorder: 'rgba(205,217,229,0.1)',
-      icon: '#cdd9e5',
-      counterBg: 'rgba(17,52,23,0.2)',
+      text: 'var(--button-primary-fgColor-rest, var(--color-btn-primary-text, #ffffff))',
+      bg: 'var(--button-primary-bgColor-rest, var(--color-btn-primary-bg, #347d39))',
+      border: 'var(--button-primary-borderColor-rest, var(--color-btn-primary-border, rgba(205,217,229,0.1)))',
+      shadow: 'var(--shadow-resting-small, var(--color-btn-primary-shadow, 0 0 transparent))',
+      insetShadow: 'var(--shadow-highlight, var(--color-btn-primary-inset-shadow, 0 0 transparent))',
+      hoverBg: 'var(--button-primary-bgColor-hover, var(--color-btn-primary-hover-bg, #46954a))',
+      hoverBorder:
+        'var(--button-primary-borderColor-hover, var(--color-btn-primary-hover-border, rgba(205,217,229,0.1)))',
+      selectedBg: 'var(--button-primary-bgColor-active, var(--color-btn-primary-selected-bg, #347d39))',
+      selectedShadow:
+        'var(--button-primary-shadow-selected, var(--color-btn-primary-selected-shadow, 0 0 transparent))',
+      disabledText:
+        'var(--button-primary-fgColor-disabled, var(--color-btn-primary-disabled-text, rgba(205,217,229,0.5)))',
+      disabledBg: 'var(--button-primary-bgColor-disabled, var(--color-btn-primary-disabled-bg, rgba(52,125,57,0.6)))',
+      disabledBorder:
+        'var(--button-primary-borderColor-disabled, var(--color-btn-primary-disabled-border, rgba(205,217,229,0.1)))',
+      icon: 'var(--button-primary-iconColor-rest, var(--color-btn-primary-icon, #cdd9e5))',
+      counterBg: 'var(--buttonCounter-primary-bgColor-rest, var(--color-btn-primary-counter-bg, rgba(17,52,23,0.2)))',
     },
     outline: {
-      text: '#4184e4',
-      hoverText: '#539bf5',
-      hoverBg: '#444c56',
-      hoverBorder: 'rgba(205,217,229,0.1)',
-      hoverShadow: '0 1px 0 rgba(28,33,40,0.1)',
-      hoverInsetShadow: 'inset 0 1px 0 rgba(205,217,229,0.03)',
-      hoverCounterBg: 'rgba(15,45,92,0.2)',
-      selectedText: '#cdd9e5',
-      selectedBg: '#1b4b91',
-      selectedBorder: 'rgba(205,217,229,0.1)',
-      selectedShadow: '0 0 transparent',
-      disabledText: 'rgba(83,155,245,0.5)',
-      disabledBg: '#22272e',
-      disabledCounterBg: 'rgba(49,109,202,0.05)',
-      counterBg: 'rgba(15,45,92,0.2)',
-      hoverCounterFg: '#539bf5',
-      disabledCounterFg: 'rgba(83,155,245,0.5)',
-      counterFg: '#4184e4',
+      text: 'var(--button-outline-fgColor-rest, var(--color-btn-outline-text, #4184e4))',
+      hoverText: 'var(--button-outline-fgColor-hover, var(--color-btn-outline-hover-text, #539bf5))',
+      hoverBg: 'var(--button-outline-bgColor-hover, var(--color-btn-outline-hover-bg, #444c56))',
+      hoverBorder:
+        'var(--button-outline-borderColor-hover, var(--color-btn-outline-hover-border, rgba(205,217,229,0.1)))',
+      hoverShadow:
+        'var(--shadow-resting-small, var(--color-btn-outline-hover-shadow, 0 1px 0 rgba(28,33,40,0.1)))// HI_KATIE: no matches',
+      hoverInsetShadow:
+        'var(--shadow-highlight, var(--color-btn-outline-hover-inset-shadow, inset 0 1px 0 rgba(205,217,229,0.03)))// HI_KATIE: no matches',
+      hoverCounterBg:
+        'var(--buttonCounter-outline-bgColor-hover, var(--color-btn-outline-hover-counter-bg, rgba(15,45,92,0.2)))',
+      selectedText: 'var(--button-outline-fgColor-active, var(--color-btn-outline-selected-text, #cdd9e5))',
+      selectedBg: 'var(--button-outline-bgColor-active, var(--color-btn-outline-selected-bg, #1b4b91))',
+      selectedBorder:
+        'var(--button-outline-borderColor-active, var(--color-btn-outline-selected-border, rgba(205,217,229,0.1)))',
+      selectedShadow:
+        'var(--button-outline-shadow-selected, var(--color-btn-outline-selected-shadow, 0 0 transparent))',
+      disabledText:
+        'var(--button-outline-fgColor-disabled, var(--color-btn-outline-disabled-text, rgba(83,155,245,0.5)))',
+      disabledBg: 'var(--button-outline-bgColor-disabled, var(--color-btn-outline-disabled-bg, #22272e))',
+      disabledCounterBg:
+        'var(--buttonCounter-outline-bgColor-disabled, var(--color-btn-outline-disabled-counter-bg, rgba(49,109,202,0.05)))',
+      counterBg: 'var(--buttonCounter-outline-bgColor-rest, var(--color-btn-outline-counter-bg, rgba(15,45,92,0.2)))',
+      hoverCounterFg: 'var(--buttonCounter-outline-fgColor-hover, var(--color-btn-outline-hover-counter-fg, #539bf5))',
+      disabledCounterFg:
+        'var(--buttonCounter-outline-fgColor-disabled, var(--color-btn-outline-disabled-counter-fg, rgba(83,155,245,0.5)))',
+      counterFg: 'var(--buttonCounter-outline-fgColor-rest, var(--color-btn-outline-counter-fg, #4184e4))',
     },
     danger: {
-      text: '#e5534b',
-      hoverText: '#cdd9e5',
-      hoverBg: '#c93c37',
-      hoverBorder: '#e5534b',
-      hoverShadow: '0 0 transparent',
-      hoverInsetShadow: '0 0 transparent',
-      hoverIcon: '#cdd9e5',
-      hoverCounterBg: 'rgba(255,255,255,0.2)',
-      selectedText: '#ffffff',
-      selectedBg: '#ad2e2c',
-      selectedBorder: '#f47067',
-      selectedShadow: '0 0 transparent',
-      disabledText: 'rgba(229,83,75,0.5)',
-      disabledBg: '#22272e',
-      disabledCounterBg: 'rgba(201,60,55,0.05)',
-      counterBg: 'rgba(93,15,18,0.2)',
-      icon: '#e5534b',
-      counterFg: '#e5534b',
-      disabledCounterFg: 'rgba(229,83,75,0.5)',
-      hoverCounterFg: '#cdd9e5',
+      text: 'var(--button-danger-fgColor-rest, var(--color-btn-danger-text, #e5534b))',
+      hoverText: 'var(--button-danger-fgColor-hover, var(--color-btn-danger-hover-text, #cdd9e5))',
+      hoverBg: 'var(--button-danger-bgColor-hover, var(--color-btn-danger-hover-bg, #c93c37))',
+      hoverBorder: 'var(--button-danger-borderColor-hover, var(--color-btn-danger-hover-border, #e5534b))',
+      hoverShadow: 'var(--shadow-resting-small, var(--color-btn-danger-hover-shadow, 0 0 transparent))',
+      hoverInsetShadow: 'var(--shadow-highlight, var(--color-btn-danger-hover-inset-shadow, 0 0 transparent))',
+      hoverIcon: 'var(--button-danger-iconColor-hover, var(--color-btn-danger-hover-icon, #cdd9e5))',
+      hoverCounterBg:
+        'var(--buttonCounter-danger-bgColor-hover, var(--color-btn-danger-hover-counter-bg, rgba(255,255,255,0.2)))',
+      selectedText: 'var(--button-danger-fgColor-active, var(--color-btn-danger-selected-text, #ffffff))',
+      selectedBg: 'var(--button-danger-bgColor-active, var(--color-btn-danger-selected-bg, #ad2e2c))',
+      selectedBorder: 'var(--button-danger-borderColor-active, var(--color-btn-danger-selected-border, #f47067))',
+      selectedShadow: 'var(--button-danger-shadow-selected, var(--color-btn-danger-selected-shadow, 0 0 transparent))',
+      disabledText: 'var(--button-danger-fgColor-disabled, var(--color-btn-danger-disabled-text, rgba(229,83,75,0.5)))',
+      disabledBg: 'var(--button-danger-bgColor-disabled, var(--color-btn-danger-disabled-bg, #22272e))',
+      disabledCounterBg:
+        'var(--buttonCounter-danger-bgColor-disabled, var(--color-btn-danger-disabled-counter-bg, rgba(201,60,55,0.05)))',
+      counterBg: 'var(--buttonCounter-danger-bgColor-rest, var(--color-btn-danger-counter-bg, rgba(93,15,18,0.2)))',
+      icon: 'var(--button-danger-iconColor-rest, var(--color-btn-danger-icon, #e5534b))',
+      counterFg: 'var(--buttonCounter-danger-fgColor-rest, var(--color-btn-danger-counter-fg, #e5534b))',
+      disabledCounterFg:
+        'var(--buttonCounter-danger-fgColor-disabled, var(--color-btn-danger-disabled-counter-fg, rgba(229,83,75,0.5)))',
+      hoverCounterFg: 'var(--buttonCounter-danger-fgColor-hover, var(--color-btn-danger-hover-counter-fg, #cdd9e5))',
     },
     inactive: {
-      bg: '#373e47',
-      text: '#768390',
+      bg: 'var(--button-inactive-bgColor-rest, var(--color-btn-inactive-bg, #373e47))',
+      text: 'var(--button-inactive-fgColor-rest, var(--color-btn-inactive-text, #768390))',
     },
   },
   underlinenav: {
-    icon: '#636e7b',
-    borderHover: 'rgba(99,110,123,0.4)',
+    icon: 'var(--underlineNav-iconColor-rest, var(--color-underlinenav-icon, #636e7b))',
+    borderHover: 'var(--underlineNav-borderColor-hover, var(--color-underlinenav-border-hover, rgba(99,110,123,0.4)))',
   },
   actionListItem: {
-    inlineDivider: 'rgba(68,76,86,0.48)',
+    inlineDivider: 'var(--borderColor-muted, var(--color-action-list-item-inline-divider, rgba(68,76,86,0.48)))',
     default: {
-      hoverBg: 'rgba(144,157,171,0.12)',
-      hoverBorder: 'rgba(0,0,0,0)',
-      activeBg: 'rgba(144,157,171,0.2)',
-      activeBorder: 'rgba(0,0,0,0)',
-      selectedBg: 'rgba(144,157,171,0.08)',
+      hoverBg:
+        'var(--control-transparent-bgColor-hover, var(--color-action-list-item-default-hover-bg, rgba(144,157,171,0.12)))',
+      hoverBorder:
+        'var(--control-transparent-borderColor-hover, var(--color-action-list-item-default-hover-border, transparent))',
+      activeBg:
+        'var(--control-transparent-bgColor-active, var(--color-action-list-item-default-active-bg, rgba(144,157,171,0.2)))',
+      activeBorder:
+        'var(--control-transparent-borderColor-active, var(--color-action-list-item-default-active-border, transparent))',
+      selectedBg:
+        'var(--control-transparent-bgColor-selected, var(--color-action-list-item-default-selected-bg, rgba(144,157,171,0.08)))',
     },
     danger: {
-      hoverBg: 'rgba(229,83,75,0.16)',
-      activeBg: 'rgba(229,83,75,0.24)',
-      hoverText: '#f47067',
+      hoverBg:
+        'var(--control-danger-bgColor-hover, var(--color-action-list-item-danger-hover-bg, rgba(229,83,75,0.16)))',
+      activeBg:
+        'var(--control-danger-bgColor-active, var(--color-action-list-item-danger-active-bg, rgba(229,83,75,0.24)))',
+      hoverText: 'var(--control-danger-fgColor-hover, var(--color-action-list-item-danger-hover-text, #f47067))',
     },
   },
   switchTrack: {
-    bg: 'rgba(99,110,123,0.1)',
-    hoverBg: 'hsla(213,11%,69%,0.1)',
-    activeBg: 'rgba(99,110,123,0.4)',
-    disabledBg: '#373e47',
-    fg: '#768390',
-    disabledFg: '#1c2128',
-    border: 'rgba(0,0,0,0)',
+    bg: 'var(--controlTrack-bgColor-rest, var(--color-switch-track-bg, rgba(99,110,123,0.1)))',
+    hoverBg: 'var(--controlTrack-bgColor-hover, var(--color-switch-track-hover-bg, hsla(213,11%,69%,0.1)))',
+    activeBg: 'var(--controlTrack-bgColor-active, var(--color-switch-track-active-bg, rgba(99,110,123,0.4)))',
+    disabledBg: 'var(--controlTrack-bgColor-disabled, var(--color-switch-track-disabled-bg, #373e47))',
+    fg: 'var(--controlTrack-fgColor-rest, var(--color-switch-track-fg, #768390))',
+    disabledFg: 'var(--controlTrack-fgColor-disabled, var(--color-switch-track-disabled-fg, #1c2128))',
+    border: 'var(--controlTrack-borderColor-rest, var(--color-switch-track-border, transparent))',
     checked: {
-      bg: 'rgba(49,109,202,0.35)',
-      hoverBg: 'rgba(49,109,202,0.5)',
-      activeBg: 'rgba(49,109,202,0.65)',
-      fg: '#cdd9e5',
-      disabledFg: '#1c2128',
-      border: 'rgba(0,0,0,0)',
+      bg: 'var(--control-checked-bgColor-rest, var(--color-switch-track-checked-bg, rgba(49,109,202,0.35)))',
+      hoverBg: 'var(--control-checked-bgColor-hover, var(--color-switch-track-checked-hover-bg, rgba(49,109,202,0.5)))',
+      activeBg:
+        'var(--control-checked-bgColor-active, var(--color-switch-track-checked-active-bg, rgba(49,109,202,0.65)))',
+      fg: 'var(--control-checked-fgColor-rest, var(--color-switch-track-checked-fg, #cdd9e5))',
+      disabledFg: 'var(--control-checked-fgColor-disabled, var(--color-switch-track-checked-disabled-fg, #1c2128))',
+      border: 'var(--borderColor-transparent, var(--color-switch-track-checked-border, transparent))',
     },
   },
   switchKnob: {
-    bg: '#22272e',
-    border: '#606771',
-    disabledBg: '#2d333b',
+    bg: 'var(--controlKnob-bgColor-rest, var(--color-switch-knob-bg, #22272e))',
+    border: 'var(--controlKnob-borderColor-rest, var(--color-switch-knob-border, #606771))',
+    disabledBg: 'var(--controlKnob-bgColor-disabled, var(--color-switch-knob-disabled-bg, #2d333b))',
     checked: {
-      bg: '#22272e',
-      disabledBg: '#2d333b',
-      border: 'rgba(49,109,202,0.35)',
+      bg: 'var(--controlKnob-bgColor-checked, var(--color-switch-knob-checked-bg, #22272e))',
+      disabledBg: 'var(--controlKnob-bgColor-disabled, var(--color-switch-knob-checked-disabled-bg, #2d333b))',
+      border: 'var(--controlKnob-borderColor-checked, var(--color-switch-knob-checked-border, rgba(49,109,202,0.35)))',
     },
   },
   segmentedControl: {
-    bg: 'rgba(99,110,123,0.1)',
+    bg: 'var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg, rgba(99,110,123,0.1)))',
     button: {
-      bg: '#22272e',
+      bg: 'var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg, #22272e))',
       hover: {
-        bg: '#444c56',
+        bg: 'var(--controlTrack-bgColor-hover, var(--color-segmented-control-button-hover-bg, #444c56))',
       },
       active: {
-        bg: '#373e47',
+        bg: 'var(--controlTrack-bgColor-active, var(--color-segmented-control-button-active-bg, #373e47))',
       },
       selected: {
-        border: '#636e7b',
+        border: 'var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-selected-border, #636e7b))',
       },
     },
   },
   treeViewItem: {
     chevron: {
-      hoverBg: 'rgba(144,157,171,0.12)',
+      hoverBg:
+        'var(--control-transparent-bgColor-hover, var(--color-tree-view-item-chevron-hover-bg, rgba(144,157,171,0.12)))',
     },
     directory: {
-      fill: '#768390',
+      fill: 'var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-directory-fill, #768390))',
     },
   },
   fg: {
     default: '#adbac7',
     muted: '#768390',
-    subtle: '#636e7b',
-    onEmphasis: '#cdd9e5',
+    subtle: 'var(--fgColor-muted, var(--color-fg-subtle, #636e7b))',
+    onEmphasis: 'var(--fgColor-onEmphasis, var(--color-fg-on-emphasis, #cdd9e5))',
   },
   canvas: {
-    default: '#22272e',
-    overlay: '#2d333b',
-    inset: '#1c2128',
-    subtle: '#2d333b',
+    default: 'var(--bgColor-default, var(--color-canvas-default, #22272e))',
+    overlay: 'var(--overlay-bgColor, var(--color-canvas-overlay, #2d333b))',
+    inset: 'var(--bgColor-inset, var(--color-canvas-inset, #1c2128))',
+    subtle: 'var(--bgColor-muted, var(--color-canvas-subtle, #2d333b))',
   },
   border: {
-    default: '#444c56',
-    muted: '#373e47',
-    subtle: 'rgba(205,217,229,0.1)',
+    default: 'var(--borderColor-default, var(--color-border-default, #444c56))',
+    muted: 'var(--borderColor-muted, var(--color-border-muted, #373e47))',
+    subtle: 'var(--borderColor-muted, var(--color-border-subtle, rgba(205,217,229,0.1)))',
   },
   shadow: {
-    small: '0 0 transparent',
-    medium: '0 3px 6px #1c2128',
-    large: '0 8px 24px #1c2128',
-    extraLarge: '0 12px 48px #1c2128',
+    small: 'var(--shadow-resting-small, var(--color-shadow-small, 0 0 transparent))',
+    medium: 'var(--shadow-resting-medium, var(--color-shadow-medium, 0 3px 6px #1c2128))',
+    large: 'var(--shadow-floating-large, var(--color-shadow-large, 0 8px 24px #1c2128))',
+    extraLarge: 'var(--shadow-floating-xlarge, var(--color-shadow-extra-large, 0 12px 48px #1c2128))',
   },
   neutral: {
-    emphasisPlus: '#636e7b',
-    emphasis: '#636e7b',
-    muted: 'rgba(99,110,123,0.4)',
-    subtle: 'rgba(99,110,123,0.1)',
+    emphasisPlus: 'var(--bgColor-emphasis, var(--color-neutral-emphasis-plus, #636e7b))',
+    emphasis: 'var(--bgColor-neutral-emphasis, var(--color-neutral-emphasis, #636e7b))',
+    muted: 'var(--borderColor-neutral-muted, var(--color-neutral-muted, rgba(99,110,123,0.4)))',
+    subtle: 'var(--bgColor-neutral-muted, var(--color-neutral-subtle, rgba(99,110,123,0.1)))',
   },
   accent: {
     fg: '#539bf5',
-    emphasis: '#316dca',
-    muted: 'rgba(65,132,228,0.4)',
-    subtle: 'rgba(65,132,228,0.1)',
+    emphasis: 'var(--bgColor-accent-emphasis, var(--color-accent-emphasis, #316dca))',
+    muted: 'var(--borderColor-accent-muted, var(--color-accent-muted, rgba(65,132,228,0.4)))',
+    subtle: 'var(--bgColor-accent-muted, var(--color-accent-subtle, rgba(65,132,228,0.1)))',
   },
   success: {
-    fg: '#57ab5a',
-    emphasis: '#347d39',
-    muted: 'rgba(70,149,74,0.4)',
-    subtle: 'rgba(70,149,74,0.15)',
+    fg: 'var(--fgColor-success, var(--color-success-fg, #57ab5a))',
+    emphasis: 'var(--bgColor-success-emphasis, var(--color-success-emphasis, #347d39))',
+    muted: 'var(--borderColor-success-muted, var(--color-success-muted, rgba(70,149,74,0.4)))',
+    subtle: 'var(--bgColor-success-muted, var(--color-success-subtle, rgba(70,149,74,0.15)))',
   },
   attention: {
-    fg: '#c69026',
-    emphasis: '#966600',
-    muted: 'rgba(174,124,20,0.4)',
-    subtle: 'rgba(174,124,20,0.15)',
+    fg: 'var(--fgColor-attention, var(--color-attention-fg, #c69026))',
+    emphasis: 'var(--bgColor-attention-emphasis, var(--color-attention-emphasis, #966600))',
+    muted: 'var(--borderColor-attention-muted, var(--color-attention-muted, rgba(174,124,20,0.4)))',
+    subtle: 'var(--bgColor-attention-muted, var(--color-attention-subtle, rgba(174,124,20,0.15)))',
   },
   severe: {
-    fg: '#cc6b2c',
-    emphasis: '#ae5622',
-    muted: 'rgba(204,107,44,0.4)',
-    subtle: 'rgba(204,107,44,0.1)',
+    fg: 'var(--fgColor-severe, var(--color-severe-fg, #cc6b2c))',
+    emphasis: 'var(--bgColor-severe-emphasis, var(--color-severe-emphasis, #ae5622))',
+    muted: 'var(--borderColor-severe-muted, var(--color-severe-muted, rgba(204,107,44,0.4)))',
+    subtle: 'var(--bgColor-severe-muted, var(--color-severe-subtle, rgba(204,107,44,0.1)))',
   },
   danger: {
-    fg: '#e5534b',
-    emphasis: '#c93c37',
-    muted: 'rgba(229,83,75,0.4)',
-    subtle: 'rgba(229,83,75,0.1)',
+    fg: 'var(--fgColor-danger, var(--color-danger-fg, #e5534b))',
+    emphasis: 'var(--borderColor-danger-emphasis, var(--color-danger-emphasis, #c93c37))',
+    muted: 'var(--borderColor-danger-muted, var(--color-danger-muted, rgba(229,83,75,0.4)))',
+    subtle: 'var(--bgColor-danger-muted, var(--color-danger-subtle, rgba(229,83,75,0.1)))',
   },
   open: {
-    fg: '#57ab5a',
-    emphasis: '#347d39',
-    muted: 'rgba(70,149,74,0.4)',
-    subtle: 'rgba(70,149,74,0.15)',
+    fg: 'var(--fgColor-open, var(--color-open-fg, #57ab5a))',
+    emphasis: 'var(--bgColor-open-emphasis, var(--color-open-emphasis, #347d39))',
+    muted: 'var(--borderColor-open-muted, var(--color-open-muted, rgba(70,149,74,0.4)))',
+    subtle: 'var(--bgColor-open-muted, var(--color-open-subtle, rgba(70,149,74,0.15)))',
   },
   closed: {
-    fg: '#e5534b',
-    emphasis: '#c93c37',
-    muted: 'rgba(229,83,75,0.4)',
-    subtle: 'rgba(229,83,75,0.15)',
+    fg: 'var(--fgColor-closed, var(--color-closed-fg, #e5534b))',
+    emphasis: 'var(--bgColor-closed-emphasis, var(--color-closed-emphasis, #c93c37))',
+    muted: 'var(--borderColor-closed-muted, var(--color-closed-muted, rgba(229,83,75,0.4)))',
+    subtle: 'var(--bgColor-closed-muted, var(--color-closed-subtle, rgba(229,83,75,0.15)))',
   },
   done: {
-    fg: '#986ee2',
-    emphasis: '#8256d0',
-    muted: 'rgba(152,110,226,0.4)',
-    subtle: 'rgba(152,110,226,0.1)',
+    fg: 'var(--fgColor-done, var(--color-done-fg, #986ee2))',
+    emphasis: 'var(--bgColor-done-emphasis, var(--color-done-emphasis, #8256d0))',
+    muted: 'var(--borderColor-done-muted, var(--color-done-muted, rgba(152,110,226,0.4)))',
+    subtle: 'var(--bgColor-done-muted, var(--color-done-subtle, rgba(152,110,226,0.1)))',
   },
   sponsors: {
-    fg: '#c96198',
-    emphasis: '#ae4c82',
-    muted: 'rgba(201,97,152,0.4)',
-    subtle: 'rgba(201,97,152,0.1)',
+    fg: 'var(--fgColor-sponsors, var(--color-sponsors-fg, #c96198))',
+    emphasis: 'var(--bgColor-sponsors-emphasis, var(--color-sponsors-emphasis, #ae4c82))',
+    muted: 'var(--borderColor-sponsors-muted, var(--color-sponsors-muted, rgba(201,97,152,0.4)))',
+    subtle: 'var(--bgColor-sponsors-muted, var(--color-sponsors-subtle, rgba(201,97,152,0.1)))',
   },
   primer: {
     fg: {
-      disabled: '#545d68',
+      disabled: 'var(--fgColor-disabled, var(--color-primer-fg-disabled, #545d68))',
     },
     canvas: {
-      backdrop: 'rgba(28,33,40,0.8)',
-      sticky: 'rgba(34,39,46,0.95)',
+      backdrop: 'var(--overlay-backdrop-bgColor, var(--color-primer-canvas-backdrop, rgba(28,33,40,0.8)))',
+      sticky: 'var(--color-primer-canvas-sticky, rgba(34,39,46,0.95))',
     },
     border: {
-      active: '#ec775c',
-      contrast: 'rgba(205,217,229,0.2)',
+      active: 'var(--underlineNav-borderColor-active, var(--color-primer-border-active, #ec775c))',
+      contrast: 'var(--borderColor-muted, var(--color-primer-border-contrast, rgba(205,217,229,0.2)))',
     },
     shadow: {
-      highlight: '0 0 transparent',
-      inset: '0 0 transparent',
+      highlight: 'var(--shadow-highlight, var(--color-primer-shadow-highlight, 0 0 transparent))',
+      inset: 'var(--shadow-inset, var(--color-primer-shadow-inset, 0 0 transparent))',
     },
   },
   scale: {
diff --git a/src/legacy-theme/ts/colors/dark_high_contrast.ts b/src/legacy-theme/ts/colors/dark_high_contrast.ts
index 14ac214d1f2..3f0ec11c061 100644
--- a/src/legacy-theme/ts/colors/dark_high_contrast.ts
+++ b/src/legacy-theme/ts/colors/dark_high_contrast.ts
@@ -1,24 +1,24 @@
 const colors = {
-  canvasDefaultTransparent: 'rgba(10,12,16,0)',
-  pageHeaderBg: '#0a0c10',
+  canvasDefaultTransparent: 'var(--bgColor-transparent, var(--color-canvas-default-transparent, rgba(10,12,16,0)))',
+  pageHeaderBg: 'var(--page-header-bgColor, var(--color-page-header-bg, #0a0c10))',
   marketingIcon: {
-    primary: '#91cbff',
-    secondary: '#409eff',
+    primary: 'var(--color-marketing-icon-primary, #91cbff)',
+    secondary: 'var(--color-marketing-icon-secondary, #409eff)',
   },
   diffBlob: {
     addition: {
-      numText: '#f0f3f6',
+      numText: 'var(--diffBlob-addition-fgColor-num, var(--color-diff-blob-addition-num-text, #f0f3f6))',
       fg: '#0a0c10',
-      numBg: 'rgba(38,205,77,0.3)',
-      lineBg: 'rgba(9,180,58,0.15)',
-      wordBg: '#09b43a',
+      numBg: 'var(--diffBlob-addition-bgColor-num, var(--color-diff-blob-addition-num-bg, rgba(38,205,77,0.3)))',
+      lineBg: 'var(--diffBlob-addition-bgColor-line, var(--color-diff-blob-addition-line-bg, rgba(9,180,58,0.15)))',
+      wordBg: 'var(--diffBlob-addition-bgColor-word, var(--color-diff-blob-addition-word-bg, #09b43a))',
     },
     deletion: {
-      numText: '#f0f3f6',
+      numText: 'var(--diffBlob-deletion-fgColor-num, var(--color-diff-blob-deletion-num-text, #f0f3f6))',
       fg: '#0a0c10',
-      numBg: 'rgba(255,106,105,0.3)',
-      lineBg: 'rgba(255,106,105,0.1)',
-      wordBg: '#ff6a69',
+      numBg: 'var(--diffBlob-deletion-bgColor-num, var(--color-diff-blob-deletion-num-bg, rgba(255,106,105,0.3)))',
+      lineBg: 'var(--diffBlob-deletion-bgColor-line, var(--color-diff-blob-deletion-line-bg, rgba(255,106,105,0.1)))',
+      wordBg: 'var(--diffBlob-deletion-bgColor-word, var(--color-diff-blob-deletion-word-bg, #ff6a69))',
     },
     hunk: {
       numBg: 'rgba(64,158,255,0.4)',
@@ -26,165 +26,168 @@ const colors = {
     expander: {
       icon: '#f0f3f6',
     },
-    selectedLineHighlightMixBlendMode: 'screen',
+    selectedLineHighlightMixBlendMode: 'var(--color-diff-blob-selected-line-highlight-mix-blend-mode, screen)',
   },
   diffstat: {
     deletionBorder: '#ffb1af',
     additionBorder: '#4ae168',
-    additionBg: '#26cd4d',
+    additionBg: 'var(--diffStat-addition-bgColor, var(--color-diffstat-addition-bg, #26cd4d))',
   },
   searchKeyword: {
-    hl: 'rgba(240,183,47,0.4)',
+    hl: 'var(--highlight-neutral-bgColor, var(--color-search-keyword-hl, rgba(240,183,47,0.4)))',
   },
   prettylights: {
     syntax: {
-      comment: '#bdc4cc',
-      constant: '#91cbff',
-      entity: '#dbb7ff',
-      storageModifierImport: '#f0f3f6',
-      entityTag: '#72f088',
-      keyword: '#ff9492',
-      string: '#addcff',
-      variable: '#ffb757',
-      brackethighlighterUnmatched: '#ff6a69',
-      invalidIllegalText: '#ffffff',
-      invalidIllegalBg: '#e82a2f',
-      carriageReturnText: '#ffffff',
-      carriageReturnBg: '#ff4445',
-      stringRegexp: '#72f088',
-      markupList: '#fbd669',
-      markupHeading: '#409eff',
-      markupItalic: '#f0f3f6',
-      markupBold: '#f0f3f6',
-      markupDeletedText: '#ffdedb',
-      markupDeletedBg: '#cc1421',
-      markupInsertedText: '#acf7b6',
-      markupInsertedBg: '#007728',
-      markupChangedText: '#ffe1b4',
-      markupChangedBg: '#a74c00',
-      markupIgnoredText: '#f0f3f6',
-      markupIgnoredBg: '#318bf8',
-      metaDiffRange: '#dbb7ff',
-      brackethighlighterAngle: '#bdc4cc',
-      sublimelinterGutterMark: '#7a828e',
-      constantOtherReferenceLink: '#addcff',
+      comment: 'var(--color-prettylights-syntax-comment, #bdc4cc)',
+      constant: 'var(--color-prettylights-syntax-constant, #91cbff)',
+      entity: 'var(--color-prettylights-syntax-entity, #dbb7ff)',
+      storageModifierImport: 'var(--color-prettylights-syntax-storage-modifier-import, #f0f3f6)',
+      entityTag: 'var(--color-prettylights-syntax-entity-tag, #72f088)',
+      keyword: 'var(--color-prettylights-syntax-keyword, #ff9492)',
+      string: 'var(--color-prettylights-syntax-string, #addcff)',
+      variable: 'var(--color-prettylights-syntax-variable, #ffb757)',
+      brackethighlighterUnmatched: 'var(--color-prettylights-syntax-brackethighlighter-unmatched, #ff6a69)',
+      invalidIllegalText: 'var(--color-prettylights-syntax-invalid-illegal-text, #ffffff)',
+      invalidIllegalBg: 'var(--color-prettylights-syntax-invalid-illegal-bg, #e82a2f)',
+      carriageReturnText: 'var(--color-prettylights-syntax-carriage-return-text, #ffffff)',
+      carriageReturnBg: 'var(--color-prettylights-syntax-carriage-return-bg, #ff4445)',
+      stringRegexp: 'var(--color-prettylights-syntax-string-regexp, #72f088)',
+      markupList: 'var(--color-prettylights-syntax-markup-list, #fbd669)',
+      markupHeading: 'var(--color-prettylights-syntax-markup-heading, #409eff)',
+      markupItalic: 'var(--color-prettylights-syntax-markup-italic, #f0f3f6)',
+      markupBold: 'var(--color-prettylights-syntax-markup-bold, #f0f3f6)',
+      markupDeletedText: 'var(--color-prettylights-syntax-markup-deleted-text, #ffdedb)',
+      markupDeletedBg: 'var(--color-prettylights-syntax-markup-deleted-bg, #cc1421)',
+      markupInsertedText: 'var(--color-prettylights-syntax-markup-inserted-text, #acf7b6)',
+      markupInsertedBg: 'var(--color-prettylights-syntax-markup-inserted-bg, #007728)',
+      markupChangedText: 'var(--color-prettylights-syntax-markup-changed-text, #ffe1b4)',
+      markupChangedBg: 'var(--color-prettylights-syntax-markup-changed-bg, #a74c00)',
+      markupIgnoredText: 'var(--color-prettylights-syntax-markup-ignored-text, #f0f3f6)',
+      markupIgnoredBg: 'var(--color-prettylights-syntax-markup-ignored-bg, #318bf8)',
+      metaDiffRange: 'var(--color-prettylights-syntax-meta-diff-range, #dbb7ff)',
+      brackethighlighterAngle: 'var(--color-prettylights-syntax-brackethighlighter-angle, #bdc4cc)',
+      sublimelinterGutterMark: 'var(--color-prettylights-syntax-sublimelinter-gutter-mark, #7a828e)',
+      constantOtherReferenceLink: 'var(--color-prettylights-syntax-constant-other-reference-link, #addcff)',
     },
   },
   codemirror: {
-    text: '#f0f3f6',
-    bg: '#0a0c10',
-    guttersBg: '#0a0c10',
-    guttermarkerText: '#0a0c10',
-    guttermarkerSubtleText: '#9ea7b3',
-    linenumberText: '#f0f3f6',
-    cursor: '#f0f3f6',
+    text: 'var(--codeMirror-fgColor, var(--color-codemirror-text, #f0f3f6))',
+    bg: 'var(--codeMirror-bgColor, var(--color-codemirror-bg, #0a0c10))',
+    guttersBg: 'var(--codeMirror-gutters-bgColor, var(--color-codemirror-gutters-bg, #0a0c10))',
+    guttermarkerText:
+      'var(--codeMirror-gutterMarker-fgColor-default, var(--color-codemirror-guttermarker-text, #0a0c10))',
+    guttermarkerSubtleText:
+      'var(--codeMirror-gutterMarker-fgColor-muted, var(--color-codemirror-guttermarker-subtle-text, #9ea7b3))',
+    linenumberText: 'var(--codeMirror-lineNumber-fgColor, var(--color-codemirror-linenumber-text, #f0f3f6))',
+    cursor: 'var(--codeMirror-cursor-fgColor, var(--color-codemirror-cursor, #f0f3f6))',
     selectionBg: 'rgba(64,158,255,0.4)',
-    activelineBg: 'rgba(158,167,179,0.1)',
-    matchingbracketText: '#f0f3f6',
-    linesBg: '#0a0c10',
+    activelineBg: 'var(--codeMirror-activeline-bgColor, var(--color-codemirror-activeline-bg, rgba(158,167,179,0.1)))',
+    matchingbracketText:
+      'var(--codeMirror-matchingBracket-fgColor, var(--color-codemirror-matchingbracket-text, #f0f3f6))',
+    linesBg: 'var(--codeMirror-lines-bgColor, var(--color-codemirror-lines-bg, #0a0c10))',
     syntax: {
-      comment: '#bdc4cc',
-      constant: '#91cbff',
-      entity: '#dbb7ff',
-      keyword: '#ff9492',
-      storage: '#ff9492',
-      string: '#addcff',
-      support: '#91cbff',
-      variable: '#ffb757',
+      comment: 'var(--codeMirror-syntax-fgColor-comment, var(--color-codemirror-syntax-comment, #bdc4cc))',
+      constant: 'var(--codeMirror-syntax-fgColor-constant, var(--color-codemirror-syntax-constant, #91cbff))',
+      entity: 'var(--codeMirror-syntax-fgColor-entity, var(--color-codemirror-syntax-entity, #dbb7ff))',
+      keyword: 'var(--codeMirror-syntax-fgColor-keyword, var(--color-codemirror-syntax-keyword, #ff9492))',
+      storage: 'var(--codeMirror-syntax-fgColor-storage, var(--color-codemirror-syntax-storage, #ff9492))',
+      string: 'var(--codeMirror-syntax-fgColor-string, var(--color-codemirror-syntax-string, #addcff))',
+      support: 'var(--codeMirror-syntax-fgColor-support, var(--color-codemirror-syntax-support, #91cbff))',
+      variable: 'var(--codeMirror-syntax-fgColor-variable, var(--color-codemirror-syntax-variable, #ffb757))',
     },
   },
   checks: {
-    bg: '#010409',
-    runBorderWidth: '1px',
-    containerBorderWidth: '1px',
-    textPrimary: '#f0f3f6',
-    textSecondary: '#f0f3f6',
-    textLink: '#71b7ff',
-    btnIcon: '#f0f3f6',
-    btnHoverIcon: '#f0f3f6',
-    btnHoverBg: 'rgba(158,167,179,0.1)',
-    inputText: '#f0f3f6',
-    inputPlaceholderText: '#9ea7b3',
-    inputFocusText: '#f0f3f6',
-    inputBg: '#272b33',
-    inputShadow: '0 0 0 1px (obj) => (0, get_1.default)(obj, path)',
-    donutError: '#ff6a69',
-    donutPending: '#f0b72f',
-    donutSuccess: '#09b43a',
-    donutNeutral: '#bdc4cc',
-    dropdownText: '#f0f3f6',
-    dropdownBg: '#272b33',
-    dropdownBorder: '#7a828e',
-    dropdownShadow: 'rgba(1,4,9,0.3)',
-    dropdownHoverText: '#f0f3f6',
-    dropdownHoverBg: 'rgba(158,167,179,0.1)',
-    dropdownBtnHoverText: '#f0f3f6',
-    dropdownBtnHoverBg: 'rgba(158,167,179,0.1)',
-    scrollbarThumbBg: 'rgba(158,167,179,0.4)',
-    headerLabelText: '#f0f3f6',
-    headerLabelOpenText: '#f0f3f6',
-    headerBorder: '#7a828e',
-    headerIcon: '#f0f3f6',
-    lineText: '#f0f3f6',
-    lineNumText: '#9ea7b3',
-    lineTimestampText: '#9ea7b3',
-    lineHoverBg: 'rgba(158,167,179,0.1)',
-    lineSelectedBg: 'rgba(64,158,255,0.1)',
-    lineSelectedNumText: '#71b7ff',
-    lineDtFmText: '#0a0c10',
-    lineDtFmBg: '#e09b13',
-    gateBg: 'rgba(224,155,19,0.15)',
-    gateText: '#f0f3f6',
-    gateWaitingText: '#f0b72f',
-    stepHeaderOpenBg: '#272b33',
-    stepErrorText: '#ff6a69',
-    stepWarningText: '#f0b72f',
-    loglineText: '#f0f3f6',
-    loglineNumText: '#9ea7b3',
-    loglineDebugText: '#b780ff',
-    loglineErrorText: '#f0f3f6',
-    loglineErrorNumText: '#9ea7b3',
-    loglineErrorBg: 'rgba(255,106,105,0.1)',
-    loglineWarningText: '#f0f3f6',
-    loglineWarningNumText: '#f0b72f',
-    loglineWarningBg: 'rgba(224,155,19,0.15)',
-    loglineCommandText: '#71b7ff',
-    loglineSectionText: '#26cd4d',
+    bg: 'var(--color-checks-bg, #010409)',
+    runBorderWidth: 'var(--color-checks-run-border-width, 1px)',
+    containerBorderWidth: 'var(--color-checks-container-border-width, 1px)',
+    textPrimary: 'var(--color-checks-text-primary, #f0f3f6)',
+    textSecondary: 'var(--color-checks-text-secondary, #f0f3f6)',
+    textLink: 'var(--color-checks-text-link, #71b7ff)',
+    btnIcon: 'var(--color-checks-btn-icon, #f0f3f6)',
+    btnHoverIcon: 'var(--color-checks-btn-hover-icon, #f0f3f6)',
+    btnHoverBg: 'var(--color-checks-btn-hover-bg, rgba(158,167,179,0.1))',
+    inputText: 'var(--color-checks-input-text, #f0f3f6)',
+    inputPlaceholderText: 'var(--color-checks-input-placeholder-text, #9ea7b3)',
+    inputFocusText: 'var(--color-checks-input-focus-text, #f0f3f6)',
+    inputBg: 'var(--color-checks-input-bg, #272b33)',
+    inputShadow: 'var(--color-checks-input-shadow, 0 0 0 1px #7a828e)',
+    donutError: 'var(--color-checks-donut-error, #ff6a69)',
+    donutPending: 'var(--color-checks-donut-pending, #f0b72f)',
+    donutSuccess: 'var(--color-checks-donut-success, #09b43a)',
+    donutNeutral: 'var(--color-checks-donut-neutral, #bdc4cc)',
+    dropdownText: 'var(--color-checks-dropdown-text, #f0f3f6)',
+    dropdownBg: 'var(--color-checks-dropdown-bg, #272b33)',
+    dropdownBorder: 'var(--color-checks-dropdown-border, #7a828e)',
+    dropdownShadow: 'var(--color-checks-dropdown-shadow, rgba(1,4,9,0.3))',
+    dropdownHoverText: 'var(--color-checks-dropdown-hover-text, #f0f3f6)',
+    dropdownHoverBg: 'var(--color-checks-dropdown-hover-bg, rgba(158,167,179,0.1))',
+    dropdownBtnHoverText: 'var(--color-checks-dropdown-btn-hover-text, #f0f3f6)',
+    dropdownBtnHoverBg: 'var(--color-checks-dropdown-btn-hover-bg, rgba(158,167,179,0.1))',
+    scrollbarThumbBg: 'var(--color-checks-scrollbar-thumb-bg, rgba(158,167,179,0.4))',
+    headerLabelText: 'var(--color-checks-header-label-text, #f0f3f6)',
+    headerLabelOpenText: 'var(--color-checks-header-label-open-text, #f0f3f6)',
+    headerBorder: 'var(--color-checks-header-border, #7a828e)',
+    headerIcon: 'var(--color-checks-header-icon, #f0f3f6)',
+    lineText: 'var(--color-checks-line-text, #f0f3f6)',
+    lineNumText: 'var(--color-checks-line-num-text, #9ea7b3)',
+    lineTimestampText: 'var(--color-checks-line-timestamp-text, #9ea7b3)',
+    lineHoverBg: 'var(--color-checks-line-hover-bg, rgba(158,167,179,0.1))',
+    lineSelectedBg: 'var(--color-checks-line-selected-bg, rgba(64,158,255,0.1))',
+    lineSelectedNumText: 'var(--color-checks-line-selected-num-text, #71b7ff)',
+    lineDtFmText: 'var(--color-checks-line-dt-fm-text, #0a0c10)',
+    lineDtFmBg: 'var(--color-checks-line-dt-fm-bg, #e09b13)',
+    gateBg: 'var(--color-checks-gate-bg, rgba(224,155,19,0.15))',
+    gateText: 'var(--color-checks-gate-text, #f0f3f6)',
+    gateWaitingText: 'var(--color-checks-gate-waiting-text, #f0b72f)',
+    stepHeaderOpenBg: 'var(--color-checks-step-header-open-bg, #272b33)',
+    stepErrorText: 'var(--color-checks-step-error-text, #ff6a69)',
+    stepWarningText: 'var(--color-checks-step-warning-text, #f0b72f)',
+    loglineText: 'var(--color-checks-logline-text, #f0f3f6)',
+    loglineNumText: 'var(--color-checks-logline-num-text, #9ea7b3)',
+    loglineDebugText: 'var(--color-checks-logline-debug-text, #b780ff)',
+    loglineErrorText: 'var(--color-checks-logline-error-text, #f0f3f6)',
+    loglineErrorNumText: 'var(--color-checks-logline-error-num-text, #9ea7b3)',
+    loglineErrorBg: 'var(--color-checks-logline-error-bg, rgba(255,106,105,0.1))',
+    loglineWarningText: 'var(--color-checks-logline-warning-text, #f0f3f6)',
+    loglineWarningNumText: 'var(--color-checks-logline-warning-num-text, #f0b72f)',
+    loglineWarningBg: 'var(--color-checks-logline-warning-bg, rgba(224,155,19,0.15))',
+    loglineCommandText: 'var(--color-checks-logline-command-text, #71b7ff)',
+    loglineSectionText: 'var(--color-checks-logline-section-text, #26cd4d)',
     ansi: {
-      black: '#0a0c10',
-      blackBright: '#272b33',
-      white: '#d9dee3',
-      whiteBright: '#d9dee3',
-      gray: '#9ea7b3',
-      red: '#ff9492',
-      redBright: '#ffb1af',
-      green: '#26cd4d',
-      greenBright: '#4ae168',
-      yellow: '#f0b72f',
-      yellowBright: '#f7c843',
-      blue: '#71b7ff',
-      blueBright: '#91cbff',
-      magenta: '#cb9eff',
-      magentaBright: '#dbb7ff',
-      cyan: '#76e3ea',
-      cyanBright: '#b3f0ff',
+      black: 'var(--color-checks-ansi-black, #0a0c10)',
+      blackBright: 'var(--color-checks-ansi-black-bright, #272b33)',
+      white: 'var(--color-checks-ansi-white, #d9dee3))',
+      whiteBright: 'var(--color-checks-ansi-white-bright, #d9dee3)',
+      gray: 'var(--color-checks-ansi-gray, #9ea7b3)',
+      red: 'var(--color-checks-ansi-red, #ff9492)',
+      redBright: 'var(--color-checks-ansi-red-bright, #ffb1af)',
+      green: 'var(--color-checks-ansi-green, #26cd4d)',
+      greenBright: 'var(--color-checks-ansi-green-bright, #4ae168)',
+      yellow: 'var(--color-checks-ansi-yellow, #f0b72f)',
+      yellowBright: 'var(--color-checks-ansi-yellow-bright, #f7c843)',
+      blue: 'var(--color-checks-ansi-blue, #71b7ff)',
+      blueBright: 'var(--color-checks-ansi-blue-bright, #91cbff)',
+      magenta: 'var(--color-checks-ansi-magenta, #cb9eff)',
+      magentaBright: 'var(--color-checks-ansi-magenta-bright, #dbb7ff)',
+      cyan: 'var(--color-checks-ansi-cyan, #76e3ea)',
+      cyanBright: 'var(--color-checks-ansi-cyan-bright, #b3f0ff)',
     },
   },
   project: {
-    headerBg: '#0a0c10',
-    sidebarBg: '#272b33',
-    gradientIn: '#272b33',
-    gradientOut: 'rgba(39,43,51,0)',
+    headerBg: 'var(--color-project-header-bg, #0a0c10)',
+    sidebarBg: 'var(--color-project-sidebar-bg, #272b33)',
+    gradientIn: 'var(--color-project-gradient-in, #272b33)',
+    gradientOut: 'var(--color-project-gradient-out, rgba(39,43,51,0))',
   },
   mktg: {
     btn: {
-      bg: '#f6f8fa',
+      bg: 'var(--color-mktg-btn-bg, #f6f8fa))',
       shadow: {
-        outline: 'rgb(255 255 255 / 25%) 0 0 0 1px inset',
-        focus: 'rgb(255 255 255 / 25%) 0 0 0 4px',
+        outline: 'var(--color-mktg-btn-shadow-outline, rgb(255 255 255 / 25%) 0 0 0 1px inset))',
+        focus: 'var(--color-mktg-btn-shadow-focus, rgb(255 255 255 / 25%) 0 0 0 4px))',
         hover:
-          '0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07)',
-        hoverMuted: 'rgb(255 255 255) 0 0 0 2px inset',
+          'var(--color-mktg-btn-shadow-hover, 0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07)))',
+        hoverMuted: 'var(--color-mktg-btn-shadow-hover-muted, rgb(255 255 255) 0 0 0 2px inset))',
       },
     },
   },
@@ -194,90 +197,92 @@ const colors = {
     },
   },
   avatar: {
-    bg: 'rgba(255,255,255,0.1)',
+    bg: 'var(--avatar-bgColor, var(--color-avatar-bg, rgba(255,255,255,0.1)))',
     border: 'rgba(255,255,255,0.9)',
-    stackFade: '#525964',
-    stackFadeMore: '#272b33',
-    childShadow: '0 0 0 2px #0a0c10',
+    stackFade: 'var(--avatarStack-fade-bgColor-default, var(--color-avatar-stack-fade, #525964))',
+    stackFadeMore: 'var(--avatarStack-fade-bgColor-muted, var(--color-avatar-stack-fade-more, #272b33))',
+    childShadow: 'var(--avatar-shadow, var(--color-avatar-child-shadow, 0 0 0 2px #0a0c10))',
   },
   topicTag: {
     border: '#409eff',
   },
   counter: {
-    border: 'rgba(0,0,0,0)',
+    border: 'var(--counter-borderColor, var(--color-counter-border, transparent))',
   },
   selectMenu: {
-    backdropBorder: '#7a828e',
-    tapHighlight: 'rgba(82,89,100,0.5)',
-    tapFocusBg: '#1e60d5',
+    backdropBorder: 'var(--selectMenu-borderColor, var(--color-select-menu-backdrop-border, #7a828e))',
+    tapHighlight: 'var(--control-bgColor-active, var(--color-select-menu-tap-highlight, rgba(82,89,100,0.5)))',
+    tapFocusBg: 'var(--selectMenu-bgColor-active, var(--color-select-menu-tap-focus-bg, #1e60d5))',
   },
   overlay: {
-    shadow: '0 0 0 1px #525964, 0 16px 32px rgba(1,4,9,0.85)',
-    backdrop: 'rgba(39,43,51,0.4)',
+    shadow:
+      'var(--shadow-floating-small, var(--color-overlay-shadow, 0 0 0 1px #525964, 0 16px 32px rgba(1,4,9,0.85)))',
+    backdrop: 'var(--overlay-backdrop-bgColor, var(--color-overlay-backdrop, rgba(39,43,51,0.4)))',
   },
   header: {
-    text: 'rgba(255,255,255,0.7)',
-    bg: '#272b33',
-    divider: '#bdc4cc',
-    logo: '#ffffff',
+    text: 'var(--header-fgColor-default, var(--color-header-text, rgba(255,255,255,0.7)))',
+    bg: 'var(--header-bgColor, var(--color-header-bg, #272b33))',
+    divider: 'var(--header-borderColor-divider, var(--color-header-divider, #bdc4cc))',
+    logo: 'var(--header-fgColor-logo, var(--color-header-logo, #ffffff))',
   },
   headerSearch: {
-    bg: '#0a0c10',
-    border: '#525964',
+    bg: 'var(--headerSearch-bgColor, var(--color-header-search-bg, #0a0c10))',
+    border: 'var(--headerSearch-borderColor, var(--color-header-search-border, #525964))',
   },
   sidenav: {
-    selectedBg: '#272b33',
+    selectedBg: 'var(--sideNav-bgColor-selected, var(--color-sidenav-selected-bg, #272b33))',
   },
   menu: {
-    bgActive: '#272b33',
+    bgActive: 'var(--menu-bgColor-active, var(--color-menu-bg-active, #272b33))',
   },
   input: {
-    disabledBg: 'rgba(158,167,179,0)',
+    disabledBg: 'var(--control-bgColor-disabled, var(--color-input-disabled-bg, rgba(158,167,179,0)))',
   },
   timeline: {
-    badgeBg: '#272b33',
+    badgeBg: 'var(--timelineBadge-bgColor, var(--color-timeline-badge-bg, #272b33))',
   },
   ansi: {
-    black: '#7a828e',
-    blackBright: '#9ea7b3',
-    white: '#d9dee3',
-    whiteBright: '#ffffff',
-    gray: '#9ea7b3',
-    red: '#ff9492',
-    redBright: '#ffb1af',
-    green: '#26cd4d',
-    greenBright: '#4ae168',
-    yellow: '#f0b72f',
-    yellowBright: '#f7c843',
-    blue: '#71b7ff',
-    blueBright: '#91cbff',
-    magenta: '#cb9eff',
-    magentaBright: '#dbb7ff',
-    cyan: '#39c5cf',
-    cyanBright: '#56d4dd',
+    black: 'var(--color-ansi-black, #7a828e)',
+    blackBright: 'var(--color-ansi-black-bright, #9ea7b3)',
+    white: 'var(--color-ansi-white, #d9dee3)',
+    whiteBright: 'var(--color-ansi-white-bright, #ffffff)',
+    gray: 'var(--color-ansi-gray, #9ea7b3)',
+    red: 'var(--color-ansi-red, #ff9492)',
+    redBright: 'var(--color-ansi-red-bright, #ffb1af)',
+    green: 'var(--color-ansi-green, #26cd4d)',
+    greenBright: 'var(--color-ansi-green-bright, #4ae168)',
+    yellow: 'var(--color-ansi-yellow, #f0b72f)',
+    yellowBright: 'var(--color-ansi-yellow-bright, #f7c843)',
+    blue: 'var(--color-ansi-blue, #71b7ff)',
+    blueBright: 'var(--color-ansi-blue-bright, #91cbff)',
+    magenta: 'var(--color-ansi-magenta, #cb9eff)',
+    magentaBright: 'var(--color-ansi-magenta-bright, #dbb7ff)',
+    cyan: 'var(--color-ansi-cyan, #39c5cf)',
+    cyanBright: 'var(--color-ansi-cyan-bright, #56d4dd)',
   },
   btn: {
-    text: '#f0f3f6',
-    bg: '#272b33',
-    border: '#7a828e',
-    shadow: '0 0 transparent',
-    insetShadow: '0 0 transparent',
-    hoverBg: '#525964',
-    hoverBorder: '#bdc4cc',
-    activeBg: 'hsla(217,10%,33%,1)',
-    activeBorder: '#9ea7b3',
+    text: 'var(--button-default-fgColor-rest, var(--color-btn-text, #f0f3f6))',
+    bg: 'var(--button-default-bgColor-rest, var(--color-btn-bg, #272b33))',
+    border: 'var(--button-default-borderColor-rest, var(--color-btn-border, #7a828e))',
+    shadow: 'var(--button-default-shadow-resting, var(--color-btn-shadow, 0 0 transparent))',
+    insetShadow: 'var(--button-default-shadow-inset, var(--color-btn-inset-shadow, 0 0 transparent))',
+    hoverBg: 'var(--button-default-bgColor-hover, var(--color-btn-hover-bg, #525964))',
+    hoverBorder: 'var(--button-default-borderColor-hover, var(--color-btn-hover-border, #bdc4cc))',
+    activeBg: 'var(--button-default-bgColor-active, var(--color-btn-active-bg, hsla(217,10%,33%,1)))',
+    activeBorder: 'var(--button-default-borderColor-active, var(--color-btn-active-border, #9ea7b3))',
     selectedBg: 'rgba(82,89,100,0.9)',
-    counterBg: '#525964',
+    counterBg: 'var(--buttonCounter-default-bgColor-rest, var(--color-btn-counter-bg, #525964))',
     primary: {
       text: '#0a0c10',
-      bg: '#09b43a',
+      bg: 'var(--button-primary-bgColor-rest, var(--color-btn-primary-bg, #09b43a))',
       border: '#4ae168',
-      shadow: '0 0 transparent',
-      insetShadow: '0 0 transparent',
+      shadow: 'var(--shadow-resting-small, var(--color-btn-primary-shadow, 0 0 transparent))',
+      insetShadow: 'var(--shadow-highlight, var(--color-btn-primary-inset-shadow, 0 0 transparent))',
       hoverBg: '#26cd4d',
       hoverBorder: '#4ae168',
-      selectedBg: '#09b43a',
-      selectedShadow: '0 0 transparent',
+      selectedBg: 'var(--button-primary-bgColor-active, var(--color-btn-primary-selected-bg, #09b43a))',
+      selectedShadow:
+        'var(--button-primary-shadow-selected, var(--color-btn-primary-selected-shadow, 0 0 transparent))',
       disabledText: 'rgba(10,12,16,0.5)',
       disabledBg: 'rgba(9,180,58,0.6)',
       disabledBorder: 'rgba(74,225,104,0.4)',
@@ -285,50 +290,60 @@ const colors = {
       counterBg: 'rgba(1,4,9,0.15)',
     },
     outline: {
-      text: '#409eff',
-      hoverText: '#71b7ff',
-      hoverBg: '#525964',
-      hoverBorder: '#7a828e',
-      hoverShadow: '0 1px 0 rgba(1,4,9,0.1)',
-      hoverInsetShadow: 'inset 0 1px 0 rgba(255,255,255,0.03)',
-      hoverCounterBg: 'rgba(25,79,177,0.2)',
-      selectedText: '#ffffff',
-      selectedBg: '#2672f3',
-      selectedBorder: '#7a828e',
-      selectedShadow: '0 0 transparent',
-      disabledText: 'rgba(113,183,255,0.5)',
-      disabledBg: '#0a0c10',
-      disabledCounterBg: 'rgba(64,158,255,0.05)',
-      counterBg: 'rgba(25,79,177,0.2)',
-      hoverCounterFg: '#71b7ff',
-      disabledCounterFg: 'rgba(113,183,255,0.5)',
-      counterFg: '#409eff',
+      text: 'var(--button-outline-fgColor-rest, var(--color-btn-outline-text, #409eff))',
+      hoverText: 'var(--button-outline-fgColor-hover, var(--color-btn-outline-hover-text, #71b7ff))',
+      hoverBg: 'var(--button-outline-bgColor-hover, var(--color-btn-outline-hover-bg, #525964))',
+      hoverBorder: 'var(--button-outline-borderColor-hover, var(--color-btn-outline-hover-border, #7a828e))',
+      hoverShadow:
+        'var(--shadow-resting-small, var(--color-btn-outline-hover-shadow, 0 1px 0 rgba(1,4,9,0.1)))// HI_KATIE: no matches',
+      hoverInsetShadow:
+        'var(--shadow-highlight, var(--color-btn-outline-hover-inset-shadow, inset 0 1px 0 rgba(255,255,255,0.03)))// HI_KATIE: no matches',
+      hoverCounterBg:
+        'var(--buttonCounter-outline-bgColor-hover, var(--color-btn-outline-hover-counter-bg, rgba(25,79,177,0.2)))',
+      selectedText: 'var(--button-outline-fgColor-active, var(--color-btn-outline-selected-text, #ffffff))',
+      selectedBg: 'var(--button-outline-bgColor-active, var(--color-btn-outline-selected-bg, #2672f3))',
+      selectedBorder: 'var(--button-outline-borderColor-active, var(--color-btn-outline-selected-border, #7a828e))',
+      selectedShadow:
+        'var(--button-outline-shadow-selected, var(--color-btn-outline-selected-shadow, 0 0 transparent))',
+      disabledText:
+        'var(--button-outline-fgColor-disabled, var(--color-btn-outline-disabled-text, rgba(113,183,255,0.5)))',
+      disabledBg: 'var(--button-outline-bgColor-disabled, var(--color-btn-outline-disabled-bg, #0a0c10))',
+      disabledCounterBg:
+        'var(--buttonCounter-outline-bgColor-disabled, var(--color-btn-outline-disabled-counter-bg, rgba(64,158,255,0.05)))',
+      counterBg: 'var(--buttonCounter-outline-bgColor-rest, var(--color-btn-outline-counter-bg, rgba(25,79,177,0.2)))',
+      hoverCounterFg: 'var(--buttonCounter-outline-fgColor-hover, var(--color-btn-outline-hover-counter-fg, #71b7ff))',
+      disabledCounterFg:
+        'var(--buttonCounter-outline-fgColor-disabled, var(--color-btn-outline-disabled-counter-fg, rgba(113,183,255,0.5)))',
+      counterFg: 'var(--buttonCounter-outline-fgColor-rest, var(--color-btn-outline-counter-fg, #409eff))',
     },
     danger: {
-      text: '#ff6a69',
-      hoverText: '#0a0c10',
-      hoverBg: '#ff6a69',
-      hoverBorder: '#ff6a69',
-      hoverShadow: '0 0 transparent',
-      hoverInsetShadow: '0 0 transparent',
-      hoverIcon: '#0a0c10',
+      text: 'var(--button-danger-fgColor-rest, var(--color-btn-danger-text, #ff6a69))',
+      hoverText: 'var(--button-danger-fgColor-hover, var(--color-btn-danger-hover-text, #0a0c10))',
+      hoverBg: 'var(--button-danger-bgColor-hover, var(--color-btn-danger-hover-bg, #ff6a69))',
+      hoverBorder: 'var(--button-danger-borderColor-hover, var(--color-btn-danger-hover-border, #ff6a69))',
+      hoverShadow: 'var(--shadow-resting-small, var(--color-btn-danger-hover-shadow, 0 0 transparent))',
+      hoverInsetShadow: 'var(--shadow-highlight, var(--color-btn-danger-hover-inset-shadow, 0 0 transparent))',
+      hoverIcon: 'var(--button-danger-iconColor-hover, var(--color-btn-danger-hover-icon, #0a0c10))',
       hoverCounterBg: 'rgba(1,4,9,0.15)',
-      selectedText: '#ffffff',
-      selectedBg: '#ff4445',
-      selectedBorder: '#ff9492',
-      selectedShadow: '0 0 transparent',
-      disabledText: 'rgba(255,106,105,0.5)',
-      disabledBg: '#0a0c10',
-      disabledCounterBg: 'rgba(255,106,105,0.05)',
+      selectedText: 'var(--button-danger-fgColor-active, var(--color-btn-danger-selected-text, #ffffff))',
+      selectedBg: 'var(--button-danger-bgColor-active, var(--color-btn-danger-selected-bg, #ff4445))',
+      selectedBorder: 'var(--button-danger-borderColor-active, var(--color-btn-danger-selected-border, #ff9492))',
+      selectedShadow: 'var(--button-danger-shadow-selected, var(--color-btn-danger-selected-shadow, 0 0 transparent))',
+      disabledText:
+        'var(--button-danger-fgColor-disabled, var(--color-btn-danger-disabled-text, rgba(255,106,105,0.5)))',
+      disabledBg: 'var(--button-danger-bgColor-disabled, var(--color-btn-danger-disabled-bg, #0a0c10))',
+      disabledCounterBg:
+        'var(--buttonCounter-danger-bgColor-disabled, var(--color-btn-danger-disabled-counter-bg, rgba(255,106,105,0.05)))',
       counterBg: 'rgba(1,4,9,0.15)',
-      icon: '#ff6a69',
-      counterFg: '#ff6a69',
-      disabledCounterFg: 'rgba(255,106,105,0.5)',
-      hoverCounterFg: '#ffffff',
+      icon: 'var(--button-danger-iconColor-rest, var(--color-btn-danger-icon, #ff6a69))',
+      counterFg: 'var(--buttonCounter-danger-fgColor-rest, var(--color-btn-danger-counter-fg, #ff6a69))',
+      disabledCounterFg:
+        'var(--buttonCounter-danger-fgColor-disabled, var(--color-btn-danger-disabled-counter-fg, rgba(255,106,105,0.5)))',
+      hoverCounterFg: 'var(--buttonCounter-danger-fgColor-hover, var(--color-btn-danger-hover-counter-fg, #ffffff))',
     },
     inactive: {
-      bg: '#272b33',
-      text: '#bdc4cc',
+      bg: 'var(--button-inactive-bgColor-rest, var(--color-btn-inactive-bg, #272b33))',
+      text: 'var(--button-inactive-fgColor-rest, var(--color-btn-inactive-text, #bdc4cc))',
     },
   },
   underlinenav: {
@@ -354,41 +369,42 @@ const colors = {
     bg: '#9ea7b3',
     hoverBg: 'hsla(214,12%,61%,1)',
     activeBg: 'hsla(214,12%,58%,1)',
-    disabledBg: '#272b33',
+    disabledBg: 'var(--controlTrack-bgColor-disabled, var(--color-switch-track-disabled-bg, #272b33))',
     fg: '#0a0c10',
-    disabledFg: '#010409',
-    border: 'rgba(0,0,0,0)',
+    disabledFg: 'var(--controlTrack-fgColor-disabled, var(--color-switch-track-disabled-fg, #010409))',
+    border: 'var(--controlTrack-borderColor-rest, var(--color-switch-track-border, transparent))',
     checked: {
       bg: '#409eff',
-      hoverBg: 'rgba(64,158,255,0.5)',
-      activeBg: 'rgba(64,158,255,0.65)',
-      fg: '#0a0c10',
-      disabledFg: '#010409',
-      border: 'rgba(0,0,0,0)',
+      hoverBg: 'var(--control-checked-bgColor-hover, var(--color-switch-track-checked-hover-bg, rgba(64,158,255,0.5)))',
+      activeBg:
+        'var(--control-checked-bgColor-active, var(--color-switch-track-checked-active-bg, rgba(64,158,255,0.65)))',
+      fg: 'var(--control-checked-fgColor-rest, var(--color-switch-track-checked-fg, #0a0c10))',
+      disabledFg: 'var(--control-checked-fgColor-disabled, var(--color-switch-track-checked-disabled-fg, #010409))',
+      border: 'var(--borderColor-transparent, var(--color-switch-track-checked-border, transparent))',
     },
   },
   switchKnob: {
-    bg: '#0a0c10',
+    bg: 'var(--controlKnob-bgColor-rest, var(--color-switch-knob-bg, #0a0c10))',
     border: '#9ea7b3',
-    disabledBg: '#272b33',
+    disabledBg: 'var(--controlKnob-bgColor-disabled, var(--color-switch-knob-disabled-bg, #272b33))',
     checked: {
-      bg: '#0a0c10',
-      disabledBg: '#272b33',
+      bg: 'var(--controlKnob-bgColor-checked, var(--color-switch-knob-checked-bg, #0a0c10))',
+      disabledBg: 'var(--controlKnob-bgColor-disabled, var(--color-switch-knob-checked-disabled-bg, #272b33))',
       border: '#409eff',
     },
   },
   segmentedControl: {
-    bg: 'rgba(158,167,179,0.1)',
+    bg: 'var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg, rgba(158,167,179,0.1)))',
     button: {
-      bg: '#0a0c10',
+      bg: 'var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg, #0a0c10))',
       hover: {
-        bg: '#525964',
+        bg: 'var(--controlTrack-bgColor-hover, var(--color-segmented-control-button-hover-bg, #525964))',
       },
       active: {
-        bg: '#272b33',
+        bg: 'var(--controlTrack-bgColor-active, var(--color-segmented-control-button-active-bg, #272b33))',
       },
       selected: {
-        border: '#9ea7b3',
+        border: 'var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-selected-border, #9ea7b3))',
       },
     },
   },
@@ -397,20 +413,20 @@ const colors = {
       hoverBg: '#525964',
     },
     directory: {
-      fill: '#f0f3f6',
+      fill: 'var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-directory-fill, #f0f3f6))',
     },
   },
   fg: {
     default: '#f0f3f6',
     muted: '#f0f3f6',
-    subtle: '#9ea7b3',
+    subtle: 'var(--fgColor-muted, var(--color-fg-subtle, #9ea7b3))',
     onEmphasis: '#0a0c10',
   },
   canvas: {
-    default: '#0a0c10',
-    overlay: '#272b33',
-    inset: '#010409',
-    subtle: '#272b33',
+    default: 'var(--bgColor-default, var(--color-canvas-default, #0a0c10))',
+    overlay: 'var(--overlay-bgColor, var(--color-canvas-overlay, #272b33))',
+    inset: 'var(--bgColor-inset, var(--color-canvas-inset, #010409))',
+    subtle: 'var(--bgColor-muted, var(--color-canvas-subtle, #272b33))',
   },
   border: {
     default: '#7a828e',
@@ -418,86 +434,86 @@ const colors = {
     subtle: '#7a828e',
   },
   shadow: {
-    small: '0 0 transparent',
-    medium: '0 3px 6px #010409',
-    large: '0 8px 24px #010409',
-    extraLarge: '0 12px 48px #010409',
+    small: 'var(--shadow-resting-small, var(--color-shadow-small, 0 0 transparent))',
+    medium: 'var(--shadow-resting-medium, var(--color-shadow-medium, 0 3px 6px #010409))',
+    large: 'var(--shadow-floating-large, var(--color-shadow-large, 0 8px 24px #010409))',
+    extraLarge: 'var(--shadow-floating-xlarge, var(--color-shadow-extra-large, 0 12px 48px #010409))',
   },
   neutral: {
     emphasisPlus: '#ffffff',
     emphasis: '#9ea7b3',
-    muted: 'rgba(158,167,179,0.4)',
-    subtle: 'rgba(158,167,179,0.1)',
+    muted: 'var(--borderColor-neutral-muted, var(--color-neutral-muted, rgba(158,167,179,0.4)))',
+    subtle: 'var(--bgColor-neutral-muted, var(--color-neutral-subtle, rgba(158,167,179,0.1)))',
   },
   accent: {
     fg: '#71b7ff',
-    emphasis: '#409eff',
+    emphasis: 'var(--bgColor-accent-emphasis, var(--color-accent-emphasis, #409eff))',
     muted: '#409eff',
-    subtle: 'rgba(64,158,255,0.1)',
+    subtle: 'var(--bgColor-accent-muted, var(--color-accent-subtle, rgba(64,158,255,0.1)))',
   },
   success: {
-    fg: '#26cd4d',
-    emphasis: '#09b43a',
+    fg: 'var(--fgColor-success, var(--color-success-fg, #26cd4d))',
+    emphasis: 'var(--bgColor-success-emphasis, var(--color-success-emphasis, #09b43a))',
     muted: '#09b43a',
-    subtle: 'rgba(9,180,58,0.15)',
+    subtle: 'var(--bgColor-success-muted, var(--color-success-subtle, rgba(9,180,58,0.15)))',
   },
   attention: {
-    fg: '#f0b72f',
-    emphasis: '#e09b13',
+    fg: 'var(--fgColor-attention, var(--color-attention-fg, #f0b72f))',
+    emphasis: 'var(--bgColor-attention-emphasis, var(--color-attention-emphasis, #e09b13))',
     muted: '#e09b13',
-    subtle: 'rgba(224,155,19,0.15)',
+    subtle: 'var(--bgColor-attention-muted, var(--color-attention-subtle, rgba(224,155,19,0.15)))',
   },
   severe: {
-    fg: '#e7811d',
-    emphasis: '#e7811d',
+    fg: 'var(--fgColor-severe, var(--color-severe-fg, #e7811d))',
+    emphasis: 'var(--bgColor-severe-emphasis, var(--color-severe-emphasis, #e7811d))',
     muted: '#e7811d',
-    subtle: 'rgba(231,129,29,0.1)',
+    subtle: 'var(--bgColor-severe-muted, var(--color-severe-subtle, rgba(231,129,29,0.1)))',
   },
   danger: {
-    fg: '#ff6a69',
-    emphasis: '#ff6a69',
+    fg: 'var(--fgColor-danger, var(--color-danger-fg, #ff6a69))',
+    emphasis: 'var(--borderColor-danger-emphasis, var(--color-danger-emphasis, #ff6a69))',
     muted: '#ff6a69',
-    subtle: 'rgba(255,106,105,0.1)',
+    subtle: 'var(--bgColor-danger-muted, var(--color-danger-subtle, rgba(255,106,105,0.1)))',
   },
   open: {
-    fg: '#26cd4d',
-    emphasis: '#09b43a',
-    muted: 'rgba(9,180,58,0.4)',
-    subtle: 'rgba(9,180,58,0.15)',
+    fg: 'var(--fgColor-open, var(--color-open-fg, #26cd4d))',
+    emphasis: 'var(--bgColor-open-emphasis, var(--color-open-emphasis, #09b43a))',
+    muted: 'var(--borderColor-open-muted, var(--color-open-muted, rgba(9,180,58,0.4)))',
+    subtle: 'var(--bgColor-open-muted, var(--color-open-subtle, rgba(9,180,58,0.15)))',
   },
   closed: {
-    fg: '#ff6a69',
-    emphasis: '#ff6a69',
-    muted: 'rgba(255,106,105,0.4)',
-    subtle: 'rgba(255,106,105,0.15)',
+    fg: 'var(--fgColor-closed, var(--color-closed-fg, #ff6a69))',
+    emphasis: 'var(--bgColor-closed-emphasis, var(--color-closed-emphasis, #ff6a69))',
+    muted: 'var(--borderColor-closed-muted, var(--color-closed-muted, rgba(255,106,105,0.4)))',
+    subtle: 'var(--bgColor-closed-muted, var(--color-closed-subtle, rgba(255,106,105,0.15)))',
   },
   done: {
-    fg: '#b780ff',
-    emphasis: '#b87fff',
+    fg: 'var(--fgColor-done, var(--color-done-fg, #b780ff))',
+    emphasis: 'var(--bgColor-done-emphasis, var(--color-done-emphasis, #b87fff))',
     muted: '#b780ff',
-    subtle: 'rgba(183,128,255,0.1)',
+    subtle: 'var(--bgColor-done-muted, var(--color-done-subtle, rgba(183,128,255,0.1)))',
   },
   sponsors: {
-    fg: '#ef6eb1',
-    emphasis: '#ef6eb1',
+    fg: 'var(--fgColor-sponsors, var(--color-sponsors-fg, #ef6eb1))',
+    emphasis: 'var(--bgColor-sponsors-emphasis, var(--color-sponsors-emphasis, #ef6eb1))',
     muted: '#ef6eb1',
-    subtle: 'rgba(239,110,177,0.1)',
+    subtle: 'var(--bgColor-sponsors-muted, var(--color-sponsors-subtle, rgba(239,110,177,0.1)))',
   },
   primer: {
     fg: {
-      disabled: '#7a828e',
+      disabled: 'var(--fgColor-disabled, var(--color-primer-fg-disabled, #7a828e))',
     },
     canvas: {
-      backdrop: 'rgba(1,4,9,0.8)',
-      sticky: 'rgba(10,12,16,0.95)',
+      backdrop: 'var(--overlay-backdrop-bgColor, var(--color-primer-canvas-backdrop, rgba(1,4,9,0.8)))',
+      sticky: 'var(--color-primer-canvas-sticky, rgba(10,12,16,0.95))',
     },
     border: {
-      active: '#ff967d',
-      contrast: 'rgba(255,255,255,0.2)',
+      active: 'var(--underlineNav-borderColor-active, var(--color-primer-border-active, #ff967d))',
+      contrast: 'var(--borderColor-muted, var(--color-primer-border-contrast, rgba(255,255,255,0.2)))',
     },
     shadow: {
-      highlight: '0 0 transparent',
-      inset: '0 0 transparent',
+      highlight: 'var(--shadow-highlight, var(--color-primer-shadow-highlight, 0 0 transparent))',
+      inset: 'var(--shadow-inset, var(--color-primer-shadow-inset, 0 0 transparent))',
     },
   },
   scale: {
diff --git a/src/legacy-theme/ts/colors/dark_tritanopia.ts b/src/legacy-theme/ts/colors/dark_tritanopia.ts
index c22badd770a..6d6eac50e8c 100644
--- a/src/legacy-theme/ts/colors/dark_tritanopia.ts
+++ b/src/legacy-theme/ts/colors/dark_tritanopia.ts
@@ -1,463 +1,492 @@
 const colors = {
-  canvasDefaultTransparent: 'rgba(13,17,23,0)',
-  pageHeaderBg: '#0d1117',
+  canvasDefaultTransparent: 'var(--bgColor-transparent, var(--color-canvas-default-transparent, rgba(13,17,23,0)))',
+  pageHeaderBg: 'var(--page-header-bgColor, var(--color-page-header-bg, #0d1117))',
   marketingIcon: {
-    primary: '#79c0ff',
-    secondary: '#1f6feb',
+    primary: 'var(--color-marketing-icon-primary, #79c0ff)',
+    secondary: 'var(--color-marketing-icon-secondary, #1f6feb)',
   },
   diffBlob: {
     addition: {
-      numText: '#c9d1d9',
-      fg: '#c9d1d9',
-      numBg: 'rgba(88,166,255,0.3)',
-      lineBg: 'rgba(56,139,253,0.15)',
-      wordBg: 'rgba(56,139,253,0.4)',
+      numText: 'var(--diffBlob-addition-fgColor-num, var(--color-diff-blob-addition-num-text, #c9d1d9))',
+      fg: 'var(--diffBlob-addition-fgColor-text, var(--color-diff-blob-addition-fg, #c9d1d9))',
+      numBg: 'var(--diffBlob-addition-bgColor-num, var(--color-diff-blob-addition-num-bg, rgba(88,166,255,0.3)))',
+      lineBg: 'var(--diffBlob-addition-bgColor-line, var(--color-diff-blob-addition-line-bg, rgba(56,139,253,0.15)))',
+      wordBg: 'var(--diffBlob-addition-bgColor-word, var(--color-diff-blob-addition-word-bg, rgba(56,139,253,0.4)))',
     },
     deletion: {
-      numText: '#c9d1d9',
-      fg: '#c9d1d9',
-      numBg: 'rgba(248,81,73,0.3)',
-      lineBg: 'rgba(248,81,73,0.1)',
-      wordBg: 'rgba(248,81,73,0.4)',
+      numText: 'var(--diffBlob-deletion-fgColor-num, var(--color-diff-blob-deletion-num-text, #c9d1d9))',
+      fg: 'var(--diffBlob-deletion-fgColor-text, var(--color-diff-blob-deletion-fg, #c9d1d9))',
+      numBg: 'var(--diffBlob-deletion-bgColor-num, var(--color-diff-blob-deletion-num-bg, rgba(248,81,73,0.3)))',
+      lineBg: 'var(--diffBlob-deletion-bgColor-line, var(--color-diff-blob-deletion-line-bg, rgba(248,81,73,0.1)))',
+      wordBg: 'var(--diffBlob-deletion-bgColor-word, var(--color-diff-blob-deletion-word-bg, rgba(248,81,73,0.4)))',
     },
     hunk: {
-      numBg: 'rgba(56,139,253,0.4)',
+      numBg: 'var(--diffBlob-hunk-bgColor-num, var(--color-diff-blob-hunk-num-bg, rgba(56,139,253,0.4)))',
     },
     expander: {
-      icon: '#8b949e',
+      icon: 'var(--diffBlob-expander-iconColor, var(--color-diff-blob-expander-icon, #8b949e))',
     },
-    selectedLineHighlightMixBlendMode: 'screen',
+    selectedLineHighlightMixBlendMode: 'var(--color-diff-blob-selected-line-highlight-mix-blend-mode, screen)',
   },
   diffstat: {
-    deletionBorder: 'rgba(240,246,252,0.1)',
-    additionBorder: 'rgba(240,246,252,0.1)',
-    additionBg: '#58a6ff',
+    deletionBorder: 'var(--color-diffstat-deletion-border, rgba(240,246,252,0.1))',
+    additionBorder: 'var(--color-diffstat-addition-border, rgba(240,246,252,0.1))',
+    additionBg: 'var(--diffStat-addition-bgColor, var(--color-diffstat-addition-bg, #58a6ff))',
   },
   searchKeyword: {
-    hl: 'rgba(210,153,34,0.4)',
+    hl: 'var(--highlight-neutral-bgColor, var(--color-search-keyword-hl, rgba(210,153,34,0.4)))',
   },
   prettylights: {
     syntax: {
-      comment: '#8b949e',
-      constant: '#79c0ff',
-      entity: '#d2a8ff',
-      storageModifierImport: '#c9d1d9',
-      entityTag: '#a5d6ff',
-      keyword: '#ff7b72',
-      string: '#a5d6ff',
-      variable: '#ffa198',
-      brackethighlighterUnmatched: '#f85149',
-      invalidIllegalText: '#f0f6fc',
-      invalidIllegalBg: '#8e1519',
-      carriageReturnText: '#f0f6fc',
-      carriageReturnBg: '#b62324',
-      stringRegexp: '#a5d6ff',
-      markupList: '#f2cc60',
-      markupHeading: '#1f6feb',
-      markupItalic: '#c9d1d9',
-      markupBold: '#c9d1d9',
-      markupDeletedText: '#ffdcd7',
-      markupDeletedBg: '#67060c',
-      markupInsertedText: '#cae8ff',
-      markupInsertedBg: '#0c2d6b',
-      markupChangedText: '#ffdcd7',
-      markupChangedBg: '#67060c',
-      markupIgnoredText: '#c9d1d9',
-      markupIgnoredBg: '#1158c7',
-      metaDiffRange: '#d2a8ff',
-      brackethighlighterAngle: '#8b949e',
-      sublimelinterGutterMark: '#484f58',
-      constantOtherReferenceLink: '#a5d6ff',
+      comment: 'var(--color-prettylights-syntax-comment, #8b949e)',
+      constant: 'var(--color-prettylights-syntax-constant, #79c0ff)',
+      entity: 'var(--color-prettylights-syntax-entity, #d2a8ff)',
+      storageModifierImport: 'var(--color-prettylights-syntax-storage-modifier-import, #c9d1d9)',
+      entityTag: 'var(--color-prettylights-syntax-entity-tag, #a5d6ff)',
+      keyword: 'var(--color-prettylights-syntax-keyword, #ff7b72)',
+      string: 'var(--color-prettylights-syntax-string, #a5d6ff)',
+      variable: 'var(--color-prettylights-syntax-variable, #ffa198)',
+      brackethighlighterUnmatched: 'var(--color-prettylights-syntax-brackethighlighter-unmatched, #f85149)',
+      invalidIllegalText: 'var(--color-prettylights-syntax-invalid-illegal-text, #f0f6fc)',
+      invalidIllegalBg: 'var(--color-prettylights-syntax-invalid-illegal-bg, #8e1519)',
+      carriageReturnText: 'var(--color-prettylights-syntax-carriage-return-text, #f0f6fc)',
+      carriageReturnBg: 'var(--color-prettylights-syntax-carriage-return-bg, #b62324)',
+      stringRegexp: 'var(--color-prettylights-syntax-string-regexp, #a5d6ff)',
+      markupList: 'var(--color-prettylights-syntax-markup-list, #f2cc60)',
+      markupHeading: 'var(--color-prettylights-syntax-markup-heading, #1f6feb)',
+      markupItalic: 'var(--color-prettylights-syntax-markup-italic, #c9d1d9)',
+      markupBold: 'var(--color-prettylights-syntax-markup-bold, #c9d1d9)',
+      markupDeletedText: 'var(--color-prettylights-syntax-markup-deleted-text, #ffdcd7)',
+      markupDeletedBg: 'var(--color-prettylights-syntax-markup-deleted-bg, #67060c)',
+      markupInsertedText: 'var(--color-prettylights-syntax-markup-inserted-text, #cae8ff)',
+      markupInsertedBg: 'var(--color-prettylights-syntax-markup-inserted-bg, #0c2d6b)',
+      markupChangedText: 'var(--color-prettylights-syntax-markup-changed-text, #ffdcd7)',
+      markupChangedBg: 'var(--color-prettylights-syntax-markup-changed-bg, #67060c)',
+      markupIgnoredText: 'var(--color-prettylights-syntax-markup-ignored-text, #c9d1d9)',
+      markupIgnoredBg: 'var(--color-prettylights-syntax-markup-ignored-bg, #1158c7)',
+      metaDiffRange: 'var(--color-prettylights-syntax-meta-diff-range, #d2a8ff)',
+      brackethighlighterAngle: 'var(--color-prettylights-syntax-brackethighlighter-angle, #8b949e)',
+      sublimelinterGutterMark: 'var(--color-prettylights-syntax-sublimelinter-gutter-mark, #484f58)',
+      constantOtherReferenceLink: 'var(--color-prettylights-syntax-constant-other-reference-link, #a5d6ff)',
     },
   },
   codemirror: {
-    text: '#c9d1d9',
-    bg: '#0d1117',
-    guttersBg: '#0d1117',
-    guttermarkerText: '#0d1117',
-    guttermarkerSubtleText: '#6e7681',
-    linenumberText: '#8b949e',
-    cursor: '#c9d1d9',
-    selectionBg: 'rgba(56,139,253,0.4)',
-    activelineBg: 'rgba(110,118,129,0.1)',
-    matchingbracketText: '#c9d1d9',
-    linesBg: '#0d1117',
+    text: 'var(--codeMirror-fgColor, var(--color-codemirror-text, #c9d1d9))',
+    bg: 'var(--codeMirror-bgColor, var(--color-codemirror-bg, #0d1117))',
+    guttersBg: 'var(--codeMirror-gutters-bgColor, var(--color-codemirror-gutters-bg, #0d1117))',
+    guttermarkerText:
+      'var(--codeMirror-gutterMarker-fgColor-default, var(--color-codemirror-guttermarker-text, #0d1117))',
+    guttermarkerSubtleText:
+      'var(--codeMirror-gutterMarker-fgColor-muted, var(--color-codemirror-guttermarker-subtle-text, #6e7681))',
+    linenumberText: 'var(--codeMirror-lineNumber-fgColor, var(--color-codemirror-linenumber-text, #8b949e))',
+    cursor: 'var(--codeMirror-cursor-fgColor, var(--color-codemirror-cursor, #c9d1d9))',
+    selectionBg: 'var(--codeMirror-selection-bgColor, var(--color-codemirror-selection-bg, rgba(56,139,253,0.4)))',
+    activelineBg: 'var(--codeMirror-activeline-bgColor, var(--color-codemirror-activeline-bg, rgba(110,118,129,0.1)))',
+    matchingbracketText:
+      'var(--codeMirror-matchingBracket-fgColor, var(--color-codemirror-matchingbracket-text, #c9d1d9))',
+    linesBg: 'var(--codeMirror-lines-bgColor, var(--color-codemirror-lines-bg, #0d1117))',
     syntax: {
-      comment: '#8b949e',
-      constant: '#79c0ff',
-      entity: '#d2a8ff',
-      keyword: '#ff7b72',
-      storage: '#ff7b72',
-      string: '#a5d6ff',
-      support: '#79c0ff',
-      variable: '#ffa198',
+      comment: 'var(--codeMirror-syntax-fgColor-comment, var(--color-codemirror-syntax-comment, #8b949e))',
+      constant: 'var(--codeMirror-syntax-fgColor-constant, var(--color-codemirror-syntax-constant, #79c0ff))',
+      entity: 'var(--codeMirror-syntax-fgColor-entity, var(--color-codemirror-syntax-entity, #d2a8ff))',
+      keyword: 'var(--codeMirror-syntax-fgColor-keyword, var(--color-codemirror-syntax-keyword, #ff7b72))',
+      storage: 'var(--codeMirror-syntax-fgColor-storage, var(--color-codemirror-syntax-storage, #ff7b72))',
+      string: 'var(--codeMirror-syntax-fgColor-string, var(--color-codemirror-syntax-string, #a5d6ff))',
+      support: 'var(--codeMirror-syntax-fgColor-support, var(--color-codemirror-syntax-support, #79c0ff))',
+      variable: 'var(--codeMirror-syntax-fgColor-variable, var(--color-codemirror-syntax-variable, #ffa198))',
     },
   },
   checks: {
-    bg: '#010409',
-    runBorderWidth: '1px',
-    containerBorderWidth: '1px',
-    textPrimary: '#c9d1d9',
-    textSecondary: '#8b949e',
-    textLink: '#58a6ff',
-    btnIcon: '#8b949e',
-    btnHoverIcon: '#c9d1d9',
-    btnHoverBg: 'rgba(110,118,129,0.1)',
-    inputText: '#8b949e',
-    inputPlaceholderText: '#6e7681',
-    inputFocusText: '#c9d1d9',
-    inputBg: '#161b22',
-    inputShadow: '0 0 0 1px (obj) => (0, get_1.default)(obj, path)',
-    donutError: '#f85149',
-    donutPending: '#d29922',
-    donutSuccess: '#388bfd',
-    donutNeutral: '#8b949e',
-    dropdownText: '#c9d1d9',
-    dropdownBg: '#161b22',
-    dropdownBorder: '#30363d',
-    dropdownShadow: 'rgba(1,4,9,0.3)',
-    dropdownHoverText: '#c9d1d9',
-    dropdownHoverBg: 'rgba(110,118,129,0.1)',
-    dropdownBtnHoverText: '#c9d1d9',
-    dropdownBtnHoverBg: 'rgba(110,118,129,0.1)',
-    scrollbarThumbBg: 'rgba(110,118,129,0.4)',
-    headerLabelText: '#8b949e',
-    headerLabelOpenText: '#c9d1d9',
-    headerBorder: '#21262d',
-    headerIcon: '#8b949e',
-    lineText: '#8b949e',
-    lineNumText: '#6e7681',
-    lineTimestampText: '#6e7681',
-    lineHoverBg: 'rgba(110,118,129,0.1)',
-    lineSelectedBg: 'rgba(56,139,253,0.1)',
-    lineSelectedNumText: '#58a6ff',
-    lineDtFmText: '#ffffff',
-    lineDtFmBg: '#9e6a03',
-    gateBg: 'rgba(187,128,9,0.15)',
-    gateText: '#8b949e',
-    gateWaitingText: '#d29922',
-    stepHeaderOpenBg: '#161b22',
-    stepErrorText: '#f85149',
-    stepWarningText: '#d29922',
-    loglineText: '#8b949e',
-    loglineNumText: '#6e7681',
-    loglineDebugText: '#a371f7',
-    loglineErrorText: '#8b949e',
-    loglineErrorNumText: '#6e7681',
-    loglineErrorBg: 'rgba(248,81,73,0.1)',
-    loglineWarningText: '#8b949e',
-    loglineWarningNumText: '#d29922',
-    loglineWarningBg: 'rgba(187,128,9,0.15)',
-    loglineCommandText: '#58a6ff',
-    loglineSectionText: '#58a6ff',
+    bg: 'var(--color-checks-bg, #010409)',
+    runBorderWidth: 'var(--color-checks-run-border-width, 1px)',
+    containerBorderWidth: 'var(--color-checks-container-border-width, 1px)',
+    textPrimary: 'var(--color-checks-text-primary, #c9d1d9)',
+    textSecondary: 'var(--color-checks-text-secondary, #8b949e)',
+    textLink: 'var(--color-checks-text-link, #58a6ff)',
+    btnIcon: 'var(--color-checks-btn-icon, #8b949e)',
+    btnHoverIcon: 'var(--color-checks-btn-hover-icon, #c9d1d9)',
+    btnHoverBg: 'var(--color-checks-btn-hover-bg, rgba(110,118,129,0.1))',
+    inputText: 'var(--color-checks-input-text, #8b949e)',
+    inputPlaceholderText: 'var(--color-checks-input-placeholder-text, #6e7681)',
+    inputFocusText: 'var(--color-checks-input-focus-text, #c9d1d9)',
+    inputBg: 'var(--color-checks-input-bg, #161b22)',
+    inputShadow: 'var(--color-checks-input-shadow, 0 0 0 1px #30363d)',
+    donutError: 'var(--color-checks-donut-error, #f85149)',
+    donutPending: 'var(--color-checks-donut-pending, #d29922)',
+    donutSuccess: 'var(--color-checks-donut-success, #388bfd)',
+    donutNeutral: 'var(--color-checks-donut-neutral, #8b949e)',
+    dropdownText: 'var(--color-checks-dropdown-text, #c9d1d9)',
+    dropdownBg: 'var(--color-checks-dropdown-bg, #161b22)',
+    dropdownBorder: 'var(--color-checks-dropdown-border, #30363d)',
+    dropdownShadow: 'var(--color-checks-dropdown-shadow, rgba(1,4,9,0.3))',
+    dropdownHoverText: 'var(--color-checks-dropdown-hover-text, #c9d1d9)',
+    dropdownHoverBg: 'var(--color-checks-dropdown-hover-bg, rgba(110,118,129,0.1))',
+    dropdownBtnHoverText: 'var(--color-checks-dropdown-btn-hover-text, #c9d1d9)',
+    dropdownBtnHoverBg: 'var(--color-checks-dropdown-btn-hover-bg, rgba(110,118,129,0.1))',
+    scrollbarThumbBg: 'var(--color-checks-scrollbar-thumb-bg, rgba(110,118,129,0.4))',
+    headerLabelText: 'var(--color-checks-header-label-text, #8b949e)',
+    headerLabelOpenText: 'var(--color-checks-header-label-open-text, #c9d1d9)',
+    headerBorder: 'var(--color-checks-header-border, #21262d)',
+    headerIcon: 'var(--color-checks-header-icon, #8b949e)',
+    lineText: 'var(--color-checks-line-text, #8b949e)',
+    lineNumText: 'var(--color-checks-line-num-text, #6e7681)',
+    lineTimestampText: 'var(--color-checks-line-timestamp-text, #6e7681)',
+    lineHoverBg: 'var(--color-checks-line-hover-bg, rgba(110,118,129,0.1))',
+    lineSelectedBg: 'var(--color-checks-line-selected-bg, rgba(56,139,253,0.1))',
+    lineSelectedNumText: 'var(--color-checks-line-selected-num-text, #58a6ff)',
+    lineDtFmText: 'var(--color-checks-line-dt-fm-text, #ffffff)',
+    lineDtFmBg: 'var(--color-checks-line-dt-fm-bg, #9e6a03)',
+    gateBg: 'var(--color-checks-gate-bg, rgba(187,128,9,0.15))',
+    gateText: 'var(--color-checks-gate-text, #8b949e)',
+    gateWaitingText: 'var(--color-checks-gate-waiting-text, #d29922)',
+    stepHeaderOpenBg: 'var(--color-checks-step-header-open-bg, #161b22)',
+    stepErrorText: 'var(--color-checks-step-error-text, #f85149)',
+    stepWarningText: 'var(--color-checks-step-warning-text, #d29922)',
+    loglineText: 'var(--color-checks-logline-text, #8b949e)',
+    loglineNumText: 'var(--color-checks-logline-num-text, #6e7681)',
+    loglineDebugText: 'var(--color-checks-logline-debug-text, #a371f7)',
+    loglineErrorText: 'var(--color-checks-logline-error-text, #8b949e)',
+    loglineErrorNumText: 'var(--color-checks-logline-error-num-text, #6e7681)',
+    loglineErrorBg: 'var(--color-checks-logline-error-bg, rgba(248,81,73,0.1))',
+    loglineWarningText: 'var(--color-checks-logline-warning-text, #8b949e)',
+    loglineWarningNumText: 'var(--color-checks-logline-warning-num-text, #d29922)',
+    loglineWarningBg: 'var(--color-checks-logline-warning-bg, rgba(187,128,9,0.15))',
+    loglineCommandText: 'var(--color-checks-logline-command-text, #58a6ff)',
+    loglineSectionText: 'var(--color-checks-logline-section-text, #58a6ff)',
     ansi: {
-      black: '#0d1117',
-      blackBright: '#161b22',
-      white: '#b1bac4',
-      whiteBright: '#b1bac4',
-      gray: '#6e7681',
-      red: '#ff7b72',
-      redBright: '#ffa198',
-      green: '#58a6ff',
-      greenBright: '#79c0ff',
-      yellow: '#d29922',
-      yellowBright: '#e3b341',
-      blue: '#58a6ff',
-      blueBright: '#79c0ff',
-      magenta: '#bc8cff',
-      magentaBright: '#d2a8ff',
-      cyan: '#76e3ea',
-      cyanBright: '#b3f0ff',
+      black: 'var(--color-checks-ansi-black, #0d1117)',
+      blackBright: 'var(--color-checks-ansi-black-bright, #161b22)',
+      white: 'var(--color-checks-ansi-white, #b1bac4))',
+      whiteBright: 'var(--color-checks-ansi-white-bright, #b1bac4)',
+      gray: 'var(--color-checks-ansi-gray, #6e7681)',
+      red: 'var(--color-checks-ansi-red, #ff7b72)',
+      redBright: 'var(--color-checks-ansi-red-bright, #ffa198)',
+      green: 'var(--color-checks-ansi-green, #58a6ff)',
+      greenBright: 'var(--color-checks-ansi-green-bright, #79c0ff)',
+      yellow: 'var(--color-checks-ansi-yellow, #d29922)',
+      yellowBright: 'var(--color-checks-ansi-yellow-bright, #e3b341)',
+      blue: 'var(--color-checks-ansi-blue, #58a6ff)',
+      blueBright: 'var(--color-checks-ansi-blue-bright, #79c0ff)',
+      magenta: 'var(--color-checks-ansi-magenta, #bc8cff)',
+      magentaBright: 'var(--color-checks-ansi-magenta-bright, #d2a8ff)',
+      cyan: 'var(--color-checks-ansi-cyan, #76e3ea)',
+      cyanBright: 'var(--color-checks-ansi-cyan-bright, #b3f0ff)',
     },
   },
   project: {
-    headerBg: '#0d1117',
-    sidebarBg: '#161b22',
-    gradientIn: '#161b22',
-    gradientOut: 'rgba(22,27,34,0)',
+    headerBg: 'var(--color-project-header-bg, #0d1117)',
+    sidebarBg: 'var(--color-project-sidebar-bg, #161b22)',
+    gradientIn: 'var(--color-project-gradient-in, #161b22)',
+    gradientOut: 'var(--color-project-gradient-out, rgba(22,27,34,0))',
   },
   mktg: {
     btn: {
-      bg: '#f6f8fa',
+      bg: 'var(--color-mktg-btn-bg, #f6f8fa))',
       shadow: {
-        outline: 'rgb(255 255 255 / 25%) 0 0 0 1px inset',
-        focus: 'rgb(255 255 255 / 25%) 0 0 0 4px',
+        outline: 'var(--color-mktg-btn-shadow-outline, rgb(255 255 255 / 25%) 0 0 0 1px inset))',
+        focus: 'var(--color-mktg-btn-shadow-focus, rgb(255 255 255 / 25%) 0 0 0 4px))',
         hover:
-          '0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07)',
-        hoverMuted: 'rgb(255 255 255) 0 0 0 2px inset',
+          'var(--color-mktg-btn-shadow-hover, 0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07)))',
+        hoverMuted: 'var(--color-mktg-btn-shadow-hover-muted, rgb(255 255 255) 0 0 0 2px inset))',
       },
     },
   },
   control: {
     borderColor: {
-      emphasis: '#606771',
+      emphasis: 'var(--color-control-border-color-emphasis, #606771)',
     },
   },
   avatar: {
-    bg: 'rgba(255,255,255,0.1)',
-    border: 'rgba(240,246,252,0.1)',
-    stackFade: '#30363d',
-    stackFadeMore: '#21262d',
-    childShadow: '0 0 0 2px #0d1117',
+    bg: 'var(--avatar-bgColor, var(--color-avatar-bg, rgba(255,255,255,0.1)))',
+    border: 'var(--avatar-borderColor, var(--color-avatar-border, rgba(240,246,252,0.1)))',
+    stackFade: 'var(--avatarStack-fade-bgColor-default, var(--color-avatar-stack-fade, #30363d))',
+    stackFadeMore: 'var(--avatarStack-fade-bgColor-muted, var(--color-avatar-stack-fade-more, #21262d))',
+    childShadow: 'var(--avatar-shadow, var(--color-avatar-child-shadow, 0 0 0 2px #0d1117))',
   },
   topicTag: {
-    border: 'rgba(0,0,0,0)',
+    border: 'var(--topicTag-borderColor, var(--color-topic-tag-border, transparent))',
   },
   counter: {
-    border: 'rgba(0,0,0,0)',
+    border: 'var(--counter-borderColor, var(--color-counter-border, transparent))',
   },
   selectMenu: {
-    backdropBorder: '#484f58',
-    tapHighlight: 'rgba(48,54,61,0.5)',
-    tapFocusBg: '#0c2d6b',
+    backdropBorder: 'var(--selectMenu-borderColor, var(--color-select-menu-backdrop-border, #484f58))',
+    tapHighlight: 'var(--control-bgColor-active, var(--color-select-menu-tap-highlight, rgba(48,54,61,0.5)))',
+    tapFocusBg: 'var(--selectMenu-bgColor-active, var(--color-select-menu-tap-focus-bg, #0c2d6b))',
   },
   overlay: {
-    shadow: '0 0 0 1px #30363d, 0 16px 32px rgba(1,4,9,0.85)',
-    backdrop: 'rgba(22,27,34,0.4)',
+    shadow:
+      'var(--shadow-floating-small, var(--color-overlay-shadow, 0 0 0 1px #30363d, 0 16px 32px rgba(1,4,9,0.85)))',
+    backdrop: 'var(--overlay-backdrop-bgColor, var(--color-overlay-backdrop, rgba(22,27,34,0.4)))',
   },
   header: {
-    text: 'rgba(255,255,255,0.7)',
-    bg: '#161b22',
-    divider: '#8b949e',
-    logo: '#f0f6fc',
+    text: 'var(--header-fgColor-default, var(--color-header-text, rgba(255,255,255,0.7)))',
+    bg: 'var(--header-bgColor, var(--color-header-bg, #161b22))',
+    divider: 'var(--header-borderColor-divider, var(--color-header-divider, #8b949e))',
+    logo: 'var(--header-fgColor-logo, var(--color-header-logo, #f0f6fc))',
   },
   headerSearch: {
-    bg: '#0d1117',
-    border: '#30363d',
+    bg: 'var(--headerSearch-bgColor, var(--color-header-search-bg, #0d1117))',
+    border: 'var(--headerSearch-borderColor, var(--color-header-search-border, #30363d))',
   },
   sidenav: {
-    selectedBg: '#21262d',
+    selectedBg: 'var(--sideNav-bgColor-selected, var(--color-sidenav-selected-bg, #21262d))',
   },
   menu: {
-    bgActive: '#161b22',
+    bgActive: 'var(--menu-bgColor-active, var(--color-menu-bg-active, #161b22))',
   },
   input: {
-    disabledBg: 'rgba(110,118,129,0)',
+    disabledBg: 'var(--control-bgColor-disabled, var(--color-input-disabled-bg, rgba(110,118,129,0)))',
   },
   timeline: {
-    badgeBg: '#21262d',
+    badgeBg: 'var(--timelineBadge-bgColor, var(--color-timeline-badge-bg, #21262d))',
   },
   ansi: {
-    black: '#484f58',
-    blackBright: '#6e7681',
-    white: '#b1bac4',
-    whiteBright: '#ffffff',
-    gray: '#6e7681',
-    red: '#ff7b72',
-    redBright: '#ffa198',
-    green: '#58a6ff',
-    greenBright: '#79c0ff',
-    yellow: '#d29922',
-    yellowBright: '#e3b341',
-    blue: '#58a6ff',
-    blueBright: '#79c0ff',
-    magenta: '#bc8cff',
-    magentaBright: '#d2a8ff',
-    cyan: '#39c5cf',
-    cyanBright: '#56d4dd',
+    black: 'var(--color-ansi-black, #484f58)',
+    blackBright: 'var(--color-ansi-black-bright, #6e7681)',
+    white: 'var(--color-ansi-white, #b1bac4)',
+    whiteBright: 'var(--color-ansi-white-bright, #ffffff)',
+    gray: 'var(--color-ansi-gray, #6e7681)',
+    red: 'var(--color-ansi-red, #ff7b72)',
+    redBright: 'var(--color-ansi-red-bright, #ffa198)',
+    green: 'var(--color-ansi-green, #58a6ff)',
+    greenBright: 'var(--color-ansi-green-bright, #79c0ff)',
+    yellow: 'var(--color-ansi-yellow, #d29922)',
+    yellowBright: 'var(--color-ansi-yellow-bright, #e3b341)',
+    blue: 'var(--color-ansi-blue, #58a6ff)',
+    blueBright: 'var(--color-ansi-blue-bright, #79c0ff)',
+    magenta: 'var(--color-ansi-magenta, #bc8cff)',
+    magentaBright: 'var(--color-ansi-magenta-bright, #d2a8ff)',
+    cyan: 'var(--color-ansi-cyan, #39c5cf)',
+    cyanBright: 'var(--color-ansi-cyan-bright, #56d4dd)',
   },
   btn: {
-    text: '#c9d1d9',
-    bg: '#21262d',
-    border: 'rgba(240,246,252,0.1)',
-    shadow: '0 0 transparent',
-    insetShadow: '0 0 transparent',
-    hoverBg: '#30363d',
-    hoverBorder: '#8b949e',
-    activeBg: 'hsla(212,12%,18%,1)',
-    activeBorder: '#6e7681',
-    selectedBg: '#161b22',
-    counterBg: '#30363d',
+    text: 'var(--button-default-fgColor-rest, var(--color-btn-text, #c9d1d9))',
+    bg: 'var(--button-default-bgColor-rest, var(--color-btn-bg, #21262d))',
+    border: 'var(--button-default-borderColor-rest, var(--color-btn-border, rgba(240,246,252,0.1)))',
+    shadow: 'var(--button-default-shadow-resting, var(--color-btn-shadow, 0 0 transparent))',
+    insetShadow: 'var(--button-default-shadow-inset, var(--color-btn-inset-shadow, 0 0 transparent))',
+    hoverBg: 'var(--button-default-bgColor-hover, var(--color-btn-hover-bg, #30363d))',
+    hoverBorder: 'var(--button-default-borderColor-hover, var(--color-btn-hover-border, #8b949e))',
+    activeBg: 'var(--button-default-bgColor-active, var(--color-btn-active-bg, hsla(212,12%,18%,1)))',
+    activeBorder: 'var(--button-default-borderColor-active, var(--color-btn-active-border, #6e7681))',
+    selectedBg: 'var(--button-default-bgColor-selected, var(--color-btn-selected-bg, #161b22))',
+    counterBg: 'var(--buttonCounter-default-bgColor-rest, var(--color-btn-counter-bg, #30363d))',
     primary: {
-      text: '#ffffff',
-      bg: '#1f6feb',
-      border: 'rgba(240,246,252,0.1)',
-      shadow: '0 0 transparent',
-      insetShadow: '0 0 transparent',
-      hoverBg: '#388bfd',
-      hoverBorder: 'rgba(240,246,252,0.1)',
-      selectedBg: '#1f6feb',
-      selectedShadow: '0 0 transparent',
-      disabledText: 'rgba(255,255,255,0.5)',
-      disabledBg: 'rgba(31,111,235,0.6)',
-      disabledBorder: 'rgba(240,246,252,0.1)',
-      icon: '#ffffff',
-      counterBg: 'rgba(5,29,77,0.2)',
+      text: 'var(--button-primary-fgColor-rest, var(--color-btn-primary-text, #ffffff))',
+      bg: 'var(--button-primary-bgColor-rest, var(--color-btn-primary-bg, #1f6feb))',
+      border: 'var(--button-primary-borderColor-rest, var(--color-btn-primary-border, rgba(240,246,252,0.1)))',
+      shadow: 'var(--shadow-resting-small, var(--color-btn-primary-shadow, 0 0 transparent))',
+      insetShadow: 'var(--shadow-highlight, var(--color-btn-primary-inset-shadow, 0 0 transparent))',
+      hoverBg: 'var(--button-primary-bgColor-hover, var(--color-btn-primary-hover-bg, #388bfd))',
+      hoverBorder:
+        'var(--button-primary-borderColor-hover, var(--color-btn-primary-hover-border, rgba(240,246,252,0.1)))',
+      selectedBg: 'var(--button-primary-bgColor-active, var(--color-btn-primary-selected-bg, #1f6feb))',
+      selectedShadow:
+        'var(--button-primary-shadow-selected, var(--color-btn-primary-selected-shadow, 0 0 transparent))',
+      disabledText:
+        'var(--button-primary-fgColor-disabled, var(--color-btn-primary-disabled-text, rgba(255,255,255,0.5)))',
+      disabledBg: 'var(--button-primary-bgColor-disabled, var(--color-btn-primary-disabled-bg, rgba(31,111,235,0.6)))',
+      disabledBorder:
+        'var(--button-primary-borderColor-disabled, var(--color-btn-primary-disabled-border, rgba(240,246,252,0.1)))',
+      icon: 'var(--button-primary-iconColor-rest, var(--color-btn-primary-icon, #ffffff))',
+      counterBg: 'var(--buttonCounter-primary-bgColor-rest, var(--color-btn-primary-counter-bg, rgba(5,29,77,0.2)))',
     },
     outline: {
-      text: '#388bfd',
-      hoverText: '#58a6ff',
-      hoverBg: '#30363d',
-      hoverBorder: 'rgba(240,246,252,0.1)',
-      hoverShadow: '0 1px 0 rgba(1,4,9,0.1)',
-      hoverInsetShadow: 'inset 0 1px 0 rgba(255,255,255,0.03)',
-      hoverCounterBg: 'rgba(5,29,77,0.2)',
-      selectedText: '#ffffff',
-      selectedBg: '#0d419d',
-      selectedBorder: 'rgba(240,246,252,0.1)',
-      selectedShadow: '0 0 transparent',
-      disabledText: 'rgba(88,166,255,0.5)',
-      disabledBg: '#0d1117',
-      disabledCounterBg: 'rgba(31,111,235,0.05)',
-      counterBg: 'rgba(5,29,77,0.2)',
-      hoverCounterFg: '#58a6ff',
-      disabledCounterFg: 'rgba(88,166,255,0.5)',
-      counterFg: '#388bfd',
+      text: 'var(--button-outline-fgColor-rest, var(--color-btn-outline-text, #388bfd))',
+      hoverText: 'var(--button-outline-fgColor-hover, var(--color-btn-outline-hover-text, #58a6ff))',
+      hoverBg: 'var(--button-outline-bgColor-hover, var(--color-btn-outline-hover-bg, #30363d))',
+      hoverBorder:
+        'var(--button-outline-borderColor-hover, var(--color-btn-outline-hover-border, rgba(240,246,252,0.1)))',
+      hoverShadow:
+        'var(--shadow-resting-small, var(--color-btn-outline-hover-shadow, 0 1px 0 rgba(1,4,9,0.1)))// HI_KATIE: no matches',
+      hoverInsetShadow:
+        'var(--shadow-highlight, var(--color-btn-outline-hover-inset-shadow, inset 0 1px 0 rgba(255,255,255,0.03)))// HI_KATIE: no matches',
+      hoverCounterBg:
+        'var(--buttonCounter-outline-bgColor-hover, var(--color-btn-outline-hover-counter-bg, rgba(5,29,77,0.2)))',
+      selectedText: 'var(--button-outline-fgColor-active, var(--color-btn-outline-selected-text, #ffffff))',
+      selectedBg: 'var(--button-outline-bgColor-active, var(--color-btn-outline-selected-bg, #0d419d))',
+      selectedBorder:
+        'var(--button-outline-borderColor-active, var(--color-btn-outline-selected-border, rgba(240,246,252,0.1)))',
+      selectedShadow:
+        'var(--button-outline-shadow-selected, var(--color-btn-outline-selected-shadow, 0 0 transparent))',
+      disabledText:
+        'var(--button-outline-fgColor-disabled, var(--color-btn-outline-disabled-text, rgba(88,166,255,0.5)))',
+      disabledBg: 'var(--button-outline-bgColor-disabled, var(--color-btn-outline-disabled-bg, #0d1117))',
+      disabledCounterBg:
+        'var(--buttonCounter-outline-bgColor-disabled, var(--color-btn-outline-disabled-counter-bg, rgba(31,111,235,0.05)))',
+      counterBg: 'var(--buttonCounter-outline-bgColor-rest, var(--color-btn-outline-counter-bg, rgba(5,29,77,0.2)))',
+      hoverCounterFg: 'var(--buttonCounter-outline-fgColor-hover, var(--color-btn-outline-hover-counter-fg, #58a6ff))',
+      disabledCounterFg:
+        'var(--buttonCounter-outline-fgColor-disabled, var(--color-btn-outline-disabled-counter-fg, rgba(88,166,255,0.5)))',
+      counterFg: 'var(--buttonCounter-outline-fgColor-rest, var(--color-btn-outline-counter-fg, #388bfd))',
     },
     danger: {
-      text: '#f85149',
-      hoverText: '#ffffff',
-      hoverBg: '#da3633',
-      hoverBorder: '#f85149',
-      hoverShadow: '0 0 transparent',
-      hoverInsetShadow: '0 0 transparent',
-      hoverIcon: '#ffffff',
-      hoverCounterBg: 'rgba(255,255,255,0.2)',
-      selectedText: '#ffffff',
-      selectedBg: '#b62324',
-      selectedBorder: '#ff7b72',
-      selectedShadow: '0 0 transparent',
-      disabledText: 'rgba(248,81,73,0.5)',
-      disabledBg: '#0d1117',
-      disabledCounterBg: 'rgba(218,54,51,0.05)',
-      counterBg: 'rgba(73,2,2,0.2)',
-      icon: '#f85149',
-      counterFg: '#f85149',
-      disabledCounterFg: 'rgba(248,81,73,0.5)',
-      hoverCounterFg: '#ffffff',
+      text: 'var(--button-danger-fgColor-rest, var(--color-btn-danger-text, #f85149))',
+      hoverText: 'var(--button-danger-fgColor-hover, var(--color-btn-danger-hover-text, #ffffff))',
+      hoverBg: 'var(--button-danger-bgColor-hover, var(--color-btn-danger-hover-bg, #da3633))',
+      hoverBorder: 'var(--button-danger-borderColor-hover, var(--color-btn-danger-hover-border, #f85149))',
+      hoverShadow: 'var(--shadow-resting-small, var(--color-btn-danger-hover-shadow, 0 0 transparent))',
+      hoverInsetShadow: 'var(--shadow-highlight, var(--color-btn-danger-hover-inset-shadow, 0 0 transparent))',
+      hoverIcon: 'var(--button-danger-iconColor-hover, var(--color-btn-danger-hover-icon, #ffffff))',
+      hoverCounterBg:
+        'var(--buttonCounter-danger-bgColor-hover, var(--color-btn-danger-hover-counter-bg, rgba(255,255,255,0.2)))',
+      selectedText: 'var(--button-danger-fgColor-active, var(--color-btn-danger-selected-text, #ffffff))',
+      selectedBg: 'var(--button-danger-bgColor-active, var(--color-btn-danger-selected-bg, #b62324))',
+      selectedBorder: 'var(--button-danger-borderColor-active, var(--color-btn-danger-selected-border, #ff7b72))',
+      selectedShadow: 'var(--button-danger-shadow-selected, var(--color-btn-danger-selected-shadow, 0 0 transparent))',
+      disabledText: 'var(--button-danger-fgColor-disabled, var(--color-btn-danger-disabled-text, rgba(248,81,73,0.5)))',
+      disabledBg: 'var(--button-danger-bgColor-disabled, var(--color-btn-danger-disabled-bg, #0d1117))',
+      disabledCounterBg:
+        'var(--buttonCounter-danger-bgColor-disabled, var(--color-btn-danger-disabled-counter-bg, rgba(218,54,51,0.05)))',
+      counterBg: 'var(--buttonCounter-danger-bgColor-rest, var(--color-btn-danger-counter-bg, rgba(73,2,2,0.2)))',
+      icon: 'var(--button-danger-iconColor-rest, var(--color-btn-danger-icon, #f85149))',
+      counterFg: 'var(--buttonCounter-danger-fgColor-rest, var(--color-btn-danger-counter-fg, #f85149))',
+      disabledCounterFg:
+        'var(--buttonCounter-danger-fgColor-disabled, var(--color-btn-danger-disabled-counter-fg, rgba(248,81,73,0.5)))',
+      hoverCounterFg: 'var(--buttonCounter-danger-fgColor-hover, var(--color-btn-danger-hover-counter-fg, #ffffff))',
     },
     inactive: {
-      bg: '#21262d',
-      text: '#8b949e',
+      bg: 'var(--button-inactive-bgColor-rest, var(--color-btn-inactive-bg, #21262d))',
+      text: 'var(--button-inactive-fgColor-rest, var(--color-btn-inactive-text, #8b949e))',
     },
   },
   underlinenav: {
-    icon: '#6e7681',
-    borderHover: 'rgba(110,118,129,0.4)',
+    icon: 'var(--underlineNav-iconColor-rest, var(--color-underlinenav-icon, #6e7681))',
+    borderHover: 'var(--underlineNav-borderColor-hover, var(--color-underlinenav-border-hover, rgba(110,118,129,0.4)))',
   },
   actionListItem: {
-    inlineDivider: 'rgba(48,54,61,0.48)',
+    inlineDivider: 'var(--borderColor-muted, var(--color-action-list-item-inline-divider, rgba(48,54,61,0.48)))',
     default: {
-      hoverBg: 'rgba(177,186,196,0.12)',
-      hoverBorder: 'rgba(0,0,0,0)',
-      activeBg: 'rgba(177,186,196,0.2)',
-      activeBorder: 'rgba(0,0,0,0)',
-      selectedBg: 'rgba(177,186,196,0.08)',
+      hoverBg:
+        'var(--control-transparent-bgColor-hover, var(--color-action-list-item-default-hover-bg, rgba(177,186,196,0.12)))',
+      hoverBorder:
+        'var(--control-transparent-borderColor-hover, var(--color-action-list-item-default-hover-border, transparent))',
+      activeBg:
+        'var(--control-transparent-bgColor-active, var(--color-action-list-item-default-active-bg, rgba(177,186,196,0.2)))',
+      activeBorder:
+        'var(--control-transparent-borderColor-active, var(--color-action-list-item-default-active-border, transparent))',
+      selectedBg:
+        'var(--control-transparent-bgColor-selected, var(--color-action-list-item-default-selected-bg, rgba(177,186,196,0.08)))',
     },
     danger: {
-      hoverBg: 'rgba(248,81,73,0.16)',
-      activeBg: 'rgba(248,81,73,0.24)',
-      hoverText: '#ff7b72',
+      hoverBg:
+        'var(--control-danger-bgColor-hover, var(--color-action-list-item-danger-hover-bg, rgba(248,81,73,0.16)))',
+      activeBg:
+        'var(--control-danger-bgColor-active, var(--color-action-list-item-danger-active-bg, rgba(248,81,73,0.24)))',
+      hoverText: 'var(--control-danger-fgColor-hover, var(--color-action-list-item-danger-hover-text, #ff7b72))',
     },
   },
   switchTrack: {
-    bg: 'rgba(110,118,129,0.1)',
-    hoverBg: 'hsla(215,8%,72%,0.1)',
-    activeBg: 'rgba(110,118,129,0.4)',
-    disabledBg: '#21262d',
-    fg: '#8b949e',
-    disabledFg: '#010409',
-    border: 'rgba(0,0,0,0)',
+    bg: 'var(--controlTrack-bgColor-rest, var(--color-switch-track-bg, rgba(110,118,129,0.1)))',
+    hoverBg: 'var(--controlTrack-bgColor-hover, var(--color-switch-track-hover-bg, hsla(215,8%,72%,0.1)))',
+    activeBg: 'var(--controlTrack-bgColor-active, var(--color-switch-track-active-bg, rgba(110,118,129,0.4)))',
+    disabledBg: 'var(--controlTrack-bgColor-disabled, var(--color-switch-track-disabled-bg, #21262d))',
+    fg: 'var(--controlTrack-fgColor-rest, var(--color-switch-track-fg, #8b949e))',
+    disabledFg: 'var(--controlTrack-fgColor-disabled, var(--color-switch-track-disabled-fg, #010409))',
+    border: 'var(--controlTrack-borderColor-rest, var(--color-switch-track-border, transparent))',
     checked: {
-      bg: 'rgba(31,111,235,0.35)',
-      hoverBg: 'rgba(31,111,235,0.5)',
-      activeBg: 'rgba(31,111,235,0.65)',
-      fg: '#ffffff',
-      disabledFg: '#010409',
-      border: 'rgba(0,0,0,0)',
+      bg: 'var(--control-checked-bgColor-rest, var(--color-switch-track-checked-bg, rgba(31,111,235,0.35)))',
+      hoverBg: 'var(--control-checked-bgColor-hover, var(--color-switch-track-checked-hover-bg, rgba(31,111,235,0.5)))',
+      activeBg:
+        'var(--control-checked-bgColor-active, var(--color-switch-track-checked-active-bg, rgba(31,111,235,0.65)))',
+      fg: 'var(--control-checked-fgColor-rest, var(--color-switch-track-checked-fg, #ffffff))',
+      disabledFg: 'var(--control-checked-fgColor-disabled, var(--color-switch-track-checked-disabled-fg, #010409))',
+      border: 'var(--borderColor-transparent, var(--color-switch-track-checked-border, transparent))',
     },
   },
   switchKnob: {
-    bg: '#0d1117',
-    border: '#606771',
-    disabledBg: '#161b22',
+    bg: 'var(--controlKnob-bgColor-rest, var(--color-switch-knob-bg, #0d1117))',
+    border: 'var(--controlKnob-borderColor-rest, var(--color-switch-knob-border, #606771))',
+    disabledBg: 'var(--controlKnob-bgColor-disabled, var(--color-switch-knob-disabled-bg, #161b22))',
     checked: {
-      bg: '#0d1117',
-      disabledBg: '#161b22',
-      border: 'rgba(31,111,235,0.35)',
+      bg: 'var(--controlKnob-bgColor-checked, var(--color-switch-knob-checked-bg, #0d1117))',
+      disabledBg: 'var(--controlKnob-bgColor-disabled, var(--color-switch-knob-checked-disabled-bg, #161b22))',
+      border: 'var(--controlKnob-borderColor-checked, var(--color-switch-knob-checked-border, rgba(31,111,235,0.35)))',
     },
   },
   segmentedControl: {
-    bg: 'rgba(110,118,129,0.1)',
+    bg: 'var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg, rgba(110,118,129,0.1)))',
     button: {
-      bg: '#0d1117',
+      bg: 'var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg, #0d1117))',
       hover: {
-        bg: '#30363d',
+        bg: 'var(--controlTrack-bgColor-hover, var(--color-segmented-control-button-hover-bg, #30363d))',
       },
       active: {
-        bg: '#21262d',
+        bg: 'var(--controlTrack-bgColor-active, var(--color-segmented-control-button-active-bg, #21262d))',
       },
       selected: {
-        border: '#6e7681',
+        border: 'var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-selected-border, #6e7681))',
       },
     },
   },
   treeViewItem: {
     chevron: {
-      hoverBg: 'rgba(177,186,196,0.12)',
+      hoverBg:
+        'var(--control-transparent-bgColor-hover, var(--color-tree-view-item-chevron-hover-bg, rgba(177,186,196,0.12)))',
     },
     directory: {
-      fill: '#8b949e',
+      fill: 'var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-directory-fill, #8b949e))',
     },
   },
   fg: {
     default: '#c9d1d9',
     muted: '#8b949e',
-    subtle: '#6e7681',
-    onEmphasis: '#ffffff',
+    subtle: 'var(--fgColor-muted, var(--color-fg-subtle, #6e7681))',
+    onEmphasis: 'var(--fgColor-onEmphasis, var(--color-fg-on-emphasis, #ffffff))',
   },
   canvas: {
-    default: '#0d1117',
-    overlay: '#161b22',
-    inset: '#010409',
-    subtle: '#161b22',
+    default: 'var(--bgColor-default, var(--color-canvas-default, #0d1117))',
+    overlay: 'var(--overlay-bgColor, var(--color-canvas-overlay, #161b22))',
+    inset: 'var(--bgColor-inset, var(--color-canvas-inset, #010409))',
+    subtle: 'var(--bgColor-muted, var(--color-canvas-subtle, #161b22))',
   },
   border: {
-    default: '#30363d',
-    muted: '#21262d',
-    subtle: 'rgba(240,246,252,0.1)',
+    default: 'var(--borderColor-default, var(--color-border-default, #30363d))',
+    muted: 'var(--borderColor-muted, var(--color-border-muted, #21262d))',
+    subtle: 'var(--borderColor-muted, var(--color-border-subtle, rgba(240,246,252,0.1)))',
   },
   shadow: {
-    small: '0 0 transparent',
-    medium: '0 3px 6px #010409',
-    large: '0 8px 24px #010409',
-    extraLarge: '0 12px 48px #010409',
+    small: 'var(--shadow-resting-small, var(--color-shadow-small, 0 0 transparent))',
+    medium: 'var(--shadow-resting-medium, var(--color-shadow-medium, 0 3px 6px #010409))',
+    large: 'var(--shadow-floating-large, var(--color-shadow-large, 0 8px 24px #010409))',
+    extraLarge: 'var(--shadow-floating-xlarge, var(--color-shadow-extra-large, 0 12px 48px #010409))',
   },
   neutral: {
-    emphasisPlus: '#6e7681',
-    emphasis: '#6e7681',
-    muted: 'rgba(110,118,129,0.4)',
-    subtle: 'rgba(110,118,129,0.1)',
+    emphasisPlus: 'var(--bgColor-emphasis, var(--color-neutral-emphasis-plus, #6e7681))',
+    emphasis: 'var(--bgColor-neutral-emphasis, var(--color-neutral-emphasis, #6e7681))',
+    muted: 'var(--borderColor-neutral-muted, var(--color-neutral-muted, rgba(110,118,129,0.4)))',
+    subtle: 'var(--bgColor-neutral-muted, var(--color-neutral-subtle, rgba(110,118,129,0.1)))',
   },
   accent: {
     fg: '#58a6ff',
-    emphasis: '#1f6feb',
-    muted: 'rgba(56,139,253,0.4)',
-    subtle: 'rgba(56,139,253,0.1)',
+    emphasis: 'var(--bgColor-accent-emphasis, var(--color-accent-emphasis, #1f6feb))',
+    muted: 'var(--borderColor-accent-muted, var(--color-accent-muted, rgba(56,139,253,0.4)))',
+    subtle: 'var(--bgColor-accent-muted, var(--color-accent-subtle, rgba(56,139,253,0.1)))',
   },
   success: {
-    fg: '#58a6ff',
-    emphasis: '#1f6feb',
-    muted: 'rgba(56,139,253,0.4)',
-    subtle: 'rgba(56,139,253,0.15)',
+    fg: 'var(--fgColor-success, var(--color-success-fg, #58a6ff))',
+    emphasis: 'var(--bgColor-success-emphasis, var(--color-success-emphasis, #1f6feb))',
+    muted: 'var(--borderColor-success-muted, var(--color-success-muted, rgba(56,139,253,0.4)))',
+    subtle: 'var(--bgColor-success-muted, var(--color-success-subtle, rgba(56,139,253,0.15)))',
   },
   attention: {
-    fg: '#d29922',
-    emphasis: '#9e6a03',
-    muted: 'rgba(187,128,9,0.4)',
-    subtle: 'rgba(187,128,9,0.15)',
+    fg: 'var(--fgColor-attention, var(--color-attention-fg, #d29922))',
+    emphasis: 'var(--bgColor-attention-emphasis, var(--color-attention-emphasis, #9e6a03))',
+    muted: 'var(--borderColor-attention-muted, var(--color-attention-muted, rgba(187,128,9,0.4)))',
+    subtle: 'var(--bgColor-attention-muted, var(--color-attention-subtle, rgba(187,128,9,0.15)))',
   },
   severe: {
-    fg: '#f85149',
-    emphasis: '#da3633',
-    muted: 'rgba(248,81,73,0.4)',
-    subtle: 'rgba(248,81,73,0.1)',
+    fg: 'var(--fgColor-severe, var(--color-severe-fg, #f85149))',
+    emphasis: 'var(--bgColor-severe-emphasis, var(--color-severe-emphasis, #da3633))',
+    muted: 'var(--borderColor-severe-muted, var(--color-severe-muted, rgba(248,81,73,0.4)))',
+    subtle: 'var(--bgColor-severe-muted, var(--color-severe-subtle, rgba(248,81,73,0.1)))',
   },
   danger: {
-    fg: '#f85149',
-    emphasis: '#da3633',
-    muted: 'rgba(248,81,73,0.4)',
-    subtle: 'rgba(248,81,73,0.1)',
+    fg: 'var(--fgColor-danger, var(--color-danger-fg, #f85149))',
+    emphasis: 'var(--borderColor-danger-emphasis, var(--color-danger-emphasis, #da3633))',
+    muted: 'var(--borderColor-danger-muted, var(--color-danger-muted, rgba(248,81,73,0.4)))',
+    subtle: 'var(--bgColor-danger-muted, var(--color-danger-subtle, rgba(248,81,73,0.1)))',
   },
   open: {
     fg: '#ff7b72',
@@ -472,32 +501,32 @@ const colors = {
     subtle: 'rgba(110,118,129,0.1)',
   },
   done: {
-    fg: '#a371f7',
-    emphasis: '#8957e5',
-    muted: 'rgba(163,113,247,0.4)',
-    subtle: 'rgba(163,113,247,0.1)',
+    fg: 'var(--fgColor-done, var(--color-done-fg, #a371f7))',
+    emphasis: 'var(--bgColor-done-emphasis, var(--color-done-emphasis, #8957e5))',
+    muted: 'var(--borderColor-done-muted, var(--color-done-muted, rgba(163,113,247,0.4)))',
+    subtle: 'var(--bgColor-done-muted, var(--color-done-subtle, rgba(163,113,247,0.1)))',
   },
   sponsors: {
-    fg: '#db61a2',
-    emphasis: '#bf4b8a',
-    muted: 'rgba(219,97,162,0.4)',
-    subtle: 'rgba(219,97,162,0.1)',
+    fg: 'var(--fgColor-sponsors, var(--color-sponsors-fg, #db61a2))',
+    emphasis: 'var(--bgColor-sponsors-emphasis, var(--color-sponsors-emphasis, #bf4b8a))',
+    muted: 'var(--borderColor-sponsors-muted, var(--color-sponsors-muted, rgba(219,97,162,0.4)))',
+    subtle: 'var(--bgColor-sponsors-muted, var(--color-sponsors-subtle, rgba(219,97,162,0.1)))',
   },
   primer: {
     fg: {
-      disabled: '#484f58',
+      disabled: 'var(--fgColor-disabled, var(--color-primer-fg-disabled, #484f58))',
     },
     canvas: {
-      backdrop: 'rgba(1,4,9,0.8)',
-      sticky: 'rgba(13,17,23,0.95)',
+      backdrop: 'var(--overlay-backdrop-bgColor, var(--color-primer-canvas-backdrop, rgba(1,4,9,0.8)))',
+      sticky: 'var(--color-primer-canvas-sticky, rgba(13,17,23,0.95))',
     },
     border: {
-      active: '#f78166',
-      contrast: 'rgba(255,255,255,0.2)',
+      active: 'var(--underlineNav-borderColor-active, var(--color-primer-border-active, #f78166))',
+      contrast: 'var(--borderColor-muted, var(--color-primer-border-contrast, rgba(255,255,255,0.2)))',
     },
     shadow: {
-      highlight: '0 0 transparent',
-      inset: '0 0 transparent',
+      highlight: 'var(--shadow-highlight, var(--color-primer-shadow-highlight, 0 0 transparent))',
+      inset: 'var(--shadow-inset, var(--color-primer-shadow-inset, 0 0 transparent))',
     },
   },
   scale: {
diff --git a/src/legacy-theme/ts/colors/light.ts b/src/legacy-theme/ts/colors/light.ts
index 6b644627d9c..7823f0efa4b 100644
--- a/src/legacy-theme/ts/colors/light.ts
+++ b/src/legacy-theme/ts/colors/light.ts
@@ -1,503 +1,536 @@
 const colors = {
-  canvasDefaultTransparent: 'rgba(255,255,255,0)',
-  pageHeaderBg: '#f6f8fa',
+  canvasDefaultTransparent: 'var(--bgColor-transparent, var(--color-canvas-default-transparent, rgba(255,255,255,0)))',
+  pageHeaderBg: 'var(--page-header-bgColor, var(--color-page-header-bg, #f6f8fa))',
   marketingIcon: {
-    primary: '#218bff',
-    secondary: '#54aeff',
+    primary: 'var(--color-marketing-icon-primary, #218bff)',
+    secondary: 'var(--color-marketing-icon-secondary, #54aeff)',
   },
   diffBlob: {
     addition: {
-      numText: '#1F2328',
-      fg: '#1F2328',
-      numBg: '#ccffd8',
-      lineBg: '#e6ffec',
-      wordBg: '#abf2bc',
+      numText: 'var(--diffBlob-addition-fgColor-num, var(--color-diff-blob-addition-num-text, #1F2328))',
+      fg: 'var(--diffBlob-addition-fgColor-text, var(--color-diff-blob-addition-fg, #1F2328))',
+      numBg: 'var(--diffBlob-addition-bgColor-num, var(--color-diff-blob-addition-num-bg, #ccffd8))',
+      lineBg: 'var(--diffBlob-addition-bgColor-line, var(--color-diff-blob-addition-line-bg, #e6ffec))',
+      wordBg: 'var(--diffBlob-addition-bgColor-word, var(--color-diff-blob-addition-word-bg, #abf2bc))',
     },
     deletion: {
-      numText: '#1F2328',
-      fg: '#1F2328',
-      numBg: '#ffd7d5',
-      lineBg: '#ffebe9',
-      wordBg: 'rgba(255,129,130,0.4)',
+      numText: 'var(--diffBlob-deletion-fgColor-num, var(--color-diff-blob-deletion-num-text, #1F2328))',
+      fg: 'var(--diffBlob-deletion-fgColor-text, var(--color-diff-blob-deletion-fg, #1F2328))',
+      numBg: 'var(--diffBlob-deletion-bgColor-num, var(--color-diff-blob-deletion-num-bg, #ffd7d5))',
+      lineBg: 'var(--diffBlob-deletion-bgColor-line, var(--color-diff-blob-deletion-line-bg, #ffebe9))',
+      wordBg: 'var(--diffBlob-deletion-bgColor-word, var(--color-diff-blob-deletion-word-bg, rgba(255,129,130,0.4)))',
     },
     hunk: {
-      numBg: 'rgba(84,174,255,0.4)',
+      numBg: 'var(--diffBlob-hunk-bgColor-num, var(--color-diff-blob-hunk-num-bg, rgba(84,174,255,0.4)))',
     },
     expander: {
-      icon: '#656d76',
+      icon: 'var(--diffBlob-expander-iconColor, var(--color-diff-blob-expander-icon, #656d76))',
     },
-    selectedLineHighlightMixBlendMode: 'multiply',
+    selectedLineHighlightMixBlendMode: 'var(--color-diff-blob-selected-line-highlight-mix-blend-mode, multiply)',
   },
   diffstat: {
-    deletionBorder: 'rgba(31,35,40,0.15)',
-    additionBorder: 'rgba(31,35,40,0.15)',
-    additionBg: '#1f883d',
+    deletionBorder: 'var(--color-diffstat-deletion-border, rgba(31,35,40,0.15))',
+    additionBorder: 'var(--color-diffstat-addition-border, rgba(31,35,40,0.15))',
+    additionBg: 'var(undefined, var(--color-diffstat-addition-bg, #1f883d))',
   },
   searchKeyword: {
-    hl: '#fff8c5',
+    hl: 'var(--highlight-neutral-bgColor, var(--color-search-keyword-hl, #fff8c5))',
   },
   prettylights: {
     syntax: {
-      comment: '#6e7781',
-      constant: '#0550ae',
-      entity: '#6639ba',
-      storageModifierImport: '#24292f',
-      entityTag: '#116329',
-      keyword: '#cf222e',
-      string: '#0a3069',
-      variable: '#953800',
-      brackethighlighterUnmatched: '#82071e',
-      invalidIllegalText: '#f6f8fa',
-      invalidIllegalBg: '#82071e',
-      carriageReturnText: '#f6f8fa',
-      carriageReturnBg: '#cf222e',
-      stringRegexp: '#116329',
-      markupList: '#3b2300',
-      markupHeading: '#0550ae',
-      markupItalic: '#24292f',
-      markupBold: '#24292f',
-      markupDeletedText: '#82071e',
-      markupDeletedBg: '#ffebe9',
-      markupInsertedText: '#116329',
-      markupInsertedBg: '#dafbe1',
-      markupChangedText: '#953800',
-      markupChangedBg: '#ffd8b5',
-      markupIgnoredText: '#eaeef2',
-      markupIgnoredBg: '#0550ae',
-      metaDiffRange: '#8250df',
-      brackethighlighterAngle: '#57606a',
-      sublimelinterGutterMark: '#8c959f',
-      constantOtherReferenceLink: '#0a3069',
+      comment: 'var(--color-prettylights-syntax-comment, #57606a)',
+      constant: 'var(--color-prettylights-syntax-constant, #0550ae)',
+      entity: 'var(--color-prettylights-syntax-entity, #6639ba)',
+      storageModifierImport: 'var(--color-prettylights-syntax-storage-modifier-import, #24292f)',
+      entityTag: 'var(--color-prettylights-syntax-entity-tag, #116329)',
+      keyword: 'var(--color-prettylights-syntax-keyword, #cf222e)',
+      string: 'var(--color-prettylights-syntax-string, #0a3069)',
+      variable: 'var(--color-prettylights-syntax-variable, #953800)',
+      brackethighlighterUnmatched: 'var(--color-prettylights-syntax-brackethighlighter-unmatched, #82071e)',
+      invalidIllegalText: 'var(--color-prettylights-syntax-invalid-illegal-text, #f6f8fa)',
+      invalidIllegalBg: 'var(--color-prettylights-syntax-invalid-illegal-bg, #82071e)',
+      carriageReturnText: 'var(--color-prettylights-syntax-carriage-return-text, #f6f8fa)',
+      carriageReturnBg: 'var(--color-prettylights-syntax-carriage-return-bg, #cf222e)',
+      stringRegexp: 'var(--color-prettylights-syntax-string-regexp, #116329)',
+      markupList: 'var(--color-prettylights-syntax-markup-list, #3b2300)',
+      markupHeading: 'var(--color-prettylights-syntax-markup-heading, #0550ae)',
+      markupItalic: 'var(--color-prettylights-syntax-markup-italic, #24292f)',
+      markupBold: 'var(--color-prettylights-syntax-markup-bold, #24292f)',
+      markupDeletedText: 'var(--color-prettylights-syntax-markup-deleted-text, #82071e)',
+      markupDeletedBg: 'var(--color-prettylights-syntax-markup-deleted-bg, #ffebe9)',
+      markupInsertedText: 'var(--color-prettylights-syntax-markup-inserted-text, #116329)',
+      markupInsertedBg: 'var(--color-prettylights-syntax-markup-inserted-bg, #dafbe1)',
+      markupChangedText: 'var(--color-prettylights-syntax-markup-changed-text, #953800)',
+      markupChangedBg: 'var(--color-prettylights-syntax-markup-changed-bg, #ffd8b5)',
+      markupIgnoredText: 'var(--color-prettylights-syntax-markup-ignored-text, #eaeef2)',
+      markupIgnoredBg: 'var(--color-prettylights-syntax-markup-ignored-bg, #0550ae)',
+      metaDiffRange: 'var(--color-prettylights-syntax-meta-diff-range, #8250df)',
+      brackethighlighterAngle: 'var(--color-prettylights-syntax-brackethighlighter-angle, #57606a)',
+      sublimelinterGutterMark: 'var(--color-prettylights-syntax-sublimelinter-gutter-mark, #8c959f)',
+      constantOtherReferenceLink: 'var(--color-prettylights-syntax-constant-other-reference-link, #0a3069)',
     },
   },
   codemirror: {
-    text: '#1F2328',
-    bg: '#ffffff',
-    guttersBg: '#ffffff',
-    guttermarkerText: '#ffffff',
-    guttermarkerSubtleText: '#6e7781',
-    linenumberText: '#656d76',
-    cursor: '#1F2328',
-    selectionBg: 'rgba(84,174,255,0.4)',
-    activelineBg: 'rgba(234,238,242,0.5)',
-    matchingbracketText: '#1F2328',
-    linesBg: '#ffffff',
+    text: 'var(--codeMirror-fgColor, var(--color-codemirror-text, #1F2328))',
+    bg: 'var(--codeMirror-bgColor, var(--color-codemirror-bg, #ffffff))',
+    guttersBg: 'var(--codeMirror-gutters-bgColor, var(--color-codemirror-gutters-bg, #ffffff))',
+    guttermarkerText:
+      'var(--codeMirror-gutterMarker-fgColor-default, var(--color-codemirror-guttermarker-text, #ffffff))',
+    guttermarkerSubtleText:
+      'var(--codeMirror-gutterMarker-fgColor-muted, var(--color-codemirror-guttermarker-subtle-text, #6e7781))',
+    linenumberText: 'var(--codeMirror-lineNumber-fgColor, var(--color-codemirror-linenumber-text, #656d76))',
+    cursor: 'var(--codeMirror-cursor-fgColor, var(--color-codemirror-cursor, #1F2328))',
+    selectionBg: 'var(--codeMirror-selection-bgColor, var(--color-codemirror-selection-bg, rgba(84,174,255,0.4)))',
+    activelineBg: 'var(--codeMirror-activeline-bgColor, var(--color-codemirror-activeline-bg, rgba(234,238,242,0.5)))',
+    matchingbracketText:
+      'var(--codeMirror-matchingBracket-fgColor, var(--color-codemirror-matchingbracket-text, #1F2328))',
+    linesBg: 'var(--codeMirror-lines-bgColor, var(--color-codemirror-lines-bg, #ffffff))',
     syntax: {
-      comment: '#24292f',
-      constant: '#0550ae',
-      entity: '#8250df',
-      keyword: '#cf222e',
-      storage: '#cf222e',
-      string: '#0a3069',
-      support: '#0550ae',
-      variable: '#953800',
+      comment: 'var(--codeMirror-syntax-fgColor-comment, var(--color-codemirror-syntax-comment, #24292f))',
+      constant: 'var(--codeMirror-syntax-fgColor-constant, var(--color-codemirror-syntax-constant, #0550ae))',
+      entity: 'var(--codeMirror-syntax-fgColor-entity, var(--color-codemirror-syntax-entity, #8250df))',
+      keyword: 'var(--codeMirror-syntax-fgColor-keyword, var(--color-codemirror-syntax-keyword, #cf222e))',
+      storage: 'var(--codeMirror-syntax-fgColor-storage, var(--color-codemirror-syntax-storage, #cf222e))',
+      string: 'var(--codeMirror-syntax-fgColor-string, var(--color-codemirror-syntax-string, #0a3069))',
+      support: 'var(--codeMirror-syntax-fgColor-support, var(--color-codemirror-syntax-support, #0550ae))',
+      variable: 'var(--codeMirror-syntax-fgColor-variable, var(--color-codemirror-syntax-variable, #953800))',
     },
   },
   checks: {
-    bg: '#24292f',
-    runBorderWidth: '0px',
-    containerBorderWidth: '0px',
-    textPrimary: '#f6f8fa',
-    textSecondary: '#8c959f',
-    textLink: '#54aeff',
-    btnIcon: '#afb8c1',
-    btnHoverIcon: '#f6f8fa',
-    btnHoverBg: 'rgba(255,255,255,0.125)',
-    inputText: '#eaeef2',
-    inputPlaceholderText: '#8c959f',
-    inputFocusText: '#8c959f',
-    inputBg: '#32383f',
-    inputShadow: 'none',
-    donutError: '#fa4549',
-    donutPending: '#bf8700',
-    donutSuccess: '#1f883d',
-    donutNeutral: '#afb8c1',
-    dropdownText: '#afb8c1',
-    dropdownBg: '#32383f',
-    dropdownBorder: '#424a53',
-    dropdownShadow: 'rgba(31,35,40,0.3)',
-    dropdownHoverText: '#f6f8fa',
-    dropdownHoverBg: '#424a53',
-    dropdownBtnHoverText: '#f6f8fa',
-    dropdownBtnHoverBg: '#32383f',
-    scrollbarThumbBg: '#57606a',
-    headerLabelText: '#d0d7de',
-    headerLabelOpenText: '#f6f8fa',
-    headerBorder: '#32383f',
-    headerIcon: '#8c959f',
-    lineText: '#d0d7de',
-    lineNumText: 'rgba(140,149,159,0.75)',
-    lineTimestampText: '#8c959f',
-    lineHoverBg: '#32383f',
-    lineSelectedBg: 'rgba(33,139,255,0.15)',
-    lineSelectedNumText: '#54aeff',
-    lineDtFmText: '#24292f',
-    lineDtFmBg: '#9a6700',
-    gateBg: 'rgba(125,78,0,0.15)',
-    gateText: '#d0d7de',
-    gateWaitingText: '#d4a72c',
-    stepHeaderOpenBg: '#32383f',
-    stepErrorText: '#ff8182',
-    stepWarningText: '#d4a72c',
-    loglineText: '#8c959f',
-    loglineNumText: 'rgba(140,149,159,0.75)',
-    loglineDebugText: '#c297ff',
-    loglineErrorText: '#d0d7de',
-    loglineErrorNumText: '#ff8182',
-    loglineErrorBg: 'rgba(164,14,38,0.15)',
-    loglineWarningText: '#d0d7de',
-    loglineWarningNumText: '#d4a72c',
-    loglineWarningBg: 'rgba(125,78,0,0.15)',
-    loglineCommandText: '#54aeff',
-    loglineSectionText: '#4ac26b',
+    bg: 'var(--color-checks-bg, #24292f)',
+    runBorderWidth: 'var(--color-checks-run-border-width, 0px)',
+    containerBorderWidth: 'var(--color-checks-container-border-width, 0px)',
+    textPrimary: 'var(--color-checks-text-primary, #f6f8fa)',
+    textSecondary: 'var(--color-checks-text-secondary, #8c959f)',
+    textLink: 'var(--color-checks-text-link, #54aeff)',
+    btnIcon: 'var(--color-checks-btn-icon, #afb8c1)',
+    btnHoverIcon: 'var(--color-checks-btn-hover-icon, #f6f8fa)',
+    btnHoverBg: 'var(--color-checks-btn-hover-bg, rgba(255,255,255,0.125))',
+    inputText: 'var(--color-checks-input-text, #eaeef2)',
+    inputPlaceholderText: 'var(--color-checks-input-placeholder-text, #8c959f)',
+    inputFocusText: 'var(--color-checks-input-focus-text, #8c959f)',
+    inputBg: 'var(--color-checks-input-bg, #32383f)',
+    inputShadow: 'var(--color-checks-input-shadow, none)',
+    donutError: 'var(--color-checks-donut-error, #fa4549)',
+    donutPending: 'var(--color-checks-donut-pending, #bf8700)',
+    donutSuccess: 'var(--color-checks-donut-success, #1f883d)',
+    donutNeutral: 'var(--color-checks-donut-neutral, #afb8c1)',
+    dropdownText: 'var(--color-checks-dropdown-text, #afb8c1)',
+    dropdownBg: 'var(--color-checks-dropdown-bg, #32383f)',
+    dropdownBorder: 'var(--color-checks-dropdown-border, #424a53)',
+    dropdownShadow: 'var(--color-checks-dropdown-shadow, rgba(31,35,40,0.3))',
+    dropdownHoverText: 'var(--color-checks-dropdown-hover-text, #f6f8fa)',
+    dropdownHoverBg: 'var(--color-checks-dropdown-hover-bg, #424a53)',
+    dropdownBtnHoverText: 'var(--color-checks-dropdown-btn-hover-text, #f6f8fa)',
+    dropdownBtnHoverBg: 'var(--color-checks-dropdown-btn-hover-bg, #32383f)',
+    scrollbarThumbBg: 'var(--color-checks-scrollbar-thumb-bg, #57606a)',
+    headerLabelText: 'var(--color-checks-header-label-text, #d0d7de)',
+    headerLabelOpenText: 'var(--color-checks-header-label-open-text, #f6f8fa)',
+    headerBorder: 'var(--color-checks-header-border, #32383f)',
+    headerIcon: 'var(--color-checks-header-icon, #8c959f)',
+    lineText: 'var(--color-checks-line-text, #d0d7de)',
+    lineNumText: 'var(--color-checks-line-num-text, rgba(140,149,159,0.75))',
+    lineTimestampText: 'var(--color-checks-line-timestamp-text, #8c959f)',
+    lineHoverBg: 'var(--color-checks-line-hover-bg, #32383f)',
+    lineSelectedBg: 'var(--color-checks-line-selected-bg, rgba(33,139,255,0.15))',
+    lineSelectedNumText: 'var(--color-checks-line-selected-num-text, #54aeff)',
+    lineDtFmText: 'var(--color-checks-line-dt-fm-text, #24292f)',
+    lineDtFmBg: 'var(--color-checks-line-dt-fm-bg, #9a6700)',
+    gateBg: 'var(--color-checks-gate-bg, rgba(125,78,0,0.15))',
+    gateText: 'var(--color-checks-gate-text, #d0d7de)',
+    gateWaitingText: 'var(--color-checks-gate-waiting-text, #d4a72c)',
+    stepHeaderOpenBg: 'var(--color-checks-step-header-open-bg, #32383f)',
+    stepErrorText: 'var(--color-checks-step-error-text, #ff8182)',
+    stepWarningText: 'var(--color-checks-step-warning-text, #d4a72c)',
+    loglineText: 'var(--color-checks-logline-text, #8c959f)',
+    loglineNumText: 'var(--color-checks-logline-num-text, rgba(140,149,159,0.75))',
+    loglineDebugText: 'var(--color-checks-logline-debug-text, #c297ff)',
+    loglineErrorText: 'var(--color-checks-logline-error-text, #d0d7de)',
+    loglineErrorNumText: 'var(--color-checks-logline-error-num-text, #ff8182)',
+    loglineErrorBg: 'var(--color-checks-logline-error-bg, rgba(164,14,38,0.15))',
+    loglineWarningText: 'var(--color-checks-logline-warning-text, #d0d7de)',
+    loglineWarningNumText: 'var(--color-checks-logline-warning-num-text, #d4a72c)',
+    loglineWarningBg: 'var(--color-checks-logline-warning-bg, rgba(125,78,0,0.15))',
+    loglineCommandText: 'var(--color-checks-logline-command-text, #54aeff)',
+    loglineSectionText: 'var(--color-checks-logline-section-text, #4ac26b)',
     ansi: {
-      black: '#24292f',
-      blackBright: '#32383f',
-      white: '#d0d7de',
-      whiteBright: '#d0d7de',
-      gray: '#8c959f',
-      red: '#ff8182',
-      redBright: '#ffaba8',
-      green: '#4ac26b',
-      greenBright: '#6fdd8b',
-      yellow: '#d4a72c',
-      yellowBright: '#eac54f',
-      blue: '#54aeff',
-      blueBright: '#80ccff',
-      magenta: '#c297ff',
-      magentaBright: '#d8b9ff',
-      cyan: '#76e3ea',
-      cyanBright: '#b3f0ff',
+      black: 'var(--color-checks-ansi-black, #24292f)',
+      blackBright: 'var(--color-checks-ansi-black-bright, #32383f)',
+      white: 'var(--color-checks-ansi-white, #d0d7de)',
+      whiteBright: 'var(--color-checks-ansi-white-bright, #d0d7de)',
+      gray: 'var(--color-checks-ansi-gray, #8c959f)',
+      red: 'var(--color-checks-ansi-red, #ff8182)',
+      redBright: 'var(--color-checks-ansi-red-bright, #ffaba8)',
+      green: 'var(--color-checks-ansi-green, #4ac26b)',
+      greenBright: 'var(--color-checks-ansi-green-bright, #6fdd8b)',
+      yellow: 'var(--color-checks-ansi-yellow, #d4a72c)',
+      yellowBright: 'var(--color-checks-ansi-yellow-bright, #eac54f)',
+      blue: 'var(--color-checks-ansi-blue, #54aeff)',
+      blueBright: 'var(--color-checks-ansi-blue-bright, #80ccff)',
+      magenta: 'var(--color-checks-ansi-magenta, #c297ff)',
+      magentaBright: 'var(--color-checks-ansi-magenta-bright, #d8b9ff)',
+      cyan: 'var(--color-checks-ansi-cyan, #76e3ea)',
+      cyanBright: 'var(--color-checks-ansi-cyan-bright, #b3f0ff)',
     },
   },
   project: {
-    headerBg: '#24292f',
-    sidebarBg: '#ffffff',
-    gradientIn: '#ffffff',
-    gradientOut: 'rgba(255,255,255,0)',
+    headerBg: 'var(--color-project-header-bg, #24292f)',
+    sidebarBg: 'var(--color-project-sidebar-bg, #ffffff)',
+    gradientIn: 'var(--color-project-gradient-in, #ffffff)',
+    gradientOut: 'var(--color-project-gradient-out, rgba(255,255,255,0))',
   },
   mktg: {
     btn: {
-      bg: '#1b1f23',
+      bg: 'var(--color-mktg-btn-bg, #1b1f23))',
       shadow: {
-        outline: 'rgb(0 0 0 / 15%) 0 0 0 1px inset',
-        focus: 'rgb(0 0 0 / 15%) 0 0 0 4px',
+        outline: 'var(--color-mktg-btn-shadow-outline, rgb(0 0 0 / 15%) 0 0 0 1px inset))',
+        focus: 'var(--color-mktg-btn-shadow-focus, rgb(0 0 0 / 15%) 0 0 0 4px))',
         hover:
-          '0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02)',
-        hoverMuted: 'rgb(0 0 0 / 70%) 0 0 0 2px inset',
+          'var(--color-mktg-btn-shadow-hover, 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02)))',
+        hoverMuted: 'var(--color-mktg-btn-shadow-hover-muted, rgb(0 0 0 / 70%) 0 0 0 2px inset))',
       },
     },
   },
   control: {
     borderColor: {
-      emphasis: '#858F99',
+      emphasis: 'var(var(--color-control-border-color-emphasis, #858F99)',
     },
   },
   avatar: {
-    bg: '#ffffff',
-    border: 'rgba(31,35,40,0.15)',
-    stackFade: '#afb8c1',
-    stackFadeMore: '#d0d7de',
-    childShadow: '0 0 0 2px rgba(255,255,255,0.8)',
+    bg: 'var(--avatar-bgColor, var(--color-avatar-bg, #ffffff))',
+    border: 'var(--avatar-borderColor, var(--color-avatar-border, rgba(31,35,40,0.15)))',
+    stackFade: 'var(--avatarStack-fade-bgColor-default, var(--color-avatar-stack-fade, #afb8c1))',
+    stackFadeMore: 'var(--avatarStack-fade-bgColor-muted, var(--color-avatar-stack-fade-more, #d0d7de))',
+    childShadow: 'var(--avatar-shadow, var(--color-avatar-child-shadow, 0 0 0 2px rgba(255,255,255,0.8)))',
   },
   topicTag: {
-    border: 'rgba(0,0,0,0)',
+    border: 'var(--topicTag-borderColor, var(--color-topic-tag-border, transparent))',
   },
   counter: {
-    border: 'rgba(0,0,0,0)',
+    border: 'var(--counter-borderColor, var(--color-counter-border, transparent))',
   },
   selectMenu: {
-    backdropBorder: 'rgba(0,0,0,0)',
-    tapHighlight: 'rgba(175,184,193,0.5)',
-    tapFocusBg: '#b6e3ff',
+    backdropBorder: 'var(--selectMenu-borderColor, var(--color-select-menu-backdrop-border, transparent))',
+    tapHighlight: 'var(--control-bgColor-active, var(--color-select-menu-tap-highlight, rgba(175,184,193,0.5)))',
+    tapFocusBg: 'var(--selectMenu-bgColor-active, var(--color-select-menu-tap-focus-bg, #b6e3ff))',
   },
   overlay: {
-    shadow: '0 1px 3px rgba(31,35,40,0.12), 0 8px 24px rgba(66,74,83,0.12)',
-    backdrop: 'rgba(140,149,159,0.2)',
+    shadow:
+      'var(--shadow-floating-small, var(--color-overlay-shadow, 0 1px 3px rgba(31,35,40,0.12), 0 8px 24px rgba(66,74,83,0.12)))',
+    backdrop: 'var(--overlay-backdrop-bgColor, var(--color-overlay-backdrop, rgba(140,149,159,0.2)))',
   },
   header: {
-    text: 'rgba(255,255,255,0.7)',
-    bg: '#24292f',
-    divider: '#57606a',
-    logo: '#ffffff',
+    text: 'var(--header-fgColor-default, var(--color-header-text, rgba(255,255,255,0.7)))',
+    bg: 'var(--header-bgColor, var(--color-header-bg, #24292f))',
+    divider: 'var(--header-borderColor-divider, var(--color-header-divider, #57606a))',
+    logo: 'var(--header-fgColor-logo, var(--color-header-logo, #ffffff))',
   },
   headerSearch: {
-    bg: '#24292f',
-    border: '#57606a',
+    bg: 'var(--headerSearch-bgColor, var(--color-header-search-bg, #24292f))',
+    border: 'var(--headerSearch-borderColor, var(--color-header-search-border, #57606a))',
   },
   sidenav: {
-    selectedBg: '#ffffff',
+    selectedBg: 'var(--sideNav-bgColor-selected, var(--color-sidenav-selected-bg, #ffffff))',
   },
   menu: {
-    bgActive: 'rgba(0,0,0,0)',
+    bgActive: 'var(--menu-bgColor-active, var(--color-menu-bg-active, transparent))',
   },
   input: {
-    disabledBg: 'rgba(175,184,193,0.2)',
+    disabledBg: 'var(--control-bgColor-disabled, var(--color-input-disabled-bg, rgba(175,184,193,0.2)))',
   },
   timeline: {
-    badgeBg: '#eaeef2',
+    badgeBg: 'var(--timelineBadge-bgColor, var(--color-timeline-badge-bg, #eaeef2))',
   },
   ansi: {
-    black: '#24292f',
-    blackBright: '#57606a',
-    white: '#6e7781',
-    whiteBright: '#8c959f',
-    gray: '#6e7781',
-    red: '#cf222e',
-    redBright: '#a40e26',
-    green: '#116329',
-    greenBright: '#1a7f37',
-    yellow: '#4d2d00',
-    yellowBright: '#633c01',
-    blue: '#0969da',
-    blueBright: '#218bff',
-    magenta: '#8250df',
-    magentaBright: '#a475f9',
-    cyan: '#1b7c83',
-    cyanBright: '#3192aa',
+    black: 'var(--color-ansi-black, #24292f)',
+    blackBright: 'var(--color-ansi-black-bright, #57606a)',
+    white: 'var(--color-ansi-white, #6e7781)',
+    whiteBright: 'var(--color-ansi-white-bright, #8c959f)',
+    gray: 'var(--color-ansi-gray, #6e7781)',
+    red: 'var(--color-ansi-red, #cf222e)',
+    redBright: 'var(--color-ansi-red-bright, #a40e26)',
+    green: 'var(--color-ansi-green, #116329)',
+    greenBright: 'var(--color-ansi-green-bright, #1a7f37)',
+    yellow: 'var(--color-ansi-yellow, #4d2d00)',
+    yellowBright: 'var(--color-ansi-yellow-bright, #633c01)',
+    blue: 'var(--color-ansi-blue, #0969da)',
+    blueBright: 'var(--color-ansi-blue-bright, #218bff)',
+    magenta: 'var(--color-ansi-magenta, #8250df)',
+    magentaBright: 'var(--color-ansi-magenta-bright, #a475f9)',
+    cyan: 'var(--color-ansi-cyan, #1b7c83)',
+    cyanBright: 'var(--color-ansi-cyan-bright, #3192aa)',
   },
   btn: {
-    text: '#24292f',
-    bg: '#f6f8fa',
-    border: 'rgba(31,35,40,0.15)',
-    shadow: '0 1px 0 rgba(31,35,40,0.04)',
-    insetShadow: 'inset 0 1px 0 rgba(255,255,255,0.25)',
-    hoverBg: '#f3f4f6',
-    hoverBorder: 'rgba(31,35,40,0.15)',
-    activeBg: 'hsla(220,14%,93%,1)',
-    activeBorder: 'rgba(31,35,40,0.15)',
-    selectedBg: 'hsla(220,14%,94%,1)',
-    counterBg: 'rgba(31,35,40,0.08)',
+    text: 'var(--button-default-fgColor-rest, var(--color-btn-text, #24292f))',
+    bg: 'var(--button-default-bgColor-rest, var(--color-btn-bg, #f6f8fa))',
+    border: 'var(--button-default-borderColor-rest, var(--color-btn-border, rgba(31,35,40,0.15)))',
+    shadow: 'var(--button-default-shadow-resting, var(--color-btn-shadow, 0 1px 0 rgba(31,35,40,0.04)))',
+    insetShadow:
+      'var(--button-default-shadow-inset, var(--color-btn-inset-shadow, inset 0 1px 0 rgba(255,255,255,0.25)))',
+    hoverBg: 'var(--button-default-bgColor-hover, var(--color-btn-hover-bg, #f3f4f6))',
+    hoverBorder: 'var(--button-default-borderColor-hover, var(--color-btn-hover-border, rgba(31,35,40,0.15)))',
+    activeBg: 'var(--button-default-bgColor-active, var(--color-btn-active-bg, hsla(220,14%,93%,1)))',
+    activeBorder: 'var(--button-default-borderColor-active, var(--color-btn-active-border, rgba(31,35,40,0.15)))',
+    selectedBg: 'var(--button-default-bgColor-selected, var(--color-btn-selected-bg, hsla(220,14%,94%,1)))',
+    counterBg: 'var(--buttonCounter-default-bgColor-rest, var(--color-btn-counter-bg, rgba(31,35,40,0.08)))',
     primary: {
-      text: '#ffffff',
-      bg: '#1f883d',
-      border: 'rgba(31,35,40,0.15)',
-      shadow: '0 1px 0 rgba(31,35,40,0.1)',
-      insetShadow: 'inset 0 1px 0 rgba(255,255,255,0.03)',
-      hoverBg: '#1a7f37',
-      hoverBorder: 'rgba(31,35,40,0.15)',
-      selectedBg: 'hsla(137,66%,28%,1)',
-      selectedShadow: 'inset 0 1px 0 rgba(0,45,17,0.2)',
-      disabledText: 'rgba(255,255,255,0.8)',
-      disabledBg: '#94d3a2',
-      disabledBorder: 'rgba(31,35,40,0.15)',
-      icon: 'rgba(255,255,255,0.8)',
-      counterBg: 'rgba(0,45,17,0.2)',
+      text: 'var(--button-primary-fgColor-rest, var(--color-btn-primary-text, #ffffff))',
+      bg: 'var(--button-primary-bgColor-rest, var(--color-btn-primary-bg, #1f883d))',
+      border: 'var(--button-primary-borderColor-rest, var(--color-btn-primary-border, rgba(31,35,40,0.15)))',
+      shadow: 'var(--shadow-resting-small, var(--color-btn-primary-shadow, 0 1px 0 rgba(31,35,40,0.1)))',
+      insetShadow:
+        'var(--shadow-highlight, var(--color-btn-primary-inset-shadow, inset 0 1px 0 rgba(255,255,255,0.03)))',
+      hoverBg: 'var(--button-primary-bgColor-hover, var(--color-btn-primary-hover-bg, #1a7f37))',
+      hoverBorder:
+        'var(--button-primary-borderColor-hover, var(--color-btn-primary-hover-border, rgba(31,35,40,0.15)))',
+      selectedBg: 'var(--button-primary-bgColor-active, var(--color-btn-primary-selected-bg, hsla(137,66%,28%,1)))',
+      selectedShadow:
+        'var(--button-primary-shadow-selected, var(--color-btn-primary-selected-shadow, inset 0 1px 0 rgba(0,45,17,0.2)))',
+      disabledText:
+        'var(--button-primary-fgColor-disabled, var(--color-btn-primary-disabled-text, rgba(255,255,255,0.8)))',
+      disabledBg: 'var(--button-primary-bgColor-disabled, var(--color-btn-primary-disabled-bg, #94d3a2))',
+      disabledBorder:
+        'var(--button-primary-borderColor-disabled, var(--color-btn-primary-disabled-border, rgba(31,35,40,0.15)))',
+      icon: 'var(--button-primary-iconColor-rest, var(--color-btn-primary-icon, rgba(255,255,255,0.8)))',
+      counterBg: 'var(--buttonCounter-primary-bgColor-rest, var(--color-btn-primary-counter-bg, rgba(0,45,17,0.2)))',
     },
     outline: {
-      text: '#0969da',
-      hoverText: '#ffffff',
-      hoverBg: '#0969da',
-      hoverBorder: 'rgba(31,35,40,0.15)',
-      hoverShadow: '0 1px 0 rgba(31,35,40,0.1)',
-      hoverInsetShadow: 'inset 0 1px 0 rgba(255,255,255,0.03)',
-      hoverCounterBg: 'rgba(255,255,255,0.2)',
-      selectedText: '#ffffff',
-      selectedBg: 'hsla(212,92%,42%,1)',
-      selectedBorder: 'rgba(31,35,40,0.15)',
-      selectedShadow: 'inset 0 1px 0 rgba(0,33,85,0.2)',
-      disabledText: 'rgba(9,105,218,0.5)',
-      disabledBg: '#f6f8fa',
-      disabledCounterBg: 'rgba(9,105,218,0.05)',
-      counterBg: '#0969da1a',
-      counterFg: '#0550ae',
-      hoverCounterFg: '#ffffff',
-      disabledCounterFg: 'rgba(9,105,218,0.5)',
+      text: 'var(--button-outline-fgColor-rest, var(--color-btn-outline-text, #0969da))',
+      hoverText: 'var(--button-outline-fgColor-hover, var(--color-btn-outline-hover-text, #ffffff))',
+      hoverBg: 'var(--button-outline-bgColor-hover, var(--color-btn-outline-hover-bg, #0969da))',
+      hoverBorder:
+        'var(--button-outline-borderColor-hover, var(--color-btn-outline-hover-border, rgba(31,35,40,0.15)))',
+      hoverShadow: 'var(--shadow-resting-small, var(--color-btn-outline-hover-shadow, 0 1px 0 rgba(31,35,40,0.1)))',
+      hoverInsetShadow:
+        'var(--shadow-highlight, var(--color-btn-outline-hover-inset-shadow, inset 0 1px 0 rgba(255,255,255,0.03)))',
+      hoverCounterBg:
+        'var(--buttonCounter-outline-bgColor-hover, var(--color-btn-outline-hover-counter-bg, rgba(255,255,255,0.2)))',
+      selectedText: 'var(--button-outline-fgColor-active, var(--color-btn-outline-selected-text, #ffffff))',
+      selectedBg: 'var(--button-outline-bgColor-active, var(--color-btn-outline-selected-bg, hsla(212,92%,42%,1)))',
+      selectedBorder:
+        'var(--button-outline-borderColor-active, var(--color-btn-outline-selected-border, rgba(31,35,40,0.15)))',
+      selectedShadow:
+        'var(--button-outline-shadow-selected, var(--color-btn-outline-selected-shadow, inset 0 1px 0 rgba(0,33,85,0.2)))',
+      disabledText:
+        'var(--button-outline-fgColor-disabled, var(--color-btn-outline-disabled-text, rgba(9,105,218,0.5)))',
+      disabledBg: 'var(--button-outline-bgColor-disabled, var(--color-btn-outline-disabled-bg, #f6f8fa))',
+      disabledCounterBg:
+        'var(--buttonCounter-outline-bgColor-disabled, var(--color-btn-outline-disabled-counter-bg, rgba(9,105,218,0.05)))',
+      counterBg: 'var(--buttonCounter-outline-bgColor-rest, var(--color-btn-outline-counter-bg, #0969da1a))',
+      counterFg: 'var(--buttonCounter-outline-fgColor-rest, var(--color-btn-outline-counter-fg, #0550ae))',
+      hoverCounterFg: 'var(--buttonCounter-outline-fgColor-hover, var(--color-btn-outline-hover-counter-fg, #ffffff))',
+      disabledCounterFg:
+        'var(--buttonCounter-outline-fgColor-disabled, var(--color-btn-outline-disabled-counter-fg, rgba(9,105,218,0.5)))',
     },
     danger: {
-      text: '#cf222e',
-      hoverText: '#ffffff',
-      hoverBg: '#a40e26',
-      hoverBorder: 'rgba(31,35,40,0.15)',
-      hoverShadow: '0 1px 0 rgba(31,35,40,0.1)',
-      hoverInsetShadow: 'inset 0 1px 0 rgba(255,255,255,0.03)',
-      hoverCounterBg: 'rgba(255,255,255,0.2)',
-      selectedText: '#ffffff',
-      selectedBg: 'hsla(356,72%,44%,1)',
-      selectedBorder: 'rgba(31,35,40,0.15)',
-      selectedShadow: 'inset 0 1px 0 rgba(76,0,20,0.2)',
-      disabledText: 'rgba(207,34,46,0.5)',
-      disabledBg: '#f6f8fa',
-      disabledCounterBg: 'rgba(207,34,46,0.05)',
-      counterBg: 'rgba(207,34,46,0.1)',
-      icon: '#cf222e',
-      hoverIcon: '#ffffff',
-      counterFg: '#a40e26',
-      hoverCounterFg: '#ffffff',
-      disabledCounterFg: 'rgba(207,34,46,0.5)',
+      text: 'var(--button-danger-fgColor-rest, var(--color-btn-danger-text, #cf222e))',
+      hoverText: 'var(--button-danger-fgColor-hover, var(--color-btn-danger-hover-text, #ffffff))',
+      hoverBg: 'var(--button-danger-bgColor-hover, var(--color-btn-danger-hover-bg, #a40e26))',
+      hoverBorder: 'var(--button-danger-borderColor-hover, var(--color-btn-danger-hover-border, rgba(31,35,40,0.15)))',
+      hoverShadow: 'var(--shadow-resting-small, var(--color-btn-danger-hover-shadow, 0 1px 0 rgba(31,35,40,0.1)))',
+      hoverInsetShadow:
+        'var(--shadow-highlight, var(--color-btn-danger-hover-inset-shadow, inset 0 1px 0 rgba(255,255,255,0.03)))',
+      hoverCounterBg:
+        'var(--buttonCounter-danger-bgColor-hover, var(--color-btn-danger-hover-counter-bg, rgba(255,255,255,0.2)))',
+      selectedText: 'var(--button-danger-fgColor-active, var(--color-btn-danger-selected-text, #ffffff))',
+      selectedBg: 'var(--button-danger-bgColor-active, var(--color-btn-danger-selected-bg, hsla(356,72%,44%,1)))',
+      selectedBorder:
+        'var(--button-danger-borderColor-active, var(--color-btn-danger-selected-border, rgba(31,35,40,0.15)))',
+      selectedShadow:
+        'var(--button-danger-shadow-selected, var(--color-btn-danger-selected-shadow, inset 0 1px 0 rgba(76,0,20,0.2)))',
+      disabledText: 'var(--button-danger-fgColor-disabled, var(--color-btn-danger-disabled-text, rgba(207,34,46,0.5)))',
+      disabledBg: 'var(--button-danger-bgColor-disabled, var(--color-btn-danger-disabled-bg, #f6f8fa))',
+      disabledCounterBg:
+        'var(--buttonCounter-danger-bgColor-disabled, var(--color-btn-danger-disabled-counter-bg, rgba(207,34,46,0.05)))',
+      counterBg: 'var(--buttonCounter-danger-bgColor-rest, var(--color-btn-danger-counter-bg, rgba(207,34,46,0.1)))',
+      icon: 'var(--button-danger-iconColor-rest, var(--color-btn-danger-icon, #cf222e))',
+      hoverIcon: 'var(--button-danger-iconColor-hover, var(--color-btn-danger-hover-icon, #ffffff))',
+      counterFg: 'var(--buttonCounter-danger-fgColor-rest, var(--color-btn-danger-counter-fg, #a40e26))',
+      hoverCounterFg: 'var(--buttonCounter-danger-fgColor-hover, var(--color-btn-danger-hover-counter-fg, #ffffff))',
+      disabledCounterFg:
+        'var(--buttonCounter-danger-fgColor-disabled, var(--color-btn-danger-disabled-counter-fg, rgba(207,34,46,0.5)))',
     },
     inactive: {
-      bg: '#eaeef2',
-      text: '#57606a',
+      bg: 'var(--button-inactive-bgColor-rest, var(--color-btn-inactive-bg, #eaeef2))',
+      text: 'var(--button-inactive-fgColor-rest, var(--color-btn-inactive-text, #57606a))',
     },
   },
   underlinenav: {
-    icon: '#6e7781',
-    borderHover: 'rgba(175,184,193,0.2)',
+    icon: 'var(--underlineNav-iconColor-rest, var(--color-underlinenav-icon, #6e7781))',
+    borderHover: 'var(--underlineNav-borderColor-hover, var(--color-underlinenav-border-hover, rgba(175,184,193,0.2)))',
   },
   actionListItem: {
-    inlineDivider: 'rgba(208,215,222,0.48)',
+    inlineDivider: 'var(--borderColor-muted, var(--color-action-list-item-inline-divider, rgba(208,215,222,0.48)))',
     default: {
-      hoverBg: 'rgba(208,215,222,0.32)',
-      hoverBorder: 'rgba(0,0,0,0)',
-      activeBg: 'rgba(208,215,222,0.48)',
-      activeBorder: 'rgba(0,0,0,0)',
-      selectedBg: 'rgba(208,215,222,0.24)',
+      hoverBg:
+        'var(--control-transparent-bgColor-hover, var(--color-action-list-item-default-hover-bg, rgba(208,215,222,0.32)))',
+      hoverBorder:
+        'var(--control-transparent-borderColor-hover, var(--color-action-list-item-default-hover-border, transparent))',
+      activeBg:
+        'var(--control-transparent-bgColor-active, var(--color-action-list-item-default-active-bg, rgba(208,215,222,0.48)))',
+      activeBorder:
+        'var(--control-transparent-borderColor-active, var(--color-action-list-item-default-active-border, transparent))',
+      selectedBg:
+        'var(--control-transparent-bgColor-selected, var(--color-action-list-item-default-selected-bg, rgba(208,215,222,0.24)))',
     },
     danger: {
-      hoverBg: 'rgba(255,235,233,0.64)',
-      activeBg: '#ffebe9',
-      hoverText: '#d1242f',
+      hoverBg:
+        'var(--control-danger-bgColor-hover, var(--color-action-list-item-default-danger-hover-bg, rgba(255,235,233,0.64)))',
+      activeBg: 'var(--control-danger-bgColor-active, var(--color-action-list-item-default-danger-active-bg, #ffebe9))',
+      hoverText:
+        'var(--control-danger-fgColor-hover, var(--color-action-list-item-default-danger-hover-text, #d1242f))',
     },
   },
   switchTrack: {
-    bg: '#eaeef2',
-    hoverBg: 'hsla(210,24%,90%,1)',
-    activeBg: 'hsla(210,24%,88%,1)',
-    disabledBg: '#8c959f',
-    fg: '#656d76',
-    disabledFg: '#ffffff',
-    border: 'rgba(0,0,0,0)',
+    bg: 'var(--controlTrack-bgColor-rest, var(--color-switch-track-bg, #eaeef2))',
+    hoverBg: 'var(--controlTrack-bgColor-hover, var(--color-switch-track-hover-bg, hsla(210,24%,90%,1)))',
+    activeBg: 'var(--controlTrack-bgColor-active, var(--color-switch-track-active-bg, hsla(210,24%,88%,1)))',
+    disabledBg: 'var(--controlTrack-bgColor-disabled, var(--color-switch-track-disabled-bg, #8c959f))',
+    fg: 'var(--controlTrack-fgColor-rest, var(--color-switch-track-fg, #656d76))',
+    disabledFg: 'var(--controlTrack-fgColor-disabled, var(--color-switch-track-disabled-fg, #ffffff))',
+    border: 'var(--controlTrack-borderColor-rest, var(--color-switch-track-border, transparent))',
     checked: {
-      bg: '#0969da',
-      hoverBg: '#0860CA',
-      activeBg: '#0757BA',
-      fg: '#ffffff',
-      disabledFg: '#ffffff',
-      border: 'rgba(0,0,0,0)',
+      bg: 'var(--control-checked-bgColor-rest, var(--color-switch-track-checked-bg, #0969da))',
+      hoverBg: 'var(--control-checked-bgColor-hover, var(--color-switch-track-checked-hover-bg, #0860CA))',
+      activeBg: 'var(--control-checked-bgColor-active, var(--color-switch-track-checked-active-bg, #0757BA))',
+      fg: 'var(--control-checked-fgColor-rest, var(--color-switch-track-checked-fg, #ffffff))',
+      disabledFg: 'var(--control-checked-fgColor-disabled, var(--color-switch-track-checked-disabled-fg, #ffffff))',
+      border: 'var(--borderColor-transparent, var(--color-switch-track-checked-border, transparent))',
     },
   },
   switchKnob: {
-    bg: '#ffffff',
-    disabledBg: '#f6f8fa',
-    border: '#858F99',
+    bg: 'var(--controlKnob-bgColor-rest, var(--color-switch-knob-bg, #ffffff))',
+    disabledBg: 'var(--controlKnob-bgColor-disabled, var(--color-switch-knob-disabled-bg, #f6f8fa))',
+    border: 'var(--controlKnob-borderColor-rest, var(--color-switch-knob-border, #858F99))',
     checked: {
-      bg: '#ffffff',
-      disabledBg: '#f6f8fa',
-      border: '#0969da',
+      bg: 'var(--controlKnob-bgColor-checked, var(--color-switch-knob-checked-bg, #ffffff))',
+      disabledBg: 'var(--controlKnob-bgColor-disabled, var(--color-switch-knob-checked-disabled-bg, #f6f8fa))',
+      border: 'var(--controlKnob-borderColor-checked, var(--color-switch-knob-checked-border, #0969da))',
     },
   },
   segmentedControl: {
-    bg: '#eaeef2',
+    bg: 'var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg, #eaeef2))',
     button: {
-      bg: '#ffffff',
+      bg: 'var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg, #ffffff))',
       hover: {
-        bg: 'rgba(175,184,193,0.2)',
+        bg: 'var(--controlTrack-bgColor-hover, var(--color-segmented-control-button-hover-bg, rgba(175,184,193,0.2)))',
       },
       active: {
-        bg: 'rgba(175,184,193,0.4)',
+        bg: 'var(--controlTrack-bgColor-active, var(--color-segmented-control-button-hover-active-bg, rgba(175,184,193,0.4)))',
       },
       selected: {
-        border: '#8c959f',
+        border:
+          'var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-hover-active-selected-border, #8c959f))',
       },
     },
   },
   treeViewItem: {
     chevron: {
-      hoverBg: 'rgba(208,215,222,0.32)',
+      hoverBg:
+        'var(--control-transparent-bgColor-hover, var(--color-tree-view-item-chevron-hover-bg, rgba(208,215,222,0.32)))',
     },
     directory: {
-      fill: '#54aeff',
+      fill: 'var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-chevron-directory-fill, #54aeff))',
     },
   },
   fg: {
-    default: '#1F2328',
-    muted: '#656d76',
-    subtle: '#6e7781',
-    onEmphasis: '#ffffff',
+    default: 'var(--fgColor-default, var(--color-fg-default, #1F2328))',
+    muted: 'var(--fgColor-muted, var(--color-fg-muted, #656d76))',
+    subtle: 'var(--fgColor-muted, var(--color-fg-subtle, #6e7781))',
+    onEmphasis: 'var(--fgColor-onEmphasis, var(--color-fg-on-emphasis, #ffffff))',
   },
   canvas: {
-    default: '#ffffff',
-    overlay: '#ffffff',
-    inset: '#f6f8fa',
-    subtle: '#f6f8fa',
+    default: 'var(--bgColor-default, var(--color-canvas-default, #ffffff))',
+    overlay: 'var(--overlay-bgColor, var(--color-canvas-overlay, #ffffff))',
+    inset: 'var(--bgColor-inset, var(--color-canvas-inset, #f6f8fa))',
+    subtle: 'var(--bgColor-muted, var(--color-canvas-subtle, #f6f8fa))',
   },
   border: {
-    default: '#d0d7de',
-    muted: 'hsla(210,18%,87%,1)',
-    subtle: 'rgba(31,35,40,0.15)',
+    default: 'var(--borderColor-default, var(--color-border-default, #d0d7de))',
+    muted: 'var(--borderColor-muted, var(--color-border-muted, hsla(210,18%,87%,1)))',
+    subtle: 'var(--borderColor-muted, var(--color-border-subtle, rgba(31,35,40,0.15)))',
   },
   shadow: {
-    small: '0 1px 0 rgba(31,35,40,0.04)',
-    medium: '0 3px 6px rgba(140,149,159,0.15)',
-    large: '0 8px 24px rgba(140,149,159,0.2)',
-    extraLarge: '0 12px 28px rgba(140,149,159,0.3)',
+    small: 'var(--shadow-resting-small, var(--color-shadow-small, 0 1px 0 rgba(31,35,40,0.04)))',
+    medium: 'var(--shadow-resting-medium, var(--color-shadow-medium, 0 3px 6px rgba(140,149,159,0.15)))',
+    large: 'var(--shadow-floating-large, var(--color-shadow-large, 0 8px 24px rgba(140,149,159,0.2)))',
+    extraLarge: 'var(--shadow-floating-xlarge, var(--color-shadow-extra-large, 0 12px 28px rgba(140,149,159,0.3)))',
   },
   neutral: {
-    emphasisPlus: '#24292f',
-    emphasis: '#6e7781',
-    muted: 'rgba(175,184,193,0.2)',
-    subtle: 'rgba(234,238,242,0.5)',
+    emphasisPlus: 'var(--bgColor-emphasis, var(--color-neutral-emphasis-plus, #24292f))',
+    emphasis: 'var(--bgColor-neutral-emphasis, var(--color-neutral-emphasis, #6e7781))',
+    muted: 'var(--borderColor-neutral-muted, var(--color-neutral-muted, rgba(175,184,193,0.2)))',
+    subtle: 'var(--bgColor-neutral-muted, var(--color-neutral-subtle, rgba(234,238,242,0.5)))',
   },
   accent: {
-    fg: '#0969da',
-    emphasis: '#0969da',
-    muted: 'rgba(84,174,255,0.4)',
-    subtle: '#ddf4ff',
+    fg: 'var(--fgColor-accent, var(--color-accent-fg, #0969da))',
+    emphasis: 'var(--bgColor-accent-emphasis, var(--color-accent-emphasis, #0969da))',
+    muted: 'var(--borderColor-accent-muted, var(--color-accent-muted, rgba(84,174,255,0.4)))',
+    subtle: 'var(--bgColor-accent-muted, var(--color-accent-subtle, #ddf4ff))',
   },
   success: {
-    fg: '#1a7f37',
-    emphasis: '#1f883d',
-    muted: 'rgba(74,194,107,0.4)',
-    subtle: '#dafbe1',
+    fg: 'var(--fgColor-success, var(--color-success-fg, #1a7f37))',
+    emphasis: 'var(--bgColor-success-emphasis, var(--color-success-emphasis, #1f883d))',
+    muted: 'var(--borderColor-success-muted, var(--color-success-muted, rgba(74,194,107,0.4)))',
+    subtle: 'var(--bgColor-success-muted, var(--color-success-subtle, #dafbe1))',
   },
   attention: {
-    fg: '#9a6700',
-    emphasis: '#9a6700',
-    muted: 'rgba(212,167,44,0.4)',
-    subtle: '#fff8c5',
+    fg: 'var(--fgColor-attention, var(--color-attention-fg, #9a6700))',
+    emphasis: 'var(--bgColor-attention-emphasis, var(--color-attention-emphasis, #9a6700))',
+    muted: 'var(--borderColor-attention-muted, var(--color-attention-muted, rgba(212,167,44,0.4)))',
+    subtle: 'var(--bgColor-attention-muted, var(--color-attention-subtle, #fff8c5))',
   },
   severe: {
-    fg: '#bc4c00',
-    emphasis: '#bc4c00',
-    muted: 'rgba(251,143,68,0.4)',
-    subtle: '#fff1e5',
+    fg: 'var(--fgColor-severe, var(--color-severe-fg, #bc4c00))',
+    emphasis: 'var(--bgColor-severe-emphasis, var(--color-severe-emphasis, #bc4c00))',
+    muted: 'var(--borderColor-severe-muted, var(--color-severe-muted, rgba(251,143,68,0.4)))',
+    subtle: 'var(--bgColor-severe-muted, var(--color-severe-subtle, #fff1e5))',
   },
   danger: {
-    fg: '#d1242f',
-    emphasis: '#cf222e',
-    muted: 'rgba(255,129,130,0.4)',
-    subtle: '#ffebe9',
+    fg: 'var(--fgColor-danger, var(--color-danger-fg, #d1242f))',
+    emphasis: 'var(--borderColor-danger-emphasis, var(--color-danger-emphasis, #cf222e))',
+    muted: 'var(--borderColor-danger-muted, var(--color-danger-muted, rgba(255,129,130,0.4)))',
+    subtle: 'var(--bgColor-danger-muted, var(--color-danger-subtle, #ffebe9))',
   },
   open: {
-    fg: '#1a7f37',
-    emphasis: '#1f883d',
-    muted: 'rgba(74,194,107,0.4)',
-    subtle: '#dafbe1',
+    fg: 'var(--fgColor-open, var(--color-open-fg, #1a7f37))',
+    emphasis: 'var(--bgColor-open-emphasis, var(--color-open-emphasis, #1f883d))',
+    muted: 'var(--borderColor-open-muted, var(--color-open-muted, rgba(74,194,107,0.4)))',
+    subtle: 'var(--bgColor-open-muted, var(--color-open-subtle, #dafbe1))',
   },
   closed: {
-    fg: '#d1242f',
-    emphasis: '#cf222e',
-    muted: 'rgba(255,129,130,0.4)',
-    subtle: '#ffebe9',
+    fg: 'var(--fgColor-closed, var(--color-closed-fg, #d1242f))',
+    emphasis: 'var(--bgColor-closed-emphasis, var(--color-closed-emphasis, #cf222e))',
+    muted: 'var(--borderColor-closed-muted, var(--color-closed-muted, rgba(255,129,130,0.4)))',
+    subtle: 'var(--bgColor-closed-muted, var(--color-closed-subtle, #ffebe9))',
   },
   done: {
-    fg: '#8250df',
-    emphasis: '#8250df',
-    muted: 'rgba(194,151,255,0.4)',
-    subtle: '#fbefff',
+    fg: 'var(--fgColor-done, var(--color-done-fg, #8250df))',
+    emphasis: 'var(--bgColor-done-emphasis, var(--color-done-emphasis, #8250df))',
+    muted: 'var(--borderColor-done-muted, var(--color-done-muted, rgba(194,151,255,0.4)))',
+    subtle: 'var(--bgColor-done-muted, var(--color-done-subtle, #fbefff))',
   },
   sponsors: {
-    fg: '#bf3989',
-    emphasis: '#bf3989',
-    muted: 'rgba(255,128,200,0.4)',
-    subtle: '#ffeff7',
+    fg: 'var(--fgColor-sponsors, var(--color-sponsors-fg, #bf3989))',
+    emphasis: 'var(--bgColor-sponsors-emphasis, var(--color-sponsors-emphasis, #bf3989))',
+    muted: 'var(--borderColor-sponsors-muted, var(--color-sponsors-muted, rgba(255,128,200,0.4)))',
+    subtle: 'var(--bgColor-sponsors-muted, var(--color-sponsors-subtle, #ffeff7))',
   },
   primer: {
     fg: {
-      disabled: '#8c959f',
+      disabled: 'var(--fgColor-disabled, var(--color-primer-fg-disabled, #8c959f))',
     },
     canvas: {
-      backdrop: 'rgba(31,35,40,0.5)',
-      sticky: 'rgba(255,255,255,0.95)',
+      backdrop: 'var(--overlay-backdrop-bgColor, var(--color-primer-fg-canvas-backdrop, rgba(31,35,40,0.5)))',
+      sticky: 'var(--color-primer-canvas-sticky, rgba(255,255,255,0.95))',
     },
     border: {
-      active: '#fd8c73',
-      contrast: 'rgba(31,35,40,0.1)',
+      active: 'var(--underlineNav-borderColor-active, var(--color-primer-border-active, #fd8c73))',
+      contrast: 'var(--borderColor-muted, var(--color-primer-border-contrast, rgba(31,35,40,0.1)))',
     },
     shadow: {
-      highlight: 'inset 0 1px 0 rgba(255,255,255,0.25)',
-      inset: 'inset 0 1px 0 rgba(208,215,222,0.2)',
+      highlight: 'var(--shadow-highlight, var(--color-primer-shadow-highlight, inset 0 1px 0 rgba(255,255,255,0.25)))',
+      inset: 'var(--shadow-inset, var(--color-primer-shadow-inset, inset 0 1px 0 rgba(208,215,222,0.2)))',
     },
   },
   scale: {
diff --git a/src/legacy-theme/ts/colors/light_colorblind.ts b/src/legacy-theme/ts/colors/light_colorblind.ts
index 26009061b46..c04aee97f46 100644
--- a/src/legacy-theme/ts/colors/light_colorblind.ts
+++ b/src/legacy-theme/ts/colors/light_colorblind.ts
@@ -1,463 +1,496 @@
 const colors = {
-  canvasDefaultTransparent: 'rgba(255,255,255,0)',
-  pageHeaderBg: '#f6f8fa',
+  canvasDefaultTransparent: 'var(--bgColor-transparent, var(--color-canvas-default-transparent, rgba(255,255,255,0)))',
+  pageHeaderBg: 'var(--page-header-bgColor, var(--color-page-header-bg, #f6f8fa))',
   marketingIcon: {
-    primary: '#218bff',
-    secondary: '#54aeff',
+    primary: 'var(--color-marketing-icon-primary, #218bff)',
+    secondary: 'var(--color-marketing-icon-secondary, #54aeff)',
   },
   diffBlob: {
     addition: {
-      numText: '#24292f',
-      fg: '#24292f',
+      numText: 'var(--diffBlob-addition-fgColor-num, var(--color-diff-blob-addition-num-text, #24292f))',
+      fg: 'var(--diffBlob-addition-fgColor-text, var(--color-diff-blob-addition-fg, #24292f))',
       numBg: 'rgba(84,174,255,0.4)',
       lineBg: 'rgba(221,244,255,0.5)',
       wordBg: 'rgba(84,174,255,0.4)',
     },
     deletion: {
-      numText: '#24292f',
-      fg: '#24292f',
+      numText: 'var(--diffBlob-deletion-fgColor-num, var(--color-diff-blob-deletion-num-text, #24292f))',
+      fg: 'var(--diffBlob-deletion-fgColor-text, var(--color-diff-blob-deletion-fg, #24292f))',
       numBg: 'rgba(247,153,57,0.4)',
       lineBg: 'rgba(255,245,232,0.5)',
       wordBg: 'rgba(255,188,109,0.5)',
     },
     hunk: {
-      numBg: 'rgba(84,174,255,0.4)',
+      numBg: 'var(--diffBlob-hunk-bgColor-num, var(--color-diff-blob-hunk-num-bg, rgba(84,174,255,0.4)))',
     },
     expander: {
-      icon: '#57606a',
+      icon: 'var(--diffBlob-expander-iconColor, var(--color-diff-blob-expander-icon, #57606a))',
     },
-    selectedLineHighlightMixBlendMode: 'multiply',
+    selectedLineHighlightMixBlendMode: 'var(--color-diff-blob-selected-line-highlight-mix-blend-mode, multiply)',
   },
   diffstat: {
-    deletionBorder: 'rgba(27,31,36,0.15)',
-    additionBorder: 'rgba(27,31,36,0.15)',
-    additionBg: '#0969da',
+    deletionBorder: 'var(--color-diffstat-deletion-border, rgba(27,31,36,0.15))',
+    additionBorder: 'var(--color-diffstat-addition-border, rgba(27,31,36,0.15))',
+    additionBg: 'var(undefined, var(--color-diffstat-addition-bg, #0969da))',
   },
   searchKeyword: {
-    hl: '#fff8c5',
+    hl: 'var(--highlight-neutral-bgColor, var(--color-search-keyword-hl, #fff8c5))',
   },
   prettylights: {
     syntax: {
-      comment: '#6e7781',
-      constant: '#0550ae',
-      entity: '#6639ba',
-      storageModifierImport: '#24292f',
-      entityTag: '#0550ae',
-      keyword: '#b35900',
-      string: '#0a3069',
-      variable: '#8a4600',
-      brackethighlighterUnmatched: '#6f3800',
-      invalidIllegalText: '#f6f8fa',
-      invalidIllegalBg: '#6f3800',
-      carriageReturnText: '#f6f8fa',
-      carriageReturnBg: '#b35900',
-      stringRegexp: '#0550ae',
-      markupList: '#3b2300',
-      markupHeading: '#0550ae',
-      markupItalic: '#24292f',
-      markupBold: '#24292f',
-      markupDeletedText: '#6f3800',
-      markupDeletedBg: '#fff5e8',
-      markupInsertedText: '#0550ae',
-      markupInsertedBg: '#ddf4ff',
-      markupChangedText: '#8a4600',
-      markupChangedBg: '#ffddb0',
-      markupIgnoredText: '#eaeef2',
-      markupIgnoredBg: '#0550ae',
-      metaDiffRange: '#8250df',
-      brackethighlighterAngle: '#57606a',
-      sublimelinterGutterMark: '#8c959f',
-      constantOtherReferenceLink: '#0a3069',
+      comment: 'var(--color-prettylights-syntax-comment, #57606a)',
+      constant: 'var(--color-prettylights-syntax-constant, #0550ae)',
+      entity: 'var(--color-prettylights-syntax-entity, #6639ba)',
+      storageModifierImport: 'var(--color-prettylights-syntax-storage-modifier-import, #24292f)',
+      entityTag: 'var(--color-prettylights-syntax-entity-tag, #0550ae)',
+      keyword: 'var(--color-prettylights-syntax-keyword, #b35900)',
+      string: 'var(--color-prettylights-syntax-string, #0a3069)',
+      variable: 'var(--color-prettylights-syntax-variable, #8a4600)',
+      brackethighlighterUnmatched: 'var(--color-prettylights-syntax-brackethighlighter-unmatched, #6f3800)',
+      invalidIllegalText: 'var(--color-prettylights-syntax-invalid-illegal-text, #f6f8fa)',
+      invalidIllegalBg: 'var(--color-prettylights-syntax-invalid-illegal-bg, #6f3800)',
+      carriageReturnText: 'var(--color-prettylights-syntax-carriage-return-text, #f6f8fa)',
+      carriageReturnBg: 'var(--color-prettylights-syntax-carriage-return-bg, #b35900)',
+      stringRegexp: 'var(--color-prettylights-syntax-string-regexp, #0550ae)',
+      markupList: 'var(--color-prettylights-syntax-markup-list, #3b2300)',
+      markupHeading: 'var(--color-prettylights-syntax-markup-heading, #0550ae)',
+      markupItalic: 'var(--color-prettylights-syntax-markup-italic, #24292f)',
+      markupBold: 'var(--color-prettylights-syntax-markup-bold, #24292f)',
+      markupDeletedText: 'var(--color-prettylights-syntax-markup-deleted-text, #6f3800)',
+      markupDeletedBg: 'var(--color-prettylights-syntax-markup-deleted-bg, #fff5e8)',
+      markupInsertedText: 'var(--color-prettylights-syntax-markup-inserted-text, #0550ae)',
+      markupInsertedBg: 'var(--color-prettylights-syntax-markup-inserted-bg, #ddf4ff)',
+      markupChangedText: 'var(--color-prettylights-syntax-markup-changed-text, #8a4600)',
+      markupChangedBg: 'var(--color-prettylights-syntax-markup-changed-bg, #ffddb0)',
+      markupIgnoredText: 'var(--color-prettylights-syntax-markup-ignored-text, #eaeef2)',
+      markupIgnoredBg: 'var(--color-prettylights-syntax-markup-ignored-bg, #0550ae)',
+      metaDiffRange: 'var(--color-prettylights-syntax-meta-diff-range, #8250df)',
+      brackethighlighterAngle: 'var(--color-prettylights-syntax-brackethighlighter-angle, #57606a)',
+      sublimelinterGutterMark: 'var(--color-prettylights-syntax-sublimelinter-gutter-mark, #8c959f)',
+      constantOtherReferenceLink: 'var(--color-prettylights-syntax-constant-other-reference-link, #0a3069)',
     },
   },
   codemirror: {
-    text: '#24292f',
-    bg: '#ffffff',
-    guttersBg: '#ffffff',
-    guttermarkerText: '#ffffff',
-    guttermarkerSubtleText: '#6e7781',
-    linenumberText: '#57606a',
-    cursor: '#24292f',
-    selectionBg: 'rgba(84,174,255,0.4)',
-    activelineBg: 'rgba(234,238,242,0.5)',
-    matchingbracketText: '#24292f',
-    linesBg: '#ffffff',
+    text: 'var(--codeMirror-fgColor, var(--color-codemirror-text, #24292f))',
+    bg: 'var(--codeMirror-bgColor, var(--color-codemirror-bg, #ffffff))',
+    guttersBg: 'var(--codeMirror-gutters-bgColor, var(--color-codemirror-gutters-bg, #ffffff))',
+    guttermarkerText:
+      'var(--codeMirror-gutterMarker-fgColor-default, var(--color-codemirror-guttermarker-text, #ffffff))',
+    guttermarkerSubtleText:
+      'var(--codeMirror-gutterMarker-fgColor-muted, var(--color-codemirror-guttermarker-subtle-text, #6e7781))',
+    linenumberText: 'var(--codeMirror-lineNumber-fgColor, var(--color-codemirror-linenumber-text, #57606a))',
+    cursor: 'var(--codeMirror-cursor-fgColor, var(--color-codemirror-cursor, #24292f))',
+    selectionBg: 'var(--codeMirror-selection-bgColor, var(--color-codemirror-selection-bg, rgba(84,174,255,0.4)))',
+    activelineBg: 'var(--codeMirror-activeline-bgColor, var(--color-codemirror-activeline-bg, rgba(234,238,242,0.5)))',
+    matchingbracketText:
+      'var(--codeMirror-matchingBracket-fgColor, var(--color-codemirror-matchingbracket-text, #24292f))',
+    linesBg: 'var(--codeMirror-lines-bgColor, var(--color-codemirror-lines-bg, #ffffff))',
     syntax: {
-      comment: '#24292f',
-      constant: '#0550ae',
-      entity: '#8250df',
-      keyword: '#b35900',
-      storage: '#b35900',
-      string: '#0a3069',
-      support: '#0550ae',
-      variable: '#8a4600',
+      comment: 'var(--codeMirror-syntax-fgColor-comment, var(--color-codemirror-syntax-comment, #24292f))',
+      constant: 'var(--codeMirror-syntax-fgColor-constant, var(--color-codemirror-syntax-constant, #0550ae))',
+      entity: 'var(--codeMirror-syntax-fgColor-entity, var(--color-codemirror-syntax-entity, #8250df))',
+      keyword: 'var(--codeMirror-syntax-fgColor-keyword, var(--color-codemirror-syntax-keyword, #b35900))',
+      storage: 'var(--codeMirror-syntax-fgColor-storage, var(--color-codemirror-syntax-storage, #b35900))',
+      string: 'var(--codeMirror-syntax-fgColor-string, var(--color-codemirror-syntax-string, #0a3069))',
+      support: 'var(--codeMirror-syntax-fgColor-support, var(--color-codemirror-syntax-support, #0550ae))',
+      variable: 'var(--codeMirror-syntax-fgColor-variable, var(--color-codemirror-syntax-variable, #8a4600))',
     },
   },
   checks: {
-    bg: '#24292f',
-    runBorderWidth: '0px',
-    containerBorderWidth: '0px',
-    textPrimary: '#f6f8fa',
-    textSecondary: '#8c959f',
-    textLink: '#54aeff',
-    btnIcon: '#afb8c1',
-    btnHoverIcon: '#f6f8fa',
-    btnHoverBg: 'rgba(255,255,255,0.125)',
-    inputText: '#eaeef2',
-    inputPlaceholderText: '#8c959f',
-    inputFocusText: '#8c959f',
-    inputBg: '#32383f',
-    inputShadow: 'none',
-    donutError: '#dd7815',
-    donutPending: '#bf8700',
-    donutSuccess: '#0969da',
-    donutNeutral: '#afb8c1',
-    dropdownText: '#afb8c1',
-    dropdownBg: '#32383f',
-    dropdownBorder: '#424a53',
-    dropdownShadow: 'rgba(27,31,36,0.3)',
-    dropdownHoverText: '#f6f8fa',
-    dropdownHoverBg: '#424a53',
-    dropdownBtnHoverText: '#f6f8fa',
-    dropdownBtnHoverBg: '#32383f',
-    scrollbarThumbBg: '#57606a',
-    headerLabelText: '#d0d7de',
-    headerLabelOpenText: '#f6f8fa',
-    headerBorder: '#32383f',
-    headerIcon: '#8c959f',
-    lineText: '#d0d7de',
-    lineNumText: 'rgba(140,149,159,0.75)',
-    lineTimestampText: '#8c959f',
-    lineHoverBg: '#32383f',
-    lineSelectedBg: 'rgba(33,139,255,0.15)',
-    lineSelectedNumText: '#54aeff',
-    lineDtFmText: '#24292f',
-    lineDtFmBg: '#9a6700',
-    gateBg: 'rgba(125,78,0,0.15)',
-    gateText: '#d0d7de',
-    gateWaitingText: '#d4a72c',
-    stepHeaderOpenBg: '#32383f',
-    stepErrorText: '#f79939',
-    stepWarningText: '#d4a72c',
-    loglineText: '#8c959f',
-    loglineNumText: 'rgba(140,149,159,0.75)',
-    loglineDebugText: '#c297ff',
-    loglineErrorText: '#d0d7de',
-    loglineErrorNumText: '#f79939',
-    loglineErrorBg: 'rgba(138,70,0,0.15)',
-    loglineWarningText: '#d0d7de',
-    loglineWarningNumText: '#d4a72c',
-    loglineWarningBg: 'rgba(125,78,0,0.15)',
-    loglineCommandText: '#54aeff',
-    loglineSectionText: '#54aeff',
+    bg: 'var(--color-checks-bg, #24292f)',
+    runBorderWidth: 'var(--color-checks-run-border-width, 0px)',
+    containerBorderWidth: 'var(--color-checks-container-border-width, 0px)',
+    textPrimary: 'var(--color-checks-text-primary, #f6f8fa)',
+    textSecondary: 'var(--color-checks-text-secondary, #8c959f)',
+    textLink: 'var(--color-checks-text-link, #54aeff)',
+    btnIcon: 'var(--color-checks-btn-icon, #afb8c1)',
+    btnHoverIcon: 'var(--color-checks-btn-hover-icon, #f6f8fa)',
+    btnHoverBg: 'var(--color-checks-btn-hover-bg, rgba(255,255,255,0.125))',
+    inputText: 'var(--color-checks-input-text, #eaeef2)',
+    inputPlaceholderText: 'var(--color-checks-input-placeholder-text, #8c959f)',
+    inputFocusText: 'var(--color-checks-input-focus-text, #8c959f)',
+    inputBg: 'var(--color-checks-input-bg, #32383f)',
+    inputShadow: 'var(--color-checks-input-shadow, none)',
+    donutError: 'var(--color-checks-donut-error, #dd7815)',
+    donutPending: 'var(--color-checks-donut-pending, #bf8700)',
+    donutSuccess: 'var(--color-checks-donut-success, #0969da)',
+    donutNeutral: 'var(--color-checks-donut-neutral, #afb8c1)',
+    dropdownText: 'var(--color-checks-dropdown-text, #afb8c1)',
+    dropdownBg: 'var(--color-checks-dropdown-bg, #32383f)',
+    dropdownBorder: 'var(--color-checks-dropdown-border, #424a53)',
+    dropdownShadow: 'var(--color-checks-dropdown-shadow, rgba(27,31,36,0.3))',
+    dropdownHoverText: 'var(--color-checks-dropdown-hover-text, #f6f8fa)',
+    dropdownHoverBg: 'var(--color-checks-dropdown-hover-bg, #424a53)',
+    dropdownBtnHoverText: 'var(--color-checks-dropdown-btn-hover-text, #f6f8fa)',
+    dropdownBtnHoverBg: 'var(--color-checks-dropdown-btn-hover-bg, #32383f)',
+    scrollbarThumbBg: 'var(--color-checks-scrollbar-thumb-bg, #57606a)',
+    headerLabelText: 'var(--color-checks-header-label-text, #d0d7de)',
+    headerLabelOpenText: 'var(--color-checks-header-label-open-text, #f6f8fa)',
+    headerBorder: 'var(--color-checks-header-border, #32383f)',
+    headerIcon: 'var(--color-checks-header-icon, #8c959f)',
+    lineText: 'var(--color-checks-line-text, #d0d7de)',
+    lineNumText: 'var(--color-checks-line-num-text, rgba(140,149,159,0.75))',
+    lineTimestampText: 'var(--color-checks-line-timestamp-text, #8c959f)',
+    lineHoverBg: 'var(--color-checks-line-hover-bg, #32383f)',
+    lineSelectedBg: 'var(--color-checks-line-selected-bg, rgba(33,139,255,0.15))',
+    lineSelectedNumText: 'var(--color-checks-line-selected-num-text, #54aeff)',
+    lineDtFmText: 'var(--color-checks-line-dt-fm-text, #24292f)',
+    lineDtFmBg: 'var(--color-checks-line-dt-fm-bg, #9a6700)',
+    gateBg: 'var(--color-checks-gate-bg, rgba(125,78,0,0.15))',
+    gateText: 'var(--color-checks-gate-text, #d0d7de)',
+    gateWaitingText: 'var(--color-checks-gate-waiting-text, #d4a72c)',
+    stepHeaderOpenBg: 'var(--color-checks-step-header-open-bg, #32383f)',
+    stepErrorText: 'var(--color-checks-step-error-text, #f79939)',
+    stepWarningText: 'var(--color-checks-step-warning-text, #d4a72c)',
+    loglineText: 'var(--color-checks-logline-text, #8c959f)',
+    loglineNumText: 'var(--color-checks-logline-num-text, rgba(140,149,159,0.75))',
+    loglineDebugText: 'var(--color-checks-logline-debug-text, #c297ff)',
+    loglineErrorText: 'var(--color-checks-logline-error-text, #d0d7de)',
+    loglineErrorNumText: 'var(--color-checks-logline-error-num-text, #f79939)',
+    loglineErrorBg: 'var(--color-checks-logline-error-bg, rgba(138,70,0,0.15))',
+    loglineWarningText: 'var(--color-checks-logline-warning-text, #d0d7de)',
+    loglineWarningNumText: 'var(--color-checks-logline-warning-num-text, #d4a72c)',
+    loglineWarningBg: 'var(--color-checks-logline-warning-bg, rgba(125,78,0,0.15))',
+    loglineCommandText: 'var(--color-checks-logline-command-text, #54aeff)',
+    loglineSectionText: 'var(--color-checks-logline-section-text, #54aeff)',
     ansi: {
-      black: '#24292f',
-      blackBright: '#32383f',
-      white: '#d0d7de',
-      whiteBright: '#d0d7de',
-      gray: '#8c959f',
-      red: '#f79939',
-      redBright: '#ffbc6d',
-      green: '#54aeff',
-      greenBright: '#80ccff',
-      yellow: '#d4a72c',
-      yellowBright: '#eac54f',
-      blue: '#54aeff',
-      blueBright: '#80ccff',
-      magenta: '#c297ff',
-      magentaBright: '#d8b9ff',
-      cyan: '#76e3ea',
-      cyanBright: '#b3f0ff',
+      black: 'var(--color-checks-ansi-black, #24292f)',
+      blackBright: 'var(--color-checks-ansi-black-bright, #32383f)',
+      white: 'var(--color-checks-ansi-white, #d0d7de)',
+      whiteBright: 'var(--color-checks-ansi-white-bright, #d0d7de)',
+      gray: 'var(--color-checks-ansi-gray, #8c959f)',
+      red: 'var(--color-checks-ansi-red, #f79939)',
+      redBright: 'var(--color-checks-ansi-red-bright, #ffbc6d)',
+      green: 'var(--color-checks-ansi-green, #54aeff)',
+      greenBright: 'var(--color-checks-ansi-green-bright, #80ccff)',
+      yellow: 'var(--color-checks-ansi-yellow, #d4a72c)',
+      yellowBright: 'var(--color-checks-ansi-yellow-bright, #eac54f)',
+      blue: 'var(--color-checks-ansi-blue, #54aeff)',
+      blueBright: 'var(--color-checks-ansi-blue-bright, #80ccff)',
+      magenta: 'var(--color-checks-ansi-magenta, #c297ff)',
+      magentaBright: 'var(--color-checks-ansi-magenta-bright, #d8b9ff)',
+      cyan: 'var(--color-checks-ansi-cyan, #76e3ea)',
+      cyanBright: 'var(--color-checks-ansi-cyan-bright, #b3f0ff)',
     },
   },
   project: {
-    headerBg: '#24292f',
-    sidebarBg: '#ffffff',
-    gradientIn: '#ffffff',
-    gradientOut: 'rgba(255,255,255,0)',
+    headerBg: 'var(--color-project-header-bg, #24292f)',
+    sidebarBg: 'var(--color-project-sidebar-bg, #ffffff)',
+    gradientIn: 'var(--color-project-gradient-in, #ffffff)',
+    gradientOut: 'var(--color-project-gradient-out, rgba(255,255,255,0))',
   },
   mktg: {
     btn: {
-      bg: '#1b1f23',
+      bg: 'var(--color-mktg-btn-bg, #1b1f23))',
       shadow: {
-        outline: 'rgb(0 0 0 / 15%) 0 0 0 1px inset',
-        focus: 'rgb(0 0 0 / 15%) 0 0 0 4px',
+        outline: 'var(--color-mktg-btn-shadow-outline, rgb(0 0 0 / 15%) 0 0 0 1px inset))',
+        focus: 'var(--color-mktg-btn-shadow-focus, rgb(0 0 0 / 15%) 0 0 0 4px))',
         hover:
-          '0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02)',
-        hoverMuted: 'rgb(0 0 0 / 70%) 0 0 0 2px inset',
+          'var(--color-mktg-btn-shadow-hover, 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02)))',
+        hoverMuted: 'var(--color-mktg-btn-shadow-hover-muted, rgb(0 0 0 / 70%) 0 0 0 2px inset))',
       },
     },
   },
   control: {
     borderColor: {
-      emphasis: '#858F99',
+      emphasis: 'var(var(--color-control-border-color-emphasis, #858F99)',
     },
   },
   avatar: {
-    bg: '#ffffff',
-    border: 'rgba(27,31,36,0.15)',
-    stackFade: '#afb8c1',
-    stackFadeMore: '#d0d7de',
-    childShadow: '0 0 0 2px rgba(255,255,255,0.8)',
+    bg: 'var(--avatar-bgColor, var(--color-avatar-bg, #ffffff))',
+    border: 'var(--avatar-borderColor, var(--color-avatar-border, rgba(27,31,36,0.15)))',
+    stackFade: 'var(--avatarStack-fade-bgColor-default, var(--color-avatar-stack-fade, #afb8c1))',
+    stackFadeMore: 'var(--avatarStack-fade-bgColor-muted, var(--color-avatar-stack-fade-more, #d0d7de))',
+    childShadow: 'var(--avatar-shadow, var(--color-avatar-child-shadow, 0 0 0 2px rgba(255,255,255,0.8)))',
   },
   topicTag: {
-    border: 'rgba(0,0,0,0)',
+    border: 'var(--topicTag-borderColor, var(--color-topic-tag-border, transparent))',
   },
   counter: {
-    border: 'rgba(0,0,0,0)',
+    border: 'var(--counter-borderColor, var(--color-counter-border, transparent))',
   },
   selectMenu: {
-    backdropBorder: 'rgba(0,0,0,0)',
-    tapHighlight: 'rgba(175,184,193,0.5)',
-    tapFocusBg: '#b6e3ff',
+    backdropBorder: 'var(--selectMenu-borderColor, var(--color-select-menu-backdrop-border, transparent))',
+    tapHighlight: 'var(--control-bgColor-active, var(--color-select-menu-tap-highlight, rgba(175,184,193,0.5)))',
+    tapFocusBg: 'var(--selectMenu-bgColor-active, var(--color-select-menu-tap-focus-bg, #b6e3ff))',
   },
   overlay: {
-    shadow: '0 1px 3px rgba(27,31,36,0.12), 0 8px 24px rgba(66,74,83,0.12)',
-    backdrop: 'rgba(140,149,159,0.2)',
+    shadow:
+      'var(--shadow-floating-small, var(--color-overlay-shadow, 0 1px 3px rgba(27,31,36,0.12), 0 8px 24px rgba(66,74,83,0.12)))',
+    backdrop: 'var(--overlay-backdrop-bgColor, var(--color-overlay-backdrop, rgba(140,149,159,0.2)))',
   },
   header: {
-    text: 'rgba(255,255,255,0.7)',
-    bg: '#24292f',
-    divider: '#57606a',
-    logo: '#ffffff',
+    text: 'var(--header-fgColor-default, var(--color-header-text, rgba(255,255,255,0.7)))',
+    bg: 'var(--header-bgColor, var(--color-header-bg, #24292f))',
+    divider: 'var(--header-borderColor-divider, var(--color-header-divider, #57606a))',
+    logo: 'var(--header-fgColor-logo, var(--color-header-logo, #ffffff))',
   },
   headerSearch: {
-    bg: '#24292f',
-    border: '#57606a',
+    bg: 'var(--headerSearch-bgColor, var(--color-header-search-bg, #24292f))',
+    border: 'var(--headerSearch-borderColor, var(--color-header-search-border, #57606a))',
   },
   sidenav: {
-    selectedBg: '#ffffff',
+    selectedBg: 'var(--sideNav-bgColor-selected, var(--color-sidenav-selected-bg, #ffffff))',
   },
   menu: {
-    bgActive: 'rgba(0,0,0,0)',
+    bgActive: 'var(--menu-bgColor-active, var(--color-menu-bg-active, transparent))',
   },
   input: {
-    disabledBg: 'rgba(175,184,193,0.2)',
+    disabledBg: 'var(--control-bgColor-disabled, var(--color-input-disabled-bg, rgba(175,184,193,0.2)))',
   },
   timeline: {
-    badgeBg: '#eaeef2',
+    badgeBg: 'var(--timelineBadge-bgColor, var(--color-timeline-badge-bg, #eaeef2))',
   },
   ansi: {
-    black: '#24292f',
-    blackBright: '#57606a',
-    white: '#6e7781',
-    whiteBright: '#8c959f',
-    gray: '#6e7781',
-    red: '#b35900',
-    redBright: '#8a4600',
-    green: '#0550ae',
-    greenBright: '#0969da',
-    yellow: '#4d2d00',
-    yellowBright: '#633c01',
-    blue: '#0969da',
-    blueBright: '#218bff',
-    magenta: '#8250df',
-    magentaBright: '#a475f9',
-    cyan: '#1b7c83',
-    cyanBright: '#3192aa',
+    black: 'var(--color-ansi-black, #24292f)',
+    blackBright: 'var(--color-ansi-black-bright, #57606a)',
+    white: 'var(--color-ansi-white, #6e7781)',
+    whiteBright: 'var(--color-ansi-white-bright, #8c959f)',
+    gray: 'var(--color-ansi-gray, #6e7781)',
+    red: 'var(--color-ansi-red, #b35900)',
+    redBright: 'var(--color-ansi-red-bright, #8a4600)',
+    green: 'var(--color-ansi-green, #0550ae)',
+    greenBright: 'var(--color-ansi-green-bright, #0969da)',
+    yellow: 'var(--color-ansi-yellow, #4d2d00)',
+    yellowBright: 'var(--color-ansi-yellow-bright, #633c01)',
+    blue: 'var(--color-ansi-blue, #0969da)',
+    blueBright: 'var(--color-ansi-blue-bright, #218bff)',
+    magenta: 'var(--color-ansi-magenta, #8250df)',
+    magentaBright: 'var(--color-ansi-magenta-bright, #a475f9)',
+    cyan: 'var(--color-ansi-cyan, #1b7c83)',
+    cyanBright: 'var(--color-ansi-cyan-bright, #3192aa)',
   },
   btn: {
-    text: '#24292f',
-    bg: '#f6f8fa',
-    border: 'rgba(27,31,36,0.15)',
-    shadow: '0 1px 0 rgba(27,31,36,0.04)',
-    insetShadow: 'inset 0 1px 0 rgba(255,255,255,0.25)',
-    hoverBg: '#f3f4f6',
-    hoverBorder: 'rgba(27,31,36,0.15)',
-    activeBg: 'hsla(220,14%,93%,1)',
-    activeBorder: 'rgba(27,31,36,0.15)',
-    selectedBg: 'hsla(220,14%,94%,1)',
-    counterBg: 'rgba(27,31,36,0.08)',
+    text: 'var(--button-default-fgColor-rest, var(--color-btn-text, #24292f))',
+    bg: 'var(--button-default-bgColor-rest, var(--color-btn-bg, #f6f8fa))',
+    border: 'var(--button-default-borderColor-rest, var(--color-btn-border, rgba(27,31,36,0.15)))',
+    shadow: 'var(--button-default-shadow-resting, var(--color-btn-shadow, 0 1px 0 rgba(27,31,36,0.04)))',
+    insetShadow:
+      'var(--button-default-shadow-inset, var(--color-btn-inset-shadow, inset 0 1px 0 rgba(255,255,255,0.25)))',
+    hoverBg: 'var(--button-default-bgColor-hover, var(--color-btn-hover-bg, #f3f4f6))',
+    hoverBorder: 'var(--button-default-borderColor-hover, var(--color-btn-hover-border, rgba(27,31,36,0.15)))',
+    activeBg: 'var(--button-default-bgColor-active, var(--color-btn-active-bg, hsla(220,14%,93%,1)))',
+    activeBorder: 'var(--button-default-borderColor-active, var(--color-btn-active-border, rgba(27,31,36,0.15)))',
+    selectedBg: 'var(--button-default-bgColor-selected, var(--color-btn-selected-bg, hsla(220,14%,94%,1)))',
+    counterBg: 'var(--buttonCounter-default-bgColor-rest, var(--color-btn-counter-bg, rgba(27,31,36,0.08)))',
     primary: {
-      text: '#ffffff',
-      bg: '#0969da',
-      border: 'rgba(27,31,36,0.15)',
-      shadow: '0 1px 0 rgba(27,31,36,0.1)',
-      insetShadow: 'inset 0 1px 0 rgba(255,255,255,0.03)',
+      text: 'var(--button-primary-fgColor-rest, var(--color-btn-primary-text, #ffffff))',
+      bg: 'var(--button-primary-bgColor-rest, var(--color-btn-primary-bg, #0969da))',
+      border: 'var(--button-primary-borderColor-rest, var(--color-btn-primary-border, rgba(27,31,36,0.15)))',
+      shadow: 'var(--shadow-resting-small, var(--color-btn-primary-shadow, 0 1px 0 rgba(27,31,36,0.1)))',
+      insetShadow:
+        'var(--shadow-highlight, var(--color-btn-primary-inset-shadow, inset 0 1px 0 rgba(255,255,255,0.03)))',
       hoverBg: '#0969da',
-      hoverBorder: 'rgba(27,31,36,0.15)',
-      selectedBg: 'hsla(212,92%,43%,1)',
-      selectedShadow: 'inset 0 1px 0 rgba(0,33,85,0.2)',
-      disabledText: 'rgba(255,255,255,0.8)',
+      hoverBorder:
+        'var(--button-primary-borderColor-hover, var(--color-btn-primary-hover-border, rgba(27,31,36,0.15)))',
+      selectedBg: 'var(--button-primary-bgColor-active, var(--color-btn-primary-selected-bg, hsla(212,92%,43%,1)))',
+      selectedShadow:
+        'var(--button-primary-shadow-selected, var(--color-btn-primary-selected-shadow, inset 0 1px 0 rgba(0,33,85,0.2)))',
+      disabledText:
+        'var(--button-primary-fgColor-disabled, var(--color-btn-primary-disabled-text, rgba(255,255,255,0.8)))',
       disabledBg: '#80ccff',
-      disabledBorder: 'rgba(27,31,36,0.15)',
-      icon: 'rgba(255,255,255,0.8)',
-      counterBg: 'rgba(0,33,85,0.2)',
+      disabledBorder:
+        'var(--button-primary-borderColor-disabled, var(--color-btn-primary-disabled-border, rgba(27,31,36,0.15)))',
+      icon: 'var(--button-primary-iconColor-rest, var(--color-btn-primary-icon, rgba(255,255,255,0.8)))',
+      counterBg: 'var(--buttonCounter-primary-bgColor-rest, var(--color-btn-primary-counter-bg, rgba(0,33,85,0.2)))',
     },
     outline: {
-      text: '#0969da',
-      hoverText: '#ffffff',
-      hoverBg: '#0969da',
-      hoverBorder: 'rgba(27,31,36,0.15)',
-      hoverShadow: '0 1px 0 rgba(27,31,36,0.1)',
-      hoverInsetShadow: 'inset 0 1px 0 rgba(255,255,255,0.03)',
-      hoverCounterBg: 'rgba(255,255,255,0.2)',
-      selectedText: '#ffffff',
-      selectedBg: 'hsla(212,92%,42%,1)',
-      selectedBorder: 'rgba(27,31,36,0.15)',
-      selectedShadow: 'inset 0 1px 0 rgba(0,33,85,0.2)',
-      disabledText: 'rgba(9,105,218,0.5)',
-      disabledBg: '#f6f8fa',
-      disabledCounterBg: 'rgba(9,105,218,0.05)',
-      counterBg: '#0969da1a',
-      counterFg: '#0550ae',
-      hoverCounterFg: '#ffffff',
-      disabledCounterFg: 'rgba(9,105,218,0.5)',
+      text: 'var(--button-outline-fgColor-rest, var(--color-btn-outline-text, #0969da))',
+      hoverText: 'var(--button-outline-fgColor-hover, var(--color-btn-outline-hover-text, #ffffff))',
+      hoverBg: 'var(--button-outline-bgColor-hover, var(--color-btn-outline-hover-bg, #0969da))',
+      hoverBorder:
+        'var(--button-outline-borderColor-hover, var(--color-btn-outline-hover-border, rgba(27,31,36,0.15)))',
+      hoverShadow: 'var(--shadow-resting-small, var(--color-btn-outline-hover-shadow, 0 1px 0 rgba(27,31,36,0.1)))',
+      hoverInsetShadow:
+        'var(--shadow-highlight, var(--color-btn-outline-hover-inset-shadow, inset 0 1px 0 rgba(255,255,255,0.03)))',
+      hoverCounterBg:
+        'var(--buttonCounter-outline-bgColor-hover, var(--color-btn-outline-hover-counter-bg, rgba(255,255,255,0.2)))',
+      selectedText: 'var(--button-outline-fgColor-active, var(--color-btn-outline-selected-text, #ffffff))',
+      selectedBg: 'var(--button-outline-bgColor-active, var(--color-btn-outline-selected-bg, hsla(212,92%,42%,1)))',
+      selectedBorder:
+        'var(--button-outline-borderColor-active, var(--color-btn-outline-selected-border, rgba(27,31,36,0.15)))',
+      selectedShadow:
+        'var(--button-outline-shadow-selected, var(--color-btn-outline-selected-shadow, inset 0 1px 0 rgba(0,33,85,0.2)))',
+      disabledText:
+        'var(--button-outline-fgColor-disabled, var(--color-btn-outline-disabled-text, rgba(9,105,218,0.5)))',
+      disabledBg: 'var(--button-outline-bgColor-disabled, var(--color-btn-outline-disabled-bg, #f6f8fa))',
+      disabledCounterBg:
+        'var(--buttonCounter-outline-bgColor-disabled, var(--color-btn-outline-disabled-counter-bg, rgba(9,105,218,0.05)))',
+      counterBg: 'var(--buttonCounter-outline-bgColor-rest, var(--color-btn-outline-counter-bg, #0969da1a))',
+      counterFg: 'var(--buttonCounter-outline-fgColor-rest, var(--color-btn-outline-counter-fg, #0550ae))',
+      hoverCounterFg: 'var(--buttonCounter-outline-fgColor-hover, var(--color-btn-outline-hover-counter-fg, #ffffff))',
+      disabledCounterFg:
+        'var(--buttonCounter-outline-fgColor-disabled, var(--color-btn-outline-disabled-counter-fg, rgba(9,105,218,0.5)))',
     },
     danger: {
-      text: '#b35900',
-      hoverText: '#ffffff',
-      hoverBg: '#8a4600',
-      hoverBorder: 'rgba(27,31,36,0.15)',
-      hoverShadow: '0 1px 0 rgba(27,31,36,0.1)',
-      hoverInsetShadow: 'inset 0 1px 0 rgba(255,255,255,0.03)',
-      hoverCounterBg: 'rgba(255,255,255,0.2)',
-      selectedText: '#ffffff',
-      selectedBg: 'hsla(30,100%,32%,1)',
-      selectedBorder: 'rgba(27,31,36,0.15)',
-      selectedShadow: 'inset 0 1px 0 rgba(65,32,0,0.2)',
-      disabledText: 'rgba(179,89,0,0.5)',
-      disabledBg: '#f6f8fa',
-      disabledCounterBg: 'rgba(179,89,0,0.05)',
-      counterBg: 'rgba(179,89,0,0.1)',
-      icon: '#b35900',
-      hoverIcon: '#ffffff',
-      counterFg: '#8a4600',
-      hoverCounterFg: '#ffffff',
-      disabledCounterFg: 'rgba(179,89,0,0.5)',
+      text: 'var(--button-danger-fgColor-rest, var(--color-btn-danger-text, #b35900))',
+      hoverText: 'var(--button-danger-fgColor-hover, var(--color-btn-danger-hover-text, #ffffff))',
+      hoverBg: 'var(--button-danger-bgColor-hover, var(--color-btn-danger-hover-bg, #8a4600))',
+      hoverBorder: 'var(--button-danger-borderColor-hover, var(--color-btn-danger-hover-border, rgba(27,31,36,0.15)))',
+      hoverShadow: 'var(--shadow-resting-small, var(--color-btn-danger-hover-shadow, 0 1px 0 rgba(27,31,36,0.1)))',
+      hoverInsetShadow:
+        'var(--shadow-highlight, var(--color-btn-danger-hover-inset-shadow, inset 0 1px 0 rgba(255,255,255,0.03)))',
+      hoverCounterBg:
+        'var(--buttonCounter-danger-bgColor-hover, var(--color-btn-danger-hover-counter-bg, rgba(255,255,255,0.2)))',
+      selectedText: 'var(--button-danger-fgColor-active, var(--color-btn-danger-selected-text, #ffffff))',
+      selectedBg: 'var(--button-danger-bgColor-active, var(--color-btn-danger-selected-bg, hsla(30,100%,32%,1)))',
+      selectedBorder:
+        'var(--button-danger-borderColor-active, var(--color-btn-danger-selected-border, rgba(27,31,36,0.15)))',
+      selectedShadow:
+        'var(--button-danger-shadow-selected, var(--color-btn-danger-selected-shadow, inset 0 1px 0 rgba(65,32,0,0.2)))',
+      disabledText: 'var(--button-danger-fgColor-disabled, var(--color-btn-danger-disabled-text, rgba(179,89,0,0.5)))',
+      disabledBg: 'var(--button-danger-bgColor-disabled, var(--color-btn-danger-disabled-bg, #f6f8fa))',
+      disabledCounterBg:
+        'var(--buttonCounter-danger-bgColor-disabled, var(--color-btn-danger-disabled-counter-bg, rgba(179,89,0,0.05)))',
+      counterBg: 'var(--buttonCounter-danger-bgColor-rest, var(--color-btn-danger-counter-bg, rgba(179,89,0,0.1)))',
+      icon: 'var(--button-danger-iconColor-rest, var(--color-btn-danger-icon, #b35900))',
+      hoverIcon: 'var(--button-danger-iconColor-hover, var(--color-btn-danger-hover-icon, #ffffff))',
+      counterFg: 'var(--buttonCounter-danger-fgColor-rest, var(--color-btn-danger-counter-fg, #8a4600))',
+      hoverCounterFg: 'var(--buttonCounter-danger-fgColor-hover, var(--color-btn-danger-hover-counter-fg, #ffffff))',
+      disabledCounterFg:
+        'var(--buttonCounter-danger-fgColor-disabled, var(--color-btn-danger-disabled-counter-fg, rgba(179,89,0,0.5)))',
     },
     inactive: {
-      bg: '#eaeef2',
-      text: '#57606a',
+      bg: 'var(--button-inactive-bgColor-rest, var(--color-btn-inactive-bg, #eaeef2))',
+      text: 'var(--button-inactive-fgColor-rest, var(--color-btn-inactive-text, #57606a))',
     },
   },
   underlinenav: {
-    icon: '#6e7781',
-    borderHover: 'rgba(175,184,193,0.2)',
+    icon: 'var(--underlineNav-iconColor-rest, var(--color-underlinenav-icon, #6e7781))',
+    borderHover: 'var(--underlineNav-borderColor-hover, var(--color-underlinenav-border-hover, rgba(175,184,193,0.2)))',
   },
   actionListItem: {
-    inlineDivider: 'rgba(208,215,222,0.48)',
+    inlineDivider: 'var(--borderColor-muted, var(--color-action-list-item-inline-divider, rgba(208,215,222,0.48)))',
     default: {
-      hoverBg: 'rgba(208,215,222,0.32)',
-      hoverBorder: 'rgba(0,0,0,0)',
-      activeBg: 'rgba(208,215,222,0.48)',
-      activeBorder: 'rgba(0,0,0,0)',
-      selectedBg: 'rgba(208,215,222,0.24)',
+      hoverBg:
+        'var(--control-transparent-bgColor-hover, var(--color-action-list-item-default-hover-bg, rgba(208,215,222,0.32)))',
+      hoverBorder:
+        'var(--control-transparent-borderColor-hover, var(--color-action-list-item-default-hover-border, transparent))',
+      activeBg:
+        'var(--control-transparent-bgColor-active, var(--color-action-list-item-default-active-bg, rgba(208,215,222,0.48)))',
+      activeBorder:
+        'var(--control-transparent-borderColor-active, var(--color-action-list-item-default-active-border, transparent))',
+      selectedBg:
+        'var(--control-transparent-bgColor-selected, var(--color-action-list-item-default-selected-bg, rgba(208,215,222,0.24)))',
     },
     danger: {
-      hoverBg: 'rgba(255,245,232,0.64)',
-      activeBg: '#fff5e8',
-      hoverText: '#b35900',
+      hoverBg:
+        'var(--control-danger-bgColor-hover, var(--color-action-list-item-default-danger-hover-bg, rgba(255,245,232,0.64)))',
+      activeBg: 'var(--control-danger-bgColor-active, var(--color-action-list-item-default-danger-active-bg, #fff5e8))',
+      hoverText:
+        'var(--control-danger-fgColor-hover, var(--color-action-list-item-default-danger-hover-text, #b35900))',
     },
   },
   switchTrack: {
-    bg: '#eaeef2',
-    hoverBg: 'hsla(210,24%,90%,1)',
-    activeBg: 'hsla(210,24%,88%,1)',
-    disabledBg: '#8c959f',
-    fg: '#57606a',
-    disabledFg: '#ffffff',
-    border: 'rgba(0,0,0,0)',
+    bg: 'var(--controlTrack-bgColor-rest, var(--color-switch-track-bg, #eaeef2))',
+    hoverBg: 'var(--controlTrack-bgColor-hover, var(--color-switch-track-hover-bg, hsla(210,24%,90%,1)))',
+    activeBg: 'var(--controlTrack-bgColor-active, var(--color-switch-track-active-bg, hsla(210,24%,88%,1)))',
+    disabledBg: 'var(--controlTrack-bgColor-disabled, var(--color-switch-track-disabled-bg, #8c959f))',
+    fg: 'var(--controlTrack-fgColor-rest, var(--color-switch-track-fg, #57606a))',
+    disabledFg: 'var(--controlTrack-fgColor-disabled, var(--color-switch-track-disabled-fg, #ffffff))',
+    border: 'var(--controlTrack-borderColor-rest, var(--color-switch-track-border, transparent))',
     checked: {
-      bg: '#0969da',
-      hoverBg: '#0860CA',
-      activeBg: '#0757BA',
-      fg: '#ffffff',
-      disabledFg: '#ffffff',
-      border: 'rgba(0,0,0,0)',
+      bg: 'var(--control-checked-bgColor-rest, var(--color-switch-track-checked-bg, #0969da))',
+      hoverBg: 'var(--control-checked-bgColor-hover, var(--color-switch-track-checked-hover-bg, #0860CA))',
+      activeBg: 'var(--control-checked-bgColor-active, var(--color-switch-track-checked-active-bg, #0757BA))',
+      fg: 'var(--control-checked-fgColor-rest, var(--color-switch-track-checked-fg, #ffffff))',
+      disabledFg: 'var(--control-checked-fgColor-disabled, var(--color-switch-track-checked-disabled-fg, #ffffff))',
+      border: 'var(--borderColor-transparent, var(--color-switch-track-checked-border, transparent))',
     },
   },
   switchKnob: {
-    bg: '#ffffff',
-    disabledBg: '#f6f8fa',
-    border: '#858F99',
+    bg: 'var(--controlKnob-bgColor-rest, var(--color-switch-knob-bg, #ffffff))',
+    disabledBg: 'var(--controlKnob-bgColor-disabled, var(--color-switch-knob-disabled-bg, #f6f8fa))',
+    border: 'var(--controlKnob-borderColor-rest, var(--color-switch-knob-border, #858F99))',
     checked: {
-      bg: '#ffffff',
-      disabledBg: '#f6f8fa',
-      border: '#0969da',
+      bg: 'var(--controlKnob-bgColor-checked, var(--color-switch-knob-checked-bg, #ffffff))',
+      disabledBg: 'var(--controlKnob-bgColor-disabled, var(--color-switch-knob-checked-disabled-bg, #f6f8fa))',
+      border: 'var(--controlKnob-borderColor-checked, var(--color-switch-knob-checked-border, #0969da))',
     },
   },
   segmentedControl: {
-    bg: '#eaeef2',
+    bg: 'var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg, #eaeef2))',
     button: {
-      bg: '#ffffff',
+      bg: 'var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg, #ffffff))',
       hover: {
-        bg: 'rgba(175,184,193,0.2)',
+        bg: 'var(--controlTrack-bgColor-hover, var(--color-segmented-control-button-hover-bg, rgba(175,184,193,0.2)))',
       },
       active: {
-        bg: 'rgba(175,184,193,0.4)',
+        bg: 'var(--controlTrack-bgColor-active, var(--color-segmented-control-button-hover-active-bg, rgba(175,184,193,0.4)))',
       },
       selected: {
-        border: '#8c959f',
+        border:
+          'var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-hover-active-selected-border, #8c959f))',
       },
     },
   },
   treeViewItem: {
     chevron: {
-      hoverBg: 'rgba(208,215,222,0.32)',
+      hoverBg:
+        'var(--control-transparent-bgColor-hover, var(--color-tree-view-item-chevron-hover-bg, rgba(208,215,222,0.32)))',
     },
     directory: {
-      fill: '#54aeff',
+      fill: 'var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-chevron-directory-fill, #54aeff))',
     },
   },
   fg: {
     default: '#24292f',
     muted: '#57606a',
-    subtle: '#6e7781',
-    onEmphasis: '#ffffff',
+    subtle: 'var(--fgColor-muted, var(--color-fg-subtle, #6e7781))',
+    onEmphasis: 'var(--fgColor-onEmphasis, var(--color-fg-on-emphasis, #ffffff))',
   },
   canvas: {
-    default: '#ffffff',
-    overlay: '#ffffff',
-    inset: '#f6f8fa',
-    subtle: '#f6f8fa',
+    default: 'var(--bgColor-default, var(--color-canvas-default, #ffffff))',
+    overlay: 'var(--overlay-bgColor, var(--color-canvas-overlay, #ffffff))',
+    inset: 'var(--bgColor-inset, var(--color-canvas-inset, #f6f8fa))',
+    subtle: 'var(--bgColor-muted, var(--color-canvas-subtle, #f6f8fa))',
   },
   border: {
-    default: '#d0d7de',
-    muted: 'hsla(210,18%,87%,1)',
-    subtle: 'rgba(27,31,36,0.15)',
+    default: 'var(--borderColor-default, var(--color-border-default, #d0d7de))',
+    muted: 'var(--borderColor-muted, var(--color-border-muted, hsla(210,18%,87%,1)))',
+    subtle: 'var(--borderColor-muted, var(--color-border-subtle, rgba(27,31,36,0.15)))',
   },
   shadow: {
-    small: '0 1px 0 rgba(27,31,36,0.04)',
-    medium: '0 3px 6px rgba(140,149,159,0.15)',
-    large: '0 8px 24px rgba(140,149,159,0.2)',
-    extraLarge: '0 12px 28px rgba(140,149,159,0.3)',
+    small: 'var(--shadow-resting-small, var(--color-shadow-small, 0 1px 0 rgba(27,31,36,0.04)))',
+    medium: 'var(--shadow-resting-medium, var(--color-shadow-medium, 0 3px 6px rgba(140,149,159,0.15)))',
+    large: 'var(--shadow-floating-large, var(--color-shadow-large, 0 8px 24px rgba(140,149,159,0.2)))',
+    extraLarge: 'var(--shadow-floating-xlarge, var(--color-shadow-extra-large, 0 12px 28px rgba(140,149,159,0.3)))',
   },
   neutral: {
-    emphasisPlus: '#24292f',
-    emphasis: '#6e7781',
-    muted: 'rgba(175,184,193,0.2)',
-    subtle: 'rgba(234,238,242,0.5)',
+    emphasisPlus: 'var(--bgColor-emphasis, var(--color-neutral-emphasis-plus, #24292f))',
+    emphasis: 'var(--bgColor-neutral-emphasis, var(--color-neutral-emphasis, #6e7781))',
+    muted: 'var(--borderColor-neutral-muted, var(--color-neutral-muted, rgba(175,184,193,0.2)))',
+    subtle: 'var(--bgColor-neutral-muted, var(--color-neutral-subtle, rgba(234,238,242,0.5)))',
   },
   accent: {
-    fg: '#0969da',
-    emphasis: '#0969da',
-    muted: 'rgba(84,174,255,0.4)',
-    subtle: '#ddf4ff',
+    fg: 'var(--fgColor-accent, var(--color-accent-fg, #0969da))',
+    emphasis: 'var(--bgColor-accent-emphasis, var(--color-accent-emphasis, #0969da))',
+    muted: 'var(--borderColor-accent-muted, var(--color-accent-muted, rgba(84,174,255,0.4)))',
+    subtle: 'var(--bgColor-accent-muted, var(--color-accent-subtle, #ddf4ff))',
   },
   success: {
-    fg: '#0969da',
+    fg: 'var(--fgColor-success, var(--color-success-fg, #0969da))',
     emphasis: '#0969da',
-    muted: 'rgba(84,174,255,0.4)',
-    subtle: '#ddf4ff',
+    muted: 'var(--borderColor-success-muted, var(--color-success-muted, rgba(84,174,255,0.4)))',
+    subtle: 'var(--bgColor-success-muted, var(--color-success-subtle, #ddf4ff))',
   },
   attention: {
-    fg: '#9a6700',
-    emphasis: '#9a6700',
-    muted: 'rgba(212,167,44,0.4)',
-    subtle: '#fff8c5',
+    fg: 'var(--fgColor-attention, var(--color-attention-fg, #9a6700))',
+    emphasis: 'var(--bgColor-attention-emphasis, var(--color-attention-emphasis, #9a6700))',
+    muted: 'var(--borderColor-attention-muted, var(--color-attention-muted, rgba(212,167,44,0.4)))',
+    subtle: 'var(--bgColor-attention-muted, var(--color-attention-subtle, #fff8c5))',
   },
   severe: {
-    fg: '#b35900',
-    emphasis: '#b35900',
-    muted: 'rgba(247,153,57,0.4)',
-    subtle: '#fff5e8',
+    fg: 'var(--fgColor-severe, var(--color-severe-fg, #b35900))',
+    emphasis: 'var(--bgColor-severe-emphasis, var(--color-severe-emphasis, #b35900))',
+    muted: 'var(--borderColor-severe-muted, var(--color-severe-muted, rgba(247,153,57,0.4)))',
+    subtle: 'var(--bgColor-severe-muted, var(--color-severe-subtle, #fff5e8))',
   },
   danger: {
     fg: '#b35900',
-    emphasis: '#b35900',
-    muted: 'rgba(247,153,57,0.4)',
-    subtle: '#fff5e8',
+    emphasis: 'var(--borderColor-danger-emphasis, var(--color-danger-emphasis, #b35900))',
+    muted: 'var(--borderColor-danger-muted, var(--color-danger-muted, rgba(247,153,57,0.4)))',
+    subtle: 'var(--bgColor-danger-muted, var(--color-danger-subtle, #fff5e8))',
   },
   open: {
     fg: '#b35900',
@@ -472,32 +505,32 @@ const colors = {
     subtle: '#f6f8fa',
   },
   done: {
-    fg: '#8250df',
-    emphasis: '#8250df',
-    muted: 'rgba(194,151,255,0.4)',
-    subtle: '#fbefff',
+    fg: 'var(--fgColor-done, var(--color-done-fg, #8250df))',
+    emphasis: 'var(--bgColor-done-emphasis, var(--color-done-emphasis, #8250df))',
+    muted: 'var(--borderColor-done-muted, var(--color-done-muted, rgba(194,151,255,0.4)))',
+    subtle: 'var(--bgColor-done-muted, var(--color-done-subtle, #fbefff))',
   },
   sponsors: {
-    fg: '#bf3989',
-    emphasis: '#bf3989',
-    muted: 'rgba(255,128,200,0.4)',
-    subtle: '#ffeff7',
+    fg: 'var(--fgColor-sponsors, var(--color-sponsors-fg, #bf3989))',
+    emphasis: 'var(--bgColor-sponsors-emphasis, var(--color-sponsors-emphasis, #bf3989))',
+    muted: 'var(--borderColor-sponsors-muted, var(--color-sponsors-muted, rgba(255,128,200,0.4)))',
+    subtle: 'var(--bgColor-sponsors-muted, var(--color-sponsors-subtle, #ffeff7))',
   },
   primer: {
     fg: {
-      disabled: '#8c959f',
+      disabled: 'var(--fgColor-disabled, var(--color-primer-fg-disabled, #8c959f))',
     },
     canvas: {
-      backdrop: 'rgba(27,31,36,0.5)',
-      sticky: 'rgba(255,255,255,0.95)',
+      backdrop: 'var(--overlay-backdrop-bgColor, var(--color-primer-fg-canvas-backdrop, rgba(27,31,36,0.5)))',
+      sticky: 'var(--color-primer-canvas-sticky, rgba(255,255,255,0.95))',
     },
     border: {
-      active: '#fd8c73',
-      contrast: 'rgba(27,31,36,0.1)',
+      active: 'var(--underlineNav-borderColor-active, var(--color-primer-border-active, #fd8c73))',
+      contrast: 'var(--borderColor-muted, var(--color-primer-border-contrast, rgba(27,31,36,0.1)))',
     },
     shadow: {
-      highlight: 'inset 0 1px 0 rgba(255,255,255,0.25)',
-      inset: 'inset 0 1px 0 rgba(208,215,222,0.2)',
+      highlight: 'var(--shadow-highlight, var(--color-primer-shadow-highlight, inset 0 1px 0 rgba(255,255,255,0.25)))',
+      inset: 'var(--shadow-inset, var(--color-primer-shadow-inset, inset 0 1px 0 rgba(208,215,222,0.2)))',
     },
   },
   scale: {
diff --git a/src/legacy-theme/ts/colors/light_high_contrast.ts b/src/legacy-theme/ts/colors/light_high_contrast.ts
index 7476a461d7a..600a2ad3d23 100644
--- a/src/legacy-theme/ts/colors/light_high_contrast.ts
+++ b/src/legacy-theme/ts/colors/light_high_contrast.ts
@@ -1,190 +1,193 @@
 const colors = {
-  canvasDefaultTransparent: 'rgba(255,255,255,0)',
+  canvasDefaultTransparent: 'var(--bgColor-transparent, var(--color-canvas-default-transparent, rgba(255,255,255,0)))',
   pageHeaderBg: '#ffffff',
   marketingIcon: {
-    primary: '#1168e3',
-    secondary: '#368cf9',
+    primary: 'var(--color-marketing-icon-primary, #1168e3)',
+    secondary: 'var(--color-marketing-icon-secondary, #368cf9)',
   },
   diffBlob: {
     addition: {
-      numText: '#0e1116',
+      numText: 'var(--diffBlob-addition-fgColor-num, var(--color-diff-blob-addition-num-text, #0e1116))',
       fg: '#ffffff',
-      numBg: '#ccffd8',
-      lineBg: '#e6ffec',
+      numBg: 'var(--diffBlob-addition-bgColor-num, var(--color-diff-blob-addition-num-bg, #ccffd8))',
+      lineBg: 'var(--diffBlob-addition-bgColor-line, var(--color-diff-blob-addition-line-bg, #e6ffec))',
       wordBg: '#055d20',
     },
     deletion: {
-      numText: '#0e1116',
+      numText: 'var(--diffBlob-deletion-fgColor-num, var(--color-diff-blob-deletion-num-text, #0e1116))',
       fg: '#ffffff',
-      numBg: '#ffd7d5',
-      lineBg: '#fff0ee',
+      numBg: 'var(--diffBlob-deletion-bgColor-num, var(--color-diff-blob-deletion-num-bg, #ffd7d5))',
+      lineBg: 'var(--diffBlob-deletion-bgColor-line, var(--color-diff-blob-deletion-line-bg, #fff0ee))',
       wordBg: '#a0111f',
     },
     hunk: {
       numBg: '#9cd7ff',
     },
     expander: {
-      icon: '#0e1116',
+      icon: 'var(--diffBlob-expander-iconColor, var(--color-diff-blob-expander-icon, #0e1116))',
     },
-    selectedLineHighlightMixBlendMode: 'multiply',
+    selectedLineHighlightMixBlendMode: 'var(--color-diff-blob-selected-line-highlight-mix-blend-mode, multiply)',
   },
   diffstat: {
-    deletionBorder: 'rgba(1,4,9,0.8)',
-    additionBorder: 'rgba(1,4,9,0.8)',
-    additionBg: '#055d20',
+    deletionBorder: 'var(--color-diffstat-deletion-border, rgba(1,4,9,0.8))',
+    additionBorder: 'var(--color-diffstat-addition-border, rgba(1,4,9,0.8))',
+    additionBg: 'var(undefined, var(--color-diffstat-addition-bg, #055d20))',
   },
   searchKeyword: {
-    hl: '#fcf7be',
+    hl: 'var(--highlight-neutral-bgColor, var(--color-search-keyword-hl, #fcf7be))',
   },
   prettylights: {
     syntax: {
-      comment: '#66707b',
-      constant: '#023b95',
-      entity: '#512598',
-      storageModifierImport: '#0e1116',
-      entityTag: '#024c1a',
-      keyword: '#a0111f',
-      string: '#032563',
-      variable: '#702c00',
-      brackethighlighterUnmatched: '#6e011a',
-      invalidIllegalText: '#ffffff',
-      invalidIllegalBg: '#6e011a',
-      carriageReturnText: '#ffffff',
-      carriageReturnBg: '#a0111f',
-      stringRegexp: '#024c1a',
-      markupList: '#2e1800',
-      markupHeading: '#023b95',
-      markupItalic: '#0e1116',
-      markupBold: '#0e1116',
-      markupDeletedText: '#6e011a',
-      markupDeletedBg: '#fff0ee',
-      markupInsertedText: '#024c1a',
-      markupInsertedBg: '#d2fedb',
-      markupChangedText: '#702c00',
-      markupChangedBg: '#ffc67b',
-      markupIgnoredText: '#e7ecf0',
-      markupIgnoredBg: '#023b95',
-      metaDiffRange: '#622cbc',
-      brackethighlighterAngle: '#4b535d',
-      sublimelinterGutterMark: '#88929d',
-      constantOtherReferenceLink: '#032563',
+      comment: 'var(--color-prettylights-syntax-comment, #4b535d)',
+      constant: 'var(--color-prettylights-syntax-constant, #023b95)',
+      entity: 'var(--color-prettylights-syntax-entity, #512598)',
+      storageModifierImport: 'var(--color-prettylights-syntax-storage-modifier-import, #0e1116)',
+      entityTag: 'var(--color-prettylights-syntax-entity-tag, #024c1a)',
+      keyword: 'var(--color-prettylights-syntax-keyword, #a0111f)',
+      string: 'var(--color-prettylights-syntax-string, #032563)',
+      variable: 'var(--color-prettylights-syntax-variable, #702c00)',
+      brackethighlighterUnmatched: 'var(--color-prettylights-syntax-brackethighlighter-unmatched, #6e011a)',
+      invalidIllegalText: 'var(--color-prettylights-syntax-invalid-illegal-text, #ffffff)',
+      invalidIllegalBg: 'var(--color-prettylights-syntax-invalid-illegal-bg, #6e011a)',
+      carriageReturnText: 'var(--color-prettylights-syntax-carriage-return-text, #ffffff)',
+      carriageReturnBg: 'var(--color-prettylights-syntax-carriage-return-bg, #a0111f)',
+      stringRegexp: 'var(--color-prettylights-syntax-string-regexp, #024c1a)',
+      markupList: 'var(--color-prettylights-syntax-markup-list, #2e1800)',
+      markupHeading: 'var(--color-prettylights-syntax-markup-heading, #023b95)',
+      markupItalic: 'var(--color-prettylights-syntax-markup-italic, #0e1116)',
+      markupBold: 'var(--color-prettylights-syntax-markup-bold, #0e1116)',
+      markupDeletedText: 'var(--color-prettylights-syntax-markup-deleted-text, #6e011a)',
+      markupDeletedBg: 'var(--color-prettylights-syntax-markup-deleted-bg, #fff0ee)',
+      markupInsertedText: 'var(--color-prettylights-syntax-markup-inserted-text, #024c1a)',
+      markupInsertedBg: 'var(--color-prettylights-syntax-markup-inserted-bg, #d2fedb)',
+      markupChangedText: 'var(--color-prettylights-syntax-markup-changed-text, #702c00)',
+      markupChangedBg: 'var(--color-prettylights-syntax-markup-changed-bg, #ffc67b)',
+      markupIgnoredText: 'var(--color-prettylights-syntax-markup-ignored-text, #e7ecf0)',
+      markupIgnoredBg: 'var(--color-prettylights-syntax-markup-ignored-bg, #023b95)',
+      metaDiffRange: 'var(--color-prettylights-syntax-meta-diff-range, #622cbc)',
+      brackethighlighterAngle: 'var(--color-prettylights-syntax-brackethighlighter-angle, #4b535d)',
+      sublimelinterGutterMark: 'var(--color-prettylights-syntax-sublimelinter-gutter-mark, #88929d)',
+      constantOtherReferenceLink: 'var(--color-prettylights-syntax-constant-other-reference-link, #032563)',
     },
   },
   codemirror: {
-    text: '#0e1116',
-    bg: '#ffffff',
-    guttersBg: '#ffffff',
-    guttermarkerText: '#ffffff',
-    guttermarkerSubtleText: '#66707b',
-    linenumberText: '#0e1116',
-    cursor: '#0e1116',
-    selectionBg: '#368cf9',
-    activelineBg: '#e7ecf0',
-    matchingbracketText: '#0e1116',
-    linesBg: '#ffffff',
+    text: 'var(--codeMirror-fgColor, var(--color-codemirror-text, #0e1116))',
+    bg: 'var(--codeMirror-bgColor, var(--color-codemirror-bg, #ffffff))',
+    guttersBg: 'var(--codeMirror-gutters-bgColor, var(--color-codemirror-gutters-bg, #ffffff))',
+    guttermarkerText:
+      'var(--codeMirror-gutterMarker-fgColor-default, var(--color-codemirror-guttermarker-text, #ffffff))',
+    guttermarkerSubtleText:
+      'var(--codeMirror-gutterMarker-fgColor-muted, var(--color-codemirror-guttermarker-subtle-text, #66707b))',
+    linenumberText: 'var(--codeMirror-lineNumber-fgColor, var(--color-codemirror-linenumber-text, #0e1116))',
+    cursor: 'var(--codeMirror-cursor-fgColor, var(--color-codemirror-cursor, #0e1116))',
+    selectionBg: 'var(--codeMirror-selection-bgColor, var(--color-codemirror-selection-bg, #368cf9))',
+    activelineBg: 'var(--codeMirror-activeline-bgColor, var(--color-codemirror-activeline-bg, #e7ecf0))',
+    matchingbracketText:
+      'var(--codeMirror-matchingBracket-fgColor, var(--color-codemirror-matchingbracket-text, #0e1116))',
+    linesBg: 'var(--codeMirror-lines-bgColor, var(--color-codemirror-lines-bg, #ffffff))',
     syntax: {
-      comment: '#0e1116',
-      constant: '#023b95',
-      entity: '#622cbc',
-      keyword: '#a0111f',
-      storage: '#a0111f',
-      string: '#032563',
-      support: '#023b95',
-      variable: '#702c00',
+      comment: 'var(--codeMirror-syntax-fgColor-comment, var(--color-codemirror-syntax-comment, #0e1116))',
+      constant: 'var(--codeMirror-syntax-fgColor-constant, var(--color-codemirror-syntax-constant, #023b95))',
+      entity: 'var(--codeMirror-syntax-fgColor-entity, var(--color-codemirror-syntax-entity, #622cbc))',
+      keyword: 'var(--codeMirror-syntax-fgColor-keyword, var(--color-codemirror-syntax-keyword, #a0111f))',
+      storage: 'var(--codeMirror-syntax-fgColor-storage, var(--color-codemirror-syntax-storage, #a0111f))',
+      string: 'var(--codeMirror-syntax-fgColor-string, var(--color-codemirror-syntax-string, #032563))',
+      support: 'var(--codeMirror-syntax-fgColor-support, var(--color-codemirror-syntax-support, #023b95))',
+      variable: 'var(--codeMirror-syntax-fgColor-variable, var(--color-codemirror-syntax-variable, #702c00))',
     },
   },
   checks: {
-    bg: '#0e1116',
-    runBorderWidth: '0px',
-    containerBorderWidth: '0px',
-    textPrimary: '#ffffff',
-    textSecondary: '#88929d',
-    textLink: '#368cf9',
-    btnIcon: '#acb6c0',
-    btnHoverIcon: '#ffffff',
-    btnHoverBg: 'rgba(255,255,255,0.125)',
-    inputText: '#e7ecf0',
-    inputPlaceholderText: '#88929d',
-    inputFocusText: '#88929d',
-    inputBg: '#20252c',
-    inputShadow: 'none',
-    donutError: '#d5232c',
-    donutPending: '#956400',
-    donutSuccess: '#055d20',
-    donutNeutral: '#acb6c0',
-    dropdownText: '#acb6c0',
-    dropdownBg: '#20252c',
-    dropdownBorder: '#343b43',
-    dropdownShadow: 'rgba(1,4,9,0.3)',
-    dropdownHoverText: '#ffffff',
-    dropdownHoverBg: '#343b43',
-    dropdownBtnHoverText: '#ffffff',
-    dropdownBtnHoverBg: '#20252c',
-    scrollbarThumbBg: '#4b535d',
-    headerLabelText: '#ced5dc',
-    headerLabelOpenText: '#ffffff',
-    headerBorder: '#20252c',
-    headerIcon: '#88929d',
-    lineText: '#ced5dc',
-    lineNumText: 'rgba(136,146,157,0.75)',
-    lineTimestampText: '#88929d',
-    lineHoverBg: '#20252c',
-    lineSelectedBg: 'rgba(17,104,227,0.15)',
-    lineSelectedNumText: '#368cf9',
-    lineDtFmText: '#0e1116',
-    lineDtFmBg: '#744500',
-    gateBg: 'rgba(96,55,0,0.15)',
-    gateText: '#ced5dc',
-    gateWaitingText: '#b58407',
-    stepHeaderOpenBg: '#20252c',
-    stepErrorText: '#ee5a5d',
-    stepWarningText: '#b58407',
-    loglineText: '#88929d',
-    loglineNumText: 'rgba(136,146,157,0.75)',
-    loglineDebugText: '#a371f7',
-    loglineErrorText: '#ced5dc',
-    loglineErrorNumText: '#ee5a5d',
-    loglineErrorBg: 'rgba(134,6,29,0.15)',
-    loglineWarningText: '#ced5dc',
-    loglineWarningNumText: '#b58407',
-    loglineWarningBg: 'rgba(96,55,0,0.15)',
-    loglineCommandText: '#368cf9',
-    loglineSectionText: '#26a148',
+    bg: 'var(--color-checks-bg, #0e1116)',
+    runBorderWidth: 'var(--color-checks-run-border-width, 0px)',
+    containerBorderWidth: 'var(--color-checks-container-border-width, 0px)',
+    textPrimary: 'var(--color-checks-text-primary, #ffffff)',
+    textSecondary: 'var(--color-checks-text-secondary, #88929d)',
+    textLink: 'var(--color-checks-text-link, #368cf9)',
+    btnIcon: 'var(--color-checks-btn-icon, #acb6c0)',
+    btnHoverIcon: 'var(--color-checks-btn-hover-icon, #ffffff)',
+    btnHoverBg: 'var(--color-checks-btn-hover-bg, rgba(255,255,255,0.125))',
+    inputText: 'var(--color-checks-input-text, #e7ecf0)',
+    inputPlaceholderText: 'var(--color-checks-input-placeholder-text, #88929d)',
+    inputFocusText: 'var(--color-checks-input-focus-text, #88929d)',
+    inputBg: 'var(--color-checks-input-bg, #20252c)',
+    inputShadow: 'var(--color-checks-input-shadow, none)',
+    donutError: 'var(--color-checks-donut-error, #d5232c)',
+    donutPending: 'var(--color-checks-donut-pending, #956400)',
+    donutSuccess: 'var(--color-checks-donut-success, #055d20)',
+    donutNeutral: 'var(--color-checks-donut-neutral, #acb6c0)',
+    dropdownText: 'var(--color-checks-dropdown-text, #acb6c0)',
+    dropdownBg: 'var(--color-checks-dropdown-bg, #20252c)',
+    dropdownBorder: 'var(--color-checks-dropdown-border, #343b43)',
+    dropdownShadow: 'var(--color-checks-dropdown-shadow, rgba(1,4,9,0.3))',
+    dropdownHoverText: 'var(--color-checks-dropdown-hover-text, #ffffff)',
+    dropdownHoverBg: 'var(--color-checks-dropdown-hover-bg, #343b43)',
+    dropdownBtnHoverText: 'var(--color-checks-dropdown-btn-hover-text, #ffffff)',
+    dropdownBtnHoverBg: 'var(--color-checks-dropdown-btn-hover-bg, #20252c)',
+    scrollbarThumbBg: 'var(--color-checks-scrollbar-thumb-bg, #4b535d)',
+    headerLabelText: 'var(--color-checks-header-label-text, #ced5dc)',
+    headerLabelOpenText: 'var(--color-checks-header-label-open-text, #ffffff)',
+    headerBorder: 'var(--color-checks-header-border, #20252c)',
+    headerIcon: 'var(--color-checks-header-icon, #88929d)',
+    lineText: 'var(--color-checks-line-text, #ced5dc)',
+    lineNumText: 'var(--color-checks-line-num-text, rgba(136,146,157,0.75))',
+    lineTimestampText: 'var(--color-checks-line-timestamp-text, #88929d)',
+    lineHoverBg: 'var(--color-checks-line-hover-bg, #20252c)',
+    lineSelectedBg: 'var(--color-checks-line-selected-bg, rgba(17,104,227,0.15))',
+    lineSelectedNumText: 'var(--color-checks-line-selected-num-text, #368cf9)',
+    lineDtFmText: 'var(--color-checks-line-dt-fm-text, #0e1116)',
+    lineDtFmBg: 'var(--color-checks-line-dt-fm-bg, #744500)',
+    gateBg: 'var(--color-checks-gate-bg, rgba(96,55,0,0.15))',
+    gateText: 'var(--color-checks-gate-text, #ced5dc)',
+    gateWaitingText: 'var(--color-checks-gate-waiting-text, #b58407)',
+    stepHeaderOpenBg: 'var(--color-checks-step-header-open-bg, #20252c)',
+    stepErrorText: 'var(--color-checks-step-error-text, #ee5a5d)',
+    stepWarningText: 'var(--color-checks-step-warning-text, #b58407)',
+    loglineText: 'var(--color-checks-logline-text, #88929d)',
+    loglineNumText: 'var(--color-checks-logline-num-text, rgba(136,146,157,0.75))',
+    loglineDebugText: 'var(--color-checks-logline-debug-text, #a371f7)',
+    loglineErrorText: 'var(--color-checks-logline-error-text, #ced5dc)',
+    loglineErrorNumText: 'var(--color-checks-logline-error-num-text, #ee5a5d)',
+    loglineErrorBg: 'var(--color-checks-logline-error-bg, rgba(134,6,29,0.15))',
+    loglineWarningText: 'var(--color-checks-logline-warning-text, #ced5dc)',
+    loglineWarningNumText: 'var(--color-checks-logline-warning-num-text, #b58407)',
+    loglineWarningBg: 'var(--color-checks-logline-warning-bg, rgba(96,55,0,0.15))',
+    loglineCommandText: 'var(--color-checks-logline-command-text, #368cf9)',
+    loglineSectionText: 'var(--color-checks-logline-section-text, #26a148)',
     ansi: {
-      black: '#0e1116',
-      blackBright: '#20252c',
-      white: '#ced5dc',
-      whiteBright: '#ced5dc',
-      gray: '#88929d',
-      red: '#ee5a5d',
-      redBright: '#ff8e8a',
-      green: '#26a148',
-      greenBright: '#43c663',
-      yellow: '#b58407',
-      yellowBright: '#d5a824',
-      blue: '#368cf9',
-      blueBright: '#67b3fd',
-      magenta: '#a371f7',
-      magentaBright: '#c49bff',
-      cyan: '#76e3ea',
-      cyanBright: '#b3f0ff',
+      black: 'var(--color-checks-ansi-black, #0e1116)',
+      blackBright: 'var(--color-checks-ansi-black-bright, #20252c)',
+      white: 'var(--color-checks-ansi-white, #ced5dc)',
+      whiteBright: 'var(--color-checks-ansi-white-bright, #ced5dc)',
+      gray: 'var(--color-checks-ansi-gray, #88929d)',
+      red: 'var(--color-checks-ansi-red, #ee5a5d)',
+      redBright: 'var(--color-checks-ansi-red-bright, #ff8e8a)',
+      green: 'var(--color-checks-ansi-green, #26a148)',
+      greenBright: 'var(--color-checks-ansi-green-bright, #43c663)',
+      yellow: 'var(--color-checks-ansi-yellow, #b58407)',
+      yellowBright: 'var(--color-checks-ansi-yellow-bright, #d5a824)',
+      blue: 'var(--color-checks-ansi-blue, #368cf9)',
+      blueBright: 'var(--color-checks-ansi-blue-bright, #67b3fd)',
+      magenta: 'var(--color-checks-ansi-magenta, #a371f7)',
+      magentaBright: 'var(--color-checks-ansi-magenta-bright, #c49bff)',
+      cyan: 'var(--color-checks-ansi-cyan, #76e3ea)',
+      cyanBright: 'var(--color-checks-ansi-cyan-bright, #b3f0ff)',
     },
   },
   project: {
-    headerBg: '#0e1116',
-    sidebarBg: '#ffffff',
-    gradientIn: '#ffffff',
-    gradientOut: 'rgba(255,255,255,0)',
+    headerBg: 'var(--color-project-header-bg, #0e1116)',
+    sidebarBg: 'var(--color-project-sidebar-bg, #ffffff)',
+    gradientIn: 'var(--color-project-gradient-in, #ffffff)',
+    gradientOut: 'var(--color-project-gradient-out, rgba(255,255,255,0))',
   },
   mktg: {
     btn: {
-      bg: '#1b1f23',
+      bg: 'var(--color-mktg-btn-bg, #1b1f23))',
       shadow: {
-        outline: 'rgb(0 0 0 / 15%) 0 0 0 1px inset',
-        focus: 'rgb(0 0 0 / 15%) 0 0 0 4px',
+        outline: 'var(--color-mktg-btn-shadow-outline, rgb(0 0 0 / 15%) 0 0 0 1px inset))',
+        focus: 'var(--color-mktg-btn-shadow-focus, rgb(0 0 0 / 15%) 0 0 0 4px))',
         hover:
-          '0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02)',
-        hoverMuted: 'rgb(0 0 0 / 70%) 0 0 0 2px inset',
+          'var(--color-mktg-btn-shadow-hover, 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02)))',
+        hoverMuted: 'var(--color-mktg-btn-shadow-hover-muted, rgb(0 0 0 / 70%) 0 0 0 2px inset))',
       },
     },
   },
@@ -194,11 +197,11 @@ const colors = {
     },
   },
   avatar: {
-    bg: '#ffffff',
-    border: 'rgba(1,4,9,0.8)',
-    stackFade: '#acb6c0',
-    stackFadeMore: '#ced5dc',
-    childShadow: '0 0 0 2px rgba(255,255,255,0.8)',
+    bg: 'var(--avatar-bgColor, var(--color-avatar-bg, #ffffff))',
+    border: 'var(--avatar-borderColor, var(--color-avatar-border, rgba(1,4,9,0.8)))',
+    stackFade: 'var(--avatarStack-fade-bgColor-default, var(--color-avatar-stack-fade, #acb6c0))',
+    stackFadeMore: 'var(--avatarStack-fade-bgColor-muted, var(--color-avatar-stack-fade-more, #ced5dc))',
+    childShadow: 'var(--avatar-shadow, var(--color-avatar-child-shadow, 0 0 0 2px rgba(255,255,255,0.8)))',
   },
   topicTag: {
     border: '#0349b4',
@@ -207,133 +210,149 @@ const colors = {
     border: '#20252c',
   },
   selectMenu: {
-    backdropBorder: 'rgba(0,0,0,0)',
-    tapHighlight: 'rgba(172,182,192,0.5)',
-    tapFocusBg: '#9cd7ff',
+    backdropBorder: 'var(--selectMenu-borderColor, var(--color-select-menu-backdrop-border, transparent))',
+    tapHighlight: 'var(--control-bgColor-active, var(--color-select-menu-tap-highlight, rgba(172,182,192,0.5)))',
+    tapFocusBg: 'var(--selectMenu-bgColor-active, var(--color-select-menu-tap-focus-bg, #9cd7ff))',
   },
   overlay: {
-    shadow: '0 1px 3px rgba(1,4,9,0.12), 0 8px 24px rgba(52,59,67,0.12)',
-    backdrop: 'rgba(136,146,157,0.2)',
+    shadow:
+      'var(--shadow-floating-small, var(--color-overlay-shadow, 0 1px 3px rgba(1,4,9,0.12), 0 8px 24px rgba(52,59,67,0.12)))',
+    backdrop: 'var(--overlay-backdrop-bgColor, var(--color-overlay-backdrop, rgba(136,146,157,0.2)))',
   },
   header: {
-    text: 'rgba(255,255,255,0.7)',
-    bg: '#0e1116',
+    text: 'var(--header-fgColor-default, var(--color-header-text, rgba(255,255,255,0.7)))',
+    bg: 'var(--header-bgColor, var(--color-header-bg, #0e1116))',
     divider: '#acb6c0',
-    logo: '#ffffff',
+    logo: 'var(--header-fgColor-logo, var(--color-header-logo, #ffffff))',
   },
   headerSearch: {
-    bg: '#0e1116',
-    border: '#4b535d',
+    bg: 'var(--headerSearch-bgColor, var(--color-header-search-bg, #0e1116))',
+    border: 'var(--headerSearch-borderColor, var(--color-header-search-border, #4b535d))',
   },
   sidenav: {
-    selectedBg: '#ffffff',
+    selectedBg: 'var(--sideNav-bgColor-selected, var(--color-sidenav-selected-bg, #ffffff))',
   },
   menu: {
-    bgActive: 'rgba(0,0,0,0)',
+    bgActive: 'var(--menu-bgColor-active, var(--color-menu-bg-active, transparent))',
   },
   input: {
-    disabledBg: 'rgba(172,182,192,0.2)',
+    disabledBg: 'var(--control-bgColor-disabled, var(--color-input-disabled-bg, rgba(172,182,192,0.2)))',
   },
   timeline: {
-    badgeBg: '#e7ecf0',
+    badgeBg: 'var(--timelineBadge-bgColor, var(--color-timeline-badge-bg, #e7ecf0))',
   },
   ansi: {
-    black: '#0e1116',
-    blackBright: '#4b535d',
-    white: '#66707b',
-    whiteBright: '#88929d',
-    gray: '#66707b',
-    red: '#a0111f',
-    redBright: '#86061d',
-    green: '#024c1a',
-    greenBright: '#055d20',
-    yellow: '#3f2200',
-    yellowBright: '#4e2c00',
-    blue: '#0349b4',
-    blueBright: '#1168e3',
-    magenta: '#622cbc',
-    magentaBright: '#844ae7',
-    cyan: '#1b7c83',
-    cyanBright: '#3192aa',
+    black: 'var(--color-ansi-black, #0e1116)',
+    blackBright: 'var(--color-ansi-black-bright, #4b535d)',
+    white: 'var(--color-ansi-white, #66707b)',
+    whiteBright: 'var(--color-ansi-white-bright, #88929d)',
+    gray: 'var(--color-ansi-gray, #66707b)',
+    red: 'var(--color-ansi-red, #a0111f)',
+    redBright: 'var(--color-ansi-red-bright, #86061d)',
+    green: 'var(--color-ansi-green, #024c1a)',
+    greenBright: 'var(--color-ansi-green-bright, #055d20)',
+    yellow: 'var(--color-ansi-yellow, #3f2200)',
+    yellowBright: 'var(--color-ansi-yellow-bright, #4e2c00)',
+    blue: 'var(--color-ansi-blue, #0349b4)',
+    blueBright: 'var(--color-ansi-blue-bright, #1168e3)',
+    magenta: 'var(--color-ansi-magenta, #622cbc)',
+    magentaBright: 'var(--color-ansi-magenta-bright, #844ae7)',
+    cyan: 'var(--color-ansi-cyan, #1b7c83)',
+    cyanBright: 'var(--color-ansi-cyan-bright, #3192aa)',
   },
   btn: {
-    text: '#0e1116',
+    text: 'var(--button-default-fgColor-rest, var(--color-btn-text, #0e1116))',
     bg: '#e7ecf0',
     border: 'rgba(1,4,9,0.8)',
-    shadow: '0 1px 0 rgba(1,4,9,0.04)',
-    insetShadow: 'inset 0 1px 0 rgba(255,255,255,0.25)',
+    shadow: 'var(--button-default-shadow-resting, var(--color-btn-shadow, 0 1px 0 rgba(1,4,9,0.04)))',
+    insetShadow:
+      'var(--button-default-shadow-inset, var(--color-btn-inset-shadow, inset 0 1px 0 rgba(255,255,255,0.25)))',
     hoverBg: '#ced5dc',
-    hoverBorder: 'rgba(1,4,9,0.8)',
+    hoverBorder: 'var(--button-default-borderColor-hover, var(--color-btn-hover-border, rgba(1,4,9,0.8)))',
     activeBg: '#acb6c0',
-    activeBorder: 'rgba(1,4,9,0.8)',
+    activeBorder: 'var(--button-default-borderColor-active, var(--color-btn-active-border, rgba(1,4,9,0.8)))',
     selectedBg: '#acb6c0',
-    counterBg: 'rgba(1,4,9,0.08)',
+    counterBg: 'var(--buttonCounter-default-bgColor-rest, var(--color-btn-counter-bg, rgba(1,4,9,0.08)))',
     primary: {
-      text: '#ffffff',
+      text: 'var(--button-primary-fgColor-rest, var(--color-btn-primary-text, #ffffff))',
       bg: '#055d20',
       border: '#013d14',
-      shadow: '0 1px 0 rgba(1,4,9,0.1)',
-      insetShadow: 'inset 0 1px 0 rgba(255,255,255,0.03)',
+      shadow: 'var(--shadow-resting-small, var(--color-btn-primary-shadow, 0 1px 0 rgba(1,4,9,0.1)))',
+      insetShadow:
+        'var(--shadow-highlight, var(--color-btn-primary-inset-shadow, inset 0 1px 0 rgba(255,255,255,0.03)))',
       hoverBg: '#024c1a',
       hoverBorder: '#013d14',
-      selectedBg: 'hsla(139,95%,13%,1)',
-      selectedShadow: 'inset 0 1px 0 rgba(0,35,11,0.2)',
-      disabledText: 'rgba(255,255,255,0.8)',
-      disabledBg: '#94d3a2',
-      disabledBorder: 'rgba(1,4,9,0.8)',
-      icon: 'rgba(255,255,255,0.8)',
-      counterBg: 'rgba(0,35,11,0.2)',
+      selectedBg: 'var(--button-primary-bgColor-active, var(--color-btn-primary-selected-bg, hsla(139,95%,13%,1)))',
+      selectedShadow:
+        'var(--button-primary-shadow-selected, var(--color-btn-primary-selected-shadow, inset 0 1px 0 rgba(0,35,11,0.2)))',
+      disabledText:
+        'var(--button-primary-fgColor-disabled, var(--color-btn-primary-disabled-text, rgba(255,255,255,0.8)))',
+      disabledBg: 'var(--button-primary-bgColor-disabled, var(--color-btn-primary-disabled-bg, #94d3a2))',
+      disabledBorder:
+        'var(--button-primary-borderColor-disabled, var(--color-btn-primary-disabled-border, rgba(1,4,9,0.8)))',
+      icon: 'var(--button-primary-iconColor-rest, var(--color-btn-primary-icon, rgba(255,255,255,0.8)))',
+      counterBg: 'var(--buttonCounter-primary-bgColor-rest, var(--color-btn-primary-counter-bg, rgba(0,35,11,0.2)))',
     },
     outline: {
       text: '#023b95',
-      hoverText: '#ffffff',
+      hoverText: 'var(--button-outline-fgColor-hover, var(--color-btn-outline-hover-text, #ffffff))',
       hoverBg: '#0349b4',
       hoverBorder: '#022f7a',
-      hoverShadow: '0 1px 0 rgba(1,4,9,0.1)',
-      hoverInsetShadow: 'inset 0 1px 0 rgba(255,255,255,0.03)',
-      hoverCounterBg: 'rgba(255,255,255,0.2)',
-      selectedText: '#ffffff',
+      hoverShadow: 'var(--shadow-resting-small, var(--color-btn-outline-hover-shadow, 0 1px 0 rgba(1,4,9,0.1)))',
+      hoverInsetShadow:
+        'var(--shadow-highlight, var(--color-btn-outline-hover-inset-shadow, inset 0 1px 0 rgba(255,255,255,0.03)))',
+      hoverCounterBg:
+        'var(--buttonCounter-outline-bgColor-hover, var(--color-btn-outline-hover-counter-bg, rgba(255,255,255,0.2)))',
+      selectedText: 'var(--button-outline-fgColor-active, var(--color-btn-outline-selected-text, #ffffff))',
       selectedBg: '#022f7a',
       selectedBorder: '#022f7a',
-      selectedShadow: 'inset 0 1px 0 rgba(2,26,74,0.2)',
+      selectedShadow:
+        'var(--button-outline-shadow-selected, var(--color-btn-outline-selected-shadow, inset 0 1px 0 rgba(2,26,74,0.2)))',
       disabledText: 'rgba(3,73,180,0.5)',
       disabledBg: '#e7ecf0',
-      disabledCounterBg: 'rgba(3,73,180,0.05)',
-      counterBg: '#0969da1a',
-      counterFg: '#023b95',
-      hoverCounterFg: '#ffffff',
-      disabledCounterFg: 'rgba(3,73,180,0.5)',
+      disabledCounterBg:
+        'var(--buttonCounter-outline-bgColor-disabled, var(--color-btn-outline-disabled-counter-bg, rgba(3,73,180,0.05)))',
+      counterBg: 'var(--buttonCounter-outline-bgColor-rest, var(--color-btn-outline-counter-bg, #0969da1a))',
+      counterFg: 'var(--buttonCounter-outline-fgColor-rest, var(--color-btn-outline-counter-fg, #023b95))',
+      hoverCounterFg: 'var(--buttonCounter-outline-fgColor-hover, var(--color-btn-outline-hover-counter-fg, #ffffff))',
+      disabledCounterFg:
+        'var(--buttonCounter-outline-fgColor-disabled, var(--color-btn-outline-disabled-counter-fg, rgba(3,73,180,0.5)))',
     },
     danger: {
       text: '#86061d',
-      hoverText: '#ffffff',
+      hoverText: 'var(--button-danger-fgColor-hover, var(--color-btn-danger-hover-text, #ffffff))',
       hoverBg: '#a0111f',
       hoverBorder: '#6e011a',
-      hoverShadow: '0 1px 0 rgba(1,4,9,0.1)',
-      hoverInsetShadow: 'inset 0 1px 0 rgba(255,255,255,0.03)',
-      hoverCounterBg: 'rgba(255,255,255,0.2)',
-      selectedText: '#ffffff',
+      hoverShadow: 'var(--shadow-resting-small, var(--color-btn-danger-hover-shadow, 0 1px 0 rgba(1,4,9,0.1)))',
+      hoverInsetShadow:
+        'var(--shadow-highlight, var(--color-btn-danger-hover-inset-shadow, inset 0 1px 0 rgba(255,255,255,0.03)))',
+      hoverCounterBg:
+        'var(--buttonCounter-danger-bgColor-hover, var(--color-btn-danger-hover-counter-bg, rgba(255,255,255,0.2)))',
+      selectedText: 'var(--button-danger-fgColor-active, var(--color-btn-danger-selected-text, #ffffff))',
       selectedBg: '#6e011a',
       selectedBorder: '#6e011a',
-      selectedShadow: 'inset 0 1px 0 rgba(67,0,17,0.2)',
-      disabledText: 'rgba(160,17,31,0.5)',
+      selectedShadow:
+        'var(--button-danger-shadow-selected, var(--color-btn-danger-selected-shadow, inset 0 1px 0 rgba(67,0,17,0.2)))',
+      disabledText: 'var(--button-danger-fgColor-disabled, var(--color-btn-danger-disabled-text, rgba(160,17,31,0.5)))',
       disabledBg: '#e7ecf0',
-      disabledCounterBg: 'rgba(160,17,31,0.05)',
-      counterBg: 'rgba(160,17,31,0.1)',
+      disabledCounterBg:
+        'var(--buttonCounter-danger-bgColor-disabled, var(--color-btn-danger-disabled-counter-bg, rgba(160,17,31,0.05)))',
+      counterBg: 'var(--buttonCounter-danger-bgColor-rest, var(--color-btn-danger-counter-bg, rgba(160,17,31,0.1)))',
       icon: '#86061d',
-      hoverIcon: '#ffffff',
-      counterFg: '#86061d',
-      hoverCounterFg: '#ffffff',
-      disabledCounterFg: 'rgba(160,17,31,0.5)',
+      hoverIcon: 'var(--button-danger-iconColor-hover, var(--color-btn-danger-hover-icon, #ffffff))',
+      counterFg: 'var(--buttonCounter-danger-fgColor-rest, var(--color-btn-danger-counter-fg, #86061d))',
+      hoverCounterFg: 'var(--buttonCounter-danger-fgColor-hover, var(--color-btn-danger-hover-counter-fg, #ffffff))',
+      disabledCounterFg:
+        'var(--buttonCounter-danger-fgColor-disabled, var(--color-btn-danger-disabled-counter-fg, rgba(160,17,31,0.5)))',
     },
     inactive: {
-      bg: '#e7ecf0',
-      text: '#4b535d',
+      bg: 'var(--button-inactive-bgColor-rest, var(--color-btn-inactive-bg, #e7ecf0))',
+      text: 'var(--button-inactive-fgColor-rest, var(--color-btn-inactive-text, #4b535d))',
     },
   },
   underlinenav: {
-    icon: '#66707b',
-    borderHover: 'rgba(172,182,192,0.2)',
+    icon: 'var(--underlineNav-iconColor-rest, var(--color-underlinenav-icon, #66707b))',
+    borderHover: 'var(--underlineNav-borderColor-hover, var(--color-underlinenav-border-hover, rgba(172,182,192,0.2)))',
   },
   actionListItem: {
     inlineDivider: '#88929d',
@@ -354,41 +373,42 @@ const colors = {
     bg: '#66707b',
     hoverBg: 'hsla(211,9%,47%,1)',
     activeBg: 'hsla(211,9%,49%,1)',
-    disabledBg: '#88929d',
+    disabledBg: 'var(--controlTrack-bgColor-disabled, var(--color-switch-track-disabled-bg, #88929d))',
     fg: '#ffffff',
     disabledFg: '#ffffff',
-    border: 'rgba(0,0,0,0)',
+    border: 'var(--controlTrack-borderColor-rest, var(--color-switch-track-border, transparent))',
     checked: {
-      bg: '#0349b4',
-      hoverBg: '#0860CA',
-      activeBg: '#0757BA',
+      bg: 'var(--control-checked-bgColor-rest, var(--color-switch-track-checked-bg, #0349b4))',
+      hoverBg: 'var(--control-checked-bgColor-hover, var(--color-switch-track-checked-hover-bg, #0860CA))',
+      activeBg: 'var(--control-checked-bgColor-active, var(--color-switch-track-checked-active-bg, #0757BA))',
       fg: '#ffffff',
-      disabledFg: '#ffffff',
-      border: 'rgba(0,0,0,0)',
+      disabledFg: 'var(--control-checked-fgColor-disabled, var(--color-switch-track-checked-disabled-fg, #ffffff))',
+      border: 'var(--borderColor-transparent, var(--color-switch-track-checked-border, transparent))',
     },
   },
   switchKnob: {
-    bg: '#ffffff',
-    disabledBg: '#e7ecf0',
+    bg: 'var(--controlKnob-bgColor-rest, var(--color-switch-knob-bg, #ffffff))',
+    disabledBg: 'var(--controlKnob-bgColor-disabled, var(--color-switch-knob-disabled-bg, #e7ecf0))',
     border: '#20252c',
     checked: {
-      bg: '#ffffff',
-      disabledBg: '#e7ecf0',
+      bg: 'var(--controlKnob-bgColor-checked, var(--color-switch-knob-checked-bg, #ffffff))',
+      disabledBg: 'var(--controlKnob-bgColor-disabled, var(--color-switch-knob-checked-disabled-bg, #e7ecf0))',
       border: '#0349b4',
     },
   },
   segmentedControl: {
-    bg: '#e7ecf0',
+    bg: 'var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg, #e7ecf0))',
     button: {
-      bg: '#ffffff',
+      bg: 'var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg, #ffffff))',
       hover: {
-        bg: 'rgba(172,182,192,0.2)',
+        bg: 'var(--controlTrack-bgColor-hover, var(--color-segmented-control-button-hover-bg, rgba(172,182,192,0.2)))',
       },
       active: {
-        bg: 'rgba(172,182,192,0.4)',
+        bg: 'var(--controlTrack-bgColor-active, var(--color-segmented-control-button-hover-active-bg, rgba(172,182,192,0.4)))',
       },
       selected: {
-        border: '#88929d',
+        border:
+          'var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-hover-active-selected-border, #88929d))',
       },
     },
   },
@@ -397,18 +417,18 @@ const colors = {
       hoverBg: '#ced5dc',
     },
     directory: {
-      fill: '#368cf9',
+      fill: 'var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-chevron-directory-fill, #368cf9))',
     },
   },
   fg: {
     default: '#0e1116',
     muted: '#0e1116',
-    subtle: '#66707b',
-    onEmphasis: '#ffffff',
+    subtle: 'var(--fgColor-muted, var(--color-fg-subtle, #66707b))',
+    onEmphasis: 'var(--fgColor-onEmphasis, var(--color-fg-on-emphasis, #ffffff))',
   },
   canvas: {
-    default: '#ffffff',
-    overlay: '#ffffff',
+    default: 'var(--bgColor-default, var(--color-canvas-default, #ffffff))',
+    overlay: 'var(--overlay-bgColor, var(--color-canvas-overlay, #ffffff))',
     inset: '#ffffff',
     subtle: '#e7ecf0',
   },
@@ -418,86 +438,86 @@ const colors = {
     subtle: 'rgba(1,4,9,0.8)',
   },
   shadow: {
-    small: '0 1px 0 rgba(1,4,9,0.04)',
-    medium: '0 3px 6px rgba(136,146,157,0.15)',
-    large: '0 8px 24px rgba(136,146,157,0.2)',
-    extraLarge: '0 12px 28px rgba(136,146,157,0.3)',
+    small: 'var(--shadow-resting-small, var(--color-shadow-small, 0 1px 0 rgba(1,4,9,0.04)))',
+    medium: 'var(--shadow-resting-medium, var(--color-shadow-medium, 0 3px 6px rgba(136,146,157,0.15)))',
+    large: 'var(--shadow-floating-large, var(--color-shadow-large, 0 8px 24px rgba(136,146,157,0.2)))',
+    extraLarge: 'var(--shadow-floating-xlarge, var(--color-shadow-extra-large, 0 12px 28px rgba(136,146,157,0.3)))',
   },
   neutral: {
-    emphasisPlus: '#0e1116',
-    emphasis: '#66707b',
-    muted: 'rgba(172,182,192,0.2)',
+    emphasisPlus: 'var(--bgColor-emphasis, var(--color-neutral-emphasis-plus, #0e1116))',
+    emphasis: 'var(--bgColor-neutral-emphasis, var(--color-neutral-emphasis, #66707b))',
+    muted: 'var(--borderColor-neutral-muted, var(--color-neutral-muted, rgba(172,182,192,0.2)))',
     subtle: '#e7ecf0',
   },
   accent: {
-    fg: '#0349b4',
-    emphasis: '#0349b4',
+    fg: 'var(--fgColor-accent, var(--color-accent-fg, #0349b4))',
+    emphasis: 'var(--bgColor-accent-emphasis, var(--color-accent-emphasis, #0349b4))',
     muted: '#368cf9',
-    subtle: '#dff7ff',
+    subtle: 'var(--bgColor-accent-muted, var(--color-accent-subtle, #dff7ff))',
   },
   success: {
-    fg: '#055d20',
+    fg: 'var(--fgColor-success, var(--color-success-fg, #055d20))',
     emphasis: '#055d20',
     muted: '#26a148',
-    subtle: '#d2fedb',
+    subtle: 'var(--bgColor-success-muted, var(--color-success-subtle, #d2fedb))',
   },
   attention: {
-    fg: '#744500',
+    fg: 'var(--fgColor-attention, var(--color-attention-fg, #744500))',
     emphasis: '#744500',
     muted: '#b58407',
-    subtle: '#fcf7be',
+    subtle: 'var(--bgColor-attention-muted, var(--color-attention-subtle, #fcf7be))',
   },
   severe: {
-    fg: '#873800',
-    emphasis: '#873800',
+    fg: 'var(--fgColor-severe, var(--color-severe-fg, #873800))',
+    emphasis: 'var(--bgColor-severe-emphasis, var(--color-severe-emphasis, #873800))',
     muted: '#dc6d1a',
-    subtle: '#fff2d5',
+    subtle: 'var(--bgColor-severe-muted, var(--color-severe-subtle, #fff2d5))',
   },
   danger: {
-    fg: '#d1242f',
-    emphasis: '#a0111f',
+    fg: 'var(--fgColor-danger, var(--color-danger-fg, #d1242f))',
+    emphasis: 'var(--borderColor-danger-emphasis, var(--color-danger-emphasis, #a0111f))',
     muted: '#ee5a5d',
-    subtle: '#fff0ee',
+    subtle: 'var(--bgColor-danger-muted, var(--color-danger-subtle, #fff0ee))',
   },
   open: {
-    fg: '#055d20',
-    emphasis: '#055d20',
-    muted: 'rgba(38,161,72,0.4)',
-    subtle: '#d2fedb',
+    fg: 'var(--fgColor-open, var(--color-open-fg, #055d20))',
+    emphasis: 'var(--bgColor-open-emphasis, var(--color-open-emphasis, #055d20))',
+    muted: 'var(--borderColor-open-muted, var(--color-open-muted, rgba(38,161,72,0.4)))',
+    subtle: 'var(--bgColor-open-muted, var(--color-open-subtle, #d2fedb))',
   },
   closed: {
-    fg: '#d1242f',
-    emphasis: '#a0111f',
-    muted: 'rgba(238,90,93,0.4)',
-    subtle: '#fff0ee',
+    fg: 'var(--fgColor-closed, var(--color-closed-fg, #d1242f))',
+    emphasis: 'var(--bgColor-closed-emphasis, var(--color-closed-emphasis, #a0111f))',
+    muted: 'var(--borderColor-closed-muted, var(--color-closed-muted, rgba(238,90,93,0.4)))',
+    subtle: 'var(--bgColor-closed-muted, var(--color-closed-subtle, #fff0ee))',
   },
   done: {
-    fg: '#622cbc',
-    emphasis: '#622cbc',
+    fg: 'var(--fgColor-done, var(--color-done-fg, #622cbc))',
+    emphasis: 'var(--bgColor-done-emphasis, var(--color-done-emphasis, #622cbc))',
     muted: '#a371f7',
-    subtle: '#faf0fe',
+    subtle: 'var(--bgColor-done-muted, var(--color-done-subtle, #faf0fe))',
   },
   sponsors: {
-    fg: '#971368',
-    emphasis: '#971368',
+    fg: 'var(--fgColor-sponsors, var(--color-sponsors-fg, #971368))',
+    emphasis: 'var(--bgColor-sponsors-emphasis, var(--color-sponsors-emphasis, #971368))',
     muted: '#ed4baf',
-    subtle: '#feeff7',
+    subtle: 'var(--bgColor-sponsors-muted, var(--color-sponsors-subtle, #feeff7))',
   },
   primer: {
     fg: {
-      disabled: '#88929d',
+      disabled: 'var(--fgColor-disabled, var(--color-primer-fg-disabled, #88929d))',
     },
     canvas: {
-      backdrop: 'rgba(1,4,9,0.5)',
-      sticky: 'rgba(255,255,255,0.95)',
+      backdrop: 'var(--overlay-backdrop-bgColor, var(--color-primer-fg-canvas-backdrop, rgba(1,4,9,0.5)))',
+      sticky: 'var(--color-primer-canvas-sticky, rgba(255,255,255,0.95))',
     },
     border: {
-      active: '#ef5b48',
-      contrast: 'rgba(1,4,9,0.1)',
+      active: 'var(--underlineNav-borderColor-active, var(--color-primer-border-active, #ef5b48))',
+      contrast: 'var(--borderColor-muted, var(--color-primer-border-contrast, rgba(1,4,9,0.1)))',
     },
     shadow: {
-      highlight: 'inset 0 1px 0 rgba(255,255,255,0.25)',
-      inset: 'inset 0 1px 0 rgba(206,213,220,0.2)',
+      highlight: 'var(--shadow-highlight, var(--color-primer-shadow-highlight, inset 0 1px 0 rgba(255,255,255,0.25)))',
+      inset: 'var(--shadow-inset, var(--color-primer-shadow-inset, inset 0 1px 0 rgba(206,213,220,0.2)))',
     },
   },
   scale: {
diff --git a/src/legacy-theme/ts/colors/light_tritanopia.ts b/src/legacy-theme/ts/colors/light_tritanopia.ts
index 128fce00f7c..ab7fc7ecb2d 100644
--- a/src/legacy-theme/ts/colors/light_tritanopia.ts
+++ b/src/legacy-theme/ts/colors/light_tritanopia.ts
@@ -1,463 +1,496 @@
 const colors = {
-  canvasDefaultTransparent: 'rgba(255,255,255,0)',
-  pageHeaderBg: '#f6f8fa',
+  canvasDefaultTransparent: 'var(--bgColor-transparent, var(--color-canvas-default-transparent, rgba(255,255,255,0)))',
+  pageHeaderBg: 'var(--page-header-bgColor, var(--color-page-header-bg, #f6f8fa))',
   marketingIcon: {
-    primary: '#218bff',
-    secondary: '#54aeff',
+    primary: 'var(--color-marketing-icon-primary, #218bff)',
+    secondary: 'var(--color-marketing-icon-secondary, #54aeff)',
   },
   diffBlob: {
     addition: {
-      numText: '#24292f',
-      fg: '#24292f',
+      numText: 'var(--diffBlob-addition-fgColor-num, var(--color-diff-blob-addition-num-text, #24292f))',
+      fg: 'var(--diffBlob-addition-fgColor-text, var(--color-diff-blob-addition-fg, #24292f))',
       numBg: 'rgba(84,174,255,0.4)',
       lineBg: 'rgba(221,244,255,0.5)',
       wordBg: 'rgba(84,174,255,0.4)',
     },
     deletion: {
-      numText: '#24292f',
-      fg: '#24292f',
+      numText: 'var(--diffBlob-deletion-fgColor-num, var(--color-diff-blob-deletion-num-text, #24292f))',
+      fg: 'var(--diffBlob-deletion-fgColor-text, var(--color-diff-blob-deletion-fg, #24292f))',
       numBg: 'rgba(255,129,130,0.4)',
       lineBg: 'rgba(255,235,233,0.5)',
       wordBg: 'rgba(255,171,168,0.5)',
     },
     hunk: {
-      numBg: 'rgba(84,174,255,0.4)',
+      numBg: 'var(--diffBlob-hunk-bgColor-num, var(--color-diff-blob-hunk-num-bg, rgba(84,174,255,0.4)))',
     },
     expander: {
-      icon: '#57606a',
+      icon: 'var(--diffBlob-expander-iconColor, var(--color-diff-blob-expander-icon, #57606a))',
     },
-    selectedLineHighlightMixBlendMode: 'multiply',
+    selectedLineHighlightMixBlendMode: 'var(--color-diff-blob-selected-line-highlight-mix-blend-mode, multiply)',
   },
   diffstat: {
-    deletionBorder: 'rgba(27,31,36,0.15)',
-    additionBorder: 'rgba(27,31,36,0.15)',
-    additionBg: '#0969da',
+    deletionBorder: 'var(--color-diffstat-deletion-border, rgba(27,31,36,0.15))',
+    additionBorder: 'var(--color-diffstat-addition-border, rgba(27,31,36,0.15))',
+    additionBg: 'var(undefined, var(--color-diffstat-addition-bg, #0969da))',
   },
   searchKeyword: {
-    hl: '#fff8c5',
+    hl: 'var(--highlight-neutral-bgColor, var(--color-search-keyword-hl, #fff8c5))',
   },
   prettylights: {
     syntax: {
-      comment: '#6e7781',
-      constant: '#0550ae',
-      entity: '#6639ba',
-      storageModifierImport: '#24292f',
-      entityTag: '#0550ae',
-      keyword: '#cf222e',
-      string: '#0a3069',
-      variable: '#a40e26',
-      brackethighlighterUnmatched: '#82071e',
-      invalidIllegalText: '#f6f8fa',
-      invalidIllegalBg: '#82071e',
-      carriageReturnText: '#f6f8fa',
-      carriageReturnBg: '#cf222e',
-      stringRegexp: '#0550ae',
-      markupList: '#3b2300',
-      markupHeading: '#0550ae',
-      markupItalic: '#24292f',
-      markupBold: '#24292f',
-      markupDeletedText: '#82071e',
-      markupDeletedBg: '#ffebe9',
-      markupInsertedText: '#0550ae',
-      markupInsertedBg: '#ddf4ff',
-      markupChangedText: '#a40e26',
-      markupChangedBg: '#ffcecb',
-      markupIgnoredText: '#eaeef2',
-      markupIgnoredBg: '#0550ae',
-      metaDiffRange: '#8250df',
-      brackethighlighterAngle: '#57606a',
-      sublimelinterGutterMark: '#8c959f',
-      constantOtherReferenceLink: '#0a3069',
+      comment: 'var(--color-prettylights-syntax-comment, #57606a)',
+      constant: 'var(--color-prettylights-syntax-constant, #0550ae)',
+      entity: 'var(--color-prettylights-syntax-entity, #6639ba)',
+      storageModifierImport: 'var(--color-prettylights-syntax-storage-modifier-import, #24292f)',
+      entityTag: 'var(--color-prettylights-syntax-entity-tag, #0550ae)',
+      keyword: 'var(--color-prettylights-syntax-keyword, #cf222e)',
+      string: 'var(--color-prettylights-syntax-string, #0a3069)',
+      variable: 'var(--color-prettylights-syntax-variable, #a40e26)',
+      brackethighlighterUnmatched: 'var(--color-prettylights-syntax-brackethighlighter-unmatched, #82071e)',
+      invalidIllegalText: 'var(--color-prettylights-syntax-invalid-illegal-text, #f6f8fa)',
+      invalidIllegalBg: 'var(--color-prettylights-syntax-invalid-illegal-bg, #82071e)',
+      carriageReturnText: 'var(--color-prettylights-syntax-carriage-return-text, #f6f8fa)',
+      carriageReturnBg: 'var(--color-prettylights-syntax-carriage-return-bg, #cf222e)',
+      stringRegexp: 'var(--color-prettylights-syntax-string-regexp, #0550ae)',
+      markupList: 'var(--color-prettylights-syntax-markup-list, #3b2300)',
+      markupHeading: 'var(--color-prettylights-syntax-markup-heading, #0550ae)',
+      markupItalic: 'var(--color-prettylights-syntax-markup-italic, #24292f)',
+      markupBold: 'var(--color-prettylights-syntax-markup-bold, #24292f)',
+      markupDeletedText: 'var(--color-prettylights-syntax-markup-deleted-text, #82071e)',
+      markupDeletedBg: 'var(--color-prettylights-syntax-markup-deleted-bg, #ffebe9)',
+      markupInsertedText: 'var(--color-prettylights-syntax-markup-inserted-text, #0550ae)',
+      markupInsertedBg: 'var(--color-prettylights-syntax-markup-inserted-bg, #ddf4ff)',
+      markupChangedText: 'var(--color-prettylights-syntax-markup-changed-text, #a40e26)',
+      markupChangedBg: 'var(--color-prettylights-syntax-markup-changed-bg, #ffcecb)',
+      markupIgnoredText: 'var(--color-prettylights-syntax-markup-ignored-text, #eaeef2)',
+      markupIgnoredBg: 'var(--color-prettylights-syntax-markup-ignored-bg, #0550ae)',
+      metaDiffRange: 'var(--color-prettylights-syntax-meta-diff-range, #8250df)',
+      brackethighlighterAngle: 'var(--color-prettylights-syntax-brackethighlighter-angle, #57606a)',
+      sublimelinterGutterMark: 'var(--color-prettylights-syntax-sublimelinter-gutter-mark, #8c959f)',
+      constantOtherReferenceLink: 'var(--color-prettylights-syntax-constant-other-reference-link, #0a3069)',
     },
   },
   codemirror: {
-    text: '#24292f',
-    bg: '#ffffff',
-    guttersBg: '#ffffff',
-    guttermarkerText: '#ffffff',
-    guttermarkerSubtleText: '#6e7781',
-    linenumberText: '#57606a',
-    cursor: '#24292f',
-    selectionBg: 'rgba(84,174,255,0.4)',
-    activelineBg: 'rgba(234,238,242,0.5)',
-    matchingbracketText: '#24292f',
-    linesBg: '#ffffff',
+    text: 'var(--codeMirror-fgColor, var(--color-codemirror-text, #24292f))',
+    bg: 'var(--codeMirror-bgColor, var(--color-codemirror-bg, #ffffff))',
+    guttersBg: 'var(--codeMirror-gutters-bgColor, var(--color-codemirror-gutters-bg, #ffffff))',
+    guttermarkerText:
+      'var(--codeMirror-gutterMarker-fgColor-default, var(--color-codemirror-guttermarker-text, #ffffff))',
+    guttermarkerSubtleText:
+      'var(--codeMirror-gutterMarker-fgColor-muted, var(--color-codemirror-guttermarker-subtle-text, #6e7781))',
+    linenumberText: 'var(--codeMirror-lineNumber-fgColor, var(--color-codemirror-linenumber-text, #57606a))',
+    cursor: 'var(--codeMirror-cursor-fgColor, var(--color-codemirror-cursor, #24292f))',
+    selectionBg: 'var(--codeMirror-selection-bgColor, var(--color-codemirror-selection-bg, rgba(84,174,255,0.4)))',
+    activelineBg: 'var(--codeMirror-activeline-bgColor, var(--color-codemirror-activeline-bg, rgba(234,238,242,0.5)))',
+    matchingbracketText:
+      'var(--codeMirror-matchingBracket-fgColor, var(--color-codemirror-matchingbracket-text, #24292f))',
+    linesBg: 'var(--codeMirror-lines-bgColor, var(--color-codemirror-lines-bg, #ffffff))',
     syntax: {
-      comment: '#24292f',
-      constant: '#0550ae',
-      entity: '#8250df',
-      keyword: '#cf222e',
-      storage: '#cf222e',
-      string: '#0a3069',
-      support: '#0550ae',
-      variable: '#a40e26',
+      comment: 'var(--codeMirror-syntax-fgColor-comment, var(--color-codemirror-syntax-comment, #24292f))',
+      constant: 'var(--codeMirror-syntax-fgColor-constant, var(--color-codemirror-syntax-constant, #0550ae))',
+      entity: 'var(--codeMirror-syntax-fgColor-entity, var(--color-codemirror-syntax-entity, #8250df))',
+      keyword: 'var(--codeMirror-syntax-fgColor-keyword, var(--color-codemirror-syntax-keyword, #cf222e))',
+      storage: 'var(--codeMirror-syntax-fgColor-storage, var(--color-codemirror-syntax-storage, #cf222e))',
+      string: 'var(--codeMirror-syntax-fgColor-string, var(--color-codemirror-syntax-string, #0a3069))',
+      support: 'var(--codeMirror-syntax-fgColor-support, var(--color-codemirror-syntax-support, #0550ae))',
+      variable: 'var(--codeMirror-syntax-fgColor-variable, var(--color-codemirror-syntax-variable, #a40e26))',
     },
   },
   checks: {
-    bg: '#24292f',
-    runBorderWidth: '0px',
-    containerBorderWidth: '0px',
-    textPrimary: '#f6f8fa',
-    textSecondary: '#8c959f',
-    textLink: '#54aeff',
-    btnIcon: '#afb8c1',
-    btnHoverIcon: '#f6f8fa',
-    btnHoverBg: 'rgba(255,255,255,0.125)',
-    inputText: '#eaeef2',
-    inputPlaceholderText: '#8c959f',
-    inputFocusText: '#8c959f',
-    inputBg: '#32383f',
-    inputShadow: 'none',
-    donutError: '#fa4549',
-    donutPending: '#bf8700',
-    donutSuccess: '#0969da',
-    donutNeutral: '#afb8c1',
-    dropdownText: '#afb8c1',
-    dropdownBg: '#32383f',
-    dropdownBorder: '#424a53',
-    dropdownShadow: 'rgba(27,31,36,0.3)',
-    dropdownHoverText: '#f6f8fa',
-    dropdownHoverBg: '#424a53',
-    dropdownBtnHoverText: '#f6f8fa',
-    dropdownBtnHoverBg: '#32383f',
-    scrollbarThumbBg: '#57606a',
-    headerLabelText: '#d0d7de',
-    headerLabelOpenText: '#f6f8fa',
-    headerBorder: '#32383f',
-    headerIcon: '#8c959f',
-    lineText: '#d0d7de',
-    lineNumText: 'rgba(140,149,159,0.75)',
-    lineTimestampText: '#8c959f',
-    lineHoverBg: '#32383f',
-    lineSelectedBg: 'rgba(33,139,255,0.15)',
-    lineSelectedNumText: '#54aeff',
-    lineDtFmText: '#24292f',
-    lineDtFmBg: '#9a6700',
-    gateBg: 'rgba(125,78,0,0.15)',
-    gateText: '#d0d7de',
-    gateWaitingText: '#d4a72c',
-    stepHeaderOpenBg: '#32383f',
-    stepErrorText: '#ff8182',
-    stepWarningText: '#d4a72c',
-    loglineText: '#8c959f',
-    loglineNumText: 'rgba(140,149,159,0.75)',
-    loglineDebugText: '#c297ff',
-    loglineErrorText: '#d0d7de',
-    loglineErrorNumText: '#ff8182',
-    loglineErrorBg: 'rgba(164,14,38,0.15)',
-    loglineWarningText: '#d0d7de',
-    loglineWarningNumText: '#d4a72c',
-    loglineWarningBg: 'rgba(125,78,0,0.15)',
-    loglineCommandText: '#54aeff',
-    loglineSectionText: '#54aeff',
+    bg: 'var(--color-checks-bg, #24292f)',
+    runBorderWidth: 'var(--color-checks-run-border-width, 0px)',
+    containerBorderWidth: 'var(--color-checks-container-border-width, 0px)',
+    textPrimary: 'var(--color-checks-text-primary, #f6f8fa)',
+    textSecondary: 'var(--color-checks-text-secondary, #8c959f)',
+    textLink: 'var(--color-checks-text-link, #54aeff)',
+    btnIcon: 'var(--color-checks-btn-icon, #afb8c1)',
+    btnHoverIcon: 'var(--color-checks-btn-hover-icon, #f6f8fa)',
+    btnHoverBg: 'var(--color-checks-btn-hover-bg, rgba(255,255,255,0.125))',
+    inputText: 'var(--color-checks-input-text, #eaeef2)',
+    inputPlaceholderText: 'var(--color-checks-input-placeholder-text, #8c959f)',
+    inputFocusText: 'var(--color-checks-input-focus-text, #8c959f)',
+    inputBg: 'var(--color-checks-input-bg, #32383f)',
+    inputShadow: 'var(--color-checks-input-shadow, none)',
+    donutError: 'var(--color-checks-donut-error, #fa4549)',
+    donutPending: 'var(--color-checks-donut-pending, #bf8700)',
+    donutSuccess: 'var(--color-checks-donut-success, #0969da)',
+    donutNeutral: 'var(--color-checks-donut-neutral, #afb8c1)',
+    dropdownText: 'var(--color-checks-dropdown-text, #afb8c1)',
+    dropdownBg: 'var(--color-checks-dropdown-bg, #32383f)',
+    dropdownBorder: 'var(--color-checks-dropdown-border, #424a53)',
+    dropdownShadow: 'var(--color-checks-dropdown-shadow, rgba(27,31,36,0.3))',
+    dropdownHoverText: 'var(--color-checks-dropdown-hover-text, #f6f8fa)',
+    dropdownHoverBg: 'var(--color-checks-dropdown-hover-bg, #424a53)',
+    dropdownBtnHoverText: 'var(--color-checks-dropdown-btn-hover-text, #f6f8fa)',
+    dropdownBtnHoverBg: 'var(--color-checks-dropdown-btn-hover-bg, #32383f)',
+    scrollbarThumbBg: 'var(--color-checks-scrollbar-thumb-bg, #57606a)',
+    headerLabelText: 'var(--color-checks-header-label-text, #d0d7de)',
+    headerLabelOpenText: 'var(--color-checks-header-label-open-text, #f6f8fa)',
+    headerBorder: 'var(--color-checks-header-border, #32383f)',
+    headerIcon: 'var(--color-checks-header-icon, #8c959f)',
+    lineText: 'var(--color-checks-line-text, #d0d7de)',
+    lineNumText: 'var(--color-checks-line-num-text, rgba(140,149,159,0.75))',
+    lineTimestampText: 'var(--color-checks-line-timestamp-text, #8c959f)',
+    lineHoverBg: 'var(--color-checks-line-hover-bg, #32383f)',
+    lineSelectedBg: 'var(--color-checks-line-selected-bg, rgba(33,139,255,0.15))',
+    lineSelectedNumText: 'var(--color-checks-line-selected-num-text, #54aeff)',
+    lineDtFmText: 'var(--color-checks-line-dt-fm-text, #24292f)',
+    lineDtFmBg: 'var(--color-checks-line-dt-fm-bg, #9a6700)',
+    gateBg: 'var(--color-checks-gate-bg, rgba(125,78,0,0.15))',
+    gateText: 'var(--color-checks-gate-text, #d0d7de)',
+    gateWaitingText: 'var(--color-checks-gate-waiting-text, #d4a72c)',
+    stepHeaderOpenBg: 'var(--color-checks-step-header-open-bg, #32383f)',
+    stepErrorText: 'var(--color-checks-step-error-text, #ff8182)',
+    stepWarningText: 'var(--color-checks-step-warning-text, #d4a72c)',
+    loglineText: 'var(--color-checks-logline-text, #8c959f)',
+    loglineNumText: 'var(--color-checks-logline-num-text, rgba(140,149,159,0.75))',
+    loglineDebugText: 'var(--color-checks-logline-debug-text, #c297ff)',
+    loglineErrorText: 'var(--color-checks-logline-error-text, #d0d7de)',
+    loglineErrorNumText: 'var(--color-checks-logline-error-num-text, #ff8182)',
+    loglineErrorBg: 'var(--color-checks-logline-error-bg, rgba(164,14,38,0.15))',
+    loglineWarningText: 'var(--color-checks-logline-warning-text, #d0d7de)',
+    loglineWarningNumText: 'var(--color-checks-logline-warning-num-text, #d4a72c)',
+    loglineWarningBg: 'var(--color-checks-logline-warning-bg, rgba(125,78,0,0.15))',
+    loglineCommandText: 'var(--color-checks-logline-command-text, #54aeff)',
+    loglineSectionText: 'var(--color-checks-logline-section-text, #54aeff)',
     ansi: {
-      black: '#24292f',
-      blackBright: '#32383f',
-      white: '#d0d7de',
-      whiteBright: '#d0d7de',
-      gray: '#8c959f',
-      red: '#ff8182',
-      redBright: '#ffaba8',
-      green: '#54aeff',
-      greenBright: '#80ccff',
-      yellow: '#d4a72c',
-      yellowBright: '#eac54f',
-      blue: '#54aeff',
-      blueBright: '#80ccff',
-      magenta: '#c297ff',
-      magentaBright: '#d8b9ff',
-      cyan: '#76e3ea',
-      cyanBright: '#b3f0ff',
+      black: 'var(--color-checks-ansi-black, #24292f)',
+      blackBright: 'var(--color-checks-ansi-black-bright, #32383f)',
+      white: 'var(--color-checks-ansi-white, #d0d7de)',
+      whiteBright: 'var(--color-checks-ansi-white-bright, #d0d7de)',
+      gray: 'var(--color-checks-ansi-gray, #8c959f)',
+      red: 'var(--color-checks-ansi-red, #ff8182)',
+      redBright: 'var(--color-checks-ansi-red-bright, #ffaba8)',
+      green: 'var(--color-checks-ansi-green, #54aeff)',
+      greenBright: 'var(--color-checks-ansi-green-bright, #80ccff)',
+      yellow: 'var(--color-checks-ansi-yellow, #d4a72c)',
+      yellowBright: 'var(--color-checks-ansi-yellow-bright, #eac54f)',
+      blue: 'var(--color-checks-ansi-blue, #54aeff)',
+      blueBright: 'var(--color-checks-ansi-blue-bright, #80ccff)',
+      magenta: 'var(--color-checks-ansi-magenta, #c297ff)',
+      magentaBright: 'var(--color-checks-ansi-magenta-bright, #d8b9ff)',
+      cyan: 'var(--color-checks-ansi-cyan, #76e3ea)',
+      cyanBright: 'var(--color-checks-ansi-cyan-bright, #b3f0ff)',
     },
   },
   project: {
-    headerBg: '#24292f',
-    sidebarBg: '#ffffff',
-    gradientIn: '#ffffff',
-    gradientOut: 'rgba(255,255,255,0)',
+    headerBg: 'var(--color-project-header-bg, #24292f)',
+    sidebarBg: 'var(--color-project-sidebar-bg, #ffffff)',
+    gradientIn: 'var(--color-project-gradient-in, #ffffff)',
+    gradientOut: 'var(--color-project-gradient-out, rgba(255,255,255,0))',
   },
   mktg: {
     btn: {
-      bg: '#1b1f23',
+      bg: 'var(--color-mktg-btn-bg, #1b1f23))',
       shadow: {
-        outline: 'rgb(0 0 0 / 15%) 0 0 0 1px inset',
-        focus: 'rgb(0 0 0 / 15%) 0 0 0 4px',
+        outline: 'var(--color-mktg-btn-shadow-outline, rgb(0 0 0 / 15%) 0 0 0 1px inset))',
+        focus: 'var(--color-mktg-btn-shadow-focus, rgb(0 0 0 / 15%) 0 0 0 4px))',
         hover:
-          '0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02)',
-        hoverMuted: 'rgb(0 0 0 / 70%) 0 0 0 2px inset',
+          'var(--color-mktg-btn-shadow-hover, 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02)))',
+        hoverMuted: 'var(--color-mktg-btn-shadow-hover-muted, rgb(0 0 0 / 70%) 0 0 0 2px inset))',
       },
     },
   },
   control: {
     borderColor: {
-      emphasis: '#858F99',
+      emphasis: 'var(var(--color-control-border-color-emphasis, #858F99)',
     },
   },
   avatar: {
-    bg: '#ffffff',
-    border: 'rgba(27,31,36,0.15)',
-    stackFade: '#afb8c1',
-    stackFadeMore: '#d0d7de',
-    childShadow: '0 0 0 2px rgba(255,255,255,0.8)',
+    bg: 'var(--avatar-bgColor, var(--color-avatar-bg, #ffffff))',
+    border: 'var(--avatar-borderColor, var(--color-avatar-border, rgba(27,31,36,0.15)))',
+    stackFade: 'var(--avatarStack-fade-bgColor-default, var(--color-avatar-stack-fade, #afb8c1))',
+    stackFadeMore: 'var(--avatarStack-fade-bgColor-muted, var(--color-avatar-stack-fade-more, #d0d7de))',
+    childShadow: 'var(--avatar-shadow, var(--color-avatar-child-shadow, 0 0 0 2px rgba(255,255,255,0.8)))',
   },
   topicTag: {
-    border: 'rgba(0,0,0,0)',
+    border: 'var(--topicTag-borderColor, var(--color-topic-tag-border, transparent))',
   },
   counter: {
-    border: 'rgba(0,0,0,0)',
+    border: 'var(--counter-borderColor, var(--color-counter-border, transparent))',
   },
   selectMenu: {
-    backdropBorder: 'rgba(0,0,0,0)',
-    tapHighlight: 'rgba(175,184,193,0.5)',
-    tapFocusBg: '#b6e3ff',
+    backdropBorder: 'var(--selectMenu-borderColor, var(--color-select-menu-backdrop-border, transparent))',
+    tapHighlight: 'var(--control-bgColor-active, var(--color-select-menu-tap-highlight, rgba(175,184,193,0.5)))',
+    tapFocusBg: 'var(--selectMenu-bgColor-active, var(--color-select-menu-tap-focus-bg, #b6e3ff))',
   },
   overlay: {
-    shadow: '0 1px 3px rgba(27,31,36,0.12), 0 8px 24px rgba(66,74,83,0.12)',
-    backdrop: 'rgba(140,149,159,0.2)',
+    shadow:
+      'var(--shadow-floating-small, var(--color-overlay-shadow, 0 1px 3px rgba(27,31,36,0.12), 0 8px 24px rgba(66,74,83,0.12)))',
+    backdrop: 'var(--overlay-backdrop-bgColor, var(--color-overlay-backdrop, rgba(140,149,159,0.2)))',
   },
   header: {
-    text: 'rgba(255,255,255,0.7)',
-    bg: '#24292f',
-    divider: '#57606a',
-    logo: '#ffffff',
+    text: 'var(--header-fgColor-default, var(--color-header-text, rgba(255,255,255,0.7)))',
+    bg: 'var(--header-bgColor, var(--color-header-bg, #24292f))',
+    divider: 'var(--header-borderColor-divider, var(--color-header-divider, #57606a))',
+    logo: 'var(--header-fgColor-logo, var(--color-header-logo, #ffffff))',
   },
   headerSearch: {
-    bg: '#24292f',
-    border: '#57606a',
+    bg: 'var(--headerSearch-bgColor, var(--color-header-search-bg, #24292f))',
+    border: 'var(--headerSearch-borderColor, var(--color-header-search-border, #57606a))',
   },
   sidenav: {
-    selectedBg: '#ffffff',
+    selectedBg: 'var(--sideNav-bgColor-selected, var(--color-sidenav-selected-bg, #ffffff))',
   },
   menu: {
-    bgActive: 'rgba(0,0,0,0)',
+    bgActive: 'var(--menu-bgColor-active, var(--color-menu-bg-active, transparent))',
   },
   input: {
-    disabledBg: 'rgba(175,184,193,0.2)',
+    disabledBg: 'var(--control-bgColor-disabled, var(--color-input-disabled-bg, rgba(175,184,193,0.2)))',
   },
   timeline: {
-    badgeBg: '#eaeef2',
+    badgeBg: 'var(--timelineBadge-bgColor, var(--color-timeline-badge-bg, #eaeef2))',
   },
   ansi: {
-    black: '#24292f',
-    blackBright: '#57606a',
-    white: '#6e7781',
-    whiteBright: '#8c959f',
-    gray: '#6e7781',
-    red: '#cf222e',
-    redBright: '#a40e26',
-    green: '#0550ae',
-    greenBright: '#0969da',
-    yellow: '#4d2d00',
-    yellowBright: '#633c01',
-    blue: '#0969da',
-    blueBright: '#218bff',
-    magenta: '#8250df',
-    magentaBright: '#a475f9',
-    cyan: '#1b7c83',
-    cyanBright: '#3192aa',
+    black: 'var(--color-ansi-black, #24292f)',
+    blackBright: 'var(--color-ansi-black-bright, #57606a)',
+    white: 'var(--color-ansi-white, #6e7781)',
+    whiteBright: 'var(--color-ansi-white-bright, #8c959f)',
+    gray: 'var(--color-ansi-gray, #6e7781)',
+    red: 'var(--color-ansi-red, #cf222e)',
+    redBright: 'var(--color-ansi-red-bright, #a40e26)',
+    green: 'var(--color-ansi-green, #0550ae)',
+    greenBright: 'var(--color-ansi-green-bright, #0969da)',
+    yellow: 'var(--color-ansi-yellow, #4d2d00)',
+    yellowBright: 'var(--color-ansi-yellow-bright, #633c01)',
+    blue: 'var(--color-ansi-blue, #0969da)',
+    blueBright: 'var(--color-ansi-blue-bright, #218bff)',
+    magenta: 'var(--color-ansi-magenta, #8250df)',
+    magentaBright: 'var(--color-ansi-magenta-bright, #a475f9)',
+    cyan: 'var(--color-ansi-cyan, #1b7c83)',
+    cyanBright: 'var(--color-ansi-cyan-bright, #3192aa)',
   },
   btn: {
-    text: '#24292f',
-    bg: '#f6f8fa',
-    border: 'rgba(27,31,36,0.15)',
-    shadow: '0 1px 0 rgba(27,31,36,0.04)',
-    insetShadow: 'inset 0 1px 0 rgba(255,255,255,0.25)',
-    hoverBg: '#f3f4f6',
-    hoverBorder: 'rgba(27,31,36,0.15)',
-    activeBg: 'hsla(220,14%,93%,1)',
-    activeBorder: 'rgba(27,31,36,0.15)',
-    selectedBg: 'hsla(220,14%,94%,1)',
-    counterBg: 'rgba(27,31,36,0.08)',
+    text: 'var(--button-default-fgColor-rest, var(--color-btn-text, #24292f))',
+    bg: 'var(--button-default-bgColor-rest, var(--color-btn-bg, #f6f8fa))',
+    border: 'var(--button-default-borderColor-rest, var(--color-btn-border, rgba(27,31,36,0.15)))',
+    shadow: 'var(--button-default-shadow-resting, var(--color-btn-shadow, 0 1px 0 rgba(27,31,36,0.04)))',
+    insetShadow:
+      'var(--button-default-shadow-inset, var(--color-btn-inset-shadow, inset 0 1px 0 rgba(255,255,255,0.25)))',
+    hoverBg: 'var(--button-default-bgColor-hover, var(--color-btn-hover-bg, #f3f4f6))',
+    hoverBorder: 'var(--button-default-borderColor-hover, var(--color-btn-hover-border, rgba(27,31,36,0.15)))',
+    activeBg: 'var(--button-default-bgColor-active, var(--color-btn-active-bg, hsla(220,14%,93%,1)))',
+    activeBorder: 'var(--button-default-borderColor-active, var(--color-btn-active-border, rgba(27,31,36,0.15)))',
+    selectedBg: 'var(--button-default-bgColor-selected, var(--color-btn-selected-bg, hsla(220,14%,94%,1)))',
+    counterBg: 'var(--buttonCounter-default-bgColor-rest, var(--color-btn-counter-bg, rgba(27,31,36,0.08)))',
     primary: {
-      text: '#ffffff',
-      bg: '#0969da',
-      border: 'rgba(27,31,36,0.15)',
-      shadow: '0 1px 0 rgba(27,31,36,0.1)',
-      insetShadow: 'inset 0 1px 0 rgba(255,255,255,0.03)',
+      text: 'var(--button-primary-fgColor-rest, var(--color-btn-primary-text, #ffffff))',
+      bg: 'var(--button-primary-bgColor-rest, var(--color-btn-primary-bg, #0969da))',
+      border: 'var(--button-primary-borderColor-rest, var(--color-btn-primary-border, rgba(27,31,36,0.15)))',
+      shadow: 'var(--shadow-resting-small, var(--color-btn-primary-shadow, 0 1px 0 rgba(27,31,36,0.1)))',
+      insetShadow:
+        'var(--shadow-highlight, var(--color-btn-primary-inset-shadow, inset 0 1px 0 rgba(255,255,255,0.03)))',
       hoverBg: '#0969da',
-      hoverBorder: 'rgba(27,31,36,0.15)',
-      selectedBg: 'hsla(212,92%,43%,1)',
-      selectedShadow: 'inset 0 1px 0 rgba(0,33,85,0.2)',
-      disabledText: 'rgba(255,255,255,0.8)',
+      hoverBorder:
+        'var(--button-primary-borderColor-hover, var(--color-btn-primary-hover-border, rgba(27,31,36,0.15)))',
+      selectedBg: 'var(--button-primary-bgColor-active, var(--color-btn-primary-selected-bg, hsla(212,92%,43%,1)))',
+      selectedShadow:
+        'var(--button-primary-shadow-selected, var(--color-btn-primary-selected-shadow, inset 0 1px 0 rgba(0,33,85,0.2)))',
+      disabledText:
+        'var(--button-primary-fgColor-disabled, var(--color-btn-primary-disabled-text, rgba(255,255,255,0.8)))',
       disabledBg: '#80ccff',
-      disabledBorder: 'rgba(27,31,36,0.15)',
-      icon: 'rgba(255,255,255,0.8)',
-      counterBg: 'rgba(0,33,85,0.2)',
+      disabledBorder:
+        'var(--button-primary-borderColor-disabled, var(--color-btn-primary-disabled-border, rgba(27,31,36,0.15)))',
+      icon: 'var(--button-primary-iconColor-rest, var(--color-btn-primary-icon, rgba(255,255,255,0.8)))',
+      counterBg: 'var(--buttonCounter-primary-bgColor-rest, var(--color-btn-primary-counter-bg, rgba(0,33,85,0.2)))',
     },
     outline: {
-      text: '#0969da',
-      hoverText: '#ffffff',
-      hoverBg: '#0969da',
-      hoverBorder: 'rgba(27,31,36,0.15)',
-      hoverShadow: '0 1px 0 rgba(27,31,36,0.1)',
-      hoverInsetShadow: 'inset 0 1px 0 rgba(255,255,255,0.03)',
-      hoverCounterBg: 'rgba(255,255,255,0.2)',
-      selectedText: '#ffffff',
-      selectedBg: 'hsla(212,92%,42%,1)',
-      selectedBorder: 'rgba(27,31,36,0.15)',
-      selectedShadow: 'inset 0 1px 0 rgba(0,33,85,0.2)',
-      disabledText: 'rgba(9,105,218,0.5)',
-      disabledBg: '#f6f8fa',
-      disabledCounterBg: 'rgba(9,105,218,0.05)',
-      counterBg: '#0969da1a',
-      counterFg: '#0550ae',
-      hoverCounterFg: '#ffffff',
-      disabledCounterFg: 'rgba(9,105,218,0.5)',
+      text: 'var(--button-outline-fgColor-rest, var(--color-btn-outline-text, #0969da))',
+      hoverText: 'var(--button-outline-fgColor-hover, var(--color-btn-outline-hover-text, #ffffff))',
+      hoverBg: 'var(--button-outline-bgColor-hover, var(--color-btn-outline-hover-bg, #0969da))',
+      hoverBorder:
+        'var(--button-outline-borderColor-hover, var(--color-btn-outline-hover-border, rgba(27,31,36,0.15)))',
+      hoverShadow: 'var(--shadow-resting-small, var(--color-btn-outline-hover-shadow, 0 1px 0 rgba(27,31,36,0.1)))',
+      hoverInsetShadow:
+        'var(--shadow-highlight, var(--color-btn-outline-hover-inset-shadow, inset 0 1px 0 rgba(255,255,255,0.03)))',
+      hoverCounterBg:
+        'var(--buttonCounter-outline-bgColor-hover, var(--color-btn-outline-hover-counter-bg, rgba(255,255,255,0.2)))',
+      selectedText: 'var(--button-outline-fgColor-active, var(--color-btn-outline-selected-text, #ffffff))',
+      selectedBg: 'var(--button-outline-bgColor-active, var(--color-btn-outline-selected-bg, hsla(212,92%,42%,1)))',
+      selectedBorder:
+        'var(--button-outline-borderColor-active, var(--color-btn-outline-selected-border, rgba(27,31,36,0.15)))',
+      selectedShadow:
+        'var(--button-outline-shadow-selected, var(--color-btn-outline-selected-shadow, inset 0 1px 0 rgba(0,33,85,0.2)))',
+      disabledText:
+        'var(--button-outline-fgColor-disabled, var(--color-btn-outline-disabled-text, rgba(9,105,218,0.5)))',
+      disabledBg: 'var(--button-outline-bgColor-disabled, var(--color-btn-outline-disabled-bg, #f6f8fa))',
+      disabledCounterBg:
+        'var(--buttonCounter-outline-bgColor-disabled, var(--color-btn-outline-disabled-counter-bg, rgba(9,105,218,0.05)))',
+      counterBg: 'var(--buttonCounter-outline-bgColor-rest, var(--color-btn-outline-counter-bg, #0969da1a))',
+      counterFg: 'var(--buttonCounter-outline-fgColor-rest, var(--color-btn-outline-counter-fg, #0550ae))',
+      hoverCounterFg: 'var(--buttonCounter-outline-fgColor-hover, var(--color-btn-outline-hover-counter-fg, #ffffff))',
+      disabledCounterFg:
+        'var(--buttonCounter-outline-fgColor-disabled, var(--color-btn-outline-disabled-counter-fg, rgba(9,105,218,0.5)))',
     },
     danger: {
-      text: '#cf222e',
-      hoverText: '#ffffff',
-      hoverBg: '#a40e26',
-      hoverBorder: 'rgba(27,31,36,0.15)',
-      hoverShadow: '0 1px 0 rgba(27,31,36,0.1)',
-      hoverInsetShadow: 'inset 0 1px 0 rgba(255,255,255,0.03)',
-      hoverCounterBg: 'rgba(255,255,255,0.2)',
-      selectedText: '#ffffff',
-      selectedBg: 'hsla(356,72%,44%,1)',
-      selectedBorder: 'rgba(27,31,36,0.15)',
-      selectedShadow: 'inset 0 1px 0 rgba(76,0,20,0.2)',
-      disabledText: 'rgba(207,34,46,0.5)',
-      disabledBg: '#f6f8fa',
-      disabledCounterBg: 'rgba(207,34,46,0.05)',
-      counterBg: 'rgba(207,34,46,0.1)',
-      icon: '#cf222e',
-      hoverIcon: '#ffffff',
-      counterFg: '#a40e26',
-      hoverCounterFg: '#ffffff',
-      disabledCounterFg: 'rgba(207,34,46,0.5)',
+      text: 'var(--button-danger-fgColor-rest, var(--color-btn-danger-text, #cf222e))',
+      hoverText: 'var(--button-danger-fgColor-hover, var(--color-btn-danger-hover-text, #ffffff))',
+      hoverBg: 'var(--button-danger-bgColor-hover, var(--color-btn-danger-hover-bg, #a40e26))',
+      hoverBorder: 'var(--button-danger-borderColor-hover, var(--color-btn-danger-hover-border, rgba(27,31,36,0.15)))',
+      hoverShadow: 'var(--shadow-resting-small, var(--color-btn-danger-hover-shadow, 0 1px 0 rgba(27,31,36,0.1)))',
+      hoverInsetShadow:
+        'var(--shadow-highlight, var(--color-btn-danger-hover-inset-shadow, inset 0 1px 0 rgba(255,255,255,0.03)))',
+      hoverCounterBg:
+        'var(--buttonCounter-danger-bgColor-hover, var(--color-btn-danger-hover-counter-bg, rgba(255,255,255,0.2)))',
+      selectedText: 'var(--button-danger-fgColor-active, var(--color-btn-danger-selected-text, #ffffff))',
+      selectedBg: 'var(--button-danger-bgColor-active, var(--color-btn-danger-selected-bg, hsla(356,72%,44%,1)))',
+      selectedBorder:
+        'var(--button-danger-borderColor-active, var(--color-btn-danger-selected-border, rgba(27,31,36,0.15)))',
+      selectedShadow:
+        'var(--button-danger-shadow-selected, var(--color-btn-danger-selected-shadow, inset 0 1px 0 rgba(76,0,20,0.2)))',
+      disabledText: 'var(--button-danger-fgColor-disabled, var(--color-btn-danger-disabled-text, rgba(207,34,46,0.5)))',
+      disabledBg: 'var(--button-danger-bgColor-disabled, var(--color-btn-danger-disabled-bg, #f6f8fa))',
+      disabledCounterBg:
+        'var(--buttonCounter-danger-bgColor-disabled, var(--color-btn-danger-disabled-counter-bg, rgba(207,34,46,0.05)))',
+      counterBg: 'var(--buttonCounter-danger-bgColor-rest, var(--color-btn-danger-counter-bg, rgba(207,34,46,0.1)))',
+      icon: 'var(--button-danger-iconColor-rest, var(--color-btn-danger-icon, #cf222e))',
+      hoverIcon: 'var(--button-danger-iconColor-hover, var(--color-btn-danger-hover-icon, #ffffff))',
+      counterFg: 'var(--buttonCounter-danger-fgColor-rest, var(--color-btn-danger-counter-fg, #a40e26))',
+      hoverCounterFg: 'var(--buttonCounter-danger-fgColor-hover, var(--color-btn-danger-hover-counter-fg, #ffffff))',
+      disabledCounterFg:
+        'var(--buttonCounter-danger-fgColor-disabled, var(--color-btn-danger-disabled-counter-fg, rgba(207,34,46,0.5)))',
     },
     inactive: {
-      bg: '#eaeef2',
-      text: '#57606a',
+      bg: 'var(--button-inactive-bgColor-rest, var(--color-btn-inactive-bg, #eaeef2))',
+      text: 'var(--button-inactive-fgColor-rest, var(--color-btn-inactive-text, #57606a))',
     },
   },
   underlinenav: {
-    icon: '#6e7781',
-    borderHover: 'rgba(175,184,193,0.2)',
+    icon: 'var(--underlineNav-iconColor-rest, var(--color-underlinenav-icon, #6e7781))',
+    borderHover: 'var(--underlineNav-borderColor-hover, var(--color-underlinenav-border-hover, rgba(175,184,193,0.2)))',
   },
   actionListItem: {
-    inlineDivider: 'rgba(208,215,222,0.48)',
+    inlineDivider: 'var(--borderColor-muted, var(--color-action-list-item-inline-divider, rgba(208,215,222,0.48)))',
     default: {
-      hoverBg: 'rgba(208,215,222,0.32)',
-      hoverBorder: 'rgba(0,0,0,0)',
-      activeBg: 'rgba(208,215,222,0.48)',
-      activeBorder: 'rgba(0,0,0,0)',
-      selectedBg: 'rgba(208,215,222,0.24)',
+      hoverBg:
+        'var(--control-transparent-bgColor-hover, var(--color-action-list-item-default-hover-bg, rgba(208,215,222,0.32)))',
+      hoverBorder:
+        'var(--control-transparent-borderColor-hover, var(--color-action-list-item-default-hover-border, transparent))',
+      activeBg:
+        'var(--control-transparent-bgColor-active, var(--color-action-list-item-default-active-bg, rgba(208,215,222,0.48)))',
+      activeBorder:
+        'var(--control-transparent-borderColor-active, var(--color-action-list-item-default-active-border, transparent))',
+      selectedBg:
+        'var(--control-transparent-bgColor-selected, var(--color-action-list-item-default-selected-bg, rgba(208,215,222,0.24)))',
     },
     danger: {
-      hoverBg: 'rgba(255,235,233,0.64)',
-      activeBg: '#ffebe9',
-      hoverText: '#cf222e',
+      hoverBg:
+        'var(--control-danger-bgColor-hover, var(--color-action-list-item-default-danger-hover-bg, rgba(255,235,233,0.64)))',
+      activeBg: 'var(--control-danger-bgColor-active, var(--color-action-list-item-default-danger-active-bg, #ffebe9))',
+      hoverText:
+        'var(--control-danger-fgColor-hover, var(--color-action-list-item-default-danger-hover-text, #cf222e))',
     },
   },
   switchTrack: {
-    bg: '#eaeef2',
-    hoverBg: 'hsla(210,24%,90%,1)',
-    activeBg: 'hsla(210,24%,88%,1)',
-    disabledBg: '#8c959f',
-    fg: '#57606a',
-    disabledFg: '#ffffff',
-    border: 'rgba(0,0,0,0)',
+    bg: 'var(--controlTrack-bgColor-rest, var(--color-switch-track-bg, #eaeef2))',
+    hoverBg: 'var(--controlTrack-bgColor-hover, var(--color-switch-track-hover-bg, hsla(210,24%,90%,1)))',
+    activeBg: 'var(--controlTrack-bgColor-active, var(--color-switch-track-active-bg, hsla(210,24%,88%,1)))',
+    disabledBg: 'var(--controlTrack-bgColor-disabled, var(--color-switch-track-disabled-bg, #8c959f))',
+    fg: 'var(--controlTrack-fgColor-rest, var(--color-switch-track-fg, #57606a))',
+    disabledFg: 'var(--controlTrack-fgColor-disabled, var(--color-switch-track-disabled-fg, #ffffff))',
+    border: 'var(--controlTrack-borderColor-rest, var(--color-switch-track-border, transparent))',
     checked: {
-      bg: '#0969da',
-      hoverBg: '#0860CA',
-      activeBg: '#0757BA',
-      fg: '#ffffff',
-      disabledFg: '#ffffff',
-      border: 'rgba(0,0,0,0)',
+      bg: 'var(--control-checked-bgColor-rest, var(--color-switch-track-checked-bg, #0969da))',
+      hoverBg: 'var(--control-checked-bgColor-hover, var(--color-switch-track-checked-hover-bg, #0860CA))',
+      activeBg: 'var(--control-checked-bgColor-active, var(--color-switch-track-checked-active-bg, #0757BA))',
+      fg: 'var(--control-checked-fgColor-rest, var(--color-switch-track-checked-fg, #ffffff))',
+      disabledFg: 'var(--control-checked-fgColor-disabled, var(--color-switch-track-checked-disabled-fg, #ffffff))',
+      border: 'var(--borderColor-transparent, var(--color-switch-track-checked-border, transparent))',
     },
   },
   switchKnob: {
-    bg: '#ffffff',
-    disabledBg: '#f6f8fa',
-    border: '#858F99',
+    bg: 'var(--controlKnob-bgColor-rest, var(--color-switch-knob-bg, #ffffff))',
+    disabledBg: 'var(--controlKnob-bgColor-disabled, var(--color-switch-knob-disabled-bg, #f6f8fa))',
+    border: 'var(--controlKnob-borderColor-rest, var(--color-switch-knob-border, #858F99))',
     checked: {
-      bg: '#ffffff',
-      disabledBg: '#f6f8fa',
-      border: '#0969da',
+      bg: 'var(--controlKnob-bgColor-checked, var(--color-switch-knob-checked-bg, #ffffff))',
+      disabledBg: 'var(--controlKnob-bgColor-disabled, var(--color-switch-knob-checked-disabled-bg, #f6f8fa))',
+      border: 'var(--controlKnob-borderColor-checked, var(--color-switch-knob-checked-border, #0969da))',
     },
   },
   segmentedControl: {
-    bg: '#eaeef2',
+    bg: 'var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg, #eaeef2))',
     button: {
-      bg: '#ffffff',
+      bg: 'var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg, #ffffff))',
       hover: {
-        bg: 'rgba(175,184,193,0.2)',
+        bg: 'var(--controlTrack-bgColor-hover, var(--color-segmented-control-button-hover-bg, rgba(175,184,193,0.2)))',
       },
       active: {
-        bg: 'rgba(175,184,193,0.4)',
+        bg: 'var(--controlTrack-bgColor-active, var(--color-segmented-control-button-hover-active-bg, rgba(175,184,193,0.4)))',
       },
       selected: {
-        border: '#8c959f',
+        border:
+          'var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-hover-active-selected-border, #8c959f))',
       },
     },
   },
   treeViewItem: {
     chevron: {
-      hoverBg: 'rgba(208,215,222,0.32)',
+      hoverBg:
+        'var(--control-transparent-bgColor-hover, var(--color-tree-view-item-chevron-hover-bg, rgba(208,215,222,0.32)))',
     },
     directory: {
-      fill: '#54aeff',
+      fill: 'var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-chevron-directory-fill, #54aeff))',
     },
   },
   fg: {
     default: '#24292f',
     muted: '#57606a',
-    subtle: '#6e7781',
-    onEmphasis: '#ffffff',
+    subtle: 'var(--fgColor-muted, var(--color-fg-subtle, #6e7781))',
+    onEmphasis: 'var(--fgColor-onEmphasis, var(--color-fg-on-emphasis, #ffffff))',
   },
   canvas: {
-    default: '#ffffff',
-    overlay: '#ffffff',
-    inset: '#f6f8fa',
-    subtle: '#f6f8fa',
+    default: 'var(--bgColor-default, var(--color-canvas-default, #ffffff))',
+    overlay: 'var(--overlay-bgColor, var(--color-canvas-overlay, #ffffff))',
+    inset: 'var(--bgColor-inset, var(--color-canvas-inset, #f6f8fa))',
+    subtle: 'var(--bgColor-muted, var(--color-canvas-subtle, #f6f8fa))',
   },
   border: {
-    default: '#d0d7de',
-    muted: 'hsla(210,18%,87%,1)',
-    subtle: 'rgba(27,31,36,0.15)',
+    default: 'var(--borderColor-default, var(--color-border-default, #d0d7de))',
+    muted: 'var(--borderColor-muted, var(--color-border-muted, hsla(210,18%,87%,1)))',
+    subtle: 'var(--borderColor-muted, var(--color-border-subtle, rgba(27,31,36,0.15)))',
   },
   shadow: {
-    small: '0 1px 0 rgba(27,31,36,0.04)',
-    medium: '0 3px 6px rgba(140,149,159,0.15)',
-    large: '0 8px 24px rgba(140,149,159,0.2)',
-    extraLarge: '0 12px 28px rgba(140,149,159,0.3)',
+    small: 'var(--shadow-resting-small, var(--color-shadow-small, 0 1px 0 rgba(27,31,36,0.04)))',
+    medium: 'var(--shadow-resting-medium, var(--color-shadow-medium, 0 3px 6px rgba(140,149,159,0.15)))',
+    large: 'var(--shadow-floating-large, var(--color-shadow-large, 0 8px 24px rgba(140,149,159,0.2)))',
+    extraLarge: 'var(--shadow-floating-xlarge, var(--color-shadow-extra-large, 0 12px 28px rgba(140,149,159,0.3)))',
   },
   neutral: {
-    emphasisPlus: '#24292f',
-    emphasis: '#6e7781',
-    muted: 'rgba(175,184,193,0.2)',
-    subtle: 'rgba(234,238,242,0.5)',
+    emphasisPlus: 'var(--bgColor-emphasis, var(--color-neutral-emphasis-plus, #24292f))',
+    emphasis: 'var(--bgColor-neutral-emphasis, var(--color-neutral-emphasis, #6e7781))',
+    muted: 'var(--borderColor-neutral-muted, var(--color-neutral-muted, rgba(175,184,193,0.2)))',
+    subtle: 'var(--bgColor-neutral-muted, var(--color-neutral-subtle, rgba(234,238,242,0.5)))',
   },
   accent: {
-    fg: '#0969da',
-    emphasis: '#0969da',
-    muted: 'rgba(84,174,255,0.4)',
-    subtle: '#ddf4ff',
+    fg: 'var(--fgColor-accent, var(--color-accent-fg, #0969da))',
+    emphasis: 'var(--bgColor-accent-emphasis, var(--color-accent-emphasis, #0969da))',
+    muted: 'var(--borderColor-accent-muted, var(--color-accent-muted, rgba(84,174,255,0.4)))',
+    subtle: 'var(--bgColor-accent-muted, var(--color-accent-subtle, #ddf4ff))',
   },
   success: {
-    fg: '#0969da',
+    fg: 'var(--fgColor-success, var(--color-success-fg, #0969da))',
     emphasis: '#0969da',
-    muted: 'rgba(84,174,255,0.4)',
-    subtle: '#ddf4ff',
+    muted: 'var(--borderColor-success-muted, var(--color-success-muted, rgba(84,174,255,0.4)))',
+    subtle: 'var(--bgColor-success-muted, var(--color-success-subtle, #ddf4ff))',
   },
   attention: {
-    fg: '#9a6700',
-    emphasis: '#9a6700',
-    muted: 'rgba(212,167,44,0.4)',
-    subtle: '#fff8c5',
+    fg: 'var(--fgColor-attention, var(--color-attention-fg, #9a6700))',
+    emphasis: 'var(--bgColor-attention-emphasis, var(--color-attention-emphasis, #9a6700))',
+    muted: 'var(--borderColor-attention-muted, var(--color-attention-muted, rgba(212,167,44,0.4)))',
+    subtle: 'var(--bgColor-attention-muted, var(--color-attention-subtle, #fff8c5))',
   },
   severe: {
-    fg: '#cf222e',
-    emphasis: '#cf222e',
-    muted: 'rgba(255,129,130,0.4)',
-    subtle: '#ffebe9',
+    fg: 'var(--fgColor-severe, var(--color-severe-fg, #cf222e))',
+    emphasis: 'var(--bgColor-severe-emphasis, var(--color-severe-emphasis, #cf222e))',
+    muted: 'var(--borderColor-severe-muted, var(--color-severe-muted, rgba(255,129,130,0.4)))',
+    subtle: 'var(--bgColor-severe-muted, var(--color-severe-subtle, #ffebe9))',
   },
   danger: {
     fg: '#cf222e',
-    emphasis: '#cf222e',
-    muted: 'rgba(255,129,130,0.4)',
-    subtle: '#ffebe9',
+    emphasis: 'var(--borderColor-danger-emphasis, var(--color-danger-emphasis, #cf222e))',
+    muted: 'var(--borderColor-danger-muted, var(--color-danger-muted, rgba(255,129,130,0.4)))',
+    subtle: 'var(--bgColor-danger-muted, var(--color-danger-subtle, #ffebe9))',
   },
   open: {
     fg: '#cf222e',
@@ -472,32 +505,32 @@ const colors = {
     subtle: '#f6f8fa',
   },
   done: {
-    fg: '#8250df',
-    emphasis: '#8250df',
-    muted: 'rgba(194,151,255,0.4)',
-    subtle: '#fbefff',
+    fg: 'var(--fgColor-done, var(--color-done-fg, #8250df))',
+    emphasis: 'var(--bgColor-done-emphasis, var(--color-done-emphasis, #8250df))',
+    muted: 'var(--borderColor-done-muted, var(--color-done-muted, rgba(194,151,255,0.4)))',
+    subtle: 'var(--bgColor-done-muted, var(--color-done-subtle, #fbefff))',
   },
   sponsors: {
-    fg: '#bf3989',
-    emphasis: '#bf3989',
-    muted: 'rgba(255,128,200,0.4)',
-    subtle: '#ffeff7',
+    fg: 'var(--fgColor-sponsors, var(--color-sponsors-fg, #bf3989))',
+    emphasis: 'var(--bgColor-sponsors-emphasis, var(--color-sponsors-emphasis, #bf3989))',
+    muted: 'var(--borderColor-sponsors-muted, var(--color-sponsors-muted, rgba(255,128,200,0.4)))',
+    subtle: 'var(--bgColor-sponsors-muted, var(--color-sponsors-subtle, #ffeff7))',
   },
   primer: {
     fg: {
-      disabled: '#8c959f',
+      disabled: 'var(--fgColor-disabled, var(--color-primer-fg-disabled, #8c959f))',
     },
     canvas: {
-      backdrop: 'rgba(27,31,36,0.5)',
-      sticky: 'rgba(255,255,255,0.95)',
+      backdrop: 'var(--overlay-backdrop-bgColor, var(--color-primer-fg-canvas-backdrop, rgba(27,31,36,0.5)))',
+      sticky: 'var(--color-primer-canvas-sticky, rgba(255,255,255,0.95))',
     },
     border: {
-      active: '#fd8c73',
-      contrast: 'rgba(27,31,36,0.1)',
+      active: 'var(--underlineNav-borderColor-active, var(--color-primer-border-active, #fd8c73))',
+      contrast: 'var(--borderColor-muted, var(--color-primer-border-contrast, rgba(27,31,36,0.1)))',
     },
     shadow: {
-      highlight: 'inset 0 1px 0 rgba(255,255,255,0.25)',
-      inset: 'inset 0 1px 0 rgba(208,215,222,0.2)',
+      highlight: 'var(--shadow-highlight, var(--color-primer-shadow-highlight, inset 0 1px 0 rgba(255,255,255,0.25)))',
+      inset: 'var(--shadow-inset, var(--color-primer-shadow-inset, inset 0 1px 0 rgba(208,215,222,0.2)))',
     },
   },
   scale: {
diff --git a/src/utils/theme.js b/src/utils/theme.js
index bf890c042c6..f126d9b518b 100644
--- a/src/utils/theme.js
+++ b/src/utils/theme.js
@@ -21,6 +21,7 @@ function isColorValue(value) {
   if (value.startsWith('#')) return true // #hex
   if (value.startsWith('rgb')) return true // rgb, rgba
   if (value.startsWith('hsl')) return true // hsl, hsla
+  if (value.startsWith('var')) return true // var(--color)
   return false
 }