add color docs

docs/colors.mdx

@@ -3,4 +3,55 @@ name: Colors
 menu: Design
 ---
 
-# Color guidelines
+import Colors from '../src/docz-components/Colors/Colors';
+import FontColor from '../src/docz-components/FontColor/FontColor';
+
+# Colors
+
+
+## Usage
+
+We are using SCSS to set colors. There is a function (`palette`) that extract the desired color. To use the function you need to import 
+```_colors.scss``` and call `palette` function with the name of the color and the range.
+
+> range can be omitted when range is 500 (default)
+
+Same applies with font colors, in this case the function is called ```font-color``` and does not require a range.
+
+
+#### Example:
+
+``` scss
+// ComponentName.module.scss
+
+@import '../../styles/colors';
+
+.selector {
+  background-color: palette(base, 700);
+  border-color: palette(alert);  // you can imit the range for default color (500)
+
+  color: font-color(regular);  // range not required in font colors
+}
+```
+
+## Color palettes
+
+<div style={{ display: 'flex', justifyContent: 'space-between', margin: '0 50px', flexWrap: 'wrap' }}>
+  <Colors color="base" />
+  <Colors color="lowlight" />
+  <Colors color="feedback" />
+  <Colors color="highlight" />
+  <Colors color="success" />
+  <Colors color="alert" />
+  <Colors color="error" />
+</div>
+
+## Font colors
+
+<FontColor color="light" />
+<FontColor color="highlight" />
+<FontColor color="lowlight" />
+<FontColor color="disabled" />
+<FontColor color="regular" />
+<FontColor color="grey" />
+<FontColor color="dark" />

src/docz-components/Colors/Colors.module.scss

@@ -0,0 +1,59 @@
+@import '../../styles/variables';
+@import '../../styles/colors';
+
+$colors: base, error, highlight, lowlight, success, feedback, alert;
+$ranges: 100, 200, 300, 400, 500, 600, 700, 800, 900;
+
+@function set-text-color($color) {
+  @if (lightness($color) > 50) {
+    @return font-color(dark);
+  } @else {
+    @return font-color(light);
+  }
+}
+
+@each $color in $colors {
+  @each $range in $ranges {
+    .#{$color}#{$range} {
+      $act-color: palette($color, $range);
+
+      background-color: $act-color;
+      color: set-text-color($act-color);
+
+      code::after {
+        content: '#{$act-color}';
+      }
+
+      font-weight: 400;
+      @if $range == 500 {
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+.wrapper {
+  width: 300px;
+  position: relative;
+}
+
+.title {
+  width: 100%;
+  text-align: center;
+  text-transform: capitalize;
+  margin-bottom: $grid-unit;
+}
+
+.container {
+  font-size: 15px;
+  margin-bottom: 4 * $grid-unit;
+}
+
+.color {
+  height: 5 * $grid-unit;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 $grid-unit;
+}

src/docz-components/Colors/Colors.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import cx from 'classnames'
+import styles from './Colors.module.scss'
+
+type ColorNames =
+  | 'base'
+  | 'error'
+  | 'highlight'
+  | 'lowlight'
+  | 'success'
+  | 'feedback'
+  | 'alert'
+
+type ColorProps = {
+  color: ColorNames
+  range: number
+}
+function Color({ color, range }: ColorProps) {
+  return (
+    <div className={cx(styles.color, styles[`${color}${range}`])}>
+      <span>{range === 500 ? color : `${color}-${range}`}</span>
+      <code />
+    </div>
+  )
+}
+
+type Props = {
+  color: ColorNames
+}
+function Colors({ color }: Props) {
+  const ranges = Array(9)
+    .fill(0)
+    .map((_, i) => i * 100 + 100)
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.title}>{color}</div>
+      <div className={styles.container}>
+        {ranges.map((range) => (
+          <Color color={color} range={range} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default Colors

src/docz-components/FontColor/FontColor.module.scss

@@ -0,0 +1,36 @@
+@import '../../styles/variables';
+@import '../../styles/colors';
+
+$colors: light, highlight, lowlight, regular, grey, dark, disabled;
+
+@function set-bg-color($color) {
+  @if (lightness($color) > 20) {
+    @return palette(base, 900);
+  } @else {
+    @return palette(base, 200);
+  }
+}
+
+@each $color in $colors {
+  .#{$color} {
+    $act-color: font-color($color);
+
+    color: $act-color;
+    background-color: set-bg-color($act-color);
+
+    code::after {
+      content: '#{$act-color}';
+    }
+
+    font-weight: 400;
+  }
+}
+
+.fontColor {
+  height: 5 * $grid-unit;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 $grid-unit;
+}

src/docz-components/FontColor/FontColor.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import cx from 'classnames'
+import styles from './FontColor.module.scss'
+
+type ColorNames =
+  | 'light'
+  | 'highlight'
+  | 'lowlight'
+  | 'regular'
+  | 'grey'
+  | 'dark'
+  | 'disabled'
+
+type Props = {
+  color: ColorNames
+}
+function FontColor({ color }: Props) {
+  return (
+    <div className={cx(styles.fontColor, styles[color])}>
+      <span>{color}</span>
+      <code />
+    </div>
+  )
+}
+
+export default FontColor

src/gatsby-theme-docz/theme/index.js

@@ -1,3 +1,5 @@
+import '../../../../src/styles/docz.global.scss'
+
 import * as colors from './dark-theme-colors'
 
 import baseTheme from 'gatsby-theme-docz/src/theme/index'

src/styles/docz.global.scss

@@ -0,0 +1,10 @@
+@import './colors';
+@import '~typeface-montserrat/index.css';
+@import '~typeface-roboto-mono/index.css';
+
+@import './variables';
+@import './mixins';
+
+* {
+  font-family: $font-family;
+}