From a71ed61b225e7425e08b946efc9e443b963c2d59 Mon Sep 17 00:00:00 2001
From: mkpaz <quizynox@gmail.com>
Date: Wed, 28 Sep 2022 20:14:54 +0400
Subject: [PATCH] Add CSS elevation helpers

---
 .../sampler/page/showcase/widget/Card.java         |  1 -
 .../sampler/page/showcase/widget/CardSample.java   |  7 ++++++-
 styles/src/components/_titled-pane.scss            | 10 +++-------
 styles/src/general/_extras.scss                    | 14 ++++++++++++++
 styles/src/general/_index.scss                     |  3 ++-
 styles/src/settings/_config.scss                   |  2 ++
 6 files changed, 27 insertions(+), 10 deletions(-)
 create mode 100644 styles/src/general/_extras.scss

diff --git a/sampler/src/main/java/atlantafx/sampler/page/showcase/widget/Card.java b/sampler/src/main/java/atlantafx/sampler/page/showcase/widget/Card.java
index b1dab47..0bbf61d 100644
--- a/sampler/src/main/java/atlantafx/sampler/page/showcase/widget/Card.java
+++ b/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;
diff --git a/sampler/src/main/java/atlantafx/sampler/page/showcase/widget/CardSample.java b/sampler/src/main/java/atlantafx/sampler/page/showcase/widget/CardSample.java
index 8358fe7..0ed9cf9 100644
--- a/sampler/src/main/java/atlantafx/sampler/page/showcase/widget/CardSample.java
+++ b/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);
 
diff --git a/styles/src/components/_titled-pane.scss b/styles/src/components/_titled-pane.scss
index ed64016..72c9ab3 100755
--- a/styles/src/components/_titled-pane.scss
+++ b/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 {
diff --git a/styles/src/general/_extras.scss b/styles/src/general/_extras.scss
new file mode 100644
index 0000000..14cd5b0
--- /dev/null
+++ b/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);
+}
diff --git a/styles/src/general/_index.scss b/styles/src/general/_index.scss
index bc82653..2ade058 100644
--- a/styles/src/general/_index.scss
+++ b/styles/src/general/_index.scss
@@ -1,4 +1,5 @@
 // SPDX-License-Identifier: MIT
 
 @forward "root";
-@forward "text";
\ No newline at end of file
+@forward "text";
+@forward "extras";
\ No newline at end of file
diff --git a/styles/src/settings/_config.scss b/styles/src/settings/_config.scss
index 1f469de..7541a28 100644
--- a/styles/src/settings/_config.scss
+++ b/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;