From a2321d8f59fce572d41f8de13961d7e9968134dd Mon Sep 17 00:00:00 2001 From: Guillaume Hivert Date: Thu, 18 Jul 2024 15:32:43 +0200 Subject: [PATCH] ui: use new color scheme --- apps/frontend/src/frontend/view/body/styles.gleam | 2 +- apps/frontend/src/frontend/view/footer/styles.gleam | 6 +++--- apps/frontend/src/frontend/view/navbar/styles.gleam | 6 +++--- .../src/frontend/view/search_input/styles.gleam | 9 ++++++--- apps/frontend/src/stylesheets/all.css | 11 ++++++----- apps/frontend/src/stylesheets/main.css | 8 ++++++-- 6 files changed, 25 insertions(+), 17 deletions(-) diff --git a/apps/frontend/src/frontend/view/body/styles.gleam b/apps/frontend/src/frontend/view/body/styles.gleam index bdf6cc0..f4bd558 100644 --- 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 index 597a9d9..15fb6ee 100644 --- 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 index 20c9166..8dfef24 100644 --- 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 index 806c941..468ca69 100644 --- 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 index b257e93..c0df15a 100644 --- 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 index 33832b2..703fedd 100644 --- 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; } }