@datalayer/core 1.0.1 → 1.0.2

package/lib/theme/DatalayerTheme.js

@@ -1,228 +0,0 @@
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
-import { theme as primerTheme } from '@primer/react';
-import cloneDeep from 'lodash/cloneDeep.js';
-import merge from 'lodash/merge.js';
-/**
- * Datalayer Accessible Color System
- * Based on Datalayer's brand manual - WCAG AA/AAA compliant
- */
-export const datalayerColors = {
-    // Core Neutrals
-    black: '#000000', // Primary text - AAA on white
-    gray: '#59595C', // Secondary text - AA on white
-    white: '#FFFFFF', // Background
-    // Greens (Brand & Accessibility)
-    greenBrand: '#16A085', // Brand accent, icons, dividers, headings
-    greenAccent: '#1ABC9C', // Icons, charts, highlights on dark surfaces
-    greenText: '#117A65', // Accessible green for text & buttons (AA+ on white)
-    greenTint: '#E9F7F1', // Soft background for success / callouts
-    greenBright: '#2ECC71', // Highlights and glow on dark backgrounds
-    greenHover: '#0E6655', // Primary button hover
-};
-/**
- * Datalayer Theme for Primer React.
- *
- * Uses accessible color palette from Datalayer's brand manual.
- */
-const datalayerThemeDefs = {
-    colorSchemes: {
-        light: {
-            colors: {
-                // Canvas colors
-                canvas: {
-                    default: datalayerColors.white,
-                    // subtle: datalayerColors.greenTint,
-                },
-                // Foreground colors
-                fg: {
-                    default: datalayerColors.black,
-                    muted: datalayerColors.gray,
-                    onEmphasis: datalayerColors.white,
-                },
-                // Accent colors (brand green)
-                accent: {
-                    fg: datalayerColors.greenText,
-                    emphasis: datalayerColors.greenBrand,
-                    muted: datalayerColors.greenAccent,
-                    // subtle: datalayerColors.greenTint,
-                },
-                // Success colors (green)
-                success: {
-                    fg: datalayerColors.greenText,
-                    emphasis: datalayerColors.greenBrand,
-                    muted: datalayerColors.greenAccent,
-                    // subtle: datalayerColors.greenTint,
-                },
-                // Button colors
-                btn: {
-                    text: datalayerColors.black,
-                    bg: datalayerColors.white,
-                    border: datalayerColors.gray,
-                    hoverBg: datalayerColors.greenTint,
-                    hoverBorder: datalayerColors.gray,
-                    activeBg: datalayerColors.greenTint,
-                    activeBorder: datalayerColors.gray,
-                    selectedBg: datalayerColors.white,
-                    counterBg: datalayerColors.gray,
-                    primary: {
-                        text: datalayerColors.white,
-                        bg: datalayerColors.greenText,
-                        border: datalayerColors.greenText,
-                        hoverBg: datalayerColors.greenHover,
-                        hoverBorder: datalayerColors.greenHover,
-                        selectedBg: datalayerColors.greenHover,
-                        disabledText: 'rgba(255, 255, 255, 0.8)',
-                        disabledBg: '#94C9B9',
-                        disabledBorder: '#94C9B9',
-                        icon: datalayerColors.white,
-                        counterBg: 'rgba(0, 0, 0, 0.2)',
-                    },
-                    outline: {
-                        text: datalayerColors.greenText,
-                        hoverText: datalayerColors.white,
-                        hoverBg: datalayerColors.greenText,
-                        hoverBorder: datalayerColors.greenText,
-                        hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
-                        selectedText: datalayerColors.white,
-                        selectedBg: datalayerColors.greenHover,
-                        selectedBorder: datalayerColors.greenHover,
-                        disabledText: datalayerColors.gray,
-                        disabledBg: datalayerColors.greenTint,
-                        disabledCounterBg: 'rgba(0, 0, 0, 0.05)',
-                        counterBg: 'rgba(0, 0, 0, 0.05)',
-                        counterFg: datalayerColors.greenText,
-                        hoverCounterFg: datalayerColors.white,
-                        disabledCounterFg: datalayerColors.gray,
-                    },
-                    danger: {
-                        text: '#d32f2f',
-                        hoverText: datalayerColors.white,
-                        hoverBg: '#d32f2f',
-                        hoverBorder: '#d32f2f',
-                        hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
-                        selectedText: datalayerColors.white,
-                        selectedBg: '#b71c1c',
-                        selectedBorder: '#b71c1c',
-                        disabledText: 'rgba(211, 47, 47, 0.5)',
-                        disabledBg: datalayerColors.greenTint,
-                        disabledCounterBg: 'rgba(211, 47, 47, 0.05)',
-                        counterBg: 'rgba(211, 47, 47, 0.1)',
-                        counterFg: '#d32f2f',
-                        hoverCounterFg: datalayerColors.white,
-                        disabledCounterFg: 'rgba(211, 47, 47, 0.5)',
-                        icon: '#d32f2f',
-                    },
-                },
-            },
-            shadows: {},
-        },
-        dark: {
-            colors: {
-                // Canvas colors
-                canvas: {
-                    default: datalayerColors.black,
-                    subtle: '#0d1117',
-                },
-                // Foreground colors
-                fg: {
-                    default: datalayerColors.white,
-                    muted: '#8b949e',
-                    onEmphasis: datalayerColors.white,
-                },
-                // Accent colors (bright greens for dark mode)
-                accent: {
-                    fg: datalayerColors.greenAccent,
-                    emphasis: datalayerColors.greenBright,
-                    muted: datalayerColors.greenBrand,
-                    subtle: '#1f352d',
-                },
-                // Success colors
-                success: {
-                    fg: datalayerColors.greenAccent,
-                    emphasis: datalayerColors.greenBright,
-                    muted: datalayerColors.greenBrand,
-                    subtle: '#1f352d',
-                },
-                // Button colors for dark mode
-                btn: {
-                    text: '#c9d1d9',
-                    bg: '#21262d',
-                    border: 'rgba(240, 246, 252, 0.1)',
-                    hoverBg: '#30363d',
-                    hoverBorder: '#8b949e',
-                    activeBg: 'hsla(212, 12%, 18%, 1)',
-                    activeBorder: '#6e7681',
-                    selectedBg: '#161b22',
-                    counterBg: '#30363d',
-                    primary: {
-                        text: datalayerColors.white,
-                        bg: datalayerColors.greenAccent,
-                        border: 'rgba(240, 246, 252, 0.1)',
-                        hoverBg: datalayerColors.greenBright,
-                        hoverBorder: 'rgba(240, 246, 252, 0.1)',
-                        selectedBg: datalayerColors.greenBright,
-                        disabledText: 'rgba(255, 255, 255, 0.5)',
-                        disabledBg: 'rgba(22, 160, 133, 0.35)',
-                        disabledBorder: 'rgba(22, 160, 133, 0.2)',
-                        icon: datalayerColors.white,
-                        counterBg: 'rgba(0, 0, 0, 0.2)',
-                    },
-                    outline: {
-                        text: datalayerColors.greenAccent,
-                        hoverText: datalayerColors.white,
-                        hoverBg: datalayerColors.greenAccent,
-                        hoverBorder: datalayerColors.greenAccent,
-                        hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
-                        selectedText: datalayerColors.white,
-                        selectedBg: datalayerColors.greenBright,
-                        selectedBorder: datalayerColors.greenBright,
-                        disabledText: 'rgba(26, 188, 156, 0.5)',
-                        disabledBg: 'rgba(26, 188, 156, 0.1)',
-                        disabledCounterBg: 'rgba(26, 188, 156, 0.05)',
-                        counterBg: 'rgba(26, 188, 156, 0.1)',
-                        counterFg: datalayerColors.greenAccent,
-                        hoverCounterFg: datalayerColors.white,
-                        disabledCounterFg: 'rgba(26, 188, 156, 0.5)',
-                    },
-                    danger: {
-                        text: '#f85149',
-                        hoverText: datalayerColors.white,
-                        hoverBg: '#da3633',
-                        hoverBorder: '#f85149',
-                        hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
-                        selectedText: datalayerColors.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: datalayerColors.white,
-                        disabledCounterFg: 'rgba(248, 81, 73, 0.5)',
-                        icon: '#f85149',
-                    },
-                },
-            },
-            shadows: {},
-        },
-    },
-};
-const { colorSchemes: primerSchemes, ...primerOthers } = cloneDeep(primerTheme);
-const { colorSchemes: datalayerSchemes, ...datalayerOthers } = datalayerThemeDefs;
-// Merge with the light theme to ensure all variables are defined.
-export const datalayerTheme = merge(primerOthers, datalayerOthers, {
-    colorSchemes: { light: {}, dark: {} },
-});
-datalayerTheme.colorSchemes.light = {
-    colors: merge(primerSchemes.light.colors, datalayerSchemes.light.colors),
-    shadows: merge(primerSchemes.light.shadows, datalayerSchemes.light.shadows),
-};
-datalayerTheme.colorSchemes.dark = {
-    colors: merge(primerSchemes.dark.colors, datalayerSchemes.dark.colors),
-    shadows: merge(primerSchemes.dark.shadows, datalayerSchemes.dark.shadows),
-};
-export default datalayerTheme;

package/lib/theme/DatalayerThemeProvider.d.ts

@@ -1,29 +0,0 @@
-import { type CSSProperties } from 'react';
-import { ThemeProviderProps } from '@primer/react';
-export interface IDatalayerThemeProviderProps extends Omit<ThemeProviderProps, 'theme' | 'colorMode'> {
-    /**
-     * Color mode to use.
-     * - `'light'` / `'dark'` — explicit override
-     * - `'auto'` — follow the operating system preference (prefers-color-scheme)
-     * - Primer's `'day'` / `'night'` are still accepted.
-     */
-    colorMode?: 'light' | 'dark' | 'auto' | 'day' | 'night';
-    /**
-     * Additional base styles merged on top of theme defaults.
-     */
-    baseStyles?: CSSProperties;
-    /**
-     * Optional Primer theme object. Defaults to the built-in datalayerTheme.
-     */
-    theme?: Record<string, any>;
-    /**
-     * Optional per-mode style overrides (base + button CSS vars).
-     * When provided, these replace the built-in datalayer styles entirely.
-     * The `baseStyles` prop is still merged on top.
-     */
-    themeStyles?: {
-        light: CSSProperties;
-        dark: CSSProperties;
-    };
-}
-export declare function DatalayerThemeProvider(props: React.PropsWithChildren<IDatalayerThemeProviderProps>): JSX.Element;

package/lib/theme/DatalayerThemeProvider.js

@@ -1,54 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { BaseStyles, ThemeProvider } from '@primer/react';
-import { datalayerTheme, datalayerColors } from './DatalayerTheme';
-import { useSystemColorMode } from './useSystemColorMode';
-const baseStyleLight = {
-    backgroundColor: datalayerColors.white,
-    color: datalayerColors.black,
-    fontSize: 'var(--text-body-size-medium)',
-};
-const baseStyleDark = {
-    backgroundColor: datalayerColors.black,
-    color: datalayerColors.white,
-    fontSize: 'var(--text-body-size-medium)',
-};
-const primaryButtonVarsLight = {
-    '--button-primary-bgColor-rest': datalayerColors.greenText,
-    '--button-primary-bgColor-hover': datalayerColors.greenHover,
-    '--button-primary-bgColor-active': datalayerColors.greenHover,
-    '--button-primary-fgColor-rest': datalayerColors.white,
-    '--button-primary-borderColor-rest': datalayerColors.greenText,
-    '--button-primary-borderColor-hover': datalayerColors.greenHover,
-    '--color-btn-primary-bg': datalayerColors.greenText,
-    '--color-btn-primary-hover-bg': datalayerColors.greenHover,
-};
-const primaryButtonVarsDark = {
-    '--button-primary-bgColor-rest': datalayerColors.greenAccent,
-    '--button-primary-bgColor-hover': datalayerColors.greenBright,
-    '--button-primary-bgColor-active': datalayerColors.greenBright,
-    '--button-primary-fgColor-rest': datalayerColors.white,
-    '--button-primary-borderColor-rest': datalayerColors.greenAccent,
-    '--button-primary-borderColor-hover': datalayerColors.greenBright,
-    '--color-btn-primary-bg': datalayerColors.greenAccent,
-    '--color-btn-primary-hover-bg': datalayerColors.greenBright,
-};
-export function DatalayerThemeProvider(props) {
-    const { children, colorMode, baseStyles, theme, themeStyles, ...rest } = props;
-    // Resolve 'auto' → actual system preference ('light' or 'dark').
-    const systemMode = useSystemColorMode();
-    const resolvedColorMode = colorMode === 'auto' ? systemMode : (colorMode ?? 'light');
-    const isDark = resolvedColorMode === 'dark' || resolvedColorMode === 'night';
-    const resolvedTheme = theme ?? datalayerTheme;
-    const defaultStyles = isDark
-        ? { ...baseStyleDark, ...primaryButtonVarsDark }
-        : { ...baseStyleLight, ...primaryButtonVarsLight };
-    const resolvedStyles = themeStyles
-        ? isDark
-            ? themeStyles.dark
-            : themeStyles.light
-        : defaultStyles;
-    return (_jsx(ThemeProvider, { colorMode: resolvedColorMode, theme: resolvedTheme, ...rest, children: _jsx(BaseStyles, { style: {
-                ...resolvedStyles,
-                ...baseStyles,
-            }, children: children }) }));
-}

package/lib/theme/Palette.d.ts

@@ -1,4 +0,0 @@
-export declare const RESERVATION_CIRCLE_COLOR = "#656D76";
-export declare const CREDITS_CIRCLE_COLOR = "#16A085";
-export declare const JOINED_INVITE_COLOR = "#0366d6";
-export declare const PENDING_INVITE_COLOR = "#cfd3d7";

package/lib/theme/Palette.js

@@ -1,10 +0,0 @@
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
-// export const RESERVATION_CIRCLE_COLOR_VAR = '--data-yellow-color';
-export const RESERVATION_CIRCLE_COLOR = '#656D76';
-// export const CREDITS_CIRCLE_COLOR_VAR = '--data-blue-color';
-export const CREDITS_CIRCLE_COLOR = '#16A085';
-export const JOINED_INVITE_COLOR = '#0366d6';
-export const PENDING_INVITE_COLOR = '#cfd3d7';

package/lib/theme/index.d.ts

@@ -1,4 +0,0 @@
-export * from './DatalayerTheme';
-export * from './DatalayerThemeProvider';
-export * from './Palette';
-export * from './useSystemColorMode';

package/lib/theme/index.js

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

package/lib/theme/useSystemColorMode.d.ts

@@ -1,9 +0,0 @@
-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

@@ -1,26 +0,0 @@
-/*
- * 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;