@quilltap/theme-storybook 1.0.87 → 1.0.89

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/dist/index.css +77 -11
  2. package/package.json +1 -1
  3. package/src/css/qt-components.css +87 -2
  4. package/src/css/quilltap-defaults.css +9 -9
package/dist/index.css CHANGED
@@ -19,11 +19,11 @@
19
19
  --theme-border: hsl(225 10% 87%);
20
20
  --theme-input: hsl(225 10% 87%);
21
21
  --theme-ring: hsl(225 65% 48%);
22
- --theme-success: hsl(152 60% 38%);
22
+ --theme-success: hsl(152 60% 31%);
23
23
  --theme-success-foreground: hsl(0 0% 100%);
24
- --theme-warning: hsl(38 90% 46%);
25
- --theme-warning-foreground: hsl(0 0% 10%);
26
- --theme-info: hsl(210 75% 48%);
24
+ --theme-warning: hsl(38 90% 32%);
25
+ --theme-warning-foreground: hsl(0 0% 100%);
26
+ --theme-info: hsl(210 75% 44.5%);
27
27
  --theme-info-foreground: hsl(0 0% 100%);
28
28
  --theme-chat-user: hsl(225 62% 50%);
29
29
  --theme-chat-user-foreground: hsl(0 0% 100%);
@@ -76,20 +76,20 @@
76
76
  --theme-secondary: hsl(225 14% 17%);
77
77
  --theme-secondary-foreground: hsl(225 10% 85%);
78
78
  --theme-muted: hsl(225 12% 14%);
79
- --theme-muted-foreground: hsl(225 8% 56%);
79
+ --theme-muted-foreground: hsl(225 8% 58%);
80
80
  --theme-accent: hsl(225 14% 18%);
81
81
  --theme-accent-foreground: hsl(225 10% 85%);
82
- --theme-destructive: hsl(0 60% 54%);
83
- --theme-destructive-foreground: hsl(0 0% 100%);
82
+ --theme-destructive: hsl(0 60% 62%);
83
+ --theme-destructive-foreground: hsl(225 18% 9%);
84
84
  --theme-border: hsl(225 12% 20%);
85
85
  --theme-input: hsl(225 12% 20%);
86
86
  --theme-ring: hsl(225 55% 60%);
87
87
  --theme-success: hsl(152 55% 44%);
88
- --theme-success-foreground: hsl(0 0% 100%);
88
+ --theme-success-foreground: hsl(225 18% 9%);
89
89
  --theme-warning: hsl(38 85% 52%);
90
90
  --theme-warning-foreground: hsl(0 0% 10%);
91
91
  --theme-info: hsl(210 70% 58%);
92
- --theme-info-foreground: hsl(0 0% 100%);
92
+ --theme-info-foreground: hsl(225 18% 9%);
93
93
  --theme-chat-user: hsl(225 60% 56%);
94
94
  --theme-chat-user-foreground: hsl(0 0% 100%);
95
95
  }
@@ -445,7 +445,7 @@ body {
445
445
  --qt-queue-badge-memory-fg: hsl(0 0% 100%);
446
446
  --qt-queue-badge-embedding-bg: hsl(270 50% 48%);
447
447
  --qt-queue-badge-embedding-fg: hsl(0 0% 100%);
448
- --qt-queue-badge-summary-bg: hsl(152 55% 38%);
448
+ --qt-queue-badge-summary-bg: hsl(152 55% 33.5%);
449
449
  --qt-queue-badge-summary-fg: hsl(0 0% 100%);
450
450
  --qt-queue-badge-danger-bg: hsl(0 60% 48%);
451
451
  --qt-queue-badge-danger-fg: hsl(0 0% 100%);
@@ -2748,6 +2748,18 @@ body {
2748
2748
  .qt-text-danger {
2749
2749
  color: var(--color-destructive);
2750
2750
  }
2751
+ .qt-text-success-foreground {
2752
+ color: var(--color-success-foreground);
2753
+ }
2754
+ .qt-text-warning-foreground {
2755
+ color: var(--color-warning-foreground);
2756
+ }
2757
+ .qt-text-info-foreground {
2758
+ color: var(--color-info-foreground);
2759
+ }
2760
+ .qt-text-destructive-foreground {
2761
+ color: var(--color-destructive-foreground);
2762
+ }
2751
2763
  .qt-border-primary {
2752
2764
  border-color: var(--color-primary);
2753
2765
  }
@@ -3610,7 +3622,7 @@ body {
3610
3622
  .dark {
3611
3623
  --qt-queue-badge-memory-bg: hsl(225 55% 55%);
3612
3624
  --qt-queue-badge-embedding-bg: hsl(270 50% 55%);
3613
- --qt-queue-badge-summary-bg: hsl(152 50% 42%);
3625
+ --qt-queue-badge-summary-bg: hsl(152 50% 34.5%);
3614
3626
  --qt-queue-badge-danger-bg: hsl(0 60% 52%);
3615
3627
  --qt-queue-badge-story-bg: hsl(225 12% 44%);
3616
3628
  --qt-chat-whisper-bg: color-mix(in srgb, var(--qt-chat-assistant-bg) 60%, #6b5b95 40%);
@@ -4091,6 +4103,51 @@ body {
4091
4103
  .qt-rp-font-script {
4092
4104
  font-family: var(--qt-rp-font-script, "Segoe Script", "Brush Script MT", cursive);
4093
4105
  }
4106
+ .qt-chat-dialogue {
4107
+ --qt-rp-fg: var(--qt-rp-dialogue-color);
4108
+ --qt-rp-bg: var(--qt-rp-dialogue-bg);
4109
+ color: var(--qt-rp-fg);
4110
+ background: var(--qt-rp-bg);
4111
+ }
4112
+ .qt-chat-message-user .qt-chat-dialogue {
4113
+ --qt-rp-fg: var(--qt-rp-user-dialogue-color, var(--qt-chat-user-fg));
4114
+ }
4115
+ .qt-chat-narration {
4116
+ --qt-rp-fg: var(--qt-rp-narration-color);
4117
+ --qt-rp-bg: var(--qt-rp-narration-bg);
4118
+ color: var(--qt-rp-fg);
4119
+ background: var(--qt-rp-bg);
4120
+ font-style: var(--qt-rp-narration-style);
4121
+ padding: var(--qt-rp-narration-padding);
4122
+ border-radius: var(--qt-rp-narration-radius);
4123
+ display: inline;
4124
+ }
4125
+ .qt-chat-inner-monologue {
4126
+ --qt-rp-fg: var(--qt-rp-inner-monologue-color);
4127
+ --qt-rp-bg: var(--qt-rp-inner-monologue-bg);
4128
+ color: var(--qt-rp-fg);
4129
+ background: var(--qt-rp-bg);
4130
+ font-style: var(--qt-rp-inner-monologue-style);
4131
+ padding: var(--qt-rp-inner-monologue-padding);
4132
+ border-radius: var(--qt-rp-inner-monologue-radius);
4133
+ display: inline;
4134
+ }
4135
+ .qt-chat-ooc {
4136
+ --qt-rp-fg: var(--qt-rp-ooc-color);
4137
+ --qt-rp-bg: var(--qt-rp-ooc-bg);
4138
+ color: var(--qt-rp-fg);
4139
+ background: var(--qt-rp-bg);
4140
+ font-family: var(--qt-rp-ooc-font);
4141
+ padding: var(--qt-rp-ooc-padding);
4142
+ border-radius: var(--qt-rp-ooc-radius);
4143
+ display: inline;
4144
+ }
4145
+ :is(p, blockquote, h1, h2, h3, h4, h5, h6):is(.qt-chat-narration, .qt-chat-ooc, .qt-chat-inner-monologue) {
4146
+ display: block;
4147
+ }
4148
+ li:is(.qt-chat-narration, .qt-chat-ooc, .qt-chat-inner-monologue) {
4149
+ display: list-item;
4150
+ }
4094
4151
  .qt-gallery-caption {
4095
4152
  background: var(--qt-gallery-caption-bg, linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.45) 60%, transparent));
4096
4153
  color: var(--qt-gallery-caption-fg, #fff);
@@ -4346,3 +4403,12 @@ body {
4346
4403
  currentColor calc(50% + 0.75px),
4347
4404
  transparent calc(50% + 0.75px));
4348
4405
  }
4406
+ @media (prefers-reduced-motion: reduce) {
4407
+ *,
4408
+ *::before,
4409
+ *::after {
4410
+ animation-duration: 0.001ms !important;
4411
+ animation-iteration-count: 1 !important;
4412
+ transition-duration: 0.001ms !important;
4413
+ }
4414
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@quilltap/theme-storybook",
3
- "version": "1.0.87",
3
+ "version": "1.0.89",
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
@@ -348,7 +348,7 @@
348
348
  --qt-queue-badge-memory-fg: hsl(0 0% 100%);
349
349
  --qt-queue-badge-embedding-bg: hsl(270 50% 48%);
350
350
  --qt-queue-badge-embedding-fg: hsl(0 0% 100%);
351
- --qt-queue-badge-summary-bg: hsl(152 55% 38%);
351
+ --qt-queue-badge-summary-bg: hsl(152 55% 33.5%);
352
352
  --qt-queue-badge-summary-fg: hsl(0 0% 100%);
353
353
  --qt-queue-badge-danger-bg: hsl(0 60% 48%);
354
354
  --qt-queue-badge-danger-fg: hsl(0 0% 100%);
@@ -3414,6 +3414,23 @@
3414
3414
  color: var(--color-destructive);
3415
3415
  }
3416
3416
 
3417
+ /* Text on a status fill */
3418
+ .qt-text-success-foreground {
3419
+ color: var(--color-success-foreground);
3420
+ }
3421
+
3422
+ .qt-text-warning-foreground {
3423
+ color: var(--color-warning-foreground);
3424
+ }
3425
+
3426
+ .qt-text-info-foreground {
3427
+ color: var(--color-info-foreground);
3428
+ }
3429
+
3430
+ .qt-text-destructive-foreground {
3431
+ color: var(--color-destructive-foreground);
3432
+ }
3433
+
3417
3434
  /* Border utilities */
3418
3435
  .qt-border-primary {
3419
3436
  border-color: var(--color-primary);
@@ -4530,7 +4547,7 @@
4530
4547
  /* Queue status badges — dark mode */
4531
4548
  --qt-queue-badge-memory-bg: hsl(225 55% 55%);
4532
4549
  --qt-queue-badge-embedding-bg: hsl(270 50% 55%);
4533
- --qt-queue-badge-summary-bg: hsl(152 50% 42%);
4550
+ --qt-queue-badge-summary-bg: hsl(152 50% 34.5%);
4534
4551
  --qt-queue-badge-danger-bg: hsl(0 60% 52%);
4535
4552
  --qt-queue-badge-story-bg: hsl(225 12% 44%);
4536
4553
 
@@ -5058,6 +5075,61 @@
5058
5075
  .qt-rp-font-display { font-family: var(--qt-rp-font-display, var(--theme-font-serif, Georgia, "Times New Roman", serif)); }
5059
5076
  .qt-rp-font-script { font-family: var(--qt-rp-font-script, "Segoe Script", "Brush Script MT", cursive); }
5060
5077
 
5078
+ /* Legacy chip classes (dialogue / narration / inner monologue / OOC). As above,
5079
+ the app scopes these under .qt-chat-message-content. */
5080
+ .qt-chat-dialogue {
5081
+ --qt-rp-fg: var(--qt-rp-dialogue-color);
5082
+ --qt-rp-bg: var(--qt-rp-dialogue-bg);
5083
+ color: var(--qt-rp-fg);
5084
+ background: var(--qt-rp-bg);
5085
+ }
5086
+
5087
+ /* Dialogue in a user message follows the bubble's own foreground. */
5088
+ .qt-chat-message-user .qt-chat-dialogue {
5089
+ --qt-rp-fg: var(--qt-rp-user-dialogue-color, var(--qt-chat-user-fg));
5090
+ }
5091
+
5092
+ .qt-chat-narration {
5093
+ --qt-rp-fg: var(--qt-rp-narration-color);
5094
+ --qt-rp-bg: var(--qt-rp-narration-bg);
5095
+ color: var(--qt-rp-fg);
5096
+ background: var(--qt-rp-bg);
5097
+ font-style: var(--qt-rp-narration-style);
5098
+ padding: var(--qt-rp-narration-padding);
5099
+ border-radius: var(--qt-rp-narration-radius);
5100
+ display: inline;
5101
+ }
5102
+
5103
+ .qt-chat-inner-monologue {
5104
+ --qt-rp-fg: var(--qt-rp-inner-monologue-color);
5105
+ --qt-rp-bg: var(--qt-rp-inner-monologue-bg);
5106
+ color: var(--qt-rp-fg);
5107
+ background: var(--qt-rp-bg);
5108
+ font-style: var(--qt-rp-inner-monologue-style);
5109
+ padding: var(--qt-rp-inner-monologue-padding);
5110
+ border-radius: var(--qt-rp-inner-monologue-radius);
5111
+ display: inline;
5112
+ }
5113
+
5114
+ .qt-chat-ooc {
5115
+ --qt-rp-fg: var(--qt-rp-ooc-color);
5116
+ --qt-rp-bg: var(--qt-rp-ooc-bg);
5117
+ color: var(--qt-rp-fg);
5118
+ background: var(--qt-rp-bg);
5119
+ font-family: var(--qt-rp-ooc-font);
5120
+ padding: var(--qt-rp-ooc-padding);
5121
+ border-radius: var(--qt-rp-ooc-radius);
5122
+ display: inline;
5123
+ }
5124
+
5125
+ :is(p, blockquote, h1, h2, h3, h4, h5, h6):is(.qt-chat-narration, .qt-chat-ooc, .qt-chat-inner-monologue) {
5126
+ display: block;
5127
+ }
5128
+
5129
+ li:is(.qt-chat-narration, .qt-chat-ooc, .qt-chat-inner-monologue) {
5130
+ display: list-item;
5131
+ }
5132
+
5061
5133
  /**
5062
5134
  * Gallery tile source caption — a scrim and two lines of small text laid
5063
5135
  * over the foot of a photo-gallery tile, saying where the picture comes from
@@ -5395,3 +5467,16 @@
5395
5467
  transparent calc(50% + 0.75px)
5396
5468
  );
5397
5469
  }
5470
+
5471
+ /* ============================================================================
5472
+ REDUCED MOTION — every theme honours the OS setting
5473
+ ============================================================================ */
5474
+ @media (prefers-reduced-motion: reduce) {
5475
+ *,
5476
+ *::before,
5477
+ *::after {
5478
+ animation-duration: 0.001ms !important;
5479
+ animation-iteration-count: 1 !important;
5480
+ transition-duration: 0.001ms !important;
5481
+ }
5482
+ }
package/src/css/quilltap-defaults.css CHANGED
@@ -54,11 +54,11 @@
54
54
  --theme-ring: hsl(225 65% 48%);
55
55
 
56
56
  /* Status colors */
57
- --theme-success: hsl(152 60% 38%);
57
+ --theme-success: hsl(152 60% 31%);
58
58
  --theme-success-foreground: hsl(0 0% 100%);
59
- --theme-warning: hsl(38 90% 46%);
60
- --theme-warning-foreground: hsl(0 0% 10%);
61
- --theme-info: hsl(210 75% 48%);
59
+ --theme-warning: hsl(38 90% 32%);
60
+ --theme-warning-foreground: hsl(0 0% 100%);
61
+ --theme-info: hsl(210 75% 44.5%);
62
62
  --theme-info-foreground: hsl(0 0% 100%);
63
63
 
64
64
  /* Chat-specific colors */
@@ -99,24 +99,24 @@
99
99
  --theme-secondary-foreground: hsl(225 10% 85%);
100
100
 
101
101
  --theme-muted: hsl(225 12% 14%);
102
- --theme-muted-foreground: hsl(225 8% 56%);
102
+ --theme-muted-foreground: hsl(225 8% 58%);
103
103
 
104
104
  --theme-accent: hsl(225 14% 18%);
105
105
  --theme-accent-foreground: hsl(225 10% 85%);
106
106
 
107
- --theme-destructive: hsl(0 60% 54%);
108
- --theme-destructive-foreground: hsl(0 0% 100%);
107
+ --theme-destructive: hsl(0 60% 62%);
108
+ --theme-destructive-foreground: hsl(225 18% 9%);
109
109
 
110
110
  --theme-border: hsl(225 12% 20%);
111
111
  --theme-input: hsl(225 12% 20%);
112
112
  --theme-ring: hsl(225 55% 60%);
113
113
 
114
114
  --theme-success: hsl(152 55% 44%);
115
- --theme-success-foreground: hsl(0 0% 100%);
115
+ --theme-success-foreground: hsl(225 18% 9%);
116
116
  --theme-warning: hsl(38 85% 52%);
117
117
  --theme-warning-foreground: hsl(0 0% 10%);
118
118
  --theme-info: hsl(210 70% 58%);
119
- --theme-info-foreground: hsl(0 0% 100%);
119
+ --theme-info-foreground: hsl(225 18% 9%);
120
120
 
121
121
  --theme-chat-user: hsl(225 60% 56%);
122
122
  --theme-chat-user-foreground: hsl(0 0% 100%);