@datalayer/primer-addons 1.0.18 → 1.0.20

package/lib/components/toolbar/ToolbarRenderer.js

@@ -11,6 +11,7 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
  * @module components/toolbar/ToolbarRenderer
  */
 import { Fragment } from 'react';
+import { Box } from '../box/Box';
 import { ToolbarButton } from './ToolbarButton';
 import { ToolbarDropdown } from './ToolbarDropdown';
 import { ToolbarDivider } from './ToolbarDivider';
@@ -30,6 +31,8 @@ export function ToolbarRenderer({ items, disabled, size = 'medium' }) {
                     return (_jsx(Fragment, { children: _jsx(ToolbarDropdown, { item: { ...item, disabled: itemDisabled }, size: size }) }, item.key));
                 case 'divider':
                     return (_jsx(Fragment, { children: _jsx(ToolbarDivider, {}) }, item.key));
+                case 'spacer':
+                    return (_jsx(Box, { sx: { flex: '1 1 auto', minWidth: 8 } }, item.key));
                 case 'custom':
                     return _jsx(Fragment, { children: item.render() }, item.key);
                 default:

package/lib/components/toolbar/types.d.ts

@@ -3,7 +3,7 @@ import type { IconProps } from '@primer/octicons-react';
 /**
  * Toolbar item types that can be registered in a toolbar.
  */
-export type ToolbarItemType = 'button' | 'dropdown' | 'divider' | 'custom';
+export type ToolbarItemType = 'button' | 'dropdown' | 'divider' | 'spacer' | 'custom';
 /**
  * Base toolbar item definition.
  */
@@ -88,6 +88,15 @@ export interface ToolbarDropdownItem extends ToolbarItemBase {
 export interface ToolbarDividerItem extends ToolbarItemBase {
     type: 'divider';
 }
+/**
+ * Toolbar spacer item definition.
+ *
+ * Takes the free space of the toolbar, so the items ordered after it sit on
+ * the trailing edge — e.g. a status indicator kept away from the actions.
+ */
+export interface ToolbarSpacerItem extends ToolbarItemBase {
+    type: 'spacer';
+}
 /**
  * Toolbar custom item definition.
  */
@@ -99,7 +108,7 @@ export interface ToolbarCustomItem extends ToolbarItemBase {
 /**
  * Union of all toolbar item types.
  */
-export type ToolbarItem = ToolbarButtonItem | ToolbarDropdownItem | ToolbarDividerItem | ToolbarCustomItem;
+export type ToolbarItem = ToolbarButtonItem | ToolbarDropdownItem | ToolbarDividerItem | ToolbarSpacerItem | ToolbarCustomItem;
 /**
  * Props for the extensible Toolbar component.
  */

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

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;