Merge branch 'v5/darkmode-alternative' into v5/develop

getkirby · Dec 2, 2024 · 62f5cf6 · 62f5cf6
2 parents a84e5fb + c8232db
commit 62f5cf6
Show file tree

Hide file tree

Showing 81 changed files with 439 additions and 272 deletions.
diff --git a/panel/lab/basics/icons/1_iconset/index.vue b/panel/lab/basics/icons/1_iconset/index.vue
@@ -36,6 +36,7 @@ export default {
 	align-items: center;
 	gap: 0.75rem;
 	padding: var(--spacing-2);
+	color: var(--color-black);
 	background: var(--color-white);
 	border-radius: var(--rounded);
 	box-shadow: var(--shadow);

diff --git a/panel/lab/components/browsers/browser/index.vue b/panel/lab/components/browsers/browser/index.vue
@@ -32,10 +32,4 @@ export default {
 .k-lab-example .k-headline {
 	margin-bottom: 0.5rem;
 }
-.k-lab-example .k-browser {
-	border: 1px solid var(--color-border);
-	background: var(--color-white);
-	border-radius: var(--rounded);
-	padding: var(--spacing-2);
-}
 </style>
diff --git a/panel/lab/components/toolbar/3_writer/index.vue b/panel/lab/components/toolbar/3_writer/index.vue
@@ -26,7 +26,7 @@ export default {
 
 <style>
 .k-writer-input {
-	background-color: white;
+	background-color: var(--input-color-back);
 	border-radius: var(--rounded);
 }
 </style>
diff --git a/panel/package-lock.json b/panel/package-lock.json
diff --git a/panel/package.json b/panel/package.json
@@ -26,6 +26,7 @@
 		"vue": "^2.7.16"
 	},
 	"devDependencies": {
+		"@csstools/postcss-light-dark-function": "^2.0.7",
 		"@vitejs/plugin-vue2": "^2.3.1",
 		"eslint": "^9.15.0",
 		"eslint-config-prettier": "^9.1.0",

diff --git a/panel/src/components/Collection/Item.vue b/panel/src/components/Collection/Item.vue
@@ -140,13 +140,14 @@ 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-850));
 	--item-height: auto;
 	--item-height-cardlet: calc(var(--height-md) * 3);
 }
 
 .k-item {
 	position: relative;
-	background: var(--color-white);
+	background: var(--item-color-back);
 	box-shadow: var(--shadow);
 	border-radius: var(--rounded);
 	min-height: var(--item-height);
@@ -252,6 +253,7 @@ export default {
 .k-item:is([data-layout="cardlets"], [data-layout="cards"]) .k-sort-button {
 	top: var(--spacing-2);
 	inset-inline-start: var(--spacing-2);
+	color: var(--color-black);
 	background: hsla(0, 0%, var(--color-l-max), 50%);
 	backdrop-filter: blur(5px);
 	box-shadow: 0 2px 5px hsla(0, 0%, 0%, 20%);

diff --git a/panel/src/components/Dialogs/Dialog.vue b/panel/src/components/Dialogs/Dialog.vue
@@ -50,7 +50,7 @@ export default {
 
 <style>
 :root {
-	--dialog-color-back: var(--color-light);
+	--dialog-color-back: var(--panel-color-back);
 	--dialog-color-text: currentColor;
 	--dialog-margin: var(--spacing-6);
 	--dialog-padding: var(--spacing-6);

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/Drawer.vue b/panel/src/components/Drawers/Drawer.vue
@@ -61,7 +61,7 @@ export default {
 <style>
 :root {
 	--drawer-body-padding: 1.5rem;
-	--drawer-color-back: var(--color-light);
+	--drawer-color-back: var(--panel-color-back);
 	--drawer-header-height: 2.5rem;
 	--drawer-header-padding: 1rem;
 	--drawer-shadow: var(--shadow-xl);

diff --git a/panel/src/components/Drawers/Elements/Body.vue b/panel/src/components/Drawers/Elements/Body.vue
@@ -16,7 +16,7 @@ export default {};
 .k-drawer-body {
 	padding: var(--drawer-body-padding);
 	flex-grow: 1;
-	background: var(--color-light);
+	background: var(--drawer-color-back);
 }
 /* Sticky elements inside drawer */
 /** TODO: .k-drawer-body .k-toolbar:not([data-inline="true"]):has(~ :focus-within) */

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/Dropdowns/DropdownContent.vue b/panel/src/components/Dropdowns/DropdownContent.vue
@@ -343,19 +343,15 @@ export default {
 
 <style>
 :root {
-	--dropdown-color-bg: var(--color-black);
+	--dropdown-color-bg: var(--color-gray-950);
 	--dropdown-color-current: var(--color-blue-500);
-	--dropdown-color-hr: hsla(0, 0%, var(--color-l-max), 0.25);
+	--dropdown-color-hr: var(--color-gray-850);
 	--dropdown-color-text: var(--color-white);
 	--dropdown-padding: var(--spacing-2);
 	--dropdown-rounded: var(--rounded);
 	--dropdown-shadow: var(--shadow-xl);
 }
 
-.k-panel[data-theme="dark"] {
-	--dropdown-color-hr: hsla(0, 0%, var(--color-l-max), 0.1);
-}
-
 .k-dropdown-content {
 	--dropdown-x: 0;
 	--dropdown-y: 0;
@@ -395,7 +391,7 @@ export default {
 .k-dropdown-content[data-theme="light"] {
 	--dropdown-color-bg: var(--color-white);
 	--dropdown-color-current: var(--color-blue-800);
-	--dropdown-color-hr: var(--color-border-dimmed);
+	--dropdown-color-hr: var(--color-gray-250);
 	--dropdown-color-text: var(--color-black);
 }
 </style>
diff --git a/panel/src/components/Forms/Blocks/Block.vue b/panel/src/components/Forms/Blocks/Block.vue
@@ -362,11 +362,11 @@ export default {
 .k-block-container {
 	position: relative;
 	padding: var(--spacing-3);
-	background: var(--color-white);
+	background: var(--block-color-back);
 	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;
@@ -403,7 +403,7 @@ export default {
 	display: inline-grid;
 }
 .k-block-container[data-disabled="true"] {
-	background: var(--color-light);
+	background: var(--panel-color-back);
 }
 
 /* Collapse long blocks while dragging */
@@ -418,6 +418,6 @@ export default {
 	content: "";
 	height: 2rem;
 	width: 100%;
-	background: linear-gradient(to top, var(--color-white), transparent);
+	background: linear-gradient(to top, var(--block-color-back), transparent);
 }
 </style>
diff --git a/panel/src/components/Forms/Blocks/BlockOptions.vue b/panel/src/components/Forms/Blocks/BlockOptions.vue
@@ -203,11 +203,11 @@ export default {
 <style>
 .k-block-options {
 	--toolbar-size: 30px;
-
-	box-shadow: var(--shadow-toolbar);
+	border: 1px solid light-dark(var(--color-border), var(--color-gray-900));
+	box-shadow: var(--shadow-xl);
 }
 .k-block-options > .k-button:not(:last-of-type) {
-	border-inline-end: 1px solid var(--color-light);
+	border-inline-end: 1px solid var(--toolbar-border);
 }
 .k-block-options .k-dropdown-content {
 	margin-top: 0.5rem;

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/Blocks.vue b/panel/src/components/Forms/Blocks/Blocks.vue
@@ -721,11 +721,15 @@ export default {
 </script>
 
 <style>
+:root {
+	--block-color-back: var(--item-color-back);
+}
+
 .k-blocks {
 	border-radius: var(--rounded);
 }
 .k-blocks:not([data-empty="true"], [data-disabled="true"]) {
-	background: var(--color-white);
+	background: var(--block-color-back);
 	box-shadow: var(--shadow);
 }
 .k-blocks[data-disabled="true"]:not([data-empty="true"]) {

diff --git a/panel/src/components/Forms/Blocks/Elements/BlockBackgroundDropdown.vue b/panel/src/components/Forms/Blocks/Elements/BlockBackgroundDropdown.vue
@@ -14,7 +14,7 @@
 			:options="[
 				{
 					text: $t('field.blocks.figure.back.plain'),
-					click: 'var(--color-white)'
+					click: 'transparent'
 				},
 				{
 					text: $t('field.blocks.figure.back.pattern.light'),

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"]) {
@@ -73,7 +73,7 @@ export default {
 	--button-width: 100%;
 	--button-height: 6rem;
 	--button-color-text: var(--color-text-dimmed);
-	--button-color-back: var(--color-light);
+	--button-color-back: var(--panel-color-back);
 }
 
 .k-block-figure-empty,

diff --git a/panel/src/components/Forms/Blocks/Types/Code.vue b/panel/src/components/Forms/Blocks/Types/Code.vue
@@ -63,10 +63,6 @@ export default {
 	--input-padding: var(--spacing-3);
 	--input-padding-multiline: var(--input-padding);
 }
-.k-panel[data-theme="dark"] .k-block-type-code-editor .k-input {
-	--input-color-back: var(--color-light);
-	--input-color-text: var(--color-text);
-}
 
 .k-block-type-code-editor .k-input[data-type="textarea"] {
 	white-space: pre-wrap;