refactor(theming): enforce non-empty theme _meta.name and centralize CSS var generation via config#528
Open
refactor(theming): enforce non-empty theme _meta.name and centralize CSS var generation via config#528
Conversation
…ach and unify selectors
What changed (highlights)- Introduced config-driven CSS variable prefix:
- Added imports of config in many Sass files. - Updated
css-vars-from-theme to generate variables using
var(--#{config.variable-prefix()}-<name>-<key>). - Reworked logic to
derive the component name from _meta.name and added a guard for
missing/empty names.- Unified and simplified selectors: - Replaced
per-target map-based selectors with element-prefix based selectors
(e.g., #{element-prefix()}-<name>). - Updated multiple theme/chart
schema files to use the new prefix approach.- Scope and structure
tweaks: - Various chart/theme mixins and schemas updated to align with
the new config-prefix approach. - Minor documentation/comments updates
to reflect CSS variable naming changes (css vars vs CSS Vars wording,
etc.).
This reflects removing explicit theme name usage and ensuring the variable prefix is configured before generating Tailwind theme utilities.
…niversal fallback chain Introduce a new `tokens` mixin that consolidates theme variable generation into a single public API with two modes: - **global** (default): Emits universal `--ig-*` CSS variable tokens that work across Angular and Web Components. Rewrites local var references to global token names so derived values (adaptive-contrast, dynamic-shade) resolve correctly at any scope. Silently skips sizable() expressions that depend on component-scoped variables. - **scoped**: Replaces the previous `css-vars` behavior, generating component-scoped variables with the configured variable-prefix and a universal `--ig-*` fallback chain for cross-platform overrides. Additional changes: - Add `--ig-*` fallback chain in `css-vars-from-theme` so global tokens can override platform-specific variables without breaking changes - Deprecate `css-vars` mixin (JSDoc-only, delegates to `tokens`) - Deprecate `button-theme` and `icon-button-theme` compound functions in favor of variant-specific theme functions - Fix undefined `$name` reference in button-theme and icon-button-theme - Fix button/icon-button selector to use element-prefix() not variable-prefix() - Fix typo 'unkown-compoenent' -> 'unknown-component' - Add 'default-size' to ignored keys list - Extract private helpers for clean code: _is-emittable(), _is-sizable(), _collect-emittable-keys(), _globalize-value(), _tokens-global() - Add 10 new tests covering tokens mixin (global mode, scoped mode, var rewriting, sizable skipping, parity with css-vars)
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
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.
Uh oh!
There was an error while loading. Please reload this page.