71 lines
2.5 KiB
SCSS
71 lines
2.5 KiB
SCSS
// Theme-specific Design Tokens - Light and Dark theme variables
|
|
// This file contains theme-specific overrides for light and dark modes
|
|
|
|
:root {
|
|
// === SURFACE COLORS - LIGHT THEME ===
|
|
--ov-meet-surface-color: #fdfdfd;
|
|
--ov-meet-surface-variant: #f5f5f5;
|
|
--ov-meet-surface-hover: #f0f0f0;
|
|
--ov-meet-background-color: #fafafa;
|
|
--ov-meet-background-secondary: #f5f5f5;
|
|
--ov-meet-surface-elevated: #ffffff;
|
|
--ov-meet-surface-container: #f3f3f3;
|
|
|
|
// === TEXT COLORS - LIGHT THEME ===
|
|
--ov-meet-text-primary: #212121;
|
|
--ov-meet-text-secondary: #757575;
|
|
--ov-meet-text-hint: #9e9e9e;
|
|
--ov-meet-text-disabled: #bdbdbd;
|
|
--ov-meet-text-on-primary: #ffffff;
|
|
--ov-meet-text-on-secondary: #ffffff;
|
|
--ov-meet-text-on-accent: #ffffff;
|
|
--ov-meet-text-on-surface: #494949;
|
|
--ov-meet-text-on-background: #212121;
|
|
|
|
// === SHADOWS - LIGHT THEME ===
|
|
--ov-meet-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
|
--ov-meet-shadow-md: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
|
--ov-meet-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.16), 0 8px 16px rgba(0, 0, 0, 0.23);
|
|
--ov-meet-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
|
|
// === BORDERS - LIGHT THEME ===
|
|
--ov-meet-border-color: #e0e0e0;
|
|
--ov-meet-border-color-light: #f0f0f0;
|
|
--ov-meet-border-color-strong: #bdbdbd;
|
|
}
|
|
|
|
// === DARK THEME ===
|
|
// Activated when the [data-theme="dark"] attribute is present on html
|
|
[data-theme='dark'] {
|
|
|
|
--ov-meet-color-info: #2a9bf7;
|
|
|
|
// === SURFACE COLORS - DARK THEME ===
|
|
--ov-meet-background-color: #29292e;
|
|
--ov-meet-background-secondary: #21212b;
|
|
--ov-meet-surface-color: #242429;
|
|
--ov-meet-surface-variant: #23232c;
|
|
--ov-meet-surface-hover: #3c3c44;
|
|
--ov-meet-surface-elevated: #2e2e35;
|
|
--ov-meet-surface-container: #262630;
|
|
|
|
// === TEXT COLORS - DARK THEME ===
|
|
--ov-meet-text-primary: #e0e0e6;
|
|
--ov-meet-text-secondary: #a5a5b5;
|
|
--ov-meet-text-hint: #7c7c8c;
|
|
--ov-meet-text-disabled: #5a5a68;
|
|
--ov-meet-text-on-surface: #e4e4ec;
|
|
--ov-meet-text-on-background: #e4e4ec;
|
|
|
|
// === SHADOWS - DARK THEME ===
|
|
--ov-meet-shadow-sm: 0 1px 3px rgba(20, 20, 30, 0.4), 0 1px 2px rgba(30, 30, 40, 0.6);
|
|
--ov-meet-shadow-md: 0 3px 6px rgba(30, 30, 45, 0.5), 0 3px 6px rgba(20, 20, 30, 0.6);
|
|
--ov-meet-shadow-lg: 0 8px 16px rgba(20, 20, 30, 0.5), 0 8px 16px rgba(0, 0, 0, 0.7);
|
|
--ov-meet-shadow-hover: 0 4px 12px rgba(50, 50, 70, 0.3), 0 2px 6px rgba(0, 0, 0, 0.4);
|
|
|
|
// === BORDERS - DARK THEME ===
|
|
--ov-meet-border-color: #3a3a48;
|
|
--ov-meet-border-color-light: #2b2b36;
|
|
--ov-meet-border-color-strong: #5c5c6c;
|
|
}
|