feat(eds-tokens): use single css variables export #4098
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
torleifhalseth
requested review from
Chibuzor-Nwemambu,
millus,
pomfrida and
vnys
as code owners
There was a problem hiding this comment.
Pull Request Overview
This PR consolidates CSS variables exports by replacing separate static and dynamic CSS files with a single unified CSS variables export. The primary purpose is to simplify the API by removing the static/dynamic distinction and providing a single entry point for CSS variables.
- Removes separate static and dynamic CSS variable files and build processes
- Consolidates to a single
variables.cssexport - Updates color token values across various semantic color themes
- Updates documentation to reflect the simplified API
Reviewed Changes
Copilot reviewed 42 out of 42 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/eds-tokens/src/css/index-variables-static.css | Removed - static CSS variables index file |
| packages/eds-tokens/src/css/index-variables-dynamic.css | Removed - dynamic CSS variables index file |
| packages/eds-tokens/package.json | Removes static/dynamic export entries and simplifies build scripts |
| packages/eds-tokens/build/json/color/static/nested/semantic.json | Updates fill-muted color values for various semantic themes |
| packages/eds-tokens/build/js/color/static/semantic.js | Updates exported color constants with new hex values |
| packages/eds-tokens/build/css/variables.css | Updates CSS custom properties with new color values |
| packages/eds-tokens/README.md | Simplifies documentation to reference single CSS import |
torleifhalseth
changed the title
… the new solution
torleifhalseth
force-pushed
the
feat/eds-tokens-variable-export
branch
from
49ca544 to
eb6b5d0
Compare
Merged
pomfrida
pushed a commit
that referenced
this pull request
Oct 16, 2025
…port (#4098) * feat(eds-tokens): remove static and dynamic export and build new variables * docs(eds-tokens): update readme to reflect new import * feat(eds-tailwind): update README and CSS imports for EDS tokens integration * docs(eds-tokens): enhance README with detailed usage instructions for the new solution * feat(eds-tokens): add light and dark semantic colours in js and json * fix(eds-demo): update CSS import to use variables * fix(eds-tailwind): fix package peer dependency * docs(eds-tokens): remove hex preview and import of primitives
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request introduces significant improvements to the Equinor Design System (EDS) tokens and Tailwind integration. The main focus is on enhancing the documentation, clarifying and modernizing the usage of CSS variables for theming (including light/dark support), and improving how EDS tokens are imported and consumed in both CSS and JavaScript/TypeScript. Additionally, it introduces new semantic color scheme token files and updates the build process to support these.
Key changes include:
Documentation and Usage Improvements
@equinor/eds-tokensREADME to explain the new CSS variable system, how to use color and spacing tokens in both CSS and JS/TS, and the differences between the new and legacy token systems. Added migration recommendations and detailed usage examples.@equinor/eds-tailwindREADME to provide installation instructions, clarify the correct import order for CSS variables and theme, and explain the rationale for explicit token imports.Theme and Token Import Refactoring
variables-dynamic.css/variables-static.cssto the unified@equinor/eds-tokens/css/variablesentrypoint, both in example apps and in the Tailwind theme. This ensures consistent, theme-aware variable usage and prevents duplicate imports. [1] [2]Semantic Color Scheme Token Generation
[data-color-scheme="light"]and[data-color-scheme="dark"]selectors. [1] [2]Package and Dependency Updates
@equinor/eds-tailwindto require@equinor/eds-tokensas a peer dependency, and improved its exports for better integration and tree-shaking.These changes make it easier and more robust to use EDS tokens with Tailwind and across different platforms, while providing clear guidance for both new and existing projects.