@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.
- package/build.mjs +4 -2
- package/package.json +3 -2
- package/src/base/carousel.css +2 -1
- package/src/base/code-block.css +76 -0
- package/src/base/display.css +16 -8
- package/src/base/frame.css +36 -0
- package/src/base/index.css +2 -0
- package/src/base/input.css +49 -10
- package/src/base/nav-content.css +3 -3
- package/src/base/stepper.css +14 -7
- package/src/base/tabs.css +15 -2
- package/src/base/typography.css +32 -13
- package/src/frosted/button.css +27 -27
- package/src/frosted/card.css +8 -8
- package/src/frosted/chart.css +6 -6
- package/src/frosted/code-block.css +33 -0
- package/src/frosted/dropdown.css +9 -9
- package/src/frosted/floating-action.css +10 -10
- package/src/frosted/floating-navigation.css +13 -13
- package/src/frosted/frame.css +17 -0
- package/src/frosted/index.css +2 -0
- package/src/frosted/input.css +16 -16
- package/src/frosted/list.css +25 -25
- package/src/frosted/menu.css +13 -13
- package/src/frosted/message.css +8 -8
- package/src/frosted/range.css +8 -8
- package/src/frosted/search-filter.css +8 -8
- package/src/frosted/select.css +31 -31
- package/src/frosted/status-list.css +17 -17
- package/src/frosted/step-indicator.css +8 -8
- package/src/frosted/swatch.css +3 -3
- package/src/frosted/switch.css +3 -3
- package/src/frosted/table.css +16 -16
- package/src/frosted/tabs.css +8 -8
- package/src/frosted/timeline.css +5 -5
- package/src/frosted/toc.css +4 -4
- package/src/frosted/toggle.css +7 -7
- package/src/frosted/toolbar.css +15 -15
- package/src/frosted/tree.css +19 -19
- package/src/material/button.css +29 -29
- package/src/material/card.css +12 -12
- package/src/material/chart.css +6 -6
- package/src/material/code-block.css +33 -0
- package/src/material/dropdown.css +11 -11
- package/src/material/floating-action.css +10 -10
- package/src/material/floating-navigation.css +13 -13
- package/src/material/frame.css +17 -0
- package/src/material/index.css +2 -0
- package/src/material/input.css +21 -21
- package/src/material/list.css +23 -23
- package/src/material/menu.css +16 -16
- package/src/material/message.css +8 -8
- package/src/material/range.css +8 -8
- package/src/material/search-filter.css +8 -8
- package/src/material/select.css +31 -31
- package/src/material/status-list.css +17 -17
- package/src/material/step-indicator.css +8 -8
- package/src/material/swatch.css +3 -3
- package/src/material/switch.css +6 -6
- package/src/material/table.css +16 -16
- package/src/material/tabs.css +7 -7
- package/src/material/timeline.css +5 -5
- package/src/material/toc.css +4 -4
- package/src/material/toggle.css +6 -6
- package/src/material/toolbar.css +11 -11
- package/src/material/tree.css +17 -17
- package/src/minimal/button.css +30 -30
- package/src/minimal/card.css +13 -13
- package/src/minimal/chart.css +6 -6
- package/src/minimal/code-block.css +33 -0
- package/src/minimal/dropdown.css +11 -11
- package/src/minimal/floating-action.css +10 -10
- package/src/minimal/floating-navigation.css +12 -12
- package/src/minimal/frame.css +17 -0
- package/src/minimal/index.css +2 -0
- package/src/minimal/input.css +24 -24
- package/src/minimal/list.css +52 -26
- package/src/minimal/menu.css +15 -15
- package/src/minimal/message.css +8 -8
- package/src/minimal/range.css +7 -7
- package/src/minimal/search-filter.css +8 -8
- package/src/minimal/select.css +27 -27
- package/src/minimal/status-list.css +17 -17
- package/src/minimal/step-indicator.css +8 -8
- package/src/minimal/swatch.css +3 -3
- package/src/minimal/switch.css +6 -6
- package/src/minimal/table.css +16 -16
- package/src/minimal/tabs.css +14 -14
- package/src/minimal/timeline.css +4 -4
- package/src/minimal/toc.css +4 -4
- package/src/minimal/toggle.css +7 -7
- package/src/minimal/toolbar.css +14 -14
- package/src/minimal/tree.css +24 -18
- package/src/rokkit/avatar.css +6 -6
- package/src/rokkit/badge.css +5 -5
- package/src/rokkit/button.css +55 -37
- package/src/rokkit/card.css +11 -11
- package/src/rokkit/chart.css +6 -6
- package/src/rokkit/code-block.css +33 -0
- package/src/rokkit/connector.css +1 -1
- package/src/rokkit/divider.css +5 -5
- package/src/rokkit/dropdown.css +11 -11
- package/src/rokkit/floating-action.css +11 -11
- package/src/rokkit/floating-navigation.css +15 -15
- package/src/rokkit/frame.css +17 -0
- package/src/rokkit/grid.css +8 -8
- package/src/rokkit/index.css +2 -0
- package/src/rokkit/input.css +17 -17
- package/src/rokkit/list.css +24 -24
- package/src/rokkit/menu.css +14 -14
- package/src/rokkit/message.css +12 -12
- package/src/rokkit/range.css +10 -10
- package/src/rokkit/search-filter.css +8 -8
- package/src/rokkit/select.css +34 -34
- package/src/rokkit/status-list.css +17 -17
- package/src/rokkit/step-indicator.css +8 -8
- package/src/rokkit/swatch.css +3 -3
- package/src/rokkit/switch.css +6 -6
- package/src/rokkit/table.css +16 -16
- package/src/rokkit/tabs.css +31 -28
- package/src/rokkit/timeline.css +5 -5
- package/src/rokkit/toc.css +4 -4
- package/src/rokkit/toggle.css +21 -10
- package/src/rokkit/toolbar.css +15 -15
- package/src/rokkit/tooltip.css +1 -1
- package/src/rokkit/tree.css +23 -23
- package/src/rokkit/upload-progress.css +18 -18
- package/src/rokkit/upload-target.css +8 -8
- package/src/zen-sumi/button.css +29 -29
- package/src/zen-sumi/card.css +12 -12
- package/src/zen-sumi/chart.css +6 -6
- package/src/zen-sumi/code-block.css +35 -0
- package/src/zen-sumi/dropdown.css +10 -10
- package/src/zen-sumi/floating-action.css +7 -7
- package/src/zen-sumi/floating-navigation.css +11 -11
- package/src/zen-sumi/frame.css +20 -0
- package/src/zen-sumi/index.css +2 -0
- package/src/zen-sumi/input.css +49 -23
- package/src/zen-sumi/list.css +20 -20
- package/src/zen-sumi/menu.css +14 -14
- package/src/zen-sumi/message.css +8 -8
- package/src/zen-sumi/range.css +7 -7
- package/src/zen-sumi/search-filter.css +8 -8
- package/src/zen-sumi/select.css +26 -26
- package/src/zen-sumi/status-list.css +17 -17
- package/src/zen-sumi/step-indicator.css +8 -8
- package/src/zen-sumi/swatch.css +3 -3
- package/src/zen-sumi/switch.css +5 -5
- package/src/zen-sumi/table.css +16 -16
- package/src/zen-sumi/tabs.css +8 -8
- package/src/zen-sumi/timeline.css +4 -4
- package/src/zen-sumi/toc.css +4 -4
- package/src/zen-sumi/toggle.css +18 -10
- package/src/zen-sumi/toolbar.css +14 -14
- 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
|
|
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-
|
|
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-
|
|
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
|
|
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-
|
|
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-
|
|
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
|
|
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-
|
|
39
|
+
@apply bg-paper-mute/50;
|
|
40
40
|
}
|
package/src/frosted/swatch.css
CHANGED
|
@@ -5,17 +5,17 @@
|
|
|
5
5
|
|
|
6
6
|
[data-style='frosted'] [data-swatch-item][data-selected] {
|
|
7
7
|
background: transparent;
|
|
8
|
-
@apply outline-
|
|
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
|
|
15
|
+
@apply outline-primary;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
[data-style='frosted'] [data-swatch-item][data-selected]:focus-visible {
|
|
19
|
-
@apply outline-
|
|
19
|
+
@apply outline-accent;
|
|
20
20
|
outline-offset: 3px;
|
|
21
21
|
}
|
package/src/frosted/switch.css
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
7
|
[data-style='frosted'] [data-switch-track] {
|
|
8
|
-
@apply border backdrop-blur-lg bg-
|
|
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
|
|
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-
|
|
41
|
+
@apply text-ink-mute;
|
|
42
42
|
}
|
package/src/frosted/table.css
CHANGED
|
@@ -9,25 +9,25 @@
|
|
|
9
9
|
============================================================================= */
|
|
10
10
|
|
|
11
11
|
[data-style='frosted'] [data-table-header] th {
|
|
12
|
-
@apply text-
|
|
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-
|
|
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
|
|
21
|
+
@apply text-primary;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
[data-style='frosted'] [data-table-sort-icon] {
|
|
25
|
-
@apply text-
|
|
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
|
|
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-
|
|
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-
|
|
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-
|
|
50
|
+
@apply bg-paper-mute/80;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
[data-style='frosted'] [data-table-row]:focus {
|
|
54
|
-
@apply bg-
|
|
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
|
|
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-
|
|
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-
|
|
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-
|
|
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
|
|
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-
|
|
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-
|
|
99
|
+
@apply text-ink-soft;
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
/* Disable striped alternating bg in card layout */
|
package/src/frosted/tabs.css
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
============================================================================= */
|
|
10
10
|
|
|
11
11
|
[data-style='frosted'] [data-tabs-list] {
|
|
12
|
-
@apply bg-
|
|
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-
|
|
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-
|
|
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
|
|
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-
|
|
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-
|
|
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
|
|
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-
|
|
57
|
+
@apply text-ink-mute;
|
|
58
58
|
}
|
package/src/frosted/timeline.css
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
============================================================================= */
|
|
10
10
|
|
|
11
11
|
[data-style='frosted'] [data-timeline-circle] {
|
|
12
|
-
@apply border-
|
|
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
|
|
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-
|
|
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-
|
|
40
|
+
@apply text-ink-mute;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
[data-style='frosted'] [data-timeline-description] {
|
|
44
|
-
@apply text-
|
|
44
|
+
@apply text-ink-soft;
|
|
45
45
|
}
|
package/src/frosted/toc.css
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
/* TableOfContents — Glass theme */
|
|
2
2
|
|
|
3
3
|
[data-style='frosted'] [data-toc] [data-toc-label] {
|
|
4
|
-
@apply text-
|
|
4
|
+
@apply text-ink-soft;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
[data-style='frosted'] [data-toc] [data-toc-item] {
|
|
8
|
-
@apply text-
|
|
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-
|
|
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
|
|
17
|
+
@apply text-primary border-l-primary;
|
|
18
18
|
}
|
package/src/frosted/toggle.css
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
============================================================================= */
|
|
10
10
|
|
|
11
11
|
[data-style='frosted'] [data-toggle] {
|
|
12
|
-
@apply bg-
|
|
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-
|
|
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-
|
|
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
|
|
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-
|
|
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-
|
|
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
|
|
47
|
+
@apply text-primary;
|
|
48
48
|
}
|
package/src/frosted/toolbar.css
CHANGED
|
@@ -9,25 +9,25 @@
|
|
|
9
9
|
============================================================================= */
|
|
10
10
|
|
|
11
11
|
[data-style='frosted'] [data-toolbar] {
|
|
12
|
-
@apply bg-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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
|
|
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
|
|
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-
|
|
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-
|
|
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
|
|
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-
|
|
79
|
+
@apply bg-ink-soft/20;
|
|
80
80
|
}
|
|
81
81
|
|
|
82
82
|
[data-style='frosted'] [data-toolbar-divider] {
|
|
83
|
-
@apply bg-
|
|
83
|
+
@apply bg-ink-soft/20;
|
|
84
84
|
}
|
package/src/frosted/tree.css
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
============================================================================= */
|
|
10
10
|
|
|
11
11
|
[data-style='frosted'] [data-tree]:focus-within {
|
|
12
|
-
@apply ring-
|
|
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-
|
|
20
|
+
@apply text-ink-soft;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
[data-style='frosted'] [data-tree-toggle-btn]:hover {
|
|
24
|
-
@apply text-
|
|
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-
|
|
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-
|
|
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-
|
|
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
|
|
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
|
|
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-
|
|
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-
|
|
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
|
|
67
|
+
@apply text-primary;
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
[data-style='frosted'] [data-tree-item-content] [data-item-description] {
|
|
71
|
-
@apply text-
|
|
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
|
|
75
|
+
@apply text-primary;
|
|
76
76
|
}
|
|
77
77
|
|
|
78
78
|
[data-style='frosted'] [data-tree-item-content] [data-item-badge] {
|
|
79
|
-
@apply text-
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
109
|
+
@apply text-primary;
|
|
110
110
|
}
|