Merge 9df1d45 into fe26bc3

primer · Oct 14, 2024 · b209d02 · b209d02
2 parents fe26bc3 + 9df1d45
commit b209d02
Show file tree

Hide file tree

Showing 9 changed files with 674 additions and 1,486 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
     "build:docs:preview": "NODE_OPTIONS=--openssl-legacy-provider script/build-docs preview",
     "build:components.json": "npm run build:components.json -w @primer/react",
     "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0",
-    "lint:css": "stylelint '**/*.css' --max-warnings=0",
+    "lint:css": "stylelint --rd -q '**/*.css'",
     "lint:css:fix": "npm run lint:css -- --fix",
     "lint:fix": "npm run lint -- --fix",
     "lint:md": "markdownlint-cli2 \"**/*.{md,mdx}\" \"!.github\" \"!.changeset\" \"!**/node_modules/**\" \"!**/CHANGELOG.md\"",
@@ -50,7 +50,7 @@
     "@mdx-js/react": "1.6.22",
     "@playwright/test": "^1.47.2",
     "@prettier/sync": "0.5.1",
-    "@primer/stylelint-config": "^13.0.1-rc.5358628",
+    "@primer/stylelint-config": "13.1.1",
     "@size-limit/preset-big-lib": "11.0.2",
     "@types/jest": "29.5.12",
     "@typescript-eslint/eslint-plugin": "^7.11.0",
@@ -78,7 +78,7 @@
     "prettier": "3.0.3",
     "rimraf": "5.0.5",
     "size-limit": "11.1.5",
-    "stylelint": "^16.8.1",
+    "stylelint": "16.9.0",
     "typescript": "5.4.5"
   },
   "optionalDependencies": {

diff --git a/packages/react/src/Avatar/Avatar.module.css b/packages/react/src/Avatar/Avatar.module.css
@@ -1,5 +1,3 @@
-/* stylelint-disable csstools/value-no-unknown-custom-properties */
-
 :where(.Avatar) {
   display: inline-block;
   width: var(--avatarSize-regular);

diff --git a/packages/react/src/Banner/Banner.module.css b/packages/react/src/Banner/Banner.module.css
@@ -1,7 +1,9 @@
 .Banner {
   display: grid;
   padding: var(--base-size-8);
+  /* stylelint-disable-next-line primer/colors */
   background-color: var(--banner-bgColor);
+  /* stylelint-disable-next-line primer/colors */
   border: var(--borderWidth-thin) solid var(--banner-borderColor);
   border-radius: var(--borderRadius-medium);
   grid-template-columns: auto minmax(0, 1fr) auto;
@@ -100,7 +102,9 @@
 .BannerIcon svg {
   /* 20px is the line box height of the trailing action buttons */
   height: var(--base-size-20);
+  /* stylelint-disable-next-line primer/colors */
   color: var(--banner-icon-fgColor);
+  /* stylelint-disable-next-line primer/colors */
   fill: var(--banner-icon-fgColor);
 }
 
@@ -118,6 +122,7 @@
 }
 
 .BannerDismiss svg {
+  /* stylelint-disable-next-line primer/colors */
   color: var(--banner-icon-fgColor);
 }
 
@@ -159,7 +164,6 @@
 
 /* Layout ------------------------------------------------------------------- */
 
-/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 @container banner (max-width: 500px) {
   .BannerContainer {
     display: grid;
@@ -179,7 +183,6 @@
   }
 }
 
-/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 @container banner (min-width: 500px) {
   .BannerContainer {
     display: grid;

diff --git a/packages/react/src/Blankslate/Blankslate.module.css b/packages/react/src/Blankslate/Blankslate.module.css
@@ -57,7 +57,6 @@
 }
 
 /* At the time these styles were written, 34rem was our "small" breakpoint width */
-/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 @container blankslate (max-width: 34rem) {
   .Blankslate {
     --blankslate-outer-padding-block: var(--base-size-20);

diff --git a/packages/react/src/Button/ButtonBase.module.css b/packages/react/src/Button/ButtonBase.module.css
@@ -28,7 +28,6 @@
     transition-duration: 80ms;
   }
 
-  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   &:focus-visible {
     @mixin focusOutline;
   }
@@ -298,7 +297,6 @@
       border-color: var(--button-primary-borderColor-hover);
     }
 
-    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
     &:focus-visible {
       @mixin focusOutlineOnEmphasis;
     }
@@ -461,7 +459,6 @@
       text-decoration: underline;
     }
 
-    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
     &:focus-visible,
     &:focus {
       outline-offset: 2px;
@@ -494,6 +491,7 @@
     color: var(--button-inactive-fgColor);
     cursor: auto;
     background-color: var(--button-inactive-bgColor);
+    /* stylelint-disable-next-line primer/colors */
     border-color: var(--button-inactive-bgColor);
 
     & .Visual,

diff --git a/packages/react/src/Checkbox/Checkbox.module.css b/packages/react/src/Checkbox/Checkbox.module.css
@@ -11,10 +11,10 @@
     height: var(--base-size-16);
     visibility: hidden;
     content: '';
+    /* stylelint-disable-next-line primer/colors */
     background-color: var(--fgColor-onEmphasis);
     transition: visibility 0s linear 230ms;
     clip-path: inset(var(--base-size-16) 0 0 0);
-    /* stylelint-disable-next-line plugin/no-unsupported-browser-features, plugin/no-unsupported-browser-features */
     mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');
     mask-size: 75%;
     mask-repeat: no-repeat;
@@ -27,6 +27,7 @@
     background: var(--control-checked-bgColor-rest);
 
     /* using bgColor here to avoid a border change in dark high contrast */
+    /* stylelint-disable-next-line primer/colors */
     border-color: var(--control-checked-bgColor-rest);
 
     &::before {
@@ -54,13 +55,13 @@
       opacity: 1;
 
       &::before {
+        /* stylelint-disable-next-line primer/colors */
         background-color: var(--control-checked-fgColor-disabled);
       }
     }
 
     /* Windows High Contrast mode */
     @media (forced-colors: active) {
-      /* stylelint-disable-next-line primer/colors */
       background-color: canvastext;
       border-color: canvastext;
     }
@@ -70,13 +71,11 @@
     background: var(--control-checked-bgColor-rest);
 
     &::before {
-      /* stylelint-disable-next-line plugin/no-unsupported-browser-features,  plugin/no-unsupported-browser-features */
       mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
       visibility: visible;
     }
   }
 
-  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   &:focus-visible:not(:disabled) {
     @mixin focusOutline 2px;
   }

diff --git a/packages/react/src/Label/Label.module.css b/packages/react/src/Label/Label.module.css
@@ -27,6 +27,7 @@
   }
 
   &:where([data-variant='primary']) {
+    /* stylelint-disable-next-line primer/colors */
     border-color: var(--fgColor-default);
   }
 
@@ -37,21 +38,25 @@
 
   &:where([data-variant='accent']) {
     color: var(--fgColor-accent);
+    /* stylelint-disable-next-line primer/colors */
     border-color: var(--bgColor-accent-emphasis);
   }
 
   &:where([data-variant='success']) {
     color: var(--fgColor-success);
+    /* stylelint-disable-next-line primer/colors */
     border-color: var(--bgColor-success-emphasis);
   }
 
   &:where([data-variant='attention']) {
     color: var(--fgColor-attention);
+    /* stylelint-disable-next-line primer/colors */
     border-color: var(--bgColor-attention-emphasis);
   }
 
   &:where([data-variant='severe']) {
     color: var(--fgColor-severe);
+    /* stylelint-disable-next-line primer/colors */
     border-color: var(--bgColor-severe-emphasis);
   }
 
@@ -62,11 +67,13 @@
 
   &:where([data-variant='done']) {
     color: var(--fgColor-done);
+    /* stylelint-disable-next-line primer/colors */
     border-color: var(--bgColor-done-emphasis);
   }
 
   &:where([data-variant='sponsors']) {
     color: var(--fgColor-sponsors);
+    /* stylelint-disable-next-line primer/colors */
     border-color: var(--bgColor-sponsors-emphasis);
   }
 }
diff --git a/packages/react/src/experimental/IssueLabel/IssueLabel.module.css b/packages/react/src/experimental/IssueLabel/IssueLabel.module.css
@@ -4,8 +4,10 @@
   font-size: var(--text-body-size-small);
   font-weight: var(--base-text-weight-semibold);
   line-height: var(--text-body-lineHeight-small);
+  /* stylelint-disable-next-line primer/colors */
   color: var(--label-fgColor);
   white-space: nowrap;
+  /* stylelint-disable-next-line primer/colors */
   background-color: var(--label-bgColor-rest);
   border: 0;
   border-radius: var(--borderRadius-full);
@@ -20,17 +22,20 @@
     text-decoration: none;
 
     &:hover {
+      /* stylelint-disable-next-line primer/colors */
       color: var(--label-fgColor-hover);
       cursor: pointer;
+      /* stylelint-disable-next-line primer/colors */
       background-color: var(--label-bgColor-hover);
     }
 
     &:active {
+      /* stylelint-disable-next-line primer/colors */
       color: var(--label-fgColor-active);
+      /* stylelint-disable-next-line primer/colors */
       background-color: var(--label-bgColor-active);
     }
 
-    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
     &:focus-visible {
       @mixin focusOutline 2px;
     }