tide-design-system 2.2.9 → 2.2.11

package/dist/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/dist/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/dist/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/dist/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;}

package/dist/css/utilities-md.css

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

package/dist/css/utilities-sm.css

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

package/dist/css/utilities-xl.css

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

package/dist/css/utilities.css

@@ -127,6 +127,16 @@
 .tide-border-success {border-color: var(--tide-success-border);}
 .tide-border-warning {border-color: var(--tide-warning-border);}
 
+.tide-border-blue   {border-color: var(--tide-blue-border);}
+.tide-border-green  {border-color: var(--tide-green-border);}
+.tide-border-lime   {border-color: var(--tide-lime-border);}
+.tide-border-orange {border-color: var(--tide-orange-border);}
+.tide-border-purple {border-color: var(--tide-purple-border);}
+.tide-border-red    {border-color: var(--tide-red-border);}
+.tide-border-salmon {border-color: var(--tide-salmon-border);}
+.tide-border-teal   {border-color: var(--tide-teal-border);}
+.tide-border-yellow {border-color: var(--tide-yellow-border);}
+
 /* Border Width */
 .tide-border-1,
 .tide-border-2,
@@ -141,6 +151,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);}
@@ -237,6 +250,7 @@
 /* Background */
 .tide-bg-initial {background-color: initial;}
 
+/* Icon background colors only */
 .tide-bg-primary-error   {background-color: var(--tide-error-primary);}
 .tide-bg-primary-info    {background-color: var(--tide-info-primary);}
 .tide-bg-primary-success {background-color: var(--tide-success-primary);}
@@ -247,6 +261,16 @@
 .tide-bg-surface-success {background-color: var(--tide-success-surface);}
 .tide-bg-surface-warning {background-color: var(--tide-warning-surface);}
 
+.tide-bg-surface-blue   {background-color: var(--tide-blue-surface);}
+.tide-bg-surface-green  {background-color: var(--tide-green-surface);}
+.tide-bg-surface-lime   {background-color: var(--tide-lime-surface);}
+.tide-bg-surface-orange {background-color: var(--tide-orange-surface);}
+.tide-bg-surface-purple {background-color: var(--tide-purple-surface);}
+.tide-bg-surface-red    {background-color: var(--tide-red-surface);}
+.tide-bg-surface-salmon {background-color: var(--tide-salmon-surface);}
+.tide-bg-surface-teal   {background-color: var(--tide-teal-surface);}
+.tide-bg-surface-yellow {background-color: var(--tide-yellow-surface);}
+
 .tide-transparent-100 {background-color: var(--tide-transparent-100);}
 .tide-transparent-200 {background-color: var(--tide-transparent-200);}
 .tide-transparent-300 {background-color: var(--tide-transparent-300);}
@@ -278,6 +302,27 @@
 .tide-font-success {color: var(--tide-success-primary);}
 .tide-font-warning {color: var(--tide-warning-primary);}
 
+.tide-font-blue   {color: var(--tide-blue-on-surface);}
+.tide-font-green  {color: var(--tide-green-on-surface);}
+.tide-font-lime   {color: var(--tide-lime-on-surface);}
+.tide-font-orange {color: var(--tide-orange-on-surface);}
+.tide-font-purple {color: var(--tide-purple-on-surface);}
+.tide-font-red    {color: var(--tide-red-on-surface);}
+.tide-font-salmon {color: var(--tide-salmon-on-surface);}
+.tide-font-teal   {color: var(--tide-teal-on-surface);}
+.tide-font-yellow {color: var(--tide-yellow-on-surface);}
+
+/* Badge icon colors only */
+.tide-font-primary-blue   {color: var(--tide-blue-primary);}
+.tide-font-primary-green  {color: var(--tide-green-primary);}
+.tide-font-primary-lime   {color: var(--tide-lime-primary);}
+.tide-font-primary-orange {color: var(--tide-orange-primary);}
+.tide-font-primary-purple {color: var(--tide-purple-primary);}
+.tide-font-primary-red    {color: var(--tide-red-primary);}
+.tide-font-primary-salmon {color: var(--tide-salmon-primary);}
+.tide-font-primary-teal   {color: var(--tide-teal-primary);}
+.tide-font-primary-yellow {color: var(--tide-yellow-primary);}
+
 /* Font Size */
 .tide-font-10 {font-size: var(--tide-font-10);}
 .tide-font-12 {font-size: var(--tide-font-12);}
@@ -297,7 +342,7 @@
 .tide-align-middle  {vertical-align: middle;}
 .tide-align-initial {vertical-align: initial;}
 
-.tide-bg-blur {backdrop-filter: blur(8px);}
+.tide-bg-blur {backdrop-filter: var(--tide-bg-blur);}
 
 .tide-break-initial {overflow-wrap: initial;}
 .tide-break-word    {overflow-wrap: break-word;}