@puredesktop/puredesktop-ui-bridge 1.0.0-beta.1

package/src/theme/surfacePalettes.ts

@@ -0,0 +1,178 @@
+import type { PlatformTheme } from './tokens.js'
+import type { PlatformThemeMode } from './tokens.js'
+
+/** Six roles per mode: text, metadata, accent, window bg, elevated surfaces. */
+export interface SurfacePaletteRoles {
+  ink: string
+  muted: string
+  faint: string
+  accent: string
+  desk: string
+  paper: string
+}
+
+export interface SurfacePalette {
+  id: string
+  label: string
+  light: SurfacePaletteRoles
+  dark: SurfacePaletteRoles
+}
+
+/** Sentinel id meaning "no override — use the platform theme as-is". */
+export const SURFACE_PALETTE_DEFAULT_ID = 'default'
+
+export const SURFACE_PALETTES: SurfacePalette[] = [
+  {
+    id: 'ink',
+    label: 'Ink',
+    light: {
+      ink: '#2e3338',
+      muted: '#737b86',
+      faint: '#9aa2ad',
+      accent: '#525a65',
+      desk: '#f5f3ef',
+      paper: '#fffefa',
+    },
+    dark: {
+      ink: '#e8eaed',
+      muted: '#9aa2ad',
+      faint: '#6e7681',
+      accent: '#8a929d',
+      desk: '#141618',
+      paper: '#1c1f23',
+    },
+  },
+  {
+    id: 'sepia',
+    label: 'Sepia',
+    light: {
+      ink: '#3a342c',
+      muted: '#7d7468',
+      faint: '#a89e90',
+      accent: '#6b5d49',
+      desk: '#f4efe6',
+      paper: '#fffdf6',
+    },
+    dark: {
+      ink: '#ece6dc',
+      muted: '#a89e90',
+      faint: '#7d7468',
+      accent: '#9a8468',
+      desk: '#1a1814',
+      paper: '#242019',
+    },
+  },
+  {
+    id: 'slate',
+    label: 'Slate',
+    light: {
+      ink: '#2b323c',
+      muted: '#6e7a88',
+      faint: '#97a2af',
+      accent: '#4d6378',
+      desk: '#eef1f4',
+      paper: '#fdfeff',
+    },
+    dark: {
+      ink: '#e3e8ef',
+      muted: '#97a2af',
+      faint: '#6e7a88',
+      accent: '#7a94ad',
+      desk: '#13171c',
+      paper: '#1a2028',
+    },
+  },
+  {
+    id: 'forest',
+    label: 'Forest',
+    light: {
+      ink: '#2d352f',
+      muted: '#6f7b72',
+      faint: '#98a39b',
+      accent: '#4e6b58',
+      desk: '#eff2ee',
+      paper: '#fdfffd',
+    },
+    dark: {
+      ink: '#e2ebe4',
+      muted: '#98a39b',
+      faint: '#6f7b72',
+      accent: '#6d9479',
+      desk: '#141916',
+      paper: '#1b221d',
+    },
+  },
+  {
+    id: 'plum',
+    label: 'Plum',
+    light: {
+      ink: '#342e38',
+      muted: '#7a7280',
+      faint: '#a59dab',
+      accent: '#66506e',
+      desk: '#f3f0f4',
+      paper: '#fffdff',
+    },
+    dark: {
+      ink: '#ebe6ef',
+      muted: '#a59dab',
+      faint: '#7a7280',
+      accent: '#8f74a0',
+      desk: '#17141a',
+      paper: '#201c24',
+    },
+  },
+]
+
+export function surfacePaletteById(
+  id: string | null | undefined,
+): SurfacePalette | null {
+  if (!id || id === SURFACE_PALETTE_DEFAULT_ID) return null
+  return SURFACE_PALETTES.find(palette => palette.id === id) ?? null
+}
+
+export function surfacePaletteRolesForMode(
+  palette: SurfacePalette,
+  mode: PlatformThemeMode,
+): SurfacePaletteRoles {
+  return mode === 'dark' ? palette.dark : palette.light
+}
+
+/** Swatch dots for the palette dropdown trigger. */
+export function surfacePaletteSwatches(palette: SurfacePalette): string[] {
+  const roles = palette.light
+  return [roles.ink, roles.accent, roles.paper, roles.desk]
+}
+
+/** Overlay a surface palette onto the platform theme (light and dark). */
+export function applySurfacePaletteToTheme(
+  theme: PlatformTheme,
+  paletteId: string | null | undefined,
+): PlatformTheme {
+  const palette = surfacePaletteById(paletteId)
+  if (!palette) return theme
+
+  const roles = surfacePaletteRolesForMode(palette, theme.mode)
+  return {
+    ...theme,
+    colors: {
+      ...theme.colors,
+      bg: roles.desk,
+      surface: roles.paper,
+      surfaceHover: roles.paper,
+      surfaceActive: roles.desk,
+      elevated: roles.paper,
+      appViewport: roles.desk,
+      text: roles.ink,
+      textSecondary: roles.muted,
+      textDisabled: roles.faint,
+      accent: roles.accent,
+      accentHover: roles.ink,
+      accentMuted: roles.desk,
+      border: theme.mode === 'dark' ? roles.paper : theme.colors.border,
+      divider: theme.mode === 'dark' ? roles.paper : theme.colors.divider,
+      chromeTitlebar: roles.desk,
+      chromeTabStrip: roles.desk,
+    },
+  }
+}

package/src/theme/surfaceRoleSelectors.ts

@@ -0,0 +1,113 @@
+import { css, type RuleSet } from 'styled-components'
+
+/**
+ * Hand-written surface role aliases for app chrome (`--{prefix}-ink`, etc.).
+ * Responds to `data-platform-*` on an ancestor (AppFrame / documentElement).
+ * Does not touch `--platform-colors-*` — the shell bridge owns those on `:root`.
+ */
+export function surfaceRoleSelectors(prefix: string): RuleSet {
+  const p = prefix
+  return css`
+    :not([data-platform-surface-palette]) &,
+    [data-platform-surface-palette='ink'] & {
+      --${p}-ink: #2e3338;
+      --${p}-muted: #737b86;
+      --${p}-faint: #9aa2ad;
+      --${p}-accent: #525a65;
+      --${p}-bg: #f5f3ef;
+      --${p}-desk: #f5f3ef;
+      --${p}-paper: #fffefa;
+    }
+
+    [data-platform-surface-palette='sepia'] & {
+      --${p}-ink: #3a342c;
+      --${p}-muted: #7d7468;
+      --${p}-faint: #a89e90;
+      --${p}-accent: #6b5d49;
+      --${p}-bg: #f4efe6;
+      --${p}-desk: #f4efe6;
+      --${p}-paper: #fffdf6;
+    }
+
+    [data-platform-surface-palette='slate'] & {
+      --${p}-ink: #2b323c;
+      --${p}-muted: #6e7a88;
+      --${p}-faint: #97a2af;
+      --${p}-accent: #4d6378;
+      --${p}-bg: #eef1f4;
+      --${p}-desk: #eef1f4;
+      --${p}-paper: #fdfeff;
+    }
+
+    [data-platform-surface-palette='forest'] & {
+      --${p}-ink: #2d352f;
+      --${p}-muted: #6f7b72;
+      --${p}-faint: #98a39b;
+      --${p}-accent: #4e6b58;
+      --${p}-bg: #eff2ee;
+      --${p}-desk: #eff2ee;
+      --${p}-paper: #fdfffd;
+    }
+
+    [data-platform-surface-palette='plum'] & {
+      --${p}-ink: #342e38;
+      --${p}-muted: #7a7280;
+      --${p}-faint: #a59dab;
+      --${p}-accent: #66506e;
+      --${p}-bg: #f3f0f4;
+      --${p}-desk: #f3f0f4;
+      --${p}-paper: #fffdff;
+    }
+
+    [data-platform-theme='dark']:not([data-platform-surface-palette]) &,
+    [data-platform-theme='dark'][data-platform-surface-palette='ink'] & {
+      --${p}-ink: #e8eaed;
+      --${p}-muted: #9aa2ad;
+      --${p}-faint: #6e7681;
+      --${p}-accent: #8a929d;
+      --${p}-bg: #141618;
+      --${p}-desk: #141618;
+      --${p}-paper: #1c1f23;
+    }
+
+    [data-platform-theme='dark'][data-platform-surface-palette='sepia'] & {
+      --${p}-ink: #ece6dc;
+      --${p}-muted: #a89e90;
+      --${p}-faint: #7d7468;
+      --${p}-accent: #9a8468;
+      --${p}-bg: #1a1814;
+      --${p}-desk: #1a1814;
+      --${p}-paper: #242019;
+    }
+
+    [data-platform-theme='dark'][data-platform-surface-palette='slate'] & {
+      --${p}-ink: #e3e8ef;
+      --${p}-muted: #97a2af;
+      --${p}-faint: #6e7a88;
+      --${p}-accent: #7a94ad;
+      --${p}-bg: #13171c;
+      --${p}-desk: #13171c;
+      --${p}-paper: #1a2028;
+    }
+
+    [data-platform-theme='dark'][data-platform-surface-palette='forest'] & {
+      --${p}-ink: #e2ebe4;
+      --${p}-muted: #98a39b;
+      --${p}-faint: #6f7b72;
+      --${p}-accent: #6d9479;
+      --${p}-bg: #141916;
+      --${p}-desk: #141916;
+      --${p}-paper: #1b221d;
+    }
+
+    [data-platform-theme='dark'][data-platform-surface-palette='plum'] & {
+      --${p}-ink: #ebe6ef;
+      --${p}-muted: #a59dab;
+      --${p}-faint: #7a7280;
+      --${p}-accent: #8f74a0;
+      --${p}-bg: #17141a;
+      --${p}-desk: #17141a;
+      --${p}-paper: #201c24;
+    }
+  `
+}

package/src/theme/themeVars.ts

@@ -0,0 +1,13 @@
+/**
+ * CSS var() strings for shared theme tokens — keys mirror `platformThemeShared`.
+ * Use in styled rules instead of repeating `var(--platform-…)`.
+ */
+export const zi = {
+  appBase: 'var(--platform-z-index-zi-app-base)',
+  appSidebar: 'var(--platform-z-index-zi-app-sidebar)',
+  appChrome: 'var(--platform-z-index-zi-app-chrome)',
+  appViewportToolbar: 'var(--platform-z-index-zi-app-viewport-toolbar)',
+  appMenus: 'var(--platform-z-index-zi-app-menus)',
+  appToast: 'var(--platform-z-index-zi-app-toast)',
+  appModal: 'var(--platform-z-index-zi-app-modal)',
+} as const

package/src/theme/themes/dark.ts

@@ -0,0 +1,59 @@
+import { PlatformTheme } from '../tokens.js'
+import { neutral, status } from './palette.js'
+import { createPlatformTheme } from './shared.js'
+
+const accent = neutral[700]
+const danger = status.danger.dark
+
+export const darkTheme: PlatformTheme = createPlatformTheme(
+  'dark',
+  {
+    bg: neutral[875],
+    surface: neutral[850],
+    surfaceHover: neutral[825],
+    surfaceActive: neutral[800],
+    elevated: neutral[850],
+    text: neutral[100],
+    textSecondary: neutral[400],
+    textDisabled: neutral[500],
+    textInverse: neutral[100],
+    accent,
+    accentHover: neutral[150],
+    accentMuted: neutral[800],
+    border: neutral[775],
+    borderStrong: neutral[700],
+    divider: neutral[775],
+    danger,
+    textDanger: danger,
+    warning: status.warning.dark,
+    success: status.success.dark,
+    info: neutral[400],
+    semanticBlue: '#76a9f2',
+    semanticBlueText: '#cfe2ff',
+    semanticBlueMuted: '#1e3552',
+    semanticBlueBorder: '#315987',
+    semanticOrange: '#e5ad3e',
+    semanticOrangeText: '#f7dfaa',
+    semanticOrangeMuted: '#473711',
+    semanticOrangeBorder: '#735719',
+    semanticGreen: '#6db982',
+    semanticGreenText: '#cdebd5',
+    semanticGreenMuted: '#1e3d29',
+    semanticGreenBorder: '#356746',
+    semanticRed: '#d9817d',
+    semanticRedText: '#f3d0ce',
+    semanticRedMuted: '#4b2424',
+    semanticRedBorder: '#783c3a',
+    focus: accent,
+    selection: neutral[800],
+    /** Embedded plugin iframe canvas — must stay dark in dark mode */
+    appViewport: neutral[900],
+    chromeTitlebar: neutral[900],
+    chromeTabStrip: neutral[875],
+  },
+  {
+    sm: '0 1px 2px rgba(0, 0, 0, 0.28)',
+    md: '0 4px 16px rgba(0, 0, 0, 0.32)',
+    lg: '0 12px 32px rgba(0, 0, 0, 0.36)',
+  },
+)

package/src/theme/themes/light.ts

@@ -0,0 +1,60 @@
+import { PlatformTheme } from '../tokens.js'
+import { neutral, status } from './palette.js'
+import { createPlatformTheme } from './shared.js'
+
+const accent = neutral[700]
+const borderStrong = neutral[400]
+const danger = status.danger.light
+const surface = neutral[0]
+
+export const lightTheme: PlatformTheme = createPlatformTheme(
+  'light',
+  {
+    bg: neutral[75],
+    surface,
+    surfaceHover: neutral[25],
+    surfaceActive: neutral[50],
+    elevated: surface,
+    text: neutral[900],
+    textSecondary: neutral[500],
+    textDisabled: borderStrong,
+    textInverse: neutral[50],
+    accent,
+    accentHover: neutral[800],
+    accentMuted: neutral[100],
+    border: neutral[200],
+    borderStrong,
+    divider: neutral[125],
+    danger,
+    textDanger: danger,
+    warning: status.warning.light,
+    success: status.success.light,
+    info: neutral[500],
+    semanticBlue: '#5f97e8',
+    semanticBlueText: '#356fae',
+    semanticBlueMuted: '#e5effd',
+    semanticBlueBorder: '#cfe0f8',
+    semanticOrange: '#d99a21',
+    semanticOrangeText: '#8a6012',
+    semanticOrangeMuted: '#f8edd6',
+    semanticOrangeBorder: '#efd99e',
+    semanticGreen: '#4f9d67',
+    semanticGreenText: '#3f7c52',
+    semanticGreenMuted: '#e1f0e6',
+    semanticGreenBorder: '#c8e2d0',
+    semanticRed: '#c9635f',
+    semanticRedText: '#964947',
+    semanticRedMuted: '#f5e3e2',
+    semanticRedBorder: '#ebcac8',
+    focus: accent,
+    selection: neutral[175],
+    appViewport: neutral[25],
+    chromeTitlebar: neutral[100],
+    chromeTabStrip: neutral[50],
+  },
+  {
+    sm: '0 1px 2px rgba(28, 28, 28, 0.05)',
+    md: '0 4px 16px rgba(28, 28, 28, 0.07)',
+    lg: '0 12px 32px rgba(28, 28, 28, 0.1)',
+  },
+)

package/src/theme/themes/palette.ts

@@ -0,0 +1,44 @@
+/**
+ * Primitive palette — true neutral grays (no blue cast) and muted status hues.
+ * Light/dark themes compose semantic tokens from these; alias duplicates locally.
+ */
+export const neutral = {
+  /** Light end — subtle white matrix for layered surfaces */
+  0: '#ffffff',
+  25: '#fcfcfc',
+  50: '#f9f9f9',
+  75: '#f6f6f6',
+  100: '#f2f2f2',
+  125: '#ececec',
+  150: '#e6e6e6',
+  175: '#dfdfdf',
+  200: '#d8d8d8',
+  300: '#bdbdbd',
+  400: '#949494',
+  500: '#6e6e6e',
+  600: '#525252',
+  700: '#424242',
+  /** Dark end — professional charcoal (not near-black) */
+  775: '#333333',
+  800: '#2e2e2e',
+  825: '#292929',
+  850: '#242424',
+  875: '#202020',
+  900: '#1c1c1c',
+} as const
+
+/** Muted semantic status colors — restrained for enterprise UI. */
+export const status = {
+  danger: {
+    light: '#b91c1c',
+    dark: '#e57373',
+  },
+  warning: {
+    light: '#b45309',
+    dark: '#d4a017',
+  },
+  success: {
+    light: '#2d6a4f',
+    dark: '#6b9e78',
+  },
+} as const

package/src/theme/themes/shared.ts

@@ -0,0 +1,68 @@
+import { PlatformTheme } from '../tokens.js'
+import { PLATFORM_FONT_FAMILY } from '../platformFont.js'
+
+/** Theme-agnostic tokens merged into every `PlatformTheme` (light + dark). */
+export type PlatformThemeShared = Pick<
+  PlatformTheme,
+  'typography' | 'spacing' | 'radius' | 'transition' | 'zIndex'
+>
+
+export const platformThemeShared = {
+  typography: {
+    fontFamily: PLATFORM_FONT_FAMILY,
+    fontFamilyContent:
+      "'Source Sans 3', 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif",
+    fontFamilyMono: "'JetBrains Mono', ui-monospace, monospace",
+    fontSizeBase: '15px',
+    fontSizeXs: '12px',
+    fontSizeSm: '14px',
+    fontSizeLg: '18px',
+    fontSizeXl: '22px',
+    lineHeightBase: 1.5,
+    lineHeightTight: 1.25,
+    fontWeightNormal: 400,
+    fontWeightMedium: 500,
+    fontWeightBold: 600,
+  },
+  spacing: {
+    xs: '4px',
+    sm: '8px',
+    md: '16px',
+    lg: '24px',
+    xl: '32px',
+    xxl: '48px',
+  },
+  radius: {
+    sm: '7px',
+    md: '11px',
+    lg: '16px',
+    full: '9999px',
+  },
+  transition: {
+    fast: '120ms ease',
+    base: '200ms ease',
+    slow: '320ms ease',
+  },
+  zIndex: {
+    ziAppBase: 0,
+    ziAppSidebar: 10,
+    ziAppChrome: 20,
+    ziAppViewportToolbar: 25,
+    ziAppMenus: 100,
+    ziAppToast: 200,
+    ziAppModal: 300,
+  },
+} satisfies PlatformThemeShared
+
+export function createPlatformTheme(
+  mode: PlatformTheme['mode'],
+  colors: PlatformTheme['colors'],
+  shadow: PlatformTheme['shadow'],
+): PlatformTheme {
+  return {
+    mode,
+    ...platformThemeShared,
+    colors,
+    shadow,
+  }
+}

package/src/theme/tokens.ts

@@ -0,0 +1,114 @@
+export type PlatformThemeMode = 'dark' | 'light'
+
+/** Nested theme domains → flattened to `--platform-<domain>-<key>` CSS variables. */
+export interface PlatformTheme {
+  mode: PlatformThemeMode
+
+  colors: {
+    bg: string
+    surface: string
+    surfaceHover: string
+    surfaceActive: string
+    elevated: string
+    text: string
+    textSecondary: string
+    textDisabled: string
+    textInverse: string
+    accent: string
+    accentHover: string
+    accentMuted: string
+    border: string
+    borderStrong: string
+    divider: string
+    /** Fill / border for destructive controls (e.g. danger button). */
+    danger: string
+    /** Foreground for destructive labels (menus, inline actions). */
+    textDanger: string
+    warning: string
+    success: string
+    info: string
+    /** Suite semantic blue, based on PureScience brand blue. */
+    semanticBlue: string
+    semanticBlueText: string
+    semanticBlueMuted: string
+    semanticBlueBorder: string
+    /** Suite semantic orange, based on the PureScience highlight orange. */
+    semanticOrange: string
+    semanticOrangeText: string
+    semanticOrangeMuted: string
+    semanticOrangeBorder: string
+    /** Suite semantic green, balanced to the blue/orange saturation. */
+    semanticGreen: string
+    semanticGreenText: string
+    semanticGreenMuted: string
+    semanticGreenBorder: string
+    /** Suite semantic red, balanced to the blue/orange saturation. */
+    semanticRed: string
+    semanticRedText: string
+    semanticRedMuted: string
+    semanticRedBorder: string
+    focus: string
+    selection: string
+    /** Background behind embedded app iframes */
+    appViewport: string
+    /** Shell frameless titlebar row (menus, window controls). */
+    chromeTitlebar: string
+    /** Shell workspace tab strip row. */
+    chromeTabStrip: string
+  }
+
+  typography: {
+    fontFamily: string
+    fontFamilyContent: string
+    fontFamilyMono: string
+    fontSizeBase: string
+    fontSizeXs: string
+    fontSizeSm: string
+    fontSizeLg: string
+    fontSizeXl: string
+    lineHeightBase: number
+    lineHeightTight: number
+    fontWeightNormal: number
+    fontWeightMedium: number
+    fontWeightBold: number
+  }
+
+  spacing: {
+    xs: string
+    sm: string
+    md: string
+    lg: string
+    xl: string
+    xxl: string
+  }
+
+  radius: {
+    sm: string
+    md: string
+    lg: string
+    full: string
+  }
+
+  shadow: {
+    sm: string
+    md: string
+    lg: string
+  }
+
+  transition: {
+    fast: string
+    base: string
+    slow: string
+  }
+
+  /** Semantic stacking — values live in `themes/shared.ts` (`platformThemeShared`). */
+  zIndex: {
+    ziAppBase: number
+    ziAppSidebar: number
+    ziAppChrome: number
+    ziAppViewportToolbar: number
+    ziAppMenus: number
+    ziAppToast: number
+    ziAppModal: number
+  }
+}