Skip to content

Commit d630a5c

Browse files
5t3ph5t3ph
authored
Feature: Update component styles with token(), new guidelines (#5942)
1 parent f73239a commit d630a5c

5 files changed

Lines changed: 274 additions & 413 deletions

File tree

‎2nd-gen/packages/swc/components/badge/badge.css‎

Lines changed: 61 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -150,25 +150,25 @@
150150

151151
/* NOTE: `accent` is the default color */
152152

153-
.spectrum-Badge--neutral {
153+
:host([variant='neutral']) {
154154
--swc-badge-background-color: token(
155155
'neutral-subdued-background-color-default'
156156
);
157157
}
158158

159-
.spectrum-Badge--informative {
159+
:host([variant='informative']) {
160160
--swc-badge-background-color: token('informative-background-color-default');
161161
}
162162

163-
.spectrum-Badge--negative {
163+
:host([variant='negative']) {
164164
--swc-badge-background-color: token('negative-background-color-default');
165165
}
166166

167-
.spectrum-Badge--positive {
167+
:host([variant='positive']) {
168168
--swc-badge-background-color: token('positive-background-color-default');
169169
}
170170

171-
.spectrum-Badge--notice {
171+
:host([variant='notice']) {
172172
--swc-badge-background-color: token('notice-background-color-default');
173173
}
174174

@@ -248,45 +248,47 @@
248248
--swc-badge-background-color: token('silver-background-color-default');
249249
}
250250

251-
.spectrum-Badge--subtle {
251+
:host([subtle]) {
252252
--swc-badge-label-icon-color: token('gray-1000');
253+
}
253254

254-
&.spectrum-Badge--neutral {
255-
--swc-badge-background-color: token(
256-
'neutral-subtle-background-color-default'
257-
);
258-
}
255+
:host([subtle][variant='neutral']) {
256+
--swc-badge-background-color: token(
257+
'neutral-subtle-background-color-default'
258+
);
259+
}
259260

260-
&.spectrum-Badge--accent {
261-
--swc-badge-background-color: token(
262-
'accent-subtle-background-color-default'
263-
);
264-
}
261+
:host([subtle][variant='accent']) {
262+
--swc-badge-background-color: token(
263+
'accent-subtle-background-color-default'
264+
);
265+
}
265266

266-
&.spectrum-Badge--informative {
267-
--swc-badge-background-color: token(
268-
'informative-subtle-background-color-default'
269-
);
270-
}
267+
:host([subtle][variant='informative']) {
268+
--swc-badge-background-color: token(
269+
'informative-subtle-background-color-default'
270+
);
271+
}
271272

272-
&.spectrum-Badge--negative {
273-
--swc-badge-background-color: token(
274-
'negative-subtle-background-color-default'
275-
);
276-
}
273+
:host([subtle][variant='negative']) {
274+
--swc-badge-background-color: token(
275+
'negative-subtle-background-color-default'
276+
);
277+
}
277278

278-
&.spectrum-Badge--positive {
279-
--swc-badge-background-color: token(
280-
'positive-subtle-background-color-default'
281-
);
282-
}
279+
:host([subtle][variant='positive']) {
280+
--swc-badge-background-color: token(
281+
'positive-subtle-background-color-default'
282+
);
283+
}
283284

284-
&.spectrum-Badge--notice {
285-
--swc-badge-background-color: token(
286-
'notice-subtle-background-color-default'
287-
);
288-
}
285+
:host([subtle][variant='notice']) {
286+
--swc-badge-background-color: token(
287+
'notice-subtle-background-color-default'
288+
);
289+
}
289290

291+
.spectrum-Badge--subtle {
290292
&.spectrum-Badge--gray {
291293
--swc-badge-background-color: token(
292294
'gray-subtle-background-color-default'
@@ -402,14 +404,12 @@
402404
}
403405
}
404406

405-
.spectrum-Badge--outline:is(
406-
.spectrum-Badge--neutral,
407-
.spectrum-Badge--accent,
408-
.spectrum-Badge--informative,
409-
.spectrum-Badge--negative,
410-
.spectrum-Badge--positive,
411-
.spectrum-Badge--notice
412-
) {
407+
:host([outline][variant='neutral']),
408+
:host([outline][variant='accent']),
409+
:host([outline][variant='informative']),
410+
:host([outline][variant='negative']),
411+
:host([outline][variant='positive']),
412+
:host([outline][variant='notice']) {
413413
--swc-badge-background-color: var(
414414
--swc-badge-outline-background-color,
415415
token('background-layer-2-color')
@@ -420,28 +420,26 @@
420420
);
421421
}
422422

423-
.spectrum-Badge--outline {
424-
&.spectrum-Badge--neutral {
425-
--swc-badge-border-color: token('neutral-visual-color');
426-
}
423+
:host([outline][variant='neutral']) {
424+
--swc-badge-border-color: token('neutral-visual-color');
425+
}
427426

428-
&.spectrum-Badge--accent {
429-
--swc-badge-border-color: token('accent-visual-color');
430-
}
427+
:host([outline][variant='accent']) {
428+
--swc-badge-border-color: token('accent-visual-color');
429+
}
431430

432-
&.spectrum-Badge--informative {
433-
--swc-badge-border-color: token('informative-visual-color');
434-
}
431+
:host([outline][variant='informative']) {
432+
--swc-badge-border-color: token('informative-visual-color');
433+
}
435434

436-
&.spectrum-Badge--negative {
437-
--swc-badge-border-color: token('negative-visual-color');
438-
}
435+
:host([outline][variant='negative']) {
436+
--swc-badge-border-color: token('negative-visual-color');
437+
}
439438

440-
&.spectrum-Badge--positive {
441-
--swc-badge-border-color: token('positive-visual-color');
442-
}
439+
:host([outline][variant='positive']) {
440+
--swc-badge-border-color: token('positive-visual-color');
441+
}
443442

444-
&.spectrum-Badge--notice {
445-
--swc-badge-border-color: token('notice-visual-color');
446-
}
443+
:host([outline][variant='notice']) {
444+
--swc-badge-border-color: token('notice-visual-color');
447445
}

‎2nd-gen/packages/swc/components/divider/divider.css‎

Lines changed: 33 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -15,74 +15,60 @@
1515
}
1616

1717
.spectrum-Divider {
18-
--spectrum-divider-background-color: var(--spectrum-gray-200);
19-
--spectrum-divider-thickness: var(--spectrum-divider-thickness-medium);
20-
--spectrum-divider-inline-minimum-size: var(
21-
--spectrum-divider-horizontal-minimum-width
18+
--_swc-divider-thickness: var(
19+
--swc-divider-thickness,
20+
token('divider-thickness-medium')
2221
);
23-
--spectrum-divider-block-minimum-size: var(
24-
--spectrum-divider-vertical-minimum-height
25-
);
26-
}
2722

28-
.spectrum-Divider--sizeS {
29-
--spectrum-divider-thickness: var(--spectrum-divider-thickness-small);
23+
/* Show the overflow for hr in Edge and IE. */
24+
overflow: visible;
25+
border: none;
26+
border-width: var(--_swc-divider-thickness);
27+
border-radius: var(--_swc-divider-thickness);
28+
background-color: var(--swc-divider-background-color, token('gray-200'));
29+
block-size: var(--_swc-divider-thickness);
30+
inline-size: 100%;
3031
}
3132

32-
.spectrum-Divider--sizeL {
33-
--spectrum-divider-thickness: var(--spectrum-divider-thickness-large);
34-
--spectrum-divider-background-color: var(--spectrum-gray-800);
33+
.spectrum-Divider:not(.spectrum-Divider--vertical) {
34+
min-inline-size: token('divider-horizontal-minimum-width');
3535
}
3636

37-
/* static white variant colors */
38-
.spectrum-Divider--staticWhite {
39-
--spectrum-divider-background-color: var(--spectrum-transparent-white-200);
37+
.spectrum-Divider--vertical {
38+
inline-size: var(--_swc-divider-thickness);
39+
min-block-size: token('divider-vertical-minimum-height');
40+
margin-block: 0;
41+
block-size: 100%;
42+
align-self: flex-start;
4043
}
4144

42-
.spectrum-Divider--staticWhite.spectrum-Divider--sizeL {
43-
--spectrum-divider-background-color: var(--spectrum-transparent-white-800);
45+
:host([size='s']) {
46+
--swc-divider-thickness: token('divider-thickness-small');
4447
}
4548

46-
/* static black variant colors */
47-
.spectrum-Divider--staticBlack {
48-
--spectrum-divider-background-color: var(--spectrum-transparent-black-200);
49+
:host([size='l']) {
50+
--swc-divider-thickness: token('divider-thickness-large');
51+
--swc-divider-background-color: token('gray-800');
4952
}
5053

51-
.spectrum-Divider--staticBlack.spectrum-Divider--sizeL {
52-
--spectrum-divider-background-color: var(--spectrum-transparent-black-800);
54+
.spectrum-Divider--staticWhite {
55+
--swc-divider-background-color: token('transparent-white-200');
5356
}
5457

55-
.spectrum-Divider {
56-
block-size: var(--spectrum-divider-thickness);
57-
inline-size: 100%;
58-
59-
/* Show the overflow for hr in Edge and IE. */
60-
overflow: visible;
61-
border: none;
62-
border-width: var(--spectrum-divider-thickness);
63-
border-radius: var(--spectrum-divider-thickness);
64-
background-color: var(
65-
--highcontrast-divider-background-color,
66-
var(--spectrum-divider-background-color)
67-
);
58+
.spectrum-Divider--staticWhite:where(.spectrum-Divider--sizeL) {
59+
--swc-divider-background-color: token('transparent-white-800');
6860
}
6961

70-
.spectrum-Divider:not(.spectrum-Divider--vertical) {
71-
min-inline-size: var(--spectrum-divider-inline-minimum-size);
62+
.spectrum-Divider--staticBlack {
63+
--swc-divider-background-color: token('transparent-black-200');
7264
}
7365

74-
/* vertical dividers */
75-
.spectrum-Divider--vertical {
76-
inline-size: var(--spectrum-divider-thickness);
77-
min-block-size: var(--spectrum-divider-block-minimum-size);
78-
margin-block: 0;
79-
block-size: 100%;
80-
align-self: flex-start;
66+
.spectrum-Divider--staticBlack:where(.spectrum-Divider--sizeL) {
67+
--swc-divider-background-color: token('transparent-black-800');
8168
}
8269

83-
/* windows high contrast mode */
8470
@media (forced-colors: active) {
8571
.spectrum-Divider {
86-
--highcontrast-divider-background-color: CanvasText;
72+
--swc-divider-background-color: CanvasText;
8773
}
8874
}

0 commit comments

Comments
 (0)