1878343 - Refactor tokens CSS files to use @layer

Status: RESOLVED FIXED

(Toolkit :: Themes, task, P3)

Description

[Hanna Jones [:hjones]]

We've implemented slightly convoluted @media not (prefers-contrast) querys in all of our tokens CSS files (one example). This was necessary in order to prevent redefined tokens in tokens-brand.css or tokens-platform.css from taking precedence over HCM token values from tokens-shared.css. Media queries don't confer extra specificity, and because tokens-brand.css and tokens-platform.css both import tokens-shared.css, any redefinitions in those files would effectively overwrite HCM values defined in tokens-shared.css.

This came up recently in the work for Bug 1850611 since it would be challenging to find a good way to represent a @media not (prefers-contrast) media query in our JSON.

:mstriemer has suggested using @layer to simplify the logic/work around CSS cascade order issues:

/* tokens-shared.css */
@layer forced-colors, prefers-contrast, base;

@layer base {
  :root {
    --color-accent-primary: blue;
  }
}

@layer forced-colors {
  @media (forced-colors) {
    :root {
      --color-accent-primary: AccentColor;
    }
  }
}

/* tokens-brand.css */

@layer base {
  :root {
    /* Without @layer this would overwrite the @media (forced-colors) block. */
    --color-accent-primary: green;
  }
}

Comment 1

[Tim Giles [:tgiles]]

Attachment: Bug 1878343 - Refactor tokens-shared to use CSS layers. r=#recomp-reviewers,#desktop-theme-reviewers

By using the CSS layers feature, we can simplify our prefers-contrast
and forced-colors media queries by ensuring that:

• Forced colors styling has the highest precedence
• Prefers contrast styling has the next highest precedence
• Base styling has the lowest precedence

This allows us to remove the "@media not" queries from the various
tokens files without breaking the cascade and causing the brand or
platform tokens file to unintentionally overwrite token values in the
shared tokens file.

Additionally, this change aligns with the accessibility recommendation
to keep the prefers-contrast and forced-colors media queries in the
:root selector for more maintainable code.

Comment 2

[Tim Giles [:tgiles]]

Attachment: Bug 1878343 - Refactor tokens-platform to use CSS layers. r=#recomp-reviewers,#desktop-theme-reviewers

By using the CSS layers feature, we can simplify our prefers-contrast
and forced-colors media queries by ensuring that:

• Forced colors styling has the highest precedence
• Prefers contrast styling has the next highest precedence
• Base styling has the lowest precedence

This allows us to remove the "@media not" queries from the various
tokens files without breaking the cascade and causing the brand or
platform tokens file to unintentionally overwrite token values in the
shared tokens file.

Additionally, this change aligns with the accessibility recommendation
to keep the prefers-contrast and forced-colors media queries in the
:root selector for more maintainable code.

Depends on D201168

Comment 3

[Tim Giles [:tgiles]]

Attachment: Bug 1878343 - Refactor tokens-brand to use CSS layers. r=#recomp-reviewers,#desktop-theme-reviewers

By using the CSS layers feature, we can simplify our prefers-contrast
and forced-colors media queries by ensuring that:

• Forced colors styling has the highest precedence
• Prefers contrast styling has the next highest precedence
• Base styling has the lowest precedence

This allows us to remove the "@media not" queries from the various
tokens files without breaking the cascade and causing the brand or
platform tokens file to unintentionally overwrite token values in the
shared tokens file.

Additionally, this change aligns with the accessibility recommendation
to keep the prefers-contrast and forced-colors media queries in the
:root selector for more maintainable code.

Depends on D201169

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/be410560d1b8
Refactor tokens-shared to use CSS layers. r=reusable-components-reviewers,desktop-theme-reviewers,emilio,hjones
https://hg.mozilla.org/integration/autoland/rev/81fa5e91d692
Refactor tokens-platform to use CSS layers. r=reusable-components-reviewers,desktop-theme-reviewers,emilio,hjones
https://hg.mozilla.org/integration/autoland/rev/f9f660122979
Refactor tokens-brand to use CSS layers. r=reusable-components-reviewers,desktop-theme-reviewers,emilio,hjones

Comment 5

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/be410560d1b8
https://hg.mozilla.org/mozilla-central/rev/81fa5e91d692
https://hg.mozilla.org/mozilla-central/rev/f9f660122979