diff --git a/package-lock.json b/package-lock.json index cb93db3ff76..6a193d527a8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,7 +28,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", @@ -78,8 +78,8 @@ "react-dom": "^18.3.1" }, "devDependencies": { - "@primer/react": "38.0.0", - "@primer/styled-react": "0.2.0", + "@primer/react": "38.1.0", + "@primer/styled-react": "0.3.0", "@types/react": "^18.3.11", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.3", @@ -92,8 +92,8 @@ "name": "example-nextjs", "version": "0.0.0", "dependencies": { - "@primer/react": "38.0.0", - "@primer/styled-react": "0.2.0", + "@primer/react": "38.1.0", + "@primer/styled-react": "0.3.0", "next": "^16.0.0", "react": "^19.2.0", "react-dom": "^19.2.0", @@ -135,8 +135,8 @@ "version": "0.0.0", "dependencies": { "@primer/octicons-react": "^19.14.0", - "@primer/react": "38.0.0", - "@primer/styled-react": "0.2.0", + "@primer/react": "38.1.0", + "@primer/styled-react": "0.3.0", "clsx": "^2.1.1", "next": "^16.0.0", "react": "^19.2.0", @@ -6454,7 +6454,9 @@ "link": true }, "node_modules/@primer/stylelint-config": { - "version": "13.3.0", + "version": "13.4.1", + "resolved": "https://registry.npmjs.org/@primer/stylelint-config/-/stylelint-config-13.4.1.tgz", + "integrity": "sha512-qhv8Nb137/Fv4ggjnKyFy2UUvhHQyuP6dncsi7s8gizTUokhlSYnlhtu2RsqUMe1Ftv4Y4Zoxy8dN97ZE8Y3jQ==", "dev": true, "license": "MIT", "dependencies": { @@ -6463,9 +6465,9 @@ "postcss-styled-syntax": "^0.7.0", "postcss-value-parser": "^4.0.2", "string.prototype.matchall": "^4.0.2", - "stylelint": "^16.11.0", + "stylelint": "^16.20.0", "stylelint-browser-compat": "^1.0.0-beta.140", - "stylelint-config-standard": "^37.0.0", + "stylelint-config-standard": "^38.0.0", "stylelint-scss": "^6.2.0", "stylelint-value-no-unknown-custom-properties": "^6.0.1" }, @@ -6473,7 +6475,7 @@ "node": ">16.0.0" }, "peerDependencies": { - "@primer/primitives": "9.x || 10.x" + "@primer/primitives": "10.x || 11.x" } }, "node_modules/@publint/pack": { @@ -23862,7 +23864,9 @@ } }, "node_modules/stylelint-config-recommended": { - "version": "15.0.0", + "version": "16.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-16.0.0.tgz", + "integrity": "sha512-4RSmPjQegF34wNcK1e1O3Uz91HN8P1aFdFzio90wNK9mjgAI19u5vsU868cVZboKzCaa5XbpvtTzAAGQAxpcXA==", "dev": true, "funding": [ { @@ -23879,11 +23883,13 @@ "node": ">=18.12.0" }, "peerDependencies": { - "stylelint": "^16.13.0" + "stylelint": "^16.16.0" } }, "node_modules/stylelint-config-standard": { - "version": "37.0.0", + "version": "38.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-38.0.0.tgz", + "integrity": "sha512-uj3JIX+dpFseqd/DJx8Gy3PcRAJhlEZ2IrlFOc4LUxBX/PNMEQ198x7LCOE2Q5oT9Vw8nyc4CIL78xSqPr6iag==", "dev": true, "funding": [ { @@ -23897,13 +23903,13 @@ ], "license": "MIT", "dependencies": { - "stylelint-config-recommended": "^15.0.0" + "stylelint-config-recommended": "^16.0.0" }, "engines": { "node": ">=18.12.0" }, "peerDependencies": { - "stylelint": "^16.13.0" + "stylelint": "^16.18.0" } }, "node_modules/stylelint-scss": { @@ -27266,7 +27272,7 @@ }, "packages/react": { "name": "@primer/react", - "version": "38.0.0", + "version": "38.1.0", "license": "MIT", "dependencies": { "@github/mini-throttle": "^2.1.1", @@ -27277,7 +27283,7 @@ "@primer/behaviors": "^1.8.2", "@primer/live-region-element": "^0.7.1", "@primer/octicons-react": "^19.13.0", - "@primer/primitives": "11.3.0", + "@primer/primitives": "10.x || 11.x", "clsx": "^2.1.1", "color2k": "^2.0.3", "deepmerge": "^4.3.1", @@ -27844,7 +27850,7 @@ }, "packages/styled-react": { "name": "@primer/styled-react", - "version": "0.2.0", + "version": "0.3.0", "dependencies": { "@styled-system/css": "^5.1.5", "@styled-system/props": "^5.1.5", @@ -27857,7 +27863,7 @@ "devDependencies": { "@babel/preset-react": "^7.28.5", "@babel/preset-typescript": "^7.28.5", - "@primer/react": "^38.0.0", + "@primer/react": "^38.1.0", "@rollup/plugin-babel": "^6.1.0", "@types/react": "18.3.11", "@types/react-dom": "18.3.1", @@ -27874,7 +27880,7 @@ "typescript": "^5.9.2" }, "peerDependencies": { - "@primer/react": "38.0.0", + "@primer/react": "^38.0.0", "@types/react": "18.x || 19.x", "@types/react-dom": "18.x || 19.x", "@types/react-is": "18.x || 19.x", diff --git a/package.json b/package.json index 70a04c5b192..157a1c37bdf 100644 --- 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 index c960b963d84..a5e1bc3a9a9 100644 --- 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 index d029536dcd2..3efe013c28f 100644 --- 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 index 011ff190098..b060bdb265d 100644 --- 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 index 8b7c12fded6..036043cca0c 100644 --- 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 index cea4aa99b5a..e8f45ab2f76 100644 --- 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 index b8dc0fe5aa4..135064ed0af 100644 --- 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 index 4968006ec4c..1ea135a4938 100644 --- 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 index de5aee57247..5eb82300b04 100644 --- 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: [ {