@quilltap/theme-storybook 1.0.41 → 1.0.44

package/dist/stories/index.mjs

@@ -15,11 +15,12 @@ import {
   Loading,
   Participant,
   Spacing,
+  Surfaces,
   Tabs,
   Terminal,
   ThemeComparison,
   Typography
-} from "../chunk-U2PTQQL5.mjs";
+} from "../chunk-77W5TNBS.mjs";
 import "../chunk-WUKYLWAZ.mjs";
 export {
   Avatars,
@@ -38,6 +39,7 @@ export {
   Loading,
   Participant,
   Spacing,
+  Surfaces,
   Tabs,
   Terminal,
   ThemeComparison,

package/package.json

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

@@ -287,6 +287,17 @@
   --qt-rp-button-ooc-bg: hsl(152 60% 28%);
   --qt-rp-button-ooc-fg: hsl(152 60% 80%);
 
+  /* Roleplay-template palette (qt-roleplay-1..4): four distinct high-contrast
+     chips a delimiter can opt into. Themes override these four pairs to taste. */
+  --qt-roleplay-1-bg: hsl(217 91% 53%);
+  --qt-roleplay-1-fg: hsl(0 0% 100%);
+  --qt-roleplay-2-bg: hsl(270 65% 55%);
+  --qt-roleplay-2-fg: hsl(0 0% 100%);
+  --qt-roleplay-3-bg: hsl(38 92% 50%);
+  --qt-roleplay-3-fg: hsl(30 45% 12%);
+  --qt-roleplay-4-bg: hsl(168 78% 36%);
+  --qt-roleplay-4-fg: hsl(0 0% 100%);
+
   /* Queue badge variables */
   --qt-queue-badge-radius: var(--radius-sm);
   --qt-queue-badge-padding-x: 0.375rem;
@@ -1546,6 +1557,26 @@
   color: var(--color-accent-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
+   row stays legible even on themes where --color-accent is a bold colour (e.g.
+   Madman's Box amber). Without the descendant flip, children carrying their own
+   colour (qt-text-secondary, qt-text-primary, …) would wash out — or, when their
+   colour matches the accent, vanish entirely. The descendant selector is wrapped
+   in :where() so it adds no specificity to the resting state (children own their
+   colour as usual); the :hover rules still win via the hover pseudo-class. */
+.qt-hover-accent {
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.qt-hover-accent:hover {
+  background-color: var(--color-accent);
+  color: var(--color-accent-foreground);
+}
+.qt-hover-accent:hover :where(*) {
+  color: var(--color-accent-foreground);
+}
+
 /* ==========================================================================
    STATUS COLOR UTILITIES (with opacity variants)
    ========================================================================== */
@@ -2526,3 +2557,44 @@
   background-color: var(--qt-terminal-closed-badge-bg);
   color: var(--qt-terminal-closed-badge-fg);
 }
+
+/* ==========================================================================
+   ROLEPLAY-TEMPLATE STYLES
+   The chips + add-on flourishes a roleplay-template delimiter can opt into. In
+   the app these are scoped under .qt-chat-message-content to override prose; the
+   stylebook has no prose layer, so they are declared plainly here for preview.
+   ========================================================================== */
+.qt-roleplay-1, .qt-roleplay-2, .qt-roleplay-3, .qt-roleplay-4,
+.qt-roleplay-danger, .qt-roleplay-warning, .qt-roleplay-success,
+.qt-roleplay-info, .qt-roleplay-muted, .qt-roleplay-code {
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.1875rem;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
+.qt-roleplay-1 { --qt-rp-fg: var(--qt-roleplay-1-fg); --qt-rp-bg: var(--qt-roleplay-1-bg); color: var(--qt-rp-fg); background: var(--qt-rp-bg); }
+.qt-roleplay-2 { --qt-rp-fg: var(--qt-roleplay-2-fg); --qt-rp-bg: var(--qt-roleplay-2-bg); color: var(--qt-rp-fg); background: var(--qt-rp-bg); }
+.qt-roleplay-3 { --qt-rp-fg: var(--qt-roleplay-3-fg); --qt-rp-bg: var(--qt-roleplay-3-bg); color: var(--qt-rp-fg); background: var(--qt-rp-bg); }
+.qt-roleplay-4 { --qt-rp-fg: var(--qt-roleplay-4-fg); --qt-rp-bg: var(--qt-roleplay-4-bg); color: var(--qt-rp-fg); background: var(--qt-rp-bg); }
+
+.qt-roleplay-danger { --qt-rp-fg: var(--color-destructive-foreground); --qt-rp-bg: var(--color-destructive); color: var(--qt-rp-fg); background: var(--qt-rp-bg); }
+.qt-roleplay-warning { --qt-rp-fg: var(--color-warning-foreground); --qt-rp-bg: var(--color-warning); color: var(--qt-rp-fg); background: var(--qt-rp-bg); }
+.qt-roleplay-success { --qt-rp-fg: var(--color-success-foreground); --qt-rp-bg: var(--color-success); color: var(--qt-rp-fg); background: var(--qt-rp-bg); }
+.qt-roleplay-info { --qt-rp-fg: var(--color-info-foreground); --qt-rp-bg: var(--color-info); color: var(--qt-rp-fg); background: var(--qt-rp-bg); }
+.qt-roleplay-muted { --qt-rp-fg: var(--color-muted-foreground); --qt-rp-bg: var(--color-muted); color: var(--qt-rp-fg); background: var(--qt-rp-bg); }
+.qt-roleplay-code { --qt-rp-fg: var(--color-foreground); --qt-rp-bg: var(--color-muted); color: var(--qt-rp-fg); background: var(--qt-rp-bg); font-family: var(--font-mono); }
+
+/* Add-on flourishes (composed on top of any base style). */
+.qt-rp-bold { font-weight: 700; }
+.qt-rp-italic { font-style: italic; }
+.qt-rp-underline { text-decoration: underline; }
+.qt-rp-underline-double { text-decoration: underline; text-decoration-style: double; }
+.qt-rp-border { border: 1px solid currentColor; padding: 0.0625rem 0.25rem; border-radius: 0.1875rem; }
+.qt-rp-border-dashed { border: 1px dashed currentColor; padding: 0.0625rem 0.25rem; border-radius: 0.1875rem; }
+.qt-rp-reverse { color: var(--qt-rp-bg, var(--color-background)); background-color: var(--qt-rp-fg, var(--color-foreground)); }
+.qt-rp-font-sans { font-family: var(--theme-font-sans, ui-sans-serif, system-ui, sans-serif); }
+.qt-rp-font-serif { font-family: var(--theme-font-serif, ui-serif, Georgia, "Times New Roman", serif); }
+.qt-rp-font-mono { font-family: var(--theme-font-mono, ui-monospace, "SFMono-Regular", Menlo, monospace); }
+.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); }

package/src/stories/components/Chat.tsx

@@ -193,6 +193,40 @@ export const Chat: React.FC = () => {
         </div>
       </section>
 
+      {/* Roleplay-Template Styles */}
+      <section style={{ marginBottom: '2rem' }}>
+        <h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
+          Roleplay-Template Styles
+        </h3>
+        <p style={{ color: 'var(--color-muted-foreground)', marginBottom: '1rem' }}>
+          Style classes a roleplay-template delimiter can be assigned: four high-contrast chips (each theme picks its own four hues) plus a semantic set. Add-on flourishes (bold, italic, reverse, underline, border, font) compose on top.
+        </p>
+        <div className="qt-chat-message-content" style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: '36rem' }}>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center' }}>
+            <span className="qt-roleplay-1">Style 1</span>
+            <span className="qt-roleplay-2">Style 2</span>
+            <span className="qt-roleplay-3">Style 3</span>
+            <span className="qt-roleplay-4">Style 4</span>
+          </div>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center' }}>
+            <span className="qt-roleplay-danger">Danger</span>
+            <span className="qt-roleplay-warning">Warning</span>
+            <span className="qt-roleplay-success">Success</span>
+            <span className="qt-roleplay-info">Info</span>
+            <span className="qt-roleplay-muted">Muted</span>
+            <span className="qt-roleplay-code">code</span>
+          </div>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center' }}>
+            <span className="qt-roleplay-2 qt-rp-bold">Bold</span>
+            <span className="qt-roleplay-3 qt-rp-italic">Italic</span>
+            <span className="qt-roleplay-1 qt-rp-reverse">Reverse</span>
+            <span className="qt-roleplay-4 qt-rp-underline-double">Underline</span>
+            <span className="qt-roleplay-info qt-rp-border-dashed">Dashed border</span>
+            <span className="qt-roleplay-muted qt-rp-font-serif">Serif font</span>
+          </div>
+        </div>
+      </section>
+
       {/* Whisper Messages */}
       <section style={{ marginBottom: '2rem' }}>
         <h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>

package/src/stories/components/Icons.tsx

@@ -23,7 +23,7 @@ const ICON_GROUPS: IconGroup[] = [
     category: 'General UI',
     names: [
       'close', 'pencil', 'refresh', 'check', 'check-circle', 'chat', 'info', 'trash',
-      'copy', 'plus', 'search', 'download', 'upload', 'cloud-upload', 'external-link',
+      'copy', 'plus', 'minus', 'search', 'download', 'upload', 'cloud-upload', 'external-link',
       'link', 'send', 'paperclip', 'eye', 'eye-off', 'star', 'bookmark', 'tag', 'expand', 'compress',
     ],
   },
@@ -31,7 +31,7 @@ const ICON_GROUPS: IconGroup[] = [
     category: 'Navigation arrows',
     names: [
       'chevron-down', 'chevron-right', 'chevron-left',
-      'arrow-left', 'arrow-right', 'arrow-up', 'arrow-down',
+      'arrow-left', 'arrow-right', 'arrow-up', 'arrow-down', 'sort',
     ],
   },
   {

package/src/stories/components/Surfaces.tsx

@@ -0,0 +1,107 @@
+/**
+ * Surfaces Story Component
+ *
+ * Demonstrates the accent-surface contract for theme authors. The app uses
+ * `accent` as a quiet hover/selected/surface tint, but a theme is free to map
+ * `accent` to a bold colour (e.g. Madman's Box amber). These patterns stay
+ * legible either way, because they pair the accent background with the theme's
+ * own `accentForeground`, or use the quiet `muted` / faint-`primary` surfaces.
+ */
+
+import React from 'react';
+
+const sectionHeading: React.CSSProperties = {
+  fontSize: '1.125rem',
+  fontWeight: 700,
+  marginBottom: '1rem',
+  borderBottom: '1px solid var(--color-border)',
+  paddingBottom: '0.5rem',
+};
+
+const note: React.CSSProperties = {
+  color: 'var(--color-muted-foreground)',
+  marginBottom: '1rem',
+  fontSize: '0.875rem',
+};
+
+export const Surfaces: React.FC = () => {
+  return (
+    <div style={{ padding: '1.5rem' }}>
+      <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
+        its <code>accent</code> token. Filled surfaces pair the background with{' '}
+        <code>qt-text-on-accent</code>; hover rows use <code>qt-hover-accent</code>;
+        quiet selected/panel surfaces lean on <code>muted</code> and faint{' '}
+        <code>primary</code> instead of the accent.
+      </p>
+
+      {/* Filled accent surfaces */}
+      <section style={{ marginBottom: '2rem' }}>
+        <h3 style={sectionHeading}>Filled accent surfaces</h3>
+        <p style={note}>
+          A solid <code>qt-bg-accent</code> fill <strong>must</strong> be paired with{' '}
+          <code>qt-text-on-accent</code> (the theme&apos;s <code>accentForeground</code>).
+          A fill without it falls back to the page foreground and washes out on bold accents.
+        </p>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem', alignItems: 'center' }}>
+          <span className="qt-bg-accent qt-text-on-accent" style={{ padding: '0.125rem 0.5rem', borderRadius: '0.25rem', fontSize: '0.75rem' }}>
+            keyword
+          </span>
+          <span className="qt-bg-accent qt-text-on-accent" style={{ padding: '0.125rem 0.5rem', borderRadius: '0.25rem', fontSize: '0.75rem' }}>
+            another keyword
+          </span>
+          <kbd className="qt-bg-accent qt-text-on-accent" style={{ padding: '0.125rem 0.375rem', borderRadius: '0.25rem', fontSize: '0.75rem' }}>
+            ↵
+          </kbd>
+        </div>
+      </section>
+
+      {/* Hover-highlight rows */}
+      <section style={{ marginBottom: '2rem' }}>
+        <h3 style={sectionHeading}>Hover-highlight rows — <code>qt-hover-accent</code></h3>
+        <p style={note}>
+          For list rows, menu items, and option cards. On hover it paints the accent
+          background and forces the accent foreground onto the row <em>and every
+          descendant</em> — so children that carry their own colour (the title and the
+          muted subtitle below) flip too, instead of washing out (or, when their colour
+          matches the accent, vanishing). Hover the rows to see it.
+        </p>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', maxWidth: '24rem', border: '1px solid var(--color-border)', borderRadius: '0.5rem', padding: '0.375rem' }}>
+          <div className="qt-hover-accent" style={{ display: 'flex', flexDirection: 'column', padding: '0.5rem 0.75rem', borderRadius: '0.375rem', cursor: 'pointer' }}>
+            <span className="qt-text-primary">Compose a reply</span>
+            <span className="qt-text-secondary" style={{ fontSize: '0.8125rem' }}>Draft a response in this thread</span>
+          </div>
+          <div className="qt-hover-accent" style={{ display: 'flex', flexDirection: 'column', padding: '0.5rem 0.75rem', borderRadius: '0.375rem', cursor: 'pointer' }}>
+            <span className="qt-text-primary">Mark as resolved</span>
+            <span className="qt-text-secondary" style={{ fontSize: '0.8125rem' }}>Close and archive this item</span>
+          </div>
+          <div className="qt-hover-accent" style={{ display: 'flex', flexDirection: 'column', padding: '0.5rem 0.75rem', borderRadius: '0.375rem', cursor: 'pointer' }}>
+            <span className="qt-text-primary">Delete</span>
+            <span className="qt-text-secondary" style={{ fontSize: '0.8125rem' }}>Remove permanently</span>
+          </div>
+        </div>
+      </section>
+
+      {/* Quiet selected / panel surfaces */}
+      <section>
+        <h3 style={sectionHeading}>Quiet selected &amp; panel surfaces</h3>
+        <p style={note}>
+          Persistent surfaces (selected cards, informational panels) deliberately avoid
+          the bold accent. Selected states use a faint <code>qt-bg-primary/10</code> tint;
+          informational panels use the neutral <code>qt-bg-muted</code> surface.
+        </p>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
+          <div className="qt-bg-primary/10" style={{ padding: '0.75rem 1rem', borderRadius: '0.5rem', border: '1px solid var(--color-primary)', maxWidth: '16rem' }}>
+            <div className="qt-text-primary" style={{ fontWeight: 600 }}>Selected option</div>
+            <div className="qt-text-secondary" style={{ fontSize: '0.8125rem' }}>Faint primary tint marks the choice.</div>
+          </div>
+          <div className="qt-bg-muted" style={{ padding: '0.75rem 1rem', borderRadius: '0.5rem', border: '1px solid var(--color-border)', maxWidth: '16rem' }}>
+            <div style={{ fontWeight: 600 }}>Informational panel</div>
+            <div className="qt-text-secondary" style={{ fontSize: '0.8125rem' }}>Neutral muted surface, never the accent.</div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};

package/src/stories/index.ts

@@ -14,6 +14,7 @@ export * from './components/Buttons';
 export * from './components/Cards';
 export * from './components/Inputs';
 export * from './components/Badges';
+export * from './components/Surfaces';
 export * from './components/Avatars';
 export * from './components/Dialogs';
 export * from './components/Tabs';