A design system in a box.
hip-ui.tngl.io/docs/introduction
change default color
+96
-97
+38
-38
apps/docs/src/components/theme/color.stylex.tsx
+38
-38
apps/docs/src/components/theme/color.stylex.tsx
···
1
1
import * as stylex from "@stylexjs/stylex";
2
2
3
3
import { green } from "./colors/green.stylex";
4
-
import { orange } from "./colors/orange.stylex";
4
+
import { mauve, mauveInverted } from "./colors/mauve.stylex";
5
+
import { pink } from "./colors/pink.stylex";
5
6
import { red } from "./colors/red.stylex";
6
-
import { slate, slateInverted } from "./colors/slate.stylex";
7
7
import { yellow } from "./colors/yellow.stylex";
8
8
9
9
export const uiColor = stylex.defineVars({
10
10
overlayBackdrop: "light-dark(rgba(4, 1, 1, 0.5), rgba(0, 0, 0, 0.75))",
11
-
bg: slate.bg,
12
-
bgSubtle: slate.bgSubtle,
13
-
component1: slate.component1,
14
-
component2: slate.component2,
15
-
component3: slate.component3,
16
-
border1: slate.border1,
17
-
border2: slate.border2,
18
-
border3: slate.border3,
19
-
solid1: slate.solid1,
20
-
solid2: slate.solid2,
21
-
text1: slate.text1,
22
-
text2: slate.text2,
11
+
bg: mauve.bg,
12
+
bgSubtle: mauve.bgSubtle,
13
+
component1: mauve.component1,
14
+
component2: mauve.component2,
15
+
component3: mauve.component3,
16
+
border1: mauve.border1,
17
+
border2: mauve.border2,
18
+
border3: mauve.border3,
19
+
solid1: mauve.solid1,
20
+
solid2: mauve.solid2,
21
+
text1: mauve.text1,
22
+
text2: mauve.text2,
23
23
textContrast: "white",
24
24
});
25
25
26
26
export const uiInverted = stylex.defineVars({
27
-
bg: slateInverted.bg,
28
-
bgSubtle: slateInverted.bgSubtle,
29
-
component1: slateInverted.component1,
30
-
component2: slateInverted.component2,
31
-
component3: slateInverted.component3,
32
-
border1: slateInverted.border1,
33
-
border2: slateInverted.border2,
34
-
border3: slateInverted.border3,
35
-
solid1: slateInverted.solid1,
36
-
solid2: slateInverted.solid2,
37
-
text1: slateInverted.text1,
38
-
text2: slateInverted.text2,
27
+
bg: mauveInverted.bg,
28
+
bgSubtle: mauveInverted.bgSubtle,
29
+
component1: mauveInverted.component1,
30
+
component2: mauveInverted.component2,
31
+
component3: mauveInverted.component3,
32
+
border1: mauveInverted.border1,
33
+
border2: mauveInverted.border2,
34
+
border3: mauveInverted.border3,
35
+
solid1: mauveInverted.solid1,
36
+
solid2: mauveInverted.solid2,
37
+
text1: mauveInverted.text1,
38
+
text2: mauveInverted.text2,
39
39
textContrast: "white",
40
40
});
41
41
42
42
export const primaryColor = stylex.defineVars({
43
-
bg: orange.bg,
44
-
bgSubtle: orange.bgSubtle,
45
-
component1: orange.component1,
46
-
component2: orange.component2,
47
-
component3: orange.component3,
48
-
border1: orange.border1,
49
-
border2: orange.border2,
50
-
border3: orange.border3,
51
-
solid1: orange.solid1,
52
-
solid2: orange.solid2,
53
-
text1: orange.text1,
54
-
text2: orange.text2,
43
+
bg: pink.bg,
44
+
bgSubtle: pink.bgSubtle,
45
+
component1: pink.component1,
46
+
component2: pink.component2,
47
+
component3: pink.component3,
48
+
border1: pink.border1,
49
+
border2: pink.border2,
50
+
border3: pink.border3,
51
+
solid1: pink.solid1,
52
+
solid2: pink.solid2,
53
+
text1: pink.text1,
54
+
text2: pink.text2,
55
55
textContrast: "white",
56
56
});
57
57
+2
-2
apps/docs/src/lib/ThemeContext.tsx
+2
-2
apps/docs/src/lib/ThemeContext.tsx
+1
-1
packages/hip-ui/src/components/color-area/index.tsx
+1
-1
packages/hip-ui/src/components/color-area/index.tsx
+38
-38
packages/hip-ui/src/components/theme/color.stylex.tsx
+38
-38
packages/hip-ui/src/components/theme/color.stylex.tsx
···
1
1
import * as stylex from "@stylexjs/stylex";
2
2
3
3
import { green } from "./colors/green.stylex";
4
-
import { orange } from "./colors/orange.stylex";
4
+
import { mauve, mauveInverted } from "./colors/mauve.stylex";
5
+
import { pink } from "./colors/pink.stylex";
5
6
import { red } from "./colors/red.stylex";
6
-
import { slate, slateInverted } from "./colors/slate.stylex";
7
7
import { yellow } from "./colors/yellow.stylex";
8
8
9
9
export const uiColor = stylex.defineVars({
10
10
overlayBackdrop: "light-dark(rgba(4, 1, 1, 0.5), rgba(0, 0, 0, 0.75))",
11
-
bg: slate.bg,
12
-
bgSubtle: slate.bgSubtle,
13
-
component1: slate.component1,
14
-
component2: slate.component2,
15
-
component3: slate.component3,
16
-
border1: slate.border1,
17
-
border2: slate.border2,
18
-
border3: slate.border3,
19
-
solid1: slate.solid1,
20
-
solid2: slate.solid2,
21
-
text1: slate.text1,
22
-
text2: slate.text2,
11
+
bg: mauve.bg,
12
+
bgSubtle: mauve.bgSubtle,
13
+
component1: mauve.component1,
14
+
component2: mauve.component2,
15
+
component3: mauve.component3,
16
+
border1: mauve.border1,
17
+
border2: mauve.border2,
18
+
border3: mauve.border3,
19
+
solid1: mauve.solid1,
20
+
solid2: mauve.solid2,
21
+
text1: mauve.text1,
22
+
text2: mauve.text2,
23
23
textContrast: "white",
24
24
});
25
25
26
26
export const uiInverted = stylex.defineVars({
27
-
bg: slateInverted.bg,
28
-
bgSubtle: slateInverted.bgSubtle,
29
-
component1: slateInverted.component1,
30
-
component2: slateInverted.component2,
31
-
component3: slateInverted.component3,
32
-
border1: slateInverted.border1,
33
-
border2: slateInverted.border2,
34
-
border3: slateInverted.border3,
35
-
solid1: slateInverted.solid1,
36
-
solid2: slateInverted.solid2,
37
-
text1: slateInverted.text1,
38
-
text2: slateInverted.text2,
27
+
bg: mauveInverted.bg,
28
+
bgSubtle: mauveInverted.bgSubtle,
29
+
component1: mauveInverted.component1,
30
+
component2: mauveInverted.component2,
31
+
component3: mauveInverted.component3,
32
+
border1: mauveInverted.border1,
33
+
border2: mauveInverted.border2,
34
+
border3: mauveInverted.border3,
35
+
solid1: mauveInverted.solid1,
36
+
solid2: mauveInverted.solid2,
37
+
text1: mauveInverted.text1,
38
+
text2: mauveInverted.text2,
39
39
textContrast: "white",
40
40
});
41
41
42
42
export const primaryColor = stylex.defineVars({
43
-
bg: orange.bg,
44
-
bgSubtle: orange.bgSubtle,
45
-
component1: orange.component1,
46
-
component2: orange.component2,
47
-
component3: orange.component3,
48
-
border1: orange.border1,
49
-
border2: orange.border2,
50
-
border3: orange.border3,
51
-
solid1: orange.solid1,
52
-
solid2: orange.solid2,
53
-
text1: orange.text1,
54
-
text2: orange.text2,
43
+
bg: pink.bg,
44
+
bgSubtle: pink.bgSubtle,
45
+
component1: pink.component1,
46
+
component2: pink.component2,
47
+
component3: pink.component3,
48
+
border1: pink.border1,
49
+
border2: pink.border2,
50
+
border3: pink.border3,
51
+
solid1: pink.solid1,
52
+
solid2: pink.solid2,
53
+
text1: pink.text1,
54
+
text2: pink.text2,
55
55
textContrast: "white",
56
56
});
57
57
+17
-18
packages/hip-ui/src/components/typography/index.tsx
+17
-18
packages/hip-ui/src/components/typography/index.tsx
···
34
34
35
35
const styles = stylex.create({
36
36
pre: {
37
-
paddingBottom: verticalSpace["2xl"],
38
-
paddingLeft: horizontalSpace["2xl"],
39
-
paddingRight: horizontalSpace["2xl"],
40
-
paddingTop: verticalSpace["2xl"],
41
37
borderColor: uiColor.border2,
42
38
borderRadius: radius.lg,
43
39
borderStyle: "solid",
44
40
borderWidth: 1,
45
-
46
41
cornerShape: "squircle",
42
+
display: "flex",
47
43
position: "relative",
48
44
marginBottom: verticalSpace["7xl"],
49
45
marginTop: verticalSpace["7xl"],
46
+
},
47
+
preCode: {
48
+
overflow: "auto",
49
+
paddingBottom: verticalSpace["2xl"],
50
+
paddingLeft: horizontalSpace["2xl"],
51
+
paddingRight: horizontalSpace["2xl"],
52
+
paddingTop: verticalSpace["2xl"],
53
+
width: "100%",
50
54
},
51
55
copyButton: {
52
56
position: "absolute",
···
71
75
paddingTop: verticalSpace["md"],
72
76
},
73
77
unorderedList: {
74
-
marginBottom: 0,
75
-
marginLeft: 0,
76
-
marginRight: 0,
77
-
marginTop: 0,
78
78
gap: gap["xl"],
79
79
display: "flex",
80
80
flexDirection: "column",
81
81
listStyleType: "disc",
82
-
paddingLeft: horizontalSpace["7xl"],
83
-
},
84
-
orderedList: {
85
82
marginBottom: 0,
86
83
marginLeft: 0,
87
84
marginRight: 0,
88
85
marginTop: 0,
86
+
paddingLeft: horizontalSpace["7xl"],
87
+
},
88
+
orderedList: {
89
89
gap: gap["xl"],
90
90
display: "flex",
91
91
flexDirection: "column",
92
92
listStyleType: "decimal",
93
+
marginBottom: 0,
94
+
marginLeft: 0,
95
+
marginRight: 0,
96
+
marginTop: 0,
93
97
paddingLeft: horizontalSpace["7xl"],
94
98
},
95
99
listItem: {
···
387
391
const isPre = use(PreContext);
388
392
389
393
if (isPre) {
390
-
return (
391
-
<code
392
-
{...props}
393
-
// className={className} style={style}
394
-
/>
395
-
);
394
+
return <code {...props} {...stylex.props(styles.preCode, style)} />;
396
395
}
397
396
398
397
return (