feat(icons): moving icon styles support to icons package

.storybook/theme/markdown-elements.scss

@@ -1,7 +1,6 @@
 @use '@covalent/tokens' as tokens;
 @use '../../libs/components/src/theme' as theme;
 @use '../../libs/components/src/data-table/data-table.theme' as data-table;
-@use '../../libs/components/src/icon/icon.theme' as icon;
 
 $theme-tokens: map-get(tokens.$tokens, 'theme');
 $light-tokens: map-get($theme-tokens, 'light');
@@ -12,8 +11,6 @@ $dark-colors: map-get($dark-tokens, 'colors');
 $light-colors: map-merge($light-colors, map-get(tokens.$tokens, light));
 $dark-colors: map-merge($dark-colors, map-get(tokens.$tokens, dark));
 
-@include icon.core-styles();
-
 // For convience re-define theme tokens scoped to a light/dark class
 .light {
   @include theme.components-theme(
@@ -33,6 +30,7 @@ $dark-colors: map-merge($dark-colors, map-get(tokens.$tokens, dark));
 
 .sb-show-main {
   background-color: var(--mdc-theme-surface);
+  color: var(--cv-theme-on-surface);
 
   .sbdocs-wrapper {
     padding-top: 0;
@@ -718,7 +716,6 @@ pre.prismjs {
 }
 
 /* -- Dark theme -- */
-
 .dark pre.prismjs {
   /**
     * Coldark Theme for Prism.js

libs/components/.storybook/manager-head.html

@@ -1,5 +1,5 @@
 <link
-  href="https://cdn.jsdelivr.net/npm/@covalent/tokens@8.1.0-beta.6/index.css"
+  href="https://cdn.jsdelivr.net/npm/@covalent/tokens@latest/index.css"
   rel="stylesheet"
 />
 <style>

libs/components/project.json

@@ -32,9 +32,6 @@
           "mkdir -p dist/libs/components/theme/prebuilt",
           "cp libs/components/src/index.scss dist/libs/components",
           "cp libs/components/src/theme/_index.scss dist/libs/components/theme",
-          "cp libs/components/src/icon/*theme.scss dist/libs/components/icon",
-          "mkdir -p dist/libs/components/data-table",
-          "cp libs/components/src/data-table/*theme.scss dist/libs/components/data-table",
           "./node_modules/.bin/sass --trace --color --style=compressed --load-path=node_modules ./libs/components/src/theme/prebuilt:./dist/libs/components/theme/prebuilt"
         ],
         "parallel": false

libs/components/src/index.scss

@@ -1,3 +1 @@
 @forward './theme' show components-theme;
-@forward './icon/icon.theme' show core-styles;
-@forward './data-table/data-table.theme' show data-table-theme;

libs/icons/covalent-icons.css

@@ -8,6 +8,15 @@
   font-display: block;
 }
 
+/* Support mdc icon font variable */
+.covalent-icon,
+.covalent-icons,
+[covalent-icon],
+[covalent-icons],
+[iconFont='covalent-icons'] {
+  --mdc-icon-font: 'covalent-icons';
+}
+
 [class^='cov-'],
 [class*=' cov-'] {
   /* use !important to prevent issues with browser extensions that change fonts */

libs/icons/covalent-icons.scss

@@ -13,6 +13,15 @@
   font-display: block;
 }
 
+/* Support mdc icon font variable */
+.covalent-icon,
+.covalent-icons,
+[covalent-icon],
+[covalent-icons],
+[iconFont='covalent-icons'] {
+  --mdc-icon-font: '#{$icomoon-font-family}';
+}
+
 [class^='cov-'],
 [class*=' cov-'] {
   /* use !important to prevent issues with browser extensions that change fonts */