@primer/css 0.0.0-20240611213019 → 0.0.0-20240611235809

package/CHANGELOG.md

@@ -1,6 +1,10 @@
 # @primer/css
 
-## 0.0.0-20240611213019
+## 0.0.0-20240611235809
+
+### Major Changes
+
+- [#2607](https://github.com/primer/css/pull/2607) [`b333032`](https://github.com/primer/css/commit/b3330321510a1cd7f8be5b3c80a4798221fdc822) Thanks [@langermank](https://github.com/langermank)! - - Remove legacy color variables
 
 ### Patch Changes
 

package/autocomplete/suggester.scss

@@ -11,20 +11,20 @@
   margin-top: var(--base-size-24);
   list-style: none;
   cursor: pointer;
-  background: var(--overlay-bgColor, var(--color-canvas-overlay));
-  border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
+  background: var(--overlay-bgColor);
+  border: $border-width $border-style var(--borderColor-default);
   border-radius: $border-radius;
-  box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium));
+  box-shadow: var(--shadow-resting-medium);
 
   li {
     display: block;
     padding: var(--base-size-4) var(--base-size-8);
     font-weight: $font-weight-semibold;
-    border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
+    border-bottom: $border-width $border-style var(--borderColor-muted);
 
     small {
       font-weight: $font-weight-normal;
-      color: var(--fgColor-muted, var(--color-fg-muted));
+      color: var(--fgColor-muted);
     }
 
     &:last-child {
@@ -39,12 +39,12 @@
     }
 
     &:hover {
-      color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+      color: var(--fgColor-onEmphasis);
       text-decoration: none;
-      background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
+      background: var(--bgColor-accent-emphasis);
 
       small {
-        color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+        color: var(--fgColor-onEmphasis);
       }
 
       .octicon {
@@ -54,12 +54,12 @@
 
     &[aria-selected='true'],
     &.navigation-focus {
-      color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+      color: var(--fgColor-onEmphasis);
       text-decoration: none;
-      background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
+      background: var(--bgColor-accent-emphasis);
 
       small {
-        color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+        color: var(--fgColor-onEmphasis);
       }
 
       .octicon {

package/avatars/avatar-parent-child.scss

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

package/avatars/circle-badge.scss

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

package/base/base.scss

@@ -16,12 +16,12 @@ body {
   font-family: $body-font;
   font-size: var(--body-font-size, $body-font-size);
   line-height: $body-line-height;
-  color: var(--fgColor-default, var(--color-fg-default));
-  background-color: var(--bgColor-default, var(--color-canvas-default));
+  color: var(--fgColor-default);
+  background-color: var(--bgColor-default);
 }
 
 a {
-  color: var(--fgColor-accent, var(--color-accent-fg));
+  color: var(--fgColor-accent);
   text-decoration: none;
 
   &:hover {
@@ -46,7 +46,7 @@ label {
 
 // Custom styling for HTML5 validation bubbles (WebKit only)
 ::placeholder {
-  color: var(--fgColor-muted, var(--color-fg-subtle));
+  color: var(--fgColor-muted);
   opacity: 1; // override opacity in normalize.css
 }
 
@@ -61,7 +61,7 @@ hr,
   overflow: hidden;
   background: transparent;
   border: 0;
-  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
+  border-bottom: $border-width $border-style var(--borderColor-muted);
 
   @include clearfix();
 }

package/base/kbd.scss

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

package/base/native-colors.scss

@@ -6,8 +6,8 @@
 @include color-mode(dark) { color-scheme: dark; }
 
 [data-color-mode] {
-  color: var(--fgColor-default, var(--color-fg-default));
-  background-color: var(--bgColor-default, var(--color-canvas-default));
+  color: var(--fgColor-default);
+  background-color: var(--bgColor-default);
 }
 
 // Windows High Contrast mode
@@ -16,8 +16,6 @@
 // stylelint-disable selector-max-type
 @media (forced-colors: active) {
   body {
-    --color-accent-emphasis: Highlight;
-    --color-fg-on-emphasis: LinkText;
     --fgColor-onEmphasis: LinkText;
     --fgColor-accent: Highlight;
   }

package/base/normalize.scss

@@ -153,8 +153,8 @@ h1 {
  */
 
 mark {
-  background-color: var(--bgColor-attention-muted, var(--color-attention-subtle));
-  color: var(--fgColor-default, var(--color-fg-default));
+  background-color: var(--bgColor-attention-muted);
+  color: var(--fgColor-default);
 }
 
 /**

package/box/box-overlay.scss

@@ -3,9 +3,9 @@
   width: 448px;
   margin-right: auto;
   margin-left: auto;
-  background-color: var(--bgColor-default, var(--color-canvas-default));
+  background-color: var(--bgColor-default);
   background-clip: padding-box;
-  border-color: var(--borderColor-default, var(--color-border-default));
+  border-color: var(--borderColor-default);
   // stylelint-disable-next-line primer/box-shadow
   box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
 
@@ -36,7 +36,7 @@
   .help {
     padding-top: var(--base-size-8);
     margin: 0;
-    color: var(--fgColor-muted, var(--color-fg-muted));
+    color: var(--fgColor-muted);
     text-align: center;
   }
 }

package/branch-name/branch-name.scss

@@ -7,25 +7,25 @@
   // stylelint-disable-next-line primer/spacing
   padding: 2px 6px;
   font: 12px $mono-font;
-  color: var(--fgColor-muted, var(--color-fg-muted));
+  color: var(--fgColor-muted);
   word-break: break-all;
-  background-color: var(--bgColor-accent-muted, var(--color-accent-subtle));
+  background-color: var(--bgColor-accent-muted);
   border-radius: $border-radius;
 
   .octicon {
     // stylelint-disable-next-line primer/spacing
     margin: 1px -2px 0 0;
-    color: var(--fgColor-muted, var(--color-fg-muted));
+    color: var(--fgColor-muted);
   }
 }
 
 // When a branch name is a link
 
 a.branch-name {
-  color: var(--fgColor-accent, var(--color-accent-fg));
-  background-color: var(--bgColor-accent-muted, var(--color-accent-subtle));
+  color: var(--fgColor-accent);
+  background-color: var(--bgColor-accent-muted);
 
   .octicon {
-    color: var(--fgColor-accent, var(--color-accent-fg));
+    color: var(--fgColor-accent);
   }
 }

package/buttons/button.scss

@@ -36,7 +36,7 @@
 
   .octicon {
     margin-right: var(--base-size-4);
-    color: var(--fgColor-muted, var(--color-fg-muted));
+    color: var(--fgColor-muted);
     vertical-align: text-bottom;
 
     &:only-child {
@@ -50,7 +50,7 @@
     color: inherit;
     text-shadow: none;
     vertical-align: top;
-    background-color: var(--buttonCounter-default-bgColor-rest, var(--color-btn-counter-bg));
+    background-color: var(--buttonCounter-default-bgColor-rest);
   }
 
   .dropdown-caret {
@@ -62,42 +62,42 @@
 // Default button
 
 .btn {
-  color: var(--button-default-fgColor-rest, var(--color-btn-text));
-  background-color: var(--button-default-bgColor-rest, var(--color-btn-bg));
-  border-color: var(--button-default-borderColor-rest, var(--color-btn-border));
-  box-shadow: var(--button-default-shadow-resting, var(--color-btn-shadow)), var(--button-default-shadow-inset, var(--color-btn-inset-shadow));
+  color: var(--button-default-fgColor-rest);
+  background-color: var(--button-default-bgColor-rest);
+  border-color: var(--button-default-borderColor-rest);
+  box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);
   transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
   transition-property: color, background-color, box-shadow, border-color;
 
   &:hover,
   &.hover,
   [open] > & {
-    background-color: var(--button-default-bgColor-hover, var(--color-btn-hover-bg));
-    border-color: var(--button-default-borderColor-hover, var(--color-btn-hover-border));
+    background-color: var(--button-default-bgColor-hover);
+    border-color: var(--button-default-borderColor-hover);
     transition-duration: 0.1s;
   }
 
   &:active {
-    background-color: var(--button-default-bgColor-active, var(--color-btn-active-bg));
-    border-color: var(--button-default-borderColor-active, var(--color-btn-active-border));
+    background-color: var(--button-default-bgColor-active);
+    border-color: var(--button-default-borderColor-active);
     transition: none;
   }
 
   &.selected,
   &[aria-selected='true'] {
-    background-color: var(--button-default-bgColor-selected, var(--color-btn-selected-bg));
-    box-shadow: var(--shadow-inset, var(--color-primer-shadow-inset));
+    background-color: var(--button-default-bgColor-selected);
+    box-shadow: var(--shadow-inset);
   }
 
   &:disabled,
   &.disabled,
   &[aria-disabled='true'] {
-    color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
-    background-color: var(--button-default-bgColor-rest, var(--color-btn-bg));
-    border-color: var(--button-default-borderColor-rest, var(--color-btn-border));
+    color: var(--fgColor-disabled);
+    background-color: var(--button-default-bgColor-rest);
+    border-color: var(--button-default-borderColor-rest);
 
     .octicon {
-      color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
+      color: var(--fgColor-disabled);
     }
   }
 }
@@ -105,16 +105,16 @@
 // Primary button
 
 .btn-primary {
-  color: var(--button-primary-fgColor-rest, var(--color-btn-primary-text));
-  background-color: var(--button-primary-bgColor-rest, var(--color-btn-primary-bg));
-  border-color: var(--button-primary-borderColor-rest, var(--color-btn-primary-border));
-  box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow)), var(--shadow-highlight, var(--color-btn-primary-inset-shadow));
+  color: var(--button-primary-fgColor-rest);
+  background-color: var(--button-primary-bgColor-rest);
+  border-color: var(--button-primary-borderColor-rest);
+  box-shadow: var(--shadow-resting-small), var(--shadow-highlight);
 
   &:hover,
   &.hover,
   [open] > & {
-    background-color: var(--button-primary-bgColor-hover, var(--color-btn-primary-hover-bg));
-    border-color: var(--button-primary-borderColor-hover, var(--color-btn-primary-hover-border));
+    background-color: var(--button-primary-bgColor-hover);
+    border-color: var(--button-primary-borderColor-hover);
   }
 
   // fallback :focus state
@@ -136,29 +136,29 @@
   &:active,
   &.selected,
   &[aria-selected='true'] {
-    background-color: var(--button-primary-bgColor-active, var(--color-btn-primary-selected-bg));
-    box-shadow: var(--button-primary-shadow-selected, var(--color-btn-primary-selected-shadow));
+    background-color: var(--button-primary-bgColor-active);
+    box-shadow: var(--button-primary-shadow-selected);
   }
 
   &:disabled,
   &.disabled,
   &[aria-disabled='true'] {
-    color: var(--button-primary-fgColor-disabled, var(--color-btn-primary-disabled-text));
-    background-color: var(--button-primary-bgColor-disabled, var(--color-btn-primary-disabled-bg));
-    border-color: var(--button-primary-borderColor-disabled, var(--color-btn-primary-disabled-border));
+    color: var(--button-primary-fgColor-disabled);
+    background-color: var(--button-primary-bgColor-disabled);
+    border-color: var(--button-primary-borderColor-disabled);
 
     .octicon {
-      color: var(--button-primary-fgColor-disabled, var(--color-btn-primary-disabled-text));
+      color: var(--button-primary-fgColor-disabled);
     }
   }
 
   .Counter {
     color: inherit;
-    background-color: var(--buttonCounter-primary-bgColor-rest, var(--color-btn-primary-counter-bg));
+    background-color: var(--buttonCounter-primary-bgColor-rest);
   }
 
   .octicon {
-    color: var(--button-primary-iconColor-rest, var(--color-btn-primary-icon));
+    color: var(--button-primary-iconColor-rest);
   }
 }
 
@@ -185,17 +185,17 @@ a.btn-primary {
 // Outline button
 
 .btn-outline {
-  color: var(--button-outline-fgColor-rest, var(--color-btn-outline-text));
+  color: var(--button-outline-fgColor-rest);
 
   &:hover,
   [open] > & {
-    color: var(--button-outline-fgColor-hover, var(--color-btn-outline-hover-text));
-    background-color: var(--button-outline-bgColor-hover, var(--color-btn-outline-hover-bg));
-    border-color: var(--button-outline-borderColor-hover, var(--color-btn-outline-hover-border));
-    box-shadow: var(--shadow-resting-small, var(--color-btn-outline-hover-shadow)), var(--shadow-highlight, var(--color-btn-outline-hover-inset-shadow));
+    color: var(--button-outline-fgColor-hover);
+    background-color: var(--button-outline-bgColor-hover);
+    border-color: var(--button-outline-borderColor-hover);
+    box-shadow: var(--shadow-resting-small), var(--shadow-highlight);
 
     .Counter {
-      background-color: var(--buttonCounter-outline-bgColor-hover, var(--color-btn-outline-hover-counter-bg));
+      background-color: var(--buttonCounter-outline-bgColor-hover);
     }
 
     .octicon {
@@ -206,10 +206,10 @@ a.btn-primary {
   &:active,
   &.selected,
   &[aria-selected='true'] {
-    color: var(--button-outline-fgColor-active, var(--color-btn-outline-selected-text));
-    background-color: var(--button-outline-bgColor-active, var(--color-btn-outline-selected-bg));
-    border-color: var(--button-outline-borderColor-active, var(--color-btn-outline-selected-border));
-    box-shadow: var(--button-outline-shadow-selected, var(--color-btn-outline-selected-shadow));
+    color: var(--button-outline-fgColor-active);
+    background-color: var(--button-outline-bgColor-active);
+    border-color: var(--button-outline-borderColor-active);
+    box-shadow: var(--button-outline-shadow-selected);
 
     // fallback :focus state
     &:focus {
@@ -231,76 +231,76 @@ a.btn-primary {
   &:disabled,
   &.disabled,
   &[aria-disabled='true'] {
-    color: var(--button-outline-fgColor-disabled, var(--color-btn-outline-disabled-text));
-    background-color: var(--button-outline-bgColor-disabled, var(--color-btn-outline-disabled-bg));
-    border-color: var(--button-default-borderColor-rest, var(--color-btn-border));
+    color: var(--button-outline-fgColor-disabled);
+    background-color: var(--button-outline-bgColor-disabled);
+    border-color: var(--button-default-borderColor-rest);
     box-shadow: none;
 
     .Counter {
-      background-color: var(--buttonCounter-outline-bgColor-disabled, var(--color-btn-outline-disabled-counter-bg));
+      background-color: var(--buttonCounter-outline-bgColor-disabled);
     }
   }
 
   .Counter {
     color: inherit;
-    background-color: var(--buttonCounter-outline-bgColor-rest, var(--color-btn-outline-counter-bg));
+    background-color: var(--buttonCounter-outline-bgColor-rest);
   }
 }
 
 // Danger button
 
 .btn-danger {
-  color: var(--button-danger-fgColor-rest, var(--color-btn-danger-text));
+  color: var(--button-danger-fgColor-rest);
 
   .octicon {
-    color: var(--button-danger-iconColor-rest, var(--color-btn-danger-icon));
+    color: var(--button-danger-iconColor-rest);
   }
 
   &:hover,
   [open] > & {
-    color: var(--button-danger-fgColor-hover, var(--color-btn-danger-hover-text));
-    background-color: var(--button-danger-bgColor-hover, var(--color-btn-danger-hover-bg));
-    border-color: var(--button-danger-borderColor-hover, var(--color-btn-danger-hover-border));
-    box-shadow: var(--shadow-resting-small, var(--color-btn-danger-hover-shadow)), var(--shadow-highlight, var(--color-btn-danger-hover-inset-shadow));
+    color: var(--button-danger-fgColor-hover);
+    background-color: var(--button-danger-bgColor-hover);
+    border-color: var(--button-danger-borderColor-hover);
+    box-shadow: var(--shadow-resting-small), var(--shadow-highlight);
 
     .Counter {
-      background-color: var(--buttonCounter-danger-bgColor-hover, var(--color-btn-danger-hover-counter-bg));
+      background-color: var(--buttonCounter-danger-bgColor-hover);
     }
 
     .octicon {
-      color: var(--button-danger-iconColor-hover, var(--color-btn-danger-hover-icon));
+      color: var(--button-danger-iconColor-hover);
     }
   }
 
   &:active,
   &.selected,
   &[aria-selected='true'] {
-    color: var(--button-danger-fgColor-active, var(--color-btn-danger-selected-text));
-    background-color: var(--button-danger-bgColor-active, var(--color-btn-danger-selected-bg));
-    border-color: var(--button-danger-borderColor-active, var(--color-btn-danger-selected-border));
-    box-shadow: var(--button-danger-shadow-selected, var(--color-btn-danger-selected-shadow));
+    color: var(--button-danger-fgColor-active);
+    background-color: var(--button-danger-bgColor-active);
+    border-color: var(--button-danger-borderColor-active);
+    box-shadow: var(--button-danger-shadow-selected);
   }
 
   &:disabled,
   &.disabled,
   &[aria-disabled='true'] {
-    color: var(--button-danger-fgColor-disabled, var(--color-btn-danger-disabled-text));
-    background-color: var(--button-danger-bgColor-disabled, var(--color-btn-danger-disabled-bg));
-    border-color: var(--button-default-borderColor-rest, var(--color-btn-border));
+    color: var(--button-danger-fgColor-disabled);
+    background-color: var(--button-danger-bgColor-disabled);
+    border-color: var(--button-default-borderColor-rest);
     box-shadow: none;
 
     .Counter {
-      background-color: var(--buttonCounter-danger-bgColor-disabled, var(--color-btn-danger-disabled-counter-bg));
+      background-color: var(--buttonCounter-danger-bgColor-disabled);
     }
 
     .octicon {
-      color: var(--button-danger-fgColor-disabled, var(--color-btn-danger-disabled-text));
+      color: var(--button-danger-fgColor-disabled);
     }
   }
 
   .Counter {
     color: inherit;
-    background-color: var(--buttonCounter-danger-bgColor-rest, var(--color-btn-danger-counter-bg));
+    background-color: var(--buttonCounter-danger-bgColor-rest);
   }
 }