superdesign

2026-04-06 20:01:46 +01:00
parent 5bc6ca720c
commit 41be8e2806
13 changed files with 3102 additions and 0 deletions
--- a/.superdesign/init/theme.md
+++ b/.superdesign/init/theme.md
@@ -0,0 +1,298 @@
+# 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.
+