299 lines
7.1 KiB
Markdown
299 lines
7.1 KiB
Markdown
# 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 `<html>` 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.
|
|
|