Add CSS utility classes

Quick modifiers to change a node's background or add a border without using CSS.

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

@@ -84,6 +84,7 @@ public final class Styles {
 
     public static final String TEXT_MUTED = "text-muted";
     public static final String TEXT_SUBTLE = "text-subtle";
+    public static final String TEXT_ON_EMPHASIS = "text-on-emphasis";
 
     // Pseudo-classes
 
@@ -93,6 +94,39 @@ public final class Styles {
     public static final PseudoClass STATE_DANGER = PseudoClass.getPseudoClass(DANGER);
     public static final PseudoClass STATE_INTERACTIVE = PseudoClass.getPseudoClass(INTERACTIVE);
 
+    // Backgrounds
+
+    public static final String BG_DEFAULT = "bg-default";
+    public static final String BG_INSET = "bg-inset";
+    public static final String BG_SUBTLE = "bg-subtle";
+
+    public static final String BG_NEUTRAL_EMPHASIS_PLUS = "bg-neutral-emphasis-plus";
+    public static final String BG_NEUTRAL_EMPHASIS = "bg-neutral-emphasis";
+    public static final String BG_NEUTRAL_MUTED = "bg-neutral-muted";
+    public static final String BG_NEUTRAL_SUBTLE = "bg-neutral-subtle";
+
+    public static final String BG_ACCENT_EMPHASIS = "bg-accent-emphasis";
+    public static final String BG_ACCENT_MUTED = "bg-accent-muted";
+    public static final String BG_ACCENT_SUBTLE = "bg-accent-subtle";
+
+    public static final String BG_WARNING_EMPHASIS = "bg-warning-emphasis";
+    public static final String BG_WARNING_MUTED = "bg-warning-muted";
+    public static final String BG_WARNING_SUBTLE = "bg-warning-subtle";
+
+    public static final String BG_SUCCESS_EMPHASIS = "bg-success-emphasis";
+    public static final String BG_SUCCESS_MUTED = "bg-success-muted";
+    public static final String BG_SUCCESS_SUBTLE = "bg-success-subtle";
+
+    public static final String BG_DANGER_EMPHASIS = "bg-danger-emphasis";
+    public static final String BG_DANGER_MUTED = "bg-danger-muted";
+    public static final String BG_DANGER_SUBTLE = "bg-danger-subtle";
+
+    // Borders
+
+    public static final String BORDER_DEFAULT = "border-default";
+    public static final String BORDER_MUTED = "border-muted";
+    public static final String BORDER_SUBTLE = "border-subtle";
+
     private Styles() {
         // Default constructor
     }
@@ -239,7 +273,7 @@ public final class Styles {
     }
 
     /**
-     * Converts a CSS string to a Base64-encoded data URI. The resulting string is
+     * Converts a CSS string to the Base64-encoded data URI. The resulting string is
      * an inline data URI that can be applied to any node in the following manner:
      *
      * <pre>{@code}

styles/src/components/_label.scss

@@ -87,6 +87,15 @@
     }
   }
 
+  &.text-on-emphasis {
+    -fx-text-fill: -color-fg-emphasis;
+
+    #{cfg.$font-icon-selector} {
+      -fx-icon-color: -color-fg-emphasis;
+      -fx-fill: -color-fg-emphasis;
+    }
+  }
+
   &:accent {
     -fx-text-fill: -color-accent-emphasis;
 
@@ -122,4 +131,4 @@
       -fx-fill: -color-danger-fg;
     }
   }
-}
+}

styles/src/general/_extras.scss

@@ -3,17 +3,6 @@
 @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);
-}
-
 ///////////////////////////////////////////////////////////////////////////////
 // BBCode                                                                    //
 ///////////////////////////////////////////////////////////////////////////////
@@ -54,6 +43,11 @@ $radius in cfg.$elevation {
 // Ikonli                                                                    //
 ///////////////////////////////////////////////////////////////////////////////
 
+.ikonli-font-icon.text-on-emphasis {
+  -fx-fill: -color-fg-emphasis;
+  -fx-icon-color: -color-fg-emphasis;
+}
+
 .ikonli-font-icon.accent {
   -fx-fill: -color-accent-emphasis;
   -fx-icon-color: -color-accent-emphasis;
@@ -93,3 +87,93 @@ $radius in cfg.$elevation {
   -fx-fill: -color-danger-emphasis;
   -fx-icon-color: -color-danger-emphasis;
 }
+
+///////////////////////////////////////////////////////////////////////////////
+// Utils                                                                     //
+///////////////////////////////////////////////////////////////////////////////
+
+.bg-default {
+  -fx-background-color: -color-bg-default;
+}
+.bg-inset {
+  -fx-background-color: -color-bg-inset;
+}
+.bg-subtle {
+  -fx-background-color: -color-bg-subtle;
+}
+
+.bg-neutral-emphasis-plus {
+  -fx-background-color: -color-neutral-emphasis-plus;
+}
+.bg-neutral-emphasis {
+  -fx-background-color: -color-neutral-emphasis;
+}
+.bg-neutral-muted {
+  -fx-background-color: -color-neutral-muted;
+}
+.bg-neutral-subtle {
+  -fx-background-color: -color-neutral-subtle;
+}
+
+.bg-accent-emphasis {
+  -fx-background-color: -color-accent-emphasis;
+}
+.bg-accent-muted {
+  -fx-background-color: -color-accent-muted;
+}
+.bg-accent-subtle {
+  -fx-background-color: -color-accent-subtle;
+}
+
+.bg-warning-emphasis {
+  -fx-background-color: -color-warning-emphasis;
+}
+.bg-warning-muted {
+  -fx-background-color: -color-warning-muted;
+}
+.bg-warning-subtle {
+  -fx-background-color: -color-warning-subtle;
+}
+
+.bg-success-emphasis {
+  -fx-background-color: -color-success-emphasis;
+}
+.bg-success-muted {
+  -fx-background-color: -color-success-muted;
+}
+.bg-success-subtle {
+  -fx-background-color: -color-success-subtle;
+}
+
+.bg-danger-emphasis {
+  -fx-background-color: -color-danger-emphasis;
+}
+.bg-danger-muted {
+  -fx-background-color: -color-danger-muted;
+}
+.bg-danger-subtle {
+  -fx-background-color: -color-danger-subtle;
+}
+
+.border-default {
+  -fx-border-color: -color-border-default;
+  -fx-border-width: cfg.$border-width;
+}
+.border-muted {
+  -fx-border-color: -color-border-muted;
+  -fx-border-width: cfg.$border-width;
+}
+.border-subtle {
+  -fx-border-color: -color-border-subtle;
+  -fx-border-width: cfg.$border-width;
+}
+
+@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/_text.scss

@@ -61,6 +61,9 @@ Text {
 .text-subtle {
   -fx-fill: -color-fg-subtle;
 }
+.text-on-emphasis {
+  -fx-fill: -color-fg-emphasis;
+}
 
 // font weight
 // JavaFX CSS parser recognizes all values, but JavaFX engine