From 28de23e77863d60bf3465666d6c1464e6ae97ae1 Mon Sep 17 00:00:00 2001 From: hfcRed Date: Mon, 9 Mar 2026 17:09:19 +0100 Subject: [PATCH] Flatten lightness values --- app/styles/vars.css | 40 ++++++++++++++++++++-------------------- app/utils/oklch-gamut.ts | 26 +++++++++++++------------- 2 files changed, 33 insertions(+), 33 deletions(-) diff --git a/app/styles/vars.css b/app/styles/vars.css index 2ef43da39..ca2703566 100644 --- a/app/styles/vars.css +++ b/app/styles/vars.css @@ -81,17 +81,17 @@ 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(94.873% var(--_base-c-1) var(--_base-h)); - --color-base-2: oklch(81.397% var(--_base-c-2) var(--_base-h)); - --color-base-3: oklch(63.785% var(--_base-c-3) var(--_base-h)); - --color-base-4: oklch(46.004% var(--_base-c-4) var(--_base-h)); - --color-base-5: oklch(34.138% var(--_base-c-5) var(--_base-h)); - --color-base-6: oklch(27.313% var(--_base-c-6) var(--_base-h)); - --color-base-7: oklch(20.97% var(--_base-c-7) 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-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-accent-low: oklch(25.912% var(--_acc-c-0) var(--_acc-h)); - --color-accent: oklch(52.262% var(--_acc-c-1) var(--_acc-h)); - --color-accent-high: oklch(83.419% var(--_acc-c-2) var(--_acc-h)); + --color-accent-low: oklch(26% var(--_acc-c-0) var(--_acc-h)); + --color-accent: oklch(52% var(--_acc-c-1) var(--_acc-h)); + --color-accent-high: oklch(83% var(--_acc-c-2) var(--_acc-h)); --color-second-low: oklch( from var(--color-accent-low) l var(--_second-c-0) var(--_second-h) @@ -130,18 +130,18 @@ html.dark { } html.light { - --color-base-0: oklch(20.97% var(--_base-c-7) var(--_base-h)); - --color-base-1: oklch(27.313% var(--_base-c-6) var(--_base-h)); - --color-base-2: oklch(34.138% var(--_base-c-5) var(--_base-h)); - --color-base-3: oklch(46.004% var(--_base-c-4) var(--_base-h)); - --color-base-4: oklch(63.785% var(--_base-c-3) var(--_base-h)); - --color-base-5: oklch(81.397% var(--_base-c-2) var(--_base-h)); - --color-base-6: oklch(94.873% var(--_base-c-1) var(--_base-h)); + --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-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-6: oklch(95% var(--_base-c-1) var(--_base-h)); --color-base-7: oklch(100% var(--_base-c-0) var(--_base-h)); - --color-accent-low: oklch(87.817% var(--_acc-c-3) var(--_acc-h)); - --color-accent: oklch(52.919% var(--_acc-c-4) var(--_acc-h)); - --color-accent-high: oklch(31.777% var(--_acc-c-5) var(--_acc-h)); + --color-accent-low: oklch(88% var(--_acc-c-3) var(--_acc-h)); + --color-accent: oklch(53% var(--_acc-c-4) var(--_acc-h)); + --color-accent-high: oklch(32% var(--_acc-c-5) var(--_acc-h)); --color-second-low: oklch( from var(--color-accent-low) l var(--_second-c-0) var(--_second-h) diff --git a/app/utils/oklch-gamut.ts b/app/utils/oklch-gamut.ts index 957507a1f..47fb3442f 100644 --- a/app/utils/oklch-gamut.ts +++ b/app/utils/oklch-gamut.ts @@ -228,22 +228,22 @@ function maximum_chroma_for_lh(L: number, h: number): number { const BASE_LIGHTNESS_VALUES = [ 1.0, // --base-c-0 - 0.94873, // --base-c-1 - 0.81397, // --base-c-2 - 0.63785, // --base-c-3 - 0.46004, // --base-c-4 - 0.34138, // --base-c-5 - 0.27313, // --base-c-6 - 0.2097, // --base-c-7 + 0.95, // --base-c-1 + 0.81, // --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 ] as const; const ACCENT_LIGHTNESS_VALUES = [ - 0.25912, // --acc-c-0: dark mode low - 0.52262, // --acc-c-1: dark mode mid - 0.83419, // --acc-c-2: dark mode high - 0.87817, // --acc-c-3: light mode low - 0.52919, // --acc-c-4: light mode mid - 0.31777, // --acc-c-5: light mode high + 0.26, // --acc-c-0: dark mode low + 0.52, // --acc-c-1: dark mode mid + 0.83, // --acc-c-2: dark mode high + 0.88, // --acc-c-3: light mode low + 0.53, // --acc-c-4: light mode mid + 0.32, // --acc-c-5: light mode high ] as const; export const BASE_CHROMA_MULTIPLIERS = [