@quilltap/theme-storybook 1.0.3 → 1.0.4
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 +7 -0
- package/dist/index.css +24 -0
- package/package.json +1 -1
- package/src/css/qt-components.css +27 -0
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to `@quilltap/theme-storybook` will be documented in this file.
|
|
4
4
|
|
|
5
|
+
## [1.0.4] - 2026-01-01
|
|
6
|
+
|
|
7
|
+
### Added
|
|
8
|
+
- Avatar label classes (`qt-avatar-labels`, `qt-avatar-name`, `qt-avatar-title`)
|
|
9
|
+
- CSS variables: `--qt-avatar-name-fg`, `--qt-avatar-title-fg` for theming avatar text
|
|
10
|
+
- Themes can now customize avatar name/title colors (useful for backgrounds with images)
|
|
11
|
+
|
|
5
12
|
## [1.0.3] - 2026-01-01
|
|
6
13
|
|
|
7
14
|
### Added
|
package/dist/index.css
CHANGED
|
@@ -201,6 +201,8 @@ body {
|
|
|
201
201
|
--qt-avatar-size-xl: 4rem;
|
|
202
202
|
--qt-avatar-bg: var(--color-muted);
|
|
203
203
|
--qt-avatar-fg: var(--color-muted-foreground);
|
|
204
|
+
--qt-avatar-name-fg: var(--color-foreground);
|
|
205
|
+
--qt-avatar-title-fg: var(--color-muted-foreground);
|
|
204
206
|
--qt-dialog-radius: var(--radius-lg);
|
|
205
207
|
--qt-dialog-bg: var(--color-background);
|
|
206
208
|
--qt-dialog-border: var(--color-border);
|
|
@@ -485,6 +487,28 @@ body {
|
|
|
485
487
|
-o-object-fit: cover;
|
|
486
488
|
object-fit: cover;
|
|
487
489
|
}
|
|
490
|
+
.qt-avatar-labels {
|
|
491
|
+
text-align: center;
|
|
492
|
+
margin-top: 0.25rem;
|
|
493
|
+
}
|
|
494
|
+
.qt-avatar-name {
|
|
495
|
+
font-size: 0.875rem;
|
|
496
|
+
font-weight: 600;
|
|
497
|
+
color: var(--qt-avatar-name-fg);
|
|
498
|
+
overflow: hidden;
|
|
499
|
+
display: -webkit-box;
|
|
500
|
+
-webkit-line-clamp: 2;
|
|
501
|
+
-webkit-box-orient: vertical;
|
|
502
|
+
}
|
|
503
|
+
.qt-avatar-title {
|
|
504
|
+
font-size: 0.75rem;
|
|
505
|
+
font-style: italic;
|
|
506
|
+
color: var(--qt-avatar-title-fg);
|
|
507
|
+
overflow: hidden;
|
|
508
|
+
display: -webkit-box;
|
|
509
|
+
-webkit-line-clamp: 2;
|
|
510
|
+
-webkit-box-orient: vertical;
|
|
511
|
+
}
|
|
488
512
|
.qt-dialog-backdrop {
|
|
489
513
|
position: fixed;
|
|
490
514
|
inset: 0;
|
package/package.json
CHANGED
|
@@ -77,6 +77,8 @@
|
|
|
77
77
|
--qt-avatar-size-xl: 4rem;
|
|
78
78
|
--qt-avatar-bg: var(--color-muted);
|
|
79
79
|
--qt-avatar-fg: var(--color-muted-foreground);
|
|
80
|
+
--qt-avatar-name-fg: var(--color-foreground);
|
|
81
|
+
--qt-avatar-title-fg: var(--color-muted-foreground);
|
|
80
82
|
|
|
81
83
|
/* Dialog variables */
|
|
82
84
|
--qt-dialog-radius: var(--radius-lg);
|
|
@@ -428,6 +430,31 @@
|
|
|
428
430
|
object-fit: cover;
|
|
429
431
|
}
|
|
430
432
|
|
|
433
|
+
.qt-avatar-labels {
|
|
434
|
+
text-align: center;
|
|
435
|
+
margin-top: 0.25rem;
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
.qt-avatar-name {
|
|
439
|
+
font-size: 0.875rem;
|
|
440
|
+
font-weight: 600;
|
|
441
|
+
color: var(--qt-avatar-name-fg);
|
|
442
|
+
overflow: hidden;
|
|
443
|
+
display: -webkit-box;
|
|
444
|
+
-webkit-line-clamp: 2;
|
|
445
|
+
-webkit-box-orient: vertical;
|
|
446
|
+
}
|
|
447
|
+
|
|
448
|
+
.qt-avatar-title {
|
|
449
|
+
font-size: 0.75rem;
|
|
450
|
+
font-style: italic;
|
|
451
|
+
color: var(--qt-avatar-title-fg);
|
|
452
|
+
overflow: hidden;
|
|
453
|
+
display: -webkit-box;
|
|
454
|
+
-webkit-line-clamp: 2;
|
|
455
|
+
-webkit-box-orient: vertical;
|
|
456
|
+
}
|
|
457
|
+
|
|
431
458
|
/* ==========================================================================
|
|
432
459
|
DIALOG COMPONENTS
|
|
433
460
|
========================================================================== */
|