/* * GF Builder token adapter. * * theme.json is the single source of truth for every value a user can change. * This file is the one-way bridge from the properties WordPress emits * (--wp--preset--*, --wp--custom--gf--*) onto the --gf-* names that the 4,600 * lines of src/styles/base.css and src/styles/groups/*.css already read. * Rewriting those to --wp--* would have been a huge, error-prone diff for zero * behavioural gain; aliasing costs one indirection and keeps both vocabularies * honest. * * Rules for editing this file: * 1. Aliases only. If a value is user-configurable it belongs in theme.json * (static defaults) and GFBuilder\Design\Settings (live overrides), never * here. The literal in each var() fallback is a last-resort default for * the case where the theme has no theme.json at all -- it is not the * source of truth and must match theme.json when it does exist. * 2. The constants block below is genuinely constant: elevation ramp, state * palettes, focus ring, radii. Nothing in Design Settings edits them. * The state and active literals are only the no-theme.json fallback: * when the Site Editor overrides a palette colour, Design Settings * publishes the matching custom.gf.state/active values as tints of the * live preset instead (GFBuilder\Design\StateColours). * 3. Never add a selector other than :root here, and never add !important. * Core block-support CSS is unlayered; anything that beats it breaks the * block inspector. */ :root { /* ---- Brand colours: settings.color.palette ---- */ --gf-color-primary: var(--wp--preset--color--primary, #1d4ed8); /* Primary as TEXT: darkened only if it must be. See Design\TextSafeAccent. */ --gf-color-primary-text: var(--wp--custom--gf--accent--text, var(--gf-color-primary)); /* Primary under white ink, darkened only if it must be: GROUND (bands and * other grounds with chips), FILL (filled button and toggle). */ --gf-color-primary-ground: var(--wp--custom--gf--accent--band, var(--gf-color-primary)); --gf-color-primary-fill: var(--wp--custom--gf--accent--fill, var(--gf-color-primary)); --gf-color-secondary: var(--wp--preset--color--secondary, #0f766e); --gf-color-accent: var(--wp--preset--color--accent, #f59e0b); --gf-color-dark: var(--wp--preset--color--dark, #111827); --gf-color-light: var(--wp--preset--color--light, #ffffff); --gf-color-surface: var(--wp--preset--color--surface, #ffffff); --gf-color-muted: var(--wp--preset--color--muted, #f3f6f8); --gf-color-border: var(--wp--preset--color--border, #d8dee6); --gf-color-info: var(--wp--preset--color--info, #2563eb); --gf-color-success: var(--wp--preset--color--success, #15803d); --gf-color-warning: var(--wp--preset--color--warning, #b45309); --gf-color-danger: var(--wp--preset--color--danger, #b91c1c); /* ---- Typography: settings.typography + settings.custom.gf.type ---- */ --gf-font-sans: var(--wp--preset--font-family--sans, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); --gf-type-display-xl-size: var(--wp--custom--gf--type--display-xl-size, clamp(3rem, 7vw, 5.5rem)); --gf-type-display-lg-size: var(--wp--custom--gf--type--display-lg-size, clamp(2.5rem, 6vw, 4.5rem)); --gf-type-display-md-size: var(--wp--custom--gf--type--display-md-size, clamp(2.25rem, 5vw, 3.75rem)); --gf-type-display-sm-size: var(--wp--custom--gf--type--display-sm-size, calc((var(--gf-type-display-md-size) + var(--gf-type-heading-xl-size)) / 2)); --gf-type-heading-xl-size: var(--wp--custom--gf--type--heading-xl-size, clamp(2rem, 4vw, 3rem)); --gf-type-heading-lg-size: var(--wp--custom--gf--type--heading-lg-size, clamp(1.625rem, 3vw, 2.25rem)); --gf-type-heading-md-size: var(--wp--custom--gf--type--heading-md-size, clamp(1.375rem, 2vw, 1.75rem)); --gf-type-heading-sm-size: var(--wp--custom--gf--type--heading-sm-size, clamp(1.25rem, 1.5vw, 1.5rem)); --gf-type-body-lg-size: var(--wp--custom--gf--type--body-lg-size, 1.125rem); --gf-type-body-size: var(--wp--custom--gf--type--body-size, 1rem); --gf-type-body-sm-size: var(--wp--custom--gf--type--body-sm-size, 0.875rem); --gf-type-body-line-height: var(--wp--custom--gf--type--body-line-height, 1.65); --gf-type-heading-weight: var(--wp--custom--gf--type--heading-weight, 700); --gf-type-heading-tracking: var(--wp--custom--gf--type--heading-tracking, normal); --gf-type-display-xl-leading: var(--wp--custom--gf--type--display-xl-leading, 0.95); --gf-type-display-lg-leading: var(--wp--custom--gf--type--display-lg-leading, 1); --gf-type-display-md-leading: var(--wp--custom--gf--type--display-md-leading, 1.05); --gf-type-heading-xl-leading: var(--wp--custom--gf--type--heading-xl-leading, 1.1); --gf-type-heading-lg-leading: var(--wp--custom--gf--type--heading-lg-leading, 1.15); --gf-type-heading-md-leading: var(--wp--custom--gf--type--heading-md-leading, 1.2); --gf-type-heading-sm-leading: var(--wp--custom--gf--type--heading-sm-leading, 1.25); --gf-type-body-lg-leading: var(--wp--custom--gf--type--body-lg-leading, 1.7); --gf-type-body-sm-leading: var(--wp--custom--gf--type--body-sm-leading, 1.6); --gf-type-body-xs-size: var(--wp--custom--gf--type--body-xs-size, 0.75rem); --gf-type-body-xs-leading: var(--wp--custom--gf--type--body-xs-leading, 1.4); /* ---- Active state: settings.custom.gf.active ---- */ --gf-active-bg: var(--wp--custom--gf--active--bg, #dbeafe); --gf-active-bg-hover: var(--wp--custom--gf--active--bg-hover, #bfdbfe); --gf-active-border: var(--wp--custom--gf--active--border, #93c5fd); --gf-active-text: var(--wp--custom--gf--active--text, #1d4ed8); --gf-active-soft-bg: var(--wp--custom--gf--active--soft-bg, #eff6ff); --gf-active-soft-border: var(--wp--custom--gf--active--soft-border, #bfdbfe); /* The active FILL's brand colour, only when the text-safe text differs. */ --gf-active-accent: var(--wp--custom--gf--active--accent); /* ---- Links: settings.custom.gf.link ---- */ --gf-link-color: var(--wp--custom--gf--link--color, var(--gf-color-primary-text)); --gf-link-hover-color: var(--wp--custom--gf--link--hover-color, color-mix(in srgb, var(--gf-color-primary-text) 82%, black)); --gf-link-on-dark: var(--wp--custom--gf--link--on-dark, var(--gf-text-on-dark)); /* ---- Components: settings.custom.gf.component (Settings::component_vars) ---- */ --gf-button-radius: var(--wp--custom--gf--component--button-radius, 0.5rem); --gf-button-font-weight: var(--wp--custom--gf--component--button-font-weight, 700); /* Only ever set from Site Editor > Styles > Buttons (Design\ButtonBridge). * Unset, it is invalid and the button's own `inherit` fallback applies. */ --gf-button-font-family: var(--wp--custom--gf--component--button-font-family); /* Same shape: a gradient fill for primary buttons, set from Site Editor > * Styles > Buttons or by a theme. Unset, it is invalid and the button's * `none` fallback applies. */ --gf-button-primary-bg-image: var(--wp--custom--gf--component--button-primary-bg-image); --gf-button-primary-bg: var(--wp--custom--gf--component--button-primary-bg, var(--gf-color-primary-fill)); --gf-button-primary-bg-hover: var(--wp--custom--gf--component--button-primary-bg-hover, color-mix(in srgb, var(--gf-color-primary-fill) 88%, black)); --gf-button-primary-border: var(--wp--custom--gf--component--button-primary-border, transparent); --gf-button-primary-border-hover: var(--wp--custom--gf--component--button-primary-border-hover, transparent); --gf-button-primary-color: var(--wp--custom--gf--component--button-primary-color, var(--gf-text-on-dark)); --gf-button-primary-color-hover: var(--wp--custom--gf--component--button-primary-color-hover, var(--gf-text-on-dark)); --gf-button-shadow: var(--wp--custom--gf--component--button-shadow, var(--gf-elevation-1)); --gf-button-shadow-hover: var(--wp--custom--gf--component--button-shadow-hover, var(--gf-elevation-3)); --gf-card-radius-default: var(--wp--custom--gf--component--card-radius-default, 0.5rem); /* ---- Component proportion: settings.custom.gf.control ---- * * THE FURNITURE, which every pack used to share. Colour, depth, radius and * type all became settable before this and the three packs still had * identically-sized buttons, nav links and card padding -- so a UIKit page * and a Material page differed in every respect except how big anything was. * A design system is proportions as much as it is palette. * * These are the sizes the size CLASSES set, not a replacement for them: an * author still picks sm/md/lg, and the pack decides what those mean. That is * the same division the radius scale already uses. */ --gf-control-sm-height: var(--wp--custom--gf--control--sm-height, 2.25rem); --gf-control-sm-pad-block: var(--wp--custom--gf--control--sm-pad-block, 0.5rem); --gf-control-sm-pad-inline: var(--wp--custom--gf--control--sm-pad-inline, 0.75rem); --gf-control-md-height: var(--wp--custom--gf--control--md-height, 2.75rem); --gf-control-md-pad-block: var(--wp--custom--gf--control--md-pad-block, 0.75rem); --gf-control-md-pad-inline: var(--wp--custom--gf--control--md-pad-inline, 1rem); --gf-control-lg-height: var(--wp--custom--gf--control--lg-height, 3.25rem); --gf-control-lg-pad-block: var(--wp--custom--gf--control--lg-pad-block, 0.875rem); --gf-control-lg-pad-inline: var(--wp--custom--gf--control--lg-pad-inline, 1.25rem); /* Nav links are a control too, at their own two densities. */ --gf-nav-comfortable-height: var(--wp--custom--gf--control--nav-comfortable-height, 2.25rem); --gf-nav-comfortable-pad-block: var(--wp--custom--gf--control--nav-comfortable-pad-block, 0.375rem); --gf-nav-comfortable-pad-inline: var(--wp--custom--gf--control--nav-comfortable-pad-inline, 0.5rem); --gf-nav-compact-height: var(--wp--custom--gf--control--nav-compact-height, 2rem); --gf-nav-compact-pad-block: var(--wp--custom--gf--control--nav-compact-pad-block, 0.25rem); --gf-nav-compact-pad-inline: var(--wp--custom--gf--control--nav-compact-pad-inline, 0.45rem); --gf-nav-weight: var(--wp--custom--gf--control--nav-weight, 650); /* Control TEXT. A badge's three steps are a deliberate ramp of its own -- * 0.6875 / 0.75 / 0.8125 -- not three people guessing, so they keep their * values and become settable rather than being collapsed onto the prose * rungs. Same reasoning as the sizes above: the pack decides what sm/md/lg * mean, the author still picks which one. */ --gf-control-lg-font-size: var(--wp--custom--gf--control--lg-font-size, 1.0625rem); --gf-badge-sm-font-size: var(--wp--custom--gf--control--badge-sm-font-size, 0.6875rem); --gf-badge-md-font-size: var(--wp--custom--gf--control--badge-md-font-size, 0.75rem); --gf-badge-lg-font-size: var(--wp--custom--gf--control--badge-lg-font-size, 0.8125rem); --gf-badge-sm-count-font-size: var(--wp--custom--gf--control--badge-sm-count-font-size, 0.625rem); --gf-badge-md-count-font-size: var(--wp--custom--gf--control--badge-md-count-font-size, 0.6875rem); --gf-badge-lg-count-font-size: var(--wp--custom--gf--control--badge-lg-count-font-size, 0.8125rem); /* The pricing card's own hierarchy. These were mapped onto heading-xl and * heading-md first and the amount jumped 40px -> 48px, the title 21.6 -> 28: * both rungs are fluid clamps whose CEILING is far above the fixed value that * was there. Making a price 20% larger is a design decision, not a * refactor, so they keep their values and become settable instead. */ --gf-price-amount-font-size: var(--wp--custom--gf--control--price-amount-font-size, 2.5rem); --gf-price-title-font-size: var(--wp--custom--gf--control--price-title-font-size, 1.35rem); /* Card padding is furniture, not page rhythm: it should not have to move * when the section spacing does. Defaults still resolve through the spacing * scale, so nothing changes until a pack says otherwise. */ --gf-card-pad-sm: var(--wp--custom--gf--control--card-pad-sm, var(--wp--preset--spacing--sm, 1rem)); --gf-card-pad-md: var(--wp--custom--gf--control--card-pad-md, var(--wp--preset--spacing--md, 1.5rem)); --gf-card-pad-lg: var(--wp--custom--gf--control--card-pad-lg, var(--wp--preset--spacing--lg, 2rem)); --gf-card-pad-xl: var(--wp--custom--gf--control--card-pad-xl, var(--wp--preset--spacing--xl, 3rem)); --gf-shadow-soft: var(--wp--custom--gf--component--shadow-soft, var(--gf-elevation-1)); --gf-shadow-medium: var(--wp--custom--gf--component--shadow-medium, var(--gf-elevation-3)); /* ---- Layout: settings.layout + settings.custom.gf.container / site ---- */ --gf-site-background: var(--wp--custom--gf--site--background, var(--gf-color-surface)); /* CORE'S WIDTHS FIRST. Site Editor > Styles > Layout writes * settings.layout, which core emits as --wp--style--global--*; GF Design * Settings writes the same key on the theme layer, so a Site Editor width * wins and a Design Settings one still applies when nobody has set one. * custom.gf.container used to come first, and GF containers ignored every * Site Editor width change. It stays only as a fallback for themes that * declare no layout at all. */ --gf-container-content: var(--wp--style--global--content-size, var(--wp--custom--gf--container--content, 64rem)); --gf-container-wide: var(--wp--style--global--wide-size, var(--wp--custom--gf--container--wide, 80rem)); /* ---- Shape layer: settable, with the old constants as fallbacks. ---- * * These were declared here as constants on the premise that they are "not * user-configurable, so not theme.json's business". That premise was the * single largest thing standing between this plugin and a second visual * identity: border-radius appears 107 times across the stylesheets and only * six of those tracked a setting, because the ramp itself was frozen here. * * Each now reads a theme.json custom property and falls back to the literal * it always had, so a site with no theme.json is byte-identical. * * KEYS ARE AUTHORED ALREADY KEBAB-CASED, digit separation included * (`level-0`, not `level0`). Measured: `level0` emits as `level-0` anyway, * and `inset10` and `inset-10` COLLIDE into one property with the last one * winning silently. Authoring the kebab form makes the raw key and the * emitted name the same string, so the three reference mechanisms * (`ref`, `var:custom|...`, useSetting) cannot disagree. */ --gf-container-narrow: var(--wp--custom--gf--width--narrow, 48rem); --gf-container-inset-10: var(--wp--custom--gf--width--inset-10, max(1rem, 10vw)); --gf-container-inset-20: var(--wp--custom--gf--width--inset-20, max(1rem, 20vw)); --gf-radius-sm: var(--wp--custom--gf--radius--sm, 0.25rem); --gf-radius-md: var(--wp--custom--gf--radius--md, 0.5rem); --gf-radius-lg: var(--wp--custom--gf--radius--lg, 0.75rem); /* The fully-round rung. 25 literals across six group stylesheets used to * bypass the ramp above, so a pack that squares everything off still drew * round chips. See the note in Design\Settings::custom_gf(). */ --gf-radius-pill: var(--wp--custom--gf--radius--pill, 9999px); /* Page rhythm and measure. Both were frozen in base.css, which is why all * three packs put identical padding on every band and let a lead paragraph * run the full container width. */ --gf-rhythm-section: var(--wp--custom--gf--rhythm--section, var(--wp--preset--spacing--xxl, clamp(4rem, 3.66rem + 1.67vw, 5rem))); --gf-rhythm-section-tight: var(--wp--custom--gf--rhythm--section-tight, var(--wp--preset--spacing--xl, 3rem)); --gf-rhythm-gutter-sm: var(--wp--custom--gf--rhythm--gutter-sm, var(--wp--preset--spacing--sm, 1rem)); --gf-rhythm-gutter-md: var(--wp--custom--gf--rhythm--gutter-md, var(--wp--preset--spacing--md, 1.5rem)); --gf-rhythm-gutter-lg: var(--wp--custom--gf--rhythm--gutter-lg, var(--wp--preset--spacing--lg, 2rem)); --gf-measure-tight: var(--wp--custom--gf--measure--tight, 34rem); --gf-measure: var(--wp--custom--gf--measure--base, 42rem); --gf-measure-wide: var(--wp--custom--gf--measure--wide, 52rem); /* Inline emphasis: the house style of the three RichText formats. */ --gf-emphasis-gradient-angle: var(--wp--custom--gf--emphasis--gradient-angle, 90deg); --gf-emphasis-highlight-alpha: var(--wp--custom--gf--emphasis--highlight-alpha, 22%); --gf-emphasis-highlight-radius: var(--wp--custom--gf--emphasis--highlight-radius, var(--gf-radius-sm)); --gf-emphasis-highlight-pad-inline: var(--wp--custom--gf--emphasis--highlight-pad-inline, 0.22em); --gf-emphasis-underline-size: var(--wp--custom--gf--emphasis--underline-size, 0.3em); --gf-emphasis-underline-alpha: var(--wp--custom--gf--emphasis--underline-alpha, 46%); /* Which pack is in force. Read by Patterns\Registry in PHP, not by any * rule here -- it is exposed as a custom property only because theme.json is * the one channel a style variation can speak through. */ --gf-pack-id: var(--wp--custom--gf--pack--id, ""); /* The device frame around a screenshot. */ --gf-device-tilt: var(--wp--custom--gf--device--tilt, 0deg); --gf-device-bar-height: var(--wp--custom--gf--device--bar-height, 1.75rem); --gf-device-dot: var(--wp--custom--gf--device--dot, color-mix(in srgb, var(--gf-color-dark) 24%, transparent)); /* The floating action button. */ --gf-fab-size: var(--wp--custom--gf--fab--size, 3.5rem); --gf-fab-radius: var(--wp--custom--gf--fab--radius, 9999px); --gf-fab-offset-block: var(--wp--custom--gf--fab--offset-block, 1.5rem); --gf-fab-offset-inline: var(--wp--custom--gf--fab--offset-inline, 1.5rem); /* Decorative ground behind a band. */ --gf-decoration-wash: var(--wp--custom--gf--decoration--wash, radial-gradient(60% 60% at 50% 0%, color-mix(in srgb, var(--gf-color-primary) 10%, transparent) 0%, transparent 100%)); --gf-decoration-grid-line: var(--wp--custom--gf--decoration--grid-line, color-mix(in srgb, var(--gf-color-border) 60%, transparent)); --gf-decoration-grid-size: var(--wp--custom--gf--decoration--grid-size, 3rem); --gf-decoration-sheen: var(--wp--custom--gf--decoration--sheen, linear-gradient(180deg, color-mix(in srgb, var(--gf-color-muted) 90%, transparent) 0%, transparent 60%)); --gf-decoration-shape-from: var(--wp--custom--gf--decoration--shape-from, var(--gf-color-primary)); --gf-decoration-shape-to: var(--wp--custom--gf--decoration--shape-to, var(--gf-color-accent)); --gf-decoration-shape-angle: var(--wp--custom--gf--decoration--shape-angle, 115deg); --gf-decoration-shape-opacity: var(--wp--custom--gf--decoration--shape-opacity, 0.18); --gf-text-on-dark: var(--wp--custom--gf--text--on-dark, #ffffff); --gf-text-muted: var(--wp--custom--gf--text--muted, color-mix(in srgb, var(--gf-color-dark) 68%, transparent)); /* The THIRD ink rung, below body and below muted, for captions. A page had * two ink values before this -- the primary ink and one muted -- so anything * that should sit quieter than help text had nowhere to go. Opaque by * construction rather than an alpha of the primary ink, and it still follows * a repainted palette. */ --gf-text-subtle: var(--wp--custom--gf--text--subtle, color-mix(in srgb, var(--gf-color-dark) 58%, var(--gf-color-surface))); /* * The same two values, under names a DARK CONTEXT DOES NOT RE-POINT. * * A dark section reassigns --gf-text-muted and --gf-color-border to their * on-dark equivalents, and both inherit into any descendant -- including a * component that paints itself a fixed light surface, where the result is * light ink on a light card. .gf-stat's description did exactly that inside * `is-style-dark`: white at 74% opacity on white, with nothing to show for it * anywhere in the DOM. * * Components that fix their own surface reach for these instead. They are * aliases, not new design decisions: identical values, different names, so * there is nothing extra to keep in step. */ /* * THE PRIMARY INK'S `-on-light` ALIAS, which was the one missing of the * three. `--gf-color-dark` deliberately does NOT follow the scheme (eleven of * its eighteen uses are scrims over photographs and must stay dark), so a * component that paints its own SCHEME-FOLLOWING surface and then reaches for * --gf-color-dark as its ink is pairing a colour that moves with one that * does not. Under a dark scheme that is dark text on a dark card. * * The literal tail matters: alone in this block it had none, so a theme with * no `dark` preset left it invalid, and an invalid inherited colour is * `unset` -- the component took its ancestor's white instead of the ink it * asked for. Measured with no presets: rgb(255,255,255) on rgb(255,255,255). */ --gf-text-on-light: var(--wp--preset--color--dark, #111827); --gf-link-on-light: var(--wp--custom--gf--link--color, var(--gf-color-primary-text)); /* On a glass box over a dark band; read only through the glass box slots. */ --gf-link-on-glass: var(--wp--custom--gf--link--color-on-glass, var(--gf-link-on-light)); --gf-link-hover-on-glass: color-mix(in srgb, var(--gf-link-on-glass) 82%, black); /* * The accent as INK on a scheme-following ground: outline and ghost button * labels, their hover. The text-safe primary here and on the light half of * a scheme; scheme.css lightens it on the dark half, because primary on a * dark page measured 2.8:1. Not the link colour: a Site Editor link colour * must not re-colour buttons. */ --gf-accent-on-light: var(--gf-color-primary-text); --gf-accent-on-glass: var(--wp--custom--gf--accent--text-on-glass, var(--gf-color-primary-text)); --gf-link-hover-on-light: var( --wp--custom--gf--link--hover-color, color-mix(in srgb, var(--gf-color-primary-text) 82%, black) ); --gf-text-muted-on-light: var(--wp--custom--gf--text--muted, color-mix(in srgb, var(--gf-color-dark) 68%, transparent)); --gf-color-border-on-light: var(--wp--preset--color--border, #d8dee6); --gf-surface-tint-level: var(--wp--custom--gf--surface--tint-level, 5%); --gf-surface-flat: var(--wp--custom--gf--surface--flat, var(--gf-color-surface)); --gf-surface-raised: var(--wp--custom--gf--surface--raised, #ffffff); --gf-surface-inset: var(--wp--custom--gf--surface--inset, #eef2f7); --gf-surface-glass: var(--wp--custom--gf--surface--glass, rgb(255 255 255 / 0.76)); --gf-elevation-0: var(--wp--custom--gf--elevation--level-0, none); --gf-elevation-1: var(--wp--custom--gf--elevation--level-1, 0 2px 5px rgb(15 23 42 / 0.08)); --gf-elevation-2: var(--wp--custom--gf--elevation--level-2, 0 6px 16px rgb(15 23 42 / 0.11)); --gf-elevation-3: var(--wp--custom--gf--elevation--level-3, 0 14px 32px rgb(15 23 42 / 0.14)); --gf-elevation-4: var(--wp--custom--gf--elevation--level-4, 0 22px 48px rgb(15 23 42 / 0.18)); --gf-elevation-5: var(--wp--custom--gf--elevation--level-5, 0 32px 64px rgb(15 23 42 / 0.22)); --gf-state-info-bg: var(--wp--custom--gf--state--info-bg, #e8f0ff); --gf-state-info-text: var(--wp--custom--gf--state--info-text, #1e40af); --gf-state-info-border: var(--wp--custom--gf--state--info-border, #bfdbfe); --gf-state-success-bg: var(--wp--custom--gf--state--success-bg, #e8f7ee); --gf-state-success-text: var(--wp--custom--gf--state--success-text, #166534); --gf-state-success-border: var(--wp--custom--gf--state--success-border, #bbf7d0); --gf-state-warning-bg: var(--wp--custom--gf--state--warning-bg, #fff7df); --gf-state-warning-text: var(--wp--custom--gf--state--warning-text, #92400e); --gf-state-warning-border: var(--wp--custom--gf--state--warning-border, #fde68a); --gf-state-danger-bg: var(--wp--custom--gf--state--danger-bg, #feecec); --gf-state-danger-text: var(--wp--custom--gf--state--danger-text, #991b1b); --gf-state-danger-border: var(--wp--custom--gf--state--danger-border, #fecaca); --gf-focus-ring-color: var(--wp--custom--gf--focus--ring-color, color-mix(in srgb, var(--gf-color-primary) 68%, transparent)); --gf-focus-ring-shadow: var(--wp--custom--gf--focus--ring-shadow, 0 0 0 0.25rem color-mix(in srgb, var(--gf-color-primary) 18%, transparent)); --gf-interaction-overlay: var(--wp--custom--gf--interaction--overlay, rgb(255 255 255 / 0.26)); }