Closed owilliams320 closed 4 months ago
Various styling and theming adjustments and fixes to the web components packages.
@covalent/components
--cov
--cv
@covalent/components/theme/prebuilt
fullHeight
subNav
iconFont
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
:tada: This PR is included in version 8.8.0 :tada:
The release is available on:
v8.8.0
Your semantic-release bot :package::rocket:
Description
Various styling and theming adjustments and fixes to the web components packages.
What's included?
@covalent/components
--cov
to--cv
@covalent/components/theme/prebuilt
fullHeight
property to the card componentsubNav
attribute for stylingiconFont
attribute support to switch to covalent-icons fontExample below to show usage of using components theme with tokens and covalent icons
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