@datalayer/primer-addons 1.0.11 → 1.0.13

package/lib/App.d.ts

@@ -1,4 +1,5 @@
 import "@primer/primitives/dist/css/base/typography/typography.css";
+import "@primer/primitives/dist/css/base/motion/motion.css";
 import "@primer/primitives/dist/css/functional/themes/light.css";
 import "@primer/primitives/dist/css/functional/size/border.css";
 import "@primer/primitives/dist/css/functional/size/breakpoints.css";

package/lib/App.js

@@ -5,6 +5,7 @@ import { KebabHorizontalIcon } from "@primer/octicons-react";
 import { DatalayerIcon, LogOutIcon, SettingsIcon } from "@datalayer/icons-react";
 import { Slider, Overlay } from ".";
 import "@primer/primitives/dist/css/base/typography/typography.css";
+import "@primer/primitives/dist/css/base/motion/motion.css";
 import "@primer/primitives/dist/css/functional/themes/light.css";
 import "@primer/primitives/dist/css/functional/size/border.css";
 import "@primer/primitives/dist/css/functional/size/breakpoints.css";

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, Tooltip } 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(Tooltip, { text: cfg.label, direction: "s", children: _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/{theme/ThemeSwitcher.js → components/appearance/AppearanceControlsWithStore.js}

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, IconButton, SegmentedControl, Tooltip } from '@primer/react';
+import { IconButton, SegmentedControl, Tooltip } from '@primer/react';
 import { SunIcon, MoonIcon, DeviceDesktopIcon, CircleIcon, } from '@primer/octicons-react';
-import { themeConfigs, themeVariants } from './themeRegistry';
-export const ThemeSwitcher = ({ useStore }) => {
+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];
@@ -17,3 +18,4 @@ export const ThemeSwitcher = ({ useStore }) => {
                     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,39 @@
+import { type SVGProps } from 'react';
+import { type ThemeVariant } from '../../theme';
+export interface LogoColorPair {
+    primary: string;
+    secondary: string;
+    /** Colour for the "DATA" part of the wordmark (gray in the original brand logo). */
+    textColor: string;
+    /** Gradient [start, end] for primary (left) bars. */
+    primaryGradient: [start: string, end: string];
+    /** Gradient [start, end] for secondary (right) bars. */
+    secondaryGradient: [start: string, end: string];
+}
+/**
+ * Gradient pattern derived from the original brand logo SVG:
+ *   - Left bars:  accent → brand (bright → mid)
+ *   - Right bars: hover  → text  (dark  → mid)
+ *
+ * This mapping is consistent across all four themes.
+ */
+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;
+    variant?: ThemeVariant;
+    colorMode?: 'light' | 'dark' | 'auto';
+    primaryColor?: string;
+    secondaryColor?: string;
+    /** Explicit gradient [start, end] for primary (left) bars. */
+    primaryGradient?: [start: string, end: string];
+    /** Explicit gradient [start, end] for secondary (right) bars. */
+    secondaryGradient?: [start: string, end: string];
+    /** Enable horizontal gradients matching the original brand logo. Default `true`. */
+    gradient?: boolean;
+}
+export declare const DatalayerLogo: import("react").ForwardRefExoticComponent<DatalayerLogoProps & import("react").RefAttributes<SVGSVGElement>>;
+export default DatalayerLogo;

package/lib/components/logo/DatalayerLogo.js

@@ -0,0 +1,116 @@
+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, useId } from 'react';
+import { datalayerColors, spatialColors, lovelyColors, matrixColors, earthColors, } from '../../theme';
+/**
+ * Gradient pattern derived from the original brand logo SVG:
+ *   - Left bars:  accent → brand (bright → mid)
+ *   - Right bars: hover  → text  (dark  → mid)
+ *
+ * This mapping is consistent across all four themes.
+ */
+export const THEME_LOGO_COLORS = {
+    datalayer: {
+        light: {
+            primary: datalayerColors.greenAccent,
+            secondary: datalayerColors.greenText,
+            textColor: datalayerColors.gray,
+            primaryGradient: [datalayerColors.greenAccent, datalayerColors.greenBrand],
+            secondaryGradient: [datalayerColors.greenHover, datalayerColors.greenBrand],
+        },
+        dark: {
+            primary: datalayerColors.greenBright,
+            secondary: datalayerColors.greenAccent,
+            textColor: datalayerColors.gray,
+            primaryGradient: [datalayerColors.greenAccent, datalayerColors.greenBrand],
+            secondaryGradient: [datalayerColors.greenHover, datalayerColors.greenText],
+        },
+    },
+    spatial: {
+        light: {
+            primary: spatialColors.indigoBrand,
+            secondary: spatialColors.indigoText,
+            textColor: spatialColors.gray,
+            primaryGradient: [spatialColors.indigoBright, spatialColors.indigoBrand],
+            secondaryGradient: [spatialColors.indigoHover, spatialColors.indigoAccent],
+        },
+        dark: {
+            primary: spatialColors.indigoBright,
+            secondary: spatialColors.indigoAccent,
+            textColor: spatialColors.gray,
+            primaryGradient: [spatialColors.indigoBright, spatialColors.indigoBrand],
+            secondaryGradient: [spatialColors.indigoHover, spatialColors.indigoAccent],
+        },
+    },
+    lovely: {
+        light: {
+            primary: lovelyColors.roseBrand,
+            secondary: lovelyColors.roseText,
+            textColor: lovelyColors.gray,
+            primaryGradient: [lovelyColors.roseBright, lovelyColors.roseBrand],
+            secondaryGradient: [lovelyColors.roseHover, lovelyColors.roseAccent],
+        },
+        dark: {
+            primary: lovelyColors.roseBright,
+            secondary: lovelyColors.roseAccent,
+            textColor: lovelyColors.gray,
+            primaryGradient: [lovelyColors.roseBright, lovelyColors.roseBrand],
+            secondaryGradient: [lovelyColors.roseHover, lovelyColors.roseAccent],
+        },
+    },
+    matrix: {
+        light: {
+            primary: matrixColors.greenBrand,
+            secondary: matrixColors.greenText,
+            textColor: matrixColors.gray,
+            primaryGradient: [matrixColors.greenGlow, matrixColors.greenBrand],
+            secondaryGradient: [matrixColors.greenHover, matrixColors.greenAccent],
+        },
+        dark: {
+            primary: matrixColors.greenGlow,
+            secondary: matrixColors.greenPhosphor,
+            textColor: matrixColors.gray,
+            primaryGradient: [matrixColors.greenGlow, matrixColors.greenBrand],
+            secondaryGradient: [matrixColors.greenHover, matrixColors.greenAccent],
+        },
+    },
+    earth: {
+        light: {
+            primary: earthColors.oceanBrand,
+            secondary: earthColors.oceanText,
+            textColor: earthColors.gray,
+            primaryGradient: [earthColors.oceanAccent, earthColors.oceanBrand],
+            secondaryGradient: [earthColors.oceanHover, earthColors.oceanText],
+        },
+        dark: {
+            primary: earthColors.oceanBright,
+            secondary: earthColors.oceanAccent,
+            textColor: earthColors.gray,
+            primaryGradient: [earthColors.oceanBright, earthColors.oceanBrand],
+            secondaryGradient: [earthColors.oceanHover, earthColors.oceanAccent],
+        },
+    },
+};
+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, variant = 'datalayer', colorMode = 'light', primaryColor, secondaryColor, primaryGradient, secondaryGradient, gradient = true, ...svgProps }, ref) {
+    const themed = getLogoColors(variant, colorMode);
+    const resolvedPrimary = primaryColor ?? themed.primary;
+    const resolvedSecondary = secondaryColor ?? themed.secondary;
+    const uid = useId().replace(/:/g, '');
+    const [primaryStart, primaryEnd] = primaryGradient ?? themed.primaryGradient;
+    const [secondaryStart, secondaryEnd] = secondaryGradient ?? themed.secondaryGradient;
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 100", width: size, height: size, "aria-hidden": "true", ref: ref, ...svgProps, children: [gradient && (_jsxs("defs", { children: [_jsxs("linearGradient", { id: `${uid}-p`, x1: "0", y1: "0", x2: "1", y2: "0", children: [_jsx("stop", { offset: "0", stopColor: primaryStart }), _jsx("stop", { offset: "1", stopColor: primaryEnd })] }), _jsxs("linearGradient", { id: `${uid}-s`, x1: "0", y1: "0", x2: "1", y2: "0", children: [_jsx("stop", { offset: "0", stopColor: secondaryStart }), _jsx("stop", { offset: "1", stopColor: secondaryEnd })] })] })), BARS.map(({ y, secondaryWidth, primaryWidth }) => (_jsxs("g", { children: [_jsx("rect", { x: 0, y: y, width: secondaryWidth, height: BAR_HEIGHT, fill: gradient ? `url(#${uid}-p)` : resolvedPrimary }), _jsx("rect", { x: secondaryWidth, y: y, width: primaryWidth, height: BAR_HEIGHT, fill: gradient ? `url(#${uid}-s)` : resolvedSecondary })] }, y)))] }));
+});
+export default DatalayerLogo;

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

@@ -0,0 +1,30 @@
+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;
+    /** Explicit gradient [start, end] for primary (left) bars. */
+    primaryGradient?: [start: string, end: string];
+    /** Explicit gradient [start, end] for secondary (right) bars. */
+    secondaryGradient?: [start: string, end: string];
+    /** Enable horizontal gradients matching the original brand logo. Default `true`. */
+    gradient?: boolean;
+    /** Colour for the "DATA" part of the wordmark (defaults to theme gray). */
+    textColor?: 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,30 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { forwardRef } from 'react';
+import { DatalayerLogo, 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, primaryGradient, secondaryGradient, gradient = true, textColor, 
+// 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;
+    // "DATA" part of the wordmark defaults to the themed gray.
+    const dataTextColor = textColor ?? themed.textColor;
+    const baseHeight = size;
+    const baseWidth = (161.672 / 25) * size;
+    const height = baseHeight * scale;
+    const width = baseWidth * scale;
+    const logoFirst = (_jsxs(_Fragment, { children: [_jsx(DatalayerLogo, { size: 25, x: 0, y: 0, variant: variant, colorMode: colorMode, primaryColor: primary, secondaryColor: secondary, primaryGradient: primaryGradient, secondaryGradient: secondaryGradient, gradient: gradient }), _jsx(DatalayerText, { primaryColor: primary, secondaryColor: dataTextColor, sizeMultiplier: textSizeMultiplier, x: 16 })] }));
+    const textFirst = (_jsxs(_Fragment, { children: [_jsx(DatalayerText, { primaryColor: primary, secondaryColor: dataTextColor, sizeMultiplier: textSizeMultiplier, x: 0 }), _jsx(DatalayerLogo, { size: 25, x: 136.672, y: 0, variant: variant, colorMode: colorMode, primaryColor: primary, secondaryColor: secondary, primaryGradient: primaryGradient, secondaryGradient: secondaryGradient, gradient: gradient })] }));
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 161.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,22 @@
+import type { SVGProps } from 'react';
+export interface DatalayerTextProps extends Omit<SVGProps<SVGGElement>, 'ref'> {
+    /** Colour for the "LAYER" part of the wordmark. */
+    primaryColor?: string;
+    /** Colour for the "DATA" part of the wordmark (gray in the original brand logo). */
+    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).
+ *
+ * Colour mapping matches the original brand logo SVG:
+ *   - "DATA"  = secondaryColor (gray in the original)
+ *   - "LAYER" = primaryColor   (green accent in the original)
+ */
+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,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { datalayerColors } from '../../theme';
+/**
+ * Official Datalayer wordmark outlines (BebasNeue converted to paths).
+ *
+ * Colour mapping matches the original brand logo SVG:
+ *   - "DATA"  = secondaryColor (gray in the original)
+ *   - "LAYER" = primaryColor   (green accent in the original)
+ */
+export const DatalayerText = ({ primaryColor = datalayerColors.greenAccent, secondaryColor = datalayerColors.gray, 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/colors/datalayerColors.js

@@ -9,7 +9,7 @@
 export const datalayerColors = {
     // Core Neutrals
     black: '#000000', // Primary text - AAA on white
-    gray: '#59595C', // Secondary text - AA on white
+    gray: '#595A5C', // Secondary text - AA on white (matches original brand SVG)
     white: '#FFFFFF', // Background
     // Greens (Brand & Accessibility)
     greenBrand: '#16A085', // Brand accent, icons, dividers, headings

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

@@ -0,0 +1,39 @@
+/**
+ * Earth Color System – The Blue Planet
+ * Ocean blues (sea), forest greens (plants), golden yellows (sun)
+ * WCAG AA/AAA compliant
+ */
+export declare const earthColors: {
+    black: string;
+    gray: string;
+    white: string;
+    oceanBrand: string;
+    oceanAccent: string;
+    oceanText: string;
+    oceanTint: string;
+    oceanBright: string;
+    oceanHover: string;
+    forestBrand: string;
+    forestAccent: string;
+    forestTint: string;
+    sunBrand: string;
+    sunAccent: string;
+    sunTint: string;
+    earthWarm: string;
+    earthSand: string;
+    earthClay: 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/earthColors.js

@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Earth Color System – The Blue Planet
+ * Ocean blues (sea), forest greens (plants), golden yellows (sun)
+ * WCAG AA/AAA compliant
+ */
+export const earthColors = {
+    // Core Neutrals
+    black: '#0A1628', // Deep ocean night — primary dark background
+    gray: '#5B6B7A', // Slate — secondary text
+    white: '#F7FAFC', // Morning sky — primary light background
+    // Ocean Blue palette (Brand) — the blue planet
+    oceanBrand: '#0369A1', // Deep ocean — headings, icons, dividers
+    oceanAccent: '#0EA5E9', // Bright sky blue — charts, highlights on dark surfaces
+    oceanText: '#075985', // Accessible ocean blue for text & buttons (AA+ on white)
+    oceanTint: '#E0F2FE', // Pale sky — soft background for callouts
+    oceanBright: '#38BDF8', // Vivid sky blue — highlights on dark backgrounds
+    oceanHover: '#0C4A6E', // Abyss navy — primary button hover
+    // Forest / Canopy (Secondary — green like plants)
+    forestBrand: '#15803D', // Dense canopy green
+    forestAccent: '#22C55E', // Sunlit leaf green
+    forestTint: '#DCFCE7', // Morning dew
+    // Sun / Warmth (Tertiary — yellow like sun)
+    sunBrand: '#CA8A04', // Deep golden sun
+    sunAccent: '#EAB308', // Vivid sunflower
+    sunTint: '#FEF9C3', // Pale sunshine
+    // Earth / Soil tones
+    earthWarm: '#92400E', // Red earth / laterite
+    earthSand: '#D97706', // Sandstone / amber
+    earthClay: '#B45309', // Terracotta
+    // Bright / vivid colours for SVG illustrations
+    brightGlow: '#0EA5E9', // Vivid ocean blue — primary glow (sea)
+    brightPop: '#22C55E', // Vivid green — contrasting accent (vegetation)
+    brightSpark: '#EAB308', // Vivid gold — sparkle (sunlight)
+    brightBlaze: '#EF4444', // Vivid red — warm accent (wildfire / alerts)
+    brightSurge: '#3B82F6', // Deep blue — cool accent (deep water)
+    // Warm vivid colours — earth & sun accents
+    brightFlame: '#F59E0B', // Amber gold — warm energy (solar)
+    brightGold: '#FACC15', // Bright sunflower — golden highlight
+    // Vivid brights for light backgrounds
+    brightLightGlow: '#0284C7', // Deep ocean blue
+    brightLightPop: '#16A34A', // Vivid forest green
+    brightLightSpark: '#CA8A04', // Deep golden sun
+    brightLightBlaze: '#DC2626', // Deep red
+    brightLightSurge: '#2563EB', // Deep ocean blue
+    brightLightFlame: '#D97706', // Deep amber
+    brightLightGold: '#A16207', // Deep gold
+};

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

@@ -2,3 +2,17 @@ export { datalayerColors } from './datalayerColors';
 export { spatialColors } from './spatialColors';
 export { lovelyColors } from './lovelyColors';
 export { matrixColors } from './matrixColors';
+export { earthColors } from './earthColors';
+export { indicatorColors, defaultIndicatorColors, type IndicatorColors, } from './indicatorColors';
+import type { ThemeVariant } from '../themeRegistry';
+/**
+ * Themed color palettes — maps each `ThemeVariant` to its corresponding
+ * color object so consumers can pick the right palette at runtime.
+ *
+ * Usage:
+ * ```ts
+ * import { themedColors } from '@datalayer/primer-addons/lib/theme';
+ * const colors = themedColors[themeVariant]; // Record<string, string>
+ * ```
+ */
+export declare const themedColors: Record<ThemeVariant, Record<string, string>>;

package/lib/theme/colors/index.js

@@ -6,3 +6,27 @@ export { datalayerColors } from './datalayerColors';
 export { spatialColors } from './spatialColors';
 export { lovelyColors } from './lovelyColors';
 export { matrixColors } from './matrixColors';
+export { earthColors } from './earthColors';
+export { indicatorColors, defaultIndicatorColors, } from './indicatorColors';
+import { datalayerColors } from './datalayerColors';
+import { spatialColors } from './spatialColors';
+import { lovelyColors } from './lovelyColors';
+import { matrixColors } from './matrixColors';
+import { earthColors } from './earthColors';
+/**
+ * Themed color palettes — maps each `ThemeVariant` to its corresponding
+ * color object so consumers can pick the right palette at runtime.
+ *
+ * Usage:
+ * ```ts
+ * import { themedColors } from '@datalayer/primer-addons/lib/theme';
+ * const colors = themedColors[themeVariant]; // Record<string, string>
+ * ```
+ */
+export const themedColors = {
+    datalayer: datalayerColors,
+    spatial: spatialColors,
+    lovely: lovelyColors,
+    matrix: matrixColors,
+    earth: earthColors,
+};

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;