feat(theme): VNClagoon brand theme (navy + cyan) as default, dark-first
Add builtin-vnclagoon theme (cyan #00D4FF accent on navy #0A0E1A, DM Sans body + Syne headings, self-hosted OFL fonts); set as default theme policy; default mode dark. Add VNCmail wordmark SVGs (on-dark/on-light) + wire logo/company via k8s secret template. Placeholder wordmark — swap official styleguide SVG. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Bernd Rodler
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
476c76c420
commit
22e5e97da9
@@ -874,7 +874,125 @@ body[data-theme-skin="builtin-aurora-glass"] [role="menu"] [role="menuitem"]:foc
|
||||
background-color: rgba(139, 123, 255, 0.22) !important;
|
||||
}`;
|
||||
|
||||
// "VNClagoon" — VNC's brand theme. Deep-navy grounds (#0A0E1A) with the
|
||||
// VNClagoon cyan (#00D4FF) as the single accent, DM Sans for body and Syne for
|
||||
// display. Dark is the brand-primary variant; the light variant deepens the
|
||||
// cyan (#00A5CC) so it stays legible on white. Fonts are self-hosted under
|
||||
// /fonts (OFL) so they render offline / behind the CSP.
|
||||
const vnclagoonCSS = `
|
||||
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/dmsans-400.woff2') format('woff2'); }
|
||||
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/dmsans-500.woff2') format('woff2'); }
|
||||
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/dmsans-700.woff2') format('woff2'); }
|
||||
@font-face { font-family: 'Syne'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/syne-700.woff2') format('woff2'); }
|
||||
@font-face { font-family: 'Syne'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/syne-800.woff2') format('woff2'); }
|
||||
:root {
|
||||
--color-border: #dce3ee;
|
||||
--color-input: #dce3ee;
|
||||
--color-ring: #00a5cc;
|
||||
--color-background: #ffffff;
|
||||
--color-foreground: #0a0e1a;
|
||||
--color-primary: #00a5cc;
|
||||
--color-primary-foreground: #ffffff;
|
||||
--color-secondary: #eef2f8;
|
||||
--color-secondary-foreground: #0a0e1a;
|
||||
--color-muted: #eef2f8;
|
||||
--color-muted-foreground: #5a6478;
|
||||
--color-accent: #e3f7fd;
|
||||
--color-accent-foreground: #006f8c;
|
||||
--color-destructive: #e5484d;
|
||||
--color-destructive-foreground: #ffffff;
|
||||
--color-popover: #ffffff;
|
||||
--color-popover-foreground: #0a0e1a;
|
||||
--color-sidebar: #f7f9fc;
|
||||
--color-sidebar-foreground: #0a0e1a;
|
||||
--color-sidebar-border: #dce3ee;
|
||||
--color-sidebar-accent: #eef2f8;
|
||||
--color-sidebar-accent-foreground: #0a0e1a;
|
||||
--color-card: #ffffff;
|
||||
--color-card-foreground: #0a0e1a;
|
||||
--color-success: #16a34a;
|
||||
--color-success-foreground: #ffffff;
|
||||
--color-warning: #ca8a04;
|
||||
--color-warning-foreground: #ffffff;
|
||||
--color-info: #00a5cc;
|
||||
--color-info-foreground: #ffffff;
|
||||
--color-selection: #e3f7fd;
|
||||
--color-selection-foreground: #006f8c;
|
||||
--color-unread: #00a5cc;
|
||||
--color-chart-1: #00a5cc;
|
||||
--color-chart-2: #16a34a;
|
||||
--color-chart-3: #ca8a04;
|
||||
--color-chart-4: #e5484d;
|
||||
--color-chart-5: #6d8bff;
|
||||
}
|
||||
.dark {
|
||||
--color-border: #1e2740;
|
||||
--color-input: #1e2740;
|
||||
--color-ring: #00d4ff;
|
||||
--color-background: #0a0e1a;
|
||||
--color-foreground: #e8ecf4;
|
||||
--color-primary: #00d4ff;
|
||||
--color-primary-foreground: #05121b;
|
||||
--color-secondary: #141b2e;
|
||||
--color-secondary-foreground: #e8ecf4;
|
||||
--color-muted: #141b2e;
|
||||
--color-muted-foreground: #8a97b0;
|
||||
--color-accent: #10263a;
|
||||
--color-accent-foreground: #7fe6ff;
|
||||
--color-destructive: #ff5a5f;
|
||||
--color-destructive-foreground: #ffffff;
|
||||
--color-popover: #111726;
|
||||
--color-popover-foreground: #e8ecf4;
|
||||
--color-sidebar: #080b14;
|
||||
--color-sidebar-foreground: #e8ecf4;
|
||||
--color-sidebar-border: #1e2740;
|
||||
--color-sidebar-accent: #141b2e;
|
||||
--color-sidebar-accent-foreground: #e8ecf4;
|
||||
--color-card: #111726;
|
||||
--color-card-foreground: #e8ecf4;
|
||||
--color-success: #22c55e;
|
||||
--color-success-foreground: #05121b;
|
||||
--color-warning: #f6c544;
|
||||
--color-warning-foreground: #05121b;
|
||||
--color-info: #00d4ff;
|
||||
--color-info-foreground: #05121b;
|
||||
--color-selection: rgba(0, 212, 255, 0.20);
|
||||
--color-selection-foreground: #7fe6ff;
|
||||
--color-unread: #00d4ff;
|
||||
--color-chart-1: #00d4ff;
|
||||
--color-chart-2: #22c55e;
|
||||
--color-chart-3: #f6c544;
|
||||
--color-chart-4: #ff5a5f;
|
||||
--color-chart-5: #6d8bff;
|
||||
}`;
|
||||
|
||||
// Syne display face on headings; DM Sans everywhere else. Scoped to the skin
|
||||
// so it detaches cleanly when the theme is switched off.
|
||||
const vnclagoonSkin = `
|
||||
body[data-theme-skin="builtin-vnclagoon"] {
|
||||
font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
|
||||
}
|
||||
body[data-theme-skin="builtin-vnclagoon"] h1,
|
||||
body[data-theme-skin="builtin-vnclagoon"] h2,
|
||||
body[data-theme-skin="builtin-vnclagoon"] h3 {
|
||||
font-family: "Syne", "DM Sans", sans-serif;
|
||||
letter-spacing: -0.01em;
|
||||
}`;
|
||||
|
||||
export const BUILTIN_THEMES: InstalledTheme[] = [
|
||||
{
|
||||
id: 'builtin-vnclagoon',
|
||||
name: 'VNClagoon',
|
||||
version: '1.0.0',
|
||||
author: 'VNC',
|
||||
description: 'VNClagoon brand theme — deep navy with cyan accent, DM Sans + Syne',
|
||||
css: vnclagoonCSS,
|
||||
skin: vnclagoonSkin,
|
||||
variants: ['light', 'dark'],
|
||||
typography: { fontSans: '"DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif' },
|
||||
enabled: true,
|
||||
builtIn: true,
|
||||
},
|
||||
{
|
||||
id: 'builtin-qui',
|
||||
name: 'Qui',
|
||||
|
||||
Reference in New Issue
Block a user