@quilltap/theme-storybook 1.0.60 → 1.0.62

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to `@quilltap/theme-storybook` will be documented in this file.
 
+## [1.0.62] - 2026-08-25
+
+### Added
+- `qt-text-on-primary`, `qt-text-on-success`, and `qt-text-on-destructive`: the rest of the on-a-filled-surface foreground family that `qt-text-on-accent` started, each mapping to the theme's matching `*Foreground` token. Plus the hand-written hover partners `hover:qt-text-on-accent/-primary/-success/-destructive`, for controls that sit quiet at rest and take a filled background on hover. Mirrors the app-side definitions.
+- `Surfaces` story: a "Foregrounds on filled surfaces" section previewing all four fills with their foregrounds, and a hover row for the hover partners. It also spells out the naming trap — the classes are `-on-<fill>`, never `-<fill>-foreground`, which is the Tailwind spelling and no `qt-` class at all.
+
 ## [1.0.44] - 2026-06-14
 
 ### Added

package/dist/{chunk-XSNC4J5T.mjs → chunk-TESCTXU3.mjs}

@@ -1043,6 +1043,11 @@ var note = {
 };
 var Surfaces = () => {
   return /* @__PURE__ */ jsxs9("div", { style: { padding: "1.5rem" }, children: [
+    /* @__PURE__ */ jsx9("style", { children: `
+        .surfaces-demo-fill-primary:hover { background-color: var(--color-primary); }
+        .surfaces-demo-fill-success:hover { background-color: var(--color-success); }
+        .surfaces-demo-fill-destructive:hover { background-color: var(--color-destructive); }
+      ` }),
     /* @__PURE__ */ jsx9("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "0.5rem" }, children: "Surfaces" }),
     /* @__PURE__ */ jsxs9("p", { style: { ...note, maxWidth: "44rem" }, children: [
       "How accent-coloured surfaces stay legible no matter how bold a theme makes its ",
@@ -1079,6 +1084,53 @@ var Surfaces = () => {
         /* @__PURE__ */ jsx9("kbd", { className: "qt-bg-accent qt-text-on-accent", style: { padding: "0.125rem 0.375rem", borderRadius: "0.25rem", fontSize: "0.75rem" }, children: "\u21B5" })
       ] })
     ] }),
+    /* @__PURE__ */ jsxs9("section", { style: { marginBottom: "2rem" }, children: [
+      /* @__PURE__ */ jsxs9("h3", { style: sectionHeading2, children: [
+        "Foregrounds on filled surfaces \u2014 the ",
+        /* @__PURE__ */ jsx9("code", { children: "qt-text-on-*" }),
+        " family"
+      ] }),
+      /* @__PURE__ */ jsxs9("p", { style: note, children: [
+        "The same contract, extended to every filled surface the app paints:",
+        " ",
+        /* @__PURE__ */ jsx9("code", { children: "qt-text-on-accent" }),
+        ", ",
+        /* @__PURE__ */ jsx9("code", { children: "qt-text-on-primary" }),
+        ",",
+        " ",
+        /* @__PURE__ */ jsx9("code", { children: "qt-text-on-success" }),
+        ", and ",
+        /* @__PURE__ */ jsx9("code", { children: "qt-text-on-destructive" }),
+        ", each mapping to the theme's matching ",
+        /* @__PURE__ */ jsx9("code", { children: "*Foreground" }),
+        " token. Note the naming \u2014 ",
+        /* @__PURE__ */ jsxs9("code", { children: [
+          "-on-",
+          /* @__PURE__ */ jsx9("em", { children: "fill" })
+        ] }),
+        ", never ",
+        /* @__PURE__ */ jsxs9("code", { children: [
+          "-",
+          /* @__PURE__ */ jsx9("em", { children: "fill" }),
+          "-foreground"
+        ] }),
+        ", which is the Tailwind spelling and is not a ",
+        /* @__PURE__ */ jsx9("code", { children: "qt-" }),
+        " class at all."
+      ] }),
+      /* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.75rem", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsx9("span", { className: "qt-bg-accent qt-text-on-accent", style: { padding: "0.25rem 0.625rem", borderRadius: "0.375rem", fontSize: "0.8125rem", fontWeight: 600 }, children: "on accent" }),
+        /* @__PURE__ */ jsx9("span", { className: "qt-bg-primary qt-text-on-primary", style: { padding: "0.25rem 0.625rem", borderRadius: "0.375rem", fontSize: "0.8125rem", fontWeight: 600 }, children: "on primary" }),
+        /* @__PURE__ */ jsx9("span", { className: "qt-bg-success qt-text-on-success", style: { padding: "0.25rem 0.625rem", borderRadius: "0.375rem", fontSize: "0.8125rem", fontWeight: 600 }, children: "on success" }),
+        /* @__PURE__ */ jsx9("span", { className: "qt-bg-destructive qt-text-on-destructive", style: { padding: "0.25rem 0.625rem", borderRadius: "0.375rem", fontSize: "0.8125rem", fontWeight: 600 }, children: "on destructive" })
+      ] }),
+      /* @__PURE__ */ jsx9("p", { style: { ...note, marginTop: "1rem" }, children: "Each has a hover partner for controls that stay quiet at rest and take the fill on hover. Tailwind generates no variants for these classes, so the hover forms are written out by hand \u2014 reach for one that was never written and it is simply inert. Hover the buttons below." }),
+      /* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.75rem", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsx9("button", { className: "qt-bg-card qt-text-secondary surfaces-demo-fill-primary hover:qt-text-on-primary", style: { padding: "0.25rem 0.625rem", borderRadius: "0.375rem", fontSize: "0.8125rem", fontWeight: 600, border: "1px solid var(--color-border)", cursor: "pointer" }, children: "hover:qt-text-on-primary" }),
+        /* @__PURE__ */ jsx9("button", { className: "qt-bg-card qt-text-secondary surfaces-demo-fill-success hover:qt-text-on-success", style: { padding: "0.25rem 0.625rem", borderRadius: "0.375rem", fontSize: "0.8125rem", fontWeight: 600, border: "1px solid var(--color-border)", cursor: "pointer" }, children: "hover:qt-text-on-success" }),
+        /* @__PURE__ */ jsx9("button", { className: "qt-bg-card qt-text-secondary surfaces-demo-fill-destructive hover:qt-text-on-destructive", style: { padding: "0.25rem 0.625rem", borderRadius: "0.375rem", fontSize: "0.8125rem", fontWeight: 600, border: "1px solid var(--color-border)", cursor: "pointer" }, children: "hover:qt-text-on-destructive" })
+      ] })
+    ] }),
     /* @__PURE__ */ jsxs9("section", { style: { marginBottom: "2rem" }, children: [
       /* @__PURE__ */ jsxs9("h3", { style: sectionHeading2, children: [
         "Hover-highlight rows \u2014 ",

package/dist/index.css

@@ -286,6 +286,10 @@ body {
   --qt-status-danger-bg: color-mix(in srgb, var(--color-destructive) 85%, transparent);
   --qt-status-danger-fg: var(--color-destructive-foreground);
   --qt-status-danger-border: var(--color-destructive);
+  --qt-badge-primary-bg: var(--color-primary);
+  --qt-badge-primary-fg: var(--color-primary-foreground);
+  --qt-badge-secondary-bg: var(--color-secondary);
+  --qt-badge-secondary-fg: var(--color-secondary-foreground);
   --qt-alert-success-bg: hsl(142 76% 36% / 0.1);
   --qt-alert-success-fg: hsl(142 76% 30%);
   --qt-alert-success-border: hsl(142 76% 36% / 0.3);
@@ -888,6 +892,45 @@ body {
   color: var(--color-foreground);
   border: 1px solid var(--color-border);
 }
+.qt-badge-provider-openai,
+.qt-badge-provider-ollama,
+.qt-badge-provider-openrouter,
+.qt-badge-provider-nanogpt,
+.qt-badge-provider-builtin {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: var(--qt-badge-padding-y) var(--qt-badge-padding-x);
+  border-radius: var(--qt-badge-radius);
+  font-size: var(--qt-badge-font-size);
+  font-weight: var(--qt-badge-font-weight);
+}
+.qt-badge-provider-openai {
+  background: var(--qt-status-success-bg);
+  color: var(--qt-status-success-fg);
+  border: 1px solid var(--qt-status-success-border);
+}
+.qt-badge-provider-ollama {
+  background: var(--qt-badge-secondary-bg);
+  color: var(--qt-badge-secondary-fg);
+  border: 1px solid var(--qt-badge-secondary-border);
+}
+.qt-badge-provider-openrouter {
+  background: var(--qt-status-warning-bg);
+  color: var(--qt-status-warning-fg);
+  border: 1px solid var(--qt-status-warning-border);
+}
+.qt-badge-provider-nanogpt {
+  background: var(--qt-badge-primary-bg);
+  color: var(--qt-badge-primary-fg);
+  border: 1px solid var(--qt-badge-primary-border);
+}
+.qt-badge-provider-builtin {
+  background: var(--qt-status-info-bg);
+  color: var(--qt-status-info-fg);
+  border: 1px solid var(--qt-status-info-border);
+}
 .qt-badge-wardrobe-top,
 .qt-badge-wardrobe-bottom,
 .qt-badge-wardrobe-footwear,
@@ -1905,6 +1948,15 @@ body {
 .qt-text-on-accent {
   color: var(--color-accent-foreground);
 }
+.qt-text-on-primary {
+  color: var(--color-primary-foreground);
+}
+.qt-text-on-success {
+  color: var(--color-success-foreground);
+}
+.qt-text-on-destructive {
+  color: var(--color-destructive-foreground);
+}
 .qt-hover-accent {
   transition: background-color 0.15s ease, color 0.15s ease;
 }
@@ -2035,6 +2087,18 @@ body {
 .hover\:qt-bg-primary\/10:hover {
   background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
 }
+.hover\:qt-text-on-accent:hover {
+  color: var(--color-accent-foreground);
+}
+.hover\:qt-text-on-primary:hover {
+  color: var(--color-primary-foreground);
+}
+.hover\:qt-text-on-success:hover {
+  color: var(--color-success-foreground);
+}
+.hover\:qt-text-on-destructive:hover {
+  color: var(--color-destructive-foreground);
+}
 .qt-bg-overlay {
   background-color: var(--qt-overlay-bg, rgb(0 0 0 / 0.85));
 }

package/dist/index.js

@@ -1153,6 +1153,11 @@ var note = {
 };
 var Surfaces = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { padding: "1.5rem" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("style", { children: `
+        .surfaces-demo-fill-primary:hover { background-color: var(--color-primary); }
+        .surfaces-demo-fill-success:hover { background-color: var(--color-success); }
+        .surfaces-demo-fill-destructive:hover { background-color: var(--color-destructive); }
+      ` }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "0.5rem" }, children: "Surfaces" }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { style: { ...note, maxWidth: "44rem" }, children: [
       "How accent-coloured surfaces stay legible no matter how bold a theme makes its ",
@@ -1189,6 +1194,53 @@ var Surfaces = () => {
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("kbd", { className: "qt-bg-accent qt-text-on-accent", style: { padding: "0.125rem 0.375rem", borderRadius: "0.25rem", fontSize: "0.75rem" }, children: "\u21B5" })
       ] })
     ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("h3", { style: sectionHeading2, children: [
+        "Foregrounds on filled surfaces \u2014 the ",
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("code", { children: "qt-text-on-*" }),
+        " family"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { style: note, children: [
+        "The same contract, extended to every filled surface the app paints:",
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("code", { children: "qt-text-on-accent" }),
+        ", ",
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("code", { children: "qt-text-on-primary" }),
+        ",",
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("code", { children: "qt-text-on-success" }),
+        ", and ",
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("code", { children: "qt-text-on-destructive" }),
+        ", each mapping to the theme's matching ",
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("code", { children: "*Foreground" }),
+        " token. Note the naming \u2014 ",
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("code", { children: [
+          "-on-",
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("em", { children: "fill" })
+        ] }),
+        ", never ",
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("code", { children: [
+          "-",
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("em", { children: "fill" }),
+          "-foreground"
+        ] }),
+        ", which is the Tailwind spelling and is not a ",
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("code", { children: "qt-" }),
+        " class at all."
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.75rem", alignItems: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "qt-bg-accent qt-text-on-accent", style: { padding: "0.25rem 0.625rem", borderRadius: "0.375rem", fontSize: "0.8125rem", fontWeight: 600 }, children: "on accent" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "qt-bg-primary qt-text-on-primary", style: { padding: "0.25rem 0.625rem", borderRadius: "0.375rem", fontSize: "0.8125rem", fontWeight: 600 }, children: "on primary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "qt-bg-success qt-text-on-success", style: { padding: "0.25rem 0.625rem", borderRadius: "0.375rem", fontSize: "0.8125rem", fontWeight: 600 }, children: "on success" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "qt-bg-destructive qt-text-on-destructive", style: { padding: "0.25rem 0.625rem", borderRadius: "0.375rem", fontSize: "0.8125rem", fontWeight: 600 }, children: "on destructive" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { style: { ...note, marginTop: "1rem" }, children: "Each has a hover partner for controls that stay quiet at rest and take the fill on hover. Tailwind generates no variants for these classes, so the hover forms are written out by hand \u2014 reach for one that was never written and it is simply inert. Hover the buttons below." }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.75rem", alignItems: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "qt-bg-card qt-text-secondary surfaces-demo-fill-primary hover:qt-text-on-primary", style: { padding: "0.25rem 0.625rem", borderRadius: "0.375rem", fontSize: "0.8125rem", fontWeight: 600, border: "1px solid var(--color-border)", cursor: "pointer" }, children: "hover:qt-text-on-primary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "qt-bg-card qt-text-secondary surfaces-demo-fill-success hover:qt-text-on-success", style: { padding: "0.25rem 0.625rem", borderRadius: "0.375rem", fontSize: "0.8125rem", fontWeight: 600, border: "1px solid var(--color-border)", cursor: "pointer" }, children: "hover:qt-text-on-success" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "qt-bg-card qt-text-secondary surfaces-demo-fill-destructive hover:qt-text-on-destructive", style: { padding: "0.25rem 0.625rem", borderRadius: "0.375rem", fontSize: "0.8125rem", fontWeight: 600, border: "1px solid var(--color-border)", cursor: "pointer" }, children: "hover:qt-text-on-destructive" })
+      ] })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("h3", { style: sectionHeading2, children: [
         "Hover-highlight rows \u2014 ",

package/dist/index.mjs

@@ -21,7 +21,7 @@ import {
   ThemeComparison,
   Typography,
   Workspace
-} from "./chunk-XSNC4J5T.mjs";
+} from "./chunk-TESCTXU3.mjs";
 import "./chunk-WUKYLWAZ.mjs";
 
 // src/preview.tsx

package/dist/stories/index.js

@@ -1090,6 +1090,11 @@ var note = {
 };
 var Surfaces = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { padding: "1.5rem" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("style", { children: `
+        .surfaces-demo-fill-primary:hover { background-color: var(--color-primary); }
+        .surfaces-demo-fill-success:hover { background-color: var(--color-success); }
+        .surfaces-demo-fill-destructive:hover { background-color: var(--color-destructive); }
+      ` }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "0.5rem" }, children: "Surfaces" }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { style: { ...note, maxWidth: "44rem" }, children: [
       "How accent-coloured surfaces stay legible no matter how bold a theme makes its ",
@@ -1126,6 +1131,53 @@ var Surfaces = () => {
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("kbd", { className: "qt-bg-accent qt-text-on-accent", style: { padding: "0.125rem 0.375rem", borderRadius: "0.25rem", fontSize: "0.75rem" }, children: "\u21B5" })
       ] })
     ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("h3", { style: sectionHeading2, children: [
+        "Foregrounds on filled surfaces \u2014 the ",
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("code", { children: "qt-text-on-*" }),
+        " family"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { style: note, children: [
+        "The same contract, extended to every filled surface the app paints:",
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("code", { children: "qt-text-on-accent" }),
+        ", ",
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("code", { children: "qt-text-on-primary" }),
+        ",",
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("code", { children: "qt-text-on-success" }),
+        ", and ",
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("code", { children: "qt-text-on-destructive" }),
+        ", each mapping to the theme's matching ",
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("code", { children: "*Foreground" }),
+        " token. Note the naming \u2014 ",
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("code", { children: [
+          "-on-",
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("em", { children: "fill" })
+        ] }),
+        ", never ",
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("code", { children: [
+          "-",
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("em", { children: "fill" }),
+          "-foreground"
+        ] }),
+        ", which is the Tailwind spelling and is not a ",
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("code", { children: "qt-" }),
+        " class at all."
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.75rem", alignItems: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "qt-bg-accent qt-text-on-accent", style: { padding: "0.25rem 0.625rem", borderRadius: "0.375rem", fontSize: "0.8125rem", fontWeight: 600 }, children: "on accent" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "qt-bg-primary qt-text-on-primary", style: { padding: "0.25rem 0.625rem", borderRadius: "0.375rem", fontSize: "0.8125rem", fontWeight: 600 }, children: "on primary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "qt-bg-success qt-text-on-success", style: { padding: "0.25rem 0.625rem", borderRadius: "0.375rem", fontSize: "0.8125rem", fontWeight: 600 }, children: "on success" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "qt-bg-destructive qt-text-on-destructive", style: { padding: "0.25rem 0.625rem", borderRadius: "0.375rem", fontSize: "0.8125rem", fontWeight: 600 }, children: "on destructive" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { style: { ...note, marginTop: "1rem" }, children: "Each has a hover partner for controls that stay quiet at rest and take the fill on hover. Tailwind generates no variants for these classes, so the hover forms are written out by hand \u2014 reach for one that was never written and it is simply inert. Hover the buttons below." }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.75rem", alignItems: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { className: "qt-bg-card qt-text-secondary surfaces-demo-fill-primary hover:qt-text-on-primary", style: { padding: "0.25rem 0.625rem", borderRadius: "0.375rem", fontSize: "0.8125rem", fontWeight: 600, border: "1px solid var(--color-border)", cursor: "pointer" }, children: "hover:qt-text-on-primary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { className: "qt-bg-card qt-text-secondary surfaces-demo-fill-success hover:qt-text-on-success", style: { padding: "0.25rem 0.625rem", borderRadius: "0.375rem", fontSize: "0.8125rem", fontWeight: 600, border: "1px solid var(--color-border)", cursor: "pointer" }, children: "hover:qt-text-on-success" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { className: "qt-bg-card qt-text-secondary surfaces-demo-fill-destructive hover:qt-text-on-destructive", style: { padding: "0.25rem 0.625rem", borderRadius: "0.375rem", fontSize: "0.8125rem", fontWeight: 600, border: "1px solid var(--color-border)", cursor: "pointer" }, children: "hover:qt-text-on-destructive" })
+      ] })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("h3", { style: sectionHeading2, children: [
         "Hover-highlight rows \u2014 ",

package/dist/stories/index.mjs

@@ -21,7 +21,7 @@ import {
   ThemeComparison,
   Typography,
   Workspace
-} from "../chunk-XSNC4J5T.mjs";
+} from "../chunk-TESCTXU3.mjs";
 import "../chunk-WUKYLWAZ.mjs";
 export {
   Avatars,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quilltap/theme-storybook",
-  "version": "1.0.60",
+  "version": "1.0.62",
   "description": "Storybook preset and stories for developing Quilltap theme plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -65,7 +65,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/foundry-9/quilltap-server.git",
+    "url": "git+https://github.com/foundry-9/quilltap-server.git",
     "directory": "packages/theme-storybook"
   },
   "homepage": "https://github.com/foundry-9/quilltap-server/tree/main/packages/theme-storybook#readme",

package/src/css/qt-components.css

@@ -160,6 +160,12 @@
   --qt-status-danger-fg: var(--color-destructive-foreground);
   --qt-status-danger-border: var(--color-destructive);
 
+  /* Badge palette tokens - referenced by the provider badges */
+  --qt-badge-primary-bg: var(--color-primary);
+  --qt-badge-primary-fg: var(--color-primary-foreground);
+  --qt-badge-secondary-bg: var(--color-secondary);
+  --qt-badge-secondary-fg: var(--color-secondary-foreground);
+
   /* Alert tokens - semi-transparent backgrounds with readable text */
   --qt-alert-success-bg: hsl(142 76% 36% / 0.1);
   --qt-alert-success-fg: hsl(142 76% 30%);
@@ -919,6 +925,80 @@
   border: 1px solid var(--color-border);
 }
 
+/* ==========================================================================
+   PROVIDER BADGES
+   ========================================================================== */
+
+/**
+ * Shared geometry for the provider badges (embedding-profile provider chips).
+ * These do NOT build on .qt-badge in the app — they carry their own box, so
+ * the rule below is self-contained (and, mirroring the app, sets no
+ * line-height).
+ */
+.qt-badge-provider-openai,
+.qt-badge-provider-ollama,
+.qt-badge-provider-openrouter,
+.qt-badge-provider-nanogpt,
+.qt-badge-provider-builtin {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: var(--qt-badge-padding-y) var(--qt-badge-padding-x);
+  border-radius: var(--qt-badge-radius);
+  font-size: var(--qt-badge-font-size);
+  font-weight: var(--qt-badge-font-weight);
+}
+
+/**
+ * OpenAI provider badge (green/success semantic)
+ */
+.qt-badge-provider-openai {
+  background: var(--qt-status-success-bg);
+  color: var(--qt-status-success-fg);
+  border: 1px solid var(--qt-status-success-border);
+}
+
+/**
+ * Ollama provider badge (secondary/muted)
+ * Mirrors the app, quirk included: --qt-badge-secondary-border has no default
+ * definition, so the border only renders in themes that define it.
+ */
+.qt-badge-provider-ollama {
+  background: var(--qt-badge-secondary-bg);
+  color: var(--qt-badge-secondary-fg);
+  border: 1px solid var(--qt-badge-secondary-border);
+}
+
+/**
+ * OpenRouter provider badge (warning/orange semantic)
+ */
+.qt-badge-provider-openrouter {
+  background: var(--qt-status-warning-bg);
+  color: var(--qt-status-warning-fg);
+  border: 1px solid var(--qt-status-warning-border);
+}
+
+/**
+ * NanoGPT provider badge (primary/accent semantic)
+ * Same border quirk as the ollama badge: --qt-badge-primary-border has no
+ * default definition.
+ */
+.qt-badge-provider-nanogpt {
+  background: var(--qt-badge-primary-bg);
+  color: var(--qt-badge-primary-fg);
+  border: 1px solid var(--qt-badge-primary-border);
+}
+
+/**
+ * Built-in provider badge (info/blue semantic)
+ */
+.qt-badge-provider-builtin {
+  background: var(--qt-status-info-bg);
+  color: var(--qt-status-info-fg);
+  border: 1px solid var(--qt-status-info-border);
+}
+
 /* ==========================================================================
    WARDROBE SLOT BADGES
    ========================================================================== */
@@ -2274,10 +2354,32 @@
   background-color: var(--color-muted-foreground);
 }
 
+/* Foregrounds intended for use ON a filled surface — the paired counterparts of
+   the accent/primary/success/destructive fills. Each maps to the token a theme
+   defines for text sitting on that fill, so a badge or a solid button keeps its
+   contrast on every theme instead of inheriting whatever colour the surrounding
+   page happens to be using.
+
+     <span class="qt-bg-accent qt-text-on-accent">…</span>
+     <button class="qt-bg-destructive qt-text-on-destructive">…</button>
+
+   Mind the naming: these are `-on-<fill>`, never `-<fill>-foreground`. */
 .qt-text-on-accent {
   color: var(--color-accent-foreground);
 }
 
+.qt-text-on-primary {
+  color: var(--color-primary-foreground);
+}
+
+.qt-text-on-success {
+  color: var(--color-success-foreground);
+}
+
+.qt-text-on-destructive {
+  color: var(--color-destructive-foreground);
+}
+
 /* Hoverable accent surface — list rows, menu items, and option cards that
    should highlight on hover. On hover it paints the accent background AND
    forces the accent foreground onto the row and every descendant, so the whole
@@ -2469,6 +2571,26 @@
   background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
 }
 
+/* Hover foregrounds for filled surfaces — the hover partners of the
+   qt-text-on-* family, for controls that sit quiet at rest and take a filled
+   background on hover (`qt-text-secondary hover:qt-bg-success
+   hover:qt-text-on-success`). */
+.hover\:qt-text-on-accent:hover {
+  color: var(--color-accent-foreground);
+}
+
+.hover\:qt-text-on-primary:hover {
+  color: var(--color-primary-foreground);
+}
+
+.hover\:qt-text-on-success:hover {
+  color: var(--color-success-foreground);
+}
+
+.hover\:qt-text-on-destructive:hover {
+  color: var(--color-destructive-foreground);
+}
+
 /* ==========================================================================
    OVERLAY UTILITIES
    For image modals, lightboxes, and overlay UI elements.

package/src/stories/components/Surfaces.tsx

@@ -27,6 +27,14 @@ const note: React.CSSProperties = {
 export const Surfaces: React.FC = () => {
   return (
     <div style={{ padding: '1.5rem' }}>
+      {/* Story-local: the app pairs the hover foregrounds with Tailwind's
+          hover:bg-* fills, which don't exist here. Demo fills only — these are
+          not qt-* utilities and must not be copied into an app or a theme. */}
+      <style>{`
+        .surfaces-demo-fill-primary:hover { background-color: var(--color-primary); }
+        .surfaces-demo-fill-success:hover { background-color: var(--color-success); }
+        .surfaces-demo-fill-destructive:hover { background-color: var(--color-destructive); }
+      `}</style>
       <h2 style={{ fontSize: '1.5rem', fontWeight: 700, marginBottom: '0.5rem' }}>Surfaces</h2>
       <p style={{ ...note, maxWidth: '44rem' }}>
         How accent-coloured surfaces stay legible no matter how bold a theme makes
@@ -57,6 +65,50 @@ export const Surfaces: React.FC = () => {
         </div>
       </section>
 
+      {/* Foregrounds on filled surfaces */}
+      <section style={{ marginBottom: '2rem' }}>
+        <h3 style={sectionHeading}>Foregrounds on filled surfaces — the <code>qt-text-on-*</code> family</h3>
+        <p style={note}>
+          The same contract, extended to every filled surface the app paints:{' '}
+          <code>qt-text-on-accent</code>, <code>qt-text-on-primary</code>,{' '}
+          <code>qt-text-on-success</code>, and <code>qt-text-on-destructive</code>, each
+          mapping to the theme&apos;s matching <code>*Foreground</code> token. Note the
+          naming — <code>-on-<em>fill</em></code>, never <code>-<em>fill</em>-foreground</code>,
+          which is the Tailwind spelling and is not a <code>qt-</code> class at all.
+        </p>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem', alignItems: 'center' }}>
+          <span className="qt-bg-accent qt-text-on-accent" style={{ padding: '0.25rem 0.625rem', borderRadius: '0.375rem', fontSize: '0.8125rem', fontWeight: 600 }}>
+            on accent
+          </span>
+          <span className="qt-bg-primary qt-text-on-primary" style={{ padding: '0.25rem 0.625rem', borderRadius: '0.375rem', fontSize: '0.8125rem', fontWeight: 600 }}>
+            on primary
+          </span>
+          <span className="qt-bg-success qt-text-on-success" style={{ padding: '0.25rem 0.625rem', borderRadius: '0.375rem', fontSize: '0.8125rem', fontWeight: 600 }}>
+            on success
+          </span>
+          <span className="qt-bg-destructive qt-text-on-destructive" style={{ padding: '0.25rem 0.625rem', borderRadius: '0.375rem', fontSize: '0.8125rem', fontWeight: 600 }}>
+            on destructive
+          </span>
+        </div>
+        <p style={{ ...note, marginTop: '1rem' }}>
+          Each has a hover partner for controls that stay quiet at rest and take the fill
+          on hover. Tailwind generates no variants for these classes, so the hover forms
+          are written out by hand — reach for one that was never written and it is simply
+          inert. Hover the buttons below.
+        </p>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem', alignItems: 'center' }}>
+          <button className="qt-bg-card qt-text-secondary surfaces-demo-fill-primary hover:qt-text-on-primary" style={{ padding: '0.25rem 0.625rem', borderRadius: '0.375rem', fontSize: '0.8125rem', fontWeight: 600, border: '1px solid var(--color-border)', cursor: 'pointer' }}>
+            hover:qt-text-on-primary
+          </button>
+          <button className="qt-bg-card qt-text-secondary surfaces-demo-fill-success hover:qt-text-on-success" style={{ padding: '0.25rem 0.625rem', borderRadius: '0.375rem', fontSize: '0.8125rem', fontWeight: 600, border: '1px solid var(--color-border)', cursor: 'pointer' }}>
+            hover:qt-text-on-success
+          </button>
+          <button className="qt-bg-card qt-text-secondary surfaces-demo-fill-destructive hover:qt-text-on-destructive" style={{ padding: '0.25rem 0.625rem', borderRadius: '0.375rem', fontSize: '0.8125rem', fontWeight: 600, border: '1px solid var(--color-border)', cursor: 'pointer' }}>
+            hover:qt-text-on-destructive
+          </button>
+        </div>
+      </section>
+
       {/* Hover-highlight rows */}
       <section style={{ marginBottom: '2rem' }}>
         <h3 style={sectionHeading}>Hover-highlight rows — <code>qt-hover-accent</code></h3>