feat(theme): add animations to variables

src/lib/src/theme/core-theme.service.ts

@@ -1,5 +1,5 @@
 import { Injectable, Optional, Inject, Renderer2, RendererFactory2, ViewEncapsulation } from '@angular/core';
-import { ThemeConfig, LY_THEME_CONFIG, LyThemeConfig } from './theme-config';
+import { ThemeConfig, LY_THEME_CONFIG, LyThemeConfig, ThemeVariables } from './theme-config';
 import { DOCUMENT } from '@angular/common';
 import { DataStyle } from '../theme.service';
 import { Platform } from '../platform';
@@ -15,7 +15,7 @@ export class CoreTheme {
   secondaryStyleContainer: HTMLElement;
   firstElement: HTMLElement;
   readonly themes = new Set<string>();
-  private _themeMap = new Map<string, ThemeConfig>();
+  private _themeMap = new Map<string, ThemeVariables>();
   private _styleMap = new Map<string, Map<string, DataStyle>>();
   constructor(
     @Optional() @Inject(LY_THEME_CONFIG) themeConfig: LyThemeConfig,
@@ -59,9 +59,9 @@ export class CoreTheme {
 
   /**
    * add new theme
-   * @param theme: ThemeConfig
+   * @param theme: ThemeVariables
    */
-  add(theme: ThemeConfig) {
+  add(theme: ThemeVariables) {
     this._themeMap.set(theme.name, theme);
     this._styleMap.set(theme.name, new Map());
   }

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

@@ -57,17 +57,31 @@ export interface ThemeConfig {
     withColor: string
   };
   iconButton: {
-    size: string;
+    size: string
   };
   icon: {
-    fontSize: string;
+    fontSize: string
   };
   zIndex: {
-    toolbar: number,
-    drawer: number,
-    overlay: number,
+    toolbar: number
+    drawer: number
+    overlay: number
     [key: string]: number
   };
+  animations: {
+    curves: {
+      standard: string
+      deceleration: string
+      acceleration: string
+      sharp: string
+    },
+    durations: {
+      complex: number
+      entering: number
+      exiting: number
+    }
+  };
+  ripple: IRippleVariables;
 }
 
 export type PartialThemeConfig = Partial<ThemeConfig>;
@@ -88,3 +102,11 @@ export interface PaletteColor {
   /** shadow color */
   shadow?: string;
 }
+
+export interface IRippleVariables {
+  transition: {
+    opacity: string
+    transform: string
+  };
+  duration: number;
+}

src/lib/src/theme/theme2.service.ts

@@ -1,8 +1,7 @@
 import { Injectable, Renderer2, Inject, isDevMode } from '@angular/core';
-import { ThemeConfig, LY_THEME_NAME } from './theme-config';
+import { LY_THEME_NAME, ThemeVariables } from './theme-config';
 import { CoreTheme } from './core-theme.service';
-import { DataStyle, Style } from '../theme.service';
-import { InvertMediaQuery } from '../media/invert-media-query';
+import { DataStyle } from '../theme.service';
 import { Platform } from '../platform';
 import { DOCUMENT } from '@angular/common';
 
@@ -60,7 +59,7 @@ export class StylesInDocument {
 
 @Injectable()
 export class LyTheme2 {
-  config: ThemeConfig;
+  config: ThemeVariables;
   _styleMap: Map<string, DataStyle>;
   initialTheme: string;
   elements: {

src/lib/themes/minima/base.ts

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

src/lib/themes/minima/dark.ts

@@ -1,10 +1,10 @@
-import { typography, iconButton, icon, input, zIndex } from './variables';
-import { ThemeConfig, LyStyleUtils, TypographyConfig } from '@alyle/ui';
-import { Breakpoints } from '@alyle/ui/responsive';
+import { input } from './variables';
+import { ThemeConfig } from '@alyle/ui';
+import { MinimaBase } from './base';
 
 const contrast = '#fff';
 const shadow = 'rgba(0, 0, 0, 1)';
-export class MinimaDark extends LyStyleUtils implements ThemeConfig {
+export class MinimaDark extends MinimaBase implements ThemeConfig {
   name = 'minima-dark';
   primary = {
     default: '#1DE9B6',
@@ -18,7 +18,6 @@ export class MinimaDark extends LyStyleUtils implements ThemeConfig {
     default: '#EA404C',
     contrast
   };
-  typography = typography;
   background = {
     default: '#303030', // secondary
     primary: {
@@ -58,8 +57,4 @@ export class MinimaDark extends LyStyleUtils implements ThemeConfig {
     underline: 'rgba(255, 255, 255, 0.11)',
     withColor: input.withColor
   };
-  iconButton = iconButton;
-  icon = icon;
-  breakpoints = Breakpoints;
-  zIndex = zIndex;
 }

src/lib/themes/minima/light.ts

@@ -1,10 +1,10 @@
-import { typography, iconButton, icon, input, zIndex } from './variables';
-import { ThemeConfig, LyStyleUtils, TypographyConfig } from '@alyle/ui';
-import { Breakpoints } from '@alyle/ui/responsive';
+import { ThemeConfig } from '@alyle/ui';
+import { input } from './variables';
+import { MinimaBase } from './base';
 
 const contrast = '#fff';
 const shadow = '#333';
-export class MinimaLight extends LyStyleUtils implements ThemeConfig {
+export class MinimaLight extends MinimaBase implements ThemeConfig {
   name = 'minima-light';
   primary = {
     default: '#6200EE',
@@ -18,7 +18,6 @@ export class MinimaLight extends LyStyleUtils implements ThemeConfig {
     default: '#f5414e',
     contrast
   };
-  typography = typography;
   background = {
     default: '#fafafa', // secondary
     primary: {
@@ -59,8 +58,4 @@ export class MinimaLight extends LyStyleUtils implements ThemeConfig {
     /** default color */
     withColor: input.withColor
   };
-  iconButton = iconButton;
-  icon = icon;
-  breakpoints = Breakpoints;
-  zIndex = zIndex;
 }

src/lib/themes/minima/variables.ts

@@ -89,3 +89,17 @@ export const zIndex = {
   drawer: 1100,
   overlay: 1200
 };
+
+export const animations = {
+  curves: {
+    standard: 'cubic-bezier(0.4,0.0,0.2,1)',
+    deceleration: 'cubic-bezier(0.0,0.0,0.2,1)',
+    acceleration: 'cubic-bezier(0.4,0.0,1,1)',
+    sharp: 'cubic-bezier(0.4,0.0,0.6,1)'
+  },
+  durations: {
+    complex: 375,
+    entering: 225,
+    exiting: 195
+  }
+};