Skip to content

Commit 8aa61a9

Browse files
cdransfcdransf
authored
feat(colorarea): S2 migration (#3388)
* feat(colorarea): s2 migration * feat(colorarea): remove redundant property * feat(colorarea): clarify color + rgb implementation * feat(colorarea): fix gradient border-radius * feat(colorarea): move forced-colors media query * feat(colorarea): update changeset
1 parent 2c62239 commit 8aa61a9

File tree

2 files changed

+78
-66
lines changed

2 files changed

+78
-66
lines changed

‎.changeset/spotty-onions-study.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@spectrum-css/colorarea": major
3+
---
4+
5+
# colorarea S2 migration
6+
7+
This change migrates the `colorarea` component to S2. It leverages updated tokens and the `rgba(...)` color function, replacing the existing `TODO` and hardcoded values.

‎components/colorarea/index.css

+71-66
Original file line numberDiff line numberDiff line change
@@ -9,87 +9,92 @@ OF ANY KIND, either express or implied. See the License for the specific languag
99
governing permissions and limitations under the License.
1010
*/
1111
.spectrum-ColorArea {
12-
--spectrum-colorarea-border-radius: var(--spectrum-color-area-border-rounding);
13-
--spectrum-colorarea-border-color: rgba(0, 0, 0, 10%); /* TODO replace with token --spectrum-color-area-border-color and --spectrum-color-area-border-opacity using RGBA function */
14-
--spectrum-colorarea-disabled-background-color: var(--spectrum-disabled-background-color);
15-
--spectrum-colorarea-border-width: var(--spectrum-color-area-border-width);
16-
--spectrum-colorarea-height: var(--spectrum-color-area-height);
17-
--spectrum-colorarea-width: var(--spectrum-color-area-width);
18-
--spectrum-colorarea-min-width: var(--spectrum-color-area-minimum-width);
19-
--spectrum-colorarea-min-height: var(--spectrum-color-area-minimum-height);
20-
}
21-
22-
/* Windows High Contrast Mode */
23-
@media (forced-colors: active) {
24-
.spectrum-ColorArea {
25-
--highcontrast-colorarea-border-color-disabled: GrayText;
26-
--highcontrast-colorarea-border-color: Canvas;
27-
--highcontrast-colorarea-fill-color-disabled: Canvas;
28-
}
29-
30-
.spectrum-ColorArea {
31-
&.is-disabled {
32-
forced-color-adjust: none;
33-
}
34-
}
12+
--spectrum-colorarea-border-radius: var(--spectrum-color-area-border-rounding);
3513

36-
.spectrum-ColorArea-gradient,
37-
.spectrum-ColorHandle-color {
38-
forced-color-adjust: none;
39-
}
14+
/* @TODO: leveraging the rgb token in this case to achieve the desired border color implementation as rgb + opacity are required by the `rgba` function. */
15+
--spectrum-colorarea-border-color-rgb: var(--spectrum-gray-1000-rgb);
16+
--spectrum-colorarea-border-color: rgba(var(--spectrum-colorarea-border-color-rgb), var(--spectrum-color-area-border-opacity));
17+
--spectrum-colorarea-border-width: var(--spectrum-color-area-border-width);
18+
--spectrum-colorarea-disabled-background-color: var(--spectrum-disabled-background-color);
19+
--spectrum-colorarea-height: var(--spectrum-color-area-height);
20+
--spectrum-colorarea-width: var(--spectrum-color-area-width);
21+
--spectrum-colorarea-min-width: var(--spectrum-color-area-minimum-width);
22+
--spectrum-colorarea-min-height: var(--spectrum-color-area-minimum-height);
4023
}
4124

4225
.spectrum-ColorArea {
43-
position: relative;
44-
display: inline-block;
45-
cursor: default;
46-
user-select: none;
47-
min-inline-size: var(--mod-colorarea-min-width, var(--spectrum-colorarea-min-width));
48-
min-block-size: var(--mod-colorarea-min-height, var(--spectrum-colorarea-min-height));
49-
inline-size: var(--mod-colorarea-width, var(--spectrum-colorarea-width));
50-
block-size: var(--mod-colorarea-height, var(--spectrum-colorarea-height));
51-
box-sizing: border-box;
52-
border-radius: var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius));
53-
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)));
26+
position: relative;
27+
display: inline-block;
28+
cursor: default;
29+
user-select: none;
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));
34+
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)));
5437

55-
&.is-focused {
56-
z-index: 2;
57-
}
38+
&.is-focused {
39+
z-index: 2;
40+
}
5841

59-
&.is-disabled {
60-
pointer-events: none;
61-
background: var(--highcontrast-colorarea-fill-color-disabled, var(--mod-colorarea-disabled-background-color, var(--spectrum-colorarea-disabled-background-color)));
62-
border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color-disabled);
42+
&.is-disabled {
43+
pointer-events: none;
44+
background: var(--highcontrast-colorarea-fill-color-disabled, var(--mod-colorarea-disabled-background-color, var(--spectrum-colorarea-disabled-background-color)));
45+
border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color-disabled);
6346

64-
.spectrum-ColorArea-gradient {
65-
display: none;
66-
}
67-
}
47+
.spectrum-ColorArea-gradient {
48+
display: none;
49+
}
50+
}
6851
}
6952

7053
.spectrum-ColorArea-handle {
71-
transform: translate(calc(var(--mod-colorarea-width, var(--spectrum-colorarea-width)) - var(--spectrum-colorarea-border-width)), 0);
72-
inset-block-start: 0;
54+
transform: translate(calc(var(--mod-colorarea-width, var(--spectrum-colorarea-width)) - var(--spectrum-colorarea-border-width)), 0);
55+
inset-block-start: 0;
7356

74-
&:dir(rtl) {
75-
inset-inline-end: 0;
76-
}
57+
&:dir(rtl) {
58+
inset-inline-end: 0;
59+
}
7760
}
7861

7962
.spectrum-ColorArea-gradient {
80-
inline-size: 100%;
81-
block-size: 100%;
82-
border-radius: var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius));
63+
inline-size: 100%;
64+
block-size: 100%;
65+
66+
/* calc used here to properly calculate the `border-radius` for the gradient such that it aligns with the `border-radius` of the enclosing border */
67+
border-radius: calc(var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius)) - var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)));
8368
}
8469

8570
.spectrum-ColorArea-slider {
86-
opacity: 0;
87-
position: absolute;
88-
inset-block-start: 0;
89-
inset-inline-start: 0;
90-
inline-size: 100%;
91-
block-size: 100%;
92-
z-index: 0;
93-
margin: 0;
94-
pointer-events: none;
71+
opacity: 0;
72+
position: absolute;
73+
inset-block-start: 0;
74+
inset-inline-start: 0;
75+
inline-size: 100%;
76+
block-size: 100%;
77+
z-index: 0;
78+
margin: 0;
79+
pointer-events: none;
80+
}
81+
82+
/* Windows High Contrast Mode */
83+
@media (forced-colors: active) {
84+
.spectrum-ColorArea {
85+
--highcontrast-colorarea-border-color-disabled: GrayText;
86+
--highcontrast-colorarea-border-color: Canvas;
87+
--highcontrast-colorarea-fill-color-disabled: Canvas;
88+
}
89+
90+
.spectrum-ColorArea {
91+
&.is-disabled {
92+
forced-color-adjust: none;
93+
}
94+
}
95+
96+
.spectrum-ColorArea-gradient,
97+
.spectrum-ColorHandle-color {
98+
forced-color-adjust: none;
99+
}
95100
}

0 commit comments

Comments
 (0)