installing-westpac-ui

@westpac/ui のインストール

GEL デザインシステムを使用する新しいプロジェクトのセットアップを、手順に沿って説明します。

使用するタイミング

新しいプロジェクトで GEL デザインシステムをセットアップしたい場合に、このガイドを参照してください。必要なパッケージのインストール、Tailwind CSS の設定、ブランドトークンを使用したテーマ設定、ブランドフォントの追加などが含まれます。

手順

1. パッケージをインストールする

GEL は 2 つのパッケージに分かれています。

• @westpac/ui — すべてのデザインシステムコンポーネント
• @westpac/style-config — Tailwind CSS のテーマとデザイントークン

npm i @westpac/ui @westpac/style-config

2. 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;

3. スタイルを設定する

メインの 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 */

4. ブランドテーマを有効にする

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"）は現在のリリースでは無効になっています。

5. ブランドフォント

該当する @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;
}

6. 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,
  },
};

リソース

• npm：@westpac/ui
• npm：@westpac/style-config
• GitHub：GEL-next
• Tailwind CSS