tablet/atlantafx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add CSS utility classes

Browse Source 
Quick modifiers to change a node's background or add a border without using CSS.
This commit is contained in:
mkpaz 2023-05-25 13:37:50 +04:00
parent f8a62c55ab
commit 31aa45dc05
4 changed files with 143 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
base/src/main/java/atlantafx/base/theme/Styles.java
View File

@ -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}

9
styles/src/components/_label.scss
View File

@ -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;

106
styles/src/general/_extras.scss
View File

@ -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);
}

3
styles/src/general/_text.scss
View File

@ -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