From b5cf1560b1d53ee0c435c83d6da2e3159afa0844 Mon Sep 17 00:00:00 2001 From: Andrew Golovanov Date: Sun, 9 Feb 2025 20:29:58 +0300 Subject: [PATCH] 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 --- packages/ui/src/shared-style-variables.css | 28 ++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/packages/ui/src/shared-style-variables.css b/packages/ui/src/shared-style-variables.css index 20ce9df99..2fecd3423 100644 --- a/packages/ui/src/shared-style-variables.css +++ b/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); } }