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

package/theme/styles/spf.css

@@ -6,97 +6,97 @@ PRIMITIVE COLOURS
 ============================================================================
 */
 [data-fds-theme="spf"] {
-    --fds-colour-brand-10: #00143A;
-    --fds-colour-brand-20: #00205B;
-    --fds-colour-brand-30: #153368;
-    --fds-colour-brand-40: #18417C;
-    --fds-colour-brand-50: #00558C;
-    --fds-colour-brand-60: #009CDE;
-    --fds-colour-brand-70: #5AB9E7;
-    --fds-colour-brand-80: #9ED0ED;
-    --fds-colour-brand-90: #CAE3F4;
-    --fds-colour-brand-95: #E2F0F9;
-    --fds-colour-brand-100: #F4FAFD;
-    --fds-colour-primary-10: #00143A;
-    --fds-colour-primary-20: #00205B;
-    --fds-colour-primary-30: #153368;
-    --fds-colour-primary-40: #18417C;
-    --fds-colour-primary-50: #00558C;
+    --fds-colour-brand-10: #00205B;
+    --fds-colour-brand-20: #143168;
+    --fds-colour-brand-30: #274374;
+    --fds-colour-brand-40: #3C5481;
+    --fds-colour-brand-50: #4E648D;
+    --fds-colour-brand-60: #8493B0;
+    --fds-colour-brand-70: #B6BFD0;
+    --fds-colour-brand-80: #CCD2DE;
+    --fds-colour-brand-90: #DEE2EA;
+    --fds-colour-brand-95: #EBEEF2;
+    --fds-colour-brand-100: #F8F9FB;
+    --fds-colour-primary-10: #00263F;
+    --fds-colour-primary-20: #00365A;
+    --fds-colour-primary-30: #004674;
+    --fds-colour-primary-40: #00558C;
+    --fds-colour-primary-50: #0069A4;
     --fds-colour-primary-60: #009CDE;
-    --fds-colour-primary-70: #5AB9E7;
-    --fds-colour-primary-80: #9ED0ED;
-    --fds-colour-primary-90: #CAE3F4;
-    --fds-colour-primary-95: #E2F0F9;
-    --fds-colour-primary-100: #F4FAFD;
-    --fds-colour-secondary-10: #10171F;
-    --fds-colour-secondary-20: #1E252C;
-    --fds-colour-secondary-30: #2F353B;
-    --fds-colour-secondary-40: #3D4247;
-    --fds-colour-secondary-50: #4E5255;
-    --fds-colour-secondary-60: #8F9396;
-    --fds-colour-secondary-70: #A9B0B3;
-    --fds-colour-secondary-80: #C7CBCC;
-    --fds-colour-secondary-90: #DDDFE0;
-    --fds-colour-secondary-95: #ECEDEE;
-    --fds-colour-secondary-100: #F8F8F9;
-    --fds-colour-neutral-10: #10171F;
-    --fds-colour-neutral-20: #1E252C;
-    --fds-colour-neutral-30: #2F353B;
-    --fds-colour-neutral-40: #3D4247;
-    --fds-colour-neutral-50: #4E5255;
-    --fds-colour-neutral-60: #8F9396;
-    --fds-colour-neutral-70: #A9B0B3;
-    --fds-colour-neutral-80: #C7CBCC;
-    --fds-colour-neutral-90: #DDDFE0;
-    --fds-colour-neutral-95: #ECEDEE;
-    --fds-colour-neutral-100: #F8F8F9;
-    --fds-colour-success-10: #001B0E;
-    --fds-colour-success-20: #012A16;
-    --fds-colour-success-30: #013D20;
-    --fds-colour-success-40: #014D28;
-    --fds-colour-success-50: #005F30;
-    --fds-colour-success-60: #48A377;
-    --fds-colour-success-70: #77BD9B;
-    --fds-colour-success-80: #A3D5BD;
-    --fds-colour-success-90: #C4E7D6;
-    --fds-colour-success-95: #DBF4E7;
-    --fds-colour-success-100: #ECFDF5;
-    --fds-colour-warning-10: #1F1500;
-    --fds-colour-warning-20: #312100;
-    --fds-colour-warning-30: #473000;
-    --fds-colour-warning-40: #593C00;
-    --fds-colour-warning-50: #6E4B00;
-    --fds-colour-warning-60: #B78C31;
-    --fds-colour-warning-70: #DDA633;
-    --fds-colour-warning-80: #E0C792;
-    --fds-colour-warning-90: #E9DEC5;
-    --fds-colour-warning-95: #F4EEE0;
-    --fds-colour-warning-100: #FAF8F3;
-    --fds-colour-error-10: #360109;
-    --fds-colour-error-20: #50010E;
-    --fds-colour-error-30: #6F0213;
-    --fds-colour-error-40: #88051A;
-    --fds-colour-error-50: #A60A24;
-    --fds-colour-error-60: #E07083;
-    --fds-colour-error-70: #EA98A6;
-    --fds-colour-error-80: #F3BBC4;
-    --fds-colour-error-90: #FAD5DC;
-    --fds-colour-error-95: #FEE9ED;
-    --fds-colour-error-100: #FFF6F8;
-    --fds-colour-info-10: #00143A;
-    --fds-colour-info-20: #00205B;
-    --fds-colour-info-30: #153368;
-    --fds-colour-info-40: #18417C;
-    --fds-colour-info-50: #00558C;
-    --fds-colour-info-60: #009CDE;
-    --fds-colour-info-70: #5AB9E7;
-    --fds-colour-info-80: #9ED0ED;
-    --fds-colour-info-90: #CAE3F4;
-    --fds-colour-info-95: #E2F0F9;
-    --fds-colour-info-100: #F4FAFD;
+    --fds-colour-primary-70: #73C9ED;
+    --fds-colour-primary-80: #A1DBF3;
+    --fds-colour-primary-90: #C1E7F7;
+    --fds-colour-primary-95: #DCF1FA;
+    --fds-colour-primary-100: #F3FAFD;
+    --fds-colour-secondary-10: #27241D;
+    --fds-colour-secondary-20: #38332A;
+    --fds-colour-secondary-30: #494337;
+    --fds-colour-secondary-40: #5B5343;
+    --fds-colour-secondary-50: #6C6350;
+    --fds-colour-secondary-60: #9E9175;
+    --fds-colour-secondary-70: #CEBD99;
+    --fds-colour-secondary-80: #DDCBA4;
+    --fds-colour-secondary-90: #EAE0C8;
+    --fds-colour-secondary-95: #F4EEE0;
+    --fds-colour-secondary-100: #FAF8F3;
+    --fds-colour-neutral-10: #262627;
+    --fds-colour-neutral-20: #323435;
+    --fds-colour-neutral-30: #414446;
+    --fds-colour-neutral-40: #54585A;
+    --fds-colour-neutral-50: #616566;
+    --fds-colour-neutral-60: #909294;
+    --fds-colour-neutral-70: #BDBEBF;
+    --fds-colour-neutral-80: #D1D2D2;
+    --fds-colour-neutral-90: #E1E2E3;
+    --fds-colour-neutral-95: #EDEDED;
+    --fds-colour-neutral-100: #F8F8F8;
+    --fds-colour-success-10: #052A16;
+    --fds-colour-success-20: #073C1F;
+    --fds-colour-success-30: #094D28;
+    --fds-colour-success-40: #0F6134;
+    --fds-colour-success-50: #14733E;
+    --fds-colour-success-60: #22A55A;
+    --fds-colour-success-70: #86CEA4;
+    --fds-colour-success-80: #ACDDC1;
+    --fds-colour-success-90: #CAE9D7;
+    --fds-colour-success-95: #DFF2E7;
+    --fds-colour-success-100: #F2FAF5;
+    --fds-colour-warning-10: #302204;
+    --fds-colour-warning-20: #453005;
+    --fds-colour-warning-30: #593F07;
+    --fds-colour-warning-40: #6F4F08;
+    --fds-colour-warning-50: #845D0A;
+    --fds-colour-warning-60: #BD891B;
+    --fds-colour-warning-70: #F1B434;
+    --fds-colour-warning-80: #F6CC76;
+    --fds-colour-warning-90: #F9DFA7;
+    --fds-colour-warning-95: #FCEDCE;
+    --fds-colour-warning-100: #FEF9EF;
+    --fds-colour-error-10: #4D0612;
+    --fds-colour-error-20: #6B0919;
+    --fds-colour-error-30: #890B20;
+    --fds-colour-error-40: #A90E27;
+    --fds-colour-error-50: #C8102E;
+    --fds-colour-error-60: #DE7082;
+    --fds-colour-error-70: #ECAEB8;
+    --fds-colour-error-80: #F2C8CF;
+    --fds-colour-error-90: #F7DBDF;
+    --fds-colour-error-95: #FAEBED;
+    --fds-colour-error-100: #FDF8F9;
+    --fds-colour-info-10: #330072;
+    --fds-colour-info-20: #45177E;
+    --fds-colour-info-30: #572C8B;
+    --fds-colour-info-40: #674196;
+    --fds-colour-info-50: #7654A1;
+    --fds-colour-info-60: #A088BD;
+    --fds-colour-info-70: #C7B9D8;
+    --fds-colour-info-80: #D7CEE4;
+    --fds-colour-info-90: #E5DEED;
+    --fds-colour-info-95: #F1EDF5;
+    --fds-colour-info-100: #FAF8FB;
     --fds-colour-white: #FFFFFF;
     --fds-colour-black: #000000;
-    --fds-colour-primary-inverse: #FFCB6A;
+    --fds-colour-primary-inverse: #6FC7EC;
 
     /*
     ============================================================================
@@ -117,18 +117,22 @@ PRIMITIVE COLOURS
     */
 
     /* text */
-    --fds-colour-text: var(--fds-colour-neutral-20);
-    --fds-colour-text-subtle: var(--fds-colour-neutral-30);
+    --fds-colour-text: var(--fds-colour-neutral-10);
+    --fds-colour-text-subtle: var(--fds-colour-neutral-20);
     --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: var(--fds-colour-primary-40);
+    --fds-colour-text-primary-strong: var(--fds-colour-primary-30);
     --fds-colour-text-primary-strongest: var(--fds-colour-primary-20);
-    --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-brand: var(--fds-colour-brand-10);
+    --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-30);
+    --fds-colour-text-selected: var(--fds-colour-primary-40);
+    --fds-colour-text-selected-hover: var(--fds-colour-primary-30);
+    --fds-colour-text-disabled: var(--fds-colour-neutral-40);
+    --fds-colour-text-disabled-subtle: var(--fds-colour-neutral-50);
+    --fds-colour-text-disabled-subtlest: var(--fds-colour-neutral-70);
     --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);
@@ -140,17 +144,20 @@ PRIMITIVE COLOURS
     --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-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-primary: var(--fds-colour-primary-40);
+    --fds-colour-icon-primary-subtle: var(--fds-colour-primary-50);
+    --fds-colour-icon-primary-subtlest: var(--fds-colour-primary-60);
+    --fds-colour-icon-brand: var(--fds-colour-brand-10);
+    --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-30);
+    --fds-colour-icon-selected: var(--fds-colour-primary-40);
+    --fds-colour-icon-selected-hover: var(--fds-colour-primary-30);
     --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-warning: var(--fds-colour-warning-50);
     --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);
@@ -161,12 +168,13 @@ PRIMITIVE COLOURS
     --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: var(--fds-colour-primary-40);
+    --fds-colour-border-primary-strong: var(--fds-colour-primary-30);
     --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-hover-strong: var(--fds-colour-primary-70);
     --fds-colour-border-selected: var(--fds-colour-primary-50);
-    --fds-colour-border-selected-subtle: var(--fds-colour-primary-70);
+    --fds-colour-border-selected-subtle: var(--fds-colour-primary-80);
     --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);
@@ -176,10 +184,10 @@ PRIMITIVE COLOURS
     --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: var(--fds-colour-error-50);
     --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);
+    --fds-colour-border-error-strong: var(--fds-colour-error-30);
+    --fds-colour-border-info: var(--fds-colour-info-50);
 
     /* background */
     --fds-colour-bg: var(--fds-colour-white);
@@ -216,17 +224,23 @@ PRIMITIVE COLOURS
     --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: var(--fds-colour-neutral-10);
     --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: var(--fds-colour-primary-40);
+    --fds-colour-bg-primary-strong: var(--fds-colour-primary-30);
     --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-hover: var(--fds-colour-primary-30);
+    --fds-colour-bg-primary-strong-hover: var(--fds-colour-primary-20);
     --fds-colour-bg-primary-subtlest-hover: var(--fds-colour-primary-90);
     --fds-colour-bg-primary-subtlest-selected: var(--fds-colour-primary-90);
 
@@ -342,7 +356,8 @@ PRIMITIVE COLOURS
     --fds-font-weight-regular: 400;
     --fds-font-weight-semibold: 600;
     --fds-font-weight-bold: 700;
-    --fds-font-family: "Public Sans";
+    --fds-font-family-heading: "Public Sans";
+    --fds-font-family-body: "Public Sans";
     --fds-font-body-size-baseline: 1.2rem;
     --fds-font-body-size-md: 1.125rem;
     --fds-font-body-size-sm: 1rem;
@@ -375,7 +390,11 @@ SEMANTIC COLOURS - DARK MODE
     --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);
@@ -396,6 +415,9 @@ SEMANTIC COLOURS - DARK MODE
     --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);
@@ -415,6 +437,7 @@ SEMANTIC COLOURS - DARK MODE
     --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);
@@ -475,11 +498,17 @@ SEMANTIC COLOURS - DARK MODE
     --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);
 

package/theme/styles/supportgowhere.css

@@ -110,7 +110,11 @@ PRIMITIVES COLORS
     --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);
@@ -131,6 +135,9 @@ PRIMITIVES COLORS
     --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);
@@ -150,6 +157,7 @@ PRIMITIVES COLORS
     --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);
@@ -210,11 +218,17 @@ PRIMITIVES COLORS
     --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);
 
@@ -330,7 +344,8 @@ PRIMITIVES COLORS
     --fds-font-weight-regular: 400;
     --fds-font-weight-semibold: 600;
     --fds-font-weight-bold: 700;
-    --fds-font-family: "Libre Franklin";
+    --fds-font-family-heading: "Libre Franklin";
+    --fds-font-family-body: "Libre Franklin";
     --fds-font-body-size-baseline: 1.125rem;
     --fds-font-body-size-md: 1rem;
     --fds-font-body-size-sm: 0.875rem;
@@ -363,7 +378,11 @@ SEMANTIC COLOURS - DARK MODE
     --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);
@@ -384,6 +403,9 @@ SEMANTIC COLOURS - DARK MODE
     --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);
@@ -403,6 +425,7 @@ SEMANTIC COLOURS - DARK MODE
     --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);
@@ -463,11 +486,17 @@ SEMANTIC COLOURS - DARK MODE
     --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);
 

package/theme/theme-provider/hooks.d.ts

@@ -1,4 +1,5 @@
 import type { CSSProperties } from "react";
+import type { ThemeContextValue } from "./types";
 type InheritedThemeScope = {
     themeProps: {
         "data-fds-theme"?: string;
@@ -6,6 +7,6 @@ type InheritedThemeScope = {
     };
     themeStyle: CSSProperties;
 };
-export declare const useTheme: () => import("./types").ThemeContextValue;
+export declare const useTheme: () => ThemeContextValue;
 export declare const useInheritedThemeScope: (enabled: boolean) => InheritedThemeScope;
 export {};

package/theme/theme-provider/hooks.js

@@ -1,2 +1,2 @@
-import{useContext as e,useMemo as t}from"react";import{getInheritedInlineCssVariables as o}from"../utils/css-variable.js";import{ThemeContext as m}from"./context.js";const r=()=>{const t=e(m);if(!t)throw new Error("useTheme must be used within ThemeProvider");return t},l=r=>{const l=e(m);return t((()=>{var e;return r?{themeProps:{"data-fds-theme":null==l?void 0:l.theme,"data-fds-theme-mode":null==l?void 0:l.mode},themeStyle:o(null!==(e=null==l?void 0:l.themeElement)&&void 0!==e?e:null)}:{themeProps:{},themeStyle:{}}}),[r,null==l?void 0:l.mode,null==l?void 0:l.theme,null==l?void 0:l.themeElement])};export{l as useInheritedThemeScope,r as useTheme};
+import{useContext as e,useMemo as t}from"react";import{getInheritedInlineCssVariables as l}from"../utils/css-variable.js";import{ThemeContext as m}from"./context.js";const o=()=>{const t=e(m);return t||{theme:"lifesg",mode:"light",themeElement:null}},n=o=>{const n=e(m);return t((()=>{var e;return o?{themeProps:{"data-fds-theme":null==n?void 0:n.theme,"data-fds-theme-mode":null==n?void 0:n.mode},themeStyle:l(null!==(e=null==n?void 0:n.themeElement)&&void 0!==e?e:null)}:{themeProps:{},themeStyle:{}}}),[o,null==n?void 0:n.mode,null==n?void 0:n.theme,null==n?void 0:n.themeElement])};export{n as useInheritedThemeScope,o as useTheme};
 //# sourceMappingURL=hooks.js.map

package/theme/theme-provider/hooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","sources":["../../../src/theme/theme-provider/hooks.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { useContext, useMemo } from \"react\";\n\nimport { getInheritedInlineCssVariables } from \"../utils/css-variable\";\nimport { ThemeContext } from \"./context\";\n\ntype InheritedThemeScope = {\n    themeProps: {\n        \"data-fds-theme\"?: string;\n        \"data-fds-theme-mode\"?: string;\n    };\n    themeStyle: CSSProperties;\n};\n\nexport const useTheme = () => {\n    const context = useContext(ThemeContext);\n\n    if (!context) {\n        throw new Error(\"useTheme must be used within ThemeProvider\");\n    }\n\n    return context;\n};\n\nexport const useInheritedThemeScope = (\n    enabled: boolean\n): InheritedThemeScope => {\n    const themeContext = useContext(ThemeContext);\n\n    return useMemo(() => {\n        if (!enabled) {\n            return {\n                themeProps: {},\n                themeStyle: {},\n            };\n        }\n\n        return {\n            themeProps: {\n                \"data-fds-theme\": themeContext?.theme,\n                \"data-fds-theme-mode\": themeContext?.mode,\n            },\n            themeStyle: getInheritedInlineCssVariables(\n                themeContext?.themeElement ?? null\n            ),\n        };\n    }, [\n        enabled,\n        themeContext?.mode,\n        themeContext?.theme,\n        themeContext?.themeElement,\n    ]);\n};\n"],"names":["useTheme","context","useContext","ThemeContext","Error","useInheritedThemeScope","enabled","themeContext","useMemo","themeProps","theme","mode","themeStyle","getInheritedInlineCssVariables","_a","themeElement"],"mappings":"sKAcO,MAAMA,EAAW,KACpB,MAAMC,EAAUC,EAAWC,GAE3B,IAAKF,EACD,MAAM,IAAIG,MAAM,8CAGpB,OAAOH,CAAO,EAGLI,EACTC,IAEA,MAAMC,EAAeL,EAAWC,GAEhC,OAAOK,GAAQ,WACX,OAAKF,EAOE,CACHG,WAAY,CACR,iBAAkBF,aAAY,EAAZA,EAAcG,MAChC,sBAAuBH,aAAY,EAAZA,EAAcI,MAEzCC,WAAYC,EACkB,QAA1BC,EAAAP,aAAY,EAAZA,EAAcQ,oBAAY,IAAAD,EAAAA,EAAI,OAZ3B,CACHL,WAAY,CAAA,EACZG,WAAY,CAAA,EAYnB,GACF,CACCN,EACAC,aAAY,EAAZA,EAAcI,KACdJ,aAAY,EAAZA,EAAcG,MACdH,aAAY,EAAZA,EAAcQ,cAChB"}
+{"version":3,"file":"hooks.js","sources":["../../../src/theme/theme-provider/hooks.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { useContext, useMemo } from \"react\";\n\nimport { getInheritedInlineCssVariables } from \"../utils/css-variable\";\nimport { ThemeContext } from \"./context\";\nimport type { ThemeContextValue } from \"./types\";\n\ntype InheritedThemeScope = {\n    themeProps: {\n        \"data-fds-theme\"?: string;\n        \"data-fds-theme-mode\"?: string;\n    };\n    themeStyle: CSSProperties;\n};\n\nexport const useTheme = (): ThemeContextValue => {\n    const context = useContext(ThemeContext);\n\n    if (!context) {\n        return {\n            theme: \"lifesg\",\n            mode: \"light\",\n            themeElement: null,\n        };\n    }\n\n    return context;\n};\n\nexport const useInheritedThemeScope = (\n    enabled: boolean\n): InheritedThemeScope => {\n    const themeContext = useContext(ThemeContext);\n\n    return useMemo(() => {\n        if (!enabled) {\n            return {\n                themeProps: {},\n                themeStyle: {},\n            };\n        }\n\n        return {\n            themeProps: {\n                \"data-fds-theme\": themeContext?.theme,\n                \"data-fds-theme-mode\": themeContext?.mode,\n            },\n            themeStyle: getInheritedInlineCssVariables(\n                themeContext?.themeElement ?? null\n            ),\n        };\n    }, [\n        enabled,\n        themeContext?.mode,\n        themeContext?.theme,\n        themeContext?.themeElement,\n    ]);\n};\n"],"names":["useTheme","context","useContext","ThemeContext","theme","mode","themeElement","useInheritedThemeScope","enabled","themeContext","useMemo","themeProps","themeStyle","getInheritedInlineCssVariables","_a"],"mappings":"sKAeO,MAAMA,EAAW,KACpB,MAAMC,EAAUC,EAAWC,GAE3B,OAAKF,GACM,CACHG,MAAO,SACPC,KAAM,QACNC,aAAc,KAIR,EAGLC,EACTC,IAEA,MAAMC,EAAeP,EAAWC,GAEhC,OAAOO,GAAQ,WACX,OAAKF,EAOE,CACHG,WAAY,CACR,iBAAkBF,aAAY,EAAZA,EAAcL,MAChC,sBAAuBK,aAAY,EAAZA,EAAcJ,MAEzCO,WAAYC,EACkB,QAA1BC,EAAAL,aAAY,EAAZA,EAAcH,oBAAY,IAAAQ,EAAAA,EAAI,OAZ3B,CACHH,WAAY,CAAA,EACZC,WAAY,CAAA,EAYnB,GACF,CACCJ,EACAC,aAAY,EAAZA,EAAcJ,KACdI,aAAY,EAAZA,EAAcL,MACdK,aAAY,EAAZA,EAAcH,cAChB"}

package/theme/tokens/colour.d.ts

@@ -97,7 +97,11 @@ export declare const SemanticColours: {
     readonly "text-subtler": "var(--fds-colour-text-subtler)";
     readonly "text-subtlest": "var(--fds-colour-text-subtlest)";
     readonly "text-primary": "var(--fds-colour-text-primary)";
+    readonly "text-primary-strong": "var(--fds-colour-text-primary-strong)";
     readonly "text-primary-strongest": "var(--fds-colour-text-primary-strongest)";
+    readonly "text-brand": "var(--fds-colour-text-brand)";
+    readonly "text-secondary": "var(--fds-colour-text-secondary)";
+    readonly "text-secondary-subtle": "var(--fds-colour-text-secondary-subtle)";
     readonly "text-hover": "var(--fds-colour-text-hover)";
     readonly "text-selected": "var(--fds-colour-text-selected)";
     readonly "text-selected-hover": "var(--fds-colour-text-selected-hover)";
@@ -116,6 +120,9 @@ export declare const SemanticColours: {
     readonly "icon-primary": "var(--fds-colour-icon-primary)";
     readonly "icon-primary-subtle": "var(--fds-colour-icon-primary-subtle)";
     readonly "icon-primary-subtlest": "var(--fds-colour-icon-primary-subtlest)";
+    readonly "icon-brand": "var(--fds-colour-icon-brand)";
+    readonly "icon-secondary": "var(--fds-colour-icon-secondary)";
+    readonly "icon-secondary-subtle": "var(--fds-colour-icon-secondary-subtle)";
     readonly "icon-hover": "var(--fds-colour-icon-hover)";
     readonly "icon-selected": "var(--fds-colour-icon-selected)";
     readonly "icon-selected-hover": "var(--fds-colour-icon-selected-hover)";
@@ -133,6 +140,7 @@ export declare const SemanticColours: {
     readonly "border-strong": "var(--fds-colour-border-strong)";
     readonly "border-stronger": "var(--fds-colour-border-stronger)";
     readonly "border-primary": "var(--fds-colour-border-primary)";
+    readonly "border-primary-strong": "var(--fds-colour-border-primary-strong)";
     readonly "border-primary-subtle": "var(--fds-colour-border-primary-subtle)";
     readonly "border-hover": "var(--fds-colour-border-hover)";
     readonly "border-hover-strong": "var(--fds-colour-border-hover-strong)";
@@ -191,11 +199,17 @@ export declare const SemanticColours: {
     readonly "bg-inverse-subtlest": "var(--fds-colour-bg-inverse-subtlest)";
     readonly "bg-inverse-hover": "var(--fds-colour-bg-inverse-hover)";
     readonly "bg-primary": "var(--fds-colour-bg-primary)";
+    readonly "bg-primary-strong": "var(--fds-colour-bg-primary-strong)";
     readonly "bg-primary-subtle": "var(--fds-colour-bg-primary-subtle)";
     readonly "bg-primary-subtler": "var(--fds-colour-bg-primary-subtler)";
     readonly "bg-primary-subtlest": "var(--fds-colour-bg-primary-subtlest)";
+    readonly "bg-secondary": "var(--fds-colour-bg-secondary)";
+    readonly "bg-secondary-subtle": "var(--fds-colour-bg-secondary-subtle)";
+    readonly "bg-secondary-subtler": "var(--fds-colour-bg-secondary-subtler)";
+    readonly "bg-secondary-subtlest": "var(--fds-colour-bg-secondary-subtlest)";
     readonly "bg-available": "var(--fds-colour-bg-available)";
     readonly "bg-primary-hover": "var(--fds-colour-bg-primary-hover)";
+    readonly "bg-primary-strong-hover": "var(--fds-colour-bg-primary-strong-hover)";
     readonly "bg-primary-subtlest-hover": "var(--fds-colour-bg-primary-subtlest-hover)";
     readonly "bg-primary-subtlest-selected": "var(--fds-colour-bg-primary-subtlest-selected)";
     readonly "overlay-strong": "var(--fds-colour-overlay-strong)";
@@ -213,7 +227,11 @@ export declare const Colour: {
     readonly "text-subtler": "var(--fds-colour-text-subtler)";
     readonly "text-subtlest": "var(--fds-colour-text-subtlest)";
     readonly "text-primary": "var(--fds-colour-text-primary)";
+    readonly "text-primary-strong": "var(--fds-colour-text-primary-strong)";
     readonly "text-primary-strongest": "var(--fds-colour-text-primary-strongest)";
+    readonly "text-brand": "var(--fds-colour-text-brand)";
+    readonly "text-secondary": "var(--fds-colour-text-secondary)";
+    readonly "text-secondary-subtle": "var(--fds-colour-text-secondary-subtle)";
     readonly "text-hover": "var(--fds-colour-text-hover)";
     readonly "text-selected": "var(--fds-colour-text-selected)";
     readonly "text-selected-hover": "var(--fds-colour-text-selected-hover)";
@@ -232,6 +250,9 @@ export declare const Colour: {
     readonly "icon-primary": "var(--fds-colour-icon-primary)";
     readonly "icon-primary-subtle": "var(--fds-colour-icon-primary-subtle)";
     readonly "icon-primary-subtlest": "var(--fds-colour-icon-primary-subtlest)";
+    readonly "icon-brand": "var(--fds-colour-icon-brand)";
+    readonly "icon-secondary": "var(--fds-colour-icon-secondary)";
+    readonly "icon-secondary-subtle": "var(--fds-colour-icon-secondary-subtle)";
     readonly "icon-hover": "var(--fds-colour-icon-hover)";
     readonly "icon-selected": "var(--fds-colour-icon-selected)";
     readonly "icon-selected-hover": "var(--fds-colour-icon-selected-hover)";
@@ -249,6 +270,7 @@ export declare const Colour: {
     readonly "border-strong": "var(--fds-colour-border-strong)";
     readonly "border-stronger": "var(--fds-colour-border-stronger)";
     readonly "border-primary": "var(--fds-colour-border-primary)";
+    readonly "border-primary-strong": "var(--fds-colour-border-primary-strong)";
     readonly "border-primary-subtle": "var(--fds-colour-border-primary-subtle)";
     readonly "border-hover": "var(--fds-colour-border-hover)";
     readonly "border-hover-strong": "var(--fds-colour-border-hover-strong)";
@@ -307,11 +329,17 @@ export declare const Colour: {
     readonly "bg-inverse-subtlest": "var(--fds-colour-bg-inverse-subtlest)";
     readonly "bg-inverse-hover": "var(--fds-colour-bg-inverse-hover)";
     readonly "bg-primary": "var(--fds-colour-bg-primary)";
+    readonly "bg-primary-strong": "var(--fds-colour-bg-primary-strong)";
     readonly "bg-primary-subtle": "var(--fds-colour-bg-primary-subtle)";
     readonly "bg-primary-subtler": "var(--fds-colour-bg-primary-subtler)";
     readonly "bg-primary-subtlest": "var(--fds-colour-bg-primary-subtlest)";
+    readonly "bg-secondary": "var(--fds-colour-bg-secondary)";
+    readonly "bg-secondary-subtle": "var(--fds-colour-bg-secondary-subtle)";
+    readonly "bg-secondary-subtler": "var(--fds-colour-bg-secondary-subtler)";
+    readonly "bg-secondary-subtlest": "var(--fds-colour-bg-secondary-subtlest)";
     readonly "bg-available": "var(--fds-colour-bg-available)";
     readonly "bg-primary-hover": "var(--fds-colour-bg-primary-hover)";
+    readonly "bg-primary-strong-hover": "var(--fds-colour-bg-primary-strong-hover)";
     readonly "bg-primary-subtlest-hover": "var(--fds-colour-bg-primary-subtlest-hover)";
     readonly "bg-primary-subtlest-selected": "var(--fds-colour-bg-primary-subtlest-selected)";
     readonly "overlay-strong": "var(--fds-colour-overlay-strong)";