Some handy components for documenting Happeo UI Kit in MDX, written in React.
import pkg from "../package.json";
<PackageMetadata pkg={pkg} /><ColorExample hex={"#29C4A9"} name="brand" />Simple styled component to to be used for example with <ColorExample>.
<BackgroundBox>
<ColorExample hex={"#ffffff"} name="white" darkText={true} />
</BackgroundBox><ShadeGrid colors={{
navy: "#1A5D8D",
active: "#009DFF",
success: "#29C47F",
warn: "#FABD24",
alert: "#EC4B2F",
violet: "#5E2590",
}} shadeFns={{
darken20: (color) => darken(0.2, color),
desaturate: (color) => desaturate(0.2, color)
}}/>Use "Shorthand property names" to get the variable name as padding name.
const hugeMargin = "40px";
<MarginExample margin={{hugeMargin}} />Use "Shorthand property names" to get the variable name as padding name.
const hugePadding = "40px"
<PaddingExample padding={{hugePadding}} />
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent