@growth-labs/cms 0.5.25 → 0.5.27

package/src/ui/styles/growth-labs-tokens.css

@@ -0,0 +1,149 @@
+/* @growth-labs/cms token snapshot.
+ * Source: growthlabs-work/src/styles/ds/tokens/{colors,effects,spacing,themes,typography}.css
+ * Verified: 2026-08-21. Package-owned because growthlabs-work is not a runtime dependency. */
+
+:root {
+  --gl-mint-100: #DFFBE7;
+  --gl-mint-200: #B3FBE8;
+  --gl-aqua-300: #9AFBE9;
+  --gl-cyan-400: #50F5EC;
+  --gl-cyan-500: #46FBF5;
+  --gl-teal-400: #3ED1C6;
+  --gl-teal-500: #1FA3A8;
+  --gl-blue-400: #44C2ED;
+  --gl-blue-500: #2CA8E0;
+  --gl-coral: #F56A61;
+  --gl-coral-soft: #F89787;
+  --gl-orange: #F7A34B;
+  --gl-orange-soft: #FBB35E;
+  --gl-pink: #F0659C;
+  --gl-magenta: #F230B7;
+  --gl-purple: #8C5FD3;
+  --gl-violet: #8075ED;
+  --gl-periwinkle: #B3C5EA;
+  --gl-interactive: #2F6FBD;
+  --gl-interactive-hover: #3578C4;
+  --gl-interactive-active: #245CA8;
+  --gl-focus-ring: #1E5EA8;
+  --gl-white: #FFFFFF;
+  --gl-off-white: #F8FAFA;
+  --gl-light-gray: #F5F6F8;
+  --gl-mist: #ECF1F0;
+  --gl-mint-wash: #CFEDE8;
+  --gl-border: #D6DEE3;
+  --gl-gray: #B3B3B3;
+  --gl-text-light: #8C8C8C;
+  --gl-text: #4D4D4D;
+  --gl-charcoal: #2B2F33;
+  --gl-ink-900: #16191C;
+  --gl-ink-800: #1E2227;
+  --gl-ink-700: #262A30;
+  --gl-ink-600: #2F343A;
+  --gl-ink-500: #3A4046;
+  --gl-ink-text: #E7ECEB;
+  --gl-ink-text-soft: #A7B0B4;
+  --gl-ink-text-mute: #79838A;
+  --gl-gradient: linear-gradient(135deg, #A4F1D8 0%, #3ED1C6 50%, #2CA8E0 100%);
+  --gl-gradient-bright: linear-gradient(135deg, #DFFBE7 0%, #83FBEC 50%, #44C2ED 100%);
+  --gl-gradient-warm: linear-gradient(135deg, #F7A34B 0%, #F56A61 55%, #F0659C 100%);
+
+  --surface-page: var(--gl-mist);
+  --surface-card: var(--gl-white);
+  --surface-muted: var(--gl-light-gray);
+  --surface-inverse: var(--gl-charcoal);
+  --surface-nav: rgba(255, 255, 255, 0.82);
+  --surface-raised-nav: rgba(255, 255, 255, 0.92);
+  --text-primary: var(--gl-text);
+  --text-strong: var(--gl-charcoal);
+  --text-secondary: var(--gl-text-light);
+  --text-muted: var(--gl-gray);
+  --text-on-dark: var(--gl-white);
+  --text-on-inverse: var(--gl-white);
+  --text-accent: var(--gl-interactive);
+  --border-default: var(--gl-border);
+  --border-strong: var(--gl-gray);
+  --accent-primary: var(--gl-teal-400);
+  --accent-primary-strong: var(--gl-teal-500);
+  --accent-secondary: var(--gl-blue-500);
+  --accent-cta: var(--gl-interactive);
+  --accent-cta-hover: var(--gl-interactive-hover);
+  --accent-cta-active: var(--gl-interactive-active);
+  --accent-warm: var(--gl-coral);
+  --focus-ring: var(--gl-focus-ring);
+
+  --radius-none: 0;
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-control: 6px;
+  --radius-pill: 999px;
+  --radius-circle: 50%;
+  --shadow-faint: 0 6px 14px rgba(77, 77, 77, 0.06);
+  --shadow-card: 0 8px 18px rgba(77, 77, 77, 0.08);
+  --shadow-raised: 0 14px 30px rgba(43, 47, 51, 0.12);
+  --shadow-chip: 0 10px 20px rgba(43, 47, 51, 0.10);
+  --shadow-glow: 0 0 0 6px rgba(62, 209, 198, 0.18);
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --duration-fast: 90ms;
+  --duration-base: 140ms;
+  --duration-slow: 320ms;
+  --blur-panel: blur(14px);
+  --border-thin: 1px;
+  --border-thick: 2px;
+
+  --space-0: 0;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 24px;
+  --space-6: 32px;
+  --space-7: 48px;
+  --space-8: 64px;
+  --space-9: 96px;
+  --space-10: 128px;
+
+  --font-display: "Space Grotesk", "Lato", system-ui, sans-serif;
+  --font-body: "Lato", "Space Grotesk", system-ui, sans-serif;
+  --font-mono: "Space Grotesk", ui-monospace, "SF Mono", Menlo, monospace;
+  --weight-light: 300;
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  --tracking-tighter: -0.02em;
+  --tracking-wide: 0.02em;
+  --tracking-eyebrow: 0.08em;
+}
+
+[data-theme="dark"],
+.gl-dark {
+  color-scheme: dark;
+  --surface-page: var(--gl-ink-800);
+  --surface-card: var(--gl-ink-700);
+  --surface-muted: var(--gl-ink-600);
+  --surface-inverse: var(--gl-mist);
+  --surface-nav: rgba(24, 27, 31, 0.82);
+  --surface-raised-nav: rgba(24, 27, 31, 0.92);
+  --text-primary: var(--gl-ink-text);
+  --text-strong: var(--gl-ink-text);
+  --text-secondary: var(--gl-ink-text-soft);
+  --text-muted: var(--gl-ink-text-mute);
+  --text-on-dark: var(--gl-ink-text);
+  --text-on-inverse: var(--gl-charcoal);
+  --text-accent: var(--gl-cyan-400);
+  --border-default: rgba(255, 255, 255, 0.12);
+  --border-strong: rgba(255, 255, 255, 0.24);
+  --accent-primary: var(--gl-teal-400);
+  --accent-primary-strong: var(--gl-cyan-400);
+  --accent-secondary: var(--gl-blue-400);
+  --accent-cta: #3F86D8;
+  --accent-cta-hover: var(--gl-blue-400);
+  --accent-cta-active: var(--gl-interactive);
+  --focus-ring: var(--gl-cyan-400);
+  --shadow-faint: 0 6px 14px rgba(0, 0, 0, 0.35);
+  --shadow-card: 0 8px 18px rgba(0, 0, 0, 0.42);
+  --shadow-raised: 0 16px 34px rgba(0, 0, 0, 0.52);
+  --shadow-chip: 0 10px 20px rgba(0, 0, 0, 0.45);
+  --shadow-glow: 0 0 0 6px rgba(62, 209, 198, 0.22);
+}

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 }
 }