feat: add widget gradient color variables for light and dark themes (#1062)

* feat: add widget gradient color variables for light and dark themes

* fix: minor changes

* fix: minor changes

Author: andrewgolovanov

packages/ui/src/shared-style-variables.css

@@ -1465,6 +1465,13 @@
     --canary-graph-gradient-executing-1: hsla(var(--canary-amber-150));
     --canary-graph-gradient-executing-2: hsla(var(--canary-amber-600));
     --canary-graph-viewport-bg: hsla(var(--canary-base-chrome-150));
+
+    --canary-widget-bg-gradient-from: var(--canary-base-chrome-100);
+    --canary-widget-bg-gradient-to: var(--canary-pure-white);
+    --canary-widget-number-gradient-from: var(--canary-base-chrome-500);
+    --canary-widget-number-gradient-to: var(--canary-base-chrome-600);
+    --canary-widget-number-bg-gradient-from: var(--canary-base-chrome-150);
+    --canary-widget-number-bg-gradient-to: var(--canary-pure-white);
   }
 
   .dark,
@@ -1927,6 +1934,13 @@
     --canary-graph-gradient-executing-2: hsla(var(--canary-base-chrome-850));
     --canary-graph-viewport-bg: hsla(var(--canary-base-chrome-850) / 0.6);
 
+    --canary-widget-number-gradient-from: var(--canary-base-chrome-200) / 1;
+    --canary-widget-number-gradient-to: var(--canary-base-chrome-600) / 0;
+    --canary-widget-number-bg-gradient-from: var(--canary-base-chrome-800);
+    --canary-widget-number-bg-gradient-to: var(--canary-base-chrome-850);
+    --canary-widget-bg-gradient-from: var(--canary-base-chrome-850);
+    --canary-widget-bg-gradient-to: var(--canary-base-chrome-950);
+
     /* Navigation gradients */
     /* We’ve removed them until we find a better solution in the design.
     --canary-nav-gradient-1-1: var();
@@ -2180,6 +2194,13 @@
     --canary-graph-gradient-executing-2: hsla(var(--canary-base-chrome-700));
     --canary-graph-viewport-bg: hsla(var(--canary-base-chrome-700) / 0.5);
 
+    --canary-widget-number-gradient-from: var(--canary-base-chrome-100);
+    --canary-widget-number-gradient-to: var(--canary-base-chrome-500);
+    --canary-widget-number-bg-gradient-from: var(--canary-base-chrome-800);
+    --canary-widget-number-bg-gradient-to: var(--canary-base-chrome-850);
+    --canary-widget-bg-gradient-from: var(--canary-base-chrome-850);
+    --canary-widget-bg-gradient-to: var(--canary-base-chrome-950);
+
     /* Navigation gradients */
     /* We’ve removed them until we find a better solution in the design.
     --canary-nav-gradient-1-1: var();
@@ -2429,5 +2450,12 @@
     --canary-graph-gradient-executing-1: hsla(var(--canary-amber-200));
     --canary-graph-gradient-executing-2: hsla(var(--canary-base-chrome-850));
     --canary-graph-viewport-bg: hsla(var(--canary-base-chrome-850) / 0.4);
+
+    --canary-widget-number-gradient-from: var(--canary-grey-200) / 1;
+    --canary-widget-number-gradient-to: var(--canary-base-chrome-600) / 0;
+    --canary-widget-number-bg-gradient-from: var(--canary-base-chrome-800);
+    --canary-widget-number-bg-gradient-to: var(--canary-base-chrome-850);
+    --canary-widget-bg-gradient-from: var(--canary-base-chrome-850);
+    --canary-widget-bg-gradient-to: var(--canary-base-chrome-950);
   }
 }