Skip to content

Commit

Permalink
feat(colorwheel): s2 migration
Browse files Browse the repository at this point in the history
  • Loading branch information
@cdransf
cdransf committed Nov 12, 2024
1 parent b91a202 commit 2771428
Show file tree
Hide file tree
Showing 2 changed files with 101 additions and 92 deletions.
7 changes: 7 additions & 0 deletions .changeset/giant-windows-smoke.md
View file
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
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 2771428

Please sign in to comment.