Skip to content

Commit

Permalink
Reduce alpha value of patch background colors (#159)
Browse files Browse the repository at this point in the history
Adjusted the background colors for patches by reducing their alpha value
by 80%. The resulting RGBA color was converted precisely into the
respective RGB color (HEX format) since JetBrains rendering engine still
has problems when using the 8-digit HEX format that includes the value
for the alpha layer.

The values have been calculated to get exact and predictable colors,
at least for usage in other ports if required as well as in languages
like CSS.
Sass [1] comes with the color module that provides the scale
function [2] that allows to "fluidly scale one or more properties of a
color" like e.g. alpha or saturation:

```scss
@use "sass:color";

$nord0: #2e3440;
$nord9: #81a1c1;
$nord11: #bf616a;
$nord13: #ebcb8b;

@function rgba-to-rgb($rgba, $background: $nord0) {
  @return mix(
    rgb(red($rgba), green($rgba), blue($rgba)),
    $background,
    alpha($rgba) * 100%
  );
}

:root {
  --diff-added-reduced-alpha: #{rgba-to-rgb(color.scale($nord9, $alpha: -80%))};
  --diff-deleted-reduced-alpha: #{rgba-to-rgb(color.scale($nord11, $alpha: -80%))};
  --diff-modified-reduced-alpha: #{rgba-to-rgb(color.scale($nord13, $alpha: -80%))};
}
```

Compiling the Sass code above using the official Dart reference
implementation [3] via the CLI resulted in the following colors:

```css
:root {
  --diff-added-reduced-alpha: #3f4a5a;
  --diff-deleted-reduced-alpha: #4b3d48;
  --diff-modified-reduced-alpha: #54524f;
}
```

[1]: https://sass-lang.com 
[2]: https://sass-lang.com/documentation/modules/color#scale
[3]: https://github.com/sass/dart-sass

GH-159

Co-authored-by: Arctic Ice Studio <[email protected]>
Co-authored-by: Sven Greb <[email protected]>
  • Loading branch information
3 people authored Jul 9, 2020
1 parent 9fa9d9a commit f452956
Showing 1 changed file with 5 additions and 5 deletions.
10 changes: 5 additions & 5 deletions resources/themes/nord.xml
Original file line number Diff line number Diff line change
Expand Up @@ -1196,28 +1196,28 @@
<option name="DIFF_CONFLICT">
<value>
<option name="FOREGROUND" value="2e3440" />
<option name="BACKGROUND" value="41536b" />
<option name="BACKGROUND" value="374355" />
<option name="ERROR_STRIPE_COLOR" value="5e81ac" />
</value>
</option>
<option name="DIFF_DELETED">
<value>
<option name="FOREGROUND" value="2e3440" />
<option name="BACKGROUND" value="684651" />
<option name="BACKGROUND" value="4b3d48" />
<option name="ERROR_STRIPE_COLOR" value="bf616a" />
</value>
</option>
<option name="DIFF_INSERTED">
<value>
<option name="FOREGROUND" value="2e3440" />
<option name="BACKGROUND" value="5d6b5e" />
<option name="ERROR_STRIPE_COLOR" value="a3be8c" />
<option name="BACKGROUND" value="3f4a5a" />
<option name="ERROR_STRIPE_COLOR" value="81a1c1" />
</value>
</option>
<option name="DIFF_MODIFIED">
<value>
<option name="FOREGROUND" value="2e3440" />
<option name="BACKGROUND" value="7a705e" />
<option name="BACKGROUND" value="54524f" />
<option name="ERROR_STRIPE_COLOR" value="ebcb8b" />
</value>
</option>
Expand Down

0 comments on commit f452956

Please sign in to comment.