Merge branch 'v5/fix/dark-mode-tweaks' into v5/develop

panel/lab/basics/design/colors/index.php

@@ -14,14 +14,23 @@
 	],
 	'steps' => [
 		100,
+		150,
 		200,
+		250,
 		300,
+		350,
 		400,
+		450,
 		500,
+		550,
 		600,
+		650,
 		700,
+		750,
 		800,
-		900
+		850,
+		900,
+		950
 	],
 	'source' => 'panel/src/styles/config/colors.css'
 ];

panel/lab/basics/design/colors/index.vue

@@ -9,8 +9,9 @@
 			<k-grid
 				v-for="name in names"
 				:key="name"
-				style="--columns: 9; gap: var(--spacing-3)"
+				style="--columns: 20; gap: var(--spacing-3)"
 			>
+				<k-box style="--span: 2"> {{ name }}- </k-box>
 				<k-box
 					v-for="(step, index) in steps"
 					:key="step"
@@ -19,7 +20,7 @@
 						color: `var(--color-${name}-${colors[step]})`
 					}"
 				>
-					{{ name }}-{{ step }}
+					{{ step }}
 				</k-box>
 			</k-grid>
 		</k-lab-example>
@@ -36,14 +37,23 @@ export default {
 		colors() {
 			return {
 				100: 800,
+				150: 800,
 				200: 800,
+				250: 800,
 				300: 900,
+				350: 900,
 				400: 1000,
+				450: 1000,
 				500: 1000,
-				600: 1000,
+				550: 100,
+				600: 100,
+				650: 100,
 				700: 100,
+				750: 100,
 				800: 200,
-				900: 200
+				850: 200,
+				900: 200,
+				950: 200
 			};
 		}
 	}

panel/src/components/Collection/Item.vue

@@ -253,8 +253,8 @@ 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%);
+	color: light-dark(var(--color-black), var(--color-white));
+	background: hsla(0, 0%, light-dark(100%, 7%), 50%);
 	backdrop-filter: blur(5px);
 	box-shadow: 0 2px 5px hsla(0, 0%, 0%, 20%);
 	--button-width: 1.5rem;
@@ -266,7 +266,7 @@ export default {
 
 .k-item:is([data-layout="cardlets"], [data-layout="cards"])
 	.k-sort-button:hover {
-	background: hsla(0, 0%, var(--color-l-max), 95%);
+	background: hsla(0, 0%, light-dark(100%, 7%), 95%);
 }
 
 /** Cardlet */

panel/src/components/Forms/Toolbar/Toolbar.vue

@@ -83,10 +83,13 @@ export default {
 	--toolbar-size: var(--height);
 	--toolbar-text: light-dark(var(--color-black), var(--color-white));
 	--toolbar-back: light-dark(var(--color-white), var(--color-gray-850));
-	--toolbar-hover: hsla(0, 0%, var(--color-l-min), 0.4);
-	--toolbar-border: hsla(0, 100%, var(--color-l-min), 0.1);
+	--toolbar-hover: light-dark(var(--color-gray-200), var(--color-gray-750));
+	--toolbar-border: var(--panel-color-back);
 	--toolbar-current: var(--color-focus);
 }
+:where(.k-textarea-input, .k-writer-input):not(:focus-within) {
+	--toolbar-text: light-dark(var(--color-gray-300), var(--color-gray-700));
+}
 
 .k-toolbar {
 	display: flex;
@@ -100,13 +103,6 @@ export default {
 	border-radius: var(--rounded);
 }
 
-.k-toolbar[data-theme="dark"] {
-	--toolbar-text: var(--color-white);
-	--toolbar-back: var(--color-black);
-	--toolbar-hover: hsla(0, 0%, var(--color-l-max), 0.2);
-	--toolbar-border: var(--color-gray-800);
-}
-
 .k-toolbar > hr {
 	height: var(--toolbar-size);
 	width: 1px;
@@ -134,10 +130,6 @@ export default {
 	border-end-end-radius: var(--rounded);
 }
 
-:where(.k-textarea-input, .k-writer-input):not(:focus-within) {
-	--toolbar-text: var(--color-gray-400);
-	--toolbar-border: var(--panel-color-back);
-}
 /** TODO: .k-toolbar:not([data-inline="true"]):has(~ :focus-within) */
 :where(.k-textarea-input, .k-writer-input):focus-within
 	.k-toolbar:not([data-inline="true"]) {

panel/src/components/Navigation/Button.vue

@@ -240,7 +240,10 @@ export default {
 	--button-rounded: var(--spacing-1);
 	--button-text-display: block;
 	--button-icon-display: block;
-	--button-filled-color-back: light-dark(var(--color-gray-300), var(--color-gray-950));
+	--button-filled-color-back: light-dark(
+		var(--color-gray-300),
+		var(--color-gray-950)
+	);
 }
 
 .k-button {
@@ -294,7 +297,7 @@ export default {
 		[aria-current="true"]
 	)
 	.k-button-text {
-	filter: brightness(75%);
+	filter: light-dark(brightness(75%), brightness(125%));
 }
 .k-button:where([data-variant="dimmed"][data-theme]) {
 	--button-color-icon: var(--theme-color-icon);

panel/src/components/Views/Files/FilePreview.vue

@@ -36,8 +36,11 @@ export default {
 </script>
 <style>
 :root {
-	--file-preview-color-back: light-dark(var(--color-gray-900), var(--color-gray-950));
-	--file-preview-color-text: hsla(0, 100%, var(--color-l-max), 0.75);
+	--file-preview-color-back: light-dark(
+		var(--color-gray-900),
+		var(--color-gray-950)
+	);
+	--file-preview-color-text: var(--color-gray-200);
 }
 
 .k-file-preview {