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

• From: Connor Smith via GitHub <sysbot+gh@w3.org>
• Date: Thu, 23 Mar 2023 16:27:12 +0000
• To: public-design-tokens-log@w3.org
• Message-ID: <issue_comment.created-1481504554-1679588831-sysbot+gh@w3.org>

I would expect the following generated CSS

```css
/* figma-ui-colors_light.css */
:root {
  --bg-brand: #1010FF; /* colors.blue.300 */
  --fg-brand: #000000; /* colors.black */
}

/* figma-ui-colors_dark.css */
:root {
  --bg-brand: #1010FF; /* colors.blue.500 */
  --fg-brand: #FFFFFF; /* colors.white */
}

/* figma-ui-colors_super-dark.css */
:root {
  --bg-brand: #0000FF; /* colors.blue.700 */
  --fg-brand: #A0A0A0; /* colors.gray */
}
```

Usage:
```
@import url("figma-ui-colors_light.css") prefers-color-scheme: light
@import url("figma-ui-colors_dark.css") prefers-color-scheme: dark
```

Those variables would be split up over 3 files, one for each mode. Alternatively a generator could specify all modes in a single file

```css
:root {
  --bg-brand: #1010FF; /* colors.blue.300, from $value */
}

:root[mode="light"] {
  --bg-brand: #1010FF; /* colors.blue.300 */
  --fg-brand: #000000; /* colors.black */
}

:root[mode="dark"] {
  --bg-brand: #1010FF; /* colors.blue.500 */
  --fg-brand: #FFFFFF; /* colors.white */
}

:root[mode="super-dark"] {
  --bg-brand: #0000FF; /* colors.blue.700 */
  --fg-brand: #A0A0A0; /* colors.gray */
}
```

Of course tools could probably optimize the above to utilize css var override cascades

-- 
GitHub Notification of comment by connorjsmith
Please view or discuss this issue at https://github.com/design-tokens/community-group/issues/210#issuecomment-1481504554 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 16:27:14 UTC