@quilltap/theme-storybook 1.0.8 → 1.0.10

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to `@quilltap/theme-storybook` will be documented in this file.
 
+## [1.0.10] - 2026-01-16
+
+### Added
+- Collapsed navigation classes (`qt-collapsed-nav`, `qt-collapsed-nav-button`) for sidebar quick-access buttons when collapsed
+
+## [1.0.9] - 2026-01-10
+
+### Changed
+- Status badges (`qt-badge-success`, `qt-badge-warning`, `qt-badge-destructive`) now use `--qt-status-*` tokens for consistent theming
+- Badges use solid backgrounds with contrasting foreground colors for better readability in dark mode
+
+### Added
+- Status token CSS variables: `--qt-status-success-*`, `--qt-status-warning-*`, `--qt-status-info-*`, `--qt-status-danger-*`
+- `qt-badge-info` class using info status tokens
+
 ## [1.0.5] - 2026-01-06
 
 ### Added

package/dist/index.css

@@ -194,6 +194,18 @@ body {
   --qt-badge-padding-y: 0.25rem;
   --qt-badge-font-size: 0.875rem;
   --qt-badge-font-weight: 600;
+  --qt-status-success-bg: color-mix(in srgb, var(--color-success) 85%, transparent);
+  --qt-status-success-fg: var(--color-success-foreground);
+  --qt-status-success-border: var(--color-success);
+  --qt-status-warning-bg: color-mix(in srgb, var(--color-warning) 85%, transparent);
+  --qt-status-warning-fg: var(--color-warning-foreground);
+  --qt-status-warning-border: var(--color-warning);
+  --qt-status-info-bg: color-mix(in srgb, var(--color-info) 85%, transparent);
+  --qt-status-info-fg: var(--color-info-foreground);
+  --qt-status-info-border: var(--color-info);
+  --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-avatar-radius: 9999px;
   --qt-avatar-size: 2.5rem;
   --qt-avatar-size-sm: 2rem;
@@ -446,16 +458,24 @@ body {
   color: var(--color-secondary-foreground);
 }
 .qt-badge-success {
-  background-color: var(--color-success);
-  color: var(--color-success-foreground);
+  background: var(--qt-status-success-bg);
+  color: var(--qt-status-success-fg);
+  border: 1px solid var(--qt-status-success-border);
 }
 .qt-badge-warning {
-  background-color: var(--color-warning);
-  color: var(--color-warning-foreground);
+  background: var(--qt-status-warning-bg);
+  color: var(--qt-status-warning-fg);
+  border: 1px solid var(--qt-status-warning-border);
 }
 .qt-badge-destructive {
-  background-color: var(--color-destructive);
-  color: var(--color-destructive-foreground);
+  background: var(--qt-status-danger-bg);
+  color: var(--qt-status-danger-fg);
+  border: 1px solid var(--qt-status-danger-border);
+}
+.qt-badge-info {
+  background: var(--qt-status-info-bg);
+  color: var(--qt-status-info-fg);
+  border: 1px solid var(--qt-status-info-border);
 }
 .qt-badge-outline {
   background-color: transparent;
@@ -730,6 +750,27 @@ body {
   white-space: nowrap;
   color: var(--color-foreground);
 }
+.qt-collapsed-nav {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.5rem 0.75rem;
+}
+.qt-collapsed-nav-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: background-color 150ms;
+  color: var(--color-foreground);
+}
+.qt-collapsed-nav-button:hover {
+  background-color: var(--color-muted);
+}
 .qt-left-sidebar-footer {
   display: flex;
   flex-direction: column;

package/package.json

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

@@ -69,6 +69,23 @@
   --qt-badge-font-size: 0.875rem;
   --qt-badge-font-weight: 600;
 
+  /* Status tokens - used by status badges for consistent theming */
+  --qt-status-success-bg: color-mix(in srgb, var(--color-success) 85%, transparent);
+  --qt-status-success-fg: var(--color-success-foreground);
+  --qt-status-success-border: var(--color-success);
+
+  --qt-status-warning-bg: color-mix(in srgb, var(--color-warning) 85%, transparent);
+  --qt-status-warning-fg: var(--color-warning-foreground);
+  --qt-status-warning-border: var(--color-warning);
+
+  --qt-status-info-bg: color-mix(in srgb, var(--color-info) 85%, transparent);
+  --qt-status-info-fg: var(--color-info-foreground);
+  --qt-status-info-border: var(--color-info);
+
+  --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);
+
   /* Avatar variables */
   --qt-avatar-radius: 9999px;
   --qt-avatar-size: 2.5rem;
@@ -371,18 +388,27 @@
 }
 
 .qt-badge-success {
-  background-color: var(--color-success);
-  color: var(--color-success-foreground);
+  background: var(--qt-status-success-bg);
+  color: var(--qt-status-success-fg);
+  border: 1px solid var(--qt-status-success-border);
 }
 
 .qt-badge-warning {
-  background-color: var(--color-warning);
-  color: var(--color-warning-foreground);
+  background: var(--qt-status-warning-bg);
+  color: var(--qt-status-warning-fg);
+  border: 1px solid var(--qt-status-warning-border);
 }
 
 .qt-badge-destructive {
-  background-color: var(--color-destructive);
-  color: var(--color-destructive-foreground);
+  background: var(--qt-status-danger-bg);
+  color: var(--qt-status-danger-fg);
+  border: 1px solid var(--qt-status-danger-border);
+}
+
+.qt-badge-info {
+  background: var(--qt-status-info-bg);
+  color: var(--qt-status-info-fg);
+  border: 1px solid var(--qt-status-info-border);
 }
 
 .qt-badge-outline {
@@ -725,6 +751,30 @@
   color: var(--color-foreground);
 }
 
+.qt-collapsed-nav {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.5rem 0.75rem;
+}
+
+.qt-collapsed-nav-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: background-color 150ms;
+  color: var(--color-foreground);
+}
+
+.qt-collapsed-nav-button:hover {
+  background-color: var(--color-muted);
+}
+
 .qt-left-sidebar-footer {
   display: flex;
   flex-direction: column;