@datalayer/primer-addons 1.0.12 → 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.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { SegmentedControl } from '@primer/react';
+import { SegmentedControl, Tooltip } from '@primer/react';
 import { MoonIcon, SunIcon, DeviceDesktopIcon, } from '@primer/octicons-react';
 import { Box } from '../box/Box';
 import { themeVariants, themeConfigs, } from '../../theme';
@@ -16,27 +16,27 @@ export function AppearanceControls({ colorMode, themeVariant, onColorModeChange,
                 }, 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));
+                    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/logo/DatalayerLogo.d.ts

@@ -3,7 +3,20 @@ 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;
@@ -11,8 +24,16 @@ export declare const THEME_LOGO_COLORS: Record<ThemeVariant, {
 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

@@ -3,47 +3,94 @@ 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';
+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.greenBrand,
+            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],
         },
     },
 };
@@ -57,7 +104,13 @@ const BARS = [
     { 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 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

@@ -1,5 +1,5 @@
 import { type SVGProps } from 'react';
-import type { ThemeVariant } from '../../theme';
+import { type ThemeVariant } from '../../theme';
 export interface DatalayerLogoTextProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
     size?: number;
     scale?: number;
@@ -7,6 +7,14 @@ export interface DatalayerLogoTextProps extends Omit<SVGProps<SVGSVGElement>, 'r
     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.

package/lib/components/logo/DatalayerLogoText.js

@@ -1,29 +1,30 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 { getLogoColors } from './DatalayerLogo';
+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, 
+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 = (149.672 / 25) * size;
+    const baseWidth = (161.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 }));
+    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

@@ -1,6 +1,8 @@
 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;
@@ -11,6 +13,10 @@ export interface DatalayerTextProps extends Omit<SVGProps<SVGGElement>, 'ref'> {
 }
 /**
  * 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

@@ -1,8 +1,13 @@
 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 = 'currentColor', secondaryColor = 'currentColor', sizeMultiplier = 1, x = 20, y = -190.15, ...groupProps }) => {
+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

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,4 +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,4 +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/index.d.ts

@@ -6,9 +6,9 @@ export * from './DatalayerBrandThemeProvider';
 export * from './themes/spatialTheme';
 export * from './themes/lovelyTheme';
 export * from './themes/matrixTheme';
+export * from './themes/earthTheme';
 export * from './themes-brand/spatialBrandTheme';
 export * from './themeRegistry';
-export * from './Palette';
 export * from './useSystemColorMode';
 export * from './useThemeStore';
 export * from './ThemedProvider';

package/lib/theme/index.js

@@ -10,9 +10,9 @@ export * from './DatalayerBrandThemeProvider';
 export * from './themes/spatialTheme';
 export * from './themes/lovelyTheme';
 export * from './themes/matrixTheme';
+export * from './themes/earthTheme';
 export * from './themes-brand/spatialBrandTheme';
 export * from './themeRegistry';
-export * from './Palette';
 export * from './useSystemColorMode';
 export * from './useThemeStore';
 export * from './ThemedProvider';

package/lib/theme/themeRegistry.d.ts

@@ -1,7 +1,7 @@
 import { type CSSProperties } from 'react';
 import { type ColorMode } from './DatalayerBrandThemeProvider';
 /** Available theme variants. */
-export type ThemeVariant = 'datalayer' | 'spatial' | 'lovely' | 'matrix';
+export type ThemeVariant = 'datalayer' | 'spatial' | 'lovely' | 'matrix' | 'earth';
 /** A pair of colours for a two-stop gradient. */
 export interface GradientPair {
     /** Start colour (brighter / brand). */

package/lib/theme/themeRegistry.js

@@ -6,10 +6,12 @@ import { datalayerTheme, datalayerThemeStyles } from './themes/datalayerTheme';
 import { spatialTheme, spatialThemeStyles } from './themes/spatialTheme';
 import { lovelyTheme, lovelyThemeStyles } from './themes/lovelyTheme';
 import { matrixTheme, matrixThemeStyles } from './themes/matrixTheme';
+import { earthTheme, earthThemeStyles } from './themes/earthTheme';
 import { datalayerColors } from './colors/datalayerColors';
 import { spatialColors } from './colors/spatialColors';
 import { lovelyColors } from './colors/lovelyColors';
 import { matrixColors } from './colors/matrixColors';
+import { earthColors } from './colors/earthColors';
 /* ─── Registry ────────────────────────────────────────────────────────── */
 export const themeConfigs = {
     datalayer: {
@@ -140,9 +142,41 @@ export const themeConfigs = {
             gold: matrixColors.brightLightGold, // #FFAB00 — vivid amber
         },
     },
+    earth: {
+        label: 'Earth',
+        description: 'Ocean blues, forest greens & golden sun — the Blue Planet.',
+        brandColor: earthColors.oceanBrand,
+        defaultColorMode: 'auto',
+        primerTheme: earthTheme,
+        themeStyles: earthThemeStyles,
+        cardGradient: {
+            light: { from: earthColors.oceanBrand, to: earthColors.oceanText }, // #0369A1 → #075985
+            dark: { from: earthColors.oceanAccent, to: earthColors.oceanBrand }, // #0EA5E9 → #0369A1
+        },
+        brightPalette: {
+            glow: earthColors.brightGlow, // #0EA5E9 — vivid ocean blue
+            onGlow: '#ffffff', // white text on ocean blue
+            pop: earthColors.brightPop, // #22C55E — vivid green
+            spark: earthColors.brightSpark, // #EAB308 — vivid gold
+            blaze: earthColors.brightBlaze, // #EF4444 — vivid red
+            surge: earthColors.brightSurge, // #3B82F6 — deep blue
+            flame: earthColors.brightFlame, // #F59E0B — amber gold
+            gold: earthColors.brightGold, // #FACC15 — sunflower
+        },
+        brightPaletteLight: {
+            glow: earthColors.brightLightGlow, // #0284C7 — deep ocean blue
+            onGlow: '#ffffff', // white text on deep ocean
+            pop: earthColors.brightLightPop, // #16A34A — vivid forest green
+            spark: earthColors.brightLightSpark, // #CA8A04 — deep golden sun
+            blaze: earthColors.brightLightBlaze, // #DC2626 — deep red
+            surge: earthColors.brightLightSurge, // #2563EB — deep ocean blue
+            flame: earthColors.brightLightFlame, // #D97706 — deep amber
+            gold: earthColors.brightLightGold, // #A16207 — deep gold
+        },
+    },
 };
 /** All available theme variants in display order. */
-export const themeVariants = ['datalayer', 'spatial', 'lovely', 'matrix'];
+export const themeVariants = ['datalayer', 'spatial', 'lovely', 'matrix', 'earth'];
 /** Look up a theme config by variant name. */
 export function getThemeConfig(variant) {
     return themeConfigs[variant];
@@ -263,6 +297,22 @@ const avatarColorPalettes = {
             matrixColors.brightSurge, // #00E5FF — electric blue
         ],
     },
+    earth: {
+        light: [
+            earthColors.oceanText, // #075985 — deep ocean blue
+            earthColors.oceanBrand, // #0369A1 — brand ocean
+            earthColors.brightLightPop, // #16A34A — vivid forest green
+            earthColors.brightLightSpark, // #CA8A04 — deep golden sun
+            earthColors.gray, // #5B6B7A — slate
+        ],
+        dark: [
+            earthColors.oceanAccent, // #0EA5E9 — bright sky blue
+            earthColors.oceanBright, // #38BDF8 — vivid sky blue
+            earthColors.brightPop, // #22C55E — vivid green
+            earthColors.brightSpark, // #EAB308 — vivid gold
+            earthColors.brightFlame, // #F59E0B — amber gold
+        ],
+    },
 };
 /**
  * Get a 5-colour avatar palette for the given theme variant and colour mode.

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

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

package/lib/theme/themes/datalayerTheme.js

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