mirror of
https://github.com/coollabsio/coolify.git
synced 2026-09-26 09:20:54 -04:00
fix(ui): match dark-mode button depth to the regular border
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:
@@ -58,6 +58,8 @@ overall bottom position stable. Disabled controls stay flat,
|
||||
and focus-visible controls retain the accent ring alongside the depth.
|
||||
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.
|
||||
Dark mode matches the depth edge of neutral buttons to their regular border
|
||||
color. Highlighted buttons keep their dark, color-matched accent edge.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -101,6 +101,10 @@
|
||||
--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. */
|
||||
.button:not(:disabled):focus-visible {
|
||||
box-shadow: var(--button-depth), 0 0 0 1px var(--color-accent);
|
||||
|
||||
@@ -9,6 +9,9 @@ test('standard buttons use raised hover and pressed depth states', function () {
|
||||
->toContain('--button-depth-hover: 0 3px 0 var(--button-depth-color);')
|
||||
->toContain('.button-highlighted:not(:disabled)')
|
||||
->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('transform: translateY(-1px);')
|
||||
->toContain('.button:not(:disabled):active')
|
||||
|
||||
Reference in New Issue
Block a user