7 files changed, 169 insertions, 0 deletions
diff --git a/app/theme/color.ts b/app/theme/color.ts
new file mode 100644
index 0000000..7cbb7c7
--- /dev/null
+++ b/app/theme/color.ts
@@ -0,0 +1,64 @@
+import { palette } from "./palette"
+
+/**
+ * Roles for colors.  Prefer using these over the palette.  It makes it easier
+ * to change things.
+ *
+ * The only roles we need to place in here are the ones that span through the app.
+ *
+ * If you have a specific use-case, like a spinner color.  It makes more sense to
+ * put that in the <Spinner /> component.
+ */
+export const color = {
+  /**
+   * The palette is available to use, but prefer using the name.
+   */
+  palette,
+  /**
+   * A helper for making something see-thru. Use sparingly as many layers of transparency
+   * can cause older Android devices to slow down due to the excessive compositing required
+   * by their under-powered GPUs.
+   */
+  transparent: "rgba(0, 0, 0, 0)",
+  /**
+   * The screen background.
+   */
+  background: palette.white,
+  /**
+   * The main tinting color.
+   */
+  primary: palette.orange,
+  /**
+   * The main tinting color, but darker.
+   */
+  primaryDarker: palette.orangeDarker,
+  /**
+   * A subtle color used for borders and lines.
+   */
+  line: palette.offWhite,
+  /**
+   * The default color of text in many components.
+   */
+  text: palette.white,
+  /**
+   * Secondary information.
+   */
+  dim: palette.lightGrey,
+  /**
+   * Error messages and icons.
+   */
+  error: palette.angry,
+
+  /**
+   * Storybook background for Text stories, or any stories where
+   * the text color is color.text, which is white by default, and does not show
+   * in Stories against the default white background
+   */
+  storybookDarkBg: palette.black,
+
+  /**
+   * Storybook text color for stories that display Text components against the
+   * white background
+   */
+  storybookTextColor: palette.black,
+}
diff --git a/app/theme/fonts/index.ts b/app/theme/fonts/index.ts
new file mode 100644
index 0000000..e55248d
--- /dev/null
+++ b/app/theme/fonts/index.ts
@@ -0,0 +1,12 @@
+// import * as Font from "expo-font"
+
+export const initFonts = async () => {
+  // Refer to ./assets/fonts/custom-fonts.md for instructions.
+  // ...
+  // Welcome back! Just uncomment this and replace/append with your font file names!
+  // ⬇
+  // await Font.loadAsync({
+  //   Montserrat: require("./Montserrat-Regular.ttf"),
+  //   "Montserrat-Regular": require("./Montserrat-Regular.ttf"),
+  // })
+}
diff --git a/app/theme/index.ts b/app/theme/index.ts
new file mode 100644
index 0000000..46bf684
--- /dev/null
+++ b/app/theme/index.ts
@@ -0,0 +1,4 @@
+export * from "./color"
+export * from "./spacing"
+export * from "./typography"
+export * from "./timing"
diff --git a/app/theme/palette.ts b/app/theme/palette.ts
new file mode 100644
index 0000000..ee16af4
--- /dev/null
+++ b/app/theme/palette.ts
@@ -0,0 +1,11 @@
+export const palette = {
+  black: "#1d1d1d",
+  white: "#ffffff",
+  offWhite: "#e6e6e6",
+  orange: "#FBA928",
+  orangeDarker: "#EB9918",
+  lightGrey: "#939AA4",
+  lighterGrey: "#CDD4DA",
+  angry: "#dd3333",
+  deepPurple: "#5D2555",
+}
diff --git a/app/theme/spacing.ts b/app/theme/spacing.ts
new file mode 100644
index 0000000..b1b7935
--- /dev/null
+++ b/app/theme/spacing.ts
@@ -0,0 +1,41 @@
+/**
+ * NOTE TO DEVS:
+ *
+ * Spacing should be consistent and whitespace thought of as a first class technique up
+ * there with color and typefaces.
+ *
+ * Which type of scale you use is based on the design.
+ *
+ * If you've got simpler app, you may only need 6 items.  Or maybe you want a spacing scale
+ * to be named:
+ *
+ * export const spacing = {
+ *   tiny: 4,
+ *   small: 8,
+ *   medium: 12,
+ *   large: 24,
+ *   huge: 64
+ * }
+ *
+ * Whatever you choose, try to stick with these, and not freestyle it everywhere.
+ *
+ * Feel free to delete this block.
+ */
+
+/**
+ * The available spacing.
+ *
+ * Here's the rough guideline.  Customize this for you usage.  It's ok to put exceptions
+ * within the components themselves if they are truly exceptions.
+ *
+ * 0 = none    - nothing. only here to bust out of a zero-based array.
+ * 1 = tiny    - elements contextually close to each other
+ * 2 = smaller - for groups of closely related items or perhaps borders
+ * 3 = small   - ?
+ * 4 = medium  - ?
+ * 5 = medium+ - ?
+ * 6 = large   - between groups of content that aren't related?
+ * 7 = huge    - ?
+ * 8 = massive - an uncomfortable amount of whitespace
+ */
+export const spacing = [0, 4, 8, 12, 16, 24, 32, 48, 64]
diff --git a/app/theme/timing.ts b/app/theme/timing.ts
new file mode 100644
index 0000000..b8b7203
--- /dev/null
+++ b/app/theme/timing.ts
@@ -0,0 +1,6 @@
+export const timing = {
+  /**
+   * The duration (ms) for quick animations.
+   */
+  quick: 300,
+}
diff --git a/app/theme/typography.ts b/app/theme/typography.ts
new file mode 100644
index 0000000..5f7de85
--- /dev/null
+++ b/app/theme/typography.ts
@@ -0,0 +1,31 @@
+import { Platform } from "react-native"
+
+/**
+ * You can find a list of available fonts on both iOS and Android here:
+ * https://github.com/react-native-training/react-native-fonts
+ *
+ * If you're interested in adding a custom font to your project,
+ * check out the readme file in ./assets/fonts/ then come back here
+ * and enter your new font name. Remember the Android font name
+ * is probably different than iOS.
+ * More on that here:
+ * https://github.com/lendup/react-native-cross-platform-text
+ *
+ * The various styles of fonts are defined in the <Text /> component.
+ */
+export const typography = {
+  /**
+   * The primary font.  Used in most places.
+   */
+  primary: Platform.select({ ios: "Helvetica", android: "normal" }),
+
+  /**
+   * An alternate font used for perhaps titles and stuff.
+   */
+  secondary: Platform.select({ ios: "Arial", android: "sans-serif" }),
+
+  /**
+   * Lets get fancy with a monospace font!
+   */
+  code: Platform.select({ ios: "Courier", android: "monospace" }),
+}