feat: make panel border color configurable via theme editor

- Add panel_border_color to THEME_COLOR_KEYS and base palettes
- Register panel-border-color CSS variable
- Fetch and inject panel_border_color in ThemeVars
- Add Panel border field to admin theme page
- Replace hardcoded #e9b124 with var(--panel-border-color) in UserView

src/lib/theme-css.ts

@@ -31,6 +31,7 @@ const CSS_VARIABLES: Record<keyof ThemePalette, string> = {
 	link_color: "link-color",
 	link_hover_color: "link-hover-color",
 	border_color: "border-color",
+	panel_border_color: "panel-border-color",
 	gradient_from: "gradient-from",
 	gradient_to: "gradient-to",
 };

src/lib/theme-presets.ts

@@ -73,6 +73,7 @@ export const THEME_COLOR_KEYS = [
 	"link_color",
 	"link_hover_color",
 	"border_color",
+	"panel_border_color",
 	"gradient_from",
 	"gradient_to",
 ] as const;
@@ -364,6 +365,7 @@ const LIGHT_BASE: ThemePalette = {
 	link_color: "#b77900",
 	link_hover_color: "#8a5b00",
 	border_color: "#eeb425",
+	panel_border_color: "#e9b124",
 	gradient_from: "#f59e0b",
 	gradient_to: "#10b981",
 };
@@ -397,6 +399,8 @@ function brandValues(source: Partial<ThemePalette>): Partial<ThemePalette> {
 		color_info: source.color_info,
 		button_primary_color: source.button_primary_color ?? source.color_primary,
 		border_color: source.border_color ?? source.color_primary,
+		panel_border_color:
+			source.panel_border_color ?? source.border_color ?? source.color_primary,
 		gradient_from: source.color_primary,
 		gradient_to: source.color_accent,
 		button_outline_color: source.border_color ?? source.color_primary,
@@ -412,6 +416,8 @@ function completePalette(
 		values.button_secondary_color ?? merged.color_accent;
 	merged.button_outline_color =
 		values.button_outline_color ?? merged.border_color;
+	merged.panel_border_color =
+		values.panel_border_color ?? merged.border_color;
 	merged.gradient_from = values.gradient_from ?? merged.color_primary;
 	merged.gradient_to = values.gradient_to ?? merged.color_accent;
 	return merged;