ui: start implementing white theme

apps/frontend/src/frontend/view.gleam

@@ -22,8 +22,6 @@ fn layout(attributes, children) {
  sketch.grid_template_columns("auto 1fr"),
  sketch.grid_template_rows("auto 1fr auto"),
  sketch.min_height(size.vh(100)),
- sketch.background("rgb(22, 25, 36)"),
- sketch.color(palette.dark.white),
  sketch.media(media.max_width(px(700)), [
  sketch.grid_template_areas("\"navbar\" \"main\" \"footer\""),
  sketch.grid_template_columns("1fr"),

apps/frontend/src/frontend/view/body/body.gleam

@@ -37,7 +37,7 @@ fn view_search_input(model: Model) {
  ]),
  h.div([a.class("search-title-with-hint")], [
  h.text("Gloogle"),
- h.div([a.class("pre-alpha-title")], [h.text("Alpha")]),
+ h.div([a.class("pre-alpha-title")], [h.text("Beta")]),
  ]),
  ]),
  h.text(frontend_strings.gloogle_description),
@@ -176,7 +176,7 @@ fn sidebar(model: Model) {
  a.style([
  #("background", case model.keep_functions {
  True -> "#ffaff3"
- False -> "rgba(254, 254, 252, .1)"
+ False -> "var(--input-background)"
  }),
  ]),
  ],
@@ -199,7 +199,7 @@ fn sidebar(model: Model) {
  a.style([
  #("background", case model.keep_types {
  True -> "#ffaff3"
- False -> "rgba(254, 254, 252, .1)"
+ False -> "var(--input-background)"
  }),
  ]),
  ],
@@ -222,7 +222,7 @@ fn sidebar(model: Model) {
  a.style([
  #("background", case model.keep_aliases {
  True -> "#ffaff3"
- False -> "rgba(254, 254, 252, .1)"
+ False -> "var(--input-background)"
  }),
  ]),
  ],
@@ -246,7 +246,7 @@ fn sidebar(model: Model) {
  a.style([
  #("background", case model.keep_documented {
  True -> "#ffaff3"
- False -> "rgba(254, 254, 252, .1)"
+ False -> "var(--input-background)"
  }),
  ]),
  ],
@@ -269,7 +269,7 @@ fn sidebar(model: Model) {
  a.style([
  #("background", case model.show_old_packages {
  True -> "#ffaff3"
- False -> "rgba(254, 254, 252, .1)"
+ False -> "var(--input-background)"
  }),
  ]),
  ],

apps/frontend/src/frontend/view/body/styles.gleam

@@ -389,23 +389,6 @@ pub fn main(attributes, children) {
  ])
 }
 
-pub fn search_sidebar(attributes, children) {
- let id = "search_sidebar"
- el.memo_dynamic("main", attributes, children, id, [
- s.grid_area("sidebar"),
- s.display("flex"),
- s.flex_direction("column"),
- s.padding(px(16)),
- s.border_right("1px solid #ffffff1a"),
- s.background("#ffffff0d"),
- s.width(px(320)),
- s.gap(px(16)),
- s.height(vh(100)),
- s.position("sticky"),
- s.top(px(0)),
- ])
-}
-
 pub fn sidebar_title(attrs, children) {
  let id = "sidebar_title"
  el.memo_dynamic("a", attrs, children, id, [

apps/frontend/src/frontend/view/search_input/styles.gleam

@@ -29,7 +29,7 @@ pub fn search_input_wrapper(loading: Bool, children) {
  s.property("background-size", "400% 400%"),
  s.transition("padding .3s"),
  s.animation("bg-spin 3s linear infinite"),
- s.border("1px solid rgba(77, 79, 87, 1)"),
+ s.border("1px solid var(--border-color)"),
  s.animation_play_state(case loading {
  True -> "running"
  False -> "paused"
@@ -44,14 +44,8 @@ pub fn search_input(loading, small, children) {
  s.display("flex"),
  s.gap(px(6)),
  s.border_radius(px(8)),
- s.color(case small {
- True -> "#fefefc"
- False -> palette.dark.charcoal
- }),
- s.background(case small {
- True -> "rgb(57,59,68)"
- False -> palette.dark.white
- }),
+ s.color("var(--input-text-color)"),
+ s.background("var(--input-background)"),
  s.transition("padding .3s"),
  s.align_items("baseline"),
  s.padding(

apps/frontend/src/frontend/view/types.gleam

@@ -31,5 +31,5 @@ pub fn dark_white(text: String) {
 }
 
 pub fn white(text: String) {
- span(text, palette.dark.white)
+ span(text, "var(--text-color)")
 }

apps/frontend/src/stylesheets/all.css

@@ -81,7 +81,7 @@ cache-signatures:has(:not(:defined)) {
  appearance: none;
  border: none;
  background: transparent;
- color: white;
+ color: var(--input-text-color);
  display: flex;
  align-items: center;
  gap: 12px;
@@ -123,10 +123,10 @@ cache-signatures:has(:not(:defined)) {
 }
 
 .search-body {
- background: rgba(254, 254, 252, 0.05);
+ background: var(--code-background);
  border-radius: 12px;
  padding: 12px 24px;
- border: 1px solid rgba(254, 254, 252, 0.1);
+ border: 1px solid var(--border-color);
 }
 
 @media (max-width: 700px) {
@@ -157,7 +157,7 @@ cache-signatures:has(:not(:defined)) {
 
 .search-result-separator {
  height: 1px;
- background: rgba(254, 254, 252, 0.1);
+ background: var(--border-color);
  margin: 6px 0;
 }
 
@@ -246,7 +246,7 @@ cache-signatures:has(:not(:defined)) {
 
 .matches-titles {
  line-height: 1.3;
- color: #aeaeac;
+ color: var(--text-color);
  display: flex;
  align-items: baseline;
  gap: 6px;
@@ -260,7 +260,6 @@ cache-signatures:has(:not(:defined)) {
 }
 
 .matches-title {
- color: #aeaeac;
  font-size: 18px;
 }
 
@@ -303,7 +302,7 @@ cache-signatures:has(:not(:defined)) {
  height: 100vh;
  overflow: auto;
  padding: 20px;
- border-right: 1px solid rgba(254, 254, 252, 0.1);
+ border-right: 1px solid var(--border-color);
  margin-bottom: -24px;
  mask: linear-gradient(
  180deg,
@@ -321,7 +320,7 @@ cache-signatures:has(:not(:defined)) {
 
 .sidebar-wrapper-title {
  padding: 4px 4px;
- color: #ffffff99;
+ color: var(--text-color);
 }
 
 .sidebar-package-name {
@@ -373,8 +372,8 @@ cache-signatures:has(:not(:defined)) {
  display: flex;
  flex-direction: column;
  padding: 16px;
- border-right: 1px solid #ffffff1a;
- background: #ffffff0d;
+ border-right: 1px solid var(--border-color);
+ background: var(--sidebar-background);
  width: 270px;
  gap: 16px;
  height: 100vh;
@@ -405,7 +404,7 @@ cache-signatures:has(:not(:defined)) {
 .sidebar-filter {
  padding-top: 12px;
  padding-left: 12px;
- color: rgba(254, 254, 252, 0.6);
+ color: var(--input-text-color);
 }
 
 .sidebar-filters {
@@ -418,7 +417,7 @@ cache-signatures:has(:not(:defined)) {
 .sidebar-checkbox-1 {
  width: 16px;
  height: 16px;
- border: 1px solid rgba(254, 254, 252, 0.1);
+ border: 1px solid var(--border-color);
  border-radius: 4px;
 }
 
@@ -435,7 +434,7 @@ cache-signatures:has(:not(:defined)) {
 
 .filter-separator {
  height: 1px;
- background: rgba(254, 254, 252, 0.1);
+ background: var(--border-color);
 }
 
 .sidebar-filter-line {
@@ -446,7 +445,7 @@ cache-signatures:has(:not(:defined)) {
 }
 
 .sidebar-filter-name {
- color: white;
+ color: var(-text-color);
 }
 
 .sidebar-links {
@@ -471,7 +470,7 @@ cache-signatures:has(:not(:defined)) {
 
 .sidebar-link {
  font-size: 14px;
- color: rgba(254, 254, 252, 0.6);
+ color: var(--input-text-color);
 }
 
 .items-wrapper {
@@ -544,7 +543,7 @@ cache-signatures:has(:not(:defined)) {
  bottom: 0px;
  padding: 12px;
  background-color: rgb(22, 25, 36);
- border: 1px solid rgba(254, 254, 252, 0.1);
+ border: 1px solid var(--border-color);
  margin-top: 24px;
 }
 

apps/frontend/src/stylesheets/hljs-theme.css

@@ -23,9 +23,9 @@ hue-6-2: #e6c07b
  overflow-x: auto;
  padding: 12px;
  color: #abb2bf;
- background: rgba(254, 254, 252, 0.05);
+ background: var(--code-background);
  border-radius: 12px;
- border: 1px solid rgba(254, 254, 252, 0.1);
+ border: 1px solid var(--border-color);
  line-height: 1.4;
  font-size: 14px;
 }

apps/frontend/src/stylesheets/main.css

@@ -16,10 +16,14 @@ body {
 }
 
 :root {
- --background: white;
+ --background: rgb(252, 251, 245);
  --card-background: #f6f6f6;
- --border-color: #eee;
- --input-background: #fcfcfc;
+ --text-color: rgb(21, 21, 21);
+ --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;
@@ -30,14 +34,24 @@ body {
  --link: #0074d9;
  --disabled: #ddd;
  --text-disabled: #333;
+
+ --hljs-red: rgb(184, 0, 0);
+ --hljs-purple: rgb(132, 0, 255);
+ --hljs-blue: rgba(0, 93, 232, 0.99);
+ --hljs-yellow: rgb(219, 168, 0);
+ --hljs-green: rgb(0, 168, 8);
 }
 
 @media (prefers-color-scheme: dark) {
  :root {
  --background: rgb(22, 25, 36);
  --card-background: #333;
- --border-color: #111;
- --input-background: #121212;
+ --text-color: #aeaeac;
+ --input-text-color: rgba(254, 254, 252, 0.6);
+ --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;