feat(core): add mixins & ly-paper

BREAKING CHANGES:

LyCommon will be eliminated

before:

```html
<div color="primary">Demo</div>
```

after:

```ts
const styles = (theme: ThemeVariables) => ({
  demo: {
    color: theme.primary.default
    // .. others styles
  }
});
```

```html
<div [className]="classes.demo">Demo</div>
```

OR

```html
<ly-paper color="primary">Demo</ly-paper>
<div ly-paper color="primary">Demo</div>
```


this will only affect the components that use the `withColor` and `withBg` attribute, it will be replaced with `color`, `bg`

example:

before:
```html
<ly-checkbox withColor="primary">checkbox</ly-checkbox>
```

after:
```html
<ly-checkbox color="primary">checkbox</ly-checkbox>
```

.prerender.conf.json

@@ -6,8 +6,8 @@
     "getting-started/installation",
     "customization/theming",
     "customization/multiple-themes",
-    "customization/bg-color",
     "customization/dynamic-styles",
+    "customization/paper",
     "layout/grid",
     "layout/responsive",
     "layout/tabs",

package.json

@@ -29,7 +29,7 @@
     "tools:deploy": "node dist/tools/deploy",
     "tools:compodoc": "node dist/tools/compodoc",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
-    "bundlesizelimit": "rm -rf dist/bundle.js && cat dist/@alyle/ui/**/*.umd.min.js >> dist/bundle.js && yarn bundlesize -f dist/bundle.js -c false -s '150 KB'"
+    "bundlesizelimit": "rm -rf dist/bundle.js && cat dist/@alyle/ui/**/*.umd.min.js >> dist/bundle.js && yarn bundlesize -f dist/bundle.js -c false -s '200 KB'"
   },
   "private": true,
   "dependencies": {

src/app/app.component.html

@@ -12,7 +12,7 @@
       </div>
     </div>
   </ly-drawer-content>
-  <ly-drawer bg="background:primary" [withClass]="classes.drawer" [width]="'230px 0@XSmall'" #nav="lyDrawer" [opened]="router.url !== '/'" [mode]="router.url !== '/' ? 'side' : 'over'" #_left [spacingTop]="'64px 56px@XSmall'">
+  <ly-drawer ly-paper bg="background:primary" [withClass]="classes.drawer" [width]="'230px 0@XSmall'" #nav="lyDrawer" [opened]="router.url !== '/'" [mode]="router.url !== '/' ? 'side' : 'over'" #_left [spacingTop]="'64px 56px@XSmall'">
     <ul *ngFor="let category of routesComponents" [withClass]="classes.drawerUl">
       <span lyTyp="subheading" gutterBottom>{{ category.name }}</span>
       <li *ngFor="let component of category.routes">

src/app/app.routing.ts

@@ -12,7 +12,6 @@ const routes: Routes = [
   { path: '', component: HomeComponent },
   /** Customization */
   { path: 'customization/multiple-themes', component: MultipleThemesComponent },
-  { path: 'customization/bg-color', loadChildren: './components/bg-color-demo/bg-color-demo.module#BgColorDemoModule' },
   {
     path: 'customization',
     children: [

src/app/components/drawer-demo/drawer-demo-01/drawer-demo-01.component.html

@@ -1,9 +1,9 @@
 <ly-drawer-container [withClass]="classes.drawerContainer">
-  <ly-drawer opened position="start" [mode]="mode" width="150px 0@XSmall" bg="background:primary" #drawer01="lyDrawer">
+  <ly-drawer ly-paper opened position="start" [mode]="mode" width="150px 0@XSmall" bg="background:primary" #drawer01="lyDrawer">
     <p>Hi!</p>
     <button ly-button (click)="drawer01.toggle()">close</button>
   </ly-drawer>
-  <ly-drawer position="end" width="150px 48px@XSmall" bg="background:primary" #drawer02="lyDrawer">
+  <ly-drawer ly-paper position="end" width="150px 48px@XSmall" bg="background:primary" #drawer02="lyDrawer">
     <p>Hi!</p>
     <button ly-button (click)="drawer02.toggle()">close</button>
   </ly-drawer>

src/app/components/multiple-themes/multiple-themes-demo-01/multiple-themes-demo-01.component.html

@@ -6,11 +6,13 @@
     <p>
       Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit enim odit dolorem corrupti beatae ullam nam repellat, quas error accusantium nobis suscipit nisi veniam eveniet dignissimos, fuga dolore neque porro.
     </p>
-    <ly-card-content ly-theme-minima-light bg="background:primary" color="text">
-      <h3>Child theme</h3>
-      <p>ly-theme-minima-light</p>
-      <button ly-button outlined color="primary">primary</button>
-      <button ly-button outlined color="accent">accent</button>
-    </ly-card-content>
+    <ly-card ly-theme-minima-light bg="background:primary" color="text">
+      <ly-card-content>
+        <h3>Child theme</h3>
+        <p>ly-theme-minima-light</p>
+        <button ly-button outlined color="primary">primary</button>
+        <button ly-button outlined color="accent">accent</button>
+      </ly-card-content>
+    </ly-card>
   </ly-card-content>
 </ly-card>

src/app/components/radio-demo/radio-example-01/radio-example-01.component.html

@@ -21,9 +21,9 @@
 
 <div>#radioC.value: {{ radioC.value | json }}</div>
 
-<h3>withColor</h3>
+<h3>color</h3>
 <ly-radio-group [(ngModel)]="favoriteColor" #radio="lyRadioGroup">
-  <ly-radio [withColor]="item.value" *ngFor="let item of list" [value]="item.value">{{ item.value }}</ly-radio>
+  <ly-radio [color]="item.value" *ngFor="let item of list" [value]="item.value">{{ item.value }}</ly-radio>
 </ly-radio-group>
 
 <div>value: {{ favoriteColor | json }}</div>

src/app/components/routes-app.service.ts

@@ -17,10 +17,10 @@ export class RoutesAppService {
         name: 'Customization',
         route: 'customization',
         routes: [
-          { route: 'theming', name: 'Theming' },
-          { route: 'bg-color', name: 'Bg & Color' },
           { route: 'dynamic-styles', name: 'Dynamic styles' },
-          { route: 'multiple-themes', name: 'Multiple themes' },
+          { route: 'theming', name: 'Theming' },
+          { route: 'paper', name: 'Paper' },
+          { route: 'multiple-themes', name: 'Multiple themes' }
         ]
       },
       {

src/app/demo-view/demo-view.module.ts

@@ -10,6 +10,7 @@ import { LyIconModule } from '@alyle/ui/icon';
 import { PrismModule } from '../core/prism/prism.module';
 
 import { ViewComponent } from './view/view.component';
+import { LyCardModule } from '@alyle/ui/card';
 
 @NgModule({
   imports: [
@@ -20,6 +21,7 @@ import { ViewComponent } from './view/view.component';
     LyIconButtonModule,
     LyIconModule,
     LyCommonModule,
+    LyCardModule,
     RouterModule
   ],
   exports: [ViewComponent],

src/app/demo-view/view/view.component.html

@@ -1,4 +1,5 @@
-<div [elevation]="3" shadowColor="background:secondary" bg="background:tertiary">
+<!-- <div [elevation]="3" shadowColor="background:secondary" bg="background:tertiary"> -->
+<ly-card [elevation]="3" shadowColor="background:secondary" bg="background:tertiary">
   <div class="code">
     <button ly-icon-button (click)="openPostStackblitz($event)"><ly-icon>launch</ly-icon></button>
     <button ly-icon-button (click)="toggleCode()"><ly-icon src="assets/svg/code"></ly-icon></button>
@@ -12,4 +13,4 @@
   <div class="tab-container">
     <ng-content></ng-content>
   </div>
-</div>
+</ly-card>

src/app/docs/components/button-demo/button-types-demo/button-types-demo.component.html

@@ -30,7 +30,7 @@
   <p>
     custom
   </p>
-  <button ly-button raised color="primary">Primary</button>
+  <button ly-button raised bg="accent" color="primary">Primary</button>
   <button ly-button bg="Quepal" raised>Quepal</button>
   <button ly-button bg="SublimeLight" raised>SublimeLight</button>
 </div>

src/app/docs/customization/paper-demo/basic-paper/basic-paper.component.html

@@ -0,0 +1,6 @@
+<ly-paper [withClass]="classes.paper" bg="background:primary" [elevation]="2">
+  <h3 [lyTyp]="'title'">Title</h3>
+  <p [lyTyp]="'body1'">
+    Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+  </p>
+</ly-paper>

src/app/components/bg-color-demo/bg-color-demo/bg-color-demo.component.spec.ts → src/app/docs/customization/paper-demo/basic-paper/basic-paper.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { BgColorDemoComponent } from './bg-color-demo.component';
+import { BasicPaperComponent } from './basic-paper.component';
 
-describe('BgColorDemoComponent', () => {
-  let component: BgColorDemoComponent;
-  let fixture: ComponentFixture<BgColorDemoComponent>;
+describe('BasicPaperComponent', () => {
+  let component: BasicPaperComponent;
+  let fixture: ComponentFixture<BasicPaperComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ BgColorDemoComponent ]
+      declarations: [ BasicPaperComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(BgColorDemoComponent);
+    fixture = TestBed.createComponent(BasicPaperComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/docs/customization/paper-demo/basic-paper/basic-paper.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { LyTheme2 } from '@alyle/ui';
+
+const STYLES = {
+  paper: {
+    display: 'block',
+    margin: '.5em',
+    padding: '1em'
+  }
+};
+
+@Component({
+  selector: 'aui-basic-paper',
+  templateUrl: './basic-paper.component.html'
+})
+export class BasicPaperComponent {
+  readonly classes = this._theme.addStyleSheet(STYLES);
+
+  constructor(
+    private _theme: LyTheme2
+  ) { }
+}

src/app/docs/customization/paper-demo/basic-paper/basic-paper.module.spec.ts

@@ -0,0 +1,13 @@
+import { BasicPaperModule } from './basic-paper.module';
+
+describe('BasicPaperModule', () => {
+  let basicPaperModule: BasicPaperModule;
+
+  beforeEach(() => {
+    basicPaperModule = new BasicPaperModule();
+  });
+
+  it('should create an instance', () => {
+    expect(basicPaperModule).toBeTruthy();
+  });
+});