@primer/css 21.4.0-rc.3a7347b4 → 21.4.0-rc.53d91fb7

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,6 +30,7 @@
   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;
@@ -68,6 +70,7 @@
 
   .count {
     float: right;
+    // stylelint-disable-next-line primer/typography
     font-weight: $font-weight-bold;
   }
 

package/navigation/sidenav.scss

@@ -95,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

@@ -25,6 +25,7 @@
   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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "21.4.0-rc.3a7347b4",
+  "version": "21.4.0-rc.53d91fb7",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "@primer/primitives": "^9.0.3",
-    "@primer/view-components": "^0.33.0"
+    "@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/select-menu/select-menu.scss

@@ -88,6 +88,7 @@ $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
@@ -117,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) {
@@ -128,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;
@@ -160,6 +164,7 @@ $SelectMenu-max-height: 480px !default;
   width: 100%;
 
   @include breakpoint(sm) {
+    // stylelint-disable-next-line primer/typography
     font-size: $h5-size;
   }
 }
@@ -255,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;
@@ -322,7 +329,9 @@ $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));
@@ -348,6 +357,7 @@ $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;
@@ -398,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));
 }
 

package/support/mixins/typography.scss

@@ -10,32 +10,44 @@
 // Heading mixins for use within components
 // These match heading utilities in utilities/typography
 @mixin h1 {
+  // stylelint-disable-next-line primer/typography
   font-size: var(--h1-size, $h1-size);
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-bold;
 }
 
 @mixin h2 {
+  // stylelint-disable-next-line primer/typography
   font-size: var(--h2-size, $h2-size);
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-bold;
 }
 
 @mixin h3 {
+  // stylelint-disable-next-line primer/typography
   font-size: var(--h3-size, $h3-size);
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-bold;
 }
 
 @mixin h4 {
+  // stylelint-disable-next-line primer/typography
   font-size: var(--h4-size, $h4-size);
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-bold;
 }
 
 @mixin h5 {
+  // stylelint-disable-next-line primer/typography
   font-size: var(--h5-size, $h5-size);
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-bold;
 }
 
 @mixin h6 {
+  // stylelint-disable-next-line primer/typography
   font-size: var(--h6-size, $h6-size);
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-bold;
 }
 
@@ -43,28 +55,34 @@
 // There are no responsive mixins for h4-h6 because they are small
 // and don't need to be smaller on mobile.
 @mixin f1-responsive {
+  // stylelint-disable-next-line primer/typography
   font-size: var(--h1-size-mobile, $h1-size-mobile);
 
   // 32px on desktop
   @include breakpoint(md) {
+    // stylelint-disable-next-line primer/typography
     font-size: var(--h1-size, $h1-size);
   }
 }
 
 @mixin f2-responsive {
+  // stylelint-disable-next-line primer/typography
   font-size: var(--h2-size-mobile, $h2-size-mobile);
 
   // 24px on desktop
   @include breakpoint(md) {
+    // stylelint-disable-next-line primer/typography
     font-size: var(--h2-size, $h2-size);
   }
 }
 
 @mixin f3-responsive {
+  // stylelint-disable-next-line primer/typography
   font-size: var(--h3-size-mobile, $h3-size-mobile);
 
   // 20px on desktop
   @include breakpoint(md) {
+    // stylelint-disable-next-line primer/typography
     font-size: var(--h3-size, $h3-size);
   }
 }
@@ -75,17 +93,20 @@
 @mixin h1-responsive {
   @include f1-responsive;
 
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-bold;
 }
 
 @mixin h2-responsive {
   @include f2-responsive;
 
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-bold;
 }
 
 @mixin h3-responsive {
   @include f3-responsive;
 
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-bold;
 }