/* ============================================================ * 咖莱翼 · 主题层（Theme Palettes） * ------------------------------------------------------------ * 【核心机制：只换色板，不换语义】 * tokens.css 的语义层是「--primary: var(--blue-500)」这种"指向"关系， * 所以本文件只需覆盖 --blue-* 色板，全站 185 处语义引用自动跟随， * **无需改动任何一行业务 CSS**。 * * 【切换方式】 * 方式一（内置主题）： * 方式二（自定义色）：theme.js 往 :root 内联写入 --blue-*（优先级最高） * * 【新增一套主题只需复制下面 7 行并改色值】，无需碰任何业务代码。 * ============================================================ */ /* ------------------------------------------------------------ * 内置主题 1 · 品牌蓝（默认，与画布主色 #1D6DF0 一致） * 说明：基线色板已定义在 tokens.css 的 :root，此处仅显式声明一次， * 便于用户从其他主题切回默认。 * ---------------------------------------------------------- */ [data-theme="default"] { --blue-50: #E6F1FB; --blue-100: #CCE3F8; --blue-200: #99C7F0; --blue-300: #66ABE8; --blue-400: #338FE0; --blue-500: #1D6DF0; --blue-600: #1668DC; --blue-700: #0C447C; --blue-800: #093661; --blue-900: #062646; --primary-rgb: 29, 109, 240; } /* ------------------------------------------------------------ * 内置主题 2 · 翡翠绿（清新、餐饮/零售场景） * ---------------------------------------------------------- */ [data-theme="emerald"] { --blue-50: #E7F8F2; --blue-100: #C6F0E2; --blue-200: #8DE2C6; --blue-300: #54D3AA; --blue-400: #20C48F; --blue-500: #10B981; --blue-600: #0E9E6E; --blue-700: #0B7D57; --blue-800: #085F42; --blue-900: #05402C; --primary-rgb: 16, 185, 129; } /* ------------------------------------------------------------ * 内置主题 3 · 石墨灰蓝（商务、低饱和、财务/后台场景） * ---------------------------------------------------------- */ [data-theme="graphite"] { --blue-50: #EDF1F6; --blue-100: #D9E0E9; --blue-200: #B4C0D0; --blue-300: #8EA0B7; --blue-400: #6B819D; --blue-500: #475569; --blue-600: #3D4A5C; --blue-700: #2F3A48; --blue-800: #232B35; --blue-900: #171C23; --primary-rgb: 71, 85, 105; } /* ------------------------------------------------------------ * 内置主题 4 · 商务紫（科技感、SaaS 观感） * ---------------------------------------------------------- */ [data-theme="violet"] { --blue-50: #F1EAFE; --blue-100: #E3D5FD; --blue-200: #C7ABFB; --blue-300: #AB81F9; --blue-400: #8F57F7; --blue-500: #7C3AED; --blue-600: #6931CA; --blue-700: #54279F; --blue-800: #3F1D77; --blue-900: #2A134F; --primary-rgb: 124, 58, 237; } /* ------------------------------------------------------------ * 内置主题 5 · 暖橙（活力、外卖/促销场景） * ---------------------------------------------------------- */ [data-theme="sunset"] { --blue-50: #FEF0E6; --blue-100: #FEE1CD; --blue-200: #FDC39B; --blue-300: #FCA569; --blue-400: #FB8737; --blue-500: #F97316; --blue-600: #D46212; --blue-700: #A94D0E; --blue-800: #7E390B; --blue-900: #532607; --primary-rgb: 249, 115, 22; } /* ------------------------------------------------------------ * 内置主题 6 · 青碧（冷静、数据看板场景） * ---------------------------------------------------------- */ [data-theme="teal"] { --blue-50: #E5F5F9; --blue-100: #C2EBF3; --blue-200: #85D7E7; --blue-300: #48C3DB; --blue-400: #0BA5C0; --blue-500: #0891B2; --blue-600: #077B97; --blue-700: #056177; --blue-800: #044759; --blue-900: #022E3B; --primary-rgb: 8, 145, 178; } /* ------------------------------------------------------------ * 内置主题 7 · 酒红（稳重、餐饮品牌调性） * ---------------------------------------------------------- */ [data-theme="crimson"] { --blue-50: #FCE8E8; --blue-100: #F9D1D1; --blue-200: #F3A3A3; --blue-300: #ED7575; --blue-400: #E74747; --blue-500: #DC2626; --blue-600: #BB2020; --blue-700: #941919; --blue-800: #6D1313; --blue-900: #470C0C; --primary-rgb: 220, 38, 38; } /* ============================================================ * 布局密度（Layout Density） * ------------------------------------------------------------ * 【为什么要独立成维度】 * 换色系管"好看"，密度管"信息量"。两者正交，可自由组合。 * 改布局时最常调的就是间距 —— 这里改一处，全站节奏同步缩放。 * * 【切换方式】 * ============================================================ */ /* 紧凑：一屏看更多数据（表格多、字段密的场景） */ [data-density="compact"] { --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 20px; --space-7: 28px; --space-8: 32px; --row-h: 36px; --grid-gap: 12px; --grid-gap-lg: 16px; --container-pad: 16px; --fs-base: 12px; } /* 舒适（默认，等同 tokens.css 基线） */ [data-density="comfortable"] { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px; --row-h: 44px; --grid-gap: 16px; --grid-gap-lg: 24px; --container-pad: 24px; --fs-base: 13px; } /* 宽松：大屏演示 / 触屏操作 */ [data-density="loose"] { --space-1: 6px; --space-2: 12px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 40px; --space-7: 52px; --space-8: 64px; --row-h: 52px; --grid-gap: 24px; --grid-gap-lg: 32px; --container-pad: 32px; --fs-base: 14px; } /* ============================================================ * 圆角风格（Radius Style） * ------------------------------------------------------------ * 换"气质"的最低成本方式：一处切换，全站卡片/按钮/输入框同步。 * 【切换方式】 * ============================================================ */ [data-radius="square"] { --radius-sm: 2px; --radius: 2px; --radius-md: 2px; --radius-lg: 3px; --radius-xl: 4px; --radius-card: 3px; } [data-radius="soft"] { --radius-sm: 4px; --radius: 8px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-card: 12px; } [data-radius="round"] { --radius-sm: 8px; --radius: 14px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 26px; --radius-card: 20px; } /* ============================================================ * 字号档位（Font Scale） * ------------------------------------------------------------ * 大屏演示 / 老花友好场景，一键放大全站字号（不改布局）。 * 【切换方式】 * ============================================================ */ [data-font="large"] { --fs-xs: 13px; --fs-sm: 14px; --fs-base: 15px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 27px; --fs-3xl: 31px; } /* ============================================================ * 外观设置面板样式（自包含，不依赖业务 CSS） * ------------------------------------------------------------ * 独立前缀 ap-（appearance），避免与既有类名冲突。 * ============================================================ */ .ap-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); } .ap-section:first-child { margin-top: 0; padding-top: 0; border-top: none; } .ap-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); margin-bottom: 4px; } .ap-desc { font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: 12px; line-height: var(--lh-normal); } .ap-label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); margin-bottom: 8px; display: block; } /* —— 主题选择卡 —— */ .ap-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; } .ap-swatch { border: 2px solid var(--border); border-radius: var(--radius-md); padding: 8px; cursor: pointer; text-align: center; background: var(--card-bg); transition: border-color .15s, transform .1s; } .ap-swatch:hover { border-color: var(--border-dark); transform: translateY(-1px); } .ap-swatch.is-active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .ap-swatch-dots { display: flex; justify-content: center; gap: 3px; margin-bottom: 6px; } .ap-swatch-dots i { width: 14px; height: 14px; border-radius: 50%; display: block; } .ap-swatch-name { font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.3; } /* —— 分段选择器（密度 / 圆角 / 字号）—— */ .ap-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .ap-seg button { border: none; background: var(--card-bg); color: var(--text-secondary); padding: 7px 16px; font-size: var(--fs-sm); cursor: pointer; border-right: 1px solid var(--border); transition: background .15s, color .15s; } .ap-seg button:last-child { border-right: none; } .ap-seg button:hover { background: var(--gray-50); } .ap-seg button.is-active { background: var(--primary); color: #fff; font-weight: var(--fw-medium); } /* —— 自定义主色 —— */ .ap-custom { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ap-color-input { width: 46px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; background: none; } .ap-hex-input { padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--fs-sm); width: 110px; font-family: ui-monospace, Consolas, monospace; background: var(--card-bg); color: var(--text); } .ap-scale { display: flex; gap: 0; margin-top: 10px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); } .ap-scale i { flex: 1; height: 26px; display: block; } /* —— 预设快捷色 —— */ .ap-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .ap-preset { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; } .ap-preset:hover { transform: scale(1.12); } .ap-preset.is-active { border-color: var(--text); } /* —— 实时预览条 —— */ .ap-preview { margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--gray-25); } .ap-preview-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .ap-preview-logo { width: 22px; height: 22px; border-radius: var(--radius-sm); background: var(--primary); flex: none; } .ap-preview-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--primary-dark); } .ap-preview-actions { margin-left: auto; display: flex; gap: 6px; } .ap-preview-btn { font-size: var(--fs-xs); padding: 4px 10px; border-radius: var(--radius-sm); } .ap-preview-btn.solid { background: var(--primary); color: #fff; } .ap-preview-btn.ghost { border: 1px solid var(--primary); color: var(--primary); background: transparent; } .ap-preview-card { display: flex; gap: 8px; } .ap-preview-kpi { flex: 1; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 10px; } .ap-preview-kpi b { display: block; font-size: var(--fs-lg); color: var(--primary); } .ap-preview-kpi span { font-size: var(--fs-xs); color: var(--text-secondary); } /* —— 悬浮入口按钮 —— */ .ap-fab { position: fixed; right: 18px; bottom: 18px; z-index: var(--z-toast); width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--primary); color: #fff; font-size: 19px; cursor: pointer; box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; transition: transform .15s, box-shadow .15s; } .ap-fab:hover { transform: scale(1.08); box-shadow: var(--shadow-xl); }