rosslh/coolify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): match dark-mode button depth to the regular border

Browse source 
Neutral buttons in dark mode now use a white 8% depth edge so it matches
the regular border. Highlighted buttons keep the accent-mixed edge.
Document the behavior and assert the dark-mode selector in CSS tests.
This commit is contained in:
Andras Bacsai 2026-09-08 09:47:54 +02:00
parent 3ae1eb9d10
commit 0aba440a94
3 changed files with 9 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
DESIGN.md
View file

@ -58,6 +58,8 @@ ## 1. Visual direction
and focus-visible controls retain the accent ring alongside the depth. and focus-visible controls retain the accent ring alongside the depth.
Highlighted buttons mix the accent equally with black for a pronounced bottom Highlighted buttons mix the accent equally with black for a pronounced bottom
edge, so custom theme colors produce a matching edge instead of a generic one. edge, so custom theme colors produce a matching edge instead of a generic one.
Dark mode matches the depth edge of neutral buttons to their regular border
color. Highlighted buttons keep their dark, color-matched accent edge.
--- ---

4
resources/css/app.css
View file

@ -101,6 +101,10 @@ .button[isHighlighted]:not(:disabled) {
--button-depth-color: color-mix(in oklab, var(--color-coollabs) 52%, black); --button-depth-color: color-mix(in oklab, var(--color-coollabs) 52%, black);
} }
.dark .button:not(.button-highlighted):not([isHighlighted]):not(:disabled) {
--button-depth-color: rgb(255 255 255 / 0.08);
}
/* Keep the shared focus indicator when the depth shadow owns box-shadow. */ /* Keep the shared focus indicator when the depth shadow owns box-shadow. */
.button:not(:disabled):focus-visible { .button:not(:disabled):focus-visible {
box-shadow: var(--button-depth), 0 0 0 1px var(--color-accent); box-shadow: var(--button-depth), 0 0 0 1px var(--color-accent);

3
tests/Feature/ButtonDepthInteractionTest.php
View file

@ -9,6 +9,9 @@
->toContain('--button-depth-hover: 0 3px 0 var(--button-depth-color);') ->toContain('--button-depth-hover: 0 3px 0 var(--button-depth-color);')
->toContain('.button-highlighted:not(:disabled)') ->toContain('.button-highlighted:not(:disabled)')
->toContain('--button-depth-color: color-mix(in oklab, var(--color-coollabs) 52%, black);') ->toContain('--button-depth-color: color-mix(in oklab, var(--color-coollabs) 52%, black);')
->toContain('.dark .button:not(.button-highlighted):not([isHighlighted]):not(:disabled)')
->toContain('--button-depth-color: rgb(255 255 255 / 0.08);')
->not->toContain('.dark .button.button-highlighted:not(:disabled)')
->toContain('.button:not(:disabled):hover') ->toContain('.button:not(:disabled):hover')
->toContain('transform: translateY(-1px);') ->toContain('transform: translateY(-1px);')
->toContain('.button:not(:disabled):active') ->toContain('.button:not(:disabled):active')