@datalayer/primer-addons 1.0.17 → 1.0.19

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/components/toolbar/FloatingToolbar.js

@@ -114,9 +114,9 @@ export function FloatingToolbar({ items, extraItems, anchorElement, isVisible, c
             gap: '2px',
             px: 1,
             py: '4px',
-            bg: 'canvas.overlay',
+            bg: 'var(--overlay-bgColor, var(--bgColor-default))',
             border: '1px solid',
-            borderColor: 'border.default',
+            borderColor: 'var(--borderColor-muted, transparent)',
             borderRadius: 2,
             boxShadow: 'shadow.large',
             position: 'absolute',

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;
+};

package/lib/theme/colors/ivoryColors.js

@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * 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 const ivoryColors = {
+    // Core Neutrals — warm, soft
+    black: '#211C15', // Warm espresso — primary dark background
+    gray: '#6F6353', // Warm taupe — secondary text
+    white: '#FBF6EC', // Soft ivory — primary light background
+    // Ivory palette (Brand) — anchored on the base #E6D2B5
+    ivoryBase: '#E6D2B5', // Base color — light ivory
+    ivoryBrand: '#E6D2B5', // Brand / swatch — light ivory
+    ivoryAccent: '#D8C09B', // Deeper ivory — charts, highlights on dark surfaces
+    ivoryText: '#6B5A3E', // Deep warm taupe — accessible buttons & text on ivory (AA+)
+    ivoryTint: '#F3E9D6', // Pale ivory — soft background for callouts
+    ivoryBright: '#EFDFC2', // Bright ivory — highlights on dark backgrounds
+    ivoryHover: '#52442D', // Dark taupe — primary button hover
+    // Semantic roles — kept warm & refined
+    attentionBrand: '#8A7320',
+    attentionAccent: '#CBAA35',
+    attentionTint: '#F4ECCD',
+    dangerBrand: '#A34632',
+    dangerAccent: '#CE6047',
+    dangerTint: '#F5DFD8',
+    severeBrand: '#9C6221',
+    severeAccent: '#CE8637',
+    severeTint: '#F4E6D2',
+    doneBrand: '#6A5591',
+    doneAccent: '#8B72B2',
+    doneTint: '#EAE3F3',
+    // Bright / vivid colours for SVG illustrations (warm, luminous)
+    brightGlow: '#E6D2B5', // Ivory glow — primary glow (the base)
+    brightPop: '#D8B27E', // Warm tan — contrasting accent
+    brightSpark: '#EFDFC2', // Bright ivory — sparkle / tertiary
+    brightBlaze: '#DD7048', // Soft terracotta — warm accent
+    brightSurge: '#98A783', // Sage — cool accent
+    // Warm vivid colours — amber & gold accents
+    brightFlame: '#E0912F', // Amber — warm energy
+    brightGold: '#EACF6A', // Soft gold — highlight
+    // Vivid brights for light backgrounds — deeper for contrast on ivory
+    brightLightGlow: '#6B5A3E', // Deep taupe
+    brightLightPop: '#9C6626', // Deep amber-tan
+    brightLightSpark: '#8A7320', // Deep gold
+    brightLightBlaze: '#AB4229', // Deep terracotta
+    brightLightSurge: '#5C6C4C', // Deep sage
+    brightLightFlame: '#9C6221', // Deep amber
+    brightLightGold: '#836A18', // Deep gold
+};

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

@@ -12,6 +12,18 @@ export declare const lovelyColors: {
     roseTint: string;
     roseBright: string;
     roseHover: 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/lovelyColors.js

@@ -18,6 +18,19 @@ export const lovelyColors = {
     roseTint: '#FDF2F8', // Soft background for callouts
     roseBright: '#F472B6', // Highlights & glow on dark
     roseHover: '#831843', // Primary button hover
+    // Semantic roles
+    attentionBrand: '#B7791F',
+    attentionAccent: '#F6AD55',
+    attentionTint: '#FFF5E6',
+    dangerBrand: '#D61F69',
+    dangerAccent: '#FF5C8A',
+    dangerTint: '#FFE6EF',
+    severeBrand: '#C05621',
+    severeAccent: '#ED8936',
+    severeTint: '#FFF1E8',
+    doneBrand: '#805AD5',
+    doneAccent: '#B794F4',
+    doneTint: '#F3E8FF',
     // Bright / vivid colours for SVG illustrations (OpenAI-blog style)
     brightGlow: '#FF4081', // Hot pink — primary glow
     brightPop: '#FF6E40', // Vivid coral — contrasting accent

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

@@ -17,6 +17,18 @@ export declare const matrixColors: {
     greenGlow: string;
     greenHover: string;
     greenTerminal: 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/matrixColors.js

@@ -23,6 +23,19 @@ export const matrixColors = {
     greenGlow: '#39FF14', // Neon phosphor glow — brightest accent on dark
     greenHover: '#0E6655', // Datalayer hover — primary button hover
     greenTerminal: '#003B00', // Deep terminal — dark mode subtle/canvas
+    // Semantic roles
+    attentionBrand: '#A78E00',
+    attentionAccent: '#FFEA00',
+    attentionTint: '#3A3400',
+    dangerBrand: '#C62828',
+    dangerAccent: '#FF1744',
+    dangerTint: '#3A0F16',
+    severeBrand: '#C75B12',
+    severeAccent: '#FF8A00',
+    severeTint: '#332000',
+    doneBrand: '#008B8B',
+    doneAccent: '#00E5FF',
+    doneTint: '#042A2E',
     // Bright / vivid colours for SVG illustrations (OpenAI-blog style)
     brightGlow: '#39FF14', // Neon green — primary glow (re-stated for palette API)
     brightPop: '#00FF88', // Phosphor cyan — contrasting accent

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

@@ -0,0 +1,45 @@
+/**
+ * Sand Color System – Warm golden desert neutrals.
+ *
+ * Anchored on the golden-wheat base #E2CA76: sun-bleached dunes paired
+ * with deep ochre for accessible text. A calm, editorial, earthy feel
+ * with an Anthropic-like book warmth. WCAG AA/AAA for text & buttons.
+ */
+export declare const sandColors: {
+    black: string;
+    gray: string;
+    white: string;
+    sandBase: string;
+    sandBrand: string;
+    sandAccent: string;
+    sandText: string;
+    sandTint: string;
+    sandBright: string;
+    sandHover: 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;
+};