# @bluelamp/brand-kit 中文文档

规范地址：https://npmcn.com/package/%40bluelamp/brand-kit/

版本：0\.9\.0
npm 元数据更新时间：2026-11-07T09:13:55.008Z
中文译文更新时间：2026-11-08T08:37:35.073Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：568 kB，83 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=18
- 运行依赖：0 个
- peer 依赖：react \>=18
- 首次发布：2026-09-01T10:47:13.143Z
- 最新版本发布：2026-11-07T09:13:54.825Z
- 近 30 天下载量：2162（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：25（近 12 个月 25 个）

## 中文简介

BlueLamp QQ品牌:API 型 / / 判定の純関数 判定の純関数 部品 部品 CSS を別リポのフロント (YASHARO)と后端 1か所から配る

## 安装

```sh
npm install @bluelamp/brand-kit
```

也可以使用：`pnpm add @bluelamp/brand-kit`、`yarn add @bluelamp/brand-kit`、`bun add @bluelamp/brand-kit`

## README

# @bluelamp/brand-kit (英语)

蓝色灯光 **品牌设计**: : : : : / / / / 反应 : / CSS : **页:1**键。

\\(YASHIRO) `yamatovision` の ad ad port (`mikoto-monorepo/backend`(掌声) 別リポにある。型と見た目の定義を各自で持てば必ずズレるので、本パッケージから配って各自で持たない。

-   {\\FN黑体\\FS22\\BORD1\\SHAD0\\3AHBE\\4AH00\\FSCX67\\FSCY66\\2CHFFFFFF\\3CH808080}YASHIRO {\\FN黑体\\FS22\\BORD1\\SHAD0\\3AHBE\\4AH00\\FSCX67\\FSCY66\\2CHFFFFFF\\3CH808080}你觉得呢 `docs/requirements-yashiro-brand-E.md`(单位:千美元)**第6条**(中文(简体) )
-   校对:SOUP**蓝灯 蓝灯**」。 本パッケージは判断を**配る**器であって、受け手が独自の判断を足す場所ではない。

## 入っているもの

| 页:1 | 出どころ | 備考 |
| --- | --- | --- |
| 页:1 `TenantBranding` 编号 : `PublicBranding` 编号 : `TenantCategory` | ^ 第6条(正本) | 実装から逆算して増やさない |
| 净化 `sanitizeBranding` ほか | `backend/src/bluelamp/lib/brandingSanitize.ts` から**移設** | 后端 后端 后端 后端 后端 |
| CSS : +================================================================================== `resolveTenantTheme` 编号 : `buildThemeCssVariables` ほか | `apps/bluelamp-vscode/src/ui/theme/tenantTheme.ts` の値が**页:1** | 拡張側の差し替えは本便外 |
| **カード部品**(单位:千美元)`/cards` サブパス | `apps/bluelamp-admin/src/components/promptCards/` から**移設**(第556页 -- -- 0页H1) | \========================================================================================================== (========================================== |

## 使い方

```ts
import {
  sanitizeBranding,
  resolveTenantTheme,
  buildThemeCssVariables,
  TENANT_THEME_CSS_PROPERTIES,
  type TenantBranding,
} from '@bluelamp/brand-kit';

// 配る側（BlueLamp backend）: 公開前に 1 回だけ通す
const publicBranding = sanitizeBranding(tenant.branding);

// 受け手（admin のプレビュー / portal / VS Code webview）: そのまま CSS 変数へ
const vars = buildThemeCssVariables(resolveTenantTheme(publicBranding));
for (const key of TENANT_THEME_CSS_PROPERTIES) {
  const value = vars[key];
  // 今回設定されなかったものは消す（テナント A → B で A の色が残らないようにするため）
  if (value) el.style.setProperty(key, value);
  else el.style.removeProperty(key);
}
```

## 页:1`@bluelamp/brand-kit/cards`(中文(简体) )

VSCode QQ( & & D). BlueLamp 管理员 YASHRO 管理员 {}**导入 {}**(=UI を 1 。

```ts
import {
  PromptCardTabs, PromptCardView, useCardDrag,
  buildTabs, toCatalogCards, planPlacement, buildPlacementBody,
  injectPromptCardStyles, injectSlotsEditorStyles,
  type CatalogCard, type PlaceableAssetsResponse,
} from '@bluelamp/brand-kit/cards';

// 見た目の注入は面が 1 回呼ぶ（この順序で）。二重注入は id で弾かれる。
injectPromptCardStyles();   // 会員側の design-system.css + promptCards.css（＋器の下に閉じた reset）
injectSlotsEditorStyles();  // 編集モードで足す分
```

### 🚨

`origin: 'vscode'` の CSS の**正本は `apps/bluelamp-vscode/media/**`(会員が実際に見ている面**で、 本パッケージは**配布路**である。直すときは:

```bash
# ① 出典（vscode 側）を直す  ② 焼き直す  ③ 差分を commit
pnpm --filter "@bluelamp/brand-kit" run bake:css
```

⛔ `src/cards/generated/vscodeCss.ts` ( 。 焼き直し忘れと手編集は `tests/cards/cssSingleSource.test.ts` が捕まえる。 ⚠️**\========================================================================================================== (==========================================**(中文(简体) )。

例外は `src/cards/slotsEditor.css`(編集モードで足す分)。会員側に対応物が無いので**ここが正本**键。

### 根数 :

カード部品は `react` · 要求 `/cards` サブパスに閉じてある。 root( 根数)`@bluelamp/brand-kit`(掌声) **反应 qq**反应 (单位:千美元)`mikoto-monorepo/backend`\* 根 \* \* 需要 \* \* `MODULE_NOT_FOUND` にしないため。

## 2 国 家

| 関数 | 何のため | `#abc` の扱い | 落ちたとき |
| --- | --- | --- | --- |
| `sanitizeBrandingColors` | **保存値を公開して安全にする** | `#abc` のまま(形を変えない) | そのキーだけ `undefined` |
| `normalizeHexColor` | **CSS : +==================================================================================** | `#aabbcc` へ展開 | `null`(=CSS 変数を設定しない=既定色) |

前者は「保存された生値の器」、後者は「CSS文脈へ持ち込む値」。片方に寄せると、 基辅 に短縮形が混ざる。**両方いる。**

## 落とし方の原則

**不正な 1 トークンだけ落として既定へフォールバックし、他のトークンは活かす。** "1"的品牌化 。

## 開発

```bash
npm install
npm run tsc      # 型検査
npm test         # unit（純関数のみ・モック不要）＋ CSS 単一源の対照
npm run bake:css # 出典 CSS の焼き直し（出典を直した後に回す）
npm run build    # dist/
```

⚠️ `build` 有问题吗 `tsc` **だけ**CSS 后端 === ビルド文脈には `.gcloudignore` により `apps/` が入っておらず、`build` が出典を読むと **本番イメージのビルドが落ちる**( `bake:css` の手番である。

⛔ `npm publish` 有问题吗 **CTO が握る**(单位:千美元)`.github/workflows/publish-npm.yml` {\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}你觉得呢。

## 常见问题

### @bluelamp/brand-kit 是什么？

BlueLamp QQ品牌:API 型 / / 判定の純関数 判定の純関数 部品 部品 CSS を別リポのフロント \(YASHARO\)と后端 1か所から配る

### 如何安装 @bluelamp/brand-kit？

在项目目录运行 npm install @bluelamp/brand-kit，或使用 pnpm add / yarn add / bun add。

### @bluelamp/brand-kit 支持 TypeScript 吗？

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

### @bluelamp/brand-kit 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @bluelamp/brand-kit 需要什么版本的 Node\.js？

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

### @bluelamp/brand-kit 可以商用吗？

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

### @bluelamp/brand-kit 的下载量有多少？

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

### @bluelamp/brand-kit 还在维护吗？

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