jekyll-v4-theme-primer 0.11.0 → 0.13.0

data/_sass/@primer/css/layout/page-layout.scss

@@ -2,7 +2,7 @@
 // stylelint-disable selector-max-specificity
 // stylelint-disable no-duplicate-selectors
 
-$Layout-divider-color: var(--color-border-default) !default;
+$Layout-divider-color: var(--borderColor-default, var(--color-border-default)) !default;
 $Layout-responsive-variant-max-breakpoint: 'md' !default;
 
 :root {
@@ -14,12 +14,10 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
   --Layout-row-gap: #{$spacer-3};
 
   // the `px` unit is mandatory for `calc()` execution. See https://stackoverflow.com/a/32518348
-  // stylelint-disable length-zero-no-unit
   --Layout-outer-spacing-x: 0px; // wrapper margin x
   --Layout-outer-spacing-y: 0px; // wrapper margin y
   --Layout-inner-spacing-min: 0px; // default region padding
   --Layout-inner-spacing-max: 0px; // relaxed content horizontal padding
-  // stylelint-enable length-zero-no-unit
 }
 
 // Layout beta mixins
@@ -44,7 +42,7 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
   width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
   height: #{$spacer-2}; // 8px
   content: '';
-  background-color: var(--color-canvas-inset);
+  background-color: var(--bgColor-inset, var(--color-canvas-inset));
   box-shadow: inset 0 1px $Layout-divider-color, inset 0 -1px $Layout-divider-color;
 }
 
@@ -378,7 +376,6 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
 
 .PageLayout--columnGap-none {
   // the `px` unit is mandatory for `calc()` execution. See https://stackoverflow.com/a/32518348
-  // stylelint-disable-next-line length-zero-no-unit
   --Layout-column-gap: 0px;
 }
 
@@ -394,7 +391,6 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
 
 .PageLayout--rowGap-none {
   // the `px` unit is mandatory for `calc()` execution. See https://stackoverflow.com/a/32518348
-  // stylelint-disable length-zero-no-unit
   --Layout-row-gap: 0px;
 }
 

data/_sass/@primer/css/layout/stack.scss

@@ -25,12 +25,12 @@
   // │  ├─ &.Stack-item--expand-[ whenNarrow | whenRegular | whenWide ]
   // │  ├─ &.Stack-item--keepSize-[ whenNarrow | whenRegular | whenWide ]
 
-  $Stack-gap-default: var(--primer-stack-gap-normal, 16px);
+  $Stack-gap-default: var(--stack-gap-normal, 16px);
 
   --Stack-gap-whenRegular: #{$Stack-gap-default};
   --Stack-gap-whenNarrow: #{$Stack-gap-default};
   --Stack-gap-whenWide: var(--Stack-gap-whenRegular);
-  --Stack-divider-color: var(--color-border-default);
+  --Stack-divider-color: var(--borderColor-default, var(--color-border-default));
 
   display: flex;
   flex-flow: column;
@@ -65,18 +65,18 @@
   }
 
   .Stack--gap-condensed#{$viewportRange} {
-    --Stack-gap#{$viewportRange}: var(--primer-stack-gap-condensed, 8px);
+    --Stack-gap#{$viewportRange}: var(--stack-gap-condensed, 8px);
   }
 
   .Stack--gap-normal#{$viewportRange} {
-    --Stack-gap#{$viewportRange}: var(--primer-stack-gap-normal, 16px);
+    --Stack-gap#{$viewportRange}: var(--stack-gap-normal, 16px);
   }
 
   // There's no .Stack--gap-spacious-whenNarrow
   // Narrow viewports render `spacious` gap as `normal`
   @if $viewportRange != '-whenNarrow' {
     .Stack--gap-spacious#{$viewportRange} {
-      --Stack-gap#{$viewportRange}: var(--primer-stack-gap-spacious, 24px);
+      --Stack-gap#{$viewportRange}: var(--stack-gap-spacious, 24px);
     }
   }
 
@@ -161,14 +161,14 @@
 
   :not(.Stack--dir-inline#{$viewportRange}) > .Stack-divider,
   :not(.Stack--dir-inline#{$viewportRange}) > .Stack-item > .Stack-divider {
-    border-block-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
+    border-block-end: var(--borderWidth-thin, 1px) solid var(--Stack-divider-color);
     inline-size: auto;
     block-size: 0;
   }
 
   .Stack--dir-inline#{$viewportRange} > .Stack-divider,
   .Stack--dir-inline#{$viewportRange} > .Stack-item > .Stack-divider {
-    border-inline-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
+    border-inline-end: var(--borderWidth-thin, 1px) solid var(--Stack-divider-color);
     inline-size: 0;
     block-size: auto;
   }

data/_sass/@primer/css/markdown/blob-csv.scss

@@ -15,7 +15,7 @@
     // stylelint-disable-next-line primer/spacing
     padding: 10px $spacer-2 9px;
     text-align: right;
-    background: var(--color-canvas-default);
+    background: var(--bgColor-default, var(--color-canvas-default));
     border: 0;
   }
 
@@ -23,7 +23,7 @@
 
   th {
     font-weight: $font-weight-bold;
-    background: var(--color-canvas-subtle);
+    background: var(--bgColor-muted, var(--color-canvas-subtle));
     border-top: 0;
   }
 }

data/_sass/@primer/css/markdown/code.scss

@@ -9,7 +9,7 @@
     // stylelint-disable-next-line primer/typography
     font-size: 85%;
     white-space: break-spaces; // keeps rendering spaces, but breaks them onto multiple lines
-    background-color: var(--color-neutral-muted);
+    background-color: var(--bgColor-neutral-muted, var(--color-neutral-muted));
     border-radius: $border-radius;
 
     br { display: none; }
@@ -58,8 +58,8 @@
     font-size: 85%;
     // stylelint-disable-next-line primer/typography
     line-height: 1.45;
-    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));
     border-radius: $border-radius;
   }
 

data/_sass/@primer/css/markdown/footnotes.scss

@@ -14,7 +14,7 @@
 
   .footnotes {
     font-size: $h6-size;
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted, var(--color-fg-muted));
     border-top: $border;
 
     ol {
@@ -40,12 +40,12 @@
       pointer-events: none;
       content: '';
       // stylelint-disable-next-line primer/borders
-      border: 2px $border-style var(--color-accent-emphasis);
+      border: 2px $border-style var(--borderColor-accent-emphasis, var(--color-accent-emphasis));
       border-radius: $border-radius;
     }
 
     li:target {
-      color: var(--color-fg-default);
+      color: var(--fgColor-default, var(--color-fg-default));
     }
 
     .data-footnote-backref g-emoji {

data/_sass/@primer/css/markdown/headings.scss

@@ -15,7 +15,7 @@
     line-height: $lh-condensed;
 
     .octicon-link {
-      color: var(--color-fg-default);
+      color: var(--fgColor-default, var(--color-fg-default));
       vertical-align: middle;
       visibility: hidden;
     }
@@ -41,7 +41,7 @@
     padding-bottom: 0.3em;
     // stylelint-disable-next-line primer/typography
     font-size: 2em;
-    border-bottom: $border-width $border-style var(--color-border-muted);
+    border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
   }
 
   h2 {
@@ -49,7 +49,7 @@
     padding-bottom: 0.3em;
     // stylelint-disable-next-line primer/typography
     font-size: 1.5em;
-    border-bottom: $border-width $border-style var(--color-border-muted);
+    border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
   }
 
   h3 {
@@ -69,7 +69,7 @@
   h6 {
     // stylelint-disable-next-line primer/typography
     font-size: 0.85em;
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted, var(--color-fg-muted));
   }
 
   summary {

data/_sass/@primer/css/markdown/images.scss

@@ -8,7 +8,7 @@
     // because we put padding on the images to hide header lines, and some people
     // specify the width of their images in their markdown.
     box-sizing: content-box;
-    background-color: var(--color-canvas-default);
+    background-color: var(--bgColor-default, var(--color-canvas-default));
 
     &[align='right'] {
       // stylelint-disable-next-line primer/spacing
@@ -44,7 +44,7 @@
       // stylelint-disable-next-line primer/spacing
       margin: 13px 0 0;
       overflow: hidden;
-      border: $border-width $border-style var(--color-border-default);
+      border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
     }
 
     span img {
@@ -57,7 +57,7 @@
       // stylelint-disable-next-line primer/spacing
       padding: 5px 0 0;
       clear: both;
-      color: var(--color-fg-default);
+      color: var(--fgColor-default, var(--color-fg-default));
     }
   }
 

data/_sass/@primer/css/markdown/lists.scss

@@ -14,19 +14,19 @@
     }
   }
 
-  ol[type='a'] {
+  ol[type='a s'] {
     list-style-type: lower-alpha;
   }
 
-  ol[type='A'] {
+  ol[type='A s'] {
     list-style-type: upper-alpha;
   }
 
-  ol[type='i'] {
+  ol[type='i s'] {
     list-style-type: lower-roman;
   }
 
-  ol[type='I'] {
+  ol[type='I s'] {
     list-style-type: upper-roman;
   }
 

data/_sass/@primer/css/markdown/markdown-body.scss

@@ -43,7 +43,7 @@
 
   // Link Colors
   .absent {
-    color: var(--color-danger-fg);
+    color: var(--fgColor-danger, var(--color-danger-fg));
   }
 
   .anchor {
@@ -74,16 +74,16 @@
     height: $em-spacer-3;
     padding: 0;
     margin: $spacer-4 0;
-    background-color: var(--color-border-default);
+    background-color: var(--borderColor-default, var(--color-border-default));
     border: 0;
   }
 
   blockquote {
     // stylelint-disable-next-line primer/spacing
     padding: 0 1em;
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted, var(--color-fg-muted));
     // stylelint-disable-next-line primer/borders
-    border-left: 0.25em $border-style var(--color-border-default);
+    border-left: 0.25em $border-style var(--borderColor-default, var(--color-border-default));
 
     > :first-child {
       margin-top: 0;

data/_sass/@primer/css/markdown/tables.scss

@@ -17,7 +17,7 @@
     td {
       // stylelint-disable-next-line primer/spacing
       padding: 6px 13px;
-      border: $border-width $border-style var(--color-border-default);
+      border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
     }
 
     td {
@@ -27,11 +27,11 @@
     }
 
     tr {
-      background-color: var(--color-canvas-default);
-      border-top: $border-width $border-style var(--color-border-muted);
+      background-color: var(--bgColor-default, var(--color-canvas-default));
+      border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
       &:nth-child(2n) {
-        background-color: var(--color-canvas-subtle);
+        background-color: var(--bgColor-muted, var(--color-canvas-subtle));
       }
     }
 

data/_sass/@primer/css/marketing/buttons/button.scss

@@ -1,4 +1,3 @@
-/* stylelint-disable primer/no-deprecated-colors */
 .btn-mktg {
   position: relative;
   z-index: 1;
@@ -9,7 +8,7 @@
   font-size: 1rem;
   font-weight: $font-weight-bold;
   line-height: 1;
-  color: var(--color-canvas-default);
+  color: var(--bgColor-default, var(--color-canvas-default));
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
@@ -56,7 +55,7 @@
 
   // fallback :focus state
   &:focus {
-    @include focusOutline(2px, var(--color-accent-fg));
+    @include focusOutline(2px, var(--focus-outlineColor, var(--color-accent-fg)));
 
     // remove fallback :focus if :focus-visible is supported
     &:not(:focus-visible) {
@@ -67,7 +66,7 @@
 
   // default focus state
   &:focus-visible {
-    @include focusOutline(2px, var(--color-accent-fg));
+    @include focusOutline(2px, var(--focus-outlineColor, var(--color-accent-fg)));
   }
 
   &:active {
@@ -85,7 +84,7 @@
 }
 
 .btn-muted-mktg {
-  color: var(--color-fg-default) !important;
+  color: var(--fgColor-default, var(--color-fg-default)) !important;
   background: none !important;
   box-shadow: var(--color-mktg-btn-shadow-outline);
 
@@ -99,17 +98,17 @@
 
   &:active {
     // stylelint-disable-next-line primer/box-shadow
-    box-shadow: var(--color-fg-default) 0 0 0 3px inset !important;
+    box-shadow: var(--fgColor-default, var(--color-fg-default)) 0 0 0 3px inset !important;
   }
 
   &:disabled {
     // stylelint-disable-next-line primer/box-shadow
-    box-shadow: var(--color-fg-subtle) 0 0 0 1px inset !important;
+    box-shadow: var(--fgColor-muted, var(--color-fg-subtle)) 0 0 0 1px inset !important;
   }
 }
 
 .btn-subtle-mktg {
-  color: var(--color-fg-default) !important;
+  color: var(--fgColor-default, var(--color-fg-default)) !important;
   background: none !important;
   box-shadow: none !important;
 
@@ -135,7 +134,7 @@
 
   // fallback :focus state
   &:focus {
-    @include focusOutline(2px, var(--color-accent-fg));
+    @include focusOutline(2px, var(--focus-outlineColor, var(--color-accent-fg)));
 
     // remove fallback :focus if :focus-visible is supported
     &:not(:focus-visible) {
@@ -146,7 +145,7 @@
 
   // default focus state
   &:focus-visible {
-    @include focusOutline(2px, var(--color-accent-fg));
+    @include focusOutline(2px, var(--focus-outlineColor, var(--color-accent-fg)));
   }
 }
 

data/_sass/@primer/css/marketing/support/variables.scss

@@ -125,3 +125,18 @@ $marketing-position-variants: (
   md: '-md',
   lg: '-lg',
 ) !default;
+
+$mktg-btn-shadow-hover-light: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
+$mktg-btn-shadow-hover-dark: 0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07);
+
+@include color-variables(
+  (
+    (mktg-btn-shadow-outline, (light: rgb(0,0,0,0.15) 0 0 0 1px inset, dark: rgb(255,255,255,0.25) 0 0 0 1px inset)),
+    (marketing-icon-primary, (light: var(--color-scale-blue-4), dark: var(--color-scale-blue-2))),
+    (marketing-icon-secondary, (light: var(--color-scale-blue-3), dark: var(--color-scale-blue-5))),
+    (mktg-btn-bg, (light: #1b1f23, dark: #f6f8fa)),
+    (mktg-btn-shadow-focus, (light: rgb(0 0 0 / 15%) 0 0 0 4px, dark: rgb(255 255 255 / 25%) 0 0 0 4px)),
+    (mktg-btn-shadow-hover, (light: $mktg-btn-shadow-hover-light, dark: $mktg-btn-shadow-hover-dark)),
+    (mktg-btn-shadow-hover-muted, (light: rgb(0 0 0 / 70%) 0 0 0 2px inset, dark: rgb(255 255 255) 0 0 0 2px inset)),
+  )
+);

data/_sass/@primer/css/marketing/utilities/layout.scss

@@ -1,5 +1,4 @@
 // Layout utilities
-// stylelint-disable block-opening-brace-space-before
 
 // Responsive utilities to position content
 // No utilities for sm and xl breakpoints

data/_sass/@primer/css/navigation/filter-list.scss

@@ -13,12 +13,12 @@
   }
 
   &.pjax-active .filter-item {
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted, var(--color-fg-muted));
     background-color: transparent;
 
     &.pjax-active {
-      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));
     }
   }
 }
@@ -30,7 +30,7 @@
   margin-bottom: $spacer-1;
   overflow: hidden;
   font-size: $h5-size;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -39,14 +39,14 @@
 
   &:hover {
     text-decoration: none;
-    background-color: var(--color-canvas-subtle);
+    background-color: var(--bgColor-muted, var(--color-canvas-subtle));
   }
 
   &.selected,
   &[aria-selected='true'],
   &[aria-current]:not([aria-current='false']) {
-    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));
 
     // fallback :focus state
     &:focus {
@@ -77,6 +77,6 @@
     bottom: 2px;
     z-index: -1;
     display: inline-block;
-    background-color: var(--color-neutral-subtle);
+    background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));
   }
 }

data/_sass/@primer/css/navigation/sidenav.scss

@@ -3,7 +3,7 @@
 // A vertical list of navigational links, typically used on the left side of a page.
 
 .SideNav {
-  background-color: var(--color-canvas-subtle);
+  background-color: var(--bgColor-muted, var(--color-canvas-subtle));
 }
 
 .SideNav-item {
@@ -12,11 +12,11 @@
   width: 100%;
   // stylelint-disable-next-line primer/spacing
   padding: 12px $spacer-3;
-  color: var(--color-fg-default);
+  color: var(--fgColor-default, var(--color-fg-default));
   text-align: left;
   background-color: transparent;
   border: 0;
-  border-top: $border-width $border-style var(--color-border-muted);
+  border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   &:first-child {
     border-top: 0;
@@ -25,7 +25,7 @@
   &:last-child {
     // makes sure there is a "bottom border" in case the list is not long enough
     // stylelint-disable-next-line primer/box-shadow
-    box-shadow: 0 $border-width 0 var(--color-border-default);
+    box-shadow: 0 $border-width 0 var(--borderColor-default, var(--color-border-default));
   }
 
   // Bar on the left
@@ -45,20 +45,20 @@
 
 .SideNav-item:hover {
   text-decoration: none;
-  background-color: var(--color-neutral-subtle);
+  background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));
 }
 
 .SideNav-item:active {
-  background-color: var(--color-canvas-subtle);
+  background-color: var(--bgColor-muted, var(--color-canvas-subtle));
 }
 
 .SideNav-item[aria-current]:not([aria-current='false']),
 .SideNav-item[aria-selected='true'] {
-  background-color: var(--color-sidenav-selected-bg);
+  background-color: var(--sideNav-bgColor-selected, var(--color-sidenav-selected-bg));
 
   // Bar on the left
   &::before {
-    background-color: var(--color-primer-border-active);
+    background-color: var(--underlineNav-borderColor-active, var(--color-primer-border-active));
   }
 }
 
@@ -69,7 +69,7 @@
 .SideNav-icon {
   width: 16px;
   margin-right: $spacer-2;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
 }
 
 // Sub Nav
@@ -81,19 +81,19 @@
   display: block;
   width: 100%;
   padding: $spacer-1 0;
-  color: var(--color-accent-fg);
+  color: var(--fgColor-accent, var(--color-accent-fg));
   text-align: left;
   background-color: transparent;
   border: 0;
 }
 
 .SideNav-subItem:hover {
-  color: var(--color-fg-default);
+  color: var(--fgColor-default, var(--color-fg-default));
   text-decoration: none;
 }
 
 .SideNav-subItem[aria-current]:not([aria-current='false']),
 .SideNav-subItem[aria-selected='true'] {
   font-weight: $font-weight-semibold;
-  color: var(--color-fg-default);
+  color: var(--fgColor-default, var(--color-fg-default));
 }

data/_sass/@primer/css/navigation/subnav.scss

@@ -12,7 +12,7 @@
 .subnav-bordered {
   // stylelint-disable-next-line primer/spacing
   padding-bottom: 20px;
-  border-bottom: $border-width $border-style var(--color-border-muted);
+  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 }
 
 .subnav-flush {
@@ -27,8 +27,8 @@
   font-weight: $font-weight-semibold;
   // stylelint-disable-next-line primer/typography
   line-height: 20px;
-  color: var(--color-fg-default);
-  border: $border-width $border-style var(--color-border-default);
+  color: var(--fgColor-default, var(--color-fg-default));
+  border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
 
   + .subnav-item {
     // stylelint-disable-next-line primer/spacing
@@ -38,16 +38,16 @@
   &:hover,
   &:focus {
     text-decoration: none;
-    background-color: var(--color-canvas-subtle);
+    background-color: var(--bgColor-muted, var(--color-canvas-subtle));
   }
 
   &.selected,
   &[aria-selected='true'],
   &[aria-current]:not([aria-current='false']) {
     z-index: 2;
-    color: var(--color-fg-on-emphasis);
-    background-color: var(--color-accent-emphasis);
-    border-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-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis));
 
     // fallback :focus state
     &:focus {
@@ -86,7 +86,7 @@
 .subnav-search-input {
   width: 320px;
   padding-left: $spacer-5;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
 }
 
 .subnav-search-input-wide {
@@ -99,7 +99,7 @@
   top: 9px;
   left: 8px;
   display: block;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
   text-align: center;
   pointer-events: none;
 }

data/_sass/@primer/css/pagination/pagination.scss

@@ -10,7 +10,7 @@
     font-style: normal;
     // stylelint-disable-next-line primer/typography
     line-height: 20px;
-    color: var(--color-fg-default);
+    color: var(--fgColor-default, var(--color-fg-default));
     text-align: center;
     white-space: nowrap;
     vertical-align: middle;
@@ -23,26 +23,26 @@
     &:hover,
     &:focus {
       text-decoration: none;
-      border-color: var(--color-border-default);
+      border-color: var(--borderColor-default, var(--color-border-default));
       transition-duration: 0.1s;
     }
 
     &:active {
-      border-color: var(--color-border-muted);
+      border-color: var(--borderColor-muted, var(--color-border-muted));
       transition: none;
     }
   }
 
   .previous_page,
   .next_page {
-    color: var(--color-accent-fg);
+    color: var(--fgColor-accent, var(--color-accent-fg));
   }
 
   .current,
   .current:hover,
   [aria-current]:not([aria-current='false']) {
-    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-color: transparent;
   }
 
@@ -52,7 +52,7 @@
   .gap:hover,
   .disabled:hover,
   [aria-disabled='true']:hover {
-    color: var(--color-primer-fg-disabled);
+    color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
     cursor: default;
     border-color: transparent;
   }