AniBTUI
✦ 文档

主题

白樱是亮色、夜樱是暗色。AniBT 的数值落在 shadcn 的标准 token 上，再加一组 --anibt-* 扩展和 anibt-* 配方。

一种颜色一种职责

粉色负责操作、选中和「你在这里」；蓝色负责时间、今天、现在、进行中；薄荷是完成、做种；红色是危险、失败；其余一切是墨色。中性色偏冷、带一点极淡的紫，不发棕。

两套模式用同样的名字：白樱写在 :root，夜樱写在 .dark。下面每个色块都在它自己的模式里绘制，切换站点的颜色模式不会影响对照。

标准 token

shadcn 组件读的就是这些名字。AniBT 的取值有两处和直觉不同：accent 是选中、悬停的粉色淡底，粉色字在 accent-foreground；input 是控件的边色。

面与字

--background#f7f5fa#13111a页面底（canvas）。点点底纹 anibt-ground 铺在它上面
--foreground#1f1c28#f3f0f8正文墨色（ink）
--card#ffffff#1c1926面板、卡片、控件的纸面（paper）
--card-foreground#1f1c28#f3f0f8纸面上的字
--popover#ffffff#1c1926浮层的纸面：对话框、菜单、弹层
--popover-foreground#1f1c28#f3f0f8浮层上的字
--secondary#f3f0f7#16141f下沉面（deep）：分段轨道、标签底
--secondary-foreground#565163#bdb7cb次要字（ink2）
--muted#f3f0f7#16141f下沉面（deep）：骨架、占位、禁用
--muted-foreground#6e6a78#9690a6弱字（ink3）：说明、元信息
--border#ebe6f0#2b2738面板的 1px 外边（line）
--input#dad3e3#3b354a控件边与缝线（line2）

粉与红

粉只负责操作、选中和「你在这里」；红只负责危险与失败。

--primary#c22a62#ffa3c3实色粉填充（stock shadcn 组件的主色）。AniBT 的主按钮用糖果渐变
--primary-foreground#ffffff#1f1c28实色粉上的字
--accent#fff0f5#3a2435选中、悬停的粉色淡底（wash）
--accent-foreground#c22a62#ffa3c3粉色字：链接、选中项、悬停的标签
--ring#ff6f9c#ff7aa6焦点：2px 轮廓、外偏 2px（mark）
--destructive#b3341d#ff9d8a危险、失败的红字

图表与侧栏

--chart-1#ff6f9c#ff7aa6粉
--chart-2#5aa9ff#6cb4ff蓝
--chart-3#25b582#3fd09c薄荷
--chart-4#f0a531#f0a531琥珀
--chart-5#e5533d#ff6d55红
--sidebar#f3f0f7#16141f侧栏：下沉井
--sidebar-foreground#1f1c28#f3f0f8侧栏字
--sidebar-primary#c22a62#ffa3c3侧栏里的实色粉
--sidebar-primary-foreground#ffffff#1f1c28其上的字
--sidebar-accent#ffffff#1c1926侧栏当前行 / 悬停：纸面
--sidebar-accent-foreground#1f1c28#f3f0f8当前行的字
--sidebar-border#ebe6f0#2b2738侧栏边
--sidebar-ring#ff6f9c#ff7aa6侧栏焦点

--radius 是 10px（只写在白樱里）：shadcn 的倍数刻度正好给出 AniBT 的三档圆角，rounded-sm 6、rounded-lg 10、rounded-xl 14。

AniBT 扩展

标准名字之外的部分都带 anibt- 前缀。颜色类的扩展同时是 Tailwind 颜色，可以写 text-anibt-time-ink、bg-anibt-ok-wash。

文字、面与粉

--anibt-ink2#565163#bdb7cb次要字（ink2）：导航、标签、安静按钮
--anibt-deep2#ece7f2#252130更深一档的下沉：封面占位
--anibt-mark#ff6f9c#ff7aa6粉色笔画：状态点、图标强调
--anibt-wash2#ffdbe7#522e42按下时的粉底
--anibt-wash-line#ffb3cb#89425f粉色边：悬停的控件边

蓝 · 时间

蓝只负责时间、今天、现在、下一个、进行中。

--anibt-time#5aa9ff#6cb4ff蓝色笔画与点
--anibt-time-ink#1a64bf#9fcdff蓝字：分辨率、时间标签
--anibt-time-wash#edf5ff#242c42蓝色淡底
--anibt-time-wash2#d6e9ff#2b3c5a更深的蓝底
--anibt-time-line#a9d0ff#3b6192蓝色边

状态

--anibt-ok#0e7a53#74e2b8完成、做种：薄荷字
--anibt-ok-fill#25b582#3fd09c薄荷点
--anibt-ok-wash#e4f7ef#1d3034薄荷淡底
--anibt-warn#9a5b06#f2c46d需要注意：琥珀字
--anibt-warn-fill#f0a531#f0a531琥珀点
--anibt-warn-wash#fff4e0#33291c琥珀淡底
--anibt-danger-fill#e5533d#ff6d55红点、错误轮廓
--anibt-danger-wash#fff0ec#3a2229红色淡底：危险按钮、失败标签
--anibt-danger-line#f6b8ab#824441红色边
--anibt-tip#26222f#f3f0f8提示气泡（夜樱反转为浅色）
--anibt-tip-ink#ffffff#1f1c28提示气泡上的字
--anibt-scrimrgba(31, 28, 40, 0.5)rgba(0, 0, 0, 0.6)遮罩

贴纸与糖果

--anibt-sticker-edge#ffffff#f1ebf6贴纸的模切白边
--anibt-candylinear-gradient(180deg, #ff8fb4 0%, #ff6c9b 52%, #f2558a 100%)linear-gradient(180deg, #ff8fb4 0%, #ff6c9b 52%, #f2558a 100%)糖果渐变：主按钮、计数、勾选、开关
--anibt-candy-edge#d63e74#d63e74糖果的底边
--anibt-candy-glowrgba(242, 85, 138, 0.42)rgba(242, 85, 138, 0.42)糖果的光晕
--anibt-candy-ink#ffffff#ffffff糖果上的白字
--anibt-candy-text-shadow0 1px 0 rgba(176, 28, 82, 0.38)0 1px 0 rgba(176, 28, 82, 0.38)糖果字的投影
--anibt-waterlinear-gradient(180deg, #7dbcff 0%, #5aa9ff 52%, #3f92f0 100%)linear-gradient(180deg, #7dbcff 0%, #5aa9ff 52%, #3f92f0 100%)蓝色同款渐变
--anibt-water-edge#2c78d6#2c78d6蓝色底边
--anibt-water-text-shadow0 1px 0 rgba(20, 80, 160, 0.38)0 1px 0 rgba(20, 80, 160, 0.38)蓝色字投影
--anibt-glosslinear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0))linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0))主按钮上半的高光
--anibt-sheenlinear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.5) 50%, transparent 65%)linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.5) 50%, transparent 65%)卡片悬停的扫光
--anibt-sleevelinear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 38%)linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 38%)卡套反光
--anibt-sparkleurl(✦ svg)url(✦ svg)✦ 遮罩

胶带、缝线与底纹

--anibt-tapergba(255, 111, 156, 0.66)rgba(255, 122, 166, 0.72)和纸胶带的颜色
--anibt-tape-stripergba(255, 255, 255, 0.38)rgba(255, 255, 255, 0.26)胶带上的斜纹
--anibt-tape-fillrepeating-linear-gradient(135deg, var(--anibt-tape-stripe) 0 2px, transparent 2px 5px), var(--anibt-tape)repeating-linear-gradient(135deg, var(--anibt-tape-stripe) 0 2px, transparent 2px 5px), var(--anibt-tape)胶带：唯一的「你在这里」
--anibt-stitchlinear-gradient(90deg, var(--input) 0 4px, transparent 4px 8px)linear-gradient(90deg, var(--input) 0 4px, transparent 4px 8px)横向虚线缝线
--anibt-stitch-ylinear-gradient(180deg, var(--input) 0 4px, transparent 4px 8px)linear-gradient(180deg, var(--input) 0 4px, transparent 4px 8px)纵向虚线缝线
--anibt-dot-argba(255, 111, 156, 0.2)rgba(255, 122, 166, 0.22)底纹粉点
--anibt-dot-brgba(90, 169, 255, 0.18)rgba(108, 180, 255, 0.24)底纹蓝点
--anibt-dotsradial-gradient(circle, var(--anibt-dot-a) 0 1px, transparent 1.5px), radial-gradient(circle, var(--anibt-dot-b) 0 1px, transparent 1.5px)radial-gradient(circle, var(--anibt-dot-a) 0 1px, transparent 1.5px), radial-gradient(circle, var(--anibt-dot-b) 0 1px, transparent 1.5px)点点底纹（夜樱是星空）

阴影与光晕

--anibt-shadow-sticker0 1px 1px rgba(31, 28, 40, 0.1), 0 2px 6px rgba(31, 28, 40, 0.12)0 1px 1px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.35)贴纸、拇指、提示
--anibt-shadow-panel0 1px 0 rgba(31, 28, 40, 0.02), 0 6px 18px -10px rgba(70, 40, 100, 0.16)0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 8px 22px -12px rgba(0, 0, 0, 0.6)面板
--anibt-shadow-lift0 2px 4px rgba(31, 28, 40, 0.06), 0 14px 28px -10px rgba(90, 40, 120, 0.28)0 2px 4px rgba(0, 0, 0, 0.3), 0 16px 30px -10px rgba(0, 0, 0, 0.6)指针下抬起的卡
--anibt-shadow-pop0 4px 10px -2px rgba(31, 28, 40, 0.1), 0 16px 32px -12px rgba(70, 40, 100, 0.3)0 4px 10px -2px rgba(0, 0, 0, 0.35), 0 18px 34px -12px rgba(0, 0, 0, 0.65)浮层
--anibt-ring-pink0 0 0 4px rgba(255, 111, 156, 0.18)0 0 0 4px rgba(255, 122, 166, 0.22)聚焦的粉色光晕
--anibt-ring-danger0 0 0 4px rgba(229, 83, 61, 0.14)0 0 0 4px rgba(255, 109, 85, 0.2)出错的红色光晕

Tailwind 主题键

主题在 @theme inline 里加的键：两套字体、两条缓动曲线、animate-anibt-* 动画。

--font-anibt-display"Fredoka", ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif
--ease-anibt-springcubic-bezier(0.34, 1.56, 0.64, 1)
--ease-anibt-outcubic-bezier(0.2, 0.7, 0.2, 1)
--animate-anibt-blinkanibt-blink 1.2s ease-in-out infinite
--animate-anibt-wiggleanibt-wiggle 0.5s cubic-bezier(0.2, 0.7, 0.2, 1)
--animate-anibt-popanibt-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1)
--animate-anibt-bobanibt-bob 2.2s ease-in-out infinite
--animate-anibt-twinkleanibt-twinkle 2.4s ease-in-out infinite
--animate-anibt-peekanibt-peek 4s ease-in-out infinite
--animate-anibt-rippleanibt-ripple 2s cubic-bezier(0.2, 0.7, 0.2, 1) infinite
--animate-anibt-swayanibt-sway 2.6s ease-in-out infinite
--animate-anibt-tape-inanibt-tape-in 0.3s cubic-bezier(0.2, 0.7, 0.2, 1)
--animate-anibt-indeterminateanibt-indeterminate 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) infinite

配方

材质只在配方里出现一次，组件和页面都用配方，不在调用处重写颜色、阴影、渐变和圆角。

配方样子
anibt-sheet / anibt-pop / anibt-well面板（纸面、1px 外边、面板阴影、圆角 14）/ 浮层 / 面板里的分组
anibt-btn + -primary -raised -ghost -danger -on -sm -lg糖果主按钮、凸起次按钮、安静按钮、危险按钮
anibt-icobtn -sm -ghost32 / 28 图标方块，悬停时图标摆动
anibt-field / anibt-input / anibt-label / anibt-kbd32 高输入框、字段标签、键帽
anibt-tabs / anibt-tab / anibt-tab-on缝线上的页签，当前页签贴一条倾斜的胶带
anibt-seg / anibt-chip分段控件（白色贴纸拇指）/ 28 高筛选 chip
anibt-tag -res -lang -ok -warn -danger20 高事实标签
anibt-sticker -candy -water模切贴纸，--anibt-tilt 控制倾斜
anibt-count / anibt-status / anibt-dot计数胶囊 / 带点和字的状态 / 6px 点
anibt-stitch -under -over -side虚线缝线
anibt-tape / anibt-tape-y和纸胶带：唯一的「你在这里」
anibt-check / anibt-switch / anibt-pager-item / anibt-tip / anibt-menu-item勾选、开关、分页格、提示、菜单项
anibt-ground / anibt-num / anibt-ell / anibt-clamp2-fixed点点底纹 / 圆体数字 / 单行省略 / 固定两行高

prefers-reduced-motion: reduce 下，所有 anibt-* 的动效都会停下。

改颜色

主题装好以后，token 就在你自己的全局 CSS 里，直接改值即可。只改 :root 或 .dark 里的一处，就只影响那个模式。