MAGETWO-31855: UI improvements

- updates for hex color variables

Author: zanilee

app/design/frontend/Magento/blank/Magento_Review/web/css/source/module.less

@@ -200,7 +200,7 @@
 //--------------------------------------
 .review {
     &-toolbar {
-        border-top: 1px solid #c9c9c9;
+        border-top: 1px solid @color-gray79;
         margin: 0 0 @indent-base;
         text-align: center;
         &:first-child {
@@ -209,7 +209,7 @@
         .pages {
             display: block;
             text-align: center;
-            border-bottom: 1px solid #c9c9c9;
+            border-bottom: 1px solid @color-gray79;
             padding: @indent-base 0;
         }
         .limiter {
@@ -260,7 +260,7 @@
     }
     &-item {
         padding: @indent-base 0;
-        border-bottom: 1px solid #c9c9c9;
+        border-bottom: 1px solid @color-gray79;
         margin: 0;
         .clearer();
         &:last-child {

app/design/frontend/Magento/blank/web/css/print.less

@@ -27,7 +27,7 @@
     // Don't show links for images, or javascript/internal links */
     pre,
     blockquote {
-        border: 1px solid #999;
+        border: 1px solid @color-gray60;
         page-break-inside: avoid;
     }
     thead {
@@ -40,7 +40,7 @@
         }
         table-layout: fixed;
         & > tfoot > tr:first-child {
-            border-top: 1px solid #999;
+            border-top: 1px solid @color-gray60;
         }
     }
     .box,

app/design/frontend/Magento/blank/web/css/source/navigation.less

@@ -78,7 +78,7 @@
         .css(transition, left .3s, 1);
 
         .switcher {
-            border-top: 1px solid #D1D1D1;
+            border-top: 1px solid @color-gray82;
             margin: 0;
             font-size: 1.6rem;
             padding: 8px 20px;
@@ -88,7 +88,7 @@
                 margin-bottom: @indent-xs-base;
             }
             &:last-child {
-                    border-bottom: 1px solid #D1D1D1;
+                    border-bottom: 1px solid @color-gray82;
             }
             &-trigger {
                 strong {
@@ -122,15 +122,15 @@
         .header.links {
             .list-reset-styles();
             li {
-                border-top: 1px solid #D1D1D1;
+                border-top: 1px solid @color-gray82;
                 margin: 0;
                 font-size: 1.6rem;
                 &.greet.welcome {
                     padding: 8px 20px;
                     font-weight: 700;
                 }
                 &:last-child {
-                    border-bottom: 1px solid #D1D1D1;
+                    border-bottom: 1px solid @color-gray82;
                 }
             }
             a, a:hover

app/design/frontend/Magento/blank/web/css/source/theme.less

@@ -8,7 +8,7 @@
 @link-color-visited: @link-color;
 
 // Introduce new theme specific variables
-@sidebar-background: #f5f5f5;  // Used in cart sidebar, Checkout sidebar, Tier Prices, My account navigation, Rating block background
+@sidebar-background: @color-white-smoke;  // Used in cart sidebar, Checkout sidebar, Tier Prices, My account navigation, Rating block background
 
 @h1-font-size: ceil((@font-size-base * 1.85)); // 26px
 @h1-font-size-desktop: ceil((@font-size-base * 2.85)); // 40px

app/design/frontend/Magento/luma/Magento_Bundle/web/css/source/module.less

@@ -38,7 +38,7 @@
         margin-bottom: @indent-l-base;
         .fieldset > .field {
             padding-top: @form-field-vertical-indent;
-            border-top: 1px #e4e4e4 solid;
+            border-top: 1px @color-gray-middle1 solid;
             &:first-of-type {
                 border-top: 0;
                 padding-top: 0;
@@ -82,7 +82,7 @@
         }
         > .title,
         .bundle-summary .subtitle {
-            border-bottom: 1px #e4e4e4 solid;
+            border-bottom: 1px @color-gray-middle1 solid;
             padding-bottom: 16px;
             margin-bottom: @indent-m-base;
         }

app/design/frontend/Magento/luma/Magento_Catalog/web/css/source/listings.less

@@ -235,7 +235,7 @@
         .products-grid &:hover {
             margin: -10px;
             padding: 9px;
-            border: 1px solid #bbb;
+            border: 1px solid @color-gray-light2;
             @_shadow: 3px 3px 4px 0 rgba(0, 0, 0, .3);
             .css(box-shadow, @_shadow);
             position: relative;
@@ -255,7 +255,7 @@
         .css(background, @color-white);
         padding: 0 9px 9px 9px;
         margin: 9px 0 0 -1px;
-        border: 1px solid #bbb;
+        border: 1px solid @color-gray-light2;
         border-top: none;
         @_shadow: 3px 4px 4px 0 rgba(0, 0, 0, .3);
         .css(box-shadow, @_shadow);

app/design/frontend/Magento/luma/Magento_Catalog/web/css/source/module.less

@@ -5,7 +5,7 @@
 @import "listings.less";
 @import "toolbar.less";
 
-@product-info-price: #575757;
+@product-info-price: @color-gray34;
 @product-h1-margin-bottom-desktop: @indent-s-base + @indent-xs-base;
 
 //
@@ -149,7 +149,7 @@
 
 .product-info-main {
     .product-info-price {
-        border-bottom: 1px #c1c1c1 solid;
+        border-bottom: 1px @color-gray-light5 solid;
         display: table;
         width: 100%;
         .css(color, @product-info-price);

app/design/frontend/Magento/luma/Magento_Downloadable/web/css/source/module.less

@@ -78,7 +78,7 @@
     }
     .field.choice {
         box-sizing: border-box;
-        border-bottom: 1px solid #ebebeb;
+        border-bottom: 1px solid @color-gray92;
         padding-bottom: @indent-s-base;
         margin-bottom: @indent-s-base;
         &:extend(.clearer all);
@@ -138,7 +138,7 @@
         }
     }
     .page-product-downloadable .product-info-price ~ *:last-child:after {
-        border-bottom: 1px #c1c1c1 solid;
+        border-bottom: 1px @color-gray-light5 solid;
         content: '';
         display: block;
         height: 0;

app/design/frontend/Magento/luma/Magento_LayeredNavigation/web/css/source/module.less

@@ -37,7 +37,7 @@
                 .css(color, @color-white);
                 min-width: 1em;
                 line-height: 1;
-                background: #fc5e10;
+                background: @color-orange-red4;
             }
             &.disabled {
                 opacity: .5;
@@ -382,7 +382,7 @@
                         &:before {
                             content: "";
                             display: block;
-                            .arrow(up,8px,#000);
+                            .arrow(up, 8px, @color-black);
                             position: absolute;
                             left: 50%;
                             bottom: -1px;

app/design/frontend/Magento/luma/Magento_Review/web/css/source/module.less

@@ -78,7 +78,7 @@
 .review {
     &-toolbar {
         padding: 0;
-        border-top: 1px solid #c9c9c9;
+        border-top: 1px solid @color-gray79;
         margin: 0 0 @indent-base;
         text-align: center;
         &:first-child {
@@ -87,7 +87,7 @@
         .pages {
             display: block;
             text-align: center;
-            border-bottom: 1px solid #c9c9c9;
+            border-bottom: 1px solid @color-gray79;
             padding: @indent-base 0;
         }
         .limiter {
@@ -154,7 +154,7 @@
     }
     &-item {
         padding: @indent-base 0;
-        border-bottom: 1px solid #c9c9c9;
+        border-bottom: 1px solid @color-gray79;
         margin: 0;
         .clearer();
         &:last-child {