/** * main.css — token aliases and base layer. * * --------------------------------------------------------------------------- * TOKENS ARE NOT DEFINED HERE * --------------------------------------------------------------------------- * theme.json is the single source of truth for the design system. WordPress * compiles it into `--wp--preset--*` and `--wp--custom--*` custom properties * that are already available on every page and inside the block editor. * * The block below only ALIASES those variables to shorter names. No colour, * size, or spacing VALUE appears here — change a value in theme.json and it * changes everywhere, including the editor, with no CSS edit. * * Two reasons the alias layer earns its place: * * 1. `var(--mw-color-primary)` is readable at a glance where * `var(--wp--preset--color--primary)` is not, and the difference compounds * across a few thousand lines of component CSS. * 2. It is the seam. If this project ever moves off theme.json, or a token is * renamed, one block changes instead of every rule that referenced it. * * Rules to keep it honest: * - Never hardcode a hex value, px size, or shadow in any stylesheet. * - Never add an alias that has no theme.json token behind it. * - Add a new token to theme.json first, then alias it. * * Base element styling, layout primitives and the rest of this file's real * content arrive in a later milestone. Only the token seam exists today. */ /* * The .editor-styles-wrapper selector is not redundant. * * This file is registered as an editor stylesheet (add_editor_style in * inc/setup.php). The block editor rewrites editor-style selectors to scope * them inside its canvas wrapper, which means a bare `:root` rule can end up * matching nothing there — and every --mw-* alias would silently resolve to * invalid inside the editor while working perfectly on the front end. * * Declaring both keeps the tokens available in both contexts. Front-end * behaviour is unchanged; .editor-styles-wrapper simply never matches there. */ :root, .editor-styles-wrapper { /* Colour ------------------------------------------------------------ */ --mw-color-primary: var(--wp--preset--color--primary); --mw-color-primary-dark: var(--wp--preset--color--primary-dark); --mw-color-primary-light: var(--wp--preset--color--primary-light); --mw-color-secondary: var(--wp--preset--color--secondary); --mw-color-secondary-dark: var(--wp--preset--color--secondary-dark); --mw-color-secondary-light: var(--wp--preset--color--secondary-light); --mw-color-background: var(--wp--preset--color--background); --mw-color-surface: var(--wp--preset--color--surface); --mw-color-text: var(--wp--preset--color--text); --mw-color-text-muted: var(--wp--preset--color--text-muted); --mw-color-border: var(--wp--preset--color--border); --mw-color-dark: var(--wp--preset--color--dark); /* Typography -------------------------------------------------------- */ --mw-font-primary: var(--wp--preset--font-family--primary); --mw-font-monospace: var(--wp--preset--font-family--monospace); --mw-text-xs: var(--wp--preset--font-size--x-small); --mw-text-sm: var(--wp--preset--font-size--small); --mw-text-base: var(--wp--preset--font-size--medium); --mw-text-lg: var(--wp--preset--font-size--large); --mw-text-xl: var(--wp--preset--font-size--x-large); --mw-text-2xl: var(--wp--preset--font-size--xx-large); --mw-display-sm: var(--wp--preset--font-size--display-small); --mw-display-md: var(--wp--preset--font-size--display-medium); --mw-display-lg: var(--wp--preset--font-size--display-large); --mw-display-xl: var(--wp--preset--font-size--display-x-large); --mw-weight-regular: var(--wp--custom--font-weight--regular); --mw-weight-medium: var(--wp--custom--font-weight--medium); --mw-weight-semibold: var(--wp--custom--font-weight--semibold); --mw-weight-bold: var(--wp--custom--font-weight--bold); --mw-weight-extrabold: var(--wp--custom--font-weight--extrabold); --mw-leading-tight: var(--wp--custom--line-height--tight); --mw-leading-snug: var(--wp--custom--line-height--snug); --mw-leading-normal: var(--wp--custom--line-height--normal); --mw-leading-relaxed: var(--wp--custom--line-height--relaxed); --mw-tracking-tight: var(--wp--custom--letter-spacing--tight); --mw-tracking-normal: var(--wp--custom--letter-spacing--normal); --mw-tracking-wide: var(--wp--custom--letter-spacing--wide); /* Spacing ----------------------------------------------------------- */ --mw-space-1: var(--wp--preset--spacing--10); --mw-space-2: var(--wp--preset--spacing--20); --mw-space-3: var(--wp--preset--spacing--30); --mw-space-4: var(--wp--preset--spacing--40); --mw-space-5: var(--wp--preset--spacing--50); --mw-space-6: var(--wp--preset--spacing--60); --mw-space-7: var(--wp--preset--spacing--70); --mw-space-8: var(--wp--preset--spacing--80); --mw-space-9: var(--wp--preset--spacing--90); /* Radius ------------------------------------------------------------ */ --mw-radius-sm: var(--wp--custom--border-radius--sm); --mw-radius-md: var(--wp--custom--border-radius--md); --mw-radius-lg: var(--wp--custom--border-radius--lg); --mw-radius-xl: var(--wp--custom--border-radius--xl); --mw-radius-pill: var(--wp--custom--border-radius--pill); /* Elevation --------------------------------------------------------- */ --mw-shadow-sm: var(--wp--preset--shadow--sm); --mw-shadow-md: var(--wp--preset--shadow--md); --mw-shadow-lg: var(--wp--preset--shadow--lg); --mw-shadow-xl: var(--wp--preset--shadow--xl); } /* * Layout widths are deliberately NOT aliased above. * * WordPress emits them from theme.json as --wp--style--global--content-size and * --wp--style--global--wide-size. Aliasing those in :root is unsafe, because * the scope WordPress declares them at has moved between releases; an alias * resolved against a scope that does not have them computes to invalid and * inherits as invalid, which fails silently and is miserable to debug. * * Use the WordPress variables directly at the point of use: * * .mw-container { max-width: var(--wp--style--global--wide-size); } * * Restating 1200px here instead would be exactly the duplication this file * exists to prevent. */