education/frontend/src/assets/styles/design-tokens.scss

// ============================================================
// 设计 Token 体系（Design Tokens）
// 全站统一颜色 / 字体 / 间距 / 圆角 / 阴影 / 边框 / 层级 / 断点
// 约定：
//   1. 业务代码禁止散落魔法数字，一律引用下方 $token / --token
//   2. SCSS 变量供样式内使用，:root 自定义属性供内联/动态样式使用
// ============================================================
@import './variables.scss';

// ------------------------- 色彩 Token -------------------------
// 主色：教育绿
$token-color-primary: #00875a;            // 主色
$token-color-primary-hover: #0b9e6c;      // hover
$token-color-primary-active: #006b47;     // active
$token-color-primary-light: #e6f4ea;      // 浅底（标签/选中背景）
$token-color-primary-lighter: #f0f9f4;    // 更浅（hover 背景/斑马）
$token-color-primary-ring: rgba(0, 135, 90, 0.35); // 聚焦外光晕

// 语义色
$token-color-danger: #ff4949;             // 危险
$token-color-success: #13ce66;            // 成功
$token-color-warning: #ffba00;            // 警告
$token-color-info: #909399;               // 中性信息

// 中性灰阶（对齐 Element 三级文字）
$token-color-text-main: #303133;          // 主要文字
$token-color-text-regular: #606266;       // 常规文字
$token-color-text-secondary: #909399;     // 次要文字
$token-color-text-placeholder: #c0c4cc;   // 占位
$token-color-border: #dcdfe6;             // 边框
$token-color-border-light: #e4e7ed;       // 浅边框
$token-color-border-lighter: #ebeef5;     // 极浅边框（分割线）
$token-color-fill: #f5f7fa;               // 填充/底灰
$token-color-fill-light: #f0f2f5;         // 更浅填充

// ------------------------- 字体 Token -------------------------
$token-font-family: 'Helvetica Neue', Helvetica, 'PingFang SC',
  'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
$token-font-size-xs: 12px;
$token-font-size-sm: 13px;
$token-font-size-base: 14px;
$token-font-size-lg: 16px;
$token-font-size-xl: 20px;

// ------------------------- 间距 Token -------------------------
$token-space-xs: 4px;
$token-space-sm: 8px;
$token-space-md: 12px;
$token-space-lg: 16px;
$token-space-xl: 20px;
$token-space-2xl: 24px;

// ------------------------- 圆角 Token -------------------------
$token-radius-sm: 2px;
$token-radius-md: 4px;
$token-radius-lg: 6px;
$token-radius-xl: 8px;
$token-radius-circle: 50%;

// ------------------------- 阴影 Token -------------------------
$token-shadow-light: 0 1px 4px rgba(0, 0, 0, 0.08);
$token-shadow-card: 0 1px 4px rgba(0, 0, 0, 0.06);
$token-shadow-popup: 0 2px 12px rgba(0, 0, 0, 0.12);

// ------------------------- 层级 Token -------------------------
$token-z-index-dropdown: 2000;   // 下拉/气泡
$token-z-index-mask: 2001;       // 遮罩
$token-z-index-modal: 2002;      // 弹窗
$token-z-index-toast: 3000;      // 消息/通知

// ------------------------- 断点 Token -------------------------
$token-breakpoint-xs: 480px;
$token-breakpoint-sm: 768px;
$token-breakpoint-md: 992px;
$token-breakpoint-lg: 1200px;
$token-breakpoint-xl: 1920px;

// ------------------------- 暴露给运行时（CSS 变量） -------------------------
:root {
  --token-color-primary: #{$token-color-primary};
  --token-color-primary-hover: #{$token-color-primary-hover};
  --token-color-primary-active: #{$token-color-primary-active};
  --token-color-primary-light: #{$token-color-primary-light};
  --token-color-primary-lighter: #{$token-color-primary-lighter};
  --token-color-primary-ring: #{$token-color-primary-ring};

  --token-color-danger: #{$token-color-danger};
  --token-color-success: #{$token-color-success};
  --token-color-warning: #{$token-color-warning};
  --token-color-info: #{$token-color-info};

  --token-color-text-main: #{$token-color-text-main};
  --token-color-text-regular: #{$token-color-text-regular};
  --token-color-text-secondary: #{$token-color-text-secondary};
  --token-color-text-placeholder: #{$token-color-text-placeholder};
  --token-color-border: #{$token-color-border};
  --token-color-border-light: #{$token-color-border-light};
  --token-color-border-lighter: #{$token-color-border-lighter};
  --token-color-fill: #{$token-color-fill};
  --token-color-fill-light: #{$token-color-fill-light};

  --token-font-family: #{$token-font-family};
  --token-font-size-xs: #{$token-font-size-xs};
  --token-font-size-sm: #{$token-font-size-sm};
  --token-font-size-base: #{$token-font-size-base};
  --token-font-size-lg: #{$token-font-size-lg};
  --token-font-size-xl: #{$token-font-size-xl};

  --token-space-xs: #{$token-space-xs};
  --token-space-sm: #{$token-space-sm};
  --token-space-md: #{$token-space-md};
  --token-space-lg: #{$token-space-lg};
  --token-space-xl: #{$token-space-xl};
  --token-space-2xl: #{$token-space-2xl};

  --token-radius-sm: #{$token-radius-sm};
  --token-radius-md: #{$token-radius-md};
  --token-radius-lg: #{$token-radius-lg};
  --token-radius-xl: #{$token-radius-xl};

  --token-shadow-light: #{$token-shadow-light};
  --token-shadow-card: #{$token-shadow-card};
  --token-shadow-popup: #{$token-shadow-popup};

  --token-z-index-dropdown: #{$token-z-index-dropdown};
  --token-z-index-mask: #{$token-z-index-mask};
  --token-z-index-modal: #{$token-z-index-modal};
  --token-z-index-toast: #{$token-z-index-toast};
}

// ------------------------- 暴露给 JS 模块 -------------------------
:export {
  colorPrimary: $token-color-primary;
  colorPrimaryHover: $token-color-primary-hover;
  colorPrimaryActive: $token-color-primary-active;
  colorPrimaryLight: $token-color-primary-light;
  colorPrimaryLighter: $token-color-primary-lighter;
  colorDanger: $token-color-danger;
  colorSuccess: $token-color-success;
  colorWarning: $token-color-warning;
  fontFamily: $token-font-family;
  breakpointXs: $token-breakpoint-xs;
  breakpointSm: $token-breakpoint-sm;
  breakpointMd: $token-breakpoint-md;
  breakpointLg: $token-breakpoint-lg;
  breakpointXl: $token-breakpoint-xl;
}