How to create a closing icon like the one in tabs?


#1

I’m developing a package UI and I want to make an icon that gets a blue background on hover (in the One Light theme, at least).

The actual style code is no problem, but I want to make it adapt to other themes accordingly.

Looking at the icon through the Dev Tools, I’ve discovered that the color of the background is #5282e0, a color that I couldn’t find in the repository of Atom Light UI.

To increase my confusion, there was no background color rules for hovered close icons in the respective stylesheet.

So what should I do? Is there maybe a simpler way to achieve what I’m trying?


#2

The tabs package creates that icon and its style rules, and it uses a variable from the active theme’s ui-variables.less file, specifically @background-color-info. That variable is defined here.


#3

It’s still not quite it. The tabs.less file you’ve linked also doesn’t define the background of the icon, only the text color.

And @background-color-info is a good bit lighter than what I’m looking for - it becomes #1f96ff.

So if that’s not the color and the stylesheet, where is the background of the hovered icon defined?


#4

Oh, never mind, I figured it out.

The problem was that I confused the Atom Light with the One Light (the one I was using).
The blue color for the tabs’ close icons on hover is @accent-color which is defined here.

In the same repository, there’s a tabs.less file which defines the hover background color.