From cdc2b72adb69985d3eea62162a733df680acb34c Mon Sep 17 00:00:00 2001
From: meta-d <meta.digital.cloud@gmail.com>
Date: Sun, 18 Feb 2024 08:55:05 +0800
Subject: [PATCH] feat: css styles

---
 .../profile-inline/profile.component.html     |  4 +-
 .../user/profile-inline/profile.component.ts  | 18 +++----
 apps/cloud/src/app/_app.component.scss        |  7 +++
 .../project/indicators/all/all.component.scss |  4 --
 .../approvals/approvals.component.scss        |  4 --
 .../project/members/members.component.ts      |  7 +--
 .../model/_model.component.scss               |  4 --
 .../overview/overview.component.html          |  4 +-
 .../role/cube/cube.component.html             | 10 ++--
 .../role/cube/cube.component.scss             |  6 +++
 .../role/overview/overview.component.html     |  4 +-
 .../create-entity.component.html              |  4 +-
 .../features/story/story/story.component.html |  2 +-
 apps/cloud/src/styles.scss                    | 40 +--------------
 apps/cloud/src/styles/cdk-menu.scss           | 25 ++++++++++
 apps/cloud/src/styles/dark.scss               | 12 +++++
 apps/cloud/src/styles/default.scss            | 12 +++++
 .../src/styles/material/_dark.theme.scss      |  2 +-
 .../src/styles/material/_default.theme.scss   | 49 +++++++------------
 19 files changed, 106 insertions(+), 112 deletions(-)
 create mode 100644 apps/cloud/src/styles/cdk-menu.scss

diff --git a/apps/cloud/src/app/@shared/user/profile-inline/profile.component.html b/apps/cloud/src/app/@shared/user/profile-inline/profile.component.html
index 4e7ba217c..09d5617c5 100644
--- a/apps/cloud/src/app/@shared/user/profile-inline/profile.component.html
+++ b/apps/cloud/src/app/@shared/user/profile-inline/profile.component.html
@@ -7,6 +7,6 @@
     <span class="absolute right-0 bottom-0 h-2 w-2 rounded-full bg-green-400 ring ring-white"></span>
 </div>
 <div class="text-sm overflow-hidden text-ellipsis">
-    <div class="font-medium text-gray-700 overflow-hidden text-ellipsis">{{user?.firstName}} {{user?.lastName}}</div>
-    <div class="text-gray-400 overflow-hidden text-ellipsis">{{ user?.email }}</div>
+    <div class="font-medium overflow-hidden text-ellipsis">{{user?.firstName}} {{user?.lastName}}</div>
+    <div class="overflow-hidden text-ellipsis opacity-80">{{ user?.email }}</div>
 </div>
\ No newline at end of file
diff --git a/apps/cloud/src/app/@shared/user/profile-inline/profile.component.ts b/apps/cloud/src/app/@shared/user/profile-inline/profile.component.ts
index 7c0e28f27..b4851f5de 100644
--- a/apps/cloud/src/app/@shared/user/profile-inline/profile.component.ts
+++ b/apps/cloud/src/app/@shared/user/profile-inline/profile.component.ts
@@ -1,17 +1,17 @@
 import { CommonModule } from '@angular/common'
 import { Component, Input } from '@angular/core'
 import { IUser } from '../../../@core'
-import { UserPipe } from "../../pipes"
+import { UserPipe } from '../../pipes'
 
 @Component({
-    standalone: true,
-    selector: 'pac-user-profile-inline',
-    templateUrl: 'profile.component.html',
-    styleUrls: ['profile.component.scss'],
-    imports: [CommonModule, UserPipe],
-    host: {
-      class: 'pac-user-profile-inline'
-    }
+  standalone: true,
+  selector: 'pac-user-profile-inline',
+  templateUrl: 'profile.component.html',
+  styleUrls: ['profile.component.scss'],
+  imports: [CommonModule, UserPipe],
+  host: {
+    class: 'pac-user-profile-inline'
+  }
 })
 export class UserProfileInlineComponent {
   @Input() user?: IUser
diff --git a/apps/cloud/src/app/_app.component.scss b/apps/cloud/src/app/_app.component.scss
index 104a15bde..c6641389a 100644
--- a/apps/cloud/src/app/_app.component.scss
+++ b/apps/cloud/src/app/_app.component.scss
@@ -64,3 +64,10 @@
 .cdk-overlay-container .mat-mdc-dialog-container.mdc-dialog .mdc-dialog__content.pac-dialog-content {
   @apply p-0;
 }
+
+.ngm-table {
+  border-color: var(--mat-divider-color);
+}
+.pac-table-container {
+  border-color: var(--mat-divider-color);
+}
\ No newline at end of file
diff --git a/apps/cloud/src/app/features/project/indicators/all/all.component.scss b/apps/cloud/src/app/features/project/indicators/all/all.component.scss
index 7ab35664c..dd3772389 100644
--- a/apps/cloud/src/app/features/project/indicators/all/all.component.scss
+++ b/apps/cloud/src/app/features/project/indicators/all/all.component.scss
@@ -1,7 +1,3 @@
 :host {
   @apply w-full overflow-hidden flex-1 max-w-full flex flex-col p-4;
 }
-
-.ngm-table {
-  border-color: var(--mat-divider-color);
-}
\ No newline at end of file
diff --git a/apps/cloud/src/app/features/project/indicators/approvals/approvals.component.scss b/apps/cloud/src/app/features/project/indicators/approvals/approvals.component.scss
index e76646163..809713427 100644
--- a/apps/cloud/src/app/features/project/indicators/approvals/approvals.component.scss
+++ b/apps/cloud/src/app/features/project/indicators/approvals/approvals.component.scss
@@ -1,7 +1,3 @@
 :host {
   @apply flex-1 w-full max-w-full overflow-hidden flex flex-col p-4;
 }
-
-.ngm-table {
-  border-color: var(--mat-divider-color);
-}
\ No newline at end of file
diff --git a/apps/cloud/src/app/features/project/members/members.component.ts b/apps/cloud/src/app/features/project/members/members.component.ts
index 30051ff2b..6719d1892 100644
--- a/apps/cloud/src/app/features/project/members/members.component.ts
+++ b/apps/cloud/src/app/features/project/members/members.component.ts
@@ -43,7 +43,7 @@ import { NgmTableComponent } from '@metad/ocap-angular/common'
   selector: 'pac-project-members',
   templateUrl: 'members.component.html',
   styles: [
-    `
+`
 :host {
   width: 100%;
   overflow: auto;
@@ -51,10 +51,7 @@ import { NgmTableComponent } from '@metad/ocap-angular/common'
 .rounded-full.mat-stroked-button {
   border-radius: 50%;
 }
-.ngm-table {
-  border-color: var(--mat-divider-color);
-}
-    `
+`
   ]
 })
 export class ProjectMembersComponent extends TranslationBaseComponent {
diff --git a/apps/cloud/src/app/features/semantic-model/model/_model.component.scss b/apps/cloud/src/app/features/semantic-model/model/_model.component.scss
index f2e9bad11..0022cf9bc 100644
--- a/apps/cloud/src/app/features/semantic-model/model/_model.component.scss
+++ b/apps/cloud/src/app/features/semantic-model/model/_model.component.scss
@@ -26,10 +26,6 @@ $prefix: (ngm, model);
   }
 }
 
-.ngm-table {
-  @apply border-gray-200 dark:border-gray-700;
-}
-
 // Toolbar styles
 .mat-toolbar.pac-sub-toolbar {
   min-height: 33px;
diff --git a/apps/cloud/src/app/features/semantic-model/model/access-control/overview/overview.component.html b/apps/cloud/src/app/features/semantic-model/model/access-control/overview/overview.component.html
index c69d05b39..9a23dd8b0 100644
--- a/apps/cloud/src/app/features/semantic-model/model/access-control/overview/overview.component.html
+++ b/apps/cloud/src/app/features/semantic-model/model/access-control/overview/overview.component.html
@@ -2,7 +2,7 @@ <h2 class="text-xl"> {{ 'PAC.MODEL.AccessControl.Overview' | translate: {Default
 
 <div class="flex-1 h-1/2 flex flex-col">
   <h3 class="text-lg"> {{ 'PAC.MODEL.AccessControl.RolesManage' | translate: {Default: 'Roles Manage'} }} </h3>
-  <div class="flex-1 mt-4 overflow-auto rounded-lg border border-gray-200">
+  <div class="flex-1 mt-4 overflow-auto rounded-lg border border-gray-200 dark:border-neutral-700">
     <table mat-table [dataSource]="roles$ | async" class="ngm-density__compact w-full">
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef> {{ 'PAC.KEY_WORDS.Roles' | translate: {Default: 'Roles'} }} </th>
@@ -59,7 +59,7 @@ <h3 class="text-lg"> {{ 'PAC.MODEL.AccessControl.UsersManage' | translate: {Defa
 
   </div>
 
-  <div *ngIf="userRoles$ | async as userRoles" class="flex-1 mt-4 overflow-auto rounded-lg border border-gray-200">
+  <div *ngIf="userRoles$ | async as userRoles" class="flex-1 mt-4 overflow-auto rounded-lg border border-gray-200 dark:border-neutral-700">
     <table mat-table [dataSource]="userRoles.users" class="ngm-density__compact w-full">
     
       <!-- Name Column -->
diff --git a/apps/cloud/src/app/features/semantic-model/model/access-control/role/cube/cube.component.html b/apps/cloud/src/app/features/semantic-model/model/access-control/role/cube/cube.component.html
index 1239aa6a1..7ed247862 100644
--- a/apps/cloud/src/app/features/semantic-model/model/access-control/role/cube/cube.component.html
+++ b/apps/cloud/src/app/features/semantic-model/model/access-control/role/cube/cube.component.html
@@ -1,11 +1,11 @@
 <div class="flex flex-col px-4 py-2">
     <div class="text-lg">
-        <label class="text-xl text-bluegray-800">{{ 'PAC.KEY_WORDS.Cube' | translate: {Default: 'Cube'} }}</label>
+        <label class="text-xl">{{ 'PAC.KEY_WORDS.Cube' | translate: {Default: 'Cube'} }}</label>
     </div>
     <div class="flex justify-between">
-        <div><span>{{entityType?.caption}}</span>(<span>{{ cubeGrant.cube }}</span>)</div>
+        <div class="opacity-80"><span>{{entityType?.caption}}</span>(<span>{{ cubeGrant.cube }}</span>)</div>
         <div class="flex justify-end items-center text-sm">
-            <label class="text-sm text-bluegray-800">
+            <label class="text-sm">
                 {{ 'PAC.MODEL.AccessControl.DefaultAccess' | translate: {Default: 'Default Access'} }}:
             </label>
             <mat-radio-group class="ngm-radio-group__horizontal text-sm text-bluegray-800" displayDensity="compact"
@@ -141,7 +141,7 @@
         </mat-expansion-panel>
     </mat-accordion>
 
-    <div class="pac-cdk-drop__list pac-cdk-drop__area h-52 min-h-[120px] w-full mt-4 border-2 border-gray-300 border-dashed rounded-lg bg-gray-50"
+    <div class="pac-cdk-drop__list pac-cdk-drop__area h-52 min-h-[120px] w-full mt-4 border-2 border-dashed rounded-lg"
         cdkDropList
         [cdkDropListEnterPredicate]="dropHierarchyPredicate"
         (cdkDropListDropped)="dropHierarchy($event)">
@@ -152,7 +152,7 @@
                 <rect x="48" y="25" width="4" height="50" fill="white"/>
             </svg>
 
-            <p class="mb-2 text-sm text-gray-500 dark:text-gray-400">{{ 'PAC.MODEL.AccessControl.DragandDropAddDimension' | translate: {Default: 'Drag and drop to add dimension'} }}</p>
+            <p class="mb-2 text-sm">{{ 'PAC.MODEL.AccessControl.DragandDropAddDimension' | translate: {Default: 'Drag and drop to add dimension'} }}</p>
         </div>
     </div>
 </div>
diff --git a/apps/cloud/src/app/features/semantic-model/model/access-control/role/cube/cube.component.scss b/apps/cloud/src/app/features/semantic-model/model/access-control/role/cube/cube.component.scss
index 1ac88d28d..cd3195028 100644
--- a/apps/cloud/src/app/features/semantic-model/model/access-control/role/cube/cube.component.scss
+++ b/apps/cloud/src/app/features/semantic-model/model/access-control/role/cube/cube.component.scss
@@ -38,3 +38,9 @@ label {
   flex-direction: column;
   overflow-y: auto;
 }
+
+.pac-cdk-drop__list.pac-cdk-drop__area {
+  background-color: var(--mdc-outlined-card-container-color);
+  border-color: var(--mat-divider-color);
+  color: var(--ngm-text-primary-color);
+}
\ No newline at end of file
diff --git a/apps/cloud/src/app/features/semantic-model/model/access-control/role/overview/overview.component.html b/apps/cloud/src/app/features/semantic-model/model/access-control/role/overview/overview.component.html
index 23b41481f..d4df8ba07 100644
--- a/apps/cloud/src/app/features/semantic-model/model/access-control/role/overview/overview.component.html
+++ b/apps/cloud/src/app/features/semantic-model/model/access-control/role/overview/overview.component.html
@@ -23,7 +23,7 @@ <h2 class="text-xl"> {{ 'PAC.MODEL.AccessControl.UnionRole' | translate: {Defaul
   <div>{{ role.name }}</div>
 
   <h3> {{ 'PAC.MODEL.AccessControl.RolesManage' | translate: {Default: 'Roles Manage'} }} </h3>
-  <div class="pac-cdk-drop__list flex-1 h-1/2 overflow-auto rounded-lg border border-gray-200 pb-4"
+  <div class="pac-cdk-drop__list pac-table-container flex-1 h-1/2 overflow-auto rounded-lg border pb-4"
       cdkDropList
       (cdkDropListDropped)="dropRole($event)">
       <table mat-table [dataSource]="roleUsages$" style="min-width: 100%;" class="ngm-density__compact" >
@@ -90,7 +90,7 @@ <h3> {{ 'PAC.MODEL.AccessControl.UsersManage' | translate: {Default: 'Users Mana
       </button>
     </div>
   </div>
-  <div class="mt-4 flex-1 overflow-auto rounded-lg border border-gray-200 pb-4">
+  <div class="pac-table-container mt-4 flex-1 overflow-auto rounded-lg border pb-4">
     <table mat-table [dataSource]="users$" class="ngm-density__compact w-full">
       <!-- Name Column -->
       <ng-container matColumnDef="user">
diff --git a/apps/cloud/src/app/features/semantic-model/model/create-entity/create-entity.component.html b/apps/cloud/src/app/features/semantic-model/model/create-entity/create-entity.component.html
index 963b33b55..b8b70af02 100644
--- a/apps/cloud/src/app/features/semantic-model/model/create-entity/create-entity.component.html
+++ b/apps/cloud/src/app/features/semantic-model/model/create-entity/create-entity.component.html
@@ -138,7 +138,7 @@
       <div class="overflow-auto">
         <mat-list role="list" cdkDropList (cdkDropListDropped)="drop($event)">
           <mat-list-item *ngFor="let column of columns" cdkDrag
-            role="listitem" class="group rounded-lg hover:bg-slate-100">
+            role="listitem" class="group rounded-lg">
             <div class="w-full h-full flex items-center">
               <mat-checkbox class="group-hover:opacity-100" style="line-height: 1;"
                 [class.opacity-0]="column.name !== primaryKey"
@@ -146,7 +146,7 @@
                 (change)="primaryKey = $event.checked ? column.name : null"
               ></mat-checkbox>
         
-              <mat-icon class="ml-6 cursor-pointer text-gray-500 hover:text-gray-600 group-hover:opacity-100" [class.opacity-0]="!column.visible"
+              <mat-icon class="ml-6 cursor-pointer group-hover:opacity-100" [class.opacity-0]="!column.visible"
                 fontSet="material-icons-outlined"
                 (click)="column.visible=!column.visible"
               >
diff --git a/apps/cloud/src/app/features/story/story/story.component.html b/apps/cloud/src/app/features/story/story/story.component.html
index 70596ece1..d93d4e760 100644
--- a/apps/cloud/src/app/features/story/story/story.component.html
+++ b/apps/cloud/src/app/features/story/story/story.component.html
@@ -136,7 +136,7 @@
 
         </div>
 
-        <ngm-drawer-trigger class="absolute right-2 top-1/2 -translate-y-1/2 z-40" [(opened)]="designerOpened" side="right"></ngm-drawer-trigger>
+        <ngm-drawer-trigger class="absolute right-2 top-2/3 -translate-y-1/2 z-40" [(opened)]="designerOpened" side="right"></ngm-drawer-trigger>
     </mat-drawer-content>
 </mat-drawer-container>
 
diff --git a/apps/cloud/src/styles.scss b/apps/cloud/src/styles.scss
index b051625ae..e78b81b02 100644
--- a/apps/cloud/src/styles.scss
+++ b/apps/cloud/src/styles.scss
@@ -23,17 +23,6 @@
 @import './styles/dark';
 @import './styles/dark-green';
 
-@include features.theme(ngm-theme.$mat-theme);
-@include shared.theme(ngm-theme.$mat-theme);
-@include public.theme(ngm-theme.$mat-theme);
-@include indicator-market.theme(ngm-theme.$mat-theme);
-
-.ngm-theme-dark {
-  @include features.color(dark-theme.$dark-theme);
-  @include shared.color(dark-theme.$dark-theme);
-  @include public.color(dark-theme.$dark-theme);
-  @include indicator-market.color(dark-theme.$dark-theme);
-}
 .ngm-theme-thin {
   @include features.color(thin-theme.$dark-theme);
   @include shared.color(thin-theme.$dark-theme);
@@ -50,6 +39,7 @@
 @import 'libs/formly/_formly';
 @import 'libs/story-angular/src/lib/_index';
 @import './app/_app.component';
+@import './styles/cdk-menu';
 
 html,
 body {
@@ -216,34 +206,6 @@ html.cdk-global-scrollblock {
   }
 }
 
-// cdk
-.cdk-menu-bar {
-  .cdk-menu-item {
-    @apply p-2 whitespace-nowrap;
-  }
-  // .cdk-menu-item.cdk-menu-trigger[aria-expanded='true'],
-  .cdk-menu-item:hover {
-    @apply bg-black/10;
-  }
-  .cdk-menu-item[aria-expanded='true'] {
-    @apply bg-black/20;
-  }
-}
-.cdk-menu.cdk-menu-group .cdk-menu-item {
-  @apply whitespace-nowrap;
-
-  &.ngm-cdk-menu-item__disabled {
-    cursor: default;
-    opacity: 0.5;
-    &:hover {
-      background-color: unset;
-    }
-  }
-  .mdc-button__label {
-    @apply flex-1;
-  }
-}
-
 .mat-mdc-button-base.mat-mdc-icon-button {
   @apply flex justify-center items-center;
 }
diff --git a/apps/cloud/src/styles/cdk-menu.scss b/apps/cloud/src/styles/cdk-menu.scss
new file mode 100644
index 000000000..c98ce3722
--- /dev/null
+++ b/apps/cloud/src/styles/cdk-menu.scss
@@ -0,0 +1,25 @@
+.cdk-menu-bar {
+  .cdk-menu-item {
+    @apply p-2 whitespace-nowrap text-neutral-500 dark:text-neutral-500;
+  }
+  .cdk-menu-item:hover {
+    @apply bg-black/10 dark:bg-gray-100/10 text-neutral-600 dark:text-neutral-400;
+  }
+  .cdk-menu-item[aria-expanded='true'] {
+    @apply bg-black/20 dark:bg-gray-100/20 text-neutral-600 dark:text-neutral-400;
+  }
+}
+.cdk-menu.cdk-menu-group .cdk-menu-item {
+  @apply whitespace-nowrap;
+
+  &.ngm-cdk-menu-item__disabled {
+    cursor: default;
+    opacity: 0.5;
+    &:hover {
+      background-color: unset;
+    }
+  }
+  .mdc-button__label {
+    @apply flex-1;
+  }
+}
\ No newline at end of file
diff --git a/apps/cloud/src/styles/dark.scss b/apps/cloud/src/styles/dark.scss
index a01d453dc..9566da4f7 100644
--- a/apps/cloud/src/styles/dark.scss
+++ b/apps/cloud/src/styles/dark.scss
@@ -1,4 +1,9 @@
 @use '@angular/material/core/tokens/token-utils';
+@use 'libs/material-theme/src/styles/material/dark.theme' as dark-theme;
+@use 'libs/apps/indicator-market/src/lib/indicator-market-theme' as indicator-market;
+@use '../app/features/features-theme' as features;
+@use '../app/@shared/components-theme' as shared;
+@use '../app/public/public-theme' as public;
 @use '../app/features/semantic-model/model/_model.component' as model;
 
 body.dark {
@@ -19,3 +24,10 @@ body.dark {
   ));
   
 }
+
+.ngm-theme-dark {
+  @include indicator-market.color(dark-theme.$dark-theme);
+  @include features.color(dark-theme.$dark-theme);
+  @include shared.color(dark-theme.$dark-theme);
+  @include public.color(dark-theme.$dark-theme);
+}
\ No newline at end of file
diff --git a/apps/cloud/src/styles/default.scss b/apps/cloud/src/styles/default.scss
index aecc5a9b5..f7de106a8 100644
--- a/apps/cloud/src/styles/default.scss
+++ b/apps/cloud/src/styles/default.scss
@@ -1,4 +1,9 @@
 @use '@angular/material/core/tokens/token-utils';
+@use 'libs/material-theme/src/styles/material/default.theme' as light-theme;
+@use 'libs/apps/indicator-market/src/lib/indicator-market-theme' as indicator-market;
+@use '../app/features/features-theme' as features;
+@use '../app/@shared/components-theme' as shared;
+@use '../app/public/public-theme' as public;
 @use '../app/features/semantic-model/model/_model.component' as model;
 
 body.default, body.light {
@@ -15,3 +20,10 @@ body.default, body.light {
     border-color: theme('colors.gray.200'),
   ));
 }
+
+.ngm-theme-light, .ngm-theme-default {
+  @include indicator-market.color(light-theme.$mat-theme);
+  @include features.color(light-theme.$mat-theme);
+  @include shared.color(light-theme.$mat-theme);
+  @include public.color(light-theme.$mat-theme);
+}
\ No newline at end of file
diff --git a/libs/material-theme/src/styles/material/_dark.theme.scss b/libs/material-theme/src/styles/material/_dark.theme.scss
index 66cefa388..41492cda0 100644
--- a/libs/material-theme/src/styles/material/_dark.theme.scss
+++ b/libs/material-theme/src/styles/material/_dark.theme.scss
@@ -80,7 +80,7 @@ $custom-typography: mat.define-typography-config(
 // Be sure that you only ever include this mixin once!
 // @include mat.core($custom-typography);
 
-.ngm-theme-dark {
+.ngm-theme-dark, .ngm-story__device.ngm-theme-dark.dark {
   // Include all theme styles for the mat components.
   @include mat.all-component-colors($dark-theme);
   @include components.all-component-colors($dark-theme);
diff --git a/libs/material-theme/src/styles/material/_default.theme.scss b/libs/material-theme/src/styles/material/_default.theme.scss
index 27ed2c772..2c6fbf878 100644
--- a/libs/material-theme/src/styles/material/_default.theme.scss
+++ b/libs/material-theme/src/styles/material/_default.theme.scss
@@ -37,35 +37,20 @@ $custom-typography: mat.define-typography-config(
 @include mat.core();
 
 // Include all theme styles for the mat components.
-@include mat.all-component-themes($mat-theme);
-@include components.ngm-mat-theme($mat-theme);
-@include formly.theme($mat-theme);
-@include responsive.theme($mat-theme);
-@include story.theme($mat-theme);
-@include story-designer.theme($mat-theme);
-@include widgets.theme($mat-theme);
-@include ocap.core-theme($mat-theme);
-@include ocap.analytical-grid-theme($mat-theme);
-@include ocap.breadcrumb-theme($mat-theme);
-@include ocap.controls-theme($mat-theme);
-@include ocap.entity-theme($mat-theme);
-@include ocap.common-color($mat-theme);
-@include ocap.common-density($mat-theme);
-@include auth.theme($mat-theme);
-
-// For story dashboar theme ?
-// .ngm-story__device.ngm-theme-light {
-//   @include mat.all-component-colors($mat-theme);
-//   @include components.all-component-colors($mat-theme);
-//   @include formly.color($mat-theme);
-//   @include responsive.color($mat-theme);
-//   @include story.color($mat-theme);
-//   @include story-designer.color($mat-theme);
-//   @include widgets.color($mat-theme);
-//   @include ocap.core-color($mat-theme);
-//   @include ocap.analytical-grid-color($mat-theme);
-//   @include ocap.breadcrumb-color($mat-theme);
-//   @include ocap.controls-color($mat-theme);
-//   @include ocap.entity-color($mat-theme);
-//   @include ocap.common-color($mat-theme);
-// }
\ No newline at end of file
+.ngm-theme-light, .ngm-theme-default, .ngm-story__device.ngm-theme-light.light {
+  @include mat.all-component-themes($mat-theme);
+  @include components.ngm-mat-theme($mat-theme);
+  @include formly.theme($mat-theme);
+  @include responsive.theme($mat-theme);
+  @include story.theme($mat-theme);
+  @include story-designer.theme($mat-theme);
+  @include widgets.theme($mat-theme);
+  @include ocap.core-theme($mat-theme);
+  @include ocap.analytical-grid-theme($mat-theme);
+  @include ocap.breadcrumb-theme($mat-theme);
+  @include ocap.controls-theme($mat-theme);
+  @include ocap.entity-theme($mat-theme);
+  @include ocap.common-color($mat-theme);
+  @include ocap.common-density($mat-theme);
+  @include auth.theme($mat-theme);
+}