@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/index.css CHANGED
@@ -2279,8 +2279,11 @@
2279
2279
  padding-inline: 0.375rem;
2280
2280
  }
2281
2281
 
2282
+ /* Icon-only options are square — min-width matches the height (same treatment
2283
+ the `button` variant gets), so a lone icon sits in a square, not a portrait box. */
2282
2284
  [data-toggle][data-toggle-size='sm']:not([data-toggle-labels='true']) [data-toggle-option] {
2283
2285
  padding-inline: 0.25rem;
2286
+ min-width: var(--control-h-sm);
2284
2287
  }
2285
2288
 
2286
2289
  [data-toggle][data-toggle-size='sm'] [data-toggle-icon] {
@@ -2303,6 +2306,7 @@
2303
2306
  [data-toggle][data-toggle-size='md']:not([data-toggle-labels='true']) [data-toggle-option],
2304
2307
  [data-toggle]:not([data-toggle-size]):not([data-toggle-labels='true']) [data-toggle-option] {
2305
2308
  padding-inline: 0.375rem;
2309
+ min-width: var(--control-h-md);
2306
2310
  }
2307
2311
 
2308
2312
  [data-toggle][data-toggle-size='md'] [data-toggle-icon],
@@ -2323,6 +2327,7 @@
2323
2327
 
2324
2328
  [data-toggle][data-toggle-size='lg']:not([data-toggle-labels='true']) [data-toggle-option] {
2325
2329
  padding-inline: 0.5rem;
2330
+ min-width: var(--control-h-lg);
2326
2331
  }
2327
2332
 
2328
2333
  [data-toggle][data-toggle-size='lg'] [data-toggle-icon] {
@@ -4289,9 +4294,10 @@ a[data-card] {
4289
4294
  }
4290
4295
 
4291
4296
  [data-stepper-step][data-completed] [data-stepper-circle] {
4297
+ /* solid brand fill + on-primary text (dark, reads on the bright 500). */
4292
4298
  background-color: var(--primary);
4293
4299
  border-color: var(--primary);
4294
- color: var(--paper);
4300
+ color: var(--on-primary);
4295
4301
  }
4296
4302
 
4297
4303
  /* Check glyph inside a completed circle follows the circle's color
@@ -4302,7 +4308,9 @@ a[data-card] {
4302
4308
 
4303
4309
  [data-stepper-step][data-active] [data-stepper-circle] {
4304
4310
  border-color: var(--primary);
4305
- color: var(--primary);
4311
+ /* ink number (not saffron) so it reads on the page; the saffron border + ring
4312
+ keep the active accent */
4313
+ color: var(--ink);
4306
4314
  --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.2 * 100%), transparent);
4307
4315
  }
4308
4316
 
@@ -4313,9 +4321,12 @@ a[data-card] {
4313
4321
  flex: 1;
4314
4322
  height: 2px;
4315
4323
  min-width: 2rem;
4316
- align-self: center;
4317
- /* Vertically center with the circle (half of 2.5rem) */
4318
- margin-top: 1.25rem;
4324
+ /* Align to the circle's vertical center, NOT the full step height. The step
4325
+ is `circle + label below`, so `align-self: center` drops the line into the
4326
+ label gap (reads as bottom-aligned). Pin to the top and offset by the
4327
+ circle's radius (1.25rem) minus half the line height. */
4328
+ align-self: flex-start;
4329
+ margin-top: calc(1.25rem - 1px);
4319
4330
  transition: background-color 0.2s ease;
4320
4331
  }
4321
4332
 
@@ -4626,7 +4637,10 @@ a[data-card] {
4626
4637
  display: inline-block;
4627
4638
  vertical-align: middle;
4628
4639
  margin-left: 0.25rem;
4629
- opacity: 0.4;
4640
+ /* Unsorted hint — visible enough to read as "sortable" against a tinted
4641
+ header, but still clearly secondary to the active (sorted) state below.
4642
+ 0.4 was too faint (the glyph all but vanished on dark headers). */
4643
+ opacity: 0.65;
4630
4644
  transition: opacity 150ms ease;
4631
4645
  }
4632
4646
 
@@ -7261,16 +7275,16 @@ button[data-step-number] {
7261
7275
  /* Accent variant */
7262
7276
  [data-style='rokkit'] [data-button][data-style='default'][data-variant='accent'],
7263
7277
  [data-style='rokkit'] [data-button]:not([data-style])[data-variant='accent'] {
7264
- 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);
7278
+ border-width:1px;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));border-color:var(--accent);
7265
7279
  background: linear-gradient(to bottom, var(--accent), var(--accent));
7266
- }[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);}
7280
+ }
7267
7281
 
7268
7282
  /* Danger variant */
7269
7283
  [data-style='rokkit'] [data-button][data-style='default'][data-variant='danger'],
7270
7284
  [data-style='rokkit'] [data-button]:not([data-style])[data-variant='danger'] {
7271
- 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);
7285
+ border-width:1px;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));border-color:var(--danger);
7272
7286
  background: linear-gradient(to bottom, var(--danger), var(--danger));
7273
- }[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);}
7287
+ }
7274
7288
 
7275
7289
  /* =============================================================================
7276
7290
  Outline Style
@@ -7344,12 +7358,12 @@ button[data-step-number] {
7344
7358
  }
7345
7359
 
7346
7360
  [data-style='rokkit'] [data-button][data-style='gradient'][data-variant='accent'] {
7347
- --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);
7348
- }[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);}
7361
+ --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));
7362
+ }
7349
7363
 
7350
7364
  [data-style='rokkit'] [data-button][data-style='gradient'][data-variant='danger'] {
7351
- --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);
7352
- }[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);}
7365
+ --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));
7366
+ }
7353
7367
 
7354
7368
  [data-style='rokkit']
7355
7369
  [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
@@ -7449,7 +7463,7 @@ button[data-step-number] {
7449
7463
  [data-button][data-style='ghost']:hover:not(:disabled):not(
7450
7464
  [data-disabled]
7451
7465
  )[data-variant='primary'] {
7452
- background-color:var(--primary);
7466
+ background-color: var(--primary);
7453
7467
  }
7454
7468
 
7455
7469
  [data-style='rokkit']
@@ -7708,7 +7722,7 @@ button[data-step-number] {
7708
7722
  ============================================================================= */
7709
7723
 
7710
7724
  [data-style='rokkit'] [data-tabs-trigger] [data-tabs-icon] {
7711
- color:var(--ink-soft);
7725
+ color:var(--ink-mute);
7712
7726
  }
7713
7727
 
7714
7728
  [data-style='rokkit'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
@@ -7752,7 +7766,7 @@ button[data-step-number] {
7752
7766
  ============================================================================= */
7753
7767
 
7754
7768
  [data-style='rokkit'] [data-toggle-option] {
7755
- color:var(--ink-soft);
7769
+ color:var(--ink-mute);
7756
7770
  }
7757
7771
 
7758
7772
  /* Hover applies only to UNSELECTED options so the branded selected
@@ -7775,7 +7789,7 @@ button[data-step-number] {
7775
7789
  ============================================================================= */
7776
7790
 
7777
7791
  [data-style='rokkit'] [data-toggle-option] [data-toggle-icon] {
7778
- color:var(--ink-soft);
7792
+ color:var(--ink-mute);
7779
7793
  }
7780
7794
 
7781
7795
  [data-style='rokkit'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
@@ -7795,7 +7809,7 @@ button[data-step-number] {
7795
7809
  ============================================================================= */
7796
7810
 
7797
7811
  [data-style='rokkit'] [data-toggle][data-toggle-variant='button'] {
7798
- border-color:transparent;background-color:transparent;color:var(--ink-soft);
7812
+ border-color:transparent;background-color:transparent;color:var(--ink-mute);
7799
7813
  background-image: none;
7800
7814
  }
7801
7815
 
@@ -7805,7 +7819,7 @@ button[data-step-number] {
7805
7819
  }
7806
7820
 
7807
7821
  [data-style='rokkit'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
7808
- color:var(--ink-soft);
7822
+ color:var(--ink-mute);
7809
7823
  }
7810
7824
 
7811
7825
  [data-style='rokkit'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
@@ -7899,7 +7913,7 @@ button[data-step-number] {
7899
7913
 
7900
7914
  [data-style='rokkit'] [data-list] [data-list-item] [data-item-icon] {
7901
7915
  font-size: 1rem;
7902
- color:var(--ink-soft);
7916
+ color:var(--ink-mute);
7903
7917
  }
7904
7918
 
7905
7919
  [data-style='rokkit'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
@@ -7924,7 +7938,7 @@ button[data-step-number] {
7924
7938
 
7925
7939
  /* Literal / kanji icons */
7926
7940
  [data-style='rokkit'] [data-list] [data-list-item] [data-item-icon-literal] {
7927
- color:var(--ink-soft);
7941
+ color:var(--ink-mute);
7928
7942
  }
7929
7943
 
7930
7944
  [data-style='rokkit'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon-literal],
@@ -7949,7 +7963,7 @@ button[data-step-number] {
7949
7963
 
7950
7964
  /* Item description */
7951
7965
  [data-style='rokkit'] [data-list] [data-list-item] [data-item-description] {
7952
- color:var(--ink-soft);
7966
+ color:var(--ink-mute);
7953
7967
  }
7954
7968
 
7955
7969
  [data-style='rokkit'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
@@ -7969,7 +7983,7 @@ button[data-step-number] {
7969
7983
 
7970
7984
  /* Item badge */
7971
7985
  [data-style='rokkit'] [data-list] [data-list-item] [data-item-badge] {
7972
- 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);
7986
+ 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);
7973
7987
  }
7974
7988
 
7975
7989
  [data-style='rokkit'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
@@ -8002,7 +8016,7 @@ button[data-step-number] {
8002
8016
  ============================================================================= */
8003
8017
 
8004
8018
  [data-style='rokkit'] [data-list] [data-list-group] {
8005
- margin-top:0.5rem;color:var(--ink-soft);
8019
+ margin-top:0.5rem;color:var(--ink-mute);
8006
8020
  }
8007
8021
 
8008
8022
  [data-style='rokkit'] [data-list] [data-list-group]:first-child {
@@ -8052,6 +8066,17 @@ button[data-step-number] {
8052
8066
  * Rich gradients and glowing borders.
8053
8067
  */
8054
8068
 
8069
+ /* =============================================================================
8070
+ Connector Lines — hairline tone (mode-aware), not currentColor (which
8071
+ renders white in dark mode and greyish in light).
8072
+ ============================================================================= */
8073
+
8074
+ [data-style='rokkit'] [data-tree]:not([data-line-style='none']) [data-connector-v],
8075
+ [data-style='rokkit'] [data-tree]:not([data-line-style='none']) [data-connector-h],
8076
+ [data-style='rokkit'] [data-tree]:not([data-line-style='none']) [data-connector-corner] {
8077
+ border-color:var(--paper-edge);
8078
+ }
8079
+
8055
8080
  /* =============================================================================
8056
8081
  Tree Container
8057
8082
  ============================================================================= */
@@ -8065,7 +8090,7 @@ button[data-step-number] {
8065
8090
  ============================================================================= */
8066
8091
 
8067
8092
  [data-style='rokkit'] [data-tree-toggle-btn] {
8068
- color:var(--ink-soft);
8093
+ color:var(--ink-mute);
8069
8094
  }
8070
8095
 
8071
8096
  [data-style='rokkit'] [data-tree-toggle-btn]:hover {
@@ -8111,7 +8136,7 @@ button[data-step-number] {
8111
8136
  ============================================================================= */
8112
8137
 
8113
8138
  [data-style='rokkit'] [data-tree-item-content] [data-item-icon] {
8114
- color:var(--ink-soft);
8139
+ color:var(--ink-mute);
8115
8140
  }
8116
8141
 
8117
8142
  [data-style='rokkit'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
@@ -8129,12 +8154,12 @@ button[data-step-number] {
8129
8154
  [data-tree]:not(:focus-within)
8130
8155
  [data-tree-item-content][data-active='true']
8131
8156
  [data-item-icon] {
8132
- color:var(--ink-soft);
8157
+ color:var(--ink-mute);
8133
8158
  }
8134
8159
 
8135
8160
  /* Item description */
8136
8161
  [data-style='rokkit'] [data-tree-item-content] [data-item-description] {
8137
- color:var(--ink-soft);
8162
+ color:var(--ink-mute);
8138
8163
  }
8139
8164
 
8140
8165
  [data-style='rokkit']
@@ -8148,12 +8173,12 @@ button[data-step-number] {
8148
8173
  [data-tree]:not(:focus-within)
8149
8174
  [data-tree-item-content][data-active='true']
8150
8175
  [data-item-description] {
8151
- color:var(--ink-soft);
8176
+ color:var(--ink-mute);
8152
8177
  }
8153
8178
 
8154
8179
  /* Item badge */
8155
8180
  [data-style='rokkit'] [data-tree-item-content] [data-item-badge] {
8156
- 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);
8181
+ 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);
8157
8182
  }
8158
8183
 
8159
8184
  [data-style='rokkit']
@@ -8239,7 +8264,7 @@ button[data-step-number] {
8239
8264
  ============================================================================= */
8240
8265
 
8241
8266
  [data-style='rokkit'] [data-select-placeholder] {
8242
- color:var(--ink-soft);
8267
+ color:var(--ink-mute);
8243
8268
  }
8244
8269
 
8245
8270
  /* =============================================================================
@@ -8247,7 +8272,7 @@ button[data-step-number] {
8247
8272
  ============================================================================= */
8248
8273
 
8249
8274
  [data-style='rokkit'] [data-select-arrow] {
8250
- color:var(--ink-soft);
8275
+ color:var(--ink-mute);
8251
8276
  }
8252
8277
 
8253
8278
  [data-style='rokkit'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
@@ -8263,7 +8288,7 @@ button[data-step-number] {
8263
8288
  }
8264
8289
 
8265
8290
  [data-style='rokkit'] [data-select-tag-remove] {
8266
- color:var(--ink-soft);
8291
+ color:var(--ink-mute);
8267
8292
  }
8268
8293
 
8269
8294
  [data-style='rokkit'] [data-select-tag-remove]:hover {
@@ -8297,11 +8322,12 @@ button[data-step-number] {
8297
8322
  border-left-width:2px;background-color:var(--paper-mute);color:var(--primary);border-left-color:var(--primary);
8298
8323
  }
8299
8324
 
8300
- /* Selected state — full gradient when dropdown has focus */
8325
+ /* Selected state — full gradient when dropdown has focus. The option now has a
8326
+ primary→accent FILL, so its text must be on-primary (teal-on-teal otherwise). */
8301
8327
  [data-style='rokkit']
8302
8328
  [data-select-dropdown]:focus-within
8303
8329
  [data-select-option][data-selected='true'] {
8304
- border-left-width:2px;--un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-primary) 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 right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--primary);border-left-color:var(--primary);
8330
+ border-left-width:2px;--un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-primary) 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 right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--on-primary);border-left-color:var(--primary);
8305
8331
  }
8306
8332
 
8307
8333
  /* Selected + hover */
@@ -8325,7 +8351,7 @@ button[data-step-number] {
8325
8351
 
8326
8352
  /* Item elements */
8327
8353
  [data-style='rokkit'] [data-select-option] [data-item-icon] {
8328
- color:var(--ink-soft);
8354
+ color:var(--ink-mute);
8329
8355
  }
8330
8356
 
8331
8357
  [data-style='rokkit'] [data-select-option]:hover:not(:disabled) [data-item-icon] {
@@ -8340,23 +8366,33 @@ button[data-step-number] {
8340
8366
  [data-select-dropdown]:focus-within
8341
8367
  [data-select-option][data-selected='true']
8342
8368
  [data-item-icon] {
8343
- color:var(--primary);
8369
+ color:var(--on-primary);
8344
8370
  }
8345
8371
 
8346
8372
  [data-style='rokkit'] [data-select-option] [data-item-description] {
8347
- color:var(--ink-soft);
8373
+ color:var(--ink-mute);
8348
8374
  }
8349
8375
 
8350
8376
  [data-style='rokkit'] [data-select-option][data-selected='true'] [data-item-description] {
8351
8377
  color:var(--primary);
8352
8378
  }
8353
8379
 
8380
+ /* Description also rides the primary fill when the dropdown has focus. */
8381
+ [data-style='rokkit']
8382
+ [data-select-dropdown]:focus-within
8383
+ [data-select-option][data-selected='true']
8384
+ [data-item-description] {
8385
+ color:var(--on-primary);
8386
+ }
8387
+
8354
8388
  [data-style='rokkit'] [data-select-option] [data-item-badge] {
8355
- color:var(--ink-soft);background-color:var(--paper-mute);
8389
+ color:var(--ink-mute);background-color:var(--paper-mute);
8356
8390
  }
8357
8391
 
8392
+ /* Selected badge sits on a primary fill → on-primary text (not text-primary,
8393
+ which would be primary-on-primary). */
8358
8394
  [data-style='rokkit'] [data-select-option][data-selected='true'] [data-item-badge] {
8359
- color:var(--primary);background-color:var(--primary);
8395
+ color:var(--on-primary);background-color:var(--primary);
8360
8396
  }
8361
8397
 
8362
8398
  /* =============================================================================
@@ -8364,7 +8400,7 @@ button[data-step-number] {
8364
8400
  ============================================================================= */
8365
8401
 
8366
8402
  [data-style='rokkit'] [data-select-group-label] {
8367
- color:var(--ink-soft);
8403
+ color:var(--ink-mute);
8368
8404
  }
8369
8405
 
8370
8406
  /* =============================================================================
@@ -8392,11 +8428,11 @@ button[data-step-number] {
8392
8428
  }
8393
8429
 
8394
8430
  [data-style='rokkit'] [data-select-filter-input]::placeholder {
8395
- color:var(--ink-soft);
8431
+ color:var(--ink-mute);
8396
8432
  }
8397
8433
 
8398
8434
  [data-style='rokkit'] [data-select-empty] {
8399
- color:var(--ink-soft);
8435
+ color:var(--ink-mute);
8400
8436
  }
8401
8437
 
8402
8438
  /**
@@ -8427,7 +8463,7 @@ button[data-step-number] {
8427
8463
 
8428
8464
  /* Trigger elements */
8429
8465
  [data-style='rokkit'] [data-menu-trigger] [data-menu-icon] {
8430
- color:var(--ink-soft);
8466
+ color:var(--ink-mute);
8431
8467
  }
8432
8468
 
8433
8469
  [data-style='rokkit'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
@@ -8435,7 +8471,7 @@ button[data-step-number] {
8435
8471
  }
8436
8472
 
8437
8473
  [data-style='rokkit'] [data-menu-trigger] [data-menu-arrow] {
8438
- color:var(--ink-soft);
8474
+ color:var(--ink-mute);
8439
8475
  }
8440
8476
 
8441
8477
  /* =============================================================================
@@ -8465,7 +8501,7 @@ button[data-step-number] {
8465
8501
 
8466
8502
  /* Item elements */
8467
8503
  [data-style='rokkit'] [data-menu-item] [data-item-icon] {
8468
- color:var(--ink-soft);
8504
+ color:var(--ink-mute);
8469
8505
  }
8470
8506
 
8471
8507
  [data-style='rokkit'] [data-menu-item]:hover:not(:disabled) [data-item-icon],
@@ -8474,7 +8510,7 @@ button[data-step-number] {
8474
8510
  }
8475
8511
 
8476
8512
  [data-style='rokkit'] [data-menu-item] [data-item-description] {
8477
- color:var(--ink-soft);
8513
+ color:var(--ink-mute);
8478
8514
  }
8479
8515
 
8480
8516
  /* =============================================================================
@@ -8482,7 +8518,7 @@ button[data-step-number] {
8482
8518
  ============================================================================= */
8483
8519
 
8484
8520
  [data-style='rokkit'] [data-menu-group] {
8485
- color:var(--ink-soft);
8521
+ color:var(--ink-mute);
8486
8522
  }
8487
8523
 
8488
8524
  /* =============================================================================
@@ -8520,7 +8556,7 @@ button[data-step-number] {
8520
8556
  }
8521
8557
 
8522
8558
  [data-style='rokkit'] [data-dropdown-trigger] [data-dropdown-icon] {
8523
- color:var(--ink-soft);
8559
+ color:var(--ink-mute);
8524
8560
  }
8525
8561
 
8526
8562
  [data-style='rokkit'] [data-dropdown-trigger]:hover:not(:disabled) [data-dropdown-icon] {
@@ -8528,7 +8564,7 @@ button[data-step-number] {
8528
8564
  }
8529
8565
 
8530
8566
  [data-style='rokkit'] [data-dropdown-trigger] [data-dropdown-arrow] {
8531
- color:var(--ink-soft);
8567
+ color:var(--ink-mute);
8532
8568
  }
8533
8569
 
8534
8570
  /* =============================================================================
@@ -8776,7 +8812,7 @@ button[data-step-number] {
8776
8812
  ============================================================================= */
8777
8813
 
8778
8814
  [data-style='rokkit'] [data-table-header] th {
8779
- border-bottom-width:1px;color:var(--ink-soft);border-color:var(--paper-edge);background-color:var(--paper-mute);
8815
+ border-bottom-width:1px;color:var(--ink-mute);border-color:var(--paper-edge);background-color:var(--paper-mute);
8780
8816
  }
8781
8817
 
8782
8818
  [data-style='rokkit'] [data-table-header-cell][data-sortable='true']:hover {
@@ -8789,7 +8825,7 @@ button[data-step-number] {
8789
8825
  }
8790
8826
 
8791
8827
  [data-style='rokkit'] [data-table-sort-icon] {
8792
- color:var(--ink-soft);
8828
+ color:var(--ink-mute);
8793
8829
  }
8794
8830
 
8795
8831
  [data-style='rokkit'] [data-table-header-cell][data-sort-order='ascending'] [data-table-sort-icon],
@@ -8850,7 +8886,7 @@ button[data-step-number] {
8850
8886
  ============================================================================= */
8851
8887
 
8852
8888
  [data-style='rokkit'] [data-table-empty] {
8853
- color:var(--ink-soft);
8889
+ color:var(--ink-mute);
8854
8890
  }
8855
8891
 
8856
8892
  /* =============================================================================
@@ -8858,7 +8894,7 @@ button[data-step-number] {
8858
8894
  ============================================================================= */
8859
8895
 
8860
8896
  [data-style='rokkit'] [data-table-cell] [data-cell-icon] {
8861
- color:var(--ink-soft);
8897
+ color:var(--ink-mute);
8862
8898
  }
8863
8899
 
8864
8900
  [data-style='rokkit'] [data-table-row][data-selected='true'] [data-cell-icon] {
@@ -8875,7 +8911,7 @@ button[data-step-number] {
8875
8911
  }
8876
8912
 
8877
8913
  [data-style='rokkit'] [data-table-responsive] [data-table-cell]::before {
8878
- color:var(--ink-soft);
8914
+ color:var(--ink-mute);
8879
8915
  }
8880
8916
 
8881
8917
  /* Disable striped alternating bg in card layout */
@@ -9012,11 +9048,12 @@ button[data-step-number] {
9012
9048
  }
9013
9049
 
9014
9050
  [data-style='rokkit'] [data-timeline-item][data-completed] [data-timeline-circle] {
9015
- background-color:var(--primary);border-color:var(--primary);color:var(--on-primary);
9051
+ border-color:var(--primary);color:var(--on-primary);
9052
+ background-color: var(--primary);
9016
9053
  }
9017
9054
 
9018
9055
  [data-style='rokkit'] [data-timeline-item][data-active] [data-timeline-circle] {
9019
- --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.2 * 100%), transparent);border-color:var(--primary);color:var(--primary);
9056
+ --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.2 * 100%), transparent);border-color:var(--primary);color:var(--ink);
9020
9057
  }
9021
9058
 
9022
9059
  /* =============================================================================
@@ -9028,7 +9065,7 @@ button[data-step-number] {
9028
9065
  }
9029
9066
 
9030
9067
  [data-style='rokkit'] [data-timeline-item][data-completed] [data-timeline-connector] {
9031
- background-color:var(--primary);
9068
+ background-color: var(--primary);
9032
9069
  }
9033
9070
 
9034
9071
  /* =============================================================================
@@ -9428,8 +9465,8 @@ button[data-step-number] {
9428
9465
  }
9429
9466
 
9430
9467
  [data-style='rokkit'] [data-card][data-variant='primary'] [data-card-body] {
9431
- color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);
9432
- }[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);}
9468
+ color:rgb(22 22 22 / 0.8);
9469
+ }
9433
9470
 
9434
9471
  /* Secondary — muted secondary surface */
9435
9472
  [data-style='rokkit'] [data-card][data-variant='secondary'] {
@@ -9442,8 +9479,8 @@ button[data-step-number] {
9442
9479
  }
9443
9480
 
9444
9481
  [data-style='rokkit'] [data-card][data-variant='secondary'] [data-card-body] {
9445
- color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);
9446
- }[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);}
9482
+ color:rgb(22 22 22 / 0.8);
9483
+ }
9447
9484
 
9448
9485
  /* Tertiary — elevated surface, no color accent */
9449
9486
  [data-style='rokkit'] [data-card][data-variant='tertiary'] {
@@ -9885,7 +9922,7 @@ button[data-step-number] {
9885
9922
  }
9886
9923
 
9887
9924
  [data-style='rokkit'] [data-divider-label] {
9888
- color:var(--ink-soft);
9925
+ color:var(--ink-mute);
9889
9926
  }
9890
9927
 
9891
9928
  /**
@@ -9895,7 +9932,7 @@ button[data-step-number] {
9895
9932
  /* Default variant */
9896
9933
  [data-style='rokkit'] [data-badge][data-variant='default'],
9897
9934
  [data-style='rokkit'] [data-badge]:not([data-variant]) {
9898
- background-color:var(--ink-soft);color:var(--paper-soft);
9935
+ background-color:var(--ink-mute);color:var(--paper-soft);
9899
9936
  }
9900
9937
 
9901
9938
  /* Primary */
@@ -9905,25 +9942,25 @@ button[data-step-number] {
9905
9942
 
9906
9943
  /* Success */
9907
9944
  [data-style='rokkit'] [data-badge][data-variant='success'] {
9908
- --un-text-opacity:1;color:color-mix(in srgb, var(--color-success-50) calc(var(--un-text-opacity) * 100%), transparent);background-color:var(--success);
9909
- }[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);}
9945
+ --un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));background-color:var(--success);
9946
+ }
9910
9947
 
9911
9948
  /* Warning */
9912
9949
  [data-style='rokkit'] [data-badge][data-variant='warning'] {
9913
- --un-text-opacity:1;color:color-mix(in srgb, var(--color-warning-50) calc(var(--un-text-opacity) * 100%), transparent);background-color:var(--warning);
9914
- }[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);}
9950
+ --un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));background-color:var(--warning);
9951
+ }
9915
9952
 
9916
9953
  /* Error */
9917
9954
  [data-style='rokkit'] [data-badge][data-variant='error'] {
9918
- --un-text-opacity:1;color:color-mix(in srgb, var(--color-error-50) calc(var(--un-text-opacity) * 100%), transparent);background-color:var(--error);
9919
- }[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);}
9955
+ --un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));background-color:var(--error);
9956
+ }
9920
9957
 
9921
9958
  /**
9922
9959
  * Avatar - Rokkit Theme Styles
9923
9960
  */
9924
9961
 
9925
9962
  [data-style='rokkit'] [data-avatar] {
9926
- background-color:var(--paper-edge);color:var(--ink-mute);
9963
+ background-color:var(--paper-edge);color:var(--ink);
9927
9964
  }
9928
9965
 
9929
9966
  /* Status dot colors */
@@ -10021,23 +10058,27 @@ button[data-step-number] {
10021
10058
 
10022
10059
  [data-style='minimal'] [data-button][data-style='default'][data-variant='primary'],
10023
10060
  [data-style='minimal'] [data-button]:not([data-style])[data-variant='primary'] {
10024
- border-color:transparent;background-image:none;background-color:var(--primary);color:var(--on-primary);
10061
+ border-color:transparent;background-image:none;color:var(--on-primary);
10062
+ background-color: var(--primary);
10025
10063
  }
10026
10064
 
10027
10065
  [data-style='minimal'] [data-button][data-style='default'][data-variant='secondary'],
10028
10066
  [data-style='minimal'] [data-button]:not([data-style])[data-variant='secondary'] {
10029
- border-color:transparent;background-image:none;background-color:var(--accent);color:var(--on-primary);
10067
+ border-color:transparent;background-image:none;color:var(--on-primary);
10068
+ background-color: var(--accent);
10030
10069
  }
10031
10070
 
10032
10071
  [data-style='minimal'] [data-button][data-style='default'][data-variant='accent'],
10033
10072
  [data-style='minimal'] [data-button]:not([data-style])[data-variant='accent'] {
10034
- 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);
10035
- }[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);}
10073
+ border-color:transparent;background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
10074
+ background-color: var(--accent);
10075
+ }
10036
10076
 
10037
10077
  [data-style='minimal'] [data-button][data-style='default'][data-variant='danger'],
10038
10078
  [data-style='minimal'] [data-button]:not([data-style])[data-variant='danger'] {
10039
- 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);
10040
- }[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);}
10079
+ border-color:transparent;background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
10080
+ background-color: var(--danger);
10081
+ }
10041
10082
 
10042
10083
  /* =============================================================================
10043
10084
  Outline Style
@@ -10111,12 +10152,12 @@ button[data-step-number] {
10111
10152
  }
10112
10153
 
10113
10154
  [data-style='minimal'] [data-button][data-style='gradient'][data-variant='accent'] {
10114
- --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);
10115
- }[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);}
10155
+ --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));
10156
+ }
10116
10157
 
10117
10158
  [data-style='minimal'] [data-button][data-style='gradient'][data-variant='danger'] {
10118
- --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);
10119
- }[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);}
10159
+ --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));
10160
+ }
10120
10161
 
10121
10162
  [data-style='minimal']
10122
10163
  [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
@@ -10299,7 +10340,7 @@ button[data-step-number] {
10299
10340
  ============================================================================= */
10300
10341
 
10301
10342
  [data-style='minimal'] [data-tabs-trigger] {
10302
- border-bottom-width:3px;border-bottom-color:transparent;background-color:transparent;color:var(--ink-soft);
10343
+ border-bottom-width:3px;border-bottom-color:transparent;background-color:transparent;color:var(--ink-mute);
10303
10344
  font-weight: 400;
10304
10345
  transition:
10305
10346
  color 150ms ease,
@@ -10402,7 +10443,7 @@ button[data-step-number] {
10402
10443
  }
10403
10444
 
10404
10445
  [data-style='minimal'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
10405
- color:var(--ink-soft);
10446
+ color:var(--ink-mute);
10406
10447
  }
10407
10448
 
10408
10449
  [data-style='minimal'] [data-tabs-trigger][data-selected] [data-tabs-icon] {
@@ -10436,7 +10477,7 @@ button[data-step-number] {
10436
10477
  ============================================================================= */
10437
10478
 
10438
10479
  [data-style='minimal'] [data-toggle-option] {
10439
- border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-soft);
10480
+ border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-mute);
10440
10481
  }
10441
10482
 
10442
10483
  [data-style='minimal'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
@@ -10454,7 +10495,7 @@ button[data-step-number] {
10454
10495
  ============================================================================= */
10455
10496
 
10456
10497
  [data-style='minimal'] [data-toggle-option] [data-toggle-icon] {
10457
- color:var(--ink-soft);
10498
+ color:var(--ink-mute);
10458
10499
  }
10459
10500
 
10460
10501
  [data-style='minimal'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
@@ -10474,7 +10515,7 @@ button[data-step-number] {
10474
10515
  ============================================================================= */
10475
10516
 
10476
10517
  [data-style='minimal'] [data-toggle][data-toggle-variant='button'] {
10477
- border-color:transparent;background-color:transparent;color:var(--ink-soft);
10518
+ border-color:transparent;background-color:transparent;color:var(--ink-mute);
10478
10519
  background-image: none;
10479
10520
  }
10480
10521
 
@@ -10484,7 +10525,7 @@ button[data-step-number] {
10484
10525
  }
10485
10526
 
10486
10527
  [data-style='minimal'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
10487
- color:var(--ink-soft);
10528
+ color:var(--ink-mute);
10488
10529
  }
10489
10530
 
10490
10531
  [data-style='minimal'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
@@ -10570,7 +10611,7 @@ button[data-step-number] {
10570
10611
 
10571
10612
  [data-style='minimal'] [data-list] a[data-list-item],
10572
10613
  [data-style='minimal'] [data-list] button[data-list-item] {
10573
- color:var(--ink-soft);
10614
+ color:var(--ink-mute);
10574
10615
  }
10575
10616
 
10576
10617
  /* Hover and focus — text brightening only, no border */
@@ -10608,12 +10649,12 @@ button[data-step-number] {
10608
10649
  ============================================================================= */
10609
10650
 
10610
10651
  [data-style='minimal'] [data-list] [data-list-item] [data-item-icon] {
10611
- color:var(--ink-soft);
10652
+ color:var(--ink-mute);
10612
10653
  }
10613
10654
 
10614
10655
  [data-style='minimal'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
10615
10656
  [data-style='minimal'] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon] {
10616
- color:var(--ink-soft);
10657
+ color:var(--ink-mute);
10617
10658
  }
10618
10659
 
10619
10660
  [data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-icon] {
@@ -10622,12 +10663,12 @@ button[data-step-number] {
10622
10663
 
10623
10664
  /* Literal / kanji icons */
10624
10665
  [data-style='minimal'] [data-list] [data-list-item] [data-item-icon-literal] {
10625
- color:var(--ink-soft);
10666
+ color:var(--ink-mute);
10626
10667
  }
10627
10668
 
10628
10669
  [data-style='minimal'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon-literal],
10629
10670
  [data-style='minimal'] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon-literal] {
10630
- color:var(--ink-soft);
10671
+ color:var(--ink-mute);
10631
10672
  }
10632
10673
 
10633
10674
  [data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-icon-literal] {
@@ -10635,7 +10676,7 @@ button[data-step-number] {
10635
10676
  }
10636
10677
 
10637
10678
  [data-style='minimal'] [data-list] [data-list-item] [data-item-description] {
10638
- color:var(--ink-soft);
10679
+ color:var(--ink-mute);
10639
10680
  }
10640
10681
 
10641
10682
  [data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
@@ -10643,7 +10684,7 @@ button[data-step-number] {
10643
10684
  }
10644
10685
 
10645
10686
  [data-style='minimal'] [data-list] [data-list-item] [data-item-badge] {
10646
- border-width:1px;background-color:transparent;background-image:none;color:var(--ink-soft);border-color:var(--paper-edge);
10687
+ border-width:1px;background-color:transparent;background-image:none;color:var(--ink-mute);border-color:var(--paper-edge);
10647
10688
  }
10648
10689
 
10649
10690
  [data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
@@ -10655,7 +10696,7 @@ button[data-step-number] {
10655
10696
  ============================================================================= */
10656
10697
 
10657
10698
  [data-style='minimal'] [data-list] [data-list-group] {
10658
- color:var(--ink-soft);
10699
+ color:var(--ink-mute);
10659
10700
  }
10660
10701
 
10661
10702
  /* Group hover — text-only, no border */
@@ -10700,6 +10741,17 @@ button[data-step-number] {
10700
10741
  * Clean, understated tree with subtle borders.
10701
10742
  */
10702
10743
 
10744
+ /* =============================================================================
10745
+ Connector Lines — hairline tone (mode-aware), not currentColor (which
10746
+ renders white in dark mode and greyish in light).
10747
+ ============================================================================= */
10748
+
10749
+ [data-style='minimal'] [data-tree]:not([data-line-style='none']) [data-connector-v],
10750
+ [data-style='minimal'] [data-tree]:not([data-line-style='none']) [data-connector-h],
10751
+ [data-style='minimal'] [data-tree]:not([data-line-style='none']) [data-connector-corner] {
10752
+ border-color:var(--paper-edge);
10753
+ }
10754
+
10703
10755
  /* =============================================================================
10704
10756
  Tree Container
10705
10757
  ============================================================================= */
@@ -10713,11 +10765,11 @@ button[data-step-number] {
10713
10765
  ============================================================================= */
10714
10766
 
10715
10767
  [data-style='minimal'] [data-tree-toggle-btn] {
10716
- color:var(--paper-edge);
10768
+ color:var(--ink-mute);
10717
10769
  }
10718
10770
 
10719
10771
  [data-style='minimal'] [data-tree-toggle-btn]:hover {
10720
- background-image:none;color:var(--ink-soft);
10772
+ background-image:none;color:var(--ink-mute);
10721
10773
  }
10722
10774
 
10723
10775
  /* =============================================================================
@@ -10771,11 +10823,11 @@ button[data-step-number] {
10771
10823
  ============================================================================= */
10772
10824
 
10773
10825
  [data-style='minimal'] [data-tree-item-content] [data-item-icon] {
10774
- color:var(--ink-soft);
10826
+ color:var(--ink-mute);
10775
10827
  }
10776
10828
 
10777
10829
  [data-style='minimal'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
10778
- color:var(--ink-soft);
10830
+ color:var(--ink-mute);
10779
10831
  }
10780
10832
 
10781
10833
  [data-style='minimal'] [data-tree-item-content][data-active='true'] [data-item-icon] {
@@ -10783,7 +10835,7 @@ button[data-step-number] {
10783
10835
  }
10784
10836
 
10785
10837
  [data-style='minimal'] [data-tree-item-content] [data-item-description] {
10786
- color:var(--ink-soft);
10838
+ color:var(--ink-mute);
10787
10839
  }
10788
10840
 
10789
10841
  [data-style='minimal'] [data-tree-item-content][data-active='true'] [data-item-description] {
@@ -10791,7 +10843,7 @@ button[data-step-number] {
10791
10843
  }
10792
10844
 
10793
10845
  [data-style='minimal'] [data-tree-item-content] [data-item-badge] {
10794
- border-width:1px;background-color:transparent;background-image:none;color:var(--ink-soft);border-color:var(--paper-edge);
10846
+ border-width:1px;background-color:transparent;background-image:none;color:var(--ink-mute);border-color:var(--paper-edge);
10795
10847
  }
10796
10848
 
10797
10849
  [data-style='minimal'] [data-tree-item-content][data-active='true'] [data-item-badge] {
@@ -10867,7 +10919,7 @@ button[data-step-number] {
10867
10919
  ============================================================================= */
10868
10920
 
10869
10921
  [data-style='minimal'] [data-select-placeholder] {
10870
- color:var(--ink-soft);
10922
+ color:var(--ink-mute);
10871
10923
  }
10872
10924
 
10873
10925
  /* =============================================================================
@@ -10875,11 +10927,11 @@ button[data-step-number] {
10875
10927
  ============================================================================= */
10876
10928
 
10877
10929
  [data-style='minimal'] [data-select-arrow] {
10878
- color:var(--ink-soft);
10930
+ color:var(--ink-mute);
10879
10931
  }
10880
10932
 
10881
10933
  [data-style='minimal'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
10882
- color:var(--ink-soft);
10934
+ color:var(--ink-mute);
10883
10935
  }
10884
10936
 
10885
10937
  /* =============================================================================
@@ -10891,7 +10943,7 @@ button[data-step-number] {
10891
10943
  }
10892
10944
 
10893
10945
  [data-style='minimal'] [data-select-tag-remove] {
10894
- color:var(--ink-soft);
10946
+ color:var(--ink-mute);
10895
10947
  }
10896
10948
 
10897
10949
  [data-style='minimal'] [data-select-tag-remove]:hover {
@@ -10948,7 +11000,7 @@ button[data-step-number] {
10948
11000
 
10949
11001
  /* Item elements */
10950
11002
  [data-style='minimal'] [data-select-option] [data-item-description] {
10951
- color:var(--ink-soft);
11003
+ color:var(--ink-mute);
10952
11004
  }
10953
11005
 
10954
11006
  [data-style='minimal'] [data-select-option][data-selected='true'] [data-item-description] {
@@ -10960,7 +11012,7 @@ button[data-step-number] {
10960
11012
  ============================================================================= */
10961
11013
 
10962
11014
  [data-style='minimal'] [data-select-group-label] {
10963
- color:var(--ink-soft);
11015
+ color:var(--ink-mute);
10964
11016
  }
10965
11017
 
10966
11018
  /* =============================================================================
@@ -10988,11 +11040,11 @@ button[data-step-number] {
10988
11040
  }
10989
11041
 
10990
11042
  [data-style='minimal'] [data-select-filter-input]::placeholder {
10991
- color:var(--ink-soft);
11043
+ color:var(--ink-mute);
10992
11044
  }
10993
11045
 
10994
11046
  [data-style='minimal'] [data-select-empty] {
10995
- color:var(--ink-soft);
11047
+ color:var(--ink-mute);
10996
11048
  }
10997
11049
 
10998
11050
  /**
@@ -11023,7 +11075,7 @@ button[data-step-number] {
11023
11075
 
11024
11076
  /* Trigger elements */
11025
11077
  [data-style='minimal'] [data-menu-trigger] [data-menu-icon] {
11026
- color:var(--ink-soft);
11078
+ color:var(--ink-mute);
11027
11079
  }
11028
11080
 
11029
11081
  [data-style='minimal'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
@@ -11031,7 +11083,7 @@ button[data-step-number] {
11031
11083
  }
11032
11084
 
11033
11085
  [data-style='minimal'] [data-menu-trigger] [data-menu-arrow] {
11034
- color:var(--paper-edge);
11086
+ color:var(--ink-mute);
11035
11087
  }
11036
11088
 
11037
11089
  /* =============================================================================
@@ -11057,15 +11109,15 @@ button[data-step-number] {
11057
11109
 
11058
11110
  /* Item elements */
11059
11111
  [data-style='minimal'] [data-menu-item] [data-item-icon] {
11060
- color:var(--ink-soft);
11112
+ color:var(--ink-mute);
11061
11113
  }
11062
11114
 
11063
11115
  [data-style='minimal'] [data-menu-item]:hover:not(:disabled) [data-item-icon] {
11064
- color:var(--ink-soft);
11116
+ color:var(--ink-mute);
11065
11117
  }
11066
11118
 
11067
11119
  [data-style='minimal'] [data-menu-item] [data-item-description] {
11068
- color:var(--ink-soft);
11120
+ color:var(--ink-mute);
11069
11121
  }
11070
11122
 
11071
11123
  /* =============================================================================
@@ -11073,7 +11125,7 @@ button[data-step-number] {
11073
11125
  ============================================================================= */
11074
11126
 
11075
11127
  [data-style='minimal'] [data-menu-group] {
11076
- color:var(--ink-soft);
11128
+ color:var(--ink-mute);
11077
11129
  }
11078
11130
 
11079
11131
  /* =============================================================================
@@ -11107,11 +11159,11 @@ button[data-step-number] {
11107
11159
  }
11108
11160
 
11109
11161
  [data-style='minimal'] [data-dropdown-trigger] [data-dropdown-icon] {
11110
- color:var(--ink-soft);
11162
+ color:var(--ink-mute);
11111
11163
  }
11112
11164
 
11113
11165
  [data-style='minimal'] [data-dropdown-trigger] [data-dropdown-arrow] {
11114
- color:var(--paper-edge);
11166
+ color:var(--ink-mute);
11115
11167
  }
11116
11168
 
11117
11169
  [data-style='minimal'] [data-dropdown-panel] {
@@ -11382,7 +11434,7 @@ button[data-step-number] {
11382
11434
  ============================================================================= */
11383
11435
 
11384
11436
  [data-style='minimal'] [data-table-header] th {
11385
- border-bottom-width:1px;color:var(--ink-soft);border-color:var(--paper-edge);background-color:var(--paper-mute);
11437
+ border-bottom-width:1px;color:var(--ink-mute);border-color:var(--paper-edge);background-color:var(--paper-mute);
11386
11438
  }
11387
11439
 
11388
11440
  [data-style='minimal'] [data-table-header-cell][data-sortable='true']:hover {
@@ -11395,7 +11447,7 @@ button[data-step-number] {
11395
11447
  }
11396
11448
 
11397
11449
  [data-style='minimal'] [data-table-sort-icon] {
11398
- color:var(--ink-soft);
11450
+ color:var(--ink-mute);
11399
11451
  }
11400
11452
 
11401
11453
  [data-style='minimal'] [data-table-header-cell][data-sort-order='ascending'] [data-table-sort-icon],
@@ -11456,7 +11508,7 @@ button[data-step-number] {
11456
11508
  ============================================================================= */
11457
11509
 
11458
11510
  [data-style='minimal'] [data-table-empty] {
11459
- color:var(--ink-soft);
11511
+ color:var(--ink-mute);
11460
11512
  }
11461
11513
 
11462
11514
  /* =============================================================================
@@ -11464,7 +11516,7 @@ button[data-step-number] {
11464
11516
  ============================================================================= */
11465
11517
 
11466
11518
  [data-style='minimal'] [data-table-cell] [data-cell-icon] {
11467
- color:var(--ink-soft);
11519
+ color:var(--ink-mute);
11468
11520
  }
11469
11521
 
11470
11522
  [data-style='minimal'] [data-table-row][data-selected='true'] [data-cell-icon] {
@@ -11481,7 +11533,7 @@ button[data-step-number] {
11481
11533
  }
11482
11534
 
11483
11535
  [data-style='minimal'] [data-table-responsive] [data-table-cell]::before {
11484
- color:var(--ink-soft);
11536
+ color:var(--ink-mute);
11485
11537
  }
11486
11538
 
11487
11539
  /* Disable striped alternating bg in card layout */
@@ -11652,11 +11704,11 @@ button[data-step-number] {
11652
11704
  }
11653
11705
 
11654
11706
  [data-style='minimal'] [data-timeline-item][data-completed] [data-timeline-circle] {
11655
- border-color:var(--primary);color:var(--primary);
11707
+ border-color:var(--primary);color:var(--ink);
11656
11708
  }
11657
11709
 
11658
11710
  [data-style='minimal'] [data-timeline-item][data-active] [data-timeline-circle] {
11659
- border-bottom-width:2px;border-color:var(--primary);color:var(--primary);
11711
+ border-bottom-width:2px;border-color:var(--primary);color:var(--ink);
11660
11712
  }
11661
11713
 
11662
11714
  /* =============================================================================
@@ -11668,7 +11720,7 @@ button[data-step-number] {
11668
11720
  }
11669
11721
 
11670
11722
  [data-style='minimal'] [data-timeline-item][data-completed] [data-timeline-connector] {
11671
- background-color:var(--primary);
11723
+ background-color: var(--primary);
11672
11724
  }
11673
11725
 
11674
11726
  /* =============================================================================
@@ -11851,8 +11903,8 @@ button[data-step-number] {
11851
11903
  }
11852
11904
 
11853
11905
  [data-style='minimal'] [data-card][data-variant='primary'] [data-card-body] {
11854
- color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);
11855
- }[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);}
11906
+ color:rgb(22 22 22 / 0.8);
11907
+ }
11856
11908
 
11857
11909
  /* Secondary — solid secondary fill */
11858
11910
  [data-style='minimal'] [data-card][data-variant='secondary'] {
@@ -11865,8 +11917,8 @@ button[data-step-number] {
11865
11917
  }
11866
11918
 
11867
11919
  [data-style='minimal'] [data-card][data-variant='secondary'] [data-card-body] {
11868
- color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);
11869
- }[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);}
11920
+ color:rgb(22 22 22 / 0.8);
11921
+ }
11870
11922
 
11871
11923
  /* Tertiary — recessed surface, lighter border */
11872
11924
  [data-style='minimal'] [data-card][data-variant='tertiary'] {
@@ -12339,23 +12391,27 @@ button[data-step-number] {
12339
12391
 
12340
12392
  [data-style='material'] [data-button][data-style='default'][data-variant='primary'],
12341
12393
  [data-style='material'] [data-button]:not([data-style])[data-variant='primary'] {
12342
- background-image:none;--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);background-color:var(--primary);color:var(--on-primary);
12394
+ background-image:none;--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);color:var(--on-primary);
12395
+ background-color: var(--primary);
12343
12396
  }
12344
12397
 
12345
12398
  [data-style='material'] [data-button][data-style='default'][data-variant='secondary'],
12346
12399
  [data-style='material'] [data-button]:not([data-style])[data-variant='secondary'] {
12347
- background-image:none;--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);background-color:var(--accent);color:var(--on-primary);
12400
+ background-image:none;--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);color:var(--on-primary);
12401
+ background-color: var(--accent);
12348
12402
  }
12349
12403
 
12350
12404
  [data-style='material'] [data-button][data-style='default'][data-variant='accent'],
12351
12405
  [data-style='material'] [data-button]:not([data-style])[data-variant='accent'] {
12352
- background-image:none;--un-text-opacity:1;color:color-mix(in srgb, var(--color-accent-50) calc(var(--un-text-opacity) * 100%), transparent);--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);background-color:var(--accent);
12353
- }[data-mode="dark"][data-style="material"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"] [data-style="material"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"][data-style="material"] [data-button]:not([data-style])[data-variant="accent"],[data-mode="dark"] [data-style="material"] [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);}
12406
+ background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
12407
+ background-color: var(--accent);
12408
+ }
12354
12409
 
12355
12410
  [data-style='material'] [data-button][data-style='default'][data-variant='danger'],
12356
12411
  [data-style='material'] [data-button]:not([data-style])[data-variant='danger'] {
12357
- background-image:none;--un-text-opacity:1;color:color-mix(in srgb, var(--color-danger-50) calc(var(--un-text-opacity) * 100%), transparent);--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);background-color:var(--danger);
12358
- }[data-mode="dark"][data-style="material"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"] [data-style="material"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"][data-style="material"] [data-button]:not([data-style])[data-variant="danger"],[data-mode="dark"] [data-style="material"] [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);}
12412
+ background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
12413
+ background-color: var(--danger);
12414
+ }
12359
12415
 
12360
12416
  /* =============================================================================
12361
12417
  Outline Style
@@ -12429,12 +12485,12 @@ button[data-step-number] {
12429
12485
  }
12430
12486
 
12431
12487
  [data-style='material'] [data-button][data-style='gradient'][data-variant='accent'] {
12432
- --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);--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
12433
- }[data-mode="dark"][data-style="material"] [data-button][data-style="gradient"][data-variant="accent"],[data-mode="dark"] [data-style="material"] [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);}
12488
+ --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));--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
12489
+ }
12434
12490
 
12435
12491
  [data-style='material'] [data-button][data-style='gradient'][data-variant='danger'] {
12436
- --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);--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
12437
- }[data-mode="dark"][data-style="material"] [data-button][data-style="gradient"][data-variant="danger"],[data-mode="dark"] [data-style="material"] [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);}
12492
+ --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));--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
12493
+ }
12438
12494
 
12439
12495
  [data-style='material']
12440
12496
  [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
@@ -12773,7 +12829,7 @@ button[data-step-number] {
12773
12829
  ============================================================================= */
12774
12830
 
12775
12831
  [data-style='material'] [data-tabs-trigger] {
12776
- border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;background-color:transparent;color:var(--ink-soft);
12832
+ border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;background-color:transparent;color:var(--ink-mute);
12777
12833
  }
12778
12834
 
12779
12835
  [data-style='material'] [data-tabs][data-position='after'] [data-tabs-trigger] {
@@ -12786,7 +12842,8 @@ button[data-step-number] {
12786
12842
 
12787
12843
  /* Selected state */
12788
12844
  [data-style='material'] [data-tabs-trigger][data-selected] {
12789
- --un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);background-color:var(--primary);color:var(--on-primary);
12845
+ --un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);color:var(--on-primary);
12846
+ background-color: var(--primary);
12790
12847
  }
12791
12848
 
12792
12849
  /* Reset rokkit gradients bleeding in from body[data-style='rokkit'] ancestor */
@@ -12820,7 +12877,7 @@ button[data-step-number] {
12820
12877
  ============================================================================= */
12821
12878
 
12822
12879
  [data-style='material'] [data-tabs-trigger] [data-tabs-icon] {
12823
- color:var(--ink-soft);
12880
+ color:var(--ink-mute);
12824
12881
  }
12825
12882
 
12826
12883
  [data-style='material'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
@@ -12858,7 +12915,7 @@ button[data-step-number] {
12858
12915
  ============================================================================= */
12859
12916
 
12860
12917
  [data-style='material'] [data-toggle-option] {
12861
- border-radius:9999px;color:var(--ink-soft);
12918
+ border-radius:9999px;color:var(--ink-mute);
12862
12919
  }
12863
12920
 
12864
12921
  [data-style='material'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
@@ -12868,7 +12925,8 @@ button[data-step-number] {
12868
12925
 
12869
12926
  /* Selected state */
12870
12927
  [data-style='material'] [data-toggle-option][data-selected='true'] {
12871
- background-image:none;--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);background-color:var(--primary);color:var(--on-primary);
12928
+ background-image:none;--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);color:var(--on-primary);
12929
+ background-color: var(--primary);
12872
12930
  }
12873
12931
 
12874
12932
  /* =============================================================================
@@ -12876,7 +12934,7 @@ button[data-step-number] {
12876
12934
  ============================================================================= */
12877
12935
 
12878
12936
  [data-style='material'] [data-toggle-option] [data-toggle-icon] {
12879
- color:var(--ink-soft);
12937
+ color:var(--ink-mute);
12880
12938
  }
12881
12939
 
12882
12940
  [data-style='material'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
@@ -12896,7 +12954,7 @@ button[data-step-number] {
12896
12954
  ============================================================================= */
12897
12955
 
12898
12956
  [data-style='material'] [data-toggle][data-toggle-variant='button'] {
12899
- border-color:transparent;background-color:transparent;color:var(--ink-soft);
12957
+ border-color:transparent;background-color:transparent;color:var(--ink-mute);
12900
12958
  background-image: none;
12901
12959
  }
12902
12960
 
@@ -12906,7 +12964,7 @@ button[data-step-number] {
12906
12964
  }
12907
12965
 
12908
12966
  [data-style='material'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
12909
- color:var(--ink-soft);
12967
+ color:var(--ink-mute);
12910
12968
  }
12911
12969
 
12912
12970
  [data-style='material'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
@@ -13001,7 +13059,7 @@ button[data-step-number] {
13001
13059
  ============================================================================= */
13002
13060
 
13003
13061
  [data-style='material'] [data-list] [data-list-item] [data-item-icon] {
13004
- color:var(--ink-soft);
13062
+ color:var(--ink-mute);
13005
13063
  }
13006
13064
 
13007
13065
  [data-style='material'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
@@ -13015,7 +13073,7 @@ button[data-step-number] {
13015
13073
 
13016
13074
  /* Literal / kanji icons */
13017
13075
  [data-style='material'] [data-list] [data-list-item] [data-item-icon-literal] {
13018
- color:var(--ink-soft);
13076
+ color:var(--ink-mute);
13019
13077
  }
13020
13078
 
13021
13079
  [data-style='material'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon-literal],
@@ -13028,7 +13086,7 @@ button[data-step-number] {
13028
13086
  }
13029
13087
 
13030
13088
  [data-style='material'] [data-list] [data-list-item] [data-item-description] {
13031
- color:var(--ink-soft);
13089
+ color:var(--ink-mute);
13032
13090
  }
13033
13091
 
13034
13092
  [data-style='material'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
@@ -13036,7 +13094,7 @@ button[data-step-number] {
13036
13094
  }
13037
13095
 
13038
13096
  [data-style='material'] [data-list] [data-list-item] [data-item-badge] {
13039
- border-radius:9999px;background-image:none;background-color:var(--paper-mute);color:var(--ink-soft);
13097
+ border-radius:9999px;background-image:none;background-color:var(--paper-mute);color:var(--ink-mute);
13040
13098
  }
13041
13099
 
13042
13100
  [data-style='material'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
@@ -13048,7 +13106,7 @@ button[data-step-number] {
13048
13106
  ============================================================================= */
13049
13107
 
13050
13108
  [data-style='material'] [data-list] [data-list-group] {
13051
- font-weight:500;color:var(--ink-soft);
13109
+ font-weight:500;color:var(--ink-mute);
13052
13110
  }
13053
13111
 
13054
13112
  [data-style='material'] [data-list] [data-list-group]:hover:not(:disabled),
@@ -13090,6 +13148,17 @@ button[data-step-number] {
13090
13148
  * Material Design inspired with subtle elevation.
13091
13149
  */
13092
13150
 
13151
+ /* =============================================================================
13152
+ Connector Lines — hairline tone (mode-aware), not currentColor (which
13153
+ renders white in dark mode and greyish in light).
13154
+ ============================================================================= */
13155
+
13156
+ [data-style='material'] [data-tree]:not([data-line-style='none']) [data-connector-v],
13157
+ [data-style='material'] [data-tree]:not([data-line-style='none']) [data-connector-h],
13158
+ [data-style='material'] [data-tree]:not([data-line-style='none']) [data-connector-corner] {
13159
+ border-color:var(--paper-edge);
13160
+ }
13161
+
13093
13162
  /* =============================================================================
13094
13163
  Tree Container
13095
13164
  ============================================================================= */
@@ -13103,7 +13172,7 @@ button[data-step-number] {
13103
13172
  ============================================================================= */
13104
13173
 
13105
13174
  [data-style='material'] [data-tree-toggle-btn] {
13106
- border-radius:9999px;color:var(--ink-soft);
13175
+ border-radius:9999px;color:var(--ink-mute);
13107
13176
  }
13108
13177
 
13109
13178
  [data-style='material'] [data-tree-toggle-btn]:hover {
@@ -13159,7 +13228,7 @@ button[data-step-number] {
13159
13228
  ============================================================================= */
13160
13229
 
13161
13230
  [data-style='material'] [data-tree-item-content] [data-item-icon] {
13162
- color:var(--ink-soft);
13231
+ color:var(--ink-mute);
13163
13232
  }
13164
13233
 
13165
13234
  [data-style='material'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
@@ -13171,7 +13240,7 @@ button[data-step-number] {
13171
13240
  }
13172
13241
 
13173
13242
  [data-style='material'] [data-tree-item-content] [data-item-description] {
13174
- color:var(--ink-soft);
13243
+ color:var(--ink-mute);
13175
13244
  }
13176
13245
 
13177
13246
  [data-style='material'] [data-tree-item-content][data-active='true'] [data-item-description] {
@@ -13179,7 +13248,7 @@ button[data-step-number] {
13179
13248
  }
13180
13249
 
13181
13250
  [data-style='material'] [data-tree-item-content] [data-item-badge] {
13182
- border-radius:9999px;background-image:none;color:var(--ink-soft);background-color:var(--paper-mute);
13251
+ border-radius:9999px;background-image:none;color:var(--ink-mute);background-color:var(--paper-mute);
13183
13252
  }
13184
13253
 
13185
13254
  [data-style='material'] [data-tree-item-content][data-active='true'] [data-item-badge] {
@@ -13250,7 +13319,7 @@ button[data-step-number] {
13250
13319
  ============================================================================= */
13251
13320
 
13252
13321
  [data-style='material'] [data-select-placeholder] {
13253
- color:var(--ink-soft);
13322
+ color:var(--ink-mute);
13254
13323
  }
13255
13324
 
13256
13325
  /* =============================================================================
@@ -13258,7 +13327,7 @@ button[data-step-number] {
13258
13327
  ============================================================================= */
13259
13328
 
13260
13329
  [data-style='material'] [data-select-arrow] {
13261
- color:var(--ink-soft);
13330
+ color:var(--ink-mute);
13262
13331
  }
13263
13332
 
13264
13333
  [data-style='material'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
@@ -13274,7 +13343,7 @@ button[data-step-number] {
13274
13343
  }
13275
13344
 
13276
13345
  [data-style='material'] [data-select-tag-remove] {
13277
- border-radius:9999px;color:var(--ink-soft);
13346
+ border-radius:9999px;color:var(--ink-mute);
13278
13347
  }
13279
13348
 
13280
13349
  [data-style='material'] [data-select-tag-remove]:hover {
@@ -13338,7 +13407,7 @@ button[data-step-number] {
13338
13407
 
13339
13408
  /* Item elements */
13340
13409
  [data-style='material'] [data-select-option] [data-item-icon] {
13341
- color:var(--ink-soft);
13410
+ color:var(--ink-mute);
13342
13411
  }
13343
13412
 
13344
13413
  [data-style='material'] [data-select-option]:hover:not(:disabled) [data-item-icon] {
@@ -13350,7 +13419,7 @@ button[data-step-number] {
13350
13419
  }
13351
13420
 
13352
13421
  [data-style='material'] [data-select-option] [data-item-description] {
13353
- color:var(--ink-soft);
13422
+ color:var(--ink-mute);
13354
13423
  }
13355
13424
 
13356
13425
  [data-style='material'] [data-select-option][data-selected='true'] [data-item-description] {
@@ -13362,7 +13431,7 @@ button[data-step-number] {
13362
13431
  ============================================================================= */
13363
13432
 
13364
13433
  [data-style='material'] [data-select-group-label] {
13365
- font-weight:500;color:var(--ink-soft);
13434
+ font-weight:500;color:var(--ink-mute);
13366
13435
  }
13367
13436
 
13368
13437
  /* =============================================================================
@@ -13390,11 +13459,11 @@ button[data-step-number] {
13390
13459
  }
13391
13460
 
13392
13461
  [data-style='material'] [data-select-filter-input]::placeholder {
13393
- color:var(--ink-soft);
13462
+ color:var(--ink-mute);
13394
13463
  }
13395
13464
 
13396
13465
  [data-style='material'] [data-select-empty] {
13397
- color:var(--ink-soft);
13466
+ color:var(--ink-mute);
13398
13467
  }
13399
13468
 
13400
13469
  /**
@@ -13425,7 +13494,7 @@ button[data-step-number] {
13425
13494
 
13426
13495
  /* Trigger elements */
13427
13496
  [data-style='material'] [data-menu-trigger] [data-menu-icon] {
13428
- color:var(--ink-soft);
13497
+ color:var(--ink-mute);
13429
13498
  }
13430
13499
 
13431
13500
  [data-style='material'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
@@ -13433,7 +13502,7 @@ button[data-step-number] {
13433
13502
  }
13434
13503
 
13435
13504
  [data-style='material'] [data-menu-trigger] [data-menu-arrow] {
13436
- color:var(--ink-soft);
13505
+ color:var(--ink-mute);
13437
13506
  }
13438
13507
 
13439
13508
  /* =============================================================================
@@ -13463,7 +13532,7 @@ button[data-step-number] {
13463
13532
 
13464
13533
  /* Item elements */
13465
13534
  [data-style='material'] [data-menu-item] [data-item-icon] {
13466
- color:var(--ink-soft);
13535
+ color:var(--ink-mute);
13467
13536
  }
13468
13537
 
13469
13538
  [data-style='material'] [data-menu-item]:hover:not(:disabled) [data-item-icon] {
@@ -13471,7 +13540,7 @@ button[data-step-number] {
13471
13540
  }
13472
13541
 
13473
13542
  [data-style='material'] [data-menu-item] [data-item-description] {
13474
- color:var(--ink-soft);
13543
+ color:var(--ink-mute);
13475
13544
  }
13476
13545
 
13477
13546
  /* =============================================================================
@@ -13479,7 +13548,7 @@ button[data-step-number] {
13479
13548
  ============================================================================= */
13480
13549
 
13481
13550
  [data-style='material'] [data-menu-group] {
13482
- font-weight:500;color:var(--ink-soft);
13551
+ font-weight:500;color:var(--ink-mute);
13483
13552
  }
13484
13553
 
13485
13554
  /* =============================================================================
@@ -13513,11 +13582,11 @@ button[data-step-number] {
13513
13582
  }
13514
13583
 
13515
13584
  [data-style='material'] [data-dropdown-trigger] [data-dropdown-icon] {
13516
- color:var(--ink-soft);
13585
+ color:var(--ink-mute);
13517
13586
  }
13518
13587
 
13519
13588
  [data-style='material'] [data-dropdown-trigger] [data-dropdown-arrow] {
13520
- color:var(--ink-soft);
13589
+ color:var(--ink-mute);
13521
13590
  }
13522
13591
 
13523
13592
  [data-style='material'] [data-dropdown-panel] {
@@ -13617,7 +13686,7 @@ button[data-step-number] {
13617
13686
  ============================================================================= */
13618
13687
 
13619
13688
  [data-style='material'] [data-table-header] th {
13620
- border-bottom-width:1px;font-weight:500;color:var(--ink-soft);background-color:var(--paper-mute);border-color:var(--paper-edge);
13689
+ border-bottom-width:1px;font-weight:500;color:var(--ink-mute);background-color:var(--paper-mute);border-color:var(--paper-edge);
13621
13690
  }
13622
13691
 
13623
13692
  [data-style='material'] [data-table-header-cell][data-sortable='true']:hover {
@@ -13630,7 +13699,7 @@ button[data-step-number] {
13630
13699
  }
13631
13700
 
13632
13701
  [data-style='material'] [data-table-sort-icon] {
13633
- color:var(--ink-soft);
13702
+ color:var(--ink-mute);
13634
13703
  }
13635
13704
 
13636
13705
  [data-style='material']
@@ -13693,7 +13762,7 @@ button[data-step-number] {
13693
13762
  ============================================================================= */
13694
13763
 
13695
13764
  [data-style='material'] [data-table-empty] {
13696
- color:var(--ink-soft);
13765
+ color:var(--ink-mute);
13697
13766
  }
13698
13767
 
13699
13768
  /* =============================================================================
@@ -13701,7 +13770,7 @@ button[data-step-number] {
13701
13770
  ============================================================================= */
13702
13771
 
13703
13772
  [data-style='material'] [data-table-cell] [data-cell-icon] {
13704
- color:var(--ink-soft);
13773
+ color:var(--ink-mute);
13705
13774
  }
13706
13775
 
13707
13776
  [data-style='material'] [data-table-row][data-selected='true'] [data-cell-icon] {
@@ -13718,7 +13787,7 @@ button[data-step-number] {
13718
13787
  }
13719
13788
 
13720
13789
  [data-style='material'] [data-table-responsive] [data-table-cell]::before {
13721
- color:var(--ink-soft);
13790
+ color:var(--ink-mute);
13722
13791
  }
13723
13792
 
13724
13793
  /* Disable striped alternating bg in card layout */
@@ -13890,11 +13959,12 @@ button[data-step-number] {
13890
13959
  }
13891
13960
 
13892
13961
  [data-style='material'] [data-timeline-item][data-completed] [data-timeline-circle] {
13893
- --un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);background-color:var(--primary);border-color:var(--primary);color:var(--on-primary);
13962
+ --un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);border-color:var(--primary);color:var(--on-primary);
13963
+ background-color: var(--primary);
13894
13964
  }
13895
13965
 
13896
13966
  [data-style='material'] [data-timeline-item][data-active] [data-timeline-circle] {
13897
- --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.25 * 100%), transparent);border-color:var(--primary);color:var(--primary);
13967
+ --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.25 * 100%), transparent);border-color:var(--primary);color:var(--ink);
13898
13968
  }
13899
13969
 
13900
13970
  /* =============================================================================
@@ -13906,7 +13976,7 @@ button[data-step-number] {
13906
13976
  }
13907
13977
 
13908
13978
  [data-style='material'] [data-timeline-item][data-completed] [data-timeline-connector] {
13909
- background-color:var(--primary);
13979
+ background-color: var(--primary);
13910
13980
  }
13911
13981
 
13912
13982
  /* =============================================================================
@@ -14605,21 +14675,21 @@ button[data-step-number] {
14605
14675
 
14606
14676
  [data-style='frosted'] [data-button][data-style='default'][data-variant='accent'],
14607
14677
  [data-style='frosted'] [data-button]:not([data-style])[data-variant='accent'] {
14608
- 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);
14678
+ 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);
14609
14679
  border-color: rgba(255, 255, 255, 0.25);
14610
14680
  box-shadow:
14611
14681
  inset 0 1px 0 rgba(255, 255, 255, 0.25),
14612
14682
  0 2px 8px rgba(0, 0, 0, 0.12);
14613
- }[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);}
14683
+ }
14614
14684
 
14615
14685
  [data-style='frosted'] [data-button][data-style='default'][data-variant='danger'],
14616
14686
  [data-style='frosted'] [data-button]:not([data-style])[data-variant='danger'] {
14617
- 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);
14687
+ 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);
14618
14688
  border-color: rgba(255, 255, 255, 0.25);
14619
14689
  box-shadow:
14620
14690
  inset 0 1px 0 rgba(255, 255, 255, 0.25),
14621
14691
  0 2px 8px rgba(0, 0, 0, 0.12);
14622
- }[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);}
14692
+ }
14623
14693
 
14624
14694
  /* =============================================================================
14625
14695
  Outline Style
@@ -14713,16 +14783,16 @@ button[data-step-number] {
14713
14783
  }
14714
14784
 
14715
14785
  [data-style='frosted'] [data-button][data-style='gradient'][data-variant='accent'] {
14716
- --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);
14786
+ --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);
14717
14787
  border-color: rgba(255, 255, 255, 0.25);
14718
14788
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
14719
- }[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);}
14789
+ }
14720
14790
 
14721
14791
  [data-style='frosted'] [data-button][data-style='gradient'][data-variant='danger'] {
14722
- --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);
14792
+ --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);
14723
14793
  border-color: rgba(255, 255, 255, 0.25);
14724
14794
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
14725
- }[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);}
14795
+ }
14726
14796
 
14727
14797
  [data-style='frosted']
14728
14798
  [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
@@ -15045,7 +15115,7 @@ button[data-step-number] {
15045
15115
  ============================================================================= */
15046
15116
 
15047
15117
  [data-style='frosted'] [data-tabs-trigger] {
15048
- background-color:transparent;color:var(--ink-soft);
15118
+ background-color:transparent;color:var(--ink-mute);
15049
15119
  }
15050
15120
 
15051
15121
  [data-style='frosted'] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
@@ -15063,7 +15133,7 @@ button[data-step-number] {
15063
15133
  ============================================================================= */
15064
15134
 
15065
15135
  [data-style='frosted'] [data-tabs-trigger] [data-tabs-icon] {
15066
- color:var(--ink-soft);
15136
+ color:var(--ink-mute);
15067
15137
  }
15068
15138
 
15069
15139
  [data-style='frosted'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
@@ -15103,7 +15173,7 @@ button[data-step-number] {
15103
15173
  ============================================================================= */
15104
15174
 
15105
15175
  [data-style='frosted'] [data-toggle-option] {
15106
- color:var(--ink-soft);
15176
+ color:var(--ink-mute);
15107
15177
  }
15108
15178
 
15109
15179
  [data-style='frosted'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
@@ -15122,7 +15192,7 @@ button[data-step-number] {
15122
15192
  ============================================================================= */
15123
15193
 
15124
15194
  [data-style='frosted'] [data-toggle-option] [data-toggle-icon] {
15125
- color:var(--ink-soft);
15195
+ color:var(--ink-mute);
15126
15196
  }
15127
15197
 
15128
15198
  [data-style='frosted'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
@@ -15142,7 +15212,7 @@ button[data-step-number] {
15142
15212
  ============================================================================= */
15143
15213
 
15144
15214
  [data-style='frosted'] [data-toggle][data-toggle-variant='button'] {
15145
- border-color:transparent;background-color:transparent;color:var(--ink-soft);
15215
+ border-color:transparent;background-color:transparent;color:var(--ink-mute);
15146
15216
  background-image: none;
15147
15217
  }
15148
15218
 
@@ -15152,7 +15222,7 @@ button[data-step-number] {
15152
15222
  }
15153
15223
 
15154
15224
  [data-style='frosted'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
15155
- color:var(--ink-soft);
15225
+ color:var(--ink-mute);
15156
15226
  }
15157
15227
 
15158
15228
  [data-style='frosted'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
@@ -15261,7 +15331,7 @@ button[data-step-number] {
15261
15331
  ============================================================================= */
15262
15332
 
15263
15333
  [data-style='frosted'] [data-list] [data-list-item] [data-item-icon] {
15264
- color:var(--ink-soft);
15334
+ color:var(--ink-mute);
15265
15335
  }
15266
15336
 
15267
15337
  [data-style='frosted'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
@@ -15275,7 +15345,7 @@ button[data-step-number] {
15275
15345
 
15276
15346
  /* Literal / kanji icons */
15277
15347
  [data-style='frosted'] [data-list] [data-list-item] [data-item-icon-literal] {
15278
- color:var(--ink-soft);
15348
+ color:var(--ink-mute);
15279
15349
  }
15280
15350
 
15281
15351
  [data-style='frosted'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon-literal],
@@ -15299,7 +15369,7 @@ button[data-step-number] {
15299
15369
  }
15300
15370
 
15301
15371
  [data-style='frosted'] [data-list] [data-list-item] [data-item-description] {
15302
- color:var(--ink-soft);
15372
+ color:var(--ink-mute);
15303
15373
  }
15304
15374
 
15305
15375
  [data-style='frosted'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
@@ -15307,7 +15377,7 @@ button[data-step-number] {
15307
15377
  }
15308
15378
 
15309
15379
  [data-style='frosted'] [data-list] [data-list-item] [data-item-badge] {
15310
- background-image:none;color:var(--ink-soft);
15380
+ background-image:none;color:var(--ink-mute);
15311
15381
  background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
15312
15382
  }
15313
15383
 
@@ -15320,7 +15390,7 @@ button[data-step-number] {
15320
15390
  ============================================================================= */
15321
15391
 
15322
15392
  [data-style='frosted'] [data-list] [data-list-group] {
15323
- color:var(--ink-soft);
15393
+ color:var(--ink-mute);
15324
15394
  }
15325
15395
 
15326
15396
  [data-style='frosted'] [data-list] [data-list-group]:hover:not(:disabled),
@@ -15364,6 +15434,17 @@ button[data-step-number] {
15364
15434
  * Glassmorphism styling with blur and transparency.
15365
15435
  */
15366
15436
 
15437
+ /* =============================================================================
15438
+ Connector Lines — hairline tone (mode-aware), not currentColor (which
15439
+ renders white in dark mode and greyish in light).
15440
+ ============================================================================= */
15441
+
15442
+ [data-style='frosted'] [data-tree]:not([data-line-style='none']) [data-connector-v],
15443
+ [data-style='frosted'] [data-tree]:not([data-line-style='none']) [data-connector-h],
15444
+ [data-style='frosted'] [data-tree]:not([data-line-style='none']) [data-connector-corner] {
15445
+ border-color:var(--paper-edge);
15446
+ }
15447
+
15367
15448
  /* =============================================================================
15368
15449
  Tree Container
15369
15450
  ============================================================================= */
@@ -15378,7 +15459,7 @@ button[data-step-number] {
15378
15459
  ============================================================================= */
15379
15460
 
15380
15461
  [data-style='frosted'] [data-tree-toggle-btn] {
15381
- color:var(--ink-soft);
15462
+ color:var(--ink-mute);
15382
15463
  }
15383
15464
 
15384
15465
  [data-style='frosted'] [data-tree-toggle-btn]:hover {
@@ -15420,7 +15501,7 @@ button[data-step-number] {
15420
15501
  ============================================================================= */
15421
15502
 
15422
15503
  [data-style='frosted'] [data-tree-item-content] [data-item-icon] {
15423
- color:var(--ink-soft);
15504
+ color:var(--ink-mute);
15424
15505
  }
15425
15506
 
15426
15507
  [data-style='frosted'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
@@ -15432,7 +15513,7 @@ button[data-step-number] {
15432
15513
  }
15433
15514
 
15434
15515
  [data-style='frosted'] [data-tree-item-content] [data-item-description] {
15435
- color:var(--ink-soft);
15516
+ color:var(--ink-mute);
15436
15517
  }
15437
15518
 
15438
15519
  [data-style='frosted'] [data-tree-item-content][data-active='true'] [data-item-description] {
@@ -15440,7 +15521,7 @@ button[data-step-number] {
15440
15521
  }
15441
15522
 
15442
15523
  [data-style='frosted'] [data-tree-item-content] [data-item-badge] {
15443
- color:var(--ink-soft);
15524
+ color:var(--ink-mute);
15444
15525
  background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
15445
15526
  }
15446
15527
 
@@ -15518,7 +15599,7 @@ button[data-step-number] {
15518
15599
  ============================================================================= */
15519
15600
 
15520
15601
  [data-style='frosted'] [data-select-placeholder] {
15521
- color:var(--ink-soft);
15602
+ color:var(--ink-mute);
15522
15603
  }
15523
15604
 
15524
15605
  /* =============================================================================
@@ -15526,7 +15607,7 @@ button[data-step-number] {
15526
15607
  ============================================================================= */
15527
15608
 
15528
15609
  [data-style='frosted'] [data-select-arrow] {
15529
- color:var(--ink-soft);
15610
+ color:var(--ink-mute);
15530
15611
  }
15531
15612
 
15532
15613
  [data-style='frosted'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
@@ -15543,7 +15624,7 @@ button[data-step-number] {
15543
15624
  }
15544
15625
 
15545
15626
  [data-style='frosted'] [data-select-tag-remove] {
15546
- color:var(--ink-soft);
15627
+ color:var(--ink-mute);
15547
15628
  }
15548
15629
 
15549
15630
  [data-style='frosted'] [data-select-tag-remove]:hover {
@@ -15605,7 +15686,7 @@ button[data-step-number] {
15605
15686
 
15606
15687
  /* Item elements */
15607
15688
  [data-style='frosted'] [data-select-option] [data-item-icon] {
15608
- color:var(--ink-soft);
15689
+ color:var(--ink-mute);
15609
15690
  }
15610
15691
 
15611
15692
  [data-style='frosted'] [data-select-option]:hover:not(:disabled) [data-item-icon] {
@@ -15617,7 +15698,7 @@ button[data-step-number] {
15617
15698
  }
15618
15699
 
15619
15700
  [data-style='frosted'] [data-select-option] [data-item-description] {
15620
- color:var(--ink-soft);
15701
+ color:var(--ink-mute);
15621
15702
  }
15622
15703
 
15623
15704
  [data-style='frosted'] [data-select-option][data-selected='true'] [data-item-description] {
@@ -15629,7 +15710,7 @@ button[data-step-number] {
15629
15710
  ============================================================================= */
15630
15711
 
15631
15712
  [data-style='frosted'] [data-select-group-label] {
15632
- color:var(--ink-soft);
15713
+ color:var(--ink-mute);
15633
15714
  }
15634
15715
 
15635
15716
  /* =============================================================================
@@ -15660,11 +15741,11 @@ button[data-step-number] {
15660
15741
  }
15661
15742
 
15662
15743
  [data-style='frosted'] [data-select-filter-input]::placeholder {
15663
- color:var(--ink-soft);
15744
+ color:var(--ink-mute);
15664
15745
  }
15665
15746
 
15666
15747
  [data-style='frosted'] [data-select-empty] {
15667
- color:var(--ink-soft);
15748
+ color:var(--ink-mute);
15668
15749
  }
15669
15750
 
15670
15751
  /**
@@ -15702,7 +15783,7 @@ button[data-step-number] {
15702
15783
 
15703
15784
  /* Trigger elements */
15704
15785
  [data-style='frosted'] [data-menu-trigger] [data-menu-icon] {
15705
- color:var(--ink-soft);
15786
+ color:var(--ink-mute);
15706
15787
  }
15707
15788
 
15708
15789
  [data-style='frosted'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
@@ -15710,7 +15791,7 @@ button[data-step-number] {
15710
15791
  }
15711
15792
 
15712
15793
  [data-style='frosted'] [data-menu-trigger] [data-menu-arrow] {
15713
- color:var(--ink-soft);
15794
+ color:var(--ink-mute);
15714
15795
  }
15715
15796
 
15716
15797
  /* =============================================================================
@@ -15747,7 +15828,7 @@ button[data-step-number] {
15747
15828
 
15748
15829
  /* Item elements */
15749
15830
  [data-style='frosted'] [data-menu-item] [data-item-icon] {
15750
- color:var(--ink-soft);
15831
+ color:var(--ink-mute);
15751
15832
  }
15752
15833
 
15753
15834
  [data-style='frosted'] [data-menu-item]:hover:not(:disabled) [data-item-icon] {
@@ -15755,7 +15836,7 @@ button[data-step-number] {
15755
15836
  }
15756
15837
 
15757
15838
  [data-style='frosted'] [data-menu-item] [data-item-description] {
15758
- color:var(--ink-soft);
15839
+ color:var(--ink-mute);
15759
15840
  }
15760
15841
 
15761
15842
  /* =============================================================================
@@ -15763,7 +15844,7 @@ button[data-step-number] {
15763
15844
  ============================================================================= */
15764
15845
 
15765
15846
  [data-style='frosted'] [data-menu-group] {
15766
- color:var(--ink-soft);
15847
+ color:var(--ink-mute);
15767
15848
  }
15768
15849
 
15769
15850
  /* =============================================================================
@@ -15805,11 +15886,11 @@ button[data-step-number] {
15805
15886
  }
15806
15887
 
15807
15888
  [data-style='frosted'] [data-dropdown-trigger] [data-dropdown-icon] {
15808
- color:var(--ink-soft);
15889
+ color:var(--ink-mute);
15809
15890
  }
15810
15891
 
15811
15892
  [data-style='frosted'] [data-dropdown-trigger] [data-dropdown-arrow] {
15812
- color:var(--ink-soft);
15893
+ color:var(--ink-mute);
15813
15894
  }
15814
15895
 
15815
15896
  [data-style='frosted'] [data-dropdown-panel] {
@@ -15918,7 +15999,7 @@ button[data-step-number] {
15918
15999
  ============================================================================= */
15919
16000
 
15920
16001
  [data-style='frosted'] [data-table-header] th {
15921
- 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);
16002
+ 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);
15922
16003
  border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
15923
16004
  background-color: color-mix(in oklch, var(--paper-mute) 80%, transparent);
15924
16005
  }
@@ -15933,7 +16014,7 @@ button[data-step-number] {
15933
16014
  }
15934
16015
 
15935
16016
  [data-style='frosted'] [data-table-sort-icon] {
15936
- color:var(--ink-soft);
16017
+ color:var(--ink-mute);
15937
16018
  }
15938
16019
 
15939
16020
  [data-style='frosted'] [data-table-header-cell][data-sort-order='ascending'] [data-table-sort-icon],
@@ -15994,7 +16075,7 @@ button[data-step-number] {
15994
16075
  ============================================================================= */
15995
16076
 
15996
16077
  [data-style='frosted'] [data-table-empty] {
15997
- color:var(--ink-soft);
16078
+ color:var(--ink-mute);
15998
16079
  }
15999
16080
 
16000
16081
  /* =============================================================================
@@ -16002,7 +16083,7 @@ button[data-step-number] {
16002
16083
  ============================================================================= */
16003
16084
 
16004
16085
  [data-style='frosted'] [data-table-cell] [data-cell-icon] {
16005
- color:var(--ink-soft);
16086
+ color:var(--ink-mute);
16006
16087
  }
16007
16088
 
16008
16089
  [data-style='frosted'] [data-table-row][data-selected='true'] [data-cell-icon] {
@@ -16021,7 +16102,7 @@ button[data-step-number] {
16021
16102
  }
16022
16103
 
16023
16104
  [data-style='frosted'] [data-table-responsive] [data-table-cell]::before {
16024
- color:var(--ink-soft);
16105
+ color:var(--ink-mute);
16025
16106
  }
16026
16107
 
16027
16108
  /* Disable striped alternating bg in card layout */
@@ -16204,7 +16285,7 @@ button[data-step-number] {
16204
16285
  }
16205
16286
 
16206
16287
  [data-style='frosted'] [data-timeline-item][data-active] [data-timeline-circle] {
16207
- 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);
16288
+ 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);
16208
16289
  }
16209
16290
 
16210
16291
  /* =============================================================================
@@ -16431,8 +16512,8 @@ button[data-step-number] {
16431
16512
  }
16432
16513
 
16433
16514
  [data-style='frosted'] [data-card][data-variant='primary'] [data-card-body] {
16434
- color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);
16435
- }[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);}
16515
+ color:rgb(22 22 22 / 0.8);
16516
+ }
16436
16517
 
16437
16518
  /* Secondary — tinted secondary glass */
16438
16519
  [data-style='frosted'] [data-card][data-variant='secondary'] {
@@ -16449,8 +16530,8 @@ button[data-step-number] {
16449
16530
  }
16450
16531
 
16451
16532
  [data-style='frosted'] [data-card][data-variant='secondary'] [data-card-body] {
16452
- color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);
16453
- }[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);}
16533
+ color:rgb(22 22 22 / 0.8);
16534
+ }
16454
16535
 
16455
16536
  /* Tertiary — barely-there frosted glass */
16456
16537
  [data-style='frosted'] [data-card][data-variant='tertiary'] {
@@ -16517,7 +16598,7 @@ button[data-step-number] {
16517
16598
 
16518
16599
  [data-style='frosted'] [data-message-root][data-type='error'] {
16519
16600
  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);
16520
- background-color: color-mix(in oklch, var(--error-soft) 50%, transparent);
16601
+ background-color: var(--error-soft);
16521
16602
  }
16522
16603
  [data-style='frosted'] [data-message-root][data-type='error'] [data-message-icon],
16523
16604
  [data-style='frosted'] [data-message-root][data-type='error'] [data-message-dismiss] {
@@ -16526,7 +16607,7 @@ button[data-step-number] {
16526
16607
 
16527
16608
  [data-style='frosted'] [data-message-root][data-type='warning'] {
16528
16609
  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);
16529
- background-color: color-mix(in oklch, var(--warning-soft) 50%, transparent);
16610
+ background-color: var(--warning-soft);
16530
16611
  }
16531
16612
  [data-style='frosted'] [data-message-root][data-type='warning'] [data-message-icon],
16532
16613
  [data-style='frosted'] [data-message-root][data-type='warning'] [data-message-dismiss] {
@@ -16535,7 +16616,7 @@ button[data-step-number] {
16535
16616
 
16536
16617
  [data-style='frosted'] [data-message-root][data-type='info'] {
16537
16618
  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);
16538
- background-color: color-mix(in oklch, var(--info-soft) 50%, transparent);
16619
+ background-color: var(--info-soft);
16539
16620
  }
16540
16621
  [data-style='frosted'] [data-message-root][data-type='info'] [data-message-icon],
16541
16622
  [data-style='frosted'] [data-message-root][data-type='info'] [data-message-dismiss] {
@@ -16544,7 +16625,7 @@ button[data-step-number] {
16544
16625
 
16545
16626
  [data-style='frosted'] [data-message-root][data-type='success'] {
16546
16627
  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);
16547
- background-color: color-mix(in oklch, var(--success-soft) 50%, transparent);
16628
+ background-color: var(--success-soft);
16548
16629
  }
16549
16630
  [data-style='frosted'] [data-message-root][data-type='success'] [data-message-icon],
16550
16631
  [data-style='frosted'] [data-message-root][data-type='success'] [data-message-dismiss] {
@@ -16951,23 +17032,27 @@ button[data-step-number] {
16951
17032
 
16952
17033
  [data-style='zen-sumi'] [data-button][data-style='default'][data-variant='primary'],
16953
17034
  [data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='primary'] {
16954
- border-color:transparent;background-image:none;background-color:var(--primary);color:var(--on-primary);
17035
+ border-color:transparent;background-image:none;color:var(--on-primary);
17036
+ background-color: var(--primary);
16955
17037
  }
16956
17038
 
16957
17039
  [data-style='zen-sumi'] [data-button][data-style='default'][data-variant='secondary'],
16958
17040
  [data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='secondary'] {
16959
- border-color:transparent;background-image:none;background-color:var(--accent);color:var(--on-primary);
17041
+ border-color:transparent;background-image:none;color:var(--on-primary);
17042
+ background-color: var(--accent);
16960
17043
  }
16961
17044
 
16962
17045
  [data-style='zen-sumi'] [data-button][data-style='default'][data-variant='accent'],
16963
17046
  [data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='accent'] {
16964
- 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);
16965
- }[data-mode="dark"][data-style="zen-sumi"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"] [data-style="zen-sumi"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"][data-style="zen-sumi"] [data-button]:not([data-style])[data-variant="accent"],[data-mode="dark"] [data-style="zen-sumi"] [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);}
17047
+ border-color:transparent;background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
17048
+ background-color: var(--accent);
17049
+ }
16966
17050
 
16967
17051
  [data-style='zen-sumi'] [data-button][data-style='default'][data-variant='danger'],
16968
17052
  [data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='danger'] {
16969
- 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);
16970
- }[data-mode="dark"][data-style="zen-sumi"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"] [data-style="zen-sumi"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"][data-style="zen-sumi"] [data-button]:not([data-style])[data-variant="danger"],[data-mode="dark"] [data-style="zen-sumi"] [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);}
17053
+ border-color:transparent;background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
17054
+ background-color: var(--danger);
17055
+ }
16971
17056
 
16972
17057
  /* =============================================================================
16973
17058
  Outline Style
@@ -17034,20 +17119,24 @@ button[data-step-number] {
17034
17119
  }
17035
17120
 
17036
17121
  [data-style='zen-sumi'] [data-button][data-style='gradient'][data-variant='primary'] {
17037
- background-image:none;background-color:var(--primary);color:var(--on-primary);
17122
+ background-image:none;color:var(--on-primary);
17123
+ background-color: var(--primary);
17038
17124
  }
17039
17125
 
17040
17126
  [data-style='zen-sumi'] [data-button][data-style='gradient'][data-variant='secondary'] {
17041
- background-image:none;background-color:var(--accent);color:var(--on-primary);
17127
+ background-image:none;color:var(--on-primary);
17128
+ background-color: var(--accent);
17042
17129
  }
17043
17130
 
17044
17131
  [data-style='zen-sumi'] [data-button][data-style='gradient'][data-variant='accent'] {
17045
- 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);
17046
- }[data-mode="dark"][data-style="zen-sumi"] [data-button][data-style="gradient"][data-variant="accent"],[data-mode="dark"] [data-style="zen-sumi"] [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);}
17132
+ background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
17133
+ background-color: var(--accent);
17134
+ }
17047
17135
 
17048
17136
  [data-style='zen-sumi'] [data-button][data-style='gradient'][data-variant='danger'] {
17049
- 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);
17050
- }[data-mode="dark"][data-style="zen-sumi"] [data-button][data-style="gradient"][data-variant="danger"],[data-mode="dark"] [data-style="zen-sumi"] [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);}
17137
+ background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
17138
+ background-color: var(--danger);
17139
+ }
17051
17140
 
17052
17141
  /* =============================================================================
17053
17142
  Link Style
@@ -17219,7 +17308,7 @@ button[data-step-number] {
17219
17308
  ============================================================================= */
17220
17309
 
17221
17310
  [data-style='zen-sumi'] [data-tabs-trigger] {
17222
- border-width:0px;background-color:transparent;color:var(--ink-soft);
17311
+ border-width:0px;background-color:transparent;color:var(--ink-mute);
17223
17312
  font-weight: 400;
17224
17313
  border-radius: var(--radius-sm, 0.125rem);
17225
17314
  transition:
@@ -17228,7 +17317,7 @@ button[data-step-number] {
17228
17317
  }
17229
17318
 
17230
17319
  [data-style='zen-sumi'] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
17231
- background-color:var(--paper-mute);color:var(--ink-mute);
17320
+ background-color:var(--paper-mute);color:var(--ink);
17232
17321
  }
17233
17322
 
17234
17323
  [data-style='zen-sumi'] [data-tabs-trigger][data-selected] {
@@ -17257,7 +17346,7 @@ button[data-step-number] {
17257
17346
  }
17258
17347
 
17259
17348
  [data-style='zen-sumi'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
17260
- color:var(--ink-soft);
17349
+ color:var(--ink-mute);
17261
17350
  }
17262
17351
 
17263
17352
  [data-style='zen-sumi'] [data-tabs-trigger][data-selected] [data-tabs-icon] {
@@ -17295,7 +17384,7 @@ button[data-step-number] {
17295
17384
  ============================================================================= */
17296
17385
 
17297
17386
  [data-style='zen-sumi'] [data-toggle-option] {
17298
- border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-soft);
17387
+ border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-mute);
17299
17388
  }
17300
17389
 
17301
17390
  [data-style='zen-sumi'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
@@ -17305,7 +17394,8 @@ button[data-step-number] {
17305
17394
 
17306
17395
  /* Selected state — primary (shu) fill */
17307
17396
  [data-style='zen-sumi'] [data-toggle-option][data-selected='true'] {
17308
- background-image:none;background-color:var(--primary);color:var(--on-primary);
17397
+ background-image:none;color:var(--on-primary);
17398
+ background-color: var(--primary);
17309
17399
  font-weight: 500;
17310
17400
  }
17311
17401
 
@@ -17320,7 +17410,7 @@ button[data-step-number] {
17320
17410
  * matches the option label, and `paper` for selected contrasts cleanly
17321
17411
  * against the ink fill. */
17322
17412
  [data-style='zen-sumi'] [data-toggle-option] [data-toggle-icon] {
17323
- color:var(--ink-soft);
17413
+ color:var(--ink-mute);
17324
17414
  }
17325
17415
 
17326
17416
  [data-style='zen-sumi'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
@@ -17340,7 +17430,7 @@ button[data-step-number] {
17340
17430
  ============================================================================= */
17341
17431
 
17342
17432
  [data-style='zen-sumi'] [data-toggle][data-toggle-variant='button'] {
17343
- border-color:transparent;background-color:transparent;color:var(--ink-soft);
17433
+ border-color:transparent;background-color:transparent;color:var(--ink-mute);
17344
17434
  background-image: none;
17345
17435
  }
17346
17436
 
@@ -17350,7 +17440,7 @@ button[data-step-number] {
17350
17440
  }
17351
17441
 
17352
17442
  [data-style='zen-sumi'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
17353
- color:var(--ink-soft);
17443
+ color:var(--ink-mute);
17354
17444
  }
17355
17445
 
17356
17446
  [data-style='zen-sumi'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
@@ -17414,12 +17504,12 @@ button[data-step-number] {
17414
17504
  ============================================================================= */
17415
17505
 
17416
17506
  [data-style='zen-sumi'] [data-list] [data-list-item] {
17417
- border-width:0px;border-color:transparent;border-style:solid;background-color:transparent;color:var(--ink-soft);
17507
+ border-width:0px;border-color:transparent;border-style:solid;background-color:transparent;color:var(--ink-mute);
17418
17508
  }
17419
17509
 
17420
17510
  [data-style='zen-sumi'] [data-list] a[data-list-item],
17421
17511
  [data-style='zen-sumi'] [data-list] button[data-list-item] {
17422
- color:var(--ink-soft);
17512
+ color:var(--ink-mute);
17423
17513
  }
17424
17514
 
17425
17515
  /* Hover and focus — subtle paper wash */
@@ -17453,12 +17543,12 @@ button[data-step-number] {
17453
17543
  ============================================================================= */
17454
17544
 
17455
17545
  [data-style='zen-sumi'] [data-list] [data-list-item] [data-item-icon] {
17456
- color:var(--paper-edge);
17546
+ color:var(--ink-mute);
17457
17547
  }
17458
17548
 
17459
17549
  [data-style='zen-sumi'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
17460
17550
  [data-style='zen-sumi'] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon] {
17461
- color:var(--ink-soft);
17551
+ color:var(--ink-mute);
17462
17552
  }
17463
17553
 
17464
17554
  [data-style='zen-sumi'] [data-list] [data-list-item][data-active='true'] [data-item-icon] {
@@ -17466,15 +17556,15 @@ button[data-step-number] {
17466
17556
  }
17467
17557
 
17468
17558
  [data-style='zen-sumi'] [data-list] [data-list-item] [data-item-description] {
17469
- color:var(--paper-edge);
17559
+ color:var(--ink-mute);
17470
17560
  }
17471
17561
 
17472
17562
  [data-style='zen-sumi'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
17473
- color:var(--ink-soft);
17563
+ color:var(--ink-mute);
17474
17564
  }
17475
17565
 
17476
17566
  [data-style='zen-sumi'] [data-list] [data-list-item] [data-item-badge] {
17477
- border-width:1px;background-color:transparent;background-image:none;color:var(--ink-soft);border-color:var(--paper-mute);
17567
+ border-width:1px;background-color:transparent;background-image:none;color:var(--ink-mute);border-color:var(--paper-mute);
17478
17568
  }
17479
17569
 
17480
17570
  [data-style='zen-sumi'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
@@ -17486,12 +17576,12 @@ button[data-step-number] {
17486
17576
  ============================================================================= */
17487
17577
 
17488
17578
  [data-style='zen-sumi'] [data-list] [data-list-group] {
17489
- color:var(--paper-edge);
17579
+ color:var(--ink-mute);
17490
17580
  }
17491
17581
 
17492
17582
  [data-style='zen-sumi'] [data-list] [data-list-group]:hover:not(:disabled),
17493
17583
  [data-style='zen-sumi'] [data-list] [data-list-group]:focus:not(:disabled) {
17494
- background-image:none;color:var(--ink-soft);
17584
+ background-image:none;color:var(--ink-mute);
17495
17585
  }
17496
17586
 
17497
17587
  /* =============================================================================
@@ -17529,6 +17619,17 @@ button[data-step-number] {
17529
17619
  * No bg fill on active — ink is in typography weight + icon color only.
17530
17620
  */
17531
17621
 
17622
+ /* =============================================================================
17623
+ Connector Lines — hairline tone (mode-aware), not currentColor (which
17624
+ renders white in dark mode and greyish in light).
17625
+ ============================================================================= */
17626
+
17627
+ [data-style='zen-sumi'] [data-tree]:not([data-line-style='none']) [data-connector-v],
17628
+ [data-style='zen-sumi'] [data-tree]:not([data-line-style='none']) [data-connector-h],
17629
+ [data-style='zen-sumi'] [data-tree]:not([data-line-style='none']) [data-connector-corner] {
17630
+ border-color:var(--paper-edge);
17631
+ }
17632
+
17532
17633
  /* =============================================================================
17533
17634
  Tree Container
17534
17635
  ============================================================================= */
@@ -17542,11 +17643,11 @@ button[data-step-number] {
17542
17643
  ============================================================================= */
17543
17644
 
17544
17645
  [data-style='zen-sumi'] [data-tree-toggle-btn] {
17545
- color:var(--paper-edge);
17646
+ color:var(--ink-mute);
17546
17647
  }
17547
17648
 
17548
17649
  [data-style='zen-sumi'] [data-tree-toggle-btn]:hover {
17549
- background-image:none;color:var(--ink-soft);
17650
+ background-image:none;color:var(--ink-mute);
17550
17651
  }
17551
17652
 
17552
17653
  /* =============================================================================
@@ -17554,7 +17655,7 @@ button[data-step-number] {
17554
17655
  ============================================================================= */
17555
17656
 
17556
17657
  [data-style='zen-sumi'] [data-tree-item-content] {
17557
- color:var(--ink-soft);
17658
+ color:var(--ink-mute);
17558
17659
  }
17559
17660
 
17560
17661
  [data-style='zen-sumi'] [data-tree-item-content]:hover:not(:disabled),
@@ -17597,11 +17698,11 @@ button[data-step-number] {
17597
17698
  ============================================================================= */
17598
17699
 
17599
17700
  [data-style='zen-sumi'] [data-tree-item-content] [data-item-icon] {
17600
- color:var(--paper-edge);
17701
+ color:var(--ink-mute);
17601
17702
  }
17602
17703
 
17603
17704
  [data-style='zen-sumi'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
17604
- color:var(--ink-soft);
17705
+ color:var(--ink-mute);
17605
17706
  }
17606
17707
 
17607
17708
  [data-style='zen-sumi'] [data-tree-item-content][data-active='true'] [data-item-icon] {
@@ -17609,15 +17710,15 @@ button[data-step-number] {
17609
17710
  }
17610
17711
 
17611
17712
  [data-style='zen-sumi'] [data-tree-item-content] [data-item-description] {
17612
- color:var(--paper-edge);
17713
+ color:var(--ink-mute);
17613
17714
  }
17614
17715
 
17615
17716
  [data-style='zen-sumi'] [data-tree-item-content][data-active='true'] [data-item-description] {
17616
- color:var(--ink-soft);
17717
+ color:var(--ink-mute);
17617
17718
  }
17618
17719
 
17619
17720
  [data-style='zen-sumi'] [data-tree-item-content] [data-item-badge] {
17620
- border-width:1px;background-color:transparent;background-image:none;color:var(--ink-soft);border-color:var(--paper-mute);
17721
+ border-width:1px;background-color:transparent;background-image:none;color:var(--ink-mute);border-color:var(--paper-mute);
17621
17722
  }
17622
17723
 
17623
17724
  [data-style='zen-sumi'] [data-tree-item-content][data-active='true'] [data-item-badge] {
@@ -17660,6 +17761,36 @@ button[data-step-number] {
17660
17761
  color:var(--primary);
17661
17762
  }
17662
17763
 
17764
+ /**
17765
+ * Divider - Zen-Sumi Theme Styles
17766
+ *
17767
+ * Hairline ink-on-paper rule. The base leaves the line uncolored, so without
17768
+ * this the divider is invisible — pin it to the paper-edge hairline tone.
17769
+ */
17770
+
17771
+ [data-style='zen-sumi'] [data-divider][data-orientation='horizontal']::before,
17772
+ [data-style='zen-sumi'] [data-divider][data-orientation='horizontal']::after {
17773
+ background-color:var(--paper-edge);
17774
+ }
17775
+
17776
+ [data-style='zen-sumi'] [data-divider][data-orientation='vertical']::before,
17777
+ [data-style='zen-sumi'] [data-divider][data-orientation='vertical']::after {
17778
+ background-color:var(--paper-edge);
17779
+ }
17780
+
17781
+ /* No-label divider — color the element itself (no ::before/::after spacers). */
17782
+ [data-style='zen-sumi'] [data-divider][data-orientation='horizontal']:not(:has([data-divider-label])) {
17783
+ background-color:var(--paper-edge);
17784
+ }
17785
+
17786
+ [data-style='zen-sumi'] [data-divider][data-orientation='vertical']:not(:has([data-divider-label])) {
17787
+ background-color:var(--paper-edge);
17788
+ }
17789
+
17790
+ [data-style='zen-sumi'] [data-divider-label] {
17791
+ color:var(--ink-mute);
17792
+ }
17793
+
17663
17794
  /**
17664
17795
  * Select - Zen-Sumi Theme Styles
17665
17796
  *
@@ -17673,7 +17804,7 @@ button[data-step-number] {
17673
17804
  ============================================================================= */
17674
17805
 
17675
17806
  [data-style='zen-sumi'] [data-select-trigger] {
17676
- border-width:1px;background-color:transparent;background-image:none;color:var(--ink-soft);border-color:var(--paper-mute);
17807
+ border-width:1px;background-color:transparent;background-image:none;color:var(--ink-mute);border-color:var(--paper-mute);
17677
17808
  }
17678
17809
 
17679
17810
  [data-style='zen-sumi'] [data-select-trigger]:hover:not(:disabled) {
@@ -17694,7 +17825,7 @@ button[data-step-number] {
17694
17825
  ============================================================================= */
17695
17826
 
17696
17827
  [data-style='zen-sumi'] [data-select-placeholder] {
17697
- color:var(--paper-edge);
17828
+ color:var(--ink-mute);
17698
17829
  }
17699
17830
 
17700
17831
  /* =============================================================================
@@ -17702,11 +17833,11 @@ button[data-step-number] {
17702
17833
  ============================================================================= */
17703
17834
 
17704
17835
  [data-style='zen-sumi'] [data-select-arrow] {
17705
- color:var(--paper-edge);
17836
+ color:var(--ink-mute);
17706
17837
  }
17707
17838
 
17708
17839
  [data-style='zen-sumi'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
17709
- color:var(--paper-edge);
17840
+ color:var(--ink-mute);
17710
17841
  }
17711
17842
 
17712
17843
  /* =============================================================================
@@ -17714,11 +17845,11 @@ button[data-step-number] {
17714
17845
  ============================================================================= */
17715
17846
 
17716
17847
  [data-style='zen-sumi'] [data-select-tag] {
17717
- border-width:1px;background-color:transparent;background-image:none;color:var(--ink-soft);border-color:var(--paper-mute);
17848
+ border-width:1px;background-color:transparent;background-image:none;color:var(--ink-mute);border-color:var(--paper-mute);
17718
17849
  }
17719
17850
 
17720
17851
  [data-style='zen-sumi'] [data-select-tag-remove] {
17721
- color:var(--paper-edge);
17852
+ color:var(--ink-mute);
17722
17853
  }
17723
17854
 
17724
17855
  [data-style='zen-sumi'] [data-select-tag-remove]:hover {
@@ -17739,7 +17870,7 @@ button[data-step-number] {
17739
17870
  ============================================================================= */
17740
17871
 
17741
17872
  [data-style='zen-sumi'] [data-select-option] {
17742
- border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-soft);
17873
+ border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-mute);
17743
17874
  }
17744
17875
 
17745
17876
  [data-style='zen-sumi'] [data-select-option]:hover:not(:disabled),
@@ -17774,7 +17905,7 @@ button[data-step-number] {
17774
17905
 
17775
17906
  /* Item elements */
17776
17907
  [data-style='zen-sumi'] [data-select-option] [data-item-description] {
17777
- color:var(--paper-edge);
17908
+ color:var(--ink-mute);
17778
17909
  }
17779
17910
 
17780
17911
  [data-style='zen-sumi'] [data-select-option][data-selected='true'] [data-item-description] {
@@ -17786,7 +17917,7 @@ button[data-step-number] {
17786
17917
  ============================================================================= */
17787
17918
 
17788
17919
  [data-style='zen-sumi'] [data-select-group-label] {
17789
- color:var(--paper-edge);
17920
+ color:var(--ink-mute);
17790
17921
  }
17791
17922
 
17792
17923
  /* =============================================================================
@@ -17814,11 +17945,11 @@ button[data-step-number] {
17814
17945
  }
17815
17946
 
17816
17947
  [data-style='zen-sumi'] [data-select-filter-input]::placeholder {
17817
- color:var(--ink-soft);
17948
+ color:var(--ink-mute);
17818
17949
  }
17819
17950
 
17820
17951
  [data-style='zen-sumi'] [data-select-empty] {
17821
- color:var(--paper-edge);
17952
+ color:var(--ink-mute);
17822
17953
  }
17823
17954
 
17824
17955
  /**
@@ -17833,7 +17964,7 @@ button[data-step-number] {
17833
17964
  ============================================================================= */
17834
17965
 
17835
17966
  [data-style='zen-sumi'] [data-menu-trigger] {
17836
- border-width:1px;background-color:transparent;background-image:none;border-color:var(--paper-mute);color:var(--ink-soft);
17967
+ border-width:1px;background-color:transparent;background-image:none;border-color:var(--paper-mute);color:var(--ink-mute);
17837
17968
  }
17838
17969
 
17839
17970
  [data-style='zen-sumi'] [data-menu-trigger]:hover:not(:disabled) {
@@ -17851,15 +17982,15 @@ button[data-step-number] {
17851
17982
 
17852
17983
  /* Trigger elements */
17853
17984
  [data-style='zen-sumi'] [data-menu-trigger] [data-menu-icon] {
17854
- color:var(--paper-edge);
17985
+ color:var(--ink-mute);
17855
17986
  }
17856
17987
 
17857
17988
  [data-style='zen-sumi'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
17858
- color:var(--ink-soft);
17989
+ color:var(--ink-mute);
17859
17990
  }
17860
17991
 
17861
17992
  [data-style='zen-sumi'] [data-menu-trigger] [data-menu-arrow] {
17862
- color:var(--paper-edge);
17993
+ color:var(--ink-mute);
17863
17994
  }
17864
17995
 
17865
17996
  /* =============================================================================
@@ -17876,7 +18007,7 @@ button[data-step-number] {
17876
18007
  ============================================================================= */
17877
18008
 
17878
18009
  [data-style='zen-sumi'] [data-menu-item] {
17879
- border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-soft);
18010
+ border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-mute);
17880
18011
  }
17881
18012
 
17882
18013
  [data-style='zen-sumi'] [data-menu-item]:hover:not(:disabled),
@@ -17886,15 +18017,15 @@ button[data-step-number] {
17886
18017
 
17887
18018
  /* Item elements */
17888
18019
  [data-style='zen-sumi'] [data-menu-item] [data-item-icon] {
17889
- color:var(--paper-edge);
18020
+ color:var(--ink-mute);
17890
18021
  }
17891
18022
 
17892
18023
  [data-style='zen-sumi'] [data-menu-item]:hover:not(:disabled) [data-item-icon] {
17893
- color:var(--ink-soft);
18024
+ color:var(--ink-mute);
17894
18025
  }
17895
18026
 
17896
18027
  [data-style='zen-sumi'] [data-menu-item] [data-item-description] {
17897
- color:var(--paper-edge);
18028
+ color:var(--ink-mute);
17898
18029
  }
17899
18030
 
17900
18031
  /* =============================================================================
@@ -17902,7 +18033,7 @@ button[data-step-number] {
17902
18033
  ============================================================================= */
17903
18034
 
17904
18035
  [data-style='zen-sumi'] [data-menu-group] {
17905
- color:var(--paper-edge);
18036
+ color:var(--ink-mute);
17906
18037
  }
17907
18038
 
17908
18039
  /* =============================================================================
@@ -17921,7 +18052,7 @@ button[data-step-number] {
17921
18052
  */
17922
18053
 
17923
18054
  [data-style='zen-sumi'] [data-dropdown-trigger] {
17924
- border-width:1px;background-color:transparent;background-image:none;border-color:var(--paper-mute);color:var(--ink-soft);
18055
+ border-width:1px;background-color:transparent;background-image:none;border-color:var(--paper-mute);color:var(--ink-mute);
17925
18056
  }
17926
18057
 
17927
18058
  [data-style='zen-sumi'] [data-dropdown-trigger]:hover:not(:disabled) {
@@ -17938,11 +18069,11 @@ button[data-step-number] {
17938
18069
  }
17939
18070
 
17940
18071
  [data-style='zen-sumi'] [data-dropdown-trigger] [data-dropdown-icon] {
17941
- color:var(--paper-edge);
18072
+ color:var(--ink-mute);
17942
18073
  }
17943
18074
 
17944
18075
  [data-style='zen-sumi'] [data-dropdown-trigger] [data-dropdown-arrow] {
17945
- color:var(--paper-edge);
18076
+ color:var(--ink-mute);
17946
18077
  }
17947
18078
 
17948
18079
  [data-style='zen-sumi'] [data-dropdown-panel] {
@@ -17951,7 +18082,7 @@ button[data-step-number] {
17951
18082
  }
17952
18083
 
17953
18084
  [data-style='zen-sumi'] [data-dropdown-option] {
17954
- color:var(--ink-soft);
18085
+ color:var(--ink-mute);
17955
18086
  }
17956
18087
 
17957
18088
  [data-style='zen-sumi'] [data-dropdown-option]:hover:not(:disabled),
@@ -18220,7 +18351,7 @@ button[data-step-number] {
18220
18351
  ============================================================================= */
18221
18352
 
18222
18353
  [data-style='zen-sumi'] [data-table-header] th {
18223
- border-bottom-width:1px;background-color:transparent;color:var(--ink-soft);border-color:var(--paper-mute);
18354
+ border-bottom-width:1px;background-color:transparent;color:var(--ink-mute);border-color:var(--paper-mute);
18224
18355
  font-size: 0.6875rem;
18225
18356
  font-weight: 600;
18226
18357
  letter-spacing: 0.05em;
@@ -18254,7 +18385,7 @@ button[data-step-number] {
18254
18385
  ============================================================================= */
18255
18386
 
18256
18387
  [data-style='zen-sumi'] [data-table-caption] {
18257
- color:var(--ink-soft);
18388
+ color:var(--ink-mute);
18258
18389
  }
18259
18390
 
18260
18391
  /* =============================================================================
@@ -18262,7 +18393,7 @@ button[data-step-number] {
18262
18393
  ============================================================================= */
18263
18394
 
18264
18395
  [data-style='zen-sumi'] [data-table-row] {
18265
- border-bottom-width:1px;color:var(--ink-soft);border-color:var(--paper-mute);
18396
+ border-bottom-width:1px;color:var(--ink-mute);border-color:var(--paper-mute);
18266
18397
  }
18267
18398
 
18268
18399
  [data-style='zen-sumi'] [data-table-row]:hover {
@@ -18301,7 +18432,7 @@ button[data-step-number] {
18301
18432
  ============================================================================= */
18302
18433
 
18303
18434
  [data-style='zen-sumi'] [data-table-empty] {
18304
- color:var(--ink-soft);
18435
+ color:var(--ink-mute);
18305
18436
  }
18306
18437
 
18307
18438
  /* =============================================================================
@@ -18309,7 +18440,7 @@ button[data-step-number] {
18309
18440
  ============================================================================= */
18310
18441
 
18311
18442
  [data-style='zen-sumi'] [data-table-cell] [data-cell-icon] {
18312
- color:var(--ink-soft);
18443
+ color:var(--ink-mute);
18313
18444
  }
18314
18445
 
18315
18446
  [data-style='zen-sumi'] [data-table-row][data-selected='true'] [data-cell-icon] {
@@ -18326,7 +18457,7 @@ button[data-step-number] {
18326
18457
  }
18327
18458
 
18328
18459
  [data-style='zen-sumi'] [data-table-responsive] [data-table-cell]::before {
18329
- color:var(--ink-soft);
18460
+ color:var(--ink-mute);
18330
18461
  }
18331
18462
 
18332
18463
  [data-style='zen-sumi']
@@ -18501,11 +18632,11 @@ button[data-step-number] {
18501
18632
  }
18502
18633
 
18503
18634
  [data-style='zen-sumi'] [data-timeline-item][data-completed] [data-timeline-circle] {
18504
- border-color:var(--primary);color:var(--primary);
18635
+ border-color:var(--primary);color:var(--ink);
18505
18636
  }
18506
18637
 
18507
18638
  [data-style='zen-sumi'] [data-timeline-item][data-active] [data-timeline-circle] {
18508
- border-color:var(--primary);color:var(--primary);
18639
+ border-color:var(--primary);color:var(--ink);
18509
18640
  }
18510
18641
 
18511
18642
  /* =============================================================================
@@ -18517,7 +18648,7 @@ button[data-step-number] {
18517
18648
  }
18518
18649
 
18519
18650
  [data-style='zen-sumi'] [data-timeline-item][data-completed] [data-timeline-connector] {
18520
- background-color:var(--primary);
18651
+ background-color: var(--primary);
18521
18652
  }
18522
18653
 
18523
18654
  /* =============================================================================
@@ -18711,8 +18842,8 @@ button[data-step-number] {
18711
18842
  }
18712
18843
 
18713
18844
  [data-style='zen-sumi'] [data-card][data-variant='primary'] [data-card-body] {
18714
- color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);
18715
- }[data-mode="dark"][data-style="zen-sumi"] [data-card][data-variant="primary"] [data-card-body],[data-mode="dark"] [data-style="zen-sumi"] [data-card][data-variant="primary"] [data-card-body]{color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);}
18845
+ color:rgb(22 22 22 / 0.8);
18846
+ }
18716
18847
 
18717
18848
  /* Secondary */
18718
18849
  [data-style='zen-sumi'] [data-card][data-variant='secondary'] {
@@ -18726,8 +18857,8 @@ button[data-step-number] {
18726
18857
  }
18727
18858
 
18728
18859
  [data-style='zen-sumi'] [data-card][data-variant='secondary'] [data-card-body] {
18729
- color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);
18730
- }[data-mode="dark"][data-style="zen-sumi"] [data-card][data-variant="secondary"] [data-card-body],[data-mode="dark"] [data-style="zen-sumi"] [data-card][data-variant="secondary"] [data-card-body]{color:color-mix(in srgb, var(--color-primary-50) calc(0.8 * 100%), transparent);}
18860
+ color:rgb(22 22 22 / 0.8);
18861
+ }
18731
18862
 
18732
18863
  /* Tertiary — recessed surface, lighter border */
18733
18864
  [data-style='zen-sumi'] [data-card][data-variant='tertiary'] {