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.

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

feat(card,contextualhelp,swatch,tokens): add theme tokens for components to global scope #3253

Merged
merged 2 commits into from
Oct 18, 2024

Conversation

castastrophe
Copy link
Collaborator

@castastrophe castastrophe commented Oct 15, 2024

Description

@spectrum-css/tokens

Add component-level token overrides from card, contextualhelp, swatch, and typography to ensure valid theme toggling.

Light/dark/darkest custom overrides added:

  • --spectrum-card-selected-background-color-rgb
  • --spectrum-swatch-border-color
  • --spectrum-swatch-border-color-light

Medium/large custom overrides added:

  • --spectrum-contextual-help-content-spacing

Global custom overrides added:

  • --spectrum-font-family-ar
  • --spectrum-font-family-he
  • --spectrum-font-family
  • --spectrum-font-style
  • --spectrum-font-size

Component changes

This update removes tokens defined locally that belonged in the global scope. To ensure no regressions, please upgrade your @spectrum-css/tokens package at the same time so you will pick up the component-level definitions now in the global tokens scope. References to .spectrum--(light|dark|darkest|medium|large) have been removed.

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

Regression testing

Validate:

  1. The documentation pages for at least two other components are still loading, including:
  • The pages render correctly, are accessible, and are responsive.
  1. If components have been modified, VRTs have been run on this branch:
  • VRTs have been run and looked at.
  • Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

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. ✨

@castastrophe castastrophe self-assigned this Oct 15, 2024
Copy link

changeset-bot bot commented Oct 15, 2024

🦋 Changeset detected

Latest commit: c3246ca

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

This PR includes changesets to release 5 packages
Name Type
@spectrum-css/tokens Minor
@spectrum-css/contextualhelp Minor
@spectrum-css/swatch Minor
@spectrum-css/card Minor
@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

Copy link
Contributor

github-actions bot commented Oct 15, 2024

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

Copy link
Contributor

github-actions bot commented Oct 15, 2024

File metrics

Summary

Total size: 4.30 MB*
Total change (Δ): 🔴 ⬆ 4.63 KB (0.11%)

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

Package Size Δ
card 20.29 KB 🟢 ⬇ 0.38 KB
contextualhelp 2.56 KB 🟢 ⬇ 0.22 KB
swatch 11.22 KB 🟢 ⬇ 0.40 KB
tokens 411.10 KB 🔴 ⬆ 4.59 KB

Details

card

Filename Head Compared to base
index-base.css 20.29 KB 🟢 ⬇ 0.38 KB (-1.79%)
index-vars.css 20.29 KB 🟢 ⬇ 0.38 KB (-1.79%)
index.css 20.29 KB 🟢 ⬇ 0.38 KB (-1.79%)

contextualhelp

Filename Head Compared to base
index-base.css 2.56 KB 🟢 ⬇ 0.22 KB (-7.84%)
index-vars.css 2.56 KB 🟢 ⬇ 0.22 KB (-7.84%)
index.css 2.56 KB 🟢 ⬇ 0.22 KB (-7.84%)

swatch

Filename Head Compared to base
index-base.css 11.22 KB 🟢 ⬇ 0.40 KB (-3.40%)
index-vars.css 11.22 KB 🟢 ⬇ 0.40 KB (-3.40%)
index.css 11.22 KB 🟢 ⬇ 0.40 KB (-3.40%)

tokens

Filename Head Compared to base
css/components/bridge/actionbutton.css 12.05 KB -
css/components/bridge/actiongroup.css 0.97 KB -
css/components/bridge/alertbanner.css 0.78 KB -
css/components/bridge/assetcard.css 0.76 KB -
css/components/bridge/button.css 35.45 KB -
css/components/bridge/checkbox.css 1.01 KB -
css/components/bridge/clearbutton.css 1.14 KB -
css/components/bridge/closebutton.css 1.06 KB -
css/components/bridge/combobox.css 1.11 KB -
css/components/bridge/datepicker.css 0.74 KB -
css/components/bridge/index.css 64.71 KB -
css/components/bridge/infieldbutton.css 1.96 KB -
css/components/bridge/picker.css 1.87 KB -
css/components/bridge/pickerbutton.css 1.75 KB -
css/components/bridge/popover.css 0.73 KB -
css/components/bridge/radio.css 1.56 KB -
css/components/bridge/rating.css 1.00 KB -
css/components/bridge/search.css 2.03 KB -
css/components/bridge/slider.css 2.11 KB -
css/components/bridge/stepper.css 3.00 KB -
css/components/bridge/switch.css 1.51 KB -
css/components/bridge/tabs.css 0.72 KB -
css/components/bridge/tag.css 3.51 KB -
css/components/bridge/textfield.css 1.20 KB -
css/components/bridge/toast.css 0.75 KB -
css/components/bridge/tooltip.css 0.77 KB -
css/components/express/actionbutton.css 8.96 KB -
css/components/express/actiongroup.css 0.93 KB -
css/components/express/alertbanner.css 0.77 KB -
css/components/express/assetcard.css 0.73 KB -
css/components/express/button.css 29.37 KB -
css/components/express/checkbox.css 0.95 KB -
css/components/express/clearbutton.css 1.03 KB -
css/components/express/closebutton.css 0.96 KB -
css/components/express/combobox.css 1.01 KB -
css/components/express/datepicker.css 0.73 KB -
css/components/express/index.css 51.93 KB -
css/components/express/infieldbutton.css 1.67 KB -
css/components/express/picker.css 1.51 KB -
css/components/express/pickerbutton.css 1.51 KB -
css/components/express/popover.css 0.69 KB -
css/components/express/radio.css 1.35 KB -
css/components/express/rating.css 1.02 KB -
css/components/express/search.css 1.93 KB -
css/components/express/slider.css 1.78 KB -
css/components/express/stepper.css 2.33 KB -
css/components/express/switch.css 1.29 KB -
css/components/express/tabs.css 0.72 KB -
css/components/express/tag.css 3.28 KB -
css/components/express/textfield.css 1.08 KB -
css/components/express/toast.css 0.75 KB -
css/components/express/tooltip.css 0.76 KB -
css/components/spectrum/actionbutton.css 9.15 KB -
css/components/spectrum/actiongroup.css 0.82 KB -
css/components/spectrum/alertbanner.css 0.77 KB -
css/components/spectrum/assetcard.css 0.72 KB -
css/components/spectrum/button.css 29.43 KB -
css/components/spectrum/checkbox.css 0.94 KB -
css/components/spectrum/clearbutton.css 1.00 KB -
css/components/spectrum/closebutton.css 0.95 KB -
css/components/spectrum/combobox.css 1.02 KB -
css/components/spectrum/datepicker.css 0.72 KB -
css/components/spectrum/index.css 52.13 KB -
css/components/spectrum/infieldbutton.css 1.69 KB -
css/components/spectrum/picker.css 1.60 KB -
css/components/spectrum/pickerbutton.css 1.47 KB -
css/components/spectrum/popover.css 0.72 KB -
css/components/spectrum/radio.css 1.35 KB -
css/components/spectrum/rating.css 1.01 KB -
css/components/spectrum/search.css 1.84 KB -
css/components/spectrum/slider.css 1.75 KB -
css/components/spectrum/stepper.css 2.29 KB -
css/components/spectrum/switch.css 1.28 KB -
css/components/spectrum/tabs.css 0.71 KB -
css/components/spectrum/tag.css 3.30 KB -
css/components/spectrum/textfield.css 1.08 KB -
css/components/spectrum/toast.css 0.75 KB -
css/components/spectrum/tooltip.css 0.76 KB -
css/dark-vars.css 25.19 KB -
css/darkest-vars.css 25.14 KB -
css/express/custom-large-vars.css 1.10 KB -
css/express/custom-medium-vars.css 1.09 KB -
css/express/custom-vars.css 0.67 KB -
css/express/dark-vars.css 1.11 KB -
css/express/darkest-vars.css 1.11 KB -
css/express/global-vars.css 3.02 KB -
css/express/index.css 9.86 KB -
css/express/large-vars.css 3.58 KB -
css/express/light-vars.css 1.15 KB -
css/express/medium-vars.css 3.56 KB -
css/global-vars.css 38.84 KB -
css/large-vars.css 25.07 KB -
css/light-vars.css 25.16 KB -
css/medium-vars.css 25.00 KB -
css/spectrum/custom-large-vars.css 5.26 KB 🔴 ⬆ 0.07 KB (1.41%)
css/spectrum/custom-medium-vars.css 5.50 KB 🔴 ⬆ 0.07 KB (1.35%)
css/spectrum/custom-vars.css 3.12 KB 🔴 ⬆ 0.55 KB (20.83%)
css/spectrum/dark-vars.css 4.43 KB 🔴 ⬆ 0.56 KB (14.07%)
css/spectrum/darkest-vars.css 4.42 KB 🔴 ⬆ 0.56 KB (14.08%)
css/spectrum/global-vars.css 5.84 KB 🔴 ⬆ 0.55 KB (10.12%)
css/spectrum/index.css 30.93 KB 🔴 ⬆ 2.28 KB (7.96%)
css/spectrum/large-vars.css 7.56 KB 🔴 ⬆ 0.07 KB (0.98%)
css/spectrum/light-vars.css 4.41 KB 🔴 ⬆ 0.55 KB (13.80%)
css/spectrum/medium-vars.css 7.80 KB 🔴 ⬆ 0.07 KB (0.95%)
index.css 201.54 KB 🔴 ⬆ 2.31 KB (1.16%)
* 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.

@castastrophe castastrophe added size-3 M ~18-30hrs; moderate effort or complexity, several work days needed. run_vrt For use on PRs looking to kick off VRT ready-for-review s1 labels Oct 15, 2024
@castastrophe castastrophe marked this pull request as ready for review October 15, 2024 14:23
@castastrophe castastrophe added skip_vrt Add to a PR to skip running VRT (but still pass the action) and removed run_vrt For use on PRs looking to kick off VRT labels Oct 15, 2024
@castastrophe
Copy link
Collaborator Author

VRTs were run and showed no changes

Copy link
Collaborator

@5t3ph 5t3ph left a comment

Choose a reason for hiding this comment

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

[nit] some of the updates have a larger indentation, but that's non-blocking :)

@castastrophe
Copy link
Collaborator Author

@5t3ph good point! I updated the commit with spacing fixes.

Copy link
Member

@cdransf cdransf left a comment

Choose a reason for hiding this comment

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

Looks good to me — don't see anything out of place or needing to be changed.

@pfulton pfulton added run_vrt For use on PRs looking to kick off VRT skip_vrt Add to a PR to skip running VRT (but still pass the action) and removed skip_vrt Add to a PR to skip running VRT (but still pass the action) run_vrt For use on PRs looking to kick off VRT labels Oct 18, 2024
@pfulton pfulton merged commit 47f23a7 into main Oct 18, 2024
12 checks passed
@pfulton pfulton deleted the feat-theme-tokens-added branch October 18, 2024 21:10
@github-actions github-actions bot mentioned this pull request Oct 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ready-to-merge s1 size-3 M ~18-30hrs; moderate effort or complexity, several work days needed. skip_vrt Add to a PR to skip running VRT (but still pass the action)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants