A design system in a box.
hip-ui.tngl.io/docs/introduction
turn off theming for now
+27
-51
+27
-27
apps/docs/src/routes/__root.tsx
+27
-27
apps/docs/src/routes/__root.tsx
···
6
6
import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
7
7
8
8
import { ui } from "../components/theme/semantic-color.stylex";
9
-
import { primaryColor } from "../components/theme/color.stylex";
10
-
import { blue } from "../components/theme/colors/blue.stylex";
11
-
import { purple } from "../components/theme/colors/purple.stylex";
9
+
// import { primaryColor } from "../components/theme/color.stylex";
10
+
// import { blue } from "../components/theme/colors/blue.stylex";
11
+
// import { purple } from "../components/theme/colors/purple.stylex";
12
12
13
13
if (import.meta.env.DEV) {
14
14
import("virtual:stylex:runtime");
···
19
19
margin: 0,
20
20
},
21
21
themeBlue: {
22
-
[primaryColor.bg]: blue.bg,
23
-
[primaryColor.bgSubtle]: blue.bgSubtle,
24
-
[primaryColor.component1]: blue.component1,
25
-
[primaryColor.component2]: blue.component2,
26
-
[primaryColor.component3]: blue.component3,
27
-
[primaryColor.border1]: blue.border1,
28
-
[primaryColor.border2]: blue.border2,
29
-
[primaryColor.border3]: blue.border3,
30
-
[primaryColor.solid1]: blue.solid1,
31
-
[primaryColor.solid2]: blue.solid2,
32
-
[primaryColor.text1]: blue.text1,
33
-
[primaryColor.text2]: blue.text2,
22
+
// [primaryColor.bg]: blue.bg,
23
+
// [primaryColor.bgSubtle]: blue.bgSubtle,
24
+
// [primaryColor.component1]: blue.component1,
25
+
// [primaryColor.component2]: blue.component2,
26
+
// [primaryColor.component3]: blue.component3,
27
+
// [primaryColor.border1]: blue.border1,
28
+
// [primaryColor.border2]: blue.border2,
29
+
// [primaryColor.border3]: blue.border3,
30
+
// [primaryColor.solid1]: blue.solid1,
31
+
// [primaryColor.solid2]: blue.solid2,
32
+
// [primaryColor.text1]: blue.text1,
33
+
// [primaryColor.text2]: blue.text2,
34
34
},
35
35
themePurple: {
36
-
[primaryColor.bg]: purple.bg,
37
-
[primaryColor.bgSubtle]: purple.bgSubtle,
38
-
[primaryColor.component1]: purple.component1,
39
-
[primaryColor.component2]: purple.component2,
40
-
[primaryColor.component3]: purple.component3,
41
-
[primaryColor.border1]: purple.border1,
42
-
[primaryColor.border2]: purple.border2,
43
-
[primaryColor.border3]: purple.border3,
44
-
[primaryColor.solid1]: purple.solid1,
45
-
[primaryColor.solid2]: purple.solid2,
46
-
[primaryColor.text1]: purple.text1,
47
-
[primaryColor.text2]: purple.text2,
36
+
// [primaryColor.bg]: purple.bg,
37
+
// [primaryColor.bgSubtle]: purple.bgSubtle,
38
+
// [primaryColor.component1]: purple.component1,
39
+
// [primaryColor.component2]: purple.component2,
40
+
// [primaryColor.component3]: purple.component3,
41
+
// [primaryColor.border1]: purple.border1,
42
+
// [primaryColor.border2]: purple.border2,
43
+
// [primaryColor.border3]: purple.border3,
44
+
// [primaryColor.solid1]: purple.solid1,
45
+
// [primaryColor.solid2]: purple.solid2,
46
+
// [primaryColor.text1]: purple.text1,
47
+
// [primaryColor.text2]: purple.text2,
48
48
},
49
49
});
50
50
-24
apps/docs/stylex.css
-24
apps/docs/stylex.css
···
65
65
@media (color-gamut: p3){:root, .xv3w7a0{--bg-xo9m2b4:light-dark(color(display-p3 0.675 0.675 0.024 / 0.024), color(display-p3 0.973 0.369 0 / 0.013));--bgSubtle-xpnscu7:light-dark(color(display-p3 0.953 0.855 0.008 / 0.079), color(display-p3 0.996 0.792 0 / 0.038));--component1-xq65tlw:light-dark(color(display-p3 0.988 0.925 0.004 / 0.251), color(display-p3 0.996 0.71 0 / 0.11));--component2-x1ujsea2:light-dark(color(display-p3 0.98 0.875 0.004 / 0.373), color(display-p3 0.996 0.741 0 / 0.152));--component3-x1njakr4:light-dark(color(display-p3 0.969 0.816 0.004 / 0.491), color(display-p3 0.996 0.765 0 / 0.202));--border1-xgpgkv2:light-dark(color(display-p3 0.875 0.71 0 / 0.526), color(display-p3 0.996 0.816 0.082 / 0.261));--border2-xfy5k6m:light-dark(color(display-p3 0.769 0.604 0 / 0.542), color(display-p3 1 0.831 0.263 / 0.345));--border3-x1bakgjo:light-dark(color(display-p3 0.725 0.549 0 / 0.687), color(display-p3 1 0.831 0.314 / 0.463));--solid1-xffo9u0:light-dark(color(display-p3 1 0.898 0 / 0.781), color(display-p3 1 0.922 0.22));--solid2-x10kpuhz:light-dark(color(display-p3 0.969 0.812 0 / 0.71), color(display-p3 1 1 0.455));--text1-x1arwxzo:light-dark(color(display-p3 0.6 0.44 0), color(display-p3 0.948 0.885 0.392));--text2-x1330fsk:light-dark(color(display-p3 0.271 0.233 0.137), color(display-p3 0.959 0.934 0.731));}}
66
66
@media (color-gamut: p3){:root, .x1qw93q1{--bg-xvz4l1d:light-dark(color(display-p3 0.024 0.024 0.349 / 0.012), color(display-p3 0 0 0 / 0));--bgSubtle-x11wv3u2:light-dark(color(display-p3 0.024 0.024 0.349 / 0.024), color(display-p3 0.875 0.992 1 / 0.034));--component1-xq1n77x:light-dark(color(display-p3 0.004 0.004 0.204 / 0.059), color(display-p3 0.882 0.933 0.992 / 0.077));--component2-x1pcqosl:light-dark(color(display-p3 0.012 0.012 0.184 / 0.091), color(display-p3 0.882 0.953 0.996 / 0.111));--component3-x2i1291:light-dark(color(display-p3 0.004 0.039 0.2 / 0.122), color(display-p3 0.878 0.929 0.996 / 0.145));--border1-xqh3mvu:light-dark(color(display-p3 0.008 0.008 0.165 / 0.15), color(display-p3 0.882 0.949 0.996 / 0.183));--border2-xk8cw7k:light-dark(color(display-p3 0.008 0.027 0.184 / 0.197), color(display-p3 0.882 0.929 1 / 0.246));--border3-x1aygav0:light-dark(color(display-p3 0.004 0.031 0.176 / 0.275), color(display-p3 0.871 0.937 1 / 0.361));--solid1-xxfkrpm:light-dark(color(display-p3 0.004 0.02 0.106 / 0.455), color(display-p3 0.898 0.937 1 / 0.42));--solid2-x1u1gfxn:light-dark(color(display-p3 0.004 0.027 0.098 / 0.499), color(display-p3 0.918 0.945 1 / 0.475));--text1-ximjy2m:light-dark(color(display-p3 0 0.02 0.063 / 0.62), color(display-p3 0.949 0.969 0.996 / 0.708));--text2-x1tsbbhh:light-dark(color(display-p3 0 0.012 0.031 / 0.887), color(display-p3 0.988 0.992 1 / 0.937));}}
67
67
@media (color-gamut: p3){:root, .x1dct8vy{--bg-xyifsjz:light-dark(color(display-p3 0.998 0.989 0.988), color(display-p3 0.093 0.068 0.067));--bgSubtle-x2tkz45:light-dark(color(display-p3 0.995 0.971 0.971), color(display-p3 0.118 0.077 0.079));--component1-xaivliz:light-dark(color(display-p3 0.985 0.925 0.925), color(display-p3 0.211 0.081 0.099));--component2-xgxkwj6:light-dark(color(display-p3 0.999 0.866 0.866), color(display-p3 0.287 0.079 0.113));--component3-x3872c4:light-dark(color(display-p3 0.984 0.812 0.811), color(display-p3 0.348 0.11 0.142));--border1-x51i60m:light-dark(color(display-p3 0.955 0.751 0.749), color(display-p3 0.414 0.16 0.183));--border2-x1lnuyuh:light-dark(color(display-p3 0.915 0.675 0.672), color(display-p3 0.508 0.224 0.236));--border3-xqf689p:light-dark(color(display-p3 0.872 0.575 0.572), color(display-p3 0.659 0.298 0.297));--solid1-x1m6a25n:light-dark(color(display-p3 0.83 0.329 0.324), color(display-p3 0.83 0.329 0.324));--solid2-x1o05zwi:light-dark(color(display-p3 0.798 0.294 0.285), color(display-p3 0.861 0.403 0.387));--text1-x3r7y46:light-dark(color(display-p3 0.744 0.234 0.222), color(display-p3 1 0.57 0.55));--text2-x11v4dhp:light-dark(color(display-p3 0.36 0.115 0.143), color(display-p3 0.971 0.826 0.852));}}
68
-
.--bg-x1aturvj-x1wfgbg4{--bg-x1aturvj:var(--bg-x1hmxdu8)}
69
-
.--bg-x1aturvj-xp9tw24{--bg-x1aturvj:var(--bg-xlbzawt)}
70
-
.--bgSubtle-x1i13xn6-x1lztncg{--bgSubtle-x1i13xn6:var(--bgSubtle-x1uhdssw)}
71
-
.--bgSubtle-x1i13xn6-x1ppgj3w{--bgSubtle-x1i13xn6:var(--bgSubtle-xj1htjk)}
72
-
.--border1-x1gfz7lw-x67dlke{--border1-x1gfz7lw:var(--border1-x5puql8)}
73
-
.--border1-x1gfz7lw-xcv1oyb{--border1-x1gfz7lw:var(--border1-xaafy4n)}
74
-
.--border2-xdhoy4z-x5jfjh{--border2-xdhoy4z:var(--border2-x16aqxu7)}
75
-
.--border2-xdhoy4z-xuz2ap0{--border2-xdhoy4z:var(--border2-xj5mecs)}
76
-
.--border3-x1fv6rtg-x17klxn{--border3-x1fv6rtg:var(--border3-x165ct47)}
77
-
.--border3-x1fv6rtg-x9nyzvk{--border3-x1fv6rtg:var(--border3-x1m87vy2)}
78
-
.--component1-xrqvod2-x1s4zrvc{--component1-xrqvod2:var(--component1-x1b5d2w2)}
79
-
.--component1-xrqvod2-x15mb97u{--component1-xrqvod2:var(--component1-x1pgn7a5)}
80
-
.--component2-xpnxlzk-xezdqlo{--component2-xpnxlzk:var(--component2-x1409ha8)}
81
-
.--component2-xpnxlzk-x6k9km2{--component2-xpnxlzk:var(--component2-x1jo4v3s)}
82
-
.--component3-xhtfb9k-xga6g5z{--component3-xhtfb9k:var(--component3-x1gatauy)}
83
-
.--component3-xhtfb9k-x974e0v{--component3-xhtfb9k:var(--component3-xtamm7x)}
84
68
.--items-per-row-x1bgwy09{--items-per-row:var(--x---items-per-row)}
85
69
.--progress-border-width-x1b7fzij{--progress-border-width:var(--_1-x1plbop)}
86
-
.--solid1-xs64gu4-x1fcwaem{--solid1-xs64gu4:var(--solid1-x1ddh6az)}
87
-
.--solid1-xs64gu4-x1a9b3n{--solid1-xs64gu4:var(--solid1-x9y09zg)}
88
-
.--solid2-x1crx5cu-x52eva2{--solid2-x1crx5cu:var(--solid2-x1738znb)}
89
-
.--solid2-x1crx5cu-xf2pcev{--solid2-x1crx5cu:var(--solid2-x1ho71r5)}
90
-
.--text1-xpii5us-x1ir9vak{--text1-xpii5us:var(--text1-x121d8oh)}
91
-
.--text1-xpii5us-x14qu2no{--text1-xpii5us:var(--text1-x1q7teun)}
92
-
.--text2-x1xyma3f-x1ok88mi{--text2-x1xyma3f:var(--text2-x1phuf10)}
93
-
.--text2-x1xyma3f-x1qm5jix{--text2-x1xyma3f:var(--text2-xlp01qr)}
94
70
.--toggle-button-group-gap-xpqjrd2{--toggle-button-group-gap:var(--_2-xsow7ju)}
95
71
.--card-gap-x1w9yjgu:is([data-card-size=sm]){--card-gap:var(--_2-xsow7ju)}
96
72
.--card-gap-x1nabd30:is([data-card-size=md]){--card-gap:var(--_6-x109877l)}