Replacing deprecated variables with color v2 variables (#1575)

* Correcting stylelint deprecated color vars

* Fixing deprecations with no replacement

.changeset/cuddly-apricots-protect.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": minor
+---
+
+Replacing deprecated variables with color v2 variables

src/alerts/flash.scss

@@ -64,42 +64,42 @@
 //
 
 .flash {
-  color: var(--color-alert-info-text);
-  background-image: linear-gradient(var(--color-alert-info-bg), var(--color-alert-info-bg));
-  border-color: var(--color-alert-info-border);
+  color: var(--color-fg-default);
+  background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));
+  border-color: var(--color-accent-muted);
 
   .octicon {
-    color: var(--color-alert-info-icon);
+    color: var(--color-accent-fg);
   }
 }
 
 .flash-warn {
-  color: var(--color-alert-warn-text);
-  background-image: linear-gradient(var(--color-alert-warn-bg), var(--color-alert-warn-bg));
-  border-color: var(--color-alert-warn-border);
+  color: var(--color-fg-default);
+  background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
+  border-color: var(--color-attention-muted);
 
   .octicon {
-    color: var(--color-alert-warn-icon);
+    color: var(--color-attention-fg);
   }
 }
 
 .flash-error {
-  color: var(--color-alert-error-text);
-  background-image: linear-gradient(var(--color-alert-error-bg), var(--color-alert-error-bg));
-  border-color: var(--color-alert-error-border);
+  color: var(--color-fg-default);
+  background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
+  border-color: var(--color-danger-muted);
 
   .octicon {
-    color: var(--color-alert-error-icon);
+    color: var(--color-danger-fg);
   }
 }
 
 .flash-success {
-  color: var(--color-alert-success-text);
-  background-image: linear-gradient(var(--color-alert-success-bg), var(--color-alert-success-bg));
-  border-color: var(--color-alert-success-border);
+  color: var(--color-fg-default);
+  background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
+  border-color: var(--color-success-muted);
 
   .octicon {
-    color: var(--color-alert-success-icon);
+    color: var(--color-success-fg);
   }
 }
 
@@ -129,7 +129,7 @@
 // Makes sure the background is opaque to cover any content underneath
 .flash-full,
 .flash-banner {
-  background-color: var(--color-bg-canvas);
+  background-color: var(--color-canvas-default);
 }
 
 // FIXME deprecate this
@@ -138,5 +138,5 @@
   // stylelint-disable-next-line primer/spacing
   margin-bottom: 0.8em;
   font-weight: $font-weight-bold;
-  background-color: var(--color-alert-warn-bg);
+  background-color: var(--color-attention-subtle);
 }

src/autocomplete/autocomplete.scss

@@ -8,10 +8,10 @@
   // stylelint-disable-next-line primer/typography
   font-size: 13px;
   list-style: none;
-  background: var(--color-bg-overlay);
-  border: $border-width $border-style var(--color-border-primary);
+  background: var(--color-canvas-overlay);
+  border: $border-width $border-style var(--color-border-default);
   border-radius: $border-radius;
-  box-shadow: var(--color-autocomplete-shadow);
+  box-shadow: var(--color-shadow-medium);
 }
 
 // One of the items that appears within an autocomplete group
@@ -23,19 +23,19 @@
   padding: $spacer-1 $spacer-2;
   overflow: hidden;
   font-weight: $font-weight-bold;
-  color: var(--color-text-primary);
+  color: var(--color-fg-default);
   text-align: left;
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
-  background-color: var(--color-bg-overlay);
+  background-color: var(--color-canvas-overlay);
   border: 0;
 
   &:hover {
-    color: var(--color-state-hover-primary-text);
+    color: var(--color-fg-on-emphasis);
     text-decoration: none;
-    background-color: var(--color-state-hover-primary-bg);
+    background-color: var(--color-accent-emphasis);
 
     // Inherit color on all child elements to ensure enough contrast
     * {
@@ -46,9 +46,9 @@
   &.selected,
   &[aria-selected=true],
   &.navigation-focus {
-    color: var(--color-state-selected-primary-text);
+    color: var(--color-fg-on-emphasis);
     text-decoration: none;
-    background-color: var(--color-state-selected-primary-bg);
+    background-color: var(--color-accent-emphasis);
 
     // Inherit color on all child elements to ensure enough contrast
     * {

src/autocomplete/suggester.scss

@@ -11,20 +11,20 @@
   margin-top: $spacer-4;
   list-style: none;
   cursor: pointer;
-  background: var(--color-bg-overlay);
-  border: $border-width $border-style var(--color-border-primary);
+  background: var(--color-canvas-overlay);
+  border: $border-width $border-style var(--color-border-default);
   border-radius: $border-radius;
-  box-shadow: var(--color-autocomplete-shadow);
+  box-shadow: 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-autocomplete-row-border);
+    border-bottom: $border-width $border-style var(--color-border-muted);
 
     small {
       font-weight: $font-weight-normal;
-      color: var(--color-text-secondary);
+      color: var(--color-fg-muted);
     }
 
     &:last-child {
@@ -39,23 +39,23 @@
     }
 
     &:hover {
-      color: var(--color-state-hover-primary-text);
+      color: var(--color-fg-on-emphasis);
       text-decoration: none;
-      background: var(--color-state-hover-primary-bg);
+      background: var(--color-accent-emphasis);
 
       small {
-        color: var(--color-state-hover-primary-text);
+        color: var(--color-fg-on-emphasis);
       }
     }
 
     &[aria-selected="true"],
     &.navigation-focus {
-      color: var(--color-state-selected-primary-text);
+      color: var(--color-fg-on-emphasis);
       text-decoration: none;
-      background: var(--color-state-selected-primary-bg);
+      background: var(--color-accent-emphasis);
 
       small {
-        color: var(--color-state-selected-primary-text);
+        color: var(--color-fg-on-emphasis);
       }
     }
   }

src/avatars/avatar-parent-child.scss

@@ -10,7 +10,7 @@
   position: absolute;
   right: -15%;
   bottom: -9%;
-  background-color: var(--color-bg-canvas); // For transparent backgrounds
+  background-color: var(--color-canvas-default); // For transparent backgrounds
   // stylelint-disable-next-line primer/borders
   border-radius: $border-radius-1;
   box-shadow: var(--color-avatar-child-shadow);

src/avatars/avatar-stack.scss

@@ -21,7 +21,7 @@
 
 .AvatarStack-body {
   display: flex;
-  background: var(--color-bg-canvas);
+  background: var(--color-canvas-default);
 
   .avatar {
     position: relative;
@@ -32,8 +32,8 @@
     box-sizing: content-box;
     // stylelint-disable-next-line primer/spacing
     margin-right: -11px;
-    background-color: var(--color-bg-canvas);
-    border-right: $border-width $border-style var(--color-bg-canvas);
+    background-color: var(--color-canvas-default);
+    border-right: $border-width $border-style var(--color-canvas-default);
     // stylelint-disable-next-line primer/borders
     border-radius: $border-radius-1;
     transition: margin 0.1s ease-in-out;
@@ -82,7 +82,7 @@
 .avatar.avatar-more {
   z-index: 1;
   margin-right: 0;
-  background: var(--color-bg-tertiary);
+  background: var(--color-canvas-subtle);
 
   &::before,
   &::after {
@@ -92,7 +92,7 @@
     content: "";
     // stylelint-disable-next-line primer/borders
     border-radius: 2px;
-    outline: $border-width $border-style var(--color-bg-canvas);
+    outline: $border-width $border-style var(--color-canvas-default);
   }
 
   &::before {
@@ -129,7 +129,7 @@
 
     &::after {
       width: 2px;
-      background: var(--color-bg-tertiary);
+      background: var(--color-canvas-subtle);
     }
   }
 
@@ -138,6 +138,6 @@
     // stylelint-disable-next-line primer/spacing
     margin-left: -11px;
     border-right: 0;
-    border-left: $border-width $border-style var(--color-bg-canvas);
+    border-left: $border-width $border-style var(--color-canvas-default);
   }
 }

src/avatars/circle-badge.scss

@@ -4,7 +4,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--color-bg-canvas);
+  background-color: var(--color-canvas-default);
   border-radius: 50%;
   box-shadow: var(--color-shadow-medium);
 }
@@ -46,7 +46,7 @@
     width: 100%;
     content: "";
     // stylelint-disable-next-line primer/borders
-    border-bottom: 2px dashed var(--color-border-primary);
+    border-bottom: 2px dashed var(--color-border-default);
   }
 
   .CircleBadge {

src/base/base.scss

@@ -16,12 +16,12 @@ body {
   font-family: $body-font;
   font-size: $body-font-size;
   line-height: $body-line-height;
-  color: var(--color-text-primary);
-  background-color: var(--color-bg-canvas);
+  color: var(--color-fg-default);
+  background-color: var(--color-canvas-default);
 }
 
 a {
-  color: var(--color-text-link);
+  color: var(--color-accent-fg);
   text-decoration: none;
 
   &:hover {
@@ -45,7 +45,7 @@ hr,
   overflow: hidden;
   background: transparent;
   border: 0;
-  border-bottom: $border-width $border-style var(--color-border-secondary);
+  border-bottom: $border-width $border-style var(--color-border-muted);
   @include clearfix();
 }
 

src/base/kbd.scss

@@ -8,13 +8,13 @@ kbd {
   font: 11px $mono-font;
   // stylelint-disable-next-line primer/typography
   line-height: 10px;
-  color: var(--color-text-primary);
+  color: var(--color-fg-default);
   vertical-align: middle;
-  background-color: var(--color-bg-secondary);
+  background-color: var(--color-canvas-subtle);
   // stylelint-disable-next-line primer/borders
-  border: $border-style $border-width var(--color-border-tertiary);
-  border-bottom-color: var(--color-border-tertiary);
+  border: $border-style $border-width var(--color-neutral-muted);
+  border-bottom-color: var(--color-neutral-muted);
   border-radius: $border-radius;
   // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 var(--color-border-tertiary);
+  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
 }

src/base/modes.scss

@@ -30,8 +30,8 @@
 // Enables nesting of different color modes
 
 [data-color-mode] {
-  color: var(--color-text-primary);
-  background-color: var(--color-bg-canvas);
+  color: var(--color-fg-default);
+  background-color: var(--color-canvas-default);
 }
 
 // color-scheme

src/blankslate/blankslate.scss

@@ -5,15 +5,15 @@
   text-align: center;
 
   p {
-    color: var(--color-text-secondary);
+    color: var(--color-fg-muted);
   }
 
   code {
     // stylelint-disable-next-line primer/spacing
     padding: 2px 5px 3px;
     font-size: $h5-size;
-    background: var(--color-bg-canvas);
-    border: $border-width $border-style var(--color-border-secondary);
+    background: var(--color-canvas-default);
+    border: $border-width $border-style var(--color-border-muted);
     border-radius: $border-radius;
   }
 
@@ -27,7 +27,7 @@
   margin-right: $spacer-1;
   margin-bottom: $spacer-2;
   margin-left: $spacer-1;
-  color: var(--color-icon-secondary);
+  color: var(--color-fg-muted);
 }
 
 .blankslate-capped {