/** * Webtron Docs — Design Tokens * * Single source of truth for colors, typography, spacing, shadows, * radii, transitions, and layout dimensions. Dark-mode tokens are * scoped to [data-theme="dark"] on and to the * prefers-color-scheme media query for system-preference support. * * @package WebtronDocs * @since 3.0.0 */ /* ========================================================================== Light theme (default) ========================================================================== */ :root { /* ---- Brand / accent -------------------------------------------------- */ --docs-primary: #2372ce; --docs-primary-hover: #1d5fb3; --docs-primary-light: #e8f1fb; --docs-primary-muted: rgba(35, 114, 206, 0.12); --docs-success: #16a34a; --docs-warning: #d97706; --docs-danger: #dc2626; /* ---- Text ------------------------------------------------------------ */ --docs-text: #1a1a1a; --docs-text-secondary: #3f3f46; --docs-text-muted: #6b7280; --docs-heading: #111111; --docs-link: var(--docs-primary); --docs-link-hover: var(--docs-primary-hover); /* ---- Backgrounds ----------------------------------------------------- */ --docs-bg: #ffffff; --docs-bg-subtle: #f8f9fa; --docs-bg-muted: #f1f3f5; --docs-bg-code: #1e293b; /* ---- Borders --------------------------------------------------------- */ --docs-border: #e5e7eb; --docs-border-subtle: #f0f0f0; /* ---- Sidebar --------------------------------------------------------- */ --docs-sidebar-bg: var(--docs-bg-subtle); --docs-sidebar-border: var(--docs-border); --docs-sidebar-link: var(--docs-text-secondary); --docs-sidebar-link-hover: var(--docs-text); --docs-sidebar-link-active: var(--docs-primary); --docs-sidebar-active-bg: var(--docs-primary-muted); --docs-sidebar-active-bar: var(--docs-primary); --docs-sidebar-section-bg: var(--docs-bg-muted); --docs-sidebar-tree-line: var(--docs-border-subtle); /* ---- TOC ------------------------------------------------------------- */ --docs-toc-bg: var(--docs-bg-subtle); --docs-toc-border: var(--docs-border); --docs-toc-link: var(--docs-text-muted); --docs-toc-link-hover: var(--docs-text-secondary); --docs-toc-link-active: var(--docs-primary); --docs-toc-indicator: var(--docs-primary); /* ---- Cards ----------------------------------------------------------- */ --docs-card-bg: var(--docs-bg); --docs-card-border: var(--docs-border); --docs-card-hover-border:var(--docs-primary); --docs-card-shadow: var(--shadow-sm); --docs-card-hover-shadow:var(--shadow-md); /* ---- Page nav (prev / next) ------------------------------------------ */ --docs-pagenav-bg: var(--docs-bg); --docs-pagenav-border: var(--docs-border); --docs-pagenav-label: var(--docs-text-muted); --docs-pagenav-title: var(--docs-text); --docs-pagenav-hover-bg: var(--docs-bg-subtle); /* ---- Breadcrumbs ----------------------------------------------------- */ --docs-crumb-link: var(--docs-text-muted); --docs-crumb-link-hover: var(--docs-text-secondary); --docs-crumb-current: var(--docs-text); --docs-crumb-separator: var(--docs-text-muted); /* ---- Tooltips -------------------------------------------------------- */ --docs-tooltip-bg: #1e293b; --docs-tooltip-color: #f9fafb; /* ---- Focus ring ------------------------------------------------------ */ --docs-focus-ring: rgba(35, 114, 206, 0.45); /* ---- Surfaces (generic aliases for components) ----------------------- */ --docs-text-primary: var(--docs-text); --docs-text-tertiary: #9ca3af; --docs-surface: var(--docs-bg); --docs-surface-hover: var(--docs-bg-subtle); --docs-primary-tint: var(--docs-primary-light); --docs-border-strong: #d1d5db; /* ---- Action bar ------------------------------------------------------ */ --docs-action-bg: var(--docs-bg); --docs-action-bg-hover: var(--docs-bg-subtle); --docs-action-text: var(--docs-text-secondary); --docs-action-text-hover:var(--docs-text); /* ---- Typography ------------------------------------------------------ */ --docs-font-sans: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; --docs-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Fluid type scale (min at 320 px → max at 1280 px) */ --docs-text-xs: clamp(0.6875rem, 0.65rem + 0.125vw, 0.75rem); /* 11–12 */ --docs-text-sm: clamp(0.8125rem, 0.78rem + 0.1vw, 0.875rem); /* 13–14 */ --docs-text-base: clamp(0.9375rem, 0.9rem + 0.12vw, 1rem); /* 15–16 */ --docs-text-lg: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem); /* 17–19 */ --docs-text-xl: clamp(1.25rem, 1.15rem + 0.3vw, 1.5rem); /* 20–24 */ --docs-text-2xl: clamp(1.5rem, 1.35rem + 0.5vw, 1.875rem); /* 24–30 */ --docs-text-3xl: clamp(1.875rem, 1.65rem + 0.7vw, 2.25rem); /* 30–36 */ --docs-text-4xl: clamp(2.25rem, 1.95rem + 0.9vw, 3rem); /* 36–48 */ --docs-leading-tight: 1.25; --docs-leading-snug: 1.375; --docs-leading-normal: 1.6; --docs-leading-relaxed: 1.75; --docs-tracking-tight: -0.015em; --docs-tracking-normal: 0; --docs-tracking-wide: 0.025em; /* ---- Spacing scale --------------------------------------------------- */ --space-0: 0px; --space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ---- Border radii ---------------------------------------------------- */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px; /* ---- Shadows --------------------------------------------------------- */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04); /* ---- Transitions ----------------------------------------------------- */ --duration-fast: 100ms; --duration-normal: 200ms; --duration-slow: 300ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); /* ---- Z-index scale --------------------------------------------------- */ --z-sidebar: 100; --z-toc: 100; --z-sticky: 500; --z-mobile-bar: 500; --z-overlay: 999; --z-backdrop: 999; --z-drawer: 1000; --z-modal: 1100; --z-tooltip: 1200; /* ---- Layout ---------------------------------------------------------- F3b/F3d (2026-06-02): full-viewport model. --layout-max is now a HIGH safety cap (effectively full-width at common resolutions; only bites past ~2400px) instead of a 1600px centred box. Side columns widened a touch; content fills the middle and the PROSE measure (--content-max, used on .docs-article, left-aligned) keeps body text readable while wide tables/code/images use the full column. */ --header-height: 64px; /* override if header is taller */ --sidebar-width: 272px; --sidebar-collapsed: 0px; --toc-width: 240px; --content-max: 80ch; /* prose readability (left-aligned in a wide column) */ --layout-max: 2400px; /* high safety cap; full-width below this */ --layout-gap: var(--space-10); /* 40px between columns */ --layout-padding: var(--space-10); /* 40px viewport edge gutter */ } /* ---- Admin-bar offset -------------------------------------------------- */ .admin-bar { --header-height: 96px; /* 64 px header + 32 px admin bar */ } /* ========================================================================== Dark theme ========================================================================== */ [data-theme="dark"] { color-scheme: dark; /* ---- Brand / accent -------------------------------------------------- */ --docs-primary: #5b9ee6; --docs-primary-hover: #7eb3ee; --docs-primary-light: rgba(91, 158, 230, 0.15); --docs-primary-muted: rgba(91, 158, 230, 0.12); --docs-success: #4ade80; --docs-warning: #fbbf24; --docs-danger: #f87171; /* ---- Text ------------------------------------------------------------ */ --docs-text: #e4e4e7; --docs-text-secondary: #a1a1aa; --docs-text-muted: #71717a; --docs-heading: #fafafa; --docs-link: var(--docs-primary); --docs-link-hover: var(--docs-primary-hover); /* ---- Backgrounds ----------------------------------------------------- */ --docs-bg: #18181b; --docs-bg-subtle: #1f1f23; --docs-bg-muted: #27272a; --docs-bg-code: #0f0f12; /* ---- Borders --------------------------------------------------------- */ --docs-border: #3f3f46; --docs-border-subtle: #2e2e33; /* ---- Sidebar --------------------------------------------------------- */ --docs-sidebar-bg: var(--docs-bg-subtle); --docs-sidebar-border: var(--docs-border); --docs-sidebar-link: var(--docs-text-secondary); --docs-sidebar-link-hover: var(--docs-text); --docs-sidebar-link-active: var(--docs-primary); --docs-sidebar-active-bg: var(--docs-primary-muted); --docs-sidebar-active-bar: var(--docs-primary); --docs-sidebar-section-bg: var(--docs-bg-muted); --docs-sidebar-tree-line: var(--docs-border-subtle); /* ---- TOC ------------------------------------------------------------- */ --docs-toc-bg: var(--docs-bg-subtle); --docs-toc-border: var(--docs-border); --docs-toc-link: var(--docs-text-muted); --docs-toc-link-hover: var(--docs-text-secondary); --docs-toc-link-active: var(--docs-primary); --docs-toc-indicator: var(--docs-primary); /* ---- Cards ----------------------------------------------------------- */ --docs-card-bg: var(--docs-bg-subtle); --docs-card-border: var(--docs-border); --docs-card-hover-border: var(--docs-primary); /* ---- Page nav -------------------------------------------------------- */ --docs-pagenav-bg: var(--docs-bg-subtle); --docs-pagenav-border: var(--docs-border); --docs-pagenav-label: var(--docs-text-muted); --docs-pagenav-title: var(--docs-text); --docs-pagenav-hover-bg: var(--docs-bg-muted); /* ---- Breadcrumbs ----------------------------------------------------- */ --docs-crumb-link: var(--docs-text-muted); --docs-crumb-link-hover: var(--docs-text-secondary); --docs-crumb-current: var(--docs-text); /* ---- Tooltips -------------------------------------------------------- */ --docs-tooltip-bg: #3f3f46; --docs-tooltip-color: #fafafa; /* ---- Focus ring ------------------------------------------------------ */ --docs-focus-ring: rgba(91, 158, 230, 0.45); /* ---- Surfaces -------------------------------------------------------- */ --docs-text-primary: var(--docs-text); --docs-text-tertiary: #52525b; --docs-surface: var(--docs-bg); --docs-surface-hover: var(--docs-bg-muted); --docs-primary-tint: var(--docs-primary-light); --docs-border-strong: #52525b; --docs-action-bg: var(--docs-bg); --docs-action-bg-hover: var(--docs-bg-muted); --docs-action-text: var(--docs-text-secondary); --docs-action-text-hover:var(--docs-text); /* ---- Shadows --------------------------------------------------------- */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 8px 10px -6px rgba(0, 0, 0, 0.2); } /* System-preference fallback (when no explicit toggle yet) */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { color-scheme: dark; --docs-primary: #5b9ee6; --docs-primary-hover: #7eb3ee; --docs-primary-light: rgba(91, 158, 230, 0.15); --docs-primary-muted: rgba(91, 158, 230, 0.12); --docs-success: #4ade80; --docs-warning: #fbbf24; --docs-danger: #f87171; --docs-text: #e4e4e7; --docs-text-secondary: #a1a1aa; --docs-text-muted: #71717a; --docs-heading: #fafafa; --docs-link: var(--docs-primary); --docs-link-hover: var(--docs-primary-hover); --docs-bg: #18181b; --docs-bg-subtle: #1f1f23; --docs-bg-muted: #27272a; --docs-bg-code: #0f0f12; --docs-border: #3f3f46; --docs-border-subtle: #2e2e33; --docs-sidebar-bg: var(--docs-bg); --docs-sidebar-border: var(--docs-border); --docs-sidebar-link: var(--docs-text-secondary); --docs-sidebar-link-hover: var(--docs-text); --docs-sidebar-link-active: var(--docs-primary); --docs-sidebar-active-bg: var(--docs-primary-muted); --docs-sidebar-active-bar: var(--docs-primary); --docs-sidebar-section-bg: var(--docs-bg-subtle); --docs-sidebar-tree-line: var(--docs-border-subtle); --docs-toc-bg: var(--docs-bg); --docs-toc-border: var(--docs-border); --docs-toc-link: var(--docs-text-muted); --docs-toc-link-hover: var(--docs-text-secondary); --docs-toc-link-active: var(--docs-primary); --docs-toc-indicator: var(--docs-primary); --docs-card-bg: var(--docs-bg-subtle); --docs-card-border: var(--docs-border); --docs-card-hover-border: var(--docs-primary); --docs-pagenav-bg: var(--docs-bg-subtle); --docs-pagenav-border: var(--docs-border); --docs-pagenav-label: var(--docs-text-muted); --docs-pagenav-title: var(--docs-text); --docs-pagenav-hover-bg: var(--docs-bg-muted); --docs-crumb-link: var(--docs-text-muted); --docs-crumb-link-hover: var(--docs-text-secondary); --docs-crumb-current: var(--docs-text); --docs-tooltip-bg: #3f3f46; --docs-tooltip-color: #fafafa; --docs-focus-ring: rgba(91, 158, 230, 0.45); --docs-text-primary: var(--docs-text); --docs-text-tertiary: #52525b; --docs-surface: var(--docs-bg); --docs-surface-hover: var(--docs-bg-muted); --docs-primary-tint: var(--docs-primary-light); --docs-border-strong: #52525b; --docs-action-bg: var(--docs-bg); --docs-action-bg-hover: var(--docs-bg-muted); --docs-action-text: var(--docs-text-secondary); --docs-action-text-hover:var(--docs-text); --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 8px 10px -6px rgba(0, 0, 0, 0.2); } } /* ========================================================================== Reduced-motion preference ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; } } /* ========================================================================== Responsive layout token overrides ========================================================================== */ /* Tablet */ @media (max-width: 1024px) { :root { --toc-width: 0px; --layout-gap: var(--space-6); --layout-padding: var(--space-4); } } /* Mobile */ @media (max-width: 768px) { :root { --sidebar-width: 0px; --toc-width: 0px; --layout-gap: var(--space-4); --layout-padding: var(--space-4); } } /* Large desktop — modest scale-up of the anchored side columns (F3d). */ @media (min-width: 1536px) { :root { --sidebar-width: 300px; --toc-width: 260px; --layout-gap: var(--space-12); /* 48px */ --layout-padding: var(--space-12); /* 48px edge gutter */ } } /* QHD / 2K — wider rails + raise the safety cap so it stays full-width. */ @media (min-width: 2560px) { :root { --sidebar-width: 340px; --toc-width: 300px; --layout-gap: var(--space-16); /* 64px */ --layout-max: 3200px; --layout-padding: var(--space-16); /* 64px */ } } /* 4K / Ultrawide — cap so prose+rails don't drift absurdly far apart. */ @media (min-width: 3440px) { :root { --sidebar-width: 400px; --toc-width: 360px; --layout-gap: var(--space-20); /* 80px */ --layout-max: 4000px; --layout-padding: var(--space-20); /* 80px */ } }