/** * JexHRAI 全域變數定義 (Global Variables) - Material Design 3 Edition * * 此檔案集中管理所有 CSS 變數，確保設計系統的一致性。 * 基於 Google Material Design 3 (M3) 規範實作。 * * @since 9.3.0 * @version 2.0.0 (M3 Upgrade) */ :root { /* ========================================== * 1. 原始調色盤 (Primitive Palette) * ========================================== */ /* Brand Colors (基於 Kadence 全域調色盤) */ --k-p1: #FFC148; /* Primary: 主要黃色 */ --k-p2: #E04300; /* Secondary/Accent: 深橘色 */ /* Neutral Colors */ --k-p3: #333333; /* Dark High Contrast */ --k-p4: #555555; /* Dark Medium Contrast */ --k-p5: #777777; /* Dark Low Contrast */ --k-p6: #DDDDDD; /* Light Medium Contrast */ --k-p7: #F8F8F8; /* Light High Contrast */ --k-p8: #FFFAF1; /* Warm Surface */ --k-p9: #FFFFFF; /* White Surface */ /* Functional Colors */ --color-success: #13612E; --color-error: #B82105; --color-info: #1159AF; --color-warning: #E04300; /* ========================================== * 2. M3 系統色彩 (M3 System Colors) * 映射原始色彩到語意化角色 * ========================================== */ /* Primary (主要色) - 用於關鍵組件 (FAB, Prominent Buttons) */ --md-sys-color-primary: var(--k-p1); --md-sys-color-on-primary: var(--k-p3); /* 黃底黑字 */ --md-sys-color-primary-container: #FFF2D6; /* 淺黃容器 */ --md-sys-color-on-primary-container: #5C4000; /* Secondary (次要色) - 用於次要強調 */ --md-sys-color-secondary: var(--k-p2); --md-sys-color-on-secondary: #FFFFFF; --md-sys-color-secondary-container: #FFDBCF; --md-sys-color-on-secondary-container: #3E0E00; /* Tertiary (第三色) - 用於平衡與裝飾 (這裡使用深灰色系平衡暖色) */ --md-sys-color-tertiary: var(--k-p4); --md-sys-color-on-tertiary: #FFFFFF; --md-sys-color-tertiary-container: var(--k-p6); --md-sys-color-on-tertiary-container: var(--k-p3); /* Error (錯誤色) */ --md-sys-color-error: var(--color-error); --md-sys-color-on-error: #FFFFFF; --md-sys-color-error-container: #FFDAD6; --md-sys-color-on-error-container: #410002; /* Success (成功色 - M3 擴充) */ --md-sys-color-success: var(--color-success); --md-sys-color-on-success: #FFFFFF; --md-sys-color-success-container: #D7F8E0; --md-sys-color-on-success-container: #00210A; /* Info（資訊色 - M3 擴充） */ --md-sys-color-info: var(--color-info); --md-sys-color-on-info: #FFFFFF; --md-sys-color-info-container: #E8F0FE; --md-sys-color-on-info-container: #001D36; /* Warning（警告色 - M3 擴充） */ --md-sys-color-warning: var(--color-warning); --md-sys-color-on-warning: #FFFFFF; --md-sys-color-warning-container: #FFF1DC; --md-sys-color-on-warning-container: #3E0E00; /* Background & Surface (背景與表面) */ --md-sys-color-background: var(--k-p8); --md-sys-color-on-background: var(--k-p3); --md-sys-color-surface: var(--k-p9); /* 卡片本體 */ --md-sys-color-on-surface: var(--k-p3); --md-sys-color-surface-variant: var(--k-p7); /* 區塊分隔、輸入框背景 */ --md-sys-color-on-surface-variant: var(--k-p4); --md-sys-color-outline: var(--k-p5); /* 邊框強 */ --md-sys-color-outline-variant: var(--k-p6); /* 邊框弱 */ /* Inverse Surface（用於 tooltip / 深色提示層） */ --md-sys-color-inverse-surface: var(--k-p3); --md-sys-color-inverse-on-surface: var(--k-p9); /* Shadow / Scrim（用於 elevation / overlay） */ --md-sys-color-shadow: rgba(0, 0, 0, 0.20); --md-sys-color-scrim: rgba(0, 0, 0, 0.40); /* Surfaces with Elevation Overlay (模擬) */ --md-sys-color-surface-container-lowest: #FFFFFF; --md-sys-color-surface-container-low: #FFFBF5; --md-sys-color-surface-container: #FFF7EB; --md-sys-color-surface-container-high: #FFF2E0; --md-sys-color-surface-container-highest: #EBEBEB; /* ========================================== * 3. 傳統相容變數 (Legacy Compatibility) * 為了相容舊有 JexHRAI 程式碼，保留並映射 key * ========================================== */ --jexhrai-primary: var(--md-sys-color-primary); --jexhrai-primary-hover: var(--md-sys-color-secondary); /* 舊邏輯 hover 變深橘 */ --jexhrai-primary-active: var(--md-sys-color-secondary); --jexhrai-accent: var(--md-sys-color-secondary); --jexhrai-bg-light: var(--md-sys-color-surface-variant); --jexhrai-bg-white: var(--md-sys-color-surface); --jexhrai-bg-hover: var(--md-sys-color-surface-container); --jexhrai-border: var(--md-sys-color-outline-variant); --jexhrai-border-light: var(--md-sys-color-outline-variant); --jexhrai-text-main: var(--md-sys-color-on-surface); --jexhrai-text-secondary: var(--md-sys-color-on-surface-variant); --jexhrai-text-placeholder: var(--md-sys-color-outline); --jexhrai-text-muted: var(--md-sys-color-outline); /* 狀態色映射 */ --jexhrai-error: var(--md-sys-color-error); --jexhrai-error-bg: var(--md-sys-color-error-container); --jexhrai-error-border: var(--md-sys-color-error); /* 或淡化 */ --jexhrai-success: var(--md-sys-color-success); --jexhrai-success-bg: var(--md-sys-color-success-container); --jexhrai-success-border: var(--md-sys-color-success); --jexhrai-info: var(--md-sys-color-info); --jexhrai-info-bg: var(--md-sys-color-info-container); --jexhrai-info-border: color-mix(in srgb, var(--md-sys-color-info), transparent 75%); --jexhrai-bg-ai-bubble: #F4F2EE; --jexhrai-scrollbar-track: var(--md-sys-color-surface-variant); --jexhrai-scrollbar-thumb: var(--md-sys-color-outline); /* Cover Specific (Legacy) */ --jexhrai-cover-primary: var(--md-sys-color-primary); --jexhrai-cover-primary-hover: var(--md-sys-color-secondary); --jexhrai-cover-primary-active: var(--md-sys-color-secondary); --jexhrai-cover-border: var(--md-sys-color-outline-variant); --jexhrai-cover-bg-gradient-start: var(--md-sys-color-surface-variant); --jexhrai-cover-bg-gradient-end: var(--md-sys-color-background); --jexhrai-cover-text-dark: var(--md-sys-color-on-surface); --jexhrai-cover-text-medium: var(--md-sys-color-on-surface-variant); --jexhrai-cover-text-light: var(--md-sys-color-outline); /* ========================================== * 4. M3 高度系統 (Elevation System) * ========================================== */ --md-sys-elevation-0: none; /* * 說明： * - 使用接近 Material 3 的多層陰影組合，避免硬編碼散落各 CSS 檔 * - 所有卡片/tooltip/浮層陰影一律改用此處 tokens */ --md-sys-elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.10), 0 1px 3px 1px rgba(0, 0, 0, 0.06); --md-sys-elevation-2: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 6px 2px rgba(0, 0, 0, 0.08); --md-sys-elevation-3: 0 2px 4px 0 rgba(0, 0, 0, 0.14), 0 6px 12px 4px rgba(0, 0, 0, 0.10); --md-sys-elevation-4: 0 4px 8px 0 rgba(0, 0, 0, 0.14), 0 10px 20px 6px rgba(0, 0, 0, 0.10); --md-sys-elevation-5: 0 6px 12px 0 rgba(0, 0, 0, 0.16), 0 16px 32px 8px rgba(0, 0, 0, 0.12); /* Legacy Shadow Mapping */ --jexhrai-shadow-sm: var(--md-sys-elevation-1); --jexhrai-shadow-md: var(--md-sys-elevation-2); --jexhrai-shadow-lg: var(--md-sys-elevation-3); --jexhrai-shadow-dropdown: var(--md-sys-elevation-2); --jexhrai-container-shadow: var(--md-sys-elevation-1); /* ========================================== * 5. M3 排版系統 (Typography System) * ========================================== */ --md-sys-typescale-display-large: 700 57px/64px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --md-sys-typescale-display-medium: 700 45px/52px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --md-sys-typescale-display-small: 700 36px/44px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --md-sys-typescale-headline-large: 600 32px/40px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --md-sys-typescale-headline-medium: 600 28px/36px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --md-sys-typescale-headline-small: 600 24px/32px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --md-sys-typescale-title-large: 500 22px/28px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --md-sys-typescale-title-medium: 500 16px/24px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --md-sys-typescale-title-small: 500 14px/20px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --md-sys-typescale-body-large: 400 16px/24px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --md-sys-typescale-body-medium: 400 14px/20px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --md-sys-typescale-body-small: 400 12px/16px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --md-sys-typescale-label-large: 600 14px/20px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --md-sys-typescale-label-medium: 500 12px/16px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --md-sys-typescale-label-small: 500 11px/16px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* ========================================== * 6. M3 形狀系統 (Shape System) * ========================================== */ --md-sys-shape-corner-extra-small: 4px; --md-sys-shape-corner-small: 8px; --md-sys-shape-corner-medium: 12px; --md-sys-shape-corner-large: 16px; --md-sys-shape-corner-extra-large: 28px; --md-sys-shape-corner-full: 9999px; /* Legacy Radius Mapping */ --jexhrai-radius-sm: var(--md-sys-shape-corner-small); --jexhrai-radius-md: var(--md-sys-shape-corner-medium); --jexhrai-radius-lg: var(--md-sys-shape-corner-extra-large); /* 說明：統一對齊 M3 tokens，避免硬編碼圓角造成跨頁不一致 */ --jexhrai-container-radius: var(--jexhrai-radius-lg); --jexhrai-radius-btn: var(--md-sys-shape-corner-full); /* ========================================== * 7. M3 動畫系統 (Motion System) * ========================================== */ --md-sys-motion-easing-standard: cubic-bezier(0.2, 0.0, 0, 1.0); --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0.0, 0, 1.0); --md-sys-motion-duration-short: 200ms; --md-sys-motion-duration-medium: 400ms; --md-sys-motion-duration-long: 600ms; /* Legacy Animation Mapping */ --jexhrai-ease-standard: var(--md-sys-motion-easing-standard); --jexhrai-duration-standard: 0.3s; --jexhrai-transition-standard: all var(--jexhrai-duration-standard) var(--jexhrai-ease-standard); /* Hover Glow Effect */ --jexhrai-container-glow: color-mix(in srgb, var(--md-sys-color-primary), transparent 85%); --jexhrai-container-hover-border: transparent; /* ========================================== * 8. WordPress 相容 (WP Compatibility) * ========================================== */ --jexhrai-wp-primary: #2271b1; --jexhrai-wp-primary-hover: #135e96; --jexhrai-wp-highlight: #0073aa; --jexhrai-wp-error: #d63638; --jexhrai-wp-success: #00a32a; --jexhrai-wp-border: #ccd0d4; --jexhrai-wp-border-hover: #8c8f94; --jexhrai-wp-bg-hover: #f6f7f7; /* Common Grays (Legacy, for internal use) */ --jexhrai-gray-50: #f8f9fa; --jexhrai-gray-100: #f1f1f1; --jexhrai-gray-200: #e9ecef; --jexhrai-gray-300: #dee2e6; --jexhrai-gray-400: #ced4da; --jexhrai-gray-500: #adb5bd; --jexhrai-gray-600: #6c757d; --jexhrai-gray-700: #495057; --jexhrai-gray-800: #343a40; --jexhrai-gray-900: #212529; /* Z-Index */ --jexhrai-z-dropdown: 1000; --jexhrai-z-modal: 2000; --jexhrai-z-tooltip: 3000; }