用途:帮助按 IBM Carbon Design System v11 构建界面,产出符合 Carbon 规范、基于设计令牌且无障碍的企业级 UI。适用于 Carbon 风格界面、IBM 风格仪表盘等需求。
主要能力:覆盖渲染上下文选择、设计基础与常见模式。渲染上下文分三类:无构建流程的 HTML 产物通过 CDN 引入预构建 CSS(<link rel="stylesheet" href="https://unpkg.com/@carbon/styles/css/styles.css" /> 及 IBM Plex 字体链接)并给 HTML 元素套用 Carbon 类;React 产物因 @carbon/react 不在默认产物环境,同样加载上述 CDN CSS 并对标准 HTML/JSX 元素套用类名,视觉输出一致;完整项目用 npm install @carbon/react sass,并在根 SCSS 中 @use '@carbon/react',需要 Dart Sass。
设计基础:字体必须使用 IBM Plex(正文/UI 用 Plex Sans,代码用 Plex Mono,编辑用 Plex Serif);主题含 White #ffffff、g10 #f4f4f4、g90 #262626、g100 #161616,主操作用 Blue 60 #0f62fe;间距基于 8px 网格与 2px 小单位,组件间距 2/4/8/12/16/24/32/40/48px,布局间距 16/24/32/48/64/96/160px;2x 网格断点 sm 320px 4 列、md 672px 8 列、lg 1056px 16 列、xlg 1312px 16 列、max 1584px 16 列;动效令牌与缓动曲线、网格类(cds--grid、cds--row、cds--col 等)均有定义。
使用方式:按需查阅 html-classes.md 与 tokens.md 参考;实现清单要求加载 IBM Plex、应用 cds--white/g10/g90/g100 主题类、使用 v11 的 cds-- 前缀、采用 cds--grid > cds--row > cds--col-* 网格、仅用规定间距刻度、保留 2px 蓝色焦点轮廓、按角色用令牌而非裸十六进制取色、图标用 16/20/24/32px。
限制与反模式:不要用非 IBM Plex 字体、v10 的 bx-- 前缀、任意圆角(默认 0px,仅标签/胶囊用 4px)、规范未定义阴影、覆盖焦点环、调色板外颜色及不在刻度上的间距。具体组件类与完整令牌值需查阅参考文件,资料未提供更多细节。