@quilltap/theme-storybook 1.0.87 → 1.0.88

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 (3) hide show
  1. package/dist/index.css +45 -0
  2. package/package.json +1 -1
  3. package/src/css/qt-components.css +55 -0
package/dist/index.css CHANGED
@@ -4091,6 +4091,51 @@ body {
4091
4091
  .qt-rp-font-script {
4092
4092
  font-family: var(--qt-rp-font-script, "Segoe Script", "Brush Script MT", cursive);
4093
4093
  }
4094
+ .qt-chat-dialogue {
4095
+ --qt-rp-fg: var(--qt-rp-dialogue-color);
4096
+ --qt-rp-bg: var(--qt-rp-dialogue-bg);
4097
+ color: var(--qt-rp-fg);
4098
+ background: var(--qt-rp-bg);
4099
+ }
4100
+ .qt-chat-message-user .qt-chat-dialogue {
4101
+ --qt-rp-fg: var(--qt-rp-user-dialogue-color, var(--qt-chat-user-fg));
4102
+ }
4103
+ .qt-chat-narration {
4104
+ --qt-rp-fg: var(--qt-rp-narration-color);
4105
+ --qt-rp-bg: var(--qt-rp-narration-bg);
4106
+ color: var(--qt-rp-fg);
4107
+ background: var(--qt-rp-bg);
4108
+ font-style: var(--qt-rp-narration-style);
4109
+ padding: var(--qt-rp-narration-padding);
4110
+ border-radius: var(--qt-rp-narration-radius);
4111
+ display: inline;
4112
+ }
4113
+ .qt-chat-inner-monologue {
4114
+ --qt-rp-fg: var(--qt-rp-inner-monologue-color);
4115
+ --qt-rp-bg: var(--qt-rp-inner-monologue-bg);
4116
+ color: var(--qt-rp-fg);
4117
+ background: var(--qt-rp-bg);
4118
+ font-style: var(--qt-rp-inner-monologue-style);
4119
+ padding: var(--qt-rp-inner-monologue-padding);
4120
+ border-radius: var(--qt-rp-inner-monologue-radius);
4121
+ display: inline;
4122
+ }
4123
+ .qt-chat-ooc {
4124
+ --qt-rp-fg: var(--qt-rp-ooc-color);
4125
+ --qt-rp-bg: var(--qt-rp-ooc-bg);
4126
+ color: var(--qt-rp-fg);
4127
+ background: var(--qt-rp-bg);
4128
+ font-family: var(--qt-rp-ooc-font);
4129
+ padding: var(--qt-rp-ooc-padding);
4130
+ border-radius: var(--qt-rp-ooc-radius);
4131
+ display: inline;
4132
+ }
4133
+ :is(p, blockquote, h1, h2, h3, h4, h5, h6):is(.qt-chat-narration, .qt-chat-ooc, .qt-chat-inner-monologue) {
4134
+ display: block;
4135
+ }
4136
+ li:is(.qt-chat-narration, .qt-chat-ooc, .qt-chat-inner-monologue) {
4137
+ display: list-item;
4138
+ }
4094
4139
  .qt-gallery-caption {
4095
4140
  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
4141
  color: var(--qt-gallery-caption-fg, #fff);
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.88",
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
@@ -5058,6 +5058,61 @@
5058
5058
  .qt-rp-font-display { font-family: var(--qt-rp-font-display, var(--theme-font-serif, Georgia, "Times New Roman", serif)); }
5059
5059
  .qt-rp-font-script { font-family: var(--qt-rp-font-script, "Segoe Script", "Brush Script MT", cursive); }
5060
5060
 
5061
+ /* Legacy chip classes (dialogue / narration / inner monologue / OOC). As above,
5062
+ the app scopes these under .qt-chat-message-content. */
5063
+ .qt-chat-dialogue {
5064
+ --qt-rp-fg: var(--qt-rp-dialogue-color);
5065
+ --qt-rp-bg: var(--qt-rp-dialogue-bg);
5066
+ color: var(--qt-rp-fg);
5067
+ background: var(--qt-rp-bg);
5068
+ }
5069
+
5070
+ /* Dialogue in a user message follows the bubble's own foreground. */
5071
+ .qt-chat-message-user .qt-chat-dialogue {
5072
+ --qt-rp-fg: var(--qt-rp-user-dialogue-color, var(--qt-chat-user-fg));
5073
+ }
5074
+
5075
+ .qt-chat-narration {
5076
+ --qt-rp-fg: var(--qt-rp-narration-color);
5077
+ --qt-rp-bg: var(--qt-rp-narration-bg);
5078
+ color: var(--qt-rp-fg);
5079
+ background: var(--qt-rp-bg);
5080
+ font-style: var(--qt-rp-narration-style);
5081
+ padding: var(--qt-rp-narration-padding);
5082
+ border-radius: var(--qt-rp-narration-radius);
5083
+ display: inline;
5084
+ }
5085
+
5086
+ .qt-chat-inner-monologue {
5087
+ --qt-rp-fg: var(--qt-rp-inner-monologue-color);
5088
+ --qt-rp-bg: var(--qt-rp-inner-monologue-bg);
5089
+ color: var(--qt-rp-fg);
5090
+ background: var(--qt-rp-bg);
5091
+ font-style: var(--qt-rp-inner-monologue-style);
5092
+ padding: var(--qt-rp-inner-monologue-padding);
5093
+ border-radius: var(--qt-rp-inner-monologue-radius);
5094
+ display: inline;
5095
+ }
5096
+
5097
+ .qt-chat-ooc {
5098
+ --qt-rp-fg: var(--qt-rp-ooc-color);
5099
+ --qt-rp-bg: var(--qt-rp-ooc-bg);
5100
+ color: var(--qt-rp-fg);
5101
+ background: var(--qt-rp-bg);
5102
+ font-family: var(--qt-rp-ooc-font);
5103
+ padding: var(--qt-rp-ooc-padding);
5104
+ border-radius: var(--qt-rp-ooc-radius);
5105
+ display: inline;
5106
+ }
5107
+
5108
+ :is(p, blockquote, h1, h2, h3, h4, h5, h6):is(.qt-chat-narration, .qt-chat-ooc, .qt-chat-inner-monologue) {
5109
+ display: block;
5110
+ }
5111
+
5112
+ li:is(.qt-chat-narration, .qt-chat-ooc, .qt-chat-inner-monologue) {
5113
+ display: list-item;
5114
+ }
5115
+
5061
5116
  /**
5062
5117
  * Gallery tile source caption — a scrim and two lines of small text laid
5063
5118
  * over the foot of a photo-gallery tile, saying where the picture comes from