From 7acbbfe4eca6ab47fda36d8b8114e39f9253b89f Mon Sep 17 00:00:00 2001
From: Sychev Andrey <44414066+SychevAndrey@users.noreply.github.com>
Date: Mon, 11 Aug 2025 12:03:31 +0200
Subject: [PATCH] dbeaver/pro#5968 refactor: update dark theme styles (#3639)

* dbeaver/pro#5968 refactor: update dark theme styles

introduces new theme variable link-color which with a color which is used for coloring anchor elements in our app
adjust this color in dark theme to have better contrast with a background, use this color in secondary button for the same reasons

* dbeaver/pro#5968 fix: adjust dark theme color values for improved contrast

* dbeaver/pro#5968 fix: update negative color in dark theme

* dbeaver/pro#5968 fix: update negative color in dark theme

---------

Co-authored-by: Evgenia <139753579+EvgeniaBzzz@users.noreply.github.com>
---
 webapp/packages/core-blocks/src/Button.css           |  8 ++++----
 .../core-theming/src/styles/_theme-dark.scss         | 12 ++++++------
 .../packages/core-theming/src/styles/_variables.scss |  1 +
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/webapp/packages/core-blocks/src/Button.css b/webapp/packages/core-blocks/src/Button.css
index 2cf35994c8..a9fa467cb8 100644
--- a/webapp/packages/core-blocks/src/Button.css
+++ b/webapp/packages/core-blocks/src/Button.css
@@ -24,10 +24,10 @@
     --dbv-kit-btn-secondary-background: transparent;
     --dbv-kit-btn-secondary-background-hover: color-mix(in srgb, transparent, var(--theme-primary) 5%);
     --dbv-kit-btn-secondary-background-active: color-mix(in srgb, transparent, var(--theme-primary) 20%);
-    --dbv-kit-btn-secondary-foreground: var(--theme-primary);
-    --dbv-kit-btn-secondary-foreground-hover: var(--theme-primary);
-    --dbv-kit-btn-secondary-foreground-active: var(--theme-primary);
-    --dbv-kit-btn-secondary-border-color: var(--theme-primary);
+    --dbv-kit-btn-secondary-foreground: var(--theme-link-color);
+    --dbv-kit-btn-secondary-foreground-hover: var(--theme-link-color);
+    --dbv-kit-btn-secondary-foreground-active: var(--theme-link-color);
+    --dbv-kit-btn-secondary-border-color: var(--theme-link-color);
 
     --dbv-kit-btn-danger-background: var(--theme-negative);
     --dbv-kit-btn-danger-background-hover: color-mix(in srgb, var(--theme-negative), white 10%);
diff --git a/webapp/packages/core-theming/src/styles/_theme-dark.scss b/webapp/packages/core-theming/src/styles/_theme-dark.scss
index ca01a0d7c3..19aff22988 100644
--- a/webapp/packages/core-theming/src/styles/_theme-dark.scss
+++ b/webapp/packages/core-theming/src/styles/_theme-dark.scss
@@ -8,24 +8,24 @@
 
 $mdc-theme-primary: #2a7cb4;
 $mdc-theme-on-primary: #ffffff;
-$mdc-theme-secondary: hsl(240deg, 10%, 15%);
+$mdc-theme-secondary: hsl(240deg, 10%, 13%);
 $mdc-theme-on-secondary: #cbcbcb;
 
-$mdc-theme-sub-secondary: hsl(240deg, 10%, 20%);
+$mdc-theme-sub-secondary: hsl(240deg, 10%, 18%);
 $mdc-theme-on-sub-secondary: #cbcbcb;
 
-$mdc-theme-surface: hsl(240deg, 10%, 18%);
+$mdc-theme-surface: hsl(240deg, 10%, 16%);
 $mdc-theme-on-surface: #ffffff;
-$mdc-theme-background: hsl(240deg, 10%, 26%);
+$mdc-theme-background: hsl(240deg, 10%, 25%);
 $mdc-theme-error: #e94948;
 
 $color-scheme: dark;
 $color-positive: #52c41a;
 $color-on-positive: #fff;
-$color-negative: #e73e52;
+$color-negative: hsl(0, 95%, 65%);
 $color-status: #a08600;
 
-$link-color: $mdc-theme-primary;
+$link-color: lighten($mdc-theme-primary, 10%);
 $link-color-focus: #3f96d1;
 
 $input-color: $mdc-theme-on-secondary;
diff --git a/webapp/packages/core-theming/src/styles/_variables.scss b/webapp/packages/core-theming/src/styles/_variables.scss
index f6fb274e2c..2abaebd2bb 100644
--- a/webapp/packages/core-theming/src/styles/_variables.scss
+++ b/webapp/packages/core-theming/src/styles/_variables.scss
@@ -13,6 +13,7 @@ $mdc-theme-extra-property-values: (
   on-positive: $color-on-positive,
   negative: $color-negative,
   status: $color-status,
+  link-color: $link-color,
   input-color: $input-color,
   input-color-disabled: $input-color-disabled,
   input-color-readonly: $input-color-readonly,