/* ============================================================ 龙虾老师 · 自有视觉风格库 v1.0 Design Tokens — 基于 TDesign / shadcn/ui / ArcoDesign / Vant4 综合提炼 用途：PPT课件HTML工具、星光平台HTML工具、龙虾老师个人网站 ============================================================ */ /* ── 0. Reset & Base ──────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* ============================================================ 1. COLOR SYSTEM 色彩系统 来源：TDesign 10级色板体系 + shadcn/ui 语义Token + V3.4品牌色 ============================================================ */ /* ── 1.1 品牌色 Brand（龙虾橙，替代TDesign蓝） ─────────── */ --ld-brand-1: #fff4e6; --ld-brand-2: #ffd8b8; --ld-brand-3: #ffb06c; --ld-brand-4: #ff8a36; --ld-brand-5: #ff6700; /* ← 核心品牌色，V3.4指定 */ --ld-brand-6: #e55c00; --ld-brand-7: #cc5200; --ld-brand-8: #993d00; --ld-brand-9: #662900; --ld-brand-10: #331400; /* 语义映射（shadcn/ui 风格） */ --ld-primary: var(--ld-brand-5); /* #ff6700 */ --ld-primary-hover: var(--ld-brand-6); --ld-primary-active: var(--ld-brand-7); --ld-primary-light: var(--ld-brand-1); --ld-primary-ring: rgba(255, 103, 0, 0.25); /* ── 1.2 功能色 Functional ─────────────────────────────── */ /* 成功/通过 */ --ld-success-1: #e3f9e9; --ld-success-5: #2ba471; --ld-success-6: #008858; --ld-success: var(--ld-success-5); /* 警告/提醒 */ --ld-warning-1: #fff1e9; --ld-warning-5: #e37318; --ld-warning-6: #be5a00; --ld-warning: var(--ld-warning-5); /* 错误/危险 */ --ld-error-1: #fff0ed; --ld-error-5: #f6685d; --ld-error-6: #d54941; --ld-error: var(--ld-error-5); /* 信息/链接 */ --ld-info-1: #f2f3ff; --ld-info-5: #618dff; --ld-info-6: #366ef4; --ld-info: var(--ld-info-5); /* ── 1.3 中性色 Neutral（灰度14级，来自TDesign） ──────── */ --ld-gray-1: #f3f3f3; --ld-gray-2: #eeeeee; --ld-gray-3: #e7e7e7; --ld-gray-4: #dcdcdc; --ld-gray-5: #c5c5c5; --ld-gray-6: #a6a6a6; --ld-gray-7: #8b8b8b; --ld-gray-8: #777777; --ld-gray-9: #5e5e5e; --ld-gray-10: #4b4b4b; --ld-gray-11: #383838; --ld-gray-12: #2c2c2c; --ld-gray-13: #242424; --ld-gray-14: #181818; /* ── 1.4 语义背景 Semantic Background（shadcn/ui 风格） ── */ --ld-bg: #ffffff; --ld-bg-secondary: var(--ld-gray-1); --ld-bg-muted: var(--ld-gray-2); --ld-bg-accent: var(--ld-brand-1); --ld-bg-overlay: rgba(0, 0, 0, 0.45); /* ── 1.5 语义文字 Text ────────────────────────────────── */ --ld-text: rgba(0, 0, 0, 0.9); /* 主文字 */ --ld-text-secondary: rgba(0, 0, 0, 0.6); /* 次文字 */ --ld-text-muted: rgba(0, 0, 0, 0.4); /* 占位/禁用 */ --ld-text-inverse: #ffffff; /* 反色（深色背景上） */ --ld-text-brand: var(--ld-primary); --ld-text-link: var(--ld-primary); --ld-text-link-hover: var(--ld-primary-hover); --ld-text-success: var(--ld-success); --ld-text-warning: var(--ld-warning); --ld-text-error: var(--ld-error); /* ── 1.6 边框 & 分割线 Border ─────────────────────────── */ --ld-border: var(--ld-gray-3); --ld-border-strong: var(--ld-gray-4); --ld-border-subtle: var(--ld-gray-2); --ld-border-focus: var(--ld-primary); --ld-divider: var(--ld-gray-3); /* ── 1.7 遮罩 Mask ────────────────────────────────────── */ --ld-mask-active: rgba(0, 0, 0, 0.6); --ld-mask-disabled: rgba(255, 255, 255, 0.6); /* ============================================================ 2. TYPOGRAPHY 字体系统 来源：TDesign 18级字体Token + V3.4课件字体规范 ============================================================ */ /* ── 2.1 字体族 Font Family ────────────────────────────── */ --ld-font-sans: "方正兰亭黑简体", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; --ld-font-heading: "方正兰亭粗黑简体", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; --ld-font-mono: "JetBrains Mono", "Fira Code", "SF Mono", "Consolas", monospace; /* ── 2.2 字号 Font Size（TDesign 18级体系） ───────────── */ /* 显示级 Display */ --ld-text-display-lg: 64px; /* 封面主标题 */ --ld-text-display-md: 48px; /* 封面副标题 */ /* 大标题 Headline */ --ld-text-headline-lg: 36px; /* 章节标题 */ --ld-text-headline-md: 28px; /* 页面大标题 */ --ld-text-headline-sm: 24px; /* 卡片标题 */ /* 标题 Title */ --ld-text-title-xl: 20px; /* 特大标题 */ --ld-text-title-lg: 18px; /* 一级标题 */ --ld-text-title-md: 16px; /* 二级标题（V3.4正文二级） */ --ld-text-title-sm: 14px; /* 三级标题（V3.4正文一级） */ /* 正文 Body */ --ld-text-body-lg: 16px; /* 正文大号 */ --ld-text-body-md: 14px; /* 正文标准（V3.4正文标准） */ --ld-text-body-sm: 12px; /* 正文小号/注释 */ /* 链接 & 标记 Link & Mark */ --ld-text-link-lg: 16px; --ld-text-link-md: 14px; --ld-text-link-sm: 12px; --ld-text-mark-md: 14px; /* ── 2.3 行高 Line Height ─────────────────────────────── */ --ld-leading-none: 1; --ld-leading-tight: 1.25; --ld-leading-snug: 1.375; --ld-leading-normal: 1.5; /* 正文默认 */ --ld-leading-relaxed: 1.625; --ld-leading-loose: 2; /* TDesign精确行高Token */ --ld-lh-body-sm: 20px; --ld-lh-body-md: 22px; --ld-lh-body-lg: 24px; --ld-lh-title-sm: 22px; --ld-lh-title-md: 24px; --ld-lh-title-lg: 26px; --ld-lh-headline-sm: 32px; --ld-lh-headline-md: 36px; --ld-lh-headline-lg: 44px; --ld-lh-display-md: 56px; --ld-lh-display-lg: 72px; /* ── 2.4 字重 Font Weight ─────────────────────────────── */ --ld-weight-regular: 400; --ld-weight-medium: 500; --ld-weight-semibold: 600; --ld-weight-bold: 700; /* ============================================================ 3. SPACING 间距系统（8px基准网格） 来源：TDesign spacer体系 + shadcn/ui 4倍网格 ============================================================ */ --ld-space-0: 0px; --ld-space-1: 4px; /* TDesign spacer-s */ --ld-space-2: 8px; /* TDesign spacer / 基准单位 */ --ld-space-3: 12px; /* TDesign spacer-1 */ --ld-space-4: 16px; /* TDesign spacer-2 */ --ld-space-5: 20px; --ld-space-6: 24px; /* TDesign spacer-3 */ --ld-space-8: 32px; /* TDesign spacer-4 */ --ld-space-10: 40px; /* TDesign spacer-5 */ --ld-space-12: 48px; /* TDesign spacer-6 */ --ld-space-16: 64px; --ld-space-20: 80px; /* TDesign spacer-10 */ --ld-space-24: 96px; /* 组件内部间距（TDesign comp-padding） */ --ld-comp-padding-xs: 4px; --ld-comp-padding-sm: 8px; --ld-comp-padding-md: 12px; --ld-comp-padding-lg: 16px; --ld-comp-padding-xl: 20px; /* 组件外间距（TDesign comp-margin） */ --ld-comp-margin-xs: 4px; --ld-comp-margin-sm: 8px; --ld-comp-margin-md: 12px; --ld-comp-margin-lg: 16px; --ld-comp-margin-xl: 20px; /* ============================================================ 4. BORDER RADIUS 圆角系统 来源：TDesign 7级圆角 + shadcn/ui radius ============================================================ */ --ld-radius-none: 0px; --ld-radius-sm: 3px; /* TDesign small */ --ld-radius-md: 6px; /* TDesign default — 按钮/输入框 */ --ldradius-lg: 8px; /* shadcn/ui 默认 */ --ld-radius-lg: 9px; /* TDesign large — 卡片 */ --ld-radius-xl: 12px; /* TDesign extraLarge — 弹窗 */ --ld-radius-2xl: 16px; /* 大卡片/面板 */ --ld-radius-round: 9999px; /* 胶囊/标签 */ --ld-radius-full: 50%; /* 圆形/头像 */ /* ============================================================ 5. SHADOW 阴影系统 来源：TDesign 4层阴影体系 ============================================================ */ /* shadow-1: 基础/下层 — 表格行hover */ --ld-shadow-sm: 0 1px 10px rgba(0,0,0,0.05), 0 4px 5px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.12); /* shadow-2: 中层 — 下拉菜单/气泡/选择器 */ --ld-shadow-md: 0 3px 14px 2px rgba(0,0,0,0.05), 0 8px 10px 1px rgba(0,0,0,0.06), 0 5px 5px -3px rgba(0,0,0,0.10); /* shadow-3: 上层 — 弹窗/通知/全局提示 */ --ld-shadow-lg: 0 6px 30px 5px rgba(0,0,0,0.05), 0 16px 24px 2px rgba(0,0,0,0.04), 0 8px 10px -5px rgba(0,0,0,0.08); /* shadow-4: 简单投影 — 通用 */ --ld-shadow-xl: 0 2px 8px 0 rgba(0,0,0,0.06); /* ============================================================ 6. ANIMATION 动效系统 来源：TDesign 动效Token ============================================================ */ /* 贝塞尔曲线 */ --ld-ease-default: cubic-bezier(0.38, 0, 0.24, 1); /* 标准缓入缓出 */ --ld-ease-out: cubic-bezier(0, 0, 0.15, 1); /* 缓出（进入） */ --ld-ease-in: cubic-bezier(0.82, 0, 1, 0.9); /* 缓入（退出） */ /* 时长 */ --ld-duration-fast: 0.15s; --ld-duration-normal: 0.2s; /* TDesign base */ --ld-duration-moderate: 0.24s; --ld-duration-slow: 0.28s; /* 便捷类名对应的变量 */ --ld-transition-colors: color var(--ld-duration-normal) var(--ld-ease-default), background-color var(--ld-duration-normal) var(--ld-ease-default), border-color var(--ld-duration-normal) var(--ld-ease-default); --ld-transition-shadow: box-shadow var(--ld-duration-normal) var(--ld-ease-default); --ld-transition-transform: transform var(--ld-duration-normal) var(--ld-ease-default); /* ============================================================ 7. Z-INDEX 层级系统 来源：TDesign 层级管理 ============================================================ */ --ld-z-base: 0; --ld-z-dropdown: 1000; --ld-z-sticky: 1020; --ld-z-fixed: 1030; --ld-z-drawer: 1500; --ld-z-modal: 2000; --ld-z-popover: 2500; --ld-z-tooltip: 3000; --ld-z-toast: 3500; --ld-z-overlay: 4000; --ld-z-max: 9999; /* ============================================================ 8. LAYOUT 布局系统 来源：TDesign 断点 + shadcn/ui 容器 + Vant4 移动端 ============================================================ */ /* 响应式断点（TDesign） */ --ld-screen-xs: 320px; --ld-screen-sm: 576px; --ld-screen-md: 768px; --ld-screen-lg: 992px; --ld-screen-xl: 1200px; --ld-screen-2xl: 1400px; /* 容器宽度 */ --ld-container-sm: 540px; --ld-container-md: 720px; --ld-container-lg: 960px; --ld-container-xl: 1140px; --ld-container-2xl: 1320px; /* 页面边距 */ --ld-page-padding: var(--ld-space-6); --ld-page-padding-sm: var(--ld-space-4); --ld-page-padding-lg: var(--ld-space-8); /* ============================================================ 9. COMPONENT TOKENS 组件专用Token 来源：TDesign组件Token + ArcoDesign交互 + shadcn/ui组件结构 ============================================================ */ /* ── 按钮 Button ──────────────────────────────────────── */ --ld-btn-height-sm: 32px; --ld-btn-height-md: 40px; /* TDesign comp-size */ --ld-btn-height-lg: 48px; --ld-btn-padding-sm: 8px 12px; --ld-btn-padding-md: 8px 16px; --ld-btn-padding-lg: 12px 24px; --ld-btn-radius: var(--ld-radius-md); --ld-btn-font-size: var(--ld-text-body-md); /* ── 输入框 Input ─────────────────────────────────────── */ --ld-input-height: 40px; --ld-input-padding: 8px 12px; --ld-input-radius: var(--ld-radius-md); --ld-input-border: var(--ld-border); --ld-input-border-focus: var(--ld-primary); --ld-input-bg: var(--ld-bg); --ld-input-bg-disabled: var(--ld-bg-muted); --ld-input-font-size: var(--ld-text-body-md); --ld-input-placeholder: var(--ld-text-muted); /* ── 卡片 Card ────────────────────────────────────────── */ --ld-card-radius: var(--ld-radius-lg); --ld-card-padding: var(--ld-space-6); --ld-card-bg: var(--ld-bg); --ld-card-border: 1px solid var(--ld-border); --ld-card-shadow: var(--ld-shadow-sm); --ld-card-shadow-hover: var(--ld-shadow-md); /* ── 标签 Tag/Badge ───────────────────────────────────── */ --ld-tag-radius: var(--ld-radius-round); --ld-tag-padding: 2px 8px; --ld-tag-font-size: var(--ld-text-body-sm); /* ── 弹窗 Modal（ArcoDesign风格） ─────────────────────── */ --ld-modal-radius: var(--ld-radius-xl); --ld-modal-padding: var(--ld-space-8); --ld-modal-shadow: var(--ld-shadow-lg); --ld-modal-mask: var(--ld-mask-active); --ld-modal-width-sm: 400px; --ld-modal-width-md: 560px; --ld-modal-width-lg: 720px; /* ── 表格 Table ───────────────────────────────────────── */ --ld-table-header-bg: var(--ld-gray-1); --ld-table-row-hover: var(--ld-brand-1); --ld-table-row-stripe: var(--ld-gray-1); --ld-table-border: 1px solid var(--ld-border); --ld-table-cell-padding: 12px 16px; /* ── Toast / 消息提示 ─────────────────────────────────── */ --ld-toast-radius: var(--ld-radius-lg); --ld-toast-shadow: var(--ld-shadow-lg); --ld-toast-max-width: 480px; } /* ============================================================ 10. UTILITIES 便捷工具类 ============================================================ */ /* 文字工具 */ .ld-text-display { font-family: var(--ld-font-heading); font-weight: var(--ld-weight-bold); } .ld-text-heading { font-family: var(--ld-font-heading); font-weight: var(--ld-weight-semibold); } .ld-text-body { font-family: var(--ld-font-sans); font-weight: var(--ld-weight-regular); } .ld-text-mono { font-family: var(--ld-font-mono); } /* 颜色工具 */ .ld-text-primary { color: var(--ld-text); } .ld-text-secondary { color: var(--ld-text-secondary); } .ld-text-muted { color: var(--ld-text-muted); } .ld-text-brand { color: var(--ld-text-brand); } .ld-text-success { color: var(--ld-text-success); } .ld-text-warning { color: var(--ld-text-warning); } .ld-text-error { color: var(--ld-text-error); } /* 背景工具 */ .ld-bg-primary { background-color: var(--ld-bg); } .ld-bg-secondary { background-color: var(--ld-bg-secondary); } .ld-bg-muted { background-color: var(--ld-bg-muted); } .ld-bg-accent { background-color: var(--ld-bg-accent); } .ld-bg-brand { background-color: var(--ld-primary); } /* 间距工具 */ .ld-p-0 { padding: var(--ld-space-0); } .ld-p-2 { padding: var(--ld-space-2); } .ld-p-4 { padding: var(--ld-space-4); } .ld-p-6 { padding: var(--ld-space-6); } .ld-p-8 { padding: var(--ld-space-8); } .ld-m-0 { margin: var(--ld-space-0); } .ld-m-2 { margin: var(--ld-space-2); } .ld-m-4 { margin: var(--ld-space-4); } .ld-m-6 { margin: var(--ld-space-6); } .ld-m-8 { margin: var(--ld-space-8); } /* 圆角工具 */ .ld-rounded-sm { border-radius: var(--ld-radius-sm); } .ld-rounded-md { border-radius: var(--ld-radius-md); } .ld-rounded-lg { border-radius: var(--ld-radius-lg); } .ld-rounded-xl { border-radius: var(--ld-radius-xl); } .ld-rounded-full { border-radius: var(--ld-radius-round); } .ld-rounded-circle { border-radius: var(--ld-radius-full); } /* 阴影工具 */ .ld-shadow-sm { box-shadow: var(--ld-shadow-sm); } .ld-shadow-md { box-shadow: var(--ld-shadow-md); } .ld-shadow-lg { box-shadow: var(--ld-shadow-lg); } .ld-shadow-xl { box-shadow: var(--ld-shadow-xl); } /* 动效工具 */ .ld-transition { transition: var(--ld-transition-colors); } .ld-transition-shadow { transition: var(--ld-transition-shadow); } .ld-transition-transform { transition: var(--ld-transition-transform); } /* 布局工具 */ .ld-container { width: 100%; max-width: var(--ld-container-xl); margin: 0 auto; padding: 0 var(--ld-page-padding); } .ld-flex { display: flex; } .ld-grid { display: grid; } .ld-hidden { display: none; } /* 响应式 */ @media (max-width: 768px) { .ld-container { padding: 0 var(--ld-page-padding-sm); } .ld-hide-mobile { display: none !important; } } @media (min-width: 769px) { .ld-hide-desktop { display: none !important; } } /* ============================================================ 11. DARK MODE 深色模式（预留） ============================================================ */ @media (prefers-color-scheme: dark) { :root { --ld-bg: var(--ld-gray-14); --ld-bg-secondary: var(--ld-gray-13); --ld-bg-muted: var(--ld-gray-12); --ld-text: rgba(255, 255, 255, 0.9); --ld-text-secondary: rgba(255, 255, 255, 0.6); --ld-text-muted: rgba(255, 255, 255, 0.35); --ld-border: var(--ld-gray-11); --ld-border-strong: var(--ld-gray-10); } }