@puredesktop/puredesktop-ui-bridge 2.1.4 → 2.1.7

package/src/theme/reportsShellChromeSelectors.ts

@@ -1,136 +1,18 @@
 import { css } from 'styled-components'
+import { surfaceRoleSelectors } from './surfaceRoleSelectors.js'
 
-/** Reports builder chrome — designed vars, palette + dark via data attrs. */
+/** Reports builder chrome aliases, derived from the shared factory variables. */
 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;
-  }
+  ${surfaceRoleSelectors('report')}
+
+  --text: var(--report-ink, var(--platform-colors-text));
+  --muted: var(--report-muted, var(--platform-colors-text-secondary));
+  --faint: var(--report-faint, var(--platform-colors-text-disabled));
+  --accent: var(--report-accent, var(--platform-colors-text));
+  --bg: var(--report-bg, var(--platform-colors-bg));
+  --surface: var(--report-paper, var(--platform-colors-surface));
+  --surface-soft: var(--platform-colors-surface-hover);
+  --border: var(--platform-colors-border);
+  --soft-border: var(--platform-colors-divider);
+  --report-desk: var(--bg);
 `

package/src/theme/surfaceCss.mjs

@@ -0,0 +1,37 @@
+export const surfaceCss = `
+  .pure-well {
+    background: var(--well, var(--platform-colors-surface-active));
+    padding: 44px 40px;
+    overflow: hidden;
+  }
+
+  .pure-page {
+    background: var(--page, var(--platform-colors-elevated));
+    border: 1px solid var(--line, var(--platform-colors-divider));
+    box-shadow: var(--page-shadow, var(--platform-shadow-lg));
+    max-width: 660px;
+    margin: 0 auto;
+    padding: 44px 54px;
+  }
+
+  .pure-rail {
+    background: var(--surface, var(--platform-colors-surface));
+  }
+
+  .pure-board {
+    background: var(--canvas, var(--platform-colors-bg));
+    padding: 18px;
+  }
+
+  .pure-panel {
+    background: var(--surface, var(--platform-colors-surface));
+    border: 1px solid var(--line, var(--platform-colors-divider));
+  }
+
+  .pure-panel--active {
+    background: var(--surface, var(--platform-colors-surface));
+    border: 1px solid var(--app-acc, var(--line-strong, var(--platform-colors-border-strong)));
+    border-top-width: 2px;
+    box-shadow: inset 3px 0 0 var(--app-acc, var(--line-strong, var(--platform-colors-border-strong)));
+  }
+`

package/src/theme/surfaceCss.ts

@@ -0,0 +1,37 @@
+export const surfaceCss = `
+  .pure-well {
+    background: var(--well, var(--platform-colors-surface-active));
+    padding: 44px 40px;
+    overflow: hidden;
+  }
+
+  .pure-page {
+    background: var(--page, var(--platform-colors-elevated));
+    border: 1px solid var(--line, var(--platform-colors-divider));
+    box-shadow: var(--page-shadow, var(--platform-shadow-lg));
+    max-width: 660px;
+    margin: 0 auto;
+    padding: 44px 54px;
+  }
+
+  .pure-rail {
+    background: var(--surface, var(--platform-colors-surface));
+  }
+
+  .pure-board {
+    background: var(--canvas, var(--platform-colors-bg));
+    padding: 18px;
+  }
+
+  .pure-panel {
+    background: var(--surface, var(--platform-colors-surface));
+    border: 1px solid var(--line, var(--platform-colors-divider));
+  }
+
+  .pure-panel--active {
+    background: var(--surface, var(--platform-colors-surface));
+    border: 1px solid var(--app-acc, var(--line-strong, var(--platform-colors-border-strong)));
+    border-top-width: 2px;
+    box-shadow: inset 3px 0 0 var(--app-acc, var(--line-strong, var(--platform-colors-border-strong)));
+  }
+`

package/src/theme/surfacePalettes.ts

@@ -1,14 +1,18 @@
 import type { PlatformTheme } from './tokens.js'
 import type { PlatformThemeMode } from './tokens.js'
+import { neutral } from './themes/palette.js'
 
-/** Six roles per mode: text, metadata, accent, window bg, elevated surfaces. */
+/** Theme roles: text ladder, surfaces, and the one active accent. */
 export interface SurfacePaletteRoles {
   ink: string
+  soft: string
   muted: string
-  faint: string
-  accent: string
-  desk: string
+  line: string
+  surface: string
   paper: string
+  accent: string
+  accentBg: string
+  accentText: string
 }
 
 export interface SurfacePalette {
@@ -26,100 +30,130 @@ export const SURFACE_PALETTES: SurfacePalette[] = [
     id: 'ink',
     label: 'Ink',
     light: {
-      ink: '#2e3338',
-      muted: '#68717c',
-      faint: '#9aa2ad',
-      accent: '#525a65',
-      desk: '#f5f3ef',
-      paper: '#fffefa',
+      ink: '#171b21',
+      soft: '#48515c',
+      muted: '#828b96',
+      line: '#dde2e9',
+      surface: '#fcfdfe',
+      paper: '#eef2f7',
+      accent: '#34506f',
+      accentBg: '#dde7f1',
+      accentText: '#283a4f',
     },
     dark: {
-      ink: '#e8eaed',
-      muted: '#9aa2ad',
-      faint: '#6e7681',
-      accent: '#8a929d',
-      desk: '#141618',
-      paper: '#1c1f23',
+      ink: neutral[50],
+      soft: neutral[400],
+      muted: neutral[400],
+      line: neutral[850],
+      surface: neutral[850],
+      paper: neutral[900],
+      accent: neutral[50],
+      accentBg: neutral[850],
+      accentText: neutral[50],
     },
   },
   {
     id: 'sepia',
     label: 'Sepia',
     light: {
-      ink: '#3a342c',
-      muted: '#7d7468',
-      faint: '#a89e90',
-      accent: '#6b5d49',
-      desk: '#f4efe6',
-      paper: '#fffdf6',
+      ink: '#33260f',
+      soft: '#675135',
+      muted: '#9a8460',
+      line: '#e7dcc4',
+      surface: '#fcf8ef',
+      paper: '#f4ecd8',
+      accent: '#a25c00',
+      accentBg: '#ecd49b',
+      accentText: '#6e4400',
     },
     dark: {
-      ink: '#ece6dc',
-      muted: '#a89e90',
-      faint: '#7d7468',
-      accent: '#9a8468',
-      desk: '#1a1814',
-      paper: '#242019',
+      ink: neutral[100],
+      soft: neutral[400],
+      muted: neutral[400],
+      line: neutral[850],
+      surface: neutral[825],
+      paper: neutral[875],
+      accent: neutral[300],
+      accentBg: neutral[850],
+      accentText: neutral[100],
     },
   },
   {
     id: 'slate',
     label: 'Slate',
     light: {
-      ink: '#2b323c',
-      muted: '#6e7a88',
-      faint: '#97a2af',
-      accent: '#4d6378',
-      desk: '#eef1f4',
-      paper: '#fdfeff',
+      ink: '#152233',
+      soft: '#465467',
+      muted: '#798596',
+      line: '#dde6f1',
+      surface: '#fbfcff',
+      paper: '#eef4fb',
+      accent: '#1f63c9',
+      accentBg: '#d2e3f8',
+      accentText: '#1a528f',
     },
     dark: {
-      ink: '#e3e8ef',
-      muted: '#97a2af',
-      faint: '#6e7a88',
-      accent: '#7a94ad',
-      desk: '#13171c',
-      paper: '#1a2028',
+      ink: neutral[50],
+      soft: neutral[400],
+      muted: neutral[400],
+      line: neutral[850],
+      surface: neutral[850],
+      paper: neutral[900],
+      accent: neutral[300],
+      accentBg: neutral[850],
+      accentText: neutral[50],
     },
   },
   {
     id: 'forest',
     label: 'Forest',
     light: {
-      ink: '#2d352f',
-      muted: '#6f7b72',
-      faint: '#98a39b',
-      accent: '#4e6b58',
-      desk: '#eff2ee',
-      paper: '#fdfffd',
+      ink: '#122618',
+      soft: '#425046',
+      muted: '#75897a',
+      line: '#dae8dd',
+      surface: '#f9fcf8',
+      paper: '#ecf4ed',
+      accent: '#107a43',
+      accentBg: '#cce8d2',
+      accentText: '#0e5532',
     },
     dark: {
-      ink: '#e2ebe4',
-      muted: '#98a39b',
-      faint: '#6f7b72',
-      accent: '#6d9479',
-      desk: '#141916',
-      paper: '#1b221d',
+      ink: neutral[50],
+      soft: neutral[400],
+      muted: neutral[400],
+      line: neutral[850],
+      surface: neutral[850],
+      paper: neutral[900],
+      accent: '#58bd80',
+      accentBg: neutral[850],
+      accentText: neutral[50],
     },
   },
   {
     id: 'plum',
     label: 'Plum',
     light: {
-      ink: '#342e38',
-      muted: '#7a7280',
-      faint: '#a59dab',
-      accent: '#66506e',
-      desk: '#f3f0f4',
-      paper: '#fffdff',
+      ink: '#261426',
+      soft: '#554656',
+      muted: '#8b7d90',
+      line: '#e6dbeb',
+      surface: '#fdfafd',
+      paper: '#f3ecf6',
+      accent: '#8a2ba6',
+      accentBg: '#e9d0f3',
+      accentText: '#622970',
     },
     dark: {
-      ink: '#ebe6ef',
-      muted: '#a59dab',
-      faint: '#7a7280',
-      accent: '#8f74a0',
-      desk: '#17141a',
-      paper: '#201c24',
+      ink: neutral[50],
+      soft: neutral[400],
+      muted: neutral[400],
+      line: neutral[850],
+      surface: neutral[825],
+      paper: neutral[875],
+      accent: neutral[300],
+      accentBg: neutral[850],
+      accentText: neutral[50],
     },
   },
 ]
@@ -141,7 +175,7 @@ export function surfacePaletteRolesForMode(
 /** 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]
+  return [roles.ink, roles.accent, roles.surface, roles.paper]
 }
 
 /** Overlay a surface palette onto the platform theme (light and dark). */
@@ -157,23 +191,30 @@ export function applySurfacePaletteToTheme(
     ...theme,
     colors: {
       ...theme.colors,
-      bg: roles.desk,
-      surface: roles.paper,
-      surfaceHover: roles.paper,
-      surfaceActive: roles.desk,
-      elevated: roles.paper,
-      appViewport: roles.desk,
+      bg: roles.paper,
+      surface: roles.surface,
+      surfaceHover: roles.surface,
+      surfaceActive: roles.paper,
+      elevated: roles.surface,
+      appViewport: roles.paper,
       text: roles.ink,
-      textSecondary: roles.muted,
-      textDisabled: roles.faint,
-      textInverse: theme.mode === 'dark' ? roles.desk : theme.colors.textInverse,
+      textSecondary: roles.soft,
+      textDisabled: roles.muted,
+      textInverse:
+        theme.mode === 'dark' ? roles.paper : 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,
+      accentMuted: roles.accentBg,
+      border: roles.line,
+      borderStrong: roles.soft,
+      divider: roles.line,
+      focus: roles.accent,
+      semanticGreen: roles.accent,
+      semanticGreenText: roles.accentText,
+      semanticGreenMuted: roles.accentBg,
+      semanticGreenBorder: roles.accent,
+      chromeTitlebar: roles.paper,
+      chromeTabStrip: roles.paper,
     },
   }
 }