Skip to content

Commit b98d4a5

Browse files
cdransfcdransf
committed
feat(colorarea): s2 migration
1 parent a827601 commit b98d4a5

File tree

2 files changed

+70
-61
lines changed

2 files changed

+70
-61
lines changed

‎.changeset/spotty-onions-study.md

Lines changed: 7 additions & 0 deletions
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 updates the `--spectrum-colorarea-border-radius` token to `--spectrum-colorarea-border-rounding`. Additionally, it leverages updated tokens and the `rgba(...)` color function, replacing the existing `TODO` and hardcoded values.

‎components/colorarea/index.css

Lines changed: 63 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -9,87 +9,89 @@ 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);
12+
--spectrum-colorarea-border-radius: var(--spectrum-color-area-border-rounding);
13+
--spectrum-colorarea-border-color-rgb: var(--spectrum-gray-1000-rgb);
14+
--spectrum-colorarea-border-color: rgba(var(--spectrum-colorarea-border-color-rgb), var(--spectrum-color-area-border-opacity));
15+
--spectrum-colorarea-border-rounding: var(--spectrum-color-area-border-rounding);
16+
--spectrum-colorarea-border-width: var(--spectrum-color-area-border-width);
17+
--spectrum-colorarea-disabled-background-color: var(--spectrum-disabled-background-color);
18+
--spectrum-colorarea-height: var(--spectrum-color-area-height);
19+
--spectrum-colorarea-width: var(--spectrum-color-area-width);
20+
--spectrum-colorarea-min-width: var(--spectrum-color-area-minimum-width);
21+
--spectrum-colorarea-min-height: var(--spectrum-color-area-minimum-height);
2022
}
2123

2224
/* Windows High Contrast Mode */
2325
@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-
}
26+
.spectrum-ColorArea {
27+
--highcontrast-colorarea-border-color-disabled: GrayText;
28+
--highcontrast-colorarea-border-color: Canvas;
29+
--highcontrast-colorarea-fill-color-disabled: Canvas;
30+
}
2931

30-
.spectrum-ColorArea {
31-
&.is-disabled {
32-
forced-color-adjust: none;
33-
}
34-
}
32+
.spectrum-ColorArea {
33+
&.is-disabled {
34+
forced-color-adjust: none;
35+
}
36+
}
3537

36-
.spectrum-ColorArea-gradient,
37-
.spectrum-ColorHandle-color {
38-
forced-color-adjust: none;
39-
}
38+
.spectrum-ColorArea-gradient,
39+
.spectrum-ColorHandle-color {
40+
forced-color-adjust: none;
41+
}
4042
}
4143

4244
.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)));
45+
position: relative;
46+
display: inline-block;
47+
cursor: default;
48+
user-select: none;
49+
min-inline-size: var(--mod-colorarea-min-width, var(--spectrum-colorarea-min-width));
50+
min-block-size: var(--mod-colorarea-min-height, var(--spectrum-colorarea-min-height));
51+
inline-size: var(--mod-colorarea-width, var(--spectrum-colorarea-width));
52+
block-size: var(--mod-colorarea-height, var(--spectrum-colorarea-height));
53+
box-sizing: border-box;
54+
border-radius: var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-rounding));
55+
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)));
5456

55-
&.is-focused {
56-
z-index: 2;
57-
}
57+
&.is-focused {
58+
z-index: 2;
59+
}
5860

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);
61+
&.is-disabled {
62+
pointer-events: none;
63+
background: var(--highcontrast-colorarea-fill-color-disabled, var(--mod-colorarea-disabled-background-color, var(--spectrum-colorarea-disabled-background-color)));
64+
border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color-disabled);
6365

64-
.spectrum-ColorArea-gradient {
65-
display: none;
66-
}
67-
}
66+
.spectrum-ColorArea-gradient {
67+
display: none;
68+
}
69+
}
6870
}
6971

7072
.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;
73+
transform: translate(calc(var(--mod-colorarea-width, var(--spectrum-colorarea-width)) - var(--spectrum-colorarea-border-width)), 0);
74+
inset-block-start: 0;
7375

74-
&:dir(rtl) {
75-
inset-inline-end: 0;
76-
}
76+
&:dir(rtl) {
77+
inset-inline-end: 0;
78+
}
7779
}
7880

7981
.spectrum-ColorArea-gradient {
80-
inline-size: 100%;
81-
block-size: 100%;
82-
border-radius: var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius));
82+
inline-size: 100%;
83+
block-size: 100%;
84+
border-radius: var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius));
8385
}
8486

8587
.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;
88+
opacity: 0;
89+
position: absolute;
90+
inset-block-start: 0;
91+
inset-inline-start: 0;
92+
inline-size: 100%;
93+
block-size: 100%;
94+
z-index: 0;
95+
margin: 0;
96+
pointer-events: none;
9597
}

0 commit comments

Comments
 (0)