# @brandsync/wc 中文文档

规范地址：https://npmcn.com/package/%40brandsync/wc/

版本：1\.32\.0
npm 元数据更新时间：2026-11-06T11:41:47.567Z
中文译文更新时间：2026-11-08T14:07:12.557Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40brandsync/wc
原文对照：https://npmcn.com/package/%40brandsync/wc/?lang=original

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

- 包体积（解压后）：20.1 MB，2387 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2026-09-08T04:48:44.546Z
- 最新版本发布：2026-11-06T11:41:47.371Z
- 近 30 天下载量：8758（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：55（近 12 个月 55 个）

## 中文简介

Brandsync 设计系统组件作为框架不可知 Web组件

## 安装

```sh
npm install @brandsync/wc
```

也可以使用：`pnpm add @brandsync/wc`、`yarn add @brandsync/wc`、`bun add @brandsync/wc`

## README

# @ brandsync/ wc (英语)

Brandsync的设计系统组件作为框架不可知的Web组件——真实自成一体 自定义元素通过React, Angular, Blazor, 或平面 HTML 消耗的方式相同. 与 [斯坦西尔](https://stenciljs.com/),完全从 `brandsync-tokens` CSS 自定义属性.

见 `CONVENTIONS.md` 用于定制表面的每个组件如下(CSS自定义属性, 阴影部件、插槽)和 `docs/blazor-interop/` 一个工作过的布拉佐尔/穆德布拉佐尔消费的例子.

## 开始

```bash
npm install
npm run build      # compiles all components, generates React/Angular wrapper packages
npm test           # runs the component test suite
npm run storybook  # interactive component catalog at http://localhost:6006
```

## 类型

`brandsync-tokens` 指定机器人( R)`--bs-typography-font-family-*`每一个组件的阴影 样式继承 `font-family` 从文档根-但 **装入实际的机器人字体文件 消费应用的工作**,在全局范围内已经使用的同一公约 `eg-brandsync` (a) 谷歌字体 `<link>`,或 `next/font/google` 在 Next.js 应用程序中。 这个图书馆的船型 不是字体文件.

```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap">
```

这些是Google字体实际服务的静态机器人重量(100/300/400/500/700/900). `--bs-font-weight-semibold` 600, 而静态样式表没有600, 所以半粗体文本是 由500或700合成而来. 装入可变字体( E)`next/font/google` 与机器人,或 `@fontsource-variable/roboto`当半粗体必须是真正的600. 如果机器人没上膛, 组件仍然有效——文本只是回到了浏览器默认的 sans-serif.

## 使用量

```html
<script type="module" src="https://unpkg.com/@brandsync/wc"></script>
<bs-button variant="primary">Book room</bs-button>
```

或者来自 `node_modules`,每个组件:

```ts
import '@brandsync/wc/dist/components/bs-button.js';
```

反应和Angular 获得自动生成的包装包(`@stencil/react-output-target` 编号 : `@stencil/angular-output-target`)来自同一来源——见: `stencil.config.ts`。 。 。 .

## 设计符号——需要,而不是可选

每个组件的阴影DOM CSS是完全针对 `--bs-*` 自定义属性 (单位:千美元)`--bs-input-bg-default`, (中文(简体) ), `--bs-composer-button-size`, (中文(简体) ), `--bs-spacing-150`(中文(简体) ). **这个软件包是 不在任何地方注入这些变量** - 仅此而已 _消耗量_ 他们。 如果耗用软件没有 定义它们,每 `var(--bs-something)` (这些宣言中没有一个有退步) 其CSS-无效计算值回落: `border: none`, (中文(简体) ), `background: transparent`, (中文(简体) ), `width`编号 :`height`编号 :`padding`编号 :`gap: 0`,浏览器默认 `font-size`。该部分仍然用于 dOM - 它只是静静地崩溃( 没有可见的边框/框, 按钮缩到一无所有, 文本) 字段推到自己的行上),没有控制台出错或例外指向缺失 符号,这使得它成为了混淆的第一个调试错误.

修补: 加载此套件的符号样式表( 从 `brandsync-tokens`曾经, 在全球,在消费应用中 -- **在此之前** 任意 `bs-*` 元素使 :

```css
/* e.g. src/styles.css / global.css / angular.json "styles" array */
@import '@brandsync/wc/dist/brandsync-wc/brandsync-wc.css';
```

```html
<!-- plain HTML/CDN consumption -->
<link rel="stylesheet" href="https://unpkg.com/@brandsync/wc/dist/brandsync-wc/brandsync-wc.css">
```

这同样适用于 HTML/CDN 路径、 npm+bundler 路径和 React/Angular 包装器 软件包——没有自动输入。 如果一个消费的应用已经有自己的不同名称 设计标志(如:. `--surface-base` 改为 `--bs-color-surface-base`),该应用级符号 文件确实 **没有** 即使数值在概念上相符,也满足了这一要求 -- -- 阴影DOM CSS 只解决 `--bs-*`\- 前缀名称, 所以上面的销售商样式表必须加载 随便.

已知无害的噪音:销售商 `brandsync-wc.css` 目前含有少数畸形 上游的象征性声明 `brandsync-tokens` 导出步骤(例如). `--bs-5-brand-colors-jade-brand-700: {Brand Colors.teal.700};`),一些工具(例如:. Angular的CSS预算/林特阶)警告. 这些在供应商的依赖中存在,而不是 由这个软件包引入,并且不要影响这个库实际使用的任何符号.

## 浏览器支持、 RTL 和强制颜色

-   **浏览器 :** 常绿衣/外衣,Firefox和Safari(后两个主要版本). 构成部分 依赖阴影 DOM、 自定义元素和 `ElementInternals` (形式联系). **只有铬是 今天在中情局执行**; Firefox/Safari 预计将工作,但尚未得到核查 自动套房.
-   **RTL: (英语)** 布局使用 CSS 逻辑属性。 例外: `bs-slider` 财务报告和审定财务报表 `bs-progress-linear` 保持物理几何(由值驱动),并居中覆盖使用 `left: 50%` + 键 `translateX`。 。 。 .
-   **视窗高对比度( E)`forced-colors`:** 按钮、复选框、开关、收音机、输入、菜单、卡片和 对话有明确的规则;其他组成部分没有审计.
-   **安全部门改革:** 未核实。 Stencil可以水合,但SSR集成(Next.js, Angular Universal)是没有的 测试或记录至今.

## 常见问题

### @brandsync/wc 是什么？

Brandsync 设计系统组件作为框架不可知 Web组件

### 如何安装 @brandsync/wc？

在项目目录运行 npm install @brandsync/wc，或使用 pnpm add / yarn add / bun add。

### @brandsync/wc 支持 TypeScript 吗？

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

### @brandsync/wc 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @brandsync/wc 可以商用吗？

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

### @brandsync/wc 的下载量有多少？

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

### @brandsync/wc 还在维护吗？

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