added css modules with themes configuraiton

Author: piotrwitek

jspm.config.js

@@ -168,11 +168,13 @@ SystemJS.config({
     "classnames": "npm:classnames@2.2.5",
     "constants": "github:jspm/nodelibs-constants@0.2.0-alpha",
     "crypto": "github:jspm/nodelibs-crypto@0.2.0-alpha",
+    "csjs": "npm:csjs@1.0.6",
     "domain": "github:jspm/nodelibs-domain@0.2.0-alpha",
     "events": "github:jspm/nodelibs-events@0.2.0-alpha",
     "fs": "github:jspm/nodelibs-fs@0.2.0-alpha",
     "http": "github:jspm/nodelibs-http@0.2.0-alpha",
     "https": "github:jspm/nodelibs-https@0.2.0-alpha",
+    "insert-css": "npm:insert-css@1.0.0",
     "os": "github:jspm/nodelibs-os@0.2.0-alpha",
     "path": "github:jspm/nodelibs-path@0.2.0-alpha",
     "process": "github:jspm/nodelibs-process@0.2.0-alpha",

package.json

@@ -63,6 +63,8 @@
     "main": "app.tsx",
     "dependencies": {
       "classnames": "npm:classnames@^2.2.5",
+      "csjs": "npm:csjs@^1.0.6",
+      "insert-css": "npm:insert-css@^1.0.0",
       "react-dom": "npm:react-dom@^15.3.1",
       "react-redux": "npm:react-redux@^4.4.5",
       "react-router": "npm:react-router@^2.7.0",

src/components/component-with-local-css.tsx

@@ -0,0 +1,72 @@
+import csjs from 'csjs';
+import insertCss from 'insert-css';
+import colors from '../../themes/colors';
+
+interface IStyles {
+  container: string;
+  well: string;
+  glowingText: string;
+  visibleWell: string;
+  supriseWell: string;
+}
+
+export const styles: IStyles = csjs`
+
+  .container {
+    text-align: center;
+  }
+  .glowingText {
+    color: ${colors.textColor};
+    text-shadow: ${colors.textColor} 0 0 10px;
+    white-space: nowrap;
+  }
+  .well {
+    border-radius: 5px;
+    border: 1px solid ${colors.borderColor};
+    background-color: ${colors.backgroundColor};
+    box-shadow: none;
+  }
+  .well:hover {
+    box-shadow: 0 6px 20px 0 ${colors.shadowColor};
+  }
+
+  .visibleWell extends .well {
+    margin: 0px 30px;
+    opacity: 1;
+    transition:
+      margin 1s 0.5s,
+      opacity 1s 0.5s,
+      box-shadow 0.5s linear;
+  }
+
+  .supriseWell extends .well {
+    margin: 0px 50px;
+    opacity: 0;
+    transition:
+      margin 1s,
+      opacity 1s,
+      box-shadow 0.5s linear;
+  }
+
+  @media (max-width: 450px) {
+    .supriseWell {
+      margin: 0px 30px;
+      opacity: 1;
+      transition:
+        margin 1s 0.5s,
+        opacity 1s 0.5s,
+        box-shadow 0.5s linear;
+    }
+    .visibleWell {
+      margin: 0px 50px;
+      opacity: 0;
+      transition:
+        margin 1s,
+        opacity 1s,
+        box-shadow 0.5s linear;
+    }
+  }
+
+`;
+
+insertCss(csjs.getCss(styles));

src/containers/about-container/about-styles.tsx

@@ -1,20 +1,26 @@
 import * as React from 'react';
 import { PageSection } from '../../components/page-section';
 import { PageHeader } from '../../components/page-header';
+import { styles } from './about-styles';
+
 
 export function AboutContainer() {
   return (
     <article>
       <PageHeader>About</PageHeader>
       <PageSection>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
-          non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
+        <div className={styles.container}>
+          <div className={styles.visibleWell}>
+            <p className={styles.glowingText}>
+              Shrink your window
+            </p>
+          </div>
+          <div className={styles.supriseWell}>
+            <p className={styles.glowingText}>
+              SUPRISE!!!
+            </p>
+          </div>
+        </div>
       </PageSection>
       <br />
       <br />

src/containers/about-container/index.tsx

@@ -0,0 +1,16 @@
+const DARK_THEME = 'darkTheme';
+const selectedTheme = null;
+
+export default {
+  get textColor() {
+    switch (selectedTheme) {
+      case DARK_THEME:  return '#111';
+      default: return '#fff';
+    }
+  },
+  borderColor: '#111111',
+  backgroundColor: '#474747',
+  backgroundColorLight: '#a7a7a7',
+  shadowColor: '#000',
+  shadowColorLight: '#888'
+};