/* ========================================================================== 公共设计系统 · Design Tokens（teacher / student 共用） -------------------------------------------------------------------------- 规则： 1. 只暴露一层「语义 token」，页面与组件一律引用语义 token，不出现裸色值； 2. 换肤 = 覆盖「品牌相关」token（见 themes/.css），派生色由 color-mix() 自动计算； 3. 本文件定义 :root 基础值 + 尺度/字体/间距，主题覆盖文件只覆盖少量变量。 token 合约（换肤时必须遵守）： - --c-primary 品牌「识别色」：软底 / 描边 / 图标 / 焦点环 / 选中条，默认同时作实心填充色 - --c-primary-solid 品牌「实心填充」底色：主按钮 / 徽标 / 头像 / 开关 / 分页当前页 / 品牌位 —— 默认等于 --c-primary；某套主题需要压深填充来提升白字可读性时，只覆盖这一个 - --c-on-primary 品牌实心填充上的前景：**恒为白色**，主题不得覆盖 —— 不得为迁就偏亮的品牌底改成深色，否则会连带把危险 / 成功 / 信息等深色填充变成「深底深字」 - --c-primary-text 浅底上的品牌「前景」：链接 / 文字按钮 / 选中态 / 焦点描边 —— 由实心填充色再压深一档；品牌色偏亮时主题**必须**显式覆盖，保证 ≥4.5:1 - --c-on-solid 任意「深色实心填充」上的前景：危险 / 成功 / 信息 / 反色 —— 恒为白色，主题不得覆盖 - --c-border 容器「外框」线条（卡片 / 顶栏 / 边栏） - --c-border-soft 容器外框的「轻描边」版本（底色、白各半），用于大面块卡片： 视觉上只留一层雾，再靠 --shadow-card 定形 - --c-divider 容器「内部」线条（卡片头脚 / 表格行线等），比外框更轻，用来分层级 - --shadow-card 卡片级柔阴影；--shadow-brand 跟随品牌色的柔光（用于主按钮 / 当前页） ========================================================================== */ :root { /* ---- 品牌（换肤唯一入口） ---- */ --c-primary: #0f63eb; /* 品牌识别色（默认兼作实心填充）；白字对其达 5.2:1 */ --c-primary-solid: var(--c-primary); /* 实心填充：默认=品牌色；需要压深时主题只改本变量 */ --c-primary-hover: color-mix(in srgb, var(--c-primary-solid) 88%, #000); --c-primary-active: color-mix(in srgb, var(--c-primary-solid) 76%, #000); --c-primary-soft: color-mix(in srgb, var(--c-primary) 12%, #fff); --c-primary-softer: color-mix(in srgb, var(--c-primary) 6%, #fff); --c-primary-border: color-mix(in srgb, var(--c-primary) 35%, #fff); --c-on-primary: #ffffff; /* 恒白：亮品牌底上放深色字不可读，主题不覆盖 */ /* 品牌前景（浅底上的品牌色文字）——由实心填充色再压深；品牌色偏亮时主题须覆盖 */ --c-primary-text: color-mix(in srgb, var(--c-primary-solid) 88%, #000); --c-primary-text-hover: color-mix(in srgb, var(--c-primary-solid) 76%, #000); /* 深色实心填充上的前景：恒白，主题不覆盖 */ --c-on-solid: #ffffff; /* ---- 中性 ---- */ --c-bg: #f6f8fb; --c-surface: #ffffff; --c-surface-2: #f1f4f9; --c-border: #e6ebf3; --c-border-soft: color-mix(in srgb, var(--c-border) 50%, #fff); --c-border-strong: #d2dae6; --c-divider: #eff3f9; --c-text: #1c2430; --c-text-secondary: #5a6675; --c-text-tertiary: #5f6d80; /* ---- 语义 ---- */ --c-success: #15803d; --c-success-soft: #e7f8ed; --c-warning: #b45309; --c-warning-soft: #fdf3e3; /* 评分星：固定亮橙（产品色，不随主题变；「评价 / 实验评价」两处共用）。 不要拿 --c-warning 代替 —— 它是压深过的警示棕橙，做星星太暗。 */ --c-star: #f89b38; --c-danger: #d21c1c; --c-danger-soft: #fdeaea; --c-danger-hover: color-mix(in srgb, var(--c-danger) 88%, #000); --c-danger-active: color-mix(in srgb, var(--c-danger) 76%, #000); --c-info: #0e7490; --c-info-soft: #e6f5fa; /* ---- 图标（url() 也走 token，便于主题跟随前景色） ---- */ --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6d80' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); /* 日历图标：以 mask 使用（只取形状，颜色由使用方给），故描边取纯黑 */ --icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); /* ---- 圆角 / 阴影 / 焦点 ---- 圆角分两档就够：控件小圆角（6）与容器中圆角（12）形成对比； 阴影一律「宽、淡、双层、无硬边」——近距离一层定义边界，远距离一层营造浮起感。 */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05); --shadow-card: 0 1px 2px rgba(16, 24, 40, .03), 0 12px 32px -16px rgba(16, 24, 40, .08); --shadow-md: 0 2px 6px -2px rgba(16, 24, 40, .06), 0 14px 32px -16px rgba(16, 24, 40, .12); --shadow-lg: 0 10px 22px -10px rgba(16, 24, 40, .10), 0 36px 72px -32px rgba(16, 24, 40, .22); --shadow-brand: 0 4px 14px -6px color-mix(in srgb, var(--c-primary-solid) 45%, transparent); --focus-ring: 0 0 0 3px color-mix(in srgb, var(--c-primary) 35%, transparent); --overlay-bg: rgba(16, 24, 40, .45); /* ---- 字体与字阶 ---- 中文优先选用现代无衬线（鸿蒙 / MiSans / OPPO），比「Segoe UI + 微软雅黑」更匀、 字面更小，天然显轻；未安装时逐级回落到系统字体，不引入任何网络字体依赖。 */ --font-sans: "HarmonyOS Sans SC", "MiSans", "OPPO Sans", "PingFang SC", "Source Han Sans SC", "Noto Sans SC", system-ui, -apple-system, "Microsoft YaHei", "Segoe UI", sans-serif; --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Consolas, monospace; --fs-xs: 12px; --fs-sm: 14px; /* 1.5× 缩放下保持偶数字号，避免落在非整数设备像素而发虚 */ --fs-base: 14px; --fs-lg: 16px; --fs-xl: 22px; --fs-2xl: 26px; --fs-3xl: 32px; --lh-tight: 1.3; --lh-base: 1.6; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---- 间距（6 档） ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; /* ---- 框架尺度 ---- 设计基准：1920×1080 显示器、浏览器放大 1.5 倍 → 逻辑视口 1280×720。 容器 1200 落在 1280 内，两侧各余 40，再叠加 --layout-gutter 24， 正文距屏边 64px —— 「能容不贴边」。 顶栏内容区与正文容器同宽（见 layout.css 的 .ui-console__topbar）。 */ --layout-container-max: 1200px; --layout-gutter: var(--sp-5); --topbar-h: 56px; --subnav-h: 44px; --sidebar-w: 232px; /* ---- 层级 ---- */ --z-sidebar: 90; --z-header: 100; --z-dropdown: 500; --z-overlay: 1000; --z-floating: 1100; /* ---- 动效 ---- --ease-spring 只给「有回弹感的小位移」用（开关旋钮 / 浮层弹出）， 大面积位移仍用 --ease-out，避免整体显得晃。 */ --ease-out: cubic-bezier(.22, .61, .36, 1); --ease-spring: cubic-bezier(.34, 1.32, .64, 1); --dur-fast: .14s; --dur-base: .24s; --dur-slow: .38s; }