Add label page

Also support settings label color via pseudo-classes.

sampler/src/main/java/atlantafx/sampler/layout/Sidebar.java

@@ -187,6 +187,7 @@ class Sidebar extends StackPane {
                     navLink(DatePickerPage.NAME, DatePickerPage.class),
                     navLink(DialogPage.NAME, DialogPage.class),
                     navLink(HTMLEditorPage.NAME, HTMLEditorPage.class),
+                    navLink(LabelPage.NAME, LabelPage.class),
                     navLink(ListPage.NAME, ListPage.class),
                     navLink(MenuPage.NAME, MenuPage.class),
                     navLink(MenuButtonPage.NAME, MenuButtonPage.class, "SplitMenuButton"),

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

@@ -0,0 +1,74 @@
+/* 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.Label;
+import javafx.scene.layout.FlowPane;
+import javafx.scene.layout.VBox;
+import org.kordamp.ikonli.javafx.FontIcon;
+import org.kordamp.ikonli.material2.Material2AL;
+
+import static atlantafx.sampler.page.SampleBlock.BLOCK_HGAP;
+import static atlantafx.sampler.page.SampleBlock.BLOCK_VGAP;
+
+public class LabelPage extends AbstractPage {
+
+    public static final String NAME = "Label";
+
+    @Override
+    public String getName() { return NAME; }
+
+    public LabelPage() {
+        super();
+        createView();
+    }
+
+    private void createView() {
+        setUserContent(new VBox(
+                PAGE_VGAP,
+                expandingHBox(colorSample())
+        ));
+    }
+
+    private SampleBlock colorSample() {
+        var defaultLabel = new Label("default", createFontIcon());
+
+        var accentLabel = new Label("accent", createFontIcon());
+        accentLabel.getStyleClass().add(Styles.ACCENT);
+
+        var successLabel = new Label("success", createFontIcon());
+        successLabel.getStyleClass().add(Styles.SUCCESS);
+
+        var warningLabel = new Label("warning", createFontIcon());
+        warningLabel.getStyleClass().add(Styles.WARNING);
+
+        var dangerLabel = new Label("danger", createFontIcon());
+        dangerLabel.getStyleClass().add(Styles.DANGER);
+
+        var mutedLabel = new Label("muted", createFontIcon());
+        mutedLabel.getStyleClass().add(Styles.TEXT_MUTED);
+
+        var subtleLabel = new Label("subtle", createFontIcon());
+        subtleLabel.getStyleClass().add(Styles.TEXT_SUBTLE);
+
+        var content = new VBox(
+                BLOCK_VGAP,
+                new Label("You can also use pseudo-classes to set Label color."),
+                new Label("Note that icon inherits label color by default."),
+                new FlowPane(
+                        BLOCK_HGAP, BLOCK_VGAP,
+                        defaultLabel, accentLabel, successLabel, warningLabel, dangerLabel,
+                        mutedLabel, subtleLabel
+                ));
+
+        return new SampleBlock("Colors", content);
+    }
+
+    private FontIcon createFontIcon(String... stylesClass) {
+        var icon = new FontIcon(Material2AL.LABEL);
+        icon.getStyleClass().addAll(stylesClass);
+        return icon;
+    }
+}

styles/src/components/_label.scss

@@ -32,4 +32,94 @@
   &.right-pill {
     -fx-background-radius: 0 cfg.$border-radius cfg.$border-radius 0, 0 cfg.$inner-border-radius cfg.$inner-border-radius 0;
   }
-}
+
+  &.accent {
+    -fx-text-fill: -color-accent-fg;
+
+    #{cfg.$font-icon-selector} {
+      -fx-icon-color: -color-accent-fg;
+      -fx-fill: -color-accent-fg;
+    }
+  }
+
+  &.success {
+    -fx-text-fill: -color-success-fg;
+
+    #{cfg.$font-icon-selector} {
+      -fx-icon-color: -color-success-fg;
+      -fx-fill: -color-success-fg;
+    }
+  }
+
+  &.warning {
+    -fx-text-fill: -color-warning-fg;
+
+    #{cfg.$font-icon-selector} {
+      -fx-icon-color: -color-warning-fg;
+      -fx-fill: -color-warning-fg;
+    }
+  }
+
+  &.danger {
+    -fx-text-fill: -color-danger-fg;
+
+    #{cfg.$font-icon-selector} {
+      -fx-icon-color: -color-danger-fg;
+      -fx-fill: -color-danger-fg;
+    }
+  }
+
+  &.text-muted {
+    -fx-text-fill: -color-fg-muted;
+
+    #{cfg.$font-icon-selector} {
+      -fx-icon-color: -color-fg-muted;
+      -fx-fill: -color-fg-muted;
+    }
+  }
+
+  &.text-subtle {
+    -fx-text-fill: -color-fg-subtle;
+
+    #{cfg.$font-icon-selector} {
+      -fx-icon-color: -color-fg-subtle;
+      -fx-fill: -color-fg-subtle;
+    }
+  }
+
+  &:accent {
+    -fx-text-fill: -color-accent-emphasis;
+
+    #{cfg.$font-icon-selector} {
+      -fx-icon-color: -color-accent-fg;
+      -fx-fill: -color-accent-fg;
+    }
+  }
+
+  &:success {
+    -fx-text-fill: -color-success-emphasis;
+
+    #{cfg.$font-icon-selector} {
+      -fx-icon-color: -color-success-fg;
+      -fx-fill: -color-success-fg;
+    }
+  }
+
+  &:warning {
+    -fx-text-fill: -color-warning-emphasis;
+
+    #{cfg.$font-icon-selector} {
+      -fx-icon-color: -color-warning-fg;
+      -fx-fill: -color-warning-fg;
+    }
+  }
+
+  &:danger {
+    -fx-text-fill: -color-danger-emphasis;
+
+    #{cfg.$font-icon-selector} {
+      -fx-icon-color: -color-danger-fg;
+      -fx-fill: -color-danger-fg;
+    }
+  }
+}

styles/src/general/_text.scss

@@ -46,69 +46,21 @@ Text {
 .text.accent {
   -fx-fill: -color-accent-fg;
 }
-.label.accent {
-  -fx-text-fill: -color-accent-fg;
-
-  #{cfg.$font-icon-selector} {
-    -fx-icon-color: -color-accent-fg;
-    -fx-fill: -color-accent-fg;
-  }
-}
 .text.success {
   -fx-fill: -color-success-fg;
 }
-.label.success {
-  -fx-text-fill: -color-success-fg;
-
-  #{cfg.$font-icon-selector} {
-    -fx-icon-color: -color-success-fg;
-    -fx-fill: -color-success-fg;
-  }
-}
 .text.warning {
   -fx-fill: -color-warning-fg;
 }
-.label.warning {
-  -fx-text-fill: -color-warning-fg;
-
-  #{cfg.$font-icon-selector} {
-    -fx-icon-color: -color-warning-fg;
-    -fx-fill: -color-warning-fg;
-  }
-}
 .text.danger {
   -fx-fill: -color-danger-fg;
 }
-.label.danger {
-  -fx-text-fill: -color-danger-fg;
-
-  #{cfg.$font-icon-selector} {
-    -fx-icon-color: -color-danger-fg;
-    -fx-fill: -color-danger-fg;
-  }
-}
 .text-muted {
   -fx-fill: -color-fg-muted;
 }
-.label.text-muted {
-  -fx-text-fill: -color-fg-muted;
-
-  #{cfg.$font-icon-selector} {
-    -fx-icon-color: -color-fg-muted;
-    -fx-fill: -color-fg-muted;
-  }
-}
 .text-subtle {
   -fx-fill: -color-fg-subtle;
 }
-.label.text-subtle {
-  -fx-text-fill: -color-fg-subtle;
-
-  #{cfg.$font-icon-selector} {
-    -fx-icon-color: -color-fg-subtle;
-    -fx-fill: -color-fg-subtle;
-  }
-}
 
 // font weight
 // JavaFX CSS parser recognizes all values, but JavaFX engine