@quilltap/theme-storybook 1.0.86 → 1.0.88

package/dist/index.css

@@ -511,7 +511,7 @@ body {
   --qt-response-status-gathering-fg: hsl(270 55% 55%);
   --qt-response-status-building-fg: hsl(38 85% 48%);
   --qt-response-status-sending-fg: var(--qt-status-info-fg);
-  --qt-response-status-streaming-fg: hsl(152 55% 38%);
+  --qt-response-status-streaming-fg: hsl(152 55% 29%);
   --qt-response-status-tool-fg: hsl(270 55% 55%);
   --qt-participant-card-radius: var(--radius-lg);
   --qt-participant-card-bg: var(--color-card);
@@ -991,6 +991,7 @@ body {
 }
 .qt-danger-badge {
   --qt-concierge-badge-color: var(--color-destructive, #dc2626);
+  --qt-concierge-badge-fg: var(--qt-alert-error-fg, var(--qt-concierge-badge-color));
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
@@ -1000,14 +1001,15 @@ body {
   line-height: 1rem;
   font-weight: 500;
   background: color-mix(in srgb, var(--qt-concierge-badge-color) 15%, transparent);
-  color: var(--qt-concierge-badge-color);
+  color: var(--qt-concierge-badge-fg);
   border: 1px solid color-mix(in srgb, var(--qt-concierge-badge-color) 40%, transparent);
 }
 .qt-danger-badge-muted {
   --qt-concierge-badge-color: var(--color-muted-foreground, #6b7280);
+  --qt-concierge-badge-fg: var(--color-foreground);
 }
 .qt-concierge-mark {
-  --qt-concierge-mark-color: var(--color-destructive, #dc2626);
+  --qt-concierge-mark-color: var(--qt-alert-error-fg, var(--color-destructive, #dc2626));
   display: inline-block;
   font-weight: 700;
   line-height: 1;
@@ -1636,6 +1638,7 @@ body {
   color: var(--qt-response-status-streaming-fg);
 }
 .qt-chat-regenerating-plate-text {
+  color: var(--qt-chat-regenerating-plate-fg, var(--qt-chat-assistant-fg, var(--color-foreground)));
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 500;
@@ -4088,6 +4091,51 @@ body {
 .qt-rp-font-script {
   font-family: var(--qt-rp-font-script, "Segoe Script", "Brush Script MT", cursive);
 }
+.qt-chat-dialogue {
+  --qt-rp-fg: var(--qt-rp-dialogue-color);
+  --qt-rp-bg: var(--qt-rp-dialogue-bg);
+  color: var(--qt-rp-fg);
+  background: var(--qt-rp-bg);
+}
+.qt-chat-message-user .qt-chat-dialogue {
+  --qt-rp-fg: var(--qt-rp-user-dialogue-color, var(--qt-chat-user-fg));
+}
+.qt-chat-narration {
+  --qt-rp-fg: var(--qt-rp-narration-color);
+  --qt-rp-bg: var(--qt-rp-narration-bg);
+  color: var(--qt-rp-fg);
+  background: var(--qt-rp-bg);
+  font-style: var(--qt-rp-narration-style);
+  padding: var(--qt-rp-narration-padding);
+  border-radius: var(--qt-rp-narration-radius);
+  display: inline;
+}
+.qt-chat-inner-monologue {
+  --qt-rp-fg: var(--qt-rp-inner-monologue-color);
+  --qt-rp-bg: var(--qt-rp-inner-monologue-bg);
+  color: var(--qt-rp-fg);
+  background: var(--qt-rp-bg);
+  font-style: var(--qt-rp-inner-monologue-style);
+  padding: var(--qt-rp-inner-monologue-padding);
+  border-radius: var(--qt-rp-inner-monologue-radius);
+  display: inline;
+}
+.qt-chat-ooc {
+  --qt-rp-fg: var(--qt-rp-ooc-color);
+  --qt-rp-bg: var(--qt-rp-ooc-bg);
+  color: var(--qt-rp-fg);
+  background: var(--qt-rp-bg);
+  font-family: var(--qt-rp-ooc-font);
+  padding: var(--qt-rp-ooc-padding);
+  border-radius: var(--qt-rp-ooc-radius);
+  display: inline;
+}
+:is(p, blockquote, h1, h2, h3, h4, h5, h6):is(.qt-chat-narration, .qt-chat-ooc, .qt-chat-inner-monologue) {
+  display: block;
+}
+li:is(.qt-chat-narration, .qt-chat-ooc, .qt-chat-inner-monologue) {
+  display: list-item;
+}
 .qt-gallery-caption {
   background: var(--qt-gallery-caption-bg, linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.45) 60%, transparent));
   color: var(--qt-gallery-caption-fg, #fff);
@@ -4244,7 +4292,7 @@ body {
 .qt-storyteller-warning {
   font-size: 0.75rem;
   font-weight: 600;
-  color: var(--qt-storyteller-warning-fg, var(--color-destructive));
+  color: var(--qt-storyteller-warning-fg, var(--qt-alert-error-fg));
 }
 .qt-storyteller-actions {
   display: flex;
@@ -4307,7 +4355,7 @@ body {
 .qt-intervention-note {
   font-size: 0.75rem;
   font-style: italic;
-  color: var(--qt-intervention-note-fg, var(--color-warning));
+  color: var(--qt-intervention-note-fg, var(--qt-alert-warning-fg));
 }
 .qt-intervention-badge {
   display: inline-flex;
@@ -4335,5 +4383,11 @@ body {
 }
 .qt-intervene-toggle--off {
   color: var(--qt-intervene-toggle-off-fg, var(--color-muted-foreground));
-  opacity: 0.5;
+  background-image:
+    linear-gradient(
+      to top right,
+      transparent calc(50% - 0.75px),
+      currentColor calc(50% - 0.75px),
+      currentColor calc(50% + 0.75px),
+      transparent calc(50% + 0.75px));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quilltap/theme-storybook",
-  "version": "1.0.86",
+  "version": "1.0.88",
   "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

@@ -441,7 +441,7 @@
   --qt-response-status-gathering-fg: hsl(270 55% 55%);
   --qt-response-status-building-fg: hsl(38 85% 48%);
   --qt-response-status-sending-fg: var(--qt-status-info-fg);
-  --qt-response-status-streaming-fg: hsl(152 55% 38%);
+  --qt-response-status-streaming-fg: hsl(152 55% 29%);
   --qt-response-status-tool-fg: hsl(270 55% 55%);
 
   /* Participant card variables */
@@ -1080,6 +1080,9 @@
  */
 .qt-danger-badge {
   --qt-concierge-badge-color: var(--color-destructive, #dc2626);
+  /* The ink is the alert token, not the fill red: --color-destructive on its
+     own 15% tint read at ~3.5:1 on every bundled theme. */
+  --qt-concierge-badge-fg: var(--qt-alert-error-fg, var(--qt-concierge-badge-color));
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
@@ -1089,13 +1092,15 @@
   line-height: 1rem;
   font-weight: 500;
   background: color-mix(in srgb, var(--qt-concierge-badge-color) 15%, transparent);
-  color: var(--qt-concierge-badge-color);
+  color: var(--qt-concierge-badge-fg);
   border: 1px solid color-mix(in srgb, var(--qt-concierge-badge-color) 40%, transparent);
 }
 
-/* Locked — no colour: the chat keeps to the ordinary desks. */
+/* Locked — no colour: the chat keeps to the ordinary desks. The grey lives
+   in the tint and the rule; the word is in body ink so it stays legible. */
 .qt-danger-badge-muted {
   --qt-concierge-badge-color: var(--color-muted-foreground, #6b7280);
+  --qt-concierge-badge-fg: var(--color-foreground);
 }
 
 
@@ -1106,7 +1111,7 @@
  * so there is no third modifier.
  */
 .qt-concierge-mark {
-  --qt-concierge-mark-color: var(--color-destructive, #dc2626);
+  --qt-concierge-mark-color: var(--qt-alert-error-fg, var(--color-destructive, #dc2626));
   display: inline-block;
   font-weight: 700;
   line-height: 1;
@@ -1975,7 +1980,11 @@
   color: var(--qt-response-status-streaming-fg);
 }
 
+/* The words are in the bubble's own ink: the streaming green is a status
+   accent, and on a mid-tone bubble it fell below 3:1. The green stays on the
+   border and the quill. */
 .qt-chat-regenerating-plate-text {
+  color: var(--qt-chat-regenerating-plate-fg, var(--qt-chat-assistant-fg, var(--color-foreground)));
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 500;
@@ -5049,6 +5058,61 @@
 .qt-rp-font-display { font-family: var(--qt-rp-font-display, var(--theme-font-serif, Georgia, "Times New Roman", serif)); }
 .qt-rp-font-script { font-family: var(--qt-rp-font-script, "Segoe Script", "Brush Script MT", cursive); }
 
+/* Legacy chip classes (dialogue / narration / inner monologue / OOC). As above,
+   the app scopes these under .qt-chat-message-content. */
+.qt-chat-dialogue {
+  --qt-rp-fg: var(--qt-rp-dialogue-color);
+  --qt-rp-bg: var(--qt-rp-dialogue-bg);
+  color: var(--qt-rp-fg);
+  background: var(--qt-rp-bg);
+}
+
+/* Dialogue in a user message follows the bubble's own foreground. */
+.qt-chat-message-user .qt-chat-dialogue {
+  --qt-rp-fg: var(--qt-rp-user-dialogue-color, var(--qt-chat-user-fg));
+}
+
+.qt-chat-narration {
+  --qt-rp-fg: var(--qt-rp-narration-color);
+  --qt-rp-bg: var(--qt-rp-narration-bg);
+  color: var(--qt-rp-fg);
+  background: var(--qt-rp-bg);
+  font-style: var(--qt-rp-narration-style);
+  padding: var(--qt-rp-narration-padding);
+  border-radius: var(--qt-rp-narration-radius);
+  display: inline;
+}
+
+.qt-chat-inner-monologue {
+  --qt-rp-fg: var(--qt-rp-inner-monologue-color);
+  --qt-rp-bg: var(--qt-rp-inner-monologue-bg);
+  color: var(--qt-rp-fg);
+  background: var(--qt-rp-bg);
+  font-style: var(--qt-rp-inner-monologue-style);
+  padding: var(--qt-rp-inner-monologue-padding);
+  border-radius: var(--qt-rp-inner-monologue-radius);
+  display: inline;
+}
+
+.qt-chat-ooc {
+  --qt-rp-fg: var(--qt-rp-ooc-color);
+  --qt-rp-bg: var(--qt-rp-ooc-bg);
+  color: var(--qt-rp-fg);
+  background: var(--qt-rp-bg);
+  font-family: var(--qt-rp-ooc-font);
+  padding: var(--qt-rp-ooc-padding);
+  border-radius: var(--qt-rp-ooc-radius);
+  display: inline;
+}
+
+:is(p, blockquote, h1, h2, h3, h4, h5, h6):is(.qt-chat-narration, .qt-chat-ooc, .qt-chat-inner-monologue) {
+  display: block;
+}
+
+li:is(.qt-chat-narration, .qt-chat-ooc, .qt-chat-inner-monologue) {
+  display: list-item;
+}
+
 /**
  * Gallery tile source caption — a scrim and two lines of small text laid
  * over the foot of a photo-gallery tile, saying where the picture comes from
@@ -5244,7 +5308,9 @@
 .qt-storyteller-warning {
   font-size: 0.75rem;
   font-weight: 600;
-  color: var(--qt-storyteller-warning-fg, var(--color-destructive));
+  /* The alert token, not --color-destructive: a fill red is too dark to read
+     as small text on a dark card. */
+  color: var(--qt-storyteller-warning-fg, var(--qt-alert-error-fg));
 }
 
 .qt-storyteller-actions {
@@ -5334,7 +5400,9 @@
 .qt-intervention-note {
   font-size: 0.75rem;
   font-style: italic;
-  color: var(--qt-intervention-note-fg, var(--color-warning));
+  /* The alert token, not --color-warning: amber fill is not amber ink, and on
+     a light card the raw warning colour falls to ~2:1. */
+  color: var(--qt-intervention-note-fg, var(--qt-alert-warning-fg));
 }
 
 /* The "adjusted" hand beside a Pascal chip's label. */
@@ -5369,7 +5437,16 @@
 }
 
 /* A field the author has hidden from the dialog. */
+/* A field the author has hidden from the dialog: the hand, struck through.
+   The slash says "off" without leaning on colour, and without the half
+   opacity that left the icon at ~2:1 on every bundled theme. */
 .qt-intervene-toggle--off {
   color: var(--qt-intervene-toggle-off-fg, var(--color-muted-foreground));
-  opacity: 0.5;
+  background-image: linear-gradient(
+    to top right,
+    transparent calc(50% - 0.75px),
+    currentColor calc(50% - 0.75px),
+    currentColor calc(50% + 0.75px),
+    transparent calc(50% + 0.75px)
+  );
 }