Skip to content

[RFC] Theming #2

Open
Open
@kaelig

Description

@kaelig

As all platforms are just about to support their own versions of dark mode, theming is becoming an important part of an efficient design workflow.

Let's talk about how design tokens should handle theming.

Here's a rough draft that essentially mimics how the CSS cascade works:

// Defaults
[
  { name: 'tokenA', value: 'foo' },
  { name: 'tokenB', value: 'bar' },
]

// Overrides for dark mode, loaded subsequently
[
  { name: 'tokenA', value: 'baz' },
]

// Should resolve to:
[
  { name: 'tokenA', value: 'baz' },
  { name: 'tokenB', value: 'bar' },
]

In a design tool, a designer could load and toggle any number of override files in order to get to the target platform (such as: Defaults < Android < Dark mode).

Metadata

Metadata

Assignees

No one assigned

    Labels

    Needs Feedback/ReviewOpen for feedback from the community, and may require a review from editors.dtcg-formatAll issues related to the format specification.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions