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

Improve Nord theme

Browse Source 
Redesign slider and pagination to rectangular form.
This commit is contained in:
mkpaz 2022-09-30 15:34:26 +04:00
parent 1286854da5
commit 2716cca2a0
5 changed files with 107 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
sampler/src/main/java/atlantafx/sampler/page/components/SliderPage.java
View File

@ -16,8 +16,8 @@ import static javafx.geometry.Orientation.VERTICAL;
public class SliderPage extends AbstractPage { public class SliderPage extends AbstractPage {
public static final String NAME = "Slider"; public static final String NAME = "Slider";
private static final int SLIDER_SIZE = 200; private static final int SLIDER_SIZE = 180;
private static final int SPACING = 40; private static final int SPACING = 20;
@Override @Override
public String getName() { return NAME; } public String getName() { return NAME; }

8
styles/src/components/_pagination.scss
View File

@ -2,6 +2,8 @@
@use "../settings/icons"; @use "../settings/icons";
$button-radius: 10em !default;
.pagination { .pagination {
-fx-padding: 0; -fx-padding: 0;
-fx-arrow-button-gap: 4; -fx-arrow-button-gap: 4;
@ -55,17 +57,17 @@
-fx-spacing: 0; -fx-spacing: 0;
>.left-arrow-button { >.left-arrow-button {
-fx-background-radius: 10em; -fx-background-radius: $button-radius;
-fx-padding: 0 0.25em 0 0.083em; // center arrow inside the circle -fx-padding: 0 0.25em 0 0.083em; // center arrow inside the circle
} }
>.right-arrow-button { >.right-arrow-button {
-fx-background-radius: 10em; -fx-background-radius: $button-radius;
-fx-padding: 0 0.083em 0 0.25em; // center arrow inside the circle -fx-padding: 0 0.083em 0 0.25em; // center arrow inside the circle
} }
>.bullet-button { >.bullet-button {
-fx-background-radius: 0, 10em, 10em; -fx-background-radius: 0, $button-radius, $button-radius;
-fx-background-color: transparent, -color-border-default, -color-bg-subtle; -fx-background-color: transparent, -color-border-default, -color-bg-subtle;
-fx-background-insets: 0, 5, 6; -fx-background-insets: 0, 5, 6;

123
styles/src/components/_slider.scss
View File

@ -3,21 +3,25 @@
@use "../settings/config" as cfg; @use "../settings/config" as cfg;
@use "sass:math"; @use "sass:math";
$color-thumb: if(cfg.$darkMode, -color-fg-default, -color-accent-emphasis) !default; $color-thumb: if(cfg.$darkMode, -color-fg-default, -color-accent-emphasis) !default;
$color-thumb-border: $color-thumb !default; $color-thumb-border: $color-thumb !default;
$color-track: -color-border-muted !default; $color-thumb-large: if(cfg.$darkMode, $color-thumb, -color-fg-emphasis) !default;
$color-track-progress: -color-accent-emphasis !default; $color-thumb-large-border: if(cfg.$darkMode, $color-thumb, -color-accent-emphasis) !default;
$color-tick: -color-fg-muted !default; $color-track: -color-border-muted !default;
$color-track-progress: -color-accent-emphasis !default;
$color-tick: -color-fg-muted !default;
// this is padding ...
$thumb-size: ( $thumb-size: (
"small": 8px, "small-h" : 8px,
"medium": 10px, "small-w" : 8px,
"large": 12px "medium-h": 10px,
"medium-w": 10px,
"large-h" : 12px,
"large-w" : 12px
) !default; ) !default;
// ... in combination with radius it can be converted to square or rectange
$thumb-radius: 10em !default; $thumb-radius: 10em !default;
$thumb-border-width: 2px !default;
// visual track height (or width) // visual track height (or width)
$track-size: ( $track-size: (
@ -40,27 +44,14 @@ $tick-minor-size: 3px !default;
-color-slider-tick: $color-tick; -color-slider-tick: $color-tick;
&.large { &.large {
-color-slider-thumb: if(cfg.$darkMode, $color-thumb, -color-fg-emphasis); -color-slider-thumb: $color-thumb-large;
-color-slider-thumb-border: if(cfg.$darkMode, $color-thumb, -color-accent-emphasis); -color-slider-thumb-border: $color-thumb-large-border;
} }
>.thumb { >.thumb {
-fx-background-color: -color-slider-thumb-border, -color-slider-thumb; -fx-background-color: -color-slider-thumb-border, -color-slider-thumb;
-fx-background-insets: 0, 2px; -fx-background-insets: 0, 2px;
-fx-background-radius: $thumb-radius; -fx-background-radius: $thumb-radius;
-fx-padding: map-get($thumb-size, "medium");
}
&.small {
>.thumb {
-fx-padding: map-get($thumb-size, "small");
}
}
&.large {
>.thumb {
-fx-padding: map-get($thumb-size, "large");
}
} }
>.track { >.track {
@ -95,39 +86,50 @@ $tick-minor-size: 3px !default;
// center thumb over track horizontally // center thumb over track horizontally
&:horizontal { &:horizontal {
>.thumb {
-fx-padding: map-get($thumb-size, "medium-h") map-get($thumb-size, "medium-w") map-get($thumb-size, "medium-h") map-get($thumb-size, "medium-w");
}
>.track { >.track {
-fx-padding: map-get($thumb-size, "medium") 0 map-get($thumb-size, "medium") 0; -fx-padding: map-get($thumb-size, "medium-h") 0 map-get($thumb-size, "medium-h") 0;
-fx-background-insets: 0, calc(map-get($thumb-size, "medium") - map-get($track-size, "medium")) 0 -fx-background-insets: 0, calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium")) 0
calc(map-get($thumb-size, "medium") - map-get($track-size, "medium")) 0; calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium")) 0;
} }
>.progress { >.progress {
-fx-background-radius: $track-radius; -fx-background-radius: $track-radius;
-fx-background-insets: 0, calc(map-get($thumb-size, "medium") - map-get($track-size, "medium")) 0 -fx-background-insets: 0, calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium")) 0
calc(map-get($thumb-size, "medium") - map-get($track-size, "medium")) 0; calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium")) 0;
} }
} }
&.small:horizontal { &.small:horizontal {
>.thumb {
-fx-padding: map-get($thumb-size, "small-h") map-get($thumb-size, "small-w") map-get($thumb-size, "small-h") map-get($thumb-size, "small-w");
}
>.track { >.track {
-fx-padding: map-get($thumb-size, "small") 0 map-get($thumb-size, "small") 0; -fx-padding: map-get($thumb-size, "small-h") 0 map-get($thumb-size, "small-h") 0;
-fx-background-insets: 0, calc(map-get($thumb-size, "small") - map-get($track-size, "small")) 0 -fx-background-insets: 0, calc(map-get($thumb-size, "small-h") - map-get($track-size, "small")) 0
calc(map-get($thumb-size, "small") - map-get($track-size, "small")) 0; calc(map-get($thumb-size, "small-h") - map-get($track-size, "small")) 0;
} }
>.progress { >.progress {
-fx-padding: map-get($thumb-size, "small") 0 map-get($thumb-size, "small") 0; -fx-padding: map-get($thumb-size, "small-h") 0 map-get($thumb-size, "small-h") 0;
-fx-background-insets: 0, calc(map-get($thumb-size, "small") - map-get($track-size, "small")) 0 -fx-background-insets: 0, calc(map-get($thumb-size, "small-h") - map-get($track-size, "small")) 0
calc(map-get($thumb-size, "small") - map-get($track-size, "small")) 0; calc(map-get($thumb-size, "small-h") - map-get($track-size, "small")) 0;
} }
} }
&.large:horizontal { &.large:horizontal {
>.thumb {
-fx-padding: map-get($thumb-size, "large-h") map-get($thumb-size, "large-w") map-get($thumb-size, "large-h") map-get($thumb-size, "smlargeall-w");
}
>.track { >.track {
-fx-padding: map-get($track-size, "large") 0 map-get($track-size, "large") 0; -fx-padding: map-get($thumb-size, "large-h") 0 map-get($thumb-size, "large-h") 0;
-fx-background-insets: 0; -fx-background-insets: 0, calc(map-get($thumb-size, "large-h") - map-get($track-size, "large")) 0
calc(map-get($thumb-size, "large-h") - map-get($track-size, "large")) 0
} }
>.progress { >.progress {
-fx-padding: map-get($track-size, "large") 0 map-get($track-size, "large") 0; -fx-padding: map-get($thumb-size, "large-h") 0 map-get($thumb-size, "large-h") 0;
-fx-background-insets: 0; -fx-background-insets: 0, calc(map-get($thumb-size, "large-h") - map-get($track-size, "large")) 0
calc(map-get($thumb-size, "large-h") - map-get($track-size, "large")) 0
} }
} }
@ -137,39 +139,50 @@ $tick-minor-size: 3px !default;
// center thumb over track vertically // center thumb over track vertically
&:vertical { &:vertical {
>.thumb {
-fx-padding: map-get($thumb-size, "medium-w") map-get($thumb-size, "medium-h") map-get($thumb-size, "medium-w") map-get($thumb-size, "medium-h");
}
>.track { >.track {
-fx-padding: 0 map-get($thumb-size, "medium") 0 map-get($thumb-size, "medium"); -fx-padding: 0 map-get($thumb-size, "medium-h") 0 map-get($thumb-size, "medium-h");
-fx-background-insets: 0, 0 calc(map-get($thumb-size, "medium") - map-get($track-size, "medium")) -fx-background-insets: 0, 0 calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium"))
0 calc(map-get($thumb-size, "medium") - map-get($track-size, "medium")); 0 calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium"));
} }
>.progress { >.progress {
-fx-background-radius: $thumb-radius $thumb-radius $track-radius $track-radius; -fx-background-radius: $thumb-radius $thumb-radius $track-radius $track-radius;
-fx-background-insets: 0, 0 calc(map-get($thumb-size, "medium") - map-get($track-size, "medium")) -fx-background-insets: 0, 0 calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium"))
0 calc(map-get($thumb-size, "medium") - map-get($track-size, "medium")); 0 calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium"));
} }
} }
&.small:vertical { &.small:vertical {
>.thumb {
-fx-padding: map-get($thumb-size, "small-w") map-get($thumb-size, "small-h") map-get($thumb-size, "small-w") map-get($thumb-size, "small-h");
}
>.track { >.track {
-fx-padding: 0 map-get($thumb-size, "small") 0 map-get($thumb-size, "small"); -fx-padding: 0 map-get($thumb-size, "small-h") 0 map-get($thumb-size, "small-h");
-fx-background-insets: 0, 0 calc(map-get($thumb-size, "small") - map-get($track-size, "small")) -fx-background-insets: 0, 0 calc(map-get($thumb-size, "small-h") - map-get($track-size, "small"))
0 calc(map-get($thumb-size, "small") - map-get($track-size, "small")); 0 calc(map-get($thumb-size, "small-h") - map-get($track-size, "small"));
} }
>.progress { >.progress {
-fx-padding: map-get($thumb-size, "small") 0 map-get($thumb-size, "small") 0; -fx-padding: map-get($thumb-size, "small-h") 0 map-get($thumb-size, "small-h") 0;
-fx-background-insets: 0, 0 calc(map-get($thumb-size, "small") - map-get($track-size, "small")) -fx-background-insets: 0, 0 calc(map-get($thumb-size, "small-h") - map-get($track-size, "small"))
0 calc(map-get($thumb-size, "small") - map-get($track-size, "small")); 0 calc(map-get($thumb-size, "small-h") - map-get($track-size, "small"));
} }
} }
&.large:vertical { &.large:vertical {
>.thumb {
-fx-padding: map-get($thumb-size, "large-w") map-get($thumb-size, "large-h") map-get($thumb-size, "large-w") map-get($thumb-size, "large-h");
}
>.track { >.track {
-fx-padding: 0 map-get($track-size, "large") 0 map-get($track-size, "large"); -fx-padding: 0 map-get($thumb-size, "large-h") 0 map-get($thumb-size, "large-h");
-fx-background-insets: 0; -fx-background-insets: 0, 0 calc(map-get($thumb-size, "large-h") - map-get($track-size, "large"))
0 calc(map-get($thumb-size, "large-h") - map-get($track-size, "large"));
} }
>.progress { >.progress {
-fx-padding: 0 map-get($track-size, "large") 0 map-get($track-size, "large"); -fx-padding: 0 map-get($thumb-size, "large-h") 0 map-get($thumb-size, "large-h");
-fx-background-insets: 0; -fx-background-insets: 0, 0 calc(map-get($thumb-size, "large-h") - map-get($track-size, "large"))
0 calc(map-get($thumb-size, "large-h") - map-get($track-size, "large"));
} }
} }
} }

18
styles/src/nord-dark.scss
View File

@ -151,13 +151,27 @@ $nord16: #B48EAD; // hsl(311, 20.2, 63.1)
$color-menubar-bg-hover: -color-base-7 $color-menubar-bg-hover: -color-base-7
); );
@forward "components/pagination" as pagination-* with (
$button-radius: 1
);
@forward "components/slider" as slider-* with (
$thumb-size: (
"small-h": 8px, "medium-h": 10px, "large-h": 14px,
"small-w": 4px, "medium-w": 4px, "large-w": 4px
),
$track-size: ("small": 2px, "medium": 4px, "large": 12px),
$thumb-radius: 1,
$track-radius: 1
);
@forward "components/toolbar" as toolbar-* with ( @forward "components/toolbar" as toolbar-* with (
$color-bg-selected: -color-base-7 $color-bg-selected: -color-base-7
); );
@forward "components/toggle-switch" as toggle-switch-* with ( @forward "components/toggle-switch" as toggle-switch-* with (
$thumb-radius: 1px, $thumb-radius: 1,
$thumb-area-radius: 1px, $thumb-area-radius: 1,
$thumb-padding: 0.8em, $thumb-padding: 0.8em,
$thumb-area-padding: 0.8em 1.6em 0.8em 1.6em, $thumb-area-padding: 0.8em 1.6em 0.8em 1.6em,
$thumb-border-width: 3px $thumb-border-width: 3px

16
styles/src/nord-light.scss
View File

@ -137,6 +137,22 @@ $nord16: #B48EAD; // hsl(311, 20.2, 63.1)
@use "general"; @use "general";
@forward "components/pagination" as pagination-* with (
$button-radius: 1
);
@forward "components/slider" as slider-* with (
$color-thumb-large: -color-accent-emphasis,
$color-thumb-large-border: -color-accent-emphasis,
$thumb-size: (
"small-h": 8px, "medium-h": 10px, "large-h": 14px,
"small-w": 4px, "medium-w": 4px, "large-w": 4px
),
$track-size: ("small": 2px, "medium": 4px, "large": 12px),
$thumb-radius: 0,
$track-radius: 0
);
@forward "components/toggle-switch" as toggle-switch-* with ( @forward "components/toggle-switch" as toggle-switch-* with (
$thumb-radius: 1px, $thumb-radius: 1px,
$thumb-area-radius: 1px, $thumb-area-radius: 1px,