feat: indicator market page dark theme

apps/cloud/src/app/features/indicator/_indicator-theme.scss

@@ -11,7 +11,7 @@
 
   .pac-indicator-market {
     .ngm-tree-select {
-      background-color: mat.get-color-from-palette($background, card);
+      // background-color: mat.get-color-from-palette($background, card);
 
       .mat-tree.ngm-tree-select__panel {
         overflow-y: auto;

apps/cloud/src/app/features/indicator/market/market.component.html

@@ -24,7 +24,7 @@
 </div>
 
 <mat-drawer-container autosize class="flex-1 m-2 mt-0">
-  <mat-drawer #drawer class="border rounded-xl" mode="side" [(opened)]="sideMenuOpened" ngmResizer [resizerWidth]="272">
+  <mat-drawer #drawer mode="side" [(opened)]="sideMenuOpened" ngmResizer [resizerWidth]="272">
     <div class="flex justify-start items-start gap-2 p-4">
       <label class="w-10 shrink-0">{{ 'PAC.INDICATOR.Types' | translate: {Default: 'Types'} }}</label>
       <ngm-tags class="flex-1" selectable [tags]="[

apps/cloud/src/app/features/indicator/market/market.component.scss

@@ -1,13 +1,44 @@
+@use '@angular/material/core/tokens/token-utils';
+@use '@angular/material/core/style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$global-prefix: ngm;
+$prefix: (ngm, indicator-market);
+$prefix-color: (#{$prefix}, color);
+
+@function get-unthemable-tokens() {
+  @return (
+    primary-container-rounded: var(--#{$global-prefix}-primary-container-rounded)
+  );
+}
+
+@function get-color-tokens() {
+  @return (
+    color-surface: var(--#{$global-prefix}-color-surface),
+  );
+}
+
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+    get-unthemable-tokens(),
+    get-color-tokens(),
+  );
+}
+
+@include token-utils.use-tokens($prefix, get-token-slots()) {
+  .mat-drawer-content {
+    background-color: var(#{token-utils.get-token-variable(color-surface)});
+    border-top-left-radius: var(#{token-utils.get-token-variable(primary-container-rounded)});
+    border-top-right-radius: var(#{token-utils.get-token-variable(primary-container-rounded)});
+    @apply flex overflow-hidden; // for rounded corner overflow-visible;
+  }
+}
+
 :host {
   flex: 1;
   max-width: 100%;
   display: flex;
   flex-direction: column;
-}
 
-.mat-drawer.mat-drawer-side {
-  border-color: var(--mat-divider-color);
+  @include token-utils.create-token-values($prefix, get-token-slots());
 }
-.mat-drawer-content {
-  @apply overflow-hidden;
-}

apps/cloud/src/app/features/indicator/viewer/viewer.component.html

@@ -21,7 +21,7 @@
     </ol>
 </nav>
 
-<div *ngIf="indicator() as indicator" class="flex-1 px-8 py-4 flex flex-col gap-4 overflow-auto bg-slate-50 dark:bg-slate-50/10">
+<div *ngIf="indicator() as indicator" class="flex-1 px-8 py-4 flex flex-col gap-4 overflow-auto">
     <mat-card class="p-4 flex gap-4 text-lg">
         <div class="flex gap-4 text-lg">
             <div class="text-right">