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
-alpha066
+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-alpha066")]
+[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 "alpha066"; } }
+        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.Core/Deploy/IFileType.cs

@@ -0,0 +1,32 @@
+using System.IO;
+using System.Threading;
+using System.Threading.Tasks;
+
+namespace Umbraco.Core.Deploy
+{
+    public interface IFileType
+    {
+        Stream GetStream(StringUdi udi);
+
+        Task<Stream> GetStreamAsync(StringUdi udi, CancellationToken token);
+
+        Stream GetChecksumStream(StringUdi udi);
+
+        long GetLength(StringUdi udi);
+
+        void SetStream(StringUdi udi, Stream stream);
+
+        Task SetStreamAsync(StringUdi udi, Stream stream, CancellationToken token);
+
+        bool CanSetPhysical { get; }
+
+        void Set(StringUdi udi, string physicalPath, bool copy = false);
+
+        // this is not pretty as *everywhere* in Deploy we take care of ignoring
+        // the physical path and always rely on Core's virtual IFileSystem but
+        // Cloud wants to add some of these files to Git and needs the path...
+        string GetPhysicalPath(StringUdi udi);
+
+        string GetVirtualPath(StringUdi udi);
+    }
+}

src/Umbraco.Core/Deploy/IFileTypeCollection.cs

@@ -0,0 +1,9 @@
+namespace Umbraco.Core.Deploy
+{
+    public interface IFileTypeCollection
+    {
+        IFileType this[string entityType] { get; }
+
+        bool Contains(string entityType);
+    }
+}

src/Umbraco.Core/IO/ShadowWrapper.cs

@@ -27,7 +27,7 @@ namespace Umbraco.Core.IO
             // on ShadowFileSystemsScope.None - and if None is false then we should be running
             // in a single thread anyways
 
-            var virt = "~/App_Data/Shadow/" + id + "/" + _shadowPath;
+            var virt = "~/App_Data/TEMP/ShadowFs/" + id + "/" + _shadowPath;
             _shadowDir = IOHelper.MapPath(virt);
             Directory.CreateDirectory(_shadowDir);
             var tempfs = new PhysicalFileSystem(virt);

src/Umbraco.Core/Persistence/Repositories/RelationRepository.cs

@@ -73,12 +73,16 @@ namespace Umbraco.Core.Persistence.Repositories
             RelationFactory factory = null;
             var relationTypeId = -1;
 
+            // the ToList() here is important because we are using _relationTypeRepository and we
+            // cannot wait until the result is actually enumerated to do so, because that would
+            // mean we kinda capture the current unit of work and reuse it after it's been disposed
+
             return dtos.Select(x =>
             {
                 if (relationTypeId != x.RelationType)
                     factory = new RelationFactory(_relationTypeRepository.Get(relationTypeId = x.RelationType));
                 return DtoToEntity(x, factory);
-            });
+            }).ToList();
         }
 
         private static IRelation DtoToEntity(RelationDto dto, RelationFactory factory)

src/Umbraco.Core/Persistence/Repositories/TemplateRepository.cs

@@ -270,12 +270,11 @@ namespace Umbraco.Core.Persistence.Repositories
 
             // once content has been set, "template on disk" are not "on disk" anymore
             template.Content = content;
+            SetVirtualPath(template);
 
             if (dto.Design == content) return;
             dto.Design = content;
             Database.Update(dto); // though... we don't care about the db value really??!!
-
-            SetVirtualPath(template);
         }
 
         protected override void PersistDeletedItem(ITemplate entity)

src/Umbraco.Core/Scoping/Scope.cs

@@ -368,13 +368,13 @@ namespace Umbraco.Core.Scoping
 #endif
             }
 
+            var parent = ParentScope;
+            _scopeProvider.AmbientScope = parent;
+
 #if DEBUG_SCOPES
             _scopeProvider.Disposed(this);
 #endif
 
-            var parent = ParentScope;
-            _scopeProvider.AmbientScope = parent;
-
             if (parent != null)
                 parent.ChildCompleted(_completed);
             else

src/Umbraco.Core/Scoping/ScopeProvider.cs

@@ -3,6 +3,7 @@ using System.Collections;
 using System.Collections.Generic;
 using System.Data;
 using System.Runtime.Remoting.Messaging;
+using System.Text;
 using System.Web;
 using Umbraco.Core.Events;
 using Umbraco.Core.Persistence;
@@ -99,18 +100,23 @@ namespace Umbraco.Core.Scoping
             where T : class
         {
             var objectKey = CallContext.LogicalGetData(key).AsGuid();
+            if (objectKey == Guid.Empty) return null;
+
             lock (StaticCallContextObjectsLock)
             {
                 object callContextObject;
                 if (StaticCallContextObjects.TryGetValue(objectKey, out callContextObject))
                 {
 #if DEBUG_SCOPES
-                    //Logging.LogHelper.Debug<ScopeProvider>("GotObject " + objectKey.ToString("N").Substring(0, 8));
+                    Logging.LogHelper.Debug<ScopeProvider>("Got " + typeof(T).Name + " Object " + objectKey.ToString("N").Substring(0, 8));
+                    //Logging.LogHelper.Debug<ScopeProvider>("At:\r\n" + Head(Environment.StackTrace, 24));
 #endif
                     return (T) callContextObject;
                 }
+
+                Logging.LogHelper.Warn<ScopeProvider>("Missed " + typeof(T).Name + " Object " + objectKey.ToString("N").Substring(0, 8));
 #if DEBUG_SCOPES
-                //Logging.LogHelper.Debug<ScopeProvider>("MissedObject " + objectKey.ToString("N").Substring(0, 8));
+                //Logging.LogHelper.Debug<ScopeProvider>("At:\r\n" + Head(Environment.StackTrace, 24));
 #endif
                 return null;
             }
@@ -146,7 +152,8 @@ namespace Umbraco.Core.Scoping
                 lock (StaticCallContextObjectsLock)
                 {
 #if DEBUG_SCOPES
-                    //Logging.LogHelper.Debug<ScopeProvider>("RemoveObject " + objectKey.ToString("N").Substring(0, 8));
+                    Logging.LogHelper.Debug<ScopeProvider>("Remove Object " + objectKey.ToString("N").Substring(0, 8));
+                    //Logging.LogHelper.Debug<ScopeProvider>("At:\r\n" + Head(Environment.StackTrace, 24));
 #endif
                     StaticCallContextObjects.Remove(objectKey);
                 }
@@ -160,7 +167,8 @@ namespace Umbraco.Core.Scoping
                 lock (StaticCallContextObjectsLock)
                 {
 #if DEBUG_SCOPES
-                    //Logging.LogHelper.Debug<ScopeProvider>("AddObject " + objectKey.ToString("N").Substring(0, 8));
+                    Logging.LogHelper.Debug<ScopeProvider>("AddObject " + objectKey.ToString("N").Substring(0, 8));
+                    //Logging.LogHelper.Debug<ScopeProvider>("At:\r\n" + Head(Environment.StackTrace, 24));
 #endif
                     StaticCallContextObjects.Add(objectKey, value);
                 }
@@ -506,7 +514,7 @@ namespace Umbraco.Core.Scoping
             lock (StaticScopeInfosLock)
             {
                 if (StaticScopeInfos.ContainsKey(scope)) throw new Exception("oops: already registered.");
-                //Logging.LogHelper.Debug<ScopeProvider>("Register " + scope.InstanceId.ToString("N").Substring(0, 8));
+                Logging.LogHelper.Debug<ScopeProvider>("Register " + scope.InstanceId.ToString("N").Substring(0, 8));
                 StaticScopeInfos[scope] = new ScopeInfo(scope, Environment.StackTrace);
             }
         }
@@ -524,14 +532,35 @@ namespace Umbraco.Core.Scoping
                     if (context == null) return;
                     throw new Exception("oops: unregistered scope.");
                 }
-                //Logging.LogHelper.Debug<ScopeProvider>("Register context " + (context ?? "null") + " for " + scope.InstanceId.ToString("N").Substring(0, 8));
+                var sb = new StringBuilder();
+                var s = scope;
+                while (s != null)
+                {
+                    if (sb.Length > 0) sb.Append(" < ");
+                    sb.Append(s.InstanceId.ToString("N").Substring(0, 8));
+                    var ss = s as IScopeInternal;
+                    s = ss == null ? null : ss.ParentScope;
+                }
+                Logging.LogHelper.Debug<ScopeProvider>("Register " + (context ?? "null") + " context " + sb);
                 if (context == null) info.NullStack = Environment.StackTrace;
-                //if (context == null)
-                //    Logging.LogHelper.Debug<ScopeProvider>("STACK\r\n" + info.NullStack);
+                //Logging.LogHelper.Debug<ScopeProvider>("At:\r\n" + Head(Environment.StackTrace, 16));
                 info.Context = context;
             }
         }
 
+        private static string Head(string s, int count)
+        {
+            var pos = 0;
+            var i = 0;
+            while (i < count && pos >= 0)
+            {
+                pos = s.IndexOf("\r\n", pos + 1, StringComparison.OrdinalIgnoreCase);
+                i++;
+            }
+            if (pos < 0) return s;
+            return s.Substring(0, pos);
+        }
+
         public void Disposed(IScope scope)
         {
             lock (StaticScopeInfosLock)
@@ -541,7 +570,7 @@ namespace Umbraco.Core.Scoping
                     // enable this by default
                     //Console.WriteLine("unregister " + scope.InstanceId.ToString("N").Substring(0, 8));
                     StaticScopeInfos.Remove(scope);
-                    //Logging.LogHelper.Debug<ScopeProvider>("Remove " + scope.InstanceId.ToString("N").Substring(0, 8));
+                    Logging.LogHelper.Debug<ScopeProvider>("Remove " + scope.InstanceId.ToString("N").Substring(0, 8));
 
                     // instead, enable this to keep *all* scopes
                     // beware, there can be a lot of scopes!

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.Tests/Scheduling/BackgroundTaskRunnerTests2.cs

@@ -0,0 +1,177 @@
+using System;
+using System.Diagnostics;
+using System.Threading;
+using System.Threading.Tasks;
+using NUnit.Framework;
+using Umbraco.Tests.Logging;
+using Umbraco.Web.Scheduling;
+
+namespace Umbraco.Tests.Scheduling
+{
+    [TestFixture]
+    [Timeout(60000)]
+    public class BackgroundTaskRunnerTests2
+    {
+        // this tests was used to debug a background task runner issue that was unearthed by Deploy,
+        // where work items would never complete under certain circumstances, due to threading issues.
+        // (fixed now)
+        //
+        [Test]
+        [Timeout(4000)]
+        public async Task ThreadResumeIssue()
+        {
+            var logger = new ConsoleLogger();
+            var runner = new BackgroundTaskRunner<IBackgroundTask>(new BackgroundTaskRunnerOptions { KeepAlive = true, LongRunning = true }, logger);
+            var work = new ThreadResumeIssueWorkItem();
+            runner.Add(work);
+
+            Console.WriteLine("running");
+            await Task.Delay(1000); // don't complete too soon
+
+            Console.WriteLine("completing");
+
+            // this never returned, never reached "completed" because the same thread
+            // resumed executing the waiting on queue operation in the runner
+            work.Complete();
+            Console.WriteLine("completed");
+
+            Console.WriteLine("done");
+        }
+
+        public class ThreadResumeIssueWorkItem : IBackgroundTask
+        {
+            private TaskCompletionSource<int> _completionSource;
+
+            public async Task RunAsync(CancellationToken token)
+            {
+                _completionSource = new TaskCompletionSource<int>();
+                token.Register(() => _completionSource.TrySetCanceled()); // propagate
+                Console.WriteLine("item running...");
+                await _completionSource.Task.ConfigureAwait(false);
+                Console.WriteLine("item returning");
+            }
+
+            public bool Complete(bool success = true)
+            {
+                Console.WriteLine("item completing");
+                // this never returned, see test
+                _completionSource.SetResult(0);
+                Console.WriteLine("item returning from completing");
+                return true;
+            }
+
+            public void Run()
+            {
+                throw new NotImplementedException();
+            }
+
+            public bool IsAsync { get { return true; } }
+
+            public void Dispose()
+            {}
+        }
+
+        [Test]
+        [Ignore("Only runs in the debugger.")]
+        public async Task DebuggerInterferenceIssue()
+        {
+            var logger = new ConsoleLogger();
+            var runner = new BackgroundTaskRunner<IBackgroundTask>(new BackgroundTaskRunnerOptions { KeepAlive = true, LongRunning = true }, logger);
+            var taskCompleted = false;
+            runner.TaskCompleted += (sender, args) =>
+            {
+                Console.WriteLine("runner task completed");
+                taskCompleted = true;
+            };
+            var work = new DebuggerInterferenceIssueWorkitem();
+
+            // add the workitem to the runner and wait until it is running
+            runner.Add(work);
+            work.Running.Wait();
+
+            // then wait a little bit more to ensure that the WhenAny has been entered
+            await Task.Delay(500);
+
+            // then break
+            // when the timeout triggers, we cannot handle it
+            // taskCompleted value does *not* change & nothing happens
+            Debugger.Break();
+
+            // release after 15s
+            // WhenAny should return the timeout task
+            // and then taskCompleted should turn to true
+            // = debugging does not prevent task completion
+
+            Console.WriteLine("*");
+            Assert.IsFalse(taskCompleted);
+            await Task.Delay(1000);
+            Console.WriteLine("*");
+            Assert.IsTrue(taskCompleted);
+        }
+
+        public class DebuggerInterferenceIssueWorkitem : IBackgroundTask
+        {
+            private readonly SemaphoreSlim _timeout = new SemaphoreSlim(0, 1);
+            private readonly ManualResetEventSlim _running = new ManualResetEventSlim(false);
+
+            private Timer _timer;
+
+            public ManualResetEventSlim Running { get { return _running; } }
+
+            public async Task RunAsync(CancellationToken token)
+            {
+                // timeout timer
+                _timer = new Timer(_ => { _timeout.Release(); });
+                _timer.Change(1000, 0);
+
+                var timeout = _timeout.WaitAsync(token);
+                var source = CancellationTokenSource.CreateLinkedTokenSource(token); // cancels when token cancels
+
+                _running.Set();
+                var task = WorkExecuteAsync(source.Token);
+                Console.WriteLine("execute");
+                var anyTask = await Task.WhenAny(task, timeout).ConfigureAwait(false);
+
+                Console.Write("anyTask: ");
+                Console.WriteLine(anyTask == timeout ? "timeout" : "task");
+
+                Console.WriteLine("return");
+            }
+
+            private async Task WorkExecuteAsync(CancellationToken token)
+            {
+                await Task.Delay(30000);
+            }
+
+            public void Run()
+            {
+                throw new NotImplementedException();
+            }
+
+            public bool IsAsync { get { return true; } }
+
+            public void Dispose()
+            { }
+        }
+
+        [Test]
+        [Ignore("Only runs in the debugger.")]
+        public void TimerDebuggerTest()
+        {
+            var triggered = false;
+            var timer = new Timer(_ => { triggered = true; });
+            timer.Change(1000, 0);
+            Debugger.Break();
+
+            // pause in debugger for 10s
+            // means the timer triggers while execution is suspended
+            // 'triggered' remains false all along
+            // then resume execution
+            // and 'triggered' becomes true, so the trigger "catches up"
+            // = debugging should not prevent triggered code from executing
+
+            Thread.Sleep(200);
+            Assert.IsTrue(triggered);
+        }
+    }
+}

src/Umbraco.Tests/Scheduling/DeployTest.cs

@@ -1,73 +0,0 @@
-using System;
-using System.Threading;
-using System.Threading.Tasks;
-using NUnit.Framework;
-using Umbraco.Tests.Logging;
-using Umbraco.Web.Scheduling;
-
-namespace Umbraco.Tests.Scheduling
-{
-    // THIS REPRODUCES THE DEPLOY ISSUE IN CORE
-    //
-    // the exact same thing also reproduces in playground
-    // so it's not a framework version issue - but something we're doing here
-
-    [TestFixture]
-    [Timeout(4000)]
-    public class Repro
-    {
-        [Test]
-        public async Task ReproduceDeployIssue()
-        {
-            var logger = new ConsoleLogger();
-            var runner = new BackgroundTaskRunner<IBackgroundTask>(new BackgroundTaskRunnerOptions { KeepAlive = true, LongRunning = true }, logger);
-            var work = new SimpleWorkItem();
-            runner.Add(work);
-
-            Console.WriteLine("running");
-            await Task.Delay(1000); // don't complete too soon
-
-            Console.WriteLine("completing");
-
-            // this never returns, never reached "completed" because the same thread
-            // resumes executing the waiting on queue operation in the runner
-            work.Complete();
-            Console.WriteLine("completed");
-
-            Console.WriteLine("done");
-        }
-
-        public class SimpleWorkItem : IBackgroundTask
-        {
-            private TaskCompletionSource<int> _completionSource;
-
-            public async Task RunAsync(CancellationToken token)
-            {
-                _completionSource = new TaskCompletionSource<int>();
-                token.Register(() => _completionSource.TrySetCanceled()); // propagate
-                Console.WriteLine("item running...");
-                await _completionSource.Task.ConfigureAwait(false);
-                Console.WriteLine("item returning");
-            }
-
-            public bool Complete(bool success = true)
-            {
-                Console.WriteLine("item completing");
-                // this never returns, see test
-                _completionSource.SetResult(0);
-                Console.WriteLine("item returning from completing");
-                return true;
-            }
-
-            public void Run()
-            {
-                throw new NotImplementedException();
-            }
-
-            public bool IsAsync { get { return true; } }
-
-            public void Dispose()
-            {}
-        }
-    }
-}

src/Umbraco.Tests/Umbraco.Tests.csproj

@@ -169,7 +169,7 @@
     <Compile Include="Persistence\PetaPocoExpressionsTests.cs" />
     <Compile Include="Persistence\Repositories\LockedRepositoryTests.cs" />
     <Compile Include="Persistence\Repositories\RedirectUrlRepositoryTests.cs" />
-    <Compile Include="Scheduling\DeployTest.cs" />
+    <Compile Include="Scheduling\BackgroundTaskRunnerTests2.cs" />
     <Compile Include="Routing\NiceUrlRoutesTests.cs" />
     <Compile Include="Scoping\EventNameExtractorTests.cs" />
     <Compile Include="Scoping\LeakTests.cs" />

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/init.js

@@ -26,10 +26,35 @@ app.run(['userService', '$log', '$rootScope', '$location', 'navigationService',
         /** execute code on each successful route */
         $rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
 
-            if(current.params.section){
-                $rootScope.locationTitle = current.params.section + " - " + $location.$$host;
+            var deployConfig = Umbraco.Sys.ServerVariables.deploy;
+            var deployEnv, deployEnvTitle;
+            if (deployConfig) {
+                deployEnv = Umbraco.Sys.ServerVariables.deploy.CurrentWorkspace;
+                deployEnvTitle = "(" + deployEnv + ") ";
+            }
+
+            if(current.params.section) {
+
+                //Uppercase the current section, content, media, settings, developer, forms
+                var currentSection = current.params.section.charAt(0).toUpperCase() + current.params.section.slice(1);
+
+                var baseTitle = currentSection + " - " + $location.$$host;
+
+                //Check deploy for Global Umbraco.Sys obj workspace
+                if(deployEnv){
+                    $rootScope.locationTitle = deployEnvTitle + baseTitle;
+                }
+                else {
+                    $rootScope.locationTitle = baseTitle;
+                }
+                
             }
             else {
+
+                if(deployEnv) {
+                     $rootScope.locationTitle = deployEnvTitle + "Umbraco - " + $location.$$host;
+                }
+
                 $rootScope.locationTitle = "Umbraco - " + $location.$$host;
             }
 

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 {