From e667d522d9490d458618b5122cfe3d01d1a54fd7 Mon Sep 17 00:00:00 2001 From: M03M Date: Mon, 23 Mar 2015 10:45:45 -0500 Subject: [PATCH 1/5] Removed layouts.less dependency. --- docs/src/app/components/pages/get-started.jsx | 2 +- docs/src/app/components/pages/home.jsx | 2 +- docs/src/app/components/pages/page-with-nav.jsx | 2 +- docs/src/less/main.less | 4 ++++ src/less/core/core.less | 1 - src/less/core/layouts.less | 7 ------- 6 files changed, 7 insertions(+), 11 deletions(-) delete mode 100644 src/less/core/layouts.less diff --git a/docs/src/app/components/pages/get-started.jsx b/docs/src/app/components/pages/get-started.jsx index 402c22898cb117..5a5afc3bb86260 100644 --- a/docs/src/app/components/pages/get-started.jsx +++ b/docs/src/app/components/pages/get-started.jsx @@ -34,7 +34,7 @@ var GetStarted = React.createClass({ 'injectTapEventPlugin();\n'; return ( -
+

Prerequisites

diff --git a/docs/src/app/components/pages/home.jsx b/docs/src/app/components/pages/home.jsx index 380e5c5a5701cb..34b6bb06a66e66 100644 --- a/docs/src/app/components/pages/home.jsx +++ b/docs/src/app/components/pages/home.jsx @@ -28,7 +28,7 @@ var HomePage = React.createClass({ render: function() { return ( -
+
diff --git a/docs/src/app/components/pages/page-with-nav.jsx b/docs/src/app/components/pages/page-with-nav.jsx index 72af80db073bfd..de1016c5baaf14 100644 --- a/docs/src/app/components/pages/page-with-nav.jsx +++ b/docs/src/app/components/pages/page-with-nav.jsx @@ -14,7 +14,7 @@ var PageWithNav = React.createClass({ render: function() { return ( -
+
diff --git a/docs/src/less/main.less b/docs/src/less/main.less index f72ac3668640f2..57e4b547fa8234 100644 --- a/docs/src/less/main.less +++ b/docs/src/less/main.less @@ -101,3 +101,7 @@ a { .example-menu-nested { width: (64px * 3); } + +.app-content-canvas { + padding-top: (@app-bar-height); +} \ No newline at end of file diff --git a/src/less/core/core.less b/src/less/core/core.less index a00e523aeba07d..824ddebe4d0878 100644 --- a/src/less/core/core.less +++ b/src/less/core/core.less @@ -1,4 +1,3 @@ @import "base.less"; @import "typography.less"; -@import "layouts.less"; @import "keylines.less"; diff --git a/src/less/core/layouts.less b/src/less/core/layouts.less deleted file mode 100644 index d0e7a14ee7e07c..00000000000000 --- a/src/less/core/layouts.less +++ /dev/null @@ -1,7 +0,0 @@ -.mui-predefined-layout-1 { - - .mui-app-content-canvas { - padding-top: (@app-bar-height); - } - -} From 5ba42bbfc71bd1f13597adc9846466e674422ea3 Mon Sep 17 00:00:00 2001 From: M03M Date: Mon, 23 Mar 2015 12:07:44 -0500 Subject: [PATCH 2/5] Removed less mixin and keyline.less dependencies. --- .../mixins => docs/src/less}/clearfix.less | 1 - docs/src/less/main.less | 11 +++++-- docs/src/less/pages/home-features.less | 2 +- src/less/core/core.less | 1 - src/less/core/keylines.less | 29 ------------------- src/less/mixins/mixins.less | 3 -- src/less/mixins/no-wrap.less | 3 -- src/less/mixins/transitions.less | 17 ----------- src/less/scaffolding.less | 3 +- 9 files changed, 10 insertions(+), 60 deletions(-) rename {src/less/mixins => docs/src/less}/clearfix.less (99%) delete mode 100644 src/less/core/keylines.less delete mode 100644 src/less/mixins/mixins.less delete mode 100644 src/less/mixins/no-wrap.less delete mode 100644 src/less/mixins/transitions.less diff --git a/src/less/mixins/clearfix.less b/docs/src/less/clearfix.less similarity index 99% rename from src/less/mixins/clearfix.less rename to docs/src/less/clearfix.less index 3f7a3820c1cf77..707a3de919d3ff 100644 --- a/src/less/mixins/clearfix.less +++ b/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 { diff --git a/docs/src/less/main.less b/docs/src/less/main.less index 57e4b547fa8234..193c4d7707bad7 100644 --- a/docs/src/less/main.less +++ b/docs/src/less/main.less @@ -9,6 +9,7 @@ //@import (less) "monokai_sublime.css"; @import (less) "github.css"; +@import "clearfix.less"; @import "color-palette.less"; @import "component-info.less"; @import "footer.less"; @@ -63,6 +64,10 @@ a { margin-bottom: @desktop-gutter-mini; } +.app-content-canvas { + padding-top: (@app-bar-height); +} + .baseline-grid { background-image: url('images/baseline-20px-grid.gif'); } @@ -102,6 +107,6 @@ a { width: (64px * 3); } -.app-content-canvas { - padding-top: (@app-bar-height); -} \ No newline at end of file +.no-wrap { + white-space: nowrap; +} diff --git a/docs/src/less/pages/home-features.less b/docs/src/less/pages/home-features.less index f501157420c955..5426abc9e24260 100644 --- a/docs/src/less/pages/home-features.less +++ b/docs/src/less/pages/home-features.less @@ -1,6 +1,6 @@ .home-features { - * { .ease-out(); } + * { transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; } .home-feature-heading { .mui-font-style-title; diff --git a/src/less/core/core.less b/src/less/core/core.less index 824ddebe4d0878..58e76635ca89ea 100644 --- a/src/less/core/core.less +++ b/src/less/core/core.less @@ -1,3 +1,2 @@ @import "base.less"; @import "typography.less"; -@import "keylines.less"; diff --git a/src/less/core/keylines.less b/src/less/core/keylines.less deleted file mode 100644 index c5772d502db2db..00000000000000 --- a/src/less/core/keylines.less +++ /dev/null @@ -1,29 +0,0 @@ -.mui-keywidth(@width) { - width: (@width * @desktop-keyline-increment); -} - -.mui-keyheight(@height) { - height: (@height * @desktop-keyline-increment); -} - -.mui-key-width-1 { .mui-keywidth(1); } -.mui-key-width-2 { .mui-keywidth(2); } -.mui-key-width-3 { .mui-keywidth(3); } -.mui-key-width-4 { .mui-keywidth(4); } -.mui-key-width-5 { .mui-keywidth(5); } -.mui-key-width-6 { .mui-keywidth(6); } -.mui-key-width-7 { .mui-keywidth(7); } -.mui-key-width-8 { .mui-keywidth(8); } -.mui-key-width-9 { .mui-keywidth(9); } -.mui-key-width-10 { .mui-keywidth(10); } - -.mui-key-height-1 { .mui-keyheight(1); } -.mui-key-height-2 { .mui-keyheight(2); } -.mui-key-height-3 { .mui-keyheight(3); } -.mui-key-height-4 { .mui-keyheight(4); } -.mui-key-height-5 { .mui-keyheight(5); } -.mui-key-height-6 { .mui-keyheight(6); } -.mui-key-height-7 { .mui-keyheight(7); } -.mui-key-height-8 { .mui-keyheight(8); } -.mui-key-height-9 { .mui-keyheight(9); } -.mui-key-height-10 { .mui-keyheight(10); } diff --git a/src/less/mixins/mixins.less b/src/less/mixins/mixins.less deleted file mode 100644 index a7b8c41f7f39f5..00000000000000 --- a/src/less/mixins/mixins.less +++ /dev/null @@ -1,3 +0,0 @@ -@import "clearfix.less"; -@import "no-wrap.less"; -@import "transitions.less"; diff --git a/src/less/mixins/no-wrap.less b/src/less/mixins/no-wrap.less deleted file mode 100644 index 6afb6858b93b49..00000000000000 --- a/src/less/mixins/no-wrap.less +++ /dev/null @@ -1,3 +0,0 @@ -.no-wrap { - white-space: nowrap; -} \ No newline at end of file diff --git a/src/less/mixins/transitions.less b/src/less/mixins/transitions.less deleted file mode 100644 index 129ce918b8289a..00000000000000 --- a/src/less/mixins/transitions.less +++ /dev/null @@ -1,17 +0,0 @@ -@ease-out-function: cubic-bezier(0.23, 1, 0.32, 1); - -.ease-out(@duration: 450ms; @property: all; @delay: 0ms) { - transition: @property @duration @ease-out-function @delay; -} - -.pulsate(@animation-name; @start-size: 0.75; @end-size: 1; @duration: 1.5s) { - @keyframes ~"@{animation-name}" { - 0%, 100% { - transform: scale(@start-size); - } - 50% { - transform: scale(@end-size); - } - } - animation: @animation-name @duration ease 0s infinite; -} \ No newline at end of file diff --git a/src/less/scaffolding.less b/src/less/scaffolding.less index 44688634b2a992..8b637ec0960069 100644 --- a/src/less/scaffolding.less +++ b/src/less/scaffolding.less @@ -6,5 +6,4 @@ @import "variables/colors.less"; @import "variables/media-queries.less"; @import "variables/spacing.less"; -@import "variables/custom-variables.less"; -@import "mixins/mixins.less"; \ No newline at end of file +@import "variables/custom-variables.less"; \ No newline at end of file From 70da22fe9695f62c2f3650f68d00a77eaf20016c Mon Sep 17 00:00:00 2001 From: M03M Date: Mon, 23 Mar 2015 15:44:03 -0500 Subject: [PATCH 3/5] Added contrast ratio detection to better refactor the colors doc page. --- .../components/pages/css-framework/colors.jsx | 37 ++- docs/src/less/color-palette.less | 312 ------------------ src/index.js | 4 +- src/js/styles/colors.js | 6 +- src/js/utils/color-manipulator.js | 95 +++++- 5 files changed, 127 insertions(+), 327 deletions(-) diff --git a/docs/src/app/components/pages/css-framework/colors.jsx b/docs/src/app/components/pages/css-framework/colors.jsx index 95007b3860ac16..149742d9f4bf82 100644 --- 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 (

UI Color Palette

-

We've created {less} variables for every color used in the UI Color Palette.

+

+ We've created javascript variables for every color used in + the UI Color Palette. They are stored + in styles/colors.js. +

{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 = {colorTitle}; + var styles = { + backgroundColor: bgColor, + color: fgColor, + }; + return ( -
  • {blockTitle}{colorText}
    • +
  • {blockTitle}{bgColorText}
    • ); } diff --git a/docs/src/less/color-palette.less b/docs/src/less/color-palette.less index 15cb82438bedb5..f4171fcc2cc201 100644 --- a/docs/src/less/color-palette.less +++ b/docs/src/less/color-palette.less @@ -59,316 +59,4 @@ } } } - - .red-50 { background-color: @red-50; } - .red-100 { background-color: @red-100; } - .red-200 { background-color: @red-200; } - .red-300 { background-color: @red-300; } - .red-400 { background-color: @red-400; } - .red-500 { background-color: @red-500; } - .red-600 { background-color: @red-600; } - .red-700 { background-color: @red-700; } - .red-800 { background-color: @red-800; } - .red-900 { background-color: @red-900; } - .red-A100 { background-color: @red-A100; } - .red-A200 { background-color: @red-A200; } - .red-A400 { background-color: @red-A400; } - .red-A700 { background-color: @red-A700; } - - .pink-50 { background-color: @pink-50; } - .pink-100 { background-color: @pink-100; } - .pink-200 { background-color: @pink-200; } - .pink-300 { background-color: @pink-300; } - .pink-400 { background-color: @pink-400; } - .pink-500 { background-color: @pink-500; } - .pink-600 { background-color: @pink-600; } - .pink-700 { background-color: @pink-700; } - .pink-800 { background-color: @pink-800; } - .pink-900 { background-color: @pink-900; } - .pink-A100 { background-color: @pink-A100; } - .pink-A200 { background-color: @pink-A200; } - .pink-A400 { background-color: @pink-A400; } - .pink-A700 { background-color: @pink-A700; } - - .purple-50 { background-color: @purple-50; } - .purple-100 { background-color: @purple-100; } - .purple-200 { background-color: @purple-200; } - .purple-300 { background-color: @purple-300; } - .purple-400 { background-color: @purple-400; } - .purple-500 { background-color: @purple-500; } - .purple-600 { background-color: @purple-600; } - .purple-700 { background-color: @purple-700; } - .purple-800 { background-color: @purple-800; } - .purple-900 { background-color: @purple-900; } - .purple-A100 { background-color: @purple-A100; } - .purple-A200 { background-color: @purple-A200; } - .purple-A400 { background-color: @purple-A400; } - .purple-A700 { background-color: @purple-A700; } - - .deep-purple-50 { background-color: @deep-purple-50; } - .deep-purple-100 { background-color: @deep-purple-100; } - .deep-purple-200 { background-color: @deep-purple-200; } - .deep-purple-300 { background-color: @deep-purple-300; } - .deep-purple-400 { background-color: @deep-purple-400; } - .deep-purple-500 { background-color: @deep-purple-500; } - .deep-purple-600 { background-color: @deep-purple-600; } - .deep-purple-700 { background-color: @deep-purple-700; } - .deep-purple-800 { background-color: @deep-purple-800; } - .deep-purple-900 { background-color: @deep-purple-900; } - .deep-purple-A100 { background-color: @deep-purple-A100; } - .deep-purple-A200 { background-color: @deep-purple-A200; } - .deep-purple-A400 { background-color: @deep-purple-A400; } - .deep-purple-A700 { background-color: @deep-purple-A700; } - - .indigo-50 { background-color: @indigo-50; } - .indigo-100 { background-color: @indigo-100; } - .indigo-200 { background-color: @indigo-200; } - .indigo-300 { background-color: @indigo-300; } - .indigo-400 { background-color: @indigo-400; } - .indigo-500 { background-color: @indigo-500; } - .indigo-600 { background-color: @indigo-600; } - .indigo-700 { background-color: @indigo-700; } - .indigo-800 { background-color: @indigo-800; } - .indigo-900 { background-color: @indigo-900; } - .indigo-A100 { background-color: @indigo-A100; } - .indigo-A200 { background-color: @indigo-A200; } - .indigo-A400 { background-color: @indigo-A400; } - .indigo-A700 { background-color: @indigo-A700; } - - .blue-50 { background-color: @blue-50; } - .blue-100 { background-color: @blue-100; } - .blue-200 { background-color: @blue-200; } - .blue-300 { background-color: @blue-300; } - .blue-400 { background-color: @blue-400; } - .blue-500 { background-color: @blue-500; } - .blue-600 { background-color: @blue-600; } - .blue-700 { background-color: @blue-700; } - .blue-800 { background-color: @blue-800; } - .blue-900 { background-color: @blue-900; } - .blue-A100 { background-color: @blue-A100; } - .blue-A200 { background-color: @blue-A200; } - .blue-A400 { background-color: @blue-A400; } - .blue-A700 { background-color: @blue-A700; } - - .light-blue-50 { background-color: @light-blue-50; } - .light-blue-100 { background-color: @light-blue-100; } - .light-blue-200 { background-color: @light-blue-200; } - .light-blue-300 { background-color: @light-blue-300; } - .light-blue-400 { background-color: @light-blue-400; } - .light-blue-500 { background-color: @light-blue-500; } - .light-blue-600 { background-color: @light-blue-600; } - .light-blue-700 { background-color: @light-blue-700; } - .light-blue-800 { background-color: @light-blue-800; } - .light-blue-900 { background-color: @light-blue-900; } - .light-blue-A100 { background-color: @light-blue-A100; } - .light-blue-A200 { background-color: @light-blue-A200; } - .light-blue-A400 { background-color: @light-blue-A400; } - .light-blue-A700 { background-color: @light-blue-A700; } - - .cyan-50 { background-color: @cyan-50; } - .cyan-100 { background-color: @cyan-100; } - .cyan-200 { background-color: @cyan-200; } - .cyan-300 { background-color: @cyan-300; } - .cyan-400 { background-color: @cyan-400; } - .cyan-500 { background-color: @cyan-500; } - .cyan-600 { background-color: @cyan-600; } - .cyan-700 { background-color: @cyan-700; } - .cyan-800 { background-color: @cyan-800; } - .cyan-900 { background-color: @cyan-900; } - .cyan-A100 { background-color: @cyan-A100; } - .cyan-A200 { background-color: @cyan-A200; } - .cyan-A400 { background-color: @cyan-A400; } - .cyan-A700 { background-color: @cyan-A700; } - - .teal-50 { background-color: @teal-50; } - .teal-100 { background-color: @teal-100; } - .teal-200 { background-color: @teal-200; } - .teal-300 { background-color: @teal-300; } - .teal-400 { background-color: @teal-400; } - .teal-500 { background-color: @teal-500; } - .teal-600 { background-color: @teal-600; } - .teal-700 { background-color: @teal-700; } - .teal-800 { background-color: @teal-800; } - .teal-900 { background-color: @teal-900; } - .teal-A100 { background-color: @teal-A100; } - .teal-A200 { background-color: @teal-A200; } - .teal-A400 { background-color: @teal-A400; } - .teal-A700 { background-color: @teal-A700; } - - .green-50 { background-color: @green-50; } - .green-100 { background-color: @green-100; } - .green-200 { background-color: @green-200; } - .green-300 { background-color: @green-300; } - .green-400 { background-color: @green-400; } - .green-500 { background-color: @green-500; } - .green-600 { background-color: @green-600; } - .green-700 { background-color: @green-700; } - .green-800 { background-color: @green-800; } - .green-900 { background-color: @green-900; } - .green-A100 { background-color: @green-A100; } - .green-A200 { background-color: @green-A200; } - .green-A400 { background-color: @green-A400; } - .green-A700 { background-color: @green-A700; } - - .light-green-50 { background-color: @light-green-50; } - .light-green-100 { background-color: @light-green-100; } - .light-green-200 { background-color: @light-green-200; } - .light-green-300 { background-color: @light-green-300; } - .light-green-400 { background-color: @light-green-400; } - .light-green-500 { background-color: @light-green-500; } - .light-green-600 { background-color: @light-green-600; } - .light-green-700 { background-color: @light-green-700; } - .light-green-800 { background-color: @light-green-800; } - .light-green-900 { background-color: @light-green-900; } - .light-green-A100 { background-color: @light-green-A100; } - .light-green-A200 { background-color: @light-green-A200; } - .light-green-A400 { background-color: @light-green-A400; } - .light-green-A700 { background-color: @light-green-A700; } - - .lime-50 { background-color: @lime-50; } - .lime-100 { background-color: @lime-100; } - .lime-200 { background-color: @lime-200; } - .lime-300 { background-color: @lime-300; } - .lime-400 { background-color: @lime-400; } - .lime-500 { background-color: @lime-500; } - .lime-600 { background-color: @lime-600; } - .lime-700 { background-color: @lime-700; } - .lime-800 { background-color: @lime-800; } - .lime-900 { background-color: @lime-900; } - .lime-A100 { background-color: @lime-A100; } - .lime-A200 { background-color: @lime-A200; } - .lime-A400 { background-color: @lime-A400; } - .lime-A700 { background-color: @lime-A700; } - - .yellow-50 { background-color: @yellow-50; } - .yellow-100 { background-color: @yellow-100; } - .yellow-200 { background-color: @yellow-200; } - .yellow-300 { background-color: @yellow-300; } - .yellow-400 { background-color: @yellow-400; } - .yellow-500 { background-color: @yellow-500; } - .yellow-600 { background-color: @yellow-600; } - .yellow-700 { background-color: @yellow-700; } - .yellow-800 { background-color: @yellow-800; } - .yellow-900 { background-color: @yellow-900; } - .yellow-A100 { background-color: @yellow-A100; } - .yellow-A200 { background-color: @yellow-A200; } - .yellow-A400 { background-color: @yellow-A400; } - .yellow-A700 { background-color: @yellow-A700; } - - .amber-50 { background-color: @amber-50; } - .amber-100 { background-color: @amber-100; } - .amber-200 { background-color: @amber-200; } - .amber-300 { background-color: @amber-300; } - .amber-400 { background-color: @amber-400; } - .amber-500 { background-color: @amber-500; } - .amber-600 { background-color: @amber-600; } - .amber-700 { background-color: @amber-700; } - .amber-800 { background-color: @amber-800; } - .amber-900 { background-color: @amber-900; } - .amber-A100 { background-color: @amber-A100; } - .amber-A200 { background-color: @amber-A200; } - .amber-A400 { background-color: @amber-A400; } - .amber-A700 { background-color: @amber-A700; } - - .orange-50 { background-color: @orange-50; } - .orange-100 { background-color: @orange-100; } - .orange-200 { background-color: @orange-200; } - .orange-300 { background-color: @orange-300; } - .orange-400 { background-color: @orange-400; } - .orange-500 { background-color: @orange-500; } - .orange-600 { background-color: @orange-600; } - .orange-700 { background-color: @orange-700; } - .orange-800 { background-color: @orange-800; } - .orange-900 { background-color: @orange-900; } - .orange-A100 { background-color: @orange-A100; } - .orange-A200 { background-color: @orange-A200; } - .orange-A400 { background-color: @orange-A400; } - .orange-A700 { background-color: @orange-A700; } - - .deep-orange-50 { background-color: @deep-orange-50; } - .deep-orange-100 { background-color: @deep-orange-100; } - .deep-orange-200 { background-color: @deep-orange-200; } - .deep-orange-300 { background-color: @deep-orange-300; } - .deep-orange-400 { background-color: @deep-orange-400; } - .deep-orange-500 { background-color: @deep-orange-500; } - .deep-orange-600 { background-color: @deep-orange-600; } - .deep-orange-700 { background-color: @deep-orange-700; } - .deep-orange-800 { background-color: @deep-orange-800; } - .deep-orange-900 { background-color: @deep-orange-900; } - .deep-orange-A100 { background-color: @deep-orange-A100; } - .deep-orange-A200 { background-color: @deep-orange-A200; } - .deep-orange-A400 { background-color: @deep-orange-A400; } - .deep-orange-A700 { background-color: @deep-orange-A700; } - - .brown-50 { background-color: @brown-50; } - .brown-100 { background-color: @brown-100; } - .brown-200 { background-color: @brown-200; } - .brown-300 { background-color: @brown-300; } - .brown-400 { background-color: @brown-400; } - .brown-500 { background-color: @brown-500; } - .brown-600 { background-color: @brown-600; } - .brown-700 { background-color: @brown-700; } - .brown-800 { background-color: @brown-800; } - .brown-900 { background-color: @brown-900; } - - .blue-grey-50 { background-color: @blue-grey-50; } - .blue-grey-100 { background-color: @blue-grey-100; } - .blue-grey-200 { background-color: @blue-grey-200; } - .blue-grey-300 { background-color: @blue-grey-300; } - .blue-grey-400 { background-color: @blue-grey-400; } - .blue-grey-500 { background-color: @blue-grey-500; } - .blue-grey-600 { background-color: @blue-grey-600; } - .blue-grey-700 { background-color: @blue-grey-700; } - .blue-grey-800 { background-color: @blue-grey-800; } - .blue-grey-900 { background-color: @blue-grey-900; } - - .grey-50 { background-color: @grey-50; } - .grey-100 { background-color: @grey-100; } - .grey-200 { background-color: @grey-200; } - .grey-300 { background-color: @grey-300; } - .grey-400 { background-color: @grey-400; } - .grey-500 { background-color: @grey-500; } - .grey-600 { background-color: @grey-600; } - .grey-700 { background-color: @grey-700; } - .grey-800 { background-color: @grey-800; } - .grey-900 { background-color: @grey-900; } - - .red-500, .red-600, .red-700, .red-A200, .red-A400, .red-A700, - .pink-500, .pink-600, .pink-A200, .pink-A400, .pink-A700, - .purple-300, .purple-400, .purple-A200, .purple-A400, .purple-A700, - .deep-purple-300, .deep-purple-400, .deep-purple-A200, - .indigo-300, .indigo-400, .indigo-A200, .indigo-A400, - .blue-500, .blue-600, .blue-700, .blue-A200, .blue-A400, .blue-A700, - .light-blue-500, .light-blue-600, .light-blue-700, .light-blue-800, .light-blue-A700, - .cyan-500, .cyan-600, .cyan-700, .cyan-800, - .teal-500, .teal-600, .teal-700, - .green-500, .green-600, .green-700, - .light-green-800, .light-green-900, - .lime-900, - .orange-800, .orange-900, - .deep-orange-500, .deep-orange-600, .deep-orange-700, .deep-orange-800, .deep-orange-900, .deep-orange-A400, .deep-orange-A700, - .brown-300, .brown-400, - .blue-grey-400, .blue-grey-500 { - .mui-text-full-white; - } - - .red-800, .red-900, - .pink-700, .pink-800, .pink-900, - .purple-500, .purple-600, .purple-700, .purple-800, .purple-900, - .deep-purple-500, .deep-purple-600, .deep-purple-700, .deep-purple-800, .deep-purple-900, .deep-purple-A400, .deep-purple-A700, - .indigo-500, .indigo-600, .indigo-700, .indigo-800, .indigo-900, .indigo-A700, - .blue-800, .blue-900, - .light-blue-900, - .cyan-900, - .teal-800, .teal-900, - .green-800, .green-900, - .brown-500, .brown-600, .brown-700, .brown-800, .brown-900, - .blue-grey-600, .blue-grey-700, .blue-grey-800, .blue-grey-900, - .grey-600, .grey-700, .grey-800, .grey-900 { - .mui-text-dark-white; - } - - .orange-A700 { - .mui-text-full-black; - } } diff --git a/src/index.js b/src/index.js index 7258cf0c0fc252..c377da5d65263e 100644 --- a/src/index.js +++ b/src/index.js @@ -33,6 +33,7 @@ module.exports = { }, Styles: { Theme: require('./js/styles/theme').get(), + Colors: require('./js/styles/colors'), }, Snackbar: require('./js/snackbar'), Tab: require('./js/tabs/tab'), @@ -49,6 +50,7 @@ module.exports = { Dom: require('./js/utils/dom'), Events: require('./js/utils/events'), KeyCode: require('./js/utils/key-code'), - KeyLine: require('./js/utils/key-line') + KeyLine: require('./js/utils/key-line'), + ColorManipulator: require('./js/utils/color-manipulator'), } }; diff --git a/src/js/styles/colors.js b/src/js/styles/colors.js index 810af8ddc471ca..209f352e7b6246 100644 --- a/src/js/styles/colors.js +++ b/src/js/styles/colors.js @@ -1,3 +1,7 @@ +// To include this file in your project: +// var mui = require('mui'); +// var Colors = mui.Styles.Colors; + module.exports = { red50: '#ffebee', @@ -286,4 +290,4 @@ module.exports = { darkWhite: 'rgba(255, 255, 255, 0.87)', lightWhite: 'rgba(255, 255, 255, 0.54)' -} \ No newline at end of file +} diff --git a/src/js/utils/color-manipulator.js b/src/js/utils/color-manipulator.js index c72bd37003ad68..549262ddf5324f 100644 --- a/src/js/utils/color-manipulator.js +++ b/src/js/utils/color-manipulator.js @@ -1,7 +1,41 @@ module.exports = { - // additionalValue = An extra value that has been calculated but not included - // with the original color object, such as an alpha value. + /** + * The relative brightness of any point in a colorspace, normalized to 0 for + * darkest black and 1 for lightest white. RGB colors only. Does not take + * into account alpha values. + * + * TODO: + * - Take into account alpha values. + * - Identify why there are minor discrepancies for some use cases + * (i.e. #F0F & #FFF). Note that these cases rarely occur. + * + * Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef + */ + _luminance: function(color) { + color = this._decomposeColor(color); + + if (color.type.indexOf('rgb') > -1) { + var rgb = color.values.map(function(val) { + val /= 255; // normalized + return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4); + }); + + return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]; + + } else { + var message = 'Calculating the relative luminance is not available for ' + + 'HSL and HSLA.'; + console.error(message); + return -1; + } + }, + + /** + * @params: + * additionalValue = An extra value that has been calculated but not included + * with the original color object, such as an alpha value. + */ _convertColorToString: function (color, additonalValue) { var str = color.type + '(' + parseInt(color.values[0]) + ',' + @@ -19,6 +53,7 @@ module.exports = { return str; }, + // Converts a color from hex format to rgb format. _convertHexToRGB: function(color) { if (color.length === 4) { var extendedColor = '#'; @@ -39,6 +74,7 @@ module.exports = { values.b + ')'; }, + // Returns the type and values of a color of any given type. _decomposeColor: function(color) { if (color.charAt(0) === '#') { return this._decomposeColor(this._convertHexToRGB(color)); @@ -61,6 +97,8 @@ module.exports = { // Desaturates rgb and sets opacity to 0.15 lighten: function(color, amount) { + color = this._format(color, amount); + var colorObj = this._decomposeColor(color); if (colorObj.type.indexOf('hsl') > -1) { @@ -93,4 +131,55 @@ module.exports = { return this._convertColorToString(colorObj); }, -}; \ No newline at end of file + + + // Calculates the contrast ratio between two colors. + // + // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef + contrastRatio: function(background, foreground) { + var lumA = this._luminance(background); + var lumB = this._luminance(foreground); + + if (lumA >= lumB) { + return ((lumA + 0.05) / (lumB + 0.05)).toFixed(2); + } else { + return ((lumB + 0.05) / (lumA + 0.05)).toFixed(2); + } + }, + + /** + * Determines how readable a color combination is based on its level. + * Levels are defined from @LeaVerou: + * https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/contrast-ratio.js + */ + contrastRatioLevel: function(background, foreground) { + var levels = { + 'fail': { + range: [0, 3], + color: 'hsl(0, 100%, 40%)' + }, + 'aa-large': { + range: [3, 4.5], + color: 'hsl(40, 100%, 45%)' + }, + 'aa': { + range: [4.5, 7], + color: 'hsl(80, 60%, 45%)' + }, + 'aaa': { + range: [7, 22], + color: 'hsl(95, 60%, 41%)' + } + }; + + var ratio = this.contrastRatio(background, foreground); + + for (level in levels) { + console.log(level); + var range = levels[level].range; + if (ratio >= range[0] && ratio <= range[1]) return level; + } + + }, + +}; From dfe8511937d60b1cc86df2de47d4afec9941df75 Mon Sep 17 00:00:00 2001 From: M03M Date: Mon, 30 Mar 2015 17:03:20 -0500 Subject: [PATCH 4/5] Refactored core less files. --- docs/src/app/components/master.jsx | 5 +- .../components/pages/components/dialog.jsx | 2 +- docs/src/app/components/pages/home.jsx | 2 - docs/src/less/main.less | 15 ++--- .../core => docs/src/less}/typography.less | 0 package.json | 2 +- src/js/app-bar.jsx | 29 +++++++++- src/js/before-after-wrapper.jsx | 13 +++-- src/js/date-picker/day-button.jsx | 2 + src/js/dialog-window.jsx | 8 ++- src/js/dialog.jsx | 2 +- src/js/enhanced-button.jsx | 10 +++- src/js/flat-button.jsx | 2 +- src/js/font-icon.jsx | 8 ++- src/js/icon-button.jsx | 55 +++++++++++++++++-- src/js/mixins/style-propable.js | 7 ++- src/js/paper.jsx | 7 +++ src/js/raised-button.jsx | 5 ++ src/js/styles/variables/custom-variables.js | 4 ++ src/js/text-field.jsx | 15 +++-- src/js/toolbar/toolbar.jsx | 2 + src/js/utils/color-manipulator.js | 43 +++++++-------- src/less/core/base.less | 31 ----------- src/less/core/core.less | 2 - 24 files changed, 173 insertions(+), 98 deletions(-) rename {src/less/core => docs/src/less}/typography.less (100%) delete mode 100644 src/less/core/base.less delete mode 100644 src/less/core/core.less diff --git a/docs/src/app/components/master.jsx b/docs/src/app/components/master.jsx index 15a96901ed5a88..6ece2104719ff3 100644 --- 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} - + zDepth={0} + iconClassNameRight="muidocs-icon-custom-github"/> diff --git a/docs/src/app/components/pages/components/dialog.jsx b/docs/src/app/components/pages/components/dialog.jsx index 80988dff08310f..cfa543f8cbebba 100644 --- 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's passed in. {child} ); } - } - menuElementRight = (this.props.children) ? this.props.children : - (this.props.iconElementRight) ? this.props.iconElementRight : ''; + if (this.props.iconElementRight) { + menuElementRight = ( +
    + {this.props.iconElementRight} +
    + ); + } else if (this.props.iconClassNameRight) { + menuElementRight = ( + + + ); + } + } return ( diff --git a/src/js/before-after-wrapper.jsx b/src/js/before-after-wrapper.jsx index 0b4aa1080fc248..b42963a588c55a 100644 --- a/src/js/before-after-wrapper.jsx +++ b/src/js/before-after-wrapper.jsx @@ -68,13 +68,18 @@ var BeforeAfterWrapper = React.createClass({ } = this.props; var beforeElement, afterElement; + + beforeStyle = AutoPrefix.all({boxSizing: 'border-box'}); + afterStyle = AutoPrefix.all({boxSizing: 'border-box'}); if (this.props.beforeStyle) beforeElement = - React.createElement(this.props.beforeElementType, - {style: AutoPrefix.all(this.props.beforeStyle), key: "::before"}); + React.createElement( this.props.beforeElementType, + {style: this.mergeAndPrefix(beforeStyle, this.props.beforeStyle), + key: "::before"} ); if (this.props.afterStyle) afterElement = - React.createElement(this.props.afterElementType, - {style: AutoPrefix.all(this.props.afterStyle), key: "::after"}); + React.createElement( this.props.afterElementType, + {style: this.mergeAndPrefix(afterStyle, this.props.afterStyle), + key: "::after"} ); var children = [beforeElement, this.props.children, afterElement]; diff --git a/src/js/date-picker/day-button.jsx b/src/js/date-picker/day-button.jsx index 72235a7859a8dc..eece95d387dc62 100644 --- a/src/js/date-picker/day-button.jsx +++ b/src/js/date-picker/day-button.jsx @@ -26,6 +26,8 @@ var DayButton = React.createClass({ var styles = { root: { + boxSizing: 'border-box', + webkitTapHighlightColor: 'rgba(0,0,0,0)', position: 'relative', float: 'left', width: 36, diff --git a/src/js/dialog-window.jsx b/src/js/dialog-window.jsx index f055ac225bf246..2ef35eb69c82c7 100644 --- a/src/js/dialog-window.jsx +++ b/src/js/dialog-window.jsx @@ -57,6 +57,8 @@ var DialogWindow = React.createClass({ _main: function() { var style = { position: 'fixed', + boxSizing: 'border-box', + webkitTapHighlightColor: 'rgba(0,0,0,0)', zIndex: 10, top: 0, left: -10000, @@ -76,7 +78,9 @@ var DialogWindow = React.createClass({ }, _contents: function() { - var style = { + var style = { + boxSizing: 'border-box', + webkitTapHighlightColor: 'rgba(0,0,0,0)', transition: Transitions.easeOut(), position: 'relative', width: '75%', @@ -153,6 +157,8 @@ var DialogWindow = React.createClass({ var actionContainer; var actionObjects = []; var actionStyle = { + boxSizing: 'border-box', + webkitTapHighlightColor: 'rgba(0,0,0,0)', padding: 8, marginBottom: 8, width: '100%', diff --git a/src/js/dialog.jsx b/src/js/dialog.jsx index 35811173d106f5..d72c1dee653a40 100644 --- a/src/js/dialog.jsx +++ b/src/js/dialog.jsx @@ -21,7 +21,7 @@ var Dialog = React.createClass({ }, content: function() { return { - padding: CustomVariables.spacing.desktopGutter + padding: CustomVariables.spacing.desktopGutter, } }, diff --git a/src/js/enhanced-button.jsx b/src/js/enhanced-button.jsx index 9fe5106604f2bf..5d8b261872c3af 100644 --- a/src/js/enhanced-button.jsx +++ b/src/js/enhanced-button.jsx @@ -1,6 +1,7 @@ var React = require('react'); var KeyCode = require('./utils/key-code'); var StylePropable = require('./mixins/style-propable'); +var CustomVariables = require('./styles/variables/custom-variables'); var WindowListenable = require('./mixins/window-listenable'); var FocusRipple = require('./ripples/focus-ripple'); var TouchRipple = require('./ripples/touch-ripple'); @@ -40,8 +41,11 @@ var EnhancedButton = React.createClass({ /** Styles */ _main: function() { var style = { - border: 0, + border: 10, background: 'none', + boxSizing: 'border-box', + fontFamily: CustomVariables.contentFontFamily, + // -webkit-tap-highlight-color: rgba(0, 0, 0, 0), }; if (this.props.linkButton) { @@ -51,7 +55,7 @@ var EnhancedButton = React.createClass({ textDecoration: 'none', }, style); } - + return this.mergeAndPrefix(style); }, @@ -93,7 +97,7 @@ var EnhancedButton = React.createClass({ onBlur: this._handleBlur, onFocus: this._handleFocus, onMouseOver: this._handleMouseOver, - onTouchTap: this._handleTouchTap + onTouchTap: this._handleTouchTap, }; var buttonChildren = [ disabled || disableTouchRipple ? this.props.children : touchRipple, diff --git a/src/js/flat-button.jsx b/src/js/flat-button.jsx index 4d58ec970ab2e3..4f21b358716266 100644 --- a/src/js/flat-button.jsx +++ b/src/js/flat-button.jsx @@ -67,7 +67,7 @@ var FlatButton = React.createClass({ if (this.state.hovered && !this.props.disabled) { style.backgroundColor = ColorManipulator.fade(ColorManipulator.lighten(style.color, 0.4), 0.15); } - + return this.mergeAndPrefix(style); }, diff --git a/src/js/font-icon.jsx b/src/js/font-icon.jsx index c33605409cae93..1332cf5a07c059 100644 --- a/src/js/font-icon.jsx +++ b/src/js/font-icon.jsx @@ -1,6 +1,7 @@ var React = require('react'); var StylePropable = require('./mixins/style-propable'); var Spacing = require('./styles/variables/spacing'); +var Theme = require('./styles/theme').get(); var FontIcon = React.createClass({ @@ -28,8 +29,11 @@ var FontIcon = React.createClass({ if (this.state.isHovered && this.props.hoverStyle) { style = this.mergeAndPrefix(style, this.props.hoverStyle); } - - return style; + if (!style.color && !this.props.className) { + style.color = Theme.textColor; + } + + return this.mergeAndPrefix(style); }, render: function() { diff --git a/src/js/icon-button.jsx b/src/js/icon-button.jsx index bec9516aacf14f..ca178e2315ea9a 100644 --- a/src/js/icon-button.jsx +++ b/src/js/icon-button.jsx @@ -19,7 +19,7 @@ var IconButton = React.createClass({ onBlur: React.PropTypes.func, onFocus: React.PropTypes.func, tooltip: React.PropTypes.string, - touch: React.PropTypes.bool + touch: React.PropTypes.bool, }, getInitialState: function() { @@ -48,8 +48,9 @@ var IconButton = React.createClass({ var style = { height: 48, width: 48, - transition: Transitions.easeOut(), position: 'relative', + boxSizing: 'border-box', + transition: Transitions.easeOut(), padding: (CustomVariables.spacing.iconSize / 2), width: CustomVariables.spacing.iconSize*2, height: CustomVariables.spacing.iconSize*2, @@ -57,7 +58,6 @@ var IconButton = React.createClass({ if (this.props.disabled) { style = this.mergeAndPrefix(style, { - opacity: CustomVariables.disabledOpacity, color: CustomVariables.disabledColor, fill: CustomVariables.disabledColor, }); @@ -68,10 +68,48 @@ var IconButton = React.createClass({ _tooltip: function() { return { + boxSizing: 'border-box', marginTop: CustomVariables.iconButtonSize + 4, }; }, + _icon: function() { + var style = { + color: Theme.textColor, + fill: Theme.textColor, + }; + + if (this.props.disabled) { + style = { + color: CustomVariables.disabledColor, + fill: CustomVariables.disabledColor, + }; + } + + if (this.props.iconStyle) { + style = this.mergeAndPrefix(style, this.props.iconStyle); + } + + return style; + }, + + /** + * If the user has children icon and is disabled, we have no way of knowing + * how to override children styles to apply disabled styles. Instead, we + * add a color overlay with disabled styles above the children. This can be + * removed by the user if he/she has his/her own custom disabled styles. + */ + _overlay: function() { + return { + position: 'relative', + top: 0, + width: '100%', + height: '100%', + background: CustomVariables.disabledColor, + + } + }, + render: function() { var { tooltip, @@ -95,10 +133,19 @@ var IconButton = React.createClass({ fonticon = ( + style={this._icon()}/> ); } + if (this.props.children && this.props.disabled) { + React.Children.forEach(this.props.children, function(child) { + child.props.style = { + color: CustomVariables.disabledColor, + fill: CustomVariables.disabledColor, + } + }); + } + return ( {label}; diff --git a/src/js/styles/variables/custom-variables.js b/src/js/styles/variables/custom-variables.js index a67d2a6eccfa68..51335e19d169d6 100644 --- a/src/js/styles/variables/custom-variables.js +++ b/src/js/styles/variables/custom-variables.js @@ -5,6 +5,10 @@ var ColorManipulator = require('../../utils/color-manipulator'); var customVariables = new (function() { + //Typography + this.headingFontFamily = "'Roboto', sans-serif"; + this.contentFontFamily = "'Roboto', sans-serif"; + // Spacing this.spacing = Spacing; diff --git a/src/js/text-field.jsx b/src/js/text-field.jsx index 30cef32a8ecc27..597a9e08989c25 100644 --- a/src/js/text-field.jsx +++ b/src/js/text-field.jsx @@ -71,7 +71,9 @@ var TextField = React.createClass({ height: (this.props.floatingLabelText) ? 72 : 48, display: 'inline-block', position: 'relative', + fontFamily: CustomVariables.contentFontFamily, transition: Transitions.easeOut('200ms', 'height'), + }); }, @@ -121,6 +123,8 @@ var TextField = React.createClass({ _input: function() { var style = { + boxSizing: 'border-box', + webkitTapHighlightColor: 'rgba(0,0,0,0)', position: 'relative', width: '100%', height: '100%', @@ -146,6 +150,8 @@ var TextField = React.createClass({ _underline: function() { return { + border: 'none', + borderBottom: 'solid 1px ' + CustomVariables.borderColor, position: 'absolute', width: '100%', bottom: 8, @@ -166,16 +172,15 @@ var TextField = React.createClass({ }, _focusUnderline: function() { - var style = this.mergeAndPrefix({ - borderColor: Theme.primary1Color, - borderBottomWidth: 2, + var style = this.mergeAndPrefix(this._underline(), { + borderBottom: 'solid 2px ' + Theme.primary1Color, transform: 'scaleX(0)', transition: Transitions.easeOut(), - }, this._underline()); + }); if (this.props.errorText) style.borderColor = this.errorColor; if (this.props.errorText || this.state.isFocused) style.transform = 'scaleX(1)'; - + return style; }, diff --git a/src/js/toolbar/toolbar.jsx b/src/js/toolbar/toolbar.jsx index 34a1429d25cc15..c46eb90d730f34 100644 --- a/src/js/toolbar/toolbar.jsx +++ b/src/js/toolbar/toolbar.jsx @@ -13,6 +13,8 @@ var Toolbar = React.createClass({ /** Styles */ _main: function() { return this.mergeAndPrefix({ + boxSizing: 'border-box', + webkitTapHighlightColor: 'rgba(0,0,0,0)', backgroundColor: CustomVariables.toolbarBackgroundColor, height: CustomVariables.toolbarHeight, width: '100%', diff --git a/src/js/utils/color-manipulator.js b/src/js/utils/color-manipulator.js index 549262ddf5324f..24eab17ef2041c 100644 --- a/src/js/utils/color-manipulator.js +++ b/src/js/utils/color-manipulator.js @@ -90,46 +90,44 @@ module.exports = { // Set the absolute transparency of a color. // Any existing alpha values are overwritten. fade: function(color, amount) { - var colorObj = this._decomposeColor(color); - if (colorObj.type == 'rgb' || colorObj.type == 'hsl') colorObj.type += 'a'; - return this._convertColorToString(colorObj, amount) + color = this._decomposeColor(color); + if (color.type == 'rgb' || color.type == 'hsl') color.type += 'a'; + return this._convertColorToString(color, amount) }, // Desaturates rgb and sets opacity to 0.15 lighten: function(color, amount) { - color = this._format(color, amount); - - var colorObj = this._decomposeColor(color); + color = this._decomposeColor(color); - if (colorObj.type.indexOf('hsl') > -1) { - colorObj.values[2] += amount; - return this._decomposeColor(this._convertColorToString(colorObj)); - } else if (colorObj.type.indexOf('rgb') > -1) { + if (color.type.indexOf('hsl') > -1) { + color.values[2] += amount; + return this._decomposeColor(this._convertColorToString(color)); + } else if (color.type.indexOf('rgb') > -1) { for (var i = 0; i < 3; i++) { - colorObj.values[i] *= 1 + amount; - if (colorObj.values[i] > 255) colorObj.values[i] = 255; + color.values[i] *= 1 + amount; + if (color.values[i] > 255) color.values[i] = 255; } } - if (colorObj.type.indexOf('a') <= -1) colorObj.type += 'a'; + if (color.type.indexOf('a') <= -1) color.type += 'a'; - return this._convertColorToString(colorObj, '0.15'); + return this._convertColorToString(color, '0.15'); }, darken: function(color, amount) { - var colorObj = this._decomposeColor(color); + var color = this._decomposeColor(color); - if (colorObj.type.indexOf('hsl') > -1) { - colorObj.values[2] += amount; - return this._decomposeColor(this._convertColorToString(colorObj)); - } else if (colorObj.type.indexOf('rgb') > -1) { + if (color.type.indexOf('hsl') > -1) { + color.values[2] += amount; + return this._decomposeColor(this._convertColorToString(color)); + } else if (color.type.indexOf('rgb') > -1) { for (var i = 0; i < 3; i++) { - colorObj.values[i] *= 1 - amount; - if (colorObj.values[i] < 0) colorObj.values[i] = 0; + color.values[i] *= 1 - amount; + if (color.values[i] < 0) color.values[i] = 0; } } - return this._convertColorToString(colorObj); + return this._convertColorToString(color); }, @@ -175,7 +173,6 @@ module.exports = { var ratio = this.contrastRatio(background, foreground); for (level in levels) { - console.log(level); var range = levels[level].range; if (ratio >= range[0] && ratio <= range[1]) return level; } diff --git a/src/less/core/base.less b/src/less/core/base.less deleted file mode 100644 index e876afde4ff8d0..00000000000000 --- a/src/less/core/base.less +++ /dev/null @@ -1,31 +0,0 @@ -// Reset the box-sizing -// -// Heads up! This reset may cause conflicts with some third-party widgets. -// For recommendations on resolving such conflicts, see -// http://getbootstrap.com/getting-started/#third-box-sizing -* { - box-sizing: border-box; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} -*:before, -*:after { - box-sizing: border-box; -} - -html, -body { - height: 100%; - width: 100%; -} - -html { - -webkit-font-smoothing: antialiased; - color: @body-text-color; - font-family: @contentFontFamily; - background-color: @canvas-color; -} - -hr { - border: none; - border-bottom: solid 1px @border-color; -} \ No newline at end of file diff --git a/src/less/core/core.less b/src/less/core/core.less deleted file mode 100644 index 58e76635ca89ea..00000000000000 --- a/src/less/core/core.less +++ /dev/null @@ -1,2 +0,0 @@ -@import "base.less"; -@import "typography.less"; From 7cfb952708ddbd5a587a89729e5c3b04413e7cd8 Mon Sep 17 00:00:00 2001 From: M03M Date: Mon, 30 Mar 2015 17:09:35 -0500 Subject: [PATCH 5/5] Removed components less file --- src/less/components.less | 2 -- 1 file changed, 2 deletions(-) delete mode 100644 src/less/components.less diff --git a/src/less/components.less b/src/less/components.less deleted file mode 100644 index 96427cb6ee03b6..00000000000000 --- a/src/less/components.less +++ /dev/null @@ -1,2 +0,0 @@ -// Core CSS -@import "core/core.less";