@quilltap/theme-storybook 1.0.10 → 1.0.12

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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
+- Search highlight class (`qt-highlight`) for consistent search result text highlighting
+- CSS variables: `--qt-highlight-bg`, `--qt-highlight-fg`, `--qt-highlight-radius`, `--qt-highlight-padding-x`, `--qt-highlight-font-weight`
+
 ## [1.0.10] - 2026-01-16
 
 ### Added

package/dist/index.css

@@ -250,6 +250,24 @@ body {
     "Liberation Mono",
     "Courier New",
     monospace;
+  --qt-highlight-bg: hsl(50 100% 50%);
+  --qt-highlight-fg: hsl(40 100% 10%);
+  --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;
@@ -996,6 +1014,48 @@ body {
   background: var(--color-muted);
   text-decoration: line-through;
 }
+.qt-highlight {
+  background-color: var(--qt-highlight-bg);
+  color: var(--qt-highlight-fg);
+  border-radius: var(--qt-highlight-radius);
+  padding-left: var(--qt-highlight-padding-x);
+  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.10",
+  "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

@@ -132,6 +132,32 @@
   --qt-code-bg: var(--color-muted);
   --qt-code-fg: var(--color-foreground);
   --qt-code-font: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+  /* Highlight variables (search result highlighting) */
+  --qt-highlight-bg: hsl(50 100% 50%);
+  --qt-highlight-fg: hsl(40 100% 10%);
+  --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%);
 }
 
 /* ==========================================================================
@@ -1045,6 +1071,73 @@
   text-decoration: line-through;
 }
 
+/* ==========================================================================
+   SEARCH HIGHLIGHT
+   ========================================================================== */
+
+/**
+ * Search result text highlight
+ * Used to highlight matching search terms in results
+ * Designed for high contrast in both light and dark themes
+ */
+.qt-highlight {
+  background-color: var(--qt-highlight-bg);
+  color: var(--qt-highlight-fg);
+  border-radius: var(--qt-highlight-radius);
+  padding-left: var(--qt-highlight-padding-x);
+  padding-right: var(--qt-highlight-padding-x);
+  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;