@datalayer/primer-addons 1.0.11 → 1.0.13

package/lib/theme/colors/indicatorColors.js

@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/* ── Per-theme palettes ────────────────────────────────── */
+const datalayer = {
+    neutral: '#656D76',
+    muted: '#8b949e',
+    pending: '#d29922',
+    warning: '#d29922',
+    danger: '#d1242f',
+    success: '#16A085',
+    info: '#0969da',
+    reservation: '#656D76',
+    credits: '#16A085',
+    inviteJoined: '#0969da',
+    invitePending: '#cfd3d7',
+};
+const spatial = {
+    neutral: '#8892B0',
+    muted: '#6B7394',
+    pending: '#E2B340',
+    warning: '#E2B340',
+    danger: '#FF5252',
+    success: '#4F46E5',
+    info: '#448AFF',
+    reservation: '#8892B0',
+    credits: '#4F46E5',
+    inviteJoined: '#448AFF',
+    invitePending: '#6B7394',
+};
+const lovely = {
+    neutral: '#9D7A8F',
+    muted: '#C9A2B8',
+    pending: '#FFD740',
+    warning: '#FFD740',
+    danger: '#FF1744',
+    success: '#DB2777',
+    info: '#536DFE',
+    reservation: '#9D7A8F',
+    credits: '#DB2777',
+    inviteJoined: '#536DFE',
+    invitePending: '#C9A2B8',
+};
+const matrix = {
+    neutral: '#5A6E3A',
+    muted: '#7A9A50',
+    pending: '#FFD600',
+    warning: '#FFD600',
+    danger: '#FF3D00',
+    success: '#00C853',
+    info: '#00E676',
+    reservation: '#5A6E3A',
+    credits: '#00C853',
+    inviteJoined: '#00E676',
+    invitePending: '#7A9A50',
+};
+/* ── Public map ────────────────────────────────────────── */
+export const indicatorColors = {
+    datalayer,
+    spatial,
+    lovely,
+    matrix,
+};
+/**
+ * Convenience: default indicator palette (Datalayer theme).
+ */
+export const defaultIndicatorColors = datalayer;

package/lib/theme/index.d.ts

@@ -6,10 +6,9 @@ export * from './DatalayerBrandThemeProvider';
 export * from './themes/spatialTheme';
 export * from './themes/lovelyTheme';
 export * from './themes/matrixTheme';
+export * from './themes/earthTheme';
 export * from './themes-brand/spatialBrandTheme';
 export * from './themeRegistry';
-export * from './Palette';
 export * from './useSystemColorMode';
 export * from './useThemeStore';
-export * from './ThemeSwitcher';
 export * from './ThemedProvider';

package/lib/theme/index.js

@@ -10,10 +10,9 @@ export * from './DatalayerBrandThemeProvider';
 export * from './themes/spatialTheme';
 export * from './themes/lovelyTheme';
 export * from './themes/matrixTheme';
+export * from './themes/earthTheme';
 export * from './themes-brand/spatialBrandTheme';
 export * from './themeRegistry';
-export * from './Palette';
 export * from './useSystemColorMode';
 export * from './useThemeStore';
-export * from './ThemeSwitcher';
 export * from './ThemedProvider';

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

package/lib/theme/themeRegistry.js

@@ -6,10 +6,12 @@ import { datalayerTheme, datalayerThemeStyles } from './themes/datalayerTheme';
 import { spatialTheme, spatialThemeStyles } from './themes/spatialTheme';
 import { lovelyTheme, lovelyThemeStyles } from './themes/lovelyTheme';
 import { matrixTheme, matrixThemeStyles } from './themes/matrixTheme';
+import { earthTheme, earthThemeStyles } from './themes/earthTheme';
 import { datalayerColors } from './colors/datalayerColors';
 import { spatialColors } from './colors/spatialColors';
 import { lovelyColors } from './colors/lovelyColors';
 import { matrixColors } from './colors/matrixColors';
+import { earthColors } from './colors/earthColors';
 /* ─── Registry ────────────────────────────────────────────────────────── */
 export const themeConfigs = {
     datalayer: {
@@ -140,9 +142,41 @@ export const themeConfigs = {
             gold: matrixColors.brightLightGold, // #FFAB00 — vivid amber
         },
     },
+    earth: {
+        label: 'Earth',
+        description: 'Ocean blues, forest greens & golden sun — the Blue Planet.',
+        brandColor: earthColors.oceanBrand,
+        defaultColorMode: 'auto',
+        primerTheme: earthTheme,
+        themeStyles: earthThemeStyles,
+        cardGradient: {
+            light: { from: earthColors.oceanBrand, to: earthColors.oceanText }, // #0369A1 → #075985
+            dark: { from: earthColors.oceanAccent, to: earthColors.oceanBrand }, // #0EA5E9 → #0369A1
+        },
+        brightPalette: {
+            glow: earthColors.brightGlow, // #0EA5E9 — vivid ocean blue
+            onGlow: '#ffffff', // white text on ocean blue
+            pop: earthColors.brightPop, // #22C55E — vivid green
+            spark: earthColors.brightSpark, // #EAB308 — vivid gold
+            blaze: earthColors.brightBlaze, // #EF4444 — vivid red
+            surge: earthColors.brightSurge, // #3B82F6 — deep blue
+            flame: earthColors.brightFlame, // #F59E0B — amber gold
+            gold: earthColors.brightGold, // #FACC15 — sunflower
+        },
+        brightPaletteLight: {
+            glow: earthColors.brightLightGlow, // #0284C7 — deep ocean blue
+            onGlow: '#ffffff', // white text on deep ocean
+            pop: earthColors.brightLightPop, // #16A34A — vivid forest green
+            spark: earthColors.brightLightSpark, // #CA8A04 — deep golden sun
+            blaze: earthColors.brightLightBlaze, // #DC2626 — deep red
+            surge: earthColors.brightLightSurge, // #2563EB — deep ocean blue
+            flame: earthColors.brightLightFlame, // #D97706 — deep amber
+            gold: earthColors.brightLightGold, // #A16207 — deep gold
+        },
+    },
 };
 /** All available theme variants in display order. */
-export const themeVariants = ['datalayer', 'spatial', 'lovely', 'matrix'];
+export const themeVariants = ['datalayer', 'spatial', 'lovely', 'matrix', 'earth'];
 /** Look up a theme config by variant name. */
 export function getThemeConfig(variant) {
     return themeConfigs[variant];
@@ -263,6 +297,22 @@ const avatarColorPalettes = {
             matrixColors.brightSurge, // #00E5FF — electric blue
         ],
     },
+    earth: {
+        light: [
+            earthColors.oceanText, // #075985 — deep ocean blue
+            earthColors.oceanBrand, // #0369A1 — brand ocean
+            earthColors.brightLightPop, // #16A34A — vivid forest green
+            earthColors.brightLightSpark, // #CA8A04 — deep golden sun
+            earthColors.gray, // #5B6B7A — slate
+        ],
+        dark: [
+            earthColors.oceanAccent, // #0EA5E9 — bright sky blue
+            earthColors.oceanBright, // #38BDF8 — vivid sky blue
+            earthColors.brightPop, // #22C55E — vivid green
+            earthColors.brightSpark, // #EAB308 — vivid gold
+            earthColors.brightFlame, // #F59E0B — amber gold
+        ],
+    },
 };
 /**
  * Get a 5-colour avatar palette for the given theme variant and colour mode.

package/lib/theme/themes/datalayerTheme.d.ts

@@ -1,5 +1,3 @@
-import { datalayerColors } from '../colors';
-export { datalayerColors };
 /**
  * The Primer theme object.
  *

package/lib/theme/themes/datalayerTheme.js

@@ -12,8 +12,6 @@
 import { theme as primerTheme } from '@primer/react';
 import { datalayerColors } from '../colors';
 import { buildThemeStyles } from './createThemeCSSVars';
-// Re-export so existing consumers keep working.
-export { datalayerColors };
 /* ── Light-mode colour definitions ───────────────────────────────────── */
 const datalayerLight = {
     canvas: {