Add Dim Colors

[amayer5125]

No description provided.

[amayer5125]

@arcticicestudio we probably need to calculate these values. I'm not sure how dim to make them or exactly to calculate them. I'm guessing we could use sass like you pointed out in nordtheme/jetbrains#159 (comment), but I'm not familiar enough with complex sass to understand what is going on there. If you want the values dimmed by 20% or something I could write a python script to calculate them for me. I just need to know how much to dim them by. Not sure if the theme has a standard for things like this.

[amayer5125]

I read through the sass stuff again and I got it figured out. I ran it with -80% alpha like in your example. Let me know if I should change this number.

Here is the code I came up with to dim all the colors:

@use "sass:color";

$nord0: #2e3440;
$black: #3b4252;
$red: #bf616a;
$green: #a3be8c;
$yellow: #ebcb8b;
$blue: #81a1c1;
$magenta: #b48ead;
$cyan: #88c0d0;
$white: #e5e9f0;

@function dim($color) {
  @return rgba-to-rgb(color.scale($color, $alpha: -80%));
}

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

:root {
  black: #{dim($black)};
  red: #{dim($red)};
  green: #{dim($green)};
  yellow: #{dim($yellow)};
  blue: #{dim($blue)};
  magenta: #{dim($magenta)};
  cyan: #{dim($cyan)};
  white: #{dim($white)};
}

[amayer5125]

@arcticicestudio I'm not sure what you want me to do here. I've already updated the code using the output of my last comment. Is there something you would like changed?

[arcticicestudio]

Sorry, either I forgot to send my comment or somehow GitHub lost it 😕

We should use a decreased opacity of 30% instead of 80% because the change in nordtheme/jetbrains#159 was targeted to the background color that marks Git changes. Therefore the transparency of the color(s) have been reduced with a high value of 80% to ensure that the foreground color(s) are still readable.
In case of this issue we're targeting the foreground color and the dimmed colors should still be recognizable when e.g. the terminal is not focused and the colors are dimmed.

[amayer5125]

Updated with 30% dim. Same script as above but -30% instead of -80%.

[arcticicestudio]

Thanks, LGTM 🚀

[arcticicestudio]

I've also forgot to mention that we should add dim_foreground too to ensure that text that uses the default color is dimmed too. I've quickly calculated and added the value based on the current foreground color.

[arcticicestudio]

Release Note Assets

Normal

Dimmed