Implemented @less colors

src/stylesheets/css/Lungo.widgets.colour.css

@@ -1,5 +1,7 @@
-a.grey,.grey{background-color:#ccc;}
+a.grey,.grey{background-color:#cccccc;}
 a.grey:active{background-color:#b5b5b5;}
+a.black,.grey{background-color:#2c2c2d;}
+a.black:active{background-color:#000000;}
 a.red,.red{background-color:#e33100;}
 a.red:active{background-color:#c5280f;}
 a.lightgreen,.lightgreen{background-color:#91bd09;}
@@ -24,7 +26,8 @@ a.twitter,.twitter:not(span){background-color:#35cdff;}
 a.twitter:active{background-color:#2bafda;}
 a.facebook,.facebook:not(span){background-color:#3b5998;}
 a.facebook:active{background-color:#2c4579;}
-li.grey{box-shadow:inset 3px 0px 0px #ccc;}
+li.grey{box-shadow:inset 3px 0px 0px #cccccc;}
+li.black{box-shadow:inset 3px 0px 0px #2c2c2d;}
 li.red{box-shadow:inset 3px 0px 0px #e33100;}
 li.lightgreen{box-shadow:inset 3px 0px 0px #91bd09;}
 li.green{box-shadow:inset 3px 0px 0px #009600;}

src/stylesheets/less/Lungo.widgets.colour.less

@@ -6,44 +6,49 @@
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
- 
-a.grey, .grey{background-color: #ccc;}
-a.grey:active{background-color: #b5b5b5;}
-a.red, .red{background-color: #e33100;}
-a.red:active{background-color: #c5280f;}
-a.lightgreen, .lightgreen{background-color: #91bd09;}
-a.lightgreen:active{background-color: #7ea41a;}
-a.green, .green{background-color: #009600;}
-a.green:active{background-color: #00770e;}
-a.blue, .blue{background-color: #237fd7;}
-a.blue:active{background-color: #1a69b6;}
-a.arcticblue, .arcticblue{background-color: #2daebf;}
-a.arcticblue:active{background-color: #238e9e;}
-a.orange, .orange{background-color: #ff5c00;}
-a.orange:active{background-color: #da4e15;}
-a.purple, .purple{background-color: #7b658d;}
-a.purple:active{background-color: #574765;}
-a.magenta, .magenta{background-color: #a9014b;}
-a.magenta:active{background-color: #831239;}
-a.pink, .pink{background-color: #ff007f;}
-a.pink:active{background-color: #de2870;}
-a.yellow, .yellow{background-color: #ffb515;}
-a.yellow:active{background-color: #dfa020;}
-a.twitter, .twitter:not(span){background-color: #35cdff;}
-a.twitter:active{background-color: #2bafda;}
-a.facebook, .facebook:not(span){background-color: #3b5998;}
-a.facebook:active{background-color: #2c4579;}
 
-li.grey{ box-shadow: inset 3px 0px 0px #ccc;}
-li.red{ box-shadow: inset 3px 0px 0px #e33100;}
-li.lightgreen{ box-shadow: inset 3px 0px 0px #91bd09;}
-li.green{ box-shadow: inset 3px 0px 0px #009600;}
-li.blue{ box-shadow: inset 3px 0px 0px #237fd7;}
-li.arcticblue{ box-shadow: inset 3px 0px 0px #2daebf;}
-li.orange{ box-shadow: inset 3px 0px 0px #ff5c00;}
-li.purple{ box-shadow: inset 3px 0px 0px #7b658d;}
-li.magenta{ box-shadow: inset 3px 0px 0px #a9014b;}
-li.pink{ box-shadow: inset 3px 0px 0px #ff007f;}
-li.yellow{ box-shadow: inset 3px 0px 0px #ffb515;}
-li.twitter{ box-shadow: inset 3px 0px 0px #35cdff;}
-li.facebook{ box-shadow: inset 3px 0px 0px #3b5998;}
+@import "mixins.less";
+
+a.grey, .grey{background-color: @grey;}
+a.grey:active{background-color: @grey-active;}
+a.black, .grey{background-color: @black;}
+a.black:active{background-color: @black-active;}
+a.red, .red{background-color: @red;}
+a.red:active{background-color: @red-active;}
+a.lightgreen, .lightgreen{background-color: @lightgreen;}
+a.lightgreen:active{background-color: @lightgreen-active;}
+a.green, .green{background-color: @green;}
+a.green:active{background-color: @green-active;}
+a.blue, .blue{background-color: @blue;}
+a.blue:active{background-color: @blue-active;}
+a.arcticblue, .arcticblue{background-color: @arcticblue;}
+a.arcticblue:active{background-color: @arcticblue-active;}
+a.orange, .orange{background-color: @orange;}
+a.orange:active{background-color: @orange-active;}
+a.purple, .purple{background-color: @purple;}
+a.purple:active{background-color: @purple-active;}
+a.magenta, .magenta{background-color: @magenta;}
+a.magenta:active{background-color: @magenta-active;}
+a.pink, .pink{background-color: @pink;}
+a.pink:active{background-color: @pink-active;}
+a.yellow, .yellow{background-color: @yellow;}
+a.yellow:active{background-color: @yellow-active;}
+a.twitter, .twitter:not(span){background-color: @twitter;}
+a.twitter:active{background-color: @twitter-active;}
+a.facebook, .facebook:not(span){background-color: @facebook;}
+a.facebook:active{background-color: @facebook-active;}
+
+li.grey{ box-shadow: inset 3px 0px 0px @grey;}
+li.black{ box-shadow: inset 3px 0px 0px @black;}
+li.red{ box-shadow: inset 3px 0px 0px @red;}
+li.lightgreen{ box-shadow: inset 3px 0px 0px @lightgreen;}
+li.green{ box-shadow: inset 3px 0px 0px @green;}
+li.blue{ box-shadow: inset 3px 0px 0px @blue;}
+li.arcticblue{ box-shadow: inset 3px 0px 0px @arcticblue;}
+li.orange{ box-shadow: inset 3px 0px 0px @orange;}
+li.purple{ box-shadow: inset 3px 0px 0px @purple;}
+li.magenta{ box-shadow: inset 3px 0px 0px @magenta;}
+li.pink{ box-shadow: inset 3px 0px 0px @pink;}
+li.yellow{ box-shadow: inset 3px 0px 0px @yellow;}
+li.twitter{ box-shadow: inset 3px 0px 0px @twitter;}
+li.facebook{ box-shadow: inset 3px 0px 0px @facebook;}