@sero-ai/ui 0.5.0 → 0.6.0

package/src/theme/apply-theme.ts

@@ -1,6 +1,9 @@
-import type {
-  ColorTokens,
-  ThemePreset,
+import {
+  DEFAULT_GLASS_EFFECT,
+  WINDOWS_GLASS_MATERIALS,
+  type ColorTokens,
+  type ThemeGlassEffect,
+  type ThemePreset,
 } from './types';
 
 // ── Token → CSS Variable Mapping ─────────────────────────────
@@ -86,6 +89,38 @@ function tint(color: string, percentage: number): string {
   return `color-mix(in srgb, ${color} ${percentage}%, transparent)`;
 }
 
+function applyGlassEffect(
+  root: HTMLElement,
+  glass: ThemeGlassEffect | undefined,
+  colors: ColorTokens,
+): void {
+  const enabled = glass?.enabled === true;
+  root.classList.toggle('theme-glass', enabled);
+  root.style.removeProperty('--window-glass-opaque-base');
+  root.style.removeProperty('--window-glass-sidebar');
+  root.style.removeProperty('--window-glass-opaque-surface');
+  root.style.removeProperty('--window-glass-opaque-elevated');
+  if (!enabled) return;
+
+  const opacity = Math.min(1, Math.max(0, glass.opacity));
+  const percentage = Math.round(opacity * 100);
+  root.style.setProperty('--bg-base', tint(colors.bgBase, percentage));
+  root.style.setProperty(
+    '--window-glass-sidebar',
+    tint(colors.bgSurface, (glass.sidebarOpacity ?? DEFAULT_GLASS_EFFECT.sidebarOpacity) * 100),
+  );
+  root.style.setProperty('--window-glass-opaque-base', colors.bgBase);
+  root.style.setProperty('--window-glass-opaque-surface', colors.bgSurface);
+  root.style.setProperty('--window-glass-opaque-elevated', colors.bgElevated);
+  // Thin local layers preserve the wallpaper while separating nested content.
+  root.style.setProperty('--bg-surface', tint(colors.bgSurface, (glass.surfaceOpacity ?? DEFAULT_GLASS_EFFECT.surfaceOpacity) * 100));
+  root.style.setProperty('--bg-elevated', tint(colors.textPrimary, (glass.selectionOpacity ?? DEFAULT_GLASS_EFFECT.selectionOpacity) * 100));
+  root.style.setProperty('--text-muted', colors.textSecondary);
+  const border = (glass.borderOpacity ?? DEFAULT_GLASS_EFFECT.borderOpacity) * 100;
+  root.style.setProperty('--border-subtle', tint(colors.textPrimary, border * 2 / 3));
+  root.style.setProperty('--border-default', tint(colors.textPrimary, border));
+}
+
 // ── Apply / Reset ────────────────────────────────────────────
 
 /** Apply a theme preset for the given mode. */
@@ -130,6 +165,8 @@ export function applyThemePreset(
     root.style.setProperty('--radius', preset.radius.md);
   }
 
+  applyGlassEffect(root, preset.glass, colors);
+
   root.classList.toggle('dark', mode === 'dark');
 }
 
@@ -142,6 +179,10 @@ const ALL_MANAGED_VARS = [
   '--font-size-base',
   '--spacing',
   '--radius',
+  '--window-glass-opaque-base',
+  '--window-glass-sidebar',
+  '--window-glass-opaque-surface',
+  '--window-glass-opaque-elevated',
 ];
 
 /** Remove all inline theme overrides, reverting to CSS defaults. */
@@ -150,6 +191,7 @@ export function resetTheme(): void {
   for (const cssVar of ALL_MANAGED_VARS) {
     root.style.removeProperty(cssVar);
   }
+  root.classList.remove('theme-glass');
 }
 
 // ── Validation ───────────────────────────────────────────────
@@ -221,6 +263,26 @@ function sanitiseRadius(raw: unknown): ThemePreset['radius'] | undefined {
   return Object.keys(result).length > 0 ? result : undefined;
 }
 
+function sanitiseGlass(raw: unknown): ThemeGlassEffect | undefined {
+  if (!raw || typeof raw !== 'object') return undefined;
+  const value = raw as Record<string, unknown>;
+  if (typeof value.enabled !== 'boolean') return undefined;
+
+  const result = { ...DEFAULT_GLASS_EFFECT, enabled: value.enabled };
+  for (const key of ['opacity', 'sidebarOpacity', 'surfaceOpacity', 'selectionOpacity', 'borderOpacity'] as const) {
+    const amount = value[key];
+    if (typeof amount === 'number' && Number.isFinite(amount)) {
+      result[key] = Math.min(1, Math.max(0, amount));
+    }
+  }
+  if (typeof value.blurRadius === 'number' && Number.isFinite(value.blurRadius)) {
+    result.blurRadius = Math.round(Math.min(64, Math.max(0, value.blurRadius)));
+  }
+  result.windowsMaterial = WINDOWS_GLASS_MATERIALS.find((material) => material === value.windowsMaterial)
+    ?? DEFAULT_GLASS_EFFECT.windowsMaterial;
+  return result;
+}
+
 /** Validate and normalise an unknown value into a ThemePreset. */
 export function validateThemePreset(data: unknown): ThemePreset | null {
   if (!data || typeof data !== 'object') return null;
@@ -246,5 +308,6 @@ export function validateThemePreset(data: unknown): ThemePreset | null {
     typography: sanitiseTypography(d.typography),
     spacing: sanitiseSpacing(d.spacing),
     radius: sanitiseRadius(d.radius),
+    glass: sanitiseGlass(d.glass),
   };
 }

package/src/theme/types.ts

@@ -105,6 +105,25 @@ export interface RadiusTokens {
   lg?: string;
 }
 
+export const WINDOWS_GLASS_MATERIALS = ['acrylic', 'mica', 'tabbed'] as const;
+export type WindowsGlassMaterial = typeof WINDOWS_GLASS_MATERIALS[number];
+
+export interface ThemeGlassEffect {
+  /** Show the desktop through Sero's surfaces. */
+  enabled: boolean;
+  /** Window tint opacity from 0 to 1. */
+  opacity: number;
+  /** Direct macOS desktop blur radius, from 0 to 64 pixels. */
+  blurRadius?: number;
+  /** Windows 11 system backdrop. */
+  windowsMaterial?: WindowsGlassMaterial;
+  /** Independent local layer opacities from 0 to 1. */
+  sidebarOpacity?: number;
+  surfaceOpacity?: number;
+  selectionOpacity?: number;
+  borderOpacity?: number;
+}
+
 // ── Theme Preset ─────────────────────────────────────────────
 
 export interface ThemePreset {
@@ -141,6 +160,9 @@ export interface ThemePreset {
 
   /** Border radius overrides. */
   radius?: RadiusTokens;
+
+  /** Optional translucent desktop window treatment. */
+  glass?: ThemeGlassEffect;
 }
 
 /** Lightweight metadata for listing presets without loading full data. */
@@ -218,6 +240,17 @@ export const DEFAULT_RADIUS: Required<RadiusTokens> = {
   lg: '12px',
 };
 
+export const DEFAULT_GLASS_EFFECT: Required<ThemeGlassEffect> = {
+  enabled: false,
+  opacity: 0.78,
+  blurRadius: 24,
+  windowsMaterial: 'acrylic',
+  sidebarOpacity: 0.08,
+  surfaceOpacity: 0.18,
+  selectionOpacity: 0.08,
+  borderOpacity: 0.18,
+};
+
 /** Default colour tokens matching globals.css .dark values. */
 export const DEFAULT_DARK_COLORS: ColorTokens = {
   bgBase: '#0a0a0b',