/* ============================================================================= CP-DMS E-Saraban — Design Tokens ----------------------------------------------------------------------------- Single source of truth for colors, typography, spacing, radius, shadows. Import into any project to inherit the same look-and-feel: @import url('./design-tokens.css'); Switch theme via data-theme attribute on : ... ... Built on Vuetify 3 + Material Design 3 conventions. ============================================================================= */ /* --------------------------------------------------------------------------- 1. BRAND & CORE TOKENS (theme-independent) --------------------------------------------------------------------------- */ :root { /* Brand */ --brand-primary: #1C75BC; --brand-primary-darken: #155a9e; --brand-name: "IOCode"; /* Typography — Font Family */ --font-family-base: "Sarabun", "Noto Sans Thai", "Inter", sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", arial, sans-serif; --font-family-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace; /* Typography — Font Sizes (Vuetify scale, base = 0.9375rem = 15px) */ --fs-h1: 2.875rem; /* 46px */ --fs-h2: 2.375rem; /* 38px */ --fs-h3: 1.75rem; /* 28px */ --fs-h4: 1.5rem; /* 24px */ --fs-h5: 1.125rem; /* 18px */ --fs-h6: 0.9375rem; /* 15px */ --fs-subtitle-1: 0.9375rem; /* 15px */ --fs-subtitle-2: 0.8125rem; /* 13px */ --fs-body-1: 0.9375rem; /* 15px — base body */ --fs-body-2: 0.8125rem; /* 13px */ --fs-caption: 0.8125rem; /* 13px */ --fs-overline: 0.75rem; /* 12px — uppercase */ --fs-button: 0.9375rem; /* 15px */ /* Typography — Line Heights */ --lh-h1: 4.25rem; --lh-h2: 3.5rem; --lh-h3: 2.625rem; --lh-h4: 2.375rem; --lh-h5: 1.75rem; --lh-h6: 1.375rem; --lh-body: 1.375rem; --lh-tight: 1.25rem; --lh-caption: 1.125rem; --lh-overline: 0.875rem; /* Typography — Letter Spacing */ --ls-normal: normal; --ls-caption: 0.025rem; --ls-overline: 0.05rem; /* Typography — Font Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* --------------------------------------------------------------------------- Spacing Scale (4-px base, matches Vuetify utility classes) --------------------------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4px — Vuetify pa-1 / ma-1 */ --space-2: 0.5rem; /* 8px — pa-2 */ --space-3: 0.75rem; /* 12px — pa-3 */ --space-4: 1rem; /* 16px — pa-4 */ --space-5: 1.25rem; /* 20px — pa-5 */ --space-6: 1.5rem; /* 24px — pa-6 */ --space-8: 2rem; /* 32px — pa-8 */ --space-10: 2.5rem; /* 40px — pa-10 */ --space-12: 3rem; /* 48px — pa-12 */ --space-16: 4rem; /* 64px — pa-16 */ /* --------------------------------------------------------------------------- Border Radius --------------------------------------------------------------------------- */ --radius-root: 6px; /* Vuetify default */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; /* button, alert, pagination, field */ --radius-lg: 10px; /* card, dialog, menu, expansion */ --radius-pill: 50px; /* chip, badge */ --radius-shaped: 25px 0; /* asymmetric shape */ /* --------------------------------------------------------------------------- Z-Index Layers --------------------------------------------------------------------------- */ --z-vertical-nav: 12; --z-overlay: 11; --z-horizontal-nav: 11; --z-navbar: 11; /* --------------------------------------------------------------------------- Layout Dimensions --------------------------------------------------------------------------- */ --layout-boxed-width: 1440px; --vertical-nav-width: 260px; --vertical-nav-collapsed-width: 70px; --navbar-height: 64px; --footer-height: 54px; /* --------------------------------------------------------------------------- Breakpoints (read-only documentation — use media queries directly) --------------------------------------------------------------------------- */ --bp-xs: 0; --bp-sm: 600px; --bp-md: 960px; --bp-lg: 1264px; --bp-xl: 1904px; /* --------------------------------------------------------------------------- Component Sizes --------------------------------------------------------------------------- */ --btn-height: 38px; --chip-height: 32px; --list-item-min-height: 38px; --table-row-height: 50px; --table-header-height: 64px; --badge-min-size: 1.375rem; /* 22px */ --switch-track-width: 1.875rem; --switch-track-height: 1.125rem; /* --------------------------------------------------------------------------- Transitions / Easing --------------------------------------------------------------------------- */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --dur-fast: 0.18s; --dur-base: 0.25s; --dur-slow: 0.4s; /* --------------------------------------------------------------------------- Semantic / Status Colors — identical in both themes --------------------------------------------------------------------------- */ --color-success: #72E128; --color-success-darken: #67CB24; --color-success-on: #FFFFFF; --color-info: #26C6F9; --color-info-darken: #22B3E1; --color-info-on: #FFFFFF; --color-warning: #FDB528; --color-warning-darken: #E4A324; --color-warning-on: #FFFFFF; --color-error: #FF4D49; --color-error-darken: #E64542; --color-error-on: #FFFFFF; --color-secondary: #6D788D; --color-secondary-darken: #626C7F; --color-secondary-on: #FFFFFF; /* Code highlight (constant across themes) */ --color-code: #d400ff; /* --------------------------------------------------------------------------- Opacity Tokens --------------------------------------------------------------------------- */ --opacity-high-emphasis: 0.9; --opacity-medium-emphasis: 0.7; --opacity-disabled: 0.4; --opacity-hover: 0.06; --opacity-focus: 0.1; --opacity-selected: 0.08; --opacity-activated: 0.16; --opacity-pressed: 0.14; --opacity-dragged: 0.1; --opacity-border: 0.12; } /* --------------------------------------------------------------------------- 2. LIGHT THEME — default --------------------------------------------------------------------------- */ :root, [data-theme="light"] { color-scheme: light; /* Primary */ --color-primary: var(--brand-primary); --color-primary-darken: var(--brand-primary-darken); --color-primary-on: #FFFFFF; /* Surfaces */ --color-background: #F7F7F9; --color-background-on: #262B43; --color-surface: #FFFFFF; --color-surface-on: #262B43; --color-skin-bordered: #FFFFFF; /* Grey ramp (light theme) */ --grey-50: #FAFAFA; --grey-100: #F5F5F5; --grey-200: #EEEEEE; --grey-300: #E0E0E0; --grey-400: #BDBDBD; --grey-500: #9E9E9E; --grey-600: #757575; --grey-700: #616161; --grey-800: #424242; --grey-900: #212121; /* Borders */ --border-color: rgba(38, 43, 67, 0.12); /* #262B43 @ 12% */ /* Overlays / Scrim */ --scrim-background: #262B43; --scrim-opacity: 0.5; /* Tooltip / Snackbar background */ --tooltip-background: #282A42; --tooltip-on: #FFFFFF; /* Misc surfaces */ --table-header-bg: #F5F5F7; --track-bg: #FAFAFD; --chat-bg: #F7F6FA; --scrollbar-thumb: #DBDADE; --expansion-text-bg: #FAFAFA; /* Shadow umbra (key shadow color + opacity scale) */ --shadow-color: 38, 43, 67; /* #262B43 as r,g,b */ --shadow-xs-alpha: 0.14; --shadow-sm-alpha: 0.16; --shadow-md-alpha: 0.16; --shadow-lg-alpha: 0.18; --shadow-xl-alpha: 0.18; } /* --------------------------------------------------------------------------- 3. DARK THEME --------------------------------------------------------------------------- */ [data-theme="dark"] { color-scheme: dark; /* Primary remains the same — visual consistency across themes */ --color-primary: var(--brand-primary); --color-primary-darken: var(--brand-primary-darken); --color-primary-on: #FFFFFF; /* Surfaces */ --color-background: #282A42; --color-background-on: #EAEAFF; --color-surface: #30334E; --color-surface-on: #EAEAFF; --color-skin-bordered: #30334E; /* Grey ramp (dark theme — inverted scale) */ --grey-50: #2A2E42; --grey-100: #2F3349; --grey-200: #4A5072; --grey-300: #5E6692; --grey-400: #7983BB; --grey-500: #8692D0; --grey-600: #AAB3DE; --grey-700: #B6BEE3; --grey-800: #CFD3EC; --grey-900: #E7E9F6; /* Borders */ --border-color: rgba(234, 234, 255, 0.12); /* #EAEAFF @ 12% */ /* Overlays / Scrim */ --scrim-background: #101121; --scrim-opacity: 0.6; /* Tooltip / Snackbar */ --tooltip-background: #F5F5F5; --tooltip-on: #30334E; /* Misc surfaces */ --table-header-bg: #3A3E5B; --track-bg: #3C3F59; --chat-bg: #343752; --scrollbar-thumb: #4A5072; --expansion-text-bg: #333851; /* Shadow umbra (deeper in dark mode) */ --shadow-color: 16, 17, 33; /* #101121 */ --shadow-xs-alpha: 0.20; --shadow-sm-alpha: 0.24; --shadow-md-alpha: 0.26; --shadow-lg-alpha: 0.28; --shadow-xl-alpha: 0.30; } /* System-preference auto-dark removed — theme is controlled explicitly via data-bs-theme. Dark mode variables are applied by style.css [data-bs-theme="dark"] rules. */ /* --------------------------------------------------------------------------- 4. SHADOW UTILITIES (24-level Material elevation, simplified to 5 tiers) --------------------------------------------------------------------------- */ :root { --shadow-xs: 0 2px 6px 0 rgba(var(--shadow-color), var(--shadow-xs-alpha)); --shadow-sm: 0 2px 10px 0 rgba(var(--shadow-color), var(--shadow-sm-alpha)); --shadow-md: 0 4px 14px 0 rgba(var(--shadow-color), var(--shadow-md-alpha)); --shadow-lg: 0 6px 20px 0 rgba(var(--shadow-color), var(--shadow-lg-alpha)); --shadow-xl: 0 8px 26px 0 rgba(var(--shadow-color), var(--shadow-xl-alpha)); } /* Body defaults controlled by style.css to avoid conflicts with data-bs-theme. */