@radix-ui/themes/dist/cjs/components/theme.js

[](https://radix-ui.com/themes)

"use strict";"use client";var O=Object.create;var A=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var F=(o,r)=>{for(var a in r)A(o,a,{get:r[a],enumerable:!0})},E=(o,r,a,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of W(r))!z.call(o,t)&&t!==a&&A(o,t,{get:()=>r[t],enumerable:!(s=V(r,t))||s.enumerable});return o};var I=(o,r,a)=>(a=o!=null?O(q(o)):{},E(r||!o||!o.__esModule?A(a,"default",{value:o,enumerable:!0}):a,o)),J=o=>E(A({},"__esModule",{value:!0}),o);var L={};F(L,{Theme:()=>S,ThemeContext:()=>u,useThemeContext:()=>j});module.exports=J(L);var e=I(require("react")),D=I(require("classnames")),K=I(require("@radix-ui/react-tooltip")),w=require("@radix-ui/react-direction"),N=require("@radix-ui/react-slot"),H=require("../helpers/get-matching-gray-color.js"),n=require("./theme.props.js");const d=()=>{},u=e.createContext(void 0);function j(){const o=e.useContext(u);if(o===void 0)throw new Error("`useThemeContext` must be used within a `Theme`");return o}const S=e.forwardRef((o,r)=>e.useContext(u)===void 0?e.createElement(K.Provider,{delayDuration:200},e.createElement(w.DirectionProvider,{dir:"ltr"},e.createElement(G,{...o,ref:r}))):e.createElement(R,{...o,ref:r}));S.displayName="Theme";const G=e.forwardRef((o,r)=>{const{appearance:a=n.themePropDefs.appearance.default,accentColor:s=n.themePropDefs.accentColor.default,grayColor:t=n.themePropDefs.grayColor.default,panelBackground:p=n.themePropDefs.panelBackground.default,radius:c=n.themePropDefs.radius.default,scaling:l=n.themePropDefs.scaling.default,hasBackground:m=n.themePropDefs.hasBackground.default,...h}=o,[g,i]=e.useState(a);e.useEffect(()=>i(a),[a]);const[y,C]=e.useState(s);e.useEffect(()=>C(s),[s]);const[v,f]=e.useState(t);e.useEffect(()=>f(t),[t]);const[k,P]=e.useState(p);e.useEffect(()=>P(p),[p]);const[B,x]=e.useState(c);e.useEffect(()=>x(c),[c]);const[T,b]=e.useState(l);return e.useEffect(()=>b(l),[l]),e.createElement(R,{...h,ref:r,isRoot:!0,hasBackground:m,appearance:g,accentColor:y,grayColor:v,panelBackground:k,radius:B,scaling:T,onAppearanceChange:i,onAccentColorChange:C,onGrayColorChange:f,onPanelBackgroundChange:P,onRadiusChange:x,onScalingChange:b})});G.displayName="ThemeRoot";const R=e.forwardRef((o,r)=>{const a=e.useContext(u),{asChild:s,isRoot:t,hasBackground:p,appearance:c=a?.appearance??n.themePropDefs.appearance.default,accentColor:l=a?.accentColor??n.themePropDefs.accentColor.default,grayColor:m=a?.resolvedGrayColor??n.themePropDefs.grayColor.default,panelBackground:h=a?.panelBackground??n.themePropDefs.panelBackground.default,radius:g=a?.radius??n.themePropDefs.radius.default,scaling:i=a?.scaling??n.themePropDefs.scaling.default,onAppearanceChange:y=d,onAccentColorChange:C=d,onGrayColorChange:v=d,onPanelBackgroundChange:f=d,onRadiusChange:k=d,onScalingChange:P=d,...B}=o,x=s?N.Slot:"div",T=m==="auto"?(0,H.getMatchingGrayColor)(l):m,b=o.appearance==="light"||o.appearance==="dark",M=p===void 0?t||b:p;return e.createElement(u.Provider,{value:e.useMemo(()=>({appearance:c,accentColor:l,grayColor:m,resolvedGrayColor:T,panelBackground:h,radius:g,scaling:i,onAppearanceChange:y,onAccentColorChange:C,onGrayColorChange:v,onPanelBackgroundChange:f,onRadiusChange:k,onScalingChange:P}),[c,l,m,T,h,g,i,y,C,v,f,k,P])},e.createElement(x,{"data-is-root-theme":t?"true":"false","data-accent-color":l,"data-gray-color":T,"data-has-background":M?"true":"false","data-panel-background":h,"data-radius":g,"data-scaling":i,ref:r,...B,className:(0,D.default)("radix-themes",{light:c==="light",dark:c==="dark"},B.className)}))});R.displayName="ThemeImpl";
//# sourceMappingURL=theme.js.map