srcdev-nuxt-components 9.3.11 → 9.3.13

package/app/components/03.organisms/services/services-grids/stories/{ServicesSectionGrid.stories.ts → ServiceSummaryGrid.stories.ts}

@@ -1,10 +1,10 @@
-import ServicesSectionGrid from "../ServicesSectionGrid.vue";
+import ServiceSummaryGrid from "../ServiceSummaryGrid.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
 import type { Service } from "~/types/types.services";
 
-const meta: Meta<typeof ServicesSectionGrid> = {
-  title: "Organisms/Services/Services Section Grid",
-  component: ServicesSectionGrid,
+const meta: Meta<typeof ServiceSummaryGrid> = {
+  title: "Organisms/Services/Service Summary Grid",
+  component: ServiceSummaryGrid,
   argTypes: {
     tag: {
       control: { type: "select" },
@@ -15,7 +15,7 @@ const meta: Meta<typeof ServicesSectionGrid> = {
       control: { type: "boolean" },
       description: "Alternate image/content column order on every other section",
     },
-    summaryAlignment: {
+    alignment: {
       control: { type: "select" },
       options: ["start", "center", "end"],
       description: "Vertical alignment of the info column in each section",
@@ -28,7 +28,7 @@ const meta: Meta<typeof ServicesSectionGrid> = {
   args: {
     tag: "div",
     useAlternateReverse: false,
-    summaryAlignment: "center",
+    alignment: "center",
     styleClassPassthrough: [],
   },
   parameters: {
@@ -41,14 +41,14 @@ const meta: Meta<typeof ServicesSectionGrid> = {
     docs: {
       description: {
         component:
-          "Renders a vertical stack of `ServicesSection` components (summary mode) from a `Service[]` array. Each section includes a summary-link and a CTA button. Alternate image/content column order is controlled via `useAlternateReverse`.",
+          "Renders a vertical stack of `ServiceSummary` components from a `Service[]` array. Each summary includes a summary-link slot. Alternate image/content column order is controlled via `useAlternateReverse`.",
       },
     },
   },
 };
 
 export default meta;
-type Story = StoryObj<typeof ServicesSectionGrid>;
+type Story = StoryObj<typeof ServiceSummaryGrid>;
 
 // ─── Fixtures ─────────────────────────────────────────────────────────────────
 
@@ -82,12 +82,12 @@ const sampleServices: Service[] = [
 
 export const Default: Story = {
   render: (args) => ({
-    components: { ServicesSectionGrid },
+    components: { ServiceSummaryGrid },
     setup() {
       return { args, sampleServices };
     },
     template: `
-      <ServicesSectionGrid v-bind="args" :services-data="sampleServices">
+      <ServiceSummaryGrid v-bind="args" :services-data="sampleServices">
         <template #summary-link="{ serviceData }">
           <a
             :href="'/services/' + serviceData.slug"
@@ -96,7 +96,7 @@ export const Default: Story = {
             More about {{ serviceData.title }} →
           </a>
         </template>
-      </ServicesSectionGrid>
+      </ServiceSummaryGrid>
     `,
   }),
   parameters: {
@@ -115,18 +115,18 @@ export const AlternateReverse: Story = {
     useAlternateReverse: true,
   },
   render: (args) => ({
-    components: { ServicesSectionGrid },
+    components: { ServiceSummaryGrid },
     setup() {
       return { args, sampleServices };
     },
     template: `
-      <ServicesSectionGrid v-bind="args" :services-data="sampleServices">
+      <ServiceSummaryGrid v-bind="args" :services-data="sampleServices">
         <template #summary-link="{ serviceData }">
           <a :href="'/services/' + serviceData.slug" style="display:inline-flex;margin-top:1.6rem;color:inherit;">
             More about {{ serviceData.title }} →
           </a>
         </template>
-      </ServicesSectionGrid>
+      </ServiceSummaryGrid>
     `,
   }),
   parameters: {
@@ -142,11 +142,11 @@ export const AlternateReverse: Story = {
 export const NoSlots: Story = {
   name: "No Slots (empty sections)",
   render: (args) => ({
-    components: { ServicesSectionGrid },
+    components: { ServiceSummaryGrid },
     setup() {
       return { args, sampleServices };
     },
-    template: `<ServicesSectionGrid v-bind="args" :services-data="sampleServices" />`,
+    template: `<ServiceSummaryGrid v-bind="args" :services-data="sampleServices" />`,
   }),
   parameters: {
     docs: {
@@ -161,18 +161,18 @@ export const NoSlots: Story = {
 export const SingleService: Story = {
   name: "Single Service",
   render: (args) => ({
-    components: { ServicesSectionGrid },
+    components: { ServiceSummaryGrid },
     setup() {
       return { args, sampleServices };
     },
     template: `
-      <ServicesSectionGrid v-bind="args" :services-data="[sampleServices[0]]">
+      <ServiceSummaryGrid v-bind="args" :services-data="[sampleServices[0]]">
         <template #summary-link="{ serviceData }">
           <a :href="'/services/' + serviceData.slug" style="display:inline-flex;margin-top:1.6rem;color:inherit;">
             More about {{ serviceData.title }} →
           </a>
         </template>
-      </ServicesSectionGrid>
+      </ServiceSummaryGrid>
     `,
   }),
   parameters: {
@@ -187,11 +187,11 @@ export const SingleService: Story = {
 export const EmptyData: Story = {
   name: "Empty Data",
   render: (args) => ({
-    components: { ServicesSectionGrid },
+    components: { ServiceSummaryGrid },
     setup() {
       return { args };
     },
-    template: `<ServicesSectionGrid v-bind="args" :services-data="[]" />`,
+    template: `<ServiceSummaryGrid v-bind="args" :services-data="[]" />`,
   }),
   parameters: {
     docs: {

package/app/components/03.organisms/services/services-grids/tests/{ServicesSectionGrid.spec.ts → ServiceSummaryGrid.spec.ts}

@@ -1,6 +1,6 @@
 import { describe, it, expect } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
-import ServicesSectionGrid from "../ServicesSectionGrid.vue";
+import ServiceSummaryGrid from "../ServiceSummaryGrid.vue";
 import type { Service } from "~/types/types.services";
 
 // ─── Fixtures ─────────────────────────────────────────────────────────────────
@@ -33,18 +33,18 @@ const mockServices: Service[] = [
 
 // ─── Tests ────────────────────────────────────────────────────────────────────
 
-describe("ServicesSectionGrid", () => {
+describe("ServiceSummaryGrid", () => {
   // ─── Mount ─────────────────────────────────────────────────────────────
 
   it("mounts without error", async () => {
-    const wrapper = await mountSuspended(ServicesSectionGrid, {
+    const wrapper = await mountSuspended(ServiceSummaryGrid, {
       props: { servicesData: mockServices },
     });
     expect(wrapper.vm).toBeTruthy();
   });
 
   it("renders correct HTML structure", async () => {
-    const wrapper = await mountSuspended(ServicesSectionGrid, {
+    const wrapper = await mountSuspended(ServiceSummaryGrid, {
       props: { servicesData: mockServices },
     });
     expect(wrapper.html()).toMatchSnapshot();
@@ -52,15 +52,15 @@ describe("ServicesSectionGrid", () => {
 
   // ─── Root element ───────────────────────────────────────────────────────
 
-  it("has services-grid class on root", async () => {
-    const wrapper = await mountSuspended(ServicesSectionGrid, {
+  it("has service-summary-grid class on root", async () => {
+    const wrapper = await mountSuspended(ServiceSummaryGrid, {
       props: { servicesData: mockServices },
     });
-    expect(wrapper.classes()).toContain("services-grid");
+    expect(wrapper.classes()).toContain("service-summary-grid");
   });
 
   it("renders as a div by default", async () => {
-    const wrapper = await mountSuspended(ServicesSectionGrid, {
+    const wrapper = await mountSuspended(ServiceSummaryGrid, {
       props: { servicesData: mockServices },
     });
     expect(wrapper.element.tagName).toBe("DIV");
@@ -68,7 +68,7 @@ describe("ServicesSectionGrid", () => {
 
   it("renders the tag prop as the root element", async () => {
     for (const tag of ["section", "main"] as const) {
-      const wrapper = await mountSuspended(ServicesSectionGrid, {
+      const wrapper = await mountSuspended(ServiceSummaryGrid, {
         props: { servicesData: mockServices, tag },
       });
       expect(wrapper.element.tagName).toBe(tag.toUpperCase());
@@ -78,51 +78,51 @@ describe("ServicesSectionGrid", () => {
   // ─── Children ───────────────────────────────────────────────────────────
 
   it("renders the correct number of service sections", async () => {
-    const wrapper = await mountSuspended(ServicesSectionGrid, {
+    const wrapper = await mountSuspended(ServiceSummaryGrid, {
       props: { servicesData: mockServices },
     });
-    expect(wrapper.findAll(".services-section")).toHaveLength(mockServices.length);
+    expect(wrapper.findAll(".service-summary")).toHaveLength(mockServices.length);
   });
 
   it("renders no sections when servicesData is empty", async () => {
-    const wrapper = await mountSuspended(ServicesSectionGrid, {
+    const wrapper = await mountSuspended(ServiceSummaryGrid, {
       props: { servicesData: [] },
     });
-    expect(wrapper.findAll(".services-section")).toHaveLength(0);
+    expect(wrapper.findAll(".service-summary")).toHaveLength(0);
   });
 
   it("renders a single section correctly", async () => {
-    const wrapper = await mountSuspended(ServicesSectionGrid, {
+    const wrapper = await mountSuspended(ServiceSummaryGrid, {
       props: { servicesData: [mockServices[0]!] },
     });
-    expect(wrapper.findAll(".services-section")).toHaveLength(1);
+    expect(wrapper.findAll(".service-summary")).toHaveLength(1);
   });
 
   // ─── useAlternateReverse ────────────────────────────────────────────────
 
   it("does not apply reverse to any section by default", async () => {
-    const wrapper = await mountSuspended(ServicesSectionGrid, {
+    const wrapper = await mountSuspended(ServiceSummaryGrid, {
       props: { servicesData: mockServices },
     });
-    wrapper.findAll(".services-section__grid").forEach((grid) => {
-      expect(grid.classes()).not.toContain("services-section__grid--reverse");
+    wrapper.findAll(".service-summary__grid").forEach((grid) => {
+      expect(grid.classes()).not.toContain("service-summary__grid--reverse");
     });
   });
 
   it("applies reverse to odd-indexed sections when useAlternateReverse is true", async () => {
-    const wrapper = await mountSuspended(ServicesSectionGrid, {
+    const wrapper = await mountSuspended(ServiceSummaryGrid, {
       props: { servicesData: mockServices, useAlternateReverse: true },
     });
-    const grids = wrapper.findAll(".services-section__grid");
-    expect(grids[0]?.classes()).not.toContain("services-section__grid--reverse"); // index 0 — even
-    expect(grids[1]?.classes()).toContain("services-section__grid--reverse"); // index 1 — odd
-    expect(grids[2]?.classes()).not.toContain("services-section__grid--reverse"); // index 2 — even
+    const grids = wrapper.findAll(".service-summary__grid");
+    expect(grids[0]?.classes()).not.toContain("service-summary__grid--reverse"); // index 0 — even
+    expect(grids[1]?.classes()).toContain("service-summary__grid--reverse"); // index 1 — odd
+    expect(grids[2]?.classes()).not.toContain("service-summary__grid--reverse"); // index 2 — even
   });
 
   // ─── Slots ─────────────────────────────────────────────────────────────
 
   it("renders summary-link slot content in each section", async () => {
-    const wrapper = await mountSuspended(ServicesSectionGrid, {
+    const wrapper = await mountSuspended(ServiceSummaryGrid, {
       props: { servicesData: mockServices },
       slots: {
         "summary-link": '<a class="test-link" href="/services/test">View service</a>',
@@ -132,7 +132,7 @@ describe("ServicesSectionGrid", () => {
   });
 
   it("renders nothing in summary-link when slot is not provided", async () => {
-    const wrapper = await mountSuspended(ServicesSectionGrid, {
+    const wrapper = await mountSuspended(ServiceSummaryGrid, {
       props: { servicesData: [mockServices[0]!] },
     });
     // isSummary=true, so summary-link slot is rendered — but empty since no content was provided
@@ -142,14 +142,14 @@ describe("ServicesSectionGrid", () => {
   // ─── styleClassPassthrough ──────────────────────────────────────────────
 
   it("applies a single styleClassPassthrough string", async () => {
-    const wrapper = await mountSuspended(ServicesSectionGrid, {
+    const wrapper = await mountSuspended(ServiceSummaryGrid, {
       props: { servicesData: mockServices, styleClassPassthrough: "custom-grid" },
     });
     expect(wrapper.classes()).toContain("custom-grid");
   });
 
   it("applies multiple styleClassPassthrough classes from an array", async () => {
-    const wrapper = await mountSuspended(ServicesSectionGrid, {
+    const wrapper = await mountSuspended(ServiceSummaryGrid, {
       props: { servicesData: mockServices, styleClassPassthrough: ["class-a", "class-b"] },
     });
     expect(wrapper.classes()).toContain("class-a");
@@ -157,7 +157,7 @@ describe("ServicesSectionGrid", () => {
   });
 
   it("updates classes when styleClassPassthrough prop changes", async () => {
-    const wrapper = await mountSuspended(ServicesSectionGrid, {
+    const wrapper = await mountSuspended(ServiceSummaryGrid, {
       props: { servicesData: mockServices, styleClassPassthrough: ["original"] },
     });
     expect(wrapper.classes()).toContain("original");

package/app/components/03.organisms/services/services-grids/tests/__snapshots__/ServiceSummaryGrid.spec.ts.snap

@@ -0,0 +1,45 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ServiceSummaryGrid > renders correct HTML structure 1`] = `
+"<div class="service-summary-grid">
+  <div class="service-summary">
+    <div class="service-summary__grid">
+      <div class="service-summary__image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-installation.jpg 1x, /_ipx/_/images/locs-installation.jpg 2x" alt="Locs Installation" loading="eager" fetchpriority="high" class="service-summary__image" src="/_ipx/_/images/locs-installation.jpg"></div>
+      <div class="service-summary__info-wrapper service-summary__info-wrapper--align-center">
+        <div class="eyebrow-text large">Subtitle for Locs Installation</div>
+        <h2 id="v-0-0-0" class="hero-text mb-20 title axis-horizontal">
+          <!--v-if--><span class="text-block-0 normal">Locs Installation</span>
+        </h2>
+        <div class="service-summary__pills"><span class="display-pill md neutral"><span class="pill-label">60 mins</span></span><span class="display-pill md neutral"><span class="pill-label">From £50</span></span></div>
+        <p class="page-body-normal">What this service is.</p>
+      </div>
+    </div>
+  </div>
+  <div class="service-summary">
+    <div class="service-summary__grid">
+      <div class="service-summary__image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-retwist.jpg 1x, /_ipx/_/images/locs-retwist.jpg 2x" alt="Locs Retwist" loading="eager" fetchpriority="auto" class="service-summary__image" src="/_ipx/_/images/locs-retwist.jpg"></div>
+      <div class="service-summary__info-wrapper service-summary__info-wrapper--align-center">
+        <div class="eyebrow-text large">Subtitle for Locs Retwist</div>
+        <h2 id="v-0-0-1" class="hero-text mb-20 title axis-horizontal">
+          <!--v-if--><span class="text-block-0 normal">Locs Retwist</span>
+        </h2>
+        <div class="service-summary__pills"><span class="display-pill md neutral"><span class="pill-label">60 mins</span></span><span class="display-pill md neutral"><span class="pill-label">From £50</span></span></div>
+        <p class="page-body-normal">What this service is.</p>
+      </div>
+    </div>
+  </div>
+  <div class="service-summary">
+    <div class="service-summary__grid">
+      <div class="service-summary__image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/colour-treatment.jpg 1x, /_ipx/_/images/colour-treatment.jpg 2x" alt="Colour Treatment" loading="lazy" fetchpriority="auto" class="service-summary__image" src="/_ipx/_/images/colour-treatment.jpg"></div>
+      <div class="service-summary__info-wrapper service-summary__info-wrapper--align-center">
+        <div class="eyebrow-text large">Subtitle for Colour Treatment</div>
+        <h2 id="v-0-0-2" class="hero-text mb-20 title axis-horizontal">
+          <!--v-if--><span class="text-block-0 normal">Colour Treatment</span>
+        </h2>
+        <div class="service-summary__pills"><span class="display-pill md neutral"><span class="pill-label">60 mins</span></span><span class="display-pill md neutral"><span class="pill-label">From £50</span></span></div>
+        <p class="page-body-normal">What this service is.</p>
+      </div>
+    </div>
+  </div>
+</div>"
+`;

package/app/components/05.forms/input-button/CONSUMER-STYLING.md

@@ -0,0 +1,117 @@
+# InputButtonCore — Consumer Styling Guide
+
+## Public token API
+
+Every colour token below is `var(--input-button-{variant}-{property}, {default})` — set the
+`--input-button-*` name to override just this component's variant; leave it unset and it inherits
+the shared `--theme-*` slot every other themed component (inputs, alerts, ...) also falls back to.
+See `theming-component-token-pattern.md` for why this two-tier shape exists.
+
+**Resting state is flat by design**: `border` defaults to the variant's own surface colour, so
+there's no visible edge until you hover, focus, or override it. **`outline` defaults to fully
+transparent** in both resting and hover state — outline is reserved for the focus-visible ring,
+not used to reinforce the flat look. **Hover always darkens the resting surface** via `color-mix()`
+rather than jumping to a different `--theme-*` step — it's reliably darker in both light and dark
+mode. **`:focus-visible` is a separate token set**, not grouped with hover, since it's the one
+state that gets a real, independently-themeable indicator (its `outline-width`/`-offset` come from
+`--button-focus-ring-width`/`-offset`, not from here — see `theming-form-geometry-tokens.md`).
+
+Geometry and typography (`--button-*`) are separate, already-global tokens with real defaults —
+see `theming-form-geometry-tokens.md`. Not duplicated here. One geometry token worth calling out:
+`--button-min-height` defaults to `var(--input-min-height)`, so a button lines up height-wise with
+a text input/select/number field placed next to it (e.g. an inline "email + submit" pattern — see
+the `InlineWithTextInput` story). `box-sizing: content-box` means it's a floor, not a fixed height.
+
+### Primary
+
+| Token | Falls back to | Controls |
+|---|---|---|
+| `--input-button-primary-surface` | `var(--theme-surface)` | Background (resting) |
+| `--input-button-primary-text` | `var(--theme-on-surface)` | Text colour (all states) |
+| `--input-button-primary-border` | the resolved surface above | Border colour (resting) — flat by default |
+| `--input-button-primary-ring` | `transparent` | Outline colour (resting) |
+| `--input-button-primary-surface-hover` | `color-mix(in oklab, surface 85%, black)` | Background on hover |
+| `--input-button-primary-border-hover` | the resolved hover surface above | Border colour on hover |
+| `--input-button-primary-ring-hover` | `transparent` | Outline colour on hover |
+| `--input-button-primary-border-focus` | `var(--theme-border-focus)` | Border colour on `:focus-visible` |
+| `--input-button-primary-ring-focus` | `var(--theme-ring)` | Outline colour on `:focus-visible` |
+
+### Secondary
+
+Same shape, falls back to the inverted-surface slots instead:
+
+| Token | Falls back to |
+|---|---|
+| `--input-button-secondary-surface` | `var(--theme-surface-inverted)` |
+| `--input-button-secondary-text` | `var(--theme-text-inverted)` |
+| `--input-button-secondary-border` | the resolved surface above (flat) |
+| `--input-button-secondary-ring` / `-ring-hover` | `transparent` |
+| `--input-button-secondary-surface-hover` | `color-mix(in oklab, surface 85%, black)` |
+| `--input-button-secondary-border-hover` | the resolved hover surface above |
+| `--input-button-secondary-border-focus` | `var(--theme-border-focus)` |
+| `--input-button-secondary-ring-focus` | `var(--theme-ring)` |
+
+### Tertiary
+
+Same shape again; resting surface is transparent by default in dark mode (see note below):
+
+| Token | Falls back to |
+|---|---|
+| `--input-button-tertiary-surface` | `light-dark(var(--slate-01), transparent)` |
+| `--input-button-tertiary-text` | `var(--theme-text)` |
+| `--input-button-tertiary-border` | the resolved surface above (flat) |
+| `--input-button-tertiary-ring` / `-ring-hover` | `transparent` |
+| `--input-button-tertiary-surface-hover` | `color-mix(in oklab, surface 85%, black)` |
+| `--input-button-tertiary-border-hover` | the resolved hover surface above |
+| `--input-button-tertiary-border-focus` | `var(--theme-border-focus)` |
+| `--input-button-tertiary-ring-focus` | `var(--theme-ring)` |
+
+> `--input-button-tertiary-surface`'s dark-mode default is literal `transparent`. `color-mix()`
+> still produces a correct darker hover from that — mixing `transparent` with `black` lowers the
+> alpha channel rather than the lightness, so hover reads as a faint dark tint over whatever's
+> behind the button, not a flat fill swap.
+
+`.is-pending` always dims the *primary* surface regardless of variant — a pre-existing quirk, not
+something this token set changes.
+
+`InputCopy` and `PricingCard` fall back through `--input-button-primary-*` for their own copy/CTA
+buttons (see their own `CONSUMER-STYLING.md`) rather than duplicating this chain.
+
+---
+
+## Global theming — app-level CSS file
+
+Set tokens on `:where(html)` in the consuming app's own theming file (e.g.
+`assets/styles/setup/03.theming/_button.css`). These apply to every `InputButtonCore` instance:
+
+```css
+:where(html) {
+  --input-button-primary-surface: var(--rose-09);
+  --input-button-primary-text: var(--rose-00);
+  /* Hover/border/ring all derive from --input-button-primary-surface automatically via
+     color-mix() — no need to also set -hover/-border/-ring unless you want a different
+     relationship than "same colour, darker". */
+}
+```
+
+Only declare the tokens you want to change — everything else keeps inheriting the shared
+`--theme-*` slots (or, for hover, keeps darkening whatever surface you did set).
+
+---
+
+## Per-instance overrides
+
+```vue
+<InputButtonCore variant="primary" button-text="Book now" style="--input-button-primary-surface: var(--gold-06);" />
+```
+
+To make hover lighten instead of darken for one instance, override the hover token directly rather
+than fighting the `color-mix()` default:
+
+```vue
+<InputButtonCore
+  variant="primary"
+  button-text="Book now"
+  style="--input-button-primary-surface-hover: var(--gold-04);"
+/>
+```

package/app/components/05.forms/input-button/InputButtonCore.vue

@@ -106,6 +106,7 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
     justify-content: center;
     align-items: center;
     box-sizing: content-box;
+    min-height: var(--button-min-height);
     border-radius: var(--button-border-radius);
     font-family: var(--font-family);
     padding-inline: var(--button-padding-inline);
@@ -121,60 +122,105 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
     /*
     * Theming
+    * Every colour is a public --input-button-{variant}-{property} token, inline-fallback to
+    * the shared theme slot (see theming-component-token-pattern.md for why: overriding one
+    * variant here never touches the --theme-* slots other components read).
+    *
+    * Flat by default: border defaults to the variant's own surface colour (so the resting state
+    * shows no visible edge) and outline defaults to fully transparent — outline is reserved for
+    * the focus-visible ring, not used to reinforce the flat look. Hover darkens the surface via
+    * color-mix (always darker, regardless of which direction the underlying theme ramp runs in
+    * light vs dark mode — no more "hover looks lighter" surprises) and carries the border along
+    * with it, still flat; outline stays transparent through hover too.
+    * focus-visible is deliberately its own block, not grouped with :hover — it's the one state
+    * that gets a real, separately-themeable a11y indicator, and its outline-width/-offset (set
+    * below, in Shared States) give it a visible ring regardless of the border/outline being
+    * invisible everywhere else.
+    * --_surface is a private local (not a public token) — it exists purely so -hover/-border/-ring
+    * can color-mix() off the SAME resolved value a consumer's --input-button-{variant}-surface
+    * override produces, without every derived token repeating that fallback chain itself.
     **/
-    background-color: var(--theme-surface);
-    color: var(--theme-on-surface);
-    border: var(--button-border-width) solid var(--theme-border);
-    outline: var(--button-outline-width) solid var(--theme-ring);
+    &.primary {
+      --_surface: var(--input-button-primary-surface, var(--theme-surface));
+      --_surface-hover: var(--input-button-primary-surface-hover, color-mix(in oklab, var(--_surface) 85%, black));
 
-    &:hover,
-    &:focus-visible {
-      background-color: var(--theme-surface-hover);
-      /* --theme-on-surface, not --theme-text: --theme-surface-hover's light-mode branch is a
-         dark step (by design — this button stays a bold colour even in light mode), and
-         --theme-text's light-mode branch is dark too (it's meant for text on a light surface
-         elsewhere, e.g. AlertContentInner). Pairing them made hover text invisible in light
-         mode. --theme-on-surface is a fixed light value regardless of scheme, matching how
-         AlertContentInner's own dismiss-button hover and .secondary:hover below already do it. */
-      color: var(--theme-on-surface);
-      border-color: var(--theme-border-focus);
-      outline-color: var(--theme-ring);
+      background-color: var(--_surface);
+      color: var(--input-button-primary-text, var(--theme-on-surface));
+      border: var(--button-border-width) solid var(--input-button-primary-border, var(--_surface));
+      outline: var(--button-outline-width) solid var(--input-button-primary-ring, transparent);
+
+      &:hover {
+        background-color: var(--_surface-hover);
+        border-color: var(--input-button-primary-border-hover, var(--_surface-hover));
+        outline-color: var(--input-button-primary-ring-hover, transparent);
+      }
+
+      &:focus-visible {
+        border-color: var(--input-button-primary-border-focus, var(--theme-border-focus));
+        outline-color: var(--input-button-primary-ring-focus, var(--theme-ring));
+      }
     }
 
     &.is-pending {
-      background-color: color-mix(in oklab, var(--theme-surface) 50%, transparent);
+      /* Always the primary surface regardless of variant — pre-existing behaviour, not
+         something this migration changes. */
+      background-color: color-mix(
+        in oklab,
+        var(--input-button-primary-surface, var(--theme-surface)) 50%,
+        transparent
+      );
     }
 
     &.secondary {
-      background-color: var(--theme-surface-inverted);
-      border: var(--button-border-width) solid var(--theme-border);
-      color: var(--theme-text-inverted);
-      outline: var(--button-outline-width) solid var(--theme-ring);
+      --_surface: var(--input-button-secondary-surface, var(--theme-surface-inverted));
+      --_surface-hover: var(
+        --input-button-secondary-surface-hover,
+        color-mix(in oklab, var(--_surface) 85%, black)
+      );
+
+      background-color: var(--_surface);
+      color: var(--input-button-secondary-text, var(--theme-text-inverted));
+      border: var(--button-border-width) solid var(--input-button-secondary-border, var(--_surface));
+      outline: var(--button-outline-width) solid var(--input-button-secondary-ring, transparent);
+
+      &:hover {
+        background-color: var(--_surface-hover);
+        border-color: var(--input-button-secondary-border-hover, var(--_surface-hover));
+        outline-color: var(--input-button-secondary-ring-hover, transparent);
+      }
 
-      &:hover,
       &:focus-visible {
-        background-color: var(--theme-surface);
-        color: var(--theme-on-surface);
-        border-color: var(--theme-border-focus);
-        outline-color: var(--theme-surface);
+        border-color: var(--input-button-secondary-border-focus, var(--theme-border-focus));
+        outline-color: var(--input-button-secondary-ring-focus, var(--theme-ring));
       }
     }
 
     &.tertiary {
-      background-color: light-dark(var(--slate-01), transparent);
-      border: var(--button-border-width) solid var(--theme-border);
-      color: var(--theme-text);
+      /* --_surface can resolve to literal transparent (dark mode default) — color-mix() still
+         darkens correctly here: mixing transparent with black lowers the alpha channel rather
+         than the lightness, so it reads as a faint dark tint over whatever's behind the button
+         instead of a flat fill. Same formula, no special-casing needed. */
+      --_surface: var(--input-button-tertiary-surface, light-dark(var(--slate-01), transparent));
+      --_surface-hover: var(
+        --input-button-tertiary-surface-hover,
+        color-mix(in oklab, var(--_surface) 85%, black)
+      );
+
+      background-color: var(--_surface);
+      color: var(--input-button-tertiary-text, var(--theme-text));
+      border: var(--button-border-width) solid var(--input-button-tertiary-border, var(--_surface));
+      outline: var(--button-outline-width) solid var(--input-button-tertiary-ring, transparent);
       text-decoration: underline;
-      outline: var(--button-outline-width) solid var(--theme-border-focus);
 
-      &:hover,
+      &:hover {
+        background-color: var(--_surface-hover);
+        border-color: var(--input-button-tertiary-border-hover, var(--_surface-hover));
+        outline-color: var(--input-button-tertiary-ring-hover, transparent);
+      }
+
       &:focus-visible {
-        background-color: var(--theme-surface-hover);
-        /* Same fix as the base :hover above — background goes dark in light mode, so text
-           needs to switch off --theme-text (dark in light mode) to stay visible. */
-        color: var(--theme-on-surface);
-        border-color: var(--theme-border-focus);
-        outline-color: var(--theme-border-focus);
+        border-color: var(--input-button-tertiary-border-focus, var(--theme-border-focus));
+        outline-color: var(--input-button-tertiary-ring-focus, var(--theme-ring));
       }
     }