diff --git a/.wvr-ud/static-assets/_styles.css b/.wvr-ud/static-assets/_styles.css
index 5de57f430..3cf254f01 100644
--- a/.wvr-ud/static-assets/_styles.css
+++ b/.wvr-ud/static-assets/_styles.css
@@ -102,6 +102,7 @@ main {
 }
 
 #editor,
+#template-editor,
 #scss-editor,
 #source-editor {
   height:400px;
diff --git a/.wvr-ud/static-assets/index-base.html b/.wvr-ud/static-assets/index-base.html
index f53308693..65e0b0096 100644
--- a/.wvr-ud/static-assets/index-base.html
+++ b/.wvr-ud/static-assets/index-base.html
@@ -42,6 +42,9 @@ <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-
               <li class="nav-item">
                 <a class="nav-link" id="snippet-tab" data-toggle="tab" href="#snippet" role="tab" aria-controls="snippet" aria-selected="false">Snippet</a>
               </li>
+              <li class="nav-item">
+                <a class="nav-link" id="template-tab" data-toggle="tab" href="#template" role="tab" aria-controls="template" aria-selected="false">Template</a>
+              </li>
               <li class="nav-item">
                 <a class="nav-link" id="scss-tab" data-toggle="tab" href="#scss" role="tab" aria-controls="scss" aria-selected="false">SCSS</a>
               </li>
@@ -59,6 +62,9 @@ <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-
                   Copy Snippet
                 </button>
               </div>
+              <div class="tab-pane" id="template" role="tabpanel" aria-labelledby="template-tab">
+                <div id="template-editor"></div>
+              </div>
               <div class="tab-pane" id="scss" role="tabpanel" aria-labelledby="scss-tab">
                 <div id="scss-editor"></div>
               </div>
@@ -69,7 +75,7 @@ <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-
           </div>
         </div>
       </main>
-     
+
     </div>
   </div>
 
@@ -111,14 +117,14 @@ <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-
   <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
   <script src="//cdn.statically.io/gh/zenorocha/clipboard.js/v2.0.4/dist/clipboard.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js" integrity="sha256-+nuEu243+6BveXk5N+Vbr268G+4FHjUOEcfKaBqfPbc=" crossorigin="anonymous"></script>
-  
+
   <!-- WUD Scripts -->
   <script type="application/json" id="expamples-manifest">
     {{EXAMPLE_MANIFEST}}
   </script>
   <script src="{{BASE_PATH}}wud.js"></script>
   <script src="{{BASE_PATH}}additional-scripts.js"></script>
-  
+
 </body>
 
 </html>
diff --git a/.wvr-ud/static-assets/wud.js b/.wvr-ud/static-assets/wud.js
index 1b15a7b34..2476bfc0e 100644
--- a/.wvr-ud/static-assets/wud.js
+++ b/.wvr-ud/static-assets/wud.js
@@ -2,12 +2,14 @@ let componentManifest = JSON.parse($('#expamples-manifest').html());
 let editorElem = document.querySelector('#editor');
 let previewElem = document.querySelector('#preview');
 let desciptionElem = document.querySelector('#desciption');
+let templateElem = document.querySelector('#template');
 let activeExampleNameElem = document.querySelector('#active-component-name');
 let componentCollectionsList = document.querySelector('#component-collections');
 let componentCollectionTemplate = document.querySelector('#component-collection-template');
 let componentLinkTemplate = document.querySelector('#component-link-template');
 let editor;
 let scssEditor;
+let templateEditor;
 let sourceEditor;
 let components = [];
 let activeExample;
@@ -32,6 +34,15 @@ let setupEditor = () => {
       document.querySelector("main").classList.remove('loading');
     }, 500);
   });
+  templateEditor = ace.edit("template-editor");
+  templateEditor.setOptions({
+    readOnly: true,
+    highlightActiveLine: false,
+    highlightGutterLine: false,
+    theme: 'ace/theme/monokai',
+    mode: 'ace/mode/html'
+  });
+  templateEditor.renderer.$cursorLayer.element.style.opacity=0;
   scssEditor = ace.edit("scss-editor");
   scssEditor.setOptions({
     readOnly: true,
@@ -80,7 +91,7 @@ let setupComponentLinks = ()=>{
   });
   document.querySelector('.expand-collapse-all').addEventListener('click', e=>{
     e.preventDefault();
-  
+
     e.currentTarget.classList.contains('open') ?
     $('.component-links').collapse('hide') :
     $('.component-links').collapse('show')
@@ -95,11 +106,13 @@ let loadExample = (example) => {
   let desciption = example.querySelector('desciption').innerHTML;
   let componentScss = example.querySelector('component-scss').innerHTML;
   let componentSource = example.querySelector('component-source').innerHTML;
+  let componentTemplate = example.querySelector('component-template').rawTemplateHTML;
   document.querySelector('#copy-btn').setAttribute('data-clipboard-text', snippet);
   activeExampleNameElem.innerText = example.getAttribute('name');
   previewElem.innerHTML = snippet;
   desciptionElem.innerHTML = desciption;
   scssEditor.getSession().setValue(componentScss);
+  templateEditor.getSession().setValue(componentTemplate);
   sourceEditor.getSession().setValue(componentSource);
   editor.getSession().setValue(snippet);
 };
@@ -130,6 +143,7 @@ let renderComponentLinks = componentsToRender => {
           if(example.getAttribute('name').trim()===e.target.innerText.trim()) {
             activeExample=example;
             activeExample.querySelector('snippet').rawHTML = activeExample.querySelector('snippet').innerHTML;
+            activeExample.querySelector('component-template').rawTemplateHTML = activeExample.querySelector('component-template').innerHTML;
             loadExample(example);
           }
         });
@@ -221,4 +235,4 @@ setUpSearch();
 setupPromise.then(()=>{
   renderComponentLinks(components);
   loadInitialContent();
-});
\ No newline at end of file
+});
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 63a32e337..d353c93cd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Changelog
 
+## [1.7.0] - 11-20-20
+### Resolves
+
+- Wvr animations have regressed and are no longer firing. (#256)
+- SetTimeouts are not performant at load time. (#257)
+- Weaver Usage Documentation should include the component template in tab list. (#260)
+- Wvr Components should support an extensible list of branded colors. (Primary, secondary, danger, warning... etc). (#262)
+- Refactor color usage across wvr components to use branded color list, and include fallback support. (#263)
+- Color preview component. (#264)
+
 ## [1.6.0] - 11-2-20
 ### Resolves
 
@@ -75,4 +85,4 @@
 - The wvr-header component's bottom-nav section should display conditionally (#81)
 - Weaver components usage documentation fails to build (#83)
 - Weaver documentation landing page is broken (#84)
-- wvr-footer's navbar should be have a height of 100% (#89)
\ No newline at end of file
+- wvr-footer's navbar should be have a height of 100% (#89)
diff --git a/angular.json b/angular.json
index 825d3818f..a508cab4d 100644
--- a/angular.json
+++ b/angular.json
@@ -161,18 +161,6 @@
             "tsConfig": "projects/wvr-elements/tsconfig.spec.json",
             "karmaConfig": "projects/wvr-elements/karma.conf.js"
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "projects/wvr-elements/tsconfig.lib.json",
-              "projects/wvr-elements/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     }
diff --git a/defaults-ci-overrides.env b/defaults-ci-overrides.env
index 187b67e6e..3ad696738 100644
--- a/defaults-ci-overrides.env
+++ b/defaults-ci-overrides.env
@@ -3,5 +3,6 @@
 # in ./defaults.env when running a build for continuous integration.
 #
 
+THEME=default
 BASE_URL=https://tamulib.github.io/weaver-components/docs
 ASSETS_URL=https://tamulib.github.io/weaver-components/docs/assets
diff --git a/defaults-dev-overrides.env b/defaults-dev-overrides.env
index 58fc1ba6b..fb1ae6094 100644
--- a/defaults-dev-overrides.env
+++ b/defaults-dev-overrides.env
@@ -3,5 +3,6 @@
 # in ./defaults.env when running `npm start`
 #
 
+THEME=defaultDark
 BASE_URL=http://localhost:4200
 ASSETS_URL=http://localhost:4200/assets
diff --git a/defaults-dist-overrides.env b/defaults-dist-overrides.env
index 94a24ef3c..7b0658e03 100644
--- a/defaults-dist-overrides.env
+++ b/defaults-dist-overrides.env
@@ -3,5 +3,6 @@
 # in ./defaults.env when running `npm start:dist`
 #
 
+THEME=default
 BASE_URL=http://localhost:8080
 ASSETS_URL=http://localhost:8080/assets
diff --git a/defaults-static-overrides.env b/defaults-static-overrides.env
index a5aec2762..d0558642e 100644
--- a/defaults-static-overrides.env
+++ b/defaults-static-overrides.env
@@ -3,5 +3,6 @@
 # in ./defaults.env when running `npm start:static`
 #
 
+THEME=default
 BASE_URL=http://localhost:8081
 ASSETS_URL=http://localhost:8081/weaver-components/docs/usage/assets
diff --git a/defaults.env b/defaults.env
index 7bdf49605..40f74eae2 100644
--- a/defaults.env
+++ b/defaults.env
@@ -3,5 +3,6 @@
 # found at src/config-template.json.
 #
 
+THEME=default
 BASE_URL=https://labs.library.tamu.edu/wvr-components
 ASSETS_URL=https://labs.library.tamu.edu/wvr-components/assets
diff --git a/package.json b/package.json
index 190693874..dd82a5a40 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
     "type": "git",
     "url": "git+https://github.com/TAMULib/weaver-components.git"
   },
-  "version": "1.6.0",
+  "version": "1.7.0",
   "private": false,
   "license": "MIT",
   "config": {
@@ -14,10 +14,11 @@
     "build": "ng build --prod --output-hashing none",
     "build:clean": "npm run clean && npm run build",
     "build:wvr-elements": "ng build wvr-elements",
+    "build:wvr-components-style": "node scripts/build-wvr-components-style.js",
     "build:wvr-components": "node scripts/build-wvr-components.js",
     "build:wvr-components-static": "node scripts/build-wvr-components-static.js",
     "build:lighthouse": "node scripts/build-lighthouse.js",
-    "prebuild": "npm run build:wvr-elements",
+    "prebuild": "npm run build:wvr-components-style && npm run build:wvr-elements",
     "postbuild": "npm run build:wvr-components",
     "build:docs": "npm run build:docs-usage && npm run build:docs-development",
     "build:docs-development": "compodoc --output ./static/weaver-components/docs/development -p ./projects/wvr-elements/tsconfig.docs.json",
@@ -37,10 +38,10 @@
     "lint": "ng lint",
     "link": "npm link ./dist/wvr-elements",
     "ng": "ng",
-    "start": "node scripts/build-wvr-components-configuration.js defaults-dev-overrides.env && ng serve --port 4200",
-    "start:dist": "node scripts/build-wvr-components-configuration.js defaults-dist-overrides.env && node scripts/serve-dist.js",
-    "start:static": "node scripts/build-wvr-components-configuration.js defaults-static-overrides.env && static-server static -p 8081",
-    "start:docker": "node scripts/start-docker.js",
+    "start": "node scripts/build-wvr-components-style.js && node scripts/build-wvr-components-configuration.js defaults-dev-overrides.env && ng serve --port 4200",
+    "start:dist": "node scripts/build-wvr-components-style.js && node scripts/build-wvr-components-configuration.js defaults-dist-overrides.env && node scripts/serve-dist.js",
+    "start:static": "node scripts/build-wvr-components-style.js && node scripts/build-wvr-components-configuration.js defaults-static-overrides.env && static-server static -p 8081",
+    "start:docker": "node scripts/build-wvr-components-style.js && node scripts/start-docker.js",
     "test": "npm run test:unit && npm run test:e2e",
     "test:audit": "rimraf .lighthouseci && lhci autorun --upload.target=temporary-public-storage --config=./lighthouserc.json && node scripts/build-wvr-components-lighthouse-badges.js",
     "test:e2e": "ng e2e",
@@ -51,24 +52,24 @@
     "test:ci": "npm run test:coverage && npm run test:audit"
   },
   "dependencies": {
-    "@angular/animations": "^10.2.0",
-    "@angular/common": "^10.2.0",
-    "@angular/compiler": "^10.2.0",
-    "@angular/core": "^10.2.0",
-    "@angular/elements": "^10.2.0",
-    "@angular/forms": "^10.2.0",
-    "@angular/localize": "^10.2.0",
-    "@angular/platform-browser": "^10.2.0",
-    "@angular/platform-browser-dynamic": "^10.2.0",
-    "@angular/router": "^10.2.0",
-    "@ng-bootstrap/ng-bootstrap": "^7.0.0",
+    "@angular/animations": "^11.0.0",
+    "@angular/common": "^11.0.0",
+    "@angular/compiler": "^11.0.0",
+    "@angular/core": "^11.0.0",
+    "@angular/elements": "^11.0.0",
+    "@angular/forms": "^11.0.0",
+    "@angular/localize": "^11.0.0",
+    "@angular/platform-browser": "^11.0.0",
+    "@angular/platform-browser-dynamic": "^11.0.0",
+    "@angular/router": "^11.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^8.0.0",
     "@ngrx/core": "^1.2.0",
     "@ngrx/effects": "^10.0.1",
     "@ngrx/entity": "^10.0.1",
     "@ngrx/router-store": "^10.0.1",
     "@ngrx/store": "^10.0.1",
     "@ngrx/store-devtools": "^10.0.1",
-    "@types/json5": "0.0.30",
+    "@types/json5": "^0.0.30",
     "bootstrap": "^4.5.3",
     "classlist.js": "^1.1.20150312",
     "css-element-queries": "^1.2.3",
@@ -76,27 +77,28 @@
     "dotenv-override": "^5.0.1",
     "dotenv-override-true": "^6.2.2",
     "handlebars": "^4.7.6",
+    "handlebars-loader": "^1.7.1",
     "ie11-custom-properties": "^4.1.0",
     "json5": "^2.1.3",
     "rxjs": "~6.6.3",
     "tslib": "^2.0.3",
     "web-animations-js": "^2.3.2",
-    "zone.js": "~0.11.2"
+    "zone.js": "~0.11.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1002.0",
-    "@angular-devkit/build-ng-packagr": "~0.1001.7",
-    "@angular-devkit/schematics": "^10.1.7",
-    "@angular/cli": "^10.1.7",
-    "@angular/compiler-cli": "^10.2.0",
-    "@angular/language-service": "^10.2.0",
+    "@angular-devkit/build-angular": "^0.1100.0",
+    "@angular-devkit/build-ng-packagr": "~0.1002.0",
+    "@angular-devkit/schematics": "^11.0.0",
+    "@angular/cli": "^11.0.0",
+    "@angular/compiler-cli": "^11.0.0",
+    "@angular/language-service": "^11.0.0",
     "@compodoc/compodoc": "^1.1.11",
-    "@lhci/cli": "^0.5.1",
+    "@lhci/cli": "^0.6.1",
     "@ngrx/schematics": "^10.0.1",
     "@pickra/copy-code-block": "^1.2.0",
-    "@types/jasmine": "~3.5.14",
+    "@types/jasmine": "~3.6.1",
     "@types/jasminewd2": "~2.0.8",
-    "@types/node": "^14.14.2",
+    "@types/node": "^14.14.7",
     "angular-tslint-rules": "^1.20.4",
     "chalk": "^4.1.0",
     "chrome-launcher": "^0.13.4",
@@ -115,14 +117,14 @@
     "karma-jasmine-html-reporter": "^1.5.4",
     "lighthouse": "^6.4.1",
     "lighthouse-badges": "^1.0.36",
-    "ng-packagr": "^10.1.2",
+    "ng-packagr": "^11.0.2",
     "protractor": "~7.0.0",
     "rimraf": "^3.0.2",
     "shelljs": "^0.8.4",
     "static-server": "^2.2.1",
-    "ts-loader": "^8.0.6",
+    "ts-loader": "^8.0.11",
     "ts-node": "~9.0.0",
     "tslint": "~6.1.3",
-    "typescript": "~4.0.3"
+    "typescript": "~4.0.5"
   }
 }
diff --git a/projects/wvr-elements/ng-package.json b/projects/wvr-elements/ng-package.json
index 3f734c9e2..75f6bea2a 100644
--- a/projects/wvr-elements/ng-package.json
+++ b/projects/wvr-elements/ng-package.json
@@ -5,6 +5,7 @@
     "entryFile": "src/public-api.ts"
   },
   "whitelistedNonPeerDependencies": [
-    "css-element-queries"
+    "css-element-queries",
+    "handlebars"
   ]
 }
diff --git a/projects/wvr-elements/package.json b/projects/wvr-elements/package.json
index 34670106e..354336d2f 100644
--- a/projects/wvr-elements/package.json
+++ b/projects/wvr-elements/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wvr/elements",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Collection of angular components for Weaver's Custom Web Component UI",
   "author": "Texas A&M University Libraries",
   "private": false,
@@ -22,7 +22,8 @@
   "license": "MIT",
   "dependencies": {
     "css-element-queries": "^1.2.3",
-    "tslib": "^2.0.0"
+    "tslib": "^2.0.0",
+    "handlebars": "^4.7.6"
   },
   "bin": {
     "wvr-ud": "./scripts/build-wvr-ud.js"
diff --git a/projects/wvr-elements/src/lib/core/wvr-animation.service.spec.ts b/projects/wvr-elements/src/lib/core/animation.service.spec.ts
similarity index 88%
rename from projects/wvr-elements/src/lib/core/wvr-animation.service.spec.ts
rename to projects/wvr-elements/src/lib/core/animation.service.spec.ts
index 4c23b8921..f1d03a71e 100644
--- a/projects/wvr-elements/src/lib/core/wvr-animation.service.spec.ts
+++ b/projects/wvr-elements/src/lib/core/animation.service.spec.ts
@@ -2,12 +2,14 @@ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { StoreModule } from '@ngrx/store';
+import { WvrBaseComponent } from '../shared/wvr-base.component';
 import { WvrItWorksComponent } from '../wvr-it-works/wvr-it-works.component';
 import { metaReducers, ROOT_REDUCER } from './store';
-import { WvrAnimationService } from './wvr-animation.service';
+import { AnimationService } from './animation.service';
+import { APP_CONFIG, testAppConfig } from '../shared/config';
 
-describe('WvrAnimationService', () => {
-  let service: WvrAnimationService;
+describe('AnimationService', () => {
+  let service: AnimationService<WvrBaseComponent>;
   let componentOne: WvrItWorksComponent;
   let componentTwo: WvrItWorksComponent;
   let fixtureOne: ComponentFixture<WvrItWorksComponent>;
@@ -17,13 +19,17 @@ describe('WvrAnimationService', () => {
     await TestBed.configureTestingModule({
       imports: [BrowserAnimationsModule, StoreModule.forRoot(ROOT_REDUCER, { metaReducers })],
       declarations: [WvrItWorksComponent],
+      providers: [{
+        provide: APP_CONFIG,
+        useValue: testAppConfig
+      }],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     })
       .compileComponents();
   });
 
   beforeEach(() => {
-    service = TestBed.inject(WvrAnimationService);
+    service = TestBed.inject(AnimationService);
 
     fixtureOne = TestBed.createComponent(WvrItWorksComponent);
     componentOne = fixtureOne.componentInstance;
diff --git a/projects/wvr-elements/src/lib/core/wvr-animation.service.ts b/projects/wvr-elements/src/lib/core/animation.service.ts
similarity index 93%
rename from projects/wvr-elements/src/lib/core/wvr-animation.service.ts
rename to projects/wvr-elements/src/lib/core/animation.service.ts
index 76f8916f7..1f71b8397 100644
--- a/projects/wvr-elements/src/lib/core/wvr-animation.service.ts
+++ b/projects/wvr-elements/src/lib/core/animation.service.ts
@@ -1,8 +1,10 @@
+/* istanbul ignore file */
+
 import { animation, AnimationBuilder, AnimationMetadata, AnimationPlayer, AnimationReferenceMetadata, useAnimation } from '@angular/animations';
 import { Injectable } from '@angular/core';
 import { wvrAnimationDefaults } from '../shared/animation/wvr-animation-defaults';
 import { wvrAnimationInitialization, wvrAnimations } from '../shared/animation/wvr-animations';
-import { WvrBaseComponent } from '../shared/wvr-base.component';
+import { WvrAnimationComponent } from '../shared/wvr-animation.component';
 
 /**
  * A centralized utility for handeling animation tasks.
@@ -11,10 +13,10 @@ import { WvrBaseComponent } from '../shared/wvr-base.component';
   providedIn: 'root',
   deps: [AnimationBuilder]
 })
-export class WvrAnimationService {
+export class AnimationService<T extends WvrAnimationComponent> {
 
   /** A registry of WvrBaseComponent which are participating in animations. */
-  private readonly _animationTargetsRegistry = new Map<string, Array<WvrBaseComponent>>();
+  private readonly _animationTargetsRegistry = new Map<string, Array<T>>();
 
   /** Records state for each WvrBaseComponent which is participating in animation */
   private readonly animationStates = new Map<number, Map<string, boolean>>();
@@ -22,11 +24,11 @@ export class WvrAnimationService {
   constructor(private readonly builder: AnimationBuilder) { }
 
   /** Adds a component to the registry of targets */
-  registerAnimationTargets(targetName: string, component: WvrBaseComponent): void {
+  registerAnimationTargets(targetName: string, component: T): void {
     let targets = this._animationTargetsRegistry.get(targetName);
     /* istanbul ignore else */
     if (!targets) {
-      targets = new Array<WvrBaseComponent>();
+      targets = new Array<T>();
       this._animationTargetsRegistry.set(targetName, targets);
     }
     targets.push(component);
diff --git a/projects/wvr-elements/src/lib/core/component-registry.service.spec.ts b/projects/wvr-elements/src/lib/core/component-registry.service.spec.ts
index 6542deb69..8ac0c16c6 100644
--- a/projects/wvr-elements/src/lib/core/component-registry.service.spec.ts
+++ b/projects/wvr-elements/src/lib/core/component-registry.service.spec.ts
@@ -1,7 +1,8 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { StoreModule } from '@ngrx/store';
+import { APP_CONFIG, testAppConfig } from '../shared/config';
 import { WvrItWorksComponent } from '../wvr-it-works/wvr-it-works.component';
 
 import { ComponentRegistryService } from './component-registry.service';
@@ -12,10 +13,14 @@ describe('ComponentRegistryService', () => {
   let component: WvrItWorksComponent;
   let fixture: ComponentFixture<WvrItWorksComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [BrowserAnimationsModule, StoreModule.forRoot(ROOT_REDUCER, { metaReducers })],
       declarations: [WvrItWorksComponent],
+      providers: [{
+        provide: APP_CONFIG,
+        useValue: testAppConfig
+      }],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     })
       .compileComponents()
diff --git a/projects/wvr-elements/src/lib/core/component-registry.service.ts b/projects/wvr-elements/src/lib/core/component-registry.service.ts
index 92736b668..18ff89b2e 100644
--- a/projects/wvr-elements/src/lib/core/component-registry.service.ts
+++ b/projects/wvr-elements/src/lib/core/component-registry.service.ts
@@ -1,3 +1,5 @@
+/* istanbul ignore file */
+
 import { Injectable } from '@angular/core';
 
 /**
@@ -45,7 +47,7 @@ export class ComponentRegistryService<T> {
     const htmlID = hasNativeId ? element.getAttribute('wvr-id') : element.getAttribute('id');
 
     if (!htmlID) {
-      return;
+      return undefined;
     }
 
     const id = parseInt(htmlID.replace(`${ComponentRegistryService.HTML_ID_BASE}-`, ''), 10);
diff --git a/projects/wvr-elements/src/lib/core/handlebars-helpers.ts b/projects/wvr-elements/src/lib/core/handlebars-helpers.ts
index 7d4a9fde8..33cb6f6d2 100644
--- a/projects/wvr-elements/src/lib/core/handlebars-helpers.ts
+++ b/projects/wvr-elements/src/lib/core/handlebars-helpers.ts
@@ -1,8 +1,15 @@
+import Handlebars from 'handlebars/dist/cjs/handlebars';
 
-/**
- * All helpers available in templating.
- * DEV NOTE: New helpers must be registered in TemplateService.
- */
-export const handlebarsHelpers = {
-  json: context => JSON.stringify(context)
+let handlebarHelpersInitialized = false;
+
+const initializeHandlebarHelpers = (initialContext: any = {}) => {
+  if (!handlebarHelpersInitialized) {
+    Handlebars.registerHelper('json', context => JSON.stringify(context, undefined, 2));
+    handlebarHelpersInitialized = true;
+  }
+};
+
+export {
+  handlebarHelpersInitialized,
+  initializeHandlebarHelpers
 };
diff --git a/projects/wvr-elements/src/lib/core/manifest/manifest.effects.ts b/projects/wvr-elements/src/lib/core/manifest/manifest.effects.ts
index 94101ed5e..a8230cf54 100644
--- a/projects/wvr-elements/src/lib/core/manifest/manifest.effects.ts
+++ b/projects/wvr-elements/src/lib/core/manifest/manifest.effects.ts
@@ -12,7 +12,7 @@ import * as ManifestActions from './manifest.actions';
 @Injectable()
 export class ManifestEffects {
 
-  constructor(private actions: Actions, private store: Store<RootState>) {
+  constructor(private readonly actions: Actions, private readonly store: Store<RootState>) {
 
   }
 
@@ -108,7 +108,7 @@ export class ManifestEffects {
     )
   );
 
-  private requestsByMethod = (method: RequestMethod) => {
+  private readonly requestsByMethod = (method: RequestMethod) => {
     switch (method) {
       case 'OPTIONS': return RestActions.optionsRequest;
       case 'POST': return RestActions.postRequest;
@@ -116,7 +116,7 @@ export class ManifestEffects {
       case 'PATCH': return RestActions.patchRequest;
       case 'DELETE': return RestActions.deleteRequest;
       case 'GET': return RestActions.getRequest;
-      default: return;
+      default: return undefined;
     }
   };
 
diff --git a/projects/wvr-elements/src/lib/core/manifest/manifest.service.ts b/projects/wvr-elements/src/lib/core/manifest/manifest.service.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/projects/wvr-elements/src/lib/core/rest/rest.actions.ts b/projects/wvr-elements/src/lib/core/rest/rest.actions.ts
index 84bcbd26d..4c972b95b 100644
--- a/projects/wvr-elements/src/lib/core/rest/rest.actions.ts
+++ b/projects/wvr-elements/src/lib/core/rest/rest.actions.ts
@@ -100,7 +100,3 @@ export const logResponse = createAction(
     response: any
   }>()
 );
-
-
-
-
diff --git a/projects/wvr-elements/src/lib/core/rest/rest.effects.ts b/projects/wvr-elements/src/lib/core/rest/rest.effects.ts
index 73396c239..5354167d8 100644
--- a/projects/wvr-elements/src/lib/core/rest/rest.effects.ts
+++ b/projects/wvr-elements/src/lib/core/rest/rest.effects.ts
@@ -10,8 +10,8 @@ import { RestService } from './rest.service';
 export class RestEffects {
 
   constructor(
-    private actions: Actions,
-    private rest: RestService
+    private readonly actions: Actions,
+    private readonly rest: RestService
   ) {
 
   }
@@ -124,16 +124,16 @@ export class RestEffects {
     )
   );
 
-  private options = (request: Request): Observable<any> => this.rest.options(request);
+  private readonly options = (request: Request): Observable<any> => this.rest.options(request);
 
-  private get = (request: Request): Observable<any> => this.rest.get(request);
+  private readonly get = (request: Request): Observable<any> => this.rest.get(request);
 
-  private post = (request: Request): Observable<any> => this.rest.post(request);
+  private readonly post = (request: Request): Observable<any> => this.rest.post(request);
 
-  private put = (request: Request): Observable<any> => this.rest.put(request);
+  private readonly put = (request: Request): Observable<any> => this.rest.put(request);
 
-  private patch = (request: Request): Observable<any> => this.rest.patch(request);
+  private readonly patch = (request: Request): Observable<any> => this.rest.patch(request);
 
-  private delete = (request: Request): Observable<any> => this.rest.delete(request);
+  private readonly delete = (request: Request): Observable<any> => this.rest.delete(request);
 
 }
diff --git a/projects/wvr-elements/src/lib/core/rest/rest.service.ts b/projects/wvr-elements/src/lib/core/rest/rest.service.ts
index bb80027e0..cb89d8a9f 100644
--- a/projects/wvr-elements/src/lib/core/rest/rest.service.ts
+++ b/projects/wvr-elements/src/lib/core/rest/rest.service.ts
@@ -9,7 +9,7 @@ import { Request } from './request';
 })
 export class RestService {
 
-  constructor(private http: HttpClient) {
+  constructor(private readonly http: HttpClient) {
 
   }
 
diff --git a/projects/wvr-elements/src/lib/core/store.ts b/projects/wvr-elements/src/lib/core/store.ts
index 5ec613b27..dfc12b541 100644
--- a/projects/wvr-elements/src/lib/core/store.ts
+++ b/projects/wvr-elements/src/lib/core/store.ts
@@ -1,18 +1,23 @@
+/* istanbul ignore file */
+
 import { InjectionToken } from '@angular/core';
 import { ActionReducerMap, createFeatureSelector, createSelector, MetaReducer } from '@ngrx/store';
 import { Manifest } from './manifest/manifest';
 import { ManifestEntry } from './manifest/manifest-entry';
 import * as fromManifest from './manifest/manifest.reducers';
 import * as fromRest from './rest/rest.reducers';
+import * as fromTheme from './theme/theme.reducers';
 
 export interface RootState {
-  rest: fromRest.State;
   manifests: fromManifest.State;
+  rest: fromRest.State;
+  theme: fromTheme.State;
 }
 
 export const reducers: ActionReducerMap<RootState> = {
+  manifests: fromManifest.reducer,
   rest: fromRest.reducer,
-  manifests: fromManifest.reducer
+  theme: fromTheme.reducer
 };
 
 export const ROOT_REDUCER = new InjectionToken<ActionReducerMap<RootState>>('Root Reducer', {
@@ -21,11 +26,16 @@ export const ROOT_REDUCER = new InjectionToken<ActionReducerMap<RootState>>('Roo
 
 export const metaReducers: Array<MetaReducer<RootState>> = [];
 
+// manifest selectors
+export const selectManifestState = createFeatureSelector<RootState, fromManifest.State>('manifests');
+
 // rest selectors
 export const selectRestState = createFeatureSelector<RootState, fromRest.State>('rest');
 
-// manifest selectors
-export const selectManifestState = createFeatureSelector<RootState, fromManifest.State>('manifests');
+// theme selectors
+export const selectThemeState = createFeatureSelector<RootState, fromTheme.State>('theme');
+
+const findManifestEntry = (manifest: Manifest, entryName: string): ManifestEntry => manifest.entries.find(e => e.name === entryName);
 
 export const selectManifestNames = createSelector(
   selectManifestState,
@@ -85,4 +95,12 @@ export const selectManifestEntryError = (manifestName: string, entryName: string
   }
 );
 
-const findManifestEntry = (manifest: Manifest, entryName: string): ManifestEntry => manifest.entries.find(e => e.name === entryName);
+export const selectTheme = (name: string) => createSelector(
+  selectThemeState,
+  (themeState: fromTheme.State) => themeState.themes[name]
+);
+
+export const selectCurrentTheme = createSelector(
+  selectThemeState,
+  (themeState: fromTheme.State) => themeState.themes[themeState.currentTheme]
+);
diff --git a/projects/wvr-elements/src/lib/core/template.service.spec.ts b/projects/wvr-elements/src/lib/core/template.service.spec.ts
index 98412335d..c278f3614 100644
--- a/projects/wvr-elements/src/lib/core/template.service.spec.ts
+++ b/projects/wvr-elements/src/lib/core/template.service.spec.ts
@@ -2,14 +2,15 @@ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { StoreModule } from '@ngrx/store';
+import { APP_CONFIG, testAppConfig } from '../shared/config';
+import { WvrBaseComponent } from '../shared/wvr-base.component';
 import { WvrItWorksComponent } from '../wvr-it-works/wvr-it-works.component';
 import { WvrDataSelect } from './data-select';
 import { metaReducers, ROOT_REDUCER } from './store';
-
 import { TemplateService } from './template.service';
 
 describe('TemplateService', () => {
-  let service: TemplateService;
+  let service: TemplateService<WvrBaseComponent>;
   let component: WvrItWorksComponent;
   let projectedContent: HTMLElement;
   let fixture: ComponentFixture<WvrItWorksComponent>;
@@ -18,6 +19,10 @@ describe('TemplateService', () => {
     TestBed.configureTestingModule({
       imports: [BrowserAnimationsModule, StoreModule.forRoot(ROOT_REDUCER, { metaReducers })],
       declarations: [WvrItWorksComponent],
+      providers: [{
+        provide: APP_CONFIG,
+        useValue: testAppConfig
+      }],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     });
     service = TestBed.inject(TemplateService);
@@ -26,8 +31,9 @@ describe('TemplateService', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(WvrItWorksComponent);
     component = fixture.componentInstance;
-    projectedContent = document.createElement('wvr-template');
-    projectedContent.innerHTML = '<!--<p>{{data.test}}</p>-->';
+    projectedContent = document.createElement('template');
+    projectedContent.setAttribute('wvr-compile', 'true');
+    projectedContent.innerHTML = '<p>{{data.test}}</p>';
 
     fixture.detectChanges();
   });
diff --git a/projects/wvr-elements/src/lib/core/template.service.ts b/projects/wvr-elements/src/lib/core/template.service.ts
index b355168be..af793e2e0 100644
--- a/projects/wvr-elements/src/lib/core/template.service.ts
+++ b/projects/wvr-elements/src/lib/core/template.service.ts
@@ -1,32 +1,29 @@
+/* istanbul ignore file */
+
 import { Injectable } from '@angular/core';
-import * as Handlebars from 'handlebars';
-import { WvrBaseComponent } from '../shared/wvr-base.component';
-import { handlebarsHelpers } from './handlebars-helpers';
+import Handlebars from 'handlebars/dist/cjs/handlebars';
 import * as JSON5 from 'json5';
 import { WvrDataSelect } from './data-select';
+import { initializeHandlebarHelpers } from './handlebars-helpers';
+import { WvrDataComponent } from '../shared/wvr-data.component';
+import { wvrTimeout } from '../shared/utility';
 
 @Injectable({
   providedIn: 'root'
 })
-export class TemplateService {
+export class TemplateService<T extends WvrDataComponent> {
 
   constructor() {
-    // Object.keys(handlebarsHelpers)
-    //   .forEach(name => {
-    //     const helper = handlebarsHelpers[name];
-    //     if (helper) {
-    //       Handlebars.registerHelper(name, helper);
-    //     }
-    //   });
+    initializeHandlebarHelpers({});
   }
 
-  parseProjectedContent(component: WvrBaseComponent, elem: HTMLElement): void {
+  parseProjectedContent(component: T, elem: HTMLElement): void {
     if (!component.hasWvrData()) {
       return;
     }
 
-    setTimeout(() => {
-      const projectedContentElem = elem.querySelector('wvre-template') as HTMLElement;
+    wvrTimeout(() => {
+      const projectedContentElem = elem.querySelector('template[wvr-compile]');
       if (!projectedContentElem) {
         return;
       }
@@ -36,7 +33,9 @@ export class TemplateService {
       wvrDataSelects
         .filter((s: WvrDataSelect) => !!s.manifest && !!s.entry && !!s.as)
         .forEach((s: WvrDataSelect) => {
-          component.data[s.as].subscribe(d => this.compile(d, s, elem, projectedContentElem));
+          component.data[s.as].subscribe(d => {
+            this.compile(d, s, elem, projectedContentElem as HTMLElement);
+          });
         });
     });
   }
@@ -45,9 +44,7 @@ export class TemplateService {
     const data = {};
     data[s.as] = d;
     const compiledContent = Handlebars.compile(projectedContentElem.innerHTML)(data);
-    projectedContentElem.outerHTML = compiledContent
-        .replace('<!--', '')
-        .replace('-->', '');
+    projectedContentElem.outerHTML = compiledContent;
   }
 
 }
diff --git a/projects/wvr-elements/src/lib/core/theme/theme.actions.ts b/projects/wvr-elements/src/lib/core/theme/theme.actions.ts
new file mode 100644
index 000000000..1af8c8e47
--- /dev/null
+++ b/projects/wvr-elements/src/lib/core/theme/theme.actions.ts
@@ -0,0 +1,12 @@
+import { createAction, props } from '@ngrx/store';
+import { ThemeVariants } from '../../shared/theme';
+
+export const add = createAction(
+  '[Theme] Add',
+  props<{ name: string, theme: ThemeVariants }>()
+);
+
+export const select = createAction(
+  '[Theme] Select',
+  props<{ name: string}>()
+);
diff --git a/projects/wvr-elements/src/lib/core/theme/theme.effects.ts b/projects/wvr-elements/src/lib/core/theme/theme.effects.ts
new file mode 100644
index 000000000..717f10fcd
--- /dev/null
+++ b/projects/wvr-elements/src/lib/core/theme/theme.effects.ts
@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { Actions } from '@ngrx/effects';
+import { ThemeService } from './theme.service';
+
+@Injectable()
+export class ThemeEffects {
+
+  constructor(
+    private readonly actions: Actions,
+    private readonly themeService: ThemeService
+  ) {
+
+  }
+
+}
diff --git a/projects/wvr-elements/src/lib/core/theme/theme.reducers.ts b/projects/wvr-elements/src/lib/core/theme/theme.reducers.ts
new file mode 100644
index 000000000..73d82c66e
--- /dev/null
+++ b/projects/wvr-elements/src/lib/core/theme/theme.reducers.ts
@@ -0,0 +1,45 @@
+/* istanbul ignore file */
+
+import { createReducer, on } from '@ngrx/store';
+import { ThemeVariants } from '../../shared/theme';
+import * as DefaultDarkTheme from '../../shared/theme/default-dark-theme.json';
+import * as DefaultTheme from '../../shared/theme/default-theme.json';
+import * as ThemeActions from './theme.actions';
+
+const defaultTheme: ThemeVariants = DefaultTheme;
+const defaultDarkTheme: ThemeVariants = DefaultDarkTheme;
+
+const unwrap = (theme: any): ThemeVariants => theme.default;
+
+export interface State {
+  themes: { [name: string]: ThemeVariants };
+  currentTheme: string;
+}
+
+export const initialState: State = {
+  themes: {
+    default: unwrap(defaultTheme),
+    defaultDark: unwrap(defaultDarkTheme)
+  },
+  currentTheme: 'default'
+};
+
+export const reducer = createReducer(
+  initialState,
+  on(ThemeActions.add, (state, { name, theme }) => {
+    const themes = { ...state.themes };
+    themes[name] = {
+      ...themes[name],
+      ...theme
+    };
+
+    return {
+      ...state,
+      themes
+    };
+  }),
+  on(ThemeActions.select, (state, { name }) => ({
+    ...state,
+    currentTheme: name
+  }))
+);
diff --git a/projects/wvr-elements/src/lib/core/theme/theme.service.spec.ts b/projects/wvr-elements/src/lib/core/theme/theme.service.spec.ts
new file mode 100644
index 000000000..53c9e7e15
--- /dev/null
+++ b/projects/wvr-elements/src/lib/core/theme/theme.service.spec.ts
@@ -0,0 +1,31 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { TestBed , waitForAsync } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { StoreModule } from '@ngrx/store';
+import { metaReducers, ROOT_REDUCER } from '../store';
+import { ThemeService } from './theme.service';
+import { APP_CONFIG, testAppConfig } from '../../shared/config';
+
+describe('ThemeService', () => {
+  let service: ThemeService;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [BrowserAnimationsModule, StoreModule.forRoot(ROOT_REDUCER, { metaReducers })],
+      providers: [{
+        provide: APP_CONFIG,
+        useValue: testAppConfig
+      }],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    })
+      .compileComponents()
+      .catch(err => { console.error(err); });
+    service = TestBed.inject(ThemeService);
+  }));
+
+  it('should be created', () => {
+    expect(service)
+      .toBeTruthy();
+  });
+
+});
diff --git a/projects/wvr-elements/src/lib/core/theme/theme.service.ts b/projects/wvr-elements/src/lib/core/theme/theme.service.ts
new file mode 100644
index 000000000..9774cdb8f
--- /dev/null
+++ b/projects/wvr-elements/src/lib/core/theme/theme.service.ts
@@ -0,0 +1,179 @@
+/* istanbul ignore file */
+
+import { Injectable } from '@angular/core';
+import { select, Store } from '@ngrx/store';
+import { filter } from 'rxjs/operators';
+import { ThemeVariants } from '../../shared/theme';
+import { hexToRgb, luminance, mix, yiq } from '../../shared/utility/color.utlity';
+import { WvrThemeableComponent } from '../../shared/wvr-themeable.component';
+import { RootState, selectCurrentTheme, selectTheme } from '../store';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ThemeService {
+
+  constructor(private readonly store: Store<RootState>) {
+
+  }
+
+  applyThemeStyle(colorThemeName: string, themeableComponent: WvrThemeableComponent): void {
+    this.store
+      .pipe(select(selectCurrentTheme), filter(theme => !!theme))
+      .subscribe(theme => {
+        let styles = '';
+        styles += this.processThemeVariants(theme, themeableComponent);
+        themeableComponent.style = styles;
+      });
+  }
+
+  // tslint:disable-next-line:prefer-function-over-method
+  private processThemeVariants(theme: ThemeVariants, themeableComponent: WvrThemeableComponent): string {
+    const computedStyle = getComputedStyle(themeableComponent._eRef.nativeElement);
+
+    const yiqContrastedThreshold = Number(computedStyle.getPropertyValue('--yiq-contrasted-threshold')
+      .trim());
+    const yiqTextDark = computedStyle.getPropertyValue('--yiq-text-dark')
+      .trim();
+    const yiqTextLight = computedStyle.getPropertyValue('--yiq-text-light')
+      .trim();
+
+    const themeColorInterval = parseInt(computedStyle.getPropertyValue('--theme-color-interval')
+      .trim(), 10);
+
+    const alertBackgroundLevel = Number(computedStyle.getPropertyValue('--alert-bg-level')
+      .trim());
+    const alertBorderLevel = Number(computedStyle.getPropertyValue('--alert-border-level')
+      .trim());
+    const alertColorLevel = Number(computedStyle.getPropertyValue('--alert-color-level')
+      .trim());
+
+    const listGroupItemBackgroundLevel = Number(computedStyle.getPropertyValue('--list-group-item-bg-level')
+      .trim());
+    const listGroupItemColorLevel = Number(computedStyle.getPropertyValue('--list-group-item-color-level')
+      .trim());
+
+    const tableBackgroundLevel = Number(computedStyle.getPropertyValue('--table-bg-level')
+      .trim());
+    const tableBorderLevel = Number(computedStyle.getPropertyValue('--table-border-level')
+      .trim());
+
+    const black = computedStyle.getPropertyValue('--black')
+      .trim();
+    const white = computedStyle.getPropertyValue('--white')
+      .trim();
+
+    const constrast = (level: number) => (level > 0 ? black : white);
+    const yiqConstrast = (value: number) => (value >= yiqContrastedThreshold ? yiqTextDark : yiqTextLight);
+
+    let styles = '';
+
+    const appendStyle = (customProperty: string, value: string): void => {
+      styles += themeableComponent.themeOverrides[customProperty]
+        ? `${customProperty}: ${themeableComponent.themeOverrides[customProperty]};`
+        : `${customProperty}: ${value};`;
+    };
+
+    // update variant variables
+    for (const k of Object.keys(theme)) {
+      const key = `--${k}`;
+      const value = theme[k].baseColor;
+
+      // update theme variable
+      styles += `${key}: ${value};`;
+
+      themeableComponent.variantTypes.forEach(variantType => {
+
+        switch (variantType) {
+          case 'alert':
+            // update alert variants
+            const alertBgValue = mix(constrast(alertBackgroundLevel), value, Math.abs(alertBackgroundLevel) * themeColorInterval);
+            appendStyle(`${key}-alert-bg`, alertBgValue);
+
+            const alertBorderValue = mix(constrast(alertBorderLevel), value, Math.abs(alertBorderLevel) * themeColorInterval);
+            appendStyle(`${key}-alert-border`, alertBorderValue);
+
+            const alertColorValue = mix(constrast(alertColorLevel), value, Math.abs(alertColorLevel) * themeColorInterval);
+            appendStyle(`${key}-alert-color`, alertColorValue);
+            break;
+          case 'badge':
+            // update badge variants
+            const badgeBgValue = value;
+            appendStyle(`${key}-badge-bg`, badgeBgValue);
+
+            const badgeColorValue = yiqConstrast(yiq(value));
+            appendStyle(`${key}-badge-color`, badgeColorValue);
+            break;
+          case 'button':
+            // update button outline variants
+            const buttonOutlineColorValue = value;
+            appendStyle(`${key}-button-outline-color`, buttonOutlineColorValue);
+
+            const buttonOutlineColorHoverValue = yiqConstrast(yiq(value));
+            appendStyle(`${key}-button-outline-color-hover`, buttonOutlineColorHoverValue);
+
+            const bobsrgba = hexToRgb(value);
+            const buttonOutlineBoxShadowColorValue = `rgba(${bobsrgba.r}, ${bobsrgba.g}, ${bobsrgba.b}, .5)`;
+            appendStyle(`${key}-button-outline-box-shadow-color`, buttonOutlineBoxShadowColorValue);
+
+            // update button variants
+            const buttonColorValue = yiqConstrast(yiq(value));
+            appendStyle(`${key}-button-color`, buttonColorValue);
+
+            const buttonBgValue = value;
+            appendStyle(`${key}-button-bg`, buttonBgValue);
+
+            const buttonBorderValue = value;
+            appendStyle(`${key}-button-border`, buttonBorderValue);
+
+            const buttonHoverColorValue = yiqConstrast(yiq(luminance(value, -0.1165)));
+            appendStyle(`${key}-button-hover-color`, buttonHoverColorValue);
+
+            const buttonHoverBgValue = luminance(value, -0.1165);
+            appendStyle(`${key}-button-hover-bg`, buttonHoverBgValue);
+
+            const buttonHoverBorderValue = luminance(value, -0.1415);
+            appendStyle(`${key}-button-hover-border`, buttonHoverBorderValue);
+
+            const buttonActiveColorValue = yiqConstrast(yiq(luminance(value, -0.1415)));
+            appendStyle(`${key}-button-active-color`, buttonActiveColorValue);
+
+            const buttonActiveBgValue = luminance(value, -0.1415);
+            appendStyle(`${key}-button-active-bg`, buttonActiveBgValue);
+
+            const buttonActiveBorderValue = luminance(value, -0.17);
+            appendStyle(`${key}-button-active-border`, buttonActiveBorderValue);
+
+            const bbsrgba = hexToRgb(mix(yiqConstrast(yiq(luminance(buttonBgValue, -0.1165))), buttonBorderValue, 15));
+            const buttonBoxShadowColorValue = `rgba(${bbsrgba.r}, ${bbsrgba.g}, ${bbsrgba.b}, .5)`;
+            appendStyle(`${key}-button-box-shadow-color`, buttonBoxShadowColorValue);
+            break;
+          case 'list-group-item':
+            // update list item group variants
+            // tslint:disable-next-line:max-line-length
+            const listGroupItemBgValue = mix(constrast(listGroupItemBackgroundLevel), value, Math.abs(listGroupItemBackgroundLevel) * themeColorInterval);
+            appendStyle(`${key}-list-group-item-bg`, listGroupItemBgValue);
+
+            // tslint:disable-next-line:max-line-length
+            const listGroupItemColorValue = mix(constrast(listGroupItemColorLevel), value, Math.abs(listGroupItemColorLevel) * themeColorInterval);
+            appendStyle(`${key}-list-group-item-color`, listGroupItemColorValue);
+            break;
+          case 'table':
+            // update table variants
+            const tableBgValue = mix(constrast(tableBackgroundLevel), value, Math.abs(tableBackgroundLevel) * themeColorInterval);
+            appendStyle(`${key}-table-bg`, tableBgValue);
+
+            const tableBorderValue = mix(constrast(tableBorderLevel), value, Math.abs(tableBorderLevel) * themeColorInterval);
+            appendStyle(`${key}-table-border`, tableBorderValue);
+            break;
+          default: break;
+        }
+
+      });
+    }
+
+    return styles;
+  }
+
+}
diff --git a/projects/wvr-elements/src/lib/shared/config/app-config.ts b/projects/wvr-elements/src/lib/shared/config/app-config.ts
index 4bf8203c0..06af5d336 100644
--- a/projects/wvr-elements/src/lib/shared/config/app-config.ts
+++ b/projects/wvr-elements/src/lib/shared/config/app-config.ts
@@ -3,11 +3,15 @@ import { InjectionToken } from '@angular/core';
 /** Describes the application configuration values. */
 interface AppConfig {
 
+  /** Theme to apply to all Weaver Components. */
+  theme: string;
+
   /** A reference to the location from which Weaver Components is currently being served. */
   baseUrl: string;
 
   /** A reference to the location from which Weaver Component's Assets are currently being served. */
   assetsUrl?: string;
+
 }
 
 /** An injection token for the AppConfig */
diff --git a/projects/wvr-elements/src/lib/shared/config/test-app-config.ts b/projects/wvr-elements/src/lib/shared/config/test-app-config.ts
index 52578845d..5b5ae31ae 100644
--- a/projects/wvr-elements/src/lib/shared/config/test-app-config.ts
+++ b/projects/wvr-elements/src/lib/shared/config/test-app-config.ts
@@ -2,6 +2,7 @@ import { AppConfig } from './app-config';
 
 /** An application configuration to be used in testing. */
 export const testAppConfig: AppConfig = {
+  theme: 'default',
   baseUrl: 'http://localhost:4200',
   assetsUrl: 'http://localhost:4200/assets'
 };
diff --git a/projects/wvr-elements/src/lib/shared/styles/_mixins.scss b/projects/wvr-elements/src/lib/shared/styles/_mixins.scss
new file mode 100644
index 000000000..e6a2e0844
--- /dev/null
+++ b/projects/wvr-elements/src/lib/shared/styles/_mixins.scss
@@ -0,0 +1,235 @@
+@mixin gradient-bg($color) {
+  @if $enable-gradients {
+    // NOTE: ignoring mixing color with bg-color by 15%
+    // background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
+    background: $color linear-gradient(180deg, $body-bg, $color) repeat-x;
+  } @else {
+    background-color: $color;
+  }
+}
+
+@mixin alert-variant($background, $border, $color) {
+  color: $color;
+  @include gradient-bg($background);
+  border-color: $border;
+
+  hr {
+    border-top-color: $border;
+    -webkit-filter: brightness(95%);
+    filter: brightness(95%);
+  }
+
+  .alert-link {
+    color: $color;
+    -webkit-filter: brightness(90%);
+    filter: brightness(90%);
+  }
+}
+
+@mixin badge-variant($bg, $color) {
+  color: $color;
+  background-color: $bg;
+
+  @at-root a#{&} {
+    @include hover-focus {
+      color: $color;
+      background-color: $bg;
+      -webkit-filter: brightness(90%);
+      filter: brightness(90%);
+    }
+  }
+}
+
+@mixin button-variant($color, $background, $border, $hover-color, $hover-background, $hover-border, $active-color, $active-background, $active-border, $box-shadow-color) {
+  color: $color;
+  @include gradient-bg($background);
+  border-color: $border;
+  @include box-shadow($btn-box-shadow);
+
+  @include hover {
+    color: $hover-color;
+    @include gradient-bg($hover-background);
+    border-color: $hover-border;
+  }
+
+  &:focus,
+  &.focus {
+    color: $hover-color;
+    background-color: $hover-background;
+    // Avoid using mixin so we can pass custom focus shadow properly
+    @if $enable-shadows {
+      box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width $box-shadow-color;
+    } @else {
+      box-shadow: 0 0 0 $btn-focus-width $box-shadow-color;
+    }
+  }
+
+  // Disabled comes first so active can properly restyle
+  &.disabled,
+  &:disabled {
+    color: $color;
+    background-color: $background;
+    border-color: $border;
+    // Remove CSS gradients if they're enabled
+    @if $enable-gradients {
+      background-image: none;
+    }
+  }
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active,
+  .show > &.dropdown-toggle {
+    color: $active-color;
+    background-color: $active-background;
+    @if $enable-gradients {
+      background-image: none; // Remove the gradient for the pressed/active state
+    }
+    border-color: $active-border;
+
+    &:focus {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      @if $enable-shadows {
+        box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width $box-shadow-color;
+      } @else {
+        box-shadow: 0 0 0 $btn-focus-width $box-shadow-color;
+      }
+    }
+  }
+}
+
+@mixin button-outline-variant($color, $color-hover, $box-shadow-color, $active-background: $color, $active-border: $color) {
+  color: $color;
+  border-color: $color;
+
+  @include hover {
+    color: $color-hover;
+    background-color: $active-background;
+    border-color: $active-border;
+  }
+
+  &:focus,
+  &.focus {
+    box-shadow: 0 0 0 $btn-focus-width $box-shadow-color;
+  }
+
+  &.disabled,
+  &:disabled {
+    color: $color;
+    background-color: transparent;
+  }
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active,
+  .show > &.dropdown-toggle {
+    color: $color-hover;
+    background-color: $active-background;
+    border-color: $active-border;
+
+    &:focus {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      @if $enable-shadows and $btn-active-box-shadow != none {
+        box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width $box-shadow-color;
+      } @else {
+        box-shadow: 0 0 0 $btn-focus-width $box-shadow-color;
+      }
+    }
+  }
+}
+
+@mixin list-group-item-variant($state, $background, $color) {
+  .list-group-item-#{$state} {
+    color: $color;
+    background-color: $background;
+
+    &.list-group-item-action {
+      @include hover-focus {
+        color: $color;
+        background-color: $background;
+        -webkit-filter: brightness(95%) !important;
+        filter: brightness(95%);
+      }
+
+      &.active {
+        color: $white;
+        background-color: $color;
+        border-color: $color;
+      }
+    }
+  }
+}
+
+@mixin table-row-variant($state, $background, $border: null) {
+  // Exact selectors below required to override `.table-striped` and prevent
+  // inheritance to nested tables.
+  .table-#{$state} {
+    &,
+    > th,
+    > td {
+      background-color: $background;
+    }
+
+    @if $border != null {
+      th,
+      td,
+      thead th,
+      tbody + tbody {
+        border-color: $border;
+      }
+    }
+  }
+
+  // Hover states for `.table-hover`
+  // Note: this is not available for cells or rows within `thead` or `tfoot`.
+  .table-hover {
+
+    .table-#{$state} {
+      @include hover {
+        background-color: $background;
+        -webkit-filter: brightness(95%) !important;
+        filter: brightness(95%);
+
+        > td,
+        > th {
+          background-color: $background;
+          -webkit-filter: brightness(95%) !important;
+          filter: brightness(95%);
+        }
+      }
+    }
+  }
+}
+
+@mixin bg-variant($parent, $color) {
+  #{$parent} {
+    background-color: $color !important;
+  }
+  a#{$parent},
+  button#{$parent} {
+    @include hover-focus {
+      background-color: $color !important;
+      -webkit-filter: brightness(90%) !important;
+      filter: brightness(90%) !important;
+    }
+  }
+}
+
+@mixin bg-gradient-variant($parent, $color) {
+  #{$parent} {
+    background: $color linear-gradient(180deg, $body-bg, $color) repeat-x !important;
+  }
+}
+
+@mixin text-emphasis-variant($parent, $color) {
+  #{$parent} {
+    color: $color !important;
+  }
+  a#{$parent} {
+    @include hover-focus {
+      color: $color;
+      -webkit-filter: brightness(85%) !important;
+      filter: brightness(85%) !important;
+      // NOTE: ignoring $emphasized-link-hover-darken-percentage
+      // color: darken($color, $emphasized-link-hover-darken-percentage) !important;
+    }
+  }
+}
diff --git a/projects/wvr-elements/src/lib/shared/styles/_overrides.scss b/projects/wvr-elements/src/lib/shared/styles/_overrides.scss
new file mode 100644
index 000000000..5419b6d96
--- /dev/null
+++ b/projects/wvr-elements/src/lib/shared/styles/_overrides.scss
@@ -0,0 +1,33 @@
+@each $color, $value in $theme-colors {
+  .alert-#{$color} {
+    @include alert-variant(alert-variation($color, "alert-bg"), alert-variation($color, "alert-border"), alert-variation($color, "alert-color"));
+  }
+
+  .badge-#{$color} {
+    @include badge-variant(badge-variation($color, "badge-bg"), badge-variation($color, "badge-color"));
+  }
+  
+  .btn-#{$color} {
+    @include button-variant(button-variation($color, "button-color"), button-variation($color, "button-bg"), button-variation($color, "button-border"), button-variation($color, "button-hover-color"), button-variation($color, "button-hover-bg"), button-variation($color, "button-hover-border"), button-variation($color, "button-active-color"), button-variation($color, "button-active-bg"), button-variation($color, "button-active-border"), button-variation($color, "button-box-shadow-color"));
+  }
+  
+  .btn-outline-#{$color} {
+    @include button-outline-variant(button-outline-variation($color, "button-outline-color"), button-outline-variation($color, "button-outline-color-hover"), button-outline-variation($color, "button-outline-box-shadow-color"));
+  }
+  
+  @include list-group-item-variant($color, list-group-item-variation($color, "list-group-item-bg"), list-group-item-variation($color, "list-group-item-color"));
+  
+  @include table-row-variant($color, table-variation($color, "table-bg"), table-variation($color, "table-border"));
+  
+  @include bg-variant(".bg-#{$color}", var(--#{$color}));
+  
+  @include text-emphasis-variant(".text-#{$color}", var(--#{$color}));
+
+  @if $enable-gradients {
+    @include bg-gradient-variant(".bg-gradient-#{$color}", var(--#{$color}));
+  }
+
+  .border-#{$color} {
+    border-color: var(--#{$color}) !important;
+  }
+}
\ No newline at end of file
diff --git a/projects/wvr-elements/src/lib/shared/styles/_variables.scss b/projects/wvr-elements/src/lib/shared/styles/_variables.scss
new file mode 100644
index 000000000..c124ba21f
--- /dev/null
+++ b/projects/wvr-elements/src/lib/shared/styles/_variables.scss
@@ -0,0 +1,420 @@
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+
+$primary: #007bff;
+$secondary: #6c757d;
+$success: #198754;
+$danger: #dc3545;
+$warning: #ffc107;
+$info: #0dcaf0;
+$light: #f8f9fa;
+$dark: #212529;
+$accent: tomato;
+
+$theme-colors: (
+  "primary": $primary,
+  "secondary": $secondary,
+  "success": $success,
+  "danger": $danger,
+  "warning": $warning,
+  "info": $info,
+  "light": $light,
+  "dark": $dark,
+  "accent": $accent
+);
+
+// Bootstrap Alert Variants
+
+$alert-variations: ();
+// stylelint-disable-next-line scss/dollar-variable-default
+$alert-variations: map-merge(
+  (
+
+    'primary-alert-bg': theme-color-level("primary", $alert-bg-level),
+    'secondary-alert-bg': theme-color-level("secondary", $alert-bg-level),
+    'success-alert-bg': theme-color-level("success", $alert-bg-level),
+    'danger-alert-bg': theme-color-level("danger", $alert-bg-level),
+    'warning-alert-bg': theme-color-level("warning", $alert-bg-level),
+    'info-alert-bg': theme-color-level("info", $alert-bg-level),
+    'light-alert-bg': theme-color-level("light", $alert-bg-level),
+    'dark-alert-bg': theme-color-level("dark", $alert-bg-level),
+    'accent-alert-bg': theme-color-level("accent", $alert-bg-level),
+
+    'primary-alert-border': theme-color-level("primary", $alert-border-level),
+    'secondary-alert-border': theme-color-level("secondary", $alert-border-level),
+    'success-alert-border': theme-color-level("success", $alert-border-level),
+    'danger-alert-border': theme-color-level("danger", $alert-border-level),
+    'warning-alert-border': theme-color-level("warning", $alert-border-level),
+    'info-alert-border': theme-color-level("info", $alert-border-level),
+    'light-alert-border': theme-color-level("light", $alert-border-level),
+    'dark-alert-border': theme-color-level("dark", $alert-border-level),
+    'accent-alert-border': theme-color-level("accent", $alert-border-level),
+
+    'primary-alert-color': theme-color-level("primary", $alert-color-level),
+    'secondary-alert-color': theme-color-level("secondary", $alert-color-level),
+    'success-alert-color': theme-color-level("success", $alert-color-level),
+    'danger-alert-color': theme-color-level("danger", $alert-color-level),
+    'warning-alert-color': theme-color-level("warning", $alert-color-level),
+    'info-alert-color': theme-color-level("info", $alert-color-level),
+    'light-alert-color': theme-color-level("light", $alert-color-level),
+    'dark-alert-color': theme-color-level("dark", $alert-color-level),
+    'accent-alert-color': theme-color-level("accent", $alert-color-level)
+
+  ),
+  $alert-variations
+);
+
+// Bootstrap Badge Variants
+
+$badge-variations: ();
+// stylelint-disable-next-line scss/dollar-variable-default
+$badge-variations: map-merge(
+  (
+
+      'primary-badge-bg': $primary,
+      'secondary-badge-bg': $secondary,
+      'success-badge-bg': $success,
+      'danger-badge-bg': $danger,
+      'warning-badge-bg': $warning,
+      'info-badge-bg': $info,
+      'light-badge-bg': $light,
+      'dark-badge-bg': $dark,
+      'accent-badge-bg': $accent,
+
+      'primary-badge-color': color-yiq($primary),
+      'secondary-badge-color': color-yiq($secondary),
+      'success-badge-color': color-yiq($success),
+      'danger-badge-color': color-yiq($danger),
+      'warning-badge-color': color-yiq($warning),
+      'info-badge-color': color-yiq($info),
+      'light-badge-color': color-yiq($light),
+      'dark-badge-color': color-yiq($dark),
+      'accent-badge-color': color-yiq($accent)
+
+  ),
+  $badge-variations
+);
+
+// Bootstrap List Group Item Variants
+
+$list-group-item-variations: ();
+// stylelint-disable-next-line scss/dollar-variable-default
+$list-group-item-variations: map-merge(
+  (
+
+      'primary-list-group-item-bg': theme-color-level("primary", -9),
+      'secondary-list-group-item-bg': theme-color-level("secondary", -9),
+      'success-list-group-item-bg': theme-color-level("success", -9),
+      'danger-list-group-item-bg': theme-color-level("danger", -9),
+      'warning-list-group-item-bg': theme-color-level("warning", -9),
+      'info-list-group-item-bg': theme-color-level("info", -9),
+      'light-list-group-item-bg': theme-color-level("light", -9),
+      'dark-list-group-item-bg': theme-color-level("dark", -9),
+      'accent-list-group-item-bg': theme-color-level("accent", -9),
+
+      'primary-list-group-item-color': theme-color-level("primary", 6),
+      'secondary-list-group-item-color': theme-color-level("secondary", 6),
+      'success-list-group-item-color': theme-color-level("success", 6),
+      'danger-list-group-item-color': theme-color-level("danger", 6),
+      'warning-list-group-item-color': theme-color-level("warning", 6),
+      'info-list-group-item-color': theme-color-level("info", 6),
+      'light-list-group-item-color': theme-color-level("light", 6),
+      'dark-list-group-item-color': theme-color-level("dark", 6),
+      'accent-list-group-item-color': theme-color-level("accent", 6)
+
+  ),
+  $list-group-item-variations
+);
+
+// Bootstrap Table Variants
+
+$table-variations: ();
+// stylelint-disable-next-line scss/dollar-variable-default
+$table-variations: map-merge(
+  (
+
+      'primary-table-bg': theme-color-level("primary", $table-bg-level),
+      'secondary-table-bg': theme-color-level("secondary", $table-bg-level),
+      'success-table-bg': theme-color-level("success", $table-bg-level),
+      'danger-table-bg': theme-color-level("danger", $table-bg-level),
+      'warning-table-bg': theme-color-level("warning", $table-bg-level),
+      'info-table-bg': theme-color-level("info", $table-bg-level),
+      'light-table-bg': theme-color-level("light", $table-bg-level),
+      'dark-table-bg': theme-color-level("dark", $table-bg-level),
+      'accent-table-bg': theme-color-level("accent", $table-bg-level),
+
+      'primary-table-border': theme-color-level("primary", $table-border-level),
+      'secondary-table-border': theme-color-level("secondary", $table-border-level),
+      'success-table-border': theme-color-level("success", $table-border-level),
+      'danger-table-border': theme-color-level("danger", $table-border-level),
+      'warning-table-border': theme-color-level("warning", $table-border-level),
+      'info-table-border': theme-color-level("info", $table-border-level),
+      'light-table-border': theme-color-level("light", $table-border-level),
+      'dark-table-border': theme-color-level("dark", $table-border-level),
+      'accent-table-border': theme-color-level("accent", $table-border-level)
+
+  ),
+  $table-variations
+);
+
+// Bootstrap Button Variants
+
+$button-variations: ();
+// stylelint-disable-next-line scss/dollar-variable-default
+$button-variations: map-merge(
+  (
+
+      'primary-button-color': color-yiq($primary),
+      'secondary-button-color': color-yiq($secondary),
+      'success-button-color': color-yiq($success),
+      'danger-button-color': color-yiq($danger),
+      'warning-button-color': color-yiq($warning),
+      'info-button-color': color-yiq($info),
+      'light-button-color': color-yiq($light),
+      'dark-button-color': color-yiq($dark),
+      'accent-button-color': color-yiq($accent),
+
+      'primary-button-bg': $primary,
+      'secondary-button-bg': $secondary,
+      'success-button-bg': $success,
+      'danger-button-bg': $danger,
+      'warning-button-bg': $warning,
+      'info-button-bg': $info,
+      'light-button-bg': $light,
+      'dark-button-bg': $dark,
+      'accent-button-bg': $accent,
+
+      'primary-button-border': $primary, 
+      'secondary-button-border': $secondary, 
+      'success-button-border': $success, 
+      'danger-button-border': $danger, 
+      'warning-button-border': $warning, 
+      'info-button-border': $info, 
+      'light-button-border': $light, 
+      'dark-button-border': $dark, 
+      'accent-button-border': $accent, 
+
+      'primary-button-hover-color': color-yiq(darken($primary, 7.5%)),
+      'secondary-button-hover-color': color-yiq(darken($secondary, 7.5%)),
+      'success-button-hover-color': color-yiq(darken($success, 7.5%)),
+      'danger-button-hover-color': color-yiq(darken($danger, 7.5%)),
+      'warning-button-hover-color': color-yiq(darken($warning, 7.5%)),
+      'info-button-hover-color': color-yiq(darken($info, 7.5%)),
+      'light-button-hover-color': color-yiq(darken($light, 7.5%)),
+      'dark-button-hover-color': color-yiq(darken($dark, 7.5%)),
+      'accent-button-hover-color': color-yiq(darken($accent, 7.5%)),
+
+      'primary-button-hover-bg': darken($primary, 7.5%),
+      'secondary-button-hover-bg': darken($secondary, 7.5%),
+      'success-button-hover-bg': darken($success, 7.5%),
+      'danger-button-hover-bg': darken($danger, 7.5%),
+      'warning-button-hover-bg': darken($warning, 7.5%),
+      'info-button-hover-bg': darken($info, 7.5%),
+      'light-button-hover-bg': darken($light, 7.5%),
+      'dark-button-hover-bg': darken($dark, 7.5%),
+      'accent-button-hover-bg': darken($accent, 7.5%),
+
+      'primary-button-hover-border': darken($primary, 10%),
+      'secondary-button-hover-border': darken($secondary, 10%),
+      'success-button-hover-border': darken($success, 10%),
+      'danger-button-hover-border': darken($danger, 10%),
+      'warning-button-hover-border': darken($warning, 10%),
+      'info-button-hover-border': darken($info, 10%),
+      'light-button-hover-border': darken($light, 10%),
+      'dark-button-hover-border': darken($dark, 10%),
+      'accent-button-hover-border': darken($accent, 10%),
+
+      'primary-button-active-color': color-yiq(darken($primary, 10%)),
+      'secondary-button-active-color': color-yiq(darken($secondary, 10%)),
+      'success-button-active-color': color-yiq(darken($success, 10%)),
+      'danger-button-active-color': color-yiq(darken($danger, 10%)),
+      'warning-button-active-color': color-yiq(darken($warning, 10%)),
+      'info-button-active-color': color-yiq(darken($info, 10%)),
+      'light-button-active-color': color-yiq(darken($light, 10%)),
+      'dark-button-active-color': color-yiq(darken($dark, 10%)),
+      'accent-button-active-color': color-yiq(darken($accent, 10%)),
+
+      'primary-button-active-bg': darken($primary, 10%),
+      'secondary-button-active-bg': darken($secondary, 10%),
+      'success-button-active-bg': darken($success, 10%),
+      'danger-button-active-bg': darken($danger, 10%),
+      'warning-button-active-bg': darken($warning, 10%),
+      'info-button-active-bg': darken($info, 10%),
+      'light-button-active-bg': darken($light, 10%),
+      'dark-button-active-bg': darken($dark, 10%),
+      'accent-button-active-bg': darken($accent, 10%),
+
+      'primary-button-active-border': darken($primary, 12.5%),
+      'secondary-button-active-border': darken($secondary, 12.5%),
+      'success-button-active-border': darken($success, 12.5%),
+      'danger-button-active-border': darken($danger, 12.5%),
+      'warning-button-active-border': darken($warning, 12.5%),
+      'info-button-active-border': darken($info, 12.5%),
+      'light-button-active-border': darken($light, 12.5%),
+      'dark-button-active-border': darken($dark, 12.5%),
+      'accent-button-active-border': darken($accent, 12.5%),
+
+      'primary-button-box-shadow-color': rgba(mix(color-yiq($primary), $primary, 15%), .5),
+      'secondary-button-box-shadow-color': rgba(mix(color-yiq($secondary), $secondary, 15%), .5),
+      'success-button-box-shadow-color': rgba(mix(color-yiq($success), $success, 15%), .5),
+      'danger-button-box-shadow-color': rgba(mix(color-yiq($danger), $danger, 15%), .5),
+      'warning-button-box-shadow-color': rgba(mix(color-yiq($warning), $warning, 15%), .5),
+      'info-button-box-shadow-color': rgba(mix(color-yiq($info), $info, 15%), .5),
+      'light-button-box-shadow-color': rgba(mix(color-yiq($light), $light, 15%), .5),
+      'dark-button-box-shadow-color': rgba(mix(color-yiq($dark), $dark, 15%), .5),
+      'accent-button-box-shadow-color': rgba(mix(color-yiq($accent), $accent, 15%), .5)
+  ),
+  $button-variations
+);
+
+// Bootstrap Button Outline Variants
+
+$button-outline-variations: ();
+// stylelint-disable-next-line scss/dollar-variable-default
+$button-outline-variations: map-merge(
+  (
+
+      'primary-button-outline-color': $primary,
+      'secondary-button-outline-color': $secondary,
+      'success-button-outline-color': $success,
+      'danger-button-outline-color': $danger,
+      'warning-button-outline-color': $warning,
+      'info-button-outline-color': $info,
+      'light-button-outline-color': $light,
+      'dark-button-outline-color': $dark,
+      'accent-button-outline-color': $accent,
+
+      'primary-button-outline-color-hover': color-yiq($primary),
+      'secondary-button-outline-color-hover': color-yiq($secondary),
+      'success-button-outline-color-hover': color-yiq($success),
+      'danger-button-outline-color-hover': color-yiq($danger),
+      'warning-button-outline-color-hover': color-yiq($warning),
+      'info-button-outline-color-hover': color-yiq($info),
+      'light-button-outline-color-hover': color-yiq($light),
+      'dark-button-outline-color-hover': color-yiq($dark),
+      'accent-button-outline-color-hover': color-yiq($accent),
+
+      'primary-button-outline-box-shadow-color': rgba($primary, .5),
+      'secondary-button-outline-box-shadow-color': rgba($secondary, .5),
+      'success-button-outline-box-shadow-color': rgba($success, .5),
+      'danger-button-outline-box-shadow-color': rgba($danger, .5),
+      'warning-button-outline-box-shadow-color': rgba($warning, .5),
+      'info-button-outline-box-shadow-color': rgba($info, .5),
+      'light-button-outline-box-shadow-color': rgba($light, .5),
+      'dark-button-outline-box-shadow-color': rgba($dark, .5),
+      'accent-button-outline-box-shadow-color': rgba($accent, .5)
+
+  ),
+  $button-outline-variations
+);
+
+.variables {
+
+  --yiq-contrasted-threshold:#{$yiq-contrasted-threshold};
+  --yiq-text-dark:#{$yiq-text-dark};
+  --yiq-text-light:#{$yiq-text-light};
+
+  --theme-color-interval:#{$theme-color-interval};
+
+  --alert-bg-level:#{$alert-bg-level};
+  --alert-border-level:#{$alert-border-level};
+  --alert-color-level:#{$alert-color-level};
+
+  --list-group-item-bg-level:-9;
+  --list-group-item-color-level:6;
+
+  --table-bg-level:#{$table-bg-level};
+  --table-border-level:#{$table-border-level};
+
+  --black:#{$black};
+  --white:#{$white};
+
+  @each $variation, $value in $alert-variations {
+    --#{$variation}:#{$value};
+  }
+
+  @each $variation, $value in $badge-variations {
+    --#{$variation}:#{$value};
+  }
+
+  @each $variation, $value in $list-group-item-variations {
+    --#{$variation}:#{$value};
+  }
+
+  @each $variation, $value in $table-variations {
+    --#{$variation}:#{$value};
+  }
+
+  @each $variation, $value in $button-outline-variations {
+    --#{$variation}:#{$value};
+  }
+
+  @each $variation, $value in $button-variations {
+    --#{$variation}:#{$value};
+  }
+
+  @each $color, $value in $colors {
+    --#{$color}:#{$value};
+  }
+
+  @each $color, $value in $theme-colors {
+    --#{$color}:#{$value};
+  }
+
+  @each $bp, $value in $grid-breakpoints {
+    --breakpoint-#{$bp}:#{$value};
+  }
+
+  // Use `inspect` for lists so that quoted items keep the quotes.
+  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
+  --font-family-sans-serif:#{inspect($font-family-sans-serif)};
+  --font-family-monospace:#{inspect($font-family-monospace)};
+}
+
+@each $variation, $value in $alert-variations {
+  $alert-variations: map-merge($alert-variations, ($variation: var(--#{$variation})));
+}
+
+@each $variation, $value in $badge-variations {
+  $badge-variations: map-merge($badge-variations, ($variation: var(--#{$variation})));
+}
+
+@each $variation, $value in $list-group-item-variations {
+  $list-group-item-variations: map-merge($list-group-item-variations, ($variation: var(--#{$variation})));
+}
+
+@each $variation, $value in $table-variations {
+  $table-variations: map-merge($table-variations, ($variation: var(--#{$variation})));
+}
+
+@each $variation, $value in $button-outline-variations {
+  $button-outline-variations: map-merge($button-outline-variations, ($variation: var(--#{$variation})));
+}
+
+@each $variation, $value in $button-variations {
+  $button-variations: map-merge($button-variations, ($variation: var(--#{$variation})));
+}
+
+@function alert-variation($color: "primary", $type: "alert-color") {
+  @return map-get($alert-variations, #{$color}-#{$type});
+}
+
+@function badge-variation($color: "primary", $type: "badge-color") {
+  @return map-get($badge-variations, #{$color}-#{$type});
+}
+
+@function list-group-item-variation($color: "primary", $type: "list-group-item-color") {
+  @return map-get($list-group-item-variations, #{$color}-#{$type});
+}
+
+@function table-variation($color: "primary", $type: "table-border") {
+  @return map-get($table-variations, #{$color}-#{$type});
+}
+
+@function button-outline-variation($color: "primary", $type: "button-outline-color") {
+  @return map-get($button-outline-variations, #{$color}-#{$type});
+}
+
+@function button-variation($color: "primary", $type: "button-color") {
+  @return map-get($button-variations, #{$color}-#{$type});
+}
diff --git a/projects/wvr-elements/src/lib/shared/theme.type.ts b/projects/wvr-elements/src/lib/shared/theme.type.ts
deleted file mode 100644
index 57bb8c859..000000000
--- a/projects/wvr-elements/src/lib/shared/theme.type.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type Theme = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
diff --git a/projects/wvr-elements/src/lib/shared/theme/default-dark-theme.json b/projects/wvr-elements/src/lib/shared/theme/default-dark-theme.json
new file mode 100644
index 000000000..b48e88281
--- /dev/null
+++ b/projects/wvr-elements/src/lib/shared/theme/default-dark-theme.json
@@ -0,0 +1,29 @@
+{
+  "primary": {
+    "baseColor": "#500000"
+  },
+  "secondary": {
+    "baseColor": "#6c757d"
+  },
+  "success": {
+    "baseColor": "#198754"
+  },
+  "danger": {
+    "baseColor": "#dc3545"
+  },
+  "warning": {
+    "baseColor": "#ffc107"
+  },
+  "info": {
+    "baseColor": "#0dcaf0"
+  },
+  "light": {
+    "baseColor": "#f8f9fa"
+  },
+  "dark": {
+    "baseColor": "#212529"
+  },
+  "accent": {
+    "baseColor": "tomato"
+  }
+}
diff --git a/projects/wvr-elements/src/lib/shared/theme/default-theme.json b/projects/wvr-elements/src/lib/shared/theme/default-theme.json
new file mode 100644
index 000000000..80d32f051
--- /dev/null
+++ b/projects/wvr-elements/src/lib/shared/theme/default-theme.json
@@ -0,0 +1,29 @@
+{
+  "primary": {
+    "baseColor": "#007bff"
+  },
+  "secondary": {
+    "baseColor": "#6c757d"
+  },
+  "success": {
+    "baseColor": "#198754"
+  },
+  "danger": {
+    "baseColor": "#dc3545"
+  },
+  "warning": {
+    "baseColor": "#ffc107"
+  },
+  "info": {
+    "baseColor": "#0dcaf0"
+  },
+  "light": {
+    "baseColor": "#f8f9fa"
+  },
+  "dark": {
+    "baseColor": "#212529"
+  },
+  "accent": {
+    "baseColor": "tomato"
+  }
+}
diff --git a/projects/wvr-elements/src/lib/shared/theme/index.ts b/projects/wvr-elements/src/lib/shared/theme/index.ts
new file mode 100644
index 000000000..10e010e1a
--- /dev/null
+++ b/projects/wvr-elements/src/lib/shared/theme/index.ts
@@ -0,0 +1,3 @@
+export { ThemeVariants } from './theme-variants';
+export { ThemeVariant } from './theme-variant';
+export { ThemeVariantName } from './theme-variant-name';
diff --git a/projects/wvr-elements/src/lib/shared/theme/theme-variant-name.ts b/projects/wvr-elements/src/lib/shared/theme/theme-variant-name.ts
new file mode 100644
index 000000000..9a945caa5
--- /dev/null
+++ b/projects/wvr-elements/src/lib/shared/theme/theme-variant-name.ts
@@ -0,0 +1,3 @@
+import { ThemeVariants } from './theme-variants';
+
+export type ThemeVariantName = keyof ThemeVariants;
diff --git a/projects/wvr-elements/src/lib/shared/theme/theme-variant.ts b/projects/wvr-elements/src/lib/shared/theme/theme-variant.ts
new file mode 100644
index 000000000..28048c586
--- /dev/null
+++ b/projects/wvr-elements/src/lib/shared/theme/theme-variant.ts
@@ -0,0 +1,10 @@
+export interface ThemeVariant {
+  baseColor: string;
+  color?: string;
+  backgroundColor?: string;
+  borderColor?: string;
+  shadowColor?: string;
+  hoverColor?: string;
+  focusColor?: string;
+  activeColor?: string;
+}
diff --git a/projects/wvr-elements/src/lib/shared/theme/theme-variants.ts b/projects/wvr-elements/src/lib/shared/theme/theme-variants.ts
new file mode 100644
index 000000000..422bfe206
--- /dev/null
+++ b/projects/wvr-elements/src/lib/shared/theme/theme-variants.ts
@@ -0,0 +1,13 @@
+import { ThemeVariant } from './theme-variant';
+
+export interface ThemeVariants {
+  primary: ThemeVariant;
+  secondary: ThemeVariant;
+  success: ThemeVariant;
+  danger: ThemeVariant;
+  warning: ThemeVariant;
+  info: ThemeVariant;
+  light: ThemeVariant;
+  dark: ThemeVariant;
+  accent: ThemeVariant;
+}
diff --git a/projects/wvr-elements/src/lib/shared/utility/bootstrap.utility.ts b/projects/wvr-elements/src/lib/shared/utility/bootstrap.utility.ts
index a5079d137..b43938e93 100644
--- a/projects/wvr-elements/src/lib/shared/utility/bootstrap.utility.ts
+++ b/projects/wvr-elements/src/lib/shared/utility/bootstrap.utility.ts
@@ -1,11 +1,13 @@
+/* istanbul ignore file */
+
 import { Type } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppConfig, APP_CONFIG } from '../config';
 
 /** Interigates the current script tag for its src and extroplates the configuration path from that location. */
 const obtainConfigPath = (): string => {
-  const componentScript = document.getElementsByTagName('script');
-  const componentScriptSrc = componentScript[componentScript.length - 1].src;
+  const componentScript = document.currentScript;
+  const componentScriptSrc = componentScript.getAttribute('src');
   const componentScriptSrcPathParts = componentScriptSrc.split('/');
   componentScriptSrcPathParts.pop();
   const configBasePath = componentScriptSrcPathParts.join('/');
@@ -14,7 +16,7 @@ const obtainConfigPath = (): string => {
 };
 
 /** Obtains, parses and injects the configuration. */
-const weaverBootstrap = (module: Type<unknown>) => () => fetch(obtainConfigPath())
+const weaverBootstrap = (module: Type<unknown>) => (configPath: string) => fetch(configPath ? configPath : obtainConfigPath())
   .then((response: Response) => response.json())
   .then((appConfig: AppConfig) => platformBrowserDynamic([{
     provide: APP_CONFIG,
diff --git a/projects/wvr-elements/src/lib/shared/utility/color.utlity.ts b/projects/wvr-elements/src/lib/shared/utility/color.utlity.ts
new file mode 100644
index 000000000..c3f9e3712
--- /dev/null
+++ b/projects/wvr-elements/src/lib/shared/utility/color.utlity.ts
@@ -0,0 +1,243 @@
+/* istanbul ignore file */
+
+const nameToHex: Map<string, string> = new Map<string, string>([
+  ['aliceblue', '#f0f8ff'],
+  ['antiquewhite', '#faebd7'],
+  ['aqua', '#00ffff'],
+  ['aquamarine', '#7fffd4'],
+  ['azure', '#f0ffff'],
+  ['beige', '#f5f5dc'],
+  ['bisque', '#ffe4c4'],
+  ['black', '#000000'],
+  ['blanchedalmond', '#ffebcd'],
+  ['blue', '#0000ff'],
+  ['blueviolet', '#8a2be2'],
+  ['brown', '#a52a2a'],
+  ['burlywood', '#deb887'],
+  ['cadetblue', '#5f9ea0'],
+  ['chartreuse', '#7fff00'],
+  ['chocolate', '#d2691e'],
+  ['coral', '#ff7f50'],
+  ['cornflowerblue', '#6495ed'],
+  ['cornsilk', '#fff8dc'],
+  ['crimson', '#dc143c'],
+  ['cyan', '#00ffff'],
+  ['darkblue', '#00008b'],
+  ['darkcyan', '#008b8b'],
+  ['darkgoldenrod', '#b8860b'],
+  ['darkgray', '#a9a9a9'],
+  ['darkgreen', '#006400'],
+  ['darkgrey', '#a9a9a9'],
+  ['darkkhaki', '#bdb76b'],
+  ['darkmagenta', '#8b008b'],
+  ['darkolivegreen', '#556b2f'],
+  ['darkorange', '#ff8c00'],
+  ['darkorchid', '#9932cc'],
+  ['darkred', '#8b0000'],
+  ['darksalmon', '#e9967a'],
+  ['darkseagreen', '#8fbc8f'],
+  ['darkslateblue', '#483d8b'],
+  ['darkslategray', '#2f4f4f'],
+  ['darkslategrey', '#2f4f4f'],
+  ['darkturquoise', '#00ced1'],
+  ['darkviolet', '#9400d3'],
+  ['deeppink', '#ff1493'],
+  ['deepskyblue', '#00bfff'],
+  ['dimgray', '#696969'],
+  ['dimgrey', '#696969'],
+  ['dodgerblue', '#1e90ff'],
+  ['firebrick', '#b22222'],
+  ['floralwhite', '#fffaf0'],
+  ['forestgreen', '#228b22'],
+  ['fuchsia', '#ff00ff'],
+  ['gainsboro', '#dcdcdc'],
+  ['ghostwhite', '#f8f8ff'],
+  ['gold', '#ffd700'],
+  ['goldenrod', '#daa520'],
+  ['gray', '#808080'],
+  ['green', '#008000'],
+  ['greenyellow', '#adff2f'],
+  ['grey', '#808080'],
+  ['honeydew', '#f0fff0'],
+  ['hotpink', '#ff69b4'],
+  ['indianred', '#cd5c5c'],
+  ['indigo', '#4b0082'],
+  ['ivory', '#fffff0'],
+  ['khaki', '#f0e68c'],
+  ['lavender', '#e6e6fa'],
+  ['lavenderblush', '#fff0f5'],
+  ['lawngreen', '#7cfc00'],
+  ['lemonchiffon', '#fffacd'],
+  ['lightblue', '#add8e6'],
+  ['lightcoral', '#f08080'],
+  ['lightcyan', '#e0ffff'],
+  ['lightgoldenrodyellow', '#fafad2'],
+  ['lightgray', '#d3d3d3'],
+  ['lightgreen', '#90ee90'],
+  ['lightgrey', '#d3d3d3'],
+  ['lightpink', '#ffb6c1'],
+  ['lightsalmon', '#ffa07a'],
+  ['lightseagreen', '#20b2aa'],
+  ['lightskyblue', '#87cefa'],
+  ['lightslategray', '#778899'],
+  ['lightslategrey', '#778899'],
+  ['lightsteelblue', '#b0c4de'],
+  ['lightyellow', '#ffffe0'],
+  ['lime', '#00ff00'],
+  ['limegreen', '#32cd32'],
+  ['linen', '#faf0e6'],
+  ['magenta', '#ff00ff'],
+  ['maroon', '#800000'],
+  ['mediumaquamarine', '#66cdaa'],
+  ['mediumblue', '#0000cd'],
+  ['mediumorchid', '#ba55d3'],
+  ['mediumpurple', '#9370db'],
+  ['mediumseagreen', '#3cb371'],
+  ['mediumslateblue', '#7b68ee'],
+  ['mediumspringgreen', '#00fa9a'],
+  ['mediumturquoise', '#48d1cc'],
+  ['mediumvioletred', '#c71585'],
+  ['midnightblue', '#191970'],
+  ['mintcream', '#f5fffa'],
+  ['mistyrose', '#ffe4e1'],
+  ['moccasin', '#ffe4b5'],
+  ['navajowhite', '#ffdead'],
+  ['navy', '#000080'],
+  ['oldlace', '#fdf5e6'],
+  ['olive', '#808000'],
+  ['olivedrab', '#6b8e23'],
+  ['orange', '#ffa500'],
+  ['orangered', '#ff4500'],
+  ['orchid', '#da70d6'],
+  ['palegoldenrod', '#eee8aa'],
+  ['palegreen', '#98fb98'],
+  ['paleturquoise', '#afeeee'],
+  ['palevioletred', '#db7093'],
+  ['papayawhip', '#ffefd5'],
+  ['peachpuff', '#ffdab9'],
+  ['peru', '#cd853f'],
+  ['pink', '#ffc0cb'],
+  ['plum', '#dda0dd'],
+  ['powderblue', '#b0e0e6'],
+  ['purple', '#800080'],
+  ['rebeccapurple', '#663399'],
+  ['red', '#ff0000'],
+  ['rosybrown', '#bc8f8f'],
+  ['royalblue', '#4169e1'],
+  ['saddlebrown', '#8b4513'],
+  ['salmon', '#fa8072'],
+  ['sandybrown', '#f4a460'],
+  ['seagreen', '#2e8b57'],
+  ['seashell', '#fff5ee'],
+  ['sienna', '#a0522d'],
+  ['silver', '#c0c0c0'],
+  ['skyblue', '#87ceeb'],
+  ['slateblue', '#6a5acd'],
+  ['slategray', '#708090'],
+  ['slategrey', '#708090'],
+  ['snow', '#fffafa'],
+  ['springgreen', '#00ff7f'],
+  ['steelblue', '#4682b4'],
+  ['tan', '#d2b48c'],
+  ['teal', '#008080'],
+  ['thistle', '#d8bfd8'],
+  ['tomato', '#ff6347'],
+  ['turquoise', '#40e0d0'],
+  ['violet', '#ee82ee'],
+  ['wheat', '#f5deb3'],
+  ['white', '#ffffff'],
+  ['whitesmoke', '#f5f5f5'],
+  ['yellow', '#ffff00'],
+  ['yellowgreen', '#9acd32']
+]);
+
+const expandHexShorthand = (hex: string): string => {
+  // expand shorthand form (e.g. "03f") to full form (e.g. "0033ff")
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+
+  return hex.replace(shorthandRegex, (m, r: string, g: string, b: string) => r + r + g + g + b + b);
+};
+
+const colorToHex = (rgb: string): string => {
+  // tslint:disable-next-line: max-line-length
+  const matches = rgb.match(/^(rgb\((0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d)\)|rgba\((0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0?\.\d|1(\.0)?)\)|hsl\((0|360|35\d|3[0-4]\d|[12]\d\d|0?\d?\d),(0|100|\d{1,2})%,(0|100|\d{1,2})%\)|hsla\((0|360|35\d|3[0-4]\d|[12]\d\d|0?\d?\d),(0|100|\d{1,2})%,(0|100|\d{1,2})%,(0?\.\d|1(\.0)?)\))$/);
+  // tslint:disable-next-line:newline-per-chained-call
+  const hex = x => (`0${parseInt(x, 10).toString(16)}`).slice(-2);
+
+  return (hex(matches[1]) + hex(matches[2]) + hex(matches[3])).toUpperCase();
+};
+
+const normalizeColor = (color: string): string => {
+  let value = color.trim();
+  if (value.charAt(0) !== '#') {
+    value = value.indexOf('rgb') !== 0 ? nameToHex.get(color) : colorToHex(color);
+  } else {
+    if (value.length === 4) {
+      value = expandHexShorthand(color);
+    }
+  }
+
+  return !!value ? value.replace(/#/g, '') : 'ffffff';
+};
+
+const hexToRgb = (hex: string): any => {
+  const value = normalizeColor(hex);
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(value);
+
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+      }
+    : undefined;
+};
+
+const mix = (baseColor: string, color: string, weight: number): string => {
+  const d2h = (d): string => d.toString(16); // convert a decimal value to hex
+  const h2d = (h): number => parseInt(h, 16); // convert a hex value to decimal
+  const w = typeof weight !== 'undefined' ? weight : 50; // set the weight to 50%, if that argument is omitted
+  let resultColor = '#';
+  for (let i = 0; i <= 5; i += 2) {
+    // loop through each of the 3 hex pairs—red, green, and blue
+    const v1 = h2d(normalizeColor(baseColor)
+      .substr(i, 2)); // extract the current pairs
+    const v2 = h2d(normalizeColor(color)
+      .substr(i, 2));
+    // combine the current pairs from each source color, according to the specified weight
+    let val = d2h(Math.round(v2 + (v1 - v2) * (w / 100)));
+    while (val.length < 2) {
+      val = `0${val}`;
+    } // prepend a '0' if val results in a single digit
+    resultColor += val; // concatenate val to our new color string
+  }
+
+  return resultColor;
+};
+
+// TODO: replace with closer match to sass darken and lighten
+const luminance = (color: string, lum: number): string => {
+  const l = lum || Number(0);
+  // convert to decimal and change luminosity
+  let rgb = '#';
+  let c: number;
+  let i: number;
+  let cs: string;
+  for (i = 0; i < 3; i++) {
+    c = parseInt(normalizeColor(color)
+      .substr(i * 2, 2), 16);
+    cs = Math.round(Math.min(Math.max(0, c + c * l), 255))
+      .toString(16);
+    rgb += (`00${cs}`).substr(cs.length);
+  }
+
+  return rgb;
+};
+
+const yiq = (color: string): number => {
+  const rgb = hexToRgb(color);
+
+  return Math.round((rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000);
+};
+
+export { hexToRgb, luminance, mix, yiq };
diff --git a/projects/wvr-elements/src/lib/shared/utility/decorators.utilty.ts b/projects/wvr-elements/src/lib/shared/utility/decorators.utilty.ts
index bce284c1a..fd4affc86 100644
--- a/projects/wvr-elements/src/lib/shared/utility/decorators.utilty.ts
+++ b/projects/wvr-elements/src/lib/shared/utility/decorators.utilty.ts
@@ -1,6 +1,7 @@
 import { MemoizedSelector, select } from '@ngrx/store';
 import { Observable } from 'rxjs';
 import { filter } from 'rxjs/operators';
+import { wvrTimeout } from './timing.utility';
 
 /** Used to delay the repeated execution of the decorated method until the specified time has elapsed. */
 // tslint:disable-next-line:only-arrow-functions
@@ -10,11 +11,14 @@ function debounce(delay = 300): MethodDecorator {
     const timeoutKey = Symbol();
     const original = descriptor.value;
     // tslint:disable-next-line:typedef
-    descriptor.value = function (...args) {
+    descriptor.value = function(...args) {
       // tslint:disable-next-line:no-invalid-this
-      clearTimeout(this[timeoutKey]);
+      if (this[timeoutKey]) {
+        // tslint:disable-next-line:no-invalid-this
+        this[timeoutKey]();
+      }
       // tslint:disable-next-line:no-invalid-this
-      this[timeoutKey] = setTimeout(() => original.apply(this, args), delay);
+      this[timeoutKey] = wvrTimeout(() => original.apply(this, args), delay);
     };
 
     return descriptor;
diff --git a/projects/wvr-elements/src/lib/shared/utility/index.ts b/projects/wvr-elements/src/lib/shared/utility/index.ts
index 693c2d7da..219305993 100644
--- a/projects/wvr-elements/src/lib/shared/utility/index.ts
+++ b/projects/wvr-elements/src/lib/shared/utility/index.ts
@@ -1,2 +1,3 @@
 export { obtainConfigPath, weaverBootstrap } from './bootstrap.utility';
 export { debounce } from './decorators.utilty';
+export { wvrTimeout } from './timing.utility';
diff --git a/projects/wvr-elements/src/lib/shared/wvr-animation.component.ts b/projects/wvr-elements/src/lib/shared/wvr-animation.component.ts
new file mode 100644
index 000000000..8b284f6a9
--- /dev/null
+++ b/projects/wvr-elements/src/lib/shared/wvr-animation.component.ts
@@ -0,0 +1,9 @@
+import { AnimationPlayer, AnimationReferenceMetadata } from '@angular/animations';
+import { Observable } from 'rxjs';
+
+export interface WvrAnimationComponent {
+  initializeAnimationElement(): void;
+  initializeAnimationRegistration(): void;
+  onAnimationEvent($event: Event): void;
+  triggerAnimations(animationTriggerType: string): void;
+}
diff --git a/projects/wvr-elements/src/lib/shared/wvr-base.component.ts b/projects/wvr-elements/src/lib/shared/wvr-base.component.ts
index ddd660af9..b65bcf402 100644
--- a/projects/wvr-elements/src/lib/shared/wvr-base.component.ts
+++ b/projects/wvr-elements/src/lib/shared/wvr-base.component.ts
@@ -1,31 +1,53 @@
+/* istanbul ignore file */
+
 import { AfterContentInit, Directive, ElementRef, EventEmitter, HostBinding, Injector, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { select, Store } from '@ngrx/store';
 import * as JSON5 from 'json5';
 import { Observable } from 'rxjs';
 import { filter } from 'rxjs/operators';
+import { AnimationService } from '../core/animation.service';
 import { ComponentRegistryService } from '../core/component-registry.service';
 import { WvrDataSelect } from '../core/data-select';
 import * as ManifestActions from '../core/manifest/manifest.actions';
 import { MobileService } from '../core/mobile.service';
 import { RootState, selectManifestEntryResponse } from '../core/store';
 import { TemplateService } from '../core/template.service';
-import { WvrAnimationService } from '../core/wvr-animation.service';
+import { ThemeService } from '../core/theme/theme.service';
+import { AppConfig, APP_CONFIG } from './config';
+import { wvrTimeout } from './utility';
+import { WvrAnimationComponent } from './wvr-animation.component';
+import { WvrDataComponent } from './wvr-data.component';
+import { WvrThemeableComponent } from './wvr-themeable.component';
 
 @Directive()
 // tslint:disable-next-line:directive-class-suffix
-export abstract class WvrBaseComponent implements OnInit, OnDestroy {
+export abstract class WvrBaseComponent implements AfterContentInit, OnInit, OnDestroy, WvrAnimationComponent, WvrDataComponent, WvrThemeableComponent {
 
   /** A generated unique identifier for this comonent. */
   readonly id: number;
 
-  data: {[as: string]: Observable<any>} = {};
+  /** A reference to the  ElementRef */
+  readonly _eRef: ElementRef;
+
+  data: { [as: string]: Observable<any> } = {};
 
+  // tslint:disable-next-line: prefer-readonly
   @Input() private wvrData: string;
 
+  themeOverrides = {};
+
+  @Input() set wvrTheme(value) {
+    this.themeService.applyThemeStyle(value, this);
+  }
+
   /** A host binding used to ensure the presense of the `wvr-bootstrap` class. */
   @HostBinding('class.wvr-bootstrap') wvrBootstrap = true;
 
+  @HostBinding('style') style;
+
+  variantTypes = [];
+
   /** An object representation of the animation instructions for this component. */
   private _animationSettings: any = {};
 
@@ -70,20 +92,23 @@ export abstract class WvrBaseComponent implements OnInit, OnDestroy {
   /** A reference to the  ComponentRegistryService */
   protected readonly componentRegistry: ComponentRegistryService<WvrBaseComponent>;
 
-  /** A reference to the  WvrAnimationService */
-  protected readonly _animationService: WvrAnimationService;
+  /** A reference to the  AnimationService */
+  protected readonly _animationService: AnimationService<WvrBaseComponent>;
 
-  /** A reference to the  DomSanitizer */
+  /** A reference to the DomSanitizer */
   protected readonly _domSanitizer: DomSanitizer;
 
-  /** A reference to the  ElementRef */
-  protected readonly _eRef: ElementRef;
+  /** A reference to the MobileService */
+  protected readonly mobileService: MobileService;
+
+  /** A reference to the TemplateService */
+  protected readonly templateService: TemplateService<WvrBaseComponent>;
 
-  /** A reference to the  MobileService */
-  private readonly mobileService: MobileService;
+  /** A reference to the ThemeService */
+  protected readonly themeService: ThemeService;
 
-  /** A reference to the  MobileService */
-  private readonly templateService: TemplateService;
+  /** A reference to the AppConfig */
+  protected readonly appConfig: AppConfig;
 
   /** A host bound accessor which applies the wvr-hidden class if both isMobileLayout and hiddenInMobile evaluate to true.  */
   @HostBinding('class.wvr-hidden') private get _hiddenInMobile(): boolean {
@@ -98,11 +123,13 @@ export abstract class WvrBaseComponent implements OnInit, OnDestroy {
 
   constructor(injector: Injector) {
     this.componentRegistry = injector.get(ComponentRegistryService);
-    this._animationService = injector.get(WvrAnimationService);
+    this._animationService = injector.get(AnimationService);
     this._domSanitizer = injector.get(DomSanitizer);
     this._eRef = injector.get(ElementRef);
     this.mobileService = injector.get(MobileService);
     this.templateService = injector.get(TemplateService);
+    this.themeService = injector.get(ThemeService);
+    this.appConfig = injector.get(APP_CONFIG);
     this.store = injector.get<Store<RootState>>(Store);
     this.id = this.componentRegistry.register(this);
 
@@ -113,26 +140,31 @@ export abstract class WvrBaseComponent implements OnInit, OnDestroy {
 
   /** Used to setup this component for animating. */
   ngOnInit(): void {
-    // this.processAnimations();
+    this.themeService.applyThemeStyle(this.appConfig.theme, this);
     this.processData();
-    // this.initializeAnimationRegistration();
+    this.initializeAnimationRegistration();
     this.templateService.parseProjectedContent(this, this._eRef.nativeElement);
   }
 
   // TODO: fix this
   /** Used for post content initialization animation setup. */
-  // ngAfterContentInit(): void {
-  //   setTimeout(() => {
-  //     this._animationService
-  //       .initializeAnimationElement(this.animationStateId, this._animationConfig, this.animationRootElem);
-  //   }, 1);
-  // }
+  ngAfterContentInit(): void {
+    wvrTimeout(() => {
+      this._animationService
+        .initializeAnimationElement(this.animationStateId, this._animationConfig, this.animationRootElem);
+    }, 1);
+  }
 
   /** Handles the the unregistering of this component with the component registry. */
   ngOnDestroy(): void {
     this.componentRegistry.unRegisterComponent(this.id);
   }
 
+  applyThemeOverride(customProperty: string, value: string): void {
+    this.themeOverrides[customProperty] = value;
+    this._eRef.nativeElement.style.setProperty(customProperty, value);
+  }
+
   /** Plays the animation specified by the incoming animation trigger.  */
   /* istanbul ignore next */
   triggerAnimations(animationTriggerType: string): void {
@@ -158,37 +190,15 @@ export abstract class WvrBaseComponent implements OnInit, OnDestroy {
   }
 
   /* istanbul ignore next */
-  private initializeAnimationRegistration(): void {
-    const animationEvents = Object.keys(this._animationSettings);
-    if (animationEvents.length) {
-      if (this.animateId) {
-        this._animationService.registerAnimationTargets(this.animateId, this);
-      }
-      this.animationStateId = this._animationService.registerAnimationStates();
-      animationEvents.forEach(eventName => {
-        if (eventName !== 'animationTrigger') {
-          (this._eRef.nativeElement as HTMLElement).addEventListener(eventName, this.onEvent.bind(this));
-        }
-      });
-    }
-  }
-
-  /* istanbul ignore next */
-  private initializeAnimationElement(): void {
-    setTimeout(() => {
+  initializeAnimationElement(): void {
+    wvrTimeout(() => {
       this._animationService
         .initializeAnimationElement(this.animationStateId, this._animationConfig, this.animationRootElem);
     }, 1);
   }
 
-  /** Trigger's the animation specified by the incoming event. */
-  /* istanbul ignore next */
-  private onEvent($event): void {
-    this.triggerAnimations($event.type);
-  }
-
   /* istanbul ignore next */
-  private processAnimations(): void {
+  initializeAnimationRegistration(): void {
     const animationEvents = Object.keys(this._animationSettings);
     if (animationEvents.length) {
       if (this.animateId) {
@@ -197,12 +207,18 @@ export abstract class WvrBaseComponent implements OnInit, OnDestroy {
       this.animationStateId = this._animationService.registerAnimationStates();
       animationEvents.forEach(eventName => {
         if (eventName !== 'animationTrigger') {
-          (this._eRef.nativeElement as HTMLElement).addEventListener(eventName, this.onEvent.bind(this));
+          (this._eRef.nativeElement as HTMLElement).addEventListener(eventName, this.onAnimationEvent.bind(this));
         }
       });
     }
   }
 
+  /** Trigger's the animation specified by the incoming event. */
+  /* istanbul ignore next */
+  onAnimationEvent($event: Event): void {
+    this.triggerAnimations($event.type);
+  }
+
   /* istanbul ignore next */
   private processData(): void {
 
diff --git a/projects/wvr-elements/src/lib/shared/wvr-data.component.ts b/projects/wvr-elements/src/lib/shared/wvr-data.component.ts
new file mode 100644
index 000000000..6fd39c118
--- /dev/null
+++ b/projects/wvr-elements/src/lib/shared/wvr-data.component.ts
@@ -0,0 +1,7 @@
+import { Observable } from 'rxjs';
+
+export interface WvrDataComponent {
+  data: {[as: string]: Observable<any>};
+  hasWvrData(): boolean;
+  getWvrData(): string;
+}
diff --git a/projects/wvr-elements/src/lib/shared/wvr-themeable.component.ts b/projects/wvr-elements/src/lib/shared/wvr-themeable.component.ts
new file mode 100644
index 000000000..161062c1e
--- /dev/null
+++ b/projects/wvr-elements/src/lib/shared/wvr-themeable.component.ts
@@ -0,0 +1,14 @@
+import { ElementRef } from '@angular/core';
+import { SafeStyle } from '@angular/platform-browser';
+
+export type variantType = 'alert' | 'badge' | 'border' | 'button' | 'list-group-item' | 'table';
+
+export interface WvrThemeableComponent {
+  style: SafeStyle;
+  themeOverrides: { [key: string]: string };
+  readonly variantTypes: Array<variantType>;
+  readonly _eRef: ElementRef<HTMLElement>;
+
+  applyThemeOverride(customProperty: string, value: string): void;
+
+}
diff --git a/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.html b/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.html
index 6691f347a..94bc04126 100644
--- a/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.html
+++ b/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.html
@@ -1,30 +1,18 @@
-<div *ngIf="!alertClosed"
-  class="wvr-components wvr-alert alert"
-  [ngClass]="{
-    'alert-primary': alertClass==='primary',
-    'alert-secondary': alertClass==='secondary',
-    'alert-success': alertClass==='success',
-    'alert-danger': alertClass==='danger',
-    'alert-warning': alertClass==='warning',
-    'alert-info': alertClass==='info',
-    'alert-light': alertClass==='light',
-    'alert-dark': alertClass==='dark'
-  }"
-  role="alert">
-
-    <div *ngIf="alertType==='basic'" class="basic flex-fill align-self-stretch">
-      <ng-container *ngTemplateOutlet="closeButton"></ng-container>
-      <ng-container *ngTemplateOutlet="basic"></ng-container>
-    </div>
-
-    <div *ngIf="alertType==='self-closing'" class="self-closing flex-fill align-self-stretch">
-      <ng-container *ngTemplateOutlet="selfClosing"></ng-container>
-    </div>
-
-    <div *ngIf="alertType==='custom'" class="custom flex-fill align-self-stretch">
-      <ng-container *ngTemplateOutlet="closeButton"></ng-container>
-      <ng-container *ngTemplateOutlet="custom"></ng-container>
-    </div>
+<div *ngIf="!alertClosed" class="wvr-components wvr-alert alert alert-{{themeVariant}}" role="alert">
+
+  <div *ngIf="alertType==='basic'" class="basic flex-fill align-self-stretch">
+    <ng-container *ngTemplateOutlet="closeButton"></ng-container>
+    <ng-container *ngTemplateOutlet="basic"></ng-container>
+  </div>
+
+  <div *ngIf="alertType==='self-closing'" class="self-closing flex-fill align-self-stretch">
+    <ng-container *ngTemplateOutlet="selfClosing"></ng-container>
+  </div>
+
+  <div *ngIf="alertType==='custom'" class="custom flex-fill align-self-stretch">
+    <ng-container *ngTemplateOutlet="closeButton"></ng-container>
+    <ng-container *ngTemplateOutlet="custom"></ng-container>
+  </div>
 
 </div>
 
@@ -43,10 +31,7 @@
 </ng-template>
 
 <ng-template #closeButton>
-  <button type="button" class="close btn btn-{{alertClass}}" aria-label="Close" (click)="clickClose($event)" *ngIf="closable==='true'">
-       <span aria-hidden="true">×</span>
-     </button>
+  <button type="button" class="close" data-dismiss="alert" aria-label="Close" (click)="clickClose($event)" *ngIf="closable==='true'">
+    <span aria-hidden="true">&times;</span>
+  </button>
 </ng-template>
-
-
-
diff --git a/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.scss b/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.scss
index 515afbc12..65b8d33f8 100644
--- a/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.scss
+++ b/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.scss
@@ -1,62 +1,65 @@
 @import "../shared/styles/wvr-variables.scss";
+@import "../shared/styles/variables";
 
 :host {
 
-  // alert-primary
-  --wvr-alert-primary-color-default: #004085;
-  --wvr-alert-primary-background-default: #cce5ff;
-  --wvr-alert-primary-border-default: #b8daff;
+  @extend .variables;
 
-  --wvr-alert-link-primary-color-default: #002752;
+  // // alert-primary
+  // --wvr-alert-primary-color-default: #004085;
+  // --wvr-alert-primary-background-default: #cce5ff;
+  // --wvr-alert-primary-border-default: #b8daff;
 
-  // .alert-secondary
-  --wvr-alert-secondary-color-default: #383d41;
-  --wvr-alert-secondary-background-default: #e2e3e5;
-  --wvr-alert-secondary-border-default: #d6d8db;
+  // --wvr-alert-link-primary-color-default: #002752;
 
-  --wvr-alert-link-secondary-color-default: #202326;
+  // // .alert-secondary
+  // --wvr-alert-secondary-color-default: #383d41;
+  // --wvr-alert-secondary-background-default: #e2e3e5;
+  // --wvr-alert-secondary-border-default: #d6d8db;
 
-  // alert-success
-  --wvr-alert-success-color-default: #155724;
-  --wvr-alert-success-background-default: #d4edda;
-  --wvr-alert-success-border-default: #c3e6cb;
+  // --wvr-alert-link-secondary-color-default: #202326;
 
-  --wvr-alert-link-success-color-default: #0b2e13;
+  // // alert-success
+  // --wvr-alert-success-color-default: #155724;
+  // --wvr-alert-success-background-default: #d4edda;
+  // --wvr-alert-success-border-default: #c3e6cb;
 
-  // alert-danger
-  --wvr-alert-danger-color-default: #721c24;
-  --wvr-alert-danger-background-default: #f8d7da;
-  --wvr-alert-danger-border-default: #f5c6cb;
+  // --wvr-alert-link-success-color-default: #0b2e13;
 
-  --wvr-alert-link-danger-color-default: #491217;
+  // // alert-danger
+  // --wvr-alert-danger-color-default: #721c24;
+  // --wvr-alert-danger-background-default: #f8d7da;
+  // --wvr-alert-danger-border-default: #f5c6cb;
 
-  // alert-warning
-  --wvr-alert-warning-color-default: #856404;
-  --wvr-alert-warning-background-default: #fff3cd;
-  --wvr-alert-warning-border-default: #ffeeba;
+  // --wvr-alert-link-danger-color-default: #491217;
 
-  --wvr-alert-link-warning-color-default: #533f03;
+  // // alert-warning
+  // --wvr-alert-warning-color-default: #856404;
+  // --wvr-alert-warning-background-default: #fff3cd;
+  // --wvr-alert-warning-border-default: #ffeeba;
 
-  // alert-info
-  --wvr-alert-info-color-default: #0c5460;
-  --wvr-alert-info-background-default: #d1ecf1;
-  --wvr-alert-info-border-default: #bee5eb;
+  // --wvr-alert-link-warning-color-default: #533f03;
 
-  --wvr-alert-link-info-color-default: #062c33;
+  // // alert-info
+  // --wvr-alert-info-color-default: #0c5460;
+  // --wvr-alert-info-background-default: #d1ecf1;
+  // --wvr-alert-info-border-default: #bee5eb;
 
-  // alert-light
-  --wvr-alert-light-color-default: #818182;
-  --wvr-alert-light-background-default: #fefefe;
-  --wvr-alert-light-border-default: #fdfdfe;
+  // --wvr-alert-link-info-color-default: #062c33;
 
-  --wvr-alert-light-warning-color-default: #686868;
+  // // alert-light
+  // --wvr-alert-light-color-default: #818182;
+  // --wvr-alert-light-background-default: #fefefe;
+  // --wvr-alert-light-border-default: #fdfdfe;
 
-  // alert-dark
-  --wvr-alert-dark-color-default: #1b1e21;
-  --wvr-alert-dark-background-default: #d6d8d9;
-  --wvr-alert-dark-border-default: #c6c8ca;
+  // --wvr-alert-light-warning-color-default: #686868;
 
-  --wvr-alert-link-dark-color-default : #040505;
+  // // alert-dark
+  // --wvr-alert-dark-color-default: #1b1e21;
+  // --wvr-alert-dark-background-default: #d6d8d9;
+  // --wvr-alert-dark-border-default: #c6c8ca;
+
+  // --wvr-alert-link-dark-color-default : #040505;
 
   font-family: var(--wvr-font-family-sans-serif);
 
@@ -68,121 +71,121 @@
     border-radius: .25rem;
   }
 
-  .alert-dismissible {
-    padding-right: 4rem;
-  }
-
-  .alert-dismissible .close {
-    position: absolute;
-    top: 0;
-    right: 0;
-    padding: .75rem 1.25rem;
-    color: inherit;
-  }
-
-  .alert-heading {
-    color: inherit;
-  }
-
-  .btn.btn-primary,
-  .btn.btn-secondary,
-  .btn.btn-success,
-  .btn.btn-danger,
-  .btn.btn-warning,
-  .btn.btn-info,
-  .btn.btn-light,
-  .btn.btn-dark {
-    font-size: 1.2rem;
-    box-shadow: none;
-  }
-
-  a {
-    text-decoration: none;
-    background-color: transparent;
-  }
-
-  .alert-link {
-    font-weight: 700;
-  }
-
-  .alert-primary {
-    color: var(--wvr-alert-primary-color-default);
-    background-color: var(--wvr-alert-primary-background-default);
-    border-color: var(--wvr-alert-primary-border-default);
-  }
-
-  .alert-primary .alert-link {
-    color: var(--wvr-alert-link-primary-color-default);
-  }
-
-  .alert-secondary {
-    color: var(--wvr-alert-secondary-color-default);
-    background-color: var(--wvr-alert-secondary-background-default);
-    border-color: var(--wvr-alert-secondary-border-default);
-  }
-
-  .alert-secondary .alert-link {
-    color: var(--wvr-alert-link-secondary-color-default);
-  }
-
-  .alert-success {
-    color: var(--wvr-alert-success-color-default);
-    background-color: var(--wvr-alert-success-background-default);
-    border-color: var(--wvr-alert-success-border-default);
-  }
-
-  .alert-success .alert-link {
-    color: var(--wvr-alert-link-success-color-default);
-  }
-
-  .alert-danger {
-    color: var(--wvr-alert-danger-color-default);
-    background-color: var(--wvr-alert-danger-background-default);
-    border-color: var(--wvr-alert-danger-border-default);
-  }
-
-  .alert-danger .alert-link {
-    color: var(--wvr-alert-link-danger-color-default);
-  }
-
-  .alert-warning {
-    color: var(--wvr-alert-warning-color-default);
-    background-color: var(--wvr-alert-warning-background-default);
-    border-color: var(--wvr-alert-warning-border-default);
-  }
-
-  .alert-warning .alert-link {
-    color: var(--wvr-alert-link-warning-color-default);
-  }
-
-  .alert-info {
-    color: var(--wvr-alert-info-color-default);
-    background-color: var(--wvr-alert-info-background-default);
-    border-color: var(--wvr-alert-info-border-default);
-  }
-
-  .alert-info .alert-link {
-    color: var(--wvr-alert-link-info-color-default);
-  }
-
-  .alert-light {
-    color: var(--wvr-alert-light-color-default);
-    background-color: var(--wvr-alert-light-background-default);
-    border-color: var(--wvr-alert-light-border-default);
-  }
-
-  .alert-light .alert-link {
-    color: var(--wvr-alert-light-warning-color-default);
-  }
-
-  .alert-dark {
-    color: var(--wvr-alert-dark-color-default);
-    background-color: var(--wvr-alert-dark-background-default);
-    border-color: var(--wvr-alert-dark-border-default);
-  }
-
-  .alert-dark .alert-link {
-    color: var(--wvr-alert-link-dark-color-default);
-  }
+  // .alert-dismissible {
+  //   padding-right: 4rem;
+  // }
+
+  // .alert-dismissible .close {
+  //   position: absolute;
+  //   top: 0;
+  //   right: 0;
+  //   padding: .75rem 1.25rem;
+  //   color: inherit;
+  // }
+
+  // .alert-heading {
+  //   color: inherit;
+  // }
+
+  // .btn.btn-primary,
+  // .btn.btn-secondary,
+  // .btn.btn-success,
+  // .btn.btn-danger,
+  // .btn.btn-warning,
+  // .btn.btn-info,
+  // .btn.btn-light,
+  // .btn.btn-dark {
+  //   font-size: 1.2rem;
+  //   box-shadow: none;
+  // }
+
+  // a {
+  //   text-decoration: none;
+  //   background-color: transparent;
+  // }
+
+  // .alert-link {
+  //   font-weight: 700;
+  // }
+
+  // .alert-primary {
+  //   color: var(--wvr-alert-primary-color-default);
+  //   background-color: var(--wvr-alert-primary-background-default);
+  //   border-color: var(--wvr-alert-primary-border-default);
+  // }
+
+  // .alert-primary .alert-link {
+  //   color: var(--wvr-alert-link-primary-color-default);
+  // }
+
+  // .alert-secondary {
+  //   color: var(--wvr-alert-secondary-color-default);
+  //   background-color: var(--wvr-alert-secondary-background-default);
+  //   border-color: var(--wvr-alert-secondary-border-default);
+  // }
+
+  // .alert-secondary .alert-link {
+  //   color: var(--wvr-alert-link-secondary-color-default);
+  // }
+
+  // .alert-success {
+  //   color: var(--wvr-alert-success-color-default);
+  //   background-color: var(--wvr-alert-success-background-default);
+  //   border-color: var(--wvr-alert-success-border-default);
+  // }
+
+  // .alert-success .alert-link {
+  //   color: var(--wvr-alert-link-success-color-default);
+  // }
+
+  // .alert-danger {
+  //   color: var(--wvr-alert-danger-color-default);
+  //   background-color: var(--wvr-alert-danger-background-default);
+  //   border-color: var(--wvr-alert-danger-border-default);
+  // }
+
+  // .alert-danger .alert-link {
+  //   color: var(--wvr-alert-link-danger-color-default);
+  // }
+
+  // .alert-warning {
+  //   color: var(--wvr-alert-warning-color-default);
+  //   background-color: var(--wvr-alert-warning-background-default);
+  //   border-color: var(--wvr-alert-warning-border-default);
+  // }
+
+  // .alert-warning .alert-link {
+  //   color: var(--wvr-alert-link-warning-color-default);
+  // }
+
+  // .alert-info {
+  //   color: var(--wvr-alert-info-color-default);
+  //   background-color: var(--wvr-alert-info-background-default);
+  //   border-color: var(--wvr-alert-info-border-default);
+  // }
+
+  // .alert-info .alert-link {
+  //   color: var(--wvr-alert-link-info-color-default);
+  // }
+
+  // .alert-light {
+  //   color: var(--wvr-alert-light-color-default);
+  //   background-color: var(--wvr-alert-light-background-default);
+  //   border-color: var(--wvr-alert-light-border-default);
+  // }
+
+  // .alert-light .alert-link {
+  //   color: var(--wvr-alert-light-warning-color-default);
+  // }
+
+  // .alert-dark {
+  //   color: var(--wvr-alert-dark-color-default);
+  //   background-color: var(--wvr-alert-dark-background-default);
+  //   border-color: var(--wvr-alert-dark-border-default);
+  // }
+
+  // .alert-dark .alert-link {
+  //   color: var(--wvr-alert-link-dark-color-default);
+  // }
 
 }
diff --git a/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.spec.ts b/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.spec.ts
index fa7d3d1c1..653956d4f 100644
--- a/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.spec.ts
@@ -1,8 +1,8 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { StoreModule } from '@ngrx/store';
-import { metaReducers, ROOT_REDUCER } from '../core/store';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { APP_CONFIG, testAppConfig } from '../shared/config';
 import { WvrAlertComponent } from './wvr-alert.component';
 
 @Component({
@@ -15,6 +15,10 @@ class WvrAlertHostComponent {
 }
 
 describe('WvrAlertComponent', () => {
+  const initialState = { theme: {
+    themes: {}
+  }};
+  let store: MockStore;
   let component: WvrAlertComponent;
   let fixture: ComponentFixture<WvrAlertComponent>;
 
@@ -22,11 +26,17 @@ describe('WvrAlertComponent', () => {
   let hostFixture: ComponentFixture<WvrAlertHostComponent>;
 
   // tslint:disable-next-line: deprecation
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        BrowserAnimationsModule,
-        StoreModule.forRoot(ROOT_REDUCER, { metaReducers })
+        BrowserAnimationsModule
+      ],
+      providers: [
+        {
+          provide: APP_CONFIG,
+          useValue: testAppConfig
+        },
+        provideMockStore({initialState})
       ],
       declarations: [
         WvrAlertHostComponent,
@@ -35,6 +45,7 @@ describe('WvrAlertComponent', () => {
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     })
     .compileComponents();
+    store = TestBed.inject(MockStore);
   }));
 
   beforeEach(() => {
@@ -54,7 +65,7 @@ describe('WvrAlertComponent', () => {
   });
 
   it("should have as alert Class as 'primary'", () => {
-    expect(component.alertClass)
+    expect(component.themeVariant)
       .toEqual('primary');
   });
 
diff --git a/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.ts b/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.ts
index 223507349..8cbd308fc 100644
--- a/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.ts
+++ b/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.ts
@@ -1,4 +1,5 @@
-import { AfterContentInit, Component, HostListener, Injector, Input, OnInit } from '@angular/core';
+import { Component, Injector, Input, OnInit } from '@angular/core';
+import { ThemeVariantName } from '../shared/theme';
 import { WvrBaseComponent } from '../shared/wvr-base.component';
 
 /**
@@ -12,7 +13,7 @@ import { WvrBaseComponent } from '../shared/wvr-base.component';
 export class WvrAlertComponent extends WvrBaseComponent implements OnInit {
 
   /** Used to define the class type of an alert component.  */
-  @Input() alertClass: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' = 'primary';
+  @Input() themeVariant: ThemeVariantName = 'primary';
 
   /** Used to define the type of alert. */
   @Input() alertType: 'basic' | 'self-closing' | 'custom' = 'basic';
@@ -26,6 +27,8 @@ export class WvrAlertComponent extends WvrBaseComponent implements OnInit {
   /** Setting the delay timer for the self closing alert message */
   @Input() closeTimer = 5000;
 
+  variantTypes = ['alert'];
+
   constructor(injector: Injector) {
     super(injector);
   }
@@ -40,6 +43,7 @@ export class WvrAlertComponent extends WvrBaseComponent implements OnInit {
 
   /** Initializes the closing timer for a self closing alert. */
   ngOnInit(): void {
+    super.ngOnInit();
     if (this.alertType === 'self-closing') {
       setTimeout(() => {
         this.alertClosed = true;
diff --git a/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.ud-examples.html b/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.ud-examples.html
index a84c3b62e..345267204 100644
--- a/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.ud-examples.html
+++ b/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.ud-examples.html
@@ -4,25 +4,25 @@
   </desciption>
   <snippet>
     <wvre-alert
-      alert-class="primary"
+      theme-variant="primary"
       alert-type="basic">
         <wvre-text value="This is a basic alert"></wvre-text>
     </wvre-alert>
 
     <wvre-alert
-      alert-class="secondary"
+      theme-variant="secondary"
       alert-type="basic">
         <wvre-text value="This is a basic alert"></wvre-text>
     </wvre-alert>
 
     <wvre-alert
-      alert-class="info"
+      theme-variant="info"
       alert-type="basic">
         <wvre-text value="This is a basic alert"></wvre-text>
     </wvre-alert>
 
     <wvre-alert
-      alert-class="primary"
+      theme-variant="primary"
       alert-type="basic">
         <wvre-text value="This is basic primary alert. "></wvre-text>
     </wvre-alert>
@@ -35,7 +35,7 @@
   </desciption>
   <snippet>
     <wvre-alert
-      alert-class="success"
+      theme-variant="success"
       alert-type="self-closing"
       close-timer="5000">
         <wvre-text value="This is self closing success alert"></wvre-text>
@@ -49,7 +49,7 @@
   </desciption>
   <snippet>
     <wvre-alert
-      alert-class="danger"
+      theme-variant="danger"
       alert-type="custom">
         <wvre-custom-alert>
           <h4 class="alert-heading">
@@ -68,7 +68,7 @@ <h4 class="alert-heading">
 
   <snippet>
     <wvre-alert
-      alert-class="danger"
+      theme-variant="danger"
       alert-type="custom"
       closable="false">
         <wvre-custom-alert>
diff --git a/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.html b/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.html
index f7b0602cd..e466d3500 100644
--- a/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.html
+++ b/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.html
@@ -1,60 +1,25 @@
 <button-wrapper #animationRoot>
   <button *ngIf="!href"
-  class="wvr-components wvr-button btn"
-  [type]="wvrBtnType"
+  class="wvr-components wvr-button btn {{btnType!=='link' ? 'btn-'+themeVariant : ''}}"
+  [type]="btnType"
   [ngClass]="{
-    'btn-primary': btnClass==='primary',
-    'btn-secondary': btnClass==='secondary',
-    'btn-success': btnClass==='success',
-    'btn-danger': btnClass==='danger',
-    'btn-warning': btnClass==='warning',
-    'btn-info': btnClass==='info',
-    'btn-light': btnClass==='light',
-    'btn-dark': btnClass==='dark',
-    'btn-link': btnClass==='link',
-    'btn-outline-primary': btnClass==='outline-primary',
-    'btn-outline-secondary': btnClass==='outline-secondary',
-    'btn-outline-success': btnClass==='outline-success',
-    'btn-outline-danger': btnClass==='outline-danger',
-    'btn-outline-warning': btnClass==='outline-warning',
-    'btn-outline-info': btnClass==='outline-info',
-    'btn-outline-light': btnClass==='outline-light',
-    'btn-outline-dark': btnClass==='outline-dark',
-    'btn-outline-link': btnClass==='outline-link',
     'btn-lg': btnSize==='large',
     'btn-sm': btnSize==='small',
-    'btn-block':btnSize==='block'
+    'btn-block': btnSize==='block',
+    'btn-link': btnType === 'link'
   }"
   role="button"
   >
     <ng-container *ngTemplateOutlet="content"></ng-container>
   </button>
-
   <a *ngIf="href"
-    class="wvr-components wvr-button btn"
+    class="wvr-components wvr-button btn {{btnType!=='link' ? 'btn-'+themeVariant : ''}}"
     [href]="href"
     [ngClass]="{
-      'btn-primary': btnClass==='primary',
-      'btn-secondary': btnClass==='secondary',
-      'btn-success': btnClass==='success',
-      'btn-danger': btnClass==='danger',
-      'btn-warning': btnClass==='warning',
-      'btn-info': btnClass==='info',
-      'btn-light': btnClass==='light',
-      'btn-dark': btnClass==='dark',
-      'btn-link': btnClass==='link',
-      'btn-outline-primary': btnClass==='outline-primary',
-      'btn-outline-secondary': btnClass==='outline-secondary',
-      'btn-outline-success': btnClass==='outline-success',
-      'btn-outline-danger': btnClass==='outline-danger',
-      'btn-outline-warning': btnClass==='outline-warning',
-      'btn-outline-info': btnClass==='outline-info',
-      'btn-outline-light': btnClass==='outline-light',
-      'btn-outline-dark': btnClass==='outline-dark',
-      'btn-outline-link': btnClass==='outline-link',
       'btn-lg': btnSize==='large',
       'btn-sm': btnSize==='small',
-      'btn-block':btnSize==='block'
+      'btn-block':btnSize==='block',
+      'btn-link': btnType === 'link'
     }"
     role="button" aria-label="button">
     <ng-container *ngTemplateOutlet="content"></ng-container>
diff --git a/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.scss b/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.scss
index a93acdc4a..ee71c5ef8 100644
--- a/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.scss
+++ b/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.scss
@@ -1,8 +1,11 @@
 @import "../shared/styles/wvr-variables.scss";
+@import "../shared/styles/variables";
 
 :host {
+  
+  @extend .variables;
+
   --wvr-btn-cursor-default: pointer;
-  --wvr-btn-border-radius-default: 5px; //.25rem;
   --wvr-btn-font-family-sans-serif-default: var(--wvr-font-family-sans-serif);
   --wvr-btn-font-size-default: 1rem;
   --wvr-btn-font-weight-default: normal;
@@ -10,9 +13,7 @@
   --wvr-btn-padding-default: .375rem .75rem;
   --wvr-btn-text-align-default: center;
   --wvr-btn-vertical-align-default: middle;
-  --wvr-btn-border: 1px solid transparent;
 
-  --wvr-btn-border-radius: var(--wvr-btn-border-radius-default);
   --wvr-btn-cursor: var(--wvr-btn-cursor-default);
   --wvr-btn-font-family-sans-serif: var(--wvr-btn-font-family-sans-serif-default);
   --wvr-btn-font-size: var(--wvr-btn-font-size-default);
@@ -22,506 +23,13 @@
   --wvr-btn-text-align: var(--wvr-btn-text-align-default);
   --wvr-btn-vertical-align: var(--wvr-btn-vertical-align-default);
 
-  // primary
-  --wvr-btn-primary-active-background-default: #0062cc;
-  --wvr-btn-primary-active-color-default: var(--wvr-white);
-  --wvr-btn-primary-active-text-decoration-default: none;
-  --wvr-btn-primary-background-default: var(--wvr-primary);
-  --wvr-btn-primary-color-default: var(--wvr-white);
-  --wvr-btn-primary-text-decoration-default: none;
-  --wvr-btn-primary-focus-box-shadow-default: 0 0 0 0.2rem rgba(0,123,255,.5);
-  --wvr-btn-primary-focus-text-decoration-default: none;
-  --wvr-btn-primary-hover-background-default: #0069d9;
-  --wvr-btn-primary-hover-color-default: var(--wvr-white);
-  --wvr-btn-primary-hover-text-decoration-default: none;
-
-  // outline-primary
-  --wvr-btn-outline-primary-active-background-default: var(--wvr-primary);
-  --wvr-btn-outline-primary-active-color-default: var(--wvr-white);
-  --wvr-btn-outline-primary-active-text-decoration-default: none;
-  --wvr-btn-outline-primary-background-default: transparent;
-  --wvr-btn-outline-primary-color-default: var(--wvr-primary);
-  --wvr-btn-outline-primary-text-decoration-default: none;
-  --wvr-btn-outline-primary-focus-box-shadow-default: 0 0 0 0.2rem rgba(0,123,255,.5);
-  --wvr-btn-outline-primary-focus-text-decoration-default: none;
-  --wvr-btn-outline-primary-hover-background-default: var(--wvr-primary);
-  --wvr-btn-outline-primary-hover-color-default: var(--wvr-white);
-  --wvr-btn-outline-primary-hover-text-decoration-default: none;
-
-  // secondary
-  --wvr-btn-secondary-active-background-default: #545b62;
-  --wvr-btn-secondary-active-color-default: var(--wvr-white);
-  --wvr-btn-secondary-active-text-decoration-default: none;
-  --wvr-btn-secondary-background-default: var(--wvr-secondary);
-  --wvr-btn-secondary-color-default: var(--wvr-white);
-  --wvr-btn-secondary-text-decoration-default: none;
-  --wvr-btn-secondary-focus-box-shadow-default: 0 0 0 0.2rem rgba(108,117,125,.5);
-  --wvr-btn-secondary-focus-text-decoration-default: none;
-  --wvr-btn-secondary-hover-background-default: #5a6268;
-  --wvr-btn-secondary-hover-color-default: var(--wvr-white);
-  --wvr-btn-secondary-hover-text-decoration-default: none;
-
-  // btn-outline-secondary
-  --wvr-btn-outline-secondary-active-background-default: var(--wvr-secondary);
-  --wvr-btn-outline-secondary-active-color-default: var(--wvr-white);
-  --wvr-btn-outline-secondary-active-text-decoration-default: none;
-  --wvr-btn-outline-secondary-background-default: transparent;
-  --wvr-btn-outline-secondary-color-default: var(--wvr-secondary);
-  --wvr-btn-outline-secondary-text-decoration-default: none;
-  --wvr-btn-outline-secondary-focus-box-shadow-default: 0 0 0 0.2rem rgba(108,117,125,.5);
-  --wvr-btn-outline-secondary-focus-text-decoration-default: none;
-  --wvr-btn-outline-secondary-hover-background-default: var(--wvr-secondary);
-  --wvr-btn-outline-secondary-hover-color-default: var(--wvr-white);
-  --wvr-btn-outline-secondary-hover-text-decoration-default: none;
-
-  // success
-  --wvr-btn-success-active-background-default: #1e7e34;
-  --wvr-btn-success-active-color-default: var(--wvr-white);
-  --wvr-btn-success-active-text-decoration-default: none;
-  --wvr-btn-success-background-default: var(--wvr-success);
-  --wvr-btn-success-color-default: var(--wvr-white);
-  --wvr-btn-success-text-decoration-default: none;
-  --wvr-btn-success-focus-box-shadow-default: 0 0 0 0.2rem rgba(40,167,69,.5);
-  --wvr-btn-success-focus-text-decoration-default: none;
-  --wvr-btn-success-hover-background-default: #218838;
-  --wvr-btn-success-hover-color-default: var(--wvr-white);
-  --wvr-btn-success-hover-text-decoration-default: none;
-
-  // btn-outline-success
-  --wvr-btn-outline-success-active-background-default: var(--wvr-success);
-  --wvr-btn-outline-success-active-color-default: var(--wvr-white);
-  --wvr-btn-outline-success-active-text-decoration-default: none;
-  --wvr-btn-outline-success-background-default: transparent;
-  --wvr-btn-outline-success-color-default: var(--wvr-success);
-  --wvr-btn-outline-success-text-decoration-default: none;
-  --wvr-btn-outline-success-focus-box-shadow-default: 0 0 0 0.2rem rgba(40,167,69,.5);
-  --wvr-btn-outline-success-focus-text-decoration-default: none;
-  --wvr-btn-outline-success-hover-background-default: var(--wvr-success);
-  --wvr-btn-outline-success-hover-color-default: var(--wvr-white);
-  --wvr-btn-outline-success-hover-text-decoration-default: none;
-
-  // info
-  --wvr-btn-info-active-background-default: #117a8b;
-  --wvr-btn-info-active-color-default: var(--wvr-white);
-  --wvr-btn-info-active-text-decoration-default: none;
-  --wvr-btn-info-focus-box-shadow-default: 0 0 0 0.2rem rgba(23,162,184,.5);
-  --wvr-btn-info-focus-text-decoration-default: none;
-  --wvr-btn-info-background-default: var(--wvr-info);
-  --wvr-btn-info-color-default: var(--wvr-white);
-  --wvr-btn-info-text-decoration-default: none;
-  --wvr-btn-info-hover-background-default: #138496;
-  --wvr-btn-info-hover-color-default: var(--wvr-white);
-  --wvr-btn-info-hover-text-decoration-default: none;
-
-  // btn-outline-info
-  --wvr-btn-outline-info-active-background-default: var(--wvr-info);
-  --wvr-btn-outline-info-active-color-default: var(--wvr-white);
-  --wvr-btn-outline-info-active-text-decoration-default: none;
-  --wvr-btn-outline-info-background-default: transparent;
-  --wvr-btn-outline-info-color-default: var(--wvr-info);
-  --wvr-btn-outline-info-text-decoration-default: none;
-  --wvr-btn-outline-info-focus-box-shadow-default: 0 0 0 0.2rem rgba(23,162,184,.5);
-  --wvr-btn-outline-info-focus-text-decoration-default: none;
-  --wvr-btn-outline-info-hover-background-default: var(--wvr-info);
-  --wvr-btn-outline-info-hover-color-default: var(--wvr-white);
-  --wvr-btn-outline-info-hover-text-decoration-default: none;
-
-  // warning
-  --wvr-btn-warning-active-background-default: #d39e00;
-  --wvr-btn-warning-active-color-default: #212529;
-  --wvr-btn-warning-active-text-decoration-default: none;
-  --wvr-btn-warning-background-default: var(--wvr-warning);
-  --wvr-btn-warning-color-default: #212529;
-  --wvr-btn-warning-text-decoration-default: none;
-  --wvr-btn-warning-focus-box-shadow-default: 0 0 0 0.2rem rgba(255,193,7,.5);
-  --wvr-btn-warning-focus-text-decoration-default: none;
-  --wvr-btn-warning-hover-background-default: #e0a800;
-  --wvr-btn-warning-hover-color-default: #212529;
-  --wvr-btn-warning-hover-text-decoration-default: none;
-
-  // btn-outline-warning
-  --wvr-btn-outline-warning-active-background-default: var(--wvr-warning);
-  --wvr-btn-outline-warning-active-color-default: #212529;
-  --wvr-btn-outline-warning-active-text-decoration-default: none;
-  --wvr-btn-outline-warning-background-default: transparent;
-  --wvr-btn-outline-warning-color-default: var(--wvr-warning);
-  --wvr-btn-outline-warning-text-decoration-default: none;
-  --wvr-btn-outline-warning-focus-box-shadow-default: 0 0 0 0.2rem rgba(255,193,7,.5);
-  --wvr-btn-outline-warning-focus-text-decoration-default: none;
-  --wvr-btn-outline-warning-hover-background-default: var(--wvr-warning);
-  --wvr-btn-outline-warning-hover-color-default: #212529;
-  --wvr-btn-outline-warning-hover-text-decoration-default: none;
-
-  // danger
-  --wvr-btn-danger-active-background-default: #bd2130;
-  --wvr-btn-danger-active-color-default: var(--wvr-white);
-  --wvr-btn-danger-active-text-decoration-default: none;
-  --wvr-btn-danger-background-default: var(--wvr-danger);
-  --wvr-btn-danger-color-default: var(--wvr-white);
-  --wvr-btn-danger-text-decoration-default: none;
-  --wvr-btn-danger-focus-box-shadow-default: 0 0 0 0.2rem rgba(220,53,69,.5);
-  --wvr-btn-danger-focus-text-decoration-default: none;
-  --wvr-btn-danger-hover-background-default: #c82333;
-  --wvr-btn-danger-hover-color-default: var(--wvr-white);
-  --wvr-btn-danger-hover-text-decoration-default: none;
-
-  // btn-outline-danger
-  --wvr-btn-outline-danger-active-background-default: var(--wvr-danger);
-  --wvr-btn-outline-danger-active-color-default: var(--wvr-white);
-  --wvr-btn-outline-danger-active-text-decoration-default: none;
-  --wvr-btn-outline-danger-background-default: transparent;
-  --wvr-btn--outline-danger-color-default: var(--wvr-danger);
-  --wvr-btn--outline-danger-text-decoration-default: none;
-  --wvr-btn-outline-danger-focus-box-shadow-default: 0 0 0 0.2rem rgba(220,53,69,.5);
-  --wvr-btn-outline-danger-focus-text-decoration-default: none;
-  --wvr-btn-outline-danger-hover-background-default: var(--wvr-danger);
-  --wvr-btn-outline-danger-hover-color-default: var(--wvr-white);
-  --wvr-btn-outline-danger-hover-text-decoration-default: none;
-
-  // light
-  --wvr-btn-light-active-background-default: #dae0e5;
-  --wvr-btn-light-active-color-default: #212529;
-  --wvr-btn-light-active-text-decoration-default: none;
-  --wvr-btn-light-background-default: var(--wvr-light);
-  --wvr-btn-light-color-default: #212529;
-  --wvr-btn-light-text-decoration-default: none;
-  --wvr-btn-light-focus-box-shadow-default: 0 0 0 0.2rem rgba(248,249,250,.5);
-  --wvr-btn-light-focus-text-decoration-default: none;
-  --wvr-btn-light-hover-background-default: #e2e6ea;
-  --wvr-btn-light-hover-color-default: #212529;
-  --wvr-btn-light-hover-text-decoration-default: none;
-
-  // btn-outline-light
-  --wvr-btn-outline-light-active-background-default: var(--wvr-light);
-  --wvr-btn-outline-light-active-color-default: #212529;
-  --wvr-btn-outline-light-active-text-decoration-default: none;
-  --wvr-btn-outline-light-background-default: transparent;
-  --wvr-btn-outline-light-color-default: var(--wvr-light);
-  --wvr-btn-outline-light-text-decoration-default: none;
-  --wvr-btn-outline-light-focus-box-shadow-default: 0 0 0 0.2rem rgba(248,249,250,.5);
-  --wvr-btn-outline-light-focus-text-decoration-default: none;
-  --wvr-btn-outline-light-hover-background-default: var(--wvr-light);
-  --wvr-btn-outline-light-hover-color-default: #212529;
-  --wvr-btn-outline-light-hover-text-decoration-default: none;
-
-  // dark
-  --wvr-btn-dark-active-background-default: #1d2124;
-  --wvr-btn-dark-active-color-default: var(--wvr-white);
-  --wvr-btn-dark-active-text-decoration-default: none;
-  --wvr-btn-dark-background-default: var(--wvr-dark);
-  --wvr-btn-dark-color-default: var(--wvr-white);
-  --wvr-btn-dark-text-decoration-default: none;
-  --wvr-btn-dark-focus-box-shadow-default: 0 0 0 0.2rem rgba(52,58,64,.5);
-  --wvr-btn-dark-focus-text-decoration-default: none;
-  --wvr-btn-dark-hover-background-default: #23272b;
-  --wvr-btn-dark-hover-color-default: var(--wvr-white);
-  --wvr-btn-dark-hover-text-decoration-default: none;
-
-  // btn-outline-dark
-  --wvr-btn-outline-dark-active-background-default: var(--wvr-dark);
-  --wvr-btn-outline-dark-active-color-default: var(--wvr-white);
-  --wvr-btn-outline-dark-active-text-decoration-default: none;
-  --wvr-btn-outline-dark-background-default: transparent;
-  --wvr-btn-outline-dark-color-default: var(--wvr-dark);
-  --wvr-btn-outline-dark-text-decoration-default: none;
-  --wvr-btn-outline-dark-focus-box-shadow-default: 0 0 0 0.2rem rgba(52,58,64,.5);
-  --wvr-btn-outline-dark-focus-text-decoration-default: none;
-  --wvr-btn-outline-dark-hover-background-default: var(--wvr-dark);
-  --wvr-btn-outline-dark-hover-color-default: var(--wvr-white);
-  --wvr-btn-outline-dark-hover-text-decoration-default: none;
-
-  // link
-  --wvr-btn-link-active-background-default: transparent;
-  --wvr-btn-link-active-color-default: var(--wvr-primary);
-  --wvr-btn-link-active-text-decoration-default: underline;
-  --wvr-btn-link-background-default: transparent;
-  --wvr-btn-link-color-default: var(--wvr-primary);
-  --wvr-btn-link-text-decoration-default: underline;
-  --wvr-btn-link-focus-box-shadow-default: none;
-  --wvr-btn-link-focus-text-decoration-default: none;
-  --wvr-btn-link-hover-background-default: transparent;
-  --wvr-btn-link-hover-color-default: #0056b3;
-  --wvr-btn-link-hover-text-decoration-default: underline;
-
-  // btn-primary-active
-  --wvr-btn-primary-active-background: var(--wvr-btn-primary-active-background-default);
-  --wvr-btn-primary-active-color: var(--wvr-btn-primary-active-color-default);
-  --wvr-btn-primary-active-text-decoration: var(--wvr-btn-primary-active-text-decoration-default);
-  // btn-primary
-  --wvr-btn-primary-background: var(--wvr-btn-primary-background-default);
-  --wvr-btn-primary-color: var(--wvr-btn-primary-color-default);
-  --wvr-btn-primary-text-decoration: var(--wvr-btn-primary-text-decoration-default);
-  // btn-primary-focus
-  --wvr-btn-primary-focus-box-shadow: var(--wvr-btn-primary-focus-box-shadow-default);
-  --wvr-btn-primary-focus-text-decoration: var(--wvr-btn-primary-focus-text-decoration-default);
-  // btn-primary-hover
-  --wvr-btn-primary-hover-background: var(--wvr-btn-primary-hover-background-default);
-  --wvr-btn-primary-hover-color: var(--wvr-btn-primary-hover-color-default);
-  --wvr-btn-primary-hover-text-decoration: var(--wvr-btn-primary-hover-text-decoration-default);
-
-  // btn-outline-primary-active
-  --wvr-btn-outline-primary-active-background: var(--wvr-btn-outline-primary-active-background-default);
-  --wvr-btn-outline-primary-active-color: var(--wvr-btn-outline-primary-active-color-default);
-  --wvr-btn-outline-primary-active-text-decoration: var(--wvr-btn-outline-primary-active-text-decoration-default);
-  // btn-outline-primary
-  --wvr-btn-outline-primary-background: var(--wvr-btn-outline-primary-background-default);
-  --wvr-btn-outline-primary-color: var(--wvr-btn-outline-primary-color-default);
-  --wvr-btn-outline-primary-text-decoration: var(--wvr-btn-outline-primary-text-decoration-default);
-  // btn-outline-primary-focus
-  --wvr-btn-outline-primary-focus-box-shadow: var(--wvr-btn-outline-primary-focus-box-shadow-default);
-  --wvr-btn-outline-primary-focus-text-decoration: var(--wvr-btn-outline-primary-focus-text-decoration-default);
-  // btn-outline-primary-hover
-  --wvr-btn-outline-primary-hover-background: var(--wvr-btn-outline-primary-hover-background-default);
-  --wvr-btn-outline-primary-hover-color: var(--wvr-btn-outline-primary-hover-color-default);
-  --wvr-btn-outline-primary-hover-text-decoration: var(--wvr-btn-outline-primary-hover-text-decoration-default);
-
-  // btn-secondary-active
-  --wvr-btn-secondary-active-background: var(--wvr-btn-secondary-active-background-default);
-  --wvr-btn-secondary-active-color: var(--wvr-btn-secondary-active-color-default);
-  --wvr-btn-secondary-active-text-decoration: var(--wvr-btn-secondary-active-text-decoration-default);
-  // btn-secondary
-  --wvr-btn-secondary-background: var(--wvr-btn-secondary-background-default);
-  --wvr-btn-secondary-color: var(--wvr-btn-secondary-color-default);
-  --wvr-btn-secondary-text-decoration: var(--wvr-btn-secondary-text-decoration-default);
-  // btn-secondary-focus
-  --wvr-btn-secondary-focus-box-shadow: var(--wvr-btn-secondary-focus-box-shadow-default);
-  --wvr-btn-secondary-focus-text-decoration: var(--wvr-btn-secondary-focus-text-decoration-default);
-  // btn-secondary-hover
-  --wvr-btn-secondary-hover-background: var(--wvr-btn-secondary-hover-background-default);
-  --wvr-btn-secondary-hover-color: var(--wvr-btn-secondary-hover-color-default);
-  --wvr-btn-secondary-hover-text-decoration: var(--wvr-btn-secondary-hover-text-decoration-default);
-
-  // btn-outline-secondary-active
-  --wvr-btn-outline-secondary-active-background: var(--wvr-btn-outline-secondary-active-background-default);
-  --wvr-btn-outline-secondary-active-color: var(--wvr-btn-outline-secondary-active-color-default);
-  --wvr-btn-outline-secondary-active-text-decoration: var(--wvr-btn-outline-secondary-active-text-decoration-default);
-  // btn-outline-secondary
-  --wvr-btn-outline-secondary-background: var(--wvr-btn-outline-secondary-background-default);
-  --wvr-btn-outline-secondary-color: var(--wvr-btn-outline-secondary-color-default);
-  --wvr-btn-outline-secondary-text-decoration: var(--wvr-btn-outline-secondary-text-decoration-default);
-  // btn-outline-secondary-focus
-  --wvr-btn-outline-secondary-focus-box-shadow: var(--wvr-btn-outline-secondary-focus-box-shadow-default);
-  --wvr-btn-outline-secondary-focus-text-decoration: var(--wvr-btn-outline-secondary-focus-text-decoration-default);
-  // btn-outline-secondary-hover
-  --wvr-btn-outline-secondary-hover-background: var(--wvr-btn-outline-secondary-hover-background-default);
-  --wvr-btn-outline-secondary-hover-color: var(--wvr-btn-outline-secondary-hover-color-default);
-  --wvr-btn-outline-secondary-hover-text-decoration: var(--wvr-btn-outline-secondary-hover-text-decoration-default);
-
-  // btn-success-active
-  --wvr-btn-success-active-background: var(--wvr-btn-success-active-background-default);
-  --wvr-btn-success-active-color: var(--wvr-btn-success-active-color-default);
-  --wvr-btn-success-active-text-decoration: var(--wvr-btn-success-active-text-decoration-default);
-  // btn-success
-  --wvr-btn-success-background: var(--wvr-btn-success-background-default);
-  --wvr-btn-success-color: var(--wvr-btn-success-color-default);
-  --wvr-btn-success-text-decoration: var(--wvr-btn-success-text-decoration-default);
-  // btn-success-focus
-  --wvr-btn-success-focus-box-shadow: var(--wvr-btn-success-focus-box-shadow-default);
-  --wvr-btn-success-focus-text-decoration: var(--wvr-btn-success-focus-text-decoration-default);
-  // btn-success-hover
-  --wvr-btn-success-hover-background: var(--wvr-btn-success-hover-background-default);
-  --wvr-btn-success-hover-color: var(--wvr-btn-success-hover-color-default);
-  --wvr-btn-success-hover-text-decoration: var(--wvr-btn-success-hover-text-decoration-default);
-
-  // btn-outline-success-active
-  --wvr-btn-outline-success-active-background: var(--wvr-btn-outline-success-active-background-default);
-  --wvr-btn-outline-success-active-color: var(--wvr-btn-outline-success-active-color-default);
-  --wvr-btn-outline-success-active-text-decoration: var(--wvr-btn-outline-success-active-text-decoration-default);
-  // btn-outline-success
-  --wvr-btn-outline-success-background: var(--wvr-btn-outline-success-background-default);
-  --wvr-btn-outline-success-color: var(--wvr-btn-outline-success-color-default);
-  --wvr-btn-outline-success-text-decoration: var(--wvr-btn-outline-success-text-decoration-default);
-  // btn-outline-success-focus
-  --wvr-btn-outline-success-focus-box-shadow: var(--wvr-btn-outline-success-focus-box-shadow-default);
-  --wvr-btn-outline-success-focus-text-decoration: var(--wvr-btn-outline-success-focus-text-decoration-default);
-  // btn-outline-success-hover
-  --wvr-btn-outline-success-hover-background: var(--wvr-btn-outline-success-hover-background-default);
-  --wvr-btn-outline-success-hover-color: var(--wvr-btn-outline-success-hover-color-default);
-  --wvr-btn-outline-success-hover-text-decoration: var(--wvr-btn-outline-success-hover-text-decoration-default);
-
-  // btn-info-active
-  --wvr-btn-info-active-background: var(--wvr-btn-info-active-background-default);
-  --wvr-btn-info-active-color: var(--wvr-btn-info-active-color-default);
-  --wvr-btn-info-active-text-decoration: var(--wvr-btn-info-active-text-decoration-default);
-  // btn-info
-  --wvr-btn-info-background: var(--wvr-btn-info-background-default);
-  --wvr-btn-info-color: var(--wvr-btn-info-color-default);
-  --wvr-btn-info-text-decoration: var(--wvr-btn-info-text-decoration-default);
-  // btn-info-focus
-  --wvr-btn-info-focus-box-shadow: var(--wvr-btn-info-focus-box-shadow-default);
-  --wvr-btn-info-focus-text-decoration: var(--wvr-btn-info-focus-text-decoration-default);
-  // btn-info-hover
-  --wvr-btn-info-hover-background: var(--wvr-btn-info-hover-background-default);
-  --wvr-btn-info-hover-color: var(--wvr-btn-info-hover-color-default);
-  --wvr-btn-info-hover-text-decoration: var(--wvr-btn-info-hover-text-decoration-default);
-
-  // btn-outline-info-active
-  --wvr-btn-outline-info-active-background: var(--wvr-btn-outline-info-active-background-default);
-  --wvr-btn-outline-info-active-color: var(--wvr-btn-outline-info-active-color-default);
-  --wvr-btn-outline-info-active-text-decoration: var(--wvr-btn-outline-info-active-text-decoration-default);
-  // btn-outline-info
-  --wvr-btn-outline-info-background: var(--wvr-btn-outline-info-background-default);
-  --wvr-btn-outline-info-color: var(--wvr-btn-outline-info-color-default);
-  --wvr-btn-outline-info-text-decoration: var(--wvr-btn-outline-info-text-decoration-default);
-  // btn-outline-info-focus
-  --wvr-btn-outline-info-focus-box-shadow: var(--wvr-btn-outline-info-focus-box-shadow-default);
-  --wvr-btn-outline-info-focus-text-decoration: var(--wvr-btn-outline-info-focus-text-decoration-default);
-  // btn-outline-info-hover
-  --wvr-btn-outline-info-hover-background: var(--wvr-btn-outline-info-hover-background-default);
-  --wvr-btn-outline-info-hover-color: var(--wvr-btn-outline-info-hover-color-default);
-  --wvr-btn-outline-info-hover-text-decoration: var(--wvr-btn-outline-info-hover-text-decoration-default);
-
-  // btn-warning-active
-  --wvr-btn-warning-active-background: var(--wvr-btn-warning-active-background-default);
-  --wvr-btn-warning-active-color: var(--wvr-btn-warning-active-color-default);
-  --wvr-btn-warning-active-text-decoration: var(--wvr-btn-warning-active-text-decoration-default);
-  // btn-warning
-  --wvr-btn-warning-background: var(--wvr-btn-warning-background-default);
-  --wvr-btn-warning-color: var(--wvr-btn-warning-color-default);
-  --wvr-btn-warning-text-decoration: var(--wvr-btn-warning-text-decoration-default);
-  // btn-warning-focus
-  --wvr-btn-warning-focus-box-shadow: var(--wvr-btn-warning-focus-box-shadow-default);
-  --wvr-btn-warning-focus-text-decoration: var(--wvr-btn-warning-focus-text-decoration-default);
-  // btn-warning-hover
-  --wvr-btn-warning-hover-background: var(--wvr-btn-warning-hover-background-default);
-  --wvr-btn-warning-hover-color: var(--wvr-btn-warning-hover-color-default);
-  --wvr-btn-warning-hover-text-decoration: var(--wvr-btn-warning-hover-text-decoration-default);
-
-  // btn-outline-warning-active
-  --wvr-btn-outline-warning-active-background: var(--wvr-btn-outline-warning-active-background-default);
-  --wvr-btn-outline-warning-active-color: var(--wvr-btn-outline-warning-active-color-default);
-  --wvr-btn-outline-warning-active-text-decoration: var(--wvr-btn-outline-warning-active-text-decoration-default);
-  // btn-outline-warning
-  --wvr-btn-outline-warning-background: var(--wvr-btn-outline-warning-background-default);
-  --wvr-btn-outline-warning-color: var(--wvr-btn-outline-warning-color-default);
-  --wvr-btn-outline-warning-text-decoration: var(--wvr-btn-outline-warning-text-decoration-default);
-  // btn-outline-warning-focus
-  --wvr-btn-outline-warning-focus-box-shadow: var(--wvr-btn-outline-warning-focus-box-shadow-default);
-  --wvr-btn-outline-warning-focus-text-decoration: var(--wvr-btn-outline-warning-focus-text-decoration-default);
-  // btn-outline-warning-hover
-  --wvr-btn-outline-warning-hover-background: var(--wvr-btn-outline-warning-hover-background-default);
-  --wvr-btn-outline-warning-hover-color: var(--wvr-btn-outline-warning-hover-color-default);
-  --wvr-btn-outline-warning-hover-text-decoration: var(--wvr-btn-outline-warning-hover-text-decoration-default);
-
-  // btn-danger-active
-  --wvr-btn-danger-active-background: var(--wvr-btn-danger-active-background-default);
-  --wvr-btn-danger-active-color: var(--wvr-btn-danger-active-color-default);
-  --wvr-btn-danger-active-text-decoration: var(--wvr-btn-danger-active-text-decoration-default);
-  // btn-danger-
-  --wvr-btn-danger-background: var(--wvr-btn-danger-background-default);
-  --wvr-btn-danger-color: var(--wvr-btn-danger-color-default);
-  --wvr-btn-danger-text-decoration: var(--wvr-btn-danger-text-decoration-default);
-  // btn-danger-focus
-  --wvr-btn-danger-focus-box-shadow: var(--wvr-btn-danger-focus-box-shadow-default);
-  --wvr-btn-danger-focus-text-decoration: var(--wvr-btn-danger-focus-text-decoration-default);
-  // btn-danger-hover
-  --wvr-btn-danger-hover-background: var(--wvr-btn-danger-hover-background-default);
-  --wvr-btn-danger-hover-color: var(--wvr-btn-danger-hover-color-default);
-  --wvr-btn-danger-hover-text-decoration: var(--wvr-btn-danger-hover-text-decoration-default);
-
-  // btn-outline-danger-active
-  --wvr-btn-outline-danger-active-background: var(--wvr-btn-outline-danger-active-background-default);
-  --wvr-btn-outline-danger-active-color: var(--wvr-btn-outline-danger-active-color-default);
-  --wvr-btn-outline-danger-active-text-decoration: var(--wvr-btn-outline-danger-active-text-decoration-default);
-  // btn-outline-danger
-  --wvr-btn-outline-danger-background: var(--wvr-btn-outline-danger-background-default);
-  --wvr-btn--outline-danger-color: var(--wvr-btn--outline-danger-color-default);
-  --wvr-btn--outline-danger-text-decoration: var(--wvr-btn--outline-danger-text-decoration-default);
-  // btn-outline-danger-focus
-  --wvr-btn-outline-danger-focus-box-shadow: var(--wvr-btn-outline-danger-focus-box-shadow-default);
-  --wvr-btn-outline-danger-focus-text-decoration: var(--wvr-btn-outline-danger-focus-text-decoration-default);
-  // btn-outline-danger-hover
-  --wvr-btn-outline-danger-hover-background: var(--wvr-btn-outline-danger-hover-background-default);
-  --wvr-btn-outline-danger-hover-color: var(--wvr-btn-outline-danger-hover-color-default);
-  --wvr-btn-outline-danger-hover-text-decoration: var(--wvr-btn-outline-danger-hover-text-decoration-default);
-
-  // btn-light-active
-  --wvr-btn-light-active-background: var(--wvr-btn-light-active-background-default);
-  --wvr-btn-light-active-color: var(--wvr-btn-light-active-color-default);
-  --wvr-btn-light-active-text-decoration: var(--wvr-btn-light-active-text-decoration-default);
-  // btn-light
-  --wvr-btn-light-background: var(--wvr-btn-light-background-default);
-  --wvr-btn-light-color: var(--wvr-btn-light-color-default);
-  --wvr-btn-light-text-decoration: var(--wvr-btn-light-text-decoration-default);
-  // btn-light-focus
-  --wvr-btn-light-focus-box-shadow: var(--wvr-btn-light-focus-box-shadow-default);
-  --wvr-btn-light-focus-text-decoration: var(--wvr-btn-light-focus-text-decoration-default);
-  // btn-light-hover
-  --wvr-btn-light-hover-background: var(--wvr-btn-light-hover-background-default);
-  --wvr-btn-light-hover-color: var(--wvr-btn-light-hover-color-default);
-  --wvr-btn-light-hover-text-decoration: var(--wvr-btn-light-hover-text-decoration-default);
-
-  // btn-outline-light-active
-  --wvr-btn-outline-light-active-background: var(--wvr-btn-outline-light-active-background-default);
-  --wvr-btn-outline-light-active-color: var(--wvr-btn-outline-light-active-color-default);
-  --wvr-btn-outline-light-active-text-decoration: var(--wvr-btn-outline-light-active-text-decoration-default);
-  // btn-outline-light
-  --wvr-btn-outline-light-background: var(--wvr-btn-outline-light-background-default);
-  --wvr-btn-outline-light-color: var(--wvr-btn-outline-light-color-default);
-  --wvr-btn-outline-light-text-decoration: var(--wvr-btn-outline-light-text-decoration-default);
-  // btn-outline-light-focus
-  --wvr-btn-outline-light-focus-box-shadow: var(--wvr-btn-outline-light-focus-box-shadow-default);
-  --wvr-btn-outline-light-focus-text-decoration: var(--wvr-btn-outline-light-focus-text-decoration-default);
-  // btn-outline-light-hover
-  --wvr-btn-outline-light-hover-background: var(--wvr-btn-outline-light-hover-background-default);
-  --wvr-btn-outline-light-hover-color: var(--wvr-btn-outline-light-hover-color-default);
-  --wvr-btn-outline-light-hover-text-decoration: var(--wvr-btn-outline-light-hover-text-decoration-default);
-
-  // btn-dark-active
-  --wvr-btn-dark-active-background: var(--wvr-btn-dark-active-background-default);
-  --wvr-btn-dark-active-color: var(--wvr-btn-dark-active-color-default);
-  --wvr-btn-dark-active-text-decoration: var(--wvr-btn-dark-active-text-decoration-default);
-  // btn-dark
-  --wvr-btn-dark-background: var(--wvr-btn-dark-background-default);
-  --wvr-btn-dark-color: var(--wvr-btn-dark-color-default);
-  --wvr-btn-dark-text-decoration: var(--wvr-btn-dark-text-decoration-default);
-  // btn-dark-focus
-  --wvr-btn-dark-focus-box-shadow: var(--wvr-btn-dark-focus-box-shadow-default);
-  --wvr-btn-dark-focus-text-decoration: var(--wvr-btn-dark-focus-text-decoration-default);
-  // btn-dark-hover
-  --wvr-btn-dark-hover-background: var(--wvr-btn-dark-hover-background-default);
-  --wvr-btn-dark-hover-color: var(--wvr-btn-dark-hover-color-default);
-  --wvr-btn-dark-hover-text-decoration: var(--wvr-btn-dark-hover-text-decoration-default);
-
-  // btn-outline-dark-active
-  --wvr-btn-outline-dark-active-background: var(--wvr-btn-outline-dark-active-background-default);
-  --wvr-btn-outline-dark-active-color: var(--wvr-btn-outline-dark-active-color-default);
-  --wvr-btn-outline-dark-active-text-decoration: var(--wvr-btn-outline-dark-active-text-decoration-default);
-  // btn-outline-dark
-  --wvr-btn-outline-dark-background: var(--wvr-btn-outline-dark-background-default);
-  --wvr-btn-outline-dark-color: var(--wvr-btn-outline-dark-color-default);
-  --wvr-btn-outline-dark-text-decoration: var(--wvr-btn-outline-dark-text-decoration-default);
-  // btn-outline-dark-focus
-  --wvr-btn-outline-dark-focus-box-shadow: var(--wvr-btn-outline-dark-focus-box-shadow-default);
-  --wvr-btn-outline-dark-focus-text-decoration: var(--wvr-btn-outline-dark-focus-text-decoration-default);
-  // btn-outline-dark-hover
-  --wvr-btn-outline-dark-hover-background: var(--wvr-btn-outline-dark-hover-background-default);
-  --wvr-btn-outline-dark-hover-color: var(--wvr-btn-outline-dark-hover-color-default);
-  --wvr-btn-outline-dark-hover-text-decoration: var(--wvr-btn-outline-dark-hover-text-decoration-default);
-
-  // btn-link-active
-  --wvr-btn-link-active-background: var(--wvr-btn-link-active-background-default);
-  --wvr-btn-link-active-color: var(--wvr-btn-link-active-color-default);
-  --wvr-btn-link-active-text-decoration: var(--wvr-btn-link-active-text-decoration-default);
-  // btn-link
-  --wvr-btn-link-background : var(--wvr-btn-link-background-default);
-  --wvr-btn-link-color: var(--wvr-btn-link-color-default);
-  --wvr-btn-link-text-decoration: var(--wvr-btn-link-text-decoration-default);
-  // btn-link-focus
-  --wvr-btn-link-focus-box-shadow: var(--wvr-btn-link-focus-box-shadow-default);
-  --wvr-btn-link-focus-text-decoration: var(--wvr-btn-link-focus-text-decoration-default);
-  // btn-link-hover
-  --wvr-btn-link-hover-background: var(--wvr-btn-link-hover-background-default);
-  --wvr-btn-link-hover-color: var(--wvr-btn-link-hover-color-default);
-  --wvr-btn-link-hover-text-decoration: var(--wvr-btn-link-hover-text-decoration-default);
-
   button-wrapper {
     display: inline-block;
     overflow: hidden;
   }
 
   .wvr-button.btn {
-    border-radius: var(--wvr-btn-border-radius);
+    cursor: var(--wvr-btn-cursor-default);
     font-family: var(--wvr-btn-font-family-sans-serif);
     font-size: var(--wvr-btn-font-size);
     font-weight: var(--wvr-btn-font-weight);
@@ -529,545 +37,12 @@
     padding: var(--wvr-btn-padding);
     text-align: var(--wvr-btn-text-align);
     vertical-align: var(--wvr-btn-vertical-align);
-    border: var(--wvr-btn-border)
   }
 
   .wvr-button.btn:not(:disabled):not(.disabled) {
     cursor: var(--wvr-btn-cursor);
   }
 
-  .btn:focus {
-    outline: 0; //var(--wvr-btn-focus-outline);
-    text-decoration: none;
-  }
-
-  // btn-primary
-  .btn.btn-primary {
-    background: var(--wvr-btn-primary-background);
-    border-color: var(--wvr-btn-primary-background);
-    color: var(--wvr-btn-primary-color);
-    text-decoration: var(--wvr-btn-primary-text-decoration);
-  }
-
-  .btn.btn-primary:not(:disabled):not(.disabled).active,
-  .btn.btn-primary:not(:disabled):not(.disabled):active,
-  .btn.btn-primary.dropdown-toggle {
-    background: var(--wvr-btn-primary-active-background);
-    border-color: var(--wvr-btn-primary-active-background);
-    color: var(--wvr-btn-primary-active-color);
-    text-decoration: var(--wvr-btn-primary-active-text-decoration);
-  }
-
-  .btn.btn-primary.focus,
-  .btn.btn-primary:focus {
-    border-color: var(--wvr-btn-primary-active-background);
-    box-shadow: var(--wvr-btn-primary-focus-box-shadow);
-    text-decoration: var(--wvr-btn-primary-focus-text-decoration);
-  }
-
-  .btn.btn-primary:hover {
-    background: var(--wvr-btn-primary-hover-background);
-    border-color: var(--wvr-btn-primary-hover-background);
-    color: var(--wvr-btn-primary-hover-color);
-    text-decoration: var(--wvr-btn-primary-hover-text-decoration);
-  }
-
-  // btn-outline-primary
-  .btn.btn-outline-primary {
-    background: transparent;
-    border-color: transparent;
-    color: var(--wvr-btn-outline-primary-color);
-    text-decoration: var(--wvr-btn-outline-primary-text-decoration);
-  }
-
-  .btn.btn-outline-primary:not(:disabled):not(.disabled).active,
-  .btn.btn-outline-primary:not(:disabled):not(.disabled):active,
-  .btn.btn-outline-primary.dropdown-toggle {
-    background: var(--wvr-btn-outline-primary-active-background);
-    border-color: var(--wvr-btn-outline-primary-active-background);
-    color: var(--wvr-btn-outline-primary-active-color);
-    text-decoration: var(--wvr-btn-outline-primary-active-text-decoration);
-  }
-
-  .btn.btn-outline-primary.focus,
-  .btn.btn-outline-primary:focus {
-    border-color: var(--wvr-btn-outline-primary-active-background);
-    box-shadow: var(--wvr-btn-outline-primary-focus-box-shadow);
-    text-decoration: var(--wvr-btn-outline-primary-focus-text-decoration);
-  }
-
-  .btn.btn-outline-primary:hover {
-    background: var(--wvr-btn-outline-primary-hover-background);
-    border-color: var(--wvr-btn-outline-primary-hover-background);
-    color: var(--wvr-btn-outline-primary-hover-color);
-    text-decoration: var(--wvr-btn-outline-primary-hover-text-decoration);
-  }
-
-  // btn-secondary
-  .btn.btn-secondary {
-    background: var(--wvr-btn-secondary-background);
-    border-color: var(--wvr-btn-secondary-background);
-    color: var(--wvr-btn-secondary-color);
-    text-decoration: var(--wvr-btn-secondary-text-decoration);
-  }
-
-  .btn.btn-secondary:not(:disabled):not(.disabled).active,
-  .btn.btn-secondary:not(:disabled):not(.disabled):active,
-  .btn.btn-secondary.dropdown-toggle {
-    background: var(--wvr-btn-secondary-active-background);
-    border-color: var(--wvr-btn-secondary-active-background);
-    color: var(--wvr-btn-secondary-active-color);
-    text-decoration: var(--wvr-btn-secondary-active-text-decoration);
-  }
-
-  .btn.btn-secondary.focus,
-  .btn.btn-secondary:focus {
-    border-color: var(--wvr-btn-secondary-active-background);
-    box-shadow: var(--wvr-btn-secondary-focus-box-shadow);
-    text-decoration: var(--wvr-btn-secondary-focus-text-decoration);
-  }
-
-  .btn.btn-secondary:hover {
-    background: var(--wvr-btn-secondary-hover-background);
-    border-color: var(--wvr-btn-secondary-hover-background);
-    color: var(--wvr-btn-secondary-hover-color);
-    text-decoration: var(--wvr-btn-secondary-hover-text-decoration);
-  }
-
-  // btn-outline-secondary
-  .btn.btn.btn-outline-secondary {
-    background: var(--wvr-btn-outline-secondary-background);
-    border-color: var(--wvr-btn-outline-secondary-background);
-    color: var(--wvr-btn-outline-secondary-border);
-    text-decoration: var(--wvr-btn-outline-secondary-text-decoration);
-  }
-
-  .btn.btn-outline-secondary:not(:disabled):not(.disabled).active,
-  .btn.btn-outline-secondary:not(:disabled):not(.disabled):active,
-  .btn.btn-outline-secondary.dropdown-toggle {
-    background: var(--wvr-btn-outline-secondary-active-background);
-    border-color: var(--wvr-btn-outline-secondary-active-background);
-    color: var(--wvr-btn-outline-secondary-active-color);
-    text-decoration: var(--wvr-btn-outline-secondary-active-text-decoration);
-  }
-
-  .btn.btn-outline-secondary.focus,
-  .btn.btn-outline-secondary:focus {
-    border-color: var(--wvr-btn-outline-secondary-active-background);
-    box-shadow: var(--wvr-btn-outline-secondary-focus-box-shadow);
-    text-decoration: var(--wvr-btn-outline-secondary-focus-text-decoration);
-  }
-
-  .btn.btn-outline-secondary:hover {
-    background: var(--wvr-btn-outline-secondary-hover-background);
-    border-color: var(--wvr-btn-outline-secondary-hover-background);
-    color: var(--wvr-btn-outline-secondary-hover-color);
-    text-decoration: var(--wvr-btn-outline-secondary-hover-text-decoration);
-  }
-
-  // btn-success
-  .btn.btn-success {
-    background: var(--wvr-btn-success-background);
-    border-color: var(--wvr-btn-success-background);
-    color: var(--wvr-btn-success-color);
-    text-decoration: var(--wvr-btn-success-text-decoration);
-  }
-
-  .btn.btn-success:not(:disabled):not(.disabled).active,
-  .btn.btn-success:not(:disabled):not(.disabled):active,
-  .btn.btn-success.dropdown-toggle {
-    background: var(--wvr-btn-success-active-background);
-    border-color: var(--wvr-btn-success-active-background);
-    color: var(--wvr-btn-success-active-color);
-    text-decoration: var(--wvr-btn-success-active-text-decoration);
-  }
-
-  .btn.btn-success.focus,
-  .btn.btn-success:focus {
-    border-color: var(--wvr-btn-success-active-background);
-    box-shadow: var(--wvr-btn-success-focus-box-shadow);
-    text-decoration: var(--wvr-btn-success-focus-text-decoration);
-  }
-
-  .btn.btn-success:hover {
-    background: var(--wvr-btn-success-hover-background);
-    border-color: var(--wvr-btn-success-hover-background);
-    color: var(--wvr-btn-success-hover-color);
-    text-decoration: var(--wvr-btn-success-hover-text-decoration);
-  }
-
-  // btn-outline-success
-  .btn.btn-outline-success {
-    background: var(--wvr-btn-outline-success-background);
-    border-color: var(--wvr-btn-outline-success-background);
-    color: var(--wvr-btn-outline-success-color);
-    text-decoration: var(--wvr-btn-outline-success-text-decoration);
-  }
-
-  .btn.btn-outline-success:not(:disabled):not(.disabled).active,
-  .btn.btn-outline-success:not(:disabled):not(.disabled):active,
-  .btn.btn-outline-success.dropdown-toggle {
-    background: var(--wvr-btn-outline-success-active-background);
-    border-color: var(--wvr-btn-outline-success-active-background);
-    color: var(--wvr-btn-outline-success-active-color);
-    text-decoration: var(--wvr-btn-outline-success-active-text-decoration);
-  }
-
-  .btn.btn-outline-success.focus,
-  .btn.btn-outline-success:focus {
-    border-color: var(--wvr-btn-outline-success-active-background);
-    box-shadow: var(--wvr-btn-outline-success-focus-box-shadow);
-    text-decoration: var(--wvr-btn-outline-success-focus-text-decoration);
-  }
-
-  .btn.btn-outline-success:hover {
-    background: var(--wvr-btn-outline-success-hover-background);
-    border-color: var(--wvr-btn-outline-success-hover-background);
-    color: var(--wvr-btn-outline-success-hover-color);
-    text-decoration: var(--wvr-btn-outline-success-hover-text-decoration);
-  }
-
-  // btn-info
-  .btn.btn-info {
-    background: var(--wvr-btn-info-background);
-    border-color: var(--wvr-btn-info-background);
-    color: var(--wvr-btn-info-color);
-    text-decoration: var(--wvr-btn-info-text-decoration);
-  }
-
-  .btn.btn-info:not(:disabled):not(.disabled).active,
-  .btn.btn-info:not(:disabled):not(.disabled):active,
-  .btn.btn-info.dropdown-toggle {
-    background: var(--wvr-btn-info-active-background);
-    border-color: var(--wvr-btn-info-active-background);
-    color: var(--wvr-btn-info-active-color);
-    text-decoration: var(--wvr-btn-info-active-text-decoration);
-  }
-
-  .btn.btn-info.focus,
-  .btn.btn-info:focus {
-    border-color: var(--wvr-btn-info-active-background);
-    box-shadow: var(--wvr-btn-info-focus-box-shadow);
-    text-decoration: var(--wvr-btn-info-focus-text-decoration);
-  }
-
-  .btn.btn-info:hover {
-    background: var(--wvr-btn-info-hover-background);
-    border-color: var(--wvr-btn-info-hover-background);
-    color: var(--wvr-btn-info-hover-color);
-    text-decoration: var(--wvr-btn-info-hover-text-decoration);
-  }
-
-  // btn-outline-info
-  .btn.btn.btn-outline-info {
-    background: var(--wvr-btn-outline-info-background);
-    border-color: var(--wvr-btn-outline-info-background);
-    color: var(--wvr-btn-outline-info-color);
-    text-decoration: var(--wvr-btn-outline-info-text-decoration);
-  }
-
-  .btn.btn-outline-info:not(:disabled):not(.disabled).active,
-  .btn.btn-outline-info:not(:disabled):not(.disabled):active,
-  .btn.btn-outline-info.dropdown-toggle {
-    background: var(--wvr-btn-outline-info-active-background);
-    border-color: var(--wvr-btn-outline-info-active-background);
-    color: var(--wvr-btn-outline-info-active-color);
-    text-decoration: var(--wvr-btn-outline-info-active-text-decoration);
-  }
-
-  .btn.btn-outline-info.focus,
-  .btn.btn-outline-info:focus {
-    border-color: var(--wvr-btn-outline-info-active-background);
-    box-shadow: var(--wvr-btn-outline-info-focus-box-shadow);
-    text-decoration: var(--wvr-btn-outline-info-focus-text-decoration);
-  }
-
-  .btn.btn-outline-info:hover {
-    background: var(--wvr-btn-outline-info-hover-background);
-    border-color: var(--wvr-btn-outline-info-hover-background);
-    color: var(--wvr-btn-outline-info-hover-color);
-    text-decoration: var(--wvr-btn-outline-info-hover-text-decoration);
-  }
-
-  // btn-warning
-  .btn.btn-warning {
-    background: var(--wvr-btn-warning-background);
-    border-color: var(--wvr-btn-warning-background);
-    color: var(--wvr-btn-warning-color);
-    text-decoration: var(--wvr-btn-warning-text-decoration);
-  }
-
-  .btn.btn-warning:not(:disabled):not(.disabled).active,
-  .btn.btn-warning:not(:disabled):not(.disabled):active,
-  .btn.btn-warning.dropdown-toggle {
-    background: var(--wvr-btn-warning-active-background);
-    border-color: var(--wvr-btn-warning-active-background);
-    color: var(--wvr-btn-warning-active-color);
-    text-decoration: var(--wvr-btn-warning-active-text-decoration);
-  }
-
-  .btn.btn-warning.focus,
-  .btn.btn-warning:focus {
-    border-color: var(--wvr-btn-warning-active-background);
-    box-shadow: var(--wvr-btn-warning-focus-box-shadow);
-    text-decoration: var(--wvr-btn-warning-focus-text-decoration);
-  }
-
-  .btn.btn-warning:hover {
-    background: var(--wvr-btn-warning-hover-background);
-    border-color: var(--wvr-btn-warning-hover-background);
-    color: var(--wvr-btn-warning-hover-color);
-    text-decoration: var(--wvr-btn-warning-hover-text-decoration);
-  }
-
-  // btn-outline-warning
-  .btn.btn-outline-warning {
-    background: var(--wvr-btn-outline-warning-background);
-    border-color: var(--wvr-btn-outline-warning-background);
-    color: var(--wvr-btn-outline-warning-color);
-    text-decoration: var(--wvr-btn-outline-warning-text-decoration);
-  }
-
-  .btn.btn-outline-warning:not(:disabled):not(.disabled).active,
-  .btn.btn-outline-warning:not(:disabled):not(.disabled):active,
-  .btn.btn-outline-warning.dropdown-toggle {
-    background: var(--wvr-btn-outline-warning-active-background);
-    border-color: var(--wvr-btn-outline-warning-active-background);
-    color: var(--wvr-btn-outline-warning-active-color); //#212529;
-    text-decoration: var(--wvr-btn-outline-warning-active-text-decoration);
-  }
-
-  .btn.btn-outline-warning.focus,
-  .btn.btn-outline-warning:focus {
-    border-color: var(--wvr-btn-outline-warning-active-background);
-    box-shadow: var(--wvr-btn-outline-warning-focus-box-shadow);
-    text-decoration: var(--wvr-btn-outline-warning-focus-text-decoration);
-  }
-
-  .btn-outline-warning:hover {
-    background: var(--wvr-btn-outline-warning-hover-background);
-    border-color: var(--wvr-btn-outline-warning-hover-background);
-    color: var(--wvr-btn-outline-warning-hover-color);
-    text-decoration: var(--wvr-btn-outline-warning-hover-text-decoration);
-  }
-
-  // btn-danger
-  .btn.btn-danger {
-    background: var(--wvr-btn-danger-background);
-    border-color: var(--wvr-btn-danger-background);
-    color: var(--wvr-btn-danger-color);
-    text-decoration: var(--wvr-btn-danger-text-decoration);
-  }
-
-  .btn.btn-danger:not(:disabled):not(.disabled).active,
-  .btn.btn-danger:not(:disabled):not(.disabled):active,
-  .btn.btn-danger.dropdown-toggle {
-    background: var(--wvr-btn-danger-active-background);
-    border-color: var(--wvr-btn-danger-active-background);
-    color: var(--wvr-btn-danger-active-color);
-    text-decoration: var(--wvr-btn-danger-active-text-decoration);
-  }
-
-  .btn.btn-danger.focus,
-  .btn.btn-danger:focus {
-    border-color: var(--wvr-btn-danger-active-background);
-    box-shadow: var(--wvr-btn-danger-focus-box-shadow);
-    text-decoration: var(--wvr-btn-danger-focus-text-decoration);
-  }
-
-  .btn.btn-danger:hover {
-    background: var(--wvr-btn-danger-hover-background);
-    border-color: var(--wvr-btn-danger-hover-background);
-    color: var(--wvr-btn-danger-hover-color);
-    text-decoration: var(--wvr-btn-danger-hover-text-decoration);
-  }
-
-  // btn-outline-danger
-  .btn.btn-outline-danger {
-    background: var(--wvr-btn-outline-danger-background);
-    border-color: var(--wvr-btn--outline-danger-background);
-    color: var(--wvr-btn--outline-danger-color);
-    text-decoration: var(--wvr-btn--outline-danger-text-decoration);
-  }
-
-  .btn.btn-outline-danger:not(:disabled):not(.disabled).active,
-  .btn.btn-outline-danger:not(:disabled):not(.disabled):active,
-  .btn.btn-outline-danger.dropdown-toggle {
-    background: var(--wvr-btn-outline-danger-active-background);
-    border-color: var(--wvr-btn-outline-danger-active-background);
-    color: var(--wvr-btn-outline-danger-active-color);
-    text-decoration: var(--wvr-btn-outline-danger-active-text-decoration);
-  }
-
-  .btn.btn-outline-danger.focus,
-  .btn.btn-outline-danger:focus {
-    border-color: var(--wvr-btn-outline-danger-active-background);
-    box-shadow: var(--wvr-btn-outline-danger-focus-box-shadow);
-    text-decoration: var(--wvr-btn-outline-danger-focus-text-decoration);
-  }
-
-  .btn.btn-outline-danger:hover {
-    background: var(--wvr-btn-outline-danger-hover-background);
-    border-color: var(--wvr-btn-outline-danger-hover-background);
-    color: var(--wvr-btn-outline-danger-hover-color);
-    text-decoration: var(--wvr-btn-outline-danger-hover-text-decoration);
-  }
-
-  // btn-light
-  .btn.btn-light {
-    background: var(--wvr-btn-light-background);
-    border-color: var(--wvr-btn-light-background);
-    color: var(--wvr-btn-light-color);
-    text-decoration: var(--wvr-btn-light-text-decoration);
-  }
-
-  .btn.btn-light:not(:disabled):not(.disabled).active,
-  .btn.btn-light:not(:disabled):not(.disabled):active,
-  .btn.btn-light.dropdown-toggle {
-    background: var(--wvr-btn-light-active-background);
-    border-color: var(--wvr-btn-light-active-background);
-    color: var(--wvr-btn-light-active-color);
-    text-decoration: var(--wvr-btn-light-active-text-decoration);
-  }
-
-  .btn.btn-light.focus,
-  .btn.btn-light:focus {
-    border-color: var(--wvr-btn-light-active-background);
-    box-shadow: var(--wvr-btn-light-focus-box-shadow);
-    text-decoration: var(--wvr-btn-light-focus-text-decoration);
-  }
-
-  .btn-light:hover {
-    background: var(--wvr-btn-light-hover-background);// #e2e6ea;
-    border-color: var(--wvr-btn-light-hover-background);// #dae0e5;
-    color: var(--wvr-btn-light-hover-color);
-    text-decoration: var(--wvr-btn-light-hover-text-decoration);
-  }
-
-  // btn-outline-light
-  .btn.btn-outline-light {
-    background: var(--wvr-btn-outline-light-background);
-    border-color: var(--wvr-btn-outline-light-background);
-    color: var(--wvr-btn-outline-light-color);
-    text-decoration: var(--wvr-btn-outline-light-text-decoration);
-  }
-
-  .btn.btn-outline-light:not(:disabled):not(.disabled).active,
-  .btn.btn-outline-light:not(:disabled):not(.disabled):active,
-  .btn.btn-outline-light.dropdown-toggle {
-    background: var(--wvr-btn-outline-light-active-background);
-    border-color: var(--wvr-btn-outline-light-active-background);
-    color: var(--wvr-btn-outline-light-active-color);
-    text-decoration: var(--wvr-btn-outline-light-active-text-decoration);
-  }
-
-  .btn.btn-outline-light.focus,
-  .btn.btn-outline-light:focus {
-    border-color: var(--wvr-btn-outline-light-active-background);
-    box-shadow: var(--wvr-btn-outline-light-focus-box-shadow);
-    text-decoration: var(--wvr-btn-outline-light-focus-text-decoration);
-  }
-
-  .btn-outline-light:hover {
-    background: var(--wvr-btn-outline-light-hover-background);
-    border-color: var(--wvr-btn-outline-light-active-background);
-    color: var(--wvr-btn-outline-light-hover-color);
-    text-decoration: var(--wvr-btn-outline-light-hover-text-decoration);
-  }
-
-  // btn-dark
-  .btn.btn-dark {
-    background: var(--wvr-btn-dark-background);
-    border-color: var(--wvr-btn-dark-background);
-    color: var(--wvr-btn-dark-color);
-    text-decoration: var(--wvr-btn-dark-text-decoration);
-  }
-
-  .btn.btn-dark:not(:disabled):not(.disabled).active,
-  .btn.btn-dark:not(:disabled):not(.disabled):active,
-  .btn.btn-dark.dropdown-toggle {
-    background: var(--wvr-btn-dark-active-background);
-    border-color: var(--wvr-btn-dark-active-background);
-    color: var(--wvr-btn-dark-active-color);
-    text-decoration: var(--wvr-btn-dark-active-text-decoration);
-  }
-
-  .btn.btn-dark.focus,
-  .btn.btn-dark:focus {
-    border-color: var(--wvr-btn-dark-active-background);
-    box-shadow: var(--wvr-btn-dark-focus-box-shadow);
-    text-decoration: var(--wvr-btn-dark-focus-text-decoration);
-  }
-
-  .btn.btn-dark:hover {
-    background: var(--wvr-btn-dark-hover-background);
-    border-color: var(--wvr-btn-dark-hover-background);
-    color: var(--wvr-btn-dark-hover-color);
-    text-decoration: var(--wvr-btn-dark-hover-text-decoration);
-  }
-
-  // btn-outline-dark
-  .btn.btn-outline-dark {
-    background: var(--wvr-btn-outline-dark-background);
-    border-color: var(--wvr-btn-outline-dark-background);
-    color: var(--wvr-btn-outline-dark-color);
-    text-decoration: var(--wvr-btn-outline-dark-text-decoration);
-  }
-
-  .btn-outline-dark:not(:disabled):not(.disabled).active,
-  .btn-outline-dark:not(:disabled):not(.disabled):active,
-  .btn-outline-dark.dropdown-toggle {
-    background: var(--wvr-btn-outline-dark-active-background);
-    border-color: var(--wvr-btn-outline-dark-active-background);
-    color: var(--wvr-btn-outline-dark-active-color);
-    text-decoration: var(--wvr-btn-outline-dark-active-text-decoration);
-  }
-
-  .btn.btn-outline-dark.focus,
-  .btn.btn-outline-dark:focus {
-    border-color: var(--wvr-btn-outline-dark-active-background);
-    box-shadow: var(--wvr-btn-outline-dark-focus-box-shadow);
-    text-decoration: var(--wvr-btn-outline-dark-focus-text-decoration);
-  }
-
-  .btn.btn-outline-dark:hover {
-    background: var(--wvr-btn-outline-dark-hover-background);
-    border: var(--wvr-btn-outline-dark-hover-border);
-    color: var(--wvr-btn-outline-dark-hover-color);
-    text-decoration: var(--wvr-btn-outline-dark-hover-text-decoration);
-  }
-
-  // btn-link
-  .btn.btn-link {
-    background: var(--wvr-btn-link-background);
-    border-color: var(--wvr-btn-link-background);
-    color: var(--wvr-btn-link-color);
-    text-decoration: var(--wvr-btn-link-text-decoration);
-  }
-
-  .btn.btn-link.focus,
-  .btn.btn-link:focus {
-    border-color: var(--wvr-btn-link-background);
-    box-shadow: var(--wvr-btn-link-focus-box-shadow);
-    text-decoration: var(--wvr-btn-link-focus-text-decoration);
-  }
-
-  .btn.btn-link:hover {
-    background: var(--wvr-btn-link-hover-background);
-    border-color: var(--wvr-btn-link-hover-background);
-    color: var(--wvr-btn-link-hover-color);
-    text-decoration: var(--wvr-btn-link-hover-text-decoration);
-  }
-
-  .btn.btn-link:not(:disabled):not(.disabled).active,
-  .btn.btn-link:not(:disabled):not(.disabled):active,
-  .btn.btn-link.dropdown-toggle {
-    background: var(--wvr-btn-link-active-background);
-    border-color: var(--wvr-btn-link-active-background);
-    color: var(--wvr-btn-link-active-color);
-    text-decoration: var(--wvr-btn-link-active-text-decoration);
-  }
-
   .btn {
     ::ng-deep {
       wvre-icon {
diff --git a/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.spec.ts b/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.spec.ts
index 173b2d1b4..4a34b84f4 100644
--- a/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.spec.ts
@@ -1,18 +1,49 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { StoreModule } from '@ngrx/store';
-import { metaReducers, ROOT_REDUCER } from '../core/store';
+import { provideMockStore } from '@ngrx/store/testing';
+import { APP_CONFIG, testAppConfig } from '../shared/config';
 import { WvrButtonComponent } from './wvr-button.component';
 
+@Component({
+  selector: 'wvr-button-host-component',
+  // tslint:disable-next-line: component-max-inline-declarations
+  template:  `<wvr-button-component [themeVariant]="'primary'" [btnType]="button" [btnSize]="small" [background]="'magenta'"
+                [backgroundActive]="yellow" [backgroundHover]="green" [borderColor]="'black'" [borderActive]="'black'"
+                [borderHover]="'red'" [borderFocus]="'black'" [boxShadowFocus]="teal"
+                [color]="green" [colorActive]="yellow" [colorHover]="brown">
+              </wvr-button-component>
+              `})
+class WvrButtonHostComponent {
+  @ViewChild(WvrButtonComponent) wvrButtonComponent: WvrButtonComponent;
+}
+
 describe('WvrButtonComponent', () => {
+  const initialState = { theme: {
+    themes: {}
+  }};
   let component: WvrButtonComponent;
   let fixture: ComponentFixture<WvrButtonComponent>;
 
-  beforeEach(async(() => {
+  let hostComponent: WvrButtonHostComponent;
+  let hostFixture: ComponentFixture<WvrButtonHostComponent>;
+
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [BrowserAnimationsModule, StoreModule.forRoot(ROOT_REDUCER, { metaReducers })],
-      declarations: [WvrButtonComponent],
+      imports: [
+        BrowserAnimationsModule
+      ],
+      providers: [
+        {
+          provide: APP_CONFIG,
+          useValue: testAppConfig
+        },
+        provideMockStore({initialState})
+      ],
+      declarations: [
+        WvrButtonHostComponent,
+        WvrButtonComponent
+      ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     })
     .compileComponents();
@@ -21,6 +52,11 @@ describe('WvrButtonComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(WvrButtonComponent);
     component = fixture.componentInstance;
+
+    hostFixture = TestBed.createComponent(WvrButtonHostComponent);
+    hostComponent = hostFixture.componentInstance;
+
+    hostFixture.detectChanges();
     fixture.detectChanges();
   });
 
@@ -29,14 +65,100 @@ describe('WvrButtonComponent', () => {
       .toBeTruthy();
   });
 
-  it("should have as btnClass 'primary'", () => {
-    expect(component.btnClass)
+  it("should have as themeVariant 'primary'", () => {
+    expect(component.themeVariant)
       .toEqual('primary');
   });
 
-  it("should have as btnType as 'button'", () => {
-    expect(component.wvrBtnType)
+  it("should have as themeVariant as 'button'", () => {
+    expect(component.btnType)
       .toEqual('button');
   });
 
+  it('should set background', () => {
+    const elem = component._eRef.nativeElement;
+    component.applyThemeOverride('--primary-button-bg', 'magenta');
+    expect(component.themeOverrides[elem.style[0]])
+    .toEqual(elem.style.getPropertyValue('--primary-button-bg'));
+    hostComponent.wvrButtonComponent.applyThemeOverride('--primary-button-bg', 'yellow');
+    expect(hostComponent.wvrButtonComponent.themeOverrides[hostComponent.wvrButtonComponent._eRef.nativeElement.style[0]])
+    .toEqual('yellow');
+  });
+
+  it('should set active background', () => {
+    const elem = component._eRef.nativeElement;
+    component.applyThemeOverride('--primary-button-active-bg', 'yellow');
+    expect(component.themeOverrides[elem.style[0]])
+    .toEqual(elem.style.getPropertyValue('--primary-button-active-bg'));
+  });
+
+  it('should set hover background', () => {
+    const elem = component._eRef.nativeElement;
+    component.applyThemeOverride('--primary-button-hover-bg', 'green');
+    expect(component.themeOverrides[elem.style[0]])
+    .toEqual(elem.style.getPropertyValue('--primary-button-hover-bg'));
+  });
+
+  it('should set border color', () => {
+    const elem = component._eRef.nativeElement;
+    component.applyThemeOverride('--primary-button-border', 'black');
+    expect(component.themeOverrides[elem.style[0]])
+    .toEqual(elem.style.getPropertyValue('--primary-button-border'));
+  });
+
+  it('should set border color in active state', () => {
+    const elem = component._eRef.nativeElement;
+    component.applyThemeOverride('--primary-button-active-border', 'black');
+    expect(component.themeOverrides[elem.style[0]])
+    .toEqual(elem.style.getPropertyValue('--primary-button-active-border'));
+  });
+
+  it('should set button border color in hover state', () => {
+    const elem = component._eRef.nativeElement;
+    component.applyThemeOverride('--primary-button-hover-border', 'red');
+    expect(component.themeOverrides[elem.style[0]])
+    .toEqual(elem.style.getPropertyValue('--primary-button-hover-border'));
+  });
+
+  it('should set button border in focus state', () => {
+    const elem = component._eRef.nativeElement;
+    component.applyThemeOverride('--primary-button-focus-border', 'black');
+    expect(component.themeOverrides[elem.style[0]])
+    .toEqual(elem.style.getPropertyValue('--primary-button-focus-border'));
+  });
+
+  it('should set box shadow color in focus state', () => {
+    const elem = component._eRef.nativeElement;
+    component.applyThemeOverride('--primary-button-focus-box-shadow', 'teal');
+    expect(component.themeOverrides[elem.style[0]])
+    .toEqual(elem.style.getPropertyValue('--primary-button-focus-box-shadow'));
+  });
+
+  it('should set button color', () => {
+    const elem = component._eRef.nativeElement;
+    component.applyThemeOverride('--primary-button-color', 'green');
+    expect(component.themeOverrides[elem.style[0]])
+    .toEqual(elem.style.getPropertyValue('--primary-button-color'));
+    hostComponent.wvrButtonComponent.applyThemeOverride('--primary-button-color', 'yellow');
+    expect(hostComponent.wvrButtonComponent.themeOverrides[hostComponent.wvrButtonComponent._eRef.nativeElement.style[0]])
+    .toEqual('magenta');
+  });
+
+  it('should set button color in active state', () => {
+    const elem = component._eRef.nativeElement;
+    component.applyThemeOverride('--primary-button-active-color', 'yellow');
+    expect(component.themeOverrides[elem.style[0]])
+    .toEqual(elem.style.getPropertyValue('--primary-button-active-color'));
+    hostComponent.wvrButtonComponent.applyThemeOverride('--primary-button-active-color', 'green');
+    expect(hostComponent.wvrButtonComponent.themeOverrides[hostComponent.wvrButtonComponent._eRef.nativeElement.style[0]])
+    .toEqual('magenta');
+  });
+
+  it('should set button color in hover state', () => {
+    const elem = component._eRef.nativeElement;
+    component.applyThemeOverride('--primary-button-hover-color', 'yellow');
+    expect(component.themeOverrides[elem.style[0]])
+    .toEqual(elem.style.getPropertyValue('--primary-button-hover-color'));
+  });
+
 });
diff --git a/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.ts b/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.ts
index c87390fe3..4f84088ef 100644
--- a/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.ts
+++ b/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.ts
@@ -1,8 +1,5 @@
 import { Component, HostBinding, Injector, Input } from '@angular/core';
-import { Observable } from 'rxjs';
-import * as ManifestActions from '../core/manifest/manifest.actions';
-import * as rootStore from '../core/store';
-import { WvrSelect } from '../shared/utility/decorators.utilty';
+import { ThemeVariantName } from '../shared/theme';
 import { WvrBaseComponent } from '../shared/wvr-base.component';
 
 @Component({
@@ -13,331 +10,87 @@ import { WvrBaseComponent } from '../shared/wvr-base.component';
 export class WvrButtonComponent extends WvrBaseComponent {
 
   /** Used to define the class type for button component.  */
-  @Input() btnClass: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link' |
-    'outline-primary' | 'outline-secondary' | 'outline-success' | 'outline-danger' | 'outline-warning' | 'outline-info' | 'outline-light' | 'outline-dark' | 'outline-link' = 'primary';
+  @Input() themeVariant: ThemeVariantName = 'primary';
 
   /** Used to define the size for button component.  */
   @Input() btnSize: 'large' | 'small' | 'block';
 
   /** Used to define the type of a button.  */
-  @Input() wvrBtnType: 'button' | 'checkbox' | 'radio' | 'reset' | 'submit' = 'button';
+  @Input() btnType: 'button' | 'checkbox' | 'radio' | 'reset' | 'submit' | 'link' = 'button';
 
   /** Allows for the button component to be an anchor tag component if href property present. */
   @Input() href: string;
 
   /** Allows for the override of background */
-  // tslint:disable-next-line: prefer-inline-decorator
-  @HostBinding('style.--wvr-btn-primary-background')
-  @HostBinding('style.--wvr-btn-outline-primary-background')
-  @HostBinding('style.--wvr-btn-secondary-background')
-  @HostBinding('style.--wvr-btn-outline-secondary-background')
-  @HostBinding('style.--wvr-btn-success-background')
-  @HostBinding('style.--wvr-btn-outline-success-background')
-  @HostBinding('style.--wvr-btn-danger-background')
-  @HostBinding('style.--wvr-btn-outline-danger-background')
-  @HostBinding('style.--wvr-btn-warning-background')
-  @HostBinding('style.--wvr-btn-outline-warning-background')
-  @HostBinding('style.--wvr-btn-info-background')
-  @HostBinding('style.--wvr-btn-outline-info-background')
-  @HostBinding('style.--wvr-btn-light-background')
-  @HostBinding('style.--wvr-btn-outline-light-background')
-  @HostBinding('style.--wvr-btn-dark-background')
-  @HostBinding('style.--wvr-btn-outline-dark-background')
-  @HostBinding('style.--wvr-btn-link-background')
-  @Input() background;
+  @Input() set background(value: string) {
+    this.applyThemeOverride(`--${this.themeVariant}-button-bg`, value);
+  }
 
   /** Allows for the override of active background */
-  // tslint:disable-next-line: prefer-inline-decorator
-  @HostBinding('style.--wvr-btn-primary-active-background')
-  @HostBinding('style.--wvr-btn-outline-primary-active-background')
-  @HostBinding('style.--wvr-btn-secondary-active-background')
-  @HostBinding('style.--wvr-btn-outline-secondary-active-background')
-  @HostBinding('style.--wvr-btn-success-active-background')
-  @HostBinding('style.--wvr-btn-outline-success-active-background')
-  @HostBinding('style.--wvr-btn-danger-active-background')
-  @HostBinding('style.--wvr-btn-outline-danger-active-background')
-  @HostBinding('style.--wvr-btn-warning-active-background')
-  @HostBinding('style.--wvr-btn-outline-warning-active-background')
-  @HostBinding('style.--wvr-btn-info-active-background')
-  @HostBinding('style.--wvr-btn-outline-info-active-background')
-  @HostBinding('style.--wvr-btn-light-active-background')
-  @HostBinding('style.--wvr-btn-outline-light-active-background')
-  @HostBinding('style.--wvr-btn-dark-active-background')
-  @HostBinding('style.--wvr-btn-outline-dark-active-background')
-  @HostBinding('style.--wvr-btn-link-active-background')
-  @Input() backgroundActive;
+  @Input() set backgroundActive(value: string) {
+    this.applyThemeOverride(`--${this.themeVariant}-button-active-bg`, value);
+  }
 
   /** Allows for the override of hover background */
-  // tslint:disable-next-line: prefer-inline-decorator
-  @HostBinding('style.--wvr-btn-primary-hover-background')
-  @HostBinding('style.--wvr-btn-outline-primary-hover-background')
-  @HostBinding('style.--wvr-btn-secondary-hover-background')
-  @HostBinding('style.--wvr-btn-outline-secondary-hover-background')
-  @HostBinding('style.--wvr-btn-success-hover-background')
-  @HostBinding('style.--wvr-btn-outline-success-hover-background')
-  @HostBinding('style.--wvr-btn-danger-hover-background')
-  @HostBinding('style.--wvr-btn-outline-danger-hover-background')
-  @HostBinding('style.--wvr-btn-warning-hover-background')
-  @HostBinding('style.--wvr-btn-outline-warning-hover-background')
-  @HostBinding('style.--wvr-btn-info-hover-background')
-  @HostBinding('style.--wvr-btn-outline-info-hover-background')
-  @HostBinding('style.--wvr-btn-light-hover-background')
-  @HostBinding('style.--wvr-btn-outline-light-hover-background')
-  @HostBinding('style.--wvr-btn-dark-hover-background')
-  @HostBinding('style.--wvr-btn-outline-dark-hover-background')
-  @HostBinding('style.--wvr-btn-link-hover-background')
-  @Input() backgroundHover;
+  @Input() set backgroundHover(value: string) {
+    this.applyThemeOverride(`--${this.themeVariant}-button-hover-bg`, value);
+  }
 
   /** Allows for the override of border */
-  // tslint:disable-next-line: prefer-inline-decorator
-  @HostBinding('style.--wvr-btn-primary-border')
-  @HostBinding('style.--wvr-btn-outline-primary-border')
-  @HostBinding('style.--wvr-btn-secondary-border')
-  @HostBinding('style.--wvr-btn-outline-secondary-border')
-  @HostBinding('style.--wvr-btn-success-border')
-  @HostBinding('style.--wvr-btn-outline-success-border')
-  @HostBinding('style.--wvr-btn-danger-border')
-  @HostBinding('style.--wvr-btn-outline-danger-border')
-  @HostBinding('style.--wvr-btn-warning-border')
-  @HostBinding('style.--wvr-btn-outline-warning-border')
-  @HostBinding('style.--wvr-btn-info-border')
-  @HostBinding('style.--wvr-btn-outline-info-border')
-  @HostBinding('style.--wvr-btn-light-border')
-  @HostBinding('style.--wvr-btn-outline-light-border')
-  @HostBinding('style.--wvr-btn-dark-border')
-  @HostBinding('style.--wvr-btn-outline-dark-border')
-  @HostBinding('style.--wvr-btn-link-border')
-  @Input() borderColor;
+  @Input() set borderColor(value: string) {
+    this.applyThemeOverride(`--${this.themeVariant}-button-border`, value);
+  }
 
   /** Allows for the override of active border */
-  // tslint:disable-next-line: prefer-inline-decorator
-  @HostBinding('style.--wvr-btn-primary-active-border')
-  @HostBinding('style.--wvr-btn-outline-primary-active-border')
-  @HostBinding('style.--wvr-btn-secondary-active-border')
-  @HostBinding('style.--wvr-btn-outline-secondary-active-border')
-  @HostBinding('style.--wvr-btn-success-active-border')
-  @HostBinding('style.--wvr-btn-outline-success-active-border')
-  @HostBinding('style.--wvr-btn-danger-active-border')
-  @HostBinding('style.--wvr-btn-outline-danger-active-border')
-  @HostBinding('style.--wvr-btn-warning-active-border')
-  @HostBinding('style.--wvr-btn-outline-warning-active-border')
-  @HostBinding('style.--wvr-btn-info-active-border')
-  @HostBinding('style.--wvr-btn-outline-info-active-border')
-  @HostBinding('style.--wvr-btn-light-active-border')
-  @HostBinding('style.--wvr-btn-outline-light-active-border')
-  @HostBinding('style.--wvr-btn-dark-active-border')
-  @HostBinding('style.--wvr-btn-outline-dark-active-border')
-  @HostBinding('style.--wvr-btn-link-active-border')
-  @Input() borderActive;
+  @Input() set borderActive(value: string) {
+    this.applyThemeOverride(`--${this.themeVariant}-button-active-border`, value);
+  }
 
   /** Allows for the override of hover border */
-  // tslint:disable-next-line: prefer-inline-decorator
-  @HostBinding('style.--wvr-btn-primary-hover-border')
-  @HostBinding('style.--wvr-btn-outline-primary-hover-border')
-  @HostBinding('style.--wvr-btn-secondary-hover-border')
-  @HostBinding('style.--wvr-btn-outline-secondary-hover-border')
-  @HostBinding('style.--wvr-btn-success-hover-border')
-  @HostBinding('style.--wvr-btn-outline-success-hover-border')
-  @HostBinding('style.--wvr-btn-danger-hover-border')
-  @HostBinding('style.--wvr-btn-outline-danger-hover-border')
-  @HostBinding('style.--wvr-btn-warning-hover-border')
-  @HostBinding('style.--wvr-btn-outline-warning-hover-border')
-  @HostBinding('style.--wvr-btn-info-hover-border')
-  @HostBinding('style.--wvr-btn-outline-info-hover-border')
-  @HostBinding('style.--wvr-btn-light-hover-border')
-  @HostBinding('style.--wvr-btn-outline-light-hover-border')
-  @HostBinding('style.--wvr-btn-dark-hover-border')
-  @HostBinding('style.--wvr-btn-outline-dark-hover-border')
-  @HostBinding('style.--wvr-btn-link-hover-border')
-  @Input() borderHover;
+  @Input() set borderHover(value: string) {
+    this.applyThemeOverride(`--${this.themeVariant}-button-hover-border`, value);
+  }
 
   /** Allows for the override of button border in focus state */
-  // tslint:disable-next-line: prefer-inline-decorator
-  @HostBinding('style.--wvr-btn-primary-focus-border')
-  @HostBinding('style.--wvr-btn-outline-primary-focus-border')
-  @HostBinding('style.--wvr-btn-secondary-focus-border')
-  @HostBinding('style.--wvr-btn-outline-secondary-focus-border')
-  @HostBinding('style.--wvr-btn-success-focus-border')
-  @HostBinding('style.--wvr-btn-outline-success-focus-border')
-  @HostBinding('style.--wvr-btn-danger-focus-border')
-  @HostBinding('style.--wvr-btn-outline-danger-focus-border')
-  @HostBinding('style.--wvr-btn-warning-focus-border')
-  @HostBinding('style.--wvr-btn-outline-warning-focus-border')
-  @HostBinding('style.--wvr-btn-info-focus-border')
-  @HostBinding('style.--wvr-btn-outline-info-focus-border')
-  @HostBinding('style.--wvr-btn-light-focus-border')
-  @HostBinding('style.--wvr-btn-outline-light-focus-border')
-  @HostBinding('style.--wvr-btn-dark-focus-border')
-  @HostBinding('style.--wvr-btn-outline-dark-focus-border')
-  @HostBinding('style.--wvr-btn-link-focus-border')
-  @Input() borderFocus;
+  @Input() set borderFocus(value: string) {
+    this.applyThemeOverride(`--${this.themeVariant}-button-focus-border`, value);
+  }
 
   /** Allows for override of box-shadow propery when the button is in focus state */
-  // tslint:disable-next-line: prefer-inline-decorator
-  @HostBinding('style.--wvr-btn-primary-focus-box-shadow')
-  @HostBinding('style.--wvr-btn-outline-primary-focus-box-shadow')
-  @HostBinding('style.--wvr-btn-secondary-focus-box-shadow')
-  @HostBinding('style.--wvr-btn-outline-secondary-focus-box-shadow')
-  @HostBinding('style.--wvr-btn-success-focus-box-shadow')
-  @HostBinding('style.--wvr-btn-outline-success-focus-box-shadow')
-  @HostBinding('style.--wvr-btn-danger-focus-box-shadow')
-  @HostBinding('style.--wvr-btn-outline-danger-focus-box-shadow')
-  @HostBinding('style.--wvr-btn-warning-focus-box-shadow')
-  @HostBinding('style.--wvr-btn-outline-warning-focus-box-shadow')
-  @HostBinding('style.--wvr-btn-info-focus-box-shadow')
-  @HostBinding('style.--wvr-btn-outline-info-focus-box-shadow')
-  @HostBinding('style.--wvr-btn-light-focus-box-shadow')
-  @HostBinding('style.--wvr-btn-outline-light-focus-box-shadow')
-  @HostBinding('style.--wvr-btn-dark-focus-box-shadow')
-  @HostBinding('style.--wvr-btn-outline-dark-focus-box-shadow')
-  @HostBinding('style.--wvr-btn-link-focus-box-shadow')
-  @Input() boxShadowFocus;
+  @Input() set boxShadowFocus(value: string) {
+    this.applyThemeOverride(`--${this.themeVariant}-button-focus-box-shadow`, value);
+  }
 
   /** Allows for the override of color */
-  // tslint:disable-next-line: prefer-inline-decorator
-  @HostBinding('style.--wvr-btn-primary-color')
-  @HostBinding('style.--wvr-btn-outline-primary-color')
-  @HostBinding('style.--wvr-btn-secondary-color')
-  @HostBinding('style.--wvr-btn-outline-secondary-color')
-  @HostBinding('style.--wvr-btn-success-color')
-  @HostBinding('style.--wvr-btn-outline-success-color')
-  @HostBinding('style.--wvr-btn-danger-color')
-  @HostBinding('style.--wvr-btn-outline-danger-color')
-  @HostBinding('style.--wvr-btn-warning-color')
-  @HostBinding('style.--wvr-btn-outline-warning-color')
-  @HostBinding('style.--wvr-btn-info-color')
-  @HostBinding('style.--wvr-btn-outline-info-color')
-  @HostBinding('style.--wvr-btn-light-color')
-  @HostBinding('style.--wvr-btn-outline-light-color')
-  @HostBinding('style.--wvr-btn-dark-color')
-  @HostBinding('style.--wvr-btn-outline-dark-color')
-  @HostBinding('style.--wvr-btn-link-color')
-  @Input() color;
+  @Input() set color(value: string) {
+    this.applyThemeOverride(`--${this.themeVariant}-button-color`, value);
+  }
 
   /** Allows for the override of active color */
-  // tslint:disable-next-line: prefer-inline-decorator
-  @HostBinding('style.--wvr-btn-primary-active-color')
-  @HostBinding('style.--wvr-btn-outline-primary-active-color')
-  @HostBinding('style.--wvr-btn-secondary-active-color')
-  @HostBinding('style.--wvr-btn-outline-secondary-active-color')
-  @HostBinding('style.--wvr-btn-success-active-color')
-  @HostBinding('style.--wvr-btn-outline-success-active-color')
-  @HostBinding('style.--wvr-btn-danger-active-color')
-  @HostBinding('style.--wvr-btn-outline-danger-active-color')
-  @HostBinding('style.--wvr-btn-warning-active-color')
-  @HostBinding('style.--wvr-btn-outline-warning-active-color')
-  @HostBinding('style.--wvr-btn-info-active-color')
-  @HostBinding('style.--wvr-btn-outline-info-active-color')
-  @HostBinding('style.--wvr-btn-light-active-color')
-  @HostBinding('style.--wvr-btn-outline-light-active-color')
-  @HostBinding('style.--wvr-btn-dark-active-color')
-  @HostBinding('style.--wvr-btn-outline-dark-active-color')
-  @Input() colorActive;
+  @Input() set colorActive(value: string) {
+    this.applyThemeOverride(`--${this.themeVariant}-button-active-color`, value);
+  }
 
   /** Allows for the override of hover color */
-  // tslint:disable-next-line: prefer-inline-decorator
-  @HostBinding('style.--wvr-btn-primary-hover-color')
-  @HostBinding('style.--wvr-btn-outline-primary-hover-color')
-  @HostBinding('style.--wvr-btn-secondary-hover-color')
-  @HostBinding('style.--wvr-btn-outline-secondary-hover-color')
-  @HostBinding('style.--wvr-btn-success-hover-color')
-  @HostBinding('style.--wvr-btn-outline-success-hover-color')
-  @HostBinding('style.--wvr-btn-danger-hover-color')
-  @HostBinding('style.--wvr-btn-outline-danger-hover-color')
-  @HostBinding('style.--wvr-btn-warning-hover-color')
-  @HostBinding('style.--wvr-btn-outline-warning-hover-color')
-  @HostBinding('style.--wvr-btn-info-hover-color')
-  @HostBinding('style.--wvr-btn-outline-info-hover-color')
-  @HostBinding('style.--wvr-btn-light-hover-color')
-  @HostBinding('style.--wvr-btn-outline-light-hover-color')
-  @HostBinding('style.--wvr-btn-dark-hover-color')
-  @HostBinding('style.--wvr-btn-outline-dark-hover-color')
-  @HostBinding('style.--wvr-btn-link-hover-color')
-  @Input() colorHover;
-
-  /** Allows for the override of button text-decoration property */
-  // tslint:disable-next-line: prefer-inline-decorator
-  @HostBinding('style.--wvr-btn-primary-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-primary-text-decoration')
-  @HostBinding('style.--wvr-btn-secondary-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-secondary-text-decoration')
-  @HostBinding('style.--wvr-btn-success-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-success-text-decoration')
-  @HostBinding('style.--wvr-btn-danger-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-danger-text-decoration')
-  @HostBinding('style.--wvr-btn-warning-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-warning-text-decoration')
-  @HostBinding('style.--wvr-btn-info-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-info-text-decoration')
-  @HostBinding('style.--wvr-btn-light-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-light-text-decoration')
-  @HostBinding('style.--wvr-btn-dark-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-dark-text-decoration')
-  @HostBinding('style.--wvr-btn-link-text-decoration')
-  @Input() textDecoration;
-
-  /** Allows for the override of button active text-decoration property */
-  // tslint:disable-next-line: prefer-inline-decorator
-  @HostBinding('style.--wvr-btn-primary-active-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-primary-active-text-decoration')
-  @HostBinding('style.--wvr-btn-secondary-active-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-secondary-active-text-decoration')
-  @HostBinding('style.--wvr-btn-success-active-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-success-active-text-decoration')
-  @HostBinding('style.--wvr-btn-danger-active-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-danger-active-text-decoration')
-  @HostBinding('style.--wvr-btn-warning-active-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-warning-active-text-decoration')
-  @HostBinding('style.--wvr-btn-info-active-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-info-active-text-decoration')
-  @HostBinding('style.--wvr-btn-light-active-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-light-active-text-decoration')
-  @HostBinding('style.--wvr-btn-dark-active-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-dark-active-text-decoration')
-  @HostBinding('style.--wvr-btn-link-active-text-decoration')
-  @Input() textDecorationActive;
-
-  /** Allows for the override of button hover text-decoration property */
-  // tslint:disable-next-line: prefer-inline-decorator
-  @HostBinding('style.--wvr-btn-primary-hover-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-primary-hover-text-decoration')
-  @HostBinding('style.--wvr-btn-secondary-hover-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-secondary-hover-text-decoration')
-  @HostBinding('style.--wvr-btn-success-hover-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-success-hover-text-decoration')
-  @HostBinding('style.--wvr-btn-danger-hover-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-danger-hover-text-decoration')
-  @HostBinding('style.--wvr-btn-warning-hover-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-warning-hover-text-decoration')
-  @HostBinding('style.--wvr-btn-info-hover-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-info-hover-text-decoration')
-  @HostBinding('style.--wvr-btn-light-hover-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-light-hover-text-decoration')
-  @HostBinding('style.--wvr-btn-dark-hover-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-dark-hover-text-decoration')
-  @HostBinding('style.--wvr-btn-link-hover-text-decoration')
-  @Input() textDecorationHover;
-
-  /** Allows for the override of button focus text-decoration property */
-  // tslint:disable-next-line: prefer-inline-decorator
-  @HostBinding('style.--wvr-btn-primary-focus-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-primary-focus-text-decoration')
-  @HostBinding('style.--wvr-btn-secondary-focus-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-secondary-focus-text-decoration')
-  @HostBinding('style.--wvr-btn-success-focus-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-success-focus-text-decoration')
-  @HostBinding('style.--wvr-btn-danger-focus-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-danger-focus-text-decoration')
-  @HostBinding('style.--wvr-btn-warning-focus-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-warning-focus-text-decoration')
-  @HostBinding('style.--wvr-btn-info-focus-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-info-focus-text-decoration')
-  @HostBinding('style.--wvr-btn-light-focus-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-light-focus-text-decoration')
-  @HostBinding('style.--wvr-btn-dark-focus-text-decoration')
-  @HostBinding('style.--wvr-btn-outline-dark-focus-text-decoration')
-  @HostBinding('style.--wvr-btn-link-focus-text-decoration')
-  @Input() textDecorationFocus;
+  @Input() set colorHover(value: string) {
+    this.applyThemeOverride(`--${this.themeVariant}-button-hover-color`, value);
+  }
+
+  // /** Allows for the override of button text-decoration property */
+  // @Input() set textDecoration(value: string) {
+  // }
+
+  // /** Allows for the override of button active text-decoration property */
+  // @Input() set textDecorationActive(value: string) {
+  // }
+
+  // /** Allows for the override of button hover text-decoration property */
+  // @Input() set textDecorationHover(value: string) {
+  // }
+
+  // /** Allows for the override of button focus text-decoration property */
+  // @Input() set textDecorationFocus(value: string) {
+  // }
 
   /** Allows for the override of button border radius */
   @HostBinding('style.--wvr-btn-border-radius') @Input() borderRadius;
@@ -369,6 +122,8 @@ export class WvrButtonComponent extends WvrBaseComponent {
   // tslint:disable-next-line:max-line-length
   // @WvrSelect({ selector: rootStore.selectManifestEntryResponse('Directory App', 'All Sorted') }) private sampleTestResponse: Observable<any>;
 
+  variantTypes = ['button'];
+
   constructor(injector: Injector) {
     super(injector);
   }
diff --git a/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.ud-examples.html b/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.ud-examples.html
index f0ae19980..6f4a197a2 100644
--- a/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.ud-examples.html
+++ b/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.ud-examples.html
@@ -14,7 +14,7 @@
     The <code>wvre-button</code> component with customizations.
   </desciption>
   <snippet>
-    <wvre-button btn-class="primary"
+    <wvre-button theme-variant="primary"
                 btn-size="large"
                 wvr-btn-type="button"
                 background="tomato"
@@ -48,31 +48,31 @@
     The <code>wvre-button</code> component with customizations.
   </desciption>
   <snippet>
-  <wvre-button btn-class="primary">
+  <wvre-button theme-variant="primary">
     <wvre-text value=" Primary "></wvre-text>
   </wvre-button>
-  <wvre-button btn-class="secondary">
+  <wvre-button theme-variant="secondary">
     <wvre-text value=" Secondary "></wvre-text>
   </wvre-button>
-  <wvre-button btn-class="success">
+  <wvre-button theme-variant="success">
     <wvre-text value=" Success "></wvre-text>
   </wvre-button>
-  <wvre-button btn-class="danger">
+  <wvre-button theme-variant="danger">
     <wvre-text value=" Danger "></wvre-text>
   </wvre-button>
-  <wvre-button btn-class="warning">
+  <wvre-button theme-variant="warning">
     <wvre-text value=" Warning "></wvre-text>
   </wvre-button>
-  <wvre-button btn-class="info">
+  <wvre-button theme-variant="info">
     <wvre-text value=" Info "></wvre-text>
   </wvre-button>
-  <wvre-button btn-class="light">
+  <wvre-button theme-variant="light">
     <wvre-text value=" Light "></wvre-text>
   </wvre-button>
-  <wvre-button btn-class="dark">
+  <wvre-button theme-variant="dark">
     <wvre-text value=" Dark "></wvre-text>
   </wvre-button>
-  <wvre-button btn-class="primary" wvr-btn-type="button" href="www.google.com">
+  <wvre-button theme-variant="primary" wvr-btn-type="button" href="www.google.com">
     <wvre-text value=" Link "></wvre-text>
   </wvre-button>
   </snippet>
@@ -83,28 +83,28 @@
     The <code>wvre-button-outline</code> component with customizations.
   </desciption>
   <snippet>
-  <wvre-button btn-class="outline-primary" wvr-btn-type="button">
+  <wvre-button theme-variant="outline-primary" wvr-btn-type="button">
     <wvre-text value="Outline Primary"></wvre-text>
   </wvre-button>
-  <wvre-button btn-class="outline-secondary" wvr-btn-type="button">
+  <wvre-button theme-variant="outline-secondary" wvr-btn-type="button">
     <wvre-text value="Outline Secondary "></wvre-text>
   </wvre-button>
-  <wvre-button btn-class="outline-success" wvr-btn-type="button">
+  <wvre-button theme-variant="outline-success" wvr-btn-type="button">
     <wvre-text value="Outline Success "></wvre-text>
   </wvre-button>
-  <wvre-button btn-class="outline-danger" wvr-btn-type="button">
+  <wvre-button theme-variant="outline-danger" wvr-btn-type="button">
     <wvre-text value="Outline Danger "></wvre-text>
   </wvre-button>
-  <wvre-button btn-class="outline-warning" wvr-btn-type="button">
+  <wvre-button theme-variant="outline-warning" wvr-btn-type="button">
     <wvre-text value="Outline Warning "></wvre-text>
   </wvre-button>
-  <wvre-button btn-class="outline-info" wvr-btn-type="button">
+  <wvre-button theme-variant="outline-info" wvr-btn-type="button">
     <wvre-text value="Outline Info "></wvre-text>
   </wvre-button>
-  <wvre-button btn-class="outline-light" wvr-btn-type="button">
+  <wvre-button theme-variant="outline-light" wvr-btn-type="button">
     <wvre-text value="Outline Light "></wvre-text>
   </wvre-button>
-  <wvre-button btn-class="outline-dark" wvr-btn-type="button">
+  <wvre-button theme-variant="outline-dark" wvr-btn-type="button">
     <wvre-text value="Outline Dark "></wvre-text>
   </wvre-button>
   </snippet>
@@ -115,15 +115,15 @@
     The <code>wvre-button</code> component with customizations.
   </desciption>
   <snippet>
-    <wvre-button btn-class="primary" btn-size="small">
+    <wvre-button theme-variant="primary" btn-size="small">
       <wvre-text value=" Small Size "></wvre-text>
     </wvre-button><br />
 
-    <wvre-button btn-class="secondary" btn-size="large">
+    <wvre-button theme-variant="secondary" btn-size="large">
       <wvre-text value=" Large Size "></wvre-text>
     </wvre-button><br />
 
-    <wvre-button btn-class="success" btn-size="block">
+    <wvre-button theme-variant="success" btn-size="block">
       <wvre-text value=" Block Size "></wvre-text>
     </wvre-button>
   </snippet>
@@ -135,16 +135,16 @@
   </desciption>
   <snippet>
 
-    <wvre-button btn-class="primary" wvr-btn-type="button" animate="{click: 'rotateToggle'}">
+    <wvre-button theme-variant="primary" wvr-btn-type="button" animate="{click: 'rotateToggle'}">
       <wvre-text value="Default Animation"></wvre-text>
     </wvre-button>
 
-    <wvre-button btn-class="info" wvr-btn-type="button" animate="{click: 'animationTrigger'}" animate-target="icon1">
+    <wvre-button theme-variant="info" wvr-btn-type="button" animate="{click: 'animationTrigger'}" animate-target="icon1">
       <wvre-text value="Targeted Animation"></wvre-text>
       <wvre-icon set="feather" name="chevron-right" color="#500000" animate="{animationTrigger: 'rotateToggle'}" animate-id="icon1"></wvre-icon>
     </wvre-button>
 
-    <wvre-button btn-class="success" wvr-btn-type="button" animate="{click: 'rotateToggle'}" animate-config="{
+    <wvre-button theme-variant="success" wvr-btn-type="button" animate="{click: 'rotateToggle'}" animate-config="{
       rotateToggle: {
         timing: '1000ms ease-in-out',
         to: 180,
diff --git a/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.html b/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.html
index 61b06a69b..f71926cba 100644
--- a/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.html
+++ b/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.html
@@ -1,25 +1,8 @@
 <div
   #animationRoot
-  class="wvr-components wvr-card card"
+  class="wvr-components wvr-card card {{additionalCardClasses()}}"
   [ngClass]="{
-    'text-center': cardTextCenter,
-    'border-primary': isOutLined('primary'),
-    'border-secondary': isOutLined('secondary'),
-    'border-success': isOutLined('success'),
-    'border-danger': isOutLined('danger'),
-    'border-warning': isOutLined('warning'),
-    'border-info': isOutLined('info'),
-    'border-light': isOutLined('light'),
-    'border-dark': isOutLined('dark'),
-
-    'bg-primary': isSolid('primary'),
-    'bg-secondary': isSolid('secondary'),
-    'bg-success': isSolid('success'),
-    'bg-danger': isSolid('danger'),
-    'bg-warning': isSolid('warning'),
-    'bg-info': isSolid('info'),
-    'bg-light': isSolid('light'),
-    'bg-dark': isSolid('dark')
+    'text-center': cardTextCenter
   }"
   style="width: 18rem;">
   <ng-container *ngTemplateOutlet="cardHeader"></ng-container>
@@ -35,17 +18,9 @@
 <!-- cardHeader -->
 
 <ng-template #cardHeader>
-  <div class="card-header"
+  <div class="card-header {{additionalHeaderClasses()}}"
   [ngClass]="{
-    'wvr-hidden': !hasCardHeader,
-    'bg-primary': isMixed('primary'),
-    'bg-secondary': isMixed('secondary'),
-    'bg-success': isMixed('success'),
-    'bg-danger': isMixed('danger'),
-    'bg-warning': isMixed('warning'),
-    'bg-info': isMixed('info'),
-    'bg-light': isMixed('light'),
-    'bg-dark': isMixed('dark')
+    'wvr-hidden': !hasCardHeader
   }">
     <ng-content select="wvre-card-header"></ng-content>
   </div>
@@ -91,8 +66,8 @@ <h5 class="card-title" [ngClass]="{'wvr-hidden': !hasCardTitle}">
 <!-- cardListTop -->
 <ng-template #cardListTop>
   <ng-content [ngClass]="{'wvr-hidden': !hasCardListTop,
-    'bg-primary': true
-  }"
+      'bg-primary': true
+    }"
     select="wvre-list[top]"></ng-content>
 </ng-template>
 
@@ -103,8 +78,7 @@ <h5 class="card-title" [ngClass]="{'wvr-hidden': !hasCardTitle}">
 
 <!-- cardFooter -->
 <ng-template #cardFooter>
-  <div class="card-footer"
-    [ngClass]="{'text-muted': footerTextMuted, 'wvr-hidden': !hasCardFooter}">
+  <div class="card-footer" [ngClass]="{'text-muted': footerTextMuted, 'wvr-hidden': !hasCardFooter}">
     <ng-content select="wvre-card-footer"></ng-content>
   </div>
 </ng-template>
diff --git a/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.scss b/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.scss
index 41fca6716..6e16912f5 100644
--- a/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.scss
+++ b/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.scss
@@ -1,6 +1,10 @@
 @import "../shared/styles/wvr-variables.scss";
+@import "../shared/styles/variables";
 
 :host {
+
+  @extend .variables;
+
   font-family: var(--wvr-font-family-sans-serif);
   ::ng-deep {
 
diff --git a/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.spec.ts b/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.spec.ts
index 1d3796aa6..8fc634250 100644
--- a/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.spec.ts
@@ -1,15 +1,14 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { StoreModule } from '@ngrx/store';
-import { metaReducers, ROOT_REDUCER } from '../core/store';
-
+import { provideMockStore } from '@ngrx/store/testing';
+import { APP_CONFIG, testAppConfig } from '../shared/config';
 import { WvrCardComponent } from './wvr-card.component';
 
 @Component({
-  selector: 'wvr-card-test-component',
+  selector: 'wvr-card-host-component',
   // tslint:disable-next-line:component-max-inline-declarations
-  template: `<wvr-card-component [cardType]="primary" [panelFormat]="mixed">
+  template: `<wvr-card-component [themeVariant]="primary" [panelFormat]="mixed">
   <wvre-card-header><wvre-text value="Card Header"></wvre-text></wvre-card-header>
   <wvre-card-title><wvre-text value="Card Title"></wvre-text></wvre-card-title>
   <wvre-card-img src="assets/lighthouse.svg"></wvre-card-img>
@@ -18,7 +17,7 @@ import { WvrCardComponent } from './wvr-card.component';
   <wvre-list top list-type="group-flush" context="info"><wvre-list-item><wvre-text value="Item 1"></wvre-text></wvre-list-item><wvre-list-item context="warning"><wvre-text value="Item 2"></wvre-text></wvre-list-item><wvre-list-item context="success"><wvre-text value="Item 3"></wvre-text></wvre-list-item></wvre-list>
   <wvre-text value="This is a basic card body content"></wvre-text>
   <wvre-list bottom list-type="group-flush" context="info"><wvre-list-item><wvre-text value="Item 1"></wvre-text></wvre-list-item><wvre-list-item context="warning"><wvre-text value="Item 2"></wvre-text></wvre-list-item></wvre-list>
-  <wvre-button btn-class="secondary"><wvre-text value="Card Button Text"></wvre-text></wvre-button>
+  <wvre-button theme-variant="secondary"><wvre-text value="Card Button Text"></wvre-text></wvre-button>
   <wvre-card-footer text-muted><wvre-text value="Card Footer1"></wvre-text></wvre-card-footer>
 </wvr-card-component>`
 })
@@ -27,22 +26,31 @@ class WvrCardHostComponent {
 }
 
 describe('WvrCardComponent', () => {
+  const initialState = { theme: {
+    themes: {}
+  }};
   let component: WvrCardComponent;
   let fixture: ComponentFixture<WvrCardComponent>;
 
   let hostComponent: WvrCardHostComponent;
   let hostFixture: ComponentFixture<WvrCardHostComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        BrowserAnimationsModule,
-        StoreModule.forRoot(ROOT_REDUCER, { metaReducers })
+        BrowserAnimationsModule
       ],
       declarations: [
         WvrCardHostComponent,
         WvrCardComponent
       ],
+      providers: [
+        {
+          provide: APP_CONFIG,
+          useValue: testAppConfig
+        },
+        provideMockStore({initialState})
+      ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     })
     .compileComponents();
diff --git a/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.ts b/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.ts
index 0d2d88f08..94a6c505e 100644
--- a/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.ts
+++ b/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.ts
@@ -1,4 +1,5 @@
 import { AfterViewInit, Component, ElementRef, Injector, Input, ViewChild } from '@angular/core';
+import { ThemeVariantName } from '../shared/theme';
 import { WvrBaseComponent } from '../shared/wvr-base.component';
 
 /**
@@ -48,7 +49,7 @@ export class WvrCardComponent extends WvrBaseComponent implements AfterViewInit
   @Input() textCenter;
 
   /** Used to describe the type of card. */
-  @Input() cardType: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
+  @Input() themeVariant: ThemeVariantName;
 
   /** Used to describe the format of card. */
   @Input() panelFormat: 'solid' | 'outlined' | 'mixed';
@@ -56,6 +57,8 @@ export class WvrCardComponent extends WvrBaseComponent implements AfterViewInit
   /** Element reference to the root html elment in the template. */
   @ViewChild('animationRoot') rootElem: ElementRef<HTMLElement>;
 
+  variantTypes = ['border'];
+
   /** Convenience referece this components ElementReference's nativeElement. */
   private readonly elem: HTMLElement;
 
@@ -81,18 +84,24 @@ export class WvrCardComponent extends WvrBaseComponent implements AfterViewInit
     });
   }
 
-  isOutLined(cardType: string): boolean {
-    return this.cardType === cardType &&
-            ((!this.panelFormat || this.panelFormat === 'mixed') ||
-             this.panelFormat === 'outlined');
-  }
+  additionalCardClasses(): string {
+    let additionalClasses = '';
+    additionalClasses +=  ((!this.panelFormat || this.panelFormat === 'mixed') || this.panelFormat === 'outlined') ?
+                          ` border-${this.themeVariant} ` : '';
+
+    additionalClasses +=  this.panelFormat === 'solid' ? ` bg-${this.themeVariant} ` : '';
 
-  isSolid(cardType: string): boolean {
-    return this.cardType === cardType && this.panelFormat === 'solid';
+    return additionalClasses;
   }
 
-  isMixed(cardType: string): boolean {
-    return this.cardType === cardType && (!this.panelFormat || this.panelFormat === 'mixed');
+  additionalHeaderClasses(): string {
+    let additionalClasses = '';
+    additionalClasses +=  ((!this.panelFormat || this.panelFormat === 'mixed') || this.panelFormat === 'outlined') ?
+                          ` border-${this.themeVariant} ` : '';
+
+    additionalClasses +=  (this.panelFormat === 'solid' || this.panelFormat === 'mixed') ? ` bg-${this.themeVariant} ` : '';
+
+    return additionalClasses;
   }
 
   /** Prepares the card for display */
diff --git a/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.ud-examples.html b/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.ud-examples.html
index db61b6f88..b3a1cc849 100644
--- a/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.ud-examples.html
+++ b/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.ud-examples.html
@@ -43,7 +43,7 @@
         </wvre-list-item>
       </wvre-list>
 
-      <wvre-button btn-class="secondary">
+      <wvre-button theme-variant="secondary">
         <wvre-text value="Card Button Text"></wvre-text>
       </wvre-button>
 
diff --git a/projects/wvr-elements/src/lib/wvr-color-preview/wvr-color-preview.component.html b/projects/wvr-elements/src/lib/wvr-color-preview/wvr-color-preview.component.html
new file mode 100644
index 000000000..cd16897ba
--- /dev/null
+++ b/projects/wvr-elements/src/lib/wvr-color-preview/wvr-color-preview.component.html
@@ -0,0 +1,12 @@
+<div class="inline-block">
+  <wvr-card-component
+    class="swatches"
+    [panelFormat]="'solid'"
+    [themeVariant]="tv.key"
+    *ngFor="let tv of currentTheme | async | keyvalue : originalOrdering">
+    <wvre-card-header>
+      <h3>{{tv.key}}</h3>
+    </wvre-card-header>
+    {{tv.value.baseColor}}
+  </wvr-card-component>
+</div>
\ No newline at end of file
diff --git a/projects/wvr-elements/src/lib/wvr-color-preview/wvr-color-preview.component.scss b/projects/wvr-elements/src/lib/wvr-color-preview/wvr-color-preview.component.scss
new file mode 100644
index 000000000..d024594a4
--- /dev/null
+++ b/projects/wvr-elements/src/lib/wvr-color-preview/wvr-color-preview.component.scss
@@ -0,0 +1,6 @@
+:host {
+  .swatches {
+    display: inline-block;
+    margin: 0 10px 10px 0;
+  }
+}
\ No newline at end of file
diff --git a/projects/wvr-elements/src/lib/wvr-color-preview/wvr-color-preview.component.spec.ts b/projects/wvr-elements/src/lib/wvr-color-preview/wvr-color-preview.component.spec.ts
new file mode 100644
index 000000000..04e6ed1a9
--- /dev/null
+++ b/projects/wvr-elements/src/lib/wvr-color-preview/wvr-color-preview.component.spec.ts
@@ -0,0 +1,44 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { provideMockStore } from '@ngrx/store/testing';
+import { APP_CONFIG, testAppConfig } from '../shared/config';
+
+import { WvrColorPreviewComponent } from './wvr-color-preview.component';
+
+describe('ColorPreviewComponent', () => {
+  const initialState = { theme: {
+    themes: {}
+  }};
+  let component: WvrColorPreviewComponent;
+  let fixture: ComponentFixture<WvrColorPreviewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        BrowserAnimationsModule
+      ],
+      providers: [
+        {
+          provide: APP_CONFIG,
+          useValue: testAppConfig
+        },
+        provideMockStore({initialState})
+      ],
+      declarations: [ WvrColorPreviewComponent ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WvrColorPreviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component)
+      .toBeTruthy();
+  });
+});
diff --git a/projects/wvr-elements/src/lib/wvr-color-preview/wvr-color-preview.component.ts b/projects/wvr-elements/src/lib/wvr-color-preview/wvr-color-preview.component.ts
new file mode 100644
index 000000000..6ae17e3f1
--- /dev/null
+++ b/projects/wvr-elements/src/lib/wvr-color-preview/wvr-color-preview.component.ts
@@ -0,0 +1,38 @@
+/* istanbul ignore file */
+
+import { Component, Injector, OnInit } from '@angular/core';
+import { WvrBaseComponent } from '../shared/wvr-base.component';
+import { ThemeVariants } from '../shared/theme';
+import { select } from '@ngrx/store';
+import { selectCurrentTheme } from '../core/store';
+import { Observable } from 'rxjs';
+import * as ThemeActions from '../core/theme/theme.actions';
+import { KeyValue } from '@angular/common';
+import { SSL_OP_SSLEAY_080_CLIENT_DH_BUG } from 'constants';
+
+@Component({
+  selector: 'wvr-color-preview-component',
+  templateUrl: './wvr-color-preview.component.html',
+  styleUrls: ['./wvr-color-preview.component.scss']
+})
+export class WvrColorPreviewComponent extends WvrBaseComponent  implements OnInit {
+
+  currentTheme: Observable<ThemeVariants>;
+
+  constructor(injector: Injector) {
+    super(injector);
+  }
+
+  ngOnInit(): void {
+    super.ngOnInit();
+
+    this.currentTheme = this.store
+      .pipe(select(selectCurrentTheme));
+
+  }
+
+  originalOrdering(): number {
+    return 0;
+  }
+
+}
diff --git a/projects/wvr-elements/src/lib/wvr-color-preview/wvr-color-preview.component.ud-examples.html b/projects/wvr-elements/src/lib/wvr-color-preview/wvr-color-preview.component.ud-examples.html
new file mode 100644
index 000000000..569061edf
--- /dev/null
+++ b/projects/wvr-elements/src/lib/wvr-color-preview/wvr-color-preview.component.ud-examples.html
@@ -0,0 +1,8 @@
+<example name="Weaver Color Preview Default">
+  <desciption>
+    The default <code>wvre-color-preview</code> component with no customizations.
+  </desciption>
+  <snippet>
+    <wvre-color-preview></wvre-color-preview>
+  </snippet>
+</example>
diff --git a/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.html b/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.html
index 38e509481..66a3f7eaa 100644
--- a/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.html
+++ b/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.html
@@ -10,9 +10,10 @@
       [borderFocus]="btnBorderFocus"
       [borderRadius]="btnBorderRadius"
       [boxShadowFocus]="btnBoxShadowFocus"
-      [btnClass]="btnType"
+      [themeVariant]="themeVariant"
       [btnSize]="btnSize"
       [color]="btnColor"
+      [btnType]="btnType"
       [colorActive]="btnColorActive"
       [colorHover]="btnColorHover"
       [cursor]="btnCursor"
diff --git a/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.scss b/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.scss
index a02f188f8..accb73cd0 100644
--- a/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.scss
+++ b/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.scss
@@ -1,6 +1,10 @@
 @import "../shared/styles/wvr-variables.scss";
+@import "../shared/styles/variables";
 
 :host {
+  
+  @extend .variables;
+
   --wvr-dropdown-menu-animation-speed: 0.25s;
   --wvr-dropdown-menu-background: var(--wvr-white);
   --wvr-dropdown-menu-border: 1px solid var(--wvr-gray-dark);
diff --git a/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.spec.ts b/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.spec.ts
index 0e89918a8..6c4a20050 100644
--- a/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.spec.ts
@@ -1,19 +1,48 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
-import { StoreModule } from '@ngrx/store';
-import { metaReducers, ROOT_REDUCER } from '../core/store';
+import { provideMockStore } from '@ngrx/store/testing';
+import { APP_CONFIG, testAppConfig } from '../shared/config';
 import { WvrDropdownComponent } from './wvr-dropdown.component';
 
+@Component({
+  selector: 'wvr-dropdown-host-component',
+  // tslint:disable-next-line:component-max-inline-declarations
+  template: `<wvr-dropdown-component
+              btnTextDecoration="none"
+              btnTextDecorationActive="underline"
+              btnTextDecorationHover="underline"
+              btnTextDecorationFocus="none">
+            </wvr-dropdown-component>`
+})
+class WvrDropdownHostComponent {
+  @ViewChild(WvrDropdownComponent) dropDown: WvrDropdownComponent;
+}
 describe('WvrDropdownComponent', () => {
+  const initialState = { theme: {
+    themes: {}
+  }};
   let component: WvrDropdownComponent;
   let fixture: ComponentFixture<WvrDropdownComponent>;
 
-  beforeEach(async(() => {
+  let hostComponent: WvrDropdownHostComponent;
+  let hostFixture: ComponentFixture<WvrDropdownHostComponent>;
+
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [BrowserAnimationsModule, StoreModule.forRoot(ROOT_REDUCER, { metaReducers })],
+      imports: [
+        BrowserAnimationsModule
+      ],
+      providers: [
+        {
+          provide: APP_CONFIG,
+          useValue: testAppConfig
+        },
+        provideMockStore({initialState})
+      ],
       declarations: [
+        WvrDropdownHostComponent,
         WvrDropdownComponent,
         NgbDropdown
       ],
@@ -25,6 +54,11 @@ describe('WvrDropdownComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(WvrDropdownComponent);
     component = fixture.componentInstance;
+
+    hostFixture = TestBed.createComponent(WvrDropdownHostComponent);
+    hostComponent = hostFixture.componentInstance;
+
+    hostFixture.detectChanges();
     fixture.detectChanges();
   });
 
@@ -33,9 +67,41 @@ describe('WvrDropdownComponent', () => {
       .toBeTruthy();
   });
 
-  it('should have btnType defined', () => {
-    expect(component.btnType)
-      .toEqual('plain');
+  it('should have themeVariant defined', () => {
+    expect(component.themeVariant)
+      .toEqual('secondary');
+    component.themeVariant = 'primary';
+    fixture.detectChanges();
+    expect(component.themeVariant)
+      .toEqual('primary');
+  });
+
+  it('should have button href defined', () => {
+    expect(component.btnHref)
+      .toBe('');
+    component.btnHref = 'linkUrl';
+    fixture.detectChanges();
+    expect(component.btnHref)
+      .toBe('linkUrl');
+  });
+
+  it('should have button size defined', () => {
+    expect(component.btnSize)
+      .toBe('');
+    component.btnSize = 'small';
+    fixture.detectChanges();
+    expect(component.btnSize)
+      .toBe('small');
+  });
+
+  it('should have default button text decoration set', () => {
+    expect(component.btnTextDecoration)
+      .toBe('var(--wvr-btn-secondary-text-decoration-default)');
+  });
+
+  it('should have default button text decoration focus set', () => {
+    expect(component.btnTextDecorationFocus)
+      .toBe('var(--wvr-btn-secondary-focus-text-decoration-default)');
   });
 
   it('should have toggleOn defined', () => {
@@ -175,230 +241,4 @@ describe('WvrDropdownComponent', () => {
     }, 251);
   });
 
-  it('should have customization for button background', () => {
-    expect(component.btnBackground)
-      .toEqual('var(--wvr-btn-plain-background-default)');
-    component.btnBackground = 'var(--wvr-dropdown-menu-background)';
-    fixture.detectChanges();
-    expect(component.btnBackground)
-      .toEqual('var(--wvr-dropdown-menu-background)');
-  });
-
-  it('should have customization for active button color', () => {
-    expect(component.btnBackgroundActive)
-      .toEqual('var(--wvr-btn-plain-active-background-default)');
-    component.btnBackgroundActive = 'var(--wvr-btn-warning-active-background-default)';
-    fixture.detectChanges();
-    expect(component.btnBackgroundActive)
-      .toEqual('var(--wvr-btn-warning-active-background-default)');
-
-  });
-
-  it('should have customization for hover button color', () => {
-    expect(component.btnBackgroundHover)
-      .toEqual('var(--wvr-btn-plain-hover-background-default)');
-    component.btnBackgroundHover = 'var(--wvr-btn-warning-hover-background-default)';
-    fixture.detectChanges();
-    expect(component.btnBackgroundHover)
-      .toEqual('var(--wvr-btn-warning-hover-background-default)');
-
-  });
-
-  it('should have customization for button border value', () => {
-    expect(component.btnBorderColor)
-      .toEqual('var(--wvr-btn-plain-border-default)');
-    component.btnBorderColor = 'var(--wvr-btn-primary-border-default)';
-    fixture.detectChanges();
-    expect(component.btnBorderColor)
-      .toEqual('var(--wvr-btn-primary-border-default)');
-
-  });
-
-  it('should have customization for button border value in active state', () => {
-    expect(component.btnBorderActive)
-      .toEqual('var(--wvr-btn-plain-active-border-default)');
-    component.btnBorderActive = 'var(--wvr-btn-primary-active-border-default)';
-    fixture.detectChanges();
-    expect(component.btnBorderActive)
-      .toEqual('var(--wvr-btn-primary-active-border-default)');
-
-  });
-
-  it('should have customization for button border value in focus state', () => {
-    expect(component.btnBorderFocus)
-      .toEqual('var(--wvr-btn-plain-focus-border-default)');
-    component.btnBorderFocus = 'var(--wvr-btn-primary-focus-border-default)';
-    fixture.detectChanges();
-    expect(component.btnBorderFocus)
-      .toEqual('var(--wvr-btn-primary-focus-border-default)');
-
-  });
-
-  it('should have customization for button border value in hover state', () => {
-    expect(component.btnBorderHover)
-      .toEqual('var(--wvr-btn-plain-hover-border-default)');
-    component.btnBorderHover = 'var(--wvr-btn-primary-hover-border-default)';
-    fixture.detectChanges();
-    expect(component.btnBorderHover)
-      .toEqual('var(--wvr-btn-primary-hover-border-default)');
-
-  });
-
-  it('should have customization for button color in default state', () => {
-    expect(component.btnColor)
-      .toEqual('var(--wvr-btn-plain-color-default)');
-    component.btnColor = 'var(--wvr-btn-primary-color-default)';
-    fixture.detectChanges();
-    expect(component.btnColor)
-      .toEqual('var(--wvr-btn-primary-color-default)');
-
-  });
-
-  it('should have customization for button color in active state', () => {
-    expect(component.btnColorActive)
-      .toEqual('var(--wvr-btn-plain-active-color-default)');
-    component.btnColorActive = 'var(--wvr-btn-primary-active-color-default)';
-    fixture.detectChanges();
-    expect(component.btnColorActive)
-      .toEqual('var(--wvr-btn-primary-active-color-default)');
-
-  });
-
-  it('should have customization for button color in hover state', () => {
-    expect(component.btnColorHover)
-      .toEqual('var(--wvr-btn-plain-hover-color-default)');
-    component.btnColorHover = 'var(--wvr-btn-primary-hover-color-default)';
-    fixture.detectChanges();
-    expect(component.btnColorHover)
-      .toEqual('var(--wvr-btn-primary-hover-color-default)');
-
-  });
-
-  it('should have customization for button border radius', () => {
-    expect(component.btnBorderRadius)
-      .toEqual('var(--wvr-btn-border-radius)');
-    component.btnBorderRadius = '12px';
-    fixture.detectChanges();
-    expect(component.btnBorderRadius)
-      .toEqual('12px');
-  });
-
-  it('should have customization for button border radius', () => {
-    expect(component.btnBoxShadowFocus)
-      .toEqual('var(--wvr-btn-plain-focus-box-shadow-default)');
-    component.btnBoxShadowFocus = 'var(--wvr-btn-primary-focus-box-shadow-default)';
-    fixture.detectChanges();
-    expect(component.btnBoxShadowFocus)
-      .toEqual('var(--wvr-btn-primary-focus-box-shadow-default)');
-  });
-
-  it('should have customization for button cursor', () => {
-    expect(component.btnCursor)
-      .toEqual('var(--wvr-btn-cursor-default)');
-    component.btnCursor = 'pointer';
-    fixture.detectChanges();
-    expect(component.btnCursor)
-      .toEqual('pointer');
-  });
-
-  it('should have customization for button font family', () => {
-    expect(component.btnFontFamily)
-      .toEqual('var(--wvr-btn-font-family-sans-serif-default)');
-    component.btnFontFamily = 'var(--wvr-font-family-sans-serif)';
-    fixture.detectChanges();
-    expect(component.btnFontFamily)
-      .toEqual('var(--wvr-font-family-sans-serif)');
-  });
-
-  it('should have customization for button font size', () => {
-    expect(component.btnFontSize)
-      .toEqual('var(--wvr-btn-font-size-default)');
-    component.btnFontSize = 'var(--wvr-btn-font-size)';
-    fixture.detectChanges();
-    expect(component.btnFontSize)
-      .toEqual('var(--wvr-btn-font-size)');
-  });
-
-  it('should have customization for button font weight', () => {
-    expect(component.btnFontWeight)
-      .toEqual('var(--wvr-btn-font-weight-default)');
-    component.btnFontWeight = 'var(--wvr-btn-font-weight)';
-    fixture.detectChanges();
-    expect(component.btnFontWeight)
-      .toEqual('var(--wvr-btn-font-weight)');
-  });
-
-  it('should have customization for button line height', () => {
-    expect(component.btnLineHeight)
-      .toEqual('var(--wvr-btn-line-height-default)');
-    component.btnLineHeight = 'var(--wvr-btn-line-height)';
-    fixture.detectChanges();
-    expect(component.btnLineHeight)
-      .toEqual('var(--wvr-btn-line-height)');
-  });
-
-  it('should have customization for button padding rule', () => {
-    expect(component.btnPadding)
-      .toEqual('var(--wvr-btn-padding-default)');
-    component.btnPadding = 'var(--wvr-btn-padding)';
-    fixture.detectChanges();
-    expect(component.btnPadding)
-      .toEqual('var(--wvr-btn-padding)');
-  });
-
-  it('should have customization for button text align rule', () => {
-    expect(component.btnTextAlign)
-      .toEqual('var(--wvr-btn-text-align-default)');
-    component.btnTextAlign = 'var(--wvr-btn-text-align)';
-    fixture.detectChanges();
-    expect(component.btnTextAlign)
-      .toEqual('var(--wvr-btn-text-align)');
-  });
-
-  it('should have customization for button vertical align', () => {
-    expect(component.btnVerticalAlign)
-      .toEqual('var(--wvr-btn-vertical-align-default)');
-    component.btnVerticalAlign = 'var(--wvr-btn-vertical-align)';
-    fixture.detectChanges();
-    expect(component.btnVerticalAlign)
-      .toEqual('var(--wvr-btn-vertical-align)');
-  });
-
-  it('should have customization for button text decoration', () => {
-    expect(component.btnTextDecoration)
-      .toEqual('var(--wvr-btn-plain-text-decoration-default)');
-    component.btnTextDecoration = 'var(--wvr-btn-primary-text-decoration)';
-    fixture.detectChanges();
-    expect(component.btnTextDecoration)
-      .toEqual('var(--wvr-btn-primary-text-decoration)');
-  });
-
-  it('should have customization for button text decoration in active state', () => {
-    expect(component.btnTextDecorationActive)
-      .toEqual('var(--wvr-btn-plain-active-text-decoration-default)');
-    component.btnTextDecorationActive = 'var(--wvr-btn-primary-active-text-decoration)';
-    fixture.detectChanges();
-    expect(component.btnTextDecorationActive)
-      .toEqual('var(--wvr-btn-primary-active-text-decoration)');
-  });
-
-  it('should have customization for button text decoration in focus state', () => {
-    expect(component.btnTextDecorationFocus)
-      .toEqual('var(--wvr-btn-plain-focus-text-decoration-default)');
-    component.btnTextDecorationFocus = 'var(--wvr-btn-primary-focus-text-decoration)';
-    fixture.detectChanges();
-    expect(component.btnTextDecorationFocus)
-      .toEqual('var(--wvr-btn-primary-focus-text-decoration)');
-  });
-
-  it('should have customization for button text decoration in focus state', () => {
-    expect(component.btnTextDecorationHover)
-      .toEqual('var(--wvr-btn-plain-hover-text-decoration-default)');
-    component.btnTextDecorationHover = 'var(--wvr-btn-primary-hover-text-decoration)';
-    fixture.detectChanges();
-    expect(component.btnTextDecorationHover)
-      .toEqual('var(--wvr-btn-primary-hover-text-decoration)');
-  });
-
-// tslint:disable-next-line:max-file-line-count
 });
diff --git a/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.ts b/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.ts
index 537ef9e0f..c456965ed 100644
--- a/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.ts
+++ b/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.ts
@@ -1,5 +1,6 @@
 import { Component, HostBinding, HostListener, Injector, Input, ViewChild } from '@angular/core';
 import { NgbDropdown, NgbDropdownConfig } from '@ng-bootstrap/ng-bootstrap';
+import { ThemeVariantName } from '../shared/theme';
 import { WvrBaseComponent } from '../shared/wvr-base.component';
 
 /**
@@ -28,225 +29,67 @@ export class WvrDropdownComponent extends WvrBaseComponent {
   }
 
   /** Allows for override of button background value. */
-  private _btnBackground: string;
-
-  @Input() set btnBackground(value: string) {
-    this._btnBackground = value;
-  }
-
-  /** An accessor for the assigned background of this dropdowns button. */
-  get btnBackground(): string {
-    return this._btnBackground ? this._btnBackground : `var(--wvr-btn-${this.btnType}-background-default)`;
-  }
+  @Input() btnBackground: string;
 
   /** Allows for override of button background value in active state. */
-  private _btnBackgroundActive: string;
-
-  @Input() set btnBackgroundActive(value: string) {
-    this._btnBackgroundActive = value;
-  }
-
-  get btnBackgroundActive(): string {
-    return this._btnBackgroundActive ? this._btnBackgroundActive : `var(--wvr-btn-${this.btnType}-active-background-default)`;
-  }
+  @Input() btnBackgroundActive: string;
 
   /** Allows for override of button background value in hover state. */
-  private _btnBackgroundHover: string;
-
-  @Input() set btnBackgroundHover(value: string) {
-    this._btnBackgroundHover = value;
-  }
-
-  get btnBackgroundHover(): string {
-    return this._btnBackgroundHover ? this._btnBackgroundHover : `var(--wvr-btn-${this.btnType}-hover-background-default)`;
-  }
+  @Input() btnBackgroundHover: string;
 
   /** Allows for override of button border value in active state. */
-  private _btnBorderActive: string;
-
-  @Input() set btnBorderActive(value: string) {
-    this._btnBorderActive = value;
-  }
-
-  get btnBorderActive(): string {
-    return this._btnBorderActive ? this._btnBorderActive : `var(--wvr-btn-${this.btnType}-active-border-default)`;
-  }
+  @Input() btnBorderActive: string;
 
   /** Allows for override of button border color. */
-  private _btnBorderColor: string;
-
-  @Input() set btnBorderColor(value: string) {
-    this._btnBorderColor = value;
-  }
-
-  get btnBorderColor(): string {
-    return this._btnBorderColor ? this._btnBorderColor : `var(--wvr-btn-${this.btnType}-border-default)`;
-  }
+  @Input() btnBorderColor: string;
 
   /** Allows for override of button border value in focus state. */
-  private _btnBorderFocus: string;
-
-  @Input() set btnBorderFocus(value: string) {
-    this._btnBorderFocus = value;
-  }
-
-  get btnBorderFocus(): string {
-    return this._btnBorderFocus ? this._btnBorderFocus : `var(--wvr-btn-${this.btnType}-focus-border-default)`;
-  }
+  @Input() btnBorderFocus: string;
 
   /** Allows for override of button border value in hover state. */
-  private _btnBorderHover: string;
-
-  @Input() set btnBorderHover(value: string) {
-    this._btnBorderHover = value;
-  }
-
-  get btnBorderHover(): string {
-    return this._btnBorderHover ? this._btnBorderHover : `var(--wvr-btn-${this.btnType}-hover-border-default)`;
-  }
+  @Input() btnBorderHover: string;
 
   /** Allows for override the button color. */
-  private _btnColor: string;
-
-  @Input() set btnColor(value: string) {
-    this._btnColor = value;
-  }
-
-  get btnColor(): string {
-    return this._btnColor ? this._btnColor : `var(--wvr-btn-${this.btnType}-color-default)`;
-  }
+  @Input() btnColor: string;
 
   /** Allows for override the button color in active state. */
-  private _btnColorActive: string;
-
-  @Input() set btnColorActive(value: string) {
-    this._btnColorActive = value;
-  }
-
-  get btnColorActive(): string {
-    return this._btnColorActive ? this._btnColorActive : `var(--wvr-btn-${this.btnType}-active-color-default)`;
-  }
+  @Input() btnColorActive: string;
 
   /** Allows for override the button color in hover state. */
-  private _btnColorHover: string;
-
-  @Input() set btnColorHover(value: string) {
-    this._btnColorHover = value;
-  }
-
-  get btnColorHover(): string {
-    return this._btnColorHover ? this._btnColorHover : `var(--wvr-btn-${this.btnType}-hover-color-default)`;
-  }
+  @Input() btnColorHover: string;
 
   /** Allows for override the button radius. */
-  private _btnBorderRadius: string;
-
-  @Input() set btnBorderRadius(value: string) {
-    this._btnBorderRadius = value;
-  }
-
-  get btnBorderRadius(): string {
-    return this._btnBorderRadius ? this._btnBorderRadius : 'var(--wvr-btn-border-radius)';
-  }
+  @Input() btnBorderRadius: string;
 
   /** Allows for override the button box shadow in focus state. */
-  private _btnBoxShadowFocus: string;
-
-  @Input() set btnBoxShadowFocus(value: string) {
-    this._btnBoxShadowFocus = value;
-  }
-
-  get btnBoxShadowFocus(): string {
-    return this._btnBoxShadowFocus ? this._btnBoxShadowFocus : `var(--wvr-btn-${this.btnType}-focus-box-shadow-default)`;
-  }
+  @Input() btnBoxShadowFocus: string;
 
   /** Allows for override the button cursor. */
-  private _btnCursor: string;
-
-  @Input() set btnCursor(value: string) {
-    this._btnCursor = value;
-  }
-
-  get btnCursor(): string {
-    return this._btnCursor ? this._btnCursor : 'var(--wvr-btn-cursor-default)';
-  }
+  @Input() btnCursor: string;
 
   /** Allows for override the button font family. */
-  private _btnFontFamily: string;
-
-  @Input() set btnFontFamily(value: string) {
-    this._btnFontFamily = value;
-  }
-
-  get btnFontFamily(): string {
-    return this._btnFontFamily ? this._btnFontFamily : 'var(--wvr-btn-font-family-sans-serif-default)';
-  }
+  @Input() btnFontFamily: string;
 
   /** Allows for override the button font size. */
-  private _btnFontSize: string;
-
-  @Input() set btnFontSize(value: string) {
-    this._btnFontSize = value;
-  }
-
-  get btnFontSize(): string {
-    return this._btnFontSize ? this._btnFontSize : 'var(--wvr-btn-font-size-default)';
-  }
+  @Input() btnFontSize: string;
 
   /** Allows for override the button font weight. */
-  private _btnFontWeight: string;
-
-  @Input() set btnFontWeight(value: string) {
-    this._btnFontWeight = value;
-  }
-
-  get btnFontWeight(): string {
-    return this._btnFontWeight ? this._btnFontWeight : 'var(--wvr-btn-font-weight-default)';
-  }
+  @Input() btnFontWeight: string;
 
   /** Allows for override the button line height. */
-  private _btnLineHeight: string;
-
-  @Input() set btnLineHeight(value: string) {
-    this._btnLineHeight = value;
-  }
-
-  get btnLineHeight(): string {
-    return this._btnLineHeight ? this._btnLineHeight : 'var(--wvr-btn-line-height-default)';
-  }
+  @Input() btnLineHeight: string;
 
   /** Allows for override the button line height. */
-  private _btnPadding: string;
-
-  @Input() set btnPadding(value: string) {
-    this._btnPadding = value;
-  }
-
-  get btnPadding(): string {
-    return this._btnPadding ? this._btnPadding : 'var(--wvr-btn-padding-default)';
-  }
+  @Input() btnPadding: string;
 
   /** Allows for override the button line height. */
-  private _btnTextAlign: string;
+  @Input() btnTextAlign: string;
 
-  @Input() set btnTextAlign(value: string) {
-    this._btnTextAlign = value;
-  }
-
-  get btnTextAlign(): string {
-    return this._btnTextAlign ? this._btnTextAlign : 'var(--wvr-btn-text-align-default)';
-  }
+  /** Allows for override the button type. */
+  @Input() btnType: string;
 
   /** Allows for override the button line height. */
-  private _btnVerticalAlign: string;
-
-  @Input() set btnVerticalAlign(value: string) {
-    this._btnVerticalAlign = value;
-  }
-
-  get btnVerticalAlign(): string {
-    return this._btnVerticalAlign ? this._btnVerticalAlign : 'var(--wvr-btn-vertical-align-default)';
-  }
+  @Input() btnVerticalAlign: string;
 
   /** Allows for override of button href value. */
   @Input() btnHref = '';
@@ -255,7 +98,7 @@ export class WvrDropdownComponent extends WvrBaseComponent {
   @Input() btnSize = '';
 
   /** Allows for the visual customization of the dropdown menu activation button.  */
-  @Input() btnType: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link' | 'plain' = 'plain';
+  @Input() themeVariant: ThemeVariantName = 'secondary';
 
   /** Binds the input from `menuBackground` to the css variable `--wvr-dropdown-menu-background` */
   @HostBinding('style.--wvr-dropdown-menu-background') @Input() menuBackground;
@@ -308,7 +151,9 @@ export class WvrDropdownComponent extends WvrBaseComponent {
   }
 
   get btnTextDecoration(): string {
-    return this._btnTextDecoration ? this._btnTextDecoration : `var(--wvr-btn-${this.btnType}-text-decoration-default)`;
+    return this._btnTextDecoration ?
+    this._btnTextDecoration :
+    `var(--wvr-btn-${this.themeVariant}-text-decoration-default)`;
   }
 
   /** Allows for override the button text decoration. */
@@ -319,7 +164,9 @@ export class WvrDropdownComponent extends WvrBaseComponent {
   }
 
   get btnTextDecorationActive(): string {
-    return this._btnTextDecorationActive ? this._btnTextDecorationActive : `var(--wvr-btn-${this.btnType}-active-text-decoration-default)`;
+    return this._btnTextDecorationActive ?
+    this._btnTextDecorationActive :
+    `var(--wvr-btn-${this.themeVariant}-active-text-decoration-default)`;
   }
 
   // text-decoration-focus
@@ -330,7 +177,9 @@ export class WvrDropdownComponent extends WvrBaseComponent {
   }
 
   get btnTextDecorationFocus(): string {
-    return this._btnTextDecorationFocus ? this._btnTextDecorationFocus : `var(--wvr-btn-${this.btnType}-focus-text-decoration-default)`;
+    return this._btnTextDecorationFocus ?
+      this._btnTextDecorationFocus :
+      `var(--wvr-btn-${this.themeVariant}-focus-text-decoration-default)`;
   }
 
   private _btnTextDecorationHover: string;
@@ -340,7 +189,9 @@ export class WvrDropdownComponent extends WvrBaseComponent {
   }
 
   get btnTextDecorationHover(): string {
-    return this._btnTextDecorationHover ? this._btnTextDecorationHover : `var(--wvr-btn-${this.btnType}-hover-text-decoration-default)`;
+    return this._btnTextDecorationHover ?
+    this._btnTextDecorationHover :
+    `var(--wvr-btn-${this.themeVariant}-hover-text-decoration-default)`;
   }
 
   @Input() placement = 'top-right';
@@ -354,6 +205,7 @@ export class WvrDropdownComponent extends WvrBaseComponent {
   /**
    * Indicates that the dropdown is in the process of closing.
    */
+  // tslint:disable-next-line: prefer-readonly
   private closing = false;
 
   @Input() dropdownMenuDisplay = 'dynamic';
@@ -394,8 +246,9 @@ export class WvrDropdownComponent extends WvrBaseComponent {
    * And the click occured off of the wvre-dropdown component.
    */
   @HostListener('document:click', ['$event']) clickout($event): void {
-    if (!this._eRef.nativeElement.contains($event.target)) {
-      this.closeDropdown();
+    const path = $event.composedPath();
+    if (!this._eRef.nativeElement.contains(path[0])) {
+     this.closeDropdown();
     }
   }
 
diff --git a/projects/wvr-elements/src/lib/wvr-footer/wvr-footer.component.scss b/projects/wvr-elements/src/lib/wvr-footer/wvr-footer.component.scss
index b51205beb..e56cbd75f 100644
--- a/projects/wvr-elements/src/lib/wvr-footer/wvr-footer.component.scss
+++ b/projects/wvr-elements/src/lib/wvr-footer/wvr-footer.component.scss
@@ -1,6 +1,10 @@
 @import "../shared/styles/wvr-variables.scss";
+@import "../shared/styles/variables";
 
 :host {
+  
+  @extend .variables;
+
   --footer-background: var(--wvr-gray);
   --footer-height: var(--wvr-navbar-height);
   --footer-padding: var(--wvr-navbar-padding);
diff --git a/projects/wvr-elements/src/lib/wvr-footer/wvr-footer.component.spec.ts b/projects/wvr-elements/src/lib/wvr-footer/wvr-footer.component.spec.ts
index c458158f7..d9c774a96 100644
--- a/projects/wvr-elements/src/lib/wvr-footer/wvr-footer.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-footer/wvr-footer.component.spec.ts
@@ -1,17 +1,41 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { StoreModule } from '@ngrx/store';
-import { metaReducers, ROOT_REDUCER } from '../core/store';
+import { provideMockStore } from '@ngrx/store/testing';
+import { APP_CONFIG, testAppConfig } from '../shared/config';
 import { WvrFooterComponent } from './wvr-footer.component';
 
+@Component({
+  selector: 'wvr-footer-host-component',
+  // tslint:disable-next-line:component-max-inline-declarations
+  template: '<wvr-footer-component></wvr-footer-component>'
+})
+class WvrFooterHostComponent {
+  @ViewChild(WvrFooterComponent) footer: WvrFooterComponent;
+}
+
 describe('WvrFooterComponent', () => {
+  const initialState = { theme: {
+    themes: {}
+  }};
   let component: WvrFooterComponent;
   let fixture: ComponentFixture<WvrFooterComponent>;
 
-  beforeEach(async(() => {
+  let hostComponent: WvrFooterHostComponent;
+  let hostFixture: ComponentFixture<WvrFooterHostComponent>;
+
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [BrowserAnimationsModule, StoreModule.forRoot(ROOT_REDUCER, { metaReducers })],
+      imports: [
+        BrowserAnimationsModule
+      ],
+      providers: [
+        {
+          provide: APP_CONFIG,
+          useValue: testAppConfig
+        },
+        provideMockStore({initialState})
+      ],
       declarations: [WvrFooterComponent],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     })
@@ -21,6 +45,11 @@ describe('WvrFooterComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(WvrFooterComponent);
     component = fixture.componentInstance;
+
+    hostFixture = TestBed.createComponent(WvrFooterHostComponent);
+    hostComponent = hostFixture.componentInstance;
+
+    hostFixture.detectChanges();
     fixture.detectChanges();
   });
 
diff --git a/projects/wvr-elements/src/lib/wvr-footer/wvr-footer.component.ts b/projects/wvr-elements/src/lib/wvr-footer/wvr-footer.component.ts
index 43780e6bb..9850d3e35 100644
--- a/projects/wvr-elements/src/lib/wvr-footer/wvr-footer.component.ts
+++ b/projects/wvr-elements/src/lib/wvr-footer/wvr-footer.component.ts
@@ -58,6 +58,7 @@ export class WvrFooterComponent extends WvrBaseComponent implements OnInit {
    * a call to positionSelf as the callback method.
    */
   ngOnInit(): void {
+    super.ngOnInit();
     // this.parentElement = (this._eRef.nativeElement as HTMLElement).parentElement;
     this.parentElement = document.querySelector(this.parentElementName);
     this.footerElement = (this._eRef.nativeElement as HTMLElement).querySelector('footer.wvr-footer');
diff --git a/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.html b/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.html
index f44539003..a8473efc0 100644
--- a/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.html
+++ b/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.html
@@ -67,7 +67,7 @@
 </div>
 
 <ng-template #topNavContent>
-  <div *ngIf="!isMobileLayout">
+  <div class="top-nav-wrapper" *ngIf="!isMobileLayout">
     <ng-content select="wvre-nav-list[top-navigation],wvr-nav-list-component[top-navigation]"></ng-content>
   </div>
 </ng-template>
diff --git a/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.scss b/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.scss
index bd58fe374..2511d8852 100644
--- a/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.scss
+++ b/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.scss
@@ -1,13 +1,17 @@
 @import "../shared/styles/wvr-variables.scss";
+@import "../shared/styles/variables";
 
 :host {
+
+  @extend .variables;
+
   --bottom-nav-background: var(--wvr-gray);
   --bottom-nav-height: var(--wvr-navbar-height);
   --bottom-nav-padding: var(--wvr-navbar-padding);
   --logo-img-width: 30px;
   --logo-img-height: 30px;
   --logo-img-margin: 0 0 0 0;
-  --title-row-background: var(--wvr-primary);
+  --title-row-background: var(--primary);
   --title-row-height: var(--wvr-navbar-height);
   --top-nav-background: var(--wvr-secondary);
   --top-nav-height: var(--wvr-navbar-height);
@@ -37,6 +41,14 @@
     margin: var(--logo-img-margin);
   }
 
+  .top-nav-wrapper {
+    ::ng-deep {
+      wvre-nav-list[top-navigation] > ul > wvre-nav-li > li > wvre-dropdown > .wvr-dropdown > .dropdown > wvr-button-component > button-wrapper{
+        display: flex;
+        justify-content: center;
+      }
+    }
+  }
 }
 
 .title-row {
diff --git a/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.spec.ts b/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.spec.ts
index d8cab2ae7..1a6773e2b 100644
--- a/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.spec.ts
@@ -1,26 +1,46 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { StoreModule } from '@ngrx/store';
-import { metaReducers, ROOT_REDUCER } from '../core/store';
+import { provideMockStore } from '@ngrx/store/testing';
 import { APP_CONFIG } from '../shared/config/app-config';
 import { testAppConfig } from '../shared/config/test-app-config';
 import { WvrHeaderComponent } from './wvr-header.component';
 
+@Component({
+  selector: 'wvr-header-host-component',
+  // tslint:disable-next-line:component-max-inline-declarations
+  template: '<wvr-header-component></wvr-header-component>'
+})
+class WvrHeaderHostComponent {
+  @ViewChild(WvrHeaderComponent) header: WvrHeaderComponent;
+}
+
 describe('WvrHeaderComponent', () => {
+  const initialState = { theme: {
+    themes: {}
+  }};
   let component: WvrHeaderComponent;
   let fixture: ComponentFixture<WvrHeaderComponent>;
 
-  beforeEach(async(() => {
+  let hostComponent: WvrHeaderHostComponent;
+  let hostFixture: ComponentFixture<WvrHeaderHostComponent>;
+
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [ BrowserAnimationsModule, StoreModule.forRoot(ROOT_REDUCER, { metaReducers }) ],
+      imports: [
+        BrowserAnimationsModule
+      ],
+      providers: [
+        {
+          provide: APP_CONFIG,
+          useValue: testAppConfig
+        },
+        provideMockStore({initialState})
+      ],
       declarations: [
+        WvrHeaderHostComponent,
         WvrHeaderComponent
       ],
-      providers: [{
-        provide: APP_CONFIG,
-        useValue: testAppConfig
-      }],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     })
       .compileComponents()
@@ -30,6 +50,11 @@ describe('WvrHeaderComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(WvrHeaderComponent);
     component = fixture.componentInstance;
+
+    hostFixture = TestBed.createComponent(WvrHeaderHostComponent);
+    hostComponent = hostFixture.componentInstance;
+
+    hostFixture.detectChanges();
     fixture.detectChanges();
   });
 
diff --git a/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts b/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts
index 37c4636df..6def724df 100644
--- a/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts
+++ b/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.ts
@@ -1,7 +1,6 @@
-import { AfterContentChecked, Component, HostBinding, Inject, Injector, Input, OnInit } from '@angular/core';
+import { AfterContentChecked, Component, HostBinding, Injector, Input, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import * as rootStore from '../core/store';
-import { AppConfig, APP_CONFIG } from '../shared/config/app-config';
 import { WvrSelect } from '../shared/utility/decorators.utilty';
 import { WvrBaseComponent } from '../shared/wvr-base.component';
 
@@ -83,21 +82,19 @@ export class WvrHeaderComponent extends WvrBaseComponent implements OnInit, Afte
 
   mobileMenuClosed = true;
 
+  // tslint:disable-next-line: prefer-readonly
   @WvrSelect({ selector: rootStore.selectManifestEntryResponse('sample', 'one') }) private sampleTestResponse: Observable<string>;
 
   /**
    * The weaver header component constructor
    */
-  constructor(injector: Injector,
-              @Inject(APP_CONFIG) private readonly appConfig: AppConfig) {
+  constructor(injector: Injector) {
     super(injector);
   }
 
   ngOnInit(): void {
     super.ngOnInit();
     this.checkBottomNavHasChildren();
-
-    // this.sampleTestResponse.subscribe(console.log);
   }
 
   ngAfterContentChecked(): void {
diff --git a/projects/wvr-elements/src/lib/wvr-icon/wvr-icon.component.scss b/projects/wvr-elements/src/lib/wvr-icon/wvr-icon.component.scss
index fb55a626b..5b4be3d37 100644
--- a/projects/wvr-elements/src/lib/wvr-icon/wvr-icon.component.scss
+++ b/projects/wvr-elements/src/lib/wvr-icon/wvr-icon.component.scss
@@ -1,6 +1,9 @@
 @import "../shared/styles/wvr-variables.scss";
+@import "../shared/styles/variables";
 
 :host {
+  
+  @extend .variables;
 
   --wvr-icon-color: inherit;
   --wvr-icon-size: inherit;
diff --git a/projects/wvr-elements/src/lib/wvr-icon/wvr-icon.component.spec.ts b/projects/wvr-elements/src/lib/wvr-icon/wvr-icon.component.spec.ts
index 3eb5ebaaf..28523f10f 100644
--- a/projects/wvr-elements/src/lib/wvr-icon/wvr-icon.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-icon/wvr-icon.component.spec.ts
@@ -1,25 +1,51 @@
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, inject, TestBed } from '@angular/core/testing';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild } from '@angular/core';
+import { ComponentFixture, inject, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { StoreModule } from '@ngrx/store';
+import { provideMockStore } from '@ngrx/store/testing';
 import { metaReducers, ROOT_REDUCER } from '../core/store';
 import { APP_CONFIG } from '../shared/config/app-config';
 import { testAppConfig } from '../shared/config/test-app-config';
 import { WvrIconComponent } from './wvr-icon.component';
 
+@Component({
+  selector: 'wvr-icon-host-component',
+  // tslint:disable-next-line:component-max-inline-declarations
+  template: '<wvr-icon-component></wvr-icon-component>'
+})
+class WvrIconHostComponent {
+  @ViewChild(WvrIconComponent) icon: WvrIconComponent;
+}
+
 describe('WvrIconComponent', () => {
+  const initialState = { theme: {
+    themes: {}
+  }};
   let component: WvrIconComponent;
   let fixture: ComponentFixture<WvrIconComponent>;
 
-  beforeEach(async(() => {
+  let hostComponent: WvrIconHostComponent;
+  let hostFixture: ComponentFixture<WvrIconHostComponent>;
+
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule, BrowserAnimationsModule, StoreModule.forRoot(ROOT_REDUCER, { metaReducers })],
-      declarations: [WvrIconComponent],
-      providers: [{
-        provide: APP_CONFIG,
-        useValue: testAppConfig
-      }],
+      imports: [
+        HttpClientTestingModule,
+        BrowserAnimationsModule,
+        StoreModule.forRoot(ROOT_REDUCER, { metaReducers })
+      ],
+      providers: [
+        {
+          provide: APP_CONFIG,
+          useValue: testAppConfig
+        },
+        provideMockStore({initialState})
+      ],
+      declarations: [
+        WvrIconComponent,
+        WvrIconHostComponent
+      ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     })
     .compileComponents();
@@ -28,6 +54,11 @@ describe('WvrIconComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(WvrIconComponent);
     component = fixture.componentInstance;
+
+    hostFixture = TestBed.createComponent(WvrIconHostComponent);
+    hostComponent = hostFixture.componentInstance;
+
+    hostFixture.detectChanges();
     fixture.detectChanges();
   });
 
@@ -38,4 +69,9 @@ describe('WvrIconComponent', () => {
     })
   );
 
+  it('should have as size as  "24px"', () => {
+    expect(component.size)
+      .toEqual('24px');
+  });
+
 });
diff --git a/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.html b/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.html
index 318c1e9d0..baee8f300 100644
--- a/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.html
+++ b/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.html
@@ -1,5 +1,5 @@
 <div role="main" class="container" #animationRoot>
   <div class="jumbotron">
-    <h1 class="it-works">{{text}}!!!</h1>
+    <h1 class="it-works text-{{themeVariant}}">{{text}}!!!</h1>
   </div>
 </div>
diff --git a/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.scss b/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.scss
index 7e3d9bd7f..2a42fc6a9 100644
--- a/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.scss
+++ b/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.scss
@@ -1,13 +1,18 @@
 @import "../shared/styles/wvr-variables.scss";
-
-div.container {
-  overflow: hidden;
-}
-
-.it-works {
-  color: var(--wvr-primary);
-}
+@import "../shared/styles/variables";
 
 :host {
+  
+  @extend .variables;
+
   font-family: var(--wvr-font-family-sans-serif);
+
+  div.container {
+    overflow: hidden;
+  }
+  
+  .it-works {
+    color: var(--wvr-primary);
+  }
+
 }
diff --git a/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.spec.ts b/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.spec.ts
index 669cf0f15..2bc28b8ed 100644
--- a/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.spec.ts
@@ -1,18 +1,30 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { StoreModule } from '@ngrx/store';
-import { metaReducers, ROOT_REDUCER } from '../core/store';
+import { provideMockStore } from '@ngrx/store/testing';
+import { APP_CONFIG, testAppConfig } from '../shared/config';
 import { WvrItWorksComponent } from './wvr-it-works.component';
 
 describe('WvrItWorksComponent', () => {
+  const initialState = { theme: {
+    themes: {}
+  }};
   let component: WvrItWorksComponent;
   let fixture: ComponentFixture<WvrItWorksComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [BrowserAnimationsModule, StoreModule.forRoot(ROOT_REDUCER, { metaReducers })],
+      imports: [
+        BrowserAnimationsModule
+      ],
       declarations: [WvrItWorksComponent],
+      providers: [
+        {
+          provide: APP_CONFIG,
+          useValue: testAppConfig
+        },
+        provideMockStore({initialState})
+      ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     })
       .compileComponents()
diff --git a/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.ts b/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.ts
index f5dea5d99..fb407f7c8 100644
--- a/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.ts
+++ b/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.ts
@@ -1,6 +1,7 @@
 import { Component, HostBinding, Injector, Input } from '@angular/core';
 import { Observable } from 'rxjs';
 import { selectManifestEntryResponse } from '../core/store';
+import { ThemeVariantName } from '../shared/theme';
 import { WvrSelect } from '../shared/utility/decorators.utilty';
 import { WvrBaseComponent } from '../shared/wvr-base.component';
 
@@ -14,6 +15,9 @@ import { WvrBaseComponent } from '../shared/wvr-base.component';
 })
 export class WvrItWorksComponent extends WvrBaseComponent {
 
+  /** Used to define the class type for button component.  */
+  @Input() themeVariant: ThemeVariantName = 'primary';
+
   /** The text value to be displayed in the title. */
   title = 'it-works-component';
 
diff --git a/projects/wvr-elements/src/lib/wvr-lib.module.ts b/projects/wvr-elements/src/lib/wvr-lib.module.ts
index 8f8dbcad6..06884f6d7 100644
--- a/projects/wvr-elements/src/lib/wvr-lib.module.ts
+++ b/projects/wvr-elements/src/lib/wvr-lib.module.ts
@@ -6,18 +6,20 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { EffectsModule } from '@ngrx/effects';
-import { Store, StoreModule } from '@ngrx/store';
+import { StoreModule } from '@ngrx/store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import { AnimationService } from './core/animation.service';
 import { IconService } from './core/icon.service';
-import * as ManifestActions from './core/manifest/manifest.actions';
 import { ManifestEffects } from './core/manifest/manifest.effects';
 import { MobileService } from './core/mobile.service';
 import { RestEffects } from './core/rest/rest.effects';
-import { metaReducers, RootState, ROOT_REDUCER } from './core/store';
+import { metaReducers, ROOT_REDUCER } from './core/store';
 import { TemplateService } from './core/template.service';
-import { WvrAnimationService } from './core/wvr-animation.service';
+import { ThemeEffects } from './core/theme/theme.effects';
+import { ThemeService } from './core/theme/theme.service';
 import { DefaultPipe } from './shared/pipes/default.pipe';
 import { SafePipe } from './shared/pipes/safe.pipe';
+import { wvrTimeout } from './shared/utility';
 import { WvrAlertComponent } from './wvr-alert/wvr-alert.component';
 import { WvrButtonComponent } from './wvr-button/wvr-button.component';
 import { WvrCardComponent } from './wvr-card/wvr-card.component';
@@ -35,12 +37,15 @@ import { WvrNavListComponent } from './wvr-nav-list/wvr-nav-list.component';
 import { WvrTabComponent } from './wvr-tabs/wvr-tab/wvr-tab.component';
 import { WvrTabsComponent } from './wvr-tabs/wvr-tabs.component';
 import { WvrTextComponent } from './wvr-text/wvr-text.component';
+import { WvrThemeComponent } from './wvr-theme/wvr-theme.component';
+import { WvrColorPreviewComponent } from './wvr-color-preview/wvr-color-preview.component';
 
 /** This property contains a list of components and the selector tags. */
 const elements = [
   { component: WvrAlertComponent, selector: 'wvre-alert' },
   { component: WvrButtonComponent, selector: 'wvre-button' },
   { component: WvrCardComponent, selector: 'wvre-card' },
+  { component: WvrColorPreviewComponent, selector: 'wvre-color-preview' },
   { component: WvrDropdownComponent, selector: 'wvre-dropdown' },
   { component: WvrFooterComponent, selector: 'wvre-footer' },
   { component: WvrHeaderComponent, selector: 'wvre-header' },
@@ -54,7 +59,8 @@ const elements = [
   { component: WvrNavLiComponent, selector: 'wvre-nav-li' },
   { component: WvrTextComponent, selector: 'wvre-text' },
   { component: WvrTabsComponent, selector: 'wvre-tabs' },
-  { component: WvrTabComponent, selector: 'wvre-tab' }
+  { component: WvrTabComponent, selector: 'wvre-tab' },
+  { component: WvrThemeComponent, selector: 'wvre-theme' }
 ];
 
 /** This property contains a list of components classes. */
@@ -62,6 +68,7 @@ const components = [
   WvrAlertComponent,
   WvrButtonComponent,
   WvrCardComponent,
+  WvrColorPreviewComponent,
   WvrDropdownComponent,
   WvrFooterComponent,
   WvrHeaderComponent,
@@ -75,7 +82,8 @@ const components = [
   WvrManifestComponent,
   WvrManifestEntryComponent,
   WvrTabsComponent,
-  WvrTabComponent
+  WvrTabComponent,
+  WvrThemeComponent
 ];
 
 const pipes = [
@@ -83,6 +91,22 @@ const pipes = [
   DefaultPipe
 ];
 
+const registerCustomElements = (injector: Injector) => {
+  elements.forEach(element => {
+    try {
+      customElements.define(element.selector, createCustomElement(element.component, { injector }));
+    } catch (e) {
+      // console.warn(e);
+    }
+  });
+
+  const doc = injector.get(DOCUMENT);
+  doc.querySelectorAll('[wvr-hide-content]')
+    .forEach(elem => {
+      elem.removeAttribute('wvr-hide-content');
+    });
+};
+
 /** The main module for the Weaver Elements library. */
 @NgModule({
   imports: [
@@ -92,8 +116,9 @@ const pipes = [
     NgbModule,
     StoreModule.forRoot(ROOT_REDUCER, { metaReducers }),
     EffectsModule.forRoot([
+      ManifestEffects,
       RestEffects,
-      ManifestEffects
+      ThemeEffects
     ]),
     StoreDevtoolsModule.instrument()
   ],
@@ -102,9 +127,10 @@ const pipes = [
     ...pipes
   ],
   providers: [
+    AnimationService,
     IconService,
     MobileService,
-    WvrAnimationService,
+    ThemeService,
     TemplateService
   ],
   declarations: [
@@ -118,19 +144,11 @@ const pipes = [
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class WvrLibModule {
-  constructor(injector: Injector, store: Store<RootState>) {
-    elements.forEach(element => {
-      try {
-        customElements.define(element.selector, createCustomElement(element.component, { injector }));
-      } catch (e) {
-        // console.warn(e);
-      }
+  constructor(injector: Injector) {
+    registerCustomElements(injector);
+    wvrTimeout(() => {
+      document.querySelector('body').style.display = 'block';
     });
-    const doc = injector.get(DOCUMENT);
-    doc.querySelectorAll('[wvr-hide-content]')
-      .forEach(elem => {
-        elem.removeAttribute('wvr-hide-content');
-      });
   }
 
 }
diff --git a/projects/wvr-elements/src/lib/wvr-list/wvr-list-item/wvr-list-item.component.html b/projects/wvr-elements/src/lib/wvr-list/wvr-list-item/wvr-list-item.component.html
index 616fd9806..09121b226 100644
--- a/projects/wvr-elements/src/lib/wvr-list/wvr-list-item/wvr-list-item.component.html
+++ b/projects/wvr-elements/src/lib/wvr-list/wvr-list-item/wvr-list-item.component.html
@@ -9,35 +9,15 @@
   <ng-container *ngTemplateOutlet="content"></ng-container>
 </dd>
 
-<li class="list-group-item d-flex justify-content-between align-items-center"
+<li class="list-group-item d-flex justify-content-between align-items-center list-group-item-{{themeVariant}}"
     *ngIf="listType==='group-ul' || listType==='group'"
-    [id]="htmlId"
-    [ngClass]="{
-      'list-group-item-primary': context === 'primary',
-      'list-group-item-secondary': context === 'secondary',
-      'list-group-item-success': context === 'success',
-      'list-group-item-danger': context === 'danger',
-      'list-group-item-info': context === 'info',
-      'list-group-item-warning': context === 'warning',
-      'list-group-item-light': context === 'light',
-      'list-group-item-dark': context === 'dark'
-    }">
+    [id]="htmlId">
   <ng-container *ngTemplateOutlet="content"></ng-container>
 </li>
 
-<button class="list-group-item list-group-item-action"
+<button class="list-group-item list-group-item-action list-group-item-{{themeVariant}}"
         *ngIf="listType==='group-div'"
-        [id]="htmlId"
-        [ngClass]="{
-          'list-group-item-primary': context === 'primary',
-          'list-group-item-secondary': context === 'secondary',
-          'list-group-item-success': context === 'success',
-          'list-group-item-danger': context === 'danger',
-          'list-group-item-info': context === 'info',
-          'list-group-item-warning': context === 'warning',
-          'list-group-item-light': context === 'light',
-          'list-group-item-dark': context === 'dark'
-        }">
+        [id]="htmlId">
   <ng-container *ngTemplateOutlet="content"></ng-container>
 </button>
 
diff --git a/projects/wvr-elements/src/lib/wvr-list/wvr-list-item/wvr-list-item.component.scss b/projects/wvr-elements/src/lib/wvr-list/wvr-list-item/wvr-list-item.component.scss
index 353ce5c6a..affeaacdd 100644
--- a/projects/wvr-elements/src/lib/wvr-list/wvr-list-item/wvr-list-item.component.scss
+++ b/projects/wvr-elements/src/lib/wvr-list/wvr-list-item/wvr-list-item.component.scss
@@ -1,4 +1,9 @@
+@import "../../shared/styles/wvr-variables.scss";
+@import "../../shared/styles/variables";
+
 :host {
+  
+  @extend .variables;
 
   // list-item default colors
   --wvr-list-group-item-primary-color-default: #004085;
diff --git a/projects/wvr-elements/src/lib/wvr-list/wvr-list-item/wvr-list-item.component.spec.ts b/projects/wvr-elements/src/lib/wvr-list/wvr-list-item/wvr-list-item.component.spec.ts
index 3bbc6aac2..2806537cd 100644
--- a/projects/wvr-elements/src/lib/wvr-list/wvr-list-item/wvr-list-item.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-list/wvr-list-item/wvr-list-item.component.spec.ts
@@ -1,18 +1,30 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { StoreModule } from '@ngrx/store';
-import { metaReducers, ROOT_REDUCER } from '../../core/store';
+import { provideMockStore } from '@ngrx/store/testing';
+import { APP_CONFIG, testAppConfig } from '../../shared/config';
 import { WvrListItemComponent } from './wvr-list-item.component';
 
 describe('WvrListItemComponent', () => {
+  const initialState = { theme: {
+    themes: {}
+  }};
   let component: WvrListItemComponent;
   let fixture: ComponentFixture<WvrListItemComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [BrowserAnimationsModule, StoreModule.forRoot(ROOT_REDUCER, { metaReducers })],
+      imports: [
+        BrowserAnimationsModule
+      ],
       declarations: [WvrListItemComponent],
+      providers: [
+        {
+          provide: APP_CONFIG,
+          useValue: testAppConfig
+        },
+        provideMockStore({initialState})
+      ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     })
       .compileComponents();
diff --git a/projects/wvr-elements/src/lib/wvr-list/wvr-list-item/wvr-list-item.component.ts b/projects/wvr-elements/src/lib/wvr-list/wvr-list-item/wvr-list-item.component.ts
index cb67309d1..0ac3898df 100644
--- a/projects/wvr-elements/src/lib/wvr-list/wvr-list-item/wvr-list-item.component.ts
+++ b/projects/wvr-elements/src/lib/wvr-list/wvr-list-item/wvr-list-item.component.ts
@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, Injector, Input, OnInit } from '@angular/core';
-import { Theme } from '../../shared/theme.type';
+import { ThemeVariantName } from '../../shared/theme';
 import { WvrBaseComponent } from '../../shared/wvr-base.component';
 
 /**
@@ -19,7 +19,7 @@ export class WvrListItemComponent extends WvrBaseComponent implements OnInit, Af
   @Input() description: string;
 
   /** The visual contextualization for this list item. */
-  @Input() context: Theme;
+  @Input() themeVariant: ThemeVariantName;
 
   /** A heading to be displayed for list items with custom content. */
   @Input() customContentItemHeading: string;
@@ -33,15 +33,18 @@ export class WvrListItemComponent extends WvrBaseComponent implements OnInit, Af
   /** A contructed identifier dervied from this comonents id and the prefix `wvr-li` */
   htmlId = `wvr-li-${this.id}`;
 
+  variantTypes = ['list-group-item'];
+
   constructor(injector: Injector) {
     super(injector);
   }
 
   /** Registers this list item with the parent list. */
   ngOnInit(): void {
+    super.ngOnInit();
     const parent = this._eRef.nativeElement.parentNode.parentNode.parentNode;
     this.listType = parent.listType;
-    this.context = this.context ? this.context : parent.context ? parent.context : undefined;
+    this.themeVariant = this.themeVariant ? this.themeVariant : parent.themeVariant ? parent.themeVariant : undefined;
   }
 
   ngAfterViewInit(): void {
diff --git a/projects/wvr-elements/src/lib/wvr-list/wvr-list.component.html b/projects/wvr-elements/src/lib/wvr-list/wvr-list.component.html
index f4bebbd05..0d5748208 100644
--- a/projects/wvr-elements/src/lib/wvr-list/wvr-list.component.html
+++ b/projects/wvr-elements/src/lib/wvr-list/wvr-list.component.html
@@ -36,5 +36,5 @@
 </wvre-list-wrapper>
 
 <ng-template #selection>
-  <ng-content select="wvre-list-item, wvr-list-item-component, wvre-template"></ng-content>
+  <ng-content select="wvre-list-item, wvr-list-item-component, template[wvr-compile]"></ng-content>
 </ng-template>
diff --git a/projects/wvr-elements/src/lib/wvr-list/wvr-list.component.scss b/projects/wvr-elements/src/lib/wvr-list/wvr-list.component.scss
index e1a7b441b..ec08611d9 100644
--- a/projects/wvr-elements/src/lib/wvr-list/wvr-list.component.scss
+++ b/projects/wvr-elements/src/lib/wvr-list/wvr-list.component.scss
@@ -1,6 +1,10 @@
 @import "../shared/styles/wvr-variables.scss";
+@import "../shared/styles/variables";
 
 :host {
+  
+  @extend .variables;
+  
   font-family: var(--wvr-font-family-sans-serif);
 
   wvre-list-wrapper {
diff --git a/projects/wvr-elements/src/lib/wvr-list/wvr-list.component.spec.ts b/projects/wvr-elements/src/lib/wvr-list/wvr-list.component.spec.ts
index 8515a4bbc..63697716b 100644
--- a/projects/wvr-elements/src/lib/wvr-list/wvr-list.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-list/wvr-list.component.spec.ts
@@ -1,18 +1,30 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { StoreModule } from '@ngrx/store';
-import { metaReducers, ROOT_REDUCER } from '../core/store';
+import { provideMockStore } from '@ngrx/store/testing';
+import { APP_CONFIG, testAppConfig } from '../shared/config';
 import { WvrListComponent } from './wvr-list.component';
 
 describe('WvrListComponent', () => {
+  const initialState = { theme: {
+    themes: {}
+  }};
   let component: WvrListComponent;
   let fixture: ComponentFixture<WvrListComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [BrowserAnimationsModule, StoreModule.forRoot(ROOT_REDUCER, { metaReducers })],
+      imports: [
+        BrowserAnimationsModule
+      ],
       declarations: [WvrListComponent],
+      providers: [
+        {
+          provide: APP_CONFIG,
+          useValue: testAppConfig
+        },
+        provideMockStore({initialState})
+      ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     })
       .compileComponents();
diff --git a/projects/wvr-elements/src/lib/wvr-list/wvr-list.component.ts b/projects/wvr-elements/src/lib/wvr-list/wvr-list.component.ts
index a53afd043..2005fcc21 100644
--- a/projects/wvr-elements/src/lib/wvr-list/wvr-list.component.ts
+++ b/projects/wvr-elements/src/lib/wvr-list/wvr-list.component.ts
@@ -1,5 +1,5 @@
 import { Component, Injector, Input } from '@angular/core';
-import { Theme } from '../shared/theme.type';
+import { ThemeVariantName } from '../shared/theme';
 import { WvrBaseComponent } from '../shared/wvr-base.component';
 
 /**
@@ -16,7 +16,7 @@ export class WvrListComponent extends WvrBaseComponent {
   @Input() listType = 'unordered';
 
   /** Specifies the display style of this list.  */
-  @Input() context: Theme;
+  @Input() themeVariant: ThemeVariantName;
 
   constructor(injector: Injector) {
     super(injector);
diff --git a/projects/wvr-elements/src/lib/wvr-list/wvr-list.component.ud-examples.html b/projects/wvr-elements/src/lib/wvr-list/wvr-list.component.ud-examples.html
index 8c41ca11f..35965ba86 100644
--- a/projects/wvr-elements/src/lib/wvr-list/wvr-list.component.ud-examples.html
+++ b/projects/wvr-elements/src/lib/wvr-list/wvr-list.component.ud-examples.html
@@ -98,14 +98,14 @@
     Group - Flush <code>wvre-list</code> component.
   </desciption>
   <snippet>
-    <wvre-list list-type="group-flush" context="info">
+    <wvre-list list-type="group-flush" theme-variant="info">
       <wvre-list-item>
         <wvre-text value="Item 1"></wvre-text>
       </wvre-list-item>
-      <wvre-list-item context="warning">
+      <wvre-list-item theme-variant="warning">
         <wvre-text value="Item 2"></wvre-text>
       </wvre-list-item>
-      <wvre-list-item context="success">
+      <wvre-list-item theme-variant="success">
         <wvre-text value="Item 3"></wvre-text>
       </wvre-list-item>
     </wvre-list>
@@ -117,20 +117,20 @@
     Contextual Classes <code>wvre-list</code> component.
   </desciption>
   <snippet>
-    <wvre-list list-type="group-ul" context="info">
+    <wvre-list list-type="group-ul" theme-variant="info">
       <wvre-list-item>
         <wvre-text value="Item 1"></wvre-text>
         <span class="badge badge-primary badge-pill">
           <wvre-text value="14"></wvre-text>
         </span>
       </wvre-list-item>
-      <wvre-list-item context="warning">
+      <wvre-list-item theme-variant="warning">
         <wvre-text value="Item 2"></wvre-text>
         <span class="badge badge-secondary badge-pill">
           <wvre-text value="28"></wvre-text>
         </span>
       </wvre-list-item>
-      <wvre-list-item context="success">
+      <wvre-list-item theme-variant="success">
         <wvre-text value="Item 3"></wvre-text>
         <span class="badge badge-success badge-pill">
           <wvre-text value="46"></wvre-text>
@@ -175,7 +175,7 @@
   <snippet>
     <wvre-list list-type="unstyled">
       <wvre-list-item>
-        <wvre-button btn-class="link" animate="{click: 'animationTrigger'}" animate-target="list1">
+        <wvre-button theme-variant="link" animate="{click: 'animationTrigger'}" animate-target="list1">
           <wvre-text value="Item One"></wvre-text>
           <wvre-icon set="feather" name="chevron-right" animate="{animationTrigger: 'rotateToggle'}" animate-id="list1"></wvre-icon>
         </wvre-button>
@@ -198,13 +198,13 @@
         </wvre-list>
       </wvre-list-item>
       <wvre-list-item>
-        <wvre-button btn-class="link">
+        <wvre-button theme-variant="link">
           <wvre-text value="Item Two"></wvre-text>
           <wvre-icon set="feather" name="chevron-right"></wvre-icon>
         </wvre-button>
       </wvre-list-item>
       <wvre-list-item>
-        <wvre-button btn-class="link">
+        <wvre-button theme-variant="link">
           <wvre-text value="Item Three"></wvre-text>
           <wvre-icon set="feather" name="chevron-right"></wvre-icon>
         </wvre-button>
diff --git a/projects/wvr-elements/src/lib/wvr-manifest/wvr-manifest-entry/wvr-manifest-entry.component.spec.ts b/projects/wvr-elements/src/lib/wvr-manifest/wvr-manifest-entry/wvr-manifest-entry.component.spec.ts
index 16bc95a42..3e6846793 100644
--- a/projects/wvr-elements/src/lib/wvr-manifest/wvr-manifest-entry/wvr-manifest-entry.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-manifest/wvr-manifest-entry/wvr-manifest-entry.component.spec.ts
@@ -1,10 +1,9 @@
 import { Component, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { StoreModule } from '@ngrx/store';
-import { metaReducers, ROOT_REDUCER } from '../../core/store';
+import { provideMockStore } from '@ngrx/store/testing';
+import { APP_CONFIG, testAppConfig } from '../../shared/config';
 import { WvrManifestComponent } from '../wvr-manifest.component';
-
 import { WvrManifestEntryComponent } from './wvr-manifest-entry.component';
 
 @Component({
@@ -21,6 +20,9 @@ class WvrManifestTestComponent {
 }
 
 describe('WvrManifestEntryComponent', () => {
+  const initialState = { theme: {
+    themes: {}
+  }};
   let wvrManifestTestComponent: WvrManifestTestComponent;
   let fixture: ComponentFixture<WvrManifestTestComponent>;
 
@@ -28,8 +30,17 @@ describe('WvrManifestEntryComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [BrowserAnimationsModule, StoreModule.forRoot(ROOT_REDUCER, { metaReducers })],
-      declarations: [ WvrManifestTestComponent, WvrManifestComponent, WvrManifestEntryComponent ]
+      imports: [
+        BrowserAnimationsModule
+      ],
+      declarations: [ WvrManifestTestComponent, WvrManifestComponent, WvrManifestEntryComponent ],
+      providers: [
+        {
+          provide: APP_CONFIG,
+          useValue: testAppConfig
+        },
+        provideMockStore({initialState})
+      ]
     })
     .compileComponents();
   });
diff --git a/projects/wvr-elements/src/lib/wvr-manifest/wvr-manifest-entry/wvr-manifest-entry.component.ts b/projects/wvr-elements/src/lib/wvr-manifest/wvr-manifest-entry/wvr-manifest-entry.component.ts
index 40d58e9e7..58092c655 100644
--- a/projects/wvr-elements/src/lib/wvr-manifest/wvr-manifest-entry/wvr-manifest-entry.component.ts
+++ b/projects/wvr-elements/src/lib/wvr-manifest/wvr-manifest-entry/wvr-manifest-entry.component.ts
@@ -23,9 +23,12 @@ export class WvrManifestEntryComponent implements OnInit {
 
   private parent: WvrManifestComponent;
 
-  // tslint:disable-next-line:no-empty
-  constructor(private readonly eRef: ElementRef<HTMLElement>, 
-              private readonly componentRegistry: ComponentRegistryService<WvrBaseComponent>) {}
+  constructor(
+    private readonly eRef: ElementRef<HTMLElement>,
+    private readonly componentRegistry: ComponentRegistryService<WvrBaseComponent>
+  ) {
+
+  }
 
   ngOnInit(): void {
     const parentElem = this.eRef.nativeElement.closest('wvre-manifest, wvr-manifest-component');
diff --git a/projects/wvr-elements/src/lib/wvr-manifest/wvr-manifest.component.spec.ts b/projects/wvr-elements/src/lib/wvr-manifest/wvr-manifest.component.spec.ts
index bb4ae2e1f..4021cf8f8 100644
--- a/projects/wvr-elements/src/lib/wvr-manifest/wvr-manifest.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-manifest/wvr-manifest.component.spec.ts
@@ -1,13 +1,12 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { Component, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { StoreModule } from '@ngrx/store';
-import { metaReducers, ROOT_REDUCER } from '../core/store';
+import { provideMockStore } from '@ngrx/store/testing';
+import { APP_CONFIG, testAppConfig } from '../shared/config';
 import { WvrManifestEntryComponent } from './wvr-manifest-entry/wvr-manifest-entry.component';
-
 import { WvrManifestComponent } from './wvr-manifest.component';
 
+
 @Component({
   selector: 'wvr-manifest-test-component',
   // tslint:disable-next-line:component-max-inline-declarations
@@ -23,6 +22,9 @@ class WvrManifestHostComponent {
 }
 
 describe('WvrManifestComponent', () => {
+  const initialState = { theme: {
+    themes: {}
+  }};
   let hostComponent: WvrManifestHostComponent;
   let hostFixture: ComponentFixture<WvrManifestHostComponent>;
 
@@ -31,13 +33,19 @@ describe('WvrManifestComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
-        BrowserAnimationsModule,
-        StoreModule.forRoot(ROOT_REDUCER, { metaReducers })
+        BrowserAnimationsModule
       ],
       declarations: [
         WvrManifestHostComponent,
         WvrManifestComponent,
         WvrManifestEntryComponent
+      ],
+      providers: [
+        {
+          provide: APP_CONFIG,
+          useValue: testAppConfig
+        },
+        provideMockStore({initialState})
       ]
     })
     .compileComponents();
diff --git a/projects/wvr-elements/src/lib/wvr-manifest/wvr-manifest.component.ts b/projects/wvr-elements/src/lib/wvr-manifest/wvr-manifest.component.ts
index e872c2919..329162fc5 100644
--- a/projects/wvr-elements/src/lib/wvr-manifest/wvr-manifest.component.ts
+++ b/projects/wvr-elements/src/lib/wvr-manifest/wvr-manifest.component.ts
@@ -20,26 +20,30 @@ import { WvrManifestEntryComponent } from './wvr-manifest-entry/wvr-manifest-ent
 export class WvrManifestComponent extends WvrBaseComponent {
 
   /** The name by which this manifest can be referenced */
+  // tslint:disable-next-line: prefer-readonly
   @Input() private name: string;
 
   /** The base URL to be prepended to all paths expressed on ManifestEntries */
+  // tslint:disable-next-line: prefer-readonly
   @Input() private baseUrl: string;
 
   /** A human description of this manifes */
+  // tslint:disable-next-line: prefer-readonly
   @Input() private description: string;
 
   /** The strategy to be employed to unwrao response data */
+  // tslint:disable-next-line: prefer-readonly
   @Input() private mappingStrategy;
 
   /** A collection of the child WvrManifestEntryComponent */
   private readonly manifestEntries = new Array<WvrManifestEntryComponent>();
 
   // tslint:disable-next-line:no-empty
-  constructor(private injector: Injector) {
+  constructor(private readonly injector: Injector) {
     super(injector);
-   }
+  }
 
-  addEntry(manifestEntry: WvrManifestEntryComponent): void  {
+  addEntry(manifestEntry: WvrManifestEntryComponent): void {
     this.manifestEntries.push(manifestEntry);
     this.buildEntries();
   }
@@ -50,14 +54,14 @@ export class WvrManifestComponent extends WvrBaseComponent {
   @debounce() private buildEntries(): void {
 
     let ms = mappingStrategies[this.mappingStrategy] ?
-               mappingStrategies[this.mappingStrategy] :
-               mappingStrategies.none;
+      mappingStrategies[this.mappingStrategy] :
+      mappingStrategies.none;
 
     const entries: Array<ManifestEntry> = this.manifestEntries.map(e => {
       const eMS = e.mappingStrategy;
       ms = mappingStrategies[eMS] ?
-           mappingStrategies[eMS] :
-           ms;
+        mappingStrategies[eMS] :
+        ms;
 
       return {
         name: e.name,
@@ -71,12 +75,12 @@ export class WvrManifestComponent extends WvrBaseComponent {
     });
 
     const manifest: Manifest = {
-        name: this.name,
-        description: this.description,
-        baseUrl: this.baseUrl,
-        entries,
-        authorization: undefined
-      };
+      name: this.name,
+      description: this.description,
+      baseUrl: this.baseUrl,
+      entries,
+      authorization: undefined
+    };
 
     this.store.dispatch(ManifestActions.addManifest({
       manifest
diff --git a/projects/wvr-elements/src/lib/wvr-nav-list/wvr-nav-li/wvr-nav-li.component.scss b/projects/wvr-elements/src/lib/wvr-nav-list/wvr-nav-li/wvr-nav-li.component.scss
index 51fe68d07..879f875ad 100644
--- a/projects/wvr-elements/src/lib/wvr-nav-list/wvr-nav-li/wvr-nav-li.component.scss
+++ b/projects/wvr-elements/src/lib/wvr-nav-list/wvr-nav-li/wvr-nav-li.component.scss
@@ -1,4 +1,10 @@
+@import "../../shared/styles/wvr-variables.scss";
+@import "../../shared/styles/variables";
+
 :host {
+  
+  @extend .variables;
+
   --wvr-nav-li-cursor: pointer;
   --wvr-nav-li-height: 100%;
   --wvr-nav-li-width: 140px;
diff --git a/projects/wvr-elements/src/lib/wvr-nav-list/wvr-nav-li/wvr-nav-li.component.spec.ts b/projects/wvr-elements/src/lib/wvr-nav-list/wvr-nav-li/wvr-nav-li.component.spec.ts
index ebea50af8..485bafe6d 100644
--- a/projects/wvr-elements/src/lib/wvr-nav-list/wvr-nav-li/wvr-nav-li.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-nav-list/wvr-nav-li/wvr-nav-li.component.spec.ts
@@ -1,18 +1,30 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { StoreModule } from '@ngrx/store';
-import { metaReducers, ROOT_REDUCER } from '../../core/store';
+import { provideMockStore } from '@ngrx/store/testing';
+import { APP_CONFIG, testAppConfig } from '../../shared/config';
 import { WvrNavLiComponent } from './wvr-nav-li.component';
 
 describe('WvrNavLiComponent', () => {
+  const initialState = { theme: {
+    themes: {}
+  }};
   let component: WvrNavLiComponent;
   let fixture: ComponentFixture<WvrNavLiComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [BrowserAnimationsModule, StoreModule.forRoot(ROOT_REDUCER, { metaReducers })],
+      imports: [
+        BrowserAnimationsModule
+      ],
       declarations: [WvrNavLiComponent],
+      providers: [
+        {
+          provide: APP_CONFIG,
+          useValue: testAppConfig
+        },
+        provideMockStore({initialState})
+      ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     })
       .compileComponents()
diff --git a/projects/wvr-elements/src/lib/wvr-nav-list/wvr-nav-list.component.scss b/projects/wvr-elements/src/lib/wvr-nav-list/wvr-nav-list.component.scss
index ec2c3fa61..476d3ced7 100644
--- a/projects/wvr-elements/src/lib/wvr-nav-list/wvr-nav-list.component.scss
+++ b/projects/wvr-elements/src/lib/wvr-nav-list/wvr-nav-list.component.scss
@@ -1,6 +1,10 @@
 @import "../shared/styles/wvr-variables.scss";
+@import "../shared/styles/variables";
 
 :host {
+  
+  @extend .variables;
+
   --wvr-nav-list-height: 100%;
 }
 
diff --git a/projects/wvr-elements/src/lib/wvr-nav-list/wvr-nav-list.component.spec.ts b/projects/wvr-elements/src/lib/wvr-nav-list/wvr-nav-list.component.spec.ts
index 9d08d5d9e..5d84a33cd 100644
--- a/projects/wvr-elements/src/lib/wvr-nav-list/wvr-nav-list.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-nav-list/wvr-nav-list.component.spec.ts
@@ -1,19 +1,31 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { StoreModule } from '@ngrx/store';
-import { metaReducers, ROOT_REDUCER } from '../core/store';
+import { provideMockStore } from '@ngrx/store/testing';
 import { Alignment } from '../shared/alignment.enum';
+import { APP_CONFIG, testAppConfig } from '../shared/config';
 import { WvrNavListComponent } from './wvr-nav-list.component';
 
 describe('WvrNavListComponent', () => {
+  const initialState = { theme: {
+    themes: {}
+  }};
   let component: WvrNavListComponent;
   let fixture: ComponentFixture<WvrNavListComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [BrowserAnimationsModule, StoreModule.forRoot(ROOT_REDUCER, { metaReducers })],
+      imports: [
+        BrowserAnimationsModule
+      ],
       declarations: [WvrNavListComponent],
+      providers: [
+        {
+          provide: APP_CONFIG,
+          useValue: testAppConfig
+        },
+        provideMockStore({initialState})
+      ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     })
       .compileComponents()
diff --git a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.scss b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.scss
index be022364d..b1cfec8ba 100644
--- a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.scss
+++ b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.scss
@@ -1,5 +1,9 @@
 @import "../../shared/styles/wvr-variables.scss";
+@import "../../shared/styles/variables";
 
 :host {
+  
+  @extend .variables;
+
   font-family: var(--wvr-font-family-sans-serif);
 }
diff --git a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.spec.ts b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.spec.ts
index 73e77d148..895070c04 100644
--- a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.spec.ts
@@ -1,13 +1,15 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { StoreModule } from '@ngrx/store';
-import { metaReducers, ROOT_REDUCER } from '../../core/store';
+import { provideMockStore } from '@ngrx/store/testing';
+import { APP_CONFIG, testAppConfig } from '../../shared/config';
 import { WvrTabsComponent } from '../wvr-tabs.component';
-
 import { WvrTabComponent } from './wvr-tab.component';
 
 describe('WvrTabComponent', () => {
+  const initialState = { theme: {
+    themes: {}
+  }};
   let component: WvrTabComponent;
   let fixture: ComponentFixture<WvrTabComponent>;
 
@@ -16,8 +18,17 @@ describe('WvrTabComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [BrowserAnimationsModule, StoreModule.forRoot(ROOT_REDUCER, { metaReducers })],
+      imports: [
+        BrowserAnimationsModule
+      ],
       declarations: [WvrTabsComponent, WvrTabComponent],
+      providers: [
+        {
+          provide: APP_CONFIG,
+          useValue: testAppConfig
+        },
+        provideMockStore({initialState})
+      ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     })
       .compileComponents();
diff --git a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.scss b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.scss
index 7c8142e53..7d02292a3 100644
--- a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.scss
+++ b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.scss
@@ -1,7 +1,10 @@
 @import "../shared/styles/wvr-variables.scss";
+@import "../shared/styles/variables";
 
 :host {
 
+  @extend .variables;
+
   --tab-content-display: block;
   --tab-content-padding: 25px 0px;
 
diff --git a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.spec.ts b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.spec.ts
index 26c7d408f..c6d59f723 100644
--- a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.spec.ts
@@ -1,12 +1,15 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { StoreModule } from '@ngrx/store';
-import { metaReducers, ROOT_REDUCER } from '../core/store';
+import { provideMockStore } from '@ngrx/store/testing';
+import { APP_CONFIG, testAppConfig } from '../shared/config';
 import { WvrTabComponent } from './wvr-tab/wvr-tab.component';
 import { WvrTabsComponent } from './wvr-tabs.component';
 
 describe('WvrTabsComponent', () => {
+  const initialState = { theme: {
+    themes: {}
+  }};
   let component: WvrTabsComponent;
   let fixture: ComponentFixture<WvrTabsComponent>;
   let wvrTabComponent: WvrTabComponent;
@@ -14,8 +17,17 @@ describe('WvrTabsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [BrowserAnimationsModule, StoreModule.forRoot(ROOT_REDUCER, { metaReducers })],
+      imports: [
+        BrowserAnimationsModule
+      ],
       declarations: [WvrTabsComponent],
+      providers: [
+        {
+          provide: APP_CONFIG,
+          useValue: testAppConfig
+        },
+        provideMockStore({initialState})
+      ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     })
       .compileComponents();
diff --git a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.ts b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.ts
index 9c73e26f4..1b953a396 100644
--- a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.ts
+++ b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.ts
@@ -14,7 +14,7 @@ import { WvrTabComponent } from './wvr-tab/wvr-tab.component';
 export class WvrTabsComponent extends WvrBaseComponent {
 
   /** The child WvrTabComponent contained within this tabs. */
-  private tabs = new Array<WvrTabComponent>();
+  private readonly tabs = new Array<WvrTabComponent>();
 
   /**  The WvrTabComponent that is currently active (displayed) */
   activeTab: WvrTabComponent;
@@ -45,7 +45,9 @@ export class WvrTabsComponent extends WvrBaseComponent {
 
   /* Deactivates all tabs within the tabs array */
   deactivateTabs(): void {
-    this.tabs.forEach(t => t.deActivate());
+    this.tabs.forEach(t => {
+      t.deActivate();
+    });
   }
 
 }
diff --git a/projects/wvr-elements/src/lib/wvr-text/wvr-text.component.html b/projects/wvr-elements/src/lib/wvr-text/wvr-text.component.html
index 304882ba0..6ecd62591 100644
--- a/projects/wvr-elements/src/lib/wvr-text/wvr-text.component.html
+++ b/projects/wvr-elements/src/lib/wvr-text/wvr-text.component.html
@@ -1,2 +1 @@
-<wvre-text-node #animationRoot
->{{value}}</wvre-text-node>
+<wvre-text-node #animationRoot>{{value}}</wvre-text-node>
diff --git a/projects/wvr-elements/src/lib/wvr-text/wvr-text.component.scss b/projects/wvr-elements/src/lib/wvr-text/wvr-text.component.scss
index 975b20c32..c30321117 100644
--- a/projects/wvr-elements/src/lib/wvr-text/wvr-text.component.scss
+++ b/projects/wvr-elements/src/lib/wvr-text/wvr-text.component.scss
@@ -1,7 +1,10 @@
 @import "../shared/styles/wvr-variables.scss";
+@import "../shared/styles/variables";
 
 :host {
 
+  @extend .variables;
+
   //font rules
   --wvr-text-font-size: default;
   --wvr-text-font-family: default;
diff --git a/projects/wvr-elements/src/lib/wvr-text/wvr-text.component.spec.ts b/projects/wvr-elements/src/lib/wvr-text/wvr-text.component.spec.ts
index 21bd65b8f..c21a2daa4 100644
--- a/projects/wvr-elements/src/lib/wvr-text/wvr-text.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-text/wvr-text.component.spec.ts
@@ -1,18 +1,30 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { StoreModule } from '@ngrx/store';
-import { metaReducers, ROOT_REDUCER } from '../core/store';
+import { provideMockStore } from '@ngrx/store/testing';
+import { APP_CONFIG, testAppConfig } from '../shared/config';
 import { WvrTextComponent } from './wvr-text.component';
 
 describe('WvrTextComponent', () => {
+  const initialState = { theme: {
+    themes: {}
+  }};
   let component: WvrTextComponent;
   let fixture: ComponentFixture<WvrTextComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [BrowserAnimationsModule, StoreModule.forRoot(ROOT_REDUCER, { metaReducers })],
+      imports: [
+        BrowserAnimationsModule
+      ],
       declarations: [WvrTextComponent],
+      providers: [
+        {
+          provide: APP_CONFIG,
+          useValue: testAppConfig
+        },
+        provideMockStore({initialState})
+      ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     })
       .compileComponents()
diff --git a/projects/wvr-elements/src/lib/wvr-theme/wvr-theme.component.spec.ts b/projects/wvr-elements/src/lib/wvr-theme/wvr-theme.component.spec.ts
new file mode 100644
index 000000000..ca2d071a8
--- /dev/null
+++ b/projects/wvr-elements/src/lib/wvr-theme/wvr-theme.component.spec.ts
@@ -0,0 +1,42 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { provideMockStore } from '@ngrx/store/testing';
+import { APP_CONFIG, testAppConfig } from '../shared/config';
+import { WvrThemeComponent } from './wvr-theme.component';
+
+
+describe('WvrThemeComponent', () => {
+  const initialState = { theme: {
+    themes: {}
+  }};
+  let component: WvrThemeComponent;
+  let fixture: ComponentFixture<WvrThemeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        BrowserAnimationsModule
+      ],
+      declarations: [ WvrThemeComponent ],
+      providers: [
+        {
+          provide: APP_CONFIG,
+          useValue: testAppConfig
+        },
+        provideMockStore({initialState})
+      ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WvrThemeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component)
+      .toBeTruthy();
+  });
+});
diff --git a/projects/wvr-elements/src/lib/wvr-theme/wvr-theme.component.ts b/projects/wvr-elements/src/lib/wvr-theme/wvr-theme.component.ts
new file mode 100644
index 000000000..a0913bbf6
--- /dev/null
+++ b/projects/wvr-elements/src/lib/wvr-theme/wvr-theme.component.ts
@@ -0,0 +1,49 @@
+/* istanbul ignore file */
+
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { Store } from '@ngrx/store';
+import * as JSON5 from 'json5';
+import { RootState } from '../core/store';
+
+import * as ThemeActions from '../core/theme/theme.actions';
+import { ThemeVariants } from '../shared/theme';
+
+@Component({
+  selector: 'wvr-theme-component',
+  template: '<ng-content></ng-content>'
+})
+export class WvrThemeComponent implements OnChanges {
+
+  private _variants: ThemeVariants;
+
+  // tslint:disable-next-line: prefer-readonly
+  @Input() private name: string;
+
+  @Input() private active = false;
+
+  // tslint:disable-next-line: prefer-readonly
+  @Input() set variants(value: string) {
+    this._variants = JSON5.parse(value);
+  }
+
+  constructor(private readonly store: Store<RootState>) {
+
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (this.name && this._variants) {
+      this.store.dispatch(ThemeActions.add({
+        name: this.name,
+        theme: this._variants
+      }));
+    }
+
+    if (this.name && this.active) {
+      this.store.dispatch(ThemeActions.select({
+        name: this.name
+      }));
+    }
+
+  }
+
+}
diff --git a/projects/wvr-elements/src/lib/wvr-theme/wvr-theme.component.ud-examples.html b/projects/wvr-elements/src/lib/wvr-theme/wvr-theme.component.ud-examples.html
new file mode 100644
index 000000000..e66be1e89
--- /dev/null
+++ b/projects/wvr-elements/src/lib/wvr-theme/wvr-theme.component.ud-examples.html
@@ -0,0 +1,39 @@
+<example name="Weaver Theme">
+  <desciption>
+    The default <code>wvre-theme</code> component with no customizations.
+  </desciption>
+  <snippet>
+    <wvre-color-preview></wvre-color-preview>
+
+    <wvre-theme name="theme-demo" variants="{
+      primary: {
+        baseColor: '#375a7f'
+      },
+      secondary: {
+        baseColor: '#444'
+      },
+      success: {
+        baseColor: '#00bc8c'
+      },
+      danger: {
+        baseColor: '#e74c3c'
+      },
+      warning: {
+        baseColor: '#f39c12'
+      },
+      info: {
+        baseColor: '#3498db'
+      },
+      light: {
+        baseColor: '#adb5bd'
+      },
+      dark: {
+        baseColor: '#222'
+      },
+      accent: {
+        baseColor: '#6f42c1'
+      }
+    }"></wvre-theme>
+
+  </snippet>
+</example>
diff --git a/projects/wvr-elements/src/public-api.ts b/projects/wvr-elements/src/public-api.ts
index bdb344643..d3a41759e 100644
--- a/projects/wvr-elements/src/public-api.ts
+++ b/projects/wvr-elements/src/public-api.ts
@@ -11,6 +11,7 @@ export * from './lib/core/icon.service';
 export * from './lib/wvr-alert/wvr-alert.component';
 export * from './lib/wvr-button/wvr-button.component';
 export * from './lib/wvr-card/wvr-card.component';
+export * from './lib/wvr-color-preview/wvr-color-preview.component';
 export * from './lib/wvr-dropdown/wvr-dropdown.component';
 export * from './lib/wvr-footer/wvr-footer.component';
 export * from './lib/wvr-header/wvr-header.component';
@@ -24,4 +25,4 @@ export * from './lib/wvr-nav-list/wvr-nav-list.component';
 export * from './lib/wvr-tabs/wvr-tabs.component';
 export * from './lib/wvr-tabs/wvr-tab/wvr-tab.component';
 export * from './lib/wvr-text/wvr-text.component';
-export * from './lib/core/store';
+export * from './lib/wvr-theme/wvr-theme.component';
diff --git a/scripts/build-publish.js b/scripts/build-publish.js
index d9af4d51a..8737882f0 100644
--- a/scripts/build-publish.js
+++ b/scripts/build-publish.js
@@ -3,6 +3,7 @@
 const fs = require('fs-extra');
 const shell = require('shelljs')
 const angularCli = require('@angular/cli');
+const elementsPath = 'dist/wvr-elements';
 
 const next = process.argv[2] ?
              '--tag next' :
@@ -16,10 +17,11 @@ angularCli.default({
     inputStream: process.stdin,
     outputStream: process.stdout
   }).then(c => {
-    fs.copySync('scripts', "dist/wvr-elements/scripts");
-    fs.copySync('.wvr-ud', "dist/wvr-elements/.wvr-ud");
+    fs.copySync('projects/wvr-elements/src/lib/shared/styles', `${elementsPath}/styles`);
+    fs.copySync('scripts', `${elementsPath}/scripts`);
+    fs.copySync('.wvr-ud', `${elementsPath}/.wvr-ud`);
 
-    shell.exec(`npm publish dist/wvr-elements/ ${next}`);
+    shell.exec(`npm publish ${elementsPath}/ ${next}`);
 
     shell.exit();
 
diff --git a/scripts/build-wvr-components-configuration.js b/scripts/build-wvr-components-configuration.js
index 56355ddb7..525c9793a 100644
--- a/scripts/build-wvr-components-configuration.js
+++ b/scripts/build-wvr-components-configuration.js
@@ -20,6 +20,11 @@ Object.keys(defaults.parsed)
     configTemplate = configTemplate.replace(`$${key}`, defaults.parsed[key])
   });
 
-fs.writeFile('./dist/bundle/config.json', configTemplate);
-fs.writeFile('./static/weaver-components/docs/usage/config.json', configTemplate);
+if(fs.existsSync('./dist')) {
+  fs.writeFile('./dist/bundle/config.json', configTemplate);
+}
+if(fs.existsSync('./static')) {
+  fs.writeFile('./static/config.json', configTemplate);
+}
+
 fs.writeFile('./src/config.json', configTemplate);
diff --git a/scripts/build-wvr-components-style.js b/scripts/build-wvr-components-style.js
new file mode 100644
index 000000000..aa9164269
--- /dev/null
+++ b/scripts/build-wvr-components-style.js
@@ -0,0 +1,10 @@
+#!/usr/bin/env node
+const fs = require('fs-extra');
+const handlebars = require('handlebars');
+const themeVariants = require('../projects/wvr-elements/src/lib/shared/theme/default-theme');
+
+const variablesTemplate = fs.readFileSync('src/_variables.scss.hbs');
+
+const templateFn = handlebars.compile(variablesTemplate.toString(), { strict: true });
+
+fs.writeFileSync('projects/wvr-elements/src/lib/shared/styles/_variables.scss', templateFn({themeVariants}));
diff --git a/scripts/build-wvr-components.js b/scripts/build-wvr-components.js
index 2fd32890d..b0fc0f6fc 100644
--- a/scripts/build-wvr-components.js
+++ b/scripts/build-wvr-components.js
@@ -4,28 +4,34 @@ const fs = require('fs-extra');
 const concat = require('concat');
 const cp = require('child_process');
 
-const assetPath = 'dist/weaver-components';
+const componentsPath = 'dist/weaver-components';
+const elementsPath = 'dist/wvr-elements';
+
 const bundlePath = 'dist/bundle';
+const usagePath = 'dist/static/docs/usage';
 
 cp.fork(__dirname + '/build-wvr-config-template.js');
 
 (async function build() {
   const files = [
-    'dist/weaver-components/runtime-es5.js',
-    'dist/weaver-components/polyfills-es5.js',
-    'dist/weaver-components/styles-es5.js',
-    'dist/weaver-components/scripts.js',
-    // 'dist/weaver-components/vendor-es5.js',
-    'dist/weaver-components/main-es5.js'
+    `${componentsPath}/runtime-es5.js`,
+    `${componentsPath}/polyfills-es5.js`,
+    `${componentsPath}/styles-es5.js`,
+    `${componentsPath}/scripts.js`,
+    // `${componentsPath}/vendor-es5.js`,
+    `${componentsPath}/main-es5.js`
   ];
 
   fs.ensureDir(bundlePath);
 
+  fs.ensureDir(usagePath);
+
   await concat(files, `${bundlePath}/weaver-components.js`);
-  fs.copy('dist/weaver-components/assets', "dist/static/docs/usage/assets");
-  fs.copy(`${assetPath}/assets`, `${bundlePath}/assets`);
+  fs.copy(`${componentsPath}/assets`, `${usagePath}/assets`);
+  fs.copy(`${componentsPath}/assets`, `${bundlePath}/assets`);
 
-  fs.copy('scripts', "dist/wvr-elements/scripts");
-  fs.copy('.wvr-ud', "dist/wvr-elements/.wvr-ud");
+  fs.copy('projects/wvr-elements/src/lib/shared/styles', `${elementsPath}/styles`);
+  fs.copy('scripts', `${elementsPath}/scripts`);
+  fs.copy('.wvr-ud', `${elementsPath}/.wvr-ud`);
 
 })();
diff --git a/scripts/build-wvr-ud.js b/scripts/build-wvr-ud.js
index c8c4b4d8a..9c2884e9b 100755
--- a/scripts/build-wvr-ud.js
+++ b/scripts/build-wvr-ud.js
@@ -1,5 +1,4 @@
 #!/usr/bin/env node
-
 const process = require('process');
 const fs = require('fs-extra');
 const path = require('path');
@@ -9,8 +8,8 @@ const glob = require("glob");
 const concat = require('concat');
 const packageJson = require(`${process.cwd()}/package.json`);
 const chalk = require('chalk');
-require('console-stamp')(console, { 
-  format: ':date(HH:MM:ss)' 
+require('console-stamp')(console, {
+  format: ':date(HH:MM:ss)'
 } );
 const log = console.log;
 
@@ -54,6 +53,7 @@ const exaplestDest = `${CONFIG.output}/examples`;
 fs.ensureDirSync(exaplestDest);
 examples.forEach(e=>{
   const componentPath = e.replace(EXAMPLE_PATTER,'ts');
+  const templatePath = e.replace(EXAMPLE_PATTER, 'html');
   const stylesPath = e.replace(EXAMPLE_PATTER,'scss');
   const pathParts = e.split('/');
   const exampleName = pathParts[pathParts.length-1];
@@ -63,11 +63,15 @@ examples.forEach(e=>{
   let {document} = (new JSDOM(exampleContent)).window;
   let componentSourceElement = document.createElement('component-source');
   componentSourceElement.innerHTML = componentSource;
-  let stylesSource = fs.readFileSync(stylesPath, 'utf8');
+  let templateSource = fs.existsSync(templatePath) ?  fs.readFileSync(templatePath, 'utf8') : 'No Template Found.';
+  let templateElement = document.createElement('component-template');
+  templateElement.innerHTML = templateSource;
+  let stylesSource = fs.existsSync(templatePath) ? fs.readFileSync(stylesPath, 'utf8') : 'No Styles Found.';
   let componentScssElement = document.createElement('component-scss');
   componentScssElement.innerHTML = stylesSource;
   document.querySelectorAll('example').forEach(ex=>{
     ex.appendChild(componentSourceElement.cloneNode(true));
+    ex.appendChild(templateElement.cloneNode(true));
     ex.appendChild(componentScssElement.cloneNode(true));
   });
   fs.writeFileSync(`${exaplestDest}/${exampleName}`, document.body.innerHTML);
@@ -112,7 +116,7 @@ additionalAssets.forEach(a=>{
   } else {
     fs.copyFileSync(a, `${CONFIG.output}/assets/${fileName}`);
   }
-}); 
+});
 log(`    ${chalk.cyanBright('Total Additional Assets')}: ${chalk.blue(additionalAssets.length)}`);
 
 log(`    ${chalk.green('Including Static Content:')}`);
@@ -146,7 +150,7 @@ concat(stlyeFiles, `${WVR_UD_STATIC_ASSETS_DIR}/styles.css`).finally(() => {
   });
 
   log(`    ${chalk.cyanBright('Total content')}: ${chalk.blue(staticAssets.length)}`);
-  
+
   // Prepare Index
   log(`    ${chalk.green('Parsing Index Template:')}`);
   log(`    ${chalk.cyan('- Parsing:     index-base.html')}`);
diff --git a/src/_variables.scss.hbs b/src/_variables.scss.hbs
new file mode 100644
index 000000000..5e953de2c
--- /dev/null
+++ b/src/_variables.scss.hbs
@@ -0,0 +1,276 @@
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+
+{{#each themeVariants}}
+${{@key}}: {{this.baseColor}};
+{{/each}}
+
+$theme-colors: (
+{{#each themeVariants}}
+  "{{@key}}": ${{@key}}{{#if @last}}{{else}},{{/if}}
+{{/each}}
+);
+
+// Bootstrap Alert Variants
+
+$alert-variations: ();
+// stylelint-disable-next-line scss/dollar-variable-default
+$alert-variations: map-merge(
+  (
+
+  {{#each themeVariants}}
+    '{{@key}}-alert-bg': theme-color-level("{{@key}}", $alert-bg-level),
+  {{/each}}
+
+  {{#each themeVariants}}
+    '{{@key}}-alert-border': theme-color-level("{{@key}}", $alert-border-level),
+  {{/each}}
+
+  {{#each themeVariants}}
+    '{{@key}}-alert-color': theme-color-level("{{@key}}", $alert-color-level){{#if @last}}{{else}},{{/if}}
+  {{/each}}
+
+  ),
+  $alert-variations
+);
+
+// Bootstrap Badge Variants
+
+$badge-variations: ();
+// stylelint-disable-next-line scss/dollar-variable-default
+$badge-variations: map-merge(
+  (
+
+    {{#each themeVariants}}
+      '{{@key}}-badge-bg': ${{@key}},
+    {{/each}}
+
+    {{#each themeVariants}}
+      '{{@key}}-badge-color': color-yiq(${{@key}}){{#if @last}}{{else}},{{/if}}
+    {{/each}}
+
+  ),
+  $badge-variations
+);
+
+// Bootstrap List Group Item Variants
+
+$list-group-item-variations: ();
+// stylelint-disable-next-line scss/dollar-variable-default
+$list-group-item-variations: map-merge(
+  (
+
+    {{#each themeVariants}}
+      '{{@key}}-list-group-item-bg': theme-color-level("{{@key}}", -9),
+    {{/each}}
+
+    {{#each themeVariants}}
+      '{{@key}}-list-group-item-color': theme-color-level("{{@key}}", 6){{#if @last}}{{else}},{{/if}}
+    {{/each}}
+
+  ),
+  $list-group-item-variations
+);
+
+// Bootstrap Table Variants
+
+$table-variations: ();
+// stylelint-disable-next-line scss/dollar-variable-default
+$table-variations: map-merge(
+  (
+
+    {{#each themeVariants}}
+      '{{@key}}-table-bg': theme-color-level("{{@key}}", $table-bg-level),
+    {{/each}}
+
+    {{#each themeVariants}}
+      '{{@key}}-table-border': theme-color-level("{{@key}}", $table-border-level){{#if @last}}{{else}},{{/if}}
+    {{/each}}
+
+  ),
+  $table-variations
+);
+
+// Bootstrap Button Variants
+
+$button-variations: ();
+// stylelint-disable-next-line scss/dollar-variable-default
+$button-variations: map-merge(
+  (
+
+    {{#each themeVariants}}
+      '{{@key}}-button-color': color-yiq(${{@key}}),
+    {{/each}}
+
+    {{#each themeVariants}}
+      '{{@key}}-button-bg': ${{@key}},
+    {{/each}}
+
+    {{#each themeVariants}}
+      '{{@key}}-button-border': ${{@key}}, 
+    {{/each}}
+
+    {{#each themeVariants}}
+      '{{@key}}-button-hover-color': color-yiq(darken(${{@key}}, 7.5%)),
+    {{/each}}
+
+    {{#each themeVariants}}
+      '{{@key}}-button-hover-bg': darken(${{@key}}, 7.5%),
+    {{/each}}
+
+    {{#each themeVariants}}
+      '{{@key}}-button-hover-border': darken(${{@key}}, 10%),
+    {{/each}}
+
+    {{#each themeVariants}}
+      '{{@key}}-button-active-color': color-yiq(darken(${{@key}}, 10%)),
+    {{/each}}
+
+    {{#each themeVariants}}
+      '{{@key}}-button-active-bg': darken(${{@key}}, 10%),
+    {{/each}}
+
+    {{#each themeVariants}}
+      '{{@key}}-button-active-border': darken(${{@key}}, 12.5%),
+    {{/each}}
+
+    {{#each themeVariants}}
+      '{{@key}}-button-box-shadow-color': rgba(mix(color-yiq(${{@key}}), ${{@key}}, 15%), .5){{#if @last}}{{else}},{{/if}}
+    {{/each}}
+  ),
+  $button-variations
+);
+
+// Bootstrap Button Outline Variants
+
+$button-outline-variations: ();
+// stylelint-disable-next-line scss/dollar-variable-default
+$button-outline-variations: map-merge(
+  (
+
+    {{#each themeVariants}}
+      '{{@key}}-button-outline-color': ${{@key}},
+    {{/each}}
+
+    {{#each themeVariants}}
+      '{{@key}}-button-outline-color-hover': color-yiq(${{@key}}),
+    {{/each}}
+
+    {{#each themeVariants}}
+      '{{@key}}-button-outline-box-shadow-color': rgba(${{@key}}, .5){{#if @last}}{{else}},{{/if}}
+    {{/each}}
+
+  ),
+  $button-outline-variations
+);
+
+.variables {
+
+  --yiq-contrasted-threshold:#{$yiq-contrasted-threshold};
+  --yiq-text-dark:#{$yiq-text-dark};
+  --yiq-text-light:#{$yiq-text-light};
+
+  --theme-color-interval:#{$theme-color-interval};
+
+  --alert-bg-level:#{$alert-bg-level};
+  --alert-border-level:#{$alert-border-level};
+  --alert-color-level:#{$alert-color-level};
+
+  --list-group-item-bg-level:-9;
+  --list-group-item-color-level:6;
+
+  --table-bg-level:#{$table-bg-level};
+  --table-border-level:#{$table-border-level};
+
+  --black:#{$black};
+  --white:#{$white};
+
+  @each $variation, $value in $alert-variations {
+    --#{$variation}:#{$value};
+  }
+
+  @each $variation, $value in $badge-variations {
+    --#{$variation}:#{$value};
+  }
+
+  @each $variation, $value in $list-group-item-variations {
+    --#{$variation}:#{$value};
+  }
+
+  @each $variation, $value in $table-variations {
+    --#{$variation}:#{$value};
+  }
+
+  @each $variation, $value in $button-outline-variations {
+    --#{$variation}:#{$value};
+  }
+
+  @each $variation, $value in $button-variations {
+    --#{$variation}:#{$value};
+  }
+
+  @each $color, $value in $colors {
+    --#{$color}:#{$value};
+  }
+
+  @each $color, $value in $theme-colors {
+    --#{$color}:#{$value};
+  }
+
+  @each $bp, $value in $grid-breakpoints {
+    --breakpoint-#{$bp}:#{$value};
+  }
+
+  // Use `inspect` for lists so that quoted items keep the quotes.
+  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
+  --font-family-sans-serif:#{inspect($font-family-sans-serif)};
+  --font-family-monospace:#{inspect($font-family-monospace)};
+}
+
+@each $variation, $value in $alert-variations {
+  $alert-variations: map-merge($alert-variations, ($variation: var(--#{$variation})));
+}
+
+@each $variation, $value in $badge-variations {
+  $badge-variations: map-merge($badge-variations, ($variation: var(--#{$variation})));
+}
+
+@each $variation, $value in $list-group-item-variations {
+  $list-group-item-variations: map-merge($list-group-item-variations, ($variation: var(--#{$variation})));
+}
+
+@each $variation, $value in $table-variations {
+  $table-variations: map-merge($table-variations, ($variation: var(--#{$variation})));
+}
+
+@each $variation, $value in $button-outline-variations {
+  $button-outline-variations: map-merge($button-outline-variations, ($variation: var(--#{$variation})));
+}
+
+@each $variation, $value in $button-variations {
+  $button-variations: map-merge($button-variations, ($variation: var(--#{$variation})));
+}
+
+@function alert-variation($color: "primary", $type: "alert-color") {
+  @return map-get($alert-variations, #{$color}-#{$type});
+}
+
+@function badge-variation($color: "primary", $type: "badge-color") {
+  @return map-get($badge-variations, #{$color}-#{$type});
+}
+
+@function list-group-item-variation($color: "primary", $type: "list-group-item-color") {
+  @return map-get($list-group-item-variations, #{$color}-#{$type});
+}
+
+@function table-variation($color: "primary", $type: "table-border") {
+  @return map-get($table-variations, #{$color}-#{$type});
+}
+
+@function button-outline-variation($color: "primary", $type: "button-outline-color") {
+  @return map-get($button-outline-variations, #{$color}-#{$type});
+}
+
+@function button-variation($color: "primary", $type: "button-color") {
+  @return map-get($button-variations, #{$color}-#{$type});
+}
diff --git a/src/index.html b/src/index.html
index 49c552dcf..7195f921b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -23,7 +23,7 @@
   </style>
 </head>
 
-<body>
+<body style="display: none;">
   <wvre-header>
     <wvre-nav-list top-navigation>
       <wvre-nav-li>
@@ -131,7 +131,7 @@
       </wvre-nav-li>
       <wvre-nav-li>
         <wvre-dropdown
-          btn-type="link"
+          theme-variant="link"
           btn-text-decoration="none"
           btn-text-decoration-active="none"
           btn-text-decoration-hover="none"
@@ -173,20 +173,20 @@
   <div class="container index-container">
     <wvre-text value="Alert Component" text-decoration="underline"></wvre-text><br /><br />
     <wvre-alert
-      alert-class="primary"
+      theme-variant="primary"
       alert-type="basic">
         <wvre-text value="This is basic primary alert. "></wvre-text>
     </wvre-alert>
 
     <wvre-alert
-      alert-class="success"
+      theme-variant="success"
       alert-type="self-closing"
       close-timer="5000">
         <wvre-text value="This is self closing success alert"></wvre-text>
     </wvre-alert>
 
     <wvre-alert
-      alert-class="success"
+      theme-variant="success"
       alert-type="custom">
         <wvre-custom-alert>
           <h4 class="alert-heading">
@@ -203,7 +203,7 @@ <h4 class="alert-heading">
     </wvre-alert>
 
     <wvre-alert
-      alert-class="danger"
+      theme-variant="danger"
       alert-type="custom"
       closable="false">
         <wvre-custom-alert>
@@ -226,7 +226,7 @@ <h4 class="alert-heading">
     <wvre-text value="Card Component" text-decoration="underline"></wvre-text>
     <br /><br />
 
-    <wvre-card card-type="primary" panel-format="mixed">
+    <wvre-card theme-variant="primary" panel-format="mixed">
       <wvre-card-header>
         <wvre-text value="Card Header"></wvre-text>
       </wvre-card-header>
@@ -243,30 +243,30 @@ <h4 class="alert-heading">
         <wvre-text value="Gmail"></wvre-text>
       </wvre-card-link>
 
-      <wvre-list top list-type="group-flush" context="info">
+      <wvre-list top list-type="group-flush" theme-variant="info">
         <wvre-list-item>
           <wvre-text value="Item 1"></wvre-text>
         </wvre-list-item>
-        <wvre-list-item context="warning">
+        <wvre-list-item theme-variant="warning">
           <wvre-text value="Item 2"></wvre-text>
         </wvre-list-item>
-        <wvre-list-item context="success">
+        <wvre-list-item theme-variant="success">
           <wvre-text value="Item 3"></wvre-text>
         </wvre-list-item>
       </wvre-list>
 
       <wvre-text value="This is a basic card body content"></wvre-text>
 
-      <wvre-list bottom list-type="group-flush" context="info">
+      <wvre-list bottom list-type="group-flush" theme-variant="info">
         <wvre-list-item>
           <wvre-text value="Item 1"></wvre-text>
         </wvre-list-item>
-        <wvre-list-item context="warning">
+        <wvre-list-item theme-variant="warning">
           <wvre-text value="Item 2"></wvre-text>
         </wvre-list-item>
       </wvre-list>
 
-      <wvre-button btn-class="secondary">
+      <wvre-button theme-variant="secondary">
         <wvre-text value="Card Button Text"></wvre-text>
       </wvre-button>
 
@@ -286,7 +286,7 @@ <h4 class="alert-heading">
       <wvre-card-text>
         <wvre-text value="With supporting text below as a natural lead-in to additional content."></wvre-text>
       </wvre-card-text>
-      <wvre-button btn-class="secondary">
+      <wvre-button theme-variant="secondary">
         <wvre-text value="Go somewhere"></wvre-text>
       </wvre-button>
       <wvre-card-footer text-muted>
@@ -297,7 +297,7 @@ <h4 class="alert-heading">
 
   <div class="container index-container">
     <wvre-text value="Dropdown with Buttons" text-decoration="underline"></wvre-text><br />
-    <wvre-dropdown btn-type="primary" hidden-in-mobile="true" placement="right" dropdown-menu-display="static">
+    <wvre-dropdown theme-variant="primary" hidden-in-mobile="true" placement="right" dropdown-menu-display="static">
       <wvre-dropdown-btn>
         <wvre-text value="Primary Dropdown Hidden in Mobile"></wvre-text>
       </wvre-dropdown-btn>
@@ -314,7 +314,7 @@ <h4 class="alert-heading">
       </wvre-dropdown-menu>
     </wvre-dropdown>
 
-    <wvre-dropdown btn-type="secondary">
+    <wvre-dropdown theme-variant="secondary">
       <wvre-dropdown-btn>
         <wvre-text value="Secondary Dropdown"></wvre-text>
       </wvre-dropdown-btn>
@@ -331,7 +331,7 @@ <h4 class="alert-heading">
       </wvre-dropdown-menu>
     </wvre-dropdown>
 
-    <wvre-dropdown btn-type="success">
+    <wvre-dropdown theme-variant="success">
       <wvre-dropdown-btn>
         <wvre-text value="Success Dropdown"></wvre-text>
       </wvre-dropdown-btn>
@@ -348,7 +348,7 @@ <h4 class="alert-heading">
       </wvre-dropdown-menu>
     </wvre-dropdown>
 
-    <wvre-dropdown btn-type="danger">
+    <wvre-dropdown theme-variant="danger">
       <wvre-dropdown-btn>
         <wvre-text value="Danger Dropdown"></wvre-text>
       </wvre-dropdown-btn>
@@ -365,7 +365,7 @@ <h4 class="alert-heading">
       </wvre-dropdown-menu>
     </wvre-dropdown>
 
-    <wvre-dropdown btn-type="warning">
+    <wvre-dropdown theme-variant="warning">
       <wvre-dropdown-btn>
         <wvre-text value="Warning Dropdown"></wvre-text>
       </wvre-dropdown-btn>
@@ -383,7 +383,7 @@ <h4 class="alert-heading">
     </wvre-dropdown>
     <br />
 
-    <wvre-dropdown btn-type="info">
+    <wvre-dropdown theme-variant="info">
       <wvre-dropdown-btn>
         <wvre-text value="Info Dropdown"></wvre-text>
       </wvre-dropdown-btn>
@@ -400,7 +400,7 @@ <h4 class="alert-heading">
       </wvre-dropdown-menu>
     </wvre-dropdown>
 
-    <wvre-dropdown btn-type="light">
+    <wvre-dropdown theme-variant="light">
       <wvre-dropdown-btn>
         <wvre-text value="Light Dropdown"></wvre-text>
       </wvre-dropdown-btn>
@@ -417,7 +417,7 @@ <h4 class="alert-heading">
       </wvre-dropdown-menu>
     </wvre-dropdown>
 
-    <wvre-dropdown btn-type="dark">
+    <wvre-dropdown theme-variant="dark">
       <wvre-dropdown-btn>
         <wvre-text value="Dark Dropdown"></wvre-text>
       </wvre-dropdown-btn>
@@ -434,7 +434,7 @@ <h4 class="alert-heading">
       </wvre-dropdown-menu>
     </wvre-dropdown>
 
-    <wvre-dropdown btn-type="link">
+    <wvre-dropdown theme-variant="link">
       <wvre-dropdown-btn>
         <wvre-text value="Link Dropdown"></wvre-text>
       </wvre-dropdown-btn>
@@ -455,7 +455,6 @@ <h4 class="alert-heading">
   <div class="container index-container">
     <wvre-text value="Customized Drop Down" text-decoration="underline"></wvre-text><br />
     <wvre-dropdown
-      menu-y-offset='67px'
       btn-background="tomato"
       btn-background-active="yellow"
       btn-background-hover="red"
@@ -465,7 +464,7 @@ <h4 class="alert-heading">
       btn-border-focus="blue"
       btn-border-radius="6px"
       btn-box-shadow-focus="var(--wvr-btn-primary-focus-box-shadow)"
-      btn-type="link"
+      theme-variant="link"
       btn-size="small"
       btn-color="var(--wvr-btn-primary-color)"
       btn-color-active="var(--wvr-black)"
@@ -497,34 +496,64 @@ <h4 class="alert-heading">
 
   <div class="container index-container">
     <wvre-text value="Button List" text-decoration="underline"></wvre-text><br />
-    <wvre-button btn-class="primary" btn-size="large" hidden-in-mobile="true">
+    <wvre-button theme-variant="primary" btn-size="large" hidden-in-mobile="true">
       <wvre-text value="Large Size Primary Button"></wvre-text>
     </wvre-button>
-    <wvre-button btn-class="secondary" btn-size="small">
+    <wvre-button theme-variant="secondary" btn-size="small">
       <wvre-text value="Secondary"></wvre-text>
     </wvre-button>
-    <wvre-button btn-class="success">
+    <wvre-button theme-variant="success">
       <wvre-text value="Success"></wvre-text>
     </wvre-button>
-    <wvre-button btn-class="danger">
+    <wvre-button theme-variant="danger">
       <wvre-text value="Danger"></wvre-text>
     </wvre-button>
-    <wvre-button btn-class="warning">
+    <wvre-button theme-variant="warning">
       <wvre-text value="Warning"></wvre-text>
     </wvre-button>
-    <wvre-button btn-class="info">
+    <wvre-button theme-variant="info">
       <wvre-text value="Info"></wvre-text>
     </wvre-button>
-    <wvre-button btn-class="light">
+    <wvre-button theme-variant="light">
       <wvre-text value="Light"></wvre-text>
     </wvre-button>
-    <wvre-button btn-class="dark">
+    <wvre-button theme-variant="dark">
       <wvre-text value="Dark"></wvre-text>
     </wvre-button>
-    <wvre-button btn-class="link" wvr-btn-type="button" href="www.google.com">
+    <wvre-button btn-type="link" href="www.google.com">
       <wvre-text value="Link"></wvre-text>
     </wvre-button>
+  </div>
 
+  <div class="container index-container">
+    <wvre-text value="Themed Button List" text-decoration="underline"></wvre-text><br /><br />
+    <wvre-button wvr-theme="test" theme-variant="primary">
+      <wvre-text value="Primary"></wvre-text>
+    </wvre-button>
+    <wvre-button wvr-theme="test" theme-variant="secondary">
+      <wvre-text value="Secondary"></wvre-text>
+    </wvre-button>
+    <wvre-button wvr-theme="test" theme-variant="success">
+      <wvre-text value="Success"></wvre-text>
+    </wvre-button>
+    <wvre-button wvr-theme="test" theme-variant="danger">
+      <wvre-text value="Danger"></wvre-text>
+    </wvre-button>
+    <wvre-button wvr-theme="test" theme-variant="warning">
+      <wvre-text value="Warning"></wvre-text>
+    </wvre-button>
+    <wvre-button wvr-theme="test" theme-variant="info">
+      <wvre-text value="Info"></wvre-text>
+    </wvre-button>
+    <wvre-button wvr-theme="test" theme-variant="light">
+      <wvre-text value="Light"></wvre-text>
+    </wvre-button>
+    <wvre-button wvr-theme="test" theme-variant="dark">
+      <wvre-text value="Dark"></wvre-text>
+    </wvre-button>
+    <wvre-button wvr-theme="test" btn-type="link" href="www.google.com">
+      <wvre-text value="Link"></wvre-text>
+    </wvre-button>
   </div>
 
   <div class="container index-container">
@@ -537,9 +566,9 @@ <h4 class="alert-heading">
                     from: 0
                   }
                 }"
-                btn-class="primary"
+                theme-variant="primary"
                 btn-size="large"
-                wvr-btn-type="button"
+                btn-type="button"
                 background="tomato"
                 border-color="var(--wvr-btn-outline-warning-hover-color)"
                 color="var(--wvr-btn-outline-warning-hover-color)"
@@ -567,28 +596,28 @@ <h4 class="alert-heading">
 
   <div class="container index-container">
     <wvre-text value="Outline Button List" text-decoration="underline"></wvre-text><br />
-    <wvre-button btn-class="outline-primary" wvr-btn-type="button" hidden-in-mobile="true">
+    <wvre-button theme-variant="outline-primary" btn-type="button" hidden-in-mobile="true">
       <wvre-text value="Outline Primary (Hidden in MV)"></wvre-text>
     </wvre-button>
-    <wvre-button btn-class="outline-secondary" wvr-btn-type="button">
+    <wvre-button theme-variant="outline-secondary" btn-type="button">
       <wvre-text value="Outline Secondary"></wvre-text>
     </wvre-button>
-    <wvre-button btn-class="outline-success" wvr-btn-type="button">
+    <wvre-button theme-variant="outline-success" btn-type="button">
       <wvre-text value="Outline Success"></wvre-text>
     </wvre-button>
-    <wvre-button btn-class="outline-danger" wvr-btn-type="button">
+    <wvre-button theme-variant="outline-danger" btn-type="button">
       <wvre-text value="Outline Danger"></wvre-text>
     </wvre-button>
-    <wvre-button btn-class="outline-warning" wvr-btn-type="button">
+    <wvre-button theme-variant="outline-warning" btn-type="button">
       <wvre-text value="Outline Warning"></wvre-text>
     </wvre-button>
-    <wvre-button btn-class="outline-info" wvr-btn-type="button">
+    <wvre-button theme-variant="outline-info" btn-type="button">
       <wvre-text value="Outline Info"></wvre-text>
     </wvre-button>
-    <wvre-button btn-class="outline-light" wvr-btn-type="button">
+    <wvre-button theme-variant="outline-light" btn-type="button">
       <wvre-text value="Outline Light"></wvre-text>
     </wvre-button>
-    <wvre-button btn-class="outline-dark" wvr-btn-type="button">
+    <wvre-button theme-variant="outline-dark" btn-type="button">
       <wvre-text value="Outline Dark"></wvre-text>
     </wvre-button>
   </div>
@@ -597,11 +626,11 @@ <h4 class="alert-heading">
     <wvre-text value="Weaver Icon List" text-decoration="underline"></wvre-text><br />
     <wvre-icon set="custom" name="weaver-w"></wvre-icon>
     <wvre-icon set="custom" name="weaver-w" color="#500000" size="64px" hidden-in-mobile="true"></wvre-icon>
-    <wvre-button btn-class="primary" wvr-btn-type="button" animate="{click: 'rotateToggle'}">
+    <wvre-button theme-variant="primary" btn-type="button" animate="{click: 'rotateToggle'}">
       <wvre-icon set="custom" name="weaver-w" color="#500000"></wvre-icon>
       <wvre-text value="Icon Btn"></wvre-text>
     </wvre-button>
-    <wvre-button btn-class="info" wvr-btn-type="button" animate="{click: 'animationTrigger'}" animate-target="elem1" hidden-in-mobile="true">
+    <wvre-button theme-variant="info" btn-type="button" animate="{click: 'animationTrigger'}" animate-target="elem1" hidden-in-mobile="true">
       <wvre-text value="Icon Btn to Be Hidden in Mobile View"></wvre-text>
       <wvre-icon set="feather" name="chevron-right" color="#500000" animate="{animationTrigger: 'rotateToggle'}" animate-id="elem1"></wvre-icon>
     </wvre-button>
@@ -696,34 +725,34 @@ <h4 class="alert-heading">
     <br /><br />
 
     <wvre-text value="Group List - Flush" text-decoration="underline"></wvre-text><br />
-    <wvre-list list-type="group-flush" context="info">
+    <wvre-list list-type="group-flush" theme-variant="info">
       <wvre-list-item>
         <wvre-text value="Item 1"></wvre-text>
       </wvre-list-item>
-      <wvre-list-item context="warning">
+      <wvre-list-item theme-variant="warning">
         <wvre-text value="Item 2"></wvre-text>
       </wvre-list-item>
-      <wvre-list-item context="success">
+      <wvre-list-item theme-variant="success">
         <wvre-text value="Item 3"></wvre-text>
       </wvre-list-item>
     </wvre-list>
     <br /><br />
 
     <wvre-text value="Group List - Contextual Classes"text-decoration="underline"></wvre-text><br />
-    <wvre-list list-type="group-ul" context="info">
+    <wvre-list list-type="group-ul" theme-variant="info">
       <wvre-list-item>
         <wvre-text value="Item 1"></wvre-text>
         <span class="badge badge-primary badge-pill">
           <wvre-text value="14"></wvre-text>
         </span>
       </wvre-list-item>
-      <wvre-list-item context="warning">
+      <wvre-list-item theme-variant="warning">
         <wvre-text value="Item 2"></wvre-text>
         <span class="badge badge-secondary badge-pill">
           <wvre-text value="28"></wvre-text>
         </span>
       </wvre-list-item>
-      <wvre-list-item context="success">
+      <wvre-list-item theme-variant="success">
         <wvre-text value="Item 3"></wvre-text>
         <span class="badge badge-success badge-pill">
           <wvre-text value="46"></wvre-text>
@@ -767,13 +796,11 @@ <h4 class="alert-heading">
         as: 'allSorted'
       }
     ]">
-      <wvre-template>
-        <!--
-          {{#each allSorted}}
-            <wvre-list-item>{{fullName}}</wvre-list-item>
-          {{/each}}
-        -->
-      </wvre-template>
+      <template wvr-compile>
+        {{#each allSorted}}
+          <wvre-list-item>{{fullName}}</wvre-list-item>
+        {{/each}}
+      </template>
     </wvre-list>
 
   </div>
@@ -781,7 +808,7 @@ <h4 class="alert-heading">
   <div class="container index-container">
 
     <wvre-text value="Tabs" text-decoration="underline"></wvre-text><br /><br />
-  
+
     <wvre-tabs>
       <wvre-tab tab-text="Tab One">
         <div class="jumbotron">
@@ -799,7 +826,15 @@ <h3><wvre-text value="Second Tab Header"></wvre-text></h3>
 
   </div>
 
-  <wvre-footer>
+  <div class="container index-container">
+
+    <wvre-text value="Wvr Theme Color Preview" text-decoration="underline"></wvre-text><br /><br />
+
+    <wvre-color-preview></wvre-color-preview>
+
+  </div>
+
+  <wvre-footer theme="DefaultColorTheme">
     <wvre-nav-list aligned="CENTER">
       <wvre-nav-li>
         <wvre-text value="Action 1"></wvre-text>
@@ -818,6 +853,38 @@ <h3><wvre-text value="Second Tab Header"></wvre-text></h3>
     <wvre-manifest-entry name="Departments" path="/ldap/departments" methods="GET" mapping-strategy="none"></wvre-manifest-entry>
   </wvre-manifest>
 
+  <wvre-theme name="defaultDark"></wvre-theme>
+
+  <wvre-theme name="theme-demo" active="true" variants="{
+    primary: {
+      baseColor: '#375a7f'
+    },
+    secondary: {
+      baseColor: '#444'
+    },
+    success: {
+      baseColor: '#00bc8c'
+    },
+    danger: {
+      baseColor: '#e74c3c'
+    },
+    warning: {
+      baseColor: '#f39c12'
+    },
+    info: {
+      baseColor: '#3498db'
+    },
+    light: {
+      baseColor: '#adb5bd'
+    },
+    dark: {
+      baseColor: '#222'
+    },
+    accent: {
+      baseColor: '#6f42c1'
+    }
+  }"></wvre-theme>
+
   <script defer src="weaver-components.js"></script>
 
 </body>
diff --git a/src/main.ts b/src/main.ts
index a179444df..1aa2748e1 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,4 +7,7 @@ if (environment.production) {
   enableProdMode();
 }
 
-document.addEventListener('DOMContentLoaded', weaverBootstrap(AppModule));
+document.addEventListener('DOMContentLoaded', () => {
+  weaverBootstrap(AppModule)('/config.json')
+    .catch();
+});
diff --git a/src/styles.scss b/src/styles.scss
index 2bd7872ca..94f437208 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,7 +1,10 @@
 /* You can add global styles to this file, and also import other style files */
 
 .wvr-bootstrap {
+  @import '../projects/wvr-elements/src/lib/shared/styles/variables';
   @import "~bootstrap/scss/bootstrap";
+  @import '../projects/wvr-elements/src/lib/shared/styles/mixins';
+  @import '../projects/wvr-elements/src/lib/shared/styles/overrides';
 }
 
 .wvr-hidden {
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 3bfce7afb..4b2ca0e9c 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -2,6 +2,8 @@
   "compileOnSave": false,
   "compilerOptions": {
     "baseUrl": "./",
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
     "outDir": "projects",
     "sourceMap": true,
     "declaration": true,