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

package/theme/styles/pa.css

@@ -1,11 +1,117 @@
-@import url("./default.css");
 
-/*
-============================================================================
-PRIMITIVE COLORS
-============================================================================
-*/
+@layer fds {
+:root {
+    /* 
+    ========================================================================
+    BORDER
+    ========================================================================
+    */
+    --fds-border-width-005: 0.5px;
+    --fds-border-width-010: 1px;
+    --fds-border-width-020: 2px;
+    --fds-border-width-040: 4px;
+    --fds-border-style-solid: solid;
+
+    /* 
+    ========================================================================
+    BREAKPOINT
+    ========================================================================
+    */
+    --fds-breakpoint-xxs-min: 0;
+    --fds-breakpoint-xxs-max: 320px;
+    --fds-breakpoint-xs-min: 321px;
+    --fds-breakpoint-xs-max: 375px;
+    --fds-breakpoint-sm-min: 376px;
+    --fds-breakpoint-sm-max: 480px;
+    --fds-breakpoint-md-min: 481px;
+    --fds-breakpoint-md-max: 768px;
+    --fds-breakpoint-lg-min: 769px;
+    --fds-breakpoint-lg-max: 1200px;
+    --fds-breakpoint-xl-min: 1201px;
+    --fds-breakpoint-xl-max: 1440px;
+    --fds-breakpoint-xxl-min: 1441px;
+    --fds-breakpoint-column-xxs: 8;
+    --fds-breakpoint-column-xs: 8;
+    --fds-breakpoint-column-sm: 8;
+    --fds-breakpoint-column-md: 8;
+    --fds-breakpoint-column-lg: 12;
+    --fds-breakpoint-column-xl: 12;
+    --fds-breakpoint-column-xxl: 12;
+    --fds-breakpoint-gutter-xxs: 16px;
+    --fds-breakpoint-gutter-xs: 16px;
+    --fds-breakpoint-gutter-sm: 16px;
+    --fds-breakpoint-gutter-md: 16px;
+    --fds-breakpoint-gutter-lg: 32px;
+    --fds-breakpoint-gutter-xl: 32px;
+    --fds-breakpoint-gutter-xxl: 32px;
+    --fds-breakpoint-margin-xxs: 24px;
+    --fds-breakpoint-margin-xs: 24px;
+    --fds-breakpoint-margin-sm: 24px;
+    --fds-breakpoint-margin-md: 24px;
+    --fds-breakpoint-margin-lg: 48px;
+    --fds-breakpoint-margin-xl: 48px;
+    --fds-breakpoint-margin-xxl: 48px;
+
+    /* 
+    ========================================================================
+    SPACING
+    ========================================================================
+    */
+    --fds-spacing-0: 0;
+    --fds-spacing-4: 4px;
+    --fds-spacing-8: 8px;
+    --fds-spacing-12: 12px;
+    --fds-spacing-16: 16px;
+    --fds-spacing-20: 20px;
+    --fds-spacing-24: 24px;
+    --fds-spacing-32: 32px;
+    --fds-spacing-40: 40px;
+    --fds-spacing-48: 48px;
+    --fds-spacing-64: 64px;
+    --fds-spacing-72: 72px;
+    --fds-layout-xs: 8px;
+    --fds-layout-sm: 16px;
+    --fds-layout-md: 24px;
+    --fds-layout-lg: 32px;
+    --fds-layout-xl: 48px;
+    --fds-layout-xxl: 64px;
+    --fds-layout-xxxl: 128px;
+
+    /* 
+    ========================================================================
+    MOTION
+    ========================================================================
+    */
+    --fds-motion-duration-150: 150ms;
+    --fds-motion-duration-250: 250ms;
+    --fds-motion-duration-350: 350ms;
+    --fds-motion-duration-500: 500ms;
+    --fds-motion-duration-800: 800ms;
+    --fds-motion-duration-1000: 1000ms;
+    --fds-motion-timing-ease-default: cubic-bezier(0.45, 0.05, 0.55, 0.95);
+    --fds-motion-timing-ease-standard: cubic-bezier(0.86, 0, 0.07, 1);
+    --fds-motion-timing-ease-entrance: cubic-bezier(0.18, 0.13, 0, 1);
+    --fds-motion-timing-ease-exit: cubic-bezier(1, 0, 0.8, 0.85);
+
+    /* 
+    ========================================================================
+    RADIUS
+    ========================================================================
+    */
+    --fds-radius-none: 0;
+    --fds-radius-xs: 2px;
+    --fds-radius-sm: 4px;
+    --fds-radius-md: 8px;
+    --fds-radius-lg: 12px;
+    --fds-radius-full: 9999px;
+}
+
 [data-fds-theme="pa"] {
+    /* 
+    ============================================================================
+    PRIMITIVE COLOURS
+    ============================================================================
+    */
     --fds-colour-brand-10: #881317;
     --fds-colour-brand-20: #B5191E;
     --fds-colour-brand-30: #B5040A;
@@ -17,17 +123,17 @@ PRIMITIVE COLORS
     --fds-colour-brand-90: #F3CCCF;
     --fds-colour-brand-95: #F9E6E7;
     --fds-colour-brand-100: #FCF2F3;
-    --fds-colour-primary-10: #000;
+    --fds-colour-primary-10: #000000;
     --fds-colour-primary-20: #191919;
-    --fds-colour-primary-30: #333;
+    --fds-colour-primary-30: #333333;
     --fds-colour-primary-40: #4D4D4D;
-    --fds-colour-primary-50: #666;
+    --fds-colour-primary-50: #666666;
     --fds-colour-primary-60: #808080;
-    --fds-colour-primary-70: #999;
+    --fds-colour-primary-70: #999999;
     --fds-colour-primary-80: #B3B3B3;
     --fds-colour-primary-90: #E6E6E6;
     --fds-colour-primary-95: #F7F7F7;
-    --fds-colour-primary-100: #FFF;
+    --fds-colour-primary-100: #FFFFFF;
     --fds-colour-secondary-10: #19151D;
     --fds-colour-secondary-20: #2B2533;
     --fds-colour-secondary-30: #3E3649;
@@ -39,17 +145,17 @@ PRIMITIVE COLORS
     --fds-colour-secondary-90: #E1DEE4;
     --fds-colour-secondary-95: #EFEEF1;
     --fds-colour-secondary-100: #F9F8F9;
-    --fds-colour-neutral-10: #000;
+    --fds-colour-neutral-10: #000000;
     --fds-colour-neutral-20: #191919;
-    --fds-colour-neutral-30: #333;
+    --fds-colour-neutral-30: #333333;
     --fds-colour-neutral-40: #4D4D4D;
-    --fds-colour-neutral-50: #666;
+    --fds-colour-neutral-50: #666666;
     --fds-colour-neutral-60: #808080;
-    --fds-colour-neutral-70: #999;
+    --fds-colour-neutral-70: #999999;
     --fds-colour-neutral-80: #B3B3B3;
     --fds-colour-neutral-90: #E6E6E6;
     --fds-colour-neutral-95: #F7F7F7;
-    --fds-colour-neutral-100: #FFF;
+    --fds-colour-neutral-100: #FFFFFF;
     --fds-colour-success-10: #081A0F;
     --fds-colour-success-20: #0E2D1B;
     --fds-colour-success-30: #154126;
@@ -94,8 +200,8 @@ PRIMITIVE COLORS
     --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;
 
     /*
@@ -110,7 +216,11 @@ PRIMITIVE COLORS
     --fds-colour-text-subtler: var(--fds-colour-neutral-50);
     --fds-colour-text-subtlest: var(--fds-colour-neutral-70);
     --fds-colour-text-primary: var(--fds-colour-neutral-10);
+    --fds-colour-text-primary-strong: var(--fds-colour-neutral-10);
     --fds-colour-text-primary-strongest: var(--fds-colour-neutral-10);
+    --fds-colour-text-brand: var(--fds-colour-brand-50);
+    --fds-colour-text-secondary: var(--fds-colour-secondary-50);
+    --fds-colour-text-secondary-subtle: var(--fds-colour-secondary-60);
     --fds-colour-text-hover: var(--fds-colour-neutral-70);
     --fds-colour-text-selected: var(--fds-colour-neutral-20);
     --fds-colour-text-selected-hover: var(--fds-colour-neutral-10);
@@ -131,6 +241,9 @@ PRIMITIVE COLORS
     --fds-colour-icon-primary: var(--fds-colour-neutral-10);
     --fds-colour-icon-primary-subtle: var(--fds-colour-neutral-30);
     --fds-colour-icon-primary-subtlest: var(--fds-colour-neutral-60);
+    --fds-colour-icon-brand: var(--fds-colour-brand-50);
+    --fds-colour-icon-secondary: var(--fds-colour-secondary-50);
+    --fds-colour-icon-secondary-subtle: var(--fds-colour-secondary-60);
     --fds-colour-icon-hover: var(--fds-colour-neutral-70);
     --fds-colour-icon-selected: var(--fds-colour-brand-20);
     --fds-colour-icon-selected-hover: var(--fds-colour-brand-10);
@@ -150,6 +263,7 @@ PRIMITIVE COLORS
     --fds-colour-border-strong: var(--fds-colour-neutral-30);
     --fds-colour-border-stronger: var(--fds-colour-neutral-20);
     --fds-colour-border-primary: var(--fds-colour-neutral-40);
+    --fds-colour-border-primary-strong: var(--fds-colour-neutral-30);
     --fds-colour-border-primary-subtle: var(--fds-colour-neutral-60);
     --fds-colour-border-hover: var(--fds-colour-neutral-80);
     --fds-colour-border-hover-strong: var(--fds-colour-neutral-10);
@@ -210,11 +324,17 @@ PRIMITIVE COLORS
     --fds-colour-bg-inverse-subtlest: var(--fds-colour-neutral-80);
     --fds-colour-bg-inverse-hover: var(--fds-colour-neutral-30);
     --fds-colour-bg-primary: var(--fds-colour-brand-20);
+    --fds-colour-bg-primary-strong: var(--fds-colour-brand-10);
     --fds-colour-bg-primary-subtle: var(--fds-colour-brand-60);
     --fds-colour-bg-primary-subtler: var(--fds-colour-brand-80);
     --fds-colour-bg-primary-subtlest: var(--fds-colour-brand-100);
     --fds-colour-bg-available: var(--fds-colour-success-60);
+    --fds-colour-bg-secondary: var(--fds-colour-secondary-50);
+    --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-60);
+    --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-95);
+    --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-100);
     --fds-colour-bg-primary-hover: var(--fds-colour-brand-10);
+    --fds-colour-bg-primary-strong-hover: var(--fds-colour-brand-10);
     --fds-colour-bg-primary-subtlest-hover: var(--fds-colour-brand-80);
     --fds-colour-bg-primary-subtlest-selected: var(--fds-colour-brand-40);
 
@@ -232,50 +352,6 @@ PRIMITIVE COLORS
     --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-colour-radius-full);
-    --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-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
@@ -304,7 +380,8 @@ PRIMITIVE COLORS
     --fds-font-weight-regular: 400;
     --fds-font-weight-semibold: 600;
     --fds-font-weight-bold: 700;
-    --fds-font-family: "Lato";
+    --fds-font-family-heading: "Lato";
+    --fds-font-family-body: "Lato";
     --fds-font-body-size-baseline: 1rem;
     --fds-font-body-size-md: 0.875rem;
     --fds-font-body-size-sm: 0.75rem;
@@ -323,4 +400,229 @@ PRIMITIVE COLORS
     --fds-font-form-description-lh: 1.6rem;
     --fds-font-form-label-ls: 0.014rem;
     --fds-font-form-description-ls: 0.012rem;
+
+    /* 
+    ============================================================================
+    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%);
+
+    /* 
+    ============================================================================
+    COMPONENT TOKENS
+    ============================================================================
+    */
+
+    /* Button */
+    --fds-button-radius: var(--fds-radius-full);
+    --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-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);
+}
+
+[data-fds-theme="pa"][data-fds-theme-mode="dark"] {
+    /*
+    ============================================================================
+    SEMANTIC COLOURS - DARK MODE
+    ============================================================================
+    */
+    /* text */
+    --fds-colour-text: var(--fds-colour-neutral-100);
+    --fds-colour-text-subtle: var(--fds-colour-neutral-80);
+    --fds-colour-text-subtler: var(--fds-colour-neutral-60);
+    --fds-colour-text-subtlest: var(--fds-colour-neutral-50);
+    --fds-colour-text-primary: var(--fds-colour-primary-60);
+    --fds-colour-text-primary-strong: var(--fds-colour-primary-70);
+    --fds-colour-text-primary-strongest: var(--fds-colour-primary-90);
+    --fds-colour-text-brand: var(--fds-colour-brand-50);
+    --fds-colour-text-secondary: var(--fds-colour-secondary-60);
+    --fds-colour-text-secondary-subtle: var(--fds-colour-secondary-50);
+    --fds-colour-text-hover: var(--fds-colour-primary-70);
+    --fds-colour-text-selected: var(--fds-colour-primary-60);
+    --fds-colour-text-selected-hover: var(--fds-colour-primary-70);
+    --fds-colour-text-disabled: var(--fds-colour-neutral-60);
+    --fds-colour-text-disabled-subtle: var(--fds-colour-neutral-50);
+    --fds-colour-text-disabled-subtlest: var(--fds-colour-neutral-30);
+    --fds-colour-text-selected-disabled: var(--fds-colour-neutral-90);
+    --fds-colour-text-success: var(--fds-colour-success-70);
+    --fds-colour-text-warning: var(--fds-colour-warning-70);
+    --fds-colour-text-error: var(--fds-colour-error-70);
+    --fds-colour-text-info: var(--fds-colour-info-70);
+    --fds-colour-text-inverse: var(--fds-colour-black);
+    /* icon */
+    --fds-colour-icon: var(--fds-colour-neutral-60);
+    --fds-colour-icon-subtle: var(--fds-colour-neutral-50);
+    --fds-colour-icon-strongest: var(--fds-colour-neutral-90);
+    --fds-colour-icon-primary: var(--fds-colour-primary-60);
+    --fds-colour-icon-primary-subtle: var(--fds-colour-primary-50);
+    --fds-colour-icon-primary-subtlest: var(--fds-colour-primary-40);
+    --fds-colour-icon-brand: var(--fds-colour-brand-50);
+    --fds-colour-icon-secondary: var(--fds-colour-secondary-60);
+    --fds-colour-icon-secondary-subtle: var(--fds-colour-secondary-50);
+    --fds-colour-icon-hover: var(--fds-colour-primary-70);
+    --fds-colour-icon-selected: var(--fds-colour-primary-60);
+    --fds-colour-icon-selected-hover: var(--fds-colour-primary-70);
+    --fds-colour-icon-disabled: var(--fds-colour-neutral-60);
+    --fds-colour-icon-disabled-subtle: var(--fds-colour-neutral-50);
+    --fds-colour-icon-selected-disabled: var(--fds-colour-neutral-50);
+    --fds-colour-icon-success: var(--fds-colour-success-60);
+    --fds-colour-icon-warning: var(--fds-colour-warning-50);
+    --fds-colour-icon-error: var(--fds-colour-error-60);
+    --fds-colour-icon-error-strong: var(--fds-colour-error-70);
+    --fds-colour-icon-info: var(--fds-colour-info-60);
+    --fds-colour-icon-inverse: var(--fds-colour-black);
+    --fds-colour-icon-primary-inverse: var(--fds-colour-primary-inverse);
+    /* border - adjusted for dark mode */
+    --fds-colour-border: var(--fds-colour-neutral-20);
+    --fds-colour-border-strong: var(--fds-colour-neutral-40);
+    --fds-colour-border-stronger: var(--fds-colour-neutral-60);
+    --fds-colour-border-primary: var(--fds-colour-primary-60);
+    --fds-colour-border-primary-strong: var(--fds-colour-primary-70);
+    --fds-colour-border-primary-subtle: var(--fds-colour-primary-50);
+    --fds-colour-border-hover: var(--fds-colour-primary-20);
+    --fds-colour-border-hover-strong: var(--fds-colour-primary-50);
+    --fds-colour-border-selected: var(--fds-colour-primary-60);
+    --fds-colour-border-selected-subtle: var(--fds-colour-primary-40);
+    --fds-colour-border-selected-subtlest: var(--fds-colour-primary-20);
+    --fds-colour-border-selected-hover: var(--fds-colour-primary-70);
+    --fds-colour-border-focus: var(--fds-colour-primary-50);
+    --fds-colour-border-focus-strong: var(--fds-colour-primary-60);
+    --fds-colour-border-disabled: var(--fds-colour-neutral-20);
+    --fds-colour-border-selected-disabled: var(--fds-colour-neutral-40);
+    --fds-colour-border-success: var(--fds-colour-success-50);
+    --fds-colour-border-warning: var(--fds-colour-warning-50);
+    --fds-colour-border-error: var(--fds-colour-error-50);
+    --fds-colour-border-error-focus: var(--fds-colour-error-50);
+    --fds-colour-border-error-focus-strong: var(--fds-colour-error-70);
+    --fds-colour-border-error-strong: var(--fds-colour-error-70);
+    --fds-colour-border-info: var(--fds-colour-info-50);
+    /* background - dark backgrounds */
+    --fds-colour-bg: var(--fds-colour-black);
+    --fds-colour-bg-strong: var(--fds-colour-neutral-10);
+    --fds-colour-bg-stronger: var(--fds-colour-neutral-20);
+    --fds-colour-bg-strongest: var(--fds-colour-neutral-20);
+    --fds-colour-bg-hover: var(--fds-colour-primary-20);
+    --fds-colour-bg-hover-strong: var(--fds-colour-primary-20);
+    --fds-colour-bg-hover-subtle: var(--fds-colour-primary-10);
+    --fds-colour-bg-hover-neutral: var(--fds-colour-neutral-10);
+    --fds-colour-bg-hover-neutral-strong: var(--fds-colour-neutral-20);
+    --fds-colour-bg-selected: var(--fds-colour-primary-20);
+    --fds-colour-bg-selected-hover: var(--fds-colour-primary-20);
+    --fds-colour-bg-selected-strong: var(--fds-colour-primary-20);
+    --fds-colour-bg-selected-stronger: var(--fds-colour-primary-40);
+    --fds-colour-bg-selected-strongest: var(--fds-colour-primary-60);
+    --fds-colour-bg-selected-strongest-hover: var(--fds-colour-primary-70);
+    --fds-colour-bg-disabled: var(--fds-colour-neutral-20);
+    --fds-colour-bg-selected-disabled: var(--fds-colour-neutral-20);
+    --fds-colour-bg-selected-stronger-disabled: var(--fds-colour-neutral-40);
+    --fds-colour-bg-success: var(--fds-colour-success-10);
+    --fds-colour-bg-success-hover: var(--fds-colour-success-20);
+    --fds-colour-bg-success-strong: var(--fds-colour-success-60);
+    --fds-colour-bg-success-strong-hover: var(--fds-colour-success-70);
+    --fds-colour-bg-warning: var(--fds-colour-warning-10);
+    --fds-colour-bg-warning-hover: var(--fds-colour-warning-20);
+    --fds-colour-bg-warning-strong: var(--fds-colour-warning-60);
+    --fds-colour-bg-warning-strong-hover: var(--fds-colour-warning-70);
+    --fds-colour-bg-info: var(--fds-colour-info-10);
+    --fds-colour-bg-info-hover: var(--fds-colour-info-20);
+    --fds-colour-bg-info-strong: var(--fds-colour-info-60);
+    --fds-colour-bg-info-strong-hover: var(--fds-colour-info-70);
+    --fds-colour-bg-error: var(--fds-colour-error-10);
+    --fds-colour-bg-error-hover: var(--fds-colour-error-20);
+    --fds-colour-bg-error-strong: var(--fds-colour-error-60);
+    --fds-colour-bg-error-strong-hover: var(--fds-colour-error-70);
+    --fds-colour-bg-inverse: var(--fds-colour-neutral-90);
+    --fds-colour-bg-inverse-subtle: var(--fds-colour-neutral-80);
+    --fds-colour-bg-inverse-subtler: var(--fds-colour-neutral-60);
+    --fds-colour-bg-inverse-subtlest: var(--fds-colour-neutral-50);
+    --fds-colour-bg-inverse-hover: var(--fds-colour-neutral-70);
+    --fds-colour-bg-primary: var(--fds-colour-primary-60);
+    --fds-colour-bg-primary-strong: var(--fds-colour-primary-70);
+    --fds-colour-bg-primary-subtle: var(--fds-colour-primary-50);
+    --fds-colour-bg-primary-subtler: var(--fds-colour-primary-20);
+    --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-10);
+    --fds-colour-bg-available: #185339;
+    --fds-colour-bg-secondary: var(--fds-colour-secondary-60);
+    --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-50);
+    --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-20);
+    --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-10);
+    --fds-colour-bg-primary-hover: var(--fds-colour-primary-70);
+    --fds-colour-bg-primary-strong-hover: var(--fds-colour-primary-80);
+    --fds-colour-bg-primary-subtlest-hover: var(--fds-colour-primary-20);
+    --fds-colour-bg-primary-subtlest-selected: var(--fds-colour-primary-20);
+    /* overlay - lighter overlays for dark backgrounds */
+    --fds-colour-overlay-strong: rgb(78 78 78 / 80%);
+    --fds-colour-overlay-subtle: rgb(78 78 78 / 50%);
+    /* hyperlink - adjusted for dark mode */
+    --fds-colour-hyperlink: var(--fds-colour-primary-60);
+    --fds-colour-hyperlink-hover: var(--fds-colour-primary-70);
+    --fds-colour-hyperlink-visited: var(--fds-colour-primary-70);
+    --fds-colour-hyperlink-inverse: var(--fds-colour-primary-inverse);
+    /* focus ring - adjusted for dark mode */
+    --fds-colour-focus-ring: var(--fds-colour-primary-60);
+    --fds-colour-focus-ring-inverse: var(--fds-colour-black);
 }
+
+}