refactor: tokens and text styles

packages/react/__stories__/system.stories.tsx

@@ -1,22 +1,9 @@
 import { Meta } from "@storybook/react"
 import { motion } from "framer-motion"
-import { fixtureConfig as sys } from "../__fixtures__/system"
-import {
-  ChakraProvider,
-  chakra,
-  useRecipe,
-  useSlotRecipe,
-} from "../src/styled-system"
+import { chakra, useRecipe, useSlotRecipe } from "../src/styled-system"
 
 export default {
   title: "Foundations / System",
-  decorators: [
-    (Story: any) => (
-      <ChakraProvider value={sys}>
-        <Story />
-      </ChakraProvider>
-    ),
-  ],
 } satisfies Meta
 
 const Box = chakra("div")
@@ -46,6 +33,22 @@ const Alert = chakra("div", {
   },
 })
 
+export const TextStyle = () => {
+  return (
+    <Box
+      bg="pink.500"
+      px="5"
+      py="2"
+      rounded="sm"
+      textStyle="2xl"
+      fontSize="6xl"
+      color="white/50"
+    >
+      Welcome
+    </Box>
+  )
+}
+
 export const Basic = () => {
   return (
     <Box>

packages/react/__tests__/css.test.ts

@@ -1,6 +1,6 @@
-import fixtureSystem from "../__fixtures__/system"
+import { defaultSystem } from "../src"
 
-const { css } = fixtureSystem
+const { css } = defaultSystem
 
 describe("css", () => {
   test("works", () => {
@@ -146,42 +146,19 @@ describe("css", () => {
     `)
   })
 
-  test("layer styles", () => {
-    const result = css({
-      // @ts-expect-error
-      layerStyle: "v1",
-    })
-
-    expect(result).toMatchInlineSnapshot(`
-      {
-        "@layer compositions": {
-          "background": "tomato",
-          "color": "var(--chakra-colors-red-300)",
-        },
-      }
-    `)
-  })
-
   test("responsive text styles", () => {
     const result = css({
-      //@ts-expect-error
-      textStyle: ["caps", "lower"],
+      textStyle: ["sm", "lg"],
     })
 
     expect(result).toMatchInlineSnapshot(`
       {
-        "@layer compositions": {
-          "fontSize": "var(--chakra-font-sizes-lg)",
-          "letterSpacing": "var(--chakra-letter-spacings-wide)",
-          "textTransform": "uppercase",
-        },
         "@media screen and (min-width: 30rem)": {
-          "@layer compositions": {
-            "fontSize": "var(--chakra-font-sizes-sm)",
-            "letterSpacing": "0.2px",
-            "textTransform": "lowercase",
-          },
+          "fontSize": "var(--chakra-font-sizes-lg)",
+          "lineHeight": "1.5",
         },
+        "fontSize": "var(--chakra-font-sizes-sm)",
+        "lineHeight": "1.5",
       }
     `)
   })

packages/react/src/styled-system/composition.ts

@@ -0,0 +1,110 @@
+import type { CompositionStyleObject } from "./css.types"
+
+interface Token<T> {
+  value: T
+  description?: string
+}
+
+interface Recursive<T> {
+  [key: string]: Recursive<T> | T
+}
+
+/* -----------------------------------------------------------------------------
+ * Text styles
+ * -----------------------------------------------------------------------------*/
+
+type TextStyleProperty =
+  | "fontSize"
+  | "fontSizeAdjust"
+  | "fontVariationSettings"
+  | "fontVariantPosition"
+  | "fontVariantCaps"
+  | "fontVariantNumeric"
+  | "fontVariantAlternates"
+  | "fontVariantLigatures"
+  | "fontFamily"
+  | "fontWeight"
+  | "fontSynthesis"
+  | "fontStyle"
+  | "fontVariant"
+  | "lineHeight"
+  | "letterSpacing"
+  | "textDecoration"
+  | "textTransform"
+  | "textIndent"
+  | "textDecorationColor"
+  | "textDecorationLine"
+  | "textDecorationStyle"
+  | "textEmphasisColor"
+  | "textEmphasisPosition"
+  | "textEmphasisStyle"
+  | "hyphenateCharacter"
+  | "textOrientation"
+  | "textOverflow"
+  | "textRendering"
+
+export type TextStyle = CompositionStyleObject<TextStyleProperty>
+
+export type TextStyles = Recursive<Token<TextStyle>>
+
+/* -----------------------------------------------------------------------------
+ * Layer styles
+ * -----------------------------------------------------------------------------*/
+
+type Placement =
+  | "Top"
+  | "Right"
+  | "Bottom"
+  | "Left"
+  | "Inline"
+  | "Block"
+  | "InlineStart"
+  | "InlineEnd"
+  | "BlockStart"
+  | "BlockEnd"
+
+type Radius =
+  | `Top${"Right" | "Left"}`
+  | `Bottom${"Right" | "Left"}`
+  | `Start${"Start" | "End"}`
+  | `End${"Start" | "End"}`
+
+type LayerStyleProperty =
+  | "background"
+  | "backgroundColor"
+  | "backgroundImage"
+  | "borderRadius"
+  | "border"
+  | "borderWidth"
+  | "borderColor"
+  | "borderStyle"
+  | "boxShadow"
+  | "filter"
+  | "backdropFilter"
+  | "transform"
+  | "color"
+  | "opacity"
+  | "backgroundBlendMode"
+  | "backgroundAttachment"
+  | "backgroundClip"
+  | "backgroundOrigin"
+  | "backgroundPosition"
+  | "backgroundRepeat"
+  | "backgroundSize"
+  | `border${Placement}`
+  | `border${Placement}Width`
+  | "borderRadius"
+  | `border${Radius}Radius`
+  | `border${Placement}Color`
+  | `border${Placement}Style`
+  | "padding"
+  | `padding${Placement}`
+
+export type LayerStyle = CompositionStyleObject<LayerStyleProperty>
+
+export type LayerStyles = Recursive<Token<LayerStyle>>
+
+export interface CompositionStyles {
+  textStyles: TextStyles
+  layerStyles: LayerStyles
+}

packages/react/src/styled-system/config.ts

@@ -1,4 +1,5 @@
 import { mergeWith } from "@chakra-ui/utils"
+import { CompositionStyles } from "./composition"
 import {
   GlobalStyleIdentityFn,
   KeyframeIdentityFn,
@@ -21,6 +22,10 @@ export const defineGlobalStyles: GlobalStyleIdentityFn = (v) => v
 
 export const defineStyle: SystemStyleIdentityFn = (v) => v
 
+export const defineTextStyles = (v: CompositionStyles["textStyles"]) => v
+
+export const defineLayerStyles = (v: CompositionStyles["layerStyles"]) => v
+
 /* -----------------------------------------------------------------------------
  * Token creators
  * -----------------------------------------------------------------------------*/

packages/react/src/styled-system/generated/prop-types.gen.ts

@@ -2,6 +2,26 @@ import type { ConditionalValue, CssProperties } from "../css.types"
 import type { Tokens } from "./token.gen"
 
 interface PropertyValueTypes {
+  colorPalette:
+    | "transparent"
+    | "current"
+    | "black"
+    | "white"
+    | "whiteAlpha"
+    | "blackAlpha"
+    | "gray"
+    | "red"
+    | "orange"
+    | "yellow"
+    | "green"
+    | "teal"
+    | "blue"
+    | "cyan"
+    | "purple"
+    | "pink"
+    | "bg"
+    | "fg"
+    | "border"
   background: Tokens["colors"]
   backgroundColor: Tokens["colors"]
   backgroundGradient:
@@ -78,7 +98,6 @@ interface PropertyValueTypes {
   divideX: string
   divideY: string
   divideColor: Tokens["colors"]
-  divideStyle: CssProperties["borderStyle"]
   boxShadow: Tokens["shadows"]
   boxShadowColor: Tokens["colors"]
   opacity: Tokens["opacity"]
@@ -176,26 +195,19 @@ interface PropertyValueTypes {
   srOnly: boolean
   debug: boolean
   caretColor: Tokens["colors"]
-  colorPalette:
-    | "transparent"
-    | "current"
-    | "black"
-    | "white"
-    | "whiteAlpha"
-    | "blackAlpha"
-    | "gray"
-    | "red"
-    | "orange"
-    | "yellow"
-    | "green"
-    | "teal"
-    | "blue"
-    | "cyan"
-    | "purple"
-    | "pink"
-    | "bg"
-    | "fg"
-    | "border"
+  divideStyle: CssProperties["borderStyle"]
+  textStyle:
+    | "xs"
+    | "sm"
+    | "md"
+    | "lg"
+    | "xl"
+    | "2xl"
+    | "3xl"
+    | "4xl"
+    | "5xl"
+    | "6xl"
+    | "7xl"
 }
 
 // eslint-disable-next-line
@@ -274,8 +286,9 @@ export interface PropertyTypes extends PropertyValueTypes {
   mr: Shorthand<"marginRight">
   mb: Shorthand<"marginBottom">
   ml: Shorthand<"marginLeft">
-  ms: Shorthand<"marginInlineEnd">
+  ms: Shorthand<"marginInlineStart">
   marginStart: Shorthand<"marginInlineStart">
+  me: Shorthand<"marginInlineEnd">
   marginEnd: Shorthand<"marginInlineEnd">
   mx: Shorthand<"marginInline">
   marginX: Shorthand<"marginInline">