feat(components): updating theme mixin and styling updates

Description

Various styling and theming adjustments and fixes to the web components packages.

What's included?

Adding build step to package index.scss file for @covalent/components
normalizing the css variables prefix from --cov to --cv
moving the prebuilt themes to a pre built folder. now referenced @covalent/components/theme/prebuilt
App shell styling adjustments
Button styling adjustments
Adding fullHeight property to the card component
adjusting nav-list-item component to be compatible with an subNav attribute for styling
adding iconFont attribute support to switch to covalent-icons font

Example below to show usage of using components theme with tokens and covalent icons

@use '@covalent/tokens' as covalent-tokens;
@use '@covalent/components' as covalent-theme;
@use '@covalent/icons';

$theme-tokens: map-get(covalent-tokens.$tokens, 'theme');
$light-tokens: map-get($theme-tokens, 'light');
$dark-tokens: map-get($theme-tokens, 'dark');
$light-colors: map-get($light-tokens, 'colors');
$dark-colors: map-get($dark-tokens, 'colors');
// Merge new tokens with deprecated tokens
$light-colors: map-merge($light-colors, map-get(covalent-tokens.$tokens, light));
$dark-colors: map-merge($dark-colors, map-get(covalent-tokens.$tokens, dark));

:root {
  // Covalent web components theme
  @include covalent-theme.components-theme(
    $light-colors,
    map-get(covalent-tokens.$tokens, typography)
  );
}

.dark {
  // Bring in css variables for dark theme
  @include covalent-theme.components-theme($dark-colors);
}

If your project does not use SCSS, you can pull in one of our light or dark prebuilt css themes.

@covalent/components/theme/prebuilt/light-theme.css
@covalent/components/theme/prebuilt/dark-theme.css

Teradata / covalent

feat(components): updating theme mixin and styling updates #2126

Description

What's included?