@rokkit/themes 1.0.0-next.133 → 1.0.0-next.136

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 (90) hide show
  1. package/README.md +68 -80
  2. package/build.mjs +148 -150
  3. package/dist/base.css +689 -623
  4. package/dist/glass.css +212 -203
  5. package/dist/index.css +1464 -1257
  6. package/dist/material.css +203 -171
  7. package/dist/minimal.css +171 -147
  8. package/dist/rokkit.css +189 -113
  9. package/package.json +8 -2
  10. package/src/base/breadcrumbs.css +28 -28
  11. package/src/base/button.css +10 -3
  12. package/src/base/card.css +17 -17
  13. package/src/base/carousel.css +67 -67
  14. package/src/base/display.css +8 -8
  15. package/src/base/floating-navigation.css +32 -8
  16. package/src/base/graph-paper.css +49 -49
  17. package/src/base/pill.css +35 -35
  18. package/src/base/progress.css +21 -21
  19. package/src/base/range.css +57 -57
  20. package/src/base/rating.css +20 -18
  21. package/src/base/reveal.css +16 -16
  22. package/src/base/search-filter.css +61 -61
  23. package/src/base/shine.css +7 -7
  24. package/src/base/stepper.css +75 -75
  25. package/src/base/switch.css +55 -55
  26. package/src/base/table.css +49 -49
  27. package/src/base/tilt.css +4 -4
  28. package/src/base/timeline.css +38 -38
  29. package/src/base/tree.css +48 -15
  30. package/src/glass/button.css +11 -10
  31. package/src/glass/card.css +16 -13
  32. package/src/glass/floating-action.css +13 -13
  33. package/src/glass/floating-navigation.css +2 -2
  34. package/src/glass/input.css +32 -30
  35. package/src/glass/list.css +21 -21
  36. package/src/glass/menu.css +16 -16
  37. package/src/glass/range.css +10 -10
  38. package/src/glass/search-filter.css +8 -8
  39. package/src/glass/select.css +32 -32
  40. package/src/glass/switch.css +6 -6
  41. package/src/glass/table.css +14 -14
  42. package/src/glass/tabs.css +3 -3
  43. package/src/glass/timeline.css +8 -8
  44. package/src/glass/toggle.css +7 -7
  45. package/src/glass/toolbar.css +15 -15
  46. package/src/glass/tree.css +27 -21
  47. package/src/material/button.css +12 -8
  48. package/src/material/card.css +1 -1
  49. package/src/material/input.css +30 -14
  50. package/src/material/list.css +27 -23
  51. package/src/material/menu.css +16 -16
  52. package/src/material/range.css +11 -11
  53. package/src/material/search-filter.css +8 -8
  54. package/src/material/select.css +31 -31
  55. package/src/material/switch.css +6 -6
  56. package/src/material/table.css +20 -16
  57. package/src/material/timeline.css +8 -8
  58. package/src/material/toggle.css +7 -7
  59. package/src/material/toolbar.css +17 -16
  60. package/src/material/tree.css +22 -19
  61. package/src/minimal/button.css +7 -4
  62. package/src/minimal/card.css +13 -11
  63. package/src/minimal/floating-action.css +11 -11
  64. package/src/minimal/floating-navigation.css +1 -1
  65. package/src/minimal/input.css +14 -10
  66. package/src/minimal/list.css +27 -23
  67. package/src/minimal/menu.css +15 -15
  68. package/src/minimal/range.css +10 -10
  69. package/src/minimal/search-filter.css +8 -8
  70. package/src/minimal/select.css +4 -2
  71. package/src/minimal/switch.css +6 -6
  72. package/src/minimal/table.css +17 -15
  73. package/src/minimal/tabs.css +5 -3
  74. package/src/minimal/timeline.css +7 -7
  75. package/src/minimal/toggle.css +7 -7
  76. package/src/minimal/toolbar.css +17 -16
  77. package/src/minimal/tree.css +26 -20
  78. package/src/rokkit/button.css +40 -11
  79. package/src/rokkit/card.css +16 -14
  80. package/src/rokkit/floating-navigation.css +2 -2
  81. package/src/rokkit/input.css +10 -6
  82. package/src/rokkit/list.css +7 -2
  83. package/src/rokkit/range.css +11 -11
  84. package/src/rokkit/search-filter.css +8 -8
  85. package/src/rokkit/select.css +41 -36
  86. package/src/rokkit/switch.css +6 -6
  87. package/src/rokkit/table.css +17 -15
  88. package/src/rokkit/tabs.css +11 -6
  89. package/src/rokkit/timeline.css +8 -8
  90. package/src/rokkit/tree.css +35 -9
@@ -9,25 +9,25 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='material'] [data-toolbar] {
12
- @apply bg-surface-z1 shadow-sm;
12
+ @apply bg-surface-z1 shadow-sm;
13
13
  }
14
14
 
15
15
  /* Position-based borders removed - using shadows instead */
16
16
  [data-style='material'] [data-toolbar][data-toolbar-position='top'],
17
17
  [data-style='material'] [data-toolbar]:not([data-toolbar-position]) {
18
- @apply shadow-md;
18
+ @apply shadow-md;
19
19
  }
20
20
 
21
21
  [data-style='material'] [data-toolbar][data-toolbar-position='bottom'] {
22
- @apply shadow-md;
22
+ @apply shadow-md;
23
23
  }
24
24
 
25
25
  [data-style='material'] [data-toolbar][data-toolbar-position='left'] {
26
- @apply shadow-md;
26
+ @apply shadow-md;
27
27
  }
28
28
 
29
29
  [data-style='material'] [data-toolbar][data-toolbar-position='right'] {
30
- @apply shadow-md;
30
+ @apply shadow-md;
31
31
  }
32
32
 
33
33
  /* =============================================================================
@@ -35,24 +35,25 @@
35
35
  ============================================================================= */
36
36
 
37
37
  [data-style='material'] [data-toolbar-item] {
38
- @apply text-surface-z7 rounded-full;
38
+ @apply text-surface-z7 rounded-full;
39
39
  }
40
40
 
41
41
  [data-style='material'] [data-toolbar-item]:hover:not(:disabled):not([data-disabled='true']) {
42
- @apply bg-surface-z2 text-surface-z9;
42
+ @apply bg-surface-z2 text-surface-z9;
43
43
  }
44
44
 
45
- [data-style='material'] [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled='true']) {
46
- @apply bg-surface-z2 text-surface-z9 outline-none ring-2 ring-primary-z4;
45
+ [data-style='material']
46
+ [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled='true']) {
47
+ @apply bg-surface-z2 text-surface-z9 ring-primary-z4 ring-2 outline-none;
47
48
  }
48
49
 
49
50
  /* Active/pressed state */
50
51
  [data-style='material'] [data-toolbar-item][data-active='true'] {
51
- @apply bg-primary-z2 text-primary-z8;
52
+ @apply bg-primary-z2 text-primary-z8;
52
53
  }
53
54
 
54
55
  [data-style='material'] [data-toolbar-item][data-active='true']:hover:not(:disabled) {
55
- @apply bg-primary-z3 text-primary-z9;
56
+ @apply bg-primary-z3 text-primary-z9;
56
57
  }
57
58
 
58
59
  /* =============================================================================
@@ -60,15 +61,15 @@
60
61
  ============================================================================= */
61
62
 
62
63
  [data-style='material'] [data-toolbar-item] [data-toolbar-icon] {
63
- @apply text-surface-z6;
64
+ @apply text-surface-z6;
64
65
  }
65
66
 
66
67
  [data-style='material'] [data-toolbar-item]:hover:not(:disabled) [data-toolbar-icon] {
67
- @apply text-surface-z8;
68
+ @apply text-surface-z8;
68
69
  }
69
70
 
70
71
  [data-style='material'] [data-toolbar-item][data-active='true'] [data-toolbar-icon] {
71
- @apply text-primary-z7;
72
+ @apply text-primary-z7;
72
73
  }
73
74
 
74
75
  /* =============================================================================
@@ -76,9 +77,9 @@
76
77
  ============================================================================= */
77
78
 
78
79
  [data-style='material'] [data-toolbar-separator] {
79
- @apply bg-surface-z3;
80
+ @apply bg-surface-z3;
80
81
  }
81
82
 
82
83
  [data-style='material'] [data-toolbar-divider] {
83
- @apply bg-surface-z3;
84
+ @apply bg-surface-z3;
84
85
  }
@@ -9,7 +9,7 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='material'] [data-tree]:focus-within {
12
- @apply outline-none;
12
+ @apply outline-none;
13
13
  }
14
14
 
15
15
  /* =============================================================================
@@ -17,11 +17,11 @@
17
17
  ============================================================================= */
18
18
 
19
19
  [data-style='material'] [data-tree-toggle-btn] {
20
- @apply text-surface-z5 rounded-full;
20
+ @apply text-surface-z5 rounded-full;
21
21
  }
22
22
 
23
23
  [data-style='material'] [data-tree-toggle-btn]:hover {
24
- @apply bg-surface-z2 text-surface-z7;
24
+ @apply bg-surface-z2 text-surface-z7;
25
25
  }
26
26
 
27
27
  /* =============================================================================
@@ -29,26 +29,26 @@
29
29
  ============================================================================= */
30
30
 
31
31
  [data-style='material'] [data-tree-item-content] {
32
- @apply text-surface-z8;
32
+ @apply text-surface-z8;
33
33
  }
34
34
 
35
35
  [data-style='material'] [data-tree-item-content]:hover:not(:disabled),
36
36
  [data-style='material'] [data-tree-item-content]:focus:not(:disabled) {
37
- @apply bg-surface-z2 text-surface-z10 outline-none;
37
+ @apply bg-surface-z2 text-surface-z10 outline-none;
38
38
  }
39
39
 
40
40
  /* Focus visible for keyboard navigation */
41
41
  [data-style='material'] [data-tree-item-content]:focus-visible {
42
- @apply outline-none ring-2 ring-primary-z4 ring-inset;
42
+ @apply ring-primary-z4 ring-2 outline-none ring-inset;
43
43
  }
44
44
 
45
45
  /* Active/selected state */
46
46
  [data-style='material'] [data-tree-item-content][data-active='true'] {
47
- @apply bg-primary-z2 text-primary-z9;
47
+ @apply bg-primary-z2 text-primary-z9;
48
48
  }
49
49
 
50
50
  [data-style='material'] [data-tree-item-content][data-active='true']:hover:not(:disabled) {
51
- @apply bg-primary-z3;
51
+ @apply bg-primary-z3;
52
52
  }
53
53
 
54
54
  /* =============================================================================
@@ -56,31 +56,31 @@
56
56
  ============================================================================= */
57
57
 
58
58
  [data-style='material'] [data-tree-item-content] [data-item-icon] {
59
- @apply text-surface-z5;
59
+ @apply text-surface-z5;
60
60
  }
61
61
 
62
62
  [data-style='material'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
63
- @apply text-surface-z7;
63
+ @apply text-surface-z7;
64
64
  }
65
65
 
66
66
  [data-style='material'] [data-tree-item-content][data-active='true'] [data-item-icon] {
67
- @apply text-primary-z6;
67
+ @apply text-primary-z6;
68
68
  }
69
69
 
70
70
  [data-style='material'] [data-tree-item-content] [data-item-description] {
71
- @apply text-surface-z5;
71
+ @apply text-surface-z5;
72
72
  }
73
73
 
74
74
  [data-style='material'] [data-tree-item-content][data-active='true'] [data-item-description] {
75
- @apply text-primary-z7;
75
+ @apply text-primary-z7;
76
76
  }
77
77
 
78
78
  [data-style='material'] [data-tree-item-content] [data-item-badge] {
79
- @apply text-surface-z6 bg-surface-z2 rounded-full;
79
+ @apply text-surface-z6 bg-surface-z2 rounded-full;
80
80
  }
81
81
 
82
82
  [data-style='material'] [data-tree-item-content][data-active='true'] [data-item-badge] {
83
- @apply text-primary-z8 bg-primary-z2;
83
+ @apply text-primary-z8 bg-primary-z2;
84
84
  }
85
85
 
86
86
  /* =============================================================================
@@ -88,13 +88,16 @@
88
88
  ============================================================================= */
89
89
 
90
90
  [data-style='material'] [data-tree-node][data-selected='true'] [data-tree-node-row] {
91
- @apply bg-primary-z2;
91
+ @apply bg-primary-z2;
92
92
  }
93
93
 
94
94
  [data-style='material'] [data-tree-node][data-selected='true'] [data-tree-item-content] {
95
- @apply text-primary-z9;
95
+ @apply text-primary-z9;
96
96
  }
97
97
 
98
- [data-style='material'] [data-tree-node][data-selected='true'] [data-tree-item-content] [data-item-icon] {
99
- @apply text-primary-z6;
98
+ [data-style='material']
99
+ [data-tree-node][data-selected='true']
100
+ [data-tree-item-content]
101
+ [data-item-icon] {
102
+ @apply text-primary-z6;
100
103
  }
@@ -97,7 +97,8 @@
97
97
  @apply from-danger-z5 to-danger-z3 text-on-danger bg-gradient-to-br;
98
98
  }
99
99
 
100
- [data-style='minimal'] [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
100
+ [data-style='minimal']
101
+ [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
101
102
  filter: brightness(1.05);
102
103
  }
103
104
 
@@ -130,12 +131,14 @@
130
131
  Hover States
131
132
  ============================================================================= */
132
133
 
133
- [data-style='minimal'] [data-button][data-style='default']:hover:not(:disabled):not([data-disabled]),
134
+ [data-style='minimal']
135
+ [data-button][data-style='default']:hover:not(:disabled):not([data-disabled]),
134
136
  [data-style='minimal'] [data-button]:not([data-style]):hover:not(:disabled):not([data-disabled]) {
135
137
  @apply bg-surface-z3 border-surface-z5;
136
138
  }
137
139
 
138
- [data-style='minimal'] [data-button][data-style='outline']:hover:not(:disabled):not([data-disabled]) {
140
+ [data-style='minimal']
141
+ [data-button][data-style='outline']:hover:not(:disabled):not([data-disabled]) {
139
142
  @apply bg-surface-z1 border-surface-z5;
140
143
  }
141
144
 
@@ -148,5 +151,5 @@
148
151
  ============================================================================= */
149
152
 
150
153
  [data-style='minimal'] [data-button]:focus-visible {
151
- @apply outline-none ring-1 ring-surface-z5;
154
+ @apply ring-surface-z5 ring-1 outline-none;
152
155
  }
@@ -1,4 +1,4 @@
1
- * Card - Minimal Theme Styles
1
+ * Card - Minimal Theme Styles
2
2
  *
3
3
  * Clean, flat styling with subtle borders.
4
4
  */
@@ -8,21 +8,23 @@
8
8
  ============================================================================= */
9
9
 
10
10
  [data-style='minimal'] [data-card] {
11
- @apply bg-surface-z1 border-surface-z4 text-surface-z9 border shadow-sm;
11
+ @apply bg-surface-z1 border-surface-z4 text-surface-z9 border shadow-sm;
12
12
  }
13
13
 
14
14
  /* Interactive cards (buttons) */
15
15
  [data-style='minimal'] [data-card][data-card-interactive] {
16
- cursor: pointer;
17
- transition: border-color 0.2s ease, box-shadow 0.2s ease;
16
+ cursor: pointer;
17
+ transition:
18
+ border-color 0.2s ease,
19
+ box-shadow 0.2s ease;
18
20
  }
19
21
 
20
22
  [data-style='minimal'] [data-card][data-card-interactive]:hover {
21
- @apply border-surface-z6 shadow;
23
+ @apply border-surface-z6 shadow;
22
24
  }
23
25
 
24
26
  [data-style='minimal'] [data-card][data-card-interactive]:active {
25
- @apply bg-surface-z2;
27
+ @apply bg-surface-z2;
26
28
  }
27
29
 
28
30
  /* =============================================================================
@@ -30,15 +32,15 @@
30
32
  ============================================================================= */
31
33
 
32
34
  [data-style='minimal'] [data-card-header] {
33
- @apply border-surface-z3 border-b;
35
+ @apply border-surface-z3 border-b;
34
36
  }
35
37
 
36
38
  [data-style='minimal'] [data-card-body] {
37
- @apply text-surface-z8;
39
+ @apply text-surface-z8;
38
40
  }
39
41
 
40
42
  [data-style='minimal'] [data-card-footer] {
41
- @apply border-surface-z3 border-t text-surface-z7;
43
+ @apply border-surface-z3 text-surface-z7 border-t;
42
44
  }
43
45
 
44
46
  /* =============================================================================
@@ -46,7 +48,7 @@
46
48
  ============================================================================= */
47
49
 
48
50
  [data-style='minimal'] [data-card][data-card-interactive]:focus-visible {
49
- @apply outline-none ring-1 ring-surface-z5;
51
+ @apply ring-surface-z5 ring-1 outline-none;
50
52
  }
51
53
 
52
54
  /* =============================================================================
@@ -55,5 +57,5 @@
55
57
 
56
58
  [data-style='minimal'] [data-card][data-card-interactive][data-disabled],
57
59
  [data-style='minimal'] [data-card][data-card-interactive]:disabled {
58
- @apply opacity-50 cursor-not-allowed;
60
+ @apply cursor-not-allowed opacity-50;
59
61
  }
@@ -9,20 +9,20 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='minimal'] [data-fab-trigger] {
12
- @apply bg-surface-z1 text-surface-z8 border-surface-z4 border;
12
+ @apply bg-surface-z1 text-surface-z8 border-surface-z4 border;
13
13
  }
14
14
 
15
15
  [data-style='minimal'] [data-fab-trigger]:hover:not(:disabled) {
16
- @apply bg-surface-z2 text-surface-z10 border-surface-z5;
16
+ @apply bg-surface-z2 text-surface-z10 border-surface-z5;
17
17
  }
18
18
 
19
19
  [data-style='minimal'] [data-fab-trigger]:focus-visible {
20
- @apply outline-none ring-1 ring-surface-z5;
20
+ @apply ring-surface-z5 ring-1 outline-none;
21
21
  }
22
22
 
23
23
  [data-style='minimal'] [data-fab][data-open='true'] [data-fab-trigger] {
24
- @apply bg-surface-z3 border-surface-z5;
25
- transform: rotate(45deg);
24
+ @apply bg-surface-z3 border-surface-z5;
25
+ transform: rotate(45deg);
26
26
  }
27
27
 
28
28
  /* =============================================================================
@@ -30,24 +30,24 @@
30
30
  ============================================================================= */
31
31
 
32
32
  [data-style='minimal'] [data-fab-item] {
33
- @apply bg-surface-z1 text-surface-z7 border-surface-z4 border;
33
+ @apply bg-surface-z1 text-surface-z7 border-surface-z4 border;
34
34
  }
35
35
 
36
36
  [data-style='minimal'] [data-fab-item]:hover:not(:disabled) {
37
- @apply bg-surface-z2 text-surface-z9 border-surface-z5;
37
+ @apply bg-surface-z2 text-surface-z9 border-surface-z5;
38
38
  }
39
39
 
40
40
  [data-style='minimal'] [data-fab-item]:focus-visible {
41
- @apply outline-none ring-1 ring-surface-z5;
41
+ @apply ring-surface-z5 ring-1 outline-none;
42
42
  }
43
43
 
44
44
  /* Item icon */
45
45
  [data-style='minimal'] [data-fab-item] [data-fab-item-icon] {
46
- @apply text-surface-z6;
46
+ @apply text-surface-z6;
47
47
  }
48
48
 
49
49
  [data-style='minimal'] [data-fab-item]:hover:not(:disabled) [data-fab-item-icon] {
50
- @apply text-surface-z8;
50
+ @apply text-surface-z8;
51
51
  }
52
52
 
53
53
  /* =============================================================================
@@ -55,5 +55,5 @@
55
55
  ============================================================================= */
56
56
 
57
57
  [data-style='minimal'] [data-fab-backdrop] {
58
- background: rgba(0, 0, 0, 0.2);
58
+ background: rgba(0, 0, 0, 0.2);
59
59
  }
@@ -49,7 +49,7 @@
49
49
  }
50
50
 
51
51
  [data-style='minimal'] [data-floating-nav-item]:focus-visible {
52
- @apply outline-none ring-1 ring-surface-z5;
52
+ @apply ring-surface-z5 ring-1 outline-none;
53
53
  }
54
54
 
55
55
  /* Icon */
@@ -4,7 +4,7 @@
4
4
 
5
5
  /* Input root: transparent background, bottom border only */
6
6
  [data-style='minimal'] [data-input-root] {
7
- @apply flex items-center border-b border-surface-z3 bg-transparent p-0 transition-all relative;
7
+ @apply border-surface-z3 relative flex items-center border-b bg-transparent p-0 transition-all;
8
8
  border-radius: 0;
9
9
  background-image: none;
10
10
  }
@@ -16,10 +16,12 @@
16
16
  }
17
17
 
18
18
  /* Inputs inside wrapper */
19
- [data-style='minimal'] [data-input-root] input:not([type='checkbox'], [type='radio'], [type='color']),
19
+ [data-style='minimal']
20
+ [data-input-root]
21
+ input:not([type='checkbox'], [type='radio'], [type='color']),
20
22
  [data-style='minimal'] [data-input-root] textarea,
21
23
  [data-style='minimal'] [data-input-root] select {
22
- @apply bg-transparent text-surface-z9 w-full border-none px-1 py-1.5 outline-none transition-all;
24
+ @apply text-surface-z9 w-full border-none bg-transparent px-1 py-1.5 transition-all outline-none;
23
25
  font-size: 0.875rem;
24
26
  line-height: 1.25rem;
25
27
  }
@@ -30,7 +32,7 @@
30
32
 
31
33
  /* Select inside input-root: match text input appearance */
32
34
  [data-style='minimal'] [data-input-root] [data-select-trigger] {
33
- @apply bg-transparent text-surface-z9 border-none rounded-none px-1 shadow-none ring-0 focus:outline-none;
35
+ @apply text-surface-z9 rounded-none border-none bg-transparent px-1 shadow-none ring-0 focus:outline-none;
34
36
  font-size: 0.875rem;
35
37
  background-image: none;
36
38
  transition: color 150ms ease;
@@ -42,16 +44,16 @@
42
44
  }
43
45
 
44
46
  [data-style='minimal'] [data-input-root] [data-select][data-open='true'] [data-select-trigger] {
45
- @apply border-none ring-0 shadow-none bg-transparent;
47
+ @apply border-none bg-transparent shadow-none ring-0;
46
48
  }
47
49
 
48
50
  /* Labels: smaller, uppercase */
49
51
  [data-style='minimal'] [data-field] > label {
50
- @apply text-surface-z6 text-xs uppercase tracking-wide;
52
+ @apply text-surface-z6 text-xs tracking-wide uppercase;
51
53
  }
52
54
 
53
55
  [data-style='minimal'] [data-form-root] label {
54
- @apply text-surface-z6 text-xs uppercase tracking-wide;
56
+ @apply text-surface-z6 text-xs tracking-wide uppercase;
55
57
  }
56
58
 
57
59
  /* Focused label: secondary color */
@@ -76,7 +78,7 @@
76
78
 
77
79
  /* Disabled state */
78
80
  [data-style='minimal'] [data-field-disabled] [data-input-root] {
79
- @apply border-surface-z3 opacity-50 cursor-not-allowed;
81
+ @apply border-surface-z3 cursor-not-allowed opacity-50;
80
82
  }
81
83
 
82
84
  /* Error state */
@@ -91,7 +93,7 @@
91
93
 
92
94
  /* Message */
93
95
  [data-style='minimal'] [data-message] {
94
- @apply text-danger-z6 text-xs mt-0.5;
96
+ @apply text-danger-z6 mt-0.5 text-xs;
95
97
  }
96
98
 
97
99
  /* Checkbox */
@@ -99,7 +101,9 @@
99
101
  @apply text-surface-z5 text-lg;
100
102
  }
101
103
 
102
- [data-style='minimal'] [data-checkbox-root][data-variant='custom']:has(input:checked) [data-checkbox-icon] {
104
+ [data-style='minimal']
105
+ [data-checkbox-root][data-variant='custom']:has(input:checked)
106
+ [data-checkbox-icon] {
103
107
  @apply text-secondary-600;
104
108
  }
105
109
 
@@ -9,7 +9,7 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='minimal'] [data-list]:focus-within {
12
- @apply outline-none;
12
+ @apply outline-none;
13
13
  }
14
14
 
15
15
  /* =============================================================================
@@ -17,34 +17,38 @@
17
17
  ============================================================================= */
18
18
 
19
19
  [data-style='minimal'] [data-list] [data-list-item] {
20
- @apply text-surface-z7 border-0 border-solid border-transparent;
20
+ @apply text-surface-z7 border-0 border-solid border-transparent;
21
21
  }
22
22
 
23
23
  [data-style='minimal'] [data-list] a[data-list-item],
24
24
  [data-style='minimal'] [data-list] button[data-list-item] {
25
- @apply text-surface-z6;
25
+ @apply text-surface-z6;
26
26
  }
27
27
 
28
28
  /* Hover and focus (keyboard navigation) */
29
- [data-style='minimal'] [data-list] [data-list-item]:hover:not(:disabled):not([data-disabled='true']),
30
- [data-style='minimal'] [data-list] [data-list-item]:focus:not(:disabled):not([data-disabled='true']) {
31
- @apply text-surface-z9 border-l-surface-z2 border-l-2 outline-none;
29
+ [data-style='minimal']
30
+ [data-list]
31
+ [data-list-item]:hover:not(:disabled):not([data-disabled='true']),
32
+ [data-style='minimal']
33
+ [data-list]
34
+ [data-list-item]:focus:not(:disabled):not([data-disabled='true']) {
35
+ @apply text-surface-z9 border-l-surface-z2 border-l-2 outline-none;
32
36
  }
33
37
 
34
38
  /* Active state — muted when list not focused */
35
39
  [data-style='minimal'] [data-list] [data-list-item][data-active='true'] {
36
- @apply text-surface-z8 border-primary-z4 border-l-2;
40
+ @apply text-surface-z8 border-primary-z4 border-l-2;
37
41
  }
38
42
 
39
43
  /* Active state — full highlight when list has focus */
40
44
  [data-style='minimal'] [data-list]:focus-within [data-list-item][data-active='true'] {
41
- @apply text-primary-z7 border-primary-z4 border-l-2;
45
+ @apply text-primary-z7 border-primary-z4 border-l-2;
42
46
  }
43
47
 
44
48
  /* Active + hover/focus */
45
49
  [data-style='minimal'] [data-list] [data-list-item][data-active='true']:hover:not(:disabled),
46
50
  [data-style='minimal'] [data-list] [data-list-item][data-active='true']:focus:not(:disabled) {
47
- @apply text-primary-z8;
51
+ @apply text-primary-z8;
48
52
  }
49
53
 
50
54
  /* =============================================================================
@@ -52,32 +56,32 @@
52
56
  ============================================================================= */
53
57
 
54
58
  [data-style='minimal'] [data-list] [data-list-item] [data-item-icon] {
55
- @apply text-surface-z5;
59
+ @apply text-surface-z5;
56
60
  }
57
61
 
58
62
  [data-style='minimal'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
59
63
  [data-style='minimal'] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon] {
60
- @apply text-surface-z6;
64
+ @apply text-surface-z6;
61
65
  }
62
66
 
63
67
  [data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-icon] {
64
- @apply text-primary-z5;
68
+ @apply text-primary-z5;
65
69
  }
66
70
 
67
71
  [data-style='minimal'] [data-list] [data-list-item] [data-item-description] {
68
- @apply text-surface-z5;
72
+ @apply text-surface-z5;
69
73
  }
70
74
 
71
75
  [data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
72
- @apply text-primary-z6;
76
+ @apply text-primary-z6;
73
77
  }
74
78
 
75
79
  [data-style='minimal'] [data-list] [data-list-item] [data-item-badge] {
76
- @apply text-surface-z6 bg-transparent border-surface-z4 border;
80
+ @apply text-surface-z6 border-surface-z4 border bg-transparent;
77
81
  }
78
82
 
79
83
  [data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
80
- @apply text-primary-z7 border-primary-z4;
84
+ @apply text-primary-z7 border-primary-z4;
81
85
  }
82
86
 
83
87
  /* =============================================================================
@@ -85,12 +89,12 @@
85
89
  ============================================================================= */
86
90
 
87
91
  [data-style='minimal'] [data-list] [data-list-group] {
88
- @apply text-surface-z5;
92
+ @apply text-surface-z5;
89
93
  }
90
94
 
91
95
  [data-style='minimal'] [data-list] [data-list-group]:hover:not(:disabled),
92
96
  [data-style='minimal'] [data-list] [data-list-group]:focus:not(:disabled) {
93
- @apply text-surface-z7 border-l-surface-z3 border-l-2;
97
+ @apply text-surface-z7 border-l-surface-z3 border-l-2;
94
98
  }
95
99
 
96
100
  /* =============================================================================
@@ -98,7 +102,7 @@
98
102
  ============================================================================= */
99
103
 
100
104
  [data-style='minimal'] [data-list] [data-list-separator] {
101
- @apply bg-surface-z3;
105
+ @apply bg-surface-z3;
102
106
  }
103
107
 
104
108
  /* =============================================================================
@@ -106,17 +110,17 @@
106
110
  ============================================================================= */
107
111
 
108
112
  [data-style='minimal'] [data-list] [data-list-item][data-selected='true'] {
109
- @apply text-primary-z7 border-primary-z3 border-l-2;
113
+ @apply text-primary-z7 border-primary-z3 border-l-2;
110
114
  }
111
115
 
112
116
  [data-style='minimal'] [data-list]:focus-within [data-list-item][data-selected='true'] {
113
- @apply text-primary-z7 border-primary-z4 border-l-2;
117
+ @apply text-primary-z7 border-primary-z4 border-l-2;
114
118
  }
115
119
 
116
120
  [data-style='minimal'] [data-list] [data-list-item][data-selected='true']:hover:not(:disabled) {
117
- @apply text-primary-z8;
121
+ @apply text-primary-z8;
118
122
  }
119
123
 
120
124
  [data-style='minimal'] [data-list] [data-list-item][data-selected='true'] [data-item-icon] {
121
- @apply text-primary-z5;
125
+ @apply text-primary-z5;
122
126
  }