/* ============================================ Rame Design System - DevExpress XAF Theme Mapping ============================================ Maps Rame design tokens to DevExpress Blazor theme variables for seamless integration. IMPORTANT: The themeDetector.js script detects dark themes by analyzing --dxbl-body-bg and sets data-rame-theme="dark" on the element. ============================================ */ /* ======================================== LIGHT THEME (Default) Uses :root tokens from _tokens.css ======================================== */ /* ======================================== DARK THEME OVERRIDES Applied when themeDetector.js detects a dark theme and sets data-rame-theme="dark" on ======================================== */ html[data-rame-theme="dark"] { /* Primary colors for dark mode */ --rame-primary: #3b9eff; --rame-primary-hover: #60b0ff; --rame-primary-light: #1a3a5c; --rame-primary-lighter: #1a2d42; /* Background colors */ --rame-bg-primary: #1e1e1e; --rame-bg-secondary: #252525; --rame-bg-tertiary: #2d2d2d; --rame-bg-chat: #1a1a1a; --rame-bg-hover: #333333; --rame-bg-input: #333333; /* Text colors */ --rame-text-primary: #e4e6eb; --rame-text-secondary: #b0b3b8; --rame-text-tertiary: #8a8d91; --rame-text-muted: #6e7681; --rame-text-chat: #e4e6eb; --rame-text-meta: #8b949e; /* Border colors */ --rame-border-light: #3d3d3d; --rame-border-medium: #484848; --rame-border-dark: #555555; /* Scrollbar */ --rame-scrollbar-thumb: #555555; --rame-scrollbar-thumb-hover: #666666; /* Shadows adjusted for dark mode */ --rame-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --rame-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35); --rame-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4); --rame-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5); --rame-shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.6); --rame-shadow-message: 0 1px 1px rgba(0, 0, 0, 0.2); /* Message bubble for dark */ --rame-success: #4ade80; --rame-success-light: #1a3d2a; --rame-success-lighter: #1a3025; /* Error/Warning in dark */ --rame-error: #f87171; --rame-error-light: #3d1a1a; --rame-warning: #fbbf24; --rame-warning-light: #3d2e1a; /* Status colors for dark mode */ --rame-status-online: #4ade80; --rame-status-offline: #6b7280; --rame-status-busy: #f87171; } /* ======================================== BLAZING BERRY THEME (Purple/Pink dark theme) Additional overrides for berry-specific colors ======================================== */ html[data-rame-theme="dark"].rame-theme-berry { --rame-primary: #9c27b0; --rame-primary-hover: #7b1fa2; --rame-primary-light: #2d1a33; --rame-accent: #e91e63; --rame-accent-hover: #c2185b; /* Berry-specific dark backgrounds */ --rame-bg-primary: #1a1a2e; --rame-bg-secondary: #16213e; --rame-bg-tertiary: #1f2940; --rame-bg-chat: #0f0f23; --rame-bg-hover: #2a3754; --rame-bg-input: #2a3754; --rame-border-light: #2a3754; --rame-border-medium: #3a4764; --rame-scrollbar-thumb: #3a4764; --rame-scrollbar-thumb-hover: #4a5774; } /* ======================================== HIGH CONTRAST MODE ======================================== */ @media (prefers-contrast: high) { html[data-rame-theme="dark"] { --rame-border-light: #ffffff; --rame-border-medium: #ffffff; --rame-text-secondary: var(--rame-text-primary); --rame-text-tertiary: var(--rame-text-primary); } :root:not([data-rame-theme="dark"]) { --rame-border-light: #000000; --rame-border-medium: #000000; --rame-text-secondary: var(--rame-text-primary); --rame-text-tertiary: var(--rame-text-primary); } } /* ======================================== REDUCED MOTION ======================================== */ @media (prefers-reduced-motion: reduce) { :root { --rame-transition-base: none; --rame-transition-fast: none; --rame-transition-slow: none; --rame-transition-spring: none; } } /* ======================================== PRINT STYLES ======================================== */ @media print { :root, html[data-rame-theme="dark"] { --rame-bg-primary: #ffffff; --rame-bg-secondary: #ffffff; --rame-bg-tertiary: #ffffff; --rame-text-primary: #000000; --rame-text-secondary: #333333; --rame-shadow-xs: none; --rame-shadow-sm: none; --rame-shadow-md: none; --rame-shadow-lg: none; } }