From ab0c6a5012687bcae808f89aa12fc950980e48ef Mon Sep 17 00:00:00 2001 From: mkpaz Date: Sat, 11 Feb 2023 09:54:52 +0400 Subject: [PATCH] Use border color for checkbox and radio button Font color looks a bit to bright. Also add border thickness to compensate color contrast. --- styles/src/components/_checkbox.scss | 10 ++++++---- styles/src/components/_radio.scss | 7 ++++--- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/styles/src/components/_checkbox.scss b/styles/src/components/_checkbox.scss index 00e60bd..148d1e3 100755 --- a/styles/src/components/_checkbox.scss +++ b/styles/src/components/_checkbox.scss @@ -3,7 +3,9 @@ @use "../settings/config" as cfg; @use "../settings/icons"; -$thickness: 1.3333 !default; +$border-color: -color-border-default !default; +$indeterminate-color: -color-fg-muted !default; +$thickness: 1.5px !default; .check-box { @@ -12,7 +14,7 @@ $thickness: 1.3333 !default; -fx-label-padding: cfg.$checkbox-label-padding cfg.$checkbox-label-padding 0 cfg.$graphic-gap; >.box { - -fx-background-color: -color-fg-default, -color-bg-default; + -fx-background-color: $border-color, -color-bg-default; -fx-background-insets: 0, $thickness; -fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius; -fx-padding: cfg.$checkbox-mark-padding-y cfg.$checkbox-mark-padding-x cfg.$checkbox-mark-padding-y cfg.$checkbox-mark-padding-x; @@ -35,7 +37,7 @@ $thickness: 1.3333 !default; &:indeterminate { >.box { >.mark { - -fx-background-color: -color-fg-default; + -fx-background-color: $indeterminate-color; @include icons.get("minus", false); } } @@ -60,6 +62,6 @@ $thickness: 1.3333 !default; } &:show-mnemonics>.mnemonic-underline { - -fx-stroke: -color-fg-default; + -fx-stroke: $border-color; } } diff --git a/styles/src/components/_radio.scss b/styles/src/components/_radio.scss index 393140c..49ed785 100755 --- a/styles/src/components/_radio.scss +++ b/styles/src/components/_radio.scss @@ -2,7 +2,8 @@ @use "../settings/config" as cfg; -$thickness: 1.3333 !default; +$border-color: -color-border-default !default; +$thickness: 1.5px !default; .radio-button { @@ -12,7 +13,7 @@ $thickness: 1.3333 !default; -fx-label-padding: cfg.$checkbox-label-padding cfg.$checkbox-label-padding 0 cfg.$graphic-gap; >.radio { - -fx-background-color: -color-fg-default, -color-bg-default; + -fx-background-color: $border-color, -color-bg-default; -fx-background-insets: 0, $thickness; -fx-background-radius: 1em; // large value to make sure this remains circular -fx-padding: cfg.$checkbox-mark-padding-y; @@ -52,6 +53,6 @@ $thickness: 1.3333 !default; } &:show-mnemonics>.mnemonic-underline { - -fx-stroke: -color-fg-default; + -fx-stroke: $border-color; } }