tide-design-system 2.2.9 → 2.2.10

package/index.ts

@@ -2,6 +2,7 @@ import TideAccordionItem from '@/components/TideAccordionItem.vue';
 import TideAlert from '@/components/TideAlert.vue';
 import TideBadge from '@/components/TideBadge.vue';
 import TideBadgeTrustedPartner from '@/components/TideBadgeTrustedPartner.vue';
+import TideBadgeVerifiedVehicle from '@/components/TideBadgeVerifiedVehicle.vue';
 import TideBreadCrumbs from '@/components/TideBreadCrumbs.vue';
 import TideButton from '@/components/TideButton.vue';
 import TideButtonIcon from '@/components/TideButtonIcon.vue';
@@ -185,6 +186,7 @@ export {
   TideAlert,
   TideBadge,
   TideBadgeTrustedPartner,
+  TideBadgeVerifiedVehicle,
   TideBreadCrumbs,
   TideButton,
   TideButtonIcon,

package/package.json

@@ -61,7 +61,7 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.2.9",
+  "version": "2.2.10",
   "dependencies": {
     "@floating-ui/vue": "^1.1.6"
   }

package/src/assets/css/dynamic-utilities.css

@@ -26,6 +26,7 @@
 .tide-font-on-surface-brand           {color: var(--tide-on-surface-brand);}
 .tide-font-on-surface-inverse         {color: var(--tide-on-surface-inverse);}
 .tide-font-on-surface-variant-inverse {color: var(--tide-on-surface-inverse-variant);}
+
 @media (min-width: 768px) {
 	/* Background */
 	.sm-tide-bg-primary   {background: var(--tide-primary);}

package/src/assets/css/realm/aero.css

@@ -11,27 +11,15 @@
   --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%
-    );
+  --tide-gradient-bottom-right-color: var(--tide-realm-sky);
+  --tide-gradient-top-color: var(--tide-realm-aqua);
+  --tide-gradient-bottom-left-color: var(--tide-realm-atmosphere);
+
+  --tide-gradient-bottom-right-opacity: 65%;
+  --tide-gradient-top-opacity: 42%;
+  --tide-gradient-bottom-left-opacity: 32%;
 }

package/src/assets/css/realm/atv.css

@@ -11,27 +11,15 @@
   --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:
-    /* bottom right */
-    radial-gradient(
-      57.27% 60.26% at 100% 103.53%,
-      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-realm-orange) 44%, transparent) 0%,
-      color-mix(in srgb, var(--tide-realm-orange) 0%, transparent) 100%
-    );
+  --tide-gradient-bottom-right-color: var(--tide-realm-maroon);
+  --tide-gradient-top-color: var(--tide-realm-peach);
+  --tide-gradient-bottom-left-color: var(--tide-realm-orange);
+
+  --tide-gradient-bottom-right-opacity: 27%;
+  --tide-gradient-top-opacity: 37%;
+  --tide-gradient-bottom-left-opacity: 44%;
 }

package/src/assets/css/realm/boatmart.css

@@ -15,23 +15,11 @@
   --tide-on-primary:       var(--tide-gray-100);
   --tide-on-surface-brand: var(--tide-realm-navy);
 
-  --tide-surface-gradient:
-    /* bottom right */
-    radial-gradient(
-      57.27% 60.26% at 100% 103.53%,
-      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-realm-navy) 32%, transparent) 0%,
-      color-mix(in srgb, var(--tide-realm-navy) 0%, transparent) 100%
-    );
+  --tide-gradient-bottom-right-color: var(--tide-realm-orange);
+  --tide-gradient-top-color: var(--tide-realm-blue);
+  --tide-gradient-bottom-left-color: var(--tide-realm-navy);
+
+  --tide-gradient-bottom-right-opacity: 12%;
+  --tide-gradient-top-opacity: 27%;
+  --tide-gradient-bottom-left-opacity: 32%;
 }

package/src/assets/css/realm/cycle.css

@@ -7,30 +7,18 @@
   --tide-realm-steel-blue: #253E51;
 
   /* 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-realm-pure-black);  
+  --tide-primary:        var(--tide-realm-pure-black);
   --tide-surface-accent: var(--tide-realm-light-blue);
   --tide-surface-brand:  var(--tide-gray-900);
 
   --tide-on-primary:       var(--tide-gray-100);
   --tide-on-surface-brand: var(--tide-realm-steel-blue);
 
-  --tide-surface-gradient:
-    /* bottom right */
-    radial-gradient(
-      57.27% 60.26% at 100% 103.53%,
-      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%,
-      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-gradient-bottom-right-color: var(--tide-realm-red);
+  --tide-gradient-top-color: var(--tide-realm-steel-blue);
+  --tide-gradient-bottom-left-color: var(--tide-realm-pure-black);
+
+  --tide-gradient-bottom-right-opacity: 8%;
+  --tide-gradient-top-opacity: 28%;
+  --tide-gradient-bottom-left-opacity: 17%;
 }

package/src/assets/css/realm/equipment.css

@@ -15,23 +15,11 @@
   --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%
-    );
+  --tide-gradient-bottom-right-color: var(--tide-realm-evergreen);
+  --tide-gradient-top-color: var(--tide-realm-yellow);
+  --tide-gradient-bottom-left-color: var(--tide-realm-steel);
+
+  --tide-gradient-bottom-right-opacity: 22%;
+  --tide-gradient-top-opacity: 29%;
+  --tide-gradient-bottom-left-opacity: 39%;
 }

package/src/assets/css/realm/pwc.css

@@ -15,23 +15,11 @@
   --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%
-    );
+  --tide-gradient-bottom-right-color: var(--tide-realm-cantaloupe);
+  --tide-gradient-top-color: var(--tide-realm-baby-blue);
+  --tide-gradient-bottom-left-color: var(--tide-realm-blue);
+
+  --tide-gradient-bottom-right-opacity: 22%;
+  --tide-gradient-top-opacity: 39%;
+  --tide-gradient-bottom-left-opacity: 36%;
 }

package/src/assets/css/realm/rv.css

@@ -15,23 +15,11 @@
   --tide-on-primary:       var(--tide-gray-100);
   --tide-on-surface-brand: var(--tide-realm-green);
 
-  --tide-surface-gradient:
-    /* bottom right */
-    radial-gradient(
-      57.27% 60.26% at 100% 103.53%,
-      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-mint) 42%, transparent) 28.37%,
-      color-mix(in srgb, var(--tide-realm-mint) 0%, transparent) 100%
-    ),
-    /* bottom left */
-    radial-gradient(
-      41.93% 63.48% at -2.12% 103.9%,
-      color-mix(in srgb, var(--tide-realm-green) 36%, transparent) 0%,
-      color-mix(in srgb, var(--tide-realm-green) 0%, transparent) 100%
-    );
+  --tide-gradient-bottom-right-color: var(--tide-realm-yellow);
+  --tide-gradient-top-color: var(--tide-realm-mint);
+  --tide-gradient-bottom-left-color: var(--tide-realm-green);
+
+  --tide-gradient-bottom-right-opacity: 15%;
+  --tide-gradient-top-opacity: 42%;
+  --tide-gradient-bottom-left-opacity: 36%;
 }

package/src/assets/css/realm/snow.css

@@ -15,23 +15,11 @@
   --tide-on-primary:       var(--tide-gray-100);
   --tide-on-surface-brand: var(--tide-realm-sapphire);
 
-  --tide-surface-gradient:
-    /* bottom right */
-    radial-gradient(
-      57.27% 60.26% at 100% 103.53%,
-      color-mix(in srgb, var(--tide-realm-ice) 33%, transparent) 0%,
-      color-mix(in srgb, var(--tide-realm-ice) 0%, transparent) 100%
-    ),  
-    /* top */
-    radial-gradient(
-      157.36% 151.94% at 19.69% -3.53%,
-      color-mix(in srgb, var(--tide-realm-twilight) 42%, transparent) 28.37%,
-      color-mix(in srgb, var(--tide-realm-twilight) 0%, transparent) 100%
-    ),
-    /* bottom left */
-    radial-gradient(
-      41.93% 63.48% at -2.12% 103.9%,
-      color-mix(in srgb, var(--tide-realm-sapphire) 44%, transparent) 0%,
-      color-mix(in srgb, var(--tide-realm-sapphire) 0%, transparent) 100%
-    );
+  --tide-gradient-bottom-right-color: var(--tide-realm-ice);
+  --tide-gradient-top-color: var(--tide-realm-twilight);
+  --tide-gradient-bottom-left-color: var(--tide-realm-sapphire);
+
+  --tide-gradient-bottom-right-opacity: 32%;
+  --tide-gradient-top-opacity: 42%;
+  --tide-gradient-bottom-left-opacity: 44%;
 }

package/src/assets/css/realm/truck.css

@@ -11,27 +11,15 @@
   --tide-primary:        var(--tide-realm-blue);
   --tide-surface-accent: var(--tide-realm-cloud);
   --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-granny-smith) 28%, transparent) 0%,
-      color-mix(in srgb, var(--tide-realm-granny-smith) 0%, transparent) 100%
-    ),  
-    /* top */
-    radial-gradient(
-      157.36% 151.94% at 19.69% -3.53%,
-      color-mix(in srgb, var(--tide-realm-baby-blue) 42%, 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%
-    );
+  --tide-gradient-bottom-right-color: var(--tide-realm-granny-smith);
+  --tide-gradient-top-color: var(--tide-realm-baby-blue);
+  --tide-gradient-bottom-left-color: var(--tide-realm-blue);
+
+  --tide-gradient-bottom-right-opacity: 28%;
+  --tide-gradient-top-opacity: 42%;
+  --tide-gradient-bottom-left-opacity: 36%;
 }

package/src/assets/css/utilities-lg.css

@@ -142,6 +142,9 @@
 	  border-style: solid;
 	}
 
+	.lg-tide-border-dashed {border-style: dashed;}
+	.lg-tide-border-solid  {border-style: solid;}
+
 	.lg-tide-border-0 {border-width: 0;}
 	.lg-tide-border-1 {border-width: var(--tide-border-width-1);}
 	.lg-tide-border-2 {border-width: var(--tide-border-width-2);}

package/src/assets/css/utilities-md.css

@@ -142,6 +142,9 @@
 	  border-style: solid;
 	}
 
+	.md-tide-border-dashed {border-style: dashed;}
+	.md-tide-border-solid  {border-style: solid;}
+
 	.md-tide-border-0 {border-width: 0;}
 	.md-tide-border-1 {border-width: var(--tide-border-width-1);}
 	.md-tide-border-2 {border-width: var(--tide-border-width-2);}

package/src/assets/css/utilities-sm.css

@@ -142,6 +142,9 @@
 	  border-style: solid;
 	}
 
+	.sm-tide-border-dashed {border-style: dashed;}
+	.sm-tide-border-solid  {border-style: solid;}
+
 	.sm-tide-border-0 {border-width: 0;}
 	.sm-tide-border-1 {border-width: var(--tide-border-width-1);}
 	.sm-tide-border-2 {border-width: var(--tide-border-width-2);}

package/src/assets/css/utilities-xl.css

@@ -142,6 +142,9 @@
 	  border-style: solid;
 	}
 
+	.xl-tide-border-dashed {border-style: dashed;}
+	.xl-tide-border-solid  {border-style: solid;}
+
 	.xl-tide-border-0 {border-width: 0;}
 	.xl-tide-border-1 {border-width: var(--tide-border-width-1);}
 	.xl-tide-border-2 {border-width: var(--tide-border-width-2);}

package/src/assets/css/utilities.css

@@ -141,6 +141,9 @@
   border-style: solid;
 }
 
+.tide-border-dashed {border-style: dashed;}
+.tide-border-solid  {border-style: solid;}
+
 .tide-border-0 {border-width: 0;}
 .tide-border-1 {border-width: var(--tide-border-width-1);}
 .tide-border-2 {border-width: var(--tide-border-width-2);}

package/src/assets/css/variables.css

@@ -53,9 +53,6 @@
   --tide-transparent-400: color-mix(in srgb, black 50%, transparent);
 
   /* Global tonal palette */
-  --tide-blue-100:  #EBF1FD;
-  --tide-blue-400:  #3870E9;
-
   --tide-gray-100:  #FFFFFF;
   --tide-gray-200:  #F5F5F5;
   --tide-gray-300:  #E4E4E4;
@@ -67,31 +64,104 @@
   --tide-gray-900:  #252526;
   --tide-gray-1000: #000000;
 
+  --tide-blue-100:  #EBF1FD;
+  --tide-blue-200:  #3870E9;
+  --tide-blue-300:  #22438C;
+
   --tide-green-100:  #E7F6ED;
-  --tide-green-400:  #30B351;
+  --tide-green-200:  #11A94E;
+  --tide-green-300:  #0A652F;
+
+  --tide-lime-100:  #F7FAE9;
+  --tide-lime-200:  #ACC821;
+  --tide-lime-300:  #677814;
+
+  --tide-orange-100:  #FFF2EA;
+  --tide-orange-200:  #FA8131;
+  --tide-orange-300:  #964D1D;
+
+  --tide-purple-100:  #F1F0F8;
+  --tide-purple-200:  #756CB7;
+  --tide-purple-300:  #46416E;
 
   --tide-red-100:  #FBE9EA;
-  --tide-red-400:  #D8202E;
+  --tide-red-200:  #D8202E;
+  --tide-red-300:  #82131C;
+
+  --tide-salmon-100:  #FDF1F0;
+  --tide-salmon-200:  #EE706B;
+  --tide-salmon-300:  #8F4340;
+
+  --tide-teal-100:  #E6F7F8;
+  --tide-teal-200:  #21B1B2;
+  --tide-teal-300:  #036C6C;
 
   --tide-yellow-100:  #FEF2CC;
-  --tide-yellow-400:  #FACA33;
+  --tide-yellow-200:  #FACA33;
+  --tide-yellow-300:  #90731D;
 
   /* Global color roles */
-  --tide-error-primary: var(--tide-red-400);
+  --tide-blue-primary: var(--tide-blue-200);
+  --tide-blue-surface: var(--tide-blue-100);
+  --tide-blue-border:  var(--tide-blue-200);
+  --tide-blue-on-surface: var(--tide-blue-300);
+
+  --tide-green-primary: var(--tide-green-200);
+  --tide-green-surface: var(--tide-green-100);
+  --tide-green-border:  var(--tide-green-200);
+  --tide-green-on-surface: var(--tide-green-300);
+
+  --tide-lime-primary: var(--tide-lime-200);
+  --tide-lime-surface: var(--tide-lime-100);
+  --tide-lime-border:  var(--tide-lime-200);
+  --tide-lime-on-surface: var(--tide-lime-300);
+
+  --tide-orange-primary: var(--tide-orange-200);
+  --tide-orange-surface: var(--tide-orange-100);
+  --tide-orange-border:  var(--tide-orange-200);
+  --tide-orange-on-surface: var(--tide-orange-300);
+
+  --tide-purple-primary: var(--tide-purple-200);
+  --tide-purple-surface: var(--tide-purple-100);
+  --tide-purple-border:  var(--tide-purple-200);
+  --tide-purple-on-surface: var(--tide-purple-300);
+
+  --tide-red-primary: var(--tide-red-200);
+  --tide-red-surface: var(--tide-red-100);
+  --tide-red-border:  var(--tide-red-200);
+  --tide-red-on-surface: var(--tide-red-300);
+
+  --tide-salmon-primary: var(--tide-salmon-200);
+  --tide-salmon-surface: var(--tide-salmon-100);
+  --tide-salmon-border:  var(--tide-salmon-200);
+  --tide-salmon-on-surface: var(--tide-salmon-300);
+
+  --tide-teal-primary: var(--tide-teal-200);
+  --tide-teal-surface: var(--tide-teal-100);
+  --tide-teal-border:  var(--tide-teal-200);
+  --tide-teal-on-surface: var(--tide-teal-300);
+
+  --tide-yellow-primary: var(--tide-yellow-200);
+  --tide-yellow-surface: var(--tide-yellow-100);
+  --tide-yellow-border:  var(--tide-yellow-200);
+  --tide-yellow-on-surface: var(--tide-yellow-300);
+
+  /* Status color roles */
+  --tide-error-primary: var(--tide-red-200);
   --tide-error-surface: var(--tide-red-100);
-  --tide-error-border:  var(--tide-red-400);
+  --tide-error-border:  var(--tide-red-200);
 
-  --tide-info-primary: var(--tide-blue-400);
+  --tide-info-primary: var(--tide-blue-200);
   --tide-info-surface: var(--tide-blue-100);
-  --tide-info-border:  var(--tide-blue-400);
+  --tide-info-border:  var(--tide-blue-200);
 
-  --tide-success-primary: var(--tide-green-400);
+  --tide-success-primary: var(--tide-green-200);
   --tide-success-surface: var(--tide-green-100);
-  --tide-success-border:  var(--tide-green-400);
+  --tide-success-border:  var(--tide-green-200);
 
-  --tide-warning-primary: var(--tide-yellow-400);
+  --tide-warning-primary: var(--tide-yellow-200);
   --tide-warning-surface: var(--tide-yellow-100);
-  --tide-warning-border:  var(--tide-yellow-400);
+  --tide-warning-border:  var(--tide-yellow-200);
 
   /* Global color roles (defined in realm tonal palettes in Figma) */
   --tide-secondary:    var(--tide-gray-900);
@@ -110,4 +180,23 @@
   --tide-border:          var(--tide-gray-600);
   --tide-border-high:     var(--tide-gray-900);
   --tide-border-floating: var(--tide-transparent-300);
+
+  --tide-surface-gradient:
+    radial-gradient(
+      57.27% 60.26% at 100% 103.53%,
+      color-mix(in srgb, var(--tide-gradient-bottom-right-color) var(--tide-gradient-bottom-right-opacity), transparent) 0%,
+      color-mix(in srgb, var(--tide-gradient-bottom-right-color) 0%, transparent) 100%
+    ),
+    radial-gradient(
+      157.36% 151.94% at 19.69% -3.53%,
+      color-mix(in srgb, var(--tide-gradient-top-color) var(--tide-gradient-top-opacity), transparent) 28.37%,
+      color-mix(in srgb, var(--tide-gradient-top-color) 0%, transparent) 100%
+    ),
+    radial-gradient(
+      41.93% 63.48% at -2.12% 103.9%,
+      color-mix(in srgb, var(--tide-gradient-bottom-left-color) var(--tide-gradient-bottom-left-opacity), transparent) 0%,
+      color-mix(in srgb, var(--tide-gradient-bottom-left-color) 0%, transparent) 100%
+    );
 }
+
+

package/src/components/TideBadgeVerifiedVehicle.vue

@@ -32,6 +32,6 @@
 
 <style scoped>
   .tide-icon {
-    color: var(--tide-blue-400);
+    color: var(--tide-info-primary);
   }
 </style>

package/src/components/TideImageBackground.vue

@@ -20,7 +20,7 @@
 </script>
 
 <template>
-  <div :class="[CSS.POSITION.RELATIVE, CSS.OVERFLOW.XY.HIDDEN, CSS.ISOLATION.ISOLATE]">
+  <div :class="['tide-image-background', CSS.POSITION.RELATIVE, CSS.OVERFLOW.XY.HIDDEN, CSS.ISOLATION.ISOLATE]">
     <div
       :class="[
         CSS.POSITION.ABSOLUTE,
@@ -32,11 +32,11 @@
       ]"
     >
       <TideImage
-        :class="['tide-image-background', CSS.WIDTH.FULL, CSS.HEIGHT.FULL]"
+        :alt="props.alt"
+        :class="[CSS.WIDTH.FULL, CSS.HEIGHT.FULL]"
         :is-lazy="props.isLazy"
         :sources="props.sources"
         :src="props.src"
-        alt="props.alt"
       />
     </div>
 
@@ -44,14 +44,8 @@
   </div>
 </template>
 
-<style scoped lang="scss">
-  .tide-image-background {
+<style scoped>
+  :deep(.tide-image) {
     z-index: -1;
   }
-
-  :deep(.tide-image-background img) {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
 </style>