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

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

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