From 9c7ddce8fefa62c717195bd495231f6d38f3bafa Mon Sep 17 00:00:00 2001
From: Nikita Karamov <me@kytta.dev>
Date: Mon, 14 Nov 2022 18:35:36 +0100
Subject: [PATCH] Replace colours with a experimental new palette

---
 src/scss/_variables.scss | 22 ++++++++++++--------
 src/scss/style.scss      | 44 ++++++++++++++++++++++++++++------------
 2 files changed, 45 insertions(+), 21 deletions(-)

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 7bea1c4..69b415b 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -8,15 +8,21 @@
  */
 
 $text-font: "Roboto", sans-serif;
+$font-family-sans: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue",
+	"Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
 
-$bg: #1f232b;
-$text: #9baec8;
-$title: #d9e1e8;
+$color-bg-light: #fff;
+$color-bg-dark: #000;
+$color-text-light: #000;
+$color-text-dark: #fff;
 
-$button-bg: #2b90d9;
-$button-hover-bg: #56a7e1;
-$button-text: white;
+$color-border: #80808060;
 
-$input-bg: #131419;
+$color-textarea-bg-light: #eee;
+$color-textarea-bg-dark: #111;
+$color-textarea-border-light: #80808060;
+$color-textarea-border-dark: #80808060;
 
-$border-color: #303643;
+$color-accent: oklch(63.16% 0.202 142.93);
+$color-accent-rgb: rgb(26.86, 165.96, 30.56);
+$color-accent-lighter: oklch(68.16% 0.202 142.93);
diff --git a/src/scss/style.scss b/src/scss/style.scss
index d7446ba..79de338 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -19,9 +19,9 @@
 
 html,
 body {
-	background-color: $bg;
-	color: $text;
-	font-family: $text-font;
+	background-color: $color-bg-light;
+	color: $color-text-light;
+	font-family: $font-family-sans;
 	font-size: 16px;
 	font-weight: 400;
 	line-height: 1;
@@ -38,8 +38,8 @@ body {
 }
 
 header {
-	border-bottom: 1px solid $border-color;
 	padding: 1.5rem 0;
+	margin-bottom: 1.5rem;
 	text-align: center;
 	width: 100%;
 
@@ -53,7 +53,7 @@ header {
 main {
 	width: 100%;
 	max-width: 600px;
-	margin: auto;
+	margin: 0 auto auto;
 	padding: 0 0.75rem;
 
 	form {
@@ -83,13 +83,14 @@ main {
 
 			&[type="checkbox"] {
 				margin-right: 8px;
+				accent-color: $color-accent-rgb;
 			}
 
 			&[type="submit"] {
 				display: inline-block;
 				text-align: center;
-				background-color: $button-bg;
-				color: $button-text;
+				background-color: $color-accent;
+				color: $color-text-dark;
 				font-weight: 500;
 				font-family: inherit;
 				height: 2.5rem;
@@ -99,7 +100,7 @@ main {
 				cursor: pointer;
 
 				&:hover {
-					background-color: $button-hover-bg;
+					background-color: $color-accent-lighter;
 				}
 			}
 
@@ -113,14 +114,13 @@ main {
 			outline: 0;
 			font-family: inherit;
 			resize: vertical;
-			background-color: $input-bg;
-			border: 1px solid color.scale($input-bg, $lightness: -25%);
+			background-color: $color-textarea-bg-light;
+			border: 1px solid $color-textarea-border-light;
 			padding: 10px;
 
 			&:focus,
 			&:active {
-				border: 1px solid $button-bg;
-				background-color: color.scale($input-bg, $lightness: +5%);
+				border: 1px solid $color-accent;
 			}
 
 			&::placeholder {
@@ -132,7 +132,7 @@ main {
 }
 
 footer {
-	border-top: 1px solid $border-color;
+	border-top: 1px solid $color-border;
 	padding: 1rem 0;
 	width: 100%;
 	display: flex;
@@ -154,3 +154,21 @@ footer {
 		}
 	}
 }
+
+@media (prefers-color-scheme: dark) {
+	html,
+	body {
+		background-color: $color-bg-dark;
+		color: $color-text-dark;
+	}
+
+	main {
+		form {
+			textarea,
+			input[type="url"] {
+				background-color: $color-textarea-bg-dark;
+				border: 1px solid $color-textarea-border-dark;
+			}
+		}
+	}
+}