@quilltap/theme-storybook 1.0.60 → 1.0.61

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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quilltap/theme-storybook",
-  "version": "1.0.60",
+  "version": "1.0.61",
   "description": "Storybook preset and stories for developing Quilltap theme plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

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
    ========================================================================== */