@datalayer/primer-addons 1.0.7 → 1.0.9

package/lib/components/box/sx.d.ts

@@ -16,6 +16,8 @@ export type BetterSystemStyleObject = BetterCssProperties | SystemStyleObject |
 export interface SxProp {
     sx?: BetterSystemStyleObject;
 }
-declare const sx: (props: SxProp) => import("@styled-system/css").CssFunctionReturnType;
+declare const sx: (props: SxProp & {
+    theme?: Record<string, unknown>;
+}) => import("@styled-system/css").CSSObject;
 export default sx;
 export { merge };

package/lib/components/box/sx.js

@@ -5,6 +5,6 @@
  */
 import css from '@styled-system/css';
 import merge from 'deepmerge';
-const sx = (props) => css(props.sx);
+const sx = (props) => css(props.sx)(props.theme ?? {});
 export default sx;
 export { merge };

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/components/toolbar/FloatingToolbar.js

@@ -31,8 +31,7 @@ import { ToolbarRenderer } from './ToolbarRenderer';
  * Position the floating element relative to a DOMRect within an anchor element.
  */
 function setFloatingPosition(targetRect, floatingElem, anchorElem, verticalGap = 10, horizontalOffset = 5) {
-    const scrollerElem = anchorElem.parentElement;
-    if (targetRect === null || !scrollerElem) {
+    if (targetRect === null) {
         floatingElem.style.opacity = '0';
         floatingElem.style.transform = 'translateY(-4px)';
         floatingElem.style.top = '-10000px';
@@ -41,17 +40,21 @@ function setFloatingPosition(targetRect, floatingElem, anchorElem, verticalGap =
     }
     const floatingElemRect = floatingElem.getBoundingClientRect();
     const anchorElementRect = anchorElem.getBoundingClientRect();
-    const editorScrollerRect = scrollerElem.getBoundingClientRect();
-    let top = targetRect.top - floatingElemRect.height - verticalGap;
-    let left = targetRect.left -
-        horizontalOffset -
-        (anchorElementRect.left - editorScrollerRect.left);
-    // Keep within anchor bounds
-    if (top < anchorElementRect.top) {
-        top = targetRect.bottom + verticalGap;
+    // Convert viewport-relative coordinates to anchor-relative coordinates.
+    // The toolbar is position:absolute inside anchorElem (position:relative),
+    // so top/left must be relative to the anchor's border box.
+    let top = targetRect.top - anchorElementRect.top - floatingElemRect.height - verticalGap;
+    let left = targetRect.left - anchorElementRect.left - horizontalOffset;
+    // If toolbar would go above the anchor, flip it below the selection
+    if (top < 0) {
+        top = targetRect.bottom - anchorElementRect.top + verticalGap;
     }
-    if (left + floatingElemRect.width > editorScrollerRect.right) {
-        left = editorScrollerRect.right - floatingElemRect.width - horizontalOffset;
+    // Keep within horizontal bounds
+    if (left + floatingElemRect.width > anchorElementRect.width) {
+        left = anchorElementRect.width - floatingElemRect.width - horizontalOffset;
+    }
+    if (left < horizontalOffset) {
+        left = horizontalOffset;
     }
     floatingElem.style.opacity = '1';
     floatingElem.style.transform = 'translateY(0)';
@@ -85,6 +88,8 @@ export function FloatingToolbar({ items, extraItems, anchorElement, isVisible, c
             return;
         const update = () => updatePosition();
         window.addEventListener('resize', update);
+        // Capture phase catches scroll on any ancestor (page, container, etc.)
+        window.addEventListener('scroll', update, true);
         const scrollerElem = anchorElement?.parentElement;
         if (scrollerElem) {
             scrollerElem.addEventListener('scroll', update);
@@ -93,6 +98,7 @@ export function FloatingToolbar({ items, extraItems, anchorElement, isVisible, c
         update();
         return () => {
             window.removeEventListener('resize', update);
+            window.removeEventListener('scroll', update, true);
             if (scrollerElem) {
                 scrollerElem.removeEventListener('scroll', update);
             }

package/lib/components/toolbar/Toolbar.js

@@ -44,7 +44,7 @@ export function Toolbar({ items, extraItems, className, disabled, ariaLabel = 'E
             borderColor: 'border.default',
             position: 'sticky',
             top: 0,
-            zIndex: 2,
+            zIndex: 1,
         }, children: _jsx(ToolbarRenderer, { items: allItems, disabled: disabled, size: "medium" }) }));
 }
 export default Toolbar;

package/lib/components/toolbar/ToolbarButton.js

@@ -38,7 +38,7 @@ export function ToolbarButton({ item, size = 'medium' }) {
         iconElement = _jsx("span", { style: { fontSize: 12, fontWeight: 600, lineHeight: 1 }, children: label });
     }
     const btnSize = size === 'small' ? 28 : 32;
-    return (_jsx("button", { type: "button", "aria-label": ariaLabel, title: title, onClick: onClick, disabled: disabled, style: {
+    return (_jsx("button", { type: "button", "aria-label": ariaLabel, title: title, onMouseDown: (e) => e.preventDefault(), onClick: onClick, disabled: disabled, style: {
             display: 'inline-flex',
             alignItems: 'center',
             justifyContent: 'center',

package/lib/components/toolbar/ToolbarDropdown.js

@@ -8,34 +8,85 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * Uses Primer React ActionMenu for accessible dropdown menus.
  *
+ * The trigger button highlights (accent colour) when any option is active,
+ * matching the behavior of regular ToolbarButton items.
+ *
+ * All option rows render a fixed-width LeadingVisual slot so that labels
+ * stay left-aligned regardless of whether the option has an icon.
+ *
  * @module components/toolbar/ToolbarDropdown
  */
-import { isValidElement } from 'react';
+import { isValidElement, useMemo } from 'react';
 import { ActionMenu, ActionList, Text } from '@primer/react';
 import { Box } from '../box/Box';
+/**
+ * Resolve an icon prop to a ReactNode.
+ *
+ * Octicon components use React.forwardRef which returns an *object*
+ * (typeof === 'object'), NOT a function.  We check isValidElement first
+ * (already-instantiated JSX), then treat anything else as a component type.
+ */
 function renderIcon(icon) {
     if (!icon)
         return null;
-    if (typeof icon === 'function') {
-        const IconComp = icon;
-        return _jsx(IconComp, { size: 16 });
-    }
     if (isValidElement(icon)) {
         return icon;
     }
-    return null;
+    // Component type: function component, forwardRef, or memo wrapper
+    const IconComp = icon;
+    return _jsx(IconComp, { size: 16 });
+}
+/** Whether any dropdown option in the list has an icon. */
+function hasAnyIcon(options) {
+    return options.some(o => !!o.icon);
 }
 export function ToolbarDropdown({ item, size = 'medium' }) {
-    const { ariaLabel, icon, label, options, disabled } = item;
-    return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { "aria-label": ariaLabel, disabled: disabled, variant: "invisible", size: size, sx: {
-                    color: 'fg.muted',
-                    fontWeight: 'normal',
-                    fontSize: size === 'small' ? 0 : 1,
-                    px: 2,
-                    '&:hover:not([disabled])': {
-                        bg: 'neutral.muted',
-                        color: 'fg.default',
-                    },
-                }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [renderIcon(icon), label && (_jsx(Text, { sx: { fontSize: size === 'small' ? 0 : 1 }, children: label }))] }) }), _jsx(ActionMenu.Overlay, { width: "auto", children: _jsx(ActionList, { children: options.map(option => (_jsxs(ActionList.Item, { onSelect: option.onClick, disabled: option.disabled, active: option.isActive, children: [option.icon && (_jsx(ActionList.LeadingVisual, { children: renderIcon(option.icon) })), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', gap: 3 }, children: [_jsx(Text, { children: option.label }), option.shortcut && (_jsx(Text, { sx: { color: 'fg.subtle', fontSize: 0, fontFamily: 'mono' }, children: option.shortcut }))] })] }, option.key))) }) })] }));
+    const { ariaLabel, icon, label, minWidth, options, disabled } = item;
+    // Highlight the trigger when any option is active.
+    const anyActive = useMemo(() => options.some(o => o.isActive), [options]);
+    // If any option has an icon we reserve a leading-visual column for all rows.
+    const showLeadingVisual = useMemo(() => hasAnyIcon(options), [options]);
+    const btnSize = size === 'small' ? 28 : 32;
+    return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsxs("button", { type: "button", "aria-label": ariaLabel, title: ariaLabel, disabled: disabled, style: {
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: 4,
+                        minWidth: btnSize,
+                        height: btnSize,
+                        padding: label ? '0 8px' : 0,
+                        margin: 0,
+                        border: 'none',
+                        borderRadius: 6,
+                        cursor: disabled ? 'not-allowed' : 'pointer',
+                        background: anyActive
+                            ? 'var(--bgColor-accent-muted, rgba(9,105,218,0.1))'
+                            : 'transparent',
+                        color: anyActive
+                            ? 'var(--fgColor-accent, #0969da)'
+                            : 'var(--fgColor-muted, #656d76)',
+                        opacity: disabled ? 0.5 : 1,
+                        fontSize: size === 'small' ? 12 : 14,
+                        fontWeight: 'normal',
+                        fontFamily: 'inherit',
+                        lineHeight: 1,
+                    }, onMouseEnter: (e) => {
+                        if (!disabled) {
+                            e.currentTarget.style.background =
+                                'var(--bgColor-neutral-muted, rgba(175,184,193,0.2))';
+                            e.currentTarget.style.color = 'var(--fgColor-default, #1f2328)';
+                        }
+                    }, onMouseLeave: (e) => {
+                        e.currentTarget.style.background = anyActive
+                            ? 'var(--bgColor-accent-muted, rgba(9,105,218,0.1))'
+                            : 'transparent';
+                        e.currentTarget.style.color = anyActive
+                            ? 'var(--fgColor-accent, #0969da)'
+                            : 'var(--fgColor-muted, #656d76)';
+                    }, children: [renderIcon(icon), label && (_jsx("span", { style: {
+                                display: 'inline-block',
+                                minWidth: minWidth ? minWidth : undefined,
+                                textAlign: 'left',
+                            }, children: label }))] }) }), _jsx(ActionMenu.Overlay, { width: "auto", children: _jsx(ActionList, { children: options.map(option => (_jsxs(ActionList.Item, { onSelect: option.onClick, disabled: option.disabled, active: option.isActive, children: [showLeadingVisual && (_jsx(ActionList.LeadingVisual, { children: option.icon ? renderIcon(option.icon) : _jsx(Box, { sx: { width: 16 } }) })), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', gap: 3 }, children: [_jsx(Text, { children: option.label }), option.shortcut && (_jsx(Text, { sx: { color: 'fg.subtle', fontSize: 0, fontFamily: 'mono' }, children: option.shortcut }))] })] }, option.key))) }) })] }));
 }
 export default ToolbarDropdown;

package/lib/components/toolbar/types.d.ts

@@ -73,6 +73,12 @@ export interface ToolbarDropdownItem extends ToolbarItemBase {
     icon?: React.ComponentType<IconProps> | ReactNode;
     /** Text label for the trigger */
     label?: string;
+    /**
+     * Fixed minimum width (in px) for the trigger's label area.
+     * Set this to the width of the longest possible label so the
+     * toolbar doesn't reflow when the selection changes.
+     */
+    minWidth?: number;
     /** Dropdown options */
     options: ToolbarDropdownOption[];
 }

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';