@wordpress/components/build/theme/index.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _styles = require("./styles");

var _colorAlgorithms = require("./color-algorithms");

var _utils = require("../utils");

/**
 * WordPress dependencies
 */

/**
 * `Theme` allows defining theme variables for components in the `@wordpress/components` package.
 *
 * Multiple `Theme` components can be nested in order to override specific theme variables.
 *
 *
 * @example
 * ```jsx
 * import { __experimentalTheme as Theme } from '@wordpress/components';
 *
 * const Example = () => {
 *   return (
 *     <Theme accent="red">
 *       <Button variant="primary">I'm red</Button>
 *       <Theme accent="blue">
 *         <Button variant="primary">I'm blue</Button>
 *       </Theme>
 *     </Theme>
 *   );
 * };
 * ```
 */
function Theme(_ref) {
  let {
    accent,
    background,
    className,
    ...props
  } = _ref;
  const cx = (0, _utils.useCx)();
  const classes = (0, _element.useMemo)(() => cx(...(0, _styles.colorVariables)((0, _colorAlgorithms.generateThemeVariables)({
    accent,
    background
  })), className), [accent, background, className, cx]);
  return (0, _element.createElement)(_styles.Wrapper, (0, _extends2.default)({
    className: classes
  }, props));
}

var _default = Theme;
exports.default = _default;
//# sourceMappingURL=index.js.map