Improvements to color customization

[anthony0030]

Breaking changes to variable names:
--iti-text-gray -> --iti-dialcode-color
--iti-border-gray -> --iti-border-color

This pull request makes customizing colors easier and a small improvement to the search box.

This is in response to #1608, specifically:

It's actually really easy to add this yourself

@media (prefers-color-scheme: dark) {
  .iti {
    --iti-arrow-color: #bababa;
  }
  .iti input, .iti__dropdown-content {
    background-color: #212529;
  }
}

By making just those changes the result is not good. you need to customize a few more things.

if the pull request is applied you will be able to do this (with the colors you want obviously)

@media (prefers-color-scheme: dark) {
  .iti {
    --iti-input-bg: #262a2d;
    --iti-search-bg: #262a2d;
    --iti-dropdown-bg: #262a2d;

    --iti-input-color: #ffffff;
    --iti-search-color: #ffffff;
    --iti-dialcode-color: #eeeeee;
    --iti-countryname-color: #ffffff;

    --iti-arrow-color: #ffffff;
    --iti-input-placeholder-color: #cccccc;
    --iti-search-placeholder-color: #cccccc;

    --iti-border-color: #ffffff;

    --iti-hover-color: rgba(255, 255, 255, 0.1);
  }
}

Because there are so many variations of dark mode, This solution makes it more customizable.

This pull doesn't have:

• A way to customize the browser's focus ring, as it would need testing on lots of browsers.
• Documentation updates

[jackocnr]

This is great thanks, Anthony! I love its flexibility - how you can just set the main --iti-input-bg and by default, it will apply to both inputs, or you can specify both if you want more fine-grained control 👍

Some feedback:

• Can we tweak this so it is not a breaking change for now, e.g. leave --iti-text-gray and add a new rule like --iti-dialcode-color: var(--iti-text-gray), maybe with a comment saying text-gray is deprecated or something, and I will clean this up when we do the next major release. (libs who depend on this project get angry when we keep releasing new breaking changes so quickly haha)
• It's also a breaking change to specifically set the input background as white, and the input text colour etc (and a few more) - instead can we have set the default values for all of these to be unset - do you think that would work?
• Do we still need -ms-input-placeholder vendor prefixing in 2024? (Considering we don't support IE anymore).
• What was the reason for the placeholder opacity vars? Is this common practice? Feels a bit overkill to me.
• I see you removed the border-radius from the search input - I do think that makes sense for the bottom of the input, but actually, we need to keep border-top-left-radius and border-top-right-radius as the dropdown itself has a radius, and the corners get cut off otherwise.
• Finally, could you add a small section in the readme, titled Dark Mode, with a sentence description, and then a short code example of how to use it - I would probably say keep it simple, so just show the minimum list of rules you'd need to get started, and then link to the code for the full list.

[anthony0030]

Hi Jack, Thanks for reviewing this so quickly.

Can we tweak this so it is not a breaking change for now...

Yes, it's not a problem I understand the concern, I use ITI at work and every time there is an update I take a look at what changed, commits / issues ETC. (Because of how critical this part of code is to us)

It's also a breaking change to specifically set the input background as white...

Yes, I get your point, I would use inherit instead of unset

Do we still need -ms-input-placeholder vendor prefixing in 2024?

🤦🏻‍♂️ My mistake I used W3 instead of MDN. Also, I forgot the project doesn't have IE/old Edge support.

What was the reason for the placeholder opacity vars? Is this common practice?

https://dev.to/samanthaming/styling-placeholder-text-with-css-2he0

Okay, what's this deal with opacity: 1 for Firefox. That's because, by default, Firefox's placeholders have an opacity value applied to them. So to override this, we need to set it. That way our placeholder text will show up and doesn't have the faded out appearance from the default Firefox setting.

I see you removed the border-radius from the search input...

Very good catch. I will fix it.

Finally, could you add a small section in the readme...

😓 Good documentation is like a good movie... I can't make either. (but, I will try)

I made the changes, There were some cases that I have now improved, that I would not have found if I had not made the improvements

[jackocnr]

This sounds great, thanks so much, Anthony. I'm away tomorrow, but I will take another look at this on Wednesday 👍

[jackocnr]

Actually, thinking about it, I don't think inherit/unset will work e.g. for input bg colour, on a page which has a bg colour other than white, the input bg colour in this case will be transparent, which is wrong (a breaking change). I just tested this with both inherit and unset.

Not sure how to handle this... needs more thought! 🤔

[jackocnr]

Just spitballing here, but could you do something like this: (pseudo code):

@media dark mode {
    .iti input {
        background-color: var(--iti-input-bg);
    }
}

Without defining --iti-input-bg beforehand, but instead let the dev define it in their own CSS, and when they do, the only styling rule that uses it is in the dark mode media query - would that work?

The question is: can you reference a CSS var before you have defined it?

[anthony0030]

Yes you can reference the var before it is defined, also fyi you can default them.

var(--custom-prop, #FF0000);

https://developer.mozilla.org/en-US/docs/Web/CSS/var

I don’t understand the problem exactly but I will try understand it better tomorrow.

could you please provide a screenshot or proof of concept to help me out.

[jackocnr]

[UNTESTED] I thiiiink... if you just take your code, and open the demo.html and change the body background colour to red, I think the input bg colour will change to red as well. Which is a breaking change - it should stay white.

[anthony0030]

[UNTESTED] I thiiiink... if you just take your code, and open the demo.html and change the body background colour to red, I think the input bg colour will change to red as well. Which is a breaking change - it should stay white.

I see the problems now. The input shows as red instead of white.

The white came from the User Agent Style Sheet, and the color was set to field So I changed it to that.
Additionally, the placeholder color has been fixed.

[jackocnr]

Good documentation is like a good movie... I can't make either. (but, I will try)

😂 you did great!

by default, Firefox's placeholders have an opacity value applied to them

You learn a new thing every day! Good catch.

The white came from the User Agent Style Sheet, and the color was set to field So I changed it to that

This seems to be working well 👍

On this subject, I realised that while inherit makes sense for the dropdown text, it doesn't make sense for the input text, as that is just not how input text styling works normally (it doesn't inherit color from the page). So I would propose the following: we get rid of the --iti-color variable, and have --iti-countryname-color: inherit, --iti-input-color: fieldtext (which is the equivalent of the corresponding field value), and --iti-search-color: var(--iti-input-color) - what do you think?

One other issue I found was that the new border-radius styling looks weird on Firefox and Safari - when you open the dropdown, and the search input gets the blue focus outline, it has curved corners at the top, and sharp corners on the bottom. Can we change this back to having radius on all 4 corners?

Finally, I found something really annoying! The new --iti-input-bg: field is actually a breaking change, because if i just have input{background-color: yellow} in my custom CSS, then previously the ITI input would be yellow, but now with this change, it will be white. So, I propose we leave the code exactly as it is, ready for the next breaking change, but for now, as a temporary measure, we comment out the 4 rules: color, bg-color, placeholder color, opacity lines for both inputs (with a comment saying "coming in v24" or whatever), and copy those 8 lines inside the dark mode media query instead - do you think that will work?

[anthony0030]

I will try to take a look at this tomorrow.

[anthony0030]

I haven't been able to get to it this week.

[jackocnr]

No worries at all. No rush from my end 👍