@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/frosted.css CHANGED
@@ -48,21 +48,21 @@
48
48
 
49
49
  [data-style='frosted'] [data-button][data-style='default'][data-variant='accent'],
50
50
  [data-style='frosted'] [data-button]:not([data-style])[data-variant='accent'] {
51
- border-width:1px;background-color:color-mix(in srgb, var(--color-accent) calc(0.6 * 100%), transparent);--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
51
+ border-width:1px;background-color:color-mix(in srgb, var(--color-accent) calc(0.6 * 100%), transparent);--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
52
52
  border-color: rgba(255, 255, 255, 0.25);
53
53
  box-shadow:
54
54
  inset 0 1px 0 rgba(255, 255, 255, 0.25),
55
55
  0 2px 8px rgba(0, 0, 0, 0.12);
56
- }[data-mode="dark"][data-style="frosted"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"] [data-style="frosted"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"][data-style="frosted"] [data-button]:not([data-style])[data-variant="accent"],[data-mode="dark"] [data-style="frosted"] [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);}
56
+ }
57
57
 
58
58
  [data-style='frosted'] [data-button][data-style='default'][data-variant='danger'],
59
59
  [data-style='frosted'] [data-button]:not([data-style])[data-variant='danger'] {
60
- border-width:1px;background-color:color-mix(in srgb, var(--color-danger) calc(0.6 * 100%), transparent);--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
60
+ border-width:1px;background-color:color-mix(in srgb, var(--color-danger) calc(0.6 * 100%), transparent);--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
61
61
  border-color: rgba(255, 255, 255, 0.25);
62
62
  box-shadow:
63
63
  inset 0 1px 0 rgba(255, 255, 255, 0.25),
64
64
  0 2px 8px rgba(0, 0, 0, 0.12);
65
- }[data-mode="dark"][data-style="frosted"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"] [data-style="frosted"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"][data-style="frosted"] [data-button]:not([data-style])[data-variant="danger"],[data-mode="dark"] [data-style="frosted"] [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);}
65
+ }
66
66
 
67
67
  /* =============================================================================
68
68
  Outline Style
@@ -156,16 +156,16 @@
156
156
  }
157
157
 
158
158
  [data-style='frosted'] [data-button][data-style='gradient'][data-variant='accent'] {
159
- --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-accent) calc(0.8 * 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(0.6 * 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);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
159
+ --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-accent) calc(0.8 * 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(0.6 * 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));--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
160
160
  border-color: rgba(255, 255, 255, 0.25);
161
161
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
162
- }[data-mode="dark"][data-style="frosted"] [data-button][data-style="gradient"][data-variant="accent"],[data-mode="dark"] [data-style="frosted"] [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);}
162
+ }
163
163
 
164
164
  [data-style='frosted'] [data-button][data-style='gradient'][data-variant='danger'] {
165
- --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-danger) calc(0.8 * 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(0.6 * 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);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
165
+ --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-danger) calc(0.8 * 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(0.6 * 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));--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
166
166
  border-color: rgba(255, 255, 255, 0.25);
167
167
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
168
- }[data-mode="dark"][data-style="frosted"] [data-button][data-style="gradient"][data-variant="danger"],[data-mode="dark"] [data-style="frosted"] [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);}
168
+ }
169
169
 
170
170
  [data-style='frosted']
171
171
  [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
@@ -488,7 +488,7 @@
488
488
  ============================================================================= */
489
489
 
490
490
  [data-style='frosted'] [data-tabs-trigger] {
491
- background-color:transparent;color:var(--ink-soft);
491
+ background-color:transparent;color:var(--ink-mute);
492
492
  }
493
493
 
494
494
  [data-style='frosted'] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
@@ -506,7 +506,7 @@
506
506
  ============================================================================= */
507
507
 
508
508
  [data-style='frosted'] [data-tabs-trigger] [data-tabs-icon] {
509
- color:var(--ink-soft);
509
+ color:var(--ink-mute);
510
510
  }
511
511
 
512
512
  [data-style='frosted'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
@@ -546,7 +546,7 @@
546
546
  ============================================================================= */
547
547
 
548
548
  [data-style='frosted'] [data-toggle-option] {
549
- color:var(--ink-soft);
549
+ color:var(--ink-mute);
550
550
  }
551
551
 
552
552
  [data-style='frosted'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
@@ -565,7 +565,7 @@
565
565
  ============================================================================= */
566
566
 
567
567
  [data-style='frosted'] [data-toggle-option] [data-toggle-icon] {
568
- color:var(--ink-soft);
568
+ color:var(--ink-mute);
569
569
  }
570
570
 
571
571
  [data-style='frosted'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
@@ -585,7 +585,7 @@
585
585
  ============================================================================= */
586
586
 
587
587
  [data-style='frosted'] [data-toggle][data-toggle-variant='button'] {
588
- border-color:transparent;background-color:transparent;color:var(--ink-soft);
588
+ border-color:transparent;background-color:transparent;color:var(--ink-mute);
589
589
  background-image: none;
590
590
  }
591
591
 
@@ -595,7 +595,7 @@
595
595
  }
596
596
 
597
597
  [data-style='frosted'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
598
- color:var(--ink-soft);
598
+ color:var(--ink-mute);
599
599
  }
600
600
 
601
601
  [data-style='frosted'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
@@ -704,7 +704,7 @@
704
704
  ============================================================================= */
705
705
 
706
706
  [data-style='frosted'] [data-list] [data-list-item] [data-item-icon] {
707
- color:var(--ink-soft);
707
+ color:var(--ink-mute);
708
708
  }
709
709
 
710
710
  [data-style='frosted'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
@@ -718,7 +718,7 @@
718
718
 
719
719
  /* Literal / kanji icons */
720
720
  [data-style='frosted'] [data-list] [data-list-item] [data-item-icon-literal] {
721
- color:var(--ink-soft);
721
+ color:var(--ink-mute);
722
722
  }
723
723
 
724
724
  [data-style='frosted'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon-literal],
@@ -742,7 +742,7 @@
742
742
  }
743
743
 
744
744
  [data-style='frosted'] [data-list] [data-list-item] [data-item-description] {
745
- color:var(--ink-soft);
745
+ color:var(--ink-mute);
746
746
  }
747
747
 
748
748
  [data-style='frosted'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
@@ -750,7 +750,7 @@
750
750
  }
751
751
 
752
752
  [data-style='frosted'] [data-list] [data-list-item] [data-item-badge] {
753
- background-image:none;color:var(--ink-soft);
753
+ background-image:none;color:var(--ink-mute);
754
754
  background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
755
755
  }
756
756
 
@@ -763,7 +763,7 @@
763
763
  ============================================================================= */
764
764
 
765
765
  [data-style='frosted'] [data-list] [data-list-group] {
766
- color:var(--ink-soft);
766
+ color:var(--ink-mute);
767
767
  }
768
768
 
769
769
  [data-style='frosted'] [data-list] [data-list-group]:hover:not(:disabled),
@@ -807,6 +807,17 @@
807
807
  * Glassmorphism styling with blur and transparency.
808
808
  */
809
809
 
810
+ /* =============================================================================
811
+ Connector Lines — hairline tone (mode-aware), not currentColor (which
812
+ renders white in dark mode and greyish in light).
813
+ ============================================================================= */
814
+
815
+ [data-style='frosted'] [data-tree]:not([data-line-style='none']) [data-connector-v],
816
+ [data-style='frosted'] [data-tree]:not([data-line-style='none']) [data-connector-h],
817
+ [data-style='frosted'] [data-tree]:not([data-line-style='none']) [data-connector-corner] {
818
+ border-color:var(--paper-edge);
819
+ }
820
+
810
821
  /* =============================================================================
811
822
  Tree Container
812
823
  ============================================================================= */
@@ -821,7 +832,7 @@
821
832
  ============================================================================= */
822
833
 
823
834
  [data-style='frosted'] [data-tree-toggle-btn] {
824
- color:var(--ink-soft);
835
+ color:var(--ink-mute);
825
836
  }
826
837
 
827
838
  [data-style='frosted'] [data-tree-toggle-btn]:hover {
@@ -863,7 +874,7 @@
863
874
  ============================================================================= */
864
875
 
865
876
  [data-style='frosted'] [data-tree-item-content] [data-item-icon] {
866
- color:var(--ink-soft);
877
+ color:var(--ink-mute);
867
878
  }
868
879
 
869
880
  [data-style='frosted'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
@@ -875,7 +886,7 @@
875
886
  }
876
887
 
877
888
  [data-style='frosted'] [data-tree-item-content] [data-item-description] {
878
- color:var(--ink-soft);
889
+ color:var(--ink-mute);
879
890
  }
880
891
 
881
892
  [data-style='frosted'] [data-tree-item-content][data-active='true'] [data-item-description] {
@@ -883,7 +894,7 @@
883
894
  }
884
895
 
885
896
  [data-style='frosted'] [data-tree-item-content] [data-item-badge] {
886
- color:var(--ink-soft);
897
+ color:var(--ink-mute);
887
898
  background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
888
899
  }
889
900
 
@@ -961,7 +972,7 @@
961
972
  ============================================================================= */
962
973
 
963
974
  [data-style='frosted'] [data-select-placeholder] {
964
- color:var(--ink-soft);
975
+ color:var(--ink-mute);
965
976
  }
966
977
 
967
978
  /* =============================================================================
@@ -969,7 +980,7 @@
969
980
  ============================================================================= */
970
981
 
971
982
  [data-style='frosted'] [data-select-arrow] {
972
- color:var(--ink-soft);
983
+ color:var(--ink-mute);
973
984
  }
974
985
 
975
986
  [data-style='frosted'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
@@ -986,7 +997,7 @@
986
997
  }
987
998
 
988
999
  [data-style='frosted'] [data-select-tag-remove] {
989
- color:var(--ink-soft);
1000
+ color:var(--ink-mute);
990
1001
  }
991
1002
 
992
1003
  [data-style='frosted'] [data-select-tag-remove]:hover {
@@ -1048,7 +1059,7 @@
1048
1059
 
1049
1060
  /* Item elements */
1050
1061
  [data-style='frosted'] [data-select-option] [data-item-icon] {
1051
- color:var(--ink-soft);
1062
+ color:var(--ink-mute);
1052
1063
  }
1053
1064
 
1054
1065
  [data-style='frosted'] [data-select-option]:hover:not(:disabled) [data-item-icon] {
@@ -1060,7 +1071,7 @@
1060
1071
  }
1061
1072
 
1062
1073
  [data-style='frosted'] [data-select-option] [data-item-description] {
1063
- color:var(--ink-soft);
1074
+ color:var(--ink-mute);
1064
1075
  }
1065
1076
 
1066
1077
  [data-style='frosted'] [data-select-option][data-selected='true'] [data-item-description] {
@@ -1072,7 +1083,7 @@
1072
1083
  ============================================================================= */
1073
1084
 
1074
1085
  [data-style='frosted'] [data-select-group-label] {
1075
- color:var(--ink-soft);
1086
+ color:var(--ink-mute);
1076
1087
  }
1077
1088
 
1078
1089
  /* =============================================================================
@@ -1103,11 +1114,11 @@
1103
1114
  }
1104
1115
 
1105
1116
  [data-style='frosted'] [data-select-filter-input]::placeholder {
1106
- color:var(--ink-soft);
1117
+ color:var(--ink-mute);
1107
1118
  }
1108
1119
 
1109
1120
  [data-style='frosted'] [data-select-empty] {
1110
- color:var(--ink-soft);
1121
+ color:var(--ink-mute);
1111
1122
  }
1112
1123
 
1113
1124
  /**
@@ -1145,7 +1156,7 @@
1145
1156
 
1146
1157
  /* Trigger elements */
1147
1158
  [data-style='frosted'] [data-menu-trigger] [data-menu-icon] {
1148
- color:var(--ink-soft);
1159
+ color:var(--ink-mute);
1149
1160
  }
1150
1161
 
1151
1162
  [data-style='frosted'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
@@ -1153,7 +1164,7 @@
1153
1164
  }
1154
1165
 
1155
1166
  [data-style='frosted'] [data-menu-trigger] [data-menu-arrow] {
1156
- color:var(--ink-soft);
1167
+ color:var(--ink-mute);
1157
1168
  }
1158
1169
 
1159
1170
  /* =============================================================================
@@ -1190,7 +1201,7 @@
1190
1201
 
1191
1202
  /* Item elements */
1192
1203
  [data-style='frosted'] [data-menu-item] [data-item-icon] {
1193
- color:var(--ink-soft);
1204
+ color:var(--ink-mute);
1194
1205
  }
1195
1206
 
1196
1207
  [data-style='frosted'] [data-menu-item]:hover:not(:disabled) [data-item-icon] {
@@ -1198,7 +1209,7 @@
1198
1209
  }
1199
1210
 
1200
1211
  [data-style='frosted'] [data-menu-item] [data-item-description] {
1201
- color:var(--ink-soft);
1212
+ color:var(--ink-mute);
1202
1213
  }
1203
1214
 
1204
1215
  /* =============================================================================
@@ -1206,7 +1217,7 @@
1206
1217
  ============================================================================= */
1207
1218
 
1208
1219
  [data-style='frosted'] [data-menu-group] {
1209
- color:var(--ink-soft);
1220
+ color:var(--ink-mute);
1210
1221
  }
1211
1222
 
1212
1223
  /* =============================================================================
@@ -1248,11 +1259,11 @@
1248
1259
  }
1249
1260
 
1250
1261
  [data-style='frosted'] [data-dropdown-trigger] [data-dropdown-icon] {
1251
- color:var(--ink-soft);
1262
+ color:var(--ink-mute);
1252
1263
  }
1253
1264
 
1254
1265
  [data-style='frosted'] [data-dropdown-trigger] [data-dropdown-arrow] {
1255
- color:var(--ink-soft);
1266
+ color:var(--ink-mute);
1256
1267
  }
1257
1268
 
1258
1269
  [data-style='frosted'] [data-dropdown-panel] {
@@ -1361,7 +1372,7 @@
1361
1372
  ============================================================================= */
1362
1373
 
1363
1374
  [data-style='frosted'] [data-table-header] th {
1364
- border-bottom-width:1px;--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink-soft);
1375
+ border-bottom-width:1px;--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink-mute);
1365
1376
  border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
1366
1377
  background-color: color-mix(in oklch, var(--paper-mute) 80%, transparent);
1367
1378
  }
@@ -1376,7 +1387,7 @@
1376
1387
  }
1377
1388
 
1378
1389
  [data-style='frosted'] [data-table-sort-icon] {
1379
- color:var(--ink-soft);
1390
+ color:var(--ink-mute);
1380
1391
  }
1381
1392
 
1382
1393
  [data-style='frosted'] [data-table-header-cell][data-sort-order='ascending'] [data-table-sort-icon],
@@ -1437,7 +1448,7 @@
1437
1448
  ============================================================================= */
1438
1449
 
1439
1450
  [data-style='frosted'] [data-table-empty] {
1440
- color:var(--ink-soft);
1451
+ color:var(--ink-mute);
1441
1452
  }
1442
1453
 
1443
1454
  /* =============================================================================
@@ -1445,7 +1456,7 @@
1445
1456
  ============================================================================= */
1446
1457
 
1447
1458
  [data-style='frosted'] [data-table-cell] [data-cell-icon] {
1448
- color:var(--ink-soft);
1459
+ color:var(--ink-mute);
1449
1460
  }
1450
1461
 
1451
1462
  [data-style='frosted'] [data-table-row][data-selected='true'] [data-cell-icon] {
@@ -1464,7 +1475,7 @@
1464
1475
  }
1465
1476
 
1466
1477
  [data-style='frosted'] [data-table-responsive] [data-table-cell]::before {
1467
- color:var(--ink-soft);
1478
+ color:var(--ink-mute);
1468
1479
  }
1469
1480
 
1470
1481
  /* Disable striped alternating bg in card layout */
@@ -1647,7 +1658,7 @@
1647
1658
  }
1648
1659
 
1649
1660
  [data-style='frosted'] [data-timeline-item][data-active] [data-timeline-circle] {
1650
- border-color:color-mix(in srgb, var(--color-primary) calc(0.6 * 100%), transparent);--un-ring-width:3px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:color-mix(in srgb, var(--color-primary) calc(0.15 * 100%), transparent);color:var(--primary);
1661
+ border-color:color-mix(in srgb, var(--color-primary) calc(0.6 * 100%), transparent);--un-ring-width:3px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:color-mix(in srgb, var(--color-primary) calc(0.15 * 100%), transparent);color:var(--ink);
1651
1662
  }
1652
1663
 
1653
1664
  /* =============================================================================
@@ -1874,8 +1885,8 @@
1874
1885
  }
1875
1886
 
1876
1887
  [data-style='frosted'] [data-card][data-variant='primary'] [data-card-body] {
1877
- color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);
1878
- }[data-mode="dark"][data-style="frosted"] [data-card][data-variant="primary"] [data-card-body],[data-mode="dark"] [data-style="frosted"] [data-card][data-variant="primary"] [data-card-body]{color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);}
1888
+ color:rgb(22 22 22 / 0.8);
1889
+ }
1879
1890
 
1880
1891
  /* Secondary — tinted secondary glass */
1881
1892
  [data-style='frosted'] [data-card][data-variant='secondary'] {
@@ -1892,8 +1903,8 @@
1892
1903
  }
1893
1904
 
1894
1905
  [data-style='frosted'] [data-card][data-variant='secondary'] [data-card-body] {
1895
- color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);
1896
- }[data-mode="dark"][data-style="frosted"] [data-card][data-variant="secondary"] [data-card-body],[data-mode="dark"] [data-style="frosted"] [data-card][data-variant="secondary"] [data-card-body]{color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);}
1906
+ color:rgb(22 22 22 / 0.8);
1907
+ }
1897
1908
 
1898
1909
  /* Tertiary — barely-there frosted glass */
1899
1910
  [data-style='frosted'] [data-card][data-variant='tertiary'] {
@@ -1960,7 +1971,7 @@
1960
1971
 
1961
1972
  [data-style='frosted'] [data-message-root][data-type='error'] {
1962
1973
  border-color:color-mix(in srgb, var(--color-error) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--error);
1963
- background-color: color-mix(in oklch, var(--error-soft) 50%, transparent);
1974
+ background-color: var(--error-soft);
1964
1975
  }
1965
1976
  [data-style='frosted'] [data-message-root][data-type='error'] [data-message-icon],
1966
1977
  [data-style='frosted'] [data-message-root][data-type='error'] [data-message-dismiss] {
@@ -1969,7 +1980,7 @@
1969
1980
 
1970
1981
  [data-style='frosted'] [data-message-root][data-type='warning'] {
1971
1982
  border-color:color-mix(in srgb, var(--color-warning) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--warning);
1972
- background-color: color-mix(in oklch, var(--warning-soft) 50%, transparent);
1983
+ background-color: var(--warning-soft);
1973
1984
  }
1974
1985
  [data-style='frosted'] [data-message-root][data-type='warning'] [data-message-icon],
1975
1986
  [data-style='frosted'] [data-message-root][data-type='warning'] [data-message-dismiss] {
@@ -1978,7 +1989,7 @@
1978
1989
 
1979
1990
  [data-style='frosted'] [data-message-root][data-type='info'] {
1980
1991
  border-color:color-mix(in srgb, var(--color-info) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--info);
1981
- background-color: color-mix(in oklch, var(--info-soft) 50%, transparent);
1992
+ background-color: var(--info-soft);
1982
1993
  }
1983
1994
  [data-style='frosted'] [data-message-root][data-type='info'] [data-message-icon],
1984
1995
  [data-style='frosted'] [data-message-root][data-type='info'] [data-message-dismiss] {
@@ -1987,7 +1998,7 @@
1987
1998
 
1988
1999
  [data-style='frosted'] [data-message-root][data-type='success'] {
1989
2000
  border-color:color-mix(in srgb, var(--color-success) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--success);
1990
- background-color: color-mix(in oklch, var(--success-soft) 50%, transparent);
2001
+ background-color: var(--success-soft);
1991
2002
  }
1992
2003
  [data-style='frosted'] [data-message-root][data-type='success'] [data-message-icon],
1993
2004
  [data-style='frosted'] [data-message-root][data-type='success'] [data-message-dismiss] {