# Design System & Theme ## Tailwind Configuration ### `tailwind.config.js` File doesn't exist. The project uses Tailwind CSS v4 with `@tailwindcss/vite` plugin for compilation. --- ## CSS Configuration ### `resources/css/app.css` ```css @import 'leaflet/dist/leaflet.css'; @import 'tailwindcss'; @import '../../vendor/livewire/flux/dist/flux.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-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --color-zinc-50: #fafafa; --color-zinc-100: #f5f5f5; --color-zinc-200: #e5e5e5; --color-zinc-300: #d4d4d4; --color-zinc-400: #a3a3a3; --color-zinc-500: #737373; --color-zinc-600: #525252; --color-zinc-700: #404040; --color-zinc-800: #262626; --color-zinc-900: #171717; --color-zinc-950: #0a0a0a; --color-accent: var(--color-neutral-800); --color-accent-content: var(--color-neutral-800); --color-accent-foreground: var(--color-white); } @layer theme { .dark { --color-accent: var(--color-white); --color-accent-content: var(--color-white); --color-accent-foreground: var(--color-neutral-800); } } @layer base { *, ::after, ::before, ::backdrop, ::file-selector-button { border-color: var(--color-gray-200, currentColor); } } [data-flux-field]:not(ui-radio, ui-checkbox) { @apply grid gap-2; } [data-flux-label] { @apply !mb-0 !leading-tight; } input:focus[data-flux-control], textarea:focus[data-flux-control], select:focus[data-flux-control] { @apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground; } ``` --- ## Color Palette ### Primary Colors - **Zinc Palette** (grays): 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 - Used for backgrounds, borders, text ### Accent Colors - **Dark Mode:** White/neutral-800 depending on context - **Light Mode:** neutral-800 - **Accent Foreground:** White (light mode), neutral-800 (dark mode) - **Accent Content:** neutral-800 (light), white (dark) ### Status Colors - **Success:** green-500, green-600 - **Warning:** amber-500, amber-400 - **Error:** red-500, red-400, red-600 - **Info:** slate-500 ### Semantic Colors (from Station Search) - **Current Price (fresh):** green-500 (#22c55e) - **Recent (24-48h):** slate-500 (#64748b) - **Stale (2-5 days):** amber-500 (#f59e0b) - **Outdated (5+ days):** red-500 (#ef4444) --- ## Typography ### Font Family - **Primary:** 'Instrument Sans' (Weights: 400, 500, 600) - **Fallback:** ui-sans-serif, system-ui, sans-serif - **Emoji:** Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji ### Font Sizes & Weights (via Flux) - **Heading (XL):** Used for page titles - **Heading (LG):** Used for section titles - **Subheading:** Used for descriptions - **Text:** Standard body text - **Label:** Form labels - **Badge:** Small text labels --- ## Spacing System Based on Tailwind default scale: - **Base Unit:** 4px (1 = 4px) - **Common Spacing:** - `gap-2`: 8px (0.5rem) - `gap-3`: 12px (0.75rem) - `gap-4`: 16px (1rem) - `gap-6`: 24px (1.5rem) - `px-4`: 16px horizontal padding - `py-3`: 12px vertical padding - `p-6`: 24px all sides padding - `p-10`: 40px all sides padding --- ## Border & Radius ### Border Colors - **Light:** `border-zinc-200` - **Dark:** `border-zinc-700` (primary), `border-stone-800` (cards), `border-neutral-800` (split layout) ### Border Radius - **Input/buttons:** Default Flux radius - **Cards:** `rounded-xl` (larger radius) - **Icons/small:** `rounded-md` --- ## Dark Mode ### Implementation - Uses `class="dark"` on `` root - Custom variant: `@custom-variant dark (&:where(.dark, .dark *))` - Flux `@fluxAppearance` directive manages theme toggle ### Dark Mode Colors - **Body BG:** `dark:bg-zinc-800` - **Header/Sidebar BG:** `dark:bg-zinc-900` - **Borders:** `dark:border-zinc-700` - **Text:** `dark:text-zinc-100` (headings), `dark:text-zinc-400` (secondary) ### Accent in Dark Mode - `--color-accent: var(--color-white)` - `--color-accent-foreground: var(--color-neutral-800)` --- ## Responsive Design ### Breakpoints (Tailwind defaults) - **sm:** 640px - **md:** 768px - **lg:** 1024px - **xl:** 1280px - **2xl:** 1536px ### Usage Patterns - `max-lg:hidden` - Hide on mobile/tablet - `lg:hidden` - Hide on desktop - `max-md:flex-col` - Stack on small screens - `sm:flex-row` - Row layout on small+ screens - `md:w-[220px]` - Fixed width on medium+ --- ## Component-Specific Theming ### Forms (Flux) - `[data-flux-field]`: grid gap-2 layout - `[data-flux-label]`: No margin-bottom, tight line-height - Focus states: ring-2 ring-accent with ring-offset ### Flux Appearance - Automatically applied via `@fluxAppearance` directive - Manages light/dark mode toggle - Integrates with browser's prefers-color-scheme ### Leaflet Map - Uses default OSM tiles - Custom marker colors: green (current), slate (recent), amber (stale), red (outdated) - Markers: 9px radius, white stroke, 2px weight, 85% fill opacity --- ## Brand Identity ### Logo - **Primary Icon:** Custom SVG (geometric design) - **Color:** Adapts to theme (black light mode, white dark mode) - **Name:** "Laravel Starter Kit" - **Contexts:** - Header/nav: `flux:brand` - Sidebar: `flux:sidebar.brand` ### Loading/Placeholder States - Pattern SVG with diagonal lines - Color: `stroke-gray-900/20` (light) or `stroke-neutral-100/20` (dark) --- ## Animations & Transitions ### Alpine.js Transitions - **Message Dismiss:** `x-show.transition.out.opacity.duration.1500ms` - **Fade effects:** opacity transitions over 1500ms ### Flux Components - Built-in animations for: - Dropdown menus - Sidebar collapse/expand - Modal opens/closes --- ## CSS Custom Properties (Tokens) ```css --font-sans: 'Instrument Sans', ... --color-zinc-50 through --color-zinc-950 --color-accent --color-accent-content --color-accent-foreground ``` --- ## Vite Build Configuration **File:** `vite.config.js` ```javascript import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; import tailwindcss from "@tailwindcss/vite"; export default defineConfig({ plugins: [ laravel({ input: ['resources/css/app.css', 'resources/js/app.js'], refresh: true, }), tailwindcss(), ], server: { cors: true, watch: { ignored: ['**/storage/framework/views/**'], }, }, }); ``` **Features:** - Tailwind CSS v4 via @tailwindcss/vite plugin - Automatic CSS/JS refresh - CORS enabled for dev server - Ignores Laravel view cache files --- ## Flux UI Theme Configuration Flux v2 is configured via: - CSS import: `@import '../../vendor/livewire/flux/dist/flux.css'` - Content sources point to Flux stubs for autocomplete - `@fluxAppearance` handles dark mode toggling - `@fluxScripts` loads JavaScript enhancements No custom Flux config file exists; uses defaults with CSS customizations.