Bumps version to alpha-072

U4-9145 Updating TinyMCE to latest (4.4.3)

build/UmbracoVersion.txt

@@ -1,3 +1,3 @@
 # Usage: on line 2 put the release version, on line 3 put the version comment (example: beta)
 7.6.0
-alpha071
+alpha072

src/SolutionInfo.cs

@@ -12,4 +12,4 @@ using System.Resources;
 [assembly: AssemblyVersion("1.0.*")]
 
 [assembly: AssemblyFileVersion("7.6.0")]
-[assembly: AssemblyInformationalVersion("7.6.0-alpha071")]
+[assembly: AssemblyInformationalVersion("7.6.0-alpha072")]

src/Umbraco.Core/Configuration/UmbracoVersion.cs

@@ -24,7 +24,7 @@ namespace Umbraco.Core.Configuration
         /// Gets the version comment (like beta or RC).
         /// </summary>
         /// <value>The version comment.</value>
-        public static string CurrentComment { get { return "alpha071"; } }
+        public static string CurrentComment { get { return "alpha072"; } }
 
         // Get the version of the umbraco.dll by looking at a class in that dll
         // Had to do it like this due to medium trust issues, see: http://haacked.com/archive/2010/11/04/assembly-location-and-medium-trust.aspx

src/Umbraco.Tests/IO/ShadowFileSystemTests.cs

@@ -377,13 +377,14 @@ namespace Umbraco.Tests.IO
             var path = IOHelper.MapPath("FileSysTests");
             var appdata = IOHelper.MapPath("App_Data");
             Directory.CreateDirectory(path);
+            Directory.CreateDirectory(appdata);
 
             var scopedFileSystems = false;
             var scopeProvider = MockScopeProvider(() => scopedFileSystems);
 
             var fs = new PhysicalFileSystem(path, "ignore");
             var sw = new ShadowWrapper(fs, "shadow", scopeProvider);
-            var swa = new[] {sw};
+            var swa = new[] { sw };
 
             using (var ms = new MemoryStream(Encoding.UTF8.GetBytes("foo")))
                 sw.AddFile("sub/f1.txt", ms);
@@ -393,47 +394,47 @@ namespace Umbraco.Tests.IO
 
             // explicit shadow without scope does not work
             sw.Shadow(id = Guid.NewGuid());
-            Assert.IsTrue(Directory.Exists(appdata + "/Shadow/" + id));
+            Assert.IsTrue(Directory.Exists(appdata + "/TEMP/ShadowFs/" + id));
             using (var ms = new MemoryStream(Encoding.UTF8.GetBytes("foo")))
                 sw.AddFile("sub/f2.txt", ms);
             Assert.IsTrue(fs.FileExists("sub/f2.txt"));
             sw.UnShadow(true);
             Assert.IsTrue(fs.FileExists("sub/f2.txt"));
-            Assert.IsFalse(Directory.Exists(appdata + "/Shadow/" + id));
+            Assert.IsFalse(Directory.Exists(appdata + "/TEMP/ShadowFs/" + id));
 
             // shadow with scope but no complete does not complete
             scopedFileSystems = true; // pretend we have a scope
             var scope = new ShadowFileSystems(id = Guid.NewGuid(), swa);
-            Assert.IsTrue(Directory.Exists(appdata + "/Shadow/" + id));
+            Assert.IsTrue(Directory.Exists(appdata + "/TEMP/ShadowFs/" + id));
             using (var ms = new MemoryStream(Encoding.UTF8.GetBytes("foo")))
                 sw.AddFile("sub/f3.txt", ms);
             Assert.IsFalse(fs.FileExists("sub/f3.txt"));
-            Assert.AreEqual(1, Directory.GetDirectories(appdata + "/Shadow").Length);
+            Assert.AreEqual(1, Directory.GetDirectories(appdata + "/TEMP/ShadowFs").Length);
             scope.Dispose();
             scopedFileSystems = false;
             Assert.IsFalse(fs.FileExists("sub/f3.txt"));
-            Assert.IsFalse(Directory.Exists(appdata + "/Shadow/" + id));
+            Assert.IsFalse(Directory.Exists(appdata + "/TEMP/ShadowFs/" + id));
 
             // shadow with scope and complete does complete
             scopedFileSystems = true; // pretend we have a scope
             scope = new ShadowFileSystems(id = Guid.NewGuid(), swa);
-            Assert.IsTrue(Directory.Exists(appdata + "/Shadow/" + id));
+            Assert.IsTrue(Directory.Exists(appdata + "/TEMP/ShadowFs/" + id));
             using (var ms = new MemoryStream(Encoding.UTF8.GetBytes("foo")))
                 sw.AddFile("sub/f4.txt", ms);
             Assert.IsFalse(fs.FileExists("sub/f4.txt"));
-            Assert.AreEqual(1, Directory.GetDirectories(appdata + "/Shadow").Length);
+            Assert.AreEqual(1, Directory.GetDirectories(appdata + "/TEMP/ShadowFs").Length);
             scope.Complete();
             scope.Dispose();
             scopedFileSystems = false;
-            TestHelper.TryAssert(() => Assert.AreEqual(0, Directory.GetDirectories(appdata + "/Shadow").Length));
+            TestHelper.TryAssert(() => Assert.AreEqual(0, Directory.GetDirectories(appdata + "/TEMP/ShadowFs").Length));
             Assert.IsTrue(fs.FileExists("sub/f4.txt"));
-            Assert.IsFalse(Directory.Exists(appdata + "/Shadow/" + id));
+            Assert.IsFalse(Directory.Exists(appdata + "/TEMP/ShadowFs/" + id));
 
             // test scope for "another thread"
 
             scopedFileSystems = true; // pretend we have a scope
             scope = new ShadowFileSystems(id = Guid.NewGuid(), swa);
-            Assert.IsTrue(Directory.Exists(appdata + "/Shadow/" + id));
+            Assert.IsTrue(Directory.Exists(appdata + "/TEMP/ShadowFs/" + id));
             using (var ms = new MemoryStream(Encoding.UTF8.GetBytes("foo")))
                 sw.AddFile("sub/f5.txt", ms);
             Assert.IsFalse(fs.FileExists("sub/f5.txt"));
@@ -449,7 +450,7 @@ namespace Umbraco.Tests.IO
             scope.Dispose();
             scopedFileSystems = false;
             Assert.IsTrue(fs.FileExists("sub/f5.txt"));
-            Assert.IsFalse(Directory.Exists(appdata + "/Shadow/" + id));
+            Assert.IsFalse(Directory.Exists(appdata + "/TEMP/ShadowFs/" + id));
         }
 
         [Test]
@@ -464,7 +465,7 @@ namespace Umbraco.Tests.IO
 
             var fs = new PhysicalFileSystem(path, "ignore");
             var sw = new ShadowWrapper(fs, "shadow", scopeProvider);
-            var swa = new[] {sw};
+            var swa = new[] { sw };
 
             using (var ms = new MemoryStream(Encoding.UTF8.GetBytes("foo")))
                 sw.AddFile("sub/f1.txt", ms);
@@ -474,7 +475,7 @@ namespace Umbraco.Tests.IO
 
             scopedFileSystems = true; // pretend we have a scope
             var scope = new ShadowFileSystems(id = Guid.NewGuid(), swa);
-            Assert.IsTrue(Directory.Exists(appdata + "/Shadow/" + id));
+            Assert.IsTrue(Directory.Exists(appdata + "/TEMP/ShadowFs/" + id));
             using (var ms = new MemoryStream(Encoding.UTF8.GetBytes("foo")))
                 sw.AddFile("sub/f2.txt", ms);
             Assert.IsFalse(fs.FileExists("sub/f2.txt"));
@@ -490,7 +491,7 @@ namespace Umbraco.Tests.IO
             scope.Dispose();
             scopedFileSystems = false;
             Assert.IsTrue(fs.FileExists("sub/f2.txt"));
-            TestHelper.TryAssert(() => Assert.IsFalse(Directory.Exists(appdata + "/Shadow/" + id)));
+            TestHelper.TryAssert(() => Assert.IsFalse(Directory.Exists(appdata + "/TEMP/ShadowFs/" + id)));
 
             string text;
             using (var s = fs.OpenFile("sub/f2.txt"))
@@ -513,7 +514,7 @@ namespace Umbraco.Tests.IO
 
             var fs = new PhysicalFileSystem(path, "ignore");
             var sw = new ShadowWrapper(fs, "shadow", scopeProvider);
-            var swa = new[] {sw};
+            var swa = new[] { sw };
 
             using (var ms = new MemoryStream(Encoding.UTF8.GetBytes("foo")))
                 sw.AddFile("sub/f1.txt", ms);
@@ -523,7 +524,7 @@ namespace Umbraco.Tests.IO
 
             scopedFileSystems = true; // pretend we have a scope
             var scope = new ShadowFileSystems(id = Guid.NewGuid(), swa);
-            Assert.IsTrue(Directory.Exists(appdata + "/Shadow/" + id));
+            Assert.IsTrue(Directory.Exists(appdata + "/TEMP/ShadowFs/" + id));
             using (var ms = new MemoryStream(Encoding.UTF8.GetBytes("foo")))
                 sw.AddFile("sub/f2.txt", ms);
             Assert.IsFalse(fs.FileExists("sub/f2.txt"));
@@ -555,7 +556,7 @@ namespace Umbraco.Tests.IO
                 var e = ae.InnerExceptions[0];
                 Assert.IsNotNull(e.InnerException);
                 Assert.IsInstanceOf<AggregateException>(e);
-                ae = (AggregateException) e;
+                ae = (AggregateException)e;
 
                 Assert.AreEqual(1, ae.InnerExceptions.Count);
                 e = ae.InnerExceptions[0];
@@ -651,7 +652,7 @@ namespace Umbraco.Tests.IO
             // ensure we get 2 files from the shadow
             var getFiles = ss.GetFiles(string.Empty);
             Assert.AreEqual(2, getFiles.Count());
-            
+
             var fsFiles = fs.GetFiles(string.Empty).ToArray();
             Assert.AreEqual(1, fsFiles.Length);
             var sfsFiles = sfs.GetFiles(string.Empty).ToArray();

src/Umbraco.Web.UI.Client/bower.json

@@ -25,7 +25,7 @@
     "jquery-migrate": "1.4.0",
     "angular-dynamic-locale": "0.1.28",
     "ng-file-upload": "~7.3.8",
-    "tinymce": "~4.1.10",
+    "tinymce": "~4.5.3",
     "codemirror": "~5.3.0",
     "angular-local-storage": "~0.2.3",
     "moment": "~2.10.3",

src/Umbraco.Web.UI.Client/src/canvasdesigner/index.html

@@ -20,7 +20,10 @@
         <div class="fix-left-menu selected">
 
             <div class="avatar">
-                <img ng-src="../assets/img/application/logo.png">
+                <img
+                    ng-src="../assets/img/application/logo.png"
+                    ng-srcset="../assets/img/application/logo@2x.png 2x, 
+                    ../assets/img/application/logo@3x.png 3x" />
             </div>
 
             <ul class="sections" ng-class="{selected: showDevicesPreview}">

src/Umbraco.Web.UI.Client/src/common/directives/components/localization/localize.directive.js

@@ -5,7 +5,27 @@ angular.module("umbraco.directives")
     * @name umbraco.directives.directive:localize
     * @restrict EA
     * @function
-    * @description Localize directive
+    * @description
+    * <div>
+    *   <strong>Component</strong><br />
+    *   Localize a specific token to put into the HTML as an item
+    * </div>
+    * <div>
+    *   <strong>Attribute</strong><br />
+    *   Add a HTML attribute to an element containing the HTML attribute name you wish to localise
+    *   Using the format of '@section_key' or 'section_key'
+    * </div>
+    * ##Usage
+    * <pre>
+    * <!-- Component -->
+    * <localize key="general_close">Close</localize>
+    * <localize key="section_key">Fallback value</localize>
+    *
+    * <!-- Attribute -->
+    * <input type="text" localize="placeholder" placeholder="@placeholders_entername" />
+    * <input type="text" localize="placeholder,title" title="@section_key" placeholder="@placeholders_entername" />
+    * <div localize="title" title="@section_key"></div>
+    * </pre>
     **/
     .directive('localize', function ($log, localizationService) {
         return {
@@ -28,6 +48,7 @@ angular.module("umbraco.directives")
         return {
             restrict: 'A',
             link: function (scope, element, attrs) {
+                //Support one or more attribute properties to update
                 var keys = attrs.localize.split(',');
 
                 angular.forEach(keys, function(value, key){
@@ -35,13 +56,15 @@ angular.module("umbraco.directives")
 
                     if(attr){
                         if(attr[0] === '@'){
-
-                            var t = localizationService.tokenize(attr.substring(1), scope);
-                            localizationService.localize(t.key, t.tokens).then(function(val){
-                                    element.attr(value, val);
-                            });
-
+                            //If the translation key starts with @ then remove it
+                            attr = attr.substring(1);
                         }
+
+                        var t = localizationService.tokenize(attr, scope);
+                        
+                        localizationService.localize(t.key, t.tokens).then(function(val){
+                                element.attr(value, val);
+                        });
                     }
                 });
             }

src/Umbraco.Web.UI.Client/src/common/directives/components/overlays/umboverlay.directive.js

@@ -478,8 +478,10 @@ Opens an overlay to show a custom YSOD. </br>
 
                   numberOfOverlays = overlayHelper.getNumberOfOverlays();
 
-                  if(numberOfOverlays === overlayNumber) {
-                     scope.closeOverLay();
+                  if (numberOfOverlays === overlayNumber) {
+                      scope.$apply(function () {
+                          scope.closeOverLay();
+                      });
                   }
 
                   event.preventDefault();

src/Umbraco.Web.UI.Client/src/common/directives/components/umbaceeditor.directive.js

@@ -125,7 +125,7 @@
         function link(scope, el, attr, ngModel) {
 
             // Load in ace library
-            assetsService.loadJs('lib/ace-builds/src-min-noconflict/ace.js').then(function () {
+            assetsService.load(['lib/ace-builds/src-min-noconflict/ace.js', 'lib/ace-builds/src-min-noconflict/ext-language_tools.js']).then(function () {
                 if (angular.isUndefined(window.ace)) {
                     throw new Error('ui-ace need ace to work... (o rly?)');
                 } else {

src/Umbraco.Web.UI.Client/src/common/directives/components/umbkeyboardshortcutsoverview.directive.js

@@ -107,34 +107,76 @@ When this combination is hit an overview is opened with shortcuts based on the m
 @param {object} model keyboard shortcut model. See description and example above.
 **/
 
-(function() {
-  'use strict';
+(function () {
+    'use strict';
 
-  function KeyboardShortcutsOverviewDirective() {
+    function KeyboardShortcutsOverviewDirective(platformService) {
 
-    function link(scope, el, attr, ctrl) {
+        function link(scope, el, attr, ctrl) {
 
-      scope.shortcutOverlay = false;
+            var eventBindings = [];
+            var isMac = platformService.isMac();
 
-      scope.toggleShortcutsOverlay = function() {
-        scope.shortcutOverlay = !scope.shortcutOverlay;
-      };
+            scope.toggleShortcutsOverlay = function () {
+                scope.showOverlay = !scope.showOverlay;
+                scope.onToggle();
+            };
 
+            function onInit() {
+
+                angular.forEach(scope.model, function (shortcutGroup) {
+                    angular.forEach(shortcutGroup.shortcuts, function (shortcut) {
+
+                        shortcut.platformKeys = [];
+
+                        // get shortcut keys for mac
+                        if (isMac && shortcut.keys && shortcut.keys.mac) {
+                            shortcut.platformKeys = shortcut.keys.mac;
+                            // get shortcut keys for windows
+                        } else if (!isMac && shortcut.keys && shortcut.keys.win) {
+                            shortcut.platformKeys = shortcut.keys.win;
+                            // get default shortcut keys
+                        } else if (shortcut.keys && shortcut && shortcut.keys.length > 0) {
+                            shortcut.platformKeys = shortcut.keys;
+                        }
+
+                    });
+                });
+            }
+
+            onInit();
+
+            eventBindings.push(scope.$watch('model', function(newValue, oldValue){
+                if (newValue !== oldValue) {
+                    onInit();
+                }
+            }));
+
+            // clean up
+            scope.$on('$destroy', function () {
+                // unbind watchers
+                for (var e in eventBindings) {
+                    eventBindings[e]();
+                }
+            });
+
+        }
+
+        var directive = {
+            restrict: 'E',
+            replace: true,
+            templateUrl: 'views/components/umb-keyboard-shortcuts-overview.html',
+            link: link,
+            scope: {
+                model: "=",
+                onToggle: "&",
+                showOverlay: "=?"
+            }
+        };
+
+        return directive;
     }
 
-    var directive = {
-      restrict: 'E',
-      replace: true,
-      templateUrl: 'views/components/umb-keyboard-shortcuts-overview.html',
-      link: link,
-      scope: {
-        model: "="
-      }
-    };
-
-    return directive;
-  }
-
-  angular.module('umbraco.directives').directive('umbKeyboardShortcutsOverview', KeyboardShortcutsOverviewDirective);
+    angular.module('umbraco.directives').directive('umbKeyboardShortcutsOverview', KeyboardShortcutsOverviewDirective);
 
 })();

src/Umbraco.Web.UI.Client/src/common/services/localization.service.js

@@ -135,8 +135,13 @@ angular.module('umbraco.services')
          *
          * @description
          * Checks the dictionary for a localized resource string
-         * @param {String} value the area/key to localize
-         * @param {Array} tokens if specified this array will be sent as parameter values 
+         * @param {String} value the area/key to localize in the format of 'section_key' 
+         * alternatively if no section is set such as 'key' then we assume the key is to be looked in
+         * the 'general' section
+         * 
+         * @param {Array} tokens if specified this array will be sent as parameter values
+         * This replaces %0% and %1% etc in the dictionary key value with the passed in strings
+         * 
          * @returns {String} localized resource string
          */
         localize: function (value, tokens) {
@@ -146,6 +151,143 @@ angular.module('umbraco.services')
             });
         },
 
+        /**
+         * @ngdoc method
+         * @name umbraco.services.localizationService#localizeMany
+         * @methodOf umbraco.services.localizationService
+         *
+         * @description
+         * Checks the dictionary for multipe localized resource strings at once, preventing the need for nested promises
+         * with localizationService.localize
+         * 
+         * ##Usage
+         * <pre>
+         * localizationService.localizeMany(["speechBubbles_templateErrorHeader", "speechBubbles_templateErrorText"]).then(function(data){
+         *      var header = data[0];
+         *      var message = data[1];
+         *      notificationService.error(header, message);
+         * });
+         * </pre>
+         * 
+         * @param {Array} keys is an array of strings of the area/key to localize in the format of 'section_key' 
+         * alternatively if no section is set such as 'key' then we assume the key is to be looked in
+         * the 'general' section
+         * 
+         * @returns {Array} An array of localized resource string in the same order
+         */
+        localizeMany: function(keys) {
+            if(keys){
+
+                //The LocalizationService.localize promises we want to resolve
+                var promises = [];
+
+                for(var i = 0; i < keys.length; i++){
+                    promises.push(service.localize(keys[i], undefined));
+                }
+
+                return $q.all(promises).then(function(localizedValues){
+                    return localizedValues;
+                });
+            }
+        },
+
+        /**
+         * @ngdoc method
+         * @name umbraco.services.localizationService#concat
+         * @methodOf umbraco.services.localizationService
+         *
+         * @description
+         * Checks the dictionary for multipe localized resource strings at once & concats them to a single string
+         * Which was not possible with localizationSerivce.localize() due to returning a promise
+         * 
+         * ##Usage
+         * <pre>
+         * localizationService.concat(["speechBubbles_templateErrorHeader", "speechBubbles_templateErrorText"]).then(function(data){
+         *      var combinedText = data;
+         * });
+         * </pre>
+         * 
+         * @param {Array} keys is an array of strings of the area/key to localize in the format of 'section_key' 
+         * alternatively if no section is set such as 'key' then we assume the key is to be looked in
+         * the 'general' section
+         * 
+         * @returns {String} An concatenated string of localized resource string passed into the function in the same order
+         */
+        concat: function(keys) {
+            if(keys){
+
+                //The LocalizationService.localize promises we want to resolve
+                var promises = [];
+
+                for(var i = 0; i < keys.length; i++){
+                    promises.push(service.localize(keys[i], undefined));
+                }
+
+                return $q.all(promises).then(function(localizedValues){
+
+                    //Build a concat string by looping over the array of resolved promises/translations
+                    var returnValue = "";
+
+                    for(var i = 0; i < localizedValues.length; i++){
+                        returnValue += localizedValues[i];
+                    }
+
+                    return returnValue;
+                });
+            }
+        },
+
+        /**
+         * @ngdoc method
+         * @name umbraco.services.localizationService#format
+         * @methodOf umbraco.services.localizationService
+         *
+         * @description
+         * Checks the dictionary for multipe localized resource strings at once & formats a tokenized message
+         * Which was not possible with localizationSerivce.localize() due to returning a promise
+         * 
+         * ##Usage
+         * <pre>
+         * localizationService.format(["template_insert", "template_insertSections"], "%0% %1%").then(function(data){
+         *      //Will return 'Insert Sections'
+         *      var formattedResult = data;
+         * });
+         * </pre>
+         * 
+         * @param {Array} keys is an array of strings of the area/key to localize in the format of 'section_key' 
+         * alternatively if no section is set such as 'key' then we assume the key is to be looked in
+         * the 'general' section
+         * 
+         * @param {String} message is the string you wish to replace containing tokens in the format of %0% and %1%
+         * with the localized resource strings
+         * 
+         * @returns {String} An concatenated string of localized resource string passed into the function in the same order
+         */
+        format: function(keys, message){
+            if(keys){
+
+                //The LocalizationService.localize promises we want to resolve
+                var promises = [];
+
+                for(var i = 0; i < keys.length; i++){
+                    promises.push(service.localize(keys[i], undefined));
+                }
+
+                return $q.all(promises).then(function(localizedValues){
+
+                    //Replace {0} and {1} etc in message with the localized values
+                    for(var i = 0; i < localizedValues.length; i++){
+                        var token = "%" + i + "%";
+                        var regex = new RegExp(token, "g");
+
+                        message = message.replace(regex, localizedValues[i]);
+                    }
+
+                    return message;
+                });
+            }
+        }
+
     };
 
     //This happens after login / auth and assets loading

src/Umbraco.Web.UI.Client/src/common/services/platform.service.js

@@ -0,0 +1,23 @@
+(function() {
+   'use strict';
+
+   function platformService() {
+
+        function isMac() {
+            return navigator.platform.toUpperCase().indexOf('MAC')>=0;
+        }
+
+        ////////////
+
+        var service = {
+            isMac: isMac
+        };
+
+        return service;
+
+   }
+
+   angular.module('umbraco.services').factory('platformService', platformService);
+
+
+})();

src/Umbraco.Web.UI.Client/src/common/services/templatehelper.service.js

@@ -1,7 +1,7 @@
 (function() {
    'use strict';
 
-   function templateHelperService() {
+   function templateHelperService(localizationService) {
 
         //crappy hack due to dictionary items not in umbracoNode table
         function getInsertDictionarySnippet(nodeName) {
@@ -36,6 +36,124 @@
             return "@section " + sectionName + "\r\n{\r\n\r\n\t{0}\r\n\r\n}\r\n";
         }
         
+        function getGeneralShortcuts(){
+            return {
+			        "name": localizationService.localize("shortcuts_generalHeader"), 
+			        "shortcuts": [
+                        {
+                            "description": localizationService.localize("buttons_undo"),
+                            "keys": [{ "key": "ctrl" }, { "key": "z" }]
+                        },
+                        {
+                            "description": localizationService.localize("buttons_redo"),
+                            "keys": [{ "key": "ctrl" }, { "key": "y" }]
+                        },
+                        {
+                            "description": localizationService.localize("buttons_save"),
+                            "keys": [{ "key": "ctrl" }, { "key": "s" }]
+                        }
+			        ]
+			    };
+        }
+
+        function getEditorShortcuts(){
+            return {
+			        "name": localizationService.localize("shortcuts_editorHeader"),
+			        "shortcuts": [
+                        {
+                            "description": localizationService.localize("shortcuts_commentLine"),
+                            "keys": [{ "key": "ctrl" }, { "key": "/" }]
+                        },
+                        {
+                            "description": localizationService.localize("shortcuts_removeLine"),
+                            "keys": [{ "key": "ctrl" }, { "key": "d" }]
+                        },
+                        {
+                            "description": localizationService.localize("shortcuts_copyLineUp"),
+                            "keys": {
+                                "win": [{ "key": "alt" }, { "key": "shift" }, { "key": "up" }],
+                                "mac": [{ "key": "cmd" }, { "key": "alt" }, { "key": "up" }]
+                            }
+                        },
+                        {
+                            "description": localizationService.localize("shortcuts_copyLineDown"),
+                            "keys": {
+                                "win": [{ "key": "alt" }, { "key": "shift" }, { "key": "down" }],
+                                "mac": [{ "key": "cmd" }, { "key": "alt" }, { "key": "down" }]
+                            } 
+                        },
+                        {
+                            "description": localizationService.localize("shortcuts_moveLineUp"),
+                            "keys": [{ "key": "alt" }, { "key": "up" }]
+                        },
+                        {
+                            "description": localizationService.localize("shortcuts_moveLineDown"),
+                            "keys": [{ "key": "alt" }, { "key": "down" }]
+                        }
+                    ]
+			    };
+        }
+
+        function getTemplateEditorShortcuts(){
+            return {
+			        "name": "Umbraco", //No need to localise Umbraco is the same in all languages :)
+			        "shortcuts": [
+                        {
+                            "description": localizationService.format(["template_insert", "template_insertPageField"], "%0% %1%"),
+                            "keys": [{ "key": "alt" }, { "key": "shift" }, { "key": "v" }]
+                        },
+                        {
+                            "description": localizationService.format(["template_insert", "template_insertPartialView"], "%0% %1%"),
+                            "keys": [{ "key": "alt" }, { "key": "shift" }, { "key": "p" }]
+                        },
+                        {
+                            "description": localizationService.format(["template_insert", "template_insertDictionaryItem"], "%0% %1%"),
+                            "keys": [{ "key": "alt" }, { "key": "shift" }, { "key": "d" }]
+                        },
+                        {
+                            "description": localizationService.format(["template_insert", "template_insertMacro"], "%0% %1%"),
+                            "keys": [{ "key": "alt" }, { "key": "shift" }, { "key": "m" }]
+                        },
+                        {
+                            "description": localizationService.localize("template_queryBuilder"),
+                            "keys": [{ "key": "alt" }, { "key": "shift" }, { "key": "q" }]
+                        },
+                        {
+                            "description": localizationService.format(["template_insert", "template_insertSections"], "%0% %1%"),
+                            "keys": [{ "key": "alt" }, { "key": "shift" }, { "key": "s" }]
+                        },
+                        {
+                            "description": localizationService.localize("template_mastertemplate"),
+                            "keys": [{ "key": "alt" }, { "key": "shift" }, { "key": "t" }]
+                        }
+                    ]
+			    };
+        }
+
+        function getPartialViewEditorShortcuts(){
+            return {
+			        "name": "Umbraco", //No need to localise Umbraco is the same in all languages :)
+			        "shortcuts": [
+                        {
+                            "description": localizationService.format(["template_insert", "template_insertPageField"], "%0% %1%"),
+                            "keys": [{ "key": "alt" }, { "key": "shift" }, { "key": "v" }]
+                        },
+                        {
+                            "description": localizationService.format(["template_insert", "template_insertDictionaryItem"], "%0% %1%"),
+                            "keys": [{ "key": "alt" }, { "key": "shift" }, { "key": "d" }]
+                        },
+                        {
+                            "description": localizationService.format(["template_insert", "template_insertMacro"], "%0% %1%"),
+                            "keys": [{ "key": "alt" }, { "key": "shift" }, { "key": "m" }]
+                        },
+                        {
+                            "description": localizationService.localize("template_queryBuilder"),
+                            "keys": [{ "key": "alt" }, { "key": "shift" }, { "key": "q" }]
+                        }
+                    ]
+			    };
+        }
+
         ////////////
 
         var service = {
@@ -44,7 +162,11 @@
             getQuerySnippet: getQuerySnippet,
             getRenderBodySnippet: getRenderBodySnippet,
             getRenderSectionSnippet: getRenderSectionSnippet,
-            getAddSectionSnippet: getAddSectionSnippet
+            getAddSectionSnippet: getAddSectionSnippet,
+            getGeneralShortcuts: getGeneralShortcuts,
+            getEditorShortcuts: getEditorShortcuts,
+            getTemplateEditorShortcuts: getTemplateEditorShortcuts,
+            getPartialViewEditorShortcuts: getPartialViewEditorShortcuts
         };
 
         return service;

src/Umbraco.Web.UI.Client/src/less/alerts.less

@@ -67,9 +67,9 @@
 }
 
 .alert-form {
-  background-color: #ECECEC;
-  border: 1px solid @gray !important;
-  color: @gray;
+  background-color: @gray-10;
+  border: 1px solid @gray-3 !important;
+  color: @gray-3;
 }
 
 .alert-form.-no-border {
@@ -77,7 +77,7 @@
 }
 
 .alert-form h4 {
-  color: @gray;
+  color: @gray-3;
 }
 
 

src/Umbraco.Web.UI.Client/src/less/application/grid.less

@@ -19,6 +19,9 @@ body {
   line-height: @baseLineHeight;
   color: @textColor;
   background-color: @bodyBackground;
+  -webkit-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 
@@ -142,7 +145,7 @@ body {
     left: 0px;
     right: 0px;
     padding-top: 100px;
-    border-right: 1px solid @grayLight;
+    border-right: 1px solid @purple-l3;
     z-index: 100;
 }
 
@@ -197,8 +200,8 @@ body {
     right: -5px;
     top: 0;
     bottom: 0;
-    background-color: @grayLighter;
-    border: solid 1px @grayLight;
+    background-color: @gray-10;
+    border: solid 1px @purple-l3;
     border-top: none;
     border-bottom: none;
     position:absolute;

src/Umbraco.Web.UI.Client/src/less/buttons.less

@@ -9,7 +9,7 @@
 // Core
 .btn {
   display: inline-block;
-  padding: 4px 12px;
+  padding: 6px 14px;
   margin-bottom: 0; // For input.btn
   font-size: @baseFontSize;
   line-height: @baseLineHeight;
@@ -18,14 +18,15 @@
   cursor: pointer;
   background: @btnBackground;
   color: @black;
-  border: 1px solid @btnBorder;
+  border: none;
   box-shadow: none;
+  border-radius: 3px;
 
     // Hover/focus state
     &:hover,
     &:focus {
         background: @btnBackgroundHighlight;
-        color: @grayDark;
+        color: @gray-4;
         background-position: 0 -15px;
         text-decoration: none;
 
@@ -138,7 +139,7 @@ input[type="button"] {
 // Round button
 .btn-round{
   font-size: 24px;
-  color: @gray;
+  color: @gray-3;
   background: @white;
 
   line-height: 32px;
@@ -167,6 +168,16 @@ input[type="button"] {
   color: rgba(255,255,255,.75);
 }
 
+.btn-primary, 
+.btn-warning,
+.btn-danger,
+.btn-success,
+.btn-info,
+.btn-inverse,
+.btn-neutral {
+  font-weight: bold;
+}
+
 // Set the backgrounds
 // -------------------------
 .btn-primary {
@@ -196,16 +207,16 @@ input[type="button"] {
 // Neutral appears as lighter gray
 .btn-neutral {
   .buttonBackground(@btnNeutralBackground, @btnNeutralBackgroundHighlight);
-  color: #656565;
+  color: @gray-5;
   // Hover/focus state
   &:hover,
   &:focus {
-    color: #656565;
+    color: @gray-5;
   }
 
   &.disabled,
   &[disabled] {
-    color:#656565;
+    color: @gray-5;
     .opacity(65);
   }
 
@@ -217,11 +228,11 @@ input[type="button"] {
     padding: 15px 50px;
     font-size: 16px;
     border: none;
-    background: @blue;
+    background: @green;
     color: white;
-
-        &:hover {
-            background: #2b8ee3;
+    font-weight: bold;
+      &:hover {
+        background: @green-d1;
 		}
 }
 
@@ -281,7 +292,7 @@ input[type="submit"].btn {
 }
 .btn-link[disabled]:hover,
 .btn-link[disabled]:focus {
-  color: @grayDark;
+  color: @gray-4;
   text-decoration: none;
 }
 

src/Umbraco.Web.UI.Client/src/less/canvas-designer.less

@@ -270,10 +270,10 @@ a, a:hover{
     height: 100%;
     padding: 0;
     margin-left: -80px;
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: "Lato", Helvetica, Arial, sans-serif;
     font-size: 13px;
     line-height: 16px;
-    background: #1D1D1D;
+    background: #413659;
     -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
@@ -282,8 +282,8 @@ a, a:hover{
 
 .avatar {
     text-align:center;
-    padding: 25px 0 29px 0;
-    border-bottom: 1px solid #343434;
+    padding: 27px 0 29px 0;
+    border-bottom: 1px solid #2E2246;
 }
 
 .help {
@@ -295,7 +295,7 @@ a, a:hover{
     margin: 0;
     font-size: 30px;
     text-align: center;
-    color: #d9d9d9;
+    color: #D8D7D9;
     opacity: 0.4;
     -webkit-transition: all .3s linear;
     -moz-transition: all .3s linear;
@@ -304,7 +304,7 @@ a, a:hover{
 
 ul.sections {
     display: block;
-    background: #1d1d1d;
+    background: #413659;
     height: 100%;
     position:absolute;
     top: 90px;
@@ -320,7 +320,7 @@ ul.sections {
 
 ul.sections li {
     display: block;
-    border-left: 4px #1d1d1d solid;
+    border-left: 4px #413659 solid;
     -webkit-transition: all .3s linear;
     -moz-transition: all .3s linear;
     transition: all .3s linear;
@@ -328,7 +328,7 @@ ul.sections li {
 
 .fix-left-menu ul.sections li a span,
 .fix-left-menu ul.sections li a i {
-    color: #d9d9d9;
+    color: #8d869b;
     -webkit-transition: all .3s linear;
     -moz-transition: all .3s linear;
     transition: all .3s linear;
@@ -342,12 +342,11 @@ ul.sections li a {
     margin: 0 0 0 -4px;
     text-align: center;
     text-decoration: none;
-    border-bottom: 1px solid #343434;
+    border-bottom: 1px solid #2E2246;
 }
 
 ul.sections li a i {
     font-size: 30px;
-    opacity: 0.4;
 }
 
 ul.sections li a span {
@@ -357,8 +356,16 @@ ul.sections li a span {
     opacity: 0.4;
 }
 
+ul.sections li.current {
+    background-color: #2E2246;
+}
+
+ul.sections li.current a i {
+    color: #ffffff;
+}
+
 ul.sections li.current, ul.sections li:hover {
-    border-left: 4px #f57020 solid;
+    border-left: 4px #00AEA2 solid;
 }
 
 .fix-left-menu:hover ul.sections li a span,
@@ -533,7 +540,7 @@ h4.panel-title {
 .field-title {
     float: left;
     margin-right: 10px;
-    font-size: 11px;
+    font-size: 12px;
     color: #d9d9d9;
 }
 
@@ -651,7 +658,7 @@ h4.panel-title {
     padding: 0;
     margin-top: -9px;
     margin-right: 1px;
-    font-size: 11px;
+    font-size: 12px;
     color: #d9d9d9;
     text-align: right;
     background-color: transparent;
@@ -684,7 +691,7 @@ h4.panel-title {
 }
 
 .canvasdesigner select {
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .canvasdesigner .sp-dd {
@@ -794,7 +801,7 @@ h4.panel-title {
     background-color: #ffffff;
     border-radius: 10px;
     opacity: 1.0;
-    box-shadow: 0 0 0 29px #ECECEC, 0 0 0 30px #C4C4C4;
+    box-shadow: 0 0 0 29px #E9E9EB, 0 0 0 30px #D8D7D9;
     transition: all 0.5s ease-in-out;
 }
 

src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button-group.less

@@ -9,6 +9,18 @@
    left: auto;
 }
 
+.umb-button-group {
+
+    .umb-button__button {
+        border-radius: 3px 0px 0px 3px;
+    }
+
+    .umb-button-group__toggle {
+        border-radius: 0px 3px 3px 0;
+    }
+
+}
+
 // hack for umb-era-button
 .umb-era-button-group {
 

src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less

@@ -1,16 +1,21 @@
 .umb-button {
    position: relative;
    overflow: hidden;
+   display: inline;
 }
 
  .umb-button__button:focus {
    outline: none;
 }
 
+ .umb-button__button {
+    position: relative;
+    z-index: 1;
+ }
+
 .umb-button__content {
    opacity: 1;
    transition: opacity 0.25s ease;
-
    display: flex;
    flex-wrap: wrap;
 }

src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-era-button.less

@@ -3,7 +3,6 @@
     justify-content: center;
     align-items: center;
     font-size: 14px;
-    //font-weight: bold;
     height: 38px;
     line-height: 1;
     max-width: 100%;
@@ -19,6 +18,7 @@
     box-sizing: border-box;
     cursor: pointer;
     transition: background-color 80ms ease, color 80ms ease;
+    font-weight: bold;
 }
 
 
@@ -53,6 +53,15 @@
 	background-color: darken(@btnDangerBackground, 5%);
 }
 
+.umb-era-button.-green {
+	background: @green;
+	color: @white;
+}
+
+.umb-era-button.-green:hover {
+	background-color: @green-d1;
+}
+
 .umb-era-button.-link {
 	padding: 0;
     background: transparent;

src/Umbraco.Web.UI.Client/src/less/components/card.less

@@ -7,7 +7,7 @@
 	padding: 5px 10px 5px 10px;
     background: white;
 
-    .title{padding: 12px; color: @gray; border-bottom: 1px solid @grayLight; font-weight: 400; font-size: 16px; text-transform: none; margin: 0 -10px 10px -10px;}
+    .title{padding: 12px; color: @gray-3; border-bottom: 1px solid @gray-8; font-weight: 400; font-size: 16px; text-transform: none; margin: 0 -10px 10px -10px;}
 
 }
 
@@ -26,12 +26,12 @@
 
 .umb-card-content{
     .item-title{color: @blackLight; font-weight: 400; border: none; font-size: 16px; text-transform: none; margin-bottom: 3px;}
-    p{color: @gray; margin-bottom: 1px;}
+    p{color: @gray-3; margin-bottom: 1px;}
 }
 
 .umb-card-actions{
     padding-top: 10px;
-    border-top: @grayLighter 1px solid;
+    border-top: @gray-10 1px solid;
     clear: both;
 }
 
@@ -71,7 +71,7 @@
  }
 
 .umb-card-list li{
-    border-bottom: @grayLighter 1px solid;
+    border-bottom: @gray-10 1px solid;
     padding-bottom: 3px;
     display: block;
 }
@@ -93,7 +93,7 @@
 .umb-card-grid li {
 	padding: 5px;
 	overflow: hidden;
-	font-size: 11px;
+	font-size: 12px;
 	text-align: center;
 
 	width: 100px;
@@ -114,6 +114,7 @@
 	display: block;
 	width: 100%;
 	height: 100%;
+	border-radius: 3px;
 }
 
 
@@ -121,14 +122,15 @@
  .umb-card-grid .umb-card-grid-item:focus,
  .umb-card-grid .umb-card-grid-item:hover > *,
  .umb-card-grid .umb-card-grid-item:focus > *  {
-	background: @blue;
-	color: white;
+	background: @gray-10;
+	//color: white;
 	cursor: pointer;
 	outline: none;
+	border-radius: 3px;
 }
 
 .umb-card-grid a {
-     color: #222;
+     color: @gray-2;
      text-decoration: none;
  }
 
@@ -136,7 +138,7 @@
      font-size: 30px;
      line-height: 50px;
      display: block;
-	  color: @grayDark;
+	  color: @gray-3;
  }
 
 
@@ -149,32 +151,32 @@
     display: inline-block;
     cursor: pointer;
     border-radius: 200px;
-    background: rgba(255,255,255, 1);
-    border:1px solid rgb(182, 182, 182);
+    background: @gray-10;
+    border:1px solid @gray-6;
     margin: 2px;
 }
 
 .umb-btn-round:hover, .umb-btn-round:hover *{
-  background: @blue !important;
-  color: white !important;
-  border-color: @blue !important;
+  background: @turquoise !important;
+  color: @white !important;
+  border-color: @turquoise !important;
   text-decoration:none;
  }
 
  .umb-btn-round a:hover {
      text-decoration:none;
-     color: white !important;
+     color: @white !important;
  }
 
  .umb-btn-round i {
      font-size:16px !important;
-     color: #grayLight;
+     color: @gray-8;
      display:block;
  }
 
  .umb-btn-round.alert:hover, .umb-btn-round.alert:hover *{
  	background: @red !important;
-  	color: white !important;
+  	color: @white !important;
   	border-color: @red !important;
   	text-decoration:none;
  }

src/Umbraco.Web.UI.Client/src/less/components/editor.less

@@ -3,7 +3,7 @@
 */
 
 .umb-editor-wrapper {
-	background: white;
+	background: @white;
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -20,8 +20,8 @@
 }
 
 .umb-editor-header {
-	background: @grayLighter;
-	border-bottom: 1px solid @grayLight;
+	background: @gray-10;
+	border-bottom: 1px solid @purple-l3;
 	flex: 0 0 99px;
 	position: relative;
 }
@@ -51,8 +51,8 @@
 .umb-editor-drawer {
 	margin: 0;
 	padding: 10px 20px;
-	background: @grayLighter;
-	border-top: 1px solid @grayLight;
+	background: @gray-10;
+	border-top: 1px solid @purple-l3;
 	flex: 1 0 31px;
 }
 

src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less

@@ -1,7 +1,7 @@
 .umb-editor-sub-header {
    padding: 15px 0;
    margin-bottom: 30px;
-   background: #ffffff;
+   background: @white;
    display: flex;
    justify-content: space-between;
    margin-top: -30px;
@@ -36,7 +36,7 @@
 }
 
 .umb-editor-sub-header__section {
-   border-left: 1px solid @grayLight;
+   border-left: 1px solid @gray-8;
    display: flex;
    align-items: center;
    padding-left: 20px;
@@ -50,7 +50,7 @@
 
 .umb-editor-sub-header__content-right .umb-editor-sub-header__section {
    border-left: none;
-   border-right: 1px solid @grayLight;
+   border-right: 1px solid @gray-8;
 }
 
 .umb-editor-sub-header__content-right .umb-editor-sub-header__section:last-child {

src/Umbraco.Web.UI.Client/src/less/components/notifications/umb-notifications.less

@@ -22,7 +22,7 @@
 .umb-notifications__notification {
    padding: 5px 20px;
    text-shadow: none;
-   font-size: 12px;
+   font-size: 14px;
    border: none;
    border-radius: 0;
    position: relative;

src/Umbraco.Web.UI.Client/src/less/components/overlays.less

@@ -1,7 +1,7 @@
 .umb-overlay {
     position: fixed;
     overflow: hidden;
-    background: white;
+    background: @white;
     z-index: 996660;
     animation: fadeIn 0.2s;
     box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
@@ -15,8 +15,8 @@
 }
 
 .umb-overlay .umb-overlay-header {
-    background: @grayLighter;
-    border-bottom: 1px solid @grayLight;
+    background: @gray-10;
+    border-bottom: 1px solid @purple-l3;
     padding: 10px;
     margin-top: 0;
     flex-grow: 0;
@@ -34,7 +34,7 @@
 
 .umb-overlay .umb-overlay__subtitle {
     font-size: @fontSizeSmall;
-    color: @gray;
+    color: @gray-3;
 }
 
 .umb-overlay .umb-overlay-container {
@@ -54,8 +54,8 @@
     padding: 10px 20px;
     margin: 0;
 
-    background: @grayLighter;
-    border-top: 1px solid @grayLight;
+    background: @gray-10;
+    border-top: 1px solid @purple-l3;
 }
 
 .umb-overlay .umb-overlay-drawer.-auto-height {
@@ -167,8 +167,8 @@
     width: 100%;
     padding: 20px;
     box-sizing: border-box;
-    border-bottom: 1px solid @grayLight;
-    background: @grayLighter;
+    background: @gray-10;
+    border-bottom: 1px solid @purple-l3;
 }
 
 .umb-overlay__item-details-title-wrapper {
@@ -181,7 +181,7 @@
     font-size: 16px;
     margin-right: 10px;
     vertical-align: middle;
-    color: #999;
+    color: @gray-6;
 }
 
 .umb-overlay__item-details-title {

src/Umbraco.Web.UI.Client/src/less/components/tooltip/umb-tooltip.less

@@ -1,7 +1,7 @@
 .umb-tooltip {
    position: fixed;
    display: flex;
-   background: #ffffff;
+   background: @white;
    padding: 10px;
    z-index: 1000;
    max-width: 200px;

src/Umbraco.Web.UI.Client/src/less/components/umb-breadcrumbs.less

@@ -12,8 +12,8 @@
 
 .umb-breadcrumbs__ancestor-link,
 .umb-breadcrumbs__ancestor-text {
-    font-size: 11px;
-    color: #555;
+    font-size: 12px;
+    color: @gray-3;
     max-width: 150px;
     white-space: nowrap;
     overflow: hidden;
@@ -25,7 +25,7 @@
 }
 
 .umb-breadcrumbs__ancestor-link:hover {
-   color: #000;
+   color: @black;
 }
 
 .umb-breadcrumbs__seperator {
@@ -33,5 +33,5 @@
    top: 1px;
    margin-left: 5px;
    margin-right: 5px;
-   color: #ccc;
+   color: @gray-7;
 }

src/Umbraco.Web.UI.Client/src/less/components/umb-checkbox-list.less

@@ -14,12 +14,12 @@
 }
 
 .umb-checkbox-list__item:hover {
-    background-color: @grayLighter;
+    background-color: @gray-10;
 }
 
 .umb-checkbox-list__item.-selected,
 .umb-checkbox-list__item.-disabled {
-    background-color: fade(@blueDark, 4%);
+    background-color: @gray-10;
     font-weight: bold;
 }
 
@@ -28,22 +28,21 @@
   justify-content: center;
   align-items: center;
   flex: 0 0 30px;
-  height: 30px;
-  margin-right: 10px;
-}
-
-.umb-checkbox-list__item-checkbox.-selected {
-  background: @blue;
+  margin-right: 5px;
 }
 
 .umb-checkbox-list__item-icon {
   margin-right: 5px;
+  font-size: 16px;
 }
 
 .umb-checkbox-list__item-text {
-  font-size: 13px;
+  font-size: 14px;
   margin-bottom: 0;
   flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  padding: 5px 0;
 }
 
 .umb-checkbox-list__item-text.-faded {
@@ -55,14 +54,14 @@
 }
 
 .umb-checkbox-list__item-caption {
-    font-size: 11px;
+    font-size: 12px;
     margin-left: 2px;
 }
 
 .umb-checkbox-list__no-data {
   text-align: center;
   padding-top: 50px;
-  color: #ccc;
+  color: @gray-7;
   font-size: 16px;
   line-height: 1.8em;
 }

src/Umbraco.Web.UI.Client/src/less/components/umb-child-selector.less

@@ -1,5 +1,5 @@
 .umb-child-selector__child {
-  background: @grayLighter;
+  background: @gray-10;
   padding: 5px 15px;
   margin-bottom: 5px;
   min-width: 300px;
@@ -8,13 +8,13 @@
 }
 
 .umb-child-selector__child.-parent {
-  background: #f1f1f1;
+  background: @gray-9;
   padding-top: 10px;
   padding-bottom: 10px;
 }
 
 .umb-child-selector__child.-placeholder {
-  border: 1px dashed @grayLight;
+  border: 1px dashed @gray-8;
   background: none;
   cursor: pointer;
   text-align: center;
@@ -42,11 +42,11 @@
 }
 
 .umb-child-selector__child-name {
-  font-size: 13px;
+  font-size: 14px;
 }
 
 .umb-child-selector__child-name.-blue {
-  color: @blue;
+  color: @turquoise-d1;
 }
 
 .umb-child-selector__child-actions {

src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-action.less

@@ -98,7 +98,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #ffffff;
+  color: @white;
   border-radius: 40px;
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
   font-size: 18px;
@@ -106,12 +106,12 @@
 
 .umb_confirm-action__overlay-action:hover {
   text-decoration: none;
-  color: #ffffff;
+  color: @white;
 }
 
 // confirm button
 .umb_confirm-action__overlay-action.-confirm {
-  background: #ffffff;
+  background: @white;
   color: @green !important;
 }
 
@@ -121,7 +121,7 @@
 
 // cancel button
 .umb_confirm-action__overlay-action.-cancel {
-  background: #ffffff;
+  background: @white;
   color: @red !important;
 }
 

src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less

@@ -6,7 +6,7 @@
 }
 
 .umb-content-grid__item {
-   background: @grayLighter;
+   background: @gray-10;
    flex: 0 1 200px;
    cursor: pointer;
    position: relative;
@@ -19,7 +19,7 @@
 }
 
 .umb-content-grid__icon-container {
-   background: lighten(@grayLight, 7%);
+   background: @gray-9;
    height: 75px;
    display: flex;
    align-items: center;
@@ -30,11 +30,11 @@
 .umb-content-grid__icon[class^="icon-"],
 .umb-content-grid__icon[class*=" icon-"] {
    font-size: 40px;
-   color: lighten(@gray, 20%);
+   color: @gray-6;
 }
 
 .umb-content-grid__icon.-light {
-   color: @grayLight;
+   color: @gray-8;
 }
 
 
@@ -46,10 +46,10 @@
 .umb-content-grid__item-name {
    font-weight: bold;
    margin-bottom: 10px;
-   color: black;
+   color: @black;
    padding-bottom: 10px;
    line-height: 1.4em;
-   border-bottom: 1px solid @grayLight;
+   border-bottom: 1px solid @gray-8;
    display: inline-block;
 }
 
@@ -58,18 +58,18 @@
 }
 
 .umb-content-grid__item-name.-light {
-   color: @grayLight;
+   color: @gray-8;
 }
 
 .umb-content-grid__details-list {
    list-style: none;
    margin-bottom: 0;
    margin-left: 0;
-   font-size: 11px;
+   font-size: 12px;
 }
 
 .umb-content-grid__details-list.-light {
-   color: @grayLight;
+   color: @gray-8;
 }
 
 .umb-content-grid__details-label {
@@ -85,16 +85,16 @@
    position: absolute;
    top: 10px;
    right: 10px;
-   border: 1px solid #ffffff;
-   width: 25px;
-   height: 25px;
-   background: @blue;
+   border: 2px solid @white;
+   width: 26px;
+   height: 26px;
+   background: @green;
    border-radius: 50px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
-   color: #ffffff;
+   color: @white;
    cursor: pointer;
 }
 
@@ -108,7 +108,7 @@
 .umb-content-grid__no-items {
    font-size: 16px;
    font-weight: bold;
-   color: @grayLight;
+   color: @gray-8;
    padding-top: 50px;
    padding-bottom: 50px;
 }

src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less

@@ -21,7 +21,7 @@
 }
 
 .umb-sub-views-nav-item.is-active {
-  color: @blue;
+  color: @turquoise-d1;
 }
 
 .show-validation .umb-sub-views-nav-item.-has-error {
@@ -35,5 +35,5 @@
 }
 
 .umb-sub-views-nav-item-text {
-  font-size: 11px;
+  font-size: 12px;
 }

src/Umbraco.Web.UI.Client/src/less/components/umb-empty-state.less

@@ -1,7 +1,7 @@
 .umb-empty-state {
 	font-size: @fontSizeMedium;
 	line-height: 1.8em;
-	color: @grayMed;
+	color: @gray-4;
 	text-align: center;
 }
 

src/Umbraco.Web.UI.Client/src/less/components/umb-file-dropzone.less

@@ -7,9 +7,9 @@
     height: 400px;
     width: auto;
     padding: 50px 0;
-    border: 1px dashed @grayLight;
+    border: 1px dashed @gray-8;
     text-align: center;
-    color: @gray;
+    color: @gray-3;
     margin: 0 0 20px 0;
     position: relative;
     -webkit-transition: height 0.8s;
@@ -25,7 +25,7 @@
       }
     }
     &.drag-over {
-      border: 1px dashed @grayDark;
+      border: 1px dashed @gray-1;
     }
   }
 
@@ -42,13 +42,13 @@
   // file select link
   .file-select {
     font-size: 15px;
-    color: @blue;
+    color: @turquoise-d1;
     cursor: pointer;
 
     margin-top: 10px;
 
     &:hover {
-        color: @blueDark;
+        color: @turquoise-d1;
         text-decoration: underline;
     }
   }
@@ -57,7 +57,7 @@
   .file-list {
     list-style: none;
     margin: 0 0 30px 0;
-    background: @grayLighter;
+    background: @gray-10;
     padding: 10px 20px;
 
     .file {
@@ -66,7 +66,7 @@
       width: 100%;
       padding: 5px 0;
       position: relative;
-      border-top: 1px solid @grayLight;
+      border-top: 1px solid @gray-8;
       &:first-child {
         border-top: none;
       }
@@ -78,7 +78,7 @@
         animation: fadeOut 2s;
       }
       .file-description {
-        color: @grayDarker;
+        color: @gray-3;
         font-size: 12px;
         width: 100%;
         display: block;
@@ -119,7 +119,7 @@
       display: block;
       height: 100%;
       border-radius: 20px;
-      background-color: @blue;
+      background-color: @green;
       position: relative;
       overflow: hidden;
       width: 0;

src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less

@@ -7,7 +7,7 @@
 }
 
 .umb-folder-grid__folder {
-   background: @grayLighter;
+   background: @gray-10;
    margin: 5px;
    display: flex;
    align-items: center;
@@ -29,7 +29,7 @@
 
 .umb-folder-grid__folder:hover {
    text-decoration: none;
-   background-color: darken(@grayLighter, 5%);
+   background-color: @gray-9;
 }
 
 .umb-folder-grid__folder-description {
@@ -57,21 +57,21 @@
 
 .umb-folder-grid__action {
    opacity: 0;
-   border: 1px solid #ffffff;
-   width: 25px;
-   height: 25px;
-   background: rgba(0, 0, 0, 0.4);
+   border: 2px solid @white;
+   width: 26px;
+   height: 26px;
+   background: @gray-3;
    border-radius: 50px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
-   color: #ffffff;
+   color: @white;
    margin-left: 7px;
    cursor: pointer;
 }
 
 .umb-folder-grid__action.-selected {
    opacity: 1;
-   background: @blue;
+   background: @green;
 }

src/Umbraco.Web.UI.Client/src/less/components/umb-grid-selector.less

@@ -8,8 +8,8 @@
   width: 125px;
   height: 150px;
   padding: 20px;
-  background: #f8f8f8;
-  border: 1px solid #CCCCCC;
+  background: @gray-10;
+  border: 1px solid @gray-8;
   text-align: center;
   margin: 0 20px 20px 0;
   display: flex;
@@ -17,6 +17,7 @@
   justify-content: center;
   animation: fadeIn 0.5s;
   position: relative;
+  border-radius: 3px;
 }
 
 .umb-grid-selector__item.-default {
@@ -24,7 +25,7 @@
 }
 
 .umb-grid-selector__item.-placeholder {
-  border: 1px dashed #d9d9d9;
+  border: 1px dashed @gray-8;
   background: none;
   cursor: pointer;
 }
@@ -35,10 +36,10 @@
 
 .umb-grid-selector__item-icon {
   font-size: 50px;
-  color: #d9d9d9;
+  color: @gray-8;
   display: block;
   line-height: 50px;
-  margin-bottom: 5px;
+  margin-bottom: 15px;
 }
 
 .umb-grid-selector__item-label {
@@ -47,7 +48,7 @@
 }
 
 .umb-grid-selector__item-label.-blue {
-  color: @blue;
+  color: @turquoise-d1;
 }
 
 .umb-grid-selector__item-remove {
@@ -58,17 +59,14 @@
 }
 
 .umb-grid-selector__item-default-label {
-  font-size: 10px;
-  color: @gray;
-  font-weight: bold;
-  position: relative;
-  top: -3px;
+  font-size: 13px;
+  color: @gray-3;
 }
 
 .umb-grid-selector__item-default-label.-blue {
-  color: @blue;
+  color: @turquoise-d1;
 }
 
 .umb-grid-selector__item-add {
-  color: @blue;
+  color: @turquoise-d1;
 }

src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less

@@ -14,7 +14,7 @@
 // sortable-helper
 .umb-grid .ui-sortable-helper {
     position: absolute !important;
-    background-color: @blue !important;
+    background-color: @turquoise !important;
     height: 42px !important;
     width: 42px !important;
     overflow: hidden;
@@ -28,7 +28,7 @@
         line-height: 42px;
         font-size: 22px;
         content: "\e126";
-        color: #ffffff;
+        color: @white;
     }
 
     * {
@@ -46,7 +46,7 @@
     position: absolute;
     left: 0;
     right: 0;
-    background-color: @blue;
+    background-color: @turquoise;
     height: 2px;
     margin-bottom: 20px;
 
@@ -55,7 +55,7 @@
         top: -9px;
         font-family: "icomoon";
         font-size: 18px;
-        color: @blue;
+        color: @turquoise;
     }
 
     &:before {
@@ -151,24 +151,24 @@
 
 .umb-grid .umb-row .umb-cell-placeholder {
     min-height: 130px;
-    background-color: @grayLighter;
+    background-color: @gray-10;
     border-width: 2px;
     border-style: dashed;
-    border-color: @grayLight;
+    border-color: @gray-8;
     transition: border-color 100ms linear;
 
     &:hover {
-        border-color: @blue;
+        border-color: @turquoise;
         cursor: pointer;
     }
 }
 
 .umb-grid .umb-cell-content.-has-editors {
     padding-top: 38px;
-    background-color: #ffffff;
+    background-color: @white;
     border-width: 1px;
     border-style: solid;
-    border-color: @grayLight;
+    border-color: @gray-8;
 
     &:hover {
         cursor: auto;
@@ -179,30 +179,24 @@
     padding-top: 10px;
 }
 
-
-
 .umb-grid .cell-tools {
     position: absolute;
     top: 10px;
     right: 10px;
-    color: @gray;
+    color: @gray-3;
     font-size: 16px;
 }
 
-
 .umb-grid .cell-tool {
     cursor: pointer;
     float: right;
-
     &:hover {
-        color: @blueDark;
+        color: @turquoise-d1;
     }
 }
 
-
 .umb-grid .cell-tools-add {
-    color: @blue;
-
+    color: @turquoise-d1;
     &:focus, &:hover {
         text-decoration: none;
     }
@@ -213,15 +207,15 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    color: @blue;
+    color: @turquoise-d1;
 }
 
 .umb-grid .cell-tools-add.-bar {
     display: block;
-    background: @grayLighter;
+    background: @gray-10;
     text-align: center;
     padding: 5px;
-    border: 1px dashed #ccc;
+    border: 1px dashed @gray-7;
     margin: 10px;
 }
 
@@ -251,7 +245,7 @@
     z-index: 10;
     top: 0;
     left: 0;
-    background: #ffffff;
+    background: @white;
     opacity: 0.9;
     width: 100%;
     height: 100%;
@@ -293,7 +287,7 @@
 }
 
 .umb-control-collapsed {
-    background-color: @grayLighter;
+    background-color: @gray-10;
     padding: 5px 10px;
     border-width: 1px;
     border-style: solid;
@@ -302,7 +296,7 @@
 }
 
 .umb-control-collapsed:hover {
-    border-color: @blue;
+    border-color: @turquoise;
 }
 
 .umb-grid .umb-control-click-overlay {
@@ -314,15 +308,13 @@
     left: 0;
     opacity: 0;
     cursor: pointer;
-
     &:hover {
+        background-color: @turquoise;
         opacity: 0.1;
-        background-color: @blue;
         transition: opacity 0.1s;
     }
 }
 
-
 .umb-grid .umb-row-title-bar {
     display: flex;
     padding-left: 10px;
@@ -335,7 +327,6 @@
     font-size: 15px;
     font-weight: bold;
     color: @black;
-
     margin-right: 6px;
 }
 
@@ -343,7 +334,7 @@
     display: inline-block;
     margin-left: 10px;
     font-size: 18px;
-    color: @gray;
+    color: @gray-3;
 }
 
 .umb-grid .row-tool {
@@ -371,12 +362,12 @@
     opacity: 0.7;
     text-align: left;
     padding: 5px;
-    border: 1px solid rgba(182, 182, 182, 0.3);
+    border: 1px solid @gray-9;
     height: 20px;
 }
 
 .umb-grid .umb-control-placeholder:hover .placeholder {
-    border: 1px solid rgba(182, 182, 182, 0.8);
+    border: 1px solid @gray-7;
 }
 
 
@@ -389,14 +380,14 @@
     padding-bottom: 30px;
     position: relative;
     background-color: @white;
-    border: 4px dashed @grayLight;
+    border: 4px dashed @gray-8;
     text-align: center;
     text-align: -moz-center;
     cursor: pointer;
 }
 
 .umb-grid .umb-editor-placeholder i {
-    color: @grayLight;
+    color: @gray-8;
     font-size: 85px;
     line-height: 85px;
     display: block;
@@ -410,7 +401,7 @@
 
 // Row states
 .umb-grid .umb-row.-active {
-    background-color: @blue;
+    background-color: @turquoise-d1;
 
     .umb-row-title-bar {
         cursor: move;
@@ -418,7 +409,7 @@
 
     .row-tool,
     .umb-row-title {
-        color: #fff;
+        color: @white;
     }
 
     .umb-grid-has-config {
@@ -438,14 +429,14 @@
 
 
 .umb-grid .umb-row.-active-child {
-    background-color: @grayLighter;
+    background-color: @gray-10;
 
     .umb-row-title-bar {
         cursor: default;
     }
 
     .umb-row-title {
-        color: @gray;
+        color: @gray-3;
     }
 
     .row-tool {
@@ -457,7 +448,7 @@
     }
 
     .umb-cell-content.-placeholder {
-        border-color: @grayLight;
+        border-color: @gray-8;
 
         &:hover {
             border-color: fade(@gray, 44);
@@ -469,11 +460,11 @@
 // Cell states
 
 .umb-grid .umb-row .umb-cell.-active {
-    border-color: @grayLight;
+    border-color: @gray-8;
 
     .umb-cell-content.-has-editors {
         box-shadow: 3px 3px 6px rgba(0, 0, 0, .07);
-        border-color: @blue;
+        border-color: @turquoise;
     }
 }
 
@@ -517,15 +508,11 @@
     width: auto;
     padding: 6px 15px;
     border-style: solid;
-
     font-size: 12px;
     font-weight: bold;
-
     display: inline-block;
-
     margin: 10px auto 20px;
-
-    border-color: #E2E2E2;
+    border-color: @gray-9;
 
     &:hover {
         cursor: pointer;
@@ -542,10 +529,10 @@
     display: block;
     overflow: hidden;
     border: none;
-    background: #fff;
+    background: @white;
     outline: none;
     resize: none;
-    color: @gray;
+    color: @gray-3;
 }
 
 .umb-grid .umb-cell-rte textarea {
@@ -556,7 +543,7 @@
     display: block;
     overflow: hidden;
     border: none;
-    background: #fff;
+    background: @white;
     outline: none;
     width: 98%;
     resize: none;
@@ -584,14 +571,14 @@
     display: inline-block;
     cursor: pointer;
     border-radius: 200px;
-    background: rgba(255,255,255, 1);
-    border: 1px solid rgb(182, 182, 182);
+    background: @gray-10;
+    border: 1px solid @gray-7;
     margin: 2px;
 
     &:hover, &:hover * {
-        background: @blue !important;
-        color: white !important;
-        border-color: @blue !important;
+        background: @turquoise !important;
+        color: @white !important;
+        border-color: @turquoise !important;
         text-decoration: none;
     }
 }
@@ -608,7 +595,7 @@
 
 .umb-grid .iconBox a:hover {
     text-decoration: none;
-    color: white !important;
+    color: @white !important;
 }
 
 .umb-grid .iconBox.selected {
@@ -626,7 +613,7 @@
 
 .umb-grid .iconBox i {
     font-size: 16px !important;
-    color: #5F5F5F;
+    color: @gray-3 ;
     display: block;
 }
 
@@ -655,7 +642,7 @@
 }
 
 .umb-grid .mce-toolbar {
-    border-bottom: 1px solid rgba(207, 207, 207, 0.7);
+    border-bottom: 1px solid @gray-8;
     background-color: rgba(250, 250, 250, 1);
     display: none;
 }
@@ -697,7 +684,7 @@
     font-size: 10px;
     padding: 0;
     margin: 5px 5px 0 0;
-    color: #808080;
+    color: @gray-5;
 }
 
 
@@ -711,7 +698,7 @@
 }
 
 .umb-grid .umb-control.-active {
-    border-color: @blue;
+    border-color: @turquoise;
 }
 
 .umb-grid .umb-templates-columns {
@@ -724,10 +711,10 @@
 
 .umb-grid .umb-control-bar {
     opacity: 0;
-    background: @blue;
+    background: @turquoise;
     padding: 2px 5px;
-    color: #ffffff;
-    font-size: 10px;
+    color: @white;
+    font-size: 12px;
     height: 0;
     display: flex;
     transition: height 80ms linear, opacity 80ms linear;
@@ -737,6 +724,7 @@
 .umb-grid .umb-control-title {
     display: flex;
     align-items: center;
+    font-weight: bold;
 }
 
 .umb-grid .umb-control.-active .umb-control-bar {
@@ -776,15 +764,15 @@
 }
 
 .umb-grid .umb-templates-template a.tb:hover {
-    border: 5px solid @blue;
+    border: 5px solid @turquoise;
 }
 
 .umb-grid .umb-templates-template .tb {
     width: 100%;
     height: 150px;
     padding: 10px;
-    background-color: @grayLighter;
-    border: 5px solid @grayLight;
+    background-color: @gray-10;
+    border: 5px solid @gray-8;
     cursor: pointer;
     position: relative;
 }
@@ -796,17 +784,17 @@
 
 .umb-grid .umb-templates-template .tb .umb-templates-column {
     height: 100%;
-    border: 1px dashed @grayLight;
+    border: 1px dashed @gray-8;
     border-right: none;
 }
 
 .umb-grid .umb-templates-template .tb .umb-templates-column.last {
-    border-right: 1px dashed @grayLight !important;
+    border-right: 1px dashed @gray-8 !important;
 }
 
 .umb-grid a.umb-templates-column:hover,
 .umb-grid a.umb-templates-column.selected {
-    background-color: @blue;
+    background-color: @turquoise;
 }
 
 
@@ -841,7 +829,7 @@
         box-sizing: border-box;
         width: 125px;
         margin: 15px;
-        border: 3px solid @grayLight;
+        border: 3px solid @gray-8;
         transition: border 100ms linear;
 
         &.prevalues-rows {
@@ -856,7 +844,7 @@
         }
 
         &:hover {
-            border-color: @blue;
+            border-color: @turquoise;
             cursor: pointer;
         }
 
@@ -879,7 +867,7 @@
         }
 
         .preview-cell {
-            background-color: @grayLighter;
+            background-color: @gray-10;
         }
 
         .preview-overlay {
@@ -915,7 +903,7 @@
                 display: block;
                 width: 100%;
                 height: 100%;
-                background-color: @grayLight;
+                background-color: @gray-8;
                 margin: 0 1px 1px 0;
             }
         }
@@ -935,7 +923,7 @@
         top: 0;
         box-sizing: border-box;
         left: 0;
-        border: 3px solid white;
+        border: 3px solid @white;
     }
 }
 
@@ -944,9 +932,8 @@
 
 .umb-grid .umb-grid-has-config {
     display: inline;
-
-    font-size: 12px;
-    color: fade(@black, 44);
+    font-size: 13px;
+    color: @gray-5;
 }
 
 .umb-grid .umb-cell {
@@ -965,7 +952,7 @@
     width: 360px;
     height: 380px;
     overflow: auto;
-    border: 1px solid #ccc;
+    border: 1px solid @gray-8;
     margin-top: -270px;
     margin-left: -150px;
     background: @white;
@@ -977,8 +964,8 @@
 }
 
 .umb-grid .cell-tools-menu h5 {
-    border-bottom: 1px solid #d9d9d9;
-    color: #999;
+    border-bottom: 1px solid @gray-8;
+    color: @gray-5;
     padding: 10px;
     margin-top: 0;
 }
@@ -996,23 +983,23 @@
     margin: 5px;
     padding: 5px;
     overflow: hidden;
-    font-size: 11px;
+    font-size: 12px;
 
     &:hover, &:hover * {
-        background: #2e8aea;
+        background: @turquoise;
         color: @white;
     }
 }
 
 .umb-grid .elements a {
-    color: #222;
+    color: @gray-1;
     text-decoration: none;
 }
 
 .umb-grid .elements i {
     font-size: 30px;
     line-height: 50px;
-    color: #999;
+    color: @gray-6;
     display: block;
 }
 
@@ -1043,7 +1030,7 @@
 }
 
 .umb-grid-configuration .umb-templates .umb-templates-template span {
-    background: @grayLight;
+    background: @gray-8;
     display: inline-block;
 }
 
@@ -1055,8 +1042,8 @@
     display: block;
     float: left;
     margin-left: -1px;
-    border: 1px white solid !important;
-    background: @grayLight;
+    border: 1px @white solid !important;
+    background: @gray-8;
 }
 
 .umb-grid-configuration .umb-templates-column.last {
@@ -1067,7 +1054,7 @@
     text-align: center;
     font-size: 20px;
     line-height: 70px;
-    color: #ccc;
+    color: @gray-8;
     text-decoration: none;
     background: @white;
 }

src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less

@@ -9,7 +9,7 @@
 .umb-group-builder__group {
   min-height: 86px;
   margin: 50px 0 0 0;
-  border: 2px solid #CCCCCC;
+  border: 2px solid @gray-7;
   border-radius: 0 10px 10px 10px;
   position: relative;
   padding: 10px 10px 5px 10px;
@@ -17,11 +17,11 @@
 }
 
 .umb-group-builder__group.-active {
-  border-color: @blue;
+  border-color: @turquoise;
 }
 
 .umb-group-builder__group.-inherited {
-  border-color: #F2F2F2;
+  border-color: @gray-9;
   animation: fadeIn 0.5s;
 }
 
@@ -31,8 +31,8 @@
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  border: 1px dashed @grayLight;
-  color: @blue;
+  border: 1px dashed @gray-8;
+  color: @turquoise-d1;
   font-weight: bold;
 }
 
@@ -63,7 +63,7 @@
 
 .umb-group-builder__group-remove:hover {
   cursor: pointer;
-  color: @blueDark;
+  color: @turquoise;
 }
 
 .umb-group-builder__group-title-wrapper {
@@ -82,8 +82,8 @@
 .umb-group-builder__group-title {
   padding: 5px 9px 0 9px;
   height: 38px;
-  background: white;
-  border: 2px solid #CCCCCC;
+  background: @white;
+  border: 2px solid @gray-7;
   border-bottom: none;
   border-radius: 10px 10px 0 0;
   font-weight: bold;
@@ -96,24 +96,24 @@
 }
 
 .umb-group-builder__group-title.-active {
-  border-color: @blue;
+  border-color: @turquoise;
 }
 
 .umb-group-builder__group-title.-placeholder {
-  border: 1px dashed @grayLight;
+  border: 1px dashed @gray-8;
   border-bottom: none;
   width: 70px;
 }
 
 .umb-group-builder__group-title.-inherited {
-  border-color: #F2F2F2;
+  border-color: @gray-9;
 }
 
 input.umb-group-builder__group-title-input {
   border-color: transparent;
   background: transparent;
   font-weight: bold;
-  color: #515151;
+  color: @gray-3;
   margin-bottom: 0;
 }
 
@@ -122,12 +122,12 @@ input.umb-group-builder__group-title-input {
 }
 
 .umb-group-builder__group-title-input.-placeholder {
-  border: 1px dashed #979797;
+  border: 1px dashed @gray-6;
 }
 
 .umb-group-builder__group-inherited-label {
   font-size: 13px;
-  color: @grayLight;
+  color: @gray-8;
   display: inline-block;
   position: relative;
   top: 2px;
@@ -143,11 +143,11 @@ input.umb-group-builder__group-title-input {
 }
 
 input.umb-group-builder__group-sort-value {
-  font-size: 11px;
+  font-size: 12px;
   padding: 0px 0 0px 5px;
   width: 40px;
   margin-bottom: 0;
-  border-color: #d9d9d9;
+  border-color: @gray-8;
 }
 
 /* ---------- PROPERTIES ---------- */
@@ -175,8 +175,8 @@ input.umb-group-builder__group-sort-value {
 }
 
 .umb-group-builder__property.-placeholder {
-  background: #ffffff;
-  border: 1px dashed @grayLight;
+  background: @white;
+  border: 1px dashed @gray-8;
   border-radius: 5px;
   cursor: pointer;
   align-items: center;
@@ -211,13 +211,13 @@ input.umb-group-builder__group-sort-value {
 }
 
 .umb-group-builder__property.-sortable {
-  background: #E9E9E9;
-  color: @grayDarker;
+  background: @gray-9;
+  color: @gray-1;
   cursor: move;
 }
 
 .umb-group-builder__property.-sortable-locked {
-  background: @grayLighter;
+  background: @gray-10;
   padding-left: 30px;
 }
 
@@ -233,7 +233,7 @@ input.umb-group-builder__group-sort-value {
 
 .umb-group-builder__property-meta-alias {
   font-size: 10px;
-  color: @gray;
+  color: @gray-3;
   word-break: break-word;
   line-height: 1.5;
   margin-bottom: 5px;
@@ -243,7 +243,7 @@ input.umb-group-builder__group-sort-value {
   font-size: 14px;
   font-weight: bold;
   margin-bottom: 0;
-  color: @grayDarker;
+  color: @gray-1;
   width: 100%;
   padding: 0;
   min-height: 25px;
@@ -261,7 +261,7 @@ input.umb-group-builder__group-sort-value {
 .umb-group-builder__property-meta-description textarea {
   font-size: 12px;
   line-height: 1.5;
-  color: @grayDark;
+  color: @gray-3;
   margin-bottom: 0;
   padding: 0;
   width: 100%;
@@ -299,13 +299,13 @@ input.umb-group-builder__group-sort-value {
 }
 
 .umb-group-builder__property-preview-label {
-  font-size: 11px;
+  font-size: 12px;
   position: absolute;
   top: 0;
   left: 0;
   text-transform: uppercase;
   z-index: 15;
-  background: @grayLighter;
+  background: @gray-10;
   padding: 3px;
   line-height: 12px;
   opacity: 0.8
@@ -326,7 +326,7 @@ input.umb-group-builder__group-sort-value {
 }
 
 .umb-group-builder__property-action:hover {
-    color: @blueDark;
+    color: @turquoise;
 }
 
 .umb-group-builder__property-tags {
@@ -344,8 +344,8 @@ input.umb-group-builder__group-sort-value {
 }
 
 .umb-group-builder__property-tag {
-    font-size: 11px;
-    background-color: @grayLight;
+    font-size: 12px;
+    background-color: @gray-8;
     margin-left: 10px;
     padding: 0 4px;
     display: flex;
@@ -367,14 +367,14 @@ input.umb-group-builder__group-sort-value {
 /* ---------- PLACEHOLDER BOX ---------- */
 
 .umb-group-builder__placeholder-box {
-  background: #E9E9E9;
+  background: @gray-8;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: bold;
-  color: @blue;
+  color: @turquoise-d1;
 }
 
 .umb-group-builder__placeholder-box.-input {
@@ -403,7 +403,7 @@ input.umb-group-builder__group-sort-value {
 
 .umb-group-builder__group-sortable-placeholder {
   background: transparent;
-  border: 1px dashed @grayLight;
+  border: 1px dashed @gray-8;
   margin: 0 0 70px 0;
   border-radius: 10px;
   border-radius: 5px;
@@ -411,7 +411,7 @@ input.umb-group-builder__group-sort-value {
 
 .umb-group-builder__property_sortable-placeholder {
   background: transparent;
-  border: 1px dashed @grayLight;
+  border: 1px dashed @gray-8;
   margin-bottom: 5px;
   border-radius: 5px;
 }
@@ -420,7 +420,7 @@ input.umb-group-builder__group-sort-value {
   padding-top: 50px;
   font-size: 16px;
   line-height: 1.8em;
-  color: #ccc;
+  color: @gray-7;
   text-align: center;
 }
 
@@ -466,17 +466,17 @@ input.umb-group-builder__group-sort-value {
   }
 
   .editor-placeholder {
-    border: 1px dashed @grayLight;
+    border: 1px dashed @gray-8;
     width: 100%;
     height: 80px;
     line-height: 80px;
     text-align: center;
     display: block;
     border-radius: 5px;
-    color: @gray;
+    color: @gray-3;
     font-weight: bold;
     font-size: 13px;
-    color: @blue;
+    color: @turquoise-d1;
     &:hover {
       text-decoration: none;
     }
@@ -485,7 +485,7 @@ input.umb-group-builder__group-sort-value {
   .editor {
     margin-bottom: 10px;
     .editor-icon-wrapper {
-      border: 1px solid @grayLight;
+      border: 1px solid @gray-8;
       width: 60px;
       height: 60px;
       text-align: center;

src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less

@@ -2,7 +2,6 @@
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-
     margin: 0;
 }
 
@@ -12,9 +11,7 @@
     flex: 0 0 14.28%;
     justify-content: center;
     align-items: center;
-
     margin-bottom: 0;
-
     overflow: hidden;
 }
 
@@ -22,23 +19,21 @@
     display: flex;
     justify-content: center;
     align-items: center;
-
     width: 100%;
     height: 100%;
-
     padding: 15px 0;
-
     text-decoration: none;
+    border-radius: 3px;
 }
 
 .umb-iconpicker-item a:hover,
 .umb-iconpicker-item a:focus{
-    background: darken(@grayLighter, 1%);
+    background: @gray-10;
     outline: none;
 }
 
 .umb-iconpicker-item a:active {
-    background: darken(@grayLighter, 4%);
+    background: @gray-10;
 }
 
 .umb-iconpicker-item i {

src/Umbraco.Web.UI.Client/src/less/components/umb-insert-code-box.less

@@ -4,7 +4,7 @@
 }
 
 .umb-insert-code-box {
-    border: 2px solid @grayLighter;
+    border: 2px solid @gray-10;
     padding: 15px 20px;
     margin-bottom: 10px;
     border-radius: 3px;
@@ -12,7 +12,7 @@
 
 .umb-insert-code-box:hover,
 .umb-insert-code-box.-selected {
-    border-color: @blue;
+    border-color: @turquoise;
     cursor: pointer;
 }
 
@@ -24,13 +24,13 @@
 }
 
 .umb-insert-code-box__description {
-    font-size: 11px;
+    font-size: 12px;
 }
 
 .umb-insert-code-box__check {
     width: 18px;
     height: 18px;
-    background: @grayLighter;
+    background: @gray-10;
     border-radius: 50%;
     display: flex;
     align-items: center;

src/Umbraco.Web.UI.Client/src/less/components/umb-keyboard-shortcuts-overview.less

@@ -7,7 +7,7 @@
   height: 100%;
   top: 0;
   left: 0;
-  background: rgb(255, 255, 255);
+  background: @white;
   z-index: 1000;
   animation: fadeIn 0.2s;
   box-sizing: border-box;
@@ -30,8 +30,8 @@
 }
 
 .umb-keyboard-shortcuts-overview__overlay-close:hover {
-    background-color: @blue;
-    color: #ffffff;
+    background-color: @turquoise;
+    color: @white;
     text-decoration: none;
 }
 
@@ -58,7 +58,7 @@
   justify-content: space-between;
   align-items: center;
   padding: 7px 0;
-  border-bottom: 1px solid @grayLight;
+  border-bottom: 1px solid @gray-8;
 }
 
 .umb-keyboard-shortcuts-overview__keyboard-shortcut.-no-air {
@@ -91,9 +91,9 @@
 }
 
 .umb-keyboard-key {
-  background: #ffffff;
-  border: 1px solid @grayLight;
-  color: @gray;
+  background: @white;
+  border: 1px solid @gray-8;
+  color: @gray-3;
   border-radius: 5px;
   margin-right: 5px;
   padding: 1px 7px;

src/Umbraco.Web.UI.Client/src/less/components/umb-layout-selector.less

@@ -16,7 +16,7 @@
 }
 
 .umb-layout-selector__active-layout:hover {
-   border-color: @grayLight;
+   border-color: @gray-8;
 }
 
 .umb-layout-selector__dropdown {
@@ -44,7 +44,7 @@
 }
 
 .umb-layout-selector__dropdown-item:hover {
-   border: 1px solid @grayLight;
+   border: 1px solid @gray-8;
 }
 
 .umb-layout-selector__dropdown-item.-active {

src/Umbraco.Web.UI.Client/src/less/components/umb-lightbox.less

@@ -53,7 +53,7 @@
 }
 
 .umb-lightbox__control {
-    background-color: white;
+    background-color: @white;
     width: 50px;
     height: 50px;
     border-radius: 50%;
@@ -77,6 +77,6 @@
 }
 
 .umb-lightbox__control-icon {
-    color: @blue;
+    color: @turquoise;
     font-size: 20px;
 }

src/Umbraco.Web.UI.Client/src/less/components/umb-list-view-settings.less

@@ -1,6 +1,6 @@
 .umb-list-view-settings__box {
-  background: #f8f8f8;
-  border: 1px solid #CCCCCC;
+  background: @gray-10;
+  border: 1px solid @gray-7;
   display: flex;
   animation: fadeIn 0.5s;
   padding: 15px;
@@ -21,7 +21,7 @@
 
 .umb-list-view-settings__list-view-icon {
   font-size: 20px;
-  color: #d9d9d9;
+  color: @gray-7;
   margin-right: 10px;
 }
 
@@ -33,17 +33,21 @@
 }
 
 .umb-list-view-settings__create-new {
-  font-size: 12px;
-  color: @blue;
+  font-size: 13px;
+  color: @turquoise-d1;
+}
+
+.umb-list-view-settings__create-new:hover {
+  color: @turquoise-d1;
 }
 
 .umb-list-view-settings__remove-new {
-  font-size: 12px;
+  font-size: 13px;
   color: @red;
 }
 
 .umb-list-view-settings__settings {
-  border: 1px dashed #d9d9d9;
+  border: 1px dashed @gray-7;
   border-top: none;
   padding: 20px;
 }

src/Umbraco.Web.UI.Client/src/less/components/umb-load-indicator.less

@@ -20,7 +20,7 @@
    margin: 0;
    height: 6px;
    width: 6px;
-   border: 2px solid @blue;
+   border: 2px solid @turquoise-d1;
    border-radius: 100%;
    transform: transformZ(0);
    animation: umbLoadIndicatorAnimation 1.4s infinite;
@@ -44,7 +44,7 @@
 @keyframes umbLoadIndicatorAnimation {
   0%   {
     transform: scale(0.5);
-    background: @blue;
+    background: @turquoise-d1;
   }
   50%   {
     transform: scale(1);
@@ -52,6 +52,6 @@
   }
   100% {
     transform: scale(0.5);
-    background: @blue;
+    background: @turquoise-d1;
   }
 }

src/Umbraco.Web.UI.Client/src/less/components/umb-locked-field.less

@@ -1,6 +1,6 @@
 .umb-locked-field {
   font-size: 13px;
-  color: #ccc;
+  color: @gray-7;
   position: relative;
   display: block;
 }
@@ -21,13 +21,12 @@
 }
 
 .umb-locked-field__lock-icon {
-  color: #ccc;
+  color: @gray-7;
   transition: color 0.25s;
-  //vertical-align: top;
 }
 
 .umb-locked-field__lock-icon.-unlocked {
-   color: #515151;
+   color: @gray-3;
 }
 
 input.umb-locked-field__input {
@@ -35,9 +34,10 @@ input.umb-locked-field__input {
   border-color: transparent !important;
   font-size: 13px;
   margin-bottom: 0;
-  color: #ccc;
+  color: @gray-6;
   transition: color 0.25s;
   padding: 0;
+  height: auto;
 }
 
 input.umb-locked-field__input:focus {
@@ -45,5 +45,5 @@ input.umb-locked-field__input:focus {
 }
 
 input.umb-locked-field__input.-unlocked {
-   color: #515151;
+   color: @gray-3;
 }

src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less

@@ -30,7 +30,7 @@
 }
 
 .umb-media-grid__item.-file {
-    background-color: @grayLighter;
+    background-color: @gray-10;
 }
 
 .umb-media-grid__item.-selected {
@@ -76,24 +76,24 @@
    z-index: 100;
    padding: 5px 10px;
    box-sizing: border-box;
-   font-size: 11px;
+   font-size: 12px;
    overflow: hidden;
-   color: white;
+   color: @white;
    white-space: nowrap;
-   background: @blue;
+   background: @purple;
    transition: opacity 150ms;
 }
 
 .umb-media-grid__item.-file .umb-media-grid__item-overlay {
     opacity: 1;
-    color: @gray;
-    background: @grayLighter;
+    color: @gray-4;
+    background: @gray-10;
 }
 
 .umb-media-grid__item.-file:hover .umb-media-grid__item-overlay,
 .umb-media-grid__item.-file.-selected .umb-media-grid__item-overlay {
     color: @white;
-    background: @blue;
+    background: @purple;
 }
 
 .umb-media-grid__info {
@@ -115,7 +115,7 @@
 }
 
 .umb-media-grid__item-icon {
-   color: @gray;
+   color: @gray-4;
    position: absolute;
    top: 45%;
    left: 50%;
@@ -128,16 +128,16 @@
     z-index: 2;
     top: 10px;
     right: 10px;
-    width: 25px;
-    height: 25px;
-    border: 1px solid #ffffff;
-    background: @blue;
+    width: 26px;
+    height: 26px;
+    border: 2px solid @white;
+    background: @green;
     border-radius: 50px;
     box-sizing: border-box;
     display: flex;
     justify-content: center;
     align-items: center;
-    color: #ffffff;
+    color: @white;
     margin-left: 7px;
     transition: background 100ms;
 }

src/Umbraco.Web.UI.Client/src/less/components/umb-mini-editor.less

@@ -2,8 +2,8 @@
    
     .umb-panel-header {
         padding: 20px;
-        background: @grayLighter;
-        border-bottom: 1px solid @grayLight;
+        background: @gray-10;
+        border-bottom: 1px solid @gray-8;
         height: 59px;
 
         .umb-headline {
@@ -24,8 +24,8 @@
     }
 
     .umb-panel-footer {
-        background: @grayLighter;
-        border-top: 1px solid @grayLight;
+        background: @gray-10;
+        border-top: 1px solid @gray-8;
         height: 51px;
         padding: 0 20px;
     }

src/Umbraco.Web.UI.Client/src/less/components/umb-mini-list-view.less

@@ -14,9 +14,9 @@
 }
 
 .umb-mini-list-view__back {
-    font-size: 11px;
+    font-size: 12px;
     margin-right: 5px; 
-    color: @gray;
+    color: @gray-4;
     display: flex;
     align-items: center;
 }

src/Umbraco.Web.UI.Client/src/less/components/umb-node-preview.less

@@ -1,7 +1,7 @@
 .umb-node-preview {
     padding: 5px 15px;
     margin-bottom: 5px;
-    background: @grayLighter;
+    background: @gray-10;
     border-radius: 3px;
     display: flex;
     align-items: center;
@@ -13,10 +13,6 @@
     cursor: move;
 }
 
-.umb-node-preview--sortable:hover {
-    border-color: #d9d9d9;
-}
-
 .umb-node-preview--unpublished {
     .umb-node-preview__icon,
     .umb-node-preview__name,
@@ -47,8 +43,9 @@
 }
 
 .umb-node-preview__description {
-    font-size: 11px;
+    font-size: 12px;
     line-height: 1.5em;
+    color: @gray-3;
 }
 
 .umb-node-preview__actions {
@@ -62,21 +59,25 @@
     margin-right: 5px;
     font-size: 13px;
     font-weight: bold;
-    opacity: 0.5;
+    color: @gray-5;
 }
 
 .umb-node-preview__action:hover {
-    color: @blue;
+    color: @turquoise;
     text-decoration: none;
     opacity: 1;
 }
 
+.umb-node-preview__action--red:hover {
+    color: @red;
+}
+
 .umb-node-preview-add {
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 1px dashed #d9d9d9;
-    color: @blue;
+    border: 1px dashed @gray-8;
+    color: @turquoise-d1;
     font-weight: bold;
     padding: 5px 15px;
     max-width: 66.6%;
@@ -84,7 +85,7 @@
 }
 
 .umb-node-preview-add:hover {
-    color: @blue;
+    color: @turquoise-d1;
 }
 
 .umb-overlay, 

src/Umbraco.Web.UI.Client/src/less/components/umb-package-local-install.less

@@ -6,31 +6,26 @@
 
 // Helpers
 .faded {
-    color: @grayMed;
+    color: @gray-5;
 }
 
-
-
 .umb-upload-local__dropzone {
     position: relative;
     width: 500px;
     height: 300px;
-    border: 2px dashed @grayLight;
+    border: 2px dashed @gray-8;
     border-radius: 3px;
-    background: @grayLighter;
-
+    background: @gray-10;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-
     margin-bottom: 30px;
-
     transition: 100ms box-shadow ease, 100ms border ease;
 
     &:hover,
     &.drag-over {
-        border-color: @blue;
+        border-color: @turquoise;
         border-style: solid;
         box-shadow: 0 3px 8px rgba(0,0,0, .1);
         transition: 100ms box-shadow ease, 100ms border ease;
@@ -39,14 +34,14 @@
 
 .umb-upload-local__dropzone i {
     display: block;
-    color: @grayLight;
+    color: @gray-8;
     font-size: 110px;
     line-height: 1;
 }
 
 .umb-upload-local__select-file {
     font-weight: bold;
-    color: @blue;
+    color: @turquoise-d1;
     cursor: pointer;
 
     &:hover {
@@ -54,13 +49,10 @@
     }
 }
 
-
-
 // Accept terms
 .umb-accept-terms {
     display: flex;
     align-items: center;
-
     font-size: 13px;
 }
 
@@ -76,26 +68,20 @@
 .umb-package-installer-label {
     display: inline-flex;
     align-items: center;
-
     font-size: 13px;
     user-select: none;
 }
 
-
-
 // Info state
 .umb-info-local-items {
-    border: 2px solid @grayLight;
+    border: 2px solid @gray-8;
     border-radius: 3px;
-    background: @grayLighter;
-
+    background: @gray-10;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-
     margin: 0 20px;
-
     width: 100%;
     max-width: 540px;
 }

src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less

@@ -23,7 +23,7 @@
 
 .umb-packages-search {
     width: 100%;
-    background: @grayLighter;
+    background: @gray-10;
     border-radius: 3px;
     padding: 30px;
     box-sizing: border-box;
@@ -33,15 +33,13 @@
     border-width: 2px;
     border-radius: 3px;
     min-height: 44px;
-
     padding: 4px 10px;
     font-size: 16px;
-    border-color: #ececec;
     margin-bottom: 0;
-    border-color: @grayLight;
+    border-color: @gray-8;
 
     &:hover, &:focus {
-        border-color: @grayLight;
+        border-color: @gray-8;
     }
 }
 
@@ -112,22 +110,17 @@
     flex-wrap: wrap;
     flex-direction: column;
     justify-content: center;
-
     position: relative;
     box-sizing: border-box;
-
     height: 100%;
     width: 100%;
-
-    border: 1px solid #ececec;
+    border: 1px solid @gray-9;
     border-radius: 3px;
-
     text-decoration: none !important;
-
     transition: border-color 100ms ease;
 
     &:hover {
-        border-color: @blue;
+        border-color: @turquoise;
     }
 }
 
@@ -136,21 +129,16 @@
 // Icon
 .umb-package-icon {
     display: flex;
-
     justify-content: center;
     align-items: center;
-
     padding-top: 10px;
     padding-right: 10px;
     padding-left: 10px;
     padding-bottom: 10px;
-
     text-align: center;
-    background-color: white;
-
+    background-color: @white;
     border-top-right-radius: 3px;
     border-top-left-radius: 3px;
-
     min-height: 60px;
 }
 
@@ -168,11 +156,10 @@
     padding-left: 15px;
     padding-top: 15px;
     text-align: center;
-    background: @grayLighter;
+    background: @gray-10;
     border-bottom-left-radius: 3px;
     border-bottom-right-radius: 3px;
-
-    border-top: 1px solid #ececec;
+    border-top: 1px solid @gray-9;
 }
 
 
@@ -181,24 +168,20 @@
     font-size: 14px;
     max-width: 250px;
     margin-bottom: 5px;
-
     font-weight: bold;
-
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-
     line-height: normal;
     margin-left: auto;
     margin-right: auto;
 }
 
 .umb-package-description {
-    font-size: 11px;
-    color: @grayMed;
+    font-size: 12px;
+    color: @gray-4;
     word-wrap: break-word;
     line-height: 1.1rem;
-
     white-space: nowrap;
     max-width: 100%;
     overflow: hidden;
@@ -211,15 +194,12 @@
     flex-wrap: wrap;
     flex-direction: row;
     justify-content: center;
-
     opacity: .6;
-
     margin-top: 10px;
 }
 
 .umb-package-numbers small {
     padding: 0 5px;
-
     display: flex;
     align-items: center;
     justify-content: center;
@@ -234,18 +214,18 @@
 }
 
 .umb-package-link:hover .umb-package-numbers .icon-hearts {
-    color: red !important;
+    color: @red !important;
 }
 
 // Version
 .umb-package-version {
     display: inline-flex;
-    font-size: 11px;
+    font-size: 12px;
     font-weight: bold;
     padding: 1px 5px;
-    background: #ececec;
+    background: @gray-8;
     border-radius: 3px;
-    color: black;
+    color: @black;
 }
 
 /* CATEGORIES */
@@ -267,9 +247,9 @@
     color: @black;
     box-sizing: border-box;
     justify-content: center;
-    border-top: 1px solid @grayLight;
-    border-bottom: 1px solid @grayLight;
-    border-right: 1px solid @grayLight;
+    border-top: 1px solid @gray-8;
+    border-bottom: 1px solid @gray-8;
+    border-right: 1px solid @gray-8;
     padding: 10px 0;
 }
 
@@ -286,30 +266,24 @@
 
 @media (max-width: 992px) {
     .umb-packages-category {
-        border: 1px solid @grayLight;
+        border: 1px solid @gray-8;
         margin: 5px;
         flex: 0 0 auto;
-
         text-align: center;
         padding: 10px;
-
         max-width: 100%;
-
         border-radius: 3px;
     }
 }
 
 @media (min-width: 1100px) and (max-width: 1300px) {
     .umb-packages-category {
-        border: 1px solid @grayLight;
+        border: 1px solid @gray-8;
         margin: 5px;
         flex: 0 0 auto;
-
         text-align: center;
         padding: 10px;
-
         max-width: 100%;
-
         border-radius: 3px;
     }
 }
@@ -318,17 +292,17 @@
 .umb-packages-category:hover,
 .umb-packages-category.-active {
     text-decoration: none;
-    color: @blue;
+    color: @turquoise;
 }
 
 .umb-packages-category.-first {
-    border-left: 1px solid @grayLight;
+    border-left: 1px solid @gray-8;
     border-top-left-radius: 3px;
     border-bottom-left-radius: 3px;
 }
 
 .umb-packages-category.-last {
-    border-right: 1px solid @grayLight;
+    border-right: 1px solid @gray-8;
     border-top-right-radius: 3px;
     border-bottom-right-radius: 3px;
 }
@@ -345,7 +319,7 @@ a.umb-package-details__back-link {
 }
 
 .umb-package-details__back-link:hover {
-    color: @grayMed;
+    color: @gray-4;
     text-decoration: none;
 }
 
@@ -382,7 +356,7 @@ a.umb-package-details__back-link {
 }
 
 .umb-package-details__section {
-    background: @grayLighter;
+    background: @gray-10;
     padding: 20px;
     margin-bottom: 20px;
     border-radius: 3px;
@@ -391,7 +365,7 @@ a.umb-package-details__back-link {
 .umb-package-details__section-title {
     font-size: 17px;
     font-weight: bold;
-    color: black;
+    color: @black;
     margin-top: 0;
     margin-bottom: 15px;
 }
@@ -408,7 +382,7 @@ a.umb-package-details__back-link {
 }
 
 .umb-package-details__information-item-label {
-    color: black;
+    color: @black;
     font-weight: bold;
 }
 
@@ -418,7 +392,7 @@ a.umb-package-details__back-link {
 
 .umb-package-details__information-item-label-2 {
     font-size: 12px;
-    color: @grayMed;
+    color: @gray-4;
 }
 
 .umb-package-details__compatability {
@@ -432,6 +406,7 @@ a.umb-package-details__back-link {
 .umb-package-details__description {
     margin-bottom: 20px;
     line-height: 1.6em;
+    word-wrap: break-word; 
 }
 
 .umb-package-details__description p {
@@ -441,12 +416,12 @@ a.umb-package-details__back-link {
 /* Links */
 
 .umb-package-details__link {
-    color: #DA3287;
+    font-weight: bold;
+    color: @black;
 }
 
 .umb-package-details__link:hover {
-    color: #B32D71;
-    text-decoration: none;
+    text-decoration: underline;
 }
 
 /* Owner profile */
@@ -462,13 +437,13 @@ a.umb-package-details__back-link {
 
 .umb-package-details__owner-profile-name {
     font-size: 15px;
-    color: #000000;
+    color: @black;
     font-weight: bold;
 }
 
 .umb-package-details__owner-profile-karma {
     font-size: 12px;
-    color: @grayMed;
+    color: @gray-4;
 }
 
 /* gallery */
@@ -480,7 +455,7 @@ a.umb-package-details__back-link {
 
 .umb-gallery__thumbnail {
     flex: 0 1 100px;
-    border: 1px solid @grayLight;
+    border: 1px solid @gray-8;
     border-radius: 3px;
     margin: 5px;
     padding: 10px;
@@ -490,7 +465,7 @@ a.umb-package-details__back-link {
 
 .umb-gallery__thumbnail:hover {
     cursor: pointer;
-    border-color: @blue;
+    border-color: @turquoise;
 }
 
 /* PACKAGE LIST */
@@ -503,18 +478,20 @@ a.umb-package-details__back-link {
 .umb-package-list__item {
     display: flex;
     flex-direction: row;
-    background: @grayLighter;
-    margin-bottom: 10px;
+    background: @gray-10;
+    margin-bottom: 5px;
     border-radius: 3px;
-    padding: 20px;
+    padding: 15px 20px;
     align-items: center;
 }
 
 .umb-package-list__item-icon {
-    flex: 0 0 50px;
+    flex: 0 0 35px;
     margin-right: 20px;
     font-size: 30px;
     text-align: center;
+    justify-content: center;
+    align-items: center;
 }
 
 .umb-package-list__item-content {
@@ -531,7 +508,7 @@ a.umb-package-details__back-link {
 
 .umb-package-list__item-description {
     font-size: 14px;
-    color: @grayMed;
+    color: @gray-4;
 }
 
 .umb-package-list__item-actions {
@@ -539,3 +516,13 @@ a.umb-package-details__back-link {
     display: flex;
     justify-content: flex-end;
 }
+
+.umb-package-list__item-action {
+    font-weight: bold;
+    color: @gray-3;
+}
+
+.umb-package-list__item-action:hover {
+    text-decoration: none;
+    color: @red;
+}

src/Umbraco.Web.UI.Client/src/less/components/umb-progress-bar.less

@@ -1,5 +1,5 @@
 .umb-progress-bar {
-    background: @grayLight;
+    background: @gray-8;
     width: 100%;
     display: block;
     height: 10px;
@@ -10,7 +10,7 @@
 }
 
 .umb-progress-bar__progress {
-    background: #50C878;
+    background: @green;
     position: absolute;
     left: 0;
     top: 0;

src/Umbraco.Web.UI.Client/src/less/components/umb-querybuilder.less

@@ -1,14 +1,14 @@
 .umb-querybuilder .row {
-    font-size: 12px;
-    line-height: 12px
+    font-size: 14px;
+    line-height: 14px
 }
 
 .umb-querybuilder .row a.btn {
     padding: 5px 8px;
     margin: 0 5px;
     font-weight: bold;
-    background-color: #f3f9ff;
-    border: 1px solid #bfdff9;
+    background-color: @turquoise-washed;
+    border: 1px solid @turquoise-l1;
     border-radius: 3px;
     text-align: center;
     display: inline-block;
@@ -16,13 +16,14 @@
 }
 
 .umb-querybuilder .row a.btn:hover {
-    background: #e8f1fb;
+    background-color: @turquoise-washed;
+    border: 1px solid @turquoise-d1;
     text-decoration: none;
 }
 
 .umb-querybuilder .row > div {
     padding: 20px 0;
-    border-bottom: 1px solid @grayLighter;
+    border-bottom: 1px solid @gray-10;
 }
 
 .umb-querybuilder .datepicker input {

src/Umbraco.Web.UI.Client/src/less/components/umb-sub-views.less

@@ -21,7 +21,7 @@
       margin-left: 15px;
       &.is-active {
         .btn-link {
-          color: @blue !important;
+          color: @turquoise-d1 !important;
         }
       }
     }

src/Umbraco.Web.UI.Client/src/less/components/umb-table.less

@@ -2,14 +2,10 @@
 .umb-table {
     display: flex;
     flex-direction: column;
-
     position: relative;
-
-    border: 1px solid @grayLight;
-
+    border: 1px solid @gray-8;
     flex-wrap: nowrap;
     justify-content: space-between;
-
     min-width: auto;
 }
 
@@ -18,15 +14,12 @@
     &:before {
         content: "";
         background: rgba(255, 255, 255, 0.75);
-
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
-
         z-index: 10;
-
         outline: 1px solid rgba(255, 255, 255, 0.75);
     }
 
@@ -51,26 +44,19 @@ input.umb-table__input {
 
 // Table Head Styles
 .umb-table-head {
-    text-transform: uppercase;
-
-    background-color: @grayLighter;
-
-    font-size: 11px;
-    font-weight: 600;
+    background-color: @gray-10;
+    font-size: 14px;
+    font-weight: bold;
 }
 
 .umb-table-head__link {
     position: relative;
-
     cursor: default;
     text-decoration: none;
-
-    color: fade(@gray, 75%);
-
-
+    color: @gray-3;
     &:hover {
         text-decoration: none;
-        color: fade(@gray, 75%);
+        color: @gray-3;
     }
 }
 
@@ -84,12 +70,9 @@ input.umb-table__input {
 
 .umb-table-thead__icon {
     position: absolute;
-
     padding-top: 1px;
     padding-left: 3px;
-
     font-size: 13px;
-
     cursor: default;
 }
 
@@ -99,24 +82,20 @@ input.umb-table__input {
 }
 
 
-
-
-
 // Table Body Styles
 .umb-table-body {
     position: relative;
 }
 
 .umb-table-body .umb-table-row {
-    color: fade(@gray, 75%);
-    border-top: 1px solid @grayLight;
+    color: @gray-5;
+    border-top: 1px solid @gray-8;
     cursor: pointer;
-    font-size: 13px;
+    font-size: 14px;
     position: relative;
     min-height: 32px;
-
     &:hover {
-        background-color: fade(@grayLighter, 90%);
+        background-color: @gray-10;
     }
 }
 
@@ -124,7 +103,7 @@ input.umb-table__input {
     cursor: default;
 
     &:hover {
-        background-color: white;
+        background-color: @white;
     }
 }
 
@@ -142,15 +121,16 @@ input.umb-table__input {
     margin: 0 auto;
     font-size: 22px;
     line-height: 22px;
-    color: @blueDark;
+    color: @turquoise-d1;
 }
 
 .umb-table-body__checkicon,
 .umb-table-body__checkicon[class^="icon-"],
 .umb-table-body__checkicon[class*=" icon-"] {
     display: none;
-    font-size: 16px;
+    font-size: 18px;
     line-height: 22px;
+    color: @green;
 }
 
 .umb-table-body .umb-table__name {
@@ -163,11 +143,8 @@ input.umb-table__input {
 .umb-table-body__empty {
     font-size: 16px;
     text-align: center;
-
-    color: @gray;
-
+    color: @gray-3;
     padding: 20px 0;
-
     height: 100%;
 }
 
@@ -226,22 +203,14 @@ input.umb-table__input {
     cursor: auto;
 }
 
-.umb-table-row.-selected,
-.umb-table-row.-selected:hover {
-    background-color: fade(@blueDark, 4%);
-}
-
 // Table Cell Styles
 .umb-table-cell {
     display: flex;
     flex-flow: row nowrap;
     flex: 1 1 1%; //NOTE 1% is a Internet Explore hack, so that cells don't collapse
-
     position: relative;
-
     margin: auto 14px;
     padding: 6px 2px;
-
     text-align: left;
     overflow:hidden;
 }
@@ -254,7 +223,6 @@ input.umb-table__input {
 
 .umb-table-cell:first-of-type:not(.not-fixed) {
     flex: 0 0 25px;
-
     margin: 0 0 0 15px;
     padding: 15px 0;
 }

src/Umbraco.Web.UI.Client/src/less/components/umb-tabs.less

@@ -11,5 +11,5 @@
   padding-top: 20px;
   position: relative;
   top: 22px;
-  border-top: 1px solid @grayLight;
+  border-top: 1px solid @purple-l3;
 }

src/Umbraco.Web.UI.Client/src/less/dashboards.less

@@ -24,7 +24,7 @@
 		video {
 	        width: 100%;
 	        max-width: 640px;
-	        border: 1px solid #ededed;
+	        border: 1px solid @gray-9;
 	        border-left: none;
 	        border-bottom: none;
 	        box-sizing:border-box;
@@ -62,7 +62,7 @@
 		    width: 100%;
 		    height: 3px;
 		    margin-top: -13px;
-		    background-color: whitesmoke;
+		    background-color: @gray-10;
 		}
 
 		.progress-bar {
@@ -72,7 +72,7 @@
 		    max-width: 100%;
 		    width: 200px;
 		    height: 100%;
-		    background: #7c7e80;
+		    background: @gray-5;
 		}
 
 		.video-controls, .loader, .progress-bar {
@@ -95,7 +95,7 @@
 		}
 
 		.video_player video:hover + .video-controls .progress-bar, .video-controls:hover .progress-bar {
-			background: #2e99f4;
+			background: @turquoise-d1;
 		}
 	}
 

src/Umbraco.Web.UI.Client/src/less/dragdrop.less

@@ -12,8 +12,8 @@ li.dragged {
 	  display: block;
     margin: 5px;
     padding: 5px;
-    border: 1px solid #CCC;
-    background: @grayLighter;
+    border: 1px solid @gray-7;
+    background: @gray-10;
 }
 
 .umb-sort .placeholder {
@@ -32,6 +32,6 @@ li.dragged {
 	left: -5px;
 	top: -4px;
 	border: 5px solid transparent;
-	border-left-color: red;
+	border-left-color: @red;
 	border-right: none;
 }

src/Umbraco.Web.UI.Client/src/less/fonts.less

@@ -1,3 +1,117 @@
+/*
+  Lato
+    
+  Light: font-weight: 300;
+  Regular: font-weight: normal;
+  Bold: font-weight: bold;
+  Black: font-weight: 900;
+
+*/
+/* Webfont: LatoLatin-Black */
+@font-face {
+    font-family: 'Lato';
+    src: url('../fonts/lato/LatoLatin-Black.eot'); /* IE9 Compat Modes */
+    src: url('../fonts/lato/LatoLatin-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         //url('../fonts/lato/LatoLatin-Black.woff2') format('woff2'), /* Modern Browsers */
+         url('../fonts/lato/LatoLatin-Black.woff') format('woff'), /* Modern Browsers */
+         url('../fonts/lato/LatoLatin-Black.ttf') format('truetype');
+    font-style: normal;
+    font-weight: 900;
+    text-rendering: optimizeLegibility;
+}
+
+/* Webfont: LatoLatin-BlackItalic */
+@font-face {
+    font-family: 'Lato';
+    src: url('../fonts/lato/LatoLatin-BlackItalic.eot'); /* IE9 Compat Modes */
+    src: url('../fonts/lato/LatoLatin-BlackItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         //url('../fonts/lato/LatoLatin-BlackItalic.woff2') format('woff2'), /* Modern Browsers */
+         url('../fonts/lato/LatoLatin-BlackItalic.woff') format('woff'), /* Modern Browsers */
+         url('../fonts/lato/LatoLatin-BlackItalic.ttf') format('truetype');
+    font-style: italic;
+    font-weight: 900;
+    text-rendering: optimizeLegibility;
+}
+
+/* Webfont: LatoLatin-Bold */
+@font-face {
+    font-family: 'Lato';
+    src: url('../fonts/lato/LatoLatin-Bold.eot'); /* IE9 Compat Modes */
+    src: url('../fonts/lato/LatoLatin-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         //url('../fonts/lato/LatoLatin-Bold.woff2') format('woff2'), /* Modern Browsers */
+         url('../fonts/lato/LatoLatin-Bold.woff') format('woff'), /* Modern Browsers */
+         url('../fonts/lato/LatoLatin-Bold.ttf') format('truetype');
+    font-style: normal;
+    font-weight: bold;
+    text-rendering: optimizeLegibility;
+}
+
+/* Webfont: LatoLatin-BoldItalic */
+@font-face {
+    font-family: 'Lato';
+    src: url('../fonts/lato/LatoLatin-BoldItalic.eot'); /* IE9 Compat Modes */
+    src: url('../fonts/lato/LatoLatin-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         //url('../fonts/lato/LatoLatin-BoldItalic.woff2') format('woff2'), /* Modern Browsers */
+         url('../fonts/lato/LatoLatin-BoldItalic.woff') format('woff'), /* Modern Browsers */
+         url('../fonts/lato/LatoLatin-BoldItalic.ttf') format('truetype');
+    font-style: italic;
+    font-weight: bold;
+    text-rendering: optimizeLegibility;
+}
+
+/* Webfont: LatoLatin-Italic */
+@font-face {
+    font-family: 'Lato';
+    src: url('../fonts/lato/LatoLatin-Italic.eot'); /* IE9 Compat Modes */
+    src: url('../fonts/lato/LatoLatin-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         //url('../fonts/lato/LatoLatin-Italic.woff2') format('woff2'), /* Modern Browsers */
+         url('../fonts/lato/LatoLatin-Italic.woff') format('woff'), /* Modern Browsers */
+         url('../fonts/lato/LatoLatin-Italic.ttf') format('truetype');
+    font-style: italic;
+    font-weight: normal;
+    text-rendering: optimizeLegibility;
+}
+
+/* Webfont: LatoLatin-Regular */
+@font-face {
+    font-family: 'Lato';
+    src: url('../fonts/lato/LatoLatin-Regular.eot'); /* IE9 Compat Modes */
+    src: url('../fonts/lato/LatoLatin-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         //url('../fonts/lato/LatoLatin-Regular.woff2') format('woff2'), /* Modern Browsers */
+         url('../fonts/lato/LatoLatin-Regular.woff') format('woff'), /* Modern Browsers */
+         url('../fonts/lato/LatoLatin-Regular.ttf') format('truetype');
+    font-style: normal;
+    font-weight: normal;
+    text-rendering: optimizeLegibility;
+}
+
+/* Webfont: LatoLatin-Light */
+@font-face {
+    font-family: 'Lato';
+    src: url('../fonts/lato/LatoLatin-Light.eot'); /* IE9 Compat Modes */
+    src: url('../fonts/lato/LatoLatin-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         //url('../fonts/lato/LatoLatin-Light.woff2') format('woff2'), /* Modern Browsers */
+         url('../fonts/lato/LatoLatin-Light.woff') format('woff'), /* Modern Browsers */
+         url('../fonts/lato/LatoLatin-Light.ttf') format('truetype');
+    font-style: normal;
+    font-weight: 300;
+    text-rendering: optimizeLegibility;
+}
+
+/* Webfont: LatoLatin-LightItalic */
+@font-face {
+    font-family: 'Lato';
+    src: url('../fonts/lato/LatoLatin-LightItalic.eot'); /* IE9 Compat Modes */
+    src: url('../fonts/lato/LatoLatin-LightItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         //url('../fonts/lato/LatoLatin-LightItalic.woff2') format('woff2'), /* Modern Browsers */
+         url('../fonts/lato/LatoLatin-LightItalic.woff') format('woff'), /* Modern Browsers */
+         url('../fonts/lato/LatoLatin-LightItalic.ttf') format('truetype');
+    font-style: italic;
+    font-weight: 300;
+    text-rendering: optimizeLegibility;
+}
+
+
 /*
   Open Sans
 

src/Umbraco.Web.UI.Client/src/less/forms.less

@@ -9,7 +9,7 @@
 
 small.umb-detail,
 label small, .guiDialogTiny {
-  color: @grayMed !important;
+  color: @gray-5 !important;
   text-decoration: none;
   display: block;
   font-weight: normal;
@@ -19,11 +19,12 @@ label small, .guiDialogTiny {
 label.control-label, .control-label {
   padding: 0 10px 0 0 !important;
   font-weight: bold;
+  color: @black;
 }
 
 
 .umb-status-label{
-    color: @gray !important;
+    color: @gray-3 !important;
   }
 
 
@@ -55,19 +56,19 @@ label.control-label, .control-label {
     cursor:pointer;
 }
 .form-search a:hover{
-    color: @gray;
+    color: @gray-3;
 }
 .form-search h4 {
-    color: @gray;
+    color: @gray-3;
 }
 .form-search small {
-    color: @grayLight;
+    color: @gray-8;
 }
 .form-search .icon, .form-search .icon-search {
   position: absolute;
   top: 6px;
   left: 4px;
-  color: @grayLight;
+  color: @gray-8;
 }
 
 .form-search .icon-search {
@@ -78,7 +79,7 @@ label.control-label, .control-label {
   width: 90%;
   font-size: @fontSizeLarge;
   font-weight: 400;
-  border: 1px solid @grayLight;
+  border: 1px solid @gray-8;
   padding: 4px 0px 4px 16px;
   padding-left: 25px !Important;
   line-height: 22px;
@@ -88,12 +89,12 @@ label.control-label, .control-label {
 
 .form-search .search-input {
     font-weight: bold;
-    border-color: @grayLight;
+    border-color: @gray-8;
 
     &:hover,
     &:focus,
     &:focus:hover {
-        border-color: #ccc;
+        border-color: @gray-7;
     }
 
     &:-moz-placeholder {
@@ -136,12 +137,12 @@ legend {
   line-height: @baseLineHeight * 2;
   color: @grayDark;
   border: 0;
-  border-bottom: 1px solid #e5e5e5;
+  border-bottom: 1px solid @gray-8;
 
   // Small
   small {
     font-size: @baseLineHeight * .75;
-    color: @grayLight;
+    color: @gray-8;
   }
 }
 
@@ -195,7 +196,7 @@ input[type="color"],
   margin-bottom: @baseLineHeight / 2;
   font-size: @baseFontSize;
   line-height: @baseLineHeight;
-  color: @gray;
+  color: @gray-3;
   .border-radius(@inputBorderRadius);
   vertical-align: middle;
   box-sizing: border-box;
@@ -304,7 +305,7 @@ input[type="checkbox"]:focus {
 // Make uneditable inputs look inactive
 .uneditable-input,
 .uneditable-textarea {
-  color: @grayLight;
+  color: @gray-8;
   background-color: darken(@inputBackground, 1%);
   border-color: @inputBorder;
   .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
@@ -389,6 +390,8 @@ textarea {
 .input-xlarge     { width: 270px; }
 .input-xxlarge    { width: 530px; }
 
+input.input--no-border { border: none; }
+
 // Grid style input sizes
 input[class*="span"],
 select[class*="span"],
@@ -486,7 +489,7 @@ input[type="checkbox"][readonly] {
 //val-highlight directive styling
 .highlight-error {
     color: @formErrorText !important;
-    border-color: #ee5f5b !important;
+    border-color: @red-l1 !important;
 }
 
 //disable the glowing border for the umb-content-name
@@ -512,7 +515,7 @@ input[type="checkbox"][readonly] {
   margin-top: @baseLineHeight;
   margin-bottom: @baseLineHeight;
   background-color: @formActionsBackground;
-  border-top: 1px solid #e5e5e5;
+  border-top: 1px solid @gray-8;
   .clearfix(); // Adding clearfix to allow for .pull-right button containers
 }
 
@@ -584,8 +587,8 @@ input[type="checkbox"][readonly] {
     line-height: @baseLineHeight;
     text-align: center;
     text-shadow: 0 1px 0 @white;
-    background-color: @grayLighter;
-    border: 1px solid #ccc;
+    background-color: @gray-10;
+    border: 1px solid @gray-8;
   }
   .add-on,
   .btn,

src/Umbraco.Web.UI.Client/src/less/forms/umb-validation-label.less

@@ -2,7 +2,7 @@
    position: relative;
    padding: 1px 5px;
    background: @red;
-   color: white;
+   color: @white;
    font-size: 10px;
    line-height: 1.5em;
 }

src/Umbraco.Web.UI.Client/src/less/gridview.less

@@ -13,8 +13,8 @@
 
  .usky-grid .ui-sortable-helper  {
      position:absolute !important;
-     border: dashed 1px #000 !important;
-     background: #ccc;
+     border: dashed 1px @black !important;
+     background: @gray-7;
      opacity: 0.4;
      height: 80px !important;
      width: 160px !important;
@@ -29,7 +29,7 @@
  .usky-grid .ui-sortable-helper *{
      border: none !important;
      background: none !important;
-     color: #999 !important;
+     color: @gray-5 !important;
      padding: 0 !important;
      margin: 0 !important;
  }
@@ -39,19 +39,19 @@
  }
 
  .usky-grid .ui-sortable-placeholder{
-     border: 2px dashed @grayLight;
+     border: 2px dashed @gray-8;
      padding: 20px;
      font-family: icomoon;
      text-align: center;
      font-size: 85px;
      line-height: 65px;
-     color: @gray;
+     color: @gray-3;
      vertical-align: middle;
-     background-color:@grayLighter;
+     background-color:@gray-10;
  }
 
  .usky-grid .ui-sortable-placeholder:hover{
-     border-color: @gray;
+     border-color: @gray-3;
  }
 
  .usky-grid .ui-sortable-placeholder:before{
@@ -86,7 +86,7 @@
  }
 
  .usky-grid .tb:hover .td{
-     border-right:1px dashed rgba(182, 182, 182, 0.3);
+     border-right:1px dashed @gray-9;
  }
  .usky-grid  .td.last {
      border-right:1px dashed rgba(182, 182, 182, 0.0) !important;
@@ -249,11 +249,11 @@
 }
 
 .usky-grid .infohighlight, .usky-grid  .td.last.infohighlight{
-     border: 1px dashed @blue !important;
+     border: 1px dashed @turquoise !important;
 }
 
 .usky-grid .warnhighlight > ins.item-label{border-color: @red; color: @red;}
-.usky-grid .infohighlight > ins.item-label{border-color: @blue; color: @blue;}
+.usky-grid .infohighlight > ins.item-label{border-color: @turquoise; color: @turquoise;}
 
 
 .usky-grid ins.item-label {
@@ -264,10 +264,10 @@
     padding: 0px 7px;
     display:none;
     font-size:0.8em;
-    background-color: white;
-    color: @grayLight;
-    border: 1px dashed @grayLight;
-    border-bottom: 1px solid white !important;
+    background-color: @white;
+    color: @gray-8;
+    border: 1px dashed @gray-8;
+    border-bottom: 1px solid @white !important;
     height: 20px;
     overflow: hidden;
 }
@@ -278,7 +278,7 @@
 }
 
 .usky-grid .usky-control-inner.selectedControl , .usky-grid .usky-row-inner.selectedRow{
-    border: 1px dashed @grayLight;
+    border: 1px dashed @gray-8;
 
     > ins.item-label {
         display: block;
@@ -301,12 +301,12 @@
 .usky-grid  .usky-control-placeholder .placeholder{
     font-size: 14px; opacity: 0.7; text-align: left;
     padding: 5px;
-    border:1px solid rgba(182, 182, 182, 0.3);
+    border:1px solid @gray-8;
     height: 20px;
 }
 
 .usky-grid  .usky-control-placeholder:hover .placeholder{
-    border:1px solid rgba(182, 182, 182, 0.8);
+    border:1px solid @gray-7;
 }
 
 
@@ -321,13 +321,13 @@
     padding: 20px;
     padding-bottom: 30px;
     position: relative;
-    background-color: white;
-    border: 4px dashed @grayLighter;
+    background-color: @white;
+    border: 4px dashed @gray-10;
     text-align: center;
     text-align: -moz-center;
 }
 .usky-grid .usky-editor-placeholder i{
-    color: @grayLighter;
+    color: @gray-10;
     font-size: 85px;
     line-height: 85px;
     display: block;
@@ -342,10 +342,10 @@
      display: block;
      overflow: hidden;
      border: none;
-     background: #fff;
+     background: @white;
      outline: none;
      resize: none;
-     color: @gray;
+     color: @gray-3;
  }
 
 .usky-grid .usky-cell-rte textarea{
@@ -356,7 +356,7 @@
      display: block;
      overflow: hidden;
      border: none;
-     background: #fff;
+     background: @white;
      outline: none;
      width: 98%;
      resize: none;
@@ -378,8 +378,8 @@
      display: inline-block;
      cursor: pointer;
      border-radius: 200px;
-     background: rgba(255,255,255, 1);
-     border:1px solid rgb(182, 182, 182);
+     background: @white;
+     border:1px solid @gray-7;
      margin: 2px;
  }
 
@@ -395,15 +395,15 @@
   }
 
  .usky-grid .iconBox:hover, .usky-grid .iconBox:hover *{
-          background: @blue !important;
-          color: white !important;
-          border-color: @blue !important;
+          background: @turquoise !important;
+          color: @white !important;
+          border-color: @turquoise !important;
           text-decoration:none;
  }
 
  .usky-grid  .iconBox a:hover {
      text-decoration:none;
-     color: white !important;
+     color: @white !important;
  }
 
  .usky-grid  .iconBox.selected {
@@ -443,8 +443,8 @@
  }
 
  .usky-grid  .help-text {
-     background: @grayLighter;
-     color: @gray;
+     background: @gray-10;
+     color: @gray-3;
      font-size: 14px;
      padding: 10px 20px 10px 20px;
      border-radius: 15px;
@@ -474,8 +474,8 @@
  }
 
  .usky-grid .mce-toolbar {
-     border: 1px solid rgba(207, 207, 207, 0.7);
-     background-color: rgba(250, 250, 250, 1);
+     border: 1px solid @gray-8;
+     background-color: @gray-10;
      z-index: 100;
      display: inline-block;
      float: left;
@@ -496,11 +496,11 @@
      background: transparent !important;
  }
  .usky-grid  .mce-floatpanel {
-     background-color: #F7F7F7 !important;
+     background-color: @gray-10 !important;
  }
 
 .usky-cell-rte{
-    border: 1px solid @grayLighter;
+    border: 1px solid @gray-10;
 }
 
  // MEDIA EDITOR
@@ -530,7 +530,7 @@
      font-size: 10px;
      padding: 0;
      margin: 5px 5px 0 0;
-     color: #808080;
+     color: @gray-5;
  }
 
 
@@ -589,15 +589,15 @@
  }
 
  .usky-grid .uSky-templates-template a.tb:hover {
-     border:5px solid @blue;
+     border:5px solid @turquoise;
  }
 
  .usky-grid .uSky-templates-template .tb {
      width:100%;
      height:150px;
      padding:10px;
-     background-color: @grayLighter;
-     border: 5px solid @grayLight;
+     background-color: @gray-10;
+     border: 5px solid @gray-8;
      cursor:pointer;
      position: relative;
  }
@@ -609,16 +609,16 @@
 
  .usky-grid .uSky-templates-template .tb .uSky-templates-column {
      height:100%;
-     border: 1px dashed @grayLight;
+     border: 1px dashed @gray-8;
      border-right: none;
  }
 
  .usky-grid .uSky-templates-template .tb .uSky-templates-column.last {
-     border-right: 1px dashed @grayLight !important;
+     border-right: 1px dashed @gray-8 !important;
  }
 
  .usky-grid a.uSky-templates-column:hover, .usky-grid a.uSky-templates-column.selected{
-    background-color: @blue;
+    background-color: @turquoise;
  }
 
 
@@ -656,7 +656,7 @@
 		box-sizing: border-box;
 		width: 125px;
 		margin: 35px 40px 15px 0;
-		border: 2px solid @grayLight; /* @grayLight */
+		border: 2px solid @gray-8; /* @grayLight */
 		transition: border 200ms linear;
 
         &.prevalues-rows {
@@ -672,7 +672,7 @@
         }
 
 		&:hover {
-			border-color: @blue;
+			border-color: @turquoise;
 			cursor: pointer;
 		}
 
@@ -692,11 +692,11 @@
 
 		.preview-col {
 			height: 180px;
-			border: dashed 1px @grayLight;
+			border: dashed 1px @gray-8;
 		}
 
 		.preview-cell {
-			background-color: @grayLighter;
+			background-color: @gray-10;
 		}
 		.preview-overlay {
 			display: none;
@@ -731,7 +731,7 @@
 			    display: block;
 			    width: 100%;
 			    height: 100%;
-			    background-color: @grayLight; /* @grayLight */
+			    background-color: @gray-8; /* @grayLight */
 			    margin: 0 1px 1px 0;
 		    }
 	    }
@@ -752,7 +752,7 @@
         top: 0;
         box-sizing: border-box;
         left: 0;
-        border: 3px solid white;
+        border: 3px solid @white;
 	}
 }
 
@@ -764,10 +764,10 @@
      width: 360px;
      height: 380px;
      overflow: auto;
-     border: 1px solid #ccc;
+     border: 1px solid @gray-8;
      margin-top: -270px;
      margin-left: -150px;
-     background: white;
+     background: @white;
      padding: 7px;
      top: 0;
      left: 50%;
@@ -779,8 +779,8 @@
 
 
  .usky-grid .cell-tools-menu h5{
-     border-bottom: 1px solid #d9d9d9;
-     color: #999;
+     border-bottom: 1px solid @gray-8;
+     color: @gray-6;
      padding: 10px;
      margin-top: 0;
  }
@@ -798,23 +798,23 @@
      margin: 5px;
      padding: 5px;
      overflow: hidden;
-     font-size: 11px;
+     font-size: 12px;
  }
 
  .usky-grid .elements li:hover, .usky-grid .elements li:hover *{
-     background: #2e8aea;
-     color: white;
+     background: @turquoise;
+     color: @white;
  }
 
  .usky-grid .elements a{
-     color: #222;
+     color: @gray-2;
      text-decoration: none;
  }
 
  .usky-grid .elements i{
      font-size: 30px;
      line-height: 50px;
-     color: #999;
+     color: @gray-5;
      display: block
  }
 
@@ -845,7 +845,7 @@
 }
 
 .usky-grid-configuration .uSky-templates .uSky-templates-template span{
-    background: @grayLight;
+    background: @gray-8;
     display: inline-block;
 }
 
@@ -857,8 +857,8 @@
     display: block;
     float: left;
     margin-left: -1px;
-    border: 1px white solid !important;
-    background: @grayLight;
+    border: 1px @white solid !important;
+    background: @gray-8;
 }
 
 .usky-grid-configuration .uSky-templates-column.last{
@@ -869,9 +869,9 @@
     text-align: center;
     font-size: 20px;
     line-height: 70px;
-    color: #ccc;
+    color: @gray-8;
     text-decoration: none;
-    background: white;
+    background: @white;
 }
 
 .usky-grid-configuration .mainTdpt{

src/Umbraco.Web.UI.Client/src/less/hacks.less

@@ -94,7 +94,7 @@ iframe, .content-column-body {
 
 .pa-umb-overlay + .pa-umb-overlay {
     padding-top: 30px;
-    border-top: 1px solid @grayLight;
+    border-top: 1px solid @gray-8;
 }
 
 .pa-select-type {
@@ -118,7 +118,7 @@ iframe, .content-column-body {
 }
 
 .pa-access-description {
-    color: #b3b3b3;
+    color: @gray-7;
     margin: 0;
 }
 
@@ -143,12 +143,12 @@ iframe, .content-column-body {
 }
 
 .pa-choose-page a {
-    color: @blue;
+    color: @turquoise-d1;
     font-size: 15px;
 }
 
 .pa-choose-page a:hover, .pa-choose-page a:active, .pa-choose-page a:focus {
-    color: @blueDark;
+    color: @turquoise-d1;
     text-decoration: none;
 }
 
@@ -162,9 +162,9 @@ iframe, .content-column-body {
     font-weight: bold;
     font-size: 13px;
     font-style: italic;
-    background: whitesmoke;
+    background: @gray-10;
     padding: 3px 5px;
-    color: grey;
+    color: @gray-5;
 
     border-bottom: none;
 }
@@ -195,13 +195,12 @@ pre {
   margin: 0 0 @baseLineHeight / 2;
   #font > #family > .monospace;
   font-size: @baseFontSize - 1; // 14px to 13px
-  color: @grayDark;
+  color: @gray-2;
   line-height: @baseLineHeight;
   white-space: pre-line; // 1
   overflow-x: auto; // 1
-  background-color: #f5f5f5;
-  border: 1px solid #ccc; // fallback for IE7-8
-  border: 1px solid rgba(0,0,0,.15);
+  background-color: @gray-10;
+  border: 1px solid @gray-8;
   .border-radius(@baseBorderRadius);
 
 

src/Umbraco.Web.UI.Client/src/less/healthcheck.less

@@ -9,6 +9,7 @@
 .umb-healthcheck-help-text {
 	line-height: 1.6em;
 	margin-bottom: 30px;
+	max-width: 750px;
 }
 
 .umb-healthcheck-action-bar {
@@ -23,20 +24,17 @@
 	display: flex;
 	flex-wrap: wrap;
 	flex-direction: column;
-
-	background: @grayLighter;
+	background: @gray-10;
 	border-radius: 3px;
-
 	padding: 15px 10px;
 	box-sizing: border-box;
-
 	text-align: center;
 	border: 2px solid transparent;
 	height: 100%;
 }
 
 .umb-healthcheck-group:hover {
-	border: 2px solid @blue;
+	border: 2px solid @turquoise;
 	cursor: pointer;
 }
 
@@ -62,14 +60,14 @@
 
 .umb-healthcheck-message {
 	position: relative;
-	background: #fff;
+	background: @white;
     border-radius: 50px;
     display: inline-flex;
 	align-items: center;
 	padding-left: 8px;
 	padding-right: 8px;
     margin-bottom: 5px;
-    color: #000;
+    color: @black;
     font-weight: bold;
 	font-size: 13px;
 }
@@ -80,12 +78,12 @@
 }
 
 .umb-healthcheck-details-link {
-	color: @blue;
+	color: @turquoise-d1;
 }
 
 .umb-healthcheck-details-link:hover {
 	text-decoration: none;
-	color: @blue;
+	color: @turquoise-d1;
 }
 
 
@@ -100,7 +98,6 @@
 	flex: 0 0 auto;
 	flex-basis: 100%;
     max-width: 100%;
-
 	padding: 10px;
 	box-sizing: border-box;
 
@@ -129,7 +126,7 @@
 }
 
 .umb-healthcheck-group__details-group-title {
-	background-color: @blue;
+	background-color: @purple-l1;
 	padding: 10px 20px;
 	display: flex;
 	align-items: center;
@@ -144,7 +141,7 @@
 }
 
 .umb-healthcheck-group__details-checks {
-	border: 1px solid @grayLight;
+	border: 1px solid @gray-8;
 	border-top: none;
 	border-radius: 0 0 3px 3px;
 }
@@ -155,26 +152,26 @@
 
 .umb-healthcheck-group__details-check-title {
 	padding: 15px 20px;
-	background-color: @grayLighter;
+	background-color: @gray-10;
 }
 
 .umb-healthcheck-group__details-check-name {
-	font-size: 14px;
+	font-size: 15px;
 	color: @black;
 	font-weight: bold;
-	margin-bottom: 2px;
+	margin-bottom: 5px;
 }
 
 .umb-healthcheck-group__details-check-description {
-	font-size: 12px;
-	color: @grayMed;
+	font-size: 13px;
+	color: @gray-3;
 	line-height: 1.6em;
 }
 
 .umb-healthcheck-group__details-status {
 	padding: 15px 0;
 	display: flex;
-	border-bottom: 2px solid @grayLighter;
+	border-bottom: 2px solid @gray-10;
 }
 
 .umb-healthcheck-group__details-status-overlay {
@@ -226,7 +223,7 @@
 }
 
 .umb-healthcheck-group__details-status-action {
-	background-color: @grayLighter;
+	background-color: @gray-10;
 	padding: 10px;
 	margin-bottom: 10px;
 	border-radius: 3px;
@@ -238,5 +235,5 @@
 
 .umb-healthcheck-group__details-status-action-description {
 	margin-top: 5px;
-	font-size: 11px;
+	font-size: 12px;
 }