@primer/css 21.3.1-rc.73b65c15 → 21.3.2-rc.8c3a4dea

package/marketing/links/link.scss

@@ -9,6 +9,7 @@
   &::after,
   &.link-emphasis-mktg::before {
     position: absolute;
+    // stylelint-disable-next-line primer/spacing
     bottom: -0.15em;
     left: 0;
     width: calc(100% - 1em);
@@ -44,6 +45,7 @@
 
   &.arrow-target-mktg {
     .arrow-symbol-mktg {
+      // stylelint-disable-next-line primer/spacing
       margin-left: -$em-spacer-3;
     }
   }

package/marketing/utilities/layout.scss

@@ -6,16 +6,24 @@
   @include breakpoint($breakpoint) {
     @each $scale, $size in $spacer-map-extended {
       @if ($size != 0 or $variant != '') {
+        // stylelint-disable-next-line primer/spacing
         .top#{$variant}-#{$scale}     { top: $size !important; }
+        // stylelint-disable-next-line primer/spacing
         .right#{$variant}-#{$scale}   { right: $size !important; }
+        // stylelint-disable-next-line primer/spacing
         .bottom#{$variant}-#{$scale}  { bottom: $size !important; }
+        // stylelint-disable-next-line primer/spacing
         .left#{$variant}-#{$scale}    { left: $size !important; }
       }
 
       @if ($size != 0) {
+        // stylelint-disable-next-line primer/spacing
         .top#{$variant}-n#{$scale}     { top: -$size !important; }
+        // stylelint-disable-next-line primer/spacing
         .right#{$variant}-n#{$scale}   { right: -$size !important; }
+        // stylelint-disable-next-line primer/spacing
         .bottom#{$variant}-n#{$scale}  { bottom: -$size !important; }
+        // stylelint-disable-next-line primer/spacing
         .left#{$variant}-n#{$scale}    { left: -$size !important; }
       }
     }

package/navigation/filter-list.scss

@@ -26,8 +26,8 @@
 .filter-item {
   position: relative;
   display: block;
-  padding: $spacer-2 $spacer-3;
-  margin-bottom: $spacer-1;
+  padding: var(--base-size-8) var(--base-size-16);
+  margin-bottom: var(--base-size-4);
   overflow: hidden;
   font-size: $h5-size;
   color: var(--fgColor-muted, var(--color-fg-muted));
@@ -72,9 +72,9 @@
 
   .bar {
     position: absolute;
-    top: 2px;
+    top: var(--base-size-2);
     right: 0;
-    bottom: 2px;
+    bottom: var(--base-size-2);
     z-index: -1;
     display: inline-block;
     background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));

package/navigation/sidenav.scss

@@ -11,7 +11,7 @@
   display: block;
   width: 100%;
   // stylelint-disable-next-line primer/spacing
-  padding: 12px $spacer-3;
+  padding: 12px var(--base-size-16);
   color: var(--fgColor-default, var(--color-fg-default));
   text-align: left;
   background-color: transparent;
@@ -68,7 +68,7 @@
 
 .SideNav-icon {
   width: 16px;
-  margin-right: $spacer-2;
+  margin-right: var(--base-size-8);
   color: var(--fgColor-muted, var(--color-fg-muted));
 }
 
@@ -80,7 +80,7 @@
   position: relative;
   display: block;
   width: 100%;
-  padding: $spacer-1 0;
+  padding: var(--base-size-4) 0;
   color: var(--fgColor-accent, var(--color-accent-fg));
   text-align: left;
   background-color: transparent;

package/navigation/subnav.scss

@@ -23,7 +23,7 @@
   position: relative;
   float: left;
   // stylelint-disable-next-line primer/spacing
-  padding: 5px $spacer-3;
+  padding: 5px var(--base-size-16);
   font-weight: $font-weight-semibold;
   // stylelint-disable-next-line primer/typography
   line-height: 20px;
@@ -85,7 +85,7 @@
 
 .subnav-search-input {
   width: 320px;
-  padding-left: $spacer-5;
+  padding-left: var(--base-size-32);
   color: var(--fgColor-muted, var(--color-fg-muted));
 }
 
@@ -96,8 +96,9 @@
 
 .subnav-search-icon {
   position: absolute;
+  // stylelint-disable-next-line primer/spacing
   top: 9px;
-  left: 8px;
+  left: var(--base-size-8);
   display: block;
   color: var(--fgColor-muted, var(--color-fg-muted));
   text-align: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "21.3.1-rc.73b65c15",
+  "version": "21.3.2-rc.8c3a4dea",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
@@ -41,7 +41,7 @@
     "build:storybook": "cd docs && npm i && npm run build:storybook"
   },
   "dependencies": {
-    "@primer/primitives": "^7.15.12",
+    "@primer/primitives": "^8.2.0",
     "@primer/view-components": "^0.22.0"
   },
   "devDependencies": {
@@ -49,7 +49,7 @@
     "@changesets/cli": "^2.27.1",
     "@csstools/postcss-sass": "^5.1.1",
     "@github/prettier-config": "^0.0.6",
-    "@primer/stylelint-config": "^12.9.1",
+    "@primer/stylelint-config": "^13.0.0-rc.af5663d",
     "autoprefixer": "^10.4.18",
     "chokidar-cli": "^3.0.0",
     "cssstats": "^4.0.5",
@@ -71,7 +71,7 @@
     "postcss-simple-vars": "^7.0.1",
     "prettier": "^3.2.5",
     "semver": "^7.6.0",
-    "stylelint": "^15.11.0",
+    "stylelint": "^16.6.1",
     "table": "^6.8.1"
   },
   "jest": {

package/pagination/pagination.scss

@@ -72,7 +72,7 @@
 
     // chevron-left
     .previous_page::before {
-      margin-right: $spacer-1;
+      margin-right: var(--base-size-4);
       clip-path:
         polygon(
           9.8px 12.8px,
@@ -89,7 +89,7 @@
 
     // chevron-right
     .next_page::after {
-      margin-left: $spacer-1;
+      margin-left: var(--base-size-4);
       clip-path:
         polygon(
           6.2px 3.2px,
@@ -146,8 +146,8 @@
 
 // Unified centered pagination across the site
 .paginate-container {
-  margin-top: $spacer-3;
-  margin-bottom: $spacer-3;
+  margin-top: var(--base-size-16);
+  margin-bottom: var(--base-size-16);
   text-align: center;
 
   .pagination {

package/primitives/index.scss

@@ -2,8 +2,6 @@
 @import '@primer/primitives/dist/css/base/typography/typography';
 @import '@primer/primitives/dist/css/functional/size/border';
 @import '@primer/primitives/dist/css/functional/size/breakpoints';
-@import '@primer/primitives/dist/css/functional/size/size-coarse';
-@import '@primer/primitives/dist/css/functional/size/size-fine';
 @import '@primer/primitives/dist/css/functional/size/size';
 @import '@primer/primitives/dist/css/functional/size/viewport';
 @import '@primer/primitives/dist/css/functional/typography/typography';

package/select-menu/select-menu.scss

@@ -15,7 +15,7 @@ $SelectMenu-max-height: 480px !default;
   left: 0;
   z-index: 99;
   display: flex;
-  padding: $spacer-3;
+  padding: var(--base-size-16);
   pointer-events: none;
   flex-direction: column;
 
@@ -78,7 +78,7 @@ $SelectMenu-max-height: 480px !default;
   @keyframes SelectMenu-modal-animation--sm {
     0% {
       opacity: 0;
-      transform: translateY(-$spacer-3);
+      transform: translateY(calc(var(--base-size-16) * -1));
     }
   }
 
@@ -86,7 +86,7 @@ $SelectMenu-max-height: 480px !default;
     width: 300px;
     height: auto;
     max-height: $SelectMenu-max-height;
-    margin: $spacer-2 0 $spacer-3 0;
+    margin: var(--base-size-8) 0 var(--base-size-16) 0;
     font-size: $font-size-small;
     border-color: var(--borderColor-default, var(--color-border-default));
     border-radius: $border-radius;
@@ -101,14 +101,14 @@ $SelectMenu-max-height: 480px !default;
 
 .SelectMenu-header {
   display: flex;
-  padding: $spacer-3;
+  padding: var(--base-size-16);
   flex: none; // fixes header from getting squeezed in Safari iOS
   align-items: center;
   border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   @include breakpoint(sm) {
     // stylelint-disable-next-line primer/spacing
-    padding: 7px 7px 7px $spacer-3;
+    padding: 7px 7px 7px var(--base-size-16);
   }
 }
 
@@ -123,17 +123,17 @@ $SelectMenu-max-height: 480px !default;
 }
 
 .SelectMenu-closeButton {
-  padding: $spacer-3;
-  margin: -$spacer-3;
+  padding: var(--base-size-16);
+  margin: calc(var(--base-size-16) * -1);
   line-height: 1;
   color: var(--fgColor-muted, var(--color-fg-muted));
   background-color: transparent;
   border: 0;
 
   @include breakpoint(sm) {
-    padding: $spacer-2;
+    padding: var(--base-size-8);
     // stylelint-disable-next-line primer/spacing
-    margin: (-$spacer-2) (-7px); // Using -7px fixes a :focus glitch
+    margin: calc(var(--base-size-8) * -1) (-7px); // Using -7px fixes a :focus glitch
   }
 }
 
@@ -142,12 +142,12 @@ $SelectMenu-max-height: 480px !default;
 // An input to filter a large list
 
 .SelectMenu-filter {
-  padding: $spacer-3;
+  padding: var(--base-size-16);
   margin: 0;
   border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   @include breakpoint(sm) {
-    padding: $spacer-2;
+    padding: var(--base-size-8);
   }
 }
 
@@ -185,7 +185,7 @@ $SelectMenu-max-height: 480px !default;
   display: flex;
   align-items: center;
   width: 100%;
-  padding: $spacer-3;
+  padding: var(--base-size-16);
   overflow: hidden;
   color: var(--fgColor-default, var(--color-fg-default));
   text-align: left;
@@ -212,8 +212,8 @@ $SelectMenu-max-height: 480px !default;
 // Icon shown on the left of a list item.
 
 .SelectMenu-icon {
-  width: $spacer-3; // fixed width to make sure following content aligns
-  margin-right: $spacer-2;
+  width: var(--base-size-16); // fixed width to make sure following content aligns
+  margin-right: var(--base-size-8);
   flex-shrink: 0;
 }
 
@@ -243,13 +243,13 @@ $SelectMenu-max-height: 480px !default;
   }
 
   @include breakpoint(sm) {
-    padding: $spacer-2 $spacer-2 0 $spacer-2;
+    padding: var(--base-size-8) var(--base-size-8) 0 var(--base-size-8);
   }
 }
 
 .SelectMenu-tab {
   flex: 1;
-  padding: $spacer-2 $spacer-3;
+  padding: var(--base-size-8) var(--base-size-16);
   font-size: $font-size-small;
   font-weight: $font-weight-semibold;
   color: var(--fgColor-muted, var(--color-fg-muted));
@@ -261,7 +261,7 @@ $SelectMenu-max-height: 480px !default;
 
   @include breakpoint(sm) {
     flex: none;
-    padding: $spacer-1 $spacer-3;
+    padding: var(--base-size-4) var(--base-size-16);
     border: $border-width $border-style transparent;
     border-bottom-width: 0;
     border-top-left-radius: $border-radius;
@@ -289,7 +289,7 @@ $SelectMenu-max-height: 480px !default;
 
 .SelectMenu-message {
   // stylelint-disable-next-line primer/spacing
-  padding: 7px $spacer-3;
+  padding: 7px var(--base-size-16);
   text-align: center;
   background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
   border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
@@ -301,7 +301,7 @@ $SelectMenu-max-height: 480px !default;
 
 .SelectMenu-blankslate,
 .SelectMenu-loading {
-  padding: $spacer-4 $spacer-3;
+  padding: var(--base-size-24) var(--base-size-16);
   text-align: center;
   background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
 }
@@ -311,7 +311,7 @@ $SelectMenu-max-height: 480px !default;
 // Can be used to divide the list into multiple groups
 
 .SelectMenu-divider {
-  padding: $spacer-1 $spacer-3;
+  padding: var(--base-size-4) var(--base-size-16);
   margin: 0;
   font-size: $font-size-small;
   font-weight: $font-weight-semibold;
@@ -336,7 +336,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: $spacer-2 $spacer-3;
+  padding: var(--base-size-8) var(--base-size-16);
   font-size: $font-size-small;
   color: var(--fgColor-muted, var(--color-fg-muted));
   text-align: center;
@@ -344,7 +344,7 @@ $SelectMenu-max-height: 480px !default;
 
   @include breakpoint(sm) {
     // stylelint-disable-next-line primer/spacing
-    padding: 7px $spacer-3;
+    padding: 7px var(--base-size-16);
   }
 }
 
@@ -361,7 +361,7 @@ $SelectMenu-max-height: 480px !default;
     @include breakpoint(sm) {
       height: auto;
       max-height: $SelectMenu-max-height;
-      margin-top: $spacer-2;
+      margin-top: var(--base-size-8);
     }
   }
 }

package/stylelint.config.cjs

@@ -1,13 +1,5 @@
 module.exports = {
   extends: ['@primer/stylelint-config'],
   ignoreFiles: ['**/*.js', '**/*.cjs'],
-  rules: {
-    'primer/no-override': false,
-    'primer/no-deprecated-colors': [
-      true,
-      {
-        inlineFallback: true,
-      },
-    ],
-  },
+  rules: {}
 }

package/support/mixins/misc.scss

@@ -3,9 +3,10 @@
   &::after,
   &::before {
     position: absolute;
+    // stylelint-disable-next-line primer/spacing
     top: 11px;
     right: 100%;
-    left: -8px;
+    left: calc(var(--base-size-8) * -1);
     display: block;
     width: 8px;
     height: 16px;

package/toasts/toasts.scss

@@ -2,7 +2,7 @@
 
 .Toast {
   display: flex;
-  margin: $spacer-2;
+  margin: var(--base-size-8);
   color: var(--fgColor-default, var(--color-fg-default));
   background-color: var(--bgColor-default, var(--color-canvas-default));
   border-radius: $border-radius;
@@ -11,7 +11,7 @@
   @include breakpoint(sm) {
     width: max-content;
     max-width: 450px;
-    margin: $spacer-3;
+    margin: var(--base-size-16);
   }
 }
 
@@ -19,7 +19,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: $spacer-3 * 3;
+  width: calc(var(--base-size-16) * 3);
   flex-shrink: 0;
   color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
   background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
@@ -30,12 +30,12 @@
 }
 
 .Toast-content {
-  padding: $spacer-3;
+  padding: var(--base-size-16);
 }
 
 .Toast-dismissButton {
   max-height: 54px; // keeps button aligned to the top
-  padding: $spacer-3;
+  padding: var(--base-size-16);
   color: inherit;
   background-color: transparent;
   border: 0;

package/tooltips/tooltips.scss

@@ -86,12 +86,12 @@
   &::after {
     right: auto;
     left: 50%;
-    margin-left: -$spacer-3;
+    margin-left: calc(var(--base-size-16) * -1);
   }
 }
 
 .tooltipped-sw::after {
-  margin-right: -$spacer-3;
+  margin-right: calc(var(--base-size-16) * -1);
 }
 
 // Tooltips above the object
@@ -109,12 +109,12 @@
   &::after {
     right: auto;
     left: 50%;
-    margin-left: -$spacer-3;
+    margin-left: calc(var(--base-size-16) * -1);
   }
 }
 
 .tooltipped-nw::after {
-  margin-right: -$spacer-3;
+  margin-right: calc(var(--base-size-16) * -1);
 }
 
 // Move the tooltip body to the center of the object.

package/utilities/padding.scss

@@ -40,16 +40,16 @@
 
 // responsive padding for containers
 .p-responsive {
-  padding-right: var(--base-size-16, $spacer-3) !important;
-  padding-left: var(--base-size-16, $spacer-3) !important;
+  padding-right: var(--base-size-16) !important;
+  padding-left: var(--base-size-16) !important;
 
   @include breakpoint(sm) {
-    padding-right: var(--base-size-40, $spacer-6) !important;
-    padding-left: var(--base-size-40, $spacer-6) !important;
+    padding-right: var(--base-size-40) !important;
+    padding-left: var(--base-size-40) !important;
   }
 
   @include breakpoint(lg) {
-    padding-right: var(--base-size-16, $spacer-3) !important;
-    padding-left: var(--base-size-16, $spacer-3) !important;
+    padding-right: var(--base-size-16) !important;
+    padding-left: var(--base-size-16) !important;
   }
 }