@quilltap/theme-storybook 1.0.40 → 1.0.43

package/dist/stories/index.mjs

@@ -15,11 +15,12 @@ import {
   Loading,
   Participant,
   Spacing,
+  Surfaces,
   Tabs,
   Terminal,
   ThemeComparison,
   Typography
-} from "../chunk-GXTUADEJ.mjs";
+} from "../chunk-MKFVWQPL.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.40",
+  "version": "1.0.43",
   "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

@@ -1546,6 +1546,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)
    ========================================================================== */

package/src/stories/components/Icons.tsx

@@ -23,15 +23,15 @@ 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',
-      'link', 'send', 'paperclip', 'eye', 'eye-off', 'star', 'bookmark', 'expand', 'compress',
+      'copy', 'plus', 'minus', 'search', 'download', 'upload', 'cloud-upload', 'external-link',
+      'link', 'send', 'paperclip', 'eye', 'eye-off', 'star', 'bookmark', 'tag', 'expand', 'compress',
     ],
   },
   {
     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',
     ],
   },
   {
@@ -131,7 +131,9 @@ export const Icons: React.FC = () => {
             full color — best for textured or multi-color marks.
           </li>
           <li>
-            The <code>brand</code> mark is always drawn in full color, even when overridden with an SVG.
+            The <code>brand</code> mark follows the same rule: an <code>.svg</code> override is
+            tinted like any other icon, so ship it as <code>.webp</code> if it should keep its own
+            colors.
           </li>
           <li>
             Names must match the built-in names below; unknown names are ignored. Run{' '}

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';