feat(icon): colored variant for bordered or circular

This PR adds a colored variant to circular or bordered icon(s).

Currently the border of a circular or bordered icon is always grey. Even if the icon itself has got a color.
By adding a colored class to such icons the border will inherit its color from the icon itself.

src/definitions/elements/icon.less

@@ -144,6 +144,9 @@ i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) {
       box-shadow: none;
     }
   }
+  &.colored when (@variationIconColored){
+    box-shadow: @coloredBoxShadow;
+  }
 }
 
 & when (@variationIconFlipped) {
@@ -289,6 +292,9 @@ i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) {
       box-shadow: none;
     }
   }
+  &.colored when (@variationIconColored){
+    box-shadow: @coloredBoxShadow;
+  }
 }
 
 & when (@variationIconInverted) {
@@ -445,6 +451,9 @@ i.icons {
     height: @borderedSize;
     box-shadow: @borderedShadow;
     vertical-align: middle;
+    &.colored when (@variationIconColored){
+      box-shadow: @coloredBoxShadow;
+    }
   }
   i.circular.icons {
     border-radius: 500em;

src/themes/default/elements/icon.variables

@@ -70,6 +70,8 @@
 @borderedHorizontalPadding: 0;
 @borderedShadow: 0 0 0 0.1em rgba(0, 0, 0, 0.1) inset;
 
+@coloredBoxShadow: 0 0 0 0.1em currentColor inset;
+
 @cornerIconSize: 0.45em;
 @cornerIconStroke: 1px;
 @cornerIconShadow:

src/themes/default/globals/variation.variables

@@ -71,6 +71,7 @@
 @variationIconLink: true;
 @variationIconCircular: true;
 @variationIconBordered: true;
+@variationIconColored: true;
 @variationIconRotated: true;
 @variationIconFlipped: true;
 @variationIconCorner: true;