fix(button, typography): fix variables

src/lib/button/button.style.ts

@@ -1,10 +1,10 @@
-import { LY_COMMON_STYLES } from '@alyle/ui';
+import { ThemeVariables } from '@alyle/ui';
 
-export const styles = theme => {
-  const { button, fontFamily } = theme.typography;
+export const styles = (theme: ThemeVariables) => {
+  const typography = theme.typography;
   const _styles = ({
     root: {
-      fontFamily,
+      typography: typography.fontFamily,
       color: theme.text.default,
       '-webkit-tap-highlight-color': 'transparent',
       backgroundColor: `rgba(0, 0, 0, 0)`,
@@ -32,7 +32,7 @@ export const styles = theme => {
       '&::-moz-focus-inner, &::-moz-focus-inner': {
         border: 0
       },
-      ...button
+      ...typography.lyTyp.button
     },
     content: {
       padding: 0,
@@ -42,14 +42,14 @@ export const styles = theme => {
       alignContent: 'inherit',
       width: '100%',
       height: '100%',
-      boxSizing: 'border-box',
+      boxSizing: 'border-box'
     }
   });
   if (typeof _styles.root.fontSize === 'number') {
-    _styles.root.fontSize = theme.pxToRem(_styles.root.fontSize);
+    _styles.root.fontSize = theme.pxToRem(_styles.root.fontSize) as any;
   }
   if (typeof _styles.root.letterSpacing === 'number') {
-    _styles.root.letterSpacing = theme.pxToRem(_styles.root.letterSpacing);
+    _styles.root.letterSpacing = theme.pxToRem(_styles.root.letterSpacing) as any;
   }
   return _styles;
 };

src/lib/button/button.ts

@@ -16,7 +16,8 @@ import {
   Platform,
   toBoolean,
   LyTheme2,
-  LyCommon
+  LyCommon,
+  ThemeVariables
 } from '@alyle/ui';
 import { Ripple, LyRippleService } from '@alyle/ui/ripple';
 import { styles } from './button.style';
@@ -28,9 +29,9 @@ type LyButtonSize = 'small' | 'medium' | 'large';
 
 /** @ignore */
 const Size: Record<LyButtonSize, any> = {
-  small: theme => ({
+  small: (theme: ThemeVariables) => ({
     padding: '0 8px',
-    fontSize: theme.pxToRem(theme.typography.button.fontSize - 1),
+    fontSize: theme.pxToRem(theme.typography.lyTyp.button.fontSize - 1),
     minHeight: '32px',
     minWidth: '48px'
   }),
@@ -39,9 +40,9 @@ const Size: Record<LyButtonSize, any> = {
     minHeight: '36px',
     minWidth: '64px'
   }),
-  large: (theme) => ({
+  large: (theme: ThemeVariables) => ({
     padding: '0 21px',
-    fontSize: theme.pxToRem(theme.typography.button.fontSize + 1),
+    fontSize: theme.pxToRem(theme.typography.lyTyp.button.fontSize + 1),
     minHeight: '40px',
     minWidth: '96px'
   })

src/lib/ripple/public_api.ts

@@ -1,5 +1,4 @@
 export * from './ripple.module';
 export * from './ripple.directive';
 export * from './ripple.service';
-export * from './ripple.variables';
 export * from './ripple';

src/lib/src/style-utils.ts

@@ -1,13 +1,3 @@
-export interface TypographyConfig {
-  fontSize: number;
-  fontFamily?: string;
-  fontWeight?: number;
-  letterSpacing?: number;
-  textTransform?: 'uppercase' | 'capitalize' | 'lowercase';
-  gutterTop?: number;
-  gutterBottom?: number;
-}
-
 export class LyStyleUtils {
   typography: {
     fontFamily?: string;

src/lib/src/theme/theme-config.ts

@@ -1,6 +1,8 @@
 import { InjectionToken } from '@angular/core';
 import { LyStyleUtils, Dir } from '../style-utils';
 import { StyleContainer } from './theme2.service';
+import { RippleVariables } from './variables/ripple';
+import { TypographyVariables } from './variables/typography';
 
 export const LY_THEME_GLOBAL_VARIABLES = new InjectionToken<PartialThemeVariables>('ly.theme.global.variables');
 export const LY_THEME = new InjectionToken<ThemeConfig | ThemeConfig[]>('ly_theme_config');
@@ -26,10 +28,7 @@ export interface ThemeConfig {
     disabled: string,
     hint: string
   };
-  typography: {
-    htmlFontSize: number,
-    fontSize: number;
-  };
+  typography: TypographyVariables;
   /** color for divider */
   divider: string;
   shadow: string;
@@ -98,7 +97,7 @@ export interface ThemeConfig {
       exiting: number
     }
   };
-  ripple: IRippleVariables;
+  ripple: RippleVariables;
   badge: {
     root?: StyleContainer,
     position?: {
@@ -118,11 +117,3 @@ export interface PaletteColor {
   /** shadow color */
   shadow?: string;
 }
-
-export interface IRippleVariables {
-  transition: {
-    opacity: string
-    transform: string
-  };
-  duration: number;
-}

src/lib/themes/minima/base.ts

@@ -1,12 +1,9 @@
 import {
   LyStyleUtils,
-  TypographyConfig, // Do not delete this, this is necessary to generate the types correctly
-  IRippleVariables, // Do not delete this, this is necessary to generate the types correctly
   Dir
 } from '@alyle/ui';
-import { typography, iconButton, icon, zIndex, animations } from './variables';
+import { typography, iconButton, icon, zIndex, animations, RippleVariables } from './variables';
 import { Breakpoints } from '@alyle/ui/responsive';
-import { RippleVariables } from '@alyle/ui/ripple';
 
 export class MinimaBase extends LyStyleUtils {
   typography = typography;

src/lib/themes/minima/public_api.ts

@@ -1,4 +1,4 @@
 export * from './theme';
-export * from './variables';
+// export * from './variables';
 export * from './light';
 export * from './dark';

src/lib/themes/minima/variables.ts

@@ -1,77 +1,78 @@
-import { TypographyConfig } from '@alyle/ui';
 
 export const typography = {
   fontFamily: `'Roboto', sans-serif`,
   htmlFontSize: 16,
   fontSize: 14,
   gutterTop: 1,
   gutterBottom: .35,
-  display4: {
-    fontSize: 96,
-    fontWeight: 300,
-    letterSpacing: -1.5
-  } as TypographyConfig,
-  display3: {
-    fontSize: 60,
-    fontWeight: 300,
-    letterSpacing: -0.5
-  } as TypographyConfig,
-  display2: {
-    fontSize: 48,
-    fontWeight: 400,
-    letterSpacing: 0
-  } as TypographyConfig,
-  display1: {
-    fontSize: 34,
-    fontWeight: 400,
-    letterSpacing: 0.25
-  } as TypographyConfig,
-  headline: {
-    fontSize: 24,
-    fontWeight: 400,
-    letterSpacing: 0
-  } as TypographyConfig,
-  title: {
-    fontSize: 20,
-    fontWeight: 500,
-    letterSpacing: 0.15
-  } as TypographyConfig,
-  subheading: {
-    fontSize: 16,
-    fontWeight: 400,
-    letterSpacing: 0.15,
-    lineHeight: 24
-  } as TypographyConfig,
-  subheading2: {
-    fontSize: 14,
-    fontWeight: 500,
-    letterSpacing: 0.1
-  } as TypographyConfig,
-  body2: {
-    fontSize: 16,
-    fontWeight: 400,
-    letterSpacing: 0.15
-  } as TypographyConfig,
-  body1: {
-    fontSize: 14,
-    fontWeight: 400,
-    letterSpacing: 0.25
-  } as TypographyConfig,
-  button: {
-    fontSize: 14,
-    fontWeight: 500
-  } as TypographyConfig,
-  caption: {
-    fontSize: 12,
-    fontWeight: 400,
-    letterSpacing: 0.4
-  } as TypographyConfig,
-  overline: {
-    fontSize: 10,
-    fontWeight: 400,
-    letterSpacing: 1.5,
-    textTransform: 'uppercase'
-  } as TypographyConfig
+  lyTyp: {
+    display4: {
+      fontSize: 96,
+      fontWeight: 300,
+      letterSpacing: -1.5
+    },
+    display3: {
+      fontSize: 60,
+      fontWeight: 300,
+      letterSpacing: -0.5
+    },
+    display2: {
+      fontSize: 48,
+      fontWeight: 400,
+      letterSpacing: 0
+    },
+    display1: {
+      fontSize: 34,
+      fontWeight: 400,
+      letterSpacing: 0.25
+    },
+    headline: {
+      fontSize: 24,
+      fontWeight: 400,
+      letterSpacing: 0
+    },
+    title: {
+      fontSize: 20,
+      fontWeight: 500,
+      letterSpacing: 0.15
+    },
+    subheading: {
+      fontSize: 16,
+      fontWeight: 400,
+      letterSpacing: 0.15,
+      lineHeight: 24
+    },
+    subheading2: {
+      fontSize: 14,
+      fontWeight: 500,
+      letterSpacing: 0.1
+    },
+    body2: {
+      fontSize: 16,
+      fontWeight: 400,
+      letterSpacing: 0.15
+    },
+    body1: {
+      fontSize: 14,
+      fontWeight: 400,
+      letterSpacing: 0.25
+    },
+    button: {
+      fontSize: 14,
+      fontWeight: 500
+    },
+    caption: {
+      fontSize: 12,
+      fontWeight: 400,
+      letterSpacing: 0.4
+    },
+    overline: {
+      fontSize: 10,
+      fontWeight: 400,
+      letterSpacing: 1.5,
+      textTransform: 'uppercase'
+    }
+  }
 };
 export const iconButton = {
   size: '48px'
@@ -181,6 +182,14 @@ export const zIndex = {
   overlay: 1200
 };
 
+export const RippleVariables = {
+  transition: {
+    opacity: 'cubic-bezier(0.4,0.0,1,1)',
+    transform: 'cubic-bezier(0, 1, 0.6, 1)'
+  },
+  duration: 950
+};
+
 export const animations = {
   curves: {
     standard: 'cubic-bezier(0.4,0.0,0.2,1)',

src/lib/typography/typography.directive.ts

@@ -1,11 +1,12 @@
 import { Directive, ElementRef, Renderer2, Input, OnInit } from '@angular/core';
-import { LyTheme2, toBoolean } from '@alyle/ui';
+import { LyTheme2, toBoolean, ThemeVariables, StyleContainer } from '@alyle/ui';
 
 const STYLE_PRIORITY = -2;
-const styles = ({
+const styles = (theme: ThemeVariables) => ({
   root: {
     margin: 0,
-    display: 'block'
+    display: 'block',
+    ...theme.typography.root
   }
 });
 
@@ -98,26 +99,16 @@ export class LyTypography implements OnInit {
     const newKey = `k-typ:${key}`;
 
     return this.style.addStyle(newKey,
-      theme => {
+      (theme: ThemeVariables) => {
         const { typography } = theme;
-        const { fontFamily, fontSize, fontWeight, letterSpacing, textTransform, lineHeight } = typography[key || 'body1'];
-        let style = (
-          `font-size:${theme.pxToRem(fontSize)};` +
-          `font-weight:${fontWeight};` +
-          `letter-spacing:${theme.pxToRem(letterSpacing)};`
-        );
-        if (lineHeight) {
-          style += `line-height:${theme.pxToRem(lineHeight)};`;
-        }
-        if (textTransform) {
-          style += `text-transform:${textTransform};`;
-        }
-        if (fontFamily) {
-          style += `font-family:${fontFamily};`;
-        } else {
-          style += `font-family:${typography.fontFamily};`;
+        const styl: StyleContainer = Object.assign({ }, typography.lyTyp[key || 'body1']);
+        styl.fontSize = theme.pxToRem(styl.fontSize as number || typography.fontSize);
+        if (styl.lineHeight) {
+          styl.lineHeight = theme.pxToRem(styl.lineHeight as number);
         }
-        return style;
+        // set default fontFamily
+        styl.fontFamily = styl.fontFamily || typography.fontFamily;
+        return styl;
       },
       this.elementRef.nativeElement,
       instance,
@@ -128,7 +119,7 @@ export class LyTypography implements OnInit {
   private _createGutterClass(name: Gutter, val: boolean, instance: string) {
     return this.style.addStyle(
       `k-typ-gutter:${name}:${val}`,
-      theme => {
+      (theme: ThemeVariables) => {
         const gutter = name === Gutter.default;
         return (
           `margin-top:${ val && (gutter || name === Gutter.top) ? theme.typography.gutterTop : 0 }em;` +