Skip to content

Commit 22e618f

Browse files
gregbergegregberge
committed
feat(text): new text utility
Closes #178
1 parent cacb73f commit 22e618f

File tree

6 files changed

+227
-51
lines changed

6 files changed

+227
-51
lines changed

‎packages/system/src/defaultTheme.ts‎

Lines changed: 43 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -315,6 +315,32 @@ const colors = {
315315
'rose-900': '#881337',
316316
}
317317

318+
const fontSizes = {
319+
xs: '0.75rem',
320+
sm: '0.875rem',
321+
default: '1rem',
322+
lg: '1.125rem',
323+
xl: '1.25rem',
324+
'2xl': '1.5rem',
325+
'3xl': '1.875rem',
326+
'4xl': '2.25rem',
327+
'5xl': '3rem',
328+
'6xl': '3.75rem',
329+
'7xl': '4.5rem',
330+
'8xl': '6rem',
331+
'9xl': '8rem',
332+
}
333+
334+
const texts = Object.keys(fontSizes).reduce(
335+
(texts, key) => {
336+
texts[key as keyof typeof fontSizes] = { fontSize: key, lineHeight: key }
337+
return texts
338+
},
339+
{} as {
340+
[key in keyof typeof fontSizes]: { fontSize: string; lineHeight: string }
341+
},
342+
)
343+
318344
export const defaultTheme = {
319345
colors: generateHexAlphaVariants(colors),
320346
space,
@@ -376,21 +402,7 @@ export const defaultTheme = {
376402
inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
377403
outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
378404
},
379-
fontSizes: {
380-
xs: '0.75rem',
381-
sm: '0.875rem',
382-
default: '1rem',
383-
lg: '1.125rem',
384-
xl: '1.25rem',
385-
'2xl': '1.5rem',
386-
'3xl': '1.875rem',
387-
'4xl': '2.25rem',
388-
'5xl': '3rem',
389-
'6xl': '3.75rem',
390-
'7xl': '4.5rem',
391-
'8xl': '6rem',
392-
'9xl': '8rem',
393-
},
405+
fontSizes,
394406
fontWeights: {
395407
hairline: '100',
396408
thin: '200',
@@ -430,6 +442,21 @@ export const defaultTheme = {
430442
8: '2rem',
431443
9: '2.25rem',
432444
10: '2.5rem',
445+
446+
// Match fontSizes
447+
xs: '1rem',
448+
sm: '1.25rem',
449+
default: '1.5rem',
450+
lg: '1.75rem',
451+
xl: '1.75rem',
452+
'2xl': '2rem',
453+
'3xl': '2.25rem',
454+
'4xl': '2.5rem',
455+
'5xl': 1,
456+
'6xl': 1,
457+
'7xl': 1,
458+
'8xl': 1,
459+
'9xl': 1,
433460
},
434461
gridTemplateColumns: {
435462
1: 'repeat(1, minmax(0, 1fr))',
@@ -462,6 +489,7 @@ export const defaultTheme = {
462489
borders: {
463490
default: '1px solid transparent',
464491
},
492+
texts,
465493
transitions,
466494
transitionProperties,
467495
timingFunctions,

‎packages/system/src/styles/typography.test.ts‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { getFontSize } from './typography'
1+
import { getFontSize, text } from './typography'
22

33
describe('#getFontSize', () => {
44
it('gets a value and transforms it according to spec.', () => {
@@ -17,3 +17,16 @@ describe('#getFontSize', () => {
1717
expect(getFontSize('50%')(props)).toEqual('50%')
1818
})
1919
})
20+
21+
describe('#text', () => {
22+
it('gets value from the theme and transforms it', () => {
23+
const theme = {
24+
texts: { custom: { fontSize: 10, lineHeight: 1.5 } },
25+
}
26+
expect(text({ text: 'custom', theme })).toEqual({
27+
fontSize: '10px',
28+
lineHeight: 1.5,
29+
})
30+
expect(text({ text: 'xs', theme })).toEqual({})
31+
})
32+
})

‎packages/system/src/styles/typography.ts‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -187,10 +187,7 @@ export const listStylePosition = style<ListStylePositionProps>({
187187
prop: 'listStylePosition',
188188
})
189189

190-
// @TODO add word-break
191-
// @TODO add overflow-wrap
192-
193-
export interface TypographyProps<T extends ITheme = Theme>
190+
interface AllProps<T extends ITheme = Theme>
194191
extends FontFamilyProps<T>,
195192
FontSizeProps<T>,
196193
FontStyleProps<T>,
@@ -206,7 +203,7 @@ export interface TypographyProps<T extends ITheme = Theme>
206203
TextOverflowProps<T>,
207204
ListStyleTypeProps<T>,
208205
ListStylePositionProps<T> {}
209-
export const typography = compose<TypographyProps>(
206+
const all = compose<AllProps>(
210207
fontFamily,
211208
fontSize,
212209
fontStyle,
@@ -223,3 +220,24 @@ export const typography = compose<TypographyProps>(
223220
listStyleType,
224221
listStylePosition,
225222
)
223+
224+
export type ThemeText<T extends ITheme = Theme> = ThemeNamespaceValue<
225+
'texts',
226+
T
227+
>
228+
export interface TextProps<T extends ITheme = Theme> {
229+
text?: SystemProp<ThemeText<T>, T>
230+
}
231+
export const text = style<TextProps>({
232+
prop: 'text',
233+
key: 'texts',
234+
css: (value) => ({ theme }: any) => all({ ...value, theme }),
235+
})
236+
237+
// @TODO add word-break
238+
// @TODO add overflow-wrap
239+
240+
export interface TypographyProps<T extends ITheme = Theme>
241+
extends AllProps<T>,
242+
TextProps<T> {}
243+
export const typography = compose<TypographyProps>(all, text)

‎packages/system/src/types.ts‎

Lines changed: 0 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -41,36 +41,6 @@ export interface ThemeNamespace {
4141
[key: string]: ThemeValue
4242
[key: number]: ThemeValue
4343
}
44-
export interface XTheme extends ITheme {
45-
animations?: ThemeNamespace
46-
borders?: ThemeNamespace
47-
borderStyles?: ThemeNamespace
48-
borderWidths?: ThemeNamespace
49-
colors?: Colors
50-
durations?: ThemeNamespace
51-
fonts?: ThemeNamespace
52-
fontSizes?: ThemeNamespace
53-
fontWeights?: ThemeNamespace
54-
gridTemplateColumns?: ThemeNamespace
55-
gridTemplateRows?: ThemeNamespace
56-
inset?: ThemeNamespace
57-
letterSpacings?: ThemeNamespace
58-
lineHeights?: ThemeNamespace
59-
radii?: ThemeNamespace
60-
ringWidths?: ThemeNamespace
61-
shadows?: ThemeNamespace
62-
screens?: Screens
63-
states?: States
64-
settings?: ThemeNamespace
65-
sizes?: ThemeNamespace
66-
space?: ThemeNamespace
67-
timingFunctions?: ThemeNamespace
68-
transforms?: ThemeNamespace
69-
transitions?: ThemeNamespace
70-
transitionProperties?: ThemeNamespace
71-
transformers?: Transformers
72-
zIndices?: ThemeNamespace
73-
}
7444

7545
// eslint-disable-next-line @typescript-eslint/no-empty-interface
7646
export interface Theme extends ITheme {}

‎website/pages/docs/typography/text.mdx‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
---
2+
section: Typography
3+
title: Text
4+
slug: /docs/text/
5+
---
6+
7+
# Text
8+
9+
Utilities for controlling the all typography of an element.
10+
11+
<carbon-ad />
12+
13+
| React props | CSS Properties |
14+
| ------------- | -------------- |
15+
| `text={size}` | Mixed |
16+
17+
## Usage
18+
19+
Text is similar to [`fontSize`](/docs/font-size/), except it also specify according [`lineHeight`](/docs/line-height/).
20+
21+
By extending theme, `text` can be used to define all text variants of your application.
22+
23+
```jsx preview color=violet
24+
<>
25+
<template preview>
26+
<>
27+
{[
28+
'xs',
29+
'sm',
30+
'base',
31+
'lg',
32+
'xl',
33+
'2xl',
34+
'3xl',
35+
'4xl',
36+
'5xl',
37+
'6xl',
38+
'7xl',
39+
'8xl',
40+
'9xl',
41+
].map((size) => (
42+
<x.dl
43+
key={size}
44+
display="flex"
45+
alignItems="baseline"
46+
color="violet-600"
47+
overflow="hidden"
48+
>
49+
<x.dt w={16} flexShrink={0} text="sm" opacity={0.8} fontFamily="mono">
50+
{size}
51+
</x.dt>
52+
<x.dd text={size} fontWeight="medium">
53+
Computers have lots of memory but no imagination.
54+
</x.dd>
55+
</x.dl>
56+
))}
57+
</>
58+
</template>
59+
<x.p text="xs">Computers have lots ...</x.p>
60+
<x.p text="sm">Computers have lots ...</x.p>
61+
<x.p text="base">Computers have lots ...</x.p>
62+
<x.p text="lg">Computers have lots ...</x.p>
63+
<x.p text="xl">Computers have lots ...</x.p>
64+
<x.p text="2xl">Computers have lots ...</x.p>
65+
<x.p text="3xl">Computers have lots ...</x.p>
66+
<x.p text="4xl">Computers have lots ...</x.p>
67+
<x.p text="5xl">Computers have lots ...</x.p>
68+
<x.p text="6xl">Computers have lots ...</x.p>
69+
<x.p text="7xl">Computers have lots ...</x.p>
70+
<x.p text="8xl">Computers have lots ...</x.p>
71+
<x.p text="9xl">Computers have lots ...</x.p>
72+
</>
73+
```
74+
75+
## Responsive
76+
77+
To control the space between elements at a specific breakpoint, use responsive object notation. For example, adding the property `text={{ md: "xl" }}` to an element would apply the `text="xl"` utility at medium screen sizes and above.
78+
79+
```jsx
80+
<x.p text={{ xs: 'sm', md: 'xl' }}>{/* ... */}</x.p>
81+
```
82+
83+
For more information about xstyled's responsive design features, check out [Responsive Design](/docs/responsive-design/) documentation.
84+
85+
## Customizing
86+
87+
### Texts
88+
89+
If you'd like to customize your values for texts, use the `theme.texts` section of your theme. Every typography utilities are authorized, not only `fontSize` and `lineHeight`. You can literally define all your texts style using this utility.
90+
91+
```diffjs
92+
// theme.js
93+
export const theme = {
94+
texts: {
95+
title: {
96+
fontSize: '30px',
97+
lineHeight: '45px',
98+
fontWeight: 'bold'
99+
},
100+
hint: {
101+
fontSize: 10,
102+
lineHeight: 1.4,
103+
color: 'gray-300',
104+
}
105+
},
106+
}
107+
```
108+
109+
If you don't want to customize it, a set of `fontSizes` is already defined in default theme:
110+
111+
```js
112+
const defaultTheme = {
113+
// ...
114+
fontSizes: {
115+
xs: { fontSize: 'xs', lineHeight: 'xs' },
116+
sm: { fontSize: 'sm', lineHeight: 'sm' },
117+
default: { fontSize: 'default', lineHeight: 'default' },
118+
lg: { fontSize: 'lg', lineHeight: 'lg' },
119+
xl: { fontSize: 'xl', lineHeight: 'xl' },
120+
'2xl': { fontSize: '2xl', lineHeight: '2xl' },
121+
'3xl': { fontSize: '3xl', lineHeight: '3xl' },
122+
'4xl': { fontSize: '4xl', lineHeight: '4xl' },
123+
'5xl': { fontSize: '5xl', lineHeight: '5xl' },
124+
'6xl': { fontSize: '6xl', lineHeight: '6xl' },
125+
'7xl': { fontSize: '7xl', lineHeight: '7xl' },
126+
'8xl': { fontSize: '8xl', lineHeight: '8xl' },
127+
'9xl': { fontSize: '9xl', lineHeight: '9xl' },
128+
},
129+
}
130+
```
131+
132+
Values are defined in `fontSizes` and `lineHeights` theme section. It means if you modify a `fontSize` it will automatically reflects change on `text` and `fontSize` utility.

‎website/partials/customizing/line-heights.mdx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,21 @@ const defaultTheme = {
4646
8: '2rem',
4747
9: '2.25rem',
4848
10: '2.5rem',
49+
50+
// Match fontSizes
51+
xs: '1rem',
52+
sm: '1.25rem',
53+
default: '1.5rem',
54+
lg: '1.75rem',
55+
xl: '1.75rem',
56+
'2xl': '2rem',
57+
'3xl': '2.25rem',
58+
'4xl': '2.5rem',
59+
'5xl': 1,
60+
'6xl': 1,
61+
'7xl': 1,
62+
'8xl': 1,
63+
'9xl': 1,
4964
},
5065
}
5166
```

0 commit comments

Comments
 (0)