Additional dark mode changes

getkirby · Nov 28, 2024 · c952d72 · c952d72
1 parent dcb4ee7
commit c952d72
Show file tree

Hide file tree

Showing 18 changed files with 33 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -314,13 +314,15 @@ 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(
 		var(--theme-color-hs),
 		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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);
+}
diff --git a/panel/src/styles/utilities/theme.css b/panel/src/styles/utilities/theme.css
@@ -24,16 +24,17 @@
 	--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),
 		calc(var(--theme-color-s) - 60%),
 		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);