From 0ab9e93b189463dadce1774ae2692c20f05c82b0 Mon Sep 17 00:00:00 2001
From: TheoryOfNekomata <allan.crisostomo@outlook.com>
Date: Sun, 26 Jul 2020 11:44:34 +0800
Subject: [PATCH] Update documentation

Include a section on theming.
---
 docs/theming.md                            | 98 ++++++++++++++++++++++
 lib/components/Button/Button.tsx           |  2 +-
 lib/components/Checkbox/Checkbox.tsx       |  2 +-
 lib/components/RadioButton/RadioButton.tsx |  2 +-
 lib/components/Select/Select.tsx           |  2 +-
 lib/components/TextInput/TextInput.tsx     |  2 +-
 6 files changed, 103 insertions(+), 5 deletions(-)
 create mode 100644 docs/theming.md

diff --git a/docs/theming.md b/docs/theming.md
new file mode 100644
index 0000000..d4d24c3
--- /dev/null
+++ b/docs/theming.md
@@ -0,0 +1,98 @@
+---
+name: Theming
+route: /theming
+---
+
+# Theming
+
+The components can be styled through CSS custom properties, meaning browsers that support custom properties are expected
+to support theming for Tesseract components. It is a huge advantage for Tesseract to have used this feature because of
+its ease of use upon application, compared to using preprocessors such as Sass, which employs its own language as well
+as potentially increasing the size of the bundled stylesheets.
+
+## Properties
+
+Tesseract uses a few properties as much as possible in order to produce lightweight themes.
+
+### Colors
+
+#### `color-accent`
+
+Default value: `blue`
+
+The accent color of the components. Used to designate components that can be interacted with.
+
+#### `color-fg`
+
+Default value: `black`
+
+The reference color for text, borders, and anything in the foreground.
+
+#### `color-bg`
+
+Default value: `white`
+
+The reference color for anything in the background.
+
+#### `color-active`
+
+Default value: `Highlight`
+
+The version of the accent color for activated (i.e. clicked or focused) components.
+
+### Fonts
+
+#### `font-family-base`
+
+Default value: `sans-serif`
+
+The base font family. Used for body text.
+
+## Usage
+
+You should have a global theme rule applied to `:root`. Below is an example of using a global theme to apply styles:
+
+`theme.css`
+```css
+:root {
+  /* This will be our reference background color */
+  --color-negative: #eee;
+  /* This will be our reference foreground color */
+  --color-positive: #222;
+  --color-accent: #ba6a9c;
+  --color-active: #f90;
+  --font-family-body: 'Encode Sans Semi Expanded', 'Encode Sans', system-ui;
+}
+
+@media (prefers-color-scheme: dark) {
+  /* Dark mode, because why not? */
+  :root {
+    --color-negative: #222;
+    --color-positive: #eee;
+    --color-accent: #C78AB3;
+  }
+}
+
+:root {
+  /* We use our reference colors to set global fg and bg, but we could apply them to other elements later on.
+   *
+   * See below for example usage.
+   */
+  --color-bg: var(--color-negative, white);
+  --color-fg: var(--color-positive, black);
+
+  background-color: var(--color-bg);
+  color: var(--color-fg);
+  font-family: var(--font-family-body, sans-serif), sans-serif;
+}
+
+/*
+ * Here is an example usage of overriding bg and fg.
+ */
+.inverted-colors {
+  --color-bg: var(--color-positive, black);
+  --color-fg: var(--color-negative, white);
+}
+```
+
+Since the components use the same styles, the created theme will be applied to them as well.
diff --git a/lib/components/Button/Button.tsx b/lib/components/Button/Button.tsx
index 410aba4..6bd84b1 100644
--- a/lib/components/Button/Button.tsx
+++ b/lib/components/Button/Button.tsx
@@ -26,7 +26,7 @@ const buttonStyles: CSSObject = {
   appearance: 'none',
   padding: '0 1rem',
   font: 'inherit',
-  fontFamily: 'var(--font-family-base)',
+  fontFamily: 'var(--font-family-base, sans-serif)',
   textTransform: 'uppercase',
   fontWeight: 'bolder',
   borderRadius: '0.25rem',
diff --git a/lib/components/Checkbox/Checkbox.tsx b/lib/components/Checkbox/Checkbox.tsx
index d458d4a..5654574 100644
--- a/lib/components/Checkbox/Checkbox.tsx
+++ b/lib/components/Checkbox/Checkbox.tsx
@@ -105,7 +105,7 @@ const Label = styled('span')({
   verticalAlign: 'top',
   float: 'right',
   width: 'calc(100% - 2.5rem)',
-  fontFamily: 'var(--font-family-base)',
+  fontFamily: 'var(--font-family-base, sans-serif)',
   pointerEvents: 'none',
 })
 
diff --git a/lib/components/RadioButton/RadioButton.tsx b/lib/components/RadioButton/RadioButton.tsx
index 59240b3..a780ede 100644
--- a/lib/components/RadioButton/RadioButton.tsx
+++ b/lib/components/RadioButton/RadioButton.tsx
@@ -103,7 +103,7 @@ const Label = styled('span')({
   verticalAlign: 'top',
   float: 'right',
   width: 'calc(100% - 2.5rem)',
-  fontFamily: 'var(--font-family-base)',
+  fontFamily: 'var(--font-family-base, sans-serif)',
   pointerEvents: 'none',
 })
 
diff --git a/lib/components/Select/Select.tsx b/lib/components/Select/Select.tsx
index cfd36c6..fedf997 100644
--- a/lib/components/Select/Select.tsx
+++ b/lib/components/Select/Select.tsx
@@ -38,7 +38,7 @@ const SECONDARY_TEXT_SIZES: SizeMap<string | number> = {
 const ComponentBase = styled('div')({
   position: 'relative',
   borderRadius: '0.25rem',
-  fontFamily: 'var(--font-family-base)',
+  fontFamily: 'var(--font-family-base, sans-serif)',
   maxWidth: '100%',
   ':focus-within': {
     '--color-accent': 'var(--color-active, Highlight)',
diff --git a/lib/components/TextInput/TextInput.tsx b/lib/components/TextInput/TextInput.tsx
index 3f829a8..92d8e42 100644
--- a/lib/components/TextInput/TextInput.tsx
+++ b/lib/components/TextInput/TextInput.tsx
@@ -37,7 +37,7 @@ const SECONDARY_TEXT_SIZES: SizeMap<string | number> = {
 const ComponentBase = styled('div')({
   position: 'relative',
   borderRadius: '0.25rem',
-  fontFamily: 'var(--font-family-base)',
+  fontFamily: 'var(--font-family-base, sans-serif)',
   maxWidth: '100%',
   ':focus-within': {
     '--color-accent': 'var(--color-active, Highlight)',