A design system in a box.
hip-ui.tngl.io/docs/introduction
keyboard looks like keys
+45
-11
+8
-3
apps/docs/src/components/header-layout/index.tsx
+8
-3
apps/docs/src/components/header-layout/index.tsx
···
9
9
10
10
const styles = stylex.create({
11
11
root: {
12
-
"--page-content-max-width": "1280px",
13
12
backgroundColor: uiColor.bg,
14
13
containerType: "inline-size",
15
14
display: "flex",
···
17
16
minHeight: "100vh",
18
17
width: "100cqw",
19
18
},
19
+
rootMaxWidth: (maxWidth: string | undefined) => ({
20
+
"--page-content-max-width": maxWidth || "1280px",
21
+
}),
20
22
header: {
21
23
flexShrink: 0,
22
24
},
···
88
90
*/
89
91
export interface HeaderLayoutRootProps extends StyleXComponentProps<
90
92
React.ComponentProps<"div">
91
-
> {}
93
+
> {
94
+
maxWidth?: string;
95
+
}
92
96
93
97
export const HeaderLayoutRoot = ({
94
98
style,
99
+
maxWidth,
95
100
...props
96
101
}: HeaderLayoutRootProps) => {
97
102
return (
98
103
<div
99
104
{...props}
100
-
{...stylex.props(styles.root, style)}
105
+
{...stylex.props(styles.root, styles.rootMaxWidth(maxWidth), style)}
101
106
data-header-layout={true}
102
107
/>
103
108
);
+9
-2
apps/docs/src/components/kbd/index.tsx
+9
-2
apps/docs/src/components/kbd/index.tsx
···
6
6
import { radius } from "../theme/radius.stylex";
7
7
import { spacing } from "../theme/spacing.stylex";
8
8
import { StyleXComponentProps } from "../theme/types";
9
-
import { fontFamily, fontSize, tracking } from "../theme/typography.stylex";
9
+
import { fontFamily, lineHeight, tracking } from "../theme/typography.stylex";
10
10
11
11
const styles = stylex.create({
12
12
kbd: {
13
13
// eslint-disable-next-line @stylexjs/valid-styles
14
14
cornerShape: "squircle",
15
+
borderColor: uiColor.border2,
15
16
borderRadius: {
16
17
default: radius["sm"],
17
18
[mediaQueries.supportsSquircle]: radius["3xl"],
18
19
},
20
+
borderStyle: "solid",
21
+
borderWidth: "1px",
19
22
backgroundColor: uiColor.component2,
23
+
boxShadow: `0 2px 0 1px ${uiColor.border2}`,
20
24
color: uiColor.text1,
21
25
fontFamily: fontFamily["sans"],
22
-
fontSize: fontSize.sm,
26
+
fontSize: "0.75em",
23
27
letterSpacing: tracking["widest"],
28
+
lineHeight: lineHeight["none"],
29
+
position: "relative",
24
30
paddingBottom: spacing["0.5"],
25
31
paddingLeft: spacing["1"],
26
32
paddingRight: spacing["1"],
27
33
paddingTop: spacing["0.5"],
34
+
top: "-1px",
28
35
},
29
36
});
30
37
+9
-1
apps/docs/src/components/table/index.tsx
+9
-1
apps/docs/src/components/table/index.tsx
···
66
66
":is(:first-child > *)": spacing["2"],
67
67
},
68
68
},
69
+
columnHeaderSortable: {
70
+
cursor: "pointer",
71
+
},
69
72
tableBody: {},
70
73
cell: {
71
74
overflow: "auto",
···
225
228
return (
226
229
<AriaColumn {...props} {...stylex.props(styles.column, style)}>
227
230
{({ allowsSorting, sortDirection }) => (
228
-
<div {...stylex.props(styles.columnHeader)}>
231
+
<div
232
+
{...stylex.props(
233
+
styles.columnHeader,
234
+
allowsSorting && styles.columnHeaderSortable,
235
+
)}
236
+
>
229
237
<div {...stylex.props(styles.cellContent, styles.columnHeader)}>
230
238
<Flex align="center" gap="1">
231
239
<LabelText
+10
-3
apps/docs/src/examples/kbd/basic.tsx
+10
-3
apps/docs/src/examples/kbd/basic.tsx
···
1
+
import { Flex } from "@/components/flex";
1
2
import { Kbd } from "@/components/kbd";
2
3
3
4
export function Basic() {
4
5
return (
5
-
<div>
6
-
Press <Kbd>MetaOrCtrl+K</Kbd> to open the command menu.
7
-
</div>
6
+
<Flex direction="column" gap="2">
7
+
<div>
8
+
Press <Kbd>MetaOrCtrl+K</Kbd> to open the command menu.
9
+
</div>
10
+
<div>
11
+
Press <Kbd>MetaOrCtrl</Kbd> + <Kbd>Shift</Kbd> + <Kbd>P</Kbd> to open
12
+
the file menu.
13
+
</div>
14
+
</Flex>
8
15
);
9
16
}
+9
-2
packages/hip-ui/src/components/kbd/index.tsx
+9
-2
packages/hip-ui/src/components/kbd/index.tsx
···
6
6
import { radius } from "../theme/radius.stylex";
7
7
import { spacing } from "../theme/spacing.stylex";
8
8
import { StyleXComponentProps } from "../theme/types";
9
-
import { fontFamily, fontSize, tracking } from "../theme/typography.stylex";
9
+
import { fontFamily, lineHeight, tracking } from "../theme/typography.stylex";
10
10
11
11
const styles = stylex.create({
12
12
kbd: {
13
13
// eslint-disable-next-line @stylexjs/valid-styles
14
14
cornerShape: "squircle",
15
+
borderColor: uiColor.border2,
15
16
borderRadius: {
16
17
default: radius["sm"],
17
18
[mediaQueries.supportsSquircle]: radius["3xl"],
18
19
},
20
+
borderStyle: "solid",
21
+
borderWidth: "1px",
19
22
backgroundColor: uiColor.component2,
23
+
boxShadow: `0 2px 0 1px ${uiColor.border2}`,
20
24
color: uiColor.text1,
21
25
fontFamily: fontFamily["sans"],
22
-
fontSize: fontSize.sm,
26
+
fontSize: "0.75em",
23
27
letterSpacing: tracking["widest"],
28
+
lineHeight: lineHeight["none"],
29
+
position: "relative",
24
30
paddingBottom: spacing["0.5"],
25
31
paddingLeft: spacing["1"],
26
32
paddingRight: spacing["1"],
27
33
paddingTop: spacing["0.5"],
34
+
top: "-1px",
28
35
},
29
36
});
30
37