tiennm99/coolify
1
0
Fork 0
mirror of https://github.com/tiennm99/coolify.git synced 2026-08-22 10:25:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(ui): refine focus ring thickness and warning color

Browse Source
This commit is contained in:
Andras Bacsai
2026-08-10 11:52:24 +02:00
parent f412b2bf0d
commit a84505efe8
5 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+1 -1
View File
@@ -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 {
resources/css/v5/app.css
+2 -2
View File
@@ -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,
resources/views/livewire/dashboard/active-deployments.blade.php
+2 -2
View File
@@ -70,7 +70,7 @@
<a wire:key="dashboard-active-deployment-{{ $deployment->deployment_uuid }}"
href="{{ $deployment->deployment_url }}" {{ wireNavigate() }}
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/[0.06] focus-visible:ring-inset focus-visible:ring-warning/70 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/[0.06]">
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">
<div class="min-w-0">
<p class="truncate text-[13px] font-semibold text-black dark:text-fg">
{{ $deployment->application_name }}
@@ -139,7 +139,7 @@
<a wire:key="dashboard-recent-deployment-{{ $deployment->deployment_uuid }}"
href="{{ $deployment->deployment_url }}" {{ wireNavigate() }}
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/[0.06] focus-visible:ring-inset focus-visible:ring-warning/70 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/[0.06]">
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">
<div class="min-w-0">
<p class="truncate text-[13px] font-semibold text-black dark:text-fg">
{{ $deployment->application_name }}
tests/Feature/DashboardDeploymentsTest.php
+4 -3
View File
@@ -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 () {
tests/Unit/DarkModeFocusRingTest.php
+4 -3
View File
@@ -1,11 +1,12 @@
<?php
it('uses a subtle warning yellow focus ring in dark mode', function () {
it('uses a thin warning yellow focus ring in dark mode', function () {
$appStyles = file_get_contents(dirname(__DIR__, 2).'/resources/css/app.css');
$v5Styles = file_get_contents(dirname(__DIR__, 2).'/resources/css/v5/app.css');
expect($appStyles)
->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');
});