@datalayer/primer-addons 1.0.18 → 1.0.19

package/lib/components/color/ColorSwatch.js

@@ -0,0 +1,62 @@
+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 { useLayoutEffect, useRef, useState } from "react";
+import { Box, Text } from "@primer/react";
+import { useThemeStore } from "../../theme/useThemeStore";
+/** Convert an `rgb()` / `rgba()` string to a `#rrggbb` hex value. */
+function rgbToHex(rgb) {
+    const match = rgb.match(/rgba?\(([^)]+)\)/);
+    if (!match) {
+        return null;
+    }
+    const parts = match[1].split(",").map((part) => part.trim());
+    if (parts.length < 3) {
+        return null;
+    }
+    const [r, g, b] = parts.map((part) => parseInt(part, 10));
+    if ([r, g, b].some((channel) => Number.isNaN(channel))) {
+        return null;
+    }
+    const toHex = (channel) => channel.toString(16).padStart(2, "0");
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+/**
+ * Theme-aware color swatch. Renders a block filled with `color`, then reads
+ * the resolved value via `getComputedStyle` and displays it as a hex string.
+ * The resolved value recomputes whenever the active theme or color mode
+ * changes, so swatches backed by CSS custom properties stay in sync.
+ */
+export function ColorSwatch({ color, label, showValue = true, height = 54, }) {
+    const ref = useRef(null);
+    const { theme, colorMode } = useThemeStore();
+    const [hex, setHex] = useState(null);
+    useLayoutEffect(() => {
+        const raf = requestAnimationFrame(() => {
+            if (!ref.current) {
+                return;
+            }
+            const rgb = getComputedStyle(ref.current).backgroundColor;
+            setHex(rgbToHex(rgb));
+        });
+        return () => cancelAnimationFrame(raf);
+    }, [color, theme, colorMode]);
+    return (_jsxs(Box, { sx: {
+            display: "grid",
+            gridTemplateRows: `${height}px auto`,
+            border: "1px solid",
+            borderColor: "var(--borderColor-default)",
+            borderRadius: 2,
+            overflow: "hidden",
+            minWidth: 0,
+        }, children: [_jsx(Box, { ref: ref, style: { backgroundColor: color } }), _jsxs(Box, { sx: { p: 2, display: "grid", gap: 1 }, children: [_jsx(Text, { sx: {
+                            fontSize: 0,
+                            color: "fg.default",
+                            whiteSpace: "nowrap",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                        }, title: label ?? color, children: label ?? color }), showValue && hex ? (_jsx(Text, { sx: { fontSize: 0, color: "fg.muted", fontFamily: "mono" }, children: hex })) : null] })] }));
+}
+export default ColorSwatch;

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

@@ -0,0 +1 @@
+export * from "./ColorSwatch";

package/lib/components/color/index.js

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

package/lib/components/index.d.ts

@@ -1,11 +1,17 @@
 export * from "./appearance/AppearanceControls";
 export * from "./appearance/AppearanceControlsWithStore";
+export * from "./appearance/AppearanceMenu";
+export * from "./appearance/ColorModeCircle";
+export * from "./appearance/ThemePreviewCard";
+export * from "./appearance/ThemeCircle";
 export * from "./box/Box";
 export * from "./card/Card";
+export * from "./color";
 export * from "./content-loader/ContentLoader";
 export * from "./closeable-flash/CloseableFlash";
 export * from "./icons/CircleIcon";
 export * from "./side-overlay/SideOverlay";
+export * from "./sliding-panel/SlidingPanel";
 export * from "./slider/Slider";
 export * from "./logo";
 export * from "./appearance";

package/lib/components/index.js

@@ -1,11 +1,17 @@
 export * from "./appearance/AppearanceControls";
 export * from "./appearance/AppearanceControlsWithStore";
+export * from "./appearance/AppearanceMenu";
+export * from "./appearance/ColorModeCircle";
+export * from "./appearance/ThemePreviewCard";
+export * from "./appearance/ThemeCircle";
 export * from "./box/Box";
 export * from "./card/Card";
+export * from "./color";
 export * from "./content-loader/ContentLoader";
 export * from "./closeable-flash/CloseableFlash";
 export * from "./icons/CircleIcon";
 export * from "./side-overlay/SideOverlay";
+export * from "./sliding-panel/SlidingPanel";
 export * from "./slider/Slider";
 export * from "./logo";
 export * from "./appearance";

package/lib/components/logo/DatalayerLogo.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Distributed under the terms of the Modified BSD License.
  */
 import { forwardRef, useId } from 'react';
-import { datalayerColors, spatialColors, lovelyColors, matrixColors, earthColors, } from '../../theme';
+import { datalayerColors, spatialColors, lovelyColors, matrixColors, earthColors, sandColors, ivoryColors, sunColors, } from '../../theme';
 /**
  * Gradient pattern derived from the original brand logo SVG:
  *   - Left bars:  accent → brand (bright → mid)
@@ -93,6 +93,54 @@ export const THEME_LOGO_COLORS = {
             secondaryGradient: [earthColors.oceanHover, earthColors.oceanAccent],
         },
     },
+    sand: {
+        light: {
+            primary: sandColors.sandBrand,
+            secondary: sandColors.sandText,
+            textColor: sandColors.gray,
+            primaryGradient: [sandColors.sandAccent, sandColors.sandBrand],
+            secondaryGradient: [sandColors.sandHover, sandColors.sandText],
+        },
+        dark: {
+            primary: sandColors.sandBright,
+            secondary: sandColors.sandAccent,
+            textColor: sandColors.gray,
+            primaryGradient: [sandColors.sandBright, sandColors.sandBrand],
+            secondaryGradient: [sandColors.sandHover, sandColors.sandAccent],
+        },
+    },
+    ivory: {
+        light: {
+            primary: ivoryColors.ivoryBrand,
+            secondary: ivoryColors.ivoryText,
+            textColor: ivoryColors.gray,
+            primaryGradient: [ivoryColors.ivoryAccent, ivoryColors.ivoryBrand],
+            secondaryGradient: [ivoryColors.ivoryHover, ivoryColors.ivoryText],
+        },
+        dark: {
+            primary: ivoryColors.ivoryBright,
+            secondary: ivoryColors.ivoryAccent,
+            textColor: ivoryColors.gray,
+            primaryGradient: [ivoryColors.ivoryBright, ivoryColors.ivoryBrand],
+            secondaryGradient: [ivoryColors.ivoryHover, ivoryColors.ivoryAccent],
+        },
+    },
+    sun: {
+        light: {
+            primary: sunColors.sunBrand,
+            secondary: sunColors.sunText,
+            textColor: sunColors.gray,
+            primaryGradient: [sunColors.sunAccent, sunColors.sunBrand],
+            secondaryGradient: [sunColors.sunHover, sunColors.sunText],
+        },
+        dark: {
+            primary: sunColors.sunBright,
+            secondary: sunColors.sunAccent,
+            textColor: sunColors.gray,
+            primaryGradient: [sunColors.sunBright, sunColors.sunBrand],
+            secondaryGradient: [sunColors.sunHover, sunColors.sunAccent],
+        },
+    },
 };
 export function getLogoColors(variant = 'datalayer', colorMode = 'light') {
     const mode = colorMode === 'auto' ? 'light' : colorMode;

package/lib/components/side-overlay/SideOverlay.js

@@ -37,7 +37,7 @@ const PrimerAddonOverlay = (props) => {
                         display: 'flex',
                         justifyContent: 'right',
                         width: '100%'
-                    }, children: _jsx(IconButton, { variant: 'invisible', ref: closeButtonRef, onClick: closeOverlay, icon: XIcon, "aria-labelledby": "close" }) }), content] }) }));
+                    }, children: _jsx(IconButton, { variant: 'invisible', ref: closeButtonRef, onClick: closeOverlay, icon: XIcon, "aria-label": "Close" }) }), content] }) }));
     return (closeButtonRef && openButtonRef ?
         _jsx(_Fragment, { children: isOpen ?
                 direction === 'left' ?

package/lib/components/sliding-panel/SlidingPanel.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+export type SlidingPanelPosition = 'north' | 'south' | 'west' | 'east';
+export type SlidingPanelVariant = 'default' | 'info' | 'success' | 'warning' | 'error' | 'danger';
+export interface SlidingPanelProps {
+    isOpen: boolean;
+    message: ReactNode;
+    details?: ReactNode;
+    onDismiss?: () => void;
+    position?: SlidingPanelPosition;
+    variant?: SlidingPanelVariant;
+    durationMs?: number;
+    transitionMs?: number;
+    zIndex?: number;
+    offset?: number;
+    panelSize?: number | string;
+    fullWidth?: boolean;
+}
+export declare const SlidingPanel: ({ isOpen, message, details, onDismiss, position, variant, durationMs, transitionMs, zIndex, offset, panelSize, fullWidth, }: SlidingPanelProps) => import("react/jsx-runtime").JSX.Element | null;
+export default SlidingPanel;

package/lib/components/sliding-panel/SlidingPanel.js

@@ -0,0 +1,217 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { IconButton } from '@primer/react';
+import { XIcon } from '@primer/octicons-react';
+import { Box } from '../box/Box';
+const variantStyles = {
+    default: {
+        bg: 'var(--bgColor-default, #ffffff)',
+        border: 'var(--borderColor-default, #d0d7de)',
+        fg: 'var(--fgColor-default, #1f2328)',
+    },
+    info: {
+        bg: 'var(--bgColor-accent-muted, #ddf4ff)',
+        border: 'var(--borderColor-accent-emphasis, #218bff)',
+        fg: 'var(--fgColor-default, #1f2328)',
+    },
+    success: {
+        bg: 'var(--bgColor-success-muted, #dafbe1)',
+        border: 'var(--borderColor-success-emphasis, #1a7f37)',
+        fg: 'var(--fgColor-success, #1a7f37)',
+    },
+    warning: {
+        bg: 'var(--bgColor-attention-muted, #fff8c5)',
+        border: 'var(--borderColor-attention-emphasis, #9a6700)',
+        fg: 'var(--fgColor-attention, #9a6700)',
+    },
+    error: {
+        bg: 'var(--bgColor-danger-muted, #ffebe9)',
+        border: 'var(--borderColor-danger-emphasis, #cf222e)',
+        fg: 'var(--fgColor-danger, #cf222e)',
+    },
+    danger: {
+        bg: 'var(--bgColor-danger-muted, #ffebe9)',
+        border: 'var(--borderColor-danger-emphasis, #cf222e)',
+        fg: 'var(--fgColor-danger, #cf222e)',
+    },
+};
+const closeButtonStyles = {
+    default: {
+        fg: 'var(--fgColor-default, #1f2328)',
+        hoverBg: 'rgba(31, 35, 40, 0.10)',
+    },
+    info: {
+        fg: 'var(--fgColor-accent, #0969da)',
+        hoverBg: 'rgba(9, 105, 218, 0.14)',
+    },
+    success: {
+        fg: 'var(--fgColor-success, #1a7f37)',
+        hoverBg: 'rgba(26, 127, 55, 0.14)',
+    },
+    warning: {
+        fg: 'var(--fgColor-attention, #9a6700)',
+        hoverBg: 'rgba(154, 103, 0, 0.16)',
+    },
+    error: {
+        fg: 'var(--fgColor-danger, #cf222e)',
+        hoverBg: 'rgba(207, 34, 46, 0.14)',
+    },
+    danger: {
+        fg: 'var(--fgColor-danger, #cf222e)',
+        hoverBg: 'rgba(207, 34, 46, 0.14)',
+    },
+};
+const closedTransforms = {
+    north: 'translateY(-100%)',
+    south: 'translateY(100%)',
+    west: 'translateX(-100%)',
+    east: 'translateX(100%)',
+};
+const edgeBorderStyles = {
+    north: {
+        borderTop: '0',
+        borderRight: '0',
+        borderBottom: '1px solid',
+        borderLeft: '0',
+    },
+    south: {
+        borderTop: '1px solid',
+        borderRight: '0',
+        borderBottom: '0',
+        borderLeft: '0',
+    },
+    west: {
+        borderTop: '0',
+        borderRight: '1px solid',
+        borderBottom: '0',
+        borderLeft: '0',
+    },
+    east: {
+        borderTop: '0',
+        borderRight: '0',
+        borderBottom: '0',
+        borderLeft: '1px solid',
+    },
+};
+export const SlidingPanel = ({ isOpen, message, details, onDismiss, position = 'north', variant = 'default', durationMs, transitionMs = 260, zIndex = 200, offset = 0, panelSize = 360, fullWidth = true, }) => {
+    const [isMounted, setIsMounted] = useState(isOpen);
+    const [isVisible, setIsVisible] = useState(isOpen);
+    useEffect(() => {
+        if (isOpen) {
+            setIsMounted(true);
+            const showTimer = window.setTimeout(() => setIsVisible(true), 10);
+            return () => window.clearTimeout(showTimer);
+        }
+        setIsVisible(false);
+        const hideTimer = window.setTimeout(() => setIsMounted(false), transitionMs);
+        return () => window.clearTimeout(hideTimer);
+    }, [isOpen, transitionMs]);
+    useEffect(() => {
+        if (!isOpen || !onDismiss) {
+            return;
+        }
+        if (durationMs === undefined || durationMs <= 0) {
+            return;
+        }
+        const timer = window.setTimeout(() => {
+            onDismiss();
+        }, durationMs);
+        return () => {
+            window.clearTimeout(timer);
+        };
+    }, [isOpen, durationMs, onDismiss]);
+    const anchorStyles = useMemo(() => {
+        if (position === 'north') {
+            return {
+                top: offset,
+                left: 0,
+                right: 0,
+                justifyContent: 'center',
+                alignItems: 'flex-start',
+            };
+        }
+        if (position === 'south') {
+            return {
+                bottom: offset,
+                left: 0,
+                right: 0,
+                justifyContent: 'center',
+                alignItems: 'flex-end',
+            };
+        }
+        if (position === 'west') {
+            return {
+                left: offset,
+                top: 0,
+                bottom: 0,
+                justifyContent: 'flex-start',
+                alignItems: 'stretch',
+            };
+        }
+        return {
+            right: offset,
+            top: 0,
+            bottom: 0,
+            justifyContent: 'flex-end',
+            alignItems: 'stretch',
+        };
+    }, [position, offset]);
+    if (!isMounted) {
+        return null;
+    }
+    const style = variantStyles[variant];
+    const closeStyle = closeButtonStyles[variant];
+    const horizontal = position === 'north' || position === 'south';
+    const edgeBorder = edgeBorderStyles[position];
+    return (_jsx(Box, { sx: {
+            position: 'fixed',
+            zIndex,
+            display: 'flex',
+            pointerEvents: 'none',
+            ...anchorStyles,
+        }, children: _jsxs(Box, { role: variant === 'error' || variant === 'danger' ? 'alert' : 'status', "aria-live": variant === 'error' || variant === 'danger' ? 'assertive' : 'polite', onClick: onDismiss, sx: {
+                pointerEvents: 'auto',
+                position: 'relative',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'flex-start',
+                cursor: onDismiss ? 'pointer' : 'default',
+                width: horizontal
+                    ? fullWidth
+                        ? '100vw'
+                        : 'min(960px, 96vw)'
+                    : panelSize,
+                maxWidth: horizontal ? '100vw' : undefined,
+                height: horizontal ? undefined : '100vh',
+                maxHeight: horizontal ? undefined : '100vh',
+                borderColor: style.border,
+                borderTop: edgeBorder.borderTop,
+                borderRight: edgeBorder.borderRight,
+                borderBottom: edgeBorder.borderBottom,
+                borderLeft: edgeBorder.borderLeft,
+                backgroundColor: style.bg,
+                color: style.fg,
+                textAlign: 'left',
+                px: 4,
+                py: horizontal ? 3 : 4,
+                boxShadow: 'shadow.large',
+                transform: isVisible ? 'translate(0, 0)' : closedTransforms[position],
+                opacity: isVisible ? 1 : 0,
+                transition: `transform ${transitionMs}ms ease, opacity ${transitionMs}ms ease`,
+                overflow: 'auto',
+            }, children: [onDismiss ? (_jsx(Box, { sx: {
+                        position: 'absolute',
+                        top: 2,
+                        right: 3,
+                    }, children: _jsx(IconButton, { variant: "invisible", icon: XIcon, "aria-label": "Close panel", onClick: event => {
+                            event.stopPropagation();
+                            onDismiss();
+                        }, sx: {
+                            color: closeStyle.fg,
+                            borderRadius: 2,
+                            '&:hover': {
+                                backgroundColor: closeStyle.hoverBg,
+                            },
+                        } }) })) : null, _jsxs(Box, { sx: { width: 'min(980px, 100%)', display: 'grid', gap: 1, pr: onDismiss ? 6 : 0 }, children: [_jsx(Box, { sx: { fontSize: 3, fontWeight: 500, lineHeight: 1.4 }, children: message }), details ? (_jsx(Box, { sx: { fontSize: 1, fontWeight: 400, lineHeight: 1.4, color: 'fg.muted' }, children: details })) : null] })] }) }));
+};
+export default SlidingPanel;

package/lib/components/sliding-panel/SlidingPanel.stories.d.ts

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+import { type SlidingPanelProps } from './SlidingPanel';
+declare const meta: {
+    title: string;
+    component: ({ isOpen, message, details, onDismiss, position, variant, durationMs, transitionMs, zIndex, offset, panelSize, fullWidth, }: SlidingPanelProps) => import("react/jsx-runtime").JSX.Element | null;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const NorthInfo: Story;
+export declare const SouthWarning: Story;
+export declare const EastSuccess: Story;
+export declare const WestError: Story;

package/lib/components/sliding-panel/SlidingPanel.stories.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { Box, Button, Heading } from '@primer/react';
+import { SlidingPanel } from './SlidingPanel';
+const meta = {
+    title: 'Components/SlidingPanel',
+    component: SlidingPanel,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+const Demo = (props) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const openButtonRef = useRef(null);
+    return (_jsxs(Box, { sx: { p: 4, minHeight: '100vh', bg: 'canvas.default' }, children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 3 }, children: "Sliding Panel Demo" }), _jsx(Button, { ref: openButtonRef, onClick: () => setIsOpen(true), children: "Open panel" }), _jsx(SlidingPanel, { ...props, isOpen: isOpen, onDismiss: () => setIsOpen(false) }), isOpen ? (_jsx(Box, { sx: { mt: 3 }, children: _jsx(Button, { size: "small", onClick: () => setIsOpen(false), children: "Close" }) })) : null] }));
+};
+export const NorthInfo = {
+    args: {
+        isOpen: false,
+        message: 'Sliding panel message',
+        details: 'Additional details appear below the message in normal font.',
+        position: 'north',
+        variant: 'info',
+        durationMs: 4500,
+        fullWidth: true,
+    },
+    render: args => _jsx(Demo, { ...args }),
+};
+export const SouthWarning = {
+    args: {
+        isOpen: false,
+        message: 'Sliding panel message',
+        details: 'Additional details appear below the message in normal font.',
+        position: 'south',
+        variant: 'warning',
+        durationMs: 0,
+        fullWidth: true,
+    },
+    render: args => _jsx(Demo, { ...args }),
+};
+export const EastSuccess = {
+    args: {
+        isOpen: false,
+        message: 'Sliding panel message',
+        details: 'Additional details appear below the message in normal font.',
+        position: 'east',
+        variant: 'success',
+        durationMs: 0,
+        panelSize: 360,
+        fullWidth: false,
+    },
+    render: args => _jsx(Demo, { ...args }),
+};
+export const WestError = {
+    args: {
+        isOpen: false,
+        message: 'Sliding panel message',
+        details: 'Additional details appear below the message in normal font.',
+        position: 'west',
+        variant: 'error',
+        durationMs: 0,
+        panelSize: 360,
+        fullWidth: false,
+    },
+    render: args => _jsx(Demo, { ...args }),
+};

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

@@ -12,6 +12,18 @@ export declare const datalayerColors: {
     greenTint: string;
     greenBright: string;
     greenHover: string;
+    attentionBrand: string;
+    attentionAccent: string;
+    attentionTint: string;
+    dangerBrand: string;
+    dangerAccent: string;
+    dangerTint: string;
+    severeBrand: string;
+    severeAccent: string;
+    severeTint: string;
+    doneBrand: string;
+    doneAccent: string;
+    doneTint: string;
     brightGlow: string;
     brightPop: string;
     brightSpark: string;

package/lib/theme/colors/datalayerColors.js

@@ -18,6 +18,19 @@ export const datalayerColors = {
     greenTint: '#E9F7F1', // Soft background for success / callouts
     greenBright: '#2ECC71', // Highlights and glow on dark backgrounds
     greenHover: '#0E6655', // Primary button hover
+    // Semantic roles
+    attentionBrand: '#B08800',
+    attentionAccent: '#D4A72C',
+    attentionTint: '#FFF8C5',
+    dangerBrand: '#D1242F',
+    dangerAccent: '#FF6A69',
+    dangerTint: '#FFE5E5',
+    severeBrand: '#BC4C00',
+    severeAccent: '#F0883E',
+    severeTint: '#FFF1E5',
+    doneBrand: '#0969DA',
+    doneAccent: '#54AEFF',
+    doneTint: '#DDF4FF',
     // Bright / vivid colours for SVG illustrations (OpenAI-blog style)
     brightGlow: '#00D68F', // Ultra-vivid emerald — primary glow
     brightPop: '#00E5FF', // Electric cyan — contrasting accent

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

@@ -22,6 +22,18 @@ export declare const earthColors: {
     earthWarm: string;
     earthSand: string;
     earthClay: string;
+    attentionBrand: string;
+    attentionAccent: string;
+    attentionTint: string;
+    dangerBrand: string;
+    dangerAccent: string;
+    dangerTint: string;
+    severeBrand: string;
+    severeAccent: string;
+    severeTint: string;
+    doneBrand: string;
+    doneAccent: string;
+    doneTint: string;
     brightGlow: string;
     brightPop: string;
     brightSpark: string;

package/lib/theme/colors/earthColors.js

@@ -31,6 +31,19 @@ export const earthColors = {
     earthWarm: '#92400E', // Red earth / laterite
     earthSand: '#D97706', // Sandstone / amber
     earthClay: '#B45309', // Terracotta
+    // Semantic roles
+    attentionBrand: '#CA8A04',
+    attentionAccent: '#EAB308',
+    attentionTint: '#FEF9C3',
+    dangerBrand: '#B42318',
+    dangerAccent: '#EF4444',
+    dangerTint: '#FEE4E2',
+    severeBrand: '#B45309',
+    severeAccent: '#F59E0B',
+    severeTint: '#FFF1DA',
+    doneBrand: '#1D4ED8',
+    doneAccent: '#3B82F6',
+    doneTint: '#DBEAFE',
     // Bright / vivid colours for SVG illustrations
     brightGlow: '#0EA5E9', // Vivid ocean blue — primary glow (sea)
     brightPop: '#22C55E', // Vivid green — contrasting accent (vegetation)

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

@@ -3,6 +3,9 @@ export { spatialColors } from './spatialColors';
 export { lovelyColors } from './lovelyColors';
 export { matrixColors } from './matrixColors';
 export { earthColors } from './earthColors';
+export { sandColors } from './sandColors';
+export { ivoryColors } from './ivoryColors';
+export { sunColors } from './sunColors';
 import type { ThemeVariant } from '../themeRegistry';
 /**
  * Themed color palettes — maps each `ThemeVariant` to its corresponding

package/lib/theme/colors/index.js

@@ -7,11 +7,17 @@ export { spatialColors } from './spatialColors';
 export { lovelyColors } from './lovelyColors';
 export { matrixColors } from './matrixColors';
 export { earthColors } from './earthColors';
+export { sandColors } from './sandColors';
+export { ivoryColors } from './ivoryColors';
+export { sunColors } from './sunColors';
 import { datalayerColors } from './datalayerColors';
 import { spatialColors } from './spatialColors';
 import { lovelyColors } from './lovelyColors';
 import { matrixColors } from './matrixColors';
 import { earthColors } from './earthColors';
+import { sandColors } from './sandColors';
+import { ivoryColors } from './ivoryColors';
+import { sunColors } from './sunColors';
 /**
  * Themed color palettes — maps each `ThemeVariant` to its corresponding
  * color object so consumers can pick the right palette at runtime.
@@ -28,4 +34,7 @@ export const themedColors = {
     lovely: lovelyColors,
     matrix: matrixColors,
     earth: earthColors,
+    sand: sandColors,
+    ivory: ivoryColors,
+    sun: sunColors,
 };

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

@@ -0,0 +1,46 @@
+/**
+ * Ivory Color System – Soft, warm off-white neutrals.
+ *
+ * Anchored on the light-ivory base #E6D2B5 (R:230 G:210 B:181): a calm,
+ * refined, and welcoming palette paired with a deep warm taupe for
+ * accessible text. Gentle and editorial, with a hospitable, paper-like
+ * warmth. WCAG AA/AAA for text & buttons.
+ */
+export declare const ivoryColors: {
+    black: string;
+    gray: string;
+    white: string;
+    ivoryBase: string;
+    ivoryBrand: string;
+    ivoryAccent: string;
+    ivoryText: string;
+    ivoryTint: string;
+    ivoryBright: string;
+    ivoryHover: string;
+    attentionBrand: string;
+    attentionAccent: string;
+    attentionTint: string;
+    dangerBrand: string;
+    dangerAccent: string;
+    dangerTint: string;
+    severeBrand: string;
+    severeAccent: string;
+    severeTint: string;
+    doneBrand: string;
+    doneAccent: string;
+    doneTint: 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;
+};