style(ui): use neutral colors for selection checkmarks

This commit is contained in:
Andras Bacsai
2026-10-04 13:46:21 +02:00
parent b235a480b2
commit e837a4f0b4
10 changed files with 19 additions and 19 deletions
@@ -21,7 +21,7 @@
:style="`background: ${themeColor}`"></span>
Custom
</span>
<svg x-show="theme === 'custom'" class="size-3.5 text-coollabs dark:text-warning"
<svg x-show="theme === 'custom'" class="size-3.5 text-black dark:text-fg"
viewBox="0 0 12 12" fill="none" aria-hidden="true">
<path d="{{ $checkPath }}" stroke="currentColor" stroke-width="1.4"
stroke-linecap="round" stroke-linejoin="round" />
@@ -34,7 +34,7 @@
class="flex h-8 w-full items-center justify-between rounded-md px-2 text-left text-xs text-neutral-600 transition-colors hover:bg-neutral-200 hover:text-neutral-950 dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg">
<span>{{ $option['label'] }}</span>
<svg x-show="theme === '{{ $option['value'] }}'"
class="size-3.5 text-coollabs dark:text-warning" viewBox="0 0 12 12" fill="none"
class="size-3.5 text-black dark:text-fg" viewBox="0 0 12 12" fill="none"
aria-hidden="true">
<path d="{{ $checkPath }}" stroke="currentColor" stroke-width="1.4"
stroke-linecap="round" stroke-linejoin="round" />
@@ -54,7 +54,7 @@
class="flex h-8 w-full items-center justify-between rounded-md px-2 text-left text-xs text-neutral-600 transition-colors hover:bg-neutral-200 hover:text-neutral-950 dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg">
<span>{{ $option['label'] }}</span>
<svg x-show="pageWidth === '{{ $option['value'] }}'"
class="size-3.5 text-coollabs dark:text-warning" viewBox="0 0 12 12" fill="none"
class="size-3.5 text-black dark:text-fg" viewBox="0 0 12 12" fill="none"
aria-hidden="true">
<path d="{{ $checkPath }}" stroke="currentColor" stroke-width="1.4"
stroke-linecap="round" stroke-linejoin="round" />
@@ -99,7 +99,7 @@
<div class="p-3">
<div class="flex items-center justify-between gap-2">
<span class="text-sm font-semibold text-black dark:text-fg">{{ $option['label'] }}</span>
<x-reicon name="check-circle" class="size-4 text-coollabs dark:text-warning"
<x-reicon name="check-circle" class="size-4 text-black dark:text-fg"
x-show="theme === 'custom'" x-cloak />
</div>
<p class="mt-1 text-xs leading-5 text-neutral-500 dark:text-fg-dim">
@@ -129,7 +129,7 @@
<span class="text-sm font-semibold text-black dark:text-fg">
{{ $option['label'] }}
</span>
<x-reicon name="check-circle" class="size-4 text-coollabs dark:text-warning"
<x-reicon name="check-circle" class="size-4 text-black dark:text-fg"
x-show="theme === '{{ $option['value'] }}'" x-cloak />
</div>
<p class="mt-1 text-xs leading-5 text-neutral-500 dark:text-fg-dim">
@@ -172,7 +172,7 @@
<div class="p-3">
<div class="flex items-center justify-between gap-2">
<span class="text-sm font-semibold text-black dark:text-fg">{{ $option['label'] }}</span>
<x-reicon name="check-circle" class="size-4 text-coollabs dark:text-warning"
<x-reicon name="check-circle" class="size-4 text-black dark:text-fg"
x-show="pageWidth === '{{ $option['value'] }}'" x-cloak />
</div>
<p class="mt-1 text-xs leading-5 text-neutral-500 dark:text-fg-dim">{{ $option['description'] }}</p>
@@ -124,7 +124,7 @@
class="flex h-8 w-full items-center rounded-md px-2 text-left text-[12px] text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg"
x-on:click="typeFilter = option.value; close()">
<span class="flex-1" x-text="option.label"></span>
<svg x-show="typeFilter === option.value" class="size-3.5 text-warning"
<svg x-show="typeFilter === option.value" class="size-3.5 text-black dark:text-fg"
viewBox="0 0 12 12" fill="none" aria-hidden="true">
<path d="m2.5 6.25 2.1 2.1 4.9-5" stroke="currentColor" stroke-width="1.4"
stroke-linecap="round" stroke-linejoin="round" />
@@ -146,7 +146,7 @@
class="flex h-8 w-full items-center rounded-md px-2 text-left text-[12px] text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg"
x-on:click="sortBy = option.value; close()">
<span class="flex-1" x-text="option.label"></span>
<svg x-show="sortBy === option.value" class="size-3.5 text-warning"
<svg x-show="sortBy === option.value" class="size-3.5 text-black dark:text-fg"
viewBox="0 0 12 12" fill="none" aria-hidden="true">
<path d="m2.5 6.25 2.1 2.1 4.9-5" stroke="currentColor" stroke-width="1.4"
stroke-linecap="round" stroke-linejoin="round" />
@@ -104,7 +104,7 @@
</p>
</div>
<x-reicon name="check"
class="size-4 shrink-0 text-coollabs dark:text-warning" />
class="size-4 shrink-0 text-black dark:text-fg" />
</div>
@endif
@@ -66,7 +66,7 @@
class="flex h-9 w-full items-center rounded-md px-2 text-left text-[12px] text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg"
x-on:click="sortBy = option.value; close(); page = 1">
<span class="flex-1" x-text="option.label"></span>
<svg x-show="sortBy === option.value" class="size-3.5 text-warning"
<svg x-show="sortBy === option.value" class="size-3.5 text-black dark:text-fg"
viewBox="0 0 12 12" fill="none" aria-hidden="true">
<path d="m2.5 6.25 2.1 2.1 4.9-5" stroke="currentColor"
stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
@@ -35,7 +35,7 @@
:aria-selected="resourceType === option.value"
@click="resourceType = option.value; close()">
<span x-text="option.label"></span>
<x-reicon name="check-circle" class="size-3.5 text-accent"
<x-reicon name="check-circle" class="size-3.5 text-black dark:text-fg"
x-show="resourceType === option.value" />
</button>
</template>
@@ -71,7 +71,7 @@
:aria-selected="selectedCategory === ''"
@click="selectedCategory = ''; categorySearch = ''; categoryOpen = false">
<span>All categories</span>
<x-reicon name="check-circle" class="size-3.5 text-accent"
<x-reicon name="check-circle" class="size-3.5 text-black dark:text-fg"
x-show="selectedCategory === ''" />
</button>
<template
@@ -81,7 +81,7 @@
:aria-selected="selectedCategory === category"
@click="selectedCategory = category; categorySearch = ''; categoryOpen = false">
<span class="truncate" x-text="category"></span>
<x-reicon name="check-circle" class="size-3.5 text-accent"
<x-reicon name="check-circle" class="size-3.5 text-black dark:text-fg"
x-show="selectedCategory === category" />
</button>
</template>
@@ -140,7 +140,7 @@
class="flex h-9 w-full items-center rounded-md px-2 text-left text-[12px] text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg"
x-on:click="sortBy = option.value; close(); page = 1">
<span class="flex-1" x-text="option.label"></span>
<svg x-show="sortBy === option.value" class="size-3.5 text-warning"
<svg x-show="sortBy === option.value" class="size-3.5 text-black dark:text-fg"
viewBox="0 0 12 12" fill="none" aria-hidden="true">
<path d="m2.5 6.25 2.1 2.1 4.9-5" stroke="currentColor"
stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
@@ -194,7 +194,7 @@
class="flex h-8 w-full items-center rounded-md px-2 text-left text-[12px] text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg"
x-on:click="typeFilter = option.value; close()">
<span class="flex-1" x-text="option.label"></span>
<svg x-show="typeFilter === option.value" class="size-3.5 text-warning"
<svg x-show="typeFilter === option.value" class="size-3.5 text-black dark:text-fg"
viewBox="0 0 12 12" fill="none" aria-hidden="true">
<path d="m2.5 6.25 2.1 2.1 4.9-5" stroke="currentColor" stroke-width="1.4"
stroke-linecap="round" stroke-linejoin="round" />
@@ -216,7 +216,7 @@
class="flex h-8 w-full items-center rounded-md px-2 text-left text-[12px] text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg"
x-on:click="sortBy = option.value; close()">
<span class="flex-1" x-text="option.label"></span>
<svg x-show="sortBy === option.value" class="size-3.5 text-warning"
<svg x-show="sortBy === option.value" class="size-3.5 text-black dark:text-fg"
viewBox="0 0 12 12" fill="none" aria-hidden="true">
<path d="m2.5 6.25 2.1 2.1 4.9-5" stroke="currentColor" stroke-width="1.4"
stroke-linecap="round" stroke-linejoin="round" />
@@ -86,7 +86,7 @@
class="flex h-9 w-full items-center rounded-md px-2 text-left text-[12px] text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg"
x-on:click="sortBy = option.value; close(); page = 1">
<span class="flex-1" x-text="option.label"></span>
<svg x-show="sortBy === option.value" class="size-3.5 text-warning"
<svg x-show="sortBy === option.value" class="size-3.5 text-black dark:text-fg"
viewBox="0 0 12 12" fill="none" aria-hidden="true">
<path d="m2.5 6.25 2.1 2.1 4.9-5" stroke="currentColor"
stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
@@ -142,7 +142,7 @@
:class="option.functional ? 'bg-success' : 'bg-error'"></span>
<span class="min-w-0 flex-1 truncate" x-text="option.name"></span>
<x-reicon name="check-circle"
class="size-3.5 shrink-0 text-coollabs dark:text-warning"
class="size-3.5 shrink-0 text-black dark:text-fg"
x-show="option.uuid === '{{ $server->uuid }}'" />
</a>
</template>
+1 -1
View File
@@ -59,7 +59,7 @@
class="flex h-9 w-full items-center rounded-md px-2 text-left text-[12px] text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg"
x-on:click="sortBy = option.value; close(); page = 1">
<span class="flex-1" x-text="option.label"></span>
<svg x-show="sortBy === option.value" class="size-3.5 text-warning"
<svg x-show="sortBy === option.value" class="size-3.5 text-black dark:text-fg"
viewBox="0 0 12 12" fill="none" aria-hidden="true">
<path d="m2.5 6.25 2.1 2.1 4.9-5" stroke="currentColor"
stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />