d91d2fa35d
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.
36 lines
1.7 KiB
PHP
36 lines
1.7 KiB
PHP
@props(['currentStep' => 1, 'totalSteps' => 3])
|
|
|
|
<div class="mx-auto mb-6 w-full max-w-3xl">
|
|
<div
|
|
class="grid grid-cols-3 overflow-hidden rounded-[10px] border border-neutral-200 bg-white dark:border-white/[0.08] dark:bg-white/[0.05]">
|
|
@for ($i = 1; $i <= $totalSteps; $i++)
|
|
<div @class([
|
|
'flex min-h-10 items-center justify-center gap-2 border-r border-neutral-200 px-3 text-[11px] font-medium last:border-r-0 dark:border-white/[0.08]',
|
|
'bg-coollabs/[0.07] text-coollabs dark:bg-warning/[0.09] dark:text-warning' => $i === $currentStep,
|
|
'text-neutral-500 dark:text-fg-dim' => $i !== $currentStep,
|
|
])>
|
|
<span @class([
|
|
'flex size-5 items-center justify-center rounded-full border text-[10px] font-semibold',
|
|
'border-coollabs/25 bg-coollabs/10 dark:border-warning/25 dark:bg-warning/15' => $i === $currentStep,
|
|
'border-emerald-500/25 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400' => $i < $currentStep,
|
|
'border-neutral-200 dark:border-white/[0.1]' => $i > $currentStep,
|
|
])>
|
|
@if ($i < $currentStep)
|
|
<x-reicon name="check-circle" class="size-3" />
|
|
@else
|
|
{{ $i }}
|
|
@endif
|
|
</span>
|
|
<span class="hidden sm:inline">
|
|
@if ($i === 1)
|
|
Server
|
|
@elseif ($i === 2)
|
|
Connection
|
|
@else
|
|
Complete
|
|
@endif
|
|
</span>
|
|
</div>
|
|
@endfor
|
|
</div>
|
|
</div>
|