Create intermediate colors and enable customization at element level

[ivanmalagon]

This PR is aimed to solve the following:

• [x] Use customization per component. We should add variables accordingly for each component to enable this type of customization.
• [x] Add theming examples Under /examples/themes directory.
• [x] Fix the usage of type variables and ui variables.
• [x] Add more background variables to avoid using badge variables for modifying background colors (we're currently doing so in the examples)
• [x] Add hover, focus and active variables`.
• [x] Add css variables reference. We're going to have global variables (primary color, secondary color, etc...) and per-component variables. We should cover this in the documentation, explain the differences of them both, and show a list of the variables that can be modified in each component.
• [x] Rename support-0N variables and use semantic variables (error, warning and success)
• [x] Fix tooltip so we can customize the background color properly.
• [x] Fix/add/change tests

Next steps

• We need to discuss how to use primary and secondary variables in theming. For instance, both in the toolbar and in the table elements are using the secondary value although they're main components. This is wrong because the toolbar is an element that usually has to be aligned, by default, with the main color of the application/brand. So, for theming, is kind of hacky to use the secondary variable there. We should discuss this deeply because it implies breaking changes.

• Add theming customization guide This guide should cover how to customize the application, what to take into consideration when creating a theme and the differences between light and dark themes. Also, which colors are recommended to be changed, for instance, when creating a histogram, in order to fit the current theme.

• Provide default themes to allow users to use them. As @makella said, it'd be really useful to have default themes the user can choose easily that also fit with our basemaps.

[elenatorro]

Yesterday @makella, @rjimenezda and I had a meeting were we discussed this issue. I've updated the description, adding the changes we need to finish in this PR but also a next steps section. I think theming is a huge task we should start addressing now in different issues, we'd eventually to:

• Figure out how to use properly theme variables
• Write good documentation & guides
• Create clean and consistent examples

[elenatorro]

This is ready for CR. There are three tests failing

• airship_avatar-xl_0_document_1_tablet.png
• airship_Tabs_XL_0_document_1_tablet.png
• airship_avatar-xl_0_document_1_tablet.png

If I create the backstop tests from my computer, the generated results work locally but not in the CI, so I guess there's something wrong in my configuration.

[IagoLast]

+1 to the tabs variable.

No breaking change, and nice and good looking tabs :)