feat(components): removing dep on needing style css file

Teradata · Mar 13, 2024 · cc5d218 · cc5d218
1 parent c63971f
commit cc5d218
Show file tree

Hide file tree

Showing 11 changed files with 23 additions and 41 deletions.
diff --git a/.storybook/theme/markdown-elements.scss b/.storybook/theme/markdown-elements.scss
@@ -1,25 +1,34 @@
 @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');
 $light-colors: map-get($light-tokens, 'colors');
 $dark-tokens: map-get($theme-tokens, 'dark');
 $dark-colors: map-get($dark-tokens, 'colors');
+// Merge deprecated tokens
+$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(
     map-merge($light-colors, map-get(tokens.$tokens, light)),
     map-get(tokens.$tokens, typography)
   );
+  @include data-table.data-table-theme($light-colors);
 }
 
 .dark {
   @include theme.components-theme(
     map-merge($dark-colors, map-get(tokens.$tokens, dark)),
     map-get(tokens.$tokens, typography)
   );
+  @include data-table.data-table-theme($dark-colors);
 }
 
 .sb-show-main {

diff --git a/libs/components/.storybook/preview-head.html b/libs/components/.storybook/preview-head.html
@@ -10,8 +10,6 @@
   rel="stylesheet"
 />
 
-<!-- Required styles for Covalent themes -->
-<link href="../src/index.scss" rel="stylesheet" />
 <script>
   window.global = window;
   window.process = {

diff --git a/libs/components/.storybook/preview.js b/libs/components/.storybook/preview.js
@@ -1,6 +1,6 @@
 import { parameters as mainParameters } from '../../../.storybook/preview';
 
-import '../src/index.scss';
+import '../../icons/covalent-icons.scss';
 import '../../../.storybook/theme/markdown-elements.scss';
 
 export const parameters = {

diff --git a/libs/components/README.md b/libs/components/README.md
@@ -11,11 +11,9 @@ All components are published in npm and available on any CDN that host npm modul
 ```html
 <!-- using a specific version -->
 <script type="module" src="https://cdn.jsdelivr.net/npm/@covalent/components@x.x.x/+esm"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@covalent/components@x.x.x/style.css" />
 
 <!-- using the latest version -->
 <script type="module" src="https://cdn.jsdelivr.net/npm/@covalent/components@latest/+esm"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@covalent/components@latest/style.css" />
 ```
 
 the component bundles are also available individually
@@ -34,7 +32,7 @@ once the script is loaded, its now possible to start using our custom HTML eleme
 <html>
   <head>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@covalent/components@x.x.x/+esm"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@covalent/components@latest/style.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@covalent/components@latest/theme/prebuilt/light-theme.css" />
   </head>
   <body>
     <cv-button label="Hello world" raised></cv-button>

diff --git a/libs/components/package.json b/libs/components/package.json
@@ -7,11 +7,12 @@
   "types": "./index.d.ts",
   "exports": {
     ".": {
-      "style": "./style.css",
+      "sass": "./index.scss",
       "import": "./index.mjs",
       "require": "./index.js"
     },
-    "./style.css": "./style.css",
+    "./icon/icon.theme": "./icon/_icon.theme.scss",
+    "./data-table.theme": "./data-table/_data-table.theme.scss",
     "./theme": {
       "sass": "./theme/_index.scss"
     },

diff --git a/libs/components/project.json b/libs/components/project.json
@@ -30,7 +30,10 @@
       "options": {
         "commands": [
           "mkdir -p dist/libs/components/theme/prebuilt",
-          "cp libs/components/src/theme/*.scss dist/libs/components/theme/",
+          "cp libs/components/src/index.scss dist/libs/components",
+          "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

diff --git a/libs/components/src/icon/_icon.scss → libs/components/src/icon/_icon.theme.scss b/libs/components/src/icon/_icon.scss → libs/components/src/icon/_icon.theme.scss
@@ -1,8 +1,4 @@
 @mixin core-styles() {
-  :root {
-    --mdc-icon-font: 'Material Symbols Outlined';
-  }
-
   // Support class and attribute names
   .covalent-icon,
   .covalent-icons,

diff --git a/libs/components/src/index.scss b/libs/components/src/index.scss
@@ -1,24 +1,3 @@
-@use '@covalent/tokens' as tokens;
-@use './theme' as theme;
-@use './icon/icon' as icon;
-@use './skeleton/skeleton.styles' as skeleton; // TODO - should be a component for text and block
-@use './data-table/data-table.theme' as data-table;
-@import '../../icons/covalent-icons.css';
-
-$theme-tokens: map-get(tokens.$tokens, 'theme');
-$light-tokens: map-get($theme-tokens, 'light');
-$light-colors: map-get($light-tokens, 'colors');
-// Deprecated tokens
-$light-colors: map-merge($light-colors, map-get(tokens.$tokens, 'light'));
-$typography: map-get(tokens.$tokens, 'typography');
-
-// Define the base theme using light tokens w/ dark tokens overriting for prefers-color-scheme:dark
-:root {
-  @include theme.components-theme($light-colors, $typography);
-
-  @include data-table.data-table-theme($light-colors);
-  @include icon.core-styles(); // TODO - include future support in icons css
-  @include skeleton.core-styles(
-
-  ); // TODO - should include support for text and block
-}
+@forward './theme' show components-theme;
+@forward './icon/icon.theme' show core-styles;
+@forward './data-table/data-table.theme' show data-table-theme;
diff --git a/libs/components/src/index.ts b/libs/components/src/index.ts
@@ -46,5 +46,3 @@ export * from './top-app-bar/top-app-bar-fixed';
 export * from './tree-list/tree-list';
 export * from './tree-list/tree-list-item';
 export * from './typography/typography';
-
-import './index.scss';
diff --git a/libs/components/src/theme/prebuilt/dark-theme.scss b/libs/components/src/theme/prebuilt/dark-theme.scss
@@ -9,7 +9,7 @@ $typography: map-get(tokens.$tokens, 'typography');
 // Deprecated tokens
 $dark-colors: map-merge($dark-colors, map-get(tokens.$tokens, 'dark'));
 
-// Define the base theme using dark tokens w/ dark tokens overriding for prefers-color-scheme:dark
+// Define the base theme using dark tokens w/ dark tokens
 :root {
   @include theme.components-theme($dark-colors, $typography);
 

diff --git a/libs/components/src/theme/prebuilt/light-theme.scss b/libs/components/src/theme/prebuilt/light-theme.scss
@@ -9,7 +9,7 @@ $typography: map-get(tokens.$tokens, 'typography');
 // Deprecated tokens
 $light-colors: map-merge($light-colors, map-get(tokens.$tokens, 'light'));
 
-// Define the base theme using light tokens w/ dark tokens overriting for prefers-color-scheme:dark
+// Define the base theme using light tokens w/ light tokens
 :root {
   @include theme.components-theme($light-colors, $typography);