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

package/src/theme/reportsShellChromeSelectors.ts

@@ -1,136 +1,136 @@
-import { css } from 'styled-components'
-
-/** Reports builder chrome — designed vars, palette + dark via data attrs. */
-export const reportsShellChromeSelectors = css`
-  :not([data-platform-surface-palette]) &,
-  [data-platform-surface-palette='ink'] & {
-    --text: #2e3338;
-    --muted: #737b86;
-    --faint: #9aa2ad;
-    --accent: #525a65;
-    --bg: #f2f4f7;
-    --surface: #ffffff;
-    --surface-soft: #f7f8fa;
-    --border: #d9dee5;
-    --soft-border: #e7ebf0;
-    --report-desk: #f5f3ef;
-  }
-
-  [data-platform-surface-palette='sepia'] & {
-    --text: #3a342c;
-    --muted: #7d7468;
-    --faint: #a89e90;
-    --accent: #6b5d49;
-    --bg: #f2f0eb;
-    --surface: #fffdf6;
-    --surface-soft: #f4efe6;
-    --border: #d9dee5;
-    --soft-border: #e7ebf0;
-    --report-desk: #f4efe6;
-  }
-
-  [data-platform-surface-palette='slate'] & {
-    --text: #2b323c;
-    --muted: #6e7a88;
-    --faint: #97a2af;
-    --accent: #4d6378;
-    --bg: #eef1f4;
-    --surface: #fdfeff;
-    --surface-soft: #f7f8fa;
-    --border: #d9dee5;
-    --soft-border: #e7ebf0;
-    --report-desk: #eef1f4;
-  }
-
-  [data-platform-surface-palette='forest'] & {
-    --text: #2d352f;
-    --muted: #6f7b72;
-    --faint: #98a39b;
-    --accent: #4e6b58;
-    --bg: #eff2ee;
-    --surface: #fdfffd;
-    --surface-soft: #f7f8fa;
-    --border: #d9dee5;
-    --soft-border: #e7ebf0;
-    --report-desk: #eff2ee;
-  }
-
-  [data-platform-surface-palette='plum'] & {
-    --text: #342e38;
-    --muted: #7a7280;
-    --faint: #a59dab;
-    --accent: #66506e;
-    --bg: #f3f0f4;
-    --surface: #fffdff;
-    --surface-soft: #f7f8fa;
-    --border: #d9dee5;
-    --soft-border: #e7ebf0;
-    --report-desk: #f3f0f4;
-  }
-
-  [data-platform-theme='dark']:not([data-platform-surface-palette]) &,
-  [data-platform-theme='dark'][data-platform-surface-palette='ink'] & {
-    --text: #e8eaed;
-    --muted: #9aa2ad;
-    --faint: #6e7681;
-    --accent: #8a929d;
-    --bg: #141618;
-    --surface: #1c1f23;
-    --surface-soft: #20242a;
-    --border: #2a2f36;
-    --soft-border: #252a31;
-    --report-desk: #141618;
-  }
-
-  [data-platform-theme='dark'][data-platform-surface-palette='sepia'] & {
-    --text: #ece6dc;
-    --muted: #a89e90;
-    --faint: #7d7468;
-    --accent: #9a8468;
-    --bg: #1a1814;
-    --surface: #242019;
-    --surface-soft: #242019;
-    --border: #2a2f36;
-    --soft-border: #252a31;
-    --report-desk: #1a1814;
-  }
-
-  [data-platform-theme='dark'][data-platform-surface-palette='slate'] & {
-    --text: #e3e8ef;
-    --muted: #97a2af;
-    --faint: #6e7a88;
-    --accent: #7a94ad;
-    --bg: #13171c;
-    --surface: #1a2028;
-    --surface-soft: #1a2028;
-    --border: #2a2f36;
-    --soft-border: #252a31;
-    --report-desk: #13171c;
-  }
-
-  [data-platform-theme='dark'][data-platform-surface-palette='forest'] & {
-    --text: #e2ebe4;
-    --muted: #98a39b;
-    --faint: #6f7b72;
-    --accent: #6d9479;
-    --bg: #141916;
-    --surface: #1b221d;
-    --surface-soft: #1b221d;
-    --border: #2a2f36;
-    --soft-border: #252a31;
-    --report-desk: #141916;
-  }
-
-  [data-platform-theme='dark'][data-platform-surface-palette='plum'] & {
-    --text: #ebe6ef;
-    --muted: #a59dab;
-    --faint: #7a7280;
-    --accent: #8f74a0;
-    --bg: #17141a;
-    --surface: #201c24;
-    --surface-soft: #201c24;
-    --border: #2a2f36;
-    --soft-border: #252a31;
-    --report-desk: #17141a;
-  }
-`
+import { css } from 'styled-components'
+
+/** Reports builder chrome — designed vars, palette + dark via data attrs. */
+export const reportsShellChromeSelectors = css`
+  :not([data-platform-surface-palette]) &,
+  [data-platform-surface-palette='ink'] & {
+    --text: #20252d;
+    --muted: #68717d;
+    --faint: #8a94a1;
+    --accent: #2563eb;
+    --bg: #f7f8fa;
+    --surface: #ffffff;
+    --surface-soft: #f2f4f7;
+    --border: #d7dce2;
+    --soft-border: #e7ebf0;
+    --report-desk: #f7f8fa;
+  }
+
+  [data-platform-surface-palette='sepia'] & {
+    --text: #3a342c;
+    --muted: #7d7468;
+    --faint: #a89e90;
+    --accent: #6b5d49;
+    --bg: #f2f0eb;
+    --surface: #fffdf6;
+    --surface-soft: #f4efe6;
+    --border: #d9dee5;
+    --soft-border: #e7ebf0;
+    --report-desk: #f4efe6;
+  }
+
+  [data-platform-surface-palette='slate'] & {
+    --text: #2b323c;
+    --muted: #6e7a88;
+    --faint: #97a2af;
+    --accent: #4d6378;
+    --bg: #eef1f4;
+    --surface: #fdfeff;
+    --surface-soft: #f7f8fa;
+    --border: #d9dee5;
+    --soft-border: #e7ebf0;
+    --report-desk: #eef1f4;
+  }
+
+  [data-platform-surface-palette='forest'] & {
+    --text: #2d352f;
+    --muted: #6f7b72;
+    --faint: #98a39b;
+    --accent: #4e6b58;
+    --bg: #eff2ee;
+    --surface: #fdfffd;
+    --surface-soft: #f7f8fa;
+    --border: #d9dee5;
+    --soft-border: #e7ebf0;
+    --report-desk: #eff2ee;
+  }
+
+  [data-platform-surface-palette='plum'] & {
+    --text: #342e38;
+    --muted: #7a7280;
+    --faint: #a59dab;
+    --accent: #66506e;
+    --bg: #f3f0f4;
+    --surface: #fffdff;
+    --surface-soft: #f7f8fa;
+    --border: #d9dee5;
+    --soft-border: #e7ebf0;
+    --report-desk: #f3f0f4;
+  }
+
+  [data-platform-theme='dark']:not([data-platform-surface-palette]) &,
+  [data-platform-theme='dark'][data-platform-surface-palette='ink'] & {
+    --text: #e8eaed;
+    --muted: #9aa2ad;
+    --faint: #6e7681;
+    --accent: #8a929d;
+    --bg: #141618;
+    --surface: #1c1f23;
+    --surface-soft: #20242a;
+    --border: #2a2f36;
+    --soft-border: #252a31;
+    --report-desk: #141618;
+  }
+
+  [data-platform-theme='dark'][data-platform-surface-palette='sepia'] & {
+    --text: #ece6dc;
+    --muted: #a89e90;
+    --faint: #7d7468;
+    --accent: #9a8468;
+    --bg: #1a1814;
+    --surface: #242019;
+    --surface-soft: #242019;
+    --border: #2a2f36;
+    --soft-border: #252a31;
+    --report-desk: #1a1814;
+  }
+
+  [data-platform-theme='dark'][data-platform-surface-palette='slate'] & {
+    --text: #e3e8ef;
+    --muted: #97a2af;
+    --faint: #6e7a88;
+    --accent: #7a94ad;
+    --bg: #13171c;
+    --surface: #1a2028;
+    --surface-soft: #1a2028;
+    --border: #2a2f36;
+    --soft-border: #252a31;
+    --report-desk: #13171c;
+  }
+
+  [data-platform-theme='dark'][data-platform-surface-palette='forest'] & {
+    --text: #e2ebe4;
+    --muted: #98a39b;
+    --faint: #6f7b72;
+    --accent: #6d9479;
+    --bg: #141916;
+    --surface: #1b221d;
+    --surface-soft: #1b221d;
+    --border: #2a2f36;
+    --soft-border: #252a31;
+    --report-desk: #141916;
+  }
+
+  [data-platform-theme='dark'][data-platform-surface-palette='plum'] & {
+    --text: #ebe6ef;
+    --muted: #a59dab;
+    --faint: #7a7280;
+    --accent: #8f74a0;
+    --bg: #17141a;
+    --surface: #201c24;
+    --surface-soft: #201c24;
+    --border: #2a2f36;
+    --soft-border: #252a31;
+    --report-desk: #17141a;
+  }
+`

package/src/theme/styled.d.ts

@@ -1,5 +1,5 @@
-import type { PlatformTheme } from './tokens.ts'
-
-declare module 'styled-components' {
-  export interface DefaultTheme extends PlatformTheme {}
-}
+import type { PlatformTheme } from './tokens.ts'
+
+declare module 'styled-components' {
+  export interface DefaultTheme extends PlatformTheme {}
+}

package/src/theme/surfacePalettes.ts

@@ -1,178 +1,179 @@
-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,
-    },
-  }
-}
+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: '#68717c',
+      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,
+      textInverse: theme.mode === 'dark' ? roles.desk : theme.colors.textInverse,
+      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,
+    },
+  }
+}