chore: s2 grays migration by pfulton · Pull Request #2583 · adobe/spectrum-css

pfulton · 2024-03-04T20:42:13Z

Description

A bulk find + replace to migrate the grays.

--spectrum-gray-50 -> --spectrum-gray-25
--spectrum-gray75 -> --spectrum-gray-50
--spectrum-gray-100 -> --spectrum-gray-75
--spectrum-gray-200 -> --spectrum-gray-100
--spectrum-gray-300 -> --spectrum-gray-200

Migration guide is here: https://s2.spectrum.corp.adobe.com/page/grays/#migration-guide

Screenshot below:

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:

The documentation pages for at least two other components are still loading, including:

The pages render correctly, are accessible, and are responsive.

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.

Screenshots

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

github-actions · 2024-03-04T20:45:49Z

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

github-actions · 2024-03-04T21:03:04Z

File metrics

Summary

Total size: 3.91 MB^*
Total change (Δ): ⬇ 54.26 KB (-1.34%)
Table reports on changes to a package's main file. Other changes can be found in the collapsed "Details" below.

Package	Size	Δ
actiongroup	5.73 KB	⬇ 2.79 KB
buttongroup	1.38 KB	⬇ 0.53 KB
closebutton	12.28 KB	⬇ 3.86 KB
dial	11.56 KB	⬇ < 0.01 KB
menu	41.11 KB	⬇ 0.26 KB
modal	5.23 KB	⬇ < 0.01 KB
page	0.72 KB	⬇ < 0.01 KB
slider	33.27 KB	⬇ 0.01 KB
splitview	11.42 KB	⬇ < 0.01 KB
table	47.17 KB	⬇ < 0.01 KB
underlay	3.04 KB	⬇ 0.10 KB
tokens	196.12 KB	⬇ 3.61 KB

Details

actiongroup

File	Head	Base	Δ
index-base.css	5.73 KB	8.04 KB	⬇ 2.31 KB (-28.75%)
index-theme.css	0.59 KB	1.06 KB	⬇ 0.49 KB (-45.10%)
index-vars.css	5.73 KB	8.52 KB	⬇ 2.79 KB (-32.74%)
index.css	5.73 KB	8.52 KB	⬇ 2.79 KB (-32.74%)
mods.json	0.25 KB	0.40 KB	⬇ 0.15 KB (-37.47%)
themes/express.css	0.59 KB	0.89 KB	⬇ 0.29 KB (-32.96%)
themes/spectrum.css	0.59 KB	0.79 KB	⬇ 0.20 KB (-24.91%)

buttongroup

File	Head	Base	Δ
index-base.css	1.38 KB	1.90 KB	⬇ 0.53 KB (-27.32%)
index-vars.css	1.38 KB	1.90 KB	⬇ 0.53 KB (-27.32%)
index.css	1.38 KB	1.90 KB	⬇ 0.53 KB (-27.32%)
mods.json	0.15 KB	0.15 KB	-

closebutton

File	Head	Base	Δ
index-base.css	11.64 KB	15.50 KB	⬇ 3.86 KB (-24.91%)
index-theme.css	1.22 KB	1.22 KB	-
index-vars.css	12.28 KB	16.14 KB	⬇ 3.86 KB (-23.92%)
index.css	12.28 KB	16.14 KB	⬇ 3.86 KB (-23.92%)
mods.json	1.05 KB	1.29 KB	⬇ 0.25 KB (-18.93%)
themes/express.css	0.93 KB	0.93 KB	-
themes/spectrum.css	0.92 KB	0.92 KB	-

dial

File	Head	Base	Δ
index-base.css	11.56 KB	11.56 KB	⬇ < 0.01 KB (-0.01%)
index-vars.css	11.56 KB	11.56 KB	⬇ < 0.01 KB (-0.01%)
index.css	11.56 KB	11.56 KB	⬇ < 0.01 KB (-0.01%)
mods.json	1.15 KB	1.15 KB	-

modal

File	Head	Base	Δ
index-base.css	5.23 KB	5.23 KB	⬇ < 0.01 KB (-0.02%)
index-vars.css	5.23 KB	5.23 KB	⬇ < 0.01 KB (-0.02%)
index.css	5.23 KB	5.23 KB	⬇ < 0.01 KB (-0.02%)
mods.json	0.58 KB	0.58 KB	-

page

File	Head	Base	Δ
index-base.css	0.72 KB	0.72 KB	⬇ < 0.01 KB (-0.14%)
index-vars.css	0.72 KB	0.72 KB	⬇ < 0.01 KB (-0.14%)
index.css	0.72 KB	0.72 KB	⬇ < 0.01 KB (-0.14%)

slider

File	Head	Base	Δ
index-base.css	30.96 KB	30.96 KB	⬇ < 0.01 KB (-0.01%)
index-theme.css	2.89 KB	2.89 KB	⬇ < 0.01 KB (-0.10%)
index-vars.css	33.27 KB	33.27 KB	⬇ 0.01 KB (-0.01%)
index.css	33.27 KB	33.27 KB	⬇ 0.01 KB (-0.01%)
mods.json	2.19 KB	2.19 KB	-
themes/express.css	1.75 KB	1.75 KB	-
themes/spectrum.css	1.73 KB	1.74 KB	⬇ < 0.01 KB (-0.17%)

splitview

File	Head	Base	Δ
index-base.css	11.42 KB	11.42 KB	⬇ < 0.01 KB (-0.01%)
index-vars.css	11.42 KB	11.42 KB	⬇ < 0.01 KB (-0.01%)
index.css	11.42 KB	11.42 KB	⬇ < 0.01 KB (-0.01%)
mods.json	0.71 KB	0.71 KB	-

table

File	Head	Base	Δ
index-base.css	47.17 KB	47.17 KB	⬇ < 0.01 KB (-0.00%)
index-vars.css	47.17 KB	47.17 KB	⬇ < 0.01 KB (-0.00%)
index.css	47.17 KB	47.17 KB	⬇ < 0.01 KB (-0.00%)
mods.json	4.01 KB	4.01 KB	-

underlay

File	Head	Base	Δ
index-base.css	3.04 KB	3.14 KB	⬇ 0.10 KB (-3.02%)
index-vars.css	3.04 KB	3.14 KB	⬇ 0.10 KB (-3.02%)
index.css	3.04 KB	3.14 KB	⬇ 0.10 KB (-3.02%)
mods.json	0.48 KB	0.48 KB	-

tokens

File	Head	Base	Δ
css/dark-vars.css	35.34 KB	24.57 KB	⬆ 10.77 KB (43.83%)
css/express/custom-dark-vars.css	0.59 KB	0.59 KB	-
css/express/custom-darkest-vars.css	0.59 KB	0.59 KB	-
css/express/custom-large-vars.css	0.50 KB	0.50 KB	-
css/express/custom-light-vars.css	0.63 KB	0.63 KB	-
css/express/custom-medium-vars.css	0.48 KB	0.48 KB	-
css/express/custom-vars.css	0.04 KB	0.04 KB	-
css/global-vars.css	46.19 KB	38.23 KB	⬆ 7.97 KB (20.84%)
css/large-vars.css	27.35 KB	24.40 KB	⬆ 2.95 KB (12.07%)
css/light-vars.css	35.34 KB	24.55 KB	⬆ 10.79 KB (43.94%)
css/medium-vars.css	27.27 KB	24.33 KB	⬆ 2.94 KB (12.07%)
css/spectrum/custom-dark-vars.css	3.40 KB	3.40 KB	-
css/spectrum/custom-darkest-vars.css	3.40 KB	3.40 KB	-
css/spectrum/custom-large-vars.css	4.94 KB	4.94 KB	-
css/spectrum/custom-light-vars.css	3.40 KB	3.40 KB	-
css/spectrum/custom-medium-vars.css	5.18 KB	5.18 KB	-
css/spectrum/custom-vars.css	2.04 KB	2.04 KB	-
index.css	196.12 KB	199.73 KB	⬇ 3.61 KB (-1.81%)

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

jawinn

Looks good to me! I'm seeing all expected changes according to that migration guide.

Migrates any instance of `--spectrum-gray-50` to use `--spectrum-gray-25` as per the S2 migration guide

Migrates usages of `--spectrum-gray-75` to use `--spectrum-gray-50` as per the s2 migration guide.

Migrates usages of `--spectrum-gray-100` to use `--spectrum-gray-75` as per the s2 migration guide

Migrates usages of `--spectrum-gray-200` to use `--spectrum-gray-100` as per the s2 migration guide

Migrates usages of `--spectrum-gray-300` to use `spectrum-gray-200` as per the s2 migration guide

* chore: migrate gray-50 to gray-25 Migrates any instance of `--spectrum-gray-50` to use `--spectrum-gray-25` as per the S2 migration guide * chore: migrate gray-75 to gray-50 Migrates usages of `--spectrum-gray-75` to use `--spectrum-gray-50` as per the s2 migration guide. * chore: migrate gray-100 to gray-75 Migrates usages of `--spectrum-gray-100` to use `--spectrum-gray-75` as per the s2 migration guide * chore: migrate gray-200 to gray-100 Migrates usages of `--spectrum-gray-200` to use `--spectrum-gray-100` as per the s2 migration guide * chore: migrate gray-300 to gray-200 Migrates usages of `--spectrum-gray-300` to use `spectrum-gray-200` as per the s2 migration guide * chore(infieldbutton): gray-300 to gray-200

pfulton requested a review from jawinn March 4, 2024 20:42

pfulton marked this pull request as ready for review March 4, 2024 20:43

pfulton added the run_vrt For use on PRs looking to kick off VRT label Mar 4, 2024

pfulton added the S2 Spectrum 2 label Mar 4, 2024

pfulton added the ready-for-review label Mar 5, 2024

jawinn approved these changes Mar 6, 2024

View reviewed changes

pfulton added ready-to-merge skip_vrt Add to a PR to skip running VRT (but still pass the action) and removed ready-for-review run_vrt For use on PRs looking to kick off VRT labels Mar 6, 2024

pfulton added 6 commits March 7, 2024 09:12

chore: migrate gray-50 to gray-25

98fc1eb

Migrates any instance of `--spectrum-gray-50` to use `--spectrum-gray-25` as per the S2 migration guide

chore: migrate gray-75 to gray-50

23daf3d

Migrates usages of `--spectrum-gray-75` to use `--spectrum-gray-50` as per the s2 migration guide.

chore: migrate gray-100 to gray-75

baa1fa9

Migrates usages of `--spectrum-gray-100` to use `--spectrum-gray-75` as per the s2 migration guide

chore: migrate gray-200 to gray-100

73a4dc2

Migrates usages of `--spectrum-gray-200` to use `--spectrum-gray-100` as per the s2 migration guide

chore: migrate gray-300 to gray-200

6dd1c21

Migrates usages of `--spectrum-gray-300` to use `spectrum-gray-200` as per the s2 migration guide

chore(infieldbutton): gray-300 to gray-200

14fa247

pfulton force-pushed the pfulton/s2-colors-fix branch from 0db929f to 14fa247 Compare March 7, 2024 14:13

pfulton merged commit c94099c into spectrum-two Mar 7, 2024

pfulton deleted the pfulton/s2-colors-fix branch March 7, 2024 14:24

castastrophe mentioned this pull request Apr 15, 2025

feat(tokens,card): update to @adobe/spectrum-tokens@13.3.0 #3669

Merged

12 tasks

This was referenced May 16, 2025

chore(swatch,menu,swatchgroup): fix reverted metadata assets #3752

Merged

chore: merge latest updates from main #3777

Merged

castastrophe mentioned this pull request Jul 25, 2025

ci: chromatic runs for S2 [CSS-1233] #4070

Merged

3 tasks

castastrophe mentioned this pull request Aug 6, 2025

fix: minor linting updates #4113

Merged

11 tasks

This was referenced Aug 27, 2025

chore(popover): wrapper placement in story #4173

Closed

feat(storybook): chromatic a11y testing #4180

Closed

chore: updating lint-staged file inheritance order #4193

Closed

castastrophe mentioned this pull request Oct 22, 2025

feat(badge): remove modifiers from the API [SWC-1264] #4283

Merged

14 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: s2 grays migration#2583

chore: s2 grays migration#2583
pfulton merged 6 commits into
spectrum-twofrom
pfulton/s2-colors-fix

pfulton commented Mar 4, 2024 •

edited by jawinn

Loading

Uh oh!

github-actions Bot commented Mar 4, 2024 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 4, 2024 •

edited

Loading

actiongroup

buttongroup

closebutton

dial

menu

modal

page

slider

splitview

table

underlay

tokens

Uh oh!

jawinn left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

pfulton commented Mar 4, 2024 • edited by jawinn Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How and where has this been tested?

Validation steps

Regression testing

Screenshots

To-do list

Uh oh!

github-actions Bot commented Mar 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Mar 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

File metrics

Summary

actiongroup

buttongroup

closebutton

dial

menu

modal

page

slider

splitview

table

underlay

tokens

Uh oh!

jawinn left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

pfulton commented Mar 4, 2024 •

edited by jawinn

Loading

github-actions Bot commented Mar 4, 2024 •

edited

Loading

github-actions Bot commented Mar 4, 2024 •

edited

Loading