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

Fix shadow effect for popup controls

Browse Source 
Also introduces "-color-shadow-default" color variables.
This commit is contained in:
mkpaz 2022-09-17 19:20:36 +04:00
parent 9fe8cbde8a
commit 53ac9f52ff
13 changed files with 26 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/colors/global-variables.md
View File

@ -31,10 +31,11 @@ Background colors.
Border colors.
| Color | Usage |
|-------|-------|
| `-color-border-default`| Default color to create bounds around content. |
|-------------------------|------------------------------------------------------------------------------|
| `-color-border-default` | Default color to create bounds around content. |
| `-color-border-muted` | For dividers to emphasize the separation between items, columns or sections. |
| `-color-border-subtle` | Faint border color. |
| `-color-shadow-default` | Color for creating shadow effects around controls. |
The below colors are all accent colors. Use them according to their role. The variable names are self-explaining.

2
styles/src/components/_menu.scss
View File

@ -158,7 +158,7 @@ $separator-padding: map-get(cfg.$separators, "small") !default;
-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;
@include effects.shadow($color-menuitem-bg, cfg.$popup-shadow);
@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
>.scroll-arrow {

2
styles/src/components/_popover.scss
View File

@ -11,11 +11,11 @@ $padding-y: 10px !default;
.popover {
-fx-background-color: $color-bg;
@include effects.shadow(-color-shadow-default, cfg.$popup-shadow-radius, cfg.$popup-shadow-spread);
>.border {
-fx-stroke: $color-border;
-fx-stroke-width: cfg.$border-width;
@include effects.shadow($color-bg, cfg.$popup-shadow);
}
>.content {

4
styles/src/components/_tab-pane.scss
View File

@ -85,10 +85,6 @@ $tab-float-width: 150px !default;
-fx-background-color: $color-fg;
-fx-shape: "M 0,0 H1 L 4,3 7,0 H8 V1 L 5,4 8,7 V8 H7 L 4,5 1,8 H0 V7 L 3,4 0,1 Z";
-fx-scale-shape: false;
&:hover {
@include effects.highlight($color-fg, 1);
}
}
}

6
styles/src/components/_titled-pane.scss
View File

@ -11,7 +11,7 @@ $margin-arrow: 10px !default;
$margin-content: 20px !default;
// for elevation darker than bg color should be used for both light and dark modes
$elevation-color: if(cfg.$darkMode, -color-bg-inset, -color-border-default) !default;
$elevation-color: -color-shadow-default !default;
$elevation-interactive: map-get(cfg.$elevation, 2) !default;
.titled-pane {
@ -21,7 +21,7 @@ $elevation-interactive: map-get(cfg.$elevation, 2) !default;
@each $level,$radius in cfg.$elevation {
&.elevated-#{$level} {
@include effects.elevate($elevation-color, $radius);
@include effects.shadow($elevation-color, $radius);
}
}
@ -90,7 +90,7 @@ $elevation-interactive: map-get(cfg.$elevation, 2) !default;
}
&.interactive:hover {
@include effects.elevate($elevation-color, $elevation-interactive);
@include effects.shadow($elevation-color, $elevation-interactive);
}
&:show-mnemonics>.mnemonic-underline {

2
styles/src/components/_tooltip.scss
View File

@ -18,5 +18,5 @@ $padding-y: cfg.$padding-y !default;
-fx-background-radius: cfg.$border-radius;
-fx-padding: $padding-y $padding-x $padding-y $padding-x;
-fx-opacity: $opacity;
@include effects.shadow($color-bg, cfg.$popup-shadow);
@include effects.shadow(-color-shadow-default, cfg.$popup-shadow-radius, cfg.$popup-shadow-spread);
}

1
styles/src/general/_root.scss
View File

@ -81,6 +81,7 @@
-color-border-default: vars.$border-default;
-color-border-muted: vars.$border-muted;
-color-border-subtle: vars.$border-subtle;
-color-shadow-default: vars.$shadow-default;
-color-neutral-emphasis-plus: vars.$neutral-emphasisPlus;
-color-neutral-emphasis: vars.$neutral-emphasis;

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

@ -98,6 +98,7 @@ $nord16: #B48EAD; // hsl(311, 20.2, 63.1)
$border-default: color.change(scale.$base-6, $alpha: 0.65),
$border-muted: scale.$base-7,
$border-subtle: scale.$base-8,
$shadow-default: scale.$dark,
$neutral-emphasisPlus: scale.$base-7,
$neutral-emphasis: scale.$base-7,

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

@ -101,6 +101,7 @@ $nord16: #B48EAD; // hsl(311, 20.2, 63.1)
$border-default: scale.$base-3,
$border-muted: lighten(scale.$base-3, 0.1),
$border-subtle: color.change(scale.$dark, $alpha: 0.15),
$shadow-default: scale.$base-3,
$neutral-emphasisPlus: scale.$base-8,
$neutral-emphasis: scale.$base-7,

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

@ -73,13 +73,14 @@
$fg-onEmphasis: scale.$light,
$canvas-default: scale.$base-9,
$canvas-overlay: scale.$base-8,
$canvas-overlay: scale.$base-9,
$canvas-inset: scale.$dark,
$canvas-subtle: scale.$base-8,
$border-default: scale.$base-6,
$border-muted: scale.$base-7,
$border-subtle: color.change(scale.$base-0, $alpha: 0.1),
$shadow-default: scale.$dark,
$neutral-emphasisPlus: scale.$base-4,
$neutral-emphasis: scale.$base-4,

1
styles/src/settings/_color-vars.scss
View File

@ -16,6 +16,7 @@ $canvas-subtle: scale.$base-0 !default;
$border-default: scale.$base-2 !default;
$border-muted: lighten(scale.$base-2, 0.03) !default;
$border-subtle: color.change(scale.$dark, $alpha: 0.15) !default;
$shadow-default: scale.$base-2 !default;
$neutral-emphasisPlus: scale.$base-9 !default;
$neutral-emphasis: scale.$base-5 !default;

3
styles/src/settings/_config.scss
View File

@ -45,7 +45,8 @@ $checkbox-label-padding: 2px !default;
// menu
$popup-padding-x: 2px !default;
$popup-padding-y: 2px !default;
$popup-shadow: 2px !default;
$popup-shadow-radius: if($darkMode, 8px, 6px) !default;
$popup-shadow-spread: if($darkMode, 0.6, 0.3) !default;
$menu-padding-x: $padding-x !default;
$menu-padding-y: $padding-y !default;

14
styles/src/settings/_effects.scss
View File

@ -1,16 +1,6 @@
// SPDX-License-Identifier: MIT
// Adds shadow effect to popup menus.
@mixin shadow($color, $radius) {
-fx-effect: unquote("dropshadow(gaussian, #{$color}, #{$radius}, 0.75, 0, 0)");
}
// Adds elevation effect to boxes.
@mixin elevate($color, $radius) {
-fx-effect: unquote("dropshadow(three-pass-box, #{$color}, #{$radius}, 0.5, 2, 2)");
}
// Adds hover (or active) effect to icons.
@mixin highlight($color, $radius) {
-fx-effect: unquote("dropshadow(two-pass-box, #{$color}, #{$radius}, 0.125em, 0, 0)");
@mixin shadow($color, $radius, $spread: 0.5, $offsetX: 0, $offsetY: 2) {
-fx-effect: unquote("dropshadow(three-pass-box, #{$color}, #{$radius}, #{$spread}, #{$offsetX}, #{$offsetY})");
}