/* ============================================================================ HOMESCHOOL PREP CO — DESIGN TOKENS (THEME / ALIAS VARIANT) ---------------------------------------------------------------------------- This is the WordPress variant of public/styleguide/tokens.css. Same variable names, different right-hand sides: instead of literal values it points each token at the custom property theme.json generates. WHY THIS FILE EXISTS components.css is byte-identical in the style guide and in this theme. It only ever references token names (--mist, --s4, --radius). This file is the single place where those names are bound to WordPress. That means: - the style guide gallery stays standalone (no WordPress required), and - the theme inherits Global Styles edits made in the Site Editor, because every token resolves through a --wp--preset--* variable. RULES 1. This is the ONLY theme file permitted to reference --wp--preset--*, --wp--custom--*, or --wp--style--global--*. 2. Keep variable names and section order identical to public/styleguide/tokens.css so the two files stay diffable. 3. A token with no preset home keeps its literal value here and is marked NO PRESET below. Source: public/styleguide/tokens.css v2.0.0 Verified against the emitted stylesheet on WordPress 7.0.2. ========================================================================== */ :root { /* ========================================================================== SURFACES → settings.color.palette One deliberate name difference between token and slug: --border-dark -> border-strong ====================================================================== */ --white: var(--wp--preset--color--white); --mist: var(--wp--preset--color--mist); --sage-pale: var(--wp--preset--color--sage-pale); --celadon: var(--wp--preset--color--celadon); --forest: var(--wp--preset--color--forest); --moss: var(--wp--preset--color--moss); /* ========================================================================== INK → settings.color.palette / settings.custom.onDark ====================================================================== */ --ink: var(--wp--preset--color--ink); --ink-soft: var(--wp--preset--color--ink-soft); /* Surface-bound, so they stay in settings.custom rather than the palette: their values coincide with --sage-pale / --celadon today, but they are contrast commitments against the dark cards, not surfaces in their own right, and must not drift if those surfaces are edited. */ --on-forest-muted: var(--wp--custom--on-dark--forest-muted); --on-moss-muted: var(--wp--custom--on-dark--moss-muted); /* ========================================================================== BRAND ACCENTS Restricted colors are intentionally NOT palette entries — they resolve through settings.custom so the Site Editor cannot offer them. See STYLEGUIDE.md §3.2. ====================================================================== */ --pine: var(--wp--preset--color--pine); --pine-hover: var(--wp--custom--state--pine-hover); /* Primary buttons are near-black. Hover LIGHTENS — --ink is already at the bottom of the ramp. */ --ink-hover: var(--wp--custom--state--ink-hover); /* DECORATIVE SHAPES ONLY — never text (1.59:1 on mist) */ --sage: var(--wp--custom--decor--sage); /* Palette entry, but restricted: ink text only (6.63:1), never under white text (2.72:1), and as emphasis on --moss ONLY (5.01:1 there, 3.22:1 on --forest). */ --olive: var(--wp--preset--color--olive); --slate-deep: var(--wp--preset--color--slate-deep); /* ========================================================================== LINES ====================================================================== */ --border: var(--wp--preset--color--border); --border-dark: var(--wp--preset--color--border-strong); --border-field: var(--wp--custom--border--field); --border-hairline-w: var(--wp--custom--border--hairline-width); --border-control-w: var(--wp--custom--border--control-width); /* ========================================================================== STATE ====================================================================== */ --gray: var(--wp--custom--state--disabled); /* ========================================================================== BOTANICAL ORNAMENTS NO PRESET — theme.json has no namespace for image URLs, and these must not be editor-selectable anyway: they are decorative-only (1.0–1.9:1 on every light surface, the same restriction class as --sage). The URL is deliberately different from the style guide variant: that file sits beside its images/ directory, this one is a level deeper in assets/css/. This difference is exactly why the URL lives here and not in components.css, which stays byte-identical across both. See STYLEGUIDE §7. add_editor_style() rewrites these relative URLs for the editor canvas, so the ornaments render in Gutenberg as well as on the front end. ====================================================================== */ --ornament-sprig: url("../images/floral-01.png"); /* 222x321 */ --ornament-branch: url("../images/floral-02.png"); /* 179x269 */ --ornament-bloom: url("../images/floral-03.png"); /* 162x163 */ --ratio-sprig: 222 / 321; --ratio-branch: 179 / 269; --ratio-bloom: 162 / 163; --ornament-inline: 2.4em; --ornament-rule: 56px; --ornament-footer: 72px; /* ========================================================================== FOCUS --focus-ring stays a semantic alias, not a preset: components.css overrides it to --white inside dark surfaces. Do not bind it to a preset. ====================================================================== */ --focus-ring: var(--pine); --focus-width: var(--wp--custom--focus--width); --focus-offset: var(--wp--custom--focus--offset); --focus-radius: var(--wp--custom--focus--radius); /* ========================================================================== TYPOGRAPHY → settings.typography ====================================================================== */ --display: var(--wp--preset--font-family--display); --sans: var(--wp--preset--font-family--sans); --fs-hero: var(--wp--preset--font-size--hero); --fs-display: var(--wp--preset--font-size--display); --fs-section: var(--wp--preset--font-size--heading-section); --fs-band: var(--wp--preset--font-size--heading-band); --fs-tagline: var(--wp--preset--font-size--tagline); --fs-xs: var(--wp--preset--font-size--x-small); --fs-sm: var(--wp--preset--font-size--small); --fs-base: var(--wp--preset--font-size--medium); --fs-md: var(--wp--preset--font-size--large); --fs-lg: var(--wp--preset--font-size--x-large); --fs-xl: var(--wp--preset--font-size--xx-large); /* NO PRESET — theme.json has no line-height or font-weight preset system. These are set per-element in styles.elements; the tokens stay literal. */ --lh-display: 1.15; --lh-quote: 1.4; --lh-body: 1.6; --lh-tight: 1.2; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --track-eyebrow: var(--wp--custom--tracking--eyebrow); --track-heading: var(--wp--custom--tracking--heading); --track-label: var(--wp--custom--tracking--label); --track-micro: var(--wp--custom--tracking--micro); --measure-lede: var(--wp--custom--measure--lede); --measure-narrow: var(--wp--custom--measure--narrow); --measure-copy: var(--wp--custom--measure--copy); --measure-head: var(--wp--custom--measure--head); --measure-prose: var(--wp--custom--measure--prose); --measure-title: var(--wp--custom--measure--title); /* ========================================================================== SPACING → settings.spacing.spacingSizes (numeric slugs, editor-ordered) ====================================================================== */ --s1: var(--wp--preset--spacing--10); /* 8px */ --s2: var(--wp--preset--spacing--20); /* 16px */ --s3: var(--wp--preset--spacing--30); /* 24px */ --s4: var(--wp--preset--spacing--40); /* 32px */ --s5: var(--wp--preset--spacing--50); /* 48px */ --s6: var(--wp--preset--spacing--60); /* 64px */ --s7: var(--wp--preset--spacing--70); /* 96px */ /* ========================================================================== SHAPE, LAYOUT & ELEVATION ====================================================================== */ --radius: var(--wp--custom--radius); --radius-sm: var(--wp--custom--radius-sm); --radius-pill: var(--wp--custom--radius-pill); /* settings.layout emits --wp--style--global--*, not a preset namespace */ --maxw: var(--wp--style--global--wide-size); --content: var(--wp--style--global--content-size); --gutter: var(--wp--custom--gutter); --shadow: var(--wp--preset--shadow--card); --shadow-play: var(--wp--custom--shadow--play); /* ========================================================================== PLACEHOLDER FILLS — remove once real imagery exists ====================================================================== */ --media-gradient: var(--wp--preset--gradient--placeholder-media); --video-gradient: var(--wp--preset--gradient--placeholder-video); /* NO PRESET — theme.json has no preset namespace for arbitrary overlay colors. Both are placeholder chrome and disappear with real imagery. --media-note-bg is --moss #232F1D expressed as an rgba triple. */ --media-note-bg: rgba(35, 47, 29, .55); --play-bg: rgba(255, 255, 255, .94); /* ========================================================================== MOTION → settings.custom.motion ====================================================================== */ --motion-fast: var(--wp--custom--motion--fast); --motion-reveal: var(--wp--custom--motion--reveal); --ease: var(--wp--custom--motion--ease); --reveal-shift: var(--wp--custom--motion--reveal-shift); --stagger: var(--wp--custom--motion--stagger); /* ========================================================================== TARGETS → settings.custom.target ====================================================================== */ --target-min: var(--wp--custom--target--min); --target-icon: var(--wp--custom--target--icon); }