1879900 - Move layers and media queries in the tokens files

Status: NEW

(Toolkit :: Themes, task, P3)

Description

[Tim Giles [:tgiles] | OOO May 28 - May 31]

Once Bug 1879349 lands, we should move the layers and media queries to the top :root, :host(.anonymous-content-host) selector. This will make our code more in line with the accessibility guidelines for creating more maintainable front-end code.

Comment 1

[Mark Striemer [:mstriemer]]

These layers are now created in tokens-config.js

The layer names could all remain un-nested, or if we want to nest the layer names they'd switch from - separators to .s

@layer tokens {
  :root {
    @layer foundation {} /* tokens.foundation */
    @layer prefersContrast { /* tokens.prefersContrast */
      @media (prefers-contrast) {}
    }
}