Skip to content

Commit

Permalink
fix(colorwheel): whc disabled background
Browse files Browse the repository at this point in the history
  • Loading branch information
@cdransf
cdransf committed Feb 5, 2025
1 parent 0d7dfd2 commit eb8c57f
Showing 1 changed file with 43 additions and 46 deletions.
89 changes: 43 additions & 46 deletions components/colorwheel/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,46 +11,45 @@
* governing permissions and limitations under the License.
*/

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

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

.spectrum-ColorWheel {
--spectrum-colorwheel-border-color: var(--spectrum-transparent-black-300);
--spectrum-colorwheel-border-opacity: var(--spectrum-color-wheel-border-opacity);
--spectrum-colorwheel-border-color: rgba(var(--spectrum-colorwheel-border-color-rgb), var(--spectrum-colorwheel-border-opacity));

--spectrum-colorwheel-border-width: var(--spectrum-border-width-100);
--spectrum-colorwheel-track-width: var(--spectrum-color-control-track-width);

--spectrum-colorwheel-min-inline-size: var(--spectrum-color-wheel-minimum-width);

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

--spectrum-colorwheel-border-width: var(--mod-colorwheel-border-width, var(--spectrum-border-width-100));
--spectrum-colorwheel-track-width: var(--mod-colorwheel-track-width, var(--spectrum-color-control-track-width));
--spectrum-colorwheel-fill-color-disabled: var(--spectrum-disabled-background-color);

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

position: relative;
display: block;
min-inline-size: var(--mod-colorwheel-min-width, var(--spectrum-color-wheel-minimum-width));
min-inline-size: var(--mod-colorwheel-min-inline-size, var(--spectrum-colorwheel-min-inline-size));
inline-size: var(--spectrum-colorwheel-width);
block-size: var(--spectrum-colorwheel-height);
user-select: none;
cursor: default;

/* 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. */
&::before {
inline-size: calc(var(--spectrum-colorwheel-width) - 4px);
block-size: calc(var(--spectrum-colorwheel-width) - 4px);
inset-block-start: 1px;
inset-inline-start: 1px;
content: " ";
inline-size: calc(var(--spectrum-colorwheel-width) - calc(4 * var(--spectrum-colorwheel-border-width)));
block-size: calc(var(--spectrum-colorwheel-width) - calc(4 * var(--spectrum-colorwheel-border-width)));
inset-block-start: var(--spectrum-colorwheel-border-width);
inset-inline-start: var(--spectrum-colorwheel-border-width);
content: "";
position: absolute;
border-width: var(--spectrum-colorwheel-border-width);
border-style: solid;
Expand All @@ -68,7 +67,7 @@

&::before,
.spectrum-ColorWheel-inner::before {
border-color: transparent;
border-color: var(--highcontrast-colorwheel-border-color-disabled, transparent);
}
}

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

/* 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. */
&::before {
inline-size: calc(var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size)) + 2px);
block-size: calc(var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size)) + 2px);
inset-block-start: -2px;
inset-inline-start: -2px;
content: " ";
inline-size: calc(var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size)) + calc(2 * var(--spectrum-colorwheel-border-width)));
block-size: calc(var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size)) + calc(2 * var(--spectrum-colorwheel-border-width)));
inset-block-start: calc(-2 * var(--spectrum-colorwheel-border-width));
inset-inline-start: calc(-2 * var(--spectrum-colorwheel-border-width));
content: "";
position: absolute;
border-width: var(--spectrum-colorwheel-border-width);
border-style: solid;
Expand All @@ -110,7 +110,7 @@
display: flex;
align-items: center;
justify-content: center;
margin: var(--mod-colorwheel-colorarea-margin, var(--spectrum-color-wheel-color-area-margin));
margin: var(--mod-colorwheel-colorarea-margin, var(--spectrum-colorwheel-colorarea-margin));
}

.spectrum-ColorWheel-slider {
Expand All @@ -126,7 +126,7 @@
}

.spectrum-ColorWheel-handle {
transform: translate(calc(var(--spectrum-colorwheel-width) / 2 - var(--spectrum-colorwheel-track-width) / 2), 0);
transform: translate(calc(var(--spectrum-colorwheel-width) / 2 - var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width)) / 2), 0);
inset-block-start: 50%;
inset-inline: 50%;
}
Expand All @@ -140,19 +140,6 @@
}
}

/* a clip-path set border-width wider than than spectrum-colorwheel-wheel to create the appreance of a border */
.spectrum-ColorWheel-border {
position: relative;
background-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color));
inline-size: var(--spectrum-colorwheel-width);
block-size: var(--spectrum-colorwheel-height);
clip-path: path(evenodd, var(--mod-colorwheel-path-borders, var(--spectrum-colorwheel-path-borders)));

&.is-disabled {
background-color: var(--highcontrast-colorwheel-border-color-disabled, var(--spectrum-colorwheel-fill-color-disabled));
}
}

.spectrum-ColorWheel-wheel {
position: absolute;
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);
Expand All @@ -162,6 +149,16 @@

&.is-disabled {
pointer-events: none;
background: var(--highcontrast-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled));
background: var(--highcontrast-colorwheel-fill-color-disabled, var(--mod-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled)));
}
}

/* Windows High Contrast Mode */
@media (forced-colors: active) {
.spectrum-ColorWheel {
--highcontrast-colorwheel-border-color-disabled: GrayText;
--highcontrast-colorwheel-fill-color-disabled: Canvas;

forced-color-adjust: none;
}
}

0 comments on commit eb8c57f

Please sign in to comment.