/** * Button Styles — 10 Presets (static appearance only) * * Each preset targets `.wp-block-button.is-style-{slug} .wp-block-button__link`. * All visual values reference theme tokens via CSS custom properties — never * hardcoded hex, named colors, or magic pixel values. * * This file defines AT-REST appearance only. Hover behavior — including each * style's default hover effect — lives in /extensions/block-hover/style.css. * The per-style defaults section at the bottom of that file maps each of the * 10 styles below to one of the registered hover presets. * * One exception: Dashed retains a gated `border-style: dashed → solid` change * on hover. This declaration is part of Dashed's visual identity (the dashes * "harden" on interaction), not a generic hover effect, so it stays here. * The :not([class*="has-hover-"]) gate ensures the user can override or * disable it like any other default. * * Color strategy (per Foundation Section 4.1): * - Each preset sets sensible defaults using semantic color roles. * - Users can override via the standard color picker — preset visual identity * (shape, padding, shadow) survives the color change. * * Styles are loaded in both the editor and the front end via the same file * (Philosophy 2.9 — editor must match front end). */ /* ============================================================ 01 — Solid Strong filled button with subtle inner highlight + drop shadow. Default hover (block-hover/style.css): fx-lift-soft. ============================================================ */ .wp-block-button.is-style-solid > .wp-block-button__link { background-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--background); padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); border-radius: 10px; font-family: var(--wp--preset--font-family--primary); font-weight: 500; letter-spacing: -0.005em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.18), 0 8px 24px -10px rgba(0, 0, 0, 0.35); } /* ============================================================ 02 — Ghost Transparent w/ thin border, uppercase tracking. Default hover (block-hover/style.css): fx-fill (text-color fill). ============================================================ */ .wp-block-button.is-style-ghost > .wp-block-button__link { background-color: transparent; color: var(--wp--preset--color--ink); padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); border: 1px solid var(--wp--preset--color--ink); border-radius: 0; font-family: var(--wp--preset--font-family--primary); font-weight: 500; font-size: 0.85em; letter-spacing: 0.16em; text-transform: uppercase; } /* ============================================================ 03 — Pill Fully rounded, branded fill, soft colored shadow. Default hover (block-hover/style.css): fx-lift-glow. ============================================================ */ .wp-block-button.is-style-pill > .wp-block-button__link { background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--background); padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60); border-radius: 999px; font-family: var(--wp--preset--font-family--primary); font-weight: 600; letter-spacing: -0.005em; box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--wp--preset--color--primary) 70%, transparent); } /* ============================================================ 04 — Brutal Bold heading font, crisp drop shadow at rest. Default hover (block-hover/style.css): fx-press — animates from the resting shadow into a flat pressed-down state on hover. Uses the `crisp` shadow preset registered in theme.json. ============================================================ */ .wp-block-button.is-style-brutal > .wp-block-button__link { position: relative; top: 0; background-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink); padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); border: 2px solid var(--wp--preset--color--ink); border-radius: 4px; font-family: var(--wp--preset--font-family--heading); font-weight: 700; box-shadow: var(--wp--preset--shadow--crisp); } /* ============================================================ 05 — Slanted Skewed shape with accent stripe at the bottom. Default hover (block-hover/style.css): fx-bg-b — a curtain of accent color sweeps up from below. The Slanted default rule there adds the ::before pseudo and isolation: isolate needed by that effect. Implementation note: the reference uses a child to un-skew text inside a skewed parent. core/button only renders a single anchor, so we can't un-skew text without injecting markup. We accept the text skew as intentional — it is the visual identity of this preset. Reduced from -12deg to -8deg so text remains readable. ============================================================ */ .wp-block-button.is-style-slanted > .wp-block-button__link { position: relative; display: inline-block; background-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--background); padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); border-radius: 2px; font-family: var(--wp--preset--font-family--primary); font-weight: 700; font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.12em; transform: skewX(-8deg); overflow: hidden; box-shadow: inset 0 -3px 0 0 var(--wp--preset--color--accent); } /* ============================================================ 06 — 3D Press Stacked drop shadow simulating extruded depth. Default hover (block-hover/style.css): fx-press — settles into a flat pressed-down state on hover. Note: the press color shifts from the secondary-derived stack at rest to a neutral text-color flat state on hover, which is the preset's behavior. ============================================================ */ .wp-block-button.is-style-3d-press > .wp-block-button__link { position: relative; top: 0; background-color: var(--wp--preset--color--secondary); color: var(--wp--preset--color--background); padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); border-radius: 9px; font-family: var(--wp--preset--font-family--primary); font-weight: 600; letter-spacing: -0.005em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.18), 0 4px 0 0 color-mix(in srgb, var(--wp--preset--color--secondary) 60%, var(--wp--preset--color--ink)), 0 6px 14px -4px color-mix(in srgb, var(--wp--preset--color--secondary) 50%, transparent); } /* ============================================================ 07 — Soft Subtle skeuomorphic surface, layered inset highlights and ambient shadow. Default hover (block-hover/style.css): fx-shadow-grow — implemented as filter: drop-shadow so Soft's layered box-shadow stack is preserved at rest and on hover; the drop-shadow expands additively. ============================================================ */ .wp-block-button.is-style-soft > .wp-block-button__link { background-color: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); border-radius: 12px; font-family: var(--wp--preset--font-family--primary); font-weight: 500; letter-spacing: -0.005em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.04), 0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--wp--preset--color--hairline); } /* ============================================================ 08 — Dashed Terminal-style with leading prompt, dashed border. Default hover (block-hover/style.css): fx-fill (text-color fill). GATED EXCEPTION: border-style dashed → solid on hover stays here. It's part of Dashed's visual identity (the dashes "harden" on interaction), not a generic hover effect. The :not([class*="has-hover-"]) gate matches the per-style default's gate, so picking any other preset or "None" suppresses this too. Note: uses primary font (no mono token in design system). ============================================================ */ .wp-block-button.is-style-dashed > .wp-block-button__link { background-color: transparent; color: var(--wp--preset--color--ink); padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); border: 1.5px dashed var(--wp--preset--color--ink); border-radius: 6px; font-family: var(--wp--preset--font-family--primary); font-weight: 500; } .wp-block-button.is-style-dashed > .wp-block-button__link::before { content: "$ "; color: var(--wp--preset--color--text-muted); margin-right: 2px; } /* Gated visual-identity hover: dashes solidify when no preset / no override. */ .wp-block-button.is-style-dashed:not([class*="has-hover-"]) > .wp-block-button__link:hover { border-style: solid; } /* ============================================================ 09 — Asymmetric Mismatched corner radii. Default hover (block-hover/style.css): fx-radius-flip — the diagonal pairs swap (22 4 22 4 → 4 22 4 22), and background swaps to --hover-bg (defaults to accent). User can override hover bg via the inspector color picker. ============================================================ */ .wp-block-button.is-style-asymmetric > .wp-block-button__link { background-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--background); padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60); border-radius: 22px 4px 22px 4px; font-family: var(--wp--preset--font-family--primary); font-weight: 500; font-size: 0.9em; letter-spacing: 0.04em; text-transform: uppercase; } /* ============================================================ 10 — Editorial Minimal underlined text-link styling, serif italic. Default hover (block-hover/style.css): fx-shift-r — padding-right grows by 0.5em, suggesting forward motion. The arrow has to come from text content (→) since we can't inject markup. ============================================================ */ .wp-block-button.is-style-editorial > .wp-block-button__link { background-color: transparent; color: var(--wp--preset--color--ink); padding: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--30); border-radius: 0; border-bottom: 2px solid var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--heading); font-style: italic; font-weight: 400; font-size: 1.25em; letter-spacing: -0.01em; }