diff --git a/base/src/main/java/atlantafx/base/theme/Styles.java b/base/src/main/java/atlantafx/base/theme/Styles.java index 1884742..e3d8dc9 100644 --- a/base/src/main/java/atlantafx/base/theme/Styles.java +++ b/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: * *
{@code} diff --git a/styles/src/components/_label.scss b/styles/src/components/_label.scss index cc2e9b4..207dd30 100755 --- a/styles/src/components/_label.scss +++ b/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; } } -} \ No newline at end of file +} diff --git a/styles/src/general/_extras.scss b/styles/src/general/_extras.scss index 554bf6f..895d0bb 100644 --- a/styles/src/general/_extras.scss +++ b/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); +} diff --git a/styles/src/general/_text.scss b/styles/src/general/_text.scss index 46c6ce8..c4d4d3e 100755 --- a/styles/src/general/_text.scss +++ b/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