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;