Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit 434dc2a

Browse files
committed
docs(features): add text and layer styles docs
1 parent c19af1e commit 434dc2a

File tree

3 files changed

+125
-6
lines changed

3 files changed

+125
-6
lines changed

docs/.vitepress/config.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,11 @@ function getSetupSidebar() {
5151
children: [
5252
{ text: 'Style Props', link: '/pages/features/style-props' },
5353
{ text: 'Gradient', link: '/pages/features/gradient' },
54+
{ text: 'Color Mode', link: '/pages/features/color-mode' },
5455
{ text: 'CSS Variables', link: '/pages/features/css-variables' },
5556
{ text: 'Responsive Styles', link: '/pages/features/responsive-styles' },
56-
{ text: 'Chakra Factory', link: '/pages/features/chakra-factory' }
57+
{ text: 'Chakra Factory', link: '/pages/features/chakra-factory' },
58+
{ text: 'Text & Layer Styles', link: '/pages/features/text-and-layer-styles' }
5759
]
5860
},
5961
{

docs/pages/features/css-variables.md

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
---
2-
title: 'CSS Variables'
3-
description: Working with color mode (light and dark mode) in Chakra UI
4-
---
1+
# CSS Variables
52

63
Chakra UI now converts theme tokens (colors, font sizes, etc) to CSS Custom
74
Properties (also known as "CSS variables").
@@ -10,7 +7,7 @@ CSS variables are now supported in all modern browsers, and we think they are
107
useful to:
118

129
- avoid prop interpolations;
13-
- avoid classname regeneration from
10+
- avoid class name regeneration from
1411
[emotion](https://emotion.sh/docs/introduction);
1512
- reduce runtime evaluation of token values in Theme context;
1613
- use theme token outside Chakra's component (embedded forms, markdown content,
Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
# Text and Layer Styles
2+
3+
In most projects you might find yourself repeating specific text properties
4+
(font size, font weight, line height) or layer properties (bg, color, shadow).
5+
This can be painful as your project grows in size.
6+
7+
Using `textStyle` and `layerStyle` props can help you keep things organized and
8+
consistent.
9+
10+
## Layer Style
11+
12+
Layer Styles allow you to save a combination of styling attributes to re-use in
13+
other components. Once created, pass the `layerStyle` prop to any component and
14+
chakra will resolve the styles accordingly.
15+
16+
Properties defined in a layer style
17+
18+
- Color or text color
19+
- Background color
20+
- Border width and border-color
21+
- Box shadow
22+
- Opacity
23+
24+
```jsx live=false
25+
// 1. Import `extendTheme`
26+
import { extendTheme } from '@chakra-ui/vue-next'
27+
28+
// 2. Extend the theme with new layer styles
29+
const theme = extendTheme({
30+
layerStyles: {
31+
base: {
32+
bg: 'gray.50',
33+
border: '2px solid',
34+
borderColor: 'gray.500',
35+
},
36+
selected: {
37+
bg: 'teal.500',
38+
color: 'teal.700',
39+
borderColor: 'orange.500',
40+
},
41+
},
42+
})
43+
44+
// 3. Consume the text styles in your components
45+
<template>
46+
<c-box layer-style="selected">This is a box</c-box>
47+
</template>
48+
49+
// 4. You can also switch layer styles
50+
<script setup>
51+
const layerStyle = computed(() => {
52+
return isSelected ? "selected" : "base"
53+
})
54+
</script>
55+
56+
<template>
57+
<c-box :layer-style="layerStyle">This is a box</c-box>
58+
</template>
59+
60+
```
61+
62+
## Text Styles
63+
64+
Typography forms the core of any product just as much as colors and components
65+
do. As a result, you'll need to establish styles for consistent, legible
66+
typography early in the process of creating your product or design system.
67+
68+
The text styles functionality in Chakra makes it easy to repeatably apply a
69+
collection of text properties (like line-height and size) to any component.
70+
71+
You can put these styles in the theme under the `textStyles` key to make it easy to
72+
re-use in the future.
73+
74+
Properties defined in a text style
75+
76+
- Font family, weight, and size
77+
- Line height
78+
- Letter spacing
79+
- Text decoration (strikethrough and underline)
80+
- Text transform (uppercase, lowercase, and capitalization)
81+
82+
```jsx live=false
83+
// 1. Import `extendTheme`
84+
import { extendTheme } from '@chakra-ui/vue-next'
85+
86+
// 2. Define the new text styles
87+
const theme = extendTheme({
88+
textStyles: {
89+
h1: {
90+
// you can also use responsive styles
91+
fontSize: ['48px', '72px'],
92+
fontWeight: 'bold',
93+
lineHeight: '110%',
94+
letterSpacing: '-2%',
95+
},
96+
h2: {
97+
fontSize: ['36px', '48px'],
98+
fontWeight: 'semibold',
99+
lineHeight: '110%',
100+
letterSpacing: '-1%',
101+
},
102+
},
103+
})
104+
105+
// 3. Consume the text styles in your component
106+
<template>
107+
<c-box text-style='h1'>This is a box</c-box>
108+
</template>
109+
```
110+
111+
### Naming text styles
112+
113+
In practice, we recommend using the same text style names used by designers on
114+
your team. Here are common ideas on how to name text styles:
115+
116+
- Sized-based naming system (`xs`, `sm`, `md`, `lg`, `xl`)
117+
- Semantic naming system that corresponds to respective HTML tags in production
118+
(`caption`, `paragraph`, `h1`, `h2`)
119+
- Descriptive or functional naming system that explains the style's intended use
120+
(`alert`, `modal-header`, `button-label`)

0 commit comments

Comments
 (0)