@rokkit/themes 1.1.16 → 1.1.18
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 +154 -0
- package/dist/base/swatch.css +85 -0
- package/dist/base/switch.css +168 -0
- package/dist/base/table.css +313 -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 +190 -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/base.css +20 -6
- 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 +126 -0
- package/dist/frosted.css +72 -53
- package/dist/index.css +446 -307
- package/dist/material/button.css +182 -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 +89 -0
- package/dist/material/timeline.css +46 -0
- package/dist/material/toc.css +18 -0
- package/dist/material/toggle.css +75 -0
- package/dist/material/toolbar.css +85 -0
- package/dist/material/tooltip.css +7 -0
- package/dist/material/tree.css +145 -0
- package/dist/material.css +68 -50
- package/dist/minimal/button.css +180 -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 +152 -0
- package/dist/minimal.css +73 -58
- 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 +201 -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 +46 -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 +160 -0
- package/dist/rokkit/upload-progress.css +102 -0
- package/dist/rokkit/upload-target.css +50 -0
- package/dist/rokkit.css +89 -66
- package/dist/zen-sumi/button.css +184 -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/divider.css +29 -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 +86 -0
- package/dist/zen-sumi/toolbar.css +86 -0
- package/dist/zen-sumi/tooltip.css +7 -0
- package/dist/zen-sumi/tree.css +148 -0
- package/dist/zen-sumi.css +124 -74
- package/package.json +15 -15
- package/src/base/stepper.css +11 -5
- package/src/base/table.css +4 -1
- package/src/base/toggle.css +5 -0
- package/src/frosted/button.css +9 -1
- package/src/frosted/dropdown.css +2 -2
- package/src/frosted/list.css +5 -5
- package/src/frosted/menu.css +5 -5
- package/src/frosted/message.css +4 -4
- package/src/frosted/select.css +8 -8
- package/src/frosted/table.css +5 -5
- package/src/frosted/tabs.css +2 -2
- package/src/frosted/timeline.css +1 -1
- package/src/frosted/toggle.css +4 -4
- package/src/frosted/tree.css +15 -4
- package/src/material/button.css +8 -4
- package/src/material/dropdown.css +2 -2
- package/src/material/list.css +5 -5
- package/src/material/menu.css +5 -5
- package/src/material/select.css +8 -8
- package/src/material/table.css +5 -5
- package/src/material/tabs.css +4 -3
- package/src/material/timeline.css +4 -3
- package/src/material/toggle.css +6 -5
- package/src/material/tree.css +15 -4
- package/src/minimal/button.css +8 -4
- package/src/minimal/dropdown.css +2 -2
- package/src/minimal/list.css +8 -8
- package/src/minimal/menu.css +6 -6
- package/src/minimal/select.css +8 -8
- package/src/minimal/table.css +5 -5
- package/src/minimal/tabs.css +2 -2
- package/src/minimal/timeline.css +3 -3
- package/src/minimal/toggle.css +4 -4
- package/src/minimal/tree.css +17 -6
- package/src/rokkit/avatar.css +1 -1
- package/src/rokkit/badge.css +1 -1
- package/src/rokkit/button.css +1 -1
- package/src/rokkit/divider.css +1 -1
- package/src/rokkit/dropdown.css +2 -2
- package/src/rokkit/list.css +5 -5
- package/src/rokkit/menu.css +5 -5
- package/src/rokkit/select.css +24 -13
- package/src/rokkit/table.css +5 -5
- package/src/rokkit/tabs.css +1 -1
- package/src/rokkit/timeline.css +4 -3
- package/src/rokkit/toggle.css +4 -4
- package/src/rokkit/tree.css +17 -6
- package/src/zen-sumi/button.css +16 -8
- package/src/zen-sumi/divider.css +29 -0
- package/src/zen-sumi/dropdown.css +4 -4
- package/src/zen-sumi/index.css +1 -0
- package/src/zen-sumi/list.css +9 -9
- package/src/zen-sumi/menu.css +9 -9
- package/src/zen-sumi/select.css +11 -11
- package/src/zen-sumi/table.css +6 -6
- package/src/zen-sumi/tabs.css +3 -3
- package/src/zen-sumi/timeline.css +3 -3
- package/src/zen-sumi/toggle.css +6 -5
- package/src/zen-sumi/tree.css +19 -8
package/dist/material.css
CHANGED
|
@@ -24,23 +24,27 @@
|
|
|
24
24
|
|
|
25
25
|
[data-style='material'] [data-button][data-style='default'][data-variant='primary'],
|
|
26
26
|
[data-style='material'] [data-button]:not([data-style])[data-variant='primary'] {
|
|
27
|
-
background-image:none;--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
|
|
27
|
+
background-image:none;--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);color:var(--on-primary);
|
|
28
|
+
background-color: var(--primary);
|
|
28
29
|
}
|
|
29
30
|
|
|
30
31
|
[data-style='material'] [data-button][data-style='default'][data-variant='secondary'],
|
|
31
32
|
[data-style='material'] [data-button]:not([data-style])[data-variant='secondary'] {
|
|
32
|
-
background-image:none;--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
|
|
33
|
+
background-image:none;--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);color:var(--on-primary);
|
|
34
|
+
background-color: var(--accent);
|
|
33
35
|
}
|
|
34
36
|
|
|
35
37
|
[data-style='material'] [data-button][data-style='default'][data-variant='accent'],
|
|
36
38
|
[data-style='material'] [data-button]:not([data-style])[data-variant='accent'] {
|
|
37
|
-
background-image:none;--un-text-opacity:1;color:
|
|
38
|
-
|
|
39
|
+
background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
|
|
40
|
+
background-color: var(--accent);
|
|
41
|
+
}
|
|
39
42
|
|
|
40
43
|
[data-style='material'] [data-button][data-style='default'][data-variant='danger'],
|
|
41
44
|
[data-style='material'] [data-button]:not([data-style])[data-variant='danger'] {
|
|
42
|
-
background-image:none;--un-text-opacity:1;color:
|
|
43
|
-
|
|
45
|
+
background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
|
|
46
|
+
background-color: var(--danger);
|
|
47
|
+
}
|
|
44
48
|
|
|
45
49
|
/* =============================================================================
|
|
46
50
|
Outline Style
|
|
@@ -114,12 +118,12 @@
|
|
|
114
118
|
}
|
|
115
119
|
|
|
116
120
|
[data-style='material'] [data-button][data-style='gradient'][data-variant='accent'] {
|
|
117
|
-
--un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:
|
|
118
|
-
}
|
|
121
|
+
--un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
|
|
122
|
+
}
|
|
119
123
|
|
|
120
124
|
[data-style='material'] [data-button][data-style='gradient'][data-variant='danger'] {
|
|
121
|
-
--un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:
|
|
122
|
-
}
|
|
125
|
+
--un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
|
|
126
|
+
}
|
|
123
127
|
|
|
124
128
|
[data-style='material']
|
|
125
129
|
[data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
|
|
@@ -458,7 +462,7 @@
|
|
|
458
462
|
============================================================================= */
|
|
459
463
|
|
|
460
464
|
[data-style='material'] [data-tabs-trigger] {
|
|
461
|
-
border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;background-color:transparent;color:var(--ink-
|
|
465
|
+
border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;background-color:transparent;color:var(--ink-mute);
|
|
462
466
|
}
|
|
463
467
|
|
|
464
468
|
[data-style='material'] [data-tabs][data-position='after'] [data-tabs-trigger] {
|
|
@@ -471,7 +475,8 @@
|
|
|
471
475
|
|
|
472
476
|
/* Selected state */
|
|
473
477
|
[data-style='material'] [data-tabs-trigger][data-selected] {
|
|
474
|
-
--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
|
|
478
|
+
--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);color:var(--on-primary);
|
|
479
|
+
background-color: var(--primary);
|
|
475
480
|
}
|
|
476
481
|
|
|
477
482
|
/* Reset rokkit gradients bleeding in from body[data-style='rokkit'] ancestor */
|
|
@@ -505,7 +510,7 @@
|
|
|
505
510
|
============================================================================= */
|
|
506
511
|
|
|
507
512
|
[data-style='material'] [data-tabs-trigger] [data-tabs-icon] {
|
|
508
|
-
color:var(--ink-
|
|
513
|
+
color:var(--ink-mute);
|
|
509
514
|
}
|
|
510
515
|
|
|
511
516
|
[data-style='material'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
|
|
@@ -543,7 +548,7 @@
|
|
|
543
548
|
============================================================================= */
|
|
544
549
|
|
|
545
550
|
[data-style='material'] [data-toggle-option] {
|
|
546
|
-
border-radius:9999px;color:var(--ink-
|
|
551
|
+
border-radius:9999px;color:var(--ink-mute);
|
|
547
552
|
}
|
|
548
553
|
|
|
549
554
|
[data-style='material'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
|
|
@@ -553,7 +558,8 @@
|
|
|
553
558
|
|
|
554
559
|
/* Selected state */
|
|
555
560
|
[data-style='material'] [data-toggle-option][data-selected='true'] {
|
|
556
|
-
background-image:none;--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
|
|
561
|
+
background-image:none;--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);color:var(--on-primary);
|
|
562
|
+
background-color: var(--primary);
|
|
557
563
|
}
|
|
558
564
|
|
|
559
565
|
/* =============================================================================
|
|
@@ -561,7 +567,7 @@
|
|
|
561
567
|
============================================================================= */
|
|
562
568
|
|
|
563
569
|
[data-style='material'] [data-toggle-option] [data-toggle-icon] {
|
|
564
|
-
color:var(--ink-
|
|
570
|
+
color:var(--ink-mute);
|
|
565
571
|
}
|
|
566
572
|
|
|
567
573
|
[data-style='material'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
|
|
@@ -581,7 +587,7 @@
|
|
|
581
587
|
============================================================================= */
|
|
582
588
|
|
|
583
589
|
[data-style='material'] [data-toggle][data-toggle-variant='button'] {
|
|
584
|
-
border-color:transparent;background-color:transparent;color:var(--ink-
|
|
590
|
+
border-color:transparent;background-color:transparent;color:var(--ink-mute);
|
|
585
591
|
background-image: none;
|
|
586
592
|
}
|
|
587
593
|
|
|
@@ -591,7 +597,7 @@
|
|
|
591
597
|
}
|
|
592
598
|
|
|
593
599
|
[data-style='material'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
|
|
594
|
-
color:var(--ink-
|
|
600
|
+
color:var(--ink-mute);
|
|
595
601
|
}
|
|
596
602
|
|
|
597
603
|
[data-style='material'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
|
|
@@ -686,7 +692,7 @@
|
|
|
686
692
|
============================================================================= */
|
|
687
693
|
|
|
688
694
|
[data-style='material'] [data-list] [data-list-item] [data-item-icon] {
|
|
689
|
-
color:var(--ink-
|
|
695
|
+
color:var(--ink-mute);
|
|
690
696
|
}
|
|
691
697
|
|
|
692
698
|
[data-style='material'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
|
|
@@ -700,7 +706,7 @@
|
|
|
700
706
|
|
|
701
707
|
/* Literal / kanji icons */
|
|
702
708
|
[data-style='material'] [data-list] [data-list-item] [data-item-icon-literal] {
|
|
703
|
-
color:var(--ink-
|
|
709
|
+
color:var(--ink-mute);
|
|
704
710
|
}
|
|
705
711
|
|
|
706
712
|
[data-style='material'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon-literal],
|
|
@@ -713,7 +719,7 @@
|
|
|
713
719
|
}
|
|
714
720
|
|
|
715
721
|
[data-style='material'] [data-list] [data-list-item] [data-item-description] {
|
|
716
|
-
color:var(--ink-
|
|
722
|
+
color:var(--ink-mute);
|
|
717
723
|
}
|
|
718
724
|
|
|
719
725
|
[data-style='material'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
|
|
@@ -721,7 +727,7 @@
|
|
|
721
727
|
}
|
|
722
728
|
|
|
723
729
|
[data-style='material'] [data-list] [data-list-item] [data-item-badge] {
|
|
724
|
-
border-radius:9999px;background-image:none;background-color:var(--paper-mute);color:var(--ink-
|
|
730
|
+
border-radius:9999px;background-image:none;background-color:var(--paper-mute);color:var(--ink-mute);
|
|
725
731
|
}
|
|
726
732
|
|
|
727
733
|
[data-style='material'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
|
|
@@ -733,7 +739,7 @@
|
|
|
733
739
|
============================================================================= */
|
|
734
740
|
|
|
735
741
|
[data-style='material'] [data-list] [data-list-group] {
|
|
736
|
-
font-weight:500;color:var(--ink-
|
|
742
|
+
font-weight:500;color:var(--ink-mute);
|
|
737
743
|
}
|
|
738
744
|
|
|
739
745
|
[data-style='material'] [data-list] [data-list-group]:hover:not(:disabled),
|
|
@@ -775,6 +781,17 @@
|
|
|
775
781
|
* Material Design inspired with subtle elevation.
|
|
776
782
|
*/
|
|
777
783
|
|
|
784
|
+
/* =============================================================================
|
|
785
|
+
Connector Lines — hairline tone (mode-aware), not currentColor (which
|
|
786
|
+
renders white in dark mode and greyish in light).
|
|
787
|
+
============================================================================= */
|
|
788
|
+
|
|
789
|
+
[data-style='material'] [data-tree]:not([data-line-style='none']) [data-connector-v],
|
|
790
|
+
[data-style='material'] [data-tree]:not([data-line-style='none']) [data-connector-h],
|
|
791
|
+
[data-style='material'] [data-tree]:not([data-line-style='none']) [data-connector-corner] {
|
|
792
|
+
border-color:var(--paper-edge);
|
|
793
|
+
}
|
|
794
|
+
|
|
778
795
|
/* =============================================================================
|
|
779
796
|
Tree Container
|
|
780
797
|
============================================================================= */
|
|
@@ -788,7 +805,7 @@
|
|
|
788
805
|
============================================================================= */
|
|
789
806
|
|
|
790
807
|
[data-style='material'] [data-tree-toggle-btn] {
|
|
791
|
-
border-radius:9999px;color:var(--ink-
|
|
808
|
+
border-radius:9999px;color:var(--ink-mute);
|
|
792
809
|
}
|
|
793
810
|
|
|
794
811
|
[data-style='material'] [data-tree-toggle-btn]:hover {
|
|
@@ -844,7 +861,7 @@
|
|
|
844
861
|
============================================================================= */
|
|
845
862
|
|
|
846
863
|
[data-style='material'] [data-tree-item-content] [data-item-icon] {
|
|
847
|
-
color:var(--ink-
|
|
864
|
+
color:var(--ink-mute);
|
|
848
865
|
}
|
|
849
866
|
|
|
850
867
|
[data-style='material'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
|
|
@@ -856,7 +873,7 @@
|
|
|
856
873
|
}
|
|
857
874
|
|
|
858
875
|
[data-style='material'] [data-tree-item-content] [data-item-description] {
|
|
859
|
-
color:var(--ink-
|
|
876
|
+
color:var(--ink-mute);
|
|
860
877
|
}
|
|
861
878
|
|
|
862
879
|
[data-style='material'] [data-tree-item-content][data-active='true'] [data-item-description] {
|
|
@@ -864,7 +881,7 @@
|
|
|
864
881
|
}
|
|
865
882
|
|
|
866
883
|
[data-style='material'] [data-tree-item-content] [data-item-badge] {
|
|
867
|
-
border-radius:9999px;background-image:none;color:var(--ink-
|
|
884
|
+
border-radius:9999px;background-image:none;color:var(--ink-mute);background-color:var(--paper-mute);
|
|
868
885
|
}
|
|
869
886
|
|
|
870
887
|
[data-style='material'] [data-tree-item-content][data-active='true'] [data-item-badge] {
|
|
@@ -935,7 +952,7 @@
|
|
|
935
952
|
============================================================================= */
|
|
936
953
|
|
|
937
954
|
[data-style='material'] [data-select-placeholder] {
|
|
938
|
-
color:var(--ink-
|
|
955
|
+
color:var(--ink-mute);
|
|
939
956
|
}
|
|
940
957
|
|
|
941
958
|
/* =============================================================================
|
|
@@ -943,7 +960,7 @@
|
|
|
943
960
|
============================================================================= */
|
|
944
961
|
|
|
945
962
|
[data-style='material'] [data-select-arrow] {
|
|
946
|
-
color:var(--ink-
|
|
963
|
+
color:var(--ink-mute);
|
|
947
964
|
}
|
|
948
965
|
|
|
949
966
|
[data-style='material'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
|
|
@@ -959,7 +976,7 @@
|
|
|
959
976
|
}
|
|
960
977
|
|
|
961
978
|
[data-style='material'] [data-select-tag-remove] {
|
|
962
|
-
border-radius:9999px;color:var(--ink-
|
|
979
|
+
border-radius:9999px;color:var(--ink-mute);
|
|
963
980
|
}
|
|
964
981
|
|
|
965
982
|
[data-style='material'] [data-select-tag-remove]:hover {
|
|
@@ -1023,7 +1040,7 @@
|
|
|
1023
1040
|
|
|
1024
1041
|
/* Item elements */
|
|
1025
1042
|
[data-style='material'] [data-select-option] [data-item-icon] {
|
|
1026
|
-
color:var(--ink-
|
|
1043
|
+
color:var(--ink-mute);
|
|
1027
1044
|
}
|
|
1028
1045
|
|
|
1029
1046
|
[data-style='material'] [data-select-option]:hover:not(:disabled) [data-item-icon] {
|
|
@@ -1035,7 +1052,7 @@
|
|
|
1035
1052
|
}
|
|
1036
1053
|
|
|
1037
1054
|
[data-style='material'] [data-select-option] [data-item-description] {
|
|
1038
|
-
color:var(--ink-
|
|
1055
|
+
color:var(--ink-mute);
|
|
1039
1056
|
}
|
|
1040
1057
|
|
|
1041
1058
|
[data-style='material'] [data-select-option][data-selected='true'] [data-item-description] {
|
|
@@ -1047,7 +1064,7 @@
|
|
|
1047
1064
|
============================================================================= */
|
|
1048
1065
|
|
|
1049
1066
|
[data-style='material'] [data-select-group-label] {
|
|
1050
|
-
font-weight:500;color:var(--ink-
|
|
1067
|
+
font-weight:500;color:var(--ink-mute);
|
|
1051
1068
|
}
|
|
1052
1069
|
|
|
1053
1070
|
/* =============================================================================
|
|
@@ -1075,11 +1092,11 @@
|
|
|
1075
1092
|
}
|
|
1076
1093
|
|
|
1077
1094
|
[data-style='material'] [data-select-filter-input]::placeholder {
|
|
1078
|
-
color:var(--ink-
|
|
1095
|
+
color:var(--ink-mute);
|
|
1079
1096
|
}
|
|
1080
1097
|
|
|
1081
1098
|
[data-style='material'] [data-select-empty] {
|
|
1082
|
-
color:var(--ink-
|
|
1099
|
+
color:var(--ink-mute);
|
|
1083
1100
|
}
|
|
1084
1101
|
|
|
1085
1102
|
/**
|
|
@@ -1110,7 +1127,7 @@
|
|
|
1110
1127
|
|
|
1111
1128
|
/* Trigger elements */
|
|
1112
1129
|
[data-style='material'] [data-menu-trigger] [data-menu-icon] {
|
|
1113
|
-
color:var(--ink-
|
|
1130
|
+
color:var(--ink-mute);
|
|
1114
1131
|
}
|
|
1115
1132
|
|
|
1116
1133
|
[data-style='material'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
|
|
@@ -1118,7 +1135,7 @@
|
|
|
1118
1135
|
}
|
|
1119
1136
|
|
|
1120
1137
|
[data-style='material'] [data-menu-trigger] [data-menu-arrow] {
|
|
1121
|
-
color:var(--ink-
|
|
1138
|
+
color:var(--ink-mute);
|
|
1122
1139
|
}
|
|
1123
1140
|
|
|
1124
1141
|
/* =============================================================================
|
|
@@ -1148,7 +1165,7 @@
|
|
|
1148
1165
|
|
|
1149
1166
|
/* Item elements */
|
|
1150
1167
|
[data-style='material'] [data-menu-item] [data-item-icon] {
|
|
1151
|
-
color:var(--ink-
|
|
1168
|
+
color:var(--ink-mute);
|
|
1152
1169
|
}
|
|
1153
1170
|
|
|
1154
1171
|
[data-style='material'] [data-menu-item]:hover:not(:disabled) [data-item-icon] {
|
|
@@ -1156,7 +1173,7 @@
|
|
|
1156
1173
|
}
|
|
1157
1174
|
|
|
1158
1175
|
[data-style='material'] [data-menu-item] [data-item-description] {
|
|
1159
|
-
color:var(--ink-
|
|
1176
|
+
color:var(--ink-mute);
|
|
1160
1177
|
}
|
|
1161
1178
|
|
|
1162
1179
|
/* =============================================================================
|
|
@@ -1164,7 +1181,7 @@
|
|
|
1164
1181
|
============================================================================= */
|
|
1165
1182
|
|
|
1166
1183
|
[data-style='material'] [data-menu-group] {
|
|
1167
|
-
font-weight:500;color:var(--ink-
|
|
1184
|
+
font-weight:500;color:var(--ink-mute);
|
|
1168
1185
|
}
|
|
1169
1186
|
|
|
1170
1187
|
/* =============================================================================
|
|
@@ -1198,11 +1215,11 @@
|
|
|
1198
1215
|
}
|
|
1199
1216
|
|
|
1200
1217
|
[data-style='material'] [data-dropdown-trigger] [data-dropdown-icon] {
|
|
1201
|
-
color:var(--ink-
|
|
1218
|
+
color:var(--ink-mute);
|
|
1202
1219
|
}
|
|
1203
1220
|
|
|
1204
1221
|
[data-style='material'] [data-dropdown-trigger] [data-dropdown-arrow] {
|
|
1205
|
-
color:var(--ink-
|
|
1222
|
+
color:var(--ink-mute);
|
|
1206
1223
|
}
|
|
1207
1224
|
|
|
1208
1225
|
[data-style='material'] [data-dropdown-panel] {
|
|
@@ -1302,7 +1319,7 @@
|
|
|
1302
1319
|
============================================================================= */
|
|
1303
1320
|
|
|
1304
1321
|
[data-style='material'] [data-table-header] th {
|
|
1305
|
-
border-bottom-width:1px;font-weight:500;color:var(--ink-
|
|
1322
|
+
border-bottom-width:1px;font-weight:500;color:var(--ink-mute);background-color:var(--paper-mute);border-color:var(--paper-edge);
|
|
1306
1323
|
}
|
|
1307
1324
|
|
|
1308
1325
|
[data-style='material'] [data-table-header-cell][data-sortable='true']:hover {
|
|
@@ -1315,7 +1332,7 @@
|
|
|
1315
1332
|
}
|
|
1316
1333
|
|
|
1317
1334
|
[data-style='material'] [data-table-sort-icon] {
|
|
1318
|
-
color:var(--ink-
|
|
1335
|
+
color:var(--ink-mute);
|
|
1319
1336
|
}
|
|
1320
1337
|
|
|
1321
1338
|
[data-style='material']
|
|
@@ -1378,7 +1395,7 @@
|
|
|
1378
1395
|
============================================================================= */
|
|
1379
1396
|
|
|
1380
1397
|
[data-style='material'] [data-table-empty] {
|
|
1381
|
-
color:var(--ink-
|
|
1398
|
+
color:var(--ink-mute);
|
|
1382
1399
|
}
|
|
1383
1400
|
|
|
1384
1401
|
/* =============================================================================
|
|
@@ -1386,7 +1403,7 @@
|
|
|
1386
1403
|
============================================================================= */
|
|
1387
1404
|
|
|
1388
1405
|
[data-style='material'] [data-table-cell] [data-cell-icon] {
|
|
1389
|
-
color:var(--ink-
|
|
1406
|
+
color:var(--ink-mute);
|
|
1390
1407
|
}
|
|
1391
1408
|
|
|
1392
1409
|
[data-style='material'] [data-table-row][data-selected='true'] [data-cell-icon] {
|
|
@@ -1403,7 +1420,7 @@
|
|
|
1403
1420
|
}
|
|
1404
1421
|
|
|
1405
1422
|
[data-style='material'] [data-table-responsive] [data-table-cell]::before {
|
|
1406
|
-
color:var(--ink-
|
|
1423
|
+
color:var(--ink-mute);
|
|
1407
1424
|
}
|
|
1408
1425
|
|
|
1409
1426
|
/* Disable striped alternating bg in card layout */
|
|
@@ -1575,11 +1592,12 @@
|
|
|
1575
1592
|
}
|
|
1576
1593
|
|
|
1577
1594
|
[data-style='material'] [data-timeline-item][data-completed] [data-timeline-circle] {
|
|
1578
|
-
--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);
|
|
1595
|
+
--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);border-color:var(--primary);color:var(--on-primary);
|
|
1596
|
+
background-color: var(--primary);
|
|
1579
1597
|
}
|
|
1580
1598
|
|
|
1581
1599
|
[data-style='material'] [data-timeline-item][data-active] [data-timeline-circle] {
|
|
1582
|
-
--un-ring-width:3px;--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:color-mix(in srgb, var(--color-primary) calc(0.25 * 100%), transparent);border-color:var(--primary);color:var(--
|
|
1600
|
+
--un-ring-width:3px;--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:color-mix(in srgb, var(--color-primary) calc(0.25 * 100%), transparent);border-color:var(--primary);color:var(--ink);
|
|
1583
1601
|
}
|
|
1584
1602
|
|
|
1585
1603
|
/* =============================================================================
|
|
@@ -1591,7 +1609,7 @@
|
|
|
1591
1609
|
}
|
|
1592
1610
|
|
|
1593
1611
|
[data-style='material'] [data-timeline-item][data-completed] [data-timeline-connector] {
|
|
1594
|
-
background-color:var(--primary);
|
|
1612
|
+
background-color: var(--primary);
|
|
1595
1613
|
}
|
|
1596
1614
|
|
|
1597
1615
|
/* =============================================================================
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Button - Minimal Theme Styles
|
|
3
|
+
*
|
|
4
|
+
* Clean, understated styling with subtle borders.
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
/* =============================================================================
|
|
8
|
+
Default Style (filled)
|
|
9
|
+
============================================================================= */
|
|
10
|
+
|
|
11
|
+
[data-style='minimal'] [data-button][data-style='default'][data-variant='default'],
|
|
12
|
+
[data-style='minimal'] [data-button]:not([data-style])[data-variant='default'],
|
|
13
|
+
[data-style='minimal'] [data-button][data-style='default']:not([data-variant]),
|
|
14
|
+
[data-style='minimal'] [data-button]:not([data-style]):not([data-variant]) {
|
|
15
|
+
border-width:1px;background-image:none;background-color:var(--paper-mute);border-color:var(--paper-edge);color:var(--ink-mute);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
[data-style='minimal'] [data-button][data-style='default'][data-variant='primary'],
|
|
19
|
+
[data-style='minimal'] [data-button]:not([data-style])[data-variant='primary'] {
|
|
20
|
+
border-color:transparent;background-image:none;color:var(--on-primary);
|
|
21
|
+
background-color: var(--primary);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
[data-style='minimal'] [data-button][data-style='default'][data-variant='secondary'],
|
|
25
|
+
[data-style='minimal'] [data-button]:not([data-style])[data-variant='secondary'] {
|
|
26
|
+
border-color:transparent;background-image:none;color:var(--on-primary);
|
|
27
|
+
background-color: var(--accent);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
[data-style='minimal'] [data-button][data-style='default'][data-variant='accent'],
|
|
31
|
+
[data-style='minimal'] [data-button]:not([data-style])[data-variant='accent'] {
|
|
32
|
+
border-color:transparent;background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
|
|
33
|
+
background-color: var(--accent);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
[data-style='minimal'] [data-button][data-style='default'][data-variant='danger'],
|
|
37
|
+
[data-style='minimal'] [data-button]:not([data-style])[data-variant='danger'] {
|
|
38
|
+
border-color:transparent;background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
|
|
39
|
+
background-color: var(--danger);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* =============================================================================
|
|
43
|
+
Outline Style
|
|
44
|
+
============================================================================= */
|
|
45
|
+
|
|
46
|
+
[data-style='minimal'] [data-button][data-style='outline'][data-variant='default'],
|
|
47
|
+
[data-style='minimal'] [data-button][data-style='outline']:not([data-variant]) {
|
|
48
|
+
border-width:1px;background-color:transparent;border-color:var(--paper-edge);color:var(--ink-mute);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
[data-style='minimal'] [data-button][data-style='outline'][data-variant='primary'] {
|
|
52
|
+
border-width:1px;background-color:transparent;border-color:var(--primary);color:var(--primary);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
[data-style='minimal'] [data-button][data-style='outline'][data-variant='secondary'] {
|
|
56
|
+
border-width:1px;background-color:transparent;border-color:var(--accent);color:var(--accent);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
[data-style='minimal'] [data-button][data-style='outline'][data-variant='accent'] {
|
|
60
|
+
border-width:1px;background-color:transparent;border-color:var(--accent);color:var(--accent);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
[data-style='minimal'] [data-button][data-style='outline'][data-variant='danger'] {
|
|
64
|
+
border-width:1px;background-color:transparent;border-color:var(--danger);color:var(--danger);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* =============================================================================
|
|
68
|
+
Ghost Style
|
|
69
|
+
============================================================================= */
|
|
70
|
+
|
|
71
|
+
[data-style='minimal'] [data-button][data-style='ghost'] {
|
|
72
|
+
border-color:transparent;background-color:transparent;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
[data-style='minimal'] [data-button][data-style='ghost'][data-variant='default'],
|
|
76
|
+
[data-style='minimal'] [data-button][data-style='ghost']:not([data-variant]) {
|
|
77
|
+
color:var(--ink-mute);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
[data-style='minimal'] [data-button][data-style='ghost'][data-variant='primary'] {
|
|
81
|
+
color:var(--primary);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
[data-style='minimal'] [data-button][data-style='ghost'][data-variant='secondary'] {
|
|
85
|
+
color:var(--accent);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
[data-style='minimal'] [data-button][data-style='ghost'][data-variant='accent'] {
|
|
89
|
+
color:var(--accent);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
[data-style='minimal'] [data-button][data-style='ghost'][data-variant='danger'] {
|
|
93
|
+
color:var(--danger);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
/* =============================================================================
|
|
97
|
+
Gradient Style
|
|
98
|
+
============================================================================= */
|
|
99
|
+
|
|
100
|
+
[data-style='minimal'] [data-button][data-style='gradient'][data-variant='default'],
|
|
101
|
+
[data-style='minimal'] [data-button][data-style='gradient']:not([data-variant]) {
|
|
102
|
+
--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--ink);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
[data-style='minimal'] [data-button][data-style='gradient'][data-variant='primary'] {
|
|
106
|
+
--un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-primary) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-primary) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--on-primary);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
[data-style='minimal'] [data-button][data-style='gradient'][data-variant='secondary'] {
|
|
110
|
+
--un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--on-primary);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
[data-style='minimal'] [data-button][data-style='gradient'][data-variant='accent'] {
|
|
114
|
+
--un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
[data-style='minimal'] [data-button][data-style='gradient'][data-variant='danger'] {
|
|
118
|
+
--un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
[data-style='minimal']
|
|
122
|
+
[data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
|
|
123
|
+
filter: brightness(1.05);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/* =============================================================================
|
|
127
|
+
Link Style
|
|
128
|
+
============================================================================= */
|
|
129
|
+
|
|
130
|
+
[data-style='minimal'] [data-button][data-style='link'][data-variant='default'],
|
|
131
|
+
[data-style='minimal'] [data-button][data-style='link']:not([data-variant]) {
|
|
132
|
+
color:var(--ink-mute);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
[data-style='minimal'] [data-button][data-style='link'][data-variant='primary'] {
|
|
136
|
+
color:var(--primary);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
[data-style='minimal'] [data-button][data-style='link'][data-variant='secondary'] {
|
|
140
|
+
color:var(--accent);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
[data-style='minimal'] [data-button][data-style='link'][data-variant='accent'] {
|
|
144
|
+
color:var(--accent);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
[data-style='minimal'] [data-button][data-style='link'][data-variant='danger'] {
|
|
148
|
+
color:var(--danger);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
[data-style='minimal'] [data-button][data-style='link']:hover:not(:disabled):not([data-disabled]) {
|
|
152
|
+
color:var(--ink);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
/* =============================================================================
|
|
156
|
+
Hover States
|
|
157
|
+
============================================================================= */
|
|
158
|
+
|
|
159
|
+
[data-style='minimal']
|
|
160
|
+
[data-button][data-style='default']:hover:not(:disabled):not([data-disabled]),
|
|
161
|
+
[data-style='minimal'] [data-button]:not([data-style]):hover:not(:disabled):not([data-disabled]) {
|
|
162
|
+
background-image:none;background-color:var(--paper-mute);border-color:var(--ink-soft);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
[data-style='minimal']
|
|
166
|
+
[data-button][data-style='outline']:hover:not(:disabled):not([data-disabled]) {
|
|
167
|
+
background-image:none;background-color:var(--paper-soft);border-color:var(--ink-soft);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
[data-style='minimal'] [data-button][data-style='ghost']:hover:not(:disabled):not([data-disabled]) {
|
|
171
|
+
background-color:var(--paper-mute);
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
/* =============================================================================
|
|
175
|
+
Focus
|
|
176
|
+
============================================================================= */
|
|
177
|
+
|
|
178
|
+
[data-style='minimal'] [data-button]:focus-visible {
|
|
179
|
+
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);
|
|
180
|
+
}
|