README
@churchcenter/doxy
Cross-platform Church Center Components
Usage
Installation
yarn add @churchcenter/doxy
Colors
import { colors } from "@churchcenter/doxy";
colors.topaz;
colors.turquoise;
colors.emerald;
colors.ruby;
colors.sapphire;
colors.gray900;
colors.gray800;
colors.gray700;
colors.gray600;
colors.gray500;
colors.gray400;
colors.gray300;
colors.gray200;
colors.gray100;
colors.gray50;
colors.gray25;
Space
import { View } from "react-native";
import { space } from "@churchcenter/doxy";
function App() {
return (
<View
style={{
paddingTop: space(1),
paddingRight: space(1),
paddingBottom: space(2),
paddingLeft: space(1)
}}
>
Stuff
</View>
);
}
Typography
import { View } from "react-native";
import {
TextLink,
Heading,
PlainText,
SecondaryText,
TertiaryText,
FootNote
} from "@churchcenter/doxy";
function App() {
return (
<View>
<TextLink>A link</TextLink>
<Heading level={1}>Heading 1</Heading>
<Heading level={2}>Heading 2</Heading>
<Heading level={3}>Heading 3</Heading>
<Heading level={4}>Heading 4</Heading>
<PlainText>Some text...</PlainText>
<SecondaryText>Some more text...</SecondaryText>
<TertiaryText>Even more text...<TertiaryText>
<FootNote>Footnote</FootNote>
</View>
)
}