@lifesg/react-design-system 4.0.0-alpha.2 → 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/breakpoint.js

@@ -1,2 +1,2 @@
-import{Breakpoint as n}from"../tokens/breakpoint.js";import{parsePxOrRemValue as i,parseCSSVariableValue as m}from"../utils/css-variable.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"react";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import"./context.js";const e="fds-breakpoint-";function t(t){const s=document.body,a=window.innerWidth;[...s.classList].forEach((n=>{n.startsWith(e)&&s.classList.remove(n)}));const o=function(i){const e=n=>{const e=m(n,i);return e||(i!==document.documentElement?m(n,document.documentElement):e)};return[{key:"xxs",min:e(n["xxs-min"]),max:e(n["xxs-max"])},{key:"xs",min:e(n["xs-min"]),max:e(n["xs-max"])},{key:"sm",min:e(n["sm-min"]),max:e(n["sm-max"])},{key:"md",min:e(n["md-min"]),max:e(n["md-max"])},{key:"lg",min:e(n["lg-min"]),max:e(n["lg-max"])},{key:"xl",min:e(n["xl-min"]),max:e(n["xl-max"])},{key:"xxl",min:e(n["xxl-min"]),max:1/0}]}(t);o.forEach((n=>{const m=i(n.min),t=n.max===1/0?1/0:i(n.max),o=a>=m,r=t!==1/0&&a<=t;o&&(t===1/0||r)&&s.classList.add(`${e}${n.key}`),o&&s.classList.add(`${e}${n.key}-min`),r&&s.classList.add(`${e}${n.key}-max`)}))}function s(n){if(!globalThis.window)return;const i=()=>{t(n)};return i(),globalThis.window.addEventListener("resize",i),()=>{globalThis.window.removeEventListener("resize",i)}}export{t as applyBreakpointClasses,s as setupBreakpointListener};
+import{Breakpoint as i}from"../tokens/breakpoint.js";import{parsePxOrRemValue as m,parseCSSVariableValue as n}from"../utils/css-variable.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"react";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import"./context.js";import"../utils/use-media-query.js";const e="fds-breakpoint-";function t(t){const s=document.body,a=window.innerWidth;[...s.classList].forEach((i=>{i.startsWith(e)&&s.classList.remove(i)}));const o=function(m){const e=i=>{const e=n(i,m);return e||(m!==document.documentElement?n(i,document.documentElement):e)};return[{key:"xxs",min:e(i["xxs-min"]),max:e(i["xxs-max"])},{key:"xs",min:e(i["xs-min"]),max:e(i["xs-max"])},{key:"sm",min:e(i["sm-min"]),max:e(i["sm-max"])},{key:"md",min:e(i["md-min"]),max:e(i["md-max"])},{key:"lg",min:e(i["lg-min"]),max:e(i["lg-max"])},{key:"xl",min:e(i["xl-min"]),max:e(i["xl-max"])},{key:"xxl",min:e(i["xxl-min"]),max:1/0}]}(t);o.forEach((i=>{const n=m(i.min),t=i.max===1/0?1/0:m(i.max),o=a>=n,r=t!==1/0&&a<=t;o&&(t===1/0||r)&&s.classList.add(`${e}${i.key}`),o&&s.classList.add(`${e}${i.key}-min`),r&&s.classList.add(`${e}${i.key}-max`)}))}function s(i){if(!globalThis.window)return;const m=()=>{t(i)};return m(),globalThis.window.addEventListener("resize",m),()=>{globalThis.window.removeEventListener("resize",m)}}export{t as applyBreakpointClasses,s as setupBreakpointListener};
 //# sourceMappingURL=breakpoint.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"breakpoint.js","sources":["../../../src/theme/theme-provider/breakpoint.ts"],"sourcesContent":["import { Breakpoint } from \"../tokens/breakpoint\";\nimport type { CSSVariableString } from \"../types\";\nimport { parseCSSVariableValue, parsePxOrRemValue } from \"../utils\";\n\nfunction getBreakpointRanges(sourceElement: HTMLElement) {\n    const getBreakpointValue = (token: CSSVariableString) => {\n        const scopedValue = parseCSSVariableValue(token, sourceElement);\n        if (scopedValue) return scopedValue;\n\n        if (sourceElement !== document.documentElement) {\n            return parseCSSVariableValue(token, document.documentElement);\n        }\n\n        return scopedValue;\n    };\n\n    return [\n        {\n            key: \"xxs\",\n            min: getBreakpointValue(Breakpoint[\"xxs-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xxs-max\"]),\n        },\n        {\n            key: \"xs\",\n            min: getBreakpointValue(Breakpoint[\"xs-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xs-max\"]),\n        },\n        {\n            key: \"sm\",\n            min: getBreakpointValue(Breakpoint[\"sm-min\"]),\n            max: getBreakpointValue(Breakpoint[\"sm-max\"]),\n        },\n        {\n            key: \"md\",\n            min: getBreakpointValue(Breakpoint[\"md-min\"]),\n            max: getBreakpointValue(Breakpoint[\"md-max\"]),\n        },\n        {\n            key: \"lg\",\n            min: getBreakpointValue(Breakpoint[\"lg-min\"]),\n            max: getBreakpointValue(Breakpoint[\"lg-max\"]),\n        },\n        {\n            key: \"xl\",\n            min: getBreakpointValue(Breakpoint[\"xl-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xl-max\"]),\n        },\n        {\n            key: \"xxl\",\n            min: getBreakpointValue(Breakpoint[\"xxl-min\"]),\n            max: Infinity,\n        },\n    ] as const;\n}\n\nconst BREAKPOINT_CLASS_PREFIX = \"fds-breakpoint-\";\n\nexport function applyBreakpointClasses(sourceElement: HTMLElement) {\n    const body = document.body;\n    const width = window.innerWidth;\n\n    [...body.classList].forEach((cls) => {\n        if (cls.startsWith(BREAKPOINT_CLASS_PREFIX)) {\n            body.classList.remove(cls);\n        }\n    });\n\n    const BREAKPOINT_RANGES = getBreakpointRanges(sourceElement);\n\n    BREAKPOINT_RANGES.forEach((range) => {\n        const minValue = parsePxOrRemValue(range.min);\n        const maxValue =\n            range.max === Infinity\n                ? Infinity\n                : parsePxOrRemValue(range.max as string);\n\n        const isMinMatched = width >= minValue;\n        const isMaxMatched = maxValue === Infinity ? false : width <= maxValue;\n        const isWithinRange =\n            isMinMatched && (maxValue === Infinity || isMaxMatched);\n\n        if (isWithinRange) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}`);\n        }\n\n        if (isMinMatched) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}-min`);\n        }\n\n        if (isMaxMatched) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}-max`);\n        }\n    });\n}\n\nexport function setupBreakpointListener(sourceElement: HTMLElement) {\n    if (!globalThis.window) return;\n\n    const handleBreakpointChange = () => {\n        applyBreakpointClasses(sourceElement);\n    };\n\n    handleBreakpointChange();\n    globalThis.window.addEventListener(\"resize\", handleBreakpointChange);\n\n    return () => {\n        globalThis.window.removeEventListener(\"resize\", handleBreakpointChange);\n    };\n}\n"],"names":["BREAKPOINT_CLASS_PREFIX","applyBreakpointClasses","sourceElement","body","document","width","window","innerWidth","classList","forEach","cls","startsWith","remove","BREAKPOINT_RANGES","getBreakpointValue","token","scopedValue","parseCSSVariableValue","documentElement","key","min","Breakpoint","max","Infinity","getBreakpointRanges","range","minValue","parsePxOrRemValue","maxValue","isMinMatched","isMaxMatched","add","setupBreakpointListener","globalThis","handleBreakpointChange","addEventListener","removeEventListener"],"mappings":"iXAuDA,MAAMA,EAA0B,kBAE1B,SAAUC,EAAuBC,GACnC,MAAMC,EAAOC,SAASD,KAChBE,EAAQC,OAAOC,WAErB,IAAIJ,EAAKK,WAAWC,SAASC,IACrBA,EAAIC,WAAWX,IACfG,EAAKK,UAAUI,OAAOF,EAC1B,IAGJ,MAAMG,EA/DV,SAA6BX,GACzB,MAAMY,EAAsBC,IACxB,MAAMC,EAAcC,EAAsBF,EAAOb,GACjD,OAAIc,IAEAd,IAAkBE,SAASc,gBACpBD,EAAsBF,EAAOX,SAASc,iBAG1CF,EAAW,EAGtB,MAAO,CACH,CACIG,IAAK,MACLC,IAAKN,EAAmBO,EAAW,YACnCC,IAAKR,EAAmBO,EAAW,aAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,MACLC,IAAKN,EAAmBO,EAAW,YACnCC,IAAKC,KAGjB,CAc8BC,CAAoBtB,GAE9CW,EAAkBJ,SAASgB,IACvB,MAAMC,EAAWC,EAAkBF,EAAML,KACnCQ,EACFH,EAAMH,MAAQC,IACRA,IACAI,EAAkBF,EAAMH,KAE5BO,EAAexB,GAASqB,EACxBI,EAAeF,IAAaL,KAAmBlB,GAASuB,EAE1DC,IAAiBD,IAAaL,KAAYO,IAG1C3B,EAAKK,UAAUuB,IAAI,GAAG/B,IAA0ByB,EAAMN,OAGtDU,GACA1B,EAAKK,UAAUuB,IAAI,GAAG/B,IAA0ByB,EAAMN,WAGtDW,GACA3B,EAAKK,UAAUuB,IAAI,GAAG/B,IAA0ByB,EAAMN,UAC1D,GAER,CAEM,SAAUa,EAAwB9B,GACpC,IAAK+B,WAAW3B,OAAQ,OAExB,MAAM4B,EAAyB,KAC3BjC,EAAuBC,EAAc,EAMzC,OAHAgC,IACAD,WAAW3B,OAAO6B,iBAAiB,SAAUD,GAEtC,KACHD,WAAW3B,OAAO8B,oBAAoB,SAAUF,EAAuB,CAE/E"}
+{"version":3,"file":"breakpoint.js","sources":["../../../src/theme/theme-provider/breakpoint.ts"],"sourcesContent":["import { Breakpoint } from \"../tokens/breakpoint\";\nimport type { CSSVariableString } from \"../types\";\nimport { parseCSSVariableValue, parsePxOrRemValue } from \"../utils\";\n\nfunction getBreakpointRanges(sourceElement: HTMLElement) {\n    const getBreakpointValue = (token: CSSVariableString) => {\n        const scopedValue = parseCSSVariableValue(token, sourceElement);\n        if (scopedValue) return scopedValue;\n\n        if (sourceElement !== document.documentElement) {\n            return parseCSSVariableValue(token, document.documentElement);\n        }\n\n        return scopedValue;\n    };\n\n    return [\n        {\n            key: \"xxs\",\n            min: getBreakpointValue(Breakpoint[\"xxs-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xxs-max\"]),\n        },\n        {\n            key: \"xs\",\n            min: getBreakpointValue(Breakpoint[\"xs-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xs-max\"]),\n        },\n        {\n            key: \"sm\",\n            min: getBreakpointValue(Breakpoint[\"sm-min\"]),\n            max: getBreakpointValue(Breakpoint[\"sm-max\"]),\n        },\n        {\n            key: \"md\",\n            min: getBreakpointValue(Breakpoint[\"md-min\"]),\n            max: getBreakpointValue(Breakpoint[\"md-max\"]),\n        },\n        {\n            key: \"lg\",\n            min: getBreakpointValue(Breakpoint[\"lg-min\"]),\n            max: getBreakpointValue(Breakpoint[\"lg-max\"]),\n        },\n        {\n            key: \"xl\",\n            min: getBreakpointValue(Breakpoint[\"xl-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xl-max\"]),\n        },\n        {\n            key: \"xxl\",\n            min: getBreakpointValue(Breakpoint[\"xxl-min\"]),\n            max: Infinity,\n        },\n    ] as const;\n}\n\nconst BREAKPOINT_CLASS_PREFIX = \"fds-breakpoint-\";\n\nexport function applyBreakpointClasses(sourceElement: HTMLElement) {\n    const body = document.body;\n    const width = window.innerWidth;\n\n    [...body.classList].forEach((cls) => {\n        if (cls.startsWith(BREAKPOINT_CLASS_PREFIX)) {\n            body.classList.remove(cls);\n        }\n    });\n\n    const BREAKPOINT_RANGES = getBreakpointRanges(sourceElement);\n\n    BREAKPOINT_RANGES.forEach((range) => {\n        const minValue = parsePxOrRemValue(range.min);\n        const maxValue =\n            range.max === Infinity\n                ? Infinity\n                : parsePxOrRemValue(range.max as string);\n\n        const isMinMatched = width >= minValue;\n        const isMaxMatched = maxValue === Infinity ? false : width <= maxValue;\n        const isWithinRange =\n            isMinMatched && (maxValue === Infinity || isMaxMatched);\n\n        if (isWithinRange) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}`);\n        }\n\n        if (isMinMatched) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}-min`);\n        }\n\n        if (isMaxMatched) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}-max`);\n        }\n    });\n}\n\nexport function setupBreakpointListener(sourceElement: HTMLElement) {\n    if (!globalThis.window) return;\n\n    const handleBreakpointChange = () => {\n        applyBreakpointClasses(sourceElement);\n    };\n\n    handleBreakpointChange();\n    globalThis.window.addEventListener(\"resize\", handleBreakpointChange);\n\n    return () => {\n        globalThis.window.removeEventListener(\"resize\", handleBreakpointChange);\n    };\n}\n"],"names":["BREAKPOINT_CLASS_PREFIX","applyBreakpointClasses","sourceElement","body","document","width","window","innerWidth","classList","forEach","cls","startsWith","remove","BREAKPOINT_RANGES","getBreakpointValue","token","scopedValue","parseCSSVariableValue","documentElement","key","min","Breakpoint","max","Infinity","getBreakpointRanges","range","minValue","parsePxOrRemValue","maxValue","isMinMatched","isMaxMatched","add","setupBreakpointListener","globalThis","handleBreakpointChange","addEventListener","removeEventListener"],"mappings":"qZAuDA,MAAMA,EAA0B,kBAE1B,SAAUC,EAAuBC,GACnC,MAAMC,EAAOC,SAASD,KAChBE,EAAQC,OAAOC,WAErB,IAAIJ,EAAKK,WAAWC,SAASC,IACrBA,EAAIC,WAAWX,IACfG,EAAKK,UAAUI,OAAOF,EAC1B,IAGJ,MAAMG,EA/DV,SAA6BX,GACzB,MAAMY,EAAsBC,IACxB,MAAMC,EAAcC,EAAsBF,EAAOb,GACjD,OAAIc,IAEAd,IAAkBE,SAASc,gBACpBD,EAAsBF,EAAOX,SAASc,iBAG1CF,EAAW,EAGtB,MAAO,CACH,CACIG,IAAK,MACLC,IAAKN,EAAmBO,EAAW,YACnCC,IAAKR,EAAmBO,EAAW,aAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,MACLC,IAAKN,EAAmBO,EAAW,YACnCC,IAAKC,KAGjB,CAc8BC,CAAoBtB,GAE9CW,EAAkBJ,SAASgB,IACvB,MAAMC,EAAWC,EAAkBF,EAAML,KACnCQ,EACFH,EAAMH,MAAQC,IACRA,IACAI,EAAkBF,EAAMH,KAE5BO,EAAexB,GAASqB,EACxBI,EAAeF,IAAaL,KAAmBlB,GAASuB,EAE1DC,IAAiBD,IAAaL,KAAYO,IAG1C3B,EAAKK,UAAUuB,IAAI,GAAG/B,IAA0ByB,EAAMN,OAGtDU,GACA1B,EAAKK,UAAUuB,IAAI,GAAG/B,IAA0ByB,EAAMN,WAGtDW,GACA3B,EAAKK,UAAUuB,IAAI,GAAG/B,IAA0ByB,EAAMN,UAC1D,GAER,CAEM,SAAUa,EAAwB9B,GACpC,IAAK+B,WAAW3B,OAAQ,OAExB,MAAM4B,EAAyB,KAC3BjC,EAAuBC,EAAc,EAMzC,OAHAgC,IACAD,WAAW3B,OAAO6B,iBAAiB,SAAUD,GAEtC,KACHD,WAAW3B,OAAO8B,oBAAoB,SAAUF,EAAuB,CAE/E"}

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"}