A design system in a box.
hip-ui.tngl.io/docs/introduction
---fix
+201
-209
+1
-38
.oxlintrc.json
+1
-38
.oxlintrc.json
···
1
-
{
2
-
"$schema": "./node_modules/oxlint/configuration_schema.json",
3
-
"extends": ["config/oxlint/rules-base.json", "config/oxlint/overrides.json"],
4
-
"categories": { "correctness": "off" },
5
-
"env": { "builtin": true, "es2026": true },
6
-
"ignorePatterns": [
7
-
"**/node_modules",
8
-
"**/.DS_Store",
9
-
"**/dist",
10
-
"**/*.local",
11
-
"**/.env",
12
-
"**/.next",
13
-
"**/.nitro",
14
-
"**/.tanstack",
15
-
"**/.wrangler",
16
-
"**/.output",
17
-
"**/.vinxi",
18
-
"**/.content-collections",
19
-
"**/.vite",
20
-
"**/.nx/**",
21
-
"**/build/**",
22
-
"**/coverage/**",
23
-
"**/dist/**",
24
-
"**/snap/**",
25
-
"**/vite.config.*.timestamp-*.*",
26
-
"eslint.config.*"
27
-
],
28
-
"jsPlugins": [
29
-
"@eslint-community/eslint-plugin-eslint-comments",
30
-
"eslint-plugin-perfectionist",
31
-
"@stylexjs/eslint-plugin"
32
-
],
33
-
"settings": {
34
-
"import-x/resolver": {
35
-
"typescript": { "alwaysTryTypes": true }
36
-
}
37
-
}
38
-
}
1
+
{"$schema":"./node_modules/oxlint/configuration_schema.json","extends":["config/oxlint/rules-base.json","config/oxlint/overrides.json"],"categories":{"correctness":"off"},"env":{"builtin":true,"es2026":true},"ignorePatterns":["**/node_modules","**/.DS_Store","**/dist","**/*.local","**/.env","**/.next","**/.nitro","**/.tanstack","**/.wrangler","**/.output","**/.vinxi","**/.content-collections","**/.vite","**/.nx/**","**/build/**","**/coverage/**","**/dist/**","**/snap/**","**/vite.config.*.timestamp-*.*","eslint.config.*","**/routeTree.gen.ts"],"jsPlugins":["@eslint-community/eslint-plugin-eslint-comments","eslint-plugin-perfectionist","@stylexjs/eslint-plugin"],"settings":{"import-x/resolver":{"typescript":{"alwaysTryTypes":true}}}}
+1
README.md
+1
README.md
+4
-2
apps/docs/src/components/alert/index.tsx
+4
-2
apps/docs/src/components/alert/index.tsx
···
21
21
uiColor,
22
22
warningColor,
23
23
} from "../theme/color.stylex";
24
-
import { maxBreakpoints } from "../theme/media-queries.stylex";
25
-
import { mediaQueries } from "../theme/media-queries.stylex";
24
+
import {
25
+
maxBreakpoints,
26
+
mediaQueries,
27
+
} from "../theme/media-queries.stylex";
26
28
import { radius } from "../theme/radius.stylex";
27
29
import {
28
30
critical,
+14
-3
apps/docs/src/components/calendar/index.tsx
+14
-3
apps/docs/src/components/calendar/index.tsx
···
1
-
import type { CalendarGridProps, DateValue } from "react-aria-components";
2
-
import type { CalendarProps as AriaCalendarProps } from 'react-aria-components';
1
+
import type {
2
+
CalendarProps as AriaCalendarProps,
3
+
CalendarGridProps,
4
+
DateValue,
5
+
} from "react-aria-components";
3
6
4
7
import * as stylex from "@stylexjs/stylex";
5
8
import { ChevronLeft, ChevronRight } from "lucide-react";
6
-
import { Calendar as AriaCalendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, Heading } from 'react-aria-components';
9
+
import {
10
+
Calendar as AriaCalendar,
11
+
CalendarCell,
12
+
CalendarGrid,
13
+
CalendarGridBody,
14
+
CalendarGridHeader,
15
+
CalendarHeaderCell,
16
+
Heading,
17
+
} from "react-aria-components";
7
18
8
19
import type { StyleXComponentProps } from "../theme/types";
9
20
+14
-3
apps/docs/src/components/color-picker/index.tsx
+14
-3
apps/docs/src/components/color-picker/index.tsx
···
1
-
import type { Color, ColorSpace, PopoverProps } from "react-aria-components";
2
-
import type { ColorPickerProps as AriaColorPickerProps } from 'react-aria-components';
1
+
import type {
2
+
ColorPickerProps as AriaColorPickerProps,
3
+
Color,
4
+
ColorSpace,
5
+
PopoverProps,
6
+
} from "react-aria-components";
3
7
4
8
import * as stylex from "@stylexjs/stylex";
5
9
import { Pipette } from "lucide-react";
6
10
import { createContext, use } from "react";
7
-
import { ColorPicker as AriaColorPicker, Button, ColorPickerStateContext, Dialog, DialogTrigger, Popover } from 'react-aria-components';
11
+
import {
12
+
ColorPicker as AriaColorPicker,
13
+
Button,
14
+
ColorPickerStateContext,
15
+
Dialog,
16
+
DialogTrigger,
17
+
Popover,
18
+
} from "react-aria-components";
8
19
9
20
import type { FlexProps } from "../flex";
10
21
import type { Size, StyleXComponentProps } from "../theme/types";
+14
-3
apps/docs/src/components/range-calendar/index.tsx
+14
-3
apps/docs/src/components/range-calendar/index.tsx
···
1
-
import type { CalendarGridProps, DateValue } from "react-aria-components";
2
-
import type { RangeCalendarProps as AriaRangeCalendarProps } from 'react-aria-components';
1
+
import type {
2
+
RangeCalendarProps as AriaRangeCalendarProps,
3
+
CalendarGridProps,
4
+
DateValue,
5
+
} from "react-aria-components";
3
6
4
7
import * as stylex from "@stylexjs/stylex";
5
8
import { ChevronLeft, ChevronRight } from "lucide-react";
6
-
import { RangeCalendar as AriaRangeCalendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, Heading } from 'react-aria-components';
9
+
import {
10
+
RangeCalendar as AriaRangeCalendar,
11
+
CalendarCell,
12
+
CalendarGrid,
13
+
CalendarGridBody,
14
+
CalendarGridHeader,
15
+
CalendarHeaderCell,
16
+
Heading,
17
+
} from "react-aria-components";
7
18
8
19
import type { StyleXComponentProps } from "../theme/types";
9
20
+5
-2
apps/docs/src/components/theme/useCalendarStyles.ts
+5
-2
apps/docs/src/components/theme/useCalendarStyles.ts
···
1
-
import type { CalendarGridProps, DateValue } from "react-aria-components";
2
-
import type { CalendarProps as AriaCalendarProps } from 'react-aria-components';
1
+
import type {
2
+
CalendarProps as AriaCalendarProps,
3
+
CalendarGridProps,
4
+
DateValue,
5
+
} from "react-aria-components";
3
6
4
7
import * as stylex from "@stylexjs/stylex";
5
8
+2
apps/docs/src/components/toast/index.tsx
+2
apps/docs/src/components/toast/index.tsx
···
1
+
/* eslint-disable react-refresh/only-export-components -- barrel file re-exports components and utilities */
1
2
export { toasts, type ToastContentType } from "./queue";
2
3
export { type ToastRegionProps, ToastRegion } from "./Toast";
4
+
/* eslint-enable react-refresh/only-export-components */
-3
apps/docs/src/examples/dialog/basic.tsx
-3
apps/docs/src/examples/dialog/basic.tsx
···
1
-
import * as stylex from "@stylexjs/stylex";
2
-
3
1
import { Button } from "@/components/button";
4
2
import {
5
3
Dialog,
···
7
5
DialogFooter,
8
6
DialogHeader,
9
7
} from "@/components/dialog";
10
-
import { spacing } from "@/components/theme/spacing.stylex";
11
8
import { Body } from "@/components/typography";
12
9
13
10
export function Basic() {
+2
-1
apps/docs/src/examples/foundations/animations.tsx
+2
-1
apps/docs/src/examples/foundations/animations.tsx
···
51
51
justifyContent: "center",
52
52
},
53
53
previewArea: {
54
+
padding: spacing["4"],
54
55
borderColor: uiColor.border2,
55
56
borderRadius: radius["lg"],
56
57
borderStyle: "solid",
57
-
padding: spacing["4"],
58
58
borderWidth: 1,
59
59
overflow: "hidden",
60
60
backgroundColor: uiColor.component2,
···
85
85
animationDelay: animationDuration.default,
86
86
animationDuration: duration,
87
87
animationFillMode: "forwards",
88
+
// eslint-disable-next-line @stylexjs/valid-styles -- dynamic animation composition
88
89
animationName: `${slideLeftToRight}, ${animationName as string}`,
89
90
animationTimingFunction: timingFunction,
90
91
backgroundColor: primaryColor.solid1,
+1
-1
apps/docs/src/examples/tree/basic.tsx
+1
-1
apps/docs/src/examples/tree/basic.tsx
+17
-13
apps/docs/src/examples/tree/drag-and-drop.tsx
+17
-13
apps/docs/src/examples/tree/drag-and-drop.tsx
···
3
3
import type { DropIndicatorProps } from "react-aria-components";
4
4
5
5
import * as stylex from "@stylexjs/stylex";
6
-
import { useDragAndDrop } from "react-aria-components";
7
-
import { DropIndicator } from "react-aria-components";
6
+
import { DropIndicator, useDragAndDrop } from "react-aria-components";
8
7
import { useTreeData } from "react-stately";
9
8
10
9
import { Tree, TreeItem } from "@/components/tree";
···
64
63
},
65
64
];
66
65
66
+
function renderTreeItem(item: {
67
+
value: { id: string; name: string };
68
+
children?: Array<{ value: { id: string; name: string }; children?: Array<unknown> }>;
69
+
}): React.ReactNode {
70
+
return (
71
+
<TreeItem
72
+
key={item.value.id}
73
+
id={item.value.id}
74
+
title={item.value.name}
75
+
>
76
+
{item.children?.map((child) => renderTreeItem(child))}
77
+
</TreeItem>
78
+
);
79
+
}
80
+
67
81
export function DragAndDrop() {
68
82
const tree = useTreeData({
69
83
initialItems,
···
109
123
items={tree.items}
110
124
dragAndDropHooks={dragAndDropHooks}
111
125
>
112
-
{function renderTreeItem(item): React.ReactNode {
113
-
return (
114
-
<TreeItem
115
-
key={item.value.id}
116
-
id={item.value.id}
117
-
title={item.value.name}
118
-
>
119
-
{item.children?.map((child) => renderTreeItem(child))}
120
-
</TreeItem>
121
-
);
122
-
}}
126
+
{renderTreeItem}
123
127
</Tree>
124
128
);
125
129
}
+12
-10
apps/docs/src/examples/tree/virtualization.tsx
+12
-10
apps/docs/src/examples/tree/virtualization.tsx
···
15
15
},
16
16
});
17
17
18
+
function renderTreeItem(item: { id: string; name: string; children?: Array<{ id: string; name: string }> }) {
19
+
return (
20
+
<TreeItem key={item.id} id={item.id} title={item.name}>
21
+
{item.children?.map((child) => (
22
+
<TreeItem key={child.id} id={child.id} title={child.name} />
23
+
))}
24
+
</TreeItem>
25
+
);
26
+
}
27
+
18
28
const treeData = Array.from({ length: 100 }, (_, i) => ({
19
29
id: "folder" + (i + 1),
20
30
name: "Folder " + (i + 1),
21
-
children: Array.from({ length: 20 }, (_, j) => ({
31
+
children: Array.from({ length: 20 }, (__, j) => ({
22
32
id: "file" + (j + 1),
23
33
name: "File " + (j + 1),
24
34
})),
···
27
37
export function Virtualization() {
28
38
return (
29
39
<Tree items={treeData} isVirtualized style={styles.tree}>
30
-
{function renderTreeItem(item) {
31
-
return (
32
-
<TreeItem key={item.id} id={item.id} title={item.name}>
33
-
{item.children.map((child) => (
34
-
<TreeItem key={child.id} id={child.id} title={child.name} />
35
-
))}
36
-
</TreeItem>
37
-
);
38
-
}}
40
+
{renderTreeItem}
39
41
</Tree>
40
42
);
41
43
}
+1
apps/docs/src/lib/ColorPreview.tsx
+1
apps/docs/src/lib/ColorPreview.tsx
+2
-3
apps/docs/src/lib/Example.tsx
+2
-3
apps/docs/src/lib/Example.tsx
···
22
22
marginTop: spacing["8"],
23
23
},
24
24
preview: {
25
-
alignItems: "center",
26
25
padding: spacing["4"],
26
+
alignItems: "center",
27
27
backgroundColor: uiColor.bgSubtle,
28
28
containerType: "inline-size",
29
29
display: "flex",
···
41
41
borderTopWidth: 1,
42
42
},
43
43
code: {
44
-
":is(*) code": {},
45
44
/* eslint-disable @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles */
46
45
":is(*) pre": {
47
46
margin: 0,
···
89
88
ref={ref}
90
89
{...stylex.props(styles.code)}
91
90
// eslint-disable-next-line @eslint-react/dom/no-dangerously-set-innerhtml
92
-
dangerouslySetInnerHTML={{ __html: code }}
91
+
dangerouslySetInnerHTML={{ __html: code ?? "" }}
93
92
/>
94
93
<CopyToClipboardButton style={styles.copyButton} text={textContent} />
95
94
</div>
+5
-16
apps/docs/src/lib/ThemePicker.tsx
+5
-16
apps/docs/src/lib/ThemePicker.tsx
···
12
12
import { IconButton } from "@/components/icon-button";
13
13
import { Select, SelectItem } from "@/components/select";
14
14
15
-
import type {
16
-
Color,
17
-
PrimaryColor,
18
-
UiColor} from "./ThemeContext";
15
+
import type { Color, PrimaryColor, UiColor } from "./ThemeContext";
19
16
20
17
import { ColorPreview } from "./ColorPreview";
21
-
import {
22
-
ThemeContext,
23
-
primaryColors,
24
-
uiNames,
25
-
} from "./ThemeContext";
18
+
import { ThemeContext, primaryColors, uiNames } from "./ThemeContext";
26
19
27
20
function ColorSelect<T extends Color>({
28
21
color,
···
42
35
value={color}
43
36
onChange={(value) => onChange(value as T)}
44
37
>
45
-
{colors.map((color) => (
46
-
<SelectItem
47
-
key={color}
48
-
id={color}
49
-
prefix={<ColorPreview color={color} />}
50
-
>
51
-
{capitalCase(color)}
38
+
{colors.map((c) => (
39
+
<SelectItem key={c} id={c} prefix={<ColorPreview color={c} />}>
40
+
{capitalCase(c)}
52
41
</SelectItem>
53
42
))}
54
43
</Select>
+1
-4
apps/docs/src/routes/__root.tsx
+1
-4
apps/docs/src/routes/__root.tsx
···
6
6
import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
7
7
import { useState } from "react";
8
8
9
-
import type {
10
-
Color,
11
-
Theme,
12
-
UiColor} from "@/lib/ThemeContext";
9
+
import type { Color, Theme, UiColor } from "@/lib/ThemeContext";
13
10
14
11
import {
15
12
ThemeContext,
+11
-12
apps/docs/src/routes/docs.$.tsx
+11
-12
apps/docs/src/routes/docs.$.tsx
···
1
1
import type { MDXComponents } from "mdx/types";
2
2
import type { JSX as Jsx } from "react/jsx-runtime";
3
3
4
+
import * as stylex from "@stylexjs/stylex";
4
5
import {
5
6
createFileRoute,
6
7
createLink,
7
8
useLocation,
8
9
} from "@tanstack/react-router";
9
-
10
-
declare global {
11
-
// eslint-disable-next-line @typescript-eslint/no-namespace
12
-
namespace JSX {
13
-
type ElementClass = Jsx.ElementClass;
14
-
type Element = Jsx.Element;
15
-
type IntrinsicElements = Jsx.IntrinsicElements;
16
-
}
17
-
}
18
-
19
-
import * as stylex from "@stylexjs/stylex";
20
10
import { allDocs } from "content-collections";
21
11
import { modules, pages } from "virtual:content";
22
12
23
-
import type { LinkProps} from "@/components/link";
13
+
import type { LinkProps } from "@/components/link";
24
14
25
15
import { Content } from "@/components/content";
26
16
import { Flex } from "@/components/flex";
···
45
35
import { Text } from "@/components/typography/text";
46
36
47
37
import { spacing } from "../components/theme/spacing.stylex";
38
+
39
+
declare global {
40
+
// eslint-disable-next-line @typescript-eslint/no-namespace
41
+
namespace JSX {
42
+
type ElementClass = Jsx.ElementClass;
43
+
type Element = Jsx.Element;
44
+
type IntrinsicElements = Jsx.IntrinsicElements;
45
+
}
46
+
}
48
47
49
48
const TypographyRouterLink = createLink(TypographyLink);
50
49
+3
-2
apps/docs/src/routes/docs.tsx
+3
-2
apps/docs/src/routes/docs.tsx
···
45
45
);
46
46
47
47
// Group component docs by folder name
48
+
// oxlint-disable-next-line eslint-plugin-unicorn(no-array-reduce
48
49
const componentGroups = componentDocs.reduce(
49
50
(acc, doc) => {
50
51
// Extract folder name from path like "components/form/select" -> "form"
···
54
55
if (!acc[folderName]) {
55
56
acc[folderName] = [];
56
57
}
57
-
acc[folderName]!.push(doc);
58
+
acc[folderName]?.push(doc);
58
59
return acc;
59
60
},
60
61
{} as Record<string, typeof componentDocs>,
···
150
151
function DocSidebar() {
151
152
const location = useLocation();
152
153
const matches = useMatches();
153
-
const match = matches.find((match) => match.pathname === location.pathname);
154
+
const match = matches.find((m) => m.pathname === location.pathname);
154
155
const currentItem = flatItems.find(
155
156
(item) =>
156
157
match?.params &&
+4
-4
apps/docs/src/showcases/canvas-editor.tsx
+4
-4
apps/docs/src/showcases/canvas-editor.tsx
···
419
419
selectedKeys={[currentPage.id]}
420
420
onSelectionChange={(keys) => {
421
421
if (keys === "all") return;
422
-
const page = pages.find((page) => page.id === [...keys][0]);
423
-
if (page) {
424
-
editor.setCurrentPage(page);
422
+
const selectedPage = pages.find((p) => p.id === [...keys][0]);
423
+
if (selectedPage) {
424
+
editor.setCurrentPage(selectedPage);
425
425
}
426
426
}}
427
427
>
···
1361
1361
)}
1362
1362
<Tldraw
1363
1363
{...stylex.props(styles.canvasArea)}
1364
-
onMount={(editor) => setEditor(editor)}
1364
+
onMount={(mountedEditor) => setEditor(mountedEditor)}
1365
1365
components={{
1366
1366
Toolbar: null,
1367
1367
NavigationPanel: null,
+1
-1
apps/docs/src/showcases/llm.tsx
+1
-1
apps/docs/src/showcases/llm.tsx
+1
-1
apps/docs/src/showcases/music.tsx
+1
-1
apps/docs/src/showcases/music.tsx
···
90
90
color: primaryColor.text2,
91
91
},
92
92
priceBox: {
93
+
padding: spacing["2"],
93
94
borderColor: primaryColor.border2,
94
95
borderRadius: {
95
96
default: radius["sm"],
96
97
"@supports (corner-shape: squircle)": radius["3xl"],
97
98
},
98
99
borderStyle: "solid",
99
-
padding: spacing["2"],
100
100
borderWidth: 1,
101
101
cornerShape: "squircle",
102
102
backgroundColor: primaryColor.bgSubtle,
+4
-7
apps/docs/vite.config.ts
+4
-7
apps/docs/vite.config.ts
···
183
183
184
184
/** Add the example slug to the example function */
185
185
function annotateExamples() {
186
-
let examples: Array<string> = [];
186
+
let exampleFiles: Array<string> = [];
187
187
188
188
return {
189
189
enforce: "pre",
190
190
name: "my-plugin", // required, will show up in warnings and errors
191
191
buildStart: async () => {
192
-
examples = await getExamples();
192
+
exampleFiles = await getExamples();
193
193
},
194
194
195
195
transform(code, id) {
196
-
const example = examples.find((f) => id.includes(f));
196
+
const example = exampleFiles.find((f) => id.includes(f));
197
197
198
198
if (!id.endsWith("?raw") && !id.endsWith("?shiki") && example) {
199
199
const exportName = code.match(/export function (\w+)\(\)/)?.[1];
···
258
258
Object.entries(doc.props).map(async ([key, p]) => {
259
259
const prop = doc.props[key];
260
260
if (!prop) return;
261
-
prop.type.name = await highlightCode(
262
-
p.type.name,
263
-
"typescript",
264
-
);
261
+
prop.type.name = await highlightCode(p.type.name, "typescript");
265
262
266
263
if (prop.defaultValue) {
267
264
const defaultValue = prop.defaultValue as {
+6
-9
apps/example/src/components/KitchenSink.tsx
+6
-9
apps/example/src/components/KitchenSink.tsx
···
31
31
Pin,
32
32
Plus,
33
33
Scissors,
34
-
Search,
35
34
Star,
36
35
} from "lucide-react";
37
-
import { DialogTrigger } from "react-aria-components";
38
36
39
37
import { Button } from "../components/button";
40
38
import { ButtonGroup } from "../components/button-group";
···
63
61
CommandMenuItem,
64
62
CommandMenuSection,
65
63
CommandMenuSectionHeader,
66
-
CommandMenuSeparator,
67
64
} from "./command-menu";
68
65
import { ContextMenu } from "./context-menu";
69
66
import { DateField } from "./date-field";
···
131
128
},
132
129
contextMenuArea: {
133
130
padding: spacing["4"],
131
+
borderColor: slate.border2,
134
132
borderRadius: radius["md"],
135
133
borderStyle: "solid",
136
-
borderColor: slate.border2,
134
+
borderWidth: 1,
135
+
backgroundColor: slate.component1,
137
136
height: "100px",
138
-
borderWidth: 1,
139
137
width: "100px",
140
-
backgroundColor: slate.component1,
141
138
},
142
139
});
143
140
···
182
179
return (
183
180
<Flex direction="column" gap="4">
184
181
{buttons.map((button) => (
185
-
<Flex align="center" gap="2">
182
+
<Flex key={button} align="center" gap="2">
186
183
<SmallBody style={[styles.buttonLabel, gray.textDim]}>
187
184
{button}
188
185
</SmallBody>
···
818
815
return (
819
816
<Flex gap="4">
820
817
{bageVariants.map((variant) => (
821
-
<Flex gap="4" direction="column" style={styles.capitalize}>
818
+
<Flex key={variant} gap="4" direction="column" style={styles.capitalize}>
822
819
<Badge variant={variant}>{variant}</Badge>
823
820
<Badge variant={variant} size="md">
824
821
{variant}
···
871
868
<TitleCard title="Toggle Buttons">
872
869
<Flex direction="column" gap="4">
873
870
{buttons.map((button) => (
874
-
<Flex gap="8">
871
+
<Flex key={button} gap="8">
875
872
{buttonSizes.map(
876
873
(size) =>
877
874
button !== "critical" && (
+2
-2
apps/example/src/components/number-field/index.tsx
+2
-2
apps/example/src/components/number-field/index.tsx
···
31
31
borderWidth: 0,
32
32
alignItems: "center",
33
33
display: "flex",
34
-
borderBottomWidth: 0,
35
34
flexGrow: 1,
36
-
borderLeftStyle: "solid",
37
35
justifyContent: "center",
36
+
borderBottomWidth: 0,
37
+
borderLeftStyle: "solid",
38
38
borderLeftWidth: 1,
39
39
borderRightWidth: 0,
40
40
borderTopWidth: 0,
+3
-2
apps/example/src/components/radio/index.tsx
+3
-2
apps/example/src/components/radio/index.tsx
···
16
16
17
17
import { Flex } from "../flex";
18
18
import { Description, Label } from "../label";
19
+
import { animationDuration } from "../theme/animations.stylex";
19
20
import { radius } from "../theme/radius.stylex";
20
21
import { gray, primary } from "../theme/semantic-color.stylex";
21
22
import { spacing } from "../theme/spacing.stylex";
···
55
56
height: spacing["4"],
56
57
width: spacing["4"],
57
58
58
-
transitionDuration: "100ms",
59
+
transitionDuration: animationDuration.fast,
59
60
transitionProperty: "background-color, border-color, color",
60
61
transitionTimingFunction: "ease-in-out",
61
62
},
···
70
71
left: "50%",
71
72
top: "50%",
72
73
73
-
animationDuration: "100ms",
74
+
animationDuration: animationDuration.fast,
74
75
animationFillMode: "forwards",
75
76
animationName: scaleIn,
76
77
animationTimingFunction: "ease-in-out",
+23
-22
apps/example/src/components/theme/semantic-color.stylex.tsx
+23
-22
apps/example/src/components/theme/semantic-color.stylex.tsx
···
1
1
import * as stylex from "@stylexjs/stylex";
2
2
3
+
import { animationDuration } from "./animations.stylex";
3
4
import { green, plum, red, slate, yellow } from "./colors.stylex";
4
5
import { fontFamily } from "./typography.stylex";
5
6
···
28
29
borderStyle: "solid",
29
30
borderWidth: 1,
30
31
31
-
transitionDuration: "100ms",
32
+
transitionDuration: animationDuration.fast,
32
33
transitionProperty: "background-color, border-color",
33
34
transitionTimingFunction: "ease-in-out",
34
35
},
···
45
46
":hover:not(:has(* button:hover)):not(:disabled)": slate.component2,
46
47
":disabled": slate.component1,
47
48
},
48
-
transitionDuration: "100ms",
49
+
transitionDuration: animationDuration.fast,
49
50
transitionProperty: "background-color, border-color",
50
51
transitionTimingFunction: "ease-in-out",
51
52
},
···
56
57
":hover:not(:has(* button:hover)):not(:disabled)": slate.component2,
57
58
":disabled": slate.component1,
58
59
},
59
-
transitionDuration: "100ms",
60
+
transitionDuration: animationDuration.fast,
60
61
transitionProperty: "background-color, border-color",
61
62
transitionTimingFunction: "ease-in-out",
62
63
},
···
67
68
":hover:not(:has(* button:hover)):not(:disabled)": slate.component3,
68
69
":disabled": slate.component1,
69
70
},
70
-
transitionDuration: "100ms",
71
+
transitionDuration: animationDuration.fast,
71
72
transitionProperty: "background-color, border-color",
72
73
transitionTimingFunction: "ease-in-out",
73
74
},
···
98
99
borderStyle: "solid",
99
100
borderWidth: 1,
100
101
101
-
transitionDuration: "100ms",
102
+
transitionDuration: animationDuration.fast,
102
103
transitionProperty: "background-color, border-color",
103
104
transitionTimingFunction: "ease-in-out",
104
105
},
···
115
116
":hover:not(:has(* button:hover)):not(:disabled)": plum.component2,
116
117
":disabled": plum.component1,
117
118
},
118
-
transitionDuration: "100ms",
119
+
transitionDuration: animationDuration.fast,
119
120
transitionProperty: "background-color, border-color",
120
121
transitionTimingFunction: "ease-in-out",
121
122
},
···
126
127
":disabled": plum.component1,
127
128
":active": plum.component3,
128
129
},
129
-
transitionDuration: "100ms",
130
+
transitionDuration: animationDuration.fast,
130
131
transitionProperty: "background-color, border-color",
131
132
transitionTimingFunction: "ease-in-out",
132
133
},
···
137
138
":hover:not(:has(* button:hover)):not(:disabled)": plum.component3,
138
139
":disabled": plum.component1,
139
140
},
140
-
transitionDuration: "100ms",
141
+
transitionDuration: animationDuration.fast,
141
142
transitionProperty: "background-color, border-color",
142
143
transitionTimingFunction: "ease-in-out",
143
144
},
···
167
168
},
168
169
borderStyle: "solid",
169
170
borderWidth: 1,
170
-
transitionDuration: "100ms",
171
+
transitionDuration: animationDuration.fast,
171
172
transitionProperty: "background-color, border-color",
172
173
transitionTimingFunction: "ease-in-out",
173
174
},
···
184
185
":hover:not(:has(* button:hover)):not(:disabled)": red.component2,
185
186
":disabled": red.component1,
186
187
},
187
-
transitionDuration: "100ms",
188
+
transitionDuration: animationDuration.fast,
188
189
transitionProperty: "background-color, border-color",
189
190
transitionTimingFunction: "ease-in-out",
190
191
},
···
195
196
":hover:not(:has(* button:hover)):not(:disabled)": red.component2,
196
197
":disabled": red.component1,
197
198
},
198
-
transitionDuration: "100ms",
199
+
transitionDuration: animationDuration.fast,
199
200
transitionProperty: "background-color, border-color",
200
201
transitionTimingFunction: "ease-in-out",
201
202
},
···
206
207
":hover:not(:has(* button:hover)):not(:disabled)": red.component3,
207
208
":disabled": red.component1,
208
209
},
209
-
transitionDuration: "100ms",
210
+
transitionDuration: animationDuration.fast,
210
211
transitionProperty: "background-color, border-color",
211
212
transitionTimingFunction: "ease-in-out",
212
213
},
···
216
217
":hover:not(:has(* button:hover)):not(:disabled)": red.solid2,
217
218
":disabled": red.component1,
218
219
},
219
-
transitionDuration: "100ms",
220
+
transitionDuration: animationDuration.fast,
220
221
transitionProperty: "background-color, border-color",
221
222
transitionTimingFunction: "ease-in-out",
222
223
},
···
258
259
":hover:not(:has(* button:hover)):not(:disabled)": yellow.component2,
259
260
":disabled": yellow.component1,
260
261
},
261
-
transitionDuration: "100ms",
262
+
transitionDuration: animationDuration.fast,
262
263
transitionProperty: "background-color, border-color",
263
264
transitionTimingFunction: "ease-in-out",
264
265
},
···
269
270
":hover:not(:has(* button:hover)):not(:disabled)": yellow.component2,
270
271
":disabled": yellow.component1,
271
272
},
272
-
transitionDuration: "100ms",
273
+
transitionDuration: animationDuration.fast,
273
274
transitionProperty: "background-color, border-color",
274
275
transitionTimingFunction: "ease-in-out",
275
276
},
···
280
281
":hover:not(:has(* button:hover)):not(:disabled)": yellow.component3,
281
282
":disabled": yellow.component1,
282
283
},
283
-
transitionDuration: "100ms",
284
+
transitionDuration: animationDuration.fast,
284
285
transitionProperty: "background-color, border-color",
285
286
transitionTimingFunction: "ease-in-out",
286
287
},
···
290
291
":hover:not(:has(* button:hover)):not(:disabled)": yellow.solid2,
291
292
":disabled": yellow.component1,
292
293
},
293
-
transitionDuration: "100ms",
294
+
transitionDuration: animationDuration.fast,
294
295
transitionProperty: "background-color, border-color",
295
296
transitionTimingFunction: "ease-in-out",
296
297
},
···
320
321
},
321
322
borderStyle: "solid",
322
323
borderWidth: 1,
323
-
transitionDuration: "100ms",
324
+
transitionDuration: animationDuration.fast,
324
325
transitionProperty: "background-color, border-color",
325
326
transitionTimingFunction: "ease-in-out",
326
327
},
···
337
338
":hover:not(:has(* button:hover)):not(:disabled)": green.component2,
338
339
":disabled": green.component1,
339
340
},
340
-
transitionDuration: "100ms",
341
+
transitionDuration: animationDuration.fast,
341
342
transitionProperty: "background-color, border-color",
342
343
transitionTimingFunction: "ease-in-out",
343
344
},
···
348
349
":hover:not(:has(* button:hover)):not(:disabled)": green.component2,
349
350
":disabled": green.component1,
350
351
},
351
-
transitionDuration: "100ms",
352
+
transitionDuration: animationDuration.fast,
352
353
transitionProperty: "background-color, border-color",
353
354
transitionTimingFunction: "ease-in-out",
354
355
},
···
359
360
":hover:not(:has(* button:hover)):not(:disabled)": green.component3,
360
361
":disabled": green.component1,
361
362
},
362
-
transitionDuration: "100ms",
363
+
transitionDuration: animationDuration.fast,
363
364
transitionProperty: "background-color, border-color",
364
365
transitionTimingFunction: "ease-in-out",
365
366
},
···
369
370
":hover:not(:has(* button:hover)):not(:disabled)": green.solid2,
370
371
":disabled": green.component1,
371
372
},
372
-
transitionDuration: "100ms",
373
+
transitionDuration: animationDuration.fast,
373
374
transitionProperty: "background-color, border-color",
374
375
transitionTimingFunction: "ease-in-out",
375
376
},
+2
-2
apps/example/src/components/theme/typography.stylex.tsx
+2
-2
apps/example/src/components/theme/typography.stylex.tsx
···
83
83
scrollMarginBlockStart: spacing["20"],
84
84
},
85
85
heading2: {
86
+
margin: 0,
86
87
// eslint-disable-next-line @stylexjs/valid-styles
87
88
fontFamily: fontFamily["sans"],
88
-
margin: 0,
89
89
fontSize: {
90
90
default: fontSize["3xl"],
91
91
[breakpoints["md"]]: fontSize["4xl"],
···
97
97
default: lineHeight["3xl"],
98
98
[breakpoints["md"]]: lineHeight["4xl"],
99
99
},
100
-
borderBottomWidth: 1,
101
100
scrollMarginBlockStart: spacing["20"],
101
+
borderBottomWidth: 1,
102
102
paddingBottom: spacing["2"],
103
103
},
104
104
heading3: {
+2
-1
apps/example/src/components/theme/useButtonStyles.ts
+2
-1
apps/example/src/components/theme/useButtonStyles.ts
···
7
7
8
8
import { ButtonGroupContext } from "../button/context";
9
9
import { SizeContext } from "../context";
10
+
import { animationDuration } from "./animations.stylex";
10
11
import { slate } from "./colors.stylex";
11
12
import { radius } from "./radius.stylex";
12
13
import { critical, gray, primary } from "./semantic-color.stylex";
···
41
42
pointerEvents: {
42
43
":disabled": "none",
43
44
},
44
-
transitionDuration: "100ms",
45
+
transitionDuration: animationDuration.fast,
45
46
transitionProperty: "all",
46
47
transitionTimingFunction: "ease-in-out",
47
48
whiteSpace: "nowrap",
+4
-4
apps/example/src/components/theme/useDialogStyles.ts
+4
-4
apps/example/src/components/theme/useDialogStyles.ts
···
4
4
import type { Size } from "../types";
5
5
6
6
import { SizeContext } from "../context";
7
-
import { animations } from "../theme/animations.stylex";
7
+
import { animationDuration, animations } from "../theme/animations.stylex";
8
8
import { radius } from "../theme/radius.stylex";
9
9
import { shadow } from "../theme/shadow.stylex";
10
10
import { gray } from "./semantic-color.stylex";
···
19
19
top: 0,
20
20
width: "100vw",
21
21
22
-
animationDuration: "200ms",
22
+
animationDuration: animationDuration.slow,
23
23
animationName: {
24
24
":is([data-entering])": animations.fadeIn,
25
25
},
···
29
29
":is([data-exiting])": 0,
30
30
},
31
31
transitionDuration: {
32
-
":is([data-exiting])": "100ms",
32
+
":is([data-exiting])": animationDuration.fast,
33
33
},
34
34
transitionProperty: "opacity",
35
35
transitionTimingFunction: "ease-in-out",
···
46
46
maxHeight: "calc(var(--visual-viewport-height) * 0.8)",
47
47
top: "calc(var(--visual-viewport-height) / 2)",
48
48
49
-
animationDuration: { ":is([data-entering])": "300ms" },
49
+
animationDuration: { ":is([data-entering])": animationDuration.verySlow },
50
50
animationName: { ":is([data-entering])": animations.zoomIn },
51
51
animationTimingFunction: {
52
52
":is([data-entering])": "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
+1
-1
apps/example/src/components/theme/useInputStyles.ts
+1
-1
apps/example/src/components/theme/useInputStyles.ts
+2
-1
apps/example/src/components/theme/useListBoxItemStyles.ts
+2
-1
apps/example/src/components/theme/useListBoxItemStyles.ts
···
2
2
import { use } from "react";
3
3
4
4
import { SizeContext } from "../context";
5
+
import { animationDuration } from "../theme/animations.stylex";
5
6
import { plum, slate } from "../theme/colors.stylex";
6
7
import { radius } from "../theme/radius.stylex";
7
8
import { spacing } from "../theme/spacing.stylex";
···
53
54
},
54
55
display: "flex",
55
56
flexGrow: 1,
56
-
transitionDuration: "100ms",
57
+
transitionDuration: animationDuration.fast,
57
58
transitionProperty: "background-color",
58
59
transitionTimingFunction: "ease-in-out",
59
60
paddingBottom: spacing["2"],
+2
-1
apps/example/src/components/tooltip/index.tsx
+2
-1
apps/example/src/components/tooltip/index.tsx
···
12
12
TooltipTrigger,
13
13
} from "react-aria-components";
14
14
15
+
import { animationDuration } from "../theme/animations.stylex";
15
16
import { slateInverted } from "../theme/colors.stylex";
16
17
import { radius } from "../theme/radius.stylex";
17
18
import { shadow } from "../theme/shadow.stylex";
···
47
48
":is([data-entering])": "scale(0.9) var(--origin)",
48
49
":is([data-exiting])": "scale(0.9) var(--origin)",
49
50
},
50
-
transitionDuration: "150ms",
51
+
transitionDuration: animationDuration.default,
51
52
transitionProperty: "transform, opacity",
52
53
},
53
54
caret: {
+2
-1
apps/example/src/components/tree/index.tsx
+2
-1
apps/example/src/components/tree/index.tsx
···
18
18
19
19
import { Checkbox } from "../checkbox";
20
20
import { SizeContext } from "../context";
21
+
import { animationDuration } from "../theme/animations.stylex";
21
22
import { radius } from "../theme/radius.stylex";
22
23
import { gray } from "../theme/semantic-color.stylex";
23
24
import { spacing } from "../theme/spacing.stylex";
···
67
68
},
68
69
position: "absolute",
69
70
transform: "translate(-100%, -50%)",
70
-
transitionDuration: "100ms",
71
+
transitionDuration: animationDuration.fast,
71
72
transitionProperty: "opacity",
72
73
transitionTimingFunction: "ease-in-out",
73
74
left: 0,
+1
-1
apps/example/src/pages.gen.ts
+1
-1
apps/example/src/pages.gen.ts
+1
apps/example/src/pages/_layout.tsx
+1
apps/example/src/pages/_layout.tsx
+2
packages/hip-ui/scripts/generate-colors.tsx
+2
packages/hip-ui/scripts/generate-colors.tsx
···
97
97
`;
98
98
}
99
99
100
+
/* eslint-disable import-x/namespace -- dynamic color key lookup required for codegen */
100
101
async function generateColor(name: string) {
101
102
const color = Object.values(colors[name as keyof typeof colors]);
102
103
const colorDark = Object.values(
···
140
141
`,
141
142
);
142
143
}
144
+
/* eslint-enable import-x/namespace */
143
145
144
146
async function main() {
145
147
for (const name of names) {
+2
-2
packages/hip-ui/src/cli/config.ts
+2
-2
packages/hip-ui/src/cli/config.ts
···
23
23
return await config.search();
24
24
}
25
25
26
-
export function setConfig(config: LilconfigResult, options: ConfigOptions) {
26
+
export function setConfig(userConfig: LilconfigResult, options: ConfigOptions) {
27
27
const configPath =
28
-
config?.filepath || path.join(process.cwd(), DEFAULT_CONFIG_PATH);
28
+
userConfig?.filepath || path.join(process.cwd(), DEFAULT_CONFIG_PATH);
29
29
30
30
try {
31
31
if (configPath.includes(DEFAULT_CONFIG_PATH)) {