MAGETWO-34156: [UI] refactor variables names according to our code standards

- Refactored theme.less files to handle new theme creation with nesting (moved local theme variables to variables files)
- Less files renaming, separation to compiled and imports
- Separated and renamed global lib variables according to less style guide
- Added banners addition task for Grunt

Author: Bogdan Plieshka

Gruntfile.js

@@ -126,6 +126,23 @@ module.exports = function (grunt) {
         }
     };
 
+    //  Banners
+    //  ---------------------------------------------
+
+    var banner = {
+        firstLine: 'Copyright © <%= grunt.template.today("yyyy") %> Magento. All rights reserved.',
+        secondLine: 'See COPYING.txt for license details.',
+        css: function(){
+            return '/**\n * ' + this.firstLine + '\n * ' + this.secondLine + '\n */\n';
+        },
+        less: function(){
+            return '// /**\n//  * ' + this.firstLine + '\n//  * ' + this.secondLine + '\n//  */\n';
+        },
+        html: function(){
+            return '<!--\n/**\n * ' + this.firstLine + '\n * ' + this.secondLine + '\n */\n-->\n';
+        }
+    };
+
     //  Tasks
     //  _____________________________________________
 
@@ -135,6 +152,7 @@ module.exports = function (grunt) {
         path: path,
         theme: theme,
         combo: combo,
+        banner: banner,
 
         //  Execution into cmd
         //  ---------------------------------------------
@@ -343,21 +361,48 @@ module.exports = function (grunt) {
             }
         },
 
-        //  Concatenation
+        //  Banners
         //  ---------------------------------------------
 
-        concat: {
+        usebanner: {
             options: {
-                stripBanners: true,
-                banner: '/**\n * Copyright © <%= grunt.template.today("yyyy") %> Magento. All rights reserved.\n * See COPYING.txt for license details.\n */\n'
+                position: 'top',
+                linebreak: true
             },
             setup: {
-                src: '<%= path.css.setup %>/setup.css',
-                dest: '<%= path.css.setup %>/setup.css'
+                options: {
+                    banner: banner.css()
+                },
+                files: {
+                    src: '<%= path.css.setup %>/*.css'
+                }
+            },
+            documentationCss: {
+                options: {
+                    banner: banner.css()
+                },
+                files: {
+                    src: '<%= path.doc %>/**/*.css'
+                }
+            },
+            documentationLess: {
+                options: {
+                    banner: banner.less()
+                },
+                files: {
+                    src: '<%= path.doc %>/**/*.less'
+                }
+            },
+            documentationHtml: {
+                options: {
+                    banner: banner.html()
+                },
+                files: {
+                    src: '<%= path.doc %>/**/*.html'
+                }
             }
         },
 
-
         //  Watches files for changes and runs tasks based on the changed files
         //  ---------------------------------------------
 
@@ -552,6 +597,12 @@ module.exports = function (grunt) {
         'clean:pub'
     ]);
 
+    grunt.registerTask('documentation-banners', [
+        'usebanner:documentationCss',
+        'usebanner:documentationLess',
+        'usebanner:documentationHtml'
+    ]);
+
     //  Production
     //  ---------------------------------------------
 
@@ -561,7 +612,7 @@ module.exports = function (grunt) {
                 'less:' + component,
                 'autoprefixer:' + component,
                 'cssmin:' + component,
-                'concat:' + component
+                'usebanner:' + component
             ]);
         }
         if (component == undefined) {

app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/_dashboard.less

@@ -7,7 +7,7 @@
 //  Dashboard
 //  _____________________________________________
 
-@dashboard__font-size-base: 1.3rem;
+@dashboard__font-size__base: 1.3rem;
 @dashboard__font-size-l: 2.4rem;
 @dashboard-tabs__padding: 2rem;
 @dashboard-tabs__background-color: @color-white;
@@ -18,7 +18,7 @@
 
 .dashboard-data {
     background: @dashboard-tabs__background-color;
-    font-size: @dashboard__font-size-base;
+    font-size: @dashboard__font-size__base;
     width: 100%;
     th,
     td {
@@ -87,7 +87,7 @@
 .dashboard-container {
     .empty-text {
         background: @dashboard-tabs__background-color;
-        font-size: @dashboard__font-size-base;
+        font-size: @dashboard__font-size__base;
     }
 }
 
@@ -148,13 +148,13 @@
 
 .dashboard-totals-label {
     display: block;
-    font-size: @dashboard__font-size-base;
-    font-weight: @font-weight-bold;
+    font-size: @dashboard__font-size__base;
+    font-weight: @font-weight__bold;
 }
 
 .dashboard-totals-value {
     font-size: @dashboard__font-size-l;
-    font-weight: @font-weight-semibold;
+    font-weight: @font-weight__semibold;
 }
 
 //
@@ -169,8 +169,8 @@
             .background-gradient(
             @_background-gradient: true,
             @_background-gradient-direction: horizontal,
-            @_background-gradient-start-color: rgba(255,255,255,0),
-            @_background-gradient-end-color: @color-white,
+            @_background-gradient-color-start: rgba(255,255,255,0),
+            @_background-gradient-color-end: @color-white,
             @_background-gradient-color-position: false
             );
             content: '';
@@ -218,7 +218,7 @@
 
 .dashboard-item-title {
     font-size: 1.8rem;
-    font-weight: @font-weight-bold;
+    font-weight: @font-weight__bold;
 }
 
 .dashboard-item-primary {
@@ -231,14 +231,14 @@
 
 .dashboard-sales-value {
     font-size: @dashboard__font-size-l;
-    font-weight: @font-weight-semibold;
+    font-weight: @font-weight__semibold;
 }
 
 //
 //  Mobile
 //  _____________________________________________
 
-.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen-m) {
+.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
 
     //
     //  Totals: Revenue, Tax, Shipping, Quantity

app/design/adminhtml/Magento/backend/Magento_Theme/web/css/source/module.less

@@ -43,7 +43,7 @@ body {
     min-height: 100%;
     width: 100%;
     max-width: 100%;
-    min-width: @layout-min-width + 2 * @layout-indent;
+    min-width: @layout__min-width + 2 * @layout-indent__width;
     & > * {
         .vendor-prefix-flex-grow(0);
         .vendor-prefix-flex-shrink(0);
@@ -397,7 +397,7 @@ body {
         border-radius: 10px;
         vertical-align: middle;
         .icon-font(
-            @_icon-font: @font-family-base,
+            @_icon-font: @font-family__base,
             @_icon-font-content: '?',
             @_icon-font-size: 13px,
             @_icon-font-line-height: 16px,

app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_module.less

@@ -3,4 +3,4 @@
 //  * See COPYING.txt for license details.
 //  */
 
-//@import "formelements.less";
+//@import 'formelements';

app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/formelements.less

@@ -13,16 +13,16 @@
 @field-label_required--color: #EB5202;
 @field-note--color: #303030;
 @field-control--color: #303030;
-@field-control--bg-color: #fff;
-@field-control_disabled--bg-color: #E9E9E9;
+@field-control--background-color: #fff;
+@field-control_disabled--background-color: #E9E9E9;
 @field-control-addon--color: #858585;
 @field-date-icon--color: #514943;
 @field-tooltip-icon--color: #fff;
-@field-tooltip-icon--bg-color: #514943;
-@field-tooltip-content--bg-color: #fff8d7;
+@field-tooltip-icon--background-color: #514943;
+@field-tooltip-content--background-color: #fff8d7;
 @field-tooltip-content--border-color: #adadad;
 @field-error--color: #555;
-@field-error--bg-color: #FFF8D6;
+@field-error--background-color: #FFF8D6;
 @field-error--border-color: #E22626;
 
 
@@ -72,7 +72,7 @@
             width: 22px;
             text-align: center;
             color: @field-tooltip-icon--color;
-            background-color: @field-tooltip-icon--bg-color;
+            background-color: @field-tooltip-icon--background-color;
         }
         span {
             .visually-hidden();
@@ -87,7 +87,7 @@
         position: absolute;
         z-index: 1;
         width: 320px;
-        background: @field-tooltip-content--bg-color;
+        background: @field-tooltip-content--background-color;
         padding: 15px 25px;
         right: -66px;
         border: 1px solid @field-tooltip-content--border-color;
@@ -106,7 +106,7 @@
             z-index: 3;
         }
         &:after {
-            border-top-color: @field-tooltip-content--bg-color;
+            border-top-color: @field-tooltip-content--background-color;
             margin-top: -1px;
             z-index: 4;
         }
@@ -127,7 +127,7 @@
        display: block;
        margin: 2px 0 0;
        padding: 6px 10px 10px;
-       background: @field-error--bg-color;
+       background: @field-error--background-color;
        color: @field-error--color;
        font-size: 12px;
        font-weight: 500;
@@ -171,7 +171,7 @@
         color: @field-label-disabled--color;
     }
     &.field .control [class*="control-"][disabled] {
-        background-color: @field-control_disabled--bg-color;
+        background-color: @field-control_disabled--background-color;
         opacity: .5;
         color: @field-control--color;
         border-color: @field-control--border-color;
@@ -284,7 +284,7 @@
             border-radius: 1px;
             padding: 0 10px;
             color: @field-control--color;
-            background-color: @field-control--bg-color;
+            background-color: @field-control--background-color;
             font-weight: 500;
             font-size: 15px;
             min-width: 11em;
@@ -505,7 +505,7 @@
                 }
                 &[disabled] + label:before {
                     opacity: .5;
-                    background: @field-control_disabled--bg-color;
+                    background: @field-control_disabled--background-color;
                 }
             }
         }

app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/module.less

@@ -13,20 +13,20 @@
 @admin__color4: #666;
 
 //Spacing
-@spacing-base: 10px;
-@spacing-xs: @spacing-base;
-@spacing-s: @spacing-base;
+@spacing__base: 10px;
+@spacing-xs: @spacing__base;
+@spacing-s: @spacing__base;
 @spacing-m: 15px;
-@spacing-l: @spacing-base;
-@spacing-xl: @spacing-base;
+@spacing-l: @spacing__base;
+@spacing-xl: @spacing__base;
 
 //Fonts
-@size-base: 1rem;
-@size-xs: @size-base;
-@size-s: @size-base;
-@size-m: @size-base * 1.2;
-@size-l: @size-base;
-@size-xl: @size-base;
+@size__base: 1rem;
+@size-xs: @size__base;
+@size-s: @size__base;
+@size-m: @size__base * 1.2;
+@size-l: @size__base;
+@size-xl: @size__base;
 
 [class*="tab-nav-item"]:not(ul):active,
 [class*="tab-nav-item"]:not(ul):focus {

app/design/adminhtml/Magento/backend/web/css/admin.less

@@ -5,10 +5,10 @@
 
 /* Backend */
 
-@import "../less/styles/vars.less";
-@import "../less/styles/base.less";
-@import "../less/lib/buttons.less";
-@import 'source/lib/utilities.less';
+@import '../less/styles/vars';
+@import '../less/styles/base';
+@import '../less/lib/buttons';
+@import 'source/lib/_utilities';
 
 .dont-use-this-class-big-size {
     font-size: 18px;

app/design/adminhtml/Magento/backend/web/css/source/_alerts.less

@@ -8,7 +8,7 @@
 //  _____________________________________________
 
 //  Colors
-@alert__bg-color: @color-lazy-sunny;
+@alert__background-color: @color-lazy-sunny;
 @alert__color: @color-gray20;
 
 //  Sizes
@@ -31,7 +31,7 @@
 }
 
 .message {
-    background: @alert__bg-color;
+    background: @alert__background-color;
     color: @alert__color;
     margin-bottom: 3.5rem;
     padding: 1.8rem 4rem 1.8rem 1.9rem;
@@ -41,10 +41,10 @@
     &:before {
         background: none;
         border: 0;
-        font-family: @icon-font-admin-name;
+        font-family: @icon-font__admin-name;
         font-size: @alert__font-size;
-        font-style: @font-style-regular;
-        font-weight: @font-weight-regular;
+        font-style: @font-style__base;
+        font-weight: @font-weight__regular;
         height: auto;
         left: 1.9rem;
         line-height: inherit;