samueljmurray

/* styles.js */

export const SPACING_XXS = 4;
export const SPACING_XS = 6;
export const SPACING_S = 12;
// ... more spacing constants

export const COLOR_DARK_BLUE = "#06171d";
export const COLOR_GRAY_BLUE = "#b2c3d0";
export const COLOR_TEAL = "#437f92";

samueljmurray

/* MyComponent.js */

import formStyles from "formStyles";

class MyComponent extends React.Component {
  render() {
    return (
      // ...
      <TextInput style={formStyles.textInput} />
      // ...

samueljmurray

/* formStyles.js */

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

samueljmurray

/* HeadingText.js */

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

samueljmurray

/* formStyles.js */

import { errorText } from "textMixins";

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

samueljmurray

/* textMixins.js */

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

samueljmurray

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

samueljmurray

.subheading {
  margin-bottom: 16px;
}

samueljmurray

body {
  color: lemonchiffon;
}

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

samueljmurray

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