Skip to content

Commit 6ca8078

Browse files
aramos-adobearamos-adobe
committed
feat(checkbox): adding new s2 tokens
1 parent c297d1c commit 6ca8078

File tree

7 files changed

+145
-35
lines changed

7 files changed

+145
-35
lines changed

‎.changeset/six-donuts-march.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
"@spectrum-css/checkbox": major
3+
---
4+
5+
# Checkbox S2 Migration
6+
7+
Checkbox has some new control and color tokens.
8+
9+
## New tokens
10+
11+
`--spectrum-component-size-width-ratio-down`
12+
`--spectrum-checkbox-bottom-to-text(S,M,L,XL)`
13+
`--spectrum-checkbox-top-to-control (S,M,L,XL)`
14+
`--spectrum-accent-content-color-default`
15+
`--spectrum-accent-content-color-hover`
16+
`--spectrum-accent-content-color-down`
17+
`--spectrum-accent-content-color-key-focus`
18+
19+
## Modified tokens
20+
21+
`--spectrum-checkbox-checkmark-color`
22+
`--spectrum-checkbox-invalid-color-down`
23+
`--spectrum-checkbox-control-color-default`
24+
`--spectrum-checkbox-control-color-hover`
25+
`--spectrum-checkbox-control-color-down`
26+
`--spectrum-checkbox-control-color-focus`

‎components/checkbox/dist/metadata.json

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@
8282
"modifiers": [
8383
"--mod-checkbox-animation-duration",
8484
"--mod-checkbox-border-width",
85+
"--mod-checkbox-bottom-to-text",
8586
"--mod-checkbox-checkmark-color",
8687
"--mod-checkbox-content-color-default",
8788
"--mod-checkbox-content-color-disabled",
@@ -123,6 +124,7 @@
123124
"component": [
124125
"--spectrum-checkbox-animation-duration",
125126
"--spectrum-checkbox-border-width",
127+
"--spectrum-checkbox-bottom-to-text",
126128
"--spectrum-checkbox-checkmark-color",
127129
"--spectrum-checkbox-content-color-default",
128130
"--spectrum-checkbox-content-color-disabled",
@@ -162,21 +164,32 @@
162164
"--spectrum-checkbox-selected-border-width",
163165
"--spectrum-checkbox-spacing",
164166
"--spectrum-checkbox-text-to-control",
167+
"--spectrum-checkbox-top-to-control",
168+
"--spectrum-checkbox-top-to-control-extra-large",
169+
"--spectrum-checkbox-top-to-control-large",
170+
"--spectrum-checkbox-top-to-control-medium",
171+
"--spectrum-checkbox-top-to-control-small",
165172
"--spectrum-checkbox-top-to-text"
166173
],
167174
"global": [
168-
"--spectrum-accent-color-1000",
169-
"--spectrum-accent-color-1100",
170-
"--spectrum-accent-color-900",
175+
"--spectrum-accent-content-color-default",
176+
"--spectrum-accent-content-color-down",
177+
"--spectrum-accent-content-color-hover",
178+
"--spectrum-accent-content-color-key-focus",
171179
"--spectrum-animation-duration-100",
172180
"--spectrum-border-width-200",
173181
"--spectrum-cjk-line-height-100",
182+
"--spectrum-component-bottom-to-text-100",
183+
"--spectrum-component-bottom-to-text-200",
184+
"--spectrum-component-bottom-to-text-300",
185+
"--spectrum-component-bottom-to-text-75",
174186
"--spectrum-component-height-100",
175187
"--spectrum-component-height-200",
176188
"--spectrum-component-height-300",
177189
"--spectrum-component-height-75",
178190
"--spectrum-component-size-difference-down",
179191
"--spectrum-component-size-minimum-perspective-down",
192+
"--spectrum-component-size-width-ratio-down",
180193
"--spectrum-component-top-to-text-100",
181194
"--spectrum-component-top-to-text-200",
182195
"--spectrum-component-top-to-text-300",
@@ -193,18 +206,10 @@
193206
"--spectrum-font-size-200",
194207
"--spectrum-font-size-300",
195208
"--spectrum-font-size-75",
196-
"--spectrum-gray-50",
197-
"--spectrum-gray-600",
198-
"--spectrum-gray-700",
199-
"--spectrum-gray-800",
209+
"--spectrum-gray-25",
200210
"--spectrum-line-height-100",
201211
"--spectrum-negative-color-1000",
202-
"--spectrum-negative-color-1100",
203212
"--spectrum-negative-color-900",
204-
"--spectrum-neutral-background-color-selected-default",
205-
"--spectrum-neutral-background-color-selected-down",
206-
"--spectrum-neutral-background-color-selected-hover",
207-
"--spectrum-neutral-background-color-selected-key-focus",
208213
"--spectrum-neutral-content-color-default",
209214
"--spectrum-neutral-content-color-down",
210215
"--spectrum-neutral-content-color-hover",

‎components/checkbox/index.css

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -23,31 +23,31 @@
2323
--spectrum-checkbox-content-color-down: var(--spectrum-neutral-content-color-down);
2424
--spectrum-checkbox-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
2525

26-
--spectrum-checkbox-control-color-default: var(--spectrum-gray-600);
27-
--spectrum-checkbox-control-color-hover: var(--spectrum-gray-700);
28-
--spectrum-checkbox-control-color-down: var(--spectrum-gray-800);
29-
--spectrum-checkbox-control-color-focus: var(--spectrum-gray-700);
26+
--spectrum-checkbox-control-color-default: var(--spectrum-neutral-content-color-default);
27+
--spectrum-checkbox-control-color-hover: var(--spectrum-neutral-content-color-hover);
28+
--spectrum-checkbox-control-color-down: var(--spectrum-neutral-content-color-down);
29+
--spectrum-checkbox-control-color-focus: var(--spectrum-neutral-content-color-key-focus);
3030

3131
--spectrum-checkbox-focus-indicator-color: var(--spectrum-focus-indicator-color);
3232

3333
--spectrum-checkbox-content-color-disabled: var(--spectrum-disabled-content-color);
3434
--spectrum-checkbox-control-color-disabled: var(--spectrum-disabled-content-color);
35-
--spectrum-checkbox-checkmark-color: var(--spectrum-gray-50);
35+
--spectrum-checkbox-checkmark-color: var(--spectrum-gray-25);
3636

3737
--spectrum-checkbox-invalid-color-default: var(--spectrum-negative-color-900);
3838
--spectrum-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000);
39-
--spectrum-checkbox-invalid-color-down: var(--spectrum-negative-color-1100);
39+
--spectrum-checkbox-invalid-color-down: var(--spectrum-negative-color-1000);
4040
--spectrum-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000);
4141

42-
--spectrum-checkbox-emphasized-color-default: var(--spectrum-accent-color-900);
43-
--spectrum-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000);
44-
--spectrum-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100);
45-
--spectrum-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000);
42+
--spectrum-checkbox-emphasized-color-default: var(--spectrum-accent-content-color-default);
43+
--spectrum-checkbox-emphasized-color-hover: var(--spectrum-accent-content-color-hover);
44+
--spectrum-checkbox-emphasized-color-down: var(--spectrum-accent-content-color-down);
45+
--spectrum-checkbox-emphasized-color-focus: var(--spectrum-accent-content-color-key-focus);
4646

47-
--spectrum-checkbox-control-selected-color-default: var(--spectrum-neutral-background-color-selected-default);
48-
--spectrum-checkbox-control-selected-color-hover: var(--spectrum-neutral-background-color-selected-hover);
49-
--spectrum-checkbox-control-selected-color-down: var(--spectrum-neutral-background-color-selected-down);
50-
--spectrum-checkbox-control-selected-color-focus: var(--spectrum-neutral-background-color-selected-key-focus);
47+
--spectrum-checkbox-control-selected-color-default: var(--spectrum-neutral-content-color-default);
48+
--spectrum-checkbox-control-selected-color-hover: var(--spectrum-neutral-content-color-hover);
49+
--spectrum-checkbox-control-selected-color-down: var(--spectrum-neutral-content-color-down);
50+
--spectrum-checkbox-control-selected-color-focus: var(--spectrum-neutral-content-color-key-focus);
5151

5252
/* Font */
5353
--spectrum-checkbox-line-height: var(--spectrum-line-height-100);
@@ -69,7 +69,9 @@
6969
--spectrum-checkbox-font-size: var(--spectrum-font-size-100);
7070

7171
--spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-100);
72+
--spectrum-checkbox-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
7273
--spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-100);
74+
--spectrum-checkbox-top-to-control: var(--spectrum-checkbox-top-to-control-medium);
7375
}
7476

7577
.spectrum-Checkbox--sizeS {
@@ -81,7 +83,9 @@
8183
--spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-small);
8284

8385
--spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-75);
86+
--spectrum-checkbox-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
8487
--spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-75);
88+
--spectrum-checkbox-top-to-control: var(--spectrum-checkbox-top-to-control-small);
8589
}
8690

8791
.spectrum-Checkbox--sizeL {
@@ -93,7 +97,9 @@
9397
--spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-large);
9498

9599
--spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-200);
100+
--spectrum-checkbox-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
96101
--spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-200);
102+
--spectrum-checkbox-top-to-control: var(--spectrum-checkbox-top-to-control-large);
97103
}
98104

99105
.spectrum-Checkbox--sizeXL {
@@ -105,7 +111,9 @@
105111
--spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-extra-large);
106112

107113
--spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-300);
114+
--spectrum-checkbox-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
108115
--spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-300);
116+
--spectrum-checkbox-top-to-control: var(--spectrum-checkbox-top-to-control-extra-large);
109117
}
110118

111119
/* Default Unchecked */
@@ -152,7 +160,7 @@
152160

153161
&:not(.is-readOnly):active {
154162
.spectrum-Checkbox-input:not(:disabled) + .spectrum-Checkbox-box {
155-
transform: perspective(var(--spectrum-component-size-minimum-perspective-down)) translateZ(var(--spectrum-component-size-difference-down));
163+
transform: perspective(var(--spectrum-component-size-minimum-perspective-down)) translateZ(var(--spectrum-component-size-difference-down)) scale(var(--spectrum-component-size-width-ratio-down), var(--spectrum-component-size-width-ratio-down));
156164
}
157165
}
158166

@@ -353,6 +361,7 @@
353361
text-align: start;
354362
margin-inline-start: var(--mod-checkbox-text-to-control, var(--spectrum-checkbox-text-to-control));
355363
margin-block-start: var(--mod-checkbox-top-to-text, var(--spectrum-checkbox-top-to-text));
364+
margin-block-end: var(--mod-checkbox-bottom-to-text, var(--spectrum-checkbox-bottom-to-text));
356365

357366
font-size: var(--mod-checkbox-font-size, var(--spectrum-checkbox-font-size));
358367

@@ -404,6 +413,8 @@
404413

405414
cursor: pointer;
406415

416+
margin-block-start: var(--spectrum-checkbox-top-to-control);
417+
407418
&:disabled {
408419
cursor: default;
409420
}

‎components/progresscircle/dist/metadata.json

Lines changed: 70 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,78 @@
33
"selectors": [
44
".spectrum-ProgressCircle",
55
".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fill",
6+
".spectrum-ProgressCircle--indeterminate-fill-submask-2",
67
".spectrum-ProgressCircle--sizeL",
78
".spectrum-ProgressCircle--sizeS",
89
".spectrum-ProgressCircle-fill",
910
".spectrum-ProgressCircle-track",
11+
".spectrum-ProgressCircle.spectrum-ProgressCircle--large",
12+
".spectrum-ProgressCircle.spectrum-ProgressCircle--medium",
13+
".spectrum-ProgressCircle.spectrum-ProgressCircle--small",
1014
".spectrum-ProgressCircle.spectrum-ProgressCircle--staticBlack",
1115
".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite",
1216
".spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) .spectrum-innerCircle",
1317
".spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) .spectrum-outerCircle",
1418
"0%",
19+
"1.69%",
20+
"10.17%",
21+
"11.86%",
22+
"13.56%",
23+
"15.25%",
24+
"16.95%",
25+
"18.64%",
26+
"20.34%",
27+
"22.03%",
28+
"23.73%",
29+
"25.42%",
30+
"27.12%",
31+
"28.81%",
32+
"3.39%",
1533
"30%",
34+
"30.51%",
35+
"32.2%",
36+
"33.9%",
37+
"35.59%",
38+
"37.29%",
39+
"38.98%",
40+
"40.68%",
41+
"42.37%",
42+
"44.07%",
43+
"45.76%",
44+
"47.46%",
45+
"49.15%",
46+
"5.08%",
47+
"50.85%",
48+
"52.54%",
49+
"54.24%",
50+
"55.93%",
51+
"57.63%",
52+
"59.32%",
53+
"6.78%",
54+
"61.02%",
55+
"62.71%",
56+
"64.41%",
57+
"66.1%",
58+
"67.8%",
59+
"69.49%",
60+
"71.19%",
61+
"72.88%",
62+
"74.58%",
63+
"76.27%",
64+
"77.97%",
65+
"79.66%",
66+
"8.47%",
67+
"81.36%",
68+
"83.05%",
69+
"84.75%",
70+
"86.44%",
71+
"88.14%",
72+
"89.83%",
73+
"91.53%",
74+
"93.22%",
75+
"94.92%",
76+
"96.61%",
77+
"98.31%",
1678
"to"
1779
],
1880
"modifiers": [
@@ -24,6 +86,7 @@
2486
],
2587
"component": [
2688
"--spectrum-progress-circle-fill-border-color",
89+
"--spectrum-progress-circle-fill-border-color-over-background",
2790
"--spectrum-progress-circle-size",
2891
"--spectrum-progress-circle-size-large",
2992
"--spectrum-progress-circle-size-medium",
@@ -32,15 +95,20 @@
3295
"--spectrum-progress-circle-thickness-large",
3396
"--spectrum-progress-circle-thickness-medium",
3497
"--spectrum-progress-circle-thickness-small",
35-
"--spectrum-progress-circle-track-border-color"
98+
"--spectrum-progress-circle-track-border-color",
99+
"--spectrum-progress-circle-track-border-color-over-background",
100+
"--spectrum-progress-circle-track-border-style"
36101
],
37102
"global": [
38103
"--spectrum-accent-content-color-default",
104+
"--spectrum-gray-200",
39105
"--spectrum-static-black-track-color",
40106
"--spectrum-static-black-track-indicator-color",
41107
"--spectrum-static-white-track-color",
42108
"--spectrum-static-white-track-indicator-color",
43-
"--spectrum-track-color"
109+
"--spectrum-track-color",
110+
"--spectrum-transparent-white-300",
111+
"--spectrum-transparent-white-900"
44112
],
45113
"passthroughs": [],
46114
"high-contrast": [

‎tokens/dist/css/global-vars.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1047,8 +1047,8 @@
10471047
--spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif;
10481048
--spectrum-cjk-font: var(--spectrum-code-font-family-stack);
10491049
--spectrum-examples-gradient: linear-gradient(45deg, var(--spectrum-magenta-1500), var(--spectrum-blue-1500));
1050-
--spectrum-examples-gradient-static-black: linear-gradient(45deg, rgb(255, 241, 246), rgb(238, 245, 255));
1051-
--spectrum-examples-gradient-static-white: linear-gradient(45deg, rgb(64, 0, 22), rgb(14, 24, 67));
1050+
--spectrum-examples-gradient-static-black: linear-gradient(45deg, rgb(255 241 246), rgb(238 245 255));
1051+
--spectrum-examples-gradient-static-white: linear-gradient(45deg, rgb(64 0 22), rgb(14 24 67));
10521052

10531053
--spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white);
10541054
--spectrum-corner-radius-1000: 9999px;

‎tokens/dist/css/index.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1871,8 +1871,8 @@
18711871
--spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif;
18721872
--spectrum-cjk-font: var(--spectrum-code-font-family-stack);
18731873
--spectrum-examples-gradient: linear-gradient(45deg, var(--spectrum-magenta-1500), var(--spectrum-blue-1500));
1874-
--spectrum-examples-gradient-static-black: linear-gradient(45deg, rgb(255, 241, 246), rgb(238, 245, 255));
1875-
--spectrum-examples-gradient-static-white: linear-gradient(45deg, rgb(64, 0, 22), rgb(14, 24, 67));
1874+
--spectrum-examples-gradient-static-black: linear-gradient(45deg, rgb(255 241 246), rgb(238 245 255));
1875+
--spectrum-examples-gradient-static-white: linear-gradient(45deg, rgb(64 0 22), rgb(14 24 67));
18761876

18771877
--spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white);
18781878
--spectrum-corner-radius-1000: 9999px;

‎tokens/dist/index.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1871,8 +1871,8 @@
18711871
--spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif;
18721872
--spectrum-cjk-font: var(--spectrum-code-font-family-stack);
18731873
--spectrum-examples-gradient: linear-gradient(45deg, var(--spectrum-magenta-1500), var(--spectrum-blue-1500));
1874-
--spectrum-examples-gradient-static-black: linear-gradient(45deg, rgb(255, 241, 246), rgb(238, 245, 255));
1875-
--spectrum-examples-gradient-static-white: linear-gradient(45deg, rgb(64, 0, 22), rgb(14, 24, 67));
1874+
--spectrum-examples-gradient-static-black: linear-gradient(45deg, rgb(255 241 246), rgb(238 245 255));
1875+
--spectrum-examples-gradient-static-white: linear-gradient(45deg, rgb(64 0 22), rgb(14 24 67));
18761876

18771877
--spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white);
18781878
--spectrum-corner-radius-1000: 9999px;

0 commit comments

Comments
 (0)