@rokkit/themes 1.0.5 → 1.1.1

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 (155) hide show
  1. package/build.mjs +4 -2
  2. package/package.json +3 -2
  3. package/src/base/carousel.css +2 -1
  4. package/src/base/code-block.css +76 -0
  5. package/src/base/display.css +16 -8
  6. package/src/base/frame.css +36 -0
  7. package/src/base/index.css +2 -0
  8. package/src/base/input.css +49 -10
  9. package/src/base/nav-content.css +3 -3
  10. package/src/base/stepper.css +14 -7
  11. package/src/base/tabs.css +15 -2
  12. package/src/base/typography.css +32 -13
  13. package/src/frosted/button.css +27 -27
  14. package/src/frosted/card.css +8 -8
  15. package/src/frosted/chart.css +6 -6
  16. package/src/frosted/code-block.css +33 -0
  17. package/src/frosted/dropdown.css +9 -9
  18. package/src/frosted/floating-action.css +10 -10
  19. package/src/frosted/floating-navigation.css +13 -13
  20. package/src/frosted/frame.css +17 -0
  21. package/src/frosted/index.css +2 -0
  22. package/src/frosted/input.css +16 -16
  23. package/src/frosted/list.css +25 -25
  24. package/src/frosted/menu.css +13 -13
  25. package/src/frosted/message.css +8 -8
  26. package/src/frosted/range.css +8 -8
  27. package/src/frosted/search-filter.css +8 -8
  28. package/src/frosted/select.css +31 -31
  29. package/src/frosted/status-list.css +17 -17
  30. package/src/frosted/step-indicator.css +8 -8
  31. package/src/frosted/swatch.css +3 -3
  32. package/src/frosted/switch.css +3 -3
  33. package/src/frosted/table.css +16 -16
  34. package/src/frosted/tabs.css +8 -8
  35. package/src/frosted/timeline.css +5 -5
  36. package/src/frosted/toc.css +4 -4
  37. package/src/frosted/toggle.css +7 -7
  38. package/src/frosted/toolbar.css +15 -15
  39. package/src/frosted/tree.css +19 -19
  40. package/src/material/button.css +29 -29
  41. package/src/material/card.css +12 -12
  42. package/src/material/chart.css +6 -6
  43. package/src/material/code-block.css +33 -0
  44. package/src/material/dropdown.css +11 -11
  45. package/src/material/floating-action.css +10 -10
  46. package/src/material/floating-navigation.css +13 -13
  47. package/src/material/frame.css +17 -0
  48. package/src/material/index.css +2 -0
  49. package/src/material/input.css +21 -21
  50. package/src/material/list.css +23 -23
  51. package/src/material/menu.css +16 -16
  52. package/src/material/message.css +8 -8
  53. package/src/material/range.css +8 -8
  54. package/src/material/search-filter.css +8 -8
  55. package/src/material/select.css +31 -31
  56. package/src/material/status-list.css +17 -17
  57. package/src/material/step-indicator.css +8 -8
  58. package/src/material/swatch.css +3 -3
  59. package/src/material/switch.css +6 -6
  60. package/src/material/table.css +16 -16
  61. package/src/material/tabs.css +7 -7
  62. package/src/material/timeline.css +5 -5
  63. package/src/material/toc.css +4 -4
  64. package/src/material/toggle.css +6 -6
  65. package/src/material/toolbar.css +11 -11
  66. package/src/material/tree.css +17 -17
  67. package/src/minimal/button.css +30 -30
  68. package/src/minimal/card.css +13 -13
  69. package/src/minimal/chart.css +6 -6
  70. package/src/minimal/code-block.css +33 -0
  71. package/src/minimal/dropdown.css +11 -11
  72. package/src/minimal/floating-action.css +10 -10
  73. package/src/minimal/floating-navigation.css +12 -12
  74. package/src/minimal/frame.css +17 -0
  75. package/src/minimal/index.css +2 -0
  76. package/src/minimal/input.css +24 -24
  77. package/src/minimal/list.css +52 -26
  78. package/src/minimal/menu.css +15 -15
  79. package/src/minimal/message.css +8 -8
  80. package/src/minimal/range.css +7 -7
  81. package/src/minimal/search-filter.css +8 -8
  82. package/src/minimal/select.css +27 -27
  83. package/src/minimal/status-list.css +17 -17
  84. package/src/minimal/step-indicator.css +8 -8
  85. package/src/minimal/swatch.css +3 -3
  86. package/src/minimal/switch.css +6 -6
  87. package/src/minimal/table.css +16 -16
  88. package/src/minimal/tabs.css +14 -14
  89. package/src/minimal/timeline.css +4 -4
  90. package/src/minimal/toc.css +4 -4
  91. package/src/minimal/toggle.css +7 -7
  92. package/src/minimal/toolbar.css +14 -14
  93. package/src/minimal/tree.css +24 -18
  94. package/src/rokkit/avatar.css +6 -6
  95. package/src/rokkit/badge.css +5 -5
  96. package/src/rokkit/button.css +55 -37
  97. package/src/rokkit/card.css +11 -11
  98. package/src/rokkit/chart.css +6 -6
  99. package/src/rokkit/code-block.css +33 -0
  100. package/src/rokkit/connector.css +1 -1
  101. package/src/rokkit/divider.css +5 -5
  102. package/src/rokkit/dropdown.css +11 -11
  103. package/src/rokkit/floating-action.css +11 -11
  104. package/src/rokkit/floating-navigation.css +15 -15
  105. package/src/rokkit/frame.css +17 -0
  106. package/src/rokkit/grid.css +8 -8
  107. package/src/rokkit/index.css +2 -0
  108. package/src/rokkit/input.css +17 -17
  109. package/src/rokkit/list.css +24 -24
  110. package/src/rokkit/menu.css +14 -14
  111. package/src/rokkit/message.css +12 -12
  112. package/src/rokkit/range.css +10 -10
  113. package/src/rokkit/search-filter.css +8 -8
  114. package/src/rokkit/select.css +34 -34
  115. package/src/rokkit/status-list.css +17 -17
  116. package/src/rokkit/step-indicator.css +8 -8
  117. package/src/rokkit/swatch.css +3 -3
  118. package/src/rokkit/switch.css +6 -6
  119. package/src/rokkit/table.css +16 -16
  120. package/src/rokkit/tabs.css +31 -28
  121. package/src/rokkit/timeline.css +5 -5
  122. package/src/rokkit/toc.css +4 -4
  123. package/src/rokkit/toggle.css +21 -10
  124. package/src/rokkit/toolbar.css +15 -15
  125. package/src/rokkit/tooltip.css +1 -1
  126. package/src/rokkit/tree.css +23 -23
  127. package/src/rokkit/upload-progress.css +18 -18
  128. package/src/rokkit/upload-target.css +8 -8
  129. package/src/zen-sumi/button.css +29 -29
  130. package/src/zen-sumi/card.css +12 -12
  131. package/src/zen-sumi/chart.css +6 -6
  132. package/src/zen-sumi/code-block.css +35 -0
  133. package/src/zen-sumi/dropdown.css +10 -10
  134. package/src/zen-sumi/floating-action.css +7 -7
  135. package/src/zen-sumi/floating-navigation.css +11 -11
  136. package/src/zen-sumi/frame.css +20 -0
  137. package/src/zen-sumi/index.css +2 -0
  138. package/src/zen-sumi/input.css +49 -23
  139. package/src/zen-sumi/list.css +20 -20
  140. package/src/zen-sumi/menu.css +14 -14
  141. package/src/zen-sumi/message.css +8 -8
  142. package/src/zen-sumi/range.css +7 -7
  143. package/src/zen-sumi/search-filter.css +8 -8
  144. package/src/zen-sumi/select.css +26 -26
  145. package/src/zen-sumi/status-list.css +17 -17
  146. package/src/zen-sumi/step-indicator.css +8 -8
  147. package/src/zen-sumi/swatch.css +3 -3
  148. package/src/zen-sumi/switch.css +5 -5
  149. package/src/zen-sumi/table.css +16 -16
  150. package/src/zen-sumi/tabs.css +8 -8
  151. package/src/zen-sumi/timeline.css +4 -4
  152. package/src/zen-sumi/toc.css +4 -4
  153. package/src/zen-sumi/toggle.css +18 -10
  154. package/src/zen-sumi/toolbar.css +14 -14
  155. package/src/zen-sumi/tree.css +16 -16
@@ -3,38 +3,38 @@
3
3
  /* ── Number circles ── */
4
4
 
5
5
  [data-style='frosted'] [data-step-item][data-step-state='complete'] [data-step-number] {
6
- @apply bg-primary-z5/80 border-primary-z4/60 text-on-primary bg-none backdrop-blur-sm;
6
+ @apply bg-primary/80 border-primary/60 text-on-primary bg-none backdrop-blur-sm;
7
7
  }
8
8
 
9
9
  [data-style='frosted'] [data-step-item][data-step-state='current'] [data-step-number] {
10
- @apply bg-surface-z2/60 border-primary-z4/70 text-primary-z7 bg-none backdrop-blur-sm ring-3 ring-primary-z5/15;
10
+ @apply bg-paper-mute/60 border-primary/70 text-primary bg-none backdrop-blur-sm ring-3 ring-primary/15;
11
11
  }
12
12
 
13
13
  [data-style='frosted'] [data-step-item][data-step-state='upcoming'] [data-step-number] {
14
- @apply bg-surface-z1/40 border-surface-z3/50 text-surface-z5 bg-none backdrop-blur-sm;
14
+ @apply bg-paper-soft/40 border-paper-mute/50 text-ink-soft bg-none backdrop-blur-sm;
15
15
  }
16
16
 
17
17
  /* ── Labels ── */
18
18
 
19
19
  [data-style='frosted'] [data-step-item][data-step-state='complete'] [data-step-label] {
20
- @apply text-primary-z7 bg-none;
20
+ @apply text-primary bg-none;
21
21
  }
22
22
 
23
23
  [data-style='frosted'] [data-step-item][data-step-state='current'] [data-step-label] {
24
- @apply text-surface-z9 font-semibold bg-none;
24
+ @apply text-ink font-semibold bg-none;
25
25
  }
26
26
 
27
27
  [data-style='frosted'] [data-step-item][data-step-state='upcoming'] [data-step-label] {
28
- @apply text-surface-z5 bg-none;
28
+ @apply text-ink-soft bg-none;
29
29
  }
30
30
 
31
31
  /* ── Connector lines ── */
32
32
 
33
33
  [data-style='frosted'] [data-step-item][data-step-state='complete']::after {
34
- @apply bg-primary-z4/70;
34
+ @apply bg-primary/70;
35
35
  }
36
36
 
37
37
  [data-style='frosted'] [data-step-item][data-step-state='current']::after,
38
38
  [data-style='frosted'] [data-step-item][data-step-state='upcoming']::after {
39
- @apply bg-surface-z3/50;
39
+ @apply bg-paper-mute/50;
40
40
  }
@@ -5,17 +5,17 @@
5
5
 
6
6
  [data-style='frosted'] [data-swatch-item][data-selected] {
7
7
  background: transparent;
8
- @apply outline-secondary-z5;
8
+ @apply outline-accent;
9
9
  }
10
10
 
11
11
  [data-style='frosted']
12
12
  [data-swatch-item]:hover:not(:disabled):not([data-disabled]):not([data-selected]),
13
13
  [data-style='frosted']
14
14
  [data-swatch-item]:focus-visible:not(:disabled):not([data-disabled]):not([data-selected]) {
15
- @apply outline-primary-z4;
15
+ @apply outline-primary;
16
16
  }
17
17
 
18
18
  [data-style='frosted'] [data-swatch-item][data-selected]:focus-visible {
19
- @apply outline-secondary-z6;
19
+ @apply outline-accent;
20
20
  outline-offset: 3px;
21
21
  }
@@ -5,7 +5,7 @@
5
5
  */
6
6
 
7
7
  [data-style='frosted'] [data-switch-track] {
8
- @apply border backdrop-blur-lg bg-surface-z4/25;
8
+ @apply border backdrop-blur-lg bg-paper-edge/25;
9
9
  border-color: rgba(255, 255, 255, 0.2);
10
10
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
11
11
  }
@@ -25,7 +25,7 @@
25
25
 
26
26
  /* On state */
27
27
  [data-style='frosted'] [data-switch][aria-checked='true'] [data-switch-track] {
28
- @apply bg-primary-z5/55;
28
+ @apply bg-primary/55;
29
29
  border-color: rgba(255, 255, 255, 0.28);
30
30
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
31
31
  }
@@ -38,5 +38,5 @@
38
38
  }
39
39
 
40
40
  [data-style='frosted'] [data-switch-label] {
41
- @apply text-surface-z7;
41
+ @apply text-ink-mute;
42
42
  }
@@ -9,25 +9,25 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='frosted'] [data-table-header] th {
12
- @apply text-surface-z6 border-surface-z5/20 border-b bg-surface-z2/80 backdrop-blur-sm;
12
+ @apply text-ink-soft border-ink-soft/20 border-b bg-paper-mute/80 backdrop-blur-sm;
13
13
  }
14
14
 
15
15
  [data-style='frosted'] [data-table-header-cell][data-sortable='true']:hover {
16
- @apply text-surface-z9;
16
+ @apply text-ink;
17
17
  }
18
18
 
19
19
  [data-style='frosted'] [data-table-header-cell][data-sort-order='ascending'],
20
20
  [data-style='frosted'] [data-table-header-cell][data-sort-order='descending'] {
21
- @apply text-primary-z8;
21
+ @apply text-primary;
22
22
  }
23
23
 
24
24
  [data-style='frosted'] [data-table-sort-icon] {
25
- @apply text-surface-z5;
25
+ @apply text-ink-soft;
26
26
  }
27
27
 
28
28
  [data-style='frosted'] [data-table-header-cell][data-sort-order='ascending'] [data-table-sort-icon],
29
29
  [data-style='frosted'] [data-table-header-cell][data-sort-order='descending'] [data-table-sort-icon] {
30
- @apply text-primary-z6;
30
+ @apply text-primary;
31
31
  }
32
32
 
33
33
  /* =============================================================================
@@ -35,7 +35,7 @@
35
35
  ============================================================================= */
36
36
 
37
37
  [data-style='frosted'] [data-table-caption] {
38
- @apply text-surface-z7;
38
+ @apply text-ink-mute;
39
39
  }
40
40
 
41
41
  /* =============================================================================
@@ -43,19 +43,19 @@
43
43
  ============================================================================= */
44
44
 
45
45
  [data-style='frosted'] [data-table-row] {
46
- @apply text-surface-z8 border-surface-z5/10 border-b;
46
+ @apply text-ink-mute border-ink-soft/10 border-b;
47
47
  }
48
48
 
49
49
  [data-style='frosted'] [data-table-row]:hover {
50
- @apply bg-surface-z2/80;
50
+ @apply bg-paper-mute/80;
51
51
  }
52
52
 
53
53
  [data-style='frosted'] [data-table-row]:focus {
54
- @apply bg-surface-z2/80 text-surface-z10 outline-none;
54
+ @apply bg-paper-mute/80 text-ink outline-none;
55
55
  }
56
56
 
57
57
  [data-style='frosted'] [data-table-row][data-selected='true'] {
58
- @apply text-primary-z9 bg-primary-z5/40;
58
+ @apply text-primary bg-primary/40;
59
59
  }
60
60
 
61
61
  /* =============================================================================
@@ -63,7 +63,7 @@
63
63
  ============================================================================= */
64
64
 
65
65
  [data-style='frosted'] [data-table-striped] [data-table-body] tr:nth-child(even) {
66
- @apply bg-surface-z2/30;
66
+ @apply bg-paper-mute/30;
67
67
  }
68
68
 
69
69
  /* =============================================================================
@@ -71,7 +71,7 @@
71
71
  ============================================================================= */
72
72
 
73
73
  [data-style='frosted'] [data-table-empty] {
74
- @apply text-surface-z5;
74
+ @apply text-ink-soft;
75
75
  }
76
76
 
77
77
  /* =============================================================================
@@ -79,11 +79,11 @@
79
79
  ============================================================================= */
80
80
 
81
81
  [data-style='frosted'] [data-table-cell] [data-cell-icon] {
82
- @apply text-surface-z5;
82
+ @apply text-ink-soft;
83
83
  }
84
84
 
85
85
  [data-style='frosted'] [data-table-row][data-selected='true'] [data-cell-icon] {
86
- @apply text-primary-z6;
86
+ @apply text-primary;
87
87
  }
88
88
 
89
89
  /* =============================================================================
@@ -92,11 +92,11 @@
92
92
 
93
93
  @media (max-width: 639px) {
94
94
  [data-style='frosted'] [data-table-responsive] [data-table-row] {
95
- @apply bg-surface-z2/80 border-surface-z5/20 border backdrop-blur-sm;
95
+ @apply bg-paper-mute/80 border-ink-soft/20 border backdrop-blur-sm;
96
96
  }
97
97
 
98
98
  [data-style='frosted'] [data-table-responsive] [data-table-cell]::before {
99
- @apply text-surface-z5;
99
+ @apply text-ink-soft;
100
100
  }
101
101
 
102
102
  /* Disable striped alternating bg in card layout */
@@ -9,7 +9,7 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='frosted'] [data-tabs-list] {
12
- @apply bg-surface-z1/70 border-surface-z5/20 rounded-t-lg border-0 border-b px-0 backdrop-blur-md;
12
+ @apply bg-paper-soft/70 border-ink-soft/20 rounded-t-lg border-0 border-b px-0 backdrop-blur-md;
13
13
  }
14
14
 
15
15
  [data-style='frosted'] [data-tabs][data-position='after'] [data-tabs-list] {
@@ -21,16 +21,16 @@
21
21
  ============================================================================= */
22
22
 
23
23
  [data-style='frosted'] [data-tabs-trigger] {
24
- @apply text-surface-z6 bg-transparent;
24
+ @apply text-ink-soft bg-transparent;
25
25
  }
26
26
 
27
27
  [data-style='frosted'] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
28
- @apply text-surface-z8 bg-surface-z2/15;
28
+ @apply text-ink-mute bg-paper-mute/15;
29
29
  }
30
30
 
31
31
  /* Selected state */
32
32
  [data-style='frosted'] [data-tabs-trigger][data-selected] {
33
- @apply bg-primary-z5/40 text-primary-z9 border-primary-z5/50 border backdrop-blur-sm;
33
+ @apply bg-primary/40 text-primary border-primary/50 border backdrop-blur-sm;
34
34
  }
35
35
 
36
36
  /* =============================================================================
@@ -38,15 +38,15 @@
38
38
  ============================================================================= */
39
39
 
40
40
  [data-style='frosted'] [data-tabs-trigger] [data-tabs-icon] {
41
- @apply text-surface-z5;
41
+ @apply text-ink-soft;
42
42
  }
43
43
 
44
44
  [data-style='frosted'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
45
- @apply text-surface-z7;
45
+ @apply text-ink-mute;
46
46
  }
47
47
 
48
48
  [data-style='frosted'] [data-tabs-trigger][data-selected] [data-tabs-icon] {
49
- @apply text-primary-z7;
49
+ @apply text-primary;
50
50
  }
51
51
 
52
52
  /* =============================================================================
@@ -54,5 +54,5 @@
54
54
  ============================================================================= */
55
55
 
56
56
  [data-style='frosted'] [data-tabs-content] {
57
- @apply text-surface-z8;
57
+ @apply text-ink-mute;
58
58
  }
@@ -9,7 +9,7 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='frosted'] [data-timeline-circle] {
12
- @apply border-surface-z5/30 text-surface-z6;
12
+ @apply border-ink-soft/30 text-ink-soft;
13
13
  }
14
14
 
15
15
  [data-style='frosted'] [data-timeline-item][data-completed] [data-timeline-circle] {
@@ -17,7 +17,7 @@
17
17
  }
18
18
 
19
19
  [data-style='frosted'] [data-timeline-item][data-active] [data-timeline-circle] {
20
- @apply border-primary/60 text-primary ring-3 ring-primary-z5/15;
20
+ @apply border-primary/60 text-primary ring-3 ring-primary/15;
21
21
  }
22
22
 
23
23
  /* =============================================================================
@@ -25,7 +25,7 @@
25
25
  ============================================================================= */
26
26
 
27
27
  [data-style='frosted'] [data-timeline-connector] {
28
- @apply bg-surface-z5/20;
28
+ @apply bg-ink-soft/20;
29
29
  }
30
30
 
31
31
  [data-style='frosted'] [data-timeline-item][data-completed] [data-timeline-connector] {
@@ -37,9 +37,9 @@
37
37
  ============================================================================= */
38
38
 
39
39
  [data-style='frosted'] [data-timeline-title] {
40
- @apply text-surface-z8;
40
+ @apply text-ink-mute;
41
41
  }
42
42
 
43
43
  [data-style='frosted'] [data-timeline-description] {
44
- @apply text-surface-z6;
44
+ @apply text-ink-soft;
45
45
  }
@@ -1,18 +1,18 @@
1
1
  /* TableOfContents — Glass theme */
2
2
 
3
3
  [data-style='frosted'] [data-toc] [data-toc-label] {
4
- @apply text-surface-z6;
4
+ @apply text-ink-soft;
5
5
  }
6
6
 
7
7
  [data-style='frosted'] [data-toc] [data-toc-item] {
8
- @apply text-surface-z7;
8
+ @apply text-ink-mute;
9
9
  }
10
10
 
11
11
  [data-style='frosted'] [data-toc] [data-toc-item]:hover,
12
12
  [data-style='frosted'] [data-toc] [data-toc-item][data-toc-focused] {
13
- @apply text-surface-z10 bg-surface-z2/15 outline-none;
13
+ @apply text-ink bg-paper-mute/15 outline-none;
14
14
  }
15
15
 
16
16
  [data-style='frosted'] [data-toc] [data-toc-item][data-toc-active] {
17
- @apply text-primary-z9 border-l-primary-z5;
17
+ @apply text-primary border-l-primary;
18
18
  }
@@ -9,7 +9,7 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='frosted'] [data-toggle] {
12
- @apply bg-surface-z1/70 border-surface-z5/20 rounded-lg border backdrop-blur-md;
12
+ @apply bg-paper-soft/70 border-ink-soft/20 rounded-lg border backdrop-blur-md;
13
13
  }
14
14
 
15
15
  /* =============================================================================
@@ -17,17 +17,17 @@
17
17
  ============================================================================= */
18
18
 
19
19
  [data-style='frosted'] [data-toggle-option] {
20
- @apply text-surface-z6;
20
+ @apply text-ink-soft;
21
21
  }
22
22
 
23
23
  [data-style='frosted'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
24
24
  [data-style='frosted'] [data-toggle-option]:focus:not(:disabled):not([data-disabled='true']) {
25
- @apply text-surface-z8 bg-surface-z2/15;
25
+ @apply text-ink-mute bg-paper-mute/15;
26
26
  }
27
27
 
28
28
  /* Selected state */
29
29
  [data-style='frosted'] [data-toggle-option][data-selected='true'] {
30
- @apply bg-primary-z5/40 text-primary-z9 border-primary-z5/50 border backdrop-blur-sm;
30
+ @apply bg-primary/40 text-primary border-primary/50 border backdrop-blur-sm;
31
31
  }
32
32
 
33
33
  /* =============================================================================
@@ -35,14 +35,14 @@
35
35
  ============================================================================= */
36
36
 
37
37
  [data-style='frosted'] [data-toggle-option] [data-toggle-icon] {
38
- @apply text-surface-z5;
38
+ @apply text-ink-soft;
39
39
  }
40
40
 
41
41
  [data-style='frosted'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
42
42
  [data-style='frosted'] [data-toggle-option]:focus:not(:disabled) [data-toggle-icon] {
43
- @apply text-surface-z7;
43
+ @apply text-ink-mute;
44
44
  }
45
45
 
46
46
  [data-style='frosted'] [data-toggle-option][data-selected='true'] [data-toggle-icon] {
47
- @apply text-primary-z7;
47
+ @apply text-primary;
48
48
  }
@@ -9,25 +9,25 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='frosted'] [data-toolbar] {
12
- @apply bg-surface-z1/70 backdrop-blur-md;
12
+ @apply bg-paper-soft/70 backdrop-blur-md;
13
13
  }
14
14
 
15
15
  /* Position-based borders */
16
16
  [data-style='frosted'] [data-toolbar][data-toolbar-position='top'],
17
17
  [data-style='frosted'] [data-toolbar]:not([data-toolbar-position]) {
18
- @apply border-surface-z5/20 border-b;
18
+ @apply border-ink-soft/20 border-b;
19
19
  }
20
20
 
21
21
  [data-style='frosted'] [data-toolbar][data-toolbar-position='bottom'] {
22
- @apply border-surface-z5/20 border-t;
22
+ @apply border-ink-soft/20 border-t;
23
23
  }
24
24
 
25
25
  [data-style='frosted'] [data-toolbar][data-toolbar-position='left'] {
26
- @apply border-surface-z5/20 border-r;
26
+ @apply border-ink-soft/20 border-r;
27
27
  }
28
28
 
29
29
  [data-style='frosted'] [data-toolbar][data-toolbar-position='right'] {
30
- @apply border-surface-z5/20 border-l;
30
+ @apply border-ink-soft/20 border-l;
31
31
  }
32
32
 
33
33
  /* =============================================================================
@@ -35,24 +35,24 @@
35
35
  ============================================================================= */
36
36
 
37
37
  [data-style='frosted'] [data-toolbar-item] {
38
- @apply text-surface-z7;
38
+ @apply text-ink-mute;
39
39
  }
40
40
 
41
41
  [data-style='frosted'] [data-toolbar-item]:hover:not(:disabled):not([data-disabled='true']) {
42
- @apply text-surface-z10 bg-surface-z2/15;
42
+ @apply text-ink bg-paper-mute/15;
43
43
  }
44
44
 
45
45
  [data-style='frosted'] [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled='true']) {
46
- @apply text-surface-z10 ring-surface-z5/40 bg-surface-z2/15 ring-1 outline-none;
46
+ @apply text-ink ring-ink-soft/40 bg-paper-mute/15 ring-1 outline-none;
47
47
  }
48
48
 
49
49
  /* Active/pressed state */
50
50
  [data-style='frosted'] [data-toolbar-item][data-active='true'] {
51
- @apply bg-primary-z5/30 text-primary-z9;
51
+ @apply bg-primary/30 text-primary;
52
52
  }
53
53
 
54
54
  [data-style='frosted'] [data-toolbar-item][data-active='true']:hover:not(:disabled) {
55
- @apply bg-primary-z5/40 text-primary-z10;
55
+ @apply bg-primary/40 text-primary;
56
56
  }
57
57
 
58
58
  /* =============================================================================
@@ -60,15 +60,15 @@
60
60
  ============================================================================= */
61
61
 
62
62
  [data-style='frosted'] [data-toolbar-item] [data-toolbar-icon] {
63
- @apply text-surface-z6;
63
+ @apply text-ink-soft;
64
64
  }
65
65
 
66
66
  [data-style='frosted'] [data-toolbar-item]:hover:not(:disabled) [data-toolbar-icon] {
67
- @apply text-surface-z9;
67
+ @apply text-ink;
68
68
  }
69
69
 
70
70
  [data-style='frosted'] [data-toolbar-item][data-active='true'] [data-toolbar-icon] {
71
- @apply text-primary-z7;
71
+ @apply text-primary;
72
72
  }
73
73
 
74
74
  /* =============================================================================
@@ -76,9 +76,9 @@
76
76
  ============================================================================= */
77
77
 
78
78
  [data-style='frosted'] [data-toolbar-separator] {
79
- @apply bg-surface-z5/20;
79
+ @apply bg-ink-soft/20;
80
80
  }
81
81
 
82
82
  [data-style='frosted'] [data-toolbar-divider] {
83
- @apply bg-surface-z5/20;
83
+ @apply bg-ink-soft/20;
84
84
  }
@@ -9,7 +9,7 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='frosted'] [data-tree]:focus-within {
12
- @apply ring-surface-z5/40 rounded ring-1;
12
+ @apply ring-ink-soft/40 rounded ring-1;
13
13
  }
14
14
 
15
15
  /* =============================================================================
@@ -17,11 +17,11 @@
17
17
  ============================================================================= */
18
18
 
19
19
  [data-style='frosted'] [data-tree-toggle-btn] {
20
- @apply text-surface-z5;
20
+ @apply text-ink-soft;
21
21
  }
22
22
 
23
23
  [data-style='frosted'] [data-tree-toggle-btn]:hover {
24
- @apply text-surface-z7 bg-surface-z2/15;
24
+ @apply text-ink-mute bg-paper-mute/15;
25
25
  }
26
26
 
27
27
  /* =============================================================================
@@ -29,26 +29,26 @@
29
29
  ============================================================================= */
30
30
 
31
31
  [data-style='frosted'] [data-tree-item-content] {
32
- @apply text-surface-z8;
32
+ @apply text-ink-mute;
33
33
  }
34
34
 
35
35
  [data-style='frosted'] [data-tree-item-content]:hover:not(:disabled),
36
36
  [data-style='frosted'] [data-tree-item-content]:focus:not(:disabled) {
37
- @apply text-surface-z10 bg-surface-z2/15 outline-none;
37
+ @apply text-ink bg-paper-mute/15 outline-none;
38
38
  }
39
39
 
40
40
  /* Focus visible for keyboard navigation */
41
41
  [data-style='frosted'] [data-tree-item-content]:focus-visible {
42
- @apply ring-surface-z5/40 ring-1 outline-none;
42
+ @apply ring-ink-soft/40 ring-1 outline-none;
43
43
  }
44
44
 
45
45
  /* Active/selected state */
46
46
  [data-style='frosted'] [data-tree-item-content][data-active='true'] {
47
- @apply bg-primary-z5/30 text-primary-z9;
47
+ @apply bg-primary/30 text-primary;
48
48
  }
49
49
 
50
50
  [data-style='frosted'] [data-tree-item-content][data-active='true']:hover:not(:disabled) {
51
- @apply bg-primary-z5/40;
51
+ @apply bg-primary/40;
52
52
  }
53
53
 
54
54
  /* =============================================================================
@@ -56,31 +56,31 @@
56
56
  ============================================================================= */
57
57
 
58
58
  [data-style='frosted'] [data-tree-item-content] [data-item-icon] {
59
- @apply text-surface-z5;
59
+ @apply text-ink-soft;
60
60
  }
61
61
 
62
62
  [data-style='frosted'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
63
- @apply text-surface-z7;
63
+ @apply text-ink-mute;
64
64
  }
65
65
 
66
66
  [data-style='frosted'] [data-tree-item-content][data-active='true'] [data-item-icon] {
67
- @apply text-primary-z6;
67
+ @apply text-primary;
68
68
  }
69
69
 
70
70
  [data-style='frosted'] [data-tree-item-content] [data-item-description] {
71
- @apply text-surface-z5;
71
+ @apply text-ink-soft;
72
72
  }
73
73
 
74
74
  [data-style='frosted'] [data-tree-item-content][data-active='true'] [data-item-description] {
75
- @apply text-primary-z7;
75
+ @apply text-primary;
76
76
  }
77
77
 
78
78
  [data-style='frosted'] [data-tree-item-content] [data-item-badge] {
79
- @apply text-surface-z6 bg-surface-z2/15;
79
+ @apply text-ink-soft bg-paper-mute/15;
80
80
  }
81
81
 
82
82
  [data-style='frosted'] [data-tree-item-content][data-active='true'] [data-item-badge] {
83
- @apply text-primary-z8 bg-primary-z5/25;
83
+ @apply text-primary bg-primary/25;
84
84
  }
85
85
 
86
86
  /* =============================================================================
@@ -88,23 +88,23 @@
88
88
  ============================================================================= */
89
89
 
90
90
  [data-style='frosted'] [data-tree-node][data-selected='true'] [data-tree-node-row] {
91
- @apply bg-primary-z5/20;
91
+ @apply bg-primary/20;
92
92
  }
93
93
 
94
94
  [data-style='frosted']
95
95
  [data-tree]:focus-within
96
96
  [data-tree-node][data-selected='true']
97
97
  [data-tree-node-row] {
98
- @apply bg-primary-z5/30;
98
+ @apply bg-primary/30;
99
99
  }
100
100
 
101
101
  [data-style='frosted'] [data-tree-node][data-selected='true'] [data-tree-item-content] {
102
- @apply text-primary-z9;
102
+ @apply text-primary;
103
103
  }
104
104
 
105
105
  [data-style='frosted']
106
106
  [data-tree-node][data-selected='true']
107
107
  [data-tree-item-content]
108
108
  [data-item-icon] {
109
- @apply text-primary-z6;
109
+ @apply text-primary;
110
110
  }