@quilltap/theme-storybook 1.0.85 → 1.0.86

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);
@@ -1944,6 +1950,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quilltap/theme-storybook",
-  "version": "1.0.85",
+  "version": "1.0.86",
   "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);
@@ -2339,6 +2347,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;