astral/buzz-sheet
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui) : improve control visibility while preserving header styling
CI / Verify (push) Successful in 3m0s
Details
CI / Build immutable images and deploy (push) Successful in 2m34s
Details

Browse Source
This commit is contained in:
gunshiz
2026-10-14 15:35:40 +07:00 Unverified
parent 8d051c9e4b
commit d229cb3942
10 changed files with 109 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
+76
View File
@@ -51,6 +51,10 @@
--color-tier-copper: var(--tier-copper);
--color-border: var(--border);
--color-input: var(--input);
--color-control: var(--control);
--color-control-hover: var(--control-hover);
--color-control-border: var(--control-border);
--color-control-border-hover: var(--control-border-hover);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
@@ -104,6 +108,10 @@
--tier-copper: oklch(0.65 0.12 55);
--border: oklch(0.96 0.01 88 / 12%);
--input: oklch(0.96 0.01 88 / 16%);
--control: oklch(0.26 0.02 274);
--control-hover: oklch(0.32 0.025 274);
--control-border: oklch(0.52 0.02 274);
--control-border-hover: oklch(0.64 0.02 274);
--ring: oklch(0.79 0.14 78);
--chart-1: oklch(0.76 0.16 76);
--chart-2: oklch(0.7 0.14 255);
@@ -156,11 +164,78 @@
text-rendering: optimizeLegibility;
}
button:not(:disabled):not([aria-disabled="true"]):not([data-disabled]),
[role="button"]:not(:disabled):not([aria-disabled="true"]):not([data-disabled]) {
cursor: pointer;
}
button:disabled,
[role="button"][aria-disabled="true"],
button[data-disabled] {
cursor: not-allowed;
}
::selection {
background: color-mix(in oklch, var(--primary) 30%, transparent);
}
}
/* Keep header actions understated while page controls use visible surfaces. */
[data-slot="header-shell"] [data-variant="ghost"] {
border-color: transparent;
background: transparent;
color: inherit;
}
[data-slot="header-shell"] [data-variant="ghost"]:hover {
background: color-mix(in oklch, var(--muted) 50%, transparent);
color: var(--foreground);
}
[data-slot="header-shell"] [data-variant="ghost"][aria-expanded="true"] {
background: var(--muted);
color: var(--foreground);
}
[data-slot="header-shell"] [data-variant="outline"] {
border-color: var(--input);
background: color-mix(in oklch, var(--input) 30%, transparent);
color: inherit;
}
[data-slot="header-shell"] [data-variant="outline"]:hover {
background: color-mix(in oklch, var(--input) 50%, transparent);
color: var(--foreground);
}
[data-slot="header-shell"] [data-variant="outline"][aria-expanded="true"] {
background: var(--muted);
color: var(--foreground);
}
[data-slot="header-shell"] [data-variant="secondary"] {
border-color: transparent;
background: var(--secondary);
color: var(--secondary-foreground);
}
[data-slot="header-shell"] [data-variant="secondary"]:hover {
background: color-mix(in oklch, var(--secondary), var(--foreground) 5%);
}
[data-slot="header-shell"] [data-variant="link"] {
text-decoration-line: none;
}
[data-slot="header-shell"] [data-variant="link"]:hover {
text-decoration-line: underline;
text-decoration-thickness: auto;
}
[data-slot="header-shell"] [data-variant]:focus-visible {
border-color: var(--ring);
}
.extra-sheet-grid {
--background-color: var(--background);
--text-color: var(--foreground);
@@ -284,6 +359,7 @@
@media (pointer: coarse) {
[data-slot="button"],
[data-slot="toggle-group-item"],
[data-slot="tabs-trigger"],
[data-slot="select-trigger"],
[data-slot="input"],
[data-slot="input-group"] {