@puredesktop/puredesktop-ui-bridge 2.1.4 → 2.1.7

package/src/theme/surfaceRoleSelectors.ts

@@ -1,113 +1,177 @@
 import { css, type RuleSet } from 'styled-components'
 
 /**
- * Hand-written surface role aliases for app chrome (`--{prefix}-ink`, etc.).
+ * 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`.
+ * Palette ids are still accepted, but each role is derived from the shared
+ * factory/platform variables so apps cannot drift into an older color system.
  */
 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;
+      --${p}-ink: var(--factory-color-ink, var(--platform-colors-text));
+      --${p}-muted: var(
+        --factory-color-muted,
+        var(--platform-colors-text-secondary)
+      );
+      --${p}-faint: var(--platform-colors-text-disabled);
+      --${p}-accent: var(--factory-color-ink, var(--platform-colors-text));
+      --${p}-bg: var(--factory-color-ground, var(--platform-colors-bg));
+      --${p}-desk: var(--factory-color-ground, var(--platform-colors-bg));
+      --${p}-paper: var(--factory-color-paper, var(--platform-colors-surface));
     }
 
     [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;
+      --${p}-ink: var(--factory-color-ink, var(--platform-colors-text));
+      --${p}-muted: var(
+        --factory-color-muted,
+        var(--platform-colors-text-secondary)
+      );
+      --${p}-faint: var(--platform-colors-text-disabled);
+      --${p}-accent: var(--platform-colors-border-strong);
+      --${p}-bg: color-mix(
+        in srgb,
+        var(--factory-color-ground, var(--platform-colors-bg)) 92%,
+        var(--factory-color-ink, var(--platform-colors-text))
+      );
+      --${p}-desk: var(--${p}-bg);
+      --${p}-paper: var(--factory-color-paper, var(--platform-colors-surface));
     }
 
     [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;
+      --${p}-ink: var(--factory-color-ink, var(--platform-colors-text));
+      --${p}-muted: var(
+        --factory-color-muted,
+        var(--platform-colors-text-secondary)
+      );
+      --${p}-faint: var(--platform-colors-text-disabled);
+      --${p}-accent: var(--platform-colors-border-strong);
+      --${p}-bg: color-mix(
+        in srgb,
+        var(--factory-color-ground, var(--platform-colors-bg)) 96%,
+        var(--platform-colors-border-strong)
+      );
+      --${p}-desk: var(--${p}-bg);
+      --${p}-paper: var(--factory-color-paper, var(--platform-colors-surface));
     }
 
     [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;
+      --${p}-ink: var(--factory-color-ink, var(--platform-colors-text));
+      --${p}-muted: var(
+        --factory-color-muted,
+        var(--platform-colors-text-secondary)
+      );
+      --${p}-faint: var(--platform-colors-text-disabled);
+      --${p}-accent: var(--factory-color-positive, var(--platform-colors-accent));
+      --${p}-bg: color-mix(
+        in srgb,
+        var(--factory-color-ground, var(--platform-colors-bg)) 94%,
+        var(--factory-color-positive, var(--platform-colors-accent))
+      );
+      --${p}-desk: var(--${p}-bg);
+      --${p}-paper: var(--factory-color-paper, var(--platform-colors-surface));
     }
 
     [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;
+      --${p}-ink: var(--factory-color-ink, var(--platform-colors-text));
+      --${p}-muted: var(
+        --factory-color-muted,
+        var(--platform-colors-text-secondary)
+      );
+      --${p}-faint: var(--platform-colors-text-disabled);
+      --${p}-accent: var(--platform-colors-border-strong);
+      --${p}-bg: color-mix(
+        in srgb,
+        var(--factory-color-ground, var(--platform-colors-bg)) 95%,
+        var(--platform-colors-border-strong)
+      );
+      --${p}-desk: var(--${p}-bg);
+      --${p}-paper: var(--factory-color-paper, var(--platform-colors-surface));
     }
 
     [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;
+      --${p}-ink: var(--factory-color-ink, var(--platform-colors-text));
+      --${p}-muted: var(
+        --factory-color-muted,
+        var(--platform-colors-text-secondary)
+      );
+      --${p}-faint: var(--platform-colors-text-disabled);
+      --${p}-accent: var(--factory-color-ink, var(--platform-colors-text));
+      --${p}-bg: var(--factory-color-ground, var(--platform-colors-bg));
+      --${p}-desk: var(--factory-color-ground, var(--platform-colors-bg));
+      --${p}-paper: var(--factory-color-paper, var(--platform-colors-surface));
     }
 
     [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;
+      --${p}-ink: var(--factory-color-ink, var(--platform-colors-text));
+      --${p}-muted: var(
+        --factory-color-muted,
+        var(--platform-colors-text-secondary)
+      );
+      --${p}-faint: var(--platform-colors-text-disabled);
+      --${p}-accent: var(--platform-colors-border-strong);
+      --${p}-bg: color-mix(
+        in srgb,
+        var(--factory-color-ground, var(--platform-colors-bg)) 88%,
+        var(--factory-color-ink, var(--platform-colors-text))
+      );
+      --${p}-desk: var(--${p}-bg);
+      --${p}-paper: var(--factory-color-paper, var(--platform-colors-surface));
     }
 
     [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;
+      --${p}-ink: var(--factory-color-ink, var(--platform-colors-text));
+      --${p}-muted: var(
+        --factory-color-muted,
+        var(--platform-colors-text-secondary)
+      );
+      --${p}-faint: var(--platform-colors-text-disabled);
+      --${p}-accent: var(--platform-colors-border-strong);
+      --${p}-bg: color-mix(
+        in srgb,
+        var(--factory-color-ground, var(--platform-colors-bg)) 92%,
+        var(--platform-colors-border-strong)
+      );
+      --${p}-desk: var(--${p}-bg);
+      --${p}-paper: var(--factory-color-paper, var(--platform-colors-surface));
     }
 
     [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;
+      --${p}-ink: var(--factory-color-ink, var(--platform-colors-text));
+      --${p}-muted: var(
+        --factory-color-muted,
+        var(--platform-colors-text-secondary)
+      );
+      --${p}-faint: var(--platform-colors-text-disabled);
+      --${p}-accent: var(--factory-color-positive, var(--platform-colors-accent));
+      --${p}-bg: color-mix(
+        in srgb,
+        var(--factory-color-ground, var(--platform-colors-bg)) 90%,
+        var(--factory-color-positive, var(--platform-colors-accent))
+      );
+      --${p}-desk: var(--${p}-bg);
+      --${p}-paper: var(--factory-color-paper, var(--platform-colors-surface));
     }
 
     [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;
+      --${p}-ink: var(--factory-color-ink, var(--platform-colors-text));
+      --${p}-muted: var(
+        --factory-color-muted,
+        var(--platform-colors-text-secondary)
+      );
+      --${p}-faint: var(--platform-colors-text-disabled);
+      --${p}-accent: var(--platform-colors-border-strong);
+      --${p}-bg: color-mix(
+        in srgb,
+        var(--factory-color-ground, var(--platform-colors-bg)) 91%,
+        var(--platform-colors-border-strong)
+      );
+      --${p}-desk: var(--${p}-bg);
+      --${p}-paper: var(--factory-color-paper, var(--platform-colors-surface));
     }
   `
 }

package/src/theme/themes/dark.ts

@@ -1,59 +1,60 @@
 import { PlatformTheme } from '../tokens.js'
-import { neutral, status } from './palette.js'
+import { neutral } from './palette.js'
 import { createPlatformTheme } from './shared.js'
 
-const accent = neutral[700]
-const danger = status.danger.dark
+const accent = neutral[150]
+const danger = '#e0796e'
+const positive = '#57b988'
 
 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],
+    bg: '#202024',
+    surface: '#26262a',
+    surfaceHover: '#2c2c30',
+    surfaceActive: '#161619',
+    elevated: '#26262a',
+    text: '#ececef',
+    textSecondary: '#c9c9cf',
+    textDisabled: '#6e6e74',
+    textInverse: '#1b1b1e',
     accent,
-    accentHover: neutral[600],
-    accentMuted: neutral[800],
-    border: neutral[775],
-    borderStrong: neutral[700],
-    divider: neutral[775],
+    accentHover: neutral[100],
+    accentMuted: '#313135',
+    border: '#313135',
+    borderStrong: '#43434a',
+    divider: '#313135',
     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',
+    warning: '#e0b257',
+    success: positive,
+    info: '#6fa0e0',
+    semanticBlue: '#6fa0e0',
+    semanticBlueText: '#a8c8f0',
+    semanticBlueMuted: '#1c2a3c',
+    semanticBlueBorder: '#365373',
+    semanticOrange: '#e0b257',
+    semanticOrangeText: '#f0ce8a',
+    semanticOrangeMuted: '#3a3322',
+    semanticOrangeBorder: '#6d5b2f',
+    semanticGreen: positive,
+    semanticGreenText: '#8fe0b6',
+    semanticGreenMuted: '#18342a',
+    semanticGreenBorder: '#32684d',
+    semanticRed: danger,
+    semanticRedText: '#f0a89e',
+    semanticRedMuted: '#3a211d',
+    semanticRedBorder: '#753f38',
     focus: accent,
-    selection: neutral[800],
+    selection: '#313135',
     /** Embedded plugin iframe canvas — must stay dark in dark mode */
-    appViewport: neutral[900],
-    chromeTitlebar: neutral[900],
-    chromeTabStrip: neutral[875],
+    appViewport: '#202024',
+    chromeTitlebar: '#202024',
+    chromeTabStrip: '#1b1b1e',
   },
   {
-    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)',
+    sm: 'none',
+    md: '0 8px 24px rgba(0, 0, 0, 0.3)',
+    lg: '0 18px 44px rgba(0, 0, 0, 0.38)',
   },
 )

package/src/theme/themes/light.ts

@@ -2,59 +2,61 @@ 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 accent = neutral[900]
+const positive = status.success.light
+const positiveText = '#16683f'
+const positiveBg = '#eef7f1'
+const borderStrong = neutral[175]
 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,
+    bg: neutral[25],
+    surface: neutral[50],
+    surfaceHover: neutral[100],
+    surfaceActive: neutral[100],
+    elevated: neutral[0],
     text: neutral[900],
-    textSecondary: neutral[500],
-    textDisabled: borderStrong,
-    textInverse: neutral[50],
+    textSecondary: neutral[700],
+    textDisabled: neutral[500],
+    textInverse: neutral[0],
     accent,
-    accentHover: neutral[800],
+    accentHover: neutral[900],
     accentMuted: neutral[100],
-    border: neutral[200],
+    border: neutral[150],
     borderStrong,
-    divider: neutral[125],
+    divider: neutral[150],
     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',
+    success: positive,
+    info: status.info.light,
+    semanticBlue: status.info.light,
+    semanticBlueText: '#244f87',
+    semanticBlueMuted: '#e8f0fb',
+    semanticBlueBorder: '#b9cbe4',
+    semanticOrange: status.warning.light,
+    semanticOrangeText: '#7a5114',
+    semanticOrangeMuted: '#f3e5c8',
+    semanticOrangeBorder: '#e3c98f',
+    semanticGreen: positive,
+    semanticGreenText: positiveText,
+    semanticGreenMuted: positiveBg,
+    semanticGreenBorder: positive,
+    semanticRed: status.danger.light,
+    semanticRedText: '#8a2d24',
+    semanticRedMuted: '#f4dfdc',
+    semanticRedBorder: '#dfb7b1',
     focus: accent,
-    selection: neutral[175],
+    selection: neutral[100],
     appViewport: neutral[25],
-    chromeTitlebar: neutral[100],
-    chromeTabStrip: neutral[50],
+    chromeTitlebar: neutral[25],
+    chromeTabStrip: neutral[75],
   },
   {
-    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)',
+    sm: 'none',
+    md: '0 8px 24px rgb(18 18 22 / 0.08)',
+    lg: '0 18px 48px rgb(18 18 22 / 0.13)',
   },
 )

package/src/theme/themes/palette.ts

@@ -1,44 +1,46 @@
 /**
- * Primitive palette — true neutral grays (no blue cast) and muted status hues.
- * Light/dark themes compose semantic tokens from these; alias duplicates locally.
+ * Primitive palette from the Pure design system.
+ * Neutral surface ramp, near-black ink, and semantic color used only for meaning.
  */
 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',
+  25: '#fbfbfc',
+  50: '#f8f8fa',
+  75: '#ececef',
+  100: '#eaeaee',
+  125: '#e8e8ec',
+  150: '#e5e5e9',
+  175: '#dadade',
+  200: '#c9c9cf',
+  300: '#b6b6bd',
+  400: '#aaaab1',
+  500: '#9a9aa0',
+  600: '#6a6a70',
+  700: '#3a3a3e',
+  775: '#313135',
+  800: '#2a2a2f',
+  825: '#26262a',
+  850: '#202024',
+  875: '#1b1b1e',
+  900: '#1b1b1e',
 } as const
 
-/** Muted semantic status colors — restrained for enterprise UI. */
+/** Restrained semantic status colors. */
 export const status = {
   danger: {
-    light: '#b91c1c',
-    dark: '#b94848',
+    light: '#b23a2e',
+    dark: '#d9817d',
   },
   warning: {
-    light: '#b45309',
-    dark: '#d4a017',
+    light: '#c98a2b',
+    dark: '#e5ad3e',
   },
   success: {
-    light: '#2d6a4f',
-    dark: '#6b9e78',
+    light: '#1f8a55',
+    dark: '#58bd80',
+  },
+  info: {
+    light: '#3b6fb0',
+    dark: '#8eb4e8',
   },
 } as const

package/src/theme/themes/shared.ts

@@ -10,15 +10,15 @@ export type PlatformThemeShared = Pick<
 export const platformThemeShared = {
   typography: {
     fontFamily: PLATFORM_FONT_FAMILY,
-    fontFamilyContent:
-      "'Source Sans 3', 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif",
-    fontFamilyMono: "'JetBrains Mono', ui-monospace, monospace",
-    fontSizeBase: '15px',
-    fontSizeXs: '12px',
-    fontSizeSm: '14px',
-    fontSizeLg: '18px',
-    fontSizeXl: '22px',
-    lineHeightBase: 1.5,
+    fontFamilyContent: "'Source Serif 4', Georgia, serif",
+    fontFamilyMono:
+      "'JetBrains Mono', ui-monospace, monospace",
+    fontSizeBase: '14.5px',
+    fontSizeXs: '11px',
+    fontSizeSm: '13px',
+    fontSizeLg: '17px',
+    fontSizeXl: '24px',
+    lineHeightBase: 1.6,
     lineHeightTight: 1.25,
     fontWeightNormal: 400,
     fontWeightMedium: 500,
@@ -27,16 +27,16 @@ export const platformThemeShared = {
   spacing: {
     xs: '4px',
     sm: '8px',
-    md: '16px',
-    lg: '24px',
-    xl: '32px',
-    xxl: '48px',
+    md: '12px',
+    lg: '16px',
+    xl: '24px',
+    xxl: '32px',
   },
   radius: {
-    sm: '7px',
-    md: '11px',
-    lg: '16px',
-    full: '9999px',
+    sm: '0px',
+    md: '0px',
+    lg: '0px',
+    full: '999px',
   },
   transition: {
     fast: '120ms ease',

package/src/theme/utils/GlobalStyles.ts

@@ -1,9 +1,9 @@
 import { createGlobalStyle } from 'styled-components'
 import { themeToCssVars } from './cssVariables.js'
+import { appIdentityCss } from '../appIdentityCss.js'
+import { surfaceCss } from '../surfaceCss.js'
 
 export const GlobalStyles = createGlobalStyle`
-	@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
-
 	*,
 	*::before,
 	*::after {
@@ -22,6 +22,9 @@ export const GlobalStyles = createGlobalStyle`
 		${({ theme }) => themeToCssVars(theme)}
 	}
 
+	${appIdentityCss}
+	${surfaceCss}
+
 	body {
 		font-family: var(--platform-typography-font-family);
 		font-size: var(--platform-typography-font-size-base);
@@ -35,10 +38,11 @@ export const GlobalStyles = createGlobalStyle`
 
 	::selection {
 		background: var(--platform-colors-selection);
+		color: var(--platform-colors-text);
 	}
 
 	:focus-visible {
-		outline: 2px solid var(--platform-colors-focus);
+		outline: 1px solid var(--platform-colors-focus);
 		outline-offset: 2px;
 	}
 
@@ -69,8 +73,8 @@ export const GlobalStyles = createGlobalStyle`
 	}
 
 	*::-webkit-scrollbar {
-		width: 8px;
-		height: 8px;
+		width: 10px;
+		height: 10px;
 	}
 
 	*::-webkit-scrollbar-track {
@@ -79,7 +83,7 @@ export const GlobalStyles = createGlobalStyle`
 
 	*::-webkit-scrollbar-thumb {
 		background-color: var(--platform-colors-border);
-		border-radius: 999px;
+		border-radius: 0;
 	}
 
 	*::-webkit-scrollbar-thumb:hover {

package/src/theme/utils/appFrameDocumentStyles.mjs

@@ -1,5 +1,7 @@
 /** Injected once per iframe document by AppFrame / applyThemeFromHost. */
 import { injectPlatformFontStylesheet } from '../platformFont.mjs'
+import { appIdentityCss } from '../appIdentityCss.mjs'
+import { surfaceCss } from '../surfaceCss.mjs'
 
 export const PLATFORM_APP_FRAME_BASE_STYLE_ID = 'platform-app-frame-base'
 
@@ -66,12 +68,15 @@ export const APP_FRAME_DOCUMENT_STYLES_CSS = `
 
   *::-webkit-scrollbar-thumb {
     background-color: var(--platform-colors-border);
-    border-radius: 999px;
+    border-radius: 0;
   }
 
   *::-webkit-scrollbar-thumb:hover {
     background-color: var(--platform-colors-border-strong);
   }
+
+  ${appIdentityCss}
+  ${surfaceCss}
 `
 
 /**