Infrastructure: Update Stylelint (#2077)

Autofix and address most new rules. Ignore the kebab case rules
w3c · Nov 10, 2021 · edddf9f · edddf9f
1 parent fcaaba2
commit edddf9f
Show file tree

Hide file tree

Showing 34 changed files with 412 additions and 854 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -17,6 +17,8 @@
         ]
       },
     ],
+    "selector-class-pattern": null,
+    "selector-id-pattern": null,
     "prettier/prettier": [true, {"singleQuote": false}]
   }
 }
diff --git a/examples/accordion/css/accordion.css b/examples/accordion/css/accordion.css
@@ -1,7 +1,7 @@
 .accordion {
   margin: 0;
   padding: 0;
-  border: 2px solid hsl(0, 0%, 52%);
+  border: 2px solid hsl(0deg 0% 52%);
   border-radius: 7px;
   width: 20em;
 }
@@ -12,20 +12,20 @@
 }
 
 .accordion:focus-within {
-  border-color: hsl(216, 94%, 43%);
+  border-color: hsl(216deg 94% 43%);
 }
 
 .accordion:focus-within h3 {
-  background-color: hsl(0, 0%, 97%);
+  background-color: hsl(0deg 0% 97%);
 }
 
 .accordion > * + * {
-  border-top: 1px solid hsl(0, 0%, 52%);
+  border-top: 1px solid hsl(0deg 0% 52%);
 }
 
 .accordion-trigger {
   background: none;
-  color: hsl(0, 0%, 13%);
+  color: hsl(0deg 0% 13%);
   display: block;
   font-size: 1rem;
   font-weight: normal;
@@ -39,7 +39,7 @@
 
 .accordion-trigger:focus,
 .accordion-trigger:hover {
-  background: hsl(216, 94%, 94%);
+  background: hsl(216deg 94% 94%);
 }
 
 .accordion-trigger:focus {
@@ -74,7 +74,7 @@ button {
 }
 
 .accordion-trigger:focus .accordion-title {
-  border-color: hsl(216, 94%, 43%);
+  border-color: hsl(216deg 94% 43%);
 }
 
 .accordion-icon {
@@ -91,7 +91,7 @@ button {
 
 .accordion-trigger:focus .accordion-icon,
 .accordion-trigger:hover .accordion-icon {
-  border-color: hsl(216, 94%, 43%);
+  border-color: hsl(216deg 94% 43%);
 }
 
 .accordion-trigger[aria-expanded="true"] .accordion-icon {
@@ -115,7 +115,7 @@ fieldset {
 }
 
 input {
-  border: 1px solid hsl(0, 0%, 42%);
+  border: 1px solid hsl(0deg 0% 42%);
   border-radius: 0.3em;
   display: block;
   font-size: inherit;

diff --git a/examples/alert/css/alert.css b/examples/alert/css/alert.css
@@ -1,8 +1,8 @@
 [role="alert"] {
   padding: 10px;
-  border: 2px solid hsl(206, 74%, 54%);
+  border: 2px solid hsl(206deg 74% 54%);
   border-radius: 4px;
-  background: hsl(206, 74%, 90%);
+  background: hsl(206deg 74% 90%);
 }
 
 [role="alert"]:empty {

diff --git a/examples/breadcrumb/css/breadcrumb.css b/examples/breadcrumb/css/breadcrumb.css
@@ -1,8 +1,8 @@
 nav.breadcrumb {
   padding: 0.8em 1em;
-  border: 1px solid hsl(0, 0%, 90%);
+  border: 1px solid hsl(0deg 0% 90%);
   border-radius: 4px;
-  background: hsl(300, 14%, 97%);
+  background: hsl(300deg 14% 97%);
 }
 
 nav.breadcrumb ol {

diff --git a/examples/button/css/button.css b/examples/button/css/button.css
@@ -2,26 +2,26 @@
   display: inline-block;
   position: relative;
   padding: 0.4em 0.7em;
-  border: 1px solid hsl(213, 71%, 49%);
+  border: 1px solid hsl(213deg 71% 49%);
   border-radius: 5px;
-  box-shadow: 0 1px 2px hsl(216, 27%, 55%);
+  box-shadow: 0 1px 2px hsl(216deg 27% 55%);
   color: #fff;
-  text-shadow: 0 -1px 1px hsl(216, 27%, 25%);
-  background-color: hsl(216, 82%, 51%);
+  text-shadow: 0 -1px 1px hsl(216deg 27% 25%);
+  background-color: hsl(216deg 82% 51%);
   background-image: linear-gradient(
     to bottom,
-    hsl(216, 82%, 53%),
-    hsl(216, 82%, 47%)
+    hsl(216deg 82% 53%),
+    hsl(216deg 82% 47%)
   );
 }
 
 [role="button"]:hover {
-  border-color: hsl(213, 71%, 29%);
-  background-color: hsl(216, 82%, 31%);
+  border-color: hsl(213deg 71% 29%);
+  background-color: hsl(216deg 82% 31%);
   background-image: linear-gradient(
     to bottom,
-    hsl(216, 82%, 33%),
-    hsl(216, 82%, 27%)
+    hsl(216deg 82% 33%),
+    hsl(216deg 82% 27%)
   );
   cursor: default;
 }
@@ -39,72 +39,72 @@
   right: calc(-1px - 3px - 3px);
   bottom: calc(-1px - 3px - 3px);
   left: calc(-1px - 3px - 3px);
-  border: 3px solid hsl(213, 71%, 49%);
+  border: 3px solid hsl(213deg 71% 49%);
 
   /* button border radius + outline width + offset */
   border-radius: calc(5px + 3px + 3px);
   content: "";
 }
 
 [role="button"]:active {
-  border-color: hsl(213, 71%, 49%);
-  background-color: hsl(216, 82%, 31%);
+  border-color: hsl(213deg 71% 49%);
+  background-color: hsl(216deg 82% 31%);
   background-image: linear-gradient(
     to bottom,
-    hsl(216, 82%, 53%),
-    hsl(216, 82%, 47%)
+    hsl(216deg 82% 53%),
+    hsl(216deg 82% 47%)
   );
-  box-shadow: inset 0 3px 5px 1px hsl(216, 82%, 30%);
+  box-shadow: inset 0 3px 5px 1px hsl(216deg 82% 30%);
 }
 
 [role="button"][aria-pressed] {
-  border-color: hsl(261, 71%, 49%);
-  box-shadow: 0 1px 2px hsl(261, 27%, 55%);
-  text-shadow: 0 -1px 1px hsl(261, 27%, 25%);
-  background-color: hsl(261, 82%, 51%);
+  border-color: hsl(261deg 71% 49%);
+  box-shadow: 0 1px 2px hsl(261deg 27% 55%);
+  text-shadow: 0 -1px 1px hsl(261deg 27% 25%);
+  background-color: hsl(261deg 82% 51%);
   background-image: linear-gradient(
     to bottom,
-    hsl(261, 82%, 53%),
-    hsl(261, 82%, 47%)
+    hsl(261deg 82% 53%),
+    hsl(261deg 82% 47%)
   );
 }
 
 [role="button"][aria-pressed]:hover {
-  border-color: hsl(261, 71%, 29%);
-  background-color: hsl(261, 82%, 31%);
+  border-color: hsl(261deg 71% 29%);
+  background-color: hsl(261deg 82% 31%);
   background-image: linear-gradient(
     to bottom,
-    hsl(261, 82%, 33%),
-    hsl(261, 82%, 27%)
+    hsl(261deg 82% 33%),
+    hsl(261deg 82% 27%)
   );
 }
 
 [role="button"][aria-pressed="true"] {
   padding-top: 0.5em;
   padding-bottom: 0.3em;
-  border-color: hsl(261, 71%, 49%);
-  background-color: hsl(261, 82%, 31%);
+  border-color: hsl(261deg 71% 49%);
+  background-color: hsl(261deg 82% 31%);
   background-image: linear-gradient(
     to bottom,
-    hsl(261, 82%, 63%),
-    hsl(261, 82%, 57%)
+    hsl(261deg 82% 63%),
+    hsl(261deg 82% 57%)
   );
-  box-shadow: inset 0 3px 5px 1px hsl(261, 82%, 30%);
+  box-shadow: inset 0 3px 5px 1px hsl(261deg 82% 30%);
 }
 
 [role="button"][aria-pressed="true"]:hover {
-  border-color: hsl(261, 71%, 49%);
-  background-color: hsl(261, 82%, 31%);
+  border-color: hsl(261deg 71% 49%);
+  background-color: hsl(261deg 82% 31%);
   background-image: linear-gradient(
     to bottom,
-    hsl(261, 82%, 43%),
-    hsl(261, 82%, 37%)
+    hsl(261deg 82% 43%),
+    hsl(261deg 82% 37%)
   );
-  box-shadow: inset 0 3px 5px 1px hsl(261, 82%, 20%);
+  box-shadow: inset 0 3px 5px 1px hsl(261deg 82% 20%);
 }
 
 [role="button"][aria-pressed]:focus::before {
-  border-color: hsl(261, 71%, 49%);
+  border-color: hsl(261deg 71% 49%);
 }
 
 [role="button"] svg {

diff --git a/examples/carousel/css/carousel-prev-next.css b/examples/carousel/css/carousel-prev-next.css
@@ -58,7 +58,7 @@ img.reload {
   display: inline-block;
   margin: 0;
   padding: 6px;
-  background-color: rgba(0, 0, 0, 0.65);
+  background-color: rgb(0 0 0 / 65%);
   border-radius: 5px;
   border: 0 solid transparent;
 }
@@ -88,13 +88,13 @@ img.reload {
 
 .carousel .carousel-item .carousel-caption a:hover,
 .carousel .carousel-item .carousel-caption span.contrast:hover {
-  background-color: rgba(0, 0, 0, 1);
+  background-color: rgb(0 0 0 / 100%);
 }
 
 .carousel .carousel-item .carousel-caption a:focus {
   padding: 4px;
   border: 2px solid #fff;
-  background-color: rgba(0, 0, 0, 1);
+  background-color: rgb(0 0 0 / 100%);
   outline: none;
   border-width: 2px solid #fff;
   color: #fff;
@@ -154,7 +154,7 @@ img.reload {
   stroke: black;
   fill: black;
   stroke-width: 1px;
-  opacity: 0.6;
+  opacity: 60%;
 }
 
 .carousel .controls svg .border {
@@ -195,7 +195,7 @@ img.reload {
 .carousel .controls button:hover svg .border {
   fill: #005a9c;
   stroke: #005a9c;
-  opacity: 1;
+  opacity: 100%;
 }
 
 .carousel .controls button:focus svg .border {
@@ -220,6 +220,7 @@ img.reload {
   left: 0;
   padding: 0.25em 0.25em 0;
 }
+
 .carousel.carousel-moreaccessible .controls {
   position: static;
   height: 36px;
@@ -272,7 +273,7 @@ img.reload {
 }
 
 .carousel-moreaccessible .carousel-item .carousel-caption a:hover {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgb(0 0 0 / 20%);
 }
 
 .carousel-moreaccessible .carousel-item .carousel-caption a:focus {

diff --git a/examples/carousel/css/carousel-tablist.css b/examples/carousel/css/carousel-tablist.css
@@ -58,7 +58,7 @@ img.reload {
   margin: 0;
   padding: 6px;
   display: inline-block;
-  background-color: rgba(0, 0, 0, 0.65);
+  background-color: rgb(0 0 0 / 65%);
   border-radius: 5px;
   border: 0 solid transparent;
 }
@@ -91,13 +91,13 @@ img.reload {
 
 .carousel-tablist .carousel-item .carousel-caption a:hover,
 .carousel-tablist .carousel-item .carousel-caption span.contrast:hover {
-  background-color: rgba(0, 0, 0, 1);
+  background-color: rgb(0 0 0 / 100%);
 }
 
 .carousel-tablist .carousel-item .carousel-caption a:focus {
   padding: 4px;
   border: 2px solid #eee;
-  background-color: rgba(0, 0, 0, 1);
+  background-color: rgb(0 0 0 / 100%);
   outline: none;
   border-width: 2px solid #fff;
   color: #fff;
@@ -154,7 +154,7 @@ img.reload {
   stroke: black;
   fill: black;
   stroke-width: 1px;
-  opacity: 0.6;
+  opacity: 60%;
 }
 
 .carousel-tablist .svg-play .border {
@@ -186,7 +186,7 @@ img.reload {
 .carousel-tablist .rotation:hover .svg-play .border {
   fill: #005a9c;
   stroke: #005a9c;
-  opacity: 1;
+  opacity: 100%;
 }
 
 .carousel-tablist .rotation:focus .svg-play .border {
@@ -202,7 +202,7 @@ img.reload {
   display: inline-block;
   padding-top: 2px;
   height: 30px;
-  background-color: rgba(0, 0, 0, 0.65);
+  background-color: rgb(0 0 0 / 65%);
 }
 
 .carousel-tablist [role="tablist"].focus {
@@ -236,7 +236,7 @@ img.reload {
   stroke: black;
   fill: black;
   stroke-width: 2px;
-  opacity: 0.6;
+  opacity: 60%;
   z-index: 14;
 }
 
@@ -277,14 +277,14 @@ img.reload {
 .carousel-tablist [role="tab"]:hover circle.tab-background {
   fill: white;
   stroke: white;
-  opacity: 1;
+  opacity: 100%;
 }
 
 .carousel-tablist [role="tab"]:hover circle.border,
 .carousel-tablist [role="tab"]:hover circle.tab {
   fill: #005a9c;
   stroke: #005a9c;
-  opacity: 1;
+  opacity: 100%;
 }
 
 .carousel-tablist [role="tab"][aria-selected="true"]:hover circle.tab {
@@ -340,7 +340,7 @@ img.reload {
 }
 
 .carousel-tablist-moreaccessible .carousel-item .carousel-caption a:hover {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgb(0 0 0 / 20%);
 }
 
 .carousel-tablist-moreaccessible .carousel-item .carousel-caption a:focus {

diff --git a/examples/combobox/css/combobox-autocomplete.css b/examples/combobox/css/combobox-autocomplete.css
@@ -34,7 +34,7 @@
   width: 19px;
   border-left: none;
   outline: none;
-  color: rgb(0, 90, 156);
+  color: rgb(0 90 156);
 }
 
 .combobox button[aria-expanded="true"] svg {