49 lines
1.9 KiB
Markdown
49 lines
1.9 KiB
Markdown
|
/*
|
|||
|
|
🌓 THEME MODE:
|
|||
|
|
- Default: Dark Mode (`.dark` class toggles light/dark mode)
|
|||
|
|
- Uses CSS custom properties (`--variable`) for theme tokens
|
|||
|
|
|
|||
|
|
🖋 FONT STACK:
|
|||
|
|
- Primary: Manrope
|
|||
|
|
- Fallbacks: Inter, Outfit, system-ui, sans-serif
|
|||
|
|
- Loaded via Google Fonts: 200–800 weight range
|
|||
|
|
|
|||
|
|
🌈 COLOR SYSTEM:
|
|||
|
|
- Primary Accent: #E5195E (used in brand CTAs and highlights)
|
|||
|
|
- Base Dark: #0E0E0E (background for body and containers)
|
|||
|
|
- Text: #FFFFFF and rgba variants for secondary text
|
|||
|
|
- Uses OKLCH for extended color precision (for charts, contrast, tones)
|
|||
|
|
|
|||
|
|
🧊 GLASSMORPHISM:
|
|||
|
|
- Glass panels use: `rgba(255, 255, 255, 0.05)` + `backdrop-filter: blur(12px)`
|
|||
|
|
- Border: 1px solid rgba(255, 255, 255, 0.1)
|
|||
|
|
- Rounded corners: `--radius` and derivatives (`--radius-md`, `--radius-lg`, etc.)
|
|||
|
|
|
|||
|
|
🔘 BUTTONS:
|
|||
|
|
- Prebuilt styles:
|
|||
|
|
- `.btn-primary-wdi`, `.btn-outline-wdi`, `.btn-ghost-wdi`, etc.
|
|||
|
|
- Animations: `hover: translateY`, `focus-visible` outlines, `box-shadow` elevation
|
|||
|
|
- Size variants: `.btn-sm`, `.btn-lg`, `.btn-xl`
|
|||
|
|
|
|||
|
|
⚙️ UTILITIES:
|
|||
|
|
- Animations: `scroll`, `marquee`, `shimmer`, `rotate`, `float`, `gradientMove`
|
|||
|
|
- Elevation system: `.btn-elevation` (lift on hover)
|
|||
|
|
- Scrollbar hide: `.scrollbar-hide`
|
|||
|
|
|
|||
|
|
📐 TYPOGRAPHY:
|
|||
|
|
- Heading sizes: h1–h4 set via `@layer base` with responsive scaling
|
|||
|
|
- Body font size driven by `--font-size` (default: 14px)
|
|||
|
|
- All text components inherit styles unless overridden with Tailwind’s `text-*`
|
|||
|
|
|
|||
|
|
🧩 STRUCTURE:
|
|||
|
|
- Modular with `@layer base`, `@layer utilities`, and `@theme inline`
|
|||
|
|
- Compatible with Tailwind utility merging
|
|||
|
|
|
|||
|
|
⚠️ NOTES:
|
|||
|
|
- Ensure class `.dark` is applied to `<html>` or `<body>` to activate dark theme.
|
|||
|
|
- When extending utilities or themes, keep new tokens in sync with `:root` and `.dark` scopes.
|
|||
|
|
- Follow WDI UI component naming conventions (`btn-*`, `card-*`, etc.)
|
|||
|
|
|
|||
|
|
──────────────────────────────────────────────
|
|||
|
|
*/
|