@ 原子学/ 主题

AtomicStrata产品共享、框架独立的主题:语义学CSS 指使牌 4个方言主题 自动托管字体 预绘主题选择, 以及可重复使用的合同检查。 产品保持自己的布局,组件, 导航和状态.

0:4.0前的释放仍为麻省理工学院许可(参见"Licence"). 0.5.0 增加主题 有共同系统/灯光/黑暗偏好和科学Clay Dark的家庭 调色板,选入:不要求的消费者得到0.4.0's 行为。 0.5.1 撰写设计系统编译器分类账比率 至小数点后十位,因此所测量的节点版本会写出相同的分类账 (单位:千美元)docs/design-systems.md,“编辑比率”; --check 报告分类账 由0.5.0或更早的 stale 写出一次,再编译一次后再重写. 0.6.0 (中文(简体) ) 为家庭页面添加可选的紧凑外观开关 (单位:千美元)@atomicstrata/themes/appearance-switch, (中文(简体) ), AppearanceSwitch 在反应中 条目, css/appearance-switch.css: 带有附件的日/月按钮 chevron 标签打开一个系统/光/暗和主题面板,安装在其中 页面上行或标题行的插槽( 建议) 或固定到视图 角,从根字体大小大小。 它是选入的: 导入它会更改否 页面,一个不挂载它的消费者得到 完全0.5.1的行为. 它的词是英语,一个角 固定在取景口 只有在没有 它的宿主的祖先被改变,它的44px目标到达了一点过去 所见所闻docs/reference.md,"契约外观开关"). 0.7.0 (简体中文) 显示开关 product 从一个编译为 --bind-product-slot (更新后再编译),保留更早的 拒绝重载时切换工作,并带有系统提示名称 设备计划。 0.8.0 添加外部主题, 选入: 编译器 (单位:千美元)@atomicstrata/themes/theme-compiler,则 atomicstrata-theme 命令) 只编译符号 ext- 主题源,带有可选的材料,输入 检查样式表、 清单和目录; 家庭目录运行时间 页面@atomicstrata/themes/catalog, (中文(简体) ), @atomicstrata/themes/catalog/prepaint, (中文(简体) ), useThemeCatalog作者JSON Schemas;以及 css/materials.css,则 重要角色表(docs/external-themes.md, (中文(简体) ), docs/reference.md 第8条和 §9),一个没有使用其中一款的页面保持了0.7.0的行为,除此之外 文件网站版本上列出的紧凑开关更正 页 次 0.8.1 将开关的面板用窄的文字固定在大文本下 取景口:其中没有任何东西会滚动侧道. 0.9.0 加上: atomicstrata-visual-compare 命令(现场预览、屏幕截图比较和 inspect,下面),使每张选入的材料卡有一个堆叠上下文 从休养起(docs/reference.md 第9节. 完全参考( 隐藏角色、 API 和运行时间假设、 版本、 限制) 检查) docs/reference.md包里装的. docs/integration-acceptance.md说当一个产品 集成完成:其意图、材料设置和装入顺序,a 连锁审计、覆盖矩阵和四个独立的证据跟踪 (具有物质忠诚、无障碍、持久性和 油漆,应用状态). 单独安装的软件包和主题菜单项 从来没有完成一个整合. skills/atomicstrata-theme-integration/SKILL.md 是一个很短的代理技能 应用它; npm 用软件包安装它,但不是作为代理技能,所以 复制或链接到代理的技能目录中, 并在一个 升级.

安装

npm install @atomicstrata/themes

软件包没有运行时间依赖性( React 是可选的对等端, 使用) 仅由 @atomicstrata/themes/react (原始内容存档于2018-09-29). Subpath. 它的 JavaScript 是 ES 模块加 两种经典脚本,其样式表和字体为普通文件: 捆绑器 解决下表中的导出,没有构建步骤的页面服务 已安装的复制件 dist/ 财务报告和审定财务报表 css/ 目录( 为字体服务) .woff2 作为二进制的文件, font/woff2),作为下文中的例子 "使用它"从 /assets/themes/。 。 。 .

包裹里有什么

视觉对比. 在您的工程中安装了软件包 (单位:千美元)npm install @atomicstrata/themes页:1, npx atomicstrata-visual-compare serve 不需要其他任何信息: 它打开一个地址, 有两种模式 。 在一个项目 没有包裹, npx 找不到此本; 它寻找不同的 名为软件包 atomicstrata-visual-compare。现场预览服务于一个合成 仪表板以两个面板活出,每个面板都有各自的主题和外观 (单位:千美元)--catalog <index> 添加一个编译目录的主题, 如安装 @atomicstrata/theme-packs;它是参考 HTML,而不是截图证据. 屏幕截图比较显示您自己保存的截图一次配置 命名他们: npx atomicstrata-visual-compare init visual-review 创建一个 带有合成示例数据集的项目(四个生成的图像,而不是产品) 证据)和 serve --config visual-review/visual-compare.config.json 显示 除了现场预览 你提供自己的截图 用自己的截图 工具; 图片库计数像素差异, 无法访问或 核准判决. docs/visual-comparison.md包里装的是什么, 覆盖两种模式,配置,数据集格式和抓取.

外部主题 (单位:千美元) catalog, (中文(简体) ), catalog/prepaint, (中文(简体) ), theme-compiler 财务报告和审定财务报表 schemas 排队, useThemeCatalog 编辑 atomicstrata-theme bin)为新设置 在0.8.0中:从npm安装0.7.0或更早不提供。 这个 文档网站的版本页记录每个发行的状态.

设计系统(一种外部词汇,如Strata登记簿、其 有关品牌和单行道桥在合同签章上的描述见: docs/design-systems.md,它也在包裹中。 一个系统可以 也显示于 主题外观 (单位:千美元)data-design-appearance="theme": 其不变的构成部分,除 原生外观. 从0.4.0起,a os 系统还可能允许被绑 系统/灯光/黑暗选择(designMode 控制器,指南第6节, 产品本身的标记可以选择进入系统 组件配方 (单位:千美元)data-design-recipe: 动作、字段、卡片、状态和文本角色 检查对比度和标签的可访问性覆盖度,§7,为 产品根和本地地区,除非另有要求.

在一个设计系统中的整个应用程序 (例如,Strata, 提议 支持科学 Clay 和 最小值 之外的主题菜单,但无 系统专用主题 id. 简言之:

• 将系统汇编为 --bind-product-slot。 。 。 .
• 写入 data-design-system, (中文(简体) ), data-design-brand 财务报告和审定财务报表 data-design-appearance="theme" 打开 <html> 在预定的标记中.
• 提供 product id,贴有系统名称的标签(data-product-label="Strata") (中文(简体) ). 保存已存在的存储密钥, 并明确声明默认值 .
• 在其它样式表之前声明级联层顺序 .

下 product 根是土生土长的系统 组成部分适应这一主题。 完整的食谱是"一个完整的应用 第5节中的“系统” docs/design-systems.md。它还覆盖字体、弹出和 保持产品的工作:间距、尺寸、硬码CSS值和 品牌的已知对比例外。 根部的系统 无 data-design-appearance="theme" 在犬科主题下是混合状态 第4节,而不是一致的全应用方法.

可选样式表, 从未装入 theme.css数字 :

• css/typography-root.css:根上16px/1.55的被标本体字体.
• css/control.css: 标有标签的主题的材料 <select>。 。 。 .
• css/appearance-switch.css (0.6.0):紧凑外观开关的材料.
• css/materials.css (0.8.0):用于标出要素的材料角色表 data-theme-material="<role>" (单位:千美元)docs/reference.md §9) 后链接 theme.css 在任何静态链接的主题样式表之前; docs/integration-acceptance.md 包括命令、选择进入和证据.
• css/ambient/scientific-clay.css:科学克莱的环境发光,在标记的元素上 data-theme-ambient="page" 财务报告和审定财务报表 data-theme-ambient="frame"。 。 。 .
• css/adapters/llmwiki-public.css:llmwiki取景者的公名 (中文(简体) )--bg-shell, (中文(简体) ), --fg-body, (中文(简体) ), --accent, (中文(简体) ), --ok),从语义符号中被定义,以无语义名称的星云阴影被保留为文字. 不要在使用另一个词汇旁加载 --accent 或者说 --border。 。 。 .
• css/profiles/commonware-workbench.css: Centric Clay and Minimal 的通用软件工作台值.

主题和标志

主题 ID 是 scientific-clay, (中文(简体) ), minimal, (中文(简体) ), nebula-light 财务报告和审定财务报表 nebula-dark, (中文(简体) ), 印为 data-theme 在文档根上。 仅 minimal 沿着 操作系统的光或暗设置. 产品可能增加一个ID, product,用于它自己的调色板,在它的样式表下宣布 [data-theme="product"];包裹船没有这样的规则。 ID存储在 人民浏览器和永久API.

每个主题定义每个符号 TOKEN_NAMES每个地位有三个作用: --status-<s> 是标记、栏杆和图标的装饰口音,没有 对比承诺; --status-<s>-text 以墨为口; --status-<s>-soft 是墨水里装着的罐子 产品代号家庭(地图、大门、, 类别、工作流程)与产品保持相同,在相同情况下申报 [data-theme="…"] 选择者.

用这个

<!-- before the first stylesheet -->
<script src="/assets/themes/prepaint.global.js" data-storage-key="acme.app.theme.v1"></script>
<link rel="stylesheet" href="/assets/themes/css/theme.css">

<label class="theme-control"><span>Theme</span><select data-theme-select></select></label>

import { bindThemeSelect, getThemeController } from "@atomicstrata/themes";
const release = bindThemeSelect(document, getThemeController());

脚本属性 : data-storage-key="…" 或赤裸的 data-session-only (确切地说,一个),可选 data-themes="scientific-clay minimal", (中文(简体) ), data-product-label="Acme paper", (中文(简体) ), data-default="minimal"。 。 。 .

通过一个构建步骤,生成脚本取而代之. 此表单还支持 从旧的偏好键一次性移徙;每个移徙目标都必须 成为提议的主题之一:

import { prepaintSource } from "@atomicstrata/themes/prepaint";
const script = prepaintSource({
  storageKey: "acme.app.theme.v1",
  themes: ["scientific-clay", "minimal", "nebula-light", "nebula-dark"],
  legacyPreference: { key: "acme-old-theme", values: { light: "nebula-light", dark: "nebula-dark" } },
});

将字符串写入同一来源 .js 文件,或者在文件之后插入 <head> 并允许它通过大麻。 三个送货都是从同一个地方来的 函数在 src/boot-core.ts。 。 。 .

值得了解的行为:

• storageKey 总是表示:您选择的非空字符串,或 null 用于该页的持续选择。 包裹从不发明钥匙.
• 在读取存储或触碰文档之前投放的配置无效; 然后页面在样式表的保险上制作 :root 默认值.
• 未知的存储的ID, 过长或不提供 解决默认问题 。 被丢弃的存储被视作无法使用:默认适用,没有迁移,没有写入.
• 选择主题集 data-theme 写出一个密钥。 它什么也拿不到,无处航行,没有到达框架.
• bindThemeSelect 返回释放函数,并再次将同一选择绑定取代其早先的绑定。 用于反应, 使用 controller.subscribe 与 useSyncExternalStore。 。 。 .
• 没有捆绑者,就服务整个 dist/ 目录:模块条目通过相对路径导入其兄弟会文件。 服务于已关闭的文件列表的页面需要每个模块 dist/index.js 进口,列于 docs/reference.md (“运行时假设”);从0.5.0,包括 dist/family-core.js即使在一页 从不要求家庭。 每个经典脚本( A)prepaint.global.js, (中文(简体) ), prepaint-mode.global.js, (中文(简体) ), prepaint-family.global.js)是一个单一文件. 这个 css/ 目录也必须保留其结构,因为字体相对于其样式表是被处理的.

嵌入式导出文件

他们从不给框架的内容作风格. 嵌入固定出现的一页 文件本身应如此表示:将文件交给它自己 <meta name="color-scheme">设置 color-scheme 编辑 iframe 元素 (对于轻度导出, color-scheme: light),所以申请计划是 无法到达嵌入式画布或本地控件。 这条规则属于 嵌入产品; 游乐场 content.css 显示它.

开发

需要节点22.18或更后(测试直接运行 TypeScript).

npm install
npm test                 # build, then node --test over tests/*.test.ts
npm run typecheck
npm run codehealth       # tests with measured coverage, then fallow dead-code, dupes and health
npm run vendor:fonts     # recopy fonts and regenerate notices from the pinned @fontsource packages
cp .env.example .env     # playground host and port; no defaults are built in
npm run playground       # http://127.0.0.1:4319/
npm run playground:screenshots   # needs the server running; writes playground/screenshots/
npm run fixtures:prepare # pack the package and build the two consumer fixtures from that tarball
npm run test:browser     # Playwright acceptance against the built fixtures
npm run visual:gallery   # saved screenshot comparison gallery, http://127.0.0.1:4320/
npm run visual:check-distribution   # pack, install in a scratch consumer, drive the installed gallery in Chromium
npm run design-systems:acquire   # pinned private Strata brand files via gh (organisation access)
npm run test:strata      # acquire, then the Strata profile against the pinned files
npm run design-systems:prepare   # after fixtures:prepare: build the plain and React galleries from the tarball
npm run design-systems:serve plain   # http://127.0.0.1:4351/ (react: 4352)
npm run test:design-systems:browser  # both galleries in Chromium, Firefox and WebKit
npm run docs:dev         # documentation site (docs-site/, Mintlify) preview, http://localhost:4360/
npm run docs:check       # generated reference pages current, mint validate and broken links

反应画廊也需要登记册的组件: node fixtures/design-systems/react/scripts/vendor-registry.mjs (被钉住) 执行; 字节保持不变 .

npm run visual:gallery 服务存储器的保存产品 截图跨越主题和主题版本,从 llmwiki 开始 移徙证据;见 tools/visual-comparison/README.md这些证据和 抓取的绳子留在仓库里,没有包装。 画廊 本身作为船只 atomicstrata-visual-compare 页:1.

游乐场显示一个内容片段分出三个布局(阅读器,工作台, 产品),每个包件通过不同的预油漆交付装入 根据严格的内容安全政策。 固定装置 fixtures/ 安装 包装的柏油球被打入平地-雅瓦-斯克利普特站点和反应/威特建筑.

核查

三层,每个层从这个寄存器运行:

• 单位和合同测试 (单位:千美元)npm test:解析器作为一个表格运行在模块条目,生成的脚本和预建的脚本上的行为;拒绝的配置离开页面未被更改;选择绑定;每个主题完整,其文字角色可用算术读取;参考方向;查看器倒放与未修改的上游样式表比较;字体字节和通知;文档本身的例子.
• 装箱的工艺固定装置 (单位:千美元)npm run fixtures:prepare:一个柏油球被打包并装入平原-贾瓦斯克里普特站点和一个React/Vite生产建筑. 不从此源树导入 .
• 浏览器接受 (单位:千美元)npm run test:browser: Playwright 对抗两种已建成的固定装置,在Chrimium,Firefox和WebKit中构建了它.
• 设计系统画廊 (单位:千美元)npm run test:design-systems:browser:在平原-HTML Strata和Lumen的站点和React/Tailwind的站点上设置了相同的柏油球,每个站点都有Strata注册的十二个组件,与仅注册的参考页相比,同一三个引擎.

结果不写在这个文件中,因为它在包里 这将是描述。 在存储库中,日期报告如下: evidence/verification/ 记录命令运行、结果、焦球 文摘和未核实的东西 仓库的 tech-debt.md 列表 已知的妥协。 也不属于已公布的软件包.

许可证

从0.4.0版本开始,包括本版本(0.9.0), @atomicstrata/themes 用于非商业用途 页:1 非商业许可证 1.0.0 (单位:千美元)LICENSE,正文,未作修改). 许可人是Supernet Inc., 做Atomic Strata的生意.

规定通知:版权(c)2026Supernet Inc.,作为Atomic Strata开展业务

• 非商业用途 许可的条件,即: 它:任何非商业目的,个人用途,不作任何预期 商业应用(其“个人用途”部分),以及 慈善组织、教育机构、公共研究 组织、公共安全或卫生组织、环境 保护组织或政府机构,不论经费多少 (其"非商业组织"部分. 读取 LICENSE 准确的 措辞.
• 在上述允许用途之外的商业用途 需要单独的 书面、有偿协议 与Supernet Inc.,从事Atomic Strata的业务. 联系人 支持@ atomistrata.ai。安装软件包或不支付 该协议不赋予额外的商业权利.
• 之前的释放会留在麻省理工学院. 0.4.0之前出版的每个版本 (0.0级,0.1.0和0.3.0)根据麻省理工学院许可证发布 还在它下面 以这些版本出版的材料,包括: 它在0.4.0或以后似乎没有变化,根据这些麻省理工学院保留 条件。 Supernet Inc.的原始出品最早于0.4.0被公布 或以后根据非商业性的PolyForm提供,除非另行许可, (b) 通过商业协议等方式。 第三方材料留存 它自己的条件.
• 第三方麻省理工学院材料. B. 专题价值和机制 麻省理工学院许可的 llm -wiki 编译器的浏览器 保持该项目的麻省理工学院通知. 它和这个软件包早期的麻省理工学院许可 是同一个字节的文本字节, 已全部运出 LEGACY-MIT-LICENSE.txt。 。 。 .
• 字体 保留在 SIL 开放字体许可证1.1 下.

这个 license 输入 package.json 实值 (PolyForm-Noncommercial-1.0.0 AND MIT AND OFL-1.1): 包含 三者各有材料。 本节介绍安排 这不是法律建议.

证明

主题价值和机制来自麻省理工学院 llm-wiki-编译取景器; tests/upstream/llm-wiki-compiler/ 持有未修改 其主题样式表的副本,其中 tests/viewer-drop-in.test.ts 比较 反对。 字体是 SIL Open Font 许可证 1.1, 从被绑定时复制未修改 @fontsource 软件包; css/fonts/manifest.json 记录每个文件的来源 和摘要, THIRD_PARTY_NOTICES.txt 携带每个软件包的全部许可证 13个文件与观众的字节相同 来源 承诺和设计审查摘要 evidence/source-snapshots/2026-10-11-design/SOURCES.md。 。 。 .

跨产品结构和移徙计划 am-research-internal。 。 。 .