tide-design-system 2.0.54 → 2.1.1

package/.storybook/main.ts

@@ -29,6 +29,7 @@ const config: StorybookConfig = {
     '../src/stories/TideButton.stories.ts',
     '../src/stories/TideButtonIcon.stories.ts',
     '../src/stories/TideButtonPagination.stories.ts',
+    '../src/stories/TideButtonSegmented.stories.ts',
     '../src/stories/TideCard.stories.ts',
     '../src/stories/TideCarousel.stories.ts',
     '../src/stories/TideChipAction.stories.ts',
@@ -46,10 +47,9 @@ const config: StorybookConfig = {
     '../src/stories/TideInputTextarea.stories.ts',
     '../src/stories/TideLink.stories.ts',
     '../src/stories/TideModal.stories.ts',
+    '../src/stories/TideSwitch.stories.ts',
     // '../src/stories/TidePagination.stories.ts',
     // '../src/stories/TideSeoLinks.stories.ts',
-    '../src/stories/TideTabs.stories.ts',
-    '../src/stories/TideToggle.stories.ts',
   ],
   viteFinal: async (config, { configType }) => {
     if (config.build) config.build.sourcemap = 'inline'

package/.storybook/preview.ts

@@ -34,7 +34,6 @@ const preview: Preview = {
         DemoCssUtilitiesByTextInput.title,
         FoundationsGrid.title,
         FoundationsMargin.title,
-        TideCarousel.title,
       ];
 
       const decoratorCss = decoratorOptOuts.includes(context.title) ? '' : 'tide-padding-top-2 tide-padding-x-2';
@@ -121,10 +120,6 @@ const preview: Preview = {
             title: 'Surface: Accent',
             value: 'tide-bg-surface-accent',
           },
-          {
-            title: 'Surface: Accent Variant',
-            value: 'tide-bg-surface-accent-variant',
-          },
           {
             title: 'Surface: Gradient',
             value: 'tide-bg-surface-gradient',

package/dist/css/dynamic-utilities.css

@@ -6,7 +6,6 @@
 .tide-bg-surface-variant        {background: var(--tide-surface-variant);}
 .tide-bg-surface-brand          {background: var(--tide-surface-brand);}
 .tide-bg-surface-accent         {background: var(--tide-surface-accent);}
-.tide-bg-surface-accent-variant {background: var(--tide-surface-accent-variant);}
 .tide-bg-surface-gradient       {background: var(--tide-surface-gradient);}
 .tide-bg-surface-floating       {background: var(--tide-surface-floating);}
 

package/dist/css/realm/aero.css

@@ -1,43 +1,37 @@
 /* Aero Trader Realm Colors */
 :root {
   /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-color1:     #4e9ac8;
-  --tide-color2:     #006C97;
-  --tide-color3:     #83CBFB;
-  --tide-atmosphere: #E3E8F1;
-
-  --tide-gradient: linear-gradient(
-    to bottom right,
-    var(--tide-color3) 50%,
-    var(--tide-color2) 150%
-  );
-
-  --tide-floating: rgba(255, 255, 255, 0);
+  --tide-realm-aqua:       #90E0E6;
+  --tide-realm-atmosphere: #3F6EBD;
+  --tide-realm-cloud:      #E2E8F2;
+  --tide-realm-sky:        #AAD4F0;
+  --tide-realm-starry:     #153976;
 
   /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
-  --tide-primary:    var(--tide-color1);
-  --tide-on-primary: var(--tide-white);
-
-  --tide-secondary:    var(--tide-black);
-  --tide-on-secondary: var(--tide-white);
-
-  --tide-surface:                var(--tide-white);
-  --tide-surface-variant:        var(--tide-gray-200);
-  --tide-surface-brand:          var(--tide-color1);
-  --tide-surface-accent:         var(--tide-atmosphere);
-  --tide-surface-accent-variant: var(--tide-color3);
-  --tide-surface-gradient:       var(--tide-gradient);
-  --tide-surface-floating:       var(--tide-floating);
-
-  --tide-on-surface:         var(--tide-black);
-  --tide-on-surface-variant: var(--tide-gray-800);
-  --tide-on-surface-brand:   var(--tide-color1);
-
-  --tide-on-surface-inverse:         var(--tide-white);
-  --tide-on-surface-inverse-variant: var(--tide-transparent-200);
-
-  --tide-border:          var(--tide-gray-400);
-  --tide-border-low:      var(--tide-gray-600);
-  --tide-border-high:     var(--tide-black);
-  --tide-border-floating: var(--tide-gray-300);
+  --tide-primary:        var(--tide-realm-atmosphere);
+  --tide-surface-accent: var(--tide-realm-cloud);
+  --tide-surface-brand:  var(--tide-realm-starry);
+  
+  --tide-on-primary:       var(--tide-gray-100);
+  --tide-on-surface-brand: var(--tide-realm-starry);
+
+  --tide-surface-gradient:
+    /* bottom right */
+    radial-gradient(
+      57.27% 60.26% at 100% 103.53%,
+      color-mix(in srgb, var(--tide-realm-sky) 65%, transparent) 0%,
+      color-mix(in srgb, var(--tide-realm-sky) 0%, transparent) 100%
+    ),  
+    /* top */
+    radial-gradient(
+      157.36% 151.94% at 19.69% -3.53%,
+      color-mix(in srgb, var(--tide-realm-aqua) 42%, transparent) 28.37%,
+      color-mix(in srgb, var(--tide-realm-aqua) 0%, transparent) 100%
+    ),
+    /* bottom left */
+    radial-gradient(
+      41.93% 63.48% at -2.12% 103.9%,
+      color-mix(in srgb, var(--tide-realm-atmosphere) 32%, transparent) 0%,
+      color-mix(in srgb, var(--tide-realm-atmosphere) 0%, transparent) 100%
+    );
 }

package/dist/css/realm/atv.css

@@ -1,57 +1,37 @@
 /* ATV Trader Realm Colors */
 :root {
   /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-charcoal: #33383B;
-  --tide-maroon:   #9B2702;
-  --tide-orange:   #C7521A;
-  --tide-peach:    #EFBA88;
-  --tide-sand:     #F8EADD;
-
-  --tide-floating: rgba(0, 0, 0, 0);
+  --tide-realm-charcoal: #33383B;
+  --tide-realm-maroon:   #9B2702;
+  --tide-realm-orange:   #C7521A;
+  --tide-realm-peach:    #E59A49;
+  --tide-realm-sand:     #F8EADD;
 
   /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
-  --tide-primary:    var(--tide-orange);
-  --tide-on-primary: var(--tide-white);
-
-  --tide-secondary:    var(--tide-black);
-  --tide-on-secondary: var(--tide-white);
-
-  --tide-surface:                var(--tide-white);
-  --tide-surface-variant:        var(--tide-gray-200);
-  --tide-surface-brand:          var(--tide-charcoal);
-  --tide-surface-accent:         var(--tide-sand);
-  --tide-surface-accent-variant: var(--tide-maroon);
-  --tide-surface-floating:       var(--tide-floating);
+  --tide-primary:        var(--tide-realm-orange);
+  --tide-surface-accent: var(--tide-realm-sand);
+  --tide-surface-brand:  var(--tide-realm-charcoal);
+  
+  --tide-on-primary:       var(--tide-gray-100);
+  --tide-on-surface-brand: var(--tide-realm-orange);
 
   --tide-surface-gradient:
-    /* top */
-    radial-gradient(
-      157.36% 151.94% at 19.69% -3.53%,
-      color-mix(in srgb, var(--tide-surface-accent-variant) 72%, transparent) 28.37%,
-      color-mix(in srgb, var(--tide-surface-accent-variant) 0%, transparent) 100%
-    ),
     /* bottom right */
     radial-gradient(
       57.27% 60.26% at 100% 103.53%,
-      color-mix(in srgb, var(--tide-surface-accent) 22%, transparent) 0%,
-      color-mix(in srgb, var(--tide-surface-accent) 0%, transparent) 100%
+      color-mix(in srgb, var(--tide-realm-maroon) 27%, transparent) 0%,
+      color-mix(in srgb, var(--tide-realm-maroon) 0%, transparent) 100%
+    ),  
+    /* top */
+    radial-gradient(
+      157.36% 151.94% at 19.69% -3.53%,
+      color-mix(in srgb, var(--tide-realm-peach) 37%, transparent) 28.37%,
+      color-mix(in srgb, var(--tide-realm-peach) 0%, transparent) 100%
     ),
     /* bottom left */
     radial-gradient(
       41.93% 63.48% at -2.12% 103.9%,
-      color-mix(in srgb, var(--tide-surface-brand) 50%, transparent) 0%,
-      color-mix(in srgb, var(--tide-surface-brand) 0%, transparent) 100%
+      color-mix(in srgb, var(--tide-realm-orange) 44%, transparent) 0%,
+      color-mix(in srgb, var(--tide-realm-orange) 0%, transparent) 100%
     );
-
-  --tide-on-surface:         var(--tide-black);
-  --tide-on-surface-variant: var(--tide-gray-800);
-  --tide-on-surface-brand:   var(--tide-orange);
-
-  --tide-on-surface-inverse:         var(--tide-white);
-  --tide-on-surface-inverse-variant: var(--tide-transparent-200);
-
-  --tide-border:          var(--tide-gray-600);
-  --tide-border-low:      var(--tide-gray-400);
-  --tide-border-high:     var(--tide-black);
-  --tide-border-floating: var(--tide-gray-300);
 }

package/dist/css/realm/boatmart.css

@@ -1,57 +1,37 @@
 /* Boatmart Trader Realm Colors */
 :root {
   /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-navy:      #1D4977;
-  --tide-navy-dark: #143353;
-  --tide-mint:      #46CFD1;
-  --tide-sand:      #FFCF86;
-  --tide-mist:      #DBEDFC;
-
-  --tide-floating: rgba(255, 255, 255, 0);
+  --tide-realm-blue:      #499CC7;
+  --tide-realm-mist:      #DBEDFC;
+  --tide-realm-navy-dark: #143353;
+  --tide-realm-navy:      #1D4977;
+  --tide-realm-orange:    #FF642B;
 
   /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
-  --tide-primary:    var(--tide-navy);
-  --tide-on-primary: var(--tide-gray-100);
-
-  --tide-secondary:    var(--tide-gray-900);
-  --tide-on-secondary: var(--tide-gray-100);
+  --tide-primary:        var(--tide-realm-navy);
+  --tide-surface-accent: var(--tide-realm-mist);
+  --tide-surface-brand:  var(--tide-realm-navy-dark);
 
-  --tide-surface:                var(--tide-gray-100);
-  --tide-surface-variant:        var(--tide-gray-200);
-  --tide-surface-brand:          var(--tide-navy);
-  --tide-surface-accent:         var(--tide-mist);
-  --tide-surface-accent-variant: var(--tide-mint);
-  --tide-surface-floating:       var(--tide-floating);
+  --tide-on-primary:       var(--tide-gray-100);
+  --tide-on-surface-brand: var(--tide-realm-navy);
 
   --tide-surface-gradient:
-    /* top */
-    radial-gradient(
-      157.36% 151.94% at 19.69% -3.53%,
-      color-mix(in srgb, var(--tide-surface-accent-variant) 72%, transparent) 28.37%,
-      color-mix(in srgb, var(--tide-surface-accent-variant) 0%, transparent) 100%
-    ),
     /* bottom right */
     radial-gradient(
       57.27% 60.26% at 100% 103.53%,
-      color-mix(in srgb, var(--tide-surface-accent) 22%, transparent) 0%,
-      color-mix(in srgb, var(--tide-surface-accent) 0%, transparent) 100%
+      color-mix(in srgb, var(--tide-realm-orange) 12%, transparent) 0%,
+      color-mix(in srgb, var(--tide-realm-orange) 0%, transparent) 100%
+    ),  
+    /* top */
+    radial-gradient(
+      157.36% 151.94% at 19.69% -3.53%,
+      color-mix(in srgb, var(--tide-realm-blue) 27%, transparent) 28.37%,
+      color-mix(in srgb, var(--tide-realm-blue) 0%, transparent) 100%
     ),
     /* bottom left */
     radial-gradient(
       41.93% 63.48% at -2.12% 103.9%,
-      color-mix(in srgb, var(--tide-surface-brand) 50%, transparent) 0%,
-      color-mix(in srgb, var(--tide-surface-brand) 0%, transparent) 100%
+      color-mix(in srgb, var(--tide-realm-navy) 32%, transparent) 0%,
+      color-mix(in srgb, var(--tide-realm-navy) 0%, transparent) 100%
     );
-
-  --tide-on-surface:         var(--tide-gray-900);
-  --tide-on-surface-variant: var(--tide-gray-700);
-  --tide-on-surface-brand:   var(--tide-navy);
-
-  --tide-on-surface-inverse:         var(--tide-gray-100);
-  --tide-on-surface-inverse-variant: var(--tide-transparent-200);
-
-  --tide-border:          var(--tide-gray-600);
-  --tide-border-low:      var(--tide-gray-400);
-  --tide-border-high:     var(--tide-gray-900);
-  --tide-border-floating: var(--tide-gray-300);
 }

package/dist/css/realm/cycle.css

@@ -1,56 +1,36 @@
 /* Cycle Trader Realm Colors */
 :root {
   /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-pure-black: #000000;
-  --tide-red:        #C50000;
-  --tide-steel-blue: #C9DDE5;
-  --tide-light-blue: #DFECF2;
-
-  --tide-floating: rgba(255, 255, 255, 0);
+  --tide-realm-light-blue: #DFECF2;
+  --tide-realm-pure-black: #000000;
+  --tide-realm-red:        #C50000;
+  --tide-realm-steel-blue: #1C3F53;
 
   /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
-  --tide-primary:    var(--tide-pure-black);
-  --tide-on-primary: var(--tide-white);
-
-  --tide-secondary:    var(--tide-black);
-  --tide-on-secondary: var(--tide-white);
+  --tide-primary:        var(--tide-realm-pure-black);  
+  --tide-surface-accent: var(--tide-realm-light-blue);
+  --tide-surface-brand:  var(--tide-gray-900);
 
-  --tide-surface:                var(--tide-white);
-  --tide-surface-variant:        var(--tide-gray-200);
-  --tide-surface-brand:          var(--tide-pure-black);
-  --tide-surface-accent:         var(--tide-light-blue);
-  --tide-surface-accent-variant: var(--tide-steel-blue);
-  --tide-surface-floating:       var(--tide-floating);
+  --tide-on-primary:       var(--tide-gray-100);
+  --tide-on-surface-brand: var(--tide-realm-steel-blue);
 
   --tide-surface-gradient:
-    /* top */
-    radial-gradient(
-      157.36% 151.94% at 19.69% -3.53%,
-      color-mix(in srgb, var(--tide-surface-accent-variant) 100%, transparent) 28.37%,
-      color-mix(in srgb, var(--tide-surface-accent-variant) 0%, transparent) 100%
-    ),
     /* bottom right */
     radial-gradient(
       57.27% 60.26% at 100% 103.53%,
-      color-mix(in srgb, var(--tide-surface-accent) 22%, transparent) 0%,
-      color-mix(in srgb, var(--tide-surface-accent) 0%, transparent) 100%
+      color-mix(in srgb, var(--tide-realm-red) 8%, transparent) 0%,
+      color-mix(in srgb, var(--tide-realm-red) 0%, transparent) 100%
+    ),  
+    /* top */
+    radial-gradient(
+      157.36% 151.94% at 19.69% -3.53%,
+      color-mix(in srgb, var(--tide-realm-steel-blue) 28%, transparent) 28.37%,
+      color-mix(in srgb, var(--tide-realm-steel-blue) 0%, transparent) 100%
     ),
     /* bottom left */
     radial-gradient(
       41.93% 63.48% at -2.12% 103.9%,
-      rgba(228, 228, 229, 0.72) 0%,
-      rgba(228, 228, 229, 0.00) 100%
+      color-mix(in srgb, var(--tide-realm-pure-black) 17%, transparent) 0%,
+      color-mix(in srgb, var(--tide-realm-pure-black) 0%, transparent) 100%
     );
-
-  --tide-on-surface:         var(--tide-black);
-  --tide-on-surface-variant: var(--tide-gray-800);
-  --tide-on-surface-brand:   var(--tide-pure-black);
-
-  --tide-on-surface-inverse:         var(--tide-white);
-  --tide-on-surface-inverse-variant: var(--tide-transparent-200);
-
-  --tide-border:          var(--tide-gray-400);
-  --tide-border-low:      var(--tide-gray-600);
-  --tide-border-high:     var(--tide-black);
-  --tide-border-floating: var(--tide-gray-300);
 }

package/dist/css/realm/equipment.css

@@ -1,43 +1,37 @@
 /* Equipment Trader Realm Colors */
 :root {
   /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-evergreen: #468200;
-  --tide-steel:     #494949;
-  --tide-yellow:    #FFCE34;
-  --tide-moss:      #EEF6D7;
-
-  --tide-gradient: linear-gradient(
-    to bottom right,
-    var(--tide-evergreen) 50%,
-    var(--tide-yellow) 150%
-  );
-
-  --tide-floating: rgba(255, 255, 255, 0);
+  --tide-realm-charcoal:  #333333;
+  --tide-realm-evergreen: #468200;
+  --tide-realm-moss:      #ECF6D4;
+  --tide-realm-steel:     #494949;
+  --tide-realm-yellow:    #FFCE34;
 
   /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
-  --tide-primary:    var(--tide-steel);
-  --tide-on-primary: var(--tide-white);
-
-  --tide-secondary:    var(--tide-black);
-  --tide-on-secondary: var(--tide-white);
-
-  --tide-surface:                var(--tide-white);
-  --tide-surface-variant:        var(--tide-gray-200);
-  --tide-surface-brand:          var(--tide-steel);
-  --tide-surface-accent:         var(--tide-moss);
-  --tide-surface-accent-variant: var(--tide-evergreen);
-  --tide-surface-gradient:       var(--tide-gradient);
-  --tide-surface-floating:       var(--tide-floating);
-
-  --tide-on-surface:         var(--tide-black);
-  --tide-on-surface-variant: var(--tide-gray-800);
-  --tide-on-surface-brand:   var(--tide-steel);
-
-  --tide-on-surface-inverse:         var(--tide-white);
-  --tide-on-surface-inverse-variant: var(--tide-transparent-200);
-
-  --tide-border:          var(--tide-gray-400);
-  --tide-border-low:      var(--tide-gray-600);
-  --tide-border-high:     var(--tide-black);
-  --tide-border-floating: var(--tide-gray-300);
+  --tide-primary:        var(--tide-realm-steel);
+  --tide-surface-accent: var(--tide-realm-moss);
+  --tide-surface-brand:  var(--tide-realm-charcoal);
+
+  --tide-on-primary:       var(--tide-gray-100);
+  --tide-on-surface-brand: var(--tide-realm-evergreen);
+
+  --tide-surface-gradient:
+    /* bottom right */
+    radial-gradient(
+      57.27% 60.26% at 100% 103.53%,
+      color-mix(in srgb, var(--tide-realm-evergreen) 22%, transparent) 0%,
+      color-mix(in srgb, var(--tide-realm-evergreen) 0%, transparent) 100%
+    ),  
+    /* top */
+    radial-gradient(
+      157.36% 151.94% at 19.69% -3.53%,
+      color-mix(in srgb, var(--tide-realm-yellow) 29%, transparent) 28.37%,
+      color-mix(in srgb, var(--tide-realm-yellow) 0%, transparent) 100%
+    ),
+    /* bottom left */
+    radial-gradient(
+      41.93% 63.48% at -2.12% 103.9%,
+      color-mix(in srgb, var(--tide-realm-steel) 39%, transparent) 0%,
+      color-mix(in srgb, var(--tide-realm-steel) 0%, transparent) 100%
+    );
 }

package/dist/css/realm/pwc.css

@@ -1,43 +1,37 @@
 /* PWC Trader Realm Colors */
 :root {
   /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-color1: #0B72B8;
-  --tide-color2: #085487;
-  --tide-color3: #59A0EB;
-  --tide-foam:   #E0EBF5;
-
-  --tide-gradient: linear-gradient(
-    to bottom right,
-    var(--tide-color2) 50%,
-    var(--tide-color3) 150%
-  );
-
-  --tide-floating: rgba(255, 255, 255, 0);
+  --tide-realm-baby-blue:     #86C0F4;
+  --tide-realm-blue:          #0B72B8;
+  --tide-realm-cantaloupe:    #ECA26A;
+  --tide-realm-foam:          #DDEBF6;
+  --tide-realm-midnight-blue: #002344;
 
   /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
-  --tide-primary:    var(--tide-color1);
-  --tide-on-primary: var(--tide-gray-100);
-
-  --tide-secondary:    var(--tide-gray-900);
-  --tide-on-secondary: var(--tide-gray-100);
-
-  --tide-surface:                var(--tide-gray-100);
-  --tide-surface-variant:        var(--tide-gray-200);
-  --tide-surface-brand:          var(--tide-color1);
-  --tide-surface-accent:         var(--tide-foam);
-  --tide-surface-accent-variant: var(--tide-color2);
-  --tide-surface-gradient:       var(--tide-gradient);
-  --tide-surface-floating:       var(--tide-floating);
-
-  --tide-on-surface:         var(--tide-gray-900);
-  --tide-on-surface-variant: var(--tide-gray-700);
-  --tide-on-surface-brand:   var(--tide-color1);
-
-  --tide-on-surface-inverse:         var(--tide-gray-100);
-  --tide-on-surface-inverse-variant: var(--tide-transparent-200);
-
-  --tide-border:          var(--tide-gray-600);
-  --tide-border-low:      var(--tide-gray-400);
-  --tide-border-high:     var(--tide-gray-900);
-  --tide-border-floating: var(--tide-gray-300);
+  --tide-primary:        var(--tide-realm-blue);
+  --tide-surface-accent: var(--tide-realm-foam);
+  --tide-surface-brand:  var(--tide-realm-midnight-blue);
+
+  --tide-on-primary:       var(--tide-gray-100);
+  --tide-on-surface-brand: var(--tide-realm-blue);
+
+  --tide-surface-gradient:
+    /* bottom right */
+    radial-gradient(
+      57.27% 60.26% at 100% 103.53%,
+      color-mix(in srgb, var(--tide-realm-cantaloupe) 22%, transparent) 0%,
+      color-mix(in srgb, var(--tide-realm-cantaloupe) 0%, transparent) 100%
+    ),  
+    /* top */
+    radial-gradient(
+      157.36% 151.94% at 19.69% -3.53%,
+      color-mix(in srgb, var(--tide-realm-baby-blue) 39%, transparent) 28.37%,
+      color-mix(in srgb, var(--tide-realm-baby-blue) 0%, transparent) 100%
+    ),
+    /* bottom left */
+    radial-gradient(
+      41.93% 63.48% at -2.12% 103.9%,
+      color-mix(in srgb, var(--tide-realm-blue) 36%, transparent) 0%,
+      color-mix(in srgb, var(--tide-realm-blue) 0%, transparent) 100%
+    );
 }

package/dist/css/realm/rv.css

@@ -1,56 +1,37 @@
 /* RV Trader Realm Colors */
 :root {
   /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-green:      #006836;
-  --tide-green-dark: #004926;
-  --tide-pistachio:  #BFD9CD;
-  --tide-yellow:     #F2B203;
-
-  --tide-floating: rgba(255, 255, 255, 0);
+  --tide-realm-dark-green: #004926;
+  --tide-realm-green:      #006836;
+  --tide-realm-mint:       #98CFB6;
+  --tide-realm-pistachio:  #E0EDE7;
+  --tide-realm-yellow:     #F2B203;
 
   /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
-  --tide-primary:    var(--tide-green);
-  --tide-on-primary: var(--tide-gray-100);
-
-  --tide-secondary:    var(--tide-gray-900);
-  --tide-on-secondary: var(--tide-gray-100);
+  --tide-primary:        var(--tide-realm-green);
+  --tide-surface-accent: var(--tide-realm-pistachio);
+  --tide-surface-brand:  var(--tide-realm-dark-green);
 
-  --tide-surface:                var(--tide-gray-100);
-  --tide-surface-variant:        var(--tide-gray-200);
-  --tide-surface-brand:          var(--tide-green);
-  --tide-surface-accent:         var(--tide-pistachio);
-  --tide-surface-accent-variant: var(--tide-pistachio);
-  --tide-surface-floating:       var(--tide-floating);
+  --tide-on-primary:       var(--tide-gray-100);
+  --tide-on-surface-brand: var(--tide-realm-green);
 
   --tide-surface-gradient:
-    /* top */
-    radial-gradient(
-      157.36% 151.94% at 19.69% -3.53%,
-      color-mix(in srgb, var(--tide-surface-accent-variant) 72%, transparent) 28.37%,
-      color-mix(in srgb, var(--tide-surface-accent-variant) 0%, transparent) 100%
-    ),
     /* bottom right */
     radial-gradient(
       57.27% 60.26% at 100% 103.53%,
-      color-mix(in srgb, var(--tide-yellow) 22%, transparent) 0%,
-      color-mix(in srgb, var(--tide-yellow) 0%, transparent) 100%
+      color-mix(in srgb, var(--tide-realm-yellow) 15%, transparent) 0%,
+      color-mix(in srgb, var(--tide-realm-yellow) 0%, transparent) 100%
+    ),  
+    /* top */
+    radial-gradient(
+      157.36% 151.94% at 19.69% -3.53%,
+      color-mix(in srgb, var(--tide-realm-pistachio) 42%, transparent) 28.37%,
+      color-mix(in srgb, var(--tide-realm-pistachio) 0%, transparent) 100%
     ),
     /* bottom left */
     radial-gradient(
       41.93% 63.48% at -2.12% 103.9%,
-      color-mix(in srgb, var(--tide-surface-brand) 50%, transparent) 0%,
-      color-mix(in srgb, var(--tide-surface-brand) 0%, transparent) 100%
+      color-mix(in srgb, var(--tide-realm-green) 36%, transparent) 0%,
+      color-mix(in srgb, var(--tide-realm-green) 0%, transparent) 100%
     );
-
-  --tide-on-surface:         var(--tide-gray-900);
-  --tide-on-surface-variant: var(--tide-gray-700);
-  --tide-on-surface-brand:   var(--tide-green);
-
-  --tide-on-surface-inverse:         var(--tide-gray-100);
-  --tide-on-surface-inverse-variant: var(--tide-transparent-200);
-
-  --tide-border:          var(--tide-gray-600);
-  --tide-border-low:      var(--tide-gray-400);
-  --tide-border-high:     var(--tide-gray-900);
-  --tide-border-floating: var(--tide-gray-300);
 }