@ krizaka/顺风
Krizaka顺风CSS v4预设。 它把语义 --kz-* 令牌的
@krizaka/tokens 进入公用事业(bg-surface-1， text-fg-secondary， border-border-default，
text-accent， rounded-xl…)，仅给出插图 light: / dark: 变体，使得克里扎卡缓和
每个过渡的默认值，并带来的运动签名 @krizaka/ui.
声明实用程序 @theme inline: 一个类读取它的变量 在使用时间,所以黑暗，光明和一个
产品主题更改值，而无需重新编译单个类。
安装
npm install -D tailwindcss @krizaka/tailwind @krizaka/tokens @krizaka/ui
tailwindcss (^ 4.1), @krizaka/tokens 和 @krizaka/ui 对等依赖：应用程序拥有它们的版本，哪个
@krizaka/tokens， @krizaka/ui 和 @krizaka/tailwind 共享 (一个变更集 fixed 组)。
连接应用程序
应用全局样式表中的四行(产品的web应用， app/globals.css)，按此顺序:
@import "tailwindcss";
@import "@krizaka/tailwind"; /* tokens + utilities + variants + motion */
@import "@krizaka/ui/tailwind.css"; /* `@source "./dist"`: Tailwind scans the primitives */
@import "@krizaka/myapp-design-system/theme.css"; /* the product's identity: --kz-* overrides + @source of the kit */
@source "../../../packages"; /* the packages of the product's workspace */
前两行足够了解整个词汇。 @krizaka/ui/tailwind.css 到达与
@krizaka/ui 2.0原语;在那之前，不要写这一行。
按角色的实用程序
| 角色 | 公用设施（任何颜色公用设施）： bg-， text-， border-， ring-， from-， fill-…) | 令牌 |
|---|---|---|
| 表面 | surface-0 页面? surface-1 卡片· surface-2 提升· surface-3 活跃的 | --kz-surface-* |
| 媒体 | media (加载前的背景 scrim， scrim-strong （蒙在图像上的面纱）· overlay (对话框背景) | --kz-media， --kz-scrim*， --kz-overlay |
| 边界 | border-subtle · border-default · border-strong → border-border-default | --kz-border-* |
| 文本 | fg · fg-secondary · fg-muted · fg-on-media → text-fg-secondary | --kz-text-* |
| 口音 | accent · accent-hover · accent-soft · accent-2 (渐变)· on-accent · ring | --kz-accent*， --kz-on-accent， --kz-ring |
| 状态 | success · warning · danger · info （填充、边框、圆点、图标-≥3:1） | --kz-success … |
| 状态文本 | fg-success · fg-warning · fg-danger · fg-info → text-fg-danger （小字体，每个表面≥4.5:1，两个主题） | --kz-*-text |
| 状态色调 | success-soft · warning-soft · danger-soft → bg-danger-soft (主要和状态文本 ≥ 4.5:1) | --kz-*-soft |
| 半径 | rounded-sm · rounded-md · rounded-lg · rounded-xl · rounded-full； rounded-(--kz-radius-xs)， rounded-(--kz-radius-2xl) (未映射: Tailwind自己的 xs / 2xl 保持它们的尺寸在产品中) | --kz-radius-* |
| 影子 | shadow-sm · shadow-md · shadow-lg；签名: shadow-raised · shadow-floating · shadow-overlay (墨色、多层 shadow-glow · shadow-glow-lg （品牌的光下有什么作用） | --kz-shadow-*， --kz-accent |
| 边缘 | inset-shadow-edge （顶部边缘捕捉光线）· inset-shadow-edge-fill (在重音填充上)· inset-shadow-well (田野，轨道) | --kz-edge-* |
| 材料 | bg-sheen （凸起表面的顶部）· bg-fill-shade (填充物的底部 bg-halo (来自顶部的品牌)· glass （+ bg-glass， border-glass-border） | --kz-surface-sheen， --kz-fill-shade， --kz-glass-* |
| 专注 | focus-visible:focus-ring （一个脆环的元素，在一个光环）· focus-ring-inset (在边界上) | --kz-ring* |
| 节点 | node · node-lit -标记的核心为状态标记 | --kz-accent |
| 字体 | font-sans · font-display · font-mono | --kz-font-* |
| 运动 | ease-kz， ease-spring;每一个 transition* 默认为200毫秒 --kz-ease； duration-(--kz-duration-fast) 对于微交互 (在减少运动下为0) | --kz-ease*， --kz-duration-* |
材料是BRAND的。Md§6 @krizaka/tokens． 将这些类合并为 twMergeConfig （@krizaka/ui/cn) 在你自己的
twMerge，或者 bg-sheen 将作为背景颜色。格里夫（45°切角）是 [corner-shape:var(--kz-cut-shape)]
与 rounded-(--kz-cut-size)； --kz-cut-shape: round 为应用程序关闭它。
不透明度修改器适用于每种颜色: bg-surface-1/70， shadow-accent/20.
预设还设置了Tailwind v3的边框渲染(border 平局 --kz-border-default,而不是 currentColor)，
已启用按钮上的指针光标和占位符颜色(--kz-text-muted）。
规则
light:和dark:是为了插图。主题是一组令牌。
组件从不与主题课程切换: bg-zinc-950/70 light:bg-white 是 bg-surface-1/70，
text-zinc-400 light:text-slate-500 是 text-fg-secondary， bg-black/60 text-white 在图像上是
bg-scrim text-fg-on-media （两个主题相同）。变体只存在于任何标记都无法表达的东西——an
插图或图像，有一个光明和黑暗的版本-并拒绝在产品的绒毛。
| 变体 | 比赛 |
|---|---|
light: | html.light， 外 任何 .theme-dark 岛 |
dark: | :root:not(.light),以及里面的任何东西 .theme-dark |
.theme-dark 让玩家、编辑器或媒体在两个主题中保持黑暗。
产品主题
产品永远不会重新定义调色板：它会在设计系统中覆盖角色 theme.css.
/* @krizaka/myapp-design-system/theme.css — a product identity, expressed as roles */
@source "./dist";
:root, .theme-dark {
--kz-surface-0: #060709;
--kz-surface-1: #0c0e14;
--kz-surface-2: #121520;
--kz-surface-3: #1a1e2c;
--kz-border-default: #1f2438;
--kz-accent: #8b5cf6; /* velvet */
--kz-accent-hover: #7c3aed;
--kz-accent-soft: rgb(139 92 246 / 0.12);
--kz-accent-2: #ec4899; /* sensual — from-accent to-accent-2 gradients become velvet → magenta */
--kz-ring: #a78bfa;
--kz-font-display: Outfit, var(--kz-font-sans);
}
html.light {
/* Luminous Ivory Cashmere & Rose */
--kz-surface-0: hsl(210 20% 98%);
--kz-accent: #7c3aed;
--kz-accent-2: #db2777;
--kz-accent-soft: rgb(124 58 237 / 0.08);
}
/* Product tokens: prefixed, never generic */
:root { --myapp-story-ring: linear-gradient(135deg, var(--kz-accent), var(--kz-accent-2)); }
上面的每个实用程序如下，组件中没有一行: bg-accent 是天鹅绒，所有的戒指，颜色和
混合口音的栏杆。一个额外的主题 (html.theme-cyberpunk { --kz-accent: … }）
成本一个CSS块，从来没有一个组件。
许可证
apache - 2.0 ©Krizaka