tide-design-system 2.2.9 → 2.2.11

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

package/src/assets/css/variables.css

@@ -52,10 +52,10 @@
   --tide-transparent-300: color-mix(in srgb, black 10%, transparent);
   --tide-transparent-400: color-mix(in srgb, black 50%, transparent);
 
-  /* Global tonal palette */
-  --tide-blue-100:  #EBF1FD;
-  --tide-blue-400:  #3870E9;
+  /* Blur */
+  --tide-bg-blur: var(--tide-bg-blur);
 
+  /* Global tonal palette */
   --tide-gray-100:  #FFFFFF;
   --tide-gray-200:  #F5F5F5;
   --tide-gray-300:  #E4E4E4;
@@ -67,31 +67,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 +183,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/assets/svg/icons/IconArrowUp.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M11 20V7.825l-5.6 5.6L4 12l8-8 8 8-1.4 1.425-5.6-5.6V20h-2Z"/>
+</svg>

package/src/assets/svg/icons/IconAssignment.svg

@@ -1,5 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path
-    d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H9.2C9.41667 2.4 9.77917 1.91667 10.2875 1.55C10.7958 1.18333 11.3667 1 12 1C12.6333 1 13.2042 1.18333 13.7125 1.55C14.2208 1.91667 14.5833 2.4 14.8 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19ZM7 17H14V15H7V17ZM7 13H17V11H7V13ZM7 9H17V7H7V9ZM12 4.25C12.2167 4.25 12.3958 4.17917 12.5375 4.0375C12.6792 3.89583 12.75 3.71667 12.75 3.5C12.75 3.28333 12.6792 3.10417 12.5375 2.9625C12.3958 2.82083 12.2167 2.75 12 2.75C11.7833 2.75 11.6042 2.82083 11.4625 2.9625C11.3208 3.10417 11.25 3.28333 11.25 3.5C11.25 3.71667 11.3208 3.89583 11.4625 4.0375C11.6042 4.17917 11.7833 4.25 12 4.25Z"
-  />
+  <path d="M5 21c-.55 0-1.02-.2-1.41-.59-.4-.39-.59-.86-.59-1.41V5c0-.55.2-1.02.59-1.41C3.98 3.19 4.45 3 5 3h4.2A3 3 0 0 1 12 1a3 3 0 0 1 2.8 2H19c.55 0 1.02.2 1.41.59.4.39.59.86.59 1.41v14c0 .55-.2 1.02-.59 1.41-.39.4-.86.59-1.41.59H5Zm0-2h14V5H5v14Zm2-2h7v-2H7v2Zm0-4h10v-2H7v2Zm0-4h10V7H7v2Zm5-4.75a.73.73 0 0 0 .75-.75.73.73 0 0 0-.75-.75.73.73 0 0 0-.75.75.73.73 0 0 0 .75.75Z"/>
 </svg>

package/src/assets/svg/icons/IconClear.svg

@@ -1,5 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path
-    d="M8.4 17L12 13.4L15.6 17L17 15.6L13.4 12L17 8.4L15.6 7L12 10.6L8.4 7L7 8.4L10.6 12L7 15.6L8.4 17ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z"
-  />
+  <path d="m8.4 17 3.6-3.6 3.6 3.6 1.4-1.4-3.6-3.6L17 8.4 15.6 7 12 10.6 8.4 7 7 8.4l3.6 3.6L7 15.6 8.4 17Zm3.6 5a10.1 10.1 0 0 1-9.21-6.1A9.74 9.74 0 0 1 2 12a10.1 10.1 0 0 1 6.1-9.21A9.74 9.74 0 0 1 12 2a10.1 10.1 0 0 1 9.21 6.1c.53 1.22.79 2.52.79 3.9s-.26 2.68-.79 3.9a10.1 10.1 0 0 1-5.31 5.31A9.74 9.74 0 0 1 12 22Zm0-2c2.23 0 4.13-.77 5.68-2.32A7.72 7.72 0 0 0 20 12c0-2.23-.77-4.13-2.32-5.67A7.72 7.72 0 0 0 12 4c-2.23 0-4.13.78-5.67 2.33A7.72 7.72 0 0 0 4 12c0 2.23.78 4.13 2.33 5.68A7.72 7.72 0 0 0 12 20Z"/>
 </svg>

package/src/assets/svg/icons/IconFacebook.svg

@@ -1,5 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path
-    d="M23 12C23 5.92422 18.0758 1 12 1C5.92422 1 1 5.92422 1 12C1 17.1562 4.55352 21.4875 9.34453 22.6777V15.3602H7.07578V12H9.34453V10.552C9.34453 6.80938 11.0375 5.07344 14.7156 5.07344C15.4117 5.07344 16.6148 5.21094 17.109 5.34844V8.39062C16.8512 8.36484 16.4 8.34766 15.8371 8.34766C14.0324 8.34766 13.3363 9.03086 13.3363 10.8055V12H16.9285L16.3098 15.3602H13.332V22.9184C18.7805 22.2609 23 17.6246 23 12Z"
-  />
+  <path d="M23 12c0-6.076-4.924-11-11-11S1 5.924 1 12c0 5.156 3.554 9.488 8.345 10.678V15.36h-2.27V12h2.27v-1.448c0-3.743 1.692-5.479 5.37-5.479.697 0 1.9.138 2.394.275v3.043a14.496 14.496 0 0 0-1.272-.043c-1.805 0-2.5.683-2.5 2.457V12h3.591l-.618 3.36h-2.978v7.558C18.78 22.261 23 17.625 23 12Z"/>
 </svg>

package/src/assets/svg/icons/IconInstagram.svg

@@ -1,5 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path
-    d="M12.0025 6.35948C8.88098 6.35948 6.36319 8.87783 6.36319 12C6.36319 15.1222 8.88098 17.6405 12.0025 17.6405C15.1239 17.6405 17.6417 15.1222 17.6417 12C17.6417 8.87783 15.1239 6.35948 12.0025 6.35948ZM12.0025 15.6671C9.98528 15.6671 8.3362 14.0225 8.3362 12C8.3362 9.97746 9.98037 8.33292 12.0025 8.33292C14.0245 8.33292 15.6687 9.97746 15.6687 12C15.6687 14.0225 14.0196 15.6671 12.0025 15.6671ZM19.1877 6.12875C19.1877 6.8602 18.5988 7.44438 17.8724 7.44438C17.1411 7.44438 16.5571 6.85529 16.5571 6.12875C16.5571 5.40221 17.146 4.81312 17.8724 4.81312C18.5988 4.81312 19.1877 5.40221 19.1877 6.12875ZM22.9227 7.46402C22.8393 5.70166 22.4368 4.14058 21.146 2.8544C19.8601 1.56822 18.2994 1.16568 16.5374 1.07732C14.7215 0.974227 9.27853 0.974227 7.46258 1.07732C5.70552 1.16077 4.14479 1.56332 2.85399 2.84949C1.56319 4.13567 1.16564 5.69675 1.0773 7.45911C0.974233 9.27547 0.974233 14.7196 1.0773 16.536C1.16074 18.2983 1.56319 19.8594 2.85399 21.1456C4.14479 22.4318 5.70061 22.8343 7.46258 22.9227C9.27853 23.0258 14.7215 23.0258 16.5374 22.9227C18.2994 22.8392 19.8601 22.4367 21.146 21.1456C22.4319 19.8594 22.8344 18.2983 22.9227 16.536C23.0258 14.7196 23.0258 9.28037 22.9227 7.46402ZM20.5767 18.4849C20.1939 19.4471 19.4528 20.1883 18.4859 20.5761C17.038 21.1505 13.6025 21.018 12.0025 21.018C10.4025 21.018 6.96196 21.1456 5.51902 20.5761C4.55705 20.1932 3.81595 19.452 3.42822 18.4849C2.85399 17.0367 2.9865 13.6004 2.9865 12C2.9865 10.3996 2.8589 6.95838 3.42822 5.51512C3.81104 4.55294 4.55215 3.81167 5.51902 3.42385C6.96687 2.84949 10.4025 2.98204 12.0025 2.98204C13.6025 2.98204 17.0429 2.8544 18.4859 3.42385C19.4479 3.80676 20.189 4.54803 20.5767 5.51512C21.1509 6.96329 21.0184 10.3996 21.0184 12C21.0184 13.6004 21.1509 17.0416 20.5767 18.4849Z"
-  />
+  <path d="M12 6.36a5.63 5.63 0 1 0 0 11.28 5.63 5.63 0 1 0 0-11.28Zm0 9.3a3.67 3.67 0 1 1 .02-7.34 3.67 3.67 0 0 1-.02 7.35Zm7.19-9.53a1.31 1.31 0 1 1-2.63 0 1.32 1.32 0 1 1 2.63 0Zm3.73 1.33c-.08-1.76-.48-3.32-1.77-4.6-1.29-1.3-2.85-1.7-4.61-1.78-1.82-.1-7.26-.1-9.08 0-1.75.08-3.32.48-4.6 1.77-1.3 1.29-1.7 2.85-1.78 4.6-.1 1.83-.1 7.27 0 9.09.08 1.76.48 3.32 1.77 4.6 1.3 1.3 2.85 1.7 4.61 1.78 1.82.1 7.26.1 9.08 0 1.76-.08 3.32-.48 4.6-1.77 1.3-1.3 1.7-2.85 1.78-4.61.1-1.82.1-7.26 0-9.08Zm-2.34 11.02a3.71 3.71 0 0 1-2.1 2.1c-1.44.57-4.88.44-6.48.44-1.6 0-5.04.13-6.48-.44a3.71 3.71 0 0 1-2.1-2.1C2.86 17.04 3 13.6 3 12c0-1.6-.13-5.04.44-6.48a3.71 3.71 0 0 1 2.09-2.1c1.45-.57 4.88-.44 6.48-.44 1.6 0 5.04-.13 6.49.44.96.39 1.7 1.13 2.09 2.1.57 1.44.44 4.88.44 6.48 0 1.6.13 5.04-.44 6.48Z"/>
 </svg>

package/src/assets/svg/icons/IconLayout.svg

@@ -1,5 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path
-    d="M3 13V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H11V13H3ZM13 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V9H13V3ZM13 21V11H21V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H13ZM3 15H11V21H5C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V15ZM5 11H9V5H5V11ZM15 7H19V5H15V7ZM15 13V19H19V13H15ZM5 17V19H9V17H5Z"
-  />
+  <path d="M3 13V5c0-.5.2-1 .6-1.4A2 2 0 0 1 5 3h6v10H3ZM13 3h6c.6 0 1 .2 1.4.6.4.4.6.9.6 1.4v4h-8V3Zm0 18V11h8v8c0 .6-.2 1-.6 1.4a2 2 0 0 1-1.4.6h-6ZM3 15h8v6H5a2 2 0 0 1-1.4-.6A2 2 0 0 1 3 19v-4Zm2-4h4V5H5v6Zm10-4h4V5h-4v2Zm0 6v6h4v-6h-4ZM5 17v2h4v-2H5Z"/>
 </svg>

package/src/assets/svg/icons/IconLinkedIn.svg

@@ -1,5 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path
-    d="M21 1.5H2.99531C2.17031 1.5 1.5 2.17969 1.5 3.01406V20.9859C1.5 21.8203 2.17031 22.5 2.99531 22.5H21C21.825 22.5 22.5 21.8203 22.5 20.9859V3.01406C22.5 2.17969 21.825 1.5 21 1.5ZM7.84687 19.5H4.73438V9.47812H7.85156V19.5H7.84687ZM6.29062 8.10938C5.29219 8.10938 4.48594 7.29844 4.48594 6.30469C4.48594 5.31094 5.29219 4.5 6.29062 4.5C7.28437 4.5 8.09531 5.31094 8.09531 6.30469C8.09531 7.30312 7.28906 8.10938 6.29062 8.10938ZM19.5141 19.5H16.4016V14.625C16.4016 13.4625 16.3781 11.9672 14.7844 11.9672C13.1625 11.9672 12.9141 13.2328 12.9141 14.5406V19.5H9.80156V9.47812H12.7875V10.8469H12.8297C13.2469 10.0594 14.2641 9.22969 15.7781 9.22969C18.9281 9.22969 19.5141 11.3062 19.5141 14.0062V19.5Z"
-  />
+  <path d="M21 1.5H3c-.8 0-1.5.7-1.5 1.5v18c0 .8.7 1.5 1.5 1.5h18c.8 0 1.5-.7 1.5-1.5V3c0-.8-.7-1.5-1.5-1.5Zm-13.2 18h-3v-10h3v10ZM6.3 8.1a1.8 1.8 0 1 1 0-3.6 1.8 1.8 0 0 1 0 3.6Zm13.2 11.4h-3.1v-4.9c0-1.1 0-2.6-1.6-2.6s-1.9 1.2-1.9 2.5v5H9.8v-10h3v1.3c.4-.7 1.5-1.6 3-1.6 3.1 0 3.7 2.1 3.7 4.8v5.5Z"/>
 </svg>

package/src/assets/svg/icons/IconStarFilled.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="m5.825 21 1.625-7.025L2 9.25l7.2-.625L12 2l2.8 6.625 7.2.625-5.45 4.725L18.175 21 12 17.275 5.825 21Z" />
+</svg>

package/src/assets/svg/icons/IconStarHalf.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="m15.15 16.85-.825-3.6 2.775-2.4-3.65-.325-1.45-3.4v7.8l3.15 1.925ZM5.825 21l1.625-7.025L2 9.25l7.2-.625L12 2l2.8 6.625 7.2.625-5.45 4.725L18.175 21 12 17.275 5.825 21Z"/>
+</svg>

package/src/components/TideBadge.vue

@@ -1,16 +1,20 @@
 <script lang="ts" setup>
   import TideIcon from '@/components/TideIcon.vue';
+  import { BADGE_COLOR_DETAILS } from '@/types/Badge';
   import { CSS } from '@/types/Styles';
 
+  import type { BadgeColor } from '@/types/Badge';
   import type { Icon } from '@/types/Icon';
 
   type Props = {
+    color?: BadgeColor;
     iconLeading?: Icon;
     isFloating?: boolean;
     label: string;
   };
 
   const props = withDefaults(defineProps<Props>(), {
+    color: undefined,
     iconLeading: undefined,
     isFloating: false,
   });
@@ -20,20 +24,21 @@
   <div
     :class="[
       'tide-badge',
-      props.isFloating ? [CSS.BG.SURFACE.FLOATING, CSS.SHADOW.BOTTOM] : [CSS.BG.SURFACE.VARIANT],
+      props.isFloating || props.color ? [CSS.BG.SURFACE.FLOATING, CSS.SHADOW.BOTTOM] : [CSS.BG.SURFACE.VARIANT],
       CSS.DISPLAY.INLINE_FLEX,
       CSS.AXIS2.CENTER,
       CSS.GAP.QUARTER,
       CSS.BORDER.RADIUS.QUARTER,
       CSS.PADDING.Y.QUARTER,
       CSS.PADDING.X.HALF,
+      props.color && [CSS.BORDER.LEFT.TWO, BADGE_COLOR_DETAILS[props.color].borderColor],
       CSS.ELLIPSIS,
       CSS.FONT.ROLE.LABEL_2,
       CSS.WHITESPACE_WRAP.OFF,
     ]"
   >
     <TideIcon
-      :class="[CSS.FLEX.SHRINK.OFF]"
+      :class="[CSS.FLEX.SHRINK.OFF, props.color && BADGE_COLOR_DETAILS[props.color].iconColor]"
       :icon="props.iconLeading"
       v-if="props.iconLeading"
     />

package/src/components/TideBadgeVerifiedVehicle.vue

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