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

package/src/theme/surfaceRoleSelectors.ts

@@ -1,113 +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;
-    }
-  `
-}
+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: #68717c;
+      --${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

@@ -1,13 +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
+/**
+ * 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

@@ -1,59 +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)',
-  },
-)
+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[600],
+    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

@@ -1,60 +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)',
-  },
-)
+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

@@ -1,44 +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
+/**
+ * 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: '#b94848',
+  },
+  warning: {
+    light: '#b45309',
+    dark: '#d4a017',
+  },
+  success: {
+    light: '#2d6a4f',
+    dark: '#6b9e78',
+  },
+} as const