/* ============================================ RenDS — Appearance API ============================================ The formal theming contract for RenDS. 3 layers of customization: Layer 1: Global tokens (affects everything) Change --color-accent, --radius-md, --font-sans to rebrand the entire system in one go. Layer 2: Semantic overrides (affects groups) Change --color-surface-raised to affect all cards, dialogs, popovers, sheets at once. Layer 3: Component tokens (surgical) Change --ren-btn-radius to only affect buttons. Usage: 1. Import this file 2. Create a theme with [data-theme="my-theme"] 3. Override any tokens at any layer Or use presets: NOTA sobre hex literals: Este archivo CONTIENE hex hardcodeados a propósito — los temas son paletas alternativas que redefinen los semantic tokens con sus propios valores. Es el único lugar de RenDS donde literales hex son la fuente correcta (equivalente a tailwind.config.theme.colors). Componentes y base/ NUNCA deben tener hex; siempre tokens. ============================================ */ /* ═══════════════════════════════════════════════ THEME: OCEAN — Cool blue, professional ═══════════════════════════════════════════════ */ [data-theme="ocean"] { /* Layer 1: Global */ --color-accent: light-dark(#0066CC, #4DA3FF); --color-accent-hover: light-dark(#0052A3, #6BB3FF); --color-accent-active: light-dark(#003D7A, #8AC4FF); --color-accent-subtle: light-dark(#E6F0FF, #001A33); /* Layer 2: Surfaces */ --color-surface: light-dark(#F8FAFC, #0A0F1A); --color-surface-raised: light-dark(#FFFFFF, #111827); --color-surface-sunken: light-dark(#F1F5F9, #060A12); /* Layer 3: Specific overrides */ --ren-nav-bg: light-dark(#0066CC, #0A0F1A); --ren-nav-link-color: light-dark(rgba(255,255,255,0.8), rgba(255,255,255,0.7)); --ren-nav-link-active: #FFFFFF; } /* ═══════════════════════════════════════════════ THEME: FOREST — Green, organic ═══════════════════════════════════════════════ */ [data-theme="forest"] { --color-accent: light-dark(#16A34A, #4ADE80); --color-accent-hover: light-dark(#15803D, #86EFAC); --color-accent-active: light-dark(#166534, #BBF7D0); --color-accent-subtle: light-dark(#F0FDF4, #052E16); --color-on-accent: light-dark(#000000, #000000); --color-surface: light-dark(#FAFDF7, #0A120A); --color-surface-raised: light-dark(#FFFFFF, #111F11); --color-surface-sunken: light-dark(#F0F5EC, #060D06); --radius-md: 0.375rem; /* slightly less rounded */ --radius-lg: 0.625rem; --radius-xl: 0.875rem; } /* ═══════════════════════════════════════════════ THEME: SUNSET — Warm orange/amber ═══════════════════════════════════════════════ */ [data-theme="sunset"] { --color-accent: light-dark(#EA580C, #FB923C); --color-accent-hover: light-dark(#C2410C, #FDBA74); --color-accent-active: light-dark(#9A3412, #FED7AA); --color-accent-subtle: light-dark(#FFF7ED, #431407); --color-on-accent: light-dark(#000000, #000000); --color-surface: light-dark(#FFFBF5, #120E0A); --color-surface-raised: light-dark(#FFFFFF, #1C1610); --color-surface-sunken: light-dark(#FEF3E2, #0D0A06); } /* ═══════════════════════════════════════════════ THEME: ROSE — Pink/magenta, playful ═══════════════════════════════════════════════ */ [data-theme="rose"] { --color-accent: light-dark(#E11D48, #FB7185); --color-accent-hover: light-dark(#BE123C, #FDA4AF); --color-accent-active: light-dark(#9F1239, #FECDD3); --color-accent-subtle: light-dark(#FFF1F2, #4C0519); --color-surface: light-dark(#FFFBFC, #120A0C); --color-surface-raised: light-dark(#FFFFFF, #1C1012); --color-surface-sunken: light-dark(#FEF2F3, #0D0608); --radius-md: 0.75rem; /* more rounded */ --radius-lg: 1rem; --radius-xl: 1.25rem; } /* ═══════════════════════════════════════════════ THEME: SLATE — Monochrome, minimal ═══════════════════════════════════════════════ */ [data-theme="slate"] { --color-accent: light-dark(#334155, #CBD5E1); --color-accent-hover: light-dark(#1E293B, #E2E8F0); --color-accent-active: light-dark(#0F172A, #F1F5F9); --color-accent-subtle: light-dark(#F8FAFC, #0F172A); --color-on-accent: light-dark(#FFFFFF, #0F172A); --radius-md: 0.25rem; /* sharp corners */ --radius-lg: 0.375rem; --radius-xl: 0.5rem; --radius-2xl: 0.625rem; } /* ═══════════════════════════════════════════════ THEME: PURPLE — Vibrant purple, creative ═══════════════════════════════════════════════ */ [data-theme="purple"] { --color-accent: light-dark(#7C3AED, #A78BFA); --color-accent-hover: light-dark(#6D28D9, #C4B5FD); --color-accent-active: light-dark(#5B21B6, #DDD6FE); --color-accent-subtle: light-dark(#F5F3FF, #2E1065); --color-surface: light-dark(#FAFAFF, #0C0A14); --color-surface-raised: light-dark(#FFFFFF, #15121E); --color-surface-sunken: light-dark(#F3F0FF, #08060E); } /* ═══════════════════════════════════════════════ THEME: AMBER-EDITORIAL — Warm amber/cream, editorial ═══════════════════════════════════════════════ Designed for long-form reading: cream surfaces, generous radius, serif headings, amber accent. AA-verified (theme-generator.js, from #F59E0B): light on-accent 6.12:1 · dark on-accent 10.47:1 light link 6.55:1 · dark link 6.63:1 ═══════════════════════════════════════════════ */ [data-theme="amber-editorial"] { /* Layer 1: Global */ --color-accent: light-dark(#85590F, #F6A723); --color-accent-hover: light-dark(#5A3D0C, #F0B95C); --color-accent-active: light-dark(#352408, #EFCD95); --color-accent-strong: light-dark(#5A3D0C, #F0B95C); --color-accent-subtle: light-dark(#FEF6E7, #352408); --color-on-accent: light-dark(#FFFFFF, #000000); --color-focus-ring: light-dark(#85590F, #F6A723); /* Layer 2: Surfaces — warm cream in light, deep walnut in dark */ --color-surface: light-dark(#FBF8F3, #0E0D0C); --color-surface-raised: light-dark(#FFFFFF, #181716); --color-surface-sunken: light-dark(#F5EFE3, #080807); /* Editorial typography (optional override) */ --font-heading: "Playfair Display", "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Lora", "Noto Serif", Georgia, serif; /* More generous radius, editorial feel */ --radius-md: 0.625rem; --radius-lg: 0.875rem; --radius-xl: 1.125rem; /* Subtle component tuning */ --ren-card-radius: var(--radius-xl); --ren-btn-font-weight: var(--weight-semibold); } /* ═══════════════════════════════════════════════ THEME: CYBER — Neon magenta on near-black, sharp ═══════════════════════════════════════════════ Dark-dominant aesthetic: deep graphite surfaces, saturated fuchsia accent, sharp edges, mono feel. AA-verified (from #D946EF): light on-accent 5.51:1 · dark on-accent 8.46:1 light link 7.42:1 · dark link 6.21:1 ═══════════════════════════════════════════════ */ [data-theme="cyber"] { --color-accent: light-dark(#BF18D8, #D42CED); --color-accent-hover: light-dark(#9C17B0, #D862E9); --color-accent-active: light-dark(#721480, #E099EB); --color-accent-strong: light-dark(#9C17B0, #D862E9); --color-accent-subtle: light-dark(#FAF4FB, #2E0A33); --color-on-accent: light-dark(#FFFFFF, #000000); --color-focus-ring: light-dark(#BF18D8, #D42CED); /* AI token doubles as the secondary neon: cyan */ --color-ai: light-dark(#0E7490, #22D3EE); --color-ai-hover: light-dark(#0C5D78, #67E8F9); --color-ai-subtle: light-dark(#ECFEFF, #083344); --color-on-ai: light-dark(#FFFFFF, #000000); /* Graphite surfaces with a cool tint */ --color-surface: light-dark(#FAFAFB, #0B0B10); --color-surface-raised: light-dark(#FFFFFF, #12121A); --color-surface-sunken: light-dark(#F3F3F6, #050509); /* Sharper borders for a technical look */ --color-border: light-dark(#D4D4D8, #262630); --color-border-strong: light-dark(#A1A1AA, #3F3F4A); /* Sharp corners, mono headings */ --radius-md: 0.1875rem; --radius-lg: 0.25rem; --radius-xl: 0.375rem; --radius-2xl: 0.5rem; --font-heading: "Space Grotesk", "Geist", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", "Geist Mono", ui-monospace, monospace; --ren-btn-radius: var(--radius-md); --ren-card-radius: var(--radius-md); --ren-field-radius:var(--radius-md); } /* ═══════════════════════════════════════════════ THEME: MINIMAL-MONO — Pure grayscale, Geist-like ═══════════════════════════════════════════════ No saturated color. Neutral gray accent, maximum typographic emphasis. Ideal for docs/dashboards. AA-verified (from #737373): light on-accent 6.01:1 · dark on-accent 6.25:1 light link 8.59:1 · dark link 8.45:1 ═══════════════════════════════════════════════ */ [data-theme="minimal-mono"] { --color-accent: light-dark(#171717, #F5F5F5); --color-accent-hover: light-dark(#000000, #FFFFFF); --color-accent-active: light-dark(#000000, #FFFFFF); --color-accent-strong: light-dark(#171717, #FAFAFA); --color-accent-subtle: light-dark(#F5F5F5, #171717); --color-on-accent: light-dark(#FFFFFF, #000000); --color-focus-ring: light-dark(#171717, #F5F5F5); /* Desaturate status tokens to stay monochrome-ish */ --color-info: light-dark(#404040, #D4D4D4); --color-info-strong: light-dark(#262626, #E5E5E5); --color-info-subtle: light-dark(#F5F5F5, #171717); /* Pure grayscale surfaces */ --color-surface: light-dark(#FFFFFF, #0A0A0A); --color-surface-raised: light-dark(#FFFFFF, #141414); --color-surface-sunken: light-dark(#FAFAFA, #050505); --color-border: light-dark(#E5E5E5, #262626); --color-border-strong: light-dark(#D4D4D4, #404040); --color-border-interactive: light-dark(#737373, #A3A3A3); /* Sharp, Swiss feel */ --radius-sm: 0.125rem; --radius-md: 0.1875rem; --radius-lg: 0.25rem; --radius-xl: 0.375rem; --radius-2xl: 0.5rem; --font-sans: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif; --font-heading: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace; --ren-btn-font-weight: var(--weight-medium); } /* ═══════════════════════════════════════════════ DARK MODE OVERRIDE ═══════════════════════════════════════════════ [data-theme="dark"] forces dark regardless of OS ═══════════════════════════════════════════════ */ [data-theme="dark"] { color-scheme: dark; } [data-theme="light"] { color-scheme: light; } /* AAA contrast scope: normal text and solid accent pairs are >= 7:1 in either color scheme. Place after named themes so this opt-in wins. */ [data-contrast="aaa"] { /* Explicit light fallback keeps AAA deterministic in engines without complete light-dark() custom-property support. */ --color-text: #111111; --color-text-primary: var(--color-text); --color-text-secondary: #111111; --color-text-muted: #111111; --color-surface: #FFFFFF; --color-surface-raised: #FFFFFF; --color-surface-sunken: #FFFFFF; --color-accent: #111111; --color-accent-hover: #000000; --color-accent-active: #000000; --color-accent-strong: #111111; --color-on-accent: #FFFFFF; --color-text-link: var(--color-accent-strong); --color-focus-ring: var(--color-accent); } @media (prefers-color-scheme: dark) { [data-contrast="aaa"] { --color-text: #FFFFFF; --color-text-primary: #FFFFFF; --color-text-secondary: #FFFFFF; --color-text-muted: #FFFFFF; --color-surface: #000000; --color-surface-raised: #000000; --color-surface-sunken: #000000; --color-accent: #FFFFFF; --color-accent-hover: #FFFFFF; --color-accent-active: #FFFFFF; --color-accent-strong: #FFFFFF; --color-on-accent: #000000; } } /* ═══════════════════════════════════════════════ SHAPE PRESETS (combine with any color theme) ═══════════════════════════════════════════════ */ [data-shape="sharp"] { --radius-sm: 0; --radius-md: 0.125rem; --radius-lg: 0.25rem; --radius-xl: 0.375rem; --radius-2xl: 0.5rem; } [data-shape="rounded"] { --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.25rem; --radius-2xl: 1.5rem; } [data-shape="pill"] { --radius-sm: var(--radius-full); --radius-md: var(--radius-full); --radius-lg: var(--radius-full); --radius-xl: var(--radius-full); --radius-2xl: var(--radius-full); } /* ═══════════════════════════════════════════════ DENSITY PRESETS (combine with any theme) ═══════════════════════════════════════════════ */ [data-density="compact"] { --space-density-card: var(--space-4); --space-density-form: var(--space-3); --space-density-row: var(--space-2); } [data-density="comfortable"] { --space-density-card: var(--space-card-padding); --space-density-form: var(--space-form-gap); --space-density-row: var(--space-3); } [data-density="spacious"] { --space-density-card: var(--space-8); --space-density-form: var(--space-6); --space-density-row: var(--space-4); }