From a84505efe89cfb96edf27ac94c547d9e7c690d40 Mon Sep 17 00:00:00 2001 From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com> Date: Mon, 10 Aug 2026 11:52:24 +0200 Subject: [PATCH] style(ui): refine focus ring thickness and warning color --- resources/css/app.css | 2 +- resources/css/v5/app.css | 4 ++-- .../views/livewire/dashboard/active-deployments.blade.php | 4 ++-- tests/Feature/DashboardDeploymentsTest.php | 7 ++++--- tests/Unit/DarkModeFocusRingTest.php | 7 ++++--- 5 files changed, 13 insertions(+), 11 deletions(-) diff --git a/resources/css/app.css b/resources/css/app.css index ed2b47c4a..e3439674c 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -308,7 +308,7 @@ a { button:focus-visible, a:focus-visible { - @apply outline-none ring-2 ring-coollabs dark:ring-warning/70 ring-offset-2 dark:ring-offset-coolgray-100; + @apply outline-none ring-2 ring-coollabs dark:ring-1 dark:ring-warning ring-offset-2 dark:ring-offset-coolgray-100; } label { diff --git a/resources/css/v5/app.css b/resources/css/v5/app.css index 9ab3ceb6f..93d194af1 100644 --- a/resources/css/v5/app.css +++ b/resources/css/v5/app.css @@ -118,7 +118,7 @@ --warning: #fcd452; --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); - --ring: color-mix(in srgb, var(--warning) 70%, transparent); + --ring: var(--warning); --chart-1: oklch(0.871 0.006 286.286); --chart-2: oklch(0.552 0.016 285.938); --chart-3: oklch(0.442 0.017 285.786); @@ -145,7 +145,7 @@ } :where(a, button, input, select, textarea, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible { - @apply outline-none ring-2 ring-ring ring-offset-2; + @apply outline-none ring-2 dark:ring-1 ring-ring ring-offset-2; } html, diff --git a/resources/views/livewire/dashboard/active-deployments.blade.php b/resources/views/livewire/dashboard/active-deployments.blade.php index 23bda7054..3aa481a08 100644 --- a/resources/views/livewire/dashboard/active-deployments.blade.php +++ b/resources/views/livewire/dashboard/active-deployments.blade.php @@ -70,7 +70,7 @@ + class="dashboard-deployment-table-grid group block border-b border-neutral-200 px-4 py-3 transition-colors last:border-b-0 hover:bg-neutral-50 focus-visible:z-10 focus-visible:bg-warning/10 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-warning focus-visible:ring-offset-0 md:grid md:items-center md:gap-4 dark:border-white/[0.08] dark:hover:bg-white/[0.025] dark:focus-visible:bg-warning/10">

{{ $deployment->application_name }} @@ -139,7 +139,7 @@ + class="dashboard-deployment-table-grid group block border-b border-neutral-200 px-4 py-3 transition-colors last:border-b-0 hover:bg-neutral-50 focus-visible:z-10 focus-visible:bg-warning/10 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-warning focus-visible:ring-offset-0 md:grid md:items-center md:gap-4 dark:border-white/[0.08] dark:hover:bg-white/[0.025] dark:focus-visible:bg-warning/10">

{{ $deployment->application_name }} diff --git a/tests/Feature/DashboardDeploymentsTest.php b/tests/Feature/DashboardDeploymentsTest.php index e39aa2ac7..287caf637 100644 --- a/tests/Feature/DashboardDeploymentsTest.php +++ b/tests/Feature/DashboardDeploymentsTest.php @@ -56,11 +56,12 @@ function createDashboardDeployment(array $overrides = []): ApplicationDeployment it('shows a visible yellow inset focus state on deployment rows', function () { $view = file_get_contents(resource_path('views/livewire/dashboard/active-deployments.blade.php')); - expect(substr_count($view, 'focus-visible:bg-warning/[0.06]'))->toBe(4) + expect(substr_count($view, 'focus-visible:bg-warning/10'))->toBe(4) + ->and(substr_count($view, 'focus-visible:ring-1'))->toBe(2) ->and(substr_count($view, 'focus-visible:ring-inset'))->toBe(2) - ->and(substr_count($view, 'focus-visible:ring-warning/70'))->toBe(2) + ->and(substr_count($view, 'focus-visible:ring-warning'))->toBe(2) ->and(substr_count($view, 'focus-visible:ring-offset-0'))->toBe(2) - ->and(substr_count($view, 'dark:focus-visible:bg-warning/[0.06]'))->toBe(2); + ->and(substr_count($view, 'dark:focus-visible:bg-warning/10'))->toBe(2); }); it('hides the deployments section when there is nothing to show', function () { diff --git a/tests/Unit/DarkModeFocusRingTest.php b/tests/Unit/DarkModeFocusRingTest.php index 82d4517ed..6b4a601a5 100644 --- a/tests/Unit/DarkModeFocusRingTest.php +++ b/tests/Unit/DarkModeFocusRingTest.php @@ -1,11 +1,12 @@ toContain('ring-coollabs dark:ring-warning/70') + ->toContain('ring-2 ring-coollabs dark:ring-1 dark:ring-warning') ->and($v5Styles) - ->toMatch('/\.dark\s*\{[^}]*--ring:\s*color-mix\(in srgb, var\(--warning\) 70%, transparent\);/s'); + ->toMatch('/\.dark\s*\{[^}]*--ring:\s*var\(--warning\);/s') + ->toContain('ring-2 dark:ring-1 ring-ring'); });