Revert v8 color var fallbacks (#2113)

primer · Jun 29, 2023 · 3822319 · 3822319
1 parent fe24489
commit 3822319
Show file tree

Hide file tree

Showing 40 changed files with 658 additions and 1,785 deletions.
diff --git a/.changeset/rare-cats-refuse.md b/.changeset/rare-cats-refuse.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Revert v8 color var fallbacks (#2083)
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -1,6 +1,5 @@
 {
   "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
-  "plugins": ["@primer/stylelint-config/plugins/no-deprecated-colors"],
   "ignoreFiles": ["app/**/*.css", "**/*.js", "**/*.ts"],
   "rules": {
     "custom-property-pattern": null,
@@ -15,7 +14,6 @@
       {
         "ignoreAtRules": ["mixin", "define-mixin"]
       }
-    ],
-    "primer/no-deprecated-colors": true
+    ]
   }
 }
diff --git a/app/components/primer/alpha/action_list.pcss b/app/components/primer/alpha/action_list.pcss
@@ -28,7 +28,7 @@
     width: 100%;
     height: 1px;
     content: '';
-    background: var(--borderColor-muted);
+    background: var(--color-action-list-item-inline-divider);
   }
 
   /* if descriptionWrap--inline exists, move pseudo divider to wrapper */
@@ -40,7 +40,7 @@
       width: 100%;
       height: var(--borderWidth-thin);
       content: '';
-      background: var(--borderColor-muted);
+      background: var(--color-action-list-item-inline-divider);
     }
 
     /* unset the default label pseudo */
@@ -75,7 +75,7 @@
 .ActionListItem {
   position: relative;
   list-style: none;
-  background-color: var(--control-transparent-bgColor-rest);
+  background-color: transparent;
   border-radius: var(--borderRadius-medium);
 
   /* state */
@@ -113,12 +113,12 @@
 
       @media (hover: hover) {
         &:hover {
-          background-color: var(--control-transparent-bgColor-hover);
+          background-color: var(--color-action-list-item-default-hover-bg);
         }
       }
 
       &:active {
-        background-color: var(--control-transparent-bgColor-active);
+        background-color: var(--color-action-list-item-default-active-bg);
       }
     }
   }
@@ -130,25 +130,25 @@
     @media (hover: hover) {
       &:hover {
         cursor: pointer;
-        background-color: var(--control-transparent-bgColor-hover);
+        background-color: var(--color-action-list-item-default-hover-bg);
 
         &:not(.ActionListItem--navActive, :focus-visible) {
           /* Support for "Windows high contrast mode" */
           outline: solid var(--borderWidth-thin) transparent;
           outline-offset: calc(-1 * var(--borderWidth-thin));
-          box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);
+          box-shadow: var(--boxShadow-thin) var(--color-action-list-item-default-active-border);
         }
       }
     }
 
     &:active {
-      background: var(--control-transparent-bgColor-active);
+      background: var(--color-action-list-item-default-active-bg);
 
       &:not(.ActionListItem--navActive) {
         /* Support for "Windows high contrast mode" https:sarahmhigley.com/writing/whcm-quick-tips/ */
         outline: solid var(--borderWidth-thin) transparent;
         outline-offset: calc(-1 * var(--borderWidth-thin));
-        box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);
+        box-shadow: var(--boxShadow-thin) var(--color-action-list-item-default-active-border);
       }
 
       & .ActionListItem-label::before,
@@ -162,11 +162,11 @@
 
   &[aria-selected='true'] {
     font-weight: var(--base-text-weight-normal);
-    background: var(--control-transparent-bgColor-selected);
+    background: var(--color-action-list-item-default-selected-bg);
 
     @media (hover: hover) {
       &:hover {
-        background-color: var(--control-transparent-bgColor-hover);
+        background-color: var(--color-action-list-item-default-hover-bg);
       }
     }
 
@@ -195,11 +195,11 @@
     }
 
     &:not(.ActionListItem--danger) {
-      background: var(--control-transparent-bgColor-selected);
+      background: var(--color-action-list-item-default-selected-bg);
 
       @media (hover: hover) {
         &:hover {
-          background-color: var(--control-transparent-bgColor-hover);
+          background-color: var(--color-action-list-item-default-hover-bg);
         }
       }
 
@@ -222,11 +222,11 @@
     & .ActionListContent {
       & .ActionListItem-label,
       & .ActionListItem-description {
-        color: var(--control-fgColor-disabled);
+        color: var(--color-primer-fg-disabled);
       }
 
       & .ActionListItem-visual {
-        fill: var(--control-fgColor-disabled);
+        fill: var(--color-primer-fg-disabled);
       }
     }
 
@@ -243,31 +243,31 @@
   /* danger */
   &.ActionListItem--danger {
     & .ActionListItem-label {
-      color: var(--control-danger-fgColor-rest);
+      color: var(--color-danger-fg);
     }
 
     & .ActionListItem-visual {
-      color: var(--control-danger-fgColor-rest);
+      color: var(--color-danger-fg);
     }
 
     @media (hover: hover) {
       &:hover {
-        background: var(--control-danger-bgColor-hover);
+        background: var(--color-action-list-item-danger-hover-bg);
 
         & .ActionListItem-label,
         & .ActionListItem-visual {
-          color: var(--control-danger-fgColor-hover);
+          color: var(--color-action-list-item-danger-hover-text);
         }
       }
     }
 
     & .ActionListContent {
       &:active {
-        background: var(--control-danger-bgColor-active);
+        background: var(--color-action-list-item-danger-active-bg);
 
         & .ActionListItem-label,
         & .ActionListItem-visual {
-          color: var(--control-danger-fgColor-hover);
+          color: var(--color-action-list-item-danger-hover-text);
         }
       }
     }
@@ -281,7 +281,7 @@
   width: 100%;
   padding-block: var(--actionListContent-paddingBlock);
   padding-inline: var(--control-medium-paddingInline-condensed);
-  color: var(--control-fgColor-rest);
+  color: var(--color-fg-default);
   text-align: left;
   user-select: none;
   background-color: transparent;
@@ -310,11 +310,11 @@
   &[aria-disabled='true'] {
     & .ActionListItem-label,
     & .ActionListItem-description {
-      color: var(--control-fgColor-disabled);
+      color: var(--color-primer-fg-disabled);
     }
 
     & .ActionListItem-visual {
-      fill: var(--control-fgColor-disabled);
+      fill: var(--color-primer-fg-disabled);
     }
 
     @media (hover: hover) {
@@ -399,7 +399,7 @@
 
     /* show active indicator on parent collapse if child is active */
     &.ActionListContent--hasActiveSubItem {
-      background: var(--control-transparent-bgColor-selected);
+      background: var(--color-action-list-item-default-selected-bg);
 
       & .ActionListItem-label {
         font-weight: var(--base-text-weight-semibold);
@@ -451,13 +451,13 @@
     /* checkbox */
     & .ActionListItem-multiSelectIcon {
       & .ActionListItem-multiSelectIconRect {
-        fill: var(--control-checked-bgColor-rest);
-        stroke: var(--control-checked-bgColor-rest);
+        fill: var(--color-accent-fg);
+        stroke: var(--color-accent-fg);
         stroke-width: var(--borderWidth-thin, 1px);
       }
 
       & .ActionListItem-multiSelectCheckmark {
-        fill: var(--fgColor-onEmphasis);
+        fill: var(--color-fg-on-emphasis);
       }
     }
   }
@@ -494,15 +494,15 @@
     /* checkbox */
     & .ActionListItem-multiSelectIcon {
       & .ActionListItem-multiSelectIconRect {
-        fill: var(--bgColor-default);
-        stroke: var(--control-borderColor-rest);
+        fill: var(--color-canvas-default);
+        stroke: var(--color-border-default);
         stroke-width: var(--borderWidth-thin, 1px);
       }
     }
 
     & .ActionListItem-multiSelectIconRect {
-      fill: var(--bgColor-default);
-      border: var(--borderWidth-thin, 1px) solid var(--control-borderColor-rest);
+      fill: var(--color-canvas-default);
+      border: var(--borderWidth-thin, 1px) solid var(--color-border-default);
     }
   }
 
@@ -573,7 +573,7 @@
   font-size: var(--text-body-size-small);
   font-weight: var(--base-text-weight-normal);
   line-height: var(--text-body-lineHeight-small);
-  color: var(--fgColor-muted);
+  color: var(--color-fg-muted);
 }
 
 /* helper for grid alignment with multi-line content
@@ -582,9 +582,9 @@
 .ActionListItem-action {
   display: flex;
   min-height: var(--control-medium-lineBoxHeight);
-  color: var(--fgColor-muted);
+  color: var(--color-fg-muted);
   pointer-events: none;
-  fill: var(--fgColor-muted);
+  fill: var(--color-fg-muted);
   align-items: center;
 }
 
@@ -594,7 +594,7 @@
   font-size: var(--text-body-size-medium);
   font-weight: var(--base-text-weight-normal);
   line-height: var(--text-body-lineHeight-medium);
-  color: var(--fgColor-default);
+  color: var(--color-fg-default);
   grid-area: label;
 }
 
@@ -651,7 +651,7 @@
     font-size: var(--text-body-size-small);
     line-height: var(--text-body-lineHeight-small);
     font-weight: var(--base-text-weight-semibold);
-    color: var(--fgColor-muted);
+    color: var(--color-fg-muted);
     flex-direction: column;
   }
 
@@ -664,24 +664,24 @@
     margin-block-end: var(--base-size-8);
     margin-inline: calc(-1 * var(--base-size-8));
     list-style: none;
-    background: var(--borderColor-muted);
+    background: var(--color-action-list-item-inline-divider);
     border: 0;
   }
 
   & .ActionList-sectionDivider-title {
     font-size: var(--text-body-size-small);
     font-weight: var(--base-text-weight-semibold);
-    color: var(--fgColor-muted);
+    color: var(--color-fg-muted);
   }
 }
 
 .ActionList-sectionDivider--filled {
   margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));
   margin-block-end: var(--base-size-8);
   margin-inline: calc(-1 * var(--base-size-8));
-  background: var(--bgColor-muted);
-  border-top: solid var(--borderWidth-thin) var(--borderColor-muted);
-  border-bottom: solid var(--borderWidth-thin) var(--borderColor-muted);
+  background: var(--color-canvas-subtle);
+  border-top: solid var(--borderWidth-thin) var(--color-action-list-item-inline-divider);
+  border-bottom: solid var(--borderWidth-thin) var(--color-action-list-item-inline-divider);
 
   /* if no children, treat as divider */
   &:empty {

diff --git a/app/components/primer/alpha/auto_complete.pcss b/app/components/primer/alpha/auto_complete.pcss
@@ -36,7 +36,7 @@
   align-items: center;
 
   &:focus-within {
-    border-color: var(--borderColor-accent-emphasis);
+    border-color: var(--color-accent-fg);
 
     @mixin focusBoxShadowInset;
   }
@@ -68,10 +68,10 @@
   overflow-y: auto;
   font-size: 13px;
   list-style: none;
-  background: var(--overlay-bgColor);
-  border: var(--borderWidth-thin) solid var(--borderColor-default);
+  background: var(--color-canvas-overlay);
+  border: var(--borderWidth-thin) solid var(--color-border-default);
   border-radius: var(--borderRadius-medium);
-  box-shadow: var(--shadow-resting-medium);
+  box-shadow: var(--color-shadow-medium);
 }
 
 /* One of the items that appears within an autocomplete group
@@ -83,19 +83,19 @@
   padding: 4px 8px;
   overflow: hidden;
   font-weight: var(--base-text-weight-semibold);
-  color: var(--fgColor-default);
+  color: var(--color-fg-default);
   text-align: left;
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
-  background-color: var(--overlay-bgColor);
+  background-color: var(--color-canvas-overlay);
   border: 0;
 
   &:hover {
-    color: var(--fgColor-onEmphasis);
+    color: var(--color-fg-on-emphasis);
     text-decoration: none;
-    background-color: var(--bgColor-accent-emphasis);
+    background-color: var(--color-accent-emphasis);
 
     /* Inherit color on all child elements to ensure enough contrast */
     & * {
@@ -106,9 +106,9 @@
   &.selected,
   &[aria-selected='true'],
   &.navigation-focus {
-    color: var(--fgColor-onEmphasis);
+    color: var(--color-fg-on-emphasis);
     text-decoration: none;
-    background-color: var(--bgColor-accent-emphasis);
+    background-color: var(--color-accent-emphasis);
 
     /* Inherit color on all child elements to ensure enough contrast */
     & * {