@rokkit/themes 1.1.16 → 1.1.17
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 +29 -1
- package/dist/base/alert-list.css +91 -0
- package/dist/base/avatar.css +82 -0
- package/dist/base/badge.css +41 -0
- package/dist/base/breadcrumbs.css +47 -0
- package/dist/base/button.css +254 -0
- package/dist/base/card.css +39 -0
- package/dist/base/carousel.css +128 -0
- package/dist/base/chart.css +94 -0
- package/dist/base/code-block.css +76 -0
- package/dist/base/command-palette.css +35 -0
- package/dist/base/connector.css +92 -0
- package/dist/base/density.css +60 -0
- package/dist/base/display.css +99 -0
- package/dist/base/divider.css +49 -0
- package/dist/base/dropdown.css +167 -0
- package/dist/base/floating-action.css +388 -0
- package/dist/base/floating-navigation.css +405 -0
- package/dist/base/frame.css +36 -0
- package/dist/base/gradient-border.css +32 -0
- package/dist/base/graph-paper.css +83 -0
- package/dist/base/grid.css +93 -0
- package/dist/base/input.css +342 -0
- package/dist/base/item.css +91 -0
- package/dist/base/layout.css +17 -0
- package/dist/base/list.css +188 -0
- package/dist/base/menu.css +277 -0
- package/dist/base/message.css +62 -0
- package/dist/base/nav-content.css +48 -0
- package/dist/base/palette-manager.css +244 -0
- package/dist/base/pill.css +61 -0
- package/dist/base/progress.css +34 -0
- package/dist/base/radius.css +41 -0
- package/dist/base/range.css +122 -0
- package/dist/base/rating.css +42 -0
- package/dist/base/responsive-grid.css +8 -0
- package/dist/base/reveal.css +37 -0
- package/dist/base/search-filter.css +132 -0
- package/dist/base/select.css +413 -0
- package/dist/base/shine.css +14 -0
- package/dist/base/stack.css +76 -0
- package/dist/base/status-list.css +19 -0
- package/dist/base/step-indicator.css +74 -0
- package/dist/base/stepper.css +148 -0
- package/dist/base/swatch.css +85 -0
- package/dist/base/switch.css +168 -0
- package/dist/base/table.css +310 -0
- package/dist/base/tabs.css +184 -0
- package/dist/base/tilt.css +14 -0
- package/dist/base/timeline.css +84 -0
- package/dist/base/toc.css +50 -0
- package/dist/base/toggle.css +185 -0
- package/dist/base/toolbar.css +341 -0
- package/dist/base/tooltip.css +64 -0
- package/dist/base/tree.css +235 -0
- package/dist/base/typography.css +50 -0
- package/dist/base/upload-progress.css +155 -0
- package/dist/base/upload-target.css +77 -0
- package/dist/frosted/button.css +228 -0
- package/dist/frosted/card.css +128 -0
- package/dist/frosted/chart.css +38 -0
- package/dist/frosted/code-block.css +33 -0
- package/dist/frosted/command-palette.css +43 -0
- package/dist/frosted/dropdown.css +64 -0
- package/dist/frosted/floating-action.css +66 -0
- package/dist/frosted/floating-navigation.css +78 -0
- package/dist/frosted/frame.css +17 -0
- package/dist/frosted/grid.css +26 -0
- package/dist/frosted/input.css +135 -0
- package/dist/frosted/list.css +153 -0
- package/dist/frosted/menu.css +107 -0
- package/dist/frosted/message.css +39 -0
- package/dist/frosted/palette-manager.css +97 -0
- package/dist/frosted/pill.css +17 -0
- package/dist/frosted/progress.css +13 -0
- package/dist/frosted/range.css +64 -0
- package/dist/frosted/rating.css +13 -0
- package/dist/frosted/search-filter.css +53 -0
- package/dist/frosted/select.css +192 -0
- package/dist/frosted/status-list.css +67 -0
- package/dist/frosted/step-indicator.css +43 -0
- package/dist/frosted/swatch.css +21 -0
- package/dist/frosted/switch.css +43 -0
- package/dist/frosted/table.css +122 -0
- package/dist/frosted/tabs.css +61 -0
- package/dist/frosted/timeline.css +46 -0
- package/dist/frosted/toc.css +19 -0
- package/dist/frosted/toggle.css +77 -0
- package/dist/frosted/toolbar.css +92 -0
- package/dist/frosted/tooltip.css +7 -0
- package/dist/frosted/tree.css +115 -0
- package/dist/frosted.css +9 -1
- package/dist/index.css +9 -1
- package/dist/material/button.css +178 -0
- package/dist/material/card.css +99 -0
- package/dist/material/chart.css +38 -0
- package/dist/material/code-block.css +33 -0
- package/dist/material/command-palette.css +37 -0
- package/dist/material/dropdown.css +50 -0
- package/dist/material/floating-action.css +64 -0
- package/dist/material/floating-navigation.css +74 -0
- package/dist/material/frame.css +17 -0
- package/dist/material/grid.css +26 -0
- package/dist/material/input.css +164 -0
- package/dist/material/list.css +140 -0
- package/dist/material/menu.css +92 -0
- package/dist/material/message.css +35 -0
- package/dist/material/palette-manager.css +97 -0
- package/dist/material/pill.css +17 -0
- package/dist/material/progress.css +13 -0
- package/dist/material/range.css +62 -0
- package/dist/material/rating.css +13 -0
- package/dist/material/search-filter.css +49 -0
- package/dist/material/select.css +177 -0
- package/dist/material/status-list.css +66 -0
- package/dist/material/step-indicator.css +40 -0
- package/dist/material/swatch.css +21 -0
- package/dist/material/switch.css +28 -0
- package/dist/material/table.css +120 -0
- package/dist/material/tabs.css +88 -0
- package/dist/material/timeline.css +45 -0
- package/dist/material/toc.css +18 -0
- package/dist/material/toggle.css +74 -0
- package/dist/material/toolbar.css +85 -0
- package/dist/material/tooltip.css +7 -0
- package/dist/material/tree.css +134 -0
- package/dist/minimal/button.css +176 -0
- package/dist/minimal/card.css +99 -0
- package/dist/minimal/chart.css +38 -0
- package/dist/minimal/code-block.css +33 -0
- package/dist/minimal/command-palette.css +37 -0
- package/dist/minimal/dropdown.css +50 -0
- package/dist/minimal/floating-action.css +63 -0
- package/dist/minimal/floating-navigation.css +70 -0
- package/dist/minimal/frame.css +17 -0
- package/dist/minimal/grid.css +26 -0
- package/dist/minimal/input.css +171 -0
- package/dist/minimal/list.css +168 -0
- package/dist/minimal/menu.css +88 -0
- package/dist/minimal/message.css +35 -0
- package/dist/minimal/palette-manager.css +97 -0
- package/dist/minimal/pill.css +17 -0
- package/dist/minimal/progress.css +13 -0
- package/dist/minimal/range.css +61 -0
- package/dist/minimal/rating.css +13 -0
- package/dist/minimal/search-filter.css +49 -0
- package/dist/minimal/select.css +158 -0
- package/dist/minimal/status-list.css +66 -0
- package/dist/minimal/step-indicator.css +40 -0
- package/dist/minimal/swatch.css +21 -0
- package/dist/minimal/switch.css +32 -0
- package/dist/minimal/table.css +118 -0
- package/dist/minimal/tabs.css +151 -0
- package/dist/minimal/timeline.css +45 -0
- package/dist/minimal/toc.css +18 -0
- package/dist/minimal/toggle.css +74 -0
- package/dist/minimal/toolbar.css +85 -0
- package/dist/minimal/tooltip.css +7 -0
- package/dist/minimal/tree.css +141 -0
- package/dist/rokkit/avatar.css +29 -0
- package/dist/rokkit/badge.css +29 -0
- package/dist/rokkit/button.css +308 -0
- package/dist/rokkit/card.css +102 -0
- package/dist/rokkit/chart.css +38 -0
- package/dist/rokkit/code-block.css +33 -0
- package/dist/rokkit/command-palette.css +37 -0
- package/dist/rokkit/connector.css +11 -0
- package/dist/rokkit/divider.css +26 -0
- package/dist/rokkit/dropdown.css +70 -0
- package/dist/rokkit/floating-action.css +65 -0
- package/dist/rokkit/floating-navigation.css +83 -0
- package/dist/rokkit/frame.css +17 -0
- package/dist/rokkit/grid.css +46 -0
- package/dist/rokkit/input.css +134 -0
- package/dist/rokkit/list.css +202 -0
- package/dist/rokkit/menu.css +93 -0
- package/dist/rokkit/message.css +44 -0
- package/dist/rokkit/palette-manager.css +97 -0
- package/dist/rokkit/pill.css +17 -0
- package/dist/rokkit/progress.css +13 -0
- package/dist/rokkit/range.css +62 -0
- package/dist/rokkit/rating.css +13 -0
- package/dist/rokkit/search-filter.css +49 -0
- package/dist/rokkit/select.css +190 -0
- package/dist/rokkit/status-list.css +68 -0
- package/dist/rokkit/step-indicator.css +40 -0
- package/dist/rokkit/swatch.css +20 -0
- package/dist/rokkit/switch.css +29 -0
- package/dist/rokkit/table.css +118 -0
- package/dist/rokkit/tabs.css +114 -0
- package/dist/rokkit/timeline.css +45 -0
- package/dist/rokkit/toc.css +18 -0
- package/dist/rokkit/toggle.css +85 -0
- package/dist/rokkit/toolbar.css +90 -0
- package/dist/rokkit/tooltip.css +7 -0
- package/dist/rokkit/tree.css +149 -0
- package/dist/rokkit/upload-progress.css +102 -0
- package/dist/rokkit/upload-target.css +50 -0
- package/dist/zen-sumi/button.css +176 -0
- package/dist/zen-sumi/card.css +104 -0
- package/dist/zen-sumi/chart.css +41 -0
- package/dist/zen-sumi/code-block.css +35 -0
- package/dist/zen-sumi/command-palette.css +39 -0
- package/dist/zen-sumi/dropdown.css +53 -0
- package/dist/zen-sumi/floating-action.css +68 -0
- package/dist/zen-sumi/floating-navigation.css +74 -0
- package/dist/zen-sumi/frame.css +20 -0
- package/dist/zen-sumi/grid.css +26 -0
- package/dist/zen-sumi/input.css +171 -0
- package/dist/zen-sumi/list.css +128 -0
- package/dist/zen-sumi/menu.css +91 -0
- package/dist/zen-sumi/message.css +37 -0
- package/dist/zen-sumi/palette-manager.css +97 -0
- package/dist/zen-sumi/pill.css +17 -0
- package/dist/zen-sumi/progress.css +13 -0
- package/dist/zen-sumi/range.css +62 -0
- package/dist/zen-sumi/rating.css +13 -0
- package/dist/zen-sumi/search-filter.css +49 -0
- package/dist/zen-sumi/select.css +160 -0
- package/dist/zen-sumi/status-list.css +66 -0
- package/dist/zen-sumi/step-indicator.css +40 -0
- package/dist/zen-sumi/swatch.css +21 -0
- package/dist/zen-sumi/switch.css +34 -0
- package/dist/zen-sumi/table.css +128 -0
- package/dist/zen-sumi/tabs.css +78 -0
- package/dist/zen-sumi/timeline.css +46 -0
- package/dist/zen-sumi/toc.css +22 -0
- package/dist/zen-sumi/toggle.css +85 -0
- package/dist/zen-sumi/toolbar.css +86 -0
- package/dist/zen-sumi/tooltip.css +7 -0
- package/dist/zen-sumi/tree.css +137 -0
- package/package.json +15 -15
- package/src/frosted/button.css +9 -1
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* CommandPalette - Minimal Theme Styles
|
|
3
|
+
*
|
|
4
|
+
* Clean, understated styling with subtle borders.
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
[data-style='minimal'] [data-command-backdrop] {
|
|
8
|
+
background: rgb(0 0 0 / 0.25);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
[data-style='minimal'] [data-command-palette] {
|
|
12
|
+
border-width:1px;background-color:var(--paper-soft);border-color:var(--paper-mute);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
[data-style='minimal'] [data-command-input] {
|
|
16
|
+
color:var(--ink);
|
|
17
|
+
}[data-style='minimal'] [data-command-input]::placeholder{color:var(--ink-soft);}
|
|
18
|
+
|
|
19
|
+
[data-style='minimal'] [data-command-item] {
|
|
20
|
+
color:var(--ink-mute);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
[data-style='minimal'] [data-command-item][data-active] {
|
|
24
|
+
border-left-width:2px;background-color:var(--paper-mute);color:var(--ink);border-left-color:var(--accent);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
[data-style='minimal'] [data-command-shortcut] {
|
|
28
|
+
color:var(--ink-soft);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
[data-style='minimal'] [data-command-label] {
|
|
32
|
+
font-size:0.75rem;line-height:1rem;font-weight:500;color:var(--ink-soft);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
[data-style='minimal'] [data-command-empty] {
|
|
36
|
+
color:var(--ink-soft);
|
|
37
|
+
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Dropdown - Minimal Theme Styles
|
|
3
|
+
*
|
|
4
|
+
* Clean, understated with subtle borders.
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
[data-style='minimal'] [data-dropdown-trigger] {
|
|
8
|
+
border-width:1px;background-color:transparent;background-image:none;border-color:var(--paper-edge);color:var(--ink-mute);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
[data-style='minimal'] [data-dropdown-trigger]:hover:not(:disabled) {
|
|
12
|
+
background-image:none;color:var(--ink);border-color:var(--ink-soft);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
[data-style='minimal'] [data-dropdown-trigger]:focus-visible {
|
|
16
|
+
outline:2px solid transparent;outline-offset:2px;--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:var(--ink-soft);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
[data-style='minimal'] [data-dropdown][data-open='true'] [data-dropdown-trigger] {
|
|
20
|
+
background-image:none;border-color:var(--ink-soft);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
[data-style='minimal'] [data-dropdown-trigger] [data-dropdown-icon] {
|
|
24
|
+
color:var(--ink-soft);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
[data-style='minimal'] [data-dropdown-trigger] [data-dropdown-arrow] {
|
|
28
|
+
color:var(--paper-edge);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
[data-style='minimal'] [data-dropdown-panel] {
|
|
32
|
+
border-width:1px;background-image:none;--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);background-color:var(--paper-soft);border-color:var(--paper-mute);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
[data-style='minimal'] [data-dropdown-option] {
|
|
36
|
+
color:var(--ink-mute);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
[data-style='minimal'] [data-dropdown-option]:hover:not(:disabled),
|
|
40
|
+
[data-style='minimal'] [data-dropdown-option]:focus:not(:disabled) {
|
|
41
|
+
border-left-width:2px;background-image:none;outline:2px solid transparent;outline-offset:2px;color:var(--ink);border-left-color:var(--accent);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
[data-style='minimal'] [data-dropdown-option][data-active='true'] {
|
|
45
|
+
border-left-width:2px;background-image:none;color:var(--ink);border-left-color:var(--primary);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
[data-style='minimal'] [data-dropdown-separator] {
|
|
49
|
+
background-image:none;background-color:var(--paper-mute);
|
|
50
|
+
}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* FloatingAction - Minimal Theme Styles
|
|
3
|
+
*
|
|
4
|
+
* Clean, understated styling with subtle borders.
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
/* =============================================================================
|
|
8
|
+
FAB Trigger Button
|
|
9
|
+
============================================================================= */
|
|
10
|
+
|
|
11
|
+
[data-style='minimal'] [data-fab-trigger] {
|
|
12
|
+
border-width:1px;background-image:none;background-color:var(--paper-soft);color:var(--ink-mute);border-color:var(--paper-edge);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
[data-style='minimal'] [data-fab-trigger]:hover:not(:disabled) {
|
|
16
|
+
background-image:none;background-color:var(--paper-mute);color:var(--ink);border-color:var(--ink-soft);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
[data-style='minimal'] [data-fab-trigger]:focus-visible {
|
|
20
|
+
outline:2px solid transparent;outline-offset:2px;--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:var(--ink-soft);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
[data-style='minimal'] [data-fab][data-open='true'] [data-fab-trigger] {
|
|
24
|
+
background-image:none;background-color:var(--paper-mute);border-color:var(--ink-soft);
|
|
25
|
+
transform: rotate(45deg);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
[data-style='minimal'] [data-fab][data-open='true'] [data-fab-trigger]:hover:not(:disabled) {
|
|
29
|
+
background-image:none;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* =============================================================================
|
|
33
|
+
FAB Items
|
|
34
|
+
============================================================================= */
|
|
35
|
+
|
|
36
|
+
[data-style='minimal'] [data-fab-item] {
|
|
37
|
+
border-width:1px;background-image:none;background-color:var(--paper-soft);color:var(--ink-mute);border-color:var(--paper-edge);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
[data-style='minimal'] [data-fab-item]:hover:not(:disabled) {
|
|
41
|
+
background-image:none;background-color:var(--paper-mute);color:var(--ink);border-color:var(--ink-soft);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
[data-style='minimal'] [data-fab-item]:focus-visible {
|
|
45
|
+
outline:2px solid transparent;outline-offset:2px;--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:var(--ink-soft);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/* Item icon */
|
|
49
|
+
[data-style='minimal'] [data-fab-item] [data-fab-item-icon] {
|
|
50
|
+
color:var(--ink-soft);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
[data-style='minimal'] [data-fab-item]:hover:not(:disabled) [data-fab-item-icon] {
|
|
54
|
+
color:var(--ink-mute);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/* =============================================================================
|
|
58
|
+
Backdrop
|
|
59
|
+
============================================================================= */
|
|
60
|
+
|
|
61
|
+
[data-style='minimal'] [data-fab-backdrop] {
|
|
62
|
+
background-color:color-mix(in srgb, var(--color-ink) calc(0.2 * 100%), transparent);
|
|
63
|
+
}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* FloatingNavigation - Minimal Theme Styles
|
|
3
|
+
*
|
|
4
|
+
* Clean, understated styling with subtle borders.
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
/* =============================================================================
|
|
8
|
+
Container
|
|
9
|
+
============================================================================= */
|
|
10
|
+
|
|
11
|
+
[data-style='minimal'] [data-floating-nav] {
|
|
12
|
+
border-width:1px;background-image:none;background-color:var(--paper-soft);border-color:var(--paper-edge);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/* =============================================================================
|
|
16
|
+
Header
|
|
17
|
+
============================================================================= */
|
|
18
|
+
|
|
19
|
+
[data-style='minimal'] [data-floating-nav-title] {
|
|
20
|
+
color:var(--ink-soft);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
[data-style='minimal'] [data-floating-nav-pin] {
|
|
24
|
+
color:var(--ink-soft);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
[data-style='minimal'] [data-floating-nav-pin]:hover {
|
|
28
|
+
color:var(--ink-mute);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
[data-style='minimal'] [data-floating-nav-pin][aria-pressed='true'] {
|
|
32
|
+
color:var(--ink);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* =============================================================================
|
|
36
|
+
Items
|
|
37
|
+
============================================================================= */
|
|
38
|
+
|
|
39
|
+
[data-style='minimal'] [data-floating-nav-item] {
|
|
40
|
+
color:var(--ink-mute);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
[data-style='minimal'] [data-floating-nav-item]:hover {
|
|
44
|
+
background-image:none;background-color:var(--paper-mute);color:var(--ink);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
[data-style='minimal'] [data-floating-nav-item][data-active] {
|
|
48
|
+
background-image:none;color:var(--ink);background-color:var(--paper-mute);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
[data-style='minimal'] [data-floating-nav-item]:focus-visible {
|
|
52
|
+
outline:2px solid transparent;outline-offset:2px;--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:var(--ink-soft);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* Icon */
|
|
56
|
+
[data-style='minimal'] [data-floating-nav-icon] {
|
|
57
|
+
color:var(--ink-soft);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
[data-style='minimal'] [data-floating-nav-item][data-active] [data-floating-nav-icon] {
|
|
61
|
+
color:var(--ink);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* =============================================================================
|
|
65
|
+
Active Indicator
|
|
66
|
+
============================================================================= */
|
|
67
|
+
|
|
68
|
+
[data-style='minimal'] [data-floating-nav-indicator] {
|
|
69
|
+
background-image:none;background-color:var(--ink-mute);
|
|
70
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Frame — minimal theme.
|
|
3
|
+
* Border + background decoration. Base file owns layout / spacing.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
[data-style='minimal'] [data-frame] {
|
|
7
|
+
border-width:1px;background-color:var(--paper);border-color:var(--paper-edge);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
[data-style='minimal'] [data-frame-header] {
|
|
11
|
+
border-bottom-width:1px;background-color:var(--paper-soft);border-color:var(--paper-edge);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
[data-style='minimal'] [data-frame-footer] {
|
|
15
|
+
background-color:var(--paper);border-color:var(--paper-edge);
|
|
16
|
+
border-top: 1px dashed var(--paper-edge);
|
|
17
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Grid - Minimal Theme Styles
|
|
3
|
+
*
|
|
4
|
+
* Tile borders, hover/focus effects, selection highlight.
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
[data-style='minimal'] [data-grid-item] {
|
|
8
|
+
border-color:var(--paper-edge);color:var(--ink-mute);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
[data-style='minimal'] [data-grid-item]:hover:not(:disabled):not([data-disabled]),
|
|
12
|
+
[data-style='minimal'] [data-grid-item]:focus:not(:disabled):not([data-disabled]) {
|
|
13
|
+
border-color:var(--ink-soft);background-color:var(--paper-mute);color:var(--ink);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
[data-style='minimal'] [data-grid-item][data-active] {
|
|
17
|
+
border-color:var(--primary);color:var(--primary);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
[data-style='minimal'] [data-grid-item] [data-item-icon] {
|
|
21
|
+
color:var(--ink-soft);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
[data-style='minimal'] [data-grid-item][data-active] [data-item-icon] {
|
|
25
|
+
color:var(--primary);
|
|
26
|
+
}
|
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
/* Minimal Theme - Form field and input styles
|
|
2
|
+
* Underline-only inputs with animated expanding focus line.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
/* Input root: transparent background, bottom border only */
|
|
6
|
+
[data-style='minimal'] [data-input-root] {
|
|
7
|
+
position:relative;display:flex;align-items:center;border-bottom-width:1px;background-color:transparent;padding:0;border-color:var(--paper-edge);
|
|
8
|
+
border-radius: 0;
|
|
9
|
+
background-image: none;
|
|
10
|
+
transition: background-color 150ms ease;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
/* Hover: very subtle neutral tint */
|
|
14
|
+
[data-style='minimal'] [data-input-root]:hover:not(:focus-within) {
|
|
15
|
+
background-color:var(--paper-mute);
|
|
16
|
+
background-image: none;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/* Focus: keep transparent — the ::after animated line handles the accent */
|
|
20
|
+
[data-style='minimal'] [data-input-root]:focus-within {
|
|
21
|
+
background-color:var(--paper-soft);
|
|
22
|
+
background-image: none;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* Animated underline — grows left to right on focus */
|
|
26
|
+
[data-style='minimal'] [data-input-root]::after {
|
|
27
|
+
content: '';
|
|
28
|
+
position: absolute;
|
|
29
|
+
bottom: -1px;
|
|
30
|
+
left: 0;
|
|
31
|
+
width: 0%;
|
|
32
|
+
height: 2px;
|
|
33
|
+
background-color:var(--accent);
|
|
34
|
+
transition: width 0.3s ease;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
[data-style='minimal'] [data-input-root]:focus-within::after {
|
|
38
|
+
width: 100%;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* Inputs inside wrapper */
|
|
42
|
+
[data-style='minimal']
|
|
43
|
+
[data-input-root]
|
|
44
|
+
input:not([type='checkbox'], [type='radio'], [type='color']),
|
|
45
|
+
[data-style='minimal'] [data-input-root] textarea,
|
|
46
|
+
[data-style='minimal'] [data-input-root] select {
|
|
47
|
+
width:100%;border-style:none;background-color:transparent;padding-left:0.25rem;padding-right:0.25rem;padding-top:0.375rem;padding-bottom:0.375rem;outline:2px solid transparent;outline-offset:2px;color:var(--ink);
|
|
48
|
+
border-radius: 0;
|
|
49
|
+
font-size: 0.875rem;
|
|
50
|
+
line-height: 1.25rem;
|
|
51
|
+
transition: color 150ms ease;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
[data-style='minimal'] [data-input-root] textarea {
|
|
55
|
+
min-height:5rem;padding-top:0.5rem;padding-bottom:0.5rem;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* Select inside input-root: match text input appearance */
|
|
59
|
+
[data-style='minimal'] [data-input-root] [data-select-trigger] {
|
|
60
|
+
border-radius:0;border-style:none;background-color:transparent;padding-left:0.25rem;padding-right:0.25rem;--un-shadow:0 0 var(--un-shadow-color, rgb(0 0 0 / 0));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-width:0px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);color:var(--ink);
|
|
61
|
+
font-size: 0.875rem;
|
|
62
|
+
background-image: none;
|
|
63
|
+
transition: color 150ms ease;
|
|
64
|
+
}[data-style="minimal"] [data-input-root] [data-select-trigger]:focus{outline:2px solid transparent;outline-offset:2px;}
|
|
65
|
+
|
|
66
|
+
[data-style='minimal'] [data-input-root] [data-select-trigger]:hover:not(:disabled) {
|
|
67
|
+
background-color:transparent;
|
|
68
|
+
background-image: none;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
[data-style='minimal'] [data-input-root] [data-select][data-open='true'] [data-select-trigger] {
|
|
72
|
+
border-style:none;background-color:transparent;--un-shadow:0 0 var(--un-shadow-color, rgb(0 0 0 / 0));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-width:0px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/* Labels: smaller, uppercase */
|
|
76
|
+
[data-style='minimal'] [data-field] > label {
|
|
77
|
+
font-size:0.75rem;line-height:1rem;letter-spacing:0.025em;text-transform:uppercase;color:var(--ink-soft);
|
|
78
|
+
transition: color 150ms ease;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
[data-style='minimal'] [data-form-root] label {
|
|
82
|
+
font-size:0.75rem;line-height:1rem;letter-spacing:0.025em;text-transform:uppercase;color:var(--ink-soft);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Focused label: secondary color */
|
|
86
|
+
[data-style='minimal'] [data-field]:has([data-input-root]:focus-within) > label {
|
|
87
|
+
color:var(--accent);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/* Field root */
|
|
91
|
+
[data-style='minimal'] [data-field-root] {
|
|
92
|
+
gap:0.125rem;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/* Info field value */
|
|
96
|
+
[data-style='minimal'] [data-field-info] {
|
|
97
|
+
color:var(--primary);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/* Separator */
|
|
101
|
+
[data-style='minimal'] [data-form-separator] {
|
|
102
|
+
border-color:var(--paper-mute);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/* Disabled state */
|
|
106
|
+
[data-style='minimal'] [data-field-disabled] [data-input-root] {
|
|
107
|
+
cursor:not-allowed;opacity:0.4;border-color:var(--paper-mute);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
[data-style='minimal'] [data-field-disabled] [data-input-root]::after {
|
|
111
|
+
display: none;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/* Error state */
|
|
115
|
+
[data-style='minimal'] [data-field-state='fail'] [data-input-root] {
|
|
116
|
+
border-color:var(--danger);background-color:var(--danger-soft);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
[data-style='minimal'] [data-field-state='fail'] [data-input-root]:hover:not(:focus-within) {
|
|
120
|
+
background-color:var(--danger-soft);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
[data-style='minimal'] [data-field-state='fail'] [data-input-root]::after {
|
|
124
|
+
background-color:var(--danger);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/* Pass state */
|
|
128
|
+
[data-style='minimal'] [data-field-state='pass'] [data-input-root] {
|
|
129
|
+
background-color:var(--success-soft);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
[data-style='minimal'] [data-field-state='pass'] [data-input-root]:hover:not(:focus-within) {
|
|
133
|
+
background-color:var(--success-soft);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
[data-style='minimal'] [data-field-state='pass'] [data-input-root]::after {
|
|
137
|
+
background-color:var(--success);
|
|
138
|
+
width: 100%;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
/* Description */
|
|
142
|
+
[data-style='minimal'] [data-description] {
|
|
143
|
+
margin-top:0.125rem;font-size:0.75rem;line-height:1rem;color:var(--ink-soft);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
/* Message */
|
|
147
|
+
[data-style='minimal'] [data-message] {
|
|
148
|
+
margin-top:0.125rem;font-size:0.75rem;line-height:1rem;color:var(--danger);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
/* Checkbox */
|
|
152
|
+
[data-style='minimal'] [data-checkbox-icon] {
|
|
153
|
+
font-size:1.125rem;line-height:1.75rem;color:var(--ink-soft);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
[data-style='minimal']
|
|
157
|
+
[data-checkbox-root][data-variant='custom']:has(input:checked)
|
|
158
|
+
[data-checkbox-icon] {
|
|
159
|
+
color:var(--accent);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
/* Checkbox label: secondary on focus (checkbox has no input-root) */
|
|
163
|
+
[data-style='minimal'] [data-field-type='checkbox'] [data-field]:has(:focus-within) > label {
|
|
164
|
+
color:var(--accent);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
/* Placeholders */
|
|
168
|
+
[data-style='minimal'] [data-input-root] input::placeholder,
|
|
169
|
+
[data-style='minimal'] [data-input-root] textarea::placeholder {
|
|
170
|
+
color:var(--ink-soft);
|
|
171
|
+
}
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* List - Minimal Theme Styles
|
|
3
|
+
*
|
|
4
|
+
* Clean, understated list with a continuous vertical guide line on the
|
|
5
|
+
* group container (1px paper-edge) and a bolder accent segment on the
|
|
6
|
+
* active item (2px inset box-shadow that visually replaces the guide
|
|
7
|
+
* line at that row). Same indent/guide aesthetic as the tree
|
|
8
|
+
* connectors — per-item left borders are intentionally avoided.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
/* =============================================================================
|
|
12
|
+
List Container
|
|
13
|
+
============================================================================= */
|
|
14
|
+
|
|
15
|
+
[data-style='minimal'] [data-list] {
|
|
16
|
+
position: relative;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
[data-style='minimal'] [data-list]:focus-within {
|
|
20
|
+
outline:2px solid transparent;outline-offset:2px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/* Continuous vertical guide line spanning the full container height.
|
|
24
|
+
Sits at the inside-left so active-item shadows can overlap precisely. */
|
|
25
|
+
[data-style='minimal'] [data-list]::before {
|
|
26
|
+
content: '';
|
|
27
|
+
position: absolute;
|
|
28
|
+
inset: 0 auto 0 0;
|
|
29
|
+
width: 1px;
|
|
30
|
+
background: var(--paper-edge);
|
|
31
|
+
pointer-events: none;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* =============================================================================
|
|
35
|
+
List Items
|
|
36
|
+
============================================================================= */
|
|
37
|
+
|
|
38
|
+
[data-style='minimal'] [data-list] [data-list-item] {
|
|
39
|
+
border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-mute);
|
|
40
|
+
position: relative;
|
|
41
|
+
padding-left: 0.75rem;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
[data-style='minimal'] [data-list] a[data-list-item],
|
|
45
|
+
[data-style='minimal'] [data-list] button[data-list-item] {
|
|
46
|
+
color:var(--ink-soft);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* Hover and focus — text brightening only, no border */
|
|
50
|
+
[data-style='minimal']
|
|
51
|
+
[data-list]
|
|
52
|
+
[data-list-item]:hover:not(:disabled):not([data-disabled='true']),
|
|
53
|
+
[data-style='minimal']
|
|
54
|
+
[data-list]
|
|
55
|
+
[data-list-item]:focus:not(:disabled):not([data-disabled='true']) {
|
|
56
|
+
background-image:none;outline:2px solid transparent;outline-offset:2px;color:var(--ink);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* Active state — muted when list not focused.
|
|
60
|
+
Inset box-shadow overlays the container guide line at this row with
|
|
61
|
+
a bolder colored segment. No per-item border. */
|
|
62
|
+
[data-style='minimal'] [data-list] [data-list-item][data-active='true'] {
|
|
63
|
+
background-image:none;color:var(--ink-mute);
|
|
64
|
+
box-shadow: inset 2px 0 0 0 var(--accent);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* Active state — full highlight when list has focus */
|
|
68
|
+
[data-style='minimal'] [data-list]:focus-within [data-list-item][data-active='true'] {
|
|
69
|
+
background-image:none;color:var(--accent);
|
|
70
|
+
box-shadow: inset 2px 0 0 0 var(--accent);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* Active + hover/focus */
|
|
74
|
+
[data-style='minimal'] [data-list] [data-list-item][data-active='true']:hover:not(:disabled),
|
|
75
|
+
[data-style='minimal'] [data-list] [data-list-item][data-active='true']:focus:not(:disabled) {
|
|
76
|
+
background-image:none;color:var(--accent);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* =============================================================================
|
|
80
|
+
Item Elements
|
|
81
|
+
============================================================================= */
|
|
82
|
+
|
|
83
|
+
[data-style='minimal'] [data-list] [data-list-item] [data-item-icon] {
|
|
84
|
+
color:var(--ink-soft);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
[data-style='minimal'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
|
|
88
|
+
[data-style='minimal'] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon] {
|
|
89
|
+
color:var(--ink-soft);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
[data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-icon] {
|
|
93
|
+
color:var(--accent);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
/* Literal / kanji icons */
|
|
97
|
+
[data-style='minimal'] [data-list] [data-list-item] [data-item-icon-literal] {
|
|
98
|
+
color:var(--ink-soft);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
[data-style='minimal'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon-literal],
|
|
102
|
+
[data-style='minimal'] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon-literal] {
|
|
103
|
+
color:var(--ink-soft);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
[data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-icon-literal] {
|
|
107
|
+
color:var(--accent);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
[data-style='minimal'] [data-list] [data-list-item] [data-item-description] {
|
|
111
|
+
color:var(--ink-soft);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
[data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
|
|
115
|
+
color:var(--accent);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
[data-style='minimal'] [data-list] [data-list-item] [data-item-badge] {
|
|
119
|
+
border-width:1px;background-color:transparent;background-image:none;color:var(--ink-soft);border-color:var(--paper-edge);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
[data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
|
|
123
|
+
background-image:none;color:var(--accent);border-color:var(--accent);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/* =============================================================================
|
|
127
|
+
Groups
|
|
128
|
+
============================================================================= */
|
|
129
|
+
|
|
130
|
+
[data-style='minimal'] [data-list] [data-list-group] {
|
|
131
|
+
color:var(--ink-soft);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
/* Group hover — text-only, no border */
|
|
135
|
+
[data-style='minimal'] [data-list] [data-list-group]:hover:not(:disabled),
|
|
136
|
+
[data-style='minimal'] [data-list] [data-list-group]:focus:not(:disabled) {
|
|
137
|
+
background-image:none;color:var(--ink-mute);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
/* =============================================================================
|
|
141
|
+
Separator
|
|
142
|
+
============================================================================= */
|
|
143
|
+
|
|
144
|
+
[data-style='minimal'] [data-list] [data-list-separator] {
|
|
145
|
+
background-image:none;background-color:var(--paper-mute);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
/* =============================================================================
|
|
149
|
+
Multi-Selection
|
|
150
|
+
============================================================================= */
|
|
151
|
+
|
|
152
|
+
[data-style='minimal'] [data-list] [data-list-item][data-selected='true'] {
|
|
153
|
+
color:var(--accent);
|
|
154
|
+
box-shadow: inset 2px 0 0 0 var(--accent);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
[data-style='minimal'] [data-list]:focus-within [data-list-item][data-selected='true'] {
|
|
158
|
+
color:var(--accent);
|
|
159
|
+
box-shadow: inset 2px 0 0 0 var(--accent);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
[data-style='minimal'] [data-list] [data-list-item][data-selected='true']:hover:not(:disabled) {
|
|
163
|
+
color:var(--accent);
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
[data-style='minimal'] [data-list] [data-list-item][data-selected='true'] [data-item-icon] {
|
|
167
|
+
color:var(--accent);
|
|
168
|
+
}
|