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

🚨 DO NOT MERGE 🚨 - feat(tokens)!: Migrate to Spectrum 2 "foundations" #2713

Closed
wants to merge 9 commits into from

Conversation

pfulton
Copy link
Collaborator

@pfulton pfulton commented Apr 29, 2024

🚨 DO NOT MERGE

Spectrum 2 Foundations

  • darkest theme deprecated and removed; light and dark are the two color "themes" in S2
  • express removed
  • "manual" migration for grays as per the S2 colors migration guide
    • --spectrum-gray-50 -> --spectrum-gray-25
    • --spectrum-gray-75 -> --spectrum-gray-50
    • --spectrum-gray-100 -> --spectrum-gray-75
    • --spectrum-gray-200 -> --spectrum-gray-100
    • --spectrum-gray-300 -> --spectrum-gray-200

I'm going to try to keep my commits logically separated so that this work is a little less taxing to review. I'd suggest that reviewers look commit-by-commit at the changes rather than referring to the "files changed" diffs.

If this branch becomes too difficult to manage before we merge, we can look for opportunities to squash some commits (the grays migrations are probably good candidates for this)


Description

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.

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

Copy link

changeset-bot bot commented Apr 29, 2024

⚠️ No Changeset found

Latest commit: 6280e7e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

@pfulton pfulton added wip This is a work in progress, don't judge. do not merge A flag for a branch indicating it should not be merged. S2 Spectrum 2 run_vrt For use on PRs looking to kick off VRT labels Apr 29, 2024
@pfulton pfulton changed the title feat(tokens)!: Migrate to Spectrum 2 🚨 DO NOT MERGE 🚨 - feat(tokens)!: Migrate to Spectrum 2 "foundations" Apr 29, 2024
Copy link
Contributor

github-actions bot commented Apr 29, 2024

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

Copy link
Contributor

github-actions bot commented Apr 29, 2024

File metrics

Summary

Total size: 4.47 MB*
Total change (Δ): ⬇ 9.53 KB (-0.21%)

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

Package Size Δ
assetcard 16.13 KB ⬇ < 0.01 KB
card 20.84 KB ⬇ < 0.01 KB
dial 11.78 KB ⬇ < 0.01 KB
modal 5.40 KB ⬇ < 0.01 KB
page 0.72 KB ⬇ < 0.01 KB
site 14.52 KB ⬇ < 0.01 KB
slider 32.73 KB ⬇ 0.01 KB
splitview 11.26 KB ⬇ < 0.01 KB
table 47.02 KB ⬇ < 0.01 KB
tokens 194.63 KB ⬇ 4.58 KB

Details

assetcard

File Head Base Δ
index-base.css 15.93 KB 15.94 KB ⬇ < 0.01 KB (-0.01%)
index-theme.css 0.79 KB 0.79 KB -
index-vars.css 16.13 KB 16.13 KB ⬇ < 0.01 KB (-0.01%)
index.css 16.13 KB 16.13 KB ⬇ < 0.01 KB (-0.01%)
metadata.json 8.92 KB 8.92 KB ⬇ < 0.01 KB (-0.01%)
themes/express.css 0.70 KB 0.70 KB -
themes/spectrum.css 0.69 KB 0.69 KB -

card

File Head Base Δ
index-base.css 20.84 KB 20.84 KB ⬇ < 0.01 KB (-0.00%)
index-vars.css 20.84 KB 20.84 KB ⬇ < 0.01 KB (-0.00%)
index.css 20.84 KB 20.84 KB ⬇ < 0.01 KB (-0.00%)
metadata.json 9.73 KB 9.73 KB ⬇ < 0.01 KB (-0.01%)

dial

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

modal

File Head Base Δ
index-base.css 5.40 KB 5.40 KB ⬇ < 0.01 KB (-0.02%)
index-vars.css 5.40 KB 5.40 KB ⬇ < 0.01 KB (-0.02%)
index.css 5.40 KB 5.40 KB ⬇ < 0.01 KB (-0.02%)
metadata.json 1.82 KB 1.82 KB ⬇ < 0.01 KB (-0.05%)

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%)
metadata.json 0.15 KB 0.15 KB ⬇ < 0.01 KB (-0.68%)

site

File Head Base Δ
index-base.css 14.52 KB 14.52 KB ⬇ < 0.01 KB (-0.02%)
index-vars.css 14.52 KB 14.52 KB ⬇ < 0.01 KB (-0.02%)
index.css 14.52 KB 14.52 KB ⬇ < 0.01 KB (-0.02%)
metadata.json 5.63 KB 5.63 KB ⬇ < 0.01 KB (-0.02%)

slider

File Head Base Δ
index-base.css 30.40 KB 30.40 KB ⬇ < 0.01 KB (-0.01%)
index-theme.css 2.92 KB 2.92 KB ⬇ < 0.01 KB (-0.10%)
index-vars.css 32.73 KB 32.74 KB ⬇ 0.01 KB (-0.01%)
index.css 32.73 KB 32.74 KB ⬇ 0.01 KB (-0.01%)
metadata.json 14.06 KB 14.06 KB ⬇ < 0.01 KB (-0.01%)
themes/express.css 1.76 KB 1.76 KB -
themes/spectrum.css 1.73 KB 1.73 KB ⬇ < 0.01 KB (-0.17%)

splitview

File Head Base Δ
index-base.css 11.26 KB 11.26 KB ⬇ < 0.01 KB (-0.01%)
index-vars.css 11.26 KB 11.26 KB ⬇ < 0.01 KB (-0.01%)
index.css 11.26 KB 11.26 KB ⬇ < 0.01 KB (-0.01%)
metadata.json 4.58 KB 4.58 KB ⬇ < 0.01 KB (-0.02%)

table

File Head Base Δ
index-base.css 47.02 KB 47.02 KB ⬇ < 0.01 KB (-0.00%)
index-vars.css 47.02 KB 47.02 KB ⬇ < 0.01 KB (-0.00%)
index.css 47.02 KB 47.02 KB ⬇ < 0.01 KB (-0.00%)
metadata.json 21.87 KB 21.88 KB ⬇ < 0.01 KB (-0.00%)

tokens

File Head Base Δ
css/dark-vars.css 36.32 KB 24.57 KB ⬆ 11.74 KB (47.79%)
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 44.45 KB 38.23 KB ⬆ 6.23 KB (16.29%)
css/large-vars.css 26.76 KB 24.40 KB ⬆ 2.36 KB (9.66%)
css/light-vars.css 36.31 KB 24.55 KB ⬆ 11.76 KB (47.90%)
css/medium-vars.css 26.68 KB 24.33 KB ⬆ 2.35 KB (9.66%)
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.68 KB 4.68 KB -
css/spectrum/custom-light-vars.css 3.40 KB 3.40 KB -
css/spectrum/custom-medium-vars.css 4.92 KB 4.92 KB -
css/spectrum/custom-vars.css 2.04 KB 2.04 KB -
index.css 194.63 KB 199.21 KB ⬇ 4.58 KB (-2.30%)
css/darkest-vars.css - 24.53 KB 🚨 deleted, moved, or renamed
css/express/global-vars.css - 2.39 KB 🚨 deleted, moved, or renamed
css/express/large-vars.css - 2.52 KB 🚨 deleted, moved, or renamed
css/express/medium-vars.css - 2.51 KB 🚨 deleted, moved, or renamed
css/spectrum/global-vars.css - 2.74 KB 🚨 deleted, moved, or renamed
css/spectrum/large-vars.css - 2.32 KB 🚨 deleted, moved, or renamed
css/spectrum/medium-vars.css - 2.32 KB 🚨 deleted, moved, or renamed
* 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.

@@ -120,7 +120,7 @@ governing permissions and limitations under the License.
);

/* Divider */
--spectrum-accordion-divider-color: var(--spectrum-gray-300);
--spectrum-accordion-divider-color: var(--spectrum-gray-200);
Copy link
Collaborator

@Rajdeepc Rajdeepc Apr 30, 2024

Choose a reason for hiding this comment

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

In the context of upgrade this make sense, but is there a direction forward given --spectrum-accordion-divider-color will be referenced in both S1 and S2 in swc? Won't this be a custom DIY token rather?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

(cc: @jnjosh) This is a good call-out, and just one example of a place where this will likely need to be addressed.

@pfulton pfulton force-pushed the s2-foundations branch 2 times, most recently from 17e47b1 to f8c4972 Compare May 1, 2024 19:37
@pfulton pfulton removed the run_vrt For use on PRs looking to kick off VRT label May 7, 2024
BREAKING CHANGE: migrates Spectrum CSS to Spectrum 2
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
do not merge A flag for a branch indicating it should not be merged. S2 Spectrum 2 wip This is a work in progress, don't judge.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants