Skip to content

Commit ee52db2

Browse files
cdransfcdransf
committed
feat(colorwheel): s2 migration
- chore(colorwheel): update property name - chore(colorwheel): wip inset borders - chore(colorwheel): fix lint violations - chore(colorwheel): move mod declarations - chore(colorwheel): drop unused property + update metadata - chore(colorwheel): remove underlying border node + class - chore(colorwheel): remove unused property - fix(colorwheel): add missing mod - fix(colorwheel): comments for updated before spacing/positioning - fix(colorwheel): adopt proper token for border opacity - fix(colorwheel): remove inset border on disabled state - fix(colorwheel): remove global token reference - chore(colorwheel): highlight removed/added mods - chore(colorwheel): update copyright year - chore(colorwheel): add color loupe to default story - fix(colorwheel): correct WHC disabled background color value - chore(colorwheel): update test heading - fix(colorwheel): typos - chore(colorwheel): update token usage - chore(colorwheel): add without loupe test - chore(colorwheel): restore WHC styles - chore(colorwheel): move isWithColorLoupe property - fix(colorwheel): whc disabled background
1 parent f34473b commit ee52db2

File tree

6 files changed

+117
-53
lines changed

6 files changed

+117
-53
lines changed

‎.changeset/giant-windows-smoke.md

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
"@spectrum-css/colorwheel": major
3+
---
4+
5+
# colorwheel S2 migration
6+
7+
This change migrates the colorwheel component to S2. It adds the `--spectrum-colorwheel-border-color-rgb` and `--spectrum-colorwheel-border-opacity` custom properties. It updates `--spectrum-colorwheel-border-color` to leverage these tokens in an `rgba(...)` function.
8+
9+
This removes the `spectrum-ColorWheel-border` and associated template DOM node as the outside/underlying border are no longer present in the S2 designs.
10+
11+
The following mods have been removed:
12+
13+
```css
14+
--mod-colorwheel-height
15+
--mod-colorwheel-path-borders
16+
--mod-colorwheel-track-width
17+
--mod-colorwheel-width
18+
```
19+
20+
The mod `--mod-colorwheel-track-width` has been added.

‎components/colorwheel/dist/metadata.json

+12-9
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,19 @@
44
".spectrum-ColorWheel",
55
".spectrum-ColorWheel-ColorArea-handle",
66
".spectrum-ColorWheel-ColorArea-handle:dir(rtl)",
7-
".spectrum-ColorWheel-border",
8-
".spectrum-ColorWheel-border.is-disabled",
97
".spectrum-ColorWheel-colorarea-container",
108
".spectrum-ColorWheel-handle",
119
".spectrum-ColorWheel-inner",
10+
".spectrum-ColorWheel-inner:before",
1211
".spectrum-ColorWheel-slider",
1312
".spectrum-ColorWheel-wheel",
1413
".spectrum-ColorWheel-wheel.is-disabled",
1514
".spectrum-ColorWheel.is-disabled",
15+
".spectrum-ColorWheel.is-disabled .spectrum-ColorWheel-inner:before",
16+
".spectrum-ColorWheel.is-disabled:before",
1617
".spectrum-ColorWheel.is-dragged",
1718
".spectrum-ColorWheel.is-focused",
19+
".spectrum-ColorWheel:before",
1820
"[dir=\"rtl\"] .spectrum-ColorWheel-ColorArea-handle"
1921
],
2022
"modifiers": [
@@ -23,32 +25,33 @@
2325
"--mod-colorwheel-colorarea-container-size",
2426
"--mod-colorwheel-colorarea-margin",
2527
"--mod-colorwheel-fill-color-disabled",
26-
"--mod-colorwheel-height",
27-
"--mod-colorwheel-min-width",
28+
"--mod-colorwheel-min-inline-size",
2829
"--mod-colorwheel-path",
29-
"--mod-colorwheel-path-borders",
30-
"--mod-colorwheel-track-width",
31-
"--mod-colorwheel-width"
30+
"--mod-colorwheel-track-width"
3231
],
3332
"component": [
33+
"--spectrum-color-wheel-border-opacity",
3434
"--spectrum-color-wheel-color-area-margin",
3535
"--spectrum-color-wheel-minimum-width",
3636
"--spectrum-color-wheel-width",
3737
"--spectrum-colorwheel-border-color",
38+
"--spectrum-colorwheel-border-color-rgb",
39+
"--spectrum-colorwheel-border-opacity",
3840
"--spectrum-colorwheel-border-width",
3941
"--spectrum-colorwheel-colorarea-container-size",
42+
"--spectrum-colorwheel-colorarea-margin",
4043
"--spectrum-colorwheel-fill-color-disabled",
4144
"--spectrum-colorwheel-height",
45+
"--spectrum-colorwheel-min-inline-size",
4246
"--spectrum-colorwheel-path",
43-
"--spectrum-colorwheel-path-borders",
4447
"--spectrum-colorwheel-track-width",
4548
"--spectrum-colorwheel-width"
4649
],
4750
"global": [
4851
"--spectrum-border-width-100",
4952
"--spectrum-color-control-track-width",
5053
"--spectrum-disabled-background-color",
51-
"--spectrum-transparent-black-300"
54+
"--spectrum-gray-1000-rgb"
5255
],
5356
"passthroughs": [],
5457
"high-contrast": [

‎components/colorwheel/index.css

+66-36
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* Copyright 2024 Adobe. All rights reserved.
2+
* Copyright 2025 Adobe. All rights reserved.
33
*
44
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
55
* you may not use this file except in compliance with the License. You may obtain a copy
@@ -11,46 +11,64 @@
1111
* governing permissions and limitations under the License.
1212
*/
1313

14-
/* Windows High Contrast Mode */
15-
@media (forced-colors: active) {
16-
.spectrum-ColorWheel {
17-
--highcontrast-colorwheel-border-color-disabled: GrayText;
18-
--highcontrast-colorwheel-fill-color-disabled: Canvas;
14+
.spectrum-ColorWheel {
15+
--spectrum-colorwheel-width: var(--spectrum-color-wheel-width);
16+
--spectrum-colorwheel-height: var(--spectrum-color-wheel-width);
1917

20-
forced-color-adjust: none;
21-
}
22-
}
18+
/* @TODO: leveraging the rgb token in this case to achieve the desired border color implementation as rgb + opacity are required by the `rgba` function. */
19+
--spectrum-colorwheel-border-color-rgb: var(--spectrum-gray-1000-rgb);
2320

24-
.spectrum-ColorWheel {
25-
--spectrum-colorwheel-border-color: var(--spectrum-transparent-black-300);
21+
--spectrum-colorwheel-border-opacity: var(--spectrum-color-wheel-border-opacity);
22+
--spectrum-colorwheel-border-color: rgba(var(--spectrum-colorwheel-border-color-rgb), var(--spectrum-colorwheel-border-opacity));
23+
24+
--spectrum-colorwheel-border-width: var(--spectrum-border-width-100);
25+
--spectrum-colorwheel-track-width: var(--spectrum-color-control-track-width);
26+
27+
--spectrum-colorwheel-min-inline-size: var(--spectrum-color-wheel-minimum-width);
2628

27-
--spectrum-colorwheel-width: var(--mod-colorwheel-width, var(--spectrum-color-wheel-width));
28-
--spectrum-colorwheel-height: var(--mod-colorwheel-height, var(--spectrum-color-wheel-width));
29-
--spectrum-colorwheel-fill-color-disabled: var(--mod-colorwheel-fill-color-disabled, var(--spectrum-disabled-background-color));
30-
--spectrum-colorwheel-border-color: var(--spectrum-transparent-black-300);
29+
--spectrum-colorwheel-colorarea-margin: var(--spectrum-color-wheel-color-area-margin);
3130

32-
--spectrum-colorwheel-border-width: var(--mod-colorwheel-border-width, var(--spectrum-border-width-100));
33-
--spectrum-colorwheel-track-width: var(--mod-colorwheel-track-width, var(--spectrum-color-control-track-width));
31+
--spectrum-colorwheel-fill-color-disabled: var(--spectrum-disabled-background-color);
3432

3533
/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used with JS in calculating the clip-path paths and colorarea-container-size */
36-
--_track-width: var(--spectrum-colorwheel-track-width);
34+
--_track-width: var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width));
3735
/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used with JS in calculating the clip-path paths and colorarea-container-size */
38-
--_border-width: var(--spectrum-colorwheel-border-width);
36+
--_border-width: var(--mod-colorwheel-border-width, var(--spectrum-colorwheel-border-width));
3937

4038
position: relative;
4139
display: block;
42-
min-inline-size: var(--mod-colorwheel-min-width, var(--spectrum-color-wheel-minimum-width));
40+
min-inline-size: var(--mod-colorwheel-min-inline-size, var(--spectrum-colorwheel-min-inline-size));
4341
inline-size: var(--spectrum-colorwheel-width);
4442
block-size: var(--spectrum-colorwheel-height);
4543
user-select: none;
4644
cursor: default;
4745

46+
/* calcs wrapping --spectrum-colorwheel-border-width are used to properly position the border drawn using this ::before pseudo element over the exterior edge of the colorwheel. The size is reduced and positioning adjusted to create the border effect. */
47+
&::before {
48+
inline-size: calc(var(--spectrum-colorwheel-width) - calc(4 * var(--spectrum-colorwheel-border-width)));
49+
block-size: calc(var(--spectrum-colorwheel-width) - calc(4 * var(--spectrum-colorwheel-border-width)));
50+
inset-block-start: var(--spectrum-colorwheel-border-width);
51+
inset-inline-start: var(--spectrum-colorwheel-border-width);
52+
content: "";
53+
position: absolute;
54+
border-width: var(--spectrum-colorwheel-border-width);
55+
border-style: solid;
56+
border-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color));
57+
border-radius: 100%;
58+
z-index: 1;
59+
}
60+
4861
&.is-focused {
4962
z-index: 2;
5063
}
5164

5265
&.is-disabled {
5366
pointer-events: none;
67+
68+
&::before,
69+
.spectrum-ColorWheel-inner::before {
70+
border-color: var(--highcontrast-colorwheel-border-color-disabled, transparent);
71+
}
5472
}
5573

5674
&.is-dragged {
@@ -69,6 +87,21 @@
6987
inline-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size));
7088
block-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size));
7189
margin: auto;
90+
91+
/* calcs wrapping --spectrum-colorwheel-border-width are used to properly position the border drawn using this ::before pseudo element over the interior edge of the colorwheel. The size is increased and positioning adjusted to create the border effect. */
92+
&::before {
93+
inline-size: calc(var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size)) + calc(2 * var(--spectrum-colorwheel-border-width)));
94+
block-size: calc(var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size)) + calc(2 * var(--spectrum-colorwheel-border-width)));
95+
inset-block-start: calc(-2 * var(--spectrum-colorwheel-border-width));
96+
inset-inline-start: calc(-2 * var(--spectrum-colorwheel-border-width));
97+
content: "";
98+
position: absolute;
99+
border-width: var(--spectrum-colorwheel-border-width);
100+
border-style: solid;
101+
border-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color));
102+
border-radius: 100%;
103+
z-index: 1;
104+
}
72105
}
73106

74107
.spectrum-ColorWheel-colorarea-container {
@@ -77,7 +110,7 @@
77110
display: flex;
78111
align-items: center;
79112
justify-content: center;
80-
margin: var(--mod-colorwheel-colorarea-margin, var(--spectrum-color-wheel-color-area-margin));
113+
margin: var(--mod-colorwheel-colorarea-margin, var(--spectrum-colorwheel-colorarea-margin));
81114
}
82115

83116
.spectrum-ColorWheel-slider {
@@ -93,7 +126,7 @@
93126
}
94127

95128
.spectrum-ColorWheel-handle {
96-
transform: translate(calc(var(--spectrum-colorwheel-width) / 2 - var(--spectrum-colorwheel-track-width) / 2), 0);
129+
transform: translate(calc(var(--spectrum-colorwheel-width) / 2 - var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width)) / 2), 0);
97130
inset-block-start: 50%;
98131
inset-inline: 50%;
99132
}
@@ -107,19 +140,6 @@
107140
}
108141
}
109142

110-
/* a clip-path set border-width wider than than spectrum-colorwheel-wheel to create the appreance of a border */
111-
.spectrum-ColorWheel-border {
112-
position: relative;
113-
background-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color));
114-
inline-size: var(--spectrum-colorwheel-width);
115-
block-size: var(--spectrum-colorwheel-height);
116-
clip-path: path(evenodd, var(--mod-colorwheel-path-borders, var(--spectrum-colorwheel-path-borders)));
117-
118-
&.is-disabled {
119-
background-color: var(--highcontrast-colorwheel-border-color-disabled, var(--spectrum-colorwheel-fill-color-disabled));
120-
}
121-
}
122-
123143
.spectrum-ColorWheel-wheel {
124144
position: absolute;
125145
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);
@@ -129,6 +149,16 @@
129149

130150
&.is-disabled {
131151
pointer-events: none;
132-
background: var(--highcontrast-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled));
152+
background: var(--highcontrast-colorwheel-fill-color-disabled, var(--mod-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled)));
153+
}
154+
}
155+
156+
/* Windows High Contrast Mode */
157+
@media (forced-colors: active) {
158+
.spectrum-ColorWheel {
159+
--highcontrast-colorwheel-border-color-disabled: GrayText;
160+
--highcontrast-colorwheel-fill-color-disabled: Canvas;
161+
162+
forced-color-adjust: none;
133163
}
134164
}

‎components/colorwheel/stories/colorwheel.stories.js

+11-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,16 @@ export default {
2323
if: { arg: "isDisabled", truthy: false },
2424
},
2525
isWithColorArea: {
26-
name: "With Color Area",
26+
name: "With color area",
27+
type: { name: "boolean" },
28+
table: {
29+
type: { summary: "boolean" },
30+
category: "State",
31+
},
32+
control: "boolean",
33+
},
34+
isWithColorLoupe: {
35+
name: "With color loupe",
2736
type: { name: "boolean" },
2837
table: {
2938
type: { summary: "boolean" },
@@ -44,6 +53,7 @@ export default {
4453
isDisabled: false,
4554
isFocused: false,
4655
isWithColorArea: false,
56+
isWithColorLoupe: true,
4757
selectedColor: "rgba(255, 0, 0, 50%)",
4858
},
4959
parameters: {

‎components/colorwheel/stories/colorwheel.test.js

+4
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ export const ColorWheelGroup = Variants({
1111
testHeading: "With color area",
1212
isWithColorArea: true,
1313
},
14+
{
15+
testHeading: "Without color loupe",
16+
isWithColorLoupe: false,
17+
},
1418
],
1519
stateData: [
1620
{

‎components/colorwheel/stories/template.js

+4-7
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export const Template = ({
1212
isDisabled = false,
1313
isFocused = false,
1414
isWithColorArea = false,
15+
isWithColorLoupe = true,
1516
colorHandleStyle = {},
1617
selectedColor = "rgba(255, 0, 0, 50%)",
1718
} = {}, context = {}) => {
@@ -37,20 +38,16 @@ export const Template = ({
3738
</div>
3839
</div>
3940
<div class=${classMap({
40-
[`${rootClass}-border`]: true,
41+
[`${rootClass}-wheel`]: true,
4142
"is-disabled": isDisabled,
42-
})}>
43-
<div class=${classMap({
44-
[`${rootClass}-wheel`]: true,
45-
"is-disabled": isDisabled,
46-
})}></div>
47-
</div>
43+
})}></div>
4844
${ColorHandle({
4945
isDisabled,
5046
isFocused,
5147
customClasses: [`${rootClass}-handle`],
5248
selectedColor,
5349
customStyles: colorHandleStyle,
50+
isWithColorLoupe,
5451
}, context)}
5552
<input type="range" class="${rootClass}-slider" aria-label="hue" min="0" max="360" step="">
5653
</div>

0 commit comments

Comments
 (0)