fix(field): fix theme variables

ability to customize a component through themes

src/lib/field/field.ts

@@ -23,7 +23,7 @@ import {
   forwardRef,
   DoCheck
   } from '@angular/core';
-import { LyTheme2, ThemeVariables, mergeDeep, ElementObserver, Platform, toBoolean, DirAlias } from '@alyle/ui';
+import { LyTheme2, ThemeVariables, ElementObserver, Platform, toBoolean, DirAlias } from '@alyle/ui';
 import { LyLabel } from './label';
 import { LyPlaceholder } from './placeholder';
 import { LyHint } from './hint';
@@ -40,44 +40,39 @@ const STYLE_PRIORITY = -2;
 const DEFAULT_APPEARANCE = 'standard';
 const DEFAULT_APPEARANCE_THEME = {
   standard: {
-    root: {
-      '&:not({disabled}) {container}:hover:after': {
-        borderBottomColor: 'currentColor'
-      },
-      '&{disabled} {container}:after': {
-        borderBottomStyle: 'dotted',
-        borderColor: 'inherit'
-      },
-      'textarea{inputNative}': {
-        margin: '0.25em 0'
-      },
-      '{inputNative}:not(textarea)': {
-        padding: '0.25em 0'
-      }
+    '&:not({disabled}) {container}:hover:after': {
+      borderBottomColor: 'currentColor'
+    },
+    '&{disabled} {container}:after': {
+      borderBottomStyle: 'dotted',
+      borderColor: 'inherit'
+    },
+    'textarea{inputNative}': {
+      margin: '0.25em 0'
     },
-    container: {
+    '{inputNative}:not(textarea)': {
+      padding: '0.25em 0'
+    },
+    '& {container}': {
       padding: '1em 0 0',
       '&:after': {
         borderBottomStyle: 'solid',
         borderBottomWidth: '1px'
       }
     },
-    containerFocused: {
+    '&{focused} {container}': {
       '&:after': {
         borderWidth: '2px',
         borderColor: 'currentColor'
       }
     },
-    containerLabelHover: {
-      color: 'currentColor'
-    },
-    label: {
+    '& {label}': {
       margin: '0.25em 0'
     },
-    placeholder: {
+    '& {placeholder}': {
       margin: '0.25em 0'
     },
-    floatingLabel: {
+    '& {floatingLabel}': {
       transform: 'translateY(-1.25em)'
     }
   }
@@ -214,31 +209,8 @@ export class LyField implements OnInit, AfterContentInit, AfterViewInit, OnDestr
         throw new Error(`${val} not found in theme.field.appearance`);
       }
       this._appearanceClass = this._theme.addStyle(`ly-field.appearance:${val}`, (theme: ThemeVariables) => {
-        const appearance = mergeDeep({}, theme.field.appearance.base, theme.field.appearance[val] || DEFAULT_APPEARANCE_THEME[val]);
-        const classes = this.classes;
-        return {
-          '&': {...appearance.root},
-          [`& .${classes.container}`]: {...appearance.container},
-          [`& .${classes.prefix}`]: {...appearance.prefix},
-          [`& .${classes.infix}`]: {...appearance.infix},
-          [`& .${classes.suffix}`]: {...appearance.suffix},
-          [`& .${classes.inputNative}`]: {...appearance.input},
-          [`& .${classes.fieldset}`]: {...appearance.fieldset},
-          [`& .${classes.placeholder}`]: {
-            ...appearance.placeholder
-          },
-          [`& .${classes.label}`]: {
-            ...appearance.label
-          },
-          [`& .${classes.hintContainer}`]: {
-            ...appearance.hint
-          },
-          [`& .${classes.floatingLabel}.${classes.label}`]: {...appearance.floatingLabel},
-
-          [`&.${classes.focused} .${classes.container}`]: {
-            ...appearance.containerFocused
-          },
-        };
+        const appearance = theme.field.appearance[val] || DEFAULT_APPEARANCE_THEME[val];
+        return appearance;
       }, this._el.nativeElement, this._appearanceClass, STYLE_PRIORITY, STYLES);
     }
   }

src/lib/src/theme/variables/field.ts

@@ -0,0 +1,14 @@
+import { StyleContainer } from '../style';
+
+export interface FieldVariables {
+  root?: StyleContainer;
+  borderColor: string;
+  labelColor: string;
+  defaultConfig: {
+    appearance?: keyof FieldVariables['appearance']
+  };
+  appearance: {
+    outlined?: StyleContainer
+    filled?: StyleContainer
+  };
+}

src/lib/themes/minima/base.ts

@@ -94,6 +94,94 @@ export class MinimaBase extends LyStyleUtils {
       }
     }
   };
+
+  field = {
+    appearance: {
+      outlined: {
+        '&:not({focused}):not({disabled}):hover {fieldset}': {
+          borderColor: 'currentColor'
+        },
+        '&{focused} {fieldset}': {
+          borderWidth: '2px',
+          borderColor: 'inherit'
+        },
+        '& textarea{inputNative}': {
+          margin: '1em 0'
+        },
+        '& {inputNative}:not(textarea)': {
+          padding: '1em 0'
+        },
+        '& {container}': {
+          padding: '0 0.75em'
+        },
+        '& {fieldset}': {
+          borderWidth: '1px',
+          borderRadius: '5px',
+          padding: '0 .5em'
+        },
+        '& {prefix}': {
+          '&:after': {
+            padding: '0.25em'
+          }
+        },
+        '& suffix': {
+          '&:after': {
+            padding: '0.25em'
+          }
+        },
+        '& {label}': {
+          margin: '1em 0'
+        },
+        '& {placeholder}': {
+          margin: '1em 0'
+        },
+        '& {floatingLabel}{label}': {
+          transform: 'translateY(-1.75em)'
+        },
+        '& {hintContainer}': {
+          padding: '0 0.75em'
+        }
+      },
+      filled: {
+        '&:not({focused}):not({disabled}) {container}:hover:after': {
+          borderBottomWidth: '1px'
+        },
+        'textarea{inputNative}': {
+          margin: '1.59375em 0 0.40625em'
+        },
+        '{inputNative}:not(textarea)': {
+          padding: '1.59375em 0 0.40625em'
+        },
+        '& {container}': {
+          borderRadius: '5px 5px 0 0',
+          padding: '0 0.75em',
+          '&:after': {
+            borderBottomStyle: 'solid',
+            borderBottomColor: 'currentColor',
+            borderBottomWidth: '0'
+          }
+        },
+        '&{focused} {container}': {
+          '&:after': {
+            borderBottomWidth: '2px'
+          }
+        },
+        '& {placeholder}': {
+          margin: '1.59375em 0 0.40625em'
+        },
+        '& {label}': {
+          margin: '1em 0'
+        },
+        '& {floatingLabel}{label}': {
+          transform: 'translateY(-.75em)'
+        },
+        '& {hintContainer}': {
+          padding: '0 0.75em'
+        }
+      }
+    }
+  };
+
   constructor() {
     super();
     this.typography.lyTyp = {

src/lib/themes/minima/dark.ts

@@ -1,4 +1,3 @@
-import { field } from './variables';
 import { ThemeConfig, mergeDeep } from '@alyle/ui';
 import { MinimaBase } from './base';
 
@@ -56,12 +55,12 @@ export class MinimaDark extends MinimaBase implements ThemeConfig {
   divider = 'rgba(255, 255, 255, 0.12)';
   colorShadow = shadow;
   shadow = shadow;
-  field = mergeDeep({}, field, {
+  field = mergeDeep({}, this.field, {
     borderColor: 'rgba(255, 255, 255, 0.12)',
     labelColor: 'rgba(255, 255, 255, 0.4)',
     appearance: {
       filled: {
-        container: {
+        '& {container}': {
           backgroundColor: 'rgba(255, 255, 255, 0.04)',
         }
       }

src/lib/themes/minima/light.ts

@@ -1,5 +1,4 @@
 import { ThemeConfig, mergeDeep } from '@alyle/ui';
-import { field } from './variables';
 import { MinimaBase } from './base';
 
 const contrast = '#fff';
@@ -56,12 +55,12 @@ export class MinimaLight extends MinimaBase implements ThemeConfig {
     backdrop: 'rgba(0,0,0,.6)'
   };
   bar = '#f5f5f5';
-  field = mergeDeep({}, field, {
+  field = mergeDeep({}, this.field, {
     borderColor: 'rgba(0, 0, 0, 0.23)',
     labelColor: 'rgba(0, 0, 0, 0.6)',
     appearance: {
       filled: {
-        container: {
+        '{container}': {
           backgroundColor: 'rgba(0, 0, 0, 0.04)',
         }
       }

src/lib/themes/minima/variables.ts

@@ -5,111 +5,6 @@ export const iconButton = {
 export const icon = {
   fontSize: '24px'
 };
-export const field = {
-  appearance: {
-    outlined: {
-      root: {
-        '&:not({focused}):not({disabled}):hover {fieldset}': {
-          borderColor: 'currentColor'
-        },
-        '&{focused} {fieldset}': {
-          borderWidth: '2px',
-          borderColor: 'inherit'
-        },
-        'textarea{inputNative}': {
-          margin: '1em 0'
-        },
-        '{inputNative}:not(textarea)': {
-          padding: '1em 0'
-        }
-      },
-      container: {
-        padding: '0 0.75em'
-      },
-      fieldset: {
-        borderWidth: '1px',
-        borderRadius: '5px',
-        padding: '0 .5em'
-      },
-      containerLabelFocused: {
-        color: 'currentColor',
-        '&:after': {
-          borderWidth: '2px',
-          borderColor: 'currentColor'
-        }
-      },
-      prefix: {
-        '&:after': {
-          padding: '0.25em'
-        }
-      },
-      suffix: {
-        '&:after': {
-          padding: '0.25em'
-        }
-      },
-      label: {
-        margin: '1em 0'
-      },
-      placeholder: {
-        margin: '1em 0'
-      },
-      floatingLabel: {
-        transform: 'translateY(-1.75em)'
-      },
-      hint: {
-        padding: '0 0.75em'
-      }
-    },
-    filled: {
-      root: {
-        '&:not({focused}):not({disabled}) {container}:hover:after': {
-          borderBottomWidth: '1px'
-        },
-        'textarea{inputNative}': {
-          margin: '1.59375em 0 0.40625em'
-        },
-        '{inputNative}:not(textarea)': {
-          padding: '1.59375em 0 0.40625em'
-        }
-      },
-      container: {
-        borderRadius: '5px 5px 0 0',
-        padding: '0 0.75em',
-        '&:after': {
-          borderBottomStyle: 'solid',
-          borderBottomColor: 'currentColor',
-          borderBottomWidth: '0'
-        }
-      },
-      containerFocused: {
-        '&:after': {
-          borderBottomWidth: '2px'
-        }
-      },
-      containerLabelFocused: {
-        color: 'currentColor',
-        borderWidth: '2px',
-        borderColor: 'currentColor'
-      },
-      containerLabelHover: {
-        color: 'currentColor'
-      },
-      placeholder: {
-        margin: '1.59375em 0 0.40625em'
-      },
-      label: {
-        margin: '1em 0'
-      },
-      floatingLabel: {
-        transform: 'translateY(-.75em)'
-      },
-      hint: {
-        padding: '0 0.75em'
-      }
-    }
-  }
-};
 
 export const zIndex = {
   toolbar: 1000,