@westpac/ui 0.1.0

package/src/tailwind/themes/bsa.ts

@@ -0,0 +1,23 @@
+import { type BrandConfig } from '../index.js';
+import { generateColorShades } from '../utils/generate-color-shades.js';
+
+export const theme: BrandConfig = {
+  code: 'BSA',
+  colors: generateColorShades({
+    background: '#F3F4F4',
+    border: '#D3D4D5',
+    borderDark: '#909396',
+    focus: '#C26F9D',
+    heading: '#002F6C',
+    hero: '#002F6C',
+    light: '#FAFAFA',
+    link: '#D81B2B',
+    muted: '#6A6E72',
+    neutral: '#6A6E72',
+    pop: '#00ADBD', //Bight
+    primary: '#D81B2B',
+    text: '#333',
+  }),
+  brandFont: 'Aller',
+  name: 'BankSA',
+};

package/src/tailwind/themes/btfg.ts

@@ -0,0 +1,23 @@
+import { type BrandConfig } from '../index.js';
+import { generateColorShades } from '../utils/generate-color-shades.js';
+
+export const theme: BrandConfig = {
+  code: 'BTFG',
+  colors: generateColorShades({
+    background: '#F9F9F9',
+    border: '#E0E0E0',
+    borderDark: '#949494',
+    focus: '#CA73A6',
+    heading: '#2574A9',
+    hero: '#2574A9',
+    light: '#FCFCFC',
+    link: '#9E005D',
+    muted: '#666666',
+    neutral: '#637B98',
+    pop: '#9E005D', //Primary
+    primary: '#9E005D',
+    text: '#333',
+  }),
+  brandFont: 'Georgia, "Times New Roman", Times, serif',
+  name: 'BT Financial Group',
+};

package/src/tailwind/themes/index.ts

@@ -0,0 +1,24 @@
+import { DEFAULT_BODY_TYPOGRAPHY } from '../constants/index.js';
+
+import { theme as BOMTheme } from './bom.js';
+import { theme as BSATheme } from './bsa.js';
+import { theme as BTFGTheme } from './btfg.js';
+import { theme as RAMSTheme } from './rams.js';
+import { theme as STGTheme } from './stg.js';
+import { theme as WBCTheme } from './wbc.js';
+import { theme as WBGTheme } from './wbg.js';
+
+export const ALL_THEMES = [BOMTheme, BSATheme, BTFGTheme, RAMSTheme, STGTheme, WBCTheme, WBGTheme];
+
+export const THEMES = ALL_THEMES.map(theme => {
+  return {
+    name: theme.code,
+    selectors: [`.theme-${theme.code.toLowerCase()}`, `[data-theme="${theme.code.toLowerCase()}"]`],
+    extend: {
+      fontFamily: {
+        brand: [theme.brandFont, ...DEFAULT_BODY_TYPOGRAPHY],
+      },
+      colors: theme.colors,
+    },
+  };
+});

package/src/tailwind/themes/rams.ts

@@ -0,0 +1,23 @@
+import { type BrandConfig } from '../index.js';
+import { generateColorShades } from '../utils/generate-color-shades.js';
+
+export const theme: BrandConfig = {
+  code: 'RAMS',
+  colors: generateColorShades({
+    background: '#F3F4F4',
+    border: '#D3D4D5',
+    borderDark: '#909396',
+    focus: '#009CDB',
+    heading: '#1972B4',
+    hero: '#0F446C',
+    light: '#FAFAFA',
+    link: '#1972B4',
+    muted: '#6A6E72',
+    neutral: '#848588',
+    pop: '#78C339', //RAMS Green
+    primary: '#047DBC',
+    text: '#333',
+  }),
+  brandFont: 'Source Sans Pro',
+  name: 'RAMS',
+};

package/src/tailwind/themes/stg.ts

@@ -0,0 +1,23 @@
+import { type BrandConfig } from '../index.js';
+import { generateColorShades } from '../utils/generate-color-shades.js';
+
+export const theme: BrandConfig = {
+  code: 'STG',
+  colors: generateColorShades({
+    background: '#F5F5F4',
+    border: '#D6D5D0',
+    borderDark: '#949386',
+    focus: '#9681AF',
+    heading: '#004833',
+    hero: '#008739',
+    light: '#FAFAF9',
+    link: '#E30000',
+    muted: '#727163',
+    neutral: '#727163',
+    pop: '#78BE20', //St.George Green
+    primary: '#E30000',
+    text: '#004833',
+  }),
+  brandFont: 'Dragon Bold',
+  name: 'St.George',
+};

package/src/tailwind/themes/wbc.ts

@@ -0,0 +1,23 @@
+import { type BrandConfig } from '../index.js';
+import { generateColorShades } from '../utils/generate-color-shades.js';
+
+export const theme: BrandConfig = {
+  code: 'WBC',
+  colors: generateColorShades({
+    background: '#F3F4F6',
+    border: '#DEDEE1',
+    borderDark: '#9390A2',
+    focus: '#B978D9',
+    heading: '#1F1C4F',
+    hero: '#1F1C4F',
+    light: '#F9F9FB',
+    link: '#DA1710',
+    muted: '#595767',
+    neutral: '#2A2E42',
+    pop: '#FF3DDB', //Bright Pink
+    primary: '#DA1710',
+    text: '#181B25',
+  }),
+  brandFont: 'Westpac',
+  name: 'Westpac',
+};

package/src/tailwind/themes/wbg.ts

@@ -0,0 +1,23 @@
+import { type BrandConfig } from '../index.js';
+import { generateColorShades } from '../utils/generate-color-shades.js';
+
+export const theme: BrandConfig = {
+  code: 'WBG',
+  colors: generateColorShades({
+    background: '#F3F5F6',
+    border: '#D3D3D3',
+    borderDark: '#91979A',
+    focus: '#6892E8',
+    heading: '#000',
+    hero: '#000',
+    light: '#FAFAFA',
+    link: '#DA1710',
+    muted: '#686362',
+    neutral: '#403A38',
+    pop: '#FF7468',
+    primary: '#DA1710',
+    text: '#000',
+  }),
+  brandFont: 'Montserrat',
+  name: 'Westpac Group',
+};

package/src/tailwind/types/brand.types.ts

@@ -0,0 +1,28 @@
+export type BrandKey = 'bom' | 'bsa' | 'btfg' | 'rams' | 'stg' | 'wbc' | 'wbg';
+
+type ColorShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 'DEFAULT';
+type ColorValue = Record<'DEFAULT' | ColorShade, string>;
+type ColorsKey =
+  | 'background'
+  | 'border'
+  | 'borderDark'
+  | 'focus'
+  | 'heading'
+  | 'hero'
+  | 'light'
+  | 'link'
+  | 'muted'
+  | 'neutral'
+  | 'pop'
+  | 'primary'
+  | 'text'
+  | 'white'
+  | 'black';
+type ColorConfig = Record<ColorsKey, ColorValue>;
+
+export type BrandConfig = {
+  brandFont: string;
+  code: string;
+  colors: ColorConfig;
+  name: string;
+};

package/src/tailwind/types/index.ts

@@ -0,0 +1,2 @@
+export * from './brand.types.js';
+export * from './theme.types.js';

package/src/tailwind/types/theme.types.ts

@@ -0,0 +1,37 @@
+export type SPACING_KEY =
+  | 0
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
+  | 13
+  | 14
+  | 15
+  | 16
+  | 17
+  | 18
+  | 19
+  | 20
+  | 21
+  | 22
+  | 23
+  | 24
+  | 25
+  | 26
+  | 27
+  | 28
+  | 29
+  | 30
+  | 31
+  | 32
+  | 33
+  | 34
+  | 35;

package/src/tailwind/utils/create-font-sizes.ts

@@ -0,0 +1,12 @@
+import { FONT_SIZES } from '../constants/typography.js';
+
+export const createFontSizes = (fontTypes: string[]) => {
+  return fontTypes.reduce((acc, fontType) => {
+    return Object.entries(FONT_SIZES).reduce((acc2, [fontSize, value]) => {
+      return {
+        ...acc2,
+        [`${fontType}-${fontSize}`]: value.fontSize,
+      };
+    }, acc);
+  }, {} as Record<string, any>);
+};

package/src/tailwind/utils/create-spacing.ts

@@ -0,0 +1,14 @@
+import { type SPACING_KEY } from '../types/theme.types.js';
+
+type SpacingRecord = Record<SPACING_KEY, string>;
+export const createSpacing = (spacingUnit: number, spacingScale: number) => {
+  return Array.from({ length: 35 }).reduce<SpacingRecord>(
+    (spacing, _, i) => {
+      const newIndex = ++i;
+      spacing[newIndex as SPACING_KEY] = `${(newIndex * spacingUnit) / spacingScale}rem`;
+
+      return spacing;
+    },
+    { 0: '0' } as SpacingRecord,
+  );
+};

package/src/tailwind/utils/generate-color-shades.ts

@@ -0,0 +1,27 @@
+import Values from 'values.js';
+
+import { BrandConfig } from '../index.js';
+
+type ColorConfig = BrandConfig['colors'];
+export const generateColorShades = (color: Record<string, string>): ColorConfig => {
+  return Object.entries(color).reduce((acc, [colorKey, colorValue]) => {
+    const colorShades = new Values(colorValue)
+      .all(16.6666)
+      .slice(0, -2)
+      .slice(1)
+      .reduce(
+        (acc2, shade, index) => {
+          const shadeKey = index === 0 ? 50 : index * 100;
+          return {
+            ...acc2,
+            [shadeKey]: `#${shade.hex.toUpperCase()}`,
+          };
+        },
+        { DEFAULT: colorValue },
+      );
+    return {
+      ...acc,
+      [colorKey]: colorShades,
+    };
+  }, {} as ColorConfig);
+};

package/src/tailwind/utils/generate-font-components.ts

@@ -0,0 +1,22 @@
+import { PluginAPI } from 'tailwindcss/types/config.js';
+
+export const generateFontComponents = (
+  typographySizes: Record<string, { fontSize: string; lineHeight: string }>,
+  theme: PluginAPI['theme'],
+) => {
+  return Object.entries(typographySizes).reduce((acc, [size, value]) => {
+    return {
+      ...acc,
+      [`.typography-body-${size}`]: {
+        fontSize: theme(`fontSize.body-${size}`),
+        lineHeight: theme(`lineHeight.${value.lineHeight}`),
+        fontFamily: theme(`fontFamily.sans`),
+      },
+      [`.typography-brand-${size}`]: {
+        fontSize: theme(`fontSize.brand-${size}`),
+        lineHeight: theme(`lineHeight.${value.lineHeight}`),
+        fontFamily: theme(`fontFamily.brand`),
+      },
+    };
+  }, {} as Record<string, any>);
+};

package/src/tailwind/utils/index.ts

@@ -0,0 +1,4 @@
+export { createSpacing } from './create-spacing.js';
+export { generateColorShades } from './generate-color-shades.js';
+export { createFontSizes } from './create-font-sizes.js';
+export { generateFontComponents } from './generate-font-components.js';

package/tailwind.config.ts

@@ -0,0 +1,12 @@
+import { withTV } from 'tailwind-variants/transformer';
+
+import { WestpacUIKitBasePlugin, WestpacUIKitThemesPlugin } from './src/tailwind/index.js';
+
+const config: any = withTV({
+  jit: true,
+  relative: true,
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+  plugins: [WestpacUIKitBasePlugin, WestpacUIKitThemesPlugin],
+});
+
+export default config;

package/tsconfig.build.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["**/*.spec.*", "**/*.test.*"]
+}

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "jsx": "react-jsx",
+    "composite": false,
+    "declaration": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "inlineSources": false,
+    "isolatedModules": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "preserveWatchOutput": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "emitDeclarationOnly": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "baseUrl": ".",
+    "types": ["vitest/globals", "@testing-library/jest-dom"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules", "dist"]
+}