feat: add styling (#20)

Adds general CoW styling for both light and darkmode <img width="1235" alt="Screenshot 2024-01-04 at 13 03 04" src="https://github.com/cowprotocol/tutorial/assets/31534717/406b22f9-cc36-4999-9e45-5a2c6afddfe2"> <img width="1239" alt="Screenshot 2024-01-04 at 13 03 11" src="https://github.com/cowprotocol/tutorial/assets/31534717/2aff2acc-fa86-4b7e-9086-e92b7bfe0b36">
cowprotocol · Jan 5, 2024 · 2181db3 · 2181db3
1 parent 12b7f45
commit 2181db3
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 15 deletions.
diff --git a/src/app.css b/src/app.css
@@ -8,6 +8,84 @@ body {
 	--light-blue: #f4f8fb;
 }
 
+html body.dark {
+	color-scheme: dark;
+	--sk-back-3-hsl: 216, 100%, 10%;
+	--sk-back-2-hsl: 216, 100%, 15%;
+	--sk-back-1: #052b65;
+	--sk-back-4: #0a3d8c;
+	--sk-back-5: #295aa1;
+	--sk-back-translucent: #052b651a;
+	--sk-theme-1-hsl: 216, 100%, 90%;
+	--sk-theme-2-hsl: 216, 80%, 30%;
+	--sk-theme-3-hsl: 216, 60%, 50%;
+	--sk-text-1: #cae9ff;
+	--sk-text-2: #b0d4f7;
+	--sk-text-3: #96bff5;
+	--sk-text-4: #7caaf2;
+	--sk-text-translucent: #cae9ff1a;
+	--sk-scrollbar: #cae9ff4d;
+	--sk-theme-1-variant: #084a8d;
+	--sk-theme-2-variant: #296ba4;
+	--sk-theme-3-variant: #4b8cc1;
+	--sk-text-warning-hsl: 216, 67%, 56%;
+	--sk-code-ts-bg: hsl(216, 100%, 15%);
+	--sk-code-base: #c4c1bb;
+	--sk-code-comment: #8c8c8c;
+	--sk-code-keyword: #57b5f4;
+	--sk-code-function: #eab095;
+	--sk-code-string: #ccb88f;
+	--sk-code-number: green;
+	--sk-code-template-string: #d81e18;
+	--sk-code-tags: var(--sk-code-function);
+	--sk-code-important: var(--sk-code-string);
+	--sk-code-diff-base: #ffffff80;
+	--sk-code-diff-inserted: #42b342;
+	--sk-code-diff-removed: #e38582;
+	--faded: rgba(255, 255, 255, 0.5);
+	--progress: #cae9ff;
+	--cutout: #052b65;
+}
+
+html body.light {
+	color-scheme: light;
+	--sk-back-3-hsl: 206, 64%, 98%;
+	--sk-back-2-hsl: 0, 0%, 100%;
+	--sk-back-1: #fff;
+	--sk-back-4: #f2f7fd;
+	--sk-back-5: #c2cdd6;
+	--sk-theme-1-hsl: 216, 100%, 33%;
+	--sk-theme-2-hsl: 240, 8%, 44%;
+	--sk-theme-3-hsl: 204, 100%, 63%;
+	--sk-text-1: #052b65;
+	--sk-text-2: #052b65;
+	--sk-text-3: #405a82;
+	--sk-text-4: #405a82;
+	--sk-scrollbar: #052b654d;
+	--sk-theme-1-variant: #084a8d;
+	--sk-theme-2-variant: #676779;
+	--sk-theme-3-variant: #42b4ff;
+	--sk-code-ts-bg: var(--sk-back-1);
+	--sk-code-base: #5f5c53;
+	--sk-code-comment: #696969;
+	--sk-code-keyword: #0b69a8;
+	--sk-code-function: #bb5525;
+	--sk-code-string: #856e3d;
+	--sk-code-number: green;
+	--sk-code-template-string: #d81e18;
+	--sk-code-tags: var(--sk-code-function);
+	--sk-code-important: var(--sk-code-string);
+	--sk-code-diff-base: #0009;
+	--sk-code-diff-inserted: green;
+	--sk-code-diff-removed: #d81e18;
+	--sk-text-warning-hsl: 32, 95%, 44%;
+	--sk-back-translucent: #0000001a;
+	--sk-text-translucent: #000000b3;
+	--faded: #052b6524;
+	--progress: #052b65;
+	--cutout: #052b65;
+}
+
 input,
 button {
 	border: 2px solid transparent;
@@ -23,6 +101,7 @@ button:focus-visible {
 pre.language-diff code {
 	color: rgba(0, 0, 0, 0.4);
 }
+
 .dark pre.language-diff code {
 	color: rgba(255, 255, 255, 0.4);
 }
@@ -55,4 +134,4 @@ pre.language-diff code {
 
 .language-diff .deleted::before {
 	content: '-';
-}
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -14,11 +14,11 @@
 <Shell>
 	<Nav title="" links={data.links} slot="top-nav">
 		<svelte:fragment slot="home-large">
-			<strong>learn</strong>.svelte.dev
+			<strong id="cow-word">CoW</strong> tutorials
 		</svelte:fragment>
 
 		<svelte:fragment slot="home-small">
-			<strong>learn</strong>
+			<strong>CoW</strong>
 		</svelte:fragment>
 
 		<svelte:fragment slot="search">
@@ -64,6 +64,10 @@
 		display: none;
 	}
 
+	#cow-word {
+		text-transform: none;
+	}
+
 	@media (min-width: 800px) {
 		span {
 			height: 100%;

diff --git a/src/routes/tutorial/[slug]/+page.svelte b/src/routes/tutorial/[slug]/+page.svelte
@@ -326,7 +326,7 @@
 	}
 
 	.navigator .solve.completed {
-		background: var(--sk-theme-2);
+		background: var(--sk-theme-3);
 	}
 
 	.preview {

diff --git a/src/routes/tutorial/[slug]/Loading.svelte b/src/routes/tutorial/[slug]/Loading.svelte
@@ -100,9 +100,7 @@
 
 <style>
 	.loading {
-		--faded: #eee;
-		--progress: #ccc;
-		--cutout: #fff;
+
 		position: absolute;
 		width: 100%;
 		height: 100%;
@@ -162,12 +160,4 @@
 		width: 10rem;
 		height: 10rem;
 	}
-
-	@media (prefers-color-scheme: dark) {
-		.loading {
-			--faded: #444;
-			--progress: #555;
-			--cutout: var(--sk-back-2);
-		}
-	}
 </style>