@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.2

package/theme/styles/bookingsg.css

@@ -1,11 +1,11 @@
 @import url("./default.css");
 
-/*
-============================================================================
-PRIMITIVE COLOURS
-============================================================================
-*/
 [data-fds-theme="bookingsg"] {
+    /*
+    ============================================================================
+    PRIMITIVE COLOURS
+    ============================================================================
+    */
     --fds-colour-brand-10: #2C0C0B;
     --fds-colour-brand-20: #4C1513;
     --fds-colour-brand-30: #6C1D1B;
@@ -94,8 +94,8 @@ PRIMITIVE COLOURS
     --fds-colour-info-90: #CCE3F1;
     --fds-colour-info-95: #E3F1F8;
     --fds-colour-info-100: #F4FAFD;
-    --fds-colour-white: #FFF;
-    --fds-colour-black: #000;
+    --fds-colour-white: #FFFFFF;
+    --fds-colour-black: #000000;
     --fds-colour-primary-inverse: #FEAB10;
 
     /*
@@ -231,6 +231,124 @@ PRIMITIVE COLOURS
     /* focus ring */
     --fds-colour-focus-ring: var(--fds-colour-primary-50);
     --fds-colour-focus-ring-inverse: var(--fds-colour-white);
+
+    /* 
+    ========================================================================
+    COMPONENT TOKENS
+    ========================================================================
+    */
+
+    /* Button */
+    --fds-button-radius: var(--fds-radius-sm);
+    --fds-button-default-colour-bg: var(--fds-colour-bg-primary);
+    --fds-button-default-colour-bg-hover: var(--fds-colour-bg-primary-hover);
+    --fds-button-default-colour-text: var(--fds-colour-text-inverse);
+    --fds-button-secondary-colour-border: var(--fds-colour-border-primary);
+    --fds-button-secondary-colour-text: var(--fds-colour-text-primary);
+    --fds-button-light-colour-text: var(--fds-colour-text-primary);
+    --fds-button-link-colour-text: var(--fds-colour-text-primary);
+
+    /* Navbar */
+    --fds-navbar-full-height: 6rem;
+    --fds-navbar-full-logo-height: 2rem;
+    --fds-navbar-compressed-height: 4rem;
+    --fds-navbar-compressed-logo-height: 1.5rem;
+    --fds-navbar-mobile-height: 3.5rem;
+    --fds-navbar-mobile-logo-height: 1.5rem;
+    --fds-navbar-colour-bg: var(--fds-colour-bg);
+    --fds-navbar-colour-icon: var(--fds-colour-icon);
+    --fds-navbar-link-colour-text: var(--fds-colour-text);
+    --fds-navbar-link-colour-text-hover: var(--fds-colour-text-hover);
+    --fds-navbar-link-colour-text-selected-hover: var(
+        --fds-colour-text-selected-hover
+    );
+
+    /* Footer */
+    --fds-footer-colour-bg: var(--fds-colour-bg-strong);
+    --fds-footer-colour-text: var(--fds-colour-text);
+    --fds-footer-link-colour-text: var(--fds-colour-text);
+    --fds-footer-link-colour-text-hover: var(--fds-colour-text-hover);
+    --fds-footer-disclaimer-link-colour-text: var(--fds-colour-text);
+    --fds-footer-disclaimer-link-colour-text-hover: var(
+        --fds-colour-text-subtler
+    );
+
+    /* Animation */
+    --fds-animation-loading-dots-spinner-colour: var(--fds-colour-icon-primary);
+
+    /* 
+    ========================================================================
+    SHADOW
+    ========================================================================
+    */
+    --fds-shadow-xs-subtle: 0 0 4px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-xs-strong: 0 0 4px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
+    --fds-shadow-xs-focus-strong: 0 0 4px 1px
+        rgb(from var(--fds-colour-border-focus) r g b / 50%);
+    --fds-shadow-xs-error-strong: 0 0 4px 1px
+        rgb(from var(--fds-colour-border-error) r g b / 50%);
+    --fds-shadow-sm-subtle: 0 2px 4px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-sm-strong: 0 2px 4px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
+    --fds-shadow-md-subtle: 0 2px 8px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-md-strong: 0 2px 8px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
+    --fds-shadow-lg-subtle: 0 2px 12px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-lg-strong: 0 2px 12px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
+
+    /*
+    ============================================================================
+    FONT
+    ============================================================================
+    */
+    --fds-font-variant: no-common-ligatures;
+    --fds-font-heading-size-xxl: 3rem;
+    --fds-font-heading-size-xl: 2.5rem;
+    --fds-font-heading-size-lg: 2rem;
+    --fds-font-heading-size-md: 1.625rem;
+    --fds-font-heading-size-sm: 1.375rem;
+    --fds-font-heading-size-xs: 1.125rem;
+    --fds-font-heading-lh-xxl: 3.5rem;
+    --fds-font-heading-lh-xl: 3rem;
+    --fds-font-heading-lh-lg: 2.5rem;
+    --fds-font-heading-lh-md: 2.25rem;
+    --fds-font-heading-lh-sm: 1.75rem;
+    --fds-font-heading-lh-xs: 1.75rem;
+    --fds-font-heading-ls-xxl: -0.035rem;
+    --fds-font-heading-ls-xl: -0.02rem;
+    --fds-font-heading-ls-lg: -0.02rem;
+    --fds-font-heading-ls-md: 0rem;
+    --fds-font-heading-ls-sm: 0rem;
+    --fds-font-heading-ls-xs: 0rem;
+    --fds-font-weight-light: 300;
+    --fds-font-weight-regular: 400;
+    --fds-font-weight-semibold: 600;
+    --fds-font-weight-bold: 700;
+    --fds-font-family: "Plus Jakarta Sans";
+    --fds-font-body-size-baseline: 1.125rem;
+    --fds-font-body-size-md: 1rem;
+    --fds-font-body-size-sm: 0.875rem;
+    --fds-font-body-size-xs: 0.75rem;
+    --fds-font-body-lh-baseline: 1.75rem;
+    --fds-font-body-lh-md: 1.5rem;
+    --fds-font-body-lh-sm: 1.6rem;
+    --fds-font-body-lh-xs: 1.2rem;
+    --fds-font-body-ls-baseline: 0rem;
+    --fds-font-body-ls-md: 0.009rem;
+    --fds-font-body-ls-sm: 0.008rem;
+    --fds-font-body-ls-xs: 0.008rem;
+    --fds-font-form-label-size: 1rem;
+    --fds-font-form-description-size: 0.875rem;
+    --fds-font-form-label-lh: 1.5rem;
+    --fds-font-form-description-lh: 1.625rem;
+    --fds-font-form-label-ls: 0.009rem;
+    --fds-font-form-description-ls: 0.008rem;
 }
 
 /*
@@ -366,52 +484,4 @@ SEMANTIC COLOURS - DARK MODE
     /* focus ring - adjusted for dark mode */
     --fds-colour-focus-ring: var(--fds-colour-primary-60);
     --fds-colour-focus-ring-inverse: var(--fds-colour-black);
-
-    /*
-    ============================================================================
-    FONT
-    ============================================================================
-    */
-    --fds-font-variant: no-common-ligatures;
-    --fds-font-heading-size-xxl: 3rem;
-    --fds-font-heading-size-xl: 2.5rem;
-    --fds-font-heading-size-lg: 2rem;
-    --fds-font-heading-size-md: 1.625rem;
-    --fds-font-heading-size-sm: 1.375rem;
-    --fds-font-heading-size-xs: 1.125rem;
-    --fds-font-heading-lh-xxl: 3.5rem;
-    --fds-font-heading-lh-xl: 3rem;
-    --fds-font-heading-lh-lg: 2.5rem;
-    --fds-font-heading-lh-md: 2.25rem;
-    --fds-font-heading-lh-sm: 1.75rem;
-    --fds-font-heading-lh-xs: 1.75rem;
-    --fds-font-heading-ls-xxl: -0.035rem;
-    --fds-font-heading-ls-xl: -0.02rem;
-    --fds-font-heading-ls-lg: -0.02rem;
-    --fds-font-heading-ls-md: 0rem;
-    --fds-font-heading-ls-sm: 0rem;
-    --fds-font-heading-ls-xs: 0rem;
-    --fds-font-weight-light: 300;
-    --fds-font-weight-regular: 400;
-    --fds-font-weight-semibold: 600;
-    --fds-font-weight-bold: 700;
-    --fds-font-family: "Plus Jakarta Sans";
-    --fds-font-body-size-baseline: 1.125rem;
-    --fds-font-body-size-md: 1rem;
-    --fds-font-body-size-sm: 0.875rem;
-    --fds-font-body-size-xs: 0.75rem;
-    --fds-font-body-lh-baseline: 1.75rem;
-    --fds-font-body-lh-md: 1.5rem;
-    --fds-font-body-lh-sm: 1.6rem;
-    --fds-font-body-lh-xs: 1.2rem;
-    --fds-font-body-ls-baseline: 0rem;
-    --fds-font-body-ls-md: 0.009rem;
-    --fds-font-body-ls-sm: 0.008rem;
-    --fds-font-body-ls-xs: 0.008rem;
-    --fds-font-form-label-size: 1rem;
-    --fds-font-form-description-size: 0.875rem;
-    --fds-font-form-label-lh: 1.5rem;
-    --fds-font-form-description-lh: 1.625rem;
-    --fds-font-form-label-ls: 0.009rem;
-    --fds-font-form-description-ls: 0.008rem;
 }

package/theme/styles/ccube.css

@@ -11,7 +11,7 @@ PRIMITIVE COLOURS
     --fds-colour-brand-30: #4E2C53;
     --fds-colour-brand-40: #6B3E73;
     --fds-colour-brand-50: #8D5197;
-    --fds-colour-brand-60: #F39;
+    --fds-colour-brand-60: #FF3399;
     --fds-colour-brand-70: #FF88C4;
     --fds-colour-brand-80: #FFB3D9;
     --fds-colour-brand-90: #FFD4E9;
@@ -94,8 +94,8 @@ PRIMITIVE COLOURS
     --fds-colour-info-90: #CCE3F1;
     --fds-colour-info-95: #E3F1F8;
     --fds-colour-info-100: #F4FAFD;
-    --fds-colour-white: #FFF;
-    --fds-colour-black: #000;
+    --fds-colour-white: #FFFFFF;
+    --fds-colour-black: #000000;
     --fds-colour-primary-inverse: #FEAB10;
 
     /*
@@ -231,6 +231,76 @@ PRIMITIVE COLOURS
     /* focus ring */
     --fds-colour-focus-ring: var(--fds-colour-primary-50);
     --fds-colour-focus-ring-inverse: var(--fds-colour-white);
+
+    /* 
+    ========================================================================
+    COMPONENT TOKENS
+    ========================================================================
+    */
+
+    /* Button */
+    --fds-button-radius: var(--fds-radius-sm);
+    --fds-button-default-colour-bg: var(--fds-colour-bg-primary);
+    --fds-button-default-colour-bg-hover: var(--fds-colour-bg-primary-hover);
+    --fds-button-default-colour-text: var(--fds-colour-text-inverse);
+    --fds-button-secondary-colour-border: var(--fds-colour-border-primary);
+    --fds-button-secondary-colour-text: var(--fds-colour-text-primary);
+    --fds-button-light-colour-text: var(--fds-colour-text-primary);
+    --fds-button-link-colour-text: var(--fds-colour-text-primary);
+
+    /* Navbar */
+    --fds-navbar-full-height: 6rem;
+    --fds-navbar-full-logo-height: 2rem;
+    --fds-navbar-compressed-height: 4rem;
+    --fds-navbar-compressed-logo-height: 1.5rem;
+    --fds-navbar-mobile-height: 3.5rem;
+    --fds-navbar-mobile-logo-height: 1.5rem;
+    --fds-navbar-colour-bg: var(--fds-colour-bg);
+    --fds-navbar-colour-icon: var(--fds-colour-icon);
+    --fds-navbar-link-colour-text: var(--fds-colour-text);
+    --fds-navbar-link-colour-text-hover: var(--fds-colour-text-hover);
+    --fds-navbar-link-colour-text-selected-hover: var(
+        --fds-colour-text-selected-hover
+    );
+
+    /* Footer */
+    --fds-footer-colour-bg: var(--fds-colour-bg-strong);
+    --fds-footer-colour-text: var(--fds-colour-text);
+    --fds-footer-link-colour-text: var(--fds-colour-text);
+    --fds-footer-link-colour-text-hover: var(--fds-colour-text-hover);
+    --fds-footer-disclaimer-link-colour-text: var(--fds-colour-text);
+    --fds-footer-disclaimer-link-colour-text-hover: var(
+        --fds-colour-text-subtler
+    );
+
+    /* Animation */
+    --fds-animation-loading-dots-spinner-colour: var(--fds-colour-icon-primary);
+
+    /* 
+    ========================================================================
+    SHADOW
+    ========================================================================
+    */
+    --fds-shadow-xs-subtle: 0 0 4px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-xs-strong: 0 0 4px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
+    --fds-shadow-xs-focus-strong: 0 0 4px 1px
+        rgb(from var(--fds-colour-border-focus) r g b / 50%);
+    --fds-shadow-xs-error-strong: 0 0 4px 1px
+        rgb(from var(--fds-colour-border-error) r g b / 50%);
+    --fds-shadow-sm-subtle: 0 2px 4px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-sm-strong: 0 2px 4px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
+    --fds-shadow-md-subtle: 0 2px 8px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-md-strong: 0 2px 8px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
+    --fds-shadow-lg-subtle: 0 2px 12px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-lg-strong: 0 2px 12px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
 }
 
 /*

package/theme/styles/default.css

@@ -50,50 +50,6 @@
     --fds-breakpoint-margin-xl: 48px;
     --fds-breakpoint-margin-xxl: 48px;
 
-    /* 
-    ========================================================================
-    COMPONENT TOKENS
-    ========================================================================
-    */
-
-    /* Button */
-    --fds-button-radius: var(--fds-radius-sm);
-    --fds-button-default-colour-bg: var(--fds-colour-bg-primary);
-    --fds-button-default-colour-bg-hover: var(--fds-colour-bg-primary-hover);
-    --fds-button-default-colour-text: var(--fds-colour-text-inverse);
-    --fds-button-secondary-colour-border: var(--fds-colour-border-primary);
-    --fds-button-secondary-colour-text: var(--fds-colour-text-primary);
-    --fds-button-light-colour-text: var(--fds-colour-text-primary);
-    --fds-button-link-colour-text: var(--fds-colour-text-primary);
-
-    /* Animation */
-    --fds-animation-loading-dots-spinner-colour: var(--fds-colour-icon-primary);
-
-    /* Navbar */
-    --fds-navbar-full-height: 6rem;
-    --fds-navbar-full-logo-height: 2rem;
-    --fds-navbar-compressed-height: 4rem;
-    --fds-navbar-compressed-logo-height: 1.5rem;
-    --fds-navbar-mobile-height: 3.5rem;
-    --fds-navbar-mobile-logo-height: 1.5rem;
-    --fds-navbar-colour-bg: var(--fds-colour-bg);
-    --fds-navbar-colour-icon: var(--fds-colour-icon);
-    --fds-navbar-link-colour-text: var(--fds-colour-text);
-    --fds-navbar-link-colour-text-hover: var(--fds-colour-text-hover);
-    --fds-navbar-link-colour-text-selected-hover: var(
-        --fds-colour-text-selected-hover
-    );
-
-    /* Footer */
-    --fds-footer-colour-bg: var(--fds-colour-bg-strong);
-    --fds-footer-colour-text: var(--fds-colour-text);
-    --fds-footer-link-colour-text: var(--fds-colour-text);
-    --fds-footer-link-colour-text-hover: var(--fds-colour-text-hover);
-    --fds-footer-disclaimer-link-colour-text: var(--fds-colour-text);
-    --fds-footer-disclaimer-link-colour-text-hover: var(
-        --fds-colour-text-subtler
-    );
-
     /*
     ========================================================================
     FONT
@@ -194,30 +150,4 @@
     --fds-radius-md: 8px;
     --fds-radius-lg: 12px;
     --fds-radius-full: 9999px;
-
-    /* 
-    ========================================================================
-    SHADOW
-    ========================================================================
-    */
-    --fds-shadow-xs-subtle: 0 0 4px 1px
-        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
-    --fds-shadow-xs-strong: 0 0 4px 1px
-        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
-    --fds-shadow-xs-focus-strong: 0 0 4px 1px
-        rgb(from var(--fds-colour-border-focus) r g b / 50%);
-    --fds-shadow-xs-error-strong: 0 0 4px 1px
-        rgb(from var(--fds-colour-border-error) r g b / 50%);
-    --fds-shadow-sm-subtle: 0 2px 4px 0
-        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
-    --fds-shadow-sm-strong: 0 2px 4px 0
-        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
-    --fds-shadow-md-subtle: 0 2px 8px 0
-        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
-    --fds-shadow-md-strong: 0 2px 8px 0
-        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
-    --fds-shadow-lg-subtle: 0 2px 12px 1px
-        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
-    --fds-shadow-lg-strong: 0 2px 12px 1px
-        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
 }

package/theme/styles/imda.css

@@ -1,11 +1,11 @@
 @import url("./default.css");
 
-/*
-============================================================================
-PRIMITIVE COLOURS
-============================================================================
-*/
 [data-fds-theme="imda"] {
+    /*
+    ============================================================================
+    PRIMITIVE COLOURS
+    ============================================================================
+    */
     --fds-colour-brand-10: #370009;
     --fds-colour-brand-20: #4E000D;
     --fds-colour-brand-30: #640011;
@@ -40,7 +40,7 @@ PRIMITIVE COLOURS
     --fds-colour-secondary-95: #FFE9EE;
     --fds-colour-secondary-100: #FFF7F9;
     --fds-colour-neutral-10: #161616;
-    --fds-colour-neutral-20: #222;
+    --fds-colour-neutral-20: #222222;
     --fds-colour-neutral-30: #2D2D2D;
     --fds-colour-neutral-40: #3F3F3F;
     --fds-colour-neutral-50: #4B4B4B;
@@ -94,8 +94,8 @@ PRIMITIVE COLOURS
     --fds-colour-info-90: #CCE3F1;
     --fds-colour-info-95: #E3F1F8;
     --fds-colour-info-100: #F4FAFD;
-    --fds-colour-white: #FFF;
-    --fds-colour-black: #000;
+    --fds-colour-white: #FFFFFF;
+    --fds-colour-black: #000000;
     --fds-colour-primary-inverse: #FEAB10;
 
     /*
@@ -231,6 +231,124 @@ PRIMITIVE COLOURS
     /* focus ring */
     --fds-colour-focus-ring: var(--fds-colour-primary-50);
     --fds-colour-focus-ring-inverse: var(--fds-colour-white);
+
+    /* 
+    ========================================================================
+    COMPONENT TOKENS
+    ========================================================================
+    */
+
+    /* Button */
+    --fds-button-radius: var(--fds-radius-sm);
+    --fds-button-default-colour-bg: var(--fds-colour-bg-primary);
+    --fds-button-default-colour-bg-hover: var(--fds-colour-bg-primary-hover);
+    --fds-button-default-colour-text: var(--fds-colour-text-inverse);
+    --fds-button-secondary-colour-border: var(--fds-colour-border-primary);
+    --fds-button-secondary-colour-text: var(--fds-colour-text-primary);
+    --fds-button-light-colour-text: var(--fds-colour-text-primary);
+    --fds-button-link-colour-text: var(--fds-colour-text-primary);
+
+    /* Navbar */
+    --fds-navbar-full-height: 6rem;
+    --fds-navbar-full-logo-height: 2rem;
+    --fds-navbar-compressed-height: 4rem;
+    --fds-navbar-compressed-logo-height: 1.5rem;
+    --fds-navbar-mobile-height: 3.5rem;
+    --fds-navbar-mobile-logo-height: 1.5rem;
+    --fds-navbar-colour-bg: var(--fds-colour-bg);
+    --fds-navbar-colour-icon: var(--fds-colour-icon);
+    --fds-navbar-link-colour-text: var(--fds-colour-text);
+    --fds-navbar-link-colour-text-hover: var(--fds-colour-text-hover);
+    --fds-navbar-link-colour-text-selected-hover: var(
+        --fds-colour-text-selected-hover
+    );
+
+    /* Footer */
+    --fds-footer-colour-bg: var(--fds-colour-bg-strong);
+    --fds-footer-colour-text: var(--fds-colour-text);
+    --fds-footer-link-colour-text: var(--fds-colour-text);
+    --fds-footer-link-colour-text-hover: var(--fds-colour-text-hover);
+    --fds-footer-disclaimer-link-colour-text: var(--fds-colour-text);
+    --fds-footer-disclaimer-link-colour-text-hover: var(
+        --fds-colour-text-subtler
+    );
+
+    /* Animation */
+    --fds-animation-loading-dots-spinner-colour: var(--fds-colour-icon-primary);
+
+    /* 
+    ========================================================================
+    SHADOW
+    ========================================================================
+    */
+    --fds-shadow-xs-subtle: 0 0 4px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-xs-strong: 0 0 4px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
+    --fds-shadow-xs-focus-strong: 0 0 4px 1px
+        rgb(from var(--fds-colour-border-focus) r g b / 50%);
+    --fds-shadow-xs-error-strong: 0 0 4px 1px
+        rgb(from var(--fds-colour-border-error) r g b / 50%);
+    --fds-shadow-sm-subtle: 0 2px 4px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-sm-strong: 0 2px 4px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
+    --fds-shadow-md-subtle: 0 2px 8px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-md-strong: 0 2px 8px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
+    --fds-shadow-lg-subtle: 0 2px 12px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-lg-strong: 0 2px 12px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
+
+    /*
+    ============================================================================
+    FONT
+    ============================================================================
+    */
+    --fds-font-variant: no-common-ligatures;
+    --fds-font-heading-size-xxl: 3rem;
+    --fds-font-heading-size-xl: 2.5rem;
+    --fds-font-heading-size-lg: 2rem;
+    --fds-font-heading-size-md: 1.625rem;
+    --fds-font-heading-size-sm: 1.375rem;
+    --fds-font-heading-size-xs: 1.125rem;
+    --fds-font-heading-lh-xxl: 3.5rem;
+    --fds-font-heading-lh-xl: 3rem;
+    --fds-font-heading-lh-lg: 2.5rem;
+    --fds-font-heading-lh-md: 2.25rem;
+    --fds-font-heading-lh-sm: 1.75rem;
+    --fds-font-heading-lh-xs: 1.625rem;
+    --fds-font-heading-ls-xxl: -0.035rem;
+    --fds-font-heading-ls-xl: -0.02rem;
+    --fds-font-heading-ls-lg: -0.02rem;
+    --fds-font-heading-ls-md: 0rem;
+    --fds-font-heading-ls-sm: 0rem;
+    --fds-font-heading-ls-xs: 0rem;
+    --fds-font-weight-light: 300;
+    --fds-font-weight-regular: 400;
+    --fds-font-weight-semibold: 600;
+    --fds-font-weight-bold: 700;
+    --fds-font-family: "Montserrat";
+    --fds-font-body-size-baseline: 1.125rem;
+    --fds-font-body-size-md: 1rem;
+    --fds-font-body-size-sm: 0.875rem;
+    --fds-font-body-size-xs: 0.75rem;
+    --fds-font-body-lh-baseline: 1.625rem;
+    --fds-font-body-lh-md: 1.5rem;
+    --fds-font-body-lh-sm: 1.625rem;
+    --fds-font-body-lh-xs: 1.25rem;
+    --fds-font-body-ls-baseline: 0rem;
+    --fds-font-body-ls-md: 0.009rem;
+    --fds-font-body-ls-sm: 0.008rem;
+    --fds-font-body-ls-xs: 0.008rem;
+    --fds-font-form-label-size: 1rem;
+    --fds-font-form-description-size: 0.875rem;
+    --fds-font-form-label-lh: 1.5rem;
+    --fds-font-form-description-lh: 1.625rem;
+    --fds-font-form-label-ls: 0.009rem;
+    --fds-font-form-description-ls: 0.008rem;
 }
 
 /*
@@ -366,52 +484,4 @@ SEMANTIC COLOURS - DARK MODE
     /* focus ring - adjusted for dark mode */
     --fds-colour-focus-ring: var(--fds-colour-primary-60);
     --fds-colour-focus-ring-inverse: var(--fds-colour-black);
-
-    /*
-    ============================================================================
-    FONT
-    ============================================================================
-    */
-    --fds-font-variant: no-common-ligatures;
-    --fds-font-heading-size-xxl: 3rem;
-    --fds-font-heading-size-xl: 2.5rem;
-    --fds-font-heading-size-lg: 2rem;
-    --fds-font-heading-size-md: 1.625rem;
-    --fds-font-heading-size-sm: 1.375rem;
-    --fds-font-heading-size-xs: 1.125rem;
-    --fds-font-heading-lh-xxl: 3.5rem;
-    --fds-font-heading-lh-xl: 3rem;
-    --fds-font-heading-lh-lg: 2.5rem;
-    --fds-font-heading-lh-md: 2.25rem;
-    --fds-font-heading-lh-sm: 1.75rem;
-    --fds-font-heading-lh-xs: 1.625rem;
-    --fds-font-heading-ls-xxl: -0.035rem;
-    --fds-font-heading-ls-xl: -0.02rem;
-    --fds-font-heading-ls-lg: -0.02rem;
-    --fds-font-heading-ls-md: 0rem;
-    --fds-font-heading-ls-sm: 0rem;
-    --fds-font-heading-ls-xs: 0rem;
-    --fds-font-weight-light: 300;
-    --fds-font-weight-regular: 400;
-    --fds-font-weight-semibold: 600;
-    --fds-font-weight-bold: 700;
-    --fds-font-family: "Montserrat";
-    --fds-font-body-size-baseline: 1.125rem;
-    --fds-font-body-size-md: 1rem;
-    --fds-font-body-size-sm: 0.875rem;
-    --fds-font-body-size-xs: 0.75rem;
-    --fds-font-body-lh-baseline: 1.625rem;
-    --fds-font-body-lh-md: 1.5rem;
-    --fds-font-body-lh-sm: 1.625rem;
-    --fds-font-body-lh-xs: 1.25rem;
-    --fds-font-body-ls-baseline: 0rem;
-    --fds-font-body-ls-md: 0.009rem;
-    --fds-font-body-ls-sm: 0.008rem;
-    --fds-font-body-ls-xs: 0.008rem;
-    --fds-font-form-label-size: 1rem;
-    --fds-font-form-description-size: 0.875rem;
-    --fds-font-form-label-lh: 1.5rem;
-    --fds-font-form-description-lh: 1.625rem;
-    --fds-font-form-label-ls: 0.009rem;
-    --fds-font-form-description-ls: 0.008rem;
 }

package/theme/styles/lifesg.css

@@ -94,8 +94,8 @@ PRIMITIVE COLOURS
     --fds-colour-info-90: #CCE3F1;
     --fds-colour-info-95: #E3F1F8;
     --fds-colour-info-100: #F4FAFD;
-    --fds-colour-white: #FFF;
-    --fds-colour-black: #000;
+    --fds-colour-white: #FFFFFF;
+    --fds-colour-black: #000000;
     --fds-colour-primary-inverse: #FEAB10;
 
     /*
@@ -231,6 +231,76 @@ PRIMITIVE COLOURS
     /* focus ring */
     --fds-colour-focus-ring: var(--fds-colour-primary-50);
     --fds-colour-focus-ring-inverse: var(--fds-colour-white);
+
+    /* 
+    ========================================================================
+    COMPONENT TOKENS
+    ========================================================================
+    */
+
+    /* Button */
+    --fds-button-radius: var(--fds-radius-sm);
+    --fds-button-default-colour-bg: var(--fds-colour-bg-primary);
+    --fds-button-default-colour-bg-hover: var(--fds-colour-bg-primary-hover);
+    --fds-button-default-colour-text: var(--fds-colour-text-inverse);
+    --fds-button-secondary-colour-border: var(--fds-colour-border-primary);
+    --fds-button-secondary-colour-text: var(--fds-colour-text-primary);
+    --fds-button-light-colour-text: var(--fds-colour-text-primary);
+    --fds-button-link-colour-text: var(--fds-colour-text-primary);
+
+    /* Navbar */
+    --fds-navbar-full-height: 6rem;
+    --fds-navbar-full-logo-height: 2rem;
+    --fds-navbar-compressed-height: 4rem;
+    --fds-navbar-compressed-logo-height: 1.5rem;
+    --fds-navbar-mobile-height: 3.5rem;
+    --fds-navbar-mobile-logo-height: 1.5rem;
+    --fds-navbar-colour-bg: var(--fds-colour-bg);
+    --fds-navbar-colour-icon: var(--fds-colour-icon);
+    --fds-navbar-link-colour-text: var(--fds-colour-text);
+    --fds-navbar-link-colour-text-hover: var(--fds-colour-text-hover);
+    --fds-navbar-link-colour-text-selected-hover: var(
+        --fds-colour-text-selected-hover
+    );
+
+    /* Footer */
+    --fds-footer-colour-bg: var(--fds-colour-bg-strong);
+    --fds-footer-colour-text: var(--fds-colour-text);
+    --fds-footer-link-colour-text: var(--fds-colour-text);
+    --fds-footer-link-colour-text-hover: var(--fds-colour-text-hover);
+    --fds-footer-disclaimer-link-colour-text: var(--fds-colour-text);
+    --fds-footer-disclaimer-link-colour-text-hover: var(
+        --fds-colour-text-subtler
+    );
+
+    /* Animation: */
+    --fds-animation-loading-dots-spinner-colour: var(--fds-colour-brand-50);
+
+    /* 
+    ========================================================================
+    SHADOW
+    ========================================================================
+    */
+    --fds-shadow-xs-subtle: 0 0 4px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-xs-strong: 0 0 4px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
+    --fds-shadow-xs-focus-strong: 0 0 4px 1px
+        rgb(from var(--fds-colour-border-focus) r g b / 50%);
+    --fds-shadow-xs-error-strong: 0 0 4px 1px
+        rgb(from var(--fds-colour-border-error) r g b / 50%);
+    --fds-shadow-sm-subtle: 0 2px 4px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-sm-strong: 0 2px 4px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
+    --fds-shadow-md-subtle: 0 2px 8px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-md-strong: 0 2px 8px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
+    --fds-shadow-lg-subtle: 0 2px 12px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-lg-strong: 0 2px 12px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
 }
 
 /* 
@@ -383,9 +453,6 @@ SEMANTIC COLOURS - DARK MODE
     --fds-button-light-colour-text: var(--fds-colour-text-primary);
     --fds-button-link-colour-text: var(--fds-colour-text-primary);
 
-    /* Animation: */
-    --fds-animation-loading-dots-spinner-colour: var(--fds-colour-brand-50);
-
     /* Navbar: */
     --fds-navbar-full-height: 6rem;
     --fds-navbar-full-logo-height: 2rem;