Adds documentation on fonts and style variables (mixins)

Author: birdofpreyru

Diff for: README.md

@@ -1,3 +1,34 @@
 # Topcoder React UI Kit
 
 The [Topcoder](https://www.topcoder.com) UI Kit for internal ReactJS projects.
+
+### Installation
+Install the package via NPM:
+```
+$ npm install --save topcoder-react-ui-kit
+```
+
+Import its global stylesheet into the root ReactJS component of your app:
+```jsx
+import 'topcoder-react-ui-kit/dist/style.css';
+```
+
+### Global Styles
+The import of `topcoder-react-ui-kit/dist/style.css` stylesheet provides you with
+(assuming that your Webpack config properly parses that stylesheet, and bundles
+all assets referenced from there into your bundle):
+- [**`Fonts`**](docs/fonts.md) — Declaration of standard Topcoder fonts;
+
+### Style Mixins
+To use any of the style mixins in your SCSS code you should import them as
+```scss
+@import "~topcoder-react-ui-kit/src/styles/mixins";
+```
+- [**`Variables`**](docs/variables.md) — Standard colors, design break
+  points and other global style constants;
+
+### Development
+*To be written*
+
+### License
+UNLICENSED — for internal Topcoder projects only.

Diff for: docs/fonts.md

@@ -0,0 +1,4 @@
+# Fonts
+Declarations of standard Topcoder fonts:
+- [**`Roboto`**](https://fonts.google.com/specimen/Roboto)
+

Diff for: docs/images/variables-colors.png

@@ -0,0 +1,109 @@
+# Variables
+SCSS mixins for standard colors, design breaking points and other global style
+constants.
+
+### Base Spacings
+*Note:* The constants from this section are defined mostly for documentation
+purposes. Although SCSS allows to really encode layout spacings as mathematical
+expressions using these constants; it is not practical, as results in less
+readable SCSS code and demands one to calculate the resulting values in head to
+check whether the numbers match the design specifications (which usually give
+the final numbers). Thus, for border radii and spacings prefer to put the final
+numbers directly into your SCSS code.
+- **`$base-unit`** — *5px* — All layout spacings in Topcoder designs
+  are multiples of this value.
+- **`$corner-radius`** — *2px* — All corner radii (`border-radius`
+  CSS prop) in Topcoder designs are multiples of this value.
+
+### Design Break Points
+Each of the following constants specifies the maximal size of the corresponding
+screen size; i.e. XS-screen (extra-small) is any screen with the width smaller
+or equal to `$tc-screen-xs`, SM-screen (small) is any screen with the width
+larger than `$tc-screen-xs` and smaller or equal to `$tc-screen-sm`, and so on.
+The screen size wider than `$tc-screen-lg` we call XL for extra-large.
+
+We assume that mobile devices have SM screen size, tablets have MD screen size,
+and desktops have LG or XL screen size. Whenever you need to restric the maximal
+width of the main page part, rely on `$tc-screen-lg` as the maximal width.
+
+- **`$tc-screen-xs`** — *320px*;
+- **`$tc-screen-sm`** — *768px*;
+- **`$tc-screen-md`** — *1024px*;
+- **`$tc-screen-lg`** — *1280px*.
+
+### Colors
+Here are the standard colors to be used in Topcoder designs. They match the
+design specs image below, but some of them have different names due to historic
+reasons:
+
+##### Primary Colors
+- **`$tc-light-blue`** — `#26ade9`;
+- **`$tc-green`** — `#60c700`;
+- **`$tc-orange`** — `#fb7d22`;
+- **`$tc-yellow`** — `#fff100`;
+
+- **`$tc-black`** — `#262628`;
+- **`$tc-gray-90`** — `#37373c`;
+- **`$tc-gray-80`** — `#47474f`;
+- **`$tc-gray-70`** — `#5d5d66`;
+- **`$tc-gray-60`** — `#747480`;
+- **`$tc-gray-50`** — `#888894`;
+- **`$tc-gray-40`** — `#a3a3ad`;
+- **`$tc-gray-30`** — `#c3c3c8`;
+- **`$tc-gray-20`** — `#dcdce0`;
+- **`$tc-gray-10`** — `#ededf2`;
+
+- **`$tc-gray-neutral-dark`** — `#ebebeb`;
+- **`$tc-gray-neutral-light`** — `#fafafb`;
+- **`$tc-white`** — `#fff`;
+
+##### Accents & Shades
+- **`$tc-dark-blue`** — `#0a71e6`;
+- **`$tc-dark-blue-90`** — `#1a85ff`;
+- **`$tc-dark-blue-70`** — `#59a7ff`;
+- **`$tc-dark-blue-30`** — `#cfe6ff`;
+- **`$tc-dark-blue-10`** — `#f4f9ff`;
+
+- **`$tc-red`** — `#f22f24`;
+- **`$tc-red-70`** — `#ff5b52`;
+- **`$tc-red-30`** — `#ffd4d1`;
+- **`$tc-red-10`** — `#fff4f4`;
+
+- **`$tc-gold`** — `#fce217`;
+- **`$tc-gold-70`** — `#faed8e`;
+- **`$tc-gold-30`** — `#fff7cc`;
+- **`$tc-gold-10`** — `#fffde6`;
+
+- **`$tc-green`** — `#60c700`;
+- **`$tc-green-70`** — `#96d957`;
+- **`$tc-green-30`** — `#cfefb2`;
+- **`$tc-green-10`** — `#effae5`;
+
+- **`$tc-light-blue`** — `#26ade9`;
+- **`$tc-light-blue-70`** — `#67c5ef`;
+- **`$tc-light-blue-30`** — `#bde6f8`;
+- **`$tc-light-blue-10`** — `#e9f6fc`;
+
+- **`$tc-orange`** — `#fb7d22`;
+- **`$tc-orange-70`** — `#fda464`;
+- **`$tc-orange-30`** — `#fee3d0`;
+- **`$tc-orange-10`** — `#fff0eb`;
+
+- **`$tc-purple`** — `#9050a3`;
+- **`$tc-purple-70`** — `#b47dd6`;
+- **`$tc-purple-30`** — `#e2c7f2`;
+- **`$tc-purple-10`** — `#f8f2fb`;
+
+##### Badges
+- **`$tc-gold`** — `#fce217`;
+- **`$tc-silver`** — `#a9bcd4`;
+- **`$tc-bronze`** — `#bd731e`;
+
+##### Levels
+- **`$tc-level-1`** — `$a3a3ad`;
+- **`$tc-level-2`** — `#25c089`;
+- **`$tc-level-3`** — `#666eff`;
+- **`$tc-level-4`** — `#fcb816`;
+- **`$tc-level-5`** — `#e6175c`;
+
+![Standard TC Colors](images/variables-colors.png)