Tweak color lightness values

getkirby · Dec 2, 2024 · 4ec62ad · 4ec62ad
1 parent e5d0293
commit 4ec62ad
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 20 deletions.
diff --git a/panel/src/styles/config/colors.css b/panel/src/styles/config/colors.css
@@ -257,7 +257,10 @@
 	/** Shortcuts **/
 	--color-black: hsl(0, 0%, var(--color-l-min));
 	--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), var(--color-gray-850));
+	--color-border-dimmed: light-dark(
+		hsla(0, 0%, var(--color-l-min), 0.1),
+		var(--color-gray-850)
+	);
 	--color-dark: var(--color-gray-900);
 	--color-focus: var(--color-blue-600);
 	--color-light: var(--color-gray-200);
@@ -293,19 +296,19 @@
 	color-scheme: dark;
 
 	--color-l-max: 100%;
-	--color-l-100: 98%;
-	--color-l-200: 94%;
-	--color-l-250: 90%;
-	--color-l-300: 85%;
-	--color-l-400: 75%;
-	--color-l-500: 65%;
+	--color-l-100: 95%;
+	--color-l-200: 86%;
+	--color-l-250: 78%;
+	--color-l-300: 73%;
+	--color-l-400: 67%;
+	--color-l-500: 62%;
 	--color-l-600: 52%;
 	--color-l-700: 40%;
-	--color-l-750: 36%;
-	--color-l-800: 27%;
-	--color-l-850: 22%;
-	--color-l-900: 13%;
-	--color-l-950: 8%;
-	--color-l-1000: 5%;
+	--color-l-750: 33%;
+	--color-l-800: 26%;
+	--color-l-850: 19%;
+	--color-l-900: 11%;
+	--color-l-950: 6%;
+	--color-l-1000: 3%;
 	--color-l-min: 0%;
 }
diff --git a/panel/src/styles/utilities/theme.css b/panel/src/styles/utilities/theme.css
@@ -24,16 +24,24 @@
 	--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-back: light-dark(var(--theme-color-400), var(--theme-color-500));
+	--theme-color-border: light-dark(
+		var(--theme-color-500),
+		var(--theme-color-600)
+	);
+	--theme-color-back: light-dark(
+		var(--theme-color-400),
+		var(--theme-color-500)
+	);
 	--theme-color-hover: var(--theme-color-600);
 	--theme-color-icon: var(--theme-color-600);
 	--theme-color-icon-highlight: var(--theme-color-700);
-	--theme-color-text: light-dark(var(--theme-color-800), var(--theme-color-500));
-	--theme-color-text-dimmed: hsl(
-		var(--theme-color-h),
-		calc(var(--theme-color-s) - 60%),
-		50%
+	--theme-color-text: light-dark(
+		var(--theme-color-800),
+		var(--theme-color-500)
+	);
+	--theme-color-text-dimmed: light-dark(
+		hsl(var(--theme-color-h), calc(var(--theme-color-s) - 60%), 50%),
+		hsl(var(--theme-color-h), calc(var(--theme-color-s) - 60%), 60%)
 	);
 	--theme-color-text-highlight: var(--theme-color-900);
 }