@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>
  )
}