@chakra-ui/system
Version:
Chakra UI system primitives
1 lines • 4.25 kB
Source Map (JSON)
{"version":3,"sources":["../src/providers.tsx"],"sourcesContent":["import { useColorMode } from \"@chakra-ui/color-mode\"\nimport { createContext, CreateContextReturn } from \"@chakra-ui/react-utils\"\nimport { css, toCSSVar, SystemStyleObject } from \"@chakra-ui/styled-system\"\nimport { memoizedGet as get, runIfFn } from \"@chakra-ui/utils\"\nimport {\n Global,\n Interpolation,\n ThemeProvider as EmotionThemeProvider,\n ThemeProviderProps as EmotionThemeProviderProps,\n} from \"@emotion/react\"\nimport { useMemo } from \"react\"\n\nexport interface ThemeProviderProps extends EmotionThemeProviderProps {\n cssVarsRoot?: string\n}\n\nexport function ThemeProvider(props: ThemeProviderProps): JSX.Element {\n const { cssVarsRoot, theme, children } = props\n const computedTheme = useMemo(() => toCSSVar(theme), [theme])\n return (\n <EmotionThemeProvider theme={computedTheme}>\n <CSSVars root={cssVarsRoot} />\n {children}\n </EmotionThemeProvider>\n )\n}\n\nexport interface CSSVarsProps {\n /**\n * The element to attach the CSS custom properties to.\n * @default \":host, :root\"\n */\n root?: string\n}\n\nexport function CSSVars({ root = \":host, :root\" }: CSSVarsProps): JSX.Element {\n /**\n * Append color mode selector to allow semantic tokens to change according to the color mode\n */\n const selector = [root, `[data-theme]`].join(\",\")\n return <Global styles={(theme: any) => ({ [selector]: theme.__cssVars })} />\n}\n\n/**\n * @deprecated - Prefer to use `createStylesContext` to provide better error messages\n *\n * @example\n *\n * ```jsx\n * import { createStylesContext } from \"@chakra-ui/react\"\n *\n * const [StylesProvider, useStyles] = createStylesContext(\"Component\")\n * ```\n */\nconst [StylesProvider, useStyles] = createContext<\n Record<string, SystemStyleObject>\n>({\n name: \"StylesContext\",\n errorMessage:\n \"useStyles: `styles` is undefined. Seems you forgot to wrap the components in `<StylesProvider />` \",\n})\n\nexport { StylesProvider, useStyles }\n\n/**\n * Helper function that creates context with a standardized errorMessage related to the component\n * @param componentName\n * @returns [StylesProvider, useStyles]\n */\nexport function createStylesContext(\n componentName: string,\n): CreateStyleContextReturn {\n return createContext<Record<string, SystemStyleObject>>({\n name: `${componentName}StylesContext`,\n errorMessage: `useStyles: \"styles\" is undefined. Seems you forgot to wrap the components in \"<${componentName} />\" `,\n })\n}\n\nexport type CreateStyleContextReturn = CreateContextReturn<\n Record<string, SystemStyleObject>\n>\n\n/**\n * Applies styles defined in `theme.styles.global` globally\n * using emotion's `Global` component\n */\nexport function GlobalStyle(): JSX.Element {\n const { colorMode } = useColorMode()\n return (\n <Global\n styles={(theme: any) => {\n const styleObjectOrFn = get(theme, \"styles.global\")\n const globalStyles = runIfFn(styleObjectOrFn, { theme, colorMode })\n if (!globalStyles) return undefined\n const styles = css(globalStyles)(theme)\n return styles as Interpolation<{}>\n }}\n />\n )\n}\n"],"mappings":";;;AAAA,SAAS,oBAAoB;AAC7B,SAAS,qBAA0C;AACnD,SAAS,KAAK,gBAAmC;AACjD,SAAS,eAAe,KAAK,eAAe;AAC5C;AAAA,EACE;AAAA,EAEA,iBAAiB;AAAA,OAEZ;AACP,SAAS,eAAe;AAUpB,SACE,KADF;AAJG,SAAS,cAAc,OAAwC;AACpE,QAAM,EAAE,aAAa,OAAO,SAAS,IAAI;AACzC,QAAM,gBAAgB,QAAQ,MAAM,SAAS,KAAK,GAAG,CAAC,KAAK,CAAC;AAC5D,SACE,qBAAC,wBAAqB,OAAO,eAC3B;AAAA,wBAAC,WAAQ,MAAM,aAAa;AAAA,IAC3B;AAAA,KACH;AAEJ;AAUO,SAAS,QAAQ,EAAE,OAAO,eAAe,GAA8B;AAI5E,QAAM,WAAW,CAAC,MAAM,cAAc,EAAE,KAAK,GAAG;AAChD,SAAO,oBAAC,UAAO,QAAQ,CAAC,WAAgB,EAAE,CAAC,QAAQ,GAAG,MAAM,UAAU,IAAI;AAC5E;AAaA,IAAM,CAAC,gBAAgB,SAAS,IAAI,cAElC;AAAA,EACA,MAAM;AAAA,EACN,cACE;AACJ,CAAC;AASM,SAAS,oBACd,eAC0B;AAC1B,SAAO,cAAiD;AAAA,IACtD,MAAM,GAAG,aAAa;AAAA,IACtB,cAAc,kFAAkF,aAAa;AAAA,EAC/G,CAAC;AACH;AAUO,SAAS,cAA2B;AACzC,QAAM,EAAE,UAAU,IAAI,aAAa;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,CAAC,UAAe;AACtB,cAAM,kBAAkB,IAAI,OAAO,eAAe;AAClD,cAAM,eAAe,QAAQ,iBAAiB,EAAE,OAAO,UAAU,CAAC;AAClE,YAAI,CAAC;AAAc,iBAAO;AAC1B,cAAM,SAAS,IAAI,YAAY,EAAE,KAAK;AACtC,eAAO;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;","names":[]}