hipstersmoothie.com
A design system in a box.
hip-ui.tngl.io/docs/introduction
1import * as stylex from "@stylexjs/stylex";
2
3import { Flex } from "@/components/flex";
4import { Text } from "@/components/typography/text";
5
6import { verticalSpace } from "../../components/theme/semantic-spacing.stylex";
7
8const styles = stylex.create({
9 wrapper: {
10 paddingBottom: verticalSpace["3xl"],
11 paddingTop: verticalSpace["3xl"],
12 },
13});
14
15export function TextExample() {
16 return (
17 <Flex direction="column" gap="7xl" style={styles.wrapper}>
18 <Flex direction="column" gap="2xl">
19 <Text font="sans" size="2xl" weight="bold">
20 Title text
21 </Text>
22 <Text font="sans" size="2xl" weight="bold">
23 Sans serif text (default)
24 </Text>
25 <Text font="serif" size="2xl" weight="semibold">
26 Serif text
27 </Text>
28 <Text font="mono" size="2xl">
29 Monospace text
30 </Text>
31 </Flex>
32 </Flex>
33 );
34}