@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.
- package/README.md +68 -80
- package/build.mjs +148 -150
- package/dist/base.css +689 -623
- package/dist/glass.css +212 -203
- package/dist/index.css +1464 -1257
- package/dist/material.css +203 -171
- package/dist/minimal.css +171 -147
- package/dist/rokkit.css +189 -113
- package/package.json +8 -2
- package/src/base/breadcrumbs.css +28 -28
- package/src/base/button.css +10 -3
- package/src/base/card.css +17 -17
- package/src/base/carousel.css +67 -67
- package/src/base/display.css +8 -8
- package/src/base/floating-navigation.css +32 -8
- package/src/base/graph-paper.css +49 -49
- package/src/base/pill.css +35 -35
- package/src/base/progress.css +21 -21
- package/src/base/range.css +57 -57
- package/src/base/rating.css +20 -18
- package/src/base/reveal.css +16 -16
- package/src/base/search-filter.css +61 -61
- package/src/base/shine.css +7 -7
- package/src/base/stepper.css +75 -75
- package/src/base/switch.css +55 -55
- package/src/base/table.css +49 -49
- package/src/base/tilt.css +4 -4
- package/src/base/timeline.css +38 -38
- package/src/base/tree.css +48 -15
- package/src/glass/button.css +11 -10
- package/src/glass/card.css +16 -13
- package/src/glass/floating-action.css +13 -13
- package/src/glass/floating-navigation.css +2 -2
- package/src/glass/input.css +32 -30
- package/src/glass/list.css +21 -21
- package/src/glass/menu.css +16 -16
- package/src/glass/range.css +10 -10
- package/src/glass/search-filter.css +8 -8
- package/src/glass/select.css +32 -32
- package/src/glass/switch.css +6 -6
- package/src/glass/table.css +14 -14
- package/src/glass/tabs.css +3 -3
- package/src/glass/timeline.css +8 -8
- package/src/glass/toggle.css +7 -7
- package/src/glass/toolbar.css +15 -15
- package/src/glass/tree.css +27 -21
- package/src/material/button.css +12 -8
- package/src/material/card.css +1 -1
- package/src/material/input.css +30 -14
- package/src/material/list.css +27 -23
- package/src/material/menu.css +16 -16
- package/src/material/range.css +11 -11
- package/src/material/search-filter.css +8 -8
- package/src/material/select.css +31 -31
- package/src/material/switch.css +6 -6
- package/src/material/table.css +20 -16
- package/src/material/timeline.css +8 -8
- package/src/material/toggle.css +7 -7
- package/src/material/toolbar.css +17 -16
- package/src/material/tree.css +22 -19
- package/src/minimal/button.css +7 -4
- package/src/minimal/card.css +13 -11
- package/src/minimal/floating-action.css +11 -11
- package/src/minimal/floating-navigation.css +1 -1
- package/src/minimal/input.css +14 -10
- package/src/minimal/list.css +27 -23
- package/src/minimal/menu.css +15 -15
- package/src/minimal/range.css +10 -10
- package/src/minimal/search-filter.css +8 -8
- package/src/minimal/select.css +4 -2
- package/src/minimal/switch.css +6 -6
- package/src/minimal/table.css +17 -15
- package/src/minimal/tabs.css +5 -3
- package/src/minimal/timeline.css +7 -7
- package/src/minimal/toggle.css +7 -7
- package/src/minimal/toolbar.css +17 -16
- package/src/minimal/tree.css +26 -20
- package/src/rokkit/button.css +40 -11
- package/src/rokkit/card.css +16 -14
- package/src/rokkit/floating-navigation.css +2 -2
- package/src/rokkit/input.css +10 -6
- package/src/rokkit/list.css +7 -2
- package/src/rokkit/range.css +11 -11
- package/src/rokkit/search-filter.css +8 -8
- package/src/rokkit/select.css +41 -36
- package/src/rokkit/switch.css +6 -6
- package/src/rokkit/table.css +17 -15
- package/src/rokkit/tabs.css +11 -6
- package/src/rokkit/timeline.css +8 -8
- package/src/rokkit/tree.css +35 -9
package/src/material/toolbar.css
CHANGED
|
@@ -9,25 +9,25 @@
|
|
|
9
9
|
============================================================================= */
|
|
10
10
|
|
|
11
11
|
[data-style='material'] [data-toolbar] {
|
|
12
|
-
|
|
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
|
-
|
|
18
|
+
@apply shadow-md;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
[data-style='material'] [data-toolbar][data-toolbar-position='bottom'] {
|
|
22
|
-
|
|
22
|
+
@apply shadow-md;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
[data-style='material'] [data-toolbar][data-toolbar-position='left'] {
|
|
26
|
-
|
|
26
|
+
@apply shadow-md;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
[data-style='material'] [data-toolbar][data-toolbar-position='right'] {
|
|
30
|
-
|
|
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
|
-
|
|
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
|
-
|
|
42
|
+
@apply bg-surface-z2 text-surface-z9;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
-
[data-style='material']
|
|
46
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
64
|
+
@apply text-surface-z6;
|
|
64
65
|
}
|
|
65
66
|
|
|
66
67
|
[data-style='material'] [data-toolbar-item]:hover:not(:disabled) [data-toolbar-icon] {
|
|
67
|
-
|
|
68
|
+
@apply text-surface-z8;
|
|
68
69
|
}
|
|
69
70
|
|
|
70
71
|
[data-style='material'] [data-toolbar-item][data-active='true'] [data-toolbar-icon] {
|
|
71
|
-
|
|
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
|
-
|
|
80
|
+
@apply bg-surface-z3;
|
|
80
81
|
}
|
|
81
82
|
|
|
82
83
|
[data-style='material'] [data-toolbar-divider] {
|
|
83
|
-
|
|
84
|
+
@apply bg-surface-z3;
|
|
84
85
|
}
|
package/src/material/tree.css
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
============================================================================= */
|
|
10
10
|
|
|
11
11
|
[data-style='material'] [data-tree]:focus-within {
|
|
12
|
-
|
|
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
|
-
|
|
20
|
+
@apply text-surface-z5 rounded-full;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
[data-style='material'] [data-tree-toggle-btn]:hover {
|
|
24
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
67
|
+
@apply text-primary-z6;
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
[data-style='material'] [data-tree-item-content] [data-item-description] {
|
|
71
|
-
|
|
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
|
-
|
|
75
|
+
@apply text-primary-z7;
|
|
76
76
|
}
|
|
77
77
|
|
|
78
78
|
[data-style='material'] [data-tree-item-content] [data-item-badge] {
|
|
79
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
95
|
+
@apply text-primary-z9;
|
|
96
96
|
}
|
|
97
97
|
|
|
98
|
-
[data-style='material']
|
|
99
|
-
|
|
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
|
}
|
package/src/minimal/button.css
CHANGED
|
@@ -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']
|
|
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']
|
|
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']
|
|
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
|
|
154
|
+
@apply ring-surface-z5 ring-1 outline-none;
|
|
152
155
|
}
|
package/src/minimal/card.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
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
|
-
|
|
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
|
-
|
|
17
|
-
|
|
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
|
-
|
|
23
|
+
@apply border-surface-z6 shadow;
|
|
22
24
|
}
|
|
23
25
|
|
|
24
26
|
[data-style='minimal'] [data-card][data-card-interactive]:active {
|
|
25
|
-
|
|
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
|
-
|
|
35
|
+
@apply border-surface-z3 border-b;
|
|
34
36
|
}
|
|
35
37
|
|
|
36
38
|
[data-style='minimal'] [data-card-body] {
|
|
37
|
-
|
|
39
|
+
@apply text-surface-z8;
|
|
38
40
|
}
|
|
39
41
|
|
|
40
42
|
[data-style='minimal'] [data-card-footer] {
|
|
41
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
25
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
58
|
+
background: rgba(0, 0, 0, 0.2);
|
|
59
59
|
}
|
package/src/minimal/input.css
CHANGED
|
@@ -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
|
|
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']
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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']
|
|
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
|
|
package/src/minimal/list.css
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
============================================================================= */
|
|
10
10
|
|
|
11
11
|
[data-style='minimal'] [data-list]:focus-within {
|
|
12
|
-
|
|
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
|
-
|
|
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
|
-
|
|
25
|
+
@apply text-surface-z6;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
/* Hover and focus (keyboard navigation) */
|
|
29
|
-
[data-style='minimal']
|
|
30
|
-
[data-
|
|
31
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
68
|
+
@apply text-primary-z5;
|
|
65
69
|
}
|
|
66
70
|
|
|
67
71
|
[data-style='minimal'] [data-list] [data-list-item] [data-item-description] {
|
|
68
|
-
|
|
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
|
-
|
|
76
|
+
@apply text-primary-z6;
|
|
73
77
|
}
|
|
74
78
|
|
|
75
79
|
[data-style='minimal'] [data-list] [data-list-item] [data-item-badge] {
|
|
76
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
125
|
+
@apply text-primary-z5;
|
|
122
126
|
}
|