@datalayer/primer-addons 1.0.8 → 1.0.9

package/lib/components/overlay/Overlay.js

@@ -12,6 +12,19 @@ const PrimerAddonOverlay = (props) => {
         setTop(headingRef?.current?.getBoundingClientRect().bottom ?? 0);
     }, [headingRef]);
     const closeOverlay = () => setIsOpen(false);
+    /**
+     * Don't close the overlay when the click outside lands on a portaled
+     * Dialog (role="dialog").  Primer Dialogs render in a portal at
+     * document.body, so they are "outside" the Overlay DOM tree and would
+     * otherwise trigger an unwanted close.
+     */
+    const handleClickOutside = (e) => {
+        if (e.target instanceof HTMLElement &&
+            e.target.closest('[role="dialog"]')) {
+            return;
+        }
+        closeOverlay();
+    };
     const overlayContent = (_jsx(ThemeProvider, { theme: theme, colorMode: colorMode, children: _jsx(BaseStyles, { children: _jsxs(Box, { sx: {
                     /* We need to remove the padding */
                     height: `calc(100vh - ${top}px - 8px)`,
@@ -28,9 +41,9 @@ const PrimerAddonOverlay = (props) => {
     return (closeButtonRef && openButtonRef ?
         _jsx(_Fragment, { children: isOpen ?
                 direction === 'left' ?
-                    _jsx(Box, { sx: { zIndex }, children: _jsx(PrimerOverlay, { initialFocusRef: closeButtonRef, returnFocusRef: openButtonRef, ignoreClickRefs: [openButtonRef], onEscape: closeOverlay, onClickOutside: closeOverlay, width: "auto", anchorSide: "inside-right", left: 0, position: "fixed", top: top, children: overlayContent }) })
+                    _jsx(Box, { sx: { zIndex }, children: _jsx(PrimerOverlay, { initialFocusRef: closeButtonRef, returnFocusRef: openButtonRef, ignoreClickRefs: [openButtonRef], onEscape: closeOverlay, onClickOutside: handleClickOutside, width: "auto", anchorSide: "inside-right", left: 0, position: "fixed", top: top, children: overlayContent }) })
                     :
-                        _jsx(Box, { sx: { zIndex }, children: _jsx(PrimerOverlay, { initialFocusRef: closeButtonRef, returnFocusRef: openButtonRef, ignoreClickRefs: [openButtonRef], onEscape: closeOverlay, onClickOutside: closeOverlay, width: "auto", anchorSide: 'inside-left', right: 0, position: "fixed", top: top, children: overlayContent }) })
+                        _jsx(Box, { sx: { zIndex }, children: _jsx(PrimerOverlay, { initialFocusRef: closeButtonRef, returnFocusRef: openButtonRef, ignoreClickRefs: [openButtonRef], onEscape: closeOverlay, onClickOutside: handleClickOutside, width: "auto", anchorSide: 'inside-left', right: 0, position: "fixed", top: top, children: overlayContent }) })
                 : _jsx(_Fragment, {}) })
         :
             _jsx(_Fragment, {}));

package/lib/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./components";
 export * from "./utils";
+export * from './theme';

package/lib/index.js

@@ -1,2 +1,4 @@
 export * from "./components";
 export * from "./utils";
+// Export Theme.
+export * from './theme';

package/lib/theme/DatalayerBrandThemeProvider.d.ts

@@ -0,0 +1,41 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import type { BrandTheme } from './themes-brand/spatialBrandTheme';
+export type ColorMode = 'light' | 'dark' | 'auto';
+export interface IDatalayerBrandThemeProviderProps {
+    /**
+     * Color mode to use.
+     * - `'light'` / `'dark'` — explicit override
+     * - `'auto'` — follow the operating system preference (prefers-color-scheme)
+     */
+    colorMode?: ColorMode;
+    /**
+     * A brand theme object with per-mode CSS variable overrides.
+     * Each key (`light` / `dark`) is a `CSSProperties` map whose entries
+     * are `--brand-color-*` / `--brand-button-*` custom properties.
+     *
+     * When omitted, the default Primer Brand tokens are used unchanged.
+     */
+    brandTheme?: BrandTheme;
+    /**
+     * Additional inline styles merged on top of the resolved brand theme.
+     */
+    style?: CSSProperties;
+    children: ReactNode;
+}
+/**
+ * Theme provider for Primer Brand (`@primer/react-brand`) components.
+ *
+ * Works by passing CSS custom-property overrides as inline `style` to
+ * `ThemeProvider`, which scopes them to its DOM subtree — exactly how
+ * the VS Code extension re-skins Primer via CSS variables.
+ *
+ * ```tsx
+ * import { DatalayerBrandThemeProvider } from '@datalayer/core/lib/theme';
+ * import { spatialBrandTheme } from '@datalayer/core/lib/theme/themes-brand/spatialBrandTheme';
+ *
+ * <DatalayerBrandThemeProvider colorMode="dark" brandTheme={spatialBrandTheme}>
+ *   <Hero>…</Hero>
+ * </DatalayerBrandThemeProvider>
+ * ```
+ */
+export declare function DatalayerBrandThemeProvider({ colorMode, brandTheme, style, children, }: IDatalayerBrandThemeProviderProps): JSX.Element;

package/lib/theme/DatalayerBrandThemeProvider.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThemeProvider as PrimerBrandThemeProvider } from '@primer/react-brand';
+import { useSystemColorMode } from './useSystemColorMode';
+/**
+ * Theme provider for Primer Brand (`@primer/react-brand`) components.
+ *
+ * Works by passing CSS custom-property overrides as inline `style` to
+ * `ThemeProvider`, which scopes them to its DOM subtree — exactly how
+ * the VS Code extension re-skins Primer via CSS variables.
+ *
+ * ```tsx
+ * import { DatalayerBrandThemeProvider } from '@datalayer/core/lib/theme';
+ * import { spatialBrandTheme } from '@datalayer/core/lib/theme/themes-brand/spatialBrandTheme';
+ *
+ * <DatalayerBrandThemeProvider colorMode="dark" brandTheme={spatialBrandTheme}>
+ *   <Hero>…</Hero>
+ * </DatalayerBrandThemeProvider>
+ * ```
+ */
+export function DatalayerBrandThemeProvider({ colorMode = 'light', brandTheme, style, children, }) {
+    const systemMode = useSystemColorMode();
+    const resolved = colorMode === 'auto' ? systemMode : colorMode;
+    const themeOverrides = brandTheme
+        ? resolved === 'dark'
+            ? brandTheme.dark
+            : brandTheme.light
+        : undefined;
+    return (_jsx(PrimerBrandThemeProvider, { colorMode: resolved, style: {
+            ...themeOverrides,
+            ...style,
+        }, children: children }));
+}

package/lib/theme/DatalayerThemeProvider.d.ts

@@ -0,0 +1,36 @@
+import { type CSSProperties } from 'react';
+import { ThemeProviderProps } from '@primer/react';
+export interface IDatalayerThemeProviderProps extends Omit<ThemeProviderProps, 'theme' | 'colorMode'> {
+    /**
+     * Color mode to use.
+     * - `'light'` / `'dark'` — explicit override
+     * - `'auto'` — follow the operating system preference (prefers-color-scheme)
+     * - Primer's `'day'` / `'night'` are still accepted.
+     */
+    colorMode?: 'light' | 'dark' | 'auto' | 'day' | 'night';
+    /**
+     * Additional base styles merged on top of theme defaults.
+     */
+    baseStyles?: CSSProperties;
+    /**
+     * Optional Primer theme object. Defaults to the built-in datalayerTheme
+     * (which is the unmodified default Primer theme — all theming is done
+     * via CSS custom-property overrides in `themeStyles`).
+     */
+    theme?: Record<string, any>;
+    /**
+     * Per-mode CSS-property overrides (background, foreground, and all
+     * Primer functional-token CSS custom properties).
+     *
+     * When provided, these replace the built-in datalayer styles entirely.
+     * The `baseStyles` prop is still merged on top.
+     *
+     * Use the `buildThemeStyles` helper from `./themes/createThemeCSSVars`
+     * to generate comprehensive overrides from a `ThemeColorDefs` pair.
+     */
+    themeStyles?: {
+        light: CSSProperties;
+        dark: CSSProperties;
+    };
+}
+export declare function DatalayerThemeProvider(props: React.PropsWithChildren<IDatalayerThemeProviderProps>): JSX.Element;

package/lib/theme/DatalayerThemeProvider.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BaseStyles, ThemeProvider } from '@primer/react';
+import { useSystemColorMode } from './useSystemColorMode';
+import { datalayerTheme, datalayerThemeStyles } from './themes/datalayerTheme';
+/**
+ * Shared typographic rhythm — clean, spacious feel inspired by
+ * modern developer-blog aesthetics (generous line-height, open
+ * letter-spacing on headings, crisp body text).
+ */
+const typographyVars = {
+    '--text-body-lineHeight': '1.7',
+    '--text-title-lineHeight': '1.2',
+    '--text-title-letterSpacing': '-0.02em',
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+    WebkitFontSmoothing: 'antialiased',
+    MozOsxFontSmoothing: 'grayscale',
+    textRendering: 'optimizeLegibility',
+};
+export function DatalayerThemeProvider(props) {
+    const { children, colorMode, baseStyles, theme, themeStyles, ...rest } = props;
+    // Resolve 'auto' → actual system preference ('light' or 'dark').
+    const systemMode = useSystemColorMode();
+    const resolvedColorMode = colorMode === 'auto' ? systemMode : (colorMode ?? 'light');
+    const isDark = resolvedColorMode === 'dark' || resolvedColorMode === 'night';
+    const resolvedTheme = theme ?? datalayerTheme;
+    const styles = themeStyles ?? datalayerThemeStyles;
+    const resolvedStyles = isDark ? styles.dark : styles.light;
+    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',
+                ...typographyVars,
+                ...resolvedStyles,
+                ...baseStyles,
+            }, children: children }) }));
+}

package/lib/theme/Palette.d.ts

@@ -0,0 +1,4 @@
+export declare const RESERVATION_CIRCLE_COLOR = "#656D76";
+export declare const CREDITS_CIRCLE_COLOR = "#16A085";
+export declare const JOINED_INVITE_COLOR = "#0366d6";
+export declare const PENDING_INVITE_COLOR = "#cfd3d7";

package/lib/theme/Palette.js

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+// export const RESERVATION_CIRCLE_COLOR_VAR = '--data-yellow-color';
+export const RESERVATION_CIRCLE_COLOR = '#656D76';
+// export const CREDITS_CIRCLE_COLOR_VAR = '--data-blue-color';
+export const CREDITS_CIRCLE_COLOR = '#16A085';
+export const JOINED_INVITE_COLOR = '#0366d6';
+export const PENDING_INVITE_COLOR = '#cfd3d7';

package/lib/theme/colors/datalayerColors.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Datalayer Accessible Color System
+ * Based on Datalayer's brand manual - WCAG AA/AAA compliant
+ */
+export declare const datalayerColors: {
+    black: string;
+    gray: string;
+    white: string;
+    greenBrand: string;
+    greenAccent: string;
+    greenText: string;
+    greenTint: string;
+    greenBright: string;
+    greenHover: string;
+};

package/lib/theme/colors/datalayerColors.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Datalayer Accessible Color System
+ * Based on Datalayer's brand manual - WCAG AA/AAA compliant
+ */
+export const datalayerColors = {
+    // Core Neutrals
+    black: '#000000', // Primary text - AAA on white
+    gray: '#59595C', // Secondary text - AA on white
+    white: '#FFFFFF', // Background
+    // Greens (Brand & Accessibility)
+    greenBrand: '#16A085', // Brand accent, icons, dividers, headings
+    greenAccent: '#1ABC9C', // Icons, charts, highlights on dark surfaces
+    greenText: '#117A65', // Accessible green for text & buttons (AA+ on white)
+    greenTint: '#E9F7F1', // Soft background for success / callouts
+    greenBright: '#2ECC71', // Highlights and glow on dark backgrounds
+    greenHover: '#0E6655', // Primary button hover
+};

package/lib/theme/colors/index.d.ts

@@ -0,0 +1,4 @@
+export { datalayerColors } from './datalayerColors';
+export { spatialColors } from './spatialColors';
+export { lovelyColors } from './lovelyColors';
+export { matrixColors } from './matrixColors';

package/lib/theme/colors/index.js

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export { datalayerColors } from './datalayerColors';
+export { spatialColors } from './spatialColors';
+export { lovelyColors } from './lovelyColors';
+export { matrixColors } from './matrixColors';

package/lib/theme/colors/lovelyColors.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Lovely Color System – Warm & Pink-Inspired
+ * Rose, magenta, blush — designed for light-first usage.
+ */
+export declare const lovelyColors: {
+    black: string;
+    gray: string;
+    white: string;
+    roseBrand: string;
+    roseAccent: string;
+    roseText: string;
+    roseTint: string;
+    roseBright: string;
+    roseHover: string;
+};

package/lib/theme/colors/lovelyColors.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Lovely Color System – Warm & Pink-Inspired
+ * Rose, magenta, blush — designed for light-first usage.
+ */
+export const lovelyColors = {
+    // Core Neutrals
+    black: '#1A0A14', // Deep plum — primary dark background
+    gray: '#9D7A8F', // Mauve gray — secondary text
+    white: '#FFF5F7', // Rose white — primary light background
+    // Rose / Pink palette
+    roseBrand: '#DB2777', // Core brand — headings, icons, dividers
+    roseAccent: '#EC4899', // Charts, highlights on dark surfaces
+    roseText: '#9D174D', // Accessible text & buttons on light (AA+)
+    roseTint: '#FDF2F8', // Soft background for callouts
+    roseBright: '#F472B6', // Highlights & glow on dark
+    roseHover: '#831843', // Primary button hover
+};

package/lib/theme/colors/matrixColors.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Matrix Color System – Terminal & Phosphor-Green
+ *
+ * Inspired by the iconic green-on-black aesthetic of The Matrix.
+ * Dark-first, CRT feel. Uses Datalayer brand greens for accessible text
+ * and introduces phosphor-green accents for the signature glow.
+ */
+export declare const matrixColors: {
+    black: string;
+    gray: string;
+    white: string;
+    greenBrand: string;
+    greenAccent: string;
+    greenText: string;
+    greenTint: string;
+    greenPhosphor: string;
+    greenGlow: string;
+    greenHover: string;
+    greenTerminal: string;
+};

package/lib/theme/colors/matrixColors.js

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Matrix Color System – Terminal & Phosphor-Green
+ *
+ * Inspired by the iconic green-on-black aesthetic of The Matrix.
+ * Dark-first, CRT feel. Uses Datalayer brand greens for accessible text
+ * and introduces phosphor-green accents for the signature glow.
+ */
+export const matrixColors = {
+    // Core Neutrals — CRT / terminal aesthetic
+    black: '#0D0208', // Matrix void — near-black with faint warm undertone
+    gray: '#4A7856', // Dim terminal gray-green — secondary text
+    white: '#F0FFF0', // Honeydew — light bg with subtle green cast (CRT paper)
+    // Green palette — Datalayer brand greens  + Matrix phosphor highlights
+    greenBrand: '#16A085', // Datalayer brand — headings, icons, dividers
+    greenAccent: '#1ABC9C', // Datalayer accent — icons, charts on dark surfaces
+    greenText: '#117A65', // Datalayer text — accessible buttons & text on light (AA+)
+    greenTint: '#E8F5E9', // Matrix-tinted soft background for callouts
+    greenPhosphor: '#00FF41', // Iconic Matrix falling-code green — dark mode highlights
+    greenGlow: '#39FF14', // Neon phosphor glow — brightest accent on dark
+    greenHover: '#0E6655', // Datalayer hover — primary button hover
+    greenTerminal: '#003B00', // Deep terminal — dark mode subtle/canvas
+};

package/lib/theme/colors/spatialColors.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Spatial Color System – Cosmic & Space-Inspired
+ * Deep blues, indigo, nebula purples — designed for dark-first usage.
+ */
+export declare const spatialColors: {
+    black: string;
+    gray: string;
+    white: string;
+    indigoBrand: string;
+    indigoAccent: string;
+    indigoText: string;
+    indigoTint: string;
+    indigoBright: string;
+    indigoHover: string;
+};

package/lib/theme/colors/spatialColors.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Spatial Color System – Cosmic & Space-Inspired
+ * Deep blues, indigo, nebula purples — designed for dark-first usage.
+ */
+export const spatialColors = {
+    // Core Neutrals
+    black: '#0B1120', // Deep space — primary dark background
+    gray: '#8892B0', // Nebula gray — secondary text
+    white: '#F8FAFF', // Star white — primary light background
+    // Indigo / Cosmic palette
+    indigoBrand: '#4F46E5', // Core brand — headings, icons, dividers
+    indigoAccent: '#6366F1', // Charts, highlights on dark surfaces
+    indigoText: '#3730A3', // Accessible text & buttons on light (AA+)
+    indigoTint: '#EEF2FF', // Soft background for callouts
+    indigoBright: '#818CF8', // Highlights & glow on dark
+    indigoHover: '#312E81', // Primary button hover
+};

package/lib/theme/index.d.ts

@@ -0,0 +1,11 @@
+export * from './colors';
+export * from './themes/createThemeCSSVars';
+export * from './themes/datalayerTheme';
+export * from './DatalayerThemeProvider';
+export * from './DatalayerBrandThemeProvider';
+export * from './themes/spatialTheme';
+export * from './themes/lovelyTheme';
+export * from './themes/matrixTheme';
+export * from './themes-brand/spatialBrandTheme';
+export * from './Palette';
+export * from './useSystemColorMode';

package/lib/theme/index.js

@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './colors';
+export * from './themes/createThemeCSSVars';
+export * from './themes/datalayerTheme';
+export * from './DatalayerThemeProvider';
+export * from './DatalayerBrandThemeProvider';
+export * from './themes/spatialTheme';
+export * from './themes/lovelyTheme';
+export * from './themes/matrixTheme';
+export * from './themes-brand/spatialBrandTheme';
+export * from './Palette';
+export * from './useSystemColorMode';

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

@@ -0,0 +1,131 @@
+import { type CSSProperties } from 'react';
+/**
+ * Structured colour definitions that mirror the *old* Primer
+ * `colorSchemes.*.colors` shape.  Each theme file provides one of
+ * these for light mode and one for dark mode.
+ *
+ * The {@link colorDefsToCSS} helper converts them into a flat
+ * `CSSProperties` bag of Primer CSS custom-property overrides so
+ * the `<DatalayerThemeProvider>` can apply them via
+ * `<BaseStyles style={…}>`.
+ */
+export interface ThemeColorDefs {
+    canvas: {
+        default: string;
+        subtle?: string;
+    };
+    fg: {
+        default: string;
+        muted: string;
+        onEmphasis: string;
+    };
+    accent: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle?: string;
+    };
+    success: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle?: string;
+    };
+    btn: {
+        text: string;
+        bg: string;
+        border: string;
+        hoverBg: string;
+        hoverBorder: string;
+        activeBg: string;
+        activeBorder: string;
+        selectedBg: string;
+        counterBg: string;
+        primary: {
+            text: string;
+            bg: string;
+            border: string;
+            hoverBg: string;
+            hoverBorder: string;
+            selectedBg: string;
+            disabledText: string;
+            disabledBg: string;
+            disabledBorder: string;
+            icon: string;
+            counterBg: string;
+        };
+        outline: {
+            text: string;
+            hoverText: string;
+            hoverBg: string;
+            hoverBorder: string;
+            hoverCounterBg: string;
+            selectedText: string;
+            selectedBg: string;
+            selectedBorder: string;
+            disabledText: string;
+            disabledBg: string;
+            disabledCounterBg: string;
+            counterBg: string;
+            counterFg: string;
+            hoverCounterFg: string;
+            disabledCounterFg: string;
+        };
+        danger: {
+            text: string;
+            hoverText: string;
+            hoverBg: string;
+            hoverBorder: string;
+            hoverCounterBg: string;
+            selectedText: string;
+            selectedBg: string;
+            selectedBorder: string;
+            disabledText: string;
+            disabledBg: string;
+            disabledCounterBg: string;
+            counterBg: string;
+            counterFg: string;
+            hoverCounterFg: string;
+            disabledCounterFg: string;
+            icon: string;
+        };
+    };
+}
+/**
+ * Convert a structured `ThemeColorDefs` object into a flat
+ * `CSSProperties` bag of Primer React CSS custom-property overrides.
+ *
+ * These variables are the *functional tokens* consumed by Primer
+ * React components (sourced from `@primer/primitives`).  Setting
+ * them on a parent element is enough to retheme every Primer
+ * component in the sub-tree.
+ *
+ * ### Variable families covered
+ *
+ * | Family           | Example variable                       |
+ * |------------------|----------------------------------------|
+ * | Background       | `--bgColor-default`                    |
+ * | Foreground       | `--fgColor-default`                    |
+ * | Border           | `--borderColor-default`                |
+ * | Link             | `--fgColor-link`                       |
+ * | Accent / Success | `--bgColor-accent-emphasis`            |
+ * | Default button   | `--button-default-bgColor-rest`        |
+ * | Primary button   | `--button-primary-bgColor-rest`        |
+ * | Outline button   | `--button-outline-fgColor-rest`        |
+ * | Danger button    | `--button-danger-bgColor-hover`        |
+ * | Button counters  | `--buttonCounter-primary-bgColor-rest` |
+ * | Legacy aliases   | `--color-btn-primary-bg`               |
+ * | Brand (custom)   | `--brand-color-canvas-default`         |
+ */
+export declare function colorDefsToCSS(defs: ThemeColorDefs): CSSProperties;
+/** Light + dark CSS-property pairs for the `themeStyles` prop. */
+export interface ThemeStyles {
+    light: CSSProperties;
+    dark: CSSProperties;
+}
+/**
+ * Build a complete `ThemeStyles` object from light / dark
+ * `ThemeColorDefs`.  The result is ready to pass straight to
+ * `<DatalayerThemeProvider themeStyles={…}>`.
+ */
+export declare function buildThemeStyles(light: ThemeColorDefs, dark: ThemeColorDefs): ThemeStyles;