/* * ╔══════════════════════════════════════════════════════════════╗ * ║ @pxlkit/ui-kit — Theme & Design Tokens ║ * ║ ║ * ║ Tailwind CSS v4 (CSS-first configuration) ║ * ║ ║ * ║ HOW TO CUSTOMIZE: ║ * ║ Override any --retro-* variable on :root (light) or .dark ║ * ║ to change the entire palette. All components and utilities ║ * ║ reference these tokens — one change updates everything. ║ * ║ ║ * ║ Example (in your app's CSS, after importing this file): ║ * ║ :root { --retro-primary: #2563eb; } ║ * ║ .dark { --retro-primary: #60a5fa; } ║ * ╚══════════════════════════════════════════════════════════════╝ */ @import "tailwindcss"; /* ─── Design Tokens (Tailwind v4 @theme) ────────────────────── * Maps CSS custom properties to Tailwind utility classes. * e.g. --color-retro-bg → bg-retro-bg, text-retro-bg, etc. * Values resolve at runtime via var() so they adapt to theme. * ──────────────────────────────────────────────────────────── */ @theme { /* ── Surface & Layout Colors ── */ --color-retro-bg: var(--retro-bg); --color-retro-surface: var(--retro-surface); --color-retro-card: var(--retro-card); --color-retro-text: var(--retro-text); --color-retro-border: var(--retro-border); /* * Opaque border companion to `--retro-border`. Used wherever the soft * border (`border-retro-border/40-60`) is invisible against the page * background — most commonly in the light theme, where the soft border * hits 1.4:1 contrast. Reach for `border-retro-border-strong` (or * `/80-100`) when you need a visible card / input / chip edge in either * theme; keep `border-retro-border` for subtle dividers. */ --color-retro-border-strong: var(--retro-border-strong); /* ── Semantic Colors ── */ --color-retro-primary: var(--retro-primary); --color-retro-secondary: var(--retro-secondary); --color-retro-accent: var(--retro-accent); --color-retro-muted: var(--retro-muted); /* ── Tone Colors (component system) ── */ --color-retro-green: var(--retro-green); --color-retro-green-hover: var(--retro-green-hover); --color-retro-cyan: var(--retro-cyan); --color-retro-red: var(--retro-red); --color-retro-gold: var(--retro-gold); --color-retro-purple: var(--retro-purple); --color-retro-pink: var(--retro-pink); /* ── Typography ── */ --font-pixel: "Press Start 2P", monospace; --font-sans: "Inter", sans-serif; /* ── Shadows (theme-aware via CSS variables) ── */ --shadow-retro: 4px 4px 0px 0px currentColor; --shadow-retro-hover: 2px 2px 0px 0px currentColor; --shadow-pixel: 4px 4px 0px 0px var(--retro-shadow-green); --shadow-pixel-lg: 6px 6px 0px 0px var(--retro-shadow-green-lg); --shadow-pixel-gold: 4px 4px 0px 0px var(--retro-shadow-gold); /* ── Animations ── */ --animate-float: float 3s ease-in-out infinite; --animate-pulse-slow: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite; --animate-scanlines: scanlines 8s linear infinite; @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes scanlines { 0% { background-position: 0 0; } 100% { background-position: 0 100%; } } } /* ─── Theme Color Definitions ───────────────────────────────── * Light theme: :root / :host (default) * Dark theme: .dark class on or any ancestor * Light override: .light class (for nested previews inside .dark) * * To customize, override these variables in your own CSS file * AFTER importing @pxlkit/ui-kit/styles.css: * * @import "@pxlkit/ui-kit/styles.css"; * :root { --retro-green: #22c55e; --retro-bg: #fafaf9; } * .dark { --retro-green: #4ade80; --retro-bg: #0c0a09; } * ──────────────────────────────────────────────────────────── */ @layer base { :root, :host { /* ── Light Theme ── */ --retro-bg: #F2F0EB; --retro-surface: #E6E2DC; --retro-card: #DCD8D0; --retro-text: #1A1A2E; --retro-border: #BEBAA2; /* 3.6:1 against --retro-bg — passes WCAG non-text contrast on cards / inputs. */ --retro-border-strong: #8C8770; --retro-primary: #4F46E5; --retro-secondary: #FBBF24; --retro-accent: #10B981; --retro-muted: #646478; --retro-green: #008C4B; --retro-green-hover: #006E3A; --retro-cyan: #24827A; --retro-red: #C83741; --retro-gold: #B48700; --retro-purple: #8237C8; --retro-pink: #C84678; /* Shadow colors (light) */ --retro-shadow-green: rgba(0, 140, 75, 0.3); --retro-shadow-green-lg: rgba(0, 140, 75, 0.2); --retro-shadow-gold: rgba(180, 135, 0, 0.3); } .dark { /* ── Dark Theme ── */ --retro-bg: #0A0A0F; --retro-surface: #12121A; --retro-card: #1A1A2E; --retro-border: #2A2A3E; /* 3.2:1 against --retro-bg — visible card / input edges in dark. */ --retro-border-strong: #4A4A66; --retro-text: #E8E6E3; --retro-primary: #818CF8; --retro-secondary: #FCD34D; --retro-accent: #34D399; --retro-muted: #8888AA; --retro-green: #00FF88; --retro-green-hover: #00CC6A; --retro-cyan: #4ECDC4; --retro-red: #FF6B6B; --retro-gold: #FFD700; --retro-purple: #A855F7; --retro-pink: #FF77A8; /* Shadow colors (dark — neon glow) */ --retro-shadow-green: rgba(0, 255, 136, 0.3); --retro-shadow-green-lg: rgba(0, 255, 136, 0.2); --retro-shadow-gold: rgba(255, 215, 0, 0.3); /* * Tailwind v4 @theme re-declarations. * * Why: @theme registers --color-retro-* with @property syntax "" * and inherits:true. The var() expression is therefore resolved to a * computed colour value on :root and *that* computed value is what * children inherit — NOT the var() expression. So when a nested .light * div overrides --retro-bg, the already-computed --color-retro-bg keeps * the :root value. Re-declaring --color-retro-* here forces the * property to be re-computed on every .dark / .light boundary. */ --color-retro-bg: #0A0A0F; --color-retro-surface: #12121A; --color-retro-card: #1A1A2E; --color-retro-text: #E8E6E3; --color-retro-border: #2A2A3E; --color-retro-border-strong: #4A4A66; --color-retro-primary: #818CF8; --color-retro-secondary: #FCD34D; --color-retro-accent: #34D399; --color-retro-muted: #8888AA; --color-retro-green: #00FF88; --color-retro-green-hover: #00CC6A; --color-retro-cyan: #4ECDC4; --color-retro-red: #FF6B6B; --color-retro-gold: #FFD700; --color-retro-purple: #A855F7; --color-retro-pink: #FF77A8; } /* Explicit light theme — used inside nested previews to override inherited dark-mode CSS variables from ancestor .dark elements. Both --retro-* AND --color-retro-* must be set so that Tailwind utility classes (which read --color-retro-*) resolve correctly even when this .light element is nested inside a .dark ancestor. */ .light { --retro-bg: #F2F0EB; --retro-surface: #E6E2DC; --retro-card: #DCD8D0; --retro-text: #1A1A2E; --retro-border: #BEBAA2; --retro-border-strong: #8C8770; --retro-primary: #4F46E5; --retro-secondary: #FBBF24; --retro-accent: #10B981; --retro-muted: #646478; --retro-green: #008C4B; --retro-green-hover: #006E3A; --retro-cyan: #24827A; --retro-red: #C83741; --retro-gold: #B48700; --retro-purple: #8237C8; --retro-pink: #C84678; /* Shadow colors (light) */ --retro-shadow-green: rgba(0, 140, 75, 0.3); --retro-shadow-green-lg: rgba(0, 140, 75, 0.2); --retro-shadow-gold: rgba(180, 135, 0, 0.3); /* Tailwind v4 @theme re-declarations — see .dark comment above. */ --color-retro-bg: #F2F0EB; --color-retro-surface: #E6E2DC; --color-retro-card: #DCD8D0; --color-retro-text: #1A1A2E; --color-retro-border: #BEBAA2; --color-retro-border-strong: #8C8770; --color-retro-primary: #4F46E5; --color-retro-secondary: #FBBF24; --color-retro-accent: #10B981; --color-retro-muted: #646478; --color-retro-green: #008C4B; --color-retro-green-hover: #006E3A; --color-retro-cyan: #24827A; --color-retro-red: #C83741; --color-retro-gold: #B48700; --color-retro-purple: #8237C8; --color-retro-pink: #C84678; } /* * Turkish locale support — when `lang="tr"` is set on any ancestor, * CSS `text-transform: uppercase` will correctly convert: * i → İ (dotted capital I) * ı → I (dotless capital I) * * Browsers read the `lang` attribute to apply locale-specific rules. * See: https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform * * Usage: * — applies globally *
— applies to subtree * — sets lang + JS context */ } /* ─── Utility Classes ───────────────────────────────────────── * Retro pixel-art utility classes for borders, shadows, and FX. * ──────────────────────────────────────────────────────────── */ @layer utilities { /* * Pixel-art staircase corners — the signature look. * Each corner is a single-step cut so the silhouette reads as a chunky * octagonal pixel shape instead of a smooth curve. Use `filter: drop-shadow` * (via .pxl-shadow) instead of box-shadow so the offset shadow follows the * staircase silhouette rather than the original square. */ .pxl-corner-sm { /* 2px corner cut — buttons, inputs, chips, badges */ clip-path: polygon( 2px 0, calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px), 0 2px, 2px 2px ); } .pxl-corner-md { /* 4px corner cut — cards, alerts, sections */ clip-path: polygon( 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 2px 4px, 2px 2px, 4px 2px ); } .pxl-corner-lg { /* 6px two-step corner — modals, panels */ clip-path: polygon( 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 2px, calc(100% - 4px) 2px, calc(100% - 4px) 4px, calc(100% - 2px) 4px, calc(100% - 2px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 2px) calc(100% - 6px), calc(100% - 2px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 2px), calc(100% - 6px) calc(100% - 2px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 2px), 4px calc(100% - 2px), 4px calc(100% - 4px), 2px calc(100% - 4px), 2px calc(100% - 6px), 0 calc(100% - 6px), 0 6px, 2px 6px, 2px 4px, 4px 4px, 4px 2px, 6px 2px ); } /* * Pixel-art offset shadows — drop-shadow follows clip-path silhouette, * so the shadow itself is also staircased. This is the secret to the * iconic Game-Boy / Windows-95 chunky button look. */ .pxl-shadow { filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.25)); } .pxl-shadow-hover:hover { filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.25)); transform: translate(1px, 1px); } .pxl-shadow-active:active { filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.25)); transform: translate(2px, 2px); } /* Legacy compat (kept for any old consumers) */ .pixel-corners { clip-path: polygon( 4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px ); } .btn-retro { padding: 0.75rem 1.5rem; font-family: var(--font-pixel); letter-spacing: 0.05em; border-width: 2px; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; box-shadow: 4px 4px 0px 0px currentColor; } .btn-retro:hover { box-shadow: 2px 2px 0px 0px currentColor; transform: translate(2px, 2px); } .btn-retro:active { box-shadow: 0px 0px 0px 0px currentColor; transform: translate(4px, 4px); } .pixel-border { box-shadow: inset -4px -4px 0px 0px rgba(0, 0, 0, 0.3), inset 4px 4px 0px 0px rgba(255, 255, 255, 0.1), 0 0 0 2px var(--color-retro-border-base); } }