Fix minor theme styling issues

sampler/src/main/java/atlantafx/sampler/page/showcase/OverviewPage.java

@@ -4,6 +4,7 @@ package atlantafx.sampler.page.showcase;
 
 import static javafx.scene.control.ScrollPane.ScrollBarPolicy.AS_NEEDED;
 
+import atlantafx.base.controls.Breadcrumbs;
 import atlantafx.base.controls.MaskTextField;
 import atlantafx.base.theme.Styles;
 import atlantafx.sampler.Resources;
@@ -13,6 +14,7 @@ import java.io.IOException;
 import java.net.URI;
 import java.net.URL;
 import java.util.ResourceBundle;
+import java.util.stream.Stream;
 import javafx.fxml.FXML;
 import javafx.fxml.FXMLLoader;
 import javafx.fxml.Initializable;
@@ -89,10 +91,18 @@ public final class OverviewPage extends ScrollPane implements Page {
 
     public static class Controller implements Initializable {
         public @FXML MaskTextField phoneTf;
+        public @FXML Breadcrumbs<String> breadcrumbs;
 
         @Override
         public void initialize(URL url, ResourceBundle resourceBundle) {
             phoneTf.setText("(415) 273-91-64");
+            var items = Stream.generate(() -> FAKER.science().element())
+                .limit(3)
+                .toList();
+            Breadcrumbs.BreadCrumbItem<String> root = Breadcrumbs.buildTreeModel(
+                items.toArray(String[]::new)
+            );
+            breadcrumbs.setSelectedCrumb(root);
         }
     }
 }

sampler/src/main/resources/atlantafx/sampler/fxml/overview.fxml

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
+<?import atlantafx.base.controls.Breadcrumbs?>
 <?import atlantafx.base.controls.Calendar?>
 <?import atlantafx.base.controls.CustomTextField?>
 <?import atlantafx.base.controls.MaskTextField?>
@@ -210,6 +211,7 @@
                 <RowConstraints vgrow="NEVER" />
                 <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="NEVER" />
             <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="NEVER" />
+            <RowConstraints vgrow="ALWAYS" />
             </rowConstraints>
             <children>
                 <TextField promptText="Prompt" GridPane.columnIndex="1" />
@@ -223,9 +225,10 @@
                     </right>
                 </CustomTextField>
                 <PasswordTextField text="password" GridPane.rowIndex="2" />
-                <TextField editable="false" promptText="Readonly" GridPane.rowIndex="1" />
+                <TextField editable="false" text="Readonly" GridPane.rowIndex="1" />
                 <TextField disable="true" promptText="Disabled" GridPane.columnIndex="1" GridPane.rowIndex="1" />
             <MaskTextField fx:id="phoneTf" mask="(NNN) NNN-NN-NN" GridPane.rowIndex="3" />
+            <Breadcrumbs fx:id="breadcrumbs" maxWidth="1.7976931348623157E308" GridPane.columnSpan="2" GridPane.rowIndex="4" />
             </children>
         </GridPane>
         <GridPane hgap="10.0" layoutX="30.0" layoutY="30.0" vgap="10.0" GridPane.rowIndex="2">
@@ -583,7 +586,7 @@
                     <content>
                         <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
                             <children>
-                                <Tile layoutX="-56.0" layoutY="44.0" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis vehicula elit, ac dictum metus bibendum id. Integer elit purus, varius ac eros eu, convallis ultricies tellus." title="Title" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
+                                <Tile description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis vehicula elit, ac dictum metus bibendum id. Integer elit purus, varius ac eros eu, convallis ultricies tellus." layoutX="-56.0" layoutY="44.0" title="Title" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
                             </children>
                         </AnchorPane>
                     </content>

styles/src/components/_data.scss

@@ -20,6 +20,10 @@ $color-resize-line:  -color-accent-emphasis !default;
 $color-drag-header:  -color-accent-muted    !default;
 $color-drag-overlay: -color-accent-muted    !default;
 
+// warning: setting header size in 'em' sometimes breaks borders
+$header-size-normal: 40px !default;
+$header-size-dense: 34px  !default;
+
 $cell-size-normal: 2.8em !default;
 $cell-size-dense:  2em   !default;
 $cell-padding-x:   0.5em !default;
@@ -250,7 +254,7 @@ $tree-cell-indent: 1.2em !default; // default JavaFX values is 18px
     .column-header {
       -fx-background-color: transparent;
       -fx-background-insets: 0;
-      -fx-size: 2.2em;
+      -fx-size: $header-size-normal;
       -fx-padding: 0;
       -fx-font-weight: bold;
       -fx-border-color: -color-cell-border;
@@ -358,6 +362,12 @@ $tree-cell-indent: 1.2em !default; // default JavaFX values is 18px
   }
 
   &.dense {
+    >.column-header-background {
+      .column-header {
+        -fx-size: $header-size-dense;
+      }
+    }
+
     .table-row-cell {
       -fx-cell-size: $cell-size-dense;
     }
@@ -530,6 +540,12 @@ $tree-cell-indent: 1.2em !default; // default JavaFX values is 18px
   }
 
   &.dense {
+    >.column-header-background {
+      .column-header {
+        -fx-size: $header-size-dense;
+      }
+    }
+
     .tree-table-row-cell {
       -fx-cell-size: $cell-size-dense;
 

styles/src/cupertino-dark.scss

@@ -183,13 +183,7 @@ $opaqueSeparator: rgba(56.0, 56.0, 58.0, 1.0);     // #38383aff
 );
 
 @forward "components/date-picker" as date-picker-* with (
-  $cell-padding-x: 2px,
+  $color-icon: -color-accent-fg,
-  $cell-padding-y: 2px,
-  $cell-size:      2.5em,
-  $color-icon:     -color-accent-fg,
-  $day-cell-font-size: 0.85em,
-  $day-name-font-size: 0.9em,
-  $month-year-font-size: 1em
 );
 
 @forward "components/menu" as menu-* with (

styles/src/cupertino-light.scss

@@ -184,13 +184,7 @@ $opaqueSeparator: rgba(198.0, 198.0, 200.0, 1.0); // #c6c6c8ff
 );
 
 @forward "components/date-picker" as date-picker-* with (
-  $cell-padding-x: 2px,
+  $color-icon: -color-accent-fg,
-  $cell-padding-y: 2px,
-  $cell-size:      2.5em,
-  $color-icon:     -color-accent-fg,
-  $day-cell-font-size: 0.85em,
-  $day-name-font-size: 0.9em,
-  $month-year-font-size: 1em
 );
 
 @forward "components/menu" as menu-* with (

styles/src/dracula.scss

@@ -187,19 +187,11 @@ $ui-yellowLight:     hsla(60, 100%, 75%, 5%);
 );
 
 @forward "components/data" as data-* with (
-  $color-header-bg: -color-bg-default,
-  $color-header-fg: -color-fg-muted,
   $color-cell-bg-selected: -color-accent-subtle
 );
 
 @forward "components/date-picker" as date-picker-* with (
-  $cell-padding-x: 2px,
+  $color-icon: -color-accent-fg,
-  $cell-padding-y: 2px,
-  $cell-size:      2.5em,
-  $color-icon:     -color-accent-fg,
-  $day-cell-font-size: 0.85em,
-  $day-name-font-size: 0.9em,
-  $month-year-font-size: 1em
 );
 
 @forward "components/menu" as menu-* with (
@@ -233,7 +225,8 @@ $ui-yellowLight:     hsla(60, 100%, 75%, 5%);
 );
 
 @forward "components/tab-pane" as tab-pane-* with (
-  $color-lr-bg-selected: -color-base-6
+  $color-lr-bg-selected: -color-base-6,
+  $color-tb-border-selected: -color-warning-emphasis,
 );
 
 @forward "components/text-input" as text-input-* with (