import { type RefObject } from "react";
import { type CSSVariableName, type ReadonlyCSSVariableList } from "./types.js";
/**
 * @example Applying Variables the root html element
 * ```ts
 * import { purple500 } from "@react-md/core/theme/colors";
 * import { useCSSVariables } from "@react-md/core/theme/useCSSVariables";
 * import { contrastColor } from "@react-md/core/theme/utils";
 * import { useMemo } from "react";
 *
 * function Example(): null {
 *   // Note: You should use `useMemo` so that the custom variables are not
 *   // added and removed during each render.
 *   useCSSVariables(useMemo(() => {
 *     return [
 *       {
 *         name: "--rmd-primary-color",
 *         value: purple500,
 *       },
 *       {
 *         name: "--rmd-on-primary-color",
 *         value: contrastColor(purple500),
 *       },
 *     ];
 *   }, []));
 *
 *   return null;
 * }
 * ```
 *
 * @since 6.0.0
 */
export declare function useCSSVariables<Name extends CSSVariableName>(variables: ReadonlyCSSVariableList<Name>, rootNode?: RefObject<HTMLElement> | HTMLElement): void;
