/** * Core Download Plugin v2 — Design Tokens * * Philosophy: Utilitarian precision (Swiss-influenced). * Strong type hierarchy, 4px spatial rhythm, hairline borders, * one restrained cobalt accent, minimal shadow — structure comes * from borders and spacing, not elevation. * * Scoping rules (do not change): * - Tokens live on .cdp-card (frontend) and .cdp-admin (admin pages), * NEVER on :root — a plugin must not leak variables into host themes. * - Dark mode applies to the card only, via data-cdp-theme="dark" or * ="auto" + prefers-color-scheme. Admin screens stay light (wp-admin * convention). * * Owner-tunable tokens (overridden by Settings → Appearance via * inline style, and per-embed where noted): * --cdp-accent accent color (validated for contrast on save) * --cdp-radius card/control corner radius * --cdp-font-body 'inherit' (theme font) or system stack */ .cdp-card, .cdp-listing, .cdp-admin { /* ------------------------------------------------------------------ * Primitives — raw scales shared by every scope (a listing only needs * the spacing, but one scope list keeps them from drifting apart) * ------------------------------------------------------------------ */ /* Neutral ramp: zinc (cool, ink-like). Referenced by semantic tokens below; components use semantic tokens only. */ --cdp-gray-0: #ffffff; --cdp-gray-50: #fafafa; --cdp-gray-100: #f4f4f5; --cdp-gray-200: #e4e4e7; --cdp-gray-300: #d4d4d8; --cdp-gray-400: #a1a1aa; --cdp-gray-500: #71717a; --cdp-gray-600: #52525b; --cdp-gray-700: #3f3f46; --cdp-gray-800: #27272a; --cdp-gray-900: #18181b; /* Accent ramp: cobalt. Deliberately not WP blue (#0073aa). */ --cdp-cobalt-300: #93b4f8; --cdp-cobalt-400: #6090f1; --cdp-cobalt-500: #3667e0; --cdp-cobalt-600: #1d4ed8; /* AA on white at text sizes (6.3:1) */ --cdp-cobalt-700: #1e40af; --cdp-cobalt-800: #1e3a8a; /* Spacing — 4px base (Swiss: tight, exact) */ --cdp-space-0: 0; --cdp-space-1: 1px; --cdp-space-2: 2px; --cdp-space-3: 3px; --cdp-space-4: 4px; --cdp-space-5: 6px; --cdp-space-6: 8px; --cdp-space-7: 12px; --cdp-space-8: 16px; --cdp-space-9: 24px; --cdp-space-10: 32px; --cdp-space-11: 48px; --cdp-space-12: 64px; /* Typography — no webfonts; a plugin ships no font files. Card body defaults to the host theme's font (inherit); Settings can pin it to the system stack. Admin always uses the system stack. */ --cdp-font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; --cdp-font-body: inherit; /* owner-tunable */ --cdp-font-display: var(--cdp-font-body); --cdp-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, Menlo, monospace; --cdp-text-xs: 0.75rem; --cdp-text-sm: 0.8125rem; --cdp-text-base: 0.9375rem; --cdp-text-md: 1.0625rem; --cdp-text-lg: 1.25rem; --cdp-text-xl: 1.5rem; --cdp-text-2xl: 1.875rem; --cdp-text-3xl: 2.25rem; --cdp-text-4xl: 3rem; --cdp-weight-normal: 400; --cdp-weight-medium: 500; --cdp-weight-semibold: 600; --cdp-weight-bold: 700; --cdp-leading-tight: 1.2; --cdp-leading-normal: 1.5; --cdp-leading-relaxed: 1.65; --cdp-tracking-tight: -0.01em; --cdp-tracking-normal: 0; --cdp-tracking-wide: 0.06em; /* all-caps labels, table headers */ /* Layout */ --cdp-radius-sm: 2px; --cdp-radius: 4px; /* owner-tunable (0–16px) */ --cdp-radius-lg: 8px; --cdp-radius-full: 9999px; --cdp-border-hairline: 1px; /* Shadows — utilitarian: borders carry structure, shadows whisper */ --cdp-shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.05); --cdp-shadow-md: 0 2px 8px rgba(24, 24, 27, 0.07); --cdp-shadow-lg: 0 8px 24px rgba(24, 24, 27, 0.10); /* Motion — quick and exact; no bounce in a precision instrument */ --cdp-duration-instant: 50ms; --cdp-duration-fast: 120ms; --cdp-duration-normal: 200ms; --cdp-duration-slow: 300ms; --cdp-ease: cubic-bezier(0.4, 0, 0.2, 1); --cdp-ease-in: cubic-bezier(0.4, 0, 1, 1); --cdp-ease-out: cubic-bezier(0, 0, 0.2, 1); /* ------------------------------------------------------------------ * Semantic tokens — light (default for card and admin) * ------------------------------------------------------------------ */ --cdp-accent: var(--cdp-cobalt-600); /* owner-tunable */ --cdp-accent-hover: var(--cdp-cobalt-700); --cdp-accent-active: var(--cdp-cobalt-800); --cdp-accent-subtle: #eef2fe; /* tint wash for selected states */ --cdp-on-accent: #ffffff; --cdp-bg: var(--cdp-gray-0); --cdp-bg-secondary: var(--cdp-gray-50); --cdp-bg-tertiary: var(--cdp-gray-100); /* inputs, wells, type badges */ --cdp-bg-inverse: var(--cdp-gray-900); --cdp-text: var(--cdp-gray-900); --cdp-text-secondary: var(--cdp-gray-600); --cdp-text-tertiary: var(--cdp-gray-400); /* disabled only: 2.6:1, under any text minimum */ --cdp-text-muted: #6b6b74; /* quiet but read: placeholders, "none yet" (5.3:1 on white) */ --cdp-text-inverse: var(--cdp-gray-50); --cdp-text-link: var(--cdp-accent); --cdp-border: var(--cdp-gray-200); --cdp-border-strong: var(--cdp-gray-300); --cdp-border-control: #85858e; /* an input's edge: 3.7:1 on white (WCAG 1.4.11 asks 3) */ --cdp-border-focus: var(--cdp-accent); --cdp-focus-ring: 0 0 0 2px var(--cdp-bg), 0 0 0 4px var(--cdp-accent); --cdp-success: #15803d; --cdp-success-subtle: #f0fdf4; --cdp-warning: #b45309; --cdp-warning-subtle: #fffbeb; --cdp-error: #b91c1c; --cdp-error-subtle: #fef2f2; --cdp-info: var(--cdp-accent); --cdp-info-subtle: var(--cdp-accent-subtle); --cdp-overlay: rgba(24, 24, 27, 0.5); } /* Admin-only additions */ .cdp-admin { --cdp-font-body: var(--cdp-font-system); /* admin never inherits theme */ --cdp-page-bg: #f0f0f1; /* wp-admin chrome gray — sit on it, don't fight it */ --cdp-max-width-content: 720px; /* settings forms, reading width */ --cdp-max-width-page: 1200px; /* analytics grid ceiling */ /* Chart tokens (hand-rolled SVG; see dataviz pass in build phase) */ --cdp-chart-series-1: var(--cdp-cobalt-600); /* downloads */ --cdp-chart-series-2: #0d9488; /* leads (teal — distinguishable, not status-green) */ --cdp-chart-grid: var(--cdp-gray-100); --cdp-chart-axis: var(--cdp-gray-400); } /* ---------------------------------------------------------------------- * Card dark mode * data-cdp-theme="dark" pins it; "auto" (default) follows the OS. * Not an inversion: backgrounds go cool near-black, text drops below * pure white, borders lighten relative to bg, shadows deepen, accent * lightens one step so white button text keeps ≥4.5:1. * -------------------------------------------------------------------- */ .cdp-card[data-cdp-theme="dark"] { --cdp-accent: var(--cdp-cobalt-500); --cdp-accent-hover: var(--cdp-cobalt-400); --cdp-accent-active: var(--cdp-cobalt-600); --cdp-accent-subtle: rgba(54, 103, 224, 0.16); --cdp-on-accent: #ffffff; --cdp-bg: #17171a; --cdp-bg-secondary: #1d1d21; --cdp-bg-tertiary: #242429; --cdp-bg-inverse: var(--cdp-gray-50); --cdp-text: #f0f0f2; --cdp-text-secondary: #a3a3ad; --cdp-text-tertiary: #64646e; --cdp-text-muted: #8b8b95; /* 5.3:1 on the card */ --cdp-text-inverse: var(--cdp-gray-900); --cdp-text-link: var(--cdp-cobalt-400); --cdp-border: #2b2b31; --cdp-border-strong: #3a3a42; --cdp-border-control: #6b6b76; /* 3.4:1 on the card */ --cdp-border-focus: var(--cdp-cobalt-400); --cdp-focus-ring: 0 0 0 2px var(--cdp-bg), 0 0 0 4px var(--cdp-cobalt-400); --cdp-success: #4ade80; --cdp-success-subtle: rgba(74, 222, 128, 0.12); --cdp-warning: #fbbf24; --cdp-warning-subtle: rgba(251, 191, 36, 0.12); --cdp-error: #f87171; --cdp-error-subtle: rgba(248, 113, 113, 0.12); --cdp-info: var(--cdp-cobalt-400); --cdp-info-subtle: rgba(96, 144, 241, 0.14); --cdp-overlay: rgba(0, 0, 0, 0.6); --cdp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --cdp-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45); --cdp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); color-scheme: dark; /* native inputs, scrollbars */ } /* "auto" follows the visitor's system -- for a card, which brings its own surface. The button-only layout sits on the page's surface instead, so it keeps the light palette unless a page asks for dark outright. */ @media (prefers-color-scheme: dark) { .cdp-card[data-cdp-theme="auto"]:not(.cdp-card--button) { --cdp-accent: var(--cdp-cobalt-500); --cdp-accent-hover: var(--cdp-cobalt-400); --cdp-accent-active: var(--cdp-cobalt-600); --cdp-accent-subtle: rgba(54, 103, 224, 0.16); --cdp-on-accent: #ffffff; --cdp-bg: #17171a; --cdp-bg-secondary: #1d1d21; --cdp-bg-tertiary: #242429; --cdp-bg-inverse: var(--cdp-gray-50); --cdp-text: #f0f0f2; --cdp-text-secondary: #a3a3ad; --cdp-text-tertiary: #64646e; --cdp-text-muted: #8b8b95; --cdp-text-inverse: var(--cdp-gray-900); --cdp-text-link: var(--cdp-cobalt-400); --cdp-border: #2b2b31; --cdp-border-strong: #3a3a42; --cdp-border-control: #6b6b76; --cdp-border-focus: var(--cdp-cobalt-400); --cdp-focus-ring: 0 0 0 2px var(--cdp-bg), 0 0 0 4px var(--cdp-cobalt-400); --cdp-success: #4ade80; --cdp-success-subtle: rgba(74, 222, 128, 0.12); --cdp-warning: #fbbf24; --cdp-warning-subtle: rgba(251, 191, 36, 0.12); --cdp-error: #f87171; --cdp-error-subtle: rgba(248, 113, 113, 0.12); --cdp-info: var(--cdp-cobalt-400); --cdp-info-subtle: rgba(96, 144, 241, 0.14); --cdp-overlay: rgba(0, 0, 0, 0.6); --cdp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --cdp-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45); --cdp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); color-scheme: dark; } } /* ---------------------------------------------------------------------- * Breakpoint reference (CSS vars cannot drive @media; keep in sync) * * Card (container queries — the card answers to its column, not the * viewport; it must work in sidebars and builder columns): * narrow < 480px file meta stacks under name; form fields stack * full >= 480px two-column form row, inline file meta * * Admin (viewport): * 782px WP admin breakpoint — tables drop tertiary columns below * 1024px analytics tiles 4 -> 2 * 640px analytics tiles 2 -> 1 * -------------------------------------------------------------------- */