@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) | ========================================================================================================== (========================================== |
使い方
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 。
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/**(会員が実際に見ている面で、
本パッケージは配布路である。直すときは:
# ① 出典（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"的品牌化 。
開発
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}你觉得呢。