chore: some color changes

chat-game · Jul 3, 2024 · 5ccfe93 · 5ccfe93
1 parent 1596b5e
commit 5ccfe93
Show file tree

Hide file tree

Showing 10 changed files with 245 additions and 217 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,4 @@
 {
-  "eslint.experimental.useFlatConfig": true,
-
   "prettier.enable": false,
   "editor.formatOnSave": false,
 

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
@@ -37,11 +37,11 @@
 
     a {
         font-weight: 600;
-        color: var(--color-text);
+        color: inherit;
     }
 
     a:hover {
-        color: var(--color-accent-1);
+        color: var(--green-9);
     }
 
     @media (min-width: 480px) {

diff --git a/src/lib/components/Hamburger.svelte b/src/lib/components/Hamburger.svelte
@@ -32,7 +32,6 @@
 svg {
     min-height: 24px;
     transition: transform 0.2s ease-in-out;
-    color: var(--color-text);
 }
 
 svg line {

diff --git a/src/lib/components/MenuDesktop.svelte b/src/lib/components/MenuDesktop.svelte
@@ -45,7 +45,7 @@
         display: flex;
         height: 100%;
         align-items: center;
-        color: var(--color-text);
+        color: inherit;
         font-weight: 700;
         font-size: 1rem;
         text-transform: uppercase;
@@ -55,7 +55,7 @@
     }
 
     nav a:hover {
-        color: var(--color-accent-1);
+        color: var(--green-9);
     }
 
     ul {
@@ -77,6 +77,6 @@
     }
 
     li[aria-current='page'] a {
-        color: var(--color-accent-1);
+        color: var(--green-9);
     }
   </style>
diff --git a/src/lib/styles/styles.css b/src/lib/styles/styles.css
@@ -1,8 +1,11 @@
 @import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');
 
+@import '@radix-ui/colors/bronze.css';
+@import '@radix-ui/colors/brown.css';
+@import '@radix-ui/colors/green.css';
+@import '@radix-ui/colors/orange.css';
+
 :root {
-    --color-accent-1: #30A46C;
-    --color-text: #331E0B;
     --color-twitch: #8E4EC6;
     --color-background: #FFF7ED;
     --color-background-2: #F6EEE7;
@@ -22,14 +25,15 @@ html {
     font-size: 16px;
 }
 
-html, body {
+html,
+body {
     font-family: "Noto Serif", "Times New Roman", "Georgia", serif;
     font-optical-sizing: auto;
     font-weight: 500;
     font-style: normal;
     font-variation-settings: "wdth" 100;
-    background-color: var(--color-background);
-    color: var(--color-text);
+    background-color: var(--orange-2);
+    color: var(--bronze-12);
 }
 
 body {
@@ -60,7 +64,7 @@ p {
 }
 
 a {
-    color: var(--color-accent-1);
+    color: var(--green-9);
     text-decoration: none;
 }
 
@@ -84,7 +88,6 @@ pre {
     box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
     padding: 0.5em;
     overflow-x: auto;
-    color: var(--color-text);
 }
 
 input,
@@ -93,7 +96,9 @@ button {
     font-family: inherit;
 }
 
-button, input[type="submit"], input[type="reset"] {
+button,
+input[type="submit"],
+input[type="reset"] {
     background: none;
     color: inherit;
     border: none;
@@ -139,19 +144,20 @@ button:focus:not(:focus-visible) {
     bottom: -0.25em;
     transform: translateY(100%);
     padding: 0.5em;
-    background-color: var(--color-background-2);
+    background-color: var(--brown-3);
     z-index: 5;
-  }
+}
 
-  .dropdown-menu a {
+.dropdown-menu a {
     color: inherit;
     text-decoration: none;
-  }
+}
 
-  .dropdown-menu button {
+.dropdown-menu button {
     text-align: left;
-  }
+}
 
-  .dropdown-menu button:hover, .dropdown-menu a:hover {
-    color: var(--color-accent-1);
-  }
+.dropdown-menu button:hover,
+.dropdown-menu a:hover {
+    color: var(--green-9);
+}
diff --git a/src/routes/[lang]/(game)/play/GamePollProgress.svelte b/src/routes/[lang]/(game)/play/GamePollProgress.svelte
@@ -65,7 +65,7 @@
     width: 100%;
     height: 100%;
     display: none;
-    background-color: var(--color-accent-1);
+    background-color: var(--green-9);
   }
 
   .votes {

diff --git a/src/routes/[lang]/(game)/play/GameRouteInfo.svelte b/src/routes/[lang]/(game)/play/GameRouteInfo.svelte
@@ -61,7 +61,7 @@
   .progress-bar {
     z-index: 10;
     height: 1.5em;
-    background-color: var(--color-accent-1);
+    background-color: var(--green-9);
     border-radius: 1em;
   }
 </style>