samueljmurray

<style>
  .branded {
    font-family: Papyrus;
  }
</style>
<div class="branded">
  <h1>Yummmy Papyrus</h1>
  <div>
    <p>Papyralicious</p>
  </div>

samueljmurray

const styles = StyleSheet.create({
  branded: {
    fontFamily: 'Papyrus'
  }
});
<View>
  <Text style={styles.branded}>
    Yummy Papyrus
  </Text>
  <View>

samueljmurray

<Text style={styles.branded}>
  Yummy Papyrus
  <Text style={{fontWeight: bold}}>
    Bold, yet still Papyrus
  </Text>
</Text>

samueljmurray

body {
  color: lemonchiffon;
}

input[type=text] {
  color: peachpuff;
}

samueljmurray

.subheading {
  margin-bottom: 16px;
}

samueljmurray

<p style="color: lemonchiffon;">Blah…</p>
<p style="color: lemonchiffon;">Bleh…</p>
<p style="color: lemonchiffon;">Bluh..?</p>

samueljmurray

/* textMixins.js */

export const errorText = {
  fontWeight: "700",
  color: "red",
};

samueljmurray

/* formStyles.js */

import { errorText } from "textMixins";

export default StyleSheet.create({
  formErrorMessage: {
    ...errorText,
    fontSize: 22,
  },
  fieldErrorMessage: {

samueljmurray

/* HeadingText.js */

const styles = StyleSheet.create({
  text: {
    fontFamily: "UnreadableSans",
    fontSize: 24,
    fontWeight "500",
  },
});

samueljmurray

/* formStyles.js */

export default StyleSheet.create({
  textInput: {
    padding: 16,
    borderColor: "#eee",
    borderWidth: StyleSheet.hairlineWidth,
  },
});