@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
@@ -4,7 +4,7 @@
4
4
 
5
5
  /* Type colors */
6
6
  [data-style='rokkit'] [data-message-root][data-type='error'] {
7
- @apply bg-error-soft border-error text-error;
7
+ @apply bg-error-soft border-error;
8
8
  }
9
9
  [data-style='rokkit'] [data-message-root][data-type='error'] [data-message-icon] {
10
10
  @apply text-error;
@@ -14,7 +14,7 @@
14
14
  }
15
15
 
16
16
  [data-style='rokkit'] [data-message-root][data-type='warning'] {
17
- @apply bg-warning-soft border-warning text-warning;
17
+ @apply bg-warning-soft border-warning;
18
18
  }
19
19
  [data-style='rokkit'] [data-message-root][data-type='warning'] [data-message-icon] {
20
20
  @apply text-warning;
@@ -24,7 +24,7 @@
24
24
  }
25
25
 
26
26
  [data-style='rokkit'] [data-message-root][data-type='info'] {
27
- @apply bg-info-soft border-info text-info;
27
+ @apply bg-info-soft border-info;
28
28
  }
29
29
  [data-style='rokkit'] [data-message-root][data-type='info'] [data-message-icon] {
30
30
  @apply text-info;
@@ -34,7 +34,7 @@
34
34
  }
35
35
 
36
36
  [data-style='rokkit'] [data-message-root][data-type='success'] {
37
- @apply bg-success-soft border-success text-success;
37
+ @apply bg-success-soft border-success;
38
38
  }
39
39
  [data-style='rokkit'] [data-message-root][data-type='success'] [data-message-icon] {
40
40
  @apply text-success;
@@ -14,7 +14,7 @@
14
14
  @apply text-warning;
15
15
  }
16
16
  [data-style='rokkit'] [data-status-item][data-status='unknown'] span {
17
- @apply text-paper-edge;
17
+ @apply text-ink-soft;
18
18
  }
19
19
 
20
20
  /* ── @rokkit/ui StatusList: text color by status ── */
@@ -9,7 +9,9 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='rokkit'] [data-table-header] th {
12
- @apply text-ink-mute border-paper-edge border-b bg-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
+ @apply text-ink border-paper-edge border-b bg-paper-mute;
13
15
  }
14
16
 
15
17
  [data-style='rokkit'] [data-table-header-cell][data-sortable='true']:hover {
@@ -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
  @apply bg-ink bg-none;
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
  @apply bg-paper-soft border-ink-soft bg-none;
@@ -37,5 +37,5 @@
37
37
  }
38
38
 
39
39
  [data-style='zen-sumi'] [data-facet-title] {
40
- @apply text-paper-edge;
40
+ @apply text-ink-soft;
41
41
  }
@@ -15,7 +15,7 @@
15
15
  }
16
16
 
17
17
  [data-style='zen-sumi'] [data-command-input] {
18
- @apply text-ink-mute placeholder:text-paper-edge;
18
+ @apply text-ink-mute placeholder:text-ink-soft;
19
19
  }
20
20
 
21
21
  [data-style='zen-sumi'] [data-command-item] {
@@ -27,13 +27,13 @@
27
27
  }
28
28
 
29
29
  [data-style='zen-sumi'] [data-command-shortcut] {
30
- @apply text-paper-edge;
30
+ @apply text-ink-soft;
31
31
  }
32
32
 
33
33
  [data-style='zen-sumi'] [data-command-label] {
34
- @apply text-paper-edge text-xs font-medium;
34
+ @apply text-ink-soft text-xs font-medium;
35
35
  }
36
36
 
37
37
  [data-style='zen-sumi'] [data-command-empty] {
38
- @apply text-paper-edge;
38
+ @apply text-ink-soft;
39
39
  }
@@ -52,7 +52,7 @@
52
52
 
53
53
  /* Item icon */
54
54
  [data-style='zen-sumi'] [data-fab-item] [data-fab-item-icon] {
55
- @apply text-paper-edge;
55
+ @apply text-ink-soft;
56
56
  }
57
57
 
58
58
  [data-style='zen-sumi'] [data-fab-item]:hover:not(:disabled) [data-fab-item-icon] {
@@ -20,11 +20,11 @@
20
20
  ============================================================================= */
21
21
 
22
22
  [data-style='zen-sumi'] [data-floating-nav-title] {
23
- @apply text-paper-edge;
23
+ @apply text-ink-soft;
24
24
  }
25
25
 
26
26
  [data-style='zen-sumi'] [data-floating-nav-pin] {
27
- @apply text-paper-edge;
27
+ @apply text-ink-soft;
28
28
  }
29
29
 
30
30
  [data-style='zen-sumi'] [data-floating-nav-pin]:hover {
@@ -58,7 +58,7 @@
58
58
 
59
59
  /* Icon */
60
60
  [data-style='zen-sumi'] [data-floating-nav-icon] {
61
- @apply text-paper-edge;
61
+ @apply text-ink-soft;
62
62
  }
63
63
 
64
64
  [data-style='zen-sumi'] [data-floating-nav-item][data-active] [data-floating-nav-icon] {
@@ -140,7 +140,7 @@
140
140
 
141
141
  /* Description */
142
142
  [data-style='zen-sumi'] [data-description] {
143
- @apply text-paper-edge mt-0.5 text-xs;
143
+ @apply text-ink-soft mt-0.5 text-xs;
144
144
  }
145
145
 
146
146
  /* Message */
@@ -150,7 +150,7 @@
150
150
 
151
151
  /* Checkbox */
152
152
  [data-style='zen-sumi'] [data-checkbox-icon] {
153
- @apply text-paper-edge text-lg;
153
+ @apply text-ink-soft text-lg;
154
154
  }
155
155
 
156
156
  [data-style='zen-sumi']
@@ -5,7 +5,7 @@
5
5
  */
6
6
 
7
7
  [data-style='zen-sumi'] [data-message-root][data-type='error'] {
8
- @apply bg-error-soft border-error-soft text-error;
8
+ @apply bg-error-soft border-error-soft;
9
9
  }
10
10
  [data-style='zen-sumi'] [data-message-root][data-type='error'] [data-message-icon],
11
11
  [data-style='zen-sumi'] [data-message-root][data-type='error'] [data-message-dismiss] {
@@ -13,7 +13,7 @@
13
13
  }
14
14
 
15
15
  [data-style='zen-sumi'] [data-message-root][data-type='warning'] {
16
- @apply bg-warning-soft border-warning-soft text-warning;
16
+ @apply bg-warning-soft border-warning-soft;
17
17
  }
18
18
  [data-style='zen-sumi'] [data-message-root][data-type='warning'] [data-message-icon],
19
19
  [data-style='zen-sumi'] [data-message-root][data-type='warning'] [data-message-dismiss] {
@@ -21,7 +21,7 @@
21
21
  }
22
22
 
23
23
  [data-style='zen-sumi'] [data-message-root][data-type='info'] {
24
- @apply bg-info-soft border-info-soft text-info;
24
+ @apply bg-info-soft border-info-soft;
25
25
  }
26
26
  [data-style='zen-sumi'] [data-message-root][data-type='info'] [data-message-icon],
27
27
  [data-style='zen-sumi'] [data-message-root][data-type='info'] [data-message-dismiss] {
@@ -29,7 +29,7 @@
29
29
  }
30
30
 
31
31
  [data-style='zen-sumi'] [data-message-root][data-type='success'] {
32
- @apply bg-success-soft border-success-soft text-success;
32
+ @apply bg-success-soft border-success-soft;
33
33
  }
34
34
  [data-style='zen-sumi'] [data-message-root][data-type='success'] [data-message-icon],
35
35
  [data-style='zen-sumi'] [data-message-root][data-type='success'] [data-message-dismiss] {
@@ -38,7 +38,7 @@
38
38
  ============================================================================= */
39
39
 
40
40
  [data-style='zen-sumi'] [data-range-tick] {
41
- @apply text-paper-edge;
41
+ @apply text-ink-soft;
42
42
  }
43
43
 
44
44
  [data-style='zen-sumi'] [data-tick-bar] {
@@ -46,7 +46,7 @@
46
46
  }
47
47
 
48
48
  [data-style='zen-sumi'] [data-tick-label] {
49
- @apply text-paper-edge;
49
+ @apply text-ink-soft;
50
50
  }
51
51
 
52
52
  /* =============================================================================
@@ -25,7 +25,7 @@
25
25
  ============================================================================= */
26
26
 
27
27
  [data-style='zen-sumi'] [data-search-clear] {
28
- @apply text-paper-edge;
28
+ @apply text-ink-soft;
29
29
  }
30
30
 
31
31
  [data-style='zen-sumi'] [data-search-clear]:hover {
@@ -41,7 +41,7 @@
41
41
  }
42
42
 
43
43
  [data-style='zen-sumi'] [data-search-tag-remove] {
44
- @apply text-paper-edge;
44
+ @apply text-ink-soft;
45
45
  }
46
46
 
47
47
  [data-style='zen-sumi'] [data-search-tag-remove]:hover {
@@ -14,7 +14,7 @@
14
14
  @apply text-warning;
15
15
  }
16
16
  [data-style='zen-sumi'] [data-status-item][data-status='unknown'] span {
17
- @apply text-paper-edge;
17
+ @apply text-ink-soft;
18
18
  }
19
19
 
20
20
  [data-style='zen-sumi'] [data-status-item][data-status='pass'] {
@@ -27,7 +27,7 @@
27
27
  @apply text-warning;
28
28
  }
29
29
  [data-style='zen-sumi'] [data-status-item][data-status='unknown'] {
30
- @apply text-paper-edge;
30
+ @apply text-ink-soft;
31
31
  }
32
32
 
33
33
  /* ── @rokkit/forms StatusList: group headers by severity ── */
@@ -62,5 +62,5 @@
62
62
 
63
63
  /* Count badge */
64
64
  [data-style='zen-sumi'] [data-status-count] {
65
- @apply text-paper-edge bg-none font-medium;
65
+ @apply text-ink-soft bg-none font-medium;
66
66
  }
@@ -11,7 +11,7 @@
11
11
  }
12
12
 
13
13
  [data-style='zen-sumi'] [data-step-item][data-step-state='upcoming'] [data-step-number] {
14
- @apply bg-transparent border-paper-mute text-paper-edge bg-none;
14
+ @apply bg-transparent border-paper-mute text-ink-soft bg-none;
15
15
  }
16
16
 
17
17
  /* ── Labels ── */
@@ -25,7 +25,7 @@
25
25
  }
26
26
 
27
27
  [data-style='zen-sumi'] [data-step-item][data-step-state='upcoming'] [data-step-label] {
28
- @apply text-paper-edge bg-none;
28
+ @apply text-ink-soft bg-none;
29
29
  }
30
30
 
31
31
  /* ── Connector lines ── */
@@ -58,7 +58,7 @@
58
58
  ============================================================================= */
59
59
 
60
60
  [data-style='zen-sumi'] [data-tabs-trigger] [data-tabs-icon] {
61
- @apply text-paper-edge;
61
+ @apply text-ink-soft;
62
62
  }
63
63
 
64
64
  [data-style='zen-sumi'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
@@ -10,7 +10,7 @@
10
10
  ============================================================================= */
11
11
 
12
12
  [data-style='zen-sumi'] [data-timeline-circle] {
13
- @apply border-paper-mute text-paper-edge;
13
+ @apply border-paper-mute text-ink-soft;
14
14
  }
15
15
 
16
16
  [data-style='zen-sumi'] [data-timeline-item][data-completed] [data-timeline-circle] {
@@ -42,5 +42,5 @@
42
42
  }
43
43
 
44
44
  [data-style='zen-sumi'] [data-timeline-description] {
45
- @apply text-paper-edge;
45
+ @apply text-ink-soft;
46
46
  }
@@ -1,7 +1,7 @@
1
1
  /* TableOfContents — Zen-Sumi theme */
2
2
 
3
3
  [data-style='zen-sumi'] [data-toc] [data-toc-label] {
4
- @apply text-paper-edge;
4
+ @apply text-ink-mute;
5
5
  font-size: 0.6875rem;
6
6
  font-weight: 600;
7
7
  letter-spacing: 0.05em;
@@ -9,12 +9,14 @@
9
9
  }
10
10
 
11
11
  [data-style='zen-sumi'] [data-toc] [data-toc-item] {
12
- @apply text-paper-edge;
12
+ /* Readable secondary text — NOT paper-edge (a border token that renders as a
13
+ faint 0.85 grey in light and a near-black 0.04 in dark → invisible). */
14
+ @apply text-ink-mute;
13
15
  }
14
16
 
15
17
  [data-style='zen-sumi'] [data-toc] [data-toc-item]:hover,
16
18
  [data-style='zen-sumi'] [data-toc] [data-toc-item][data-toc-focused] {
17
- @apply text-ink-mute outline-none;
19
+ @apply text-ink outline-none;
18
20
  }
19
21
 
20
22
  [data-style='zen-sumi'] [data-toc] [data-toc-item][data-toc-active] {
@@ -62,7 +62,7 @@
62
62
  ============================================================================= */
63
63
 
64
64
  [data-style='zen-sumi'] [data-toolbar-item] [data-toolbar-icon] {
65
- @apply text-paper-edge;
65
+ @apply text-ink-soft;
66
66
  }
67
67
 
68
68
  [data-style='zen-sumi'] [data-toolbar-item]:hover:not(:disabled) [data-toolbar-icon] {