feat(whatislove-dev): use light-dark for light/dark theme wd-165 (#610)

what1s1ove · Jun 13, 2024 · 2457e15 · 2457e15
1 parent 57c692c
commit 2457e15
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 80 deletions.
diff --git a/apps/whatislove-dev/src/styles/globals/variables.css b/apps/whatislove-dev/src/styles/globals/variables.css
@@ -1,5 +1,8 @@
+@custom-media --width-tablet (width >= 768px);
+@custom-media --width-desktop (width >= 1450px);
+
 :root {
-	color-scheme: light;
+	color-scheme: light dark;
 
 	/* Sizes */
 	--size-inline-box-full: calc(infinity);
@@ -69,33 +72,48 @@
 
 	/* theme */
 
-	--color-page-background: var(--color-white-100);
-	--color-page-background-highlight: var(--color-black-100) / 5%;
-	--color-page-background-code: var(--color-white-200);
-	--color-scroll-shadow: var(--color-black-100);
-	--color-intro-background: var(--color-white-100) / 60%;
-	--color-intro-image-mask: var(--color-white-100);
-	--color-technology-background: var(--color-black-100);
-	--color-icon: var(--color-black-200);
-	--color-icon-inverted: var(--color-white-100);
-	--color-sticker: var(--color-black-100) / 10%;
-	--color-text: var(--color-black-200);
+	--color-page-background: light-dark(
+		var(--color-white-100),
+		var(--color-black-200)
+	);
+	--color-page-background-highlight: light-dark(
+		var(--color-black-100) / 5%,
+		var(--color-white-100) / 10%
+	);
+	--color-page-background-code: light-dark(
+		var(--color-white-200),
+		var(--color-black-300)
+	);
+	--color-scroll-shadow: light-dark(
+		var(--color-black-100),
+		var(--color-white-100)
+	);
+	--color-intro-background: light-dark(
+		var(--color-white-100) / 60%,
+		var(--color-black-100) / 15%
+	);
+	--color-intro-image-mask: light-dark(
+		var(--color-white-100),
+		var(--color-black-100)
+	);
+	--color-technology-background: light-dark(
+		var(--color-black-100),
+		var(--color-white-100)
+	);
+	--color-icon: light-dark(var(--color-black-200), var(--color-white-100));
+	--color-icon-inverted: light-dark(
+		var(--color-white-100),
+		var(--color-black-200)
+	);
+	--color-sticker: light-dark(
+		var(--color-black-100) / 10%,
+		var(--color-white-100)
+	);
+	--color-text: light-dark(var(--color-black-200), var(--color-white-100));
 
 	&:has(.settings--theme .settings__theme-control[value="dark"]:checked) {
 		color-scheme: dark;
 
-		--color-page-background: var(--color-black-200);
-		--color-page-background-highlight: var(--color-white-100) / 10%;
-		--color-page-background-code: var(--color-black-300);
-		--color-scroll-shadow: var(--color-white-100);
-		--color-intro-background: var(--color-black-100) / 15%;
-		--color-intro-image-mask: var(--color-black-100);
-		--color-technology-background: var(--color-white-100);
-		--color-icon: var(--color-white-100);
-		--color-icon-inverted: var(--color-black-200);
-		--color-sticker: var(--color-white-100);
-		--color-text: var(--color-white-100);
-
 		.shiki,
 		.shiki span {
 			color: var(--shiki-dark) !important;
@@ -106,25 +124,10 @@
 		&:has(.settings--theme .settings__theme-control[value="auto"]:checked) {
 			color-scheme: dark;
 
-			--color-page-background: var(--color-black-200);
-			--color-page-background-highlight: var(--color-white-100) / 10%;
-			--color-page-background-code: var(--color-black-300);
-			--color-scroll-shadow: var(--color-white-100);
-			--color-intro-background: var(--color-black-100) / 15%;
-			--color-intro-image-mask: var(--color-black-100);
-			--color-technology-background: var(--color-white-100);
-			--color-icon: var(--color-white-100);
-			--color-icon-inverted: var(--color-black-200);
-			--color-sticker: var(--color-white-100);
-			--color-text: var(--color-white-100);
-
 			.shiki,
 			.shiki span {
 				color: var(--shiki-dark) !important;
 			}
 		}
 	}
 }
-
-@custom-media --width-tablet (width >= 768px);
-@custom-media --width-desktop (width >= 1450px);
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -48,7 +48,7 @@
 		"eslint-plugin-unicorn": "49.0.0",
 		"globals": "13.24.0",
 		"knip": "5.7.0",
-		"lightningcss": "1.22.1",
+		"lightningcss": "1.25.1",
 		"lint-staged": "15.2.0",
 		"prettier": "3.2.5",
 		"prettier-plugin-jinja-template": "1.3.1",