+1 -1

app/globals.css

reviewed

··· 17 17 18 18 --highlight-1: 255, 177, 177; 19 19 --highlight-2: 253, 245, 203; 20 20 - --highlight-3: 224, 244, 255; 20 20 + --highlight-3: 255, 205, 195; 21 21 22 22 --list-marker-width: 36px; 23 23 --page-width-unitless: min(624, calc(var(--leaflet-width-unitless) - 12));

+3 -3

components/ThemeManager/ThemeProvider.tsx

reviewed

··· 31 31 "theme/primary": "#272727", 32 32 "theme/highlight-1": "#FFFFFF", 33 33 "theme/highlight-2": "#EDD280", 34 34 - "theme/highlight-3": "#9FC4C2", 34 34 + "theme/highlight-3": "#FFCDC3", 35 35 36 36 //everywhere else, accent-background = accent-1 and accent-text = accent-2. 37 37 // we just need to create a migration pipeline before we can change this ··· 98 98 } else { 99 99 el?.style.setProperty( 100 100 "--highlight-1", 101 101 - "color-mix(in oklab, rgb(var(--primary)), rgb(var(--bg-page)) 75%)", 101 101 + "color-mix(in oklab, rgb(var(--accent-contrast)), rgb(var(--bg-page)) 75%)", 102 102 ); 103 103 } 104 104 setCSSVariableToColor(el, "--accent-1", accent1); ··· 138 138 "--accent-1-is-contrast": accentContrast === accent1 ? 1 : 0, 139 139 "--highlight-1": highlight1 140 140 ? `rgb(${colorToString(parseColor(`hsba(${highlight1.data.value})`), "rgb")})` 141 141 - : "color-mix(in oklab, rgb(var(--primary)), rgb(var(--bg-page)) 75%)", 141 141 + : "color-mix(in oklab, rgb(var(--accent-contrast)), rgb(var(--bg-page)) 75%)", 142 142 "--highlight-2": colorToString(highlight2, "rgb"), 143 143 "--highlight-3": colorToString(highlight3, "rgb"), 144 144 } as CSSProperties