diff --git a/.continue/skills/antfu b/.continue/skills/antfu deleted file mode 120000 index 4fc0071..0000000 --- a/.continue/skills/antfu +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/antfu \ No newline at end of file diff --git a/.continue/skills/nuxt b/.continue/skills/nuxt deleted file mode 120000 index 7bf43bb..0000000 --- a/.continue/skills/nuxt +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/nuxt \ No newline at end of file diff --git a/.continue/skills/pinia b/.continue/skills/pinia deleted file mode 120000 index b29e1ea..0000000 --- a/.continue/skills/pinia +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/pinia \ No newline at end of file diff --git a/.continue/skills/pnpm b/.continue/skills/pnpm deleted file mode 120000 index c3181c5..0000000 --- a/.continue/skills/pnpm +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/pnpm \ No newline at end of file diff --git a/.continue/skills/slidev b/.continue/skills/slidev deleted file mode 120000 index 168ad6f..0000000 --- a/.continue/skills/slidev +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/slidev \ No newline at end of file diff --git a/.continue/skills/tsdown b/.continue/skills/tsdown deleted file mode 120000 index 725cb3c..0000000 --- a/.continue/skills/tsdown +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/tsdown \ No newline at end of file diff --git a/.continue/skills/turborepo b/.continue/skills/turborepo deleted file mode 120000 index b69a7d9..0000000 --- a/.continue/skills/turborepo +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/turborepo \ No newline at end of file diff --git a/.continue/skills/unocss b/.continue/skills/unocss deleted file mode 120000 index 5087c2f..0000000 --- a/.continue/skills/unocss +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/unocss \ No newline at end of file diff --git a/.continue/skills/vite b/.continue/skills/vite deleted file mode 120000 index 1216e95..0000000 --- a/.continue/skills/vite +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/vite \ No newline at end of file diff --git a/.continue/skills/vitepress b/.continue/skills/vitepress deleted file mode 120000 index 02e0275..0000000 --- a/.continue/skills/vitepress +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/vitepress \ No newline at end of file diff --git a/.continue/skills/vitest b/.continue/skills/vitest deleted file mode 120000 index 7661536..0000000 --- a/.continue/skills/vitest +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/vitest \ No newline at end of file diff --git a/.continue/skills/vue b/.continue/skills/vue deleted file mode 120000 index 7fe99c4..0000000 --- a/.continue/skills/vue +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/vue \ No newline at end of file diff --git a/.continue/skills/vue-best-practices b/.continue/skills/vue-best-practices deleted file mode 120000 index b0f9603..0000000 --- a/.continue/skills/vue-best-practices +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/vue-best-practices \ No newline at end of file diff --git a/.continue/skills/vue-router-best-practices b/.continue/skills/vue-router-best-practices deleted file mode 120000 index 8d29235..0000000 --- a/.continue/skills/vue-router-best-practices +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/vue-router-best-practices \ No newline at end of file diff --git a/.continue/skills/vue-testing-best-practices b/.continue/skills/vue-testing-best-practices deleted file mode 120000 index d3f0d13..0000000 --- a/.continue/skills/vue-testing-best-practices +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/vue-testing-best-practices \ No newline at end of file diff --git a/.continue/skills/vueuse-functions b/.continue/skills/vueuse-functions deleted file mode 120000 index 9f7399a..0000000 --- a/.continue/skills/vueuse-functions +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/vueuse-functions \ No newline at end of file diff --git a/.continue/skills/web-design-guidelines b/.continue/skills/web-design-guidelines deleted file mode 120000 index 886b26d..0000000 --- a/.continue/skills/web-design-guidelines +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/web-design-guidelines \ No newline at end of file diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml deleted file mode 100644 index 3c53898..0000000 --- a/.github/workflows/lint.yml +++ /dev/null @@ -1,50 +0,0 @@ -name: linter - -on: - push: - branches: - - develop - - main - - master - - workos - pull_request: - branches: - - develop - - main - - master - - workos - -permissions: - contents: write - -jobs: - quality: - runs-on: ubuntu-latest - environment: Testing - steps: - - uses: actions/checkout@v6 - - - name: Setup PHP - uses: shivammathur/setup-php@v2 - with: - php-version: '8.4' - - - name: Add Flux Credentials Loaded From ENV - run: composer config http-basic.composer.fluxui.dev "${{ secrets.FLUX_USERNAME }}" "${{ secrets.FLUX_LICENSE_KEY }}" - - - name: Install Dependencies - run: | - composer install -q --no-ansi --no-interaction --no-scripts --no-progress --prefer-dist - npm install - - - name: Run Pint - run: composer lint - - # - name: Commit Changes - # uses: stefanzweifel/git-auto-commit-action@v7 - # with: - # commit_message: fix code style - # commit_options: '--no-verify' - # file_pattern: | - # **/* - # !.github/workflows/* diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml deleted file mode 100644 index 2e02fa0..0000000 --- a/.github/workflows/tests.yml +++ /dev/null @@ -1,60 +0,0 @@ -name: tests - -on: - push: - branches: - - develop - - main - - master - - workos - pull_request: - branches: - - develop - - main - - master - - workos - -jobs: - ci: - runs-on: ubuntu-latest - environment: Testing - strategy: - matrix: - php-version: ['8.3', '8.4', '8.5'] - - steps: - - name: Checkout code - uses: actions/checkout@v6 - - - name: Setup PHP - uses: shivammathur/setup-php@v2 - with: - php-version: ${{ matrix.php-version }} - tools: composer:v2 - coverage: xdebug - - - name: Setup Node - uses: actions/setup-node@v6 - with: - node-version: '22' - - - name: Install Node Dependencies - run: npm i - - - name: Add Flux Credentials Loaded From ENV - run: composer config http-basic.composer.fluxui.dev "${{ secrets.FLUX_USERNAME }}" "${{ secrets.FLUX_LICENSE_KEY }}" - - - name: Install Dependencies - run: composer install --no-interaction --prefer-dist --optimize-autoloader - - - name: Copy Environment File - run: cp .env.example .env - - - name: Generate Application Key - run: php artisan key:generate - - - name: Build Assets - run: npm run build - - - name: Run Tests - run: ./vendor/bin/pest diff --git a/.kiro/skills/antfu b/.kiro/skills/antfu deleted file mode 120000 index 4fc0071..0000000 --- a/.kiro/skills/antfu +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/antfu \ No newline at end of file diff --git a/.kiro/skills/nuxt b/.kiro/skills/nuxt deleted file mode 120000 index 7bf43bb..0000000 --- a/.kiro/skills/nuxt +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/nuxt \ No newline at end of file diff --git a/.kiro/skills/pinia b/.kiro/skills/pinia deleted file mode 120000 index b29e1ea..0000000 --- a/.kiro/skills/pinia +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/pinia \ No newline at end of file diff --git a/.kiro/skills/pnpm b/.kiro/skills/pnpm deleted file mode 120000 index c3181c5..0000000 --- a/.kiro/skills/pnpm +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/pnpm \ No newline at end of file diff --git a/.kiro/skills/slidev b/.kiro/skills/slidev deleted file mode 120000 index 168ad6f..0000000 --- a/.kiro/skills/slidev +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/slidev \ No newline at end of file diff --git a/.kiro/skills/tsdown b/.kiro/skills/tsdown deleted file mode 120000 index 725cb3c..0000000 --- a/.kiro/skills/tsdown +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/tsdown \ No newline at end of file diff --git a/.kiro/skills/turborepo b/.kiro/skills/turborepo deleted file mode 120000 index b69a7d9..0000000 --- a/.kiro/skills/turborepo +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/turborepo \ No newline at end of file diff --git a/.kiro/skills/unocss b/.kiro/skills/unocss deleted file mode 120000 index 5087c2f..0000000 --- a/.kiro/skills/unocss +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/unocss \ No newline at end of file diff --git a/.kiro/skills/vite b/.kiro/skills/vite deleted file mode 120000 index 1216e95..0000000 --- a/.kiro/skills/vite +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/vite \ No newline at end of file diff --git a/.kiro/skills/vitepress b/.kiro/skills/vitepress deleted file mode 120000 index 02e0275..0000000 --- a/.kiro/skills/vitepress +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/vitepress \ No newline at end of file diff --git a/.kiro/skills/vitest b/.kiro/skills/vitest deleted file mode 120000 index 7661536..0000000 --- a/.kiro/skills/vitest +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/vitest \ No newline at end of file diff --git a/.kiro/skills/vue b/.kiro/skills/vue deleted file mode 120000 index 7fe99c4..0000000 --- a/.kiro/skills/vue +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/vue \ No newline at end of file diff --git a/.kiro/skills/vue-best-practices b/.kiro/skills/vue-best-practices deleted file mode 120000 index b0f9603..0000000 --- a/.kiro/skills/vue-best-practices +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/vue-best-practices \ No newline at end of file diff --git a/.kiro/skills/vue-router-best-practices b/.kiro/skills/vue-router-best-practices deleted file mode 120000 index 8d29235..0000000 --- a/.kiro/skills/vue-router-best-practices +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/vue-router-best-practices \ No newline at end of file diff --git a/.kiro/skills/vue-testing-best-practices b/.kiro/skills/vue-testing-best-practices deleted file mode 120000 index d3f0d13..0000000 --- a/.kiro/skills/vue-testing-best-practices +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/vue-testing-best-practices \ No newline at end of file diff --git a/.kiro/skills/vueuse-functions b/.kiro/skills/vueuse-functions deleted file mode 120000 index 9f7399a..0000000 --- a/.kiro/skills/vueuse-functions +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/vueuse-functions \ No newline at end of file diff --git a/.kiro/skills/web-design-guidelines b/.kiro/skills/web-design-guidelines deleted file mode 120000 index 886b26d..0000000 --- a/.kiro/skills/web-design-guidelines +++ /dev/null @@ -1 +0,0 @@ -../../.agents/skills/web-design-guidelines \ No newline at end of file diff --git a/.superdesign/README.md b/.superdesign/README.md deleted file mode 100644 index 4807cf5..0000000 --- a/.superdesign/README.md +++ /dev/null @@ -1,138 +0,0 @@ -# SuperDesign Context Files for Fuel Price Application - -This directory contains comprehensive design system documentation for the Fuel Price (Laravel Starter Kit) application. - -## Generated Files - -### 1. `init/components.md` (274 lines) -**Shared UI Primitives & Components** - -Lists all reusable Blade components (7 total) with full source code: -- x-action-message: Temporary status messages -- x-app-logo: Branding component -- x-app-logo-icon: SVG logo icon -- x-auth-header: Centered auth page header -- x-auth-session-status: Session status display -- x-desktop-user-menu: User profile dropdown -- x-placeholder-pattern: Loading state pattern - -Also documents Flux v2 components used throughout the application. - -### 2. `init/layouts.md` (347 lines) -**Complete Layout Hierarchy** - -Full content of 7 layout files: -- layouts/app.blade.php: Main app wrapper -- layouts/app/sidebar.blade.php: Authenticated layout with header/sidebar -- layouts/auth.blade.php: Auth wrapper -- layouts/auth/simple.blade.php: Centered auth layout -- layouts/auth/card.blade.php: Card-based auth layout -- layouts/auth/split.blade.php: Split-screen auth layout -- partials/head.blade.php: Shared head section - -Includes usage patterns and color scheme documentation. - -### 3. `init/routes.md` (120 lines) -**Route Configuration & Summary** - -Complete files: -- routes/web.php: Public and authenticated routes -- routes/settings.php: Settings page routes - -Plus detailed route summary table covering: -- 19 total routes (web + Fortify) -- Route grouping by protection level -- Livewire component routes mapping - -### 4. `init/theme.md` (298 lines) -**Design Tokens & Configuration** - -Complete content: -- resources/css/app.css: Tailwind imports and custom theme -- Color palette: Zinc neutral scale + semantic colors -- Typography: Instrument Sans font configuration -- Spacing system: 4px base unit scale -- Dark mode implementation -- Vite build configuration -- Flux theme setup - -### 5. `init/pages.md` (291 lines) -**Page Dependency Trees** - -Full-page component documentation with dependency trees: -1. StationSearch Livewire component (public) -2. Dashboard -3. Welcome/Home page -4. Settings pages (Profile, Security, Appearance) -5. Authentication pages (Login, Register, Password Reset, Email Verification, 2FA) - -Includes data flow documentation and page transition patterns. - -### 6. `init/extractable-components.md` (386 lines) -**Reusable Component Analysis** - -16 components identified by category: -- 3 Form components (Search, Select, Loading Button) -- 6 Data Display components (Card, Stats, Legend) -- 2 Navigation components (Sidebar Nav, User Menu) -- 3 Layout components (Auth layouts) -- 2 Feedback components (Messages) -- 1 Map/Visualization component -- 2 Typography components - -Includes reusability scoring table and extraction recommendations. - -### 7. `init/design-system.md` (494 lines) -**Complete Design System** - -Comprehensive design documentation: -- Brand identity & philosophy -- Color system: Zinc palette + semantic colors -- Typography: Typeface, hierarchy, weights -- Spacing & layout: Grid system, breakpoints -- Borders & radius: Border weight, color, radius scales -- Component patterns: Forms, Buttons, Cards, Navigation -- Data visualization: Map colors, marker styles -- Animations & transitions: Page transitions, component effects -- Accessibility: Contrast, interactive elements, typography -- Dark mode: Colors, images, implementation -- Responsive behavior: Breakpoints, layout adjustments - -## Project Stack - -- **Framework:** Laravel 11 -- **UI Library:** Livewire 3 (classic components) -- **Styling:** Tailwind CSS v4 -- **UI Components:** Flux UI v2 -- **JavaScript:** Alpine.js -- **Font:** Instrument Sans (400, 500, 600 weights) -- **Map Library:** Leaflet -- **Map Tiles:** OpenStreetMap - -## Key Features - -- Dark-mode-first design with light mode support -- Responsive mobile-first architecture -- Comprehensive authentication UI (Fortify-based) -- Interactive fuel station search with Leaflet maps -- Settings/profile management -- Accessibility-focused component design - -## Color Palette - -### Primary -- Zinc neutral scale (50-950) - -### Semantic -- Success: Green-500 (#22c55e) -- Warning: Amber-500 (#f59e0b) -- Error: Red-500 (#ef4444) -- Info: Slate-500 (#64748b) - -## File Organization - -All context files are in `init/` subdirectory for SuperDesign import. - -Total: ~2,210 lines of comprehensive design documentation - -Generated: April 6, 2026 diff --git a/.superdesign/init/components.md b/.superdesign/init/components.md deleted file mode 100644 index f421f30..0000000 --- a/.superdesign/init/components.md +++ /dev/null @@ -1,274 +0,0 @@ -# Shared UI Components - -## Blade Components (Reusable) - -### 1. `x-action-message` -**Path:** `resources/views/components/action-message.blade.php` - -Displays a temporary status message that auto-hides after 2 seconds using Alpine.js. - -**Props:** -- `on`: Event name to listen for (Livewire event) - -**Features:** -- Transition animation with fade-out -- Auto-hide timeout (2000ms) -- Default text: "Saved." - -```blade -@props([ - 'on', -]) - -
merge(['class' => 'text-sm']) }} -> - {{ $slot->isEmpty() ? __('Saved.') : $slot }} -
-``` - ---- - -### 2. `x-app-logo` -**Path:** `resources/views/components/app-logo.blade.php` - -Main app branding component. Renders as `flux:brand` (header) or `flux:sidebar.brand` (sidebar variant). - -**Props:** -- `sidebar` (bool): If true, renders sidebar variant -- Inherits Flux component attributes - -**Features:** -- Dynamic logo rendering based on context (header vs sidebar) -- Uses `x-app-logo-icon` for icon -- Passes through attributes to Flux components - -```blade -@props([ - 'sidebar' => false, -]) - -@if($sidebar) - - - - - -@else - - - - - -@endif -``` - ---- - -### 3. `x-app-logo-icon` -**Path:** `resources/views/components/app-logo-icon.blade.php` - -SVG icon for the application logo. Geometric design with fills. - -**Features:** -- Scalable SVG -- Uses `currentColor` for dynamic styling -- Can be sized with Tailwind classes - -```blade - - - -``` - ---- - -### 4. `x-auth-header` -**Path:** `resources/views/components/auth-header.blade.php` - -Centered header for authentication pages with title and description. - -**Props:** -- `title`: Main heading text -- `description`: Subheading/description text - -**Features:** -- Centered layout -- Uses Flux typography components - -```blade -@props([ - 'title', - 'description', -]) - -
- {{ $title }} - {{ $description }} -
-``` - ---- - -### 5. `x-auth-session-status` -**Path:** `resources/views/components/auth-session-status.blade.php` - -Displays session status messages (typically success messages after redirect). - -**Props:** -- `status`: Status message text (if present) -- Passes through attributes - -**Features:** -- Conditional rendering (only shows if status exists) -- Green success styling - -```blade -@props([ - 'status', -]) - -@if ($status) -
merge(['class' => 'font-medium text-sm text-green-600']) }}> - {{ $status }} -
-@endif -``` - ---- - -### 6. `x-desktop-user-menu` -**Path:** `resources/views/components/desktop-user-menu.blade.php` - -User profile dropdown menu with settings and logout options. Uses Flux components. - -**Features:** -- Sidebar profile with dropdown -- Shows user avatar, name, and email -- Menu items: Settings (cog icon), Logout (arrow icon) -- Logout form with CSRF protection -- Data test attributes for testing - -```blade - - - - -
- -
- {{ auth()->user()->name }} - {{ auth()->user()->email }} -
-
- - - - {{ __('Settings') }} - -
- @csrf - - {{ __('Log out') }} - -
- - - -``` - ---- - -### 7. `x-placeholder-pattern` -**Path:** `resources/views/components/placeholder-pattern.blade.php` - -SVG placeholder pattern for skeleton/loading states. Diagonal line pattern. - -**Props:** -- `id`: Unique pattern ID (auto-generated) - -**Features:** -- Reusable SVG pattern definition -- Can be styled with Tailwind stroke classes -- Used in dashboard placeholder cards - -```blade -@props([ - 'id' => uniqid(), -]) - - - - - - - - - -``` - ---- - -## Flux UI Components Used - -Flux v2 components extensively used throughout the application: - -- **Layout:** `flux:header`, `flux:sidebar`, `flux:main`, `flux:spacer` -- **Navigation:** `flux:navbar`, `flux:navbar.item`, `flux:sidebar.nav`, `flux:sidebar.item`, `flux:sidebar.group` -- **Forms:** `flux:input`, `flux:select`, `flux:checkbox`, `flux:button` -- **Typography:** `flux:heading`, `flux:subheading`, `flux:text` -- **Dropdowns/Menus:** `flux:dropdown`, `flux:menu`, `flux:menu.item`, `flux:menu.separator` -- **UI Elements:** `flux:badge`, `flux:avatar`, `flux:brand`, `flux:profile` -- **Other:** `flux:tooltip`, `flux:separator`, `flux:link` - ---- - -## Flux Custom Icons - -Located in `resources/views/flux/icon/`: -- `layout-grid.blade.php` -- `folder-git-2.blade.php` -- `chevrons-up-down.blade.php` -- `book-open-text.blade.php` - -These extend Flux's default icon library. - ---- - -## Alpine.js Data Objects - -### `stationMap` -**Path:** `resources/js/maps/station-map.js` - -Leaflet map integration for displaying fuel stations: -- Initializes map centered on UK -- Plots colored circle markers for stations -- Color coding: green (current), slate (recent), amber (stale), red (outdated) -- Popup display with station details -- Responsive bounds fitting -- Watches for data changes via Alpine - diff --git a/.superdesign/init/design-system.md b/.superdesign/init/design-system.md deleted file mode 100644 index 2fc4a80..0000000 --- a/.superdesign/init/design-system.md +++ /dev/null @@ -1,494 +0,0 @@ -# Design System - -Comprehensive documentation of the design system, visual language, and brand identity for the Fuel Price application. - ---- - -## Brand Identity - -### App Name -"Fuel Price" (Laravel Starter Kit internally) - -### Logo -- **Style:** Geometric, modern -- **Colors:** Adapts to light/dark mode -- **Variants:** Header logo (wider), Sidebar logo (square icon) -- **Usage:** All pages in navigation - -### Design Philosophy -- Clean, minimal aesthetic -- Dark-first design (dark mode as primary) -- Accessibility-focused -- Data visualization emphasis (maps, charts) -- Utility-oriented interface - ---- - -## Color System - -### Primary Palette - Zinc (Neutral) - -Used as base colors for UI, text, and borders. - -``` -Zinc-50: #fafafa (Lightest backgrounds) -Zinc-100: #f5f5f5 (Light backgrounds) -Zinc-200: #e5e5e5 (Light borders, dividers) -Zinc-300: #d4d4d4 (Subtle borders) -Zinc-400: #a3a3a3 (Placeholder text) -Zinc-500: #737373 (Secondary text) -Zinc-600: #525252 (Body text) -Zinc-700: #404040 (Dark text) -Zinc-800: #262626 (Page backgrounds dark) -Zinc-900: #171717 (Header/sidebar backgrounds) -Zinc-950: #0a0a0a (Darkest) -``` - -### Semantic Colors - -#### Success -- **Primary:** `#22c55e` (Green-500) -- **Dark:** `#16a34a` (Green-600) -- **Light:** `#86efac` (Green-300) -- **Usage:** Success messages, positive indicators, current/fresh data - -#### Warning -- **Primary:** `#f59e0b` (Amber-500) -- **Light:** `#fbbf24` (Amber-400) -- **Usage:** Stale data, deprecation notices - -#### Error/Danger -- **Primary:** `#ef4444` (Red-500) -- **Dark:** `#dc2626` (Red-600) -- **Light:** `#fca5a5` (Red-300) -- **Usage:** Outdated data, error messages, destructive actions - -#### Info -- **Primary:** `#64748b` (Slate-500) -- **Usage:** Neutral information, recent data - -### Accent Colors - -**Light Mode:** -- Accent: `--color-neutral-800` (dark gray) -- Accent Content: `--color-neutral-800` -- Accent Foreground: `--color-white` - -**Dark Mode:** -- Accent: `--color-white` -- Accent Content: `--color-white` -- Accent Foreground: `--color-neutral-800` - -Used for: -- Primary buttons -- Active navigation items -- Focus states -- Primary CTAs - ---- - -## Typography System - -### Typeface - -**Primary Font:** Instrument Sans -- **Source:** Google Fonts (fonts.bunny.net) -- **Weights Available:** 400 (Regular), 500 (Medium), 600 (Semibold) -- **Category:** Sans-serif, Humanist -- **Use Case:** All body text, headings, UI labels - -**Fallback Stack:** -``` -'Instrument Sans', -ui-sans-serif, -system-ui, -sans-serif, -'Apple Color Emoji', -'Segoe UI Emoji', -'Segoe UI Symbol', -'Noto Color Emoji' -``` - -### Font Sizes & Hierarchy - -Via Flux components (sizes managed by Flux): - -- **flux:heading size="xl":** Page titles (largest) -- **flux:heading size="lg":** Section titles -- **flux:heading:** Standard headings -- **flux:subheading:** Secondary headings, descriptions -- **flux:text:** Body text -- **flux:label:** Form labels, captions -- **flux:badge:** Small labels, tags - -### Line Heights - -- **Tight:** Labels, badges (`leading-tight`) -- **Normal:** Body text, headings (default) -- **Relaxed:** Long-form content (when needed) - -### Weight Distribution - -- **400 (Regular):** Body text, regular content -- **500 (Medium):** Secondary headings, strong emphasis, labels -- **600 (Semibold):** Primary headings, buttons, strong emphasis - ---- - -## Spacing & Layout - -### Spacing Scale - -Based on 4px base unit: - -``` -0: 0px -0.5: 2px -1: 4px -1.5: 6px -2: 8px -2.5: 10px -3: 12px -3.5: 14px -4: 16px -5: 20px -6: 24px -7: 28px -8: 32px -9: 36px -10: 40px -11: 44px -12: 48px -... -``` - -### Common Spacing Patterns - -- **Gap between elements:** `gap-3` (12px), `gap-4` (16px), `gap-6` (24px) -- **Form field spacing:** `gap-2` (8px) for label + input -- **Card padding:** `p-4` (16px) for compact, `p-6` (24px) for default, `p-10` (40px) for large -- **Horizontal padding:** `px-4` (16px) standard -- **Vertical padding:** `py-3` (12px) standard - -### Grid System - -- Flex-based layouts (no CSS Grid for most components) -- Default gap: `gap-4` (16px) -- Settings page: 2-column on desktop (220px sidebar + flex content) -- Station results: 1-column list, single-level nesting - -### Responsive Breakpoints - -``` -Default (mobile): 0px -sm: 640px (@media max-width: 639px = mobile) -md: 768px (tablet) -lg: 1024px (desktop) -xl: 1280px (large desktop) -2xl: 1536px (extra large) -``` - -**Breakpoint Patterns:** -- `max-lg:` - Mobile and tablet -- `lg:` - Desktop and larger -- `max-md:` - Mobile only -- `md:` - Tablet and larger - ---- - -## Border & Radius - -### Border Weight - -- **Default:** 1px (all borders) -- **Emphasis:** None (single weight used) - -### Border Radius - -- **Small:** `rounded-md` (6-8px) - Icons, small buttons, badges -- **Medium:** `rounded-lg` (8-10px) - Inputs, dropdowns -- **Large:** `rounded-xl` (12-16px) - Cards, modals, large components -- **None:** `rounded-none` - Rarely used - -### Border Colors - -**Light Mode:** -- Default border: `border-zinc-200` -- Focus ring: `ring-accent` (accent color) - -**Dark Mode:** -- Default border: `border-zinc-700` -- Card/modal: `border-stone-800` or `border-neutral-800` -- Focus ring: `ring-accent` with `ring-offset-2` and `ring-offset-accent-foreground` - -### Focus States - -All interactive elements have: -- `ring-2 ring-accent` (focus ring) -- `ring-offset-2` (space between element and ring) -- `ring-offset-accent-foreground` (offset background color) - ---- - -## Component Patterns - -### Form Patterns - -All form elements follow consistent structure: -1. Label (top) -2. Input/Select/Textarea -3. Error message (bottom, conditional) -4. Helper text (optional) - -**Spacing:** `gap-2` between label and input - -**States:** -- Normal: default appearance -- Focus: ring around element -- Disabled: opacity/pointer-events disabled -- Error: red text below - -### Button Patterns - -**Variants:** -- `variant="primary"` - Primary action (accent color background) -- `variant="secondary"` - Secondary action -- `variant="danger"` - Destructive action (red) - -**States:** -- Normal: clickable -- Hover: slight opacity increase -- Disabled: `disabled` attribute via `wire:loading.attr="disabled"` -- Loading: show spinner or text change - -### Card Patterns - -Standard card styling: -- Border: `border border-zinc-200 dark:border-zinc-700` -- Radius: `rounded-xl` -- Background: white (light) / dark (dark mode) -- Padding: `p-4` to `p-10` depending on content density -- Shadow: `shadow-xs` for subtle lift (optional) - -### Navigation Patterns - -**Sidebar Navigation:** -- `flux:sidebar.nav` wrapper -- `flux:sidebar.group` for sections (with heading) -- `flux:sidebar.item` for links -- Active state: current attribute -- Icon on left, text on right - -**Navbar Navigation:** -- `flux:navbar` wrapper -- `flux:navbar.item` for links -- Icons only or icon + text -- Horizontal layout -- Tooltip support - ---- - -## Data Visualization - -### Station Search Map Colors (Leaflet) - -Classification-based color coding for fuel price data freshness: - -- **Current (< 24h):** `#22c55e` (Green-500) -- **Recent (24-48h):** `#64748b` (Slate-500) -- **Stale (2-5 days):** `#f59e0b` (Amber-500) -- **Outdated (5+ days):** `#ef4444` (Red-500) - -### Map Markers - -- **Shape:** Circle -- **Radius:** 9px -- **Stroke:** White, 2px weight -- **Fill:** Classification color -- **Opacity:** 85% (0.85) -- **Click:** Shows popup with station details - -### Data Table Patterns - -(No explicit tables in current design, but pattern would be): -- Striped rows (alternate bg) -- Hover states for interactivity -- Clear column alignment -- Sortable headers - ---- - -## Animations & Transitions - -### Page Transitions - -All navigation via `wire:navigate` (no full page reload): -- Seamless SPA-like experience -- Preserves scroll position -- No loading screen between pages - -### Component Transitions - -**Alpine.js Transitions:** -- Fade on message dismiss: `x-show.transition.out.opacity.duration.1500ms` -- Duration: 1500ms (1.5 seconds) -- Effect: Opacity fade - -**Flux Built-in:** -- Dropdown/menu opens: instant or quick fade -- Sidebar collapse: smooth width transition -- Modal appears: fade + scale (typical Flux defaults) - -### Hover & Active States - -- Links: `hover:underline` (default Flux) -- Buttons: Opacity change on hover -- Navigation items: Background highlight on hover/active -- Interactive elements: Subtle color shift - ---- - -## Accessibility - -### Color Contrast - -- Text on backgrounds meets WCAG AA standards (4.5:1 for normal text) -- Semantic colors (green/red) supplemented with icons/patterns -- No color-only indicators - -### Interactive Elements - -- Keyboard navigable (all Flux components) -- Focus indicators visible (`ring-2 ring-accent`) -- Touch-friendly sizing (minimum 44x44px recommended) -- ARIA labels where needed - -### Typography - -- Font sizes readable at standard distances -- Line height adequate for readability -- High contrast between text and background - ---- - -## Dark Mode - -### Implementation - -- **Method:** `class="dark"` on HTML root -- **Toggle:** Managed by `@fluxAppearance` directive -- **Detection:** Optional prefers-color-scheme integration - -### Dark Mode Colors - -**Text:** -- Primary: `text-zinc-100` (light gray) -- Secondary: `text-zinc-400` (medium gray) -- Disabled: `text-zinc-500` (darker gray) - -**Backgrounds:** -- Page: `bg-zinc-800` -- Header/Sidebar: `bg-zinc-900` -- Cards: `bg-stone-950` (darker variant) -- Inputs: `bg-zinc-900` - -**Borders:** -- Primary: `border-zinc-700` -- Secondary: `border-stone-800` -- Subtle: `border-neutral-800` - -**Accents:** -- Primary accent inverts: white (instead of dark gray) - -### Image/SVG Handling in Dark - -- Logo icon color inverts via `fill-current` and `text-*` classes -- Patterns use opacity: `stroke-neutral-100/20` (dark) vs `stroke-gray-900/20` (light) -- Leaflet map: Default OSM colors (already dark-friendly) - ---- - -## Responsive Behavior - -### Mobile-First Approach - -Design starts at mobile (smallest), enhances at larger breakpoints. - -### Key Breakpoints - -**Mobile (0-639px):** -- Single column layouts -- Hamburger menu (sidebar collapses) -- Stacked form fields -- Full-width cards - -**Tablet (640-1023px):** -- Narrower multi-column (if applicable) -- Touch-friendly spacing -- Condensed headers - -**Desktop (1024px+):** -- Multi-column layouts -- Horizontal navigation -- Sidebar persistent -- Full feature set visible - -### Layout Adjustments - -- Header: Hidden navbar items on mobile (`max-lg:hidden`) -- Sidebar: Becomes mobile hamburger at lg breakpoint -- Forms: Stack vertically on mobile, horizontal on desktop -- Grids: 1 column mobile, 2-3 columns desktop - ---- - -## Consistency Patterns - -### Consistent Component Usage - -- All buttons: `flux:button` (never raw `