巴尔的摩设计系统

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

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

安装

npm install @city-of-baltimore/bromo

不需要注册配置或标志 .

快开始

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

// 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>,
);

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,从同一版发表 ,并带有与此软件包相同的版本。 只有在您想要时才安装 ; 省略后,浏览器在没有字体请求的情况下使用系统倒叠。 见 印刷合同。 。 。 .

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

入境点

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

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

版本

语义化版本在一个被冻结的公众API上: 根入的每一个输出, 子路径布局和 --bromo-* CSS自定义地产名称. 折旧 船舶在拆卸前至少有一次微量放出,其中移出说明载于 变化。 。 。 .

无障碍

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

许可证

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

由巴尔的摩市所建.