@quilltap/theme-storybook 1.0.11 → 1.0.14

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 All notable changes to `@quilltap/theme-storybook` will be documented in this file.
 
+## [1.0.14] - 2026-01-25
+
+### Added
+- Project badge CSS variables: `--qt-badge-project-bg`, `--qt-badge-project-fg` (teal color)
+- Dark mode overrides for project badge with improved contrast
+
+## [1.0.13] - 2026-01-23
+
+### Added
+- Alert CSS variables: `--qt-alert-success-*`, `--qt-alert-warning-*`, `--qt-alert-error-*`, `--qt-alert-info-*` for fully themeable alerts
+- Entity badge CSS variables: `--qt-badge-character-*`, `--qt-badge-persona-*`, `--qt-badge-chat-*`, `--qt-badge-tag-*`, `--qt-badge-memory-*`
+- Status badge CSS variables: `--qt-badge-enabled-*`, `--qt-badge-disabled-*`, `--qt-badge-related-*`, `--qt-badge-manual-*`, `--qt-badge-auto-*`
+- Plugin source badge CSS variables: `--qt-badge-source-included-*`, `--qt-badge-source-npm-*`, `--qt-badge-source-git-*`, `--qt-badge-source-manual-*`
+- Capability badge CSS variables: `--qt-badge-capability-*`
+- Warning button CSS variables: `--qt-button-warning-*`
+- Dark mode overrides for all new badge and alert variables with improved contrast
+
+## [1.0.12] - 2026-01-23
+
+### Added
+- Filter chip classes (`qt-filter-chip`, `qt-filter-chip-active`) for themeable search filter toggles
+- CSS variables: `--qt-filter-chip-radius`, `--qt-filter-chip-padding-x`, `--qt-filter-chip-padding-y`, `--qt-filter-chip-font-size`, `--qt-filter-chip-font-weight`, `--qt-filter-chip-transition`
+- Active state variables: `--qt-filter-chip-active-bg`, `--qt-filter-chip-active-fg`, `--qt-filter-chip-active-border`
+- Inactive state variables: `--qt-filter-chip-inactive-bg`, `--qt-filter-chip-inactive-fg`, `--qt-filter-chip-inactive-border`, `--qt-filter-chip-inactive-hover-bg`
+
 ## [1.0.11] - 2026-01-23
 
 ### Added

package/dist/index.css

@@ -173,6 +173,9 @@ body {
   --qt-button-success-bg: var(--color-success);
   --qt-button-success-fg: hsl(0 0% 10%);
   --qt-button-success-hover-bg: color-mix(in srgb, var(--color-success) 85%, black);
+  --qt-button-warning-bg: var(--color-warning);
+  --qt-button-warning-fg: hsl(0 0% 10%);
+  --qt-button-warning-hover-bg: color-mix(in srgb, var(--color-warning) 85%, black);
   --qt-card-radius: var(--radius-lg);
   --qt-card-padding: 1.5rem;
   --qt-card-bg: var(--color-card);
@@ -206,6 +209,50 @@ body {
   --qt-status-danger-bg: color-mix(in srgb, var(--color-destructive) 85%, transparent);
   --qt-status-danger-fg: var(--color-destructive-foreground);
   --qt-status-danger-border: var(--color-destructive);
+  --qt-alert-success-bg: hsl(142 76% 36% / 0.1);
+  --qt-alert-success-fg: hsl(142 76% 30%);
+  --qt-alert-success-border: hsl(142 76% 36% / 0.3);
+  --qt-alert-warning-bg: hsl(38 92% 50% / 0.1);
+  --qt-alert-warning-fg: hsl(38 92% 30%);
+  --qt-alert-warning-border: hsl(38 92% 50% / 0.3);
+  --qt-alert-error-bg: hsl(0 84% 60% / 0.1);
+  --qt-alert-error-fg: hsl(0 84% 35%);
+  --qt-alert-error-border: hsl(0 84% 60% / 0.3);
+  --qt-alert-info-bg: hsl(199 89% 48% / 0.1);
+  --qt-alert-info-fg: hsl(199 89% 30%);
+  --qt-alert-info-border: hsl(199 89% 48% / 0.3);
+  --qt-badge-character-bg: hsl(217 91% 60% / 0.15);
+  --qt-badge-character-fg: hsl(217 91% 45%);
+  --qt-badge-persona-bg: hsl(270 70% 60% / 0.15);
+  --qt-badge-persona-fg: hsl(270 70% 45%);
+  --qt-badge-chat-bg: hsl(142 76% 36% / 0.15);
+  --qt-badge-chat-fg: hsl(142 76% 30%);
+  --qt-badge-tag-bg: hsl(25 95% 53% / 0.15);
+  --qt-badge-tag-fg: hsl(25 95% 40%);
+  --qt-badge-memory-bg: hsl(330 80% 60% / 0.15);
+  --qt-badge-memory-fg: hsl(330 80% 40%);
+  --qt-badge-project-bg: hsl(185 80% 40% / 0.15);
+  --qt-badge-project-fg: hsl(185 80% 30%);
+  --qt-badge-enabled-bg: hsl(142 76% 36% / 0.15);
+  --qt-badge-enabled-fg: hsl(142 76% 30%);
+  --qt-badge-disabled-bg: var(--color-muted);
+  --qt-badge-disabled-fg: var(--color-muted-foreground);
+  --qt-badge-related-bg: hsl(270 70% 60% / 0.15);
+  --qt-badge-related-fg: hsl(270 70% 45%);
+  --qt-badge-manual-bg: hsl(270 70% 60% / 0.15);
+  --qt-badge-manual-fg: hsl(270 70% 45%);
+  --qt-badge-auto-bg: var(--color-muted);
+  --qt-badge-auto-fg: var(--color-muted-foreground);
+  --qt-badge-source-included-bg: hsl(270 70% 60% / 0.15);
+  --qt-badge-source-included-fg: hsl(270 70% 45%);
+  --qt-badge-source-npm-bg: hsl(0 84% 60% / 0.15);
+  --qt-badge-source-npm-fg: hsl(0 84% 40%);
+  --qt-badge-source-git-bg: hsl(25 95% 53% / 0.15);
+  --qt-badge-source-git-fg: hsl(25 95% 40%);
+  --qt-badge-source-manual-bg: var(--color-muted);
+  --qt-badge-source-manual-fg: var(--color-muted-foreground);
+  --qt-badge-capability-bg: hsl(217 91% 60% / 0.1);
+  --qt-badge-capability-fg: hsl(217 91% 45%);
   --qt-avatar-radius: 9999px;
   --qt-avatar-size: 2.5rem;
   --qt-avatar-size-sm: 2rem;
@@ -255,6 +302,19 @@ body {
   --qt-highlight-radius: 0.125rem;
   --qt-highlight-padding-x: 0.125rem;
   --qt-highlight-font-weight: 500;
+  --qt-filter-chip-radius: 9999px;
+  --qt-filter-chip-padding-x: 0.5rem;
+  --qt-filter-chip-padding-y: 0.25rem;
+  --qt-filter-chip-font-size: 0.75rem;
+  --qt-filter-chip-font-weight: 500;
+  --qt-filter-chip-transition: all 150ms ease;
+  --qt-filter-chip-active-bg: var(--color-primary);
+  --qt-filter-chip-active-fg: var(--color-primary-foreground);
+  --qt-filter-chip-active-border: transparent;
+  --qt-filter-chip-inactive-bg: var(--color-muted);
+  --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-button {
   display: inline-flex;
@@ -1009,6 +1069,40 @@ body {
   padding-right: var(--qt-highlight-padding-x);
   font-weight: var(--qt-highlight-font-weight);
 }
+.qt-filter-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: var(--qt-filter-chip-padding-y) var(--qt-filter-chip-padding-x);
+  border-radius: var(--qt-filter-chip-radius);
+  font-size: var(--qt-filter-chip-font-size);
+  font-weight: var(--qt-filter-chip-font-weight);
+  transition: var(--qt-filter-chip-transition);
+  border: 1px solid var(--qt-filter-chip-inactive-border);
+  background: var(--qt-filter-chip-inactive-bg);
+  color: var(--qt-filter-chip-inactive-fg);
+}
+.qt-filter-chip:hover {
+  background: var(--qt-filter-chip-inactive-hover-bg);
+}
+.qt-filter-chip-active {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: var(--qt-filter-chip-padding-y) var(--qt-filter-chip-padding-x);
+  border-radius: var(--qt-filter-chip-radius);
+  font-size: var(--qt-filter-chip-font-size);
+  font-weight: var(--qt-filter-chip-font-weight);
+  transition: var(--qt-filter-chip-transition);
+  border: 1px solid var(--qt-filter-chip-active-border);
+  background: var(--qt-filter-chip-active-bg);
+  color: var(--qt-filter-chip-active-fg);
+}
+.qt-filter-chip-active:hover {
+  opacity: 0.9;
+}
 @keyframes pulse {
   0%, 100% {
     opacity: 1;
@@ -1017,3 +1111,43 @@ body {
     opacity: 0.5;
   }
 }
+.dark {
+  --qt-alert-success-bg: hsl(142 76% 36% / 0.2);
+  --qt-alert-success-fg: hsl(142 76% 65%);
+  --qt-alert-success-border: hsl(142 76% 36% / 0.5);
+  --qt-alert-warning-bg: hsl(38 92% 50% / 0.2);
+  --qt-alert-warning-fg: hsl(38 92% 70%);
+  --qt-alert-warning-border: hsl(38 92% 50% / 0.5);
+  --qt-alert-error-bg: hsl(0 84% 60% / 0.2);
+  --qt-alert-error-fg: hsl(0 84% 70%);
+  --qt-alert-error-border: hsl(0 84% 60% / 0.5);
+  --qt-alert-info-bg: hsl(199 89% 48% / 0.2);
+  --qt-alert-info-fg: hsl(199 89% 70%);
+  --qt-alert-info-border: hsl(199 89% 48% / 0.5);
+  --qt-badge-character-bg: hsl(217 91% 60% / 0.3);
+  --qt-badge-character-fg: hsl(217 91% 70%);
+  --qt-badge-persona-bg: hsl(270 70% 60% / 0.3);
+  --qt-badge-persona-fg: hsl(270 70% 70%);
+  --qt-badge-chat-bg: hsl(142 76% 36% / 0.3);
+  --qt-badge-chat-fg: hsl(142 76% 65%);
+  --qt-badge-tag-bg: hsl(25 95% 53% / 0.3);
+  --qt-badge-tag-fg: hsl(25 95% 65%);
+  --qt-badge-memory-bg: hsl(330 80% 60% / 0.3);
+  --qt-badge-memory-fg: hsl(330 80% 70%);
+  --qt-badge-project-bg: hsl(185 80% 40% / 0.3);
+  --qt-badge-project-fg: hsl(185 80% 70%);
+  --qt-badge-enabled-bg: hsl(142 76% 36% / 0.3);
+  --qt-badge-enabled-fg: hsl(142 76% 65%);
+  --qt-badge-related-bg: hsl(270 70% 60% / 0.3);
+  --qt-badge-related-fg: hsl(270 70% 70%);
+  --qt-badge-manual-bg: hsl(270 70% 60% / 0.3);
+  --qt-badge-manual-fg: hsl(270 70% 70%);
+  --qt-badge-source-included-bg: hsl(270 70% 60% / 0.3);
+  --qt-badge-source-included-fg: hsl(270 70% 70%);
+  --qt-badge-source-npm-bg: hsl(0 84% 60% / 0.3);
+  --qt-badge-source-npm-fg: hsl(0 84% 70%);
+  --qt-badge-source-git-bg: hsl(25 95% 53% / 0.3);
+  --qt-badge-source-git-fg: hsl(25 95% 65%);
+  --qt-badge-capability-bg: hsl(217 91% 60% / 0.2);
+  --qt-badge-capability-fg: hsl(217 91% 70%);
+}

package/package.json

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

@@ -42,6 +42,10 @@
   --qt-button-success-fg: hsl(0 0% 10%); /* Dark text for contrast on bright green */
   --qt-button-success-hover-bg: color-mix(in srgb, var(--color-success) 85%, black);
 
+  --qt-button-warning-bg: var(--color-warning);
+  --qt-button-warning-fg: hsl(0 0% 10%); /* Dark text for contrast on amber */
+  --qt-button-warning-hover-bg: color-mix(in srgb, var(--color-warning) 85%, black);
+
   /* Card variables */
   --qt-card-radius: var(--radius-lg);
   --qt-card-padding: 1.5rem;
@@ -86,6 +90,63 @@
   --qt-status-danger-fg: var(--color-destructive-foreground);
   --qt-status-danger-border: var(--color-destructive);
 
+  /* Alert tokens - semi-transparent backgrounds with readable text */
+  --qt-alert-success-bg: hsl(142 76% 36% / 0.1);
+  --qt-alert-success-fg: hsl(142 76% 30%);
+  --qt-alert-success-border: hsl(142 76% 36% / 0.3);
+
+  --qt-alert-warning-bg: hsl(38 92% 50% / 0.1);
+  --qt-alert-warning-fg: hsl(38 92% 30%);
+  --qt-alert-warning-border: hsl(38 92% 50% / 0.3);
+
+  --qt-alert-error-bg: hsl(0 84% 60% / 0.1);
+  --qt-alert-error-fg: hsl(0 84% 35%);
+  --qt-alert-error-border: hsl(0 84% 60% / 0.3);
+
+  --qt-alert-info-bg: hsl(199 89% 48% / 0.1);
+  --qt-alert-info-fg: hsl(199 89% 30%);
+  --qt-alert-info-border: hsl(199 89% 48% / 0.3);
+
+  /* Entity-type badge colors */
+  --qt-badge-character-bg: hsl(217 91% 60% / 0.15);
+  --qt-badge-character-fg: hsl(217 91% 45%);
+  --qt-badge-persona-bg: hsl(270 70% 60% / 0.15);
+  --qt-badge-persona-fg: hsl(270 70% 45%);
+  --qt-badge-chat-bg: hsl(142 76% 36% / 0.15);
+  --qt-badge-chat-fg: hsl(142 76% 30%);
+  --qt-badge-tag-bg: hsl(25 95% 53% / 0.15);
+  --qt-badge-tag-fg: hsl(25 95% 40%);
+  --qt-badge-memory-bg: hsl(330 80% 60% / 0.15);
+  --qt-badge-memory-fg: hsl(330 80% 40%);
+  --qt-badge-project-bg: hsl(185 80% 40% / 0.15);
+  --qt-badge-project-fg: hsl(185 80% 30%);
+
+  /* Status badge colors */
+  --qt-badge-enabled-bg: hsl(142 76% 36% / 0.15);
+  --qt-badge-enabled-fg: hsl(142 76% 30%);
+  --qt-badge-disabled-bg: var(--color-muted);
+  --qt-badge-disabled-fg: var(--color-muted-foreground);
+  --qt-badge-related-bg: hsl(270 70% 60% / 0.15);
+  --qt-badge-related-fg: hsl(270 70% 45%);
+  --qt-badge-manual-bg: hsl(270 70% 60% / 0.15);
+  --qt-badge-manual-fg: hsl(270 70% 45%);
+  --qt-badge-auto-bg: var(--color-muted);
+  --qt-badge-auto-fg: var(--color-muted-foreground);
+
+  /* Plugin source badge colors */
+  --qt-badge-source-included-bg: hsl(270 70% 60% / 0.15);
+  --qt-badge-source-included-fg: hsl(270 70% 45%);
+  --qt-badge-source-npm-bg: hsl(0 84% 60% / 0.15);
+  --qt-badge-source-npm-fg: hsl(0 84% 40%);
+  --qt-badge-source-git-bg: hsl(25 95% 53% / 0.15);
+  --qt-badge-source-git-fg: hsl(25 95% 40%);
+  --qt-badge-source-manual-bg: var(--color-muted);
+  --qt-badge-source-manual-fg: var(--color-muted-foreground);
+
+  /* Capability badge colors */
+  --qt-badge-capability-bg: hsl(217 91% 60% / 0.1);
+  --qt-badge-capability-fg: hsl(217 91% 45%);
+
   /* Avatar variables */
   --qt-avatar-radius: 9999px;
   --qt-avatar-size: 2.5rem;
@@ -139,6 +200,25 @@
   --qt-highlight-radius: 0.125rem;
   --qt-highlight-padding-x: 0.125rem;
   --qt-highlight-font-weight: 500;
+
+  /* Filter chip variables (search filter toggles) */
+  --qt-filter-chip-radius: 9999px;
+  --qt-filter-chip-padding-x: 0.5rem;
+  --qt-filter-chip-padding-y: 0.25rem;
+  --qt-filter-chip-font-size: 0.75rem;
+  --qt-filter-chip-font-weight: 500;
+  --qt-filter-chip-transition: all 150ms ease;
+
+  /* Active state (filter is enabled, showing results) */
+  --qt-filter-chip-active-bg: var(--color-primary);
+  --qt-filter-chip-active-fg: var(--color-primary-foreground);
+  --qt-filter-chip-active-border: transparent;
+
+  /* Inactive state (filter is disabled, hiding results) */
+  --qt-filter-chip-inactive-bg: var(--color-muted);
+  --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%);
 }
 
 /* ==========================================================================
@@ -1070,6 +1150,55 @@
   font-weight: var(--qt-highlight-font-weight);
 }
 
+/* ==========================================================================
+   FILTER CHIPS (Search filter toggles)
+   ========================================================================== */
+
+/**
+ * Base filter chip styles (inactive state)
+ * Used for toggling search result filters
+ */
+.qt-filter-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: var(--qt-filter-chip-padding-y) var(--qt-filter-chip-padding-x);
+  border-radius: var(--qt-filter-chip-radius);
+  font-size: var(--qt-filter-chip-font-size);
+  font-weight: var(--qt-filter-chip-font-weight);
+  transition: var(--qt-filter-chip-transition);
+  border: 1px solid var(--qt-filter-chip-inactive-border);
+  background: var(--qt-filter-chip-inactive-bg);
+  color: var(--qt-filter-chip-inactive-fg);
+}
+
+.qt-filter-chip:hover {
+  background: var(--qt-filter-chip-inactive-hover-bg);
+}
+
+/**
+ * Active filter chip (filter is enabled, showing results)
+ */
+.qt-filter-chip-active {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: var(--qt-filter-chip-padding-y) var(--qt-filter-chip-padding-x);
+  border-radius: var(--qt-filter-chip-radius);
+  font-size: var(--qt-filter-chip-font-size);
+  font-weight: var(--qt-filter-chip-font-weight);
+  transition: var(--qt-filter-chip-transition);
+  border: 1px solid var(--qt-filter-chip-active-border);
+  background: var(--qt-filter-chip-active-bg);
+  color: var(--qt-filter-chip-active-fg);
+}
+
+.qt-filter-chip-active:hover {
+  opacity: 0.9;
+}
+
 @keyframes pulse {
   0%, 100% {
     opacity: 1;
@@ -1078,3 +1207,60 @@
     opacity: 0.5;
   }
 }
+
+/* ==========================================================================
+   DARK MODE OVERRIDES
+   Adjusted colors for dark backgrounds with better contrast
+   ========================================================================== */
+.dark {
+  /* Alert tokens - brighter, more saturated for dark backgrounds */
+  --qt-alert-success-bg: hsl(142 76% 36% / 0.2);
+  --qt-alert-success-fg: hsl(142 76% 65%);
+  --qt-alert-success-border: hsl(142 76% 36% / 0.5);
+
+  --qt-alert-warning-bg: hsl(38 92% 50% / 0.2);
+  --qt-alert-warning-fg: hsl(38 92% 70%);
+  --qt-alert-warning-border: hsl(38 92% 50% / 0.5);
+
+  --qt-alert-error-bg: hsl(0 84% 60% / 0.2);
+  --qt-alert-error-fg: hsl(0 84% 70%);
+  --qt-alert-error-border: hsl(0 84% 60% / 0.5);
+
+  --qt-alert-info-bg: hsl(199 89% 48% / 0.2);
+  --qt-alert-info-fg: hsl(199 89% 70%);
+  --qt-alert-info-border: hsl(199 89% 48% / 0.5);
+
+  /* Entity badge tokens - brighter for dark backgrounds */
+  --qt-badge-character-bg: hsl(217 91% 60% / 0.3);
+  --qt-badge-character-fg: hsl(217 91% 70%);
+  --qt-badge-persona-bg: hsl(270 70% 60% / 0.3);
+  --qt-badge-persona-fg: hsl(270 70% 70%);
+  --qt-badge-chat-bg: hsl(142 76% 36% / 0.3);
+  --qt-badge-chat-fg: hsl(142 76% 65%);
+  --qt-badge-tag-bg: hsl(25 95% 53% / 0.3);
+  --qt-badge-tag-fg: hsl(25 95% 65%);
+  --qt-badge-memory-bg: hsl(330 80% 60% / 0.3);
+  --qt-badge-memory-fg: hsl(330 80% 70%);
+  --qt-badge-project-bg: hsl(185 80% 40% / 0.3);
+  --qt-badge-project-fg: hsl(185 80% 70%);
+
+  /* Status badge tokens */
+  --qt-badge-enabled-bg: hsl(142 76% 36% / 0.3);
+  --qt-badge-enabled-fg: hsl(142 76% 65%);
+  --qt-badge-related-bg: hsl(270 70% 60% / 0.3);
+  --qt-badge-related-fg: hsl(270 70% 70%);
+  --qt-badge-manual-bg: hsl(270 70% 60% / 0.3);
+  --qt-badge-manual-fg: hsl(270 70% 70%);
+
+  /* Plugin source badge tokens */
+  --qt-badge-source-included-bg: hsl(270 70% 60% / 0.3);
+  --qt-badge-source-included-fg: hsl(270 70% 70%);
+  --qt-badge-source-npm-bg: hsl(0 84% 60% / 0.3);
+  --qt-badge-source-npm-fg: hsl(0 84% 70%);
+  --qt-badge-source-git-bg: hsl(25 95% 53% / 0.3);
+  --qt-badge-source-git-fg: hsl(25 95% 65%);
+
+  /* Capability badge tokens */
+  --qt-badge-capability-bg: hsl(217 91% 60% / 0.2);
+  --qt-badge-capability-fg: hsl(217 91% 70%);
+}