@quilltap/theme-storybook 1.0.10 → 1.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -2,6 +2,12 @@
2
2
 
3
3
  All notable changes to `@quilltap/theme-storybook` will be documented in this file.
4
4
 
5
+ ## [1.0.11] - 2026-01-23
6
+
7
+ ### Added
8
+ - Search highlight class (`qt-highlight`) for consistent search result text highlighting
9
+ - CSS variables: `--qt-highlight-bg`, `--qt-highlight-fg`, `--qt-highlight-radius`, `--qt-highlight-padding-x`, `--qt-highlight-font-weight`
10
+
5
11
  ## [1.0.10] - 2026-01-16
6
12
 
7
13
  ### Added
package/dist/index.css CHANGED
@@ -250,6 +250,11 @@ body {
250
250
  "Liberation Mono",
251
251
  "Courier New",
252
252
  monospace;
253
+ --qt-highlight-bg: hsl(50 100% 50%);
254
+ --qt-highlight-fg: hsl(40 100% 10%);
255
+ --qt-highlight-radius: 0.125rem;
256
+ --qt-highlight-padding-x: 0.125rem;
257
+ --qt-highlight-font-weight: 500;
253
258
  }
254
259
  .qt-button {
255
260
  display: inline-flex;
@@ -996,6 +1001,14 @@ body {
996
1001
  background: var(--color-muted);
997
1002
  text-decoration: line-through;
998
1003
  }
1004
+ .qt-highlight {
1005
+ background-color: var(--qt-highlight-bg);
1006
+ color: var(--qt-highlight-fg);
1007
+ border-radius: var(--qt-highlight-radius);
1008
+ padding-left: var(--qt-highlight-padding-x);
1009
+ padding-right: var(--qt-highlight-padding-x);
1010
+ font-weight: var(--qt-highlight-font-weight);
1011
+ }
999
1012
  @keyframes pulse {
1000
1013
  0%, 100% {
1001
1014
  opacity: 1;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@quilltap/theme-storybook",
3
- "version": "1.0.10",
3
+ "version": "1.0.11",
4
4
  "description": "Storybook preset and stories for developing Quilltap theme plugins",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -132,6 +132,13 @@
132
132
  --qt-code-bg: var(--color-muted);
133
133
  --qt-code-fg: var(--color-foreground);
134
134
  --qt-code-font: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
135
+
136
+ /* Highlight variables (search result highlighting) */
137
+ --qt-highlight-bg: hsl(50 100% 50%);
138
+ --qt-highlight-fg: hsl(40 100% 10%);
139
+ --qt-highlight-radius: 0.125rem;
140
+ --qt-highlight-padding-x: 0.125rem;
141
+ --qt-highlight-font-weight: 500;
135
142
  }
136
143
 
137
144
  /* ==========================================================================
@@ -1045,6 +1052,24 @@
1045
1052
  text-decoration: line-through;
1046
1053
  }
1047
1054
 
1055
+ /* ==========================================================================
1056
+ SEARCH HIGHLIGHT
1057
+ ========================================================================== */
1058
+
1059
+ /**
1060
+ * Search result text highlight
1061
+ * Used to highlight matching search terms in results
1062
+ * Designed for high contrast in both light and dark themes
1063
+ */
1064
+ .qt-highlight {
1065
+ background-color: var(--qt-highlight-bg);
1066
+ color: var(--qt-highlight-fg);
1067
+ border-radius: var(--qt-highlight-radius);
1068
+ padding-left: var(--qt-highlight-padding-x);
1069
+ padding-right: var(--qt-highlight-padding-x);
1070
+ font-weight: var(--qt-highlight-font-weight);
1071
+ }
1072
+
1048
1073
  @keyframes pulse {
1049
1074
  0%, 100% {
1050
1075
  opacity: 1;