This commit is contained in:
1 parent
e85e4d74ea
commit
2e4ed76121
378 files changed
+22404
-20686
No files matched your search
+20
-13
@@ -1,7 +1,11 @@
|
||||
type Rgb = readonly [number, number, number];
|
||||
|
||||
export type PublicThemeColors = Record<string, string>;
|
||||
export interface ContrastPair { name: string; foreground: string; background: string }
|
||||
export interface ContrastPair {
|
||||
name: string;
|
||||
foreground: string;
|
||||
background: string;
|
||||
}
|
||||
|
||||
export interface AdminPalette {
|
||||
canvas: string;
|
||||
@@ -64,7 +68,9 @@ export function derivePublicForegrounds(c: PublicThemeColors) {
|
||||
const primary = value("color_primary", "#f59e0b");
|
||||
const accent = value("color_accent", "#10b981");
|
||||
const make = (name: string, preferred: string, bg: string): ContrastPair => ({
|
||||
name, foreground: readableColor(preferred, [bg]), background: bg,
|
||||
name,
|
||||
foreground: readableColor(preferred, [bg]),
|
||||
background: bg,
|
||||
});
|
||||
const pairs = [
|
||||
make("body", value("color_text", "#0f172a"), background),
|
||||
@@ -81,18 +87,23 @@ export function derivePublicForegrounds(c: PublicThemeColors) {
|
||||
make("primary", value("button_text_color", "#1e293b"), primary),
|
||||
make("accent", "#ffffff", accent),
|
||||
make("button-primary", value("button_text_color", "#1e293b"), value("button_primary_color", primary)),
|
||||
make("button-secondary", value("button_secondary_text_color", "#ffffff"), value("button_secondary_color", "#22c55e")),
|
||||
make("button-danger", value("button_danger_text_color", "#ffffff"), value("button_danger_color", "#ef4444")),
|
||||
make(
|
||||
"button-secondary",
|
||||
value("button_secondary_text_color", "#ffffff"),
|
||||
value("button_secondary_color", "#22c55e"),
|
||||
),
|
||||
make(
|
||||
"button-danger",
|
||||
value("button_danger_text_color", "#ffffff"),
|
||||
value("button_danger_color", "#ef4444"),
|
||||
),
|
||||
make("button-outline", value("button_outline_text_color", "#1a1a2e"), surface),
|
||||
make("pill", value("color_text", "#0f172a"), surface),
|
||||
make("badge", value("button_text_color", "#1e293b"), primary),
|
||||
make("overlay", "#ffffff", "#111827"),
|
||||
...(["success", "warning", "error", "info"] as const).flatMap((status) => {
|
||||
const statusColor = value(`color_${status}`, "#0f172a");
|
||||
return [
|
||||
make(`${status}-text`, statusColor, surface),
|
||||
make(`${status}-solid`, "#ffffff", statusColor),
|
||||
];
|
||||
return [make(`${status}-text`, statusColor, surface), make(`${status}-solid`, "#ffffff", statusColor)];
|
||||
}),
|
||||
];
|
||||
return { pairs, byName: Object.fromEntries(pairs.map((pair) => [pair.name, pair.foreground])) };
|
||||
@@ -108,11 +119,7 @@ export function contrastRatio(foreground: string, background: string): number |
|
||||
return (light + 0.05) / (dark + 0.05);
|
||||
}
|
||||
|
||||
export function readableColor(
|
||||
preferred: string,
|
||||
backgrounds: readonly string[],
|
||||
minimumRatio = 4.5,
|
||||
): string {
|
||||
export function readableColor(preferred: string, backgrounds: readonly string[], minimumRatio = 4.5): string {
|
||||
const preferredRatios = backgrounds.map((background) => contrastRatio(preferred, background));
|
||||
if (preferredRatios.some((ratio) => ratio === null)) return preferred;
|
||||
if (preferredRatios.every((ratio) => (ratio as number) >= minimumRatio)) return preferred;
|
||||
|
||||
Reference in new issue
Block a user