Add CSS elevation helpers

sampler/src/main/java/atlantafx/sampler/page/showcase/widget/Card.java

@@ -20,7 +20,6 @@ public class Card extends VBox {
     public static final String CSS = """
             .card {
                -fx-background-color: -color-bg-default;
-               -fx-effect: dropshadow(three-pass-box, -color-shadow-default, 8, 0.5, 0, 2);
              }
              .card > .subtitle {
                 -fx-text-fill: -color-fg-muted;

sampler/src/main/java/atlantafx/sampler/page/showcase/widget/CardSample.java

@@ -50,6 +50,7 @@ public class CardSample extends HBox {
 
     private Card textFooterCard() {
         var card = new Card();
+        card.getStyleClass().add(Styles.ELEVATED_1);
         card.setMinWidth(CARD_WIDTH);
         card.setMaxWidth(CARD_WIDTH);
 
@@ -67,6 +68,7 @@ public class CardSample extends HBox {
 
     private Card imageTextCard() {
         var card = new Card();
+        card.getStyleClass().add(Styles.ELEVATED_4);
         card.setMinWidth(CARD_WIDTH);
         card.setMaxWidth(CARD_WIDTH);
 
@@ -83,10 +85,11 @@ public class CardSample extends HBox {
 
     private Card titleTextCard() {
         var card = new Card();
+        card.getStyleClass().add(Styles.INTERACTIVE);
         card.setMinWidth(CARD_WIDTH);
         card.setMaxWidth(CARD_WIDTH);
 
-        card.setTitle("Title");
+        card.setTitle("Interactive");
         card.setSubtitle("Subtitle");
 
         var text = new Text(FAKER.lorem().paragraph());
@@ -97,6 +100,7 @@ public class CardSample extends HBox {
 
     private Card titleImageCard() {
         var card = new Card();
+        card.getStyleClass().add(Styles.ELEVATED_2);
         card.setMinWidth(CARD_WIDTH);
         card.setMaxWidth(CARD_WIDTH);
 
@@ -115,6 +119,7 @@ public class CardSample extends HBox {
 
     private Card quoteCard() {
         var card = new Card();
+        card.getStyleClass().add(Styles.ELEVATED_3);
         card.setMinWidth(CARD_WIDTH);
         card.setMaxWidth(CARD_WIDTH);
 

styles/src/components/_titled-pane.scss

@@ -10,18 +10,14 @@ $padding-y: 10px !default;
 $margin-arrow:   10px !default;
 $margin-content: 20px !default;
 
-// for elevation darker than bg color should be used for both light and dark modes
-$elevation-color:       -color-shadow-default      !default;
-$elevation-interactive: map-get(cfg.$elevation, 2) !default;
-
 .titled-pane {
   -fx-background-color: -color-bg-default;
   -fx-text-fill: -color-fg-default;
   -fx-effect: none;
 
-  @each $level,$radius in cfg.$elevation {
+  @each $level, $radius in cfg.$elevation {
     &.elevated-#{$level} {
-      @include effects.shadow($elevation-color, $radius);
+      @include effects.shadow(cfg.$elevation-color, $radius);
     }
   }
 
@@ -90,7 +86,7 @@ $elevation-interactive: map-get(cfg.$elevation, 2) !default;
   }
 
   &.interactive:hover {
-    @include effects.shadow($elevation-color, $elevation-interactive);
+    @include effects.shadow(cfg.$elevation-color, cfg.$elevation-interactive);
   }
 
   &:show-mnemonics>.mnemonic-underline {

styles/src/general/_extras.scss

@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+
+@use "../settings/config" as cfg;
+@use "../settings/effects";
+
+@each $level, $radius in cfg.$elevation {
+  .elevated-#{$level} {
+    @include effects.shadow(cfg.$elevation-color, $radius);
+  }
+}
+
+.interactive:hover {
+  @include effects.shadow(cfg.$elevation-color, cfg.$elevation-interactive);
+}

styles/src/general/_index.scss

@@ -2,3 +2,4 @@
 
 @forward "root";
 @forward "text";
+@forward "extras";

styles/src/settings/_config.scss

@@ -38,6 +38,8 @@ $icon-size: 18px !default;
 
 // elevation (level : radius)
 $elevation: (1: 2px, 2: 8px, 3: 16px, 4: 20px) !default;
+$elevation-color:       -color-shadow-default  !default;
+$elevation-interactive: map-get($elevation, 2) !default;
 
 // check box, radio button
 $checkbox-mark-size:   0.75em !default;