@quilltap/theme-storybook 1.0.20 → 1.0.22
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 +13 -0
- package/dist/index.css +86 -0
- package/package.json +1 -1
- package/src/css/qt-components.css +131 -0
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to `@quilltap/theme-storybook` will be documented in this file.
|
|
4
4
|
|
|
5
|
+
## [1.0.21] - 2026-02-20
|
|
6
|
+
|
|
7
|
+
### Added
|
|
8
|
+
- Overlay utility classes: `qt-bg-overlay`, `qt-bg-overlay-medium`, `qt-bg-overlay-light`, `qt-bg-overlay-none`, `qt-bg-overlay-caption`
|
|
9
|
+
- Overlay button utility classes: `qt-bg-overlay-btn`, `hover:qt-bg-overlay-btn`
|
|
10
|
+
- Overlay text utilities: `qt-text-overlay`, `qt-text-overlay-muted`
|
|
11
|
+
- Spinner utility classes: `qt-spinner`, `qt-spinner-lg` (themed loading spinners)
|
|
12
|
+
- Favorite color utility: `qt-text-favorite` (themed amber star color)
|
|
13
|
+
- Toggle knob utility: `qt-bg-toggle-knob` (themed toggle switch circle)
|
|
14
|
+
- Warning box utilities: `qt-warning-box`, `qt-warning-box-text` (themed warning container)
|
|
15
|
+
- Prose dark mode utility: `qt-prose-auto` (handles dark mode prose automatically via `.dark` selector)
|
|
16
|
+
- CSS custom properties for all new utilities: `--qt-overlay-*`, `--qt-spinner-*`, `--qt-favorite-color`, `--qt-toggle-knob-bg`, `--qt-warning-box-*`
|
|
17
|
+
|
|
5
18
|
## [1.0.20] - 2026-02-09
|
|
6
19
|
|
|
7
20
|
### Added
|
package/dist/index.css
CHANGED
|
@@ -298,6 +298,8 @@ body {
|
|
|
298
298
|
--qt-badge-tag-fg: hsl(25 95% 40%);
|
|
299
299
|
--qt-badge-memory-bg: hsl(330 80% 60% / 0.15);
|
|
300
300
|
--qt-badge-memory-fg: hsl(330 80% 40%);
|
|
301
|
+
--qt-badge-message-bg: hsl(45 70% 48% / 0.12);
|
|
302
|
+
--qt-badge-message-fg: hsl(45 70% 35%);
|
|
301
303
|
--qt-badge-project-bg: hsl(185 80% 40% / 0.15);
|
|
302
304
|
--qt-badge-project-fg: hsl(185 80% 30%);
|
|
303
305
|
--qt-badge-enabled-bg: hsl(142 76% 36% / 0.15);
|
|
@@ -500,6 +502,21 @@ body {
|
|
|
500
502
|
--qt-filter-chip-inactive-fg: var(--color-muted-foreground);
|
|
501
503
|
--qt-filter-chip-inactive-border: transparent;
|
|
502
504
|
--qt-filter-chip-inactive-hover-bg: color-mix(in srgb, var(--color-muted) 80%, var(--color-foreground) 5%);
|
|
505
|
+
--qt-overlay-bg: rgb(0 0 0 / 0.85);
|
|
506
|
+
--qt-overlay-medium-bg: rgb(0 0 0 / 0.6);
|
|
507
|
+
--qt-overlay-light-bg: rgb(0 0 0 / 0.2);
|
|
508
|
+
--qt-overlay-caption-bg: rgb(0 0 0 / 0.5);
|
|
509
|
+
--qt-overlay-btn-bg: rgb(255 255 255 / 0.1);
|
|
510
|
+
--qt-overlay-btn-hover-bg: rgb(255 255 255 / 0.2);
|
|
511
|
+
--qt-overlay-fg: rgb(255 255 255);
|
|
512
|
+
--qt-overlay-muted-fg: rgb(255 255 255 / 0.7);
|
|
513
|
+
--qt-spinner-track: color-mix(in srgb, var(--color-primary) 20%, transparent);
|
|
514
|
+
--qt-spinner-indicator: var(--color-primary);
|
|
515
|
+
--qt-favorite-color: hsl(45 96% 58%);
|
|
516
|
+
--qt-toggle-knob-bg: white;
|
|
517
|
+
--qt-warning-box-bg: color-mix(in srgb, var(--color-warning) 8%, transparent);
|
|
518
|
+
--qt-warning-box-border: color-mix(in srgb, var(--color-warning) 30%, transparent);
|
|
519
|
+
--qt-warning-box-fg: var(--color-warning);
|
|
503
520
|
}
|
|
504
521
|
.qt-button {
|
|
505
522
|
display: inline-flex;
|
|
@@ -1033,6 +1050,73 @@ body {
|
|
|
1033
1050
|
.hover\:qt-bg-primary\/10:hover {
|
|
1034
1051
|
background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
|
|
1035
1052
|
}
|
|
1053
|
+
.qt-bg-overlay {
|
|
1054
|
+
background-color: var(--qt-overlay-bg, rgb(0 0 0 / 0.85));
|
|
1055
|
+
}
|
|
1056
|
+
.qt-bg-overlay-medium {
|
|
1057
|
+
background-color: var(--qt-overlay-medium-bg, rgb(0 0 0 / 0.6));
|
|
1058
|
+
}
|
|
1059
|
+
.qt-bg-overlay-light {
|
|
1060
|
+
background-color: var(--qt-overlay-light-bg, rgb(0 0 0 / 0.2));
|
|
1061
|
+
}
|
|
1062
|
+
.qt-bg-overlay-none {
|
|
1063
|
+
background-color: transparent;
|
|
1064
|
+
}
|
|
1065
|
+
.qt-bg-overlay-caption {
|
|
1066
|
+
background-color: var(--qt-overlay-caption-bg, rgb(0 0 0 / 0.5));
|
|
1067
|
+
}
|
|
1068
|
+
.qt-bg-overlay-btn {
|
|
1069
|
+
background-color: var(--qt-overlay-btn-bg, rgb(255 255 255 / 0.1));
|
|
1070
|
+
}
|
|
1071
|
+
.hover\:qt-bg-overlay-btn:hover {
|
|
1072
|
+
background-color: var(--qt-overlay-btn-hover-bg, rgb(255 255 255 / 0.2));
|
|
1073
|
+
}
|
|
1074
|
+
.qt-text-overlay {
|
|
1075
|
+
color: var(--qt-overlay-fg, rgb(255 255 255));
|
|
1076
|
+
}
|
|
1077
|
+
.qt-text-overlay-muted {
|
|
1078
|
+
color: var(--qt-overlay-muted-fg, rgb(255 255 255 / 0.7));
|
|
1079
|
+
}
|
|
1080
|
+
.qt-spinner {
|
|
1081
|
+
border: 2px solid var(--qt-spinner-track, color-mix(in srgb, var(--color-primary) 20%, transparent));
|
|
1082
|
+
border-right-color: var(--qt-spinner-indicator, var(--color-primary));
|
|
1083
|
+
}
|
|
1084
|
+
.qt-spinner-lg {
|
|
1085
|
+
border: 4px solid var(--qt-spinner-track, color-mix(in srgb, var(--color-primary) 20%, transparent));
|
|
1086
|
+
border-right-color: var(--qt-spinner-indicator, var(--color-primary));
|
|
1087
|
+
}
|
|
1088
|
+
.qt-text-favorite {
|
|
1089
|
+
color: var(--qt-favorite-color, hsl(45 96% 58%));
|
|
1090
|
+
}
|
|
1091
|
+
.qt-bg-toggle-knob {
|
|
1092
|
+
background-color: var(--qt-toggle-knob-bg, white);
|
|
1093
|
+
}
|
|
1094
|
+
.qt-warning-box {
|
|
1095
|
+
background-color: var(--qt-warning-box-bg, color-mix(in srgb, var(--color-warning) 8%, transparent));
|
|
1096
|
+
border: 1px solid var(--qt-warning-box-border, color-mix(in srgb, var(--color-warning) 30%, transparent));
|
|
1097
|
+
}
|
|
1098
|
+
.qt-warning-box-text {
|
|
1099
|
+
color: var(--qt-warning-box-fg, var(--color-warning));
|
|
1100
|
+
}
|
|
1101
|
+
.qt-prose-auto {
|
|
1102
|
+
}
|
|
1103
|
+
.dark .qt-prose-auto {
|
|
1104
|
+
--tw-prose-body: var(--color-foreground);
|
|
1105
|
+
--tw-prose-headings: var(--color-foreground);
|
|
1106
|
+
--tw-prose-links: var(--color-primary);
|
|
1107
|
+
--tw-prose-bold: var(--color-foreground);
|
|
1108
|
+
--tw-prose-counters: var(--color-muted-foreground);
|
|
1109
|
+
--tw-prose-bullets: var(--color-muted-foreground);
|
|
1110
|
+
--tw-prose-hr: var(--color-border);
|
|
1111
|
+
--tw-prose-quotes: var(--color-foreground);
|
|
1112
|
+
--tw-prose-quote-borders: var(--color-border);
|
|
1113
|
+
--tw-prose-captions: var(--color-muted-foreground);
|
|
1114
|
+
--tw-prose-code: var(--color-foreground);
|
|
1115
|
+
--tw-prose-pre-code: var(--color-foreground);
|
|
1116
|
+
--tw-prose-pre-bg: var(--color-muted);
|
|
1117
|
+
--tw-prose-th-borders: var(--color-border);
|
|
1118
|
+
--tw-prose-td-borders: var(--color-border);
|
|
1119
|
+
}
|
|
1036
1120
|
.qt-left-sidebar {
|
|
1037
1121
|
display: flex;
|
|
1038
1122
|
flex-direction: column;
|
|
@@ -1422,6 +1506,8 @@ body {
|
|
|
1422
1506
|
--qt-badge-tag-fg: hsl(25 95% 65%);
|
|
1423
1507
|
--qt-badge-memory-bg: hsl(330 80% 60% / 0.3);
|
|
1424
1508
|
--qt-badge-memory-fg: hsl(330 80% 70%);
|
|
1509
|
+
--qt-badge-message-bg: hsl(45 70% 50% / 0.25);
|
|
1510
|
+
--qt-badge-message-fg: hsl(45 70% 68%);
|
|
1425
1511
|
--qt-badge-project-bg: hsl(185 80% 40% / 0.3);
|
|
1426
1512
|
--qt-badge-project-fg: hsl(185 80% 70%);
|
|
1427
1513
|
--qt-badge-enabled-bg: hsl(142 76% 36% / 0.3);
|
package/package.json
CHANGED
|
@@ -173,6 +173,8 @@
|
|
|
173
173
|
--qt-badge-tag-fg: hsl(25 95% 40%);
|
|
174
174
|
--qt-badge-memory-bg: hsl(330 80% 60% / 0.15);
|
|
175
175
|
--qt-badge-memory-fg: hsl(330 80% 40%);
|
|
176
|
+
--qt-badge-message-bg: hsl(45 70% 48% / 0.12);
|
|
177
|
+
--qt-badge-message-fg: hsl(45 70% 35%);
|
|
176
178
|
--qt-badge-project-bg: hsl(185 80% 40% / 0.15);
|
|
177
179
|
--qt-badge-project-fg: hsl(185 80% 30%);
|
|
178
180
|
|
|
@@ -416,6 +418,31 @@
|
|
|
416
418
|
--qt-filter-chip-inactive-fg: var(--color-muted-foreground);
|
|
417
419
|
--qt-filter-chip-inactive-border: transparent;
|
|
418
420
|
--qt-filter-chip-inactive-hover-bg: color-mix(in srgb, var(--color-muted) 80%, var(--color-foreground) 5%);
|
|
421
|
+
|
|
422
|
+
/* Overlay variables (image modals, lightboxes, overlay UI elements) */
|
|
423
|
+
--qt-overlay-bg: rgb(0 0 0 / 0.85);
|
|
424
|
+
--qt-overlay-medium-bg: rgb(0 0 0 / 0.6);
|
|
425
|
+
--qt-overlay-light-bg: rgb(0 0 0 / 0.2);
|
|
426
|
+
--qt-overlay-caption-bg: rgb(0 0 0 / 0.5);
|
|
427
|
+
--qt-overlay-btn-bg: rgb(255 255 255 / 0.1);
|
|
428
|
+
--qt-overlay-btn-hover-bg: rgb(255 255 255 / 0.2);
|
|
429
|
+
--qt-overlay-fg: rgb(255 255 255);
|
|
430
|
+
--qt-overlay-muted-fg: rgb(255 255 255 / 0.7);
|
|
431
|
+
|
|
432
|
+
/* Spinner variables */
|
|
433
|
+
--qt-spinner-track: color-mix(in srgb, var(--color-primary) 20%, transparent);
|
|
434
|
+
--qt-spinner-indicator: var(--color-primary);
|
|
435
|
+
|
|
436
|
+
/* Favorite star color */
|
|
437
|
+
--qt-favorite-color: hsl(45 96% 58%);
|
|
438
|
+
|
|
439
|
+
/* Toggle switch knob */
|
|
440
|
+
--qt-toggle-knob-bg: white;
|
|
441
|
+
|
|
442
|
+
/* Warning box variables */
|
|
443
|
+
--qt-warning-box-bg: color-mix(in srgb, var(--color-warning) 8%, transparent);
|
|
444
|
+
--qt-warning-box-border: color-mix(in srgb, var(--color-warning) 30%, transparent);
|
|
445
|
+
--qt-warning-box-fg: var(--color-warning);
|
|
419
446
|
}
|
|
420
447
|
|
|
421
448
|
/* ==========================================================================
|
|
@@ -1097,6 +1124,108 @@
|
|
|
1097
1124
|
background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
|
|
1098
1125
|
}
|
|
1099
1126
|
|
|
1127
|
+
/* ==========================================================================
|
|
1128
|
+
OVERLAY UTILITIES
|
|
1129
|
+
For image modals, lightboxes, and overlay UI elements.
|
|
1130
|
+
========================================================================== */
|
|
1131
|
+
|
|
1132
|
+
.qt-bg-overlay {
|
|
1133
|
+
background-color: var(--qt-overlay-bg, rgb(0 0 0 / 0.85));
|
|
1134
|
+
}
|
|
1135
|
+
|
|
1136
|
+
.qt-bg-overlay-medium {
|
|
1137
|
+
background-color: var(--qt-overlay-medium-bg, rgb(0 0 0 / 0.6));
|
|
1138
|
+
}
|
|
1139
|
+
|
|
1140
|
+
.qt-bg-overlay-light {
|
|
1141
|
+
background-color: var(--qt-overlay-light-bg, rgb(0 0 0 / 0.2));
|
|
1142
|
+
}
|
|
1143
|
+
|
|
1144
|
+
.qt-bg-overlay-none {
|
|
1145
|
+
background-color: transparent;
|
|
1146
|
+
}
|
|
1147
|
+
|
|
1148
|
+
.qt-bg-overlay-caption {
|
|
1149
|
+
background-color: var(--qt-overlay-caption-bg, rgb(0 0 0 / 0.5));
|
|
1150
|
+
}
|
|
1151
|
+
|
|
1152
|
+
.qt-bg-overlay-btn {
|
|
1153
|
+
background-color: var(--qt-overlay-btn-bg, rgb(255 255 255 / 0.1));
|
|
1154
|
+
}
|
|
1155
|
+
|
|
1156
|
+
.hover\:qt-bg-overlay-btn:hover {
|
|
1157
|
+
background-color: var(--qt-overlay-btn-hover-bg, rgb(255 255 255 / 0.2));
|
|
1158
|
+
}
|
|
1159
|
+
|
|
1160
|
+
.qt-text-overlay {
|
|
1161
|
+
color: var(--qt-overlay-fg, rgb(255 255 255));
|
|
1162
|
+
}
|
|
1163
|
+
|
|
1164
|
+
.qt-text-overlay-muted {
|
|
1165
|
+
color: var(--qt-overlay-muted-fg, rgb(255 255 255 / 0.7));
|
|
1166
|
+
}
|
|
1167
|
+
|
|
1168
|
+
/* ==========================================================================
|
|
1169
|
+
SPINNER UTILITIES
|
|
1170
|
+
========================================================================== */
|
|
1171
|
+
|
|
1172
|
+
.qt-spinner {
|
|
1173
|
+
border: 2px solid var(--qt-spinner-track, color-mix(in srgb, var(--color-primary) 20%, transparent));
|
|
1174
|
+
border-right-color: var(--qt-spinner-indicator, var(--color-primary));
|
|
1175
|
+
}
|
|
1176
|
+
|
|
1177
|
+
.qt-spinner-lg {
|
|
1178
|
+
border: 4px solid var(--qt-spinner-track, color-mix(in srgb, var(--color-primary) 20%, transparent));
|
|
1179
|
+
border-right-color: var(--qt-spinner-indicator, var(--color-primary));
|
|
1180
|
+
}
|
|
1181
|
+
|
|
1182
|
+
/* ==========================================================================
|
|
1183
|
+
FAVORITE / TOGGLE / WARNING BOX UTILITIES
|
|
1184
|
+
========================================================================== */
|
|
1185
|
+
|
|
1186
|
+
.qt-text-favorite {
|
|
1187
|
+
color: var(--qt-favorite-color, hsl(45 96% 58%));
|
|
1188
|
+
}
|
|
1189
|
+
|
|
1190
|
+
.qt-bg-toggle-knob {
|
|
1191
|
+
background-color: var(--qt-toggle-knob-bg, white);
|
|
1192
|
+
}
|
|
1193
|
+
|
|
1194
|
+
.qt-warning-box {
|
|
1195
|
+
background-color: var(--qt-warning-box-bg, color-mix(in srgb, var(--color-warning) 8%, transparent));
|
|
1196
|
+
border: 1px solid var(--qt-warning-box-border, color-mix(in srgb, var(--color-warning) 30%, transparent));
|
|
1197
|
+
}
|
|
1198
|
+
|
|
1199
|
+
.qt-warning-box-text {
|
|
1200
|
+
color: var(--qt-warning-box-fg, var(--color-warning));
|
|
1201
|
+
}
|
|
1202
|
+
|
|
1203
|
+
/* ==========================================================================
|
|
1204
|
+
PROSE DARK MODE UTILITY
|
|
1205
|
+
========================================================================== */
|
|
1206
|
+
|
|
1207
|
+
.qt-prose-auto {
|
|
1208
|
+
/* Light mode: default prose colors (no override needed) */
|
|
1209
|
+
}
|
|
1210
|
+
|
|
1211
|
+
.dark .qt-prose-auto {
|
|
1212
|
+
--tw-prose-body: var(--color-foreground);
|
|
1213
|
+
--tw-prose-headings: var(--color-foreground);
|
|
1214
|
+
--tw-prose-links: var(--color-primary);
|
|
1215
|
+
--tw-prose-bold: var(--color-foreground);
|
|
1216
|
+
--tw-prose-counters: var(--color-muted-foreground);
|
|
1217
|
+
--tw-prose-bullets: var(--color-muted-foreground);
|
|
1218
|
+
--tw-prose-hr: var(--color-border);
|
|
1219
|
+
--tw-prose-quotes: var(--color-foreground);
|
|
1220
|
+
--tw-prose-quote-borders: var(--color-border);
|
|
1221
|
+
--tw-prose-captions: var(--color-muted-foreground);
|
|
1222
|
+
--tw-prose-code: var(--color-foreground);
|
|
1223
|
+
--tw-prose-pre-code: var(--color-foreground);
|
|
1224
|
+
--tw-prose-pre-bg: var(--color-muted);
|
|
1225
|
+
--tw-prose-th-borders: var(--color-border);
|
|
1226
|
+
--tw-prose-td-borders: var(--color-border);
|
|
1227
|
+
}
|
|
1228
|
+
|
|
1100
1229
|
/* ==========================================================================
|
|
1101
1230
|
LEFT SIDEBAR COMPONENTS
|
|
1102
1231
|
========================================================================== */
|
|
@@ -1585,6 +1714,8 @@
|
|
|
1585
1714
|
--qt-badge-tag-fg: hsl(25 95% 65%);
|
|
1586
1715
|
--qt-badge-memory-bg: hsl(330 80% 60% / 0.3);
|
|
1587
1716
|
--qt-badge-memory-fg: hsl(330 80% 70%);
|
|
1717
|
+
--qt-badge-message-bg: hsl(45 70% 50% / 0.25);
|
|
1718
|
+
--qt-badge-message-fg: hsl(45 70% 68%);
|
|
1588
1719
|
--qt-badge-project-bg: hsl(185 80% 40% / 0.3);
|
|
1589
1720
|
--qt-badge-project-fg: hsl(185 80% 70%);
|
|
1590
1721
|
|