Re: [community-group] Native modes and theming support (#210)

I think there is some confusion here :)
Is this a proposal for "theming" or for "conditional/contextual values"?

-------

Theming :
- one design system
- multiple sets of values
- multiple outputs
- static result

Examples :
- a customizable design system that is used by 3rd parties
- having variants of a design in multiple color hues (a blue theme, a red theme, ...)
- ...

Conditional values :
- one design system
- one set of values
- one output
- dynamic result

Examples :
- dark mode
- light mode
- high contrast mode
- large screens
- small screens
- ...

It might sometimes be possible to build a dynamic result by combining multiple themes on a single page or screen but these are always custom mechanics that don't leverage native API's.

Given the mentions of dark mode and high contrast mode I assumed this was a proposal for conditional values.

Can you clarify?

--------

If this is a proposal for theming and isn't intended for dark mode / light mode then we would just wire this up behind `is` in the PostCSS plugin.


```css
@design-tokens url('./figma-ui-colors.json') format('style-dictionary3');

.foo {
  color: design-token('fg.brand');
}
```

output A :

```json
postcssDesignTokens({ 
  is: ['mode-a']
})
```

output b :

```json
postcssDesignTokens({ 
  is: ['mode-b']
})
```

But that is only interesting for us to do when this feature isn't intended for dark / light mode and other conditional values.



-- 
GitHub Notification of comment by romainmenke
Please view or discuss this issue at https://github.com/design-tokens/community-group/issues/210#issuecomment-1481554248 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 23 March 2023 17:01:23 UTC