Skip to content

Commit 1195171

Browse files
segunadebayosegunadebayo
committed
refactor: tokens and text styles
1 parent cc147d3 commit 1195171

File tree

16 files changed

+260
-145
lines changed

16 files changed

+260
-145
lines changed

‎packages/react/__fixtures__/system.ts

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎packages/react/__stories__/system.stories.tsx

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,9 @@
11
import { Meta } from "@storybook/react"
22
import { motion } from "framer-motion"
3-
import { fixtureConfig as sys } from "../__fixtures__/system"
4-
import {
5-
ChakraProvider,
6-
chakra,
7-
useRecipe,
8-
useSlotRecipe,
9-
} from "../src/styled-system"
3+
import { chakra, useRecipe, useSlotRecipe } from "../src/styled-system"
104

115
export default {
126
title: "Foundations / System",
13-
decorators: [
14-
(Story: any) => (
15-
<ChakraProvider value={sys}>
16-
<Story />
17-
</ChakraProvider>
18-
),
19-
],
207
} satisfies Meta
218

229
const Box = chakra("div")
@@ -46,6 +33,22 @@ const Alert = chakra("div", {
4633
},
4734
})
4835

36+
export const TextStyle = () => {
37+
return (
38+
<Box
39+
bg="pink.500"
40+
px="5"
41+
py="2"
42+
rounded="sm"
43+
textStyle="2xl"
44+
fontSize="6xl"
45+
color="white/50"
46+
>
47+
Welcome
48+
</Box>
49+
)
50+
}
51+
4952
export const Basic = () => {
5053
return (
5154
<Box>

‎packages/react/__tests__/css.test.ts

Lines changed: 7 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import fixtureSystem from "../__fixtures__/system"
1+
import { defaultSystem } from "../src"
22

3-
const { css } = fixtureSystem
3+
const { css } = defaultSystem
44

55
describe("css", () => {
66
test("works", () => {
@@ -146,42 +146,19 @@ describe("css", () => {
146146
`)
147147
})
148148

149-
test("layer styles", () => {
150-
const result = css({
151-
// @ts-expect-error
152-
layerStyle: "v1",
153-
})
154-
155-
expect(result).toMatchInlineSnapshot(`
156-
{
157-
"@layer compositions": {
158-
"background": "tomato",
159-
"color": "var(--chakra-colors-red-300)",
160-
},
161-
}
162-
`)
163-
})
164-
165149
test("responsive text styles", () => {
166150
const result = css({
167-
//@ts-expect-error
168-
textStyle: ["caps", "lower"],
151+
textStyle: ["sm", "lg"],
169152
})
170153

171154
expect(result).toMatchInlineSnapshot(`
172155
{
173-
"@layer compositions": {
174-
"fontSize": "var(--chakra-font-sizes-lg)",
175-
"letterSpacing": "var(--chakra-letter-spacings-wide)",
176-
"textTransform": "uppercase",
177-
},
178156
"@media screen and (min-width: 30rem)": {
179-
"@layer compositions": {
180-
"fontSize": "var(--chakra-font-sizes-sm)",
181-
"letterSpacing": "0.2px",
182-
"textTransform": "lowercase",
183-
},
157+
"fontSize": "var(--chakra-font-sizes-lg)",
158+
"lineHeight": "1.5",
184159
},
160+
"fontSize": "var(--chakra-font-sizes-sm)",
161+
"lineHeight": "1.5",
185162
}
186163
`)
187164
})

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

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import type { CompositionStyleObject } from "./css.types"
2+
3+
interface Token<T> {
4+
value: T
5+
description?: string
6+
}
7+
8+
interface Recursive<T> {
9+
[key: string]: Recursive<T> | T
10+
}
11+
12+
/* -----------------------------------------------------------------------------
13+
* Text styles
14+
* -----------------------------------------------------------------------------*/
15+
16+
type TextStyleProperty =
17+
| "fontSize"
18+
| "fontSizeAdjust"
19+
| "fontVariationSettings"
20+
| "fontVariantPosition"
21+
| "fontVariantCaps"
22+
| "fontVariantNumeric"
23+
| "fontVariantAlternates"
24+
| "fontVariantLigatures"
25+
| "fontFamily"
26+
| "fontWeight"
27+
| "fontSynthesis"
28+
| "fontStyle"
29+
| "fontVariant"
30+
| "lineHeight"
31+
| "letterSpacing"
32+
| "textDecoration"
33+
| "textTransform"
34+
| "textIndent"
35+
| "textDecorationColor"
36+
| "textDecorationLine"
37+
| "textDecorationStyle"
38+
| "textEmphasisColor"
39+
| "textEmphasisPosition"
40+
| "textEmphasisStyle"
41+
| "hyphenateCharacter"
42+
| "textOrientation"
43+
| "textOverflow"
44+
| "textRendering"
45+
46+
export type TextStyle = CompositionStyleObject<TextStyleProperty>
47+
48+
export type TextStyles = Recursive<Token<TextStyle>>
49+
50+
/* -----------------------------------------------------------------------------
51+
* Layer styles
52+
* -----------------------------------------------------------------------------*/
53+
54+
type Placement =
55+
| "Top"
56+
| "Right"
57+
| "Bottom"
58+
| "Left"
59+
| "Inline"
60+
| "Block"
61+
| "InlineStart"
62+
| "InlineEnd"
63+
| "BlockStart"
64+
| "BlockEnd"
65+
66+
type Radius =
67+
| `Top${"Right" | "Left"}`
68+
| `Bottom${"Right" | "Left"}`
69+
| `Start${"Start" | "End"}`
70+
| `End${"Start" | "End"}`
71+
72+
type LayerStyleProperty =
73+
| "background"
74+
| "backgroundColor"
75+
| "backgroundImage"
76+
| "borderRadius"
77+
| "border"
78+
| "borderWidth"
79+
| "borderColor"
80+
| "borderStyle"
81+
| "boxShadow"
82+
| "filter"
83+
| "backdropFilter"
84+
| "transform"
85+
| "color"
86+
| "opacity"
87+
| "backgroundBlendMode"
88+
| "backgroundAttachment"
89+
| "backgroundClip"
90+
| "backgroundOrigin"
91+
| "backgroundPosition"
92+
| "backgroundRepeat"
93+
| "backgroundSize"
94+
| `border${Placement}`
95+
| `border${Placement}Width`
96+
| "borderRadius"
97+
| `border${Radius}Radius`
98+
| `border${Placement}Color`
99+
| `border${Placement}Style`
100+
| "padding"
101+
| `padding${Placement}`
102+
103+
export type LayerStyle = CompositionStyleObject<LayerStyleProperty>
104+
105+
export type LayerStyles = Recursive<Token<LayerStyle>>
106+
107+
export interface CompositionStyles {
108+
textStyles: TextStyles
109+
layerStyles: LayerStyles
110+
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { mergeWith } from "@chakra-ui/utils"
2+
import { CompositionStyles } from "./composition"
23
import {
34
GlobalStyleIdentityFn,
45
KeyframeIdentityFn,
@@ -21,6 +22,10 @@ export const defineGlobalStyles: GlobalStyleIdentityFn = (v) => v
2122

2223
export const defineStyle: SystemStyleIdentityFn = (v) => v
2324

25+
export const defineTextStyles = (v: CompositionStyles["textStyles"]) => v
26+
27+
export const defineLayerStyles = (v: CompositionStyles["layerStyles"]) => v
28+
2429
/* -----------------------------------------------------------------------------
2530
* Token creators
2631
* -----------------------------------------------------------------------------*/

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

Lines changed: 35 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,26 @@ import type { ConditionalValue, CssProperties } from "../css.types"
22
import type { Tokens } from "./token.gen"
33

44
interface PropertyValueTypes {
5+
colorPalette:
6+
| "transparent"
7+
| "current"
8+
| "black"
9+
| "white"
10+
| "whiteAlpha"
11+
| "blackAlpha"
12+
| "gray"
13+
| "red"
14+
| "orange"
15+
| "yellow"
16+
| "green"
17+
| "teal"
18+
| "blue"
19+
| "cyan"
20+
| "purple"
21+
| "pink"
22+
| "bg"
23+
| "fg"
24+
| "border"
525
background: Tokens["colors"]
626
backgroundColor: Tokens["colors"]
727
backgroundGradient:
@@ -78,7 +98,6 @@ interface PropertyValueTypes {
7898
divideX: string
7999
divideY: string
80100
divideColor: Tokens["colors"]
81-
divideStyle: CssProperties["borderStyle"]
82101
boxShadow: Tokens["shadows"]
83102
boxShadowColor: Tokens["colors"]
84103
opacity: Tokens["opacity"]
@@ -176,26 +195,19 @@ interface PropertyValueTypes {
176195
srOnly: boolean
177196
debug: boolean
178197
caretColor: Tokens["colors"]
179-
colorPalette:
180-
| "transparent"
181-
| "current"
182-
| "black"
183-
| "white"
184-
| "whiteAlpha"
185-
| "blackAlpha"
186-
| "gray"
187-
| "red"
188-
| "orange"
189-
| "yellow"
190-
| "green"
191-
| "teal"
192-
| "blue"
193-
| "cyan"
194-
| "purple"
195-
| "pink"
196-
| "bg"
197-
| "fg"
198-
| "border"
198+
divideStyle: CssProperties["borderStyle"]
199+
textStyle:
200+
| "xs"
201+
| "sm"
202+
| "md"
203+
| "lg"
204+
| "xl"
205+
| "2xl"
206+
| "3xl"
207+
| "4xl"
208+
| "5xl"
209+
| "6xl"
210+
| "7xl"
199211
}
200212

201213
// eslint-disable-next-line
@@ -274,8 +286,9 @@ export interface PropertyTypes extends PropertyValueTypes {
274286
mr: Shorthand<"marginRight">
275287
mb: Shorthand<"marginBottom">
276288
ml: Shorthand<"marginLeft">
277-
ms: Shorthand<"marginInlineEnd">
289+
ms: Shorthand<"marginInlineStart">
278290
marginStart: Shorthand<"marginInlineStart">
291+
me: Shorthand<"marginInlineEnd">
279292
marginEnd: Shorthand<"marginInlineEnd">
280293
mx: Shorthand<"marginInline">
281294
marginX: Shorthand<"marginInline">

0 commit comments

Comments
 (0)