opendesk

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