fix(theme): multiple themes

src/app/app.component.html

@@ -27,7 +27,7 @@
   </ly-toolbar>
 </div>
 <ly-drawer-container class="drawer">
-  <ly-drawer [config]="{width: 200}" bg="main" #nav="lyDrawer" [opened]="router.url !== '/'" [mode]="'side'" #_left class="items">
+  <ly-drawer [config]="{width: 200}" bg="background:primary" #nav="lyDrawer" [opened]="router.url !== '/'" [mode]="'side'" #_left class="items">
     <div *ngFor="let category of routesComponents">
       <span class="category-name">{{ category.name }}</span>
       <a ly-button class="nav-button" [routerLink]="[(category.name == 'Components'?'/component/':'/') + component.route]" *ngFor="let component of category.routes">{{ component.name }}</a>

src/app/app.module.ts

@@ -61,19 +61,21 @@ const contrast = '#fff';
         purple_light: 'rgb(106, 36, 212)',
         colorSchemes: {
           light: {
-            shadow: 'rgba(0, 0, 0, 0.1111)',
+            shadow: '#c0c0c0',
+            codeColor: 'rgba(0, 23, 31, 0.7)',
             myColor: 'pink',
             others: {
               custom: '#00bcd4'
             }
           },
           dark: {
-            shadow: '#252525',
+            shadow: 'rgba(0, 0, 0, 1)',
+            codeColor: '#efefef',
             myColor: 'teal'
           },
           myCustomScheme: {
             background: {
-              paper: '#000',
+              primary: '#000',
             },
             text: {
               default: '#fff'

src/app/components/get-started/get-started/get-started.component.html

@@ -1,17 +1,17 @@
 <h1>Get Started</h1>
 <h3>1. Install Alyle UI</h3>
 <p>
-  <span prism language="bash" code="yarn add @alyle/ui" bg="background:paper"></span> or <span prism language="bash" code="npm i @alyle/ui" bg="background:paper"></span>
+  <span prism language="bash" code="yarn add @alyle/ui" bg="background:primary" color="codeColor"></span> or <span prism language="bash" code="npm i @alyle/ui" bg="background:primary" color="codeColor"></span>
 </p>
 
 <h3>2. Import AlyleUIModule in AppModule</h3>
-<prism language="typescript" [code]="code" bg="background:paper"></prism>
+<prism language="typescript" [code]="code" bg="background:primary" color="codeColor"></prism>
 
 <h3>3. Install HammerJs</h3>
 <p>
-  <span prism language="bash" code="yarn add hammerjs" bg="background:paper"></span> or <span prism language="bash" code="npm i hammerjs" bg="background:paper"></span>
+  <span prism language="bash" code="yarn add hammerjs" bg="background:primary" color="codeColor"></span> or <span prism language="bash" code="npm i hammerjs" bg="background:primary" color="codeColor"></span>
 </p>
 
 <h4>Import in src/main.ts</h4>
 <p>
-  <span prism language="typescript" code="import 'hammerjs';" bg="background:paper"></span>
+  <span prism language="typescript" code="import 'hammerjs';" bg="background:primary" color="codeColor"></span>

src/app/components/get-started/get-started/get-started.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input, ChangeDetectionStrategy, Inject } from '@angular/core';
-import { LyTheme, PALETTE } from '@alyle/ui';
+import { LyTheme } from '@alyle/ui';
 
 @Component({
   selector: 'app-get-started',
@@ -10,8 +10,7 @@ import { LyTheme, PALETTE } from '@alyle/ui';
 export class GetStartedComponent implements OnInit {
   code: string;
   constructor(
-    public theme: LyTheme,
-    @Inject(PALETTE) private palette: LyTheme
+    public theme: LyTheme
   ) {
     this.code = `...
 /** Important for Animations */

src/app/components/multiple-themes/multiple-themes-demo-01/child-theme/child-theme.component.html

@@ -1,5 +1,5 @@
-<p bg="background:paper" color="text">
+<p bg="background:primary" color="text">
   child-theme works!
   theme name: {{theme.Id}}
-  theme scheme: {{palette.scheme}}
+  theme scheme: {{theme.palette.scheme}}
 </p>

src/app/components/multiple-themes/multiple-themes-demo-01/child-theme/child-theme.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { LyTheme, PALETTE } from '@alyle/ui';
+import { LyTheme } from '@alyle/ui';
 import { Inject } from '@angular/core';
 
 @Component({
@@ -10,8 +10,7 @@ import { Inject } from '@angular/core';
 export class ChildThemeComponent implements OnInit {
 
   constructor(
-    public theme: LyTheme,
-    @Inject(PALETTE) public palette: any
+    public theme: LyTheme
   ) { }
 
   ngOnInit() {

src/app/components/multiple-themes/multiple-themes-demo-01/multiple-themes-demo-01.component.html

@@ -1,6 +1,6 @@
 <div bg="background" color="text">
   theme name: {{ theme.Id }}
-  <p>
+  <p bg="background:primary">
     multiple-themes-demo-01 works!
   </p>
   <div bg="primary">primary</div>

src/app/components/multiple-themes/multiple-themes-demo-01/multiple-themes-demo-01.component.ts

@@ -10,8 +10,7 @@ import { LyTheme, PALETTE, PaletteVariables as LyPalette } from '@alyle/ui';
 export class MultipleThemesDemo01Component {
 
   constructor(
-    public theme: LyTheme,
-    @Inject(PALETTE) public palette: LyPalette
+    public theme: LyTheme
   ) { }
 
 }

src/app/components/multiple-themes/multiple-themes-demo-01/multiple-themes-demo-01.module.ts

@@ -14,7 +14,8 @@ import { RouterModule } from '@angular/router';
     LyCommonModule,
     AlyleUIModule.forChild({
       name: 'darkTheme',
-      scheme: 'dark'
+      scheme: 'dark',
+      shadow: 'rgba(0, 0, 0, 1)',
     }),
     LyButtonModule
   ],

src/app/components/theming/theming/theming.component.html

@@ -1,3 +1,3 @@
 <h1>Theming</h1>
 <h3>Create custom theme</h3>
-<prism language="typescript" [code]="code"></prism>
+<prism language="typescript" [code]="code" bg="background:tertiary"></prism>

src/app/demo-view/view/view.component.html

@@ -1,4 +1,4 @@
-<div [newRaised]="[9]" bg="background:paper">
+<div [newRaised]="[9, 'shadow']" bg="background:primary" color="text">
   <ly-toolbar *ngIf="viewLabel" ly-dense bg="bar" [style.font-size.px]="16">
     <ly-toolbar-item ly-toolbar-item-padding>{{ viewLabel }}</ly-toolbar-item>
   </ly-toolbar>

src/lib/button/button.service.ts

@@ -19,7 +19,6 @@ export class LyButtonService {
   private rootClassName: string;
   private themeClassName: string;
   constructor(
-    @Inject(PALETTE) private palette: ThemeVariables,
     private theme: LyTheme
   ) {
     this.rootClassName = this.theme.createStyle('rbtn', this.rootStyle.bind(this), undefined, true).id;
@@ -32,9 +31,9 @@ export class LyButtonService {
   }
 
   private style() {
-    return `font-family:${this.palette.typography.fontFamily};` +
-    `font-size: ${this.palette.typography.fontSize}px;` +
-    `color: ${this.palette.text.default};`;
+    return `font-family:${this.theme.palette.typography.fontFamily};` +
+    `font-size: ${this.theme.palette.typography.fontSize}px;` +
+    `color: ${this.theme.palette.text.default};`;
   }
   private rootStyle() {
     return '-webkit-tap-highlight-color: transparent;' +

src/lib/button/button.ts

@@ -70,7 +70,6 @@ export class LyButton implements AfterViewInit {
   constructor(
     private elementRef: ElementRef,
     private renderer: Renderer2,
-    @Inject(PALETTE) private palette: ThemeVariables,
     private theme: LyTheme,
     private buttonService: LyButtonService,
     @Optional() private bgAndColor: LyBgColorAndRaised
@@ -94,10 +93,10 @@ export class LyButton implements AfterViewInit {
     let style =
     `box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;` +
     `cursor: default;` +
-    `color: ${this.palette.text.disabled} !important;` +
+    `color: ${this.theme.palette.text.disabled} !important;` +
     `pointer-events: none;`;
     if (this.bgAndColor && (this.bgAndColor.raised || this.bgAndColor.bg)) {
-      style += `background-color: ${this.palette.button.disabled} !important;`;
+      style += `background-color: ${this.theme.palette.button.disabled} !important;`;
     }
     return style;
   }

src/lib/core/src/default-theme.ts

@@ -21,15 +21,12 @@ export const defaultTheme: ThemeVariables = {
   },
   colorSchemes: {
     light: {
-      /** Deprecated */
-      colorText: 'rgba(0, 0, 0, 0.87)',
-      /** Deprecated */
-      bgText: '#f9f9f9',
-      /** Deprecated */
-      main: '#fff',
       background: {
-        default: '#fafafa',
-        paper: '#fff'
+        default: '#fafafa', // secondary
+        primary: '#fff',
+        secondary: '#fafafa',
+        tertiary: '#f5f5f5',
+        base: '#E0E0E0'
       },
       text: {
         default: 'rgba(0, 0, 0, 0.87)',
@@ -51,19 +48,24 @@ export const defaultTheme: ThemeVariables = {
       },
     },
     dark: {
-      accent: {
+      primary: {
         default: '#9c27b0',
         contrast
       },
-      /** Deprecated */
-      colorText: '#fff',
-      /** Deprecated */
-      bgText: '#303030',
-      /** Deprecated */
-      main: '#383838',
+      accent: {
+        default: '#ffeb3b',
+        contrast: 'rgba(0, 0, 0, 0.87)'
+      },
+      warn: {
+        default: '#f44336',
+        contrast: 'rgba(0, 0, 0, 0.87)'
+      },
       background: {
-        default: '#303030',
-        paper: '#424242'
+        default: '#303030', // secondary
+        primary: '#424242',
+        secondary: '#303030',
+        tertiary: '#212121',
+        base: '#0E0E0E'
       },
       text: {
         default: '#fff',

src/lib/core/src/theme.service.ts

@@ -36,6 +36,7 @@ export class LyTheme {
   scheme: Subject<any>;
   typography: Subject<any>;
   shade: Subject<string>;
+  palette: ThemeVariables;
 
   /** get class name of color */
   getClassKey(color: string, of: 'color' | 'bg') {
@@ -44,31 +45,32 @@ export class LyTheme {
 
   constructor(
     @Inject(THEME_VARIABLES) config: ThemeVariables,
-    @Inject(THEME_VARIABLES) @Host() @Self() @Optional() parent: ThemeVariables,
     @Inject(IS_CORE_THEME) private isRoot: boolean,
-    @Inject(PALETTE) private palette: ThemeVariables,
+    // @Inject(PALETTE) private palette: ThemeVariables,
     @Inject(DOCUMENT) private document,
     private rootService: LyRootService
   ) {
-    const newConfig = mergeDeep(mergeDeep(defaultTheme, parent), config);
+    const newConfig = mergeDeep(defaultTheme, config);
 
-    const _palette = {...newConfig};
+    const _palette = newConfig;
     const theme = this.rootService.registerTheme(_palette);
 
     /** check if exist scheme */
     if (!theme.palette.colorSchemes[theme.palette.scheme]) {
       throw new Error(`scheme ${theme.palette.scheme} not exist in ${theme.palette.name}`);
     }
     this._styleMap = theme.map;
-    Object.assign(palette, theme.palette, { scheme: config.scheme }, ...theme.palette.colorSchemes[newConfig.scheme]);
+    // Object.assign(this.palette, theme.palette, { scheme: config.scheme }, ...theme.palette.colorSchemes[newConfig.scheme]);
+    this.palette = Object.assign({}, theme.palette, { scheme: config.scheme }, ...theme.palette.colorSchemes[newConfig.scheme]);
     this.themeName = newConfig.name;
     this.Id = `${this.themeName}`;
     this.setCoreStyle();
   }
 
   setScheme(scheme: string) {
-    const newPalette = this.rootService.getTheme(this.palette.name);
-    Object.assign(this.palette, newPalette, ...newPalette.colorSchemes[scheme], { scheme });
+    const newPalette = Object.assign({}, this.rootService.getTheme(this.palette.name));
+    // Object.assign(this.palette, newPalette, ...newPalette.colorSchemes[scheme], { scheme });
+    this.palette = Object.assign({}, newPalette, ...newPalette.colorSchemes[scheme], { scheme });
     console.log(this.palette);
     this.updateOthersStyles();
   }
@@ -94,12 +96,13 @@ export class LyTheme {
   }
   createStyle(key: string, fn: () => string, prefix = 'ly_', forRoot?: boolean) {
     let mapStyles: Map<string, StyleData>;
-    let newKey = createKeyOf(key);
+    let newKey;
     if (forRoot) {
+      newKey = createKeyOf(key);
       mapStyles = this.rootService.themeRootMap;
     } else {
       mapStyles = this._styleMap;
-      newKey += this.Id;
+      newKey = createKeyOf(key + this.Id + this.palette.scheme);
     }
     const styleData: StyleData = {key: newKey, value: {
       fn: fn
@@ -236,9 +239,18 @@ export function parsePalette(palette: { [key: string]: any }) {
 }
 
 function createKeyOf(str: string) {
-  return str.split('').map((char) => {
-      return char.charCodeAt(0).toString(36);
-  }).join('');
+  // return str.split('').map((char) => {
+  //     return char.charCodeAt(0).toString(36);
+  // }).join('');
+  let hash = 0;
+  const len = str.length;
+  for (let i = 0; i < len; i++) {
+    // tslint:disable-next-line:no-bitwise
+    hash  = ((hash << 5) - hash) + str.charCodeAt(i);
+    // tslint:disable-next-line:no-bitwise
+    hash |= 0; // to 32bit integer
+  }
+  return hash.toString(36);
 }
 
 function get(obj: Object, path: any): string {

src/lib/core/src/theme/bg-color-and-raised.directive.ts

@@ -45,7 +45,6 @@ export class LyBgColorAndRaised implements OnChanges {
     private renderer: Renderer2,
     private elementRef: ElementRef,
     private shadow: LyShadowService,
-    @Inject(PALETTE) private palette: ThemeVariables,
     @Inject(LY_GLOBAL_CONTRAST) @Optional() private contrast: boolean
   ) { }
 
@@ -81,9 +80,9 @@ export class LyBgColorAndRaised implements OnChanges {
       key = `raised${this._raisedState}${this.elevation}`;
       newStyleData = this.theme.createStyle(`ly-${key}`, () => {
         if (this._raisedState) {
-          return shadowBuilder(this.elevation, this.palette.colorShadow);
+          return shadowBuilder(this.elevation, this.theme.palette.colorShadow);
         } else {
-          return shadowBuilder(0, this.palette.colorShadow);
+          return shadowBuilder(0, this.theme.palette.colorShadow);
         }
       });
     }

src/theme.css

@@ -12,7 +12,6 @@ pre[class*="language-"] {
   overflow: auto;
 }
 code[class*="language-"], pre[class*="language-"] {
-  color: rgba(0, 23, 31, 0.7);
   background: none;
   font-family: 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
   text-align: left;