Skip to content

Commit b2ed727

Browse files
castastrophecastastrophe
committed
feat(colorarea): remove modifiers from the API [SWC-1264]
1 parent 14740cb commit b2ed727

File tree

4 files changed

+19
-58
lines changed

4 files changed

+19
-58
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"@spectrum-css/miller": major
99
"@spectrum-css/well": major
1010
"@spectrum-css/page": major
11+
"@spectrum-css/colorarea": major
1112
---
1213

1314
This update removes `--mod-*` custom property hooks per SWC-1264, see also the RFC for extensible styling. In addition, this update cleans up any component-level custom properties that did not rely on the CSS cascade to define the styles; this was done to reduce the number of custom properties that are defined at the component level and trim down the size of the CSS we are shipping to consumers.

‎components/colorarea/dist/metadata.json‎

Lines changed: 4 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -11,42 +11,17 @@
1111
".spectrum-ColorArea.is-focused",
1212
".spectrum-ColorHandle-color"
1313
],
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"
23-
],
14+
"modifiers": [],
2415
"component": [
2516
"--spectrum-color-area-border-opacity",
2617
"--spectrum-color-area-border-rounding",
2718
"--spectrum-color-area-border-width",
2819
"--spectrum-color-area-height",
2920
"--spectrum-color-area-minimum-height",
3021
"--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"
22+
"--spectrum-color-area-width"
4523
],
24+
"global": ["--spectrum-disabled-background-color", "--spectrum-gray-1000"],
4625
"passthroughs": [],
47-
"high-contrast": [
48-
"--highcontrast-colorarea-border-color",
49-
"--highcontrast-colorarea-border-color-disabled",
50-
"--highcontrast-colorarea-fill-color-disabled"
51-
]
26+
"high-contrast": []
5227
}

‎components/colorarea/index.css‎

Lines changed: 11 additions & 26 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: var(--spectrum-color-area-border-width) solid 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 {
@@ -85,11 +73,8 @@
8573
/* Windows High Contrast Mode */
8674
@media (forced-colors: active) {
8775
.spectrum-ColorArea {
88-
--highcontrast-colorarea-border-color-disabled: GrayText;
89-
--highcontrast-colorarea-border-color: Canvas;
90-
--highcontrast-colorarea-fill-color-disabled: Canvas;
91-
9276
&.is-disabled {
77+
background: Canvas;
9378
forced-color-adjust: none;
9479
}
9580
}

‎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-colorarea-height": customHeight,
30+
"--spectrum-colorarea-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-colorarea-width), 0)" : undefined,
5353
},
5454
}, context)}
5555
<input

0 commit comments

Comments
 (0)