1// Mixed with the page background: raw dark-mode tints look saturated.
2const tint = (color: string) =>
3 `color-mix(in oklab, var(--surface-${color}-3) 40%, var(--surface-base))`;
4
5// Scaled so small swatches still show a few repeats.
6const cell = (size: number) =>
7 `calc(${size}px * var(--banner-pattern-scale, 1))`;
8
9// keep in sync with OD Settings banner_preset options and BannerPicker.vue labels
10export const BANNER_PRESETS = [
11 {
12 name: "Lines",
13 background: `repeating-linear-gradient(135deg, var(--outline-gray-2) 0 1px, transparent 1px ${cell(
14 10
15 )}), ${tint("gray")}`,
16 },
17 { name: "Gray", background: tint("gray") },
18 { name: "Blue", background: tint("blue") },
19 { name: "Violet", background: tint("violet") },
20] as const;
21
22export function findBannerPreset(name?: string | null) {
23 return BANNER_PRESETS.find((preset) => preset.name === name);
24}
25