@lifesg/react-design-system 4.0.0-alpha.10 → 4.0.0-alpha.12

package/masthead/sgds-day.css

@@ -1,3 +1,298 @@
+:root {
+  /* Font Size - Display */
+  --sgds-font-size-display-sm: var(--sgds-font-size-32);
+  --sgds-font-size-display-md: var(--sgds-font-size-36);
+  --sgds-font-size-display-lg: var(--sgds-font-size-40);
+
+  /* Font Size - Heading */
+  --sgds-font-size-heading-sm: var(--sgds-font-size-20);
+  --sgds-font-size-heading-md: var(--sgds-font-size-24);
+  --sgds-font-size-heading-lg: var(--sgds-font-size-28);
+  --sgds-font-size-heading-xl: var(--sgds-font-size-32);
+
+  /* Font Size - Subtitle */
+  --sgds-font-size-subtitle-sm: var(--sgds-font-size-16);
+  --sgds-font-size-subtitle-md: var(--sgds-font-size-18);
+
+  /* Font Size - Body */
+  --sgds-font-size-body-sm: var(--sgds-font-size-14);
+  --sgds-font-size-body-md: var(--sgds-font-size-16);
+  --sgds-font-size-body-lg: var(--sgds-font-size-18);
+
+  /* Font Size - Label */
+  --sgds-font-size-label-xs: var(--sgds-font-size-12);
+  --sgds-font-size-label-sm: var(--sgds-font-size-14);
+  --sgds-font-size-label-md: var(--sgds-font-size-16);
+  --sgds-font-size-label-lg: var(--sgds-font-size-18);
+
+  /* Font Size - List */
+  --sgds-font-size-list-sm: var(--sgds-font-size-14);
+  --sgds-font-size-list-md: var(--sgds-font-size-16);
+  --sgds-font-size-list-lg: var(--sgds-font-size-18);
+
+  /* Font Size - Caption */
+  --sgds-font-size-caption-md: var(--sgds-font-size-14);
+
+  /* Font Size - Overline */
+  --sgds-font-size-overline-md: var(--sgds-font-size-14);
+
+  /* Font Size - Link */
+  --sgds-font-size-link-xs: var(--sgds-font-size-12);
+  --sgds-font-size-link-sm: var(--sgds-font-size-14);
+  --sgds-font-size-link-md: var(--sgds-font-size-16);
+  --sgds-font-size-link-lg: var(--sgds-font-size-18);
+
+  /* Line Height */
+  --sgds-line-height-3-xs: var(--sgds-line-height-16);
+  --sgds-line-height-2-xs: var(--sgds-line-height-20);
+  --sgds-line-height-xs: var(--sgds-line-height-24);
+  --sgds-line-height-sm: var(--sgds-line-height-24);
+  --sgds-line-height-md: var(--sgds-line-height-28);
+  --sgds-line-height-lg: var(--sgds-line-height-32);
+  --sgds-line-height-xl: var(--sgds-line-height-40);
+  --sgds-line-height-2-xl: var(--sgds-line-height-44);
+  --sgds-line-height-3-xl: var(--sgds-line-height-48);
+
+  /* Text - Gap */
+  --sgds-text-gap-2-xs: var(--sgds-spacer-2);
+  --sgds-text-gap-xs: var(--sgds-spacer-3);
+  --sgds-text-gap-sm: var(--sgds-spacer-3);
+  --sgds-text-gap-md: var(--sgds-spacer-4);
+  --sgds-text-gap-lg: var(--sgds-spacer-5);
+  --sgds-text-gap-xl: var(--sgds-spacer-6);
+  --sgds-text-gap-2-xl: var(--sgds-spacer-7);
+
+  /* Layout - Gap */
+  --sgds-layout-gap-2-xs: var(--sgds-spacer-2);
+  --sgds-layout-gap-xs: var(--sgds-spacer-3);
+  --sgds-layout-gap-sm: var(--sgds-spacer-4);
+  --sgds-layout-gap-md: var(--sgds-spacer-5);
+  --sgds-layout-gap-lg: var(--sgds-spacer-6);
+  --sgds-layout-gap-xl: var(--sgds-spacer-7);
+
+  /* Layout - Padding */
+  --sgds-layout-padding-xs: var(--sgds-spacer-5);
+  --sgds-layout-padding-sm: var(--sgds-spacer-6);
+  --sgds-layout-padding-md: var(--sgds-spacer-7);
+  --sgds-layout-padding-lg: var(--sgds-spacer-8);
+  --sgds-layout-padding-xl: var(--sgds-spacer-9);
+
+  /* Component - Gap */
+  --sgds-component-gap-xs: var(--sgds-spacer-3);
+  --sgds-component-gap-sm: var(--sgds-spacer-4);
+  --sgds-component-gap-md: var(--sgds-spacer-5);
+  --sgds-component-gap-lg: var(--sgds-spacer-6);
+  --sgds-component-gap-xl: var(--sgds-spacer-7);
+
+  /* Component - Padding */
+  --sgds-component-padding-xs: var(--sgds-spacer-5);
+  --sgds-component-padding-sm: var(--sgds-spacer-6);
+  --sgds-component-padding-md: var(--sgds-spacer-7);
+  --sgds-component-padding-lg: var(--sgds-spacer-8);
+  --sgds-component-padding-xl: var(--sgds-spacer-9);
+
+  /* Container - Width */
+  --sgds-container-width: var(--sgds-dimension-360);
+}
+
+@media screen and (min-width: 1024px) { /* For tablets and larger screens */
+  :root {
+    /* Font Size - Display */
+    --sgds-font-size-display-sm: var(--sgds-font-size-36);
+    --sgds-font-size-display-md: var(--sgds-font-size-44);
+    --sgds-font-size-display-lg: var(--sgds-font-size-52);
+
+    /* Font Size - Heading */
+    --sgds-font-size-heading-sm: var(--sgds-font-size-22);
+    --sgds-font-size-heading-md: var(--sgds-font-size-26);
+    --sgds-font-size-heading-lg: var(--sgds-font-size-30);
+    --sgds-font-size-heading-xl: var(--sgds-font-size-36);
+
+    /* Font Size - Subtitle */
+    --sgds-font-size-subtitle-sm: var(--sgds-font-size-16);
+    --sgds-font-size-subtitle-md: var(--sgds-font-size-20);
+
+    /* Font Size - Body */
+    --sgds-font-size-body-sm: var(--sgds-font-size-14);
+    --sgds-font-size-body-md: var(--sgds-font-size-16);
+    --sgds-font-size-body-lg: var(--sgds-font-size-20);
+
+    /* Font Size - Label */
+    --sgds-font-size-label-xs: var(--sgds-font-size-12);
+    --sgds-font-size-label-sm: var(--sgds-font-size-14);
+    --sgds-font-size-label-md: var(--sgds-font-size-16);
+    --sgds-font-size-label-lg: var(--sgds-font-size-20);
+
+    /* Font Size - List */
+    --sgds-font-size-list-sm: var(--sgds-font-size-14);
+    --sgds-font-size-list-md: var(--sgds-font-size-16);
+    --sgds-font-size-list-lg: var(--sgds-font-size-20);
+
+    /* Font Size - Caption */
+    --sgds-font-size-caption-md: var(--sgds-font-size-14);
+
+    /* Font Size - Overline */
+    --sgds-font-size-overline-md: var(--sgds-font-size-14);
+
+    /* Font Size - Link */
+    --sgds-font-size-link-xs: var(--sgds-font-size-12);
+    --sgds-font-size-link-sm: var(--sgds-font-size-14);
+    --sgds-font-size-link-md: var(--sgds-font-size-16);
+    --sgds-font-size-link-lg: var(--sgds-font-size-20);
+
+    /* Line Height */
+    --sgds-line-height-3-xs: var(--sgds-line-height-16);
+    --sgds-line-height-2-xs: var(--sgds-line-height-20);
+    --sgds-line-height-xs: var(--sgds-line-height-24);
+    --sgds-line-height-sm: var(--sgds-line-height-28);
+    --sgds-line-height-md: var(--sgds-line-height-32);
+    --sgds-line-height-lg: var(--sgds-line-height-36);
+    --sgds-line-height-xl: var(--sgds-line-height-44);
+    --sgds-line-height-2-xl: var(--sgds-line-height-52);
+    --sgds-line-height-3-xl: var(--sgds-line-height-60);
+
+    /* Text - Gap */
+    --sgds-text-gap-2-xs: var(--sgds-spacer-2);
+    --sgds-text-gap-xs: var(--sgds-spacer-3);
+    --sgds-text-gap-sm: var(--sgds-spacer-4);
+    --sgds-text-gap-md: var(--sgds-spacer-5);
+    --sgds-text-gap-lg: var(--sgds-spacer-6);
+    --sgds-text-gap-xl: var(--sgds-spacer-7);
+    --sgds-text-gap-2-xl: var(--sgds-spacer-8);
+
+    /* Layout - Gap */
+    --sgds-layout-gap-2-xs: var(--sgds-spacer-4);
+    --sgds-layout-gap-xs: var(--sgds-spacer-5);
+    --sgds-layout-gap-sm: var(--sgds-spacer-6);
+    --sgds-layout-gap-md: var(--sgds-spacer-7);
+    --sgds-layout-gap-lg: var(--sgds-spacer-8);
+    --sgds-layout-gap-xl: var(--sgds-spacer-9);
+
+    /* Layout - Padding */
+    --sgds-layout-padding-xs: var(--sgds-spacer-6);
+    --sgds-layout-padding-sm: var(--sgds-spacer-7);
+    --sgds-layout-padding-md: var(--sgds-spacer-8);
+    --sgds-layout-padding-lg: var(--sgds-spacer-9);
+    --sgds-layout-padding-xl: var(--sgds-spacer-10);
+    
+    /* Component - Gap */
+    --sgds-component-gap-xs: var(--sgds-spacer-5);
+    --sgds-component-gap-sm: var(--sgds-spacer-6);
+    --sgds-component-gap-md: var(--sgds-spacer-7);
+    --sgds-component-gap-lg: var(--sgds-spacer-8);
+    --sgds-component-gap-xl: var(--sgds-spacer-9);
+
+    /* Component - Padding */
+    --sgds-component-padding-xs: var(--sgds-spacer-6);
+    --sgds-component-padding-sm: var(--sgds-spacer-7);
+    --sgds-component-padding-md: var(--sgds-spacer-8);
+    --sgds-component-padding-lg: var(--sgds-spacer-9);
+    --sgds-component-padding-xl: var(--sgds-spacer-10);
+
+    /* Container - Width */
+    --sgds-container-width: var(--sgds-dimension-888);
+  }
+}
+
+@media screen and (min-width: 1440px) { /* For desktops */
+  :root {
+    /* Font Size - Display */
+    --sgds-font-size-display-sm: var(--sgds-font-size-40);
+    --sgds-font-size-display-md: var(--sgds-font-size-48);
+    --sgds-font-size-display-lg: var(--sgds-font-size-56);
+
+    /* Font Size - Heading */
+    --sgds-font-size-heading-sm: var(--sgds-font-size-24);
+    --sgds-font-size-heading-md: var(--sgds-font-size-28);
+    --sgds-font-size-heading-lg: var(--sgds-font-size-32);
+    --sgds-font-size-heading-xl: var(--sgds-font-size-40);
+
+    /* Font Size - Subtitle */
+    --sgds-font-size-subtitle-sm: var(--sgds-font-size-16);
+    --sgds-font-size-subtitle-md: var(--sgds-font-size-20);
+
+    /* Font Size - Body */
+    --sgds-font-size-body-sm: var(--sgds-font-size-14);
+    --sgds-font-size-body-md: var(--sgds-font-size-16);
+    --sgds-font-size-body-lg: var(--sgds-font-size-20);
+
+    /* Font Size - Label */
+    --sgds-font-size-label-xs: var(--sgds-font-size-12);
+    --sgds-font-size-label-sm: var(--sgds-font-size-14);
+    --sgds-font-size-label-md: var(--sgds-font-size-16);
+    --sgds-font-size-label-lg: var(--sgds-font-size-20);
+
+    /* Font Size - List */
+    --sgds-font-size-list-sm: var(--sgds-font-size-14);
+    --sgds-font-size-list-md: var(--sgds-font-size-16);
+    --sgds-font-size-list-lg: var(--sgds-font-size-20);
+
+    /* Font Size - Caption */
+    --sgds-font-size-caption-md: var(--sgds-font-size-14);
+
+    /* Font Size - Overline */
+    --sgds-font-size-overline-md: var(--sgds-font-size-14);
+
+    /* Font Size - Link */
+    --sgds-font-size-link-xs: var(--sgds-font-size-12);
+    --sgds-font-size-link-sm: var(--sgds-font-size-14);
+    --sgds-font-size-link-md: var(--sgds-font-size-16);
+    --sgds-font-size-link-lg: var(--sgds-font-size-20);
+
+    /* Line Height */
+    --sgds-line-height-3-xs: var(--sgds-line-height-16);
+    --sgds-line-height-2-xs: var(--sgds-line-height-20);
+    --sgds-line-height-xs: var(--sgds-line-height-24);
+    --sgds-line-height-sm: var(--sgds-line-height-28);
+    --sgds-line-height-md: var(--sgds-line-height-32);
+    --sgds-line-height-lg: var(--sgds-line-height-40);
+    --sgds-line-height-xl: var(--sgds-line-height-48);
+    --sgds-line-height-2-xl: var(--sgds-line-height-56);
+    --sgds-line-height-3-xl: var(--sgds-line-height-64);
+
+    /* Text - Gap */
+    --sgds-text-gap-2-xs: var(--sgds-spacer-2);
+    --sgds-text-gap-xs: var(--sgds-spacer-3);
+    --sgds-text-gap-sm: var(--sgds-spacer-4);
+    --sgds-text-gap-md: var(--sgds-spacer-5);
+    --sgds-text-gap-lg: var(--sgds-spacer-6);
+    --sgds-text-gap-xl: var(--sgds-spacer-7);
+    --sgds-text-gap-2-xl: var(--sgds-spacer-8);
+
+    /* Layout - Gap */
+    --sgds-layout-gap-2-xs: var(--sgds-spacer-5);
+    --sgds-layout-gap-xs: var(--sgds-spacer-6);
+    --sgds-layout-gap-sm: var(--sgds-spacer-7);
+    --sgds-layout-gap-md: var(--sgds-spacer-8);
+    --sgds-layout-gap-lg: var(--sgds-spacer-9);
+    --sgds-layout-gap-xl: var(--sgds-spacer-10);
+
+    /* Layout - Padding */
+    --sgds-layout-padding-xs: var(--sgds-spacer-7);
+    --sgds-layout-padding-sm: var(--sgds-spacer-8);
+    --sgds-layout-padding-md: var(--sgds-spacer-9);
+    --sgds-layout-padding-lg: var(--sgds-spacer-10);
+    --sgds-layout-padding-xl: var(--sgds-spacer-11);
+
+    /* Component - Gap */
+    --sgds-component-gap-xs: var(--sgds-spacer-6);
+    --sgds-component-gap-sm: var(--sgds-spacer-7);
+    --sgds-component-gap-md: var(--sgds-spacer-8);
+    --sgds-component-gap-lg: var(--sgds-spacer-9);
+    --sgds-component-gap-xl: var(--sgds-spacer-10);
+
+    /* Component - Padding */
+    --sgds-component-padding-xs: var(--sgds-spacer-7);
+    --sgds-component-padding-sm: var(--sgds-spacer-8);
+    --sgds-component-padding-md: var(--sgds-spacer-9);
+    --sgds-component-padding-lg: var(--sgds-spacer-10);
+    --sgds-component-padding-xl: var(--sgds-spacer-11);
+
+    /* Container - Width */
+    --sgds-container-width: var(--sgds-dimension-1312);
+  }
+}
+
 :root {
   /* Primitive - Product Primary Color */
   --sgds-product-primary-100: #f4f2fe;
@@ -22,15 +317,15 @@
   --sgds-purple-900: #460c5a;
 
   /* Primitive - Cyan Color */
-  --sgds-cyan-100: #DBf9fd;
-  --sgds-cyan-200: #94edfa;
-  --sgds-cyan-300: #24d5ee;
-  --sgds-cyan-400: #1fb5ca;
-  --sgds-cyan-500: #1993a4;
-  --sgds-cyan-600: #147583;
-  --sgds-cyan-700: #0f5a65;
-  --sgds-cyan-800: #0b434b;
-  --sgds-cyan-900: #082e34;
+  --sgds-cyan-100: #e0f7fc;
+  --sgds-cyan-200: #a8e9f7;
+  --sgds-cyan-300: #49d2ef;
+  --sgds-cyan-400: #00b4da;
+  --sgds-cyan-500: #0092b1;
+  --sgds-cyan-600: #00758d;
+  --sgds-cyan-700: #005a6d;
+  --sgds-cyan-800: #004352;
+  --sgds-cyan-900: #002f38;
 
   /* Primitive - Green Color */
   --sgds-green-100: #e3f9ed;
@@ -78,6 +373,7 @@
 
   /* Primitive - Gray Color */
   --sgds-gray-000: #ffffff;
+  --sgds-gray-50: #f7f7f7;
   --sgds-gray-100: #f3f3f3;
   --sgds-gray-200: #dfdfdf;
   --sgds-gray-300: #c6c6c6;
@@ -107,6 +403,7 @@
   --sgds-border-radius-lg: 12px;
   --sgds-border-radius-xl: 16px;
   --sgds-border-radius-2-xl: 24px;
+  --sgds-border-radius-3-xl: 32px;
   --sgds-border-radius-full: 999px;
   --sgds-form-border-radius-none: var(--sgds-border-radius-none);
   --sgds-form-border-radius-xs: var(--sgds-border-radius-xs);
@@ -122,6 +419,13 @@
   --sgds-breakpoint-xl: var(--sgds-dimension-1280);
   --sgds-breakpoint-2-xl: var(--sgds-dimension-1440);
 
+  /* Primitive - Breakpoint with sticky side bar*/
+  --sgds-breakpoint-sbar-md: var(--sgds-dimension-768);
+  --sgds-breakpoint-sbar-lg: var(--sgds-dimension-1024);
+  --sgds-breakpoint-sbar-xl: var(--sgds-dimension-1280);
+  --sgds-breakpoint-sbar-2-xl: var(--sgds-dimension-1440);
+  --sgds-breakpoint-sbar-3-xl: var(--sgds-dimension-1680px);
+
   /* Primitive - Font Family */
   --sgds-font-family-brand: "Inter", system-ui, sans-serif;
 
@@ -132,6 +436,8 @@
   --sgds-font-weight-bold: 700;
 
   /* Primitive - Font Size */
+  /* --sgds-font-size-0 to --sgds-font-size-9 is deprecated in v3.7.0 */
+  --sgds-font-size-0: 0.75rem;
   --sgds-font-size-1: 0.875rem;
   --sgds-font-size-2: 1rem;
   --sgds-font-size-3: 1.25rem;
@@ -141,8 +447,26 @@
   --sgds-font-size-7: 2.5rem;
   --sgds-font-size-8: 3rem;
   --sgds-font-size-9: 3.5rem;
+  --sgds-font-size-12: 0.75rem;
+  --sgds-font-size-14: 0.875rem;
+  --sgds-font-size-16: 1rem;
+  --sgds-font-size-18: 1.125rem;
+  --sgds-font-size-20: 1.25rem;
+  --sgds-font-size-22: 1.375rem;
+  --sgds-font-size-24: 1.5rem;
+  --sgds-font-size-26: 1.625rem;
+  --sgds-font-size-28: 1.75rem;
+  --sgds-font-size-30: 1.875rem;
+  --sgds-font-size-32: 2rem;
+  --sgds-font-size-36: 2.25rem;
+  --sgds-font-size-40: 2.5rem;
+  --sgds-font-size-44: 2.75rem;
+  --sgds-font-size-48: 3rem;
+  --sgds-font-size-52: 3.25rem;
+  --sgds-font-size-56: 3.5rem;
 
   /* Primitive - Icon Size */
+  --sgds-icon-size-xs: 0.75rem;
   --sgds-icon-size-sm: 1rem;
   --sgds-icon-size-md: 1.25rem;
   --sgds-icon-size-lg: 1.5rem;
@@ -158,12 +482,23 @@
   --sgds-letter-spacing-wider: 2px;
 
   /* Primitive - Line Height */
-  --sgds-line-height-body: 1.5;
-  --sgds-line-height-heading: 1.2;
-  --sgds-line-height-min: 20px;
+  --sgds-line-height-16: 16px;
+  --sgds-line-height-20: 20px;
+  --sgds-line-height-24: 24px;
+  --sgds-line-height-28: 28px;
+  --sgds-line-height-32: 32px;
+  --sgds-line-height-36: 36px;
+  --sgds-line-height-40: 40px;
+  --sgds-line-height-44: 44px;
+  --sgds-line-height-48: 48px;
+  --sgds-line-height-52: 52px;
+  --sgds-line-height-56: 56px;
+  --sgds-line-height-60: 60px;
+  --sgds-line-height-64: 64px;
 
   /* Primitive - Opacity */
   --sgds-opacity-0: 0;
+  --sgds-opacity-3: 0.03;
   --sgds-opacity-5: 0.05;
   --sgds-opacity-10: 0.1;
   --sgds-opacity-20: 0.2;
@@ -183,6 +518,11 @@
   --sgds-paragraph-spacing-lg: 1.5rem;
   --sgds-paragraph-spacing-xl: 2rem;
 
+  /* Primitive - List Spacing */
+  --sgds-list-spacing-sm: 0.5rem;
+  --sgds-list-spacing-md: 0.75rem;
+  --sgds-list-spacing-lg: 1rem;
+
   /* Primitive - Spacer */
   --sgds-spacer-0: 0rem;
   --sgds-spacer-1: 0.125rem;
@@ -208,6 +548,7 @@
   --sgds-dimension-16: 16px;
   --sgds-dimension-20: 20px;
   --sgds-dimension-24: 24px;
+  --sgds-dimension-28: 28px;
   --sgds-dimension-32: 32px;
   --sgds-dimension-40: 40px;
   --sgds-dimension-48: 48px;
@@ -215,6 +556,7 @@
   --sgds-dimension-56: 56px;
   --sgds-dimension-60: 60px;
   --sgds-dimension-64: 64px;
+  --sgds-dimension-68: 68px;
   --sgds-dimension-72: 72px;
   --sgds-dimension-76: 76px;
   --sgds-dimension-80: 80px;
@@ -226,6 +568,7 @@
   --sgds-dimension-132: 132px;
   --sgds-dimension-136: 136px;
   --sgds-dimension-144: 144px;
+  --sgds-dimension-160: 160px;
   --sgds-dimension-168: 168px;
   --sgds-dimension-192: 192px;
   --sgds-dimension-224: 224px;
@@ -234,15 +577,30 @@
   --sgds-dimension-288: 288px;
   --sgds-dimension-320: 320px;
   --sgds-dimension-328: 328px;
+  --sgds-dimension-332: 332px;
   --sgds-dimension-340: 340px;
+  --sgds-dimension-344: 344px;
+  --sgds-dimension-360: 360px;
   --sgds-dimension-384: 384px;
+  --sgds-dimension-400: 400px;
   --sgds-dimension-480: 480px;
   --sgds-dimension-512: 512px;
+  --sgds-dimension-640: 640px;
   --sgds-dimension-688: 688px;
   --sgds-dimension-768: 768px;
+  --sgds-dimension-800: 800px;
+  --sgds-dimension-840: 840px;
+  --sgds-dimension-864: 864px;
+  --sgds-dimension-872: 872px;
+  --sgds-dimension-888: 888px;
+  --sgds-dimension-960: 960px;
   --sgds-dimension-1024: 1024px;
+  --sgds-dimension-1168: 1168px;
   --sgds-dimension-1280: 1280px;
+  --sgds-dimension-1296: 1296px;
+  --sgds-dimension-1312: 1312px;
   --sgds-dimension-1440: 1440px;
+  --sgds-dimension-1680px: 1680px;
 
   /* Semantic - Padding */
   --sgds-padding-none: var(--sgds-spacer-0);
@@ -265,16 +623,23 @@
   --sgds-form-padding-inline-lg: var(--sgds-padding-sm);
   --sgds-form-padding-inline-xl: var(--sgds-padding-md);
 
+  /* NEW - MARGIN */
   --sgds-margin-none: var(--sgds-spacer-0);
-  --sgds-margin-3-xs: var(--sgds-spacer-3);
-  --sgds-margin-2-xs: var(--sgds-spacer-5);
-  --sgds-margin-xs: var(--sgds-spacer-6);
-  --sgds-margin-sm: var(--sgds-spacer-7);
-  --sgds-margin-md: var(--sgds-spacer-8);
-  --sgds-margin-lg: var(--sgds-spacer-9);
-  --sgds-margin-xl: var(--sgds-spacer-10);
-  --sgds-margin-2-xl: var(--sgds-spacer-11);
-  --sgds-margin-3-xl: var(--sgds-spacer-12);
+  --sgds-margin-3-xs: var(--sgds-spacer-1);
+  --sgds-margin-2-xs: var(--sgds-spacer-2);
+  --sgds-margin-xs: var(--sgds-spacer-3);
+  --sgds-margin-sm: var(--sgds-spacer-4);
+  --sgds-margin-md: var(--sgds-spacer-5);
+  --sgds-margin-lg: var(--sgds-spacer-6);
+  --sgds-margin-xl: var(--sgds-spacer-7);
+  --sgds-margin-2-xl: var(--sgds-spacer-8);
+  --sgds-margin-3-xl: var(--sgds-spacer-9);
+  --sgds-margin-4-xl: var(--sgds-spacer-10);
+  --sgds-margin-5-xl: var(--sgds-spacer-11);
+
+  --sgds-gutter-sm: var(--sgds-dimension-16);
+  --sgds-gutter-md: var(--sgds-dimension-24);
+  --sgds-gutter-lg: var(--sgds-dimension-32);
 
   --sgds-gap-none: var(--sgds-spacer-0);
   --sgds-gap-2-xs: var(--sgds-spacer-2);
@@ -284,6 +649,7 @@
   --sgds-gap-lg: var(--sgds-spacer-6);
   --sgds-gap-xl: var(--sgds-spacer-7);
   --sgds-gap-2-xl: var(--sgds-spacer-8);
+  --sgds-gap-3-xl: var(--sgds-spacer-9);
   --sgds-form-gap-sm: var(--sgds-gap-2-xs);
   --sgds-form-gap-md: var(--sgds-gap-xs);
   --sgds-form-gap-lg: var(--sgds-gap-sm);
@@ -315,26 +681,78 @@
   --sgds-form-icon-size-md: var(--sgds-icon-size-md);
   --sgds-form-icon-size-lg: var(--sgds-icon-size-lg);
 
-  --sgds-box-shadow-focus: 0px 0px 0px 4px var(--sgds-blue-400);
-  --sgds-form-box-shadow-focus: var(--sgds-box-shadow-focus);
+  --sgds-outline-focus: var(--sgds-border-width-2) solid var(--sgds-blue-400);
+  --sgds-outline-offset-focus: calc(-1 * var(--sgds-border-width-2));
+  --sgds-form-outline-focus: var(--sgds-outline-focus);
+  --sgds-form-outline-offset-focus: var(--sgds-outline-offset-focus);
+
+  /* Semantic - Text Max Width */
+  --sgds-text-max-width: var(--sgds-dimension-864);
+
+  /* Semantic - Container Max Width */
+  --sgds-container-max-width-md: var(--sgds-dimension-768);
+  --sgds-container-max-width-lg: var(--sgds-dimension-888);
+  --sgds-container-max-width-xl: var(--sgds-dimension-1168);
+  --sgds-container-max-width-2-xl: var(--sgds-dimension-1312);
+  --sgds-container-max-width-3-xl: var(--sgds-dimension-1440);
 
   /* Masthead and Mainnav Max Width and Padding */
   --sgds-mainnav-max-width: 1440px;
   --sgds-mainnav-padding-x: 2rem;
   --sgds-mainnav-mobile-padding-x: 1.25rem;
+
+  /* Foundation - Motion Easing  */
+  --sgds-motion-easing-enter: cubic-bezier(0.1, 0, 0.5, 0);
+  --sgds-motion-easing-exit: cubic-bezier(0.15, 0.6, 0.6, 1);
+  --sgds-motion-easing-standard: cubic-bezier(0.25, 0, 0.25, 1);
+
+  /* Foundation - Motion Duration  */
+  --sgds-motion-duration-faster: 100ms;
+  --sgds-motion-duration-fast: 200ms;
+  --sgds-motion-duration-standard: 300ms;
+  --sgds-motion-duration-slow: 400ms;
+  --sgds-motion-duration-slower: 500ms;
+
+  /* Foundation - Z-Index Primitive */
+  --sgds-z-index-0: 0;
+  --sgds-z-index-100: 100;
+  --sgds-z-index-200: 200;
+  --sgds-z-index-400: 400;
+  --sgds-z-index-800: 800;
+  --sgds-z-index-1600: 1600;
+
+  /* Semantic - Z-Index */
+  --sgds-z-index-base: var(--sgds-z-index-0);
+  --sgds-z-index-raised: var(--sgds-z-index-100);
+  --sgds-z-index-sticky: var(--sgds-z-index-200);
+  --sgds-z-index-floating: var(--sgds-z-index-400);
+  --sgds-z-index-overlay: var(--sgds-z-index-800);
+  --sgds-z-index-modal: var(--sgds-z-index-1600);
+  /* Elevation */
+  --sgds-elevation-surface-1: 0 0 2px 0 rgba(14, 14, 14, 0.16);
+  --sgds-elevation-surface-2: 0 0 2px 0 rgba(14, 14, 14, 0.16), 0 2px 4px 0 rgba(14, 14, 14, 0.08);
+  --sgds-elevation-surface-3: 0 0 2px 0 rgba(14, 14, 14, 0.16), 0 4px 8px 0 rgba(14, 14, 14, 0.08);
+  --sgds-elevation-surface-4: 0 0 2px 0 rgba(14, 14, 14, 0.16), 0 8px 16px 0 rgba(14, 14, 14, 0.08);
+  --sgds-elevation-surface-5: 0 0 2px 0 rgba(14, 14, 14, 0.16), 0 16px 32px 0 rgba(14, 14, 14, 0.08);
+  --sgds-elevation-edge-top: 0 -2px 4px 0 rgba(14, 14, 14, 0.08);
+  --sgds-elevation-edge-bottom: 0 2px 4px 0 rgba(14, 14, 14, 0.08);
 }
 :root {
   color-scheme: only light;
+  --sgds-color-scheme: only light;
 
   /* Semantic - Default Colors */
   --sgds-bg-default: var(--sgds-gray-000);
-  --sgds-bg-alternate: var(--sgds-gray-100);
+  --sgds-bg-alternate: var(--sgds-gray-50);
   --sgds-bg-fixed-light: var(--sgds-gray-000);
   --sgds-bg-fixed-dark: var(--sgds-gray-1100);
-  --sgds-bg-overlay: oklch(from var(--sgds-gray-1100) l c h / 0.4);
+  --sgds-bg-overlay: oklch(from var(--sgds-gray-1100) l c h / 0.5);
   --sgds-bg-translucent: oklch(from var(--sgds-gray-1100) l c h / 0.1);
   --sgds-bg-translucent-subtle: oklch(from var(--sgds-gray-1100) l c h / 0.05);
   --sgds-bg-transparent: transparent;
+  --sgds-bg-translucent-inverse: oklch(from var(--sgds-gray-000) l c h / 0.2);
+  --sgds-bg-translucent-fixed-dark: oklch(from var(--sgds-gray-1100) l c h / 0.2);
+  --sgds-bg-translucent-fixed-light: oklch(from var(--sgds-gray-000) l c h / 0.2);
   --sgds-surface-default: var(--sgds-gray-000);
   --sgds-surface-raised: var(--sgds-gray-100);
   --sgds-surface-inverse: var(--sgds-gray-900);
@@ -359,81 +777,125 @@
   --sgds-primary-bg-default: var(--sgds-product-primary-700);
   --sgds-primary-bg-muted: var(--sgds-product-primary-100);
   --sgds-primary-bg-translucent: oklch(from var(--sgds-product-primary-700) l c h / 0.1);
-  --sgds-primary-surface-default: var(--sgds-product-primary-700);
-  --sgds-primary-surface-emphasis: var(--sgds-product-primary-800);
+  --sgds-primary-surface-default: var(--sgds-product-primary-600);
+  --sgds-primary-surface-emphasis: var(--sgds-product-primary-700);
   --sgds-primary-surface-muted: var(--sgds-product-primary-100);
   --sgds-primary-surface-translucent: oklch(from var(--sgds-product-primary-700) l c h / 0.1);
   --sgds-primary-color-default: var(--sgds-product-primary-600);
   --sgds-primary-color-emphasis: var(--sgds-product-primary-700);
   --sgds-primary-color-fixed-light: var(--sgds-product-primary-400);
-  --sgds-primary-color-fixed-dark: var(--sgds-product-primary-700);
-  --sgds-primary-border-color-default: var(--sgds-product-primary-500);
+  --sgds-primary-color-fixed-dark: var(--sgds-product-primary-600);
+  --sgds-primary-border-color-default: var(--sgds-product-primary-600);
   --sgds-primary-border-color-emphasis: var(--sgds-product-primary-700);
-  --sgds-primary-border-color-muted: var(--sgds-product-primary-300);
+  --sgds-primary-border-color-muted: var(--sgds-product-primary-200);
+
+  /* Semantic - Accent Colors */
+  --sgds-accent-bg-default: var(--sgds-blue-700);
+  --sgds-accent-bg-muted: var(--sgds-blue-100);
+  --sgds-accent-surface-default: var(--sgds-blue-600);
+  --sgds-accent-surface-emphasis: var(--sgds-blue-700);
+  --sgds-accent-surface-muted: var(--sgds-blue-100);
+  --sgds-accent-color-default: var(--sgds-blue-600);
+  --sgds-accent-color-emphasis: var(--sgds-blue-700);
+  --sgds-accent-color-fixed-light: var(--sgds-blue-400);
+  --sgds-accent-color-fixed-dark: var(--sgds-blue-600);
+  --sgds-accent-border-color-default: var(--sgds-blue-500);
+  --sgds-accent-border-color-emphasis: var(--sgds-blue-700);
+  --sgds-accent-border-color-muted: var(--sgds-blue-200);
 
   /* Semantic - Success Colors */
   --sgds-success-bg-default: var(--sgds-green-700);
   --sgds-success-bg-muted: var(--sgds-green-100);
-  --sgds-success-surface-default: var(--sgds-green-700);
-  --sgds-success-surface-emphasis: var(--sgds-green-800);
+  --sgds-success-surface-default: var(--sgds-green-600);
+  --sgds-success-surface-emphasis: var(--sgds-green-700);
   --sgds-success-surface-muted: var(--sgds-green-100);
   --sgds-success-color-default: var(--sgds-green-600);
   --sgds-success-color-emphasis: var(--sgds-green-700);
   --sgds-success-color-fixed-light: var(--sgds-green-400);
-  --sgds-success-color-fixed-dark: var(--sgds-green-700);
-  --sgds-success-border-color-default: var(--sgds-green-500);
+  --sgds-success-color-fixed-dark: var(--sgds-green-600);
+  --sgds-success-border-color-default: var(--sgds-green-600);
   --sgds-success-border-color-emphasis: var(--sgds-green-700);
-  --sgds-success-border-color-muted: var(--sgds-green-300);
+  --sgds-success-border-color-muted: var(--sgds-green-200);
 
   /* Semantic - Danger Colors */
   --sgds-danger-bg-default: var(--sgds-red-700);
   --sgds-danger-bg-muted: var(--sgds-red-100);
-  --sgds-danger-surface-default: var(--sgds-red-700);
-  --sgds-danger-surface-emphasis: var(--sgds-red-800);
+  --sgds-danger-surface-default: var(--sgds-red-600);
+  --sgds-danger-surface-emphasis: var(--sgds-red-700);
   --sgds-danger-surface-muted: var(--sgds-red-100);
+  --sgds-danger-surface-translucent: oklch(from var(--sgds-red-700) l c h / 0.08);
   --sgds-danger-color-default: var(--sgds-red-600);
   --sgds-danger-color-emphasis: var(--sgds-red-700);
   --sgds-danger-color-fixed-light: var(--sgds-red-400);
-  --sgds-danger-color-fixed-dark: var(--sgds-red-700);
-  --sgds-danger-border-color-default: var(--sgds-red-500);
+  --sgds-danger-color-fixed-dark: var(--sgds-red-600);
+  --sgds-danger-border-color-default: var(--sgds-red-600);
   --sgds-danger-border-color-emphasis: var(--sgds-red-700);
-  --sgds-danger-border-color-muted: var(--sgds-red-300);
+  --sgds-danger-border-color-muted: var(--sgds-red-200);
 
   /* Semantic - Warning Colors */
   --sgds-warning-bg-default: var(--sgds-yellow-200);
   --sgds-warning-bg-muted: var(--sgds-yellow-100);
   --sgds-warning-surface-default: var(--sgds-yellow-200);
-  --sgds-warning-surface-emphasis: var(--sgds-yellow-700);
+  --sgds-warning-surface-emphasis: var(--sgds-yellow-600);
   --sgds-warning-surface-muted: var(--sgds-yellow-100);
   --sgds-warning-color-default: var(--sgds-yellow-600);
   --sgds-warning-color-emphasis: var(--sgds-yellow-700);
   --sgds-warning-color-fixed-light: var(--sgds-yellow-300);
-  --sgds-warning-color-fixed-dark: var(--sgds-yellow-700);
-  --sgds-warning-border-color-default: var(--sgds-yellow-500);
+  --sgds-warning-color-fixed-dark: var(--sgds-yellow-600);
+  --sgds-warning-border-color-default: var(--sgds-yellow-600);
   --sgds-warning-border-color-emphasis: var(--sgds-yellow-700);
-  --sgds-warning-border-color-muted: var(--sgds-yellow-300);
+  --sgds-warning-border-color-muted: var(--sgds-yellow-200);
+
+  /* Semantic - Purple Colors */
+  --sgds-purple-bg-default: var(--sgds-purple-700);
+  --sgds-purple-bg-muted: var(--sgds-purple-100);
+  --sgds-purple-surface-default: var(--sgds-purple-600);
+  --sgds-purple-surface-emphasis: var(--sgds-purple-700);
+  --sgds-purple-surface-muted: var(--sgds-purple-100);
+  --sgds-purple-color-default: var(--sgds-purple-600);
+  --sgds-purple-color-emphasis: var(--sgds-purple-700);
+  --sgds-purple-color-fixed-light: var(--sgds-purple-400);
+  --sgds-purple-color-fixed-dark: var(--sgds-purple-600);
+  --sgds-purple-border-color-default: var(--sgds-purple-500);
+  --sgds-purple-border-color-emphasis: var(--sgds-purple-700);
+  --sgds-purple-border-color-muted: var(--sgds-purple-200);
+
+  /* Semantic - Cyan Colors */
+  --sgds-cyan-bg-default: var(--sgds-cyan-700);
+  --sgds-cyan-bg-muted: var(--sgds-cyan-100);
+  --sgds-cyan-surface-default: var(--sgds-cyan-600);
+  --sgds-cyan-surface-emphasis: var(--sgds-cyan-700);
+  --sgds-cyan-surface-muted: var(--sgds-cyan-100);
+  --sgds-cyan-color-default: var(--sgds-cyan-600);
+  --sgds-cyan-color-emphasis: var(--sgds-cyan-700);
+  --sgds-cyan-color-fixed-light: var(--sgds-cyan-400);
+  --sgds-cyan-color-fixed-dark: var(--sgds-cyan-600);
+  --sgds-cyan-border-color-default: var(--sgds-cyan-500);
+  --sgds-cyan-border-color-emphasis: var(--sgds-cyan-700);
+  --sgds-cyan-border-color-muted: var(--sgds-cyan-200);
 
   /* Semantic - Neutral Colors */
   --sgds-neutral-bg-default: var(--sgds-gray-700);
   --sgds-neutral-bg-muted: var(--sgds-gray-100);
-  --sgds-neutral-surface-default: var(--sgds-gray-800);
+  --sgds-neutral-surface-default: var(--sgds-gray-700);
   --sgds-neutral-surface-emphasis: var(--sgds-gray-800);
   --sgds-neutral-surface-muted: var(--sgds-gray-100);
+  --sgds-neutral-surface-translucent: oklch(from var(--sgds-gray-1100) l c h / 0.15);
   --sgds-neutral-color-default: var(--sgds-gray-600);
   --sgds-neutral-color-emphasis: var(--sgds-gray-700);
   --sgds-neutral-color-fixed-light: var(--sgds-gray-400);
-  --sgds-neutral-color-fixed-dark: var(--sgds-gray-700);
-  --sgds-neutral-border-color-default: var(--sgds-gray-500);
+  --sgds-neutral-color-fixed-dark: var(--sgds-gray-600);
+  --sgds-neutral-border-color-default: var(--sgds-gray-600);
   --sgds-neutral-border-color-emphasis: var(--sgds-gray-700);
-  --sgds-neutral-border-color-subtle: var(--sgds-gray-300);
+  --sgds-neutral-border-color-muted: var(--sgds-gray-200);
 
   /* Semantic - Display Colors */
   --sgds-display-color-default: var(--sgds-gray-1000);
   --sgds-display-color-subtle: var(--sgds-gray-800);
 
-  /* Semantic - Header Colors */
-  --sgds-header-color-default: var(--sgds-gray-900);
-  --sgds-header-color-subtle: var(--sgds-gray-800);
+  /* Semantic - Heading Colors */
+  --sgds-heading-color-default: var(--sgds-gray-900);
+  --sgds-heading-color-subtle: var(--sgds-gray-800);
 
   /* Semantic - Body Colors */
   --sgds-body-color-default: var(--sgds-gray-1000);
@@ -443,15 +905,13 @@
   --sgds-label-color-default: var(--sgds-gray-900);
   --sgds-label-color-subtle: var(--sgds-gray-700);
 
-  /* Semantic - Caption Color */
-  --sgds-caption-color: var(--sgds-gray-600);
-
   /* Semantic - Link Color */
   --sgds-link-color-default: var(--sgds-blue-600);
   --sgds-link-color-emphasis: var(--sgds-blue-700);
 
   /* Semantic - Form Color */
   --sgds-form-surface-default: var(--sgds-gray-000);
+  --sgds-form-surface-raised: var(--sgds-gray-100);
   --sgds-form-surface-emphasis: var(--sgds-gray-700);
   --sgds-form-surface-subtle: var(--sgds-gray-400);
   --sgds-form-surface-muted: var(--sgds-gray-200);
@@ -464,13 +924,13 @@
   --sgds-form-color-inverse: var(--sgds-gray-100);
   --sgds-form-color-fixed-light: var(--sgds-gray-000);
   --sgds-form-color-fixed-dark: var(--sgds-gray-1100);
-  --sgds-form-primary-surface-default: var(--sgds-product-primary-700);
-  --sgds-form-primary-surface-emphasis: var(--sgds-product-primary-800);
-  --sgds-form-primary-color-default: var(--sgds-product-primary-700);
-  --sgds-form-success-surface-default: var(--sgds-green-700);
+  --sgds-form-primary-surface-default: var(--sgds-product-primary-600);
+  --sgds-form-primary-surface-emphasis: var(--sgds-product-primary-700);
+  --sgds-form-primary-color-default: var(--sgds-product-primary-600);
+  --sgds-form-success-surface-default: var(--sgds-green-600);
   --sgds-form-success-color-default: var(--sgds-green-600);
   --sgds-form-success-border-color-default: var(--sgds-green-500);
-  --sgds-form-danger-surface-default: var(--sgds-red-700);
+  --sgds-form-danger-surface-default: var(--sgds-red-600);
   --sgds-form-danger-color-default: var(--sgds-red-600);
   --sgds-form-danger-border-color-default: var(--sgds-red-500);
 }