1.9 KiB
1.9 KiB
/* 🌓 THEME MODE:
- Default: Dark Mode (
.darkclass 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:
--radiusand derivatives (--radius-md,--radius-lg, etc.)
🔘 BUTTONS:
- Prebuilt styles:
.btn-primary-wdi,.btn-outline-wdi,.btn-ghost-wdi, etc.- Animations:
hover: translateY,focus-visibleoutlines,box-shadowelevation
- 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 basewith 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
.darkis applied to<html>or<body>to activate dark theme. - When extending utilities or themes, keep new tokens in sync with
:rootand.darkscopes. - Follow WDI UI component naming conventions (
btn-*,card-*, etc.)
────────────────────────────────────────────── */