@datalayer/primer-addons 1.0.9 → 1.0.10

package/lib/theme/DatalayerThemeProvider.js

@@ -1,7 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useEffect } from 'react';
 import { BaseStyles, ThemeProvider } from '@primer/react';
 import { useSystemColorMode } from './useSystemColorMode';
 import { datalayerTheme, datalayerThemeStyles } from './themes/datalayerTheme';
+import { setupPrimerPortals } from '../utils/Portals';
 /**
  * Shared typographic rhythm — clean, spacious feel inspired by
  * modern developer-blog aesthetics (generous line-height, open
@@ -25,6 +31,11 @@ export function DatalayerThemeProvider(props) {
     const resolvedTheme = theme ?? datalayerTheme;
     const styles = themeStyles ?? datalayerThemeStyles;
     const resolvedStyles = isDark ? styles.dark : styles.light;
+    // Keep document.body portal-root attributes in sync so that Primer
+    // portals (modals, dialogs, overlays) inherit the correct color mode.
+    useEffect(() => {
+        setupPrimerPortals(resolvedColorMode === 'night' ? 'dark' : resolvedColorMode === 'day' ? 'light' : resolvedColorMode);
+    }, [resolvedColorMode]);
     return (_jsx(ThemeProvider, { colorMode: resolvedColorMode, theme: resolvedTheme, ...rest, children: _jsx(BaseStyles, { style: {
                 lineHeight: '1.7',
                 transition: 'background-color 0.25s ease, color 0.25s ease',

package/lib/theme/index.d.ts

@@ -7,5 +7,6 @@ export * from './themes/spatialTheme';
 export * from './themes/lovelyTheme';
 export * from './themes/matrixTheme';
 export * from './themes-brand/spatialBrandTheme';
+export * from './themeRegistry';
 export * from './Palette';
 export * from './useSystemColorMode';

package/lib/theme/index.js

@@ -11,5 +11,6 @@ export * from './themes/spatialTheme';
 export * from './themes/lovelyTheme';
 export * from './themes/matrixTheme';
 export * from './themes-brand/spatialBrandTheme';
+export * from './themeRegistry';
 export * from './Palette';
 export * from './useSystemColorMode';

package/lib/theme/themeRegistry.d.ts

@@ -0,0 +1,30 @@
+import { type CSSProperties } from 'react';
+import { type ColorMode } from './DatalayerBrandThemeProvider';
+/** Available theme variants. */
+export type ThemeVariant = 'datalayer' | 'spatial' | 'lovely' | 'matrix';
+/**
+ * Complete configuration for a theme, including the Primer theme object,
+ * display metadata, and CSS custom property overrides per color mode.
+ */
+export interface ThemeConfig {
+    /** Human-readable name for UI display. */
+    label: string;
+    /** Short description of the theme. */
+    description: string;
+    /** Brand color for the theme — used for colored swatch buttons. */
+    brandColor: string;
+    /** Recommended default color mode for this theme. */
+    defaultColorMode: ColorMode;
+    /** Primer theme object passed to `<ThemeProvider theme={…}>`. */
+    primerTheme: Record<string, any>;
+    /** Per-mode CSS-property overrides for `<DatalayerThemeProvider themeStyles={…}>`. */
+    themeStyles: {
+        light: CSSProperties;
+        dark: CSSProperties;
+    };
+}
+export declare const themeConfigs: Record<ThemeVariant, ThemeConfig>;
+/** All available theme variants in display order. */
+export declare const themeVariants: ThemeVariant[];
+/** Look up a theme config by variant name. */
+export declare function getThemeConfig(variant: ThemeVariant): ThemeConfig;

package/lib/theme/themeRegistry.js

@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { datalayerTheme, datalayerThemeStyles } from './themes/datalayerTheme';
+import { spatialTheme, spatialThemeStyles } from './themes/spatialTheme';
+import { lovelyTheme, lovelyThemeStyles } from './themes/lovelyTheme';
+import { matrixTheme, matrixThemeStyles } from './themes/matrixTheme';
+import { datalayerColors } from './colors/datalayerColors';
+import { spatialColors } from './colors/spatialColors';
+import { lovelyColors } from './colors/lovelyColors';
+import { matrixColors } from './colors/matrixColors';
+/* ─── Registry ────────────────────────────────────────────────────────── */
+export const themeConfigs = {
+    datalayer: {
+        label: 'Datalayer',
+        description: 'Default green palette — the classic Datalayer look.',
+        brandColor: datalayerColors.greenBrand,
+        defaultColorMode: 'auto',
+        primerTheme: datalayerTheme,
+        themeStyles: datalayerThemeStyles,
+    },
+    spatial: {
+        label: 'Spatial',
+        description: 'Cosmic indigo & deep blues — inspired by space.',
+        brandColor: spatialColors.indigoBrand,
+        defaultColorMode: 'auto',
+        primerTheme: spatialTheme,
+        themeStyles: spatialThemeStyles,
+    },
+    lovely: {
+        label: 'Lovely',
+        description: 'Warm rose & magenta — soft and inviting.',
+        brandColor: lovelyColors.roseBrand,
+        defaultColorMode: 'auto',
+        primerTheme: lovelyTheme,
+        themeStyles: lovelyThemeStyles,
+    },
+    matrix: {
+        label: 'Matrix',
+        description: 'Phosphor green on black — CRT terminal aesthetic.',
+        brandColor: matrixColors.greenPhosphor,
+        defaultColorMode: 'dark',
+        primerTheme: matrixTheme,
+        themeStyles: matrixThemeStyles,
+    },
+};
+/** All available theme variants in display order. */
+export const themeVariants = ['datalayer', 'spatial', 'lovely', 'matrix'];
+/** Look up a theme config by variant name. */
+export function getThemeConfig(variant) {
+    return themeConfigs[variant];
+}

package/lib/theme/themes/createThemeCSSVars.d.ts

@@ -31,6 +31,10 @@ export interface ThemeColorDefs {
         muted: string;
         subtle?: string;
     };
+    border?: {
+        default: string;
+        muted: string;
+    };
     btn: {
         text: string;
         bg: string;

package/lib/theme/themes/createThemeCSSVars.js

@@ -64,8 +64,8 @@ export function colorDefsToCSS(defs) {
         '--borderColor-success-emphasis': defs.success.emphasis,
         '--borderColor-success-muted': defs.success.muted,
         /* ── Border (generic) ────────────────────────────────────────── */
-        '--borderColor-default': defs.btn.border,
-        '--borderColor-muted': defs.btn.border,
+        '--borderColor-default': defs.border?.default ?? defs.btn.border,
+        '--borderColor-muted': defs.border?.muted ?? defs.btn.border,
         /* ── Default button ──────────────────────────────────────────── */
         '--button-default-fgColor-rest': defs.btn.text,
         '--button-default-bgColor-rest': defs.btn.bg,

package/lib/theme/themes/datalayerTheme.js

@@ -34,6 +34,10 @@ const datalayerLight = {
         emphasis: datalayerColors.greenBrand,
         muted: datalayerColors.greenAccent,
     },
+    border: {
+        default: '#d1d9e0',
+        muted: '#e0e6eb',
+    },
     btn: {
         text: datalayerColors.black,
         bg: datalayerColors.white,

package/lib/theme/themes/matrixTheme.d.ts

@@ -1089,5 +1089,8 @@ export declare const matrixTheme: {
     }>;
 };
 /** Comprehensive Primer CSS-variable overrides for light & dark mode. */
-export declare const matrixThemeStyles: import("./createThemeCSSVars").ThemeStyles;
+export declare const matrixThemeStyles: {
+    light: import("react").CSSProperties;
+    dark: import("react").CSSProperties;
+};
 export default matrixTheme;

package/lib/theme/themes/matrixTheme.js

@@ -185,6 +185,18 @@ const matrixDark = {
  * default Primer theme kept for backward compatibility.
  */
 export const matrixTheme = primerTheme;
+/**
+ * Monospace font stack for the Matrix terminal aesthetic.
+ * Uses fonts pre-installed across macOS / Windows / Linux so no
+ * web-font loading is required.
+ */
+const matrixFontFamily = '"SF Mono", "Cascadia Code", "Fira Code", Menlo, Consolas, "Liberation Mono", "Courier New", monospace';
 /** Comprehensive Primer CSS-variable overrides for light & dark mode. */
-export const matrixThemeStyles = buildThemeStyles(matrixLight, matrixDark);
+export const matrixThemeStyles = (() => {
+    const base = buildThemeStyles(matrixLight, matrixDark);
+    return {
+        light: { ...base.light, fontFamily: matrixFontFamily },
+        dark: { ...base.dark, fontFamily: matrixFontFamily },
+    };
+})();
 export default matrixTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/primer-addons",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "license": "BSD-3-Clause",
   "scripts": {
     "build": "tsc && vite build",