Skip to content

refactor: replace hardcoded spacing values with semantic tokens#12294

Merged
lokesh merged 5 commits intointernetarchive:masterfrom
Armansiddiqui9:refactor-css
Apr 7, 2026
Merged

refactor: replace hardcoded spacing values with semantic tokens#12294
lokesh merged 5 commits intointernetarchive:masterfrom
Armansiddiqui9:refactor-css

Conversation

@Armansiddiqui9
Copy link
Copy Markdown
Contributor

Issue #11555

refactor

Technical

Replaces hardcoded spacing values across base and component CSS files
with semantic spacing tokens from the design token system. This improves
consistency and maintainability by centralizing spacing decisions.

Files changed:

  • static/css/base/ — common.css, dl.css, headings.css, helpers-common.css, helpers-misc.css
  • static/css/components/ — carousel.css, buttonCta.css, buttonBtn.css,
    buttonGhost.css, buttonLink.css, buttonsAndLinks.css, book.css, cbox.css,
    check-in.css, diff.css, admin-table.css, author-infobox.css,
    category-item.css, chart.css, chart-stats.css, compact-title.css,
    edit-toolbar--tablet.css

Testing

  1. Run npm run lint:css — should pass with no errors
  2. Run npm run build-assets:css — should compile successfully
  3. Visit localhost:8080 and check:
    • Homepage carousels
    • Any book page e.g. /books/OL24152177M/Robinson_Crusoe
    • Any subject page e.g. /subjects/fantasy
    • Author pages
    • Edit/diff pages

Screenshot

Screenshot 2026-04-05 234115 Screenshot 2026-04-05 233530 Screenshot 2026-04-05 233331 Screenshot 2026-04-05 232827

Stakeholders

@lokesh

@Armansiddiqui9
Copy link
Copy Markdown
Contributor Author

Bundle Size Note

page-book.css exceeds the bundle size limit by ~110 bytes (15.61 KB vs 15.5 KB).
This is an expected side effect of the token refactor because CSS variable names are
longer strings than raw px values.

Should the limit in bundlesize.config.json be updated to reflect this?
Or is there a preferred approach?

@github-actions github-actions Bot added the Needs: Response Issues which require feedback from lead label Apr 6, 2026
- headings.css: restore 22px padding-left on .merge span to prevent
  text overlapping the 16px background icon
- buttonCta.css: restore 1px margin-left on .cta-button-group items
  to preserve the connected button group appearance
- edit-toolbar--tablet.css: replace primitive --spacing-3xs with
  semantic tokens

Made-with: Cursor
Copy link
Copy Markdown
Collaborator

@lokesh lokesh left a comment

Choose a reason for hiding this comment

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

Looks great! I made a couple of edits:

  • Reverted padding-left on h4.facetHead span.merge back to 22px, this value must exceed the 16px background icon width to prevent text overlap.
  • Reverted margin-left on .cta-button-group > .cta-btn back to 1px. The 1px gap is intentional for the connected button group appearance

@lokesh lokesh added Needs: Testing and removed Needs: Response Issues which require feedback from lead labels Apr 7, 2026
@lokesh lokesh merged commit 2d22f21 into internetarchive:master Apr 7, 2026
4 checks passed
@Armansiddiqui9 Armansiddiqui9 deleted the refactor-css branch April 8, 2026 17:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants