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

UI components for WordPress.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _element = require("@wordpress/element");
var _styles = require("./styles");
var _colorAlgorithms = require("./color-algorithms");
var _utils = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal 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.
 *
 *
 * ```jsx
 * 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({
  accent,
  background,
  className,
  ...props
}) {
  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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Wrapper, {
    className: classes,
    ...props
  });
}
var _default = exports.default = Theme;
//# sourceMappingURL=index.js.map