@primer/css 21.3.6-rc.13cf9bf9 → 21.4.0-rc.264b5078

package/markdown/code.scss

@@ -10,6 +10,7 @@
     font-size: 85%;
     white-space: break-spaces; // keeps rendering spaces, but breaks them onto multiple lines
     background-color: var(--bgColor-neutral-muted, var(--color-neutral-muted));
+    // stylelint-disable-next-line primer/borders
     border-radius: $border-radius;
 
     br { display: none; }
@@ -60,6 +61,7 @@
     line-height: 1.45;
     color: var(--fgColor-default, var(--color-fg-default));
     background-color: var(--bgColor-muted, var(--color-canvas-subtle));
+    // stylelint-disable-next-line primer/borders
     border-radius: $border-radius;
   }
 

package/markdown/footnotes.scss

@@ -13,8 +13,10 @@
   }
 
   .footnotes {
+    // stylelint-disable-next-line primer/typography
     font-size: $h6-size;
     color: var(--fgColor-muted, var(--color-fg-muted));
+    // stylelint-disable-next-line primer/borders
     border-top: $border;
 
     ol {
@@ -41,6 +43,7 @@
       content: '';
       // stylelint-disable-next-line primer/borders
       border: 2px $border-style var(--borderColor-accent-emphasis, var(--color-accent-emphasis));
+      // stylelint-disable-next-line primer/borders
       border-radius: $border-radius;
     }
 
@@ -49,6 +52,7 @@
     }
 
     .data-footnote-backref g-emoji {
+      // stylelint-disable-next-line primer/typography
       font-family: monospace;
     }
   }

package/markdown/headings.scss

@@ -11,7 +11,9 @@
   h6 {
     margin-top: var(--base-size-24);
     margin-bottom: var(--base-size-16);
+    // stylelint-disable-next-line primer/typography
     font-weight: $font-weight-bold;
+    // stylelint-disable-next-line primer/typography
     line-height: $lh-condensed;
 
     .octicon-link {
@@ -41,6 +43,7 @@
     padding-bottom: 0.3em;
     // stylelint-disable-next-line primer/typography
     font-size: 2em;
+    // stylelint-disable-next-line primer/borders
     border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
   }
 
@@ -49,6 +52,7 @@
     padding-bottom: 0.3em;
     // stylelint-disable-next-line primer/typography
     font-size: 1.5em;
+    // stylelint-disable-next-line primer/borders
     border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
   }
 
@@ -58,6 +62,7 @@
   }
 
   h4 {
+    // stylelint-disable-next-line primer/typography
     font-size: 1em;
   }
 

package/markdown/images.scss

@@ -8,7 +8,6 @@
     // 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(--bgColor-default, var(--color-canvas-default));
 
     &[align='right'] {
       // stylelint-disable-next-line primer/spacing
@@ -44,6 +43,7 @@
       // stylelint-disable-next-line primer/spacing
       margin: 13px 0 0;
       overflow: hidden;
+      // stylelint-disable-next-line primer/borders
       border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
     }
 

package/markdown/lists.scss

@@ -86,8 +86,10 @@
     dt {
       padding: 0;
       margin-top: var(--base-size-16);
+      // stylelint-disable-next-line primer/typography
       font-size: 1em;
       font-style: italic;
+      // stylelint-disable-next-line primer/typography
       font-weight: $font-weight-bold;
     }
 

package/markdown/markdown-body.scss

@@ -5,8 +5,11 @@
 // container with .markdown-body on it should render generally well. It also
 // includes some GitHub Flavored Markdown specific styling (like @mentions)
 .markdown-body {
+  // stylelint-disable-next-line primer/typography
   font-family: $body-font;
+  // stylelint-disable-next-line primer/typography
   font-size: $h4-size;
+  // stylelint-disable-next-line primer/typography
   line-height: $body-line-height;
   word-wrap: break-word;
 
@@ -51,6 +54,7 @@
     padding-right: var(--base-size-4);
     // stylelint-disable-next-line primer/spacing
     margin-left: -20px;
+    // stylelint-disable-next-line primer/typography
     line-height: $lh-condensed-ultra;
 
     &:focus {

package/markdown/tables.scss

@@ -10,6 +10,7 @@
     overflow: auto;
 
     th {
+      // stylelint-disable-next-line primer/typography
       font-weight: $font-weight-bold;
     }
 
@@ -17,6 +18,7 @@
     td {
       // stylelint-disable-next-line primer/spacing
       padding: 6px 13px;
+      // stylelint-disable-next-line primer/borders
       border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
     }
 
@@ -28,6 +30,7 @@
 
     tr {
       background-color: var(--bgColor-default, var(--color-canvas-default));
+      // stylelint-disable-next-line primer/borders
       border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
       &:nth-child(2n) {

package/marketing/buttons/button.scss

@@ -6,7 +6,9 @@
   padding: 0.9rem 1.5rem 1.1rem;
   // stylelint-disable-next-line primer/typography
   font-size: 1rem;
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-bold;
+  // stylelint-disable-next-line primer/typography
   line-height: 1;
   color: var(--bgColor-default, var(--color-canvas-default));
   text-align: center;
@@ -41,6 +43,7 @@
 
   &:hover {
     text-decoration: none;
+    // stylelint-disable-next-line primer/box-shadow
     box-shadow: var(--color-mktg-btn-shadow-hover) !important;
   }
 
@@ -86,6 +89,7 @@
 .btn-muted-mktg {
   color: var(--fgColor-default, var(--color-fg-default)) !important;
   background: none !important;
+  // stylelint-disable-next-line primer/box-shadow
   box-shadow: var(--color-mktg-btn-shadow-outline);
 
   &::before {
@@ -93,6 +97,7 @@
   }
 
   &:hover {
+    // stylelint-disable-next-line primer/box-shadow
     box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
   }
 
@@ -117,6 +122,7 @@
   }
 
   &:hover {
+    // stylelint-disable-next-line primer/box-shadow
     box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
   }
 }

package/marketing/type/typography.scss

@@ -6,6 +6,7 @@
 .h4-mktg,
 .h5-mktg,
 .h6-mktg {
+  // stylelint-disable-next-line primer/typography
   font-family: $font-mktg;
   font-feature-settings: $mktg-font-feature-settings;
   // stylelint-disable-next-line primer/typography
@@ -19,14 +20,19 @@
     $pairing-md: map-get($mktg-header-pairings, nth($sizes, 2));
     $pairing-lg: map-get($mktg-header-pairings, nth($sizes, 3));
 
+    // stylelint-disable-next-line primer/typography
     font-size: map-get($pairing, 'size') !important;
+    // stylelint-disable-next-line primer/typography
     line-height: map-get($pairing, 'lh') !important;
 
+    // stylelint-disable-next-line primer/typography
     @if (map-get($pairing, 'size') >= $mktg-header-weight-threshold) { font-weight: $mktg-header-weight-large !important; }
 
     @if (nth($sizes, 1) != nth($sizes, 2)) {
       @include breakpoint(md) {
+        // stylelint-disable-next-line primer/typography
         font-size: map-get($pairing-md, 'size') !important;
+        // stylelint-disable-next-line primer/typography
         line-height: map-get($pairing-md, 'lh') !important;
 
         @if (map-get($pairing-md, 'size') >= $mktg-header-spacing-threshold and map-get($pairing, 'size') < $mktg-header-spacing-threshold) {
@@ -34,6 +40,7 @@
         }
 
         @if (map-get($pairing-md, 'size') >= $mktg-header-weight-threshold and map-get($pairing, 'size') < $mktg-header-weight-threshold) {
+          // stylelint-disable-next-line primer/typography
           font-weight: $mktg-header-weight-large !important;
         }
       }
@@ -41,7 +48,9 @@
 
     @if (nth($sizes, 2) != nth($sizes, 3)) {
       @include breakpoint(lg) {
+        // stylelint-disable-next-line primer/typography
         font-size: map-get($pairing-lg, 'size') !important;
+        // stylelint-disable-next-line primer/typography
         line-height: map-get($pairing-lg, 'lh') !important;
 
         @if (map-get($pairing-lg, 'size') >= $mktg-header-spacing-threshold and map-get($pairing-md, 'size') < $mktg-header-spacing-threshold) {
@@ -49,6 +58,7 @@
         }
 
         @if (map-get($pairing-lg, 'size') >= $mktg-header-weight-threshold and map-get($pairing-md, 'size') < $mktg-header-weight-threshold) {
+          // stylelint-disable-next-line primer/typography
           font-weight: $mktg-header-weight-large !important;
         }
       }
@@ -63,8 +73,10 @@
 .f4-mktg,
 .f5-mktg,
 .f6-mktg {
+  // stylelint-disable-next-line primer/typography
   font-family: $font-mktg;
   font-feature-settings: $mktg-font-feature-settings;
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-normal;
 }
 
@@ -74,16 +86,21 @@
     $pairing-md: map-get($mktg-body-pairings, nth($sizes, 2));
     $pairing-lg: map-get($mktg-body-pairings, nth($sizes, 3));
 
+    // stylelint-disable-next-line primer/typography
     font-size: map-get($pairing, 'size') !important;
+    // stylelint-disable-next-line primer/typography
     line-height: map-get($pairing, 'lh') !important;
 
     @if (map-get($pairing, 'size') >= $mktg-body-spacing-threshold) { letter-spacing: $mktg-body-spacing-large; }
 
+    // stylelint-disable-next-line primer/typography
     @if (map-get($pairing, 'size') >= $mktg-body-weight-threshold) { font-weight: $font-weight-semibold; }
 
     @if (nth($sizes, 1) != nth($sizes, 2)) {
       @include breakpoint(md) {
+        // stylelint-disable-next-line primer/typography
         font-size: map-get($pairing-md, 'size') !important;
+        // stylelint-disable-next-line primer/typography
         line-height: map-get($pairing-md, 'lh') !important;
 
         @if (map-get($pairing-md, 'size') >= $mktg-body-spacing-threshold and map-get($pairing, 'size') < $mktg-body-spacing-threshold) {
@@ -91,6 +108,7 @@
         }
 
         @if (map-get($pairing-md, 'size') >= $mktg-body-weight-threshold and map-get($pairing, 'size') < $mktg-body-weight-threshold) {
+          // stylelint-disable-next-line primer/typography
           font-weight: $font-weight-medium;
         }
       }
@@ -98,7 +116,9 @@
 
     @if (nth($sizes, 2) != nth($sizes, 3)) {
       @include breakpoint(lg) {
+        // stylelint-disable-next-line primer/typography
         font-size: map-get($pairing-lg, 'size') !important;
+        // stylelint-disable-next-line primer/typography
         line-height: map-get($pairing-lg, 'lh') !important;
 
         @if (map-get($pairing-lg, 'size') >= $mktg-body-spacing-threshold and map-get($pairing-md, 'size') < $mktg-body-spacing-threshold) {
@@ -106,6 +126,7 @@
         }
 
         @if (map-get($pairing-lg, 'size') >= $mktg-body-weight-threshold and map-get($pairing-md, 'size') < $mktg-body-weight-threshold) {
+          // stylelint-disable-next-line primer/typography
           font-weight: $font-weight-medium;
         }
       }
@@ -114,5 +135,6 @@
 }
 
 .text-medium {
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-medium !important;
 }

package/navigation/filter-list.scss

@@ -9,6 +9,7 @@
   &.small .filter-item {
     // stylelint-disable-next-line primer/spacing
     padding: 6px 12px;
+    // stylelint-disable-next-line primer/typography
     font-size: $font-size-small;
   }
 
@@ -29,12 +30,14 @@
   padding: var(--base-size-8) var(--base-size-16);
   margin-bottom: var(--base-size-4);
   overflow: hidden;
+  // stylelint-disable-next-line primer/typography
   font-size: $h5-size;
   color: var(--fgColor-muted, var(--color-fg-muted));
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
+  // stylelint-disable-next-line primer/borders
   border-radius: $border-radius;
 
   &:hover {
@@ -67,6 +70,7 @@
 
   .count {
     float: right;
+    // stylelint-disable-next-line primer/typography
     font-weight: $font-weight-bold;
   }
 

package/navigation/sidenav.scss

@@ -16,6 +16,7 @@
   text-align: left;
   background-color: transparent;
   border: 0;
+  // stylelint-disable-next-line primer/borders
   border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   &:first-child {
@@ -94,6 +95,7 @@
 
 .SideNav-subItem[aria-current]:not([aria-current='false']),
 .SideNav-subItem[aria-selected='true'] {
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-semibold;
   color: var(--fgColor-default, var(--color-fg-default));
 }

package/navigation/subnav.scss

@@ -12,6 +12,7 @@
 .subnav-bordered {
   // stylelint-disable-next-line primer/spacing
   padding-bottom: 20px;
+  // stylelint-disable-next-line primer/borders
   border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 }
 
@@ -24,10 +25,12 @@
   float: left;
   // stylelint-disable-next-line primer/spacing
   padding: 5px var(--base-size-16);
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-semibold;
   // stylelint-disable-next-line primer/typography
   line-height: 20px;
   color: var(--fgColor-default, var(--color-fg-default));
+  // stylelint-disable-next-line primer/borders
   border: $border-width $border-style var(--control-borderColor-rest, var(--color-border-default));
 
   + .subnav-item {
@@ -67,12 +70,16 @@
   }
 
   &:first-child {
+    // stylelint-disable-next-line primer/borders
     border-top-left-radius: $border-radius;
+    // stylelint-disable-next-line primer/borders
     border-bottom-left-radius: $border-radius;
   }
 
   &:last-child {
+    // stylelint-disable-next-line primer/borders
     border-top-right-radius: $border-radius;
+    // stylelint-disable-next-line primer/borders
     border-bottom-right-radius: $border-radius;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "21.3.6-rc.13cf9bf9",
+  "version": "21.4.0-rc.264b5078",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
@@ -41,8 +41,8 @@
     "build:storybook": "cd docs && npm i && npm run build:storybook"
   },
   "dependencies": {
-    "@primer/primitives": "^8.2.0",
-    "@primer/view-components": "^0.27.0"
+    "@primer/primitives": "^9.0.3",
+    "@primer/view-components": "^0.34.0"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.0",
@@ -71,7 +71,7 @@
     "postcss-simple-vars": "^7.0.1",
     "prettier": "^3.2.5",
     "semver": "^7.6.0",
-    "stylelint": "^16.6.1",
+    "stylelint": "^16.9.0",
     "table": "^6.8.1"
   },
   "jest": {

package/pagination/pagination.scss

@@ -16,7 +16,9 @@
     vertical-align: middle;
     cursor: pointer;
     user-select: none;
+    // stylelint-disable-next-line primer/borders
     border: $border-width $border-style transparent;
+    // stylelint-disable-next-line primer/borders
     border-radius: $border-radius;
     transition: border-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
 

package/select-menu/select-menu.scss

@@ -62,6 +62,7 @@ $SelectMenu-max-height: 480px !default;
   pointer-events: auto;
   flex-direction: column;
   background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
+  // stylelint-disable-next-line primer/borders
   border: $border-width $border-style var(--selectMenu-borderColor, var(--color-select-menu-backdrop-border));
   // stylelint-disable-next-line primer/borders
   border-radius: $border-radius * 2;
@@ -87,8 +88,10 @@ $SelectMenu-max-height: 480px !default;
     height: auto;
     max-height: $SelectMenu-max-height;
     margin: var(--base-size-8) 0 var(--base-size-16) 0;
+    // stylelint-disable-next-line primer/typography
     font-size: $font-size-small;
     border-color: var(--borderColor-default, var(--color-border-default));
+    // stylelint-disable-next-line primer/borders
     border-radius: $border-radius;
     box-shadow: var(--shadow-floating-legacy, var(--color-overlay-shadow));
     animation-name: SelectMenu-modal-animation--sm;
@@ -104,6 +107,7 @@ $SelectMenu-max-height: 480px !default;
   padding: var(--base-size-16);
   flex: none; // fixes header from getting squeezed in Safari iOS
   align-items: center;
+  // stylelint-disable-next-line primer/borders
   border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   @include breakpoint(sm) {
@@ -114,7 +118,9 @@ $SelectMenu-max-height: 480px !default;
 
 .SelectMenu-title {
   flex: 1;
+  // stylelint-disable-next-line primer/typography
   font-size: $body-font-size;
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-bold;
 
   @include breakpoint(sm) {
@@ -125,6 +131,7 @@ $SelectMenu-max-height: 480px !default;
 .SelectMenu-closeButton {
   padding: var(--base-size-16);
   margin: calc(var(--base-size-16) * -1);
+  // stylelint-disable-next-line primer/typography
   line-height: 1;
   color: var(--fgColor-muted, var(--color-fg-muted));
   background-color: transparent;
@@ -144,6 +151,7 @@ $SelectMenu-max-height: 480px !default;
 .SelectMenu-filter {
   padding: var(--base-size-16);
   margin: 0;
+  // stylelint-disable-next-line primer/borders
   border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   @include breakpoint(sm) {
@@ -156,6 +164,7 @@ $SelectMenu-max-height: 480px !default;
   width: 100%;
 
   @include breakpoint(sm) {
+    // stylelint-disable-next-line primer/typography
     font-size: $h5-size;
   }
 }
@@ -192,6 +201,7 @@ $SelectMenu-max-height: 480px !default;
   cursor: pointer;
   background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
   border: 0;
+  // stylelint-disable-next-line primer/borders
   border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   @include breakpoint(sm) {
@@ -250,7 +260,9 @@ $SelectMenu-max-height: 480px !default;
 .SelectMenu-tab {
   flex: 1;
   padding: var(--base-size-8) var(--base-size-16);
+  // stylelint-disable-next-line primer/typography
   font-size: $font-size-small;
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-semibold;
   color: var(--fgColor-muted, var(--color-fg-muted));
   text-align: center;
@@ -262,9 +274,12 @@ $SelectMenu-max-height: 480px !default;
   @include breakpoint(sm) {
     flex: none;
     padding: var(--base-size-4) var(--base-size-16);
+    // stylelint-disable-next-line primer/borders
     border: $border-width $border-style transparent;
     border-bottom-width: 0;
+    // stylelint-disable-next-line primer/borders
     border-top-left-radius: $border-radius;
+    // stylelint-disable-next-line primer/borders
     border-top-right-radius: $border-radius;
   }
 
@@ -292,6 +307,7 @@ $SelectMenu-max-height: 480px !default;
   padding: 7px var(--base-size-16);
   text-align: center;
   background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
+  // stylelint-disable-next-line primer/borders
   border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 }
 
@@ -313,14 +329,18 @@ $SelectMenu-max-height: 480px !default;
 .SelectMenu-divider {
   padding: var(--base-size-4) var(--base-size-16);
   margin: 0;
+  // stylelint-disable-next-line primer/typography
   font-size: $font-size-small;
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-semibold;
   color: var(--fgColor-muted, var(--color-fg-muted));
   background-color: var(--bgColor-muted, var(--color-canvas-subtle));
+  // stylelint-disable-next-line primer/borders
   border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   // Borderless
   .SelectMenu-list--borderless & {
+    // stylelint-disable-next-line primer/borders
     border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
     &:empty {
@@ -337,9 +357,11 @@ $SelectMenu-max-height: 480px !default;
 .SelectMenu-footer {
   z-index: 0; // Avoid top border from getting covered by the negative margin of the list
   padding: var(--base-size-8) var(--base-size-16);
+  // stylelint-disable-next-line primer/typography
   font-size: $font-size-small;
   color: var(--fgColor-muted, var(--color-fg-muted));
   text-align: center;
+  // stylelint-disable-next-line primer/borders
   border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   @include breakpoint(sm) {
@@ -386,6 +408,7 @@ $SelectMenu-max-height: 480px !default;
 // Visible when a user clicks/taps on a list item
 
 .SelectMenu-item[aria-checked='true'] {
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-semibold;
   color: var(--fgColor-default, var(--color-fg-default));
 

package/support/mixins/misc.scss

@@ -33,6 +33,7 @@
 @mixin focusBoxShadowInset($outlineWidth: 1px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
   border-color: var(--focus-outlineColor, var(--color-accent-fg));
   outline: none;
+  // stylelint-disable-next-line primer/box-shadow
   box-shadow: inset 0 0 0 $outlineWidth $outlineColor;
 }
 
@@ -40,6 +41,7 @@
 // !important to override PCSS utilities
 @mixin targetBoxShadow($outlineWidth: 2px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
   outline: none !important;
+  // stylelint-disable-next-line primer/box-shadow
   box-shadow: 0 0 0 $outlineWidth $outlineColor !important;
 }
 
@@ -54,6 +56,7 @@
 @mixin focusOutlineOnEmphasis($outlineOffset: -2px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
   outline: 2px solid $outlineColor;
   outline-offset: $outlineOffset;
+  // stylelint-disable-next-line primer/box-shadow
   box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
 }