2034479 - Rework tokens-browser-theme layer for design tokens

Status: NEW

(Toolkit :: Themes, task)

Description

[Jon Oliver]

Patch D285627 adds support for the following media query/selector combination via a new tokens-browser-theme layer in toolkit/themes/shared/design-system/dist/tokens-shared.css:

@layer tokens-browser-theme {
  @media not ((forced-colors) or (-moz-native-theme)) {
    :root:not([lwtheme]) {

This is taken from an existing pattern in browser-colors.css. For initial support of this query, the structure was unchanged, aside from wrapping it in a css layer. However, the nested negation pattern can make it difficult to reason about. The json that constructs this selector is structured to use positive values (e.g. light, dark, nativeTheme) as seen below:

"color": {
  "value": {
    "light": "{color.black.@base}",
    "dark": "{color.gray.05}",
    "nativeTheme": "FieldText"
  }
}

Investigate how this selector combination can be restructured/reordered in tokens-shared.css to avoid the not negation without introducing styling regressions and implement a solution.

Comment 1

[Stuart Colville [:muffinresearch]]

Not a priority for Nova. Current decision is to stick with this the way it is for now and come back to it later.

Comment 2

[Mark Striemer [:mstriemer]]

We may want to lean more on the custom @media queries like @media (-moz-browser-theme) or even @media (-moz-theme: browser|native|lwtheme). Could use some more planning/discussion