@rokkit/themes 1.1.17 → 1.1.18

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 (128) hide show
  1. package/dist/base/stepper.css +11 -5
  2. package/dist/base/table.css +4 -1
  3. package/dist/base/toggle.css +5 -0
  4. package/dist/base.css +20 -6
  5. package/dist/frosted/button.css +8 -8
  6. package/dist/frosted/card.css +4 -4
  7. package/dist/frosted/dropdown.css +2 -2
  8. package/dist/frosted/list.css +5 -5
  9. package/dist/frosted/menu.css +5 -5
  10. package/dist/frosted/message.css +4 -4
  11. package/dist/frosted/select.css +8 -8
  12. package/dist/frosted/table.css +5 -5
  13. package/dist/frosted/tabs.css +2 -2
  14. package/dist/frosted/timeline.css +1 -1
  15. package/dist/frosted/toggle.css +4 -4
  16. package/dist/frosted/tree.css +15 -4
  17. package/dist/frosted.css +63 -52
  18. package/dist/index.css +437 -306
  19. package/dist/material/button.css +14 -10
  20. package/dist/material/dropdown.css +2 -2
  21. package/dist/material/list.css +5 -5
  22. package/dist/material/menu.css +5 -5
  23. package/dist/material/select.css +8 -8
  24. package/dist/material/table.css +5 -5
  25. package/dist/material/tabs.css +4 -3
  26. package/dist/material/timeline.css +4 -3
  27. package/dist/material/toggle.css +6 -5
  28. package/dist/material/tree.css +15 -4
  29. package/dist/material.css +68 -50
  30. package/dist/minimal/button.css +14 -10
  31. package/dist/minimal/card.css +4 -4
  32. package/dist/minimal/dropdown.css +2 -2
  33. package/dist/minimal/list.css +8 -8
  34. package/dist/minimal/menu.css +6 -6
  35. package/dist/minimal/select.css +8 -8
  36. package/dist/minimal/table.css +5 -5
  37. package/dist/minimal/tabs.css +2 -2
  38. package/dist/minimal/timeline.css +3 -3
  39. package/dist/minimal/toggle.css +4 -4
  40. package/dist/minimal/tree.css +17 -6
  41. package/dist/minimal.css +73 -58
  42. package/dist/rokkit/avatar.css +1 -1
  43. package/dist/rokkit/badge.css +7 -7
  44. package/dist/rokkit/button.css +9 -9
  45. package/dist/rokkit/card.css +4 -4
  46. package/dist/rokkit/divider.css +1 -1
  47. package/dist/rokkit/dropdown.css +2 -2
  48. package/dist/rokkit/list.css +5 -5
  49. package/dist/rokkit/menu.css +5 -5
  50. package/dist/rokkit/select.css +24 -13
  51. package/dist/rokkit/table.css +5 -5
  52. package/dist/rokkit/tabs.css +1 -1
  53. package/dist/rokkit/timeline.css +4 -3
  54. package/dist/rokkit/toggle.css +4 -4
  55. package/dist/rokkit/tree.css +17 -6
  56. package/dist/rokkit.css +89 -66
  57. package/dist/zen-sumi/button.css +20 -12
  58. package/dist/zen-sumi/card.css +4 -4
  59. package/dist/zen-sumi/divider.css +29 -0
  60. package/dist/zen-sumi/dropdown.css +4 -4
  61. package/dist/zen-sumi/list.css +9 -9
  62. package/dist/zen-sumi/menu.css +9 -9
  63. package/dist/zen-sumi/select.css +11 -11
  64. package/dist/zen-sumi/table.css +6 -6
  65. package/dist/zen-sumi/tabs.css +3 -3
  66. package/dist/zen-sumi/timeline.css +3 -3
  67. package/dist/zen-sumi/toggle.css +6 -5
  68. package/dist/zen-sumi/tree.css +19 -8
  69. package/dist/zen-sumi.css +124 -74
  70. package/package.json +3 -3
  71. package/src/base/stepper.css +11 -5
  72. package/src/base/table.css +4 -1
  73. package/src/base/toggle.css +5 -0
  74. package/src/frosted/dropdown.css +2 -2
  75. package/src/frosted/list.css +5 -5
  76. package/src/frosted/menu.css +5 -5
  77. package/src/frosted/message.css +4 -4
  78. package/src/frosted/select.css +8 -8
  79. package/src/frosted/table.css +5 -5
  80. package/src/frosted/tabs.css +2 -2
  81. package/src/frosted/timeline.css +1 -1
  82. package/src/frosted/toggle.css +4 -4
  83. package/src/frosted/tree.css +15 -4
  84. package/src/material/button.css +8 -4
  85. package/src/material/dropdown.css +2 -2
  86. package/src/material/list.css +5 -5
  87. package/src/material/menu.css +5 -5
  88. package/src/material/select.css +8 -8
  89. package/src/material/table.css +5 -5
  90. package/src/material/tabs.css +4 -3
  91. package/src/material/timeline.css +4 -3
  92. package/src/material/toggle.css +6 -5
  93. package/src/material/tree.css +15 -4
  94. package/src/minimal/button.css +8 -4
  95. package/src/minimal/dropdown.css +2 -2
  96. package/src/minimal/list.css +8 -8
  97. package/src/minimal/menu.css +6 -6
  98. package/src/minimal/select.css +8 -8
  99. package/src/minimal/table.css +5 -5
  100. package/src/minimal/tabs.css +2 -2
  101. package/src/minimal/timeline.css +3 -3
  102. package/src/minimal/toggle.css +4 -4
  103. package/src/minimal/tree.css +17 -6
  104. package/src/rokkit/avatar.css +1 -1
  105. package/src/rokkit/badge.css +1 -1
  106. package/src/rokkit/button.css +1 -1
  107. package/src/rokkit/divider.css +1 -1
  108. package/src/rokkit/dropdown.css +2 -2
  109. package/src/rokkit/list.css +5 -5
  110. package/src/rokkit/menu.css +5 -5
  111. package/src/rokkit/select.css +24 -13
  112. package/src/rokkit/table.css +5 -5
  113. package/src/rokkit/tabs.css +1 -1
  114. package/src/rokkit/timeline.css +4 -3
  115. package/src/rokkit/toggle.css +4 -4
  116. package/src/rokkit/tree.css +17 -6
  117. package/src/zen-sumi/button.css +16 -8
  118. package/src/zen-sumi/divider.css +29 -0
  119. package/src/zen-sumi/dropdown.css +4 -4
  120. package/src/zen-sumi/index.css +1 -0
  121. package/src/zen-sumi/list.css +9 -9
  122. package/src/zen-sumi/menu.css +9 -9
  123. package/src/zen-sumi/select.css +11 -11
  124. package/src/zen-sumi/table.css +6 -6
  125. package/src/zen-sumi/tabs.css +3 -3
  126. package/src/zen-sumi/timeline.css +3 -3
  127. package/src/zen-sumi/toggle.css +6 -5
  128. package/src/zen-sumi/tree.css +19 -8
package/dist/minimal.css CHANGED
@@ -24,23 +24,27 @@
24
24
 
25
25
  [data-style='minimal'] [data-button][data-style='default'][data-variant='primary'],
26
26
  [data-style='minimal'] [data-button]:not([data-style])[data-variant='primary'] {
27
- border-color:transparent;background-image:none;background-color:var(--primary);color:var(--on-primary);
27
+ border-color:transparent;background-image:none;color:var(--on-primary);
28
+ background-color: var(--primary);
28
29
  }
29
30
 
30
31
  [data-style='minimal'] [data-button][data-style='default'][data-variant='secondary'],
31
32
  [data-style='minimal'] [data-button]:not([data-style])[data-variant='secondary'] {
32
- border-color:transparent;background-image:none;background-color:var(--accent);color:var(--on-primary);
33
+ border-color:transparent;background-image:none;color:var(--on-primary);
34
+ background-color: var(--accent);
33
35
  }
34
36
 
35
37
  [data-style='minimal'] [data-button][data-style='default'][data-variant='accent'],
36
38
  [data-style='minimal'] [data-button]:not([data-style])[data-variant='accent'] {
37
- border-color:transparent;background-image:none;--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);background-color:var(--accent);
38
- }[data-mode="dark"][data-style="minimal"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"] [data-style="minimal"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"][data-style="minimal"] [data-button]:not([data-style])[data-variant="accent"],[data-mode="dark"] [data-style="minimal"] [data-button]:not([data-style])[data-variant="accent"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);}
39
+ border-color:transparent;background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
40
+ background-color: var(--accent);
41
+ }
39
42
 
40
43
  [data-style='minimal'] [data-button][data-style='default'][data-variant='danger'],
41
44
  [data-style='minimal'] [data-button]:not([data-style])[data-variant='danger'] {
42
- border-color:transparent;background-image:none;--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);background-color:var(--danger);
43
- }[data-mode="dark"][data-style="minimal"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"] [data-style="minimal"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"][data-style="minimal"] [data-button]:not([data-style])[data-variant="danger"],[data-mode="dark"] [data-style="minimal"] [data-button]:not([data-style])[data-variant="danger"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);}
45
+ border-color:transparent;background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
46
+ background-color: var(--danger);
47
+ }
44
48
 
45
49
  /* =============================================================================
46
50
  Outline Style
@@ -114,12 +118,12 @@
114
118
  }
115
119
 
116
120
  [data-style='minimal'] [data-button][data-style='gradient'][data-variant='accent'] {
117
- --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);
118
- }[data-mode="dark"][data-style="minimal"] [data-button][data-style="gradient"][data-variant="accent"],[data-mode="dark"] [data-style="minimal"] [data-button][data-style="gradient"][data-variant="accent"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);}
121
+ --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
122
+ }
119
123
 
120
124
  [data-style='minimal'] [data-button][data-style='gradient'][data-variant='danger'] {
121
- --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);
122
- }[data-mode="dark"][data-style="minimal"] [data-button][data-style="gradient"][data-variant="danger"],[data-mode="dark"] [data-style="minimal"] [data-button][data-style="gradient"][data-variant="danger"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);}
125
+ --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
126
+ }
123
127
 
124
128
  [data-style='minimal']
125
129
  [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
@@ -302,7 +306,7 @@
302
306
  ============================================================================= */
303
307
 
304
308
  [data-style='minimal'] [data-tabs-trigger] {
305
- border-bottom-width:3px;border-bottom-color:transparent;background-color:transparent;color:var(--ink-soft);
309
+ border-bottom-width:3px;border-bottom-color:transparent;background-color:transparent;color:var(--ink-mute);
306
310
  font-weight: 400;
307
311
  transition:
308
312
  color 150ms ease,
@@ -405,7 +409,7 @@
405
409
  }
406
410
 
407
411
  [data-style='minimal'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
408
- color:var(--ink-soft);
412
+ color:var(--ink-mute);
409
413
  }
410
414
 
411
415
  [data-style='minimal'] [data-tabs-trigger][data-selected] [data-tabs-icon] {
@@ -439,7 +443,7 @@
439
443
  ============================================================================= */
440
444
 
441
445
  [data-style='minimal'] [data-toggle-option] {
442
- border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-soft);
446
+ border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-mute);
443
447
  }
444
448
 
445
449
  [data-style='minimal'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
@@ -457,7 +461,7 @@
457
461
  ============================================================================= */
458
462
 
459
463
  [data-style='minimal'] [data-toggle-option] [data-toggle-icon] {
460
- color:var(--ink-soft);
464
+ color:var(--ink-mute);
461
465
  }
462
466
 
463
467
  [data-style='minimal'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
@@ -477,7 +481,7 @@
477
481
  ============================================================================= */
478
482
 
479
483
  [data-style='minimal'] [data-toggle][data-toggle-variant='button'] {
480
- border-color:transparent;background-color:transparent;color:var(--ink-soft);
484
+ border-color:transparent;background-color:transparent;color:var(--ink-mute);
481
485
  background-image: none;
482
486
  }
483
487
 
@@ -487,7 +491,7 @@
487
491
  }
488
492
 
489
493
  [data-style='minimal'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
490
- color:var(--ink-soft);
494
+ color:var(--ink-mute);
491
495
  }
492
496
 
493
497
  [data-style='minimal'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
@@ -573,7 +577,7 @@
573
577
 
574
578
  [data-style='minimal'] [data-list] a[data-list-item],
575
579
  [data-style='minimal'] [data-list] button[data-list-item] {
576
- color:var(--ink-soft);
580
+ color:var(--ink-mute);
577
581
  }
578
582
 
579
583
  /* Hover and focus — text brightening only, no border */
@@ -611,12 +615,12 @@
611
615
  ============================================================================= */
612
616
 
613
617
  [data-style='minimal'] [data-list] [data-list-item] [data-item-icon] {
614
- color:var(--ink-soft);
618
+ color:var(--ink-mute);
615
619
  }
616
620
 
617
621
  [data-style='minimal'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
618
622
  [data-style='minimal'] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon] {
619
- color:var(--ink-soft);
623
+ color:var(--ink-mute);
620
624
  }
621
625
 
622
626
  [data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-icon] {
@@ -625,12 +629,12 @@
625
629
 
626
630
  /* Literal / kanji icons */
627
631
  [data-style='minimal'] [data-list] [data-list-item] [data-item-icon-literal] {
628
- color:var(--ink-soft);
632
+ color:var(--ink-mute);
629
633
  }
630
634
 
631
635
  [data-style='minimal'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon-literal],
632
636
  [data-style='minimal'] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon-literal] {
633
- color:var(--ink-soft);
637
+ color:var(--ink-mute);
634
638
  }
635
639
 
636
640
  [data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-icon-literal] {
@@ -638,7 +642,7 @@
638
642
  }
639
643
 
640
644
  [data-style='minimal'] [data-list] [data-list-item] [data-item-description] {
641
- color:var(--ink-soft);
645
+ color:var(--ink-mute);
642
646
  }
643
647
 
644
648
  [data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
@@ -646,7 +650,7 @@
646
650
  }
647
651
 
648
652
  [data-style='minimal'] [data-list] [data-list-item] [data-item-badge] {
649
- border-width:1px;background-color:transparent;background-image:none;color:var(--ink-soft);border-color:var(--paper-edge);
653
+ border-width:1px;background-color:transparent;background-image:none;color:var(--ink-mute);border-color:var(--paper-edge);
650
654
  }
651
655
 
652
656
  [data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
@@ -658,7 +662,7 @@
658
662
  ============================================================================= */
659
663
 
660
664
  [data-style='minimal'] [data-list] [data-list-group] {
661
- color:var(--ink-soft);
665
+ color:var(--ink-mute);
662
666
  }
663
667
 
664
668
  /* Group hover — text-only, no border */
@@ -703,6 +707,17 @@
703
707
  * Clean, understated tree with subtle borders.
704
708
  */
705
709
 
710
+ /* =============================================================================
711
+ Connector Lines — hairline tone (mode-aware), not currentColor (which
712
+ renders white in dark mode and greyish in light).
713
+ ============================================================================= */
714
+
715
+ [data-style='minimal'] [data-tree]:not([data-line-style='none']) [data-connector-v],
716
+ [data-style='minimal'] [data-tree]:not([data-line-style='none']) [data-connector-h],
717
+ [data-style='minimal'] [data-tree]:not([data-line-style='none']) [data-connector-corner] {
718
+ border-color:var(--paper-edge);
719
+ }
720
+
706
721
  /* =============================================================================
707
722
  Tree Container
708
723
  ============================================================================= */
@@ -716,11 +731,11 @@
716
731
  ============================================================================= */
717
732
 
718
733
  [data-style='minimal'] [data-tree-toggle-btn] {
719
- color:var(--paper-edge);
734
+ color:var(--ink-mute);
720
735
  }
721
736
 
722
737
  [data-style='minimal'] [data-tree-toggle-btn]:hover {
723
- background-image:none;color:var(--ink-soft);
738
+ background-image:none;color:var(--ink-mute);
724
739
  }
725
740
 
726
741
  /* =============================================================================
@@ -774,11 +789,11 @@
774
789
  ============================================================================= */
775
790
 
776
791
  [data-style='minimal'] [data-tree-item-content] [data-item-icon] {
777
- color:var(--ink-soft);
792
+ color:var(--ink-mute);
778
793
  }
779
794
 
780
795
  [data-style='minimal'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
781
- color:var(--ink-soft);
796
+ color:var(--ink-mute);
782
797
  }
783
798
 
784
799
  [data-style='minimal'] [data-tree-item-content][data-active='true'] [data-item-icon] {
@@ -786,7 +801,7 @@
786
801
  }
787
802
 
788
803
  [data-style='minimal'] [data-tree-item-content] [data-item-description] {
789
- color:var(--ink-soft);
804
+ color:var(--ink-mute);
790
805
  }
791
806
 
792
807
  [data-style='minimal'] [data-tree-item-content][data-active='true'] [data-item-description] {
@@ -794,7 +809,7 @@
794
809
  }
795
810
 
796
811
  [data-style='minimal'] [data-tree-item-content] [data-item-badge] {
797
- border-width:1px;background-color:transparent;background-image:none;color:var(--ink-soft);border-color:var(--paper-edge);
812
+ border-width:1px;background-color:transparent;background-image:none;color:var(--ink-mute);border-color:var(--paper-edge);
798
813
  }
799
814
 
800
815
  [data-style='minimal'] [data-tree-item-content][data-active='true'] [data-item-badge] {
@@ -870,7 +885,7 @@
870
885
  ============================================================================= */
871
886
 
872
887
  [data-style='minimal'] [data-select-placeholder] {
873
- color:var(--ink-soft);
888
+ color:var(--ink-mute);
874
889
  }
875
890
 
876
891
  /* =============================================================================
@@ -878,11 +893,11 @@
878
893
  ============================================================================= */
879
894
 
880
895
  [data-style='minimal'] [data-select-arrow] {
881
- color:var(--ink-soft);
896
+ color:var(--ink-mute);
882
897
  }
883
898
 
884
899
  [data-style='minimal'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
885
- color:var(--ink-soft);
900
+ color:var(--ink-mute);
886
901
  }
887
902
 
888
903
  /* =============================================================================
@@ -894,7 +909,7 @@
894
909
  }
895
910
 
896
911
  [data-style='minimal'] [data-select-tag-remove] {
897
- color:var(--ink-soft);
912
+ color:var(--ink-mute);
898
913
  }
899
914
 
900
915
  [data-style='minimal'] [data-select-tag-remove]:hover {
@@ -951,7 +966,7 @@
951
966
 
952
967
  /* Item elements */
953
968
  [data-style='minimal'] [data-select-option] [data-item-description] {
954
- color:var(--ink-soft);
969
+ color:var(--ink-mute);
955
970
  }
956
971
 
957
972
  [data-style='minimal'] [data-select-option][data-selected='true'] [data-item-description] {
@@ -963,7 +978,7 @@
963
978
  ============================================================================= */
964
979
 
965
980
  [data-style='minimal'] [data-select-group-label] {
966
- color:var(--ink-soft);
981
+ color:var(--ink-mute);
967
982
  }
968
983
 
969
984
  /* =============================================================================
@@ -991,11 +1006,11 @@
991
1006
  }
992
1007
 
993
1008
  [data-style='minimal'] [data-select-filter-input]::placeholder {
994
- color:var(--ink-soft);
1009
+ color:var(--ink-mute);
995
1010
  }
996
1011
 
997
1012
  [data-style='minimal'] [data-select-empty] {
998
- color:var(--ink-soft);
1013
+ color:var(--ink-mute);
999
1014
  }
1000
1015
 
1001
1016
  /**
@@ -1026,7 +1041,7 @@
1026
1041
 
1027
1042
  /* Trigger elements */
1028
1043
  [data-style='minimal'] [data-menu-trigger] [data-menu-icon] {
1029
- color:var(--ink-soft);
1044
+ color:var(--ink-mute);
1030
1045
  }
1031
1046
 
1032
1047
  [data-style='minimal'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
@@ -1034,7 +1049,7 @@
1034
1049
  }
1035
1050
 
1036
1051
  [data-style='minimal'] [data-menu-trigger] [data-menu-arrow] {
1037
- color:var(--paper-edge);
1052
+ color:var(--ink-mute);
1038
1053
  }
1039
1054
 
1040
1055
  /* =============================================================================
@@ -1060,15 +1075,15 @@
1060
1075
 
1061
1076
  /* Item elements */
1062
1077
  [data-style='minimal'] [data-menu-item] [data-item-icon] {
1063
- color:var(--ink-soft);
1078
+ color:var(--ink-mute);
1064
1079
  }
1065
1080
 
1066
1081
  [data-style='minimal'] [data-menu-item]:hover:not(:disabled) [data-item-icon] {
1067
- color:var(--ink-soft);
1082
+ color:var(--ink-mute);
1068
1083
  }
1069
1084
 
1070
1085
  [data-style='minimal'] [data-menu-item] [data-item-description] {
1071
- color:var(--ink-soft);
1086
+ color:var(--ink-mute);
1072
1087
  }
1073
1088
 
1074
1089
  /* =============================================================================
@@ -1076,7 +1091,7 @@
1076
1091
  ============================================================================= */
1077
1092
 
1078
1093
  [data-style='minimal'] [data-menu-group] {
1079
- color:var(--ink-soft);
1094
+ color:var(--ink-mute);
1080
1095
  }
1081
1096
 
1082
1097
  /* =============================================================================
@@ -1110,11 +1125,11 @@
1110
1125
  }
1111
1126
 
1112
1127
  [data-style='minimal'] [data-dropdown-trigger] [data-dropdown-icon] {
1113
- color:var(--ink-soft);
1128
+ color:var(--ink-mute);
1114
1129
  }
1115
1130
 
1116
1131
  [data-style='minimal'] [data-dropdown-trigger] [data-dropdown-arrow] {
1117
- color:var(--paper-edge);
1132
+ color:var(--ink-mute);
1118
1133
  }
1119
1134
 
1120
1135
  [data-style='minimal'] [data-dropdown-panel] {
@@ -1385,7 +1400,7 @@
1385
1400
  ============================================================================= */
1386
1401
 
1387
1402
  [data-style='minimal'] [data-table-header] th {
1388
- border-bottom-width:1px;color:var(--ink-soft);border-color:var(--paper-edge);background-color:var(--paper-mute);
1403
+ border-bottom-width:1px;color:var(--ink-mute);border-color:var(--paper-edge);background-color:var(--paper-mute);
1389
1404
  }
1390
1405
 
1391
1406
  [data-style='minimal'] [data-table-header-cell][data-sortable='true']:hover {
@@ -1398,7 +1413,7 @@
1398
1413
  }
1399
1414
 
1400
1415
  [data-style='minimal'] [data-table-sort-icon] {
1401
- color:var(--ink-soft);
1416
+ color:var(--ink-mute);
1402
1417
  }
1403
1418
 
1404
1419
  [data-style='minimal'] [data-table-header-cell][data-sort-order='ascending'] [data-table-sort-icon],
@@ -1459,7 +1474,7 @@
1459
1474
  ============================================================================= */
1460
1475
 
1461
1476
  [data-style='minimal'] [data-table-empty] {
1462
- color:var(--ink-soft);
1477
+ color:var(--ink-mute);
1463
1478
  }
1464
1479
 
1465
1480
  /* =============================================================================
@@ -1467,7 +1482,7 @@
1467
1482
  ============================================================================= */
1468
1483
 
1469
1484
  [data-style='minimal'] [data-table-cell] [data-cell-icon] {
1470
- color:var(--ink-soft);
1485
+ color:var(--ink-mute);
1471
1486
  }
1472
1487
 
1473
1488
  [data-style='minimal'] [data-table-row][data-selected='true'] [data-cell-icon] {
@@ -1484,7 +1499,7 @@
1484
1499
  }
1485
1500
 
1486
1501
  [data-style='minimal'] [data-table-responsive] [data-table-cell]::before {
1487
- color:var(--ink-soft);
1502
+ color:var(--ink-mute);
1488
1503
  }
1489
1504
 
1490
1505
  /* Disable striped alternating bg in card layout */
@@ -1655,11 +1670,11 @@
1655
1670
  }
1656
1671
 
1657
1672
  [data-style='minimal'] [data-timeline-item][data-completed] [data-timeline-circle] {
1658
- border-color:var(--primary);color:var(--primary);
1673
+ border-color:var(--primary);color:var(--ink);
1659
1674
  }
1660
1675
 
1661
1676
  [data-style='minimal'] [data-timeline-item][data-active] [data-timeline-circle] {
1662
- border-bottom-width:2px;border-color:var(--primary);color:var(--primary);
1677
+ border-bottom-width:2px;border-color:var(--primary);color:var(--ink);
1663
1678
  }
1664
1679
 
1665
1680
  /* =============================================================================
@@ -1671,7 +1686,7 @@
1671
1686
  }
1672
1687
 
1673
1688
  [data-style='minimal'] [data-timeline-item][data-completed] [data-timeline-connector] {
1674
- background-color:var(--primary);
1689
+ background-color: var(--primary);
1675
1690
  }
1676
1691
 
1677
1692
  /* =============================================================================
@@ -1854,8 +1869,8 @@
1854
1869
  }
1855
1870
 
1856
1871
  [data-style='minimal'] [data-card][data-variant='primary'] [data-card-body] {
1857
- color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);
1858
- }[data-mode="dark"][data-style="minimal"] [data-card][data-variant="primary"] [data-card-body],[data-mode="dark"] [data-style="minimal"] [data-card][data-variant="primary"] [data-card-body]{color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);}
1872
+ color:rgb(22 22 22 / 0.8);
1873
+ }
1859
1874
 
1860
1875
  /* Secondary — solid secondary fill */
1861
1876
  [data-style='minimal'] [data-card][data-variant='secondary'] {
@@ -1868,8 +1883,8 @@
1868
1883
  }
1869
1884
 
1870
1885
  [data-style='minimal'] [data-card][data-variant='secondary'] [data-card-body] {
1871
- color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);
1872
- }[data-mode="dark"][data-style="minimal"] [data-card][data-variant="secondary"] [data-card-body],[data-mode="dark"] [data-style="minimal"] [data-card][data-variant="secondary"] [data-card-body]{color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);}
1886
+ color:rgb(22 22 22 / 0.8);
1887
+ }
1873
1888
 
1874
1889
  /* Tertiary — recessed surface, lighter border */
1875
1890
  [data-style='minimal'] [data-card][data-variant='tertiary'] {
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  [data-style='rokkit'] [data-avatar] {
6
- background-color:var(--paper-edge);color:var(--ink-mute);
6
+ background-color:var(--paper-edge);color:var(--ink);
7
7
  }
8
8
 
9
9
  /* Status dot colors */
@@ -5,7 +5,7 @@
5
5
  /* Default variant */
6
6
  [data-style='rokkit'] [data-badge][data-variant='default'],
7
7
  [data-style='rokkit'] [data-badge]:not([data-variant]) {
8
- background-color:var(--ink-soft);color:var(--paper-soft);
8
+ background-color:var(--ink-mute);color:var(--paper-soft);
9
9
  }
10
10
 
11
11
  /* Primary */
@@ -15,15 +15,15 @@
15
15
 
16
16
  /* Success */
17
17
  [data-style='rokkit'] [data-badge][data-variant='success'] {
18
- --un-text-opacity:1;color:color-mix(in srgb, var(--color-success-50) calc(var(--un-text-opacity) * 100%), transparent);background-color:var(--success);
19
- }[data-mode="dark"][data-style="rokkit"] [data-badge][data-variant="success"],[data-mode="dark"] [data-style="rokkit"] [data-badge][data-variant="success"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-success-50) calc(var(--un-text-opacity) * 100%), transparent);}
18
+ --un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));background-color:var(--success);
19
+ }
20
20
 
21
21
  /* Warning */
22
22
  [data-style='rokkit'] [data-badge][data-variant='warning'] {
23
- --un-text-opacity:1;color:color-mix(in srgb, var(--color-warning-50) calc(var(--un-text-opacity) * 100%), transparent);background-color:var(--warning);
24
- }[data-mode="dark"][data-style="rokkit"] [data-badge][data-variant="warning"],[data-mode="dark"] [data-style="rokkit"] [data-badge][data-variant="warning"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-warning-50) calc(var(--un-text-opacity) * 100%), transparent);}
23
+ --un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));background-color:var(--warning);
24
+ }
25
25
 
26
26
  /* Error */
27
27
  [data-style='rokkit'] [data-badge][data-variant='error'] {
28
- --un-text-opacity:1;color:color-mix(in srgb, var(--color-error-50) calc(var(--un-text-opacity) * 100%), transparent);background-color:var(--error);
29
- }[data-mode="dark"][data-style="rokkit"] [data-badge][data-variant="error"],[data-mode="dark"] [data-style="rokkit"] [data-badge][data-variant="error"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-error-50) calc(var(--un-text-opacity) * 100%), transparent);}
28
+ --un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));background-color:var(--error);
29
+ }
@@ -47,16 +47,16 @@
47
47
  /* Accent variant */
48
48
  [data-style='rokkit'] [data-button][data-style='default'][data-variant='accent'],
49
49
  [data-style='rokkit'] [data-button]:not([data-style])[data-variant='accent'] {
50
- border-width:1px;--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);border-color:var(--accent);
50
+ border-width:1px;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));border-color:var(--accent);
51
51
  background: linear-gradient(to bottom, var(--accent), var(--accent));
52
- }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"][data-style="rokkit"] [data-button]:not([data-style])[data-variant="accent"],[data-mode="dark"] [data-style="rokkit"] [data-button]:not([data-style])[data-variant="accent"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);}
52
+ }
53
53
 
54
54
  /* Danger variant */
55
55
  [data-style='rokkit'] [data-button][data-style='default'][data-variant='danger'],
56
56
  [data-style='rokkit'] [data-button]:not([data-style])[data-variant='danger'] {
57
- border-width:1px;--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);border-color:var(--danger);
57
+ border-width:1px;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));border-color:var(--danger);
58
58
  background: linear-gradient(to bottom, var(--danger), var(--danger));
59
- }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"][data-style="rokkit"] [data-button]:not([data-style])[data-variant="danger"],[data-mode="dark"] [data-style="rokkit"] [data-button]:not([data-style])[data-variant="danger"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);}
59
+ }
60
60
 
61
61
  /* =============================================================================
62
62
  Outline Style
@@ -130,12 +130,12 @@
130
130
  }
131
131
 
132
132
  [data-style='rokkit'] [data-button][data-style='gradient'][data-variant='accent'] {
133
- --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);
134
- }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="gradient"][data-variant="accent"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="gradient"][data-variant="accent"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);}
133
+ --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
134
+ }
135
135
 
136
136
  [data-style='rokkit'] [data-button][data-style='gradient'][data-variant='danger'] {
137
- --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);
138
- }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="gradient"][data-variant="danger"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="gradient"][data-variant="danger"]{--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);}
137
+ --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
138
+ }
139
139
 
140
140
  [data-style='rokkit']
141
141
  [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
@@ -235,7 +235,7 @@
235
235
  [data-button][data-style='ghost']:hover:not(:disabled):not(
236
236
  [data-disabled]
237
237
  )[data-variant='primary'] {
238
- background-color:var(--primary);
238
+ background-color: var(--primary);
239
239
  }
240
240
 
241
241
  [data-style='rokkit']
@@ -79,8 +79,8 @@
79
79
  }
80
80
 
81
81
  [data-style='rokkit'] [data-card][data-variant='primary'] [data-card-body] {
82
- color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);
83
- }[data-mode="dark"][data-style="rokkit"] [data-card][data-variant="primary"] [data-card-body],[data-mode="dark"] [data-style="rokkit"] [data-card][data-variant="primary"] [data-card-body]{color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);}
82
+ color:rgb(22 22 22 / 0.8);
83
+ }
84
84
 
85
85
  /* Secondary — muted secondary surface */
86
86
  [data-style='rokkit'] [data-card][data-variant='secondary'] {
@@ -93,8 +93,8 @@
93
93
  }
94
94
 
95
95
  [data-style='rokkit'] [data-card][data-variant='secondary'] [data-card-body] {
96
- color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);
97
- }[data-mode="dark"][data-style="rokkit"] [data-card][data-variant="secondary"] [data-card-body],[data-mode="dark"] [data-style="rokkit"] [data-card][data-variant="secondary"] [data-card-body]{color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);}
96
+ color:rgb(22 22 22 / 0.8);
97
+ }
98
98
 
99
99
  /* Tertiary — elevated surface, no color accent */
100
100
  [data-style='rokkit'] [data-card][data-variant='tertiary'] {
@@ -22,5 +22,5 @@
22
22
  }
23
23
 
24
24
  [data-style='rokkit'] [data-divider-label] {
25
- color:var(--ink-soft);
25
+ color:var(--ink-mute);
26
26
  }
@@ -25,7 +25,7 @@
25
25
  }
26
26
 
27
27
  [data-style='rokkit'] [data-dropdown-trigger] [data-dropdown-icon] {
28
- color:var(--ink-soft);
28
+ color:var(--ink-mute);
29
29
  }
30
30
 
31
31
  [data-style='rokkit'] [data-dropdown-trigger]:hover:not(:disabled) [data-dropdown-icon] {
@@ -33,7 +33,7 @@
33
33
  }
34
34
 
35
35
  [data-style='rokkit'] [data-dropdown-trigger] [data-dropdown-arrow] {
36
- color:var(--ink-soft);
36
+ color:var(--ink-mute);
37
37
  }
38
38
 
39
39
  /* =============================================================================
@@ -54,7 +54,7 @@
54
54
 
55
55
  [data-style='rokkit'] [data-list] [data-list-item] [data-item-icon] {
56
56
  font-size: 1rem;
57
- color:var(--ink-soft);
57
+ color:var(--ink-mute);
58
58
  }
59
59
 
60
60
  [data-style='rokkit'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
@@ -79,7 +79,7 @@
79
79
 
80
80
  /* Literal / kanji icons */
81
81
  [data-style='rokkit'] [data-list] [data-list-item] [data-item-icon-literal] {
82
- color:var(--ink-soft);
82
+ color:var(--ink-mute);
83
83
  }
84
84
 
85
85
  [data-style='rokkit'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon-literal],
@@ -104,7 +104,7 @@
104
104
 
105
105
  /* Item description */
106
106
  [data-style='rokkit'] [data-list] [data-list-item] [data-item-description] {
107
- color:var(--ink-soft);
107
+ color:var(--ink-mute);
108
108
  }
109
109
 
110
110
  [data-style='rokkit'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
@@ -124,7 +124,7 @@
124
124
 
125
125
  /* Item badge */
126
126
  [data-style='rokkit'] [data-list] [data-list-item] [data-item-badge] {
127
- border-width:1px;--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--ink-soft);border-color:var(--paper-edge);
127
+ border-width:1px;--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--ink-mute);border-color:var(--paper-edge);
128
128
  }
129
129
 
130
130
  [data-style='rokkit'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
@@ -157,7 +157,7 @@
157
157
  ============================================================================= */
158
158
 
159
159
  [data-style='rokkit'] [data-list] [data-list-group] {
160
- margin-top:0.5rem;color:var(--ink-soft);
160
+ margin-top:0.5rem;color:var(--ink-mute);
161
161
  }
162
162
 
163
163
  [data-style='rokkit'] [data-list] [data-list-group]:first-child {