MAGETWO-31855: UI improvements

- hex colors moved to variables.

Author: Oleg Zinoviev

app/design/frontend/Magento/luma/web/css/source/lib/variables.less

@@ -17,8 +17,52 @@
 
 // Colors
 @color-white: #fff;
+@color-black: #000;
+
 @color-gray20: #333;
+@color-gray34: #575757;
+@color-gray55: #8c8c8c;
 @color-gray56: #8f8f8f;
+@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-light1: #e5efe5;
+@color-gray-light2: #bbb;
+@color-gray-light3: #aeaeae;
+
+@color-gray-darken0: #eee;
+@color-gray-darken1: #e2e2e2;
+@color-gray-darken2: #cdcdcd;
+@color-gray-darken3: #555;
+
+@color-red10: #e02b27;
+@color-red11: #b30000;
+@color-orange-red1: #ff5501;
+@color-orange-red2: #ff5601;
+@color-orange-red3: #ff5700;
+
+@color-dark-green1: #006400;
+
+@color-blue1: #1979c3;
+@color-blue2: #006bb4;
+@color-sky-blue1: #68a8e0;
+
+@color-pink1: #fae5e5;
+@color-dark-pink1: #800080;
+
+@color-brownie1: #6f4400;
+@color-brownie-light1: #c07600;
+
+@color-yellow-light1: #fdf0d5;
 
 // Color nesting
 @color-background-page: @color-white;
@@ -28,13 +72,13 @@
 @color-primary-darker: darken(@color-primary, 13.5%);  // #111
 @color-primary-lighter: lighten(@color-primary, 29%);  // #7d7d7d
 @color-primary-light: lighten(@color-primary, 45%);  // #a6a6a6
-@color-secondary: #e8e8e8;
+@color-secondary: @color-gray91;
 @color-secondary-light: lighten(@color-secondary, 5%);
 @page-bg-color: @color-white;
-@panel-bg: #f6f6f6;
-@color-active: #ff5501;
-@color-error: #e02b27;
-@color-focus: #68a8e0;
+@panel-bg: @color-gray-light0;
+@color-active: @color-orange-red1;
+@color-error: @color-red10;
+@color-focus: @color-sky-blue1;
 
 @font-family-base: @font-family-sans-serif; // Also used in: @loader-text-font-family
 // setting font-size for HTML tag, use <b>%</b>  units
@@ -72,17 +116,17 @@
 @indent-s-base: @indent-base / 2; // 10px
 @indent-xs-base: @indent-base / 4; // 5px
 
-@border-color-base: #ccc;
+@border-color-base: @color-gray80;
 @border-width-base: 1px;
 
 // Links
-@link-color: #1979c3;
+@link-color: @color-blue1;
 @link-text-decoration: none;
 
-@link-color-visited: #800080;
+@link-color-visited: @color-dark-pink1;
 @link-text-decoration-visited: none;
 
-@link-color-hover: #006bb4;
+@link-color-hover: @color-blue2;
 @link-text-decoration-hover: underline;
 
 @link-color-active: @color-active;
@@ -323,7 +367,7 @@
 //
 //    Navigation variables
 //--------------------------------------
-@navigation-background: #f0f0f0;
+@navigation-background: @color-gray94;
 @navigation-border: '';
 @navigation-level0-font-size: 16;
 @navigation-level0-font-weight: @font-weight-bold;
@@ -333,8 +377,8 @@
 @navigation-level0-text-transform: uppercase;
 
 @navigation-level0-item-background: '';
-@navigation-level0-item-border: 1px solid #d1d1d1;
-@navigation-level0-item-color: #575757;
+@navigation-level0-item-border: 1px solid @color-gray82;
+@navigation-level0-item-color: @color-gray34;
 @navigation-level0-item-text-decoration: none;
 
 @navigation-level0-item-background-active: '';
@@ -351,7 +395,7 @@
 
 @submenu-item-background: '';
 @submenu-item-border: '';
-@submenu-item-color: #575757;
+@submenu-item-color: @color-gray34;
 @submenu-item-text-decoration: '';
 
 @submenu-item-background-active: '';
@@ -371,7 +415,7 @@
 
 @navigation-desktop-level0-item-background: '';
 @navigation-desktop-level0-item-border: '';
-@navigation-desktop-level0-item-color: #575757;
+@navigation-desktop-level0-item-color: @color-gray34;
 @navigation-desktop-level0-item-text-decoration: none;
 
 @navigation-desktop-level0-item-background-hover: '';
@@ -530,7 +574,7 @@
 
 // Default = secondary button
 @button-color: @color-primary;
-@button-background: #eee;
+@button-background: @color-gray-darken0;
 @button-border: 1px solid @border-color-base;
 @button-gradient-start-color: false;
 @button-gradient-end-color: false;
@@ -542,7 +586,7 @@
 @button-gradient-end-color-hover: false;
 
 @button-color-active: @button-color;
-@button-background-active: #e2e2e2;
+@button-background-active: @color-gray-darken1;
 @button-border-active: @button-border;
 @button-gradient-start-color-active: false;
 @button-gradient-end-color-active: false;
@@ -555,20 +599,20 @@
 @button-primary-gradient: false;
 @button-primary-gradient-direction: false;
 
-@button-primary-background: #1979c3;
-@button-primary-border: 1px solid #1979c3;
+@button-primary-background: @color-blue1;
+@button-primary-border: 1px solid @color-blue1;
 @button-primary-color: @color-white;
 @button-primary-gradient-start-color: false;
 @button-primary-gradient-end-color: false;
 
-@button-primary-background-hover: #006bb4;
-@button-primary-border-hover: 1px solid #006bb4;
+@button-primary-background-hover: @color-blue2;
+@button-primary-border-hover: 1px solid @color-blue2;
 @button-primary-color-hover: @color-white;
 @button-primary-gradient-start-color-hover: false;
 @button-primary-gradient-end-color-hover: false;
 
-@button-primary-background-active: #006bb4;
-@button-primary-border-active: 1px solid #006bb4;
+@button-primary-background-active: @color-blue2;
+@button-primary-border-active: 1px solid @color-blue2;
 @button-primary-color-active: @color-white;
 @button-primary-gradient-start-color-active: false;
 @button-primary-gradient-end-color-active: false;
@@ -703,16 +747,16 @@
 @message-border-radius: false;
 
 // Information message
-@message-info-color: #6f4400;
-@message-info-background: #fdf0d5;
+@message-info-color: @color-brownie1;
+@message-info-background: @color-yellow-light1;
 @message-info-link-color: @link-color;
 @message-info-link-color-hover: @link-color-hover;
 @message-info-link-color-active: @link-color-hover;
 @message-info-border-color: @message-border-color;
 @message-info-icon: @icon-warning;
-@message-info-icon-color-inner: #c07600;
+@message-info-icon-color-inner: @color-brownie-light1;
 @message-info-icon-color-lateral: @color-white;
-@message-info-icon-background: #6f4400;
+@message-info-icon-background: @color-brownie1;
 @message-info-icon-top: @message-icon-top;
 @message-info-icon-right: @message-icon-right;
 @message-info-icon-bottom: @message-icon-bottom;
@@ -736,31 +780,31 @@
 
 // Error message
 @message-error-color: @color-error;
-@message-error-background: #fae5e5;
+@message-error-background: @color-pink1;
 @message-error-link-color: @link-color;
 @message-error-link-color-hover: @link-color-hover;
 @message-error-link-color-active: @link-color-hover;
 @message-error-border-color: @message-border-color;
 @message-error-icon: @icon-error;
-@message-error-icon-color-inner: #b30000;
+@message-error-icon-color-inner: @color-red11;
 @message-error-icon-color-lateral: @color-white;
-@message-error-icon-background: #b30000;
+@message-error-icon-background: @color-red11;
 @message-error-icon-top: @message-icon-top;
 @message-error-icon-right: @message-icon-right;
 @message-error-icon-bottom: @message-icon-bottom;
 @message-error-icon-left: @message-icon-left;
 
 // Success message
-@message-success-color: #006400;
-@message-success-background: #e5efe5;
+@message-success-color: @color-dark-green1;
+@message-success-background: @color-gray-light1;
 @message-success-link-color: @link-color;
 @message-success-link-color-hover: @link-color-hover;
 @message-success-link-color-active: @link-color-hover;
 @message-success-border-color: @message-border-color;
 @message-success-icon: @icon-success;
-@message-success-icon-color-inner: #006400;
+@message-success-icon-color-inner: @color-dark-green1;
 @message-success-icon-color-lateral: @color-white;
-@message-success-icon-background: #006400;
+@message-success-icon-background: @color-dark-green1;
 @message-success-icon-top: @message-icon-top;
 @message-success-icon-right: @message-icon-right;
 @message-success-icon-bottom: @message-icon-bottom;
@@ -786,7 +830,7 @@
 //    Tooltips variables
 //--------------------------------------
 @tooltip-background: @color-white;
-@tooltip-border-color: #bbb;
+@tooltip-border-color: @color-gray-light2;
 @tooltip-border-width: 1px;
 @tooltip-border-radius: false;
 @tooltip-color: @color-primary;
@@ -833,7 +877,7 @@
 // Form elements inputs default variables
 @form-element-input-type: ''; // input-text, select, textarea, input-radio, input-checkbox
 @form-element-input-background: @color-white;
-@form-element-input-border-color: #c2c2c2;
+@form-element-input-border-color: @color-gray76;
 @form-element-input-border: 1px solid @form-element-input-border-color;
 @form-element-input-border-radius: 1px;
 @form-element-input-height: 32px;
@@ -850,7 +894,7 @@
 @form-element-input-line-height: @line-height-base;
 
 // Placeholder
-@form-element-input-placeholder-color: #c2c2c2;
+@form-element-input-placeholder-color: @color-gray76;
 @form-element-input-placeholder-font-style: @form-element-input-font-style;
 
 // Disabled state
@@ -1062,7 +1106,7 @@
 @form-field-type-inline-control-width: 74.2%;
 
 // Form field label asterisk
-@form-field-label-asterisk-color: #e02b27; // also used in: @form-hasrequired-color
+@form-field-label-asterisk-color: @color-red10; // also used in: @form-hasrequired-color
 @form-field-label-asterisk-font-size: @font-size-s;
 @form-field-label-asterisk-font-family: false;
 @form-field-label-asterisk-font-weight: false;
@@ -1123,7 +1167,7 @@
 @pager-current-font-weight: @font-weight-bold;
 @pager-current-color: @color-primary;
 @pager-current-border: false;
-@pager-current-background: #e5e5e5;
+@pager-current-background: @color-gray90;
 
 @pager-current-gradient: false;
 @pager-current-gradient-direction: false;
@@ -1219,8 +1263,8 @@
 @rating-icon-font: @icon-font;
 @rating-icon-font-size: 16px;
 @rating-icon-letter-spacing: 2px;
-@rating-icon-color: #c7c7c7;
-@rating-icon-color-active: #ff5501;
+@rating-icon-color: @color-gray78;
+@rating-icon-color-active: @color-orange-red1;
 @rating-label-hide: false;
 
 //
@@ -1239,15 +1283,15 @@
 @dropdown-list-position-left: false;
 @dropdown-list-pointer: true; // true | false
 @dropdown-list-background: @color-white;
-@dropdown-list-border: 1px solid #bbb;
-@dropdown-list-pointer-border: #bbb;
+@dropdown-list-border: 1px solid @color-gray-light2;
+@dropdown-list-pointer-border: @color-gray-light2;
 @dropdown-list-pointer-position: left; // right
 @dropdown-list-pointer-position-top: -12px;
 @dropdown-list-pointer-position-left-right: 10px;
 @dropdown-list-item-border: 0;
 @dropdown-list-item-padding: 3px 5px;
 @dropdown-list-item-margin: 0;
-@dropdown-list-item-hover: #e8e8e8;
+@dropdown-list-item-hover: @color-gray91;
 @dropdown-list-shadow: 0 3px 3px rgba(0,0,0,.15); // '' | none
 @dropdown-list-z-index: 100;
 
@@ -1342,7 +1386,7 @@
 @breadcrumbs-icon-font-vertical-align: top;
 
 // Breadcrumbs - current page
-@breadcrumbs-current-color: #a3a3a3;
+@breadcrumbs-current-color: @color-gray64;
 @breadcrumbs-current-font-weight: @font-weight-base;
 @breadcrumbs-current-background: false;
 @breadcrumbs-current-border: false;
@@ -1396,7 +1440,7 @@
 @popup-height: auto;
 @popup-padding: 22px;
 @popup-background: @color-white;
-@popup-border-color: #adadad;
+@popup-border-color: @color-gray68;
 @popup-border: 1px solid @popup-border-color;
 @popup-shadow: 0 3px 3px rgba(0,0,0,.15);
 @popup-fade: opacity .3s linear;
@@ -1447,19 +1491,19 @@
 @popup-icon-font: @button-icon-font;
 @popup-icon-font-size: 16px;
 @popup-icon-font-line-height: 16px;
-@popup-icon-font-color: #8c8c8c;
-@popup-icon-font-color-hover: darken(#8c8c8c, 10%);
+@popup-icon-font-color: @color-gray55;
+@popup-icon-font-color-hover: darken(@color-gray55, 10%);
 @popup-icon-font-color-active: @popup-icon-font-color-hover;
 @popup-icon-font-margin: @button-icon-font-margin;
 @popup-icon-font-vertical-align: @button-icon-font-vertical-align;
 @popup-icon-font-position: @button-icon-font-position;
 @popup-icon-font-text-hide: true;
 
 // Window overlay variables
-@overlay-background: #8c8c8c;
+@overlay-background: @color-gray55;
 @overlay-opacity: .7;
 @overlay-opacity-old: 70;
 @overlay-fade: opacity .15s linear;
 @overlay-z-index: 1000;
 
-@gallery-thumb-border-color-active: #ff5700;
+@gallery-thumb-border-color-active: @color-orange-red3;