feat: change indicator app to light and dark theme

meta-d · Feb 18, 2024 · be1644d · be1644d
1 parent 8096f52
commit be1644d
Show file tree

Hide file tree

Showing 17 changed files with 303 additions and 240 deletions.
diff --git a/apps/cloud/src/app/@core/config/language.ts b/apps/cloud/src/app/@core/config/language.ts
@@ -1,9 +1,4 @@
-export enum LanguagesEnum {
-  Chinese = 'zh-CN',
-  SimplifiedChinese = 'zh-Hans',
-  TraditionalChinese = 'zh-Hant',
-  English = 'en'
-}
+import { LanguagesEnum } from "@metad/core";
 
 export const LanguagesMap = {
   'zh-CN': LanguagesEnum.SimplifiedChinese,

diff --git a/apps/cloud/src/app/features/_features-theme.scss b/apps/cloud/src/app/features/_features-theme.scss
@@ -53,6 +53,7 @@ $sidebar-collapsed-width: 40px;
     // justify-content: space-between;
     height: $shell-bar-height;
     padding: 0 .5rem;
+    background-color: transparent;
 
     .mat-mdc-tab-link {
       height: $shell-bar-height;

diff --git a/apps/cloud/src/app/features/_features.component.scss b/apps/cloud/src/app/features/_features.component.scss
@@ -1,5 +1 @@
-@import './story/toolbar/_toolbar.component';
-
-.mat-toolbar.pac__shell-bar {
-  @apply relative text-slate-300 bg-bluegray-900 dark:bg-transparent dark:shadow-none;
-}
+@import './story/toolbar/_toolbar.component';
diff --git a/apps/cloud/src/app/features/features.component.html b/apps/cloud/src/app/features/features.component.html
@@ -26,7 +26,7 @@
   </mat-sidenav>
 
   <mat-sidenav-content class="pac_sidenav-content max-h-full overflow-hidden" cdkDropListGroup>
-    <mat-toolbar class="pac__shell-bar mat-elevation-z2 flex justify-between items-center md:gap-2">
+    <mat-toolbar class="pac__shell-bar flex justify-between items-center md:gap-2">
       <div class="flex justify-start items-center overflow-hidden">
         <button *ngIf="!(sidenav.opened && sidenavMode==='side')" class="w-12 outline-none hover:text-yellow-600 transition-colors"
           (click)="sidenav.toggle();sidenavMode='over'">

diff --git a/apps/cloud/src/styles.scss b/apps/cloud/src/styles.scss
@@ -38,6 +38,7 @@
 
 @import 'libs/formly/_formly';
 @import 'libs/story-angular/src/lib/_index';
+@import 'libs/apps/indicator-market/index';
 @import './app/_app.component';
 @import './styles/cdk-menu';
 

diff --git a/apps/cloud/src/styles/base.scss b/apps/cloud/src/styles/base.scss
@@ -8,6 +8,9 @@
   --ngm-color-on-surface: #1f1f1f;
   --ngm-color-on-surface-variant: #444746;
   --ngm-divider-color-secondary: theme('colors.neutral.100');
+  --ngm-color-surface: white;
+  --ngm-color-surface-container: theme('colors.neutral.50');
+  --ngm-color-surface-container-low: theme('colors.neutral.100');
 }
 
 :root .dark {
@@ -17,6 +20,9 @@
   --ngm-color-on-surface: #e3e3e3;
   --ngm-color-on-surface-variant: #444746;
   --ngm-divider-color-secondary: theme('colors.neutral.900');
+  --ngm-color-surface: #16181c;
+  --ngm-color-surface-container: black;
+  --ngm-color-surface-container-low: theme('colors.neutral.900');
 }
 
 .mat-drawer-container {

diff --git a/apps/cloud/src/styles/default.scss b/apps/cloud/src/styles/default.scss
@@ -21,6 +21,11 @@ body.default, body.light {
   ));
 }
 
+@include indicator-market.theme(light-theme.$mat-theme);
+@include features.theme(light-theme.$mat-theme);
+@include shared.theme(light-theme.$mat-theme);
+@include public.theme(light-theme.$mat-theme);
+
 .ngm-theme-light, .ngm-theme-default {
   @include indicator-market.color(light-theme.$mat-theme);
   @include features.color(light-theme.$mat-theme);

diff --git a/libs/apps/indicator-market/index.scss b/libs/apps/indicator-market/index.scss
@@ -0,0 +1 @@
+@import "./src/lib/_indicator-market.component";
diff --git a/libs/apps/indicator-market/src/lib/_indicator-market-theme.scss b/libs/apps/indicator-market/src/lib/_indicator-market-theme.scss
@@ -2,18 +2,18 @@
 @use '@angular/material' as mat;
 
 // @todo 需要重构
-$background-color: #090909;
-$text-color: white;
-$description-color: #ffffffb3;
-$surface-color: #263238;
-$trend-up: rgb(49, 199, 90);
-$trend-down: rgb(254, 60, 46);
+// $text-color: white;
+// $description-color: #ffffffb3;
+// $surface-color: #263238;
 
 @mixin color($config-or-theme) {
   $config: mat.get-color-config($config-or-theme);
   $foreground: map.get($config, foreground);
   $primary: map.get($config, primary);
 
+  /**
+   * @deprecated 迁移至全局样式
+   */
   body.mobile {
     .cdk-overlay-container {
       z-index: 3000;
@@ -30,114 +30,23 @@ $trend-down: rgb(254, 60, 46);
 
       .mat-card {
         box-shadow: unset;
-        background-color: $surface-color;
-        color: $text-color;
+        // background-color: $surface-color;
+        // color: $text-color;
       }
 
       pac-indicator-detail {
         .mat-card {
           .ant-statistic-title {
-            color: $description-color;
+            // color: $description-color;
           }
         }
 
         pac-analytical-card {
           .mat-card-header-text {
-            color: $text-color;
+            // color: $text-color;
           }
         }
       }
-
-      .Trend-Up {
-        color: $trend-up;
-      }
-
-      .Trend-Down {
-        color: $trend-down;
-      }
-
-      .reverse-semantic-color {
-        .mat-card {
-          .Trend-Up {
-            color: $trend-down;
-          }
-
-          .Trend-Down {
-            color: $trend-up;
-          }
-        }
-      }
-    }
-  }
-
-  .indicator-market-app {
-    background-color: $background-color;
-    color: $text-color;
-
-    .pac-indicator__tag {
-      width: 60px;
-      text-align: right;
-      border-radius: 5px;
-      padding: 0 5px;
-      cursor: pointer;
-
-      &.Trend-Up {
-        background-color: $trend-up;
-        color: white;
-      }
-      &.Trend-Down {
-        background-color: $trend-down;
-        color: white;
-      }
-    }
-
-    .Trend-Up {
-      color: $trend-up;
-    }
-
-    .Trend-Down {
-      color: $trend-down;
-    }
-
-    &.reverse-semantic-color {
-      .Trend-Up {
-        color: $trend-down;
-      }
-      .Trend-Down {
-        color: $trend-up;
-      }
-      .pac-indicator__tag {
-        &.Trend-Up {
-          background-color: $trend-down;
-          color: white;
-        }
-        &.Trend-Down {
-          background-color: $trend-up;
-          color: white;
-        }
-      }
-    }
-
-    pac-indicator-item {
-      color: $text-color;
-    }
-
-    .mat-mdc-list .mat-mdc-list-item {
-      border-bottom: 1px solid #f0f0f010;
-      user-select: none;
-
-      &.selected {
-        background-color: rgba(255, 255, 255, 0.1);
-      }
-    }
-
-    .am-picker-popup-content {
-      background-color: $background-color;
-    }
-
-    .am-picker-col-mask {
-      background-image: linear-gradient(to bottom, rgb(109 109 109 / 95%), rgb(131 131 131 / 60%)),
-        linear-gradient(to top, rgb(121 121 121 / 95%), rgb(122 121 121 / 60%));
     }
   }
 
@@ -167,10 +76,6 @@ $trend-down: rgb(254, 60, 46);
       }
     }
 
-    .pac-indicator-app__business {
-      background-color: rgb(255 255 255 / 10%);
-    }
-
     .ngm-analytical-card {
       .ngm-card-header {
         white-space: nowrap;

diff --git a/libs/apps/indicator-market/src/lib/_indicator-market.component.scss b/libs/apps/indicator-market/src/lib/_indicator-market.component.scss
@@ -0,0 +1,78 @@
+$trend-up: rgb(49, 199, 90);
+$trend-down: rgb(254, 60, 46);
+$background-color: #090909;
+
+.Trend-Up {
+  color: $trend-up;
+}
+
+.Trend-Down {
+  color: $trend-down;
+}
+
+.reverse-semantic-color {
+  .mat-card {
+    .Trend-Up {
+      color: $trend-down;
+    }
+
+    .Trend-Down {
+      color: $trend-up;
+    }
+  }
+}
+
+.indicator-market-app {
+  .pac-indicator__tag {
+    width: 60px;
+    text-align: right;
+    border-radius: 5px;
+    padding: 0 5px;
+    cursor: pointer;
+
+    &.Trend-Up {
+      background-color: $trend-up;
+      color: white;
+    }
+    &.Trend-Down {
+      background-color: $trend-down;
+      color: white;
+    }
+  }
+
+  .Trend-Up {
+    color: $trend-up;
+  }
+
+  .Trend-Down {
+    color: $trend-down;
+  }
+
+  &.reverse-semantic-color {
+    .Trend-Up {
+      color: $trend-down;
+    }
+    .Trend-Down {
+      color: $trend-up;
+    }
+    .pac-indicator__tag {
+      &.Trend-Up {
+        background-color: $trend-down;
+        @apply text-neutral-100;
+      }
+      &.Trend-Down {
+        background-color: $trend-up;
+        @apply text-neutral-100;
+      }
+    }
+  }
+
+  .am-picker-popup-content {
+    background-color: $background-color;
+  }
+
+  .am-picker-col-mask {
+    background-image: linear-gradient(to bottom, rgb(109 109 109 / 95%), rgb(131 131 131 / 60%)),
+      linear-gradient(to top, rgb(121 121 121 / 95%), rgb(122 121 121 / 60%));
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		@import "./src/lib/_indicator-market.component";