bitstream/fuel-price
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
fuel-price/.superdesign/init/theme.md
Ovidiu U 41be8e2806
Some checks failed
linter / quality (push) Has been cancelled
Details
tests / ci (8.3) (push) Has been cancelled
Details
tests / ci (8.4) (push) Has been cancelled
Details
tests / ci (8.5) (push) Has been cancelled
Details
superdesign
2026-04-06 20:01:46 +01:00

7.1 KiB
Raw Permalink Blame History

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

@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

  • 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)

--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

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.