From 7f25af37850fa88214ef5f666618d7cecb86f670 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Tue, 8 Sep 2026 10:14:03 +0200
Subject: [PATCH] feat(ui): capitalize button labels and speed depth
 transitions

Standard buttons now capitalize each word in their labels. Movement and
depth-shadow changes use an 80ms duration while color transitions stay
at 120ms.
---
 DESIGN.md                                      |  3 +++
 resources/css/app.css                          |  4 ++++
 resources/css/utilities.css                    |  2 +-
 tests/Feature/ButtonDepthInteractionTest.php   |  1 +
 tests/Feature/ButtonTextCapitalizationTest.php | 11 +++++++++++
 5 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 tests/Feature/ButtonTextCapitalizationTest.php

diff --git a/DESIGN.md b/DESIGN.md
index 255db3fb5d..53b058ddef 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -56,6 +56,9 @@ button face by 1px and increases the visible depth to 3px. Pressing moves the
 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 76523f889c..04c9177edc 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -130,6 +130,10 @@
     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 49b3fd2cdc..297a5acc42 100644
--- a/resources/css/utilities.css
+++ b/resources/css/utilities.css
@@ -126,7 +126,7 @@
 }
 
 @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 3e410c77aa..f3e21df6b7 100644
--- a/tests/Feature/ButtonDepthInteractionTest.php
+++ b/tests/Feature/ButtonDepthInteractionTest.php
@@ -14,6 +14,7 @@ test('standard buttons use raised hover and pressed depth states', function () {
         ->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 0000000000..cdf41d1292
--- /dev/null
+++ b/tests/Feature/ButtonTextCapitalizationTest.php
@@ -0,0 +1,11 @@
+<?php
+
+test('standard buttons capitalize each word in their labels', function () {
+    $utilities = file_get_contents(resource_path('css/utilities.css'));
+
+    preg_match('/@utility button \{(?<styles>[\s\S]*?)\n\}/', $utilities, $matches);
+
+    expect($matches['styles'] ?? '')
+        ->toContain('capitalize')
+        ->not->toContain('normal-case');
+});