Skip to content

Commit 7ee3a03

Browse files
marissahuysentruytcastastrophe
marissahuysentruyt
authored and
castastrophe
committed
feat(statuslight): s2 migration (#2818)
* refactor: remove --sizeM modifier and make "medium" default size * refactor:remove accent semantic variant * refactor: add/update new colors/tokens * refactor: update typography styles * refactor: generate new mod properties * docs: add migration notes/changes to yml * feat: add chromatic vr coverage * fix: high contrast changes (utilizes changes from PR#2771 to clean up legacy vendor prefixes) * docs: add changeset and update yml
1 parent 2cbe348 commit 7ee3a03

File tree

4 files changed

+135
-29
lines changed

4 files changed

+135
-29
lines changed

‎.changeset/chilly-peaches-sniff.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
"@spectrum-css/statuslight": major
3+
---
4+
5+
Spectrum 2 Status light migration
6+
7+
New non-semantic colors were added to the variants list, while the `accent` semantic variant was removed. There were also some new and updated color and text-to-visual tokens used to match the designs, along with normalizing font family, font style, and font weight.
8+
9+
New mods added:
10+
11+
- `--mod-statuslight-font-family`
12+
- `--mod-statuslight-font-style`
13+
- `--mod-statuslight-nonsemantic-brown-color`
14+
- `--mod-statuslight-nonsemantic-cinnamon-color`
15+
- `--mod-statuslight-nonsemantic-pink-color`
16+
- `--mod-statuslight-nonsemantic-silver-color`
17+
- `--mod-statuslight-nonsemantic-turquoise-color`
18+
19+
Removed mods:
20+
21+
- `--mod-statuslight-semantic-accent-color`

‎components/statuslight/dist/metadata.json

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@
22
"sourceFile": "index.css",
33
"selectors": [
44
".spectrum-StatusLight",
5-
".spectrum-StatusLight--accent:before",
65
".spectrum-StatusLight--blue:before",
6+
".spectrum-StatusLight--brown:before",
77
".spectrum-StatusLight--celery:before",
88
".spectrum-StatusLight--chartreuse:before",
9+
".spectrum-StatusLight--cinnamon:before",
910
".spectrum-StatusLight--cyan:before",
1011
".spectrum-StatusLight--fuchsia:before",
1112
".spectrum-StatusLight--gray:before",
@@ -18,14 +19,16 @@
1819
".spectrum-StatusLight--neutral:before",
1920
".spectrum-StatusLight--notice:before",
2021
".spectrum-StatusLight--orange:before",
22+
".spectrum-StatusLight--pink:before",
2123
".spectrum-StatusLight--positive:before",
2224
".spectrum-StatusLight--purple:before",
2325
".spectrum-StatusLight--red:before",
2426
".spectrum-StatusLight--seafoam:before",
27+
".spectrum-StatusLight--silver:before",
2528
".spectrum-StatusLight--sizeL",
26-
".spectrum-StatusLight--sizeM",
2729
".spectrum-StatusLight--sizeS",
2830
".spectrum-StatusLight--sizeXL",
31+
".spectrum-StatusLight--turquoise:before",
2932
".spectrum-StatusLight--yellow:before",
3033
".spectrum-StatusLight:before",
3134
".spectrum-StatusLight:lang(ja)",
@@ -37,26 +40,32 @@
3740
"--mod-statuslight-content-color-default",
3841
"--mod-statuslight-corner-radius",
3942
"--mod-statuslight-dot-size",
43+
"--mod-statuslight-font-family",
4044
"--mod-statuslight-font-size",
45+
"--mod-statuslight-font-style",
4146
"--mod-statuslight-font-weight",
4247
"--mod-statuslight-height",
4348
"--mod-statuslight-line-height",
4449
"--mod-statuslight-line-height-cjk",
4550
"--mod-statuslight-nonsemantic-blue-color",
51+
"--mod-statuslight-nonsemantic-brown-color",
4652
"--mod-statuslight-nonsemantic-celery-color",
4753
"--mod-statuslight-nonsemantic-chartreuse-color",
54+
"--mod-statuslight-nonsemantic-cinnamon-color",
4855
"--mod-statuslight-nonsemantic-cyan-color",
4956
"--mod-statuslight-nonsemantic-fuchsia-color",
5057
"--mod-statuslight-nonsemantic-gray-color",
5158
"--mod-statuslight-nonsemantic-green-color",
5259
"--mod-statuslight-nonsemantic-indigo-color",
5360
"--mod-statuslight-nonsemantic-magenta-color",
5461
"--mod-statuslight-nonsemantic-orange-color",
62+
"--mod-statuslight-nonsemantic-pink-color",
5563
"--mod-statuslight-nonsemantic-purple-color",
5664
"--mod-statuslight-nonsemantic-red-color",
5765
"--mod-statuslight-nonsemantic-seafoam-color",
66+
"--mod-statuslight-nonsemantic-silver-color",
67+
"--mod-statuslight-nonsemantic-turquoise-color",
5868
"--mod-statuslight-nonsemantic-yellow-color",
59-
"--mod-statuslight-semantic-accent-color",
6069
"--mod-statuslight-semantic-info-color",
6170
"--mod-statuslight-semantic-negative-color",
6271
"--mod-statuslight-semantic-neutral-color",
@@ -73,6 +82,10 @@
7382
"--spectrum-status-light-dot-size-large",
7483
"--spectrum-status-light-dot-size-medium",
7584
"--spectrum-status-light-dot-size-small",
85+
"--spectrum-status-light-text-to-visual-100",
86+
"--spectrum-status-light-text-to-visual-200",
87+
"--spectrum-status-light-text-to-visual-300",
88+
"--spectrum-status-light-text-to-visual-75",
7689
"--spectrum-status-light-top-to-dot-extra-large",
7790
"--spectrum-status-light-top-to-dot-large",
7891
"--spectrum-status-light-top-to-dot-medium",
@@ -81,24 +94,31 @@
8194
"--spectrum-statuslight-content-color-default",
8295
"--spectrum-statuslight-corner-radius",
8396
"--spectrum-statuslight-dot-size",
97+
"--spectrum-statuslight-font-family",
8498
"--spectrum-statuslight-font-size",
99+
"--spectrum-statuslight-font-style",
85100
"--spectrum-statuslight-font-weight",
86101
"--spectrum-statuslight-height",
87102
"--spectrum-statuslight-line-height",
88103
"--spectrum-statuslight-line-height-cjk",
89104
"--spectrum-statuslight-nonsemantic-blue-color",
105+
"--spectrum-statuslight-nonsemantic-brown-color",
90106
"--spectrum-statuslight-nonsemantic-celery-color",
91107
"--spectrum-statuslight-nonsemantic-chartreuse-color",
108+
"--spectrum-statuslight-nonsemantic-cinnamon-color",
92109
"--spectrum-statuslight-nonsemantic-cyan-color",
93110
"--spectrum-statuslight-nonsemantic-fuchsia-color",
94111
"--spectrum-statuslight-nonsemantic-gray-color",
95112
"--spectrum-statuslight-nonsemantic-green-color",
96113
"--spectrum-statuslight-nonsemantic-indigo-color",
97114
"--spectrum-statuslight-nonsemantic-magenta-color",
98115
"--spectrum-statuslight-nonsemantic-orange-color",
116+
"--spectrum-statuslight-nonsemantic-pink-color",
99117
"--spectrum-statuslight-nonsemantic-purple-color",
100118
"--spectrum-statuslight-nonsemantic-red-color",
101119
"--spectrum-statuslight-nonsemantic-seafoam-color",
120+
"--spectrum-statuslight-nonsemantic-silver-color",
121+
"--spectrum-statuslight-nonsemantic-turquoise-color",
102122
"--spectrum-statuslight-nonsemantic-yellow-color",
103123
"--spectrum-statuslight-semantic-accent-color",
104124
"--spectrum-statuslight-semantic-info-color",
@@ -117,8 +137,10 @@
117137
"--spectrum-accent-visual-color",
118138
"--spectrum-blue-visual-color",
119139
"--spectrum-border-width-100",
140+
"--spectrum-brown-visual-color",
120141
"--spectrum-celery-visual-color",
121142
"--spectrum-chartreuse-visual-color",
143+
"--spectrum-cinnamon-visual-color",
122144
"--spectrum-cjk-line-height-100",
123145
"--spectrum-component-bottom-to-text-100",
124146
"--spectrum-component-bottom-to-text-200",
@@ -132,12 +154,16 @@
132154
"--spectrum-component-top-to-text-200",
133155
"--spectrum-component-top-to-text-300",
134156
"--spectrum-component-top-to-text-75",
157+
"--spectrum-corner-radius-full",
135158
"--spectrum-cyan-visual-color",
159+
"--spectrum-default-font-family",
160+
"--spectrum-default-font-style",
136161
"--spectrum-font-size-100",
137162
"--spectrum-font-size-200",
138163
"--spectrum-font-size-300",
139164
"--spectrum-font-size-75",
140165
"--spectrum-fuchsia-visual-color",
166+
"--spectrum-gray-600",
141167
"--spectrum-gray-visual-color",
142168
"--spectrum-green-visual-color",
143169
"--spectrum-indigo-visual-color",
@@ -150,14 +176,14 @@
150176
"--spectrum-neutral-visual-color",
151177
"--spectrum-notice-visual-color",
152178
"--spectrum-orange-visual-color",
179+
"--spectrum-pink-visual-color",
153180
"--spectrum-positive-visual-color",
154181
"--spectrum-purple-visual-color",
155182
"--spectrum-red-visual-color",
183+
"--spectrum-regular-font-weight",
156184
"--spectrum-seafoam-visual-color",
157-
"--spectrum-text-to-visual-100",
158-
"--spectrum-text-to-visual-200",
159-
"--spectrum-text-to-visual-300",
160-
"--spectrum-text-to-visual-75",
185+
"--spectrum-silver-visual-color",
186+
"--spectrum-turquoise-visual-color",
161187
"--spectrum-yellow-visual-color"
162188
],
163189
"system-theme": [],

‎components/statuslight/index.css

Lines changed: 70 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,57 @@
1111
* governing permissions and limitations under the License.
1212
*/
1313

14-
.spectrum-StatusLight,
15-
.spectrum-StatusLight--sizeM {
14+
.spectrum-StatusLight {
15+
/* Static tokens */
16+
--spectrum-statuslight-corner-radius: var(--spectrum-corner-radius-full);
17+
--spectrum-statuslight-border-width: var(--spectrum-border-width-100);
18+
19+
/* Size */
1620
--spectrum-statuslight-height: var(--spectrum-component-height-100);
1721
--spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-medium);
22+
--spectrum-statuslight-line-height: var(--spectrum-line-height-100);
23+
--spectrum-statuslight-line-height-cjk: var(--spectrum-cjk-line-height-100);
1824

25+
/* Font */
26+
--spectrum-statuslight-font-family: var(--spectrum-default-font-family);
27+
--spectrum-statuslight-font-weight: var(--spectrum-regular-font-weight);
28+
--spectrum-statuslight-font-style: var(--spectrum-default-font-style);
1929
--spectrum-statuslight-font-size: var(--spectrum-font-size-100);
2030

21-
--spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-100);
31+
/* Space */
32+
--spectrum-statuslight-spacing-dot-to-label: var(--spectrum-status-light-text-to-visual-100);
2233
--spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium);
2334
--spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-100);
2435
--spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100);
36+
37+
/* Color */
38+
--spectrum-statuslight-content-color-default: var(--spectrum-neutral-content-color-default);
39+
--spectrum-statuslight-subdued-content-color-default: var(--spectrum-gray-600);
40+
--spectrum-statuslight-semantic-neutral-color: var(--spectrum-neutral-visual-color);
41+
--spectrum-statuslight-semantic-negative-color: var(--spectrum-negative-visual-color);
42+
--spectrum-statuslight-semantic-info-color: var(--spectrum-informative-visual-color);
43+
--spectrum-statuslight-semantic-notice-color: var(--spectrum-notice-visual-color);
44+
--spectrum-statuslight-semantic-positive-color: var(--spectrum-positive-visual-color);
45+
46+
--spectrum-statuslight-nonsemantic-gray-color: var(--spectrum-gray-visual-color);
47+
--spectrum-statuslight-nonsemantic-red-color: var(--spectrum-red-visual-color);
48+
--spectrum-statuslight-nonsemantic-orange-color: var(--spectrum-orange-visual-color);
49+
--spectrum-statuslight-nonsemantic-yellow-color: var(--spectrum-yellow-visual-color);
50+
--spectrum-statuslight-nonsemantic-chartreuse-color: var(--spectrum-chartreuse-visual-color);
51+
--spectrum-statuslight-nonsemantic-celery-color: var(--spectrum-celery-visual-color);
52+
--spectrum-statuslight-nonsemantic-green-color: var(--spectrum-green-visual-color);
53+
--spectrum-statuslight-nonsemantic-seafoam-color: var(--spectrum-seafoam-visual-color);
54+
--spectrum-statuslight-nonsemantic-cyan-color: var(--spectrum-cyan-visual-color);
55+
--spectrum-statuslight-nonsemantic-blue-color: var(--spectrum-blue-visual-color);
56+
--spectrum-statuslight-nonsemantic-indigo-color: var(--spectrum-indigo-visual-color);
57+
--spectrum-statuslight-nonsemantic-purple-color: var(--spectrum-purple-visual-color);
58+
--spectrum-statuslight-nonsemantic-fuchsia-color: var(--spectrum-fuchsia-visual-color);
59+
--spectrum-statuslight-nonsemantic-magenta-color: var(--spectrum-magenta-visual-color);
60+
--spectrum-statuslight-nonsemantic-pink-color: var(--spectrum-pink-visual-color);
61+
--spectrum-statuslight-nonsemantic-turquoise-color: var(--spectrum-turquoise-visual-color);
62+
--spectrum-statuslight-nonsemantic-cinnamon-color: var(--spectrum-cinnamon-visual-color);
63+
--spectrum-statuslight-nonsemantic-brown-color: var(--spectrum-brown-visual-color);
64+
--spectrum-statuslight-nonsemantic-silver-color: var(--spectrum-silver-visual-color);
2565
}
2666

2767
.spectrum-StatusLight--sizeS {
@@ -30,7 +70,7 @@
3070

3171
--spectrum-statuslight-font-size: var(--spectrum-font-size-75);
3272

33-
--spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-75);
73+
--spectrum-statuslight-spacing-dot-to-label: var(--spectrum-status-light-text-to-visual-75);
3474
--spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-small);
3575
--spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-75);
3676
--spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-75);
@@ -42,7 +82,7 @@
4282

4383
--spectrum-statuslight-font-size: var(--spectrum-font-size-200);
4484

45-
--spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-200);
85+
--spectrum-statuslight-spacing-dot-to-label: var(--spectrum-status-light-text-to-visual-200);
4686
--spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-large);
4787
--spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-200);
4888
--spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-200);
@@ -54,7 +94,7 @@
5494

5595
--spectrum-statuslight-font-size: var(--spectrum-font-size-300);
5696

57-
--spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-300);
97+
--spectrum-statuslight-spacing-dot-to-label: var(--spectrum-status-light-text-to-visual-300);
5898
--spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-extra-large);
5999
--spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-300);
60100
--spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-300);
@@ -104,6 +144,8 @@
104144

105145
font-size: var(--mod-statuslight-font-size, var(--spectrum-statuslight-font-size));
106146
font-weight: var(--mod-statuslight-font-weight, var(--spectrum-statuslight-font-weight));
147+
font-family: var(--mod-statuslight-font-family, var(--spectrum-statuslight-font-family));
148+
font-style: var(--mod-statuslight-font-style, var(--spectrum-statuslight-font-style));
107149

108150
line-height: var(--mod-statuslight-line-height, var(--spectrum-statuslight-line-height));
109151

@@ -117,8 +159,6 @@
117159

118160
/* Dot */
119161
&::before {
120-
--spectrum-statuslight-spacing-computed-top-to-dot: calc(var(--mod-statuslight-spacing-top-to-dot, var(--spectrum-statuslight-spacing-top-to-dot)) - var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label)));
121-
122162
content: "";
123163
flex-grow: 0;
124164
flex-shrink: 0;
@@ -127,26 +167,21 @@
127167
block-size: var(--mod-statuslight-dot-size, var(--spectrum-statuslight-dot-size));
128168
border-radius: var(--mod-statuslight-corner-radius, var(--spectrum-statuslight-corner-radius));
129169

170+
--spectrum-statuslight-spacing-computed-top-to-dot: calc(var(--mod-statuslight-spacing-top-to-dot, var(--spectrum-statuslight-spacing-top-to-dot)) - var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label)));
130171
margin-block-start: var(--spectrum-statuslight-spacing-computed-top-to-dot);
131172
margin-inline-end: var(--mod-statuslight-spacing-dot-to-label, var(--spectrum-statuslight-spacing-dot-to-label));
132173
}
133174
}
134175

135176
/* Semantic Colors */
136177
.spectrum-StatusLight--neutral {
137-
font-style: italic;
138-
139178
color: var(--highcontrast-statuslight-subdued-content-color-default, var(--mod-statuslight-subdued-content-color-default, var(--spectrum-statuslight-subdued-content-color-default)));
140179

141180
&::before {
142181
background-color: var(--mod-statuslight-semantic-neutral-color, var(--spectrum-statuslight-semantic-neutral-color));
143182
}
144183
}
145184

146-
.spectrum-StatusLight--accent::before {
147-
background-color: var(--mod-statuslight-semantic-accent-color, var(--spectrum-statuslight-semantic-accent-color));
148-
}
149-
150185
.spectrum-StatusLight--info::before {
151186
background-color: var(--mod-statuslight-semantic-info-color, var(--spectrum-statuslight-semantic-info-color));
152187
}
@@ -220,13 +255,32 @@
220255
background-color: var(--mod-statuslight-nonsemantic-magenta-color, var(--spectrum-statuslight-nonsemantic-magenta-color));
221256
}
222257

258+
.spectrum-StatusLight--pink::before {
259+
background-color: var(--mod-statuslight-nonsemantic-pink-color, var(--spectrum-statuslight-nonsemantic-pink-color));
260+
}
261+
262+
.spectrum-StatusLight--turquoise::before {
263+
background-color: var(--mod-statuslight-nonsemantic-turquoise-color, var(--spectrum-statuslight-nonsemantic-turquoise-color));
264+
}
265+
266+
.spectrum-StatusLight--cinnamon::before {
267+
background-color: var(--mod-statuslight-nonsemantic-cinnamon-color, var(--spectrum-statuslight-nonsemantic-cinnamon-color));
268+
}
269+
270+
.spectrum-StatusLight--brown::before {
271+
background-color: var(--mod-statuslight-nonsemantic-brown-color, var(--spectrum-statuslight-nonsemantic-brown-color));
272+
}
273+
274+
.spectrum-StatusLight--silver::before {
275+
background-color: var(--mod-statuslight-nonsemantic-silver-color, var(--spectrum-statuslight-nonsemantic-silver-color));
276+
}
277+
223278
@media (forced-colors: active) {
224279
.spectrum-StatusLight {
280+
forced-color-adjust: none;
225281
--highcontrast-statuslight-content-color-default: CanvasText;
226282
--highcontrast-statuslight-subdued-content-color-default: CanvasText;
227283

228-
forced-color-adjust: none;
229-
230284
/* Dot */
231285
&::before {
232286
forced-color-adjust: none;

‎components/statuslight/stories/statuslight.stories.js

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,26 +33,30 @@ export default {
3333
category: "Component",
3434
},
3535
options: [
36-
"accent",
3736
"info",
3837
"neutral",
3938
"positive",
4039
"notice",
4140
"negative",
42-
"gray",
43-
"red",
44-
"orange",
4541
"yellow",
4642
"chartreuse",
4743
"celery",
48-
"green",
4944
"seafoam",
5045
"cyan",
51-
"blue",
5246
"indigo",
5347
"purple",
5448
"fuchsia",
5549
"magenta",
50+
"gray",
51+
"red",
52+
"orange",
53+
"green",
54+
"blue",
55+
"pink",
56+
"turquoise",
57+
"cinnamon",
58+
"brown",
59+
"silver",
5660
],
5761
control: "select",
5862
},
@@ -72,6 +76,7 @@ export default {
7276
packageJson,
7377
metadata,
7478
},
79+
decorators: [],
7580
};
7681

7782
/**

0 commit comments

Comments
 (0)