/** * KINGSI PLM — Design Tokens（多皮肤） * 切换方式： * 各主题用 html[data-theme=…]（特异性高于 :root） */ /* 默认回退 = 工业 PLM */ :root { --c-primary: #1B4F72; --c-primary-hover: #154360; --c-primary-rgb: 27, 79, 114; --c-accent: #2874A6; --c-accent-rgb: 40, 116, 166; --c-secondary: #764ba2; --c-bg: #EEF1F4; --c-surface: #ffffff; --c-surface-muted: #f4f6f8; --c-border: #D0D7DE; --c-border-strong: #B8C2CC; --c-text: #1F2937; --c-text-secondary: #6B7280; --c-text-muted: #9CA3AF; --c-text-on-primary: #ffffff; --c-heading: #1A3A52; --c-nav-bg: #163A54; --c-nav-bg-end: #163A54; --c-nav-link: rgba(255, 255, 255, 0.88); --c-nav-link-hover-bg: rgba(255, 255, 255, 0.12); --c-nav-link-active-bg: rgba(255, 255, 255, 0.18); --c-nav-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), 0 2px 8px rgba(22, 58, 84, 0.25); --c-auth-bg: #163A54; --c-auth-bg-end: #1B4F72; --c-auth-card-radius: 6px; --c-auth-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.28); --g-primary: #1B4F72; --g-primary-hover: #154360; --g-success: #1a7a5c; --g-danger: #c0392b; --c-btn-success: #1A6B52; --c-btn-success-hover: #155A45; --c-btn-danger: #A93226; --c-btn-danger-hover: #922B21; --c-btn-warning: #B9770E; --c-btn-warning-hover: #9A640C; --c-btn-info: #1F618D; --c-btn-info-hover: #1A5276; --c-btn-secondary: #5D6D7E; --c-btn-secondary-hover: #4A5866; --c-btn-secondary-bg: #EEF1F4; --c-btn-secondary-text: #34495E; --c-btn-secondary-border: #D0D7DE; --c-btn-pad-y: 8px; --c-btn-pad-x: 16px; --c-btn-font: 13px; --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-xl: 8px; --c-btn-radius: 4px; --c-btn-height: 36px; --c-focus-ring: rgba(27, 79, 114, 0.18); --c-dropdown-hover-bg: rgba(27, 79, 114, 0.08); --c-dropdown-shadow: 0 6px 16px rgba(22, 58, 84, 0.14); --c-card-shadow: 0 1px 3px rgba(22, 58, 84, 0.08); --c-card-shadow-lg: 0 4px 16px rgba(22, 58, 84, 0.1); --c-btn-shadow: 0 2px 8px rgba(27, 79, 114, 0.28); --nav-height: 55px; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif; } html[data-theme="industrial"] { --c-primary: #1B4F72; --c-primary-hover: #154360; --c-primary-rgb: 27, 79, 114; --c-accent: #2874A6; --c-accent-rgb: 40, 116, 166; --c-bg: #EEF1F4; --c-surface-muted: #f4f6f8; --c-border: #D0D7DE; --c-border-strong: #B8C2CC; --c-text: #1F2937; --c-text-secondary: #6B7280; --c-text-muted: #9CA3AF; --c-heading: #1A3A52; --c-nav-bg: #163A54; --c-nav-bg-end: #163A54; --c-auth-bg: #163A54; --c-auth-bg-end: #1B4F72; --c-auth-card-radius: 6px; --g-primary: #1B4F72; --g-primary-hover: #154360; --c-btn-success: #1A6B52; --c-btn-success-hover: #155A45; --c-btn-danger: #A93226; --c-btn-danger-hover: #922B21; --c-btn-secondary-bg: #EEF1F4; --c-btn-secondary-text: #34495E; --c-btn-secondary-border: #D0D7DE; --c-btn-radius: 4px; --c-btn-height: 36px; --c-focus-ring: rgba(27, 79, 114, 0.18); --c-dropdown-hover-bg: rgba(27, 79, 114, 0.08); --c-btn-shadow: 0 2px 8px rgba(27, 79, 114, 0.28); --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-xl: 8px; } /* 清爽蓝：天空蓝主色，浅底，顶栏不沉闷 */ html[data-theme="fresh"] { --c-primary: #2B6CB0; --c-primary-hover: #245A94; --c-primary-rgb: 43, 108, 176; --c-accent: #3B82C4; --c-accent-rgb: 59, 130, 196; --c-secondary: #4A90C8; --c-bg: #F3F7FB; --c-surface: #ffffff; --c-surface-muted: #EAF1F8; --c-border: #D5E2EF; --c-border-strong: #B8CDE0; --c-text: #1E293B; --c-text-secondary: #64748B; --c-text-muted: #94A3B8; --c-text-on-primary: #ffffff; --c-heading: #1E3A5F; --c-nav-bg: #3B82C4; --c-nav-bg-end: #2B6CB0; --c-nav-link: rgba(255, 255, 255, 0.92); --c-nav-link-hover-bg: rgba(255, 255, 255, 0.16); --c-nav-link-active-bg: rgba(255, 255, 255, 0.22); --c-nav-shadow: 0 1px 0 rgba(43, 108, 176, 0.12), 0 2px 10px rgba(43, 108, 176, 0.18); --c-auth-bg: #3B82C4; --c-auth-bg-end: #60A5D8; --c-auth-card-radius: 10px; --c-auth-card-shadow: 0 12px 40px rgba(43, 108, 176, 0.22); --g-primary: #2B6CB0; --g-primary-hover: #245A94; --g-success: #0d9488; --g-danger: #dc2626; --c-btn-success: #0D9488; --c-btn-success-hover: #0F766E; --c-btn-danger: #DC2626; --c-btn-danger-hover: #B91C1C; --c-btn-warning: #D97706; --c-btn-warning-hover: #B45309; --c-btn-info: #0284C7; --c-btn-info-hover: #0369A1; --c-btn-secondary: #64748B; --c-btn-secondary-hover: #475569; --c-btn-secondary-bg: #EAF1F8; --c-btn-secondary-text: #334155; --c-btn-secondary-border: #D5E2EF; --c-btn-pad-y: 8px; --c-btn-pad-x: 16px; --c-btn-font: 13px; --c-btn-radius: 5px; --c-btn-height: 36px; --c-focus-ring: rgba(43, 108, 176, 0.2); --c-dropdown-hover-bg: rgba(43, 108, 176, 0.08); --c-dropdown-shadow: 0 8px 20px rgba(43, 108, 176, 0.14); --c-card-shadow: 0 1px 3px rgba(43, 108, 176, 0.08); --c-card-shadow-lg: 0 6px 20px rgba(43, 108, 176, 0.12); --c-btn-shadow: 0 2px 8px rgba(43, 108, 176, 0.28); --r-sm: 4px; --r-md: 5px; --r-lg: 8px; --r-xl: 10px; } html[data-theme="classic"] { --c-primary: #667eea; --c-primary-hover: #5a6fd6; --c-primary-rgb: 102, 126, 234; --c-accent: #764ba2; --c-accent-rgb: 118, 75, 162; --c-secondary: #764ba2; --c-bg: #f5f5f5; --c-surface: #ffffff; --c-surface-muted: #f8f9fa; --c-border: #e8ecef; --c-border-strong: #d5dae0; --c-text: #333333; --c-text-secondary: #7f8c8d; --c-text-muted: #999999; --c-text-on-primary: #ffffff; --c-heading: #2c3e50; --c-nav-bg: #667eea; --c-nav-bg-end: #764ba2; --c-nav-link: rgba(255, 255, 255, 0.85); --c-nav-link-hover-bg: rgba(255, 255, 255, 0.15); --c-nav-link-active-bg: rgba(255, 255, 255, 0.2); --c-nav-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); --c-auth-bg: #667eea; --c-auth-bg-end: #764ba2; --c-auth-card-radius: 20px; --c-auth-card-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); --g-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --g-primary-hover: linear-gradient(135deg, #5a6fd6 0%, #6a4290 100%); --g-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); --g-danger: linear-gradient(135deg, #dc3545 0%, #c82333 100%); --c-btn-success: #27ae60; --c-btn-success-hover: #229954; --c-btn-danger: #e74c3c; --c-btn-danger-hover: #c0392b; --c-btn-warning: #f39c12; --c-btn-warning-hover: #e67e22; --c-btn-info: #17a2b8; --c-btn-info-hover: #138496; --c-btn-secondary: #95a5a6; --c-btn-secondary-hover: #7f8c8d; --c-btn-secondary-bg: #e8ecef; --c-btn-secondary-text: #555555; --c-btn-secondary-border: #d5dae0; --c-btn-pad-y: 10px; --c-btn-pad-x: 18px; --c-btn-font: 14px; --c-btn-radius: 6px; --c-btn-height: 40px; --c-focus-ring: rgba(102, 126, 234, 0.1); --c-dropdown-hover-bg: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); --c-dropdown-shadow: 0 8px 20px rgba(102, 126, 234, 0.2); --c-card-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); --c-card-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.2); --c-btn-shadow: 0 5px 20px rgba(102, 126, 234, 0.4); --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 10px; } /* 樱花粉：柔和暖粉，简洁清爽 */ html[data-theme="rose"] { --c-primary: #D4618C; --c-primary-hover: #C04E7A; --c-primary-rgb: 212, 97, 140; --c-accent: #E8839B; --c-accent-rgb: 232, 131, 155; --c-secondary: #B5628C; --c-bg: #FBF5F7; --c-surface: #ffffff; --c-surface-muted: #F5EBF0; --c-border: #E8D5DD; --c-border-strong: #D4BFCA; --c-text: #3D2B35; --c-text-secondary: #7A6070; --c-text-muted: #A8929E; --c-text-on-primary: #ffffff; --c-heading: #4A2040; --c-nav-bg: #D4618C; --c-nav-bg-end: #C94D7E; --c-nav-link: rgba(255, 255, 255, 0.92); --c-nav-link-hover-bg: rgba(255, 255, 255, 0.16); --c-nav-link-active-bg: rgba(255, 255, 255, 0.22); --c-nav-shadow: 0 1px 0 rgba(180, 70, 120, 0.1), 0 2px 10px rgba(212, 97, 140, 0.18); --c-auth-bg: #D4618C; --c-auth-bg-end: #E8839B; --c-auth-card-radius: 12px; --c-auth-card-shadow: 0 12px 40px rgba(212, 97, 140, 0.22); --g-primary: #D4618C; --g-primary-hover: #C04E7A; --g-success: #0d9488; --g-danger: #dc2626; --c-btn-success: #0D9488; --c-btn-success-hover: #0F766E; --c-btn-danger: #DC2626; --c-btn-danger-hover: #B91C1C; --c-btn-warning: #D97706; --c-btn-warning-hover: #B45309; --c-btn-info: #D4618C; --c-btn-info-hover: #C04E7A; --c-btn-secondary: #7A6070; --c-btn-secondary-hover: #5E4555; --c-btn-secondary-bg: #F5EBF0; --c-btn-secondary-text: #4A2040; --c-btn-secondary-border: #E8D5DD; --c-btn-pad-y: 8px; --c-btn-pad-x: 16px; --c-btn-font: 13px; --c-btn-radius: 6px; --c-btn-height: 36px; --c-focus-ring: rgba(212, 97, 140, 0.2); --c-dropdown-hover-bg: rgba(212, 97, 140, 0.08); --c-dropdown-shadow: 0 8px 20px rgba(212, 97, 140, 0.12); --c-card-shadow: 0 1px 3px rgba(212, 97, 140, 0.08); --c-card-shadow-lg: 0 6px 20px rgba(212, 97, 140, 0.12); --c-btn-shadow: 0 2px 8px rgba(212, 97, 140, 0.28); --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; }