Add more button/navbar colors and gradient mix section to theme editor

src/components/theme-vars.tsx

@@ -23,10 +23,16 @@ export async function ThemeVars() {
     buttonColor,
     buttonText,
     buttonSecondary,
+    buttonSecondaryText,
     buttonDanger,
+    buttonDangerText,
+    buttonOutline,
+    buttonOutlineText,
     linkColor,
     linkHover,
     borderColor,
+    gradientFrom,
+    gradientTo,
     borderRadius,
     fontKey,
     h1,
@@ -50,10 +56,16 @@ export async function ThemeVars() {
     g("button_primary_color", "#f59e0b"),
     g("button_text_color", "#1e293b"),
     g("button_secondary_color", "#22c55e"),
+    g("button_secondary_text_color", "#ffffff"),
     g("button_danger_color", "#ef4444"),
+    g("button_danger_text_color", "#ffffff"),
+    g("button_outline_color", "#eeb425"),
+    g("button_outline_text_color", "#1a1a2e"),
     g("link_color", "#eeb425"),
     g("link_hover_color", "#cf9d15"),
     g("border_color", "#eeb425"),
+    g("gradient_from", "#f59e0b"),
+    g("gradient_to", "#10b981"),
     g("border_radius", "12"),
     g("font_family", "nunito"),
     g("size_heading_h1", "30"),
@@ -85,10 +97,16 @@ export async function ThemeVars() {
 --button-color:${safe(buttonColor, "#f59e0b")};
 --button-text-color:${safe(buttonText, "#1e293b")};
 --button-secondary-color:${safe(buttonSecondary, "#22c55e")};
+--button-secondary-text-color:${safe(buttonSecondaryText, "#ffffff")};
 --button-danger-color:${safe(buttonDanger, "#ef4444")};
+--button-danger-text-color:${safe(buttonDangerText, "#ffffff")};
+--button-outline-color:${safe(buttonOutline, "#eeb425")};
+--button-outline-text-color:${safe(buttonOutlineText, "#1a1a2e")};
 --link-color:${safe(linkColor, "#eeb425")};
 --link-hover-color:${safe(linkHover, "#cf9d15")};
 --border-color:${safe(borderColor, "#eeb425")};
+--gradient-from:${safe(gradientFrom, "#f59e0b")};
+--gradient-to:${safe(gradientTo, "#10b981")};
 --border-radius:${px(borderRadius, "12")}px;
 --font-family:${font.stack};
 --size-heading-h1:${px(h1, "30")}px;