用途:面向正在使用旧版 @westpac/ui(需查看 package.json 确认)并希望升级到 v1.0 的项目,提供迁移指引;全新安装应改用 installing-westpac-ui 技能。
主要变更:v1.0 将 UI 组件与样式配置分离,新增必需包 @westpac/style-config,提供 Tailwind 令牌、明暗主题及 CSS 与 W3C 设计令牌;Tailwind CSS 从 v3 升级到 v4;所有颜色令牌重命名以支持多品牌与双主题。
使用步骤:先升级 Tailwind 到 v4,删除原 tailwind.config.js 并按官方 v4 升级指南操作;安装依赖 npm i @westpac/ui @westpac/style-config tailwindcss@4 postcss tailwind-variants@~3.1.1;更新 CSS 导入为 @import 'tailwindcss' 与 @import '@westpac/style-config/tailwind',并按需导入品牌主题(wbc、stg、bom、bsa)及字体声明;品牌属性由 data-theme 改为 data-brand,例如 <html data-brand="wbc" data-theme="light">,注意本版本禁用暗色模式。
令牌迁移:运行 codemod,先 npm install -g jscodeshift,再执行 npx jscodeshift --parser=tsx -t node_modules/@westpac/ui/scripts/codemods/gel-tokens-tailwind-v1.cjs <path>/**/*.tsx;解析器可按项目改为 babel、flow、ts 或 tsx,可能需多次运行;无法自动映射的类会注入 [REPLACE_TOKEN],需与设计师确认替换。
其他调整:样式常量导入路径改为 @westpac/style-config/constants;组件 API 有变,如 Accordion 的 defaultExpandedKeys 依赖 AccordionItem 的 id、ButtonGroup 改为组合式、DatePicker 用 isDateUnavailable、Compacta 与 Repeater 改为子项组合、BottomSheet 的 isDismissable 默认 false、Pictogram 的 mode 值改为 base/mono/duo;ButtonDropdown、Form 系列、Pagination 的 pages 等已弃用或移除;部分 Logo 与 Symbol 被删除。限制:暗色模式在本版本禁用,其余细节以官方文档为准。