Add colors and fonts to style guide

docs/colors.md

+CSS variables are used to define the theme's color scheme.
+
+## Brand colors
+
+`--color-primary`
+
+```js
+<div style={{ color: 'var(--color-primary)' }}>
+{faker.lorem.sentence(5)}
+</div>
+```
+
+## Colors for interactions
+
+`--color-danger`
+
+```js
+<div style={{ color: 'var(--color-danger)' }}>
+{faker.lorem.sentence(5)}
+</div>
+```
+
+`--color-valid`
+
+```js
+<div style={{ color: 'var(--color-valid)' }}>
+{faker.lorem.sentence(5)}
+</div>
+```
+
+`--color-warning`
+
+```js
+<div style={{ color: 'var(--color-warning)' }}>
+{faker.lorem.sentence(5)}
+</div>
+```

docs/fonts.md

+CSS variables are used to define font families.
+
+`--font-author`
+
+```js
+<div style={{ fontFamily: 'var(--font-author)' }}>
+{faker.lorem.sentence(5)}
+</div>
+```
+
+`--font-reviewer`
+
+```js
+<div style={{ fontFamily: 'var(--font-reviewer)' }}>
+{faker.lorem.sentence(5)}
+</div>
+```
+
+`--font-interface`
+
+```js
+<div style={{ fontFamily: 'var(--font-interface)' }}>
+{faker.lorem.sentence(5)}
+</div>
+```
+
+`--font-mono`
+
+```js
+<div style={{ fontFamily: 'var(--font-mono)' }}>
+{faker.lorem.sentence(5)}
+</div>
+```

styleguide.config.js

@@ -18,6 +18,14 @@ module.exports = {
     }
   },
   sections: [
+    {
+      name: 'Colors',
+      content: 'docs/colors.md'
+    },
+    {
+      name: 'Fonts',
+      content: 'docs/fonts.md'
+    },
     {
       name: 'Atoms',
       components: 'src/atoms/*.js'