/* ============================================================================= * RakuTool Design System — Design Tokens * ----------------------------------------------------------------------------- * 单一事实来源（Single Source of Truth）。 * 本文件的设计语言 100% 源自 HeaderComponent（internal/site/site.go 中的 * `.rt-*` 样式），未引入任何其他组件的取值，以保证「以 header 为中心」。 * * 命名约定：--rt-- * - 颜色：--rt-color-* * - 圆角：--rt-radius-* * - 间距：--rt-space-* * - 字体：--rt-font-* / --rt-leading-* * - 阴影：--rt-shadow-* * - 动效：--rt-duration-* / --rt-ease* * - 布局：--rt-container-* / --rt-nav-* * - 断点：--rt-breakpoint-* * * 后续「组件库 / 全站统一」都只消费这里的 token，禁止在组件里再写死色值。 * ========================================================================== */ :root { /* --------------------------------------------------------------------------- * 1. COLOR — BRAND (Blue) * 来源：header 渐变、链接、当前项、分类标题、悬停填充 * ------------------------------------------------------------------------ */ --rt-color-primary: #2196F3; /* Brand Blue 500 — 悬停填充 / 渐变起止 */ --rt-color-primary-hover: #1976D2; /* Brand Blue 700 — 按钮悬停（与 header 同源体系） */ --rt-color-primary-strong: #1565c0; /* Brand Blue 800 — 链接 / 当前项 / 导航标题文字 */ --rt-color-primary-darker: #0d47a1; /* Brand Blue 900 — 分类标题 / 阴影蓝色调 */ --rt-color-accent: #26c6da; /* Cyan 400 — 渐变中部点缀 */ /* --------------------------------------------------------------------------- * 2. COLOR — SURFACE (白 / 浅蓝) * 来源：header 卡片底、分类链接底、导航按钮悬停底 * ------------------------------------------------------------------------ */ --rt-color-surface: #ffffff; /* 卡片 / 组件底 */ --rt-color-surface-blue-50: #f1f6fd; /* 分类链接底（极浅蓝） */ --rt-color-surface-blue-100: #f5faff; /* 导航按钮悬停底 */ --rt-color-surface-blue-border:#e3eefb; /* 分类链接描边（浅蓝） */ --rt-color-page: #f5f5f5; /* 页面底色（body 背景，header 所处容器） */ /* --------------------------------------------------------------------------- * 3. COLOR — NEUTRAL (石板灰 / 蓝灰，非纯灰) * 设计语言特征：文字使用偏蓝的中性色，而非 #333/#666 纯灰，更冷更统一 * ------------------------------------------------------------------------ */ --rt-color-text: #333333; /* 主文字（继承 body） */ --rt-color-text-secondary: #5b6b7c; /* 标语 tagline */ --rt-color-text-tertiary: #8a99a8; /* 面包屑文字 */ --rt-color-text-quiet: #c2ccd6; /* 面包屑分隔符 › */ --rt-color-chevron: #90a4ae; /* 折叠箭头 */ --rt-color-ink-soft: #999999; /* 页脚（来自 base，统一中性灰） */ /* 中性灰阶（组件库：次按钮 / 进度底 / 分隔线，与 header 冷调一致） */ --rt-color-neutral-200: #e0e0e0; /* 进度条底 / 浅分隔 */ --rt-color-neutral-300: #eeeeee; /* 分隔线 */ --rt-color-neutral-500: #9e9e9e; /* 禁用 / 占位 */ --rt-color-neutral-600: #757575; /* 次按钮 */ --rt-color-neutral-700: #616161; /* 次按钮悬停 */ /* 描边 */ --rt-color-border: #e3eefb; /* 组件描边（蓝调，header 默认） */ --rt-color-border-strong: #dddddd; /* 强描边（base 通用） */ --rt-color-divider: #eeeeee; /* 行内分隔线 */ /* --------------------------------------------------------------------------- * 4. COLOR — SEMANTIC (语义色，供组件库复用) * 来源：全站已用，作为设计系统的一部分在此登记，便于统一 * ------------------------------------------------------------------------ */ --rt-color-success: #4CAF50; --rt-color-danger: #f44336; --rt-color-warning: #FF9800; /* 语义表面（alert / meter 等组件的三件套：底 / 描边 / 文字） */ --rt-color-info-bg: #e3f2fd; --rt-color-info-border: #2196F3; --rt-color-info-text: #1565c0; --rt-color-success-bg: #e8f5e9; --rt-color-success-border: #4CAF50; --rt-color-success-text: #2e7d32; --rt-color-warning-bg: #fff9e6; --rt-color-warning-border: #ffc107; --rt-color-warning-text: #f57c00; --rt-color-danger-bg: #ffebee; --rt-color-danger-border: #f44336; --rt-color-danger-text: #c62828; /* 评分分级（score / meter 的 grade 修饰符：easy·normal·hard·very-hard·good·bad·poor·excellent） */ --rt-color-grade-good: #8BC34A; /* 评分好（轻绿，无对应语义色时专用） */ --rt-color-grade-normal: #FFC107; /* 评分中（琥珀，无对应语义色时专用） */ --rt-color-grade-good-bg: #f1f8e9; /* 评分圆背景 */ --rt-color-grade-normal-bg: #fff8e1; /* 评分圆背景 */ /* --------------------------------------------------------------------------- * 5. GRADIENT — BRAND * 来源：.rt-header::before 顶部 4px 渐变条 * ------------------------------------------------------------------------ */ --rt-gradient-brand: linear-gradient(90deg, #2196F3 0%, #26c6da 50%, #2196F3 100%); /* --------------------------------------------------------------------------- * 6. RADIUS * 来源：header 卡片 14px / 分类链接胶囊 999px / 通用 4·8px * ------------------------------------------------------------------------ */ --rt-radius-sm: 4px; /* 输入框 / 细节点 */ --rt-radius-md: 8px; /* 通用容器 */ --rt-radius-lg: 14px; /* header / nav 卡片 */ --rt-radius-pill: 999px; /* 分类链接胶囊 */ /* --------------------------------------------------------------------------- * 7. SHADOW * 来源：header / nav 用蓝色调软阴影；base 用中性软阴影 * ------------------------------------------------------------------------ */ --rt-shadow-card: 0 2px 10px rgba(13, 71, 161, .08); /* header / nav 默认 */ --rt-shadow-card-soft:0 2px 8px rgba(0, 0, 0, .10); /* 通用卡片（base 同源） */ /* --------------------------------------------------------------------------- * 8. SPACING — 4px 基线节奏 * 来源：header 实际内边距 / 间距（核心 4·8·12·16·20·24 + header 专用的 14·18·22） * ------------------------------------------------------------------------ */ --rt-space-1: 4px; --rt-space-2: 8px; --rt-space-3: 12px; --rt-space-4: 16px; /* header 外边距 / nav 按钮内边距基准 */ --rt-space-5: 20px; /* 卡片横向内边距 */ --rt-space-6: 24px; /* 区块下边距 */ /* header 专用中间档（保留以保证还原度，组件库建议优先用 4 的倍数） */ --rt-space-14: 14px; /* 面包屑上边距 */ --rt-space-18: 18px; /* 卡片顶部内边距 / nav 网格行距 */ --rt-space-22: 22px; /* 卡片顶部内边距 */ /* --------------------------------------------------------------------------- * 9. TYPOGRAPHY * 来源：header 字体栈 / 各档字号 / 行高 / 字重 * ------------------------------------------------------------------------ */ --rt-font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif; --rt-font-mono: monospace; --rt-leading-normal: 1.6; /* body 默认 */ --rt-leading-relaxed: 1.7; /* 标语 tagline */ --rt-font-size-xs: 12.5px; /* 面包屑 / 分类标题 */ --rt-font-size-sm: 13px; /* 分类链接 */ --rt-font-size-sm-2: 13.5px; /* 标语 tagline */ --rt-font-size-md: 14px; /* 分类图标 */ --rt-font-size-nav: 15px; /* 导航开关按钮 */ --rt-font-size-lg: 20px; /* 移动端 H1（base 同源） */ --rt-font-size-xl: 24px; /* H1（base 同源） */ --rt-font-weight-regular: 400; --rt-font-weight-medium: 600; /* 当前项 */ --rt-font-weight-bold: 700; /* 导航开关 / 分类标题 */ /* --------------------------------------------------------------------------- * 10. MOTION * 来源：header 链接悬停 / 箭头旋转 / 导航折叠 * ------------------------------------------------------------------------ */ --rt-duration-fast: .18s; /* 分类链接悬停 */ --rt-duration-base: .25s; /* 箭头旋转 */ --rt-duration-slow: .30s; /* 导航折叠 max-height */ --rt-ease: ease; --rt-ease-out: ease-out; /* --------------------------------------------------------------------------- * 11. LAYOUT * 来源：页面容器宽度（base body）/ 导航网格最小列宽与间距 * ------------------------------------------------------------------------ */ --rt-container-width: 800px; /* 内容容器最大宽度 */ --rt-nav-grid-min: 210px; /* nav 网格最小列宽 */ --rt-nav-grid-gap: 18px 24px; /* nav 网格 行距 列距 */ /* --------------------------------------------------------------------------- * 12. BREAKPOINT * 来源：header 与 base 统一的移动端断点 * ------------------------------------------------------------------------ */ --rt-breakpoint-sm: 600px; }