Merge pull request #5 from appirio-tech/add-vars

Add vars

src/styles/_mixins.scss

@@ -0,0 +1,131 @@
+// Font families and weights
+@mixin roboto-light {
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  font-weight: 300;
+}
+
+@mixin roboto {
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  font-weight: 400;
+}
+
+@mixin roboto-medium {
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  font-weight: 500;
+}
+
+@mixin roboto-bold {
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  font-weight: 600;
+}
+
+@mixin proxima-nova-thin {
+  font-family: 'Proxima-Nova', Helvetica, Arial, sans-serif;
+  font-weight: 200;
+}
+
+@mixin proxima-nova-light {
+  font-family: 'Proxima-Nova', Helvetica, Arial, sans-serif;
+  font-weight: 300;
+}
+
+@mixin proxima-nova {
+  font-family: 'Proxima-Nova', Helvetica, Arial, sans-serif;
+  font-weight: 400;
+}
+
+@mixin proxima-nova-medium {
+  font-family: 'Proxima-Nova', Helvetica, Arial, sans-serif;
+  font-weight: 500;
+}
+
+@mixin proxima-nova-semi-bold {
+  font-family: 'Proxima-Nova', Helvetica, Arial, sans-serif;
+  font-weight: 600;
+}
+
+@mixin proxima-nova-bold {
+  font-family: 'Proxima-Nova', Helvetica, Arial, sans-serif;
+  font-weight: 700;
+}
+
+// Labels
+@mixin tc-label-large {
+  @include roboto;
+  font-size: $tc-label-large;
+  line-height: $base-unit * 4;
+}
+
+@mixin tc-label {
+  @include roboto;
+  font-size: $tc-label;
+  line-height: $base-unit * 4;
+}
+
+@mixin tc-label-small {
+  @include roboto;
+  font-size: $tc-label-small;
+  line-height: $base-unit * 3;
+}
+
+@mixin tc-label-extra-small {
+  @include roboto;
+  font-size: $tc-label-extra-small;
+  line-height: $base-unit * 3;
+}
+
+// Body
+@mixin tc-body-large {
+  @include proxima-nova;
+  font-size: $tc-body-large;
+  line-height: $base-unit * 5;
+}
+
+@mixin tc-body {
+  @include proxima-nova;
+  font-size: $tc-body;
+  line-height: $base-unit * 5;
+}
+
+@mixin tc-body-small {
+  @include proxima-nova;
+  font-size: $tc-body-small;
+  line-height: $base-unit * 5;
+}
+
+@mixin tc-body-extra-small {
+  @include proxima-nova;
+  font-size: $tc-body-extra-small;
+  line-height: $base-unit * 4;
+}
+
+// Headings
+@mixin tc-heading-extra-large {
+  @include proxima-nova;
+  font-size: $tc-heading-extra-large;
+  line-height: $base-unit * 10;
+}
+
+@mixin tc-heading-large {
+  @include proxima-nova;
+  font-size: $tc-heading-large;
+  line-height: $base-unit * 7;
+}
+
+@mixin tc-heading {
+  @include proxima-nova;
+  font-size: $tc-heading;
+  line-height: $base-unit * 6;
+}
+
+@mixin tc-heading-small {
+  @include proxima-nova;
+  font-size: $tc-heading-small;
+  line-height: $base-unit * 5;
+}
+
+@mixin tc-heading-extra-small {
+  @include proxima-nova;
+  font-size: $tc-heading-extra-small;
+  line-height: $base-unit * 5;
+}

src/styles/_tc-includes.scss

@@ -1,2 +1,2 @@
 @import 'mixins';
-@import 'colors';
+@import 'variables';

src/styles/_tc-styles.scss

@@ -2,6 +2,7 @@
 @import 'reset';
 @import 'typography';
 
+// App level resets
 html {
   min-height: 100%;
   box-sizing: border-box;

src/styles/_typography.scss

@@ -0,0 +1,22 @@
+@import 'tc-includes';
+
+// Headings
+h1 {
+  @include tc-heading-extra-large;
+}
+
+h2 {
+  @include tc-heading-large;
+}
+
+h3 {
+  @include tc-heading;
+}
+
+h4 {
+  @include tc-heading-small;
+}
+
+h5 {
+  @include tc-heading-extra-small;
+}

src/styles/_colors.scss → src/styles/_variables.scss

@@ -1,3 +1,16 @@
+// Variables
+
+// Table of Contents
+//
+// Base
+// Colors
+// Typography
+
+// Base
+$base-unit: 5px;
+
+// Colors
+//
 // Topcoder Color Palette
 
 // Primary Brand
@@ -59,3 +72,26 @@ $tc-level-2: #25C089;
 $tc-level-3: #666EFF;
 $tc-level-4: #FCB816;
 $tc-level-5: #E6175C;
+
+// Typography
+//
+// Label, body, and heading font sizes
+
+// Labels
+$tc-label-large      : 15px;
+$tc-label            : 13px;
+$tc-label-small      : 12px;
+$tc-label-extra-small: 11px;
+
+// Body
+$tc-body-large      : 20px;
+$tc-body            : 16px;
+$tc-body-small      : 14px;
+$tc-body-extra-small: 12px;
+
+// Headings
+$tc-heading-extra-large: 42px;
+$tc-heading-large      : 28px;
+$tc-heading            : 20px;
+$tc-heading-small      : 16px;
+$tc-heading-extra-small: 14px;

tc-ui-app/App/App.scss

@@ -0,0 +1 @@
+@import '../../src/styles/tc-styles';

src/routes.jsx → tc-ui-app/routes.jsx

@@ -2,8 +2,8 @@ import React from 'react'
 import Route from 'react-router/lib/Route'
 import IndexRoute from 'react-router/lib/IndexRoute'
 
-import App from './components/App/App'
-import ExampleComponentExample from './components/ExampleComponent/ExampleComponentExample'
+import App from './App/App'
+import ExampleComponentExample from '../src/components/ExampleComponent/ExampleComponentExample'
 
 export default (
   <Route path="/" component={App}>