@kb.ui/tokens 0.10.4 → 0.12.0

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 (6) hide show
  1. package/README.md +4 -2
  2. package/dist/tokens.css +497 -0
  3. package/dist/tokens.d.ts +352 -0
  4. package/dist/tokens.js +355 -3
  5. package/package.json +1 -1
  6. package/tokens.json +1235 -0
package/README.md CHANGED
@@ -28,7 +28,7 @@ If your app does not load the full React or CSS stylesheet, import `@kb.ui/token
28
28
 
29
29
  ## Exports
30
30
 
31
- | Import | File | Contents |
31
+ | Import | `File` | Contents |
32
32
  |---|---|---|
33
33
  | `@kb.ui/tokens/tokens.css` | `dist/tokens.css` | All variables on `:root`; theme-dependent variables rebound on `[data-theme="light"]` and `[data-theme="dark"]`, plus a system-setting fallback and system-color overrides for tokens with a `kb.forced` value under `forced-colors: active` |
34
34
  | `@kb.ui/tokens` | `dist/tokens.js`, `dist/tokens.d.ts` | `tokens`, a nested read-only object of variable names |
@@ -44,8 +44,10 @@ bun run --cwd packages/tokens test
44
44
  The build rejects a token file that:
45
45
 
46
46
  - contains an alias, such as `{blue.600}`, pointing at a token that does not exist
47
+ - forms an alias cycle within the effective light, dark, or forced-colors mode graph
48
+ - uses an unsupported `$type`, a malformed CSS value for its `$type`, or an incompatible alias target `$type`
47
49
  - has two paths that produce the same variable name
48
50
  - uses a key with characters other than letters, digits, `_` and `-`
49
51
  - has a `$value` that is not a string
50
52
 
51
- [docs/tokens.md](../../docs/tokens.md) explains token kinds, naming and dark mode.
53
+ [`docs/tokens.md`](../../docs/tokens.md) explains the CSS-native DTCG-inspired format, token kinds, naming and dark mode.
package/dist/tokens.css CHANGED
@@ -113,8 +113,18 @@
113
113
  --kb-card-padding-compact: 20px;
114
114
  --kb-card-face: linear-gradient(180deg, var(--kb-material-action-sheen), transparent 60%);
115
115
  --kb-card-shadow: var(--kb-material-raised-shadow), 0 4px 0 -1px color-mix(in srgb, var(--kb-material-control-border) 50%, var(--kb-color-bg)), 0 12px 24px -16px rgb(36 40 49 / 0.22);
116
+ --kb-gallery-max-width: var(--kb-container-size-lg);
117
+ --kb-gallery-gutter-sm: var(--kb-space-4);
118
+ --kb-gallery-gutter-md: var(--kb-space-6);
119
+ --kb-gallery-gutter-lg: var(--kb-space-8);
120
+ --kb-gallery-gap: var(--kb-space-6);
121
+ --kb-gallery-filters-gap: var(--kb-space-3);
122
+ --kb-gallery-filter-min-width: 12rem;
116
123
  --kb-grid-gap: var(--kb-space-6);
117
124
  --kb-grid-min-item-width: 18.75rem;
125
+ --kb-grid-min-item-width-sm: 14rem;
126
+ --kb-grid-min-item-width-md: var(--kb-grid-min-item-width);
127
+ --kb-grid-min-item-width-lg: 24rem;
118
128
  --kb-button-radius: var(--kb-radius-md);
119
129
  --kb-button-motion-duration: 140ms;
120
130
  --kb-button-motion-easing: ease;
@@ -165,9 +175,12 @@
165
175
  --kb-dialog-header-padding: 0px;
166
176
  --kb-dialog-body-padding: 0px;
167
177
  --kb-dialog-footer-padding: 0px;
178
+ --kb-dialog-drawer-motion-duration: var(--kb-motion-duration-slow);
179
+ --kb-dialog-drawer-motion-easing: var(--kb-motion-easing-standard);
168
180
  --kb-panel-background: var(--kb-material-surface-bg);
169
181
  --kb-panel-background-active: var(--kb-material-surface-bg);
170
182
  --kb-panel-background-sunken: var(--kb-material-field-bg);
183
+ --kb-panel-background-opaque: var(--kb-material-surface-bg);
171
184
  --kb-panel-border: var(--kb-color-border);
172
185
  --kb-panel-border-active: var(--kb-color-accent);
173
186
  --kb-panel-border-critical: var(--kb-color-danger);
@@ -338,6 +351,52 @@
338
351
  --kb-code-background: var(--kb-color-surface);
339
352
  --kb-code-border: var(--kb-color-border);
340
353
  --kb-code-radius: var(--kb-radius-sm);
354
+ --kb-code-block-radius: var(--kb-radius-lg);
355
+ --kb-code-block-background: var(--kb-material-field-bg);
356
+ --kb-code-block-face: var(--kb-material-recessed-face);
357
+ --kb-code-block-border: var(--kb-color-border);
358
+ --kb-code-block-shadow: var(--kb-material-panel-shadow);
359
+ --kb-code-block-padding-block: var(--kb-space-4);
360
+ --kb-code-block-padding-inline: var(--kb-space-4);
361
+ --kb-code-block-font-size: var(--kb-text-small-size);
362
+ --kb-code-block-leading: 1.65;
363
+ --kb-code-block-max-height: 22rem;
364
+ --kb-code-collapsed-max-height: 9.5rem;
365
+ --kb-code-header-background: var(--kb-color-surface);
366
+ --kb-code-header-face: linear-gradient(180deg, var(--kb-material-raised-top), var(--kb-color-surface));
367
+ --kb-code-header-shadow: var(--kb-material-inlay-shadow);
368
+ --kb-code-header-padding-block: var(--kb-space-2);
369
+ --kb-code-header-padding-inline: var(--kb-space-4);
370
+ --kb-code-header-gap: var(--kb-space-3);
371
+ --kb-code-title-size: var(--kb-text-caption-size);
372
+ --kb-code-badge-padding-block: 2px;
373
+ --kb-code-badge-padding-inline: var(--kb-space-2);
374
+ --kb-code-badge-radius: var(--kb-radius-sm);
375
+ --kb-code-action-height: 1.75rem;
376
+ --kb-code-action-padding-inline: var(--kb-space-2);
377
+ --kb-code-action-gap: var(--kb-space-1);
378
+ --kb-code-action-radius: var(--kb-radius-md);
379
+ --kb-code-toggle-min-width: 7.5rem;
380
+ --kb-code-copy-min-width: 6.5rem;
381
+ --kb-code-motion-duration: var(--kb-motion-duration-slow);
382
+ --kb-code-motion-easing: var(--kb-motion-easing-standard);
383
+ --kb-code-gutter-width: 2.5rem;
384
+ --kb-code-gutter-gap: var(--kb-space-3);
385
+ --kb-code-gutter-color: var(--kb-color-muted);
386
+ --kb-code-gutter-border: var(--kb-material-soft-border);
387
+ --kb-code-line-padding-inline: var(--kb-space-4);
388
+ --kb-code-line-highlight-background: #f4e6df;
389
+ --kb-code-line-highlight-border: var(--kb-color-accent);
390
+ --kb-code-syntax-keyword: #9a3412;
391
+ --kb-code-syntax-string: #1b5e43;
392
+ --kb-code-syntax-comment: var(--kb-color-muted);
393
+ --kb-code-syntax-number: #7c470b;
394
+ --kb-code-syntax-tag: #1d4f73;
395
+ --kb-code-syntax-attribute: #6d452b;
396
+ --kb-code-syntax-type: #5b378a;
397
+ --kb-code-syntax-function: #175966;
398
+ --kb-code-syntax-operator: #47505e;
399
+ --kb-code-syntax-property: #1f5173;
341
400
  --kb-container-size-sm: 40rem;
342
401
  --kb-container-size-md: 64rem;
343
402
  --kb-container-size-lg: 80rem;
@@ -348,6 +407,12 @@
348
407
  --kb-split-collapse-sm: 32rem;
349
408
  --kb-split-collapse-md: 48rem;
350
409
  --kb-split-collapse-lg: 64rem;
410
+ --kb-supportingpane-max-width: var(--kb-container-size-lg);
411
+ --kb-supportingpane-gutter-sm: var(--kb-space-4);
412
+ --kb-supportingpane-gutter-md: var(--kb-space-6);
413
+ --kb-supportingpane-gutter-lg: var(--kb-space-8);
414
+ --kb-supportingpane-gap: var(--kb-layout-gap-lg);
415
+ --kb-supportingpane-aside-width: 22rem;
351
416
  --kb-separator-color: var(--kb-color-border);
352
417
  --kb-separator-width: 1px;
353
418
  --kb-separator-min-length: var(--kb-space-4);
@@ -359,9 +424,222 @@
359
424
  --kb-fieldset-legend-size: var(--kb-text-h4-size);
360
425
  --kb-formactions-gap: var(--kb-space-2);
361
426
  --kb-formactions-padding-top: var(--kb-space-4);
427
+ --kb-form-gap: var(--kb-space-6);
428
+ --kb-form-width-sm: 32rem;
429
+ --kb-form-width-md: 40rem;
430
+ --kb-formsection-gap: var(--kb-space-4);
431
+ --kb-formsection-header-gap: var(--kb-space-1);
432
+ --kb-formsection-fields-gap: var(--kb-space-4);
433
+ --kb-formsection-collapse: 40rem;
434
+ --kb-settings-gap: var(--kb-space-8);
435
+ --kb-settings-divider: var(--kb-color-border);
362
436
  --kb-errorsummary-padding: var(--kb-space-4);
363
437
  --kb-errorsummary-radius: var(--kb-radius-md);
364
438
  --kb-errorsummary-gap: var(--kb-space-2);
439
+ --kb-spinner-size-sm: 0.875rem;
440
+ --kb-spinner-size-md: 1.125rem;
441
+ --kb-spinner-size-lg: 1.5rem;
442
+ --kb-spinner-stroke-width: 2px;
443
+ --kb-spinner-gap: var(--kb-space-2);
444
+ --kb-spinner-duration: 760ms;
445
+ --kb-spinner-easing: linear;
446
+ --kb-spinner-track-opacity: 0.22;
447
+ --kb-spinner-orbit-duration: 1140ms;
448
+ --kb-spinner-pulse-duration: 960ms;
449
+ --kb-spinner-pulse-easing: var(--kb-motion-easing-smooth);
450
+ --kb-spinner-stagger: 140ms;
451
+ --kb-spinner-glow: 6px;
452
+ --kb-spinner-pill-padding-block: var(--kb-space-1);
453
+ --kb-spinner-pill-padding-inline: var(--kb-space-3);
454
+ --kb-spinner-pill-radius: var(--kb-radius-full);
455
+ --kb-skeleton-radius-sm: var(--kb-radius-sm);
456
+ --kb-skeleton-radius-md: var(--kb-radius-md);
457
+ --kb-skeleton-radius-lg: var(--kb-radius-lg);
458
+ --kb-skeleton-radius-full: var(--kb-radius-full);
459
+ --kb-skeleton-height-sm: 0.75rem;
460
+ --kb-skeleton-height-md: 1rem;
461
+ --kb-skeleton-height-lg: 1.5rem;
462
+ --kb-skeleton-block-height: 5.5rem;
463
+ --kb-skeleton-avatar-size-sm: 2rem;
464
+ --kb-skeleton-avatar-size-md: 2.5rem;
465
+ --kb-skeleton-avatar-size-lg: 3.5rem;
466
+ --kb-skeleton-pill-width: 5.5rem;
467
+ --kb-skeleton-gap: var(--kb-space-2);
468
+ --kb-skeleton-base: var(--kb-color-surface);
469
+ --kb-skeleton-highlight: var(--kb-material-raised-top);
470
+ --kb-skeleton-sheen: var(--kb-material-soft-sheen);
471
+ --kb-skeleton-border: var(--kb-material-soft-border);
472
+ --kb-skeleton-duration: 1600ms;
473
+ --kb-skeleton-pulse-duration: 1800ms;
474
+ --kb-skeleton-stagger: 120ms;
475
+ --kb-skeleton-easing: var(--kb-motion-easing-smooth);
476
+ --kb-emptystate-radius: var(--kb-radius-lg);
477
+ --kb-emptystate-padding-sm: var(--kb-space-4);
478
+ --kb-emptystate-padding-md: var(--kb-space-6);
479
+ --kb-emptystate-padding-lg: var(--kb-space-8);
480
+ --kb-emptystate-gap: var(--kb-space-4);
481
+ --kb-emptystate-header-gap: var(--kb-space-1);
482
+ --kb-emptystate-actions-gap: var(--kb-space-2);
483
+ --kb-emptystate-max-width: 32rem;
484
+ --kb-emptystate-icon-size-sm: 2.25rem;
485
+ --kb-emptystate-icon-size-md: 2.75rem;
486
+ --kb-emptystate-icon-size-lg: 3.25rem;
487
+ --kb-emptystate-icon-glyph-size-sm: 1rem;
488
+ --kb-emptystate-icon-glyph-size-md: 1.25rem;
489
+ --kb-emptystate-icon-glyph-size-lg: 1.5rem;
490
+ --kb-emptystate-icon-radius: var(--kb-radius-md);
491
+ --kb-emptystate-background: var(--kb-material-surface-bg);
492
+ --kb-emptystate-border: var(--kb-color-border);
493
+ --kb-emptystate-shadow: var(--kb-material-panel-shadow);
494
+ --kb-toast-width: 24rem;
495
+ --kb-toast-gutter: var(--kb-space-4);
496
+ --kb-toast-gap: var(--kb-space-3);
497
+ --kb-toast-padding: var(--kb-space-4);
498
+ --kb-toast-radius: var(--kb-radius-lg);
499
+ --kb-toast-background: var(--kb-material-surface-bg);
500
+ --kb-toast-color: var(--kb-color-fg);
501
+ --kb-toast-border: var(--kb-color-border);
502
+ --kb-toast-shadow: var(--kb-material-float-shadow);
503
+ --kb-toast-control-size: var(--kb-space-8);
504
+ --kb-toast-motion-duration: 240ms;
505
+ --kb-toast-z-index: 1000;
506
+ --kb-toast-exit-duration: 160ms;
507
+ --kb-toast-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
508
+ --kb-toast-enter-offset: var(--kb-space-3);
509
+ --kb-toast-enter-scale: 0.985;
510
+ --kb-image-radius: var(--kb-radius-lg);
511
+ --kb-image-border: var(--kb-material-soft-border);
512
+ --kb-image-background: var(--kb-color-surface);
513
+ --kb-image-color: var(--kb-color-muted);
514
+ --kb-image-ratio: 4 / 3;
515
+ --kb-image-icon-size: var(--kb-space-8);
516
+ --kb-image-fallback-padding: var(--kb-space-3);
517
+ --kb-avatar-size: 2.75rem;
518
+ --kb-avatar-size-xs: var(--kb-space-6);
519
+ --kb-avatar-size-sm: var(--kb-space-8);
520
+ --kb-avatar-size-lg: 3.5rem;
521
+ --kb-avatar-size-xl: 5rem;
522
+ --kb-avatar-radius: var(--kb-radius-full);
523
+ --kb-avatar-square-radius: var(--kb-radius-lg);
524
+ --kb-avatar-font-size: var(--kb-text-body-size);
525
+ --kb-avatar-font-size-xs: var(--kb-text-caption-size);
526
+ --kb-avatar-font-size-sm: var(--kb-text-small-size);
527
+ --kb-avatar-font-size-lg: var(--kb-size-lg);
528
+ --kb-avatar-font-size-xl: var(--kb-text-h2-size);
529
+ --kb-avatar-font-weight: var(--kb-font-weight-strong);
530
+ --kb-avatar-tracking: -0.02em;
531
+ --kb-avatar-background: var(--kb-color-surface);
532
+ --kb-avatar-color: var(--kb-color-fg);
533
+ --kb-avatar-border: var(--kb-material-soft-border);
534
+ --kb-avatar-shadow: var(--kb-material-inlay-shadow);
535
+ --kb-thumbnail-gap: var(--kb-space-3);
536
+ --kb-thumbnail-caption-gap: var(--kb-space-1);
537
+ --kb-thumbnail-radius: var(--kb-radius-lg);
538
+ --kb-thumbnail-color: var(--kb-color-fg);
539
+ --kb-thumbnail-muted: var(--kb-color-muted);
540
+ --kb-thumbnail-title-size: var(--kb-text-body-size);
541
+ --kb-thumbnail-description-size: var(--kb-text-small-size);
542
+ --kb-collection-gap: var(--kb-space-3);
543
+ --kb-collection-cell-padding: var(--kb-space-3);
544
+ --kb-collection-radius: var(--kb-radius-md);
545
+ --kb-collection-border: var(--kb-color-border);
546
+ --kb-collection-header-background: var(--kb-color-surface);
547
+ --kb-collection-selected-background: var(--kb-color-surface);
548
+ --kb-collection-table-min-width: 36rem;
549
+ --kb-copyabletext-gap: var(--kb-space-3);
550
+ --kb-copyabletext-padding: var(--kb-space-3);
551
+ --kb-copyabletext-radius: var(--kb-radius-lg);
552
+ --kb-copyabletext-border: var(--kb-color-border);
553
+ --kb-copyabletext-background: var(--kb-color-surface);
554
+ --kb-copyabletext-target-size: var(--kb-button-height-md);
555
+ --kb-copyabletext-copy-min-width: 5.5rem;
556
+ --kb-copyabletext-value-color: var(--kb-color-fg);
557
+ --kb-copyabletext-highlight-background: color-mix(in srgb, var(--kb-color-warning) 16%, var(--kb-color-surface));
558
+ --kb-disclosure-padding: var(--kb-space-4);
559
+ --kb-disclosure-radius: var(--kb-radius-md);
560
+ --kb-disclosure-background: var(--kb-color-bg);
561
+ --kb-disclosure-color: var(--kb-color-fg);
562
+ --kb-disclosure-border: var(--kb-color-border);
563
+ --kb-disclosure-trigger-height: 2.75rem;
564
+ --kb-disclosure-motion-duration: var(--kb-motion-duration-slow);
565
+ --kb-disclosure-motion-easing: var(--kb-motion-easing-standard);
566
+ --kb-accordion-padding: var(--kb-space-4);
567
+ --kb-accordion-radius: var(--kb-radius-md);
568
+ --kb-accordion-background: var(--kb-color-bg);
569
+ --kb-accordion-color: var(--kb-color-fg);
570
+ --kb-accordion-border: var(--kb-color-border);
571
+ --kb-accordion-trigger-height: 2.75rem;
572
+ --kb-accordion-motion-duration: var(--kb-motion-duration-slow);
573
+ --kb-accordion-motion-easing: var(--kb-motion-easing-standard);
574
+ --kb-popover-width: 20rem;
575
+ --kb-popover-padding: var(--kb-space-4);
576
+ --kb-popover-background: var(--kb-popup-background);
577
+ --kb-popover-color: var(--kb-color-fg);
578
+ --kb-popover-border: var(--kb-popup-border);
579
+ --kb-popover-radius: var(--kb-popup-radius);
580
+ --kb-popover-shadow: var(--kb-popup-shadow);
581
+ --kb-popover-motion-duration: var(--kb-motion-duration-base);
582
+ --kb-popover-motion-easing: var(--kb-motion-easing-standard);
583
+ --kb-popover-enter-scale: 0.98;
584
+ --kb-popover-enter-offset: var(--kb-space-1);
585
+ --kb-tabs-radius: var(--kb-radius-md);
586
+ --kb-tabs-list-padding: 3px;
587
+ --kb-tabs-tab-height-sm: var(--kb-button-height-sm);
588
+ --kb-tabs-tab-height-md: var(--kb-button-height-md);
589
+ --kb-tabs-indicator-thickness: 2px;
590
+ --kb-tabs-panel-padding: var(--kb-space-4);
591
+ --kb-table-background: var(--kb-color-bg);
592
+ --kb-table-header-background: var(--kb-color-surface);
593
+ --kb-table-selected-background: var(--kb-color-surface);
594
+ --kb-table-border: var(--kb-color-border);
595
+ --kb-table-cell-padding-block: var(--kb-space-3);
596
+ --kb-table-cell-padding-inline: var(--kb-space-4);
597
+ --kb-table-dense-padding-block: var(--kb-space-1);
598
+ --kb-table-radius: var(--kb-radius-md);
599
+ --kb-table-sort-target: var(--kb-space-6);
600
+ --kb-descriptionlist-term-width: 12rem;
601
+ --kb-descriptionlist-padding-block: var(--kb-space-3);
602
+ --kb-descriptionlist-dense-padding-block: var(--kb-space-1);
603
+ --kb-descriptionlist-column-gap: var(--kb-space-6);
604
+ --kb-descriptionlist-row-gap: var(--kb-space-2);
605
+ --kb-collectionrow-padding-block: var(--kb-space-3);
606
+ --kb-collectionrow-padding-inline: var(--kb-space-4);
607
+ --kb-collectionrow-dense-padding-block: var(--kb-space-1);
608
+ --kb-collectionrow-leading-width: 3rem;
609
+ --kb-collectionrow-aside-width: 12rem;
610
+ --kb-collectionrow-gap: var(--kb-space-3);
611
+ --kb-pageheader-gap: var(--kb-space-4);
612
+ --kb-pageheader-main-gap: var(--kb-space-4);
613
+ --kb-pageheader-heading-gap: var(--kb-space-1);
614
+ --kb-pageheader-headline-gap: var(--kb-space-2);
615
+ --kb-pageheader-actions-gap: var(--kb-space-2);
616
+ --kb-pageheader-heading-min-width: 18rem;
617
+ --kb-pageheader-description-max-width: var(--kb-text-measure);
618
+ --kb-pageheader-title-size-sm: var(--kb-heading-size-lg);
619
+ --kb-pageheader-title-size-md: var(--kb-heading-size-xl);
620
+ --kb-pageheader-title-size-lg: var(--kb-heading-size-display);
621
+ --kb-pageheader-divider: var(--kb-color-border);
622
+ --kb-pageheader-divider-gap: var(--kb-space-5);
623
+ --kb-statsrow-column-gap: var(--kb-space-5);
624
+ --kb-statsrow-row-gap: var(--kb-space-5);
625
+ --kb-statsrow-item-gap: var(--kb-space-2);
626
+ --kb-statsrow-item-min-width: 10rem;
627
+ --kb-statsrow-item-padding: var(--kb-space-4);
628
+ --kb-statsrow-item-background: var(--kb-card-background);
629
+ --kb-statsrow-item-border: var(--kb-card-border);
630
+ --kb-statsrow-item-border-width: var(--kb-card-border-width);
631
+ --kb-statsrow-item-radius: var(--kb-card-radius);
632
+ --kb-statsrow-positive: var(--kb-color-success);
633
+ --kb-statsrow-negative: var(--kb-color-danger);
634
+ --kb-statsrow-neutral: var(--kb-color-muted);
635
+ --kb-dashboard-gap: var(--kb-space-6);
636
+ --kb-dashboard-max-width: var(--kb-container-size-lg);
637
+ --kb-dashboard-gutter-sm: var(--kb-space-4);
638
+ --kb-dashboard-gutter-md: var(--kb-space-6);
639
+ --kb-dashboard-gutter-lg: var(--kb-space-8);
640
+ --kb-dashboard-gutter-md-from: 48rem;
641
+ --kb-dashboard-gutter-lg-from: 64rem;
642
+ --kb-dashboard-collapse: 60rem;
365
643
  color-scheme: light;
366
644
  }
367
645
 
@@ -426,6 +704,7 @@
426
704
  --kb-panel-background: var(--kb-material-surface-bg);
427
705
  --kb-panel-background-active: var(--kb-material-surface-bg);
428
706
  --kb-panel-background-sunken: var(--kb-material-field-bg);
707
+ --kb-panel-background-opaque: var(--kb-material-surface-bg);
429
708
  --kb-panel-border: var(--kb-color-border);
430
709
  --kb-panel-border-active: var(--kb-color-accent);
431
710
  --kb-panel-border-critical: var(--kb-color-danger);
@@ -484,7 +763,75 @@
484
763
  --kb-link-hover: var(--kb-color-fg);
485
764
  --kb-code-background: var(--kb-color-surface);
486
765
  --kb-code-border: var(--kb-color-border);
766
+ --kb-code-block-background: var(--kb-material-field-bg);
767
+ --kb-code-block-face: var(--kb-material-recessed-face);
768
+ --kb-code-block-border: var(--kb-color-border);
769
+ --kb-code-block-shadow: var(--kb-material-panel-shadow);
770
+ --kb-code-header-background: var(--kb-color-surface);
771
+ --kb-code-header-face: linear-gradient(180deg, var(--kb-material-raised-top), var(--kb-color-surface));
772
+ --kb-code-header-shadow: var(--kb-material-inlay-shadow);
773
+ --kb-code-gutter-color: var(--kb-color-muted);
774
+ --kb-code-gutter-border: var(--kb-material-soft-border);
775
+ --kb-code-line-highlight-background: #f4e6df;
776
+ --kb-code-line-highlight-border: var(--kb-color-accent);
777
+ --kb-code-syntax-keyword: #9a3412;
778
+ --kb-code-syntax-string: #1b5e43;
779
+ --kb-code-syntax-comment: var(--kb-color-muted);
780
+ --kb-code-syntax-number: #7c470b;
781
+ --kb-code-syntax-tag: #1d4f73;
782
+ --kb-code-syntax-attribute: #6d452b;
783
+ --kb-code-syntax-type: #5b378a;
784
+ --kb-code-syntax-function: #175966;
785
+ --kb-code-syntax-operator: #47505e;
786
+ --kb-code-syntax-property: #1f5173;
487
787
  --kb-separator-color: var(--kb-color-border);
788
+ --kb-settings-divider: var(--kb-color-border);
789
+ --kb-skeleton-base: var(--kb-color-surface);
790
+ --kb-skeleton-highlight: var(--kb-material-raised-top);
791
+ --kb-skeleton-border: var(--kb-material-soft-border);
792
+ --kb-emptystate-background: var(--kb-material-surface-bg);
793
+ --kb-emptystate-border: var(--kb-color-border);
794
+ --kb-emptystate-shadow: var(--kb-material-panel-shadow);
795
+ --kb-toast-background: var(--kb-material-surface-bg);
796
+ --kb-toast-color: var(--kb-color-fg);
797
+ --kb-toast-border: var(--kb-color-border);
798
+ --kb-toast-shadow: var(--kb-material-float-shadow);
799
+ --kb-image-border: var(--kb-material-soft-border);
800
+ --kb-image-background: var(--kb-color-surface);
801
+ --kb-image-color: var(--kb-color-muted);
802
+ --kb-avatar-background: var(--kb-color-surface);
803
+ --kb-avatar-color: var(--kb-color-fg);
804
+ --kb-avatar-border: var(--kb-material-soft-border);
805
+ --kb-avatar-shadow: var(--kb-material-inlay-shadow);
806
+ --kb-thumbnail-color: var(--kb-color-fg);
807
+ --kb-thumbnail-muted: var(--kb-color-muted);
808
+ --kb-collection-border: var(--kb-color-border);
809
+ --kb-collection-header-background: var(--kb-color-surface);
810
+ --kb-collection-selected-background: var(--kb-color-surface);
811
+ --kb-copyabletext-border: var(--kb-color-border);
812
+ --kb-copyabletext-background: var(--kb-color-surface);
813
+ --kb-copyabletext-value-color: var(--kb-color-fg);
814
+ --kb-copyabletext-highlight-background: color-mix(in srgb, var(--kb-color-warning) 16%, var(--kb-color-surface));
815
+ --kb-disclosure-background: var(--kb-color-bg);
816
+ --kb-disclosure-color: var(--kb-color-fg);
817
+ --kb-disclosure-border: var(--kb-color-border);
818
+ --kb-accordion-background: var(--kb-color-bg);
819
+ --kb-accordion-color: var(--kb-color-fg);
820
+ --kb-accordion-border: var(--kb-color-border);
821
+ --kb-popover-background: var(--kb-popup-background);
822
+ --kb-popover-color: var(--kb-color-fg);
823
+ --kb-popover-border: var(--kb-popup-border);
824
+ --kb-popover-shadow: var(--kb-popup-shadow);
825
+ --kb-table-background: var(--kb-color-bg);
826
+ --kb-table-header-background: var(--kb-color-surface);
827
+ --kb-table-selected-background: var(--kb-color-surface);
828
+ --kb-table-border: var(--kb-color-border);
829
+ --kb-pageheader-divider: var(--kb-color-border);
830
+ --kb-statsrow-item-background: var(--kb-card-background);
831
+ --kb-statsrow-item-border: var(--kb-card-border);
832
+ --kb-statsrow-positive: var(--kb-color-success);
833
+ --kb-statsrow-negative: var(--kb-color-danger);
834
+ --kb-statsrow-neutral: var(--kb-color-muted);
488
835
  color-scheme: light;
489
836
  }
490
837
 
@@ -549,6 +896,7 @@
549
896
  --kb-panel-background: var(--kb-material-surface-bg);
550
897
  --kb-panel-background-active: var(--kb-material-surface-bg);
551
898
  --kb-panel-background-sunken: var(--kb-material-field-bg);
899
+ --kb-panel-background-opaque: var(--kb-material-surface-bg);
552
900
  --kb-panel-border: var(--kb-color-border);
553
901
  --kb-panel-border-active: var(--kb-color-accent);
554
902
  --kb-panel-border-critical: var(--kb-color-danger);
@@ -607,7 +955,75 @@
607
955
  --kb-link-hover: var(--kb-color-fg);
608
956
  --kb-code-background: var(--kb-color-surface);
609
957
  --kb-code-border: var(--kb-color-border);
958
+ --kb-code-block-background: var(--kb-material-field-bg);
959
+ --kb-code-block-face: var(--kb-material-recessed-face);
960
+ --kb-code-block-border: var(--kb-color-border);
961
+ --kb-code-block-shadow: var(--kb-material-panel-shadow);
962
+ --kb-code-header-background: var(--kb-color-surface);
963
+ --kb-code-header-face: linear-gradient(180deg, color-mix(in srgb, var(--kb-material-raised-top) 45%, var(--kb-color-surface)), var(--kb-color-surface));
964
+ --kb-code-header-shadow: var(--kb-material-inlay-shadow);
965
+ --kb-code-gutter-color: var(--kb-color-muted);
966
+ --kb-code-gutter-border: var(--kb-material-soft-border);
967
+ --kb-code-line-highlight-background: #2a201b;
968
+ --kb-code-line-highlight-border: var(--kb-color-accent);
969
+ --kb-code-syntax-keyword: #ff9e7d;
970
+ --kb-code-syntax-string: #8fd4b5;
971
+ --kb-code-syntax-comment: var(--kb-color-muted);
972
+ --kb-code-syntax-number: #f2c46d;
973
+ --kb-code-syntax-tag: #8cc4f0;
974
+ --kb-code-syntax-attribute: #e5b899;
975
+ --kb-code-syntax-type: #cfaef2;
976
+ --kb-code-syntax-function: #7fd1de;
977
+ --kb-code-syntax-operator: #c8d0dc;
978
+ --kb-code-syntax-property: #9ac7eb;
610
979
  --kb-separator-color: var(--kb-color-border);
980
+ --kb-settings-divider: var(--kb-color-border);
981
+ --kb-skeleton-base: var(--kb-color-surface);
982
+ --kb-skeleton-highlight: var(--kb-material-raised-top);
983
+ --kb-skeleton-border: var(--kb-material-soft-border);
984
+ --kb-emptystate-background: var(--kb-material-surface-bg);
985
+ --kb-emptystate-border: var(--kb-color-border);
986
+ --kb-emptystate-shadow: var(--kb-material-panel-shadow);
987
+ --kb-toast-background: var(--kb-material-surface-bg);
988
+ --kb-toast-color: var(--kb-color-fg);
989
+ --kb-toast-border: var(--kb-color-border);
990
+ --kb-toast-shadow: var(--kb-material-float-shadow);
991
+ --kb-image-border: var(--kb-material-soft-border);
992
+ --kb-image-background: var(--kb-color-surface);
993
+ --kb-image-color: var(--kb-color-muted);
994
+ --kb-avatar-background: var(--kb-color-surface);
995
+ --kb-avatar-color: var(--kb-color-fg);
996
+ --kb-avatar-border: var(--kb-material-soft-border);
997
+ --kb-avatar-shadow: var(--kb-material-inlay-shadow);
998
+ --kb-thumbnail-color: var(--kb-color-fg);
999
+ --kb-thumbnail-muted: var(--kb-color-muted);
1000
+ --kb-collection-border: var(--kb-color-border);
1001
+ --kb-collection-header-background: var(--kb-color-surface);
1002
+ --kb-collection-selected-background: var(--kb-color-surface);
1003
+ --kb-copyabletext-border: var(--kb-color-border);
1004
+ --kb-copyabletext-background: var(--kb-color-surface);
1005
+ --kb-copyabletext-value-color: var(--kb-color-fg);
1006
+ --kb-copyabletext-highlight-background: color-mix(in srgb, var(--kb-color-warning) 16%, var(--kb-color-surface));
1007
+ --kb-disclosure-background: var(--kb-color-bg);
1008
+ --kb-disclosure-color: var(--kb-color-fg);
1009
+ --kb-disclosure-border: var(--kb-color-border);
1010
+ --kb-accordion-background: var(--kb-color-bg);
1011
+ --kb-accordion-color: var(--kb-color-fg);
1012
+ --kb-accordion-border: var(--kb-color-border);
1013
+ --kb-popover-background: var(--kb-popup-background);
1014
+ --kb-popover-color: var(--kb-color-fg);
1015
+ --kb-popover-border: var(--kb-popup-border);
1016
+ --kb-popover-shadow: var(--kb-popup-shadow);
1017
+ --kb-table-background: var(--kb-color-bg);
1018
+ --kb-table-header-background: var(--kb-color-surface);
1019
+ --kb-table-selected-background: var(--kb-color-surface);
1020
+ --kb-table-border: var(--kb-color-border);
1021
+ --kb-pageheader-divider: var(--kb-color-border);
1022
+ --kb-statsrow-item-background: var(--kb-card-background);
1023
+ --kb-statsrow-item-border: var(--kb-card-border);
1024
+ --kb-statsrow-positive: var(--kb-color-success);
1025
+ --kb-statsrow-negative: var(--kb-color-danger);
1026
+ --kb-statsrow-neutral: var(--kb-color-muted);
611
1027
  color-scheme: dark;
612
1028
  }
613
1029
 
@@ -673,6 +1089,7 @@
673
1089
  --kb-panel-background: var(--kb-material-surface-bg);
674
1090
  --kb-panel-background-active: var(--kb-material-surface-bg);
675
1091
  --kb-panel-background-sunken: var(--kb-material-field-bg);
1092
+ --kb-panel-background-opaque: var(--kb-material-surface-bg);
676
1093
  --kb-panel-border: var(--kb-color-border);
677
1094
  --kb-panel-border-active: var(--kb-color-accent);
678
1095
  --kb-panel-border-critical: var(--kb-color-danger);
@@ -731,7 +1148,75 @@
731
1148
  --kb-link-hover: var(--kb-color-fg);
732
1149
  --kb-code-background: var(--kb-color-surface);
733
1150
  --kb-code-border: var(--kb-color-border);
1151
+ --kb-code-block-background: var(--kb-material-field-bg);
1152
+ --kb-code-block-face: var(--kb-material-recessed-face);
1153
+ --kb-code-block-border: var(--kb-color-border);
1154
+ --kb-code-block-shadow: var(--kb-material-panel-shadow);
1155
+ --kb-code-header-background: var(--kb-color-surface);
1156
+ --kb-code-header-face: linear-gradient(180deg, color-mix(in srgb, var(--kb-material-raised-top) 45%, var(--kb-color-surface)), var(--kb-color-surface));
1157
+ --kb-code-header-shadow: var(--kb-material-inlay-shadow);
1158
+ --kb-code-gutter-color: var(--kb-color-muted);
1159
+ --kb-code-gutter-border: var(--kb-material-soft-border);
1160
+ --kb-code-line-highlight-background: #2a201b;
1161
+ --kb-code-line-highlight-border: var(--kb-color-accent);
1162
+ --kb-code-syntax-keyword: #ff9e7d;
1163
+ --kb-code-syntax-string: #8fd4b5;
1164
+ --kb-code-syntax-comment: var(--kb-color-muted);
1165
+ --kb-code-syntax-number: #f2c46d;
1166
+ --kb-code-syntax-tag: #8cc4f0;
1167
+ --kb-code-syntax-attribute: #e5b899;
1168
+ --kb-code-syntax-type: #cfaef2;
1169
+ --kb-code-syntax-function: #7fd1de;
1170
+ --kb-code-syntax-operator: #c8d0dc;
1171
+ --kb-code-syntax-property: #9ac7eb;
734
1172
  --kb-separator-color: var(--kb-color-border);
1173
+ --kb-settings-divider: var(--kb-color-border);
1174
+ --kb-skeleton-base: var(--kb-color-surface);
1175
+ --kb-skeleton-highlight: var(--kb-material-raised-top);
1176
+ --kb-skeleton-border: var(--kb-material-soft-border);
1177
+ --kb-emptystate-background: var(--kb-material-surface-bg);
1178
+ --kb-emptystate-border: var(--kb-color-border);
1179
+ --kb-emptystate-shadow: var(--kb-material-panel-shadow);
1180
+ --kb-toast-background: var(--kb-material-surface-bg);
1181
+ --kb-toast-color: var(--kb-color-fg);
1182
+ --kb-toast-border: var(--kb-color-border);
1183
+ --kb-toast-shadow: var(--kb-material-float-shadow);
1184
+ --kb-image-border: var(--kb-material-soft-border);
1185
+ --kb-image-background: var(--kb-color-surface);
1186
+ --kb-image-color: var(--kb-color-muted);
1187
+ --kb-avatar-background: var(--kb-color-surface);
1188
+ --kb-avatar-color: var(--kb-color-fg);
1189
+ --kb-avatar-border: var(--kb-material-soft-border);
1190
+ --kb-avatar-shadow: var(--kb-material-inlay-shadow);
1191
+ --kb-thumbnail-color: var(--kb-color-fg);
1192
+ --kb-thumbnail-muted: var(--kb-color-muted);
1193
+ --kb-collection-border: var(--kb-color-border);
1194
+ --kb-collection-header-background: var(--kb-color-surface);
1195
+ --kb-collection-selected-background: var(--kb-color-surface);
1196
+ --kb-copyabletext-border: var(--kb-color-border);
1197
+ --kb-copyabletext-background: var(--kb-color-surface);
1198
+ --kb-copyabletext-value-color: var(--kb-color-fg);
1199
+ --kb-copyabletext-highlight-background: color-mix(in srgb, var(--kb-color-warning) 16%, var(--kb-color-surface));
1200
+ --kb-disclosure-background: var(--kb-color-bg);
1201
+ --kb-disclosure-color: var(--kb-color-fg);
1202
+ --kb-disclosure-border: var(--kb-color-border);
1203
+ --kb-accordion-background: var(--kb-color-bg);
1204
+ --kb-accordion-color: var(--kb-color-fg);
1205
+ --kb-accordion-border: var(--kb-color-border);
1206
+ --kb-popover-background: var(--kb-popup-background);
1207
+ --kb-popover-color: var(--kb-color-fg);
1208
+ --kb-popover-border: var(--kb-popup-border);
1209
+ --kb-popover-shadow: var(--kb-popup-shadow);
1210
+ --kb-table-background: var(--kb-color-bg);
1211
+ --kb-table-header-background: var(--kb-color-surface);
1212
+ --kb-table-selected-background: var(--kb-color-surface);
1213
+ --kb-table-border: var(--kb-color-border);
1214
+ --kb-pageheader-divider: var(--kb-color-border);
1215
+ --kb-statsrow-item-background: var(--kb-card-background);
1216
+ --kb-statsrow-item-border: var(--kb-card-border);
1217
+ --kb-statsrow-positive: var(--kb-color-success);
1218
+ --kb-statsrow-negative: var(--kb-color-danger);
1219
+ --kb-statsrow-neutral: var(--kb-color-muted);
735
1220
  color-scheme: dark;
736
1221
  }
737
1222
  }
@@ -759,5 +1244,17 @@
759
1244
  --kb-viz-path: CanvasText;
760
1245
  --kb-viz-path-bg: Canvas;
761
1246
  --kb-viz-path-fg: CanvasText;
1247
+ --kb-code-line-highlight-background: Mark;
1248
+ --kb-code-line-highlight-border: Highlight;
1249
+ --kb-code-syntax-keyword: CanvasText;
1250
+ --kb-code-syntax-string: CanvasText;
1251
+ --kb-code-syntax-comment: GrayText;
1252
+ --kb-code-syntax-number: CanvasText;
1253
+ --kb-code-syntax-tag: CanvasText;
1254
+ --kb-code-syntax-attribute: CanvasText;
1255
+ --kb-code-syntax-type: CanvasText;
1256
+ --kb-code-syntax-function: CanvasText;
1257
+ --kb-code-syntax-operator: CanvasText;
1258
+ --kb-code-syntax-property: CanvasText;
762
1259
  }
763
1260
  }