A design system in a box.
hip-ui.tngl.io/docs/introduction
finish up theming docs
+27
-10
+4
-3
apps/docs/src/components/card/index.tsx
+4
-3
apps/docs/src/components/card/index.tsx
···
104
104
},
105
105
cardDescription: {
106
106
gridArea: "description",
107
+
fontSize: fontSize["sm"],
108
+
fontWeight: fontWeight["normal"],
109
+
lineHeight: lineHeight["sm"],
107
110
marginBottom: 0,
108
111
marginLeft: 0,
109
112
marginRight: 0,
110
113
marginTop: 0,
111
-
fontSize: fontSize["sm"],
112
-
fontWeight: fontWeight["normal"],
113
-
lineHeight: lineHeight["sm"],
114
114
},
115
115
cardBody: {
116
116
// eslint-disable-next-line @stylexjs/valid-styles
···
122
122
flexDirection: "column",
123
123
fontSize: {
124
124
":is([data-card-size='lg'] *)": fontSize["lg"],
125
+
":is([data-card-size='md'] *)": fontSize["base"],
125
126
":is([data-card-size='sm'] *)": fontSize["xs"],
126
127
},
127
128
},
+18
-1
apps/docs/src/examples/foundations/theming.tsx
+18
-1
apps/docs/src/examples/foundations/theming.tsx
···
19
19
horizontalSpace,
20
20
verticalSpace,
21
21
} from "../../components/theme/semantic-spacing.stylex";
22
-
import { fontFamily } from "../../components/theme/typography.stylex";
22
+
import { fontFamily, fontSize } from "../../components/theme/typography.stylex";
23
23
24
24
const cyberpunkPrimaryTheme = stylex.createTheme(primaryColor, {
25
25
bg: "light-dark(#fafefa, #0b140b)",
···
58
58
sans: "Roboto Flex",
59
59
serif: "Roboto Serif",
60
60
mono: "JetBrains Mono",
61
+
});
62
+
63
+
const cyberpunkFontSizeTheme = stylex.createTheme(fontSize, {
64
+
xs: "0.675rem",
65
+
sm: "0.765rem",
66
+
base: "0.9rem",
67
+
lg: "1.0125rem",
68
+
xl: "1.125rem",
69
+
"2xl": "1.35rem",
70
+
"3xl": "1.6875rem",
71
+
"4xl": "2.025rem",
72
+
"5xl": "2.7rem",
73
+
"6xl": "3.375rem",
74
+
"7xl": "4.05rem",
75
+
"8xl": "5.4rem",
76
+
"9xl": "7.2rem",
61
77
});
62
78
63
79
const squareRadiusTheme = stylex.createTheme(radius, {
···
134
150
cyberpunkPrimaryTheme,
135
151
cyberpunkFontFamilyTheme,
136
152
squareRadiusTheme,
153
+
cyberpunkFontSizeTheme,
137
154
tightSpacingHorizontalSpaceTheme,
138
155
tightSpacingVerticalSpaceTheme,
139
156
tightSpacingGapTheme,
+4
-6
apps/docs/src/routes/index.tsx
+4
-6
apps/docs/src/routes/index.tsx
···
1
-
import { createFileRoute } from "@tanstack/react-router";
1
+
import { createFileRoute, redirect } from "@tanstack/react-router";
2
2
3
3
export const Route = createFileRoute("/")({
4
-
component: App,
4
+
beforeLoad: async () => {
5
+
throw redirect({ to: "/docs/$", params: { _splat: "introduction" } });
6
+
},
5
7
});
6
-
7
-
function App() {
8
-
return <div>foo</div>;
9
-
}