diff --git a/.changeset/thirty-mirrors-switch.md b/.changeset/thirty-mirrors-switch.md
new file mode 100644
index 00000000000..2eb14f67731
--- /dev/null
+++ b/.changeset/thirty-mirrors-switch.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add missing CSS vars to legacy-theme
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-high-contrast-linux.png
index 87c7eccada7..2e6c5bb9d0a 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-dark-high-contrast-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-dark-high-contrast-linux.png
index d7ad996b931..2973acf8456 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-dark-high-contrast-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-high-contrast-linux.png
index 807d9bd3efe..34bd710b65d 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-high-contrast-linux.png differ
diff --git a/src/legacy-theme/ts/colors/dark.ts b/src/legacy-theme/ts/colors/dark.ts
index 4dbfcd39283..b104c898a90 100644
--- a/src/legacy-theme/ts/colors/dark.ts
+++ b/src/legacy-theme/ts/colors/dark.ts
@@ -193,7 +193,7 @@ const colors = {
   },
   control: {
     borderColor: {
-      emphasis: 'var(--color-control-border-color-emphasis, #606771)',
+      emphasis: 'var(--control-borderColor-emphasis, var(--color-control-border-color-emphasis, #606771))',
     },
   },
   avatar: {
@@ -298,10 +298,9 @@ const colors = {
       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',
+      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)))// HI_KATIE: no matches',
+        '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(5,29,77,0.2)))',
       selectedText: 'var(--button-outline-fgColor-active, var(--color-btn-outline-selected-text, #ffffff))',
diff --git a/src/legacy-theme/ts/colors/dark_colorblind.ts b/src/legacy-theme/ts/colors/dark_colorblind.ts
index 0c337764a2e..500f26e01af 100644
--- a/src/legacy-theme/ts/colors/dark_colorblind.ts
+++ b/src/legacy-theme/ts/colors/dark_colorblind.ts
@@ -193,7 +193,7 @@ const colors = {
   },
   control: {
     borderColor: {
-      emphasis: 'var(--color-control-border-color-emphasis, #606771)',
+      emphasis: 'var(--control-borderColor-emphasis, var(--color-control-border-color-emphasis, #606771))',
     },
   },
   avatar: {
@@ -431,8 +431,8 @@ const colors = {
     },
   },
   fg: {
-    default: '#c9d1d9',
-    muted: '#8b949e',
+    default: 'var(--fgColor-default, var(--color-fg-default, #c9d1d9))',
+    muted: 'var(--fgColor-muted, var(--color-fg-muted, #8b949e))',
     subtle: 'var(--fgColor-muted, var(--color-fg-subtle, #6e7681))',
     onEmphasis: 'var(--fgColor-onEmphasis, var(--color-fg-on-emphasis, #ffffff))',
   },
@@ -460,7 +460,7 @@ const colors = {
     subtle: 'var(--bgColor-neutral-muted, var(--color-neutral-subtle, rgba(110,118,129,0.1)))',
   },
   accent: {
-    fg: '#58a6ff',
+    fg: 'var(--fgColor-accent, var(--color-accent-fg, #58a6ff))',
     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)))',
@@ -490,16 +490,16 @@ const colors = {
     subtle: 'var(--bgColor-danger-muted, var(--color-danger-subtle, rgba(212,118,22,0.1)))',
   },
   open: {
-    fg: '#ec8e2c',
-    emphasis: '#b76100',
-    muted: 'rgba(212,118,22,0.4)',
-    subtle: 'rgba(212,118,22,0.15)',
+    fg: 'var(--fgColor-open, var(--color-open-fg, #ec8e2c))',
+    emphasis: 'var(--borderColor-open-emphasis, var(--color-open-emphasis, #b76100))',
+    muted: 'var(--borderColor-open-muted, var(--color-open-muted, rgba(212,118,22,0.4)))',
+    subtle: 'var(--bgColor-open-muted, var(--color-open-subtle, rgba(212,118,22,0.15)))',
   },
   closed: {
-    fg: '#8b949e',
-    emphasis: '#6e7681',
-    muted: 'rgba(110,118,129,0.4)',
-    subtle: 'rgba(110,118,129,0.1)',
+    fg: 'var(--fgColor-closed, var(--color-open-fg, #8b949e))',
+    emphasis: 'var(--borderColor-closed-emphasis, var(--color-closed-emphasis, #6e7681))',
+    muted: 'var(--borderColor-closed-muted, var(--color-closed-muted, rgba(110,118,129,0.4)))',
+    subtle: 'var(--bgColor-closed-muted, var(--color-closed-subtle, rgba(110,118,129,0.1)))',
   },
   done: {
     fg: 'var(--fgColor-done, var(--color-done-fg, #a371f7))',
diff --git a/src/legacy-theme/ts/colors/dark_dimmed.ts b/src/legacy-theme/ts/colors/dark_dimmed.ts
index 8c3dc1fa397..10bdf26ed26 100644
--- a/src/legacy-theme/ts/colors/dark_dimmed.ts
+++ b/src/legacy-theme/ts/colors/dark_dimmed.ts
@@ -193,7 +193,7 @@ const colors = {
   },
   control: {
     borderColor: {
-      emphasis: 'var(--color-control-border-color-emphasis, #606771)',
+      emphasis: 'var(--control-borderColor-emphasis, var(--color-control-border-color-emphasis, #606771))',
     },
   },
   avatar: {
@@ -430,8 +430,8 @@ const colors = {
     },
   },
   fg: {
-    default: '#adbac7',
-    muted: '#768390',
+    default: 'var(--fgColor-default, var(--color-fg-default, #adbac7))',
+    muted: 'var(--fgColor-muted, var(--color-fg-muted, #768390))',
     subtle: 'var(--fgColor-muted, var(--color-fg-subtle, #636e7b))',
     onEmphasis: 'var(--fgColor-onEmphasis, var(--color-fg-on-emphasis, #cdd9e5))',
   },
@@ -459,7 +459,7 @@ const colors = {
     subtle: 'var(--bgColor-neutral-muted, var(--color-neutral-subtle, rgba(99,110,123,0.1)))',
   },
   accent: {
-    fg: '#539bf5',
+    fg: 'var(--fgColor-acccent, var(--color-accent-fg, #539bf5))',
     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)))',
diff --git a/src/legacy-theme/ts/colors/dark_high_contrast.ts b/src/legacy-theme/ts/colors/dark_high_contrast.ts
index 3f0ec11c061..3c549db1538 100644
--- a/src/legacy-theme/ts/colors/dark_high_contrast.ts
+++ b/src/legacy-theme/ts/colors/dark_high_contrast.ts
@@ -8,29 +8,29 @@ const colors = {
   diffBlob: {
     addition: {
       numText: 'var(--diffBlob-addition-fgColor-num, var(--color-diff-blob-addition-num-text, #f0f3f6))',
-      fg: '#0a0c10',
+      fg: 'var(--diffBlob-addition-fgColor-text, var(--color-diff-blob-addition-fg, #0a0c10))',
       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: 'var(--diffBlob-deletion-fgColor-num, var(--color-diff-blob-deletion-num-text, #f0f3f6))',
-      fg: '#0a0c10',
+      fg: 'var(--diffBlob-deletion-fgColor-text, var(--color-diff-blob-deletion-fg, #0a0c10))',
       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)',
+      numBg: 'var(--diffBlob-hunk-bgColor-num, var(--color-diff-blob-hunk-num-bg, rgba(64,158,255,0.4)))',
     },
     expander: {
-      icon: '#f0f3f6',
+      icon: 'var(--diffBlob-expander-iconColor, var(--color-diff-blob-expander-icon, #f0f3f6))',
     },
     selectedLineHighlightMixBlendMode: 'var(--color-diff-blob-selected-line-highlight-mix-blend-mode, screen)',
   },
   diffstat: {
-    deletionBorder: '#ffb1af',
-    additionBorder: '#4ae168',
+    deletionBorder: 'var(--color-diffstat-deletion-border, #ffb1af)',
+    additionBorder: 'var(--color-diffstat-addition-border, #4ae168)',
     additionBg: 'var(--diffStat-addition-bgColor, var(--color-diffstat-addition-bg, #26cd4d))',
   },
   searchKeyword: {
@@ -80,7 +80,7 @@ const colors = {
       '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)',
+    selectionBg: 'var(--codeMirror-selection-bgColor, var(--color-codemirror-selection-bg, rgba(64,158,255,0.4)))',
     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))',
@@ -193,18 +193,18 @@ const colors = {
   },
   control: {
     borderColor: {
-      emphasis: '#9ea7b3',
+      emphasis: 'var(--control-borderColor-emphasis, var(--color-control-border-color-emphasis, #9ea7b3))',
     },
   },
   avatar: {
     bg: 'var(--avatar-bgColor, var(--color-avatar-bg, rgba(255,255,255,0.1)))',
-    border: 'rgba(255,255,255,0.9)',
+    border: 'var(--avatar-borderColor, var(--color-avatar-border, rgba(255,255,255,0.9)))',
     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',
+    border: 'var(--topicTag-borderColor, var(--color-topic-tag-border, #409eff))',
   },
   counter: {
     border: 'var(--counter-borderColor, var(--color-counter-border, transparent))',
@@ -270,24 +270,26 @@ const colors = {
     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)',
+    selectedBg: 'var(--button-default-bgColor-selected, var(--color-btn-selected-bg, rgba(82,89,100,0.9)))',
     counterBg: 'var(--buttonCounter-default-bgColor-rest, var(--color-btn-counter-bg, #525964))',
     primary: {
-      text: '#0a0c10',
+      text: 'var(--button-primary-fgColor-rest, var(--color-btn-primary-text, #0a0c10))',
       bg: 'var(--button-primary-bgColor-rest, var(--color-btn-primary-bg, #09b43a))',
-      border: '#4ae168',
+      border: 'var(--button-primary-borderColor-rest, var(--color-btn-primary-border, #4ae168))',
       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',
+      hoverBg: 'var(--button-primary-bgColor-hover, var(--color-btn-primary-hover-bg, #26cd4d))',
+      hoverBorder: 'var(--button-primary-borderColor-hover, var(--color-btn-primary-hover-border, #4ae168))',
       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)',
-      icon: '#0a0c10',
-      counterBg: 'rgba(1,4,9,0.15)',
+      disabledText:
+        'var(--button-primary-fgColor-disabled, var(--color-btn-primary-disabled-text, rgba(10,12,16,0.5)))',
+      disabledBg: 'var(--button-primary-bgColor-disabled, var(--color-btn-primary-disabled-bg, rgba(9,180,58,0.6)))',
+      disabledBorder:
+        'var(--button-primary-borderColor-disabled, var(--color-btn-primary-disabled-border, rgba(74,225,104,0.4)))',
+      icon: 'var(--button-primary-iconColor-rest, var(--color-btn-primary-icon, #0a0c10))',
+      counterBg: 'var(--buttonCounter-primary-bgColor-rest, var(--color-btn-primary-counter-bg, rgba(1,4,9,0.15)))',
     },
     outline: {
       text: 'var(--button-outline-fgColor-rest, var(--color-btn-outline-text, #409eff))',
@@ -324,7 +326,8 @@ const colors = {
       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)',
+      hoverCounterBg:
+        'var(--buttonCounter-danger-bgColor-hover, var(--color-btn-danger-hover-counter-bg, rgba(1,4,9,0.15)))',
       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))',
@@ -334,7 +337,7 @@ const colors = {
       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)',
+      counterBg: 'var(--buttonCounter-danger-bgColor-rest, var(--color-btn-danger-counter-bg, rgba(1,4,9,0.15)))',
       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:
@@ -347,34 +350,37 @@ const colors = {
     },
   },
   underlinenav: {
-    icon: '#f0f3f6',
-    borderHover: '#bdc4cc',
+    icon: 'var(--underlineNav-iconColor-rest, var(--color-underlinenav-icon, #f0f3f6))',
+    borderHover: 'var(--underlineNav-borderColor-hover, var(--color-underlinenav-border-hover, #bdc4cc))',
   },
   actionListItem: {
-    inlineDivider: '#7a828e',
+    inlineDivider: 'var(--borderColor-muted, var(--color-action-list-item-inline-divider, #7a828e))',
     default: {
-      hoverBg: '#272b33',
-      hoverBorder: '#7a828e',
-      activeBg: '#525964',
-      activeBorder: '#9ea7b3',
-      selectedBg: '#525964',
+      hoverBg: 'var(--control-transparent-bgColor-hover, var(--color-action-list-item-default-hover-bg, #272b33))',
+      hoverBorder:
+        'var(--control-transparent-borderColor-hover, var(--color-action-list-item-default-hover-border, #7a828e))',
+      activeBg: 'var(--control-transparent-bgColor-active, var(--color-action-list-item-default-active-bg, #525964))',
+      activeBorder:
+        'var(--control-transparent-borderColor-active, var(--color-action-list-item-default-active-border, #9ea7b3))',
+      selectedBg:
+        'var(--control-transparent-bgColor-selected, var(--color-action-list-item-default-selected-bg, #525964))',
     },
     danger: {
-      hoverBg: '#ff6a69',
-      activeBg: '#ff4445',
-      hoverText: '#0a0c10',
+      hoverBg: 'var(--control-danger-bgColor-hover, var(--color-action-list-item-danger-hover-bg, #ff6a69))',
+      activeBg: 'var(--control-danger-bgColor-active, var(--color-action-list-item-danger-active-bg, #ff4445))',
+      hoverText: 'var(--control-danger-fgColor-hover, var(--color-action-list-item-danger-hover-text, #0a0c10))',
     },
   },
   switchTrack: {
-    bg: '#9ea7b3',
-    hoverBg: 'hsla(214,12%,61%,1)',
-    activeBg: 'hsla(214,12%,58%,1)',
+    bg: 'var(--controlTrack-bgColor-rest, var(--color-switch-track-bg, #9ea7b3))',
+    hoverBg: 'var(--controlTrack-bgColor-hover, var(--color-switch-track-hover-bg, hsla(214,12%,61%,1)))',
+    activeBg: 'var(--controlTrack-bgColor-active, var(--color-switch-track-active-bg, hsla(214,12%,58%,1)))',
     disabledBg: 'var(--controlTrack-bgColor-disabled, var(--color-switch-track-disabled-bg, #272b33))',
-    fg: '#0a0c10',
+    fg: 'var(--controlTrack-fgColor-rest, var(--color-switch-track-fg, #0a0c10))',
     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',
+      bg: 'var(--control-checked-bgColor-rest, var(--color-switch-track-checked-bg, #409eff))',
       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)))',
@@ -385,12 +391,12 @@ const colors = {
   },
   switchKnob: {
     bg: 'var(--controlKnob-bgColor-rest, var(--color-switch-knob-bg, #0a0c10))',
-    border: '#9ea7b3',
+    border: 'var(--controlKnob-borderColor-rest, var(--color-switch-knob-border, #9ea7b3))',
     disabledBg: 'var(--controlKnob-bgColor-disabled, var(--color-switch-knob-disabled-bg, #272b33))',
     checked: {
       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',
+      border: 'var(--controlKnob-borderColor-checked, var(--color-switch-knob-checked-border, #409eff))',
     },
   },
   segmentedControl: {
@@ -410,17 +416,17 @@ const colors = {
   },
   treeViewItem: {
     chevron: {
-      hoverBg: '#525964',
+      hoverBg: 'var(--control-transparent-bgColor-hover, var(--color-tree-view-item-chevron-hover-bg, #525964))',
     },
     directory: {
       fill: 'var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-directory-fill, #f0f3f6))',
     },
   },
   fg: {
-    default: '#f0f3f6',
-    muted: '#f0f3f6',
+    default: 'var(--fgColor-default, var(--color-fg-default, #f0f3f6))',
+    muted: 'var(--fgColor-muted, var(--color-fg-muted, #f0f3f6))',
     subtle: 'var(--fgColor-muted, var(--color-fg-subtle, #9ea7b3))',
-    onEmphasis: '#0a0c10',
+    onEmphasis: 'var(--fgColor-onEmphasis, var(--color-fg-on-emphasis, #0a0c10))',
   },
   canvas: {
     default: 'var(--bgColor-default, var(--color-canvas-default, #0a0c10))',
@@ -429,9 +435,9 @@ const colors = {
     subtle: 'var(--bgColor-muted, var(--color-canvas-subtle, #272b33))',
   },
   border: {
-    default: '#7a828e',
-    muted: '#7a828e',
-    subtle: '#7a828e',
+    default: 'var(--borderColor-default, var(--color-border-default, #7a828e))',
+    muted: 'var(--borderColor-muted, var(--color-border-muted, #7a828e))',
+    subtle: 'var(--borderColor-muted, var(--color-border-subtle, #7a828e))',
   },
   shadow: {
     small: 'var(--shadow-resting-small, var(--color-shadow-small, 0 0 transparent))',
@@ -440,39 +446,39 @@ const colors = {
     extraLarge: 'var(--shadow-floating-xlarge, var(--color-shadow-extra-large, 0 12px 48px #010409))',
   },
   neutral: {
-    emphasisPlus: '#ffffff',
-    emphasis: '#9ea7b3',
+    emphasisPlus: 'var(--bgColor-emphasis, var(--color-neutral-emphasis-plus, #ffffff))',
+    emphasis: 'var(--bgColor-neutral-emphasis, var(--color-neutral-emphasis, #9ea7b3))',
     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',
+    fg: 'var(--fgColor-accent, var(--color-accent-fg, #71b7ff))',
     emphasis: 'var(--bgColor-accent-emphasis, var(--color-accent-emphasis, #409eff))',
-    muted: '#409eff',
+    muted: 'var(--borderColor-accent-muted, var(--color-accent-muted, #409eff))',
     subtle: 'var(--bgColor-accent-muted, var(--color-accent-subtle, rgba(64,158,255,0.1)))',
   },
   success: {
     fg: 'var(--fgColor-success, var(--color-success-fg, #26cd4d))',
     emphasis: 'var(--bgColor-success-emphasis, var(--color-success-emphasis, #09b43a))',
-    muted: '#09b43a',
+    muted: 'var(--borderColor-success-muted, var(--color-success-muted, #09b43a))',
     subtle: 'var(--bgColor-success-muted, var(--color-success-subtle, rgba(9,180,58,0.15)))',
   },
   attention: {
     fg: 'var(--fgColor-attention, var(--color-attention-fg, #f0b72f))',
     emphasis: 'var(--bgColor-attention-emphasis, var(--color-attention-emphasis, #e09b13))',
-    muted: '#e09b13',
+    muted: 'var(--borderColor-attention-muted, var(--color-attention-muted, #e09b13))',
     subtle: 'var(--bgColor-attention-muted, var(--color-attention-subtle, rgba(224,155,19,0.15)))',
   },
   severe: {
     fg: 'var(--fgColor-severe, var(--color-severe-fg, #e7811d))',
     emphasis: 'var(--bgColor-severe-emphasis, var(--color-severe-emphasis, #e7811d))',
-    muted: '#e7811d',
+    muted: 'var(--borderColor-severe-muted, var(--color-severe-muted, #e7811d))',
     subtle: 'var(--bgColor-severe-muted, var(--color-severe-subtle, rgba(231,129,29,0.1)))',
   },
   danger: {
     fg: 'var(--fgColor-danger, var(--color-danger-fg, #ff6a69))',
     emphasis: 'var(--borderColor-danger-emphasis, var(--color-danger-emphasis, #ff6a69))',
-    muted: '#ff6a69',
+    muted: 'var(--borderColor-danger-muted, var(--color-danger-muted, #ff6a69))',
     subtle: 'var(--bgColor-danger-muted, var(--color-danger-subtle, rgba(255,106,105,0.1)))',
   },
   open: {
@@ -490,13 +496,13 @@ const colors = {
   done: {
     fg: 'var(--fgColor-done, var(--color-done-fg, #b780ff))',
     emphasis: 'var(--bgColor-done-emphasis, var(--color-done-emphasis, #b87fff))',
-    muted: '#b780ff',
+    muted: 'var(--borderColor-done-muted, var(--color-done-muted, #b780ff))',
     subtle: 'var(--bgColor-done-muted, var(--color-done-subtle, rgba(183,128,255,0.1)))',
   },
   sponsors: {
     fg: 'var(--fgColor-sponsors, var(--color-sponsors-fg, #ef6eb1))',
     emphasis: 'var(--bgColor-sponsors-emphasis, var(--color-sponsors-emphasis, #ef6eb1))',
-    muted: '#ef6eb1',
+    muted: 'var(--borderColor-sponsors-muted, var(--color-sponsors-muted, #ef6eb1))',
     subtle: 'var(--bgColor-sponsors-muted, var(--color-sponsors-subtle, rgba(239,110,177,0.1)))',
   },
   primer: {
diff --git a/src/legacy-theme/ts/colors/dark_tritanopia.ts b/src/legacy-theme/ts/colors/dark_tritanopia.ts
index 6d6eac50e8c..674898fdfaf 100644
--- a/src/legacy-theme/ts/colors/dark_tritanopia.ts
+++ b/src/legacy-theme/ts/colors/dark_tritanopia.ts
@@ -193,7 +193,7 @@ const colors = {
   },
   control: {
     borderColor: {
-      emphasis: 'var(--color-control-border-color-emphasis, #606771)',
+      emphasis: 'var(--control-borderColor-emphasis, var(--color-control-border-color-emphasis, #606771))',
     },
   },
   avatar: {
@@ -430,8 +430,8 @@ const colors = {
     },
   },
   fg: {
-    default: '#c9d1d9',
-    muted: '#8b949e',
+    default: 'var(--fgColor-default, var(--color-fg-default, #c9d1d9))',
+    muted: 'var(--fgColor-muted, var(--color-fg-muted, #8b949e))',
     subtle: 'var(--fgColor-muted, var(--color-fg-subtle, #6e7681))',
     onEmphasis: 'var(--fgColor-onEmphasis, var(--color-fg-on-emphasis, #ffffff))',
   },
@@ -459,7 +459,7 @@ const colors = {
     subtle: 'var(--bgColor-neutral-muted, var(--color-neutral-subtle, rgba(110,118,129,0.1)))',
   },
   accent: {
-    fg: '#58a6ff',
+    fg: 'var(--fgColor-accent, var(--color-accent-fg, #58a6ff))',
     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)))',
@@ -489,16 +489,16 @@ const colors = {
     subtle: 'var(--bgColor-danger-muted, var(--color-danger-subtle, rgba(248,81,73,0.1)))',
   },
   open: {
-    fg: '#ff7b72',
-    emphasis: '#da3633',
-    muted: 'rgba(248,81,73,0.4)',
-    subtle: 'rgba(248,81,73,0.15)',
+    fg: 'var(--fgColor-open, var(--color-open-fg, #ff7b72))',
+    emphasis: 'var(--bgColor-open-emphasis, var(--color-open-emphasis, #da3633))',
+    muted: 'var(--borderColor-open-muted, var(--color-open-muted, rgba(248,81,73,0.4)))',
+    subtle: 'var(--bgColor-open-muted, var(--color-open-subtle, rgba(248,81,73,0.15)))',
   },
   closed: {
-    fg: '#8b949e',
-    emphasis: '#6e7681',
-    muted: 'rgba(110,118,129,0.4)',
-    subtle: 'rgba(110,118,129,0.1)',
+    fg: 'var(--fgColor-closed, var(--color-closed-fg, #8b949e))',
+    emphasis: 'var(--bgColor-closed-emphasis, var(--color-closed-emphasis, #6e7681))',
+    muted: 'var(--borderColor-closed-muted, var(--color-closed-muted, rgba(110,118,129,0.4)))',
+    subtle: 'var(--bgColor-closed-muted, var(--color-closed-subtle, rgba(110,118,129,0.1)))',
   },
   done: {
     fg: 'var(--fgColor-done, var(--color-done-fg, #a371f7))',
diff --git a/src/legacy-theme/ts/colors/light.ts b/src/legacy-theme/ts/colors/light.ts
index 7823f0efa4b..7d0686b5bbf 100644
--- a/src/legacy-theme/ts/colors/light.ts
+++ b/src/legacy-theme/ts/colors/light.ts
@@ -193,7 +193,7 @@ const colors = {
   },
   control: {
     borderColor: {
-      emphasis: 'var(var(--color-control-border-color-emphasis, #858F99)',
+      emphasis: 'var(--control-borderColor-emphasis, var(--color-control-border-color-emphasis, #858F99))',
     },
   },
   avatar: {
diff --git a/src/legacy-theme/ts/colors/light_colorblind.ts b/src/legacy-theme/ts/colors/light_colorblind.ts
index c04aee97f46..7f9e48dc22f 100644
--- a/src/legacy-theme/ts/colors/light_colorblind.ts
+++ b/src/legacy-theme/ts/colors/light_colorblind.ts
@@ -9,16 +9,16 @@ const colors = {
     addition: {
       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)',
+      numBg: 'var(--diffBlob-addition-bgColor-num, var(--color-diff-blob-addition-num-bg, rgba(84,174,255,0.4)))',
+      lineBg: 'var(--diffBlob-addition-bgColor-line, var(--color-diff-blob-addition-line-bg, rgba(221,244,255,0.5)))',
+      wordBg: 'var(--diffBlob-addition-bgColor-word, var(--color-diff-blob-addition-word-bg, rgba(84,174,255,0.4)))',
     },
     deletion: {
       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)',
+      numBg: 'var(--diffBlob-deletion-bgColor-num, var(--color-diff-blob-deletion-num-bg, rgba(247,153,57,0.4)))',
+      lineBg: 'var(--diffBlob-deletion-bgColor-line, var(--color-diff-blob-deletion-line-bg, rgba(255,245,232,0.5)))',
+      wordBg: 'var(--diffBlob-deletion-bgColor-word, var(--color-diff-blob-deletion-word-bg, rgba(255,188,109,0.5)))',
     },
     hunk: {
       numBg: 'var(--diffBlob-hunk-bgColor-num, var(--color-diff-blob-hunk-num-bg, rgba(84,174,255,0.4)))',
@@ -193,7 +193,7 @@ const colors = {
   },
   control: {
     borderColor: {
-      emphasis: 'var(var(--color-control-border-color-emphasis, #858F99)',
+      emphasis: 'var(--control-borderColor-emphasis, var(--color-control-border-color-emphasis, #858F99))',
     },
   },
   avatar: {
@@ -280,7 +280,7 @@ const colors = {
       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',
+      hoverBg: 'var(--button-primary-bgColor-hover, var(--color-btn-primary-hover-bg, #0969da))',
       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)))',
@@ -288,7 +288,7 @@ const colors = {
         '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',
+      disabledBg: 'var(--button-primary-bgColor-disabled, var(--color-btn-primary-disabled-bg, #80ccff))',
       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)))',
@@ -434,8 +434,8 @@ const colors = {
     },
   },
   fg: {
-    default: '#24292f',
-    muted: '#57606a',
+    default: 'var(--fgColor-default, var(--color-fg-default, #24292f))',
+    muted: 'var(--fgColor-muted, var(--color-fg-muted, #57606a))',
     subtle: 'var(--fgColor-muted, var(--color-fg-subtle, #6e7781))',
     onEmphasis: 'var(--fgColor-onEmphasis, var(--color-fg-on-emphasis, #ffffff))',
   },
@@ -470,7 +470,7 @@ const colors = {
   },
   success: {
     fg: 'var(--fgColor-success, var(--color-success-fg, #0969da))',
-    emphasis: '#0969da',
+    emphasis: 'var(--bgColor-success-emphasis, var(--color-success-emphasis, #0969da))',
     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))',
   },
@@ -487,22 +487,22 @@ const colors = {
     subtle: 'var(--bgColor-severe-muted, var(--color-severe-subtle, #fff5e8))',
   },
   danger: {
-    fg: '#b35900',
+    fg: 'var(--fgColor-danger, var(--color-danger-fg, #b35900))',
     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',
-    emphasis: '#dd7815',
-    muted: 'rgba(247,153,57,0.4)',
-    subtle: '#fff5e8',
+    fg: 'var(--fgColor-open, var(--color-open-fg, #b35900))',
+    emphasis: 'var(--bgColor-open-emphasis, var(--color-open-emphasis, #dd7815))',
+    muted: 'var(--borderColor-open-muted, var(--color-open-muted, rgba(247,153,57,0.4)))',
+    subtle: 'var(--bgColor-open-muted, var(--color-open-subtle, #fff5e8))',
   },
   closed: {
-    fg: '#6e7781',
-    emphasis: '#6e7781',
-    muted: 'rgba(175,184,193,0.4)',
-    subtle: '#f6f8fa',
+    fg: 'var(--fgColor-closed, var(--color-closed-fg, #6e7781))',
+    emphasis: 'var(--bgColor-closed-emphasis, var(--color-closed-emphasis, #6e7781))',
+    muted: 'var(--borderColor-closed-muted, var(--color-closed-muted, rgba(175,184,193,0.4)))',
+    subtle: 'var(--bgColor-closed-muted, var(--color-closed-subtle, #f6f8fa))',
   },
   done: {
     fg: 'var(--fgColor-done, var(--color-done-fg, #8250df))',
diff --git a/src/legacy-theme/ts/colors/light_high_contrast.ts b/src/legacy-theme/ts/colors/light_high_contrast.ts
index 600a2ad3d23..86603404174 100644
--- a/src/legacy-theme/ts/colors/light_high_contrast.ts
+++ b/src/legacy-theme/ts/colors/light_high_contrast.ts
@@ -1,6 +1,6 @@
 const colors = {
   canvasDefaultTransparent: 'var(--bgColor-transparent, var(--color-canvas-default-transparent, rgba(255,255,255,0)))',
-  pageHeaderBg: '#ffffff',
+  pageHeaderBg: 'var(--page-header-bgColor, var(--color-page-header-bg, #ffffff))',
   marketingIcon: {
     primary: 'var(--color-marketing-icon-primary, #1168e3)',
     secondary: 'var(--color-marketing-icon-secondary, #368cf9)',
@@ -8,20 +8,20 @@ const colors = {
   diffBlob: {
     addition: {
       numText: 'var(--diffBlob-addition-fgColor-num, var(--color-diff-blob-addition-num-text, #0e1116))',
-      fg: '#ffffff',
+      fg: 'var(--diffBlob-addition-fgColor-text, var(--color-diff-blob-addition-fg, #ffffff))',
       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',
+      wordBg: 'var(--diffBlob-addition-bgColor-word, var(--color-diff-blob-addition-word-bg, #055d20))',
     },
     deletion: {
       numText: 'var(--diffBlob-deletion-fgColor-num, var(--color-diff-blob-deletion-num-text, #0e1116))',
-      fg: '#ffffff',
+      fg: 'var(--diffBlob-deletion-fgColor-text, var(--color-diff-blob-deletion-fg, #ffffff))',
       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',
+      wordBg: 'var(--diffBlob-deletion-bgColor-word, var(--color-diff-blob-deletion-word-bg, #a0111f))',
     },
     hunk: {
-      numBg: '#9cd7ff',
+      numBg: 'var(--diffBlob-hunk-bgColor-num, var(--color-diff-blob-hunk-num-bg, #9cd7ff))',
     },
     expander: {
       icon: 'var(--diffBlob-expander-iconColor, var(--color-diff-blob-expander-icon, #0e1116))',
@@ -193,7 +193,7 @@ const colors = {
   },
   control: {
     borderColor: {
-      emphasis: '#20252c',
+      emphasis: 'var(--control-borderColor-emphasis, var(--color-control-border-color-emphasis, #20252c))',
     },
   },
   avatar: {
@@ -204,10 +204,10 @@ const colors = {
     childShadow: 'var(--avatar-shadow, var(--color-avatar-child-shadow, 0 0 0 2px rgba(255,255,255,0.8)))',
   },
   topicTag: {
-    border: '#0349b4',
+    border: 'var(--topicTag-borderColor, var(--color-topic-tag-border, #0349b4))',
   },
   counter: {
-    border: '#20252c',
+    border: 'var(--counter-borderColor, var(--color-counter-border, #20252c))',
   },
   selectMenu: {
     backdropBorder: 'var(--selectMenu-borderColor, var(--color-select-menu-backdrop-border, transparent))',
@@ -222,7 +222,7 @@ const colors = {
   header: {
     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',
+    divider: 'var(--header-borderColor-divider, var(--color-header-divider, #acb6c0))',
     logo: 'var(--header-fgColor-logo, var(--color-header-logo, #ffffff))',
   },
   headerSearch: {
@@ -262,26 +262,26 @@ const colors = {
   },
   btn: {
     text: 'var(--button-default-fgColor-rest, var(--color-btn-text, #0e1116))',
-    bg: '#e7ecf0',
-    border: 'rgba(1,4,9,0.8)',
+    bg: 'var(--button-default-bgColor-rest, var(--color-btn-bg, #e7ecf0))',
+    border: 'var(--button-default-borderColor-rest, var(--color-btn-border, rgba(1,4,9,0.8)))',
     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',
+    hoverBg: 'var(--button-default-bgColor-hover, var(--color-btn-hover-bg, #ced5dc))',
     hoverBorder: 'var(--button-default-borderColor-hover, var(--color-btn-hover-border, rgba(1,4,9,0.8)))',
-    activeBg: '#acb6c0',
+    activeBg: 'var(--button-default-bgColor-active, var(--color-btn-active-bg, #acb6c0))',
     activeBorder: 'var(--button-default-borderColor-active, var(--color-btn-active-border, rgba(1,4,9,0.8)))',
-    selectedBg: '#acb6c0',
+    selectedBg: 'var(--button-default-bgColor-selected, var(--color-btn-selected-bg, #acb6c0))',
     counterBg: 'var(--buttonCounter-default-bgColor-rest, var(--color-btn-counter-bg, rgba(1,4,9,0.08)))',
     primary: {
       text: 'var(--button-primary-fgColor-rest, var(--color-btn-primary-text, #ffffff))',
-      bg: '#055d20',
-      border: '#013d14',
+      bg: 'var(--button-primary-bgColor-rest, var(--color-btn-primary-bg, #055d20))',
+      border: 'var(--button-primary-borderColor-rest, var(--color-btn-primary-border, #013d14))',
       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',
+      hoverBg: 'var(--button-primary-bgColor-hover, var(--color-btn-primary-hover-bg, #024c1a))',
+      hoverBorder: 'var(--button-primary-borderColor-hover, var(--color-btn-primary-hover-border, #013d14))',
       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)))',
@@ -294,22 +294,23 @@ const colors = {
       counterBg: 'var(--buttonCounter-primary-bgColor-rest, var(--color-btn-primary-counter-bg, rgba(0,35,11,0.2)))',
     },
     outline: {
-      text: '#023b95',
+      text: 'var(--button-outline-fgColor-rest, var(--color-btn-outline-text, #023b95))',
       hoverText: 'var(--button-outline-fgColor-hover, var(--color-btn-outline-hover-text, #ffffff))',
-      hoverBg: '#0349b4',
-      hoverBorder: '#022f7a',
+      hoverBg: 'var(--button-outline-bgColor-hover, var(--color-btn-outline-hover-bg, #0349b4))',
+      hoverBorder: 'var(--button-outline-borderColor-hover, var(--color-btn-outline-hover-border, #022f7a))',
       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',
+      selectedBg: 'var(--button-outline-bgColor-active, var(--color-btn-outline-selected-bg, #022f7a))',
+      selectedBorder: 'var(--button-outline-borderColor-active, var(--color-btn-outline-selected-border, #022f7a))',
       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',
+      disabledText:
+        'var(--button-outline-fgColor-disabled, var(--color-btn-outline-disabled-text, rgba(3,73,180,0.5)))',
+      disabledBg: 'var(--button-outline-bgColor-disabled, var(--color-btn-outline-disabled-bg, #e7ecf0))',
       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))',
@@ -319,26 +320,26 @@ const colors = {
         'var(--buttonCounter-outline-fgColor-disabled, var(--color-btn-outline-disabled-counter-fg, rgba(3,73,180,0.5)))',
     },
     danger: {
-      text: '#86061d',
+      text: 'var(--button-danger-fgColor-rest, var(--color-btn-danger-text, #86061d))',
       hoverText: 'var(--button-danger-fgColor-hover, var(--color-btn-danger-hover-text, #ffffff))',
-      hoverBg: '#a0111f',
-      hoverBorder: '#6e011a',
+      hoverBg: 'var(--button-danger-bgColor-hover, var(--color-btn-danger-hover-bg, #a0111f))',
+      hoverBorder: 'var(--button-danger-borderColor-hover, var(--color-btn-danger-hover-border, #6e011a))',
       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',
+      selectedBg: 'var(--button-danger-bgColor-active, var(--color-btn-danger-selected-bg, #6e011a))',
+      selectedBorder: 'var(--button-danger-borderColor-active, var(--color-btn-danger-selected-border, #6e011a))',
       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',
+      disabledBg: 'var(--button-danger-bgColor-disabled, var(--color-btn-danger-disabled-bg, #e7ecf0))',
       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',
+      icon: 'var(--button-danger-iconColor-rest, var(--color-btn-danger-icon, #86061d))',
       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))',
@@ -355,33 +356,36 @@ const colors = {
     borderHover: 'var(--underlineNav-borderColor-hover, var(--color-underlinenav-border-hover, rgba(172,182,192,0.2)))',
   },
   actionListItem: {
-    inlineDivider: '#88929d',
+    inlineDivider: 'var(--borderColor-muted, var(--color-action-list-item-inline-divider, #88929d))',
     default: {
-      hoverBg: '#e7ecf0',
-      hoverBorder: '#88929d',
-      activeBg: '#ced5dc',
-      activeBorder: '#20252c',
-      selectedBg: '#ced5dc',
+      hoverBg: 'var(--control-transparent-bgColor-hover, var(--color-action-list-item-default-hover-bg, #e7ecf0))',
+      hoverBorder:
+        'var(--control-transparent-borderColor-hover, var(--color-action-list-item-default-hover-border, #88929d))',
+      activeBg: 'var(--control-transparent-bgColor-active, var(--color-action-list-item-default-active-bg, #ced5dc))',
+      activeBorder:
+        'var(--control-transparent-borderColor-active, var(--color-action-list-item-default-active-border, #20252c))',
+      selectedBg:
+        'var(--control-transparent-bgColor-selected, var(--color-action-list-item-default-selected-bg, #ced5dc))',
     },
     danger: {
-      hoverBg: '#a0111f',
-      activeBg: '#6e011a',
-      hoverText: '#ffffff',
+      hoverBg: 'var(--control-danger-bgColor-hover, var(--color-action-list-item-danger-hover-bg, #a0111f))',
+      activeBg: 'var(--control-danger-bgColor-active, var(--color-action-list-item-danger-active-bg, #6e011a))',
+      hoverText: 'var(--control-danger-fgColor-hover, var(--color-action-list-item-danger-hover-text, #ffffff))',
     },
   },
   switchTrack: {
-    bg: '#66707b',
-    hoverBg: 'hsla(211,9%,47%,1)',
-    activeBg: 'hsla(211,9%,49%,1)',
+    bg: 'var(--controlTrack-bgColor-rest, var(--color-switch-track-bg, #66707b))',
+    hoverBg: 'var(--controlTrack-bgColor-hover, var(--color-switch-track-hover-bg, hsla(211,9%,47%,1)))',
+    activeBg: 'var(--controlTrack-bgColor-active, var(--color-switch-track-active-bg, hsla(211,9%,49%,1)))',
     disabledBg: 'var(--controlTrack-bgColor-disabled, var(--color-switch-track-disabled-bg, #88929d))',
-    fg: '#ffffff',
-    disabledFg: '#ffffff',
+    fg: 'var(--controlTrack-fgColor-rest, var(--color-switch-track-fg, #ffffff))',
+    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: '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',
+      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))',
     },
@@ -389,11 +393,11 @@ const colors = {
   switchKnob: {
     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',
+    border: 'var(--controlKnob-borderColor-rest, var(--color-switch-knob-border, #20252c))',
     checked: {
       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',
+      border: 'var(--controlKnob-borderColor-checked, var(--color-switch-knob-checked-border, #0349b4))',
     },
   },
   segmentedControl: {
@@ -414,28 +418,28 @@ const colors = {
   },
   treeViewItem: {
     chevron: {
-      hoverBg: '#ced5dc',
+      hoverBg: 'var(--control-transparent-bgColor-hover, var(--color-tree-view-item-chevron-hover-bg, #ced5dc))',
     },
     directory: {
       fill: 'var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-chevron-directory-fill, #368cf9))',
     },
   },
   fg: {
-    default: '#0e1116',
-    muted: '#0e1116',
+    default: 'var(--fgColor-default, var(--color-fg-default, #0e1116))',
+    muted: 'var(--fgColor-muted, var(--color-fg-muted, #0e1116))',
     subtle: 'var(--fgColor-muted, var(--color-fg-subtle, #66707b))',
     onEmphasis: 'var(--fgColor-onEmphasis, var(--color-fg-on-emphasis, #ffffff))',
   },
   canvas: {
     default: 'var(--bgColor-default, var(--color-canvas-default, #ffffff))',
     overlay: 'var(--overlay-bgColor, var(--color-canvas-overlay, #ffffff))',
-    inset: '#ffffff',
-    subtle: '#e7ecf0',
+    inset: 'var(--bgColor-inset, var(--color-canvas-inset, #ffffff))',
+    subtle: 'var(--bgColor-muted, var(--color-canvas-subtle, #e7ecf0))',
   },
   border: {
-    default: '#20252c',
-    muted: '#88929d',
-    subtle: 'rgba(1,4,9,0.8)',
+    default: 'var(--borderColor-default, var(--color-border-default, #20252c))',
+    muted: 'var(--borderColor-muted, var(--color-border-muted, #88929d))',
+    subtle: 'var(--borderColor-muted, var(--color-border-subtle, rgba(1,4,9,0.8)))',
   },
   shadow: {
     small: 'var(--shadow-resting-small, var(--color-shadow-small, 0 1px 0 rgba(1,4,9,0.04)))',
@@ -447,36 +451,36 @@ const colors = {
     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',
+    subtle: 'var(--bgColor-neutral-muted, var(--color-neutral-subtle, #e7ecf0))',
   },
   accent: {
     fg: 'var(--fgColor-accent, var(--color-accent-fg, #0349b4))',
     emphasis: 'var(--bgColor-accent-emphasis, var(--color-accent-emphasis, #0349b4))',
-    muted: '#368cf9',
+    muted: 'var(--borderColor-accent-muted, var(--color-accent-muted, #368cf9))',
     subtle: 'var(--bgColor-accent-muted, var(--color-accent-subtle, #dff7ff))',
   },
   success: {
     fg: 'var(--fgColor-success, var(--color-success-fg, #055d20))',
-    emphasis: '#055d20',
-    muted: '#26a148',
+    emphasis: 'var(--bgColor-success-emphasis, var(--color-success-emphasis, #055d20))',
+    muted: 'var(--borderColor-success-muted, var(--color-success-muted, #26a148))',
     subtle: 'var(--bgColor-success-muted, var(--color-success-subtle, #d2fedb))',
   },
   attention: {
     fg: 'var(--fgColor-attention, var(--color-attention-fg, #744500))',
-    emphasis: '#744500',
-    muted: '#b58407',
+    emphasis: 'var(--bgColor-attention-emphasis, var(--color-attention-emphasis, #744500))',
+    muted: 'var(--borderColor-attention-muted, var(--color-attention-muted, #b58407))',
     subtle: 'var(--bgColor-attention-muted, var(--color-attention-subtle, #fcf7be))',
   },
   severe: {
     fg: 'var(--fgColor-severe, var(--color-severe-fg, #873800))',
     emphasis: 'var(--bgColor-severe-emphasis, var(--color-severe-emphasis, #873800))',
-    muted: '#dc6d1a',
+    muted: 'var(--borderColor-severe-muted, var(--color-severe-muted, #dc6d1a))',
     subtle: 'var(--bgColor-severe-muted, var(--color-severe-subtle, #fff2d5))',
   },
   danger: {
     fg: 'var(--fgColor-danger, var(--color-danger-fg, #d1242f))',
     emphasis: 'var(--borderColor-danger-emphasis, var(--color-danger-emphasis, #a0111f))',
-    muted: '#ee5a5d',
+    muted: 'var(--borderColor-danger-muted, var(--color-danger-muted, #ee5a5d))',
     subtle: 'var(--bgColor-danger-muted, var(--color-danger-subtle, #fff0ee))',
   },
   open: {
@@ -494,13 +498,13 @@ const colors = {
   done: {
     fg: 'var(--fgColor-done, var(--color-done-fg, #622cbc))',
     emphasis: 'var(--bgColor-done-emphasis, var(--color-done-emphasis, #622cbc))',
-    muted: '#a371f7',
+    muted: 'var(--borderColor-done-muted, var(--color-done-muted, #a371f7))',
     subtle: 'var(--bgColor-done-muted, var(--color-done-subtle, #faf0fe))',
   },
   sponsors: {
     fg: 'var(--fgColor-sponsors, var(--color-sponsors-fg, #971368))',
     emphasis: 'var(--bgColor-sponsors-emphasis, var(--color-sponsors-emphasis, #971368))',
-    muted: '#ed4baf',
+    muted: 'var(--borderColor-sponsors-muted, var(--color-sponsors-muted, #ed4baf))',
     subtle: 'var(--bgColor-sponsors-muted, var(--color-sponsors-subtle, #feeff7))',
   },
   primer: {
diff --git a/src/legacy-theme/ts/colors/light_tritanopia.ts b/src/legacy-theme/ts/colors/light_tritanopia.ts
index ab7fc7ecb2d..6174f94224d 100644
--- a/src/legacy-theme/ts/colors/light_tritanopia.ts
+++ b/src/legacy-theme/ts/colors/light_tritanopia.ts
@@ -9,16 +9,16 @@ const colors = {
     addition: {
       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)',
+      numBg: 'var(--diffBlob-addition-bgColor-num, var(--color-diff-blob-addition-num-bg, rgba(84,174,255,0.4)))',
+      lineBg: 'var(--diffBlob-addition-bgColor-line, var(--color-diff-blob-addition-line-bg, rgba(221,244,255,0.5)))',
+      wordBg: 'var(--diffBlob-addition-bgColor-word, var(--color-diff-blob-addition-word-bg, rgba(84,174,255,0.4)))',
     },
     deletion: {
       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)',
+      numBg: 'var(--diffBlob-deletion-bgColor-num, var(--color-diff-blob-deletion-num-bg, rgba(255,129,130,0.4)))',
+      lineBg: 'var(--diffBlob-deletion-bgColor-line, var(--color-diff-blob-deletion-line-bg, rgba(255,235,233,0.5)))',
+      wordBg: 'var(--diffBlob-deletion-bgColor-word, var(--color-diff-blob-deletion-word-bg, rgba(255,171,168,0.5)))',
     },
     hunk: {
       numBg: 'var(--diffBlob-hunk-bgColor-num, var(--color-diff-blob-hunk-num-bg, rgba(84,174,255,0.4)))',
@@ -193,7 +193,7 @@ const colors = {
   },
   control: {
     borderColor: {
-      emphasis: 'var(var(--color-control-border-color-emphasis, #858F99)',
+      emphasis: 'var(--control-borderColor-emphasis, var(--color-control-border-color-emphasis, #858F99))',
     },
   },
   avatar: {
@@ -280,7 +280,7 @@ const colors = {
       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',
+      hoverBg: 'var(--button-primary-bgColor-hover, var(--color-btn-primary-hover-bg, #0969da))',
       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)))',
@@ -288,7 +288,7 @@ const colors = {
         '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',
+      disabledBg: 'var(--button-primary-bgColor-disabled, var(--color-btn-primary-disabled-bg, #80ccff))',
       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)))',
@@ -434,8 +434,8 @@ const colors = {
     },
   },
   fg: {
-    default: '#24292f',
-    muted: '#57606a',
+    default: 'var(--fgColor-default, var(--color-fg-default, #24292f))',
+    muted: 'var(--fgColor-muted, var(--color-fg-muted, #57606a))',
     subtle: 'var(--fgColor-muted, var(--color-fg-subtle, #6e7781))',
     onEmphasis: 'var(--fgColor-onEmphasis, var(--color-fg-on-emphasis, #ffffff))',
   },
@@ -470,7 +470,7 @@ const colors = {
   },
   success: {
     fg: 'var(--fgColor-success, var(--color-success-fg, #0969da))',
-    emphasis: '#0969da',
+    emphasis: 'var(--bgColor-success-emphasis, var(--color-success-emphasis, #0969da))',
     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))',
   },
@@ -487,22 +487,22 @@ const colors = {
     subtle: 'var(--bgColor-severe-muted, var(--color-severe-subtle, #ffebe9))',
   },
   danger: {
-    fg: '#cf222e',
+    fg: 'var(--fgColor-danger, var(--color-danger-fg, #cf222e))',
     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',
-    emphasis: '#fa4549',
-    muted: 'rgba(255,129,130,0.4)',
-    subtle: '#ffebe9',
+    fg: 'var(--fgColor-open, var(--color-open-fg, #cf222e))',
+    emphasis: 'var(--bgColor-open-emphasis, var(--color-open-emphasis, #fa4549))',
+    muted: 'var(--borderColor-open-muted, var(--color-open-muted, rgba(255,129,130,0.4)))',
+    subtle: 'var(--bgColor-open-muted, var(--color-open-subtle, #ffebe9))',
   },
   closed: {
-    fg: '#6e7781',
-    emphasis: '#6e7781',
-    muted: 'rgba(175,184,193,0.4)',
-    subtle: '#f6f8fa',
+    fg: 'var(--fgColor-closed, var(--color-closed-fg, #6e7781))',
+    emphasis: 'var(--bgColor-closed-emphasis, var(--color-closed-emphasis, #6e7781))',
+    muted: 'var(--borderColor-closed-muted, var(--color-closed-muted, rgba(175,184,193,0.4)))',
+    subtle: 'var(--bgColor-closed-muted, var(--color-closed-subtle, #f6f8fa))',
   },
   done: {
     fg: 'var(--fgColor-done, var(--color-done-fg, #8250df))',