1 files changed, 64 insertions, 0 deletions
diff --git a/app_expo/theme/color.ts b/app_expo/theme/color.ts
new file mode 100644
index 0000000..aa582e7
--- /dev/null
+++ b/app_expo/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,
+}