@quilltap/theme-storybook 1.0.19 → 1.0.21

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 All notable changes to `@quilltap/theme-storybook` will be documented in this file.
 
+## [1.0.21] - 2026-02-20
+
+### Added
+- Overlay utility classes: `qt-bg-overlay`, `qt-bg-overlay-medium`, `qt-bg-overlay-light`, `qt-bg-overlay-none`, `qt-bg-overlay-caption`
+- Overlay button utility classes: `qt-bg-overlay-btn`, `hover:qt-bg-overlay-btn`
+- Overlay text utilities: `qt-text-overlay`, `qt-text-overlay-muted`
+- Spinner utility classes: `qt-spinner`, `qt-spinner-lg` (themed loading spinners)
+- Favorite color utility: `qt-text-favorite` (themed amber star color)
+- Toggle knob utility: `qt-bg-toggle-knob` (themed toggle switch circle)
+- Warning box utilities: `qt-warning-box`, `qt-warning-box-text` (themed warning container)
+- Prose dark mode utility: `qt-prose-auto` (handles dark mode prose automatically via `.dark` selector)
+- CSS custom properties for all new utilities: `--qt-overlay-*`, `--qt-spinner-*`, `--qt-favorite-color`, `--qt-toggle-knob-bg`, `--qt-warning-box-*`
+
+## [1.0.20] - 2026-02-09
+
+### Added
+- `qt-shadow-lg` utility class for elevated surfaces (dropdowns, modals)
+- `hover:qt-bg-primary/10` hover background utility class
+
 ## [1.0.18] - 2026-02-08
 
 ### Changed

package/dist/index.css

@@ -500,6 +500,21 @@ body {
   --qt-filter-chip-inactive-fg: var(--color-muted-foreground);
   --qt-filter-chip-inactive-border: transparent;
   --qt-filter-chip-inactive-hover-bg: color-mix(in srgb, var(--color-muted) 80%, var(--color-foreground) 5%);
+  --qt-overlay-bg: rgb(0 0 0 / 0.85);
+  --qt-overlay-medium-bg: rgb(0 0 0 / 0.6);
+  --qt-overlay-light-bg: rgb(0 0 0 / 0.2);
+  --qt-overlay-caption-bg: rgb(0 0 0 / 0.5);
+  --qt-overlay-btn-bg: rgb(255 255 255 / 0.1);
+  --qt-overlay-btn-hover-bg: rgb(255 255 255 / 0.2);
+  --qt-overlay-fg: rgb(255 255 255);
+  --qt-overlay-muted-fg: rgb(255 255 255 / 0.7);
+  --qt-spinner-track: color-mix(in srgb, var(--color-primary) 20%, transparent);
+  --qt-spinner-indicator: var(--color-primary);
+  --qt-favorite-color: hsl(45 96% 58%);
+  --qt-toggle-knob-bg: white;
+  --qt-warning-box-bg: color-mix(in srgb, var(--color-warning) 8%, transparent);
+  --qt-warning-box-border: color-mix(in srgb, var(--color-warning) 30%, transparent);
+  --qt-warning-box-fg: var(--color-warning);
 }
 .qt-button {
   display: inline-flex;
@@ -1030,6 +1045,76 @@ body {
 .hover\:qt-bg-info\/10:hover {
   background-color: color-mix(in srgb, var(--color-info) 10%, transparent);
 }
+.hover\:qt-bg-primary\/10:hover {
+  background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
+}
+.qt-bg-overlay {
+  background-color: var(--qt-overlay-bg, rgb(0 0 0 / 0.85));
+}
+.qt-bg-overlay-medium {
+  background-color: var(--qt-overlay-medium-bg, rgb(0 0 0 / 0.6));
+}
+.qt-bg-overlay-light {
+  background-color: var(--qt-overlay-light-bg, rgb(0 0 0 / 0.2));
+}
+.qt-bg-overlay-none {
+  background-color: transparent;
+}
+.qt-bg-overlay-caption {
+  background-color: var(--qt-overlay-caption-bg, rgb(0 0 0 / 0.5));
+}
+.qt-bg-overlay-btn {
+  background-color: var(--qt-overlay-btn-bg, rgb(255 255 255 / 0.1));
+}
+.hover\:qt-bg-overlay-btn:hover {
+  background-color: var(--qt-overlay-btn-hover-bg, rgb(255 255 255 / 0.2));
+}
+.qt-text-overlay {
+  color: var(--qt-overlay-fg, rgb(255 255 255));
+}
+.qt-text-overlay-muted {
+  color: var(--qt-overlay-muted-fg, rgb(255 255 255 / 0.7));
+}
+.qt-spinner {
+  border: 2px solid var(--qt-spinner-track, color-mix(in srgb, var(--color-primary) 20%, transparent));
+  border-right-color: var(--qt-spinner-indicator, var(--color-primary));
+}
+.qt-spinner-lg {
+  border: 4px solid var(--qt-spinner-track, color-mix(in srgb, var(--color-primary) 20%, transparent));
+  border-right-color: var(--qt-spinner-indicator, var(--color-primary));
+}
+.qt-text-favorite {
+  color: var(--qt-favorite-color, hsl(45 96% 58%));
+}
+.qt-bg-toggle-knob {
+  background-color: var(--qt-toggle-knob-bg, white);
+}
+.qt-warning-box {
+  background-color: var(--qt-warning-box-bg, color-mix(in srgb, var(--color-warning) 8%, transparent));
+  border: 1px solid var(--qt-warning-box-border, color-mix(in srgb, var(--color-warning) 30%, transparent));
+}
+.qt-warning-box-text {
+  color: var(--qt-warning-box-fg, var(--color-warning));
+}
+.qt-prose-auto {
+}
+.dark .qt-prose-auto {
+  --tw-prose-body: var(--color-foreground);
+  --tw-prose-headings: var(--color-foreground);
+  --tw-prose-links: var(--color-primary);
+  --tw-prose-bold: var(--color-foreground);
+  --tw-prose-counters: var(--color-muted-foreground);
+  --tw-prose-bullets: var(--color-muted-foreground);
+  --tw-prose-hr: var(--color-border);
+  --tw-prose-quotes: var(--color-foreground);
+  --tw-prose-quote-borders: var(--color-border);
+  --tw-prose-captions: var(--color-muted-foreground);
+  --tw-prose-code: var(--color-foreground);
+  --tw-prose-pre-code: var(--color-foreground);
+  --tw-prose-pre-bg: var(--color-muted);
+  --tw-prose-th-borders: var(--color-border);
+  --tw-prose-td-borders: var(--color-border);
+}
 .qt-left-sidebar {
   display: flex;
   flex-direction: column;
@@ -1460,6 +1545,9 @@ body {
 .qt-shadow-md {
   box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 }
+.qt-shadow-lg {
+  box-shadow: var(--qt-dialog-shadow, 0 10px 25px hsl(225 18% 10% / 0.15), 0 4px 10px hsl(225 18% 10% / 0.08));
+}
 .hover\:qt-bg-surface-alt:hover {
   background-color: var(--color-muted);
 }

package/package.json

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

@@ -416,6 +416,31 @@
   --qt-filter-chip-inactive-fg: var(--color-muted-foreground);
   --qt-filter-chip-inactive-border: transparent;
   --qt-filter-chip-inactive-hover-bg: color-mix(in srgb, var(--color-muted) 80%, var(--color-foreground) 5%);
+
+  /* Overlay variables (image modals, lightboxes, overlay UI elements) */
+  --qt-overlay-bg: rgb(0 0 0 / 0.85);
+  --qt-overlay-medium-bg: rgb(0 0 0 / 0.6);
+  --qt-overlay-light-bg: rgb(0 0 0 / 0.2);
+  --qt-overlay-caption-bg: rgb(0 0 0 / 0.5);
+  --qt-overlay-btn-bg: rgb(255 255 255 / 0.1);
+  --qt-overlay-btn-hover-bg: rgb(255 255 255 / 0.2);
+  --qt-overlay-fg: rgb(255 255 255);
+  --qt-overlay-muted-fg: rgb(255 255 255 / 0.7);
+
+  /* Spinner variables */
+  --qt-spinner-track: color-mix(in srgb, var(--color-primary) 20%, transparent);
+  --qt-spinner-indicator: var(--color-primary);
+
+  /* Favorite star color */
+  --qt-favorite-color: hsl(45 96% 58%);
+
+  /* Toggle switch knob */
+  --qt-toggle-knob-bg: white;
+
+  /* Warning box variables */
+  --qt-warning-box-bg: color-mix(in srgb, var(--color-warning) 8%, transparent);
+  --qt-warning-box-border: color-mix(in srgb, var(--color-warning) 30%, transparent);
+  --qt-warning-box-fg: var(--color-warning);
 }
 
 /* ==========================================================================
@@ -1093,6 +1118,112 @@
   background-color: color-mix(in srgb, var(--color-info) 10%, transparent);
 }
 
+.hover\:qt-bg-primary\/10:hover {
+  background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
+}
+
+/* ==========================================================================
+   OVERLAY UTILITIES
+   For image modals, lightboxes, and overlay UI elements.
+   ========================================================================== */
+
+.qt-bg-overlay {
+  background-color: var(--qt-overlay-bg, rgb(0 0 0 / 0.85));
+}
+
+.qt-bg-overlay-medium {
+  background-color: var(--qt-overlay-medium-bg, rgb(0 0 0 / 0.6));
+}
+
+.qt-bg-overlay-light {
+  background-color: var(--qt-overlay-light-bg, rgb(0 0 0 / 0.2));
+}
+
+.qt-bg-overlay-none {
+  background-color: transparent;
+}
+
+.qt-bg-overlay-caption {
+  background-color: var(--qt-overlay-caption-bg, rgb(0 0 0 / 0.5));
+}
+
+.qt-bg-overlay-btn {
+  background-color: var(--qt-overlay-btn-bg, rgb(255 255 255 / 0.1));
+}
+
+.hover\:qt-bg-overlay-btn:hover {
+  background-color: var(--qt-overlay-btn-hover-bg, rgb(255 255 255 / 0.2));
+}
+
+.qt-text-overlay {
+  color: var(--qt-overlay-fg, rgb(255 255 255));
+}
+
+.qt-text-overlay-muted {
+  color: var(--qt-overlay-muted-fg, rgb(255 255 255 / 0.7));
+}
+
+/* ==========================================================================
+   SPINNER UTILITIES
+   ========================================================================== */
+
+.qt-spinner {
+  border: 2px solid var(--qt-spinner-track, color-mix(in srgb, var(--color-primary) 20%, transparent));
+  border-right-color: var(--qt-spinner-indicator, var(--color-primary));
+}
+
+.qt-spinner-lg {
+  border: 4px solid var(--qt-spinner-track, color-mix(in srgb, var(--color-primary) 20%, transparent));
+  border-right-color: var(--qt-spinner-indicator, var(--color-primary));
+}
+
+/* ==========================================================================
+   FAVORITE / TOGGLE / WARNING BOX UTILITIES
+   ========================================================================== */
+
+.qt-text-favorite {
+  color: var(--qt-favorite-color, hsl(45 96% 58%));
+}
+
+.qt-bg-toggle-knob {
+  background-color: var(--qt-toggle-knob-bg, white);
+}
+
+.qt-warning-box {
+  background-color: var(--qt-warning-box-bg, color-mix(in srgb, var(--color-warning) 8%, transparent));
+  border: 1px solid var(--qt-warning-box-border, color-mix(in srgb, var(--color-warning) 30%, transparent));
+}
+
+.qt-warning-box-text {
+  color: var(--qt-warning-box-fg, var(--color-warning));
+}
+
+/* ==========================================================================
+   PROSE DARK MODE UTILITY
+   ========================================================================== */
+
+.qt-prose-auto {
+  /* Light mode: default prose colors (no override needed) */
+}
+
+.dark .qt-prose-auto {
+  --tw-prose-body: var(--color-foreground);
+  --tw-prose-headings: var(--color-foreground);
+  --tw-prose-links: var(--color-primary);
+  --tw-prose-bold: var(--color-foreground);
+  --tw-prose-counters: var(--color-muted-foreground);
+  --tw-prose-bullets: var(--color-muted-foreground);
+  --tw-prose-hr: var(--color-border);
+  --tw-prose-quotes: var(--color-foreground);
+  --tw-prose-quote-borders: var(--color-border);
+  --tw-prose-captions: var(--color-muted-foreground);
+  --tw-prose-code: var(--color-foreground);
+  --tw-prose-pre-code: var(--color-foreground);
+  --tw-prose-pre-bg: var(--color-muted);
+  --tw-prose-th-borders: var(--color-border);
+  --tw-prose-td-borders: var(--color-border);
+}
+
 /* ==========================================================================
    LEFT SIDEBAR COMPONENTS
    ========================================================================== */
@@ -1641,6 +1772,10 @@
   box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 }
 
+.qt-shadow-lg {
+  box-shadow: var(--qt-dialog-shadow, 0 10px 25px hsl(225 18% 10% / 0.15), 0 4px 10px hsl(225 18% 10% / 0.08));
+}
+
 .hover\:qt-bg-surface-alt:hover {
   background-color: var(--color-muted);
 }