Use CSS color vars with fallback in legacy Primitive tokens

.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.

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;

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;
 }
 

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) {

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

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 {

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)
   })
 })

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

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) {