From fa67271ae8dfab7d941739d040ffc10cf0b5b55f Mon Sep 17 00:00:00 2001 From: metacryst Date: Mon, 10 Nov 2025 09:02:24 -0600 Subject: [PATCH] light mode better colors --- ui/_/code/shared.css | 3 +++ ui/site/apps/Forum/Forum.js | 14 +++++++------- ui/site/apps/Jobs/Jobs.js | 6 +++--- ui/site/apps/Jobs/JobsGrid.js | 6 +++--- ui/site/apps/Jobs/JobsSidebar.js | 6 +++--- ui/site/apps/Market/Market.js | 6 +++--- ui/site/apps/Market/MarketGrid.js | 4 ++-- ui/site/apps/Messages.js | 14 +++++++------- ui/site/components/Home.js | 4 ++-- ui/site/components/InputBox.js | 2 +- ui/site/components/Sidebar.js | 4 ++-- 11 files changed, 36 insertions(+), 33 deletions(-) diff --git a/ui/_/code/shared.css b/ui/_/code/shared.css index c3819b5..62165b6 100644 --- a/ui/_/code/shared.css +++ b/ui/_/code/shared.css @@ -10,12 +10,15 @@ --darkbrown: #60320c; --orange: #FE9201; --periwinkle: #655BAF; + + --accent2: var(--green); } @media (prefers-color-scheme: dark) { :root { --main: #251D44; --accent: #AF7323; + --accent2: var(--periwinkle); } } diff --git a/ui/site/apps/Forum/Forum.js b/ui/site/apps/Forum/Forum.js index 6d80091..6c6c3b9 100644 --- a/ui/site/apps/Forum/Forum.js +++ b/ui/site/apps/Forum/Forum.js @@ -48,7 +48,7 @@ class Messages extends Shadow { .paddingRight(2, em) .paddingTop(2, em) .gap(0, em) - .borderRight("1px solid var(--periwinkle)") + .borderRight("1px solid var(--accent2)") VStack(() => { h3("Conversations") @@ -69,11 +69,11 @@ class Messages extends Shadow { .paddingRight(2, em) .paddingTop(2, em) .gap(0, em) - .borderRight("1px solid var(--periwinkle)") + .borderRight("1px solid var(--accent2)") }) .width(100, "%") .x(0).y(13, vh) - .borderTop("1px solid var(--periwinkle)") + .borderTop("1px solid var(--accent2)") p("0 Items") .position("absolute") @@ -88,7 +88,7 @@ class Messages extends Shadow { .fontSize(1.1, em) .paddingLeft(1.3, em) .background("transparent") - .border("1px solid var(--periwinkle)") + .border("1px solid var(--accent2)") .outline("none") .color("var(--accent)") .borderRadius(10, px) @@ -97,7 +97,7 @@ class Messages extends Shadow { .marginLeft(2, em) .borderRadius(10, px) .background("transparent") - .border("1px solid var(--periwinkle)") + .border("1px solid var(--accent2)") .color("var(--accent)") .fontFamily("Bona Nova") .onHover(function (hovering) { @@ -115,7 +115,7 @@ class Messages extends Shadow { .marginLeft(1, em) .borderRadius(10, px) .background("transparent") - .border("1px solid var(--periwinkle)") + .border("1px solid var(--accent2)") .color("var(--accent)") .fontFamily("Bona Nova") .onHover(function (hovering) { @@ -150,7 +150,7 @@ class Messages extends Shadow { .alignItems("center") .width(1.5, em) .height(1.5, em) - .border("1px solid var(--periwinkle)") + .border("1px solid var(--accent2)") .borderRadius(100, "%") p(name) .marginLeft(1, em) diff --git a/ui/site/apps/Jobs/Jobs.js b/ui/site/apps/Jobs/Jobs.js index 83601af..bc058da 100644 --- a/ui/site/apps/Jobs/Jobs.js +++ b/ui/site/apps/Jobs/Jobs.js @@ -61,7 +61,7 @@ class Jobs extends Shadow { .fontSize(1.1, em) .paddingLeft(1.3, em) .background("transparent") - .border("1px solid var(--periwinkle)") + .border("1px solid var(--accent2)") .outline("none") .color("var(--accent)") .borderRadius(10, px) @@ -70,7 +70,7 @@ class Jobs extends Shadow { .marginLeft(2, em) .borderRadius(10, px) .background("transparent") - .border("1px solid var(--periwinkle)") + .border("1px solid var(--accent2)") .color("var(--accent)") .fontFamily("Bona Nova") .onHover(function (hovering) { @@ -88,7 +88,7 @@ class Jobs extends Shadow { .marginLeft(1, em) .borderRadius(10, px) .background("transparent") - .border("1px solid var(--periwinkle)") + .border("1px solid var(--accent2)") .color("var(--accent)") .fontFamily("Bona Nova") .onHover(function (hovering) { diff --git a/ui/site/apps/Jobs/JobsGrid.js b/ui/site/apps/Jobs/JobsGrid.js index 0c0b5d0..d9cc164 100644 --- a/ui/site/apps/Jobs/JobsGrid.js +++ b/ui/site/apps/Jobs/JobsGrid.js @@ -21,7 +21,7 @@ class JobsGrid extends Shadow { .marginTop(0.1, em) .marginBottom(1, em) .marginLeft(0.4, em) - .color("var(--periwinkle)") + .color("var(--accent2)") if (this.jobs.length > 0) { ZStack(() => { @@ -37,7 +37,7 @@ class JobsGrid extends Shadow { p(this.boldUntilFirstSpace(this.jobs[i].salary)) }) .padding(1, em) - .border("1px solid var(--periwinkle)") + .border("1px solid var(--accent2)") .borderRadius(5, "px") } }) @@ -54,7 +54,7 @@ class JobsGrid extends Shadow { .paddingTop(2, em) .gap(0, em) .width(100, "%") - .borderTop("1px solid var(--periwinkle)") + .borderTop("1px solid var(--accent2)") } } diff --git a/ui/site/apps/Jobs/JobsSidebar.js b/ui/site/apps/Jobs/JobsSidebar.js index b557bd5..8176c10 100644 --- a/ui/site/apps/Jobs/JobsSidebar.js +++ b/ui/site/apps/Jobs/JobsSidebar.js @@ -2,7 +2,7 @@ class JobsSidebar extends Shadow { render() { VStack(() => { h3("Location") - .color("var(--periwinkle)") + .color("var(--accent2)") }) @@ -10,8 +10,8 @@ class JobsSidebar extends Shadow { .paddingLeft(3, em) .paddingRight(3, em) .gap(1, em) - .borderRight("1px solid var(--periwinkle)") - .borderTop("1px solid var(--periwinkle)") + .borderRight("1px solid var(--accent2)") + .borderTop("1px solid var(--accent2)") .minWidth(10, vw) } } diff --git a/ui/site/apps/Market/Market.js b/ui/site/apps/Market/Market.js index cf9736c..6b15c93 100644 --- a/ui/site/apps/Market/Market.js +++ b/ui/site/apps/Market/Market.js @@ -57,7 +57,7 @@ class Market extends Shadow { .fontSize(1.1, em) .paddingLeft(1.3, em) .background("transparent") - .border("1px solid var(--periwinkle)") + .border("1px solid var(--accent2)") .outline("none") .color("var(--accent)") .borderRadius(10, px) @@ -66,7 +66,7 @@ class Market extends Shadow { .marginLeft(2, em) .borderRadius(10, px) .background("transparent") - .border("1px solid var(--periwinkle)") + .border("1px solid var(--accent2)") .color("var(--accent)") .fontFamily("Bona Nova") .onHover(function (hovering) { @@ -84,7 +84,7 @@ class Market extends Shadow { .marginLeft(1, em) .borderRadius(10, px) .background("transparent") - .border("1px solid var(--periwinkle)") + .border("1px solid var(--accent2)") .color("var(--accent)") .fontFamily("Bona Nova") .onHover(function (hovering) { diff --git a/ui/site/apps/Market/MarketGrid.js b/ui/site/apps/Market/MarketGrid.js index 089fc61..151bc0d 100644 --- a/ui/site/apps/Market/MarketGrid.js +++ b/ui/site/apps/Market/MarketGrid.js @@ -22,7 +22,7 @@ class MarketGrid extends Shadow { .marginTop(0.1, em) .marginBottom(1, em) .marginLeft(0.4, em) - .color("var(--periwinkle)") + .color("var(--accent2)") if (this.listings.length > 0) { ZStack(() => { @@ -77,7 +77,7 @@ class MarketGrid extends Shadow { }) .padding(1, em) - .border("1px solid var(--periwinkle)") + .border("1px solid var(--accent2)") .borderRadius(5, "px") } }) diff --git a/ui/site/apps/Messages.js b/ui/site/apps/Messages.js index 6d80091..6c6c3b9 100644 --- a/ui/site/apps/Messages.js +++ b/ui/site/apps/Messages.js @@ -48,7 +48,7 @@ class Messages extends Shadow { .paddingRight(2, em) .paddingTop(2, em) .gap(0, em) - .borderRight("1px solid var(--periwinkle)") + .borderRight("1px solid var(--accent2)") VStack(() => { h3("Conversations") @@ -69,11 +69,11 @@ class Messages extends Shadow { .paddingRight(2, em) .paddingTop(2, em) .gap(0, em) - .borderRight("1px solid var(--periwinkle)") + .borderRight("1px solid var(--accent2)") }) .width(100, "%") .x(0).y(13, vh) - .borderTop("1px solid var(--periwinkle)") + .borderTop("1px solid var(--accent2)") p("0 Items") .position("absolute") @@ -88,7 +88,7 @@ class Messages extends Shadow { .fontSize(1.1, em) .paddingLeft(1.3, em) .background("transparent") - .border("1px solid var(--periwinkle)") + .border("1px solid var(--accent2)") .outline("none") .color("var(--accent)") .borderRadius(10, px) @@ -97,7 +97,7 @@ class Messages extends Shadow { .marginLeft(2, em) .borderRadius(10, px) .background("transparent") - .border("1px solid var(--periwinkle)") + .border("1px solid var(--accent2)") .color("var(--accent)") .fontFamily("Bona Nova") .onHover(function (hovering) { @@ -115,7 +115,7 @@ class Messages extends Shadow { .marginLeft(1, em) .borderRadius(10, px) .background("transparent") - .border("1px solid var(--periwinkle)") + .border("1px solid var(--accent2)") .color("var(--accent)") .fontFamily("Bona Nova") .onHover(function (hovering) { @@ -150,7 +150,7 @@ class Messages extends Shadow { .alignItems("center") .width(1.5, em) .height(1.5, em) - .border("1px solid var(--periwinkle)") + .border("1px solid var(--accent2)") .borderRadius(100, "%") p(name) .marginLeft(1, em) diff --git a/ui/site/components/Home.js b/ui/site/components/Home.js index 12d5c0d..4005cbc 100644 --- a/ui/site/components/Home.js +++ b/ui/site/components/Home.js @@ -57,7 +57,7 @@ class Home extends Shadow { .top("5vh") .right("2em") .background("transparent") - .border(window.location.pathname === "/" ? "1px solid var(--tan)" : "1px solid var(--periwinkle)") + .border(window.location.pathname === "/" ? "1px solid var(--tan)" : "1px solid var(--accent2)") .color(window.location.pathname === "/" ? "var(--tan)" : "var(--accent)") .borderRadius(5, px) .onHover(function (hovering) { @@ -72,7 +72,7 @@ class Home extends Shadow { this.style.border = "1px solid var(--tan)" this.style.color = "var(--tan)" } else { - this.style.border = "1px solid var(--periwinkle)" + this.style.border = "1px solid var(--accent2)" this.style.color = "var(--accent)" } }) diff --git a/ui/site/components/InputBox.js b/ui/site/components/InputBox.js index f8c84e6..279a78c 100644 --- a/ui/site/components/InputBox.js +++ b/ui/site/components/InputBox.js @@ -9,7 +9,7 @@ css(` .input { width: 100%; - background-color: var(--periwinkle); + background-color: var(--accent2); opacity: 0.5; border-radius: 12px; border: none; diff --git a/ui/site/components/Sidebar.js b/ui/site/components/Sidebar.js index c3a9e1b..58d1b82 100644 --- a/ui/site/components/Sidebar.js +++ b/ui/site/components/Sidebar.js @@ -5,7 +5,7 @@ css(` left: 0; height: 100vh; width: 16vw; - border-right: 0.5px solid var(--periwinkle); + border-right: 0.5px solid var(--accent2); display: flex; flex-direction: column; padding-top: 13vh; @@ -14,7 +14,7 @@ css(` side-bar button { color: var(--darkbrown); margin: 1.5em; - background-color: color-mix(in srgb, var(--periwinkle) 35%, var(--orange) 65%); + background-color: color-mix(in srgb, var(--accent2) 35%, var(--orange) 65%); border: 1px solid var(--orange); border-radius: 12px; padding: 0.5em;