前端UI組件設(shè)計(jì)系統(tǒng)【免費(fèi)下載鏈接】blueprintA React-based UI toolkit for the web項(xiàng)目地址https://gitcode.com/gh_mirrors/bl/blueprint點(diǎn)擊查看免費(fèi)下載Blueprint 是 Palantir 開源的一套 React UI 工具集而設(shè)計(jì)令牌Design Tokens正是其視覺語(yǔ)言體系的單一事實(shí)來源。本文基于 packages/core/src/design-tokens/README.md 與 packages/core/src/design-tokens/USAGE.md結(jié)合倉(cāng)庫(kù)內(nèi)真實(shí)的構(gòu)建配置與組件消費(fèi)代碼系統(tǒng)講解 Blueprint 設(shè)計(jì)令牌從 JSON 定義、Style Dictionary 編譯到 CSS 自定義屬性--bp-*落地再到 Button 等組件消費(fèi)的完整鏈路。讀完本文你將掌握令牌目錄結(jié)構(gòu)、DTCG 標(biāo)準(zhǔn)屬性、com.blueprint.derive派生擴(kuò)展、dark 主題覆蓋機(jī)制、漸進(jìn)增強(qiáng)輸出策略以及如何在自有組件中正確使用 surface / intent / typography 令牌實(shí)現(xiàn)跨主題一致渲染。注意當(dāng)前設(shè)計(jì)令牌體系在倉(cāng)庫(kù)中被標(biāo)記為EXPERIMENTAL屬于演進(jìn)中的下一代BP6/BP7視覺基礎(chǔ)設(shè)施隨版本迭代 API 與生成產(chǎn)物可能調(diào)整使用時(shí)應(yīng)關(guān)注包內(nèi) changelog。一、Design Tokens 是什么一套以 CSS 變量為載體的令牌體系Blueprint 設(shè)計(jì)令牌由 Style Dictionary 驅(qū)動(dòng)生成。其核心思想是以 JSON 文件定義顏色、尺寸、陰影、字體等所有視覺原子值編譯為帶--bp-前綴的 CSS 自定義屬性掛載在:root上組件與業(yè)務(wù)代碼統(tǒng)一通過var(--bp-...)消費(fèi)從而在 light / dark 等不同配色方案之間保持一致的主題化體驗(yàn)無(wú)需在每個(gè)組件里重復(fù)硬編碼樣式邏輯。使用方式極其簡(jiǎn)單——令牌在:root上以 CSS 自定義屬性形式可用.element { color: var(--bp-typography-color-default-rest); background: var(--bp-surface-background-color-default-rest); border-radius: var(--bp-surface-border-radius); padding: calc(var(--bp-surface-spacing) * 2); }從源碼結(jié)構(gòu)看令牌體系由三部分組成詳見 tokens 目錄tokens/base/5 個(gè)基礎(chǔ)令牌文件——palette調(diào)色板、intent語(yǔ)義意圖色、surface表面結(jié)構(gòu)、typography排版、emphasis焦點(diǎn)/動(dòng)效tokens/themes/dark/dark 主題覆蓋文件當(dāng)前僅 dark 一組tokens/next/面向未來版本的占位調(diào)色板palette.bp7。二、Token 分類總覽六大命名空間所有令牌通過統(tǒng)一前綴分類一目了然分類前綴說明Palette--bp-palette-*原始色值gray、blue、green 等Intent--bp-intent-*語(yǔ)義色primary、success、warning、dangerSurface--bp-surface-*背景、邊框、陰影、間距、z-indexTypography--bp-typography-*字體族、字號(hào)、字重、行高、顏色I(xiàn)conography--bp-iconography-*圖標(biāo)尺寸與顏色Emphasis--bp-emphasis-*焦點(diǎn)環(huán)、過渡、緩動(dòng)曲線其中Iconography命名空間在 tokens/base 現(xiàn)有 5 個(gè)文件中的定義相對(duì)獨(dú)立而 Emphasis 的完整定義可參考 emphasis.tokens.json包含transition-duration100ms、ease[0.4, 1, 0.75, 0.9]與 bounce 曲線、focus-color引用{intent.primary.rest}、focus-width2px、focus-offset2px以及motion-reduced開關(guān)0 允許動(dòng)效1 減少動(dòng)效。三、Token 結(jié)構(gòu)與 DTCG 規(guī)范令牌遵循 DTCGDesign Tokens Community Group 規(guī)范。每個(gè)令牌使用以下標(biāo)準(zhǔn)屬性屬性用途$type數(shù)據(jù)類型color、dimension、shadow、fontFamily、fontWeight、number、duration、cubicBezier$value令牌值——字面量、引用如{palette.blue.3}或復(fù)雜對(duì)象如 shadow 的多層結(jié)構(gòu)$description人類可讀的說明文字$extensions自定義 Blueprint 元數(shù)據(jù)DTCG 的復(fù)雜類型color / shadow / dimension在倉(cāng)庫(kù)中均以結(jié)構(gòu)化對(duì)象表達(dá)。例如 surface.tokens.json 中的border-width是{ value: 1, unit: px }的 dimension 對(duì)象而shadow.0是一個(gè)由多個(gè) sRGB 顏色層組成的 shadow 數(shù)組每層含offsetX、offsetY、blur、spread、color。這與 sd.config.ts 中定義的DTCGColor、DTCGDimension、DTCGShadow類型一一對(duì)應(yīng)構(gòu)建時(shí)會(huì)由解析器逐一校驗(yàn)后格式化為 CSS 字符串。四、自定義擴(kuò)展com.blueprint.derive 與 com.blueprint.role4.1 com.blueprint.derive基于 OKLCH 的顏色派生com.blueprint.derive用于從被引用的$value派生新顏色在 OKLCH 色彩空間上執(zhí)行通道變換{ $value: {intent.default.rest}, $extensions: { com.blueprint.derive: { alpha: 0.25 } } }可用派生屬性如下對(duì)應(yīng) sd.config.ts 的parseColorDerivation/parseChannelModification解析邏輯屬性類型作用alphanumber 或令牌引用覆蓋最終透明度可以是字面量如0.25也可以是引用如{surface.layer-opacity}構(gòu)建時(shí)解析為數(shù)字lightnessScale/lightnessOffsetnumber對(duì) L 通道做乘法縮放 / 加法偏移chromaScale/chromaOffsetnumber對(duì) C 通道做乘法縮放 / 加法偏移hueOffsetnumber對(duì) H 通道做加法偏移這些屬性在構(gòu)建期被用于產(chǎn)出雙通道結(jié)果一個(gè)是靜態(tài) hex 回退值供不支持相對(duì)顏色語(yǔ)法的瀏覽器使用一個(gè)是相對(duì)顏色語(yǔ)法表達(dá)式oklch(from ...)。以 surface 邊框?yàn)槔齜ase 中border-color.default派生自{intent.default.rest}且alpha: 0.12而border-color.strong使用alpha: 0.25見 surface.tokens.json對(duì)應(yīng)了 README 中subtle border / more prominent border的語(yǔ)義分級(jí)。從 sd.config.ts 的deriveTransformConfig可以看出底層實(shí)現(xiàn)轉(zhuǎn)換器保留原始 token 引用original.$value將其改寫為var(--bp-...)基變量再按派生配置拼裝oklch(from baseVar calc(l ± n) calc(c * m) calc(h n) / alpha)。同時(shí) computeStaticFallbackForDerivedToken 會(huì)先把基令牌解析為 OKLCH借助 culori 庫(kù)套用通道修改后格式化為 hex作為supports之外的靜態(tài)回退。4.2 com.blueprint.role特殊構(gòu)建角色com.blueprint.role為令牌指定特殊構(gòu)建處理。當(dāng)前只有一個(gè)角色stackable-layer—— 將編譯后的顏色包裝進(jìn)linear-gradient(color 0 0)使其可以作為background-image圖層進(jìn)行疊加合成。該角色在 applyRoleForCss 中實(shí)現(xiàn)為linear-gradient(${value} 0 0)。動(dòng)機(jī)是CSS 的background-color只能接受單一值而background-image支持多層疊加linear-gradient(color 0 0)制造一個(gè)純色漸變從而可以在背景色之上堆疊半透明色層。五、主題覆蓋dark 模式如何工作dark 主題通過tokens/themes/dark/下的文件覆蓋 base 令牌覆蓋方式為重新定義$value和/或$extensions。README 中的經(jīng)典示例是surface.border-color.strong淺色模式基于灰色派生深色模式改為基于白色派生// base/surface.tokens.json strong: { $value: {intent.default.rest}, $extensions: { com.blueprint.derive: { alpha: 0.25 } } } // themes/dark/surface.tokens.json strong: { $value: {palette.white}, $extensions: { com.blueprint.derive: { alpha: 0.3 } } }倉(cāng)庫(kù)中 dark/surface.tokens.json 的實(shí)際定義與此一致border-color.default為白色 20% alpha、strong為白色 30% alphacolor-code從淺色的白色 70% 反轉(zhuǎn)為黑色 30%陰影體系也整體替換為白色 inset 高亮 更深黑色投影shadow-0 至 shadow-4 每級(jí)都含inset: true的白色描邊層。5.1 兩個(gè)主題的構(gòu)建配置主題構(gòu)建計(jì)劃定義在 sd.config.ts 的THEMES常量中主題輸入選擇器輸出文件lighttokens/base/**/*.tokens.json:roottokens.cssdarkbaseincludetokens/themes/dark/**/*.tokens.json[data-bp-color-schemedark], .bp6-darktokens-dark.cssdark 配置使用include繼承 base 全部令牌再以sources覆蓋。生成時(shí) dark 主題被掛載到[data-bp-color-schemedark]屬性選擇器同時(shí)兼容傳統(tǒng).bp6-dark類名因此只需在根元素上切換該屬性或類名即可整體換膚組件代碼無(wú)需任何改動(dòng)——這正是 USAGE.md 強(qiáng)調(diào)的Surface tokens adapt automatically by theme。六、構(gòu)建流水線從 JSON 到 CSS 變量6.1 構(gòu)建命令在 packages/core/package.json 中定義pnpm run build:tokens # tsx src/design-tokens/build.ts生成 tokens該命令執(zhí)行tsx src/design-tokens/build.ts構(gòu)建入口調(diào)用 sd.config.ts 的buildAllThemes產(chǎn)物輸出到src/design-tokens/build/tokens.css與tokens-dark.css。此外compile:css腳本會(huì)先跑build:tokens再執(zhí)行 sass 編譯確保組件 SCSS 中引用的--bp-*變量在樣式編譯前已生成。6.2 轉(zhuǎn)換器與命名Style Dictionary 初始化時(shí)注冊(cè)了一套bp/css轉(zhuǎn)換組見 initializeStyleDictionary按序執(zhí)行name/bp/kebab命名轉(zhuǎn)換將令牌路徑拼成bp-前綴的 kebab-case 變量名見 nameTransformConfig如surface.border-radius→--bp-surface-border-radiusdtcg/color/css將 DTCG color 對(duì)象格式化為oklch()/rgb()/rgba()CSS 函數(shù)sRGB 通道會(huì)round(comp * 255)dtcg/dimension/css、dtcg/duration/css格式化為16px、100ms這類帶單位字符串dtcg/fontFamily/css數(shù)組拼成font-family列表含空格的字體名自動(dòng)加引號(hào)dtcg/fontWeight/css、dtcg/number/css、dtcg/cubicBezier/css數(shù)值直出dtcg/shadow/css支持單層與多層數(shù)組shadow輸出為box-shadow值bp/derive/css必須排在 color 轉(zhuǎn)換之后用相對(duì)顏色語(yǔ)法覆蓋已解析的顏色引用。6.3 漸進(jìn)增強(qiáng)輸出hex 回退 supports這是整套體系最有特色的部分formatProgressiveEnhancementCss生成產(chǎn)物包含兩個(gè)區(qū)塊——先輸出一個(gè)所有令牌的 hex 基礎(chǔ)塊再輸出一個(gè)supports增強(qiáng)塊用相對(duì)顏色語(yǔ)法覆蓋派生類令牌基礎(chǔ)塊全部令牌以靜態(tài) hex 值輸出派生令牌由computeStaticFallbackForDerivedToken預(yù)先計(jì)算增強(qiáng)塊supports (color: oklch(from var(--any-color) l c h))內(nèi)把派生令牌重新聲明為oklch(from ...)表達(dá)式?；赝酥挡捎脙杀槭占谝槐樘幚韼erive擴(kuò)展的令牌第二遍處理傳遞引用了派生令牌的令牌借助 fallback 緩存見 makeFallbackMap。supports探測(cè)條件常量定義于 SUPPORTS_RELATIVE_COLOR與組件 SCSS 中手動(dòng)書寫的supports (color: oklch(from var(--any-color) l c h))完全一致可對(duì)照 button/_common.scss。七、Intent 令牌語(yǔ)義與交互狀態(tài)的映射Intent 令牌把語(yǔ)義含義映射到顏色上。組件不直接引用原始調(diào)色板如--bp-palette-blue-3而是引用--bp-intent-primary-rest這樣每個(gè)主題或品牌都可以重映射。五種意圖定義于 intent.tokens.json每種都帶交互狀態(tài)rest、hover、active、disabled外加foreground文字色Token 模式狀態(tài)示例解析--bp-intent-default-*rest、hover、active、disabledrest→palette.gray.1--bp-intent-primary-*同上rest→palette.blue.3--bp-intent-success-*同上rest→palette.green.3--bp-intent-warning-*同上rest→palette.orange.3--bp-intent-danger-*同上rest→palette.red.3實(shí)際 JSON 中default 意圖的hover/active分別指向palette.dark-gray.5/palette.dark-gray.4BP6 模式hover 比 rest 更暗primary 則沿 blue 色階下移restblue.3→ hoverblue.2→ activeblue.1foreground 文字色除 warning 為palette.black外均為palette.white。關(guān)鍵特性Intent 令牌在 light / dark 主題之間不改變——兩種模式下 primary 都使用同一個(gè)藍(lán)色。主題相關(guān)的微調(diào)發(fā)生在 surface 層例如--bp-surface-background-color-primary-rest它從 intent 派生但按主題應(yīng)用了不同的明度/彩度縮放。八、Surface 令牌結(jié)構(gòu)、空間與背景三層體系Surface 令牌控制組件共享的結(jié)構(gòu)與空間屬性邊框、圓角、陰影、間距、背景定義于 base/surface.tokens.jsondark 覆蓋在 themes/dark/surface.tokens.json。8.1 關(guān)鍵結(jié)構(gòu)令牌| Token | 值 | 用途 | | ----- | -- | ---- | |--bp-surface-spacing|4px| 基礎(chǔ)間距單位組件以它做乘法如calc(var(--bp-surface-spacing) * 2) 8px 內(nèi)邊距 | |--bp-surface-border-width|1px| 所有帶邊框元素統(tǒng)一的邊框?qū)挾?| |--bp-surface-border-radius|4px| 共享圓角 | |--bp-surface-border-color-default|intent.default.rest12% alpha | 默認(rèn)狀態(tài)的細(xì)邊框 | |--bp-surface-border-color-strong|intent.default.rest25% alpha | 描邊類元素更明顯的邊框 | |--bp-surface-shadow-0~--bp-surface-shadow-4| 多層 box-shadow | 五級(jí)海拔從平鋪(0)到最大深度(4) | |--bp-surface-z-index-0~--bp-surface-z-index-4|0、10、20、30、40| 層疊等級(jí)定義于 z-index 節(jié)點(diǎn) |以shadow-0為例淺色模式由1px spread 的 rgba(black, 15%) 描邊層 5px blur 的 rgba(black, 2%) 陰影層兩層組成shadow-4則包含 50px blur、-12px spread 的 30% 黑陰影層。dark 模式每級(jí)都在首層加入inset: true的 rgba(white, 20%) 白色高亮陰影黑度最高到 85%shadow-4。組件代碼零改動(dòng)即可獲得主題適配。8.2 背景色surface-background-color模式--bp-surface-background-color-{intent}-{state}是每個(gè)意圖與交互狀態(tài)完全解析、開箱即用的背景色。對(duì) default 意圖它們從 intent 顏色經(jīng)明度/彩度縮放派生——default-rest在淺色模式編譯為#ffffff白色盡管它派生自灰色因?yàn)榱钆茟?yīng)用了lightnessScale: 1.909Token淺色模式深色模式--bp-surface-background-color-default-rest#ffffff以lightnessScale: 0.362派生JSON 中實(shí)際為 0.362README 表格標(biāo)注 0.248 為舊值--bp-surface-background-color-default-hover#f6f7f9light-gray.5更深的灰--bp-surface-background-color-default-active#edeff2light-gray.4更深的灰--bp-surface-background-color-default-disabled#ffffff以縮放系數(shù)派生依據(jù) dark/surface.tokens.jsondark 下default.rest使用lightnessScale: 0.362, chromaScale: 0.308, hueOffset: -1.44hover/active則組合了 scale 與 offset。README 表格中標(biāo)注的 0.248 等數(shù)值應(yīng)視為文檔撰寫時(shí)點(diǎn)的版本快照以倉(cāng)庫(kù) JSON 為準(zhǔn)。對(duì)于非 default意圖primary、success、warning、danger背景色直接從 intent 令牌透?jìng)?、無(wú)派生——同一個(gè)藍(lán)色在兩種主題下通用。dark 覆蓋文件只重定義 default 背景色非 default 意圖無(wú)需 dark 覆蓋。8.3 圖層色layer-color 與共享透明度旋鈕模式--bp-surface-layer-color-{intent}是每個(gè)意圖色的半透明著色由共享透明度令牌控制| Token | 值 | | ----- | -- | |--bp-surface-layer-opacity|0.055% | |--bp-surface-layer-color-default|intent.default.rest5% alpha | |--bp-surface-layer-color-primary|intent.primary.rest5% alpha | |--bp-surface-layer-color-success|intent.success.rest5% alpha | |--bp-surface-layer-color-warning|intent.warning.rest5% alpha | |--bp-surface-layer-color-danger|intent.danger.rest5% alpha |值得注意的實(shí)現(xiàn)細(xì)節(jié)在支持相對(duì)顏色語(yǔ)法的瀏覽器中每個(gè) layer-color 會(huì)響應(yīng)式地引用透明度令牌而非固化 5%--bp-surface-layer-color-primary: oklch(from var(--bp-intent-primary-rest) l c h / var(--bp-surface-layer-opacity));這在 JSON 中通過alpha: {surface.layer-opacity}的令牌引用達(dá)成見 surface.tokens.json。于是--bp-surface-layer-opacity成為一個(gè)共享控制旋鈕——把它從0.05改成0.1所有 layer-color 的濃度同步增強(qiáng)。alpha 引用在 resolveAlphaValue 中被解析為數(shù)值用于計(jì)算靜態(tài) hex 回退。8.4 可疊加圖層stackable layer模式--bp-surface-layer-{intent}每個(gè)圖層色被包裝進(jìn)linear-gradient()從而可作為背景圖疊加--bp-surface-layer-primary: linear-gradient(#2d72d20d 0 0);因?yàn)閎ackground-color只能接受一個(gè)值而background-image支持多層堆疊linear-gradient(color 0 0)技巧生成一個(gè)純色漸變層可疊在背景色之上// 在默認(rèn)表面之上疊加一層 primary 著色 background-color: var(--bp-surface-background-color-default-rest); background-image: var(--bp-surface-layer-primary);該包裝由 JSON 中的com.blueprint.role: stackable-layer注解觸發(fā)見 surface.tokens.json構(gòu)建系統(tǒng)在 applyRoleForCss 中檢測(cè)該角色并套上linear-gradient()包裝。九、Typography 與 Emphasis 令牌9.1 Typographytypography.tokens.json 定義了完整排版階梯familydefault為系統(tǒng)字體棧-apple-system、BlinkMacSystemFont、Segoe UI、Roboto、Oxygen、Ubuntu、Cantarell、Open Sans、Helvetica Neue、blueprint-icons-16、sans-serifmono為等寬棧sizebody 從 10pxbody-x-small到 16pxbody-largeheading 從 16pxheading-small到 46pxheading-displaycode 為 12px / 13px / 14pxweightdefault: 400、bold: 600line-heightdefault: 1.28581、large: 1.5colorcolor-default各狀態(tài)從 intent 派生并做明度/彩度微調(diào)如rest對(duì){intent.default.rest}應(yīng)用lightnessOffset: -0.279, chromaOffset: -0.017, hueOffset: -4color-primary/color-success/color-warning/color-danger直接透?jìng)?intent 對(duì)應(yīng)狀態(tài)color-muted直引{intent.default.rest}。9.2 Emphasisemphasis.tokens.json 定義焦點(diǎn)與動(dòng)效transition-duration100ms、easedefault[0.4, 1, 0.75, 0.9]與 bounce[0.54, 1.12, 0.38, 1.11]兩條 cubicBezier、focus-color引用 primary.rest、focus-width2px、focus-offset2px以及motion-reduced數(shù)值開關(guān)。十、實(shí)戰(zhàn)示例Button 組件如何消費(fèi)令牌Button 組件src/components/button/是 surface 與 intent 令牌協(xié)同工作的最佳范例核心文件為 _common.scss共享 mixin。使用中注意該組件 dark 模式下 minimal / outline 按鈕的active、hover狀態(tài)目前由rest令牌派生預(yù)期隨調(diào)色板更新而調(diào)整。10.1 Surface 令牌尺寸與結(jié)構(gòu)// 布局——以間距令牌為乘法基數(shù) height: calc(var(--bp-surface-spacing) * 7.5); // 默認(rèn) 30px 高 padding: var(--bp-surface-spacing) calc(var(--bp-surface-spacing) * 2); // 4px 8px border-radius: var(--bp-surface-border-radius); // 4px // 盒陰影——兩層inset 邊框 深度投影 box-shadow: inset 0 0 0 var(--bp-surface-border-width) color-mix(in oklch, var(--bp-surface-border-color-strong) 90%, var(--bp-palette-black)), 0 1px 2px color-mix(in oklch, var(--bp-palette-black) 10%, transparent);按鈕的 box-shadow 用兩層以不同方式消費(fèi)令牌inset 邊框?qū)佑?-bp-surface-border-width模擬 1px 邊框代碼注釋說明原因CSSborder只能有一個(gè)、無(wú)法與陰影疊加、會(huì)改變?cè)爻叽纭⑦€需要額外 box-sizing因此改用box-shadow。淺色模式下--bp-surface-border-color-strong與--bp-palette-black按 90% 混合把灰色令牌壓向黑色以取得足夠?qū)Ρ萪ark 模式下則用--bp-surface-border-color-default與transparent按 50% 縮放把令牌自帶的 20% alpha 減半到 10%。深度投影層使用--bp-palette-black的不同透明度rest 10%、hover/active 20%形成跨主題一致的投影。Large 變體只是放大乘法系數(shù)高度calc(var(--bp-surface-spacing) * 10)、水平內(nèi)邊距calc(var(--bp-surface-spacing) * 4)對(duì)照 mixinpt-button-height-default/pt-button-height-smallsmall 高度為* 6。10.2 Intent 令牌每個(gè)交互狀態(tài)的顏色對(duì)非 default 意圖primary、success、warning、dangerSass map 把每個(gè)意圖接到其令牌上$button-intent-states: ( primary: ( var(--bp-intent-primary-rest), // background var(--bp-intent-primary-hover), // background on hover var(--bp-intent-primary-active), // background on active var(--bp-intent-primary-foreground) // text color ), // success、warning、danger 遵循同一模式 );disabled 狀態(tài)引用--bp-intent-default-disabled并降低透明度minimal / outlined 變體則用--bp-surface-border-color-strong做邊框如pt-button-outlined中的border: var(--bp-surface-border-width) solid var(--bp-surface-border-color-strong)。組件 SCSS 中還能看到大量color-mix()的應(yīng)用例如淺色默認(rèn)按鈕背景為color-mix(in srgb, var(--bp-intent-default-rest) 5%, var(--bp-palette-white))深色按鈕為color-mix(in srgb, var(--bp-intent-default-rest) 40%, var(--bp-palette-black))。源碼注釋表明對(duì)接近中性的灰色優(yōu)先用 srgb 混合以避免 OKLCH 混合帶來的色相偏移對(duì)非中性意圖色則可用 oklch 混合。此外 warning 的 rest 色存在一個(gè)臨時(shí)回退機(jī)制--bp6-button-warning-resthex 為#fbb360對(duì)應(yīng) palette.orange.5用于兼容不支持相對(duì)顏色語(yǔ)法的瀏覽器——這正是漸進(jìn)增強(qiáng)策略在組件層的落地。十一、瀏覽器兼容性與回退策略部分令牌使用 CSS 相對(duì)顏色語(yǔ)法oklch(from ...)派生 hover、active 與 alpha 修飾色最低版本要求瀏覽器最低版本Chrome122Safari18Firefox128Edge122較舊瀏覽器會(huì)忽略這些屬性值。在 Blueprint 組件內(nèi)部已提供回退值生成 CSS 的基礎(chǔ) hex 塊 組件 SCSS 中的手動(dòng)回退如--bp6-button-warning-rest的:root聲明在 Blueprint 之外你需要自行提供回退值。使用技巧如果目標(biāo)瀏覽器不支持相對(duì)顏色語(yǔ)法直接依賴生成產(chǎn)物中的 hex 基礎(chǔ)聲明即可無(wú)需任何額外處理若需要自定義派生色請(qǐng)參考com.blueprint.derive的聲明方式并自行準(zhǔn)備supports分支。十二、開發(fā)與擴(kuò)展指南重新生成令牌在 packages/core 目錄執(zhí)行pnpm run build:tokens產(chǎn)物寫入src/design-tokens/build/新增基礎(chǔ)令牌在tokens/base/相應(yīng) JSONpalette / intent / surface / typography / emphasis中按 DTCG 格式添加節(jié)點(diǎn)注意$type與$value結(jié)構(gòu)必須能被 sd.config.ts 的解析器識(shí)別新增主題覆蓋在tokens/themes/theme/下建同名 JSON只重定義需要變化的$value/$extensions并在THEMES中登記新主題選擇器、源文件、輸出文件名派生新顏色優(yōu)先使用com.blueprint.derive的六個(gè)屬性alpha、lightnessScale、chromaScale、lightnessOffset、chromaOffset、hueOffset而非手寫新色值——派生能自動(dòng)獲得靜態(tài) hex 回退與oklch(from ...)增強(qiáng)雙輸出疊加半透明色層若需要多層背景合成聲明com.blueprint.role: stackable-layer或直接消費(fèi)--bp-surface-layer-{intent}?？偨Y(jié)Blueprint 設(shè)計(jì)令牌體系把顏色/尺寸/陰影/字體從組件樣式里抽離成可編程、可派生、可覆蓋的 DTCG 數(shù)據(jù)源通過 Style Dictionary 編譯為--bp-*CSS 變量并以靜態(tài) hex 回退 supports相對(duì)顏色增強(qiáng)的雙輸出策略兼顧現(xiàn)代瀏覽器與新老兼容。理解這套體系你既可以在業(yè)務(wù)組件中直接消費(fèi)--bp-surface-*、--bp-intent-*等令牌實(shí)現(xiàn)跨主題一致性也可以按同樣模式擴(kuò)展自己的主題與派生色。相關(guān)文件索引README.md、USAGE.md、sd.config.ts、tokens/base、tokens/themes/dark、Button _common.scss、packages/core/package.json。贊分享前端UI組件設(shè)計(jì)系統(tǒng)【免費(fèi)下載鏈接】blueprintA React-based UI toolkit for the web項(xiàng)目地址https://gitcode.com/gh_mirrors/bl/blueprint點(diǎn)擊查看免費(fèi)下載相關(guān)推薦Carbon 設(shè)計(jì)系統(tǒng) DTCG 設(shè)計(jì)令牌Design Tokens格式全解析目錄結(jié)構(gòu)、Token 規(guī)范與 Style Dictionary 構(gòu)建驗(yàn)證Carbon 設(shè)計(jì)系統(tǒng) DTCG 設(shè)計(jì)令牌Design Tokens格式全解析目錄結(jié)構(gòu)、Token 規(guī)范與 Style Dictionary 構(gòu)建驗(yàn)證 本前端UI組件設(shè)計(jì)系統(tǒng)Owncast 樣式定義體系詳解基于 Style Dictionary 的設(shè)計(jì)令牌Design Tokens與 CSS 變量生成流程Owncast 樣式定義體系詳解基于 Style Dictionary 的設(shè)計(jì)令牌Design Tokens與 CSS 變量生成流程 Owncast 的自音視頻直播后端Eigent Theme Tokens V2: DTCG 驅(qū)動(dòng)的 OKLCH 主題令牌引擎架構(gòu)與實(shí)戰(zhàn)解析Eigent Theme Tokens V2: DTCG 驅(qū)動(dòng)的 OKLCH 主題令牌引擎架構(gòu)與實(shí)戰(zhàn)解析 Eigent 桌面應(yīng)用的主題系統(tǒng) Theme Toke人工智能AI Agent多智能體大模型本地部署MCP 服務(wù)桌面應(yīng)用工作流自動(dòng)化上一篇OkGo單元測(cè)試框架MockWebServer與Espresso結(jié)合下一篇如何將Mac觸控板變成精準(zhǔn)電子秤TrackWeight完整使用指南創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考