@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/index.css
CHANGED
|
@@ -2279,8 +2279,11 @@
|
|
|
2279
2279
|
padding-inline: 0.375rem;
|
|
2280
2280
|
}
|
|
2281
2281
|
|
|
2282
|
+
/* Icon-only options are square — min-width matches the height (same treatment
|
|
2283
|
+
the `button` variant gets), so a lone icon sits in a square, not a portrait box. */
|
|
2282
2284
|
[data-toggle][data-toggle-size='sm']:not([data-toggle-labels='true']) [data-toggle-option] {
|
|
2283
2285
|
padding-inline: 0.25rem;
|
|
2286
|
+
min-width: var(--control-h-sm);
|
|
2284
2287
|
}
|
|
2285
2288
|
|
|
2286
2289
|
[data-toggle][data-toggle-size='sm'] [data-toggle-icon] {
|
|
@@ -2303,6 +2306,7 @@
|
|
|
2303
2306
|
[data-toggle][data-toggle-size='md']:not([data-toggle-labels='true']) [data-toggle-option],
|
|
2304
2307
|
[data-toggle]:not([data-toggle-size]):not([data-toggle-labels='true']) [data-toggle-option] {
|
|
2305
2308
|
padding-inline: 0.375rem;
|
|
2309
|
+
min-width: var(--control-h-md);
|
|
2306
2310
|
}
|
|
2307
2311
|
|
|
2308
2312
|
[data-toggle][data-toggle-size='md'] [data-toggle-icon],
|
|
@@ -2323,6 +2327,7 @@
|
|
|
2323
2327
|
|
|
2324
2328
|
[data-toggle][data-toggle-size='lg']:not([data-toggle-labels='true']) [data-toggle-option] {
|
|
2325
2329
|
padding-inline: 0.5rem;
|
|
2330
|
+
min-width: var(--control-h-lg);
|
|
2326
2331
|
}
|
|
2327
2332
|
|
|
2328
2333
|
[data-toggle][data-toggle-size='lg'] [data-toggle-icon] {
|
|
@@ -4289,9 +4294,10 @@ a[data-card] {
|
|
|
4289
4294
|
}
|
|
4290
4295
|
|
|
4291
4296
|
[data-stepper-step][data-completed] [data-stepper-circle] {
|
|
4297
|
+
/* solid brand fill + on-primary text (dark, reads on the bright 500). */
|
|
4292
4298
|
background-color: var(--primary);
|
|
4293
4299
|
border-color: var(--primary);
|
|
4294
|
-
color: var(--
|
|
4300
|
+
color: var(--on-primary);
|
|
4295
4301
|
}
|
|
4296
4302
|
|
|
4297
4303
|
/* Check glyph inside a completed circle follows the circle's color
|
|
@@ -4302,7 +4308,9 @@ a[data-card] {
|
|
|
4302
4308
|
|
|
4303
4309
|
[data-stepper-step][data-active] [data-stepper-circle] {
|
|
4304
4310
|
border-color: var(--primary);
|
|
4305
|
-
|
|
4311
|
+
/* ink number (not saffron) so it reads on the page; the saffron border + ring
|
|
4312
|
+
keep the active accent */
|
|
4313
|
+
color: var(--ink);
|
|
4306
4314
|
--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.2 * 100%), transparent);
|
|
4307
4315
|
}
|
|
4308
4316
|
|
|
@@ -4313,9 +4321,12 @@ a[data-card] {
|
|
|
4313
4321
|
flex: 1;
|
|
4314
4322
|
height: 2px;
|
|
4315
4323
|
min-width: 2rem;
|
|
4316
|
-
|
|
4317
|
-
|
|
4318
|
-
|
|
4324
|
+
/* Align to the circle's vertical center, NOT the full step height. The step
|
|
4325
|
+
is `circle + label below`, so `align-self: center` drops the line into the
|
|
4326
|
+
label gap (reads as bottom-aligned). Pin to the top and offset by the
|
|
4327
|
+
circle's radius (1.25rem) minus half the line height. */
|
|
4328
|
+
align-self: flex-start;
|
|
4329
|
+
margin-top: calc(1.25rem - 1px);
|
|
4319
4330
|
transition: background-color 0.2s ease;
|
|
4320
4331
|
}
|
|
4321
4332
|
|
|
@@ -4626,7 +4637,10 @@ a[data-card] {
|
|
|
4626
4637
|
display: inline-block;
|
|
4627
4638
|
vertical-align: middle;
|
|
4628
4639
|
margin-left: 0.25rem;
|
|
4629
|
-
|
|
4640
|
+
/* Unsorted hint — visible enough to read as "sortable" against a tinted
|
|
4641
|
+
header, but still clearly secondary to the active (sorted) state below.
|
|
4642
|
+
0.4 was too faint (the glyph all but vanished on dark headers). */
|
|
4643
|
+
opacity: 0.65;
|
|
4630
4644
|
transition: opacity 150ms ease;
|
|
4631
4645
|
}
|
|
4632
4646
|
|
|
@@ -7261,16 +7275,16 @@ button[data-step-number] {
|
|
|
7261
7275
|
/* Accent variant */
|
|
7262
7276
|
[data-style='rokkit'] [data-button][data-style='default'][data-variant='accent'],
|
|
7263
7277
|
[data-style='rokkit'] [data-button]:not([data-style])[data-variant='accent'] {
|
|
7264
|
-
border-width:1px;--un-text-opacity:1;color:
|
|
7278
|
+
border-width:1px;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));border-color:var(--accent);
|
|
7265
7279
|
background: linear-gradient(to bottom, var(--accent), var(--accent));
|
|
7266
|
-
}
|
|
7280
|
+
}
|
|
7267
7281
|
|
|
7268
7282
|
/* Danger variant */
|
|
7269
7283
|
[data-style='rokkit'] [data-button][data-style='default'][data-variant='danger'],
|
|
7270
7284
|
[data-style='rokkit'] [data-button]:not([data-style])[data-variant='danger'] {
|
|
7271
|
-
border-width:1px;--un-text-opacity:1;color:
|
|
7285
|
+
border-width:1px;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));border-color:var(--danger);
|
|
7272
7286
|
background: linear-gradient(to bottom, var(--danger), var(--danger));
|
|
7273
|
-
}
|
|
7287
|
+
}
|
|
7274
7288
|
|
|
7275
7289
|
/* =============================================================================
|
|
7276
7290
|
Outline Style
|
|
@@ -7344,12 +7358,12 @@ button[data-step-number] {
|
|
|
7344
7358
|
}
|
|
7345
7359
|
|
|
7346
7360
|
[data-style='rokkit'] [data-button][data-style='gradient'][data-variant='accent'] {
|
|
7347
|
-
--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:
|
|
7348
|
-
}
|
|
7361
|
+
--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));
|
|
7362
|
+
}
|
|
7349
7363
|
|
|
7350
7364
|
[data-style='rokkit'] [data-button][data-style='gradient'][data-variant='danger'] {
|
|
7351
|
-
--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:
|
|
7352
|
-
}
|
|
7365
|
+
--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));
|
|
7366
|
+
}
|
|
7353
7367
|
|
|
7354
7368
|
[data-style='rokkit']
|
|
7355
7369
|
[data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
|
|
@@ -7449,7 +7463,7 @@ button[data-step-number] {
|
|
|
7449
7463
|
[data-button][data-style='ghost']:hover:not(:disabled):not(
|
|
7450
7464
|
[data-disabled]
|
|
7451
7465
|
)[data-variant='primary'] {
|
|
7452
|
-
background-color:var(--primary);
|
|
7466
|
+
background-color: var(--primary);
|
|
7453
7467
|
}
|
|
7454
7468
|
|
|
7455
7469
|
[data-style='rokkit']
|
|
@@ -7708,7 +7722,7 @@ button[data-step-number] {
|
|
|
7708
7722
|
============================================================================= */
|
|
7709
7723
|
|
|
7710
7724
|
[data-style='rokkit'] [data-tabs-trigger] [data-tabs-icon] {
|
|
7711
|
-
color:var(--ink-
|
|
7725
|
+
color:var(--ink-mute);
|
|
7712
7726
|
}
|
|
7713
7727
|
|
|
7714
7728
|
[data-style='rokkit'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
|
|
@@ -7752,7 +7766,7 @@ button[data-step-number] {
|
|
|
7752
7766
|
============================================================================= */
|
|
7753
7767
|
|
|
7754
7768
|
[data-style='rokkit'] [data-toggle-option] {
|
|
7755
|
-
color:var(--ink-
|
|
7769
|
+
color:var(--ink-mute);
|
|
7756
7770
|
}
|
|
7757
7771
|
|
|
7758
7772
|
/* Hover applies only to UNSELECTED options so the branded selected
|
|
@@ -7775,7 +7789,7 @@ button[data-step-number] {
|
|
|
7775
7789
|
============================================================================= */
|
|
7776
7790
|
|
|
7777
7791
|
[data-style='rokkit'] [data-toggle-option] [data-toggle-icon] {
|
|
7778
|
-
color:var(--ink-
|
|
7792
|
+
color:var(--ink-mute);
|
|
7779
7793
|
}
|
|
7780
7794
|
|
|
7781
7795
|
[data-style='rokkit'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
|
|
@@ -7795,7 +7809,7 @@ button[data-step-number] {
|
|
|
7795
7809
|
============================================================================= */
|
|
7796
7810
|
|
|
7797
7811
|
[data-style='rokkit'] [data-toggle][data-toggle-variant='button'] {
|
|
7798
|
-
border-color:transparent;background-color:transparent;color:var(--ink-
|
|
7812
|
+
border-color:transparent;background-color:transparent;color:var(--ink-mute);
|
|
7799
7813
|
background-image: none;
|
|
7800
7814
|
}
|
|
7801
7815
|
|
|
@@ -7805,7 +7819,7 @@ button[data-step-number] {
|
|
|
7805
7819
|
}
|
|
7806
7820
|
|
|
7807
7821
|
[data-style='rokkit'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
|
|
7808
|
-
color:var(--ink-
|
|
7822
|
+
color:var(--ink-mute);
|
|
7809
7823
|
}
|
|
7810
7824
|
|
|
7811
7825
|
[data-style='rokkit'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
|
|
@@ -7899,7 +7913,7 @@ button[data-step-number] {
|
|
|
7899
7913
|
|
|
7900
7914
|
[data-style='rokkit'] [data-list] [data-list-item] [data-item-icon] {
|
|
7901
7915
|
font-size: 1rem;
|
|
7902
|
-
color:var(--ink-
|
|
7916
|
+
color:var(--ink-mute);
|
|
7903
7917
|
}
|
|
7904
7918
|
|
|
7905
7919
|
[data-style='rokkit'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
|
|
@@ -7924,7 +7938,7 @@ button[data-step-number] {
|
|
|
7924
7938
|
|
|
7925
7939
|
/* Literal / kanji icons */
|
|
7926
7940
|
[data-style='rokkit'] [data-list] [data-list-item] [data-item-icon-literal] {
|
|
7927
|
-
color:var(--ink-
|
|
7941
|
+
color:var(--ink-mute);
|
|
7928
7942
|
}
|
|
7929
7943
|
|
|
7930
7944
|
[data-style='rokkit'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon-literal],
|
|
@@ -7949,7 +7963,7 @@ button[data-step-number] {
|
|
|
7949
7963
|
|
|
7950
7964
|
/* Item description */
|
|
7951
7965
|
[data-style='rokkit'] [data-list] [data-list-item] [data-item-description] {
|
|
7952
|
-
color:var(--ink-
|
|
7966
|
+
color:var(--ink-mute);
|
|
7953
7967
|
}
|
|
7954
7968
|
|
|
7955
7969
|
[data-style='rokkit'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
|
|
@@ -7969,7 +7983,7 @@ button[data-step-number] {
|
|
|
7969
7983
|
|
|
7970
7984
|
/* Item badge */
|
|
7971
7985
|
[data-style='rokkit'] [data-list] [data-list-item] [data-item-badge] {
|
|
7972
|
-
border-width:1px;--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--ink-
|
|
7986
|
+
border-width:1px;--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--ink-mute);border-color:var(--paper-edge);
|
|
7973
7987
|
}
|
|
7974
7988
|
|
|
7975
7989
|
[data-style='rokkit'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
|
|
@@ -8002,7 +8016,7 @@ button[data-step-number] {
|
|
|
8002
8016
|
============================================================================= */
|
|
8003
8017
|
|
|
8004
8018
|
[data-style='rokkit'] [data-list] [data-list-group] {
|
|
8005
|
-
margin-top:0.5rem;color:var(--ink-
|
|
8019
|
+
margin-top:0.5rem;color:var(--ink-mute);
|
|
8006
8020
|
}
|
|
8007
8021
|
|
|
8008
8022
|
[data-style='rokkit'] [data-list] [data-list-group]:first-child {
|
|
@@ -8052,6 +8066,17 @@ button[data-step-number] {
|
|
|
8052
8066
|
* Rich gradients and glowing borders.
|
|
8053
8067
|
*/
|
|
8054
8068
|
|
|
8069
|
+
/* =============================================================================
|
|
8070
|
+
Connector Lines — hairline tone (mode-aware), not currentColor (which
|
|
8071
|
+
renders white in dark mode and greyish in light).
|
|
8072
|
+
============================================================================= */
|
|
8073
|
+
|
|
8074
|
+
[data-style='rokkit'] [data-tree]:not([data-line-style='none']) [data-connector-v],
|
|
8075
|
+
[data-style='rokkit'] [data-tree]:not([data-line-style='none']) [data-connector-h],
|
|
8076
|
+
[data-style='rokkit'] [data-tree]:not([data-line-style='none']) [data-connector-corner] {
|
|
8077
|
+
border-color:var(--paper-edge);
|
|
8078
|
+
}
|
|
8079
|
+
|
|
8055
8080
|
/* =============================================================================
|
|
8056
8081
|
Tree Container
|
|
8057
8082
|
============================================================================= */
|
|
@@ -8065,7 +8090,7 @@ button[data-step-number] {
|
|
|
8065
8090
|
============================================================================= */
|
|
8066
8091
|
|
|
8067
8092
|
[data-style='rokkit'] [data-tree-toggle-btn] {
|
|
8068
|
-
color:var(--ink-
|
|
8093
|
+
color:var(--ink-mute);
|
|
8069
8094
|
}
|
|
8070
8095
|
|
|
8071
8096
|
[data-style='rokkit'] [data-tree-toggle-btn]:hover {
|
|
@@ -8111,7 +8136,7 @@ button[data-step-number] {
|
|
|
8111
8136
|
============================================================================= */
|
|
8112
8137
|
|
|
8113
8138
|
[data-style='rokkit'] [data-tree-item-content] [data-item-icon] {
|
|
8114
|
-
color:var(--ink-
|
|
8139
|
+
color:var(--ink-mute);
|
|
8115
8140
|
}
|
|
8116
8141
|
|
|
8117
8142
|
[data-style='rokkit'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
|
|
@@ -8129,12 +8154,12 @@ button[data-step-number] {
|
|
|
8129
8154
|
[data-tree]:not(:focus-within)
|
|
8130
8155
|
[data-tree-item-content][data-active='true']
|
|
8131
8156
|
[data-item-icon] {
|
|
8132
|
-
color:var(--ink-
|
|
8157
|
+
color:var(--ink-mute);
|
|
8133
8158
|
}
|
|
8134
8159
|
|
|
8135
8160
|
/* Item description */
|
|
8136
8161
|
[data-style='rokkit'] [data-tree-item-content] [data-item-description] {
|
|
8137
|
-
color:var(--ink-
|
|
8162
|
+
color:var(--ink-mute);
|
|
8138
8163
|
}
|
|
8139
8164
|
|
|
8140
8165
|
[data-style='rokkit']
|
|
@@ -8148,12 +8173,12 @@ button[data-step-number] {
|
|
|
8148
8173
|
[data-tree]:not(:focus-within)
|
|
8149
8174
|
[data-tree-item-content][data-active='true']
|
|
8150
8175
|
[data-item-description] {
|
|
8151
|
-
color:var(--ink-
|
|
8176
|
+
color:var(--ink-mute);
|
|
8152
8177
|
}
|
|
8153
8178
|
|
|
8154
8179
|
/* Item badge */
|
|
8155
8180
|
[data-style='rokkit'] [data-tree-item-content] [data-item-badge] {
|
|
8156
|
-
border-width:1px;--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--ink-
|
|
8181
|
+
border-width:1px;--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--ink-mute);border-color:var(--paper-edge);
|
|
8157
8182
|
}
|
|
8158
8183
|
|
|
8159
8184
|
[data-style='rokkit']
|
|
@@ -8239,7 +8264,7 @@ button[data-step-number] {
|
|
|
8239
8264
|
============================================================================= */
|
|
8240
8265
|
|
|
8241
8266
|
[data-style='rokkit'] [data-select-placeholder] {
|
|
8242
|
-
color:var(--ink-
|
|
8267
|
+
color:var(--ink-mute);
|
|
8243
8268
|
}
|
|
8244
8269
|
|
|
8245
8270
|
/* =============================================================================
|
|
@@ -8247,7 +8272,7 @@ button[data-step-number] {
|
|
|
8247
8272
|
============================================================================= */
|
|
8248
8273
|
|
|
8249
8274
|
[data-style='rokkit'] [data-select-arrow] {
|
|
8250
|
-
color:var(--ink-
|
|
8275
|
+
color:var(--ink-mute);
|
|
8251
8276
|
}
|
|
8252
8277
|
|
|
8253
8278
|
[data-style='rokkit'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
|
|
@@ -8263,7 +8288,7 @@ button[data-step-number] {
|
|
|
8263
8288
|
}
|
|
8264
8289
|
|
|
8265
8290
|
[data-style='rokkit'] [data-select-tag-remove] {
|
|
8266
|
-
color:var(--ink-
|
|
8291
|
+
color:var(--ink-mute);
|
|
8267
8292
|
}
|
|
8268
8293
|
|
|
8269
8294
|
[data-style='rokkit'] [data-select-tag-remove]:hover {
|
|
@@ -8297,11 +8322,12 @@ button[data-step-number] {
|
|
|
8297
8322
|
border-left-width:2px;background-color:var(--paper-mute);color:var(--primary);border-left-color:var(--primary);
|
|
8298
8323
|
}
|
|
8299
8324
|
|
|
8300
|
-
/* Selected state — full gradient when dropdown has focus
|
|
8325
|
+
/* Selected state — full gradient when dropdown has focus. The option now has a
|
|
8326
|
+
primary→accent FILL, so its text must be on-primary (teal-on-teal otherwise). */
|
|
8301
8327
|
[data-style='rokkit']
|
|
8302
8328
|
[data-select-dropdown]:focus-within
|
|
8303
8329
|
[data-select-option][data-selected='true'] {
|
|
8304
|
-
border-left-width:2px;--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-accent) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--primary);border-left-color:var(--primary);
|
|
8330
|
+
border-left-width:2px;--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-accent) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--on-primary);border-left-color:var(--primary);
|
|
8305
8331
|
}
|
|
8306
8332
|
|
|
8307
8333
|
/* Selected + hover */
|
|
@@ -8325,7 +8351,7 @@ button[data-step-number] {
|
|
|
8325
8351
|
|
|
8326
8352
|
/* Item elements */
|
|
8327
8353
|
[data-style='rokkit'] [data-select-option] [data-item-icon] {
|
|
8328
|
-
color:var(--ink-
|
|
8354
|
+
color:var(--ink-mute);
|
|
8329
8355
|
}
|
|
8330
8356
|
|
|
8331
8357
|
[data-style='rokkit'] [data-select-option]:hover:not(:disabled) [data-item-icon] {
|
|
@@ -8340,23 +8366,33 @@ button[data-step-number] {
|
|
|
8340
8366
|
[data-select-dropdown]:focus-within
|
|
8341
8367
|
[data-select-option][data-selected='true']
|
|
8342
8368
|
[data-item-icon] {
|
|
8343
|
-
color:var(--primary);
|
|
8369
|
+
color:var(--on-primary);
|
|
8344
8370
|
}
|
|
8345
8371
|
|
|
8346
8372
|
[data-style='rokkit'] [data-select-option] [data-item-description] {
|
|
8347
|
-
color:var(--ink-
|
|
8373
|
+
color:var(--ink-mute);
|
|
8348
8374
|
}
|
|
8349
8375
|
|
|
8350
8376
|
[data-style='rokkit'] [data-select-option][data-selected='true'] [data-item-description] {
|
|
8351
8377
|
color:var(--primary);
|
|
8352
8378
|
}
|
|
8353
8379
|
|
|
8380
|
+
/* Description also rides the primary fill when the dropdown has focus. */
|
|
8381
|
+
[data-style='rokkit']
|
|
8382
|
+
[data-select-dropdown]:focus-within
|
|
8383
|
+
[data-select-option][data-selected='true']
|
|
8384
|
+
[data-item-description] {
|
|
8385
|
+
color:var(--on-primary);
|
|
8386
|
+
}
|
|
8387
|
+
|
|
8354
8388
|
[data-style='rokkit'] [data-select-option] [data-item-badge] {
|
|
8355
|
-
color:var(--ink-
|
|
8389
|
+
color:var(--ink-mute);background-color:var(--paper-mute);
|
|
8356
8390
|
}
|
|
8357
8391
|
|
|
8392
|
+
/* Selected badge sits on a primary fill → on-primary text (not text-primary,
|
|
8393
|
+
which would be primary-on-primary). */
|
|
8358
8394
|
[data-style='rokkit'] [data-select-option][data-selected='true'] [data-item-badge] {
|
|
8359
|
-
color:var(--primary);background-color:var(--primary);
|
|
8395
|
+
color:var(--on-primary);background-color:var(--primary);
|
|
8360
8396
|
}
|
|
8361
8397
|
|
|
8362
8398
|
/* =============================================================================
|
|
@@ -8364,7 +8400,7 @@ button[data-step-number] {
|
|
|
8364
8400
|
============================================================================= */
|
|
8365
8401
|
|
|
8366
8402
|
[data-style='rokkit'] [data-select-group-label] {
|
|
8367
|
-
color:var(--ink-
|
|
8403
|
+
color:var(--ink-mute);
|
|
8368
8404
|
}
|
|
8369
8405
|
|
|
8370
8406
|
/* =============================================================================
|
|
@@ -8392,11 +8428,11 @@ button[data-step-number] {
|
|
|
8392
8428
|
}
|
|
8393
8429
|
|
|
8394
8430
|
[data-style='rokkit'] [data-select-filter-input]::placeholder {
|
|
8395
|
-
color:var(--ink-
|
|
8431
|
+
color:var(--ink-mute);
|
|
8396
8432
|
}
|
|
8397
8433
|
|
|
8398
8434
|
[data-style='rokkit'] [data-select-empty] {
|
|
8399
|
-
color:var(--ink-
|
|
8435
|
+
color:var(--ink-mute);
|
|
8400
8436
|
}
|
|
8401
8437
|
|
|
8402
8438
|
/**
|
|
@@ -8427,7 +8463,7 @@ button[data-step-number] {
|
|
|
8427
8463
|
|
|
8428
8464
|
/* Trigger elements */
|
|
8429
8465
|
[data-style='rokkit'] [data-menu-trigger] [data-menu-icon] {
|
|
8430
|
-
color:var(--ink-
|
|
8466
|
+
color:var(--ink-mute);
|
|
8431
8467
|
}
|
|
8432
8468
|
|
|
8433
8469
|
[data-style='rokkit'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
|
|
@@ -8435,7 +8471,7 @@ button[data-step-number] {
|
|
|
8435
8471
|
}
|
|
8436
8472
|
|
|
8437
8473
|
[data-style='rokkit'] [data-menu-trigger] [data-menu-arrow] {
|
|
8438
|
-
color:var(--ink-
|
|
8474
|
+
color:var(--ink-mute);
|
|
8439
8475
|
}
|
|
8440
8476
|
|
|
8441
8477
|
/* =============================================================================
|
|
@@ -8465,7 +8501,7 @@ button[data-step-number] {
|
|
|
8465
8501
|
|
|
8466
8502
|
/* Item elements */
|
|
8467
8503
|
[data-style='rokkit'] [data-menu-item] [data-item-icon] {
|
|
8468
|
-
color:var(--ink-
|
|
8504
|
+
color:var(--ink-mute);
|
|
8469
8505
|
}
|
|
8470
8506
|
|
|
8471
8507
|
[data-style='rokkit'] [data-menu-item]:hover:not(:disabled) [data-item-icon],
|
|
@@ -8474,7 +8510,7 @@ button[data-step-number] {
|
|
|
8474
8510
|
}
|
|
8475
8511
|
|
|
8476
8512
|
[data-style='rokkit'] [data-menu-item] [data-item-description] {
|
|
8477
|
-
color:var(--ink-
|
|
8513
|
+
color:var(--ink-mute);
|
|
8478
8514
|
}
|
|
8479
8515
|
|
|
8480
8516
|
/* =============================================================================
|
|
@@ -8482,7 +8518,7 @@ button[data-step-number] {
|
|
|
8482
8518
|
============================================================================= */
|
|
8483
8519
|
|
|
8484
8520
|
[data-style='rokkit'] [data-menu-group] {
|
|
8485
|
-
color:var(--ink-
|
|
8521
|
+
color:var(--ink-mute);
|
|
8486
8522
|
}
|
|
8487
8523
|
|
|
8488
8524
|
/* =============================================================================
|
|
@@ -8520,7 +8556,7 @@ button[data-step-number] {
|
|
|
8520
8556
|
}
|
|
8521
8557
|
|
|
8522
8558
|
[data-style='rokkit'] [data-dropdown-trigger] [data-dropdown-icon] {
|
|
8523
|
-
color:var(--ink-
|
|
8559
|
+
color:var(--ink-mute);
|
|
8524
8560
|
}
|
|
8525
8561
|
|
|
8526
8562
|
[data-style='rokkit'] [data-dropdown-trigger]:hover:not(:disabled) [data-dropdown-icon] {
|
|
@@ -8528,7 +8564,7 @@ button[data-step-number] {
|
|
|
8528
8564
|
}
|
|
8529
8565
|
|
|
8530
8566
|
[data-style='rokkit'] [data-dropdown-trigger] [data-dropdown-arrow] {
|
|
8531
|
-
color:var(--ink-
|
|
8567
|
+
color:var(--ink-mute);
|
|
8532
8568
|
}
|
|
8533
8569
|
|
|
8534
8570
|
/* =============================================================================
|
|
@@ -8776,7 +8812,7 @@ button[data-step-number] {
|
|
|
8776
8812
|
============================================================================= */
|
|
8777
8813
|
|
|
8778
8814
|
[data-style='rokkit'] [data-table-header] th {
|
|
8779
|
-
border-bottom-width:1px;color:var(--ink-
|
|
8815
|
+
border-bottom-width:1px;color:var(--ink-mute);border-color:var(--paper-edge);background-color:var(--paper-mute);
|
|
8780
8816
|
}
|
|
8781
8817
|
|
|
8782
8818
|
[data-style='rokkit'] [data-table-header-cell][data-sortable='true']:hover {
|
|
@@ -8789,7 +8825,7 @@ button[data-step-number] {
|
|
|
8789
8825
|
}
|
|
8790
8826
|
|
|
8791
8827
|
[data-style='rokkit'] [data-table-sort-icon] {
|
|
8792
|
-
color:var(--ink-
|
|
8828
|
+
color:var(--ink-mute);
|
|
8793
8829
|
}
|
|
8794
8830
|
|
|
8795
8831
|
[data-style='rokkit'] [data-table-header-cell][data-sort-order='ascending'] [data-table-sort-icon],
|
|
@@ -8850,7 +8886,7 @@ button[data-step-number] {
|
|
|
8850
8886
|
============================================================================= */
|
|
8851
8887
|
|
|
8852
8888
|
[data-style='rokkit'] [data-table-empty] {
|
|
8853
|
-
color:var(--ink-
|
|
8889
|
+
color:var(--ink-mute);
|
|
8854
8890
|
}
|
|
8855
8891
|
|
|
8856
8892
|
/* =============================================================================
|
|
@@ -8858,7 +8894,7 @@ button[data-step-number] {
|
|
|
8858
8894
|
============================================================================= */
|
|
8859
8895
|
|
|
8860
8896
|
[data-style='rokkit'] [data-table-cell] [data-cell-icon] {
|
|
8861
|
-
color:var(--ink-
|
|
8897
|
+
color:var(--ink-mute);
|
|
8862
8898
|
}
|
|
8863
8899
|
|
|
8864
8900
|
[data-style='rokkit'] [data-table-row][data-selected='true'] [data-cell-icon] {
|
|
@@ -8875,7 +8911,7 @@ button[data-step-number] {
|
|
|
8875
8911
|
}
|
|
8876
8912
|
|
|
8877
8913
|
[data-style='rokkit'] [data-table-responsive] [data-table-cell]::before {
|
|
8878
|
-
color:var(--ink-
|
|
8914
|
+
color:var(--ink-mute);
|
|
8879
8915
|
}
|
|
8880
8916
|
|
|
8881
8917
|
/* Disable striped alternating bg in card layout */
|
|
@@ -9012,11 +9048,12 @@ button[data-step-number] {
|
|
|
9012
9048
|
}
|
|
9013
9049
|
|
|
9014
9050
|
[data-style='rokkit'] [data-timeline-item][data-completed] [data-timeline-circle] {
|
|
9015
|
-
|
|
9051
|
+
border-color:var(--primary);color:var(--on-primary);
|
|
9052
|
+
background-color: var(--primary);
|
|
9016
9053
|
}
|
|
9017
9054
|
|
|
9018
9055
|
[data-style='rokkit'] [data-timeline-item][data-active] [data-timeline-circle] {
|
|
9019
|
-
--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.2 * 100%), transparent);border-color:var(--primary);color:var(--
|
|
9056
|
+
--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.2 * 100%), transparent);border-color:var(--primary);color:var(--ink);
|
|
9020
9057
|
}
|
|
9021
9058
|
|
|
9022
9059
|
/* =============================================================================
|
|
@@ -9028,7 +9065,7 @@ button[data-step-number] {
|
|
|
9028
9065
|
}
|
|
9029
9066
|
|
|
9030
9067
|
[data-style='rokkit'] [data-timeline-item][data-completed] [data-timeline-connector] {
|
|
9031
|
-
background-color:var(--primary);
|
|
9068
|
+
background-color: var(--primary);
|
|
9032
9069
|
}
|
|
9033
9070
|
|
|
9034
9071
|
/* =============================================================================
|
|
@@ -9428,8 +9465,8 @@ button[data-step-number] {
|
|
|
9428
9465
|
}
|
|
9429
9466
|
|
|
9430
9467
|
[data-style='rokkit'] [data-card][data-variant='primary'] [data-card-body] {
|
|
9431
|
-
color:
|
|
9432
|
-
}
|
|
9468
|
+
color:rgb(22 22 22 / 0.8);
|
|
9469
|
+
}
|
|
9433
9470
|
|
|
9434
9471
|
/* Secondary — muted secondary surface */
|
|
9435
9472
|
[data-style='rokkit'] [data-card][data-variant='secondary'] {
|
|
@@ -9442,8 +9479,8 @@ button[data-step-number] {
|
|
|
9442
9479
|
}
|
|
9443
9480
|
|
|
9444
9481
|
[data-style='rokkit'] [data-card][data-variant='secondary'] [data-card-body] {
|
|
9445
|
-
color:
|
|
9446
|
-
}
|
|
9482
|
+
color:rgb(22 22 22 / 0.8);
|
|
9483
|
+
}
|
|
9447
9484
|
|
|
9448
9485
|
/* Tertiary — elevated surface, no color accent */
|
|
9449
9486
|
[data-style='rokkit'] [data-card][data-variant='tertiary'] {
|
|
@@ -9885,7 +9922,7 @@ button[data-step-number] {
|
|
|
9885
9922
|
}
|
|
9886
9923
|
|
|
9887
9924
|
[data-style='rokkit'] [data-divider-label] {
|
|
9888
|
-
color:var(--ink-
|
|
9925
|
+
color:var(--ink-mute);
|
|
9889
9926
|
}
|
|
9890
9927
|
|
|
9891
9928
|
/**
|
|
@@ -9895,7 +9932,7 @@ button[data-step-number] {
|
|
|
9895
9932
|
/* Default variant */
|
|
9896
9933
|
[data-style='rokkit'] [data-badge][data-variant='default'],
|
|
9897
9934
|
[data-style='rokkit'] [data-badge]:not([data-variant]) {
|
|
9898
|
-
background-color:var(--ink-
|
|
9935
|
+
background-color:var(--ink-mute);color:var(--paper-soft);
|
|
9899
9936
|
}
|
|
9900
9937
|
|
|
9901
9938
|
/* Primary */
|
|
@@ -9905,25 +9942,25 @@ button[data-step-number] {
|
|
|
9905
9942
|
|
|
9906
9943
|
/* Success */
|
|
9907
9944
|
[data-style='rokkit'] [data-badge][data-variant='success'] {
|
|
9908
|
-
--un-text-opacity:1;color:
|
|
9909
|
-
}
|
|
9945
|
+
--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));background-color:var(--success);
|
|
9946
|
+
}
|
|
9910
9947
|
|
|
9911
9948
|
/* Warning */
|
|
9912
9949
|
[data-style='rokkit'] [data-badge][data-variant='warning'] {
|
|
9913
|
-
--un-text-opacity:1;color:
|
|
9914
|
-
}
|
|
9950
|
+
--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));background-color:var(--warning);
|
|
9951
|
+
}
|
|
9915
9952
|
|
|
9916
9953
|
/* Error */
|
|
9917
9954
|
[data-style='rokkit'] [data-badge][data-variant='error'] {
|
|
9918
|
-
--un-text-opacity:1;color:
|
|
9919
|
-
}
|
|
9955
|
+
--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));background-color:var(--error);
|
|
9956
|
+
}
|
|
9920
9957
|
|
|
9921
9958
|
/**
|
|
9922
9959
|
* Avatar - Rokkit Theme Styles
|
|
9923
9960
|
*/
|
|
9924
9961
|
|
|
9925
9962
|
[data-style='rokkit'] [data-avatar] {
|
|
9926
|
-
background-color:var(--paper-edge);color:var(--ink
|
|
9963
|
+
background-color:var(--paper-edge);color:var(--ink);
|
|
9927
9964
|
}
|
|
9928
9965
|
|
|
9929
9966
|
/* Status dot colors */
|
|
@@ -10021,23 +10058,27 @@ button[data-step-number] {
|
|
|
10021
10058
|
|
|
10022
10059
|
[data-style='minimal'] [data-button][data-style='default'][data-variant='primary'],
|
|
10023
10060
|
[data-style='minimal'] [data-button]:not([data-style])[data-variant='primary'] {
|
|
10024
|
-
border-color:transparent;background-image:none;
|
|
10061
|
+
border-color:transparent;background-image:none;color:var(--on-primary);
|
|
10062
|
+
background-color: var(--primary);
|
|
10025
10063
|
}
|
|
10026
10064
|
|
|
10027
10065
|
[data-style='minimal'] [data-button][data-style='default'][data-variant='secondary'],
|
|
10028
10066
|
[data-style='minimal'] [data-button]:not([data-style])[data-variant='secondary'] {
|
|
10029
|
-
border-color:transparent;background-image:none;
|
|
10067
|
+
border-color:transparent;background-image:none;color:var(--on-primary);
|
|
10068
|
+
background-color: var(--accent);
|
|
10030
10069
|
}
|
|
10031
10070
|
|
|
10032
10071
|
[data-style='minimal'] [data-button][data-style='default'][data-variant='accent'],
|
|
10033
10072
|
[data-style='minimal'] [data-button]:not([data-style])[data-variant='accent'] {
|
|
10034
|
-
border-color:transparent;background-image:none;--un-text-opacity:1;color:
|
|
10035
|
-
|
|
10073
|
+
border-color:transparent;background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
|
|
10074
|
+
background-color: var(--accent);
|
|
10075
|
+
}
|
|
10036
10076
|
|
|
10037
10077
|
[data-style='minimal'] [data-button][data-style='default'][data-variant='danger'],
|
|
10038
10078
|
[data-style='minimal'] [data-button]:not([data-style])[data-variant='danger'] {
|
|
10039
|
-
border-color:transparent;background-image:none;--un-text-opacity:1;color:
|
|
10040
|
-
|
|
10079
|
+
border-color:transparent;background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
|
|
10080
|
+
background-color: var(--danger);
|
|
10081
|
+
}
|
|
10041
10082
|
|
|
10042
10083
|
/* =============================================================================
|
|
10043
10084
|
Outline Style
|
|
@@ -10111,12 +10152,12 @@ button[data-step-number] {
|
|
|
10111
10152
|
}
|
|
10112
10153
|
|
|
10113
10154
|
[data-style='minimal'] [data-button][data-style='gradient'][data-variant='accent'] {
|
|
10114
|
-
--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:
|
|
10115
|
-
}
|
|
10155
|
+
--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));
|
|
10156
|
+
}
|
|
10116
10157
|
|
|
10117
10158
|
[data-style='minimal'] [data-button][data-style='gradient'][data-variant='danger'] {
|
|
10118
|
-
--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:
|
|
10119
|
-
}
|
|
10159
|
+
--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));
|
|
10160
|
+
}
|
|
10120
10161
|
|
|
10121
10162
|
[data-style='minimal']
|
|
10122
10163
|
[data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
|
|
@@ -10299,7 +10340,7 @@ button[data-step-number] {
|
|
|
10299
10340
|
============================================================================= */
|
|
10300
10341
|
|
|
10301
10342
|
[data-style='minimal'] [data-tabs-trigger] {
|
|
10302
|
-
border-bottom-width:3px;border-bottom-color:transparent;background-color:transparent;color:var(--ink-
|
|
10343
|
+
border-bottom-width:3px;border-bottom-color:transparent;background-color:transparent;color:var(--ink-mute);
|
|
10303
10344
|
font-weight: 400;
|
|
10304
10345
|
transition:
|
|
10305
10346
|
color 150ms ease,
|
|
@@ -10402,7 +10443,7 @@ button[data-step-number] {
|
|
|
10402
10443
|
}
|
|
10403
10444
|
|
|
10404
10445
|
[data-style='minimal'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
|
|
10405
|
-
color:var(--ink-
|
|
10446
|
+
color:var(--ink-mute);
|
|
10406
10447
|
}
|
|
10407
10448
|
|
|
10408
10449
|
[data-style='minimal'] [data-tabs-trigger][data-selected] [data-tabs-icon] {
|
|
@@ -10436,7 +10477,7 @@ button[data-step-number] {
|
|
|
10436
10477
|
============================================================================= */
|
|
10437
10478
|
|
|
10438
10479
|
[data-style='minimal'] [data-toggle-option] {
|
|
10439
|
-
border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-
|
|
10480
|
+
border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-mute);
|
|
10440
10481
|
}
|
|
10441
10482
|
|
|
10442
10483
|
[data-style='minimal'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
|
|
@@ -10454,7 +10495,7 @@ button[data-step-number] {
|
|
|
10454
10495
|
============================================================================= */
|
|
10455
10496
|
|
|
10456
10497
|
[data-style='minimal'] [data-toggle-option] [data-toggle-icon] {
|
|
10457
|
-
color:var(--ink-
|
|
10498
|
+
color:var(--ink-mute);
|
|
10458
10499
|
}
|
|
10459
10500
|
|
|
10460
10501
|
[data-style='minimal'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
|
|
@@ -10474,7 +10515,7 @@ button[data-step-number] {
|
|
|
10474
10515
|
============================================================================= */
|
|
10475
10516
|
|
|
10476
10517
|
[data-style='minimal'] [data-toggle][data-toggle-variant='button'] {
|
|
10477
|
-
border-color:transparent;background-color:transparent;color:var(--ink-
|
|
10518
|
+
border-color:transparent;background-color:transparent;color:var(--ink-mute);
|
|
10478
10519
|
background-image: none;
|
|
10479
10520
|
}
|
|
10480
10521
|
|
|
@@ -10484,7 +10525,7 @@ button[data-step-number] {
|
|
|
10484
10525
|
}
|
|
10485
10526
|
|
|
10486
10527
|
[data-style='minimal'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
|
|
10487
|
-
color:var(--ink-
|
|
10528
|
+
color:var(--ink-mute);
|
|
10488
10529
|
}
|
|
10489
10530
|
|
|
10490
10531
|
[data-style='minimal'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
|
|
@@ -10570,7 +10611,7 @@ button[data-step-number] {
|
|
|
10570
10611
|
|
|
10571
10612
|
[data-style='minimal'] [data-list] a[data-list-item],
|
|
10572
10613
|
[data-style='minimal'] [data-list] button[data-list-item] {
|
|
10573
|
-
color:var(--ink-
|
|
10614
|
+
color:var(--ink-mute);
|
|
10574
10615
|
}
|
|
10575
10616
|
|
|
10576
10617
|
/* Hover and focus — text brightening only, no border */
|
|
@@ -10608,12 +10649,12 @@ button[data-step-number] {
|
|
|
10608
10649
|
============================================================================= */
|
|
10609
10650
|
|
|
10610
10651
|
[data-style='minimal'] [data-list] [data-list-item] [data-item-icon] {
|
|
10611
|
-
color:var(--ink-
|
|
10652
|
+
color:var(--ink-mute);
|
|
10612
10653
|
}
|
|
10613
10654
|
|
|
10614
10655
|
[data-style='minimal'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
|
|
10615
10656
|
[data-style='minimal'] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon] {
|
|
10616
|
-
color:var(--ink-
|
|
10657
|
+
color:var(--ink-mute);
|
|
10617
10658
|
}
|
|
10618
10659
|
|
|
10619
10660
|
[data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-icon] {
|
|
@@ -10622,12 +10663,12 @@ button[data-step-number] {
|
|
|
10622
10663
|
|
|
10623
10664
|
/* Literal / kanji icons */
|
|
10624
10665
|
[data-style='minimal'] [data-list] [data-list-item] [data-item-icon-literal] {
|
|
10625
|
-
color:var(--ink-
|
|
10666
|
+
color:var(--ink-mute);
|
|
10626
10667
|
}
|
|
10627
10668
|
|
|
10628
10669
|
[data-style='minimal'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon-literal],
|
|
10629
10670
|
[data-style='minimal'] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon-literal] {
|
|
10630
|
-
color:var(--ink-
|
|
10671
|
+
color:var(--ink-mute);
|
|
10631
10672
|
}
|
|
10632
10673
|
|
|
10633
10674
|
[data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-icon-literal] {
|
|
@@ -10635,7 +10676,7 @@ button[data-step-number] {
|
|
|
10635
10676
|
}
|
|
10636
10677
|
|
|
10637
10678
|
[data-style='minimal'] [data-list] [data-list-item] [data-item-description] {
|
|
10638
|
-
color:var(--ink-
|
|
10679
|
+
color:var(--ink-mute);
|
|
10639
10680
|
}
|
|
10640
10681
|
|
|
10641
10682
|
[data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
|
|
@@ -10643,7 +10684,7 @@ button[data-step-number] {
|
|
|
10643
10684
|
}
|
|
10644
10685
|
|
|
10645
10686
|
[data-style='minimal'] [data-list] [data-list-item] [data-item-badge] {
|
|
10646
|
-
border-width:1px;background-color:transparent;background-image:none;color:var(--ink-
|
|
10687
|
+
border-width:1px;background-color:transparent;background-image:none;color:var(--ink-mute);border-color:var(--paper-edge);
|
|
10647
10688
|
}
|
|
10648
10689
|
|
|
10649
10690
|
[data-style='minimal'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
|
|
@@ -10655,7 +10696,7 @@ button[data-step-number] {
|
|
|
10655
10696
|
============================================================================= */
|
|
10656
10697
|
|
|
10657
10698
|
[data-style='minimal'] [data-list] [data-list-group] {
|
|
10658
|
-
color:var(--ink-
|
|
10699
|
+
color:var(--ink-mute);
|
|
10659
10700
|
}
|
|
10660
10701
|
|
|
10661
10702
|
/* Group hover — text-only, no border */
|
|
@@ -10700,6 +10741,17 @@ button[data-step-number] {
|
|
|
10700
10741
|
* Clean, understated tree with subtle borders.
|
|
10701
10742
|
*/
|
|
10702
10743
|
|
|
10744
|
+
/* =============================================================================
|
|
10745
|
+
Connector Lines — hairline tone (mode-aware), not currentColor (which
|
|
10746
|
+
renders white in dark mode and greyish in light).
|
|
10747
|
+
============================================================================= */
|
|
10748
|
+
|
|
10749
|
+
[data-style='minimal'] [data-tree]:not([data-line-style='none']) [data-connector-v],
|
|
10750
|
+
[data-style='minimal'] [data-tree]:not([data-line-style='none']) [data-connector-h],
|
|
10751
|
+
[data-style='minimal'] [data-tree]:not([data-line-style='none']) [data-connector-corner] {
|
|
10752
|
+
border-color:var(--paper-edge);
|
|
10753
|
+
}
|
|
10754
|
+
|
|
10703
10755
|
/* =============================================================================
|
|
10704
10756
|
Tree Container
|
|
10705
10757
|
============================================================================= */
|
|
@@ -10713,11 +10765,11 @@ button[data-step-number] {
|
|
|
10713
10765
|
============================================================================= */
|
|
10714
10766
|
|
|
10715
10767
|
[data-style='minimal'] [data-tree-toggle-btn] {
|
|
10716
|
-
color:var(--
|
|
10768
|
+
color:var(--ink-mute);
|
|
10717
10769
|
}
|
|
10718
10770
|
|
|
10719
10771
|
[data-style='minimal'] [data-tree-toggle-btn]:hover {
|
|
10720
|
-
background-image:none;color:var(--ink-
|
|
10772
|
+
background-image:none;color:var(--ink-mute);
|
|
10721
10773
|
}
|
|
10722
10774
|
|
|
10723
10775
|
/* =============================================================================
|
|
@@ -10771,11 +10823,11 @@ button[data-step-number] {
|
|
|
10771
10823
|
============================================================================= */
|
|
10772
10824
|
|
|
10773
10825
|
[data-style='minimal'] [data-tree-item-content] [data-item-icon] {
|
|
10774
|
-
color:var(--ink-
|
|
10826
|
+
color:var(--ink-mute);
|
|
10775
10827
|
}
|
|
10776
10828
|
|
|
10777
10829
|
[data-style='minimal'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
|
|
10778
|
-
color:var(--ink-
|
|
10830
|
+
color:var(--ink-mute);
|
|
10779
10831
|
}
|
|
10780
10832
|
|
|
10781
10833
|
[data-style='minimal'] [data-tree-item-content][data-active='true'] [data-item-icon] {
|
|
@@ -10783,7 +10835,7 @@ button[data-step-number] {
|
|
|
10783
10835
|
}
|
|
10784
10836
|
|
|
10785
10837
|
[data-style='minimal'] [data-tree-item-content] [data-item-description] {
|
|
10786
|
-
color:var(--ink-
|
|
10838
|
+
color:var(--ink-mute);
|
|
10787
10839
|
}
|
|
10788
10840
|
|
|
10789
10841
|
[data-style='minimal'] [data-tree-item-content][data-active='true'] [data-item-description] {
|
|
@@ -10791,7 +10843,7 @@ button[data-step-number] {
|
|
|
10791
10843
|
}
|
|
10792
10844
|
|
|
10793
10845
|
[data-style='minimal'] [data-tree-item-content] [data-item-badge] {
|
|
10794
|
-
border-width:1px;background-color:transparent;background-image:none;color:var(--ink-
|
|
10846
|
+
border-width:1px;background-color:transparent;background-image:none;color:var(--ink-mute);border-color:var(--paper-edge);
|
|
10795
10847
|
}
|
|
10796
10848
|
|
|
10797
10849
|
[data-style='minimal'] [data-tree-item-content][data-active='true'] [data-item-badge] {
|
|
@@ -10867,7 +10919,7 @@ button[data-step-number] {
|
|
|
10867
10919
|
============================================================================= */
|
|
10868
10920
|
|
|
10869
10921
|
[data-style='minimal'] [data-select-placeholder] {
|
|
10870
|
-
color:var(--ink-
|
|
10922
|
+
color:var(--ink-mute);
|
|
10871
10923
|
}
|
|
10872
10924
|
|
|
10873
10925
|
/* =============================================================================
|
|
@@ -10875,11 +10927,11 @@ button[data-step-number] {
|
|
|
10875
10927
|
============================================================================= */
|
|
10876
10928
|
|
|
10877
10929
|
[data-style='minimal'] [data-select-arrow] {
|
|
10878
|
-
color:var(--ink-
|
|
10930
|
+
color:var(--ink-mute);
|
|
10879
10931
|
}
|
|
10880
10932
|
|
|
10881
10933
|
[data-style='minimal'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
|
|
10882
|
-
color:var(--ink-
|
|
10934
|
+
color:var(--ink-mute);
|
|
10883
10935
|
}
|
|
10884
10936
|
|
|
10885
10937
|
/* =============================================================================
|
|
@@ -10891,7 +10943,7 @@ button[data-step-number] {
|
|
|
10891
10943
|
}
|
|
10892
10944
|
|
|
10893
10945
|
[data-style='minimal'] [data-select-tag-remove] {
|
|
10894
|
-
color:var(--ink-
|
|
10946
|
+
color:var(--ink-mute);
|
|
10895
10947
|
}
|
|
10896
10948
|
|
|
10897
10949
|
[data-style='minimal'] [data-select-tag-remove]:hover {
|
|
@@ -10948,7 +11000,7 @@ button[data-step-number] {
|
|
|
10948
11000
|
|
|
10949
11001
|
/* Item elements */
|
|
10950
11002
|
[data-style='minimal'] [data-select-option] [data-item-description] {
|
|
10951
|
-
color:var(--ink-
|
|
11003
|
+
color:var(--ink-mute);
|
|
10952
11004
|
}
|
|
10953
11005
|
|
|
10954
11006
|
[data-style='minimal'] [data-select-option][data-selected='true'] [data-item-description] {
|
|
@@ -10960,7 +11012,7 @@ button[data-step-number] {
|
|
|
10960
11012
|
============================================================================= */
|
|
10961
11013
|
|
|
10962
11014
|
[data-style='minimal'] [data-select-group-label] {
|
|
10963
|
-
color:var(--ink-
|
|
11015
|
+
color:var(--ink-mute);
|
|
10964
11016
|
}
|
|
10965
11017
|
|
|
10966
11018
|
/* =============================================================================
|
|
@@ -10988,11 +11040,11 @@ button[data-step-number] {
|
|
|
10988
11040
|
}
|
|
10989
11041
|
|
|
10990
11042
|
[data-style='minimal'] [data-select-filter-input]::placeholder {
|
|
10991
|
-
color:var(--ink-
|
|
11043
|
+
color:var(--ink-mute);
|
|
10992
11044
|
}
|
|
10993
11045
|
|
|
10994
11046
|
[data-style='minimal'] [data-select-empty] {
|
|
10995
|
-
color:var(--ink-
|
|
11047
|
+
color:var(--ink-mute);
|
|
10996
11048
|
}
|
|
10997
11049
|
|
|
10998
11050
|
/**
|
|
@@ -11023,7 +11075,7 @@ button[data-step-number] {
|
|
|
11023
11075
|
|
|
11024
11076
|
/* Trigger elements */
|
|
11025
11077
|
[data-style='minimal'] [data-menu-trigger] [data-menu-icon] {
|
|
11026
|
-
color:var(--ink-
|
|
11078
|
+
color:var(--ink-mute);
|
|
11027
11079
|
}
|
|
11028
11080
|
|
|
11029
11081
|
[data-style='minimal'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
|
|
@@ -11031,7 +11083,7 @@ button[data-step-number] {
|
|
|
11031
11083
|
}
|
|
11032
11084
|
|
|
11033
11085
|
[data-style='minimal'] [data-menu-trigger] [data-menu-arrow] {
|
|
11034
|
-
color:var(--
|
|
11086
|
+
color:var(--ink-mute);
|
|
11035
11087
|
}
|
|
11036
11088
|
|
|
11037
11089
|
/* =============================================================================
|
|
@@ -11057,15 +11109,15 @@ button[data-step-number] {
|
|
|
11057
11109
|
|
|
11058
11110
|
/* Item elements */
|
|
11059
11111
|
[data-style='minimal'] [data-menu-item] [data-item-icon] {
|
|
11060
|
-
color:var(--ink-
|
|
11112
|
+
color:var(--ink-mute);
|
|
11061
11113
|
}
|
|
11062
11114
|
|
|
11063
11115
|
[data-style='minimal'] [data-menu-item]:hover:not(:disabled) [data-item-icon] {
|
|
11064
|
-
color:var(--ink-
|
|
11116
|
+
color:var(--ink-mute);
|
|
11065
11117
|
}
|
|
11066
11118
|
|
|
11067
11119
|
[data-style='minimal'] [data-menu-item] [data-item-description] {
|
|
11068
|
-
color:var(--ink-
|
|
11120
|
+
color:var(--ink-mute);
|
|
11069
11121
|
}
|
|
11070
11122
|
|
|
11071
11123
|
/* =============================================================================
|
|
@@ -11073,7 +11125,7 @@ button[data-step-number] {
|
|
|
11073
11125
|
============================================================================= */
|
|
11074
11126
|
|
|
11075
11127
|
[data-style='minimal'] [data-menu-group] {
|
|
11076
|
-
color:var(--ink-
|
|
11128
|
+
color:var(--ink-mute);
|
|
11077
11129
|
}
|
|
11078
11130
|
|
|
11079
11131
|
/* =============================================================================
|
|
@@ -11107,11 +11159,11 @@ button[data-step-number] {
|
|
|
11107
11159
|
}
|
|
11108
11160
|
|
|
11109
11161
|
[data-style='minimal'] [data-dropdown-trigger] [data-dropdown-icon] {
|
|
11110
|
-
color:var(--ink-
|
|
11162
|
+
color:var(--ink-mute);
|
|
11111
11163
|
}
|
|
11112
11164
|
|
|
11113
11165
|
[data-style='minimal'] [data-dropdown-trigger] [data-dropdown-arrow] {
|
|
11114
|
-
color:var(--
|
|
11166
|
+
color:var(--ink-mute);
|
|
11115
11167
|
}
|
|
11116
11168
|
|
|
11117
11169
|
[data-style='minimal'] [data-dropdown-panel] {
|
|
@@ -11382,7 +11434,7 @@ button[data-step-number] {
|
|
|
11382
11434
|
============================================================================= */
|
|
11383
11435
|
|
|
11384
11436
|
[data-style='minimal'] [data-table-header] th {
|
|
11385
|
-
border-bottom-width:1px;color:var(--ink-
|
|
11437
|
+
border-bottom-width:1px;color:var(--ink-mute);border-color:var(--paper-edge);background-color:var(--paper-mute);
|
|
11386
11438
|
}
|
|
11387
11439
|
|
|
11388
11440
|
[data-style='minimal'] [data-table-header-cell][data-sortable='true']:hover {
|
|
@@ -11395,7 +11447,7 @@ button[data-step-number] {
|
|
|
11395
11447
|
}
|
|
11396
11448
|
|
|
11397
11449
|
[data-style='minimal'] [data-table-sort-icon] {
|
|
11398
|
-
color:var(--ink-
|
|
11450
|
+
color:var(--ink-mute);
|
|
11399
11451
|
}
|
|
11400
11452
|
|
|
11401
11453
|
[data-style='minimal'] [data-table-header-cell][data-sort-order='ascending'] [data-table-sort-icon],
|
|
@@ -11456,7 +11508,7 @@ button[data-step-number] {
|
|
|
11456
11508
|
============================================================================= */
|
|
11457
11509
|
|
|
11458
11510
|
[data-style='minimal'] [data-table-empty] {
|
|
11459
|
-
color:var(--ink-
|
|
11511
|
+
color:var(--ink-mute);
|
|
11460
11512
|
}
|
|
11461
11513
|
|
|
11462
11514
|
/* =============================================================================
|
|
@@ -11464,7 +11516,7 @@ button[data-step-number] {
|
|
|
11464
11516
|
============================================================================= */
|
|
11465
11517
|
|
|
11466
11518
|
[data-style='minimal'] [data-table-cell] [data-cell-icon] {
|
|
11467
|
-
color:var(--ink-
|
|
11519
|
+
color:var(--ink-mute);
|
|
11468
11520
|
}
|
|
11469
11521
|
|
|
11470
11522
|
[data-style='minimal'] [data-table-row][data-selected='true'] [data-cell-icon] {
|
|
@@ -11481,7 +11533,7 @@ button[data-step-number] {
|
|
|
11481
11533
|
}
|
|
11482
11534
|
|
|
11483
11535
|
[data-style='minimal'] [data-table-responsive] [data-table-cell]::before {
|
|
11484
|
-
color:var(--ink-
|
|
11536
|
+
color:var(--ink-mute);
|
|
11485
11537
|
}
|
|
11486
11538
|
|
|
11487
11539
|
/* Disable striped alternating bg in card layout */
|
|
@@ -11652,11 +11704,11 @@ button[data-step-number] {
|
|
|
11652
11704
|
}
|
|
11653
11705
|
|
|
11654
11706
|
[data-style='minimal'] [data-timeline-item][data-completed] [data-timeline-circle] {
|
|
11655
|
-
border-color:var(--primary);color:var(--
|
|
11707
|
+
border-color:var(--primary);color:var(--ink);
|
|
11656
11708
|
}
|
|
11657
11709
|
|
|
11658
11710
|
[data-style='minimal'] [data-timeline-item][data-active] [data-timeline-circle] {
|
|
11659
|
-
border-bottom-width:2px;border-color:var(--primary);color:var(--
|
|
11711
|
+
border-bottom-width:2px;border-color:var(--primary);color:var(--ink);
|
|
11660
11712
|
}
|
|
11661
11713
|
|
|
11662
11714
|
/* =============================================================================
|
|
@@ -11668,7 +11720,7 @@ button[data-step-number] {
|
|
|
11668
11720
|
}
|
|
11669
11721
|
|
|
11670
11722
|
[data-style='minimal'] [data-timeline-item][data-completed] [data-timeline-connector] {
|
|
11671
|
-
background-color:var(--primary);
|
|
11723
|
+
background-color: var(--primary);
|
|
11672
11724
|
}
|
|
11673
11725
|
|
|
11674
11726
|
/* =============================================================================
|
|
@@ -11851,8 +11903,8 @@ button[data-step-number] {
|
|
|
11851
11903
|
}
|
|
11852
11904
|
|
|
11853
11905
|
[data-style='minimal'] [data-card][data-variant='primary'] [data-card-body] {
|
|
11854
|
-
color:
|
|
11855
|
-
}
|
|
11906
|
+
color:rgb(22 22 22 / 0.8);
|
|
11907
|
+
}
|
|
11856
11908
|
|
|
11857
11909
|
/* Secondary — solid secondary fill */
|
|
11858
11910
|
[data-style='minimal'] [data-card][data-variant='secondary'] {
|
|
@@ -11865,8 +11917,8 @@ button[data-step-number] {
|
|
|
11865
11917
|
}
|
|
11866
11918
|
|
|
11867
11919
|
[data-style='minimal'] [data-card][data-variant='secondary'] [data-card-body] {
|
|
11868
|
-
color:
|
|
11869
|
-
}
|
|
11920
|
+
color:rgb(22 22 22 / 0.8);
|
|
11921
|
+
}
|
|
11870
11922
|
|
|
11871
11923
|
/* Tertiary — recessed surface, lighter border */
|
|
11872
11924
|
[data-style='minimal'] [data-card][data-variant='tertiary'] {
|
|
@@ -12339,23 +12391,27 @@ button[data-step-number] {
|
|
|
12339
12391
|
|
|
12340
12392
|
[data-style='material'] [data-button][data-style='default'][data-variant='primary'],
|
|
12341
12393
|
[data-style='material'] [data-button]:not([data-style])[data-variant='primary'] {
|
|
12342
|
-
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);
|
|
12394
|
+
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);
|
|
12395
|
+
background-color: var(--primary);
|
|
12343
12396
|
}
|
|
12344
12397
|
|
|
12345
12398
|
[data-style='material'] [data-button][data-style='default'][data-variant='secondary'],
|
|
12346
12399
|
[data-style='material'] [data-button]:not([data-style])[data-variant='secondary'] {
|
|
12347
|
-
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);
|
|
12400
|
+
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);
|
|
12401
|
+
background-color: var(--accent);
|
|
12348
12402
|
}
|
|
12349
12403
|
|
|
12350
12404
|
[data-style='material'] [data-button][data-style='default'][data-variant='accent'],
|
|
12351
12405
|
[data-style='material'] [data-button]:not([data-style])[data-variant='accent'] {
|
|
12352
|
-
background-image:none;--un-text-opacity:1;color:
|
|
12353
|
-
|
|
12406
|
+
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);
|
|
12407
|
+
background-color: var(--accent);
|
|
12408
|
+
}
|
|
12354
12409
|
|
|
12355
12410
|
[data-style='material'] [data-button][data-style='default'][data-variant='danger'],
|
|
12356
12411
|
[data-style='material'] [data-button]:not([data-style])[data-variant='danger'] {
|
|
12357
|
-
background-image:none;--un-text-opacity:1;color:
|
|
12358
|
-
|
|
12412
|
+
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);
|
|
12413
|
+
background-color: var(--danger);
|
|
12414
|
+
}
|
|
12359
12415
|
|
|
12360
12416
|
/* =============================================================================
|
|
12361
12417
|
Outline Style
|
|
@@ -12429,12 +12485,12 @@ button[data-step-number] {
|
|
|
12429
12485
|
}
|
|
12430
12486
|
|
|
12431
12487
|
[data-style='material'] [data-button][data-style='gradient'][data-variant='accent'] {
|
|
12432
|
-
--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:
|
|
12433
|
-
}
|
|
12488
|
+
--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);
|
|
12489
|
+
}
|
|
12434
12490
|
|
|
12435
12491
|
[data-style='material'] [data-button][data-style='gradient'][data-variant='danger'] {
|
|
12436
|
-
--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:
|
|
12437
|
-
}
|
|
12492
|
+
--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);
|
|
12493
|
+
}
|
|
12438
12494
|
|
|
12439
12495
|
[data-style='material']
|
|
12440
12496
|
[data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
|
|
@@ -12773,7 +12829,7 @@ button[data-step-number] {
|
|
|
12773
12829
|
============================================================================= */
|
|
12774
12830
|
|
|
12775
12831
|
[data-style='material'] [data-tabs-trigger] {
|
|
12776
|
-
border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;background-color:transparent;color:var(--ink-
|
|
12832
|
+
border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;background-color:transparent;color:var(--ink-mute);
|
|
12777
12833
|
}
|
|
12778
12834
|
|
|
12779
12835
|
[data-style='material'] [data-tabs][data-position='after'] [data-tabs-trigger] {
|
|
@@ -12786,7 +12842,8 @@ button[data-step-number] {
|
|
|
12786
12842
|
|
|
12787
12843
|
/* Selected state */
|
|
12788
12844
|
[data-style='material'] [data-tabs-trigger][data-selected] {
|
|
12789
|
-
--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);
|
|
12845
|
+
--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);
|
|
12846
|
+
background-color: var(--primary);
|
|
12790
12847
|
}
|
|
12791
12848
|
|
|
12792
12849
|
/* Reset rokkit gradients bleeding in from body[data-style='rokkit'] ancestor */
|
|
@@ -12820,7 +12877,7 @@ button[data-step-number] {
|
|
|
12820
12877
|
============================================================================= */
|
|
12821
12878
|
|
|
12822
12879
|
[data-style='material'] [data-tabs-trigger] [data-tabs-icon] {
|
|
12823
|
-
color:var(--ink-
|
|
12880
|
+
color:var(--ink-mute);
|
|
12824
12881
|
}
|
|
12825
12882
|
|
|
12826
12883
|
[data-style='material'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
|
|
@@ -12858,7 +12915,7 @@ button[data-step-number] {
|
|
|
12858
12915
|
============================================================================= */
|
|
12859
12916
|
|
|
12860
12917
|
[data-style='material'] [data-toggle-option] {
|
|
12861
|
-
border-radius:9999px;color:var(--ink-
|
|
12918
|
+
border-radius:9999px;color:var(--ink-mute);
|
|
12862
12919
|
}
|
|
12863
12920
|
|
|
12864
12921
|
[data-style='material'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
|
|
@@ -12868,7 +12925,8 @@ button[data-step-number] {
|
|
|
12868
12925
|
|
|
12869
12926
|
/* Selected state */
|
|
12870
12927
|
[data-style='material'] [data-toggle-option][data-selected='true'] {
|
|
12871
|
-
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);
|
|
12928
|
+
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);
|
|
12929
|
+
background-color: var(--primary);
|
|
12872
12930
|
}
|
|
12873
12931
|
|
|
12874
12932
|
/* =============================================================================
|
|
@@ -12876,7 +12934,7 @@ button[data-step-number] {
|
|
|
12876
12934
|
============================================================================= */
|
|
12877
12935
|
|
|
12878
12936
|
[data-style='material'] [data-toggle-option] [data-toggle-icon] {
|
|
12879
|
-
color:var(--ink-
|
|
12937
|
+
color:var(--ink-mute);
|
|
12880
12938
|
}
|
|
12881
12939
|
|
|
12882
12940
|
[data-style='material'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
|
|
@@ -12896,7 +12954,7 @@ button[data-step-number] {
|
|
|
12896
12954
|
============================================================================= */
|
|
12897
12955
|
|
|
12898
12956
|
[data-style='material'] [data-toggle][data-toggle-variant='button'] {
|
|
12899
|
-
border-color:transparent;background-color:transparent;color:var(--ink-
|
|
12957
|
+
border-color:transparent;background-color:transparent;color:var(--ink-mute);
|
|
12900
12958
|
background-image: none;
|
|
12901
12959
|
}
|
|
12902
12960
|
|
|
@@ -12906,7 +12964,7 @@ button[data-step-number] {
|
|
|
12906
12964
|
}
|
|
12907
12965
|
|
|
12908
12966
|
[data-style='material'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
|
|
12909
|
-
color:var(--ink-
|
|
12967
|
+
color:var(--ink-mute);
|
|
12910
12968
|
}
|
|
12911
12969
|
|
|
12912
12970
|
[data-style='material'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
|
|
@@ -13001,7 +13059,7 @@ button[data-step-number] {
|
|
|
13001
13059
|
============================================================================= */
|
|
13002
13060
|
|
|
13003
13061
|
[data-style='material'] [data-list] [data-list-item] [data-item-icon] {
|
|
13004
|
-
color:var(--ink-
|
|
13062
|
+
color:var(--ink-mute);
|
|
13005
13063
|
}
|
|
13006
13064
|
|
|
13007
13065
|
[data-style='material'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
|
|
@@ -13015,7 +13073,7 @@ button[data-step-number] {
|
|
|
13015
13073
|
|
|
13016
13074
|
/* Literal / kanji icons */
|
|
13017
13075
|
[data-style='material'] [data-list] [data-list-item] [data-item-icon-literal] {
|
|
13018
|
-
color:var(--ink-
|
|
13076
|
+
color:var(--ink-mute);
|
|
13019
13077
|
}
|
|
13020
13078
|
|
|
13021
13079
|
[data-style='material'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon-literal],
|
|
@@ -13028,7 +13086,7 @@ button[data-step-number] {
|
|
|
13028
13086
|
}
|
|
13029
13087
|
|
|
13030
13088
|
[data-style='material'] [data-list] [data-list-item] [data-item-description] {
|
|
13031
|
-
color:var(--ink-
|
|
13089
|
+
color:var(--ink-mute);
|
|
13032
13090
|
}
|
|
13033
13091
|
|
|
13034
13092
|
[data-style='material'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
|
|
@@ -13036,7 +13094,7 @@ button[data-step-number] {
|
|
|
13036
13094
|
}
|
|
13037
13095
|
|
|
13038
13096
|
[data-style='material'] [data-list] [data-list-item] [data-item-badge] {
|
|
13039
|
-
border-radius:9999px;background-image:none;background-color:var(--paper-mute);color:var(--ink-
|
|
13097
|
+
border-radius:9999px;background-image:none;background-color:var(--paper-mute);color:var(--ink-mute);
|
|
13040
13098
|
}
|
|
13041
13099
|
|
|
13042
13100
|
[data-style='material'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
|
|
@@ -13048,7 +13106,7 @@ button[data-step-number] {
|
|
|
13048
13106
|
============================================================================= */
|
|
13049
13107
|
|
|
13050
13108
|
[data-style='material'] [data-list] [data-list-group] {
|
|
13051
|
-
font-weight:500;color:var(--ink-
|
|
13109
|
+
font-weight:500;color:var(--ink-mute);
|
|
13052
13110
|
}
|
|
13053
13111
|
|
|
13054
13112
|
[data-style='material'] [data-list] [data-list-group]:hover:not(:disabled),
|
|
@@ -13090,6 +13148,17 @@ button[data-step-number] {
|
|
|
13090
13148
|
* Material Design inspired with subtle elevation.
|
|
13091
13149
|
*/
|
|
13092
13150
|
|
|
13151
|
+
/* =============================================================================
|
|
13152
|
+
Connector Lines — hairline tone (mode-aware), not currentColor (which
|
|
13153
|
+
renders white in dark mode and greyish in light).
|
|
13154
|
+
============================================================================= */
|
|
13155
|
+
|
|
13156
|
+
[data-style='material'] [data-tree]:not([data-line-style='none']) [data-connector-v],
|
|
13157
|
+
[data-style='material'] [data-tree]:not([data-line-style='none']) [data-connector-h],
|
|
13158
|
+
[data-style='material'] [data-tree]:not([data-line-style='none']) [data-connector-corner] {
|
|
13159
|
+
border-color:var(--paper-edge);
|
|
13160
|
+
}
|
|
13161
|
+
|
|
13093
13162
|
/* =============================================================================
|
|
13094
13163
|
Tree Container
|
|
13095
13164
|
============================================================================= */
|
|
@@ -13103,7 +13172,7 @@ button[data-step-number] {
|
|
|
13103
13172
|
============================================================================= */
|
|
13104
13173
|
|
|
13105
13174
|
[data-style='material'] [data-tree-toggle-btn] {
|
|
13106
|
-
border-radius:9999px;color:var(--ink-
|
|
13175
|
+
border-radius:9999px;color:var(--ink-mute);
|
|
13107
13176
|
}
|
|
13108
13177
|
|
|
13109
13178
|
[data-style='material'] [data-tree-toggle-btn]:hover {
|
|
@@ -13159,7 +13228,7 @@ button[data-step-number] {
|
|
|
13159
13228
|
============================================================================= */
|
|
13160
13229
|
|
|
13161
13230
|
[data-style='material'] [data-tree-item-content] [data-item-icon] {
|
|
13162
|
-
color:var(--ink-
|
|
13231
|
+
color:var(--ink-mute);
|
|
13163
13232
|
}
|
|
13164
13233
|
|
|
13165
13234
|
[data-style='material'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
|
|
@@ -13171,7 +13240,7 @@ button[data-step-number] {
|
|
|
13171
13240
|
}
|
|
13172
13241
|
|
|
13173
13242
|
[data-style='material'] [data-tree-item-content] [data-item-description] {
|
|
13174
|
-
color:var(--ink-
|
|
13243
|
+
color:var(--ink-mute);
|
|
13175
13244
|
}
|
|
13176
13245
|
|
|
13177
13246
|
[data-style='material'] [data-tree-item-content][data-active='true'] [data-item-description] {
|
|
@@ -13179,7 +13248,7 @@ button[data-step-number] {
|
|
|
13179
13248
|
}
|
|
13180
13249
|
|
|
13181
13250
|
[data-style='material'] [data-tree-item-content] [data-item-badge] {
|
|
13182
|
-
border-radius:9999px;background-image:none;color:var(--ink-
|
|
13251
|
+
border-radius:9999px;background-image:none;color:var(--ink-mute);background-color:var(--paper-mute);
|
|
13183
13252
|
}
|
|
13184
13253
|
|
|
13185
13254
|
[data-style='material'] [data-tree-item-content][data-active='true'] [data-item-badge] {
|
|
@@ -13250,7 +13319,7 @@ button[data-step-number] {
|
|
|
13250
13319
|
============================================================================= */
|
|
13251
13320
|
|
|
13252
13321
|
[data-style='material'] [data-select-placeholder] {
|
|
13253
|
-
color:var(--ink-
|
|
13322
|
+
color:var(--ink-mute);
|
|
13254
13323
|
}
|
|
13255
13324
|
|
|
13256
13325
|
/* =============================================================================
|
|
@@ -13258,7 +13327,7 @@ button[data-step-number] {
|
|
|
13258
13327
|
============================================================================= */
|
|
13259
13328
|
|
|
13260
13329
|
[data-style='material'] [data-select-arrow] {
|
|
13261
|
-
color:var(--ink-
|
|
13330
|
+
color:var(--ink-mute);
|
|
13262
13331
|
}
|
|
13263
13332
|
|
|
13264
13333
|
[data-style='material'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
|
|
@@ -13274,7 +13343,7 @@ button[data-step-number] {
|
|
|
13274
13343
|
}
|
|
13275
13344
|
|
|
13276
13345
|
[data-style='material'] [data-select-tag-remove] {
|
|
13277
|
-
border-radius:9999px;color:var(--ink-
|
|
13346
|
+
border-radius:9999px;color:var(--ink-mute);
|
|
13278
13347
|
}
|
|
13279
13348
|
|
|
13280
13349
|
[data-style='material'] [data-select-tag-remove]:hover {
|
|
@@ -13338,7 +13407,7 @@ button[data-step-number] {
|
|
|
13338
13407
|
|
|
13339
13408
|
/* Item elements */
|
|
13340
13409
|
[data-style='material'] [data-select-option] [data-item-icon] {
|
|
13341
|
-
color:var(--ink-
|
|
13410
|
+
color:var(--ink-mute);
|
|
13342
13411
|
}
|
|
13343
13412
|
|
|
13344
13413
|
[data-style='material'] [data-select-option]:hover:not(:disabled) [data-item-icon] {
|
|
@@ -13350,7 +13419,7 @@ button[data-step-number] {
|
|
|
13350
13419
|
}
|
|
13351
13420
|
|
|
13352
13421
|
[data-style='material'] [data-select-option] [data-item-description] {
|
|
13353
|
-
color:var(--ink-
|
|
13422
|
+
color:var(--ink-mute);
|
|
13354
13423
|
}
|
|
13355
13424
|
|
|
13356
13425
|
[data-style='material'] [data-select-option][data-selected='true'] [data-item-description] {
|
|
@@ -13362,7 +13431,7 @@ button[data-step-number] {
|
|
|
13362
13431
|
============================================================================= */
|
|
13363
13432
|
|
|
13364
13433
|
[data-style='material'] [data-select-group-label] {
|
|
13365
|
-
font-weight:500;color:var(--ink-
|
|
13434
|
+
font-weight:500;color:var(--ink-mute);
|
|
13366
13435
|
}
|
|
13367
13436
|
|
|
13368
13437
|
/* =============================================================================
|
|
@@ -13390,11 +13459,11 @@ button[data-step-number] {
|
|
|
13390
13459
|
}
|
|
13391
13460
|
|
|
13392
13461
|
[data-style='material'] [data-select-filter-input]::placeholder {
|
|
13393
|
-
color:var(--ink-
|
|
13462
|
+
color:var(--ink-mute);
|
|
13394
13463
|
}
|
|
13395
13464
|
|
|
13396
13465
|
[data-style='material'] [data-select-empty] {
|
|
13397
|
-
color:var(--ink-
|
|
13466
|
+
color:var(--ink-mute);
|
|
13398
13467
|
}
|
|
13399
13468
|
|
|
13400
13469
|
/**
|
|
@@ -13425,7 +13494,7 @@ button[data-step-number] {
|
|
|
13425
13494
|
|
|
13426
13495
|
/* Trigger elements */
|
|
13427
13496
|
[data-style='material'] [data-menu-trigger] [data-menu-icon] {
|
|
13428
|
-
color:var(--ink-
|
|
13497
|
+
color:var(--ink-mute);
|
|
13429
13498
|
}
|
|
13430
13499
|
|
|
13431
13500
|
[data-style='material'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
|
|
@@ -13433,7 +13502,7 @@ button[data-step-number] {
|
|
|
13433
13502
|
}
|
|
13434
13503
|
|
|
13435
13504
|
[data-style='material'] [data-menu-trigger] [data-menu-arrow] {
|
|
13436
|
-
color:var(--ink-
|
|
13505
|
+
color:var(--ink-mute);
|
|
13437
13506
|
}
|
|
13438
13507
|
|
|
13439
13508
|
/* =============================================================================
|
|
@@ -13463,7 +13532,7 @@ button[data-step-number] {
|
|
|
13463
13532
|
|
|
13464
13533
|
/* Item elements */
|
|
13465
13534
|
[data-style='material'] [data-menu-item] [data-item-icon] {
|
|
13466
|
-
color:var(--ink-
|
|
13535
|
+
color:var(--ink-mute);
|
|
13467
13536
|
}
|
|
13468
13537
|
|
|
13469
13538
|
[data-style='material'] [data-menu-item]:hover:not(:disabled) [data-item-icon] {
|
|
@@ -13471,7 +13540,7 @@ button[data-step-number] {
|
|
|
13471
13540
|
}
|
|
13472
13541
|
|
|
13473
13542
|
[data-style='material'] [data-menu-item] [data-item-description] {
|
|
13474
|
-
color:var(--ink-
|
|
13543
|
+
color:var(--ink-mute);
|
|
13475
13544
|
}
|
|
13476
13545
|
|
|
13477
13546
|
/* =============================================================================
|
|
@@ -13479,7 +13548,7 @@ button[data-step-number] {
|
|
|
13479
13548
|
============================================================================= */
|
|
13480
13549
|
|
|
13481
13550
|
[data-style='material'] [data-menu-group] {
|
|
13482
|
-
font-weight:500;color:var(--ink-
|
|
13551
|
+
font-weight:500;color:var(--ink-mute);
|
|
13483
13552
|
}
|
|
13484
13553
|
|
|
13485
13554
|
/* =============================================================================
|
|
@@ -13513,11 +13582,11 @@ button[data-step-number] {
|
|
|
13513
13582
|
}
|
|
13514
13583
|
|
|
13515
13584
|
[data-style='material'] [data-dropdown-trigger] [data-dropdown-icon] {
|
|
13516
|
-
color:var(--ink-
|
|
13585
|
+
color:var(--ink-mute);
|
|
13517
13586
|
}
|
|
13518
13587
|
|
|
13519
13588
|
[data-style='material'] [data-dropdown-trigger] [data-dropdown-arrow] {
|
|
13520
|
-
color:var(--ink-
|
|
13589
|
+
color:var(--ink-mute);
|
|
13521
13590
|
}
|
|
13522
13591
|
|
|
13523
13592
|
[data-style='material'] [data-dropdown-panel] {
|
|
@@ -13617,7 +13686,7 @@ button[data-step-number] {
|
|
|
13617
13686
|
============================================================================= */
|
|
13618
13687
|
|
|
13619
13688
|
[data-style='material'] [data-table-header] th {
|
|
13620
|
-
border-bottom-width:1px;font-weight:500;color:var(--ink-
|
|
13689
|
+
border-bottom-width:1px;font-weight:500;color:var(--ink-mute);background-color:var(--paper-mute);border-color:var(--paper-edge);
|
|
13621
13690
|
}
|
|
13622
13691
|
|
|
13623
13692
|
[data-style='material'] [data-table-header-cell][data-sortable='true']:hover {
|
|
@@ -13630,7 +13699,7 @@ button[data-step-number] {
|
|
|
13630
13699
|
}
|
|
13631
13700
|
|
|
13632
13701
|
[data-style='material'] [data-table-sort-icon] {
|
|
13633
|
-
color:var(--ink-
|
|
13702
|
+
color:var(--ink-mute);
|
|
13634
13703
|
}
|
|
13635
13704
|
|
|
13636
13705
|
[data-style='material']
|
|
@@ -13693,7 +13762,7 @@ button[data-step-number] {
|
|
|
13693
13762
|
============================================================================= */
|
|
13694
13763
|
|
|
13695
13764
|
[data-style='material'] [data-table-empty] {
|
|
13696
|
-
color:var(--ink-
|
|
13765
|
+
color:var(--ink-mute);
|
|
13697
13766
|
}
|
|
13698
13767
|
|
|
13699
13768
|
/* =============================================================================
|
|
@@ -13701,7 +13770,7 @@ button[data-step-number] {
|
|
|
13701
13770
|
============================================================================= */
|
|
13702
13771
|
|
|
13703
13772
|
[data-style='material'] [data-table-cell] [data-cell-icon] {
|
|
13704
|
-
color:var(--ink-
|
|
13773
|
+
color:var(--ink-mute);
|
|
13705
13774
|
}
|
|
13706
13775
|
|
|
13707
13776
|
[data-style='material'] [data-table-row][data-selected='true'] [data-cell-icon] {
|
|
@@ -13718,7 +13787,7 @@ button[data-step-number] {
|
|
|
13718
13787
|
}
|
|
13719
13788
|
|
|
13720
13789
|
[data-style='material'] [data-table-responsive] [data-table-cell]::before {
|
|
13721
|
-
color:var(--ink-
|
|
13790
|
+
color:var(--ink-mute);
|
|
13722
13791
|
}
|
|
13723
13792
|
|
|
13724
13793
|
/* Disable striped alternating bg in card layout */
|
|
@@ -13890,11 +13959,12 @@ button[data-step-number] {
|
|
|
13890
13959
|
}
|
|
13891
13960
|
|
|
13892
13961
|
[data-style='material'] [data-timeline-item][data-completed] [data-timeline-circle] {
|
|
13893
|
-
--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);
|
|
13962
|
+
--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);
|
|
13963
|
+
background-color: var(--primary);
|
|
13894
13964
|
}
|
|
13895
13965
|
|
|
13896
13966
|
[data-style='material'] [data-timeline-item][data-active] [data-timeline-circle] {
|
|
13897
|
-
--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(--
|
|
13967
|
+
--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);
|
|
13898
13968
|
}
|
|
13899
13969
|
|
|
13900
13970
|
/* =============================================================================
|
|
@@ -13906,7 +13976,7 @@ button[data-step-number] {
|
|
|
13906
13976
|
}
|
|
13907
13977
|
|
|
13908
13978
|
[data-style='material'] [data-timeline-item][data-completed] [data-timeline-connector] {
|
|
13909
|
-
background-color:var(--primary);
|
|
13979
|
+
background-color: var(--primary);
|
|
13910
13980
|
}
|
|
13911
13981
|
|
|
13912
13982
|
/* =============================================================================
|
|
@@ -14605,21 +14675,21 @@ button[data-step-number] {
|
|
|
14605
14675
|
|
|
14606
14676
|
[data-style='frosted'] [data-button][data-style='default'][data-variant='accent'],
|
|
14607
14677
|
[data-style='frosted'] [data-button]:not([data-style])[data-variant='accent'] {
|
|
14608
|
-
border-width:1px;background-color:color-mix(in srgb, var(--color-accent) calc(0.6 * 100%), transparent);--un-text-opacity:1;color:
|
|
14678
|
+
border-width:1px;background-color:color-mix(in srgb, var(--color-accent) calc(0.6 * 100%), transparent);--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
|
|
14609
14679
|
border-color: rgba(255, 255, 255, 0.25);
|
|
14610
14680
|
box-shadow:
|
|
14611
14681
|
inset 0 1px 0 rgba(255, 255, 255, 0.25),
|
|
14612
14682
|
0 2px 8px rgba(0, 0, 0, 0.12);
|
|
14613
|
-
}
|
|
14683
|
+
}
|
|
14614
14684
|
|
|
14615
14685
|
[data-style='frosted'] [data-button][data-style='default'][data-variant='danger'],
|
|
14616
14686
|
[data-style='frosted'] [data-button]:not([data-style])[data-variant='danger'] {
|
|
14617
|
-
border-width:1px;background-color:color-mix(in srgb, var(--color-danger) calc(0.6 * 100%), transparent);--un-text-opacity:1;color:
|
|
14687
|
+
border-width:1px;background-color:color-mix(in srgb, var(--color-danger) calc(0.6 * 100%), transparent);--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
|
|
14618
14688
|
border-color: rgba(255, 255, 255, 0.25);
|
|
14619
14689
|
box-shadow:
|
|
14620
14690
|
inset 0 1px 0 rgba(255, 255, 255, 0.25),
|
|
14621
14691
|
0 2px 8px rgba(0, 0, 0, 0.12);
|
|
14622
|
-
}
|
|
14692
|
+
}
|
|
14623
14693
|
|
|
14624
14694
|
/* =============================================================================
|
|
14625
14695
|
Outline Style
|
|
@@ -14687,7 +14757,15 @@ button[data-step-number] {
|
|
|
14687
14757
|
|
|
14688
14758
|
[data-style='frosted'] [data-button][data-style='gradient'][data-variant='default'],
|
|
14689
14759
|
[data-style='frosted'] [data-button][data-style='gradient']:not([data-variant]) {
|
|
14690
|
-
|
|
14760
|
+
/* paper-* are named-token shortcuts, not wind3 colors, so they silently drop as
|
|
14761
|
+
gradient stops under @apply (unlike primary/accent/danger below). Write the
|
|
14762
|
+
translucent gradient directly. See rokkit/button.css for the same workaround. */
|
|
14763
|
+
background: linear-gradient(
|
|
14764
|
+
to bottom right,
|
|
14765
|
+
color-mix(in oklch, var(--paper-mute) 70%, transparent),
|
|
14766
|
+
color-mix(in oklch, var(--paper-soft) 50%, transparent)
|
|
14767
|
+
);
|
|
14768
|
+
--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink);
|
|
14691
14769
|
border-color: rgba(255, 255, 255, 0.2);
|
|
14692
14770
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
|
14693
14771
|
}
|
|
@@ -14705,16 +14783,16 @@ button[data-step-number] {
|
|
|
14705
14783
|
}
|
|
14706
14784
|
|
|
14707
14785
|
[data-style='frosted'] [data-button][data-style='gradient'][data-variant='accent'] {
|
|
14708
|
-
--un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-accent) calc(0.8 * 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(0.6 * 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:
|
|
14786
|
+
--un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-accent) calc(0.8 * 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(0.6 * 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-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
|
|
14709
14787
|
border-color: rgba(255, 255, 255, 0.25);
|
|
14710
14788
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
|
|
14711
|
-
}
|
|
14789
|
+
}
|
|
14712
14790
|
|
|
14713
14791
|
[data-style='frosted'] [data-button][data-style='gradient'][data-variant='danger'] {
|
|
14714
|
-
--un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-danger) calc(0.8 * 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(0.6 * 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:
|
|
14792
|
+
--un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-danger) calc(0.8 * 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(0.6 * 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-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
|
|
14715
14793
|
border-color: rgba(255, 255, 255, 0.25);
|
|
14716
14794
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
|
|
14717
|
-
}
|
|
14795
|
+
}
|
|
14718
14796
|
|
|
14719
14797
|
[data-style='frosted']
|
|
14720
14798
|
[data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
|
|
@@ -15037,7 +15115,7 @@ button[data-step-number] {
|
|
|
15037
15115
|
============================================================================= */
|
|
15038
15116
|
|
|
15039
15117
|
[data-style='frosted'] [data-tabs-trigger] {
|
|
15040
|
-
background-color:transparent;color:var(--ink-
|
|
15118
|
+
background-color:transparent;color:var(--ink-mute);
|
|
15041
15119
|
}
|
|
15042
15120
|
|
|
15043
15121
|
[data-style='frosted'] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
|
|
@@ -15055,7 +15133,7 @@ button[data-step-number] {
|
|
|
15055
15133
|
============================================================================= */
|
|
15056
15134
|
|
|
15057
15135
|
[data-style='frosted'] [data-tabs-trigger] [data-tabs-icon] {
|
|
15058
|
-
color:var(--ink-
|
|
15136
|
+
color:var(--ink-mute);
|
|
15059
15137
|
}
|
|
15060
15138
|
|
|
15061
15139
|
[data-style='frosted'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
|
|
@@ -15095,7 +15173,7 @@ button[data-step-number] {
|
|
|
15095
15173
|
============================================================================= */
|
|
15096
15174
|
|
|
15097
15175
|
[data-style='frosted'] [data-toggle-option] {
|
|
15098
|
-
color:var(--ink-
|
|
15176
|
+
color:var(--ink-mute);
|
|
15099
15177
|
}
|
|
15100
15178
|
|
|
15101
15179
|
[data-style='frosted'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
|
|
@@ -15114,7 +15192,7 @@ button[data-step-number] {
|
|
|
15114
15192
|
============================================================================= */
|
|
15115
15193
|
|
|
15116
15194
|
[data-style='frosted'] [data-toggle-option] [data-toggle-icon] {
|
|
15117
|
-
color:var(--ink-
|
|
15195
|
+
color:var(--ink-mute);
|
|
15118
15196
|
}
|
|
15119
15197
|
|
|
15120
15198
|
[data-style='frosted'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
|
|
@@ -15134,7 +15212,7 @@ button[data-step-number] {
|
|
|
15134
15212
|
============================================================================= */
|
|
15135
15213
|
|
|
15136
15214
|
[data-style='frosted'] [data-toggle][data-toggle-variant='button'] {
|
|
15137
|
-
border-color:transparent;background-color:transparent;color:var(--ink-
|
|
15215
|
+
border-color:transparent;background-color:transparent;color:var(--ink-mute);
|
|
15138
15216
|
background-image: none;
|
|
15139
15217
|
}
|
|
15140
15218
|
|
|
@@ -15144,7 +15222,7 @@ button[data-step-number] {
|
|
|
15144
15222
|
}
|
|
15145
15223
|
|
|
15146
15224
|
[data-style='frosted'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
|
|
15147
|
-
color:var(--ink-
|
|
15225
|
+
color:var(--ink-mute);
|
|
15148
15226
|
}
|
|
15149
15227
|
|
|
15150
15228
|
[data-style='frosted'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
|
|
@@ -15253,7 +15331,7 @@ button[data-step-number] {
|
|
|
15253
15331
|
============================================================================= */
|
|
15254
15332
|
|
|
15255
15333
|
[data-style='frosted'] [data-list] [data-list-item] [data-item-icon] {
|
|
15256
|
-
color:var(--ink-
|
|
15334
|
+
color:var(--ink-mute);
|
|
15257
15335
|
}
|
|
15258
15336
|
|
|
15259
15337
|
[data-style='frosted'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
|
|
@@ -15267,7 +15345,7 @@ button[data-step-number] {
|
|
|
15267
15345
|
|
|
15268
15346
|
/* Literal / kanji icons */
|
|
15269
15347
|
[data-style='frosted'] [data-list] [data-list-item] [data-item-icon-literal] {
|
|
15270
|
-
color:var(--ink-
|
|
15348
|
+
color:var(--ink-mute);
|
|
15271
15349
|
}
|
|
15272
15350
|
|
|
15273
15351
|
[data-style='frosted'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon-literal],
|
|
@@ -15291,7 +15369,7 @@ button[data-step-number] {
|
|
|
15291
15369
|
}
|
|
15292
15370
|
|
|
15293
15371
|
[data-style='frosted'] [data-list] [data-list-item] [data-item-description] {
|
|
15294
|
-
color:var(--ink-
|
|
15372
|
+
color:var(--ink-mute);
|
|
15295
15373
|
}
|
|
15296
15374
|
|
|
15297
15375
|
[data-style='frosted'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
|
|
@@ -15299,7 +15377,7 @@ button[data-step-number] {
|
|
|
15299
15377
|
}
|
|
15300
15378
|
|
|
15301
15379
|
[data-style='frosted'] [data-list] [data-list-item] [data-item-badge] {
|
|
15302
|
-
background-image:none;color:var(--ink-
|
|
15380
|
+
background-image:none;color:var(--ink-mute);
|
|
15303
15381
|
background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
|
|
15304
15382
|
}
|
|
15305
15383
|
|
|
@@ -15312,7 +15390,7 @@ button[data-step-number] {
|
|
|
15312
15390
|
============================================================================= */
|
|
15313
15391
|
|
|
15314
15392
|
[data-style='frosted'] [data-list] [data-list-group] {
|
|
15315
|
-
color:var(--ink-
|
|
15393
|
+
color:var(--ink-mute);
|
|
15316
15394
|
}
|
|
15317
15395
|
|
|
15318
15396
|
[data-style='frosted'] [data-list] [data-list-group]:hover:not(:disabled),
|
|
@@ -15356,6 +15434,17 @@ button[data-step-number] {
|
|
|
15356
15434
|
* Glassmorphism styling with blur and transparency.
|
|
15357
15435
|
*/
|
|
15358
15436
|
|
|
15437
|
+
/* =============================================================================
|
|
15438
|
+
Connector Lines — hairline tone (mode-aware), not currentColor (which
|
|
15439
|
+
renders white in dark mode and greyish in light).
|
|
15440
|
+
============================================================================= */
|
|
15441
|
+
|
|
15442
|
+
[data-style='frosted'] [data-tree]:not([data-line-style='none']) [data-connector-v],
|
|
15443
|
+
[data-style='frosted'] [data-tree]:not([data-line-style='none']) [data-connector-h],
|
|
15444
|
+
[data-style='frosted'] [data-tree]:not([data-line-style='none']) [data-connector-corner] {
|
|
15445
|
+
border-color:var(--paper-edge);
|
|
15446
|
+
}
|
|
15447
|
+
|
|
15359
15448
|
/* =============================================================================
|
|
15360
15449
|
Tree Container
|
|
15361
15450
|
============================================================================= */
|
|
@@ -15370,7 +15459,7 @@ button[data-step-number] {
|
|
|
15370
15459
|
============================================================================= */
|
|
15371
15460
|
|
|
15372
15461
|
[data-style='frosted'] [data-tree-toggle-btn] {
|
|
15373
|
-
color:var(--ink-
|
|
15462
|
+
color:var(--ink-mute);
|
|
15374
15463
|
}
|
|
15375
15464
|
|
|
15376
15465
|
[data-style='frosted'] [data-tree-toggle-btn]:hover {
|
|
@@ -15412,7 +15501,7 @@ button[data-step-number] {
|
|
|
15412
15501
|
============================================================================= */
|
|
15413
15502
|
|
|
15414
15503
|
[data-style='frosted'] [data-tree-item-content] [data-item-icon] {
|
|
15415
|
-
color:var(--ink-
|
|
15504
|
+
color:var(--ink-mute);
|
|
15416
15505
|
}
|
|
15417
15506
|
|
|
15418
15507
|
[data-style='frosted'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
|
|
@@ -15424,7 +15513,7 @@ button[data-step-number] {
|
|
|
15424
15513
|
}
|
|
15425
15514
|
|
|
15426
15515
|
[data-style='frosted'] [data-tree-item-content] [data-item-description] {
|
|
15427
|
-
color:var(--ink-
|
|
15516
|
+
color:var(--ink-mute);
|
|
15428
15517
|
}
|
|
15429
15518
|
|
|
15430
15519
|
[data-style='frosted'] [data-tree-item-content][data-active='true'] [data-item-description] {
|
|
@@ -15432,7 +15521,7 @@ button[data-step-number] {
|
|
|
15432
15521
|
}
|
|
15433
15522
|
|
|
15434
15523
|
[data-style='frosted'] [data-tree-item-content] [data-item-badge] {
|
|
15435
|
-
color:var(--ink-
|
|
15524
|
+
color:var(--ink-mute);
|
|
15436
15525
|
background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
|
|
15437
15526
|
}
|
|
15438
15527
|
|
|
@@ -15510,7 +15599,7 @@ button[data-step-number] {
|
|
|
15510
15599
|
============================================================================= */
|
|
15511
15600
|
|
|
15512
15601
|
[data-style='frosted'] [data-select-placeholder] {
|
|
15513
|
-
color:var(--ink-
|
|
15602
|
+
color:var(--ink-mute);
|
|
15514
15603
|
}
|
|
15515
15604
|
|
|
15516
15605
|
/* =============================================================================
|
|
@@ -15518,7 +15607,7 @@ button[data-step-number] {
|
|
|
15518
15607
|
============================================================================= */
|
|
15519
15608
|
|
|
15520
15609
|
[data-style='frosted'] [data-select-arrow] {
|
|
15521
|
-
color:var(--ink-
|
|
15610
|
+
color:var(--ink-mute);
|
|
15522
15611
|
}
|
|
15523
15612
|
|
|
15524
15613
|
[data-style='frosted'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
|
|
@@ -15535,7 +15624,7 @@ button[data-step-number] {
|
|
|
15535
15624
|
}
|
|
15536
15625
|
|
|
15537
15626
|
[data-style='frosted'] [data-select-tag-remove] {
|
|
15538
|
-
color:var(--ink-
|
|
15627
|
+
color:var(--ink-mute);
|
|
15539
15628
|
}
|
|
15540
15629
|
|
|
15541
15630
|
[data-style='frosted'] [data-select-tag-remove]:hover {
|
|
@@ -15597,7 +15686,7 @@ button[data-step-number] {
|
|
|
15597
15686
|
|
|
15598
15687
|
/* Item elements */
|
|
15599
15688
|
[data-style='frosted'] [data-select-option] [data-item-icon] {
|
|
15600
|
-
color:var(--ink-
|
|
15689
|
+
color:var(--ink-mute);
|
|
15601
15690
|
}
|
|
15602
15691
|
|
|
15603
15692
|
[data-style='frosted'] [data-select-option]:hover:not(:disabled) [data-item-icon] {
|
|
@@ -15609,7 +15698,7 @@ button[data-step-number] {
|
|
|
15609
15698
|
}
|
|
15610
15699
|
|
|
15611
15700
|
[data-style='frosted'] [data-select-option] [data-item-description] {
|
|
15612
|
-
color:var(--ink-
|
|
15701
|
+
color:var(--ink-mute);
|
|
15613
15702
|
}
|
|
15614
15703
|
|
|
15615
15704
|
[data-style='frosted'] [data-select-option][data-selected='true'] [data-item-description] {
|
|
@@ -15621,7 +15710,7 @@ button[data-step-number] {
|
|
|
15621
15710
|
============================================================================= */
|
|
15622
15711
|
|
|
15623
15712
|
[data-style='frosted'] [data-select-group-label] {
|
|
15624
|
-
color:var(--ink-
|
|
15713
|
+
color:var(--ink-mute);
|
|
15625
15714
|
}
|
|
15626
15715
|
|
|
15627
15716
|
/* =============================================================================
|
|
@@ -15652,11 +15741,11 @@ button[data-step-number] {
|
|
|
15652
15741
|
}
|
|
15653
15742
|
|
|
15654
15743
|
[data-style='frosted'] [data-select-filter-input]::placeholder {
|
|
15655
|
-
color:var(--ink-
|
|
15744
|
+
color:var(--ink-mute);
|
|
15656
15745
|
}
|
|
15657
15746
|
|
|
15658
15747
|
[data-style='frosted'] [data-select-empty] {
|
|
15659
|
-
color:var(--ink-
|
|
15748
|
+
color:var(--ink-mute);
|
|
15660
15749
|
}
|
|
15661
15750
|
|
|
15662
15751
|
/**
|
|
@@ -15694,7 +15783,7 @@ button[data-step-number] {
|
|
|
15694
15783
|
|
|
15695
15784
|
/* Trigger elements */
|
|
15696
15785
|
[data-style='frosted'] [data-menu-trigger] [data-menu-icon] {
|
|
15697
|
-
color:var(--ink-
|
|
15786
|
+
color:var(--ink-mute);
|
|
15698
15787
|
}
|
|
15699
15788
|
|
|
15700
15789
|
[data-style='frosted'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
|
|
@@ -15702,7 +15791,7 @@ button[data-step-number] {
|
|
|
15702
15791
|
}
|
|
15703
15792
|
|
|
15704
15793
|
[data-style='frosted'] [data-menu-trigger] [data-menu-arrow] {
|
|
15705
|
-
color:var(--ink-
|
|
15794
|
+
color:var(--ink-mute);
|
|
15706
15795
|
}
|
|
15707
15796
|
|
|
15708
15797
|
/* =============================================================================
|
|
@@ -15739,7 +15828,7 @@ button[data-step-number] {
|
|
|
15739
15828
|
|
|
15740
15829
|
/* Item elements */
|
|
15741
15830
|
[data-style='frosted'] [data-menu-item] [data-item-icon] {
|
|
15742
|
-
color:var(--ink-
|
|
15831
|
+
color:var(--ink-mute);
|
|
15743
15832
|
}
|
|
15744
15833
|
|
|
15745
15834
|
[data-style='frosted'] [data-menu-item]:hover:not(:disabled) [data-item-icon] {
|
|
@@ -15747,7 +15836,7 @@ button[data-step-number] {
|
|
|
15747
15836
|
}
|
|
15748
15837
|
|
|
15749
15838
|
[data-style='frosted'] [data-menu-item] [data-item-description] {
|
|
15750
|
-
color:var(--ink-
|
|
15839
|
+
color:var(--ink-mute);
|
|
15751
15840
|
}
|
|
15752
15841
|
|
|
15753
15842
|
/* =============================================================================
|
|
@@ -15755,7 +15844,7 @@ button[data-step-number] {
|
|
|
15755
15844
|
============================================================================= */
|
|
15756
15845
|
|
|
15757
15846
|
[data-style='frosted'] [data-menu-group] {
|
|
15758
|
-
color:var(--ink-
|
|
15847
|
+
color:var(--ink-mute);
|
|
15759
15848
|
}
|
|
15760
15849
|
|
|
15761
15850
|
/* =============================================================================
|
|
@@ -15797,11 +15886,11 @@ button[data-step-number] {
|
|
|
15797
15886
|
}
|
|
15798
15887
|
|
|
15799
15888
|
[data-style='frosted'] [data-dropdown-trigger] [data-dropdown-icon] {
|
|
15800
|
-
color:var(--ink-
|
|
15889
|
+
color:var(--ink-mute);
|
|
15801
15890
|
}
|
|
15802
15891
|
|
|
15803
15892
|
[data-style='frosted'] [data-dropdown-trigger] [data-dropdown-arrow] {
|
|
15804
|
-
color:var(--ink-
|
|
15893
|
+
color:var(--ink-mute);
|
|
15805
15894
|
}
|
|
15806
15895
|
|
|
15807
15896
|
[data-style='frosted'] [data-dropdown-panel] {
|
|
@@ -15910,7 +15999,7 @@ button[data-step-number] {
|
|
|
15910
15999
|
============================================================================= */
|
|
15911
16000
|
|
|
15912
16001
|
[data-style='frosted'] [data-table-header] th {
|
|
15913
|
-
border-bottom-width:1px;--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink-
|
|
16002
|
+
border-bottom-width:1px;--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink-mute);
|
|
15914
16003
|
border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
|
|
15915
16004
|
background-color: color-mix(in oklch, var(--paper-mute) 80%, transparent);
|
|
15916
16005
|
}
|
|
@@ -15925,7 +16014,7 @@ button[data-step-number] {
|
|
|
15925
16014
|
}
|
|
15926
16015
|
|
|
15927
16016
|
[data-style='frosted'] [data-table-sort-icon] {
|
|
15928
|
-
color:var(--ink-
|
|
16017
|
+
color:var(--ink-mute);
|
|
15929
16018
|
}
|
|
15930
16019
|
|
|
15931
16020
|
[data-style='frosted'] [data-table-header-cell][data-sort-order='ascending'] [data-table-sort-icon],
|
|
@@ -15986,7 +16075,7 @@ button[data-step-number] {
|
|
|
15986
16075
|
============================================================================= */
|
|
15987
16076
|
|
|
15988
16077
|
[data-style='frosted'] [data-table-empty] {
|
|
15989
|
-
color:var(--ink-
|
|
16078
|
+
color:var(--ink-mute);
|
|
15990
16079
|
}
|
|
15991
16080
|
|
|
15992
16081
|
/* =============================================================================
|
|
@@ -15994,7 +16083,7 @@ button[data-step-number] {
|
|
|
15994
16083
|
============================================================================= */
|
|
15995
16084
|
|
|
15996
16085
|
[data-style='frosted'] [data-table-cell] [data-cell-icon] {
|
|
15997
|
-
color:var(--ink-
|
|
16086
|
+
color:var(--ink-mute);
|
|
15998
16087
|
}
|
|
15999
16088
|
|
|
16000
16089
|
[data-style='frosted'] [data-table-row][data-selected='true'] [data-cell-icon] {
|
|
@@ -16013,7 +16102,7 @@ button[data-step-number] {
|
|
|
16013
16102
|
}
|
|
16014
16103
|
|
|
16015
16104
|
[data-style='frosted'] [data-table-responsive] [data-table-cell]::before {
|
|
16016
|
-
color:var(--ink-
|
|
16105
|
+
color:var(--ink-mute);
|
|
16017
16106
|
}
|
|
16018
16107
|
|
|
16019
16108
|
/* Disable striped alternating bg in card layout */
|
|
@@ -16196,7 +16285,7 @@ button[data-step-number] {
|
|
|
16196
16285
|
}
|
|
16197
16286
|
|
|
16198
16287
|
[data-style='frosted'] [data-timeline-item][data-active] [data-timeline-circle] {
|
|
16199
|
-
border-color:color-mix(in srgb, var(--color-primary) calc(0.6 * 100%), transparent);--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.15 * 100%), transparent);color:var(--
|
|
16288
|
+
border-color:color-mix(in srgb, var(--color-primary) calc(0.6 * 100%), transparent);--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.15 * 100%), transparent);color:var(--ink);
|
|
16200
16289
|
}
|
|
16201
16290
|
|
|
16202
16291
|
/* =============================================================================
|
|
@@ -16423,8 +16512,8 @@ button[data-step-number] {
|
|
|
16423
16512
|
}
|
|
16424
16513
|
|
|
16425
16514
|
[data-style='frosted'] [data-card][data-variant='primary'] [data-card-body] {
|
|
16426
|
-
color:
|
|
16427
|
-
}
|
|
16515
|
+
color:rgb(22 22 22 / 0.8);
|
|
16516
|
+
}
|
|
16428
16517
|
|
|
16429
16518
|
/* Secondary — tinted secondary glass */
|
|
16430
16519
|
[data-style='frosted'] [data-card][data-variant='secondary'] {
|
|
@@ -16441,8 +16530,8 @@ button[data-step-number] {
|
|
|
16441
16530
|
}
|
|
16442
16531
|
|
|
16443
16532
|
[data-style='frosted'] [data-card][data-variant='secondary'] [data-card-body] {
|
|
16444
|
-
color:
|
|
16445
|
-
}
|
|
16533
|
+
color:rgb(22 22 22 / 0.8);
|
|
16534
|
+
}
|
|
16446
16535
|
|
|
16447
16536
|
/* Tertiary — barely-there frosted glass */
|
|
16448
16537
|
[data-style='frosted'] [data-card][data-variant='tertiary'] {
|
|
@@ -16509,7 +16598,7 @@ button[data-step-number] {
|
|
|
16509
16598
|
|
|
16510
16599
|
[data-style='frosted'] [data-message-root][data-type='error'] {
|
|
16511
16600
|
border-color:color-mix(in srgb, var(--color-error) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--error);
|
|
16512
|
-
background-color:
|
|
16601
|
+
background-color: var(--error-soft);
|
|
16513
16602
|
}
|
|
16514
16603
|
[data-style='frosted'] [data-message-root][data-type='error'] [data-message-icon],
|
|
16515
16604
|
[data-style='frosted'] [data-message-root][data-type='error'] [data-message-dismiss] {
|
|
@@ -16518,7 +16607,7 @@ button[data-step-number] {
|
|
|
16518
16607
|
|
|
16519
16608
|
[data-style='frosted'] [data-message-root][data-type='warning'] {
|
|
16520
16609
|
border-color:color-mix(in srgb, var(--color-warning) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--warning);
|
|
16521
|
-
background-color:
|
|
16610
|
+
background-color: var(--warning-soft);
|
|
16522
16611
|
}
|
|
16523
16612
|
[data-style='frosted'] [data-message-root][data-type='warning'] [data-message-icon],
|
|
16524
16613
|
[data-style='frosted'] [data-message-root][data-type='warning'] [data-message-dismiss] {
|
|
@@ -16527,7 +16616,7 @@ button[data-step-number] {
|
|
|
16527
16616
|
|
|
16528
16617
|
[data-style='frosted'] [data-message-root][data-type='info'] {
|
|
16529
16618
|
border-color:color-mix(in srgb, var(--color-info) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--info);
|
|
16530
|
-
background-color:
|
|
16619
|
+
background-color: var(--info-soft);
|
|
16531
16620
|
}
|
|
16532
16621
|
[data-style='frosted'] [data-message-root][data-type='info'] [data-message-icon],
|
|
16533
16622
|
[data-style='frosted'] [data-message-root][data-type='info'] [data-message-dismiss] {
|
|
@@ -16536,7 +16625,7 @@ button[data-step-number] {
|
|
|
16536
16625
|
|
|
16537
16626
|
[data-style='frosted'] [data-message-root][data-type='success'] {
|
|
16538
16627
|
border-color:color-mix(in srgb, var(--color-success) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--success);
|
|
16539
|
-
background-color:
|
|
16628
|
+
background-color: var(--success-soft);
|
|
16540
16629
|
}
|
|
16541
16630
|
[data-style='frosted'] [data-message-root][data-type='success'] [data-message-icon],
|
|
16542
16631
|
[data-style='frosted'] [data-message-root][data-type='success'] [data-message-dismiss] {
|
|
@@ -16943,23 +17032,27 @@ button[data-step-number] {
|
|
|
16943
17032
|
|
|
16944
17033
|
[data-style='zen-sumi'] [data-button][data-style='default'][data-variant='primary'],
|
|
16945
17034
|
[data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='primary'] {
|
|
16946
|
-
border-color:transparent;background-image:none;
|
|
17035
|
+
border-color:transparent;background-image:none;color:var(--on-primary);
|
|
17036
|
+
background-color: var(--primary);
|
|
16947
17037
|
}
|
|
16948
17038
|
|
|
16949
17039
|
[data-style='zen-sumi'] [data-button][data-style='default'][data-variant='secondary'],
|
|
16950
17040
|
[data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='secondary'] {
|
|
16951
|
-
border-color:transparent;background-image:none;
|
|
17041
|
+
border-color:transparent;background-image:none;color:var(--on-primary);
|
|
17042
|
+
background-color: var(--accent);
|
|
16952
17043
|
}
|
|
16953
17044
|
|
|
16954
17045
|
[data-style='zen-sumi'] [data-button][data-style='default'][data-variant='accent'],
|
|
16955
17046
|
[data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='accent'] {
|
|
16956
|
-
border-color:transparent;background-image:none;--un-text-opacity:1;color:
|
|
16957
|
-
|
|
17047
|
+
border-color:transparent;background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
|
|
17048
|
+
background-color: var(--accent);
|
|
17049
|
+
}
|
|
16958
17050
|
|
|
16959
17051
|
[data-style='zen-sumi'] [data-button][data-style='default'][data-variant='danger'],
|
|
16960
17052
|
[data-style='zen-sumi'] [data-button]:not([data-style])[data-variant='danger'] {
|
|
16961
|
-
border-color:transparent;background-image:none;--un-text-opacity:1;color:
|
|
16962
|
-
|
|
17053
|
+
border-color:transparent;background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
|
|
17054
|
+
background-color: var(--danger);
|
|
17055
|
+
}
|
|
16963
17056
|
|
|
16964
17057
|
/* =============================================================================
|
|
16965
17058
|
Outline Style
|
|
@@ -17026,20 +17119,24 @@ button[data-step-number] {
|
|
|
17026
17119
|
}
|
|
17027
17120
|
|
|
17028
17121
|
[data-style='zen-sumi'] [data-button][data-style='gradient'][data-variant='primary'] {
|
|
17029
|
-
background-image:none;
|
|
17122
|
+
background-image:none;color:var(--on-primary);
|
|
17123
|
+
background-color: var(--primary);
|
|
17030
17124
|
}
|
|
17031
17125
|
|
|
17032
17126
|
[data-style='zen-sumi'] [data-button][data-style='gradient'][data-variant='secondary'] {
|
|
17033
|
-
background-image:none;
|
|
17127
|
+
background-image:none;color:var(--on-primary);
|
|
17128
|
+
background-color: var(--accent);
|
|
17034
17129
|
}
|
|
17035
17130
|
|
|
17036
17131
|
[data-style='zen-sumi'] [data-button][data-style='gradient'][data-variant='accent'] {
|
|
17037
|
-
background-image:none;--un-text-opacity:1;color:
|
|
17038
|
-
|
|
17132
|
+
background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
|
|
17133
|
+
background-color: var(--accent);
|
|
17134
|
+
}
|
|
17039
17135
|
|
|
17040
17136
|
[data-style='zen-sumi'] [data-button][data-style='gradient'][data-variant='danger'] {
|
|
17041
|
-
background-image:none;--un-text-opacity:1;color:
|
|
17042
|
-
|
|
17137
|
+
background-image:none;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
|
|
17138
|
+
background-color: var(--danger);
|
|
17139
|
+
}
|
|
17043
17140
|
|
|
17044
17141
|
/* =============================================================================
|
|
17045
17142
|
Link Style
|
|
@@ -17211,7 +17308,7 @@ button[data-step-number] {
|
|
|
17211
17308
|
============================================================================= */
|
|
17212
17309
|
|
|
17213
17310
|
[data-style='zen-sumi'] [data-tabs-trigger] {
|
|
17214
|
-
border-width:0px;background-color:transparent;color:var(--ink-
|
|
17311
|
+
border-width:0px;background-color:transparent;color:var(--ink-mute);
|
|
17215
17312
|
font-weight: 400;
|
|
17216
17313
|
border-radius: var(--radius-sm, 0.125rem);
|
|
17217
17314
|
transition:
|
|
@@ -17220,7 +17317,7 @@ button[data-step-number] {
|
|
|
17220
17317
|
}
|
|
17221
17318
|
|
|
17222
17319
|
[data-style='zen-sumi'] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
|
|
17223
|
-
background-color:var(--paper-mute);color:var(--ink
|
|
17320
|
+
background-color:var(--paper-mute);color:var(--ink);
|
|
17224
17321
|
}
|
|
17225
17322
|
|
|
17226
17323
|
[data-style='zen-sumi'] [data-tabs-trigger][data-selected] {
|
|
@@ -17249,7 +17346,7 @@ button[data-step-number] {
|
|
|
17249
17346
|
}
|
|
17250
17347
|
|
|
17251
17348
|
[data-style='zen-sumi'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
|
|
17252
|
-
color:var(--ink-
|
|
17349
|
+
color:var(--ink-mute);
|
|
17253
17350
|
}
|
|
17254
17351
|
|
|
17255
17352
|
[data-style='zen-sumi'] [data-tabs-trigger][data-selected] [data-tabs-icon] {
|
|
@@ -17287,7 +17384,7 @@ button[data-step-number] {
|
|
|
17287
17384
|
============================================================================= */
|
|
17288
17385
|
|
|
17289
17386
|
[data-style='zen-sumi'] [data-toggle-option] {
|
|
17290
|
-
border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-
|
|
17387
|
+
border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-mute);
|
|
17291
17388
|
}
|
|
17292
17389
|
|
|
17293
17390
|
[data-style='zen-sumi'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
|
|
@@ -17297,7 +17394,8 @@ button[data-step-number] {
|
|
|
17297
17394
|
|
|
17298
17395
|
/* Selected state — primary (shu) fill */
|
|
17299
17396
|
[data-style='zen-sumi'] [data-toggle-option][data-selected='true'] {
|
|
17300
|
-
background-image:none;
|
|
17397
|
+
background-image:none;color:var(--on-primary);
|
|
17398
|
+
background-color: var(--primary);
|
|
17301
17399
|
font-weight: 500;
|
|
17302
17400
|
}
|
|
17303
17401
|
|
|
@@ -17312,7 +17410,7 @@ button[data-step-number] {
|
|
|
17312
17410
|
* matches the option label, and `paper` for selected contrasts cleanly
|
|
17313
17411
|
* against the ink fill. */
|
|
17314
17412
|
[data-style='zen-sumi'] [data-toggle-option] [data-toggle-icon] {
|
|
17315
|
-
color:var(--ink-
|
|
17413
|
+
color:var(--ink-mute);
|
|
17316
17414
|
}
|
|
17317
17415
|
|
|
17318
17416
|
[data-style='zen-sumi'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
|
|
@@ -17332,7 +17430,7 @@ button[data-step-number] {
|
|
|
17332
17430
|
============================================================================= */
|
|
17333
17431
|
|
|
17334
17432
|
[data-style='zen-sumi'] [data-toggle][data-toggle-variant='button'] {
|
|
17335
|
-
border-color:transparent;background-color:transparent;color:var(--ink-
|
|
17433
|
+
border-color:transparent;background-color:transparent;color:var(--ink-mute);
|
|
17336
17434
|
background-image: none;
|
|
17337
17435
|
}
|
|
17338
17436
|
|
|
@@ -17342,7 +17440,7 @@ button[data-step-number] {
|
|
|
17342
17440
|
}
|
|
17343
17441
|
|
|
17344
17442
|
[data-style='zen-sumi'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
|
|
17345
|
-
color:var(--ink-
|
|
17443
|
+
color:var(--ink-mute);
|
|
17346
17444
|
}
|
|
17347
17445
|
|
|
17348
17446
|
[data-style='zen-sumi'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
|
|
@@ -17406,12 +17504,12 @@ button[data-step-number] {
|
|
|
17406
17504
|
============================================================================= */
|
|
17407
17505
|
|
|
17408
17506
|
[data-style='zen-sumi'] [data-list] [data-list-item] {
|
|
17409
|
-
border-width:0px;border-color:transparent;border-style:solid;background-color:transparent;color:var(--ink-
|
|
17507
|
+
border-width:0px;border-color:transparent;border-style:solid;background-color:transparent;color:var(--ink-mute);
|
|
17410
17508
|
}
|
|
17411
17509
|
|
|
17412
17510
|
[data-style='zen-sumi'] [data-list] a[data-list-item],
|
|
17413
17511
|
[data-style='zen-sumi'] [data-list] button[data-list-item] {
|
|
17414
|
-
color:var(--ink-
|
|
17512
|
+
color:var(--ink-mute);
|
|
17415
17513
|
}
|
|
17416
17514
|
|
|
17417
17515
|
/* Hover and focus — subtle paper wash */
|
|
@@ -17445,12 +17543,12 @@ button[data-step-number] {
|
|
|
17445
17543
|
============================================================================= */
|
|
17446
17544
|
|
|
17447
17545
|
[data-style='zen-sumi'] [data-list] [data-list-item] [data-item-icon] {
|
|
17448
|
-
color:var(--
|
|
17546
|
+
color:var(--ink-mute);
|
|
17449
17547
|
}
|
|
17450
17548
|
|
|
17451
17549
|
[data-style='zen-sumi'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
|
|
17452
17550
|
[data-style='zen-sumi'] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon] {
|
|
17453
|
-
color:var(--ink-
|
|
17551
|
+
color:var(--ink-mute);
|
|
17454
17552
|
}
|
|
17455
17553
|
|
|
17456
17554
|
[data-style='zen-sumi'] [data-list] [data-list-item][data-active='true'] [data-item-icon] {
|
|
@@ -17458,15 +17556,15 @@ button[data-step-number] {
|
|
|
17458
17556
|
}
|
|
17459
17557
|
|
|
17460
17558
|
[data-style='zen-sumi'] [data-list] [data-list-item] [data-item-description] {
|
|
17461
|
-
color:var(--
|
|
17559
|
+
color:var(--ink-mute);
|
|
17462
17560
|
}
|
|
17463
17561
|
|
|
17464
17562
|
[data-style='zen-sumi'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
|
|
17465
|
-
color:var(--ink-
|
|
17563
|
+
color:var(--ink-mute);
|
|
17466
17564
|
}
|
|
17467
17565
|
|
|
17468
17566
|
[data-style='zen-sumi'] [data-list] [data-list-item] [data-item-badge] {
|
|
17469
|
-
border-width:1px;background-color:transparent;background-image:none;color:var(--ink-
|
|
17567
|
+
border-width:1px;background-color:transparent;background-image:none;color:var(--ink-mute);border-color:var(--paper-mute);
|
|
17470
17568
|
}
|
|
17471
17569
|
|
|
17472
17570
|
[data-style='zen-sumi'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
|
|
@@ -17478,12 +17576,12 @@ button[data-step-number] {
|
|
|
17478
17576
|
============================================================================= */
|
|
17479
17577
|
|
|
17480
17578
|
[data-style='zen-sumi'] [data-list] [data-list-group] {
|
|
17481
|
-
color:var(--
|
|
17579
|
+
color:var(--ink-mute);
|
|
17482
17580
|
}
|
|
17483
17581
|
|
|
17484
17582
|
[data-style='zen-sumi'] [data-list] [data-list-group]:hover:not(:disabled),
|
|
17485
17583
|
[data-style='zen-sumi'] [data-list] [data-list-group]:focus:not(:disabled) {
|
|
17486
|
-
background-image:none;color:var(--ink-
|
|
17584
|
+
background-image:none;color:var(--ink-mute);
|
|
17487
17585
|
}
|
|
17488
17586
|
|
|
17489
17587
|
/* =============================================================================
|
|
@@ -17521,6 +17619,17 @@ button[data-step-number] {
|
|
|
17521
17619
|
* No bg fill on active — ink is in typography weight + icon color only.
|
|
17522
17620
|
*/
|
|
17523
17621
|
|
|
17622
|
+
/* =============================================================================
|
|
17623
|
+
Connector Lines — hairline tone (mode-aware), not currentColor (which
|
|
17624
|
+
renders white in dark mode and greyish in light).
|
|
17625
|
+
============================================================================= */
|
|
17626
|
+
|
|
17627
|
+
[data-style='zen-sumi'] [data-tree]:not([data-line-style='none']) [data-connector-v],
|
|
17628
|
+
[data-style='zen-sumi'] [data-tree]:not([data-line-style='none']) [data-connector-h],
|
|
17629
|
+
[data-style='zen-sumi'] [data-tree]:not([data-line-style='none']) [data-connector-corner] {
|
|
17630
|
+
border-color:var(--paper-edge);
|
|
17631
|
+
}
|
|
17632
|
+
|
|
17524
17633
|
/* =============================================================================
|
|
17525
17634
|
Tree Container
|
|
17526
17635
|
============================================================================= */
|
|
@@ -17534,11 +17643,11 @@ button[data-step-number] {
|
|
|
17534
17643
|
============================================================================= */
|
|
17535
17644
|
|
|
17536
17645
|
[data-style='zen-sumi'] [data-tree-toggle-btn] {
|
|
17537
|
-
color:var(--
|
|
17646
|
+
color:var(--ink-mute);
|
|
17538
17647
|
}
|
|
17539
17648
|
|
|
17540
17649
|
[data-style='zen-sumi'] [data-tree-toggle-btn]:hover {
|
|
17541
|
-
background-image:none;color:var(--ink-
|
|
17650
|
+
background-image:none;color:var(--ink-mute);
|
|
17542
17651
|
}
|
|
17543
17652
|
|
|
17544
17653
|
/* =============================================================================
|
|
@@ -17546,7 +17655,7 @@ button[data-step-number] {
|
|
|
17546
17655
|
============================================================================= */
|
|
17547
17656
|
|
|
17548
17657
|
[data-style='zen-sumi'] [data-tree-item-content] {
|
|
17549
|
-
color:var(--ink-
|
|
17658
|
+
color:var(--ink-mute);
|
|
17550
17659
|
}
|
|
17551
17660
|
|
|
17552
17661
|
[data-style='zen-sumi'] [data-tree-item-content]:hover:not(:disabled),
|
|
@@ -17589,11 +17698,11 @@ button[data-step-number] {
|
|
|
17589
17698
|
============================================================================= */
|
|
17590
17699
|
|
|
17591
17700
|
[data-style='zen-sumi'] [data-tree-item-content] [data-item-icon] {
|
|
17592
|
-
color:var(--
|
|
17701
|
+
color:var(--ink-mute);
|
|
17593
17702
|
}
|
|
17594
17703
|
|
|
17595
17704
|
[data-style='zen-sumi'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
|
|
17596
|
-
color:var(--ink-
|
|
17705
|
+
color:var(--ink-mute);
|
|
17597
17706
|
}
|
|
17598
17707
|
|
|
17599
17708
|
[data-style='zen-sumi'] [data-tree-item-content][data-active='true'] [data-item-icon] {
|
|
@@ -17601,15 +17710,15 @@ button[data-step-number] {
|
|
|
17601
17710
|
}
|
|
17602
17711
|
|
|
17603
17712
|
[data-style='zen-sumi'] [data-tree-item-content] [data-item-description] {
|
|
17604
|
-
color:var(--
|
|
17713
|
+
color:var(--ink-mute);
|
|
17605
17714
|
}
|
|
17606
17715
|
|
|
17607
17716
|
[data-style='zen-sumi'] [data-tree-item-content][data-active='true'] [data-item-description] {
|
|
17608
|
-
color:var(--ink-
|
|
17717
|
+
color:var(--ink-mute);
|
|
17609
17718
|
}
|
|
17610
17719
|
|
|
17611
17720
|
[data-style='zen-sumi'] [data-tree-item-content] [data-item-badge] {
|
|
17612
|
-
border-width:1px;background-color:transparent;background-image:none;color:var(--ink-
|
|
17721
|
+
border-width:1px;background-color:transparent;background-image:none;color:var(--ink-mute);border-color:var(--paper-mute);
|
|
17613
17722
|
}
|
|
17614
17723
|
|
|
17615
17724
|
[data-style='zen-sumi'] [data-tree-item-content][data-active='true'] [data-item-badge] {
|
|
@@ -17652,6 +17761,36 @@ button[data-step-number] {
|
|
|
17652
17761
|
color:var(--primary);
|
|
17653
17762
|
}
|
|
17654
17763
|
|
|
17764
|
+
/**
|
|
17765
|
+
* Divider - Zen-Sumi Theme Styles
|
|
17766
|
+
*
|
|
17767
|
+
* Hairline ink-on-paper rule. The base leaves the line uncolored, so without
|
|
17768
|
+
* this the divider is invisible — pin it to the paper-edge hairline tone.
|
|
17769
|
+
*/
|
|
17770
|
+
|
|
17771
|
+
[data-style='zen-sumi'] [data-divider][data-orientation='horizontal']::before,
|
|
17772
|
+
[data-style='zen-sumi'] [data-divider][data-orientation='horizontal']::after {
|
|
17773
|
+
background-color:var(--paper-edge);
|
|
17774
|
+
}
|
|
17775
|
+
|
|
17776
|
+
[data-style='zen-sumi'] [data-divider][data-orientation='vertical']::before,
|
|
17777
|
+
[data-style='zen-sumi'] [data-divider][data-orientation='vertical']::after {
|
|
17778
|
+
background-color:var(--paper-edge);
|
|
17779
|
+
}
|
|
17780
|
+
|
|
17781
|
+
/* No-label divider — color the element itself (no ::before/::after spacers). */
|
|
17782
|
+
[data-style='zen-sumi'] [data-divider][data-orientation='horizontal']:not(:has([data-divider-label])) {
|
|
17783
|
+
background-color:var(--paper-edge);
|
|
17784
|
+
}
|
|
17785
|
+
|
|
17786
|
+
[data-style='zen-sumi'] [data-divider][data-orientation='vertical']:not(:has([data-divider-label])) {
|
|
17787
|
+
background-color:var(--paper-edge);
|
|
17788
|
+
}
|
|
17789
|
+
|
|
17790
|
+
[data-style='zen-sumi'] [data-divider-label] {
|
|
17791
|
+
color:var(--ink-mute);
|
|
17792
|
+
}
|
|
17793
|
+
|
|
17655
17794
|
/**
|
|
17656
17795
|
* Select - Zen-Sumi Theme Styles
|
|
17657
17796
|
*
|
|
@@ -17665,7 +17804,7 @@ button[data-step-number] {
|
|
|
17665
17804
|
============================================================================= */
|
|
17666
17805
|
|
|
17667
17806
|
[data-style='zen-sumi'] [data-select-trigger] {
|
|
17668
|
-
border-width:1px;background-color:transparent;background-image:none;color:var(--ink-
|
|
17807
|
+
border-width:1px;background-color:transparent;background-image:none;color:var(--ink-mute);border-color:var(--paper-mute);
|
|
17669
17808
|
}
|
|
17670
17809
|
|
|
17671
17810
|
[data-style='zen-sumi'] [data-select-trigger]:hover:not(:disabled) {
|
|
@@ -17686,7 +17825,7 @@ button[data-step-number] {
|
|
|
17686
17825
|
============================================================================= */
|
|
17687
17826
|
|
|
17688
17827
|
[data-style='zen-sumi'] [data-select-placeholder] {
|
|
17689
|
-
color:var(--
|
|
17828
|
+
color:var(--ink-mute);
|
|
17690
17829
|
}
|
|
17691
17830
|
|
|
17692
17831
|
/* =============================================================================
|
|
@@ -17694,11 +17833,11 @@ button[data-step-number] {
|
|
|
17694
17833
|
============================================================================= */
|
|
17695
17834
|
|
|
17696
17835
|
[data-style='zen-sumi'] [data-select-arrow] {
|
|
17697
|
-
color:var(--
|
|
17836
|
+
color:var(--ink-mute);
|
|
17698
17837
|
}
|
|
17699
17838
|
|
|
17700
17839
|
[data-style='zen-sumi'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
|
|
17701
|
-
color:var(--
|
|
17840
|
+
color:var(--ink-mute);
|
|
17702
17841
|
}
|
|
17703
17842
|
|
|
17704
17843
|
/* =============================================================================
|
|
@@ -17706,11 +17845,11 @@ button[data-step-number] {
|
|
|
17706
17845
|
============================================================================= */
|
|
17707
17846
|
|
|
17708
17847
|
[data-style='zen-sumi'] [data-select-tag] {
|
|
17709
|
-
border-width:1px;background-color:transparent;background-image:none;color:var(--ink-
|
|
17848
|
+
border-width:1px;background-color:transparent;background-image:none;color:var(--ink-mute);border-color:var(--paper-mute);
|
|
17710
17849
|
}
|
|
17711
17850
|
|
|
17712
17851
|
[data-style='zen-sumi'] [data-select-tag-remove] {
|
|
17713
|
-
color:var(--
|
|
17852
|
+
color:var(--ink-mute);
|
|
17714
17853
|
}
|
|
17715
17854
|
|
|
17716
17855
|
[data-style='zen-sumi'] [data-select-tag-remove]:hover {
|
|
@@ -17731,7 +17870,7 @@ button[data-step-number] {
|
|
|
17731
17870
|
============================================================================= */
|
|
17732
17871
|
|
|
17733
17872
|
[data-style='zen-sumi'] [data-select-option] {
|
|
17734
|
-
border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-
|
|
17873
|
+
border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-mute);
|
|
17735
17874
|
}
|
|
17736
17875
|
|
|
17737
17876
|
[data-style='zen-sumi'] [data-select-option]:hover:not(:disabled),
|
|
@@ -17766,7 +17905,7 @@ button[data-step-number] {
|
|
|
17766
17905
|
|
|
17767
17906
|
/* Item elements */
|
|
17768
17907
|
[data-style='zen-sumi'] [data-select-option] [data-item-description] {
|
|
17769
|
-
color:var(--
|
|
17908
|
+
color:var(--ink-mute);
|
|
17770
17909
|
}
|
|
17771
17910
|
|
|
17772
17911
|
[data-style='zen-sumi'] [data-select-option][data-selected='true'] [data-item-description] {
|
|
@@ -17778,7 +17917,7 @@ button[data-step-number] {
|
|
|
17778
17917
|
============================================================================= */
|
|
17779
17918
|
|
|
17780
17919
|
[data-style='zen-sumi'] [data-select-group-label] {
|
|
17781
|
-
color:var(--
|
|
17920
|
+
color:var(--ink-mute);
|
|
17782
17921
|
}
|
|
17783
17922
|
|
|
17784
17923
|
/* =============================================================================
|
|
@@ -17806,11 +17945,11 @@ button[data-step-number] {
|
|
|
17806
17945
|
}
|
|
17807
17946
|
|
|
17808
17947
|
[data-style='zen-sumi'] [data-select-filter-input]::placeholder {
|
|
17809
|
-
color:var(--ink-
|
|
17948
|
+
color:var(--ink-mute);
|
|
17810
17949
|
}
|
|
17811
17950
|
|
|
17812
17951
|
[data-style='zen-sumi'] [data-select-empty] {
|
|
17813
|
-
color:var(--
|
|
17952
|
+
color:var(--ink-mute);
|
|
17814
17953
|
}
|
|
17815
17954
|
|
|
17816
17955
|
/**
|
|
@@ -17825,7 +17964,7 @@ button[data-step-number] {
|
|
|
17825
17964
|
============================================================================= */
|
|
17826
17965
|
|
|
17827
17966
|
[data-style='zen-sumi'] [data-menu-trigger] {
|
|
17828
|
-
border-width:1px;background-color:transparent;background-image:none;border-color:var(--paper-mute);color:var(--ink-
|
|
17967
|
+
border-width:1px;background-color:transparent;background-image:none;border-color:var(--paper-mute);color:var(--ink-mute);
|
|
17829
17968
|
}
|
|
17830
17969
|
|
|
17831
17970
|
[data-style='zen-sumi'] [data-menu-trigger]:hover:not(:disabled) {
|
|
@@ -17843,15 +17982,15 @@ button[data-step-number] {
|
|
|
17843
17982
|
|
|
17844
17983
|
/* Trigger elements */
|
|
17845
17984
|
[data-style='zen-sumi'] [data-menu-trigger] [data-menu-icon] {
|
|
17846
|
-
color:var(--
|
|
17985
|
+
color:var(--ink-mute);
|
|
17847
17986
|
}
|
|
17848
17987
|
|
|
17849
17988
|
[data-style='zen-sumi'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
|
|
17850
|
-
color:var(--ink-
|
|
17989
|
+
color:var(--ink-mute);
|
|
17851
17990
|
}
|
|
17852
17991
|
|
|
17853
17992
|
[data-style='zen-sumi'] [data-menu-trigger] [data-menu-arrow] {
|
|
17854
|
-
color:var(--
|
|
17993
|
+
color:var(--ink-mute);
|
|
17855
17994
|
}
|
|
17856
17995
|
|
|
17857
17996
|
/* =============================================================================
|
|
@@ -17868,7 +18007,7 @@ button[data-step-number] {
|
|
|
17868
18007
|
============================================================================= */
|
|
17869
18008
|
|
|
17870
18009
|
[data-style='zen-sumi'] [data-menu-item] {
|
|
17871
|
-
border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-
|
|
18010
|
+
border-width:0px;border-color:transparent;border-style:solid;color:var(--ink-mute);
|
|
17872
18011
|
}
|
|
17873
18012
|
|
|
17874
18013
|
[data-style='zen-sumi'] [data-menu-item]:hover:not(:disabled),
|
|
@@ -17878,15 +18017,15 @@ button[data-step-number] {
|
|
|
17878
18017
|
|
|
17879
18018
|
/* Item elements */
|
|
17880
18019
|
[data-style='zen-sumi'] [data-menu-item] [data-item-icon] {
|
|
17881
|
-
color:var(--
|
|
18020
|
+
color:var(--ink-mute);
|
|
17882
18021
|
}
|
|
17883
18022
|
|
|
17884
18023
|
[data-style='zen-sumi'] [data-menu-item]:hover:not(:disabled) [data-item-icon] {
|
|
17885
|
-
color:var(--ink-
|
|
18024
|
+
color:var(--ink-mute);
|
|
17886
18025
|
}
|
|
17887
18026
|
|
|
17888
18027
|
[data-style='zen-sumi'] [data-menu-item] [data-item-description] {
|
|
17889
|
-
color:var(--
|
|
18028
|
+
color:var(--ink-mute);
|
|
17890
18029
|
}
|
|
17891
18030
|
|
|
17892
18031
|
/* =============================================================================
|
|
@@ -17894,7 +18033,7 @@ button[data-step-number] {
|
|
|
17894
18033
|
============================================================================= */
|
|
17895
18034
|
|
|
17896
18035
|
[data-style='zen-sumi'] [data-menu-group] {
|
|
17897
|
-
color:var(--
|
|
18036
|
+
color:var(--ink-mute);
|
|
17898
18037
|
}
|
|
17899
18038
|
|
|
17900
18039
|
/* =============================================================================
|
|
@@ -17913,7 +18052,7 @@ button[data-step-number] {
|
|
|
17913
18052
|
*/
|
|
17914
18053
|
|
|
17915
18054
|
[data-style='zen-sumi'] [data-dropdown-trigger] {
|
|
17916
|
-
border-width:1px;background-color:transparent;background-image:none;border-color:var(--paper-mute);color:var(--ink-
|
|
18055
|
+
border-width:1px;background-color:transparent;background-image:none;border-color:var(--paper-mute);color:var(--ink-mute);
|
|
17917
18056
|
}
|
|
17918
18057
|
|
|
17919
18058
|
[data-style='zen-sumi'] [data-dropdown-trigger]:hover:not(:disabled) {
|
|
@@ -17930,11 +18069,11 @@ button[data-step-number] {
|
|
|
17930
18069
|
}
|
|
17931
18070
|
|
|
17932
18071
|
[data-style='zen-sumi'] [data-dropdown-trigger] [data-dropdown-icon] {
|
|
17933
|
-
color:var(--
|
|
18072
|
+
color:var(--ink-mute);
|
|
17934
18073
|
}
|
|
17935
18074
|
|
|
17936
18075
|
[data-style='zen-sumi'] [data-dropdown-trigger] [data-dropdown-arrow] {
|
|
17937
|
-
color:var(--
|
|
18076
|
+
color:var(--ink-mute);
|
|
17938
18077
|
}
|
|
17939
18078
|
|
|
17940
18079
|
[data-style='zen-sumi'] [data-dropdown-panel] {
|
|
@@ -17943,7 +18082,7 @@ button[data-step-number] {
|
|
|
17943
18082
|
}
|
|
17944
18083
|
|
|
17945
18084
|
[data-style='zen-sumi'] [data-dropdown-option] {
|
|
17946
|
-
color:var(--ink-
|
|
18085
|
+
color:var(--ink-mute);
|
|
17947
18086
|
}
|
|
17948
18087
|
|
|
17949
18088
|
[data-style='zen-sumi'] [data-dropdown-option]:hover:not(:disabled),
|
|
@@ -18212,7 +18351,7 @@ button[data-step-number] {
|
|
|
18212
18351
|
============================================================================= */
|
|
18213
18352
|
|
|
18214
18353
|
[data-style='zen-sumi'] [data-table-header] th {
|
|
18215
|
-
border-bottom-width:1px;background-color:transparent;color:var(--ink-
|
|
18354
|
+
border-bottom-width:1px;background-color:transparent;color:var(--ink-mute);border-color:var(--paper-mute);
|
|
18216
18355
|
font-size: 0.6875rem;
|
|
18217
18356
|
font-weight: 600;
|
|
18218
18357
|
letter-spacing: 0.05em;
|
|
@@ -18246,7 +18385,7 @@ button[data-step-number] {
|
|
|
18246
18385
|
============================================================================= */
|
|
18247
18386
|
|
|
18248
18387
|
[data-style='zen-sumi'] [data-table-caption] {
|
|
18249
|
-
color:var(--ink-
|
|
18388
|
+
color:var(--ink-mute);
|
|
18250
18389
|
}
|
|
18251
18390
|
|
|
18252
18391
|
/* =============================================================================
|
|
@@ -18254,7 +18393,7 @@ button[data-step-number] {
|
|
|
18254
18393
|
============================================================================= */
|
|
18255
18394
|
|
|
18256
18395
|
[data-style='zen-sumi'] [data-table-row] {
|
|
18257
|
-
border-bottom-width:1px;color:var(--ink-
|
|
18396
|
+
border-bottom-width:1px;color:var(--ink-mute);border-color:var(--paper-mute);
|
|
18258
18397
|
}
|
|
18259
18398
|
|
|
18260
18399
|
[data-style='zen-sumi'] [data-table-row]:hover {
|
|
@@ -18293,7 +18432,7 @@ button[data-step-number] {
|
|
|
18293
18432
|
============================================================================= */
|
|
18294
18433
|
|
|
18295
18434
|
[data-style='zen-sumi'] [data-table-empty] {
|
|
18296
|
-
color:var(--ink-
|
|
18435
|
+
color:var(--ink-mute);
|
|
18297
18436
|
}
|
|
18298
18437
|
|
|
18299
18438
|
/* =============================================================================
|
|
@@ -18301,7 +18440,7 @@ button[data-step-number] {
|
|
|
18301
18440
|
============================================================================= */
|
|
18302
18441
|
|
|
18303
18442
|
[data-style='zen-sumi'] [data-table-cell] [data-cell-icon] {
|
|
18304
|
-
color:var(--ink-
|
|
18443
|
+
color:var(--ink-mute);
|
|
18305
18444
|
}
|
|
18306
18445
|
|
|
18307
18446
|
[data-style='zen-sumi'] [data-table-row][data-selected='true'] [data-cell-icon] {
|
|
@@ -18318,7 +18457,7 @@ button[data-step-number] {
|
|
|
18318
18457
|
}
|
|
18319
18458
|
|
|
18320
18459
|
[data-style='zen-sumi'] [data-table-responsive] [data-table-cell]::before {
|
|
18321
|
-
color:var(--ink-
|
|
18460
|
+
color:var(--ink-mute);
|
|
18322
18461
|
}
|
|
18323
18462
|
|
|
18324
18463
|
[data-style='zen-sumi']
|
|
@@ -18493,11 +18632,11 @@ button[data-step-number] {
|
|
|
18493
18632
|
}
|
|
18494
18633
|
|
|
18495
18634
|
[data-style='zen-sumi'] [data-timeline-item][data-completed] [data-timeline-circle] {
|
|
18496
|
-
border-color:var(--primary);color:var(--
|
|
18635
|
+
border-color:var(--primary);color:var(--ink);
|
|
18497
18636
|
}
|
|
18498
18637
|
|
|
18499
18638
|
[data-style='zen-sumi'] [data-timeline-item][data-active] [data-timeline-circle] {
|
|
18500
|
-
border-color:var(--primary);color:var(--
|
|
18639
|
+
border-color:var(--primary);color:var(--ink);
|
|
18501
18640
|
}
|
|
18502
18641
|
|
|
18503
18642
|
/* =============================================================================
|
|
@@ -18509,7 +18648,7 @@ button[data-step-number] {
|
|
|
18509
18648
|
}
|
|
18510
18649
|
|
|
18511
18650
|
[data-style='zen-sumi'] [data-timeline-item][data-completed] [data-timeline-connector] {
|
|
18512
|
-
background-color:var(--primary);
|
|
18651
|
+
background-color: var(--primary);
|
|
18513
18652
|
}
|
|
18514
18653
|
|
|
18515
18654
|
/* =============================================================================
|
|
@@ -18703,8 +18842,8 @@ button[data-step-number] {
|
|
|
18703
18842
|
}
|
|
18704
18843
|
|
|
18705
18844
|
[data-style='zen-sumi'] [data-card][data-variant='primary'] [data-card-body] {
|
|
18706
|
-
color:
|
|
18707
|
-
}
|
|
18845
|
+
color:rgb(22 22 22 / 0.8);
|
|
18846
|
+
}
|
|
18708
18847
|
|
|
18709
18848
|
/* Secondary */
|
|
18710
18849
|
[data-style='zen-sumi'] [data-card][data-variant='secondary'] {
|
|
@@ -18718,8 +18857,8 @@ button[data-step-number] {
|
|
|
18718
18857
|
}
|
|
18719
18858
|
|
|
18720
18859
|
[data-style='zen-sumi'] [data-card][data-variant='secondary'] [data-card-body] {
|
|
18721
|
-
color:
|
|
18722
|
-
}
|
|
18860
|
+
color:rgb(22 22 22 / 0.8);
|
|
18861
|
+
}
|
|
18723
18862
|
|
|
18724
18863
|
/* Tertiary — recessed surface, lighter border */
|
|
18725
18864
|
[data-style='zen-sumi'] [data-card][data-variant='tertiary'] {
|