tide-design-system 2.2.9 → 2.2.11

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