@ aphrody/ m3- tokens (英语)
材料3 设计标志(--md-sys-*)作为Bun-native TypeScript和CSS,以种子为主的动态颜色.
bun add @aphrody/m3-tokens
import "@aphrody/m3-tokens/m3-tokens.css";
import {
applyDynamicColor,
cssFromSeed,
} from "@aphrody/m3-tokens/dynamic-color";
applyDynamicColor("#6750a4"); // sets the --md-sys-color-* roles on <html>
const sheet = cssFromSeed("#6750a4"); // light and dark role sheet, e.g. for SSR
许可证: Apache-2.0(LICENSE) (中文(简体) ). 安装指南 : 文件/材料/立方米/INSTALL.md。 。 。 .
| 导出 | 什麽 |
|---|---|
. 编号 : ./theme-to-tokens | MUI 主题为 --md-sys-* 支助科(muiThemeToTokens, (中文(简体) ), normalizeHex(中文(简体) ) |
./dynamic-color | 材料 您的作用来自种子 : schemeFromSeed, (中文(简体) ), cssFromSeed, (中文(简体) ), applyDynamicColor (7个变体,对比水平) |
./breakpoints, (中文(简体) ), ./breakpoints.css | 窗口大小等级:宽度600/840/1200/1600,高度紧凑 < 480,中度480-899,扩展XX900;导航类型 bar, (中文(简体) ), rail-collapsed, (中文(简体) ), rail-expanded (名称与 adaptive.rs(中文(简体) ) |
./expressive, (中文(简体) ), ./expressive.css | 15个被强调的型号,可表示空间弹簧(fast 0.6/800, (中文(简体) ), default 0.8/380, (中文(简体) ), slow 0.8/200)和方向形状(extra-small-top, (中文(简体) ), large-top, (中文(简体) ), large-start, (中文(简体) ), large-end, (中文(简体) ), extra-large-top(中文(简体) ) |
./m3-tokens.css | 静态形状、打字尺、运动、高地和状态级标志(来源于 crates/ui/m3-tokens(中文(简体) ) |
./platform-contract | platformState(widthDp):大小类、导航、平面、边距 |
expressive.css 生成 : bun run generate:expressive (在漂移时测试失败).
状态层: 聚焦并按住 0.10 (制作); 材料网络 v0 192 用途 0.12。见
docs/architecture/DECISIONS.md。 。 。 .
bun test test/ # tokens, contrast, variants, breakpoints, expressive
bun run typecheck
bun run build # build.ts (Bun.build) + bun check -p tsconfig.build.json