feat: component anatomy

[segunadebayo]

📝 Description

This PR adds some helper functions to the theme-tools package to make the process of creating component themes less cumbersome.

• cssVar - function to create css vars
• calc - function that makes it easy to create the css calc string
• anatomy- function to define and extend component parts
• Added PartsStyleObject and PartStyleFunction for easy creation of multipart component styles

💣 Is this a breaking change (Yes/No):

No

📝 Additional Information

Creating a CSS variable in the theme

import { cssVar, calc }  from "@chakra-ui/theme-tools"

const $width = cssVar("slider-width")
const $height = cssVar("slider-height")

const $diff = calc($width).subtract($height).toString()

$width.variable  // => '--slider-width'
$width.reference // => 'var(--slider-width)'

Create a component anatomy

import { anatomy }  from "@chakra-ui/theme-tools"
import type { PartsStyle } from "@chakra-ui/theme-tools"

const btn = anatomy("button").parts("label", "container")

const newBtn = btn.extend("icon") //  extend button to include icon part

// Using the anatomy in component theme
const baseStyle: PartsStyle<typeof newBtn> = {
  // auto-complete for the component parts
  icon: {...},
  label: {...}
}

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

chakra-ui – ./

🔍 Inspect: https://vercel.com/chakra-ui/chakra-ui/HVN2PWWaHKgDtMsorYw9Vz2JWUuR
✅ Preview: https://chakra-ui-git-feat-anatomy-chakra-ui.vercel.app

chakra-ui-storybook – ./

🔍 Inspect: https://vercel.com/chakra-ui/chakra-ui-storybook/4DwApMbin7RQvPCS8XinQt6uedoG
✅ Preview: https://chakra-ui-storybook-git-feat-anatomy-chakra-ui.vercel.app

[changeset-bot]

🦋 Changeset detected

Latest commit: a6a482a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 34 packages

Name	Type
@chakra-ui/slider	Patch
@chakra-ui/docs	Major
@chakra-ui/skeleton	Patch
@chakra-ui/system	Patch
@chakra-ui/theme-tools	Minor
@chakra-ui/hooks	Minor
@chakra-ui/layout	Patch
@chakra-ui/react	Patch
@chakra-ui/theme	Patch
@chakra-ui/accordion	Patch
@chakra-ui/avatar	Patch
@chakra-ui/checkbox	Patch
@chakra-ui/editable	Patch
@chakra-ui/form-control	Patch
@chakra-ui/image	Patch
@chakra-ui/input	Patch
@chakra-ui/menu	Patch
@chakra-ui/modal	Patch
@chakra-ui/number-input	Patch
@chakra-ui/pin-input	Patch
@chakra-ui/popover	Patch
@chakra-ui/progress	Patch
@chakra-ui/radio	Patch
@chakra-ui/select	Patch
@chakra-ui/switch	Patch
@chakra-ui/tabs	Patch
@chakra-ui/textarea	Patch
@chakra-ui/toast	Patch
@chakra-ui/tooltip	Patch
@chakra-ui/color-mode	Patch
@chakra-ui/counter	Patch
@chakra-ui/portal	Patch
@chakra-ui/test-utils	Patch
@chakra-ui/props-docs	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.