@puredesktop/puredesktop-ui-bridge 2.1.4 → 2.1.7

package/src/theme/appIdentityCss.mjs

@@ -0,0 +1,256 @@
+export const appIdentityCss = `
+  /*
+   * Pure app identity layer.
+   *
+   * Identity owns only chrome: wordmark name, active tab marker, primary button,
+   * and one live/selected region. Theme/status colors remain separate. Hues are
+   * perceptually spaced and lightness-staggered so neighbouring apps differ by
+   * value as well as hue.
+   */
+  :root,
+  :where([data-app]) {
+    --pure-identity-default: #1f9d57;
+    --pure-identity-default-bg: #eef7f1;
+    --pure-identity-default-tx: #15703f;
+    --pure-identity-default-block: #235240;
+    --app-acc: var(--pure-identity-default);
+    --app-bg: var(--pure-identity-default-bg);
+    --app-text: var(--pure-identity-default-tx);
+    --app-block: var(--pure-identity-default-block);
+    --app-primary-fill: var(--app-acc);
+  }
+
+  [data-app='teams'],
+  [data-app='pureteams'] {
+    --app-acc: oklch(0.58 0.13 8);
+    --app-bg: oklch(0.955 0.03 8);
+    --app-text: oklch(0.40 0.12 8);
+    --app-block: oklch(0.40 0.06 8);
+  }
+
+  [data-app='vibes'],
+  [data-app='purevibes'] {
+    --app-acc: oklch(0.50 0.14 26);
+    --app-bg: oklch(0.955 0.03 26);
+    --app-text: oklch(0.40 0.12 26);
+    --app-block: oklch(0.40 0.06 26);
+  }
+
+  [data-app='mail'],
+  [data-app='puremail'] {
+    --app-acc: oklch(0.60 0.12 44);
+    --app-bg: oklch(0.93 0.05 44);
+    --app-text: oklch(0.40 0.12 44);
+    --app-block: oklch(0.40 0.06 44);
+  }
+
+  [data-app='files'],
+  [data-app='purefiles'] {
+    --app-acc: oklch(0.50 0.13 64);
+    --app-bg: oklch(0.955 0.03 64);
+    --app-text: oklch(0.40 0.12 64);
+    --app-block: oklch(0.40 0.06 64);
+  }
+
+  [data-app='slides'],
+  [data-app='pureslides'] {
+    --app-acc: oklch(0.61 0.11 84);
+    --app-bg: oklch(0.955 0.03 84);
+    --app-text: oklch(0.40 0.11 84);
+    --app-block: oklch(0.40 0.06 84);
+  }
+
+  [data-app='writer'],
+  [data-app='purewriter'] {
+    --app-acc: oklch(0.50 0.12 102);
+    --app-bg: oklch(0.955 0.03 102);
+    --app-text: oklch(0.40 0.12 102);
+    --app-block: oklch(0.40 0.06 102);
+  }
+
+  [data-app='manuscript'],
+  [data-app='puremanuscript'] {
+    --app-acc: oklch(0.61 0.12 124);
+    --app-bg: oklch(0.955 0.03 124);
+    --app-text: oklch(0.40 0.12 124);
+    --app-block: oklch(0.40 0.06 124);
+  }
+
+  [data-app='book'],
+  [data-app='purebook'] {
+    --app-acc: oklch(0.48 0.14 148);
+    --app-bg: oklch(0.955 0.03 148);
+    --app-text: oklch(0.40 0.12 148);
+    --app-block: oklch(0.40 0.06 148);
+  }
+
+  [data-app='reports'],
+  [data-app='purereports'] {
+    --app-acc: oklch(0.61 0.12 166);
+    --app-bg: oklch(0.955 0.03 166);
+    --app-text: oklch(0.40 0.12 166);
+    --app-block: oklch(0.40 0.06 166);
+  }
+
+  [data-app='chart'],
+  [data-app='purechart'] {
+    --app-acc: oklch(0.48 0.13 184);
+    --app-bg: oklch(0.955 0.03 184);
+    --app-text: oklch(0.40 0.12 184);
+    --app-block: oklch(0.40 0.06 184);
+  }
+
+  [data-app='knowledge'],
+  [data-app='pureknowledge'] {
+    --app-acc: oklch(0.46 0.11 198);
+    --app-bg: oklch(0.955 0.03 198);
+    --app-text: oklch(0.40 0.11 198);
+    --app-block: oklch(0.40 0.06 198);
+  }
+
+  [data-app='research'],
+  [data-app='pureresearch'] {
+    --app-acc: oklch(0.63 0.12 222);
+    --app-bg: oklch(0.955 0.03 222);
+    --app-text: oklch(0.40 0.12 222);
+    --app-block: oklch(0.40 0.06 222);
+  }
+
+  [data-app='sheets'],
+  [data-app='puresheets'] {
+    --app-acc: oklch(0.50 0.13 244);
+    --app-bg: oklch(0.955 0.03 244);
+    --app-text: oklch(0.40 0.12 244);
+    --app-block: oklch(0.40 0.06 244);
+  }
+
+  [data-app='calendar'],
+  [data-app='purecalendar'] {
+    --app-acc: oklch(0.63 0.13 258);
+    --app-bg: oklch(0.955 0.03 258);
+    --app-text: oklch(0.40 0.12 258);
+    --app-block: oklch(0.40 0.06 258);
+  }
+
+  [data-app='desktop'],
+  [data-app='puredesktop'] {
+    --app-acc: oklch(0.48 0.13 274);
+    --app-bg: oklch(0.955 0.03 274);
+    --app-text: oklch(0.40 0.12 274);
+    --app-block: oklch(0.40 0.06 274);
+  }
+
+  [data-app='plan'],
+  [data-app='pureplan'] {
+    --app-acc: oklch(0.61 0.14 290);
+    --app-bg: oklch(0.955 0.03 290);
+    --app-text: oklch(0.40 0.12 290);
+    --app-block: oklch(0.40 0.06 290);
+  }
+
+  [data-app='review'],
+  [data-app='purereview'] {
+    --app-acc: oklch(0.50 0.15 308);
+    --app-bg: oklch(0.955 0.03 308);
+    --app-text: oklch(0.40 0.12 308);
+    --app-block: oklch(0.40 0.06 308);
+  }
+
+  [data-app='tasks'],
+  [data-app='puretasks'] {
+    --app-acc: oklch(0.63 0.15 324);
+    --app-bg: oklch(0.955 0.03 324);
+    --app-text: oklch(0.40 0.12 324);
+    --app-block: oklch(0.40 0.06 324);
+  }
+
+  [data-app='assistant'],
+  [data-app='pureassistant'] {
+    --app-acc: oklch(0.50 0.15 340);
+    --app-bg: oklch(0.955 0.03 340);
+    --app-text: oklch(0.40 0.12 340);
+    --app-block: oklch(0.40 0.06 340);
+  }
+
+  [data-app='people'],
+  [data-app='purepeople'] {
+    --app-acc: oklch(0.61 0.14 356);
+    --app-bg: oklch(0.955 0.03 356);
+    --app-text: oklch(0.40 0.12 356);
+    --app-block: oklch(0.40 0.06 356);
+  }
+
+  [data-app='slides'],
+  [data-app='pureslides'],
+  [data-app='manuscript'],
+  [data-app='puremanuscript'],
+  [data-app='reports'],
+  [data-app='purereports'],
+  [data-app='research'],
+  [data-app='pureresearch'],
+  [data-app='calendar'],
+  [data-app='purecalendar'],
+  [data-app='plan'],
+  [data-app='pureplan'],
+  [data-app='tasks'],
+  [data-app='puretasks'],
+  [data-app='people'],
+  [data-app='purepeople'] {
+    --app-primary-fill: var(--app-block);
+  }
+
+  .pure-wordmark__prefix {
+    color: var(--platform-colors-text-tertiary, #9a9aa0);
+  }
+
+  .pure-wordmark__name {
+    color: var(--app-acc, var(--platform-colors-text));
+    font-weight: 700;
+  }
+
+  .pure-tab.is-active {
+    box-shadow: inset 0 -2px 0 0 var(--app-acc, var(--platform-colors-text));
+  }
+
+  .pure-viewtab.is-active {
+    border-bottom-color: var(--app-acc, var(--platform-colors-text));
+  }
+
+  .pure-btn--primary {
+    background: var(--app-primary-fill, var(--app-acc, var(--platform-colors-text)));
+    border-color: var(--app-primary-fill, var(--app-acc, var(--platform-colors-text)));
+    color: #fff;
+  }
+
+  .pure-btn--primary.is-light {
+    background: var(--app-block, var(--platform-colors-text));
+    border-color: var(--app-block, var(--platform-colors-text));
+  }
+
+  .pure-btn--bordered {
+    background: var(--platform-colors-surface, #fff);
+    border-color: var(--app-acc, var(--platform-colors-text));
+    color: var(--app-text, var(--platform-colors-text));
+  }
+
+  .pure-selected {
+    border-left-color: var(--app-acc, var(--platform-colors-accent));
+    background: var(--platform-colors-surface, #fff);
+  }
+
+  .pure-selected--chip {
+    background: var(--app-bg, var(--platform-colors-surface-muted));
+  }
+
+  .pure-active-col {
+    border-color: var(--app-acc, var(--platform-colors-accent));
+    border-top-color: var(--app-acc, var(--platform-colors-accent));
+    border-radius: 0;
+    background: var(--platform-colors-surface, #fff);
+  }
+
+  .pure-block {
+    background: var(--app-block, var(--platform-colors-text));
+    color: #fff;
+  }
+`

package/src/theme/appIdentityCss.ts

@@ -0,0 +1,256 @@
+export const appIdentityCss = `
+  /*
+   * Pure app identity layer.
+   *
+   * Identity owns only chrome: wordmark name, active tab marker, primary button,
+   * and one live/selected region. Theme/status colors remain separate. Hues are
+   * perceptually spaced and lightness-staggered so neighbouring apps differ by
+   * value as well as hue.
+   */
+  :root,
+  :where([data-app]) {
+    --pure-identity-default: #1f9d57;
+    --pure-identity-default-bg: #eef7f1;
+    --pure-identity-default-tx: #15703f;
+    --pure-identity-default-block: #235240;
+    --app-acc: var(--pure-identity-default);
+    --app-bg: var(--pure-identity-default-bg);
+    --app-text: var(--pure-identity-default-tx);
+    --app-block: var(--pure-identity-default-block);
+    --app-primary-fill: var(--app-acc);
+  }
+
+  [data-app='teams'],
+  [data-app='pureteams'] {
+    --app-acc: oklch(0.58 0.13 8);
+    --app-bg: oklch(0.955 0.03 8);
+    --app-text: oklch(0.40 0.12 8);
+    --app-block: oklch(0.40 0.06 8);
+  }
+
+  [data-app='vibes'],
+  [data-app='purevibes'] {
+    --app-acc: oklch(0.50 0.14 26);
+    --app-bg: oklch(0.955 0.03 26);
+    --app-text: oklch(0.40 0.12 26);
+    --app-block: oklch(0.40 0.06 26);
+  }
+
+  [data-app='mail'],
+  [data-app='puremail'] {
+    --app-acc: oklch(0.60 0.12 44);
+    --app-bg: oklch(0.93 0.05 44);
+    --app-text: oklch(0.40 0.12 44);
+    --app-block: oklch(0.40 0.06 44);
+  }
+
+  [data-app='files'],
+  [data-app='purefiles'] {
+    --app-acc: oklch(0.50 0.13 64);
+    --app-bg: oklch(0.955 0.03 64);
+    --app-text: oklch(0.40 0.12 64);
+    --app-block: oklch(0.40 0.06 64);
+  }
+
+  [data-app='slides'],
+  [data-app='pureslides'] {
+    --app-acc: oklch(0.61 0.11 84);
+    --app-bg: oklch(0.955 0.03 84);
+    --app-text: oklch(0.40 0.11 84);
+    --app-block: oklch(0.40 0.06 84);
+  }
+
+  [data-app='writer'],
+  [data-app='purewriter'] {
+    --app-acc: oklch(0.50 0.12 102);
+    --app-bg: oklch(0.955 0.03 102);
+    --app-text: oklch(0.40 0.12 102);
+    --app-block: oklch(0.40 0.06 102);
+  }
+
+  [data-app='manuscript'],
+  [data-app='puremanuscript'] {
+    --app-acc: oklch(0.61 0.12 124);
+    --app-bg: oklch(0.955 0.03 124);
+    --app-text: oklch(0.40 0.12 124);
+    --app-block: oklch(0.40 0.06 124);
+  }
+
+  [data-app='book'],
+  [data-app='purebook'] {
+    --app-acc: oklch(0.48 0.14 148);
+    --app-bg: oklch(0.955 0.03 148);
+    --app-text: oklch(0.40 0.12 148);
+    --app-block: oklch(0.40 0.06 148);
+  }
+
+  [data-app='reports'],
+  [data-app='purereports'] {
+    --app-acc: oklch(0.61 0.12 166);
+    --app-bg: oklch(0.955 0.03 166);
+    --app-text: oklch(0.40 0.12 166);
+    --app-block: oklch(0.40 0.06 166);
+  }
+
+  [data-app='chart'],
+  [data-app='purechart'] {
+    --app-acc: oklch(0.48 0.13 184);
+    --app-bg: oklch(0.955 0.03 184);
+    --app-text: oklch(0.40 0.12 184);
+    --app-block: oklch(0.40 0.06 184);
+  }
+
+  [data-app='knowledge'],
+  [data-app='pureknowledge'] {
+    --app-acc: oklch(0.46 0.11 198);
+    --app-bg: oklch(0.955 0.03 198);
+    --app-text: oklch(0.40 0.11 198);
+    --app-block: oklch(0.40 0.06 198);
+  }
+
+  [data-app='research'],
+  [data-app='pureresearch'] {
+    --app-acc: oklch(0.63 0.12 222);
+    --app-bg: oklch(0.955 0.03 222);
+    --app-text: oklch(0.40 0.12 222);
+    --app-block: oklch(0.40 0.06 222);
+  }
+
+  [data-app='sheets'],
+  [data-app='puresheets'] {
+    --app-acc: oklch(0.50 0.13 244);
+    --app-bg: oklch(0.955 0.03 244);
+    --app-text: oklch(0.40 0.12 244);
+    --app-block: oklch(0.40 0.06 244);
+  }
+
+  [data-app='calendar'],
+  [data-app='purecalendar'] {
+    --app-acc: oklch(0.63 0.13 258);
+    --app-bg: oklch(0.955 0.03 258);
+    --app-text: oklch(0.40 0.12 258);
+    --app-block: oklch(0.40 0.06 258);
+  }
+
+  [data-app='desktop'],
+  [data-app='puredesktop'] {
+    --app-acc: oklch(0.48 0.13 274);
+    --app-bg: oklch(0.955 0.03 274);
+    --app-text: oklch(0.40 0.12 274);
+    --app-block: oklch(0.40 0.06 274);
+  }
+
+  [data-app='plan'],
+  [data-app='pureplan'] {
+    --app-acc: oklch(0.61 0.14 290);
+    --app-bg: oklch(0.955 0.03 290);
+    --app-text: oklch(0.40 0.12 290);
+    --app-block: oklch(0.40 0.06 290);
+  }
+
+  [data-app='review'],
+  [data-app='purereview'] {
+    --app-acc: oklch(0.50 0.15 308);
+    --app-bg: oklch(0.955 0.03 308);
+    --app-text: oklch(0.40 0.12 308);
+    --app-block: oklch(0.40 0.06 308);
+  }
+
+  [data-app='tasks'],
+  [data-app='puretasks'] {
+    --app-acc: oklch(0.63 0.15 324);
+    --app-bg: oklch(0.955 0.03 324);
+    --app-text: oklch(0.40 0.12 324);
+    --app-block: oklch(0.40 0.06 324);
+  }
+
+  [data-app='assistant'],
+  [data-app='pureassistant'] {
+    --app-acc: oklch(0.50 0.15 340);
+    --app-bg: oklch(0.955 0.03 340);
+    --app-text: oklch(0.40 0.12 340);
+    --app-block: oklch(0.40 0.06 340);
+  }
+
+  [data-app='people'],
+  [data-app='purepeople'] {
+    --app-acc: oklch(0.61 0.14 356);
+    --app-bg: oklch(0.955 0.03 356);
+    --app-text: oklch(0.40 0.12 356);
+    --app-block: oklch(0.40 0.06 356);
+  }
+
+  [data-app='slides'],
+  [data-app='pureslides'],
+  [data-app='manuscript'],
+  [data-app='puremanuscript'],
+  [data-app='reports'],
+  [data-app='purereports'],
+  [data-app='research'],
+  [data-app='pureresearch'],
+  [data-app='calendar'],
+  [data-app='purecalendar'],
+  [data-app='plan'],
+  [data-app='pureplan'],
+  [data-app='tasks'],
+  [data-app='puretasks'],
+  [data-app='people'],
+  [data-app='purepeople'] {
+    --app-primary-fill: var(--app-block);
+  }
+
+  .pure-wordmark__prefix {
+    color: var(--platform-colors-text-tertiary, #9a9aa0);
+  }
+
+  .pure-wordmark__name {
+    color: var(--app-acc, var(--platform-colors-text));
+    font-weight: 700;
+  }
+
+  .pure-tab.is-active {
+    box-shadow: inset 0 -2px 0 0 var(--app-acc, var(--platform-colors-text));
+  }
+
+  .pure-viewtab.is-active {
+    border-bottom-color: var(--app-acc, var(--platform-colors-text));
+  }
+
+  .pure-btn--primary {
+    background: var(--app-primary-fill, var(--app-acc, var(--platform-colors-text)));
+    border-color: var(--app-primary-fill, var(--app-acc, var(--platform-colors-text)));
+    color: #fff;
+  }
+
+  .pure-btn--primary.is-light {
+    background: var(--app-block, var(--platform-colors-text));
+    border-color: var(--app-block, var(--platform-colors-text));
+  }
+
+  .pure-btn--bordered {
+    background: var(--platform-colors-surface, #fff);
+    border-color: var(--app-acc, var(--platform-colors-text));
+    color: var(--app-text, var(--platform-colors-text));
+  }
+
+  .pure-selected {
+    border-left-color: var(--app-acc, var(--platform-colors-accent));
+    background: var(--platform-colors-surface, #fff);
+  }
+
+  .pure-selected--chip {
+    background: var(--app-bg, var(--platform-colors-surface-muted));
+  }
+
+  .pure-active-col {
+    border-color: var(--app-acc, var(--platform-colors-accent));
+    border-top-color: var(--app-acc, var(--platform-colors-accent));
+    border-radius: 0;
+    background: var(--platform-colors-surface, #fff);
+  }
+
+  .pure-block {
+    background: var(--app-block, var(--platform-colors-text));
+    color: #fff;
+  }
+`

package/src/theme/composePlatformTheme.test.ts

@@ -4,14 +4,17 @@ 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', () => {
+  it('applies ink surface palette in light mode without changing identity chrome', () => {
     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')
+    expect(theme.colors.appViewport).toBe('#eef2f7')
+    expect(theme.colors.surface).toBe('#fcfdfe')
+    expect(theme.colors.text).toBe('#171b21')
+    expect(theme.colors.textSecondary).toBe('#48515c')
+    expect(theme.colors.accent).toBe('#34506f')
+    expect(theme.colors.accentMuted).toBe('#dde7f1')
   })
 
   it('applies surface palette roles in dark mode', () => {
@@ -19,26 +22,52 @@ describe('composePlatformTheme', () => {
       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')
+    expect(theme.colors.appViewport).toBe('#1b1b1e')
+    expect(theme.colors.text).toBe('#eaeaee')
+    expect(theme.colors.surface).toBe('#26262a')
+    expect(theme.colors.textInverse).toBe('#1b1b1e')
   })
 
-  it('darkens warm app accent fills in dark mode', () => {
+  it('applies pushed named theme values in light mode', () => {
+    const sepia = composePlatformTheme(lightTheme, {
+      surfacePaletteId: 'sepia',
+    })
+    expect(sepia.colors.text).toBe('#33260f')
+    expect(sepia.colors.textSecondary).toBe('#675135')
+    expect(sepia.colors.divider).toBe('#e7dcc4')
+    expect(sepia.colors.surface).toBe('#fcf8ef')
+    expect(sepia.colors.appViewport).toBe('#f4ecd8')
+    expect(sepia.colors.accent).toBe('#a25c00')
+    expect(sepia.colors.accentMuted).toBe('#ecd49b')
+    expect(sepia.colors.semanticGreenText).toBe('#6e4400')
+
+    const plum = composePlatformTheme(lightTheme, {
+      surfacePaletteId: 'plum',
+    })
+    expect(plum.colors.text).toBe('#261426')
+    expect(plum.colors.textSecondary).toBe('#554656')
+    expect(plum.colors.divider).toBe('#e6dbeb')
+    expect(plum.colors.surface).toBe('#fdfafd')
+    expect(plum.colors.appViewport).toBe('#f3ecf6')
+    expect(plum.colors.accent).toBe('#8a2ba6')
+    expect(plum.colors.accentMuted).toBe('#e9d0f3')
+    expect(plum.colors.semanticGreenText).toBe('#622970')
+  })
+
+  it('keeps neutral app identity out of the dark platform theme accent', () => {
     const theme = composePlatformTheme(darkTheme, {
       appSlug: 'book',
     })
-    expect(theme.colors.accent).toBe('hsl(150, 48%, 30%)')
-    expect(theme.colors.accentMuted).toBe('hsl(150, 34%, 22%)')
+    expect(theme.colors.accent).toBe(darkTheme.colors.accent)
+    expect(theme.colors.accentMuted).toBe(darkTheme.colors.accentMuted)
   })
 
-  it('darkens cyan app accent fills in dark mode', () => {
+  it('keeps hue app identity separate from the dark platform theme accent', () => {
     const theme = composePlatformTheme(darkTheme, {
       appSlug: 'teams',
     })
-    expect(theme.colors.accent).toBe('hsl(188, 48%, 30%)')
-    expect(theme.colors.accentMuted).toBe('hsl(188, 34%, 22%)')
+    expect(theme.colors.accent).toBe(darkTheme.colors.accent)
+    expect(theme.colors.accentMuted).toBe(darkTheme.colors.accentMuted)
   })
 
   it('returns base theme when composition is empty', () => {

package/src/theme/platformFont.d.mts

@@ -1,6 +1,6 @@
-export declare const PLATFORM_FONT_FAMILY: '"Schibsted Grotesk", sans-serif'
+export declare const PLATFORM_FONT_FAMILY: '"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif'
 
-export declare const PLATFORM_FONT_STYLESHEET_ID: 'platform-font-schibsted-grotesk'
+export declare const PLATFORM_FONT_STYLESHEET_ID: 'platform-font-suite'
 
 export declare const PLATFORM_FONT_STYLESHEET_URL: string
 

package/src/theme/platformFont.mjs

@@ -1,10 +1,11 @@
 /** 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_FAMILY =
+  '"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif'
 
-export const PLATFORM_FONT_STYLESHEET_ID = 'platform-font-schibsted-grotesk'
+export const PLATFORM_FONT_STYLESHEET_ID = 'platform-font-suite'
 
 export const PLATFORM_FONT_STYLESHEET_URL =
-  'https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&display=swap'
+  'https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=JetBrains+Mono:wght@400;500;600&display=swap'
 
 /**
  * @param {Document} [doc]