tide-design-system 2.0.53 → 2.1.0

package/dist/utilities/storybook.ts

@@ -56,16 +56,17 @@ export const change = {
   name: 'change',
   table: {
     defaultValue: { summary: 'None' },
-    type: { summary: '(event: Event) => void' },
+    type: { summary: '() => void' },
   },
 };
 
 export const click = {
   control: 'text',
   description: 'JS code or function to execute on click event',
+  isEmit: true,
   table: {
     defaultValue: { summary: 'None' },
-    type: { summary: '(event: Event) => void' },
+    type: { summary: '() => void' },
   },
 };
 
@@ -208,7 +209,7 @@ export const formatSnippet = (code: string, context: StoryContext) => {
 
     if (isEmit) {
       if (value) {
-        return `@change="${value}"`;
+        return `@${argType.name}="${value}"`;
       }
     }
 

package/index.ts

@@ -8,6 +8,7 @@ import TideBreadCrumbs from '@/components/TideBreadCrumbs.vue';
 import TideButton from '@/components/TideButton.vue';
 import TideButtonIcon from '@/components/TideButtonIcon.vue';
 import TideButtonPagination from '@/components/TideButtonPagination.vue';
+import TideButtonSegmented from '@/components/TideButtonSegmented.vue';
 import TideCard from '@/components/TideCard.vue';
 import TideCarousel from '@/components/TideCarousel.vue';
 import TideChipAction from '@/components/TideChipAction.vue';
@@ -27,8 +28,7 @@ import TideLink from '@/components/TideLink.vue';
 import TideModal from '@/components/TideModal.vue';
 import TidePagination from '@/components/TidePagination.vue';
 import TideSeoLinks from '@/components/TideSeoLinks.vue';
-import TideTabs from '@/components/TideTabs.vue';
-import TideToggle from '@/components/TideToggle.vue';
+import TideSwitch from '@/components/TideSwitch.vue';
 import { ALERT } from '@/types/Alert';
 import { BADGE, BADGE_PREMIUM, BADGE_TRUSTED } from '@/types/Badge';
 import { BREAKPOINT, MEDIA } from '@/types/Breakpoint';
@@ -195,6 +195,7 @@ export {
   TideButton,
   TideButtonIcon,
   TideButtonPagination,
+  TideButtonSegmented,
   TideCard,
   TideCarousel,
   TideChipAction,
@@ -214,6 +215,5 @@ export {
   TideModal,
   TidePagination,
   TideSeoLinks,
-  TideTabs,
-  TideToggle,
+  TideSwitch,
 };

package/package.json

@@ -61,5 +61,5 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.0.53"
+  "version": "2.1.0"
 }

package/src/assets/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/src/assets/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/src/assets/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/src/assets/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/src/assets/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/src/assets/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/src/assets/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/src/assets/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);
 }