@westpac/ui 0.2.0 → 0.3.0

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

@@ -9,10 +9,10 @@ export declare const COLORS: {
     white: string;
     black: string;
     link: {
-        DEFAULT: string;
+        200: string;
         50: string;
+        DEFAULT: string;
         100: string;
-        200: string;
         300: string;
         400: string;
         500: string;
@@ -22,10 +22,10 @@ export declare const COLORS: {
         900: string;
     };
     text: {
-        DEFAULT: string;
+        200: string;
         50: string;
+        DEFAULT: string;
         100: string;
-        200: string;
         300: string;
         400: string;
         500: string;
@@ -35,10 +35,10 @@ export declare const COLORS: {
         900: string;
     };
     border: {
-        DEFAULT: string;
+        200: string;
         50: string;
+        DEFAULT: string;
         100: string;
-        200: string;
         300: string;
         400: string;
         500: string;
@@ -48,10 +48,10 @@ export declare const COLORS: {
         900: string;
     };
     heading: {
-        DEFAULT: string;
+        200: string;
         50: string;
+        DEFAULT: string;
         100: string;
-        200: string;
         300: string;
         400: string;
         500: string;
@@ -61,10 +61,10 @@ export declare const COLORS: {
         900: string;
     };
     primary: {
-        DEFAULT: string;
+        200: string;
         50: string;
+        DEFAULT: string;
         100: string;
-        200: string;
         300: string;
         400: string;
         500: string;
@@ -74,10 +74,10 @@ export declare const COLORS: {
         900: string;
     };
     hero: {
-        DEFAULT: string;
+        200: string;
         50: string;
+        DEFAULT: string;
         100: string;
-        200: string;
         300: string;
         400: string;
         500: string;
@@ -87,10 +87,10 @@ export declare const COLORS: {
         900: string;
     };
     background: {
-        DEFAULT: string;
+        200: string;
         50: string;
+        DEFAULT: string;
         100: string;
-        200: string;
         300: string;
         400: string;
         500: string;
@@ -100,10 +100,10 @@ export declare const COLORS: {
         900: string;
     };
     borderDark: {
-        DEFAULT: string;
+        200: string;
         50: string;
+        DEFAULT: string;
         100: string;
-        200: string;
         300: string;
         400: string;
         500: string;
@@ -113,10 +113,10 @@ export declare const COLORS: {
         900: string;
     };
     focus: {
-        DEFAULT: string;
+        200: string;
         50: string;
+        DEFAULT: string;
         100: string;
-        200: string;
         300: string;
         400: string;
         500: string;
@@ -126,10 +126,10 @@ export declare const COLORS: {
         900: string;
     };
     light: {
-        DEFAULT: string;
+        200: string;
         50: string;
+        DEFAULT: string;
         100: string;
-        200: string;
         300: string;
         400: string;
         500: string;
@@ -139,10 +139,10 @@ export declare const COLORS: {
         900: string;
     };
     muted: {
-        DEFAULT: string;
+        200: string;
         50: string;
+        DEFAULT: string;
         100: string;
-        200: string;
         300: string;
         400: string;
         500: string;
@@ -152,10 +152,10 @@ export declare const COLORS: {
         900: string;
     };
     neutral: {
-        DEFAULT: string;
+        200: string;
         50: string;
+        DEFAULT: string;
         100: string;
-        200: string;
         300: string;
         400: string;
         500: string;
@@ -165,10 +165,10 @@ export declare const COLORS: {
         900: string;
     };
     pop: {
-        DEFAULT: string;
+        200: string;
         50: string;
+        DEFAULT: string;
         100: string;
-        200: string;
         300: string;
         400: string;
         500: string;
@@ -177,4 +177,11 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
+    pictogram: {
+        dark: string;
+        duo: {
+            highlight: string;
+            outline: string;
+        };
+    };
 };

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

@@ -24,18 +24,18 @@ export declare const SPACING: {
     18: string;
     19: string;
     20: string;
+    26: string;
+    32: string;
+    28: string;
+    25: string;
+    34: string;
+    35: string;
     30: string;
     21: string;
     23: string;
     24: string;
-    25: string;
-    26: string;
     27: string;
-    28: string;
     29: string;
     31: string;
-    32: string;
     33: string;
-    34: string;
-    35: string;
 };

package/dist/tailwind/tailwind-plugin.js

@@ -52,6 +52,16 @@ export const WestpacUIKitBasePlugin = plugin(({ addComponents , addUtilities , a
             },
             animation: {
                 fadeIn: 'fadeIn 0.2s ease'
+            },
+            boxShadow: {
+                switch: '0.1875rem 0 0.375rem 0 rgba(0,0,0,0.53)'
+            },
+            maxWidth: {
+                xsl: BREAKPOINTS.xsl,
+                sm: BREAKPOINTS.sm,
+                md: BREAKPOINTS.md,
+                lg: BREAKPOINTS.lg,
+                container: '1320px'
             }
         },
         typographySizes: {

package/dist/tailwind/themes/bom.js

@@ -1,21 +1,32 @@
 import { generateColorTints } from '../utils/generate-color-tints.js';
+const HERO = '#534891';
+const POP = '#A094FC';
 export const theme = {
     code: 'BOM',
-    colors: generateColorTints({
-        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'
-    }),
+    colors: {
+        ...generateColorTints({
+            background: '#F7F7F7',
+            border: '#D4D4D8',
+            borderDark: '#939299',
+            focus: '#867BCD',
+            heading: '#534891',
+            hero: HERO,
+            light: '#FBFBFD',
+            link: '#D13900',
+            muted: '#6E6C7A',
+            neutral: '#595762',
+            pop: POP,
+            primary: '#D13900',
+            text: '#20024E'
+        }),
+        pictogram: {
+            dark: HERO,
+            duo: {
+                highlight: POP,
+                outline: HERO
+            }
+        }
+    },
     brandFont: 'Brown Pro',
     name: 'Bank of Melbourne'
 };

package/dist/tailwind/themes/bsa.js

@@ -1,21 +1,32 @@
 import { generateColorTints } from '../utils/generate-color-tints.js';
+const HERO = '#002F6C';
+const POP = '#00ADBD';
 export const theme = {
     code: 'BSA',
-    colors: generateColorTints({
-        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'
-    }),
+    colors: {
+        ...generateColorTints({
+            background: '#F3F4F4',
+            border: '#D3D4D5',
+            borderDark: '#909396',
+            focus: '#C26F9D',
+            heading: '#002F6C',
+            hero: HERO,
+            light: '#FAFAFA',
+            link: '#D81B2B',
+            muted: '#6A6E72',
+            neutral: '#6A6E72',
+            pop: POP,
+            primary: '#D81B2B',
+            text: '#333'
+        }),
+        pictogram: {
+            dark: HERO,
+            duo: {
+                highlight: POP,
+                outline: HERO
+            }
+        }
+    },
     brandFont: 'Aller',
     name: 'BankSA'
 };

package/dist/tailwind/themes/btfg.js

@@ -1,21 +1,32 @@
 import { generateColorTints } from '../utils/generate-color-tints.js';
+const HERO = '#2574A9';
+const PRIMARY = '#9E005D';
 export const theme = {
     code: 'BTFG',
-    colors: generateColorTints({
-        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'
-    }),
+    colors: {
+        ...generateColorTints({
+            background: '#F9F9F9',
+            border: '#E0E0E0',
+            borderDark: '#949494',
+            focus: '#CA73A6',
+            heading: '#2574A9',
+            hero: HERO,
+            light: '#FCFCFC',
+            link: '#9E005D',
+            muted: '#666666',
+            neutral: '#637B98',
+            pop: PRIMARY,
+            primary: PRIMARY,
+            text: '#333'
+        }),
+        pictogram: {
+            dark: HERO,
+            duo: {
+                highlight: PRIMARY,
+                outline: HERO
+            }
+        }
+    },
     brandFont: 'Georgia, "Times New Roman", Times, serif',
     name: 'BT Financial Group'
 };

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

@@ -8,10 +8,10 @@ export declare const THEMES: {
         };
         colors: {
             link: {
-                DEFAULT: string;
+                200: string;
                 50: string;
+                DEFAULT: string;
                 100: string;
-                200: string;
                 300: string;
                 400: string;
                 500: string;
@@ -21,10 +21,10 @@ export declare const THEMES: {
                 900: string;
             };
             text: {
-                DEFAULT: string;
+                200: string;
                 50: string;
+                DEFAULT: string;
                 100: string;
-                200: string;
                 300: string;
                 400: string;
                 500: string;
@@ -34,10 +34,10 @@ export declare const THEMES: {
                 900: string;
             };
             border: {
-                DEFAULT: string;
+                200: string;
                 50: string;
+                DEFAULT: string;
                 100: string;
-                200: string;
                 300: string;
                 400: string;
                 500: string;
@@ -47,10 +47,10 @@ export declare const THEMES: {
                 900: string;
             };
             heading: {
-                DEFAULT: string;
+                200: string;
                 50: string;
+                DEFAULT: string;
                 100: string;
-                200: string;
                 300: string;
                 400: string;
                 500: string;
@@ -60,10 +60,10 @@ export declare const THEMES: {
                 900: string;
             };
             primary: {
-                DEFAULT: string;
+                200: string;
                 50: string;
+                DEFAULT: string;
                 100: string;
-                200: string;
                 300: string;
                 400: string;
                 500: string;
@@ -73,10 +73,10 @@ export declare const THEMES: {
                 900: string;
             };
             hero: {
-                DEFAULT: string;
+                200: string;
                 50: string;
+                DEFAULT: string;
                 100: string;
-                200: string;
                 300: string;
                 400: string;
                 500: string;
@@ -86,10 +86,10 @@ export declare const THEMES: {
                 900: string;
             };
             white: {
-                DEFAULT: string;
+                200: string;
                 50: string;
+                DEFAULT: string;
                 100: string;
-                200: string;
                 300: string;
                 400: string;
                 500: string;
@@ -99,10 +99,10 @@ export declare const THEMES: {
                 900: string;
             };
             black: {
-                DEFAULT: string;
+                200: string;
                 50: string;
+                DEFAULT: string;
                 100: string;
-                200: string;
                 300: string;
                 400: string;
                 500: string;
@@ -112,10 +112,10 @@ export declare const THEMES: {
                 900: string;
             };
             background: {
-                DEFAULT: string;
+                200: string;
                 50: string;
+                DEFAULT: string;
                 100: string;
-                200: string;
                 300: string;
                 400: string;
                 500: string;
@@ -125,10 +125,10 @@ export declare const THEMES: {
                 900: string;
             };
             borderDark: {
-                DEFAULT: string;
+                200: string;
                 50: string;
+                DEFAULT: string;
                 100: string;
-                200: string;
                 300: string;
                 400: string;
                 500: string;
@@ -138,10 +138,10 @@ export declare const THEMES: {
                 900: string;
             };
             focus: {
-                DEFAULT: string;
+                200: string;
                 50: string;
+                DEFAULT: string;
                 100: string;
-                200: string;
                 300: string;
                 400: string;
                 500: string;
@@ -151,10 +151,10 @@ export declare const THEMES: {
                 900: string;
             };
             light: {
-                DEFAULT: string;
+                200: string;
                 50: string;
+                DEFAULT: string;
                 100: string;
-                200: string;
                 300: string;
                 400: string;
                 500: string;
@@ -164,10 +164,10 @@ export declare const THEMES: {
                 900: string;
             };
             muted: {
-                DEFAULT: string;
+                200: string;
                 50: string;
+                DEFAULT: string;
                 100: string;
-                200: string;
                 300: string;
                 400: string;
                 500: string;
@@ -177,10 +177,10 @@ export declare const THEMES: {
                 900: string;
             };
             neutral: {
-                DEFAULT: string;
+                200: string;
                 50: string;
+                DEFAULT: string;
                 100: string;
-                200: string;
                 300: string;
                 400: string;
                 500: string;
@@ -190,10 +190,10 @@ export declare const THEMES: {
                 900: string;
             };
             pop: {
-                DEFAULT: string;
+                200: string;
                 50: string;
+                DEFAULT: string;
                 100: string;
-                200: string;
                 300: string;
                 400: string;
                 500: string;
@@ -202,6 +202,14 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
+        } & {
+            pictogram: {
+                dark: string;
+                duo: {
+                    highlight: string;
+                    outline: string;
+                };
+            };
         };
     };
 }[];

package/dist/tailwind/themes/rams.js

@@ -1,21 +1,32 @@
 import { generateColorTints } from '../utils/generate-color-tints.js';
+const PRIMARY = '#047DBC';
+const POP = '#78C339';
 export const theme = {
     code: 'RAMS',
-    colors: generateColorTints({
-        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'
-    }),
+    colors: {
+        ...generateColorTints({
+            background: '#F3F4F4',
+            border: '#D3D4D5',
+            borderDark: '#909396',
+            focus: '#009CDB',
+            heading: '#1972B4',
+            hero: '#0F446C',
+            light: '#FAFAFA',
+            link: '#1972B4',
+            muted: '#6A6E72',
+            neutral: '#848588',
+            pop: POP,
+            primary: PRIMARY,
+            text: '#333'
+        }),
+        pictogram: {
+            dark: PRIMARY,
+            duo: {
+                highlight: POP,
+                outline: PRIMARY
+            }
+        }
+    },
     brandFont: 'Source Sans Pro',
     name: 'RAMS'
 };

package/dist/tailwind/themes/stg.js

@@ -1,21 +1,32 @@
 import { generateColorTints } from '../utils/generate-color-tints.js';
+const TEXT = '#004833';
+const POP = '#78BE20';
 export const theme = {
     code: 'STG',
-    colors: generateColorTints({
-        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'
-    }),
+    colors: {
+        ...generateColorTints({
+            background: '#F5F5F4',
+            border: '#D6D5D0',
+            borderDark: '#949386',
+            focus: '#9681AF',
+            heading: '#004833',
+            hero: '#008739',
+            light: '#FAFAF9',
+            link: '#E30000',
+            muted: '#727163',
+            neutral: '#727163',
+            pop: POP,
+            primary: '#E30000',
+            text: TEXT
+        }),
+        pictogram: {
+            dark: TEXT,
+            duo: {
+                highlight: POP,
+                outline: TEXT
+            }
+        }
+    },
     brandFont: 'Dragon Bold',
     name: 'St.George'
 };