Skip to content

feat(colorarea): S2 migration #3388

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

Merged
cdransf merged 6 commits into from
Nov 15, 2024
Merged

feat(colorarea): S2 migration #3388

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a79755d
feat(colorarea): s2 migration
cdransf Nov 11, 2024
d551a5b
feat(colorarea): remove redundant property
cdransf Nov 14, 2024
5816d66
feat(colorarea): clarify color + rgb implementation
cdransf Nov 14, 2024
c57dee8
feat(colorarea): fix gradient border-radius
cdransf Nov 14, 2024
696cbf3
feat(colorarea): move forced-colors media query
cdransf Nov 14, 2024
dd5c702
feat(colorarea): update changeset
cdransf Nov 15, 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/spotty-onions-study.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@spectrum-css/colorarea": major
---

# colorarea S2 migration

This change migrates the `colorarea` component to S2. It leverages updated tokens and the `rgba(...)` color function, replacing the existing `TODO` and hardcoded values.
137 changes: 71 additions & 66 deletions components/colorarea/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,87 +9,92 @@ OF ANY KIND, either express or implied. See the License for the specific languag
governing permissions and limitations under the License.
*/
.spectrum-ColorArea {
--spectrum-colorarea-border-radius: var(--spectrum-color-area-border-rounding);
--spectrum-colorarea-border-color: rgba(0, 0, 0, 10%); /* TODO replace with token --spectrum-color-area-border-color and --spectrum-color-area-border-opacity using RGBA function */
--spectrum-colorarea-disabled-background-color: var(--spectrum-disabled-background-color);
--spectrum-colorarea-border-width: var(--spectrum-color-area-border-width);
--spectrum-colorarea-height: var(--spectrum-color-area-height);
--spectrum-colorarea-width: var(--spectrum-color-area-width);
--spectrum-colorarea-min-width: var(--spectrum-color-area-minimum-width);
--spectrum-colorarea-min-height: var(--spectrum-color-area-minimum-height);
}

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

.spectrum-ColorArea {
&.is-disabled {
forced-color-adjust: none;
}
}
--spectrum-colorarea-border-radius: var(--spectrum-color-area-border-rounding);

.spectrum-ColorArea-gradient,
.spectrum-ColorHandle-color {
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-colorarea-border-color-rgb: var(--spectrum-gray-1000-rgb);
Comment thread
marissahuysentruyt marked this conversation as resolved.
--spectrum-colorarea-border-color: rgba(var(--spectrum-colorarea-border-color-rgb), var(--spectrum-color-area-border-opacity));
--spectrum-colorarea-border-width: var(--spectrum-color-area-border-width);
--spectrum-colorarea-disabled-background-color: var(--spectrum-disabled-background-color);
--spectrum-colorarea-height: var(--spectrum-color-area-height);
--spectrum-colorarea-width: var(--spectrum-color-area-width);
--spectrum-colorarea-min-width: var(--spectrum-color-area-minimum-width);
--spectrum-colorarea-min-height: var(--spectrum-color-area-minimum-height);
}

.spectrum-ColorArea {
position: relative;
display: inline-block;
cursor: default;
user-select: none;
min-inline-size: var(--mod-colorarea-min-width, var(--spectrum-colorarea-min-width));
min-block-size: var(--mod-colorarea-min-height, var(--spectrum-colorarea-min-height));
inline-size: var(--mod-colorarea-width, var(--spectrum-colorarea-width));
block-size: var(--mod-colorarea-height, var(--spectrum-colorarea-height));
box-sizing: border-box;
border-radius: var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius));
border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color, var(--mod-colorarea-border-color, var(--spectrum-colorarea-border-color)));
position: relative;
display: inline-block;
cursor: default;
user-select: none;
min-inline-size: var(--mod-colorarea-min-width, var(--spectrum-colorarea-min-width));
min-block-size: var(--mod-colorarea-min-height, var(--spectrum-colorarea-min-height));
inline-size: var(--mod-colorarea-width, var(--spectrum-colorarea-width));
block-size: var(--mod-colorarea-height, var(--spectrum-colorarea-height));
box-sizing: border-box;
border-radius: var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius));
border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color, var(--mod-colorarea-border-color, var(--spectrum-colorarea-border-color)));

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

&.is-disabled {
pointer-events: none;
background: var(--highcontrast-colorarea-fill-color-disabled, var(--mod-colorarea-disabled-background-color, var(--spectrum-colorarea-disabled-background-color)));
border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color-disabled);
&.is-disabled {
pointer-events: none;
background: var(--highcontrast-colorarea-fill-color-disabled, var(--mod-colorarea-disabled-background-color, var(--spectrum-colorarea-disabled-background-color)));
border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color-disabled);

.spectrum-ColorArea-gradient {
display: none;
}
}
.spectrum-ColorArea-gradient {
display: none;
}
}
}

.spectrum-ColorArea-handle {
transform: translate(calc(var(--mod-colorarea-width, var(--spectrum-colorarea-width)) - var(--spectrum-colorarea-border-width)), 0);
inset-block-start: 0;
transform: translate(calc(var(--mod-colorarea-width, var(--spectrum-colorarea-width)) - var(--spectrum-colorarea-border-width)), 0);
inset-block-start: 0;

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

.spectrum-ColorArea-gradient {
inline-size: 100%;
block-size: 100%;
border-radius: var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius));
inline-size: 100%;
block-size: 100%;

/* calc used here to properly calculate the `border-radius` for the gradient such that it aligns with the `border-radius` of the enclosing border */
border-radius: calc(var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius)) - var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)));
}

.spectrum-ColorArea-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;
}

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

.spectrum-ColorArea {
&.is-disabled {
forced-color-adjust: none;
}
}

.spectrum-ColorArea-gradient,
.spectrum-ColorHandle-color {
forced-color-adjust: none;
}
}