Add Primitive v8 colors (take 3) (#2123)

Co-authored-by: langermank <langermank@users.noreply.github.com> Co-authored-by: Jon Rohan <rohan@github.com>
primer · Jul 13, 2023 · f9119d9 · f9119d9
1 parent 4fccc17
commit f9119d9
Show file tree

Hide file tree

Showing 118 changed files with 1,021 additions and 7,503 deletions.
diff --git a/.changeset/yellow-ducks-act.md b/.changeset/yellow-ducks-act.md
@@ -0,0 +1,7 @@
+---
+"@primer/view-components": minor
+---
+
+- Use Primitive v8 color tokens
+- Add tests for compiled CSS to ensure CSS color variables have a fallback
+
diff --git a/...enshots/snapshots.test.ts-snapshots/primer/alpha/action_bar/default/default.png b/...enshots/snapshots.test.ts-snapshots/primer/alpha/action_bar/default/default.png
diff --git a/...enshots/snapshots.test.ts-snapshots/primer/alpha/action_bar/default/focused.png b/...enshots/snapshots.test.ts-snapshots/primer/alpha/action_bar/default/focused.png
diff --git a/.../primer/alpha/action_menu/single_select_with_internal_label/dark_colorblind.png b/.../primer/alpha/action_menu/single_select_with_internal_label/dark_colorblind.png
diff --git a/...s/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/dark_colorblind.png b/...s/snapshots.test.ts-snapshots/primer/alpha/action_menu/wide/dark_colorblind.png
diff --git a/...ots/snapshots.test.ts-snapshots/primer/alpha/check_box/with_caption/default.png b/...ots/snapshots.test.ts-snapshots/primer/alpha/check_box/with_caption/default.png
diff --git a/...ots/snapshots.test.ts-snapshots/primer/alpha/check_box/with_caption/focused.png b/...ots/snapshots.test.ts-snapshots/primer/alpha/check_box/with_caption/focused.png
diff --git a/...apshots.test.ts-snapshots/primer/alpha/check_box_group/with_caption/default.png b/...apshots.test.ts-snapshots/primer/alpha/check_box_group/with_caption/default.png
diff --git a/...apshots.test.ts-snapshots/primer/alpha/check_box_group/with_caption/focused.png b/...apshots.test.ts-snapshots/primer/alpha/check_box_group/with_caption/focused.png
diff --git a/...t/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/light.png b/...t/screenshots/snapshots.test.ts-snapshots/primer/alpha/dialog/default/light.png
diff --git a/...ts/snapshots.test.ts-snapshots/primer/alpha/dialog/default/light_colorblind.png b/...ts/snapshots.test.ts-snapshots/primer/alpha/dialog/default/light_colorblind.png
diff --git a/...snapshots.test.ts-snapshots/primer/alpha/dialog/default/light_high_contrast.png b/...snapshots.test.ts-snapshots/primer/alpha/dialog/default/light_high_contrast.png
diff --git a/...t/screenshots/snapshots.test.ts-snapshots/primer/alpha/menu/default/default.png b/...t/screenshots/snapshots.test.ts-snapshots/primer/alpha/menu/default/default.png
diff --git a/...t/screenshots/snapshots.test.ts-snapshots/primer/alpha/menu/default/focused.png b/...t/screenshots/snapshots.test.ts-snapshots/primer/alpha/menu/default/focused.png
diff --git a/...nshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/default/default.png b/...nshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/default/default.png
diff --git a/...nshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/default/focused.png b/...nshots/snapshots.test.ts-snapshots/primer/alpha/multi_input/default/focused.png
diff --git a/...shots/snapshots.test.ts-snapshots/primer/alpha/multi_input/disabled/default.png b/...shots/snapshots.test.ts-snapshots/primer/alpha/multi_input/disabled/default.png
diff --git a/...shots/snapshots.test.ts-snapshots/primer/alpha/multi_input/disabled/focused.png b/...shots/snapshots.test.ts-snapshots/primer/alpha/multi_input/disabled/focused.png
diff --git a/...hots.test.ts-snapshots/primer/alpha/multi_input/visually_hide_label/default.png b/...hots.test.ts-snapshots/primer/alpha/multi_input/visually_hide_label/default.png
diff --git a/...hots.test.ts-snapshots/primer/alpha/multi_input/visually_hide_label/focused.png b/...hots.test.ts-snapshots/primer/alpha/multi_input/visually_hide_label/focused.png
diff --git a/...s/snapshots.test.ts-snapshots/primer/alpha/multi_input/with_caption/default.png b/...s/snapshots.test.ts-snapshots/primer/alpha/multi_input/with_caption/default.png
diff --git a/...s/snapshots.test.ts-snapshots/primer/alpha/multi_input/with_caption/focused.png b/...s/snapshots.test.ts-snapshots/primer/alpha/multi_input/with_caption/focused.png
diff --git a/...reenshots/snapshots.test.ts-snapshots/primer/alpha/nav_list/default/default.png b/...reenshots/snapshots.test.ts-snapshots/primer/alpha/nav_list/default/default.png
diff --git a/...reenshots/snapshots.test.ts-snapshots/primer/alpha/nav_list/default/focused.png b/...reenshots/snapshots.test.ts-snapshots/primer/alpha/nav_list/default/focused.png
diff --git a/...shots/snapshots.test.ts-snapshots/primer/alpha/radio_button/checked/default.png b/...shots/snapshots.test.ts-snapshots/primer/alpha/radio_button/checked/default.png
diff --git a/...shots/snapshots.test.ts-snapshots/primer/alpha/radio_button/checked/focused.png b/...shots/snapshots.test.ts-snapshots/primer/alpha/radio_button/checked/focused.png
diff --git a/...shots/snapshots.test.ts-snapshots/primer/alpha/radio_button/default/default.png b/...shots/snapshots.test.ts-snapshots/primer/alpha/radio_button/default/default.png
diff --git a/...shots/snapshots.test.ts-snapshots/primer/alpha/radio_button/default/focused.png b/...shots/snapshots.test.ts-snapshots/primer/alpha/radio_button/default/focused.png
diff --git a/...hots/snapshots.test.ts-snapshots/primer/alpha/radio_button/disabled/default.png b/...hots/snapshots.test.ts-snapshots/primer/alpha/radio_button/disabled/default.png
diff --git a/...hots/snapshots.test.ts-snapshots/primer/alpha/radio_button/disabled/focused.png b/...hots/snapshots.test.ts-snapshots/primer/alpha/radio_button/disabled/focused.png
diff --git a/...ots.test.ts-snapshots/primer/alpha/radio_button/visually_hide_label/default.png b/...ots.test.ts-snapshots/primer/alpha/radio_button/visually_hide_label/default.png
diff --git a/...ots.test.ts-snapshots/primer/alpha/radio_button/visually_hide_label/focused.png b/...ots.test.ts-snapshots/primer/alpha/radio_button/visually_hide_label/focused.png
diff --git a/.../snapshots.test.ts-snapshots/primer/alpha/radio_button/with_caption/default.png b/.../snapshots.test.ts-snapshots/primer/alpha/radio_button/with_caption/default.png
diff --git a/.../snapshots.test.ts-snapshots/primer/alpha/radio_button/with_caption/focused.png b/.../snapshots.test.ts-snapshots/primer/alpha/radio_button/with_caption/focused.png
diff --git a/...snapshots.test.ts-snapshots/primer/alpha/radio_button_group/default/default.png b/...snapshots.test.ts-snapshots/primer/alpha/radio_button_group/default/default.png
diff --git a/...snapshots.test.ts-snapshots/primer/alpha/radio_button_group/default/focused.png b/...snapshots.test.ts-snapshots/primer/alpha/radio_button_group/default/focused.png
diff --git a/...hots.test.ts-snapshots/primer/alpha/radio_button_group/with_caption/default.png b/...hots.test.ts-snapshots/primer/alpha/radio_button_group/with_caption/default.png
diff --git a/...hots.test.ts-snapshots/primer/alpha/radio_button_group/with_caption/focused.png b/...hots.test.ts-snapshots/primer/alpha/radio_button_group/with_caption/focused.png
diff --git a/.../snapshots.test.ts-snapshots/primer/alpha/segmented_control/default/focused.png b/.../snapshots.test.ts-snapshots/primer/alpha/segmented_control/default/focused.png
diff --git a/...s.test.ts-snapshots/primer/alpha/segmented_control/full_width_large/focused.png b/...s.test.ts-snapshots/primer/alpha/segmented_control/full_width_large/focused.png
diff --git a/....test.ts-snapshots/primer/alpha/segmented_control/full_width_medium/default.png b/....test.ts-snapshots/primer/alpha/segmented_control/full_width_medium/default.png
diff --git a/....test.ts-snapshots/primer/alpha/segmented_control/full_width_medium/focused.png b/....test.ts-snapshots/primer/alpha/segmented_control/full_width_medium/focused.png
diff --git a/...s.test.ts-snapshots/primer/alpha/segmented_control/full_width_small/focused.png b/...s.test.ts-snapshots/primer/alpha/segmented_control/full_width_small/focused.png
diff --git a/...st.ts-snapshots/primer/alpha/segmented_control/icons_and_text_large/focused.png b/...st.ts-snapshots/primer/alpha/segmented_control/icons_and_text_large/focused.png
diff --git a/...t.ts-snapshots/primer/alpha/segmented_control/icons_and_text_medium/focused.png b/...t.ts-snapshots/primer/alpha/segmented_control/icons_and_text_medium/focused.png
diff --git a/...s.test.ts-snapshots/primer/alpha/segmented_control/with_link_as_tag/focused.png b/...s.test.ts-snapshots/primer/alpha/segmented_control/with_link_as_tag/focused.png
diff --git a/...creenshots/snapshots.test.ts-snapshots/primer/alpha/select/disabled/default.png b/...creenshots/snapshots.test.ts-snapshots/primer/alpha/select/disabled/default.png
diff --git a/...creenshots/snapshots.test.ts-snapshots/primer/alpha/select/disabled/focused.png b/...creenshots/snapshots.test.ts-snapshots/primer/alpha/select/disabled/focused.png
diff --git a/...eenshots/snapshots.test.ts-snapshots/primer/alpha/select/full_width/default.png b/...eenshots/snapshots.test.ts-snapshots/primer/alpha/select/full_width/default.png
diff --git a/...eenshots/snapshots.test.ts-snapshots/primer/alpha/select/full_width/focused.png b/...eenshots/snapshots.test.ts-snapshots/primer/alpha/select/full_width/focused.png
diff --git a/...screenshots/snapshots.test.ts-snapshots/primer/alpha/select/invalid/default.png b/...screenshots/snapshots.test.ts-snapshots/primer/alpha/select/invalid/default.png
diff --git a/...screenshots/snapshots.test.ts-snapshots/primer/alpha/select/invalid/focused.png b/...screenshots/snapshots.test.ts-snapshots/primer/alpha/select/invalid/focused.png
diff --git a/...snapshots.test.ts-snapshots/primer/alpha/select/visually_hide_label/default.png b/...snapshots.test.ts-snapshots/primer/alpha/select/visually_hide_label/default.png
diff --git a/...snapshots.test.ts-snapshots/primer/alpha/select/visually_hide_label/focused.png b/...snapshots.test.ts-snapshots/primer/alpha/select/visually_hide_label/focused.png
diff --git a/...nshots/snapshots.test.ts-snapshots/primer/alpha/select/with_caption/default.png b/...nshots/snapshots.test.ts-snapshots/primer/alpha/select/with_caption/default.png
diff --git a/...nshots/snapshots.test.ts-snapshots/primer/alpha/select/with_caption/focused.png b/...nshots/snapshots.test.ts-snapshots/primer/alpha/select/with_caption/focused.png
diff --git a/...shots.test.ts-snapshots/primer/alpha/select/with_validation_message/default.png b/...shots.test.ts-snapshots/primer/alpha/select/with_validation_message/default.png
diff --git a/...shots.test.ts-snapshots/primer/alpha/select/with_validation_message/focused.png b/...shots.test.ts-snapshots/primer/alpha/select/with_validation_message/focused.png
diff --git a/...enshots/snapshots.test.ts-snapshots/primer/alpha/text_area/disabled/default.png b/...enshots/snapshots.test.ts-snapshots/primer/alpha/text_area/disabled/default.png
diff --git a/...enshots/snapshots.test.ts-snapshots/primer/alpha/text_area/disabled/focused.png b/...enshots/snapshots.test.ts-snapshots/primer/alpha/text_area/disabled/focused.png
diff --git a/...nshots/snapshots.test.ts-snapshots/primer/alpha/text_field/disabled/default.png b/...nshots/snapshots.test.ts-snapshots/primer/alpha/text_field/disabled/default.png
diff --git a/...nshots/snapshots.test.ts-snapshots/primer/alpha/text_field/disabled/focused.png b/...nshots/snapshots.test.ts-snapshots/primer/alpha/text_field/disabled/focused.png
diff --git a/...reenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/inset/default.png b/...reenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/inset/default.png
diff --git a/...reenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/inset/focused.png b/...reenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/inset/focused.png
diff --git a/...est.ts-snapshots/primer/alpha/underline_nav/with_icons_and_counters/default.png b/...est.ts-snapshots/primer/alpha/underline_nav/with_icons_and_counters/default.png
diff --git a/...est.ts-snapshots/primer/alpha/underline_nav/with_icons_and_counters/focused.png b/...est.ts-snapshots/primer/alpha/underline_nav/with_icons_and_counters/focused.png
diff --git a/...enshots/snapshots.test.ts-snapshots/primer/beta/breadcrumbs/default/default.png b/...enshots/snapshots.test.ts-snapshots/primer/beta/breadcrumbs/default/default.png
diff --git a/...enshots/snapshots.test.ts-snapshots/primer/beta/breadcrumbs/default/focused.png b/...enshots/snapshots.test.ts-snapshots/primer/beta/breadcrumbs/default/focused.png
diff --git a/...eenshots/snapshots.test.ts-snapshots/primer/beta/button/all_schemes/default.png b/...eenshots/snapshots.test.ts-snapshots/primer/beta/button/all_schemes/default.png
diff --git a/...eenshots/snapshots.test.ts-snapshots/primer/beta/button/all_schemes/focused.png b/...eenshots/snapshots.test.ts-snapshots/primer/beta/button/all_schemes/focused.png
diff --git a/...napshots.test.ts-snapshots/primer/beta/button/invisible_all_visuals/default.png b/...napshots.test.ts-snapshots/primer/beta/button/invisible_all_visuals/default.png
diff --git a/...napshots.test.ts-snapshots/primer/beta/button/invisible_all_visuals/focused.png b/...napshots.test.ts-snapshots/primer/beta/button/invisible_all_visuals/focused.png
diff --git a/...s/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_accent/default.png b/...s/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_accent/default.png
diff --git a/...s/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_accent/focused.png b/...s/snapshots.test.ts-snapshots/primer/beta/label/color_scheme_accent/focused.png
diff --git a/...screenshots/snapshots.test.ts-snapshots/primer/beta/subhead/actions/default.png b/...screenshots/snapshots.test.ts-snapshots/primer/beta/subhead/actions/default.png
diff --git a/...screenshots/snapshots.test.ts-snapshots/primer/beta/subhead/actions/focused.png b/...screenshots/snapshots.test.ts-snapshots/primer/beta/subhead/actions/focused.png
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -1,5 +1,6 @@
 {
   "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
+  "plugins": ["@primer/stylelint-config/plugins/no-deprecated-colors"],
   "ignoreFiles": ["app/**/*.css", "**/*.js", "**/*.ts"],
   "rules": {
     "custom-property-pattern": null,
@@ -14,6 +15,7 @@
       {
         "ignoreAtRules": ["mixin", "define-mixin"]
       }
-    ]
+    ],
+    "primer/no-deprecated-colors": true
   }
 }
diff --git a/app/components/primer/alpha/action_bar.pcss b/app/components/primer/alpha/action_bar.pcss
@@ -41,7 +41,7 @@
 .ActionBar-divider {
   height: calc(var(--control-medium-size) / 2);
   margin: 0 var(--controlStack-medium-gap-condensed);
-  border-left: var(--borderWidth-thin) solid var(--color-border-subtle);
+  border-left: var(--borderWidth-thin) solid var(--borderColor-muted);
 }
 
 .ActionBar--small .ActionBar-divider {

diff --git a/app/components/primer/alpha/action_list.pcss b/app/components/primer/alpha/action_list.pcss
@@ -28,7 +28,7 @@
     width: 100%;
     height: 1px;
     content: '';
-    background: var(--color-action-list-item-inline-divider);
+    background: var(--borderColor-muted, var(--color-action-list-item-inline-divider));
   }
 
   /* if descriptionWrap--inline exists, move pseudo divider to wrapper */
@@ -40,7 +40,7 @@
       width: 100%;
       height: var(--borderWidth-thin);
       content: '';
-      background: var(--color-action-list-item-inline-divider);
+      background: var(--borderColor-muted, var(--color-action-list-item-inline-divider));
     }
 
     /* unset the default label pseudo */
@@ -75,7 +75,7 @@
 .ActionListItem {
   position: relative;
   list-style: none;
-  background-color: transparent;
+  background-color: var(--control-transparent-bgColor-rest);
   border-radius: var(--borderRadius-medium);
 
   /* state */
@@ -113,12 +113,12 @@
 
       @media (hover: hover) {
         &:hover {
-          background-color: var(--color-action-list-item-default-hover-bg);
+          background-color: var(--control-transparent-bgColor-hover);
         }
       }
 
       &:active {
-        background-color: var(--color-action-list-item-default-active-bg);
+        background-color: var(--control-transparent-bgColor-active);
       }
     }
   }
@@ -130,25 +130,25 @@
     @media (hover: hover) {
       &:hover {
         cursor: pointer;
-        background-color: var(--color-action-list-item-default-hover-bg);
+        background-color: var(--control-transparent-bgColor-hover);
 
         &:not(.ActionListItem--navActive, :focus-visible) {
           /* Support for "Windows high contrast mode" */
           outline: solid var(--borderWidth-thin) transparent;
           outline-offset: calc(-1 * var(--borderWidth-thin));
-          box-shadow: var(--boxShadow-thin) var(--color-action-list-item-default-active-border);
+          box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);
         }
       }
     }
 
     &:active {
-      background: var(--color-action-list-item-default-active-bg);
+      background: var(--control-transparent-bgColor-active);
 
       &:not(.ActionListItem--navActive) {
         /* Support for "Windows high contrast mode" https:sarahmhigley.com/writing/whcm-quick-tips/ */
         outline: solid var(--borderWidth-thin) transparent;
         outline-offset: calc(-1 * var(--borderWidth-thin));
-        box-shadow: var(--boxShadow-thin) var(--color-action-list-item-default-active-border);
+        box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);
       }
 
       & .ActionListItem-label::before,
@@ -162,11 +162,11 @@
 
   &[aria-selected='true'] {
     font-weight: var(--base-text-weight-normal);
-    background: var(--color-action-list-item-default-selected-bg);
+    background: var(--control-transparent-bgColor-selected);
 
     @media (hover: hover) {
       &:hover {
-        background-color: var(--color-action-list-item-default-hover-bg);
+        background-color: var(--control-transparent-bgColor-hover);
       }
     }
 
@@ -195,11 +195,11 @@
     }
 
     &:not(.ActionListItem--danger) {
-      background: var(--color-action-list-item-default-selected-bg);
+      background: var(--control-transparent-bgColor-selected);
 
       @media (hover: hover) {
         &:hover {
-          background-color: var(--color-action-list-item-default-hover-bg);
+          background-color: var(--control-transparent-bgColor-hover);
         }
       }
 
@@ -222,11 +222,11 @@
     & .ActionListContent {
       & .ActionListItem-label,
       & .ActionListItem-description {
-        color: var(--color-primer-fg-disabled);
+        color: var(--control-fgColor-disabled);
       }
 
       & .ActionListItem-visual {
-        fill: var(--color-primer-fg-disabled);
+        fill: var(--control-fgColor-disabled);
       }
     }
 
@@ -243,31 +243,31 @@
   /* danger */
   &.ActionListItem--danger {
     & .ActionListItem-label {
-      color: var(--color-danger-fg);
+      color: var(--control-danger-fgColor-rest);
     }
 
     & .ActionListItem-visual {
-      color: var(--color-danger-fg);
+      color: var(--control-danger-fgColor-rest);
     }
 
     @media (hover: hover) {
       &:hover {
-        background: var(--color-action-list-item-danger-hover-bg);
+        background: var(--control-danger-bgColor-hover);
 
         & .ActionListItem-label,
         & .ActionListItem-visual {
-          color: var(--color-action-list-item-danger-hover-text);
+          color: var(--control-danger-fgColor-hover);
         }
       }
     }
 
     & .ActionListContent {
       &:active {
-        background: var(--color-action-list-item-danger-active-bg);
+        background: var(--control-danger-bgColor-active);
 
         & .ActionListItem-label,
         & .ActionListItem-visual {
-          color: var(--color-action-list-item-danger-hover-text);
+          color: var(--control-danger-fgColor-hover);
         }
       }
     }
@@ -281,7 +281,7 @@
   width: 100%;
   padding-block: var(--actionListContent-paddingBlock);
   padding-inline: var(--control-medium-paddingInline-condensed);
-  color: var(--color-fg-default);
+  color: var(--control-fgColor-rest);
   text-align: left;
   user-select: none;
   background-color: transparent;
@@ -310,11 +310,11 @@
   &[aria-disabled='true'] {
     & .ActionListItem-label,
     & .ActionListItem-description {
-      color: var(--color-primer-fg-disabled);
+      color: var(--control-fgColor-disabled);
     }
 
     & .ActionListItem-visual {
-      fill: var(--color-primer-fg-disabled);
+      fill: var(--control-fgColor-disabled);
     }
 
     @media (hover: hover) {
@@ -399,7 +399,7 @@
 
     /* show active indicator on parent collapse if child is active */
     &.ActionListContent--hasActiveSubItem {
-      background: var(--color-action-list-item-default-selected-bg);
+      background: var(--control-transparent-bgColor-selected);
 
       & .ActionListItem-label {
         font-weight: var(--base-text-weight-semibold);
@@ -451,13 +451,13 @@
     /* checkbox */
     & .ActionListItem-multiSelectIcon {
       & .ActionListItem-multiSelectIconRect {
-        fill: var(--color-accent-fg);
-        stroke: var(--color-accent-fg);
+        fill: var(--control-checked-bgColor-rest);
+        stroke: var(--control-checked-bgColor-rest);
         stroke-width: var(--borderWidth-thin, 1px);
       }
 
       & .ActionListItem-multiSelectCheckmark {
-        fill: var(--color-fg-on-emphasis);
+        fill: var(--fgColor-onEmphasis);
       }
     }
   }
@@ -494,15 +494,15 @@
     /* checkbox */
     & .ActionListItem-multiSelectIcon {
       & .ActionListItem-multiSelectIconRect {
-        fill: var(--color-canvas-default);
-        stroke: var(--color-border-default);
+        fill: var(--bgColor-default);
+        stroke: var(--control-borderColor-rest);
         stroke-width: var(--borderWidth-thin, 1px);
       }
     }
 
     & .ActionListItem-multiSelectIconRect {
-      fill: var(--color-canvas-default);
-      border: var(--borderWidth-thin, 1px) solid var(--color-border-default);
+      fill: var(--bgColor-default);
+      border: var(--borderWidth-thin, 1px) solid var(--control-borderColor-rest);
     }
   }
 
@@ -573,7 +573,7 @@
   font-size: var(--text-body-size-small);
   font-weight: var(--base-text-weight-normal);
   line-height: var(--text-body-lineHeight-small);
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted);
 }
 
 /* helper for grid alignment with multi-line content
@@ -582,9 +582,9 @@
 .ActionListItem-action {
   display: flex;
   min-height: var(--control-medium-lineBoxHeight);
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted);
   pointer-events: none;
-  fill: var(--color-fg-muted);
+  fill: var(--fgColor-muted);
   align-items: center;
 }
 
@@ -594,7 +594,7 @@
   font-size: var(--text-body-size-medium);
   font-weight: var(--base-text-weight-normal);
   line-height: var(--text-body-lineHeight-medium);
-  color: var(--color-fg-default);
+  color: var(--fgColor-default);
   grid-area: label;
 }
 
@@ -651,7 +651,7 @@
     font-size: var(--text-body-size-small);
     line-height: var(--text-body-lineHeight-small);
     font-weight: var(--base-text-weight-semibold);
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted);
     flex-direction: column;
   }
 
@@ -664,24 +664,24 @@
     margin-block-end: var(--base-size-8);
     margin-inline: calc(-1 * var(--base-size-8));
     list-style: none;
-    background: var(--color-action-list-item-inline-divider);
+    background: var(--borderColor-muted, var(--color-action-list-item-inline-divider));
     border: 0;
   }
 
   & .ActionList-sectionDivider-title {
     font-size: var(--text-body-size-small);
     font-weight: var(--base-text-weight-semibold);
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted);
   }
 }
 
 .ActionList-sectionDivider--filled {
   margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));
   margin-block-end: var(--base-size-8);
   margin-inline: calc(-1 * var(--base-size-8));
-  background: var(--color-canvas-subtle);
-  border-top: solid var(--borderWidth-thin) var(--color-action-list-item-inline-divider);
-  border-bottom: solid var(--borderWidth-thin) var(--color-action-list-item-inline-divider);
+  background: var(--bgColor-muted);
+  border-top: solid var(--borderWidth-thin) var(--borderColor-muted, var(--color-action-list-item-inline-divider));
+  border-bottom: solid var(--borderWidth-thin) var(--borderColor-muted, var(--color-action-list-item-inline-divider));
 
   /* if no children, treat as divider */
   &:empty {

diff --git a/app/components/primer/alpha/auto_complete.pcss b/app/components/primer/alpha/auto_complete.pcss
@@ -36,7 +36,7 @@
   align-items: center;
 
   &:focus-within {
-    border-color: var(--color-accent-fg);
+    border-color: var(--borderColor-accent-emphasis);
 
     @mixin focusBoxShadowInset;
   }
@@ -68,10 +68,10 @@
   overflow-y: auto;
   font-size: 13px;
   list-style: none;
-  background: var(--color-canvas-overlay);
-  border: var(--borderWidth-thin) solid var(--color-border-default);
+  background: var(--overlay-bgColor);
+  border: var(--borderWidth-thin) solid var(--borderColor-default);
   border-radius: var(--borderRadius-medium);
-  box-shadow: var(--color-shadow-medium);
+  box-shadow: var(--shadow-resting-medium);
 }
 
 /* One of the items that appears within an autocomplete group
@@ -83,19 +83,19 @@
   padding: 4px 8px;
   overflow: hidden;
   font-weight: var(--base-text-weight-semibold);
-  color: var(--color-fg-default);
+  color: var(--fgColor-default);
   text-align: left;
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
-  background-color: var(--color-canvas-overlay);
+  background-color: var(--overlay-bgColor);
   border: 0;
 
   &:hover {
-    color: var(--color-fg-on-emphasis);
+    color: var(--fgColor-onEmphasis);
     text-decoration: none;
-    background-color: var(--color-accent-emphasis);
+    background-color: var(--bgColor-accent-emphasis);
 
     /* Inherit color on all child elements to ensure enough contrast */
     & * {
@@ -106,9 +106,9 @@
   &.selected,
   &[aria-selected='true'],
   &.navigation-focus {
-    color: var(--color-fg-on-emphasis);
+    color: var(--fgColor-onEmphasis);
     text-decoration: none;
-    background-color: var(--color-accent-emphasis);
+    background-color: var(--bgColor-accent-emphasis);
 
     /* Inherit color on all child elements to ensure enough contrast */
     & * {