@rokkit/themes 1.0.0-next.132 → 1.0.0-next.135

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 (91) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +68 -80
  3. package/build.mjs +148 -150
  4. package/dist/base.css +689 -623
  5. package/dist/glass.css +212 -203
  6. package/dist/index.css +1464 -1257
  7. package/dist/material.css +203 -171
  8. package/dist/minimal.css +171 -147
  9. package/dist/rokkit.css +189 -113
  10. package/package.json +11 -4
  11. package/src/base/breadcrumbs.css +28 -28
  12. package/src/base/button.css +10 -3
  13. package/src/base/card.css +17 -17
  14. package/src/base/carousel.css +67 -67
  15. package/src/base/display.css +8 -8
  16. package/src/base/floating-navigation.css +32 -8
  17. package/src/base/graph-paper.css +49 -49
  18. package/src/base/pill.css +35 -35
  19. package/src/base/progress.css +21 -21
  20. package/src/base/range.css +57 -57
  21. package/src/base/rating.css +20 -18
  22. package/src/base/reveal.css +16 -16
  23. package/src/base/search-filter.css +61 -61
  24. package/src/base/shine.css +7 -7
  25. package/src/base/stepper.css +75 -75
  26. package/src/base/switch.css +55 -55
  27. package/src/base/table.css +49 -49
  28. package/src/base/tilt.css +4 -4
  29. package/src/base/timeline.css +38 -38
  30. package/src/base/tree.css +48 -15
  31. package/src/glass/button.css +11 -10
  32. package/src/glass/card.css +16 -13
  33. package/src/glass/floating-action.css +13 -13
  34. package/src/glass/floating-navigation.css +2 -2
  35. package/src/glass/input.css +32 -30
  36. package/src/glass/list.css +21 -21
  37. package/src/glass/menu.css +16 -16
  38. package/src/glass/range.css +10 -10
  39. package/src/glass/search-filter.css +8 -8
  40. package/src/glass/select.css +32 -32
  41. package/src/glass/switch.css +6 -6
  42. package/src/glass/table.css +14 -14
  43. package/src/glass/tabs.css +3 -3
  44. package/src/glass/timeline.css +8 -8
  45. package/src/glass/toggle.css +7 -7
  46. package/src/glass/toolbar.css +15 -15
  47. package/src/glass/tree.css +27 -21
  48. package/src/material/button.css +12 -8
  49. package/src/material/card.css +1 -1
  50. package/src/material/input.css +30 -14
  51. package/src/material/list.css +27 -23
  52. package/src/material/menu.css +16 -16
  53. package/src/material/range.css +11 -11
  54. package/src/material/search-filter.css +8 -8
  55. package/src/material/select.css +31 -31
  56. package/src/material/switch.css +6 -6
  57. package/src/material/table.css +20 -16
  58. package/src/material/timeline.css +8 -8
  59. package/src/material/toggle.css +7 -7
  60. package/src/material/toolbar.css +17 -16
  61. package/src/material/tree.css +22 -19
  62. package/src/minimal/button.css +7 -4
  63. package/src/minimal/card.css +13 -11
  64. package/src/minimal/floating-action.css +11 -11
  65. package/src/minimal/floating-navigation.css +1 -1
  66. package/src/minimal/input.css +14 -10
  67. package/src/minimal/list.css +27 -23
  68. package/src/minimal/menu.css +15 -15
  69. package/src/minimal/range.css +10 -10
  70. package/src/minimal/search-filter.css +8 -8
  71. package/src/minimal/select.css +4 -2
  72. package/src/minimal/switch.css +6 -6
  73. package/src/minimal/table.css +17 -15
  74. package/src/minimal/tabs.css +5 -3
  75. package/src/minimal/timeline.css +7 -7
  76. package/src/minimal/toggle.css +7 -7
  77. package/src/minimal/toolbar.css +17 -16
  78. package/src/minimal/tree.css +26 -20
  79. package/src/rokkit/button.css +40 -11
  80. package/src/rokkit/card.css +16 -14
  81. package/src/rokkit/floating-navigation.css +2 -2
  82. package/src/rokkit/input.css +10 -6
  83. package/src/rokkit/list.css +7 -2
  84. package/src/rokkit/range.css +11 -11
  85. package/src/rokkit/search-filter.css +8 -8
  86. package/src/rokkit/select.css +41 -36
  87. package/src/rokkit/switch.css +6 -6
  88. package/src/rokkit/table.css +17 -15
  89. package/src/rokkit/tabs.css +11 -6
  90. package/src/rokkit/timeline.css +8 -8
  91. package/src/rokkit/tree.css +35 -9
@@ -9,7 +9,7 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='glass'] [data-list]:focus-within {
12
- @apply ring-1 rounded ring-surface-z5/40;
12
+ @apply ring-surface-z5/40 rounded ring-1;
13
13
  }
14
14
 
15
15
  /* =============================================================================
@@ -17,34 +17,34 @@
17
17
  ============================================================================= */
18
18
 
19
19
  [data-style='glass'] [data-list] [data-list-item] {
20
- @apply text-surface-z8;
20
+ @apply text-surface-z8;
21
21
  }
22
22
 
23
23
  [data-style='glass'] [data-list] a[data-list-item],
24
24
  [data-style='glass'] [data-list] button[data-list-item] {
25
- @apply text-surface-z7;
25
+ @apply text-surface-z7;
26
26
  }
27
27
 
28
28
  /* Hover and focus (keyboard navigation) */
29
29
  [data-style='glass'] [data-list] [data-list-item]:hover:not(:disabled):not([data-disabled='true']),
30
30
  [data-style='glass'] [data-list] [data-list-item]:focus:not(:disabled):not([data-disabled='true']) {
31
- @apply text-surface-z10 outline-none bg-surface-z2/15;
31
+ @apply text-surface-z10 bg-surface-z2/15 outline-none;
32
32
  }
33
33
 
34
34
  /* Active state — muted when list not focused */
35
35
  [data-style='glass'] [data-list] [data-list-item][data-active='true'] {
36
- @apply bg-surface-z2/15 text-primary-z9;
36
+ @apply bg-surface-z2/15 text-primary-z9;
37
37
  }
38
38
 
39
39
  /* Active state — full highlight when list has focus */
40
40
  [data-style='glass'] [data-list]:focus-within [data-list-item][data-active='true'] {
41
- @apply bg-primary-z5/30 text-primary-z9;
41
+ @apply bg-primary-z5/30 text-primary-z9;
42
42
  }
43
43
 
44
44
  /* Active + hover/focus */
45
45
  [data-style='glass'] [data-list] [data-list-item][data-active='true']:hover:not(:disabled),
46
46
  [data-style='glass'] [data-list] [data-list-item][data-active='true']:focus:not(:disabled) {
47
- @apply bg-primary-z5/40;
47
+ @apply bg-primary-z5/40;
48
48
  }
49
49
 
50
50
  /* =============================================================================
@@ -52,32 +52,32 @@
52
52
  ============================================================================= */
53
53
 
54
54
  [data-style='glass'] [data-list] [data-list-item] [data-item-icon] {
55
- @apply text-surface-z5;
55
+ @apply text-surface-z5;
56
56
  }
57
57
 
58
58
  [data-style='glass'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
59
59
  [data-style='glass'] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon] {
60
- @apply text-surface-z7;
60
+ @apply text-surface-z7;
61
61
  }
62
62
 
63
63
  [data-style='glass'] [data-list] [data-list-item][data-active='true'] [data-item-icon] {
64
- @apply text-primary-z6;
64
+ @apply text-primary-z6;
65
65
  }
66
66
 
67
67
  [data-style='glass'] [data-list] [data-list-item] [data-item-description] {
68
- @apply text-surface-z5;
68
+ @apply text-surface-z5;
69
69
  }
70
70
 
71
71
  [data-style='glass'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
72
- @apply text-primary-z7;
72
+ @apply text-primary-z7;
73
73
  }
74
74
 
75
75
  [data-style='glass'] [data-list] [data-list-item] [data-item-badge] {
76
- @apply text-surface-z6 bg-surface-z2/15;
76
+ @apply text-surface-z6 bg-surface-z2/15;
77
77
  }
78
78
 
79
79
  [data-style='glass'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
80
- @apply text-primary-z8 bg-primary-z5/25;
80
+ @apply text-primary-z8 bg-primary-z5/25;
81
81
  }
82
82
 
83
83
  /* =============================================================================
@@ -85,12 +85,12 @@
85
85
  ============================================================================= */
86
86
 
87
87
  [data-style='glass'] [data-list] [data-list-group] {
88
- @apply text-surface-z6;
88
+ @apply text-surface-z6;
89
89
  }
90
90
 
91
91
  [data-style='glass'] [data-list] [data-list-group]:hover:not(:disabled),
92
92
  [data-style='glass'] [data-list] [data-list-group]:focus:not(:disabled) {
93
- @apply bg-surface-z3/25 text-surface-z8;
93
+ @apply bg-surface-z3/25 text-surface-z8;
94
94
  }
95
95
 
96
96
  /* =============================================================================
@@ -98,7 +98,7 @@
98
98
  ============================================================================= */
99
99
 
100
100
  [data-style='glass'] [data-list] [data-list-separator] {
101
- @apply bg-surface-z5/20;
101
+ @apply bg-surface-z5/20;
102
102
  }
103
103
 
104
104
  /* =============================================================================
@@ -106,17 +106,17 @@
106
106
  ============================================================================= */
107
107
 
108
108
  [data-style='glass'] [data-list] [data-list-item][data-selected='true'] {
109
- @apply bg-primary-z5/20 text-primary-z9;
109
+ @apply bg-primary-z5/20 text-primary-z9;
110
110
  }
111
111
 
112
112
  [data-style='glass'] [data-list]:focus-within [data-list-item][data-selected='true'] {
113
- @apply bg-primary-z5/30;
113
+ @apply bg-primary-z5/30;
114
114
  }
115
115
 
116
116
  [data-style='glass'] [data-list] [data-list-item][data-selected='true']:hover:not(:disabled) {
117
- @apply bg-primary-z5/40;
117
+ @apply bg-primary-z5/40;
118
118
  }
119
119
 
120
120
  [data-style='glass'] [data-list] [data-list-item][data-selected='true'] [data-item-icon] {
121
- @apply text-primary-z6;
121
+ @apply text-primary-z6;
122
122
  }
@@ -9,32 +9,32 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='glass'] [data-menu-trigger] {
12
- @apply backdrop-blur-md text-surface-z8 border bg-surface-z1/70 border-surface-z5/20;
12
+ @apply text-surface-z8 bg-surface-z1/70 border-surface-z5/20 border backdrop-blur-md;
13
13
  }
14
14
 
15
15
  [data-style='glass'] [data-menu-trigger]:hover:not(:disabled) {
16
- @apply text-surface-z10 bg-surface-z2/80 border-surface-z5/30;
16
+ @apply text-surface-z10 bg-surface-z2/80 border-surface-z5/30;
17
17
  }
18
18
 
19
19
  [data-style='glass'] [data-menu-trigger]:focus-visible {
20
- @apply outline-none ring-1 ring-surface-z5/40;
20
+ @apply ring-surface-z5/40 ring-1 outline-none;
21
21
  }
22
22
 
23
23
  [data-style='glass'] [data-menu][data-open='true'] [data-menu-trigger] {
24
- @apply bg-primary-z5/30 border-primary-z5/50;
24
+ @apply bg-primary-z5/30 border-primary-z5/50;
25
25
  }
26
26
 
27
27
  /* Trigger elements */
28
28
  [data-style='glass'] [data-menu-trigger] [data-menu-icon] {
29
- @apply text-surface-z5;
29
+ @apply text-surface-z5;
30
30
  }
31
31
 
32
32
  [data-style='glass'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
33
- @apply text-surface-z7;
33
+ @apply text-surface-z7;
34
34
  }
35
35
 
36
36
  [data-style='glass'] [data-menu-trigger] [data-menu-arrow] {
37
- @apply text-surface-z5;
37
+ @apply text-surface-z5;
38
38
  }
39
39
 
40
40
  /* =============================================================================
@@ -42,7 +42,7 @@
42
42
  ============================================================================= */
43
43
 
44
44
  [data-style='glass'] [data-menu-dropdown] {
45
- @apply backdrop-blur-lg border shadow-lg bg-surface-z2/50 border-surface-z5/20;
45
+ @apply bg-surface-z2/50 border-surface-z5/20 border shadow-lg backdrop-blur-lg;
46
46
  }
47
47
 
48
48
  /* =============================================================================
@@ -50,29 +50,29 @@
50
50
  ============================================================================= */
51
51
 
52
52
  [data-style='glass'] [data-menu-item] {
53
- @apply text-surface-z8;
53
+ @apply text-surface-z8;
54
54
  }
55
55
 
56
56
  [data-style='glass'] [data-menu-item]:hover:not(:disabled),
57
57
  [data-style='glass'] [data-menu-item]:focus:not(:disabled) {
58
- @apply text-surface-z10 outline-none bg-surface-z2/15;
58
+ @apply text-surface-z10 bg-surface-z2/15 outline-none;
59
59
  }
60
60
 
61
61
  [data-style='glass'] [data-menu-item]:focus-visible {
62
- @apply outline-none ring-1 ring-inset ring-surface-z5/40;
62
+ @apply ring-surface-z5/40 ring-1 outline-none ring-inset;
63
63
  }
64
64
 
65
65
  /* Item elements */
66
66
  [data-style='glass'] [data-menu-item] [data-item-icon] {
67
- @apply text-surface-z5;
67
+ @apply text-surface-z5;
68
68
  }
69
69
 
70
70
  [data-style='glass'] [data-menu-item]:hover:not(:disabled) [data-item-icon] {
71
- @apply text-surface-z7;
71
+ @apply text-surface-z7;
72
72
  }
73
73
 
74
74
  [data-style='glass'] [data-menu-item] [data-item-description] {
75
- @apply text-surface-z5;
75
+ @apply text-surface-z5;
76
76
  }
77
77
 
78
78
  /* =============================================================================
@@ -80,7 +80,7 @@
80
80
  ============================================================================= */
81
81
 
82
82
  [data-style='glass'] [data-menu-group] {
83
- @apply text-surface-z5;
83
+ @apply text-surface-z5;
84
84
  }
85
85
 
86
86
  /* =============================================================================
@@ -88,5 +88,5 @@
88
88
  ============================================================================= */
89
89
 
90
90
  [data-style='glass'] [data-menu-separator] {
91
- @apply bg-surface-z5/20;
91
+ @apply bg-surface-z5/20;
92
92
  }
@@ -9,11 +9,11 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='glass'] [data-range-bar] {
12
- @apply bg-surface-z2/50 border border-surface-z5/20;
12
+ @apply bg-surface-z2/50 border-surface-z5/20 border;
13
13
  }
14
14
 
15
15
  [data-style='glass'] [data-range-selected] {
16
- @apply bg-primary/40;
16
+ @apply bg-primary/40;
17
17
  }
18
18
 
19
19
  /* =============================================================================
@@ -21,15 +21,15 @@
21
21
  ============================================================================= */
22
22
 
23
23
  [data-style='glass'] [data-range-thumb] {
24
- @apply bg-primary/80 border-primary/50 backdrop-blur-sm;
24
+ @apply bg-primary/80 border-primary/50 backdrop-blur-sm;
25
25
  }
26
26
 
27
27
  [data-style='glass'] [data-range-thumb][data-sliding] {
28
- box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 20%, transparent);
28
+ box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 20%, transparent);
29
29
  }
30
30
 
31
31
  [data-style='glass'] [data-range-thumb]:focus-visible {
32
- box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 20%, transparent);
32
+ box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 20%, transparent);
33
33
  }
34
34
 
35
35
  /* =============================================================================
@@ -37,15 +37,15 @@
37
37
  ============================================================================= */
38
38
 
39
39
  [data-style='glass'] [data-range-tick] {
40
- @apply text-surface-z6;
40
+ @apply text-surface-z6;
41
41
  }
42
42
 
43
43
  [data-style='glass'] [data-tick-bar] {
44
- @apply border-surface-z5/40;
44
+ @apply border-surface-z5/40;
45
45
  }
46
46
 
47
47
  [data-style='glass'] [data-tick-label] {
48
- @apply text-surface-z6;
48
+ @apply text-surface-z6;
49
49
  }
50
50
 
51
51
  /* =============================================================================
@@ -53,9 +53,9 @@
53
53
  ============================================================================= */
54
54
 
55
55
  [data-style='glass'] [data-range][data-disabled] [data-range-thumb] {
56
- @apply bg-surface-z4/50 border-surface-z4/30;
56
+ @apply bg-surface-z4/50 border-surface-z4/30;
57
57
  }
58
58
 
59
59
  [data-style='glass'] [data-range][data-disabled] [data-range-selected] {
60
- @apply bg-surface-z4/30;
60
+ @apply bg-surface-z4/30;
61
61
  }
@@ -9,15 +9,15 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='glass'] [data-search-input] {
12
- @apply text-surface-z8 border-surface-z5/20 bg-surface-z1/50 border backdrop-blur-md;
12
+ @apply text-surface-z8 border-surface-z5/20 bg-surface-z1/50 border backdrop-blur-md;
13
13
  }
14
14
 
15
15
  [data-style='glass'] [data-search-input]:focus {
16
- @apply border-primary-z5/50 ring-1 ring-surface-z5/30;
16
+ @apply border-primary-z5/50 ring-surface-z5/30 ring-1;
17
17
  }
18
18
 
19
19
  [data-style='glass'] [data-search-input]::placeholder {
20
- @apply text-surface-z5;
20
+ @apply text-surface-z5;
21
21
  }
22
22
 
23
23
  /* =============================================================================
@@ -25,11 +25,11 @@
25
25
  ============================================================================= */
26
26
 
27
27
  [data-style='glass'] [data-search-clear] {
28
- @apply text-surface-z5;
28
+ @apply text-surface-z5;
29
29
  }
30
30
 
31
31
  [data-style='glass'] [data-search-clear]:hover {
32
- @apply text-surface-z9;
32
+ @apply text-surface-z9;
33
33
  }
34
34
 
35
35
  /* =============================================================================
@@ -37,13 +37,13 @@
37
37
  ============================================================================= */
38
38
 
39
39
  [data-style='glass'] [data-search-tag] {
40
- @apply text-surface-z8 bg-surface-z2/15;
40
+ @apply text-surface-z8 bg-surface-z2/15;
41
41
  }
42
42
 
43
43
  [data-style='glass'] [data-search-tag-remove] {
44
- @apply text-surface-z6;
44
+ @apply text-surface-z6;
45
45
  }
46
46
 
47
47
  [data-style='glass'] [data-search-tag-remove]:hover {
48
- @apply text-surface-z9;
48
+ @apply text-surface-z9;
49
49
  }
@@ -9,7 +9,7 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='glass'] [data-select][data-open='true'] {
12
- z-index: 50;
12
+ z-index: 50;
13
13
  }
14
14
 
15
15
  /* =============================================================================
@@ -17,19 +17,19 @@
17
17
  ============================================================================= */
18
18
 
19
19
  [data-style='glass'] [data-select-trigger] {
20
- @apply backdrop-blur-md text-surface-z8 border bg-surface-z1/70 border-surface-z5/20;
20
+ @apply text-surface-z8 bg-surface-z1/70 border-surface-z5/20 border backdrop-blur-md;
21
21
  }
22
22
 
23
23
  [data-style='glass'] [data-select-trigger]:hover:not(:disabled) {
24
- @apply text-surface-z10 bg-surface-z2/80 border-surface-z5/30;
24
+ @apply text-surface-z10 bg-surface-z2/80 border-surface-z5/30;
25
25
  }
26
26
 
27
27
  [data-style='glass'] [data-select-trigger]:focus-visible {
28
- @apply outline-none ring-1 ring-surface-z5/40;
28
+ @apply ring-surface-z5/40 ring-1 outline-none;
29
29
  }
30
30
 
31
31
  [data-style='glass'] [data-select][data-open='true'] [data-select-trigger] {
32
- @apply border-primary-z5/50;
32
+ @apply border-primary-z5/50;
33
33
  }
34
34
 
35
35
  /* =============================================================================
@@ -37,7 +37,7 @@
37
37
  ============================================================================= */
38
38
 
39
39
  [data-style='glass'] [data-select-placeholder] {
40
- @apply text-surface-z5;
40
+ @apply text-surface-z5;
41
41
  }
42
42
 
43
43
  /* =============================================================================
@@ -45,11 +45,11 @@
45
45
  ============================================================================= */
46
46
 
47
47
  [data-style='glass'] [data-select-arrow] {
48
- @apply text-surface-z5;
48
+ @apply text-surface-z5;
49
49
  }
50
50
 
51
51
  [data-style='glass'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
52
- @apply text-surface-z7;
52
+ @apply text-surface-z7;
53
53
  }
54
54
 
55
55
  /* =============================================================================
@@ -57,15 +57,15 @@
57
57
  ============================================================================= */
58
58
 
59
59
  [data-style='glass'] [data-select-tag] {
60
- @apply text-surface-z8 bg-surface-z2/15;
60
+ @apply text-surface-z8 bg-surface-z2/15;
61
61
  }
62
62
 
63
63
  [data-style='glass'] [data-select-tag-remove] {
64
- @apply text-surface-z6;
64
+ @apply text-surface-z6;
65
65
  }
66
66
 
67
67
  [data-style='glass'] [data-select-tag-remove]:hover {
68
- @apply text-surface-z9;
68
+ @apply text-surface-z9;
69
69
  }
70
70
 
71
71
  /* =============================================================================
@@ -73,7 +73,7 @@
73
73
  ============================================================================= */
74
74
 
75
75
  [data-style='glass'] [data-select-dropdown] {
76
- @apply backdrop-blur-lg border shadow-lg bg-surface-z2/50 border-surface-z5/20;
76
+ @apply bg-surface-z2/50 border-surface-z5/20 border shadow-lg backdrop-blur-lg;
77
77
  }
78
78
 
79
79
  /* =============================================================================
@@ -81,60 +81,60 @@
81
81
  ============================================================================= */
82
82
 
83
83
  [data-style='glass'] [data-select-option] {
84
- @apply text-surface-z8;
84
+ @apply text-surface-z8;
85
85
  }
86
86
 
87
87
  [data-style='glass'] [data-select-option]:hover:not(:disabled),
88
88
  [data-style='glass'] [data-select-option]:focus:not(:disabled) {
89
- @apply text-surface-z10 bg-surface-z2/80;
89
+ @apply text-surface-z10 bg-surface-z2/80;
90
90
  }
91
91
 
92
92
  [data-style='glass'] [data-select-option]:focus-visible {
93
- @apply outline-none ring-1 ring-inset ring-surface-z5/40;
93
+ @apply ring-surface-z5/40 ring-1 outline-none ring-inset;
94
94
  }
95
95
 
96
96
  [data-style='glass'] [data-select-option][data-selected='true'] {
97
- @apply text-primary-z9 bg-primary-z5/40;
97
+ @apply text-primary-z9 bg-primary-z5/40;
98
98
  }
99
99
 
100
100
  [data-style='glass'] [data-select-option][data-selected='true']:hover:not(:disabled),
101
101
  [data-style='glass'] [data-select-option][data-selected='true']:focus:not(:disabled) {
102
- @apply bg-primary-z5/60;
102
+ @apply bg-primary-z5/60;
103
103
  }
104
104
 
105
105
  /* Check mark */
106
106
  [data-style='glass'] [data-select-check] {
107
- @apply text-primary-z6;
107
+ @apply text-primary-z6;
108
108
  }
109
109
 
110
110
  /* Checkbox */
111
111
  [data-style='glass'] [data-select-checkbox] {
112
- @apply border-surface-z5/40 bg-surface-z1/70;
112
+ @apply border-surface-z5/40 bg-surface-z1/70;
113
113
  }
114
114
 
115
115
  [data-style='glass'] [data-select-checkbox][data-checked='true'] {
116
- @apply bg-primary-z5 border-primary-z5 text-white;
116
+ @apply bg-primary-z5 border-primary-z5 text-white;
117
117
  }
118
118
 
119
119
  /* Item elements */
120
120
  [data-style='glass'] [data-select-option] [data-item-icon] {
121
- @apply text-surface-z5;
121
+ @apply text-surface-z5;
122
122
  }
123
123
 
124
124
  [data-style='glass'] [data-select-option]:hover:not(:disabled) [data-item-icon] {
125
- @apply text-surface-z7;
125
+ @apply text-surface-z7;
126
126
  }
127
127
 
128
128
  [data-style='glass'] [data-select-option][data-selected='true'] [data-item-icon] {
129
- @apply text-primary-z6;
129
+ @apply text-primary-z6;
130
130
  }
131
131
 
132
132
  [data-style='glass'] [data-select-option] [data-item-description] {
133
- @apply text-surface-z5;
133
+ @apply text-surface-z5;
134
134
  }
135
135
 
136
136
  [data-style='glass'] [data-select-option][data-selected='true'] [data-item-description] {
137
- @apply text-primary-z7;
137
+ @apply text-primary-z7;
138
138
  }
139
139
 
140
140
  /* =============================================================================
@@ -142,7 +142,7 @@
142
142
  ============================================================================= */
143
143
 
144
144
  [data-style='glass'] [data-select-group-label] {
145
- @apply text-surface-z5;
145
+ @apply text-surface-z5;
146
146
  }
147
147
 
148
148
  /* =============================================================================
@@ -150,7 +150,7 @@
150
150
  ============================================================================= */
151
151
 
152
152
  [data-style='glass'] [data-select-divider] {
153
- @apply bg-surface-z5/20;
153
+ @apply bg-surface-z5/20;
154
154
  }
155
155
 
156
156
  /* =============================================================================
@@ -158,21 +158,21 @@
158
158
  ============================================================================= */
159
159
 
160
160
  [data-style='glass'] [data-select-filter] {
161
- @apply bg-surface-z2/30;
161
+ @apply bg-surface-z2/30;
162
162
  }
163
163
 
164
164
  [data-style='glass'] [data-select-filter-input] {
165
- @apply text-surface-z8 border-surface-z5/20 bg-surface-z1/50 border;
165
+ @apply text-surface-z8 border-surface-z5/20 bg-surface-z1/50 border;
166
166
  }
167
167
 
168
168
  [data-style='glass'] [data-select-filter-input]:focus {
169
- @apply border-primary-z5/50 ring-1 ring-surface-z5/30;
169
+ @apply border-primary-z5/50 ring-surface-z5/30 ring-1;
170
170
  }
171
171
 
172
172
  [data-style='glass'] [data-select-filter-input]::placeholder {
173
- @apply text-surface-z5;
173
+ @apply text-surface-z5;
174
174
  }
175
175
 
176
176
  [data-style='glass'] [data-select-empty] {
177
- @apply text-surface-z5;
177
+ @apply text-surface-z5;
178
178
  }
@@ -3,26 +3,26 @@
3
3
  */
4
4
 
5
5
  [data-style='glass'] [data-switch-track] {
6
- @apply bg-surface-z2/50 border-surface-z5/20 backdrop-blur-sm border;
6
+ @apply bg-surface-z2/50 border-surface-z5/20 border backdrop-blur-sm;
7
7
  }
8
8
 
9
9
  [data-style='glass'] [data-switch-thumb] {
10
- @apply bg-surface-z7/80 backdrop-blur-sm shadow-sm;
10
+ @apply bg-surface-z7/80 shadow-sm backdrop-blur-sm;
11
11
  }
12
12
 
13
13
  [data-style='glass'] [data-switch]:focus-visible [data-switch-track] {
14
- @apply ring-2 ring-primary-z5/70 ring-offset-1;
14
+ @apply ring-primary-z5/70 ring-2 ring-offset-1;
15
15
  }
16
16
 
17
17
  /* On state */
18
18
  [data-style='glass'] [data-switch][aria-checked='true'] [data-switch-track] {
19
- @apply bg-primary-z5/40 border-primary-z5/50;
19
+ @apply bg-primary-z5/40 border-primary-z5/50;
20
20
  }
21
21
 
22
22
  [data-style='glass'] [data-switch][aria-checked='true'] [data-switch-thumb] {
23
- @apply bg-white/90 shadow-md;
23
+ @apply bg-white/90 shadow-md;
24
24
  }
25
25
 
26
26
  [data-style='glass'] [data-switch-label] {
27
- @apply text-surface-z7;
27
+ @apply text-surface-z7;
28
28
  }
@@ -9,25 +9,25 @@
9
9
  ============================================================================= */
10
10
 
11
11
  [data-style='glass'] [data-table-header] th {
12
- @apply text-surface-z6 border-b border-surface-z5/20;
12
+ @apply text-surface-z6 border-surface-z5/20 border-b;
13
13
  }
14
14
 
15
15
  [data-style='glass'] [data-table-header-cell][data-sortable='true']:hover {
16
- @apply text-surface-z9;
16
+ @apply text-surface-z9;
17
17
  }
18
18
 
19
19
  [data-style='glass'] [data-table-header-cell][data-sort-order='ascending'],
20
20
  [data-style='glass'] [data-table-header-cell][data-sort-order='descending'] {
21
- @apply text-primary-z8;
21
+ @apply text-primary-z8;
22
22
  }
23
23
 
24
24
  [data-style='glass'] [data-table-sort-icon] {
25
- @apply text-surface-z5;
25
+ @apply text-surface-z5;
26
26
  }
27
27
 
28
28
  [data-style='glass'] [data-table-header-cell][data-sort-order='ascending'] [data-table-sort-icon],
29
29
  [data-style='glass'] [data-table-header-cell][data-sort-order='descending'] [data-table-sort-icon] {
30
- @apply text-primary-z6;
30
+ @apply text-primary-z6;
31
31
  }
32
32
 
33
33
  /* =============================================================================
@@ -35,7 +35,7 @@
35
35
  ============================================================================= */
36
36
 
37
37
  [data-style='glass'] [data-table-caption] {
38
- @apply text-surface-z7;
38
+ @apply text-surface-z7;
39
39
  }
40
40
 
41
41
  /* =============================================================================
@@ -43,19 +43,19 @@
43
43
  ============================================================================= */
44
44
 
45
45
  [data-style='glass'] [data-table-row] {
46
- @apply text-surface-z8 border-b border-surface-z5/10;
46
+ @apply text-surface-z8 border-surface-z5/10 border-b;
47
47
  }
48
48
 
49
49
  [data-style='glass'] [data-table-row]:hover {
50
- @apply bg-surface-z2/80;
50
+ @apply bg-surface-z2/80;
51
51
  }
52
52
 
53
53
  [data-style='glass'] [data-table-row]:focus {
54
- @apply bg-surface-z2/80 text-surface-z10 outline-none;
54
+ @apply bg-surface-z2/80 text-surface-z10 outline-none;
55
55
  }
56
56
 
57
57
  [data-style='glass'] [data-table-row][data-selected='true'] {
58
- @apply text-primary-z9 bg-primary-z5/40;
58
+ @apply text-primary-z9 bg-primary-z5/40;
59
59
  }
60
60
 
61
61
  /* =============================================================================
@@ -63,7 +63,7 @@
63
63
  ============================================================================= */
64
64
 
65
65
  [data-style='glass'] [data-striped='true'] [data-table-body] tr:nth-child(even) {
66
- @apply bg-surface-z2/30;
66
+ @apply bg-surface-z2/30;
67
67
  }
68
68
 
69
69
  /* =============================================================================
@@ -71,7 +71,7 @@
71
71
  ============================================================================= */
72
72
 
73
73
  [data-style='glass'] [data-table-empty] {
74
- @apply text-surface-z5;
74
+ @apply text-surface-z5;
75
75
  }
76
76
 
77
77
  /* =============================================================================
@@ -79,9 +79,9 @@
79
79
  ============================================================================= */
80
80
 
81
81
  [data-style='glass'] [data-table-cell] [data-cell-icon] {
82
- @apply text-surface-z5;
82
+ @apply text-surface-z5;
83
83
  }
84
84
 
85
85
  [data-style='glass'] [data-table-row][data-selected='true'] [data-cell-icon] {
86
- @apply text-primary-z6;
86
+ @apply text-primary-z6;
87
87
  }