Skip to content

Commit

Permalink
feat(colorarea): S2 migration (#3388)
Browse files Browse the repository at this point in the history 
* feat(colorarea): s2 migration

* feat(colorarea): remove redundant property

* feat(colorarea): clarify color + rgb implementation

* feat(colorarea): fix gradient border-radius

* feat(colorarea): move forced-colors media query

* feat(colorarea): update changeset
  • Loading branch information
@cdransf
cdransf authored Nov 15, 2024
1 parent 2c62239 commit 8aa61a9
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 66 deletions.
7 changes: 7 additions & 0 deletions .changeset/spotty-onions-study.md
View file
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
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);
--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;
}
}

0 comments on commit 8aa61a9

Please sign in to comment.