@signal9/era-ui 4.13.0 → 4.14.1

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 (23) hide show
  1. package/dist/ai/conversation/conversation-empty-state.svelte +1 -1
  2. package/dist/ai/error-panel/error-panel.svelte +1 -1
  3. package/dist/ai/message/message-content.svelte +1 -1
  4. package/dist/ai/prompt-input/prompt-input-textarea.svelte +1 -1
  5. package/dist/ai/response/response.svelte +1 -1
  6. package/dist/ai/swarm/swarm-artifact.svelte +1 -1
  7. package/dist/ai/tool/tool-output.svelte +1 -1
  8. package/dist/apps/llm-shell/llm-shell.svelte +1 -1
  9. package/dist/dev/audit/audits/index.d.ts +2 -1
  10. package/dist/dev/audit/audits/index.js +3 -1
  11. package/dist/dev/audit/audits/prose-leading.d.ts +2 -0
  12. package/dist/dev/audit/audits/prose-leading.js +91 -0
  13. package/dist/era-ui.css +1 -1
  14. package/dist/os/notification-center.svelte +3 -1
  15. package/dist/os/toast.svelte +1 -1
  16. package/dist/styles/density.css +19 -0
  17. package/dist/styles/index.css +4 -0
  18. package/dist/styles/themes.css +137 -91
  19. package/dist/ui/accordion/accordion-content.svelte +1 -1
  20. package/dist/ui/alert-dialog/alert-dialog-description.svelte +1 -1
  21. package/dist/ui/code-block/code-block.svelte +1 -1
  22. package/dist/ui/dialog/dialog-description.svelte +1 -1
  23. package/package.json +1 -1
package/dist/os/notification-center.svelte CHANGED
@@ -83,7 +83,9 @@
83
83
  <p class="min-w-0 flex-1 truncate text-body text-bright">{n.title}</p>
84
84
  <span class="shrink-0 text-body text-muted tabular-nums">{ago(n.createdAt)}</span>
85
85
  </div>
86
- {#if n.body}<p class="mt-0.5 text-body break-words text-muted">{n.body}</p>{/if}
86
+ {#if n.body}<p class="mt-0.5 text-body leading-body break-words text-muted">
87
+ {n.body}
88
+ </p>{/if}
87
89
  </div>
88
90
  </div>
89
91
  {:else}
package/dist/os/toast.svelte CHANGED
@@ -44,7 +44,7 @@
44
44
  <X />
45
45
  </Button>
46
46
  </div>
47
- {#if n.body}<p class="mt-0.5 text-body break-words text-muted">{n.body}</p>{/if}
47
+ {#if n.body}<p class="mt-0.5 text-body leading-body break-words text-muted">{n.body}</p>{/if}
48
48
  {#if n.actions.length}
49
49
  <div class="mt-(--era-inset-sm) flex flex-wrap gap-(--era-gap)">
50
50
  {#each n.actions as action (action.label)}
package/dist/styles/density.css CHANGED
@@ -154,6 +154,25 @@
154
154
  /* Inter-item gap */
155
155
  --era-gap: calc(var(--era-sp) * 0.5); /* 4/5/6 */
156
156
 
157
+ /* PROSE LEADING — the line-height of text that WRAPS.
158
+ *
159
+ * Single-line control text has no leading question: era-text-trim collapses
160
+ * the line box to 1 and centres the ink, which is the whole point of it.
161
+ * Wrapping text is the opposite problem — the space BETWEEN lines is the
162
+ * only thing holding the paragraph apart, and it must never inherit a
163
+ * control's line-height (a `leading-none` row with a wrapping child sets its
164
+ * lines colliding).
165
+ *
166
+ * A ratio, not a length: leading scales with the type, not with --era-sp, so
167
+ * it stays a single number across every density mode — dense's 12px text
168
+ * gets 19.2px lines, balanced's 14px gets 22.4px, both the same paragraph
169
+ * colour. It replaces a 50/50 split of Tailwind's leading-relaxed (1.625)
170
+ * and leading-normal (1.5) that had grown between the prose components; 1.6
171
+ * is between them and is the value long-form UI text is usually set at.
172
+ *
173
+ * Public name: `leading-body`, the pair to `text-body`. */
174
+ --era-leading: 1.6;
175
+
157
176
  /* Content insets — text-symmetric padding (vertical centering, reused as
158
177
  horizontal only where the content is a single square glyph). */
159
178
  --era-inset-xxs: max(0px, calc((var(--era-h-xxs) - var(--era-text)) / 2)); /* 3/3/4/6 */
package/dist/styles/index.css CHANGED
@@ -298,6 +298,10 @@
298
298
  @theme inline {
299
299
  /* Density-derived body size: `text-body` replaces text-[length:var(--era-text)] */
300
300
  --text-body: var(--era-text);
301
+ /* Prose leading — `leading-body` is the pair to `text-body`, and every piece
302
+ * of text in the library that can wrap to a second line carries it. Enforced
303
+ * at runtime by typography/prose-leading. */
304
+ --leading-body: var(--era-leading);
301
305
  /* Radius ladder — Tailwind's own rounded-* names now walk era's concentric
302
306
  * ladder (rd-T = rd-xs + (h-T − h-xs)/2), ride the corners toggle, and
303
307
  * collapse to 0 on square. rounded-item is the menu-row radius
package/dist/styles/themes.css CHANGED
@@ -31,26 +31,72 @@
31
31
  .dark {
32
32
  color-scheme: dark;
33
33
 
34
- --color-1: oklch(0.162 0 0);
35
- --color-2: oklch(0.195 0 0);
36
- --color-3: oklch(0.254 0 0);
37
- --color-4: oklch(0.302 0 0);
38
- --color-5: oklch(0.348 0 0);
39
- --color-6: oklch(0.396 0 0);
40
- --color-7: oklch(0.459 0 0);
41
- --color-8: oklch(0.549 0 0);
42
- --color-9: oklch(0.649 0 0);
43
- --color-10: oklch(0.72 0 0);
44
- --color-11: oklch(0.863 0 0);
45
- --color-12: oklch(0.933 0 0);
34
+ --color-1: oklch(0.162 0 none);
35
+ --color-2: oklch(0.195 0 none);
36
+ --color-3: oklch(0.254 0 none);
37
+ --color-4: oklch(0.302 0 none);
38
+ --color-5: oklch(0.348 0 none);
39
+ --color-6: oklch(0.396 0 none);
40
+ --color-7: oklch(0.459 0 none);
41
+ --color-8: oklch(0.549 0 none);
42
+ --color-9: oklch(0.649 0 none);
43
+ --color-10: oklch(0.72 0 none);
44
+ --color-11: oklch(0.863 0 none);
45
+ --color-12: oklch(0.933 0 none); /* hue `none`, not 0 — see below */
46
46
 
47
47
  /* Semantic tokens */
48
48
  --color-border: var(--color-5);
49
49
  --color-surface: var(--color-2);
50
- --color-hover: oklch(0.25 0 0);
50
+ --color-hover: oklch(0.25 0 none);
51
51
  --color-fg: var(--color-11);
52
- --color-bright: var(--color-12);
53
- --color-muted: var(--color-10);
52
+ /* EMPHASIS INK IS TINTED BY THE THEME, not pinned to the top of the ramp.
53
+ *
54
+ * Step 12 is the ramp's extreme, and at the extreme a neutral ramp has run out
55
+ * of colour — so `bright` came out pure white on the dark themes and pure
56
+ * black on signalnine light. That is the one place a themed UI should NOT go
57
+ * achromatic: bright is the emphasis ink (headings, titles, the sentence you
58
+ * are meant to read first), so it is the text carrying the most identity and
59
+ * it was carrying none.
60
+ *
61
+ * It now takes 12% of --color-primary — the theme's own accent, which is also
62
+ * what the accent picker writes, so choosing an accent tints the emphasis text
63
+ * with it live. 12% is a cast, not a colour: it moves lightness by ~0.02 (the
64
+ * default dark page keeps 11.6:1) and lands chroma near 0.013, which reads as
65
+ * "warm white" or "blue-black" rather than as a coloured heading.
66
+ *
67
+ * A theme whose accent IS neutral (the default) is unchanged by construction —
68
+ * there is no hue to lend — which is the correct behaviour rather than an
69
+ * exception.
70
+ *
71
+ * The achromatic step 12s are written with hue `none` rather than hue 0, and
72
+ * that is load-bearing: hue 0 is a REAL hue (red), so oklch interpolation
73
+ * walks it round to the accent's the short way and a black-plus-blue mix came
74
+ * out magenta (signalnine light's #000 landed on hue 349). `none` marks the
75
+ * hue as powerless — which it is at chroma 0 — so the mix adopts the accent's
76
+ * hue instead of travelling to it. The colours themselves are unchanged
77
+ * everywhere else: at chroma 0 the hue paints nothing. */
78
+ --color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
79
+ /* Muted is body copy, not a de-emphasis wash — the /text page sets whole
80
+ * paragraphs in it — so it does NOT sit flat on step 10: it leans 40% of the
81
+ * way to --color-bright. Step 10 alone read as "greyed out" at paragraph
82
+ * length (7.80:1 on the default dark page); the lean lands it at 10.43:1, and
83
+ * the ordering muted < fg < bright still holds by a clear margin (0.80 / 0.86
84
+ * / 0.93 in dark), so the mixed-tone case — muted prose beside a bright
85
+ * literal — keeps all three of its levels.
86
+ *
87
+ * It aims at BRIGHT rather than fg on purpose: fg is the ink of controls and
88
+ * labels, bright is the ink of the sentence you are meant to read, and body
89
+ * copy belongs with the second one. It also means muted inherits the theme's
90
+ * tint through bright, so prose is never a neutral grey on a themed page.
91
+ *
92
+ * The lean is toward a TOKEN rather than a fixed lightness so it mirrors
93
+ * correctly in light mode (muted DARKENS toward bright) and keeps each theme's
94
+ * own hue family — the tinted scales interpolate between two steps of their
95
+ * own ramp, never toward neutral.
96
+ *
97
+ * signalnine sets its muted by hand from measured source colours and is
98
+ * deliberately exempt. */
99
+ --color-muted: color-mix(in oklch, var(--color-10) 60%, var(--color-bright));
54
100
  /* Inline link ink. Declared once here and inherited by every theme —
55
101
  * var(--color-bright) resolves in the element's own context, so a theme only
56
102
  * names this if it wants links to differ from emphasis text (signalnine
@@ -60,7 +106,7 @@
60
106
  /* Accent tokens — override these to theme the library */
61
107
  --color-primary: var(--color-fg);
62
108
  --color-primary-fg: var(--color-1);
63
- --color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
109
+ --color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, oklch(0 0 none));
64
110
  /* Destructive carries LIGHT text — a white glyph on the red fill.
65
111
  *
66
112
  * The reference terminal app's danger red, matched exactly: era had landed on
@@ -77,7 +123,7 @@
77
123
  * needs but not the 4.5:1 body copy would. Pushing the red LIGHTER widens
78
124
  * that gap; pushing it darker closes it. */
79
125
  --color-destructive: oklch(0.65 0.2 25); /* #f14d4c */
80
- --color-destructive-fg: oklch(0.96 0 0);
126
+ --color-destructive-fg: oklch(0.96 0 none);
81
127
  /* The semantic trio is one family: same lightness and chroma as destructive,
82
128
  * varying only in hue, so a success fill and a destructive fill carry the same
83
129
  * weight — which is what makes the pane's traffic lights read as three lights
@@ -91,9 +137,9 @@
91
137
  * the gap: measured against the page, the three now sit at 5.9 / 7.0 / 9.3
92
138
  * where they sat at 5.9 / 7.0 / 11.1. */
93
139
  --color-success: oklch(0.65 0.2 145);
94
- --color-success-fg: oklch(0.96 0 0);
140
+ --color-success-fg: oklch(0.96 0 none);
95
141
  --color-warning: oklch(0.75 0.15 85);
96
- --color-warning-fg: oklch(0.162 0 0);
142
+ --color-warning-fg: oklch(0.162 0 none);
97
143
  }
98
144
 
99
145
  /* -------------------------------------------------- */
@@ -103,75 +149,75 @@
103
149
  :root:not(.dark) {
104
150
  color-scheme: light;
105
151
 
106
- --color-1: oklch(0.933 0 0);
107
- --color-2: oklch(0.863 0 0);
108
- --color-3: oklch(0.72 0 0);
109
- --color-4: oklch(0.649 0 0);
110
- --color-5: oklch(0.549 0 0);
111
- --color-6: oklch(0.459 0 0);
112
- --color-7: oklch(0.396 0 0);
113
- --color-8: oklch(0.348 0 0);
114
- --color-9: oklch(0.302 0 0);
115
- --color-10: oklch(0.254 0 0);
116
- --color-11: oklch(0.195 0 0);
117
- --color-12: oklch(0.162 0 0);
152
+ --color-1: oklch(0.933 0 none);
153
+ --color-2: oklch(0.863 0 none);
154
+ --color-3: oklch(0.72 0 none);
155
+ --color-4: oklch(0.649 0 none);
156
+ --color-5: oklch(0.549 0 none);
157
+ --color-6: oklch(0.459 0 none);
158
+ --color-7: oklch(0.396 0 none);
159
+ --color-8: oklch(0.348 0 none);
160
+ --color-9: oklch(0.302 0 none);
161
+ --color-10: oklch(0.254 0 none);
162
+ --color-11: oklch(0.195 0 none);
163
+ --color-12: oklch(0.162 0 none); /* hue `none`, not 0 — see below */
118
164
 
119
165
  --color-border: var(--color-5);
120
166
  --color-surface: var(--color-2);
121
- --color-hover: oklch(0.8 0 0);
167
+ --color-hover: oklch(0.8 0 none);
122
168
  --color-fg: var(--color-11);
123
- --color-bright: var(--color-12);
124
- --color-muted: var(--color-10);
169
+ --color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
170
+ --color-muted: color-mix(in oklch, var(--color-10) 60%, var(--color-bright));
125
171
 
126
172
  /* Accent tokens */
127
173
  --color-primary: var(--color-fg);
128
174
  --color-primary-fg: var(--color-1);
129
- --color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
175
+ --color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, oklch(0 0 none));
130
176
  --color-destructive: oklch(0.65 0.2 25); /* #f14d4c */
131
- --color-destructive-fg: oklch(0.98 0 0);
177
+ --color-destructive-fg: oklch(0.98 0 none);
132
178
  /* Chroma matched to destructive like the dark theme; the LIGHTNESSES stay
133
179
  * where they are, because here they carry white text — green at the red's
134
180
  * 0.65 drops to 2.99:1 against white, under the 3:1 a filled glyph needs. */
135
181
  --color-success: oklch(0.5 0.2 145);
136
- --color-success-fg: oklch(0.98 0 0);
182
+ --color-success-fg: oklch(0.98 0 none);
137
183
  --color-warning: oklch(0.72 0.15 85);
138
- --color-warning-fg: oklch(0.162 0 0);
184
+ --color-warning-fg: oklch(0.162 0 none);
139
185
  }
140
186
  }
141
187
 
142
188
  .light {
143
189
  color-scheme: light;
144
190
 
145
- --color-1: oklch(0.933 0 0);
146
- --color-2: oklch(0.863 0 0);
147
- --color-3: oklch(0.72 0 0);
148
- --color-4: oklch(0.649 0 0);
149
- --color-5: oklch(0.549 0 0);
150
- --color-6: oklch(0.459 0 0);
151
- --color-7: oklch(0.396 0 0);
152
- --color-8: oklch(0.348 0 0);
153
- --color-9: oklch(0.302 0 0);
154
- --color-10: oklch(0.254 0 0);
155
- --color-11: oklch(0.195 0 0);
156
- --color-12: oklch(0.162 0 0);
191
+ --color-1: oklch(0.933 0 none);
192
+ --color-2: oklch(0.863 0 none);
193
+ --color-3: oklch(0.72 0 none);
194
+ --color-4: oklch(0.649 0 none);
195
+ --color-5: oklch(0.549 0 none);
196
+ --color-6: oklch(0.459 0 none);
197
+ --color-7: oklch(0.396 0 none);
198
+ --color-8: oklch(0.348 0 none);
199
+ --color-9: oklch(0.302 0 none);
200
+ --color-10: oklch(0.254 0 none);
201
+ --color-11: oklch(0.195 0 none);
202
+ --color-12: oklch(0.162 0 none); /* hue `none`, not 0 — see below */
157
203
 
158
204
  --color-border: var(--color-5);
159
205
  --color-surface: var(--color-2);
160
- --color-hover: oklch(0.8 0 0);
206
+ --color-hover: oklch(0.8 0 none);
161
207
  --color-fg: var(--color-11);
162
- --color-bright: var(--color-12);
163
- --color-muted: var(--color-10);
208
+ --color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
209
+ --color-muted: color-mix(in oklch, var(--color-10) 60%, var(--color-bright));
164
210
 
165
211
  /* Accent tokens */
166
212
  --color-primary: var(--color-fg);
167
213
  --color-primary-fg: var(--color-1);
168
- --color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
214
+ --color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, oklch(0 0 none));
169
215
  --color-destructive: oklch(0.65 0.2 25); /* #f14d4c */
170
- --color-destructive-fg: oklch(0.98 0 0);
216
+ --color-destructive-fg: oklch(0.98 0 none);
171
217
  --color-success: oklch(0.5 0.17 145);
172
- --color-success-fg: oklch(0.98 0 0);
218
+ --color-success-fg: oklch(0.98 0 none);
173
219
  --color-warning: oklch(0.72 0.15 85);
174
- --color-warning-fg: oklch(0.162 0 0);
220
+ --color-warning-fg: oklch(0.162 0 none);
175
221
  }
176
222
 
177
223
  /* -------------------------------------------------- */
@@ -203,8 +249,8 @@
203
249
  --color-surface: var(--color-2);
204
250
  --color-hover: oklch(0.252 0.024 56);
205
251
  --color-fg: var(--color-11);
206
- --color-bright: var(--color-12);
207
- --color-muted: var(--color-10);
252
+ --color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
253
+ --color-muted: color-mix(in oklch, var(--color-10) 60%, var(--color-bright));
208
254
 
209
255
  /* Warm sandstone primary + unexpected turquoise support. */
210
256
  --color-primary: oklch(0.74 0.108 68);
@@ -247,12 +293,12 @@
247
293
  --color-surface: var(--color-2);
248
294
  --color-hover: oklch(0.81 0.022 73);
249
295
  --color-fg: var(--color-11);
250
- --color-bright: var(--color-12);
251
- --color-muted: var(--color-10);
296
+ --color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
297
+ --color-muted: color-mix(in oklch, var(--color-10) 60%, var(--color-bright));
252
298
 
253
299
  --color-primary: oklch(0.515 0.16 38);
254
300
  --color-primary-fg: oklch(0.96 0.014 78);
255
- --color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
301
+ --color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, oklch(0 0 none));
256
302
  --color-destructive: oklch(0.575 0.22 28);
257
303
  --color-destructive-fg: oklch(0.98 0.012 78);
258
304
  --color-success: oklch(0.5 0.13 158);
@@ -282,12 +328,12 @@
282
328
  --color-surface: var(--color-2);
283
329
  --color-hover: oklch(0.81 0.022 73);
284
330
  --color-fg: var(--color-11);
285
- --color-bright: var(--color-12);
286
- --color-muted: var(--color-10);
331
+ --color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
332
+ --color-muted: color-mix(in oklch, var(--color-10) 60%, var(--color-bright));
287
333
 
288
334
  --color-primary: oklch(0.515 0.16 38);
289
335
  --color-primary-fg: oklch(0.96 0.014 78);
290
- --color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
336
+ --color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, oklch(0 0 none));
291
337
  --color-destructive: oklch(0.575 0.22 28);
292
338
  --color-destructive-fg: oklch(0.98 0.012 78);
293
339
  --color-success: oklch(0.5 0.13 158);
@@ -320,8 +366,8 @@
320
366
  --color-surface: var(--color-2);
321
367
  --color-hover: color-mix(in oklch, var(--color-3) 80%, var(--color-2));
322
368
  --color-fg: var(--color-11);
323
- --color-bright: var(--color-12);
324
- --color-muted: var(--color-10);
369
+ --color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
370
+ --color-muted: color-mix(in oklch, var(--color-10) 60%, var(--color-bright));
325
371
 
326
372
  --color-primary: oklch(0.8 0.034 54);
327
373
  --color-primary-fg: var(--color-1);
@@ -358,12 +404,12 @@
358
404
  --color-surface: var(--color-2);
359
405
  --color-hover: oklch(0.88 0.016 72);
360
406
  --color-fg: var(--color-11);
361
- --color-bright: var(--color-12);
362
- --color-muted: var(--color-10);
407
+ --color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
408
+ --color-muted: color-mix(in oklch, var(--color-10) 60%, var(--color-bright));
363
409
 
364
410
  --color-primary: oklch(0.55 0.12 58);
365
411
  --color-primary-fg: oklch(0.97 0.008 80);
366
- --color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
412
+ --color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, oklch(0 0 none));
367
413
  --color-destructive: oklch(0.59 0.18 32);
368
414
  --color-destructive-fg: oklch(0.98 0.008 80);
369
415
  --color-success: oklch(0.54 0.11 164);
@@ -393,12 +439,12 @@
393
439
  --color-surface: var(--color-2);
394
440
  --color-hover: oklch(0.88 0.016 72);
395
441
  --color-fg: var(--color-11);
396
- --color-bright: var(--color-12);
397
- --color-muted: var(--color-10);
442
+ --color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
443
+ --color-muted: color-mix(in oklch, var(--color-10) 60%, var(--color-bright));
398
444
 
399
445
  --color-primary: oklch(0.55 0.12 58);
400
446
  --color-primary-fg: oklch(0.97 0.008 80);
401
- --color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
447
+ --color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, oklch(0 0 none));
402
448
  --color-destructive: oklch(0.59 0.18 32);
403
449
  --color-destructive-fg: oklch(0.98 0.008 80);
404
450
  --color-success: oklch(0.54 0.11 164);
@@ -463,7 +509,7 @@
463
509
  --color-surface: var(--color-2);
464
510
  --color-hover: oklch(0.255 0.009 258);
465
511
  --color-fg: var(--color-11);
466
- --color-bright: var(--color-12);
512
+ --color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
467
513
  /* Tomorrow's comment grey, which is what it uses for de-emphasised text. */
468
514
  --color-muted: var(--color-8);
469
515
  /* The link blue every imageboard reader knows. */
@@ -473,7 +519,7 @@
473
519
  * — the page colour — rather than white. */
474
520
  --color-primary: oklch(0.6975 0.0551 244.3); /* #81a2be blue */
475
521
  --color-primary-fg: oklch(0.168 0.005 248);
476
- --color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
522
+ --color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, oklch(0 0 none));
477
523
  --color-destructive: oklch(0.6308 0.1298 21.4); /* #cc6666 red */
478
524
  --color-destructive-fg: oklch(0.168 0.005 248);
479
525
  --color-success: oklch(0.7733 0.1095 113.4); /* #b5bd68 green */
@@ -535,7 +581,7 @@
535
581
  :root[data-theme='signalnine']:not(.dark) {
536
582
  color-scheme: light;
537
583
 
538
- --color-1: oklch(1 0 0); /* #ffffff page */
584
+ --color-1: oklch(1 0 none); /* #ffffff page */
539
585
  --color-2: oklch(0.9439 0.0251 271.14); /* #e6ecfe card fill */
540
586
  --color-3: oklch(0.887 0.0368 265.13); /* #cedaf3 border */
541
587
  --color-4: oklch(0.844 0.0447 265.6); /* #bcccea */
@@ -543,10 +589,10 @@
543
589
  --color-6: oklch(0.676 0.078 263);
544
590
  --color-7: oklch(0.593 0.0975 260.33); /* #5c7eb8 muted text, darkened */
545
591
  --color-8: oklch(0.545 0.126 262);
546
- --color-9: oklch(0.51 0 0); /* #666666 */
592
+ --color-9: oklch(0.51 0 none); /* #666666 */
547
593
  --color-10: oklch(0.358 0.1534 266.07); /* #17318b link text, darkened */
548
594
  --color-11: oklch(0.16 0.008 266);
549
- --color-12: oklch(0 0 0); /* #000000 body text */
595
+ --color-12: oklch(0 0 none); /* #000000 body text (hue `none` — see --color-bright) */
550
596
 
551
597
  /* Repointed off the conventional steps on purpose — these name the roles
552
598
  * yahoo.co.jp actually paints, so each points at the step holding its
@@ -557,19 +603,19 @@
557
603
  --color-surface: var(--color-2);
558
604
  --color-hover: oklch(0.97 0.014 268.5); /* #f1f5ff */
559
605
  --color-fg: var(--color-11);
560
- --color-bright: var(--color-12);
606
+ --color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
561
607
  --color-muted: var(--color-7);
562
608
  --color-link: var(--color-10);
563
609
  /* Cards read --era-surface-bg, which the surface contract defines as
564
610
  * --color-2 — so the card fill follows from the scale, no override. */
565
611
 
566
612
  --color-primary: oklch(0.566 0.222 265.8); /* #3766f6 the CTA blue, darkened */
567
- --color-primary-fg: oklch(1 0 0);
568
- --color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
613
+ --color-primary-fg: oklch(1 0 none);
614
+ --color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, oklch(0 0 none));
569
615
  --color-destructive: oklch(0.59 0.242 27.7); /* #eb0013 */
570
- --color-destructive-fg: oklch(1 0 0);
616
+ --color-destructive-fg: oklch(1 0 none);
571
617
  --color-success: oklch(0.58 0.15 152);
572
- --color-success-fg: oklch(1 0 0);
618
+ --color-success-fg: oklch(1 0 none);
573
619
  --color-warning: oklch(0.76 0.145 80);
574
620
  --color-warning-fg: oklch(0.16 0.008 266);
575
621
  }
@@ -578,7 +624,7 @@
578
624
  [data-theme='signalnine'].light {
579
625
  color-scheme: light;
580
626
 
581
- --color-1: oklch(1 0 0); /* #ffffff page */
627
+ --color-1: oklch(1 0 none); /* #ffffff page */
582
628
  --color-2: oklch(0.9439 0.0251 271.14); /* #e6ecfe card fill */
583
629
  --color-3: oklch(0.887 0.0368 265.13); /* #cedaf3 border */
584
630
  --color-4: oklch(0.844 0.0447 265.6); /* #bcccea */
@@ -586,10 +632,10 @@
586
632
  --color-6: oklch(0.676 0.078 263);
587
633
  --color-7: oklch(0.593 0.0975 260.33); /* #5c7eb8 muted text, darkened */
588
634
  --color-8: oklch(0.545 0.126 262);
589
- --color-9: oklch(0.51 0 0); /* #666666 */
635
+ --color-9: oklch(0.51 0 none); /* #666666 */
590
636
  --color-10: oklch(0.358 0.1534 266.07); /* #17318b link text, darkened */
591
637
  --color-11: oklch(0.16 0.008 266);
592
- --color-12: oklch(0 0 0); /* #000000 body text */
638
+ --color-12: oklch(0 0 none); /* #000000 body text (hue `none` — see --color-bright) */
593
639
 
594
640
  /* Repointed off the conventional steps on purpose — these name the roles
595
641
  * yahoo.co.jp actually paints, so each points at the step holding its
@@ -600,19 +646,19 @@
600
646
  --color-surface: var(--color-2);
601
647
  --color-hover: oklch(0.97 0.014 268.5); /* #f1f5ff */
602
648
  --color-fg: var(--color-11);
603
- --color-bright: var(--color-12);
649
+ --color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
604
650
  --color-muted: var(--color-7);
605
651
  --color-link: var(--color-10);
606
652
  /* Cards read --era-surface-bg, which the surface contract defines as
607
653
  * --color-2 — so the card fill follows from the scale, no override. */
608
654
 
609
655
  --color-primary: oklch(0.566 0.222 265.8); /* #3766f6 the CTA blue, darkened */
610
- --color-primary-fg: oklch(1 0 0);
611
- --color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
656
+ --color-primary-fg: oklch(1 0 none);
657
+ --color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, oklch(0 0 none));
612
658
  --color-destructive: oklch(0.59 0.242 27.7); /* #eb0013 */
613
- --color-destructive-fg: oklch(1 0 0);
659
+ --color-destructive-fg: oklch(1 0 none);
614
660
  --color-success: oklch(0.58 0.15 152);
615
- --color-success-fg: oklch(1 0 0);
661
+ --color-success-fg: oklch(1 0 none);
616
662
  --color-warning: oklch(0.76 0.145 80);
617
663
  --color-warning-fg: oklch(0.16 0.008 266);
618
664
  }
package/dist/ui/accordion/accordion-content.svelte CHANGED
@@ -8,7 +8,7 @@
8
8
  <Accordion.Content
9
9
  bind:ref
10
10
  class={cn(
11
- 'overflow-hidden border-t border-divider-faded p-(--era-content-p) text-body leading-relaxed text-muted',
11
+ 'overflow-hidden border-t border-divider-faded p-(--era-content-p) text-body leading-body text-muted',
12
12
  className
13
13
  )}
14
14
  {...restProps}
package/dist/ui/alert-dialog/alert-dialog-description.svelte CHANGED
@@ -11,6 +11,6 @@
11
11
 
12
12
  <AlertDialog.Description
13
13
  bind:ref
14
- class={cn('text-body leading-normal text-muted', className)}
14
+ class={cn('text-body leading-body text-muted', className)}
15
15
  {...restProps}
16
16
  />
package/dist/ui/code-block/code-block.svelte CHANGED
@@ -45,7 +45,7 @@
45
45
  {...restProps}
46
46
  >
47
47
  <pre
48
- class="overflow-x-auto px-(--era-field-px) py-(--era-inset-md) pr-[calc(var(--era-field-px)+var(--era-h-sm)+var(--era-field-px))] font-mono text-body leading-relaxed text-fg"><code
48
+ class="overflow-x-auto px-(--era-field-px) py-(--era-inset-md) pr-[calc(var(--era-field-px)+var(--era-h-sm)+var(--era-field-px))] font-mono text-body leading-body text-fg"><code
49
49
  >{#if children}{@render children()}{:else}{code}{/if}</code
50
50
  ></pre>
51
51
  {#if copyable}
package/dist/ui/dialog/dialog-description.svelte CHANGED
@@ -7,6 +7,6 @@
7
7
 
8
8
  <Dialog.Description
9
9
  bind:ref
10
- class={cn('text-body leading-normal text-muted', className)}
10
+ class={cn('text-body leading-body text-muted', className)}
11
11
  {...restProps}
12
12
  />
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@signal9/era-ui",
3
- "version": "4.13.0",
3
+ "version": "4.14.1",
4
4
  "scripts": {
5
5
  "dev": "vite dev --host",
6
6
  "build": "vite build && npm run prepack",