A design system in a box. hip-ui.tngl.io/docs/introduction
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

turn off theming for now

+27 -51
+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
··· 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)}