@格式/主题
四个参考主题,构建者的样式表和管理员的调色板. 支助科 仅 —— 没有 JavaScript, 没有构建步骤, 没有依赖任何渲染器 .
他们是为了什么
铸造船 无 CSS. 这一说法容易提出,难以相信, 因此,这些文件存在 测试它: 相同的标记和相同的引擎, 穿着 作为四种看起来无关的产品.
| 蓝图 | 黄昏 | 弹 | 纸张 | |
|---|---|---|---|---|
| 感觉就像 | 技术绘图 | 一个黑暗的应用 | 贴纸 | 打印页面 |
| 地面 | 白色 | 阴暗 | 奶油还是白色 | 纸张或白色 |
| 控件 | 框,3px角处 | 10平方圆的井 | 轮廓,硬阴影 | 要写入的行 |
| 类型 | IBM Plex 桑斯 | 空间 | 重型阿奇沃 | Fraunces, 间隔大小的首都用于标签 |
| 选择 | 绘图框和圆圈 | 点燃井 | 芯片 | 发线盒, 选择时为斜体 |
| 无效显示为 | 领先边缘的栏杆 | 环绕控制 | 粉红色贴纸 | ver和斜体音符 |
| 需要显示为 | 星号 | "需要"这个词 | 一颗恒星 | a 脚注星号 |
| 活动向导步骤 | 数字,下划线字 | 音轨上的点 | 黄色徽章 | 罗马数字,下划线 |
如果支持其中任何一个需要更改组件,则无头 索赔是虚假的。 没有.
使用
import '@formancy/themes/blueprint.css'
import '@formancy/themes/dusk.css'
import '@formancy/themes/pop.css'
import '@formancy/themes/paper.css'
<div data-formancy-theme="blueprint">…your form…</div>
每个主题都放在下面 [data-formancy-theme],所以一个页面可以装入全部
通过改变一个属性来切换,这就是游乐场和
登陆页是的. workbench.css 财务报告和审定财务报表 room.css,下文不是主题和
未设定范围:每个变量都设置在 :root,为整页.
每个主题都设定自己的文本颜色,颜色方案以及 box-sizing 联 合 国
子树,所以它不依赖于主机页面的重置. 它不画
表格后面的一页: 纸和纸在地面颜色上看起来最好
声明为: --fm-ground白色也不错.
字体被引用,而不是被捆绑,每个主题都倒回一个系统堆栈.
formancy.ai从Fontsource的软件包而不是从一个软件包中为它自己服务
字体服务,所以打开一页告诉其他网站谁打开它. 字体源名称
变相相 <Family> Variable,所以爸爸问 Archivo 接下来
Archivo Variable纸张 Fraunces 接下来 Fraunces Variable: 任意
文字拼写,以页面加载的方式为准.
建造者们: workbench.css
workbench.css 两个建筑师都穿好衣服 树、调色板、探长、逻辑
面板, 提示面板和旁边的中继器, 假设情景, 块, 数据网的列
和翻译——通过 data-formancy-part 钩子弹出,每一部分
他们在这里有一个规则.
它不是一个形式主题,没有任何问题取决于它。 改变它的标志的外观
而不是你自己的规则:
| 脚本 | 它的颜色 |
|---|---|
--wb-ink, (中文(简体) ), --wb-muted | 文本,和安静的文本 |
--wb-bench, (中文(简体) ), --wb-panel, (中文(简体) ), --wb-surface | 地面、窗帘、控制或卡片 |
--wb-rule | 线条和边界 |
--wb-signal | 选择、重点和主要行动 |
--wb-derived | 建造者想出什么 而不是打出什么 类型 路径 |
--wb-invalid, (中文(简体) ), --wb-ok, (中文(简体) ), --wb-caution | 破损,精细,成本 |
--wb-sans, (中文(简体) ), --wb-mono | 两个面孔 |
房间: room.css
room.css 是调色板的形状。 ai的自营管理员被引出 暗地,玻璃
面板,紫外线用于一个人的行为,而紫外线用于系统的行为
应用程序的意思是同一个房间导入,而不是复制数值。 管理员
以同样的方式进口。 这是自定义属性在 :root 财务报告和审定财务报表 color-scheme: dark,以及
没有其他的:没有关于任何元素的规则,也没有装入面孔。 你自己的风格表读取它们.
import '@formancy/themes/workbench.css'
import '@formancy/themes/room.css' // after the workbench
| 变量 | 这是什么 |
|---|---|
--ground | 页面,一切的背后 |
--glass | 地面上的一个面板, 它显示它通过 |
--text, (中文(简体) ), --muted | 文本,和安静的文本 |
--edge, (中文(简体) ), --edge-strong | 线条,并绑定面板的线条 |
--client | 紫外线:人的行为 |
--server | teal:系统做了什么 |
--invalid, (中文(简体) ), --ok, (中文(简体) ), --warn | 断了,好,半路 |
--display | 标题的面额:Archivo,然后是IBM Plex Sans |
它也设置了所有颜色 workbench.css 到房间.. --wb-ink, (中文(简体) ), --wb-bench, (中文(简体) ),
--wb-panel, (中文(简体) ), --wb-surface, (中文(简体) ), --wb-rule, (中文(简体) ), --wb-muted, (中文(简体) ), --wb-signal, (中文(简体) ), --wb-derived, (中文(简体) ),
--wb-invalid, (中文(简体) ), --wb-ok 财务报告和审定财务报表 --wb-caution -并留下它的脸作为工作台
他们。 只有在 workbench.css: 都说 :root因此,无论以后的负载
胜利,先装入建造者 保持它的光面板在暗室.
面相没有被装入. --display archivo和IBM Plex Sans,以及工作台的
面相是 IBM Plex; 页面本身会加载它们, 如管理员从字体源头加载, 或者倒回
到系统.
名字是你写的 var() 他们就是这个软件包的API 一个值是
房间:一个更改为一个更改 每一个导入的页面, 更改日志是这样说的.
右到左 和你的捆绑
这里的每一个文件都列出任何内容——四个主题,以及 workbench.css,哪些样式
两位建筑师——说某事按读取顺序处于哪一边:逻辑属性,以及
:dir(rtl) cSS 没有逻辑形式的地方,像图标一样 background-position 或栏
所选项目的一面。 设定 dir="rtl" 在页面上,或打开
任何在窗体或建构器上方,布局也随之而来.
只能这样 :dir() 到达已写入的浏览器 . 锁定捆绑者
浏览器比旧的旧 :dir() 以重写方式运出。 Vite的默认目标有
闪电 CSS 每转一转 :dir(rtl) 输入 :is(:lang(ar), :lang(he), …),随后
页面 语言 相反: dir="rtl" 的页面 lang 不在名单上
改变什么, 建筑者的标记留在左边。 在这个仓库里测量的
自己的游乐场。 将 CSS 目标设定为浏览器, 这些样式表是写给..
第一次发布时均使用 :dir() 财务报告和审定财务报表 color-mix()数字 :
// vite.config.ts
export default defineConfig({
build: { cssTarget: ['chrome120', 'edge120', 'firefox113', 'safari16.4', 'ios16.4'] },
})
装入平面的样式表 <link> 不重写,不需要任何东西.
写你自己
抄取一并改. 水面是 水面 data-formancy-part 属性,以及每个
部件 任意一个有要画的渲染器的发音都以每个窗体的主题为样式
运送到这里.. apps/docs/src/themes.test.ts 失败于一个不是,所以是副本
已经把它们都命名了。 这些是开始的地方,而不是整个清单:
- 字段 :
field(与data-state="invalid|valid", (中文(简体) ),label, (中文(简体) ),error, (中文(简体) ),required-hint, (中文(简体) ),radio-option, (中文(简体) ),checkbox-option, (中文(简体) ),static - 中继器 :
repeater, (中文(简体) ),repeater-legend, (中文(简体) ),row - 版式 :
layout-row, (中文(简体) ),layout-column, (中文(简体) ),layout-section, (中文(简体) ),layout-section-heading, (中文(简体) ),layout-table(与data-columns, (中文(简体) ),layout-tabs, (中文(简体) ),tablist, (中文(简体) ),tab, (中文(简体) ),tabpanel - 向导并提交 :
stepper, (中文(简体) ),wizard-nav, (中文(简体) ),submit - 错误 :
error-summary, (中文(简体) ),error-summary-heading - 丰富文本 :
richtext-toolbar, (中文(简体) ),richtext-button, (中文(简体) ),richtext-preview, (中文(简体) ),richtext, (中文(简体) ),visually-hidden - 文件 :
file-list, (中文(简体) ),file-item, (中文(简体) ),file-status, (中文(简体) ),file-unavailable
visually-hidden 每一个主题都必须隐藏起来——这是唯一的一个名字
丰富的文本工具栏按钮有,所以它被移出屏幕,从未被取出.
控制很简单 input, (中文(简体) ), select 财务报告和审定财务报表 textarea 内部 [data-formancy-part="field"]。 。 。 .
没有什么是一门课, 所以没有什么与你的设计系统相冲突.