fix(field): fix bg filled in mode dark

A-l-y-l-e · Oct 13, 2018 · 7c085f2 · 7c085f2
1 parent 8542964
commit 7c085f2
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 19 deletions.
diff --git a/src/lib/field/field.ts b/src/lib/field/field.ts
@@ -12,7 +12,7 @@ import {
   ViewChild,
   ViewEncapsulation
   } from '@angular/core';
-import { LY_COMMON_STYLES, LyTheme2, ThemeVariables } from '@alyle/ui';
+import { LY_COMMON_STYLES, LyTheme2, ThemeVariables, mergeDeep } from '@alyle/ui';
 import { LyInputNative } from './input';
 import { LyLabel } from './label';
 import { LyPlaceholder } from './placeholder';
@@ -21,11 +21,6 @@ const STYLE_PRIORITY = -2;
 const DEFAULT_APPEARANCE = 'standard';
 const DEFAULT_WITH_COLOR = 'primary';
 const styles = (theme: ThemeVariables) => {
-  const placeholderAndLabel = {
-    ...LY_COMMON_STYLES.fill,
-    pointerEvents: 'none',
-    color: theme.input.label
-  };
   return {
     root: {
       display: 'inline-block',
@@ -67,7 +62,9 @@ const styles = (theme: ThemeVariables) => {
       fontSize: '75%'
     },
     placeholder: {
-      ...placeholderAndLabel
+      ...LY_COMMON_STYLES.fill,
+      pointerEvents: 'none',
+      color: theme.input.label
     },
     focused: {},
     hint: {},
@@ -137,7 +134,7 @@ export class LyField implements OnInit, AfterContentInit, AfterViewInit {
         throw new Error(`${val} not found in theme.input.appearance`);
       }
       this._appearanceClass = this._theme.addStyle(`ly-field.appearance:${val}`, (theme: ThemeVariables) => {
-        const appearance = (theme.input as any).appearance[val];
+        const appearance = mergeDeep({}, theme.input.appearance.any, theme.input.appearance[val]);
         return {
           [`& .${this.classes.container}`]: appearance.container,
           [`& .${this.classes.inputNative}`]: appearance.input,

diff --git a/src/lib/src/style-utils.ts b/src/lib/src/style-utils.ts
@@ -109,6 +109,11 @@ export function isObject(item) {
   return (item && typeof item === 'object' && !Array.isArray(item));
 }
 
+export function mergeDeep<T, U>(target: T, source: U): T & U;
+export function mergeDeep<T, U, V>(target: T, source1: U, source2: V): T & U & V;
+export function mergeDeep<T, U, V, W>(target: T, source1: U, source2: V, source3: W): T & U & V & W;
+export function mergeDeep(target: object, ...sources: any[]): any;
+
 /**
  * Deep merge two objects.
  * @param target

diff --git a/src/lib/themes/minima/dark.ts b/src/lib/themes/minima/dark.ts
@@ -1,5 +1,5 @@
 import { input } from './variables';
-import { ThemeConfig } from '@alyle/ui';
+import { ThemeConfig, mergeDeep } from '@alyle/ui';
 import { MinimaBase } from './base';
 
 const contrast = '#fff';
@@ -52,12 +52,18 @@ export class MinimaDark extends MinimaBase implements ThemeConfig {
   divider = 'rgba(255, 255, 255, 0.12)';
   colorShadow = shadow;
   shadow = shadow;
-  input = {
+  input = mergeDeep({}, input, {
     /** @deprecated */
     label: 'rgba(255, 255, 255, 0.4)',
     /** @deprecated */
     underline: 'rgba(255, 255, 255, 0.11)',
-    ...input,
-    borderColor: 'rgba(255, 255, 255, 0.12)'
-  };
+    borderColor: 'rgba(255, 255, 255, 0.12)',
+    appearance: {
+      filled: {
+        container: {
+          backgroundColor: 'rgba(255, 255, 255, 0.04)',
+        }
+      }
+    }
+  });
 }
diff --git a/src/lib/themes/minima/light.ts b/src/lib/themes/minima/light.ts
@@ -1,4 +1,4 @@
-import { ThemeConfig } from '@alyle/ui';
+import { ThemeConfig, mergeDeep } from '@alyle/ui';
 import { input } from './variables';
 import { MinimaBase } from './base';
 
@@ -52,12 +52,18 @@ export class MinimaLight extends MinimaBase implements ThemeConfig {
     backdrop: 'rgba(0,0,0,.6)'
   };
   bar = '#f5f5f5';
-  input = {
+  input = mergeDeep({}, input, {
     /** @deprecated */
     label: 'rgba(0, 0, 0, 0.6)',
     /** @deprecated */
     underline: 'rgba(0, 0, 0, 0.11)',
-    ...input,
-    borderColor: 'rgba(0, 0, 0, 0.12)'
-  };
+    borderColor: 'rgba(0, 0, 0, 0.12)',
+    appearance: {
+      filled: {
+        container: {
+          backgroundColor: 'rgba(0, 0, 0, 0.04)',
+        }
+      }
+    }
+  });
 }
diff --git a/src/lib/themes/minima/variables.ts b/src/lib/themes/minima/variables.ts
@@ -180,7 +180,7 @@ export const input = {
     },
     filled: {
       container: {
-        backgroundColor: 'rgba(0, 0, 0, 0.04)',
+        // backgroundColor: 'rgba(0, 0, 0, 0.04)',
         borderRadius: '5px 5px 0 0'
       },
       containerLabel: {