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

package/src/theme/themes/shared.ts

@@ -1,68 +1,68 @@
-import { PlatformTheme } from '../tokens.js'
-import { PLATFORM_FONT_FAMILY } from '../platformFont.js'
-
-/** Theme-agnostic tokens merged into every `PlatformTheme` (light + dark). */
-export type PlatformThemeShared = Pick<
-  PlatformTheme,
-  'typography' | 'spacing' | 'radius' | 'transition' | 'zIndex'
->
-
-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,
-    lineHeightTight: 1.25,
-    fontWeightNormal: 400,
-    fontWeightMedium: 500,
-    fontWeightBold: 600,
-  },
-  spacing: {
-    xs: '4px',
-    sm: '8px',
-    md: '16px',
-    lg: '24px',
-    xl: '32px',
-    xxl: '48px',
-  },
-  radius: {
-    sm: '7px',
-    md: '11px',
-    lg: '16px',
-    full: '9999px',
-  },
-  transition: {
-    fast: '120ms ease',
-    base: '200ms ease',
-    slow: '320ms ease',
-  },
-  zIndex: {
-    ziAppBase: 0,
-    ziAppSidebar: 10,
-    ziAppChrome: 20,
-    ziAppViewportToolbar: 25,
-    ziAppMenus: 100,
-    ziAppToast: 200,
-    ziAppModal: 300,
-  },
-} satisfies PlatformThemeShared
-
-export function createPlatformTheme(
-  mode: PlatformTheme['mode'],
-  colors: PlatformTheme['colors'],
-  shadow: PlatformTheme['shadow'],
-): PlatformTheme {
-  return {
-    mode,
-    ...platformThemeShared,
-    colors,
-    shadow,
-  }
-}
+import { PlatformTheme } from '../tokens.js'
+import { PLATFORM_FONT_FAMILY } from '../platformFont.js'
+
+/** Theme-agnostic tokens merged into every `PlatformTheme` (light + dark). */
+export type PlatformThemeShared = Pick<
+  PlatformTheme,
+  'typography' | 'spacing' | 'radius' | 'transition' | 'zIndex'
+>
+
+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,
+    lineHeightTight: 1.25,
+    fontWeightNormal: 400,
+    fontWeightMedium: 500,
+    fontWeightBold: 600,
+  },
+  spacing: {
+    xs: '4px',
+    sm: '8px',
+    md: '16px',
+    lg: '24px',
+    xl: '32px',
+    xxl: '48px',
+  },
+  radius: {
+    sm: '7px',
+    md: '11px',
+    lg: '16px',
+    full: '9999px',
+  },
+  transition: {
+    fast: '120ms ease',
+    base: '200ms ease',
+    slow: '320ms ease',
+  },
+  zIndex: {
+    ziAppBase: 0,
+    ziAppSidebar: 10,
+    ziAppChrome: 20,
+    ziAppViewportToolbar: 25,
+    ziAppMenus: 100,
+    ziAppToast: 200,
+    ziAppModal: 300,
+  },
+} satisfies PlatformThemeShared
+
+export function createPlatformTheme(
+  mode: PlatformTheme['mode'],
+  colors: PlatformTheme['colors'],
+  shadow: PlatformTheme['shadow'],
+): PlatformTheme {
+  return {
+    mode,
+    ...platformThemeShared,
+    colors,
+    shadow,
+  }
+}

package/src/theme/tokens.ts

@@ -1,114 +1,114 @@
-export type PlatformThemeMode = 'dark' | 'light'
-
-/** Nested theme domains → flattened to `--platform-<domain>-<key>` CSS variables. */
-export interface PlatformTheme {
-  mode: PlatformThemeMode
-
-  colors: {
-    bg: string
-    surface: string
-    surfaceHover: string
-    surfaceActive: string
-    elevated: string
-    text: string
-    textSecondary: string
-    textDisabled: string
-    textInverse: string
-    accent: string
-    accentHover: string
-    accentMuted: string
-    border: string
-    borderStrong: string
-    divider: string
-    /** Fill / border for destructive controls (e.g. danger button). */
-    danger: string
-    /** Foreground for destructive labels (menus, inline actions). */
-    textDanger: string
-    warning: string
-    success: string
-    info: string
-    /** Suite semantic blue, based on PureScience brand blue. */
-    semanticBlue: string
-    semanticBlueText: string
-    semanticBlueMuted: string
-    semanticBlueBorder: string
-    /** Suite semantic orange, based on the PureScience highlight orange. */
-    semanticOrange: string
-    semanticOrangeText: string
-    semanticOrangeMuted: string
-    semanticOrangeBorder: string
-    /** Suite semantic green, balanced to the blue/orange saturation. */
-    semanticGreen: string
-    semanticGreenText: string
-    semanticGreenMuted: string
-    semanticGreenBorder: string
-    /** Suite semantic red, balanced to the blue/orange saturation. */
-    semanticRed: string
-    semanticRedText: string
-    semanticRedMuted: string
-    semanticRedBorder: string
-    focus: string
-    selection: string
-    /** Background behind embedded app iframes */
-    appViewport: string
-    /** Shell frameless titlebar row (menus, window controls). */
-    chromeTitlebar: string
-    /** Shell workspace tab strip row. */
-    chromeTabStrip: string
-  }
-
-  typography: {
-    fontFamily: string
-    fontFamilyContent: string
-    fontFamilyMono: string
-    fontSizeBase: string
-    fontSizeXs: string
-    fontSizeSm: string
-    fontSizeLg: string
-    fontSizeXl: string
-    lineHeightBase: number
-    lineHeightTight: number
-    fontWeightNormal: number
-    fontWeightMedium: number
-    fontWeightBold: number
-  }
-
-  spacing: {
-    xs: string
-    sm: string
-    md: string
-    lg: string
-    xl: string
-    xxl: string
-  }
-
-  radius: {
-    sm: string
-    md: string
-    lg: string
-    full: string
-  }
-
-  shadow: {
-    sm: string
-    md: string
-    lg: string
-  }
-
-  transition: {
-    fast: string
-    base: string
-    slow: string
-  }
-
-  /** Semantic stacking — values live in `themes/shared.ts` (`platformThemeShared`). */
-  zIndex: {
-    ziAppBase: number
-    ziAppSidebar: number
-    ziAppChrome: number
-    ziAppViewportToolbar: number
-    ziAppMenus: number
-    ziAppToast: number
-    ziAppModal: number
-  }
-}
+export type PlatformThemeMode = 'dark' | 'light'
+
+/** Nested theme domains → flattened to `--platform-<domain>-<key>` CSS variables. */
+export interface PlatformTheme {
+  mode: PlatformThemeMode
+
+  colors: {
+    bg: string
+    surface: string
+    surfaceHover: string
+    surfaceActive: string
+    elevated: string
+    text: string
+    textSecondary: string
+    textDisabled: string
+    textInverse: string
+    accent: string
+    accentHover: string
+    accentMuted: string
+    border: string
+    borderStrong: string
+    divider: string
+    /** Fill / border for destructive controls (e.g. danger button). */
+    danger: string
+    /** Foreground for destructive labels (menus, inline actions). */
+    textDanger: string
+    warning: string
+    success: string
+    info: string
+    /** Suite semantic blue, based on PureScience brand blue. */
+    semanticBlue: string
+    semanticBlueText: string
+    semanticBlueMuted: string
+    semanticBlueBorder: string
+    /** Suite semantic orange, based on the PureScience highlight orange. */
+    semanticOrange: string
+    semanticOrangeText: string
+    semanticOrangeMuted: string
+    semanticOrangeBorder: string
+    /** Suite semantic green, balanced to the blue/orange saturation. */
+    semanticGreen: string
+    semanticGreenText: string
+    semanticGreenMuted: string
+    semanticGreenBorder: string
+    /** Suite semantic red, balanced to the blue/orange saturation. */
+    semanticRed: string
+    semanticRedText: string
+    semanticRedMuted: string
+    semanticRedBorder: string
+    focus: string
+    selection: string
+    /** Background behind embedded app iframes */
+    appViewport: string
+    /** Shell frameless titlebar row (menus, window controls). */
+    chromeTitlebar: string
+    /** Shell workspace tab strip row. */
+    chromeTabStrip: string
+  }
+
+  typography: {
+    fontFamily: string
+    fontFamilyContent: string
+    fontFamilyMono: string
+    fontSizeBase: string
+    fontSizeXs: string
+    fontSizeSm: string
+    fontSizeLg: string
+    fontSizeXl: string
+    lineHeightBase: number
+    lineHeightTight: number
+    fontWeightNormal: number
+    fontWeightMedium: number
+    fontWeightBold: number
+  }
+
+  spacing: {
+    xs: string
+    sm: string
+    md: string
+    lg: string
+    xl: string
+    xxl: string
+  }
+
+  radius: {
+    sm: string
+    md: string
+    lg: string
+    full: string
+  }
+
+  shadow: {
+    sm: string
+    md: string
+    lg: string
+  }
+
+  transition: {
+    fast: string
+    base: string
+    slow: string
+  }
+
+  /** Semantic stacking — values live in `themes/shared.ts` (`platformThemeShared`). */
+  zIndex: {
+    ziAppBase: number
+    ziAppSidebar: number
+    ziAppChrome: number
+    ziAppViewportToolbar: number
+    ziAppMenus: number
+    ziAppToast: number
+    ziAppModal: number
+  }
+}

package/src/theme/utils/GlobalStyles.ts

@@ -1,88 +1,88 @@
-import { createGlobalStyle } from 'styled-components'
-import { themeToCssVars } from './cssVariables.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 {
-		box-sizing: border-box;
-	}
-
-	html,
-	body,
-	#root {
-		height: 100%;
-		width: 100%;
-		margin: 0;
-	}
-
-	:root {
-		${({ theme }) => themeToCssVars(theme)}
-	}
-
-	body {
-		font-family: var(--platform-typography-font-family);
-		font-size: var(--platform-typography-font-size-base);
-		line-height: var(--platform-typography-line-height-base);
-		color: var(--platform-colors-text);
-		background: var(--platform-colors-bg);
-		-webkit-font-smoothing: antialiased;
-		-moz-osx-font-smoothing: grayscale;
-		overflow: hidden;
-	}
-
-	::selection {
-		background: var(--platform-colors-selection);
-	}
-
-	:focus-visible {
-		outline: 2px solid var(--platform-colors-focus);
-		outline-offset: 2px;
-	}
-
-	:focus:not(:focus-visible) {
-		outline: none;
-	}
-
-	button {
-		font: inherit;
-		color: inherit;
-		cursor: pointer;
-		border: none;
-		background: none;
-	}
-
-	a {
-		color: var(--platform-colors-accent);
-		text-decoration: none;
-	}
-
-	a:hover {
-		text-decoration: underline;
-	}
-
-	* {
-		scrollbar-width: thin;
-		scrollbar-color: var(--platform-colors-border) transparent;
-	}
-
-	*::-webkit-scrollbar {
-		width: 8px;
-		height: 8px;
-	}
-
-	*::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	*::-webkit-scrollbar-thumb {
-		background-color: var(--platform-colors-border);
-		border-radius: 999px;
-	}
-
-	*::-webkit-scrollbar-thumb:hover {
-		background-color: var(--platform-colors-border-strong);
-	}
-`
+import { createGlobalStyle } from 'styled-components'
+import { themeToCssVars } from './cssVariables.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 {
+		box-sizing: border-box;
+	}
+
+	html,
+	body,
+	#root {
+		height: 100%;
+		width: 100%;
+		margin: 0;
+	}
+
+	:root {
+		${({ theme }) => themeToCssVars(theme)}
+	}
+
+	body {
+		font-family: var(--platform-typography-font-family);
+		font-size: var(--platform-typography-font-size-base);
+		line-height: var(--platform-typography-line-height-base);
+		color: var(--platform-colors-text);
+		background: var(--platform-colors-bg);
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+		overflow: hidden;
+	}
+
+	::selection {
+		background: var(--platform-colors-selection);
+	}
+
+	:focus-visible {
+		outline: 2px solid var(--platform-colors-focus);
+		outline-offset: 2px;
+	}
+
+	:focus:not(:focus-visible) {
+		outline: none;
+	}
+
+	button {
+		font: inherit;
+		color: inherit;
+		cursor: pointer;
+		border: none;
+		background: none;
+	}
+
+	a {
+		color: var(--platform-colors-accent);
+		text-decoration: none;
+	}
+
+	a:hover {
+		text-decoration: underline;
+	}
+
+	* {
+		scrollbar-width: thin;
+		scrollbar-color: var(--platform-colors-border) transparent;
+	}
+
+	*::-webkit-scrollbar {
+		width: 8px;
+		height: 8px;
+	}
+
+	*::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	*::-webkit-scrollbar-thumb {
+		background-color: var(--platform-colors-border);
+		border-radius: 999px;
+	}
+
+	*::-webkit-scrollbar-thumb:hover {
+		background-color: var(--platform-colors-border-strong);
+	}
+`

package/src/theme/utils/appFrameDocumentStyles.d.mts

@@ -1,5 +1,5 @@
-export declare const PLATFORM_APP_FRAME_BASE_STYLE_ID: 'platform-app-frame-base'
-
-export declare const APP_FRAME_DOCUMENT_STYLES_CSS: string
-
-export function injectAppFrameDocumentStyles(doc?: Document): void
+export declare const PLATFORM_APP_FRAME_BASE_STYLE_ID: 'platform-app-frame-base'
+
+export declare const APP_FRAME_DOCUMENT_STYLES_CSS: string
+
+export function injectAppFrameDocumentStyles(doc?: Document): void