@primer/css 21.0.3 → 21.0.4

package/select-menu/select-menu.scss

@@ -41,7 +41,7 @@ $SelectMenu-max-height: 480px !default;
   left: 0;
   pointer-events: none;
   content: '';
-  background-color: var(--color-primer-canvas-backdrop);
+  background-color: var(--overlay-backdrop-bgColor, var(--color-primer-canvas-backdrop));
 
   @include breakpoint(sm) {
     display: none;
@@ -61,11 +61,11 @@ $SelectMenu-max-height: 480px !default;
   overflow: hidden; // Enables border radius on scrollable child elements
   pointer-events: auto;
   flex-direction: column;
-  background-color: var(--color-canvas-overlay);
-  border: $border-width $border-style var(--color-select-menu-backdrop-border);
+  background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
+  border: $border-width $border-style var(--selectMenu-borderColor, var(--color-select-menu-backdrop-border));
   // stylelint-disable-next-line primer/borders
   border-radius: $border-radius * 2;
-  box-shadow: var(--color-shadow-large);
+  box-shadow: var(--shadow-floating-large, var(--color-shadow-large));
   animation: SelectMenu-modal-animation 0.12s cubic-bezier(0, 0.1, 0.1, 1) backwards;
 
   @keyframes SelectMenu-modal-animation {
@@ -88,9 +88,9 @@ $SelectMenu-max-height: 480px !default;
     max-height: $SelectMenu-max-height;
     margin: $spacer-2 0 $spacer-3 0;
     font-size: $font-size-small;
-    border-color: var(--color-border-default);
+    border-color: var(--borderColor-default, var(--color-border-default));
     border-radius: $border-radius;
-    box-shadow: var(--color-shadow-large);
+    box-shadow: var(--shadow-floating-large, var(--color-shadow-large));
     animation-name: SelectMenu-modal-animation--sm;
   }
 }
@@ -104,7 +104,7 @@ $SelectMenu-max-height: 480px !default;
   padding: $spacer-3;
   flex: none; // fixes header from getting squeezed in Safari iOS
   align-items: center;
-  border-bottom: $border-width $border-style var(--color-border-muted);
+  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   @include breakpoint(sm) {
     // stylelint-disable-next-line primer/spacing
@@ -126,7 +126,7 @@ $SelectMenu-max-height: 480px !default;
   padding: $spacer-3;
   margin: -$spacer-3;
   line-height: 1;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
   background-color: transparent;
   border: 0;
 
@@ -144,7 +144,7 @@ $SelectMenu-max-height: 480px !default;
 .SelectMenu-filter {
   padding: $spacer-3;
   margin: 0;
-  border-bottom: $border-width $border-style var(--color-border-muted);
+  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   @include breakpoint(sm) {
     padding: $spacer-2;
@@ -173,7 +173,7 @@ $SelectMenu-max-height: 480px !default;
   flex: auto;
   overflow-x: hidden;
   overflow-y: auto;
-  background-color: var(--color-canvas-overlay);
+  background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
   -webkit-overflow-scrolling: touch; // Adds momentum + bouncy scrolling
 }
 
@@ -187,12 +187,12 @@ $SelectMenu-max-height: 480px !default;
   width: 100%;
   padding: $spacer-3;
   overflow: hidden;
-  color: var(--color-fg-default);
+  color: var(--fgColor-default, var(--color-fg-default));
   text-align: left;
   cursor: pointer;
-  background-color: var(--color-canvas-overlay);
+  background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
   border: 0;
-  border-bottom: $border-width $border-style var(--color-border-muted);
+  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   @include breakpoint(sm) {
     // stylelint-disable-next-line primer/spacing
@@ -234,7 +234,7 @@ $SelectMenu-max-height: 480px !default;
   overflow-x: auto;
   overflow-y: hidden;
   // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 var(--color-border-muted);
+  box-shadow: inset 0 -1px 0 var(--borderColor-muted, var(--color-border-muted));
   -webkit-overflow-scrolling: touch;
 
   // Hide scrollbar so it doesn't cover the text
@@ -252,12 +252,12 @@ $SelectMenu-max-height: 480px !default;
   padding: $spacer-2 $spacer-3;
   font-size: $font-size-small;
   font-weight: $font-weight-semibold;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
   text-align: center;
   background-color: transparent;
   border: 0;
   // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 var(--color-border-muted);
+  box-shadow: inset 0 -1px 0 var(--borderColor-muted, var(--color-border-muted));
 
   @include breakpoint(sm) {
     flex: none;
@@ -270,14 +270,14 @@ $SelectMenu-max-height: 480px !default;
 
   &[aria-selected='true'] {
     z-index: 1; // Keeps box-shadow visible when hovering
-    color: var(--color-fg-default);
+    color: var(--fgColor-default, var(--color-fg-default));
     cursor: default;
-    background-color: var(--color-canvas-overlay);
+    background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
     // stylelint-disable-next-line primer/box-shadow
-    box-shadow: 0 0 0 1px var(--color-border-muted);
+    box-shadow: 0 0 0 1px var(--borderColor-muted, var(--color-border-muted));
 
     @include breakpoint(sm) {
-      border-color: var(--color-border-muted);
+      border-color: var(--borderColor-muted, var(--color-border-muted));
       box-shadow: none;
     }
   }
@@ -291,8 +291,8 @@ $SelectMenu-max-height: 480px !default;
   // stylelint-disable-next-line primer/spacing
   padding: 7px $spacer-3;
   text-align: center;
-  background-color: var(--color-canvas-overlay);
-  border-bottom: $border-width $border-style var(--color-border-muted);
+  background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
+  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 }
 
 // Blankslate and Loading
@@ -303,7 +303,7 @@ $SelectMenu-max-height: 480px !default;
 .SelectMenu-loading {
   padding: $spacer-4 $spacer-3;
   text-align: center;
-  background-color: var(--color-canvas-overlay);
+  background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
 }
 
 // Divider
@@ -315,13 +315,13 @@ $SelectMenu-max-height: 480px !default;
   margin: 0;
   font-size: $font-size-small;
   font-weight: $font-weight-semibold;
-  color: var(--color-fg-muted);
-  background-color: var(--color-canvas-subtle);
-  border-bottom: $border-width $border-style var(--color-border-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
+  background-color: var(--bgColor-muted, var(--color-canvas-subtle));
+  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   // Borderless
   .SelectMenu-list--borderless & {
-    border-top: $border-width $border-style var(--color-border-muted);
+    border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
     &:empty {
       padding: 0;
@@ -338,9 +338,9 @@ $SelectMenu-max-height: 480px !default;
   z-index: 0; // Avoid top border from getting covered by the negative margin of the list
   padding: $spacer-2 $spacer-3;
   font-size: $font-size-small;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
   text-align: center;
-  border-top: $border-width $border-style var(--color-border-muted);
+  border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   @include breakpoint(sm) {
     // stylelint-disable-next-line primer/spacing
@@ -387,7 +387,7 @@ $SelectMenu-max-height: 480px !default;
 
 .SelectMenu-item[aria-checked='true'] {
   font-weight: $font-weight-semibold;
-  color: var(--color-fg-default);
+  color: var(--fgColor-default, var(--color-fg-default));
 
   .SelectMenu-icon--check {
     visibility: visible;
@@ -402,7 +402,7 @@ $SelectMenu-max-height: 480px !default;
 
 .SelectMenu-item:disabled,
 .SelectMenu-item[aria-disabled='true'] {
-  color: var(--color-primer-fg-disabled);
+  color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
   pointer-events: none;
 }
 
@@ -413,33 +413,33 @@ $SelectMenu-max-height: 480px !default;
 @media (hover: hover) {
   body:not(.intent-mouse) .SelectMenu-closeButton:focus,
   .SelectMenu-closeButton:hover {
-    color: var(--color-fg-default);
+    color: var(--fgColor-default, var(--color-fg-default));
   }
 
   .SelectMenu-closeButton:active {
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted, var(--color-fg-muted));
   }
 
   body:not(.intent-mouse) .SelectMenu-item:focus,
   .SelectMenu-item:hover {
-    background-color: var(--color-neutral-subtle);
+    background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));
   }
 
   .SelectMenu-item:active {
-    background-color: var(--color-canvas-subtle);
+    background-color: var(--bgColor-muted, var(--color-canvas-subtle));
   }
 
   body:not(.intent-mouse) .SelectMenu-tab:focus {
-    background-color: var(--color-select-menu-tap-focus-bg);
+    background-color: var(--selectMenu-bgColor-active, var(--color-select-menu-tap-focus-bg));
   }
 
   .SelectMenu-tab:hover {
-    color: var(--color-fg-default);
+    color: var(--fgColor-default, var(--color-fg-default));
   }
 
   .SelectMenu-tab:not([aria-selected='true']):active {
-    color: var(--color-fg-default);
-    background-color: var(--color-canvas-subtle);
+    color: var(--fgColor-default, var(--color-fg-default));
+    background-color: var(--bgColor-muted, var(--color-canvas-subtle));
   }
 }
 
@@ -451,13 +451,13 @@ $SelectMenu-max-height: 480px !default;
   // Android
   .SelectMenu-item:focus,
   .SelectMenu-item:active {
-    background-color: var(--color-canvas-subtle);
+    background-color: var(--bgColor-muted, var(--color-canvas-subtle));
   }
 
   // iOS Safari
   // :active would work if ontouchstart is added to the button
   // Instead this tweaks the "native" highlight color
   .SelectMenu-item {
-    -webkit-tap-highlight-color: var(--color-select-menu-tap-highlight);
+    -webkit-tap-highlight-color: var(--control-bgColor-active, var(--color-select-menu-tap-highlight));
   }
 }

package/stylelint.config.cjs

@@ -2,6 +2,12 @@ module.exports = {
   extends: ['@primer/stylelint-config'],
   ignoreFiles: ['**/*.js', '**/*.cjs'],
   rules: {
-    'primer/no-override': false
-  }
+    'primer/no-override': false,
+    'primer/no-deprecated-colors': [
+      true,
+      {
+        inlineFallback: true,
+      },
+    ],
+  },
 }

package/support/mixins/misc.scss

@@ -1,5 +1,5 @@
 // Generate a two-color caret for any element.
-@mixin double-caret($background: var(--color-canvas-default), $border: var(--color-border-default)) {
+@mixin double-caret($background: var(--bgColor-default, var(--color-canvas-default)), $border: var(--borderColor-default, var(--color-border-default))) {
   &::after,
   &::before {
     position: absolute;
@@ -17,7 +17,7 @@
   &::after {
     // stylelint-disable-next-line primer/spacing
     margin-left: 2px;
-    background-color: var(--color-canvas-default);
+    background-color: var(--bgColor-default, var(--color-canvas-default));
     background-image: linear-gradient($background, $background);
   }
 
@@ -29,31 +29,31 @@
 // global focus styles
 
 // inset box-shadow for form controls
-@mixin focusBoxShadowInset($outlineWidth: 1px, $outlineColor: var(--color-accent-fg)) {
-  border-color: var(--color-accent-fg);
+@mixin focusBoxShadowInset($outlineWidth: 1px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
+  border-color: var(--focus-outlineColor, var(--color-accent-fg));
   outline: none;
   box-shadow: inset 0 0 0 $outlineWidth $outlineColor;
 }
 
 // box-shadow for :target styles (no inset)
 // !important to override PCSS utilities
-@mixin targetBoxShadow($outlineWidth: 2px, $outlineColor: var(--color-accent-fg)) {
+@mixin targetBoxShadow($outlineWidth: 2px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
   outline: none !important;
   box-shadow: 0 0 0 $outlineWidth $outlineColor !important;
 }
 
 // outline
-@mixin focusOutline($outlineOffset: -2px, $outlineColor: var(--color-accent-fg)) {
+@mixin focusOutline($outlineOffset: -2px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
   outline: 2px solid $outlineColor;
   outline-offset: $outlineOffset;
   box-shadow: none;
 }
 
 // outline with fg box-shadow for buttons
-@mixin focusOutlineOnEmphasis($outlineOffset: -2px, $outlineColor: var(--color-accent-fg)) {
+@mixin focusOutlineOnEmphasis($outlineOffset: -2px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
   outline: 2px solid $outlineColor;
   outline-offset: $outlineOffset;
-  box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);
+  box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
 }
 
 // if min-width is undefined, return only min-height

package/support/variables/misc.scss

@@ -3,8 +3,8 @@
 // Border
 $border-width: 1px !default;
 $border-style: solid !default;
-$border: $border-width $border-style var(--color-border-default) !default;
-$border-rem: var(--borderWidth-thin, 1px) solid var(--color-border-default) !default;
+$border: $border-width $border-style var(--borderColor-default, var(--color-border-default)) !default;
+$border-rem: var(--borderWidth-thin, 1px) solid var(--borderColor-default, var(--color-border-default)) !default;
 
 // Border Radius
 $border-radius-1:  4px !default;

package/toasts/toasts.scss

@@ -3,10 +3,10 @@
 .Toast {
   display: flex;
   margin: $spacer-2;
-  color: var(--color-fg-default);
-  background-color: var(--color-canvas-default);
+  color: var(--fgColor-default, var(--color-fg-default));
+  background-color: var(--bgColor-default, var(--color-canvas-default));
   border-radius: $border-radius;
-  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
+  box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-large, var(--color-shadow-large));
 
   @include breakpoint(sm) {
     width: max-content;
@@ -21,8 +21,8 @@
   justify-content: center;
   width: $spacer-3 * 3;
   flex-shrink: 0;
-  color: var(--color-fg-on-emphasis);
-  background-color: var(--color-accent-emphasis);
+  color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+  background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
   border: $border-width $border-style transparent;
   border-right: 0;
   border-top-left-radius: inherit;
@@ -52,38 +52,38 @@
 // Modifier
 
 .Toast--loading {
-  color: var(--color-fg-default);
-  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
+  color: var(--fgColor-default, var(--color-fg-default));
+  box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-large, var(--color-shadow-large));
 
   .Toast-icon {
-    background-color: var(--color-neutral-emphasis);
+    background-color: var(--bgColor-neutral-emphasis, var(--color-neutral-emphasis));
   }
 }
 
 .Toast--error {
-  color: var(--color-fg-default);
-  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
+  color: var(--fgColor-default, var(--color-fg-default));
+  box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-large, var(--color-shadow-large));
 
   .Toast-icon {
-    background-color: var(--color-danger-emphasis);
+    background-color: var(--bgColor-danger-emphasis, var(--color-danger-emphasis));
   }
 }
 
 .Toast--warning {
-  color: var(--color-fg-default);
-  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
+  color: var(--fgColor-default, var(--color-fg-default));
+  box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-large, var(--color-shadow-large));
 
   .Toast-icon {
-    background-color: var(--color-attention-emphasis);
+    background-color: var(--bgColor-attention-emphasis, var(--color-attention-emphasis));
   }
 }
 
 .Toast--success {
-  color: var(--color-fg-default);
-  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
+  color: var(--fgColor-default, var(--color-fg-default));
+  box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-large, var(--color-shadow-large));
 
   .Toast-icon {
-    background-color: var(--color-success-emphasis);
+    background-color: var(--bgColor-success-emphasis, var(--color-success-emphasis));
   }
 }
 

package/tooltips/tooltips.scss

@@ -10,7 +10,7 @@
   padding: $em-spacer-5 $em-spacer-6;
   font: normal normal 11px/1.5 $body-font;
   -webkit-font-smoothing: subpixel-antialiased;
-  color: var(--color-fg-on-emphasis);
+  color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
   text-align: center;
   text-decoration: none;
   text-shadow: none;
@@ -20,7 +20,7 @@
   white-space: pre;
   pointer-events: none;
   content: attr(aria-label);
-  background: var(--color-neutral-emphasis-plus);
+  background: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
   border-radius: $border-radius;
   opacity: 0;
 }
@@ -32,7 +32,7 @@
   display: none;
   width: 0;
   height: 0;
-  color: var(--color-neutral-emphasis-plus);
+  color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
   pointer-events: none;
   content: '';
   // stylelint-disable-next-line primer/borders
@@ -101,7 +101,7 @@
     bottom: -7px;
     // stylelint-disable-next-line primer/spacing
     margin-right: -6px;
-    border-bottom-color: var(--color-neutral-emphasis-plus);
+    border-bottom-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
   }
 }
 
@@ -134,7 +134,7 @@
     bottom: auto;
     // stylelint-disable-next-line primer/spacing
     margin-right: -6px;
-    border-top-color: var(--color-neutral-emphasis-plus);
+    border-top-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
   }
 }
 
@@ -172,7 +172,7 @@
     left: -7px;
     // stylelint-disable-next-line primer/spacing
     margin-top: -6px;
-    border-left-color: var(--color-neutral-emphasis-plus);
+    border-left-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
   }
 }
 
@@ -192,7 +192,7 @@
     bottom: 50%;
     // stylelint-disable-next-line primer/spacing
     margin-top: -6px;
-    border-right-color: var(--color-neutral-emphasis-plus);
+    border-right-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
   }
 }
 

package/utilities/box-shadow.scss

@@ -3,19 +3,19 @@
 // Box shadows
 
 .color-shadow-small {
-  box-shadow: var(--color-shadow-small) !important;
+  box-shadow: var(--shadow-resting-small, var(--color-shadow-small)) !important;
 }
 
 .color-shadow-medium {
-  box-shadow: var(--color-shadow-medium) !important;
+  box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium)) !important;
 }
 
 .color-shadow-large {
-  box-shadow: var(--color-shadow-large) !important;
+  box-shadow: var(--shadow-floating-large, var(--color-shadow-large)) !important;
 }
 
 .color-shadow-extra-large {
-  box-shadow: var(--color-shadow-extra-large) !important;
+  box-shadow: var(--shadow-floating-xlarge, var(--color-shadow-extra-large)) !important;
 }
 
 // Turn off box shadow

package/utilities/colors.scss

@@ -2,91 +2,91 @@
 
 // Foreground
 
-.color-fg-default     { color: var(--color-fg-default) !important; }
-.color-fg-muted       { color: var(--color-fg-muted) !important; }
-.color-fg-subtle      { color: var(--color-fg-subtle) !important; }
-
-.color-fg-accent    { color: var(--color-accent-fg) !important; }
-.color-fg-success   { color: var(--color-success-fg) !important; }
-.color-fg-attention { color: var(--color-attention-fg) !important; }
-.color-fg-severe    { color: var(--color-severe-fg) !important; }
-.color-fg-danger    { color: var(--color-danger-fg) !important; }
-.color-fg-open      { color: var(--color-open-fg) !important; }
-.color-fg-closed    { color: var(--color-closed-fg) !important; }
-.color-fg-done      { color: var(--color-done-fg) !important; }
-.color-fg-sponsors  { color: var(--color-sponsors-fg) !important; }
-
-.color-fg-on-emphasis { color: var(--color-fg-on-emphasis) !important; }
+.color-fg-default     { color: var(--fgColor-default, var(--color-fg-default)) !important; }
+.color-fg-muted       { color: var(--fgColor-muted, var(--color-fg-muted)) !important; }
+.color-fg-subtle      { color: var(--fgColor-muted, var(--color-fg-subtle)) !important; }
+
+.color-fg-accent    { color: var(--fgColor-accent, var(--color-accent-fg)) !important; }
+.color-fg-success   { color: var(--fgColor-success, var(--color-success-fg)) !important; }
+.color-fg-attention { color: var(--fgColor-attention, var(--color-attention-fg)) !important; }
+.color-fg-severe    { color: var(--fgColor-severe, var(--color-severe-fg)) !important; }
+.color-fg-danger    { color: var(--fgColor-danger, var(--color-danger-fg)) !important; }
+.color-fg-open      { color: var(--fgColor-open, var(--color-open-fg)) !important; }
+.color-fg-closed    { color: var(--fgColor-closed, var(--color-closed-fg)) !important; }
+.color-fg-done      { color: var(--fgColor-done, var(--color-done-fg)) !important; }
+.color-fg-sponsors  { color: var(--fgColor-sponsors, var(--color-sponsors-fg)) !important; }
+
+.color-fg-on-emphasis { color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)) !important; }
 
 // Background
 
-.color-bg-default  { background-color: var(--color-canvas-default) !important; }
-.color-bg-overlay  { background-color: var(--color-canvas-overlay) !important; }
-.color-bg-inset    { background-color: var(--color-canvas-inset) !important; }
-.color-bg-subtle   { background-color: var(--color-canvas-subtle) !important; }
-.color-bg-emphasis { background-color: var(--color-neutral-emphasis-plus) !important; }
+.color-bg-default  { background-color: var(--bgColor-default, var(--color-canvas-default)) !important; }
+.color-bg-overlay  { background-color: var(--overlay-bgColor, var(--color-canvas-overlay)) !important; }
+.color-bg-inset    { background-color: var(--bgColor-muted, var(--color-canvas-inset)) !important; }
+.color-bg-subtle   { background-color: var(--bgColor-muted, var(--color-canvas-subtle)) !important; }
+.color-bg-emphasis { background-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus)) !important; }
 
-.color-bg-accent          { background-color: var(--color-accent-subtle) !important; }
-.color-bg-accent-emphasis { background-color: var(--color-accent-emphasis) !important; }
+.color-bg-accent          { background-color: var(--bgColor-accent-muted, var(--color-accent-subtle)) !important; }
+.color-bg-accent-emphasis { background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis)) !important; }
 
-.color-bg-success          { background-color: var(--color-success-subtle) !important; }
-.color-bg-success-emphasis { background-color: var(--color-success-emphasis) !important; }
+.color-bg-success          { background-color: var(--bgColor-success-muted, var(--color-success-subtle)) !important; }
+.color-bg-success-emphasis { background-color: var(--bgColor-success-emphasis, var(--color-success-emphasis)) !important; }
 
-.color-bg-attention          { background-color: var(--color-attention-subtle) !important; }
-.color-bg-attention-emphasis { background-color: var(--color-attention-emphasis) !important; }
+.color-bg-attention          { background-color: var(--bgColor-attention-muted, var(--color-attention-subtle)) !important; }
+.color-bg-attention-emphasis { background-color: var(--bgColor-attention-emphasis, var(--color-attention-emphasis)) !important; }
 
-.color-bg-severe          { background-color: var(--color-severe-subtle) !important; }
-.color-bg-severe-emphasis { background-color: var(--color-severe-emphasis) !important; }
+.color-bg-severe          { background-color: var(--bgColor-severe-muted, var(--color-severe-subtle)) !important; }
+.color-bg-severe-emphasis { background-color: var(--bgColor-severe-emphasis, var(--color-severe-emphasis)) !important; }
 
-.color-bg-danger          { background-color: var(--color-danger-subtle) !important; }
-.color-bg-danger-emphasis { background-color: var(--color-danger-emphasis) !important; }
+.color-bg-danger          { background-color: var(--bgColor-danger-muted, var(--color-danger-subtle)) !important; }
+.color-bg-danger-emphasis { background-color: var(--bgColor-danger-emphasis, var(--color-danger-emphasis)) !important; }
 
-.color-bg-open          { background-color: var(--color-open-subtle) !important; }
-.color-bg-open-emphasis { background-color: var(--color-open-emphasis) !important; }
+.color-bg-open          { background-color: var(--bgColor-open-muted, var(--color-open-subtle)) !important; }
+.color-bg-open-emphasis { background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis)) !important; }
 
-.color-bg-closed          { background-color: var(--color-closed-subtle) !important; }
-.color-bg-closed-emphasis { background-color: var(--color-closed-emphasis) !important; }
+.color-bg-closed          { background-color: var(--bgColor-closed-muted, var(--color-closed-subtle)) !important; }
+.color-bg-closed-emphasis { background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis)) !important; }
 
-.color-bg-done          { background-color: var(--color-done-subtle) !important; }
-.color-bg-done-emphasis { background-color: var(--color-done-emphasis) !important; }
+.color-bg-done          { background-color: var(--bgColor-done-muted, var(--color-done-subtle)) !important; }
+.color-bg-done-emphasis { background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis)) !important; }
 
-.color-bg-sponsors          { background-color: var(--color-sponsors-subtle) !important; }
-.color-bg-sponsors-emphasis { background-color: var(--color-sponsors-emphasis) !important; }
+.color-bg-sponsors          { background-color: var(--bgColor-sponsors-muted, var(--color-sponsors-subtle)) !important; }
+.color-bg-sponsors-emphasis { background-color: var(--bgColor-sponsors-emphasis, var(--color-sponsors-emphasis)) !important; }
 
 .color-bg-transparent { background-color: transparent !important; }
 
 // Border
 
-.color-border-default { border-color: var(--color-border-default) !important; }
-.color-border-muted   { border-color: var(--color-border-muted) !important; }
-.color-border-subtle  { border-color: var(--color-border-subtle) !important; }
+.color-border-default { border-color: var(--borderColor-default, var(--color-border-default)) !important; }
+.color-border-muted   { border-color: var(--borderColor-muted, var(--color-border-muted)) !important; }
+.color-border-subtle  { border-color: var(--borderColor-muted, var(--color-border-subtle)) !important; }
 
-.color-border-accent          { border-color: var(--color-accent-muted) !important; }
-.color-border-accent-emphasis { border-color: var(--color-accent-emphasis) !important; }
+.color-border-accent          { border-color: var(--borderColor-accent-muted, var(--color-accent-muted)) !important; }
+.color-border-accent-emphasis { border-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis)) !important; }
 
-.color-border-success          { border-color: var(--color-success-muted) !important; }
-.color-border-success-emphasis { border-color: var(--color-success-emphasis) !important; }
+.color-border-success          { border-color: var(--borderColor-success-muted, var(--color-success-muted)) !important; }
+.color-border-success-emphasis { border-color: var(--borderColor-success-emphasis, var(--color-success-emphasis)) !important; }
 
-.color-border-attention          { border-color: var(--color-attention-muted) !important; }
-.color-border-attention-emphasis { border-color: var(--color-attention-emphasis) !important; }
+.color-border-attention          { border-color: var(--borderColor-attention-muted, var(--color-attention-muted)) !important; }
+.color-border-attention-emphasis { border-color: var(--borderColor-attention-emphasis, var(--color-attention-emphasis)) !important; }
 
-.color-border-severe          { border-color: var(--color-severe-muted) !important; }
-.color-border-severe-emphasis { border-color: var(--color-severe-emphasis) !important; }
+.color-border-severe          { border-color: var(--borderColor-severe-muted, var(--color-severe-muted)) !important; }
+.color-border-severe-emphasis { border-color: var(--borderColor-severe-emphasis, var(--color-severe-emphasis)) !important; }
 
-.color-border-danger          { border-color: var(--color-danger-muted) !important; }
-.color-border-danger-emphasis { border-color: var(--color-danger-emphasis) !important; }
+.color-border-danger          { border-color: var(--borderColor-danger-muted, var(--color-danger-muted)) !important; }
+.color-border-danger-emphasis { border-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis)) !important; }
 
-.color-border-open          { border-color: var(--color-open-muted) !important; }
-.color-border-open-emphasis { border-color: var(--color-open-emphasis) !important; }
+.color-border-open          { border-color: var(--borderColor-open-muted, var(--color-open-muted)) !important; }
+.color-border-open-emphasis { border-color: var(--borderColor-open-emphasis, var(--color-open-emphasis)) !important; }
 
-.color-border-closed          { border-color: var(--color-closed-muted) !important; }
-.color-border-closed-emphasis { border-color: var(--color-closed-emphasis) !important; }
+.color-border-closed          { border-color: var(--borderColor-closed-muted, var(--color-closed-muted)) !important; }
+.color-border-closed-emphasis { border-color: var(--borderColor-closed-emphasis, var(--color-closed-emphasis)) !important; }
 
-.color-border-done          { border-color: var(--color-done-muted) !important; }
-.color-border-done-emphasis { border-color: var(--color-done-emphasis) !important; }
+.color-border-done          { border-color: var(--borderColor-done-muted, var(--color-done-muted)) !important; }
+.color-border-done-emphasis { border-color: var(--borderColor-done-emphasis, var(--color-done-emphasis)) !important; }
 
-.color-border-sponsors          { border-color: var(--color-sponsors-muted) !important; }
-.color-border-sponsors-emphasis { border-color: var(--color-sponsors-emphasis) !important; }
+.color-border-sponsors          { border-color: var(--borderColor-sponsors-muted, var(--color-sponsors-muted)) !important; }
+.color-border-sponsors-emphasis { border-color: var(--borderColor-sponsors-emphasis, var(--color-sponsors-emphasis)) !important; }
 
 // Misc
 

package/utilities/details.scss

@@ -15,7 +15,7 @@
 
 .details-overlay-dark[open] > summary::before {
   z-index: 111;
-  background: var(--color-primer-canvas-backdrop);
+  background: var(--overlay-backdrop-bgColor, var(--color-primer-canvas-backdrop));
 }
 
 .details-reset {