@quilltap/theme-storybook 1.0.11 → 1.0.12

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to `@quilltap/theme-storybook` will be documented in this file.
 
+## [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

@@ -255,6 +255,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 +1022,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;

package/package.json

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

@@ -139,6 +139,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 +1089,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;