Skip to content

Commit eb8c57f

Browse files
cdransfcdransf
committed
fix(colorwheel): whc disabled background
1 parent 0d7dfd2 commit eb8c57f

File tree

1 file changed

+43
-46
lines changed

1 file changed

+43
-46
lines changed

‎components/colorwheel/index.css

+43-46
Original file line numberDiff line numberDiff line change
@@ -11,46 +11,45 @@
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. */
4847
&::before {
49-
inline-size: calc(var(--spectrum-colorwheel-width) - 4px);
50-
block-size: calc(var(--spectrum-colorwheel-width) - 4px);
51-
inset-block-start: 1px;
52-
inset-inline-start: 1px;
53-
content: " ";
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: "";
5453
position: absolute;
5554
border-width: var(--spectrum-colorwheel-border-width);
5655
border-style: solid;
@@ -68,7 +67,7 @@
6867

6968
&::before,
7069
.spectrum-ColorWheel-inner::before {
71-
border-color: transparent;
70+
border-color: var(--highcontrast-colorwheel-border-color-disabled, transparent);
7271
}
7372
}
7473

@@ -89,12 +88,13 @@
8988
block-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size));
9089
margin: auto;
9190

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. */
9292
&::before {
93-
inline-size: calc(var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size)) + 2px);
94-
block-size: calc(var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size)) + 2px);
95-
inset-block-start: -2px;
96-
inset-inline-start: -2px;
97-
content: " ";
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: "";
9898
position: absolute;
9999
border-width: var(--spectrum-colorwheel-border-width);
100100
border-style: solid;
@@ -110,7 +110,7 @@
110110
display: flex;
111111
align-items: center;
112112
justify-content: center;
113-
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));
114114
}
115115

116116
.spectrum-ColorWheel-slider {
@@ -126,7 +126,7 @@
126126
}
127127

128128
.spectrum-ColorWheel-handle {
129-
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);
130130
inset-block-start: 50%;
131131
inset-inline: 50%;
132132
}
@@ -140,19 +140,6 @@
140140
}
141141
}
142142

143-
/* a clip-path set border-width wider than than spectrum-colorwheel-wheel to create the appreance of a border */
144-
.spectrum-ColorWheel-border {
145-
position: relative;
146-
background-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color));
147-
inline-size: var(--spectrum-colorwheel-width);
148-
block-size: var(--spectrum-colorwheel-height);
149-
clip-path: path(evenodd, var(--mod-colorwheel-path-borders, var(--spectrum-colorwheel-path-borders)));
150-
151-
&.is-disabled {
152-
background-color: var(--highcontrast-colorwheel-border-color-disabled, var(--spectrum-colorwheel-fill-color-disabled));
153-
}
154-
}
155-
156143
.spectrum-ColorWheel-wheel {
157144
position: absolute;
158145
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);
@@ -162,6 +149,16 @@
162149

163150
&.is-disabled {
164151
pointer-events: none;
165-
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;
166163
}
167164
}

0 commit comments

Comments
 (0)