/** * Palletways design tokens — loaded on the front end and in the editor. * * theme.json is the source of truth for every colour, size and spacing value. * Its palette uses light-dark(), so colour mode is nothing more than the * `color-scheme` property set below. This file only adds: * * 1. Colour mode switching (follows the OS, overridable by the header toggle). * 2. The Figma "codeSyntax.WEB" names, as aliases of the theme.json presets, * so CSS copied from the design system site works unchanged. * 3. The primitive ramps (fixed values, not mode-aware). * 4. Legacy preset names used by existing content and by The Framework Core * plugin (primary, secondary, neutral-*, black, decoration-1), plus the * old V2 slugs text and border. */ /* ------------------------------------------------------------------------- * 1. Colour mode * ---------------------------------------------------------------------- */ :root { color-scheme: light dark; } :root[data-color-mode="light"] { color-scheme: light; } :root[data-color-mode="dark"] { color-scheme: dark; } /* ------------------------------------------------------------------------- * 2. Figma semantic names → theme.json presets * ---------------------------------------------------------------------- */ :root { /* Text */ --text-color-text-body-primary-default: var(--wp--preset--color--text-primary); --text-color-text-body-secondary-default: var(--wp--preset--color--text-secondary); --text-color-text-body-example-default: var(--wp--preset--color--text-muted); --text-color-text-body-primary-disabled: var(--wp--preset--color--text-disabled); --text-color-text-inverse-primary-default: var(--wp--preset--color--text-inverse); --text-color-text-inverse-secondary-default: var(--wp--preset--color--text-inverse-secondary); /* Icon (same values as text) */ --icon-color-icon-primary-default: var(--wp--preset--color--text-primary); --icon-color-icon-secondary-default: var(--wp--preset--color--text-secondary); --icon-color-icon-primary-disabled: var(--wp--preset--color--text-disabled); --icon-color-icon-inverse-primary-default: var(--wp--preset--color--text-inverse); /* Surface */ --surface-color-bg-subtle-default: var(--wp--preset--color--surface); --surface-color-bg-natural-default: var(--wp--preset--color--surface-natural); --surface-color-bg-bold-default: var(--wp--preset--color--surface-bold); --surface-color-bg-inverse-subtle-default: var(--wp--preset--color--surface-inverse); /* Border */ --border-color-border-subtle-default: var(--wp--preset--color--border-subtle); --border-color-border-natural-default: var(--wp--preset--color--border-default); --border-color-border-bold-default: var(--wp--preset--color--border-bold); --border-color-border-focus: var(--wp--preset--color--focus); /* Button */ --button-color-bg-primary-default: var(--wp--preset--color--brand-blue); --button-color-bg-primary-hover: var(--wp--custom--color--button-primary-hover); --button-color-bg-primary-active: var(--wp--custom--color--button-primary-active); --button-color-bg-primary-disabled: light-dark(#E2E8F0, #334155); --button-color-bg-subtle-default: var(--wp--preset--color--brand-blue-subtle); --button-color-bg-secondary-default: var(--wp--preset--color--surface-natural); --button-color-bg-secondary-hover: var(--wp--custom--color--button-secondary-hover); --button-color-bg-secondary-active: var(--wp--custom--color--button-secondary-active); --button-color-border-primary-default: var(--wp--preset--color--brand-blue); --button-color-border-secondary-default: var(--wp--custom--color--button-secondary-border); /* Status */ --color-status-success-strong-default: var(--wp--preset--color--success); --color-status-success-subtle-default: var(--wp--preset--color--success-subtle); --color-status-warning-strong-default: var(--wp--preset--color--warning); --color-status-warning-subtle-default: var(--wp--preset--color--warning-subtle); --color-status-error-strong-default: var(--wp--preset--color--error); --color-status-error-subtle-default: var(--wp--preset--color--error-subtle); --color-status-info-strong-default: var(--wp--preset--color--info); --color-status-info-subtle-default: var(--wp--preset--color--info-subtle); /* Radius, icon size, component spacing */ --corner-radius-xs: var(--wp--custom--radius--xs); --corner-radius-sm: var(--wp--custom--radius--sm); --corner-radius-md: var(--wp--custom--radius--md); --corner-radius-lg: var(--wp--custom--radius--lg); --corner-radius-rounded: var(--wp--custom--radius--pill); --icon-size-icon-xs: var(--wp--custom--icon-size--xs); --icon-size-icon-sm: var(--wp--custom--icon-size--sm); --icon-size-icon-md: var(--wp--custom--icon-size--md); --icon-size-icon-lg: var(--wp--custom--icon-size--lg); --icon-size-icon-xl: var(--wp--custom--icon-size--xl); --spacing-comp-x-xs: var(--wp--custom--spacing--comp-x-xs); --spacing-comp-y-xs: var(--wp--custom--spacing--comp-y-xs); --spacing-comp-x-sm: var(--wp--custom--spacing--comp-x-sm); --spacing-comp-y-sm: var(--wp--custom--spacing--comp-y-sm); --spacing-comp-x-md: var(--wp--custom--spacing--comp-x-md); --spacing-comp-y-md: var(--wp--custom--spacing--comp-y-md); --spacing-comp-x-lg: var(--wp--custom--spacing--comp-x-lg); --spacing-comp-y-lg: var(--wp--custom--spacing--comp-y-lg); --motion-easing-standard: var(--wp--custom--motion--ease-standard); } /* ------------------------------------------------------------------------- * 3. Primitive ramps (Figma "Primitives" collection, mode-invariant) * ---------------------------------------------------------------------- */ :root { --brand-green-50: #E8FFDD; --brand-green-100: #C5FFA6; --brand-green-200: #A4F377; --brand-green-300: #8EDB5F; --brand-green-400: #75C144; --brand-green-500: #59A420; --brand-green-600: #428500; --brand-green-700: #306400; --brand-green-800: #1F4400; --brand-green-900: #0E2600; --brand-blue-50: #F1F7FF; --brand-blue-100: #DFEDFF; --brand-blue-200: #C1DCFF; --brand-blue-300: #9AC5FF; --brand-blue-400: #76ACF2; --brand-blue-500: #5B90D4; --brand-blue-600: #4073B5; --brand-blue-700: #225595; --brand-blue-800: #003774; --brand-blue-900: #001E45; --slate-000: #F8F8F8; --slate-50: #F8FAFC; --slate-100: #F1F5F9; --slate-200: #E2E8F0; --slate-300: #CBD5E1; --slate-400: #94A3B8; --slate-500: #64748B; --slate-600: #44536A; --slate-700: #334155; --slate-800: #1E293B; --slate-900: #0F172A; } /* ------------------------------------------------------------------------- * 4. Legacy presets * * These slugs were in the V1 palette. They are kept out of the V2 editor * palette but still resolve, so older content and The Framework Core blocks * render with V2 colours. Don't use them in new work. * ---------------------------------------------------------------------- */ :root { --wp--preset--color--primary: var(--wp--preset--color--brand-blue); --wp--preset--color--secondary: var(--wp--preset--color--brand-navy); --wp--preset--color--black: var(--wp--preset--color--text-primary); --wp--preset--color--neutral-50: light-dark(#F8FAFC, #0F172A); --wp--preset--color--neutral-100: light-dark(#F1F5F9, #1E293B); --wp--preset--color--neutral-200: light-dark(#E2E8F0, #334155); --wp--preset--color--neutral-300: light-dark(#CBD5E1, #44536A); --wp--preset--color--neutral-400: light-dark(#94A3B8, #64748B); --wp--preset--color--neutral-500: light-dark(#64748B, #94A3B8); --wp--preset--color--neutral-600: light-dark(#44536A, #CBD5E1); --wp--preset--color--neutral-700: light-dark(#334155, #E2E8F0); --wp--preset--color--neutral-800: light-dark(#1E293B, #F1F5F9); --wp--preset--color--neutral-900: light-dark(#0F172A, #FFFFFF); --wp--preset--font-size--decoration-1: var(--wp--preset--font-size--display); /* V2's first slugs for Text and Border, renamed because WordPress gives every block with a text or border colour the classes `has-text-color` / `has-border-color`, which the old slugs' colour classes also used. */ --wp--preset--color--text: var(--wp--preset--color--text-primary); --wp--preset--color--border: var(--wp--preset--color--border-default); } /* Old-slug classes that don't clash with WordPress's generic ones. (textColor "text" / "border" saved only `has-text-color` / `has-border-color`, which now carry no colour; no content uses them.) */ .has-text-background-color { background-color: var(--wp--preset--color--text) !important; } .has-border-background-color { background-color: var(--wp--preset--color--border) !important; } .has-text-border-color { border-color: var(--wp--preset--color--text) !important; } .has-border-border-color { border-color: var(--wp--preset--color--border) !important; } .has-primary-color { color: var(--wp--preset--color--primary) !important; } .has-secondary-color { color: var(--wp--preset--color--secondary) !important; } .has-black-color { color: var(--wp--preset--color--black) !important; } .has-neutral-50-color { color: var(--wp--preset--color--neutral-50) !important; } .has-neutral-100-color { color: var(--wp--preset--color--neutral-100) !important; } .has-neutral-200-color { color: var(--wp--preset--color--neutral-200) !important; } .has-neutral-300-color { color: var(--wp--preset--color--neutral-300) !important; } .has-neutral-400-color { color: var(--wp--preset--color--neutral-400) !important; } .has-neutral-500-color { color: var(--wp--preset--color--neutral-500) !important; } .has-neutral-600-color { color: var(--wp--preset--color--neutral-600) !important; } .has-neutral-700-color { color: var(--wp--preset--color--neutral-700) !important; } .has-neutral-800-color { color: var(--wp--preset--color--neutral-800) !important; } .has-neutral-900-color { color: var(--wp--preset--color--neutral-900) !important; } .has-primary-background-color { background-color: var(--wp--preset--color--primary) !important; } .has-secondary-background-color { background-color: var(--wp--preset--color--secondary) !important; } .has-black-background-color { background-color: var(--wp--preset--color--black) !important; } .has-neutral-50-background-color { background-color: var(--wp--preset--color--neutral-50) !important; } .has-neutral-100-background-color { background-color: var(--wp--preset--color--neutral-100) !important; } .has-neutral-200-background-color { background-color: var(--wp--preset--color--neutral-200) !important; } .has-neutral-300-background-color { background-color: var(--wp--preset--color--neutral-300) !important; } .has-neutral-400-background-color { background-color: var(--wp--preset--color--neutral-400) !important; } .has-neutral-500-background-color { background-color: var(--wp--preset--color--neutral-500) !important; } .has-neutral-600-background-color { background-color: var(--wp--preset--color--neutral-600) !important; } .has-neutral-700-background-color { background-color: var(--wp--preset--color--neutral-700) !important; } .has-neutral-800-background-color { background-color: var(--wp--preset--color--neutral-800) !important; } .has-neutral-900-background-color { background-color: var(--wp--preset--color--neutral-900) !important; } .has-primary-border-color { border-color: var(--wp--preset--color--primary) !important; } .has-secondary-border-color { border-color: var(--wp--preset--color--secondary) !important; } .has-neutral-200-border-color { border-color: var(--wp--preset--color--neutral-200) !important; } .has-neutral-300-border-color { border-color: var(--wp--preset--color--neutral-300) !important; } .has-decoration-1-font-size { font-size: var(--wp--preset--font-size--decoration-1) !important; }