ui: use new color scheme

ghivert · Jul 18, 2024 · a2321d8 · a2321d8
1 parent d80001c
commit a2321d8
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 17 deletions.
diff --git a/apps/frontend/src/frontend/view/body/styles.gleam b/apps/frontend/src/frontend/view/body/styles.gleam
@@ -187,7 +187,7 @@ pub fn search_title_() {
     s.display("flex"),
     s.align_items("center"),
     s.gap(px(12)),
-    s.color(palette.dark.white),
+    s.color("var(--text-color)"),
   ])
 }
 

diff --git a/apps/frontend/src/frontend/view/footer/styles.gleam b/apps/frontend/src/frontend/view/footer/styles.gleam
@@ -5,7 +5,7 @@ import sketch/size.{px}
 
 pub fn footer(attributes, children) {
   l.memo("footer", attributes, children, [
-    s.background(palette.dark.charcoal),
+    s.background("var(--sidebar-background)"),
     s.display("flex"),
     s.flex_direction("column"),
     s.padding(px(24)),
@@ -49,7 +49,7 @@ pub fn footer_section(attributes, children) {
 
 pub fn foot_title(attributes, children) {
   l.memo("div", attributes, children, [
-    s.color(palette.dark.dark_white),
+    s.color("var(--input-text-color)"),
     s.font_weight("500"),
     s.padding_("6px 0px"),
   ])
@@ -58,7 +58,7 @@ pub fn foot_title(attributes, children) {
 pub fn foot_lk(attributes, children) {
   l.memo("a", attributes, children, [
     s.font_size(size.rem_(0.9)),
-    s.color(palette.dark.white),
+    s.color(palette.dark.dark_white),
     s.text_decoration("none"),
   ])
 }
diff --git a/apps/frontend/src/frontend/view/navbar/styles.gleam b/apps/frontend/src/frontend/view/navbar/styles.gleam
@@ -41,14 +41,14 @@ pub fn trending(attributes, children) {
     s.flex_direction("column"),
     s.gap(px(3)),
     s.align_items("end"),
-    s.color(palette.dark.dark_white),
+    s.color("var(--text-color)"),
     s.white_space("nowrap"),
   ])
 }
 
 pub fn nav_link(attributes, children) {
   l.memo("a", attributes, children, [
-    s.color(palette.dark.white),
+    s.color("var(--text-color)"),
     s.text_decoration("none"),
   ])
 }
@@ -65,7 +65,7 @@ pub fn navbar(transparent: Bool, attributes, children) {
     s.gap(px(48)),
     s.background(case transparent {
       True -> "transparent"
-      False -> palette.dark.underwater_blue
+      False -> "var(--sidebar-background)"
     }),
     s.height(px(130)),
     s.z_index(1000),

diff --git a/apps/frontend/src/frontend/view/search_input/styles.gleam b/apps/frontend/src/frontend/view/search_input/styles.gleam
@@ -45,7 +45,10 @@ pub fn search_input(loading, small, children) {
     s.gap(px(6)),
     s.border_radius(px(8)),
     s.color("var(--input-text-color)"),
-    s.background("var(--input-background)"),
+    s.background(case small {
+      False -> "var(--input-background)"
+      True -> "var(--dark-background)"
+    }),
     s.transition("padding .3s"),
     s.align_items("baseline"),
     s.padding(
@@ -83,8 +86,8 @@ pub fn filter_pills(attributes, children) {
 pub fn filter_pill(active: Bool, attributes, children) {
   let id = "filter_pill-active-" <> bool.to_string(active)
   l.dynamic("button", attributes, children, id, [
-    s.background(palette.dark.aged_plastic_yellow),
-    s.color(palette.dark.charcoal),
+    s.background("var(--secondary)"),
+    // s.color("var(--text-color)"),
     s.padding_("3px 12px"),
     s.border_radius(px(30)),
     s.font_size(px(12)),

diff --git a/apps/frontend/src/stylesheets/all.css b/apps/frontend/src/stylesheets/all.css
@@ -202,7 +202,7 @@ cache-signatures:has(:not(:defined)) {
   display: flex;
   align-items: center;
   gap: 12px;
-  color: #aeaeac;
+  color: var(--text-color);
   font-size: 2.5rem;
 }
 
@@ -212,7 +212,7 @@ cache-signatures:has(:not(:defined)) {
   flex-direction: column;
   gap: 9px;
   font-size: 0.9rem;
-  color: #aeaeac;
+  color: var(--text-color);
   line-height: 1.3;
 }
 
@@ -241,7 +241,8 @@ cache-signatures:has(:not(:defined)) {
 }
 
 .search-submit:disabled {
-  background: #584355;
+  background: var(--input-background);
+  color: var(--text-color-disabled);
 }
 
 .matches-titles {
@@ -542,8 +543,8 @@ cache-signatures:has(:not(:defined)) {
   position: sticky;
   bottom: 0px;
   padding: 12px;
-  background-color: rgb(22, 25, 36);
-  border: 1px solid var(--border-color);
+  background-color: var(--background);
+  border-top: 1px solid var(--border-color);
   margin-top: 24px;
 }
 

diff --git a/apps/frontend/src/stylesheets/main.css b/apps/frontend/src/stylesheets/main.css
@@ -17,14 +17,15 @@ body {
 
 :root {
   --background: rgb(252, 251, 245);
+  --dark-background: rgb(238, 237, 233);
   --card-background: #f6f6f6;
   --text-color: rgb(21, 21, 21);
+  --text-color-disabled: rgba(254, 254, 252, 0.5);
   --input-text-color: rgba(21, 21, 21, 0.6);
   --code-background: rgba(21, 21, 21, 0.05);
   --sidebar-background: rgba(255, 175, 243, 0.2);
   --border-color: rgba(228, 227, 223);
   --input-background: rgba(240, 223, 233, 1);
-  --text-color: #000;
   --text-grey-color: #555;
   --border-color: #ddd;
   --green: #01ff70;
@@ -34,6 +35,7 @@ body {
   --link: #0074d9;
   --disabled: #ddd;
   --text-disabled: #333;
+  --secondary: #fced9f;
 
   --hljs-red: rgb(184, 0, 0);
   --hljs-purple: rgb(132, 0, 255);
@@ -45,18 +47,20 @@ body {
 @media (prefers-color-scheme: dark) {
   :root {
     --background: rgb(22, 25, 36);
+    --dark-background: rgb(47, 48, 58);
     --card-background: #333;
     --text-color: #aeaeac;
     --input-text-color: rgba(254, 254, 252, 0.6);
+    --text-color-disabled: rgba(254, 254, 252, 0.5);
     --code-background: rgba(254, 254, 252, 0.05);
     --sidebar-background: #ffffff0d;
     --border-color: rgba(254, 254, 252, 0.1);
     --input-background: rgb(57, 59, 68);
-    --text-color: #ccc;
     --text-grey-color: #999;
     --border-color: #333;
     --disabled: #444;
     --text-disabled: #555;
+    --secondary: #fffbe8;
   }
 }