Update documentation

Include a section on theming.

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.

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',

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',
 })
 

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',
 })
 

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)',

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)',