Skip to content

Commit de78ff4

Browse files
castastrophecastastrophe
committed
feat(colorarea): remove modifiers from the API [SWC-1264]
1 parent 749472d commit de78ff4

File tree

10 files changed

+68
-141
lines changed

10 files changed

+68
-141
lines changed

‎.changeset/weak-colts-divide.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"@spectrum-css/avatar": major
77
"@spectrum-css/badge": major
88
"@spectrum-css/breadcrumb": major
9+
"@spectrum-css/colorarea": major
910
"@spectrum-css/divider": major
1011
"@spectrum-css/miller": major
1112
"@spectrum-css/page": major

‎components/colorarea/dist/metadata.json‎

Lines changed: 5 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -8,45 +8,19 @@
88
".spectrum-ColorArea-slider",
99
".spectrum-ColorArea.is-disabled",
1010
".spectrum-ColorArea.is-disabled .spectrum-ColorArea-gradient",
11-
".spectrum-ColorArea.is-focused",
12-
".spectrum-ColorHandle-color"
13-
],
14-
"modifiers": [
15-
"--mod-colorarea-border-color",
16-
"--mod-colorarea-border-radius",
17-
"--mod-colorarea-border-width",
18-
"--mod-colorarea-disabled-background-color",
19-
"--mod-colorarea-height",
20-
"--mod-colorarea-min-height",
21-
"--mod-colorarea-min-width",
22-
"--mod-colorarea-width"
11+
".spectrum-ColorArea.is-focused"
2312
],
13+
"modifiers": [],
2414
"component": [
2515
"--spectrum-color-area-border-opacity",
2616
"--spectrum-color-area-border-rounding",
2717
"--spectrum-color-area-border-width",
2818
"--spectrum-color-area-height",
2919
"--spectrum-color-area-minimum-height",
3020
"--spectrum-color-area-minimum-width",
31-
"--spectrum-color-area-width",
32-
"--spectrum-colorarea-border-color",
33-
"--spectrum-colorarea-border-color-rgb",
34-
"--spectrum-colorarea-border-radius",
35-
"--spectrum-colorarea-border-width",
36-
"--spectrum-colorarea-disabled-background-color",
37-
"--spectrum-colorarea-height",
38-
"--spectrum-colorarea-min-height",
39-
"--spectrum-colorarea-min-width",
40-
"--spectrum-colorarea-width"
41-
],
42-
"global": [
43-
"--spectrum-disabled-background-color",
44-
"--spectrum-gray-1000-rgb"
21+
"--spectrum-color-area-width"
4522
],
23+
"global": ["--spectrum-disabled-background-color", "--spectrum-gray-1000"],
4624
"passthroughs": [],
47-
"high-contrast": [
48-
"--highcontrast-colorarea-border-color",
49-
"--highcontrast-colorarea-border-color-disabled",
50-
"--highcontrast-colorarea-fill-color-disabled"
51-
]
25+
"high-contrast": []
5226
}

‎components/colorarea/index.css‎

Lines changed: 13 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -12,28 +12,16 @@
1212
*/
1313

1414
.spectrum-ColorArea {
15-
--spectrum-colorarea-border-radius: var(--spectrum-color-area-border-rounding);
16-
17-
/* @TODO: leveraging the rgb token in this case to achieve the desired border color implementation as rgb + opacity are required by the `rgba` function. */
18-
--spectrum-colorarea-border-color-rgb: var(--spectrum-gray-1000-rgb);
19-
--spectrum-colorarea-border-color: rgb(var(--spectrum-colorarea-border-color-rgb), var(--spectrum-color-area-border-opacity));
20-
--spectrum-colorarea-border-width: var(--spectrum-color-area-border-width);
21-
--spectrum-colorarea-disabled-background-color: var(--spectrum-disabled-background-color);
22-
--spectrum-colorarea-height: var(--spectrum-color-area-height);
23-
--spectrum-colorarea-width: var(--spectrum-color-area-width);
24-
--spectrum-colorarea-min-width: var(--spectrum-color-area-minimum-width);
25-
--spectrum-colorarea-min-height: var(--spectrum-color-area-minimum-height);
26-
2715
position: relative;
2816
display: inline-block;
2917
cursor: default;
30-
min-inline-size: var(--mod-colorarea-min-width, var(--spectrum-colorarea-min-width));
31-
min-block-size: var(--mod-colorarea-min-height, var(--spectrum-colorarea-min-height));
32-
inline-size: var(--mod-colorarea-width, var(--spectrum-colorarea-width));
33-
block-size: var(--mod-colorarea-height, var(--spectrum-colorarea-height));
18+
min-inline-size: var(--spectrum-color-area-minimum-width);
19+
min-block-size: var(--spectrum-color-area-minimum-height);
20+
inline-size: var(--spectrum-color-area-width);
21+
block-size: var(--spectrum-color-area-height);
3422
box-sizing: border-box;
35-
border-radius: var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius));
36-
border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color, var(--mod-colorarea-border-color, var(--spectrum-colorarea-border-color)));
23+
border-radius: var(--spectrum-color-area-border-rounding);
24+
border: var(--spectrum-color-area-border-width) solid color-mix(in sRGB, var(--spectrum-gray-1000) calc(var(--spectrum-color-area-border-opacity) * 100%), transparent);
3725

3826
touch-action: none; /* Disable touch scrolling on touch devices to allow for color picking */
3927
user-select: none;
@@ -44,8 +32,8 @@
4432

4533
&.is-disabled {
4634
pointer-events: none;
47-
background: var(--highcontrast-colorarea-fill-color-disabled, var(--mod-colorarea-disabled-background-color, var(--spectrum-colorarea-disabled-background-color)));
48-
border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color-disabled);
35+
background: var(--spectrum-disabled-background-color);
36+
border-color: transparent;
4937

5038
.spectrum-ColorArea-gradient {
5139
display: none;
@@ -54,7 +42,7 @@
5442
}
5543

5644
.spectrum-ColorArea-handle {
57-
transform: translate(calc(var(--mod-colorarea-width, var(--spectrum-colorarea-width)) - var(--spectrum-colorarea-border-width)), 0);
45+
transform: translate(calc(var(--spectrum-color-area-width) - var(--spectrum-color-area-border-width)), 0);
5846
inset-block-start: 0;
5947

6048
&:dir(rtl) {
@@ -67,7 +55,7 @@
6755
block-size: 100%;
6856

6957
/* calc used here to properly calculate the `border-radius` for the gradient such that it aligns with the `border-radius` of the enclosing border */
70-
border-radius: calc(var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius)) - var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)));
58+
border-radius: calc(var(--spectrum-color-area-border-rounding) - var(--spectrum-color-area-border-width));
7159
}
7260

7361
.spectrum-ColorArea-slider {
@@ -84,18 +72,11 @@
8472

8573
/* Windows High Contrast Mode */
8674
@media (forced-colors: active) {
87-
.spectrum-ColorArea {
88-
--highcontrast-colorarea-border-color-disabled: GrayText;
89-
--highcontrast-colorarea-border-color: Canvas;
90-
--highcontrast-colorarea-fill-color-disabled: Canvas;
91-
92-
&.is-disabled {
93-
forced-color-adjust: none;
94-
}
75+
.spectrum-ColorArea.is-disabled {
76+
background: Canvas;
9577
}
9678

97-
.spectrum-ColorArea-gradient,
98-
.spectrum-ColorHandle-color {
79+
.spectrum-ColorArea-gradient {
9980
forced-color-adjust: none;
10081
}
10182
}

‎components/colorarea/stories/template.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ export const Template = ({
2626
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
2727
})}
2828
style=${styleMap({
29-
"--mod-colorarea-height": customHeight,
30-
"--mod-colorarea-width": customWidth,
29+
"--spectrum-color-area-height": customHeight,
30+
"--spectrum-color-area-width": customWidth,
3131
...customStyles,
3232
})}
3333
@focusin=${function() {
@@ -49,7 +49,7 @@ export const Template = ({
4949
customClasses: [`${rootClass}-handle`],
5050
customStyles: {
5151
"--spectrum-picked-color": selectedColor,
52-
"transform": customWidth ? "translate(var(--mod-colorarea-width), 0)" : undefined,
52+
"transform": customWidth ? "translate(var(--spectrum-color-area-width), 0)" : undefined,
5353
},
5454
}, context)}
5555
<input

‎components/colorhandle/dist/metadata.json‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,5 @@
4747
"--spectrum-white"
4848
],
4949
"passthroughs": ["--mod-opacity-checkerboard-position"],
50-
"high-contrast": [
51-
"--highcontrast-colorhandle-border-color-disabled",
52-
"--highcontrast-colorhandle-fill-color-disabled"
53-
]
50+
"high-contrast": []
5451
}

‎components/colorhandle/index.css‎

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

14-
@media (forced-colors: active) {
15-
.spectrum-ColorHandle {
16-
forced-color-adjust: none;
17-
18-
&.is-disabled {
19-
--highcontrast-colorhandle-border-color-disabled: GrayText;
20-
--highcontrast-colorhandle-fill-color-disabled: Canvas;
21-
}
22-
}
23-
}
24-
2514
.spectrum-ColorHandle {
2615
/* outer border as box shadow on the colorhandle */
2716
/* TODO replace --spectrum-black-rgb with color-handle-outer-border-color when supported by RGBA */
@@ -82,8 +71,8 @@
8271

8372
&.is-disabled {
8473
pointer-events: none;
85-
border-color: var(--highcontrast-colorhandle-border-color-disabled, var(--mod-colorhandle-border-color-disabled, var(--spectrum-disabled-content-color)));
86-
background: var(--highcontrast-colorhandle-fill-color-disabled, var(--mod-colorhandle-fill-color-disabled, var(--spectrum-disabled-background-color)));
74+
border-color: var(--mod-colorhandle-border-color-disabled, var(--spectrum-disabled-content-color));
75+
background: var(--mod-colorhandle-fill-color-disabled, var(--spectrum-disabled-background-color));
8776
box-shadow: none;
8877

8978
.spectrum-ColorHandle-inner {
@@ -99,3 +88,14 @@
9988
box-shadow: inset 0 0 0 var(--mod-colorhandle-inner-border-width, var(--spectrum-color-handle-inner-border-width)) var(--mod-colorhandle-inner-border-color, var(--spectrum-colorhandle-inner-border-color));
10089
background-color: var(--spectrum-picked-color);
10190
}
91+
92+
@media (forced-colors: active) {
93+
.spectrum-ColorHandle {
94+
forced-color-adjust: none;
95+
96+
&.is-disabled {
97+
border-color: GrayText;
98+
background: Canvas;
99+
}
100+
}
101+
}

‎components/colorwheel/dist/metadata.json‎

Lines changed: 3 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -19,31 +19,16 @@
1919
".spectrum-ColorWheel:after",
2020
".spectrum-ColorWheel:before"
2121
],
22-
"modifiers": [
23-
"--mod-colorwheel-block-size",
24-
"--mod-colorwheel-border-color",
25-
"--mod-colorwheel-colorarea-container-size",
26-
"--mod-colorwheel-fill-color-disabled",
27-
"--mod-colorwheel-inline-size",
28-
"--mod-colorwheel-min-inline-size",
29-
"--mod-colorwheel-path",
30-
"--mod-colorwheel-track-width"
31-
],
22+
"modifiers": ["--mod-colorwheel-track-width"],
3223
"component": [
3324
"--spectrum-color-wheel-border-opacity",
3425
"--spectrum-color-wheel-minimum-width",
3526
"--spectrum-color-wheel-width",
36-
"--spectrum-colorwheel-block-size",
3727
"--spectrum-colorwheel-border-color",
3828
"--spectrum-colorwheel-border-color-rgb",
3929
"--spectrum-colorwheel-border-opacity",
40-
"--spectrum-colorwheel-border-width",
4130
"--spectrum-colorwheel-colorarea-container-size",
42-
"--spectrum-colorwheel-fill-color-disabled",
43-
"--spectrum-colorwheel-inline-size",
44-
"--spectrum-colorwheel-min-inline-size",
45-
"--spectrum-colorwheel-path",
46-
"--spectrum-colorwheel-track-width"
31+
"--spectrum-colorwheel-path"
4732
],
4833
"global": [
4934
"--spectrum-border-width-100",
@@ -52,8 +37,5 @@
5237
"--spectrum-gray-1000-rgb"
5338
],
5439
"passthroughs": [],
55-
"high-contrast": [
56-
"--highcontrast-colorwheel-border-color-disabled",
57-
"--highcontrast-colorwheel-fill-color-disabled"
58-
]
40+
"high-contrast": []
5941
}

‎components/colorwheel/index.css‎

Lines changed: 26 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -12,31 +12,22 @@
1212
*/
1313

1414
.spectrum-ColorWheel {
15-
--spectrum-colorwheel-inline-size: var(--spectrum-color-wheel-width);
16-
--spectrum-colorwheel-block-size: var(--spectrum-color-wheel-width);
17-
--spectrum-colorwheel-min-inline-size: var(--spectrum-color-wheel-minimum-width);
18-
1915
/* @TODO: leveraging the rgb token in this case to achieve the desired border color implementation as rgb + opacity are required by the `rgba` function. */
2016
--spectrum-colorwheel-border-color-rgb: var(--spectrum-gray-1000-rgb);
2117

2218
--spectrum-colorwheel-border-opacity: var(--spectrum-color-wheel-border-opacity);
2319
--spectrum-colorwheel-border-color: rgb(var(--spectrum-colorwheel-border-color-rgb), var(--spectrum-colorwheel-border-opacity));
2420

25-
--spectrum-colorwheel-border-width: var(--spectrum-border-width-100);
26-
--spectrum-colorwheel-track-width: var(--spectrum-color-control-track-width);
27-
28-
--spectrum-colorwheel-fill-color-disabled: var(--spectrum-disabled-background-color);
29-
3021
/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used with JS in calculating the clip-path paths and colorarea-container-size */
31-
--_track-width: var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width));
22+
--_track-width: var(--mod-colorwheel-track-width, var(--spectrum-color-control-track-width));
3223
/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used with JS in calculating the clip-path paths and colorarea-container-size */
33-
--_border-width: var(--spectrum-colorwheel-border-width);
24+
--_border-width: var(--spectrum-border-width-100);
3425

3526
position: relative;
3627
display: block;
37-
min-inline-size: var(--mod-colorwheel-min-inline-size, var(--spectrum-colorwheel-min-inline-size));
38-
inline-size: var(--mod-colorwheel-inline-size, var(--spectrum-colorwheel-inline-size));
39-
block-size: var(--mod-colorwheel-block-size, var(--spectrum-colorwheel-block-size));
28+
min-inline-size: var(--spectrum-color-wheel-minimum-width);
29+
inline-size: var(--spectrum-color-wheel-width);
30+
block-size: var(--spectrum-color-wheel-width);
4031
touch-action: none; /* Disable touch scrolling on touch devices to allow for color picking */
4132
user-select: none;
4233
cursor: default;
@@ -47,14 +38,14 @@
4738
* (to account for the inset width of the exterior border) from the component's width.
4839
*/
4940
&::before {
50-
inline-size: calc(var(--mod-colorwheel-inline-size, var(--spectrum-colorwheel-inline-size)) - calc(4 * var(--spectrum-colorwheel-border-width)));
51-
block-size: calc(var(--mod-colorwheel-inline-size, var(--spectrum-colorwheel-inline-size)) - calc(4 * var(--spectrum-colorwheel-border-width)));
52-
inset: var(--spectrum-colorwheel-border-width);
41+
inline-size: calc(var(--spectrum-color-wheel-width) - calc(4 * var(--spectrum-border-width-100)));
42+
block-size: calc(var(--spectrum-color-wheel-width) - calc(4 * var(--spectrum-border-width-100)));
43+
inset: var(--spectrum-border-width-100);
5344
content: "";
5445
position: absolute;
55-
border-width: var(--spectrum-colorwheel-border-width);
46+
border-width: var(--spectrum-border-width-100);
5647
border-style: solid;
57-
border-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color));
48+
border-color: var(--spectrum-colorwheel-border-color);
5849
border-radius: 100%;
5950
z-index: 1;
6051
}
@@ -65,12 +56,12 @@
6556
* track width (to account for the inset width of the interior border)
6657
*/
6758
&::after {
68-
inset: calc(var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width)) - (calc(2 * var(--spectrum-colorwheel-border-width))));
59+
inset: calc(var(--spectrum-color-control-track-width) - (calc(2 * var(--spectrum-border-width-100))));
6960
content: "";
7061
position: absolute;
71-
border-width: var(--spectrum-colorwheel-border-width);
62+
border-width: var(--spectrum-border-width-100);
7263
border-style: solid;
73-
border-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color));
64+
border-color: var(--spectrum-colorwheel-border-color);
7465
border-radius: 100%;
7566
z-index: 1;
7667
}
@@ -85,7 +76,7 @@
8576
&::before,
8677
&::after,
8778
.spectrum-ColorWheel-inner::before {
88-
border-color: var(--highcontrast-colorwheel-border-color-disabled, transparent);
79+
border-color: transparent;
8980
}
9081
}
9182

@@ -102,8 +93,8 @@
10293
inset-inline-end: 0;
10394
inset-block-start: 0;
10495
inset-block-end: 0;
105-
inline-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size));
106-
block-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size));
96+
inline-size: var(--spectrum-colorwheel-colorarea-container-size);
97+
block-size: var(--spectrum-colorwheel-colorarea-container-size);
10798
margin: auto;
10899
}
109100

@@ -128,7 +119,7 @@
128119
}
129120

130121
.spectrum-ColorWheel-handle {
131-
transform: translate(calc(var(--mod-colorwheel-inline-size, var(--spectrum-colorwheel-inline-size)) / 2 - var(--mod-colorwheel-track-width, var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width))) / 2), 0);
122+
transform: translate(calc(var(--spectrum-color-wheel-width) / 2 - var(--spectrum-color-control-track-width) / 2), 0);
132123
inset-block-start: 50%;
133124
inset-inline: 50%;
134125
}
@@ -145,22 +136,23 @@
145136
.spectrum-ColorWheel-wheel {
146137
position: absolute;
147138
background: conic-gradient(from 90deg, red, rgb(255 128 0), rgb(255 255 0), rgb(128 255 0), rgb(0 255 0), rgb(0 255 128), rgb(0 255 255), rgb(0 128 255), rgb(0 0 255), rgb(128 0 255), rgb(255 0 255), rgb(255 0 128), red);
148-
inset-block: var(--spectrum-colorwheel-border-width);
149-
inset-inline: var(--spectrum-colorwheel-border-width);
150-
clip-path: path(evenodd, var(--mod-colorwheel-path, var(--spectrum-colorwheel-path)));
139+
inset-block: var(--spectrum-border-width-100);
140+
inset-inline: var(--spectrum-border-width-100);
141+
clip-path: path(evenodd, var(--spectrum-colorwheel-path));
151142

152143
&.is-disabled {
153144
pointer-events: none;
154-
background: var(--highcontrast-colorwheel-fill-color-disabled, var(--mod-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled)));
145+
background: var(--spectrum-disabled-background-color);
155146
}
156147
}
157148

158149
/* Windows High Contrast Mode */
159150
@media (forced-colors: active) {
160-
.spectrum-ColorWheel {
161-
--highcontrast-colorwheel-border-color-disabled: GrayText;
162-
--highcontrast-colorwheel-fill-color-disabled: Canvas;
163-
151+
.spectrum-ColorWheel-wheel {
164152
forced-color-adjust: none;
153+
154+
&.is-disabled {
155+
background: Canvas;
156+
}
165157
}
166158
}

0 commit comments

Comments
 (0)