Create theme-unaware high-level tokens
Open
Nobody has claimed this yet.
enhancement
- Dominant language
- TypeScript
- Stars
- 39
- Forks
- 14
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 13
Description
🙋 Feature Request
😯 Problem to Solve
We currently have:
- theme-unaware base tokens such as
$ni-nimble-base-black-85that are static values defined as raw values - theme-aware high-level tokens such as
$ni-nimble-application-background-colorthat are dynamic values that change at runtime based on JavaScript, thenimble-theme-providercustom element, and programmatically updating CSS Custom Property values
We should consider having:
- theme-unaware high-level tokens such as
$ni-nimble-application-background-color-light-theme,$ni-nimble-application-background-color-dark-theme,$ni-nimble-application-background-color-color-themethat are static values defined as raw values - we should then build the theme-aware high-level tokens from those theme-unaware high-level tokens
Use-cases:
- Mobiscroll does not support theming using dynamic CSS custom properties and needs statically defined SCSS values (discussion)
- Gainsights does not support JavaScript execution which is needed for our theme-aware high-level tokens to update dynamically. We could instead generate static CSS styles that use prefers-color-scheme to have top-level page system theme awareness (but no concept of theme-providers to override themes on specific regions of a page dynamically).
💁 Proposed Solution
Partially described above but we need to determine:
- The naming scheme for theme unaware high-level tokens
- How to represent the theme-unaware high-level tokens in style dictionary
- Generation of static CSS that uses the
prefers-color-schememedia query (current use-case being gainsights so should see what is actually supported first)
📋 Tasks
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the existing theme-unaware base tokens and theme-aware high-level tokens, plus the Style Dictionary representation described in the issue. Define the naming and representation for theme-unaware high-level tokens, then verify whether static CSS generation with prefers-color-scheme is supported for the Gainsights use case and document the resulting approach.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript, sass
- Domain
- build-system, design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100