@westpac/ui 0.1.0

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './components/index.js';

package/dist/index.js

@@ -0,0 +1 @@
+export * from './components/index.js';

package/dist/tailwind/__mocks__/utils.contansts.d.ts

@@ -0,0 +1,114 @@
+export declare const EXPECTED_SPACING: {
+    0: string;
+    1: string;
+    10: string;
+    11: string;
+    12: string;
+    13: string;
+    14: string;
+    15: string;
+    16: string;
+    17: string;
+    18: string;
+    19: string;
+    2: string;
+    20: string;
+    21: string;
+    22: string;
+    23: string;
+    24: string;
+    25: string;
+    26: string;
+    27: string;
+    28: string;
+    29: string;
+    3: string;
+    30: string;
+    31: string;
+    32: string;
+    33: string;
+    34: string;
+    35: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+};
+export declare const EXPECTED_FONT_SIZES_VARS: {
+    'body-1': string;
+    'body-10': string;
+    'body-2': string;
+    'body-3': string;
+    'body-4': string;
+    'body-5': string;
+    'body-6': string;
+    'body-7': string;
+    'body-8': string;
+    'body-9': string;
+    'brand-1': string;
+    'brand-10': string;
+    'brand-2': string;
+    'brand-3': string;
+    'brand-4': string;
+    'brand-5': string;
+    'brand-6': string;
+    'brand-7': string;
+    'brand-8': string;
+    'brand-9': string;
+};
+export declare const TEST_COLORS: {
+    background: string;
+    border: string;
+};
+export declare const EXPECTED_COLORS: {
+    background: {
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        50: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        DEFAULT: string;
+    };
+    border: {
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        50: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        DEFAULT: string;
+    };
+};
+export declare const EXPECTED_TYPOGRAPHY: {
+    '.typography-body-1': {
+        fontFamily: string;
+        fontSize: string;
+        lineHeight: string;
+    };
+    '.typography-body-2': {
+        fontFamily: string;
+        fontSize: string;
+        lineHeight: string;
+    };
+    '.typography-brand-1': {
+        fontFamily: string;
+        fontSize: string;
+        lineHeight: string;
+    };
+    '.typography-brand-2': {
+        fontFamily: string;
+        fontSize: string;
+        lineHeight: string;
+    };
+};

package/dist/tailwind/__mocks__/utils.contansts.js

@@ -0,0 +1,114 @@
+export const EXPECTED_SPACING = {
+    0: '0',
+    1: '0.375rem',
+    10: '3.75rem',
+    11: '4.125rem',
+    12: '4.5rem',
+    13: '4.875rem',
+    14: '5.25rem',
+    15: '5.625rem',
+    16: '6rem',
+    17: '6.375rem',
+    18: '6.75rem',
+    19: '7.125rem',
+    2: '0.75rem',
+    20: '7.5rem',
+    21: '7.875rem',
+    22: '8.25rem',
+    23: '8.625rem',
+    24: '9rem',
+    25: '9.375rem',
+    26: '9.75rem',
+    27: '10.125rem',
+    28: '10.5rem',
+    29: '10.875rem',
+    3: '1.125rem',
+    30: '11.25rem',
+    31: '11.625rem',
+    32: '12rem',
+    33: '12.375rem',
+    34: '12.75rem',
+    35: '13.125rem',
+    4: '1.5rem',
+    5: '1.875rem',
+    6: '2.25rem',
+    7: '2.625rem',
+    8: '3rem',
+    9: '3.375rem'
+};
+export const EXPECTED_FONT_SIZES_VARS = {
+    'body-1': '3.75rem',
+    'body-10': '0.875rem',
+    'body-2': '3.375rem',
+    'body-3': '3rem',
+    'body-4': '2.625rem',
+    'body-5': '2.25rem',
+    'body-6': '1.875rem',
+    'body-7': '1.5rem',
+    'body-8': '1.125rem',
+    'body-9': '1rem',
+    'brand-1': '3.75rem',
+    'brand-10': '0.875rem',
+    'brand-2': '3.375rem',
+    'brand-3': '3rem',
+    'brand-4': '2.625rem',
+    'brand-5': '2.25rem',
+    'brand-6': '1.875rem',
+    'brand-7': '1.5rem',
+    'brand-8': '1.125rem',
+    'brand-9': '1rem'
+};
+export const TEST_COLORS = {
+    background: '#F00',
+    border: '#0F0'
+};
+export const EXPECTED_COLORS = {
+    background: {
+        100: '#FFAAAA',
+        200: '#FF7F7F',
+        300: '#FF5555',
+        400: '#FF2A2A',
+        50: '#FFD4D4',
+        500: '#FF0000',
+        600: '#D50000',
+        700: '#AA0000',
+        800: '#800000',
+        900: '#550000',
+        DEFAULT: '#F00'
+    },
+    border: {
+        100: '#AAFFAA',
+        200: '#7FFF7F',
+        300: '#55FF55',
+        400: '#2AFF2A',
+        50: '#D4FFD4',
+        500: '#00FF00',
+        600: '#00D500',
+        700: '#00AA00',
+        800: '#008000',
+        900: '#005500',
+        DEFAULT: '#0F0'
+    }
+};
+export const EXPECTED_TYPOGRAPHY = {
+    '.typography-body-1': {
+        fontFamily: 'MOCK',
+        fontSize: 'MOCK',
+        lineHeight: 'MOCK'
+    },
+    '.typography-body-2': {
+        fontFamily: 'MOCK',
+        fontSize: 'MOCK',
+        lineHeight: 'MOCK'
+    },
+    '.typography-brand-1': {
+        fontFamily: 'MOCK',
+        fontSize: 'MOCK',
+        lineHeight: 'MOCK'
+    },
+    '.typography-brand-2': {
+        fontFamily: 'MOCK',
+        fontSize: 'MOCK',
+        lineHeight: 'MOCK'
+    }
+};

package/dist/tailwind/constants/breakpoints.d.ts

@@ -0,0 +1,8 @@
+export declare const BREAKPOINTS: {
+    xsl: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+export type Breakpoint = keyof typeof BREAKPOINTS;

package/dist/tailwind/constants/breakpoints.js

@@ -0,0 +1,7 @@
+export const BREAKPOINTS = {
+    xsl: '576px',
+    sm: '768px',
+    md: '992px',
+    lg: '1200px',
+    xl: '1900px'
+};

package/dist/tailwind/constants/colors.d.ts

@@ -0,0 +1,180 @@
+export declare const BASE_COLORS: {
+    success: string;
+    info: string;
+    warning: string;
+    danger: string;
+    system: string;
+};
+export declare const COLORS: {
+    white: string;
+    black: string;
+    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;
+    };
+    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/constants/colors.js

@@ -0,0 +1,13 @@
+import { generateColorShades } from '../utils/generate-color-shades.js';
+export const BASE_COLORS = {
+    success: '#008000',
+    info: '#0074C4',
+    warning: '#C53B00',
+    danger: '#C40000',
+    system: '#FF0'
+};
+export const COLORS = {
+    ...generateColorShades(BASE_COLORS),
+    white: '#FFF',
+    black: '#000'
+};

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

@@ -0,0 +1,4 @@
+export * from './breakpoints.js';
+export * from './colors.js';
+export * from './spacing.js';
+export * from './typography.js';

package/dist/tailwind/constants/index.js

@@ -0,0 +1,4 @@
+export * from './breakpoints.js';
+export * from './colors.js';
+export * from './spacing.js';
+export * from './typography.js';

package/dist/tailwind/constants/spacing.d.ts

@@ -0,0 +1,41 @@
+export declare const SPACING_LENGTH = 35;
+export declare const SPACING_UNIT = 6;
+export declare const SPACING_SCALE = 16;
+export declare const SPACING: {
+    0: string;
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+    10: string;
+    11: string;
+    12: string;
+    13: string;
+    14: string;
+    15: string;
+    16: string;
+    17: string;
+    18: string;
+    19: string;
+    20: string;
+    21: string;
+    22: string;
+    23: string;
+    24: string;
+    25: string;
+    26: string;
+    27: string;
+    28: string;
+    29: string;
+    30: string;
+    31: string;
+    32: string;
+    33: string;
+    34: string;
+    35: string;
+};

package/dist/tailwind/constants/spacing.js

@@ -0,0 +1,5 @@
+import { createSpacing } from '../utils/create-spacing.js';
+export const SPACING_LENGTH = 35;
+export const SPACING_UNIT = 6;
+export const SPACING_SCALE = 16;
+export const SPACING = createSpacing(SPACING_UNIT, SPACING_SCALE);

package/dist/tailwind/constants/typography.d.ts

@@ -0,0 +1,44 @@
+export declare const DEFAULT_BODY_TYPOGRAPHY: string[];
+export declare const FONT_TYPES: string[];
+export declare const FONT_SIZES: {
+    1: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    2: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    3: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    4: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    5: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    6: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    7: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    8: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    9: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    10: {
+        fontSize: string;
+        lineHeight: string;
+    };
+};

package/dist/tailwind/constants/typography.js

@@ -0,0 +1,57 @@
+export const DEFAULT_BODY_TYPOGRAPHY = [
+    '-apple-system',
+    'BlinkMacSystemFont',
+    'Segoe UI',
+    'Helvetica',
+    'Arial',
+    'sans-serif',
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol'
+];
+export const FONT_TYPES = [
+    'brand',
+    'body'
+];
+export const FONT_SIZES = {
+    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'
+    }
+};

package/dist/tailwind/index.d.ts

@@ -0,0 +1,5 @@
+export * from './tailwind-plugin.js';
+export * from './types/index.js';
+export * from './constants/index.js';
+export { ALL_THEMES } from './themes/index.js';
+export * from './tailwind-transformer.js';

package/dist/tailwind/index.js

@@ -0,0 +1,5 @@
+export * from './tailwind-plugin.js';
+export * from './types/index.js';
+export * from './constants/index.js';
+export { ALL_THEMES } from './themes/index.js';
+export * from './tailwind-transformer.js';

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

@@ -0,0 +1,14 @@
+/**
+ * Base Plugin responsible for default theming and adding the typography components
+ */
+export declare const WestpacUIKitBasePlugin: {
+    handler: import("tailwindcss/types/config.js").PluginCreator;
+    config?: Partial<import("tailwindcss").Config> | undefined;
+};
+/**
+ * Multiple Theme plugin with all the brands variation
+ */
+export declare const WestpacUIKitThemesPlugin: {
+    handler: import("tailwindcss/types/config.js").PluginCreator;
+    config?: Partial<import("tailwindcss").Config> | undefined;
+};