Skip to content

Commit edddf9f

Browse files
nschonninschonni
authored
Infrastructure: Update Stylelint (#2077)
Autofix and address most new rules. Ignore the kebab case rules
1 parent fcaaba2 commit edddf9f

34 files changed

+412
-854
lines changed

‎.stylelintrc

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@
1717
]
1818
},
1919
],
20+
"selector-class-pattern": null,
21+
"selector-id-pattern": null,
2022
"prettier/prettier": [true, {"singleQuote": false}]
2123
}
2224
}

‎examples/accordion/css/accordion.css

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.accordion {
22
margin: 0;
33
padding: 0;
4-
border: 2px solid hsl(0, 0%, 52%);
4+
border: 2px solid hsl(0deg 0% 52%);
55
border-radius: 7px;
66
width: 20em;
77
}
@@ -12,20 +12,20 @@
1212
}
1313

1414
.accordion:focus-within {
15-
border-color: hsl(216, 94%, 43%);
15+
border-color: hsl(216deg 94% 43%);
1616
}
1717

1818
.accordion:focus-within h3 {
19-
background-color: hsl(0, 0%, 97%);
19+
background-color: hsl(0deg 0% 97%);
2020
}
2121

2222
.accordion > * + * {
23-
border-top: 1px solid hsl(0, 0%, 52%);
23+
border-top: 1px solid hsl(0deg 0% 52%);
2424
}
2525

2626
.accordion-trigger {
2727
background: none;
28-
color: hsl(0, 0%, 13%);
28+
color: hsl(0deg 0% 13%);
2929
display: block;
3030
font-size: 1rem;
3131
font-weight: normal;
@@ -39,7 +39,7 @@
3939

4040
.accordion-trigger:focus,
4141
.accordion-trigger:hover {
42-
background: hsl(216, 94%, 94%);
42+
background: hsl(216deg 94% 94%);
4343
}
4444

4545
.accordion-trigger:focus {
@@ -74,7 +74,7 @@ button {
7474
}
7575

7676
.accordion-trigger:focus .accordion-title {
77-
border-color: hsl(216, 94%, 43%);
77+
border-color: hsl(216deg 94% 43%);
7878
}
7979

8080
.accordion-icon {
@@ -91,7 +91,7 @@ button {
9191

9292
.accordion-trigger:focus .accordion-icon,
9393
.accordion-trigger:hover .accordion-icon {
94-
border-color: hsl(216, 94%, 43%);
94+
border-color: hsl(216deg 94% 43%);
9595
}
9696

9797
.accordion-trigger[aria-expanded="true"] .accordion-icon {
@@ -115,7 +115,7 @@ fieldset {
115115
}
116116

117117
input {
118-
border: 1px solid hsl(0, 0%, 42%);
118+
border: 1px solid hsl(0deg 0% 42%);
119119
border-radius: 0.3em;
120120
display: block;
121121
font-size: inherit;

‎examples/alert/css/alert.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
[role="alert"] {
22
padding: 10px;
3-
border: 2px solid hsl(206, 74%, 54%);
3+
border: 2px solid hsl(206deg 74% 54%);
44
border-radius: 4px;
5-
background: hsl(206, 74%, 90%);
5+
background: hsl(206deg 74% 90%);
66
}
77

88
[role="alert"]:empty {

‎examples/breadcrumb/css/breadcrumb.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
nav.breadcrumb {
22
padding: 0.8em 1em;
3-
border: 1px solid hsl(0, 0%, 90%);
3+
border: 1px solid hsl(0deg 0% 90%);
44
border-radius: 4px;
5-
background: hsl(300, 14%, 97%);
5+
background: hsl(300deg 14% 97%);
66
}
77

88
nav.breadcrumb ol {

‎examples/button/css/button.css

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,26 @@
22
display: inline-block;
33
position: relative;
44
padding: 0.4em 0.7em;
5-
border: 1px solid hsl(213, 71%, 49%);
5+
border: 1px solid hsl(213deg 71% 49%);
66
border-radius: 5px;
7-
box-shadow: 0 1px 2px hsl(216, 27%, 55%);
7+
box-shadow: 0 1px 2px hsl(216deg 27% 55%);
88
color: #fff;
9-
text-shadow: 0 -1px 1px hsl(216, 27%, 25%);
10-
background-color: hsl(216, 82%, 51%);
9+
text-shadow: 0 -1px 1px hsl(216deg 27% 25%);
10+
background-color: hsl(216deg 82% 51%);
1111
background-image: linear-gradient(
1212
to bottom,
13-
hsl(216, 82%, 53%),
14-
hsl(216, 82%, 47%)
13+
hsl(216deg 82% 53%),
14+
hsl(216deg 82% 47%)
1515
);
1616
}
1717

1818
[role="button"]:hover {
19-
border-color: hsl(213, 71%, 29%);
20-
background-color: hsl(216, 82%, 31%);
19+
border-color: hsl(213deg 71% 29%);
20+
background-color: hsl(216deg 82% 31%);
2121
background-image: linear-gradient(
2222
to bottom,
23-
hsl(216, 82%, 33%),
24-
hsl(216, 82%, 27%)
23+
hsl(216deg 82% 33%),
24+
hsl(216deg 82% 27%)
2525
);
2626
cursor: default;
2727
}
@@ -39,72 +39,72 @@
3939
right: calc(-1px - 3px - 3px);
4040
bottom: calc(-1px - 3px - 3px);
4141
left: calc(-1px - 3px - 3px);
42-
border: 3px solid hsl(213, 71%, 49%);
42+
border: 3px solid hsl(213deg 71% 49%);
4343

4444
/* button border radius + outline width + offset */
4545
border-radius: calc(5px + 3px + 3px);
4646
content: "";
4747
}
4848

4949
[role="button"]:active {
50-
border-color: hsl(213, 71%, 49%);
51-
background-color: hsl(216, 82%, 31%);
50+
border-color: hsl(213deg 71% 49%);
51+
background-color: hsl(216deg 82% 31%);
5252
background-image: linear-gradient(
5353
to bottom,
54-
hsl(216, 82%, 53%),
55-
hsl(216, 82%, 47%)
54+
hsl(216deg 82% 53%),
55+
hsl(216deg 82% 47%)
5656
);
57-
box-shadow: inset 0 3px 5px 1px hsl(216, 82%, 30%);
57+
box-shadow: inset 0 3px 5px 1px hsl(216deg 82% 30%);
5858
}
5959

6060
[role="button"][aria-pressed] {
61-
border-color: hsl(261, 71%, 49%);
62-
box-shadow: 0 1px 2px hsl(261, 27%, 55%);
63-
text-shadow: 0 -1px 1px hsl(261, 27%, 25%);
64-
background-color: hsl(261, 82%, 51%);
61+
border-color: hsl(261deg 71% 49%);
62+
box-shadow: 0 1px 2px hsl(261deg 27% 55%);
63+
text-shadow: 0 -1px 1px hsl(261deg 27% 25%);
64+
background-color: hsl(261deg 82% 51%);
6565
background-image: linear-gradient(
6666
to bottom,
67-
hsl(261, 82%, 53%),
68-
hsl(261, 82%, 47%)
67+
hsl(261deg 82% 53%),
68+
hsl(261deg 82% 47%)
6969
);
7070
}
7171

7272
[role="button"][aria-pressed]:hover {
73-
border-color: hsl(261, 71%, 29%);
74-
background-color: hsl(261, 82%, 31%);
73+
border-color: hsl(261deg 71% 29%);
74+
background-color: hsl(261deg 82% 31%);
7575
background-image: linear-gradient(
7676
to bottom,
77-
hsl(261, 82%, 33%),
78-
hsl(261, 82%, 27%)
77+
hsl(261deg 82% 33%),
78+
hsl(261deg 82% 27%)
7979
);
8080
}
8181

8282
[role="button"][aria-pressed="true"] {
8383
padding-top: 0.5em;
8484
padding-bottom: 0.3em;
85-
border-color: hsl(261, 71%, 49%);
86-
background-color: hsl(261, 82%, 31%);
85+
border-color: hsl(261deg 71% 49%);
86+
background-color: hsl(261deg 82% 31%);
8787
background-image: linear-gradient(
8888
to bottom,
89-
hsl(261, 82%, 63%),
90-
hsl(261, 82%, 57%)
89+
hsl(261deg 82% 63%),
90+
hsl(261deg 82% 57%)
9191
);
92-
box-shadow: inset 0 3px 5px 1px hsl(261, 82%, 30%);
92+
box-shadow: inset 0 3px 5px 1px hsl(261deg 82% 30%);
9393
}
9494

9595
[role="button"][aria-pressed="true"]:hover {
96-
border-color: hsl(261, 71%, 49%);
97-
background-color: hsl(261, 82%, 31%);
96+
border-color: hsl(261deg 71% 49%);
97+
background-color: hsl(261deg 82% 31%);
9898
background-image: linear-gradient(
9999
to bottom,
100-
hsl(261, 82%, 43%),
101-
hsl(261, 82%, 37%)
100+
hsl(261deg 82% 43%),
101+
hsl(261deg 82% 37%)
102102
);
103-
box-shadow: inset 0 3px 5px 1px hsl(261, 82%, 20%);
103+
box-shadow: inset 0 3px 5px 1px hsl(261deg 82% 20%);
104104
}
105105

106106
[role="button"][aria-pressed]:focus::before {
107-
border-color: hsl(261, 71%, 49%);
107+
border-color: hsl(261deg 71% 49%);
108108
}
109109

110110
[role="button"] svg {

‎examples/carousel/css/carousel-prev-next.css

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ img.reload {
5858
display: inline-block;
5959
margin: 0;
6060
padding: 6px;
61-
background-color: rgba(0, 0, 0, 0.65);
61+
background-color: rgb(0 0 0 / 65%);
6262
border-radius: 5px;
6363
border: 0 solid transparent;
6464
}
@@ -88,13 +88,13 @@ img.reload {
8888

8989
.carousel .carousel-item .carousel-caption a:hover,
9090
.carousel .carousel-item .carousel-caption span.contrast:hover {
91-
background-color: rgba(0, 0, 0, 1);
91+
background-color: rgb(0 0 0 / 100%);
9292
}
9393

9494
.carousel .carousel-item .carousel-caption a:focus {
9595
padding: 4px;
9696
border: 2px solid #fff;
97-
background-color: rgba(0, 0, 0, 1);
97+
background-color: rgb(0 0 0 / 100%);
9898
outline: none;
9999
border-width: 2px solid #fff;
100100
color: #fff;
@@ -154,7 +154,7 @@ img.reload {
154154
stroke: black;
155155
fill: black;
156156
stroke-width: 1px;
157-
opacity: 0.6;
157+
opacity: 60%;
158158
}
159159

160160
.carousel .controls svg .border {
@@ -195,7 +195,7 @@ img.reload {
195195
.carousel .controls button:hover svg .border {
196196
fill: #005a9c;
197197
stroke: #005a9c;
198-
opacity: 1;
198+
opacity: 100%;
199199
}
200200

201201
.carousel .controls button:focus svg .border {
@@ -220,6 +220,7 @@ img.reload {
220220
left: 0;
221221
padding: 0.25em 0.25em 0;
222222
}
223+
223224
.carousel.carousel-moreaccessible .controls {
224225
position: static;
225226
height: 36px;
@@ -272,7 +273,7 @@ img.reload {
272273
}
273274

274275
.carousel-moreaccessible .carousel-item .carousel-caption a:hover {
275-
background-color: rgba(0, 0, 0, 0.2);
276+
background-color: rgb(0 0 0 / 20%);
276277
}
277278

278279
.carousel-moreaccessible .carousel-item .carousel-caption a:focus {

‎examples/carousel/css/carousel-tablist.css

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ img.reload {
5858
margin: 0;
5959
padding: 6px;
6060
display: inline-block;
61-
background-color: rgba(0, 0, 0, 0.65);
61+
background-color: rgb(0 0 0 / 65%);
6262
border-radius: 5px;
6363
border: 0 solid transparent;
6464
}
@@ -91,13 +91,13 @@ img.reload {
9191

9292
.carousel-tablist .carousel-item .carousel-caption a:hover,
9393
.carousel-tablist .carousel-item .carousel-caption span.contrast:hover {
94-
background-color: rgba(0, 0, 0, 1);
94+
background-color: rgb(0 0 0 / 100%);
9595
}
9696

9797
.carousel-tablist .carousel-item .carousel-caption a:focus {
9898
padding: 4px;
9999
border: 2px solid #eee;
100-
background-color: rgba(0, 0, 0, 1);
100+
background-color: rgb(0 0 0 / 100%);
101101
outline: none;
102102
border-width: 2px solid #fff;
103103
color: #fff;
@@ -154,7 +154,7 @@ img.reload {
154154
stroke: black;
155155
fill: black;
156156
stroke-width: 1px;
157-
opacity: 0.6;
157+
opacity: 60%;
158158
}
159159

160160
.carousel-tablist .svg-play .border {
@@ -186,7 +186,7 @@ img.reload {
186186
.carousel-tablist .rotation:hover .svg-play .border {
187187
fill: #005a9c;
188188
stroke: #005a9c;
189-
opacity: 1;
189+
opacity: 100%;
190190
}
191191

192192
.carousel-tablist .rotation:focus .svg-play .border {
@@ -202,7 +202,7 @@ img.reload {
202202
display: inline-block;
203203
padding-top: 2px;
204204
height: 30px;
205-
background-color: rgba(0, 0, 0, 0.65);
205+
background-color: rgb(0 0 0 / 65%);
206206
}
207207

208208
.carousel-tablist [role="tablist"].focus {
@@ -236,7 +236,7 @@ img.reload {
236236
stroke: black;
237237
fill: black;
238238
stroke-width: 2px;
239-
opacity: 0.6;
239+
opacity: 60%;
240240
z-index: 14;
241241
}
242242

@@ -277,14 +277,14 @@ img.reload {
277277
.carousel-tablist [role="tab"]:hover circle.tab-background {
278278
fill: white;
279279
stroke: white;
280-
opacity: 1;
280+
opacity: 100%;
281281
}
282282

283283
.carousel-tablist [role="tab"]:hover circle.border,
284284
.carousel-tablist [role="tab"]:hover circle.tab {
285285
fill: #005a9c;
286286
stroke: #005a9c;
287-
opacity: 1;
287+
opacity: 100%;
288288
}
289289

290290
.carousel-tablist [role="tab"][aria-selected="true"]:hover circle.tab {
@@ -340,7 +340,7 @@ img.reload {
340340
}
341341

342342
.carousel-tablist-moreaccessible .carousel-item .carousel-caption a:hover {
343-
background-color: rgba(0, 0, 0, 0.2);
343+
background-color: rgb(0 0 0 / 20%);
344344
}
345345

346346
.carousel-tablist-moreaccessible .carousel-item .carousel-caption a:focus {

‎examples/combobox/css/combobox-autocomplete.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
width: 19px;
3535
border-left: none;
3636
outline: none;
37-
color: rgb(0, 90, 156);
37+
color: rgb(0 90 156);
3838
}
3939

4040
.combobox button[aria-expanded="true"] svg {

0 commit comments

Comments
 (0)