Limit transparent colors to icon background only

[nickcernis]

After https://github.com/studiopress/simple-social-icons/pull/16, transparent colors can be set for the icon as well as the background. This seems to serve no purpose other than hiding all icons completely, and could cause confusion if a color is unset (the icons will disappear).

We should limit transparent colors to the icon background only.

Credit to @dreamwhisper in https://github.com/studiopress/simple-social-icons/issues/15#issuecomment-424521017.

[nickcernis]

PR at https://github.com/studiopress/simple-social-icons/pull/83. Will be ready to test once that is merged.

Noting that usability in the Customizer is not perfect (clearing the icon color will still show a clear color in the color picker after publishing, instead of the previous non-blank color that is restored). This should be improved when the RGBA color picker is implemented. https://core.trac.wordpress.org/ticket/39681

[nickcernis]

Ready for testing (develop branch):

• Add a Simple Social Icons widget.
• Confirm:
  • [x] All colors have default values set.
  • [x] Clearing icon color and icon hover color and saving does not remove default color values.
  • [x] Setting icon color and icon hover color to a custom color and saving causes icon color to update.
  • [x] Setting icon background and icon border colors (and their hover colors) to empty results in a transparent border / background.
  • [x] Setting icon background and border colors (and hover colors) to custom colors lets them update.

cc @dreamwhisper

[JiveDig]

I kinda like transparency on the icons. Then we can do something like rgba(0,0,0,.6) and have the icon color just be a darker version of whatever the background changes too. It may add confusion and I can certainly live without it, but worth mentioning the use-case.

[nickcernis]

Then we can do something like rgba(0,0,0,.6)

The color slider doesn't yet implement rgba support, from what I can see (it's coming in https://core.trac.wordpress.org/ticket/39681 but not here yet). So wouldn't you still need to override the transparent icon color with custom CSS anyway to get rgba icons as a tint of the background?

[JiveDig]

Well, I haven't done it yet outside of my own CSS. But I think doing this should get the same effect:

.my-selector .my-icon {
    color: #000;
    opacity: .6;
}

[dreamwhisper]

@JiveDig I can see that in custom CSS but since the customizer color selector doesn’t support alpha, I’m not sure how we support transparency as it is now.

Adding a separate opacity setting later may be an option, but right now, it would be 0 opacity/ transparent just by clearing the hex color.

Let me know if I am missing something. It’s completely possible :)

[JiveDig]

I've been using Kirki lately so I'm probably spoiled. This is totally an edge case thing that doesn't fit the 80/20 rule so let's proceed as originally intended here :)