Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(colorwheel): s2 migration
Browse files Browse the repository at this point in the history
cdransf committed Dec 18, 2024
1 parent 213f61b commit e70a3dd
Showing 2 changed files with 101 additions and 92 deletions.
7 changes: 7 additions & 0 deletions .changeset/giant-windows-smoke.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@spectrum-css/colorwheel": major
---

# colorwheel S2 migration

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.
186 changes: 94 additions & 92 deletions components/colorwheel/index.css
Original file line number Diff line number Diff line change
@@ -10,126 +10,128 @@ OF ANY KIND, either express or implied. See the License for the specific languag
governing permissions and limitations under the License.
*/
.spectrum-ColorWheel {
--spectrum-colorwheel-width: var(--spectrum-color-wheel-width);
--spectrum-colorwheel-min-width: var(--spectrum-color-wheel-minimum-width);
--spectrum-colorwheel-height: var(--spectrum-color-wheel-width);
--spectrum-colorwheel-border-color: var(--spectrum-transparent-black-200);
--spectrum-colorwheel-border-width: var(--spectrum-border-width-100);
--spectrum-colorwheel-fill-color-disabled: var(--spectrum-disabled-background-color);
--spectrum-colorwheel-track-width: var(--spectrum-color-control-track-width);
--spectrum-colorwheel-colorarea-margin: var(--spectrum-color-wheel-color-area-margin);
--spectrum-colorwheel-colorhandle-position: calc((var(--spectrum-colorwheel-width) / 2) - (var(--spectrum-colorwheel-track-width) / 2));
--spectrum-colorwheel-width: var(--spectrum-color-wheel-width);
--spectrum-colorwheel-min-width: var(--spectrum-color-wheel-minimum-width);
--spectrum-colorwheel-height: var(--spectrum-color-wheel-width);
--spectrum-colorwheel-border-color-rgb: var(--spectrum-gray-1000-rgb);
--spectrum-colorwheel-border-opacity: 0.1;
--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-fill-color-disabled: var(--spectrum-disabled-background-color);
--spectrum-colorwheel-track-width: var(--spectrum-color-control-track-width);
--spectrum-colorwheel-colorarea-margin: var(--spectrum-color-wheel-color-area-margin);
--spectrum-colorwheel-colorhandle-position: calc((var(--spectrum-colorwheel-width) / 2) - (var(--spectrum-colorwheel-track-width) / 2));
}

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

.spectrum-ColorWheel {
forced-color-adjust: none;
}
.spectrum-ColorWheel {
--highcontrast-colorwheel-border-color-disabled: GrayText;
--highcontrast-colorwheel-fill-color-disabled: Canvas;
}

.spectrum-ColorWheel {
forced-color-adjust: none;
}
}

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

&.is-focused {
z-index: 2;
}

/* --track-width and --border-width to be used with JS in calculating the clip-path paths and colorarea-container-size */
--track-width: var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width));
--border-width: var(--mod-colorwheel-border-width, var(--spectrum-colorwheel-border-width));

&.is-disabled {
pointer-events: none;
}

&.is-dragged {
/* Be on top when dragging so loupe can overlap */
z-index: 2;
}
position: relative;
display: block;
min-inline-size: var(--mod-colorwheel-min-width, var(--spectrum-colorwheel-min-width));
inline-size: var(--mod-colorwheel-width, var(--spectrum-colorwheel-width));
block-size: var(--mod-colorwheel-height, var(--spectrum-colorwheel-height));
user-select: none;
cursor: default;

&.is-focused {
z-index: 2;
}

/* --track-width and --border-width to be used with JS in calculating the clip-path paths and colorarea-container-size */
--track-width: var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width));
--border-width: var(--mod-colorwheel-border-width, var(--spectrum-colorwheel-border-width));

&.is-disabled {
pointer-events: none;
}

&.is-dragged {
/* Be on top when dragging so loupe can overlap */
z-index: 2;
}
}

.spectrum-ColorWheel-inner {
display: flex;
position: absolute;
inset-inline-start: 0;
inset-inline-end: 0;
inset-block-start: 0;
inset-block-end: 0;
inline-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size));
block-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size));
margin: auto;
display: flex;
position: absolute;
inset-inline-start: 0;
inset-inline-end: 0;
inset-block-start: 0;
inset-block-end: 0;
inline-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size));
block-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size));
margin: auto;
}

.spectrum-ColorWheel-colorarea-container {
block-size: auto;
inline-size: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: var(--mod-colorwheel-colorarea-margin, var(--spectrum-colorwheel-colorarea-margin));
block-size: auto;
inline-size: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: var(--mod-colorwheel-colorarea-margin, var(--spectrum-colorwheel-colorarea-margin));
}

.spectrum-ColorWheel-slider {
opacity: 0;
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
inline-size: 100%;
block-size: 100%;
z-index: 0;
margin: 0;
pointer-events: none;
opacity: 0;
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
inline-size: 100%;
block-size: 100%;
z-index: 0;
margin: 0;
pointer-events: none;
}

.spectrum-ColorWheel-handle {
transform: translate(var(--spectrum-colorwheel-colorhandle-position), 0);
inset-block-start: 50%;
inset-inline: 50%
transform: translate(var(--spectrum-colorwheel-colorhandle-position), 0);
inset-block-start: 50%;
inset-inline: 50%;
}

.spectrum-ColorWheel-ColorArea-handle {
inset-block-start: 0;
inset-inline-end: 0;
inset-block-start: 0;
inset-inline-end: 0;

&:dir(rtl) {
inset-inline-start: 0;
}
&:dir(rtl) {
inset-inline-start: 0;
}
}

/* 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(--mod-colorwheel-width, var(--spectrum-colorwheel-width));
block-size: var(--mod-colorwheel-height, 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(--mod-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled)));
}
position: relative;
background-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color));
inline-size: var(--mod-colorwheel-width, var(--spectrum-colorwheel-width));
block-size: var(--mod-colorwheel-height, 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(--mod-colorwheel-fill-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);
inset-block: var(--spectrum-colorwheel-border-width);
inset-inline: var(--spectrum-colorwheel-border-width);
clip-path: path(evenodd, var(--mod-colorwheel-path, var(--spectrum-colorwheel-path)));

&.is-disabled {
pointer-events: none;
background: var(--highcontrast-colorwheel-fill-color-disabled, var(--mod-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled)));
}
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);
inset-block: var(--spectrum-colorwheel-border-width);
inset-inline: var(--spectrum-colorwheel-border-width);
clip-path: path(evenodd, var(--mod-colorwheel-path, var(--spectrum-colorwheel-path)));

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

0 comments on commit e70a3dd

Please sign in to comment.