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

- old
+ new

@@ -2,12 +2,12 @@
   z-index: 32; // TODO: Figure out z-index system
   display: flex;
   padding: $spacer-3;
   font-size: $h5-size;
   line-height: $lh-default;
-  color: var(--color-header-text);
-  background-color: var(--color-header-bg);
+  color: var(--header-fgColor-default, var(--color-header-text));
+  background-color: var(--header-bgColor, var(--color-header-bg));
   align-items: center;
   flex-wrap: nowrap;
 }
 
 .Header-item {
@@ -22,23 +22,23 @@
   flex: auto;
 }
 
 .Header-link {
   font-weight: $font-weight-bold;
-  color: var(--color-header-logo);
+  color: var(--header-fgColor-logo, var(--color-header-logo));
   white-space: nowrap;
 
   &:hover,
   &:focus {
-    color: var(--color-header-text);
+    color: var(--header-fgColor-default, var(--color-header-text));
     text-decoration: none;
   }
 }
 
 .Header-input {
-  color: var(--color-header-text);
-  background-color: var(--color-header-search-bg);
-  border: $border-width $border-style var(--color-header-search-border);
+  color: var(--header-fgColor-default, var(--color-header-text));
+  background-color: var(--headerSearch-bgColor, var(--color-header-search-bg));
+  border: $border-width $border-style var(--headerSearch-borderColor, var(--color-header-search-border));
   box-shadow: none;
 
   &::placeholder {
     // stylelint-disable-next-line primer/colors
     color: rgba(255, 255, 255, 0.75);