From 872c0ccf56d927d49af02a8a4d6bb6811774eff7 Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Wed, 24 Aug 2022 20:21:34 +0400 Subject: [PATCH] refactor: component theming system (#6221) * refactor: theming system and helpers * chore: update pkgs * docs: update changesets * chore: update changesets * chore: fix typo * chore: updates * chore: fix error * chore: update changeset * chore: update lockfile * refactor: batch 1 * refactor: anatomy * refactor: anatomy * refactor: anatomy * fix: errors * fix: errors * fix: patch default props for now * chore: update mdx extension * chore: update * chore: update package json --- .changeset/plenty-kangaroos-divide.md | 5 + .changeset/silver-pillows-jump.md | 5 + .changeset/thin-radios-wink.md | 6 + .changeset/tricky-lies-act.md | 50 ++++ .vscode/extensions.json | 2 +- packages/react/tests/extend-theme.test.tsx | 2 +- packages/styled-system/src/component.types.ts | 77 ------ packages/styled-system/src/define-styles.ts | 118 +++++++++ packages/styled-system/src/index.ts | 3 +- packages/styled-system/src/theming-props.ts | 23 ++ packages/theme-tools/package.json | 4 +- packages/theme-tools/src/color.ts | 5 +- packages/theme-tools/src/component.ts | 23 +- .../theme-tools/src/create-breakpoints.ts | 2 +- packages/theme-tools/src/css-calc.ts | 2 +- packages/theme-tools/src/index.ts | 2 +- packages/theme/package.json | 4 +- packages/theme/src/components/accordion.ts | 34 +-- packages/theme/src/components/alert.ts | 45 ++-- packages/theme/src/components/avatar.ts | 54 ++-- packages/theme/src/components/badge.ts | 35 ++- packages/theme/src/components/breadcrumb.ts | 22 +- packages/theme/src/components/button.ts | 66 +++-- packages/theme/src/components/checkbox.ts | 63 +++-- packages/theme/src/components/close-button.ts | 35 ++- packages/theme/src/components/code.ts | 14 +- packages/theme/src/components/container.ts | 10 +- packages/theme/src/components/divider.ts | 26 +- packages/theme/src/components/drawer.ts | 69 +++-- packages/theme/src/components/editable.ts | 30 ++- packages/theme/src/components/form-control.ts | 31 ++- packages/theme/src/components/form-error.ts | 31 ++- packages/theme/src/components/form-label.ts | 10 +- packages/theme/src/components/heading.ts | 55 ++-- packages/theme/src/components/index.ts | 242 +++++++++--------- packages/theme/src/components/input.ts | 84 +++--- packages/theme/src/components/kbd.ts | 10 +- packages/theme/src/components/link.ts | 10 +- packages/theme/src/components/list.ts | 22 +- packages/theme/src/components/menu.ts | 48 ++-- packages/theme/src/components/modal.ts | 71 +++-- packages/theme/src/components/number-input.ts | 57 +++-- packages/theme/src/components/pin-input.ts | 56 ++-- packages/theme/src/components/popover.ts | 44 ++-- packages/theme/src/components/progress.ts | 63 +++-- packages/theme/src/components/radio.ts | 58 ++--- packages/theme/src/components/select.ts | 83 +++--- packages/theme/src/components/skeleton.ts | 16 +- packages/theme/src/components/skip-link.ts | 10 +- packages/theme/src/components/slider.ts | 99 ++++--- packages/theme/src/components/spinner.ts | 40 ++- packages/theme/src/components/stat.ts | 48 ++-- packages/theme/src/components/switch.ts | 54 ++-- packages/theme/src/components/table.ts | 61 +++-- packages/theme/src/components/tabs.ts | 87 +++---- packages/theme/src/components/tag.ts | 77 +++--- packages/theme/src/components/textarea.ts | 53 ++-- packages/theme/src/components/tooltip.ts | 12 +- packages/theme/src/foundations/breakpoints.ts | 3 - packages/theme/src/index.ts | 2 +- packages/theme/src/theme.types.ts | 6 +- .../{utils.ts => utils/is-chakra-theme.ts} | 4 +- packages/theme/src/utils/run-if-fn.ts | 9 + pnpm-lock.yaml | 16 +- .../storybook-addon/src/feature/arg-types.ts | 6 +- utilities/react-children-utils/README.md | 2 +- utilities/shared-utils/README.md | 2 +- 67 files changed, 1286 insertions(+), 1132 deletions(-) create mode 100644 .changeset/plenty-kangaroos-divide.md create mode 100644 .changeset/silver-pillows-jump.md create mode 100644 .changeset/thin-radios-wink.md create mode 100644 .changeset/tricky-lies-act.md delete mode 100644 packages/styled-system/src/component.types.ts create mode 100644 packages/styled-system/src/define-styles.ts create mode 100644 packages/styled-system/src/theming-props.ts rename packages/theme/src/{utils.ts => utils/is-chakra-theme.ts} (84%) create mode 100644 packages/theme/src/utils/run-if-fn.ts diff --git a/.changeset/plenty-kangaroos-divide.md b/.changeset/plenty-kangaroos-divide.md new file mode 100644 index 00000000000..efdfeb7b21b --- /dev/null +++ b/.changeset/plenty-kangaroos-divide.md @@ -0,0 +1,5 @@ +--- +"@chakra-ui/anatomy": patch +--- + +Update package to use styled-system as dependency diff --git a/.changeset/silver-pillows-jump.md b/.changeset/silver-pillows-jump.md new file mode 100644 index 00000000000..1361da733e8 --- /dev/null +++ b/.changeset/silver-pillows-jump.md @@ -0,0 +1,5 @@ +--- +"@chakra-ui/theme-tools": patch +--- + +Refactored code to use from `styled-system` package diff --git a/.changeset/thin-radios-wink.md b/.changeset/thin-radios-wink.md new file mode 100644 index 00000000000..d66b65d5d32 --- /dev/null +++ b/.changeset/thin-radios-wink.md @@ -0,0 +1,6 @@ +--- +"@chakra-ui/skeleton": patch +"@chakra-ui/theme": patch +--- + +Refactor to use the new helpers from `styled-system` package diff --git a/.changeset/tricky-lies-act.md b/.changeset/tricky-lies-act.md new file mode 100644 index 00000000000..bbbe106809a --- /dev/null +++ b/.changeset/tricky-lies-act.md @@ -0,0 +1,50 @@ +--- +"@chakra-ui/styled-system": minor +--- + +Add `defineStyle` and `defineStyleConfig` to improve the TypeScript authoring +experience of style objects and single part component themes. + +```jsx live=false +import { defineStyleConfig, defineStyle } from "@chakra-ui/styled-system" + +// authoring style objects +const style = defineStyle({ + marginTop: "20px", +}) + +// authoring style configs for single part component +const button = defineStyleConfig({ + baseStyle: {}, + variants: {}, + defaultProps: {}, +}) +``` + +Add `createMultiStyleConfigHelpers` factory that provides functions that help +improve the TypeScript authoring experience of multipart component themes. + +```jsx live=false +import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-sytem" + +// create scoped helpers for that defined parts +const helpers = createMultiStyleConfigHelpers(["button", "label"]) +const { definePartsStyle, defineMultiStyleConfig } = helpers + +// authoring styles for each part +const outlineVariant = definePartsStyle({ + button: {}, + label: {}, +}) + +// authoring styles for multipart component +const accordion = defineMultiStyleConfig({ + baseStyle: { + button: {}, + label: {}, + }, + variants: { + outline: outlineVariant, + }, +}) +``` diff --git a/.vscode/extensions.json b/.vscode/extensions.json index ce60c02cedb..96ac66f71c6 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -6,6 +6,6 @@ "eamodio.gitlens", "pflannery.vscode-versionlens", "esbenp.prettier-vscode", - "silvenon.mdx" + "unifiedjs.vscode-mdx" ] } diff --git a/packages/react/tests/extend-theme.test.tsx b/packages/react/tests/extend-theme.test.tsx index 696e382d457..b821c9ff142 100644 --- a/packages/react/tests/extend-theme.test.tsx +++ b/packages/react/tests/extend-theme.test.tsx @@ -264,7 +264,7 @@ describe("extendTheme", () => { } const customTheme = extendTheme(override) - // @ts-expect-error + // @ts-ignore delete Array.prototype["customFunction"] expect((customTheme.breakpoints as any).customFunction).toBeUndefined() diff --git a/packages/styled-system/src/component.types.ts b/packages/styled-system/src/component.types.ts deleted file mode 100644 index b3def08909f..00000000000 --- a/packages/styled-system/src/component.types.ts +++ /dev/null @@ -1,77 +0,0 @@ -import { omit } from "@chakra-ui/object-utils" -import { SystemStyleObject } from "./system.types" -import { ThemeTypings } from "./theme.types" -import { ResponsiveValue } from "./utils" - -/* ----------------------------------------------------------------------------- - * Style Functions used in the theme - - Single part components: use SystemStyleObject or SystemStyleFunction - - Multi part components: use PartsStyleObject or PartsStyleFunction - * -----------------------------------------------------------------------------*/ - -export interface StyleConfig { - baseStyle?: SystemStyleObject | SystemStyleFunction - sizes?: { [size: string]: SystemStyleObject | SystemStyleFunction } - variants?: { [variant: string]: SystemStyleObject | SystemStyleFunction } - defaultProps?: { - size?: string - variant?: string - colorScheme?: string - } -} - -export interface MultiStyleConfig { - baseStyle?: PartsStyleObject | PartsStyleFunction - sizes?: { [size: string]: PartsStyleObject | PartsStyleFunction } - variants?: { [variant: string]: PartsStyleObject | PartsStyleFunction } - defaultProps?: StyleConfig["defaultProps"] -} - -export type StyleFunctionProps = { - colorScheme: string - colorMode: "light" | "dark" - orientation?: "horizontal" | "vertical" - theme: Record - [key: string]: any -} - -export type SystemStyleFunction = ( - props: StyleFunctionProps, -) => SystemStyleObject - -export type SystemStyleInterpolation = SystemStyleObject | SystemStyleFunction - -// minimal representation of the anatomy object -type Anatomy = { __type: string } - -export type PartsStyleObject = Partial< - Record -> - -export type PartsStyleFunction = ( - props: StyleFunctionProps, -) => PartsStyleObject - -export type PartsStyleInterpolation = - | PartsStyleObject - | PartsStyleFunction - -export interface ThemingProps { - variant?: ResponsiveValue< - ThemeComponent extends keyof ThemeTypings["components"] - ? ThemeTypings["components"][ThemeComponent]["variants"] - : string - > - size?: ResponsiveValue< - ThemeComponent extends keyof ThemeTypings["components"] - ? ThemeTypings["components"][ThemeComponent]["sizes"] - : string - > - colorScheme?: ThemeTypings["colorSchemes"] - orientation?: "vertical" | "horizontal" - styleConfig?: Record -} - -export function omitThemingProps(props: T) { - return omit(props, ["styleConfig", "size", "variant", "colorScheme"]) -} diff --git a/packages/styled-system/src/define-styles.ts b/packages/styled-system/src/define-styles.ts new file mode 100644 index 00000000000..f348ef0dd20 --- /dev/null +++ b/packages/styled-system/src/define-styles.ts @@ -0,0 +1,118 @@ +import { SystemStyleObject } from "./system.types" + +type Dict = { [key: string]: T } + +// ------------------------------------------------------------------ // + +export type StyleFunctionProps = { + colorScheme: string + colorMode: "light" | "dark" + orientation?: "horizontal" | "vertical" + theme: Dict + [key: string]: any +} + +export type SystemStyleFunction = ( + props: StyleFunctionProps, +) => SystemStyleObject + +export type SystemStyleInterpolation = SystemStyleObject | SystemStyleFunction + +// ------------------------------------------------------------------ // + +export function defineStyle(styles: T) { + return styles +} + +// ------------------------------------------------------------------ // + +type DefaultProps = { + size?: string + variant?: string + colorScheme?: string +} + +export type StyleConfig = { + baseStyle?: SystemStyleInterpolation + sizes?: { [size: string]: SystemStyleInterpolation } + variants?: { [variant: string]: SystemStyleInterpolation } + defaultProps?: DefaultProps +} + +/** + * Defines the style config for a single-part component. + */ +export function defineStyleConfig< + BaseStyle extends SystemStyleInterpolation, + Sizes extends Dict, + Variants extends Dict, +>(config: { + baseStyle?: BaseStyle + sizes?: Sizes + variants?: Variants + defaultProps?: { + size?: keyof Sizes + variant?: keyof Variants + colorScheme?: string + } +}) { + return config +} + +// ------------------------------------------------------------------ // + +type Anatomy = { keys: string[] } + +export type PartsStyleObject = Partial< + Record +> + +export type PartsStyleFunction = ( + props: StyleFunctionProps, +) => PartsStyleObject + +export type PartsStyleInterpolation = + | PartsStyleObject + | PartsStyleFunction + +export interface MultiStyleConfig { + parts: Parts["keys"] + baseStyle?: PartsStyleInterpolation + sizes?: { [size: string]: PartsStyleInterpolation } + variants?: { [variant: string]: PartsStyleInterpolation } + defaultProps?: DefaultProps +} + +// ------------------------------------------------------------------ // + +/** + * Returns an object of helpers that can be used to define + * the style configuration for a multi-part component. + */ +export function createMultiStyleConfigHelpers( + parts: Part[] | Readonly, +) { + return { + definePartsStyle< + PartStyles extends PartsStyleInterpolation<{ keys: Part[] }>, + >(config: PartStyles) { + return config + }, + defineMultiStyleConfig< + BaseStyle extends PartsStyleInterpolation<{ keys: Part[] }>, + Sizes extends Dict>, + Variants extends Dict>, + >(config: { + baseStyle?: BaseStyle + sizes?: Sizes + variants?: Variants + defaultProps?: { + size?: keyof Sizes + variant?: keyof Variants + colorScheme?: string + } + }) { + return { parts: parts as Part[], ...config } + }, + } +} diff --git a/packages/styled-system/src/index.ts b/packages/styled-system/src/index.ts index cb605ac64ed..b4f509c82af 100644 --- a/packages/styled-system/src/index.ts +++ b/packages/styled-system/src/index.ts @@ -1,6 +1,7 @@ export * from "./config" export * from "./create-theme-vars" export * from "./css" +export * from "./define-styles" export * from "./pseudos" export * from "./style-config" export * from "./system" @@ -15,5 +16,5 @@ export type { } from "./utils" export { tokenToCSSVar } from "./utils/create-transform" export type OmitSpaceXY = Omit -export * from "./component.types" export { getCSSVar } from "./get-css-var" +export * from "./theming-props" diff --git a/packages/styled-system/src/theming-props.ts b/packages/styled-system/src/theming-props.ts new file mode 100644 index 00000000000..018c318a927 --- /dev/null +++ b/packages/styled-system/src/theming-props.ts @@ -0,0 +1,23 @@ +import { omit } from "@chakra-ui/object-utils" +import { ThemeTypings } from "./theme.types" +import { ResponsiveValue } from "./utils" + +export interface ThemingProps { + variant?: ResponsiveValue< + ThemeComponent extends keyof ThemeTypings["components"] + ? ThemeTypings["components"][ThemeComponent]["variants"] + : string + > + size?: ResponsiveValue< + ThemeComponent extends keyof ThemeTypings["components"] + ? ThemeTypings["components"][ThemeComponent]["sizes"] + : string + > + colorScheme?: ThemeTypings["colorSchemes"] + orientation?: "vertical" | "horizontal" + styleConfig?: Record +} + +export function omitThemingProps(props: T) { + return omit(props, ["styleConfig", "size", "variant", "colorScheme"]) +} diff --git a/packages/theme-tools/package.json b/packages/theme-tools/package.json index 75aed4e6d97..d18a4b21ca6 100644 --- a/packages/theme-tools/package.json +++ b/packages/theme-tools/package.json @@ -31,13 +31,15 @@ }, "dependencies": { "@chakra-ui/anatomy": "workspace:*", - "@chakra-ui/utils": "workspace:*", "@ctrl/tinycolor": "^3.4.0" }, "peerDependencies": { "@chakra-ui/styled-system": ">=2.0.0" }, "devDependencies": { + "dlv": "^1.1.3", + "@types/dlv": "^1.1.2", + "@chakra-ui/shared-utils": "workspace:*", "@chakra-ui/styled-system": "workspace:*" }, "scripts": { diff --git a/packages/theme-tools/src/color.ts b/packages/theme-tools/src/color.ts index 339874d33ea..cbe7d42772b 100644 --- a/packages/theme-tools/src/color.ts +++ b/packages/theme-tools/src/color.ts @@ -5,7 +5,10 @@ import { random, WCAG2Parms, } from "@ctrl/tinycolor" -import { memoizedGet as get, Dict, isEmptyObject } from "@chakra-ui/utils" +import get from "dlv" + +type Dict = { [key: string]: any } +const isEmptyObject = (obj: any) => Object.keys(obj).length === 0 /** * Get the color raw value from theme diff --git a/packages/theme-tools/src/component.ts b/packages/theme-tools/src/component.ts index b82c733c4e1..46aa6af4181 100644 --- a/packages/theme-tools/src/component.ts +++ b/packages/theme-tools/src/component.ts @@ -1,9 +1,20 @@ -import { +import type { + SystemStyleObject, StyleFunctionProps, SystemStyleInterpolation, +} from "@chakra-ui/styled-system" + +export type { + StyleConfig, + MultiStyleConfig, SystemStyleObject, + // StyleFunctionProps, + SystemStyleFunction, + SystemStyleInterpolation, + PartsStyleObject, + PartsStyleFunction, + PartsStyleInterpolation, } from "@chakra-ui/styled-system" -import { Dict } from "@chakra-ui/utils" /* ----------------------------------------------------------------------------- * Global Style object definitions @@ -22,14 +33,14 @@ export type JSXElementStyles = { export type Styles = GlobalStyles & JSXElementStyles export function mode(light: T, dark: T) { - return (props: Dict | StyleFunctionProps) => + return (props: Record | StyleFunctionProps) => props.colorMode === "dark" ? dark : light } -export function orient(options: { +export function orient(options: { orientation?: "vertical" | "horizontal" - vertical: SystemStyleObject - horizontal: SystemStyleObject + vertical: T + horizontal: T }) { const { orientation, vertical, horizontal } = options if (!orientation) return {} diff --git a/packages/theme-tools/src/create-breakpoints.ts b/packages/theme-tools/src/create-breakpoints.ts index aba1c676860..d69791ce4f0 100644 --- a/packages/theme-tools/src/create-breakpoints.ts +++ b/packages/theme-tools/src/create-breakpoints.ts @@ -1,4 +1,4 @@ -import { warn } from "@chakra-ui/utils" +import { warn } from "@chakra-ui/shared-utils" export interface BaseBreakpointConfig { sm: string diff --git a/packages/theme-tools/src/css-calc.ts b/packages/theme-tools/src/css-calc.ts index c6575b18fe9..024293dadde 100644 --- a/packages/theme-tools/src/css-calc.ts +++ b/packages/theme-tools/src/css-calc.ts @@ -1,4 +1,4 @@ -import { isObject } from "@chakra-ui/utils" +import { isObject } from "@chakra-ui/shared-utils" import { CSSVar } from "./css-var" export type Operand = string | number | CSSVar diff --git a/packages/theme-tools/src/index.ts b/packages/theme-tools/src/index.ts index a8eaf985453..9dc7fa6f751 100644 --- a/packages/theme-tools/src/index.ts +++ b/packages/theme-tools/src/index.ts @@ -1,6 +1,6 @@ +export { anatomy } from "@chakra-ui/anatomy" export * from "./color" export * from "./component" export * from "./create-breakpoints" -export { anatomy } from "@chakra-ui/anatomy" export * from "./css-calc" export * from "./css-var" diff --git a/packages/theme/package.json b/packages/theme/package.json index 40f367f8906..ce7d6d95512 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -64,13 +64,13 @@ }, "dependencies": { "@chakra-ui/anatomy": "workspace:*", - "@chakra-ui/theme-tools": "workspace:*", - "@chakra-ui/utils": "workspace:*" + "@chakra-ui/theme-tools": "workspace:*" }, "peerDependencies": { "@chakra-ui/styled-system": ">=2.0.0" }, "devDependencies": { + "@chakra-ui/shared-utils": "workspace:*", "@chakra-ui/cli": "workspace:*", "@chakra-ui/styled-system": "workspace:*" }, diff --git a/packages/theme/src/components/accordion.ts b/packages/theme/src/components/accordion.ts index e6522820da8..27a6497fd86 100644 --- a/packages/theme/src/components/accordion.ts +++ b/packages/theme/src/components/accordion.ts @@ -1,18 +1,21 @@ import { accordionAnatomy as parts } from "@chakra-ui/anatomy" -import type { - PartsStyleObject, - SystemStyleObject, +import { + createMultiStyleConfigHelpers, + defineStyle, } from "@chakra-ui/styled-system" -const baseStyleContainer: SystemStyleObject = { +const { definePartsStyle, defineMultiStyleConfig } = + createMultiStyleConfigHelpers(parts.keys) + +const baseStyleContainer = defineStyle({ borderTopWidth: "1px", borderColor: "inherit", _last: { borderBottomWidth: "1px", }, -} +}) -const baseStyleButton: SystemStyleObject = { +const baseStyleButton = defineStyle({ transitionProperty: "common", transitionDuration: "normal", fontSize: "1rem", @@ -28,27 +31,24 @@ const baseStyleButton: SystemStyleObject = { }, px: 4, py: 2, -} +}) -const baseStylePanel: SystemStyleObject = { +const baseStylePanel = defineStyle({ pt: 2, px: 4, pb: 5, -} +}) -const baseStyleIcon: SystemStyleObject = { +const baseStyleIcon = defineStyle({ fontSize: "1.25em", -} +}) -const baseStyle: PartsStyleObject = { +const baseStyle = definePartsStyle({ root: {}, container: baseStyleContainer, button: baseStyleButton, panel: baseStylePanel, icon: baseStyleIcon, -} +}) -export default { - parts: parts.keys, - baseStyle, -} +export const accordionTheme = defineMultiStyleConfig({ baseStyle }) diff --git a/packages/theme/src/components/alert.ts b/packages/theme/src/components/alert.ts index 466de9b96c3..2c7cb575392 100644 --- a/packages/theme/src/components/alert.ts +++ b/packages/theme/src/components/alert.ts @@ -1,12 +1,12 @@ import { alertAnatomy as parts } from "@chakra-ui/anatomy" +import type { StyleFunctionProps } from "@chakra-ui/styled-system" +import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system" import { getColor, mode, transparentize } from "@chakra-ui/theme-tools" -import type { - PartsStyleObject, - PartsStyleFunction, - StyleFunctionProps, -} from "@chakra-ui/styled-system" -const baseStyle: PartsStyleObject = { +const { definePartsStyle, defineMultiStyleConfig } = + createMultiStyleConfigHelpers(parts.keys) + +const baseStyle = definePartsStyle({ container: { px: 4, py: 3, @@ -31,7 +31,7 @@ const baseStyle: PartsStyleObject = { w: 5, h: 5, }, -} +}) function getBg(props: StyleFunctionProps): string { const { theme, colorScheme: c } = props @@ -40,7 +40,7 @@ function getBg(props: StyleFunctionProps): string { return mode(lightBg, darkBg)(props) } -const variantSubtle: PartsStyleFunction = (props) => { +const variantSubtle = definePartsStyle((props) => { const { colorScheme: c } = props return { container: { bg: getBg(props) }, @@ -49,9 +49,9 @@ const variantSubtle: PartsStyleFunction = (props) => { color: mode(`${c}.500`, `${c}.200`)(props), }, } -} +}) -const variantLeftAccent: PartsStyleFunction = (props) => { +const variantLeftAccent = definePartsStyle((props) => { const { colorScheme: c } = props return { container: { @@ -67,9 +67,9 @@ const variantLeftAccent: PartsStyleFunction = (props) => { color: mode(`${c}.500`, `${c}.200`)(props), }, } -} +}) -const variantTopAccent: PartsStyleFunction = (props) => { +const variantTopAccent = definePartsStyle((props) => { const { colorScheme: c } = props return { container: { @@ -85,9 +85,9 @@ const variantTopAccent: PartsStyleFunction = (props) => { color: mode(`${c}.500`, `${c}.200`)(props), }, } -} +}) -const variantSolid: PartsStyleFunction = (props) => { +const variantSolid = definePartsStyle((props) => { const { colorScheme: c } = props return { container: { @@ -95,7 +95,7 @@ const variantSolid: PartsStyleFunction = (props) => { color: mode(`white`, `gray.900`)(props), }, } -} +}) const variants = { subtle: variantSubtle, @@ -104,14 +104,11 @@ const variants = { solid: variantSolid, } -const defaultProps = { - variant: "subtle", - colorScheme: "blue", -} - -export default { - parts: parts.keys, +export const alertTheme = defineMultiStyleConfig({ baseStyle, variants, - defaultProps, -} + defaultProps: { + variant: "subtle", + colorScheme: "blue", + }, +}) diff --git a/packages/theme/src/components/avatar.ts b/packages/theme/src/components/avatar.ts index aa8fb256fcc..d323e4b2220 100644 --- a/packages/theme/src/components/avatar.ts +++ b/packages/theme/src/components/avatar.ts @@ -1,28 +1,31 @@ import { avatarAnatomy as parts } from "@chakra-ui/anatomy" -import { isDark, mode, randomColor } from "@chakra-ui/theme-tools" -import type { - PartsStyleFunction, - PartsStyleObject, - SystemStyleFunction, +import { + createMultiStyleConfigHelpers, + defineStyle, } from "@chakra-ui/styled-system" +import { isDark, mode, randomColor } from "@chakra-ui/theme-tools" import themeSizes from "../foundations/sizes" +import { runIfFn } from "../utils/run-if-fn" -const baseStyleBadge: SystemStyleFunction = (props) => { +const { definePartsStyle, defineMultiStyleConfig } = + createMultiStyleConfigHelpers(parts.keys) + +const baseStyleBadge = defineStyle((props) => { return { transform: "translate(25%, 25%)", borderRadius: "full", border: "0.2em solid", borderColor: mode("white", "gray.800")(props), } -} +}) -const baseStyleExcessLabel: SystemStyleFunction = (props) => { +const baseStyleExcessLabel = defineStyle((props) => { return { bg: mode("gray.200", "whiteAlpha.400")(props), } -} +}) -const baseStyleContainer: SystemStyleFunction = (props) => { +const baseStyleContainer = defineStyle((props) => { const { name, theme } = props const bg = name ? randomColor({ string: name }) : "gray.400" const isBgDark = isDark(bg)(theme) @@ -38,19 +41,17 @@ const baseStyleContainer: SystemStyleFunction = (props) => { borderColor, verticalAlign: "top", } -} - -const baseStyle: PartsStyleFunction = (props) => ({ - badge: baseStyleBadge(props), - excessLabel: baseStyleExcessLabel(props), - container: baseStyleContainer(props), }) -function getSize( - size: keyof typeof themeSizes | "100%", -): PartsStyleObject { +const baseStyle = definePartsStyle((props) => ({ + badge: runIfFn(baseStyleBadge, props), + excessLabel: runIfFn(baseStyleExcessLabel, props), + container: runIfFn(baseStyleContainer, props), +})) + +function getSize(size: keyof typeof themeSizes | "100%") { const themeSize = size !== "100%" ? themeSizes[size] : undefined - return { + return definePartsStyle({ container: { width: size, height: size, @@ -64,7 +65,7 @@ function getSize( fontSize: `calc(${themeSize ?? size} / 2.5)`, lineHeight: size !== "100%" ? themeSize ?? size : undefined, }, - } + }) } const sizes = { @@ -78,13 +79,8 @@ const sizes = { full: getSize("100%"), } -const defaultProps = { - size: "md", -} - -export default { - parts: parts.keys, +export const avatarTheme = defineMultiStyleConfig({ baseStyle, sizes, - defaultProps, -} + defaultProps: { size: "md" }, +}) diff --git a/packages/theme/src/components/badge.ts b/packages/theme/src/components/badge.ts index 8ddd6db0f0c..7678631a980 100644 --- a/packages/theme/src/components/badge.ts +++ b/packages/theme/src/components/badge.ts @@ -1,36 +1,33 @@ +import { defineStyle, defineStyleConfig } from "@chakra-ui/styled-system" import { getColor, mode, transparentize } from "@chakra-ui/theme-tools" -import type { - SystemStyleFunction, - SystemStyleObject, -} from "@chakra-ui/styled-system" -const baseStyle: SystemStyleObject = { +const baseStyle = defineStyle({ px: 1, textTransform: "uppercase", fontSize: "xs", borderRadius: "sm", fontWeight: "bold", -} +}) -const variantSolid: SystemStyleFunction = (props) => { +const variantSolid = defineStyle((props) => { const { colorScheme: c, theme } = props const dark = transparentize(`${c}.500`, 0.6)(theme) return { bg: mode(`${c}.500`, dark)(props), color: mode(`white`, `whiteAlpha.800`)(props), } -} +}) -const variantSubtle: SystemStyleFunction = (props) => { +const variantSubtle = defineStyle((props) => { const { colorScheme: c, theme } = props const darkBg = transparentize(`${c}.200`, 0.16)(theme) return { bg: mode(`${c}.100`, darkBg)(props), color: mode(`${c}.800`, `${c}.200`)(props), } -} +}) -const variantOutline: SystemStyleFunction = (props) => { +const variantOutline = defineStyle((props) => { const { colorScheme: c, theme } = props const darkColor = transparentize(`${c}.200`, 0.8)(theme) const lightColor = getColor(theme, `${c}.500`) @@ -40,7 +37,7 @@ const variantOutline: SystemStyleFunction = (props) => { color, boxShadow: `inset 0 0 0px 1px ${color}`, } -} +}) const variants = { solid: variantSolid, @@ -48,13 +45,11 @@ const variants = { outline: variantOutline, } -const defaultProps = { - variant: "subtle", - colorScheme: "gray", -} - -export default { +export const badgeTheme = defineStyleConfig({ baseStyle, variants, - defaultProps, -} + defaultProps: { + variant: "subtle", + colorScheme: "gray", + }, +}) diff --git a/packages/theme/src/components/breadcrumb.ts b/packages/theme/src/components/breadcrumb.ts index 5fa2a31bbe8..383fc23fd57 100644 --- a/packages/theme/src/components/breadcrumb.ts +++ b/packages/theme/src/components/breadcrumb.ts @@ -1,10 +1,13 @@ import { breadcrumbAnatomy as parts } from "@chakra-ui/anatomy" -import type { - PartsStyleObject, - SystemStyleObject, +import { + createMultiStyleConfigHelpers, + defineStyle, } from "@chakra-ui/styled-system" -const baseStyleLink: SystemStyleObject = { +const { defineMultiStyleConfig, definePartsStyle } = + createMultiStyleConfigHelpers(parts.keys) + +const baseStyleLink = defineStyle({ transitionProperty: "common", transitionDuration: "fast", transitionTimingFunction: "ease-out", @@ -18,13 +21,12 @@ const baseStyleLink: SystemStyleObject = { _focusVisible: { boxShadow: "outline", }, -} +}) -const baseStyle: PartsStyleObject = { +const baseStyle = definePartsStyle({ link: baseStyleLink, -} +}) -export default { - parts: parts.keys, +export const breadcrumbTheme = defineMultiStyleConfig({ baseStyle, -} +}) diff --git a/packages/theme/src/components/button.ts b/packages/theme/src/components/button.ts index 9ffccaf06bd..180302d1a73 100644 --- a/packages/theme/src/components/button.ts +++ b/packages/theme/src/components/button.ts @@ -1,10 +1,8 @@ +import { defineStyle, defineStyleConfig } from "@chakra-ui/styled-system" import { mode, transparentize } from "@chakra-ui/theme-tools" -import type { - SystemStyleObject, - SystemStyleFunction, -} from "@chakra-ui/styled-system" +import { runIfFn } from "../utils/run-if-fn" -const baseStyle: SystemStyleObject = { +const baseStyle = defineStyle({ lineHeight: "1.2", borderRadius: "md", fontWeight: "semibold", @@ -23,9 +21,9 @@ const baseStyle: SystemStyleObject = { bg: "initial", }, }, -} +}) -const variantGhost: SystemStyleFunction = (props) => { +const variantGhost = defineStyle((props) => { const { colorScheme: c, theme } = props if (c === "gray") { @@ -51,9 +49,9 @@ const variantGhost: SystemStyleFunction = (props) => { bg: mode(`${c}.100`, darkActiveBg)(props), }, } -} +}) -const variantOutline: SystemStyleFunction = (props) => { +const variantOutline = defineStyle((props) => { const { colorScheme: c } = props const borderColor = mode(`gray.200`, `whiteAlpha.300`)(props) return { @@ -62,9 +60,9 @@ const variantOutline: SystemStyleFunction = (props) => { ".chakra-button__group[data-attached] > &:not(:last-of-type)": { marginEnd: "-1px", }, - ...variantGhost(props), + ...runIfFn(variantGhost, props), } -} +}) type AccessibleColor = { bg?: string @@ -89,7 +87,7 @@ const accessibleColorMap: { [key: string]: AccessibleColor } = { }, } -const variantSolid: SystemStyleFunction = (props) => { +const variantSolid = defineStyle((props) => { const { colorScheme: c } = props if (c === "gray") { @@ -127,9 +125,9 @@ const variantSolid: SystemStyleFunction = (props) => { }, _active: { bg: mode(activeBg, `${c}.400`)(props) }, } -} +}) -const variantLink: SystemStyleFunction = (props) => { +const variantLink = defineStyle((props) => { const { colorScheme: c } = props return { padding: 0, @@ -147,16 +145,16 @@ const variantLink: SystemStyleFunction = (props) => { color: mode(`${c}.700`, `${c}.500`)(props), }, } -} +}) -const variantUnstyled: SystemStyleObject = { +const variantUnstyled = defineStyle({ bg: "none", color: "inherit", display: "inline", lineHeight: "inherit", m: 0, p: 0, -} +}) const variants = { ghost: variantGhost, @@ -166,42 +164,40 @@ const variants = { unstyled: variantUnstyled, } -const sizes: Record = { - lg: { +const sizes = { + lg: defineStyle({ h: 12, minW: 12, fontSize: "lg", px: 6, - }, - md: { + }), + md: defineStyle({ h: 10, minW: 10, fontSize: "md", px: 4, - }, - sm: { + }), + sm: defineStyle({ h: 8, minW: 8, fontSize: "sm", px: 3, - }, - xs: { + }), + xs: defineStyle({ h: 6, minW: 6, fontSize: "xs", px: 2, - }, + }), } -const defaultProps = { - variant: "solid", - size: "md", - colorScheme: "gray", -} - -export default { +export const buttonTheme = defineStyleConfig({ baseStyle, variants, sizes, - defaultProps, -} + defaultProps: { + variant: "solid", + size: "md", + colorScheme: "gray", + }, +}) diff --git a/packages/theme/src/components/checkbox.ts b/packages/theme/src/components/checkbox.ts index 3b78f738100..204544f6b51 100644 --- a/packages/theme/src/components/checkbox.ts +++ b/packages/theme/src/components/checkbox.ts @@ -1,13 +1,15 @@ import { checkboxAnatomy as parts } from "@chakra-ui/anatomy" -import type { - PartsStyleFunction, - PartsStyleObject, - SystemStyleFunction, - SystemStyleObject, +import { + createMultiStyleConfigHelpers, + defineStyle, } from "@chakra-ui/styled-system" import { mode } from "@chakra-ui/theme-tools" +import { runIfFn } from "../utils/run-if-fn" -const baseStyleControl: SystemStyleFunction = (props) => { +const { definePartsStyle, defineMultiStyleConfig } = + createMultiStyleConfigHelpers(parts.keys) + +const baseStyleControl = defineStyle((props) => { const { colorScheme: c } = props return { @@ -55,55 +57,52 @@ const baseStyleControl: SystemStyleFunction = (props) => { borderColor: mode("red.500", "red.300")(props), }, } -} +}) -const baseStyleContainer: SystemStyleObject = { +const baseStyleContainer = defineStyle({ _disabled: { cursor: "not-allowed" }, -} +}) -const baseStyleLabel: SystemStyleObject = { +const baseStyleLabel = defineStyle({ userSelect: "none", _disabled: { opacity: 0.4 }, -} +}) -const baseStyleIcon: SystemStyleObject = { +const baseStyleIcon = defineStyle({ transitionProperty: "transform", transitionDuration: "normal", -} +}) -const baseStyle: PartsStyleFunction = (props) => ({ +const baseStyle = definePartsStyle((props) => ({ icon: baseStyleIcon, container: baseStyleContainer, - control: baseStyleControl(props), + control: runIfFn(baseStyleControl, props), label: baseStyleLabel, -}) +})) -const sizes: Record> = { - sm: { +const sizes = { + sm: definePartsStyle({ control: { h: 3, w: 3 }, label: { fontSize: "sm" }, icon: { fontSize: "0.45rem" }, - }, - md: { + }), + md: definePartsStyle({ control: { w: 4, h: 4 }, label: { fontSize: "md" }, icon: { fontSize: "0.625rem" }, - }, - lg: { + }), + lg: definePartsStyle({ control: { w: 5, h: 5 }, label: { fontSize: "lg" }, icon: { fontSize: "0.625rem" }, - }, + }), } -const defaultProps = { - size: "md", - colorScheme: "blue", -} - -export default { - parts: parts.keys, +export const checkboxTheme = defineMultiStyleConfig({ baseStyle, sizes, - defaultProps, -} + defaultProps: { + size: "md", + colorScheme: "blue", + }, +}) diff --git a/packages/theme/src/components/close-button.ts b/packages/theme/src/components/close-button.ts index f9d5b26b116..cb309b4225e 100644 --- a/packages/theme/src/components/close-button.ts +++ b/packages/theme/src/components/close-button.ts @@ -1,12 +1,9 @@ -import type { - SystemStyleFunction, - SystemStyleObject, -} from "@chakra-ui/styled-system" +import { defineStyle, defineStyleConfig } from "@chakra-ui/styled-system" import { cssVar, mode } from "@chakra-ui/theme-tools" const $size = cssVar("close-button-size") -const baseStyle: SystemStyleFunction = (props) => { +const baseStyle = defineStyle((props) => { const hoverBg = mode(`blackAlpha.100`, `whiteAlpha.100`)(props) const activeBg = mode(`blackAlpha.200`, `whiteAlpha.200`)(props) @@ -27,29 +24,27 @@ const baseStyle: SystemStyleFunction = (props) => { boxShadow: "outline", }, } -} +}) -const sizes: Record = { - lg: { +const sizes = { + lg: defineStyle({ [$size.variable]: "40px", fontSize: "16px", - }, - md: { + }), + md: defineStyle({ [$size.variable]: "32px", fontSize: "12px", - }, - sm: { + }), + sm: defineStyle({ [$size.variable]: "24px", fontSize: "10px", - }, + }), } -const defaultProps = { - size: "md", -} - -export default { +export const closeButtonTheme = defineStyleConfig({ baseStyle, sizes, - defaultProps, -} + defaultProps: { + size: "md", + }, +}) diff --git a/packages/theme/src/components/code.ts b/packages/theme/src/components/code.ts index 992ce13da59..cd4ccf17487 100644 --- a/packages/theme/src/components/code.ts +++ b/packages/theme/src/components/code.ts @@ -1,17 +1,17 @@ -import type { SystemStyleObject } from "@chakra-ui/styled-system" -import Badge from "./badge" +import { defineStyle, defineStyleConfig } from "@chakra-ui/styled-system" +import { badgeTheme } from "./badge" -const { variants, defaultProps } = Badge +const { variants, defaultProps } = badgeTheme -const baseStyle: SystemStyleObject = { +const baseStyle = defineStyle({ fontFamily: "mono", fontSize: "sm", px: "0.2em", borderRadius: "sm", -} +}) -export default { +export const codeTheme = defineStyleConfig({ baseStyle, variants, defaultProps, -} +}) diff --git a/packages/theme/src/components/container.ts b/packages/theme/src/components/container.ts index 06bd9d73120..a044bfd03e1 100644 --- a/packages/theme/src/components/container.ts +++ b/packages/theme/src/components/container.ts @@ -1,12 +1,12 @@ -import type { SystemStyleObject } from "@chakra-ui/styled-system" +import { defineStyle, defineStyleConfig } from "@chakra-ui/styled-system" -const baseStyle: SystemStyleObject = { +const baseStyle = defineStyle({ w: "100%", mx: "auto", maxW: "60ch", px: "1rem", -} +}) -export default { +export const containerTheme = defineStyleConfig({ baseStyle, -} +}) diff --git a/packages/theme/src/components/divider.ts b/packages/theme/src/components/divider.ts index cb7e53511d6..6f1e9796a24 100644 --- a/packages/theme/src/components/divider.ts +++ b/packages/theme/src/components/divider.ts @@ -1,29 +1,27 @@ -import type { SystemStyleObject } from "@chakra-ui/styled-system" +import { defineStyle, defineStyleConfig } from "@chakra-ui/styled-system" -const baseStyle: SystemStyleObject = { +const baseStyle = defineStyle({ opacity: 0.6, borderColor: "inherit", -} +}) -const variantSolid: SystemStyleObject = { +const variantSolid = defineStyle({ borderStyle: "solid", -} +}) -const variantDashed: SystemStyleObject = { +const variantDashed = defineStyle({ borderStyle: "dashed", -} +}) const variants = { solid: variantSolid, dashed: variantDashed, } -const defaultProps = { - variant: "solid", -} - -export default { +export const dividerTheme = defineStyleConfig({ baseStyle, variants, - defaultProps, -} + defaultProps: { + variant: "solid", + }, +}) diff --git a/packages/theme/src/components/drawer.ts b/packages/theme/src/components/drawer.ts index c75216d6aca..1647df69e18 100644 --- a/packages/theme/src/components/drawer.ts +++ b/packages/theme/src/components/drawer.ts @@ -1,39 +1,41 @@ import { drawerAnatomy as parts } from "@chakra-ui/anatomy" -import type { - PartsStyleFunction, - PartsStyleObject, - SystemStyleFunction, - SystemStyleObject, +import { + createMultiStyleConfigHelpers, + defineStyle, } from "@chakra-ui/styled-system" import { mode } from "@chakra-ui/theme-tools" +import { runIfFn } from "../utils/run-if-fn" + +const { definePartsStyle, defineMultiStyleConfig } = + createMultiStyleConfigHelpers(parts.keys) /** * Since the `maxWidth` prop references theme.sizes internally, * we can leverage that to size our modals. */ -function getSize(value: string): PartsStyleObject { +function getSize(value: string) { if (value === "full") { - return { + return definePartsStyle({ dialog: { maxW: "100vw", h: "100vh" }, - } + }) } - return { + return definePartsStyle({ dialog: { maxW: value }, - } + }) } -const baseStyleOverlay: SystemStyleObject = { +const baseStyleOverlay = defineStyle({ bg: "blackAlpha.600", zIndex: "overlay", -} +}) -const baseStyleDialogContainer: SystemStyleObject = { +const baseStyleDialogContainer = defineStyle({ display: "flex", zIndex: "modal", justifyContent: "center", -} +}) -const baseStyleDialog: SystemStyleFunction = (props) => { +const baseStyleDialog = defineStyle((props) => { const { isFullHeight } = props return { @@ -44,42 +46,42 @@ const baseStyleDialog: SystemStyleFunction = (props) => { color: "inherit", boxShadow: mode("lg", "dark-lg")(props), } -} +}) -const baseStyleHeader: SystemStyleObject = { +const baseStyleHeader = defineStyle({ px: 6, py: 4, fontSize: "xl", fontWeight: "semibold", -} +}) -const baseStyleCloseButton: SystemStyleObject = { +const baseStyleCloseButton = defineStyle({ position: "absolute", top: 2, insetEnd: 3, -} +}) -const baseStyleBody: SystemStyleObject = { +const baseStyleBody = defineStyle({ px: 6, py: 2, flex: 1, overflow: "auto", -} +}) -const baseStyleFooter: SystemStyleObject = { +const baseStyleFooter = defineStyle({ px: 6, py: 4, -} +}) -const baseStyle: PartsStyleFunction = (props) => ({ +const baseStyle = definePartsStyle((props) => ({ overlay: baseStyleOverlay, dialogContainer: baseStyleDialogContainer, - dialog: baseStyleDialog(props), + dialog: runIfFn(baseStyleDialog, props), header: baseStyleHeader, closeButton: baseStyleCloseButton, body: baseStyleBody, footer: baseStyleFooter, -}) +})) const sizes = { xs: getSize("xs"), @@ -90,13 +92,10 @@ const sizes = { full: getSize("full"), } -const defaultProps = { - size: "xs", -} - -export default { - parts: parts.keys, +export const drawerTheme = defineMultiStyleConfig({ baseStyle, sizes, - defaultProps, -} + defaultProps: { + size: "xs", + }, +}) diff --git a/packages/theme/src/components/editable.ts b/packages/theme/src/components/editable.ts index c1b35061e2b..87775f38a40 100644 --- a/packages/theme/src/components/editable.ts +++ b/packages/theme/src/components/editable.ts @@ -1,17 +1,20 @@ import { editableAnatomy as parts } from "@chakra-ui/anatomy" -import type { - PartsStyleObject, - SystemStyleObject, +import { + createMultiStyleConfigHelpers, + defineStyle, } from "@chakra-ui/styled-system" -const baseStylePreview: SystemStyleObject = { +const { definePartsStyle, defineMultiStyleConfig } = + createMultiStyleConfigHelpers(parts.keys) + +const baseStylePreview = defineStyle({ borderRadius: "md", py: "3px", transitionProperty: "common", transitionDuration: "normal", -} +}) -const baseStyleInput: SystemStyleObject = { +const baseStyleInput = defineStyle({ borderRadius: "md", py: "3px", transitionProperty: "common", @@ -19,9 +22,9 @@ const baseStyleInput: SystemStyleObject = { width: "full", _focusVisible: { boxShadow: "outline" }, _placeholder: { opacity: 0.6 }, -} +}) -const baseStyleTextarea: SystemStyleObject = { +const baseStyleTextarea = defineStyle({ borderRadius: "md", py: "3px", transitionProperty: "common", @@ -29,15 +32,14 @@ const baseStyleTextarea: SystemStyleObject = { width: "full", _focusVisible: { boxShadow: "outline" }, _placeholder: { opacity: 0.6 }, -} +}) -const baseStyle: PartsStyleObject = { +const baseStyle = definePartsStyle({ preview: baseStylePreview, input: baseStyleInput, textarea: baseStyleTextarea, -} +}) -export default { - parts: parts.keys, +export const editableTheme = defineMultiStyleConfig({ baseStyle, -} +}) diff --git a/packages/theme/src/components/form-control.ts b/packages/theme/src/components/form-control.ts index 8afd479586b..5ec6734faca 100644 --- a/packages/theme/src/components/form-control.ts +++ b/packages/theme/src/components/form-control.ts @@ -1,33 +1,36 @@ import { formAnatomy as parts } from "@chakra-ui/anatomy" -import type { - PartsStyleFunction, - SystemStyleFunction, +import { + createMultiStyleConfigHelpers, + defineStyle, } from "@chakra-ui/styled-system" import { mode } from "@chakra-ui/theme-tools" +import { runIfFn } from "../utils/run-if-fn" -const baseStyleRequiredIndicator: SystemStyleFunction = (props) => { +const { definePartsStyle, defineMultiStyleConfig } = + createMultiStyleConfigHelpers(parts.keys) + +const baseStyleRequiredIndicator = defineStyle((props) => { return { marginStart: 1, color: mode("red.500", "red.300")(props), } -} +}) -const baseStyleHelperText: SystemStyleFunction = (props) => { +const baseStyleHelperText = defineStyle((props) => { return { mt: 2, color: mode("gray.600", "whiteAlpha.600")(props), lineHeight: "normal", fontSize: "sm", } -} +}) -const baseStyle: PartsStyleFunction = (props) => ({ +const baseStyle = definePartsStyle((props) => ({ container: { width: "100%", position: "relative" }, - requiredIndicator: baseStyleRequiredIndicator(props), - helperText: baseStyleHelperText(props), -}) + requiredIndicator: runIfFn(baseStyleRequiredIndicator, props), + helperText: runIfFn(baseStyleHelperText, props), +})) -export default { - parts: parts.keys, +export const formTheme = defineMultiStyleConfig({ baseStyle, -} +}) diff --git a/packages/theme/src/components/form-error.ts b/packages/theme/src/components/form-error.ts index 80abfa94d8f..7a6ef1ed931 100644 --- a/packages/theme/src/components/form-error.ts +++ b/packages/theme/src/components/form-error.ts @@ -1,32 +1,35 @@ import { formErrorAnatomy as parts } from "@chakra-ui/anatomy" -import type { - PartsStyleFunction, - SystemStyleFunction, +import { + createMultiStyleConfigHelpers, + defineStyle, } from "@chakra-ui/styled-system" import { mode } from "@chakra-ui/theme-tools" +import { runIfFn } from "../utils/run-if-fn" -const baseStyleText: SystemStyleFunction = (props) => { +const { definePartsStyle, defineMultiStyleConfig } = + createMultiStyleConfigHelpers(parts.keys) + +const baseStyleText = defineStyle((props) => { return { color: mode("red.500", "red.300")(props), mt: 2, fontSize: "sm", lineHeight: "normal", } -} +}) -const baseStyleIcon: SystemStyleFunction = (props) => { +const baseStyleIcon = defineStyle((props) => { return { marginEnd: "0.5em", color: mode("red.500", "red.300")(props), } -} - -const baseStyle: PartsStyleFunction = (props) => ({ - text: baseStyleText(props), - icon: baseStyleIcon(props), }) -export default { - parts: parts.keys, +const baseStyle = definePartsStyle((props) => ({ + text: runIfFn(baseStyleText, props), + icon: runIfFn(baseStyleIcon, props), +})) + +export const formErrorTheme = defineMultiStyleConfig({ baseStyle, -} +}) diff --git a/packages/theme/src/components/form-label.ts b/packages/theme/src/components/form-label.ts index 9645cf7e656..e56bf6df9a7 100644 --- a/packages/theme/src/components/form-label.ts +++ b/packages/theme/src/components/form-label.ts @@ -1,6 +1,6 @@ -import type { SystemStyleObject } from "@chakra-ui/styled-system" +import { defineStyle, defineStyleConfig } from "@chakra-ui/styled-system" -const baseStyle: SystemStyleObject = { +const baseStyle = defineStyle({ fontSize: "md", marginEnd: 3, mb: 2, @@ -11,8 +11,8 @@ const baseStyle: SystemStyleObject = { _disabled: { opacity: 0.4, }, -} +}) -export default { +export const formLabelTheme = defineStyleConfig({ baseStyle, -} +}) diff --git a/packages/theme/src/components/heading.ts b/packages/theme/src/components/heading.ts index 5882ea3df48..231ef19d8d0 100644 --- a/packages/theme/src/components/heading.ts +++ b/packages/theme/src/components/heading.ts @@ -1,42 +1,49 @@ -import { SystemStyleObject } from "@chakra-ui/styled-system" +import { defineStyle, defineStyleConfig } from "@chakra-ui/styled-system" -const baseStyle: SystemStyleObject = { +const baseStyle = defineStyle({ fontFamily: "heading", fontWeight: "bold", -} +}) -const sizes: Record = { - "4xl": { +const sizes = { + "4xl": defineStyle({ fontSize: ["6xl", null, "7xl"], lineHeight: 1, - }, - "3xl": { + }), + "3xl": defineStyle({ fontSize: ["5xl", null, "6xl"], lineHeight: 1, - }, - "2xl": { + }), + "2xl": defineStyle({ fontSize: ["4xl", null, "5xl"], lineHeight: [1.2, null, 1], - }, - xl: { + }), + xl: defineStyle({ fontSize: ["3xl", null, "4xl"], lineHeight: [1.33, null, 1.2], - }, - lg: { + }), + lg: defineStyle({ fontSize: ["2xl", null, "3xl"], lineHeight: [1.33, null, 1.2], - }, - md: { fontSize: "xl", lineHeight: 1.2 }, - sm: { fontSize: "md", lineHeight: 1.2 }, - xs: { fontSize: "sm", lineHeight: 1.2 }, -} - -const defaultProps = { - size: "xl", + }), + md: defineStyle({ + fontSize: "xl", + lineHeight: 1.2, + }), + sm: defineStyle({ + fontSize: "md", + lineHeight: 1.2, + }), + xs: defineStyle({ + fontSize: "sm", + lineHeight: 1.2, + }), } -export default { +export const headingTheme = defineStyleConfig({ baseStyle, sizes, - defaultProps, -} + defaultProps: { + size: "xl", + }, +}) diff --git a/packages/theme/src/components/index.ts b/packages/theme/src/components/index.ts index 0e28ffe9b7f..07d6f1c0d85 100644 --- a/packages/theme/src/components/index.ts +++ b/packages/theme/src/components/index.ts @@ -1,124 +1,124 @@ -import Accordion from "./accordion" -import Alert from "./alert" -import Avatar from "./avatar" -import Badge from "./badge" -import Breadcrumb from "./breadcrumb" -import Button from "./button" -import Checkbox from "./checkbox" -import CloseButton from "./close-button" -import Code from "./code" -import Container from "./container" -import Divider from "./divider" -import Drawer from "./drawer" -import Editable from "./editable" -import Form from "./form-control" -import FormError from "./form-error" -import FormLabel from "./form-label" -import Heading from "./heading" -import Input from "./input" -import Kbd from "./kbd" -import Link from "./link" -import List from "./list" -import Menu from "./menu" -import Modal from "./modal" -import NumberInput from "./number-input" -import PinInput from "./pin-input" -import Popover from "./popover" -import Progress from "./progress" -import Radio from "./radio" -import Select from "./select" -import Skeleton from "./skeleton" -import SkipLink from "./skip-link" -import Slider from "./slider" -import Spinner from "./spinner" -import Stat from "./stat" -import Switch from "./switch" -import Table from "./table" -import Tabs from "./tabs" -import Tag from "./tag" -import Textarea from "./textarea" -import Tooltip from "./tooltip" +import { accordionTheme } from "./accordion" +import { alertTheme } from "./alert" +import { avatarTheme } from "./avatar" +import { badgeTheme } from "./badge" +import { breadcrumbTheme } from "./breadcrumb" +import { buttonTheme } from "./button" +import { checkboxTheme } from "./checkbox" +import { closeButtonTheme } from "./close-button" +import { codeTheme } from "./code" +import { containerTheme } from "./container" +import { dividerTheme } from "./divider" +import { drawerTheme } from "./drawer" +import { editableTheme } from "./editable" +import { formTheme } from "./form-control" +import { formErrorTheme } from "./form-error" +import { formLabelTheme } from "./form-label" +import { headingTheme } from "./heading" +import { inputTheme } from "./input" +import { kbdTheme } from "./kbd" +import { linkTheme } from "./link" +import { listTheme } from "./list" +import { menuTheme } from "./menu" +import { modalTheme } from "./modal" +import { numberInputTheme } from "./number-input" +import { pinInputTheme } from "./pin-input" +import { popoverTheme } from "./popover" +import { progressTheme } from "./progress" +import { radioTheme } from "./radio" +import { selectTheme } from "./select" +import { skeletonTheme } from "./skeleton" +import { skipLinkTheme } from "./skip-link" +import { sliderTheme } from "./slider" +import { spinnerTheme } from "./spinner" +import { statTheme } from "./stat" +import { switchTheme } from "./switch" +import { tableTheme } from "./table" +import { tabsTheme } from "./tabs" +import { tagTheme } from "./tag" +import { textareaTheme } from "./textarea" +import { tooltipTheme } from "./tooltip" -export { default as Accordion } from "./accordion" -export { default as Alert } from "./alert" -export { default as Avatar } from "./avatar" -export { default as Badge } from "./badge" -export { default as Breadcrumb } from "./breadcrumb" -export { default as Button } from "./button" -export { default as Checkbox } from "./checkbox" -export { default as CloseButton } from "./close-button" -export { default as Code } from "./code" -export { default as Container } from "./container" -export { default as Divider } from "./divider" -export { default as Drawer } from "./drawer" -export { default as Editable } from "./editable" -export { default as Form } from "./form-control" -export { default as FormError } from "./form-error" -export { default as FormLabel } from "./form-label" -export { default as Heading } from "./heading" -export { default as Input } from "./input" -export { default as Kbd } from "./kbd" -export { default as Link } from "./link" -export { default as List } from "./list" -export { default as Menu } from "./menu" -export { default as Modal } from "./modal" -export { default as NumberInput } from "./number-input" -export { default as PinInput } from "./pin-input" -export { default as Popover } from "./popover" -export { default as Progress } from "./progress" -export { default as Radio } from "./radio" -export { default as Select } from "./select" -export { default as Skeleton } from "./skeleton" -export { default as SkipLink } from "./skip-link" -export { default as Slider } from "./slider" -export { default as Spinner } from "./spinner" -export { default as Stat } from "./stat" -export { default as Switch } from "./switch" -export { default as Table } from "./table" -export { default as Tabs } from "./tabs" -export { default as Tag } from "./tag" -export { default as Textarea } from "./textarea" -export { default as Tooltip } from "./tooltip" +export { accordionTheme as Accordion } from "./accordion" +export { alertTheme as Alert } from "./alert" +export { avatarTheme as Avatar } from "./avatar" +export { badgeTheme as Badge } from "./badge" +export { breadcrumbTheme as Breadcrumb } from "./breadcrumb" +export { buttonTheme as Button } from "./button" +export { checkboxTheme as Checkbox } from "./checkbox" +export { closeButtonTheme as CloseButton } from "./close-button" +export { codeTheme as Code } from "./code" +export { containerTheme as Container } from "./container" +export { dividerTheme as Divider } from "./divider" +export { drawerTheme as Drawer } from "./drawer" +export { editableTheme as Editable } from "./editable" +export { formTheme as Form } from "./form-control" +export { formErrorTheme as FormError } from "./form-error" +export { formLabelTheme as FormLabel } from "./form-label" +export { headingTheme as Heading } from "./heading" +export { inputTheme as Input } from "./input" +export { kbdTheme as Kbd } from "./kbd" +export { linkTheme as Link } from "./link" +export { listTheme as List } from "./list" +export { menuTheme as Menu } from "./menu" +export { modalTheme as Modal } from "./modal" +export { numberInputTheme as NumberInput } from "./number-input" +export { pinInputTheme as PinInput } from "./pin-input" +export { popoverTheme as Popover } from "./popover" +export { progressTheme as Progress } from "./progress" +export { radioTheme as Radio } from "./radio" +export { selectTheme as Select } from "./select" +export { skeletonTheme as Skeleton } from "./skeleton" +export { skipLinkTheme as SkipLink } from "./skip-link" +export { sliderTheme as Slider } from "./slider" +export { spinnerTheme as Spinner } from "./spinner" +export { statTheme as Stat } from "./stat" +export { switchTheme as Switch } from "./switch" +export { tableTheme as Table } from "./table" +export { tabsTheme as Tabs } from "./tabs" +export { tagTheme as Tag } from "./tag" +export { textareaTheme as Textarea } from "./textarea" +export { tooltipTheme as Tooltip } from "./tooltip" -export const components: Record = { - Accordion, - Alert, - Avatar, - Badge, - Breadcrumb, - Button, - Checkbox, - CloseButton, - Code, - Container, - Divider, - Drawer, - Editable, - Form, - FormError, - FormLabel, - Heading, - Input, - Kbd, - Link, - List, - Menu, - Modal, - NumberInput, - PinInput, - Popover, - Progress, - Radio, - Select, - Skeleton, - SkipLink, - Slider, - Spinner, - Stat, - Switch, - Table, - Tabs, - Tag, - Textarea, - Tooltip, +export const components = { + Accordion: accordionTheme, + Alert: alertTheme, + Avatar: avatarTheme, + Badge: badgeTheme, + Breadcrumb: breadcrumbTheme, + Button: buttonTheme, + Checkbox: checkboxTheme, + CloseButton: closeButtonTheme, + Code: codeTheme, + Container: containerTheme, + Divider: dividerTheme, + Drawer: drawerTheme, + Editable: editableTheme, + Form: formTheme, + FormError: formErrorTheme, + FormLabel: formLabelTheme, + Heading: headingTheme, + Input: inputTheme, + Kbd: kbdTheme, + Link: linkTheme, + List: listTheme, + Menu: menuTheme, + Modal: modalTheme, + NumberInput: numberInputTheme, + PinInput: pinInputTheme, + Popover: popoverTheme, + Progress: progressTheme, + Radio: radioTheme, + Select: selectTheme, + Skeleton: skeletonTheme, + SkipLink: skipLinkTheme, + Slider: sliderTheme, + Spinner: spinnerTheme, + Stat: statTheme, + Switch: switchTheme, + Table: tableTheme, + Tabs: tabsTheme, + Tag: tagTheme, + Textarea: textareaTheme, + Tooltip: tooltipTheme, } diff --git a/packages/theme/src/components/input.ts b/packages/theme/src/components/input.ts index d204c86a545..00745a61c74 100644 --- a/packages/theme/src/components/input.ts +++ b/packages/theme/src/components/input.ts @@ -1,12 +1,14 @@ import { inputAnatomy as parts } from "@chakra-ui/anatomy" -import type { - PartsStyleFunction, - PartsStyleObject, - SystemStyleObject, +import { + createMultiStyleConfigHelpers, + defineStyle, } from "@chakra-ui/styled-system" import { getColor, mode } from "@chakra-ui/theme-tools" -const baseStyle: PartsStyleObject = { +const { definePartsStyle, defineMultiStyleConfig } = + createMultiStyleConfigHelpers(parts.keys) + +const baseStyle = definePartsStyle({ field: { width: "100%", minWidth: 0, @@ -16,55 +18,52 @@ const baseStyle: PartsStyleObject = { transitionProperty: "common", transitionDuration: "normal", }, -} +}) -const size: Record = { - lg: { +const size = { + lg: defineStyle({ fontSize: "lg", px: 4, h: 12, borderRadius: "md", - }, - - md: { + }), + md: defineStyle({ fontSize: "md", px: 4, h: 10, borderRadius: "md", - }, - - sm: { + }), + sm: defineStyle({ fontSize: "sm", px: 3, h: 8, borderRadius: "sm", - }, - - xs: { + }), + xs: defineStyle({ fontSize: "xs", px: 2, h: 6, borderRadius: "sm", - }, + }), } -const sizes: Record> = { - lg: { +const sizes = { + lg: definePartsStyle({ field: size.lg, addon: size.lg, - }, - md: { + }), + md: definePartsStyle({ field: size.md, addon: size.md, - }, - sm: { + }), + sm: definePartsStyle({ field: size.sm, addon: size.sm, - }, - xs: { + }), + xs: definePartsStyle({ field: size.xs, addon: size.xs, - }, + }), } function getDefaults(props: Record) { @@ -75,7 +74,7 @@ function getDefaults(props: Record) { } } -const variantOutline: PartsStyleFunction = (props) => { +const variantOutline = definePartsStyle((props) => { const { theme } = props const { focusBorderColor: fc, errorBorderColor: ec } = getDefaults(props) @@ -111,9 +110,9 @@ const variantOutline: PartsStyleFunction = (props) => { bg: mode("gray.100", "whiteAlpha.300")(props), }, } -} +}) -const variantFilled: PartsStyleFunction = (props) => { +const variantFilled = definePartsStyle((props) => { const { theme } = props const { focusBorderColor: fc, errorBorderColor: ec } = getDefaults(props) @@ -147,9 +146,9 @@ const variantFilled: PartsStyleFunction = (props) => { bg: mode("gray.100", "whiteAlpha.50")(props), }, } -} +}) -const variantFlushed: PartsStyleFunction = (props) => { +const variantFlushed = definePartsStyle((props) => { const { theme } = props const { focusBorderColor: fc, errorBorderColor: ec } = getDefaults(props) @@ -185,9 +184,9 @@ const variantFlushed: PartsStyleFunction = (props) => { bg: "transparent", }, } -} +}) -const variantUnstyled: PartsStyleObject = { +const variantUnstyled = definePartsStyle({ field: { bg: "transparent", px: 0, @@ -202,7 +201,7 @@ const variantUnstyled: PartsStyleObject = { px: 0, height: "auto", }, -} +}) const variants = { outline: variantOutline, @@ -211,15 +210,12 @@ const variants = { unstyled: variantUnstyled, } -const defaultProps = { - size: "md", - variant: "outline", -} - -export default { - parts: parts.keys, +export const inputTheme = defineMultiStyleConfig({ baseStyle, sizes, variants, - defaultProps, -} + defaultProps: { + size: "md", + variant: "outline", + }, +}) diff --git a/packages/theme/src/components/kbd.ts b/packages/theme/src/components/kbd.ts index 0d31ab6b49b..e6d8d0e11c7 100644 --- a/packages/theme/src/components/kbd.ts +++ b/packages/theme/src/components/kbd.ts @@ -1,7 +1,7 @@ -import type { SystemStyleFunction } from "@chakra-ui/styled-system" +import { defineStyle, defineStyleConfig } from "@chakra-ui/styled-system" import { mode } from "@chakra-ui/theme-tools" -const baseStyle: SystemStyleFunction = (props) => { +const baseStyle = defineStyle((props) => { return { bg: mode("gray.100", "whiteAlpha")(props), borderRadius: "md", @@ -13,8 +13,8 @@ const baseStyle: SystemStyleFunction = (props) => { px: "0.4em", whiteSpace: "nowrap", } -} +}) -export default { +export const kbdTheme = defineStyleConfig({ baseStyle, -} +}) diff --git a/packages/theme/src/components/link.ts b/packages/theme/src/components/link.ts index 4d59992e1db..c0551803902 100644 --- a/packages/theme/src/components/link.ts +++ b/packages/theme/src/components/link.ts @@ -1,6 +1,6 @@ -import type { SystemStyleObject } from "@chakra-ui/styled-system" +import { defineStyle, defineStyleConfig } from "@chakra-ui/styled-system" -const baseStyle: SystemStyleObject = { +const baseStyle = defineStyle({ transitionProperty: "common", transitionDuration: "fast", transitionTimingFunction: "ease-out", @@ -14,8 +14,8 @@ const baseStyle: SystemStyleObject = { _focusVisible: { boxShadow: "outline", }, -} +}) -export default { +export const linkTheme = defineStyleConfig({ baseStyle, -} +}) diff --git a/packages/theme/src/components/list.ts b/packages/theme/src/components/list.ts index 1e2e40cb6fa..d305a829839 100644 --- a/packages/theme/src/components/list.ts +++ b/packages/theme/src/components/list.ts @@ -1,22 +1,24 @@ import { listAnatomy as parts } from "@chakra-ui/anatomy" -import type { - PartsStyleObject, - SystemStyleObject, +import { + createMultiStyleConfigHelpers, + defineStyle, } from "@chakra-ui/styled-system" -const baseStyleIcon: SystemStyleObject = { +const { defineMultiStyleConfig, definePartsStyle } = + createMultiStyleConfigHelpers(parts.keys) + +const baseStyleIcon = defineStyle({ marginEnd: "0.5rem", display: "inline", verticalAlign: "text-bottom", -} +}) -const baseStyle: PartsStyleObject = { +const baseStyle = definePartsStyle({ container: {}, item: {}, icon: baseStyleIcon, -} +}) -export default { - parts: parts.keys, +export const listTheme = defineMultiStyleConfig({ baseStyle, -} +}) diff --git a/packages/theme/src/components/menu.ts b/packages/theme/src/components/menu.ts index 3d1ca76285d..687ce0b78ec 100644 --- a/packages/theme/src/components/menu.ts +++ b/packages/theme/src/components/menu.ts @@ -1,12 +1,15 @@ import { menuAnatomy as parts } from "@chakra-ui/anatomy" -import type { - PartsStyleFunction, - SystemStyleFunction, - SystemStyleObject, +import { + createMultiStyleConfigHelpers, + defineStyle, } from "@chakra-ui/styled-system" import { mode } from "@chakra-ui/theme-tools" +import { runIfFn } from "../utils/run-if-fn" -const baseStyleList: SystemStyleFunction = (props) => { +const { defineMultiStyleConfig, definePartsStyle } = + createMultiStyleConfigHelpers(parts.keys) + +const baseStyleList = defineStyle((props) => { return { bg: mode("#fff", "gray.700")(props), boxShadow: mode("sm", "dark-lg")(props), @@ -17,9 +20,9 @@ const baseStyleList: SystemStyleFunction = (props) => { borderRadius: "md", borderWidth: "1px", } -} +}) -const baseStyleItem: SystemStyleFunction = (props) => { +const baseStyleItem = defineStyle((props) => { return { py: "0.4rem", px: "0.8rem", @@ -40,42 +43,41 @@ const baseStyleItem: SystemStyleFunction = (props) => { cursor: "not-allowed", }, } -} +}) -const baseStyleGroupTitle: SystemStyleObject = { +const baseStyleGroupTitle = defineStyle({ mx: 4, my: 2, fontWeight: "semibold", fontSize: "sm", -} +}) -const baseStyleCommand: SystemStyleObject = { +const baseStyleCommand = defineStyle({ opacity: 0.6, -} +}) -const baseStyleDivider: SystemStyleObject = { +const baseStyleDivider = defineStyle({ border: 0, borderBottom: "1px solid", borderColor: "inherit", my: "0.5rem", opacity: 0.6, -} +}) -const baseStyleButton: SystemStyleObject = { +const baseStyleButton = defineStyle({ transitionProperty: "common", transitionDuration: "normal", -} +}) -const baseStyle: PartsStyleFunction = (props) => ({ +const baseStyle = definePartsStyle((props) => ({ button: baseStyleButton, - list: baseStyleList(props), - item: baseStyleItem(props), + list: runIfFn(baseStyleList, props), + item: runIfFn(baseStyleItem, props), groupTitle: baseStyleGroupTitle, command: baseStyleCommand, divider: baseStyleDivider, -}) +})) -export default { - parts: parts.keys, +export const menuTheme = defineMultiStyleConfig({ baseStyle, -} +}) diff --git a/packages/theme/src/components/modal.ts b/packages/theme/src/components/modal.ts index a08b65218be..29924c163d6 100644 --- a/packages/theme/src/components/modal.ts +++ b/packages/theme/src/components/modal.ts @@ -1,18 +1,20 @@ import { modalAnatomy as parts } from "@chakra-ui/anatomy" -import type { - PartsStyleFunction, - PartsStyleObject, - SystemStyleFunction, - SystemStyleObject, +import { + createMultiStyleConfigHelpers, + defineStyle, } from "@chakra-ui/styled-system" import { mode } from "@chakra-ui/theme-tools" +import { runIfFn } from "../utils/run-if-fn" -const baseStyleOverlay: SystemStyleObject = { +const { defineMultiStyleConfig, definePartsStyle } = + createMultiStyleConfigHelpers(parts.keys) + +const baseStyleOverlay = defineStyle({ bg: "blackAlpha.600", zIndex: "modal", -} +}) -const baseStyleDialogContainer: SystemStyleFunction = (props) => { +const baseStyleDialogContainer = defineStyle((props) => { const { isCentered, scrollBehavior } = props return { @@ -22,9 +24,9 @@ const baseStyleDialogContainer: SystemStyleFunction = (props) => { alignItems: isCentered ? "center" : "flex-start", overflow: scrollBehavior === "inside" ? "hidden" : "auto", } -} +}) -const baseStyleDialog: SystemStyleFunction = (props) => { +const baseStyleDialog = defineStyle((props) => { const { scrollBehavior } = props return { @@ -36,22 +38,22 @@ const baseStyleDialog: SystemStyleFunction = (props) => { maxH: scrollBehavior === "inside" ? "calc(100% - 7.5rem)" : undefined, boxShadow: mode("lg", "dark-lg")(props), } -} +}) -const baseStyleHeader: SystemStyleObject = { +const baseStyleHeader = defineStyle({ px: 6, py: 4, fontSize: "xl", fontWeight: "semibold", -} +}) -const baseStyleCloseButton: SystemStyleObject = { +const baseStyleCloseButton = defineStyle({ position: "absolute", top: 2, insetEnd: 3, -} +}) -const baseStyleBody: SystemStyleFunction = (props) => { +const baseStyleBody = defineStyle((props) => { const { scrollBehavior } = props return { px: 6, @@ -59,30 +61,30 @@ const baseStyleBody: SystemStyleFunction = (props) => { flex: 1, overflow: scrollBehavior === "inside" ? "auto" : undefined, } -} +}) -const baseStyleFooter: SystemStyleObject = { +const baseStyleFooter = defineStyle({ px: 6, py: 4, -} +}) -const baseStyle: PartsStyleFunction = (props) => ({ +const baseStyle = definePartsStyle((props) => ({ overlay: baseStyleOverlay, - dialogContainer: baseStyleDialogContainer(props), - dialog: baseStyleDialog(props), + dialogContainer: runIfFn(baseStyleDialogContainer, props), + dialog: runIfFn(baseStyleDialog, props), header: baseStyleHeader, closeButton: baseStyleCloseButton, - body: baseStyleBody(props), + body: runIfFn(baseStyleBody, props), footer: baseStyleFooter, -}) +})) /** * Since the `maxWidth` prop references theme.sizes internally, * we can leverage that to size our modals. */ -function getSize(value: string): PartsStyleObject { +function getSize(value: string) { if (value === "full") { - return { + return definePartsStyle({ dialog: { maxW: "100vw", minH: "100vh", @@ -92,11 +94,11 @@ function getSize(value: string): PartsStyleObject { my: 0, borderRadius: 0, }, - } + }) } - return { + return definePartsStyle({ dialog: { maxW: value }, - } + }) } const sizes = { @@ -113,13 +115,8 @@ const sizes = { full: getSize("full"), } -const defaultProps = { - size: "md", -} - -export default { - parts: parts.keys, +export const modalTheme = defineMultiStyleConfig({ baseStyle, sizes, - defaultProps, -} + defaultProps: { size: "md" }, +}) diff --git a/packages/theme/src/components/number-input.ts b/packages/theme/src/components/number-input.ts index 4326a90c700..ca07812da88 100644 --- a/packages/theme/src/components/number-input.ts +++ b/packages/theme/src/components/number-input.ts @@ -1,33 +1,34 @@ import { numberInputAnatomy as parts } from "@chakra-ui/anatomy" -import type { - PartsStyleFunction, - PartsStyleObject, - SystemStyleFunction, - SystemStyleObject, +import { + createMultiStyleConfigHelpers, + defineStyle, } from "@chakra-ui/styled-system" import { calc, cssVar, mode } from "@chakra-ui/theme-tools" import typography from "../foundations/typography" -import Input from "./input" +import { inputTheme } from "./input" +import { runIfFn } from "../utils/run-if-fn" -const { variants, defaultProps } = Input +const { defineMultiStyleConfig, definePartsStyle } = + createMultiStyleConfigHelpers(parts.keys) const $stepperWidth = cssVar("number-input-stepper-width") - const $inputPadding = cssVar("number-input-input-padding") const inputPaddingValue = calc($stepperWidth).add("0.5rem").toString() -const baseStyleRoot: SystemStyleObject = { +const baseStyleRoot = defineStyle({ [$stepperWidth.variable]: "24px", [$inputPadding.variable]: inputPaddingValue, -} +}) -const baseStyleField: SystemStyleObject = Input.baseStyle?.field ?? {} +const baseStyleField = defineStyle( + (props) => runIfFn(inputTheme.baseStyle, props)?.field ?? {}, +) -const baseStyleStepperGroup: SystemStyleObject = { +const baseStyleStepperGroup = defineStyle({ width: [$stepperWidth.reference], -} +}) -const baseStyleStepper: SystemStyleFunction = (props) => { +const baseStyleStepper = defineStyle((props) => { return { borderStart: "1px solid", borderStartColor: mode("inherit", "whiteAlpha.300")(props), @@ -40,19 +41,20 @@ const baseStyleStepper: SystemStyleFunction = (props) => { cursor: "not-allowed", }, } -} +}) -const baseStyle: PartsStyleFunction = (props) => ({ +const baseStyle = definePartsStyle((props) => ({ root: baseStyleRoot, - field: baseStyleField, + field: baseStyleField as any, stepperGroup: baseStyleStepperGroup, - stepper: baseStyleStepper(props), -}) + stepper: runIfFn(baseStyleStepper, props) ?? {}, +})) type FontSize = keyof typeof typography.fontSizes -function getSize(size: FontSize): PartsStyleObject { - const sizeStyle = Input.sizes[size] +function getSize(size: FontSize) { + //@ts-expect-error + const sizeStyle = inputTheme.sizes?.[size] const radius: Partial> = { lg: "md", @@ -64,7 +66,7 @@ function getSize(size: FontSize): PartsStyleObject { const _fontSize = (sizeStyle.field?.fontSize ?? "md") as FontSize const fontSize = typography.fontSizes[_fontSize] - return { + return definePartsStyle({ field: { ...sizeStyle.field, paddingInlineEnd: $inputPadding.reference, @@ -81,7 +83,7 @@ function getSize(size: FontSize): PartsStyleObject { borderTopWidth: 1, }, }, - } + }) } const sizes = { @@ -91,10 +93,9 @@ const sizes = { lg: getSize("lg"), } -export default { - parts: parts.keys, +export const numberInputTheme = defineMultiStyleConfig({ baseStyle, sizes, - variants, - defaultProps, -} + variants: inputTheme.variants, + defaultProps: inputTheme.defaultProps, +}) diff --git a/packages/theme/src/components/pin-input.ts b/packages/theme/src/components/pin-input.ts index 774bde6a477..9b94a926295 100644 --- a/packages/theme/src/components/pin-input.ts +++ b/packages/theme/src/components/pin-input.ts @@ -1,53 +1,55 @@ -import type { - SystemStyleInterpolation, - SystemStyleObject, -} from "@chakra-ui/styled-system" -import Input from "./input" +import { defineStyle, defineStyleConfig } from "@chakra-ui/styled-system" +import { inputTheme } from "./input" +import { runIfFn } from "../utils/run-if-fn" -const baseStyle: SystemStyleObject = { - ...Input.baseStyle.field, +const baseStyle = defineStyle({ + ...inputTheme.baseStyle?.field, textAlign: "center", -} +}) -const sizes: Record = { - lg: { +const sizes = { + lg: defineStyle({ fontSize: "lg", w: 12, h: 12, borderRadius: "md", - }, - md: { + }), + md: defineStyle({ fontSize: "md", w: 10, h: 10, borderRadius: "md", - }, - sm: { + }), + sm: defineStyle({ fontSize: "sm", w: 8, h: 8, borderRadius: "sm", - }, - xs: { + }), + xs: defineStyle({ fontSize: "xs", w: 6, h: 6, borderRadius: "sm", - }, + }), } -const variants: Record = { - outline: (props) => Input.variants.outline(props).field ?? {}, - flushed: (props) => Input.variants.flushed(props).field ?? {}, - filled: (props) => Input.variants.filled(props).field ?? {}, - unstyled: Input.variants.unstyled.field ?? {}, +const variants = { + outline: defineStyle( + (props) => runIfFn(inputTheme.variants?.outline, props)?.field ?? {}, + ), + flushed: defineStyle( + (props) => runIfFn(inputTheme.variants?.flushed, props)?.field ?? {}, + ), + filled: defineStyle( + (props) => runIfFn(inputTheme.variants?.filled, props)?.field ?? {}, + ), + unstyled: inputTheme.variants?.unstyled.field ?? {}, } -const defaultProps = Input.defaultProps - -export default { +export const pinInputTheme = defineStyleConfig({ baseStyle, sizes, variants, - defaultProps, -} + defaultProps: inputTheme.defaultProps, +}) diff --git a/packages/theme/src/components/popover.ts b/packages/theme/src/components/popover.ts index be604cd1f62..b2155240a08 100644 --- a/packages/theme/src/components/popover.ts +++ b/packages/theme/src/components/popover.ts @@ -1,21 +1,20 @@ import { popoverAnatomy as parts } from "@chakra-ui/anatomy" -import type { - PartsStyleFunction, - SystemStyleFunction, - SystemStyleObject, +import { + createMultiStyleConfigHelpers, + defineStyle, } from "@chakra-ui/styled-system" import { cssVar, mode } from "@chakra-ui/theme-tools" -const $popperBg = cssVar("popper-bg") +const { defineMultiStyleConfig, definePartsStyle } = + createMultiStyleConfigHelpers(parts.keys) +const $popperBg = cssVar("popper-bg") const $arrowBg = cssVar("popper-arrow-bg") const $arrowShadowColor = cssVar("popper-arrow-shadow-color") -const baseStylePopper: SystemStyleObject = { - zIndex: 10, -} +const baseStylePopper = defineStyle({ zIndex: 10 }) -const baseStyleContent: SystemStyleFunction = (props) => { +const baseStyleContent = defineStyle((props) => { const bg = mode("white", "gray.700")(props) const shadowColor = mode("gray.200", "whiteAlpha.300")(props) @@ -35,34 +34,34 @@ const baseStyleContent: SystemStyleFunction = (props) => { boxShadow: "outline", }, } -} +}) -const baseStyleHeader: SystemStyleObject = { +const baseStyleHeader = defineStyle({ px: 3, py: 2, borderBottomWidth: "1px", -} +}) -const baseStyleBody: SystemStyleObject = { +const baseStyleBody = defineStyle({ px: 3, py: 2, -} +}) -const baseStyleFooter: SystemStyleObject = { +const baseStyleFooter = defineStyle({ px: 3, py: 2, borderTopWidth: "1px", -} +}) -const baseStyleCloseButton: SystemStyleObject = { +const baseStyleCloseButton = defineStyle({ position: "absolute", borderRadius: "md", top: 1, insetEnd: 2, padding: 2, -} +}) -const baseStyle: PartsStyleFunction = (props) => ({ +const baseStyle = definePartsStyle((props) => ({ popper: baseStylePopper, content: baseStyleContent(props), header: baseStyleHeader, @@ -70,9 +69,8 @@ const baseStyle: PartsStyleFunction = (props) => ({ footer: baseStyleFooter, arrow: {}, closeButton: baseStyleCloseButton, -}) +})) -export default { - parts: parts.keys, +export const popoverTheme = defineMultiStyleConfig({ baseStyle, -} +}) diff --git a/packages/theme/src/components/progress.ts b/packages/theme/src/components/progress.ts index 324844d69a9..85380d8dc6b 100644 --- a/packages/theme/src/components/progress.ts +++ b/packages/theme/src/components/progress.ts @@ -1,14 +1,14 @@ import { progressAnatomy as parts } from "@chakra-ui/anatomy" import { - SystemStyleObject, - SystemStyleFunction, - PartsStyleFunction, - PartsStyleObject, - StyleFunctionProps, + createMultiStyleConfigHelpers, + defineStyle, } from "@chakra-ui/styled-system" import { generateStripe, getColor, mode } from "@chakra-ui/theme-tools" -function filledStyle(props: StyleFunctionProps): SystemStyleObject { +const { defineMultiStyleConfig, definePartsStyle } = + createMultiStyleConfigHelpers(parts.keys) + +const filledStyle = defineStyle((props) => { const { colorScheme: c, theme: t, isIndeterminate, hasStripe } = props const stripeStyle = mode( @@ -31,58 +31,55 @@ function filledStyle(props: StyleFunctionProps): SystemStyleObject { ...(addStripe && stripeStyle), ...(isIndeterminate ? { bgImage: gradient } : { bgColor }), } -} +}) -const baseStyleLabel: SystemStyleObject = { +const baseStyleLabel = defineStyle({ lineHeight: "1", fontSize: "0.25em", fontWeight: "bold", color: "white", -} +}) -const baseStyleTrack: SystemStyleFunction = (props) => { +const baseStyleTrack = defineStyle((props) => { return { bg: mode("gray.100", "whiteAlpha.300")(props), } -} +}) -const baseStyleFilledTrack: SystemStyleFunction = (props) => { +const baseStyleFilledTrack = defineStyle((props) => { return { transitionProperty: "common", transitionDuration: "slow", ...filledStyle(props), } -} +}) -const baseStyle: PartsStyleFunction = (props) => ({ +const baseStyle = definePartsStyle((props) => ({ label: baseStyleLabel, filledTrack: baseStyleFilledTrack(props), track: baseStyleTrack(props), -}) +})) -const sizes: Record> = { - xs: { +const sizes = { + xs: definePartsStyle({ track: { h: "0.25rem" }, - }, - sm: { + }), + sm: definePartsStyle({ track: { h: "0.5rem" }, - }, - md: { + }), + md: definePartsStyle({ track: { h: "0.75rem" }, - }, - lg: { + }), + lg: definePartsStyle({ track: { h: "1rem" }, - }, + }), } -const defaultProps = { - size: "md", - colorScheme: "blue", -} - -export default { - parts: parts.keys, +export const progressTheme = defineMultiStyleConfig({ sizes, baseStyle, - defaultProps, -} + defaultProps: { + size: "md", + colorScheme: "blue", + }, +}) diff --git a/packages/theme/src/components/radio.ts b/packages/theme/src/components/radio.ts index ba6518b5e4d..39c5d02bb6c 100644 --- a/packages/theme/src/components/radio.ts +++ b/packages/theme/src/components/radio.ts @@ -1,19 +1,22 @@ import { radioAnatomy as parts } from "@chakra-ui/anatomy" import { - PartsStyleFunction, - PartsStyleObject, - SystemStyleFunction, + createMultiStyleConfigHelpers, + defineStyle, } from "@chakra-ui/styled-system" -import Checkbox from "./checkbox" +import { runIfFn } from "../utils/run-if-fn" +import { checkboxTheme } from "./checkbox" -const baseStyleControl: SystemStyleFunction = (props) => { - const { control = {} } = Checkbox.baseStyle(props) +const { defineMultiStyleConfig, definePartsStyle } = + createMultiStyleConfigHelpers(parts.keys) + +const baseStyleControl = defineStyle((props) => { + const controlStyle = runIfFn(checkboxTheme.baseStyle, props)?.control return { - ...control, + ...controlStyle, borderRadius: "full", _checked: { - ...(control as any)["_checked"], + ...controlStyle?.["_checked"], _before: { content: `""`, display: "inline-block", @@ -25,37 +28,34 @@ const baseStyleControl: SystemStyleFunction = (props) => { }, }, } -} +}) -const baseStyle: PartsStyleFunction = (props) => ({ - label: Checkbox.baseStyle(props).label, - container: Checkbox.baseStyle(props).container, +const baseStyle = definePartsStyle((props) => ({ + label: checkboxTheme.baseStyle?.(props).label, + container: checkboxTheme.baseStyle?.(props).container, control: baseStyleControl(props), -}) +})) -const sizes: Record> = { - md: { +const sizes = { + md: definePartsStyle({ control: { w: 4, h: 4 }, label: { fontSize: "md" }, - }, - lg: { + }), + lg: definePartsStyle({ control: { w: 5, h: 5 }, label: { fontSize: "lg" }, - }, - sm: { + }), + sm: definePartsStyle({ control: { width: 3, height: 3 }, label: { fontSize: "sm" }, - }, -} - -const defaultProps = { - size: "md", - colorScheme: "blue", + }), } -export default { - parts: parts.keys, +export const radioTheme = defineMultiStyleConfig({ baseStyle, sizes, - defaultProps, -} + defaultProps: { + size: "md", + colorScheme: "blue", + }, +}) diff --git a/packages/theme/src/components/select.ts b/packages/theme/src/components/select.ts index e3a7156d8b8..5bfde93e415 100644 --- a/packages/theme/src/components/select.ts +++ b/packages/theme/src/components/select.ts @@ -1,17 +1,17 @@ import { selectAnatomy as parts } from "@chakra-ui/anatomy" -import type { - PartsStyleFunction, - PartsStyleObject, - SystemStyleFunction, - SystemStyleObject, +import { + createMultiStyleConfigHelpers, + defineStyle, } from "@chakra-ui/styled-system" -import { mergeWith } from "@chakra-ui/utils" import { mode } from "@chakra-ui/theme-tools" -import Input from "./input" +import { inputTheme } from "./input" -const baseStyleField: SystemStyleFunction = (props) => { +const { defineMultiStyleConfig, definePartsStyle } = + createMultiStyleConfigHelpers(parts.keys) + +const baseStyleField = defineStyle((props) => { return { - ...Input.baseStyle.field, + ...inputTheme.baseStyle?.field, bg: mode("white", "gray.700")(props), appearance: "none", paddingBottom: "1px", @@ -20,9 +20,9 @@ const baseStyleField: SystemStyleFunction = (props) => { bg: mode("white", "gray.700")(props), }, } -} +}) -const baseStyleIcon: SystemStyleObject = { +const baseStyleIcon = defineStyle({ width: "1.5rem", height: "100%", insetEnd: "0.5rem", @@ -32,39 +32,54 @@ const baseStyleIcon: SystemStyleObject = { _disabled: { opacity: 0.5, }, -} +}) -const baseStyle: PartsStyleFunction = (props) => ({ +const baseStyle = definePartsStyle((props) => ({ field: baseStyleField(props), icon: baseStyleIcon, -}) +})) -const iconSpacing = { paddingInlineEnd: "2rem" } +const iconSpacing = defineStyle({ + paddingInlineEnd: "2rem", +}) -const sizes: Record> = mergeWith( - {}, - Input.sizes, - { - lg: { - field: iconSpacing, +const sizes = { + lg: { + ...inputTheme.sizes?.lg, + field: { + ...inputTheme.sizes?.lg.field, + ...iconSpacing, }, - md: { - field: iconSpacing, + }, + md: { + ...inputTheme.sizes?.md, + field: { + ...inputTheme.sizes?.md.field, + ...iconSpacing, + }, + }, + sm: { + ...inputTheme.sizes?.sm, + field: { + ...inputTheme.sizes?.sm.field, + ...iconSpacing, }, - sm: { - field: iconSpacing, + }, + xs: { + ...inputTheme.sizes?.xs, + field: { + ...inputTheme.sizes?.sm.field, + ...iconSpacing, }, - xs: { - field: iconSpacing, - icon: { insetEnd: "0.25rem" }, + icon: { + insetEnd: "0.25rem", }, }, -) +} -export default { - parts: parts.keys, +export const selectTheme = defineMultiStyleConfig({ baseStyle, sizes, - variants: Input.variants, - defaultProps: Input.defaultProps, -} + variants: inputTheme.variants, + defaultProps: inputTheme.defaultProps, +}) diff --git a/packages/theme/src/components/skeleton.ts b/packages/theme/src/components/skeleton.ts index 51ced315ee5..ae574d28f3d 100644 --- a/packages/theme/src/components/skeleton.ts +++ b/packages/theme/src/components/skeleton.ts @@ -1,10 +1,14 @@ -import type { SystemStyleFunction } from "@chakra-ui/styled-system" -import { getColor, mode, cssVar } from "@chakra-ui/theme-tools" +import { + cssVar, + defineStyle, + defineStyleConfig, +} from "@chakra-ui/styled-system" +import { getColor, mode } from "@chakra-ui/theme-tools" const $startColor = cssVar("skeleton-start-color") const $endColor = cssVar("skeleton-end-color") -const baseStyle: SystemStyleFunction = (props) => { +const baseStyle = defineStyle((props) => { const defaultStartColor = mode("gray.100", "gray.800")(props) const defaultEndColor = mode("gray.400", "gray.600")(props) @@ -25,8 +29,8 @@ const baseStyle: SystemStyleFunction = (props) => { borderColor: start, background: end, } -} +}) -export default { +export const skeletonTheme = defineStyleConfig({ baseStyle, -} +}) diff --git a/packages/theme/src/components/skip-link.ts b/packages/theme/src/components/skip-link.ts index aa86479c36c..014f74bd84f 100644 --- a/packages/theme/src/components/skip-link.ts +++ b/packages/theme/src/components/skip-link.ts @@ -1,7 +1,7 @@ -import type { SystemStyleFunction } from "@chakra-ui/styled-system" +import { defineStyle, defineStyleConfig } from "@chakra-ui/styled-system" import { mode } from "@chakra-ui/theme-tools" -const baseStyle: SystemStyleFunction = (props) => ({ +const baseStyle = defineStyle((props) => ({ borderRadius: "md", fontWeight: "semibold", _focusVisible: { @@ -12,8 +12,8 @@ const baseStyle: SystemStyleFunction = (props) => ({ insetStart: "1.5rem", bg: mode("white", "gray.700")(props), }, -}) +})) -export default { +export const skipLinkTheme = defineStyleConfig({ baseStyle, -} +}) diff --git a/packages/theme/src/components/slider.ts b/packages/theme/src/components/slider.ts index d817d8844db..4dabd494f64 100644 --- a/packages/theme/src/components/slider.ts +++ b/packages/theme/src/components/slider.ts @@ -1,33 +1,14 @@ import { sliderAnatomy as parts } from "@chakra-ui/anatomy" -import type { - PartsStyleFunction, - StyleFunctionProps, - SystemStyleFunction, - SystemStyleObject, +import { + createMultiStyleConfigHelpers, + defineStyle, } from "@chakra-ui/styled-system" import { mode, orient } from "@chakra-ui/theme-tools" -function thumbOrientation(props: StyleFunctionProps): SystemStyleObject { - return orient({ - orientation: props.orientation, - vertical: { - left: "50%", - transform: `translateX(-50%)`, - _active: { - transform: `translateX(-50%) scale(1.15)`, - }, - }, - horizontal: { - top: "50%", - transform: `translateY(-50%)`, - _active: { - transform: `translateY(-50%) scale(1.15)`, - }, - }, - }) -} +const { defineMultiStyleConfig, definePartsStyle } = + createMultiStyleConfigHelpers(parts.keys) -const baseStyleContainer: SystemStyleFunction = (props) => { +const baseStyleContainer = defineStyle((props) => { const { orientation } = props return { @@ -45,9 +26,9 @@ const baseStyleContainer: SystemStyleFunction = (props) => { horizontal: { w: "100%" }, }), } -} +}) -const baseStyleTrack: SystemStyleFunction = (props) => { +const baseStyleTrack = defineStyle((props) => { return { overflow: "hidden", borderRadius: "sm", @@ -56,9 +37,28 @@ const baseStyleTrack: SystemStyleFunction = (props) => { bg: mode("gray.300", "whiteAlpha.300")(props), }, } -} +}) + +const baseStyleThumb = defineStyle((props) => { + const { orientation } = props + const orientationStyle = orient({ + orientation, + vertical: { + left: "50%", + transform: `translateX(-50%)`, + _active: { + transform: `translateX(-50%) scale(1.15)`, + }, + }, + horizontal: { + top: "50%", + transform: `translateY(-50%)`, + _active: { + transform: `translateY(-50%) scale(1.15)`, + }, + }, + }) -const baseStyleThumb: SystemStyleFunction = (props) => { return { display: "flex", alignItems: "center", @@ -75,11 +75,11 @@ const baseStyleThumb: SystemStyleFunction = (props) => { transitionDuration: "normal", _focusVisible: { boxShadow: "outline" }, _disabled: { bg: "gray.300" }, - ...thumbOrientation(props), + ...orientationStyle, } -} +}) -const baseStyleFilledTrack: SystemStyleFunction = (props) => { +const baseStyleFilledTrack = defineStyle((props) => { const { colorScheme: c } = props return { @@ -87,16 +87,16 @@ const baseStyleFilledTrack: SystemStyleFunction = (props) => { height: "inherit", bg: mode(`${c}.500`, `${c}.200`)(props), } -} +}) -const baseStyle: PartsStyleFunction = (props) => ({ +const baseStyle = definePartsStyle((props) => ({ container: baseStyleContainer(props), track: baseStyleTrack(props), thumb: baseStyleThumb(props), filledTrack: baseStyleFilledTrack(props), -}) +})) -const sizeLg: PartsStyleFunction = (props) => { +const sizeLg = definePartsStyle((props) => { return { thumb: { w: "16px", h: "16px" }, track: orient({ @@ -105,9 +105,9 @@ const sizeLg: PartsStyleFunction = (props) => { vertical: { w: "4px" }, }), } -} +}) -const sizeMd: PartsStyleFunction = (props) => { +const sizeMd = definePartsStyle((props) => { return { thumb: { w: "14px", h: "14px" }, track: orient({ @@ -116,9 +116,9 @@ const sizeMd: PartsStyleFunction = (props) => { vertical: { w: "4px" }, }), } -} +}) -const sizeSm: PartsStyleFunction = (props) => { +const sizeSm = definePartsStyle((props) => { return { thumb: { w: "10px", h: "10px" }, track: orient({ @@ -127,7 +127,7 @@ const sizeSm: PartsStyleFunction = (props) => { vertical: { w: "2px" }, }), } -} +}) const sizes = { lg: sizeLg, @@ -135,14 +135,11 @@ const sizes = { sm: sizeSm, } -const defaultProps = { - size: "md", - colorScheme: "blue", -} - -export default { - parts: parts.keys, - sizes, +export const sliderTheme = defineMultiStyleConfig({ baseStyle, - defaultProps, -} + sizes, + defaultProps: { + size: "md", + colorScheme: "blue", + }, +}) diff --git a/packages/theme/src/components/spinner.ts b/packages/theme/src/components/spinner.ts index d0655cc5c8f..857262e225c 100644 --- a/packages/theme/src/components/spinner.ts +++ b/packages/theme/src/components/spinner.ts @@ -1,37 +1,35 @@ -import { SystemStyleObject } from "@chakra-ui/styled-system" +import { defineStyle, defineStyleConfig } from "@chakra-ui/styled-system" import { cssVar } from "@chakra-ui/theme-tools" const $size = cssVar("spinner-size") -const baseStyle: SystemStyleObject = { +const baseStyle = defineStyle({ width: [$size.reference], height: [$size.reference], -} +}) -const sizes: Record = { - xs: { +const sizes = { + xs: defineStyle({ [$size.variable]: "0.75rem", - }, - sm: { + }), + sm: defineStyle({ [$size.variable]: "1rem", - }, - md: { + }), + md: defineStyle({ [$size.variable]: "1.5rem", - }, - lg: { + }), + lg: defineStyle({ [$size.variable]: "2rem", - }, - xl: { + }), + xl: defineStyle({ [$size.variable]: "3rem", - }, -} - -const defaultProps = { - size: "md", + }), } -export default { +export const spinnerTheme = defineStyleConfig({ baseStyle, sizes, - defaultProps, -} + defaultProps: { + size: "md", + }, +}) diff --git a/packages/theme/src/components/stat.ts b/packages/theme/src/components/stat.ts index 39431a91fc9..a809f122645 100644 --- a/packages/theme/src/components/stat.ts +++ b/packages/theme/src/components/stat.ts @@ -1,53 +1,53 @@ import { statAnatomy as parts } from "@chakra-ui/anatomy" -import type { - PartsStyleObject, - SystemStyleObject, +import { + createMultiStyleConfigHelpers, + defineStyle, } from "@chakra-ui/styled-system" -const baseStyleLabel: SystemStyleObject = { +const { defineMultiStyleConfig, definePartsStyle } = + createMultiStyleConfigHelpers(parts.keys) + +const baseStyleLabel = defineStyle({ fontWeight: "medium", -} +}) -const baseStyleHelpText: SystemStyleObject = { +const baseStyleHelpText = defineStyle({ opacity: 0.8, marginBottom: 2, -} +}) -const baseStyleNumber: SystemStyleObject = { +const baseStyleNumber = defineStyle({ verticalAlign: "baseline", fontWeight: "semibold", -} +}) -const baseStyleIcon: SystemStyleObject = { +const baseStyleIcon = defineStyle({ marginEnd: 1, w: "14px", h: "14px", verticalAlign: "middle", -} +}) -const baseStyle: PartsStyleObject = { +const baseStyle = definePartsStyle({ container: {}, label: baseStyleLabel, helpText: baseStyleHelpText, number: baseStyleNumber, icon: baseStyleIcon, -} +}) -const sizes: Record> = { - md: { +const sizes = { + md: definePartsStyle({ label: { fontSize: "sm" }, helpText: { fontSize: "sm" }, number: { fontSize: "2xl" }, - }, -} - -const defaultProps = { - size: "md", + }), } -export default { - parts: parts.keys, +export const statTheme = defineMultiStyleConfig({ baseStyle, sizes, - defaultProps, -} + defaultProps: { + size: "md", + }, +}) diff --git a/packages/theme/src/components/switch.ts b/packages/theme/src/components/switch.ts index aae36af3c08..fae1e36a0ba 100644 --- a/packages/theme/src/components/switch.ts +++ b/packages/theme/src/components/switch.ts @@ -1,21 +1,20 @@ import { switchAnatomy as parts } from "@chakra-ui/anatomy" -import type { - PartsStyleFunction, - PartsStyleObject, - SystemStyleFunction, - SystemStyleObject, +import { + createMultiStyleConfigHelpers, + defineStyle, } from "@chakra-ui/styled-system" import { calc, cssVar, mode } from "@chakra-ui/theme-tools" +const { defineMultiStyleConfig, definePartsStyle } = + createMultiStyleConfigHelpers(parts.keys) + const $width = cssVar("switch-track-width") const $height = cssVar("switch-track-height") - const $diff = cssVar("switch-track-diff") const diffValue = calc.subtract($width, $height) - const $translateX = cssVar("switch-thumb-x") -const baseStyleTrack: SystemStyleFunction = (props) => { +const baseStyleTrack = defineStyle((props) => { const { colorScheme: c } = props return { @@ -37,9 +36,9 @@ const baseStyleTrack: SystemStyleFunction = (props) => { bg: mode(`${c}.500`, `${c}.200`)(props), }, } -} +}) -const baseStyleThumb: SystemStyleObject = { +const baseStyleThumb = defineStyle({ bg: "white", transitionProperty: "transform", transitionDuration: "normal", @@ -49,9 +48,9 @@ const baseStyleThumb: SystemStyleObject = { _checked: { transform: `translateX(${$translateX.reference})`, }, -} +}) -const baseStyle: PartsStyleFunction = (props) => ({ +const baseStyle = definePartsStyle((props) => ({ container: { [$diff.variable]: diffValue, [$translateX.variable]: $diff.reference, @@ -61,37 +60,34 @@ const baseStyle: PartsStyleFunction = (props) => ({ }, track: baseStyleTrack(props), thumb: baseStyleThumb, -}) +})) -const sizes: Record> = { - sm: { +const sizes = { + sm: definePartsStyle({ container: { [$width.variable]: "1.375rem", [$height.variable]: "0.75rem", }, - }, - md: { + }), + md: definePartsStyle({ container: { [$width.variable]: "1.875rem", [$height.variable]: "1rem", }, - }, - lg: { + }), + lg: definePartsStyle({ container: { [$width.variable]: "2.875rem", [$height.variable]: "1.5rem", }, - }, -} - -const defaultProps = { - size: "md", - colorScheme: "blue", + }), } -export default { - parts: parts.keys, +export const switchTheme = defineMultiStyleConfig({ baseStyle, sizes, - defaultProps, -} + defaultProps: { + size: "md", + colorScheme: "blue", + }, +}) diff --git a/packages/theme/src/components/table.ts b/packages/theme/src/components/table.ts index 8b1445c9d70..a6a5f618f23 100644 --- a/packages/theme/src/components/table.ts +++ b/packages/theme/src/components/table.ts @@ -1,12 +1,14 @@ import { tableAnatomy as parts } from "@chakra-ui/anatomy" -import { mode } from "@chakra-ui/theme-tools" -import type { - PartsStyleFunction, - PartsStyleObject, - SystemStyleObject, +import { + createMultiStyleConfigHelpers, + defineStyle, } from "@chakra-ui/styled-system" +import { mode } from "@chakra-ui/theme-tools" -const baseStyle: PartsStyleObject = { +const { defineMultiStyleConfig, definePartsStyle } = + createMultiStyleConfigHelpers(parts.keys) + +const baseStyle = definePartsStyle({ table: { fontVariantNumeric: "lining-nums tabular-nums", borderCollapse: "collapse", @@ -28,15 +30,15 @@ const baseStyle: PartsStyleObject = { textAlign: "center", fontWeight: "medium", }, -} +}) -const numericStyles: SystemStyleObject = { +const numericStyles = defineStyle({ "&[data-is-numeric=true]": { textAlign: "end", }, -} +}) -const variantSimple: PartsStyleFunction = (props) => { +const variantSimple = definePartsStyle((props) => { const { colorScheme: c } = props return { @@ -62,9 +64,9 @@ const variantSimple: PartsStyleFunction = (props) => { }, }, } -} +}) -const variantStripe: PartsStyleFunction = (props) => { +const variantStripe = definePartsStyle((props) => { const { colorScheme: c } = props return { @@ -103,16 +105,16 @@ const variantStripe: PartsStyleFunction = (props) => { }, }, } -} +}) const variants = { simple: variantSimple, striped: variantStripe, - unstyled: {}, + unstyled: defineStyle({}), } -const sizes: Record> = { - sm: { +const sizes = { + sm: definePartsStyle({ th: { px: "4", py: "1", @@ -130,8 +132,8 @@ const sizes: Record> = { py: "2", fontSize: "xs", }, - }, - md: { + }), + md: definePartsStyle({ th: { px: "6", py: "3", @@ -148,8 +150,8 @@ const sizes: Record> = { py: "2", fontSize: "sm", }, - }, - lg: { + }), + lg: definePartsStyle({ th: { px: "8", py: "4", @@ -166,19 +168,16 @@ const sizes: Record> = { py: "2", fontSize: "md", }, - }, + }), } -const defaultProps = { - variant: "simple", - size: "md", - colorScheme: "gray", -} - -export default { - parts: parts.keys, +export const tableTheme = defineMultiStyleConfig({ baseStyle, variants, sizes, - defaultProps, -} + defaultProps: { + variant: "simple", + size: "md", + colorScheme: "gray", + }, +}) diff --git a/packages/theme/src/components/tabs.ts b/packages/theme/src/components/tabs.ts index 9768f0a5741..a81a76419d1 100644 --- a/packages/theme/src/components/tabs.ts +++ b/packages/theme/src/components/tabs.ts @@ -1,21 +1,21 @@ import { tabsAnatomy as parts } from "@chakra-ui/anatomy" -import type { - PartsStyleFunction, - PartsStyleInterpolation, - PartsStyleObject, - SystemStyleFunction, - SystemStyleObject, +import { + createMultiStyleConfigHelpers, + defineStyle, } from "@chakra-ui/styled-system" import { getColor, mode } from "@chakra-ui/theme-tools" -const baseStyleRoot: SystemStyleFunction = (props) => { +const { defineMultiStyleConfig, definePartsStyle } = + createMultiStyleConfigHelpers(parts.keys) + +const baseStyleRoot = defineStyle((props) => { const { orientation } = props return { display: orientation === "vertical" ? "flex" : "block", } -} +}) -const baseStyleTab: SystemStyleFunction = (props) => { +const baseStyleTab = defineStyle((props) => { const { isFitted } = props return { @@ -31,9 +31,9 @@ const baseStyleTab: SystemStyleFunction = (props) => { opacity: 0.4, }, } -} +}) -const baseStyleTablist: SystemStyleFunction = (props) => { +const baseStyleTablist = defineStyle((props) => { const { align = "start", orientation } = props const alignments: Record = { @@ -46,44 +46,44 @@ const baseStyleTablist: SystemStyleFunction = (props) => { justifyContent: alignments[align], flexDirection: orientation === "vertical" ? "column" : "row", } -} +}) -const baseStyleTabpanel: SystemStyleObject = { +const baseStyleTabpanel = defineStyle({ p: 4, -} +}) -const baseStyle: PartsStyleFunction = (props) => ({ +const baseStyle = definePartsStyle((props) => ({ root: baseStyleRoot(props), tab: baseStyleTab(props), tablist: baseStyleTablist(props), tabpanel: baseStyleTabpanel, -}) +})) -const sizes: Record> = { - sm: { +const sizes = { + sm: definePartsStyle({ tab: { py: 1, px: 4, fontSize: "sm", }, - }, - md: { + }), + md: definePartsStyle({ tab: { fontSize: "md", py: 2, px: 4, }, - }, - lg: { + }), + lg: definePartsStyle({ tab: { fontSize: "lg", py: 3, px: 4, }, - }, + }), } -const variantLine: PartsStyleFunction = (props) => { +const variantLine = definePartsStyle((props) => { const { colorScheme: c, orientation } = props const isVertical = orientation === "vertical" const borderProp = orientation === "vertical" ? "borderStart" : "borderBottom" @@ -110,9 +110,9 @@ const variantLine: PartsStyleFunction = (props) => { }, }, } -} +}) -const variantEnclosed: PartsStyleFunction = (props) => { +const variantEnclosed = definePartsStyle((props) => { const { colorScheme: c } = props return { tab: { @@ -132,9 +132,9 @@ const variantEnclosed: PartsStyleFunction = (props) => { borderColor: "inherit", }, } -} +}) -const variantEnclosedColored: PartsStyleFunction = (props) => { +const variantEnclosedColored = definePartsStyle((props) => { const { colorScheme: c } = props return { tab: { @@ -159,9 +159,9 @@ const variantEnclosedColored: PartsStyleFunction = (props) => { borderColor: "inherit", }, } -} +}) -const variantSoftRounded: PartsStyleFunction = (props) => { +const variantSoftRounded = definePartsStyle((props) => { const { colorScheme: c, theme } = props return { tab: { @@ -174,9 +174,9 @@ const variantSoftRounded: PartsStyleFunction = (props) => { }, }, } -} +}) -const variantSolidRounded: PartsStyleFunction = (props) => { +const variantSolidRounded = definePartsStyle((props) => { const { colorScheme: c } = props return { tab: { @@ -189,11 +189,11 @@ const variantSolidRounded: PartsStyleFunction = (props) => { }, }, } -} +}) -const variantUnstyled: PartsStyleObject = {} +const variantUnstyled = definePartsStyle({}) -const variants: Record> = { +const variants = { line: variantLine, enclosed: variantEnclosed, "enclosed-colored": variantEnclosedColored, @@ -202,16 +202,13 @@ const variants: Record> = { unstyled: variantUnstyled, } -const defaultProps = { - size: "md", - variant: "line", - colorScheme: "blue", -} - -export default { - parts: parts.keys, +export const tabsTheme = defineMultiStyleConfig({ baseStyle, sizes, variants, - defaultProps, -} + defaultProps: { + size: "md", + variant: "line", + colorScheme: "blue", + }, +}) diff --git a/packages/theme/src/components/tag.ts b/packages/theme/src/components/tag.ts index db2294eae7f..bce2b94c226 100644 --- a/packages/theme/src/components/tag.ts +++ b/packages/theme/src/components/tag.ts @@ -1,12 +1,14 @@ import { tagAnatomy as parts } from "@chakra-ui/anatomy" -import type { - PartsStyleInterpolation, - PartsStyleObject, - SystemStyleObject, +import { + createMultiStyleConfigHelpers, + defineStyle, } from "@chakra-ui/styled-system" -import Badge from "./badge" +import { badgeTheme } from "./badge" -const baseStyleContainer: SystemStyleObject = { +const { defineMultiStyleConfig, definePartsStyle } = + createMultiStyleConfigHelpers(parts.keys) + +const baseStyleContainer = defineStyle({ fontWeight: "medium", lineHeight: 1.2, outline: 0, @@ -14,14 +16,14 @@ const baseStyleContainer: SystemStyleObject = { _focusVisible: { boxShadow: "outline", }, -} +}) -const baseStyleLabel: SystemStyleObject = { +const baseStyleLabel = defineStyle({ lineHeight: 1.2, overflow: "visible", -} +}) -const baseStyleCloseButton: SystemStyleObject = { +const baseStyleCloseButton = defineStyle({ fontSize: "18px", w: "1.25rem", h: "1.25rem", @@ -40,16 +42,16 @@ const baseStyleCloseButton: SystemStyleObject = { }, _hover: { opacity: 0.8 }, _active: { opacity: 1 }, -} +}) -const baseStyle: PartsStyleObject = { +const baseStyle = definePartsStyle({ container: baseStyleContainer, label: baseStyleLabel, closeButton: baseStyleCloseButton, -} +}) -const sizes: Record> = { - sm: { +const sizes = { + sm: definePartsStyle({ container: { minH: "1.25rem", minW: "1.25rem", @@ -60,47 +62,44 @@ const sizes: Record> = { marginEnd: "-2px", marginStart: "0.35rem", }, - }, - md: { + }), + md: definePartsStyle({ container: { minH: "1.5rem", minW: "1.5rem", fontSize: "sm", px: 2, }, - }, - lg: { + }), + lg: definePartsStyle({ container: { minH: 8, minW: 8, fontSize: "md", px: 3, }, - }, -} - -const variants: Record> = { - subtle: (props) => ({ - container: Badge.variants.subtle(props), - }), - solid: (props) => ({ - container: Badge.variants.solid(props), - }), - outline: (props) => ({ - container: Badge.variants.outline(props), }), } -const defaultProps = { - size: "md", - variant: "subtle", - colorScheme: "gray", +const variants = { + subtle: definePartsStyle((props) => ({ + container: badgeTheme.variants?.subtle(props), + })), + solid: definePartsStyle((props) => ({ + container: badgeTheme.variants?.solid(props), + })), + outline: definePartsStyle((props) => ({ + container: badgeTheme.variants?.outline(props), + })), } -export default { - parts: parts.keys, +export const tagTheme = defineMultiStyleConfig({ variants, baseStyle, sizes, - defaultProps, -} + defaultProps: { + size: "md", + variant: "subtle", + colorScheme: "gray", + }, +}) diff --git a/packages/theme/src/components/textarea.ts b/packages/theme/src/components/textarea.ts index cf68b44f07d..fa7cbf6b0d7 100644 --- a/packages/theme/src/components/textarea.ts +++ b/packages/theme/src/components/textarea.ts @@ -1,39 +1,40 @@ -import type { - SystemStyleInterpolation, - SystemStyleObject, -} from "@chakra-ui/styled-system" -import Input from "./input" +import { defineStyle, defineStyleConfig } from "@chakra-ui/styled-system" +import { inputTheme } from "./input" -const baseStyle: SystemStyleObject = { - ...Input.baseStyle.field, +const baseStyle = defineStyle({ + ...inputTheme.baseStyle?.field, paddingY: "8px", minHeight: "80px", lineHeight: "short", verticalAlign: "top", -} - -const variants: Record = { - outline: (props) => Input.variants.outline(props).field ?? {}, - flushed: (props) => Input.variants.flushed(props).field ?? {}, - filled: (props) => Input.variants.filled(props).field ?? {}, - unstyled: Input.variants.unstyled.field ?? {}, -} +}) -const sizes: Record = { - xs: Input.sizes.xs.field ?? {}, - sm: Input.sizes.sm.field ?? {}, - md: Input.sizes.md.field ?? {}, - lg: Input.sizes.lg.field ?? {}, +const variants = { + outline: defineStyle( + (props) => inputTheme.variants?.outline(props).field ?? {}, + ), + flushed: defineStyle( + (props) => inputTheme.variants?.flushed(props).field ?? {}, + ), + filled: defineStyle( + (props) => inputTheme.variants?.filled(props).field ?? {}, + ), + unstyled: inputTheme.variants?.unstyled.field ?? {}, } -const defaultProps = { - size: "md", - variant: "outline", +const sizes = { + xs: inputTheme.sizes?.xs.field ?? {}, + sm: inputTheme.sizes?.sm.field ?? {}, + md: inputTheme.sizes?.md.field ?? {}, + lg: inputTheme.sizes?.lg.field ?? {}, } -export default { +export const textareaTheme = defineStyleConfig({ baseStyle, sizes, variants, - defaultProps, -} + defaultProps: { + size: "md", + variant: "outline", + }, +}) diff --git a/packages/theme/src/components/tooltip.ts b/packages/theme/src/components/tooltip.ts index 1ee5ac61f68..ce561ef2088 100644 --- a/packages/theme/src/components/tooltip.ts +++ b/packages/theme/src/components/tooltip.ts @@ -1,10 +1,10 @@ -import { SystemStyleFunction } from "@chakra-ui/styled-system" -import { mode, cssVar } from "@chakra-ui/theme-tools" +import { defineStyle, defineStyleConfig } from "@chakra-ui/styled-system" +import { cssVar, mode } from "@chakra-ui/theme-tools" const $bg = cssVar("tooltip-bg") const $arrowBg = cssVar("popper-arrow-bg") -const baseStyle: SystemStyleFunction = (props) => { +const baseStyle = defineStyle((props) => { const bg = mode("gray.700", "gray.300")(props) return { [$bg.variable]: `colors.${bg}`, @@ -20,8 +20,8 @@ const baseStyle: SystemStyleFunction = (props) => { maxW: "320px", zIndex: "tooltip", } -} +}) -export default { +export const tooltipTheme = defineStyleConfig({ baseStyle, -} +}) diff --git a/packages/theme/src/foundations/breakpoints.ts b/packages/theme/src/foundations/breakpoints.ts index 8d6a94d9379..872bbfbe13f 100644 --- a/packages/theme/src/foundations/breakpoints.ts +++ b/packages/theme/src/foundations/breakpoints.ts @@ -1,6 +1,3 @@ -/** - * Breakpoints for responsive design - */ const breakpoints = { base: "0em", sm: "30em", diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts index e5c8a588a21..db11c7bb6d1 100644 --- a/packages/theme/src/index.ts +++ b/packages/theme/src/index.ts @@ -24,6 +24,6 @@ export const theme = { export type Theme = typeof theme export * from "./theme.types" -export * from "./utils" +export * from "./utils/is-chakra-theme" export default theme diff --git a/packages/theme/src/theme.types.ts b/packages/theme/src/theme.types.ts index 21524a982c5..2cf8d539e6a 100644 --- a/packages/theme/src/theme.types.ts +++ b/packages/theme/src/theme.types.ts @@ -7,9 +7,9 @@ import type { ThemingProps, } from "@chakra-ui/styled-system" import { Styles } from "@chakra-ui/theme-tools" -import type { Dict } from "@chakra-ui/utils" type ColorMode = "light" | "dark" +type Dict = Record type ColorModeOptions = { initialColorMode?: "light" | "dark" | "system" @@ -80,7 +80,7 @@ export interface ComponentSingleStyleConfig { baseStyle?: SystemStyleInterpolation sizes?: Record variants?: Record - defaultProps?: ComponentDefaultProps + defaultProps?: any } export interface ComponentMultiStyleConfig { @@ -88,7 +88,7 @@ export interface ComponentMultiStyleConfig { baseStyle?: PartsStyleInterpolation sizes?: Record variants?: Record - defaultProps?: ComponentDefaultProps + defaultProps?: any } export type ComponentStyleConfig = diff --git a/packages/theme/src/utils.ts b/packages/theme/src/utils/is-chakra-theme.ts similarity index 84% rename from packages/theme/src/utils.ts rename to packages/theme/src/utils/is-chakra-theme.ts index 69d236594a0..d6947d67c44 100644 --- a/packages/theme/src/utils.ts +++ b/packages/theme/src/utils/is-chakra-theme.ts @@ -1,5 +1,5 @@ -import { isObject } from "@chakra-ui/utils" -import type { ChakraTheme } from "./theme.types" +import { isObject } from "@chakra-ui/shared-utils" +import type { ChakraTheme } from "../theme.types" export const requiredChakraThemeKeys: (keyof ChakraTheme)[] = [ "borders", diff --git a/packages/theme/src/utils/run-if-fn.ts b/packages/theme/src/utils/run-if-fn.ts new file mode 100644 index 00000000000..e1a741d6630 --- /dev/null +++ b/packages/theme/src/utils/run-if-fn.ts @@ -0,0 +1,9 @@ +const isFunction = (value: any): value is Function => + typeof value === "function" + +export function runIfFn( + valueOrFn: T | ((...fnArgs: U[]) => T), + ...args: U[] +): T { + return isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 414fa5a0099..46fa873c8ce 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1602,29 +1602,33 @@ importers: specifiers: '@chakra-ui/anatomy': workspace:* '@chakra-ui/cli': workspace:* + '@chakra-ui/shared-utils': workspace:* '@chakra-ui/styled-system': workspace:* '@chakra-ui/theme-tools': workspace:* - '@chakra-ui/utils': workspace:* dependencies: '@chakra-ui/anatomy': link:../anatomy '@chakra-ui/theme-tools': link:../theme-tools - '@chakra-ui/utils': link:../utils devDependencies: '@chakra-ui/cli': link:../../tooling/cli + '@chakra-ui/shared-utils': link:../../utilities/shared-utils '@chakra-ui/styled-system': link:../styled-system packages/theme-tools: specifiers: '@chakra-ui/anatomy': workspace:* + '@chakra-ui/shared-utils': workspace:* '@chakra-ui/styled-system': workspace:* - '@chakra-ui/utils': workspace:* '@ctrl/tinycolor': ^3.4.0 + '@types/dlv': ^1.1.2 + dlv: ^1.1.3 dependencies: '@chakra-ui/anatomy': link:../anatomy - '@chakra-ui/utils': link:../utils '@ctrl/tinycolor': 3.4.1 devDependencies: + '@chakra-ui/shared-utils': link:../../utilities/shared-utils '@chakra-ui/styled-system': link:../styled-system + '@types/dlv': 1.1.2 + dlv: 1.1.3 packages/toast: specifiers: @@ -8663,6 +8667,10 @@ packages: /@types/debug/0.0.30: resolution: {integrity: sha512-orGL5LXERPYsLov6CWs3Fh6203+dXzJkR7OnddIr2514Hsecwc8xRpzCapshBbKFImCsvS/mk6+FWiN5LyZJAQ==} + /@types/dlv/1.1.2: + resolution: {integrity: sha512-OyiZ3jEKu7RtGO1yp9oOdK0cTwZ/10oE9PDJ6fyN3r9T5wkyOcvr6awdugjYdqF6KVO5eUvt7jx7rk2Eylufow==} + dev: true + /@types/edit-json-file/1.7.0: resolution: {integrity: sha512-yZrbGD4Qp92s6xU80MWBdz9vJE8k8EbO+gLWYb4W1UL9WYVUMOtUr5zvKlKgbcc2veYmFLO9dPnYA9Mxul0lOw==} dependencies: diff --git a/tooling/storybook-addon/src/feature/arg-types.ts b/tooling/storybook-addon/src/feature/arg-types.ts index c56fe460a53..3deeb3cd5dc 100644 --- a/tooling/storybook-addon/src/feature/arg-types.ts +++ b/tooling/storybook-addon/src/feature/arg-types.ts @@ -1,5 +1,5 @@ import type { ArgTypes } from "@storybook/react" -import type { ThemingProps, ThemeComponents } from "@chakra-ui/react" +import type { ThemingProps } from "@chakra-ui/react" /** * `keyof` alternative which omits non-string keys @@ -65,8 +65,8 @@ function validateColorScheme(value: object) { */ export function getThemingArgTypes< Theme extends { - colors: object - components: ThemeComponents + colors: Record + components: Record }, ComponentName extends KeyOf, >(theme: Theme, componentName: ComponentName) { diff --git a/utilities/react-children-utils/README.md b/utilities/react-children-utils/README.md index 10dbdb1052a..b741efcf146 100644 --- a/utilities/react-children-utils/README.md +++ b/utilities/react-children-utils/README.md @@ -21,4 +21,4 @@ for details. ## Licence This project is licensed under the terms of the -[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE). \ No newline at end of file +[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE). diff --git a/utilities/shared-utils/README.md b/utilities/shared-utils/README.md index ee52b679a46..3b368150d3a 100644 --- a/utilities/shared-utils/README.md +++ b/utilities/shared-utils/README.md @@ -21,4 +21,4 @@ for details. ## Licence This project is licensed under the terms of the -[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE). \ No newline at end of file +[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE).