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

package/src/theme/appAccents.ts

@@ -1,87 +1,115 @@
-import type { PlatformTheme } from './tokens.js'
-
-/**
- * Per-app accent identity, owned centrally by the shared UI (not by each app).
- *
- * The brand system assigns every app one hue ~28–32° apart so the suite reads
- * as a family; opening a different app should feel like being "somewhere else".
- * The shell derives each app's accent from this map and injects it into that
- * app's theme bridge payload, so no app ships its own brand CSS.
- */
-
-/** App slug → accent hue in degrees (PURE_BRAND_SYSTEM §2.2). */
-export const APP_ACCENT_HUES: Record<string, number> = {
-  purefiles: 70,
-  files: 70,
-  writer: 212,
-  paper: 200,
-  book: 150,
-  chat: 232,
-  tasks: 8,
-  review: 265,
-  knowledge: 38,
-  slides: 295,
-  mail: 232,
-  chart: 200,
-  reports: 325,
-  vibes: 348,
-  today: 38,
-  calendar: 175,
-  pages: 265,
-}
-
-/**
- * Pale hues (~30–180°) need a darker accent text so it stays AA-legible on
- * light tints — the one per-app variable besides hue (PURE_BRAND_SYSTEM §2.2).
- */
-function accentTextLightness(hue: number): number {
-  return hue >= 30 && hue <= 180 ? 31 : 42
-}
-
-export interface DerivedAppAccent {
-  accent: string
-  accentHover: string
-  accentMuted: string
-  accentText: string
-}
-
-/** Derive the accent token set from a single hue. */
-export function deriveAppAccent(hue: number): DerivedAppAccent {
-  return {
-    accent: `hsl(${hue}, 50%, 49%)`,
-    accentHover: `hsl(${hue}, 50%, 42%)`,
-    accentMuted: `hsl(${hue}, 42%, 95%)`,
-    accentText: `hsl(${hue}, 48%, ${accentTextLightness(hue)}%)`,
-  }
-}
-
-export function appAccentForSlug(
-  slug: string | null | undefined,
-): DerivedAppAccent | null {
-  if (!slug) return null
-  const hue = APP_ACCENT_HUES[slug]
-  return typeof hue === 'number' ? deriveAppAccent(hue) : null
-}
-
-/**
- * Overlay an app's accent hue onto the platform theme. Applies in both modes —
- * the accent is the app's identity, used structurally (active tab, selection,
- * focus, links), never as a data-label fill.
- */
-export function applyAppAccentToTheme(
-  theme: PlatformTheme,
-  slug: string | null | undefined,
-): PlatformTheme {
-  const accent = appAccentForSlug(slug)
-  if (!accent) return theme
-  return {
-    ...theme,
-    colors: {
-      ...theme.colors,
-      accent: accent.accent,
-      accentHover: accent.accentHover,
-      accentMuted: accent.accentMuted,
-      focus: accent.accent,
-    },
-  }
-}
+import type { PlatformTheme } from './tokens.js'
+
+/**
+ * Per-app accent identity, owned centrally by the shared UI (not by each app).
+ *
+ * The brand system assigns every app one hue ~28–32° apart so the suite reads
+ * as a family; opening a different app should feel like being "somewhere else".
+ * The shell derives each app's accent from this map and injects it into that
+ * app's theme bridge payload, so no app ships its own brand CSS.
+ */
+
+/** App slug → accent hue in degrees (PURE_BRAND_SYSTEM §2.2). */
+export const APP_ACCENT_HUES: Record<string, number> = {
+  purefiles: 70,
+  files: 70,
+  writer: 212,
+  paper: 200,
+  book: 150,
+  chat: 232,
+  tasks: 8,
+  review: 265,
+  knowledge: 38,
+  slides: 295,
+  mail: 232,
+  chart: 200,
+  reports: 325,
+  vibes: 348,
+  today: 38,
+  calendar: 175,
+  teams: 188,
+  pages: 265,
+  frames: 10,
+  sheets: 115,
+}
+
+/**
+ * Pale hues (~30–180°) need a darker accent text so it stays AA-legible on
+ * light tints — the one per-app variable besides hue (PURE_BRAND_SYSTEM §2.2).
+ */
+function accentTextLightness(hue: number): number {
+  return hue >= 30 && hue <= 180 ? 31 : 42
+}
+
+function darkAccentFillLightness(hue: number): number {
+  return hue >= 30 && hue <= 220 ? 30 : 38
+}
+
+export interface DerivedAppAccent {
+  accent: string
+  accentHover: string
+  accentMuted: string
+  accentText: string
+}
+
+/** Derive the accent token set from a single hue. */
+export function deriveAppAccent(hue: number): DerivedAppAccent {
+  return {
+    accent: `hsl(${hue}, 50%, 49%)`,
+    accentHover: `hsl(${hue}, 50%, 42%)`,
+    accentMuted: `hsl(${hue}, 42%, 95%)`,
+    accentText: `hsl(${hue}, 48%, ${accentTextLightness(hue)}%)`,
+  }
+}
+
+export function appAccentForSlug(
+  slug: string | null | undefined,
+): DerivedAppAccent | null {
+  if (!slug) return null
+  const hue = APP_ACCENT_HUES[slug]
+  return typeof hue === 'number' ? deriveAppAccent(hue) : null
+}
+
+/**
+ * Overlay an app's accent hue onto the platform theme. Applies in both modes —
+ * the accent is the app's identity, used structurally (active tab, selection,
+ * focus, links), never as a data-label fill.
+ */
+export function applyAppAccentToTheme(
+  theme: PlatformTheme,
+  slug: string | null | undefined,
+): PlatformTheme {
+  const accent = appAccentForSlug(slug)
+  if (!accent) return theme
+  const hue = APP_ACCENT_HUES[slug ?? '']
+  const darkAccent =
+    typeof hue === 'number'
+      ? {
+          accent: `hsl(${hue}, 48%, ${darkAccentFillLightness(hue)}%)`,
+          accentHover: `hsl(${hue}, 48%, ${darkAccentFillLightness(hue) + 4}%)`,
+          accentMuted: `hsl(${hue}, 34%, 22%)`,
+        }
+      : null
+  return {
+    ...theme,
+    colors: {
+      ...theme.colors,
+      accent:
+        theme.mode === 'dark'
+          ? darkAccent?.accent ?? accent.accent
+          : accent.accent,
+      accentHover:
+        theme.mode === 'dark'
+          ? darkAccent?.accentHover ?? accent.accentHover
+          : accent.accentHover,
+      accentMuted:
+        theme.mode === 'dark'
+          ? darkAccent?.accentMuted ?? accent.accentMuted
+          : accent.accentMuted,
+      focus:
+        theme.mode === 'dark'
+          ? darkAccent?.accent ?? accent.accent
+          : accent.accent,
+    },
+  }
+}

package/src/theme/buildThemeBridgePayload.ts

@@ -1,23 +1,23 @@
-import type { PlatformThemeBridgePayload } from '../bridge/types.js'
-import { themeToRootCssBlock } from './utils/cssVariables.js'
-import type { PlatformTheme } from './tokens.js'
-import { SURFACE_PALETTE_DEFAULT_ID } from './surfacePalettes.js'
-
-export function normalizeSurfacePaletteId(
-  paletteId: string | null | undefined,
-): string | null {
-  if (!paletteId || paletteId === SURFACE_PALETTE_DEFAULT_ID) return null
-  return paletteId
-}
-
-export function buildThemeBridgePayload(
-  theme: PlatformTheme,
-  surfacePaletteId?: string | null,
-): PlatformThemeBridgePayload {
-  const normalizedPaletteId = normalizeSurfacePaletteId(surfacePaletteId)
-  return {
-    mode: theme.mode,
-    surfacePaletteId: normalizedPaletteId,
-    css: themeToRootCssBlock(theme),
-  }
-}
+import type { PlatformThemeBridgePayload } from '../bridge/types.js'
+import { themeToRootCssBlock } from './utils/cssVariables.js'
+import type { PlatformTheme } from './tokens.js'
+import { SURFACE_PALETTE_DEFAULT_ID } from './surfacePalettes.js'
+
+export function normalizeSurfacePaletteId(
+  paletteId: string | null | undefined,
+): string | null {
+  if (!paletteId || paletteId === SURFACE_PALETTE_DEFAULT_ID) return null
+  return paletteId
+}
+
+export function buildThemeBridgePayload(
+  theme: PlatformTheme,
+  surfacePaletteId?: string | null,
+): PlatformThemeBridgePayload {
+  const normalizedPaletteId = normalizeSurfacePaletteId(surfacePaletteId)
+  return {
+    mode: theme.mode,
+    surfacePaletteId: normalizedPaletteId,
+    css: themeToRootCssBlock(theme),
+  }
+}

package/src/theme/composePlatformTheme.test.ts

@@ -1,30 +1,47 @@
-import { describe, expect, it } from 'vitest'
-import { composePlatformTheme } from './composePlatformTheme.js'
-import { darkTheme } from './themes/dark.js'
-import { lightTheme } from './themes/light.js'
-
-describe('composePlatformTheme', () => {
-  it('applies writer accent and ink surface palette in light mode', () => {
-    const theme = composePlatformTheme(lightTheme, {
-      appSlug: 'writer',
-      surfacePaletteId: 'ink',
-    })
-    expect(theme.colors.appViewport).toBe('#f5f3ef')
-    expect(theme.colors.text).toBe('#2e3338')
-    expect(theme.colors.accent).toBe('#525a65')
-  })
-
-  it('applies surface palette roles in dark mode', () => {
-    const theme = composePlatformTheme(darkTheme, {
-      appSlug: 'writer',
-      surfacePaletteId: 'sepia',
-    })
-    expect(theme.colors.appViewport).toBe('#1a1814')
-    expect(theme.colors.text).toBe('#ece6dc')
-    expect(theme.colors.surface).toBe('#242019')
-  })
-
-  it('returns base theme when composition is empty', () => {
-    expect(composePlatformTheme(lightTheme)).toBe(lightTheme)
-  })
-})
+import { describe, expect, it } from 'vitest'
+import { composePlatformTheme } from './composePlatformTheme.js'
+import { darkTheme } from './themes/dark.js'
+import { lightTheme } from './themes/light.js'
+
+describe('composePlatformTheme', () => {
+  it('applies writer accent and ink surface palette in light mode', () => {
+    const theme = composePlatformTheme(lightTheme, {
+      appSlug: 'writer',
+      surfacePaletteId: 'ink',
+    })
+    expect(theme.colors.appViewport).toBe('#f5f3ef')
+    expect(theme.colors.text).toBe('#2e3338')
+    expect(theme.colors.accent).toBe('#525a65')
+  })
+
+  it('applies surface palette roles in dark mode', () => {
+    const theme = composePlatformTheme(darkTheme, {
+      appSlug: 'writer',
+      surfacePaletteId: 'sepia',
+    })
+    expect(theme.colors.appViewport).toBe('#1a1814')
+    expect(theme.colors.text).toBe('#ece6dc')
+    expect(theme.colors.surface).toBe('#242019')
+    expect(theme.colors.textInverse).toBe('#1a1814')
+  })
+
+  it('darkens warm app accent fills in dark mode', () => {
+    const theme = composePlatformTheme(darkTheme, {
+      appSlug: 'book',
+    })
+    expect(theme.colors.accent).toBe('hsl(150, 48%, 30%)')
+    expect(theme.colors.accentMuted).toBe('hsl(150, 34%, 22%)')
+  })
+
+  it('darkens cyan app accent fills in dark mode', () => {
+    const theme = composePlatformTheme(darkTheme, {
+      appSlug: 'teams',
+    })
+    expect(theme.colors.accent).toBe('hsl(188, 48%, 30%)')
+    expect(theme.colors.accentMuted).toBe('hsl(188, 34%, 22%)')
+  })
+
+  it('returns base theme when composition is empty', () => {
+    expect(composePlatformTheme(lightTheme)).toBe(lightTheme)
+  })
+})

package/src/theme/composePlatformTheme.ts

@@ -1,23 +1,23 @@
-import { applyAppAccentToTheme } from './appAccents.js'
-import { applySurfacePaletteToTheme } from './surfacePalettes.js'
-import type { PlatformTheme } from './tokens.js'
-
-export interface PlatformThemeComposition {
-  appSlug?: string | null
-  surfacePaletteId?: string | null
-}
-
-/** Accent + optional surface palette on top of a base light/dark theme. */
-export function composePlatformTheme(
-  base: PlatformTheme,
-  composition?: PlatformThemeComposition,
-): PlatformTheme {
-  let theme = base
-  if (composition?.appSlug) {
-    theme = applyAppAccentToTheme(theme, composition.appSlug)
-  }
-  if (composition?.surfacePaletteId) {
-    theme = applySurfacePaletteToTheme(theme, composition.surfacePaletteId)
-  }
-  return theme
-}
+import { applyAppAccentToTheme } from './appAccents.js'
+import { applySurfacePaletteToTheme } from './surfacePalettes.js'
+import type { PlatformTheme } from './tokens.js'
+
+export interface PlatformThemeComposition {
+  appSlug?: string | null
+  surfacePaletteId?: string | null
+}
+
+/** Accent + optional surface palette on top of a base light/dark theme. */
+export function composePlatformTheme(
+  base: PlatformTheme,
+  composition?: PlatformThemeComposition,
+): PlatformTheme {
+  let theme = base
+  if (composition?.appSlug) {
+    theme = applyAppAccentToTheme(theme, composition.appSlug)
+  }
+  if (composition?.surfacePaletteId) {
+    theme = applySurfacePaletteToTheme(theme, composition.surfacePaletteId)
+  }
+  return theme
+}

package/src/theme/platformFont.d.mts

@@ -1,7 +1,7 @@
-export declare const PLATFORM_FONT_FAMILY: '"Schibsted Grotesk", sans-serif'
-
-export declare const PLATFORM_FONT_STYLESHEET_ID: 'platform-font-schibsted-grotesk'
-
-export declare const PLATFORM_FONT_STYLESHEET_URL: string
-
-export function injectPlatformFontStylesheet(doc?: Document): void
+export declare const PLATFORM_FONT_FAMILY: '"Schibsted Grotesk", sans-serif'
+
+export declare const PLATFORM_FONT_STYLESHEET_ID: 'platform-font-schibsted-grotesk'
+
+export declare const PLATFORM_FONT_STYLESHEET_URL: string
+
+export function injectPlatformFontStylesheet(doc?: Document): void

package/src/theme/platformFont.mjs

@@ -1,20 +1,20 @@
-/** Shared platform UI font — loaded in shell ThemeProvider and AppFrame iframe apps. */
-export const PLATFORM_FONT_FAMILY = '"Schibsted Grotesk", sans-serif'
-
-export const PLATFORM_FONT_STYLESHEET_ID = 'platform-font-schibsted-grotesk'
-
-export const PLATFORM_FONT_STYLESHEET_URL =
-  'https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&display=swap'
-
-/**
- * @param {Document} [doc]
- */
-export function injectPlatformFontStylesheet(doc = document) {
-  if (doc.getElementById(PLATFORM_FONT_STYLESHEET_ID)) return
-
-  const link = doc.createElement('link')
-  link.id = PLATFORM_FONT_STYLESHEET_ID
-  link.rel = 'stylesheet'
-  link.href = PLATFORM_FONT_STYLESHEET_URL
-  doc.head.appendChild(link)
-}
+/** Shared platform UI font — loaded in shell ThemeProvider and AppFrame iframe apps. */
+export const PLATFORM_FONT_FAMILY = '"Schibsted Grotesk", sans-serif'
+
+export const PLATFORM_FONT_STYLESHEET_ID = 'platform-font-schibsted-grotesk'
+
+export const PLATFORM_FONT_STYLESHEET_URL =
+  'https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&display=swap'
+
+/**
+ * @param {Document} [doc]
+ */
+export function injectPlatformFontStylesheet(doc = document) {
+  if (doc.getElementById(PLATFORM_FONT_STYLESHEET_ID)) return
+
+  const link = doc.createElement('link')
+  link.id = PLATFORM_FONT_STYLESHEET_ID
+  link.rel = 'stylesheet'
+  link.href = PLATFORM_FONT_STYLESHEET_URL
+  doc.head.appendChild(link)
+}

package/src/theme/platformFont.ts

@@ -1,6 +1,6 @@
-export {
-  PLATFORM_FONT_FAMILY,
-  PLATFORM_FONT_STYLESHEET_ID,
-  PLATFORM_FONT_STYLESHEET_URL,
-  injectPlatformFontStylesheet,
-} from './platformFont.mjs'
+export {
+  PLATFORM_FONT_FAMILY,
+  PLATFORM_FONT_STYLESHEET_ID,
+  PLATFORM_FONT_STYLESHEET_URL,
+  injectPlatformFontStylesheet,
+} from './platformFont.mjs'