fix(core): add variables

* add `themeVariables`
* update components

src/app/app-bar/app-bar.component.html

@@ -8,25 +8,25 @@
   <div [style.flex]="1"></div>
   <button #_button ly-button [color]="color" [lyMenuTriggerFor]="_Menu" lyTooltip="Select a theme!">
     <ly-icon icon="Theme"></ly-icon>
-    <span  lyTyp noWrap [withClass]="classes.themePickerText">{{ theme.config.name }}</span>
+    <span  lyTyp noWrap [withClass]="classes.themePickerText">{{ theme.variables.name }}</span>
   </button>
   <ng-template #_Menu let-M>
     <ly-menu [ref]="M">
       <button
       ly-button
       ly-menu-item
-      [bg]="theme.config.name === themeName ? 'primary' : 'background:primary'"
+      [bg]="theme.variables.name === themeName ? 'primary' : 'background:primary'"
       *ngFor="let themeName of themes; let i = index"
       (click)="theme.setTheme(themeName)"
       >
-        <ly-icon [color]="theme.config.name === themeName ? 'background:primary' : themeManager.get(themeName).primary.default">lens</ly-icon>
+        <ly-icon [color]="theme.variables.name === themeName ? 'background:primary' : themeManager.get(themeName).primary.default">lens</ly-icon>
         <span [withClass]="classes.themePickerText">{{ themeName }}</span>
       </button>
     </ly-menu>
   </ng-template>
   <button ly-button [color]="color" [appearance]="'icon'" (click)="theme.toggleDirection()" lyTooltip="Toggle rtl/ltr">
-    <ly-icon *ngIf="theme.config.direction === 'ltr'">format_textdirection_r_to_l</ly-icon>
-    <ly-icon *ngIf="theme.config.direction === 'rtl'">format_textdirection_l_to_r</ly-icon>
+    <ly-icon *ngIf="theme.variables.direction === 'ltr'">format_textdirection_r_to_l</ly-icon>
+    <ly-icon *ngIf="theme.variables.direction === 'rtl'">format_textdirection_l_to_r</ly-icon>
   </button>
   <a ly-button appearance="icon" [color]="color" target="_blank" rel="noopener" href="https://github.com/A-l-y-l-e/Alyle-UI">
     <ly-icon icon="github"></ly-icon>

src/app/docs/layout/responsive/responsive-demo-01/responsive-demo-01.component.ts

@@ -14,7 +14,7 @@ export class ResponsiveDemo01Component {
   constructor(
     theme: LyTheme2
   ) {
-    const breakpoints = (theme.config as ThemeVariables).breakpoints;
+    const breakpoints = (theme.variables as ThemeVariables).breakpoints;
     Object.keys(breakpoints).forEach(key => {
       this.queries.push({
         key,

src/lib/carousel/carousel.ts

@@ -223,7 +223,7 @@ export class LyCarousel implements OnInit, AfterViewInit, OnDestroy {
 
   _onDragEnd(e) {
     const rect = this._selectedElement.getBoundingClientRect();
-    const dir = this._theme.config.getDirection(DirAlias.before);
+    const dir = this._theme.variables.getDirection(DirAlias.before);
     this._renderer.addClass(this.slideContainer.nativeElement, this.classes.slideAnim);
     this._select(this.selectedIndex);
 
@@ -310,7 +310,7 @@ export class LyCarousel implements OnInit, AfterViewInit, OnDestroy {
   }
 
   private _onPan(x) {
-    const sign = this._theme.config.getDirection(DirAlias.before) === 'left' ? -1 : 1;
+    const sign = this._theme.variables.getDirection(DirAlias.before) === 'left' ? -1 : 1;
     this._renderer.setStyle(this._slide.nativeElement, 'transform', `translateX(calc(${sign * 100 * this.selectedIndex }% + ${x}px))`);
   }
 

src/lib/field/field.ts

@@ -197,7 +197,7 @@ export class LyField implements OnInit, AfterContentInit, AfterViewInit, OnDestr
   set appearance(val: string) {
     if (val !== this.appearance) {
       this._appearance = val;
-      if (!(this._theme.config.field.appearance[val] || DEFAULT_APPEARANCE_THEME[val]))  {
+      if (!(this._theme.variables.field.appearance[val] || DEFAULT_APPEARANCE_THEME[val]))  {
         throw new Error(`${val} not found in theme.field.appearance`);
       }
       this._appearanceClass = this._theme.addStyle(`ly-field.appearance:${val}`, (theme: ThemeVariables) => {

src/lib/menu/menu.ts

@@ -140,7 +140,7 @@ export class LyMenu implements OnInit, AfterViewInit {
     this._renderer.setStyle(container, 'height', 'initial');
     this._renderer.setStyle(container, 'width', 'initial');
 
-    const position = new Positioning(this.placement, this.xPosition, this.yPosition, this.ref._getHostElement(), el, this._theme.config);
+    const position = new Positioning(this.placement, this.xPosition, this.yPosition, this.ref._getHostElement(), el, this._theme.variables);
 
     // set position
     this._renderer.setStyle(el, 'transform', `translate3d(${position.x}px, ${position.y}px, 0)`);

src/lib/src/common/disable-ripple.ts

@@ -38,7 +38,7 @@ export function mixinDisableRipple<T extends Constructor<RequireParams>>(base: T
           Promise.resolve(null).then(() => {
             const triggerElement = this._triggerElement.nativeElement;
             const rippleContainer = (this._rippleContainer && this._rippleContainer.nativeElement) || triggerElement;
-            this._ripple = new Ripple(this._theme.config, this._ngZone, this._theme.addStyleSheet(styles), rippleContainer, triggerElement);
+            this._ripple = new Ripple(this._theme.variables, this._ngZone, this._theme.addStyleSheet(styles), rippleContainer, triggerElement);
             this._ripple.setConfig(this._rippleConfig);
           });
         }

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

@@ -70,11 +70,19 @@ const THEME_MAP = new Map<string, {
 
 @Injectable()
 export class LyTheme2 {
+  /**
+   * @deprecated use `themeVariables` instead
+   */
   config: ThemeVariables;
   _styleMap: Map<string, DataStyle>;
   initialTheme: string;
   elements: Map<string | Styles, HTMLStyleElement>;
   _elementsMap = new Map<any, HTMLStyleElement>();
+
+  /** Get Theme Variables */
+  get variables(): ThemeVariables {
+    return this.config;
+  }
   private themeMap = THEME_MAP;
   /** ssr or hmr */
   private isDevOrServer = isDevMode() || !Platform.isBrowser;

src/lib/tabs/tabs.ts

@@ -612,7 +612,7 @@ export class LyTabLabel extends LyButton implements OnInit, AfterViewInit {
       const tab = this._tab._el.nativeElement as HTMLElement;
       const tabContainer = this._tabs.tabsRef.nativeElement as HTMLElement;
       if (tabContainer.scrollWidth !== tabContainer.offsetWidth) {
-        const dir = this._theme.config.direction;
+        const dir = this._theme.variables.direction;
         const max = tabContainer.scrollWidth - tabContainer.offsetWidth;
         const offsetBefore = dir === Dir.rtl
         ? max + tab.offsetLeft

src/lib/tooltip/tooltip.ts

@@ -156,7 +156,7 @@ export class LyTooltip implements OnInit, OnDestroy {
           host: this._el.nativeElement,
         });
         this._updatePosition();
-        // const position = new Positioning(this.placement, this.xPosition, this.yPosition, this._el.nativeElement, tooltip.containerElement, this._theme.config, 13);
+        // const position = new Positioning(this.placement, this.xPosition, this.yPosition, this._el.nativeElement, tooltip.containerElement, this._theme.variables, 13);
         // tooltip.containerElement.style.transform = `translate3d(${position.x}px,${position.y}px,0)`;
 
         this._theme.requestAnimationFrame(() => {
@@ -206,7 +206,7 @@ export class LyTooltip implements OnInit, OnDestroy {
   private _updatePosition() {
     const tooltip = this._tooltipOverlay;
     if (tooltip) {
-      const position = new Positioning(this.placement, this.xPosition, this.yPosition, this._el.nativeElement, tooltip.containerElement, this._theme.config, 13);
+      const position = new Positioning(this.placement, this.xPosition, this.yPosition, this._el.nativeElement, tooltip.containerElement, this._theme.variables, 13);
       tooltip.containerElement.style.transform = `translate3d(${position.x}px,${position.y}px,0)`;
     }
   }