Sterister
9ceab037ca
Some checks failed
Test / test (push) Has been cancelled
M-Obs 4: @shade/widgets React library - ShadeProvider context with observer URL + token + theme - useShadeState (polling) + useShadeEvents (SSE) hooks - 7 widgets: IdentityCard, SessionList, PrekeyStock, RecentActivity, ServerStatus, FingerprintCompare, WidgetCatalog (meta-widget for user-selectable layout with localStorage persistence) - Self-contained CSS via inline styles, no external CSS conflicts - Light/dark/auto theme via tokens M-Obs 5: @shade/dashboard standalone SPA - Vite + React app composing all widgets into a full debugger layout - Login screen with token persistence to localStorage - Build script copies dist/ to @shade/observer/dist/ for embedded serving - 211 KB JS bundle (66 KB gzipped) M-Obs 6: Documentation + integration example - READMEs for @shade/observer and @shade/widgets - examples/06-observer-dashboard runnable demo: spins up prekey server + observer, runs Alice ↔ Bob conversation loop, dashboard at :3901 - Updated root README and docker-compose.yml with observer integration M-Obs 7: End-to-end verification - StateAggregator now drains buffered events on subscription, so identity.initialized fires before observer construction are still seen - Verified live: snapshot endpoint returns full state, dashboard serves, 401 without auth, sessions/messages/ratchet steps all tracked 220 tests passing, 0 failures. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
73 lines
1.8 KiB
TypeScript
73 lines
1.8 KiB
TypeScript
/**
|
|
* Theme tokens for Shade widgets.
|
|
*
|
|
* Self-contained — no external CSS required. Each widget reads tokens
|
|
* from the active theme via context.
|
|
*/
|
|
|
|
export interface ShadeTheme {
|
|
bg: string;
|
|
bgElevated: string;
|
|
border: string;
|
|
text: string;
|
|
textMuted: string;
|
|
textDim: string;
|
|
accent: string;
|
|
accentMuted: string;
|
|
success: string;
|
|
warning: string;
|
|
danger: string;
|
|
font: string;
|
|
fontMono: string;
|
|
radius: string;
|
|
shadow: string;
|
|
}
|
|
|
|
export const darkTheme: ShadeTheme = {
|
|
bg: '#0a0a0a',
|
|
bgElevated: '#161616',
|
|
border: '#262626',
|
|
text: '#e5e5e5',
|
|
textMuted: '#a3a3a3',
|
|
textDim: '#525252',
|
|
accent: '#f7c948',
|
|
accentMuted: 'rgba(247, 201, 72, 0.15)',
|
|
success: '#22c55e',
|
|
warning: '#eab308',
|
|
danger: '#ef4444',
|
|
font: 'system-ui, -apple-system, Segoe UI, Roboto, sans-serif',
|
|
fontMono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
|
|
radius: '8px',
|
|
shadow: '0 4px 12px rgba(0, 0, 0, 0.4)',
|
|
};
|
|
|
|
export const lightTheme: ShadeTheme = {
|
|
bg: '#ffffff',
|
|
bgElevated: '#f5f5f5',
|
|
border: '#e5e5e5',
|
|
text: '#0a0a0a',
|
|
textMuted: '#525252',
|
|
textDim: '#a3a3a3',
|
|
accent: '#ca8a04',
|
|
accentMuted: 'rgba(202, 138, 4, 0.1)',
|
|
success: '#16a34a',
|
|
warning: '#ca8a04',
|
|
danger: '#dc2626',
|
|
font: 'system-ui, -apple-system, Segoe UI, Roboto, sans-serif',
|
|
fontMono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
|
|
radius: '8px',
|
|
shadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
|
|
};
|
|
|
|
export type ThemeMode = 'dark' | 'light' | 'auto';
|
|
|
|
export function resolveTheme(mode: ThemeMode): ShadeTheme {
|
|
if (mode === 'dark') return darkTheme;
|
|
if (mode === 'light') return lightTheme;
|
|
// auto: use prefers-color-scheme
|
|
if (typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: light)').matches) {
|
|
return lightTheme;
|
|
}
|
|
return darkTheme;
|
|
}
|