@primer/css 21.0.3 → 21.0.4-rc.dc375524

package/markdown/footnotes.scss

@@ -14,7 +14,7 @@
 
   .footnotes {
     font-size: $h6-size;
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted, var(--color-fg-muted));
     border-top: $border;
 
     ol {
@@ -40,12 +40,12 @@
       pointer-events: none;
       content: '';
       // stylelint-disable-next-line primer/borders
-      border: 2px $border-style var(--color-accent-emphasis);
+      border: 2px $border-style var(--borderColor-accent-emphasis, var(--color-accent-emphasis));
       border-radius: $border-radius;
     }
 
     li:target {
-      color: var(--color-fg-default);
+      color: var(--fgColor-default, var(--color-fg-default));
     }
 
     .data-footnote-backref g-emoji {

package/markdown/headings.scss

@@ -15,7 +15,7 @@
     line-height: $lh-condensed;
 
     .octicon-link {
-      color: var(--color-fg-default);
+      color: var(--fgColor-default, var(--color-fg-default));
       vertical-align: middle;
       visibility: hidden;
     }
@@ -41,7 +41,7 @@
     padding-bottom: 0.3em;
     // stylelint-disable-next-line primer/typography
     font-size: 2em;
-    border-bottom: $border-width $border-style var(--color-border-muted);
+    border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
   }
 
   h2 {
@@ -49,7 +49,7 @@
     padding-bottom: 0.3em;
     // stylelint-disable-next-line primer/typography
     font-size: 1.5em;
-    border-bottom: $border-width $border-style var(--color-border-muted);
+    border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
   }
 
   h3 {
@@ -69,7 +69,7 @@
   h6 {
     // stylelint-disable-next-line primer/typography
     font-size: 0.85em;
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted, var(--color-fg-muted));
   }
 
   summary {

package/markdown/images.scss

@@ -8,7 +8,7 @@
     // because we put padding on the images to hide header lines, and some people
     // specify the width of their images in their markdown.
     box-sizing: content-box;
-    background-color: var(--color-canvas-default);
+    background-color: var(--bgColor-default, var(--color-canvas-default));
 
     &[align='right'] {
       // stylelint-disable-next-line primer/spacing
@@ -44,7 +44,7 @@
       // stylelint-disable-next-line primer/spacing
       margin: 13px 0 0;
       overflow: hidden;
-      border: $border-width $border-style var(--color-border-default);
+      border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
     }
 
     span img {
@@ -57,7 +57,7 @@
       // stylelint-disable-next-line primer/spacing
       padding: 5px 0 0;
       clear: both;
-      color: var(--color-fg-default);
+      color: var(--fgColor-default, var(--color-fg-default));
     }
   }
 

package/markdown/markdown-body.scss

@@ -43,7 +43,7 @@
 
   // Link Colors
   .absent {
-    color: var(--color-danger-fg);
+    color: var(--fgColor-danger, var(--color-danger-fg));
   }
 
   .anchor {
@@ -74,16 +74,16 @@
     height: $em-spacer-3;
     padding: 0;
     margin: $spacer-4 0;
-    background-color: var(--color-border-default);
+    background-color: var(--borderColor-default, var(--color-border-default));
     border: 0;
   }
 
   blockquote {
     // stylelint-disable-next-line primer/spacing
     padding: 0 1em;
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted, var(--color-fg-muted));
     // stylelint-disable-next-line primer/borders
-    border-left: 0.25em $border-style var(--color-border-default);
+    border-left: 0.25em $border-style var(--borderColor-default, var(--color-border-default));
 
     > :first-child {
       margin-top: 0;

package/markdown/tables.scss

@@ -17,7 +17,7 @@
     td {
       // stylelint-disable-next-line primer/spacing
       padding: 6px 13px;
-      border: $border-width $border-style var(--color-border-default);
+      border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
     }
 
     td {
@@ -27,11 +27,11 @@
     }
 
     tr {
-      background-color: var(--color-canvas-default);
-      border-top: $border-width $border-style var(--color-border-muted);
+      background-color: var(--bgColor-default, var(--color-canvas-default));
+      border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
       &:nth-child(2n) {
-        background-color: var(--color-canvas-subtle);
+        background-color: var(--bgColor-muted, var(--color-canvas-subtle));
       }
     }
 

package/marketing/buttons/button.scss

@@ -1,4 +1,3 @@
-/* stylelint-disable primer/no-deprecated-colors */
 .btn-mktg {
   position: relative;
   z-index: 1;
@@ -9,7 +8,7 @@
   font-size: 1rem;
   font-weight: $font-weight-bold;
   line-height: 1;
-  color: var(--color-canvas-default);
+  color: var(--bgColor-default, var(--color-canvas-default));
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
@@ -56,7 +55,7 @@
 
   // fallback :focus state
   &:focus {
-    @include focusOutline(2px, var(--color-accent-fg));
+    @include focusOutline(2px, var(--focus-outlineColor, var(--color-accent-fg)));
 
     // remove fallback :focus if :focus-visible is supported
     &:not(:focus-visible) {
@@ -67,7 +66,7 @@
 
   // default focus state
   &:focus-visible {
-    @include focusOutline(2px, var(--color-accent-fg));
+    @include focusOutline(2px, var(--focus-outlineColor, var(--color-accent-fg)));
   }
 
   &:active {
@@ -85,7 +84,7 @@
 }
 
 .btn-muted-mktg {
-  color: var(--color-fg-default) !important;
+  color: var(--fgColor-default, var(--color-fg-default)) !important;
   background: none !important;
   box-shadow: var(--color-mktg-btn-shadow-outline);
 
@@ -99,17 +98,17 @@
 
   &:active {
     // stylelint-disable-next-line primer/box-shadow
-    box-shadow: var(--color-fg-default) 0 0 0 3px inset !important;
+    box-shadow: var(--fgColor-default, var(--color-fg-default)) 0 0 0 3px inset !important;
   }
 
   &:disabled {
     // stylelint-disable-next-line primer/box-shadow
-    box-shadow: var(--color-fg-subtle) 0 0 0 1px inset !important;
+    box-shadow: var(--fgColor-muted, var(--color-fg-subtle)) 0 0 0 1px inset !important;
   }
 }
 
 .btn-subtle-mktg {
-  color: var(--color-fg-default) !important;
+  color: var(--fgColor-default, var(--color-fg-default)) !important;
   background: none !important;
   box-shadow: none !important;
 
@@ -135,7 +134,7 @@
 
   // fallback :focus state
   &:focus {
-    @include focusOutline(2px, var(--color-accent-fg));
+    @include focusOutline(2px, var(--focus-outlineColor, var(--color-accent-fg)));
 
     // remove fallback :focus if :focus-visible is supported
     &:not(:focus-visible) {
@@ -146,7 +145,7 @@
 
   // default focus state
   &:focus-visible {
-    @include focusOutline(2px, var(--color-accent-fg));
+    @include focusOutline(2px, var(--focus-outlineColor, var(--color-accent-fg)));
   }
 }
 

package/navigation/filter-list.scss

@@ -13,12 +13,12 @@
   }
 
   &.pjax-active .filter-item {
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted, var(--color-fg-muted));
     background-color: transparent;
 
     &.pjax-active {
-      color: var(--color-fg-on-emphasis);
-      background-color: var(--color-accent-emphasis);
+      color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+      background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
     }
   }
 }
@@ -30,7 +30,7 @@
   margin-bottom: $spacer-1;
   overflow: hidden;
   font-size: $h5-size;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -39,14 +39,14 @@
 
   &:hover {
     text-decoration: none;
-    background-color: var(--color-canvas-subtle);
+    background-color: var(--bgColor-muted, var(--color-canvas-subtle));
   }
 
   &.selected,
   &[aria-selected='true'],
   &[aria-current]:not([aria-current='false']) {
-    color: var(--color-fg-on-emphasis);
-    background-color: var(--color-accent-emphasis);
+    color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+    background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
 
     // fallback :focus state
     &:focus {
@@ -77,6 +77,6 @@
     bottom: 2px;
     z-index: -1;
     display: inline-block;
-    background-color: var(--color-neutral-subtle);
+    background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));
   }
 }

package/navigation/sidenav.scss

@@ -3,7 +3,7 @@
 // A vertical list of navigational links, typically used on the left side of a page.
 
 .SideNav {
-  background-color: var(--color-canvas-subtle);
+  background-color: var(--bgColor-muted, var(--color-canvas-subtle));
 }
 
 .SideNav-item {
@@ -12,11 +12,11 @@
   width: 100%;
   // stylelint-disable-next-line primer/spacing
   padding: 12px $spacer-3;
-  color: var(--color-fg-default);
+  color: var(--fgColor-default, var(--color-fg-default));
   text-align: left;
   background-color: transparent;
   border: 0;
-  border-top: $border-width $border-style var(--color-border-muted);
+  border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   &:first-child {
     border-top: 0;
@@ -25,7 +25,7 @@
   &:last-child {
     // makes sure there is a "bottom border" in case the list is not long enough
     // stylelint-disable-next-line primer/box-shadow
-    box-shadow: 0 $border-width 0 var(--color-border-default);
+    box-shadow: 0 $border-width 0 var(--borderColor-default, var(--color-border-default));
   }
 
   // Bar on the left
@@ -45,20 +45,20 @@
 
 .SideNav-item:hover {
   text-decoration: none;
-  background-color: var(--color-neutral-subtle);
+  background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));
 }
 
 .SideNav-item:active {
-  background-color: var(--color-canvas-subtle);
+  background-color: var(--bgColor-muted, var(--color-canvas-subtle));
 }
 
 .SideNav-item[aria-current]:not([aria-current='false']),
 .SideNav-item[aria-selected='true'] {
-  background-color: var(--color-sidenav-selected-bg);
+  background-color: var(--sideNav-bgColor-selected, var(--color-sidenav-selected-bg));
 
   // Bar on the left
   &::before {
-    background-color: var(--color-primer-border-active);
+    background-color: var(--underlineNav-borderColor-active, var(--color-primer-border-active));
   }
 }
 
@@ -69,7 +69,7 @@
 .SideNav-icon {
   width: 16px;
   margin-right: $spacer-2;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
 }
 
 // Sub Nav
@@ -81,19 +81,19 @@
   display: block;
   width: 100%;
   padding: $spacer-1 0;
-  color: var(--color-accent-fg);
+  color: var(--fgColor-accent, var(--color-accent-fg));
   text-align: left;
   background-color: transparent;
   border: 0;
 }
 
 .SideNav-subItem:hover {
-  color: var(--color-fg-default);
+  color: var(--fgColor-default, var(--color-fg-default));
   text-decoration: none;
 }
 
 .SideNav-subItem[aria-current]:not([aria-current='false']),
 .SideNav-subItem[aria-selected='true'] {
   font-weight: $font-weight-semibold;
-  color: var(--color-fg-default);
+  color: var(--fgColor-default, var(--color-fg-default));
 }

package/navigation/subnav.scss

@@ -12,7 +12,7 @@
 .subnav-bordered {
   // stylelint-disable-next-line primer/spacing
   padding-bottom: 20px;
-  border-bottom: $border-width $border-style var(--color-border-muted);
+  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 }
 
 .subnav-flush {
@@ -27,8 +27,8 @@
   font-weight: $font-weight-semibold;
   // stylelint-disable-next-line primer/typography
   line-height: 20px;
-  color: var(--color-fg-default);
-  border: $border-width $border-style var(--color-border-default);
+  color: var(--fgColor-default, var(--color-fg-default));
+  border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
 
   + .subnav-item {
     // stylelint-disable-next-line primer/spacing
@@ -38,16 +38,16 @@
   &:hover,
   &:focus {
     text-decoration: none;
-    background-color: var(--color-canvas-subtle);
+    background-color: var(--bgColor-muted, var(--color-canvas-subtle));
   }
 
   &.selected,
   &[aria-selected='true'],
   &[aria-current]:not([aria-current='false']) {
     z-index: 2;
-    color: var(--color-fg-on-emphasis);
-    background-color: var(--color-accent-emphasis);
-    border-color: var(--color-accent-emphasis);
+    color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+    background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
+    border-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis));
 
     // fallback :focus state
     &:focus {
@@ -86,7 +86,7 @@
 .subnav-search-input {
   width: 320px;
   padding-left: $spacer-5;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
 }
 
 .subnav-search-input-wide {
@@ -99,7 +99,7 @@
   top: 9px;
   left: 8px;
   display: block;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
   text-align: center;
   pointer-events: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "21.0.3",
+  "version": "21.0.4-rc.dc375524",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
@@ -50,7 +50,7 @@
     "@changesets/cli": "2.26.1",
     "@csstools/postcss-sass": "5.0.1",
     "@github/prettier-config": "0.0.6",
-    "@primer/stylelint-config": "^12.4.0",
+    "@primer/stylelint-config": "^12.7.1",
     "autoprefixer": "10.4.13",
     "chokidar-cli": "3.0.0",
     "cssstats": "4.0.5",

package/pagination/pagination.scss

@@ -10,7 +10,7 @@
     font-style: normal;
     // stylelint-disable-next-line primer/typography
     line-height: 20px;
-    color: var(--color-fg-default);
+    color: var(--fgColor-default, var(--color-fg-default));
     text-align: center;
     white-space: nowrap;
     vertical-align: middle;
@@ -23,26 +23,26 @@
     &:hover,
     &:focus {
       text-decoration: none;
-      border-color: var(--color-border-default);
+      border-color: var(--borderColor-default, var(--color-border-default));
       transition-duration: 0.1s;
     }
 
     &:active {
-      border-color: var(--color-border-muted);
+      border-color: var(--borderColor-muted, var(--color-border-muted));
       transition: none;
     }
   }
 
   .previous_page,
   .next_page {
-    color: var(--color-accent-fg);
+    color: var(--fgColor-accent, var(--color-accent-fg));
   }
 
   .current,
   .current:hover,
   [aria-current]:not([aria-current='false']) {
-    color: var(--color-fg-on-emphasis);
-    background-color: var(--color-accent-emphasis);
+    color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+    background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
     border-color: transparent;
   }
 
@@ -52,7 +52,7 @@
   .gap:hover,
   .disabled:hover,
   [aria-disabled='true']:hover {
-    color: var(--color-primer-fg-disabled);
+    color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
     cursor: default;
     border-color: transparent;
   }