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

- old
+ new

@@ -9,24 +9,24 @@
   padding: 0;
   margin: 0;
   margin-top: $spacer-4;
   list-style: none;
   cursor: pointer;
-  background: var(--color-canvas-overlay);
-  border: $border-width $border-style var(--color-border-default);
+  background: var(--overlay-bgColor, var(--color-canvas-overlay));
+  border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
   border-radius: $border-radius;
-  box-shadow: var(--color-shadow-medium);
+  box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium));
 
   li {
     display: block;
     padding: $spacer-1 $spacer-2;
     font-weight: $font-weight-semibold;
-    border-bottom: $border-width $border-style var(--color-border-muted);
+    border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
     small {
       font-weight: $font-weight-normal;
-      color: var(--color-fg-muted);
+      color: var(--fgColor-muted, var(--color-fg-muted));
     }
 
     &:last-child {
       border-bottom: 0;
       border-bottom-right-radius: $border-radius;
@@ -37,30 +37,30 @@
       border-top-left-radius: $border-radius;
       border-top-right-radius: $border-radius;
     }
 
     &:hover {
-      color: var(--color-fg-on-emphasis);
+      color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
       text-decoration: none;
-      background: var(--color-accent-emphasis);
+      background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
 
       small {
-        color: var(--color-fg-on-emphasis);
+        color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
       }
 
       .octicon {
         color: inherit !important;
       }
     }
 
     &[aria-selected='true'],
     &.navigation-focus {
-      color: var(--color-fg-on-emphasis);
+      color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
       text-decoration: none;
-      background: var(--color-accent-emphasis);
+      background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
 
       small {
-        color: var(--color-fg-on-emphasis);
+        color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
       }
 
       .octicon {
         color: inherit !important;
       }