@datalayer/primer-addons 1.0.10 → 1.0.12

package/lib/components/appearance/AppearanceControls.d.ts

@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+import { type ColorMode, type ThemeVariant } from '../../theme';
+export interface AppearanceControlsProps {
+    colorMode: ColorMode;
+    themeVariant: ThemeVariant;
+    onColorModeChange: (mode: ColorMode) => void;
+    onThemeChange: (theme: ThemeVariant) => void;
+}
+export declare function AppearanceControls({ colorMode, themeVariant, onColorModeChange, onThemeChange, }: AppearanceControlsProps): ReactElement;
+export default AppearanceControls;

package/lib/components/appearance/AppearanceControls.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SegmentedControl } from '@primer/react';
+import { MoonIcon, SunIcon, DeviceDesktopIcon, } from '@primer/octicons-react';
+import { Box } from '../box/Box';
+import { themeVariants, themeConfigs, } from '../../theme';
+export function AppearanceControls({ colorMode, themeVariant, onColorModeChange, onThemeChange, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { sx: { px: 2, py: 2, display: 'flex', justifyContent: 'center' }, children: _jsxs(SegmentedControl, { "aria-label": "Color mode", size: "small", onChange: (index) => {
+                        const modes = ['light', 'dark', 'auto'];
+                        onColorModeChange(modes[index]);
+                    }, children: [_jsx(SegmentedControl.IconButton, { selected: colorMode === 'light', icon: SunIcon, "aria-label": "Light" }), _jsx(SegmentedControl.IconButton, { selected: colorMode === 'dark', icon: MoonIcon, "aria-label": "Dark" }), _jsx(SegmentedControl.IconButton, { selected: colorMode === 'auto', icon: DeviceDesktopIcon, "aria-label": "Auto" })] }) }), _jsx(Box, { sx: {
+                    px: 2,
+                    pb: 2,
+                    display: 'flex',
+                    justifyContent: 'center',
+                    gap: 2,
+                }, children: themeVariants.map((variant) => {
+                    const cfg = themeConfigs[variant];
+                    const isSelected = themeVariant === variant;
+                    return (_jsx(Box, { as: "button", "aria-label": cfg.label, "aria-pressed": isSelected, onClick: () => onThemeChange(variant), sx: {
+                            width: 24,
+                            height: 24,
+                            borderRadius: '50%',
+                            backgroundColor: cfg.brandColor,
+                            border: '2px solid',
+                            borderColor: isSelected ? 'accent.fg' : 'border.default',
+                            cursor: 'pointer',
+                            padding: 0,
+                            outline: 'none',
+                            transition: 'border-color 0.15s ease',
+                            boxShadow: isSelected
+                                ? '0 0 0 2px var(--bgColor-accent-muted, rgba(9,105,218,0.3))'
+                                : 'none',
+                            '&:hover': {
+                                borderColor: 'accent.fg',
+                            },
+                            '&:focus-visible': {
+                                boxShadow: '0 0 0 2px var(--bgColor-accent-muted, rgba(9,105,218,0.3))',
+                            },
+                        } }, variant));
+                }) })] }));
+}
+export default AppearanceControls;

package/lib/components/appearance/AppearanceControlsWithStore.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { UseBoundStore, StoreApi } from 'zustand';
+import type { ThemeState } from '../../theme/useThemeStore';
+export interface AppearanceControlsWithStoreProps {
+    useStore: UseBoundStore<StoreApi<ThemeState>>;
+}
+export declare const AppearanceControlsWithStore: React.FC<AppearanceControlsWithStoreProps>;
+export default AppearanceControlsWithStore;

package/lib/components/appearance/AppearanceControlsWithStore.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconButton, SegmentedControl, Tooltip } from '@primer/react';
+import { SunIcon, MoonIcon, DeviceDesktopIcon, CircleIcon, } from '@primer/octicons-react';
+import { Box } from '../box/Box';
+import { themeConfigs, themeVariants } from '../../theme/themeRegistry';
+export const AppearanceControlsWithStore = ({ useStore }) => {
+    const { colorMode, theme: themeVariant } = useStore();
+    return (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 3 }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: themeVariants.map(variant => {
+                    const tcfg = themeConfigs[variant];
+                    const isSelected = themeVariant === variant;
+                    return (_jsx(Tooltip, { text: tcfg.label, direction: "s", children: _jsx(IconButton, { "aria-label": tcfg.label, "aria-pressed": isSelected, icon: () => _jsx(CircleIcon, { size: 16, fill: tcfg.brandColor }), size: "small", variant: isSelected ? 'default' : 'invisible', onClick: () => useStore.getState().setTheme(variant, false), sx: {
+                                border: isSelected ? '2px solid' : '1px solid',
+                                borderColor: isSelected ? 'accent.fg' : 'border.muted',
+                                borderRadius: '50%',
+                            } }) }, variant));
+                }) }), _jsxs(SegmentedControl, { "aria-label": "Color mode", size: "small", onChange: (index) => {
+                    const modes = ['light', 'dark', 'auto'];
+                    useStore.getState().setColorMode(modes[index]);
+                }, children: [_jsx(SegmentedControl.IconButton, { selected: colorMode === 'light', icon: SunIcon, "aria-label": "Light" }), _jsx(SegmentedControl.IconButton, { selected: colorMode === 'dark', icon: MoonIcon, "aria-label": "Dark" }), _jsx(SegmentedControl.IconButton, { selected: colorMode === 'auto', icon: DeviceDesktopIcon, "aria-label": "Auto" })] })] }));
+};
+export default AppearanceControlsWithStore;

package/lib/components/appearance/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AppearanceControls';
+export * from './AppearanceControlsWithStore';

package/lib/components/appearance/index.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './AppearanceControls';
+export * from './AppearanceControlsWithStore';

package/lib/components/index.d.ts

@@ -1,3 +1,5 @@
+export * from "./appearance/AppearanceControls";
+export * from "./appearance/AppearanceControlsWithStore";
 export * from "./box/Box";
 export * from "./card/Card";
 export * from "./content-loader/ContentLoader";
@@ -5,4 +7,6 @@ export * from "./closeable-flash/CloseableFlash";
 export * from "./icons/CircleIcon";
 export * from "./overlay/Overlay";
 export * from "./slider/Slider";
+export * from "./logo";
+export * from "./appearance";
 export * from "./toolbar";

package/lib/components/index.js

@@ -1,3 +1,5 @@
+export * from "./appearance/AppearanceControls";
+export * from "./appearance/AppearanceControlsWithStore";
 export * from "./box/Box";
 export * from "./card/Card";
 export * from "./content-loader/ContentLoader";
@@ -5,4 +7,6 @@ export * from "./closeable-flash/CloseableFlash";
 export * from "./icons/CircleIcon";
 export * from "./overlay/Overlay";
 export * from "./slider/Slider";
+export * from "./logo";
+export * from "./appearance";
 export * from "./toolbar";

package/lib/components/logo/DatalayerLogo.d.ts

@@ -0,0 +1,18 @@
+import { type SVGProps } from 'react';
+import { type ThemeVariant } from '../../theme';
+export interface LogoColorPair {
+    primary: string;
+    secondary: string;
+}
+export declare const THEME_LOGO_COLORS: Record<ThemeVariant, {
+    light: LogoColorPair;
+    dark: LogoColorPair;
+}>;
+export declare function getLogoColors(variant?: ThemeVariant, colorMode?: 'light' | 'dark' | 'auto'): LogoColorPair;
+export interface DatalayerLogoProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
+    size?: number;
+    primaryColor?: string;
+    secondaryColor?: string;
+}
+export declare const DatalayerLogo: import("react").ForwardRefExoticComponent<DatalayerLogoProps & import("react").RefAttributes<SVGSVGElement>>;
+export default DatalayerLogo;

package/lib/components/logo/DatalayerLogo.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { forwardRef } from 'react';
+import { datalayerColors, spatialColors, lovelyColors, matrixColors, } from '../../theme';
+export const THEME_LOGO_COLORS = {
+    datalayer: {
+        light: {
+            primary: datalayerColors.greenBrand,
+            secondary: datalayerColors.greenText,
+        },
+        dark: {
+            primary: datalayerColors.greenBright,
+            secondary: datalayerColors.greenAccent,
+        },
+    },
+    spatial: {
+        light: {
+            primary: spatialColors.indigoBrand,
+            secondary: spatialColors.indigoText,
+        },
+        dark: {
+            primary: spatialColors.indigoBright,
+            secondary: spatialColors.indigoAccent,
+        },
+    },
+    lovely: {
+        light: {
+            primary: lovelyColors.roseBrand,
+            secondary: lovelyColors.roseText,
+        },
+        dark: {
+            primary: lovelyColors.roseBright,
+            secondary: lovelyColors.roseAccent,
+        },
+    },
+    matrix: {
+        light: {
+            primary: matrixColors.greenBrand,
+            secondary: matrixColors.greenText,
+        },
+        dark: {
+            primary: matrixColors.greenGlow,
+            secondary: matrixColors.greenPhosphor,
+        },
+    },
+};
+export function getLogoColors(variant = 'datalayer', colorMode = 'light') {
+    const mode = colorMode === 'auto' ? 'light' : colorMode;
+    return THEME_LOGO_COLORS[variant]?.[mode] ?? THEME_LOGO_COLORS.datalayer.light;
+}
+const BAR_HEIGHT = 25;
+const BARS = [
+    { y: 0, secondaryWidth: 30, primaryWidth: 70 },
+    { y: 37.5, secondaryWidth: 50, primaryWidth: 50 },
+    { y: 75, secondaryWidth: 70, primaryWidth: 30 },
+];
+export const DatalayerLogo = forwardRef(function DatalayerLogo({ size = 16, primaryColor = 'currentColor', secondaryColor = 'currentColor', ...svgProps }, ref) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 100", width: size, height: size, "aria-hidden": "true", ref: ref, ...svgProps, children: BARS.map(({ y, secondaryWidth, primaryWidth }) => (_jsxs("g", { children: [_jsx("rect", { x: 0, y: y, width: secondaryWidth, height: BAR_HEIGHT, fill: secondaryColor }), _jsx("rect", { x: secondaryWidth, y: y, width: primaryWidth, height: BAR_HEIGHT, fill: primaryColor })] }, y))) }));
+});
+export default DatalayerLogo;

package/lib/components/logo/DatalayerLogoText.d.ts

@@ -0,0 +1,22 @@
+import { type SVGProps } from 'react';
+import type { ThemeVariant } from '../../theme';
+export interface DatalayerLogoTextProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
+    size?: number;
+    scale?: number;
+    colorMode?: 'light' | 'dark' | 'auto';
+    variant?: ThemeVariant;
+    primaryColor?: string;
+    secondaryColor?: string;
+    textSizeMultiplier?: number;
+    /**
+     * When true, render logo mark first then text.
+     * When false (default), render text first then logo mark.
+     */
+    inverse?: boolean;
+}
+/**
+ * Datalayer icon + wordmark based on official brand proportions.
+ * Uses themed colors by default and allows explicit color overrides.
+ */
+export declare const DatalayerLogoText: import("react").ForwardRefExoticComponent<DatalayerLogoTextProps & import("react").RefAttributes<SVGSVGElement>>;
+export default DatalayerLogoText;

package/lib/components/logo/DatalayerLogoText.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { forwardRef } from 'react';
+import { getLogoColors } from './DatalayerLogo';
+import { DatalayerText } from './DatalayerText';
+/**
+ * Datalayer icon + wordmark based on official brand proportions.
+ * Uses themed colors by default and allows explicit color overrides.
+ */
+export const DatalayerLogoText = forwardRef(function DatalayerLogoText({ size = 25, scale = 1, colorMode = 'light', variant = 'datalayer', primaryColor, secondaryColor, 
+// 2.380655 ~= 25 / (0.7 * 15.00187)
+// This makes the wordmark glyph height match the 25-unit icon height.
+textSizeMultiplier = 2.380655, inverse = false, ...svgProps }, ref) {
+    const themed = getLogoColors(variant, colorMode);
+    const primary = primaryColor ?? themed.primary;
+    const secondary = secondaryColor ?? themed.secondary;
+    const baseHeight = size;
+    const baseWidth = (149.672 / 25) * size;
+    const height = baseHeight * scale;
+    const width = baseWidth * scale;
+    const iconGroup = (_jsxs("g", { transform: "translate(0 0)", children: [_jsx("rect", { x: "0", y: "0", width: "10", height: "6.25", fill: secondary }), _jsx("rect", { x: "10", y: "0", width: "15", height: "6.25", fill: primary }), _jsx("rect", { x: "0", y: "9.375", width: "15", height: "6.25", fill: secondary }), _jsx("rect", { x: "15", y: "9.375", width: "10", height: "6.25", fill: primary }), _jsx("rect", { x: "0", y: "18.75", width: "20", height: "6.25", fill: secondary }), _jsx("rect", { x: "20", y: "18.75", width: "5", height: "6.25", fill: primary })] }));
+    const logoFirst = (_jsxs(_Fragment, { children: [iconGroup, _jsx(DatalayerText, { primaryColor: primary, secondaryColor: secondary, sizeMultiplier: textSizeMultiplier, x: 16 })] }));
+    const textFirst = (_jsxs(_Fragment, { children: [_jsx(DatalayerText, { primaryColor: primary, secondaryColor: secondary, sizeMultiplier: textSizeMultiplier, x: 0 }), _jsxs("g", { transform: "translate(124.672 0)", children: [_jsx("rect", { x: "0", y: "0", width: "10", height: "6.25", fill: secondary }), _jsx("rect", { x: "10", y: "0", width: "15", height: "6.25", fill: primary }), _jsx("rect", { x: "0", y: "9.375", width: "15", height: "6.25", fill: secondary }), _jsx("rect", { x: "15", y: "9.375", width: "10", height: "6.25", fill: primary }), _jsx("rect", { x: "0", y: "18.75", width: "20", height: "6.25", fill: secondary }), _jsx("rect", { x: "20", y: "18.75", width: "5", height: "6.25", fill: primary })] })] }));
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 149.672 25", width: width, height: height, role: "img", "aria-label": "Datalayer", ref: ref, ...svgProps, children: inverse ? logoFirst : textFirst }));
+});
+export default DatalayerLogoText;

package/lib/components/logo/DatalayerText.d.ts

@@ -0,0 +1,16 @@
+import type { SVGProps } from 'react';
+export interface DatalayerTextProps extends Omit<SVGProps<SVGGElement>, 'ref'> {
+    primaryColor?: string;
+    secondaryColor?: string;
+    /** Multiplies the base wordmark size. 1.0 keeps current dimensions. */
+    sizeMultiplier?: number;
+    /** X translation in the parent SVG coordinate system. */
+    x?: number;
+    /** Y translation in the parent SVG coordinate system. */
+    y?: number;
+}
+/**
+ * Official Datalayer wordmark outlines (BebasNeue converted to paths).
+ */
+export declare const DatalayerText: ({ primaryColor, secondaryColor, sizeMultiplier, x, y, ...groupProps }: DatalayerTextProps) => JSX.Element;
+export default DatalayerText;

package/lib/components/logo/DatalayerText.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Official Datalayer wordmark outlines (BebasNeue converted to paths).
+ */
+export const DatalayerText = ({ primaryColor = 'currentColor', secondaryColor = 'currentColor', sizeMultiplier = 1, x = 20, y = -190.15, ...groupProps }) => {
+    const baseScale = 0.7;
+    const scale = baseScale * sizeMultiplier;
+    // Keep the wordmark anchored when scaling so larger multipliers do not
+    // move the paths out of the parent SVG viewBox.
+    const anchorX = 17.35761;
+    const anchorY = 289.499065;
+    const translateX = x + anchorX * (baseScale - scale);
+    const translateY = y + anchorY * (baseScale - scale);
+    return (_jsxs("g", { transform: `matrix(${scale},0,0,${scale},${translateX},${translateY})`, ...groupProps, children: [_jsx("path", { d: "m 17.35761,297 h 3.729038 c 2.357437,0 3.514725,-1.30731 3.514725,-3.70761 v -7.58666 c 0,-2.4003 -1.157288,-3.7076 -3.514725,-3.7076 H 17.35761 Z m 3.686175,-12.85875 c 0.750094,0 1.20015,0.38576 1.20015,1.45733 v 7.80097 c 0,1.07156 -0.450056,1.45733 -1.20015,1.45733 h -1.328737 v -10.71563 z", fill: secondaryColor }), _jsx("path", { d: "M 31.29328,281.99813 H 27.842849 L 25.442549,297 h 2.164556 l 0.407194,-2.72177 h 2.893219 L 31.314711,297 h 2.378869 z m -1.864519,2.65747 h 0.04286 l 1.114425,7.58666 h -2.271713 z", fill: secondaryColor }), _jsx("path", { d: "m 33.2894,284.14125 h 2.464594 V 297 h 2.357438 v -12.85875 h 2.464593 v -2.14312 H 33.2894 Z", fill: secondaryColor }), _jsx("path", { d: "M 46.027265,281.99813 H 42.576834 L 40.176534,297 h 2.164556 l 0.407194,-2.72177 h 2.893219 L 46.048696,297 h 2.378869 z m -1.864519,2.65747 h 0.04286 l 1.114425,7.58666 h -2.271713 z", fill: secondaryColor }), _jsx("path", { d: "m 51.175594,297 h 6.236494 v -2.14312 h -3.879056 v -12.85875 h -2.357438 z", fill: primaryColor }), _jsx("path", { d: "M 63.688095,281.99813 H 60.237664 L 57.837364,297 h 2.164556 l 0.407194,-2.72177 h 2.893219 L 63.709526,297 h 2.378869 z m -1.864519,2.65747 h 0.04286 l 1.114425,7.58666 h -2.271713 z", fill: primaryColor }), _jsx("path", { d: "m 68.326286,297 h 2.357438 v -4.97205 l 2.978944,-10.02982 h -2.250282 l -1.778793,6.83656 h -0.04286 l -1.778794,-6.83656 h -2.464593 l 2.978943,10.02982 z", fill: primaryColor }), _jsx("path", { d: "m 76.973461,284.14125 h 4.071938 v -2.14312 H 74.616024 V 297 h 6.429375 v -2.14312 h -4.071938 v -4.39341 h 3.236119 v -2.14313 h -3.236119 z", fill: primaryColor }), _jsx("path", { d: "m 89.814797,297 c -0.235744,-0.55721 -0.257175,-1.09299 -0.257175,-1.82166 v -2.31457 c 0,-1.56448 -0.385763,-2.67891 -1.564481,-3.17183 v -0.0429 c 1.050131,-0.49292 1.543049,-1.47875 1.543049,-3.0218 v -1.17872 c 0,-2.31458 -1.050131,-3.45043 -3.493293,-3.45043 H 82.485309 V 297 h 2.357438 v -6.10791 h 0.814387 c 1.071563,0 1.54305,0.51435 1.54305,1.90739 v 2.35743 c 0,1.22158 0.08573,1.45733 0.214313,1.84309 z m -3.836194,-12.85875 c 0.835819,0 1.20015,0.47149 1.20015,1.54305 v 1.47876 c 0,1.20015 -0.535781,1.58591 -1.414462,1.58591 h -0.921544 v -4.60772 z", fill: primaryColor })] }));
+};
+export default DatalayerText;

package/lib/components/logo/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DatalayerLogo';
+export * from './DatalayerLogoText';
+export * from './DatalayerText';

package/lib/components/logo/index.js

@@ -0,0 +1,3 @@
+export * from './DatalayerLogo';
+export * from './DatalayerLogoText';
+export * from './DatalayerText';

package/lib/index.js

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

package/lib/theme/DatalayerThemeProvider.js

@@ -3,21 +3,88 @@ 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 { useEffect, useMemo } from 'react';
 import { BaseStyles, ThemeProvider } from '@primer/react';
 import { useSystemColorMode } from './useSystemColorMode';
 import { datalayerTheme, datalayerThemeStyles } from './themes/datalayerTheme';
-import { setupPrimerPortals } from '../utils/Portals';
+import { setupPrimerPortals, syncPortalThemeStyles } from '../utils/Portals';
+/**
+ * System sans-serif font stack — shared between `fontFamily` and
+ * the Primer `--fontStack-*` CSS custom properties so that
+ * components using the CSS `font` shorthand (e.g. `Blankslate`)
+ * also pick up the themed typeface.
+ */
+const SYSTEM_FONT = '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"';
 /**
  * Shared typographic rhythm — clean, spacious feel inspired by
  * modern developer-blog aesthetics (generous line-height, open
  * letter-spacing on headings, crisp body text).
+ *
+ * Primer components like `Blankslate` use the CSS `font` shorthand
+ * through `--text-title-shorthand-*` / `--text-body-shorthand-*`.
+ * Those shorthand variables reference `--fontStack-sansSerif` (and
+ * `--fontStack-sansSerifDisplay`).  If the `@primer/primitives`
+ * typography CSS isn't loaded, the shorthand vars are undefined and
+ * components fall back to a hardcoded system font stack baked into
+ * their CSS.  We define the full set here so **every** theme gets
+ * correct font inheritance — no primitives CSS import required.
  */
 const typographyVars = {
+    /* ── Font stacks ───────────────────────────────────────────────── */
+    '--fontStack-monospace': 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace',
+    '--fontStack-sansSerif': SYSTEM_FONT,
+    '--fontStack-sansSerifDisplay': SYSTEM_FONT,
+    '--fontStack-system': SYSTEM_FONT,
+    /* ── Base text weights (from @primer/primitives) ───────────────── */
+    '--base-text-weight-light': '300',
+    '--base-text-weight-normal': '400',
+    '--base-text-weight-medium': '500',
+    '--base-text-weight-semibold': '600',
+    /* ── Body sizing ───────────────────────────────────────────────── */
+    '--text-body-size-large': '1rem',
+    '--text-body-size-medium': '0.875rem',
+    '--text-body-size-small': '0.75rem',
+    '--text-body-lineHeight-large': '1.5',
+    '--text-body-lineHeight-medium': '1.4285',
+    '--text-body-lineHeight-small': '1.6666',
+    /* ── Title sizing ──────────────────────────────────────────────── */
+    '--text-title-size-large': '2rem',
+    '--text-title-size-medium': '1.25rem',
+    '--text-title-size-small': '1rem',
+    '--text-title-lineHeight-large': '1.5',
+    '--text-title-lineHeight-medium': '1.6',
+    '--text-title-lineHeight-small': '1.5',
+    /* ── Caption / subtitle / display ──────────────────────────────── */
+    '--text-caption-size': '0.75rem',
+    '--text-caption-lineHeight': '1.3333',
+    '--text-subtitle-size': '1.25rem',
+    '--text-subtitle-lineHeight': '1.6',
+    '--text-display-size': '2.5rem',
+    '--text-display-lineHeight': '1.4',
+    /* ── Font shorthand tokens ─────────────────────────────────────── *
+     * These are the tokens consumed by Primer components (Blankslate,
+     * etc.) via `font: var(--text-title-shorthand-medium, <fallback>)`.
+     * Defining them here prevents the hard-coded fallback from firing.
+     * Each one references `var(--fontStack-sansSerif)` or
+     * `SYSTEM_FONT` directly (no nested `var()`) so that the CSS
+     * `font` shorthand parses reliably.  Themes that override fonts
+     * (e.g. Matrix monospace) replace these shorthand tokens via
+     * `buildThemeStyles({ fontFamily })` in their `themeStyles`.
+     * ─────────────────────────────────────────────────────────────── */
+    '--text-body-shorthand-large': `400 1rem/1.5 ${SYSTEM_FONT}`,
+    '--text-body-shorthand-medium': `400 0.875rem/1.4285 ${SYSTEM_FONT}`,
+    '--text-body-shorthand-small': `400 0.75rem/1.6666 ${SYSTEM_FONT}`,
+    '--text-title-shorthand-large': `600 2rem/1.5 ${SYSTEM_FONT}`,
+    '--text-title-shorthand-medium': `600 1.25rem/1.6 ${SYSTEM_FONT}`,
+    '--text-title-shorthand-small': `600 1rem/1.5 ${SYSTEM_FONT}`,
+    '--text-caption-shorthand': `400 0.75rem/1.3333 ${SYSTEM_FONT}`,
+    '--text-subtitle-shorthand': `400 1.25rem/1.6 ${SYSTEM_FONT}`,
+    '--text-display-shorthand': `500 2.5rem/1.4 ${SYSTEM_FONT}`,
+    /* ── Custom overrides ──────────────────────────────────────────── */
     '--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"',
+    fontFamily: SYSTEM_FONT,
     WebkitFontSmoothing: 'antialiased',
     MozOsxFontSmoothing: 'grayscale',
     textRendering: 'optimizeLegibility',
@@ -31,11 +98,21 @@ 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.
+    // The full set of styles that <BaseStyles> receives — we also push
+    // these to document.body so Primer portal content inherits theme
+    // tokens, fonts, and colors.
+    const portalStyles = useMemo(() => ({
+        ...typographyVars,
+        ...resolvedStyles,
+        ...baseStyles,
+    }), [resolvedStyles, baseStyles]);
+    // Keep document.body portal-root attributes AND theme styles in sync
+    // so that Primer portals (modals, dialogs, overlays) inherit the
+    // correct color mode **and** theme tokens (fonts, colors, CSS vars).
     useEffect(() => {
         setupPrimerPortals(resolvedColorMode === 'night' ? 'dark' : resolvedColorMode === 'day' ? 'light' : resolvedColorMode);
-    }, [resolvedColorMode]);
+        syncPortalThemeStyles(portalStyles);
+    }, [resolvedColorMode, portalStyles]);
     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/Palette.d.ts

@@ -1,4 +1,8 @@
-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";
+/** @deprecated Use `defaultIndicatorColors.reservation` */
+export declare const RESERVATION_CIRCLE_COLOR: string;
+/** @deprecated Use `defaultIndicatorColors.credits` */
+export declare const CREDITS_CIRCLE_COLOR: string;
+/** @deprecated Use `defaultIndicatorColors.inviteJoined` */
+export declare const JOINED_INVITE_COLOR: string;
+/** @deprecated Use `defaultIndicatorColors.invitePending` */
+export declare const PENDING_INVITE_COLOR: string;

package/lib/theme/Palette.js

@@ -2,9 +2,16 @@
  * 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';
+/**
+ * @deprecated Use `indicatorColors` / `defaultIndicatorColors` from
+ * `@datalayer/primer-addons/lib/theme` instead.
+ */
+import { defaultIndicatorColors } from './colors/indicatorColors';
+/** @deprecated Use `defaultIndicatorColors.reservation` */
+export const RESERVATION_CIRCLE_COLOR = defaultIndicatorColors.reservation;
+/** @deprecated Use `defaultIndicatorColors.credits` */
+export const CREDITS_CIRCLE_COLOR = defaultIndicatorColors.credits;
+/** @deprecated Use `defaultIndicatorColors.inviteJoined` */
+export const JOINED_INVITE_COLOR = defaultIndicatorColors.inviteJoined;
+/** @deprecated Use `defaultIndicatorColors.invitePending` */
+export const PENDING_INVITE_COLOR = defaultIndicatorColors.invitePending;

package/lib/theme/ThemedProvider.d.ts

@@ -0,0 +1,25 @@
+/**
+ * ThemedProvider – Drop-in theme provider that reads theme / color-mode
+ * from a Zustand `ThemeState` store and forwards them to
+ * `DatalayerThemeProvider`.
+ *
+ * Consumers pass the `useStore` hook as a prop, so the provider is
+ * completely decoupled from any specific application's store instance.
+ *
+ * @module theme/ThemedProvider
+ */
+import React from 'react';
+import { type IDatalayerThemeProviderProps } from './DatalayerThemeProvider';
+import type { ThemeState } from './useThemeStore';
+import type { UseBoundStore, StoreApi } from 'zustand';
+export interface ThemedProviderProps extends Omit<IDatalayerThemeProviderProps, 'ref'> {
+    /** A Zustand store hook created via `createThemeStore()`. */
+    useStore: UseBoundStore<StoreApi<ThemeState>>;
+}
+/**
+ * Drop-in replacement for `<DatalayerThemeProvider>`.
+ * Reads theme / colorMode from the supplied store and forwards them to
+ * the real provider.  Any explicit props (colorMode, theme, themeStyles)
+ * are still respected as overrides.
+ */
+export declare const ThemedProvider: React.FC<React.PropsWithChildren<ThemedProviderProps>>;

package/lib/theme/ThemedProvider.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DatalayerThemeProvider, } from './DatalayerThemeProvider';
+import { themeConfigs } from './themeRegistry';
+/**
+ * Drop-in replacement for `<DatalayerThemeProvider>`.
+ * Reads theme / colorMode from the supplied store and forwards them to
+ * the real provider.  Any explicit props (colorMode, theme, themeStyles)
+ * are still respected as overrides.
+ */
+export const ThemedProvider = ({ children, useStore, ...rest }) => {
+    const { colorMode, theme: themeVariant } = useStore();
+    const cfg = themeConfigs[themeVariant];
+    return (_jsx(DatalayerThemeProvider, { colorMode: rest.colorMode ?? colorMode, theme: rest.theme ?? cfg.primerTheme, themeStyles: rest.themeStyles ?? cfg.themeStyles, ...rest, children: children }));
+};

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

@@ -12,4 +12,18 @@ export declare const datalayerColors: {
     greenTint: string;
     greenBright: string;
     greenHover: string;
+    brightGlow: string;
+    brightPop: string;
+    brightSpark: string;
+    brightBlaze: string;
+    brightSurge: string;
+    brightFlame: string;
+    brightGold: string;
+    brightLightGlow: string;
+    brightLightPop: string;
+    brightLightSpark: string;
+    brightLightBlaze: string;
+    brightLightSurge: string;
+    brightLightFlame: string;
+    brightLightGold: string;
 };

package/lib/theme/colors/datalayerColors.js

@@ -18,4 +18,21 @@ export const datalayerColors = {
     greenTint: '#E9F7F1', // Soft background for success / callouts
     greenBright: '#2ECC71', // Highlights and glow on dark backgrounds
     greenHover: '#0E6655', // Primary button hover
+    // Bright / vivid colours for SVG illustrations (OpenAI-blog style)
+    brightGlow: '#00D68F', // Ultra-vivid emerald — primary glow
+    brightPop: '#00E5FF', // Electric cyan — contrasting accent
+    brightSpark: '#76FF03', // Lime neon — sparkle / tertiary
+    brightBlaze: '#FF1744', // Vivid red — warm accent
+    brightSurge: '#2979FF', // Electric blue — cool accent
+    // Warm vivid colours — yellow & orange accents for SVG illustrations
+    brightFlame: '#FF6D00', // Vivid orange — warm energy accent
+    brightGold: '#FFD600', // Vivid yellow — golden highlight
+    // Vivid brights for light backgrounds — punchy, saturated, OpenAI-blog vibrancy
+    brightLightGlow: '#00BFA5', // Vivid aqua-green
+    brightLightPop: '#00B0FF', // Vivid sky blue
+    brightLightSpark: '#64DD17', // Vivid chartreuse
+    brightLightBlaze: '#FF1744', // Vivid red
+    brightLightSurge: '#2979FF', // Electric blue
+    brightLightFlame: '#FF6D00', // Vivid orange
+    brightLightGold: '#FFAB00', // Vivid amber
 };

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

@@ -2,3 +2,4 @@ export { datalayerColors } from './datalayerColors';
 export { spatialColors } from './spatialColors';
 export { lovelyColors } from './lovelyColors';
 export { matrixColors } from './matrixColors';
+export { indicatorColors, defaultIndicatorColors, type IndicatorColors, } from './indicatorColors';

package/lib/theme/colors/index.js

@@ -6,3 +6,4 @@ export { datalayerColors } from './datalayerColors';
 export { spatialColors } from './spatialColors';
 export { lovelyColors } from './lovelyColors';
 export { matrixColors } from './matrixColors';
+export { indicatorColors, defaultIndicatorColors, } from './indicatorColors';

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

@@ -0,0 +1,50 @@
+/**
+ * Indicator Color Palette — Semantic status colours for indicators,
+ * badges, progress rings, and status dots.
+ *
+ * Each theme provides its own `IndicatorColors` so consumers pick up
+ * the correct tones automatically. The palette contains both
+ * **status colours** (success, warning, danger …) and
+ * **domain-specific** colours (reservation, credits, invite …).
+ *
+ * Usage:
+ * ```ts
+ * import { indicatorColors } from '@datalayer/primer-addons/lib/theme';
+ * const colors = indicatorColors.datalayer; // or .spatial, .lovely, .matrix
+ * <Box sx={{ bg: colors.success }} />
+ * ```
+ */
+export interface IndicatorColors {
+    /** Neutral / default — nothing notable */
+    neutral: string;
+    /** Muted — defined but inactive */
+    muted: string;
+    /** In-progress / loading */
+    pending: string;
+    /** Warning / attention-needed  */
+    warning: string;
+    /** Error / failure */
+    danger: string;
+    /** Healthy / success */
+    success: string;
+    /** Informational / accent */
+    info: string;
+    /** Reservation indicator (e.g. usage rings) */
+    reservation: string;
+    /** Credits indicator (e.g. usage rings) */
+    credits: string;
+    /** Accepted / joined invite */
+    inviteJoined: string;
+    /** Pending invite */
+    invitePending: string;
+}
+export declare const indicatorColors: {
+    readonly datalayer: IndicatorColors;
+    readonly spatial: IndicatorColors;
+    readonly lovely: IndicatorColors;
+    readonly matrix: IndicatorColors;
+};
+/**
+ * Convenience: default indicator palette (Datalayer theme).
+ */
+export declare const defaultIndicatorColors: IndicatorColors;