FormFieldTile: simplify box-shadow handling

With the new css variables the box-shadow-properties
can be set individually which makes overriding easier.

eclipse-scout-core/src/style/mixins.less

@@ -30,7 +30,18 @@
   }
 
   .double-drop-shadow(@x1: 0, @y1: 0, @blur1: 0, @spread1: 0, @color1: @palette-black, @x2: 0px, @y2: 6px, @blur2: 13px, @spread2: 0px, @alpha2: @drop-shadow-alpha) {
-    box-shadow: @x1 @y1 @blur1 @spread1 @color1, @x2 @y2 @blur2 @spread2 rgba(0, 0, 0, @alpha2);
+    --box-shadow-1-x: @x1;
+    --box-shadow-1-y: @y1;
+    --box-shadow-1-blur: @blur1;
+    --box-shadow-1-spread: @spread1;
+    --box-shadow-1-color: @color1;
+    --box-shadow-2-x: @x2;
+    --box-shadow-2-y: @y2;
+    --box-shadow-2-blur: @blur2;
+    --box-shadow-2-spread: @spread2;
+    --box-shadow-2-alpha: @alpha2;
+
+    box-shadow: var(--box-shadow-1-x) var(--box-shadow-1-y) var(--box-shadow-1-blur) var(--box-shadow-1-spread) var(--box-shadow-1-color), var(--box-shadow-2-x) var(--box-shadow-2-y) var(--box-shadow-2-blur) var(--box-shadow-2-spread) rgba(0, 0, 0, var(--box-shadow-2-alpha));
   }
 
   .drop-shadow-large(@x: 0px, @y: @drop-shadow-large-y, @blur: @drop-shadow-large-blur, @spread: 0px, @alpha: @drop-shadow-large-alpha) {

eclipse-scout-core/src/tile/fields/FormFieldTile-dark.less

@@ -1,21 +1,25 @@
 /*
- * Copyright (c) 2023 BSI Business Systems Integration AG.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
  *
- * Contributors:
- *     BSI Business Systems Integration AG - initial API and implementation
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
  */
 .tile.dashboard {
   &.inverted,
   &.inverted.color-alternative {
-    #scout.double-drop-shadow(@spread1: 1px, @color1: @dashboard-tile-border-color, @y2: 0px, @blur2: 0px);
+    --box-shadow-1-spread: 1px;
+    --box-shadow-1-color: @dashboard-tile-border-color;
   }
 
   .dimmed-background &.inverted {
-    #scout.drop-shadow(@alpha: @dashboard-tile-drop-shadow-light-alpha);
+    --box-shadow-1-spread: 0;
+
+    &.selected {
+      --box-shadow-1-spread: 2px;
+    }
   }
 
   &.inverted {

eclipse-scout-core/src/tile/fields/FormFieldTile.less

@@ -18,19 +18,22 @@
   #scout.double-drop-shadow(@spread1: 1px, @color1: @dashboard-tile-border-color, @y2: 0px, @blur2: 0px);
 
   &.inverted {
-    #scout.double-drop-shadow(@spread1: 1px, @color1: @tile-default-inverted-background-color, @y2: 0px, @blur2: 0px);
+    --box-shadow-1-color: @tile-default-inverted-background-color;
   }
 
   &.inverted.color-alternative {
-    #scout.double-drop-shadow(@spread1: 1px, @color1: @tile-alternative-inverted-background-color, @y2: 0px, @blur2: 0px);
+    --box-shadow-1-color: @tile-alternative-inverted-background-color;
   }
 
   .dimmed-background & {
-    #scout.drop-shadow(@alpha: @dashboard-tile-drop-shadow-light-alpha);
+    --box-shadow-1-spread: 0;
+    --box-shadow-2-y: @drop-shadow-y;
+    --box-shadow-2-blur: @drop-shadow-blur;
+    --box-shadow-2-alpha: @dashboard-tile-drop-shadow-light-alpha;
 
     &.disabled,
     &.inverted {
-      #scout.drop-shadow(@alpha: @dashboard-tile-drop-shadow-dark-alpha);
+      --box-shadow-2-alpha: @dashboard-tile-drop-shadow-dark-alpha;
     }
   }
 
@@ -346,34 +349,20 @@
   }
 
   &.selected {
-    #scout.double-drop-shadow(@spread1: 2px, @color1: @dashboard-tile-default-selected-border-color, @y2: 0px, @blur2: 0px);
+    --box-shadow-1-spread: 2px;
+    --box-shadow-1-color: @dashboard-tile-default-selected-border-color;
 
     &.inverted {
-      #scout.double-drop-shadow(@spread1: 3px, @color1: @dashboard-tile-default-inverted-selected-border-color, @y2: 0px, @blur2: 0px);
+      --box-shadow-1-spread: 3px;
+      --box-shadow-1-color: @dashboard-tile-default-inverted-selected-border-color;
     }
 
     &.color-alternative {
-      #scout.double-drop-shadow(@spread1: 2px, @color1: @dashboard-tile-alternative-selected-border-color, @y2: 0px, @blur2: 0px);
+      --box-shadow-1-color: @dashboard-tile-alternative-selected-border-color;
     }
 
     &.inverted.color-alternative {
-      #scout.double-drop-shadow(@spread1: 3px, @color1: @dashboard-tile-alternative-inverted-selected-border-color, @y2: 0px, @blur2: 0px);
-    }
-
-    .dimmed-background & {
-      #scout.double-drop-shadow(@spread1: 2px, @color1: @dashboard-tile-default-selected-border-color, @alpha2: @dashboard-tile-drop-shadow-light-alpha);
-
-      &.inverted {
-        #scout.double-drop-shadow(@spread1: 3px, @color1: @dashboard-tile-default-inverted-selected-border-color, @alpha2: @dashboard-tile-drop-shadow-dark-alpha);
-      }
-
-      &.color-alternative {
-        #scout.double-drop-shadow(@spread1: 2px, @color1: @dashboard-tile-alternative-selected-border-color, @alpha2: @dashboard-tile-drop-shadow-light-alpha);
-      }
-
-      &.inverted.color-alternative {
-        #scout.double-drop-shadow(@spread1: 3px, @color1: @dashboard-tile-alternative-inverted-selected-border-color, @alpha2: @dashboard-tile-drop-shadow-dark-alpha);
-      }
+      --box-shadow-1-color: @dashboard-tile-alternative-inverted-selected-border-color;
     }
   }
 }

eclipse-scout-core/src/tile/fields/button/TileButton.less

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
+ * Copyright (c) 2010, 2024 BSI Business Systems Integration AG
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -98,7 +98,7 @@
     --tile-background-color: @tile-button-default-hover-background-color;
 
     .dimmed-background & {
-      #scout.drop-shadow(); // More intense than regular dashboard shadow
+      --box-shadow-2-alpha: @drop-shadow-alpha; // More intense than regular dashboard shadow
     }
   }
 
@@ -176,7 +176,7 @@
   &.disabled {
 
     .dimmed-background & {
-      #scout.drop-shadow(@alpha: @dashboard-tile-drop-shadow-light-alpha);
+      --box-shadow-2-alpha: @dashboard-tile-drop-shadow-light-alpha;
     }
 
     & > .tile-button {