@warmio/design 1.5.0 → 1.5.2

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 (5) hide show
  1. package/components.css +111 -82
  2. package/dist/logo.js +2 -2
  3. package/interfaces.css +4 -1
  4. package/package.json +1 -1
  5. package/theme.css +7 -6
package/components.css CHANGED
@@ -41,12 +41,12 @@
41
41
  /* border handled by variant shadows/tokens; no default regression border */
42
42
  }
43
43
 
44
-
45
44
  [data-warm-button]:focus-visible {
46
- box-shadow: 0 0 0 var(--button-focus-ring) color-mix(in oklab, var(--ring) var(--button-mix-50), transparent);
45
+ box-shadow: 0 0 0 var(--button-focus-ring)
46
+ color-mix(in oklab, var(--ring) var(--button-mix-50), transparent);
47
47
  }
48
48
 
49
- [data-warm-button][data-width="full"] {
49
+ [data-warm-button][data-width='full'] {
50
50
  width: var(--button-width-full);
51
51
  }
52
52
 
@@ -65,78 +65,78 @@
65
65
  }
66
66
 
67
67
  /* Variants (from cva + overrides + edge; tokens for color/shadow/radius) */
68
- [data-warm-button][data-variant="default"] {
68
+ [data-warm-button][data-variant='default'] {
69
69
  background-color: var(--button-primary-bg);
70
70
  background-image: var(--button-primary-gradient);
71
71
  color: var(--button-primary-foreground);
72
72
  box-shadow: var(--button-primary-shadow);
73
73
  /* no explicit border to avoid regression; shadow provides chrome */
74
74
  }
75
- [data-warm-button][data-variant="default"]:hover {
75
+ [data-warm-button][data-variant='default']:hover {
76
76
  background-color: var(--button-primary-hover);
77
77
  background-image: var(--button-primary-gradient-hover);
78
78
  }
79
- [data-warm-button][data-variant="default"]:active {
79
+ [data-warm-button][data-variant='default']:active {
80
80
  background-color: var(--button-primary-active);
81
81
  }
82
82
 
83
- [data-warm-button][data-variant="outline"] {
83
+ [data-warm-button][data-variant='outline'] {
84
84
  background-color: var(--background);
85
85
  box-shadow: var(--button-outline-shadow);
86
86
  border-style: none;
87
87
  }
88
- [data-warm-button][data-variant="outline"]:hover {
88
+ [data-warm-button][data-variant='outline']:hover {
89
89
  background-color: var(--muted);
90
90
  color: var(--foreground);
91
91
  }
92
- .dark [data-warm-button][data-variant="outline"] {
92
+ .dark [data-warm-button][data-variant='outline'] {
93
93
  background-color: var(--warm-surface-raised-dark, var(--input));
94
94
  box-shadow: var(--button-outline-shadow-inset);
95
95
  }
96
- .dark [data-warm-button][data-variant="outline"]:hover {
96
+ .dark [data-warm-button][data-variant='outline']:hover {
97
97
  background-color: var(--warm-surface-raised-hover-dark, var(--muted));
98
98
  }
99
- [data-warm-button][data-variant="outline"]:disabled {
99
+ [data-warm-button][data-variant='outline']:disabled {
100
100
  opacity: 1;
101
101
  background-color: var(--muted);
102
102
  color: var(--muted-foreground);
103
103
  box-shadow: var(--button-outline-shadow);
104
104
  }
105
- .dark [data-warm-button][data-variant="outline"]:disabled {
105
+ .dark [data-warm-button][data-variant='outline']:disabled {
106
106
  background-color: color-mix(in oklab, var(--input) var(--button-mix-20), transparent);
107
107
  box-shadow: var(--button-outline-shadow-inset);
108
108
  }
109
109
 
110
- [data-warm-button][data-variant="ghost"] {
110
+ [data-warm-button][data-variant='ghost'] {
111
111
  /* `background-color` (not the `background` shorthand): the shorthand
112
112
  implicitly resets `background-clip` to its initial `border-box`,
113
113
  diverging from the base recipe's `padding-box` (origin: `bg-clip-padding`
114
114
  with no resting-state Tailwind `bg-*` utility on ghost). */
115
115
  background-color: transparent;
116
116
  }
117
- [data-warm-button][data-variant="ghost"]:hover {
117
+ [data-warm-button][data-variant='ghost']:hover {
118
118
  background-color: var(--muted);
119
119
  color: var(--foreground);
120
120
  }
121
- .dark [data-warm-button][data-variant="ghost"]:hover {
121
+ .dark [data-warm-button][data-variant='ghost']:hover {
122
122
  background-color: color-mix(in oklab, var(--muted) var(--button-mix-50), transparent);
123
123
  }
124
124
 
125
- [data-warm-button][data-variant="destructive"] {
125
+ [data-warm-button][data-variant='destructive'] {
126
126
  background-color: color-mix(in oklab, var(--destructive) var(--button-mix-10), transparent);
127
127
  color: var(--destructive);
128
128
  }
129
- [data-warm-button][data-variant="destructive"]:hover {
129
+ [data-warm-button][data-variant='destructive']:hover {
130
130
  background-color: color-mix(in oklab, var(--destructive) var(--button-mix-20), transparent);
131
131
  }
132
- .dark [data-warm-button][data-variant="destructive"] {
132
+ .dark [data-warm-button][data-variant='destructive'] {
133
133
  background-color: color-mix(in oklab, var(--destructive) var(--button-mix-20), transparent);
134
134
  }
135
- .dark [data-warm-button][data-variant="destructive"]:hover {
135
+ .dark [data-warm-button][data-variant='destructive']:hover {
136
136
  background-color: color-mix(in oklab, var(--destructive) var(--button-mix-30), transparent);
137
137
  }
138
138
 
139
- [data-warm-button][data-variant="apple"] {
139
+ [data-warm-button][data-variant='apple'] {
140
140
  /* `!important` on color/background: legacy's `buttonVariantClasses.apple`
141
141
  overlay always applies after any presentation overlay in `cn()` order
142
142
  (e.g. promptCategory's own `bg-background`/`text-foreground`,
@@ -152,51 +152,58 @@
152
152
  color: var(--apple-button-foreground) !important;
153
153
  box-shadow: var(--button-outline-shadow);
154
154
  }
155
- button[data-warm-button][data-variant="apple"] {
155
+ button[data-warm-button][data-variant='apple'] {
156
156
  appearance: button;
157
157
  background-clip: padding-box;
158
158
  }
159
- [data-warm-button][data-variant="apple"]:hover {
160
- background-color: color-mix(in oklab, var(--apple-button-hover) var(--button-mix-90), transparent);
159
+ [data-warm-button][data-variant='apple']:hover {
160
+ background-color: color-mix(
161
+ in oklab,
162
+ var(--apple-button-hover) var(--button-mix-90),
163
+ transparent
164
+ );
161
165
  color: var(--apple-button-foreground);
162
166
  }
163
- [data-warm-button][data-variant="arrow"] {
167
+ [data-warm-button][data-variant='arrow'] {
164
168
  border-width: 0;
165
169
  text-decoration: underline;
166
170
  text-underline-offset: var(--button-underline-offset);
167
171
  }
168
- [data-warm-button][data-variant="arrow"] svg {
172
+ [data-warm-button][data-variant='arrow'] svg {
169
173
  width: var(--button-icon-size);
170
174
  height: var(--button-icon-size);
171
175
  transition: transform calc(var(--motion-duration-fast) * 2);
172
176
  }
173
- [data-warm-button][data-variant="arrow"]:hover svg {
174
- transform: translate(calc(var(--motion-distance-sm) / 2), calc(-1 * var(--motion-distance-sm) / 2));
177
+ [data-warm-button][data-variant='arrow']:hover svg {
178
+ transform: translate(
179
+ calc(var(--motion-distance-sm) / 2),
180
+ calc(-1 * var(--motion-distance-sm) / 2)
181
+ );
175
182
  }
176
183
  @media (prefers-reduced-motion: reduce) {
177
- [data-warm-button][data-variant="arrow"]:hover svg {
184
+ [data-warm-button][data-variant='arrow']:hover svg {
178
185
  transform: none;
179
186
  transition: none;
180
187
  }
181
188
  }
182
189
 
183
190
  /* Sizes (public only; presentation overrides suppressed by explicit size via data attr, matches old resolveButton) */
184
- [data-warm-button][data-size="default"] {
191
+ [data-warm-button][data-size='default'] {
185
192
  height: var(--button-height-default);
186
193
  padding-left: var(--button-padding-x);
187
194
  padding-right: var(--button-padding-x);
188
195
  gap: var(--button-gap);
189
196
  }
190
- [data-warm-button][data-size="jumbo"] {
197
+ [data-warm-button][data-size='jumbo'] {
191
198
  height: var(--button-height-jumbo);
192
- padding-left: var(--button-padding-x);
193
- padding-right: var(--button-padding-x);
199
+ padding-left: var(--button-padding-x-lg);
200
+ padding-right: var(--button-padding-x-lg);
194
201
  font-size: var(--button-font-size-jumbo);
195
202
  font-weight: 700;
196
203
  line-height: var(--button-line-height-jumbo);
197
204
  gap: var(--button-gap);
198
205
  }
199
- [data-warm-button][data-size="icon"] {
206
+ [data-warm-button][data-size='icon'] {
200
207
  width: var(--button-height-icon);
201
208
  height: var(--button-height-icon);
202
209
  }
@@ -204,45 +211,47 @@ button[data-warm-button][data-variant="apple"] {
204
211
  buttonInputAlignmentClasses.default = 'bg-clip-border py-2'); this only
205
212
  applies when the caller passes size="default" explicitly, never when
206
213
  'default' is reached through presentation-driven implicit sizing. */
207
- [data-warm-button][data-size="default"][data-explicit-size] {
214
+ [data-warm-button][data-size='default'][data-explicit-size] {
208
215
  padding-top: var(--button-padding-y-md);
209
216
  padding-bottom: var(--button-padding-y-md);
210
217
  background-clip: border-box;
211
218
  }
212
219
 
213
220
  /* Presentations: private legacy maps drive resolve to public data-size; geometry only when !data-explicit-size. Exact from old buttonPresentationClasses + primitive sizes (icon-round=36px etc) + edge + variants. */
214
- [data-warm-button][data-presentation="assistantIcon"]:not([data-explicit-size]) {
221
+ [data-warm-button][data-presentation='assistantIcon']:not([data-explicit-size]) {
215
222
  width: var(--button-size-xs);
216
223
  height: var(--button-size-xs);
217
224
  padding: var(--button-padding-y-md);
218
225
  }
219
- [data-warm-button][data-presentation="assistantIcon"]:not([data-explicit-size]):active:not([aria-haspopup]) {
226
+ [data-warm-button][data-presentation='assistantIcon']:not([data-explicit-size]):active:not(
227
+ [aria-haspopup]
228
+ ) {
220
229
  transform: scale(0.9);
221
230
  }
222
231
  @media (prefers-reduced-motion: reduce) {
223
- [data-warm-button][data-presentation="assistantIcon"]:not([data-explicit-size]):active:not(
224
- [aria-haspopup]
225
- ) {
232
+ [data-warm-button][data-presentation='assistantIcon']:not([data-explicit-size]):active:not(
233
+ [aria-haspopup]
234
+ ) {
226
235
  transform: none;
227
236
  }
228
237
  }
229
- [data-warm-button][data-presentation="assistantRoundIcon"]:not([data-explicit-size]) {
238
+ [data-warm-button][data-presentation='assistantRoundIcon']:not([data-explicit-size]) {
230
239
  /* old icon-round 36px */
231
240
  width: var(--button-height-icon);
232
241
  height: var(--button-height-icon);
233
242
  }
234
- [data-warm-button][data-presentation="composerIcon"]:not([data-explicit-size]) {
243
+ [data-warm-button][data-presentation='composerIcon']:not([data-explicit-size]) {
235
244
  width: var(--button-size-sm);
236
245
  height: var(--button-size-sm);
237
246
  padding: var(--button-padding-y-md);
238
247
  }
239
- [data-warm-button][data-presentation="editPill"]:not([data-explicit-size]) {
248
+ [data-warm-button][data-presentation='editPill']:not([data-explicit-size]) {
240
249
  /* old sm 32px */
241
250
  height: var(--button-size-md);
242
251
  padding-left: var(--button-padding-x);
243
252
  padding-right: var(--button-padding-x);
244
253
  }
245
- [data-warm-button][data-presentation="hero"]:not([data-explicit-size]) {
254
+ [data-warm-button][data-presentation='hero']:not([data-explicit-size]) {
246
255
  height: var(--button-size-lg);
247
256
  padding-left: var(--button-padding-x);
248
257
  padding-right: var(--button-padding-x);
@@ -253,7 +262,7 @@ button[data-warm-button][data-variant="apple"] {
253
262
  line-height: var(--button-line-height-base);
254
263
  background-clip: border-box;
255
264
  }
256
- [data-warm-button][data-presentation="promptCategory"]:not([data-explicit-size]) {
265
+ [data-warm-button][data-presentation='promptCategory']:not([data-explicit-size]) {
257
266
  height: var(--button-height-default);
258
267
  gap: var(--button-gap);
259
268
  background-color: var(--background);
@@ -268,7 +277,7 @@ button[data-warm-button][data-variant="apple"] {
268
277
  important modifier) to every `default`-variant promptCategory button
269
278
  regardless of explicit/implicit sizing, overriding the default variant's
270
279
  own gradient shadow unconditionally; mirror that with `!important` here. */
271
- [data-warm-button][data-presentation="promptCategory"][data-variant="default"] {
280
+ [data-warm-button][data-presentation='promptCategory'][data-variant='default'] {
272
281
  box-shadow: var(--shadow-xs) !important;
273
282
  }
274
283
  /* buttonPresentationClasses.promptCategory's own (non-!important) `shadow-xs`
@@ -276,13 +285,15 @@ button[data-warm-button][data-variant="apple"] {
276
285
  branch), and only survives the cascade for variants without their own
277
286
  later shadow override — arrow forces `shadow-none` and must keep winning;
278
287
  default is already covered, unconditionally, by the rule above. */
279
- [data-warm-button][data-presentation="promptCategory"]:not([data-explicit-size]):not([data-variant="arrow"]) {
288
+ [data-warm-button][data-presentation='promptCategory']:not([data-explicit-size]):not(
289
+ [data-variant='arrow']
290
+ ) {
280
291
  box-shadow: var(--shadow-xs) !important;
281
292
  }
282
- [data-warm-button][data-presentation="promptCategory"]:hover {
293
+ [data-warm-button][data-presentation='promptCategory']:hover {
283
294
  background-color: var(--muted);
284
295
  }
285
- [data-warm-button][data-presentation="promptOption"]:not([data-explicit-size]) {
296
+ [data-warm-button][data-presentation='promptOption']:not([data-explicit-size]) {
286
297
  height: auto;
287
298
  min-height: var(--button-min-height-option);
288
299
  align-items: flex-start;
@@ -291,15 +302,15 @@ button[data-warm-button][data-variant="apple"] {
291
302
  padding: var(--button-padding-x);
292
303
  font-size: var(--button-font-size);
293
304
  }
294
- [data-warm-button][data-presentation="sidebarIcon"]:not([data-explicit-size]) {
305
+ [data-warm-button][data-presentation='sidebarIcon']:not([data-explicit-size]) {
295
306
  color: var(--sidebar-foreground);
296
307
  background-clip: border-box;
297
308
  }
298
- [data-warm-button][data-presentation="sidebarIcon"]:hover {
309
+ [data-warm-button][data-presentation='sidebarIcon']:hover {
299
310
  background-color: var(--sidebar-accent);
300
311
  color: var(--sidebar-accent-foreground);
301
312
  }
302
- [data-warm-button][data-presentation="tableHeader"]:not([data-explicit-size]) {
313
+ [data-warm-button][data-presentation='tableHeader']:not([data-explicit-size]) {
303
314
  height: auto;
304
315
  min-height: 0;
305
316
  width: var(--button-width-full);
@@ -314,19 +325,19 @@ button[data-warm-button][data-variant="apple"] {
314
325
  line-height: var(--button-line-height);
315
326
  color: var(--muted-foreground);
316
327
  }
317
- [data-warm-button][data-presentation="tableHeader"]:hover {
328
+ [data-warm-button][data-presentation='tableHeader']:hover {
318
329
  background-color: transparent;
319
330
  color: var(--foreground);
320
331
  }
321
- [data-warm-button][data-presentation="touch"]:not([data-explicit-size]) {
332
+ [data-warm-button][data-presentation='touch']:not([data-explicit-size]) {
322
333
  min-height: var(--button-min-height-touch);
323
334
  }
324
- [data-warm-button][data-presentation="threadMore"]:not([data-explicit-size]) {
335
+ [data-warm-button][data-presentation='threadMore']:not([data-explicit-size]) {
325
336
  width: var(--button-size-xs);
326
337
  height: var(--button-size-xs);
327
338
  padding: 0;
328
339
  }
329
- [data-warm-button][data-presentation="threadNew"]:not([data-explicit-size]) {
340
+ [data-warm-button][data-presentation='threadNew']:not([data-explicit-size]) {
330
341
  height: var(--button-size-md);
331
342
  justify-content: flex-start;
332
343
  gap: var(--button-gap);
@@ -335,10 +346,10 @@ button[data-warm-button][data-variant="apple"] {
335
346
  font-size: var(--button-font-size);
336
347
  font-weight: 400;
337
348
  }
338
- [data-warm-button][data-presentation="threadNew"]:hover {
349
+ [data-warm-button][data-presentation='threadNew']:hover {
339
350
  background-color: var(--muted);
340
351
  }
341
- [data-warm-button][data-presentation="compact"]:not([data-explicit-size]) {
352
+ [data-warm-button][data-presentation='compact']:not([data-explicit-size]) {
342
353
  height: var(--button-size-md);
343
354
  padding-left: var(--button-padding-x-sm);
344
355
  padding-right: var(--button-padding-x-sm);
@@ -350,13 +361,13 @@ button[data-warm-button][data-variant="apple"] {
350
361
  `[data-size="default"][data-explicit-size]` rule below only fires once a
351
362
  caller passes size="default" explicitly, so implicit 'default'/'controlPeer'
352
363
  need their own copy of the same two properties). */
353
- [data-warm-button][data-presentation="default"]:not([data-explicit-size]),
354
- [data-warm-button][data-presentation="controlPeer"]:not([data-explicit-size]) {
364
+ [data-warm-button][data-presentation='default']:not([data-explicit-size]),
365
+ [data-warm-button][data-presentation='controlPeer']:not([data-explicit-size]) {
355
366
  padding-top: var(--button-padding-y-md);
356
367
  padding-bottom: var(--button-padding-y-md);
357
368
  background-clip: border-box;
358
369
  }
359
- [data-warm-button][data-presentation="menuOption"]:not([data-explicit-size]) {
370
+ [data-warm-button][data-presentation='menuOption']:not([data-explicit-size]) {
360
371
  /* old option min-height/auto 64px */
361
372
  height: auto;
362
373
  min-height: var(--button-min-height-option);
@@ -379,7 +390,7 @@ button[data-warm-button][data-variant="apple"] {
379
390
  specificity of the `:not([data-explicit-size])` presentation rules and the
380
391
  `[data-size][data-explicit-size]` size rule above, so this later rule wins
381
392
  the cascade instead of losing on specificity. */
382
- [data-warm-button][data-variant="arrow"][data-variant="arrow"] {
393
+ [data-warm-button][data-variant='arrow'][data-variant='arrow'] {
383
394
  height: auto;
384
395
  padding: 0;
385
396
  gap: var(--button-gap);
@@ -405,11 +416,11 @@ button[data-warm-button][data-variant="apple"] {
405
416
  pointer-events: none;
406
417
  flex-shrink: 0;
407
418
  }
408
- [data-warm-button] svg:not([class*="size-"]) {
419
+ [data-warm-button] svg:not([class*='size-']) {
409
420
  width: var(--button-icon-size);
410
421
  height: var(--button-icon-size);
411
422
  }
412
- [data-warm-button][data-size="jumbo"] svg:not([class*="size-"]) {
423
+ [data-warm-button][data-size='jumbo'] svg:not([class*='size-']) {
413
424
  width: var(--button-icon-size-jumbo);
414
425
  height: var(--button-icon-size-jumbo);
415
426
  }
@@ -424,7 +435,7 @@ button[data-warm-button][data-variant="apple"] {
424
435
  private `lg` behavior. `:not([data-explicit-size])` also raises this rule's
425
436
  specificity above the plain jumbo rule above, so it wins unconditionally
426
437
  whenever it matches. */
427
- [data-warm-button][data-presentation="hero"]:not([data-explicit-size]) svg:not([class*="size-"]) {
438
+ [data-warm-button][data-presentation='hero']:not([data-explicit-size]) svg:not([class*='size-']) {
428
439
  width: var(--button-icon-size);
429
440
  height: var(--button-icon-size);
430
441
  }
@@ -434,26 +445,30 @@ button[data-warm-button][data-variant="apple"] {
434
445
  (`[&_svg:not([class*='size-'])]:size-5`) carries one more selector
435
446
  component than arrow's (`[&_svg]:size-4`), so jumbo's larger glyph size
436
447
  wins whenever both apply (verified against the real compiled recipe). */
437
- [data-warm-button][data-variant="arrow"] svg {
448
+ [data-warm-button][data-variant='arrow'] svg {
438
449
  width: var(--button-icon-size);
439
450
  height: var(--button-icon-size);
440
451
  }
441
452
  /* icon-xs primitive size (assistantIcon, threadMore) shrinks the icon glyph;
442
453
  suppressed when the caller passes an explicit public size. */
443
- [data-warm-button][data-presentation="assistantIcon"]:not([data-explicit-size]) svg:not([class*="size-"]),
444
- [data-warm-button][data-presentation="threadMore"]:not([data-explicit-size]) svg:not([class*="size-"]) {
454
+ [data-warm-button][data-presentation='assistantIcon']:not([data-explicit-size])
455
+ svg:not([class*='size-']),
456
+ [data-warm-button][data-presentation='threadMore']:not([data-explicit-size])
457
+ svg:not([class*='size-']) {
445
458
  width: var(--button-icon-size-xs);
446
459
  height: var(--button-icon-size-xs);
447
460
  }
448
461
  /* Aria states (from cva aria-invalid + aria-expanded + dark) */
449
462
  [data-warm-button][aria-invalid] {
450
- box-shadow: 0 0 0 var(--button-focus-ring) color-mix(in oklab, var(--destructive) var(--button-mix-20), transparent);
463
+ box-shadow: 0 0 0 var(--button-focus-ring)
464
+ color-mix(in oklab, var(--destructive) var(--button-mix-20), transparent);
451
465
  }
452
466
  .dark [data-warm-button][aria-invalid] {
453
- box-shadow: 0 0 0 var(--button-focus-ring) color-mix(in oklab, var(--destructive) var(--button-mix-40), transparent);
467
+ box-shadow: 0 0 0 var(--button-focus-ring)
468
+ color-mix(in oklab, var(--destructive) var(--button-mix-40), transparent);
454
469
  }
455
- [data-warm-button][data-variant="ghost"][aria-expanded="true"],
456
- [data-warm-button][data-variant="outline"][aria-expanded="true"] {
470
+ [data-warm-button][data-variant='ghost'][aria-expanded='true'],
471
+ [data-warm-button][data-variant='outline'][aria-expanded='true'] {
457
472
  background-color: var(--muted);
458
473
  color: var(--foreground);
459
474
  }
@@ -463,8 +478,8 @@ button[data-warm-button][data-variant="apple"] {
463
478
  pointer-events: none;
464
479
  opacity: 0.5;
465
480
  }
466
- [data-warm-button][data-variant="apple"]:disabled,
467
- [data-warm-button][data-variant="outline"]:disabled {
481
+ [data-warm-button][data-variant='apple']:disabled,
482
+ [data-warm-button][data-variant='outline']:disabled {
468
483
  opacity: 1;
469
484
  }
470
485
 
@@ -480,16 +495,30 @@ button[data-warm-button][data-variant="apple"] {
480
495
  letter-spacing: var(--logo-letter-spacing);
481
496
  }
482
497
  svg[data-warm-logo] {
483
- display: inline-block;
484
- vertical-align: middle;
498
+ display: block;
485
499
  fill: currentColor;
486
500
  flex-shrink: 0;
487
501
  }
488
- [data-warm-logo][data-size="badge"] svg[data-warm-logo] { width: var(--logo-size-badge); height: var(--logo-size-badge); }
489
- [data-warm-logo][data-size="default"] svg[data-warm-logo] { width: var(--logo-size-default); height: var(--logo-size-default); }
490
- [data-warm-logo][data-size="feature"] svg[data-warm-logo] { width: var(--logo-size-feature); height: var(--logo-size-feature); }
491
- [data-warm-logo][data-size="hero"] svg[data-warm-logo] { width: var(--logo-size-hero); height: var(--logo-size-hero); }
492
-
493
- [data-warm-logo][data-tone="foreground"] { color: var(--foreground); }
494
- [data-warm-logo][data-tone="sidebar"] { color: var(--sidebar-foreground); }
502
+ [data-warm-logo][data-size='badge'] svg[data-warm-logo] {
503
+ width: var(--logo-size-badge);
504
+ height: var(--logo-size-badge);
505
+ }
506
+ [data-warm-logo][data-size='default'] svg[data-warm-logo] {
507
+ width: var(--logo-size-default);
508
+ height: var(--logo-size-default);
509
+ }
510
+ [data-warm-logo][data-size='feature'] svg[data-warm-logo] {
511
+ width: var(--logo-size-feature);
512
+ height: var(--logo-size-feature);
513
+ }
514
+ [data-warm-logo][data-size='hero'] svg[data-warm-logo] {
515
+ width: var(--logo-size-hero);
516
+ height: var(--logo-size-hero);
517
+ }
495
518
 
519
+ [data-warm-logo][data-tone='foreground'] {
520
+ color: var(--foreground);
521
+ }
522
+ [data-warm-logo][data-tone='sidebar'] {
523
+ color: var(--sidebar-foreground);
524
+ }
package/dist/logo.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import * as React from 'react';
3
- const WShape = (_jsxs("g", { fill: "currentColor", children: [_jsx("path", { d: "M 33.500 40.660 C 20.206 42.744, 0 48.560, -0 50.302 C -0 51.759, 123.955 348.889, 127.738 356.500 C 142.182 385.561, 169.450 410.275, 198.946 421.040 C 218.922 428.330, 243.683 430.825, 264.526 427.648 C 277.151 425.724, 294.628 420.011, 294.194 417.952 C 293.790 416.040, 172.732 124.599, 168.522 115.405 C 161.779 100.679, 149.168 84.171, 135.093 71.646 C 119.358 57.644, 98.880 47.362, 77 42.478 C 69.645 40.836, 40.220 39.606, 33.500 40.660" }), _jsx("path", { d: "M 229.651 41.597 C 217.916 43.718, 202.443 49.144, 202.744 51.035 C 203.418 55.268, 329.689 356.584, 333.687 363.500 C 340.525 375.327, 345.293 381.483, 355.408 391.538 C 374.603 410.619, 398.878 423.014, 425.907 427.533 C 439.649 429.831, 463.594 429.132, 476 426.072 C 489.892 422.645, 497.188 419.815, 496.703 418.043 C 495.416 413.331, 371.058 116.094, 367.406 109 C 349.467 74.149, 313.008 47.875, 273.752 41.509 C 262.281 39.648, 240.195 39.693, 229.651 41.597" }), _jsx("path", { d: "M 463 40.593 C 451.670 42.545, 447.288 43.569, 439 46.203 C 433.775 47.864, 429.338 49.372, 429.140 49.555 C 428.942 49.737, 434.670 64.021, 441.868 81.297 C 455.574 114.190, 462.215 131.660, 468.447 151.208 C 475.360 172.892, 486.124 186.213, 503.834 194.997 C 530.956 208.450, 564.982 201.679, 583.654 179.112 C 604.399 154.041, 605.407 121.944, 586.291 95.155 C 567.827 69.280, 539.107 50.114, 508 42.907 C 500.680 41.212, 494.713 40.644, 482 40.434 C 472.925 40.284, 464.375 40.356, 463 40.593" })] }));
3
+ const WShape = (_jsxs("g", { fill: "currentColor", transform: "translate(0 108)", children: [_jsx("path", { d: "M 33.500 40.660 C 20.206 42.744, 0 48.560, -0 50.302 C -0 51.759, 123.955 348.889, 127.738 356.500 C 142.182 385.561, 169.450 410.275, 198.946 421.040 C 218.922 428.330, 243.683 430.825, 264.526 427.648 C 277.151 425.724, 294.628 420.011, 294.194 417.952 C 293.790 416.040, 172.732 124.599, 168.522 115.405 C 161.779 100.679, 149.168 84.171, 135.093 71.646 C 119.358 57.644, 98.880 47.362, 77 42.478 C 69.645 40.836, 40.220 39.606, 33.500 40.660" }), _jsx("path", { d: "M 229.651 41.597 C 217.916 43.718, 202.443 49.144, 202.744 51.035 C 203.418 55.268, 329.689 356.584, 333.687 363.500 C 340.525 375.327, 345.293 381.483, 355.408 391.538 C 374.603 410.619, 398.878 423.014, 425.907 427.533 C 439.649 429.831, 463.594 429.132, 476 426.072 C 489.892 422.645, 497.188 419.815, 496.703 418.043 C 495.416 413.331, 371.058 116.094, 367.406 109 C 349.467 74.149, 313.008 47.875, 273.752 41.509 C 262.281 39.648, 240.195 39.693, 229.651 41.597" }), _jsx("path", { d: "M 463 40.593 C 451.670 42.545, 447.288 43.569, 439 46.203 C 433.775 47.864, 429.338 49.372, 429.140 49.555 C 428.942 49.737, 434.670 64.021, 441.868 81.297 C 455.574 114.190, 462.215 131.660, 468.447 151.208 C 475.360 172.892, 486.124 186.213, 503.834 194.997 C 530.956 208.450, 564.982 201.679, 583.654 179.112 C 604.399 154.041, 605.407 121.944, 586.291 95.155 C 567.827 69.280, 539.107 50.114, 508 42.907 C 500.680 41.212, 494.713 40.644, 482 40.434 C 472.925 40.284, 464.375 40.356, 463 40.593" })] }));
4
4
  export function WarmLogoIcon({ size = 'default', tone = 'default', decorative = false, className: _className, style: _style, asChild: _asChild, render: _render, ...props }) {
5
5
  const label = decorative ? undefined : 'Warm logo';
6
- return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 600 469", "data-warm-logo": true, "data-size": size, "data-tone": tone, width: size === 'hero' ? 56 : size === 'feature' ? 32 : size === 'default' ? 28 : 12, height: size === 'hero' ? 56 : size === 'feature' ? 32 : size === 'default' ? 28 : 12, "aria-hidden": decorative ? true : undefined, "aria-label": label, ...props, children: WShape }));
6
+ return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 600 600", "data-warm-logo": true, "data-size": size, "data-tone": tone, width: size === 'hero' ? 56 : size === 'feature' ? 32 : size === 'default' ? 28 : 12, height: size === 'hero' ? 56 : size === 'feature' ? 32 : size === 'default' ? 28 : 12, "aria-hidden": decorative ? true : undefined, "aria-label": label, ...props, children: WShape }));
7
7
  }
8
8
  export const Logo = React.forwardRef(function Logo({ size = 'default', tone = 'default', showText = true, className: _className, style: _style, textClass: _textClass, asChild: _asChild, render: _render, ...props }, ref) {
9
9
  return (_jsxs("div", { ref: ref, "data-warm-logo": true, "data-size": size, "data-tone": tone, ...props, children: [_jsx(WarmLogoIcon, { size: size, tone: tone, decorative: showText }), showText ? _jsx("span", { children: "Warm" }) : null] }));
package/interfaces.css CHANGED
@@ -52,7 +52,10 @@ html.theme-switching *::after {
52
52
  }
53
53
 
54
54
  .interface-concentric {
55
- border-radius: max(0px, calc(var(--interface-outer-radius, var(--radius-xl)) - var(--interface-inset, 0px)));
55
+ border-radius: max(
56
+ 0px,
57
+ calc(var(--interface-outer-radius, var(--radius-xl)) - var(--interface-inset, 0px))
58
+ );
56
59
  }
57
60
 
58
61
  .interface-icon-crossfade {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@warmio/design",
3
- "version": "1.5.0",
3
+ "version": "1.5.2",
4
4
  "description": "Warm's public design contract: CSS tokens and Button/Logo primitives.",
5
5
  "license": "MIT",
6
6
  "type": "module",
package/theme.css CHANGED
@@ -228,7 +228,7 @@
228
228
  --button-padding-y-sm: 0.25rem;
229
229
  --button-padding-x-md: 0.75rem;
230
230
  --button-padding-y-md: 0.5rem;
231
- --button-padding-x-lg: 1rem;
231
+ --button-padding-x-lg: 1.75rem;
232
232
  --button-padding-y-lg: 0.75rem;
233
233
  --button-font-size: 0.875rem;
234
234
  --button-gap: 0.5rem;
@@ -271,7 +271,7 @@
271
271
  --button-height-icon: 2.25rem;
272
272
  --button-min-height-touch: 2.75rem;
273
273
  --button-min-height-option: 4rem;
274
- --button-padding-x: 1rem;
274
+ --button-padding-x: 1.25rem;
275
275
  --button-font-size-base: 1rem;
276
276
  --button-font-size-jumbo: 1.125rem;
277
277
  --button-line-height-base: 1.5rem;
@@ -295,7 +295,9 @@
295
295
  --logo-letter-spacing: 0.025em;
296
296
  --logo-gap: 0.5rem;
297
297
  --button-transition-property: color, background-color, box-shadow, border-color, transform;
298
- --button-transition-property-colors: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
298
+ --button-transition-property-colors:
299
+ color, background-color, border-color, outline-color, text-decoration-color, fill, stroke,
300
+ --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
299
301
  --button-width-full: 100%;
300
302
  --warm-surface-raised-dark: var(--input);
301
303
  --warm-surface-raised-hover-dark: var(--muted);
@@ -383,16 +385,15 @@
383
385
  }
384
386
  }
385
387
 
386
-
387
388
  /* ════════════════════════════════════════════════════════════════════════════
388
389
  DARK MODE
389
390
  Inverts lightness calculations for surfaces and adjusts brand brightness
390
391
  ════════════════════════════════════════════════════════════════════════════ */
391
392
  .dark {
392
393
  /* ─── Surfaces (dark backgrounds from neutral) ─── */
393
- --background: oklch(0.275 0 0);
394
+ --background: lab(7.31616 0.094689 -0.345469);
394
395
  --foreground: oklch(0.915 0 0);
395
- --card: oklch(0.295 0 0);
396
+ --card: lab(10.7293 0.100255 -0.363475);
396
397
  --card-gradient-start: oklch(0.325 0 0);
397
398
  --card-foreground: var(--foreground);
398
399
  --muted: var(--card);