@gitlab/ui
Version:
GitLab UI Components
18 lines (16 loc) • 866 B
JavaScript
/**
* The classes that decide which set of token values applies to an element.
*
* Dark mode is applied either to the whole document, by putting `gl-dark` on the root, or to a
* subtree, by putting `gl-dark-scope` on any ancestor. `gl-light-scope` flips a subtree back.
*
* These are the single source of truth: `bin/build_tokens.mjs` builds the CSS selectors from them,
* so the stylesheets and any JavaScript that has to reason about the colour mode cannot drift
* apart. Changing a name here changes both.
*/
const DARK_ROOT_CLASS = 'gl-dark';
const DARK_SCOPE_CLASS = 'gl-dark-scope';
const LIGHT_SCOPE_CLASS = 'gl-light-scope';
const LIGHT_SELECTOR = `:root, .${LIGHT_SCOPE_CLASS}`;
const DARK_SELECTOR = `:root.${DARK_ROOT_CLASS}, .${DARK_SCOPE_CLASS}`;
export { DARK_ROOT_CLASS, DARK_SCOPE_CLASS, DARK_SELECTOR, LIGHT_SCOPE_CLASS, LIGHT_SELECTOR };