@import "tailwindcss"; @import "../../vendor/livewire/flux/dist/flux.css"; /** * Hub × FluxUI — Phase 1: Portal-Shell auf Hub-Design. * * Tokens leben in shared/design-tokens.css (Single Source of Truth aus Phase 0). * Hier: * 1. Tokens importieren * 2. Zinc-Skala auf Hub-Buchpapier-Familie mappen (für FluxUI-Komponenten, * die ihre Skala-Defaults aus Zinc beziehen) * 3. FluxUI-Akzent (--color-accent) auf Hub-Blau umstellen * 4. FluxUI-Komponenten via [data-flux-*]-Selektoren ans Hub-Design angleichen * (Sidebar, Navlist-Active, Primary-Buttons, Cards) * * Dokumentation: dev/frontend/hub-flux/02-PHASE-1-PORTAL-SHELL.md */ @import "./shared/design-tokens.css"; @import "./shared/hub-components.css"; @source '../views'; @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php'; @source '../../vendor/livewire/flux-pro/stubs/**/*.blade.php'; @source '../../vendor/livewire/flux/stubs/**/*.blade.php'; @custom-variant dark (&:where(.dark, .dark *)); @theme { /* Font: Inter Tight statt Instrument Sans (Token --font-sans aus design-tokens.css wird hier nochmal explizit gesetzt, weil FluxUI zuvor seinen eigenen Wert setzen würde) */ --font-sans: "Inter Tight", Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* FluxUI-Akzent (für Buttons, Focus-Rings, Active-States) auf Hub-Blau. Vorher: #3ea3dc (Starter-Kit-Türkis). */ --color-accent: var(--color-hub); --color-accent-content: var(--color-hub); --color-accent-foreground: #ffffff; /* Zinc-Skala auf warmes Buchpapier mappen. FluxUI nutzt Zinc als neutrale Skala für Sidebars, Borders, Text. Wir bridgen die ganze Skala, damit der Look automatisch auf Hub-Stil umschwenkt — ohne dass wir hunderte FluxUI-Klassen einzeln umbiegen müssen. */ --color-zinc-50: #fbfaf6; --color-zinc-100: #f6f4ef; --color-zinc-200: #e2ddd0; --color-zinc-300: #cfc8b5; --color-zinc-400: #8a918d; --color-zinc-500: #5a6360; --color-zinc-600: #3a413d; --color-zinc-700: #1a1f1c; --color-zinc-800: #243152; --color-zinc-900: #1a2540; --color-zinc-950: #0f1729; } /* Phase 5: Dark-Mode-Mapping liegt jetzt vollständig in shared/design-tokens.css (`.dark { … }`). FluxUI Appearance-Switcher setzt `class="dark"` auf , alle `--color-*`-Vars schalten automatisch um — inklusive `--color-accent`, weil das oben im @theme per `var(--color-hub)`-Verweis dynamisch ist. Der Notfall-Hack aus Phase 1 (`.dark { --color-accent: var(--color-hub) }`) ist damit gegenstandslos und entfernt. */ @layer base { *, ::after, ::before, ::backdrop, ::file-selector-button { border-color: var(--color-gray-200, currentColor); } } /* ============================================================ * FluxUI Form-Felder — Layout vom Starter-Kit übernommen * Input-Focus wird weiter unten im Kontrast-Tuning auf Hub-Blau gesetzt. * ============================================================ */ [data-flux-field]:not(ui-radio, ui-checkbox) { @apply grid gap-2; } [data-flux-label] { @apply !mb-0 !leading-tight; } /* ============================================================ * Phase 1 — Hub-Style-Overrides für FluxUI-Komponenten * ============================================================ * * Strategie: minimal-invasive Overrides via [data-flux-*]-Attribute und * der Tailwind-Klassen, die FluxUI auf seinen Komponenten setzt. Wir * ändern KEINE Vendor-Dateien, sondern legen unsere Styles mit höherer * Spezifität darüber. * * Wichtig: FluxUI nutzt für variant-spezifisches Styling KEINE * `data-variant`-Attribute, sondern direkt Tailwind-Klassen wie * `bg-[var(--color-accent)]` (für variant="primary"). Wir greifen * deshalb über diese Klassen-Selektoren. * * Bei FluxUI-Updates können sich diese Klassen ändern — Selektoren bewusst * konservativ, gut kommentiert. Visueller Smoke-Test pro Release-Bump. * ============================================================ */ /* Sidebar — warmes Buchpapier statt Zinc-Grau, klare Trennlinie */ [data-flux-sidebar] { background: var(--color-bg-elev); border-color: var(--color-bg-rule); } /* Sidebar-Section-Headings — Mockup-Konvention: 10 px, fett, gesperrt, anthrazit */ [data-flux-navlist] [data-flux-navlist-group-heading], [data-flux-navlist] [data-flux-group-heading] { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-ink-4); padding-bottom: 6px; } /* Navlist-Item — Hub-Stil: kompakter, mit Active-Strip links */ [data-flux-navlist-item] { font-size: 13px; font-weight: 500; color: var(--color-ink-2); border-radius: var(--radius-sm); transition: background 0.12s, color 0.12s; } [data-flux-navlist-item]:hover { background: var(--color-bg); color: var(--color-hub); } /* Dark Mode: --color-bg ist DUNKLER als die Sidebar (--color-bg-elev), ein Hover damit würde das Item „eindrücken" statt hervorheben. Im Dark Mode nutzen wir deshalb das dezente Hub-Soft (`#1f2a47`) — selbe Farbfamilie wie der Active-State, nur ohne Active-Strip. */ .dark [data-flux-navlist-item]:hover { background: var(--color-hub-soft); color: var(--color-hub); } /* Klick/Focus/Tap-Highlight: konsistent mit Hub-Soft (statt browser- default weißem Tap-Flash oder Flux's `bg-zinc-800/5`). Verhindert das weiße Aufblitzen beim wire:navigate-Klick im Dark Mode. */ [data-flux-navlist-item]:active, [data-flux-navlist-item]:focus { background: var(--color-hub-soft); color: var(--color-hub); outline: none; } [data-flux-navlist-item] { -webkit-tap-highlight-color: transparent; } [data-flux-navlist-item]:focus-visible { outline: 2px solid var(--color-hub); outline-offset: -2px; } [data-flux-navlist-item][data-current="true"], [data-flux-navlist-item][aria-current="page"], [data-flux-navlist-item].active { background: var(--color-hub-soft); color: var(--color-hub); font-weight: 600; position: relative; } [data-flux-navlist-item][data-current="true"]::before, [data-flux-navlist-item][aria-current="page"]::before, [data-flux-navlist-item].active::before { content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 2px; background: var(--color-hub); border-radius: 0 2px 2px 0; } /* ============================================================ * FluxUI Buttons — Hub-Stil * ============================================================ * FluxUI rendert `` als * class="… bg-[var(--color-accent)] * hover:bg-[color-mix(in_oklab,_var(--color-accent),_transparent_10%)] * shadow-[inset_0px_1px_--theme(--color-white/.2)] …" * * `--color-accent` haben wir auf `var(--color-hub)` (#1A2540) gesetzt → * Default-Background passt schon. ABER: * * 1. Der Hover ("10 % transparent") wirkt auf hellem Buchpapier * hellblau — wir wollen statt dessen Hub-2 (#243152, dunkler) wie * auf der Hub-Landing (`hover:bg-hub-2`). * 2. FluxUI's Default-Shadow (1 px Weiß-Inset) braucht auf dem warmen * Hintergrund mehr Kontrast für klare Button-Kanten. * * Wir greifen über `data-flux-button` (Attribut auf dem gerenderten *