Use Less variables

Author: TheSyscall

asset/css/callout.less

@@ -31,7 +31,7 @@
 .callout {
   padding: .5em 1em;
   border: 1px solid var(--callout-color);
-  background-color: color-mix(in srgb, var(--callout-color) 10%, transparent);
+  background-color: var(--callout-bg-color);
   border-radius: .25em;
 
   i.icon {
@@ -40,18 +40,22 @@
   }
 
   &.callout-type-info {
-    --callout-color: @color-pending;
+    --callout-color: @callout-info-color;
+    --callout-bg-color: @callout-info-background-color;
   }
 
   &.callout-type-success {
-    --callout-color: @color-ok;
+    --callout-color: @callout-success-color;
+    --callout-bg-color: @callout-success-background-color;
   }
 
   &.callout-type-warning {
-    --callout-color: @color-warning;
+    --callout-color: @callout-warning-color;
+    --callout-bg-color: @callout-warning-background-color;
   }
 
   &.callout-type-error {
-    --callout-color: @color-critical;
+    --callout-color: @callout-error-color;
+    --callout-bg-color: @callout-error-background-color;
   }
 }

asset/css/variables.less

@@ -130,6 +130,16 @@
 @schedule-element-fields-disabled-selected-bg: @base-gray-light;
 @schedule-element-keyboard-note-bg: @base-gray-light;
 
+@callout-success-color: @state-ok;
+@callout-info-color: @base-primary-color;
+@callout-warning-color: @state-warning;
+@callout-error-color: @state-critical;
+
+@callout-success-background-color: fade(@state-ok, 10%);
+@callout-info-background-color: fade(@base-primary-bg, 10%);
+@callout-warning-background-color: fade(@state-warning, 10%);
+@callout-error-background-color: fade(@state-critical, 10%);
+
 @empty-state-color: @base-gray-semilight;
 @empty-state-bar-bg: @base-gray-lighter;