remco/EpicNext-Cms
1
1 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
openhands committed 2026-07-07 20:04:16 +02:00
1 parent e43a768ce4
commit f386ae2b25
4 files changed
+53 -8
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/admin/theme/page.tsx
+21 -4
View File
@@ -24,21 +24,30 @@ const COLOR_FIELDS: { key: string; label: string; def: string }[] = [
];
const BUTTON_FIELDS: { key: string; label: string; def: string }[] = [
{ key: "button_primary_color", label: "Button", def: "#f59e0b" },
{ key: "button_primary_color", label: "Primary button", def: "#f59e0b" },
{ key: "button_text_color", label: "Button text", def: "#1e293b" },
{ key: "button_secondary_color", label: "Secondary", def: "#22c55e" },
{ key: "button_danger_color", label: "Danger", def: "#ef4444" },
{ key: "button_secondary_color", label: "Secondary button", def: "#22c55e" },
{ key: "button_secondary_text_color", label: "Secondary text", def: "#ffffff" },
{ key: "button_danger_color", label: "Danger button", def: "#ef4444" },
{ key: "button_danger_text_color", label: "Danger text", def: "#ffffff" },
{ key: "button_outline_color", label: "Outline button", def: "#eeb425" },
{ key: "button_outline_text_color", label: "Outline text", def: "#1a1a2e" },
{ key: "link_color", label: "Link", def: "#eeb425" },
{ key: "link_hover_color", label: "Link hover", def: "#cf9d15" },
];
const GRADIENT_FIELDS: { key: string; label: string; def: string }[] = [
{ key: "gradient_from", label: "Gradient from", def: "#f59e0b" },
{ key: "gradient_to", label: "Gradient to", def: "#10b981" },
];
const HEADINGS: { key: string; label: string; def: string }[] = [
{ key: "size_heading_h1", label: "H1", def: "30" },
{ key: "size_heading_h2", label: "H2", def: "22" },
{ key: "size_heading_h3", label: "H3", def: "18" },
];
const ALL_COLORS = [...COLOR_FIELDS, ...BUTTON_FIELDS];
const ALL_COLORS = [...COLOR_FIELDS, ...BUTTON_FIELDS, ...GRADIENT_FIELDS];
function toHex(value: string | null, def: string): string {
return value && /^#[0-9a-fA-F]{6}$/.test(value) ? value : def;
@@ -166,6 +175,14 @@ export default async function AdminTheme({
</div>
</section>
<section className="mt-6">
<h2 className="admin-section-title">Gradient mix</h2>
<p className="text-xs text-[var(--color-text-muted)] mb-2">Control the card header and hero background gradients.</p>
<div className="admin-card">
{colorGrid(GRADIENT_FIELDS, current)}
</div>
</section>
<section className="mt-6">
<h2 className="admin-section-title">{t("typographyLayout")}</h2>
<div className="admin-card">
src/app/globals.css
+5 -3
View File
@@ -35,6 +35,8 @@
--color-error: #ef4444;
--color-info: #0ea5e9;
--color-danger: #ef4444;
--gradient-from: #f59e0b;
--gradient-to: #10b981;
--button-color: #eeb425;
--button-text-color: #1a1a2e;
--button-secondary-color: #22c55e;
@@ -288,7 +290,7 @@ a:hover {
font-size: 0.875rem;
}
.hero {
background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 14%, var(--color-navbar)), color-mix(in srgb, var(--color-accent) 8%, var(--color-navbar)));
background: linear-gradient(135deg, color-mix(in srgb, var(--gradient-from) 14%, var(--color-navbar)), color-mix(in srgb, var(--gradient-to) 8%, var(--color-navbar)));
border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
border-radius: var(--radius-lg);
padding: 2rem 2.25rem;
@@ -593,7 +595,7 @@ tbody tr:hover {
align-items: center;
gap: 0.75rem;
padding: 0.9rem 1.1rem;
background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-navbar)), color-mix(in srgb, var(--color-primary) 5%, var(--color-navbar)));
background: linear-gradient(135deg, color-mix(in srgb, var(--gradient-from) 10%, var(--color-navbar)), color-mix(in srgb, var(--gradient-to) 5%, var(--color-navbar)));
border-bottom: 1px solid color-mix(in srgb, var(--color-text-muted) 8%, transparent);
}
.content-card-icon {
@@ -604,7 +606,7 @@ tbody tr:hover {
display: grid;
place-items: center;
font-size: 1.25rem;
background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 22%, var(--color-navbar)), color-mix(in srgb, var(--color-primary) 12%, var(--color-navbar)));
background: linear-gradient(135deg, color-mix(in srgb, var(--gradient-from) 22%, var(--color-navbar)), color-mix(in srgb, var(--gradient-to) 12%, var(--color-navbar)));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.content-card-head-text {