@quilltap/theme-storybook 1.0.85 → 1.0.87

package/dist/index.css

@@ -300,6 +300,12 @@ body {
   --qt-status-danger-border: var(--color-destructive);
   --qt-punctuation-warning-bg: color-mix(in srgb, var(--color-warning) 35%, transparent);
   --qt-punctuation-warning-underline: var(--color-warning);
+  --qt-punctuation-no-dialogue-bg: color-mix(in srgb, var(--color-warning) 14%, transparent);
+  --qt-punctuation-no-dialogue-underline: var(--color-warning);
+  --qt-composer-narration-fg: color-mix(in srgb, var(--color-foreground) 65%, var(--color-primary));
+  --qt-composer-narration-bg: color-mix(in srgb, var(--color-primary) 7%, transparent);
+  --qt-composer-ooc-fg: var(--qt-rp-ooc-color);
+  --qt-composer-ooc-bg: var(--qt-rp-ooc-bg);
   --qt-badge-primary-bg: var(--color-primary);
   --qt-badge-primary-fg: var(--color-primary-foreground);
   --qt-badge-secondary-bg: var(--color-secondary);
@@ -505,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);
@@ -985,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;
@@ -994,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;
@@ -1630,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;
@@ -1944,6 +1953,20 @@ body {
   text-decoration: underline wavy var(--qt-punctuation-warning-underline);
   text-decoration-thickness: 2px;
 }
+::highlight(qt-punctuation-no-dialogue) {
+  background-color: var(--qt-punctuation-no-dialogue-bg);
+  -webkit-text-decoration: underline dotted var(--qt-punctuation-no-dialogue-underline);
+  text-decoration: underline dotted var(--qt-punctuation-no-dialogue-underline);
+  text-decoration-thickness: 2px;
+}
+::highlight(qt-composer-narration) {
+  color: var(--qt-composer-narration-fg);
+  background-color: var(--qt-composer-narration-bg);
+}
+::highlight(qt-composer-ooc) {
+  color: var(--qt-composer-ooc-fg);
+  background-color: var(--qt-composer-ooc-bg);
+}
 .qt-lexical-contenteditable {
   overflow-y: auto;
   position: relative;
@@ -4224,7 +4247,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;
@@ -4287,7 +4310,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;
@@ -4315,5 +4338,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.85",
+  "version": "1.0.87",
   "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

@@ -169,6 +169,14 @@
   /* Composer punctuation warnings (PunctuationLintPlugin, ::highlight) */
   --qt-punctuation-warning-bg: color-mix(in srgb, var(--color-warning) 35%, transparent);
   --qt-punctuation-warning-underline: var(--color-warning);
+  /* Prose mode (Novel-like templates): no dialogue in the draft at all */
+  --qt-punctuation-no-dialogue-bg: color-mix(in srgb, var(--color-warning) 14%, transparent);
+  --qt-punctuation-no-dialogue-underline: var(--color-warning);
+  /* Prose mode composer preview: narration, and ((out of character)) asides */
+  --qt-composer-narration-fg: color-mix(in srgb, var(--color-foreground) 65%, var(--color-primary));
+  --qt-composer-narration-bg: color-mix(in srgb, var(--color-primary) 7%, transparent);
+  --qt-composer-ooc-fg: var(--qt-rp-ooc-color);
+  --qt-composer-ooc-bg: var(--qt-rp-ooc-bg);
 
   /* Badge palette tokens - referenced by the provider badges */
   --qt-badge-primary-bg: var(--color-primary);
@@ -433,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 */
@@ -1072,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;
@@ -1081,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);
 }
 
 
@@ -1098,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;
@@ -1967,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;
@@ -2339,6 +2356,27 @@
   text-decoration-thickness: 2px;
 }
 
+/* Prose mode (a template like Novel: unmarked narration, quoted dialogue).
+   The no-dialogue tint covers every narrated run while the draft has no
+   dialogue at all; the preview marks narration and ((asides)) the way the
+   rendered message will set them. ::highlight cannot set font-style, so
+   narration is told apart by colour rather than italics. */
+::highlight(qt-punctuation-no-dialogue) {
+  background-color: var(--qt-punctuation-no-dialogue-bg);
+  text-decoration: underline dotted var(--qt-punctuation-no-dialogue-underline);
+  text-decoration-thickness: 2px;
+}
+
+::highlight(qt-composer-narration) {
+  color: var(--qt-composer-narration-fg);
+  background-color: var(--qt-composer-narration-bg);
+}
+
+::highlight(qt-composer-ooc) {
+  color: var(--qt-composer-ooc-fg);
+  background-color: var(--qt-composer-ooc-bg);
+}
+
 /* Lexical editor rich text node styles */
 .qt-lexical-contenteditable {
   overflow-y: auto;
@@ -5215,7 +5253,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 {
@@ -5305,7 +5345,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. */
@@ -5340,7 +5382,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)
+  );
 }