From 281dd6ee9ec345914b662c1052715195d542063c Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Tue, 10 Dec 2024 17:02:53 +0100
Subject: [PATCH 1/5] Increase contrast of button icon

---
 panel/src/styles/config/colors.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/panel/src/styles/config/colors.css b/panel/src/styles/config/colors.css
index 9776e04fde..9bb819817b 100644
--- a/panel/src/styles/config/colors.css
+++ b/panel/src/styles/config/colors.css
@@ -301,9 +301,9 @@
 	--color-l-250: 79%;
 	--color-l-300: 74%;
 	--color-l-400: 68%;
-	--color-l-500: 63%;
+	--color-l-500: 64%;
 	--color-l-600: 54%;
-	--color-l-700: 40%;
+	--color-l-700: 38%;
 	--color-l-750: 33%;
 	--color-l-800: 25%;
 	--color-l-850: 19%;

From 003c33a60cf0ea6e9a7843ef20223878b725db75 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Tue, 10 Dec 2024 17:05:21 +0100
Subject: [PATCH 2/5] Dark mode: dimmed buttons bright on hover/current

---
 panel/src/components/Navigation/Button.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/panel/src/components/Navigation/Button.vue b/panel/src/components/Navigation/Button.vue
index 92a1eeca51..b152362f9a 100644
--- a/panel/src/components/Navigation/Button.vue
+++ b/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);

From 6ab915169991a938cdb8c0b23df7f298915f1365 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Wed, 18 Dec 2024 17:03:47 +0100
Subject: [PATCH 3/5] Colors: add substeps

---
 panel/lab/basics/design/colors/index.php |  11 +-
 panel/lab/basics/design/colors/index.vue |  18 ++-
 panel/src/styles/config/colors.css       | 168 ++++++++++++++++++++++-
 panel/src/styles/utilities/theme.css     |  18 +++
 4 files changed, 206 insertions(+), 9 deletions(-)

diff --git a/panel/lab/basics/design/colors/index.php b/panel/lab/basics/design/colors/index.php
index 1c9c7d1a0e..706a6ebe63 100644
--- a/panel/lab/basics/design/colors/index.php
+++ b/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'
 ];
diff --git a/panel/lab/basics/design/colors/index.vue b/panel/lab/basics/design/colors/index.vue
index a74296b37e..41cb8582c9 100644
--- a/panel/lab/basics/design/colors/index.vue
+++ b/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
 			};
 		}
 	}
diff --git a/panel/src/styles/config/colors.css b/panel/src/styles/config/colors.css
index 9bb819817b..3a3f88840b 100644
--- a/panel/src/styles/config/colors.css
+++ b/panel/src/styles/config/colors.css
@@ -2,19 +2,23 @@
 	/* Lightness */
 	--color-l-max: 100%;
 	--color-l-100: 98%;
+	--color-l-150: 96%;
 	--color-l-200: 94%;
 	--color-l-250: 91%;
 	--color-l-300: 88%;
+	--color-l-350: 84%;
 	--color-l-400: 80%;
+	--color-l-450: 75%;
 	--color-l-500: 70%;
+	--color-l-550: 65%;
 	--color-l-600: 60%;
+	--color-l-650: 52%;
 	--color-l-700: 45%;
 	--color-l-750: 40%;
 	--color-l-800: 30%;
 	--color-l-850: 21%;
 	--color-l-900: 15%;
 	--color-l-950: 11%;
-	--color-l-1000: 9%;
 	--color-l-min: 0%;
 
 	/* Colors */
@@ -24,24 +28,42 @@
 	--color-red-boost: 3%;
 
 	--color-red-l-100: calc(var(--color-l-100) + var(--color-red-boost));
+	--color-red-l-150: calc(var(--color-l-150) + var(--color-red-boost));
 	--color-red-l-200: calc(var(--color-l-200) + var(--color-red-boost));
+	--color-red-l-250: calc(var(--color-l-250) + var(--color-red-boost));
 	--color-red-l-300: calc(var(--color-l-300) + var(--color-red-boost));
+	--color-red-l-350: calc(var(--color-l-350) + var(--color-red-boost));
 	--color-red-l-400: calc(var(--color-l-400) + var(--color-red-boost));
+	--color-red-l-450: calc(var(--color-l-450) + var(--color-red-boost));
 	--color-red-l-500: calc(var(--color-l-500) + var(--color-red-boost));
+	--color-red-l-550: calc(var(--color-l-550) + var(--color-red-boost));
 	--color-red-l-600: calc(var(--color-l-600) + var(--color-red-boost));
+	--color-red-l-650: calc(var(--color-l-650) + var(--color-red-boost));
 	--color-red-l-700: calc(var(--color-l-700) + var(--color-red-boost));
+	--color-red-l-750: calc(var(--color-l-750) + var(--color-red-boost));
 	--color-red-l-800: calc(var(--color-l-800) + var(--color-red-boost));
+	--color-red-l-850: calc(var(--color-l-850) + var(--color-red-boost));
 	--color-red-l-900: calc(var(--color-l-900) + var(--color-red-boost));
+	--color-red-l-950: calc(var(--color-l-950) + var(--color-red-boost));
 
 	--color-red-100: hsl(var(--color-red-hs), var(--color-red-l-100));
+	--color-red-150: hsl(var(--color-red-hs), var(--color-red-l-150));
 	--color-red-200: hsl(var(--color-red-hs), var(--color-red-l-200));
+	--color-red-250: hsl(var(--color-red-hs), var(--color-red-l-250));
 	--color-red-300: hsl(var(--color-red-hs), var(--color-red-l-300));
+	--color-red-350: hsl(var(--color-red-hs), var(--color-red-l-350));
 	--color-red-400: hsl(var(--color-red-hs), var(--color-red-l-400));
+	--color-red-450: hsl(var(--color-red-hs), var(--color-red-l-450));
 	--color-red-500: hsl(var(--color-red-hs), var(--color-red-l-500));
+	--color-red-550: hsl(var(--color-red-hs), var(--color-red-l-550));
 	--color-red-600: hsl(var(--color-red-hs), var(--color-red-l-600));
+	--color-red-650: hsl(var(--color-red-hs), var(--color-red-l-650));
 	--color-red-700: hsl(var(--color-red-hs), var(--color-red-l-700));
+	--color-red-750: hsl(var(--color-red-hs), var(--color-red-l-750));
 	--color-red-800: hsl(var(--color-red-hs), var(--color-red-l-800));
+	--color-red-850: hsl(var(--color-red-hs), var(--color-red-l-850));
 	--color-red-900: hsl(var(--color-red-hs), var(--color-red-l-900));
+	--color-red-950: hsl(var(--color-red-hs), var(--color-red-l-950));
 
 	--color-orange-h: 28;
 	--color-orange-s: 80%;
@@ -49,24 +71,42 @@
 	--color-orange-boost: 2%;
 
 	--color-orange-l-100: calc(var(--color-l-100) + var(--color-orange-boost));
+	--color-orange-l-150: calc(var(--color-l-150) + var(--color-orange-boost));
 	--color-orange-l-200: calc(var(--color-l-200) + var(--color-orange-boost));
+	--color-orange-l-250: calc(var(--color-l-250) + var(--color-orange-boost));
 	--color-orange-l-300: calc(var(--color-l-300) + var(--color-orange-boost));
+	--color-orange-l-350: calc(var(--color-l-350) + var(--color-orange-boost));
 	--color-orange-l-400: calc(var(--color-l-400) + var(--color-orange-boost));
+	--color-orange-l-450: calc(var(--color-l-450) + var(--color-orange-boost));
 	--color-orange-l-500: calc(var(--color-l-500) + var(--color-orange-boost));
+	--color-orange-l-550: calc(var(--color-l-550) + var(--color-orange-boost));
 	--color-orange-l-600: calc(var(--color-l-600) + var(--color-orange-boost));
+	--color-orange-l-650: calc(var(--color-l-650) + var(--color-orange-boost));
 	--color-orange-l-700: calc(var(--color-l-700) + var(--color-orange-boost));
+	--color-orange-l-750: calc(var(--color-l-750) + var(--color-orange-boost));
 	--color-orange-l-800: calc(var(--color-l-800) + var(--color-orange-boost));
+	--color-orange-l-850: calc(var(--color-l-850) + var(--color-orange-boost));
 	--color-orange-l-900: calc(var(--color-l-900) + var(--color-orange-boost));
+	--color-orange-l-950: calc(var(--color-l-950) + var(--color-orange-boost));
 
 	--color-orange-100: hsl(var(--color-orange-hs), var(--color-orange-l-100));
+	--color-orange-150: hsl(var(--color-orange-hs), var(--color-orange-l-150));
 	--color-orange-200: hsl(var(--color-orange-hs), var(--color-orange-l-200));
+	--color-orange-250: hsl(var(--color-orange-hs), var(--color-orange-l-250));
 	--color-orange-300: hsl(var(--color-orange-hs), var(--color-orange-l-300));
+	--color-orange-350: hsl(var(--color-orange-hs), var(--color-orange-l-350));
 	--color-orange-400: hsl(var(--color-orange-hs), var(--color-orange-l-400));
+	--color-orange-450: hsl(var(--color-orange-hs), var(--color-orange-l-450));
 	--color-orange-500: hsl(var(--color-orange-hs), var(--color-orange-l-500));
+	--color-orange-550: hsl(var(--color-orange-hs), var(--color-orange-l-550));
 	--color-orange-600: hsl(var(--color-orange-hs), var(--color-orange-l-600));
+	--color-orange-650: hsl(var(--color-orange-hs), var(--color-orange-l-650));
 	--color-orange-700: hsl(var(--color-orange-hs), var(--color-orange-l-700));
+	--color-orange-750: hsl(var(--color-orange-hs), var(--color-orange-l-750));
 	--color-orange-800: hsl(var(--color-orange-hs), var(--color-orange-l-800));
+	--color-orange-850: hsl(var(--color-orange-hs), var(--color-orange-l-850));
 	--color-orange-900: hsl(var(--color-orange-hs), var(--color-orange-l-900));
+	--color-orange-950: hsl(var(--color-orange-hs), var(--color-orange-l-950));
 
 	--color-yellow-h: 47;
 	--color-yellow-s: 80%;
@@ -74,24 +114,42 @@
 	--color-yellow-boost: -4%;
 
 	--color-yellow-l-100: calc(var(--color-l-100) + var(--color-yellow-boost));
+	--color-yellow-l-150: calc(var(--color-l-150) + var(--color-yellow-boost));
 	--color-yellow-l-200: calc(var(--color-l-200) + var(--color-yellow-boost));
+	--color-yellow-l-250: calc(var(--color-l-250) + var(--color-yellow-boost));
 	--color-yellow-l-300: calc(var(--color-l-300) + var(--color-yellow-boost));
+	--color-yellow-l-350: calc(var(--color-l-350) + var(--color-yellow-boost));
 	--color-yellow-l-400: calc(var(--color-l-400) + var(--color-yellow-boost));
+	--color-yellow-l-450: calc(var(--color-l-450) + var(--color-yellow-boost));
 	--color-yellow-l-500: calc(var(--color-l-500) + var(--color-yellow-boost));
+	--color-yellow-l-550: calc(var(--color-l-550) + var(--color-yellow-boost));
 	--color-yellow-l-600: calc(var(--color-l-600) + var(--color-yellow-boost));
+	--color-yellow-l-650: calc(var(--color-l-650) + var(--color-yellow-boost));
 	--color-yellow-l-700: calc(var(--color-l-700) + var(--color-yellow-boost));
+	--color-yellow-l-750: calc(var(--color-l-750) + var(--color-yellow-boost));
 	--color-yellow-l-800: calc(var(--color-l-800) + var(--color-yellow-boost));
+	--color-yellow-l-850: calc(var(--color-l-850) + var(--color-yellow-boost));
 	--color-yellow-l-900: calc(var(--color-l-900) + var(--color-yellow-boost));
+	--color-yellow-l-950: calc(var(--color-l-950) + var(--color-yellow-boost));
 
 	--color-yellow-100: hsl(var(--color-yellow-hs), var(--color-yellow-l-100));
+	--color-yellow-150: hsl(var(--color-yellow-hs), var(--color-yellow-l-150));
 	--color-yellow-200: hsl(var(--color-yellow-hs), var(--color-yellow-l-200));
+	--color-yellow-250: hsl(var(--color-yellow-hs), var(--color-yellow-l-250));
 	--color-yellow-300: hsl(var(--color-yellow-hs), var(--color-yellow-l-300));
+	--color-yellow-350: hsl(var(--color-yellow-hs), var(--color-yellow-l-350));
 	--color-yellow-400: hsl(var(--color-yellow-hs), var(--color-yellow-l-400));
+	--color-yellow-450: hsl(var(--color-yellow-hs), var(--color-yellow-l-450));
 	--color-yellow-500: hsl(var(--color-yellow-hs), var(--color-yellow-l-500));
+	--color-yellow-550: hsl(var(--color-yellow-hs), var(--color-yellow-l-550));
 	--color-yellow-600: hsl(var(--color-yellow-hs), var(--color-yellow-l-600));
+	--color-yellow-650: hsl(var(--color-yellow-hs), var(--color-yellow-l-650));
 	--color-yellow-700: hsl(var(--color-yellow-hs), var(--color-yellow-l-700));
+	--color-yellow-750: hsl(var(--color-yellow-hs), var(--color-yellow-l-750));
 	--color-yellow-800: hsl(var(--color-yellow-hs), var(--color-yellow-l-800));
+	--color-yellow-850: hsl(var(--color-yellow-hs), var(--color-yellow-l-850));
 	--color-yellow-900: hsl(var(--color-yellow-hs), var(--color-yellow-l-900));
+	--color-yellow-950: hsl(var(--color-yellow-hs), var(--color-yellow-l-950));
 
 	--color-green-h: 80;
 	--color-green-s: 60%;
@@ -99,24 +157,42 @@
 	--color-green-boost: -8%;
 
 	--color-green-l-100: calc(var(--color-l-100) + var(--color-green-boost));
+	--color-green-l-150: calc(var(--color-l-150) + var(--color-green-boost));
 	--color-green-l-200: calc(var(--color-l-200) + var(--color-green-boost));
+	--color-green-l-250: calc(var(--color-l-250) + var(--color-green-boost));
 	--color-green-l-300: calc(var(--color-l-300) + var(--color-green-boost));
+	--color-green-l-350: calc(var(--color-l-350) + var(--color-green-boost));
 	--color-green-l-400: calc(var(--color-l-400) + var(--color-green-boost));
+	--color-green-l-450: calc(var(--color-l-450) + var(--color-green-boost));
 	--color-green-l-500: calc(var(--color-l-500) + var(--color-green-boost));
+	--color-green-l-550: calc(var(--color-l-550) + var(--color-green-boost));
 	--color-green-l-600: calc(var(--color-l-600) + var(--color-green-boost));
+	--color-green-l-650: calc(var(--color-l-650) + var(--color-green-boost));
 	--color-green-l-700: calc(var(--color-l-700) + var(--color-green-boost));
+	--color-green-l-750: calc(var(--color-l-750) + var(--color-green-boost));
 	--color-green-l-800: calc(var(--color-l-800) + var(--color-green-boost));
+	--color-green-l-850: calc(var(--color-l-850) + var(--color-green-boost));
 	--color-green-l-900: calc(var(--color-l-900) + var(--color-green-boost));
+	--color-green-l-950: calc(var(--color-l-950) + var(--color-green-boost));
 
 	--color-green-100: hsl(var(--color-green-hs), var(--color-green-l-100));
+	--color-green-150: hsl(var(--color-green-hs), var(--color-green-l-150));
 	--color-green-200: hsl(var(--color-green-hs), var(--color-green-l-200));
+	--color-green-250: hsl(var(--color-green-hs), var(--color-green-l-250));
 	--color-green-300: hsl(var(--color-green-hs), var(--color-green-l-300));
+	--color-green-350: hsl(var(--color-green-hs), var(--color-green-l-350));
 	--color-green-400: hsl(var(--color-green-hs), var(--color-green-l-400));
+	--color-green-450: hsl(var(--color-green-hs), var(--color-green-l-450));
 	--color-green-500: hsl(var(--color-green-hs), var(--color-green-l-500));
+	--color-green-550: hsl(var(--color-green-hs), var(--color-green-l-550));
 	--color-green-600: hsl(var(--color-green-hs), var(--color-green-l-600));
+	--color-green-650: hsl(var(--color-green-hs), var(--color-green-l-650));
 	--color-green-700: hsl(var(--color-green-hs), var(--color-green-l-700));
+	--color-green-750: hsl(var(--color-green-hs), var(--color-green-l-750));
 	--color-green-800: hsl(var(--color-green-hs), var(--color-green-l-800));
+	--color-green-850: hsl(var(--color-green-hs), var(--color-green-l-850));
 	--color-green-900: hsl(var(--color-green-hs), var(--color-green-l-900));
+	--color-green-950: hsl(var(--color-green-hs), var(--color-green-l-950));
 
 	--color-aqua-h: 180;
 	--color-aqua-s: 50%;
@@ -124,24 +200,42 @@
 	--color-aqua-boost: -4%;
 
 	--color-aqua-l-100: calc(var(--color-l-100) + var(--color-aqua-boost));
+	--color-aqua-l-150: calc(var(--color-l-150) + var(--color-aqua-boost));
 	--color-aqua-l-200: calc(var(--color-l-200) + var(--color-aqua-boost));
+	--color-aqua-l-250: calc(var(--color-l-250) + var(--color-aqua-boost));
 	--color-aqua-l-300: calc(var(--color-l-300) + var(--color-aqua-boost));
+	--color-aqua-l-350: calc(var(--color-l-350) + var(--color-aqua-boost));
 	--color-aqua-l-400: calc(var(--color-l-400) + var(--color-aqua-boost));
+	--color-aqua-l-450: calc(var(--color-l-450) + var(--color-aqua-boost));
 	--color-aqua-l-500: calc(var(--color-l-500) + var(--color-aqua-boost));
+	--color-aqua-l-550: calc(var(--color-l-550) + var(--color-aqua-boost));
 	--color-aqua-l-600: calc(var(--color-l-600) + var(--color-aqua-boost));
+	--color-aqua-l-650: calc(var(--color-l-650) + var(--color-aqua-boost));
 	--color-aqua-l-700: calc(var(--color-l-700) + var(--color-aqua-boost));
+	--color-aqua-l-750: calc(var(--color-l-750) + var(--color-aqua-boost));
 	--color-aqua-l-800: calc(var(--color-l-800) + var(--color-aqua-boost));
+	--color-aqua-l-850: calc(var(--color-l-850) + var(--color-aqua-boost));
 	--color-aqua-l-900: calc(var(--color-l-900) + var(--color-aqua-boost));
+	--color-aqua-l-950: calc(var(--color-l-950) + var(--color-aqua-boost));
 
 	--color-aqua-100: hsl(var(--color-aqua-hs), var(--color-aqua-l-100));
+	--color-aqua-150: hsl(var(--color-aqua-hs), var(--color-aqua-l-150));
 	--color-aqua-200: hsl(var(--color-aqua-hs), var(--color-aqua-l-200));
+	--color-aqua-250: hsl(var(--color-aqua-hs), var(--color-aqua-l-250));
 	--color-aqua-300: hsl(var(--color-aqua-hs), var(--color-aqua-l-300));
+	--color-aqua-350: hsl(var(--color-aqua-hs), var(--color-aqua-l-350));
 	--color-aqua-400: hsl(var(--color-aqua-hs), var(--color-aqua-l-400));
+	--color-aqua-450: hsl(var(--color-aqua-hs), var(--color-aqua-l-450));
 	--color-aqua-500: hsl(var(--color-aqua-hs), var(--color-aqua-l-500));
+	--color-aqua-550: hsl(var(--color-aqua-hs), var(--color-aqua-l-550));
 	--color-aqua-600: hsl(var(--color-aqua-hs), var(--color-aqua-l-600));
+	--color-aqua-650: hsl(var(--color-aqua-hs), var(--color-aqua-l-650));
 	--color-aqua-700: hsl(var(--color-aqua-hs), var(--color-aqua-l-700));
+	--color-aqua-750: hsl(var(--color-aqua-hs), var(--color-aqua-l-750));
 	--color-aqua-800: hsl(var(--color-aqua-hs), var(--color-aqua-l-800));
+	--color-aqua-850: hsl(var(--color-aqua-hs), var(--color-aqua-l-850));
 	--color-aqua-900: hsl(var(--color-aqua-hs), var(--color-aqua-l-900));
+	--color-aqua-950: hsl(var(--color-aqua-hs), var(--color-aqua-l-950));
 
 	--color-blue-h: 210;
 	--color-blue-s: 65%;
@@ -149,24 +243,42 @@
 	--color-blue-boost: 3%;
 
 	--color-blue-l-100: calc(var(--color-l-100) + var(--color-blue-boost));
+	--color-blue-l-150: calc(var(--color-l-150) + var(--color-blue-boost));
 	--color-blue-l-200: calc(var(--color-l-200) + var(--color-blue-boost));
+	--color-blue-l-250: calc(var(--color-l-250) + var(--color-blue-boost));
 	--color-blue-l-300: calc(var(--color-l-300) + var(--color-blue-boost));
+	--color-blue-l-350: calc(var(--color-l-350) + var(--color-blue-boost));
 	--color-blue-l-400: calc(var(--color-l-400) + var(--color-blue-boost));
+	--color-blue-l-450: calc(var(--color-l-450) + var(--color-blue-boost));
 	--color-blue-l-500: calc(var(--color-l-500) + var(--color-blue-boost));
+	--color-blue-l-550: calc(var(--color-l-550) + var(--color-blue-boost));
 	--color-blue-l-600: calc(var(--color-l-600) + var(--color-blue-boost));
+	--color-blue-l-650: calc(var(--color-l-650) + var(--color-blue-boost));
 	--color-blue-l-700: calc(var(--color-l-700) + var(--color-blue-boost));
+	--color-blue-l-750: calc(var(--color-l-750) + var(--color-blue-boost));
 	--color-blue-l-800: calc(var(--color-l-800) + var(--color-blue-boost));
+	--color-blue-l-850: calc(var(--color-l-850) + var(--color-blue-boost));
 	--color-blue-l-900: calc(var(--color-l-900) + var(--color-blue-boost));
+	--color-blue-l-950: calc(var(--color-l-950) + var(--color-blue-boost));
 
 	--color-blue-100: hsl(var(--color-blue-hs), var(--color-blue-l-100));
+	--color-blue-150: hsl(var(--color-blue-hs), var(--color-blue-l-150));
 	--color-blue-200: hsl(var(--color-blue-hs), var(--color-blue-l-200));
+	--color-blue-250: hsl(var(--color-blue-hs), var(--color-blue-l-250));
 	--color-blue-300: hsl(var(--color-blue-hs), var(--color-blue-l-300));
+	--color-blue-350: hsl(var(--color-blue-hs), var(--color-blue-l-350));
 	--color-blue-400: hsl(var(--color-blue-hs), var(--color-blue-l-400));
+	--color-blue-450: hsl(var(--color-blue-hs), var(--color-blue-l-450));
 	--color-blue-500: hsl(var(--color-blue-hs), var(--color-blue-l-500));
+	--color-blue-550: hsl(var(--color-blue-hs), var(--color-blue-l-550));
 	--color-blue-600: hsl(var(--color-blue-hs), var(--color-blue-l-600));
+	--color-blue-650: hsl(var(--color-blue-hs), var(--color-blue-l-650));
 	--color-blue-700: hsl(var(--color-blue-hs), var(--color-blue-l-700));
+	--color-blue-750: hsl(var(--color-blue-hs), var(--color-blue-l-750));
 	--color-blue-800: hsl(var(--color-blue-hs), var(--color-blue-l-800));
+	--color-blue-850: hsl(var(--color-blue-hs), var(--color-blue-l-850));
 	--color-blue-900: hsl(var(--color-blue-hs), var(--color-blue-l-900));
+	--color-blue-950: hsl(var(--color-blue-hs), var(--color-blue-l-950));
 
 	--color-purple-h: 275;
 	--color-purple-s: 60%;
@@ -174,24 +286,42 @@
 	--color-purple-boost: 0%;
 
 	--color-purple-l-100: calc(var(--color-l-100) + var(--color-purple-boost));
+	--color-purple-l-150: calc(var(--color-l-150) + var(--color-purple-boost));
 	--color-purple-l-200: calc(var(--color-l-200) + var(--color-purple-boost));
+	--color-purple-l-250: calc(var(--color-l-250) + var(--color-purple-boost));
 	--color-purple-l-300: calc(var(--color-l-300) + var(--color-purple-boost));
+	--color-purple-l-350: calc(var(--color-l-350) + var(--color-purple-boost));
 	--color-purple-l-400: calc(var(--color-l-400) + var(--color-purple-boost));
+	--color-purple-l-450: calc(var(--color-l-450) + var(--color-purple-boost));
 	--color-purple-l-500: calc(var(--color-l-500) + var(--color-purple-boost));
+	--color-purple-l-550: calc(var(--color-l-550) + var(--color-purple-boost));
 	--color-purple-l-600: calc(var(--color-l-600) + var(--color-purple-boost));
+	--color-purple-l-650: calc(var(--color-l-650) + var(--color-purple-boost));
 	--color-purple-l-700: calc(var(--color-l-700) + var(--color-purple-boost));
+	--color-purple-l-750: calc(var(--color-l-750) + var(--color-purple-boost));
 	--color-purple-l-800: calc(var(--color-l-800) + var(--color-purple-boost));
+	--color-purple-l-850: calc(var(--color-l-850) + var(--color-purple-boost));
 	--color-purple-l-900: calc(var(--color-l-900) + var(--color-purple-boost));
+	--color-purple-l-950: calc(var(--color-l-950) + var(--color-purple-boost));
 
 	--color-purple-100: hsl(var(--color-purple-hs), var(--color-purple-l-100));
+	--color-purple-150: hsl(var(--color-purple-hs), var(--color-purple-l-150));
 	--color-purple-200: hsl(var(--color-purple-hs), var(--color-purple-l-200));
+	--color-purple-250: hsl(var(--color-purple-hs), var(--color-purple-l-250));
 	--color-purple-300: hsl(var(--color-purple-hs), var(--color-purple-l-300));
+	--color-purple-350: hsl(var(--color-purple-hs), var(--color-purple-l-350));
 	--color-purple-400: hsl(var(--color-purple-hs), var(--color-purple-l-400));
+	--color-purple-450: hsl(var(--color-purple-hs), var(--color-purple-l-450));
 	--color-purple-500: hsl(var(--color-purple-hs), var(--color-purple-l-500));
+	--color-purple-550: hsl(var(--color-purple-hs), var(--color-purple-l-550));
 	--color-purple-600: hsl(var(--color-purple-hs), var(--color-purple-l-600));
+	--color-purple-650: hsl(var(--color-purple-hs), var(--color-purple-l-650));
 	--color-purple-700: hsl(var(--color-purple-hs), var(--color-purple-l-700));
+	--color-purple-750: hsl(var(--color-purple-hs), var(--color-purple-l-750));
 	--color-purple-800: hsl(var(--color-purple-hs), var(--color-purple-l-800));
+	--color-purple-850: hsl(var(--color-purple-hs), var(--color-purple-l-850));
 	--color-purple-900: hsl(var(--color-purple-hs), var(--color-purple-l-900));
+	--color-purple-950: hsl(var(--color-purple-hs), var(--color-purple-l-950));
 
 	--color-pink-h: 320;
 	--color-pink-s: 70%;
@@ -199,24 +329,42 @@
 	--color-pink-boost: 0%;
 
 	--color-pink-l-100: calc(var(--color-l-100) + var(--color-pink-boost));
+	--color-pink-l-150: calc(var(--color-l-150) + var(--color-pink-boost));
 	--color-pink-l-200: calc(var(--color-l-200) + var(--color-pink-boost));
+	--color-pink-l-250: calc(var(--color-l-250) + var(--color-pink-boost));
 	--color-pink-l-300: calc(var(--color-l-300) + var(--color-pink-boost));
+	--color-pink-l-350: calc(var(--color-l-350) + var(--color-pink-boost));
 	--color-pink-l-400: calc(var(--color-l-400) + var(--color-pink-boost));
+	--color-pink-l-450: calc(var(--color-l-450) + var(--color-pink-boost));
 	--color-pink-l-500: calc(var(--color-l-500) + var(--color-pink-boost));
+	--color-pink-l-550: calc(var(--color-l-550) + var(--color-pink-boost));
 	--color-pink-l-600: calc(var(--color-l-600) + var(--color-pink-boost));
+	--color-pink-l-650: calc(var(--color-l-650) + var(--color-pink-boost));
 	--color-pink-l-700: calc(var(--color-l-700) + var(--color-pink-boost));
+	--color-pink-l-750: calc(var(--color-l-750) + var(--color-pink-boost));
 	--color-pink-l-800: calc(var(--color-l-800) + var(--color-pink-boost));
+	--color-pink-l-850: calc(var(--color-l-850) + var(--color-pink-boost));
 	--color-pink-l-900: calc(var(--color-l-900) + var(--color-pink-boost));
+	--color-pink-l-950: calc(var(--color-l-950) + var(--color-pink-boost));
 
 	--color-pink-100: hsl(var(--color-pink-hs), var(--color-pink-l-100));
+	--color-pink-150: hsl(var(--color-pink-hs), var(--color-pink-l-150));
 	--color-pink-200: hsl(var(--color-pink-hs), var(--color-pink-l-200));
+	--color-pink-250: hsl(var(--color-pink-hs), var(--color-pink-l-250));
 	--color-pink-300: hsl(var(--color-pink-hs), var(--color-pink-l-300));
+	--color-pink-350: hsl(var(--color-pink-hs), var(--color-pink-l-350));
 	--color-pink-400: hsl(var(--color-pink-hs), var(--color-pink-l-400));
+	--color-pink-450: hsl(var(--color-pink-hs), var(--color-pink-l-450));
 	--color-pink-500: hsl(var(--color-pink-hs), var(--color-pink-l-500));
+	--color-pink-550: hsl(var(--color-pink-hs), var(--color-pink-l-550));
 	--color-pink-600: hsl(var(--color-pink-hs), var(--color-pink-l-600));
+	--color-pink-650: hsl(var(--color-pink-hs), var(--color-pink-l-650));
 	--color-pink-700: hsl(var(--color-pink-hs), var(--color-pink-l-700));
+	--color-pink-750: hsl(var(--color-pink-hs), var(--color-pink-l-750));
 	--color-pink-800: hsl(var(--color-pink-hs), var(--color-pink-l-800));
+	--color-pink-850: hsl(var(--color-pink-hs), var(--color-pink-l-850));
 	--color-pink-900: hsl(var(--color-pink-hs), var(--color-pink-l-900));
+	--color-pink-950: hsl(var(--color-pink-hs), var(--color-pink-l-950));
 
 	/**	Grays **/
 	--color-gray-h: 0;
@@ -225,34 +373,42 @@
 	--color-gray-boost: 0%;
 
 	--color-gray-l-100: calc(var(--color-l-100) + var(--color-gray-boost));
+	--color-gray-l-150: calc(var(--color-l-150) + var(--color-gray-boost));
 	--color-gray-l-200: calc(var(--color-l-200) + var(--color-gray-boost));
 	--color-gray-l-250: calc(var(--color-l-250) + var(--color-gray-boost));
 	--color-gray-l-300: calc(var(--color-l-300) + var(--color-gray-boost));
+	--color-gray-l-350: calc(var(--color-l-350) + var(--color-gray-boost));
 	--color-gray-l-400: calc(var(--color-l-400) + var(--color-gray-boost));
+	--color-gray-l-450: calc(var(--color-l-450) + var(--color-gray-boost));
 	--color-gray-l-500: calc(var(--color-l-500) + var(--color-gray-boost));
+	--color-gray-l-550: calc(var(--color-l-550) + var(--color-gray-boost));
 	--color-gray-l-600: calc(var(--color-l-600) + var(--color-gray-boost));
+	--color-gray-l-650: calc(var(--color-l-650) + var(--color-gray-boost));
 	--color-gray-l-700: calc(var(--color-l-700) + var(--color-gray-boost));
 	--color-gray-l-750: calc(var(--color-l-750) + var(--color-gray-boost));
 	--color-gray-l-800: calc(var(--color-l-800) + var(--color-gray-boost));
 	--color-gray-l-850: calc(var(--color-l-850) + var(--color-gray-boost));
 	--color-gray-l-900: calc(var(--color-l-900) + var(--color-gray-boost));
 	--color-gray-l-950: calc(var(--color-l-950) + var(--color-gray-boost));
-	--color-gray-l-1000: calc(var(--color-l-1000) + var(--color-gray-boost));
 
 	--color-gray-100: hsl(var(--color-gray-hs), var(--color-gray-l-100));
+	--color-gray-150: hsl(var(--color-gray-hs), var(--color-gray-l-150));
 	--color-gray-200: hsl(var(--color-gray-hs), var(--color-gray-l-200));
 	--color-gray-250: hsl(var(--color-gray-hs), var(--color-gray-l-250));
 	--color-gray-300: hsl(var(--color-gray-hs), var(--color-gray-l-300));
+	--color-gray-350: hsl(var(--color-gray-hs), var(--color-gray-l-350));
 	--color-gray-400: hsl(var(--color-gray-hs), var(--color-gray-l-400));
+	--color-gray-450: hsl(var(--color-gray-hs), var(--color-gray-l-450));
 	--color-gray-500: hsl(var(--color-gray-hs), var(--color-gray-l-500));
+	--color-gray-550: hsl(var(--color-gray-hs), var(--color-gray-l-550));
 	--color-gray-600: hsl(var(--color-gray-hs), var(--color-gray-l-600));
+	--color-gray-650: hsl(var(--color-gray-hs), var(--color-gray-l-650));
 	--color-gray-700: hsl(var(--color-gray-hs), var(--color-gray-l-700));
 	--color-gray-750: hsl(var(--color-gray-hs), var(--color-gray-l-750));
 	--color-gray-800: hsl(var(--color-gray-hs), var(--color-gray-l-800));
 	--color-gray-850: hsl(var(--color-gray-hs), var(--color-gray-l-850));
 	--color-gray-900: hsl(var(--color-gray-hs), var(--color-gray-l-900));
 	--color-gray-950: hsl(var(--color-gray-hs), var(--color-gray-l-950));
-	--color-gray-1000: hsl(var(--color-gray-hs), var(--color-gray-l-1000));
 
 	/** Shortcuts **/
 	--color-black: hsl(0, 0%, var(--color-l-min));
@@ -297,18 +453,22 @@
 
 	--color-l-max: 100%;
 	--color-l-100: 95%;
+	--color-l-150: 90%;
 	--color-l-200: 86%;
 	--color-l-250: 79%;
 	--color-l-300: 74%;
+	--color-l-350: 71%;
 	--color-l-400: 68%;
+	--color-l-450: 66%;
 	--color-l-500: 64%;
+	--color-l-550: 59%;
 	--color-l-600: 54%;
+	--color-l-650: 46%;
 	--color-l-700: 38%;
 	--color-l-750: 33%;
 	--color-l-800: 25%;
 	--color-l-850: 19%;
 	--color-l-900: 12%;
 	--color-l-950: 7%;
-	--color-l-1000: 3%;
 	--color-l-min: 0%;
 }
diff --git a/panel/src/styles/utilities/theme.css b/panel/src/styles/utilities/theme.css
index 58a482f0a3..674b947c70 100644
--- a/panel/src/styles/utilities/theme.css
+++ b/panel/src/styles/utilities/theme.css
@@ -5,24 +5,42 @@
 	--theme-color-boost: 3%;
 
 	--theme-color-l-100: calc(var(--color-l-100) + var(--theme-color-boost));
+	--theme-color-l-150: calc(var(--color-l-150) + var(--theme-color-boost));
 	--theme-color-l-200: calc(var(--color-l-200) + var(--theme-color-boost));
+	--theme-color-l-250: calc(var(--color-l-250) + var(--theme-color-boost));
 	--theme-color-l-300: calc(var(--color-l-300) + var(--theme-color-boost));
+	--theme-color-l-350: calc(var(--color-l-350) + var(--theme-color-boost));
 	--theme-color-l-400: calc(var(--color-l-400) + var(--theme-color-boost));
+	--theme-color-l-450: calc(var(--color-l-450) + var(--theme-color-boost));
 	--theme-color-l-500: calc(var(--color-l-500) + var(--theme-color-boost));
+	--theme-color-l-550: calc(var(--color-l-550) + var(--theme-color-boost));
 	--theme-color-l-600: calc(var(--color-l-600) + var(--theme-color-boost));
+	--theme-color-l-650: calc(var(--color-l-650) + var(--theme-color-boost));
 	--theme-color-l-700: calc(var(--color-l-700) + var(--theme-color-boost));
+	--theme-color-l-750: calc(var(--color-l-750) + var(--theme-color-boost));
 	--theme-color-l-800: calc(var(--color-l-800) + var(--theme-color-boost));
+	--theme-color-l-850: calc(var(--color-l-850) + var(--theme-color-boost));
 	--theme-color-l-900: calc(var(--color-l-900) + var(--theme-color-boost));
+	--theme-color-l-950: calc(var(--color-l-950) + var(--theme-color-boost));
 
 	--theme-color-100: hsl(var(--theme-color-hs), var(--theme-color-l-100));
+	--theme-color-150: hsl(var(--theme-color-hs), var(--theme-color-l-150));
 	--theme-color-200: hsl(var(--theme-color-hs), var(--theme-color-l-200));
+	--theme-color-250: hsl(var(--theme-color-hs), var(--theme-color-l-250));
 	--theme-color-300: hsl(var(--theme-color-hs), var(--theme-color-l-300));
+	--theme-color-350: hsl(var(--theme-color-hs), var(--theme-color-l-350));
 	--theme-color-400: hsl(var(--theme-color-hs), var(--theme-color-l-400));
+	--theme-color-450: hsl(var(--theme-color-hs), var(--theme-color-l-450));
 	--theme-color-500: hsl(var(--theme-color-hs), var(--theme-color-l-500));
+	--theme-color-550: hsl(var(--theme-color-hs), var(--theme-color-l-550));
 	--theme-color-600: hsl(var(--theme-color-hs), var(--theme-color-l-600));
+	--theme-color-650: hsl(var(--theme-color-hs), var(--theme-color-l-650));
 	--theme-color-700: hsl(var(--theme-color-hs), var(--theme-color-l-700));
+	--theme-color-750: hsl(var(--theme-color-hs), var(--theme-color-l-750));
 	--theme-color-800: hsl(var(--theme-color-hs), var(--theme-color-l-800));
+	--theme-color-850: hsl(var(--theme-color-hs), var(--theme-color-l-850));
 	--theme-color-900: hsl(var(--theme-color-hs), var(--theme-color-l-900));
+	--theme-color-950: hsl(var(--theme-color-hs), var(--theme-color-l-950));
 
 	--theme-color-border: light-dark(
 		var(--theme-color-500),

From 3075f5face0a7200931b3418e7185e8880c5eaa4 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Wed, 18 Dec 2024 17:38:29 +0100
Subject: [PATCH 4/5] Remove `--color-l-max/min`

---
 panel/src/components/Collection/Item.vue       |  6 +++---
 panel/src/components/Forms/Toolbar/Toolbar.vue | 18 +++++-------------
 .../src/components/Views/Files/FilePreview.vue |  7 +++++--
 panel/src/styles/config/colors.css             | 10 +++-------
 4 files changed, 16 insertions(+), 25 deletions(-)

diff --git a/panel/src/components/Collection/Item.vue b/panel/src/components/Collection/Item.vue
index 73b27faef6..7a8e0b6e4b 100644
--- a/panel/src/components/Collection/Item.vue
+++ b/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 */
diff --git a/panel/src/components/Forms/Toolbar/Toolbar.vue b/panel/src/components/Forms/Toolbar/Toolbar.vue
index ca2a7af104..cbcaa9ae0e 100644
--- a/panel/src/components/Forms/Toolbar/Toolbar.vue
+++ b/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"]) {
diff --git a/panel/src/components/Views/Files/FilePreview.vue b/panel/src/components/Views/Files/FilePreview.vue
index 5736c7e43b..e9e8a7d588 100644
--- a/panel/src/components/Views/Files/FilePreview.vue
+++ b/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 {
diff --git a/panel/src/styles/config/colors.css b/panel/src/styles/config/colors.css
index 3a3f88840b..bd126e6332 100644
--- a/panel/src/styles/config/colors.css
+++ b/panel/src/styles/config/colors.css
@@ -1,6 +1,5 @@
 :root {
 	/* Lightness */
-	--color-l-max: 100%;
 	--color-l-100: 98%;
 	--color-l-150: 96%;
 	--color-l-200: 94%;
@@ -19,7 +18,6 @@
 	--color-l-850: 21%;
 	--color-l-900: 15%;
 	--color-l-950: 11%;
-	--color-l-min: 0%;
 
 	/* Colors */
 	--color-red-h: 0;
@@ -411,10 +409,10 @@
 	--color-gray-950: hsl(var(--color-gray-hs), var(--color-gray-l-950));
 
 	/** Shortcuts **/
-	--color-black: hsl(0, 0%, var(--color-l-min));
+	--color-black: hsl(0, 0%, 0%);
 	--color-border: light-dark(var(--color-gray-300), var(--color-gray-800));
 	--color-border-dimmed: light-dark(
-		hsla(0, 0%, var(--color-l-min), 0.1),
+		hsla(0, 0%, 0%, 0.1),
 		var(--color-gray-850)
 	);
 	--color-dark: var(--color-gray-900);
@@ -422,7 +420,7 @@
 	--color-light: var(--color-gray-200);
 	--color-text: light-dark(var(--color-black), var(--color-white));
 	--color-text-dimmed: light-dark(var(--color-gray-700), var(--color-gray-400));
-	--color-white: hsl(0, 0%, var(--color-l-max));
+	--color-white: hsl(0, 0%, 100%);
 
 	/** @deprecated */
 	--color-backdrop: rgba(0, 0, 0, 0.6);
@@ -451,7 +449,6 @@
 :root:has(.k-panel[data-theme="dark"]) {
 	color-scheme: dark;
 
-	--color-l-max: 100%;
 	--color-l-100: 95%;
 	--color-l-150: 90%;
 	--color-l-200: 86%;
@@ -470,5 +467,4 @@
 	--color-l-850: 19%;
 	--color-l-900: 12%;
 	--color-l-950: 7%;
-	--color-l-min: 0%;
 }

From ea6f1baf30f348ed85cc59241dd5bd575d591978 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Wed, 18 Dec 2024 17:43:19 +0100
Subject: [PATCH 5/5] Increase contrast of button icon once more

---
 panel/src/styles/config/colors.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/panel/src/styles/config/colors.css b/panel/src/styles/config/colors.css
index bd126e6332..bfd9b3a38a 100644
--- a/panel/src/styles/config/colors.css
+++ b/panel/src/styles/config/colors.css
@@ -461,7 +461,7 @@
 	--color-l-550: 59%;
 	--color-l-600: 54%;
 	--color-l-650: 46%;
-	--color-l-700: 38%;
+	--color-l-700: 37%;
 	--color-l-750: 33%;
 	--color-l-800: 25%;
 	--color-l-850: 19%;