tide-design-system 2.2.8 → 2.2.10

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

@@ -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/dist/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/dist/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/dist/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/dist/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/dist/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%
+    );
 }
+
+