Fix stylelint violations across component pcss

Makes the full pcss tree pass stylelint (previously only changed files
were linted in CI, so violations accumulated latent). Changes:

- Remove 44 needless `stylelint-disable primer/spacing` comments that
  no longer suppress anything.
- Auto-fix (stylelint --fix): rgba->rgb alias notation and hardcoded
  spacing that had an obvious token.
- Scope-disable nesting-selector-no-missing-scoping-root on the
  @define-mixin blocks in layout.pcss and text_field.pcss; inside a
  mixin the & resolves at the include site, so the rule false-positives.
- Real fixes: negative margins to calc()+base-size tokens
  (border_grid), text-overflow: initial to clip (collapsible_header),
  drop the redundant border-radius fallback (pagination).
- Justified disables (with -- reasons) for intentional fork
  deviations and rule false positives: table border-collapse/style
  keywords, `.Page > svg` / description `a` type selectors, the
  container-query nested selectors, the legacy dotcom box-shadow, the
  yellow search-match highlight colors, and the visually-hidden `clip`.

Author: myabc

app/components/primer/alpha/action_bar.pcss

@@ -41,18 +41,15 @@
   bottom: 50%;
   float: left;
   height: calc(var(--control-medium-size) / 2);
-  /* stylelint-disable-next-line primer/spacing */
   margin: 0 var(--controlStack-medium-gap-condensed);
   border-left: var(--borderWidth-thin) solid var(--borderColor-muted);
   transform: translateY(-50%);
 }
 
 .ActionBar--small .ActionBar-divider {
-  /* stylelint-disable-next-line primer/spacing */
   margin: 0 var(--controlStack-small-gap-condensed);
 }
 
 .ActionBar--large .ActionBar-divider {
-  /* stylelint-disable-next-line primer/spacing */
   margin: 0 var(--controlStack-large-gap-condensed);
 }

app/components/primer/alpha/action_list.pcss

@@ -301,7 +301,6 @@ nav-list {
   width: 100%;
   /* stylelint-disable-next-line primer/spacing */
   padding-block: var(--actionListContent-paddingBlock);
-  /* stylelint-disable-next-line primer/spacing */
   padding-inline: var(--control-medium-paddingInline-condensed);
   color: var(--control-fgColor-rest);
   text-align: left;
@@ -319,7 +318,6 @@ nav-list {
 
   /* column-gap persists with empty grid-areas, margin applies only when children exist */
   & > :not(:last-child) {
-    /* stylelint-disable-next-line primer/spacing */
     margin-right: var(--control-medium-gap);
   }
 

app/components/primer/alpha/banner.pcss

@@ -70,7 +70,6 @@
   /* is this used anywhere? could not find any use, but unsure */
   & .Banner-close {
     grid-area: close;
-    /* stylelint-disable-next-line primer/spacing */
     margin-left: var(--controlStack-medium-gap-condensed);
   }
 

app/components/primer/alpha/button_marketing.pcss

@@ -18,7 +18,7 @@
   vertical-align: middle;
   user-select: none;
   /* stylelint-disable-next-line primer/colors */
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%),
+  background: linear-gradient(180deg, rgb(255, 255, 255, 0.15) 0%, rgb(255, 255, 255, 0) 100%),
     var(--color-mktg-btn-bg) !important;
   border: 0;
 
@@ -37,7 +37,7 @@
     content: '';
 
     /* stylelint-disable-next-line primer/colors */
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%) !important;
+    background: linear-gradient(180deg, rgb(255, 255, 255, 0.15) 0%, rgb(255, 255, 255, 0) 100%) !important;
     border-radius: inherit;
     opacity: 0;
     transition: opacity 0.2s;
@@ -135,11 +135,11 @@
   color: #fff;
 
   /* stylelint-disable-next-line primer/colors */
-  background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%), rgb(46, 164, 79) !important;
+  background: linear-gradient(180deg, rgb(52, 183, 89, 0.15) 0%, rgb(46, 164, 79, 0) 100%), rgb(46, 164, 79) !important;
 
   &::before {
     /* stylelint-disable-next-line primer/colors */
-    background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%) !important;
+    background: linear-gradient(180deg, rgb(52, 183, 89, 0.15) 0%, rgb(46, 164, 79, 0) 100%) !important;
   }
 
   /* fallback :focus state */

app/components/primer/alpha/layout.pcss

@@ -1,5 +1,7 @@
 /* Layout */
 
+/* stylelint-disable nesting-selector-no-missing-scoping-root -- inside @define-mixin the & resolves at the @mixin include site, so there is a scoping root */
+
 @define-mixin flow-as-row {
   grid-auto-flow: row;
   grid-template-columns: 1fr !important;
@@ -104,7 +106,7 @@
 
   grid-auto-flow: column;
   grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); /* sidebar column, separator, main column */
-  grid-gap: var(--Layout-gutter);
+  gap: var(--Layout-gutter);
 
   & .Layout-sidebar {
     grid-column: 1;

app/components/primer/alpha/menu.pcss

@@ -3,7 +3,6 @@
 /* A menu on the side of a page, defaults to left side. e.g. github.com/about */
 
 .menu {
-  /* stylelint-disable-next-line primer/spacing */
   margin-bottom: var(--stack-gap-normal);
   list-style: none;
   background-color: var(--bgColor-default);
@@ -14,7 +13,6 @@
 .menu-item {
   position: relative;
   display: block;
-  /* stylelint-disable-next-line primer/spacing */
   padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);
   color: var(--fgColor-default);
   border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
@@ -68,15 +66,13 @@
 
   & .octicon {
     width: 16px;
-    /* stylelint-disable-next-line primer/spacing */
     margin-right: var(--control-medium-gap);
     color: var(--fgColor-muted);
     text-align: center;
   }
 
   & .Counter {
     float: right;
-    /* stylelint-disable-next-line primer/spacing */
     margin-left: var(--control-small-gap);
   }
 
@@ -87,7 +83,6 @@
 
   & .avatar {
     float: left;
-    /* stylelint-disable-next-line primer/spacing */
     margin-right: var(--control-small-gap);
   }
 
@@ -100,7 +95,6 @@
 
 .menu-heading {
   display: block;
-  /* stylelint-disable-next-line primer/spacing */
   padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);
   margin-top: 0;
   margin-bottom: 0;

app/components/primer/alpha/segmented_control.pcss

@@ -111,9 +111,7 @@
     &::before {
       position: absolute;
       inset: 0 0 0 -1px;
-      /* stylelint-disable-next-line primer/spacing */
       margin-top: var(--control-medium-paddingBlock);
-      /* stylelint-disable-next-line primer/spacing */
       margin-bottom: var(--control-medium-paddingBlock);
       content: '';
       border-left: var(--borderWidth-thin) solid var(--borderColor-default);

app/components/primer/alpha/tab_nav.pcss

@@ -3,7 +3,6 @@
 /* Outer wrapper */
 .tabnav {
   margin-top: 0;
-  /* stylelint-disable-next-line primer/spacing */
   margin-bottom: var(--stack-gap-normal);
   border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
 }
@@ -24,7 +23,6 @@
 .tabnav-tab {
   display: inline-block;
   flex-shrink: 0;
-  /* stylelint-disable-next-line primer/spacing */
   padding: var(--base-size-8) var(--control-medium-paddingInline-spacious);
   font-size: var(--text-body-size-medium);
   /* stylelint-disable-next-line primer/typography */
@@ -66,13 +64,11 @@
   }
 
   & .octicon {
-    /* stylelint-disable-next-line primer/spacing */
     margin-right: var(--control-small-gap);
     color: var(--fgColor-muted);
   }
 
   & .Counter {
-    /* stylelint-disable-next-line primer/spacing */
     margin-left: var(--control-small-gap);
     color: inherit;
   }
@@ -110,6 +106,5 @@ a.tabnav-extra:hover {
 ** the buttons to be floated or inline-block. */
 
 .tabnav-btn {
-  /* stylelint-disable-next-line primer/spacing */
   margin-left: var(--controlStack-medium-gap-condensed);
 }

app/components/primer/alpha/text_field.pcss

@@ -2,6 +2,7 @@
 /* stylelint-disable max-nesting-depth */
 /* stylelint-disable selector-max-specificity */
 /* stylelint-disable primer/spacing */
+/* stylelint-disable nesting-selector-no-missing-scoping-root -- & inside @define-mixin resolves at the @mixin include site */
 
 /* FormControl */
 

app/components/primer/alpha/tree_view.pcss

@@ -350,6 +350,7 @@
     /* stylelint-disable-next-line primer/spacing */
     margin: -1px;
     overflow: hidden;
+    /* stylelint-disable-next-line property-no-deprecated -- `clip` is the widely-supported visually-hidden idiom; kept for older-browser screen-reader support */
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border-width: 0;