/** * Ethantheme Design Tokens * ---------------------------------------------------- * 设计令牌：颜色派生、间距、字体、圆角、阴影、断点 * * 设计原则： * 1. 颜色：用户在 Customizer 中输入 3 个基色 HSL 分量（H / S / L 各 3 个）， * 其余变体由 color-mix() 自动派生，无重复维护。 * 2. 尺寸：全部流体 clamp()，跨行业无需调整。 * 3. 命名：统一 --eth- 前缀，避免与插件/父主题变量冲突。 * 4. 仅亮色为默认；暗色通过 .theme-inverted 局部反转。 */ :root { /* ========================================================= * 1. 基色 HSL 输入（用户在 Customizer 配置） * 默认值：蓝紫 primary / 珊瑚红 secondary / 青蓝 tertiary * Customizer 输出 inline CSS 覆盖此处。 * ========================================================= */ --eth-primary-h: 238; --eth-primary-s: 100%; --eth-primary-l: 62%; --eth-secondary-h: 0; --eth-secondary-s: 94%; --eth-secondary-l: 68%; --eth-tertiary-h: 198; --eth-tertiary-s: 74%; --eth-tertiary-l: 51%; /* ========================================================= * 2. 基色与派生（每色 12 个变体：基 + 6 透明 + 3 暗 + 2 浅） * 透明度阶梯用 color-mix with transparent * 暗色用 color-mix with black * 浅色用 color-mix with white * ========================================================= */ /* --- Primary --- */ --eth-primary: hsl(var(--eth-primary-h) var(--eth-primary-s) var(--eth-primary-l)); --eth-primary-5: color-mix(in srgb, var(--eth-primary) 5%, transparent); --eth-primary-10: color-mix(in srgb, var(--eth-primary) 10%, transparent); --eth-primary-20: color-mix(in srgb, var(--eth-primary) 20%, transparent); --eth-primary-40: color-mix(in srgb, var(--eth-primary) 40%, transparent); --eth-primary-60: color-mix(in srgb, var(--eth-primary) 60%, transparent); --eth-primary-80: color-mix(in srgb, var(--eth-primary) 80%, transparent); --eth-primary-d-1: color-mix(in srgb, var(--eth-primary) 86%, black); --eth-primary-d-2: color-mix(in srgb, var(--eth-primary) 65%, black); --eth-primary-d-3: color-mix(in srgb, var(--eth-primary) 40%, black); --eth-primary-l-1: color-mix(in srgb, var(--eth-primary) 75%, white); --eth-primary-l-2: color-mix(in srgb, var(--eth-primary) 40%, white); /* --- Secondary --- */ --eth-secondary: hsl(var(--eth-secondary-h) var(--eth-secondary-s) var(--eth-secondary-l)); --eth-secondary-5: color-mix(in srgb, var(--eth-secondary) 5%, transparent); --eth-secondary-10: color-mix(in srgb, var(--eth-secondary) 10%, transparent); --eth-secondary-20: color-mix(in srgb, var(--eth-secondary) 20%, transparent); --eth-secondary-40: color-mix(in srgb, var(--eth-secondary) 40%, transparent); --eth-secondary-60: color-mix(in srgb, var(--eth-secondary) 60%, transparent); --eth-secondary-80: color-mix(in srgb, var(--eth-secondary) 80%, transparent); --eth-secondary-d-1: color-mix(in srgb, var(--eth-secondary) 86%, black); --eth-secondary-d-2: color-mix(in srgb, var(--eth-secondary) 65%, black); --eth-secondary-d-3: color-mix(in srgb, var(--eth-secondary) 40%, black); --eth-secondary-l-1: color-mix(in srgb, var(--eth-secondary) 75%, white); --eth-secondary-l-2: color-mix(in srgb, var(--eth-secondary) 40%, white); /* --- Tertiary --- */ --eth-tertiary: hsl(var(--eth-tertiary-h) var(--eth-tertiary-s) var(--eth-tertiary-l)); --eth-tertiary-5: color-mix(in srgb, var(--eth-tertiary) 5%, transparent); --eth-tertiary-10: color-mix(in srgb, var(--eth-tertiary) 10%, transparent); --eth-tertiary-20: color-mix(in srgb, var(--eth-tertiary) 20%, transparent); --eth-tertiary-40: color-mix(in srgb, var(--eth-tertiary) 40%, transparent); --eth-tertiary-60: color-mix(in srgb, var(--eth-tertiary) 60%, transparent); --eth-tertiary-80: color-mix(in srgb, var(--eth-tertiary) 80%, transparent); --eth-tertiary-d-1: color-mix(in srgb, var(--eth-tertiary) 86%, black); --eth-tertiary-d-2: color-mix(in srgb, var(--eth-tertiary) 65%, black); --eth-tertiary-d-3: color-mix(in srgb, var(--eth-tertiary) 40%, black); --eth-tertiary-l-1: color-mix(in srgb, var(--eth-tertiary) 75%, white); --eth-tertiary-l-2: color-mix(in srgb, var(--eth-tertiary) 40%, white); /* ========================================================= * 3. 功能色（固定，不派生） * ========================================================= */ --eth-success: hsl(136, 65%, 42%); --eth-success-10: color-mix(in srgb, var(--eth-success) 10%, transparent); --eth-success-20: color-mix(in srgb, var(--eth-success) 20%, transparent); --eth-error: hsl(351, 75%, 50%); --eth-error-10: color-mix(in srgb, var(--eth-error) 10%, transparent); --eth-error-20: color-mix(in srgb, var(--eth-error) 20%, transparent); --eth-warning: hsl(38, 92%, 50%); --eth-info: hsl(199, 89%, 48%); /* ========================================================= * 4. 中性色（灰阶） * ========================================================= */ --eth-light: hsl(0, 0%, 100%); --eth-light-5: color-mix(in srgb, var(--eth-light) 5%, transparent); --eth-light-10: color-mix(in srgb, var(--eth-light) 10%, transparent); --eth-light-20: color-mix(in srgb, var(--eth-light) 20%, transparent); --eth-light-40: color-mix(in srgb, var(--eth-light) 40%, transparent); --eth-light-60: color-mix(in srgb, var(--eth-light) 60%, transparent); --eth-light-80: color-mix(in srgb, var(--eth-light) 80%, transparent); --eth-dark: hsl(0, 0%, 8%); --eth-dark-5: color-mix(in srgb, var(--eth-dark) 5%, transparent); --eth-dark-10: color-mix(in srgb, var(--eth-dark) 10%, transparent); --eth-dark-20: color-mix(in srgb, var(--eth-dark) 20%, transparent); --eth-dark-40: color-mix(in srgb, var(--eth-dark) 40%, transparent); --eth-dark-60: color-mix(in srgb, var(--eth-dark) 60%, transparent); --eth-dark-80: color-mix(in srgb, var(--eth-dark) 80%, transparent); /* ========================================================= * 5. 语义色（页面级抽象，便于暗色反转） * 组件应引用语义色，而非直接引用 --eth-primary 等。 * 这样暗色反转只需切换语义色映射。 * ========================================================= */ --eth-bg-body: hsl(0, 0%, 96%); --eth-bg-surface: var(--eth-light); --eth-bg-muted: hsl(0, 0%, 92%); --eth-text-body: hsl(0, 0%, 25%); --eth-text-title: hsl(0, 0%, 8%); --eth-text-muted: hsl(0, 0%, 45%); --eth-text-invert: var(--eth-light); --eth-border: hsla(0, 0%, 0%, 0.12); --eth-border-strong: hsla(0, 0%, 0%, 0.25); --eth-link: var(--eth-primary); --eth-link-hover: var(--eth-primary-d-1); --eth-shadow-color: hsla(0, 0%, 0%, 0.12); /* ========================================================= * 6. 间距（流体 clamp，9 阶） * ========================================================= */ --eth-space-3xs: clamp(0.4rem, 0.36rem + 0.2vw, 0.5rem); --eth-space-2xs: clamp(0.6rem, 0.52rem + 0.4vw, 0.8rem); --eth-space-xs: clamp(0.85rem, 0.7rem + 0.75vw, 1.25rem); --eth-space-s: clamp(1.1rem, 0.85rem + 1.25vw, 1.8rem); --eth-space-m: clamp(1.5rem, 1.1rem + 2vw, 2.6rem); --eth-space-l: clamp(2rem, 1.4rem + 3vw, 3.8rem); --eth-space-xl: clamp(2.6rem, 1.7rem + 4.5vw, 5.4rem); --eth-space-2xl: clamp(3.4rem, 2rem + 7vw, 7.6rem); --eth-space-3xl: clamp(4.4rem, 2.4rem + 10vw, 10.6rem); /* ========================================================= * 7. 字号（流体 clamp，8 阶 + 语义化） * ========================================================= */ --eth-text-xs: clamp(0.78rem, 0.75rem + 0.15vw, 0.85rem); --eth-text-s: clamp(0.88rem, 0.84rem + 0.2vw, 0.98rem); --eth-text-m: clamp(1rem, 0.94rem + 0.3vw, 1.15rem); --eth-text-l: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); --eth-text-xl: clamp(1.35rem, 1.18rem + 0.85vw, 1.8rem); --eth-text-2xl: clamp(1.6rem, 1.32rem + 1.4vw, 2.4rem); --eth-text-3xl: clamp(1.95rem, 1.5rem + 2.25vw, 3.2rem); --eth-text-4xl: clamp(2.4rem, 1.7rem + 3.5vw, 4.4rem); --eth-fs-hero: var(--eth-text-4xl); --eth-fs-h1: var(--eth-text-3xl); --eth-fs-h2: var(--eth-text-2xl); --eth-fs-h3: var(--eth-text-xl); --eth-fs-h4: var(--eth-text-l); --eth-fs-body: var(--eth-text-m); --eth-fs-small: var(--eth-text-s); --eth-fs-xs: var(--eth-text-xs); --eth-lh-tight: 1.1; --eth-lh-heading: 1.25; --eth-lh-body: 1.6; --eth-fw-regular: 400; --eth-fw-medium: 500; --eth-fw-semibold: 600; --eth-fw-bold: 700; /* ========================================================= * 8. 圆角（6 阶） * ========================================================= */ --eth-radius-xs: 0.3rem; --eth-radius-s: 0.5rem; --eth-radius-m: 0.8rem; --eth-radius-l: 1.25rem; --eth-radius-xl: 2rem; --eth-radius-full: 999rem; /* ========================================================= * 9. 阴影（5 阶） * ========================================================= */ --eth-shadow-xs: 0 1px 2px var(--eth-shadow-color); --eth-shadow-s: 0 2px 6px var(--eth-shadow-color); --eth-shadow-m: 0 4px 12px var(--eth-shadow-color); --eth-shadow-l: 0 8px 24px var(--eth-shadow-color); --eth-shadow-xl: 0 16px 48px var(--eth-shadow-color); /* ========================================================= * 10. 布局 * ========================================================= */ /* 容器宽度硬编码 1350px，移除 Customizer 选项 */ --eth-container: 1350px; --eth-container-narrow: 768px; --eth-container-wide: 1440px; --eth-section-space-y: var(--eth-space-xl); --eth-section-space-x: var(--eth-space-m); --eth-content-gap: var(--eth-space-m); /* ========================================================= * 11. 过渡 * ========================================================= */ --eth-transition-s: 0.15s ease; --eth-transition-m: 0.25s ease; --eth-transition-l: 0.4s ease; /* ========================================================= * 12. z-index 层级 * ========================================================= */ --eth-z-base: 1; --eth-z-sticky: 100; --eth-z-header: 200; --eth-z-dropdown: 300; --eth-z-overlay: 1000; --eth-z-modal: 2000; /* ========================================================= * 13. 断点（仅供 JS 引用，CSS 仍用 @media） * ========================================================= */ --eth-bp-s: 480px; --eth-bp-m: 768px; --eth-bp-l: 992px; --eth-bp-xl: 1280px; } /* ========================================================= * 局部暗色反转 * -------------------------------------------------------- * 在任意 section / 区块加 .theme-inverted 即可暗色显示 * 仅切换语义色，基色保持不变（按钮等仍然用品牌色） * ========================================================= */ .theme-inverted { --eth-bg-body: hsl(0, 0%, 8%); --eth-bg-surface: hsl(0, 0%, 14%); --eth-bg-muted: hsl(0, 0%, 18%); --eth-text-body: hsl(0, 0%, 75%); --eth-text-title: hsl(0, 0%, 100%); --eth-text-muted: hsl(0, 0%, 60%); --eth-text-invert: hsl(0, 0%, 8%); --eth-border: hsla(0, 0%, 100%, 0.12); --eth-border-strong: hsla(0, 0%, 100%, 0.25); --eth-link: var(--eth-primary-l-1); --eth-link-hover: var(--eth-primary-l-2); --eth-shadow-color: hsla(0, 0%, 0%, 0.5); }