Theming in hip-ui
0
example.tsx
1import * as stylex from "@stylexjs/stylex";
2
3import { Button } from "@/components/button";
4import {
5 Card,
6 CardBody,
7 CardDescription,
8 CardFooter,
9 CardHeader,
10 CardTitle,
11} from "@/components/card";
12import { Grid } from "@/components/grid";
13import { Text } from "@/components/typography/text";
14
15import { primaryColor, uiColor } from "../../components/theme/color.stylex";
16import { radius } from "../../components/theme/radius.stylex";
17import { spacing } from "../../components/theme/spacing.stylex";
18import { fontFamily } from "../../components/theme/typography.stylex";
19
20const 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
36const 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
52const cyberpunkFontFamilyTheme = stylex.createTheme(fontFamily, {
53 title: "Orbitron",
54 sans: "Roboto Flex",
55 serif: "Roboto Serif",
56 mono: "JetBrains Mono",
57});
58
59const 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
71const 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
109const cyberpunkCardTheme = [
110 cyberpunkUiTheme,
111 cyberpunkPrimaryTheme,
112 cyberpunkFontFamilyTheme,
113 squareRadiusTheme,
114 tightSpacingTheme,
115];
116
117const 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
131export 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}