@ classic-homes/ 主题键
Classic主题系统的设计令牌,导出为TypeScript常数,CSS自定义属性,以及WCAG对比帮助.
安装
npm install @classic-homes/theme-tokens
快速启动
import { colors, spacing, tokens } from '@classic-homes/theme-tokens';
const primary = colors.teal[500];
在您的应用程序中装入 CSS 变量一次 :
@import '@classic-homes/theme-tokens/css';
出口
| 导入 | 目录 |
|---|---|
@classic-homes/theme-tokens | 切换对象 : colors, (中文(简体) ), brandColors, (中文(简体) ), statusColors, (中文(简体) ), semanticColors, (中文(简体) ), layoutColors, (中文(简体) ), fontFamily, (中文(简体) ), fontSize, (中文(简体) ), fontWeight, (中文(简体) ), spacing, (中文(简体) ), borderRadius, (中文(简体) ), boxShadow, (中文(简体) ), zIndex, (中文(简体) ), aspectRatio, (中文(简体) ), breakpoints, (中文(简体) ), transition, (中文(简体) ), focusRing, (中文(简体) ), animation,和组合 tokens (也是默认导出) |
@classic-homes/theme-tokens/contrast | getContrastRatio, (中文(简体) ), getLuminance, (中文(简体) ), meetsWCAGContrast, (中文(简体) ), validateContrast, (中文(简体) ), getContrastTextColor, (中文(简体) ), suggestContrastAdjustment |
@classic-homes/theme-tokens/css | dist/tokens.css: 符号的 CSS 自定义属性 |
对比度检查 :
import { getContrastRatio } from '@classic-homes/theme-tokens/contrast';
const ratio = getContrastRatio('#3ba4a7', '#ffffff');