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

package/theme/styles/smgs.css

@@ -0,0 +1,516 @@
+@import url("./default.css");
+
+/*
+============================================================================
+PRIMITIVE COLOURS
+============================================================================
+*/
+[data-fds-theme="smgs"] {
+    --fds-colour-brand-10: #0B181F;
+    --fds-colour-brand-20: #132B35;
+    --fds-colour-brand-30: #1B3D4C;
+    --fds-colour-brand-40: #25546A;
+    --fds-colour-brand-50: #306F8B;
+    --fds-colour-brand-60: #459EC6;
+    --fds-colour-brand-70: #70B5D3;
+    --fds-colour-brand-80: #93C7DE;
+    --fds-colour-brand-90: #CBE4EF;
+    --fds-colour-brand-95: #EBF4F9;
+    --fds-colour-brand-100: #F3F9FB;
+    --fds-colour-primary-10: #0B181F;
+    --fds-colour-primary-20: #132B35;
+    --fds-colour-primary-30: #1B3D4C;
+    --fds-colour-primary-40: #25546A;
+    --fds-colour-primary-50: #306F8B;
+    --fds-colour-primary-60: #459EC6;
+    --fds-colour-primary-70: #70B5D3;
+    --fds-colour-primary-80: #93C7DE;
+    --fds-colour-primary-90: #CBE4EF;
+    --fds-colour-primary-95: #EBF4F9;
+    --fds-colour-primary-100: #F3F9FB;
+    --fds-colour-secondary-10: #1E1500;
+    --fds-colour-secondary-20: #352500;
+    --fds-colour-secondary-30: #4B3500;
+    --fds-colour-secondary-40: #674A00;
+    --fds-colour-secondary-50: #896100;
+    --fds-colour-secondary-60: #C28A00;
+    --fds-colour-secondary-70: #E1A100;
+    --fds-colour-secondary-80: #FAB200;
+    --fds-colour-secondary-90: #FDDD8E;
+    --fds-colour-secondary-95: #FEF2D5;
+    --fds-colour-secondary-100: #FFF9EA;
+    --fds-colour-neutral-10: #161616;
+    --fds-colour-neutral-20: #282828;
+    --fds-colour-neutral-30: #393939;
+    --fds-colour-neutral-40: #4E4E4E;
+    --fds-colour-neutral-50: #686868;
+    --fds-colour-neutral-60: #969492;
+    --fds-colour-neutral-70: #AFACA7;
+    --fds-colour-neutral-80: #C2BFBB;
+    --fds-colour-neutral-90: #E4DFD9;
+    --fds-colour-neutral-95: #F4F1EF;
+    --fds-colour-neutral-100: #F9F8F7;
+    --fds-colour-success-10: #071913;
+    --fds-colour-success-20: #0D2D22;
+    --fds-colour-success-30: #134031;
+    --fds-colour-success-40: #1A5944;
+    --fds-colour-success-50: #237559;
+    --fds-colour-success-60: #31A77E;
+    --fds-colour-success-70: #39C293;
+    --fds-colour-success-80: #67D2AD;
+    --fds-colour-success-90: #B8EAD9;
+    --fds-colour-success-95: #E3F7F0;
+    --fds-colour-success-100: #F1FBF8;
+    --fds-colour-warning-10: #211403;
+    --fds-colour-warning-20: #3B2205;
+    --fds-colour-warning-30: #543108;
+    --fds-colour-warning-40: #73440B;
+    --fds-colour-warning-50: #98590E;
+    --fds-colour-warning-60: #D38221;
+    --fds-colour-warning-70: #DEA057;
+    --fds-colour-warning-80: #E5B77F;
+    --fds-colour-warning-90: #F3DDC3;
+    --fds-colour-warning-95: #FAF2E8;
+    --fds-colour-warning-100: #FDF9F4;
+    --fds-colour-error-10: #2E0A0C;
+    --fds-colour-error-20: #4F1114;
+    --fds-colour-error-30: #70171C;
+    --fds-colour-error-40: #972026;
+    --fds-colour-error-50: #C62932;
+    --fds-colour-error-60: #F7636B;
+    --fds-colour-error-70: #F98D93;
+    --fds-colour-error-80: #FAAAAE;
+    --fds-colour-error-90: #FDD7D9;
+    --fds-colour-error-95: #FEF0F1;
+    --fds-colour-error-100: #FFF6F6;
+    --fds-colour-info-10: #0F1627;
+    --fds-colour-info-20: #1B2745;
+    --fds-colour-info-30: #273763;
+    --fds-colour-info-40: #354D88;
+    --fds-colour-info-50: #4665B3;
+    --fds-colour-info-60: #6A90F6;
+    --fds-colour-info-70: #8DAAF8;
+    --fds-colour-info-80: #A7BEFA;
+    --fds-colour-info-90: #D4DFFD;
+    --fds-colour-info-95: #EEF3FE;
+    --fds-colour-info-100: #F5F8FE;
+    --fds-colour-white: #FFFFFF;
+    --fds-colour-black: #000000;
+    --fds-colour-primary-inverse: #FEAB10;
+
+    /*
+    ============================================================================
+    SEMANTIC COLOURS - LIGHT MODE
+    ============================================================================
+    */
+
+    /* text */
+    --fds-colour-text: var(--fds-colour-neutral-20);
+    --fds-colour-text-subtle: var(--fds-colour-neutral-30);
+    --fds-colour-text-subtler: var(--fds-colour-neutral-50);
+    --fds-colour-text-subtlest: var(--fds-colour-neutral-60);
+    --fds-colour-text-primary: var(--fds-colour-primary-50);
+    --fds-colour-text-primary-strong: var(--fds-colour-primary-40);
+    --fds-colour-text-primary-strongest: var(--fds-colour-primary-20);
+    --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-primary-40);
+    --fds-colour-text-selected: var(--fds-colour-primary-50);
+    --fds-colour-text-selected-hover: var(--fds-colour-primary-40);
+    --fds-colour-text-disabled: var(--fds-colour-neutral-50);
+    --fds-colour-text-disabled-subtle: var(--fds-colour-neutral-60);
+    --fds-colour-text-disabled-subtlest: var(--fds-colour-neutral-80);
+    --fds-colour-text-selected-disabled: var(--fds-colour-neutral-20);
+    --fds-colour-text-success: var(--fds-colour-success-40);
+    --fds-colour-text-warning: var(--fds-colour-warning-40);
+    --fds-colour-text-error: var(--fds-colour-error-40);
+    --fds-colour-text-info: var(--fds-colour-info-40);
+    --fds-colour-text-inverse: var(--fds-colour-white);
+
+    /* icon */
+    --fds-colour-icon: var(--fds-colour-neutral-50);
+    --fds-colour-icon-subtle: var(--fds-colour-neutral-60);
+    --fds-colour-icon-strongest: var(--fds-colour-neutral-20);
+    --fds-colour-icon-primary: var(--fds-colour-primary-50);
+    --fds-colour-icon-primary-subtle: var(--fds-colour-primary-60);
+    --fds-colour-icon-primary-subtlest: var(--fds-colour-primary-70);
+    --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-primary-40);
+    --fds-colour-icon-selected: var(--fds-colour-primary-50);
+    --fds-colour-icon-selected-hover: var(--fds-colour-primary-40);
+    --fds-colour-icon-disabled: var(--fds-colour-neutral-50);
+    --fds-colour-icon-disabled-subtle: var(--fds-colour-neutral-60);
+    --fds-colour-icon-selected-disabled: var(--fds-colour-neutral-60);
+    --fds-colour-icon-success: var(--fds-colour-success-50);
+    --fds-colour-icon-warning: var(--fds-colour-warning-60);
+    --fds-colour-icon-error: var(--fds-colour-error-50);
+    --fds-colour-icon-error-strong: var(--fds-colour-error-40);
+    --fds-colour-icon-info: var(--fds-colour-info-50);
+    --fds-colour-icon-inverse: var(--fds-colour-white);
+    --fds-colour-icon-primary-inverse: var(--fds-colour-primary-inverse);
+
+    /* border */
+    --fds-colour-border: var(--fds-colour-neutral-90);
+    --fds-colour-border-strong: var(--fds-colour-neutral-70);
+    --fds-colour-border-stronger: var(--fds-colour-neutral-50);
+    --fds-colour-border-primary: var(--fds-colour-primary-50);
+    --fds-colour-border-primary-strong: var(--fds-colour-primary-40);
+    --fds-colour-border-primary-subtle: var(--fds-colour-primary-60);
+    --fds-colour-border-hover: var(--fds-colour-primary-90);
+    --fds-colour-border-hover-strong: var(--fds-colour-primary-60);
+    --fds-colour-border-selected: var(--fds-colour-primary-50);
+    --fds-colour-border-selected-subtle: var(--fds-colour-primary-70);
+    --fds-colour-border-selected-subtlest: var(--fds-colour-primary-90);
+    --fds-colour-border-selected-hover: var(--fds-colour-primary-40);
+    --fds-colour-border-focus: var(--fds-colour-primary-60);
+    --fds-colour-border-focus-strong: var(--fds-colour-primary-50);
+    --fds-colour-border-disabled: var(--fds-colour-neutral-90);
+    --fds-colour-border-selected-disabled: var(--fds-colour-neutral-70);
+    --fds-colour-border-success: var(--fds-colour-success-60);
+    --fds-colour-border-warning: var(--fds-colour-warning-60);
+    --fds-colour-border-error: var(--fds-colour-error-60);
+    --fds-colour-border-error-focus: var(--fds-colour-error-60);
+    --fds-colour-border-error-focus-strong: var(--fds-colour-error-40);
+    --fds-colour-border-error-strong: var(--fds-colour-error-40);
+    --fds-colour-border-info: var(--fds-colour-info-60);
+
+    /* background */
+    --fds-colour-bg: var(--fds-colour-white);
+    --fds-colour-bg-strong: var(--fds-colour-neutral-100);
+    --fds-colour-bg-stronger: var(--fds-colour-neutral-95);
+    --fds-colour-bg-strongest: var(--fds-colour-neutral-90);
+    --fds-colour-bg-hover: var(--fds-colour-primary-95);
+    --fds-colour-bg-hover-strong: var(--fds-colour-primary-90);
+    --fds-colour-bg-hover-subtle: var(--fds-colour-primary-100);
+    --fds-colour-bg-hover-neutral: var(--fds-colour-neutral-100);
+    --fds-colour-bg-hover-neutral-strong: var(--fds-colour-neutral-90);
+    --fds-colour-bg-selected: var(--fds-colour-primary-95);
+    --fds-colour-bg-selected-hover: var(--fds-colour-primary-90);
+    --fds-colour-bg-selected-strong: var(--fds-colour-primary-90);
+    --fds-colour-bg-selected-stronger: var(--fds-colour-primary-70);
+    --fds-colour-bg-selected-strongest: var(--fds-colour-primary-50);
+    --fds-colour-bg-selected-strongest-hover: var(--fds-colour-primary-40);
+    --fds-colour-bg-disabled: var(--fds-colour-neutral-95);
+    --fds-colour-bg-selected-disabled: var(--fds-colour-neutral-95);
+    --fds-colour-bg-selected-stronger-disabled: var(--fds-colour-neutral-70);
+    --fds-colour-bg-success: var(--fds-colour-success-100);
+    --fds-colour-bg-success-hover: var(--fds-colour-success-95);
+    --fds-colour-bg-success-strong: var(--fds-colour-success-50);
+    --fds-colour-bg-success-strong-hover: var(--fds-colour-success-40);
+    --fds-colour-bg-warning: var(--fds-colour-warning-100);
+    --fds-colour-bg-warning-hover: var(--fds-colour-warning-95);
+    --fds-colour-bg-warning-strong: var(--fds-colour-warning-50);
+    --fds-colour-bg-warning-strong-hover: var(--fds-colour-warning-40);
+    --fds-colour-bg-info: var(--fds-colour-info-100);
+    --fds-colour-bg-info-hover: var(--fds-colour-info-95);
+    --fds-colour-bg-info-strong: var(--fds-colour-info-50);
+    --fds-colour-bg-info-strong-hover: var(--fds-colour-info-40);
+    --fds-colour-bg-error: var(--fds-colour-error-100);
+    --fds-colour-bg-error-hover: var(--fds-colour-error-95);
+    --fds-colour-bg-error-strong: var(--fds-colour-error-50);
+    --fds-colour-bg-error-strong-hover: var(--fds-colour-error-40);
+    --fds-colour-bg-inverse: var(--fds-colour-neutral-20);
+    --fds-colour-bg-inverse-subtle: var(--fds-colour-neutral-30);
+    --fds-colour-bg-inverse-subtler: var(--fds-colour-neutral-50);
+    --fds-colour-bg-inverse-subtlest: var(--fds-colour-neutral-60);
+    --fds-colour-bg-inverse-hover: var(--fds-colour-neutral-40);
+    --fds-colour-bg-primary: var(--fds-colour-primary-50);
+    --fds-colour-bg-primary-strong: var(--fds-colour-primary-40);
+    --fds-colour-bg-primary-subtle: var(--fds-colour-primary-60);
+    --fds-colour-bg-primary-subtler: var(--fds-colour-primary-95);
+    --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-100);
+    --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-available: #6DD0A1;
+    --fds-colour-bg-primary-hover: var(--fds-colour-primary-40);
+    --fds-colour-bg-primary-strong-hover: var(--fds-colour-primary-30);
+    --fds-colour-bg-primary-subtlest-hover: var(--fds-colour-primary-90);
+    --fds-colour-bg-primary-subtlest-selected: var(--fds-colour-primary-90);
+
+    /* overlay */
+    --fds-colour-overlay-strong: rgb(40 40 40 / 85%);
+    --fds-colour-overlay-subtle: rgb(40 40 40 / 20%);
+
+    /* hyperlink */
+    --fds-colour-hyperlink: var(--fds-colour-primary-50);
+    --fds-colour-hyperlink-hover: var(--fds-colour-primary-40);
+    --fds-colour-hyperlink-visited: var(--fds-colour-primary-40);
+    --fds-colour-hyperlink-inverse: var(--fds-colour-primary-inverse);
+
+    /* 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-heading: "Plus Jakarta Sans";
+    --fds-font-family-body: "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.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;
+}
+
+/*
+============================================================================
+SEMANTIC COLOURS - DARK MODE
+============================================================================
+*/
+[data-fds-theme="smgs"][data-fds-theme-mode="dark"] {
+    /* 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 */
+    --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 */
+    --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 */
+    --fds-colour-overlay-strong: rgb(78 78 78 / 80%);
+    --fds-colour-overlay-subtle: rgb(78 78 78 / 50%);
+
+    /* hyperlink */
+    --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 */
+    --fds-colour-focus-ring: var(--fds-colour-primary-60);
+    --fds-colour-focus-ring-inverse: var(--fds-colour-black);
+}