newtone_ui_react-web
Newtone的web React组件库。
这个回购的权威描述是
~/gallina/newtone/ui_react-web/_blueprint/index.md和这里的分量 放电~/gallina/newtone/_blueprint/contracts/． 如果本自述文件与其他文件不一致， 他们赢了。
这是什么？
26 34个组件和一个彩色端口 (讲述 ls src/*/index.ts 2026-09-25，当六个图表部分到达时 0.6.0;这二十六个人在他们面前已经变质了)。 ls src/*/index.ts 完整的公共API是什么
JavaScript可以达到； package.json的 exports Map是包含样式表的完整的Map。
这张表是书脊，不是名单 -上面的蓝图包含所有组件。
Surface | 拥有其内容读取的上下文： theme， elevation， mode |
Button | 排放 contracts/button.md． 三个变体，五种状态， 三种尺寸的梯级 |
Text | 排放 contracts/typography.md. font， weight， case， figures， ligatures |
Navbar | 排放 contracts/navbar.md． 零件和旋钮；安排属于现场 |
Desktop | 排放 contracts/desktop.md． 一个操作系统框架：窗口，启动器，面板，工作表（没有菜单栏或dock：主机有它们）；消费者保留布局 |
Identity | 一个有作用域的种子集：为一个子树重新派生颜色 |
color.ts | 的港口 contracts/color-derivation.md -运行时标识的一半 |
控制尺寸
这里的每个控制都是5个高度中的一个——36、40、44、48、56——在两个类型对中的一个，
14/20或16/24。 一、 size 道具选择一个横档，横档携带它的高度，它的类型对，它的
字形和它的填充在一起；没有第二条轴。 contracts/button.md， 大小.
sm | md | lg | xl | |
|---|---|---|---|---|
Control | 36 | 40 | 44 | 48 |
Button， Navbar | 40 | 44 | 48 | - - - - - - |
Action， QuickAction | 48 | - - - - - - | 56 | - - - - - - |
一、 Control 位于a的下一级 Button 在前三个位置，和 xl 是例外。
它的存在是为了控制站在一张照片上 Gallery的箭头, VideoLightbox离这儿很近
没有一个页面的主要动作可以与它们竞争。
举个例子
import { Surface, Button } from '@newtone-dev/ui-react-web'
import '@newtone-dev/ui-tokens/newtone.css'
import '@newtone-dev/ui-react-web/button.css'
<Surface theme="emphasis">
<Button>Primary</Button>
</Surface>
那个按钮变成了一个带有品牌标签的光填充，然后 没有任何东西传递给它。
组件不携带facet。 否 theme， mode 或者 elevation 把道具放在巴顿身上。它的
令牌指向角色，角色解析它所在的Surface。一个 theme
Prop会将24路上下文产品放回到每个组件上，这正是
角色层的存在是为了防止什么。
作用域的身份
<Identity seeds={{ system: { accent: { h: 35, c: 0.78 } } }}>
{/* this subtree wears another brand over the site's own neutrals */}
</Identity>
seeds 形状像代币回购吗 seed.json -组，然后调色板，然后色调和
饱和。 种子不是颜色，也没有亮度，因为轻盈是一种
颜色所做的工作的属性，直到角色要求时才知道该工作。
c 是在该明度和色调下，可达到的最丰富色彩的比率，从0到1，
所以 c: 1 是色域边界而不是错误，相同的数字意味着相同
请求黄色或蓝色。
只有核心颜色层是与身份相关的，因此每个层写入51个自定义属性 调色板命名，没有其他内容。以下所有内容都是参考，并自行遵循。 未命名的调色板从封闭范围继承，因此可以自由嵌套 继承是CSS自己的。
推导是计算出来的，而不是表出来的：51步均匀地间隔在CIE L*中，用
色度取自Display P3天花板。 src/color.ts 还有代币回购
compute/ 是一个合约的两个实现，必须产生相同的字节。
构建
npm run build - - - - - - tsc 来 dist/,然后 copy-styles.mjs，它会走路 src 复制所有29个
样式表跨逐字因为 tsc 不发出CSS。 dist/ 是否忽略并建立在发布的基础上
由 prepublishOnly;没有捆绑者。
这一节说 没有构建 直到2026-09-21从建筑开始，他就错了
登陆。 tsconfig.json 集合 "module": "NodeNext"这就是为什么这里的每一种相对进口都带有
显式扩展-解析的打包器 from './button' 而Node ESM则没有。
消费
发布到npm @newtone-dev/ui-react-web. 它声明 react 作为同行(^18 || ^19）
,也 不 取决于 @newtone-dev/ui-tokens：每个组件读取 --newtone-* 自定义
属性的名称，并提供它们是消费站点的工作。
npm install @newtone-dev/ui-react-web @newtone-dev/ui-tokens
import { Surface, Button } from '@newtone-dev/ui-react-web'
import '@newtone-dev/ui-react-web/button.css'
每个组件一次导入一个样式表，消费者可以导入的每个路径都是
输入 exports 地图。 sideEffects 的名字 **/*.css 所以一个捆绑商保管它们。
这一节说 没有任何东西被发布到npm 直到2026-09-21，三周后
publishConfig.access 和 prepublishOnly 是补充道。