A design system in a box.
hip-ui.tngl.io/docs/introduction
theming docs
+390
-1
+1
apps/docs/src/components/card/index.tsx
+1
apps/docs/src/components/card/index.tsx
+82
apps/docs/src/docs/foundations/theming.mdx
+82
apps/docs/src/docs/foundations/theming.mdx
···
1
+
---
2
+
title: Theming
3
+
description: Easily theme your entire application or just a part of it.
4
+
---
5
+
6
+
import { Example } from "../../lib/Example";
7
+
import { ThemingExample } from "../../examples/foundations/theming";
8
+
9
+
Any of the foundations can be easily themed to match your brand.
10
+
11
+
This example renders the same card with the default tokens and then with a theme override.
12
+
13
+
<Example src={ThemingExample} />
14
+
15
+
## Creating a Theme
16
+
17
+
To start theming your application fist import the tokens you want to theme.
18
+
19
+
```tsx
20
+
import { primaryColor, uiColor } from "@/components/theme/semantic-color.stylex";
21
+
```
22
+
23
+
Then you can set the tokens to your desired values.
24
+
25
+
```tsx
26
+
import * as stylex from "@stylexjs/stylex";
27
+
28
+
import { primaryColor, uiColor } from "@/components/theme/semantic-color.stylex";
29
+
import { purple } from "@/components/theme/colors/purple.stylex";
30
+
import { mauve } from "@/components/theme/colors/mauve.stylex";
31
+
32
+
export const myPrimaryColorTheme = stylex.createTheme(primaryColor, {
33
+
bg: purple.bg1,
34
+
bgSubtle: purple.bg2,
35
+
bgDim: purple.component1,
36
+
bgSecondary: purple.component2,
37
+
bgActive: purple.component3,
38
+
borderDim: purple.border1,
39
+
border: purple.border2,
40
+
borderInteractive: purple.border3,
41
+
bgSolid: purple.solid1,
42
+
bgSolidDark: purple.solid2,
43
+
textDim: purple.text1,
44
+
text: purple.text2,
45
+
textContrast: purple.textContrast,
46
+
});
47
+
48
+
export const myUiColorTheme = stylex.createTheme(uiColor, {
49
+
bg: mauve.bg1,
50
+
bgSubtle: mauve.bg2,
51
+
bgDim: mauve.component1,
52
+
bgSecondary: mauve.component2,
53
+
bgActive: mauve.component3,
54
+
borderDim: mauve.border1,
55
+
border: mauve.border2,
56
+
borderInteractive: mauve.border3,
57
+
bgSolid: mauve.solid1,
58
+
bgSolidDark: mauve.solid2,
59
+
textDim: mauve.text1,
60
+
text: mauve.text2,
61
+
textContrast: mauve.textContrast,
62
+
});
63
+
```
64
+
65
+
## Applying a Theme
66
+
67
+
After that all you need to do is apply the theme to your application.
68
+
69
+
```tsx
70
+
import { myPrimaryColorTheme, myUiColorTheme } from "./theme";
71
+
import * as stylex from "@stylexjs/stylex";
72
+
73
+
export function MyApp() {
74
+
return (
75
+
<div {...stylex.props(myPrimaryColorTheme, myUiColorTheme)}>
76
+
<App />
77
+
</div>
78
+
);
79
+
}
80
+
```
81
+
82
+
> NOTE: you can apply a theme to any part of your application, not just the root component.
+47
apps/docs/src/docs/introduction.mdx
+47
apps/docs/src/docs/introduction.mdx
···
1
+
---
2
+
title: Introduction
3
+
description: Bootstrap your project and design system with Hip UI.
4
+
---
5
+
6
+
import { Technology } from "../examples/introduction";
7
+
8
+
Hip UI is a design system for building modern web applications.
9
+
It provides a set of components and tokens that help you build your application quickly and efficiently with a consistent design system.
10
+
11
+
Hip UI itself is not a library that you install, rather it is a ready made design system that you copy directly into your project (like [shadcn/ui](https://ui.shadcn.com/docs)).
12
+
This gives you as much or as little control as you need to build your application.
13
+
You can use the components and tokens as is, or you can customize them to your liking.
14
+
15
+
The main difference between Hip UI and shadcn/ui is that Hip UI is built on two different technologies:
16
+
17
+
<Technology />
18
+
19
+
Beyond that we've taken extra care to include all the component you might need to render full applications.
20
+
Whether thats navbars, footer, or page layouts, Hip UI has you covered.
21
+
22
+
## Installation
23
+
24
+
To get started with hip you can either install all the components at once:
25
+
26
+
```bash
27
+
pnpx hip-ui install --all
28
+
```
29
+
30
+
Or intall components one at a time as you need them:
31
+
32
+
```bash
33
+
pnpx hip-ui install button
34
+
pnpx hip-ui install typography
35
+
pnpx hip-ui install flex
36
+
pnpx hip-ui install content
37
+
pnpx hip-ui install copy-to-clipboard-button
38
+
pnpx hip-ui install tooltip
39
+
```
40
+
41
+
## Navigating the docs
42
+
43
+
The docs are organized into the following categories:
44
+
45
+
- **Foundations** - The tokens that are use to build the design system and style your UI
46
+
- **Components** - All the available components in Hip UI, organized by category
47
+
- **Showcases** - Examples of how to use Hip UI in real world applications
+176
apps/docs/src/examples/foundations/theming.tsx
+176
apps/docs/src/examples/foundations/theming.tsx
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
3
+
import { Button } from "@/components/button";
4
+
import {
5
+
Card,
6
+
CardBody,
7
+
CardDescription,
8
+
CardFooter,
9
+
CardHeader,
10
+
CardTitle,
11
+
} from "@/components/card";
12
+
import { Grid } from "@/components/grid";
13
+
import { Text } from "@/components/typography/text";
14
+
15
+
import { primaryColor, uiColor } from "../../components/theme/color.stylex";
16
+
import { radius } from "../../components/theme/radius.stylex";
17
+
import { spacing } from "../../components/theme/spacing.stylex";
18
+
import { fontFamily } from "../../components/theme/typography.stylex";
19
+
20
+
const cyberpunkPrimaryTheme = stylex.createTheme(primaryColor, {
21
+
bg: "light-dark(#fafefa, #0b140b)",
22
+
bgSubtle: "light-dark(#f4fcf3, #0f1b0f)",
23
+
component1: "light-dark(#e6f6eb, #122d13)",
24
+
component2: "light-dark(#d6f1df, #123c15)",
25
+
component3: "light-dark(#c4e8d1, #144b19)",
26
+
border1: "light-dark(#c2e1d0, #175a1e)",
27
+
border2: "light-dark(#b0d9c0, #1a6b24)",
28
+
border3: "light-dark(#9ecdb2, #1a8028)",
29
+
solid1: "light-dark(#008000, #1efd4a)",
30
+
solid2: "light-dark(#006400, #25f149)",
31
+
text1: "light-dark(#004d00, #2cf44d)",
32
+
text2: "light-dark(#003300, #b1ffb2)",
33
+
textContrast: "light-dark(#152715, #152715)",
34
+
});
35
+
36
+
const cyberpunkUiTheme = stylex.createTheme(uiColor, {
37
+
bg: "light-dark(#fafefb, #0d130d)",
38
+
bgSubtle: "light-dark(#f5fbf6, #151a15)",
39
+
component1: "light-dark(#ebf3ed, #1d241d)",
40
+
component2: "light-dark(#e3ebe4, #242b24)",
41
+
component3: "light-dark(#dbe4dd, #2a332a)",
42
+
border1: "light-dark(#d2dcd4, #323d32)",
43
+
border2: "light-dark(#c7d1c9, #3e4c3d)",
44
+
border3: "light-dark(#b2bfb5, #536652)",
45
+
solid1: "light-dark(#839086, #5a7659)",
46
+
solid2: "light-dark(#79857c, #688367)",
47
+
text1: "light-dark(#5b675e, #a4baa3)",
48
+
text2: "light-dark(#18221b, #e9efe9)",
49
+
textContrast: "light-dark(#FFFFFF, #FFFFFF)",
50
+
});
51
+
52
+
const cyberpunkFontFamilyTheme = stylex.createTheme(fontFamily, {
53
+
title: "Orbitron",
54
+
sans: "Roboto Flex",
55
+
serif: "Roboto Serif",
56
+
mono: "JetBrains Mono",
57
+
});
58
+
59
+
const squareRadiusTheme = stylex.createTheme(radius, {
60
+
xs: "0px",
61
+
sm: "0px",
62
+
md: "0px",
63
+
lg: "0px",
64
+
xl: "0px",
65
+
"2xl": "0px",
66
+
"3xl": "0px",
67
+
"4xl": "0px",
68
+
full: "0px",
69
+
});
70
+
71
+
const tightSpacingTheme = stylex.createTheme(spacing, {
72
+
px: "1px",
73
+
"0": "0px",
74
+
"0.5": "0.09375rem",
75
+
"1": "0.1875rem",
76
+
"1.5": "0.28125rem",
77
+
"2": "0.375rem",
78
+
"2.5": "0.46875rem",
79
+
"3": "0.5625rem",
80
+
"3.5": "0.65625rem",
81
+
"4": "0.75rem",
82
+
"5": "0.9375rem",
83
+
"6": "1.125rem",
84
+
"7": "1.3125rem",
85
+
"8": "1.5rem",
86
+
"9": "1.6875rem",
87
+
"10": "1.875rem",
88
+
"11": "2.0625rem",
89
+
"12": "2.25rem",
90
+
"14": "2.625rem",
91
+
"16": "3rem",
92
+
"20": "3.75rem",
93
+
"24": "4.5rem",
94
+
"28": "5.25rem",
95
+
"32": "6rem",
96
+
"36": "6.75rem",
97
+
"40": "7.5rem",
98
+
"44": "8.25rem",
99
+
"48": "9rem",
100
+
"52": "9.75rem",
101
+
"56": "10.5rem",
102
+
"60": "11.25rem",
103
+
"64": "12rem",
104
+
"72": "13.5rem",
105
+
"80": "15rem",
106
+
"96": "18rem",
107
+
});
108
+
109
+
const cyberpunkCardTheme = [
110
+
cyberpunkUiTheme,
111
+
cyberpunkPrimaryTheme,
112
+
cyberpunkFontFamilyTheme,
113
+
squareRadiusTheme,
114
+
tightSpacingTheme,
115
+
];
116
+
117
+
const styles = stylex.create({
118
+
demo: {
119
+
width: "100%",
120
+
},
121
+
panel: {
122
+
gap: spacing["3"],
123
+
display: "flex",
124
+
flexDirection: "column",
125
+
},
126
+
card: {
127
+
width: "100%",
128
+
},
129
+
});
130
+
131
+
export function ThemingExample() {
132
+
const card = (
133
+
<Card style={styles.card}>
134
+
<CardHeader>
135
+
<CardTitle>Neon District</CardTitle>
136
+
<CardDescription>
137
+
The default token set keeps the card soft and neutral.
138
+
</CardDescription>
139
+
</CardHeader>
140
+
<CardBody>
141
+
<Text>
142
+
Doors open at 21:00 with live visuals, modular synth sets, and a
143
+
late-night rooftop broadcast.
144
+
</Text>
145
+
</CardBody>
146
+
<CardFooter>
147
+
<Button variant="secondary">Learn More</Button>
148
+
<Button>Reserve Spot</Button>
149
+
</CardFooter>
150
+
</Card>
151
+
);
152
+
153
+
return (
154
+
<>
155
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
156
+
<link
157
+
rel="preconnect"
158
+
href="https://fonts.gstatic.com"
159
+
crossOrigin="anonymous"
160
+
/>
161
+
<link
162
+
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Orbitron:wght@400..900&family=Roboto+Flex:opsz,wght,XOPQ,XTRA,YOPQ,YTDE,YTFI,YTLC,YTUC@8..144,100..1000,96,468,79,-203,738,514,712&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap"
163
+
rel="stylesheet"
164
+
/>
165
+
<Grid
166
+
columns="repeat(auto-fit, minmax(280px, 1fr))"
167
+
columnGap="6"
168
+
rowGap="6"
169
+
style={styles.demo}
170
+
>
171
+
<div {...stylex.props(styles.panel)}>{card}</div>
172
+
<div {...stylex.props(styles.panel, cyberpunkCardTheme)}>{card}</div>
173
+
</Grid>
174
+
</>
175
+
);
176
+
}
+66
apps/docs/src/examples/introduction/index.tsx
+66
apps/docs/src/examples/introduction/index.tsx
···
1
+
import {
2
+
Disclosure,
3
+
DisclosurePanel,
4
+
DisclosureTitle,
5
+
} from "@/components/disclosure";
6
+
import { DisclosureGroup } from "@/components/disclosure-group";
7
+
import { Flex } from "@/components/flex";
8
+
import { Body } from "@/components/typography";
9
+
import { Text } from "@/components/typography/text";
10
+
11
+
export function Technology() {
12
+
return (
13
+
<DisclosureGroup allowsMultipleExpanded>
14
+
<Disclosure>
15
+
<DisclosureTitle>
16
+
<Text variant="primary" weight="normal">
17
+
<Text weight="bold">StyleX</Text> for styling instead of tailwindcss
18
+
</Text>
19
+
</DisclosureTitle>
20
+
<DisclosurePanel>
21
+
<Flex direction="column" gap="6">
22
+
<Body>
23
+
While tailwindcss is a great tool for styling, it is not great
24
+
when trying to maintain a design system. If you look at other
25
+
tools like Hip UI that rely on tailwindcss, you'll notice that the
26
+
output is very hard to understand and extend.
27
+
</Body>
28
+
<Body>
29
+
On the other hand, StyleX is a great tool for styling and is very
30
+
easy to understand and extend. It is also built for creating
31
+
design systems and is very easy to use and very easy to scale to
32
+
large projects. It also has great suuport for design tokens and
33
+
theming.
34
+
</Body>
35
+
</Flex>
36
+
</DisclosurePanel>
37
+
</Disclosure>
38
+
<Disclosure>
39
+
<DisclosureTitle>
40
+
<Text variant="primary" weight="normal">
41
+
<Text weight="bold">React Aria</Text> for accessibility and behavior
42
+
rather than Radix UI
43
+
</Text>
44
+
</DisclosureTitle>
45
+
<DisclosurePanel>
46
+
<Flex direction="column" gap="6">
47
+
<Body>
48
+
Radix UI paved the way for what we consider a industry cleass
49
+
headless component libarary. However over the years the management
50
+
of the project has fallen through the cracks, most of the team
51
+
left the company after the aquisition, and the remaing team is
52
+
working on a new headless component libarary.
53
+
</Body>
54
+
<Body>
55
+
Given the state of the project, we decided to go for what seems
56
+
like the new gold standard for headless component libararies,
57
+
React Aria. React Aria supports most of the things Radix UI does,
58
+
plus a whole host of other useful component patterns. It truly is
59
+
an accessible primitive layer that most web UI can be built upon.
60
+
</Body>
61
+
</Flex>
62
+
</DisclosurePanel>
63
+
</Disclosure>
64
+
</DisclosureGroup>
65
+
);
66
+
}
+17
-1
apps/docs/src/routes/docs.tsx
+17
-1
apps/docs/src/routes/docs.tsx
···
78
78
79
79
const sidebarItems: Array<SidebarItem> = [
80
80
{
81
+
id: "introduction",
82
+
label: "Introduction",
83
+
to: "/docs/$",
84
+
params: { _splat: "introduction" },
85
+
},
86
+
{
81
87
id: "foundations",
82
88
label: "Foundations",
83
89
items: foundationDocs.map((doc) => ({
···
175
181
</Text>
176
182
</SidebarHeader>
177
183
{sidebarItems.map((item) => {
184
+
console.log(item);
178
185
if (!item.items) {
179
-
return null;
186
+
return (
187
+
<SidebarItemLink
188
+
key={item.id}
189
+
to={item.to}
190
+
params={item.params}
191
+
isActive={currentItem?.id === item.id}
192
+
>
193
+
{item.label}
194
+
</SidebarItemLink>
195
+
);
180
196
}
181
197
182
198
return (