Skip to content

Commit c5ef99c

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 - fix(colorwheel): improve interior border styles - fix(colorwheel): token/classnames in story; remove unnecessary margin - chore(colorwheel): fix inset borders + improve comments - chore(colorwheel): update changeset
1 parent 4afa4a9 commit c5ef99c

File tree

8 files changed

+129
-59
lines changed

8 files changed

+129
-59
lines changed

‎.changeset/giant-windows-smoke.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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. `::before` and `::after` pseudo elements are now used to draw the exterior and interior borders that overlay the exterior and interior edges of the color wheel.
10+
11+
Support is provided for the `240px` and `192px` sizes outlined in the design requirements.
12+
13+
The `forced-colors` media query has been moved to the bottom of the file consistent with with our other component implementations.
14+
15+
Stories, tests and documentation have been updated to be consistent with these changes.
16+
17+
The following mods have been removed:
18+
19+
```css
20+
--mod-colorwheel-height
21+
--mod-colorwheel-width
22+
--mod-colorwheel-min-width
23+
--mod-colorwheel-path-borders
24+
--mod-colorwheel-colorarea-margin
25+
```
26+
27+
The mod `--mod-colorwheel-track-width` has been added.

‎components/colorwheel/dist/metadata.json

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,51 +4,51 @@
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",
1210
".spectrum-ColorWheel-slider",
1311
".spectrum-ColorWheel-wheel",
1412
".spectrum-ColorWheel-wheel.is-disabled",
1513
".spectrum-ColorWheel.is-disabled",
14+
".spectrum-ColorWheel.is-disabled .spectrum-ColorWheel-inner:before",
15+
".spectrum-ColorWheel.is-disabled:before",
1616
".spectrum-ColorWheel.is-dragged",
1717
".spectrum-ColorWheel.is-focused",
18+
".spectrum-ColorWheel:after",
19+
".spectrum-ColorWheel:before",
1820
"[dir=\"rtl\"] .spectrum-ColorWheel-ColorArea-handle"
1921
],
2022
"modifiers": [
2123
"--mod-colorwheel-border-color",
2224
"--mod-colorwheel-border-width",
2325
"--mod-colorwheel-colorarea-container-size",
24-
"--mod-colorwheel-colorarea-margin",
2526
"--mod-colorwheel-fill-color-disabled",
26-
"--mod-colorwheel-height",
27-
"--mod-colorwheel-min-width",
27+
"--mod-colorwheel-min-inline-size",
2828
"--mod-colorwheel-path",
29-
"--mod-colorwheel-path-borders",
30-
"--mod-colorwheel-track-width",
31-
"--mod-colorwheel-width"
29+
"--mod-colorwheel-track-width"
3230
],
3331
"component": [
34-
"--spectrum-color-wheel-color-area-margin",
32+
"--spectrum-color-wheel-border-opacity",
3533
"--spectrum-color-wheel-minimum-width",
3634
"--spectrum-color-wheel-width",
3735
"--spectrum-colorwheel-border-color",
36+
"--spectrum-colorwheel-border-color-rgb",
37+
"--spectrum-colorwheel-border-opacity",
3838
"--spectrum-colorwheel-border-width",
3939
"--spectrum-colorwheel-colorarea-container-size",
4040
"--spectrum-colorwheel-fill-color-disabled",
4141
"--spectrum-colorwheel-height",
42+
"--spectrum-colorwheel-min-inline-size",
4243
"--spectrum-colorwheel-path",
43-
"--spectrum-colorwheel-path-borders",
4444
"--spectrum-colorwheel-track-width",
4545
"--spectrum-colorwheel-width"
4646
],
4747
"global": [
4848
"--spectrum-border-width-100",
4949
"--spectrum-color-control-track-width",
5050
"--spectrum-disabled-background-color",
51-
"--spectrum-transparent-black-300"
51+
"--spectrum-gray-1000-rgb"
5252
],
5353
"passthroughs": [],
5454
"high-contrast": [

‎components/colorwheel/index.css

Lines changed: 68 additions & 36 deletions
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,82 @@
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);
2626

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);
27+
--spectrum-colorwheel-min-inline-size: var(--spectrum-color-wheel-minimum-width);
3128

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));
29+
--spectrum-colorwheel-fill-color-disabled: var(--spectrum-disabled-background-color);
3430

3531
/* 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);
32+
--_track-width: var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width));
3733
/* 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);
34+
--_border-width: var(--mod-colorwheel-border-width, var(--spectrum-colorwheel-border-width));
3935

4036
position: relative;
4137
display: block;
42-
min-inline-size: var(--mod-colorwheel-min-width, var(--spectrum-color-wheel-minimum-width));
38+
min-inline-size: var(--mod-colorwheel-min-inline-size, var(--spectrum-colorwheel-min-inline-size));
4339
inline-size: var(--spectrum-colorwheel-width);
4440
block-size: var(--spectrum-colorwheel-height);
4541
user-select: none;
4642
cursor: default;
4743

44+
/**
45+
* Color wheel exterior border
46+
* - Calcs for `inline-size` and `block-size` subtract 4 times the component's border width
47+
* (to account for the inset width of the exterior border) from the component's width.
48+
*/
49+
&::before {
50+
inline-size: calc(var(--spectrum-colorwheel-width) - calc(4 * var(--spectrum-colorwheel-border-width)));
51+
block-size: calc(var(--spectrum-colorwheel-width) - calc(4 * var(--spectrum-colorwheel-border-width)));
52+
inset-block-start: var(--spectrum-colorwheel-border-width);
53+
inset-inline-start: var(--spectrum-colorwheel-border-width);
54+
content: "";
55+
position: absolute;
56+
border-width: var(--spectrum-colorwheel-border-width);
57+
border-style: solid;
58+
border-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color));
59+
border-radius: 100%;
60+
z-index: 1;
61+
}
62+
63+
/**
64+
* Color wheel interior border
65+
* - Calcs for `inset` 2 times the component's border width from the
66+
* track width (to account for the inset width of the interior border)
67+
*/
68+
&::after {
69+
inset: calc(var(--spectrum-colorwheel-track-width) - (calc(2 * var(--spectrum-colorwheel-border-width))));
70+
content: "";
71+
position: absolute;
72+
border-width: var(--spectrum-colorwheel-border-width);
73+
border-style: solid;
74+
border-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color));
75+
border-radius: 100%;
76+
z-index: 1;
77+
}
78+
4879
&.is-focused {
4980
z-index: 2;
5081
}
5182

5283
&.is-disabled {
5384
pointer-events: none;
85+
86+
&::before,
87+
.spectrum-ColorWheel-inner::before {
88+
border-color: var(--highcontrast-colorwheel-border-color-disabled, transparent);
89+
}
5490
}
5591

5692
&.is-dragged {
@@ -77,7 +113,6 @@
77113
display: flex;
78114
align-items: center;
79115
justify-content: center;
80-
margin: var(--mod-colorwheel-colorarea-margin, var(--spectrum-color-wheel-color-area-margin));
81116
}
82117

83118
.spectrum-ColorWheel-slider {
@@ -93,7 +128,7 @@
93128
}
94129

95130
.spectrum-ColorWheel-handle {
96-
transform: translate(calc(var(--spectrum-colorwheel-width) / 2 - var(--spectrum-colorwheel-track-width) / 2), 0);
131+
transform: translate(calc(var(--spectrum-colorwheel-width) / 2 - var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width)) / 2), 0);
97132
inset-block-start: 50%;
98133
inset-inline: 50%;
99134
}
@@ -107,19 +142,6 @@
107142
}
108143
}
109144

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-
123145
.spectrum-ColorWheel-wheel {
124146
position: absolute;
125147
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 +151,16 @@
129151

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

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

Lines changed: 12 additions & 4 deletions
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: {
@@ -74,9 +84,7 @@ Disabled.parameters = {
7484
*
7585
* To display a color area inside of the color wheel, add a color area component to `.spectrum-ColorWheel-colorarea-container` element and define the custom width and height styles with `--mod-colorarea-width` and `--mod-colorarea-height` variables.
7686
*
77-
* The `.spectrum-colorwheel-colorarea-container-size` is hard coded to position the color area within the color wheel using `.spectrum-color-wheel-color-area-margin`. Implementations using JS can calculate the container size with `Math.sqrt(2 * R * R)`, where `R` is the inner radius as calculated for the clip paths.
78-
*
79-
* `.spectrum-colorwheel-path`, `.spectrum-colorwheel-path-borders` and `.spectrum-colorwheel-colorarea-container` are hard coded in CSS, and include token values as custom CSS variables so they can be accessed with JS. To use and calculate these values, implementations should consider:
87+
* `--spectrum-colorwheel-path` and `--spectrum-colorwheel-colorarea-container-size` are hard coded in CSS, and include token values as custom CSS variables so they can be accessed with JS. To use and calculate these values, implementations should consider:
8088
* ```
8189
* const wheel = document.querySelector(".spectrum-ColorWheel-wheel")
8290
* getComputedStyle(wheel).getPropertyValue('--track-width')

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

Lines changed: 4 additions & 0 deletions
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

Lines changed: 4 additions & 7 deletions
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>

‎components/popover/dist/metadata.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,6 @@
142142
"--spectrum-animation-duration-0",
143143
"--spectrum-animation-duration-100",
144144
"--spectrum-background-layer-2-color",
145-
"--spectrum-border-width-100",
146145
"--spectrum-corner-radius-large-default",
147146
"--spectrum-drop-shadow-elevated-blur",
148147
"--spectrum-drop-shadow-elevated-color",

‎yarn.lock

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4656,6 +4656,9 @@ __metadata:
46564656
"@spectrum-css/tokens": "npm:16.0.0"
46574657
peerDependencies:
46584658
"@spectrum-css/tokens": ">=16"
4659+
peerDependenciesMeta:
4660+
"@spectrum-css/tokens":
4661+
optional: true
46594662
languageName: unknown
46604663
linkType: soft
46614664

0 commit comments

Comments
 (0)