Skip to content

Commit 48035bb

Browse files
confused-Techieconfused-Techie
committed
Hyphenate all CSS variables
Remove any and all uses of `__` & `--` and replace them with `-`
1 parent cec8b45 commit 48035bb

12 files changed

+369
-366
lines changed

Diff for: ‎less/adjacent-nav.less

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ nav.adjacent {
33
display: flex;
44

55
margin-top: 4rem;
6-
border-top: 2px solid var(--thematic-break__color);
6+
border-top: 2px solid var(--thematic-break-color);
77
padding-top: 4rem;
88

99
justify-content: space-between;

Diff for: ‎less/alert.less

+30-30
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@
77
margin: 1rem 3rem 2rem 0;
88
padding: 0rem 1rem 0.25rem;
99
border-radius: 0.8rem;
10-
border-left: 0.45rem solid var(--alert__border);
10+
border-left: 0.45rem solid var(--alert-border);
1111

12-
background-color: var(--alert__bg);
12+
background-color: var(--alert-bg);
1313

14-
color: var(--alert__color);
14+
color: var(--alert-color);
1515

1616
.alert__content {
1717
// (when there's no title)
@@ -30,65 +30,65 @@
3030
padding-left: 1rem;
3131
padding-right: 1rem;
3232

33-
background-color: var(--alert__bg--title);
33+
background-color: var(--alert-bg-title);
3434

35-
color: var(--alert__color--title);
35+
color: var(--alert-color-title);
3636
font-weight: 700;
3737
text-transform: uppercase;
3838
}
3939

4040
&.note {
41-
border-color: var(--alert__border--note, var(--alert__border));
42-
background-color: var(--alert__bg--note, var(--alert__bg));
43-
color: var(--alert__color--note, var(--alert__color));
41+
border-color: var(--alert-border-note, var(--alert-border));
42+
background-color: var(--alert-bg-note, var(--alert-bg));
43+
color: var(--alert-color-note, var(--alert-color));
4444

4545
.alert__title {
46-
background-color: var(--alert__bg--title--note, var(--alert__bg--title));
47-
color: var(--alert__color--title--note, var(--alert__color--title));
46+
background-color: var(--alert-bg-title-note, var(--alert-bg-title));
47+
color: var(--alert-color-title-note, var(--alert-color-title));
4848
}
4949
}
5050

5151
&.warning {
52-
border-color: var(--alert__border--warning, var(--alert__border));
53-
background-color: var(--alert__bg--warning, var(--alert__bg));
54-
color: var(--alert__color--warning, var(--alert__color));
52+
border-color: var(--alert-border-warning, var(--alert-border));
53+
background-color: var(--alert-bg-warning, var(--alert-bg));
54+
color: var(--alert-color-warning, var(--alert-color));
5555

5656
.alert__title {
57-
background-color: var(--alert__bg--title--warning, var(--alert__bg--title));
58-
color: var(--alert__color--title--warning, var(--alert__color--title));
57+
background-color: var(--alert-bg-title-warning, var(--alert-bg-title));
58+
color: var(--alert-color-title-warning, var(--alert-color-title));
5959
}
6060
}
6161

6262
&.info {
63-
border-color: var(--alert__border--info, var(--alert__border));
64-
background-color: var(--alert__bg--info, var(--alert__bg));
65-
color: var(--alert__color--info, var(--alert__color));
63+
border-color: var(--alert-border-info, var(--alert-border));
64+
background-color: var(--alert-bg-info, var(--alert-bg));
65+
color: var(--alert-color-info, var(--alert-color));
6666

6767
.alert__title {
68-
background-color: var(--alert__bg--title--info, var(--alert__bg--title));
69-
color: var(--alert__color--title--info, var(--alert__color--title));
68+
background-color: var(--alert-bg-title-info, var(--alert-bg-title));
69+
color: var(--alert-color-title-info, var(--alert-color-title));
7070
}
7171
}
7272

7373
&.tip {
74-
border-color: var(--alert__border--tip, var(--alert__border));
75-
background-color: var(--alert__bg--tip, var(--alert__bg));
76-
color: var(--alert__color--tip, var(--alert__color));
74+
border-color: var(--alert-border-tip, var(--alert-border));
75+
background-color: var(--alert-bg-tip, var(--alert-bg));
76+
color: var(--alert-color-tip, var(--alert-color));
7777

7878
.alert__title {
79-
background-color: var(--alert__bg--title--tip, var(--alert__bg--title));
80-
color: var(--alert__color--title--tip, var(--alert__color--title));
79+
background-color: var(--alert-bg-title-tip, var(--alert-bg-title));
80+
color: var(--alert-color-title-tip, var(--alert-color-title));
8181
}
8282
}
8383

8484
&.danger {
85-
border-color: var(--alert__border--danger, var(--alert__border));
86-
background-color: var(--alert__bg--danger, var(--alert__bg));
87-
color: var(--alert__color--danger, var(--alert__color));
85+
border-color: var(--alert-border-danger, var(--alert-border));
86+
background-color: var(--alert-bg-danger, var(--alert-bg));
87+
color: var(--alert-color-danger, var(--alert-color));
8888

8989
.alert__title {
90-
background-color: var(--alert__bg--title--danger, var(--alert__bg--title));
91-
color: var(--alert__color--title--danger, var(--alert__color--title));
90+
background-color: var(--alert-bg-title-danger, var(--alert-bg-title));
91+
color: var(--alert-color-title-danger, var(--alert-color-title));
9292
}
9393
}
9494
}

Diff for: ‎less/api.less

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22
.api-section-name {
33
margin-bottom: 3rem;
4-
border-bottom: 5px solid var(--thematic-break__color);
4+
border-bottom: 5px solid var(--thematic-break-color);
55
padding-bottom: 0.25rem;
66
}
77

@@ -13,7 +13,7 @@
1313

1414
& + .api-entry {
1515
margin-top: 3rem;
16-
border-top: 5px solid var(--thematic-break__color);
16+
border-top: 5px solid var(--thematic-break-color);
1717
padding-top: 3rem;
1818

1919
.api-entry__name {
@@ -40,7 +40,7 @@
4040
font-style: normal;
4141
letter-spacing: initial;
4242
text-decoration: none;
43-
color: var(--api-entry-name__color);
43+
color: var(--api-entry-name-color);
4444

4545
&:hover {
4646
text-decoration: underline;
@@ -49,7 +49,7 @@
4949
}
5050

5151
&__argument {
52-
color: var(--api-argument__color);
52+
color: var(--api-argument-color);
5353
}
5454

5555
&__summary {
@@ -67,7 +67,7 @@ span.optional {
6767
display: inline-block;
6868

6969
margin-right: 4px;
70-
border: 1px solid var(--code__border);
70+
border: 1px solid var(--code-border);
7171
border-radius: 4px;
7272
padding: 2px;
7373

@@ -138,7 +138,7 @@ table.api-arguments {
138138
.api-return-values {
139139
h6 {
140140
margin-bottom: 1.25rem;
141-
border-bottom: 1px solid var(--table__border);
141+
border-bottom: 1px solid var(--table-border);
142142
padding: 0.5rem 0;
143143

144144
font-weight: 700;

0 commit comments

Comments
 (0)