@dnb/eufemia/es/shared/Theme.js

DNB Eufemia Design System UI Library

"use client";

import React from 'react';
import clsx from 'clsx';
import Context from "./Context.js";
import Provider from "./Provider.js";
import { extendPropsWithContext } from "./component-helper.js";
import withComponentMarkers from "./helpers/withComponentMarkers.js";
import useMediaQuery from "./useMediaQuery.js";
import { jsx as _jsx } from "react/jsx-runtime";
export default function Theme(themeProps) {
  const context = React.useContext(Context);
  const {
    children,
    element,
    name,
    variant,
    size,
    contrastMode,
    colorScheme,
    surface,
    ...restProps
  } = themeProps;
  const prefersDarkColorScheme = useMediaQuery({
    query: '(prefers-color-scheme: dark)',
    disabled: colorScheme !== 'auto'
  });
  const activeColorScheme = colorScheme === 'auto' ? prefersDarkColorScheme ? 'dark' : 'light' : colorScheme;
  const theme = extendPropsWithContext({
    name,
    variant,
    size,
    contrastMode,
    colorScheme: activeColorScheme,
    surface
  }, null, context?.theme);
  if (surface === 'initial') {
    theme.surface = undefined;
  }
  return _jsx(Provider, {
    theme: theme,
    children: _jsx(ThemeWrapper, {
      element: element,
      theme: theme,
      ...restProps,
      children: children
    })
  });
}
Theme.Context = ({
  element,
  ...themeProps
}) => {
  return _jsx(Theme, {
    ...themeProps,
    element: false
  });
};
withComponentMarkers(Theme.Context, {
  _supportsSpacingProps: 'children'
});
export function ThemeWrapper({
  children,
  theme,
  element = null,
  className = null,
  ...rest
}) {
  const Wrapper = element === false ? React.Fragment : element || 'div';
  const ref = React.useRef(null);
  if (Wrapper === React.Fragment) {
    return children;
  }
  rest['ref'] = ref;
  const classNames = getThemeClasses(theme, className);
  const {
    name,
    variant,
    size
  } = theme;
  return _jsx(Wrapper, {
    "data-name": name,
    "data-variant": variant,
    "data-size": size,
    className: classNames,
    ...rest,
    children: children
  });
}
export function getThemeClasses(theme, className = null) {
  if (!theme) {
    return className;
  }
  const {
    name,
    variant,
    size,
    contrastMode,
    colorScheme
  } = theme;
  return clsx(className, 'eufemia-theme', name && `eufemia-theme__${name}` + (variant ? ` eufemia-theme__${name}--${variant}` : ""), contrastMode && 'eufemia-theme__contrast-mode', colorScheme && `eufemia-theme__color-scheme--${colorScheme}`, size && `eufemia-theme__size--${size}`);
}
//# sourceMappingURL=Theme.js.map