@westpac/ui 0.1.0

package/dist/tailwind/tailwind-plugin.js

@@ -0,0 +1,102 @@
+import plugin from 'tailwindcss/plugin.js';
+import createThemes from 'tailwindcss-themer';
+import { BREAKPOINTS } from './constants/breakpoints.js';
+import { COLORS, DEFAULT_BODY_TYPOGRAPHY, FONT_TYPES, SPACING } from './constants/index.js';
+import { THEMES } from './themes/index.js';
+import { theme as WBCTheme } from './themes/wbc.js';
+import { createFontSizes, generateFontComponents } from './utils/index.js';
+export const WestpacUIKitBasePlugin = plugin(({ addComponents , addBase , theme  })=>{
+    addBase({
+        html: {
+            color: theme('colors.text.DEFAULT')
+        }
+    });
+    addComponents(generateFontComponents(theme('typographySizes'), theme));
+}, {
+    theme: {
+        screens: BREAKPOINTS,
+        fontFamily: {
+            sans: DEFAULT_BODY_TYPOGRAPHY,
+            brand: DEFAULT_BODY_TYPOGRAPHY
+        },
+        gap: SPACING,
+        spacing: SPACING,
+        colors: COLORS,
+        extend: {
+            lineHeight: {
+                tight: '1.2',
+                normal: '1.4'
+            },
+            fontSize: createFontSizes(FONT_TYPES),
+            keyframes: {
+                fadeIn: {
+                    '0%': {
+                        opacity: '0'
+                    },
+                    '100%': {
+                        opacity: '1'
+                    }
+                }
+            },
+            animation: {
+                fadeIn: 'fadeIn 0.2s ease'
+            }
+        },
+        typographySizes: {
+            1: {
+                fontSize: '3.75rem',
+                lineHeight: 'tight'
+            },
+            2: {
+                fontSize: '3.375rem',
+                lineHeight: 'tight'
+            },
+            3: {
+                fontSize: '3rem',
+                lineHeight: 'tight'
+            },
+            4: {
+                fontSize: '2.625rem',
+                lineHeight: 'tight'
+            },
+            5: {
+                fontSize: '2.25rem',
+                lineHeight: 'tight'
+            },
+            6: {
+                fontSize: '1.875rem',
+                lineHeight: 'tight'
+            },
+            7: {
+                fontSize: '1.5rem',
+                lineHeight: 'tight'
+            },
+            8: {
+                fontSize: '1.125rem',
+                lineHeight: 'normal'
+            },
+            9: {
+                fontSize: '1rem',
+                lineHeight: 'normal'
+            },
+            10: {
+                fontSize: '0.875rem',
+                lineHeight: 'normal'
+            }
+        }
+    }
+});
+export const WestpacUIKitThemesPlugin = createThemes({
+    defaultTheme: {
+        extend: {
+            colors: WBCTheme.colors,
+            fontFamily: {
+                brand: [
+                    WBCTheme.brandFont,
+                    ...DEFAULT_BODY_TYPOGRAPHY
+                ]
+            }
+        }
+    },
+    themes: THEMES
+});

package/dist/tailwind/tailwind-transformer.d.ts

@@ -0,0 +1,24 @@
+import { type Config } from 'tailwindcss';
+export declare const withGEL: (config: Config) => {
+    plugins: (import("tailwindcss/types/config.js").PluginCreator | {
+        handler: import("tailwindcss/types/config.js").PluginCreator;
+        config?: Partial<Config> | undefined;
+    } | undefined)[];
+    content: import("tailwindcss/types/config.js").ContentConfig;
+    important?: Partial<import("tailwindcss/types/config.js").ImportantConfig> | undefined;
+    prefix?: string | undefined;
+    separator?: string | undefined;
+    safelist?: (string | {
+        pattern: RegExp;
+        variants?: string[] | undefined;
+    } | undefined)[] | undefined;
+    blocklist?: (string | undefined)[] | undefined;
+    presets?: (Config | undefined)[] | undefined;
+    future?: Partial<import("tailwindcss/types/config.js").FutureConfig> | undefined;
+    experimental?: Partial<import("tailwindcss/types/config.js").ExperimentalConfig> | undefined;
+    darkMode?: Partial<import("tailwindcss/types/config.js").DarkModeConfig> | undefined;
+    theme?: Partial<import("tailwindcss/types/config.js").ThemeConfig & {
+        extend: Partial<import("tailwindcss/types/config.js").ThemeConfig>;
+    }> | undefined;
+    corePlugins?: Partial<import("tailwindcss/types/config.js").CorePluginsConfig> | undefined;
+};

package/dist/tailwind/tailwind-transformer.js

@@ -0,0 +1,12 @@
+import { withTV } from 'tailwind-variants/transformer';
+import { WestpacUIKitBasePlugin, WestpacUIKitThemesPlugin } from '@westpac/ui/tailwind';
+export const withGEL = (config)=>withTV({
+        ...config,
+        plugins: [
+            WestpacUIKitBasePlugin,
+            WestpacUIKitThemesPlugin,
+            ...config.plugins ? Array.isArray(config.plugins) ? config.plugins : [
+                config.plugins
+            ] : []
+        ]
+    });

package/dist/tailwind/themes/bom.d.ts

@@ -0,0 +1,2 @@
+import { type BrandConfig } from '../index.js';
+export declare const theme: BrandConfig;

package/dist/tailwind/themes/bom.js

@@ -0,0 +1,21 @@
+import { generateColorShades } from '../utils/generate-color-shades.js';
+export const theme = {
+    code: 'BOM',
+    colors: generateColorShades({
+        background: '#F7F7F7',
+        border: '#D4D4D8',
+        borderDark: '#939299',
+        focus: '#867BCD',
+        heading: '#534891',
+        hero: '#534891',
+        light: '#FBFBFD',
+        link: '#D13900',
+        muted: '#6E6C7A',
+        neutral: '#595762',
+        pop: '#A094FC',
+        primary: '#D13900',
+        text: '#20024E'
+    }),
+    brandFont: 'Brown Pro',
+    name: 'Bank of Melbourne'
+};

package/dist/tailwind/themes/bsa.d.ts

@@ -0,0 +1,2 @@
+import { type BrandConfig } from '../index.js';
+export declare const theme: BrandConfig;

package/dist/tailwind/themes/bsa.js

@@ -0,0 +1,21 @@
+import { generateColorShades } from '../utils/generate-color-shades.js';
+export const theme = {
+    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',
+        primary: '#D81B2B',
+        text: '#333'
+    }),
+    brandFont: 'Aller',
+    name: 'BankSA'
+};

package/dist/tailwind/themes/btfg.d.ts

@@ -0,0 +1,2 @@
+import { type BrandConfig } from '../index.js';
+export declare const theme: BrandConfig;

package/dist/tailwind/themes/btfg.js

@@ -0,0 +1,21 @@
+import { generateColorShades } from '../utils/generate-color-shades.js';
+export const theme = {
+    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: '#9E005D',
+        text: '#333'
+    }),
+    brandFont: 'Georgia, "Times New Roman", Times, serif',
+    name: 'BT Financial Group'
+};

package/dist/tailwind/themes/index.d.ts

@@ -0,0 +1,207 @@
+export declare const ALL_THEMES: import("../index.js").BrandConfig[];
+export declare const THEMES: {
+    name: string;
+    selectors: string[];
+    extend: {
+        fontFamily: {
+            brand: string[];
+        };
+        colors: {
+            link: {
+                DEFAULT: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            text: {
+                DEFAULT: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            border: {
+                DEFAULT: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            heading: {
+                DEFAULT: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            hero: {
+                DEFAULT: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            primary: {
+                DEFAULT: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            light: {
+                DEFAULT: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            white: {
+                DEFAULT: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            black: {
+                DEFAULT: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            background: {
+                DEFAULT: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            borderDark: {
+                DEFAULT: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            focus: {
+                DEFAULT: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            muted: {
+                DEFAULT: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            neutral: {
+                DEFAULT: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            pop: {
+                DEFAULT: string;
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+        };
+    };
+}[];

package/dist/tailwind/themes/index.js

@@ -0,0 +1,35 @@
+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/dist/tailwind/themes/rams.d.ts

@@ -0,0 +1,2 @@
+import { type BrandConfig } from '../index.js';
+export declare const theme: BrandConfig;

package/dist/tailwind/themes/rams.js

@@ -0,0 +1,21 @@
+import { generateColorShades } from '../utils/generate-color-shades.js';
+export const theme = {
+    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',
+        primary: '#047DBC',
+        text: '#333'
+    }),
+    brandFont: 'Source Sans Pro',
+    name: 'RAMS'
+};

package/dist/tailwind/themes/stg.d.ts

@@ -0,0 +1,2 @@
+import { type BrandConfig } from '../index.js';
+export declare const theme: BrandConfig;

package/dist/tailwind/themes/stg.js

@@ -0,0 +1,21 @@
+import { generateColorShades } from '../utils/generate-color-shades.js';
+export const theme = {
+    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',
+        primary: '#E30000',
+        text: '#004833'
+    }),
+    brandFont: 'Dragon Bold',
+    name: 'St.George'
+};

package/dist/tailwind/themes/wbc.d.ts

@@ -0,0 +1,2 @@
+import { type BrandConfig } from '../index.js';
+export declare const theme: BrandConfig;

package/dist/tailwind/themes/wbc.js

@@ -0,0 +1,21 @@
+import { generateColorShades } from '../utils/generate-color-shades.js';
+export const theme = {
+    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',
+        primary: '#DA1710',
+        text: '#181B25'
+    }),
+    brandFont: 'Westpac',
+    name: 'Westpac'
+};

package/dist/tailwind/themes/wbg.d.ts

@@ -0,0 +1,2 @@
+import { type BrandConfig } from '../index.js';
+export declare const theme: BrandConfig;

package/dist/tailwind/themes/wbg.js

@@ -0,0 +1,21 @@
+import { generateColorShades } from '../utils/generate-color-shades.js';
+export const theme = {
+    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/dist/tailwind/types/brand.types.d.ts

@@ -0,0 +1,12 @@
+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;
+};
+export {};

package/dist/tailwind/types/brand.types.js

@@ -0,0 +1 @@
+export { };

package/dist/tailwind/types/index.d.ts

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

package/dist/tailwind/types/index.js

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

package/dist/tailwind/types/theme.types.d.ts

@@ -0,0 +1 @@
+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/dist/tailwind/types/theme.types.js

@@ -0,0 +1 @@
+export { };

package/dist/tailwind/utils/create-font-sizes.d.ts

@@ -0,0 +1 @@
+export declare const createFontSizes: (fontTypes: string[]) => Record<string, any>;

package/dist/tailwind/utils/create-font-sizes.js

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

package/dist/tailwind/utils/create-spacing.d.ts

@@ -0,0 +1,4 @@
+import { type SPACING_KEY } from '../types/theme.types.js';
+type SpacingRecord = Record<SPACING_KEY, string>;
+export declare const createSpacing: (spacingUnit: number, spacingScale: number) => SpacingRecord;
+export {};

package/dist/tailwind/utils/create-spacing.js

@@ -0,0 +1,11 @@
+export const createSpacing = (spacingUnit, spacingScale)=>{
+    return Array.from({
+        length: 35
+    }).reduce((spacing, _, i)=>{
+        const newIndex = ++i;
+        spacing[newIndex] = `${newIndex * spacingUnit / spacingScale}rem`;
+        return spacing;
+    }, {
+        0: '0'
+    });
+};

package/dist/tailwind/utils/generate-color-shades.d.ts

@@ -0,0 +1,4 @@
+import { BrandConfig } from '../index.js';
+type ColorConfig = BrandConfig['colors'];
+export declare const generateColorShades: (color: Record<string, string>) => ColorConfig;
+export {};

package/dist/tailwind/utils/generate-color-shades.js

@@ -0,0 +1,18 @@
+import Values from 'values.js';
+export const generateColorShades = (color)=>{
+    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
+        };
+    }, {});
+};

package/dist/tailwind/utils/generate-font-components.d.ts

@@ -0,0 +1,5 @@
+import { PluginAPI } from 'tailwindcss/types/config.js';
+export declare const generateFontComponents: (typographySizes: Record<string, {
+    fontSize: string;
+    lineHeight: string;
+}>, theme: PluginAPI['theme']) => Record<string, any>;