# @city-of-baltimore/bromo 中文文档

规范地址：https://npmcn.com/package/%40city-of-baltimore/bromo/

版本：1\.4\.4
npm 元数据更新时间：2026-11-09T12:52:30.011Z
中文译文更新时间：2026-11-09T22:05:21.125Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40city-of-baltimore/bromo
原文对照：https://npmcn.com/package/%40city-of-baltimore/bromo/?lang=original
项目主页：https://bromo-design-system.fly.dev/
源码仓库：https://github.com/city-of-baltimore/bromo

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：2.6 MB，1057 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=26 \<27
- 运行依赖：0 个
- peer 依赖：react ^19\.2\.0，react-dom ^19\.2\.0，@mui/utils ^9\.3\.0，@mui/system ^9\.3\.0，maplibre-gl ^5\.24\.0 \|\| ^6\.5\.0，@mui/material ^9\.3\.1，@mui/x-charts ^9\.0\.0，@emotion/cache ^11\.14\.0，@emotion/react ^11\.14\.0，@emotion/styled ^11\.14\.1，@mui/icons-material ^9\.3\.1
- 首次发布：2026-07-12T21:57:28.211Z
- 最新版本发布：2026-11-09T12:52:29.786Z
- 近 30 天下载量：3041（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：124（近 12 个月 124 个）

## 中文简介

巴尔的摩设计系统 — React + MUI 组件,代币,以及巴尔的摩城市公民应用的应用外壳

## 安装

```sh
npm install @city-of-baltimore/bromo
```

也可以使用：`pnpm add @city-of-baltimore/bromo`、`yarn add @city-of-baltimore/bromo`、`bun add @city-of-baltimore/bromo`

## README

# 巴尔的摩设计系统

对巴尔的摩市民的软件外壳 应用——全市数字化的一门视觉和互动语言 服务 [毛里求斯](https://mui.com/) 和反应19。 支持的精确对等点 范围在此软件包中存在 `peerDependencies`。 。 。 .

**组件目录 / 故事本 :** [https://broom-design-system.fly.dev. 中国植物物种信息数据库](https://bromo-design-system.fly.dev/)

## 安装

```bash
npm install @city-of-baltimore/bromo
```

不需要注册配置或标志 .

## 快开始

将您的应用程序包装一次, 导入样式表一次, 并使用外壳 :

```tsx
// main.tsx
import "@city-of-baltimore/bromo/styles.css"; // network-free resets and tokens
import { BromoProvider } from "@city-of-baltimore/bromo";

createRoot(document.getElementById("root")!).render(
  <BromoProvider config={{ productTitle: "311 Explorer" }}>
    <App />
  </BromoProvider>,
);
```

```tsx
import { PageShell, Surface, Button } from "@city-of-baltimore/bromo";

export function HomePage() {
  return (
    <PageShell eyebrow="Operations" title="Service requests" subtitle="Citywide view">
      <Surface>
        <Button>Export</Button>
      </Surface>
    </PageShell>
  );
}
```

`BromoProvider` 电线主题, `CssBaseline`,轻/暗颜色模式, 编辑 `--bromo-*` 设计符号——不要添加自己的符号 `ThemeProvider` 围绕它. 不需要路由器: shell 链接默认生成平原锚. 路由器 融合可以向公众提供 `linkComponent` 与执行工作相接 接受 `href`;这不会将导航政策转移到工具包中.

Bromo的打字堆 更喜欢 城市家庭,包括 完整的系统倒置. **软件包本身声明不 `@font-face`船舶 没有字体二进制, 联系人没有字体主机** 因此,许可证问题永远不能 污染这个焦油球.

字体交付生活在单独的适配器中, `@city-of-baltimore/bromo-fonts`,从同一版发表 ,并带有与此软件包相同的版本。 只有在您想要时才安装 ; 省略后,浏览器在没有字体请求的情况下使用系统倒叠。 见 [印刷合同](https://npmcn.com/package/%40city-of-baltimore/docs/design/typography.md)。 。 。 .

例如本地外观配置, 共享一个 `BromoColorModeOptions` 对象之间 `initializeBromoColorMode` (以前称为 `createRoot`)和 供应商 `colorMode` 道具 (英语). 初始化器在渲染前刻出已解决的外观偏好 样式表级组合提供符号值并返回解析模式加减动 用于应用程序文档符号的状态. `themeOverrides` 可能是静态的MUI 选项对象或成为接收该模式/减少运动上下文的工厂. 主盘和错盘的重置提供了可读性 `main` 编号 : `contrastText` 双人 Bromo 得到明显不同的 悬浮和压填 离开MUI的将军 `dark` 树荫是独立的,是拒绝不安全的 启用了按钮状态,而不是让它飞来. 见 `docs/use/toolkit_consumer_setup.md` 用于完整示例.

## 入境点

重型可选依赖性从不与按钮相伴:图表和地图 组件在自己的子路径上生存,每个子路径都以可选的对等依赖为基础.

| 导入 | 目录 | 可选对等点 |
| --- | --- | --- |
| `@city-of-baltimore/bromo` | 组件、 提供者、 主题/ 彩色模式助手、 系统符号层 | —— 说 |
| `…/tokens` | 主题、彩色模式和打字合同 | —— 说 |
| `…/charts` | `Chart` (+ 数) `DataTable` (再出口) | `@mui/x-charts` |
| `…/map` | `GeoMap`, (中文(简体) ), `MapFrame`, (中文(简体) ), `MapLegend`, (中文(简体) ), `MapA11ySummary` | `maplibre-gl` |
| `…/styles.css` | 网络自由重置和 CSS 令牌 | —— 说 |

所需的对等器包括 React, MUI, 和情感( React 路由器是可选的) 通过 `linkComponent`) (中文(简体) ). 安装由 已发布的软件包 `peerDependencies`API运输, 认证和运行时助手属于 `@city-of-baltimore/patapsco`布鲁莫没有 `./api` 输出.

## 版本

语义化版本在一个被冻结的公众API上: 根入的每一个输出, 子路径布局和 `--bromo-*` CSS自定义地产名称. 折旧 船舶在拆卸前至少有一次微量放出,其中移出说明载于 [变化](https://github.com/city-of-baltimore/bromo/blob/main/CHANGELOG.md)。 。 。 .

## 无障碍

构成部分目标 WCAG 2.2 AA:双通重点指标,已审查状态墨水 在两种颜色模式中,选择状态不单靠颜色. 故事书的可读性附加支持在手册中明确交互审查 模式。 Playwright 独自拥有释放门中的自动轴执行,其中 它以光和暗两种模式扫描每个索引故事,运行键盘 交互检查,并验证有代表性的视觉快照. 手动和 符合要求仍需进行消费流量测试.

## 许可证

[麻省理工学院](https://npmcn.com/package/%40city-of-baltimore/bromo/LICENSE) ——与GOV.UK设计系统相同的许可证. 这个设计 公共基础设施:任何政府、民间组织或供应商 欢迎使用、适应和在此基础上更上一层楼——这就是重点。 "城市 巴尔的摩"名称,封号,和品牌资产 识别官方城市服务 仍受商标法保护;不要用商标法暗示认可.

* * *

由巴尔的摩市所建.

## 常见问题

### @city-of-baltimore/bromo 是什么？

巴尔的摩设计系统 — React \+ MUI 组件,代币,以及巴尔的摩城市公民应用的应用外壳

### 如何安装 @city-of-baltimore/bromo？

在项目目录运行 npm install @city-of-baltimore/bromo，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.2\.0）、react-dom（^19\.2\.0）、@mui/utils（^9\.3\.0）、@mui/system（^9\.3\.0）、@mui/material（^9\.3\.1）、@emotion/cache（^11\.14\.0）、@emotion/react（^11\.14\.0）、@emotion/styled（^11\.14\.1）、@mui/icons-material（^9\.3\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 bromo-check、bromo-tokens、bromo-codemod，可以用 npx bromo-check 直接运行。

### @city-of-baltimore/bromo 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @city-of-baltimore/bromo 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @city-of-baltimore/bromo 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=26 \<27。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @city-of-baltimore/bromo 可以商用吗？

@city-of-baltimore/bromo 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @city-of-baltimore/bromo 的下载量有多少？

根据 npm 官方下载统计，@city-of-baltimore/bromo 在 2026/10/10 – 2026/11/08 这 30 天内被下载 3,041 次，日均约 101 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @city-of-baltimore/bromo 还在维护吗？

最新版本 1\.4\.4 发布于 2026/11/09（今天）；至今共发布 124 个版本，其中过去 12 个月发布了 124 个；首次发布于 2026/07/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。