@datalayer/primer-addons 1.0.12 → 1.0.13

package/lib/theme/themes/earthTheme.js

@@ -0,0 +1,193 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Earth Theme for Primer React.
+ *
+ * Ocean blues (sea), forest greens (plants), golden yellows (sun) —
+ * the Blue Planet, inspired by satellite observations of Earth.
+ * Theming is applied via **CSS custom-property overrides**.
+ */
+import { theme as primerTheme } from '@primer/react';
+import { earthColors } from '../colors/earthColors';
+import { buildThemeStyles } from './createThemeCSSVars';
+/* ── Light-mode colour definitions ───────────────────────────────────── */
+const earthLight = {
+    canvas: {
+        default: earthColors.white,
+    },
+    fg: {
+        default: '#1A2332',
+        muted: earthColors.gray,
+        onEmphasis: earthColors.white,
+    },
+    accent: {
+        fg: earthColors.oceanText,
+        emphasis: earthColors.oceanBrand,
+        muted: earthColors.oceanAccent,
+    },
+    success: {
+        fg: earthColors.forestBrand,
+        emphasis: earthColors.forestBrand,
+        muted: earthColors.forestAccent,
+    },
+    border: {
+        default: '#C1D0DD',
+        muted: '#DAE4ED',
+    },
+    btn: {
+        text: '#1A2332',
+        bg: earthColors.white,
+        border: '#A8BDD0',
+        hoverBg: earthColors.oceanTint,
+        hoverBorder: earthColors.gray,
+        activeBg: earthColors.oceanTint,
+        activeBorder: earthColors.gray,
+        selectedBg: earthColors.white,
+        counterBg: earthColors.gray,
+        primary: {
+            text: earthColors.white,
+            bg: earthColors.oceanText,
+            border: earthColors.oceanText,
+            hoverBg: earthColors.oceanHover,
+            hoverBorder: earthColors.oceanHover,
+            selectedBg: earthColors.oceanHover,
+            disabledText: 'rgba(255, 255, 255, 0.8)',
+            disabledBg: '#7DB8D8',
+            disabledBorder: '#7DB8D8',
+            icon: earthColors.white,
+            counterBg: 'rgba(0, 0, 0, 0.2)',
+        },
+        outline: {
+            text: earthColors.oceanText,
+            hoverText: earthColors.white,
+            hoverBg: earthColors.oceanText,
+            hoverBorder: earthColors.oceanText,
+            hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
+            selectedText: earthColors.white,
+            selectedBg: earthColors.oceanHover,
+            selectedBorder: earthColors.oceanHover,
+            disabledText: earthColors.gray,
+            disabledBg: earthColors.oceanTint,
+            disabledCounterBg: 'rgba(0, 0, 0, 0.05)',
+            counterBg: 'rgba(0, 0, 0, 0.05)',
+            counterFg: earthColors.oceanText,
+            hoverCounterFg: earthColors.white,
+            disabledCounterFg: earthColors.gray,
+        },
+        danger: {
+            text: '#d32f2f',
+            hoverText: earthColors.white,
+            hoverBg: '#d32f2f',
+            hoverBorder: '#d32f2f',
+            hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
+            selectedText: earthColors.white,
+            selectedBg: '#b71c1c',
+            selectedBorder: '#b71c1c',
+            disabledText: 'rgba(211, 47, 47, 0.5)',
+            disabledBg: earthColors.oceanTint,
+            disabledCounterBg: 'rgba(211, 47, 47, 0.05)',
+            counterBg: 'rgba(211, 47, 47, 0.1)',
+            counterFg: '#d32f2f',
+            hoverCounterFg: earthColors.white,
+            disabledCounterFg: 'rgba(211, 47, 47, 0.5)',
+            icon: '#d32f2f',
+        },
+    },
+};
+/* ── Dark-mode colour definitions ────────────────────────────────────── */
+const earthDark = {
+    canvas: {
+        default: earthColors.black,
+        subtle: '#0E1D30',
+    },
+    fg: {
+        default: '#D4E4DC',
+        muted: '#8A9BA8',
+        onEmphasis: earthColors.white,
+    },
+    accent: {
+        fg: earthColors.oceanAccent,
+        emphasis: earthColors.oceanBright,
+        muted: earthColors.oceanBrand,
+        subtle: '#0C2440',
+    },
+    success: {
+        fg: earthColors.forestAccent,
+        emphasis: earthColors.forestAccent,
+        muted: earthColors.forestBrand,
+        subtle: '#0C2D18',
+    },
+    btn: {
+        text: '#D4E4DC',
+        bg: '#162236',
+        border: 'rgba(212, 228, 220, 0.12)',
+        hoverBg: '#1E3048',
+        hoverBorder: '#8A9BA8',
+        activeBg: '#162236',
+        activeBorder: '#6B7C88',
+        selectedBg: '#0E1D30',
+        counterBg: '#1E3048',
+        primary: {
+            text: earthColors.white,
+            bg: earthColors.oceanAccent,
+            border: 'rgba(212, 228, 220, 0.12)',
+            hoverBg: earthColors.oceanBright,
+            hoverBorder: 'rgba(212, 228, 220, 0.12)',
+            selectedBg: earthColors.oceanBright,
+            disabledText: 'rgba(255, 255, 255, 0.5)',
+            disabledBg: 'rgba(3, 105, 161, 0.35)',
+            disabledBorder: 'rgba(3, 105, 161, 0.2)',
+            icon: earthColors.white,
+            counterBg: 'rgba(0, 0, 0, 0.2)',
+        },
+        outline: {
+            text: earthColors.oceanAccent,
+            hoverText: earthColors.white,
+            hoverBg: earthColors.oceanAccent,
+            hoverBorder: earthColors.oceanAccent,
+            hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
+            selectedText: earthColors.white,
+            selectedBg: earthColors.oceanBright,
+            selectedBorder: earthColors.oceanBright,
+            disabledText: 'rgba(14, 165, 233, 0.5)',
+            disabledBg: 'rgba(14, 165, 233, 0.1)',
+            disabledCounterBg: 'rgba(14, 165, 233, 0.05)',
+            counterBg: 'rgba(14, 165, 233, 0.1)',
+            counterFg: earthColors.oceanAccent,
+            hoverCounterFg: earthColors.white,
+            disabledCounterFg: 'rgba(14, 165, 233, 0.5)',
+        },
+        danger: {
+            text: '#f85149',
+            hoverText: earthColors.white,
+            hoverBg: '#da3633',
+            hoverBorder: '#f85149',
+            hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
+            selectedText: earthColors.white,
+            selectedBg: '#b62324',
+            selectedBorder: '#ff7b72',
+            disabledText: 'rgba(248, 81, 73, 0.5)',
+            disabledBg: 'rgba(248, 81, 73, 0.1)',
+            disabledCounterBg: 'rgba(248, 81, 73, 0.05)',
+            counterBg: 'rgba(248, 81, 73, 0.1)',
+            counterFg: '#f85149',
+            hoverCounterFg: earthColors.white,
+            disabledCounterFg: 'rgba(248, 81, 73, 0.5)',
+            icon: '#f85149',
+        },
+    },
+};
+/* ── Exports ─────────────────────────────────────────────────────────── */
+/**
+ * The Primer theme object.
+ *
+ * Since theming is now done entirely via CSS custom properties
+ * (see `earthThemeStyles`), this is just the unmodified
+ * default Primer theme kept for backward compatibility.
+ */
+export const earthTheme = primerTheme;
+/** Comprehensive Primer CSS-variable overrides for light & dark mode. */
+export const earthThemeStyles = buildThemeStyles(earthLight, earthDark);
+export default earthTheme;

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

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

package/lib/theme/themes/lovelyTheme.js

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

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

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

package/lib/theme/themes/matrixTheme.js

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

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

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

package/lib/theme/themes/spatialTheme.js

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

package/lib/theme/useThemeStore.d.ts

@@ -9,7 +9,6 @@
 import { type StoreApi, type UseBoundStore } from 'zustand';
 import type { ThemeVariant } from './themeRegistry';
 import type { ColorMode } from './DatalayerBrandThemeProvider';
-export type { ThemeVariant, ColorMode };
 export interface ThemeState {
     /** Current color mode (light, dark, or auto = follow OS). */
     colorMode: ColorMode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/primer-addons",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "license": "BSD-3-Clause",
   "scripts": {
     "build": "tsc && vite build",

package/lib/theme/Palette.d.ts

@@ -1,8 +0,0 @@
-/** @deprecated Use `defaultIndicatorColors.reservation` */
-export declare const RESERVATION_CIRCLE_COLOR: string;
-/** @deprecated Use `defaultIndicatorColors.credits` */
-export declare const CREDITS_CIRCLE_COLOR: string;
-/** @deprecated Use `defaultIndicatorColors.inviteJoined` */
-export declare const JOINED_INVITE_COLOR: string;
-/** @deprecated Use `defaultIndicatorColors.invitePending` */
-export declare const PENDING_INVITE_COLOR: string;

package/lib/theme/Palette.js

@@ -1,17 +0,0 @@
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
-/**
- * @deprecated Use `indicatorColors` / `defaultIndicatorColors` from
- * `@datalayer/primer-addons/lib/theme` instead.
- */
-import { defaultIndicatorColors } from './colors/indicatorColors';
-/** @deprecated Use `defaultIndicatorColors.reservation` */
-export const RESERVATION_CIRCLE_COLOR = defaultIndicatorColors.reservation;
-/** @deprecated Use `defaultIndicatorColors.credits` */
-export const CREDITS_CIRCLE_COLOR = defaultIndicatorColors.credits;
-/** @deprecated Use `defaultIndicatorColors.inviteJoined` */
-export const JOINED_INVITE_COLOR = defaultIndicatorColors.inviteJoined;
-/** @deprecated Use `defaultIndicatorColors.invitePending` */
-export const PENDING_INVITE_COLOR = defaultIndicatorColors.invitePending;