From c952d721f2850466c89563877d75c5bcca0f6d30 Mon Sep 17 00:00:00 2001
From: Bastian Allgeier <mail@bastianallgeier.com>
Date: Thu, 28 Nov 2024 22:12:22 +0100
Subject: [PATCH] Additional dark mode changes

---
 panel/src/components/Collection/Item.vue                   | 2 +-
 panel/src/components/Dialogs/Elements/Search.vue           | 2 +-
 panel/src/components/Drawers/Elements/Header.vue           | 2 +-
 panel/src/components/Forms/Blocks/Block.vue                | 2 +-
 panel/src/components/Forms/Blocks/BlockSelector.vue        | 2 +-
 panel/src/components/Forms/Blocks/Elements/BlockFigure.vue | 2 +-
 panel/src/components/Forms/Previews/UrlFieldPreview.vue    | 2 +-
 panel/src/components/Layout/Stat.vue                       | 2 +-
 panel/src/components/Layout/Table.vue                      | 6 +++---
 panel/src/components/Navigation/Button.vue                 | 2 ++
 panel/src/components/Navigation/ButtonGroup.vue            | 4 ++--
 panel/src/components/Navigation/Tag.vue                    | 2 +-
 panel/src/components/Text/Label.vue                        | 2 +-
 panel/src/components/Text/Text.vue                         | 4 ++++
 panel/src/components/Views/Login/LoginView.vue             | 4 ++--
 panel/src/components/Views/PreviewView.vue                 | 2 +-
 panel/src/styles/config/shadow.css                         | 6 +++++-
 panel/src/styles/utilities/theme.css                       | 7 ++++---
 18 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/panel/src/components/Collection/Item.vue b/panel/src/components/Collection/Item.vue
index 4ae3425864..4835b21d8c 100644
--- a/panel/src/components/Collection/Item.vue
+++ b/panel/src/components/Collection/Item.vue
@@ -140,7 +140,7 @@ export default {
 :root {
 	--item-button-height: var(--height-md);
 	--item-button-width: var(--height-md);
-	--item-color-back: light-dark(var(--color-white), var(--color-gray-950));
+	--item-color-back: light-dark(var(--color-white), var(--color-gray-850));
 	--item-height: auto;
 	--item-height-cardlet: calc(var(--height-md) * 3);
 }
diff --git a/panel/src/components/Dialogs/Elements/Search.vue b/panel/src/components/Dialogs/Elements/Search.vue
index f55c23b235..c5993d09ec 100644
--- a/panel/src/components/Dialogs/Elements/Search.vue
+++ b/panel/src/components/Dialogs/Elements/Search.vue
@@ -37,6 +37,6 @@ export default {
 .k-dialog-search {
 	margin-bottom: 0.75rem;
 	--input-color-border: transparent;
-	--input-color-back: var(--color-gray-300);
+	--input-color-back: light-dark(var(--color-gray-300), var(--color-gray-950));
 }
 </style>
diff --git a/panel/src/components/Drawers/Elements/Header.vue b/panel/src/components/Drawers/Elements/Header.vue
index 97cdd858d8..8d57627a57 100644
--- a/panel/src/components/Drawers/Elements/Header.vue
+++ b/panel/src/components/Drawers/Elements/Header.vue
@@ -68,7 +68,7 @@ export default {
 	align-items: center;
 	line-height: 1;
 	justify-content: space-between;
-	background: var(--color-white);
+	background: light-dark(var(--color-white), var(--color-gray-850));
 	font-size: var(--text-sm);
 }
 
diff --git a/panel/src/components/Forms/Blocks/Block.vue b/panel/src/components/Forms/Blocks/Block.vue
index 11daefecf1..f3bdb36b2f 100644
--- a/panel/src/components/Forms/Blocks/Block.vue
+++ b/panel/src/components/Forms/Blocks/Block.vue
@@ -366,7 +366,7 @@ export default {
 	border-radius: var(--rounded);
 }
 .k-block-container:not(:last-of-type) {
-	border-bottom: 1px dashed var(--color-border-dimmed);
+	border-bottom: 1px dashed var(--panel-color-back);
 }
 .k-block-container:focus {
 	outline: 0;
diff --git a/panel/src/components/Forms/Blocks/BlockSelector.vue b/panel/src/components/Forms/Blocks/BlockSelector.vue
index b42cc5c0e7..40bc8cd8ce 100644
--- a/panel/src/components/Forms/Blocks/BlockSelector.vue
+++ b/panel/src/components/Forms/Blocks/BlockSelector.vue
@@ -157,7 +157,7 @@ export default {
 }
 .k-block-types .k-button {
 	--button-color-icon: var(--color-text);
-	--button-color-back: var(--color-white);
+	--button-color-back: light-dark(var(--color-white), var(--color-gray-850));
 	--button-padding: var(--spacing-3);
 	width: 100%;
 	justify-content: start;
diff --git a/panel/src/components/Forms/Blocks/Elements/BlockFigure.vue b/panel/src/components/Forms/Blocks/Elements/BlockFigure.vue
index e35483fcd3..c67b912b7e 100644
--- a/panel/src/components/Forms/Blocks/Elements/BlockFigure.vue
+++ b/panel/src/components/Forms/Blocks/Elements/BlockFigure.vue
@@ -52,7 +52,7 @@ export default {
 
 <style>
 .k-block-figure:not([data-empty="true"]) {
-	--block-figure-back: var(--color-white);
+	--block-figure-back: var(--block-color-back);
 	background: var(--block-figure-back);
 }
 .k-block-figure-container:not([data-disabled="true"]) {
diff --git a/panel/src/components/Forms/Previews/UrlFieldPreview.vue b/panel/src/components/Forms/Previews/UrlFieldPreview.vue
index 92a6a64a16..08ac43b65a 100644
--- a/panel/src/components/Forms/Previews/UrlFieldPreview.vue
+++ b/panel/src/components/Forms/Previews/UrlFieldPreview.vue
@@ -60,6 +60,6 @@ export default {
 	text-underline-offset: var(--link-underline-offset);
 }
 .k-url-field-preview a:hover {
-	color: var(--color-black);
+	color: var(--link-color-hover);
 }
 </style>
diff --git a/panel/src/components/Layout/Stat.vue b/panel/src/components/Layout/Stat.vue
index df424656a1..cd21873b96 100644
--- a/panel/src/components/Layout/Stat.vue
+++ b/panel/src/components/Layout/Stat.vue
@@ -83,7 +83,7 @@ export default {
 <style>
 :root {
 	--stat-color-back: var(--item-color-back);
-	--stat-color-hover-back: light-dark(var(--color-gray-100), var(--color-gray-1000));
+	--stat-color-hover-back: light-dark(var(--color-gray-100), var(--color-gray-850));
 	--stat-info-text-color: var(--color-text-dimmed);
 	--stat-value-text-size: var(--text-2xl);
 }
diff --git a/panel/src/components/Layout/Table.vue b/panel/src/components/Layout/Table.vue
index ed0f397887..44cde91f1d 100644
--- a/panel/src/components/Layout/Table.vue
+++ b/panel/src/components/Layout/Table.vue
@@ -370,10 +370,10 @@ export default {
 <style>
 :root {
 	--table-cell-padding: var(--spacing-3);
-	--table-color-back: light-dark(var(--color-white), var(--color-gray-950));
+	--table-color-back: light-dark(var(--color-white), var(--color-gray-850));
 	--table-color-border: var(--panel-color-back);
-	--table-color-hover: light-dark(var(--color-gray-100), var(--color-gray-1000));
-	--table-color-th-back: light-dark(var(--color-gray-100), var(--color-gray-1000));
+	--table-color-hover: light-dark(var(--color-gray-100), rgba(0,0,0, .1));
+	--table-color-th-back: light-dark(var(--color-gray-100), var(--color-gray-800));
 	--table-color-th-text: var(--color-text-dimmed);
 	--table-row-height: var(--input-height);
 }
diff --git a/panel/src/components/Navigation/Button.vue b/panel/src/components/Navigation/Button.vue
index d9a971fd8e..2cd4a34eb8 100644
--- a/panel/src/components/Navigation/Button.vue
+++ b/panel/src/components/Navigation/Button.vue
@@ -314,6 +314,7 @@ export default {
 .k-button:where([data-variant="filled"][data-theme]) {
 	--button-color-icon: var(--theme-color-700);
 	--button-color-back: var(--theme-color-back);
+	--button-color-text: var(--theme-color-text-highlight);
 }
 .k-button:where([data-theme$="-icon"][data-variant="filled"]) {
 	--button-color-icon: hsl(
@@ -321,6 +322,7 @@ export default {
 		57%
 	); /* slightly improve the contrast */
 	--button-color-back: light-dark(var(--color-gray-300), var(--color-gray-950));
+	--button-color-text: currentColor;
 }
 
 /** Icon Buttons **/
diff --git a/panel/src/components/Navigation/ButtonGroup.vue b/panel/src/components/Navigation/ButtonGroup.vue
index 2db276e43c..82a9fc7e2c 100644
--- a/panel/src/components/Navigation/ButtonGroup.vue
+++ b/panel/src/components/Navigation/ButtonGroup.vue
@@ -85,13 +85,13 @@ export default {
 }
 
 .k-button-group[data-layout="collapsed"] > .k-button:not([data-theme]) {
-	--theme-color-500: var(--panel-color-back);
+	--theme-color-border: var(--panel-color-back);
 }
 .k-button-group[data-layout="collapsed"]
 	> .k-button[data-variant="filled"]:not(:first-child) {
 	border-start-start-radius: 0;
 	border-end-start-radius: 0;
-	border-left: 1px solid var(--theme-color-500);
+	border-left: 1px solid var(--theme-color-border);
 }
 
 .k-button-group[data-layout="collapsed"]
diff --git a/panel/src/components/Navigation/Tag.vue b/panel/src/components/Navigation/Tag.vue
index b2da0fe058..f1bd24e333 100644
--- a/panel/src/components/Navigation/Tag.vue
+++ b/panel/src/components/Navigation/Tag.vue
@@ -116,7 +116,7 @@ export default {
 
 <style>
 :root {
-	--tag-color-back: var(--color-black);
+	--tag-color-back: var(--color-gray-950);
 	--tag-color-text: var(--color-white);
 	--tag-color-toggle: currentColor;
 	--tag-color-disabled-back: var(--color-gray-600);
diff --git a/panel/src/components/Text/Label.vue b/panel/src/components/Text/Label.vue
index 42b71f6ec4..a0ce6bdb3c 100644
--- a/panel/src/components/Text/Label.vue
+++ b/panel/src/components/Text/Label.vue
@@ -106,7 +106,7 @@ export default {
 
 .k-label abbr.k-label-invalid {
 	display: none;
-	color: var(--color-red-700);
+	color: light-dark(var(--color-red-700), var(--color-red-600));
 }
 
 /** Tracking invalid via CSS */
diff --git a/panel/src/components/Text/Text.vue b/panel/src/components/Text/Text.vue
index 304233e38a..a4ded50481 100644
--- a/panel/src/components/Text/Text.vue
+++ b/panel/src/components/Text/Text.vue
@@ -50,6 +50,7 @@ export default {
 	--text-font-size: 1em;
 	--text-line-height: 1.5;
 	--link-color: light-dark(var(--color-blue-800), var(--color-blue-600));
+	--link-color-hover: light-dark(var(--color-black), var(--color-white));
 	--link-underline-offset: 2px;
 }
 
@@ -114,6 +115,9 @@ export default {
 	border-radius: var(--rounded-xs);
 	outline-offset: 2px;
 }
+.k-text :where(.k-link, a):hover {
+	color: var(--link-color-hover);
+}
 
 /* Lists */
 .k-text ol,
diff --git a/panel/src/components/Views/Login/LoginView.vue b/panel/src/components/Views/Login/LoginView.vue
index 511bc00495..b6eca78134 100644
--- a/panel/src/components/Views/Login/LoginView.vue
+++ b/panel/src/components/Views/Login/LoginView.vue
@@ -91,8 +91,8 @@ export default {
 
 <style>
 .k-login {
-	--dialog-color-back: var(--color-white);
-	--dialog-shadow: var(--shadow);
+	--dialog-color-back: light-dark(var(--color-white), var(--color-gray-950));
+	--dialog-shadow: light-dark(var(--shadow), none);
 
 	container-type: inline-size;
 }
diff --git a/panel/src/components/Views/PreviewView.vue b/panel/src/components/Views/PreviewView.vue
index 27df5f55aa..386142d2ef 100644
--- a/panel/src/components/Views/PreviewView.vue
+++ b/panel/src/components/Views/PreviewView.vue
@@ -209,7 +209,7 @@ export default {
 	display: flex;
 	flex-direction: column;
 	padding: var(--spacing-6);
-	background: var(--color-gray-200);
+	background: var(--panel-color-back);
 }
 .k-preview-view-panel header {
 	container-type: inline-size;
diff --git a/panel/src/styles/config/shadow.css b/panel/src/styles/config/shadow.css
index aa0c19f173..93e6a310ca 100644
--- a/panel/src/styles/config/shadow.css
+++ b/panel/src/styles/config/shadow.css
@@ -1,5 +1,5 @@
 :root {
-	--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.025);
+	--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.025);
 	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
 		0 2px 4px -1px rgba(0, 0, 0, 0.05);
 	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
@@ -21,3 +21,7 @@
 	--shadow-dropdown: var(--shadow-lg);
 	--shadow-item: var(--shadow-sm);
 }
+
+:root:has(.k-panel[data-theme="dark"]) {
+	--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.125);
+}
\ No newline at end of file
diff --git a/panel/src/styles/utilities/theme.css b/panel/src/styles/utilities/theme.css
index 0ef4f2e4bd..42b17c58c4 100644
--- a/panel/src/styles/utilities/theme.css
+++ b/panel/src/styles/utilities/theme.css
@@ -24,6 +24,7 @@
 	--theme-color-800: hsl(var(--theme-color-hs), var(--theme-color-l-800));
 	--theme-color-900: hsl(var(--theme-color-hs), var(--theme-color-l-900));
 
+	--theme-color-border: light-dark(var(--theme-color-500), var(--theme-color-600));
 	--theme-color-text: light-dark(var(--theme-color-900), var(--theme-color-300));
 	--theme-color-text-dimmed: hsl(
 		var(--theme-color-h),
@@ -31,9 +32,9 @@
 		50%
 	);
 	--theme-color-text-highlight: var(--theme-color-900);
-	--theme-color-back: var(--theme-color-400);
+	--theme-color-back: var(--theme-color-500);
 	--theme-color-hover: var(--theme-color-500);
-	--theme-color-icon: var(--theme-color-600);
+	--theme-color-icon: light-dark(var(--theme-color-700), var(--theme-color-600));
 }
 
 /* Color themes */
@@ -101,7 +102,7 @@
 
 [data-theme^="white"],
 [data-theme^="text"] {
-	--theme-color-back: light-dark(var(--color-white), var(--color-gray-950));
+	--theme-color-back: light-dark(var(--color-white), var(--color-gray-850));
 	--theme-color-icon: var(--color-gray-800);
 	--theme-color-text: var(--color-text);
 	--theme-color-text-highlight: var(--theme-color-text);