style: update dark and light theme colors and add new color variables (#23865)

web/themes/dark.css

@@ -439,7 +439,7 @@ html[data-theme="dark"] {
 
   --color-workflow-canvas-workflow-dot-color: rgb(133 133 173 / 0.11);
   --color-workflow-canvas-workflow-bg: #1d1d20;
-  --color-workflow-canvas-workflow-top-bar-1: #1d1d20;
+  --color-workflow-canvas-workflow-top-bar-1: rgb(29 29 32 / 0.9);
   --color-workflow-canvas-workflow-top-bar-2: rgb(29 29 32 / 0.08);
   --color-workflow-canvas-canvas-overlay: rgb(29 29 32 / 0.8);
 
@@ -507,6 +507,7 @@ html[data-theme="dark"] {
   --color-divider-intense: rgb(200 206 218 / 0.4);
   --color-divider-solid: #3a3a40;
   --color-divider-solid-alt: #747481;
+  --color-divider-accent: rgb(200 206 218 / 0.14);
 
   --color-state-base-hover: rgb(200 206 218 / 0.08);
   --color-state-base-active: rgb(200 206 218 / 0.2);
@@ -748,6 +749,14 @@ html[data-theme="dark"] {
 
   --color-saas-background: #0b0b0e;
   --color-saas-pricing-grid-bg: rgb(200 206 218 / 0.2);
+  --color-saas-dify-blue-static: #0033ff;
+  --color-saas-dify-blue-static-hover: #002cd6;
+  --color-saas-dify-blue-accessible: #0a68ff;
+  --color-saas-dify-blue-inverted: #ffffff;
+  --color-saas-dify-blue-inverted-dimmed: rgb(255 255 255 / 0.88);
+
+  --color-saas-background-inverted: rgb(255 255 255 / 0.9);
+  --color-saas-background-inverted-hover: #ffffff;
 
   --color-dify-logo-dify-logo-blue: #e8e8e8;
   --color-dify-logo-dify-logo-black: #e8e8e8;

web/themes/light.css

@@ -439,8 +439,8 @@ html[data-theme="light"] {
 
   --color-workflow-canvas-workflow-dot-color: rgb(133 133 173 / 0.15);
   --color-workflow-canvas-workflow-bg: #f2f4f7;
-  --color-workflow-canvas-workflow-top-bar-1: #f2f4f7;
-  --color-workflow-canvas-workflow-top-bar-2: rgb(242 244 247 / 0.24);
+  --color-workflow-canvas-workflow-top-bar-1: rgb(242 244 247 / 0.9);
+  --color-workflow-canvas-workflow-top-bar-2: rgb(242 244 247 / 0.05);
   --color-workflow-canvas-canvas-overlay: rgb(242 244 247 / 0.8);
 
   --color-workflow-link-line-active: #296dff;
@@ -507,6 +507,7 @@ html[data-theme="light"] {
   --color-divider-intense: rgb(16 24 40 / 0.3);
   --color-divider-solid: #d0d5dc;
   --color-divider-solid-alt: #98a2b2;
+  --color-divider-accent: #e5eaff;
 
   --color-state-base-hover: rgb(200 206 218 / 0.2);
   --color-state-base-active: rgb(200 206 218 / 0.4);
@@ -746,8 +747,16 @@ html[data-theme="light"] {
   --color-third-party-aws: #141f2e;
   --color-third-party-aws-alt: #0f1824;
 
-  --color-saas-background: #fcfcfd;
+  --color-saas-background: #ffffff;
   --color-saas-pricing-grid-bg: rgb(200 206 218 / 0.5);
+  --color-saas-dify-blue-static: #0033ff;
+  --color-saas-dify-blue-static-hover: #002cd6;
+  --color-saas-dify-blue-accessible: #0033ff;
+  --color-saas-dify-blue-inverted: #0033ff;
+  --color-saas-dify-blue-inverted-dimmed: #0033ff;
+
+  --color-saas-background-inverted: #0b0b0e;
+  --color-saas-background-inverted-hover: #222225;
 
   --color-dify-logo-dify-logo-blue: #0033ff;
   --color-dify-logo-dify-logo-black: #000000;

web/themes/tailwind-theme-var-define.ts

@@ -507,6 +507,7 @@ const vars = {
   'divider-intense': 'var(--color-divider-intense)',
   'divider-solid': 'var(--color-divider-solid)',
   'divider-solid-alt': 'var(--color-divider-solid-alt)',
+  'divider-accent': 'var(--color-divider-accent)',
 
   'state-base-hover': 'var(--color-state-base-hover)',
   'state-base-active': 'var(--color-state-base-active)',
@@ -748,6 +749,14 @@ const vars = {
 
   'saas-background': 'var(--color-saas-background)',
   'saas-pricing-grid-bg': 'var(--color-saas-pricing-grid-bg)',
+  'saas-dify-blue-static': 'var(--color-saas-dify-blue-static)',
+  'saas-dify-blue-static-hover': 'var(--color-saas-dify-blue-static-hover)',
+  'saas-dify-blue-accessible': 'var(--color-saas-dify-blue-accessible)',
+  'saas-dify-blue-inverted': 'var(--color-saas-dify-blue-inverted)',
+  'saas-dify-blue-inverted-dimmed': 'var(--color-saas-dify-blue-inverted-dimmed)',
+
+  'saas-background-inverted': 'var(--color-saas-background-inverted)',
+  'saas-background-inverted-hover': 'var(--color-saas-background-inverted-hover)',
 
   'dify-logo-dify-logo-blue': 'var(--color-dify-logo-dify-logo-blue)',
   'dify-logo-dify-logo-black': 'var(--color-dify-logo-dify-logo-black)',