Skip to content

feat(export): support exporting shadows to css-vars and tailwind-v4 - #168

Open
zachshallbetter wants to merge 10 commits into
google-labs-code:mainfrom
zachshallbetter:feat/export-shadows
Open

feat(export): support exporting shadows to css-vars and tailwind-v4#168
zachshallbetter wants to merge 10 commits into
google-labs-code:mainfrom
zachshallbetter:feat/export-shadows

Conversation

@zachshallbetter

Copy link
Copy Markdown
Contributor

Implemented support for exporting the newly proposed structured shadows token category inside both css-vars and tailwind-v4 emitters (resolves Issue #92).

Background & Motivation

PR #163 introduced the schemas, parsing models, linter rules, and documentation for the new shadows category. However, because the exporters were left unmodified, design systems containing shadow tokens could not serialize them into CSS variables or Tailwind output.

  • This completes the shadows/elevation feature, ensuring shadows are successfully converted to variables in downstream builds.
  • It serializes composite shadow properties (offsets, blur, spread, and color) into standard space-separated CSS strings compatible with CSS box-shadow.
  • Built directly on top of the changes from PR feat: add structured shadows/elevation token category #163 to align with the core schema additions.

Relation to other PRs

Changes

  • Configuration & Schemas:
    • Extend TailwindV4ThemeDataSchema in tailwind/v4/spec.ts to include the shadow record namespace.
  • Exporters & Serializers:
    • Update css-vars/handler.ts to map state.shadows to --shadow-* custom property declarations.
    • Update tailwind/v4/handler.ts to map shadows into the Tailwind v4 theme under theme.shadow.
    • Add the ['shadow', '--shadow-'] category prefix to the Tailwind serializer list in tailwind/v4/serialize.ts to output theme properties correctly.
    • Handle default fallback values (falling back to 0px for missing layout parameters and transparent for missing colors) to verify valid box-shadow CSS is always emitted.
  • Test Coverage & Bug Fixes:
    • Fix a test bug in spec.test.ts where the expected JSON rules length assertion was out of sync with the new linter rules introduced in PR feat: add structured shadows/elevation token category #163.
    • Add validation tests in css-vars/handler.test.ts to check shadows serialization and default fallbacks.
    • Add tests in tailwind/v4/handler.test.ts and tailwind/v4/serialize.test.ts to verify theme mapping and CSS block ordering.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants