From edfc15ba01098e9c5cd33422e062746c25520aea Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Tue, 12 Jul 2022 16:44:16 +0300
Subject: [PATCH] Add light mode

Works only with OS level setting for now.
Later an override on the site should be added.
---
 app/root.tsx           |  2 +-
 app/styles/global.css  | 73 +++++++++++++++++++++++++++---------------
 cypress/e2e/plus.cy.ts |  3 --
 3 files changed, 48 insertions(+), 30 deletions(-)

diff --git a/app/root.tsx b/app/root.tsx
index 9b37d72c4..867f46cfe 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -71,7 +71,7 @@ function Document({ children }: { children: React.ReactNode }) {
     <html lang="en">
       <head>
         <Meta />
-        <meta name="color-scheme" content="dark" />
+        <meta name="color-scheme" content="dark light" />
         <Links />
       </head>
       <body>
diff --git a/app/styles/global.css b/app/styles/global.css
index 4f09cce7c..06942a869 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -1,33 +1,28 @@
 :root {
-  color-scheme: dark;
-
-  --bg: hsl(237.3deg 42.3% 30.6%);
-  --bg-darker: hsl(237.3deg 42.3% 26.6%);
-  --bg-lighter: hsl(237.3deg 42.3% 35.6%);
-  --bg-lighter-transparent: hsla(237.3deg 42.3% 35.6% / 50%);
-  --bg-darker-very-transparent: hsla(237.3deg 42.3% 26.6% / 50%);
-  --bg-darker-transparent: hsla(237.3deg 42.3% 26.6% / 90%);
+  --bg: hsl(202deg 100% 96%);
+  --bg-darker: hsl(202deg 90% 90%);
+  --bg-lighter: hsl(225deg 100% 88%);
+  --bg-lighter-transparent: hsla(225deg 100% 88% / 50%);
+  --bg-darker-very-transparent: hsl(202deg 90% 90% / 50%);
+  --bg-darker-transparent: hsla(202deg 90% 90% / 65%);
   --bg-badge: #000;
-  --border: hsl(237.3deg 42.3% 45.6%);
-  --button-text: rgb(0 0 0 / 85%);
+  --border: hsl(237deg 100% 86%);
+  --button-text: rgba(255, 255, 255, 0.85);
   --button-text-transparent: rgb(0 0 0 / 65%);
-  --text: rgb(255 255 255 / 95%);
-  --text-lighter: rgb(255 255 255 / 55%);
-  --theme-error: rgb(219 70 65);
-  --theme-error-transparent: rgba(219 70 65 / 75%);
-  --theme-warning: #f5f587;
-  --theme-info: #a3a6ff;
-  --theme-success: #a3ffae;
-  --theme-success-transparent: #a3ffae52;
-  --theme: hsl(255deg 66.7% 75%);
-  --theme-vibrant: hsl(255deg 78% 65%);
+  --text: rgba(0, 0, 0, 0.95);
+  --text-lighter: rgba(75, 75, 75, 0.95);
+  --theme-error: rgb(199 13 6);
+  --theme-error-transparent: rgba(199 13 6 / 75%);
+  --theme-warning: #c9c900;
+  --theme-success: #00a514;
+  --theme-success-transparent: #00a51452;
+  --theme: hsl(255deg 64% 63%);
+  --theme-vibrant: hsl(255deg 100% 81%);
   --theme-transparent: hsl(255deg 66.7% 75% / 40%);
-  --theme-transparent-vibrant: hsl(255deg 78% 65% / 54%);
-  --theme-semi-transparent-vibrant: hsl(255deg 78% 65% / 75%);
+  --theme-transparent-vibrant: hsl(255deg 100% 81% / 54%);
+  --theme-semi-transparent-vibrant: hsl(255deg 100% 81% / 75%);
   --theme-secondary: hsl(85deg 66.7% 55.3%);
 
-  /* background-pattern.svg not using this currently */
-  --theme-pattern: #6741d9;
   --rounded: 16px;
   --rounded-sm: 10px;
   --fonts-xl: 1.5rem;
@@ -68,12 +63,38 @@
   --s-72: 18rem;
   --s-80: 20rem;
   --s-96: 2rem;
-
-  /* letter-spacing: */
   --sparse: 0.4px;
   --label-margin: var(--s-1);
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: hsl(237.3deg 42.3% 30.6%);
+    --bg-darker: hsl(237.3deg 42.3% 26.6%);
+    --bg-lighter: hsl(237.3deg 42.3% 35.6%);
+    --bg-lighter-transparent: rgba(64, 67, 108, 0.5);
+    --bg-darker-very-transparent: hsla(237.3deg 42.3% 26.6% / 50%);
+    --bg-darker-transparent: hsla(237.3deg 42.3% 26.6% / 90%);
+    --bg-badge: #000;
+    --border: hsl(237.3deg 42.3% 45.6%);
+    --button-text: rgb(0 0 0 / 85%);
+    --button-text-transparent: rgb(0 0 0 / 65%);
+    --text: rgb(255 255 255 / 95%);
+    --text-lighter: rgb(255 255 255 / 55%);
+    --theme-error: rgb(219 70 65);
+    --theme-error-transparent: rgba(219 70 65 / 75%);
+    --theme-warning: #f5f587;
+    --theme-success: #a3ffae;
+    --theme-success-transparent: #a3ffae52;
+    --theme: hsl(255deg 66.7% 75%);
+    --theme-vibrant: hsl(255deg 78% 65%);
+    --theme-transparent: hsl(255deg 66.7% 75% / 40%);
+    --theme-transparent-vibrant: hsl(255deg 78% 65% / 54%);
+    --theme-semi-transparent-vibrant: hsl(255deg 78% 65% / 75%);
+    --theme-secondary: hsl(85deg 66.7% 55.3%);
+  }
+}
+
 /* xs: "(min-width: 480px)",
 sm: "(min-width: 640px)",
 md: "(min-width: 768px)",
diff --git a/cypress/e2e/plus.cy.ts b/cypress/e2e/plus.cy.ts
index b93b49b57..b45be1ef3 100644
--- a/cypress/e2e/plus.cy.ts
+++ b/cypress/e2e/plus.cy.ts
@@ -77,7 +77,4 @@ describe("Plus voting results page", () => {
     cy.contains("Sendou");
     cy.contains("passed");
   });
-
-  // xxx: figure out a good way to do plus server tests with serverside isVotingActive or delete existing tests
-  // -> if way is found then should also add tests for voting
 });