npm - @westpac/ui - Versions diffs - 0.14.1 → 0.16.0 - Mend

@westpac/ui 0.14.1 → 0.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (715) hide show

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

@@ -1,3 +1,4 @@
+import { BrandKey } from '../types/brand.types.js';
 export declare const BASE_COLORS: {
     success: string;
     info: string;
@@ -10,7 +11,6 @@ export declare const COLORS: {
     black: string;
     link: {
         100: string;
-        DEFAULT: string;
         50: string;
         200: string;
         300: string;
@@ -20,10 +20,10 @@ export declare const COLORS: {
         700: string;
         800: string;
         900: string;
+        DEFAULT: string;
     };
     text: {
         100: string;
-        DEFAULT: string;
         50: string;
         200: string;
         300: string;
@@ -33,10 +33,10 @@ export declare const COLORS: {
         700: string;
         800: string;
         900: string;
+        DEFAULT: string;
     };
     border: {
         100: string;
-        DEFAULT: string;
         50: string;
         200: string;
         300: string;
@@ -46,10 +46,10 @@ export declare const COLORS: {
         700: string;
         800: string;
         900: string;
+        DEFAULT: string;
     };
     heading: {
         100: string;
-        DEFAULT: string;
         50: string;
         200: string;
         300: string;
@@ -59,10 +59,10 @@ export declare const COLORS: {
         700: string;
         800: string;
         900: string;
+        DEFAULT: string;
     };
     primary: {
         100: string;
-        DEFAULT: string;
         50: string;
         200: string;
         300: string;
@@ -72,10 +72,10 @@ export declare const COLORS: {
         700: string;
         800: string;
         900: string;
+        DEFAULT: string;
     };
     hero: {
         100: string;
-        DEFAULT: string;
         50: string;
         200: string;
         300: string;
@@ -85,10 +85,10 @@ export declare const COLORS: {
         700: string;
         800: string;
         900: string;
+        DEFAULT: string;
     };
     background: {
         100: string;
-        DEFAULT: string;
         50: string;
         200: string;
         300: string;
@@ -98,10 +98,10 @@ export declare const COLORS: {
         700: string;
         800: string;
         900: string;
+        DEFAULT: string;
     };
     borderDark: {
         100: string;
-        DEFAULT: string;
         50: string;
         200: string;
         300: string;
@@ -111,10 +111,10 @@ export declare const COLORS: {
         700: string;
         800: string;
         900: string;
+        DEFAULT: string;
     };
     focus: {
         100: string;
-        DEFAULT: string;
         50: string;
         200: string;
         300: string;
@@ -124,10 +124,10 @@ export declare const COLORS: {
         700: string;
         800: string;
         900: string;
+        DEFAULT: string;
     };
     light: {
         100: string;
-        DEFAULT: string;
         50: string;
         200: string;
         300: string;
@@ -137,10 +137,10 @@ export declare const COLORS: {
         700: string;
         800: string;
         900: string;
+        DEFAULT: string;
     };
     muted: {
         100: string;
-        DEFAULT: string;
         50: string;
         200: string;
         300: string;
@@ -150,10 +150,10 @@ export declare const COLORS: {
         700: string;
         800: string;
         900: string;
+        DEFAULT: string;
     };
     neutral: {
         100: string;
-        DEFAULT: string;
         50: string;
         200: string;
         300: string;
@@ -163,10 +163,153 @@ export declare const COLORS: {
         700: string;
         800: string;
         900: string;
+        DEFAULT: string;
     };
     pop: {
         100: string;
+        50: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        DEFAULT: string;
+    };
+    "data-a-solid": {
+        100: string;
+        50: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        DEFAULT: string;
+    };
+    "data-a-tint": {
+        100: string;
+        50: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        DEFAULT: string;
+    };
+    "data-b-solid": {
+        100: string;
+        50: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        DEFAULT: string;
+    };
+    "data-b-tint": {
+        100: string;
+        50: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        DEFAULT: string;
+    };
+    "data-c-solid": {
+        100: string;
+        50: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        DEFAULT: string;
+    };
+    "data-c-tint": {
+        100: string;
+        50: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        DEFAULT: string;
+    };
+    "data-d-solid": {
+        100: string;
+        50: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        DEFAULT: string;
+    };
+    "data-d-tint": {
+        100: string;
+        50: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        DEFAULT: string;
+    };
+    "data-e-solid": {
+        100: string;
+        50: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        DEFAULT: string;
+    };
+    "data-e-tint": {
+        100: string;
+        50: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
         DEFAULT: string;
+    };
+    "data-f-solid": {
+        100: string;
         50: string;
         200: string;
         300: string;
@@ -176,6 +319,20 @@ export declare const COLORS: {
         700: string;
         800: string;
         900: string;
+        DEFAULT: string;
+    };
+    "data-f-tint": {
+        100: string;
+        50: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        DEFAULT: string;
     };
     pictogram: {
         dark: string;
@@ -185,3 +342,7 @@ export declare const COLORS: {
         };
     };
 };
+type DataVisColor = 'data-a-solid' | 'data-a-tint' | 'data-a-opacity' | 'data-b-solid' | 'data-b-tint' | 'data-b-opacity' | 'data-c-solid' | 'data-c-tint' | 'data-c-opacity' | 'data-d-solid' | 'data-d-tint' | 'data-d-opacity' | 'data-e-solid' | 'data-e-tint' | 'data-e-opacity' | 'data-f-solid' | 'data-f-tint' | 'data-f-opacity';
+type DataVisValue = Record<DataVisColor, string>;
+export declare const DATA_VIS_COLORS: Record<Exclude<BrandKey, 'btfg'>, DataVisValue>;
+export {};

package/dist/tailwind/constants/colors.js CHANGED Viewed

@@ -11,3 +11,125 @@ export const COLORS = {
     white: '#FFF',
     black: '#000'
 };
+export const DATA_VIS_COLORS = {
+    bom: {
+        'data-a-solid': '#D13900',
+        'data-a-tint': '#E79B7F',
+        'data-a-opacity': '#D139004D',
+        'data-b-solid': '#534891',
+        'data-b-tint': '#A8A3C7',
+        'data-b-opacity': '#5348914D',
+        'data-c-solid': '#A094FC',
+        'data-c-tint': '#CFC9FD',
+        'data-c-opacity': '#A094FC4D',
+        'data-d-solid': '#20024E',
+        'data-d-tint': '#8F80A6',
+        'data-d-opacity': '#20024E4D',
+        'data-e-solid': '#D17E15',
+        'data-e-tint': '#E8BE8A',
+        'data-e-opacity': '#D17E154D',
+        'data-f-solid': '#9E2A00',
+        'data-f-tint': '#CE9480',
+        'data-f-opacity': '#9E2A004D'
+    },
+    bsa: {
+        'data-a-solid': '#D81B2B',
+        'data-a-tint': '#EB8C94',
+        'data-a-opacity': '#D81B2B4D',
+        'data-b-solid': '#002F6C',
+        'data-b-tint': '#7F96B5',
+        'data-b-opacity': '#002F6C4D',
+        'data-c-solid': '#00ADBD',
+        'data-c-tint': '#7FD5DD',
+        'data-c-opacity': '#00ADBD4D',
+        'data-d-solid': '#5CBB3E',
+        'data-d-tint': '#ADDC9E',
+        'data-d-opacity': '#5CBB3E4D',
+        'data-e-solid': '#F7921E',
+        'data-e-tint': '#FAC88E',
+        'data-e-opacity': '#F7921E4D',
+        'data-f-solid': '#A22269',
+        'data-f-tint': '#D090B3',
+        'data-f-opacity': '#A222694D'
+    },
+    rams: {
+        'data-a-solid': '#047DBC',
+        'data-a-tint': '#81BDDD',
+        'data-a-opacity': '#047DBC4D',
+        'data-b-solid': '#0F446C',
+        'data-b-tint': '#86A1B5',
+        'data-b-opacity': '#0F446C4D',
+        'data-c-solid': '#78C339',
+        'data-c-tint': '#BBE09B',
+        'data-c-opacity': '#78C3394D',
+        'data-d-solid': '#0BC2FF',
+        'data-d-tint': '#84E0FF',
+        'data-d-opacity': '#0BC2FF4D',
+        'data-e-solid': '#D0D400',
+        'data-e-tint': '#E7E980',
+        'data-e-opacity': '#D0D4004D',
+        'data-f-solid': '#00C2D4',
+        'data-f-tint': '#80E0EA',
+        'data-f-opacity': '#00C2D44D'
+    },
+    stg: {
+        'data-a-solid': '#E30000',
+        'data-a-tint': '#F07F7F',
+        'data-a-opacity': '#E300004D',
+        'data-b-solid': '#502D79',
+        'data-b-tint': '#A795BB',
+        'data-b-opacity': '#502D794D',
+        'data-c-solid': '#FF7F29',
+        'data-c-tint': '#FFBE93',
+        'data-c-opacity': '#FF7F294D',
+        'data-d-solid': '#78BE20',
+        'data-d-tint': '#BBDE8F',
+        'data-d-opacity': '#78BE204D',
+        'data-e-solid': '#3FC3EB',
+        'data-e-tint': '#9EE0F4',
+        'data-e-opacity': '#3FC3EB4D',
+        'data-f-solid': '#008739',
+        'data-f-tint': '#7FC29B',
+        'data-f-opacity': '#0087394D'
+    },
+    wbc: {
+        'data-a-solid': '#DA1710',
+        'data-a-tint': '#EC8A87',
+        'data-a-opacity': '#DA17104D',
+        'data-b-solid': '#1F1C4F',
+        'data-b-tint': '#8E8DA6',
+        'data-b-opacity': '#1F1C4F4D',
+        'data-c-solid': '#FF3DDB',
+        'data-c-tint': '#FF9DEC',
+        'data-c-opacity': '#FF3DDB4D',
+        'data-d-solid': '#991AD6',
+        'data-d-tint': '#CB8CEA',
+        'data-d-opacity': '#991AD64D',
+        'data-e-solid': '#990000',
+        'data-e-tint': '#CB7F7F',
+        'data-e-opacity': '#9900004D',
+        'data-f-solid': '#F57A0F',
+        'data-f-tint': '#FABC87',
+        'data-f-opacity': '#F57A0F4D'
+    },
+    wbg: {
+        'data-a-solid': '#DA1710',
+        'data-a-tint': '#EC8A87',
+        'data-a-opacity': '#DA17104D',
+        'data-b-solid': '#685AC0',
+        'data-b-tint': '#B3ACDF',
+        'data-b-opacity': '#685AC04D',
+        'data-c-solid': '#84DCE0',
+        'data-c-tint': '#C1EDEF',
+        'data-c-opacity': '#84DCE04D',
+        'data-d-solid': '#FF7468',
+        'data-d-tint': '#FFB9B3',
+        'data-d-opacity': '#FF74684D',
+        'data-e-solid': '#D4DE25',
+        'data-e-tint': '#E9EE91',
+        'data-e-opacity': '#D4DE254D',
+        'data-f-solid': '#009ED4',
+        'data-f-tint': '#7FCEE9',
+        'data-f-opacity': '#009ED44D'
+    }
+};

package/dist/tailwind/themes/bom.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import { DATA_VIS_COLORS } from '../constants/colors.js';
 import { generateColorTints } from '../utils/generate-color-tints.js';
 const HERO = '#534891';
 const POP = '#A094FC';
@@ -17,7 +18,19 @@ export const theme = {
             neutral: '#595762',
             pop: POP,
             primary: '#D13900',
-            text: '#20024E'
+            text: '#20024E',
+            'data-a-solid': DATA_VIS_COLORS.bom['data-a-solid'],
+            'data-a-tint': DATA_VIS_COLORS.bom['data-a-tint'],
+            'data-b-solid': DATA_VIS_COLORS.bom['data-b-solid'],
+            'data-b-tint': DATA_VIS_COLORS.bom['data-b-tint'],
+            'data-c-solid': DATA_VIS_COLORS.bom['data-c-solid'],
+            'data-c-tint': DATA_VIS_COLORS.bom['data-c-tint'],
+            'data-d-solid': DATA_VIS_COLORS.bom['data-d-solid'],
+            'data-d-tint': DATA_VIS_COLORS.bom['data-d-tint'],
+            'data-e-solid': DATA_VIS_COLORS.bom['data-e-solid'],
+            'data-e-tint': DATA_VIS_COLORS.bom['data-e-tint'],
+            'data-f-solid': DATA_VIS_COLORS.bom['data-f-solid'],
+            'data-f-tint': DATA_VIS_COLORS.bom['data-f-tint']
         }),
         pictogram: {
             dark: HERO,

package/dist/tailwind/themes/bsa.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import { DATA_VIS_COLORS } from '../constants/colors.js';
 import { generateColorTints } from '../utils/generate-color-tints.js';
 const HERO = '#002F6C';
 const POP = '#00ADBD';
@@ -17,7 +18,19 @@ export const theme = {
             neutral: '#6A6E72',
             pop: POP,
             primary: '#D81B2B',
-            text: '#333'
+            text: '#333',
+            'data-a-solid': DATA_VIS_COLORS.bsa['data-a-solid'],
+            'data-a-tint': DATA_VIS_COLORS.bsa['data-a-tint'],
+            'data-b-solid': DATA_VIS_COLORS.bsa['data-b-solid'],
+            'data-b-tint': DATA_VIS_COLORS.bsa['data-b-tint'],
+            'data-c-solid': DATA_VIS_COLORS.bsa['data-c-solid'],
+            'data-c-tint': DATA_VIS_COLORS.bsa['data-c-tint'],
+            'data-d-solid': DATA_VIS_COLORS.bsa['data-d-solid'],
+            'data-d-tint': DATA_VIS_COLORS.bsa['data-d-tint'],
+            'data-e-solid': DATA_VIS_COLORS.bsa['data-e-solid'],
+            'data-e-tint': DATA_VIS_COLORS.bsa['data-e-tint'],
+            'data-f-solid': DATA_VIS_COLORS.bsa['data-f-solid'],
+            'data-f-tint': DATA_VIS_COLORS.bsa['data-f-tint']
         }),
         pictogram: {
             dark: HERO,