@rokkit/themes 1.3.1 → 1.3.3

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 (87) hide show
  1. package/dist/base/chat.css +264 -0
  2. package/dist/base/message.css +28 -0
  3. package/dist/base.css +293 -0
  4. package/dist/frosted/button.css +10 -4
  5. package/dist/frosted/message.css +4 -4
  6. package/dist/frosted/status-list.css +1 -1
  7. package/dist/frosted/table.css +3 -1
  8. package/dist/frosted/tabs.css +7 -2
  9. package/dist/frosted/toggle.css +7 -2
  10. package/dist/frosted.css +32 -14
  11. package/dist/index.css +431 -75
  12. package/dist/material/button.css +3 -1
  13. package/dist/material/message.css +4 -4
  14. package/dist/material/select.css +3 -1
  15. package/dist/material/status-list.css +1 -1
  16. package/dist/material/table.css +3 -1
  17. package/dist/material/tabs.css +5 -2
  18. package/dist/material/toggle.css +5 -2
  19. package/dist/material.css +24 -12
  20. package/dist/minimal/button.css +3 -1
  21. package/dist/minimal/message.css +4 -4
  22. package/dist/minimal/status-list.css +1 -1
  23. package/dist/minimal/table.css +3 -1
  24. package/dist/minimal/tabs.css +1 -1
  25. package/dist/minimal.css +12 -8
  26. package/dist/rokkit/button.css +3 -1
  27. package/dist/rokkit/message.css +4 -4
  28. package/dist/rokkit/status-list.css +1 -1
  29. package/dist/rokkit/table.css +3 -1
  30. package/dist/rokkit.css +11 -7
  31. package/dist/zen-sumi/button.css +26 -3
  32. package/dist/zen-sumi/chart.css +1 -1
  33. package/dist/zen-sumi/command-palette.css +4 -4
  34. package/dist/zen-sumi/floating-action.css +1 -1
  35. package/dist/zen-sumi/floating-navigation.css +3 -3
  36. package/dist/zen-sumi/input.css +2 -2
  37. package/dist/zen-sumi/message.css +4 -4
  38. package/dist/zen-sumi/range.css +2 -2
  39. package/dist/zen-sumi/search-filter.css +2 -2
  40. package/dist/zen-sumi/status-list.css +3 -3
  41. package/dist/zen-sumi/step-indicator.css +2 -2
  42. package/dist/zen-sumi/tabs.css +1 -1
  43. package/dist/zen-sumi/timeline.css +2 -2
  44. package/dist/zen-sumi/toc.css +5 -3
  45. package/dist/zen-sumi/toolbar.css +1 -1
  46. package/dist/zen-sumi.css +59 -34
  47. package/package.json +3 -3
  48. package/src/base/chat.css +264 -0
  49. package/src/base/index.css +1 -0
  50. package/src/base/message.css +28 -0
  51. package/src/frosted/button.css +10 -4
  52. package/src/frosted/message.css +4 -4
  53. package/src/frosted/status-list.css +1 -1
  54. package/src/frosted/table.css +3 -1
  55. package/src/frosted/tabs.css +7 -2
  56. package/src/frosted/toggle.css +7 -2
  57. package/src/material/button.css +3 -1
  58. package/src/material/message.css +4 -4
  59. package/src/material/select.css +3 -1
  60. package/src/material/status-list.css +1 -1
  61. package/src/material/table.css +3 -1
  62. package/src/material/tabs.css +5 -2
  63. package/src/material/toggle.css +5 -2
  64. package/src/minimal/button.css +3 -1
  65. package/src/minimal/message.css +4 -4
  66. package/src/minimal/status-list.css +1 -1
  67. package/src/minimal/table.css +3 -1
  68. package/src/minimal/tabs.css +1 -1
  69. package/src/rokkit/button.css +3 -1
  70. package/src/rokkit/message.css +4 -4
  71. package/src/rokkit/status-list.css +1 -1
  72. package/src/rokkit/table.css +3 -1
  73. package/src/zen-sumi/button.css +26 -3
  74. package/src/zen-sumi/chart.css +1 -1
  75. package/src/zen-sumi/command-palette.css +4 -4
  76. package/src/zen-sumi/floating-action.css +1 -1
  77. package/src/zen-sumi/floating-navigation.css +3 -3
  78. package/src/zen-sumi/input.css +2 -2
  79. package/src/zen-sumi/message.css +4 -4
  80. package/src/zen-sumi/range.css +2 -2
  81. package/src/zen-sumi/search-filter.css +2 -2
  82. package/src/zen-sumi/status-list.css +3 -3
  83. package/src/zen-sumi/step-indicator.css +2 -2
  84. package/src/zen-sumi/tabs.css +1 -1
  85. package/src/zen-sumi/timeline.css +2 -2
  86. package/src/zen-sumi/toc.css +5 -3
  87. package/src/zen-sumi/toolbar.css +1 -1
package/dist/material/button.css CHANGED
@@ -12,7 +12,9 @@
12
12
  [data-style='material'] [data-button]:not([data-style])[data-variant='default'],
13
13
  [data-style='material'] [data-button][data-style='default']:not([data-variant]),
14
14
  [data-style='material'] [data-button]:not([data-style]):not([data-variant]) {
15
- background-image:none;--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(--paper-mute);color:var(--ink-mute);
15
+ /* ink (not ink-mute): the button label is primary content; ink-mute on the
16
+ paper-mute fill only reaches 4.07:1 in dark mode (AA fail). */
17
+ background-image:none;--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(--paper-mute);color:var(--ink);
16
18
  }
17
19
 
18
20
  [data-style='material'] [data-button][data-style='default'][data-variant='primary'],
package/dist/material/message.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  [data-style='material'] [data-message-root][data-type='error'] {
6
- --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(--error-soft);border-color:var(--error);color:var(--error);
6
+ --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(--error-soft);border-color:var(--error);
7
7
  }
8
8
  [data-style='material'] [data-message-root][data-type='error'] [data-message-icon],
9
9
  [data-style='material'] [data-message-root][data-type='error'] [data-message-dismiss] {
@@ -11,7 +11,7 @@
11
11
  }
12
12
 
13
13
  [data-style='material'] [data-message-root][data-type='warning'] {
14
- --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(--warning-soft);border-color:var(--warning);color:var(--warning);
14
+ --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(--warning-soft);border-color:var(--warning);
15
15
  }
16
16
  [data-style='material'] [data-message-root][data-type='warning'] [data-message-icon],
17
17
  [data-style='material'] [data-message-root][data-type='warning'] [data-message-dismiss] {
@@ -19,7 +19,7 @@
19
19
  }
20
20
 
21
21
  [data-style='material'] [data-message-root][data-type='info'] {
22
- --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(--info-soft);border-color:var(--info);color:var(--info);
22
+ --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(--info-soft);border-color:var(--info);
23
23
  }
24
24
  [data-style='material'] [data-message-root][data-type='info'] [data-message-icon],
25
25
  [data-style='material'] [data-message-root][data-type='info'] [data-message-dismiss] {
@@ -27,7 +27,7 @@
27
27
  }
28
28
 
29
29
  [data-style='material'] [data-message-root][data-type='success'] {
30
- --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(--success-soft);border-color:var(--success);color:var(--success);
30
+ --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(--success-soft);border-color:var(--success);
31
31
  }
32
32
  [data-style='material'] [data-message-root][data-type='success'] [data-message-icon],
33
33
  [data-style='material'] [data-message-root][data-type='success'] [data-message-dismiss] {
package/dist/material/select.css CHANGED
@@ -49,7 +49,9 @@
49
49
  ============================================================================= */
50
50
 
51
51
  [data-style='material'] [data-select-tag] {
52
- border-radius:9999px;background-image:none;--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(--paper-mute);color:var(--ink-mute);
52
+ /* ink (not ink-mute): the tag holds the selected value (primary content);
53
+ ink-mute on the paper-mute chip only reaches 4.07:1 in dark mode (AA fail). */
54
+ border-radius:9999px;background-image:none;--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(--paper-mute);color:var(--ink);
53
55
  }
54
56
 
55
57
  [data-style='material'] [data-select-tag-remove] {
package/dist/material/status-list.css CHANGED
@@ -14,7 +14,7 @@
14
14
  color:var(--warning);
15
15
  }
16
16
  [data-style='material'] [data-status-item][data-status='unknown'] span {
17
- color:var(--paper-edge);
17
+ color:var(--ink-soft);
18
18
  }
19
19
 
20
20
  [data-style='material'] [data-status-item][data-status='pass'] {
package/dist/material/table.css CHANGED
@@ -9,7 +9,9 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='material'] [data-table-header] th {
12
- border-bottom-width:1px;font-weight:500;color:var(--ink-mute);background-color:var(--paper-mute);border-color:var(--paper-edge);
12
+ /* ink (not ink-mute): column headers are primary content; ink-mute on the
13
+ paper-mute header only reaches 4.07:1 in dark mode (AA fail). */
14
+ border-bottom-width:1px;font-weight:500;color:var(--ink);background-color:var(--paper-mute);border-color:var(--paper-edge);
13
15
  }
14
16
 
15
17
  [data-style='material'] [data-table-header-cell][data-sortable='true']:hover {
package/dist/material/tabs.css CHANGED
@@ -20,8 +20,11 @@
20
20
  Tab Triggers
21
21
  ============================================================================= */
22
22
 
23
+ /* ink (not ink-mute): an unselected tab label is an interactive navigation
24
+ target that must read clearly; ink-mute on the paper-mute tab list only
25
+ reaches 4.07:1 in dark mode (AA fail). */
23
26
  [data-style='material'] [data-tabs-trigger] {
24
- border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;background-color:transparent;color:var(--ink-mute);
27
+ border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;background-color:transparent;color:var(--ink);
25
28
  }
26
29
 
27
30
  [data-style='material'] [data-tabs][data-position='after'] [data-tabs-trigger] {
@@ -29,7 +32,7 @@
29
32
  }
30
33
 
31
34
  [data-style='material'] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
32
- background-color:var(--paper-mute);color:var(--ink-mute);
35
+ background-color:var(--paper-mute);color:var(--ink);
33
36
  }
34
37
 
35
38
  /* Selected state */
package/dist/material/toggle.css CHANGED
@@ -16,13 +16,16 @@
16
16
  Toggle Options
17
17
  ============================================================================= */
18
18
 
19
+ /* ink (not ink-mute): an unselected option label is an interactive target
20
+ that must read clearly; ink-mute on the paper-mute container only reaches
21
+ 4.07:1 in dark mode (AA fail). */
19
22
  [data-style='material'] [data-toggle-option] {
20
- border-radius:9999px;color:var(--ink-mute);
23
+ border-radius:9999px;color:var(--ink);
21
24
  }
22
25
 
23
26
  [data-style='material'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
24
27
  [data-style='material'] [data-toggle-option]:focus:not(:disabled):not([data-disabled='true']) {
25
- background-image:none;background-color:var(--paper-mute);color:var(--ink-mute);
28
+ background-image:none;background-color:var(--paper-mute);color:var(--ink);
26
29
  }
27
30
 
28
31
  /* Selected state */
package/dist/material.css CHANGED
@@ -19,7 +19,9 @@
19
19
  [data-style='material'] [data-button]:not([data-style])[data-variant='default'],
20
20
  [data-style='material'] [data-button][data-style='default']:not([data-variant]),
21
21
  [data-style='material'] [data-button]:not([data-style]):not([data-variant]) {
22
- background-image:none;--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(--paper-mute);color:var(--ink-mute);
22
+ /* ink (not ink-mute): the button label is primary content; ink-mute on the
23
+ paper-mute fill only reaches 4.07:1 in dark mode (AA fail). */
24
+ background-image:none;--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(--paper-mute);color:var(--ink);
23
25
  }
24
26
 
25
27
  [data-style='material'] [data-button][data-style='default'][data-variant='primary'],
@@ -461,8 +463,11 @@
461
463
  Tab Triggers
462
464
  ============================================================================= */
463
465
 
466
+ /* ink (not ink-mute): an unselected tab label is an interactive navigation
467
+ target that must read clearly; ink-mute on the paper-mute tab list only
468
+ reaches 4.07:1 in dark mode (AA fail). */
464
469
  [data-style='material'] [data-tabs-trigger] {
465
- border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;background-color:transparent;color:var(--ink-mute);
470
+ border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;background-color:transparent;color:var(--ink);
466
471
  }
467
472
 
468
473
  [data-style='material'] [data-tabs][data-position='after'] [data-tabs-trigger] {
@@ -470,7 +475,7 @@
470
475
  }
471
476
 
472
477
  [data-style='material'] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
473
- background-color:var(--paper-mute);color:var(--ink-mute);
478
+ background-color:var(--paper-mute);color:var(--ink);
474
479
  }
475
480
 
476
481
  /* Selected state */
@@ -547,13 +552,16 @@
547
552
  Toggle Options
548
553
  ============================================================================= */
549
554
 
555
+ /* ink (not ink-mute): an unselected option label is an interactive target
556
+ that must read clearly; ink-mute on the paper-mute container only reaches
557
+ 4.07:1 in dark mode (AA fail). */
550
558
  [data-style='material'] [data-toggle-option] {
551
- border-radius:9999px;color:var(--ink-mute);
559
+ border-radius:9999px;color:var(--ink);
552
560
  }
553
561
 
554
562
  [data-style='material'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
555
563
  [data-style='material'] [data-toggle-option]:focus:not(:disabled):not([data-disabled='true']) {
556
- background-image:none;background-color:var(--paper-mute);color:var(--ink-mute);
564
+ background-image:none;background-color:var(--paper-mute);color:var(--ink);
557
565
  }
558
566
 
559
567
  /* Selected state */
@@ -972,7 +980,9 @@
972
980
  ============================================================================= */
973
981
 
974
982
  [data-style='material'] [data-select-tag] {
975
- border-radius:9999px;background-image:none;--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(--paper-mute);color:var(--ink-mute);
983
+ /* ink (not ink-mute): the tag holds the selected value (primary content);
984
+ ink-mute on the paper-mute chip only reaches 4.07:1 in dark mode (AA fail). */
985
+ border-radius:9999px;background-image:none;--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(--paper-mute);color:var(--ink);
976
986
  }
977
987
 
978
988
  [data-style='material'] [data-select-tag-remove] {
@@ -1319,7 +1329,9 @@
1319
1329
  ============================================================================= */
1320
1330
 
1321
1331
  [data-style='material'] [data-table-header] th {
1322
- border-bottom-width:1px;font-weight:500;color:var(--ink-mute);background-color:var(--paper-mute);border-color:var(--paper-edge);
1332
+ /* ink (not ink-mute): column headers are primary content; ink-mute on the
1333
+ paper-mute header only reaches 4.07:1 in dark mode (AA fail). */
1334
+ border-bottom-width:1px;font-weight:500;color:var(--ink);background-color:var(--paper-mute);border-color:var(--paper-edge);
1323
1335
  }
1324
1336
 
1325
1337
  [data-style='material'] [data-table-header-cell][data-sortable='true']:hover {
@@ -1875,7 +1887,7 @@
1875
1887
  */
1876
1888
 
1877
1889
  [data-style='material'] [data-message-root][data-type='error'] {
1878
- --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(--error-soft);border-color:var(--error);color:var(--error);
1890
+ --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(--error-soft);border-color:var(--error);
1879
1891
  }
1880
1892
  [data-style='material'] [data-message-root][data-type='error'] [data-message-icon],
1881
1893
  [data-style='material'] [data-message-root][data-type='error'] [data-message-dismiss] {
@@ -1883,7 +1895,7 @@
1883
1895
  }
1884
1896
 
1885
1897
  [data-style='material'] [data-message-root][data-type='warning'] {
1886
- --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(--warning-soft);border-color:var(--warning);color:var(--warning);
1898
+ --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(--warning-soft);border-color:var(--warning);
1887
1899
  }
1888
1900
  [data-style='material'] [data-message-root][data-type='warning'] [data-message-icon],
1889
1901
  [data-style='material'] [data-message-root][data-type='warning'] [data-message-dismiss] {
@@ -1891,7 +1903,7 @@
1891
1903
  }
1892
1904
 
1893
1905
  [data-style='material'] [data-message-root][data-type='info'] {
1894
- --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(--info-soft);border-color:var(--info);color:var(--info);
1906
+ --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(--info-soft);border-color:var(--info);
1895
1907
  }
1896
1908
  [data-style='material'] [data-message-root][data-type='info'] [data-message-icon],
1897
1909
  [data-style='material'] [data-message-root][data-type='info'] [data-message-dismiss] {
@@ -1899,7 +1911,7 @@
1899
1911
  }
1900
1912
 
1901
1913
  [data-style='material'] [data-message-root][data-type='success'] {
1902
- --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(--success-soft);border-color:var(--success);color:var(--success);
1914
+ --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(--success-soft);border-color:var(--success);
1903
1915
  }
1904
1916
  [data-style='material'] [data-message-root][data-type='success'] [data-message-icon],
1905
1917
  [data-style='material'] [data-message-root][data-type='success'] [data-message-dismiss] {
@@ -1922,7 +1934,7 @@
1922
1934
  color:var(--warning);
1923
1935
  }
1924
1936
  [data-style='material'] [data-status-item][data-status='unknown'] span {
1925
- color:var(--paper-edge);
1937
+ color:var(--ink-soft);
1926
1938
  }
1927
1939
 
1928
1940
  [data-style='material'] [data-status-item][data-status='pass'] {
package/dist/minimal/button.css CHANGED
@@ -12,7 +12,9 @@
12
12
  [data-style='minimal'] [data-button]:not([data-style])[data-variant='default'],
13
13
  [data-style='minimal'] [data-button][data-style='default']:not([data-variant]),
14
14
  [data-style='minimal'] [data-button]:not([data-style]):not([data-variant]) {
15
- border-width:1px;background-image:none;background-color:var(--paper-mute);border-color:var(--paper-edge);color:var(--ink-mute);
15
+ /* ink (not ink-mute): the button label is primary content; ink-mute on the
16
+ paper-mute fill only reaches 4.07:1 in dark mode (AA fail). */
17
+ border-width:1px;background-image:none;background-color:var(--paper-mute);border-color:var(--paper-edge);color:var(--ink);
16
18
  }
17
19
 
18
20
  [data-style='minimal'] [data-button][data-style='default'][data-variant='primary'],
package/dist/minimal/message.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  [data-style='minimal'] [data-message-root][data-type='error'] {
6
- background-color:var(--error-soft);border-color:var(--error);color:var(--error);
6
+ background-color:var(--error-soft);border-color:var(--error);
7
7
  }
8
8
  [data-style='minimal'] [data-message-root][data-type='error'] [data-message-icon],
9
9
  [data-style='minimal'] [data-message-root][data-type='error'] [data-message-dismiss] {
@@ -11,7 +11,7 @@
11
11
  }
12
12
 
13
13
  [data-style='minimal'] [data-message-root][data-type='warning'] {
14
- background-color:var(--warning-soft);border-color:var(--warning);color:var(--warning);
14
+ background-color:var(--warning-soft);border-color:var(--warning);
15
15
  }
16
16
  [data-style='minimal'] [data-message-root][data-type='warning'] [data-message-icon],
17
17
  [data-style='minimal'] [data-message-root][data-type='warning'] [data-message-dismiss] {
@@ -19,7 +19,7 @@
19
19
  }
20
20
 
21
21
  [data-style='minimal'] [data-message-root][data-type='info'] {
22
- background-color:var(--info-soft);border-color:var(--info);color:var(--info);
22
+ background-color:var(--info-soft);border-color:var(--info);
23
23
  }
24
24
  [data-style='minimal'] [data-message-root][data-type='info'] [data-message-icon],
25
25
  [data-style='minimal'] [data-message-root][data-type='info'] [data-message-dismiss] {
@@ -27,7 +27,7 @@
27
27
  }
28
28
 
29
29
  [data-style='minimal'] [data-message-root][data-type='success'] {
30
- background-color:var(--success-soft);border-color:var(--success);color:var(--success);
30
+ background-color:var(--success-soft);border-color:var(--success);
31
31
  }
32
32
  [data-style='minimal'] [data-message-root][data-type='success'] [data-message-icon],
33
33
  [data-style='minimal'] [data-message-root][data-type='success'] [data-message-dismiss] {
package/dist/minimal/status-list.css CHANGED
@@ -14,7 +14,7 @@
14
14
  color:var(--warning);
15
15
  }
16
16
  [data-style='minimal'] [data-status-item][data-status='unknown'] span {
17
- color:var(--paper-edge);
17
+ color:var(--ink-soft);
18
18
  }
19
19
 
20
20
  [data-style='minimal'] [data-status-item][data-status='pass'] {
package/dist/minimal/table.css CHANGED
@@ -9,7 +9,9 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='minimal'] [data-table-header] th {
12
- border-bottom-width:1px;color:var(--ink-mute);border-color:var(--paper-edge);background-color:var(--paper-mute);
12
+ /* ink (not ink-mute): column headers are primary content; ink-mute on the
13
+ paper-mute header only reaches 4.07:1 in dark mode (AA fail). */
14
+ border-bottom-width:1px;color:var(--ink);border-color:var(--paper-edge);background-color:var(--paper-mute);
13
15
  }
14
16
 
15
17
  [data-style='minimal'] [data-table-header-cell][data-sortable='true']:hover {
package/dist/minimal/tabs.css CHANGED
@@ -131,7 +131,7 @@
131
131
  ============================================================================= */
132
132
 
133
133
  [data-style='minimal'] [data-tabs-trigger] [data-tabs-icon] {
134
- color:var(--paper-edge);
134
+ color:var(--ink-soft);
135
135
  }
136
136
 
137
137
  [data-style='minimal'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
package/dist/minimal.css CHANGED
@@ -19,7 +19,9 @@
19
19
  [data-style='minimal'] [data-button]:not([data-style])[data-variant='default'],
20
20
  [data-style='minimal'] [data-button][data-style='default']:not([data-variant]),
21
21
  [data-style='minimal'] [data-button]:not([data-style]):not([data-variant]) {
22
- border-width:1px;background-image:none;background-color:var(--paper-mute);border-color:var(--paper-edge);color:var(--ink-mute);
22
+ /* ink (not ink-mute): the button label is primary content; ink-mute on the
23
+ paper-mute fill only reaches 4.07:1 in dark mode (AA fail). */
24
+ border-width:1px;background-image:none;background-color:var(--paper-mute);border-color:var(--paper-edge);color:var(--ink);
23
25
  }
24
26
 
25
27
  [data-style='minimal'] [data-button][data-style='default'][data-variant='primary'],
@@ -405,7 +407,7 @@
405
407
  ============================================================================= */
406
408
 
407
409
  [data-style='minimal'] [data-tabs-trigger] [data-tabs-icon] {
408
- color:var(--paper-edge);
410
+ color:var(--ink-soft);
409
411
  }
410
412
 
411
413
  [data-style='minimal'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
@@ -1400,7 +1402,9 @@
1400
1402
  ============================================================================= */
1401
1403
 
1402
1404
  [data-style='minimal'] [data-table-header] th {
1403
- border-bottom-width:1px;color:var(--ink-mute);border-color:var(--paper-edge);background-color:var(--paper-mute);
1405
+ /* ink (not ink-mute): column headers are primary content; ink-mute on the
1406
+ paper-mute header only reaches 4.07:1 in dark mode (AA fail). */
1407
+ border-bottom-width:1px;color:var(--ink);border-color:var(--paper-edge);background-color:var(--paper-mute);
1404
1408
  }
1405
1409
 
1406
1410
  [data-style='minimal'] [data-table-header-cell][data-sortable='true']:hover {
@@ -1948,7 +1952,7 @@
1948
1952
  */
1949
1953
 
1950
1954
  [data-style='minimal'] [data-message-root][data-type='error'] {
1951
- background-color:var(--error-soft);border-color:var(--error);color:var(--error);
1955
+ background-color:var(--error-soft);border-color:var(--error);
1952
1956
  }
1953
1957
  [data-style='minimal'] [data-message-root][data-type='error'] [data-message-icon],
1954
1958
  [data-style='minimal'] [data-message-root][data-type='error'] [data-message-dismiss] {
@@ -1956,7 +1960,7 @@
1956
1960
  }
1957
1961
 
1958
1962
  [data-style='minimal'] [data-message-root][data-type='warning'] {
1959
- background-color:var(--warning-soft);border-color:var(--warning);color:var(--warning);
1963
+ background-color:var(--warning-soft);border-color:var(--warning);
1960
1964
  }
1961
1965
  [data-style='minimal'] [data-message-root][data-type='warning'] [data-message-icon],
1962
1966
  [data-style='minimal'] [data-message-root][data-type='warning'] [data-message-dismiss] {
@@ -1964,7 +1968,7 @@
1964
1968
  }
1965
1969
 
1966
1970
  [data-style='minimal'] [data-message-root][data-type='info'] {
1967
- background-color:var(--info-soft);border-color:var(--info);color:var(--info);
1971
+ background-color:var(--info-soft);border-color:var(--info);
1968
1972
  }
1969
1973
  [data-style='minimal'] [data-message-root][data-type='info'] [data-message-icon],
1970
1974
  [data-style='minimal'] [data-message-root][data-type='info'] [data-message-dismiss] {
@@ -1972,7 +1976,7 @@
1972
1976
  }
1973
1977
 
1974
1978
  [data-style='minimal'] [data-message-root][data-type='success'] {
1975
- background-color:var(--success-soft);border-color:var(--success);color:var(--success);
1979
+ background-color:var(--success-soft);border-color:var(--success);
1976
1980
  }
1977
1981
  [data-style='minimal'] [data-message-root][data-type='success'] [data-message-icon],
1978
1982
  [data-style='minimal'] [data-message-root][data-type='success'] [data-message-dismiss] {
@@ -1995,7 +1999,7 @@
1995
1999
  color:var(--warning);
1996
2000
  }
1997
2001
  [data-style='minimal'] [data-status-item][data-status='unknown'] span {
1998
- color:var(--paper-edge);
2002
+ color:var(--ink-soft);
1999
2003
  }
2000
2004
 
2001
2005
  [data-style='minimal'] [data-status-item][data-status='pass'] {
package/dist/rokkit/button.css CHANGED
@@ -26,7 +26,9 @@
26
26
  [data-style='rokkit'] [data-button]:not([data-style])[data-variant='default'],
27
27
  [data-style='rokkit'] [data-button][data-style='default']:not([data-variant]),
28
28
  [data-style='rokkit'] [data-button]:not([data-style]):not([data-variant]) {
29
- border-width:1px;border-color:var(--paper-edge);color:var(--ink-mute);
29
+ /* ink (not ink-mute): the button label is primary content; ink-mute on the
30
+ paper-mute fill only reaches 4.07:1 in dark mode (AA fail). */
31
+ border-width:1px;border-color:var(--paper-edge);color:var(--ink);
30
32
  background: var(--paper-mute);
31
33
  }
32
34
 
package/dist/rokkit/message.css CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  /* Type colors */
6
6
  [data-style='rokkit'] [data-message-root][data-type='error'] {
7
- background-color:var(--error-soft);border-color:var(--error);color:var(--error);
7
+ background-color:var(--error-soft);border-color:var(--error);
8
8
  }
9
9
  [data-style='rokkit'] [data-message-root][data-type='error'] [data-message-icon] {
10
10
  color:var(--error);
@@ -14,7 +14,7 @@
14
14
  }
15
15
 
16
16
  [data-style='rokkit'] [data-message-root][data-type='warning'] {
17
- background-color:var(--warning-soft);border-color:var(--warning);color:var(--warning);
17
+ background-color:var(--warning-soft);border-color:var(--warning);
18
18
  }
19
19
  [data-style='rokkit'] [data-message-root][data-type='warning'] [data-message-icon] {
20
20
  color:var(--warning);
@@ -24,7 +24,7 @@
24
24
  }
25
25
 
26
26
  [data-style='rokkit'] [data-message-root][data-type='info'] {
27
- background-color:var(--info-soft);border-color:var(--info);color:var(--info);
27
+ background-color:var(--info-soft);border-color:var(--info);
28
28
  }
29
29
  [data-style='rokkit'] [data-message-root][data-type='info'] [data-message-icon] {
30
30
  color:var(--info);
@@ -34,7 +34,7 @@
34
34
  }
35
35
 
36
36
  [data-style='rokkit'] [data-message-root][data-type='success'] {
37
- background-color:var(--success-soft);border-color:var(--success);color:var(--success);
37
+ background-color:var(--success-soft);border-color:var(--success);
38
38
  }
39
39
  [data-style='rokkit'] [data-message-root][data-type='success'] [data-message-icon] {
40
40
  color:var(--success);
package/dist/rokkit/status-list.css CHANGED
@@ -14,7 +14,7 @@
14
14
  color:var(--warning);
15
15
  }
16
16
  [data-style='rokkit'] [data-status-item][data-status='unknown'] span {
17
- color:var(--paper-edge);
17
+ color:var(--ink-soft);
18
18
  }
19
19
 
20
20
  /* ── @rokkit/ui StatusList: text color by status ── */
package/dist/rokkit/table.css CHANGED
@@ -9,7 +9,9 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='rokkit'] [data-table-header] th {
12
- border-bottom-width:1px;color:var(--ink-mute);border-color:var(--paper-edge);background-color:var(--paper-mute);
12
+ /* ink (not ink-mute): column headers are primary content; ink-mute on the
13
+ paper-mute header only reaches 4.07:1 in dark mode (AA fail). */
14
+ border-bottom-width:1px;color:var(--ink);border-color:var(--paper-edge);background-color:var(--paper-mute);
13
15
  }
14
16
 
15
17
  [data-style='rokkit'] [data-table-header-cell][data-sortable='true']:hover {
package/dist/rokkit.css CHANGED
@@ -33,7 +33,9 @@
33
33
  [data-style='rokkit'] [data-button]:not([data-style])[data-variant='default'],
34
34
  [data-style='rokkit'] [data-button][data-style='default']:not([data-variant]),
35
35
  [data-style='rokkit'] [data-button]:not([data-style]):not([data-variant]) {
36
- border-width:1px;border-color:var(--paper-edge);color:var(--ink-mute);
36
+ /* ink (not ink-mute): the button label is primary content; ink-mute on the
37
+ paper-mute fill only reaches 4.07:1 in dark mode (AA fail). */
38
+ border-width:1px;border-color:var(--paper-edge);color:var(--ink);
37
39
  background: var(--paper-mute);
38
40
  }
39
41
 
@@ -1591,7 +1593,9 @@
1591
1593
  ============================================================================= */
1592
1594
 
1593
1595
  [data-style='rokkit'] [data-table-header] th {
1594
- border-bottom-width:1px;color:var(--ink-mute);border-color:var(--paper-edge);background-color:var(--paper-mute);
1596
+ /* ink (not ink-mute): column headers are primary content; ink-mute on the
1597
+ paper-mute header only reaches 4.07:1 in dark mode (AA fail). */
1598
+ border-bottom-width:1px;color:var(--ink);border-color:var(--paper-edge);background-color:var(--paper-mute);
1595
1599
  }
1596
1600
 
1597
1601
  [data-style='rokkit'] [data-table-header-cell][data-sortable='true']:hover {
@@ -2324,7 +2328,7 @@
2324
2328
 
2325
2329
  /* Type colors */
2326
2330
  [data-style='rokkit'] [data-message-root][data-type='error'] {
2327
- background-color:var(--error-soft);border-color:var(--error);color:var(--error);
2331
+ background-color:var(--error-soft);border-color:var(--error);
2328
2332
  }
2329
2333
  [data-style='rokkit'] [data-message-root][data-type='error'] [data-message-icon] {
2330
2334
  color:var(--error);
@@ -2334,7 +2338,7 @@
2334
2338
  }
2335
2339
 
2336
2340
  [data-style='rokkit'] [data-message-root][data-type='warning'] {
2337
- background-color:var(--warning-soft);border-color:var(--warning);color:var(--warning);
2341
+ background-color:var(--warning-soft);border-color:var(--warning);
2338
2342
  }
2339
2343
  [data-style='rokkit'] [data-message-root][data-type='warning'] [data-message-icon] {
2340
2344
  color:var(--warning);
@@ -2344,7 +2348,7 @@
2344
2348
  }
2345
2349
 
2346
2350
  [data-style='rokkit'] [data-message-root][data-type='info'] {
2347
- background-color:var(--info-soft);border-color:var(--info);color:var(--info);
2351
+ background-color:var(--info-soft);border-color:var(--info);
2348
2352
  }
2349
2353
  [data-style='rokkit'] [data-message-root][data-type='info'] [data-message-icon] {
2350
2354
  color:var(--info);
@@ -2354,7 +2358,7 @@
2354
2358
  }
2355
2359
 
2356
2360
  [data-style='rokkit'] [data-message-root][data-type='success'] {
2357
- background-color:var(--success-soft);border-color:var(--success);color:var(--success);
2361
+ background-color:var(--success-soft);border-color:var(--success);
2358
2362
  }
2359
2363
  [data-style='rokkit'] [data-message-root][data-type='success'] [data-message-icon] {
2360
2364
  color:var(--success);
@@ -2379,7 +2383,7 @@
2379
2383
  color:var(--warning);
2380
2384
  }
2381
2385
  [data-style='rokkit'] [data-status-item][data-status='unknown'] span {
2382
- color:var(--paper-edge);
2386
+ color:var(--ink-soft);
2383
2387
  }
2384
2388
 
2385
2389
  /* ── @rokkit/ui StatusList: text color by status ── */
package/dist/zen-sumi/button.css CHANGED
@@ -159,12 +159,35 @@
159
159
  Hover States — darken, no glow
160
160
  ============================================================================= */
161
161
 
162
- [data-style='zen-sumi']
163
- [data-button][data-style='default']:hover:not(:disabled):not([data-disabled]),
164
- [data-style='zen-sumi'] [data-button]:not([data-style]):hover:not(:disabled):not([data-disabled]) {
162
+ /* Default / unspecified variant — the ink fill stays inky on hover. */
163
+ [data-style='zen-sumi'] [data-button][data-style='default'][data-variant='default']:hover:not(:disabled):not([data-disabled]),
164
+ [data-style='zen-sumi'] [data-button][data-style='default']:not([data-variant]):hover:not(:disabled):not([data-disabled]),
165
+ [data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='default']:hover:not(:disabled):not([data-disabled]),
166
+ [data-style='zen-sumi'] [data-button]:not([data-style]):not([data-variant]):hover:not(:disabled):not([data-disabled]) {
165
167
  background-image:none;background-color:var(--ink);
166
168
  }
167
169
 
170
+ /* Filled colored variants — darken the fill, keep the on-color label.
171
+ The old rule flipped these to bg-ink, which put zen-sumi's near-black
172
+ on-primary / on-accent label on a near-black background (invisible in
173
+ light mode). Darkening the variant's own fill preserves contrast. */
174
+ [data-style='zen-sumi'] [data-button][data-style='default'][data-variant='primary']:hover:not(:disabled):not([data-disabled]),
175
+ [data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='primary']:hover:not(:disabled):not([data-disabled]) {
176
+ background-color: color-mix(in oklab, var(--primary) 88%, black);
177
+ }
178
+
179
+ [data-style='zen-sumi'] [data-button][data-style='default'][data-variant='secondary']:hover:not(:disabled):not([data-disabled]),
180
+ [data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='secondary']:hover:not(:disabled):not([data-disabled]),
181
+ [data-style='zen-sumi'] [data-button][data-style='default'][data-variant='accent']:hover:not(:disabled):not([data-disabled]),
182
+ [data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='accent']:hover:not(:disabled):not([data-disabled]) {
183
+ background-color: color-mix(in oklab, var(--accent) 88%, black);
184
+ }
185
+
186
+ [data-style='zen-sumi'] [data-button][data-style='default'][data-variant='danger']:hover:not(:disabled):not([data-disabled]),
187
+ [data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='danger']:hover:not(:disabled):not([data-disabled]) {
188
+ background-color: color-mix(in oklab, var(--danger) 88%, black);
189
+ }
190
+
168
191
  [data-style='zen-sumi']
169
192
  [data-button][data-style='outline']:hover:not(:disabled):not([data-disabled]) {
170
193
  background-image:none;background-color:var(--paper-soft);border-color:var(--ink-soft);
package/dist/zen-sumi/chart.css CHANGED
@@ -37,5 +37,5 @@
37
37
  }
38
38
 
39
39
  [data-style='zen-sumi'] [data-facet-title] {
40
- color:var(--paper-edge);
40
+ color:var(--ink-soft);
41
41
  }
package/dist/zen-sumi/command-palette.css CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
  [data-style='zen-sumi'] [data-command-input] {
18
18
  color:var(--ink-mute);
19
- }[data-style='zen-sumi'] [data-command-input]::placeholder{color:var(--paper-edge);}
19
+ }[data-style='zen-sumi'] [data-command-input]::placeholder{color:var(--ink-soft);}
20
20
 
21
21
  [data-style='zen-sumi'] [data-command-item] {
22
22
  color:var(--ink-soft);
@@ -27,13 +27,13 @@
27
27
  }
28
28
 
29
29
  [data-style='zen-sumi'] [data-command-shortcut] {
30
- color:var(--paper-edge);
30
+ color:var(--ink-soft);
31
31
  }
32
32
 
33
33
  [data-style='zen-sumi'] [data-command-label] {
34
- font-size:0.75rem;line-height:1rem;font-weight:500;color:var(--paper-edge);
34
+ font-size:0.75rem;line-height:1rem;font-weight:500;color:var(--ink-soft);
35
35
  }
36
36
 
37
37
  [data-style='zen-sumi'] [data-command-empty] {
38
- color:var(--paper-edge);
38
+ color:var(--ink-soft);
39
39
  }
package/dist/zen-sumi/floating-action.css CHANGED
@@ -52,7 +52,7 @@
52
52
 
53
53
  /* Item icon */
54
54
  [data-style='zen-sumi'] [data-fab-item] [data-fab-item-icon] {
55
- color:var(--paper-edge);
55
+ color:var(--ink-soft);
56
56
  }
57
57
 
58
58
  [data-style='zen-sumi'] [data-fab-item]:hover:not(:disabled) [data-fab-item-icon] {