2026-08-07 12:14:26 +00:00
|
|
|
@props(['themes', 'themeNames', 'themeAccents'])
|
|
|
|
|
|
|
|
|
|
<div class="relative ml-auto shrink-0" @click.outside="themeOpen = false">
|
|
|
|
|
<button type="button"
|
|
|
|
|
class="terminal-theme-trigger flex h-8 items-center gap-2 rounded-md px-2.5 text-xs font-medium text-white/70 transition-colors hover:bg-white/[0.08] hover:text-white"
|
|
|
|
|
@click="themeOpen = !themeOpen" aria-label="Choose terminal theme" :aria-expanded="themeOpen">
|
|
|
|
|
<span class="size-2 rounded-full ring-1 ring-white/20"
|
|
|
|
|
:style="{ backgroundColor: @js($themeAccents)[consoleTheme] }"></span>
|
|
|
|
|
<span x-text="@js($themeNames)[consoleTheme]"></span>
|
|
|
|
|
<svg class="size-2.5 text-white/35" viewBox="0 0 12 12" fill="none" aria-hidden="true">
|
|
|
|
|
<path d="m3.5 4.75 2.5 2.5 2.5-2.5" stroke="currentColor" stroke-width="1.25"
|
|
|
|
|
stroke-linecap="round" stroke-linejoin="round" />
|
|
|
|
|
</svg>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<div x-cloak x-show="themeOpen" x-transition.origin.top.right
|
feat(ui): WCAG contrast, neutral oklch surface system, and mobile nav overhaul
Design tokens
- Fix WCAG AA text failures: darken light muted text and lighten dark
tertiary text so 13-14px copy clears 4.5:1 on every surface.
- Rebuild the dark surface ladder in correct values (oklch compresses to
near-black below ~15%), giving visible steps: content, chrome, cards.
- Establish a 3-layer shell (deep content, lighter sidebar/topbar chrome,
lifted cards) with crisp hairline rings and a restrained card shadow.
- Unify every surface to one neutral temperature (pure gray); neutralize
the cool-tinted sidebar text and legacy surface tokens.
- Convert all color tokens to oklch (neutrals + brand).
- Unify inputs to the recessed token; fix invisible dark placeholders.
- One shared --shadow-dropdown for all menus/listboxes/command palette.
Settings sidebar
- Sticky contained-card rail with subtle scrollbar; collapsible sub-section
groups (active open by default), cross-page section links.
- Mobile: collapsible disclosure with animated open, outside/Escape dismiss,
press feedback, and reduced-motion support.
Mobile
- Consolidate the resource header (title + status + links on one row).
- Tighten settings-page vertical rhythm.
- Rebuild the main sidebar as an animated shadcn-style sheet (slide/fade,
Escape, scroll lock, in-panel close, close-on-navigate).
Fixes
- #11532: selected server invisible in the light-mode terminal toolbar.
Docs: update DESIGN.md tokens, shell layering, and temperature rules.
2026-09-07 02:35:56 +00:00
|
|
|
class="console-theme-selector absolute top-11 right-0 z-50 max-h-80 w-56 overflow-y-auto rounded-lg border border-neutral-200 bg-white p-1 shadow-[var(--shadow-dropdown)] dark:border-white/[0.1] dark:bg-[#111113]">
|
2026-08-07 12:14:26 +00:00
|
|
|
@foreach ($themes as $theme)
|
|
|
|
|
<button type="button"
|
|
|
|
|
class="flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-[11px] text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-neutral-950 dark:text-white/65 dark:hover:bg-white/[0.07] dark:hover:text-white"
|
|
|
|
|
@click="setTheme('{{ $theme['key'] }}')">
|
|
|
|
|
<span class="h-3 w-5 rounded-full border border-white/10"
|
|
|
|
|
style="background: {{ $theme['background'] }}"></span>
|
|
|
|
|
<span class="flex-1">{{ $theme['name'] }}</span>
|
2026-06-20 00:23:12 +00:00
|
|
|
<svg x-show="consoleTheme === '{{ $theme['key'] }}'" class="size-3 text-[#fde047]"
|
2026-08-07 12:14:26 +00:00
|
|
|
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" />
|
|
|
|
|
</svg>
|
|
|
|
|
</button>
|
|
|
|
|
@endforeach
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|