feat(components): separating theme into light/dark files (#2106)

Teradata · Feb 26, 2024 · 9c2c486 · 9c2c486
1 parent cbcce6e
commit 9c2c486
Show file tree

Hide file tree

Showing 13 changed files with 230 additions and 1,650 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -69,3 +69,4 @@ jobs:
           cache: npm
       - run: npm ci
       - run: npx nx affected --target=build --base=${{ github.event.pull_request.base.sha }}
+      - run: npx nx affected --target=build-scss --base=${{ github.event.pull_request.base.sha }}
diff --git a/apps/knapsack/public/ks-overrides.css b/apps/knapsack/public/ks-overrides.css
@@ -0,0 +1,3 @@
+body {
+  background-color: var(--mdc-theme-background);
+}
diff --git a/libs/angular/project.json b/libs/angular/project.json
@@ -22,16 +22,8 @@
       },
       "defaultConfiguration": "production"
     },
-    "test": {
-      "executor": "@nrwl/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/libs/angular"],
-      "options": {
-        "jestConfig": "libs/angular/jest.config.js",
-        "passWithNoTests": true
-      }
-    },
     "build-scss": {
-      "builder": "nx:run-commands",
+      "executor": "nx:run-commands",
       "options": {
         "commands": [
           "mkdir -p dist/libs/angular/common/",
@@ -42,6 +34,14 @@
         "parallel": false
       }
     },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/libs/angular"],
+      "options": {
+        "jestConfig": "libs/angular/jest.config.js",
+        "passWithNoTests": true
+      }
+    },
     "lint": {
       "executor": "@nx/eslint:lint",
       "options": {

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 '../theme/theme.scss';
+import '../src/index.scss';
 import '../../../.storybook/theme/markdown-elements.scss';
 
 export const parameters = {

diff --git a/libs/components/index.html b/libs/components/index.html
@@ -11,7 +11,7 @@
 
     <!-- Main entry point to include all of Covalent Components-->
     <script type="module" src="src/index.ts"></script>
-    <link href="theme/theme.scss" rel="stylesheet" />
+    <link href="src/index.scss" rel="stylesheet" />
 
     <!-- Inter Font Typography & Material Icons Font --->
     <link rel="preconnect" href="https://fonts.googleapis.com" />

diff --git a/libs/components/project.json b/libs/components/project.json
@@ -25,6 +25,17 @@
       },
       "outputs": ["{workspaceRoot}/dist/libs/components"]
     },
+    "build-scss": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          "mkdir -p dist/libs/components/theme/",
+          "./node_modules/.bin/sass --trace --color --style=compressed --load-path=node_modules ./libs/components/src/theme/:./dist/libs/components/theme/"
+        ],
+        "parallel": false
+      },
+      "outputs": ["{workspaceRoot}/dist/libs/components/theme"]
+    },
     "test": {
       "executor": "nx:run-commands",
       "options": {

diff --git a/libs/components/theme/theme.scss → libs/components/src/index.scss b/libs/components/theme/theme.scss → libs/components/src/index.scss
@@ -1,7 +1,7 @@
 @use '@covalent/tokens/index.scss' as tokens;
-@use '../src/icon/icon' as icon;
-@use '../src/skeleton/skeleton.styles' as skeleton; // TODO - should be a component for text and block
-@use './mixins' as theme;
+@use './icon/icon' as icon;
+@use './skeleton/skeleton.styles' as skeleton; // TODO - should be a component for text and block
+@use './theme/mixins' as theme;
 @import '../../icons/covalent-icons.css';
 
 @include icon.core-styles(); // TODO - include future support in icons css

diff --git a/libs/components/src/index.ts b/libs/components/src/index.ts
@@ -11,6 +11,9 @@ export * from './code-snippet/code-snippet';
 export * from './dialog/dialog';
 export * from './drawer/drawer';
 export * from './empty-state/empty-state';
+export * from './expansion-panel/expansion-panel';
+export * from './expansion-panel/expansion-panel-item';
+export * from './formfield/formfield';
 export * from './icon/icon';
 export * from './icon-button/icon-button';
 export * from './icon-checkbox/icon-check-toggle';
@@ -44,4 +47,4 @@ export * from './tree-list/tree-list';
 export * from './tree-list/tree-list-item';
 export * from './typography/typography';
 
-import '../theme/theme.scss';
+import './index.scss';
diff --git a/libs/components/theme/_mixins.scss → libs/components/src/theme/_mixins.scss b/libs/components/theme/_mixins.scss → libs/components/src/theme/_mixins.scss
@@ -1,5 +1,5 @@
 // Covalent themed components
-@use '../src/data-table/data-table.theme' as data-table;
+@use '../data-table/data-table.theme' as data-table;
 
 @mixin components-theme($theme, $typography) {
   // Foreground colors

diff --git a/libs/components/src/theme/dark-theme.scss b/libs/components/src/theme/dark-theme.scss
@@ -0,0 +1,10 @@
+@use '@covalent/tokens/index.scss' as tokens;
+@use './mixins' as theme;
+
+// Define the base theme using light tokens w/ dark tokens overriting for prefers-color-scheme:dark
+:root {
+  @include theme.components-theme(
+    map-get(tokens.$tokens, 'dark'),
+    map-get(tokens.$tokens, typography)
+  );
+}
diff --git a/libs/components/src/theme/light-theme.scss b/libs/components/src/theme/light-theme.scss
@@ -0,0 +1,10 @@
+@use '@covalent/tokens/index.scss' as tokens;
+@use './mixins' as theme;
+
+// Define the base theme using light tokens w/ dark tokens overriting for prefers-color-scheme:dark
+:root {
+  @include theme.components-theme(
+    map-get(tokens.$tokens, 'light'),
+    map-get(tokens.$tokens, typography)
+  );
+}