@fest-lib/veela (英语)
设计标志, --c2-* 色彩函数 Agate.UX. 数值活在SCSS中——此文件为地图.
别放出来 :root 应用程序中的调色板 。 获取令牌并覆盖上下文( C)var(--token, fallback)Token SoT: (英语) src/scss (单位:千美元)core/misc/_tokens.scss) (中文(简体) ).
core · dom · object · lure
└── fest/veela ← you are here
└── fl-ui · shells · apps
安装
npm install @fest-lib/core @fest-lib/dom @fest-lib/object @fest-lib/lure @fest-lib/veela
端点 : core, (中文(简体) ), dom, (中文(简体) ), object, (中文(简体) ), lure (单位:千美元)>=0.1.0) (中文(简体) ). 公布的柏油球包括: dist/ 财务报告和审定财务报表 src/scss/。 。 。 .
运行时间( 通过/ 内入)
import initialize from "@fest-lib/veela";
initialize(); // loads bundled SCSS via @fest-lib/dom
备选案文(从 src/scss/index.ts:
import { loadVeelaVariant } from "@fest-lib/veela/scss/index.ts";
// "core" | "basic" | "advanced" | "beercss"
await loadVeelaVariant("advanced");
在工作区,FL.UI通常为您装入Veela(configureFlUI({ styleVariant: "veela-advanced" })) (中文(简体) ).
常设委员会
@use "@fest-lib/veela/scss/core" as *;
.card {
background: var(--c2-surface, var(--color-surface));
padding: var(--space-md);
border-radius: var(--radius-md);
}
输出 : @fest-lib/veela/scss/* → src/scss/*。 。 。 .
色彩函数
本地 CSS 自定义函数( 加上运行时间倒计时) :
| 函数 | 作用 |
|---|---|
--c2-surface(tone, base-color, scheme-id) | 表面 |
--c2-on-surface(...) | 表面的墨迹 |
--u2-contrast(...) | 对比填充 |
--c2-on-contrast(...) | 对比度上的墨水 |
- 方案编号 :
0轻1阴影2默认( 后面的主机) . - 音调 :
0黑白两端..50%铬100%对面. - 底色 :
var(--current)(违约),--primary, (中文(简体) ),--secondary, (中文(简体) ),--accent, (中文(简体) ),--success, (中文(简体) ),--warning, (中文(简体) ),--error。 。 。 .
.panel {
background: var(--c2-surface);
color: var(--c2-on-surface);
}
Alpha 通过相对颜色 : oklch(from var(--c2-surface) l c h / 0.5)。 。 。 .
solid-colorize 混合
@include solid-colorize("&", (
"shade": 0,
"tint": 0,
"scheme-id": 2,
"role": null,
"scope": "component" // or "selector"
));
scope: "component" 画出后代/形式助手; "selector" 留在节点上.
托肯斯(节选)
现场数字在SCSS 典型名称 :
| 仁爱 | 实例 |
|---|---|
| 空间 | --space-xs . --space-2xl, (中文(简体) ), --gap-*, (中文(简体) ), --padding-* |
| 半径 | --radius-xs . --radius-2xl, (中文(简体) ), --radius-full |
| 类型 | --text-xs . --text-6xl, (中文(简体) ), --leading-*, (中文(简体) ), --font-weight-* |
| 动议 | --transition-fast 编号 : normal 编号 : slow |
| 阴影 | --shadow-sm . --shadow-2xl, (中文(简体) ), --shadow-inset |
| 颜色 | --icon-size-*, (中文(简体) ), --avatar-size, (中文(简体) ), --border-width-* |
原子能类别(.p-md, (中文(简体) ), .gap-md, (中文(简体) ), .d-flex, (中文(简体) ), .text-sm, (中文(简体) ), .shadow-sm, (中文(简体) ), .color-primary, (中文(简体) ), .surface-subtle与样式表同船. 更喜欢在配料上贴上标志 而不是类汤.
阿盖特. UX 密码
面向空间对客户端空间对执行空间:
| 定向 | 客户端 | 缩写 |
|---|---|---|
--os-inset-x/y | --cs-inset-x/y | --im-inset-x/y |
--os-drag-x/y | --cs-drag-x/y | --im-drag-x/y |
--os-size-x/y | --cs-size-x/y | --im-size-x/y |
使用 inset 用于半静态布局, translate 用于拖动/动画。 方向 : calc(var(--orient, 0) * 90deg)。措施 @fest-lib/dom 阿门助道.
工作空间
cd modules/projects/veela.css
npm run demo # Vite
npm test # puppeteer
npm run build
npm run publish
指南 : guide/。许可证: 麻省理工学院。 。 。 .