Replace auto and fade variables (#1448)

* Replace auto variables * Replace fade variables * Create smart-apples-hug.md * yarn upgrade @primer/primitives * yarn add primer/primitives@^4.3.10 * Use existing variables Since the v2 variables are not available yet * Revert bumping @primer/primitives This should not be needed anymore. * Update stylelint.config.js * Revert "Use existing variables" This reverts commit cc620b9. Co-authored-by: Jon Rohan <[email protected]>
primer · Jun 8, 2021 · 8175f88 · 8175f88
1 parent aa4aa40
commit 8175f88
Show file tree

Hide file tree

Showing 9 changed files with 13 additions and 11 deletions.
diff --git a/.changeset/smart-apples-hug.md b/.changeset/smart-apples-hug.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Replace auto and fade variables
diff --git a/src/base/kbd.scss b/src/base/kbd.scss
@@ -8,8 +8,7 @@ kbd {
   font: 11px $mono-font;
   // stylelint-disable-next-line primer/typography
   line-height: 10px;
-  // stylelint-disable-next-line primer/colors
-  color: var(--color-auto-gray-7);
+  color: var(--color-text-primary);
   vertical-align: middle;
   background-color: var(--color-bg-secondary);
   // stylelint-disable-next-line primer/borders

diff --git a/src/blankslate/blankslate.scss b/src/blankslate/blankslate.scss
@@ -13,7 +13,7 @@
     padding: 2px 5px 3px;
     font-size: $h5-size;
     background: var(--color-bg-canvas);
-    border: $border-width $border-style var(--color-auto-gray-0); // stylelint-disable-line primer/borders
+    border: $border-width $border-style var(--color-border-secondary);
     border-radius: $border-radius;
   }
 

diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss
@@ -138,8 +138,7 @@
   font-weight: $font-weight-bold;
   // stylelint-disable-next-line primer/typography
   line-height: 6px;
-  // stylelint-disable-next-line primer/colors
-  color: var(--color-auto-gray-7);
+  color: var(--color-text-primary);
   text-decoration: none;
   vertical-align: middle;
   background: var(--color-hidden-text-expander-bg);

diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss
@@ -131,7 +131,7 @@ textarea.form-control {
       padding: 2px $spacer-1;
       font-style: normal;
       // stylelint-disable-next-line primer/colors
-      background: var(--color-auto-yellow-1);
+      background: var(--color-attention-subtle, var(--color-auto-yellow-1));
       border-radius: $border-radius;
     }
   }

diff --git a/src/navigation/menu.scss b/src/navigation/menu.scss
@@ -82,7 +82,7 @@
   .menu-warning {
     float: right;
     // stylelint-disable-next-line primer/colors
-    color: var(--color-auto-red-9);
+    color: var(--color-icon-warning);
   }
 
   .avatar {

diff --git a/src/progress/progress.scss b/src/progress/progress.scss
@@ -5,7 +5,7 @@
   height: 8px;
   overflow: hidden;
   // stylelint-disable-next-line primer/colors
-  background-color: var(--color-auto-gray-2);
+  background-color: var(--color-neutral-muted, var(--color-auto-gray-2));
   border-radius: $border-radius;
   outline: 1px solid transparent; // Support Firefox custom colors
 }

diff --git a/src/utilities/details.scss b/src/utilities/details.scss
@@ -15,8 +15,7 @@
 
 .details-overlay-dark[open] > summary::before {
   z-index: 99;
-  // stylelint-disable-next-line primer/colors
-  background: var(--color-fade-black-50);
+  background: var(--color-bg-backdrop);
 }
 
 .details-reset {

diff --git a/stylelint.config.js b/stylelint.config.js
@@ -14,6 +14,6 @@ module.exports = {
     'primer/typography': true,
     'primer/box-shadow': true,
     'primer-css/TODO': [true, {currentVersion, severity: 'error'}],
-    'primer/no-undefined-vars': [true, {files: 'node_modules/@primer/primitives/dist/scss/colors/*.scss'}]
+    'primer/no-undefined-vars': [true, {files: 'node_modules/@primer/primitives/dist/scss/colors*/*.scss'}]
   }
 }