@datalayer/primer-addons 1.0.18 → 1.0.19

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;

package/lib/theme/css/createThemeCSSVars.js

@@ -33,11 +33,33 @@
  * | 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,
@@ -68,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,
@@ -173,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 ─────────────────────────────────── */
@@ -226,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: {
@@ -234,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';