@shopify/polaris/dist/esm/components/ThemeProvider/ThemeProvider.js

Shopify’s product component library

import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
import React$1, { useContext, useMemo, useEffect } from 'react';
import DefaultThemeColors$1 from '@shopify/polaris-tokens/dist-modern/theme/base.json';
import { ThemeContext } from '../../utilities/theme/context.js';
import { buildCustomProperties, buildThemeContext } from '../../utilities/theme/utils.js';
import { Tokens } from '../../utilities/theme/tokens.js';
import { useFeatures } from '../../utilities/features/hooks.js';

function ThemeProvider({
  theme: themeConfig,
  children
}) {
  var {
    newDesignLanguage
  } = useFeatures();
  var parentContext = useContext(ThemeContext);
  var isParentThemeProvider = parentContext === undefined;
  var parentColorScheme = parentContext && parentContext.colorScheme && parentContext.colorScheme;
  var parentColors = parentContext && parentContext.colors && parentContext.colors;

  var {
    colors,
    colorScheme
  } = themeConfig,
      rest = _objectWithoutProperties(themeConfig, ["colors", "colorScheme"]);

  var processedThemeConfig = _objectSpread2(_objectSpread2(_objectSpread2({}, rest), {
    colorScheme: getColorScheme(colorScheme, parentColorScheme)
  }), {}, {
    colors: _objectSpread2(_objectSpread2(_objectSpread2({}, isParentThemeProvider && DefaultThemeColors$1), parentColors != null && parentColors), colors)
  });

  var customProperties = useMemo(() => buildCustomProperties(processedThemeConfig, newDesignLanguage, Tokens), [processedThemeConfig, newDesignLanguage]);
  var theme = useMemo(() => buildThemeContext(processedThemeConfig, newDesignLanguage ? customProperties : undefined), [customProperties, processedThemeConfig, newDesignLanguage]); // We want these values to be empty string instead of `undefined` when not set.
  // Otherwise, setting a style property to `undefined` does not remove it from the DOM.

  var backgroundColor = customProperties['--p-background'] || '';
  var color = customProperties['--p-text'] || '';
  useEffect(() => {
    if (isParentThemeProvider) {
      document.body.style.backgroundColor = backgroundColor;
      document.body.style.color = color;
    }
  }, [backgroundColor, color, isParentThemeProvider]);

  var style = _objectSpread2(_objectSpread2({}, customProperties), !isParentThemeProvider && {
    color
  });

  return /*#__PURE__*/React$1.createElement(ThemeContext.Provider, {
    value: _objectSpread2(_objectSpread2({}, theme), {}, {
      textColor: color
    })
  }, /*#__PURE__*/React$1.createElement("div", {
    style: style
  }, children));
}

function isInverseColorScheme(colorScheme) {
  return colorScheme === 'inverse';
}

function getColorScheme(colorScheme, parentColorScheme) {
  if (colorScheme == null) {
    return parentColorScheme || 'light';
  } else if (isInverseColorScheme(colorScheme)) {
    return parentColorScheme === 'dark' || parentColorScheme === undefined ? 'light' : 'dark';
  } else {
    return colorScheme;
  }
}

export { ThemeProvider };