/** * Shared Everstory UI tokens (admin + customer dashboard). * Loaded after evst-ui-props + evst-ui-themes so shell CSS variables resolve. * * @package Everstory */ /* * App → Neutral Palette (data-bs-theme-base on ). * tabler-themes updates --tblr-gray-*; Tabler light reboot still pins semantic tokens * to the default gray scale — rebind so admin, customer dashboard, and auth follow settings. */ html[data-bs-theme='light'], html:not([data-bs-theme]) { --tblr-secondary: var(--tblr-gray-500); --tblr-muted: var(--tblr-gray-500); --tblr-light: var(--tblr-gray-50); --tblr-dark: var(--tblr-gray-800); --tblr-body-color: var(--tblr-gray-800); --tblr-body-bg: var(--tblr-gray-50); --tblr-emphasis-color: var(--tblr-gray-700); --tblr-border-color: var(--tblr-gray-200); --tblr-border-color-translucent: color-mix(in srgb, var(--tblr-gray-600) 10%, transparent); /* Surfaces — canvas from palette; raised cards/forms stay white */ --tblr-bg-surface-primary: var(--tblr-white); --tblr-bg-surface-secondary: var(--tblr-gray-50); --tblr-bg-surface-tertiary: var(--tblr-gray-100); --tblr-bg-surface: var(--tblr-bg-surface-primary); --tblr-bg-forms: var(--tblr-bg-surface-primary); --evst-canvas-bg: var(--tblr-body-bg); --evst-surface-raised: var(--tblr-bg-surface-primary); } /* * Dark mode — same palette rebind; do not use :root (always matches and would pin light tokens). */ html[data-bs-theme='dark'] { --tblr-secondary: var(--tblr-gray-400); --tblr-muted: var(--tblr-gray-400); --tblr-light: var(--tblr-gray-800); --tblr-dark: var(--tblr-gray-100); --tblr-body-color: var(--tblr-gray-100); --tblr-body-bg: var(--tblr-gray-900); --tblr-emphasis-color: var(--tblr-gray-200); --tblr-border-color: var(--tblr-gray-700); --tblr-border-color-translucent: color-mix(in srgb, var(--tblr-gray-400) 12%, transparent); --tblr-bg-surface-primary: var(--tblr-gray-800); --tblr-bg-surface-secondary: var(--tblr-gray-900); --tblr-bg-surface-tertiary: var(--tblr-gray-700); --tblr-bg-surface: var(--tblr-bg-surface-primary); --tblr-bg-forms: var(--tblr-bg-surface-primary); --evst-canvas-bg: var(--tblr-body-bg); --evst-surface-raised: var(--tblr-bg-surface-primary); } :root { /* Border radius — follow App → Corner Radius (data-bs-theme-radius → --tblr-border-radius-scale) */ --evst-radius-sm: var(--tblr-border-radius-sm); --evst-radius-md: var(--tblr-border-radius); --evst-radius-lg: var(--tblr-border-radius-lg); --evst-radius-xl: calc(1rem * var(--tblr-border-radius-scale, 1)); --evst-radius-2xl: calc(2rem * var(--tblr-border-radius-scale, 1)); --evst-radius-pill: var(--tblr-border-radius-pill); /* Spacing (shell scale) */ --evst-spacing-xs: 0.25rem; --evst-spacing-sm: 0.5rem; --evst-spacing-md: 1rem; --evst-spacing-lg: 1.5rem; --evst-spacing-xl: 2rem; --evst-spacing-2xl: 3rem; /* Shadows — alias shell tokens with Everstory fallbacks */ --evst-shadow-sm: var(--tblr-box-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05)); --evst-shadow: var(--tblr-box-shadow, rgba(31, 41, 55, 0.04) 0 2px 4px 0); --evst-shadow-md: var(--tblr-box-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)); --evst-shadow-lg: var(--tblr-box-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)); --evst-shadow-card: var(--tblr-box-shadow-input, 0 0 4px rgba(31, 41, 55, 0.04)); /* Hover shadows — small step from resting state (avoid sm → lg jumps) */ --evst-shadow-card-hover: 0 2px 8px rgba(31, 41, 55, 0.07), 0 0 0 1px rgba(31, 41, 55, 0.02); --evst-shadow-btn-hover: 0 1px 4px rgba(31, 41, 55, 0.07); --evst-shadow-btn-hover-emphasis: 0 2px 8px rgba(31, 41, 55, 0.1); /* Colors — mirror App → Color Scheme (data-bs-theme-* on ) */ --evst-color-primary: var(--tblr-primary, #066fd1); --evst-color-primary-hover: var(--tblr-primary-darken, var(--tblr-primary, #066fd1)); --evst-color-success: var(--tblr-success, #00a32a); --evst-color-danger: var(--tblr-danger, #d63638); --evst-color-warning: var(--tblr-warning, #dba617); --evst-color-info: var(--tblr-info, #4299e1); /* Transitions — eased for less abrupt hover/focus feedback */ --evst-ease-out: cubic-bezier(0.33, 1, 0.68, 1); --evst-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); --evst-transition: 0.28s var(--evst-ease-out); --evst-transition-fast: 0.18s var(--evst-ease-out); --evst-transition-slow: 0.42s var(--evst-ease-out); --evst-transition-transform: transform 0.34s var(--evst-ease-out); --evst-transition-shadow: box-shadow 0.5s var(--evst-ease-out); --evst-transition-colors: border-color 0.28s var(--evst-ease-in-out), background-color 0.28s var(--evst-ease-in-out), color 0.22s var(--evst-ease-in-out); --evst-hover-lift-btn: -0.5px; --evst-hover-lift-card: -1px; /* Surface hovers — theme-aware neutral grey (light + dark via body/surface mix) */ --evst-hover-surface: color-mix(in srgb, var(--tblr-body-color) 4%, var(--tblr-bg-surface)); --evst-hover-surface-row: color-mix(in srgb, var(--tblr-body-color) 5%, var(--tblr-bg-surface)); --evst-hover-surface-danger: color-mix(in srgb, var(--tblr-danger) 6%, var(--tblr-bg-surface)); --evst-hover-fg: var(--tblr-body-color); --evst-hover-icon: var(--tblr-secondary, var(--tblr-body-color)); --evst-hover-fg-danger: var(--tblr-danger); /* Dropdown enter — short, smooth (Bootstrap menus: opacity only; custom menus: + slide) */ --evst-dropdown-enter-duration: 0.22s; --evst-dropdown-enter-offset: -0.25rem; --evst-dropdown-enter-transition: opacity var(--evst-dropdown-enter-duration) var(--evst-ease-out), visibility var(--evst-dropdown-enter-duration) var(--evst-ease-out), transform var(--evst-dropdown-enter-duration) var(--evst-ease-out); /* Modal / overlay backdrop — dark blur (not too slow) */ --evst-modal-enter-duration: 0.28s; --evst-modal-dialog-offset: -12px; --evst-modal-dialog-scale: 0.985; --evst-modal-backdrop-opacity: 55%; --evst-modal-backdrop-blur: 8px; --evst-modal-backdrop-bg: color-mix(in srgb, rgb(15 23 42) var(--evst-modal-backdrop-opacity), transparent); /* Filter card expand/collapse */ --evst-filter-card-enter-duration: 0.26s; }