Merge pull request #482 from mmrtnz/css-in-js

Refactored css into js for core and mixin less files, as well as added contrast ratio detection.
mui · Mar 30, 2015 · 6161528 · 6161528
2 parents 089ff9b + 7cfb952
commit 6161528
Show file tree

Hide file tree

Showing 39 changed files with 311 additions and 492 deletions.
diff --git a/docs/src/app/components/master.jsx b/docs/src/app/components/master.jsx
@@ -34,9 +34,8 @@ class Master extends React.Component {
           className="mui-dark-theme"
           onMenuIconButtonTouchTap={this._onMenuIconButtonTouchTap}
           title={title}
-          zDepth={0}>
-          {githubButton}
-        </AppBar>
+          zDepth={0}
+          iconClassNameRight="muidocs-icon-custom-github"/>
 
         <AppLeftNav ref="leftNav" />
 

diff --git a/docs/src/app/components/pages/components/dialog.jsx b/docs/src/app/components/pages/components/dialog.jsx
@@ -135,7 +135,7 @@ class DialogPage extends React.Component {
           ref="standardDialog"
           title="Dialog With Standard Actions"
           actions={standardActions}>
-          The actions in this window are created from the json that's passed in.
+          The actions in this window are created from the json that&#39;s passed in.
         </Dialog>
 
         <Dialog

diff --git a/docs/src/app/components/pages/css-framework/colors.jsx b/docs/src/app/components/pages/css-framework/colors.jsx
@@ -1,4 +1,7 @@
 var React = require('react');
+var mui = require('mui');
+var Colors = mui.Styles.Colors;
+var ColorManipulator = mui.Utils.ColorManipulator;
 
 var ColorsPage = React.createClass({
 
@@ -19,10 +22,17 @@ var ColorsPage = React.createClass({
       neutralGroups.push(this._getColorGroup(color, false));
     }, this);
 
+    var googleLink = "https://www.google.com/design/spec/style/color.html#color-ui-color-palette";
+    var githubLink = "https://github.com/callemall/material-ui/blob/css-in-js/src/js/styles/colors.js";
+
     return (
       <div>
         <h2 className="mui-font-style-headline">UI Color Palette</h2>
-        <p>We've created <a href="http://lesscss.org/">&#123;less&#125;</a> variables for every color used in the <a href="https://www.google.com/design/spec/style/color.html#color-ui-color-palette">UI Color Palette</a>.</p>
+        <p>
+          We&#39;ve created javascript variables for every color used in 
+          the <a href={googleLink}>UI Color Palette</a>. They are stored 
+          in <a href={githubLink}>styles/colors.js</a>. 
+        </p>
 
         <div className="color-palette">
           {colorGroups}
@@ -36,10 +46,10 @@ var ColorsPage = React.createClass({
   },
 
   _getColorGroup: function(color, showAltPalette) {
-    var mainPalette = [50,100,200,300,400,500,600,700,800,900],
-      altPalette = ['A100','A200','A400','A700'],
-      cssColor = color.toLowerCase().replace(' ', '-'),
-      colors = [];
+    var mainPalette = [50,100,200,300,400,500,600,700,800,900];
+    var altPalette = ['A100','A200','A400','A700'];
+    var cssColor = color.replace(' ', '').replace(color.charAt(0), color.charAt(0).toLowerCase());
+    var colors = [];
 
     mainPalette.forEach(function(mainValue) {
       colors.push(this._getColorBlock(cssColor, mainValue));
@@ -60,15 +70,22 @@ var ColorsPage = React.createClass({
   },
 
   _getColorBlock: function(colorName, colorValue, colorTitle) {
-    var colorClass = colorName + '-' + colorValue,
-      classes = 'color ' + colorClass,
-      colorText = '@' + colorClass,
-      blockTitle;
+    var bgColorText = colorName + colorValue;
+    var bgColor = Colors[bgColorText];
+    var fgColor = Colors.fullBlack;
+    var contrastRatio = ColorManipulator.contrastRatio(bgColor, fgColor);
+    var blockTitle;
 
+    if (contrastRatio < 7) fgColor = Colors.fullWhite;
     if (colorTitle) blockTitle = <span className="name">{colorTitle}</span>;
 
+    var styles = {
+      backgroundColor: bgColor,
+      color: fgColor,
+    };
+
     return (
-      <li className={classes}>{blockTitle}{colorText}</li>
+      <li style={styles} className="color">{blockTitle}{bgColorText}</li>
     );
   }
 

diff --git a/docs/src/app/components/pages/get-started.jsx b/docs/src/app/components/pages/get-started.jsx
@@ -34,7 +34,7 @@ class GetStarted extends React.Component {
         'injectTapEventPlugin();\n';
 
     return (
-      <div className="get-started-page mui-app-content-canvas">
+      <div className="get-started-page app-content-canvas">
         <div className="full-width-section">
 
           <h2 className="mui-font-style-headline">Prerequisites</h2>

diff --git a/docs/src/app/components/pages/home.jsx b/docs/src/app/components/pages/home.jsx
@@ -19,19 +19,17 @@ class HomePage extends React.Component {
       },
       githubStyle: {
         margin: '16px 32px 0px 8px',
-        minWidth: 0,
       },
       demoStyle: {
         margin: '16px 32px 0px 32px',
-        minWidth: 0,
       },
     }
   }
 
   render() {
 
     return (
-      <div className="mui-app-content-canvas">
+      <div className="app-content-canvas">
         <div className="home-page-hero full-width-section">
           <div className="home-page-hero-content">
             <img className="svg-logo" src="images/material-ui-logo.svg" />

diff --git a/docs/src/app/components/pages/page-with-nav.jsx b/docs/src/app/components/pages/page-with-nav.jsx
@@ -14,7 +14,7 @@ class PageWithNav extends React.Component {
 
   render() {
     return (
-      <div className="mui-app-content-canvas page-with-nav">
+      <div className="app-content-canvas page-with-nav">
         <div className="page-with-nav-content">
           <RouteHandler />
         </div>

diff --git a/src/less/mixins/clearfix.less → docs/src/less/clearfix.less b/src/less/mixins/clearfix.less → docs/src/less/clearfix.less
@@ -9,7 +9,6 @@
 //    `:before` to contain the top-margins of child elements.
 //
 // Source: http://nicolasgallagher.com/micro-clearfix-hack/
-
 .clearfix() {
   &:before,
   &:after {