fix(*): define missing custom properties from theme directory #3476

cdransf · 2025-01-03T19:41:58Z

Description

fixes missing custom properties by transferring them from s2-foundations-redux

To-do list

I have read the contribution guidelines.
I have updated relevant storybook stories and templates.
I have tested these changes in Windows High Contrast mode.
If my change impacts other components, I have tested to make sure they don't break.
If my change impacts documentation, I have updated the documentation accordingly.
✨ This pull request is ready to merge. ✨

changeset-bot · 2025-01-03T19:42:01Z

🦋 Changeset detected

Latest commit: b4c0701

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 7 packages

Name	Type
@spectrum-css/infieldbutton	Patch
@spectrum-css/actionbutton	Patch
@spectrum-css/clearbutton	Patch
@spectrum-css/avatar	Patch
@spectrum-css/button	Patch
@spectrum-css/dialog	Patch
@spectrum-css/preview	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2025-01-03T19:43:34Z

🚀 Deployed on https://pr-3476--spectrum-css.netlify.app

github-actions · 2025-01-03T19:46:26Z

File metrics

Summary

Total size: 1.73 MB^*
Total change (Δ): 🔴 ⬆ 1.02 KB (0.06%)

Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.

Package	Size	Δ
actionbutton	22.08 KB	🟢 ⬇ 0.15 KB
avatar	6.55 KB	🟢 ⬇ 0.05 KB
button	29.96 KB	🔴 ⬆ 0.23 KB
clearbutton	5.89 KB	🔴 ⬆ 0.25 KB
dialog	15.04 KB	🟢 ⬇ 0.05 KB
infieldbutton	15.59 KB	🔴 ⬆ 0.80 KB

Details

actionbutton

Filename	Head	Compared to base
index.css	22.08 KB	🟢 ⬇ 0.15 KB (-0.67%)

avatar

Filename	Head	Compared to base
index.css	6.55 KB	🟢 ⬇ 0.05 KB (-0.75%)

button

Filename	Head	Compared to base
index.css	29.96 KB	🔴 ⬆ 0.23 KB (0.77%)

clearbutton

Filename	Head	Compared to base
index.css	5.89 KB	🔴 ⬆ 0.25 KB (4.25%)

dialog

Filename	Head	Compared to base
index.css	15.04 KB	🟢 ⬇ 0.05 KB (-0.32%)

infieldbutton

Filename	Head	Compared to base
index.css	15.59 KB	🔴 ⬆ 0.80 KB (5.26%)

* Size determined by adding together the size of the main file for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

marissahuysentruyt

Nice work on this! I just wanted to double check with you on some of those action button "unused custom properties" (I left a comment). Otherwise, I didn't get any linter warnings/errors for each of the components ✅

marissahuysentruyt · 2025-01-03T21:08:16Z

components/actionbutton/index.css

@@ -410,3 +361,43 @@ a.spectrum-ActionButton {
 	/* Augment the margin correction for the icon only scenario */
 	margin-inline-start: calc(var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-edge-to-text));
 }
+
+@media (forced-colors: active) {


👏 love the consistency in moving this to the bottom of the file

marissahuysentruyt · 2025-01-03T22:49:54Z

components/actionbutton/index.css


 	--spectrum-actionbutton-border-color-default: var(--highcontrast-actionbutton-border-color-default, var(--mod-actionbutton-border-color-default, var(--spectrum-gray-400)));
 	--spectrum-actionbutton-border-color-hover: var(--highcontrast-actionbutton-border-color-hover, var(--mod-actionbutton-border-color-hover, var(--spectrum-gray-500)));
 	--spectrum-actionbutton-border-color-down: var(--highcontrast-actionbutton-border-color-down, var(--mod-actionbutton-border-color-down, var(--spectrum-gray-600)));
 	--spectrum-actionbutton-border-color-focus: var(--highcontrast-actionbutton-border-color-focus, var(--mod-actionbutton-border-color-focus, var(--spectrum-gray-500)));
 	--spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color);
-
-	--spectrum-actionbutton-content-color-selected: var(--spectrum-gray-50);
+	--spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-content-color);


I think I saw you ask this in the channel about this (maybe?), but this definition is from main, yeah? Just making sure I verified it in the right place!

It is — it's not in s2-foundations-redux (the custom property isn't present in index.css or spectrum-two.css and it's not used in index.css). --spectrum-disabled-content-color is widely used though, so I'm comfortable with this alias (but I'm I don't have strong opinions either way).

marissahuysentruyt · 2025-01-03T23:00:38Z

components/actionbutton/index.css

-	--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-100);
-
-	--spectrum-actionbutton-background-color-selected: var(--spectrum-neutral-background-color-selected-default);
-	--spectrum-actionbutton-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover);
-	--spectrum-actionbutton-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down);
-	--spectrum-actionbutton-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus);


Looks like these were all just "Unused custom properties," which I get why we would remove. But are these the values we should be using?

spectrum-css/components/actionbutton/themes/spectrum-two.css

Line 20 in 9c3a625

--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-100);

How does that work is the spectrum-two.css in the foundations branch? It's late on a Friday so my brain might not be working hahaha

Ah, good catch! It looks like those are unused because we replaced fallback definitions for quite a few mods with more generic Spectrum tokens. Those custom properties had been used here:

--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default)); --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover)); --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-neutral-background-color-selected-down)); --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-neutral-background-color-selected-key-focus));

I know — in a lot of cases — we'll create component-specific aliases for tokens, but the implementation on spectrum-two isn't doing that. For example:

s2-foundations-redux

--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-actionbutton-background-color-selected)); --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-actionbutton-background-color-selected-hover)); --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-actionbutton-background-color-selected-down)); --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-actionbutton-background-color-selected-focus)); --mod-actionbutton-background-color-disabled: var(--spectrum-actionbutton-background-color-selected-disabled); --mod-actionbutton-border-color-default: transparent; --mod-actionbutton-border-color-hover: transparent; --mod-actionbutton-border-color-down: transparent; --mod-actionbutton-border-color-focus: transparent; --mod-actionbutton-border-color-disabled: transparent; --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-actionbutton-content-color-selected)); --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-actionbutton-content-color-selected)); --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-actionbutton-content-color-selected)); --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-actionbutton-content-color-selected));

spectrum-two

--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default)); --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover)); --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-neutral-background-color-selected-down)); --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-neutral-background-color-selected-key-focus)); --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-gray-25)); --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-gray-25)); --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-gray-25)); --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-gray-25));

Redux used the aliasing pattern, but the spectrum-two branch doesn't, so I'm not sure which pattern or direction to take. 😅 Does the fact that they're mods factor in too?

Happy Monday 👋 Just wanted to clarify this comment. It looks like in s2-foundations-redux that at least --spectrum-actionbutton-background-color-selected-disabled is in fact used:

spectrum-css/components/actionbutton/index.css

Line 136 in 9c3a625

--mod-actionbutton-background-color-disabled: var(--spectrum-actionbutton-background-color-selected-disabled);

I guess my question is the same, how are we reconciling what's going on in the foundations branch or main? I feel like I'm missing something 😵‍💫 maybe I'm thinking too hard, or not even looking in the right files.

Ahhh, that makes sense! I pushed up 08087d which restores those and references that went missing from s2-foundations-redux.

rise-erpelding

Wow, this ended up being quite the collection of components, especially with actionbutton and dialog in the mix! It looks like you took care of all the no undefined custom props warnings, so that's great!

I think there are a few remaining oddities particularly with actionbutton, like the selected state content color (and also the default/disabled state border, which I didn't comment on within the code because I wasn't able to figure out if that was because of a missing/undefined custom prop or something else). Hopefully we can resolve them here, or if not, in the S2 migration. I'd also noticed that when I was running yarn build on this branch that there were some lingering metadata changes that needed to be committed, but that may or may not still be an issue if your branch has been updated since then.

rise-erpelding · 2025-01-06T19:08:28Z

components/dialog/index.css

@@ -414,6 +414,6 @@

 @media (forced-colors: active) {
 	.spectrum-Dialog {
-		border: 1px solid var(--highcontrast-standard-dialog-border-color, rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity)));
+		border: 1px solid rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity));


Judging by what Marissa had done in her dialog migration PR #2860, this is probably the right call, but I'm not able to verify what it looks like because Dialog is looking like this for me:

Is anyone else having the same experience? If so, maybe we can make a follow-up card to look into this issue since it seems unrelated to the current fixes in this PR (if one doesn't already exist)?

Unless @marissahuysentruyt remembers the migration well enough and can spot something missing that would fix it here.

Got it! I'm seeing the same but had gone ahead and lifted it from the S2 theme file on the redux branch. I'll wait for @marissahuysentruyt to chime in,

rise-erpelding · 2025-01-06T19:45:00Z

components/actionbutton/index.css

-		--mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-neutral-background-color-selected-down));
-		--mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-neutral-background-color-selected-key-focus));
-
-		--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-gray-25));


Do we still need this (and maybe the hover, down, focus colors here)? I'm seeing selected content color coming through like this now, looking black:

Ohh nice catch! The first block of mods had been restored, but not --mod-actionbutton-content-color-default. Restoring that fixes the selected button state:

cdransf · 2025-01-06T20:39:54Z

Wow, this ended up being quite the collection of components, especially with actionbutton and dialog in the mix! It looks like you took care of all the no undefined custom props warnings, so that's great!

I think there are a few remaining oddities particularly with actionbutton, like the selected state content color (and also the default/disabled state border, which I didn't comment on within the code because I wasn't able to figure out if that was because of a missing/undefined custom prop or something else). Hopefully we can resolve them here, or if not, in the S2 migration. I'd also noticed that when I was running yarn build on this branch that there were some lingering metadata changes that needed to be committed, but that may or may not still be an issue if your branch has been updated since then.

I left a few comments, fixed the actionbutton selected state and updated the metadata ✨

cdransf added the size-1 XS ~1-6hrs; nearly trivial, a few hours, could do more than one in a single day. label Jan 3, 2025

cdransf requested review from rise-erpelding and marissahuysentruyt January 3, 2025 19:41

cdransf self-assigned this Jan 3, 2025

cdransf force-pushed the cdransf/undefined-token-fixes-css-1084 branch from d72049e to 1303a5e Compare January 3, 2025 22:10

marissahuysentruyt reviewed Jan 3, 2025

View reviewed changes

cdransf added skip_vrt Add to a PR to skip running VRT (but still pass the action) ready-for-review labels Jan 3, 2025

cdransf force-pushed the cdransf/undefined-token-fixes-css-1084 branch 3 times, most recently from 2f3fc28 to 16ddbc6 Compare January 6, 2025 17:10

rise-erpelding requested changes Jan 6, 2025

View reviewed changes

cdransf added 3 commits January 6, 2025 12:41

fix(*): define missing custom properties from theme directory

677aa8e

fix(*): restore missing mods and tokens

e129aea

fix(*): restore missing mod and update metadata

b4c0701

cdransf force-pushed the cdransf/undefined-token-fixes-css-1084 branch from 4341683 to b4c0701 Compare January 6, 2025 20:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(*): define missing custom properties from theme directory #3476

fix(*): define missing custom properties from theme directory #3476

cdransf commented Jan 3, 2025

changeset-bot bot commented Jan 3, 2025 •

edited

Loading

github-actions bot commented Jan 3, 2025 •

edited

Loading

github-actions bot commented Jan 3, 2025 •

edited

Loading

actionbutton

avatar

button

clearbutton

dialog

infieldbutton

marissahuysentruyt left a comment •

edited

Loading

marissahuysentruyt Jan 3, 2025

marissahuysentruyt Jan 3, 2025

cdransf Jan 3, 2025

marissahuysentruyt Jan 3, 2025

cdransf Jan 3, 2025

marissahuysentruyt Jan 6, 2025

cdransf Jan 6, 2025

rise-erpelding left a comment

rise-erpelding Jan 6, 2025

cdransf Jan 6, 2025

rise-erpelding Jan 6, 2025

cdransf Jan 6, 2025

cdransf commented Jan 6, 2025

fix(*): define missing custom properties from theme directory #3476

Are you sure you want to change the base?

fix(*): define missing custom properties from theme directory #3476

Conversation

cdransf commented Jan 3, 2025

Description

To-do list

changeset-bot bot commented Jan 3, 2025 • edited Loading

🦋 Changeset detected

github-actions bot commented Jan 3, 2025 • edited Loading

github-actions bot commented Jan 3, 2025 • edited Loading

File metrics

Summary

actionbutton

avatar

button

clearbutton

dialog

infieldbutton

marissahuysentruyt left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rise-erpelding left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cdransf commented Jan 6, 2025

changeset-bot bot commented Jan 3, 2025 •

edited

Loading

github-actions bot commented Jan 3, 2025 •

edited

Loading

github-actions bot commented Jan 3, 2025 •

edited

Loading

marissahuysentruyt left a comment •

edited

Loading