@westpac/ui 0.11.0 → 0.13.0

package/src/tailwind/__mocks__/utils.constants.ts

@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/no-duplicate-string */
 export const EXPECTED_SPACING = {
   '0': '0rem',
   '1': '0.375rem',
@@ -153,3 +154,110 @@ export const EXPECTED_TYPOGRAPHY = {
     lineHeight: 'MOCK',
   },
 };
+
+export const EXPECTED_FONT_FACES = [
+  {
+    '@font-face': {
+      src: "url('/fonts/lineto-brown-pro-light.woff2') format('woff2'), url('/fonts/lineto-brown-pro-light.woff') format('woff')",
+      'font-family': 'Brown Pro',
+      'font-weight': '100 300',
+      'font-style': 'normal',
+    },
+  },
+  {
+    '@font-face': {
+      src: "url('/fonts/lineto-brown-pro-regular.woff2') format('woff2'), url('/fonts/lineto-brown-pro-regular.woff') format('woff')",
+      'font-family': 'Brown Pro',
+      'font-weight': '400 600',
+      'font-style': 'normal',
+    },
+  },
+  {
+    '@font-face': {
+      src: "url('/fonts/lineto-brown-pro-bold.woff2') format('woff2'), url('/fonts/lineto-brown-pro-bold.woff') format('woff')",
+      'font-family': 'Brown Pro',
+      'font-weight': '700 900',
+      'font-style': 'normal',
+    },
+  },
+  {
+    '@font-face': {
+      src: "url('/fonts/Aller_Lt.woff2') format('woff2'), url('/fonts/Aller_Lt.woff') format('woff')",
+      'font-family': 'Aller',
+      'font-weight': '100 600',
+      'font-style': 'normal',
+    },
+  },
+  {
+    '@font-face': {
+      src: "url('/fonts/Aller_Bd.woff2') format('woff2'), url('/fonts/Aller_Bd.woff') format('woff')",
+      'font-family': 'Aller',
+      'font-weight': '700 900',
+      'font-style': 'normal',
+    },
+  },
+  {
+    '@font-face': {
+      src: "url('/fonts/source-sans-pro-v14-latin-regular.woff2') format('woff2'), url('/fonts/source-sans-pro-v14-latin-regular.woff') format('woff')",
+      'font-family': 'Source Sans Pro',
+      'font-weight': '100 500',
+      'font-style': 'normal',
+    },
+  },
+  {
+    '@font-face': {
+      src: "url('/fonts/source-sans-pro-v14-latin-600.woff2') format('woff2'), url('/fonts/source-sans-pro-v14-latin-600.woff') format('woff')",
+      'font-family': 'Source Sans Pro',
+      'font-weight': '600',
+      'font-style': 'normal',
+    },
+  },
+  {
+    '@font-face': {
+      src: "url('/fonts/source-sans-pro-v14-latin-700.woff2') format('woff2'), url('/fonts/source-sans-pro-v14-latin-700.woff') format('woff')",
+      'font-family': 'Source Sans Pro',
+      'font-weight': '700 900',
+      'font-style': 'normal',
+    },
+  },
+  {
+    '@font-face': {
+      src: "url('/fonts/dragonbold-bold-webfont.woff2') format('woff2'), url('/fonts/dragonbold-bold-webfont.woff') format('woff')",
+      'font-family': 'Dragon Bold',
+      'font-weight': '100 900',
+      'font-style': 'normal',
+    },
+  },
+  {
+    '@font-face': {
+      src: "url('/fonts/Westpac-Bold-v2.007.woff2') format('woff2'), url('/fonts/Westpac-Bold-v2.007.woff') format('woff')",
+      'font-family': 'Westpac',
+      'font-weight': '100 900',
+      'font-style': 'normal',
+    },
+  },
+  {
+    '@font-face': {
+      src: "url('/fonts/montserrat-v14-latin-300.woff2') format('woff2'), url('/fonts/montserrat-v14-latin-300.woff') format('woff')",
+      'font-family': 'Montserrat',
+      'font-weight': '100 300',
+      'font-style': 'normal',
+    },
+  },
+  {
+    '@font-face': {
+      src: "url('/fonts/montserrat-v14-latin-regular.woff2') format('woff2'), url('/fonts/montserrat-v14-latin-regular.woff') format('woff')",
+      'font-family': 'Montserrat',
+      'font-weight': '400 600',
+      'font-style': 'normal',
+    },
+  },
+  {
+    '@font-face': {
+      src: "url('/fonts/montserrat-v14-latin-700.woff2') format('woff2'), url('/fonts/montserrat-v14-latin-700.woff') format('woff')",
+      'font-family': 'Montserrat',
+      'font-weight': '700 900',
+      'font-style': 'normal',
+    },
+  },
+];

package/src/tailwind/constants/typography.ts

@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/no-duplicate-string */
 export const DEFAULT_BODY_TYPOGRAPHY = [
   '-apple-system',
   'BlinkMacSystemFont',
@@ -58,3 +59,96 @@ export const FONT_SIZES = {
     lineHeight: 'loose',
   },
 };
+
+export const BRAND_FONTS = {
+  bom: [
+    {
+      src: `url('{src}/lineto-brown-pro-light.woff2') format('woff2'), url('{src}/lineto-brown-pro-light.woff') format('woff')`,
+      'font-family': 'Brown Pro',
+      'font-weight': '100 300',
+      'font-style': 'normal',
+    },
+    {
+      src: `url('{src}/lineto-brown-pro-regular.woff2') format('woff2'), url('{src}/lineto-brown-pro-regular.woff') format('woff')`,
+      'font-family': 'Brown Pro',
+      'font-weight': '400 600',
+      'font-style': 'normal',
+    },
+    {
+      src: `url('{src}/lineto-brown-pro-bold.woff2') format('woff2'), url('{src}/lineto-brown-pro-bold.woff') format('woff')`,
+      'font-family': 'Brown Pro',
+      'font-weight': '700 900',
+      'font-style': 'normal',
+    },
+  ],
+  bsa: [
+    {
+      src: `url('{src}/Aller_Lt.woff2') format('woff2'), url('{src}/Aller_Lt.woff') format('woff')`,
+      'font-family': 'Aller',
+      'font-weight': '100 600',
+      'font-style': 'normal',
+    },
+    {
+      src: `url('{src}/Aller_Bd.woff2') format('woff2'), url('{src}/Aller_Bd.woff') format('woff')`,
+      'font-family': 'Aller',
+      'font-weight': '700 900',
+      'font-style': 'normal',
+    },
+  ],
+  rams: [
+    {
+      src: `url('{src}/source-sans-pro-v14-latin-regular.woff2') format('woff2'), url('{src}/source-sans-pro-v14-latin-regular.woff') format('woff')`,
+      'font-family': 'Source Sans Pro',
+      'font-weight': '100 500',
+      'font-style': 'normal',
+    },
+    {
+      src: `url('{src}/source-sans-pro-v14-latin-600.woff2') format('woff2'), url('{src}/source-sans-pro-v14-latin-600.woff') format('woff')`,
+      'font-family': 'Source Sans Pro',
+      'font-weight': '600',
+      'font-style': 'normal',
+    },
+    {
+      src: `url('{src}/source-sans-pro-v14-latin-700.woff2') format('woff2'), url('{src}/source-sans-pro-v14-latin-700.woff') format('woff')`,
+      'font-family': 'Source Sans Pro',
+      'font-weight': '700 900',
+      'font-style': 'normal',
+    },
+  ],
+  stg: [
+    {
+      src: `url('{src}/dragonbold-bold-webfont.woff2') format('woff2'), url('{src}/dragonbold-bold-webfont.woff') format('woff')`,
+      'font-family': 'Dragon Bold',
+      'font-weight': '100 900',
+      'font-style': 'normal',
+    },
+  ],
+  wbc: [
+    {
+      src: `url('{src}/Westpac-Bold-v2.007.woff2') format('woff2'), url('{src}/Westpac-Bold-v2.007.woff') format('woff')`,
+      'font-family': 'Westpac',
+      'font-weight': '100 900',
+      'font-style': 'normal',
+    },
+  ],
+  wbg: [
+    {
+      src: `url('{src}/montserrat-v14-latin-300.woff2') format('woff2'), url('{src}/montserrat-v14-latin-300.woff') format('woff')`,
+      'font-family': 'Montserrat',
+      'font-weight': '100 300',
+      'font-style': 'normal',
+    },
+    {
+      src: `url('{src}/montserrat-v14-latin-regular.woff2') format('woff2'), url('{src}/montserrat-v14-latin-regular.woff') format('woff')`,
+      'font-family': 'Montserrat',
+      'font-weight': '400 600',
+      'font-style': 'normal',
+    },
+    {
+      src: `url('{src}/montserrat-v14-latin-700.woff2') format('woff2'), url('{src}/montserrat-v14-latin-700.woff') format('woff')`,
+      'font-family': 'Montserrat',
+      'font-weight': '700 900',
+      'font-style': 'normal',
+    },
+  ],
+};

package/src/tailwind/tailwind-plugin.ts

@@ -5,171 +5,202 @@ 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 { type PluginOptions } from './types/tailwind.types.js';
 import { generateDatePicker } from './utils/generate-date-picker-component.js';
-import { createFontSizes, generateFontComponents, generateFormControlComponents } from './utils/index.js';
+import {
+  createBrandFonts,
+  createFontSizes,
+  generateFontComponents,
+  generateFormControlComponents,
+} from './utils/index.js';
 
 /**
  * Base Plugin responsible for default theming and adding the typography components
  */
-export const WestpacUIKitBasePlugin = plugin(
-  // Adding the typography components
-  ({ addComponents, addUtilities, addVariant, addBase, theme }) => {
-    addBase({
-      html: { color: theme('colors.text.DEFAULT') },
-    });
-    addUtilities({
-      '.focus-outline': { [`@apply ${theme('focusOutline')}`]: {} },
-      '.background-transition': { [`@apply ${theme('backgroundTransition')}`]: {} },
-      '.select-caret': {
-        backgroundImage:
-          "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' style='color: rgb(89,87,103);'><path fill='currentColor' d='M0 0l7 8 7-8z'/></svg>\")",
-      },
-    });
-    addComponents(generateFontComponents(theme('typographySizes'), theme));
-    addComponents(generateFormControlComponents(theme('formControl')));
-    addComponents(generateDatePicker());
-    THEMES.forEach(({ name }) => {
-      addVariant(`active-theme-${name.toLowerCase()}`, [
-        `[data-theme="${name.toLowerCase()}"] &`,
-        `.theme-${name.toLowerCase()} &`,
-      ]);
-    });
+export const WestpacUIKitBasePlugin = plugin.withOptions(
+  function (options: PluginOptions = {}) {
+    return ({ addComponents, addUtilities, addVariant, addBase, theme }) => {
+      /**
+       * Base
+       */
+      addBase({
+        html: { color: theme('colors.text.DEFAULT') },
+      });
+
+      if (options?.brandFonts?.src) {
+        const fonts = createBrandFonts({
+          src: options.brandFonts.src,
+          brand: options.brandFonts?.brands,
+        });
+        fonts.forEach(font => addBase(font));
+      }
+      /**
+       * Utilities
+       */
+      addUtilities({
+        '.focus-outline': { [`@apply ${theme('focusOutline')}`]: {} },
+        '.background-transition': { [`@apply ${theme('backgroundTransition')}`]: {} },
+        '.select-caret': {
+          backgroundImage:
+            "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' style='color: rgb(89,87,103);'><path fill='currentColor' d='M0 0l7 8 7-8z'/></svg>\")",
+        },
+      });
+
+      /**
+       * Components
+       */
+      addComponents(generateFontComponents(theme('typographySizes'), theme));
+      addComponents(generateFormControlComponents(theme('formControl')));
+      addComponents(generateDatePicker());
+
+      /**
+       * Variants
+       */
+      THEMES.forEach(({ name }) => {
+        addVariant(`active-theme-${name.toLowerCase()}`, [
+          `[data-theme="${name.toLowerCase()}"] &`,
+          `.theme-${name.toLowerCase()} &`,
+        ]);
+      });
+    };
   },
-  {
-    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',
-          // See https://stackoverflow.com/questions/19982651/why-does-bootstrap-set-the-line-height-property-to-1-428571429 for below line height reasoning
-          loose: '1.428571429',
-        },
-        borderRadius: {
-          DEFAULT: '0.1875rem',
-        },
-        borderWidth: {
-          5: '0.3125rem',
-        },
-        fontSize: createFontSizes(FONT_TYPES),
-        keyframes: {
-          fadeIn: {
-            '0%': { opacity: '0' },
-            '100%': { opacity: '1' },
-          },
-          fadeInDown: {
-            '0%': {
-              opacity: '0',
-              transform: 'translateY(-10vh)',
+  function () {
+    return {
+      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',
+            // See https://stackoverflow.com/questions/19982651/why-does-bootstrap-set-the-line-height-property-to-1-428571429 for below line height reasoning
+            loose: '1.428571429',
+          },
+          borderRadius: {
+            DEFAULT: '0.1875rem',
+          },
+          borderWidth: {
+            5: '0.3125rem',
+          },
+          fontSize: createFontSizes(FONT_TYPES),
+          keyframes: {
+            fadeIn: {
+              '0%': { opacity: '0' },
+              '100%': { opacity: '1' },
             },
-            '100%': {
-              opacity: '1',
-              transform: 'translateY(0)',
+            fadeInDown: {
+              '0%': {
+                opacity: '0',
+                transform: 'translateY(-10vh)',
+              },
+              '100%': {
+                opacity: '1',
+                transform: 'translateY(0)',
+              },
             },
           },
+          animation: {
+            fadeIn: 'fadeIn 0.2s ease',
+            fadeInDown: 'fadeInDown 0.4s 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', //1200 (lg) + 60 (paddingHorizontal) + 60 (paddingHorizontal)
+          },
+          transitionTimingFunction: {
+            ease: 'cubic-bezier(0.25, 0.1, 0.25, 1.0)', // based on css ease timing function used in GEL 3.0
+          },
         },
-        animation: {
-          fadeIn: 'fadeIn 0.2s ease',
-          fadeInDown: 'fadeInDown 0.4s 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', //1200 (lg) + 60 (paddingHorizontal) + 60 (paddingHorizontal)
-        },
-        transitionTimingFunction: {
-          ease: 'cubic-bezier(0.25, 0.1, 0.25, 1.0)', // based on css ease timing function used in GEL 3.0
-        },
-      },
-      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',
-        },
-        11: {
-          fontSize: '0.875rem',
-          lineHeight: 'loose',
+        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',
+          },
+          11: {
+            fontSize: '0.875rem',
+            lineHeight: 'loose',
+          },
         },
-      },
-      formControl: {
-        base: 'no-inner-spin-button box-border w-fit appearance-none overflow-visible rounded border bg-white align-middle text-text transition placeholder:font-light placeholder:text-text-50 placeholder:opacity-100 focus:focus-outline disabled:form-control-disabled',
-        disabled: 'cursor-not-allowed border-dashed bg-background text-muted',
-        sizes: {
-          // Some of the values are not following the spacing so we needed to use static values as following
-          small: 'px-[0.5625rem] pb-[0.25rem] pt-[0.1875rem] text-sm leading-[1.3rem]',
-          medium: 'typography-body-9 px-2 py-[0.3125rem] leading-6',
-          large: 'px-[0.9375rem] py-[0.5rem] text-base',
-          xlarge: 'px-3 pb-[0.625rem] pt-[0.5625rem] text-lg leading-[1.685rem]',
+        formControl: {
+          base: 'no-inner-spin-button box-border w-fit appearance-none overflow-visible rounded border bg-white align-middle text-text transition placeholder:font-light placeholder:text-text-50 placeholder:opacity-100 focus:focus-outline disabled:form-control-disabled',
+          disabled: 'cursor-not-allowed border-dashed bg-background text-muted',
+          sizes: {
+            // Some of the values are not following the spacing so we needed to use static values as following
+            small: 'px-[0.5625rem] pb-[0.25rem] pt-[0.1875rem] text-sm leading-[1.3rem]',
+            medium: 'typography-body-9 px-2 py-[0.3125rem] leading-6',
+            large: 'px-[0.9375rem] py-[0.5rem] text-base',
+            xlarge: 'px-3 pb-[0.625rem] pt-[0.5625rem] text-lg leading-[1.685rem]',
+          },
         },
-      },
-      button: {
-        base: 'inline-flex items-center justify-center rounded leading-[1.5] transition-[background] disabled:pointer-events-none disabled:opacity-50 group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none',
-        look: {
-          base: {
-            primary: 'border border-primary bg-primary text-white hover:bg-primary-70 active:bg-primary-50',
-            hero: 'border border-hero bg-hero text-white hover:bg-hero-70 active:bg-hero-50',
-            faint: 'border border-border bg-light text-muted hover:bg-white active:bg-white',
-            link: 'text-link underline',
-          },
-          soft: {
-            primary:
-              'border border-primary bg-white text-text hover:text-white hover:bg-primary-70 active:bg-primary-50',
-            hero: 'border border-hero bg-hero bg-white text-text hover:text-white hover:bg-hero-70 active:bg-hero-50',
-            faint: 'border border-border bg-white text-muted hover:bg-light active:bg-light',
+        button: {
+          base: 'inline-flex items-center justify-center rounded leading-[1.5] transition-[background] disabled:pointer-events-none disabled:opacity-50 group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none',
+          look: {
+            base: {
+              primary: 'border border-primary bg-primary text-white hover:bg-primary-70 active:bg-primary-50',
+              hero: 'border border-hero bg-hero text-white hover:bg-hero-70 active:bg-hero-50',
+              faint: 'border border-border bg-light text-muted hover:bg-white active:bg-white',
+              link: 'text-link underline',
+            },
+            soft: {
+              primary:
+                'border border-primary bg-white text-text hover:text-white hover:bg-primary-70 active:bg-primary-50',
+              hero: 'border border-hero bg-hero bg-white text-text hover:text-white hover:bg-hero-70 active:bg-hero-50',
+              faint: 'border border-border bg-white text-muted hover:bg-light active:bg-light',
+            },
           },
         },
+        focusOutline: 'outline outline-2 outline-offset-[3px] outline-focus',
+        backgroundTransition: 'transition-[background] duration-300 ease-ease',
       },
-      focusOutline: 'outline outline-2 outline-offset-[3px] outline-focus',
-      backgroundTransition: 'transition-[background] duration-300 ease-ease',
-    },
+    };
   },
 );
 

package/src/tailwind/tailwind-transformer.ts

@@ -13,7 +13,7 @@ export const withGEL = (config: Config) =>
       ...(Array.isArray(config.safelist) ? config.safelist : []),
     ],
     plugins: [
-      WestpacUIKitBasePlugin,
+      WestpacUIKitBasePlugin(config?.options),
       WestpacUIKitThemesPlugin,
       ...(config.plugins ? (Array.isArray(config.plugins) ? config.plugins : [config.plugins]) : []),
     ],

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

@@ -28,3 +28,12 @@ export type BrandConfig = {
   colors: ColorConfig & PictogramConfig;
   name: string;
 };
+
+export type FontFace = {
+  '@font-face': {
+    'font-family': string;
+    'font-style': string;
+    'font-weight': string;
+    src: string;
+  };
+};

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

@@ -0,0 +1,8 @@
+import { type BrandKey } from './brand.types.js';
+
+export type PluginOptions = {
+  brandFonts?: {
+    brands?: Exclude<BrandKey, 'btfg'> | Exclude<BrandKey, 'btfg'>[];
+    src: string;
+  };
+};

package/src/tailwind/utils/create-brand-fonts.ts

@@ -0,0 +1,22 @@
+import { BRAND_FONTS } from '../constants/typography.js';
+import { type BrandKey, type FontFace } from '../types/index.js';
+
+type Brand = Exclude<BrandKey, 'btfg'>;
+
+export function createBrandFonts({
+  src = '',
+  brand = ['bom', 'bsa', 'rams', 'stg', 'wbc', 'wbg'],
+}: {
+  brand?: Brand | Brand[];
+  src: string;
+}) {
+  const trimSrc = src.replace(/\/$/, '');
+  const brandList: Brand[] = Array.isArray(brand) ? brand : [brand];
+
+  return brandList.reduce((acc, curr) => {
+    const fonts = BRAND_FONTS[curr].map(font => ({
+      '@font-face': { ...font, src: font.src.replace(/{src}/g, trimSrc) },
+    }));
+    return [...acc, ...fonts];
+  }, [] as FontFace[]);
+}

package/src/tailwind/utils/generate-date-picker-component.ts

@@ -90,7 +90,7 @@ export const generateDatePicker = () => {
         '@apply hover:!bg-primary/5 focus:!bg-white/0 focus:!text-text': {},
         '@apply active:shadow active:focus-outline focus:focus-outline focus:!shadow-none !outline-offset-0': {},
         '&.is-today': {
-          '@apply !shadow-primary !text-text !bg-primary/5': {},
+          '@apply !shadow-primary !text-text !bg-primary/5 !border !border-solid !border-primary': {},
         },
         '&.is-disabled': {
           '@apply line-through': {},

package/src/tailwind/utils/index.ts

@@ -3,3 +3,4 @@ export { generateColorTints } from './generate-color-tints.js';
 export { createFontSizes } from './create-font-sizes.js';
 export { generateFontComponents } from './generate-font-components.js';
 export { generateFormControlComponents } from './generate-form-control.js';
+export { createBrandFonts } from './create-brand-fonts.js';

package/tailwind.config.ts

@@ -7,7 +7,7 @@ const config: Config = withTV({
   jit: true,
   relative: true,
   content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
-  plugins: [WestpacUIKitBasePlugin, WestpacUIKitThemesPlugin],
+  plugins: [WestpacUIKitBasePlugin({ brandFonts: { src: '/fonts' } }), WestpacUIKitThemesPlugin],
 });
 
 export default config;