/** * Anchor Dashboard - Design Tokens * * Single source of truth for color, spacing, typography, radius, shadow, * motion, and layering. Declared on :root so components that are reparented * to (modal, toasts) still inherit them. * * Layering: * 1. Primitives (--ad-gray-*, --ad-blue-*, ...) - raw values, never themed * 2. Semantic (--ad-surface, --ad-text-*, ...) - what components consume * 3. Theme ([data-ad-theme]) - re-declares semantic tokens only */ :root { /* ================================================================== 1. Primitives ================================================================== */ /* Gray scale */ --ad-gray-50: #f9fafb; --ad-gray-100: #f3f4f6; --ad-gray-200: #e5e7eb; --ad-gray-300: #d1d5db; --ad-gray-400: #9ca3af; --ad-gray-500: #6b7280; --ad-gray-600: #4b5563; --ad-gray-700: #374151; --ad-gray-800: #1f2937; --ad-gray-900: #111827; /* Accent / status */ --ad-blue-400: #60a5fa; --ad-blue-500: #3b82f6; --ad-blue-600: #2563eb; --ad-blue-700: #1d4ed8; --ad-red-500: #ef4444; --ad-red-600: #dc2626; --ad-red-700: #b91c1c; --ad-green-500: #10b981; --ad-green-700: #047857; /* ================================================================== 2. Semantic tokens (light) ================================================================== */ /* Surfaces */ --ad-surface: #ffffff; --ad-surface-sunken: var(--ad-gray-100); --ad-surface-hover: rgba(17, 24, 39, 0.05); --ad-surface-active: rgba(17, 24, 39, 0.08); --ad-surface-inverse: var(--ad-gray-900); --ad-backdrop: rgba(17, 24, 39, 0.45); /* Text */ --ad-text-primary: #1a1a1a; --ad-text-secondary: var(--ad-gray-600); --ad-text-muted: var(--ad-gray-500); --ad-text-inverse: var(--ad-gray-50); /* Borders */ --ad-border-color: var(--ad-gray-200); --ad-border-strong: var(--ad-gray-300); /* Accent (4.5:1 on white) */ --ad-accent: var(--ad-blue-600); --ad-accent-hover: var(--ad-blue-700); --ad-accent-soft: rgba(37, 99, 235, 0.08); --ad-accent-soft-strong: rgba(37, 99, 235, 0.14); --ad-focus-ring: rgba(37, 99, 235, 0.35); /* Status */ --ad-danger: var(--ad-red-600); --ad-danger-hover: var(--ad-red-700); --ad-danger-soft: rgba(220, 38, 38, 0.08); --ad-success: var(--ad-green-700); --ad-success-soft: rgba(4, 120, 87, 0.1); /* ================================================================== 3. Scales ================================================================== */ /* Spacing (4px grid) */ --ad-space-1: 4px; --ad-space-2: 8px; --ad-space-3: 12px; --ad-space-4: 16px; --ad-space-5: 20px; --ad-space-6: 24px; --ad-space-7: 32px; --ad-space-8: 48px; /* Radius */ --ad-radius-sm: 4px; --ad-radius-md: 8px; --ad-radius-lg: 12px; --ad-radius-xl: 16px; --ad-radius-full: 999px; /* Elevation */ --ad-shadow-1: 0 1px 3px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.06); --ad-shadow-2: 0 4px 6px -1px rgba(17, 24, 39, 0.1), 0 2px 4px -2px rgba(17, 24, 39, 0.06); --ad-shadow-3: 0 10px 15px -3px rgba(17, 24, 39, 0.12), 0 4px 6px -4px rgba(17, 24, 39, 0.05); --ad-shadow-4: 0 20px 25px -5px rgba(17, 24, 39, 0.14), 0 8px 10px -6px rgba(17, 24, 39, 0.05); /* Typography */ --ad-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ad-text-xs: 0.75rem; /* 12px */ --ad-text-sm: 0.8125rem; /* 13px */ --ad-text-base: 0.875rem; /* 14px */ --ad-text-md: 1rem; /* 16px */ --ad-text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* 17-19px fluid */ --ad-leading-tight: 1.3; --ad-leading-normal: 1.5; /* Motion */ --ad-motion-fast: 150ms; --ad-motion-base: 250ms; --ad-ease: cubic-bezier(0.2, 0, 0, 1); --ad-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Layering (kept above the WP admin bar at z-index 99999) */ --ad-z-dropdown: 100; --ad-z-tooltip: 200; --ad-z-modal: 100000; --ad-z-toast: 100010; } /* ====================================================================== Dark theme - [data-ad-theme="dark"] forces dark. - [data-ad-theme="auto"] follows the OS preference. - Only semantic tokens are re-declared; primitives never change. - The JS copies data-ad-theme onto body-appended portals (modal, toast) so they theme consistently. ====================================================================== */ [data-ad-theme="dark"] { --ad-surface: var(--ad-gray-800); --ad-surface-sunken: rgba(255, 255, 255, 0.06); --ad-surface-hover: rgba(255, 255, 255, 0.07); --ad-surface-active: rgba(255, 255, 255, 0.11); --ad-surface-inverse: var(--ad-gray-100); --ad-backdrop: rgba(0, 0, 0, 0.6); --ad-text-primary: var(--ad-gray-100); --ad-text-secondary: var(--ad-gray-300); --ad-text-muted: var(--ad-gray-400); --ad-text-inverse: var(--ad-gray-900); --ad-border-color: var(--ad-gray-700); --ad-border-strong: var(--ad-gray-600); --ad-accent: var(--ad-blue-400); --ad-accent-hover: var(--ad-blue-500); --ad-accent-soft: rgba(96, 165, 250, 0.12); --ad-accent-soft-strong: rgba(96, 165, 250, 0.2); --ad-focus-ring: rgba(96, 165, 250, 0.45); --ad-danger: #f87171; --ad-danger-hover: var(--ad-red-500); --ad-danger-soft: rgba(248, 113, 113, 0.12); --ad-success: #34d399; --ad-success-soft: rgba(52, 211, 153, 0.14); /* Settings-driven card background is a light-mode concern. */ --ad-card-background: var(--ad-surface); } @media (prefers-color-scheme: dark) { [data-ad-theme="auto"] { --ad-surface: var(--ad-gray-800); --ad-surface-sunken: rgba(255, 255, 255, 0.06); --ad-surface-hover: rgba(255, 255, 255, 0.07); --ad-surface-active: rgba(255, 255, 255, 0.11); --ad-surface-inverse: var(--ad-gray-100); --ad-backdrop: rgba(0, 0, 0, 0.6); --ad-text-primary: var(--ad-gray-100); --ad-text-secondary: var(--ad-gray-300); --ad-text-muted: var(--ad-gray-400); --ad-text-inverse: var(--ad-gray-900); --ad-border-color: var(--ad-gray-700); --ad-border-strong: var(--ad-gray-600); --ad-accent: var(--ad-blue-400); --ad-accent-hover: var(--ad-blue-500); --ad-accent-soft: rgba(96, 165, 250, 0.12); --ad-accent-soft-strong: rgba(96, 165, 250, 0.2); --ad-focus-ring: rgba(96, 165, 250, 0.45); --ad-danger: #f87171; --ad-danger-hover: var(--ad-red-500); --ad-danger-soft: rgba(248, 113, 113, 0.12); --ad-success: #34d399; --ad-success-soft: rgba(52, 211, 153, 0.14); --ad-card-background: var(--ad-surface); } }