@datalayer/primer-addons 1.0.17 → 1.0.19

package/lib/theme/colors/sandColors.js

@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * 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 const sandColors = {
+    // Core Neutrals — warm, earthy
+    black: '#201B0E', // Warm dark olive-brown — primary dark background
+    gray: '#6E6142', // Khaki taupe — secondary text
+    white: '#F7F1DF', // Wheat cream — primary light background
+    // Sand / Wheat palette (Brand) — anchored on the base #E2CA76
+    sandBase: '#E2CA76', // Base color — golden wheat sand
+    sandBrand: '#E2CA76', // Brand / swatch — golden wheat
+    sandAccent: '#D4B85E', // Mid wheat — charts, highlights on dark surfaces
+    sandText: '#7A5E12', // Deep ochre — accessible buttons & text on cream (AA+)
+    sandTint: '#F2E7C2', // Pale wheat — soft background for callouts
+    sandBright: '#ECD98F', // Bright wheat — highlights on dark backgrounds
+    sandHover: '#5C4710', // Dark ochre — primary button hover
+    // Semantic roles — kept warm & earthy
+    attentionBrand: '#977E13',
+    attentionAccent: '#D9B21E',
+    attentionTint: '#F5EBC4',
+    dangerBrand: '#A8412A',
+    dangerAccent: '#D65C3F',
+    dangerTint: '#F6DDD3',
+    severeBrand: '#A5651A',
+    severeAccent: '#D98A2E',
+    severeTint: '#F6E5CC',
+    doneBrand: '#6A548F',
+    doneAccent: '#8A6FB0',
+    doneTint: '#E9E2F2',
+    // Bright / vivid colours for SVG illustrations (warm, luminous)
+    brightGlow: '#E2CA76', // Golden sand glow — primary glow (the base)
+    brightPop: '#D9A85A', // Amber clay — contrasting accent
+    brightSpark: '#ECD98F', // Bright wheat — sparkle / tertiary
+    brightBlaze: '#E0703F', // Terracotta — warm accent
+    brightSurge: '#93A97F', // Olive-sage — cool accent (desert scrub)
+    // Warm vivid colours — amber & gold accents
+    brightFlame: '#E69430', // Amber — warm energy
+    brightGold: '#F0D45E', // Golden — highlight
+    // Vivid brights for light backgrounds — deeper for contrast on cream
+    brightLightGlow: '#7A5E12', // Deep ochre
+    brightLightPop: '#A5661E', // Deep amber
+    brightLightSpark: '#977E13', // Deep wheat gold
+    brightLightBlaze: '#B0432A', // Deep terracotta
+    brightLightSurge: '#5E7050', // Deep olive
+    brightLightFlame: '#A5651A', // Deep amber
+    brightLightGold: '#8A6E10', // Deep gold
+};

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

@@ -12,6 +12,18 @@ export declare const spatialColors: {
     indigoTint: string;
     indigoBright: string;
     indigoHover: 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/spatialColors.js

@@ -18,6 +18,19 @@ export const spatialColors = {
     indigoTint: '#EEF2FF', // Soft background for callouts
     indigoBright: '#818CF8', // Highlights & glow on dark
     indigoHover: '#312E81', // Primary button hover
+    // Semantic roles
+    attentionBrand: '#C58A00',
+    attentionAccent: '#F2C94C',
+    attentionTint: '#FFF4CC',
+    dangerBrand: '#E5484D',
+    dangerAccent: '#FF7A7F',
+    dangerTint: '#FFE3E6',
+    severeBrand: '#C96A1B',
+    severeAccent: '#F4A259',
+    severeTint: '#FFF1E6',
+    doneBrand: '#7C4DFF',
+    doneAccent: '#A78BFA',
+    doneTint: '#EEE8FF',
     // Bright / vivid colours for SVG illustrations (OpenAI-blog style)
     brightGlow: '#7C4DFF', // Electric violet — primary glow
     brightPop: '#448AFF', // Neon blue — contrasting accent

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

@@ -0,0 +1,45 @@
+/**
+ * Sun Color System – Warm, radiant golden light.
+ *
+ * Anchored on the vivid amber base #FFC107 (R:255 G:193 B:7): energetic,
+ * optimistic, and welcoming, paired with a deep amber-brown for
+ * accessible text. Sunlit and luminous. WCAG AA/AAA for text & buttons.
+ */
+export declare const sunColors: {
+    black: string;
+    gray: string;
+    white: string;
+    sunBase: string;
+    sunBrand: string;
+    sunAccent: string;
+    sunText: string;
+    sunTint: string;
+    sunBright: string;
+    sunHover: 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/sunColors.js

@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Sun Color System – Warm, radiant golden light.
+ *
+ * Anchored on the vivid amber base #FFC107 (R:255 G:193 B:7): energetic,
+ * optimistic, and welcoming, paired with a deep amber-brown for
+ * accessible text. Sunlit and luminous. WCAG AA/AAA for text & buttons.
+ */
+export const sunColors = {
+    // Core Neutrals — warm, sunlit
+    black: '#1F1904', // Deep amber-brown — primary dark background
+    gray: '#7A6A3A', // Warm amber-taupe — secondary text
+    white: '#FFF9EC', // Sunlit off-white — primary light background
+    // Sun palette (Brand) — anchored on the base #FFC107
+    sunBase: '#FFC107', // Base color — radiant amber
+    sunBrand: '#FFC107', // Brand / swatch — radiant amber
+    sunAccent: '#F0A800', // Deep amber — charts, highlights on dark surfaces
+    sunText: '#8A5300', // Deep amber-brown — accessible buttons & text on cream (AA+)
+    sunTint: '#FFF1C6', // Pale sun — soft background for callouts
+    sunBright: '#FFD54A', // Bright sun — highlights on dark backgrounds
+    sunHover: '#6E4200', // Dark amber — primary button hover
+    // Semantic roles — kept warm & radiant
+    attentionBrand: '#9A7B00',
+    attentionAccent: '#E0B400',
+    attentionTint: '#FFF0BE',
+    dangerBrand: '#B23A1E',
+    dangerAccent: '#DE5A38',
+    dangerTint: '#FADFD5',
+    severeBrand: '#A85D0C',
+    severeAccent: '#E08421',
+    severeTint: '#FCE6CC',
+    doneBrand: '#6A4E9E',
+    doneAccent: '#8B72B8',
+    doneTint: '#EAE3F5',
+    // Bright / vivid colours for SVG illustrations (radiant, luminous)
+    brightGlow: '#FFC107', // Amber glow — primary glow (the base)
+    brightPop: '#FF9F1C', // Vivid orange-amber — contrasting accent
+    brightSpark: '#FFD54A', // Bright sun — sparkle / tertiary
+    brightBlaze: '#FF6B35', // Warm coral-orange — warm accent
+    brightSurge: '#4FB0C6', // Sky blue — cool accent (radiant sky)
+    // Warm vivid colours — amber & gold accents
+    brightFlame: '#FF8500', // Amber flame — warm energy
+    brightGold: '#FFD700', // Gold — highlight
+    // Vivid brights for light backgrounds — deeper for contrast on cream
+    brightLightGlow: '#8A5300', // Deep amber-brown
+    brightLightPop: '#B8560F', // Deep orange-amber
+    brightLightSpark: '#9A7B00', // Deep gold
+    brightLightBlaze: '#B23A1E', // Deep coral
+    brightLightSurge: '#2A7C8E', // Deep sky-teal
+    brightLightFlame: '#A85D0C', // Deep amber
+    brightLightGold: '#8A6E00', // Deep gold
+};

package/lib/theme/css/createThemeCSSVars.d.ts

@@ -31,6 +31,30 @@ export interface ThemeColorDefs {
         muted: string;
         subtle?: string;
     };
+    attention?: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle?: string;
+    };
+    danger?: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle?: string;
+    };
+    severe?: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle?: string;
+    };
+    done?: {
+        fg: string;
+        emphasis: string;
+        muted: string;
+        subtle?: string;
+    };
     border?: {
         default: string;
         muted: string;
@@ -125,7 +149,7 @@ export interface ThemeColorDefs {
  * | Legacy aliases   | `--color-btn-primary-bg`               |
  * | Brand (custom)   | `--brand-color-canvas-default`         |
  */
-export declare function colorDefsToCSS(defs: ThemeColorDefs): CSSProperties;
+export declare function colorDefsToCSS(defs: ThemeColorDefs, mode?: 'light' | 'dark'): CSSProperties;
 /** Light + dark CSS-property pairs for the `themeStyles` prop. */
 export interface ThemeStyles {
     light: CSSProperties;

package/lib/theme/css/createThemeCSSVars.js

@@ -33,16 +33,45 @@
  * | Legacy aliases   | `--color-btn-primary-bg`               |
  * | Brand (custom)   | `--brand-color-canvas-default`         |
  */
-export function colorDefsToCSS(defs) {
+export function colorDefsToCSS(defs, mode = 'light') {
     const optional = {};
     if (defs.canvas.subtle) {
         optional['--bgColor-muted'] = defs.canvas.subtle;
     }
+    /* ── Semantic role fallbacks ─────────────────────────────────────
+     * Themes may override `attention` / `danger` / `severe` / `done`,
+     * but when they don't we supply sensible, mode-aware defaults so the
+     * full Primer semantic palette is always defined (apps do not load
+     * @primer/primitives CSS). */
+    const roleFallbacks = mode === 'dark'
+        ? {
+            attention: { fg: '#d29922', emphasis: '#9e6a03', muted: '#bb8009', subtle: '#341a00' },
+            danger: { fg: '#f85149', emphasis: '#da3633', muted: '#b62324', subtle: '#25171c' },
+            severe: { fg: '#db6d28', emphasis: '#bd561d', muted: '#9e5122', subtle: '#2a1801' },
+            done: { fg: '#a371f7', emphasis: '#8957e5', muted: '#6e40c9', subtle: '#221530' },
+        }
+        : {
+            attention: { fg: '#9a6700', emphasis: '#bf8700', muted: '#d4a72c', subtle: '#fff8c5' },
+            danger: { fg: '#cf222e', emphasis: '#cf222e', muted: '#ff8182', subtle: '#ffebe9' },
+            severe: { fg: '#bc4c00', emphasis: '#bc4c00', muted: '#fdaa7f', subtle: '#fff1e5' },
+            done: { fg: '#8250df', emphasis: '#8250df', muted: '#d8b9ff', subtle: '#fbefff' },
+        };
+    const attention = defs.attention ?? roleFallbacks.attention;
+    const danger = defs.danger ?? roleFallbacks.danger;
+    const severe = defs.severe ?? roleFallbacks.severe;
+    const done = defs.done ?? roleFallbacks.done;
     return {
         /* ── Canvas / Background ─────────────────────────────────────── */
         '--bgColor-default': defs.canvas.default,
         '--bgColor-inset': defs.canvas.default,
         ...optional,
+        /* ── Overlay (portaled surfaces: menus, dialogs, popovers) ────
+         * Primer's <Overlay> paints its surface with `var(--overlay-bgColor)`,
+         * which normally ships in @primer/primitives. Apps using this theme do
+         * NOT load primitives CSS, so define the overlay tokens here to avoid
+         * transparent overlay panels. */
+        '--overlay-bgColor': defs.canvas.default,
+        '--overlay-backdrop-bgColor': 'rgba(0, 0, 0, 0.5)',
         /* ── Foreground / Text ───────────────────────────────────────── */
         '--fgColor-default': defs.fg.default,
         '--fgColor-muted': defs.fg.muted,
@@ -61,6 +90,30 @@ export function colorDefsToCSS(defs) {
         '--bgColor-success-muted': defs.success.subtle ?? defs.success.muted,
         '--borderColor-success-emphasis': defs.success.emphasis,
         '--borderColor-success-muted': defs.success.muted,
+        /* ── Attention (amber) ───────────────────────────────────────── */
+        '--fgColor-attention': attention.fg,
+        '--bgColor-attention-emphasis': attention.emphasis,
+        '--bgColor-attention-muted': attention.subtle ?? attention.muted,
+        '--borderColor-attention-emphasis': attention.emphasis,
+        '--borderColor-attention-muted': attention.muted,
+        /* ── Danger (red) ────────────────────────────────────────────── */
+        '--fgColor-danger': danger.fg,
+        '--bgColor-danger-emphasis': danger.emphasis,
+        '--bgColor-danger-muted': danger.subtle ?? danger.muted,
+        '--borderColor-danger-emphasis': danger.emphasis,
+        '--borderColor-danger-muted': danger.muted,
+        /* ── Severe (orange) ─────────────────────────────────────────── */
+        '--fgColor-severe': severe.fg,
+        '--bgColor-severe-emphasis': severe.emphasis,
+        '--bgColor-severe-muted': severe.subtle ?? severe.muted,
+        '--borderColor-severe-emphasis': severe.emphasis,
+        '--borderColor-severe-muted': severe.muted,
+        /* ── Done (purple) ───────────────────────────────────────────── */
+        '--fgColor-done': done.fg,
+        '--bgColor-done-emphasis': done.emphasis,
+        '--bgColor-done-muted': done.subtle ?? done.muted,
+        '--borderColor-done-emphasis': done.emphasis,
+        '--borderColor-done-muted': done.muted,
         /* ── Border (generic) ────────────────────────────────────────── */
         '--borderColor-default': defs.border?.default ?? defs.btn.border,
         '--borderColor-muted': defs.border?.muted ?? defs.btn.border,
@@ -166,6 +219,13 @@ export function colorDefsToCSS(defs) {
         '--control-transparent-bgColor-selected': defs.btn.selectedBg,
         '--control-transparent-borderColor-hover': 'transparent',
         '--control-transparent-borderColor-active': 'transparent',
+        /* ── Disabled controls / fields ─────────────────────────────── */
+        '--control-bgColor-disabled': defs.canvas.subtle ?? defs.btn.bg,
+        '--control-borderColor-disabled': defs.border?.default ?? defs.btn.border,
+        '--control-fgColor-disabled': defs.fg.muted,
+        '--fgColor-disabled': defs.fg.muted,
+        '--color-input-disabled-bg': defs.canvas.subtle ?? defs.btn.bg,
+        '--color-primer-fg-disabled': defs.fg.muted,
         /* ── Menu ────────────────────────────────────────────────────── */
         '--menu-bgColor-active': defs.btn.hoverBg,
         /* ── Legacy / compat aliases ─────────────────────────────────── */
@@ -219,7 +279,7 @@ export function buildThemeStyles(light, dark, options) {
             color: light.fg.default,
             fontSize: 'var(--text-body-size-medium)',
             ...(options?.fontFamily ? { fontFamily: options.fontFamily } : {}),
-            ...colorDefsToCSS(light),
+            ...colorDefsToCSS(light, 'light'),
             ...fontVars,
         },
         dark: {
@@ -227,7 +287,7 @@ export function buildThemeStyles(light, dark, options) {
             color: dark.fg.default,
             fontSize: 'var(--text-body-size-medium)',
             ...(options?.fontFamily ? { fontFamily: options.fontFamily } : {}),
-            ...colorDefsToCSS(dark),
+            ...colorDefsToCSS(dark, 'dark'),
             ...fontVars,
         },
     };

package/lib/theme/index.d.ts

@@ -8,6 +8,9 @@ export * from './themes/spatialTheme';
 export * from './themes/lovelyTheme';
 export * from './themes/matrixTheme';
 export * from './themes/earthTheme';
+export * from './themes/sandTheme';
+export * from './themes/ivoryTheme';
+export * from './themes/sunTheme';
 export * from './themes-brand/spatialBrandTheme';
 export * from './themeRegistry';
 export * from './palettes';

package/lib/theme/index.js

@@ -12,6 +12,9 @@ export * from './themes/spatialTheme';
 export * from './themes/lovelyTheme';
 export * from './themes/matrixTheme';
 export * from './themes/earthTheme';
+export * from './themes/sandTheme';
+export * from './themes/ivoryTheme';
+export * from './themes/sunTheme';
 export * from './themes-brand/spatialBrandTheme';
 export * from './themeRegistry';
 export * from './palettes';

package/lib/theme/palettes/ColorPalette.js

@@ -8,7 +8,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Shared palette types, theme-aware colour resolution, and reusable
  * gradient / grid definitions.
  */
-import { datalayerColors, spatialColors, lovelyColors, matrixColors, earthColors, } from '../colors';
+import { datalayerColors, spatialColors, lovelyColors, matrixColors, earthColors, sandColors, ivoryColors, sunColors, } from '../colors';
 import { getBrightPalette, } from '../themeRegistry';
 import { useThemeStore } from '../useThemeStore';
 const dlBrightDark = getBrightPalette('datalayer');
@@ -21,6 +21,12 @@ const mxBrightDark = getBrightPalette('matrix');
 const mxBrightLight = getBrightPalette('matrix', 'light');
 const eaBrightDark = getBrightPalette('earth');
 const eaBrightLight = getBrightPalette('earth', 'light');
+const saBrightDark = getBrightPalette('sand');
+const saBrightLight = getBrightPalette('sand', 'light');
+const ivBrightDark = getBrightPalette('ivory');
+const ivBrightLight = getBrightPalette('ivory', 'light');
+const suBrightDark = getBrightPalette('sun');
+const suBrightLight = getBrightPalette('sun', 'light');
 const palettes = {
     datalayer: {
         light: {
@@ -212,6 +218,120 @@ const palettes = {
             isLight: false,
         },
     },
+    sand: {
+        light: {
+            bg: '#FBF7EF',
+            bgPanel: '#ffffff',
+            bgAlt: sandColors.sandTint,
+            primary: sandColors.sandBrand,
+            secondary: sandColors.sandText,
+            accent: sandColors.sandAccent,
+            glow: saBrightLight.glow,
+            pop: saBrightLight.pop,
+            spark: saBrightLight.spark,
+            blaze: saBrightLight.blaze,
+            surge: saBrightLight.surge,
+            flame: saBrightLight.flame,
+            gold: saBrightLight.gold,
+            textLight: '#2B2118',
+            textMuted: sandColors.gray,
+            isLight: true,
+        },
+        dark: {
+            bg: sandColors.black,
+            bgPanel: '#2A2118',
+            bgAlt: '#33281A',
+            primary: sandColors.sandAccent,
+            secondary: sandColors.sandBrand,
+            accent: sandColors.sandBright,
+            glow: saBrightDark.glow,
+            pop: saBrightDark.pop,
+            spark: saBrightDark.spark,
+            blaze: saBrightDark.blaze,
+            surge: saBrightDark.surge,
+            flame: saBrightDark.flame,
+            gold: saBrightDark.gold,
+            textLight: '#EDE3D3',
+            textMuted: '#B7A793',
+            isLight: false,
+        },
+    },
+    ivory: {
+        light: {
+            bg: '#FBF6EC',
+            bgPanel: '#ffffff',
+            bgAlt: ivoryColors.ivoryTint,
+            primary: ivoryColors.ivoryBrand,
+            secondary: ivoryColors.ivoryText,
+            accent: ivoryColors.ivoryAccent,
+            glow: ivBrightLight.glow,
+            pop: ivBrightLight.pop,
+            spark: ivBrightLight.spark,
+            blaze: ivBrightLight.blaze,
+            surge: ivBrightLight.surge,
+            flame: ivBrightLight.flame,
+            gold: ivBrightLight.gold,
+            textLight: '#2C2318',
+            textMuted: ivoryColors.gray,
+            isLight: true,
+        },
+        dark: {
+            bg: ivoryColors.black,
+            bgPanel: '#2A2219',
+            bgAlt: '#33291B',
+            primary: ivoryColors.ivoryAccent,
+            secondary: ivoryColors.ivoryBrand,
+            accent: ivoryColors.ivoryBright,
+            glow: ivBrightDark.glow,
+            pop: ivBrightDark.pop,
+            spark: ivBrightDark.spark,
+            blaze: ivBrightDark.blaze,
+            surge: ivBrightDark.surge,
+            flame: ivBrightDark.flame,
+            gold: ivBrightDark.gold,
+            textLight: '#EFE6D6',
+            textMuted: '#BBAC97',
+            isLight: false,
+        },
+    },
+    sun: {
+        light: {
+            bg: '#FFF9EC',
+            bgPanel: '#ffffff',
+            bgAlt: sunColors.sunTint,
+            primary: sunColors.sunBrand,
+            secondary: sunColors.sunText,
+            accent: sunColors.sunAccent,
+            glow: suBrightLight.glow,
+            pop: suBrightLight.pop,
+            spark: suBrightLight.spark,
+            blaze: suBrightLight.blaze,
+            surge: suBrightLight.surge,
+            flame: suBrightLight.flame,
+            gold: suBrightLight.gold,
+            textLight: '#2A2210',
+            textMuted: sunColors.gray,
+            isLight: true,
+        },
+        dark: {
+            bg: sunColors.black,
+            bgPanel: '#2A2109',
+            bgAlt: '#33290C',
+            primary: sunColors.sunAccent,
+            secondary: sunColors.sunBrand,
+            accent: sunColors.sunBright,
+            glow: suBrightDark.glow,
+            pop: suBrightDark.pop,
+            spark: suBrightDark.spark,
+            blaze: suBrightDark.blaze,
+            surge: suBrightDark.surge,
+            flame: suBrightDark.flame,
+            gold: suBrightDark.gold,
+            textLight: '#F3E9CF',
+            textMuted: '#BEAC82',
+            isLight: false,
+        },
+    },
 };
 export function getColorPalette(theme = 'datalayer', colorMode = 'auto') {
     const mode = colorMode === 'auto'

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' | 'earth';
+export type ThemeVariant = 'datalayer' | 'spatial' | 'lovely' | 'matrix' | 'earth' | 'sand' | 'ivory' | 'sun';
 /** A pair of colours for a two-stop gradient. */
 export interface GradientPair {
     /** Start colour (brighter / brand). */