Add support of rounded style for TextField and Button

base/src/main/java/atlantafx/base/theme/Styles.java

@@ -54,6 +54,7 @@ public final class Styles {
     public static final String ELEVATED_3  = "elevated-3";
     public static final String ELEVATED_4  = "elevated-4";
     public static final String INTERACTIVE = "interactive";
+    public static final String ROUNDED     = "rounded";
     public static final String STRIPED     = "striped";
 
     // Text

sampler/src/main/java/atlantafx/sampler/page/components/ButtonPage.java

@@ -36,7 +36,8 @@ public class ButtonPage extends AbstractPage {
         grid.add(coloredSamples().getRoot(), 0, 1);
         grid.add(circularButtons().getRoot(), 1, 1);
         grid.add(outlinedSamples().getRoot(), 0, 2);
-        grid.add(disabledSample().getRoot(), 1, 2);
+        grid.add(roundedSamples().getRoot(), 1, 2);
+        grid.add(disabledSample().getRoot(), 0, 3);
 
         userContent.getChildren().addAll(grid);
     }
@@ -174,6 +175,25 @@ public class ButtonPage extends AbstractPage {
         return new SampleBlock("Outlined", content);
     }
 
+    private SampleBlock roundedSamples() {
+        var basicBtn = new Button("Basic");
+        basicBtn.getStyleClass().add(ROUNDED);
+        basicBtn.setOnAction(PRINT_SOURCE);
+
+        var accentBtn = new Button("Accent");
+        accentBtn.getStyleClass().addAll(ROUNDED, ACCENT);
+        accentBtn.setOnAction(PRINT_SOURCE);
+
+        var successBtn = new Button("Success", new FontIcon(Feather.CHECK));
+        successBtn.getStyleClass().addAll(ROUNDED, BUTTON_OUTLINED, SUCCESS);
+        successBtn.setOnAction(PRINT_SOURCE);
+
+        var content = new HBox(10);
+        content.getChildren().addAll(basicBtn, accentBtn, successBtn);
+
+        return new SampleBlock("Rounded", content);
+    }
+
     private SampleBlock disabledSample() {
         var basicBtn = new Button("Basic");
         basicBtn.setDisable(true);

sampler/src/main/java/atlantafx/sampler/page/components/TextFieldPage.java

@@ -1,6 +1,7 @@
 /* SPDX-License-Identifier: MIT */
 package atlantafx.sampler.page.components;
 
+import atlantafx.base.theme.Styles;
 import atlantafx.sampler.page.AbstractPage;
 import atlantafx.sampler.page.SampleBlock;
 import javafx.scene.control.PasswordField;
@@ -54,6 +55,10 @@ public class TextFieldPage extends AbstractPage {
         dangerField.pseudoClassStateChanged(STATE_DANGER, true);
         var dangerBlock = new SampleBlock("Danger", dangerField);
 
+        var roundedField = new TextField("Text");
+        roundedField.getStyleClass().add(Styles.ROUNDED);
+        var roundedBlock = new SampleBlock("Rounded", roundedField);
+
         var flowPane = new FlowPane(20, 20);
         flowPane.getChildren().setAll(
                 basicBlock.getRoot(),
@@ -62,7 +67,8 @@ public class TextFieldPage extends AbstractPage {
                 readonlyBlock.getRoot(),
                 disabledBlock.getRoot(),
                 successBlock.getRoot(),
-                dangerBlock.getRoot()
+                dangerBlock.getRoot(),
+                roundedBlock.getRoot()
         );
 
         return flowPane;

styles/src/components/_button.scss

@@ -366,4 +366,9 @@ $color-danger-outlined-bg-hover:  $color-danger-bg-hover  !default;
       -fx-underline: true;
     }
   }
+
+  &.rounded {
+    -fx-padding: cfg.$padding-y cfg.$padding-x-large cfg.$padding-y cfg.$padding-x-large;
+    -fx-background-radius: 10em;
+  }
 }

styles/src/components/_text-input.scss

@@ -76,6 +76,11 @@ $color-fg-password:    -color-fg-muted  !default;
     -color-input-border-focused: $color-border-danger;
   }
 
+  &.rounded {
+    -fx-padding: cfg.$padding-y cfg.$padding-x-large cfg.$padding-y cfg.$padding-x-large;
+    -fx-background-radius: 10em;
+  }
+
   // input group
   &.left-pill {
     -fx-background-radius: cfg.$border-radius 0 0 cfg.$border-radius;

styles/src/settings/_config.scss

@@ -13,6 +13,7 @@ $font-title-4:           1.25em !default;
 $font-small:             0.8em  !default;
 
 $padding-x:       12px !default;
+$padding-x-large: calc($padding-x * 1.4) !default;
 $padding-y:       8px  !default;
 $graphic-gap:     6px  !default;