/* ═══════════════════════════════════════════════════════════════════════════ CodingWithEase — Design Tokens This file lives in the app project (not the NuGet package). Edit these variables to customize your app's branding. Component styles in cx-components.css (NuGet) reference these tokens. ═══════════════════════════════════════════════════════════════════════════ */ /* Theme: data-cx-theme="light|dark|auto" on — set from user claims */ /* Accent: data-cx-accent="#hex" on — read via CSS attr() */ /* Requires Chromium 133+ for attr() typed values */ /* Color scheme: "auto" follows OS, "light"/"dark" forces */ :root { color-scheme: light dark; } [data-cx-theme="light"] { color-scheme: light; } [data-cx-theme="dark"] { color-scheme: dark; } :root { /* ── Brand ── */ --cx-primary: attr(data-cx-accent type(), #4f46e5); --cx-primary-hover: color-mix(in oklch, var(--cx-primary), black 15%); --cx-primary-light: light-dark( color-mix(in oklch, var(--cx-primary), white 90%), color-mix(in oklch, var(--cx-primary), black 70%) ); /* ── Semantic ── */ --cx-danger: light-dark(#dc2626, #ef4444); --cx-danger-hover: light-dark(#b91c1c, #dc2626); --cx-success: light-dark(#16a34a, #22c55e); --cx-warning: light-dark(#d97706, #f59e0b); --cx-info: light-dark(#2563eb, #60a5fa); /* ── Surfaces ── */ --cx-bg: light-dark(#ffffff, #0f172a); --cx-bg-subtle: light-dark(#f8fafc, #1e293b); --cx-bg-muted: light-dark(#f1f5f9, #1e293b); --cx-bg-hover: light-dark(#e2e8f0, #334155); --cx-bg-selected: var(--cx-primary-light); /* ── Text ── */ --cx-text: light-dark(#1e293b, #e2e8f0); --cx-text-muted: light-dark(#64748b, #94a3b8); --cx-text-on-primary: #ffffff; --cx-text-link: var(--cx-primary); /* ── Borders ── */ --cx-border: light-dark(#e2e8f0, #334155); --cx-border-focus: var(--cx-primary); /* ── Shape ── */ --cx-radius: 6px; --cx-radius-lg: 8px; /* ── Spacing ── */ --cx-gap: 0.75rem; --cx-padding: 1rem; /* ── Typography ── */ --cx-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; --cx-font-mono: 'Cascadia Code', 'Fira Code', Consolas, monospace; --cx-text-sm: 0.8125rem; --cx-text-base: 0.875rem; --cx-text-lg: 1rem; /* ── Shadows ── */ --cx-shadow-sm: light-dark(0 1px 2px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.3)); --cx-shadow: light-dark(0 1px 3px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.4)); --cx-shadow-lg: light-dark(0 4px 6px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.4)); /* ── Transitions ── */ --cx-transition: 150ms ease; } /* ── Base reset ── */ html, body { margin: 0; font-family: var(--cx-font); font-size: 14px; height: 100dvh; background: var(--cx-bg); color: var(--cx-text); }