MAGETWO-31855: UI improvements

Oleg Zinoviev · Oleg Zinoviev · commit 4076ac1530ce · 2015-01-06T15:58:12.000+02:00
- updates for hex color variables.
diff --git a/app/design/frontend/Magento/blank/Magento_CatalogSearch/web/css/source/module.less b/app/design/frontend/Magento/blank/Magento_CatalogSearch/web/css/source/module.less
@@ -4,9 +4,9 @@
 
 @autocomplete-background: @color-white;
 @autocomplete-border: 1px solid @form-element-input-border-color;
-@autocomplete-item-border: 1px solid #e5e5e5;
-@autocomplete-item-hover: #e8e8e8;
-@autocomplete-item-amount-color: #999;
+@autocomplete-item-border: 1px solid @color-gray90;
+@autocomplete-item-hover: @color-gray91;
+@autocomplete-item-amount-color: @color-gray60;
 
 //
 //    Common
diff --git a/app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/minicart.less b/app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/minicart.less
@@ -204,9 +204,9 @@
                  @_icon-font-size: 28px,
                  @_icon-font-line-height: 28px,
                  @_icon-font-text-hide: true,
-                 @_icon-font-color: #303030,
-                 @_icon-font-color-hover: #303030,
-                 @_icon-font-color-active: #303030
+                 @_icon-font-color: @color-gray19,
+                 @_icon-font-color-hover: @color-gray19,
+                 @_icon-font-color-active: @color-gray19
              );
          }
          &.delete {
diff --git a/app/design/frontend/Magento/blank/Magento_Theme/web/css/source/collapsible_navigation.less b/app/design/frontend/Magento/blank/Magento_Theme/web/css/source/collapsible_navigation.less
@@ -3,12 +3,12 @@
 //  */
 
 @collapsible-nav-background: @sidebar-background;
-@collapsible-nav-item-hover: #e8e8e8;
+@collapsible-nav-item-hover: @color-gray91;
 @collapsible-nav-color: false;
 @collapsible-nav-current-color: false;
 @collapsible-nav-current-font-weight: @font-weight-semibold;
 @collapsible-nav-current-border: 3px solid transparent;
-@collapsible-nav-current-border-color: #ff5501;
+@collapsible-nav-current-border-color: @color-orange-red1;
 
 
 //
diff --git a/app/design/frontend/Magento/blank/Magento_Theme/web/css/source/module.less b/app/design/frontend/Magento/blank/Magento_Theme/web/css/source/module.less
@@ -5,14 +5,14 @@
 @import "collapsible_navigation.less";
 
 @message-global-note-color: @text-color;
-@message-global-note-background: #ffee9c;
+@message-global-note-background: @color-yellow-light2;
 @message-global-note-link-color: @link-color;
 @message-global-note-link-color-hover: @link-color-hover;
 @message-global-note-link-color-active: @link-color-active;
-@message-global-note-border-color: #d6ca8e;
+@message-global-note-border-color: @color-yellow-light3;
 
 @message-global-caution-color: @color-white;
-@message-global-caution-background: #ff0101;
+@message-global-caution-background: @color-red9;
 @message-global-caution-link-color: @link-color;
 @message-global-caution-link-color-hover: @link-color-hover;
 @message-global-caution-link-color-active: @link-color-active;
diff --git a/app/design/frontend/Magento/blank/web/css/source/abstract.less b/app/design/frontend/Magento/blank/web/css/source/abstract.less
@@ -220,9 +220,9 @@
         @_icon-font-size: 26px,
         @_icon-font-line-height: 15px,
         @_icon-font-text-hide: true,
-        @_icon-font-color: #303030,
-        @_icon-font-color-hover: #303030,
-        @_icon-font-color-active: #303030
+        @_icon-font-color: @color-gray19,
+        @_icon-font-color-hover: @color-gray19,
+        @_icon-font-color-active: @color-gray19
     );
 }
 
@@ -231,10 +231,10 @@
 //--------------------------------------
 .abs-product-link {
     .link(
-        @_link-color: #303030,
-        @_link-color-hover: #303030,
-        @_link-color-active: #303030,
-        @_link-color-visited: #303030
+        @_link-color: @color-gray19,
+        @_link-color-hover: @color-gray19,
+        @_link-color-active: @color-gray19,
+        @_link-color-visited: @color-gray19
     );
 }
 
diff --git a/app/design/frontend/Magento/luma/Magento_Catalog/web/css/source/toolbar.less b/app/design/frontend/Magento/luma/Magento_Catalog/web/css/source/toolbar.less
@@ -4,7 +4,7 @@
 
 @toolbar-mode-icon-font-size: 16px;
 @toolbar-background: transparent;
-@toolbar-element-background: #f0f0f0;
+@toolbar-element-background: @color-gray94;
 @pager-action-background: @toolbar-element-background;
 @pager-action-background-hover: darken(@toolbar-element-background, 7%);
 @pager-font-weight: @font-weight-bold;
@@ -181,7 +181,7 @@
             &.active {
                 .css(box-shadow, @button-shadow-active);
                 background: darken(@toolbar-element-background, 7%);
-                color: #9e9e9e;
+                color: @color-gray62;
             }
             .icon-font(
                 @icon-grid,
diff --git a/app/design/frontend/Magento/luma/Magento_CatalogSearch/web/css/source/module.less b/app/design/frontend/Magento/luma/Magento_CatalogSearch/web/css/source/module.less
@@ -4,9 +4,9 @@
 
 @autocomplete-background: @color-white;
 @autocomplete-border: 1px solid @form-element-input-border-color;
-@autocomplete-item-border: 1px solid #e5e5e5;
-@autocomplete-item-hover: #e8e8e8;
-@autocomplete-item-amount-color: #999;
+@autocomplete-item-border: 1px solid @color-gray90;
+@autocomplete-item-hover: @color-gray91;
+@autocomplete-item-amount-color: @color-gray60;
 
 //
 //    Common
diff --git a/app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/cart.less b/app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/cart.less
@@ -3,7 +3,7 @@
 //  */
 
 @mobile-cart-padding: 15px;
-@cart-price-color: #666;
+@cart-price-color: @color-gray40;
 @cart-item-cell-padding-top: 20px;
 
 //
diff --git a/app/design/frontend/Magento/luma/Magento_Customer/web/css/source/module.less b/app/design/frontend/Magento/luma/Magento_Customer/web/css/source/module.less
@@ -2,9 +2,9 @@
 //  * @copyright Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
 //  */
 
-@account-title-border-color: #c6c6c6;
-@account-table-border-bottom-color: #e4e4e4;
-@account-table-action-delete: #d10029;
+@account-title-border-color: @color-gray-middle2;
+@account-table-border-bottom-color: @color-gray-middle1;
+@account-table-action-delete: @color-red12;
 
 //
 //    Common
diff --git a/app/design/frontend/Magento/luma/Magento_LayeredNavigation/web/css/source/module.less b/app/design/frontend/Magento/luma/Magento_LayeredNavigation/web/css/source/module.less
@@ -141,10 +141,10 @@
                 margin-left: -5px;
                 padding-right: 7px;
                 &:hover {
-                    background-color: #e8e8e8;
+                    background-color: @color-gray91;
                     text-decoration: none;
                     & + .count {
-                        background-color: #e8e8e8;
+                        background-color: @color-gray91;
                     }
                 }
             }
@@ -421,7 +421,7 @@
                             margin-left: 0;
                         }
                         &:hover {
-                            background-color: #e8e8e8;
+                            background-color: @color-gray91;
                         }
                     }
                 }
diff --git a/app/design/frontend/Magento/luma/Magento_Theme/web/css/source/collapsible_navigation.less b/app/design/frontend/Magento/luma/Magento_Theme/web/css/source/collapsible_navigation.less
@@ -3,12 +3,12 @@
 //  */
 
 @collapsible-nav-background: @sidebar-background;
-@collapsible-nav-item-hover: #e8e8e8;
-@collapsible-nav-color: #575757;
-@collapsible-nav-current-color: #000;
+@collapsible-nav-item-hover: @color-gray91;
+@collapsible-nav-color: @color-gray34;
+@collapsible-nav-current-color: @color-black;
 @collapsible-nav-current-font-weight: @font-weight-semibold;
 @collapsible-nav-current-border: 3px solid transparent;
-@collapsible-nav-current-border-color: #ff5501;
+@collapsible-nav-current-border-color: @color-orange-red1;
 
 //
 //    Common
diff --git a/app/design/frontend/Magento/luma/Magento_Theme/web/css/source/module.less b/app/design/frontend/Magento/luma/Magento_Theme/web/css/source/module.less
@@ -5,31 +5,31 @@
 @import "collapsible_navigation.less";
 
 @message-global-note-color: @text-color;
-@message-global-note-background: #ffee9c;
+@message-global-note-background: @color-yellow-light2;
 @message-global-note-link-color: @link-color;
 @message-global-note-link-color-hover: @link-color-hover;
 @message-global-note-link-color-active: @link-color-active;
-@message-global-note-border-color: #d6ca8e;
+@message-global-note-border-color: @color-yellow-light3;
 
 @message-global-caution-color: @color-white;
-@message-global-caution-background: #ff0101;
+@message-global-caution-background: @color-red9;
 @message-global-caution-link-color: @link-color;
 @message-global-caution-link-color-hover: @link-color-hover;
 @message-global-caution-link-color-active: @link-color-active;
 @message-global-caution-border-color: none;
 
 @header-bg-color: false;
-@header-panel-bg-color: #7e807e;
+@header-panel-bg-color: @color-gray-middle3;
 @header-panel-text-color: @color-white;
 @header-icons-color: @color-gray56;
 @header-icons-color-hover: @color-gray20;
 
-@addto-color: #999;
+@addto-color: @color-gray60;
 @addto-hover-color: @color-primary;
 @minicart-icons-color: @header-icons-color;
 @minicart-icons-color-hover: @header-icons-color-hover;
 
-@price-color: #575757;
+@price-color: @color-gray34;
 @price-size: 22px;
 @price-size-desktop: 36px;
 
@@ -40,19 +40,19 @@
 
 // Footer
 
-@footer-bg-color: #f4f4f4;
-@footer-links-separator-border-color: #cecece;
-@footer-links-color: #575757;
-@footer-links-color-hover: #333;
+@footer-bg-color: @color-gray-light01;
+@footer-links-separator-border-color: @color-gray-light4;
+@footer-links-color: @color-gray34;
+@footer-links-color-hover: @color-gray20;
 @footer-links-color-current: @color-primary-light;
 
 
 // Layered navigation
 
-@filter-title-bg: #f0f0f0;
-@filter-link: #494949;
+@filter-title-bg: @color-gray94;
+@filter-link: @color-gray-darken4;
 @filter-link-hover: darken(@filter-link, 30%);
-@filter-quantity: #858585;
+@filter-quantity: @color-gray52;
 
 //
 //    Common
@@ -180,9 +180,9 @@ body {
 //  Footer
 //--------------------------------------
 
-@footer-bg-color: #f4f4f4;
-@footer-links-separator-border-color: #cecece;
-@footer-links-color: #575757;
+@footer-bg-color: @color-gray-light01;
+@footer-links-separator-border-color: @color-gray-light4;
+@footer-links-color: @color-gray34;
 @footer-links-color-hover: @color-gray20;
 @footer-links-color-current: @color-primary-light;
 
diff --git a/app/design/frontend/Magento/luma/web/css/source/abstract.less b/app/design/frontend/Magento/luma/web/css/source/abstract.less
@@ -237,9 +237,9 @@
         @_icon-font-size: 12px,
         @_icon-font-line-height: 15px,
         @_icon-font-text-hide: true,
-        @_icon-font-color: #999,
-        @_icon-font-color-hover: #494949,
-        @_icon-font-color-active: #999
+        @_icon-font-color: @color-gray60,
+        @_icon-font-color-hover: @color-gray-darken4,
+        @_icon-font-color-active: @color-gray60
     );
 }
 
@@ -248,10 +248,10 @@
 //--------------------------------------
 .abs-product-link {
     .link(
-        @_link-color: #303030,
-        @_link-color-hover: #303030,
-        @_link-color-active: #303030,
-        @_link-color-visited: #303030
+        @_link-color: @color-gray19,
+        @_link-color-hover: @color-gray19,
+        @_link-color-active: @color-gray19,
+        @_link-color-visited: @color-gray19
     );
 }
 
diff --git a/app/design/frontend/Magento/luma/web/css/source/lib/variables.less b/app/design/frontend/Magento/luma/web/css/source/lib/variables.less
@@ -19,10 +19,15 @@
 @color-white: #fff;
 @color-black: #000;
 
+@color-gray19: #303030;
 @color-gray20: #333;
 @color-gray34: #575757;
+@color-gray40: #666;
+@color-gray52: #858585;
 @color-gray55: #8c8c8c;
 @color-gray56: #8f8f8f;
+@color-gray60: #999;
+@color-gray62: #9e9e9e;
 @color-gray64: #a3a3a3;
 @color-gray68: #adadad;
 @color-gray76: #c2c2c2;
@@ -35,17 +40,27 @@
 @color-gray95: #f2f2f2;
 
 @color-gray-light0: #f6f6f6;
+@color-gray-light01: #f4f4f4;
 @color-gray-light1: #e5efe5;
 @color-gray-light2: #bbb;
 @color-gray-light3: #aeaeae;
+@color-gray-light4: #cecece;
+
+@color-gray-middle1: #e4e4e4;
+@color-gray-middle2: #c6c6c6;
+@color-gray-middle3: #7e807e;
 
 @color-gray-darken0: #eee;
 @color-gray-darken1: #e2e2e2;
 @color-gray-darken2: #cdcdcd;
 @color-gray-darken3: #555;
+@color-gray-darken4: #494949;
 
+@color-red9: #ff0101;
 @color-red10: #e02b27;
 @color-red11: #b30000;
+@color-red12: #d10029;
+
 @color-orange-red1: #ff5501;
 @color-orange-red2: #ff5601;
 @color-orange-red3: #ff5700;
@@ -63,6 +78,8 @@
 @color-brownie-light1: #c07600;
 
 @color-yellow-light1: #fdf0d5;
+@color-yellow-light2: #ffee9c;
+@color-yellow-light3: #d6ca8e;
 
 // Color nesting
 @color-background-page: @color-white;
diff --git a/lib/web/css/source/lib/variables.less b/lib/web/css/source/lib/variables.less
@@ -18,28 +18,51 @@
 @color-white: #fff;
 @color-black: #000;
 
+@color-gray19: #303030;
 @color-gray20: #333;
 @color-gray34: #575757;
+@color-gray40: #666;
+@color-gray52: #858585;
+@color-gray55: #8c8c8c;
 @color-gray56: #8f8f8f;
+@color-gray60: #999;
+@color-gray62: #9e9e9e;
 @color-gray64: #a3a3a3;
+@color-gray68: #adadad;
 @color-gray76: #c2c2c2;
 @color-gray78: #c7c7c7;
+@color-gray80: #ccc;
 @color-gray82: #d1d1d1;
+@color-gray90: #e5e5e5;
 @color-gray91: #e8e8e8;
+@color-gray94: #f0f0f0;
 @color-gray95: #f2f2f2;
 
+@color-gray-light0: #f6f6f6;
+@color-gray-light01: #f4f4f4;
 @color-gray-light1: #e5efe5;
 @color-gray-light2: #bbb;
 @color-gray-light3: #aeaeae;
+@color-gray-light4: #cecece;
 
+@color-gray-middle1: #e4e4e4;
+@color-gray-middle2: #c6c6c6;
+@color-gray-middle3: #7e807e;
+
+@color-gray-darken0: #eee;
 @color-gray-darken1: #e2e2e2;
 @color-gray-darken2: #cdcdcd;
 @color-gray-darken3: #555;
+@color-gray-darken4: #494949;
 
+@color-red9: #ff0101;
 @color-red10: #e02b27;
 @color-red11: #b30000;
+@color-red12: #d10029;
+
 @color-orange-red1: #ff5501;
 @color-orange-red2: #ff5601;
+@color-orange-red3: #ff5700;
 
 @color-dark-green1: #006400;
 
@@ -54,6 +77,8 @@
 @color-brownie-light1: #c07600;
 
 @color-yellow-light1: #fdf0d5;
+@color-yellow-light2: #ffee9c;
+@color-yellow-light3: #d6ca8e;
 
 // Color nesting
 @color-primary: @color-gray20;

Original file line number	Diff line number	Diff line change
`@@ -141,10 +141,10 @@`
`141`	`141`	`margin-left: -5px;`
`142`	`142`	`padding-right: 7px;`
`143`	`143`	`&:hover {`
`144`		`- background-color: #e8e8e8;`
	`144`	`+ background-color: @color-gray91;`
`145`	`145`	`text-decoration: none;`
`146`	`146`	`& + .count {`
`147`		`- background-color: #e8e8e8;`
	`147`	`+ background-color: @color-gray91;`
`148`	`148`	`}`
`149`	`149`	`}`
`150`	`150`	`}`
`@@ -421,7 +421,7 @@`
`421`	`421`	`margin-left: 0;`
`422`	`422`	`}`
`423`	`423`	`&:hover {`
`424`		`- background-color: #e8e8e8;`
	`424`	`+ background-color: @color-gray91;`
`425`	`425`	`}`
`426`	`426`	`}`
`427`	`427`	`}`