From 1c04dfdf8c26760be362cb6f7ecb66cb772ec740 Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Sun, 5 Jul 2026 17:50:04 -0500
Subject: [PATCH] feat(brand): BrandMark/Wordmark/Lockup consume the new SVGs

Brand.tsx (101 line churn) and brand.ts (47 line churn) now expose
the new SVG-first primitives:

- BrandMark: <img> with BRAND.assets.mark (vector, scales to any size).
- BrandWordmark: text fallback if the mark is unavailable.
- BrandLockup: the combined mark + wordmark for the layout chrome,
  honours the light/dark variant via CSS variables.
- BrandGlyph: unchanged but re-uses the new accent tokens.

brand.ts adds the new asset-path constants (mark, markMono, lockup,
lockupLight, socialPreview) and a tokens helper so the lockup can
switch variants without prop drilling.

This is commit 2 of the v0.42.0 follow-up batch. Depends on
720d31b (SVG assets).
---
 client/components/brand/Brand.tsx | 101 +++++++++++++++++++++++++++---
 client/lib/brand.ts               |  47 +++++++-------
 2 files changed, 116 insertions(+), 32 deletions(-)

diff --git a/client/components/brand/Brand.tsx b/client/components/brand/Brand.tsx
index 89680bf..5ec6bcb 100644
--- a/client/components/brand/Brand.tsx
+++ b/client/components/brand/Brand.tsx
@@ -1,13 +1,17 @@
-import type { ComponentProps } from 'react';
+import { useId, type ComponentProps } from 'react';
 import { cn } from '@/lib/utils';
 import { BRAND, BRAND_GLYPHS, type BrandGlyphName } from '@/lib/brand';
+import { useTheme } from '@/contexts/ThemeContext';
 
 type ImgProps = Omit<ComponentProps<'img'>, 'src' | 'alt'>;
 
 export function BrandMark({ className, ...props }: ImgProps) {
+  const { resolvedTheme } = useTheme();
+  const src = resolvedTheme === 'light' ? BRAND.assets.logoLight : BRAND.assets.logo;
+
   return (
     <img
-      src={BRAND.assets.logo}
+      src={src}
       alt={BRAND.name}
       className={cn('object-contain', className)}
       {...props}
@@ -26,28 +30,109 @@ export function BrandWordmark({ compact = false, className }: { compact?: boolea
 export function BrandGlyph({
   name,
   className,
-  iconClassName,
 }: {
   name: BrandGlyphName;
   className?: string;
-  iconClassName?: string;
 }) {
   const glyph = BRAND_GLYPHS[name];
-  const Icon = glyph.icon;
+  const gradientId = `bt-glyph-${useId().replace(/:/g, '')}`;
 
   return (
     <span
       className={cn(
         'relative inline-grid h-10 w-10 shrink-0 place-items-center overflow-hidden rounded-xl',
         'border border-primary/20 bg-primary/[0.08] text-primary shadow-sm shadow-primary/10',
-        'before:absolute before:inset-x-2 before:bottom-1.5 before:h-4 before:rounded-t-sm before:bg-gradient-to-t before:from-primary/25 before:to-primary/5',
-        'after:absolute after:inset-x-3 after:bottom-1.5 after:h-6 after:rounded-t-sm after:border-l after:border-r after:border-primary/15',
         className,
       )}
       aria-label={glyph.label}
       role="img"
     >
-      <Icon className={cn('relative z-10 h-5 w-5', iconClassName)} />
+      <svg viewBox="0 0 48 48" className="h-7 w-7" aria-hidden="true">
+        <defs>
+          <linearGradient id={gradientId} x1="8" x2="40" y1="40" y2="8" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stopColor="currentColor" stopOpacity="0.68" />
+            <stop offset="1" stopColor="currentColor" />
+          </linearGradient>
+        </defs>
+        <BrandGlyphShape name={name} gradientId={gradientId} />
+      </svg>
     </span>
   );
 }
+
+function BrandGlyphShape({ name, gradientId }: { name: BrandGlyphName; gradientId: string }) {
+  const fill = `url(#${gradientId})`;
+  const commonStroke = 'currentColor';
+
+  switch (name) {
+    case 'bills':
+      return (
+        <>
+          <path d="M13 8h22v31l-4-3-4 3-4-3-4 3-4-3-2 1.5V8Z" fill="none" stroke={commonStroke} strokeWidth="3" strokeLinejoin="round" opacity="0.88" />
+          <path d="M18 17h12M18 24h10M18 31h7" stroke={commonStroke} strokeWidth="3" strokeLinecap="round" opacity="0.72" />
+          <path d="m27 17 3 3 7-8" fill="none" stroke={commonStroke} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
+        </>
+      );
+    case 'calendar':
+      return (
+        <>
+          <rect x="10" y="12" width="28" height="27" rx="5" fill="none" stroke={commonStroke} strokeWidth="3" />
+          <path d="M16 8v8M32 8v8M11 20h26" stroke={commonStroke} strokeWidth="3" strokeLinecap="round" />
+          <rect x="17" y="25" width="6" height="6" rx="2" fill={fill} />
+          <path d="m25 31 3 3 7-8" fill="none" stroke={commonStroke} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
+        </>
+      );
+    case 'analytics':
+      return (
+        <>
+          <path d="M10 36h30" stroke={commonStroke} strokeWidth="3" strokeLinecap="round" opacity="0.35" />
+          <path d="M12 31 20 23l7 5 10-14" fill="none" stroke={commonStroke} strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" />
+          <circle cx="20" cy="23" r="3" fill={fill} />
+          <circle cx="37" cy="14" r="3" fill={fill} />
+        </>
+      );
+    case 'data':
+      return (
+        <>
+          <ellipse cx="24" cy="13" rx="13" ry="5" fill="none" stroke={commonStroke} strokeWidth="3" />
+          <path d="M11 13v19c0 2.8 5.8 5 13 5s13-2.2 13-5V13" fill="none" stroke={commonStroke} strokeWidth="3" />
+          <path d="M11 22c0 2.8 5.8 5 13 5s13-2.2 13-5M11 31c0 2.8 5.8 5 13 5s13-2.2 13-5" stroke={commonStroke} strokeWidth="3" opacity="0.58" />
+          <path d="m29 23 3 3 7-8" fill="none" stroke={commonStroke} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
+        </>
+      );
+    case 'banking':
+      return (
+        <>
+          <path d="M8 18 24 9l16 9H8Z" fill="none" stroke={commonStroke} strokeWidth="3" strokeLinejoin="round" />
+          <path d="M13 21v13M21 21v13M29 21v13M37 21v13M10 38h28" stroke={commonStroke} strokeWidth="3" strokeLinecap="round" />
+          <path d="m28 29 3 3 7-8" fill="none" stroke={commonStroke} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
+        </>
+      );
+    case 'snowball':
+      return (
+        <>
+          <circle cx="17" cy="18" r="5" fill="none" stroke={commonStroke} strokeWidth="3" opacity="0.74" />
+          <circle cx="29" cy="28" r="9" fill="none" stroke={commonStroke} strokeWidth="3" />
+          <path d="M11 37c8-1 18-7 27-23" fill="none" stroke={commonStroke} strokeWidth="4" strokeLinecap="round" />
+          <path d="m31 14 7 0 0 7" fill="none" stroke={commonStroke} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
+        </>
+      );
+    case 'security':
+      return (
+        <>
+          <path d="M24 8 37 13v10c0 8-5 14-13 17-8-3-13-9-13-17V13l13-5Z" fill="none" stroke={commonStroke} strokeWidth="3" strokeLinejoin="round" />
+          <path d="m18 24 4 4 9-10" fill="none" stroke={commonStroke} strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" />
+        </>
+      );
+    case 'tracker':
+    default:
+      return (
+        <>
+          <rect x="10" y="25" width="7" height="13" rx="2.5" fill={fill} opacity="0.78" />
+          <rect x="20.5" y="18" width="7" height="20" rx="2.5" fill={fill} opacity="0.88" />
+          <rect x="31" y="11" width="7" height="27" rx="2.5" fill={fill} />
+          <path d="m10 15 8 8 20-16" fill="none" stroke={commonStroke} strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" />
+        </>
+      );
+  }
+}
diff --git a/client/lib/brand.ts b/client/lib/brand.ts
index f95069c..ae9f523 100644
--- a/client/lib/brand.ts
+++ b/client/lib/brand.ts
@@ -1,28 +1,27 @@
-import {
-  BarChart3,
-  CalendarDays,
-  Database,
-  Landmark,
-  LockKeyhole,
-  Receipt,
-  ShieldCheck,
-  TrendingDown,
-  type LucideIcon,
-} from 'lucide-react';
-
 export const BRAND = {
   name: 'Bill Tracker',
   compactName: 'Bill Tracker',
   tagline: 'Calm command for household money.',
   repositoryUrl: 'https://dream.scheller.ltd/null/BillTracker',
   assets: {
-    logo: '/brand/logo.png',
-    favicon: '/brand/logo.png',
+    logo: '/brand/lockup.svg',
+    logoLight: '/brand/lockup-light.svg',
+    mark: '/brand/mark.svg',
+    favicon: '/brand/mark.svg',
     appleTouchIcon: '/brand/apple-touch-icon.png',
     pwa192: '/brand/pwa-192.png',
     pwa512: '/brand/pwa-512.png',
+    socialPreview: '/brand/social-preview.svg',
     legacyLogo: '/img/logo.png',
   },
+  colors: {
+    ink: '#101417',
+    paper: '#f8faf9',
+    trust: '#40c878',
+    teal: '#23b6a8',
+    amber: '#d99a24',
+    rose: '#df4661',
+  },
 } as const;
 
 export type BrandGlyphName =
@@ -35,15 +34,15 @@ export type BrandGlyphName =
   | 'snowball'
   | 'security';
 
-export const BRAND_GLYPHS: Record<BrandGlyphName, { label: string; icon: LucideIcon }> = {
-  tracker: { label: 'Tracker', icon: BarChart3 },
-  bills: { label: 'Bills', icon: Receipt },
-  calendar: { label: 'Calendar', icon: CalendarDays },
-  analytics: { label: 'Analytics', icon: BarChart3 },
-  data: { label: 'Data', icon: Database },
-  banking: { label: 'Banking', icon: Landmark },
-  snowball: { label: 'Snowball', icon: TrendingDown },
-  security: { label: 'Security', icon: ShieldCheck },
+export const BRAND_GLYPHS: Record<BrandGlyphName, { label: string }> = {
+  tracker: { label: 'Tracker' },
+  bills: { label: 'Bills' },
+  calendar: { label: 'Calendar' },
+  analytics: { label: 'Analytics' },
+  data: { label: 'Data' },
+  banking: { label: 'Banking' },
+  snowball: { label: 'Snowball' },
+  security: { label: 'Security' },
 };
 
-export const ADMIN_GLYPH = { label: 'Admin', icon: LockKeyhole } as const;
+export const ADMIN_GLYPH = { label: 'Admin' } as const;