[Component Themes]: Improve generated themes

[simeonoff]

Improve the way we generate colors for the component themes. Ideally, in the case of the button, a user would want to provide a single base background color and expect all other state-related(hover, active, focused, etc.) background colors to get generated automatically based off of the provided background color.

Example:

$my-button-theme: button-theme(
    $background: red
);

This will result in a Sass map that contains all related values generated from the base color. For example the $focus-background can be calculated using an approach similar to this:

@if not($focus-background) and $background {
    $focus-background: oklch(from $background calc(l * 1.5)h s );
}

Since the $focus-background will now be available, the $focus-foreground can automatically be derived from it.

@if not($focus-foreground) and $focus-background {
    $focus-foreground: text-contrast($focus-background);
}

Here the underlying text-contrast function needs to be modified to work with CSS relative colors and generate an appropriate color that will change with runtime color changes.

This issue depends on IgniteUI/igniteui-theming#380.