104 lines
4.1 KiB
JavaScript
104 lines
4.1 KiB
JavaScript
|
/**
|
||
|
|
* Fixed set of theme presets for the theme-picker field. No custom color
|
||
|
|
* picker — exactly these 10 predetermined options. Each preset is a hue;
|
||
|
|
* the main background gradient is mostly two vivid, saturated stops of
|
||
|
|
* that hue (like FleekDash's "Fresh"/"Sunrise" palette bars), only
|
||
|
|
* dipping to a near-black anchor in the last stretch — not a 50/50
|
||
|
|
* dark-to-vivid split, which reads washed out rather than "poppy".
|
||
|
|
* Cards/borders/text derive as solid, more muted shades of the primary
|
||
|
|
* hue so the gradient stays a deliberate hero background rather than
|
||
|
|
* making every surface busy.
|
||
|
|
*/
|
||
|
|
export const themePresets = [
|
||
|
|
{ id: 'indigo', label: 'Indigo', hue: 235 },
|
||
|
|
{ id: 'sky', label: 'Sky', hue: 205 },
|
||
|
|
{ id: 'teal', label: 'Teal', hue: 175 },
|
||
|
|
{ id: 'forest', label: 'Forest', hue: 140 },
|
||
|
|
{ id: 'lime', label: 'Lime', hue: 95 },
|
||
|
|
{ id: 'amber', label: 'Amber', hue: 45 },
|
||
|
|
{ id: 'orange', label: 'Orange', hue: 22 },
|
||
|
|
{ id: 'rose', label: 'Rose', hue: 345 },
|
||
|
|
{ id: 'berry', label: 'Berry', hue: 320 },
|
||
|
|
{ id: 'violet', label: 'Violet', hue: 265 },
|
||
|
|
// Two flat neutrals, no gradient — for anyone who finds the color
|
||
|
|
// themes above too much. Same values the shell originally shipped with
|
||
|
|
// before theme presets existed (zinc dark / zinc light).
|
||
|
|
{
|
||
|
|
id: 'mono',
|
||
|
|
label: 'Black & Grey',
|
||
|
|
palette: {
|
||
|
|
'--aurora-app-bg': '#09090b',
|
||
|
|
'--aurora-app-bg-solid': '#09090b',
|
||
|
|
'--aurora-bg': '#18181b',
|
||
|
|
'--aurora-card-bg': '#1f1f23',
|
||
|
|
'--aurora-card-bg-deep': '#131316',
|
||
|
|
'--aurora-bg-subtle': '#27272a',
|
||
|
|
'--aurora-text': '#f4f4f5',
|
||
|
|
'--aurora-text-muted': '#a1a1aa',
|
||
|
|
'--aurora-border': '#27272a',
|
||
|
|
'--aurora-card-border': '#2e2e33',
|
||
|
|
'--aurora-frame-bg': '#1c1c20',
|
||
|
|
'--aurora-frame-border': '#34343b',
|
||
|
|
'--aurora-accent': 'rgb(125 158 255)',
|
||
|
|
'--aurora-accent-soft': 'rgb(125 158 255 / 0.14)',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 'white',
|
||
|
|
label: 'White',
|
||
|
|
palette: {
|
||
|
|
'--aurora-app-bg': '#fafafa',
|
||
|
|
'--aurora-app-bg-solid': '#fafafa',
|
||
|
|
'--aurora-bg': '#ffffff',
|
||
|
|
'--aurora-card-bg': '#fafafa',
|
||
|
|
'--aurora-card-bg-deep': '#f0f0f2',
|
||
|
|
'--aurora-bg-subtle': '#f4f4f5',
|
||
|
|
'--aurora-text': '#18181b',
|
||
|
|
'--aurora-text-muted': '#71717a',
|
||
|
|
'--aurora-border': '#e4e4e7',
|
||
|
|
'--aurora-card-border': '#ececef',
|
||
|
|
'--aurora-frame-bg': '#ffffff',
|
||
|
|
'--aurora-frame-border': '#e0e0e3',
|
||
|
|
'--aurora-accent': 'rgb(71 114 250)',
|
||
|
|
'--aurora-accent-soft': 'rgb(71 114 250 / 0.1)',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
const hsl = (h, s, l, a) =>
|
||
|
|
a === undefined ? `hsl(${h} ${s}% ${l}%)` : `hsl(${h} ${s}% ${l}% / ${a})`;
|
||
|
|
|
||
|
|
/** The full set of --aurora-* color tokens for a preset. */
|
||
|
|
export function buildPalette(preset) {
|
||
|
|
if (preset.palette) return preset.palette;
|
||
|
|
const { hue } = preset;
|
||
|
|
// Two vivid, bright stops of the same hue family carry most of the bar
|
||
|
|
// (0% → 55%); the near-black anchor only takes over in the final
|
||
|
|
// stretch (100%). That's the "mostly color, dark tail" look the
|
||
|
|
// FleekDash palette bars have — full saturation start to middle keeps
|
||
|
|
// it feeling poppy instead of muddy.
|
||
|
|
const hue2 = (hue + 35) % 360;
|
||
|
|
const solidAppBg = hsl(hue, 45, 16);
|
||
|
|
return {
|
||
|
|
'--aurora-app-bg': `linear-gradient(135deg, ${hsl(hue, 78, 48)} 0%, ${hsl(hue2, 78, 45)} 55%, ${hsl(hue, 32, 9)} 100%)`,
|
||
|
|
'--aurora-app-bg-solid': solidAppBg,
|
||
|
|
'--aurora-bg': hsl(hue, 40, 20),
|
||
|
|
'--aurora-card-bg': hsl(hue, 36, 24),
|
||
|
|
'--aurora-card-bg-deep': hsl(hue, 38, 14),
|
||
|
|
'--aurora-bg-subtle': hsl(hue, 32, 28),
|
||
|
|
'--aurora-text': hsl(hue, 20, 97),
|
||
|
|
'--aurora-text-muted': hsl(hue, 14, 74),
|
||
|
|
'--aurora-border': hsl(hue, 28, 30),
|
||
|
|
'--aurora-card-border': hsl(hue, 26, 33),
|
||
|
|
'--aurora-frame-bg': hsl(hue, 34, 22),
|
||
|
|
'--aurora-frame-border': hsl(hue, 26, 33),
|
||
|
|
'--aurora-accent': hsl(hue, 85, 62),
|
||
|
|
'--aurora-accent-soft': hsl(hue, 85, 62, 0.16),
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Resolve a theme_preset id to the preset object (falls back to the first preset). */
|
||
|
|
export function resolvePreset(themePresetId) {
|
||
|
|
return themePresets.find((p) => p.id === themePresetId) || themePresets[0];
|
||
|
|
}
|