@quilltap/theme-storybook 1.0.12 → 1.0.14

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.
Files changed (4) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/index.css +87 -0
  3. package/package.json +1 -1
  4. package/src/css/qt-components.css +118 -0
package/CHANGELOG.md CHANGED
@@ -2,6 +2,23 @@
2
2
 
3
3
  All notable changes to `@quilltap/theme-storybook` will be documented in this file.
4
4
 
5
+ ## [1.0.14] - 2026-01-25
6
+
7
+ ### Added
8
+ - Project badge CSS variables: `--qt-badge-project-bg`, `--qt-badge-project-fg` (teal color)
9
+ - Dark mode overrides for project badge with improved contrast
10
+
11
+ ## [1.0.13] - 2026-01-23
12
+
13
+ ### Added
14
+ - Alert CSS variables: `--qt-alert-success-*`, `--qt-alert-warning-*`, `--qt-alert-error-*`, `--qt-alert-info-*` for fully themeable alerts
15
+ - Entity badge CSS variables: `--qt-badge-character-*`, `--qt-badge-persona-*`, `--qt-badge-chat-*`, `--qt-badge-tag-*`, `--qt-badge-memory-*`
16
+ - Status badge CSS variables: `--qt-badge-enabled-*`, `--qt-badge-disabled-*`, `--qt-badge-related-*`, `--qt-badge-manual-*`, `--qt-badge-auto-*`
17
+ - Plugin source badge CSS variables: `--qt-badge-source-included-*`, `--qt-badge-source-npm-*`, `--qt-badge-source-git-*`, `--qt-badge-source-manual-*`
18
+ - Capability badge CSS variables: `--qt-badge-capability-*`
19
+ - Warning button CSS variables: `--qt-button-warning-*`
20
+ - Dark mode overrides for all new badge and alert variables with improved contrast
21
+
5
22
  ## [1.0.12] - 2026-01-23
6
23
 
7
24
  ### Added
package/dist/index.css CHANGED
@@ -173,6 +173,9 @@ body {
173
173
  --qt-button-success-bg: var(--color-success);
174
174
  --qt-button-success-fg: hsl(0 0% 10%);
175
175
  --qt-button-success-hover-bg: color-mix(in srgb, var(--color-success) 85%, black);
176
+ --qt-button-warning-bg: var(--color-warning);
177
+ --qt-button-warning-fg: hsl(0 0% 10%);
178
+ --qt-button-warning-hover-bg: color-mix(in srgb, var(--color-warning) 85%, black);
176
179
  --qt-card-radius: var(--radius-lg);
177
180
  --qt-card-padding: 1.5rem;
178
181
  --qt-card-bg: var(--color-card);
@@ -206,6 +209,50 @@ body {
206
209
  --qt-status-danger-bg: color-mix(in srgb, var(--color-destructive) 85%, transparent);
207
210
  --qt-status-danger-fg: var(--color-destructive-foreground);
208
211
  --qt-status-danger-border: var(--color-destructive);
212
+ --qt-alert-success-bg: hsl(142 76% 36% / 0.1);
213
+ --qt-alert-success-fg: hsl(142 76% 30%);
214
+ --qt-alert-success-border: hsl(142 76% 36% / 0.3);
215
+ --qt-alert-warning-bg: hsl(38 92% 50% / 0.1);
216
+ --qt-alert-warning-fg: hsl(38 92% 30%);
217
+ --qt-alert-warning-border: hsl(38 92% 50% / 0.3);
218
+ --qt-alert-error-bg: hsl(0 84% 60% / 0.1);
219
+ --qt-alert-error-fg: hsl(0 84% 35%);
220
+ --qt-alert-error-border: hsl(0 84% 60% / 0.3);
221
+ --qt-alert-info-bg: hsl(199 89% 48% / 0.1);
222
+ --qt-alert-info-fg: hsl(199 89% 30%);
223
+ --qt-alert-info-border: hsl(199 89% 48% / 0.3);
224
+ --qt-badge-character-bg: hsl(217 91% 60% / 0.15);
225
+ --qt-badge-character-fg: hsl(217 91% 45%);
226
+ --qt-badge-persona-bg: hsl(270 70% 60% / 0.15);
227
+ --qt-badge-persona-fg: hsl(270 70% 45%);
228
+ --qt-badge-chat-bg: hsl(142 76% 36% / 0.15);
229
+ --qt-badge-chat-fg: hsl(142 76% 30%);
230
+ --qt-badge-tag-bg: hsl(25 95% 53% / 0.15);
231
+ --qt-badge-tag-fg: hsl(25 95% 40%);
232
+ --qt-badge-memory-bg: hsl(330 80% 60% / 0.15);
233
+ --qt-badge-memory-fg: hsl(330 80% 40%);
234
+ --qt-badge-project-bg: hsl(185 80% 40% / 0.15);
235
+ --qt-badge-project-fg: hsl(185 80% 30%);
236
+ --qt-badge-enabled-bg: hsl(142 76% 36% / 0.15);
237
+ --qt-badge-enabled-fg: hsl(142 76% 30%);
238
+ --qt-badge-disabled-bg: var(--color-muted);
239
+ --qt-badge-disabled-fg: var(--color-muted-foreground);
240
+ --qt-badge-related-bg: hsl(270 70% 60% / 0.15);
241
+ --qt-badge-related-fg: hsl(270 70% 45%);
242
+ --qt-badge-manual-bg: hsl(270 70% 60% / 0.15);
243
+ --qt-badge-manual-fg: hsl(270 70% 45%);
244
+ --qt-badge-auto-bg: var(--color-muted);
245
+ --qt-badge-auto-fg: var(--color-muted-foreground);
246
+ --qt-badge-source-included-bg: hsl(270 70% 60% / 0.15);
247
+ --qt-badge-source-included-fg: hsl(270 70% 45%);
248
+ --qt-badge-source-npm-bg: hsl(0 84% 60% / 0.15);
249
+ --qt-badge-source-npm-fg: hsl(0 84% 40%);
250
+ --qt-badge-source-git-bg: hsl(25 95% 53% / 0.15);
251
+ --qt-badge-source-git-fg: hsl(25 95% 40%);
252
+ --qt-badge-source-manual-bg: var(--color-muted);
253
+ --qt-badge-source-manual-fg: var(--color-muted-foreground);
254
+ --qt-badge-capability-bg: hsl(217 91% 60% / 0.1);
255
+ --qt-badge-capability-fg: hsl(217 91% 45%);
209
256
  --qt-avatar-radius: 9999px;
210
257
  --qt-avatar-size: 2.5rem;
211
258
  --qt-avatar-size-sm: 2rem;
@@ -1064,3 +1111,43 @@ body {
1064
1111
  opacity: 0.5;
1065
1112
  }
1066
1113
  }
1114
+ .dark {
1115
+ --qt-alert-success-bg: hsl(142 76% 36% / 0.2);
1116
+ --qt-alert-success-fg: hsl(142 76% 65%);
1117
+ --qt-alert-success-border: hsl(142 76% 36% / 0.5);
1118
+ --qt-alert-warning-bg: hsl(38 92% 50% / 0.2);
1119
+ --qt-alert-warning-fg: hsl(38 92% 70%);
1120
+ --qt-alert-warning-border: hsl(38 92% 50% / 0.5);
1121
+ --qt-alert-error-bg: hsl(0 84% 60% / 0.2);
1122
+ --qt-alert-error-fg: hsl(0 84% 70%);
1123
+ --qt-alert-error-border: hsl(0 84% 60% / 0.5);
1124
+ --qt-alert-info-bg: hsl(199 89% 48% / 0.2);
1125
+ --qt-alert-info-fg: hsl(199 89% 70%);
1126
+ --qt-alert-info-border: hsl(199 89% 48% / 0.5);
1127
+ --qt-badge-character-bg: hsl(217 91% 60% / 0.3);
1128
+ --qt-badge-character-fg: hsl(217 91% 70%);
1129
+ --qt-badge-persona-bg: hsl(270 70% 60% / 0.3);
1130
+ --qt-badge-persona-fg: hsl(270 70% 70%);
1131
+ --qt-badge-chat-bg: hsl(142 76% 36% / 0.3);
1132
+ --qt-badge-chat-fg: hsl(142 76% 65%);
1133
+ --qt-badge-tag-bg: hsl(25 95% 53% / 0.3);
1134
+ --qt-badge-tag-fg: hsl(25 95% 65%);
1135
+ --qt-badge-memory-bg: hsl(330 80% 60% / 0.3);
1136
+ --qt-badge-memory-fg: hsl(330 80% 70%);
1137
+ --qt-badge-project-bg: hsl(185 80% 40% / 0.3);
1138
+ --qt-badge-project-fg: hsl(185 80% 70%);
1139
+ --qt-badge-enabled-bg: hsl(142 76% 36% / 0.3);
1140
+ --qt-badge-enabled-fg: hsl(142 76% 65%);
1141
+ --qt-badge-related-bg: hsl(270 70% 60% / 0.3);
1142
+ --qt-badge-related-fg: hsl(270 70% 70%);
1143
+ --qt-badge-manual-bg: hsl(270 70% 60% / 0.3);
1144
+ --qt-badge-manual-fg: hsl(270 70% 70%);
1145
+ --qt-badge-source-included-bg: hsl(270 70% 60% / 0.3);
1146
+ --qt-badge-source-included-fg: hsl(270 70% 70%);
1147
+ --qt-badge-source-npm-bg: hsl(0 84% 60% / 0.3);
1148
+ --qt-badge-source-npm-fg: hsl(0 84% 70%);
1149
+ --qt-badge-source-git-bg: hsl(25 95% 53% / 0.3);
1150
+ --qt-badge-source-git-fg: hsl(25 95% 65%);
1151
+ --qt-badge-capability-bg: hsl(217 91% 60% / 0.2);
1152
+ --qt-badge-capability-fg: hsl(217 91% 70%);
1153
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@quilltap/theme-storybook",
3
- "version": "1.0.12",
3
+ "version": "1.0.14",
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",
package/src/css/qt-components.css CHANGED
@@ -42,6 +42,10 @@
42
42
  --qt-button-success-fg: hsl(0 0% 10%); /* Dark text for contrast on bright green */
43
43
  --qt-button-success-hover-bg: color-mix(in srgb, var(--color-success) 85%, black);
44
44
 
45
+ --qt-button-warning-bg: var(--color-warning);
46
+ --qt-button-warning-fg: hsl(0 0% 10%); /* Dark text for contrast on amber */
47
+ --qt-button-warning-hover-bg: color-mix(in srgb, var(--color-warning) 85%, black);
48
+
45
49
  /* Card variables */
46
50
  --qt-card-radius: var(--radius-lg);
47
51
  --qt-card-padding: 1.5rem;
@@ -86,6 +90,63 @@
86
90
  --qt-status-danger-fg: var(--color-destructive-foreground);
87
91
  --qt-status-danger-border: var(--color-destructive);
88
92
 
93
+ /* Alert tokens - semi-transparent backgrounds with readable text */
94
+ --qt-alert-success-bg: hsl(142 76% 36% / 0.1);
95
+ --qt-alert-success-fg: hsl(142 76% 30%);
96
+ --qt-alert-success-border: hsl(142 76% 36% / 0.3);
97
+
98
+ --qt-alert-warning-bg: hsl(38 92% 50% / 0.1);
99
+ --qt-alert-warning-fg: hsl(38 92% 30%);
100
+ --qt-alert-warning-border: hsl(38 92% 50% / 0.3);
101
+
102
+ --qt-alert-error-bg: hsl(0 84% 60% / 0.1);
103
+ --qt-alert-error-fg: hsl(0 84% 35%);
104
+ --qt-alert-error-border: hsl(0 84% 60% / 0.3);
105
+
106
+ --qt-alert-info-bg: hsl(199 89% 48% / 0.1);
107
+ --qt-alert-info-fg: hsl(199 89% 30%);
108
+ --qt-alert-info-border: hsl(199 89% 48% / 0.3);
109
+
110
+ /* Entity-type badge colors */
111
+ --qt-badge-character-bg: hsl(217 91% 60% / 0.15);
112
+ --qt-badge-character-fg: hsl(217 91% 45%);
113
+ --qt-badge-persona-bg: hsl(270 70% 60% / 0.15);
114
+ --qt-badge-persona-fg: hsl(270 70% 45%);
115
+ --qt-badge-chat-bg: hsl(142 76% 36% / 0.15);
116
+ --qt-badge-chat-fg: hsl(142 76% 30%);
117
+ --qt-badge-tag-bg: hsl(25 95% 53% / 0.15);
118
+ --qt-badge-tag-fg: hsl(25 95% 40%);
119
+ --qt-badge-memory-bg: hsl(330 80% 60% / 0.15);
120
+ --qt-badge-memory-fg: hsl(330 80% 40%);
121
+ --qt-badge-project-bg: hsl(185 80% 40% / 0.15);
122
+ --qt-badge-project-fg: hsl(185 80% 30%);
123
+
124
+ /* Status badge colors */
125
+ --qt-badge-enabled-bg: hsl(142 76% 36% / 0.15);
126
+ --qt-badge-enabled-fg: hsl(142 76% 30%);
127
+ --qt-badge-disabled-bg: var(--color-muted);
128
+ --qt-badge-disabled-fg: var(--color-muted-foreground);
129
+ --qt-badge-related-bg: hsl(270 70% 60% / 0.15);
130
+ --qt-badge-related-fg: hsl(270 70% 45%);
131
+ --qt-badge-manual-bg: hsl(270 70% 60% / 0.15);
132
+ --qt-badge-manual-fg: hsl(270 70% 45%);
133
+ --qt-badge-auto-bg: var(--color-muted);
134
+ --qt-badge-auto-fg: var(--color-muted-foreground);
135
+
136
+ /* Plugin source badge colors */
137
+ --qt-badge-source-included-bg: hsl(270 70% 60% / 0.15);
138
+ --qt-badge-source-included-fg: hsl(270 70% 45%);
139
+ --qt-badge-source-npm-bg: hsl(0 84% 60% / 0.15);
140
+ --qt-badge-source-npm-fg: hsl(0 84% 40%);
141
+ --qt-badge-source-git-bg: hsl(25 95% 53% / 0.15);
142
+ --qt-badge-source-git-fg: hsl(25 95% 40%);
143
+ --qt-badge-source-manual-bg: var(--color-muted);
144
+ --qt-badge-source-manual-fg: var(--color-muted-foreground);
145
+
146
+ /* Capability badge colors */
147
+ --qt-badge-capability-bg: hsl(217 91% 60% / 0.1);
148
+ --qt-badge-capability-fg: hsl(217 91% 45%);
149
+
89
150
  /* Avatar variables */
90
151
  --qt-avatar-radius: 9999px;
91
152
  --qt-avatar-size: 2.5rem;
@@ -1146,3 +1207,60 @@
1146
1207
  opacity: 0.5;
1147
1208
  }
1148
1209
  }
1210
+
1211
+ /* ==========================================================================
1212
+ DARK MODE OVERRIDES
1213
+ Adjusted colors for dark backgrounds with better contrast
1214
+ ========================================================================== */
1215
+ .dark {
1216
+ /* Alert tokens - brighter, more saturated for dark backgrounds */
1217
+ --qt-alert-success-bg: hsl(142 76% 36% / 0.2);
1218
+ --qt-alert-success-fg: hsl(142 76% 65%);
1219
+ --qt-alert-success-border: hsl(142 76% 36% / 0.5);
1220
+
1221
+ --qt-alert-warning-bg: hsl(38 92% 50% / 0.2);
1222
+ --qt-alert-warning-fg: hsl(38 92% 70%);
1223
+ --qt-alert-warning-border: hsl(38 92% 50% / 0.5);
1224
+
1225
+ --qt-alert-error-bg: hsl(0 84% 60% / 0.2);
1226
+ --qt-alert-error-fg: hsl(0 84% 70%);
1227
+ --qt-alert-error-border: hsl(0 84% 60% / 0.5);
1228
+
1229
+ --qt-alert-info-bg: hsl(199 89% 48% / 0.2);
1230
+ --qt-alert-info-fg: hsl(199 89% 70%);
1231
+ --qt-alert-info-border: hsl(199 89% 48% / 0.5);
1232
+
1233
+ /* Entity badge tokens - brighter for dark backgrounds */
1234
+ --qt-badge-character-bg: hsl(217 91% 60% / 0.3);
1235
+ --qt-badge-character-fg: hsl(217 91% 70%);
1236
+ --qt-badge-persona-bg: hsl(270 70% 60% / 0.3);
1237
+ --qt-badge-persona-fg: hsl(270 70% 70%);
1238
+ --qt-badge-chat-bg: hsl(142 76% 36% / 0.3);
1239
+ --qt-badge-chat-fg: hsl(142 76% 65%);
1240
+ --qt-badge-tag-bg: hsl(25 95% 53% / 0.3);
1241
+ --qt-badge-tag-fg: hsl(25 95% 65%);
1242
+ --qt-badge-memory-bg: hsl(330 80% 60% / 0.3);
1243
+ --qt-badge-memory-fg: hsl(330 80% 70%);
1244
+ --qt-badge-project-bg: hsl(185 80% 40% / 0.3);
1245
+ --qt-badge-project-fg: hsl(185 80% 70%);
1246
+
1247
+ /* Status badge tokens */
1248
+ --qt-badge-enabled-bg: hsl(142 76% 36% / 0.3);
1249
+ --qt-badge-enabled-fg: hsl(142 76% 65%);
1250
+ --qt-badge-related-bg: hsl(270 70% 60% / 0.3);
1251
+ --qt-badge-related-fg: hsl(270 70% 70%);
1252
+ --qt-badge-manual-bg: hsl(270 70% 60% / 0.3);
1253
+ --qt-badge-manual-fg: hsl(270 70% 70%);
1254
+
1255
+ /* Plugin source badge tokens */
1256
+ --qt-badge-source-included-bg: hsl(270 70% 60% / 0.3);
1257
+ --qt-badge-source-included-fg: hsl(270 70% 70%);
1258
+ --qt-badge-source-npm-bg: hsl(0 84% 60% / 0.3);
1259
+ --qt-badge-source-npm-fg: hsl(0 84% 70%);
1260
+ --qt-badge-source-git-bg: hsl(25 95% 53% / 0.3);
1261
+ --qt-badge-source-git-fg: hsl(25 95% 65%);
1262
+
1263
+ /* Capability badge tokens */
1264
+ --qt-badge-capability-bg: hsl(217 91% 60% / 0.2);
1265
+ --qt-badge-capability-fg: hsl(217 91% 70%);
1266
+ }