Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(colorwheel): S2 migration #3390

Open
wants to merge 2 commits into
base: spectrum-two
Choose a base branch
from
+105 −92
Open

feat(colorwheel): S2 migration #3390

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ca65bbb
feat(colorwheel): s2 migration
cdransf Nov 12, 2024
f3be898
feat(colorwheel): address undefined tokens
cdransf Nov 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/giant-windows-smoke.md
View file
Open in desktop
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.
190 changes: 98 additions & 92 deletions components/colorwheel/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,126 +10,132 @@ 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);

/* @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);
cdransf marked this conversation as resolved.
Show resolved Hide resolved

/* @TODO: using explicit value as `color-wheel-border-opacity` is undefined. */
--spectrum-colorwheel-border-opacity: 0.1;
cdransf marked this conversation as resolved.
Show resolved Hide resolved
--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);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm...so everything checks out right now. The border width is 1px, and if I inspect the Figma component, it also has a 1px border.

Screenshot 2024-11-13 at 4 16 07 PM

However, I read the blurb in the desktop file, and it says that the color wheel is supposed to have a 2px border? You may have already done this, but I was going to suggest we double check this with design. This change isn't listed in the changelog in Figma, so I think maybe this is outdated information. Maybe design would want to correct that 2px thing? Or update border-width-100?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I went ahead and added a comment about this to the thread I dropped into the implementations channel. I'll get both updated pending some clarification. ✨

--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%;
cdransf marked this conversation as resolved.
Show resolved Hide resolved
}

.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)));
}
}
Loading