@ any known/ ui (任何已知的/ ii)
Anyknown 产品共同使用的设计系统 样式X反应19和基地UI.
每一版中的变化都发生在 变动情况;从0.9升级后将逐步纳入 移民.md。 。 。 .
结构
src/tokens.stylex.ts:语义符号(颜色,字体,类型,空间,角,运动,阴影等). 光是默认的;黑暗跟随OS. 单出真言之源.src/tokens.css: 与平方 CSS 变量相同的值(--ak-*),对于不使用StyleX的消费者(桌面引用来自Tailwind v4的它们)@theme) (中文(简体) ). 导入路径 :@anyknown/ui/tokens.css。有一个调色板(中性);光和暗跟踪操作系统,以及data-theme锁上一. 生成者pnpm gen:tokens-css; 不要用手来编辑 (src/tokens-css.test.ts无法同步 .src/themes.stylex.ts数字 :light编号 :dark主题,用于带有手动主题切换的应用程序:<div {...stylex.props(...light)}>。 。 。 . 生成者pnpm gen:themes; 不要用手来编辑 (src/themes.test.ts无法同步 .src/brand.css: 约二十个的有界限词汇ak-*没有捆绑的一页(报告、建议、基准)。 构建内置了符号并添加了Google字体(scripts/brand-css.mjs),生产dist/brand.css财务报告和审定财务报表 https://ui.anynowledge.com/brand.css (中文(简体) )规则在 设计· ;pnpm check当文档和词汇不一致时失败.src/scrollbar.css:自定义滚动条,在全球应用. StyleX 无法写入::-webkit-scrollbar伪元素,所以他们生活在一个CSS文件中.src/components/: 每个组件一个文件夹 :<Name>.tsx页:1README.md在大多数文件夹中,<Name>.test.tsx。每个文件夹都有组件。 共同决定载于 组件/README.md推理和死亡的结局在 构成部分/业务。 。 。 .src/lib/: 共享钩和帮助:i18n.tsx(单位:千美元)LocaleProvider, (中文(简体) ),defineStrings, (中文(简体) ),useStrings, (中文(简体) ),store.ts(单位:千美元)createStore, (中文(简体) ),useStore, (中文(简体) ),textLayout.ts(可选的Pretext引擎),外加被减小的运动,可控状态,剪贴板,diff,styled财务报告和审定财务报表reset.control。 。 。 .docs/guides/: 指南: 开始中, (中文(简体) ), 主题, (中文(简体) ), 国家管理, (中文(简体) ), 无障碍, (中文(简体) ), 国际化 财务报告和审定财务报表 文本布局。 。 。 .scripts/:发电机和检查.palette.mjs计算颜色,themes.mjs财务报告和审定财务报表tokens-css.mjs生成themes.stylex.ts财务报告和审定财务报表tokens.css,以及api-docs.mjs读取类型脚本源并写入site/generated/api.json(每个部件的道具)和site/generated/tokens.json(每个标志组) 为docs网站.playground/:一个演示应用. 不属于已发布的包.site/:Docs站点,部署在Cloudflare工人站. 不属于已发布的包.
文档网站
https://ui.anynowledge.com 互联网档案馆的存檔,存档日期2013-12-02 拥有:
- 每个组件的一页
#/components/<name>及其README、演示和来源产生的道具表; - 指南在
#/guide/<name>· ; - 符号页面
#/tokens以每一个标志及其光明和黑暗的价值; - 一页的每个演示
#/demo· ;#/demo/<name>跳到一个。 游乐场使用同一节的ID.
pnpm site:build 构建软件包,然后是网站 llms.txt。 。 。 .
发展
pnpm test # vitest (jsdom + testing-library)
pnpm check # turbo run typecheck lint fmt:check design:check (parallel + cached)
pnpm typecheck # tsc over the library, the playground and the docs site
pnpm build # dist: ESM + d.ts + tokens.css + scrollbar.css + brand.css
pnpm verify:pack # build, pack, then resolve every exports-map entry from outside the package
pnpm gen:themes # regenerate src/themes.stylex.ts from the tokens
pnpm gen:tokens-css # regenerate src/tokens.css from the tokens
pnpm playground # http://localhost:5199, every component rendered from the built dist
pnpm site # http://localhost:5200, the docs site
pnpm site:test # jsdom smoke tests for the docs site
pnpm site:build # build the package and the docs site
pnpm site:deploy # build, then deploy to https://ui.anyknown.com (run wrangler login first)
check, (中文(简体) ), test, (中文(简体) ), build 其余的则通过 涡轮 (单打包模式,配置于 turbo.json) (中文(简体) ). 缓存被推到自备远程缓存 https://turbo.anyknown.com (小组) anyknown-ui) (中文(简体) ). 要使用远程缓存, 导出符号 :
export TURBO_TOKEN=<token> # see turbo-cache-worker/GITHUB-SECRETS.md
没有它,没有破碎;涡轮坠回当地缓存. 提供的投入 build, (中文(简体) ), lint, (中文(简体) ), typecheck 财务报告和审定财务报表 test 内 turbo.json 故意排除 *.md,因此编辑文件时不会重播. site:build 财务报告和审定财务报表 site:test 使用默认输入, 因为文件站点会读取那些 Markdown 文件 .
释放
该软件包作为无害环境管理+d.ts发布. StyleX 调用在输出中 和消费者的捆绑者编译它们(StyleX库的标准方法).
每一次发布都会有 CHANGELOG.md 条目(保留更改日志:中断 / 添加 / 更改 / 折旧 / 固定 / 可访问性),一个中断发布也会在 MIGRATION.md 带有代码前/后.
这个版本是 由 git 标签设置。推动a v* 标签和 .github/workflows/release.yml 运行整个大门,然后出版。 如果标签不匹配 version 内 package.json,则工作流程失败而无所发布.
# 1. Bump version in package.json (semver)
# 2. Commit, tag and push
git commit -am "release: v0.2.0"
git tag v0.2.0
git push origin main --tags
CI 运行 typecheck / lint / fmt:check / test / site:test,则 verify:pack,则 npm publish前5个通过涡轮遥控缓存, 所以大多数都击中了已经运行在公关上的东西. verify:pack 不被缓存 : 它的工作是每次打包一个新鲜的柏油球, 并解决包外的出口地图 .
出版用途 npm 信任的出版 (OIDC); repo 存储没有 npm 证书 。 在 npmjs.com 链接上信任的出版商 @anyknown/ui 改为 anyknown-com/ui 编号 : release.yml. CI 用途 npm publish没有 pnpm publish,因为pnpm的OIDC支持还没有准备好(pnpm)pnpm#9812 (英语)) (中文(简体) ).
v0.1.0 由本地机器手工发布: npm 只能将可信任的出版商附加到一个 已经存在的软件包,所以第一个版本没有办法绕过它. 之后的每个版本都会通过标签.
CI唯一不能检查的是视觉 在发布前,打开 pnpm playground 并寻找视觉或运动后退,然后打开macOS"Reduce Movement"再再再看.
基础设施
| 还原 | https://github.com/any known-com/ui (中文(简体) ) (公开,麻省理工学院) |
| 无 | @anyknown/ui,信任的出版商绑定 anyknown-com/ui → release.yml |
| 文件站点 | https://ui.anynowledge.com 互联网档案馆的存檔,存档日期2013-12-02 (云雾工人) |
| 设计.md | https://ui.anynowledge.com/design.md 互联网档案馆的存檔,存档日期2013-12-02数字 : DESIGN.md 加生成的符号表和 brand.css 词汇; 第一个条目 llms.txt |
| 品牌.css (中文(简体) ) | https://ui.anynowledge.com/brand.css (中文(简体) ): 外部代理制作一页 <link> 此; 也作为 @anyknown/ui/brand.css |
| 远程缓存 | turbo.anyknown.com,团队 anyknown-ui; 符号是 repo 秘密 TURBO_TOKEN,当地 export TURBO_TOKEN=<token> (工人从密文中读出) anyknown-com/turbo-cache(中文(简体) ) |
用在应用程序上
pnpm add @anyknown/ui @stylexjs/stylex
pnpm add -D @stylexjs/babel-plugin @stylexjs/postcss-plugin postcss @babel/core
StyleX需要两个通行证: Babel 转身 stylex.create 输入类名,然后 PostCSS 写入样式表。 两个人都要碾倒 node_modules/@anyknown/ui/dist/**/*.js 还有你的密码 都一样 unstable_moduleResolution.rootDirCSS条目需要裸体 @stylex; 指令 :
@import "@anyknown/ui/tokens.css";
@import "@anyknown/ui/scrollbar.css";
@stylex;
import { Button, Text } from "@anyknown/ui"
import { color, space } from "@anyknown/ui/tokens.stylex"
挂载 <Toaster /> 财务报告和审定财务报表 <Dialogs /> 一次靠近根部,然后将应用包入 <LocaleProvider locale="en"> 对于英语内置单词( 默认为 zh-TW) (中文(简体) ). 你自己的风格使用符号,从不生出颜色.
Vite 和 PostCSS 的完整设置、字体、 Tailwind 映射和第一个屏幕都在 开始。 。 。 .
视觉方向:铅笔素描
一张纸,上面没有行,字后没有,颜色只用于状态(OKLCH chroma 0 grays,墨文本). 等级来自空间、重量、大小和一个灰色(textMuted) (中文(简体) ). 只有您按下的东西会携带洗涤器( 以 6% 表示, 11% 显示在悬浮上); 只有漂浮的东西( 文本字段、 作曲、 菜单、 工作表、 对话框、 土司、 工具提示) 得到一个被阴影提升的表面, 最多一个级别 。 蓝色 signal 意思是工作,红色失败,琥珀 等待你,绿色完成,并且只在文本或一个6px点上。 没有口音颜色:主要动作是坚固的"墨药丸"而链接为带有下划线的"墨". 转角是 shape (一线控制药), box (24px,用于生长的盒子)和 check (4px,复选框平方). 标题和体文字使用Geist,时间和数据使用Geist Mono,而中文则使用Noto Sans TC(落回平方TC或微软JhengHei未安装时). 光谱是 设计 第1节. 颜色按下列方法计算: scripts/palette.mjs 从5个 12 步 OKLCH 缩放 : 更改颜色、 更改缩放、 重运行并粘贴输出返回; 永远不要手调一个值( 见 他们) (中文(简体) ). 早先编织的设计语言及其分类账调色板存档于 archive/fiber 树枝.
Apps 自己安装字体 :
pnpm add @fontsource-variable/geist @fontsource-variable/geist-mono @fontsource-variable/noto-sans-tc