Upgrading @primer/[email protected]

.changeset/gentle-lizards-switch.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Upgrading @primer/[email protected] and fixing violations

package.json

@@ -43,7 +43,7 @@
     "@changesets/cli": "2.20.0",
     "@github/prettier-config": "0.0.4",
     "@koddsson/postcss-sass": "5.0.1",
-    "@primer/stylelint-config": "12.2.0",
+    "@primer/stylelint-config": "^12.3.0",
     "autoprefixer": "10.4.2",
     "chokidar-cli": "3.0.0",
     "cssstats": "4.0.2",

src/actionlist/action-list-item-divider.scss

@@ -4,7 +4,6 @@
   // has children
   &:not(:empty) {
     display: flex;
-    // stylelint-disable-next-line primer/spacing
     padding: ($spacer-1 * 1.5) $spacer-2;
     font-size: $font-size-small;
     font-weight: $font-weight-bold;
@@ -16,7 +15,6 @@
   &:empty {
     height: 1px;
     padding: 0;
-    // stylelint-disable-next-line primer/spacing
     margin: ($spacer-2 - 1px) ($spacer-2 * -1) $spacer-2;
     list-style: none;
     background: var(--color-action-list-item-inline-divider);

src/actionlist/action-list-item.scss

@@ -389,7 +389,6 @@
 
   // if nested list exists, remove default padding
   .ActionList {
-    // stylelint-disable-next-line primer/spacing
     padding: unset;
   }
 }
@@ -398,7 +397,6 @@
 .ActionList-content {
   position: relative;
   display: grid;
-  // stylelint-disable-next-line primer/spacing
   padding: $actionList-item-padding-vertical $actionList-item-padding-horizontal;
   font-size: $body-font-size;
   font-weight: $font-weight-normal;
@@ -425,13 +423,11 @@
 
   &.ActionList-content--sizeMedium {
     // 44px total height
-    // stylelint-disable-next-line primer/spacing
     padding: $actionList-item-padding-vertical-md $actionList-item-padding-horizontal;
   }
 
   &.ActionList-content--sizeLarge {
     // 48px total height
-    // stylelint-disable-next-line primer/spacing
     padding: $actionList-item-padding-vertical-lg $actionList-item-padding-horizontal;
   }
 
@@ -441,7 +437,6 @@
 
   // On pointer:coarse (mobile), all list items are large
   @media (pointer: coarse) {
-    // stylelint-disable-next-line primer/spacing
     padding: $actionList-item-padding-vertical-lg $actionList-item-padding-horizontal;
   }
 
@@ -498,7 +493,6 @@
   align-items: baseline;
 
   .ActionList-item-description {
-    // stylelint-disable-next-line primer/spacing
     margin-left: $actionList-item-padding-horizontal;
   }
 }

src/actionlist/action-list-tree.scss

@@ -30,7 +30,6 @@
         // --ActionList-tree-depth is defined as an inline style referencing the aria-level of each item ie: aria-level="2"
         // stylelint-disable-next-line selector-max-specificity, max-nesting-depth, selector-max-compound-selectors
         .ActionList-content {
-          // stylelint-disable-next-line primer/spacing
           padding-left: calc(#{$spacer-2} * var(--ActionList-tree-depth));
         }
       }

src/base/kbd.scss

@@ -3,7 +3,6 @@
 
 kbd {
   display: inline-block;
-  // stylelint-disable-next-line primer/spacing
   padding: ($spacer-1 - 1) ($spacer-1 + 1);
   font: 11px $mono-font;
   // stylelint-disable-next-line primer/typography

src/blankslate/blankslate.scss

@@ -55,7 +55,6 @@
 }
 
 .blankslate-spacious {
-  // stylelint-disable-next-line primer/spacing
   padding: ($spacer-6 * 2) $spacer-6;
 }
 

src/box/box.scss

@@ -28,7 +28,6 @@
   .Box-btn-octicon {
     &.btn-octicon {
       padding: $spacer-2 $spacer-3;
-      // stylelint-disable-next-line primer/spacing
       margin: (-$spacer-2) (-$spacer-3);
       line-height: $lh-condensed;
     }
@@ -60,7 +59,6 @@
   .Box-btn-octicon {
     &.btn-octicon {
       padding: $spacer-4;
-      // stylelint-disable-next-line primer/spacing
       margin: (-$spacer-4) (-$spacer-4);
     }
   }
@@ -285,7 +283,6 @@
   // Increase specificity when btn-octicon is used because comes after .Box in the cascade
   &.btn-octicon {
     padding: $spacer-3 $spacer-3;
-    // stylelint-disable-next-line primer/spacing
     margin: (-$spacer-3) (-$spacer-3);
     line-height: $lh-default; // override btn-octicon line-height
   }

src/buttons/button.scss

@@ -294,6 +294,7 @@
 
 // Large button adds more padding around text. Use font-size utils to increase font-size.. e.g, <p class="text-gamma"><button class="btn btn-large btn-primary" type="button">Big green button</button></p>
 .btn-large {
+  // stylelint-disable-next-line primer/spacing
   padding: $em-spacer-6 1.5em;
   font-size: inherit;
   line-height: $lh-default;

src/forms/form-control.scss

@@ -243,6 +243,7 @@ input::-webkit-inner-spin-button {
 }
 
 .form-warning {
+  // stylelint-disable-next-line primer/spacing
   padding: $spacer-2 10px;
   // stylelint-disable-next-line primer/spacing
   margin: 10px 0;

src/forms/form-group.scss

@@ -240,6 +240,7 @@
 // tooltip
 .note {
   min-height: 17px;
+  // stylelint-disable-next-line primer/spacing
   margin: $spacer-1 0 2px;
   font-size: $font-size-small;
   color: var(--color-fg-muted);

src/forms/radio-group.scss

@@ -6,9 +6,7 @@
 
 .radio-label {
   float: left;
-  // stylelint-disable-next-line primer/spacing
   padding: 6px $spacer-3 6px ($spacer-3 + 12px + $spacer-2); // 12px is the size of the radio-input
-  // stylelint-disable-next-line primer/spacing
   margin-left: -1px;
   font-size: $body-font-size;
   // stylelint-disable-next-line primer/typography
@@ -43,7 +41,6 @@
 .radio-input {
   z-index: 3;
   float: left;
-  // stylelint-disable-next-line primer/spacing
   margin: 10px (-$spacer-5) 0 $spacer-3;
 
   &:disabled {

src/labels/mixins.scss

@@ -6,6 +6,7 @@
 
 @mixin labels-base {
   display: inline-block;
+  // stylelint-disable-next-line primer/spacing
   padding: 0 7px;
   font-size: $font-size-small;
   font-weight: $font-weight-semibold;
@@ -15,7 +16,9 @@
 }
 
 @mixin labels-large {
+  // stylelint-disable-next-line primer/spacing
   padding-right: 10px;
+  // stylelint-disable-next-line primer/spacing
   padding-left: 10px;
   line-height: 22px;
 }
@@ -27,6 +30,7 @@
 
 @mixin labels--inline {
   display: inline;
-  padding: 0.12em 0.5em;
+  // stylelint-disable-next-line primer/spacing
+  padding: 0.12em $em-spacer-5;
   font-size: 85%;
 }

src/layout/grid-offset.scss

@@ -2,6 +2,7 @@
 
 // Offset Columns
 
+// stylelint-disable primer/spacing
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     .offset#{$variant}-1 { margin-left: (1 * 0.0833333333 * 100%) !important; }

src/layout/grid.scss

@@ -33,6 +33,7 @@
 
 // Gutters
 // Apply padding and a negative margin to the outside of the container
+// stylelint-disable primer/spacing
 @mixin gutters ($gutter-width: $spacer-3) {
   margin-right: -$gutter-width;
   margin-left: -$gutter-width;

src/layout/page-layout.scss

@@ -245,7 +245,6 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
 
     .PageLayout-region--dividerNarrow-filled-before {
       position: relative;
-      // stylelint-disable-next-line primer/spacing
       margin-top: calc(#{$spacer-2} + var(--Layout-row-gap));
 
       &::after {
@@ -257,7 +256,6 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
 
     .PageLayout-region--dividerNarrow-filled-after {
       position: relative;
-      // stylelint-disable-next-line primer/spacing
       margin-bottom: calc(#{$spacer-2} + var(--Layout-row-gap));
 
       &::before {
@@ -363,15 +361,12 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
 .PageLayout-content,
 .PageLayout-pane,
 .PageLayout-footer {
-  // stylelint-disable-next-line primer/spacing
   padding: var(--Layout-inner-spacing-min);
 }
 
 .PageLayout-content {
-  // stylelint-disable primer/spacing
   padding-right: var(--Layout-inner-spacing-max);
   padding-left: var(--Layout-inner-spacing-max);
-  // stylelint-enable primer/spacing
   grid-area: content;
 }
 

src/marketing/type/typography.scss

@@ -122,6 +122,7 @@
 @mixin pullquote {
   padding-top: 0;
   padding-bottom: 0;
+  // stylelint-disable-next-line primer/spacing
   padding-left: $spacer;
   margin-bottom: $spacer-4;
   font-family: $mono-font;
@@ -131,8 +132,10 @@
   border-left: 3px solid var(--color-border-default);
 
   @include breakpoint(md) {
+    // stylelint-disable-next-line primer/spacing
     padding-left: $spacer * 1.5;
     margin-bottom: $spacer-5;
+    // stylelint-disable-next-line primer/spacing
     margin-left: (-$spacer * 1.5) - 3px;
     font-size: 18px;
     line-height: $lh-default;

src/popover/popover.scss

@@ -122,7 +122,6 @@
   }
 
   &::before {
-    // stylelint-disable-next-line primer/spacing
     margin-top: -($spacer-2 + 1);
   }
 

src/support/mixins/misc.scss

@@ -15,6 +15,7 @@
   }
 
   &::after {
+    // stylelint-disable-next-line primer/spacing
     margin-left: 1px;
     background-color: var(--color-canvas-default);
     background-image: linear-gradient($background, $background);

src/timeline/timeline-item.scss

@@ -67,7 +67,6 @@
   height: $spacer-4;
   margin: 0;
   margin-bottom: -$spacer-3;
-  // stylelint-disable-next-line primer/spacing
   margin-left: -($spacer-6 + $spacer-3);
   background-color: var(--color-canvas-default);
   border: 0;

src/utilities/margin.scss

@@ -1,5 +1,8 @@
 // Margin spacer utilities
-// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, comment-empty-line-before
+// stylelint-disable block-opening-brace-space-before
+// stylelint-disable declaration-colon-space-before
+// stylelint-disable comment-empty-line-before
+// stylelint-disable primer/spacing
 
 // Loop through the breakpoint values
 @each $breakpoint, $variant in $responsive-variants {

src/utilities/padding.scss

@@ -1,5 +1,7 @@
 // Padding spacer utilities
-// stylelint-disable block-opening-brace-space-before, comment-empty-line-before
+// stylelint-disable block-opening-brace-space-before
+// stylelint-disable comment-empty-line-before
+// stylelint-disable primer/spacing
 
 // Responsive padding spacer utilities
 @each $breakpoint, $variant in $responsive-variants {

yarn.lock

@@ -1153,10 +1153,10 @@
   resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.4.0.tgz#75df54a80233a432b687c0e3010e4be6bd60a82d"
   integrity sha512-gD6yHXN7YKox/bdUNgxhoSS/WXZVaORK1r4dOAyTrdoPrLV/ucIfRInPyVcTF+Mqr0zcTFJtiMtuA5Y8CSyOEg==
 
-"@primer/stylelint-config@12.2.0":
-  version "12.2.0"
-  resolved "https://registry.yarnpkg.com/@primer/stylelint-config/-/stylelint-config-12.2.0.tgz#361e60e09838b088a3f012edf260b52f3cdda90b"
-  integrity sha512-TzQR+8UNS39jqao2tCQOrjSiGSjWTaLyc4omEZpHhvSbVvYO1M+EmEQvK/1uoDK8IUSQpIRKvuDiQsHObpgD4Q==
+"@primer/stylelint-config@^12.3.0":
+  version "12.3.0"
+  resolved "https://registry.yarnpkg.com/@primer/stylelint-config/-/stylelint-config-12.3.0.tgz#de45e16f21f245f31a634ab76a5fcdef796495ac"
+  integrity sha512-BZG1ARFaWLQP8avLObAtpSj88z/CLAvhSND+Ts2H1KEYnKNmwkgqwc6CW5OVpLD5BUKqDwun+8OVa37+ueeSQA==
   dependencies:
     anymatch "^3.1.1"
     globby "^11.0.1"