@ismail-elkorchi/ui-tokens 0.1.1 → 0.1.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 (15) hide show
  1. package/README.md +16 -9
  2. package/dist/base.css +243 -0
  3. package/dist/index.css +420 -0
  4. package/dist/index.d.ts +23 -6
  5. package/dist/index.js +101 -13
  6. package/dist/themes/uik-dark.css +239 -0
  7. package/dist/themes/uik-light.css +177 -0
  8. package/dist/themes/uik-theme-base.css +177 -0
  9. package/dist/tokens.resolved.dark.comfortable.json +29 -0
  10. package/dist/tokens.resolved.dark.compact.json +29 -0
  11. package/dist/tokens.resolved.light.comfortable.json +29 -0
  12. package/dist/tokens.resolved.light.compact.json +29 -0
  13. package/dist/uik-tailwind.compat.css +177 -0
  14. package/dist/uik-tailwind.strict.css +177 -0
  15. package/package.json +1 -1
package/README.md CHANGED
@@ -59,7 +59,7 @@ Explicit control (theme + density):
59
59
  Set attributes on a root element to switch variants:
60
60
 
61
61
  ```html
62
- <html data-uik-theme="dark" data-uik-density="compact">
62
+ <html data-uik-theme="dark" data-uik-density="compact"></html>
63
63
  ```
64
64
 
65
65
  Defaults are light + comfortable when attributes are not present.
@@ -89,7 +89,9 @@ Compat example:
89
89
  Example utilities:
90
90
 
91
91
  ```html
92
- <div class="bg-uik-surface-bg text-uik-text-default border-uik-border-default rounded-uik-3 shadow-uik-2 ring-uik-focus-ring-default">
92
+ <div
93
+ class="bg-uik-surface-bg text-uik-text-default border-uik-border-default rounded-uik-3 shadow-uik-2 ring-uik-focus-ring-default"
94
+ >
93
95
  ...
94
96
  </div>
95
97
  ```
@@ -100,18 +102,23 @@ Example utilities:
100
102
  import {
101
103
  THEME_ATTRIBUTE,
102
104
  DENSITY_ATTRIBUTE,
105
+ BREAKPOINT_ATTRIBUTE,
103
106
  setTheme,
104
107
  setDensity,
105
- getCssVarName
106
- } from '@ismail-elkorchi/ui-tokens';
108
+ getCssVarName,
109
+ createBreakpointObserver,
110
+ } from "@ismail-elkorchi/ui-tokens";
107
111
 
108
- const cssVar = getCssVarName('color.accent.1');
112
+ const cssVar = getCssVarName("color.accent.1");
109
113
 
110
- setTheme(document.documentElement, 'dark');
111
- setDensity(document.documentElement, 'compact');
114
+ setTheme(document.documentElement, "dark");
115
+ setDensity(document.documentElement, "compact");
112
116
 
113
- document.documentElement.setAttribute(THEME_ATTRIBUTE, 'dark');
114
- document.documentElement.setAttribute(DENSITY_ATTRIBUTE, 'compact');
117
+ document.documentElement.setAttribute(THEME_ATTRIBUTE, "dark");
118
+ document.documentElement.setAttribute(DENSITY_ATTRIBUTE, "compact");
119
+
120
+ createBreakpointObserver();
121
+ document.documentElement.setAttribute(BREAKPOINT_ATTRIBUTE, "md");
115
122
  ```
116
123
 
117
124
  ## Guarantees
package/dist/base.css CHANGED
@@ -9,6 +9,10 @@
9
9
  --uik-border-width-1: 0.0625rem;
10
10
  --uik-border-width-2: 0.125rem;
11
11
  --uik-border-width-4: 0.25rem;
12
+ --uik-breakpoint-lg: 80rem;
13
+ --uik-breakpoint-md: 60rem;
14
+ --uik-breakpoint-sm: 40rem;
15
+ --uik-breakpoint-xl: 96rem;
12
16
  --uik-color-accent-1: 0.97 0.020 250;
13
17
  --uik-color-accent-10: 0.38 0.140 250;
14
18
  --uik-color-accent-11: 0.31 0.120 250;
@@ -450,6 +454,80 @@
450
454
  --uik-component-button-solid-shadow: var(--uik-shadow-1);
451
455
  --uik-component-checkbox-accent: 0.45 0.160 250;
452
456
  --uik-component-checkbox-size: var(--uik-size-icon-md);
457
+ --uik-component-code-block-bg: 0.97 0.006 260;
458
+ --uik-component-code-block-border: 0.94 0.007 260;
459
+ --uik-component-code-block-border-width: var(--uik-border-width-1);
460
+ --uik-component-code-block-copy-bg: 0.99 0.005 260;
461
+ --uik-component-code-block-copy-border: 0.94 0.007 260;
462
+ --uik-component-code-block-copy-border-width: var(--uik-border-width-1);
463
+ --uik-component-code-block-copy-disabled-opacity: var(--uik-opacity-60);
464
+ --uik-component-code-block-copy-fg: 0.20 0.014 260;
465
+ --uik-component-code-block-copy-focus-offset: var(--uik-outline-width-1);
466
+ --uik-component-code-block-copy-focus-width: var(--uik-outline-width-2);
467
+ --uik-component-code-block-copy-font-size: var(--uik-typography-font-size-1);
468
+ --uik-component-code-block-copy-font-weight: var(--uik-typography-font-weight-medium);
469
+ --uik-component-code-block-copy-line-height: var(--uik-typography-line-height-1);
470
+ --uik-component-code-block-copy-offset: var(--uik-space-2);
471
+ --uik-component-code-block-copy-padding-x: var(--uik-layout-control-padding-x-1);
472
+ --uik-component-code-block-copy-padding-y: var(--uik-layout-control-padding-y-1);
473
+ --uik-component-code-block-copy-radius: var(--uik-radius-2);
474
+ --uik-component-code-block-fg: 0.20 0.014 260;
475
+ --uik-component-code-block-font-family: var(--uik-typography-font-family-mono);
476
+ --uik-component-code-block-font-size: var(--uik-typography-font-size-2);
477
+ --uik-component-code-block-font-weight: var(--uik-typography-font-weight-regular);
478
+ --uik-component-code-block-line-height: var(--uik-typography-line-height-3);
479
+ --uik-component-code-block-max-height: var(--uik-space-12);
480
+ --uik-component-code-block-padding-x: var(--uik-layout-control-padding-x-2);
481
+ --uik-component-code-block-padding-y: var(--uik-layout-control-padding-y-2);
482
+ --uik-component-code-block-radius: var(--uik-radius-2);
483
+ --uik-component-combobox-base-bg: 0.99 0.005 260;
484
+ --uik-component-combobox-base-border-default: 0.90 0.009 260;
485
+ --uik-component-combobox-base-border-focus: 0.60 0.160 250;
486
+ --uik-component-combobox-base-border-hover: 0.85 0.010 260;
487
+ --uik-component-combobox-base-border-width: var(--uik-border-width-1);
488
+ --uik-component-combobox-base-disabled-opacity: var(--uik-field-disabled-opacity);
489
+ --uik-component-combobox-base-fg: 0.20 0.014 260;
490
+ --uik-component-combobox-base-focus-ring: 0.60 0.160 250;
491
+ --uik-component-combobox-base-focus-ring-offset: var(--uik-focus-ring-offset-default);
492
+ --uik-component-combobox-base-focus-ring-opacity: var(--uik-focus-ring-opacity);
493
+ --uik-component-combobox-base-focus-ring-width: var(--uik-focus-ring-width);
494
+ --uik-component-combobox-base-font-size: var(--uik-typography-font-size-2);
495
+ --uik-component-combobox-base-font-weight: var(--uik-typography-font-weight-regular);
496
+ --uik-component-combobox-base-height: var(--uik-size-control-md);
497
+ --uik-component-combobox-base-line-height: var(--uik-typography-line-height-2);
498
+ --uik-component-combobox-base-padding-x: var(--uik-layout-control-padding-x-3);
499
+ --uik-component-combobox-base-padding-y: var(--uik-layout-control-padding-y-2);
500
+ --uik-component-combobox-base-placeholder: 0.48 0.016 260;
501
+ --uik-component-combobox-base-radius: var(--uik-radius-3);
502
+ --uik-component-combobox-base-selection-bg: 0.82 0.080 250;
503
+ --uik-component-combobox-base-selection-fg: 0.20 0.014 260;
504
+ --uik-component-combobox-base-shadow: var(--uik-shadow-0);
505
+ --uik-component-combobox-panel-offset: var(--uik-space-2);
506
+ --uik-component-description-list-column-gap: var(--uik-space-4);
507
+ --uik-component-description-list-column-gap-compact: var(--uik-space-3);
508
+ --uik-component-description-list-row-gap: var(--uik-space-2);
509
+ --uik-component-description-list-row-gap-compact: var(--uik-space-1);
510
+ --uik-component-description-list-term-color: 0.48 0.016 260;
511
+ --uik-component-description-list-term-font-family: var(--uik-typography-font-family-sans);
512
+ --uik-component-description-list-term-font-size: var(--uik-typography-font-size-2);
513
+ --uik-component-description-list-term-font-weight: var(--uik-typography-font-weight-medium);
514
+ --uik-component-description-list-term-line-height: var(--uik-typography-line-height-3);
515
+ --uik-component-description-list-term-width: var(--uik-space-10);
516
+ --uik-component-description-list-value-color: 0.20 0.014 260;
517
+ --uik-component-description-list-value-font-family: var(--uik-typography-font-family-sans);
518
+ --uik-component-description-list-value-font-size: var(--uik-typography-font-size-3);
519
+ --uik-component-description-list-value-font-weight: var(--uik-typography-font-weight-regular);
520
+ --uik-component-description-list-value-line-height: var(--uik-typography-line-height-4);
521
+ --uik-component-dialog-actions-gap: var(--uik-space-2);
522
+ --uik-component-dialog-bg: 0.99 0.005 260;
523
+ --uik-component-dialog-border: 0.90 0.009 260;
524
+ --uik-component-dialog-description-fg: 0.48 0.016 260;
525
+ --uik-component-dialog-fg: 0.20 0.014 260;
526
+ --uik-component-dialog-max-width: var(--uik-layout-panel-width-md);
527
+ --uik-component-dialog-padding: var(--uik-space-5);
528
+ --uik-component-dialog-radius: var(--uik-radius-4);
529
+ --uik-component-dialog-shadow: var(--uik-elevation-modal-shadow);
530
+ --uik-component-dialog-title-fg: 0.20 0.014 260;
453
531
  --uik-component-heading-color-danger: 0.45 0.160 25;
454
532
  --uik-component-heading-color-default: 0.20 0.014 260;
455
533
  --uik-component-heading-color-info: 0.45 0.160 210;
@@ -506,6 +584,27 @@
506
584
  --uik-component-link-fg-default: 0.45 0.160 250;
507
585
  --uik-component-link-fg-hover: 0.38 0.140 250;
508
586
  --uik-component-link-underline-offset: var(--uik-space-1);
587
+ --uik-component-listbox-bg: 0.99 0.005 260;
588
+ --uik-component-listbox-border: 0.94 0.007 260;
589
+ --uik-component-listbox-border-width: var(--uik-border-width-1);
590
+ --uik-component-listbox-empty-padding: var(--uik-layout-control-padding-y-2);
591
+ --uik-component-listbox-fg: 0.20 0.014 260;
592
+ --uik-component-listbox-gap: var(--uik-layout-control-gap-1);
593
+ --uik-component-listbox-item-active-bg: 0.97 0.006 260;
594
+ --uik-component-listbox-item-bg: 0.99 0.005 260;
595
+ --uik-component-listbox-item-disabled-fg: 0.48 0.016 260;
596
+ --uik-component-listbox-item-fg: 0.20 0.014 260;
597
+ --uik-component-listbox-item-height: var(--uik-size-control-sm);
598
+ --uik-component-listbox-item-hover-bg: 0.97 0.006 260;
599
+ --uik-component-listbox-item-padding-x: var(--uik-layout-control-padding-x-2);
600
+ --uik-component-listbox-item-padding-y: var(--uik-layout-control-padding-y-1);
601
+ --uik-component-listbox-item-radius: var(--uik-radius-2);
602
+ --uik-component-listbox-item-selected-bg: 0.97 0.006 260;
603
+ --uik-component-listbox-item-selected-fg: 0.20 0.014 260;
604
+ --uik-component-listbox-max-height: var(--uik-space-12);
605
+ --uik-component-listbox-padding: var(--uik-space-1);
606
+ --uik-component-listbox-radius: var(--uik-radius-2);
607
+ --uik-component-listbox-shadow: var(--uik-shadow-1);
509
608
  --uik-component-nav-indent: var(--uik-space-3);
510
609
  --uik-component-nav-item-active-bg: 0.97 0.006 260;
511
610
  --uik-component-nav-item-bg: 0.99 0.005 260;
@@ -515,10 +614,54 @@
515
614
  --uik-component-nav-item-padding-x: var(--uik-layout-control-padding-x-1);
516
615
  --uik-component-nav-item-padding-y: var(--uik-layout-control-padding-y-1);
517
616
  --uik-component-nav-item-radius: var(--uik-radius-2);
617
+ --uik-component-nav-rail-bg: 0.97 0.006 260;
618
+ --uik-component-nav-rail-fg: 0.48 0.016 260;
619
+ --uik-component-nav-rail-gap: var(--uik-space-2);
620
+ --uik-component-nav-rail-icon-size: var(--uik-size-icon-md);
621
+ --uik-component-nav-rail-item-indicator-bg: 0.45 0.160 250;
622
+ --uik-component-nav-rail-item-indicator-radius: var(--uik-radius-1);
623
+ --uik-component-nav-rail-item-indicator-width: var(--uik-border-width-2);
624
+ --uik-component-nav-rail-item-size: var(--uik-size-control-lg);
625
+ --uik-component-nav-rail-padding-y: var(--uik-space-2);
626
+ --uik-component-nav-rail-width: var(--uik-size-control-lg);
518
627
  --uik-component-nav-text-active: 0.20 0.014 260;
519
628
  --uik-component-nav-text-default: 0.20 0.014 260;
520
629
  --uik-component-nav-text-hover: 0.20 0.014 260;
521
630
  --uik-component-nav-toggle-fg: 0.48 0.016 260;
631
+ --uik-component-pagination-button-bg: 0.99 0.005 260;
632
+ --uik-component-pagination-button-bg-active: 0.97 0.006 260;
633
+ --uik-component-pagination-button-bg-hover: 0.97 0.006 260;
634
+ --uik-component-pagination-button-border: 0.94 0.007 260;
635
+ --uik-component-pagination-button-border-width: var(--uik-border-width-1);
636
+ --uik-component-pagination-button-current-bg: 0.45 0.160 250;
637
+ --uik-component-pagination-button-current-border: 0.45 0.160 250;
638
+ --uik-component-pagination-button-current-fg: 0.99 0.005 260;
639
+ --uik-component-pagination-button-disabled-opacity: var(--uik-opacity-60);
640
+ --uik-component-pagination-button-fg: 0.20 0.014 260;
641
+ --uik-component-pagination-button-focus-offset: var(--uik-outline-width-1);
642
+ --uik-component-pagination-button-focus-width: var(--uik-outline-width-2);
643
+ --uik-component-pagination-button-font-size: var(--uik-typography-font-size-2);
644
+ --uik-component-pagination-button-font-weight: var(--uik-typography-font-weight-medium);
645
+ --uik-component-pagination-button-height: var(--uik-size-control-sm);
646
+ --uik-component-pagination-button-line-height: var(--uik-typography-line-height-2);
647
+ --uik-component-pagination-button-min-width: var(--uik-size-control-sm);
648
+ --uik-component-pagination-button-padding-x: var(--uik-layout-control-padding-x-2);
649
+ --uik-component-pagination-button-padding-y: var(--uik-layout-control-padding-y-1);
650
+ --uik-component-pagination-button-radius: var(--uik-radius-2);
651
+ --uik-component-pagination-ellipsis-color: 0.48 0.016 260;
652
+ --uik-component-pagination-font-family: var(--uik-typography-font-family-sans);
653
+ --uik-component-pagination-gap: var(--uik-space-2);
654
+ --uik-component-pagination-summary-color: 0.48 0.016 260;
655
+ --uik-component-pagination-summary-font-size: var(--uik-typography-font-size-2);
656
+ --uik-component-pagination-summary-font-weight: var(--uik-typography-font-weight-medium);
657
+ --uik-component-popover-bg: 0.99 0.005 260;
658
+ --uik-component-popover-border: 0.90 0.009 260;
659
+ --uik-component-popover-fg: 0.20 0.014 260;
660
+ --uik-component-popover-offset: var(--uik-space-2);
661
+ --uik-component-popover-padding-x: var(--uik-space-4);
662
+ --uik-component-popover-padding-y: var(--uik-space-3);
663
+ --uik-component-popover-radius: var(--uik-radius-3);
664
+ --uik-component-popover-shadow: var(--uik-elevation-popover-shadow);
522
665
  --uik-component-progress-bar-bg: 0.45 0.160 250;
523
666
  --uik-component-progress-height: var(--uik-space-2);
524
667
  --uik-component-progress-min-width: var(--uik-size-control-xl);
@@ -527,6 +670,16 @@
527
670
  --uik-component-radio-accent: 0.45 0.160 250;
528
671
  --uik-component-radio-group-gap: var(--uik-layout-control-gap-2);
529
672
  --uik-component-radio-size: var(--uik-size-icon-md);
673
+ --uik-component-resizable-panels-handle-active-bg: 0.60 0.160 250;
674
+ --uik-component-resizable-panels-handle-bg: 0.94 0.007 260;
675
+ --uik-component-resizable-panels-handle-hit: var(--uik-size-hit-target-min);
676
+ --uik-component-resizable-panels-handle-hover-bg: 0.85 0.010 260;
677
+ --uik-component-resizable-panels-handle-radius: var(--uik-radius-2);
678
+ --uik-component-resizable-panels-handle-size: var(--uik-border-width-2);
679
+ --uik-component-resizable-panels-panel-min-size: var(--uik-layout-panel-width-sm);
680
+ --uik-component-resizable-panels-panel-start-size: var(--uik-layout-panel-width-md);
681
+ --uik-component-resizable-panels-step: var(--uik-space-2);
682
+ --uik-component-resizable-panels-step-lg: var(--uik-space-4);
530
683
  --uik-component-select-base-bg: 0.99 0.005 260;
531
684
  --uik-component-select-base-border-default: 0.90 0.009 260;
532
685
  --uik-component-select-base-border-focus: 0.60 0.160 250;
@@ -540,6 +693,11 @@
540
693
  --uik-component-select-base-shadow: var(--uik-shadow-0);
541
694
  --uik-component-shell-activity-bar-bg: 0.97 0.006 260;
542
695
  --uik-component-shell-activity-bar-fg: 0.48 0.016 260;
696
+ --uik-component-shell-activity-bar-item-icon-size: var(--uik-size-icon-md);
697
+ --uik-component-shell-activity-bar-item-indicator-bg: 0.45 0.160 250;
698
+ --uik-component-shell-activity-bar-item-indicator-radius: var(--uik-radius-1);
699
+ --uik-component-shell-activity-bar-item-indicator-width: var(--uik-border-width-2);
700
+ --uik-component-shell-activity-bar-item-size: var(--uik-size-control-lg);
543
701
  --uik-component-shell-activity-bar-width: 3.25rem;
544
702
  --uik-component-shell-divider-color: 0.94 0.007 260;
545
703
  --uik-component-shell-scrollbar-thumb: 0.78 0.012 260;
@@ -593,6 +751,22 @@
593
751
  --uik-component-switch-track-border-checked: 0.45 0.160 250;
594
752
  --uik-component-switch-track-border-default: 0.90 0.009 260;
595
753
  --uik-component-switch-width: var(--uik-size-control-xl);
754
+ --uik-component-tabs-border: 0.94 0.007 260;
755
+ --uik-component-tabs-border-width: var(--uik-border-width-1);
756
+ --uik-component-tabs-gap: var(--uik-layout-control-gap-1);
757
+ --uik-component-tabs-panel-padding: var(--uik-space-4);
758
+ --uik-component-tabs-tab-active-bg: 0.97 0.006 260;
759
+ --uik-component-tabs-tab-active-fg: 0.20 0.014 260;
760
+ --uik-component-tabs-tab-bg: 0.99 0.005 260;
761
+ --uik-component-tabs-tab-disabled-fg: 0.48 0.016 260;
762
+ --uik-component-tabs-tab-fg: 0.48 0.016 260;
763
+ --uik-component-tabs-tab-height: var(--uik-size-control-sm);
764
+ --uik-component-tabs-tab-hover-bg: 0.97 0.006 260;
765
+ --uik-component-tabs-tab-indicator-bg: 0.45 0.160 250;
766
+ --uik-component-tabs-tab-indicator-size: var(--uik-border-width-2);
767
+ --uik-component-tabs-tab-padding-x: var(--uik-layout-control-padding-x-2);
768
+ --uik-component-tabs-tab-padding-y: var(--uik-layout-control-padding-y-1);
769
+ --uik-component-tabs-tab-radius: var(--uik-radius-2);
596
770
  --uik-component-text-color-danger: 0.45 0.160 25;
597
771
  --uik-component-text-color-default: 0.20 0.014 260;
598
772
  --uik-component-text-color-info: 0.45 0.160 210;
@@ -625,6 +799,13 @@
625
799
  --uik-component-textarea-base-placeholder: 0.48 0.016 260;
626
800
  --uik-component-textarea-base-radius: var(--uik-radius-3);
627
801
  --uik-component-textarea-base-shadow: var(--uik-shadow-0);
802
+ --uik-component-tooltip-bg: 0.20 0.014 260;
803
+ --uik-component-tooltip-fg: 0.99 0.005 260;
804
+ --uik-component-tooltip-offset: var(--uik-space-2);
805
+ --uik-component-tooltip-padding-x: var(--uik-space-3);
806
+ --uik-component-tooltip-padding-y: var(--uik-space-2);
807
+ --uik-component-tooltip-radius: var(--uik-radius-2);
808
+ --uik-component-tooltip-shadow: var(--uik-shadow-2);
628
809
  --uik-component-tree-view-indent: var(--uik-space-3);
629
810
  --uik-component-tree-view-item-active-bg: 0.97 0.006 260;
630
811
  --uik-component-tree-view-item-bg: 0.99 0.005 260;
@@ -812,6 +993,28 @@
812
993
  --uik-component-button-solid-border: 0.60 0.160 250;
813
994
  --uik-component-button-solid-fg: 0.20 0.014 260;
814
995
  --uik-component-checkbox-accent: 0.60 0.160 250;
996
+ --uik-component-code-block-bg: 0.38 0.016 260;
997
+ --uik-component-code-block-border: 0.38 0.016 260;
998
+ --uik-component-code-block-copy-bg: 0.20 0.014 260;
999
+ --uik-component-code-block-copy-border: 0.38 0.016 260;
1000
+ --uik-component-code-block-copy-fg: 0.99 0.005 260;
1001
+ --uik-component-code-block-fg: 0.99 0.005 260;
1002
+ --uik-component-combobox-base-bg: 0.28 0.015 260;
1003
+ --uik-component-combobox-base-border-default: 0.48 0.016 260;
1004
+ --uik-component-combobox-base-border-focus: 0.68 0.140 250;
1005
+ --uik-component-combobox-base-border-hover: 0.58 0.015 260;
1006
+ --uik-component-combobox-base-fg: 0.99 0.005 260;
1007
+ --uik-component-combobox-base-focus-ring: 0.68 0.140 250;
1008
+ --uik-component-combobox-base-placeholder: 0.90 0.009 260;
1009
+ --uik-component-combobox-base-selection-bg: 0.45 0.160 250;
1010
+ --uik-component-combobox-base-selection-fg: 0.99 0.005 260;
1011
+ --uik-component-description-list-term-color: 0.90 0.009 260;
1012
+ --uik-component-description-list-value-color: 0.99 0.005 260;
1013
+ --uik-component-dialog-bg: 0.28 0.015 260;
1014
+ --uik-component-dialog-border: 0.48 0.016 260;
1015
+ --uik-component-dialog-description-fg: 0.90 0.009 260;
1016
+ --uik-component-dialog-fg: 0.99 0.005 260;
1017
+ --uik-component-dialog-title-fg: 0.99 0.005 260;
815
1018
  --uik-component-heading-color-danger: 0.82 0.080 25;
816
1019
  --uik-component-heading-color-default: 0.99 0.005 260;
817
1020
  --uik-component-heading-color-info: 0.82 0.080 210;
@@ -837,16 +1040,45 @@
837
1040
  --uik-component-input-base-selection-fg: 0.99 0.005 260;
838
1041
  --uik-component-link-fg-default: 0.82 0.080 250;
839
1042
  --uik-component-link-fg-hover: 0.88 0.050 250;
1043
+ --uik-component-listbox-bg: 0.20 0.014 260;
1044
+ --uik-component-listbox-border: 0.38 0.016 260;
1045
+ --uik-component-listbox-fg: 0.99 0.005 260;
1046
+ --uik-component-listbox-item-active-bg: 0.38 0.016 260;
1047
+ --uik-component-listbox-item-bg: 0.20 0.014 260;
1048
+ --uik-component-listbox-item-disabled-fg: 0.90 0.009 260;
1049
+ --uik-component-listbox-item-fg: 0.99 0.005 260;
1050
+ --uik-component-listbox-item-hover-bg: 0.38 0.016 260;
1051
+ --uik-component-listbox-item-selected-bg: 0.38 0.016 260;
1052
+ --uik-component-listbox-item-selected-fg: 0.99 0.005 260;
840
1053
  --uik-component-nav-item-active-bg: 0.38 0.016 260;
841
1054
  --uik-component-nav-item-bg: 0.20 0.014 260;
842
1055
  --uik-component-nav-item-hover-bg: 0.38 0.016 260;
1056
+ --uik-component-nav-rail-bg: 0.38 0.016 260;
1057
+ --uik-component-nav-rail-fg: 0.90 0.009 260;
1058
+ --uik-component-nav-rail-item-indicator-bg: 0.60 0.160 250;
843
1059
  --uik-component-nav-text-active: 0.99 0.005 260;
844
1060
  --uik-component-nav-text-default: 0.99 0.005 260;
845
1061
  --uik-component-nav-text-hover: 0.99 0.005 260;
846
1062
  --uik-component-nav-toggle-fg: 0.90 0.009 260;
1063
+ --uik-component-pagination-button-bg: 0.20 0.014 260;
1064
+ --uik-component-pagination-button-bg-active: 0.38 0.016 260;
1065
+ --uik-component-pagination-button-bg-hover: 0.38 0.016 260;
1066
+ --uik-component-pagination-button-border: 0.38 0.016 260;
1067
+ --uik-component-pagination-button-current-bg: 0.60 0.160 250;
1068
+ --uik-component-pagination-button-current-border: 0.60 0.160 250;
1069
+ --uik-component-pagination-button-current-fg: 0.20 0.014 260;
1070
+ --uik-component-pagination-button-fg: 0.99 0.005 260;
1071
+ --uik-component-pagination-ellipsis-color: 0.90 0.009 260;
1072
+ --uik-component-pagination-summary-color: 0.90 0.009 260;
1073
+ --uik-component-popover-bg: 0.28 0.015 260;
1074
+ --uik-component-popover-border: 0.48 0.016 260;
1075
+ --uik-component-popover-fg: 0.99 0.005 260;
847
1076
  --uik-component-progress-bar-bg: 0.60 0.160 250;
848
1077
  --uik-component-progress-track-bg: 0.38 0.016 260;
849
1078
  --uik-component-radio-accent: 0.60 0.160 250;
1079
+ --uik-component-resizable-panels-handle-active-bg: 0.68 0.140 250;
1080
+ --uik-component-resizable-panels-handle-bg: 0.38 0.016 260;
1081
+ --uik-component-resizable-panels-handle-hover-bg: 0.58 0.015 260;
850
1082
  --uik-component-select-base-bg: 0.28 0.015 260;
851
1083
  --uik-component-select-base-border-default: 0.48 0.016 260;
852
1084
  --uik-component-select-base-border-focus: 0.68 0.140 250;
@@ -854,6 +1086,7 @@
854
1086
  --uik-component-select-base-fg: 0.99 0.005 260;
855
1087
  --uik-component-shell-activity-bar-bg: 0.38 0.016 260;
856
1088
  --uik-component-shell-activity-bar-fg: 0.90 0.009 260;
1089
+ --uik-component-shell-activity-bar-item-indicator-bg: 0.60 0.160 250;
857
1090
  --uik-component-shell-divider-color: 0.38 0.016 260;
858
1091
  --uik-component-shell-scrollbar-thumb: 0.58 0.015 260;
859
1092
  --uik-component-shell-scrollbar-track: 0.28 0.015 260;
@@ -882,6 +1115,14 @@
882
1115
  --uik-component-switch-track-bg-default: 0.38 0.016 260;
883
1116
  --uik-component-switch-track-border-checked: 0.60 0.160 250;
884
1117
  --uik-component-switch-track-border-default: 0.48 0.016 260;
1118
+ --uik-component-tabs-border: 0.38 0.016 260;
1119
+ --uik-component-tabs-tab-active-bg: 0.38 0.016 260;
1120
+ --uik-component-tabs-tab-active-fg: 0.99 0.005 260;
1121
+ --uik-component-tabs-tab-bg: 0.20 0.014 260;
1122
+ --uik-component-tabs-tab-disabled-fg: 0.90 0.009 260;
1123
+ --uik-component-tabs-tab-fg: 0.90 0.009 260;
1124
+ --uik-component-tabs-tab-hover-bg: 0.38 0.016 260;
1125
+ --uik-component-tabs-tab-indicator-bg: 0.60 0.160 250;
885
1126
  --uik-component-text-color-danger: 0.82 0.080 25;
886
1127
  --uik-component-text-color-default: 0.99 0.005 260;
887
1128
  --uik-component-text-color-info: 0.82 0.080 210;
@@ -895,6 +1136,8 @@
895
1136
  --uik-component-textarea-base-border-hover: 0.58 0.015 260;
896
1137
  --uik-component-textarea-base-fg: 0.99 0.005 260;
897
1138
  --uik-component-textarea-base-placeholder: 0.90 0.009 260;
1139
+ --uik-component-tooltip-bg: 0.99 0.005 260;
1140
+ --uik-component-tooltip-fg: 0.20 0.014 260;
898
1141
  --uik-component-tree-view-item-active-bg: 0.38 0.016 260;
899
1142
  --uik-component-tree-view-item-bg: 0.20 0.014 260;
900
1143
  --uik-component-tree-view-item-hover-bg: 0.38 0.016 260;