tide-design-system 2.2.9 → 2.2.11

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';
@@ -28,6 +29,7 @@ import TideModal from '@/components/TideModal.vue';
 import TidePagination from '@/components/TidePagination.vue';
 import TidePopover from '@/components/TidePopover.vue';
 import TideSeoLinks from '@/components/TideSeoLinks.vue';
+import TideSheet from '@/components/TideSheet.vue';
 import TideSwitch from '@/components/TideSwitch.vue';
 import { ALERT } from '@/types/Alert';
 import { BADGE_TRUSTED } from '@/types/Badge';
@@ -36,6 +38,7 @@ import { TYPE_CARD } from '@/types/Card';
 import { ELEMENT, ELEMENT_TEXT_AS_ICON } from '@/types/Element';
 import { FORMAT, FORMAT_REGEX } from '@/types/Formatted';
 import { ICON, ICON_REALM } from '@/types/Icon';
+import { OBJECT_FIT } from '@/types/Image';
 import { MEDIA_SLIDE_TYPES } from '@/types/ListingMedia';
 import { ORIENTATION } from '@/types/Orientation';
 import { PRIORITY } from '@/types/Priority';
@@ -79,6 +82,7 @@ import type {
 } from '@/types/Form';
 import type { Formatted } from '@/types/Formatted';
 import type { Icon } from '@/types/Icon';
+import type { ObjectFit } from '@/types/Image';
 import type { Link } from '@/types/Link';
 import type { ImageSlideType, ListingMedia, MediaSlideType, VideoSlideType, VrSlideType } from '@/types/ListingMedia';
 import type { Orientation } from '@/types/Orientation';
@@ -89,7 +93,6 @@ import type { RealmConfig } from '@/types/RealmConfig';
 import type { SelectOption, SelectOptionGroup } from '@/types/Select';
 import type { Size, SizeButton } from '@/types/Size';
 import type { Source } from '@/types/Source';
-import type { CssUtility } from '@/types/Styles';
 import type { Tab } from '@/types/Tab';
 import type { Target } from '@/types/Target';
 import type { TextInputType } from '@/types/TextInput';
@@ -108,7 +111,6 @@ export type {
   CardType,
   CheckboxField,
   CheckboxInput,
-  CssUtility,
   Detail,
   Element,
   ElementTextAsIcon,
@@ -125,6 +127,7 @@ export type {
   ListingMedia,
   Media,
   MediaSlideType,
+  ObjectFit,
   Orientation,
   Priority,
   RangeData,
@@ -169,6 +172,7 @@ export {
   ICON_REALM,
   MEDIA,
   MEDIA_SLIDE_TYPES,
+  OBJECT_FIT,
   ORIENTATION,
   PRIORITY,
   REALM,
@@ -185,6 +189,7 @@ export {
   TideAlert,
   TideBadge,
   TideBadgeTrustedPartner,
+  TideBadgeVerifiedVehicle,
   TideBreadCrumbs,
   TideButton,
   TideButtonIcon,
@@ -211,5 +216,6 @@ export {
   TidePagination,
   TidePopover,
   TideSeoLinks,
+  TideSheet,
   TideSwitch,
 };

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.11",
   "dependencies": {
     "@floating-ui/vue": "^1.1.6"
   }

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

@@ -2,12 +2,12 @@
 .tide-bg-primary   {background: var(--tide-primary);}
 .tide-bg-secondary {background: var(--tide-secondary);}
 
-.tide-bg-surface                {background: var(--tide-surface);}
-.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-gradient       {background: var(--tide-surface-gradient);}
-.tide-bg-surface-floating       {background: var(--tide-surface-floating);}
+.tide-bg-surface          {background: var(--tide-surface);}
+.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-gradient {background: var(--tide-surface-gradient);}
+.tide-bg-surface-floating {background: var(--tide-surface-floating);}
 
 /* Border */
 .tide-border-primary   {border-color: var(--tide-primary);}
@@ -26,17 +26,18 @@
 .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);}
 	.sm-tide-bg-secondary {background: var(--tide-secondary);}
 
-	.sm-tide-bg-surface                {background: var(--tide-surface);}
-	.sm-tide-bg-surface-variant        {background: var(--tide-surface-variant);}
-	.sm-tide-bg-surface-brand          {background: var(--tide-surface-brand);}
-	.sm-tide-bg-surface-accent         {background: var(--tide-surface-accent);}
-	.sm-tide-bg-surface-gradient       {background: var(--tide-surface-gradient);}
-	.sm-tide-bg-surface-floating       {background: var(--tide-surface-floating);}
+	.sm-tide-bg-surface          {background: var(--tide-surface);}
+	.sm-tide-bg-surface-variant  {background: var(--tide-surface-variant);}
+	.sm-tide-bg-surface-brand    {background: var(--tide-surface-brand);}
+	.sm-tide-bg-surface-accent   {background: var(--tide-surface-accent);}
+	.sm-tide-bg-surface-gradient {background: var(--tide-surface-gradient);}
+	.sm-tide-bg-surface-floating {background: var(--tide-surface-floating);}
 
 	/* Border */
 	.sm-tide-border-primary   {border-color: var(--tide-primary);}
@@ -62,12 +63,12 @@
 	.md-tide-bg-primary   {background: var(--tide-primary);}
 	.md-tide-bg-secondary {background: var(--tide-secondary);}
 
-	.md-tide-bg-surface                {background: var(--tide-surface);}
-	.md-tide-bg-surface-variant        {background: var(--tide-surface-variant);}
-	.md-tide-bg-surface-brand          {background: var(--tide-surface-brand);}
-	.md-tide-bg-surface-accent         {background: var(--tide-surface-accent);}
-	.md-tide-bg-surface-gradient       {background: var(--tide-surface-gradient);}
-	.md-tide-bg-surface-floating       {background: var(--tide-surface-floating);}
+	.md-tide-bg-surface          {background: var(--tide-surface);}
+	.md-tide-bg-surface-variant  {background: var(--tide-surface-variant);}
+	.md-tide-bg-surface-brand    {background: var(--tide-surface-brand);}
+	.md-tide-bg-surface-accent   {background: var(--tide-surface-accent);}
+	.md-tide-bg-surface-gradient {background: var(--tide-surface-gradient);}
+	.md-tide-bg-surface-floating {background: var(--tide-surface-floating);}
 
 	/* Border */
 	.md-tide-border-primary   {border-color: var(--tide-primary);}
@@ -93,12 +94,12 @@
 	.lg-tide-bg-primary   {background: var(--tide-primary);}
 	.lg-tide-bg-secondary {background: var(--tide-secondary);}
 
-	.lg-tide-bg-surface                {background: var(--tide-surface);}
-	.lg-tide-bg-surface-variant        {background: var(--tide-surface-variant);}
-	.lg-tide-bg-surface-brand          {background: var(--tide-surface-brand);}
-	.lg-tide-bg-surface-accent         {background: var(--tide-surface-accent);}
-	.lg-tide-bg-surface-gradient       {background: var(--tide-surface-gradient);}
-	.lg-tide-bg-surface-floating       {background: var(--tide-surface-floating);}
+	.lg-tide-bg-surface          {background: var(--tide-surface);}
+	.lg-tide-bg-surface-variant  {background: var(--tide-surface-variant);}
+	.lg-tide-bg-surface-brand    {background: var(--tide-surface-brand);}
+	.lg-tide-bg-surface-accent   {background: var(--tide-surface-accent);}
+	.lg-tide-bg-surface-gradient {background: var(--tide-surface-gradient);}
+	.lg-tide-bg-surface-floating {background: var(--tide-surface-floating);}
 
 	/* Border */
 	.lg-tide-border-primary   {border-color: var(--tide-primary);}
@@ -124,12 +125,12 @@
 	.xl-tide-bg-primary   {background: var(--tide-primary);}
 	.xl-tide-bg-secondary {background: var(--tide-secondary);}
 
-	.xl-tide-bg-surface                {background: var(--tide-surface);}
-	.xl-tide-bg-surface-variant        {background: var(--tide-surface-variant);}
-	.xl-tide-bg-surface-brand          {background: var(--tide-surface-brand);}
-	.xl-tide-bg-surface-accent         {background: var(--tide-surface-accent);}
-	.xl-tide-bg-surface-gradient       {background: var(--tide-surface-gradient);}
-	.xl-tide-bg-surface-floating       {background: var(--tide-surface-floating);}
+	.xl-tide-bg-surface          {background: var(--tide-surface);}
+	.xl-tide-bg-surface-variant  {background: var(--tide-surface-variant);}
+	.xl-tide-bg-surface-brand    {background: var(--tide-surface-brand);}
+	.xl-tide-bg-surface-accent   {background: var(--tide-surface-accent);}
+	.xl-tide-bg-surface-gradient {background: var(--tide-surface-gradient);}
+	.xl-tide-bg-surface-floating {background: var(--tide-surface-floating);}
 
 	/* Border */
 	.xl-tide-border-primary   {border-color: 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

@@ -128,6 +128,16 @@
 	.lg-tide-border-success {border-color: var(--tide-success-border);}
 	.lg-tide-border-warning {border-color: var(--tide-warning-border);}
 
+	.lg-tide-border-blue   {border-color: var(--tide-blue-border);}
+	.lg-tide-border-green  {border-color: var(--tide-green-border);}
+	.lg-tide-border-lime   {border-color: var(--tide-lime-border);}
+	.lg-tide-border-orange {border-color: var(--tide-orange-border);}
+	.lg-tide-border-purple {border-color: var(--tide-purple-border);}
+	.lg-tide-border-red    {border-color: var(--tide-red-border);}
+	.lg-tide-border-salmon {border-color: var(--tide-salmon-border);}
+	.lg-tide-border-teal   {border-color: var(--tide-teal-border);}
+	.lg-tide-border-yellow {border-color: var(--tide-yellow-border);}
+
 	/* Border Width */
 	.lg-tide-border-1,
 	.lg-tide-border-2,
@@ -142,6 +152,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);}
@@ -238,6 +251,7 @@
 	/* Background */
 	.lg-tide-bg-initial {background-color: initial;}
 
+	/* Icon background colors only */
 	.lg-tide-bg-primary-error   {background-color: var(--tide-error-primary);}
 	.lg-tide-bg-primary-info    {background-color: var(--tide-info-primary);}
 	.lg-tide-bg-primary-success {background-color: var(--tide-success-primary);}
@@ -248,6 +262,16 @@
 	.lg-tide-bg-surface-success {background-color: var(--tide-success-surface);}
 	.lg-tide-bg-surface-warning {background-color: var(--tide-warning-surface);}
 
+	.lg-tide-bg-surface-blue   {background-color: var(--tide-blue-surface);}
+	.lg-tide-bg-surface-green  {background-color: var(--tide-green-surface);}
+	.lg-tide-bg-surface-lime   {background-color: var(--tide-lime-surface);}
+	.lg-tide-bg-surface-orange {background-color: var(--tide-orange-surface);}
+	.lg-tide-bg-surface-purple {background-color: var(--tide-purple-surface);}
+	.lg-tide-bg-surface-red    {background-color: var(--tide-red-surface);}
+	.lg-tide-bg-surface-salmon {background-color: var(--tide-salmon-surface);}
+	.lg-tide-bg-surface-teal   {background-color: var(--tide-teal-surface);}
+	.lg-tide-bg-surface-yellow {background-color: var(--tide-yellow-surface);}
+
 	.lg-tide-transparent-100 {background-color: var(--tide-transparent-100);}
 	.lg-tide-transparent-200 {background-color: var(--tide-transparent-200);}
 	.lg-tide-transparent-300 {background-color: var(--tide-transparent-300);}
@@ -279,6 +303,27 @@
 	.lg-tide-font-success {color: var(--tide-success-primary);}
 	.lg-tide-font-warning {color: var(--tide-warning-primary);}
 
+	.lg-tide-font-blue   {color: var(--tide-blue-on-surface);}
+	.lg-tide-font-green  {color: var(--tide-green-on-surface);}
+	.lg-tide-font-lime   {color: var(--tide-lime-on-surface);}
+	.lg-tide-font-orange {color: var(--tide-orange-on-surface);}
+	.lg-tide-font-purple {color: var(--tide-purple-on-surface);}
+	.lg-tide-font-red    {color: var(--tide-red-on-surface);}
+	.lg-tide-font-salmon {color: var(--tide-salmon-on-surface);}
+	.lg-tide-font-teal   {color: var(--tide-teal-on-surface);}
+	.lg-tide-font-yellow {color: var(--tide-yellow-on-surface);}
+
+	/* Badge icon colors only */
+	.lg-tide-font-primary-blue   {color: var(--tide-blue-primary);}
+	.lg-tide-font-primary-green  {color: var(--tide-green-primary);}
+	.lg-tide-font-primary-lime   {color: var(--tide-lime-primary);}
+	.lg-tide-font-primary-orange {color: var(--tide-orange-primary);}
+	.lg-tide-font-primary-purple {color: var(--tide-purple-primary);}
+	.lg-tide-font-primary-red    {color: var(--tide-red-primary);}
+	.lg-tide-font-primary-salmon {color: var(--tide-salmon-primary);}
+	.lg-tide-font-primary-teal   {color: var(--tide-teal-primary);}
+	.lg-tide-font-primary-yellow {color: var(--tide-yellow-primary);}
+
 	/* Font Size */
 	.lg-tide-font-10 {font-size: var(--tide-font-10);}
 	.lg-tide-font-12 {font-size: var(--tide-font-12);}
@@ -298,7 +343,7 @@
 	.lg-tide-align-middle  {vertical-align: middle;}
 	.lg-tide-align-initial {vertical-align: initial;}
 
-	.lg-tide-bg-blur {backdrop-filter: blur(8px);}
+	.lg-tide-bg-blur {backdrop-filter: var(--tide-bg-blur);}
 
 	.lg-tide-break-initial {overflow-wrap: initial;}
 	.lg-tide-break-word    {overflow-wrap: break-word;}