@datalayer/primer-addons 1.0.8 → 1.0.9

package/lib/theme/themes/spatialTheme.js

@@ -0,0 +1,190 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Spatial Theme for Primer React.
+ *
+ * Cosmic indigo & deep blues — inspired by space.
+ * Theming is applied via **CSS custom-property overrides**.
+ */
+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: {
+        default: spatialColors.white,
+    },
+    fg: {
+        default: '#1E1E3F',
+        muted: spatialColors.gray,
+        onEmphasis: spatialColors.white,
+    },
+    accent: {
+        fg: spatialColors.indigoText,
+        emphasis: spatialColors.indigoBrand,
+        muted: spatialColors.indigoAccent,
+    },
+    success: {
+        fg: spatialColors.indigoText,
+        emphasis: spatialColors.indigoBrand,
+        muted: spatialColors.indigoAccent,
+    },
+    btn: {
+        text: '#1E1E3F',
+        bg: spatialColors.white,
+        border: '#C7D2FE',
+        hoverBg: spatialColors.indigoTint,
+        hoverBorder: spatialColors.gray,
+        activeBg: spatialColors.indigoTint,
+        activeBorder: spatialColors.gray,
+        selectedBg: spatialColors.white,
+        counterBg: spatialColors.gray,
+        primary: {
+            text: spatialColors.white,
+            bg: spatialColors.indigoText,
+            border: spatialColors.indigoText,
+            hoverBg: spatialColors.indigoHover,
+            hoverBorder: spatialColors.indigoHover,
+            selectedBg: spatialColors.indigoHover,
+            disabledText: 'rgba(255, 255, 255, 0.8)',
+            disabledBg: '#B4B0D8',
+            disabledBorder: '#B4B0D8',
+            icon: spatialColors.white,
+            counterBg: 'rgba(0, 0, 0, 0.2)',
+        },
+        outline: {
+            text: spatialColors.indigoText,
+            hoverText: spatialColors.white,
+            hoverBg: spatialColors.indigoText,
+            hoverBorder: spatialColors.indigoText,
+            hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
+            selectedText: spatialColors.white,
+            selectedBg: spatialColors.indigoHover,
+            selectedBorder: spatialColors.indigoHover,
+            disabledText: spatialColors.gray,
+            disabledBg: spatialColors.indigoTint,
+            disabledCounterBg: 'rgba(0, 0, 0, 0.05)',
+            counterBg: 'rgba(0, 0, 0, 0.05)',
+            counterFg: spatialColors.indigoText,
+            hoverCounterFg: spatialColors.white,
+            disabledCounterFg: spatialColors.gray,
+        },
+        danger: {
+            text: '#d32f2f',
+            hoverText: spatialColors.white,
+            hoverBg: '#d32f2f',
+            hoverBorder: '#d32f2f',
+            hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
+            selectedText: spatialColors.white,
+            selectedBg: '#b71c1c',
+            selectedBorder: '#b71c1c',
+            disabledText: 'rgba(211, 47, 47, 0.5)',
+            disabledBg: spatialColors.indigoTint,
+            disabledCounterBg: 'rgba(211, 47, 47, 0.05)',
+            counterBg: 'rgba(211, 47, 47, 0.1)',
+            counterFg: '#d32f2f',
+            hoverCounterFg: spatialColors.white,
+            disabledCounterFg: 'rgba(211, 47, 47, 0.5)',
+            icon: '#d32f2f',
+        },
+    },
+};
+/* ── Dark-mode colour definitions ────────────────────────────────────── */
+const spatialDark = {
+    canvas: {
+        default: spatialColors.black,
+        subtle: '#111827',
+    },
+    fg: {
+        default: '#E0E7FF',
+        muted: '#94A3B8',
+        onEmphasis: spatialColors.white,
+    },
+    accent: {
+        fg: spatialColors.indigoAccent,
+        emphasis: spatialColors.indigoBright,
+        muted: spatialColors.indigoBrand,
+        subtle: '#1E1B4B',
+    },
+    success: {
+        fg: spatialColors.indigoAccent,
+        emphasis: spatialColors.indigoBright,
+        muted: spatialColors.indigoBrand,
+        subtle: '#1E1B4B',
+    },
+    btn: {
+        text: '#E0E7FF',
+        bg: '#1E293B',
+        border: 'rgba(199, 210, 254, 0.15)',
+        hoverBg: '#334155',
+        hoverBorder: '#94A3B8',
+        activeBg: '#1E293B',
+        activeBorder: '#64748B',
+        selectedBg: '#0F172A',
+        counterBg: '#334155',
+        primary: {
+            text: spatialColors.white,
+            bg: spatialColors.indigoAccent,
+            border: 'rgba(199, 210, 254, 0.15)',
+            hoverBg: spatialColors.indigoBright,
+            hoverBorder: 'rgba(199, 210, 254, 0.15)',
+            selectedBg: spatialColors.indigoBright,
+            disabledText: 'rgba(255, 255, 255, 0.5)',
+            disabledBg: 'rgba(79, 70, 229, 0.35)',
+            disabledBorder: 'rgba(79, 70, 229, 0.2)',
+            icon: spatialColors.white,
+            counterBg: 'rgba(0, 0, 0, 0.2)',
+        },
+        outline: {
+            text: spatialColors.indigoAccent,
+            hoverText: spatialColors.white,
+            hoverBg: spatialColors.indigoAccent,
+            hoverBorder: spatialColors.indigoAccent,
+            hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
+            selectedText: spatialColors.white,
+            selectedBg: spatialColors.indigoBright,
+            selectedBorder: spatialColors.indigoBright,
+            disabledText: 'rgba(99, 102, 241, 0.5)',
+            disabledBg: 'rgba(99, 102, 241, 0.1)',
+            disabledCounterBg: 'rgba(99, 102, 241, 0.05)',
+            counterBg: 'rgba(99, 102, 241, 0.1)',
+            counterFg: spatialColors.indigoAccent,
+            hoverCounterFg: spatialColors.white,
+            disabledCounterFg: 'rgba(99, 102, 241, 0.5)',
+        },
+        danger: {
+            text: '#f85149',
+            hoverText: spatialColors.white,
+            hoverBg: '#da3633',
+            hoverBorder: '#f85149',
+            hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
+            selectedText: spatialColors.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: spatialColors.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 `spatialThemeStyles`), this is just the unmodified
+ * default Primer theme kept for backward compatibility.
+ */
+export const spatialTheme = primerTheme;
+/** Comprehensive Primer CSS-variable overrides for light & dark mode. */
+export const spatialThemeStyles = buildThemeStyles(spatialLight, spatialDark);
+export default spatialTheme;

package/lib/theme/themes-brand/index.d.ts

@@ -0,0 +1 @@
+export * from './spatialBrandTheme';

package/lib/theme/themes-brand/index.js

@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './spatialBrandTheme';

package/lib/theme/themes-brand/spatialBrandTheme.d.ts

@@ -0,0 +1,16 @@
+import { type CSSProperties } from 'react';
+export declare const spatialBrandLight: CSSProperties;
+export declare const spatialBrandDark: CSSProperties;
+/**
+ * Spatial Brand Theme — combined light + dark overrides.
+ *
+ * Pass to `DatalayerBrandThemeProvider`'s `brandTheme` prop.
+ */
+export declare const spatialBrandTheme: {
+    light: CSSProperties;
+    dark: CSSProperties;
+};
+export type BrandTheme = {
+    light: CSSProperties;
+    dark: CSSProperties;
+};

package/lib/theme/themes-brand/spatialBrandTheme.js

@@ -0,0 +1,157 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Spatial Brand Theme — Cosmic & Space-Inspired
+ *
+ * Overrides Primer Brand (`@primer/react-brand`) CSS custom properties
+ * to produce an indigo / deep-blue aesthetic.  The tokens listed here
+ * mirror the `--brand-color-*` and `--brand-button-*` variables defined
+ * in `@primer/react-brand/lib/css/main.css`.
+ *
+ * Primer Brand components resolve their colours exclusively through
+ * CSS custom properties scoped under `[data-color-mode]` selectors.
+ * By providing higher-specificity inline style overrides through the
+ * `DatalayerBrandThemeProvider`, we swap the entire palette without
+ * touching the Brand stylesheet itself — the same technique the
+ * VS Code extension uses to re-skin Primer for its webviews.
+ */
+import { spatialColors } from '../colors';
+/* ── Light mode ─────────────────────────────────────────────────────── */
+export const spatialBrandLight = {
+    // Canvas
+    '--brand-color-canvas-default': spatialColors.white,
+    '--brand-color-canvas-overlay': spatialColors.white,
+    '--brand-color-canvas-inset': spatialColors.indigoTint,
+    '--brand-color-canvas-subtle': spatialColors.indigoTint,
+    // Text
+    '--brand-color-text-default': '#1E1E3F',
+    '--brand-color-text-muted': spatialColors.gray,
+    '--brand-color-text-subtle': '#A0AEC0',
+    '--brand-color-text-onEmphasis': spatialColors.white,
+    // Accent
+    '--brand-color-accent-primary': spatialColors.indigoBrand,
+    '--brand-color-accent-secondary': spatialColors.indigoAccent,
+    // Borders
+    '--brand-color-border-default': '#C7D2FE',
+    '--brand-color-border-muted': '#DDD6FE',
+    '--brand-color-border-subtle': spatialColors.indigoTint,
+    // Focus
+    '--brand-color-focus': spatialColors.indigoBrand,
+    // Neutral
+    '--brand-color-neutral-emphasisPlus': '#1E1E3F',
+    '--brand-color-neutral-emphasis': spatialColors.gray,
+    '--brand-color-neutral-muted': 'rgba(99, 102, 241, 0.20)',
+    '--brand-color-neutral-subtle': 'rgba(99, 102, 241, 0.08)',
+    // Success / Error (keep semantic)
+    '--brand-color-success-fg': '#1a7f37',
+    '--brand-color-success-emphasis': '#2da44e',
+    '--brand-color-success-muted': 'rgba(75, 195, 107, 0.6)',
+    '--brand-color-success-subtle': '#dafbe1',
+    '--brand-color-error-fg': '#d32f2f',
+    '--brand-color-error-emphasis': '#d32f2f',
+    '--brand-color-error-muted': 'rgba(255, 135, 133, 0.6)',
+    '--brand-color-error-subtle': '#ffdcd7',
+    // Buttons — primary
+    '--brand-button-primary-bgColor-rest': spatialColors.indigoText,
+    '--brand-button-primary-bgColor-hover': spatialColors.indigoHover,
+    '--brand-button-primary-bgColor-active': spatialColors.indigoHover,
+    '--brand-button-primary-bgColor-disabled': '#B4B0D8',
+    '--brand-button-primary-borderColor-rest': spatialColors.indigoText,
+    '--brand-button-primary-borderColor-hover': spatialColors.indigoHover,
+    '--brand-button-primary-borderColor-active': spatialColors.indigoHover,
+    '--brand-button-primary-borderColor-disabled': '#B4B0D8',
+    '--brand-button-primary-fgColor-rest': spatialColors.white,
+    '--brand-button-primary-fgColor-disabled': 'rgba(255, 255, 255, 0.5)',
+    // Buttons — accent
+    '--brand-button-accent-bgColor-rest': spatialColors.indigoBrand,
+    '--brand-button-accent-bgColor-hover': spatialColors.indigoAccent,
+    '--brand-button-accent-bgColor-active': spatialColors.indigoBrand,
+    '--brand-button-accent-bgColor-disabled': '#B4B0D8',
+    '--brand-button-accent-fgColor-rest': spatialColors.white,
+    '--brand-button-accent-fgColor-disabled': 'rgba(255, 255, 255, 0.5)',
+    // Buttons — secondary
+    '--brand-button-secondary-bgColor-rest': 'transparent',
+    '--brand-button-secondary-borderColor-rest': 'rgba(79, 70, 229, 0.25)',
+    '--brand-button-secondary-borderColor-hover': 'rgba(79, 70, 229, 0.5)',
+    '--brand-button-secondary-borderColor-active': 'rgba(79, 70, 229, 0.5)',
+    '--brand-button-secondary-fgColor-rest': spatialColors.indigoText,
+    '--brand-button-secondary-fgColor-disabled': '#B4B0D8',
+    // Applied styles
+    backgroundColor: spatialColors.white,
+    color: '#1E1E3F',
+};
+/* ── Dark mode ──────────────────────────────────────────────────────── */
+export const spatialBrandDark = {
+    // Canvas
+    '--brand-color-canvas-default': spatialColors.black,
+    '--brand-color-canvas-overlay': '#111827',
+    '--brand-color-canvas-inset': spatialColors.black,
+    '--brand-color-canvas-subtle': '#111827',
+    // Text
+    '--brand-color-text-default': '#E0E7FF',
+    '--brand-color-text-muted': '#94A3B8',
+    '--brand-color-text-subtle': '#64748B',
+    '--brand-color-text-onEmphasis': spatialColors.white,
+    // Accent
+    '--brand-color-accent-primary': spatialColors.indigoAccent,
+    '--brand-color-accent-secondary': spatialColors.indigoBright,
+    // Borders
+    '--brand-color-border-default': 'rgba(199, 210, 254, 0.15)',
+    '--brand-color-border-muted': 'rgba(199, 210, 254, 0.10)',
+    '--brand-color-border-subtle': 'rgba(199, 210, 254, 0.06)',
+    // Focus
+    '--brand-color-focus': spatialColors.indigoAccent,
+    // Neutral
+    '--brand-color-neutral-emphasisPlus': '#94A3B8',
+    '--brand-color-neutral-emphasis': '#64748B',
+    '--brand-color-neutral-muted': 'rgba(99, 102, 241, 0.25)',
+    '--brand-color-neutral-subtle': 'rgba(99, 102, 241, 0.12)',
+    // Success / Error
+    '--brand-color-success-fg': '#3fb950',
+    '--brand-color-success-emphasis': '#238636',
+    '--brand-color-success-muted': 'rgba(46, 158, 66, 0.6)',
+    '--brand-color-success-subtle': 'rgba(46, 158, 66, 0.85)',
+    '--brand-color-error-fg': '#f85149',
+    '--brand-color-error-emphasis': '#da3633',
+    '--brand-color-error-muted': 'rgba(248, 82, 73, 0.6)',
+    '--brand-color-error-subtle': 'rgba(248, 82, 73, 0.85)',
+    // Buttons — primary
+    '--brand-button-primary-bgColor-rest': spatialColors.indigoAccent,
+    '--brand-button-primary-bgColor-hover': spatialColors.indigoBright,
+    '--brand-button-primary-bgColor-active': spatialColors.indigoBright,
+    '--brand-button-primary-bgColor-disabled': 'rgba(79, 70, 229, 0.35)',
+    '--brand-button-primary-borderColor-rest': 'rgba(199, 210, 254, 0.15)',
+    '--brand-button-primary-borderColor-hover': 'rgba(199, 210, 254, 0.15)',
+    '--brand-button-primary-borderColor-active': 'rgba(199, 210, 254, 0.15)',
+    '--brand-button-primary-borderColor-disabled': 'rgba(79, 70, 229, 0.2)',
+    '--brand-button-primary-fgColor-rest': spatialColors.white,
+    '--brand-button-primary-fgColor-disabled': 'rgba(255, 255, 255, 0.5)',
+    // Buttons — accent
+    '--brand-button-accent-bgColor-rest': spatialColors.indigoBrand,
+    '--brand-button-accent-bgColor-hover': spatialColors.indigoAccent,
+    '--brand-button-accent-bgColor-active': spatialColors.indigoBrand,
+    '--brand-button-accent-bgColor-disabled': 'rgba(79, 70, 229, 0.35)',
+    '--brand-button-accent-fgColor-rest': spatialColors.white,
+    '--brand-button-accent-fgColor-disabled': 'rgba(255, 255, 255, 0.5)',
+    // Buttons — secondary
+    '--brand-button-secondary-bgColor-rest': 'transparent',
+    '--brand-button-secondary-borderColor-rest': 'rgba(199, 210, 254, 0.15)',
+    '--brand-button-secondary-borderColor-hover': 'rgba(199, 210, 254, 0.3)',
+    '--brand-button-secondary-borderColor-active': 'rgba(199, 210, 254, 0.3)',
+    '--brand-button-secondary-fgColor-rest': '#E0E7FF',
+    '--brand-button-secondary-fgColor-disabled': 'rgba(99, 102, 241, 0.5)',
+    // Applied styles
+    backgroundColor: spatialColors.black,
+    color: '#E0E7FF',
+};
+/**
+ * Spatial Brand Theme — combined light + dark overrides.
+ *
+ * Pass to `DatalayerBrandThemeProvider`'s `brandTheme` prop.
+ */
+export const spatialBrandTheme = {
+    light: spatialBrandLight,
+    dark: spatialBrandDark,
+};

package/lib/theme/useSystemColorMode.d.ts

@@ -0,0 +1,9 @@
+type ResolvedColorMode = 'light' | 'dark';
+/**
+ * React hook that tracks the operating system's preferred color scheme.
+ *
+ * Listens to `prefers-color-scheme` media query changes and returns
+ * either `'light'` or `'dark'`.
+ */
+export declare function useSystemColorMode(): ResolvedColorMode;
+export default useSystemColorMode;

package/lib/theme/useSystemColorMode.js

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useEffect, useState } from 'react';
+/**
+ * React hook that tracks the operating system's preferred color scheme.
+ *
+ * Listens to `prefers-color-scheme` media query changes and returns
+ * either `'light'` or `'dark'`.
+ */
+export function useSystemColorMode() {
+    const getMode = () => typeof window !== 'undefined' &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light';
+    const [mode, setMode] = useState(getMode);
+    useEffect(() => {
+        const media = window.matchMedia('(prefers-color-scheme: dark)');
+        const listener = (e) => setMode(e.matches ? 'dark' : 'light');
+        media.addEventListener('change', listener);
+        return () => media.removeEventListener('change', listener);
+    }, []);
+    return mode;
+}
+export default useSystemColorMode;

package/package.json

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