Themes: Scope custom CSS props to component selectors

[simeonoff]

Is your feature request related to a problem? Please describe.

Right now all component theme-related custom CSS props are scoped to the :root selector. This works, but to avoid name collision we have to prefix all props with --igx-{component-name} and it results in some very long prop names and pollutes the :root scope.

Describe the solution you'd like

To simplify the names and ensure consistency between Sass theme prop names and custom CSS props, CSS props should be scoped to the component selector.

In this way we will go from this:

:root {
  --igx-avatar-background: gray;
  --igx-avatar-color: white;
}

to this:

igx-avatar {
  --background: gray;
  --color: white;
}

This should not introduce any breaking changes.