Support 3-character shorthand CSS colors

lib/app/js/directives/variable.js

@@ -9,6 +9,28 @@ angular.module('sgApp')
       link: function(scope) {
         var colorRegex = /#[0-9a-f]{3,6}/i;
         scope.color = {};
+
+        function shorthandFormat(str) {
+          if (str.length === 7 && str[0] === '#' && str[1] == str[2] && str[3] == str[4] && str[5] == str[6]) {
+            return '#' + str[1] + str[3] + str[5];
+          }
+          return str;
+        }
+
+        function extendedFormat(str) {
+          if (str.length === 4 && str[0] === '#') {
+            return '#' + str[1] + str[1] + str[2] + str[2] + str[3] + str[3];
+          }
+          return str;
+        }
+
+        function findColor(str) {
+          var match = colorRegex.exec(str);
+          if (match) {
+            return match[0];
+          }
+        }
+
         scope.hasColor = function(value) {
           return colorRegex.test(value);
         }
@@ -17,17 +39,25 @@ angular.module('sgApp')
         scope.$watch(function() {
           return scope.variable.value;
         }, function(newVal, oldVal) {
-          var match = colorRegex.exec(newVal);
-          if (match) {
-            scope.color.value = match[0];
+          var color = findColor(scope.variable.value);
+          if (color) {
+            // Store original format. This is needed when we store value back
+            scope.color.useShorthand = (color.length === 4);
+            // Since color picker does not support compact format we need to always extend it
+            scope.color.value = extendedFormat(color);
           }
         });
 
         // Set changed color back to the string
         scope.$watch(function() {
           return scope.color.value;
         }, function(newVal, oldVal) {
-          scope.variable.value = scope.variable.value.replace(colorRegex, newVal);
+          var color = newVal;
+          // If color was originally stored in the compact format try to convert it
+          if (scope.color.useShorthand) {
+            color = shorthandFormat(color);
+          }
+          scope.variable.value = scope.variable.value.replace(colorRegex, color);
         });
       }
     };

test/angular/directives/variable.js → test/angular/directives/variable.test.js

@@ -51,4 +51,26 @@ describe('Variable directive', function() {
     $scope.$apply();
     expect($scope.variable.value).to.eql('test #cccccc !default');
   });
+
+  it('should extend colors stored in the compact format', function() {
+    $scope.variable.value = '#c4f';
+    $scope.$apply();
+    expect($scope.color.value).to.eql('#cc44ff');
+  });
+
+  it('should store value back in the compact format if it was originally in that format', function() {
+    $scope.variable.value = '#c4f';
+    $scope.$apply();
+    $scope.color.value = '#ff55dd';
+    $scope.$apply();
+    expect($scope.variable.value).to.eql('#f5d');
+  });
+
+  it('should store value back in the extended format if it was originally in that format', function() {
+    $scope.variable.value = '#cc44ff';
+    $scope.$apply();
+    $scope.color.value = '#ff55dd';
+    $scope.$apply();
+    expect($scope.variable.value).to.eql('#ff55dd');
+  });
 });