/* * The chrome's tokens on the storefront (0.75.0, the front application entry: front-app.php, front-app.css). On an * application page (the portal's screens under My Account) the kit's recipes run inside the theme's page, so every * `--ra-*` token the recipes read is mapped here onto the theme's own token of the same role: the palette presets * (`--wp--preset--color--*`, contract C2; the dark scheme is the variation's pair, swapped by the theme under * `:root[data-rooster-scheme]`, so nothing here names a scheme), the custom tokens (`--wp--custom--rooster--*`: the * shapes, the shadows, the layers, the motion, the focus ring) and the presets for type, fonts and spacing. The map * follows the theme's `docs/TOKENS-PARITY.md`, row by row; where the front has no token of the role (a tone's wash, * the text on a solid tone fill) the value is derived from the role's token, never stated. Scoped to the application * root, `.rooster-admin-app` (Ui::app()), as tokens.css is scoped to the chrome's body class: nothing of this reaches * the rest of the page. BuildTest checks that every token the compiled sheet reads is mapped here. */ .rooster-admin-app { /* The accent of every interactive piece: the variation's brand accent, and the text that reads on it. */ --ra-accent: var(--wp--preset--color--accent); --ra-accent-on: var(--wp--preset--color--on-accent); /* Surfaces and text. The front's cards sit on the page colour with a border (no box in a box). */ --ra-page: var(--wp--preset--color--bg); --ra-background: var(--wp--preset--color--bg); --ra-foreground: var(--wp--preset--color--fg); --ra-card: var(--wp--preset--color--bg); --ra-card-foreground: var(--wp--preset--color--fg); --ra-muted: var(--wp--preset--color--subtle); --ra-muted-foreground: var(--wp--preset--color--muted); --ra-secondary-foreground: var(--wp--preset--color--muted); --ra-border: var(--wp--preset--color--line); --ra-input: var(--wp--preset--color--line); --ra-control-border: var(--wp--preset--color--line); --ra-ring: var(--wp--preset--color--muted); --ra-mono: var(--wp--preset--color--contrast); --ra-link: var(--wp--preset--color--accent-text); --ra-ink: var(--wp--preset--color--fg); --ra-brand-dark: var(--wp--preset--color--contrast); /* The tones: the solid fill, the soft wash (the tone mixed into the page colour), the text in the tone, and the text on the solid fill (black or white by the fill's lightness, the theme's own `button.away` form). */ --ra-primary: var(--wp--preset--color--accent); --ra-primary-foreground: var(--wp--preset--color--on-accent); --ra-primary-soft: color-mix(in srgb, var(--wp--preset--color--accent) 12%, var(--wp--preset--color--bg)); --ra-primary-soft-foreground: var(--wp--preset--color--accent-text); --ra-success: var(--wp--preset--color--success); --ra-success-soft: color-mix(in srgb, var(--wp--preset--color--success) 12%, var(--wp--preset--color--bg)); --ra-success-wash: color-mix(in srgb, var(--wp--preset--color--success) 6%, var(--wp--preset--color--bg)); --ra-success-foreground: var(--wp--preset--color--success); --ra-success-on: oklch(from var(--wp--preset--color--success) clamp(0, (0.6 - l) * 1000, 1) 0 0); --ra-warning: var(--wp--preset--color--warning); --ra-warning-soft: color-mix(in srgb, var(--wp--preset--color--warning) 12%, var(--wp--preset--color--bg)); --ra-warning-soft-foreground: var(--wp--preset--color--fg); --ra-warning-border: color-mix(in srgb, var(--wp--preset--color--warning) 40%, var(--wp--preset--color--line)); --ra-warning-on: oklch(from var(--wp--preset--color--warning) clamp(0, (0.6 - l) * 1000, 1) 0 0); --ra-destructive: var(--wp--preset--color--danger); --ra-destructive-on: oklch(from var(--wp--preset--color--danger) clamp(0, (0.6 - l) * 1000, 1) 0 0); --ra-destructive-foreground: var(--wp--preset--color--danger); /* The front has no info tone (TOKENS-PARITY, open decision 3): its info notices are in the muted grey. */ --ra-info: var(--wp--preset--color--muted); --ra-info-on: oklch(from var(--wp--preset--color--muted) clamp(0, (0.6 - l) * 1000, 1) 0 0); --ra-info-soft: color-mix(in srgb, var(--wp--preset--color--muted) 12%, var(--wp--preset--color--bg)); --ra-info-wash: color-mix(in srgb, var(--wp--preset--color--muted) 6%, var(--wp--preset--color--bg)); /* The charts' series (the inline SVG charts, Ui::chart_svg()): the accent, the tones, the second accent. */ --ra-chart-1: var(--wp--preset--color--accent); --ra-chart-2: var(--wp--preset--color--success); --ra-chart-3: var(--wp--preset--color--warning); --ra-chart-4: var(--wp--preset--color--accent-2); --ra-chart-5: var(--wp--preset--color--danger); --ra-chart-6: var(--wp--preset--color--muted); /* Type: the front's scale around a 16 px body (C1), its steps standing in for wp-admin's pixels; the leadings the theme's body and heading values. */ --ra-text-2xs: var(--wp--preset--font-size--xs); --ra-leading-2xs: var(--wp--custom--rooster--leading--body); --ra-text-xs: var(--wp--preset--font-size--xs); --ra-leading-xs: var(--wp--custom--rooster--leading--body); --ra-text-sm: var(--wp--preset--font-size--sm); --ra-leading-sm: var(--wp--custom--rooster--leading--body); --ra-text-base: var(--wp--preset--font-size--md); --ra-leading-base: var(--wp--custom--rooster--leading--body); --ra-text-md: var(--wp--preset--font-size--md); --ra-leading-md: var(--wp--custom--rooster--leading--body); --ra-text-lg: var(--wp--preset--font-size--lg); --ra-leading-lg: var(--wp--custom--rooster--leading--body); --ra-text-xl: var(--wp--preset--font-size--lg); --ra-leading-xl: var(--wp--custom--rooster--leading--heading); --ra-text-2xl: var(--wp--preset--font-size--xl); --ra-leading-2xl: var(--wp--custom--rooster--leading--heading); --ra-text-3xl: var(--wp--preset--font-size--xl); --ra-leading-3xl: var(--wp--custom--rooster--leading--heading); /* Fonts: the site's own, through the theme's presets. */ --ra-font-sans: var(--wp--preset--font-family--body); --ra-font-mono: var(--wp--preset--font-family--mono); /* Shape: the theme's radius scale and its shape roles (the Shape setting reaches them). */ --ra-radius-sm: var(--wp--custom--rooster--radius--sm); --ra-radius-md: var(--wp--custom--rooster--radius--md); --ra-radius-lg: var(--wp--custom--rooster--radius--md); --ra-radius-xl: var(--wp--custom--rooster--radius--lg); --ra-radius-2xl: var(--wp--custom--rooster--radius--lg); --ra-shape-button: var(--wp--custom--rooster--shape--button); --ra-shape-control: var(--wp--custom--rooster--shape--control); --ra-shape-card: var(--wp--custom--rooster--shape--card); --ra-shape-badge: var(--wp--custom--rooster--shape--chip); --ra-shape-chip: var(--wp--custom--rooster--shape--chip); --ra-shape-dialog: var(--wp--custom--rooster--shape--panel); /* Shadows and the focus ring. */ --ra-shadow-sm: var(--wp--custom--rooster--shadow--sm); --ra-shadow-bar: var(--wp--custom--rooster--shadow--sm); --ra-shadow-pop: var(--wp--custom--rooster--shadow--md); --ra-shadow-modal: var(--wp--custom--rooster--shadow--lg); --ra-shadow-focus: var(--wp--custom--rooster--focus-ring); --ra-shadow-focus-destructive: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--danger) 35%, transparent); /* The check's and the dash's shapes (masks painted in the accent's on-colour) and the select's chevron, as the chrome draws them (tokens.css): images take no token, so the chevron's grey is the one the admin uses. */ --ra-check: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3e%3c/svg%3e"); --ra-dash: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4 8a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1z'/%3e%3c/svg%3e"); --ra-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e"); --ra-chevron-up: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m18 15-6-6-6 6'/%3e%3c/svg%3e"); /* The chevron's shape as a mask (0.75.1): painted in the muted colour where the browser lets a page draw a select's icon (`appearance: base-select`) and on the combobox's control and the calendar's button, so it follows the scheme; the images above stay the fallback of a native select elsewhere. */ --ra-chevron-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e"); /* Layers: the theme's, which start at 100 (the admin's sit above wp-admin's). */ --ra-z-sticky: var(--wp--custom--rooster--z--header); --ra-z-pop: var(--wp--custom--rooster--z--overlay); --ra-z-tip: var(--wp--custom--rooster--z--overlay); --ra-z-toast: var(--wp--custom--rooster--z--toast); --ra-z-modal: var(--wp--custom--rooster--z--overlay); /* Motion. */ --ra-dur-fast: var(--wp--custom--rooster--motion--fast); --ra-dur: var(--wp--custom--rooster--motion--fast); --ra-dur-slow: var(--wp--custom--rooster--motion--base); --ra-ease: ease; /* Rhythm: the spacing unit and the gaps from the spacing presets; the label column as the admin's. */ --ra-spacing: var(--wp--preset--spacing--1); --ra-page-gap: var(--wp--preset--spacing--5); --ra-label-w: 16rem; --ra-panel-w: 20rem; --ra-gap-card: var(--wp--preset--spacing--5); /* The product: the front has one brand accent, so the product's colour, ink and on-colour are the accent's. */ --ra-product: var(--wp--preset--color--accent); --ra-product-ink: var(--wp--preset--color--accent-text); --ra-product-on: var(--wp--preset--color--on-accent); }