mcpField
I
installing-westpac-ui

installing-westpac-ui

github.com/westpacgel设计与 UI2353 次安装5 天前更新
代码仓库

关于 installing-westpac-ui

面向在新项目中接入 GEL 设计系统的开发者的配置指南，涵盖软件包安装、Tailwind CSS 配置、品牌主题、字体和可选的 ESLint 设置。

主要功能

  1. 01安装 GEL 组件与样式包
  2. 02配置 Tailwind CSS v4
  3. 03设置品牌主题令牌
  4. 04支持切换多个品牌主题
  5. 05提供品牌字体配置说明
  6. 06包含可选 ESLint 配置

适用场景

  1. 01使用 GEL 组件启动项目
  2. 02为 GEL 样式配置 Tailwind
  3. 03构建支持多个品牌的应用
  4. 04添加品牌字体与 lint 设置

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/westpacgel/gel-next --skill installing-westpac-ui

安装后在 Claude Code 中输入/installing-westpac-ui确认已加载。

详细介绍

安装 @westpac/ui

为使用 GEL 设计系统的新项目提供分步设置指南。

适用场景

当用户想在新项目中设置 GEL 设计系统时，请参考本指南。内容包括安装所需的软件包、配置 Tailwind CSS、使用品牌令牌设置主题，以及添加品牌字体。

步骤

  1. 安装软件包

GEL 分为两个软件包：

  • @westpac/ui — 所有设计系统组件
  • @westpac/style-config — Tailwind CSS 主题和设计令牌
npm i @westpac/ui @westpac/style-config
  1. 安装 Tailwind CSS

GEL 组件使用 Tailwind CSS v4 设置样式。请按照 Tailwind CSS 安装说明进行操作。

npm i tailwindcss @tailwindcss/postcss postcss

创建 postcss.config.mjs：

import { postcssConfig } from '@westpac/style-config/postcss';

export default postcssConfig;
  1. 设置样式

在主 CSS 文件中添加以下导入语句：

@import 'tailwindcss';
@import '@westpac/style-config/tailwind'; /* GEL theme config (typography, spacing, etc.) */
@import '@westpac/style-config/themes/wbc'; /* Brand color tokens — import each brand you need */

@source "./node_modules/@westpac/ui/src"; /* Enable Tailwind to scan component class names */
  1. 启用品牌主题

在 HTML 中的父元素上添加 data-brand 属性：

<html lang="en" data-brand="wbc">
  
</html>

也可以添加到任意容器元素上：

<div data-brand="wbc">
  
</div>

可用品牌：

  • wbc — Westpac Banking Corporation
  • stg — St.George Bank
  • bom — Bank of Melbourne
  • bsa — BankSA

导入所需品牌的主题 CSS：

@import '@westpac/style-config/themes/wbc';
@import '@westpac/style-config/themes/stg';
@import '@westpac/style-config/themes/bom';
@import '@westpac/style-config/themes/bsa';

对于多品牌应用，可通过 data-brand 属性动态切换：

<div data-brand={currentBrand}>{/* Your app content */}</div>

注意： 当前版本已禁用深色模式（data-theme="dark"）。

  1. 品牌字体

添加相应的 @font-face 声明，并将 src 路径更新为字体文件所在位置：

/* BOM fonts */
@font-face {
  src:
    url('/fonts/lineto-brown-pro-light.woff2') format('woff2'),
    url('/fonts/lineto-brown-pro-light.woff') format('woff');
  font-family: 'Brown Pro';
  font-weight: 100 300;
  font-style: normal;
}
@font-face {
  src:
    url('/fonts/lineto-brown-pro-regular.woff2') format('woff2'),
    url('/fonts/lineto-brown-pro-regular.woff') format('woff');
  font-family: 'Brown Pro';
  font-weight: 400 600;
  font-style: normal;
}
@font-face {
  src:
    url('/fonts/lineto-brown-pro-bold.woff2') format('woff2'),
    url('/fonts/lineto-brown-pro-bold.woff') format('woff');
  font-family: 'Brown Pro';
  font-weight: 700 900;
  font-style: normal;
}

/* BSA fonts */
@font-face {
  src:
    url('/fonts/Aller_Lt.woff2') format('woff2'),
    url('/fonts/Aller_Lt.woff') format('woff');
  font-family: 'Aller';
  font-weight: 100 600;
  font-style: normal;
}
@font-face {
  src:
    url('/fonts/Aller_Bd.woff2') format('woff2'),
    url('/fonts/Aller_Bd.woff') format('woff');
  font-family: 'Aller';
  font-weight: 700 900;
  font-style: normal;
}

/* STG fonts */
@font-face {
  src:
    url('/fonts/dragonbold-bold-webfont.woff2') format('woff2'),
    url('/fonts/dragonbold-bold-webfont.woff') format('woff');
  font-family: 'Dragon Bold';
  font-weight: 100 900;
  font-style: normal;
}

/* WBC fonts */
@font-face {
  src:
    url('/fonts/Westpac-Bold-v2.007.woff2') format('woff2'),
    url('/fonts/Westpac-Bold-v2.007.woff') format('woff');
  font-family: 'Westpac';
  font-weight: 100 900;
  font-style: normal;
}
  1. ESLint 配置（询问用户是否要包含此项）

对于 Next.js 项目：

// eslint.config.mjs
import eslintConfig from '@westpac/eslint-config/nextjs';
import { defineConfig } from 'eslint/config';

export default defineConfig([
  ...eslintConfig,
  {
    settings: {
      'better-tailwindcss': {
        entryPoint: 'src/globals.css',
      },
    },
  },
]);

对于非 Next.js 项目，可能需要禁用某些 Next.js 专属规则：

// .eslintrc.js
module.exports = {
  root: true,
  extends: ['@westpac/eslint-config/nextjs'],
  rules: {
    '@next/next/no-html-link-for-pages': 0,
  },
};

资源

评论

支持 Markdown