diff --git a/DESIGN.md b/DESIGN.md index 255db3fb5..53b058dde 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -56,6 +56,9 @@ ## 1. Visual direction face down 2px into the edge and removes the depth until release, keeping the overall bottom position stable. Disabled controls stay flat, and focus-visible controls retain the accent ring alongside the depth. +Movement and depth-shadow changes transition over 80ms; color transitions keep +the shared 120ms duration. +Standard button labels use `capitalize`, giving each word an initial capital. 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 diff --git a/resources/css/app.css b/resources/css/app.css index 76523f889..04c9177ed 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -130,6 +130,10 @@ .split-action-caret { transition-duration: 120ms; } +.button { + transition-duration: 120ms, 120ms, 120ms, 80ms, 80ms; +} + .icon-button:not(:disabled):active, .app-tab:active, .split-action-main:not(:disabled):active, diff --git a/resources/css/utilities.css b/resources/css/utilities.css index 49b3fd2cd..297a5acc4 100644 --- a/resources/css/utilities.css +++ b/resources/css/utilities.css @@ -126,7 +126,7 @@ @utility select { } @utility button { - @apply inline-flex shrink-0 gap-1.5 justify-center items-center whitespace-nowrap px-2.5 h-8 min-h-8 text-[13px] text-black normal-case rounded-md border outline-0 cursor-pointer font-medium transition-colors bg-white border-neutral-200 hover:bg-neutral-100 dark:bg-white/[0.06] dark:text-fg dark:hover:text-fg dark:hover:bg-white/[0.1] dark:border-white/[0.08] hover:text-black disabled:cursor-not-allowed min-w-fit dark:disabled:text-fg-faint disabled:border-neutral-200 dark:disabled:border-white/[0.06] disabled:hover:bg-transparent disabled:bg-transparent disabled:text-neutral-300 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent; + @apply inline-flex shrink-0 gap-1.5 justify-center items-center whitespace-nowrap px-2.5 h-8 min-h-8 text-[13px] text-black capitalize rounded-md border outline-0 cursor-pointer font-medium transition-colors bg-white border-neutral-200 hover:bg-neutral-100 dark:bg-white/[0.06] dark:text-fg dark:hover:text-fg dark:hover:bg-white/[0.1] dark:border-white/[0.08] hover:text-black disabled:cursor-not-allowed min-w-fit dark:disabled:text-fg-faint disabled:border-neutral-200 dark:disabled:border-white/[0.06] disabled:hover:bg-transparent disabled:bg-transparent disabled:text-neutral-300 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent; } @utility button-highlighted { diff --git a/tests/Feature/ButtonDepthInteractionTest.php b/tests/Feature/ButtonDepthInteractionTest.php index 3e410c77a..f3e21df6b 100644 --- a/tests/Feature/ButtonDepthInteractionTest.php +++ b/tests/Feature/ButtonDepthInteractionTest.php @@ -14,6 +14,7 @@ ->not->toContain('.dark .button.button-highlighted:not(:disabled)') ->toContain('.button:not(:disabled):hover') ->toContain('transform: translateY(-1px);') + ->toContain('transition-duration: 120ms, 120ms, 120ms, 80ms, 80ms;') ->toContain('.button:not(:disabled):active') ->toContain('transform: translateY(2px);') ->not->toContain('transform: translateY(1px);') diff --git a/tests/Feature/ButtonTextCapitalizationTest.php b/tests/Feature/ButtonTextCapitalizationTest.php new file mode 100644 index 000000000..cdf41d129 --- /dev/null +++ b/tests/Feature/ButtonTextCapitalizationTest.php @@ -0,0 +1,11 @@ +[\s\S]*?)\n\}/', $utilities, $matches); + + expect($matches['styles'] ?? '') + ->toContain('capitalize') + ->not->toContain('normal-case'); +});