diff --git a/DESIGN.md b/DESIGN.md index 36adf565d..255db3fb5 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -58,6 +58,8 @@ ## 1. Visual direction 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. --- diff --git a/resources/css/app.css b/resources/css/app.css index 0e79d936d..76523f889 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -101,6 +101,10 @@ .button[isHighlighted]:not(:disabled) { --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); diff --git a/tests/Feature/ButtonDepthInteractionTest.php b/tests/Feature/ButtonDepthInteractionTest.php index 9c5937c3e..3e410c77a 100644 --- a/tests/Feature/ButtonDepthInteractionTest.php +++ b/tests/Feature/ButtonDepthInteractionTest.php @@ -9,6 +9,9 @@ ->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')