@aphrody/m3-尾风
尾风 v4 CSS - 材3: 第一套预置: 1 @import没有 JS 插件, 没有配置文件 .
bun add @aphrody/m3-tailwind @aphrody/m3-tokens tailwindcss
@import "tailwindcss";
@import "@aphrody/m3-tokens/m3-tokens.css";
@import "@aphrody/m3-tokens/expressive.css";
@import "@aphrody/m3-tailwind/preset.css";
许可证: Apache-2.0(LICENSE) (中文(简体) ). 安装指南 : 文件/材料/立方米/INSTALL.md。 。 。 .
preset.css 从 @aphrody/m3-tokens (作用、角尺度、类型、断点、弹簧和方向)
从 TypeScript 表格中的形状; 从 m3-tokens.css) (中文(简体) ).
颜色值设定在运行时( E)applyDynamicColor, (中文(简体) ), <m3-theme>, (中文(简体) ), M3Html 内 @aphrody/m3-next) (中文(简体) ).
和Bun在一起的时候, @aphrody/bun-plugin-tailwind 增加这些进口品,并自行制定种子颜色方案: tailwind({ theme: "m3" })
(或 { theme: { seed: "#0b57d0" } }),并且其PostCSS插件上的相同选项.
上面写的
| 家属 | 主题密钥( E)@theme inline(中文(简体) ) | 公用事业和变种 |
|---|---|---|
| 颜色( 所有49个角色) | --color-* | bg-primary, (中文(简体) ), text-on-surface, (中文(简体) ), border-outline-variant, (中文(简体) ), hover:bg-on-surface/8 |
| 形状 | --radius-*, (中文(简体) ), --shape-* | rounded-large, (中文(简体) ), shape-extra-large-top, (中文(简体) ), shape-large-start (简体中文) |
| 类型 | --text-* (15个基地+15个,有线高、跟踪、重量), --font-* | text-body-large, (中文(简体) ), text-title-small-emphasized, (中文(简体) ), typescale-label-large (亦为出家所出), font-brand |
| 电梯 | --shadow-elevation-0..5 | shadow-elevation-2 |
| 动议 | --ease-*, (中文(简体) ), --transition-duration-*弹簧 linear() 放松和结算时间 | ease-emphasized, (中文(简体) ), duration-medium2, (中文(简体) ), ease-spring-expressive-fast-spatial, (中文(简体) ), motion-default-effects (一个类别中的缓解和持续时间) |
| 状态 | state-layer, (中文(简体) ), state-layer-primary (俯视、聚焦、按住、拖曳;荣誉UI) data-highlighted, (中文(简体) ), data-pressed, (中文(简体) ), data-disabled(中文(简体) ) | |
| 适应性 | --breakpoint-* | compact:, (中文(简体) ), medium:, (中文(简体) ), expanded:, (中文(简体) ), large:, (中文(简体) ), extra-large:, (中文(简体) ), h-compact:, (中文(简体) ), h-medium:, (中文(简体) ), h-expanded: |
| 计划 | dark: 如下 .dark,或操作系统,除非 .light 轻力 | |
| 基准UI状态 | m3-open:, (中文(简体) ), m3-on:, (中文(简体) ), m3-highlighted:, (中文(简体) ), m3-disabled:, (中文(简体) ), m3-invalid:, (中文(简体) ), m3-enter:, (中文(简体) ), m3-exit:, (中文(简体) ), m3-vertical:, (中文(简体) ), m3-horizontal: |
@theme inline 表示一个变量只在公用设备使用时才会被排放,因此预设的成本字节与什么成正比
应用程序写入( 见 docs/reports/M3-NEXT-BUNDLE.md) (中文(简体) ). themeCss({ keepUnused: true }) 发射 @theme static。 。 。 .
泉道:CSS没有泉道松动,而一个立方位贝子不能过度射出,所以每个泉道令牌(打出比分,硬度)是:
取样到33站 linear() 及其结算时间(src/spring.ts);可表达空间弹簧保持回弹.
bun run generate 重写 preset.css; 测试是最新的, 预设的每个符号都存在于
符号表,每个家庭编译一个工具 @tailwindcss/node 从根目录。 上游源头 vendor/tailwindcss;地方叶子、货物/国家产品和工艺品的整合仍不合格。 消费者目前使用已安装的目录包,而不是源树.
bun test test/, (中文(简体) ), bun run typecheck。 。 。 .