feat(color): add auto contrast

A-l-y-l-e · Apr 22, 2018 · 31f177a · 31f177a
1 parent d8652f2
commit 31f177a
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 18 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -32,7 +32,9 @@ export class MyHammerConfig extends HammerGestureConfig {
     'pan': {threshold: 0}
  };
 }
-const contrastText = '#fff';
+
+const contrast = '#fff';
+
 @NgModule({
   declarations: [
     AppComponent
@@ -70,43 +72,43 @@ const contrastText = '#fff';
     {
       pink: {
         default: '#ff4b73',
-        contrastText
+        contrast
       },
       pinkLight: {
         default: '#f50057',
-        contrastText
+        contrast
       },
       cyan: {
         default: '#00bcd4',
-        contrastText
+        contrast
       },
       red: {
         default: '#FF5252',
-        contrastText
+        contrast
       },
       amber: {
         default: '#ffc107',
-        contrastText
+        contrast
       },
       teal: {
         default: '#009688',
-        contrastText
+        contrast
       },
       purple: {
         default: '#ce30c9',
-        contrastText
+        contrast
       },
       lightBlue: {
         default: '#03A9F4',
-        contrastText
+        contrast
       },
       blue: {
         default: '#2196F3',
-        contrastText
+        contrast
       },
       deepOrange: {
         default: '#FF5722',
-        contrastText
+        contrast
       },
     }),
     ThemeModule,

diff --git a/src/app/components/button-demo/button-example-04/button-example-04.component.html b/src/app/components/button-demo/button-example-04/button-example-04.component.html
@@ -18,3 +18,8 @@ <h4>Raised{{ raisedState !== undefined ? ': ' + raisedState : raisedState }}</h4
     <ly-svg src="assets/svg/Brush.svg"></ly-svg>
   </span>
 </button>
+
+<h4>Auto contrast</h4>
+
+<span bg="accent" color="auto">hello</span>
+<button ly-button bg="accent" color="auto">button</button>
diff --git a/src/lib/core/alyle-config-service.ts b/src/lib/core/alyle-config-service.ts
@@ -39,7 +39,7 @@ export const PALETTE = new InjectionToken<PaletteVariables>('ly.palette');
 export interface PaletteVariables {
   [key: string]: {
     default: string;
-    contrastText: string;
+    contrast: string;
     [key: string]: string;
   };
 }
diff --git a/src/lib/core/theme/bg/bg.directive.ts b/src/lib/core/theme/bg/bg.directive.ts
@@ -2,13 +2,18 @@ import {
   Directive,
   ElementRef,
   Input,
-  Renderer2
+  Renderer2,
+  Optional
   } from '@angular/core';
 
 import { LyTheme, StyleData } from '../../theme.service';
+import { LyColor } from '../color/color.directive';
 
+/**
+ * for all except ly-button
+ */
 @Directive({
-  selector: '[bg]'
+  selector: ':not([ly-button]):not([color="auto"])[bg], :not([color="auto"])[color][bg]'
 })
 export class LyBg {
   /** Default bg */
@@ -38,3 +43,38 @@ export class LyBg {
     return `background:${this.theme.colorOf(bg)};`;
   }
 }
+
+@Directive({
+  selector: '[bg][ly-button]:not([color]), [color="auto"]'
+})
+export class LyBgContrastTex {
+  /** Default bg */
+  private _bg = 'primary';
+  private _currentStyleData: StyleData;
+  private prefix = 'bgC';
+  constructor(
+    private theme: LyTheme,
+    private renderer: Renderer2,
+    private elementRef: ElementRef,
+    @Optional() private color: LyColor
+  ) { }
+
+  @Input('bg')
+  set bg(color: string) {
+    this._bg = color;
+    const key = `${this.prefix}${color || this._bg}`;
+    const newStyleData = this.theme.createStyle(`ly-${key}`, this.css.bind(this), color);
+    this.theme.updateClass(this.elementRef, this.renderer, newStyleData, this._currentStyleData);
+    this._currentStyleData = newStyleData;
+  }
+
+  get bg() {
+    return this._bg;
+  }
+
+  css(bg: string) {
+    const color = this.theme.colorOf(bg);
+    return `background:${color};color:${this.theme.colorOf(`${bg}:contrast`)
+    }`;
+  }
+}
diff --git a/src/lib/core/theme/bg/bg.module.ts b/src/lib/core/theme/bg/bg.module.ts
@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { LyBg } from './bg.directive';
+import { LyBg, LyBgContrastTex } from './bg.directive';
 
 @NgModule({
   imports: [
     CommonModule
   ],
-  exports: [LyBg],
-  declarations: [LyBg]
+  exports: [LyBg, LyBgContrastTex],
+  declarations: [LyBg, LyBgContrastTex]
 })
 export class BgModule { }
diff --git a/src/lib/core/theme/color/color.directive.ts b/src/lib/core/theme/color/color.directive.ts
@@ -8,7 +8,7 @@ import {
 import { LyTheme, StyleData } from '../../theme.service';
 
 @Directive({
-  selector: '[color]'
+  selector: ':not([color="auto"])[color]'
 })
 export class LyColor {
   /** Default color */