ni / ni/nimble

Create theme-unaware high-level tokens

Open
#2,282 6 comments 0 reactions 0 assignees View on GitHub

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-85 that are static values defined as raw values
  • theme-aware high-level tokens such as $ni-nimble-application-background-color that are dynamic values that change at runtime based on JavaScript, the nimble-theme-provider custom 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-theme that 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-scheme media query (current use-case being gainsights so should see what is actually supported first)

📋 Tasks

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.