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

Add color variables for slider

Browse Source 
Also use white color for slider thumb in dark mode.
This commit is contained in:
mkpaz 2022-08-19 14:34:02 +04:00
parent 9d307524ae
commit 2e2c7a0e67
2 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,10 +3,16 @@
@use "../settings/config" as cfg; @use "../settings/config" as cfg;
@use "sass:math"; @use "sass:math";
$thumb-color: -color-bg-default !default;
$thumb-color-border: -color-accent-emphasis !default;
$thumb-size: 8px !default; $thumb-size: 8px !default;
$thumb-border-width: 2px !default; $thumb-border-width: 2px !default;
$track-color: -color-accent-emphasis !default;
$track-size: $thumb-size !default; // visual track height (or width) $track-size: $thumb-size !default; // visual track height (or width)
$track-margin: 6px !default; // increases clickable track area $track-margin: 6px !default; // increases clickable track area
$tick-color: -color-fg-muted !default;
$tick-major-size: 5px !default; $tick-major-size: 5px !default;
$tick-minor-size: 3px !default; $tick-minor-size: 3px !default;
@ -15,7 +21,7 @@ $_track-padding: math.div($track-size + $track-margin, 2);
.slider { .slider {
>.thumb { >.thumb {
-fx-background-color: -color-accent-emphasis, -color-bg-default; -fx-background-color: $thumb-color-border, $thumb-color;
-fx-background-insets: 0, 2px; -fx-background-insets: 0, 2px;
-fx-background-radius: 50; -fx-background-radius: 50;
-fx-padding: $thumb-size; -fx-padding: $thumb-size;
@ -24,7 +30,7 @@ $_track-padding: math.div($track-size + $track-margin, 2);
>.track { >.track {
// transparent background increases clickable track area without increasing visual track height, // transparent background increases clickable track area without increasing visual track height,
// it's also used to center track with thumb // it's also used to center track with thumb
-fx-background-color: transparent, -color-accent-emphasis; -fx-background-color: transparent, $track-color;
-fx-background-radius: cfg.$border-radius; -fx-background-radius: cfg.$border-radius;
} }
@ -47,13 +53,13 @@ $_track-padding: math.div($track-size + $track-margin, 2);
// there's slightly noticable difference between axis length and track length, // there's slightly noticable difference between axis length and track length,
// wontfix this via CSS, because it's probably JavaFX calc problem // wontfix this via CSS, because it's probably JavaFX calc problem
>.axis { >.axis {
-fx-tick-label-fill: -color-fg-muted; -fx-tick-label-fill: $tick-color;
-fx-tick-length: $tick-major-size; -fx-tick-length: $tick-major-size;
-fx-minor-tick-length: $tick-minor-size; -fx-minor-tick-length: $tick-minor-size;
>.axis-tick-mark, >.axis-tick-mark,
>.axis-minor-tick-mark { >.axis-minor-tick-mark {
-fx-stroke: -color-fg-muted; -fx-stroke: $tick-color;
} }
} }

5
styles/src/primer-dark.scss
View File

@ -50,6 +50,11 @@
@use "general"; @use "general";
@forward "components/slider" as slider-* with (
$thumb-color: -color-fg-emphasis,
$thumb-color-border: -color-fg-emphasis
);
@forward "components/titled-pane" as titled-pane-* with ( @forward "components/titled-pane" as titled-pane-* with (
$elevation-color: -color-bg-inset $elevation-color: -color-bg-inset
); );