@growth-labs/cms 0.5.26 → 0.5.29

package/src/ui/theme.ts

@@ -1,6 +1,5 @@
-// src/ui/theme.ts — theme tokens ported from the resolved Broadsheet design
-// (app.jsx). The accent/serif vars are applied to documentElement at runtime by
-// the useTweaks effect; broadsheet.css carries the rest.
+// Compatibility helpers for the fixed Growth Labs visual contract. Theme and
+// density remain user preferences; brand accent and typography do not.
 
 export interface AccentSet {
 	a: string
@@ -9,66 +8,25 @@ export interface AccentSet {
 	tint: string
 	ring: string
 }
-export type AccentName = 'Ink blue' | 'Press red' | 'Forest' | 'Violet'
+type BrandAccentName = 'Growth Labs'
+export type AccentName = BrandAccentName | 'Ink blue' | 'Press red' | 'Forest' | 'Violet'
 
-export const ACCENTS: Record<AccentName, AccentSet> = {
-	'Ink blue': {
-		a: '#0c4a6e',
-		s: '#075985',
-		fg: '#ffffff',
-		tint: 'rgba(12,74,110,0.09)',
-		ring: 'rgba(12,74,110,0.38)',
-	},
-	'Press red': {
-		a: '#b23a2e',
-		s: '#962f25',
-		fg: '#ffffff',
-		tint: 'rgba(178,58,46,0.10)',
-		ring: 'rgba(178,58,46,0.38)',
-	},
-	Forest: {
-		a: '#1f6b4a',
-		s: '#19583d',
-		fg: '#ffffff',
-		tint: 'rgba(31,107,74,0.10)',
-		ring: 'rgba(31,107,74,0.38)',
-	},
-	Violet: {
-		a: '#5b4bc4',
-		s: '#4c3ea8',
-		fg: '#ffffff',
-		tint: 'rgba(91,75,196,0.10)',
-		ring: 'rgba(91,75,196,0.38)',
+export const ACCENTS: Record<BrandAccentName, AccentSet> = {
+	'Growth Labs': {
+		a: '#2F6FBD',
+		s: '#245CA8',
+		fg: '#FFFFFF',
+		tint: 'rgba(62,209,198,0.14)',
+		ring: '#1E5EA8',
 	},
 }
-export const ACCENTS_DARK: Record<AccentName, AccentSet> = {
-	'Ink blue': {
-		a: '#4c9ae8',
-		s: '#3b86d4',
-		fg: '#06121d',
-		tint: 'rgba(76,154,232,0.16)',
-		ring: 'rgba(76,154,232,0.45)',
-	},
-	'Press red': {
-		a: '#ef6e62',
-		s: '#e05348',
-		fg: '#1d0a08',
-		tint: 'rgba(239,110,98,0.16)',
-		ring: 'rgba(239,110,98,0.45)',
-	},
-	Forest: {
-		a: '#4ec98a',
-		s: '#3bb476',
-		fg: '#06160f',
-		tint: 'rgba(78,201,138,0.16)',
-		ring: 'rgba(78,201,138,0.45)',
-	},
-	Violet: {
-		a: '#9d8df0',
-		s: '#8978e6',
-		fg: '#0e0a1d',
-		tint: 'rgba(157,141,240,0.16)',
-		ring: 'rgba(157,141,240,0.45)',
+export const ACCENTS_DARK: Record<BrandAccentName, AccentSet> = {
+	'Growth Labs': {
+		a: '#3F86D8',
+		s: '#2F6FBD',
+		fg: '#FFFFFF',
+		tint: 'rgba(62,209,198,0.18)',
+		ring: '#50F5EC',
 	},
 }
 
@@ -77,23 +35,26 @@ export type Density = 'compact' | 'regular' | 'comfy'
 export type PreviewPos = 'right' | 'bottom' | 'off'
 
 export const TWEAK_DEFAULTS = {
-	theme: 'dark' as ThemeMode,
-	accent: 'Ink blue' as AccentName,
+	theme: 'light' as ThemeMode,
+	accent: 'Growth Labs' as AccentName,
 	density: 'regular' as Density,
 	previewPos: 'off' as PreviewPos,
-	serifDisplay: true,
+	serifDisplay: false,
 }
 
-const SERIF = '"Source Serif 4", Georgia, serif'
-const SANS = '"DM Sans", system-ui, sans-serif'
+const DISPLAY = '"Space Grotesk", "Lato", system-ui, sans-serif'
+
+export function serifVar(_serifDisplay: boolean): string {
+	return DISPLAY
+}
 
-export function serifVar(serifDisplay: boolean): string {
-	return serifDisplay ? SERIF : SANS
+export function inverseTextVar(theme: ThemeMode): string {
+	return theme === 'dark' ? '#2B2F33' : '#FFFFFF'
 }
 
 export function resolveAccentVars(theme: ThemeMode, accent: AccentName): Record<string, string> {
 	const table = theme === 'dark' ? ACCENTS_DARK : ACCENTS
-	const set = table[accent] ?? table['Ink blue']
+	const set = table[accent as BrandAccentName] ?? table['Growth Labs']
 	return {
 		'--accent': set.a,
 		'--accent-strong': set.s,

package/src/ui/use-tweaks.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react'
-import { resolveAccentVars, serifVar } from './theme.js'
+import { inverseTextVar, resolveAccentVars, serifVar } from './theme.js'
 import { applyTweak, loadTweaks, saveTweaks, type TweakState } from './tweaks.js'
 
 export function useTweaks(): {
@@ -26,6 +26,7 @@ export function useTweaks(): {
 		for (const [k, val] of Object.entries(resolveAccentVars(t.theme, t.accent)))
 			root.style.setProperty(k, val)
 		root.style.setProperty('--serif', serifVar(t.serifDisplay))
+		root.style.setProperty('--text-on-inverse', inverseTextVar(t.theme))
 	}, [t.theme, t.density, t.accent, t.serifDisplay])
 	return { t, setTweak }
 }