fix(field): fix theme

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

Hide file tree

Showing 5 changed files with 36 additions and 10 deletions.
diff --git a/src/lib/field/field.ts b/src/lib/field/field.ts
@@ -42,7 +42,10 @@ const styles = (theme: ThemeVariables) => {
       ...LY_COMMON_STYLES.fill,
       pointerEvents: 'none',
       display: 'flex',
-      width: '100%'
+      width: '100%',
+      '& > div': {
+        color: theme.input.borderColor
+      }
     },
     labelSpacingStart: {},
     labelCenter: {

diff --git a/src/lib/src/theme/theme-config.ts b/src/lib/src/theme/theme-config.ts
@@ -1,5 +1,6 @@
 import { InjectionToken } from '@angular/core';
 import { LyStyleUtils } from '../style-utils';
+import { StyleContainer } from './theme2.service';
 
 export const LY_THEME_GLOBAL_VARIABLES = new InjectionToken<PartialThemeVariables>('ly.theme.global.variables');
 export const LY_THEME = new InjectionToken<ThemeConfig | ThemeConfig[]>('ly_theme_config');
@@ -51,10 +52,29 @@ export interface ThemeConfig {
     backdrop: string
   };
   input: {
-    label: string,
-    underline: string,
-    /** default color */
-    withColor: string
+    /** @deprecated */
+    label?: string
+    /** @deprecated */
+    underline?: string
+    /** @deprecated */
+    withColor?: string
+    borderColor: string
+    appearance: {
+      [appearanceName: string]: {
+        containerLabel?: StyleContainer
+        containerLabelFocused?: StyleContainer
+        containerLabelHover?: StyleContainer
+        label?: StyleContainer
+        placeholder?: StyleContainer
+        input?: StyleContainer
+        labelFloating?: StyleContainer
+        containerLabelStart?: StyleContainer
+        containerLabelCenter?: StyleContainer
+        containerLabelCenterFloating?: StyleContainer
+        containerLabelEnd?: StyleContainer
+        container?: StyleContainer
+      }
+    }
   };
   iconButton: {
     size: string

diff --git a/src/lib/themes/minima/dark.ts b/src/lib/themes/minima/dark.ts
@@ -53,8 +53,11 @@ export class MinimaDark extends MinimaBase implements ThemeConfig {
   colorShadow = shadow;
   shadow = shadow;
   input = {
+    /** @deprecated */
     label: 'rgba(255, 255, 255, 0.4)',
+    /** @deprecated */
     underline: 'rgba(255, 255, 255, 0.11)',
-    ...input
+    ...input,
+    borderColor: 'rgba(255, 255, 255, 0.12)'
   };
 }
diff --git a/src/lib/themes/minima/light.ts b/src/lib/themes/minima/light.ts
@@ -53,9 +53,11 @@ export class MinimaLight extends MinimaBase implements ThemeConfig {
   };
   bar = '#f5f5f5';
   input = {
+    /** @deprecated */
     label: 'rgba(0, 0, 0, 0.6)',
+    /** @deprecated */
     underline: 'rgba(0, 0, 0, 0.11)',
-    /** default color */
-    ...input
+    ...input,
+    borderColor: 'rgba(0, 0, 0, 0.12)'
   };
 }
diff --git a/src/lib/themes/minima/variables.ts b/src/lib/themes/minima/variables.ts
@@ -85,7 +85,6 @@ export const input = {
   appearance: {
     standard: {
       containerLabel: {
-        color: 'rgba(0,0,0,.12)',
         borderBottom: 'solid 1px currentColor'
       },
       containerLabelFocused: {
@@ -114,7 +113,6 @@ export const input = {
     }, // default & important
     outlined: {
       containerLabel: {
-        color: 'rgba(0,0,0,.12)',
         '&:before': {
           ...LY_COMMON_STYLES.fill,
           content: `\'\'`