misc.scss in jekyll-v4-theme-primer-0.13.0

- old
+ new

@@ -1,7 +1,7 @@
 // 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;
     top: 11px;
     right: 100%;
@@ -15,11 +15,11 @@
   }
 
   &::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);
   }
 
   &::before {
     background-color: $border;
@@ -27,34 +27,34 @@
 }
 
 // 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
 @mixin minTouchTarget($min-height: 32px, $min-width: '') {
   position: absolute;