mirror of
https://github.com/hanzoai/gui.git
synced 2026-10-25 02:31:41 +00:00
zeekay
1620fff61e
The estate renders in Zen, and the config sources here already did — but the surfaces that teach the config had not moved with them. Every createFont example in the docs still named Inter, so a reader copying one out wrote an app in a face we do not ship, and the Expo guide sent them to @hanzogui/font-inter, a package that does not exist in this repo at all; the one that does is @hanzogui/font-zen. The tracked .gui configs and the two public/hanzogui.css files were stale output. The compiler writes .hanzogui/hanzogui.config.json now and the apps emit hanzogui.generated.css, so nothing produced or read either set any more; they had simply frozen in place with the pre-Zen families still in them, and .gitignore had already been taught to ignore .gui without the files being untracked to match. The babel native snapshot recorded fontFamily "Inter" for the same reason. The compiler emits "Zen" today — the snapshot was just never re-run.
113 lines
2.8 KiB
Plaintext
113 lines
2.8 KiB
Plaintext
---
|
|
title: Headings
|
|
description: Heading components that mimic HTML equivalents
|
|
name: html
|
|
component: Headings
|
|
package: text
|
|
demoName: Headings
|
|
---
|
|
|
|
<HeroContainer>
|
|
<HeadingsDemo />
|
|
</HeroContainer>
|
|
|
|
```tsx hero template=Headings
|
|
|
|
```
|
|
|
|
<Highlights
|
|
features={[
|
|
'Accepts size prop that works on all styles.',
|
|
'Define custom fonts with styles per-size.',
|
|
]}
|
|
/>
|
|
|
|
## Installation
|
|
|
|
Headings is already installed in `hanzogui`, or you can install it independently:
|
|
|
|
```bash
|
|
npm install @hanzogui/text
|
|
```
|
|
|
|
```tsx
|
|
import { H1, H2, H3, H4, H5, H6, Heading } from '@hanzo/gui'
|
|
|
|
export default () => (
|
|
<>
|
|
<H1>Heading 1</H1>
|
|
<H2>Heading 2</H2>
|
|
<H3>Heading 3</H3>
|
|
<H4>Heading 4</H4>
|
|
<H5>Heading 5</H5>
|
|
<H6>Heading 6</H6>
|
|
<Heading>Heading</Heading>
|
|
</>
|
|
)
|
|
```
|
|
|
|
The headings all extend from the base `Heading` component. Note, this is just our own theme for Zen headings, but you can change the styles for any font completely.
|
|
|
|
Gui expects for your [font.size](/docs/core/configuration#font-tokens) to have the keys 1-10 so headings work with your font tokens automatically.
|
|
|
|
## How it works
|
|
|
|
The `Heading` component is defined as follows:
|
|
|
|
```tsx
|
|
export const Heading = styled(Paragraph, {
|
|
tag: 'span',
|
|
name: 'Heading',
|
|
accessibilityRole: 'header',
|
|
fontFamily: '$heading',
|
|
size: '$8',
|
|
margin: 0,
|
|
})
|
|
```
|
|
|
|
Note that Heading, and H1-H6 all default to the `heading` font family that must be defined in your hanzogui.config.ts.
|
|
|
|
Because [Paragraph](/docs/components/text#paragraph) extends [SizableText](/docs/components/text#sizabletext), you get automatic styles based on your font theme. Let's see how `SizableText` defines the size variant, roughly, which gives a good idea of how Gui works, and how you could create or change your own headings at a lower level.
|
|
|
|
```tsx
|
|
import { Text } from '@hanzo/gui' // or '@hanzogui/core'
|
|
|
|
const SizableText = styled(Text, {
|
|
name: 'SizableText',
|
|
fontFamily: '$body',
|
|
color: '$color',
|
|
|
|
variants: {
|
|
size: {
|
|
'...fontSize': (val, { font, props }) => {
|
|
const fontSize = font.size[val]
|
|
const lineHeight = font.lineHeight[val]
|
|
const fontWeight = font.weight[val]
|
|
const letterSpacing = font.letterSpacing[val]
|
|
const fontStyle = font.style?.[val]
|
|
const textTransform = font.transform?.[val]
|
|
return {
|
|
fontStyle,
|
|
textTransform,
|
|
fontWeight,
|
|
letterSpacing,
|
|
fontSize,
|
|
lineHeight,
|
|
}
|
|
},
|
|
},
|
|
},
|
|
|
|
defaultVariants: {
|
|
// note hanzogui uses a generic "true" token that your sizes should set to be the same as the default on your scale
|
|
size: '$true',
|
|
},
|
|
})
|
|
```
|
|
|
|
## API Reference
|
|
|
|
### Heading
|
|
|
|
Headings extend [SizableText props](/docs/components/text#sizabletext) inheriting all the [Gui standard props](/docs/intro/props).
|