Add inner border radius config (#24)

mkpaz · Oct 27, 2022 · 5d2e39b · 5d2e39b
1 parent 6342b3f
commit 5d2e39b
Show file tree

Hide file tree

Showing 11 changed files with 26 additions and 24 deletions.
diff --git a/styles/src/components/_button.scss b/styles/src/components/_button.scss
@@ -120,7 +120,7 @@ $opacity-hover: 0.9 !default;
 
   -fx-background-color:  -color-button-border, -color-button-bg;
   -fx-background-insets: 0, cfg.$border-width;
-  -fx-background-radius: cfg.$border-radius;
+  -fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius;
   -fx-graphic-text-gap:  cfg.$graphic-gap;
   -fx-text-fill: -color-button-fg;
   -fx-alignment: CENTER;
@@ -168,7 +168,7 @@ $opacity-hover: 0.9 !default;
 
   // toggle button
   &.left-pill {
-    -fx-background-radius: cfg.$border-radius 0 0 cfg.$border-radius;
+    -fx-background-radius: cfg.$border-radius 0 0 cfg.$border-radius, cfg.$inner-border-radius 0 0 cfg.$inner-border-radius;
     -fx-background-insets: 0, cfg.$border-width 0 cfg.$border-width cfg.$border-width;
 
     &:hover,
@@ -188,7 +188,7 @@ $opacity-hover: 0.9 !default;
   }
 
   &.right-pill {
-    -fx-background-radius: 0 cfg.$border-radius cfg.$border-radius 0;
+    -fx-background-radius: 0 cfg.$border-radius cfg.$border-radius 0, 0 cfg.$inner-border-radius cfg.$inner-border-radius 0;
     -fx-background-insets: 0, cfg.$border-width cfg.$border-width cfg.$border-width 0;
 
     &:hover,

diff --git a/styles/src/components/_checkbox.scss b/styles/src/components/_checkbox.scss
@@ -12,7 +12,7 @@
   >.box {
     -fx-background-color: -color-fg-default, -color-bg-default;
     -fx-background-insets: 0, cfg.$border-width;
-    -fx-background-radius: cfg.$border-radius;
+    -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;
     -fx-alignment: CENTER;
 

diff --git a/styles/src/components/_color-picker.scss b/styles/src/components/_color-picker.scss
@@ -32,7 +32,7 @@
 .color-palette {
   -fx-background-color: -color-border-default, -color-bg-default;
   -fx-background-insets: 0, cfg.$border-width;
-  -fx-background-radius: cfg.$border-radius;
+  -fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius;
   -fx-spacing: 10px;
   -fx-padding: 1em;
 
@@ -162,7 +162,7 @@
         -fx-background-color: -color-border-default, -color-bg-default;
         -fx-background-insets: calc(14px - cfg.$border-width) 0 calc(6px - cfg.$border-width) 0,
                                14px cfg.$border-width 6px cfg.$border-width;
-        -fx-background-radius: cfg.$border-radius;
+        -fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius;
       }
 
       >.settings-label {

diff --git a/styles/src/components/_combo-box.scss b/styles/src/components/_combo-box.scss
@@ -20,7 +20,7 @@ $color-list-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-2) !defaul
 @mixin _combo-box-base() {
   -fx-background-color: -color-border-default, -color-bg-default;
   -fx-background-insets: 0, 1;
-  -fx-background-radius: cfg.$border-radius;
+  -fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius;
   -fx-text-fill: -color-fg-default;
   -fx-alignment: CENTER;
   -fx-content-display: LEFT;
@@ -45,7 +45,7 @@ $color-list-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-2) !defaul
 
   // input group
   &.left-pill {
-    -fx-background-radius: cfg.$border-radius 0 0 cfg.$border-radius;
+    -fx-background-radius: cfg.$border-radius 0 0 cfg.$border-radius, cfg.$inner-border-radius 0 0 cfg.$inner-border-radius;
     -fx-background-insets: 0, cfg.$border-width 0 cfg.$border-width cfg.$border-width;
 
     &:focused {
@@ -63,7 +63,7 @@ $color-list-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-2) !defaul
   }
 
   &.right-pill {
-    -fx-background-radius: 0 cfg.$border-radius cfg.$border-radius 0;
+    -fx-background-radius: 0 cfg.$border-radius cfg.$border-radius 0, 0 cfg.$inner-border-radius cfg.$inner-border-radius 0;
     -fx-background-insets: 0, cfg.$border-width cfg.$border-width cfg.$border-width 0;
 
     &:focused {
@@ -92,7 +92,7 @@ $color-list-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-2) !defaul
 
   >.text-field {
     -fx-background-insets: 0, 1 0 1 1;
-    -fx-background-radius: cfg.$border-radius 0 0 cfg.$border-radius;
+    -fx-background-radius: cfg.$border-radius 0 0 cfg.$border-radius, cfg.$inner-border-radius 0 0  cfg.$inner-border-radius;
   }
 
   &:success {
@@ -138,7 +138,7 @@ $color-list-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-2) !defaul
   >.list-view {
     -fx-background-color: -color-border-default, $color-list-bg;
     -fx-background-insets: 0, 1;
-    -fx-background-radius: cfg.$border-radius;
+    -fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius;
 
     >.virtual-flow {
       >.clipped-container {

diff --git a/styles/src/components/_label.scss b/styles/src/components/_label.scss
@@ -22,14 +22,14 @@
   }
 
   &.left-pill {
-    -fx-background-radius: cfg.$border-radius 0 0 cfg.$border-radius;
+    -fx-background-radius: cfg.$border-radius 0 0 cfg.$border-radius, cfg.$inner-border-radius 0 0 cfg.$inner-border-radius;
   }
 
   &.center-pill {
     -fx-background-radius: 0;
   }
 
   &.right-pill {
-    -fx-background-radius: 0 cfg.$border-radius cfg.$border-radius 0;
+    -fx-background-radius: 0 cfg.$border-radius cfg.$border-radius 0, 0 cfg.$inner-border-radius cfg.$inner-border-radius 0;
   }
 }
diff --git a/styles/src/components/_menu-button.scss b/styles/src/components/_menu-button.scss
@@ -151,7 +151,7 @@ $separator-width:    0.75px !default;
     >.arrow-button {
       -fx-background-color: -color-neutral-emphasis-plus;
       -fx-background-insets: cfg.$border-width;
-      -fx-background-radius: cfg.$border-radius;
+      -fx-background-radius: cfg.$inner-border-radius;
       -fx-border-color: transparent;
       -fx-opacity: 0.75;
 
@@ -184,7 +184,7 @@ $separator-width:    0.75px !default;
 
   >.arrow-button {
     -fx-padding: cfg.$padding-y cfg.$padding-x cfg.$padding-y cfg.$padding-x;
-    -fx-background-radius: 0 cfg.$border-radius cfg.$border-radius 0;
+    -fx-background-radius: 0 cfg.$inner-border-radius cfg.$inner-border-radius 0;
     -fx-border-color: -color-button-fg;
     -fx-border-width: 0 0 0 $separator-width;
     -fx-border-insets: calc(cfg.$border-width + 6px) 0 calc(cfg.$border-width + 6px) 0;

diff --git a/styles/src/components/_menu.scss b/styles/src/components/_menu.scss
@@ -157,7 +157,7 @@ $separator-padding:       map-get(cfg.$separators, "small") !default;
   -fx-background-color: -color-border-muted, $color-menuitem-bg;
   -fx-background-insets: 0, 1;
   -fx-padding: cfg.$popup-padding-y cfg.$popup-padding-x cfg.$popup-padding-y cfg.$popup-padding-x;
-  -fx-background-radius: cfg.$border-radius;
+  -fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius;
   @include effects.shadow(-color-shadow-default, cfg.$popup-shadow-radius, cfg.$popup-shadow-spread);
 
   // no idea what's that thing and how to trigger its appearance

diff --git a/styles/src/components/_text-input.scss b/styles/src/components/_text-input.scss
@@ -38,7 +38,7 @@ $color-fg-password: -color-fg-muted !default;
 
   -fx-background-color: -color-input-border, -color-input-bg;
   -fx-background-insets: 0, cfg.$border-width;
-  -fx-background-radius: cfg.$border-radius;
+  -fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius;
   -fx-text-fill: -color-input-fg;
 
   -fx-highlight-fill: -color-input-bg-highlight;
@@ -78,7 +78,7 @@ $color-fg-password: -color-fg-muted !default;
 
   // input group
   &.left-pill {
-    -fx-background-radius: cfg.$border-radius 0 0 cfg.$border-radius;
+    -fx-background-radius: cfg.$border-radius 0 0 cfg.$border-radius, cfg.$inner-border-radius 0 0 cfg.$inner-border-radius;
     -fx-background-insets: 0, cfg.$border-width 0 cfg.$border-width cfg.$border-width;
 
     &:focused {
@@ -96,7 +96,7 @@ $color-fg-password: -color-fg-muted !default;
   }
 
   &.right-pill {
-    -fx-background-radius: 0 cfg.$border-radius cfg.$border-radius 0;
+    -fx-background-radius: 0 cfg.$border-radius cfg.$border-radius 0, 0 cfg.$inner-border-radius cfg.$inner-border-radius 0;
     -fx-background-insets: 0, cfg.$border-width cfg.$border-width cfg.$border-width 0;
 
     &:focused {

diff --git a/styles/src/components/_titled-pane.scss b/styles/src/components/_titled-pane.scss
@@ -77,15 +77,15 @@ $margin-content-dense: 10px !default;
   // and '.content' and then remove one of those adjacent borders.
   &:expanded {
     >.title {
-      -fx-background-radius: cfg.$border-radius cfg.$border-radius 0 0;
+      -fx-background-radius: cfg.$border-radius cfg.$border-radius 0 0, cfg.$inner-border-radius cfg.$inner-border-radius 0 0;
       -fx-background-insets: 0, cfg.$border-width cfg.$border-width 0 cfg.$border-width;
     }
   }
 
   &:collapsed {
     >.title {
       -fx-background-insets: 0, cfg.$border-width;
-      -fx-background-radius: cfg.$border-radius;
+      -fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius;
     }
   }
 

diff --git a/styles/src/components/_tooltip.scss b/styles/src/components/_tooltip.scss
@@ -15,7 +15,7 @@ $padding-y: cfg.$padding-y !default;
   -fx-background-color: $color-border, $color-bg;
   -fx-background-insets: 0, cfg.$border-width;
   -fx-text-fill: $color-fg;
-  -fx-background-radius: cfg.$border-radius;
+  -fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius;
   -fx-padding: $padding-y $padding-x $padding-y $padding-x;
   -fx-opacity: $opacity;
   @include effects.shadow(-color-shadow-default, cfg.$popup-shadow-radius, cfg.$popup-shadow-spread);

diff --git a/styles/src/settings/_config.scss b/styles/src/settings/_config.scss
@@ -1,5 +1,7 @@
 // SPDX-License-Identifier: MIT
 
+@use "sass:math";
+
 $darkMode:           false !default;
 
 $font-default:           14px  !default; // ~= 11pt
@@ -21,10 +23,10 @@ $padding-y-large: calc($padding-y * 1.4) !default;
 $graphic-gap:     6px  !default;
 
 // Most components use background insets to draw its borders due to
-// performance reasons. On border radius > 2px corners may look rather ugly.
-// They're thicker than border width and sometimes a bit blurry.
+// performance reasons.
 $border-width:   1px !default;
 $border-radius:  4px !default;
+$inner-border-radius: math.max($border-radius - $border-width, 0) !default;
 
 $opacity-disabled: 0.4 !default;