@kb.ui/tokens 0.10.3 → 0.11.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 (5) hide show
  1. package/dist/tokens.css +418 -0
  2. package/dist/tokens.d.ts +273 -0
  3. package/dist/tokens.js +276 -3
  4. package/package.json +1 -1
  5. package/tokens.json +991 -0
package/dist/tokens.css CHANGED
@@ -115,6 +115,9 @@
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
116
  --kb-grid-gap: var(--kb-space-6);
117
117
  --kb-grid-min-item-width: 18.75rem;
118
+ --kb-grid-min-item-width-sm: 14rem;
119
+ --kb-grid-min-item-width-md: var(--kb-grid-min-item-width);
120
+ --kb-grid-min-item-width-lg: 24rem;
118
121
  --kb-button-radius: var(--kb-radius-md);
119
122
  --kb-button-motion-duration: 140ms;
120
123
  --kb-button-motion-easing: ease;
@@ -165,6 +168,8 @@
165
168
  --kb-dialog-header-padding: 0px;
166
169
  --kb-dialog-body-padding: 0px;
167
170
  --kb-dialog-footer-padding: 0px;
171
+ --kb-dialog-drawer-motion-duration: var(--kb-motion-duration-slow);
172
+ --kb-dialog-drawer-motion-easing: var(--kb-motion-easing-standard);
168
173
  --kb-panel-background: var(--kb-material-surface-bg);
169
174
  --kb-panel-background-active: var(--kb-material-surface-bg);
170
175
  --kb-panel-background-sunken: var(--kb-material-field-bg);
@@ -338,6 +343,52 @@
338
343
  --kb-code-background: var(--kb-color-surface);
339
344
  --kb-code-border: var(--kb-color-border);
340
345
  --kb-code-radius: var(--kb-radius-sm);
346
+ --kb-code-block-radius: var(--kb-radius-lg);
347
+ --kb-code-block-background: var(--kb-material-field-bg);
348
+ --kb-code-block-face: var(--kb-material-recessed-face);
349
+ --kb-code-block-border: var(--kb-color-border);
350
+ --kb-code-block-shadow: var(--kb-material-panel-shadow);
351
+ --kb-code-block-padding-block: var(--kb-space-4);
352
+ --kb-code-block-padding-inline: var(--kb-space-4);
353
+ --kb-code-block-font-size: var(--kb-text-small-size);
354
+ --kb-code-block-leading: 1.65;
355
+ --kb-code-block-max-height: 22rem;
356
+ --kb-code-collapsed-max-height: 9.5rem;
357
+ --kb-code-header-background: var(--kb-color-surface);
358
+ --kb-code-header-face: linear-gradient(180deg, var(--kb-material-raised-top), var(--kb-color-surface));
359
+ --kb-code-header-shadow: var(--kb-material-inlay-shadow);
360
+ --kb-code-header-padding-block: var(--kb-space-2);
361
+ --kb-code-header-padding-inline: var(--kb-space-4);
362
+ --kb-code-header-gap: var(--kb-space-3);
363
+ --kb-code-title-size: var(--kb-text-caption-size);
364
+ --kb-code-badge-padding-block: 2px;
365
+ --kb-code-badge-padding-inline: var(--kb-space-2);
366
+ --kb-code-badge-radius: var(--kb-radius-sm);
367
+ --kb-code-action-height: 1.75rem;
368
+ --kb-code-action-padding-inline: var(--kb-space-2);
369
+ --kb-code-action-gap: var(--kb-space-1);
370
+ --kb-code-action-radius: var(--kb-radius-md);
371
+ --kb-code-toggle-min-width: 7.5rem;
372
+ --kb-code-copy-min-width: 6.5rem;
373
+ --kb-code-motion-duration: var(--kb-motion-duration-slow);
374
+ --kb-code-motion-easing: var(--kb-motion-easing-standard);
375
+ --kb-code-gutter-width: 2.5rem;
376
+ --kb-code-gutter-gap: var(--kb-space-3);
377
+ --kb-code-gutter-color: var(--kb-color-muted);
378
+ --kb-code-gutter-border: var(--kb-material-soft-border);
379
+ --kb-code-line-padding-inline: var(--kb-space-4);
380
+ --kb-code-line-highlight-background: #f4e6df;
381
+ --kb-code-line-highlight-border: var(--kb-color-accent);
382
+ --kb-code-syntax-keyword: #9a3412;
383
+ --kb-code-syntax-string: #1b5e43;
384
+ --kb-code-syntax-comment: var(--kb-color-muted);
385
+ --kb-code-syntax-number: #7c470b;
386
+ --kb-code-syntax-tag: #1d4f73;
387
+ --kb-code-syntax-attribute: #6d452b;
388
+ --kb-code-syntax-type: #5b378a;
389
+ --kb-code-syntax-function: #175966;
390
+ --kb-code-syntax-operator: #47505e;
391
+ --kb-code-syntax-property: #1f5173;
341
392
  --kb-container-size-sm: 40rem;
342
393
  --kb-container-size-md: 64rem;
343
394
  --kb-container-size-lg: 80rem;
@@ -362,6 +413,178 @@
362
413
  --kb-errorsummary-padding: var(--kb-space-4);
363
414
  --kb-errorsummary-radius: var(--kb-radius-md);
364
415
  --kb-errorsummary-gap: var(--kb-space-2);
416
+ --kb-spinner-size-sm: 0.875rem;
417
+ --kb-spinner-size-md: 1.125rem;
418
+ --kb-spinner-size-lg: 1.5rem;
419
+ --kb-spinner-stroke-width: 2px;
420
+ --kb-spinner-gap: var(--kb-space-2);
421
+ --kb-spinner-duration: 760ms;
422
+ --kb-spinner-easing: linear;
423
+ --kb-spinner-track-opacity: 0.22;
424
+ --kb-spinner-orbit-duration: 1140ms;
425
+ --kb-spinner-pulse-duration: 960ms;
426
+ --kb-spinner-pulse-easing: var(--kb-motion-easing-smooth);
427
+ --kb-spinner-stagger: 140ms;
428
+ --kb-spinner-glow: 6px;
429
+ --kb-spinner-pill-padding-block: var(--kb-space-1);
430
+ --kb-spinner-pill-padding-inline: var(--kb-space-3);
431
+ --kb-spinner-pill-radius: var(--kb-radius-full);
432
+ --kb-skeleton-radius-sm: var(--kb-radius-sm);
433
+ --kb-skeleton-radius-md: var(--kb-radius-md);
434
+ --kb-skeleton-radius-lg: var(--kb-radius-lg);
435
+ --kb-skeleton-radius-full: var(--kb-radius-full);
436
+ --kb-skeleton-height-sm: 0.75rem;
437
+ --kb-skeleton-height-md: 1rem;
438
+ --kb-skeleton-height-lg: 1.5rem;
439
+ --kb-skeleton-block-height: 5.5rem;
440
+ --kb-skeleton-avatar-size-sm: 2rem;
441
+ --kb-skeleton-avatar-size-md: 2.5rem;
442
+ --kb-skeleton-avatar-size-lg: 3.5rem;
443
+ --kb-skeleton-pill-width: 5.5rem;
444
+ --kb-skeleton-gap: var(--kb-space-2);
445
+ --kb-skeleton-base: var(--kb-color-surface);
446
+ --kb-skeleton-highlight: var(--kb-material-raised-top);
447
+ --kb-skeleton-sheen: var(--kb-material-soft-sheen);
448
+ --kb-skeleton-border: var(--kb-material-soft-border);
449
+ --kb-skeleton-duration: 1600ms;
450
+ --kb-skeleton-pulse-duration: 1800ms;
451
+ --kb-skeleton-stagger: 120ms;
452
+ --kb-skeleton-easing: var(--kb-motion-easing-smooth);
453
+ --kb-emptystate-radius: var(--kb-radius-lg);
454
+ --kb-emptystate-padding-sm: var(--kb-space-4);
455
+ --kb-emptystate-padding-md: var(--kb-space-6);
456
+ --kb-emptystate-padding-lg: var(--kb-space-8);
457
+ --kb-emptystate-gap: var(--kb-space-4);
458
+ --kb-emptystate-header-gap: var(--kb-space-1);
459
+ --kb-emptystate-actions-gap: var(--kb-space-2);
460
+ --kb-emptystate-max-width: 32rem;
461
+ --kb-emptystate-icon-size-sm: 2.25rem;
462
+ --kb-emptystate-icon-size-md: 2.75rem;
463
+ --kb-emptystate-icon-size-lg: 3.25rem;
464
+ --kb-emptystate-icon-glyph-size-sm: 1rem;
465
+ --kb-emptystate-icon-glyph-size-md: 1.25rem;
466
+ --kb-emptystate-icon-glyph-size-lg: 1.5rem;
467
+ --kb-emptystate-icon-radius: var(--kb-radius-md);
468
+ --kb-emptystate-background: var(--kb-material-surface-bg);
469
+ --kb-emptystate-border: var(--kb-color-border);
470
+ --kb-emptystate-shadow: var(--kb-material-panel-shadow);
471
+ --kb-toast-width: 24rem;
472
+ --kb-toast-gutter: var(--kb-space-4);
473
+ --kb-toast-gap: var(--kb-space-3);
474
+ --kb-toast-padding: var(--kb-space-4);
475
+ --kb-toast-radius: var(--kb-radius-lg);
476
+ --kb-toast-background: var(--kb-material-surface-bg);
477
+ --kb-toast-color: var(--kb-color-fg);
478
+ --kb-toast-border: var(--kb-color-border);
479
+ --kb-toast-shadow: var(--kb-material-float-shadow);
480
+ --kb-toast-control-size: var(--kb-space-8);
481
+ --kb-toast-motion-duration: 240ms;
482
+ --kb-toast-z-index: 1000;
483
+ --kb-toast-exit-duration: 160ms;
484
+ --kb-toast-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
485
+ --kb-toast-enter-offset: var(--kb-space-3);
486
+ --kb-toast-enter-scale: 0.985;
487
+ --kb-image-radius: var(--kb-radius-lg);
488
+ --kb-image-border: var(--kb-material-soft-border);
489
+ --kb-image-background: var(--kb-color-surface);
490
+ --kb-image-color: var(--kb-color-muted);
491
+ --kb-image-ratio: 4 / 3;
492
+ --kb-image-icon-size: var(--kb-space-8);
493
+ --kb-image-fallback-padding: var(--kb-space-3);
494
+ --kb-avatar-size: 2.75rem;
495
+ --kb-avatar-size-xs: var(--kb-space-6);
496
+ --kb-avatar-size-sm: var(--kb-space-8);
497
+ --kb-avatar-size-lg: 3.5rem;
498
+ --kb-avatar-size-xl: 5rem;
499
+ --kb-avatar-radius: var(--kb-radius-full);
500
+ --kb-avatar-square-radius: var(--kb-radius-lg);
501
+ --kb-avatar-font-size: var(--kb-text-body-size);
502
+ --kb-avatar-font-size-xs: var(--kb-text-caption-size);
503
+ --kb-avatar-font-size-sm: var(--kb-text-small-size);
504
+ --kb-avatar-font-size-lg: var(--kb-size-lg);
505
+ --kb-avatar-font-size-xl: var(--kb-text-h2-size);
506
+ --kb-avatar-font-weight: var(--kb-font-weight-strong);
507
+ --kb-avatar-tracking: -0.02em;
508
+ --kb-avatar-background: var(--kb-color-surface);
509
+ --kb-avatar-color: var(--kb-color-fg);
510
+ --kb-avatar-border: var(--kb-material-soft-border);
511
+ --kb-avatar-shadow: var(--kb-material-inlay-shadow);
512
+ --kb-thumbnail-gap: var(--kb-space-3);
513
+ --kb-thumbnail-caption-gap: var(--kb-space-1);
514
+ --kb-thumbnail-radius: var(--kb-radius-lg);
515
+ --kb-thumbnail-color: var(--kb-color-fg);
516
+ --kb-thumbnail-muted: var(--kb-color-muted);
517
+ --kb-thumbnail-title-size: var(--kb-text-body-size);
518
+ --kb-thumbnail-description-size: var(--kb-text-small-size);
519
+ --kb-collection-gap: var(--kb-space-3);
520
+ --kb-collection-cell-padding: var(--kb-space-3);
521
+ --kb-collection-radius: var(--kb-radius-md);
522
+ --kb-collection-border: var(--kb-color-border);
523
+ --kb-collection-header-background: var(--kb-color-surface);
524
+ --kb-collection-selected-background: var(--kb-color-surface);
525
+ --kb-collection-table-min-width: 36rem;
526
+ --kb-copyabletext-gap: var(--kb-space-3);
527
+ --kb-copyabletext-padding: var(--kb-space-3);
528
+ --kb-copyabletext-radius: var(--kb-radius-lg);
529
+ --kb-copyabletext-border: var(--kb-color-border);
530
+ --kb-copyabletext-background: var(--kb-color-surface);
531
+ --kb-copyabletext-target-size: var(--kb-button-height-md);
532
+ --kb-copyabletext-copy-min-width: 5.5rem;
533
+ --kb-copyabletext-value-color: var(--kb-color-fg);
534
+ --kb-copyabletext-highlight-background: color-mix(in srgb, var(--kb-color-warning) 16%, var(--kb-color-surface));
535
+ --kb-disclosure-padding: var(--kb-space-4);
536
+ --kb-disclosure-radius: var(--kb-radius-md);
537
+ --kb-disclosure-background: var(--kb-color-bg);
538
+ --kb-disclosure-color: var(--kb-color-fg);
539
+ --kb-disclosure-border: var(--kb-color-border);
540
+ --kb-disclosure-trigger-height: 2.75rem;
541
+ --kb-disclosure-motion-duration: var(--kb-motion-duration-slow);
542
+ --kb-disclosure-motion-easing: var(--kb-motion-easing-standard);
543
+ --kb-accordion-padding: var(--kb-space-4);
544
+ --kb-accordion-radius: var(--kb-radius-md);
545
+ --kb-accordion-background: var(--kb-color-bg);
546
+ --kb-accordion-color: var(--kb-color-fg);
547
+ --kb-accordion-border: var(--kb-color-border);
548
+ --kb-accordion-trigger-height: 2.75rem;
549
+ --kb-accordion-motion-duration: var(--kb-motion-duration-slow);
550
+ --kb-accordion-motion-easing: var(--kb-motion-easing-standard);
551
+ --kb-popover-width: 20rem;
552
+ --kb-popover-padding: var(--kb-space-4);
553
+ --kb-popover-background: var(--kb-popup-background);
554
+ --kb-popover-color: var(--kb-color-fg);
555
+ --kb-popover-border: var(--kb-popup-border);
556
+ --kb-popover-radius: var(--kb-popup-radius);
557
+ --kb-popover-shadow: var(--kb-popup-shadow);
558
+ --kb-popover-motion-duration: var(--kb-motion-duration-base);
559
+ --kb-popover-motion-easing: var(--kb-motion-easing-standard);
560
+ --kb-popover-enter-scale: 0.98;
561
+ --kb-popover-enter-offset: var(--kb-space-1);
562
+ --kb-tabs-radius: var(--kb-radius-md);
563
+ --kb-tabs-list-padding: 3px;
564
+ --kb-tabs-tab-height-sm: var(--kb-button-height-sm);
565
+ --kb-tabs-tab-height-md: var(--kb-button-height-md);
566
+ --kb-tabs-indicator-thickness: 2px;
567
+ --kb-tabs-panel-padding: var(--kb-space-4);
568
+ --kb-table-background: var(--kb-color-bg);
569
+ --kb-table-header-background: var(--kb-color-surface);
570
+ --kb-table-selected-background: var(--kb-color-surface);
571
+ --kb-table-border: var(--kb-color-border);
572
+ --kb-table-cell-padding-block: var(--kb-space-3);
573
+ --kb-table-cell-padding-inline: var(--kb-space-4);
574
+ --kb-table-dense-padding-block: var(--kb-space-1);
575
+ --kb-table-radius: var(--kb-radius-md);
576
+ --kb-table-sort-target: var(--kb-space-6);
577
+ --kb-descriptionlist-term-width: 12rem;
578
+ --kb-descriptionlist-padding-block: var(--kb-space-3);
579
+ --kb-descriptionlist-dense-padding-block: var(--kb-space-1);
580
+ --kb-descriptionlist-column-gap: var(--kb-space-6);
581
+ --kb-descriptionlist-row-gap: var(--kb-space-2);
582
+ --kb-collectionrow-padding-block: var(--kb-space-3);
583
+ --kb-collectionrow-padding-inline: var(--kb-space-4);
584
+ --kb-collectionrow-dense-padding-block: var(--kb-space-1);
585
+ --kb-collectionrow-leading-width: 3rem;
586
+ --kb-collectionrow-aside-width: 12rem;
587
+ --kb-collectionrow-gap: var(--kb-space-3);
365
588
  color-scheme: light;
366
589
  }
367
590
 
@@ -484,7 +707,68 @@
484
707
  --kb-link-hover: var(--kb-color-fg);
485
708
  --kb-code-background: var(--kb-color-surface);
486
709
  --kb-code-border: var(--kb-color-border);
710
+ --kb-code-block-background: var(--kb-material-field-bg);
711
+ --kb-code-block-face: var(--kb-material-recessed-face);
712
+ --kb-code-block-border: var(--kb-color-border);
713
+ --kb-code-block-shadow: var(--kb-material-panel-shadow);
714
+ --kb-code-header-background: var(--kb-color-surface);
715
+ --kb-code-header-face: linear-gradient(180deg, var(--kb-material-raised-top), var(--kb-color-surface));
716
+ --kb-code-header-shadow: var(--kb-material-inlay-shadow);
717
+ --kb-code-gutter-color: var(--kb-color-muted);
718
+ --kb-code-gutter-border: var(--kb-material-soft-border);
719
+ --kb-code-line-highlight-background: #f4e6df;
720
+ --kb-code-line-highlight-border: var(--kb-color-accent);
721
+ --kb-code-syntax-keyword: #9a3412;
722
+ --kb-code-syntax-string: #1b5e43;
723
+ --kb-code-syntax-comment: var(--kb-color-muted);
724
+ --kb-code-syntax-number: #7c470b;
725
+ --kb-code-syntax-tag: #1d4f73;
726
+ --kb-code-syntax-attribute: #6d452b;
727
+ --kb-code-syntax-type: #5b378a;
728
+ --kb-code-syntax-function: #175966;
729
+ --kb-code-syntax-operator: #47505e;
730
+ --kb-code-syntax-property: #1f5173;
487
731
  --kb-separator-color: var(--kb-color-border);
732
+ --kb-skeleton-base: var(--kb-color-surface);
733
+ --kb-skeleton-highlight: var(--kb-material-raised-top);
734
+ --kb-skeleton-border: var(--kb-material-soft-border);
735
+ --kb-emptystate-background: var(--kb-material-surface-bg);
736
+ --kb-emptystate-border: var(--kb-color-border);
737
+ --kb-emptystate-shadow: var(--kb-material-panel-shadow);
738
+ --kb-toast-background: var(--kb-material-surface-bg);
739
+ --kb-toast-color: var(--kb-color-fg);
740
+ --kb-toast-border: var(--kb-color-border);
741
+ --kb-toast-shadow: var(--kb-material-float-shadow);
742
+ --kb-image-border: var(--kb-material-soft-border);
743
+ --kb-image-background: var(--kb-color-surface);
744
+ --kb-image-color: var(--kb-color-muted);
745
+ --kb-avatar-background: var(--kb-color-surface);
746
+ --kb-avatar-color: var(--kb-color-fg);
747
+ --kb-avatar-border: var(--kb-material-soft-border);
748
+ --kb-avatar-shadow: var(--kb-material-inlay-shadow);
749
+ --kb-thumbnail-color: var(--kb-color-fg);
750
+ --kb-thumbnail-muted: var(--kb-color-muted);
751
+ --kb-collection-border: var(--kb-color-border);
752
+ --kb-collection-header-background: var(--kb-color-surface);
753
+ --kb-collection-selected-background: var(--kb-color-surface);
754
+ --kb-copyabletext-border: var(--kb-color-border);
755
+ --kb-copyabletext-background: var(--kb-color-surface);
756
+ --kb-copyabletext-value-color: var(--kb-color-fg);
757
+ --kb-copyabletext-highlight-background: color-mix(in srgb, var(--kb-color-warning) 16%, var(--kb-color-surface));
758
+ --kb-disclosure-background: var(--kb-color-bg);
759
+ --kb-disclosure-color: var(--kb-color-fg);
760
+ --kb-disclosure-border: var(--kb-color-border);
761
+ --kb-accordion-background: var(--kb-color-bg);
762
+ --kb-accordion-color: var(--kb-color-fg);
763
+ --kb-accordion-border: var(--kb-color-border);
764
+ --kb-popover-background: var(--kb-popup-background);
765
+ --kb-popover-color: var(--kb-color-fg);
766
+ --kb-popover-border: var(--kb-popup-border);
767
+ --kb-popover-shadow: var(--kb-popup-shadow);
768
+ --kb-table-background: var(--kb-color-bg);
769
+ --kb-table-header-background: var(--kb-color-surface);
770
+ --kb-table-selected-background: var(--kb-color-surface);
771
+ --kb-table-border: var(--kb-color-border);
488
772
  color-scheme: light;
489
773
  }
490
774
 
@@ -607,7 +891,68 @@
607
891
  --kb-link-hover: var(--kb-color-fg);
608
892
  --kb-code-background: var(--kb-color-surface);
609
893
  --kb-code-border: var(--kb-color-border);
894
+ --kb-code-block-background: var(--kb-material-field-bg);
895
+ --kb-code-block-face: var(--kb-material-recessed-face);
896
+ --kb-code-block-border: var(--kb-color-border);
897
+ --kb-code-block-shadow: var(--kb-material-panel-shadow);
898
+ --kb-code-header-background: var(--kb-color-surface);
899
+ --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));
900
+ --kb-code-header-shadow: var(--kb-material-inlay-shadow);
901
+ --kb-code-gutter-color: var(--kb-color-muted);
902
+ --kb-code-gutter-border: var(--kb-material-soft-border);
903
+ --kb-code-line-highlight-background: #2a201b;
904
+ --kb-code-line-highlight-border: var(--kb-color-accent);
905
+ --kb-code-syntax-keyword: #ff9e7d;
906
+ --kb-code-syntax-string: #8fd4b5;
907
+ --kb-code-syntax-comment: var(--kb-color-muted);
908
+ --kb-code-syntax-number: #f2c46d;
909
+ --kb-code-syntax-tag: #8cc4f0;
910
+ --kb-code-syntax-attribute: #e5b899;
911
+ --kb-code-syntax-type: #cfaef2;
912
+ --kb-code-syntax-function: #7fd1de;
913
+ --kb-code-syntax-operator: #c8d0dc;
914
+ --kb-code-syntax-property: #9ac7eb;
610
915
  --kb-separator-color: var(--kb-color-border);
916
+ --kb-skeleton-base: var(--kb-color-surface);
917
+ --kb-skeleton-highlight: var(--kb-material-raised-top);
918
+ --kb-skeleton-border: var(--kb-material-soft-border);
919
+ --kb-emptystate-background: var(--kb-material-surface-bg);
920
+ --kb-emptystate-border: var(--kb-color-border);
921
+ --kb-emptystate-shadow: var(--kb-material-panel-shadow);
922
+ --kb-toast-background: var(--kb-material-surface-bg);
923
+ --kb-toast-color: var(--kb-color-fg);
924
+ --kb-toast-border: var(--kb-color-border);
925
+ --kb-toast-shadow: var(--kb-material-float-shadow);
926
+ --kb-image-border: var(--kb-material-soft-border);
927
+ --kb-image-background: var(--kb-color-surface);
928
+ --kb-image-color: var(--kb-color-muted);
929
+ --kb-avatar-background: var(--kb-color-surface);
930
+ --kb-avatar-color: var(--kb-color-fg);
931
+ --kb-avatar-border: var(--kb-material-soft-border);
932
+ --kb-avatar-shadow: var(--kb-material-inlay-shadow);
933
+ --kb-thumbnail-color: var(--kb-color-fg);
934
+ --kb-thumbnail-muted: var(--kb-color-muted);
935
+ --kb-collection-border: var(--kb-color-border);
936
+ --kb-collection-header-background: var(--kb-color-surface);
937
+ --kb-collection-selected-background: var(--kb-color-surface);
938
+ --kb-copyabletext-border: var(--kb-color-border);
939
+ --kb-copyabletext-background: var(--kb-color-surface);
940
+ --kb-copyabletext-value-color: var(--kb-color-fg);
941
+ --kb-copyabletext-highlight-background: color-mix(in srgb, var(--kb-color-warning) 16%, var(--kb-color-surface));
942
+ --kb-disclosure-background: var(--kb-color-bg);
943
+ --kb-disclosure-color: var(--kb-color-fg);
944
+ --kb-disclosure-border: var(--kb-color-border);
945
+ --kb-accordion-background: var(--kb-color-bg);
946
+ --kb-accordion-color: var(--kb-color-fg);
947
+ --kb-accordion-border: var(--kb-color-border);
948
+ --kb-popover-background: var(--kb-popup-background);
949
+ --kb-popover-color: var(--kb-color-fg);
950
+ --kb-popover-border: var(--kb-popup-border);
951
+ --kb-popover-shadow: var(--kb-popup-shadow);
952
+ --kb-table-background: var(--kb-color-bg);
953
+ --kb-table-header-background: var(--kb-color-surface);
954
+ --kb-table-selected-background: var(--kb-color-surface);
955
+ --kb-table-border: var(--kb-color-border);
611
956
  color-scheme: dark;
612
957
  }
613
958
 
@@ -731,7 +1076,68 @@
731
1076
  --kb-link-hover: var(--kb-color-fg);
732
1077
  --kb-code-background: var(--kb-color-surface);
733
1078
  --kb-code-border: var(--kb-color-border);
1079
+ --kb-code-block-background: var(--kb-material-field-bg);
1080
+ --kb-code-block-face: var(--kb-material-recessed-face);
1081
+ --kb-code-block-border: var(--kb-color-border);
1082
+ --kb-code-block-shadow: var(--kb-material-panel-shadow);
1083
+ --kb-code-header-background: var(--kb-color-surface);
1084
+ --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));
1085
+ --kb-code-header-shadow: var(--kb-material-inlay-shadow);
1086
+ --kb-code-gutter-color: var(--kb-color-muted);
1087
+ --kb-code-gutter-border: var(--kb-material-soft-border);
1088
+ --kb-code-line-highlight-background: #2a201b;
1089
+ --kb-code-line-highlight-border: var(--kb-color-accent);
1090
+ --kb-code-syntax-keyword: #ff9e7d;
1091
+ --kb-code-syntax-string: #8fd4b5;
1092
+ --kb-code-syntax-comment: var(--kb-color-muted);
1093
+ --kb-code-syntax-number: #f2c46d;
1094
+ --kb-code-syntax-tag: #8cc4f0;
1095
+ --kb-code-syntax-attribute: #e5b899;
1096
+ --kb-code-syntax-type: #cfaef2;
1097
+ --kb-code-syntax-function: #7fd1de;
1098
+ --kb-code-syntax-operator: #c8d0dc;
1099
+ --kb-code-syntax-property: #9ac7eb;
734
1100
  --kb-separator-color: var(--kb-color-border);
1101
+ --kb-skeleton-base: var(--kb-color-surface);
1102
+ --kb-skeleton-highlight: var(--kb-material-raised-top);
1103
+ --kb-skeleton-border: var(--kb-material-soft-border);
1104
+ --kb-emptystate-background: var(--kb-material-surface-bg);
1105
+ --kb-emptystate-border: var(--kb-color-border);
1106
+ --kb-emptystate-shadow: var(--kb-material-panel-shadow);
1107
+ --kb-toast-background: var(--kb-material-surface-bg);
1108
+ --kb-toast-color: var(--kb-color-fg);
1109
+ --kb-toast-border: var(--kb-color-border);
1110
+ --kb-toast-shadow: var(--kb-material-float-shadow);
1111
+ --kb-image-border: var(--kb-material-soft-border);
1112
+ --kb-image-background: var(--kb-color-surface);
1113
+ --kb-image-color: var(--kb-color-muted);
1114
+ --kb-avatar-background: var(--kb-color-surface);
1115
+ --kb-avatar-color: var(--kb-color-fg);
1116
+ --kb-avatar-border: var(--kb-material-soft-border);
1117
+ --kb-avatar-shadow: var(--kb-material-inlay-shadow);
1118
+ --kb-thumbnail-color: var(--kb-color-fg);
1119
+ --kb-thumbnail-muted: var(--kb-color-muted);
1120
+ --kb-collection-border: var(--kb-color-border);
1121
+ --kb-collection-header-background: var(--kb-color-surface);
1122
+ --kb-collection-selected-background: var(--kb-color-surface);
1123
+ --kb-copyabletext-border: var(--kb-color-border);
1124
+ --kb-copyabletext-background: var(--kb-color-surface);
1125
+ --kb-copyabletext-value-color: var(--kb-color-fg);
1126
+ --kb-copyabletext-highlight-background: color-mix(in srgb, var(--kb-color-warning) 16%, var(--kb-color-surface));
1127
+ --kb-disclosure-background: var(--kb-color-bg);
1128
+ --kb-disclosure-color: var(--kb-color-fg);
1129
+ --kb-disclosure-border: var(--kb-color-border);
1130
+ --kb-accordion-background: var(--kb-color-bg);
1131
+ --kb-accordion-color: var(--kb-color-fg);
1132
+ --kb-accordion-border: var(--kb-color-border);
1133
+ --kb-popover-background: var(--kb-popup-background);
1134
+ --kb-popover-color: var(--kb-color-fg);
1135
+ --kb-popover-border: var(--kb-popup-border);
1136
+ --kb-popover-shadow: var(--kb-popup-shadow);
1137
+ --kb-table-background: var(--kb-color-bg);
1138
+ --kb-table-header-background: var(--kb-color-surface);
1139
+ --kb-table-selected-background: var(--kb-color-surface);
1140
+ --kb-table-border: var(--kb-color-border);
735
1141
  color-scheme: dark;
736
1142
  }
737
1143
  }
@@ -759,5 +1165,17 @@
759
1165
  --kb-viz-path: CanvasText;
760
1166
  --kb-viz-path-bg: Canvas;
761
1167
  --kb-viz-path-fg: CanvasText;
1168
+ --kb-code-line-highlight-background: Mark;
1169
+ --kb-code-line-highlight-border: Highlight;
1170
+ --kb-code-syntax-keyword: CanvasText;
1171
+ --kb-code-syntax-string: CanvasText;
1172
+ --kb-code-syntax-comment: GrayText;
1173
+ --kb-code-syntax-number: CanvasText;
1174
+ --kb-code-syntax-tag: CanvasText;
1175
+ --kb-code-syntax-attribute: CanvasText;
1176
+ --kb-code-syntax-type: CanvasText;
1177
+ --kb-code-syntax-function: CanvasText;
1178
+ --kb-code-syntax-operator: CanvasText;
1179
+ --kb-code-syntax-property: CanvasText;
762
1180
  }
763
1181
  }