Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-05-05 20:56:13 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Properly clamp secondary color

Browse Source
This commit is contained in:
hfcRed 2026-01-25 15:03:14 +01:00
parent 711eb08756
commit 07efd10a86
4 changed files with 55 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/components/CustomThemeSelector.tsx
View File

@ -68,13 +68,13 @@ export function themeInputFromCustomTheme(
customTheme: CustomTheme,
): ThemeInput {
return {
baseHue: customTheme["--base-h"] ?? DEFAULT_THEME_INPUT.baseHue,
baseHue: customTheme["--_base-h"] ?? DEFAULT_THEME_INPUT.baseHue,
baseChroma:
(customTheme["--base-c-1"] ?? 0) / BASE_CHROMA_MULTIPLIERS[1] ||
(customTheme["--_base-c-1"] ?? 0) / BASE_CHROMA_MULTIPLIERS[1] ||
DEFAULT_THEME_INPUT.baseChroma,
accentHue: customTheme["--acc-h"] ?? DEFAULT_THEME_INPUT.accentHue,
accentHue: customTheme["--_acc-h"] ?? DEFAULT_THEME_INPUT.accentHue,
accentChroma:
(customTheme["--acc-c-1"] ?? 0) / ACCENT_CHROMA_MULTIPLIERS[1] ||
(customTheme["--_acc-c-1"] ?? 0) / ACCENT_CHROMA_MULTIPLIERS[1] ||
DEFAULT_THEME_INPUT.accentChroma,
};
}

7
app/db/tables.ts
View File

@ -52,6 +52,13 @@ export const CUSTOM_THEME_VARS = [
"--_acc-c-3",
"--_acc-c-4",
"--_acc-c-5",
"--_second-h",
"--_second-c-0",
"--_second-c-1",
"--_second-c-2",
"--_second-c-3",
"--_second-c-4",
"--_second-c-5",
] as const;
export type CustomThemeVar = (typeof CUSTOM_THEME_VARS)[number];
export type CustomTheme = Record<CustomThemeVar, number>;

32
app/styles/vars.css
View File

@ -26,6 +26,14 @@ html {
--_acc-c-4: 0.2616;
--_acc-c-5: 0.1344;
--_second-h: 90;
--_second-c-0: 0.05295305624247283;
--_second-c-1: 0.10680119733498437;
--_second-c-2: 0.0816;
--_second-c-3: 0.06;
--_second-c-4: 0.10814382461004245;
--_second-c-5: 0.06493861022758024;
--_radius-box: 3;
--_radius-field: 2;
--_radius-selector: 2;
@ -76,9 +84,15 @@ html.dark {
--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-second-low: oklch(from var(--color-accent-low) l c calc(h + 180));
--color-second: oklch(from var(--color-accent) l c calc(h + 180));
--color-second-high: oklch(from var(--color-accent-high) l c calc(h + 180));
--color-second-low: oklch(
from var(--color-accent-low) l var(--_second-c-0) var(--_second-h)
);
--color-second: oklch(
from var(--color-accent) l var(--_second-c-1) var(--_second-h)
);
--color-second-high: oklch(
from var(--color-accent-high) l var(--_second-c-2) var(--_second-h)
);
--color-text-accent: var(--color-accent-high);
--color-text-second: var(--color-second-high);
@ -120,9 +134,15 @@ html.light {
--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-second-low: oklch(from var(--color-accent-low) l c calc(h + 180));
--color-second: oklch(from var(--color-accent) l c calc(h + 180));
--color-second-high: oklch(from var(--color-accent-high) l c calc(h + 180));
--color-second-low: oklch(
from var(--color-accent-low) l var(--_second-c-0) var(--_second-h)
);
--color-second: oklch(
from var(--color-accent) l var(--_second-c-1) var(--_second-h)
);
--color-second-high: oklch(
from var(--color-accent-high) l var(--_second-c-2) var(--_second-h)
);
--color-text-accent: var(--color-accent);
--color-text-second: var(--color-second);

18
app/utils/oklch-gamut.ts
View File

@ -292,6 +292,17 @@ export function clampThemeToGamut(input: ThemeInput): CustomTheme {
},
);
const secondaryHue = (input.accentHue + 180) % 360;
const secondaryHueRadians = secondaryHue * (Math.PI / 180);
const clampedSecondaryChromas = ACCENT_LIGHTNESS_VALUES.map(
(lightness, index) => {
const desiredChroma =
input.accentChroma * ACCENT_CHROMA_MULTIPLIERS[index];
return clampChromaForColor(lightness, desiredChroma, secondaryHueRadians);
},
);
return {
"--_base-h": input.baseHue,
"--_base-c-0": clampedBaseChromas[0],
@ -309,5 +320,12 @@ export function clampThemeToGamut(input: ThemeInput): CustomTheme {
"--_acc-c-3": clampedAccentChromas[3],
"--_acc-c-4": clampedAccentChromas[4],
"--_acc-c-5": clampedAccentChromas[5],
"--_second-h": secondaryHue,
"--_second-c-0": clampedSecondaryChromas[0],
"--_second-c-1": clampedSecondaryChromas[1],
"--_second-c-2": clampedSecondaryChromas[2],
"--_second-c-3": clampedSecondaryChromas[3],
"--_second-c-4": clampedSecondaryChromas[4],
"--_second-c-5": clampedSecondaryChromas[5],
};
}