From 2e96ff71efac780341124ddb55acd5f45b776ccd Mon Sep 17 00:00:00 2001 From: hfcRed Date: Mon, 9 Mar 2026 18:04:06 +0100 Subject: [PATCH] Update colors --- app/components/CustomThemeSelector.tsx | 4 +-- app/components/SideNav.module.css | 8 ++--- app/styles/vars.css | 50 +++++++++++++------------- app/utils/oklch-gamut.ts | 8 ++--- 4 files changed, 35 insertions(+), 35 deletions(-) diff --git a/app/components/CustomThemeSelector.tsx b/app/components/CustomThemeSelector.tsx index 2b9c74b72..3dd4c324f 100644 --- a/app/components/CustomThemeSelector.tsx +++ b/app/components/CustomThemeSelector.tsx @@ -171,8 +171,8 @@ function themeInputFromString(str: string): ThemeInput | null { const DEFAULT_THEME_INPUT: ThemeInput = { baseHue: 268, - baseChroma: 0.076, - accentHue: 360, + baseChroma: 0.05, + accentHue: 253, accentChroma: 0.24, chatHue: null, radiusBox: 3, diff --git a/app/components/SideNav.module.css b/app/components/SideNav.module.css index 4068a63ac..f544a9765 100644 --- a/app/components/SideNav.module.css +++ b/app/components/SideNav.module.css @@ -22,7 +22,7 @@ .sideNavTop { height: var(--layout-nav-height); - background-color: var(--color-bg); + background-color: var(--color-bg-nav); border-bottom: 1.5px solid var(--color-border); display: flex; align-items: center; @@ -52,7 +52,7 @@ align-items: center; gap: var(--s-1); padding: var(--s-1-5) var(--s-3); - background-color: var(--color-bg-high); + background-color: var(--color-bg-nav); border-top: 1.5px solid var(--color-border); flex-shrink: 0; } @@ -73,7 +73,7 @@ } .sideNavFooterUser:hover { - background-color: var(--color-bg-higher); + background-color: var(--color-bg-high); } .sideNavFooterUsername { @@ -103,7 +103,7 @@ } .sideNavFooterButton:hover { - background-color: var(--color-bg-higher); + background-color: var(--color-bg-high); color: var(--color-text); } diff --git a/app/styles/vars.css b/app/styles/vars.css index 713f7378e..40964ca4e 100644 --- a/app/styles/vars.css +++ b/app/styles/vars.css @@ -19,29 +19,29 @@ use oklch-gamut.ts to generate valid color palettes! html { --_base-h: 268; --_base-c-0: 0; - --_base-c-1: 0.02418640252723488; - --_base-c-2: 0.047119999999999995; - --_base-c-3: 0.1064; - --_base-c-4: 0.09804; - --_base-c-5: 0.10336000000000001; - --_base-c-6: 0.09804; - --_base-c-7: 0.05092; + --_base-c-1: 0.02357547860966049; + --_base-c-2: 0.031; + --_base-c-3: 0.06999999999999999; + --_base-c-4: 0.0645; + --_base-c-5: 0.068; + --_base-c-6: 0.0645; + --_base-c-7: 0.0335; - --_acc-h: 360; - --_acc-c-0: 0.0912; - --_acc-c-1: 0.21186558872491915; + --_acc-h: 253; + --_acc-c-0: 0.0801740871856143; + --_acc-c-1: 0.1603481743712286; --_acc-c-2: 0.0816; --_acc-c-3: 0.06; - --_acc-c-4: 0.2145290094090161; - --_acc-c-5: 0.1288211858120959; + --_acc-c-4: 0.16343179310913686; + --_acc-c-5: 0.09867579961306376; - --_second-h: 180; - --_second-c-0: 0.047012120400352186; - --_second-c-1: 0.09481890384235897; + --_second-h: 73; + --_second-c-0: 0.055379201356259726; + --_second-c-1: 0.11075840271251945; --_second-c-2: 0.0816; --_second-c-3: 0.06; - --_second-c-4: 0.0960108984048409; - --_second-c-5: 0.05765298510196014; + --_second-c-4: 0.11288837199545253; + --_second-c-5: 0.06815901705385813; --_radius-box: 3; --_radius-field: 2; @@ -82,12 +82,12 @@ Any changes here NEED to be reflected in oklch-gamut.ts as well html.dark { --color-base-0: oklch(100% var(--_base-c-0) var(--_base-h)); --color-base-1: oklch(95% var(--_base-c-1) var(--_base-h)); - --color-base-2: oklch(81% var(--_base-c-2) var(--_base-h)); + --color-base-2: oklch(90% var(--_base-c-2) var(--_base-h)); --color-base-3: oklch(64% var(--_base-c-3) var(--_base-h)); --color-base-4: oklch(46% var(--_base-c-4) var(--_base-h)); - --color-base-5: oklch(34% var(--_base-c-5) var(--_base-h)); - --color-base-6: oklch(27% var(--_base-c-6) var(--_base-h)); - --color-base-7: oklch(21% var(--_base-c-7) var(--_base-h)); + --color-base-5: oklch(32% var(--_base-c-5) var(--_base-h)); + --color-base-6: oklch(25% var(--_base-c-6) var(--_base-h)); + --color-base-7: oklch(17% var(--_base-c-7) var(--_base-h)); --color-accent-low: oklch(26% var(--_acc-c-0) var(--_acc-h)); --color-accent: oklch(52% var(--_acc-c-1) var(--_acc-h)); @@ -130,12 +130,12 @@ html.dark { } html.light { - --color-base-0: oklch(21% var(--_base-c-7) var(--_base-h)); - --color-base-1: oklch(27% var(--_base-c-6) var(--_base-h)); - --color-base-2: oklch(34% var(--_base-c-5) var(--_base-h)); + --color-base-0: oklch(17% var(--_base-c-7) var(--_base-h)); + --color-base-1: oklch(25% var(--_base-c-6) var(--_base-h)); + --color-base-2: oklch(32% var(--_base-c-5) var(--_base-h)); --color-base-3: oklch(46% var(--_base-c-4) var(--_base-h)); --color-base-4: oklch(64% var(--_base-c-3) var(--_base-h)); - --color-base-5: oklch(81% var(--_base-c-2) var(--_base-h)); + --color-base-5: oklch(90% var(--_base-c-2) var(--_base-h)); --color-base-6: oklch(95% var(--_base-c-1) var(--_base-h)); --color-base-7: oklch(100% var(--_base-c-0) var(--_base-h)); diff --git a/app/utils/oklch-gamut.ts b/app/utils/oklch-gamut.ts index 47fb3442f..02a54f1e5 100644 --- a/app/utils/oklch-gamut.ts +++ b/app/utils/oklch-gamut.ts @@ -229,12 +229,12 @@ function maximum_chroma_for_lh(L: number, h: number): number { const BASE_LIGHTNESS_VALUES = [ 1.0, // --base-c-0 0.95, // --base-c-1 - 0.81, // --base-c-2 + 0.9, // --base-c-2 0.64, // --base-c-3 0.46, // --base-c-4 - 0.34, // --base-c-5 - 0.27, // --base-c-6 - 0.21, // --base-c-7 + 0.32, // --base-c-5 + 0.25, // --base-c-6 + 0.17, // --base-c-7 ] as const; const ACCENT_LIGHTNESS_VALUES = [