refactor(css): 组件theme样式移植core中处理

docs/start.md

@@ -43,3 +43,11 @@ npm install -g @angular/cli
 
 - https://nodejs.org/en/docs/
 - https://github.com/angular/angular-cli/wiki
+
+## Material Resources
+
+- [Material Palette](https://www.materialpalette.com/)
+- [Material Design Colors](https://www.materialui.co/colors)
+- [Material Design Dark Color Palette](https://designguidelines.withgoogle.com/wearos/style/color.html)
+- [Material Colors OSX Desktop App](https://github.com/romannurik/MaterialColorsApp)
+- [official resource](https://material.io/design/)

src/app/component/chat-widget/chat-widget.component.scss

@@ -33,7 +33,6 @@
   display: flex;
   flex-direction: column;
   box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16);
-  background: #2196f3;
 }
 
 .chat-box-hidden {
@@ -101,7 +100,7 @@
 
 .chat-message-date {
   font-size: 11px;
-  color: #8D898D;
+  color: #8d898d;
   padding: 5px;
 }
 
@@ -127,17 +126,17 @@
 }
 
 .chat-message-received .chat-message-text {
-  background: #B9D6F2;
+  background: #b9d6f2;
   margin-left: 50px;
   border-bottom-left-radius: 0;
 }
 
 .chat-message-received .chat-message-text:before {
   position: absolute;
-  content: " ";
+  content: ' ';
   left: -10px;
   bottom: 0;
-  border-right: solid 10px #B9D6F2;
+  border-right: solid 10px #b9d6f2;
   border-top: solid 10px transparent;
   z-index: 0;
 }
@@ -161,17 +160,17 @@
 }
 
 .chat-message-sent .chat-message-text {
-  background: #84DCCF;
+  background: #84dccf;
   margin-right: 50px;
   border-bottom-right-radius: 0;
 }
 
 .chat-message-sent .chat-message-text:after {
   position: absolute;
-  content: " ";
+  content: ' ';
   right: -10px;
   bottom: 0;
-  border-left: solid 10px #84DCCF;
+  border-left: solid 10px #84dccf;
   border-top: solid 10px transparent;
   z-index: 0;
 }
@@ -204,11 +203,11 @@
 }
 
 .red .chat-button {
-  background: #DD0031;
+  background: #dd0031;
 }
 
 .red .chat-box {
-  background: #DD0031;
+  background: #dd0031;
 }
 
 @media (min-width: 576px) {

src/app/component/chat-widget/chat-widget.theme.scss

@@ -0,0 +1,22 @@
+@mixin stbui-chat-widget-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .chat-box {
+    background-color: mat-color($primary);
+
+    &.mat-primary {
+      background-color: mat-color($primary);
+    }
+
+    &.mat-accent {
+      background-color: mat-color($accent);
+    }
+    &.mat-warn {
+      background-color: mat-color($warn);
+    }
+  }
+}

src/app/component/core/theming/_all-theme.scss

@@ -0,0 +1,19 @@
+@import '../../pagination/pagination.theme';
+@import '../../date-picker/date-picker.theme';
+@import '../../notification/notification.theme';
+@import '../../message/message.theme';
+@import '../../dialog/dialog.theme';
+@import '../../chat-widget/chat-widget.theme';
+@import '../../tag-select/tag-select.theme';
+@import '../../loading/loading.theme';
+
+@mixin stbui-theme($theme) {
+  @include stbui-pagination-theme($theme);
+  @include stbui-date-picker-theme($theme);
+  @include stbui-chat-widget-theme($theme);
+  @include stbui-notification-theme($theme);
+  @include stbui-tag-select-theme($theme);
+  @include stbui-message-theme($theme);
+  @include stbui-dialog-theme($theme);
+  @include stbui-loading-theme($theme);
+}

src/app/component/core/theming/prebuilt/blue-grey-deep-orange.scss

@@ -0,0 +1,13 @@
+@import '~@angular/material/theming';
+@import '../all-theme';
+
+@include mat-core();
+
+$primary: mat-palette($mat-blue-grey, 700);
+$accent: mat-palette($mat-deep-orange, 500, A100, A400);
+$warn: mat-palette($mat-red, 600);
+
+$theme: mat-light-theme($primary, $accent, $warn);
+
+@include angular-material-theme($theme);
+@include stbui-theme($theme);

src/app/component/core/theming/prebuilt/blue-orange.scss

@@ -0,0 +1,13 @@
+@import '~@angular/material/theming';
+@import '../all-theme';
+
+@include mat-core();
+
+$primary: mat-palette($mat-blue, 700);
+$accent: mat-palette($mat-orange, 800, A100, A400);
+$warn: mat-palette($mat-red, 600);
+
+$theme: mat-light-theme($primary, $accent, $warn);
+
+@include angular-material-theme($theme);
+@include stbui-theme($theme);

src/app/component/core/theming/prebuilt/deeppurple-amber.scss

@@ -0,0 +1,13 @@
+@import '~@angular/material/theming';
+@import '../all-theme';
+
+@include mat-core();
+
+$primary: mat-palette($mat-deep-purple);
+$accent: mat-palette($mat-amber, A200, A100, A400);
+$warn: mat-palette($mat-red, 600);
+
+$theme: mat-light-theme($primary, $accent, $warn);
+
+@include angular-material-theme($theme);
+@include stbui-theme($theme);

src/app/component/core/theming/prebuilt/indigo-pink.scss

@@ -0,0 +1,13 @@
+@import '~@angular/material/theming';
+@import '../all-theme';
+
+@include mat-core();
+
+$primary: mat-palette($mat-indigo, 500);
+$accent: mat-palette($mat-pink, A200, A100, A400);
+$warn: mat-palette($mat-red, 600);
+
+$theme: mat-light-theme($primary, $accent, $warn);
+
+@include angular-material-theme($theme);
+@include stbui-theme($theme);

src/app/component/core/theming/prebuilt/orange-light-blue.scss

@@ -0,0 +1,13 @@
+@import '~@angular/material/theming';
+@import '../all-theme';
+
+@include mat-core();
+
+$primary: mat-palette($mat-orange, 800);
+$accent: mat-palette($mat-light-blue, 600, A100, A400);
+$warn: mat-palette($mat-red, 600);
+
+$theme: mat-light-theme($primary, $accent, $warn);
+
+@include angular-material-theme($theme);
+@include stbui-theme($theme);

src/app/component/core/theming/prebuilt/pink-bluegrey.scss

@@ -0,0 +1,13 @@
+@import '~@angular/material/theming';
+@import '../all-theme';
+
+@include mat-core();
+
+$primary: mat-palette($mat-pink, 700, 500, 900);
+$accent: mat-palette($mat-blue-grey, A200, A100, A400);
+$warn: mat-palette($mat-red, 600);
+
+$theme: mat-dark-theme($primary, $accent, $warn);
+
+@include angular-material-theme($theme);
+@include stbui-theme($theme);

src/app/component/core/theming/prebuilt/purple-green.scss

@@ -0,0 +1,13 @@
+@import '~@angular/material/theming';
+@import '../all-theme';
+
+@include mat-core();
+
+$primary: mat-palette($mat-purple, 700, 500, 800);
+$accent: mat-palette($mat-green, A200, A100, A400);
+$warn: mat-palette($mat-red, 600);
+
+$theme: mat-dark-theme($primary, $accent, $warn);
+
+@include angular-material-theme($theme);
+@include stbui-theme($theme);

src/app/component/core/theming/prebuilt/teal-orange.scss

@@ -0,0 +1,13 @@
+@import '~@angular/material/theming';
+@import '../all-theme';
+
+@include mat-core();
+
+$primary: mat-palette($mat-teal, 700);
+$accent: mat-palette($mat-orange, 800, A100, A400);
+$warn: mat-palette($mat-red, 600);
+
+$theme: mat-light-theme($primary, $accent, $warn);
+
+@include angular-material-theme($theme);
+@include stbui-theme($theme);

src/app/component/date-picker/date-picker.theme.scss

@@ -1,4 +1,4 @@
-@mixin date-picker-theme($theme) {
+@mixin stbui-date-picker-theme($theme) {
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
   $warn: map-get($theme, warn);

src/app/component/dialog/dialog.theme.scss

@@ -1,4 +1,4 @@
-@mixin dialog-theme($theme) {
+@mixin stbui-dialog-theme($theme) {
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
   $warn: map-get($theme, warn);

src/app/component/loading/loading.component.scss

@@ -18,7 +18,6 @@
   height: 96px;
   line-height: 96px;
   margin: 10px auto;
-  background: #3F51B5;
   text-align: center;
   border-radius: 2px;
   box-shadow: 0 2px 14px 0 rgba(0, 0, 0, .22)

src/app/component/loading/loading.theme.scss

@@ -0,0 +1,21 @@
+@mixin stbui-loading-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .logo {
+    background-color: mat-color($primary);
+
+    &.mat-primary {
+      background-color: mat-color($primary);
+    }
+    &.mat-accent {
+      background-color: mat-color($accent);
+    }
+    &.mat-warn {
+      background-color: mat-color($warn);
+    }
+  }
+}

src/app/component/message/message.theme.scss

@@ -1,4 +1,4 @@
-@mixin message-theme($theme) {
+@mixin stbui-message-theme($theme) {
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
   $warn: map-get($theme, warn);

src/app/component/notification/notification.component.html

@@ -1,9 +1,4 @@
-<mat-card class="notification"
-          [class.notification-success]="data.type==='success'"
-          [class.notification-info]="data.type==='info'"
-          [class.notification-warn]="data.type==='warn'"
-          [class.notification-error]="data.type==='error'"
->
+<mat-card class="notification" [class.mat-accent]="data.type==='success'" [class.mat-primary]="data.type==='info'" [class.mat-warn]="data.type==='warn'">
   <mat-card-subtitle class="notification-title">
     {{data.title}}
     <span style="flex: 1 1 1e-09px;"></span>
@@ -12,4 +7,4 @@
     </button>
   </mat-card-subtitle>
   <mat-card-content class="notification-content" [innerHTML]="data.message"></mat-card-content>
-</mat-card>
+</mat-card>

src/app/component/notification/notification.theme.scss

@@ -1,4 +1,4 @@
-@mixin notification-theme($theme) {
+@mixin stbui-notification-theme($theme) {
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
   $warn: map-get($theme, warn);
@@ -7,17 +7,15 @@
 
   .notification {
     background-color: mat-color($primary);
-  }
-  .notification-info {
-    background-color: mat-color($primary);
-  }
-  .notification-primary {
-    background-color: mat-color($primary);
-  }
-  .notification-success {
-    background-color: mat-color($accent);
-  }
-  .notification-warn {
-    background-color: mat-color($warn);
+
+    &.mat-primary {
+      background-color: mat-color($primary);
+    }
+    &.mat-accent {
+      background-color: mat-color($accent);
+    }
+    &.mat-warn {
+      background-color: mat-color($warn);
+    }
   }
 }

src/app/component/notification/public-api.ts

@@ -9,4 +9,4 @@ export * from './notification-container';
 export * from './notification.component';
 export * from './notification.config';
 export * from './notification.ref';
-export  * from './notification.animation';
+export * from './notification.animation';

src/app/component/pagination/pagination.theme.scss

@@ -1,4 +1,4 @@
-@mixin pagination-theme($theme) {
+@mixin stbui-pagination-theme($theme) {
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
   $warn: map-get($theme, warn);

src/app/component/tag-select/tag-select.component.scss

@@ -57,13 +57,3 @@
     }
   }
 }
-
-// theme
-.tag-select {
-  &-item {
-    > a.active {
-      background-color: #3f51b5;
-      color: white;
-    }
-  }
-}

src/app/component/tag-select/tag-select.theme.scss

@@ -1,8 +1,16 @@
-.tag-select {
-  &-item {
-    > a.active {
-      background-color: #3f51b5;
-      color: white;
+@mixin stbui-tag-select-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .tag-select {
+    &-item {
+      > a.active {
+        background-color: mat-color($primary);
+        color: #fff;
+      }
     }
   }
 }