Bump primer/stylelint-config (#7160)

langermank · web-flow · commit 72fcf536309d · 2025-11-07T00:19:09.000Z
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -56,7 +56,7 @@
     "@mdx-js/react": "1.6.22",
     "@playwright/test": "^1.55.0",
     "@prettier/sync": "0.5.5",
-    "@primer/stylelint-config": "13.3.0",
+    "@primer/stylelint-config": "13.4.1",
     "@size-limit/preset-big-lib": "11.2.0",
     "@types/semver": "^7.7.1",
     "@vitest/browser": "^4.0.3",
diff --git a/packages/react/src/AvatarStack/AvatarStack.module.css b/packages/react/src/AvatarStack/AvatarStack.module.css
@@ -44,12 +44,12 @@
 
   &:where([data-avatar-count='1'][data-shape='square']) .AvatarItem {
     /* stylelint-disable-next-line primer/box-shadow */
-    box-shadow: 1px 0 rgba(0, 0, 0, 1);
+    box-shadow: 1px 0 rgb(0, 0, 0, 1);
   }
 
   &:where([data-avatar-count='1'][data-shape='square'][data-align-right]) .AvatarItem {
     /* stylelint-disable-next-line primer/box-shadow */
-    box-shadow: -1px 0 rgba(0, 0, 0, 1);
+    box-shadow: -1px 0 rgb(0, 0, 0, 1);
   }
 
   &:where([data-avatar-count='2']) {
@@ -145,12 +145,12 @@
 
   .AvatarStack:where([data-shape='square']) &:is(img) {
     /* stylelint-disable-next-line primer/box-shadow */
-    box-shadow: 1px 0 rgba(255, 255, 255, 1);
+    box-shadow: 1px 0 rgb(255, 255, 255, 1);
   }
 
   .AvatarStack:where([data-shape='square'][data-align-right]) &:is(img) {
     /* stylelint-disable-next-line primer/box-shadow */
-    box-shadow: -1px 0 rgba(255, 255, 255, 1);
+    box-shadow: -1px 0 rgb(255, 255, 255, 1);
   }
 
   &:first-child {
@@ -184,13 +184,13 @@
   /* Circular mask */
   .AvatarStack:where([data-shape='circle']) &:nth-child(n + 2) {
     /* stylelint-disable-next-line declaration-property-value-no-unknown */
-    mask-image: radial-gradient(at 50% 50%, rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0) 71%), linear-gradient(rgb(0, 0, 0) 0 0);
+    mask-image: radial-gradient(at 50% 50%, rgb(0, 0, 0) 70%, rgb(0, 0, 0, 0) 71%), linear-gradient(rgb(0, 0, 0) 0 0);
   }
 
   /* Square mask */
   .AvatarStack:where([data-shape='square']) &:nth-child(n + 2) {
     /* stylelint-disable-next-line declaration-property-value-no-unknown */
-    mask-image: linear-gradient(at 50% 50%, rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0) 71%), linear-gradient(rgb(0, 0, 0) 0 0);
+    mask-image: linear-gradient(at 50% 50%, rgb(0, 0, 0) 70%, rgb(0, 0, 0, 0) 71%), linear-gradient(rgb(0, 0, 0) 0 0);
   }
 
   /* Cascade variant override for nth-child(n + 3) */
diff --git a/packages/react/src/ProgressBar/ProgressBar.module.css b/packages/react/src/ProgressBar/ProgressBar.module.css
@@ -19,7 +19,7 @@
 
   @media (prefers-reduced-motion: no-preference) {
     &[data-animated='true'] {
-      mask-image: linear-gradient(75deg, #000 30%, rgba(0, 0, 0, 0.65) 80%);
+      mask-image: linear-gradient(75deg, #000 30%, rgb(0, 0, 0, 0.65) 80%);
       mask-size: 200%;
       animation-name: shimmer;
       animation-duration: 1s;
diff --git a/packages/react/src/Skeleton/SkeletonBox.module.css b/packages/react/src/Skeleton/SkeletonBox.module.css
@@ -16,7 +16,7 @@
   animation: shimmer;
 
   @media (prefers-reduced-motion: no-preference) {
-    mask-image: linear-gradient(75deg, #000 30%, rgba(0, 0, 0, 0.65) 80%);
+    mask-image: linear-gradient(75deg, #000 30%, rgb(0, 0, 0, 0.65) 80%);
     mask-size: 200%;
     animation: shimmer;
     animation-duration: var(--base-duration-1000);
diff --git a/packages/react/src/ToggleSwitch/ToggleSwitch.module.css b/packages/react/src/ToggleSwitch/ToggleSwitch.module.css
@@ -136,13 +136,13 @@
 .SwitchButton:where([data-checked='false']:not([data-disabled='true']):hover),
 .SwitchButton:where([data-checked='false']:not([data-disabled='true']):focus-visible) {
   /* stylelint-disable-next-line primer/colors */
-  background-color: var(--controlTrack-bgColor-hover, var(--color-switch-track-hover-bg, hsla(210deg, 24%, 90%, 1)));
+  background-color: var(--controlTrack-bgColor-hover, var(--color-switch-track-hover-bg, hsl(210deg, 24%, 90%, 1)));
 }
 
 .SwitchButton:where([data-checked='false']:not([data-disabled='true']):active),
 .SwitchButton:where([data-checked='false']:not([data-disabled='true']):active:focus-visible) {
   /* stylelint-disable-next-line primer/colors */
-  background-color: var(--controlTrack-bgColor-active, var(--color-switch-track-active-bg, hsla(210deg, 24%, 88%, 1)));
+  background-color: var(--controlTrack-bgColor-active, var(--color-switch-track-active-bg, hsl(210deg, 24%, 88%, 1)));
 }
 
 .SwitchButton:where([data-checked='true']:not([data-disabled='true'])) {
diff --git a/packages/react/src/Token/IssueLabelToken.module.css b/packages/react/src/Token/IssueLabelToken.module.css
@@ -6,7 +6,7 @@
 
   background: rgb(var(--label-r), var(--label-g), var(--label-b));
   color: hsl(0deg, 0%, calc(var(--lightness-switch) * 100%));
-  border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 25) * 1%), var(--border-alpha));
+  border-color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 25) * 1%), var(--border-alpha));
 
   /* Selected state */
   &:where([data-selected='true']) {
@@ -20,7 +20,7 @@
 
   /* Interactive hover states */
   &:where([data-cursor-is-interactive='true']:hover) {
-    background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
+    background-image: linear-gradient(rgb(0, 0, 0, 0.15), rgb(0, 0, 0, 0.15)),
       linear-gradient(
         rgb(var(--label-r), var(--label-g), var(--label-b)),
         rgb(var(--label-r), var(--label-g), var(--label-b))
@@ -35,9 +35,9 @@
   --border-alpha: 0.3;
   --lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch));
 
-  background: rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha));
+  background: rgb(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha));
   color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%));
-  border-color: hsla(
+  border-color: hsl(
     var(--label-h),
     calc(var(--label-s) * 1%),
     calc((var(--label-l) + var(--lighten-by)) * 1%),
@@ -53,7 +53,7 @@
 
   /* Interactive hover states */
   &:where([data-cursor-is-interactive='true']:hover) {
-    background: hsla(var(--label-h), calc(var(--label-s) * 1%), calc(calc(var(--label-l) + 10) * 1%), 0.3);
+    background: hsl(var(--label-h), calc(var(--label-s) * 1%), calc(calc(var(--label-l) + 10) * 1%), 0.3);
     box-shadow: var(--shadow-resting-medium);
   }
 }
diff --git a/packages/react/src/stories/deprecated/ActionListStories.module.css b/packages/react/src/stories/deprecated/ActionListStories.module.css
@@ -2,8 +2,8 @@
   border-radius: var(--borderRadius-large);
   /* stylelint-disable primer/box-shadow */
   box-shadow:
-    0 1px 3px rgba(0, 0, 0, 0.12),
-    0 8px 24px rgba(149, 157, 165, 0.2);
+    0 1px 3px rgb(0, 0, 0, 0.12),
+    0 8px 24px rgb(149, 157, 165, 0.2);
   /* stylelint-enable primer/box-shadow */
   overflow: hidden;
 }
diff --git a/packages/react/src/stories/deprecated/ActionMenuStories.module.css b/packages/react/src/stories/deprecated/ActionMenuStories.module.css
@@ -2,7 +2,7 @@
 .ErsatzOverlay {
   border-radius: var(--borderRadius-large);
   box-shadow:
-    0 1px 3px rgba(0, 0, 0, 0.12),
-    0 8px 24px rgba(149, 157, 165, 0.2);
+    0 1px 3px rgb(0, 0, 0, 0.12),
+    0 8px 24px rgb(149, 157, 165, 0.2);
   padding: var(--base-size-8);
 }
diff --git a/stylelint.config.mjs b/stylelint.config.mjs
@@ -13,6 +13,7 @@ export default {
         message: '"%s" selector should be written in PascalCase or BEM format (e.g. block__element--modifier)',
       },
     ],
+    'layer-name-pattern': '^[a-z][a-zA-Z0-9.-]*$',
   },
   overrides: [
     {

Original file line number	Diff line number	Diff line change
`@@ -136,13 +136,13 @@`
`136`	`136`	`.SwitchButton:where([data-checked='false']:not([data-disabled='true']):hover),`
`137`	`137`	`.SwitchButton:where([data-checked='false']:not([data-disabled='true']):focus-visible) {`
`138`	`138`	`/* stylelint-disable-next-line primer/colors */`
`139`		`- background-color: var(--controlTrack-bgColor-hover, var(--color-switch-track-hover-bg, hsla(210deg, 24%, 90%, 1)));`
	`139`	`+ background-color: var(--controlTrack-bgColor-hover, var(--color-switch-track-hover-bg, hsl(210deg, 24%, 90%, 1)));`
`140`	`140`	`}`
`141`	`141`
`142`	`142`	`.SwitchButton:where([data-checked='false']:not([data-disabled='true']):active),`
`143`	`143`	`.SwitchButton:where([data-checked='false']:not([data-disabled='true']):active:focus-visible) {`
`144`	`144`	`/* stylelint-disable-next-line primer/colors */`
`145`		`- background-color: var(--controlTrack-bgColor-active, var(--color-switch-track-active-bg, hsla(210deg, 24%, 88%, 1)));`
	`145`	`+ background-color: var(--controlTrack-bgColor-active, var(--color-switch-track-active-bg, hsl(210deg, 24%, 88%, 1)));`
`146`	`146`	`}`
`147`	`147`
`148`	`148`	`.SwitchButton:where([data-checked='true']:not([data-disabled='true'])) {`
Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,7 @@ export default {`
`13`	`13`	`message: '"%s" selector should be written in PascalCase or BEM format (e.g. block__element--modifier)',`
`14`	`14`	`},`
`15`	`15`	`],`
	`16`	`+ 'layer-name-pattern': '^[a-z][a-zA-Z0-9.-]*$',`
`16`	`17`	`},`
`17`	`18`	`overrides: [`
`18`	`19`	`{`