fix(theme): check real colors to support css variables

This change allows to use CSS variables in custom themes for LESS variables which are basically used in color functions.
Although the themes changed variables are imported after the default theme, the LESS logic still tried to apply a css variable to a color function like "darken()" which of course does not work. It makes #737 complete now.

So this simple order results into "error evaluating darken()", although the variables are immediatly overridden:

@linkColor           : #4183C4;
@linkHoverColor      : darken(saturate(@linkColor, 20), 15, relative);

@linkColor: var(--some-link-color);
@linkHoverColor: var(--some-link-hover-color);
.foo {
  bar: @linkHoverColor;
}
By changing every existing color function call inside the default theme to check for a valid color value it is now possible to completely use CSS variables for a custom theme

@linkColor           : #4183C4;
@linkHoverColor      : if(iscolor(@linkColor), darken(saturate(@linkColor, 20), 15, relative), @linkColor);

@linkColor: var(--some-link-color);
@linkHoverColor: var(--some-link-hover-color);
.foo {
  bar: @linkHoverColor;
}
Succesfully results into

.foo {
  bar: var(--some-link-hover-color);
}
Simply check the above code via lesscss.org/less-preview

The minium LESS Version to support this is 3.12.0, so i had to raise the dependency 3.x version

Author: lubber-de

package.json

@@ -63,7 +63,7 @@
     "gulp-uglify": "^3.0.1",
     "inquirer": "^8.2.0",
     "jquery": "^3.4.0",
-    "less": "^3.7.1 || ^4.0.0",
+    "less": "^3.12.0 || ^4.0.0",
     "map-stream": "^0.1.0",
     "merge-stream": "^2.0.0",
     "mkdirp": "^1.0.4",

src/definitions/modules/popup.less

@@ -833,8 +833,8 @@
         @color: @value;
         @c: @colors[@@color][color];
         @l: @colors[@@color][light];
-        @cl: lighten(@c, @loadingColoredPercent);
-        @ll: darken(@l, @loadingColoredPercent);
+        @cl: if(iscolor(@c), lighten(@c, @loadingColoredPercent), @c);
+        @ll: if(iscolor(@l), darken(@l, @loadingColoredPercent), @l);
 
         & when not (@variationPopupTooltip) {
             .ui.ui.ui.@{color}.popup::before,

src/themes/default/collections/table.variables

@@ -116,32 +116,32 @@
 /* Positive */
 @positiveColor: @positiveTextColor;
 @positiveBoxShadow: @stateMarkerWidth 0 0 @positiveBorderColor inset;
-@positiveBackgroundHover: darken(@positiveBackgroundColor, 3);
-@positiveColorHover: darken(@positiveColor, 3);
+@positiveBackgroundHover: if(iscolor(@positiveBackgroundColor), darken(@positiveBackgroundColor, 3), @positiveBackgroundColor);
+@positiveColorHover: if(iscolor(@positiveColor), darken(@positiveColor, 3), @positiveColor);
 @invertedPositiveColor: @positiveTextColor;
 @invertedPositiveBackgroundColor: @positiveBorderColor;
 
 /* Negative */
 @negativeColor: @negativeTextColor;
 @negativeBoxShadow: @stateMarkerWidth 0 0 @negativeBorderColor inset;
-@negativeBackgroundHover: darken(@negativeBackgroundColor, 3);
-@negativeColorHover: darken(@negativeColor, 3);
+@negativeBackgroundHover: if(iscolor(@negativeBackgroundColor), darken(@negativeBackgroundColor, 3), @negativeBackgroundColor);
+@negativeColorHover: if(iscolor(@negativeColor), darken(@negativeColor, 3), @negativeColor);
 @invertedNegativeColor: @negativeTextColor;
 @invertedNegativeBackgroundColor: @negativeBorderColor;
 
 /* Error */
 @errorColor: @errorTextColor;
 @errorBoxShadow: @stateMarkerWidth 0 0 @errorBorderColor inset;
-@errorBackgroundHover: darken(@errorBackgroundColor, 3);
-@errorColorHover: darken(@errorColor, 3);
+@errorBackgroundHover: if(iscolor(@errorBackgroundColor), darken(@errorBackgroundColor, 3), @errorBackgroundColor);
+@errorColorHover: if(iscolor(@errorColor), darken(@errorColor, 3), @errorColor);
 @invertedErrorColor: @errorTextColor;
 @invertedErrorBackgroundColor: @errorBorderColor;
 
 /* Warning */
 @warningColor: @warningTextColor;
 @warningBoxShadow: @stateMarkerWidth 0 0 @warningBorderColor inset;
-@warningBackgroundHover: darken(@warningBackgroundColor, 3);
-@warningColorHover: darken(@warningColor, 3);
+@warningBackgroundHover: if(iscolor(@warningBackgroundColor), darken(@warningBackgroundColor, 3), @warningBackgroundColor);
+@warningColorHover: if(iscolor(@warningColor), darken(@warningColor, 3), @warningColor);
 @invertedWarningColor: @warningTextColor;
 @invertedWarningBackgroundColor: #eec97e;
 

src/themes/default/elements/button.variables

@@ -247,28 +247,28 @@
 @tertiaryHorizontalPadding: 0.5em;
 @tertiaryLineHeight: 0.2em;
 @tertiaryTextColor: @textColor;
-@tertiaryLineColor: lighten(@tertiaryTextColor, 20%);
+@tertiaryLineColor: if(iscolor(@tertiaryTextColor), lighten(@tertiaryTextColor, 20%), @tertiaryTextColor);
 @tertiaryWithUnderline: false;
 @tertiaryWithOverline: false;
 @tertiaryBackgroundColor: none;
 
 /* Tertiary Hover */
-@tertiaryHoverColor: lighten(fadein(@tertiaryTextColor, 100%), 20%);
-@tertiaryHoverLineColor: lighten(@tertiaryHoverColor, 20%);
+@tertiaryHoverColor: if(iscolor(@tertiaryTextColor), lighten(fadein(@tertiaryTextColor, 100%), 20%), @tertiaryTextColor);
+@tertiaryHoverLineColor: if(iscolor(@tertiaryHoverColor), lighten(@tertiaryHoverColor, 20%), @tertiaryHoverColor);
 @tertiaryHoverWithUnderline: true;
 @tertiaryHoverWithOverline: false;
 @tertiaryHoverBackgroundColor: none;
 
 /* Tertiary Focus */
-@tertiaryFocusColor: lighten(fadein(@tertiaryTextColor, 100%), 20%);
-@tertiaryFocusLineColor: lighten(@tertiaryHoverColor, 20%);
+@tertiaryFocusColor: if(iscolor(@tertiaryTextColor), lighten(fadein(@tertiaryTextColor, 100%), 20%), @tertiaryTextColor);
+@tertiaryFocusLineColor: if(iscolor(@tertiaryHoverColor), lighten(@tertiaryHoverColor, 20%), @tertiaryHoverColor);
 @tertiaryFocusWithUnderline: true;
 @tertiaryFocusWithOverline: false;
 @tertiaryFocusBackgroundColor: none;
 
 /* Tertiary Active */
-@tertiaryActiveColor: lighten(@tertiaryHoverColor, 20%);
-@tertiaryActiveLineColor: lighten(@tertiaryActiveColor, 20%);
+@tertiaryActiveColor: if(iscolor(@tertiaryHoverColor), lighten(@tertiaryHoverColor, 20%), @tertiaryHoverColor);
+@tertiaryActiveLineColor: if(iscolor(@tertiaryActiveColor), lighten(@tertiaryActiveColor, 20%), @tertiaryActiveColor);
 @tertiaryActiveWithUnderline: true;
 @tertiaryActiveWithOverline: false;
 @tertiaryActiveBackgroundColor: none;

src/themes/default/elements/label.variables

@@ -158,7 +158,7 @@
 @ribbonZIndex: 1;
 
 /* Inverted */
-@invertedBackgroundColor: darken(@backgroundColor, 20);
+@invertedBackgroundColor: if(iscolor(@backgroundColor), darken(@backgroundColor, 20), @backgroundColor);
 @invertedBackground: @black;
 @invertedBoxShadowSize: 2px;
 @invertedBorderSize: 1px;