/** * Repvist Design Tokens * Single source of truth for colors, typography, spacing, and layout. * Phase 1 — Foundation. Component styles load in later phases. * * Usage: [data-theme="dark"] on for dark mode. * Legacy aliases (--color-primary-600, etc.) keep existing CSS working during migration. */ /* ========================================================================== LIGHT THEME (default) ========================================================================== */ :root, [data-theme="light"] { /* -------------------------------------------------------------------------- Brand — Primary Blue -------------------------------------------------------------------------- */ --rv-primary: #2b6ff3; --rv-primary-hover: #1f5fe0; --rv-primary-active: #194fc0; --rv-brand-50: #ebf3ff; --Brand-50: var(--rv-brand-50); --rv-primary-soft-bg: #eaf2ff; --rv-primary-soft-border: #cfe0ff; --rv-primary-muted: rgba(43, 111, 243, 0.12); --rv-primary-focus-ring: rgba(43, 111, 243, 0.25); /* -------------------------------------------------------------------------- Surfaces & borders -------------------------------------------------------------------------- */ --rv-bg: #f8fafc; --rv-surface: #ffffff; --rv-sidebar-bg: #ffffff; --rv-border: #e5e7eb; --rv-border-subtle: #f3f4f6; /* -------------------------------------------------------------------------- Text -------------------------------------------------------------------------- */ --rv-text: #111827; --rv-text-muted: #6b7280; --rv-text-subtle: #9ca3af; --rv-text-inverse: #ffffff; /* -------------------------------------------------------------------------- Semantic -------------------------------------------------------------------------- */ --rv-success: #10b981; --rv-success-soft: rgba(16, 185, 129, 0.12); --rv-success-dark: #059669; --rv-warning: #f59e0b; --rv-warning-soft: rgba(245, 158, 11, 0.12); --rv-warning-dark: #d97706; --rv-danger: #ef4444; --rv-danger-soft: rgba(239, 68, 68, 0.12); --rv-danger-dark: #dc2626; --rv-info: #0ea5e9; --rv-info-soft: rgba(14, 165, 233, 0.12); --rv-info-dark: #0284c7; /* -------------------------------------------------------------------------- Layout dimensions -------------------------------------------------------------------------- */ --rv-sidebar-width: 260px; --rv-sidebar-width-collapsed: 72px; --rv-navbar-height: 64px; --rv-content-max-width: 1440px; --rv-page-padding-x: 1.5rem; --rv-page-padding-y: 1.5rem; /* -------------------------------------------------------------------------- Typography — Inter only -------------------------------------------------------------------------- */ --rv-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --rv-font-size-xs: 0.75rem; --rv-font-size-sm: 0.875rem; --rv-font-size-base: 1rem; --rv-font-size-lg: 1.125rem; --rv-font-size-xl: 1.25rem; --rv-font-size-2xl: 1.5rem; --rv-font-size-3xl: 1.875rem; --rv-font-size-4xl: 2.25rem; --rv-font-weight-normal: 400; --rv-font-weight-medium: 500; --rv-font-weight-semibold: 600; --rv-font-weight-bold: 700; --rv-line-height-tight: 1.25; --rv-line-height-snug: 1.375; --rv-line-height-normal: 1.5; --rv-line-height-relaxed: 1.625; --rv-letter-spacing-tight: -0.02em; --rv-letter-spacing-normal: 0; /* -------------------------------------------------------------------------- Spacing scale (4px base) -------------------------------------------------------------------------- */ --rv-space-0: 0; --rv-space-1: 0.25rem; --rv-space-2: 0.5rem; --rv-space-3: 0.75rem; --rv-space-4: 1rem; --rv-space-5: 1.25rem; --rv-space-6: 1.5rem; --rv-space-8: 2rem; --rv-space-10: 2.5rem; --rv-space-12: 3rem; --rv-space-16: 4rem; /* -------------------------------------------------------------------------- Radius — 8px standard for boxes/cards/panels -------------------------------------------------------------------------- */ --rv-radius-box: 8px; --rv-radius-none: 0; --rv-radius-sm: var(--rv-radius-box); --rv-radius-md: var(--rv-radius-box); --rv-radius-lg: var(--rv-radius-box); --rv-radius-xl: var(--rv-radius-box); --rv-radius-2xl: var(--rv-radius-box); --rv-radius-full: 9999px; /* -------------------------------------------------------------------------- Shadows — soft, enterprise SaaS -------------------------------------------------------------------------- */ --rv-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --rv-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --rv-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04); --rv-shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04); --rv-shadow-xl: 0 20px 40px rgba(15, 23, 42, 0.1); --rv-shadow-primary: 0 4px 14px rgba(43, 111, 243, 0.25); --rv-shadow-inner: inset 0 1px 2px rgba(15, 23, 42, 0.06); /* -------------------------------------------------------------------------- Motion -------------------------------------------------------------------------- */ --rv-ease-default: cubic-bezier(0.4, 0, 0.2, 1); --rv-ease-out: cubic-bezier(0, 0, 0.2, 1); --rv-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --rv-duration-fast: 150ms; --rv-duration-base: 200ms; --rv-duration-slow: 300ms; --rv-duration-slower: 500ms; --rv-transition-fast: var(--rv-duration-fast) var(--rv-ease-default); --rv-transition-base: var(--rv-duration-base) var(--rv-ease-default); --rv-transition-slow: var(--rv-duration-slow) var(--rv-ease-default); /* -------------------------------------------------------------------------- Z-index -------------------------------------------------------------------------- */ --rv-z-base: 0; --rv-z-dropdown: 1000; --rv-z-sticky: 1020; --rv-z-fixed: 1030; --rv-z-sidebar: 1040; --rv-z-topbar: 1050; --rv-z-overlay: 1060; --rv-z-modal-backdrop: 1070; --rv-z-modal: 1080; --rv-z-popover: 1090; --rv-z-tooltip: 1100; /* -------------------------------------------------------------------------- Bootstrap 5 harmonization (optional overrides via base.css) -------------------------------------------------------------------------- */ --bs-primary: var(--rv-primary); --bs-primary-rgb: 43, 111, 243; --bs-body-font-family: var(--rv-font-family); --bs-body-bg: var(--rv-bg); --bs-body-color: var(--rv-text); --bs-border-color: var(--rv-border); --bs-link-color: var(--rv-primary); --bs-link-hover-color: var(--rv-primary-hover); /* ========================================================================== Semantic aliases (app-wide API) ========================================================================== */ --color-primary: var(--rv-primary); --color-primary-hover: var(--rv-primary-hover); --color-primary-active: var(--rv-primary-active); --color-primary-soft-bg: var(--rv-primary-soft-bg); --color-primary-soft-border: var(--rv-primary-soft-border); --bg-app: var(--rv-bg); --bg-primary: var(--rv-surface); --bg-secondary: var(--rv-bg); --bg-tertiary: #f1f5f9; --bg-elevated: var(--rv-surface); --bg-overlay: rgba(15, 23, 42, 0.45); --text-primary: var(--rv-text); --text-secondary: var(--rv-text-muted); --text-tertiary: var(--rv-text-subtle); --text-muted: var(--rv-text-muted); --text-inverse: var(--rv-text-inverse); --border-default: var(--rv-border); --border-light: var(--rv-border); --border-medium: #d1d5db; --border-dark: #9ca3af; --sidebar-width: var(--rv-sidebar-width); --sidebar-width-collapsed: var(--rv-sidebar-width-collapsed); --navbar-height: var(--rv-navbar-height); --font-family-sans: var(--rv-font-family); --font-family-display: var(--rv-font-family); --font-size-xs: var(--rv-font-size-xs); --font-size-sm: var(--rv-font-size-sm); --font-size-base: var(--rv-font-size-base); --font-size-lg: var(--rv-font-size-lg); --font-size-xl: var(--rv-font-size-xl); --font-size-2xl: var(--rv-font-size-2xl); --font-size-3xl: var(--rv-font-size-3xl); --font-size-4xl: var(--rv-font-size-4xl); --font-weight-normal: var(--rv-font-weight-normal); --font-weight-medium: var(--rv-font-weight-medium); --font-weight-semibold: var(--rv-font-weight-semibold); --font-weight-bold: var(--rv-font-weight-bold); --line-height-tight: var(--rv-line-height-tight); --line-height-snug: var(--rv-line-height-snug); --line-height-normal: var(--rv-line-height-normal); --line-height-relaxed: var(--rv-line-height-relaxed); --space-0: var(--rv-space-0); --space-1: var(--rv-space-1); --space-2: var(--rv-space-2); --space-3: var(--rv-space-3); --space-4: var(--rv-space-4); --space-5: var(--rv-space-5); --space-6: var(--rv-space-6); --space-8: var(--rv-space-8); --space-10: var(--rv-space-10); --space-12: var(--rv-space-12); --space-16: var(--rv-space-16); --space-20: 5rem; --space-24: 6rem; --radius-none: var(--rv-radius-none); --radius-sm: var(--rv-radius-sm); --radius-md: var(--rv-radius-md); --radius-lg: var(--rv-radius-lg); --radius-xl: var(--rv-radius-xl); --radius-2xl: var(--rv-radius-2xl); --radius-full: var(--rv-radius-full); --shadow-xs: var(--rv-shadow-xs); --shadow-sm: var(--rv-shadow-sm); --shadow-md: var(--rv-shadow-md); --shadow-lg: var(--rv-shadow-lg); --shadow-xl: var(--rv-shadow-xl); --shadow-2xl: var(--rv-shadow-xl); --shadow-inner: var(--rv-shadow-inner); --transition-fast: var(--rv-transition-fast); --transition-base: var(--rv-transition-base); --transition-slow: var(--rv-transition-slow); --transition-slower: var(--rv-duration-slower) var(--rv-ease-default); --z-base: var(--rv-z-base); --z-dropdown: var(--rv-z-dropdown); --z-sticky: var(--rv-z-sticky); --z-fixed: var(--rv-z-fixed); --z-modal-backdrop: var(--rv-z-modal-backdrop); --z-modal: var(--rv-z-modal); --z-popover: var(--rv-z-popover); --z-tooltip: var(--rv-z-tooltip); /* Legacy primary scale → new brand blue */ --color-primary-50: var(--rv-primary-soft-bg); --color-primary-100: var(--rv-primary-soft-bg); --color-primary-200: var(--rv-primary-soft-border); --color-primary-300: #9ec5ff; --color-primary-400: #5b93f6; --color-primary-500: var(--rv-primary); --color-primary-600: var(--rv-primary); --color-primary-700: var(--rv-primary-hover); --color-primary-800: var(--rv-primary-active); --color-primary-900: var(--rv-primary-active); --color-secondary-50: var(--rv-primary-soft-bg); --color-secondary-100: var(--rv-primary-soft-bg); --color-secondary-500: var(--rv-primary); --color-secondary-600: var(--rv-primary); --color-secondary-700: var(--rv-primary-hover); --color-success: var(--rv-success); --color-success-light: #34d399; --color-success-dark: var(--rv-success-dark); --color-warning: var(--rv-warning); --color-warning-light: #fbbf24; --color-warning-dark: var(--rv-warning-dark); --color-error: var(--rv-danger); --color-error-light: #f87171; --color-error-dark: var(--rv-danger-dark); --color-info: var(--rv-info); --color-info-light: #38bdf8; --color-info-dark: var(--rv-info-dark); --color-gray-50: #f9fafb; --color-gray-100: #f3f4f6; --color-gray-200: var(--rv-border); --color-gray-300: #d1d5db; --color-gray-400: #9ca3af; --color-gray-500: var(--rv-text-muted); --color-gray-600: #4b5563; --color-gray-700: #374151; --color-gray-800: #1f2937; --color-gray-900: var(--rv-text); /* repvisit-design-system.css compatibility */ --primary-500: var(--rv-primary); --primary-600: var(--rv-primary); --primary-700: var(--rv-primary-hover); --spacing-xs: var(--rv-space-1); --spacing-sm: var(--rv-space-2); --spacing-md: var(--rv-space-4); --spacing-lg: var(--rv-space-6); --spacing-xl: var(--rv-space-8); --spacing-2xl: var(--rv-space-12); } /* ========================================================================== DARK THEME ========================================================================== */ [data-theme="dark"] { --rv-primary: #4d8ff7; --rv-primary-hover: #6ba3f8; --rv-primary-active: #2b6ff3; --rv-primary-soft-bg: rgba(43, 111, 243, 0.15); --rv-primary-soft-border: rgba(43, 111, 243, 0.35); --rv-primary-muted: rgba(77, 143, 247, 0.18); --rv-primary-focus-ring: rgba(77, 143, 247, 0.35); --rv-bg: #0f1419; --rv-surface: #1a1f26; --rv-sidebar-bg: #1a1f26; --rv-border: #2d3748; --rv-border-subtle: #252b33; --rv-text: #f3f4f6; --rv-text-muted: #9ca3af; --rv-text-subtle: #6b7280; --rv-text-inverse: #111827; --rv-success-soft: rgba(16, 185, 129, 0.18); --rv-warning-soft: rgba(245, 158, 11, 0.18); --rv-danger-soft: rgba(239, 68, 68, 0.18); --rv-info-soft: rgba(14, 165, 233, 0.18); --rv-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --rv-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35); --rv-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --rv-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.45); --rv-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.5); --rv-shadow-primary: 0 4px 14px rgba(43, 111, 243, 0.2); --bg-tertiary: #252b33; --bg-overlay: rgba(0, 0, 0, 0.65); --border-medium: #4b5563; --border-dark: #6b7280; --bs-body-bg: var(--rv-bg); --bs-body-color: var(--rv-text); --bs-border-color: var(--rv-border); --color-gray-50: #1a1f26; --color-gray-100: #252b33; }