feat: theme styles scoping example, unified theme mixing naming

src/app/app.component.scss-theme.scss

@@ -1,6 +1,6 @@
 @import '~@angular/material/theming';
 
-@mixin app-component-theme($theme) {
+@mixin anms-app-component-theme($theme) {
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
 

src/app/examples/examples-routing.module.ts

@@ -4,6 +4,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { ExamplesComponent } from './examples/examples.component';
 import { TodosComponent } from './todos/todos.component';
 import { StockMarketComponent } from './stock-market/stock-market.component';
+import { ParentComponent } from './theming/parent/parent.component';
 
 const routes: Routes = [
   {
@@ -20,6 +21,9 @@ const routes: Routes = [
       }, {
         path: 'stock-market',
         component: StockMarketComponent
+      }, {
+        path: 'theming',
+        component: ParentComponent
       }
     ]
   }

src/app/examples/examples.module.ts

@@ -14,6 +14,8 @@ import { StockMarketComponent } from './stock-market/stock-market.component';
 import { stockMarketReducer } from './stock-market/stock-market.reducer';
 import { StockMarketEffects } from './stock-market/stock-market.effects';
 import { StockMarketService } from './stock-market/stock-market.service';
+import { ParentComponent } from './theming/parent/parent.component';
+import { ChildComponent } from './theming/child/child.component';
 
 @NgModule({
   imports: [
@@ -32,7 +34,9 @@ import { StockMarketService } from './stock-market/stock-market.service';
   declarations: [
     ExamplesComponent,
     TodosComponent,
-    StockMarketComponent
+    StockMarketComponent,
+    ParentComponent,
+    ChildComponent
   ],
   providers: [
     StockMarketService

src/app/examples/examples/examples.component.ts

@@ -10,6 +10,7 @@ export class ExamplesComponent implements OnInit {
   examples = [
     { link: 'todos', label: 'Todos' },
     { link: 'stock-market', label: 'Stock Market' },
+    { link: 'theming', label: 'Theming' },
   ];
 
   constructor() { }

src/app/examples/stock-market/stock-market.component.sccs-theme.scss

@@ -1,6 +1,6 @@
 @import '~@angular/material/theming';
 
-@mixin examples-component-theme($theme) {
+@mixin anms-examples-component-theme($theme) {
   $warn: map-get($theme, warn);
 
   anms-stock-market {

src/app/examples/theming/child/child.component.html

@@ -0,0 +1,4 @@
+<div>
+  <h1>child's h1<br>should be without style</h1>
+  <h2>child works!</h2>
+</div>

src/app/examples/theming/child/child.component.scss

@@ -0,0 +1,4 @@
+div {
+  border: 1px solid;
+  padding: 20px;
+}

src/app/examples/theming/child/child.component.scss-theme.scss

@@ -0,0 +1,15 @@
+@import '~@angular/material/theming';
+
+@mixin anms-child-component-theme($theme) {
+  $warn: map-get($theme, warn);
+
+  anms-child {
+    >div {
+      border-color: mat-color($warn);
+
+      >h2 {
+        color: mat-color($warn)
+      }
+    }
+  }
+}

src/app/examples/theming/child/child.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChildComponent } from './child.component';
+
+describe('ChildComponent', () => {
+  let component: ChildComponent;
+  let fixture: ComponentFixture<ChildComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ChildComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChildComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/examples/theming/child/child.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'anms-child',
+  templateUrl: './child.component.html',
+  styleUrls: ['./child.component.scss']
+})
+export class ChildComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/examples/theming/parent/parent.component.html

@@ -0,0 +1,32 @@
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      <h1>Theme scoping with nested components</h1>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-6">
+      <p>
+        Theme styles are not imported in component's <code>stylesUrls</code>
+        property of <code>@Component</code> decorator but in the main
+        <code>styles.scss</code> file. Because of this, theme styles are
+        <strong>NOT</strong> scoped to the component automatically.
+      </p>
+      <p>
+        We have to use <strong>specific</strong> selectors to prevent styles
+        from leaking into child components. This can be achieved by using
+        <code>> (child selectors)</code> in css rules to enhance their
+        specificity. For example checkout theme file of this component:
+      </p>
+      <pre>
+{{themeSrc}}
+      </pre>
+    </div>
+    <div class="col-md-6">
+      <div class="example">
+        <h1>parent works!</h1>
+        <anms-child></anms-child>
+      </div>
+    </div>
+  </div>
+</div>

src/app/examples/theming/parent/parent.component.scss

@@ -0,0 +1,9 @@
+pre {
+  margin: 0;
+}
+
+.example {
+  border: 1px solid;
+  padding: 20px;
+  margin: 0 0 20px 0;
+}

src/app/examples/theming/parent/parent.component.scss-theme.scss

@@ -0,0 +1,21 @@
+@import '~@angular/material/theming';
+
+@mixin anms-parent-component-theme($theme) {
+  $accent: map-get($theme, accent);
+
+  anms-parent {
+    >.container {
+      >.row {
+        >.col-md-6 {
+          >.example {
+            border-color: mat-color($accent);
+
+            >h1 {
+              color: mat-color($accent)
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/app/examples/theming/parent/parent.component.spec.ts

@@ -0,0 +1,26 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ParentComponent } from './parent.component';
+import { ChildComponent } from '../child/child.component';
+
+describe('ParentComponent', () => {
+  let component: ParentComponent;
+  let fixture: ComponentFixture<ParentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ParentComponent, ChildComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ParentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/examples/theming/parent/parent.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'anms-parent',
+  templateUrl: './parent.component.html',
+  styleUrls: ['./parent.component.scss']
+})
+export class ParentComponent implements OnInit {
+
+  themeSrc: string = require('!raw-loader!./parent.component.scss-theme.scss');
+
+  constructor() {}
+
+  ngOnInit() {
+  }
+
+}

src/app/examples/todos/todos.component.scss-theme.scss

@@ -1,11 +1,11 @@
 @import '~@angular/material/theming';
 
-@mixin todos-component-theme($theme) {
+@mixin anms-todos-component-theme($theme) {
   $accent: map-get($theme, accent);
 
   // angular material overlay class
   .cdk-overlay-container {
-    
+
     .todos-filter-menu {
       .active {
         color: mat-color($accent, default-contrast);

src/app/shared/big-input/big-input.component.scss-theme.scss

@@ -1,6 +1,6 @@
 @import '~@angular/material/theming';
 
-@mixin big-input-component-theme($theme) {
+@mixin anms-big-input-component-theme($theme) {
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
   $foreground: map-get($theme, foreground);

src/app/static/about/about.component.scss-theme.scss

@@ -1,6 +1,6 @@
 @import '~@angular/material/theming';
 
-@mixin about-component-theme($theme) {
+@mixin anms-about-component-theme($theme) {
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
   $foreground: map-get($theme, foreground);

src/styles-reset.scss-theme.scss

@@ -1,6 +1,6 @@
 @import '~@angular/material/theming';
 
-@mixin styles-reset-theme($theme) {
+@mixin anms-styles-reset-theme($theme) {
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
   $foreground: map-get($theme, foreground);

src/styles.scss

@@ -19,15 +19,19 @@
 @import 'app/shared/big-input/big-input.component.scss-theme';
 @import 'app/static/about/about.component.scss-theme';
 @import 'app/examples/todos/todos.component.scss-theme';
-@import 'app/examples/stock-market/stock-market.component.sccs-theme.scss';
+@import 'app/examples/stock-market/stock-market.component.sccs-theme';
+@import 'app/examples/theming/parent/parent.component.scss-theme';
+@import 'app/examples/theming/child/child.component.scss-theme';
 
 @mixin custom-components-theme($theme) {
-  @include styles-reset-theme($theme);
-  @include app-component-theme($theme);
-  @include about-component-theme($theme);
-  @include big-input-component-theme($theme);
-  @include todos-component-theme($theme);
-  @include examples-component-theme($theme);
+  @include anms-styles-reset-theme($theme);
+  @include anms-app-component-theme($theme);
+  @include anms-about-component-theme($theme);
+  @include anms-big-input-component-theme($theme);
+  @include anms-todos-component-theme($theme);
+  @include anms-examples-component-theme($theme);
+  @include anms-parent-component-theme($theme);
+  @include anms-child-component-theme($theme);
 }
 
 .default-theme {