feat(dimmer): support other types of background beside color

While i initially thought about implementing a new dimmer variant based on a different background, i tried to simply change the dimmer variables instead, so my idea would work by just creating a new theme.
However, as the dimmer currently only supports background-color this prevents to use an image or a radial gradient as dimmer background for the existing variables.
That said, this PR changes the background-color property to just background which is compatible with the default color value and allows for themes to use other other type of background than just the color.

Again: This PR does not change the default theme behavior, it just provides the possibility to use other background-types than just the color

Author: lubber-de

src/definitions/modules/dimmer.less

@@ -38,7 +38,7 @@
   vertical-align: @verticalAlign;
   padding: @padding;
 
-  background-color: @backgroundColor;
+  background: @backgroundColor;
   opacity: @hiddenOpacity;
   line-height: @lineHeight;
 
@@ -181,10 +181,10 @@ body.dimmable > .dimmer {
 
   /* Dimmer Color */
   .blurring.dimmable > .dimmer {
-    background-color: @blurredBackgroundColor;
+    background: @blurredBackgroundColor;
   }
   .blurring.dimmable > .inverted.dimmer {
-    background-color: @blurredInvertedBackgroundColor;
+    background: @blurredInvertedBackgroundColor;
   }
 }
 & when (@variationDimmerAligned) {
@@ -206,13 +206,13 @@ body.dimmable > .dimmer {
   ---------------*/
 
   .medium.medium.medium.medium.medium.dimmer {
-    background-color: @mediumBackgroundColor;
+    background: @mediumBackgroundColor;
   }
   .light.light.light.light.light.dimmer {
-    background-color: @lightBackgroundColor;
+    background: @lightBackgroundColor;
   }
   .very.light.light.light.light.dimmer {
-    background-color: @veryLightBackgroundColor;
+    background: @veryLightBackgroundColor;
   }
 }
 
@@ -222,7 +222,7 @@ body.dimmable > .dimmer {
   ---------------*/
 
   .ui.inverted.dimmer {
-    background-color: @invertedBackgroundColor;
+    background: @invertedBackgroundColor;
   }
   .ui.inverted.dimmer > .content,
   .ui.inverted.dimmer > .content > * {
@@ -235,13 +235,13 @@ body.dimmable > .dimmer {
     ---------------*/
 
     .medium.medium.medium.medium.medium.inverted.dimmer {
-      background-color: @mediumInvertedBackgroundColor;
+      background: @mediumInvertedBackgroundColor;
     }
     .light.light.light.light.light.inverted.dimmer {
-      background-color: @lightInvertedBackgroundColor;
+      background: @lightInvertedBackgroundColor;
     }
     .very.light.light.light.light.inverted.dimmer {
-      background-color: @veryLightInvertedBackgroundColor;
+      background: @veryLightInvertedBackgroundColor;
     }
   }
 }
@@ -259,22 +259,22 @@ body.dimmable > .dimmer {
     width: 0;
     height: 0;
     z-index: -100;
-    background-color: @simpleStartBackgroundColor;
+    background: @simpleStartBackgroundColor;
   }
   .dimmed.dimmable > .ui.simple.dimmer {
     overflow: visible;
     opacity: 1;
     width: 100%;
     height: 100%;
-    background-color: @simpleEndBackgroundColor;
+    background: @simpleEndBackgroundColor;
     z-index: @simpleZIndex;
   }
 
   .ui.simple.inverted.dimmer {
-    background-color: @simpleInvertedStartBackgroundColor;
+    background: @simpleInvertedStartBackgroundColor;
   }
   .dimmed.dimmable > .ui.simple.inverted.dimmer {
-    background-color: @simpleInvertedEndBackgroundColor;
+    background: @simpleInvertedEndBackgroundColor;
   }
 }
 

src/definitions/modules/sidebar.less

@@ -162,7 +162,7 @@ body.pushable > .pusher {
   top: 0;
   right: 0;
   content: '';
-  background-color: @dimmerColor;
+  background: @dimmerColor;
   overflow: hidden;
   opacity: 0;
   transition: @dimmerTransition;

src/definitions/views/card.less

@@ -343,7 +343,7 @@
 
 .ui.cards > .card .dimmer,
 .ui.card .dimmer {
-  background-color: @dimmerColor;
+  background: @dimmerColor;
   z-index: @dimmerZIndex;
 }