@datalayer/primer-addons 1.0.11 → 1.0.13

package/lib/theme/themes/earthTheme.js

@@ -0,0 +1,193 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Earth Theme for Primer React.
+ *
+ * Ocean blues (sea), forest greens (plants), golden yellows (sun) —
+ * the Blue Planet, inspired by satellite observations of Earth.
+ * Theming is applied via **CSS custom-property overrides**.
+ */
+import { theme as primerTheme } from '@primer/react';
+import { earthColors } from '../colors/earthColors';
+import { buildThemeStyles } from './createThemeCSSVars';
+/* ── Light-mode colour definitions ───────────────────────────────────── */
+const earthLight = {
+    canvas: {
+        default: earthColors.white,
+    },
+    fg: {
+        default: '#1A2332',
+        muted: earthColors.gray,
+        onEmphasis: earthColors.white,
+    },
+    accent: {
+        fg: earthColors.oceanText,
+        emphasis: earthColors.oceanBrand,
+        muted: earthColors.oceanAccent,
+    },
+    success: {
+        fg: earthColors.forestBrand,
+        emphasis: earthColors.forestBrand,
+        muted: earthColors.forestAccent,
+    },
+    border: {
+        default: '#C1D0DD',
+        muted: '#DAE4ED',
+    },
+    btn: {
+        text: '#1A2332',
+        bg: earthColors.white,
+        border: '#A8BDD0',
+        hoverBg: earthColors.oceanTint,
+        hoverBorder: earthColors.gray,
+        activeBg: earthColors.oceanTint,
+        activeBorder: earthColors.gray,
+        selectedBg: earthColors.white,
+        counterBg: earthColors.gray,
+        primary: {
+            text: earthColors.white,
+            bg: earthColors.oceanText,
+            border: earthColors.oceanText,
+            hoverBg: earthColors.oceanHover,
+            hoverBorder: earthColors.oceanHover,
+            selectedBg: earthColors.oceanHover,
+            disabledText: 'rgba(255, 255, 255, 0.8)',
+            disabledBg: '#7DB8D8',
+            disabledBorder: '#7DB8D8',
+            icon: earthColors.white,
+            counterBg: 'rgba(0, 0, 0, 0.2)',
+        },
+        outline: {
+            text: earthColors.oceanText,
+            hoverText: earthColors.white,
+            hoverBg: earthColors.oceanText,
+            hoverBorder: earthColors.oceanText,
+            hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
+            selectedText: earthColors.white,
+            selectedBg: earthColors.oceanHover,
+            selectedBorder: earthColors.oceanHover,
+            disabledText: earthColors.gray,
+            disabledBg: earthColors.oceanTint,
+            disabledCounterBg: 'rgba(0, 0, 0, 0.05)',
+            counterBg: 'rgba(0, 0, 0, 0.05)',
+            counterFg: earthColors.oceanText,
+            hoverCounterFg: earthColors.white,
+            disabledCounterFg: earthColors.gray,
+        },
+        danger: {
+            text: '#d32f2f',
+            hoverText: earthColors.white,
+            hoverBg: '#d32f2f',
+            hoverBorder: '#d32f2f',
+            hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
+            selectedText: earthColors.white,
+            selectedBg: '#b71c1c',
+            selectedBorder: '#b71c1c',
+            disabledText: 'rgba(211, 47, 47, 0.5)',
+            disabledBg: earthColors.oceanTint,
+            disabledCounterBg: 'rgba(211, 47, 47, 0.05)',
+            counterBg: 'rgba(211, 47, 47, 0.1)',
+            counterFg: '#d32f2f',
+            hoverCounterFg: earthColors.white,
+            disabledCounterFg: 'rgba(211, 47, 47, 0.5)',
+            icon: '#d32f2f',
+        },
+    },
+};
+/* ── Dark-mode colour definitions ────────────────────────────────────── */
+const earthDark = {
+    canvas: {
+        default: earthColors.black,
+        subtle: '#0E1D30',
+    },
+    fg: {
+        default: '#D4E4DC',
+        muted: '#8A9BA8',
+        onEmphasis: earthColors.white,
+    },
+    accent: {
+        fg: earthColors.oceanAccent,
+        emphasis: earthColors.oceanBright,
+        muted: earthColors.oceanBrand,
+        subtle: '#0C2440',
+    },
+    success: {
+        fg: earthColors.forestAccent,
+        emphasis: earthColors.forestAccent,
+        muted: earthColors.forestBrand,
+        subtle: '#0C2D18',
+    },
+    btn: {
+        text: '#D4E4DC',
+        bg: '#162236',
+        border: 'rgba(212, 228, 220, 0.12)',
+        hoverBg: '#1E3048',
+        hoverBorder: '#8A9BA8',
+        activeBg: '#162236',
+        activeBorder: '#6B7C88',
+        selectedBg: '#0E1D30',
+        counterBg: '#1E3048',
+        primary: {
+            text: earthColors.white,
+            bg: earthColors.oceanAccent,
+            border: 'rgba(212, 228, 220, 0.12)',
+            hoverBg: earthColors.oceanBright,
+            hoverBorder: 'rgba(212, 228, 220, 0.12)',
+            selectedBg: earthColors.oceanBright,
+            disabledText: 'rgba(255, 255, 255, 0.5)',
+            disabledBg: 'rgba(3, 105, 161, 0.35)',
+            disabledBorder: 'rgba(3, 105, 161, 0.2)',
+            icon: earthColors.white,
+            counterBg: 'rgba(0, 0, 0, 0.2)',
+        },
+        outline: {
+            text: earthColors.oceanAccent,
+            hoverText: earthColors.white,
+            hoverBg: earthColors.oceanAccent,
+            hoverBorder: earthColors.oceanAccent,
+            hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
+            selectedText: earthColors.white,
+            selectedBg: earthColors.oceanBright,
+            selectedBorder: earthColors.oceanBright,
+            disabledText: 'rgba(14, 165, 233, 0.5)',
+            disabledBg: 'rgba(14, 165, 233, 0.1)',
+            disabledCounterBg: 'rgba(14, 165, 233, 0.05)',
+            counterBg: 'rgba(14, 165, 233, 0.1)',
+            counterFg: earthColors.oceanAccent,
+            hoverCounterFg: earthColors.white,
+            disabledCounterFg: 'rgba(14, 165, 233, 0.5)',
+        },
+        danger: {
+            text: '#f85149',
+            hoverText: earthColors.white,
+            hoverBg: '#da3633',
+            hoverBorder: '#f85149',
+            hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
+            selectedText: earthColors.white,
+            selectedBg: '#b62324',
+            selectedBorder: '#ff7b72',
+            disabledText: 'rgba(248, 81, 73, 0.5)',
+            disabledBg: 'rgba(248, 81, 73, 0.1)',
+            disabledCounterBg: 'rgba(248, 81, 73, 0.05)',
+            counterBg: 'rgba(248, 81, 73, 0.1)',
+            counterFg: '#f85149',
+            hoverCounterFg: earthColors.white,
+            disabledCounterFg: 'rgba(248, 81, 73, 0.5)',
+            icon: '#f85149',
+        },
+    },
+};
+/* ── Exports ─────────────────────────────────────────────────────────── */
+/**
+ * The Primer theme object.
+ *
+ * Since theming is now done entirely via CSS custom properties
+ * (see `earthThemeStyles`), this is just the unmodified
+ * default Primer theme kept for backward compatibility.
+ */
+export const earthTheme = primerTheme;
+/** Comprehensive Primer CSS-variable overrides for light & dark mode. */
+export const earthThemeStyles = buildThemeStyles(earthLight, earthDark);
+export default earthTheme;

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

@@ -1,5 +1,3 @@
-import { lovelyColors } from '../colors';
-export { lovelyColors };
 /**
  * The Primer theme object.
  *

package/lib/theme/themes/lovelyTheme.js

@@ -11,8 +11,6 @@
 import { theme as primerTheme } from '@primer/react';
 import { lovelyColors } from '../colors';
 import { buildThemeStyles } from './createThemeCSSVars';
-// Re-export so existing consumers keep working.
-export { lovelyColors };
 /* ── Light-mode colour definitions ───────────────────────────────────── */
 const lovelyLight = {
     canvas: {

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

@@ -1,5 +1,3 @@
-import { matrixColors } from '../colors';
-export { matrixColors };
 /**
  * The Primer theme object.
  *

package/lib/theme/themes/matrixTheme.js

@@ -11,8 +11,6 @@
 import { theme as primerTheme } from '@primer/react';
 import { matrixColors } from '../colors';
 import { buildThemeStyles } from './createThemeCSSVars';
-// Re-export so existing consumers keep working.
-export { matrixColors };
 /* ── Light-mode colour definitions ───────────────────────────────────── */
 const matrixLight = {
     canvas: {

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

@@ -1,5 +1,3 @@
-import { spatialColors } from '../colors';
-export { spatialColors };
 /**
  * The Primer theme object.
  *

package/lib/theme/themes/spatialTheme.js

@@ -11,8 +11,6 @@
 import { theme as primerTheme } from '@primer/react';
 import { spatialColors } from '../colors';
 import { buildThemeStyles } from './createThemeCSSVars';
-// Re-export so existing consumers keep working.
-export { spatialColors };
 /* ── Light-mode colour definitions ───────────────────────────────────── */
 const spatialLight = {
     canvas: {

package/lib/theme/useThemeStore.d.ts

@@ -9,7 +9,6 @@
 import { type StoreApi, type UseBoundStore } from 'zustand';
 import type { ThemeVariant } from './themeRegistry';
 import type { ColorMode } from './DatalayerBrandThemeProvider';
-export type { ThemeVariant, ColorMode };
 export interface ThemeState {
     /** Current color mode (light, dark, or auto = follow OS). */
     colorMode: ColorMode;

package/lib/utils/Portals.d.ts

@@ -4,6 +4,10 @@ type Colormode = 'light' | 'dark' | 'auto';
 /**
  * Ensure we define a root for Primer portal root.
  *
+ * Creates a dedicated `<div>` appended to `<body>` with a high z-index
+ * so that portaled content (overlays, tooltips, action menus) renders
+ * above other positioned UI elements such as chat panels.
+ *
  *  @see https://github.com/primer/react/blob/main/packages/react/src/Portal/Portal.tsx#L23
  *  @see https://github.com/primer/react/blob/030fe020b48b7f12c2994c6614e5d4191fe764ee/src/Portal/Portal.tsx#L33
  */

package/lib/utils/Portals.js

@@ -19,21 +19,73 @@ const resolveColormode = (colormode) => {
     }
     return colormode;
 };
+/**
+ * Infer current app color mode from existing DOM theme markers.
+ *
+ * This avoids accidentally forcing light mode when callers invoke
+ * setupPrimerPortals() without passing an explicit mode.
+ */
+const inferCurrentColormode = () => {
+    const portalRoot = document.getElementById(PRIMER_PORTAL_ROOT_ID);
+    const portalMode = portalRoot?.getAttribute('data-color-mode');
+    if (portalMode === 'light' || portalMode === 'dark' || portalMode === 'auto') {
+        return portalMode;
+    }
+    const htmlMode = document.documentElement.getAttribute('data-color-mode');
+    if (htmlMode === 'light' || htmlMode === 'dark' || htmlMode === 'auto') {
+        return htmlMode;
+    }
+    const bodyMode = document.body.getAttribute('data-color-mode');
+    if (bodyMode === 'light' || bodyMode === 'dark' || bodyMode === 'auto') {
+        return bodyMode;
+    }
+    return 'auto';
+};
+/**
+ * Infer Primer light/dark theme names from existing DOM markers.
+ */
+const inferCurrentThemeNames = () => {
+    const portalRoot = document.getElementById(PRIMER_PORTAL_ROOT_ID);
+    const lightTheme = portalRoot?.getAttribute('data-light-theme') ||
+        document.documentElement.getAttribute('data-light-theme') ||
+        document.body.getAttribute('data-light-theme') ||
+        'light';
+    const darkTheme = portalRoot?.getAttribute('data-dark-theme') ||
+        document.documentElement.getAttribute('data-dark-theme') ||
+        document.body.getAttribute('data-dark-theme') ||
+        'dark';
+    return { lightTheme, darkTheme };
+};
 /**
  * Ensure we define a root for Primer portal root.
  *
+ * Creates a dedicated `<div>` appended to `<body>` with a high z-index
+ * so that portaled content (overlays, tooltips, action menus) renders
+ * above other positioned UI elements such as chat panels.
+ *
  *  @see https://github.com/primer/react/blob/main/packages/react/src/Portal/Portal.tsx#L23
  *  @see https://github.com/primer/react/blob/030fe020b48b7f12c2994c6614e5d4191fe764ee/src/Portal/Portal.tsx#L33
  */
-export const setupPrimerPortals = (colormode = 'light') => {
-    const resolved = resolveColormode(colormode);
-    const body = document.body;
-    body.dataset['portalRoot'] = 'true';
-    body.dataset['colorMode'] = resolved;
-    body.dataset['lightTheme'] = 'light';
-    body.dataset['darkTheme'] = 'dark';
-    body.id = PRIMER_PORTAL_ROOT_ID;
-    registerPortalRoot(body);
+export const setupPrimerPortals = (colormode) => {
+    const effectiveColormode = colormode ?? inferCurrentColormode();
+    const resolved = resolveColormode(effectiveColormode);
+    const { lightTheme, darkTheme } = inferCurrentThemeNames();
+    // Create or reuse a dedicated portal root div.
+    let portalRoot = document.getElementById(PRIMER_PORTAL_ROOT_ID);
+    if (!portalRoot) {
+        portalRoot = document.createElement('div');
+        portalRoot.id = PRIMER_PORTAL_ROOT_ID;
+        document.body.appendChild(portalRoot);
+    }
+    // Primer theme attributes — required for proper theming inside portals.
+    portalRoot.dataset['portalRoot'] = 'true';
+    portalRoot.dataset['colorMode'] = resolved;
+    portalRoot.dataset['lightTheme'] = lightTheme;
+    portalRoot.dataset['darkTheme'] = darkTheme;
+    // High z-index so overlays render above positioned UI (e.g. chat z-index 1001).
+    portalRoot.style.position = 'relative';
+    portalRoot.style.zIndex = '9999';
+    registerPortalRoot(portalRoot);
 };
 /* ─── camelCase → kebab-case ─────────────────────────────────────────── */
 const camelToKebab = (s) => s.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);

package/package.json

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

package/lib/_utils/story-helpers.d.ts

@@ -1,31 +0,0 @@
-import React from 'react';
-import { ArgTypes } from '@storybook/react';
-import { Icon } from '@primer/octicons-react';
-type StoryContext = Record<string, unknown> & {
-    globals: {
-        colorScheme: string;
-    };
-    parameters: Record<string, unknown>;
-};
-export declare const colormodeFromScheme: (colorScheme: string) => "dark" | "light";
-export declare const withThemeProvider: (Story: React.FC<React.PropsWithChildren<StoryContext>>, context: StoryContext) => string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
-export declare const toolbarTypes: {
-    colorScheme: {
-        name: string;
-        description: string;
-        defaultValue: string;
-        toolbar: {
-            icon: string;
-            items: string[];
-            title: string;
-        };
-    };
-};
-export declare const inputWrapperArgTypes: ArgTypes;
-export declare const getTextInputArgTypes: (category?: string) => Record<string, unknown>;
-export declare const OcticonArgType: (iconList: Icon[]) => {
-    options: string[];
-    control: string;
-    mapping: Record<string, Icon>;
-};
-export {};

package/lib/_utils/story-helpers.js

@@ -1,105 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createGlobalStyle } from 'styled-components';
-import { ThemeProvider, themeGet, BaseStyles, theme } from '@primer/react';
-// set global theme styles for each story
-const GlobalStyle = createGlobalStyle `
-  body,
-  .docs-story {
-    background-color: ${themeGet('colors.canvas.default')};
-    color: ${themeGet('colors.fg.default')};
-  }
-`;
-export const colormodeFromScheme = (colorScheme) => {
-    return colorScheme.startsWith('light') ? 'light' : 'dark';
-};
-export const withThemeProvider = (Story, context) => {
-    // used for testing ThemeProvider.stories.tsx
-    if (context.parameters.disableThemeDecorator)
-        return Story(context);
-    const { colorScheme } = context.globals;
-    return (_jsxs(ThemeProvider, { theme: theme, colorMode: colormodeFromScheme(colorScheme), dayScheme: colorScheme, nightScheme: colorScheme, children: [colorScheme.startsWith('light') ? (_jsx(GlobalStyle, { "$lightTheme": true })) : (_jsx(GlobalStyle, {})), _jsx(BaseStyles, { children: _jsx("div", { id: "html-addon-root", children: Story(context) }) })] }));
-};
-export const toolbarTypes = {
-    colorScheme: {
-        name: 'Color Scheme',
-        description: 'Switch color scheme',
-        defaultValue: 'light',
-        toolbar: {
-            icon: 'photo',
-            items: [...Object.keys(theme.colorSchemes)],
-            title: 'Color Scheme',
-        },
-    },
-};
-export const inputWrapperArgTypes = {
-    block: {
-        defaultValue: false,
-        control: 'boolean',
-    },
-    contrast: {
-        defaultValue: false,
-        control: 'boolean',
-    },
-    disabled: {
-        defaultValue: false,
-        control: 'boolean',
-    },
-    placeholder: {
-        defaultValue: '',
-        control: 'text',
-    },
-    size: {
-        name: 'size (input)', // TODO: remove '(input)'
-        defaultValue: 'medium',
-        options: ['small', 'medium', 'large'],
-        control: 'radio',
-    },
-    validationStatus: {
-        defaultValue: undefined,
-        options: ['error', 'success', undefined],
-        control: 'radio',
-    },
-};
-const textInputArgTypesUnsorted = {
-    ...inputWrapperArgTypes,
-    loading: {
-        defaultValue: false,
-        control: 'boolean',
-    },
-    loaderPosition: {
-        defaultValue: 'auto',
-        options: ['auto', 'leading', 'trailing'],
-        control: 'radio',
-    },
-    monospace: {
-        defaultValue: false,
-        control: 'boolean',
-    },
-};
-// Alphabetize and optionally categorize the props
-export const getTextInputArgTypes = (category) => Object.keys(textInputArgTypesUnsorted)
-    .sort()
-    .reduce((obj, key) => {
-    obj[key] = category
-        ? {
-            // have to do weird type casting so we can spread the object
-            ...textInputArgTypesUnsorted[key],
-            table: {
-                category,
-            },
-        }
-        : textInputArgTypesUnsorted[key];
-    return obj;
-}, {});
-// Use this function for icon options in the controls. Desired icons are passed in as an array of Octicons
-export const OcticonArgType = (iconList) => {
-    const icons = iconList.reduce((obj, icon) => {
-        obj[icon.displayName || 'Icon'] = icon;
-        return obj;
-    }, {});
-    return {
-        options: Object.keys(icons),
-        control: 'select',
-        mapping: icons,
-    };
-};

package/lib/theme/Palette.d.ts

@@ -1,4 +0,0 @@
-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

@@ -1,10 +0,0 @@
-/*
- * 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/ThemeSwitcher.d.ts

@@ -1,17 +0,0 @@
-/**
- * ThemeSwitcher – Themed colour circles + light/dark/auto segmented control.
- *
- * The component requires an external Zustand `ThemeState` store (created
- * with `createThemeStore`).  Consumers pass the `useStore` hook as a prop
- * so the switcher is completely decoupled from any specific app's store.
- *
- * @module theme/ThemeSwitcher
- */
-import React from 'react';
-import type { ThemeState } from './useThemeStore';
-import type { UseBoundStore, StoreApi } from 'zustand';
-export interface ThemeSwitcherProps {
-    /** A Zustand store hook created via `createThemeStore()`. */
-    useStore: UseBoundStore<StoreApi<ThemeState>>;
-}
-export declare const ThemeSwitcher: React.FC<ThemeSwitcherProps>;