From 7428c4b8a50c42da9318bf1daefb5e4d2bd728b7 Mon Sep 17 00:00:00 2001
From: vakrilov <alexander.vakrilov@telerik.com>
Date: Fri, 18 Oct 2019 11:22:02 +0300
Subject: [PATCH 01/13] fix: stop importing view-common, use view instead

---
 src/index.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/index.js b/src/index.js
index 00a94e1..143cb6f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
 import * as app from "tns-core-modules/application";
 import { device, isAndroid, screen } from "tns-core-modules/platform";
-import * as viewCommon from "tns-core-modules/ui/core/view/view-common";
+import * as view from "tns-core-modules/ui/core/view";
 import * as frame from "tns-core-modules/ui/frame";
 
 const display = screen.mainScreen;
@@ -75,8 +75,8 @@ Theme.Dark = "ns-dark";
 export default Theme;
 
 // Where the magic happens
-const oldSetupAsRootView = viewCommon.ViewCommon.prototype._setupAsRootView;
-viewCommon.ViewCommon.prototype._setupAsRootView = function() {
+const oldSetupAsRootView = view.ViewCommon.prototype._setupAsRootView;
+view.ViewCommon.prototype._setupAsRootView = function() {
     oldSetupAsRootView.call(this, ...arguments);
     Theme.setMode(Theme.currentMode, this);
 };
@@ -96,10 +96,10 @@ function updateRootClasses(orientation, root = app.getRootView(), classes = [])
 function handleOrientation({ newValue: orientation }) {
     updateRootClasses(orientation);
 
-    if (viewCommon._rootModalViews.length) {
+    if (view._rootModalViews.length) {
         const classList = new ClassList(app.getRootView().className);
 
-        viewCommon._rootModalViews.forEach((view) => updateRootClasses(orientation, view, classList.add("ns-modal").list));
+        view._rootModalViews.forEach((view) => updateRootClasses(orientation, view, classList.add("ns-modal").list));
     }
 }
 
@@ -139,7 +139,7 @@ app.on(app.displayedEvent, () => {
     }
 
     // Get notified when a modal is created.
-    viewCommon._rootModalViews = new Proxy(viewCommon._rootModalViews, rootModalTrap);
+    view._rootModalViews = new Proxy(view._rootModalViews, rootModalTrap);
 
     root.className = new ClassList(root.className)
         .add("ns-root", platformClass, `ns-${device.deviceType.toLowerCase()}`)

From 3263b615477c8b32a0dcb4a34dfdab14b5b707ff Mon Sep 17 00:00:00 2001
From: Martin Yankov <m.i.yankov@gmail.com>
Date: Mon, 21 Oct 2019 18:11:41 +0300
Subject: [PATCH 02/13] fix: change blue to nativescript blue (#195)

---
 src/scss/core/colors/_dark.scss  | 5 +++--
 src/scss/core/colors/_index.scss | 2 +-
 src/scss/variables/_blue.scss    | 3 ---
 src/scss/variables/_index.scss   | 2 +-
 4 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/scss/core/colors/_dark.scss b/src/scss/core/colors/_dark.scss
index bc47a81..7450d70 100644
--- a/src/scss/core/colors/_dark.scss
+++ b/src/scss/core/colors/_dark.scss
@@ -3,9 +3,9 @@ $dark-colors: (
     primary: $white,
     background: $charcoal,
     accent: $focus,
-    border-color: $focus,
 
-    btn-color: $white
+    btn-color: $white,
+    border-color: lighten($focus, 10%)
 );
 
 @if (global_variable_exists("theme-type")) {
@@ -51,6 +51,7 @@ $dark-colors: map-merge($dark-colors, (
     secondary: darken(dark(primary), 30%),
     disabled: mix(dark(accent), dark(background), 40%),
 
+    accent: lighten(dark(accent), 10%),
     ab-color: mix(light(ab-color), dark(primary), 20%),
     ab-background: if(light(ab-background) == #fff, dark(background), mix(light(ab-background), dark(background), 50%)),
 
diff --git a/src/scss/core/colors/_index.scss b/src/scss/core/colors/_index.scss
index 9550d1e..bbaf5f3 100644
--- a/src/scss/core/colors/_index.scss
+++ b/src/scss/core/colors/_index.scss
@@ -11,7 +11,7 @@ $colors:  (
 
     // Accents
     aqua: #00caab,
-    blue: #3d5afe,
+    blue: #3a53ff,
     brown: #795548,
     forest: #006968,
     grey-dark: #5c687c,
diff --git a/src/scss/variables/_blue.scss b/src/scss/variables/_blue.scss
index 4395148..a062ce0 100644
--- a/src/scss/variables/_blue.scss
+++ b/src/scss/variables/_blue.scss
@@ -12,7 +12,4 @@ $ab-color: const(white);
 // Accent
 $focus: const(blue);
 
-// Buttons
-$btn-color-inverse: const(white);
-
 @import '../core/colors/index';
diff --git a/src/scss/variables/_index.scss b/src/scss/variables/_index.scss
index 92985d3..1f8084a 100644
--- a/src/scss/variables/_index.scss
+++ b/src/scss/variables/_index.scss
@@ -13,7 +13,7 @@ $charcoal: #303030 !default;
 // Kendo Palettes
 @import '../core/primitives/kendo-palletes';
 
-$font-size: 16 !default;
+$font-size: 12 !default;
 
 // Button defaults
 $background-alt-10: #c0ebff !default;

From af4ece3d6594f006ca1f75e03e724aeed4900a42 Mon Sep 17 00:00:00 2001
From: Martin Yankov <m.i.yankov@gmail.com>
Date: Tue, 22 Oct 2019 14:36:13 +0300
Subject: [PATCH 03/13] fix: add more padding to action items (#196)

---
 src/scss/mixins/components/_action-bar.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/scss/mixins/components/_action-bar.scss b/src/scss/mixins/components/_action-bar.scss
index f50c6f5..2e6bdca 100644
--- a/src/scss/mixins/components/_action-bar.scss
+++ b/src/scss/mixins/components/_action-bar.scss
@@ -18,7 +18,7 @@
         #{$item-selectors} {
             android-elevation: 0;
             font-size: const(font-size);
-            padding: 12 3;
+            padding: 12 7;
             margin: 0;
             min-width: 0;
             width: auto;

From a7f62020dd346de26b8e04984391a2a83b111cee Mon Sep 17 00:00:00 2001
From: Manol Donev <manoldonev@users.noreply.github.com>
Date: Tue, 22 Oct 2019 17:22:12 +0300
Subject: [PATCH 04/13] fix(action-bar): update action item padding (#197)

---
 src/scss/mixins/components/_action-bar.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/scss/mixins/components/_action-bar.scss b/src/scss/mixins/components/_action-bar.scss
index 2e6bdca..d8605a8 100644
--- a/src/scss/mixins/components/_action-bar.scss
+++ b/src/scss/mixins/components/_action-bar.scss
@@ -18,7 +18,7 @@
         #{$item-selectors} {
             android-elevation: 0;
             font-size: const(font-size);
-            padding: 12 7;
+            padding: 12 10 12 0;
             margin: 0;
             min-width: 0;
             width: auto;

From 620906f54914af7c94e382de2bdeaf925627d82e Mon Sep 17 00:00:00 2001
From: Kamen Bundev <bundyo@gmail.com>
Date: Wed, 23 Oct 2019 19:06:12 +0300
Subject: [PATCH 05/13] Return $accent input variable Rename $ab-background and
 $ab-color to respectively $complementary and $complementary-color, keep
 backwards compatibility Introduce $...-dark colors to be able to override the
 main dark mode colors specifically

---
 README.md                                     |  15 +-
 app-compat/bootstrap-based.compat.scss        |  12 +-
 app-compat/customized.compat.scss             |   4 +-
 app/bootstrap-based.scss                      |  12 +-
 app/customized.scss                           |   4 +-
 app/navigation-vm.js                          |   6 +-
 app/pages/base.js                             |   4 +-
 app/pages/login-form.js                       |   4 +-
 app/pages/login-landing.js                    |   6 +-
 package-lock.json                             | 138 +++++++++---------
 package.json                                  |   5 +-
 src/scss/bootstrap/_map.scss                  |  14 --
 src/scss/core/colors/_dark.scss               |  44 +++---
 src/scss/core/colors/_light.scss              |  21 +--
 src/scss/mixins/components/_action-bar.scss   |  12 +-
 src/scss/mixins/components/_button.scss       |   2 +-
 src/scss/mixins/components/_side--drawer.scss |   8 +-
 src/scss/variables/_aqua.scss                 |   8 +-
 src/scss/variables/_blue.scss                 |   8 +-
 src/scss/variables/_brown.scss                |   8 +-
 src/scss/variables/_forest.scss               |   8 +-
 src/scss/variables/_grey.scss                 |   8 +-
 src/scss/variables/_index.scss                |  33 ++++-
 src/scss/variables/_lemon.scss                |   8 +-
 src/scss/variables/_lime.scss                 |   8 +-
 src/scss/variables/_orange.scss               |  10 +-
 src/scss/variables/_purple.scss               |  10 +-
 src/scss/variables/_ruby.scss                 |  10 +-
 src/scss/variables/_sky.scss                  |  10 +-
 webpack.config.js                             |  12 +-
 30 files changed, 246 insertions(+), 206 deletions(-)
 delete mode 100644 src/scss/bootstrap/_map.scss

diff --git a/README.md b/README.md
index 44671fd..a15c047 100644
--- a/README.md
+++ b/README.md
@@ -220,13 +220,13 @@ A list of the supported CSS variables follows:
 | --color-black | --const-font-size | --light-primary | --dark-primary |
 | --color-white | --const-background-alt-10 | --light-background | --dark-background |
 | --color-grey | --const-btn-color-secondary | --light-accent | --dark-accent |
-| --color-grey-light | --const-btn-color-disabled | --light-ab-color | --dark-background-alt-5 |
-| --color-charcoal | --const-btn-font-size | --light-ab-background | --dark-background-alt-10 |
-| --color-transparent | --const-btn-min-width | --light-background-alt-5 | --dark-background-alt-20 |
-| --color-aqua | --const-btn-height | --light-background-alt-10 | --dark-secondary |
-| --color-blue | --const-btn-padding-x | --light-background-alt-20 | --dark-disabled |
-| --color-brown | --const-btn-padding-y | --light-secondary | --dark-ab-color |
-| --color-forest | --const-btn-margin-x | --light-disabled | --dark-ab-background |
+| --color-grey-light | --const-btn-color-disabled | --light-complementary-color | --dark-complementary-color |
+| --color-charcoal | --const-btn-font-size | --light-complementary | --dark-complementary |
+| --color-transparent | --const-btn-min-width | --light-background-alt-5 | --dark-background-alt-5 |
+| --color-aqua | --const-btn-height | --light-background-alt-10 | --dark-background-alt-10 |
+| --color-blue | --const-btn-padding-x | --light-background-alt-20 | --dark-background-alt-20 |
+| --color-brown | --const-btn-padding-y | --light-secondary | --dark-secondary |
+| --color-forest | --const-btn-margin-x | --light-disabled | --dark-disabled |
 | --color-grey-dark | --const-btn-margin-y | --light-text-color | --dark-text-color |
 | --color-purple | --const-btn-radius | --light-headings-color | --dark-headings-color |
 | --color-lemon | --const-headings-margin-bottom | --light-tab-text-color | --dark-tab-text-color |
@@ -239,7 +239,6 @@ A list of the supported CSS variables follows:
 |  | --const-icon-font-size | --light-item-active-color | --dark-item-active-color |
 |  | --const-icon-font-size-lg | --light-item-active-background | --dark-item-active-background |
 |  |  | --light-btn-color | --dark-btn-color |
-|  |  | --light-ab-background-dark | --dark-ab-background-dark |
 |  |  | --light-item-active-icon-color | --dark-item-active-icon-color |
 |  |  | --light-btn-color-inverse | --dark-btn-color-inverse |
 |  |  | --light-btn-color-secondary | --dark-btn-color-secondary |
diff --git a/app-compat/bootstrap-based.compat.scss b/app-compat/bootstrap-based.compat.scss
index 9468ae2..ed773dd 100644
--- a/app-compat/bootstrap-based.compat.scss
+++ b/app-compat/bootstrap-based.compat.scss
@@ -7,13 +7,17 @@
 
 $compat: true;
 
-@import '~@nativescript/theme/scss/variables';
-
 // Variables form bootstrap v4 dependency
 @import '~bootstrap/scss/functions', '~bootstrap/scss/variables';
 
-// Import bootstrap map to apply variable mapping
-@import '~@nativescript/theme/scss/bootstrap/map';
+// Map NS theme variables to variables from the bootstrap v4 theme
+
+$background: theme-color("light");
+$background-dark: theme-color("dark");
+
+$accent: theme-color("primary");
+$complementary: theme-color("secondary");
+$error: theme-color("danger");
 
 // Import theme
 @import '~@nativescript/theme/index';
diff --git a/app-compat/customized.compat.scss b/app-compat/customized.compat.scss
index fd63a82..ab359c7 100644
--- a/app-compat/customized.compat.scss
+++ b/app-compat/customized.compat.scss
@@ -13,10 +13,10 @@ $compat: true;
 @import '~@nativescript/theme/scss/variables';
 
 // Colors
-$focus: #09A52e;
+$accent: #09A52e;
 $error: #F74E2F;
 
-$ab-background: #F74E2F;
+$complementary: #F74E2F;
 
 // Skin
 $background: #F0EED2;
diff --git a/app/bootstrap-based.scss b/app/bootstrap-based.scss
index 0b804d7..44b7c48 100644
--- a/app/bootstrap-based.scss
+++ b/app/bootstrap-based.scss
@@ -5,13 +5,17 @@
  * Licensed under Apache 2.0 (https://github.com/NativeScript/theme/blob/master/LICENSE)
  */
 
-@import '~@nativescript/theme/scss/variables';
-
 // Variables form bootstrap v4 dependency
 @import '~bootstrap/scss/functions', '~bootstrap/scss/variables';
 
-// Import bootstrap map to apply variable mapping
-@import '~@nativescript/theme/scss/bootstrap/map';
+// Map NS theme variables to variables from the bootstrap v4 theme
+
+$background: theme-color("light");
+$background-dark: theme-color("dark");
+
+$accent: theme-color("primary");
+$complementary: theme-color("secondary");
+$error: theme-color("danger");
 
 // Import theme
 @import '~@nativescript/theme/index';
diff --git a/app/customized.scss b/app/customized.scss
index 6228d10..902c1e6 100644
--- a/app/customized.scss
+++ b/app/customized.scss
@@ -11,10 +11,10 @@
 @import '~@nativescript/theme/scss/variables';
 
 // Colors
-$focus: #09A52e;
+$accent: #09A52e;
 $error: #F74E2F;
 
-$ab-background: #F74E2F;
+$complementary: #F74E2F;
 
 // Skin
 $background: #F0EED2;
diff --git a/app/navigation-vm.js b/app/navigation-vm.js
index 4f82951..7646a44 100644
--- a/app/navigation-vm.js
+++ b/app/navigation-vm.js
@@ -1,4 +1,4 @@
-import { topmost } from "tns-core-modules/ui/frame";
+import { Frame } from "tns-core-modules/ui/frame";
 import { BaseModel } from "./pages/base";
 import * as application from "tns-core-modules/application";
 import { ObservableArray } from "tns-core-modules/data/observable-array";
@@ -95,7 +95,7 @@ export class NavigationViewModel extends BaseModel {
             return this.openModal();
         }
 
-        topmost().navigate({
+        Frame.topmost().navigate({
             moduleName: `pages/${page.toLowerCase()}`,
             transition: {
                 name: "slide"
@@ -115,7 +115,7 @@ export class NavigationViewModel extends BaseModel {
             moduleName: `pages/${pageName}`,
             clearHistory: true
         };
-        topmost().navigate(navigationEntry);
+        Frame.topmost().navigate(navigationEntry);
 
         this.bindingContext.selectedPage = pageName;
     }
diff --git a/app/pages/base.js b/app/pages/base.js
index 9da1d9f..5f8af3f 100644
--- a/app/pages/base.js
+++ b/app/pages/base.js
@@ -1,5 +1,5 @@
 import { Observable } from "tns-core-modules/data/observable";
-import { topmost } from "tns-core-modules/ui/frame";
+import { Frame } from "tns-core-modules/ui/frame";
 import * as app from "tns-core-modules/application";
 
 export class BaseModel extends Observable {
@@ -8,7 +8,7 @@ export class BaseModel extends Observable {
         super();
         // Initialize default values.
         this.page = page;
-        this.topFrame = topmost();
+        this.topFrame = Frame.topmost();
         this.sideDrawer = app.getRootView();
         this.title = page && page.actionBarTitle;
     }
diff --git a/app/pages/login-form.js b/app/pages/login-form.js
index a4aa61f..2a526a3 100644
--- a/app/pages/login-form.js
+++ b/app/pages/login-form.js
@@ -1,5 +1,5 @@
 import { BaseModel } from "./base";
-import { topmost } from "tns-core-modules/ui/frame";
+import { Frame } from "tns-core-modules/ui/frame";
 
 export class LoginModel extends BaseModel {}
 
@@ -8,7 +8,7 @@ export function navigatingTo({ object: page }) {
 }
 
 export function goBack() {
-    topmost().navigate({
+    Frame.topmost().navigate({
         moduleName: "pages/login-landing",
         clearHistory: true,
         transition: {
diff --git a/app/pages/login-landing.js b/app/pages/login-landing.js
index d7fdef9..e3c037d 100644
--- a/app/pages/login-landing.js
+++ b/app/pages/login-landing.js
@@ -1,5 +1,5 @@
 import { BaseModel } from "./base";
-import { topmost } from "tns-core-modules/ui/frame";
+import { Frame } from "tns-core-modules/ui/frame";
 
 export class LandingModel extends BaseModel {}
 
@@ -8,7 +8,7 @@ export function navigatingTo({ object: page }) {
 }
 
 export function signIn() {
-    topmost().navigate({
+    Frame.topmost().navigate({
         moduleName: "pages/login-form",
         transition: {
             name: "slide"
@@ -17,7 +17,7 @@ export function signIn() {
 }
 
 export function goBack() {
-    topmost().navigate({
+    Frame.topmost().navigate({
         moduleName: "pages/root",
         clearHistory: true,
         transition: {
diff --git a/package-lock.json b/package-lock.json
index f5bf19f..cf39b4e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -420,6 +420,41 @@
         }
       }
     },
+    "@nativescript/core": {
+      "version": "6.2.0-rc-2019-10-23-134734-07",
+      "resolved": "https://registry.npmjs.org/@nativescript/core/-/core-6.2.0-rc-2019-10-23-134734-07.tgz",
+      "integrity": "sha512-Kl3bzGD4NqQWzqDT5eSH2i0N5aaR/6DL8YI83XX+oMiNMAVReN/GuvcNiAM2GCj+d6Kp15HU3jH+BYdhoYzvlg==",
+      "requires": {
+        "nativescript-hook": "0.2.5",
+        "reduce-css-calc": "^2.1.6",
+        "semver": "6.3.0",
+        "tns-core-modules-widgets": "6.2.0-rc-2019-10-23-134734-07",
+        "tslib": "1.10.0"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "6.0.4",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-6.0.4.tgz",
+          "integrity": "sha1-DwiGD2oVUSey+t1PnOJLGqtuTSI=",
+          "requires": {
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "2 || 3",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "nativescript-hook": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/nativescript-hook/-/nativescript-hook-0.2.5.tgz",
+          "integrity": "sha512-ciGJtNbtMB2lGv8jAkUripkRjd3g8atX9VYPSt6e8PI6YPiOKeoma3xjcXoW66pFMYpHnfrbp6Mq9U/QtiQrVg==",
+          "requires": {
+            "glob": "^6.0.1",
+            "mkdirp": "^0.5.1"
+          }
+        }
+      }
+    },
     "@nativescript/theme": {
       "version": "file:src"
     },
@@ -973,8 +1008,7 @@
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-      "dev": true
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
     },
     "base": {
       "version": "0.11.2",
@@ -1132,7 +1166,6 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
       "requires": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -1632,8 +1665,7 @@
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-      "dev": true
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
     },
     "concat-stream": {
       "version": "1.6.2",
@@ -2734,30 +2766,6 @@
         }
       }
     },
-    "extra-watch-webpack-plugin": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/extra-watch-webpack-plugin/-/extra-watch-webpack-plugin-1.0.3.tgz",
-      "integrity": "sha512-ZScQdMH6hNofRRN6QMQFg+aa5vqimfBgnPXmRDhdaLpttT6hrzpY9Oyren3Gh/FySPrgsvKCNbx/NFA7XNdIsg==",
-      "dev": true,
-      "requires": {
-        "glob": "^7.1.2",
-        "is-glob": "^4.0.0",
-        "lodash.uniq": "^4.5.0",
-        "schema-utils": "^0.4.0"
-      },
-      "dependencies": {
-        "schema-utils": {
-          "version": "0.4.7",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz",
-          "integrity": "sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==",
-          "dev": true,
-          "requires": {
-            "ajv": "^6.1.0",
-            "ajv-keywords": "^3.1.0"
-          }
-        }
-      }
-    },
     "extsprintf": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
@@ -4079,7 +4087,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-      "dev": true,
       "requires": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -4088,8 +4095,7 @@
     "inherits": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-      "dev": true
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
     },
     "ini": {
       "version": "1.3.5",
@@ -4563,12 +4569,6 @@
       "integrity": "sha1-0jM6NtnncXyK0vfKyv7HwytERmQ=",
       "dev": true
     },
-    "lodash.uniq": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
-      "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=",
-      "dev": true
-    },
     "lru-cache": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
@@ -4771,7 +4771,6 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
       "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-      "dev": true,
       "requires": {
         "brace-expansion": "^1.1.7"
       }
@@ -4779,8 +4778,7 @@
     "minimist": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-      "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-      "dev": true
+      "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
     },
     "mississippi": {
       "version": "2.0.0",
@@ -4843,7 +4841,6 @@
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
       "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
-      "dev": true,
       "requires": {
         "minimist": "0.0.8"
       }
@@ -4906,27 +4903,29 @@
       "integrity": "sha512-vCKwFX3u4Sty3fnlCO4pim0jcya4PPlYE7WxmVYODOQXzTswhiZ4GUwIkEJQgffUzGWe1dToTZG0RV48qBgi/A=="
     },
     "nativescript-dev-webpack": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/nativescript-dev-webpack/-/nativescript-dev-webpack-1.2.1.tgz",
-      "integrity": "sha512-+rkjBxeY+SbfK4emIfLGG+EjAL5a5nazTsr5LGtLQs+N34xlkUNqaHvbuCaz4VRXbySH/6TL5MvhOXAhrETOSQ==",
+      "version": "1.3.0-rc-2019-10-23-165129-02",
+      "resolved": "https://registry.npmjs.org/nativescript-dev-webpack/-/nativescript-dev-webpack-1.3.0-rc-2019-10-23-165129-02.tgz",
+      "integrity": "sha512-POEv1zcXFuar6t7a0eSoqtoYrMSFUB3kEnPHzc92M9ZlBYN9aQn/EMGEUXgMScHSgtPat+xXhNKxxKrGJQbD6w==",
       "dev": true,
       "requires": {
         "@angular-devkit/core": "8.2.0",
         "clean-webpack-plugin": "~1.0.0",
         "copy-webpack-plugin": "~4.6.0",
         "css-loader": "~2.1.1",
-        "extra-watch-webpack-plugin": "1.0.3",
+        "escape-string-regexp": "1.0.5",
         "fork-ts-checker-webpack-plugin": "1.3.0",
         "global-modules-path": "2.0.0",
         "loader-utils": "^1.2.3",
         "minimatch": "3.0.4",
         "nativescript-hook": "0.2.4",
         "nativescript-worker-loader": "~0.9.0",
+        "properties-reader": "0.3.1",
         "proxy-lib": "0.4.0",
         "raw-loader": "~0.5.1",
         "request": "2.88.0",
         "resolve-url-loader": "~3.0.0",
         "sass-loader": "~7.1.0",
+        "sax": "^1.2.4",
         "schema-utils": "0.4.5",
         "semver": "^6.0.0",
         "shelljs": "0.6.0",
@@ -5469,7 +5468,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-      "dev": true,
       "requires": {
         "wrappy": "1"
       }
@@ -5671,8 +5669,7 @@
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
-      "dev": true
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
     },
     "path-is-inside": {
       "version": "1.0.2",
@@ -5867,6 +5864,15 @@
       "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
       "dev": true
     },
+    "properties-reader": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/properties-reader/-/properties-reader-0.3.1.tgz",
+      "integrity": "sha512-ltBypWdJunkozeLZTQc7hhifymwnHK2bvGnGjI7NB092fuNY91tb7lnZOhPDKs9W9yfDAqjkQ8B0ZUdQkm1M6Q==",
+      "dev": true,
+      "requires": {
+        "mkdirp": "~0.5.1"
+      }
+    },
     "proxy-addr": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.5.tgz",
@@ -6061,9 +6067,9 @@
       }
     },
     "reduce-css-calc": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.6.tgz",
-      "integrity": "sha512-+l5/qlQmdsbM9h6JerJ/y5vR5Ci0k93aszLNpCmbadC3nBcbRGmIBm0s9Nj59i22LvCjTGftWzdQRwdknayxhw==",
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.7.tgz",
+      "integrity": "sha512-fDnlZ+AybAS3C7Q9xDq5y8A2z+lT63zLbynew/lur/IR24OQF5x98tfNwf79mzEdfywZ0a2wpM860FhFfMxZlA==",
       "requires": {
         "css-unit-converter": "^1.1.1",
         "postcss-value-parser": "^3.3.0"
@@ -6843,6 +6849,12 @@
         }
       }
     },
+    "sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
+      "dev": true
+    },
     "schema-utils": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.0.1.tgz",
@@ -6856,8 +6868,7 @@
     "semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
     },
     "send": {
       "version": "0.17.1",
@@ -7684,19 +7695,17 @@
       }
     },
     "tns-core-modules": {
-      "version": "6.2.0-next-2019-10-16-100036-02",
-      "resolved": "https://registry.npmjs.org/tns-core-modules/-/tns-core-modules-6.2.0-next-2019-10-16-100036-02.tgz",
-      "integrity": "sha512-8fZZuJW/KvoCnPkTjCA7IF4ulDJjE7GTX9H4fLSUKMzdWbWvpcOcqVVR/izEfWmsFmeesSPi3lkJW46yYjPBtQ==",
+      "version": "6.2.0-rc-2019-10-23-134734-07",
+      "resolved": "https://registry.npmjs.org/tns-core-modules/-/tns-core-modules-6.2.0-rc-2019-10-23-134734-07.tgz",
+      "integrity": "sha512-dF1SLXLGyfyAZKjX6eXAZKmdaqUz4f5LFStRop5ORqj4KOmccwkKcxUF3bXEKhMH8Ub0pn4sLGuxrR4YQOYpGQ==",
       "requires": {
-        "reduce-css-calc": "^2.1.6",
-        "tns-core-modules-widgets": "6.2.0-next-2019-10-16-100036-02",
-        "tslib": "1.10.0"
+        "@nativescript/core": "6.2.0-rc-2019-10-23-134734-07"
       }
     },
     "tns-core-modules-widgets": {
-      "version": "6.2.0-next-2019-10-16-100036-02",
-      "resolved": "https://registry.npmjs.org/tns-core-modules-widgets/-/tns-core-modules-widgets-6.2.0-next-2019-10-16-100036-02.tgz",
-      "integrity": "sha512-992SVgw0DLfm8NNN1D29ahuSvNjDUpre2/5+rRJ1ThJbXvuoFv+Rvp4H79NLd+fm2lp3kDBrdUKMz+HZgYlMzg=="
+      "version": "6.2.0-rc-2019-10-23-134734-07",
+      "resolved": "https://registry.npmjs.org/tns-core-modules-widgets/-/tns-core-modules-widgets-6.2.0-rc-2019-10-23-134734-07.tgz",
+      "integrity": "sha512-MbAW9Tbt6qpKEh0RW8n3PRxuuVEzef/GOfK6QHxkFGtc7CSnHbHixSV8o5rkklCSsteIxAaXH36yKMHGFEzsDA=="
     },
     "to-arraybuffer": {
       "version": "1.0.1",
@@ -8814,8 +8823,7 @@
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-      "dev": true
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
     },
     "write": {
       "version": "1.0.3",
diff --git a/package.json b/package.json
index fcc7ba1..c54ebb2 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     }
   },
   "dependencies": {
+    "@nativescript/core": "^6.2.0-rc-2019-10-17-131337-09",
     "@nativescript/theme": "./src",
     "bootstrap": "4.3.1",
     "nativescript-picker": "2.1.2",
@@ -30,7 +31,7 @@
     "nativescript-ui-sidedrawer": "7.0.3",
     "nativescript-ui-dataform": "5.1.1",
     "nativescript-ui-listview": "7.1.0",
-    "tns-core-modules": "6.2.0-next-2019-10-16-100036-02"
+    "tns-core-modules": "6.2.0-rc-2019-10-23-134734-07"
   },
   "devDependencies": {
     "@babel/core": "7.6.4",
@@ -40,7 +41,7 @@
     "eslint": "6.4.0",
     "glob": "7.1.4",
     "lazy": "1.0.11",
-    "nativescript-dev-webpack": "1.2.1",
+    "nativescript-dev-webpack": "1.3.0-rc-2019-10-23-165129-02",
     "resolve-url-loader": "3.1.0",
     "sass": "1.23.0",
     "sass-lint": "1.13.1",
diff --git a/src/scss/bootstrap/_map.scss b/src/scss/bootstrap/_map.scss
deleted file mode 100644
index 32820c1..0000000
--- a/src/scss/bootstrap/_map.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-// Map NS theme variables to variables from the bootstrap v4 theme
-
-$focus: theme-color() !default;
-$error: theme-color("danger") !default;
-
-// Skin
-$background: $base !default;
-$text-color: $primary !default;
-
-// Buttons
-$btn-color: theme-color() !default;
-$btn-color-secondary: lighten(theme-color(), 20%) !default;
-$background-alt-10: lighten($btn-color-secondary, 20%) !default;
-$btn-color-disabled: $btn-link-disabled-color !default;
diff --git a/src/scss/core/colors/_dark.scss b/src/scss/core/colors/_dark.scss
index 7450d70..96aa02b 100644
--- a/src/scss/core/colors/_dark.scss
+++ b/src/scss/core/colors/_dark.scss
@@ -1,8 +1,11 @@
 // Core dark colors
 $dark-colors: (
-    primary: $white,
-    background: $charcoal,
-    accent: $focus,
+    primary: $primary-dark,
+    background: $background-dark,
+    secondary: $secondary-dark,
+
+    accent: lighten($focus, 10%),
+    complementary: if(light(complementary) == #fff, $background-dark, if($complementary-dark != transparent, $complementary-dark, light(complementary))),
 
     btn-color: $white,
     border-color: lighten($focus, 10%)
@@ -10,50 +13,54 @@ $dark-colors: (
 
 @if (global_variable_exists("theme-type")) {
     $dark-colors: map-merge($dark-colors, (
-        accent: get-base-hue($primary-palette-name, 500),
+        accent: lighten(get-base-hue($primary-palette-name, 500), 10%),
+        complementary: get-base-hue($secondary-palette-name, 500),
         btn-color: map-get($material-dark-complimentary, base-bg),
         border-color: rgba(0,0,0,.08)
     ));
 
     $dark-colors: map-merge($dark-colors, (
-        disabled: mix(dark(accent), dark(background), 40%),
+        disabled: mix(dark(accent), dark(background), 40%)
     ));
 }
 
-@if (global_variable_exists("bg-color")) {
+@if (global_variable_exists("body-bg")) {
     $dark-colors: map-merge($dark-colors, (
-        background: mix($bg-color, $charcoal, 10%)
+        background: mix($body-bg, $charcoal, if(lightness($body-bg) > .5, 10%, 40%))
     ));
 
     $dark-colors: map-merge($dark-colors, (
+        complementary: $card-cap-bg,
         primary: alternate(dark(background), 70%),
-        border-color: rgba(255,255,255,.08),
-        btn-color: $base-bg
+        border-color: lighten($background, 3%),
+        btn-color: $secondary
     ));
 }
 
-@if (global_variable_exists("body-bg")) {
+@if (global_variable_exists("bg-color")) {
     $dark-colors: map-merge($dark-colors, (
-        background: mix($body-bg, $charcoal, if(lightness($body-bg) > .5, 10%, 40%))
+        background: mix($bg-color, $charcoal, 10%)
     ));
 
     $dark-colors: map-merge($dark-colors, (
+        complementary: $accent,
         primary: alternate(dark(background), 70%),
-        border-color: lighten($background, 3%),
-        btn-color: $secondary
+        border-color: rgba(255,255,255,.08),
+        btn-color: $base-bg
     ));
 }
 
+$dark-colors: map-merge($dark-colors, (
+    accent: if($accent-dark != transparent, $accent-dark, dark(accent))
+));
+
 $dark-colors: map-merge($dark-colors, (
     background-alt-5: lighten(dark(background), 5%),
     background-alt-10: lighten(dark(background), 10%),
     background-alt-20: lighten(dark(background), 20%),
-    secondary: darken(dark(primary), 30%),
     disabled: mix(dark(accent), dark(background), 40%),
 
-    accent: lighten(dark(accent), 10%),
-    ab-color: mix(light(ab-color), dark(primary), 20%),
-    ab-background: if(light(ab-background) == #fff, dark(background), mix(light(ab-background), dark(background), 50%)),
+    complementary: if($complementary-dark != transparent, $complementary-dark, mix(dark(complementary), dark(background), 50%)),
 
     text-color: dark(primary),
     headings-color: dark(primary),
@@ -72,7 +79,8 @@ $dark-colors: map-merge($dark-colors, (
 
 $dark-colors: map-merge($dark-colors, (
     item-active-background: dark(background-dark-accent),
-    ab-background-dark: darken(dark(ab-background), 5%),
+    complementary-color: if($complementary-color-dark != transparent, $complementary-color-dark, alternate(dark(complementary), 100%)),
+    complementary-dark: darken(dark(complementary), 5%),
     item-active-icon-color: dark(item-active-color),
     btn-color-inverse: alternate(dark(accent)),
     btn-color-secondary: darken(dark(btn-color), 10%)
diff --git a/src/scss/core/colors/_light.scss b/src/scss/core/colors/_light.scss
index 114b9e5..04966cb 100644
--- a/src/scss/core/colors/_light.scss
+++ b/src/scss/core/colors/_light.scss
@@ -2,9 +2,11 @@
 $light-colors: (
     primary: $primary,
     background: $background,
+    secondary: $secondary,
+
     accent: $focus,
-    ab-color: $ab-color,
-    ab-background: $ab-background,
+    complementary: $complementary,
+    complementary-color: $complementary-color,
 
     btn-color: $primary,
     border-color: $border-color
@@ -13,21 +15,21 @@ $light-colors: (
 @if global_variable_exists("theme-type") {
     $light-colors: map-merge($light-colors, (
         accent: get-base-hue($primary-palette-name, 500),
-        ab-background: get-base-hue($secondary-palette-name, 500),
+        complementary: get-base-hue($secondary-palette-name, 500),
         btn-color: map-get($material-light-complimentary, body-bg),
         border-color: rgba(0,0,0,.08)
     ));
 
     $light-colors: map-merge($light-colors, (
         disabled: mix(light(accent), light(background), 40%),
-        ab-color: alternate(light(ab-background))
+        complementary-color: alternate(light(complementary))
     ));
 }
 
 @if global_variable_exists("body-bg") {
     $light-colors: map-merge($light-colors, (
-        ab-background: $card-cap-bg,
-        ab-color: alternate($card-cap-bg, 100%),
+        complementary: $card-cap-bg,
+        complementary-color: alternate($card-cap-bg, 100%),
         border-color: darken($background, 3%),
         btn-color: $secondary
     ));
@@ -35,8 +37,8 @@ $light-colors: (
 
 @if global_variable_exists("bg-color") {
     $light-colors: map-merge($light-colors, (
-        ab-background: $accent,
-        ab-color: alternate($accent, 100%),
+        complementary: $accent,
+        complementary-color: alternate($accent, 100%),
         border-color: rgba(0,0,0,.08),
         btn-color: $base-bg
     ));
@@ -46,7 +48,6 @@ $light-colors: map-merge($light-colors, (
     background-alt-5: darken(light(background), 5%),
     background-alt-10: darken(light(background), 10%),
     background-alt-20: darken(light(background), 20%),
-    secondary: lighten(light(primary), 30%),
     disabled: mix(light(accent), light(background), 40%),
 
     text-color: light(primary),
@@ -66,7 +67,7 @@ $light-colors: map-merge($light-colors, (
 
 $light-colors: map-merge($light-colors, (
     item-active-background: light(background-dark-accent),
-    ab-background-dark: darken(light(ab-background), 5%),
+    complementary-dark: darken(light(complementary), 5%),
     item-active-icon-color: light(item-active-color),
     btn-color-inverse: alternate(light(accent)),
     btn-color-secondary: darken(light(btn-color), 10%)
diff --git a/src/scss/mixins/components/_action-bar.scss b/src/scss/mixins/components/_action-bar.scss
index d8605a8..130394a 100644
--- a/src/scss/mixins/components/_action-bar.scss
+++ b/src/scss/mixins/components/_action-bar.scss
@@ -101,18 +101,18 @@
 @mixin action-bar-skin($selectors, $item-selectors) {
     #{$selectors} {
         @include colorize(
-            $color: ab-color,
-            $background-color: ab-background
+            $color: complementary-color,
+            $background-color: complementary
         );
 
         #{$item-selectors} {
             @include colorize(
-                $color: ab-color
+                $color: complementary-color
             );
 
             #{if($compat, '&-active:active', '&:active, &.-active')} {
                 @include colorize(
-                    $color: ab-color
+                    $color: complementary-color
                 );
             }
 
@@ -126,13 +126,13 @@
             .ns-android & Button,
             .ns-android & .nt-button {
                 @include colorize(
-                    $background-color: ab-background
+                    $background-color: complementary
                 );
             }
         } @else {
             .ns-android & .btn {
                 @include colorize(
-                    $background-color: ab-background
+                    $background-color: complementary
                 );
             }
         }
diff --git a/src/scss/mixins/components/_button.scss b/src/scss/mixins/components/_button.scss
index cdb9380..e41d8aa 100644
--- a/src/scss/mixins/components/_button.scss
+++ b/src/scss/mixins/components/_button.scss
@@ -262,7 +262,7 @@
                 @include button-animations(btn-color-active, btn-color, 10%);
 
                 ActionBar & {
-                    @include button-animations(actionbar, ab-background, 10%, true);
+                    @include button-animations(actionbar, complementary, 10%, true);
                 }
             }
 
diff --git a/src/scss/mixins/components/_side--drawer.scss b/src/scss/mixins/components/_side--drawer.scss
index a7e1648..7bf076a 100644
--- a/src/scss/mixins/components/_side--drawer.scss
+++ b/src/scss/mixins/components/_side--drawer.scss
@@ -114,10 +114,10 @@
             }
 
             #{if($compat, '.sidedrawer-header', '.nt-drawer__header')} {
-                background-color: dark(ab-background-dark);
+                background-color: dark(complementary-dark);
 
                 Label {
-                    color: dark(ab-color);
+                    color: dark(complementary-color);
                 }
             }
         }
@@ -126,8 +126,8 @@
 
 @mixin side-drawer-skin-content($mode: light) {
     #{if($compat, '.sidedrawer-header', '.nt-drawer__header')} {
-        color: mode-get($mode, ab-color);
-        background-color: mode-get($mode, ab-background-dark);
+        color: mode-get($mode, complementary-color);
+        background-color: mode-get($mode, complementary-dark);
     }
 
     #{if($compat, ('.sidedrawer-left', '.sidedrawer-center'), ('> *', '.nt-drawer__content'))} {
diff --git a/src/scss/variables/_aqua.scss b/src/scss/variables/_aqua.scss
index 3dd619c..f44d73b 100644
--- a/src/scss/variables/_aqua.scss
+++ b/src/scss/variables/_aqua.scss
@@ -5,12 +5,12 @@
  * Aqua variable overrides
  **/
 
-// ActionBar
-$ab-background: const(aqua);
-$ab-color: const(white);
+// Complementary
+$complementary: const(aqua);
+$complementary-color: const(white);
 
 // Accent
-$focus: const(lime);
+$accent: const(lime);
 
 // Buttons
 $btn-color-inverse: const(white);
diff --git a/src/scss/variables/_blue.scss b/src/scss/variables/_blue.scss
index a062ce0..53c8f90 100644
--- a/src/scss/variables/_blue.scss
+++ b/src/scss/variables/_blue.scss
@@ -5,11 +5,11 @@
  * Blue variable overrides
  **/
 
-// ActionBar
-$ab-background: const(blue);
-$ab-color: const(white);
+// Complementary
+$complementary: const(blue);
+$complementary-color: const(white);
 
 // Accent
-$focus: const(blue);
+$accent: const(blue);
 
 @import '../core/colors/index';
diff --git a/src/scss/variables/_brown.scss b/src/scss/variables/_brown.scss
index c3b97dd..b8d84fe 100644
--- a/src/scss/variables/_brown.scss
+++ b/src/scss/variables/_brown.scss
@@ -5,12 +5,12 @@
  * Brown variable overrides
  **/
 
-// ActionBar
-$ab-background: const(brown);
-$ab-color: const(white);
+// Complementary
+$complementary: const(brown);
+$complementary-color: const(white);
 
 // Accent
-$focus: const(lime);
+$accent: const(lime);
 
 // Buttons
 $btn-color-inverse: const(white);
diff --git a/src/scss/variables/_forest.scss b/src/scss/variables/_forest.scss
index ea94d7a..68371c4 100644
--- a/src/scss/variables/_forest.scss
+++ b/src/scss/variables/_forest.scss
@@ -5,12 +5,12 @@
  * Forest variable overrides
  **/
 
-// ActionBar
-$ab-background: const(forest);
-$ab-color: const(white);
+// Complementary
+$complementary: const(forest);
+$complementary-color: const(white);
 
 // Accent
-$focus: const(aqua);
+$accent: const(aqua);
 
 // Buttons
 $btn-color-inverse: const(white);
diff --git a/src/scss/variables/_grey.scss b/src/scss/variables/_grey.scss
index 28485e1..d9468ff 100644
--- a/src/scss/variables/_grey.scss
+++ b/src/scss/variables/_grey.scss
@@ -5,12 +5,12 @@
  * Forest variable overrides
  **/
 
-// ActionBar
-$ab-background: const(grey-dark);
-$ab-color: const(white);
+// Complementary
+$complementary: const(grey-dark);
+$complementary-color: const(white);
 
 // Accent
-$focus: const(lime);
+$accent: const(lime);
 
 // Buttons
 $btn-color-inverse: const(white);
diff --git a/src/scss/variables/_index.scss b/src/scss/variables/_index.scss
index 1f8084a..feb9ab9 100644
--- a/src/scss/variables/_index.scss
+++ b/src/scss/variables/_index.scss
@@ -59,23 +59,44 @@ $accent: #30bcff !default;
 $background: #fff !default;
 $primary: alternate($background, 85%) !default;
 $secondary: darken($primary, 30%) !default;
-$focus: #30bcff !default;
-$disabled: mix($focus, $background, 40%), !default;
-$border-color: $focus !default;
 
-$ab-color: $primary !default;
-$ab-background: $white !default;
+$background-dark: $charcoal !default;
+$primary-dark: alternate($background-dark, 85%) !default;
+$secondary-dark: darken($primary-dark, 30%) !default;
+
+$complementary: $white !default;
+$complementary-dark: transparent !default;
+
+$complementary-color: alternate($complementary, 100%) !default;
+$complementary-color-dark: transparent !default;
 
 $theme-variant: "nativescript";
 
 $material-colors: () !default;
 
-// Kendo overrides
+// Kendo and compatibility overrides
+
+@if (global_variable_exists('ab-background')) {
+    $complementary: $ab-background;
+}
+
+@if (global_variable_exists('ab-color')) {
+    $complementary-color: $ab-color;
+}
+
+// $focus is an internal variable to abstract the accent from the input
+$focus: null !default;
 
 @if (global_variable_exists('primary-palette-name')) {
     $focus: $primary-palette-name;
+} @else {
+    $focus: $accent;
 }
 
+$accent-dark: transparent !default;
+$disabled: mix($focus, $background, 40%), !default;
+$border-color: $focus !default;
+
 @if (global_variable_exists('secondary-palette-name')) {
     $secondary: $secondary-palette-name;
 }
diff --git a/src/scss/variables/_lemon.scss b/src/scss/variables/_lemon.scss
index 22b1080..78da702 100644
--- a/src/scss/variables/_lemon.scss
+++ b/src/scss/variables/_lemon.scss
@@ -5,12 +5,12 @@
  * Lemon variable overrides
  **/
 
-// ActionBar
-$ab-background: const(lemon);
-$ab-color: const(charcoal);
+// Complementary
+$complementary: const(lemon);
+$complementary-color: const(charcoal);
 
 // Accent
-$focus: const(grey-dark);
+$accent: const(grey-dark);
 
 // Buttons
 $btn-color-inverse: const(white);
diff --git a/src/scss/variables/_lime.scss b/src/scss/variables/_lime.scss
index e7067ca..2d5e77d 100644
--- a/src/scss/variables/_lime.scss
+++ b/src/scss/variables/_lime.scss
@@ -5,12 +5,12 @@
  * Lime variable overrides
  **/
 
-// ActionBar
-$ab-background: const(lime);
-$ab-color: const(charcoal);
+// Complementary
+$complementary: const(lime);
+$complementary-color: const(charcoal);
 
 // Accent
-$focus: const(forest);
+$accent: const(forest);
 
 // Buttons
 $btn-color-inverse: const(white);
diff --git a/src/scss/variables/_orange.scss b/src/scss/variables/_orange.scss
index bf54088..1a4d8c1 100644
--- a/src/scss/variables/_orange.scss
+++ b/src/scss/variables/_orange.scss
@@ -5,12 +5,12 @@
  * Orange variable overrides
  **/
 
-// ActionBar
-$ab-background: const(orange);
-$ab-color: const(white);
-
 // Accent
-$focus: const(brown);
+$accent: const(brown);
+
+// Complementary
+$complementary: const(orange);
+$complementary-color: const(white);
 
 // Buttons
 $btn-color-inverse: const(white);
diff --git a/src/scss/variables/_purple.scss b/src/scss/variables/_purple.scss
index c183bd9..c0c7e88 100644
--- a/src/scss/variables/_purple.scss
+++ b/src/scss/variables/_purple.scss
@@ -5,12 +5,12 @@
  * Purple variable overrides
  **/
 
-// ActionBar
-$ab-background: const(purple);
-$ab-color: const(white);
-
 // Accent
-$focus: const(sky);
+$accent: const(sky);
+
+// Complementary
+$complementary: const(purple);
+$complementary-color: const(white);
 
 // Buttons
 $btn-color-inverse: const(white);
diff --git a/src/scss/variables/_ruby.scss b/src/scss/variables/_ruby.scss
index 854f8ab..545f235 100644
--- a/src/scss/variables/_ruby.scss
+++ b/src/scss/variables/_ruby.scss
@@ -5,12 +5,12 @@
  * Ruby variable overrides
  **/
 
-// ActionBar
-$ab-background: const(ruby);
-$ab-color: const(white);
-
 // Accent
-$focus: const(lemon);
+$accent: const(lemon);
+
+// Complementary
+$complementary: const(ruby);
+$complementary-color: const(white);
 
 // Buttons
 $btn-color-inverse: const(charcoal);
diff --git a/src/scss/variables/_sky.scss b/src/scss/variables/_sky.scss
index 844d35e..c0e3753 100644
--- a/src/scss/variables/_sky.scss
+++ b/src/scss/variables/_sky.scss
@@ -5,12 +5,12 @@
  * Sky variable overrides
  **/
 
-// ActionBar
-$ab-background: const(sky);
-$ab-color: const(white);
-
 // Accent
-$focus: const(lemon);
+$accent: const(lemon);
+
+// Complementary
+$complementary: const(sky);
+$complementary-color: const(white);
 
 // Buttons
 $btn-color-inverse: const(charcoal);
diff --git a/webpack.config.js b/webpack.config.js
index 95c08b3..0e384b1 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -47,9 +47,13 @@ module.exports = smp.wrap((env) => {
         hiddenSourceMap, // --env.hiddenSourceMap
         hmr, // --env.hmr,
         unitTesting, // --env.unitTesting,
-        verbose // --env.verbose
+        verbose, // --env.verbose
+        snapshotInDocker, // --env.snapshotInDocker
+        skipSnapshotTools, // --env.skipSnapshotTools
+        compileSnapshot // --env.compileSnapshot
     } = env;
 
+    const useLibs = compileSnapshot;
     const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap;
     const externals = nsWebpack.getConvertedExternals(env.externals);
     const appFullPath = resolve(projectRoot, appPath);
@@ -126,6 +130,7 @@ module.exports = smp.wrap((env) => {
         devtool: hiddenSourceMap ? "hidden-source-map" : (sourceMap ? "inline-source-map" : "none"),
         optimization: {
             runtimeChunk: "single",
+            noEmitOnErrors: true,
             splitChunks: {
                 cacheGroups: {
                     styles: {
@@ -295,7 +300,10 @@ module.exports = smp.wrap((env) => {
                 "tns-core-modules/bundle-entry-points"
             ],
             projectRoot,
-            webpackConfig: config
+            webpackConfig: config,
+            snapshotInDocker,
+            skipSnapshotTools,
+            useLibs
         }));
     }
 

From 787a751a8c3aa61b69116c974be3dff22836d4b6 Mon Sep 17 00:00:00 2001
From: Vasil Chimev <vasil.chimev@gmail.com>
Date: Thu, 24 Oct 2019 09:44:55 +0300
Subject: [PATCH 06/13] feat: add Frame control (#198)

* feat: add Frame control

* chore: update config files
---
 .gitignore                                | 4 ++++
 src/scss/core/_controls.scss              | 6 ++++++
 src/scss/mixins/components/_controls.scss | 6 ++++++
 3 files changed, 16 insertions(+)

diff --git a/.gitignore b/.gitignore
index 7d4ae10..5daf253 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,7 @@
+# Repository
+nativescript-theme-core/
+package-lock.json
+
 # NativeScript
 hooks/
 node_modules/
diff --git a/src/scss/core/_controls.scss b/src/scss/core/_controls.scss
index 50cbab2..240a23f 100644
--- a/src/scss/core/_controls.scss
+++ b/src/scss/core/_controls.scss
@@ -10,6 +10,12 @@
                 '.nt-label')
     );
 
+
+    @include frame(
+                ('Frame',
+                '.nt-frame')
+    );
+
     @include page(
                 ('Page',
                 '.nt-page')
diff --git a/src/scss/mixins/components/_controls.scss b/src/scss/mixins/components/_controls.scss
index 4944725..ddc2cd9 100644
--- a/src/scss/mixins/components/_controls.scss
+++ b/src/scss/mixins/components/_controls.scss
@@ -8,6 +8,12 @@
     }
 }
 
+@mixin frame($selectors) {
+    #{$selectors} {
+        @include colorize($background-color: background);
+    }
+}
+
 @mixin page($selectors) {
     #{$selectors} {
         @include colorize(

From 950f396d22a688ff9091eadd8b0b762ed590a92c Mon Sep 17 00:00:00 2001
From: "Bundyo (Kamen Bundev)" <bundyo@gmail.com>
Date: Fri, 25 Oct 2019 11:00:31 +0300
Subject: [PATCH 07/13] fix: accents, separate default core styling (#199)

---
 app-compat/app.scss                           |  1 +
 app-compat/customized.compat.scss             |  1 -
 app/app.scss                                  |  1 +
 app/customized.scss                           |  1 -
 package-lock.json                             | 28 +++++++++----------
 package.json                                  |  8 +++---
 src/_index.scss                               |  1 +
 src/default.compat.scss                       | 11 ++++++++
 src/default.scss                              | 10 +++++++
 src/scss/_controls.scss                       |  7 ++---
 src/scss/core/_controls.scss                  |  9 ++----
 src/scss/core/_utilities.scss                 |  1 -
 src/scss/core/colors/_index.scss              | 17 +++++++++++
 src/scss/core/primitives/_bootstrap.scss      |  4 +--
 src/scss/mixins/components/_forms.scss        |  1 -
 src/scss/mixins/components/_list-view.scss    |  2 --
 src/scss/mixins/components/_side--drawer.scss |  1 -
 src/scss/variables/_blue.scss                 |  2 +-
 src/scss/variables/_default.scss              |  3 ++
 src/scss/variables/_grey.scss                 |  2 +-
 src/scss/variables/_index.scss                | 19 -------------
 21 files changed, 70 insertions(+), 60 deletions(-)
 create mode 100644 src/default.compat.scss
 create mode 100644 src/default.scss
 create mode 100644 src/scss/variables/_default.scss

diff --git a/app-compat/app.scss b/app-compat/app.scss
index 01c2763..fb79eda 100644
--- a/app-compat/app.scss
+++ b/app-compat/app.scss
@@ -2,6 +2,7 @@
 // other than “light”, switch the path to the alternative scheme,
 // for example '~@nativescript/theme/scss/dark'.
 @import '~@nativescript/theme/core.compat';
+@import '~@nativescript/theme/default.compat';
 
 @import '~/assets/css/font-awesome.scss';
 
diff --git a/app-compat/customized.compat.scss b/app-compat/customized.compat.scss
index ab359c7..b557f8e 100644
--- a/app-compat/customized.compat.scss
+++ b/app-compat/customized.compat.scss
@@ -20,7 +20,6 @@ $complementary: #F74E2F;
 
 // Skin
 $background: #F0EED2;
-$text-color: $primary;
 
 // Buttons
 $btn-color: $focus;
diff --git a/app/app.scss b/app/app.scss
index f0288c1..1634639 100644
--- a/app/app.scss
+++ b/app/app.scss
@@ -2,6 +2,7 @@
 // other than “light”, switch the path to the alternative scheme,
 // for example '~@nativescript/theme/scss/dark'.
 @import '~@nativescript/theme/core';
+@import '~@nativescript/theme/default';
 
 @import '~/assets/css/font-awesome.scss';
 
diff --git a/app/customized.scss b/app/customized.scss
index 902c1e6..24d19b9 100644
--- a/app/customized.scss
+++ b/app/customized.scss
@@ -18,7 +18,6 @@ $complementary: #F74E2F;
 
 // Skin
 $background: #F0EED2;
-$text-color: $primary;
 
 // Buttons
 $btn-color: $focus;
diff --git a/package-lock.json b/package-lock.json
index cf39b4e..9c22d7e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -421,14 +421,14 @@
       }
     },
     "@nativescript/core": {
-      "version": "6.2.0-rc-2019-10-23-134734-07",
-      "resolved": "https://registry.npmjs.org/@nativescript/core/-/core-6.2.0-rc-2019-10-23-134734-07.tgz",
-      "integrity": "sha512-Kl3bzGD4NqQWzqDT5eSH2i0N5aaR/6DL8YI83XX+oMiNMAVReN/GuvcNiAM2GCj+d6Kp15HU3jH+BYdhoYzvlg==",
+      "version": "6.2.0-rc-2019-10-24-132340-02",
+      "resolved": "https://registry.npmjs.org/@nativescript/core/-/core-6.2.0-rc-2019-10-24-132340-02.tgz",
+      "integrity": "sha512-3ilaXY2hvCkGnXRFoNT0iqm9PulXK9VeutKAVjmUzfl/AwSei7RMgjUdEMgS0Rf2dSpH2GhAO/LurCmZSWK5XA==",
       "requires": {
         "nativescript-hook": "0.2.5",
         "reduce-css-calc": "^2.1.6",
         "semver": "6.3.0",
-        "tns-core-modules-widgets": "6.2.0-rc-2019-10-23-134734-07",
+        "tns-core-modules-widgets": "6.2.0-rc-2019-10-24-132340-02",
         "tslib": "1.10.0"
       },
       "dependencies": {
@@ -4903,9 +4903,9 @@
       "integrity": "sha512-vCKwFX3u4Sty3fnlCO4pim0jcya4PPlYE7WxmVYODOQXzTswhiZ4GUwIkEJQgffUzGWe1dToTZG0RV48qBgi/A=="
     },
     "nativescript-dev-webpack": {
-      "version": "1.3.0-rc-2019-10-23-165129-02",
-      "resolved": "https://registry.npmjs.org/nativescript-dev-webpack/-/nativescript-dev-webpack-1.3.0-rc-2019-10-23-165129-02.tgz",
-      "integrity": "sha512-POEv1zcXFuar6t7a0eSoqtoYrMSFUB3kEnPHzc92M9ZlBYN9aQn/EMGEUXgMScHSgtPat+xXhNKxxKrGJQbD6w==",
+      "version": "1.3.0-rc-2019-10-23-205429-04",
+      "resolved": "https://registry.npmjs.org/nativescript-dev-webpack/-/nativescript-dev-webpack-1.3.0-rc-2019-10-23-205429-04.tgz",
+      "integrity": "sha512-IiNLPE4ZYp1qwCImrySlUaev9U27AMZmlcOBeYUd7onn0kXKKjmVQk43EgC/lI8S+2l1wmNtAKrH9b8TT9BaTA==",
       "dev": true,
       "requires": {
         "@angular-devkit/core": "8.2.0",
@@ -7695,17 +7695,17 @@
       }
     },
     "tns-core-modules": {
-      "version": "6.2.0-rc-2019-10-23-134734-07",
-      "resolved": "https://registry.npmjs.org/tns-core-modules/-/tns-core-modules-6.2.0-rc-2019-10-23-134734-07.tgz",
-      "integrity": "sha512-dF1SLXLGyfyAZKjX6eXAZKmdaqUz4f5LFStRop5ORqj4KOmccwkKcxUF3bXEKhMH8Ub0pn4sLGuxrR4YQOYpGQ==",
+      "version": "6.2.0-rc-2019-10-24-132340-02",
+      "resolved": "https://registry.npmjs.org/tns-core-modules/-/tns-core-modules-6.2.0-rc-2019-10-24-132340-02.tgz",
+      "integrity": "sha512-te6GRyH0xsjQrRmDfqwTf5dIgZOz3LccIeWcb78TQSesJvRxf3+YsjTFRli3TvEHlA8C/G5xpFfNFYRrR1TuXA==",
       "requires": {
-        "@nativescript/core": "6.2.0-rc-2019-10-23-134734-07"
+        "@nativescript/core": "6.2.0-rc-2019-10-24-132340-02"
       }
     },
     "tns-core-modules-widgets": {
-      "version": "6.2.0-rc-2019-10-23-134734-07",
-      "resolved": "https://registry.npmjs.org/tns-core-modules-widgets/-/tns-core-modules-widgets-6.2.0-rc-2019-10-23-134734-07.tgz",
-      "integrity": "sha512-MbAW9Tbt6qpKEh0RW8n3PRxuuVEzef/GOfK6QHxkFGtc7CSnHbHixSV8o5rkklCSsteIxAaXH36yKMHGFEzsDA=="
+      "version": "6.2.0-rc-2019-10-24-132340-02",
+      "resolved": "https://registry.npmjs.org/tns-core-modules-widgets/-/tns-core-modules-widgets-6.2.0-rc-2019-10-24-132340-02.tgz",
+      "integrity": "sha512-HoYV1/DBEldftJSw2GTRpUw7C06a5AMrVZCkJalMEbCkLvgURC98Rta4SvSINgtDyK6LkRnyZYzHG402q/2xqw=="
     },
     "to-arraybuffer": {
       "version": "1.0.1",
diff --git a/package.json b/package.json
index c54ebb2..b5b8b93 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/theme",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "Telerik NativeScript Core Theme",
   "author": "Telerik <support@telerik.com>",
   "homepage": "https://www.nativescript.org",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@nativescript/core": "^6.2.0-rc-2019-10-17-131337-09",
+    "@nativescript/core": "6.2.0-rc-2019-10-24-132340-02",
     "@nativescript/theme": "./src",
     "bootstrap": "4.3.1",
     "nativescript-picker": "2.1.2",
@@ -31,7 +31,7 @@
     "nativescript-ui-sidedrawer": "7.0.3",
     "nativescript-ui-dataform": "5.1.1",
     "nativescript-ui-listview": "7.1.0",
-    "tns-core-modules": "6.2.0-rc-2019-10-23-134734-07"
+    "tns-core-modules": "6.2.0-rc-2019-10-24-132340-02"
   },
   "devDependencies": {
     "@babel/core": "7.6.4",
@@ -41,7 +41,7 @@
     "eslint": "6.4.0",
     "glob": "7.1.4",
     "lazy": "1.0.11",
-    "nativescript-dev-webpack": "1.3.0-rc-2019-10-23-165129-02",
+    "nativescript-dev-webpack": "1.3.0-rc-2019-10-23-205429-04",
     "resolve-url-loader": "3.1.0",
     "sass": "1.23.0",
     "sass-lint": "1.13.1",
diff --git a/src/_index.scss b/src/_index.scss
index b78d277..fca8fa7 100644
--- a/src/_index.scss
+++ b/src/_index.scss
@@ -1 +1,2 @@
 @import './scss/core/index';
+@import './scss/index';
diff --git a/src/default.compat.scss b/src/default.compat.scss
new file mode 100644
index 0000000..5094dec
--- /dev/null
+++ b/src/default.compat.scss
@@ -0,0 +1,11 @@
+/*!
+ * NativeScript Compatibility Theme __VERSION__ (https://nativescript.org)
+ * Copyright 2016-2016 The Theme Authors
+ * Copyright 2016-2019 Progress Software
+ * Licensed under Apache 2.0 (https://github.com/NativeScript/theme/blob/master/LICENSE)
+ */
+
+$compat: true;
+
+// Default
+@import './default';
diff --git a/src/default.scss b/src/default.scss
new file mode 100644
index 0000000..c7ab21a
--- /dev/null
+++ b/src/default.scss
@@ -0,0 +1,10 @@
+/*!
+ * NativeScript Theme __VERSION__ (https://nativescript.org)
+ * Copyright 2016-2016 The Theme Authors
+ * Copyright 2016-2019 Progress Software
+ * Licensed under Apache 2.0 (https://github.com/NativeScript/theme/blob/master/LICENSE)
+ */
+
+// Default
+@import './scss/variables/default';
+@import './scss/index';
diff --git a/src/scss/_controls.scss b/src/scss/_controls.scss
index 247da42..da0c04d 100644
--- a/src/scss/_controls.scss
+++ b/src/scss/_controls.scss
@@ -59,16 +59,13 @@
     @include form-fields-skin();
 
     @include input-component-skin(
-                ('NTInput',
-                '.nt-input')
+                ('.nt-input')
     );
 
   @include action-bar-skin(
               ('ActionBar',
-              'NTActionBar',
               '.nt-action-bar'),
-              ('NTIcon',
-              'Label',
+              ('Label',
               'Button',
               '.nt-action-bar__item')
   );
diff --git a/src/scss/core/_controls.scss b/src/scss/core/_controls.scss
index 240a23f..5c225d2 100644
--- a/src/scss/core/_controls.scss
+++ b/src/scss/core/_controls.scss
@@ -80,17 +80,14 @@
     @include form-fields();
 
     @include input-component(
-                ('NTInput',
-                '.nt-input')
+                ('.nt-input')
     );
 
     @include action-bar(
                 ('ActionBar',
-                'NTActionBar',
                 '.nt-action-bar'),
 
-                ('NTIcon',
-                'Label',
+                ('Label',
                 'Button',
                 '.nt-action-bar__item')
     );
@@ -112,5 +109,3 @@
     @include input-component('.input-field');
     @include action-bar('.action-bar', '.action-item');
 }
-
-@import '../index';
diff --git a/src/scss/core/_utilities.scss b/src/scss/core/_utilities.scss
index 07ff0cc..6fb14b1 100644
--- a/src/scss/core/_utilities.scss
+++ b/src/scss/core/_utilities.scss
@@ -26,7 +26,6 @@ Image {
     min-height: 20;
 }
 
-NTIcon,
 .nt-icon {
     font-size: const(btn-font-size);
 }
diff --git a/src/scss/core/colors/_index.scss b/src/scss/core/colors/_index.scss
index bbaf5f3..1b2dd11 100644
--- a/src/scss/core/colors/_index.scss
+++ b/src/scss/core/colors/_index.scss
@@ -1,3 +1,20 @@
+// $focus is an internal variable to abstract the accent from the input
+$focus: null !default;
+
+@if (global_variable_exists('primary-palette-name')) {
+    $focus: $primary-palette-name;
+} @else {
+    @if (global_variable_exists('accent')) {
+        $focus: $accent;
+    } @else {
+        $focus: #30bcff;
+    }
+}
+
+$accent-dark: transparent !default;
+$disabled: mix($focus, $background, 40%), !default;
+$border-color: $focus !default;
+
 // Constants
 
 $colors:  (
diff --git a/src/scss/core/primitives/_bootstrap.scss b/src/scss/core/primitives/_bootstrap.scss
index bf03f8d..43cf04a 100644
--- a/src/scss/core/primitives/_bootstrap.scss
+++ b/src/scss/core/primitives/_bootstrap.scss
@@ -38,7 +38,7 @@
 
 // Contextual colors and backgrounds http://v4-alpha.getbootstrap.com/components/utilities/#contextual-colors-and-backgrounds
 .text-primary {
-  color: $accent;
+  color: light(accent);
 }
 
 .text-danger {
@@ -46,7 +46,7 @@
 }
 
 .bg-primary {
-  background-color: $accent;
+  background-color: light(accent);
   color: $white;
 }
 
diff --git a/src/scss/mixins/components/_forms.scss b/src/scss/mixins/components/_forms.scss
index 288b5d3..2ccf7d7 100644
--- a/src/scss/mixins/components/_forms.scss
+++ b/src/scss/mixins/components/_forms.scss
@@ -313,7 +313,6 @@
         }
 
         @if not $compat {
-            & > NTIcon,
             & > .nt-icon {
                 font-size: const(icon-font-size-lg);
                 vertical-align: center;
diff --git a/src/scss/mixins/components/_list-view.scss b/src/scss/mixins/components/_list-view.scss
index c2ec938..b9a4593 100644
--- a/src/scss/mixins/components/_list-view.scss
+++ b/src/scss/mixins/components/_list-view.scss
@@ -91,7 +91,6 @@
             }
         }
 
-        NTIcon,
         .nt-icon {
             font-size: const(icon-font-size-lg);
             width: 56;
@@ -144,7 +143,6 @@
             }
         }
 
-        NTIcon,
         .nt-icon {
             @include colorize($scale-contrasted-color: accent background 0% 50%);
         }
diff --git a/src/scss/mixins/components/_side--drawer.scss b/src/scss/mixins/components/_side--drawer.scss
index 7bf076a..4f82137 100644
--- a/src/scss/mixins/components/_side--drawer.scss
+++ b/src/scss/mixins/components/_side--drawer.scss
@@ -84,7 +84,6 @@
                 vertical-align: center;
             }
 
-            NTIcon,
             .nt-icon {
                 font-size: const(icon-font-size);
                 width: 30;
diff --git a/src/scss/variables/_blue.scss b/src/scss/variables/_blue.scss
index 53c8f90..bed5d19 100644
--- a/src/scss/variables/_blue.scss
+++ b/src/scss/variables/_blue.scss
@@ -10,6 +10,6 @@ $complementary: const(blue);
 $complementary-color: const(white);
 
 // Accent
-$accent: const(blue);
+$accent: const(sky);
 
 @import '../core/colors/index';
diff --git a/src/scss/variables/_default.scss b/src/scss/variables/_default.scss
new file mode 100644
index 0000000..922939c
--- /dev/null
+++ b/src/scss/variables/_default.scss
@@ -0,0 +1,3 @@
+// Core variables
+@import './index';
+@import '../core/colors/index';
diff --git a/src/scss/variables/_grey.scss b/src/scss/variables/_grey.scss
index d9468ff..be9e98d 100644
--- a/src/scss/variables/_grey.scss
+++ b/src/scss/variables/_grey.scss
@@ -14,7 +14,7 @@ $accent: const(lime);
 
 // Buttons
 $btn-color-inverse: const(white);
-$btn-color: $focus;
+$btn-color: $accent;
 $btn-color-secondary: darken($btn-color, 10%);
 $background-alt-10: lighten($btn-color, 10%);
 
diff --git a/src/scss/variables/_index.scss b/src/scss/variables/_index.scss
index feb9ab9..eb13c57 100644
--- a/src/scss/variables/_index.scss
+++ b/src/scss/variables/_index.scss
@@ -51,10 +51,6 @@ $enable-gradients:          false !default;
 $enable-transitions:        false !default;
 
 
-// $accent is only used for compatibility with Kendo Material theme.
-// Main accent variable is $focus. However, it again becomes accent in the color map.
-$accent: #30bcff !default;
-
 // Colors
 $background: #fff !default;
 $primary: alternate($background, 85%) !default;
@@ -84,19 +80,6 @@ $material-colors: () !default;
     $complementary-color: $ab-color;
 }
 
-// $focus is an internal variable to abstract the accent from the input
-$focus: null !default;
-
-@if (global_variable_exists('primary-palette-name')) {
-    $focus: $primary-palette-name;
-} @else {
-    $focus: $accent;
-}
-
-$accent-dark: transparent !default;
-$disabled: mix($focus, $background, 40%), !default;
-$border-color: $focus !default;
-
 @if (global_variable_exists('secondary-palette-name')) {
     $secondary: $secondary-palette-name;
 }
@@ -125,14 +108,12 @@ $border-color: $focus !default;
     $theme-variant: "kendo-bootstrap";
 
     $background: $body-bg;
-    $focus: $accent;
 }
 
 @if (global_variable_exists("bg-color")) {
     $theme-variant: "kendo-default";
 
     $background: $bg-color;
-    $focus: $accent;
 }
 
 // Core colors

From dc5a7bb820a0d69ee7d41496ab4c11dca541a9a4 Mon Sep 17 00:00:00 2001
From: vakrilov <alexander.vakrilov@telerik.com>
Date: Fri, 25 Oct 2019 11:05:58 +0300
Subject: [PATCH 08/13] feat: ship pre-parsed JSON files for all CSS

---
 scripts/builder.js | 149 ++++++++++++++++++++++++++++-----------------
 1 file changed, 92 insertions(+), 57 deletions(-)

diff --git a/scripts/builder.js b/scripts/builder.js
index d25fddc..350cbb5 100644
--- a/scripts/builder.js
+++ b/scripts/builder.js
@@ -10,6 +10,7 @@ const sass = require("sass");
 const glob = require("glob");
 const pjs = require("../package.json");
 const babel = require("@babel/core");
+const parse = require("@nativescript/core/css").parse;
 
 // Kill The original folder, so that way it is a clean folder
 if (fs.existsSync("nativescript-theme-core")) {
@@ -18,39 +19,48 @@ if (fs.existsSync("nativescript-theme-core")) {
 fs.mkdirSync("nativescript-theme-core");
 fs.mkdirSync("nativescript-theme-core/css");
 fs.mkdirSync("nativescript-theme-core/scss");
+fs.mkdirSync("nativescript-theme-core/json");
 
 const version = getVersion();
 const versionPlaceholder = "__VERSION__";
 console.log(`Building the Deployment files for v${version}...`);
 
-// Create CSS from SCSS
-createCSSFromSCSS();
+async function createThemeFiles() {
 
-// Copy the SCSS file to the build folder
-copySCSS();
+    // Create CSS from SCSS
+    await createCSSFromSCSS();
 
-// Copy any Fonts
-//copyFonts();
+    // Create JSON from CSS
+    createJSONFromCSS();
 
-createPackageJson();
+    // Copy the SCSS file to the build folder
+    copySCSS();
 
-// Transform imports to commonjs
-const transform = babel.transform(fs.readFileSync("./src/index.js"), {
-    plugins: ["@babel/transform-modules-commonjs"]
-});
+    // Copy any Fonts
+    //copyFonts();
 
-fs.writeFile("./nativescript-theme-core/index.js", transform.code, {}, () => { });
+    createPackageJson();
 
-// Copy typings
-copyFile("./src/index.d.ts", "./nativescript-theme-core/index.d.ts");
+    // Transform imports to commonjs
+    const transform = babel.transform(fs.readFileSync("./src/index.js"), {
+        plugins: ["@babel/transform-modules-commonjs"]
+    });
+
+    fs.writeFile("./nativescript-theme-core/index.js", transform.code, {}, () => { });
+
+    // Copy typings
+    copyFile("./src/index.d.ts", "./nativescript-theme-core/index.d.ts");
 
-// Copy our Readme
-copyFile("./README.md", "./nativescript-theme-core/README.md");
-copyFile("./CHANGELOG.md", "./nativescript-theme-core/CHANGELOG.md");
-copyFile("./LICENSE", "./nativescript-theme-core/LICENSE");
+    // Copy our Readme
+    copyFile("./README.md", "./nativescript-theme-core/README.md");
+    copyFile("./CHANGELOG.md", "./nativescript-theme-core/CHANGELOG.md");
+    copyFile("./LICENSE", "./nativescript-theme-core/LICENSE");
 
-console.log("Change to the 'nativescript-theme-core' folder and you can now do your `npm publish`");
-// TODO: We could Automatically run "npm publish"
+    console.log("Change to the 'nativescript-theme-core' folder and you can now do your `npm publish`");
+    // TODO: We could Automatically run "npm publish"
+}
+
+createThemeFiles();
 
 /**
  * Create package.json from the original one
@@ -161,7 +171,7 @@ function copySCSS() {
 /**
  * Create all the CSS from SCSS files
  */
-function createCSSFromSCSS() {
+async function createCSSFromSCSS() {
 
     const sassFilesPath = "./src/**/*.scss";
     const sassImportPaths = [
@@ -175,14 +185,35 @@ function createCSSFromSCSS() {
         return filename.indexOf("_") !== 0 && filename.indexOf("app.") !== 0 && filename.indexOf("customized.") !== 0 && filename.indexOf("bootstrap") !== 0 && filename.indexOf("kendo") !== 0;
     });
 
+    return Promise.all(sassFiles.map(sassFile => parseSass(sassFile, sassImportPaths)));
+}
 
-    for (let i = 0; i < sassFiles.length; i++) {
-        // We only process open /core. files
-        // if (sassFiles[i].indexOf("/core.") === -1) {
-        //     continue;
-        // }
-        parseSass(sassFiles[i], sassImportPaths);
-    }
+/**
+ * Create all the JSON from CSS files
+ */
+function createJSONFromCSS() {
+    const cssFilesPath = "./nativescript-theme-core/css/**/*.css";
+    const cssFiles = glob.sync(cssFilesPath)
+
+    const registerModules = [];
+    registerModules.push(`require("@nativescript/core/globals/core");`)
+
+    cssFiles.forEach(cssFilePath =>{
+        const cssFileContent = fs.readFileSync(cssFilePath, { encoding: "utf8" });
+        const cssFileName = cssFilePath.substring(cssFilePath.lastIndexOf("/"));
+        const jsonFileName = cssFileName.replace(".css", ".json");
+        const jsonFilePath = `nativescript-theme-core/json${jsonFileName}`;
+
+        const ast = parse(cssFileContent, undefined);
+        const jsonContent = JSON.stringify(ast, (k, v) => k === "position" ? undefined : v);
+        fs.writeFileSync(jsonFilePath, jsonContent, "utf8");
+
+
+        registerModules.push(`global.registerModule("@nativescript/theme/css${cssFileName}", () => { return require("@nativescript/theme/json${jsonFileName}")});`);
+    });
+
+    const registerJsonJsContent = registerModules.join("\n");
+    fs.writeFileSync("nativescript-theme-core/register-json.js", registerJsonJsContent, "utf8");
 }
 
 /**
@@ -191,35 +222,39 @@ function createCSSFromSCSS() {
  * @param importPaths - Other import paths
  */
 function parseSass(sassFile, importPaths) {
-    const sassFileContent = fs.readFileSync(sassFile, { encoding: "utf8" });
-    const offset = sassFile.lastIndexOf("/");
-    const outputFile = `nativescript-theme-core/css${sassFile.substring(offset)}`;
-    const cssFilePath = outputFile.replace(".scss", ".css");
-
-    // const output = sass.renderSync({
-    sass.render({
-        data: sassFileContent,
-        includePaths: importPaths,
-        outFile: cssFilePath,
-        outputStyle: "compressed"
-    }, (error, result) => {
-        if (error) {
-            console.log(error.status);
-            console.log(error.column);
-            console.log(error.message);
-            console.log(error.line);
-        } else {
-            let css = result.css.toString();
-            // correct version tag
-            css = printVersion(css);
-            // uncomment to debug builds
-            // console.log(css);
-            fs.writeFileSync(cssFilePath, css, "utf8");
-
-            // if build stats are ever desired
-            // console.log(result.stats);
-        }
-    });
+    return new Promise((resolve, reject) => {
+        const sassFileContent = fs.readFileSync(sassFile, { encoding: "utf8" });
+        const offset = sassFile.lastIndexOf("/");
+        const outputFile = `nativescript-theme-core/css${sassFile.substring(offset)}`;
+        const cssFilePath = outputFile.replace(".scss", ".css");
+
+        // const output = sass.renderSync({
+        sass.render({
+            data: sassFileContent,
+            includePaths: importPaths,
+            outFile: cssFilePath,
+            outputStyle: "compressed"
+        }, (error, result) => {
+            if (error) {
+                console.log(error.status);
+                console.log(error.column);
+                console.log(error.message);
+                console.log(error.line);
+                reject(error);
+            } else {
+                let css = result.css.toString();
+                // correct version tag
+                css = printVersion(css);
+                // uncomment to debug builds
+                // console.log(css);
+                fs.writeFileSync(cssFilePath, css, "utf8");
+
+                // if build stats are ever desired
+                // console.log(result.stats);
+                resolve();
+            }
+        });
+    })
 }
 
 // ----------------------------------------------------------------------

From c4ae085e2ba62d1456b7038f86e07afc33d46867 Mon Sep 17 00:00:00 2001
From: vakrilov <alexander.vakrilov@telerik.com>
Date: Fri, 25 Oct 2019 11:12:36 +0300
Subject: [PATCH 09/13] style: fix eslint errors

---
 scripts/builder.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/scripts/builder.js b/scripts/builder.js
index 350cbb5..47cacd2 100644
--- a/scripts/builder.js
+++ b/scripts/builder.js
@@ -185,7 +185,7 @@ async function createCSSFromSCSS() {
         return filename.indexOf("_") !== 0 && filename.indexOf("app.") !== 0 && filename.indexOf("customized.") !== 0 && filename.indexOf("bootstrap") !== 0 && filename.indexOf("kendo") !== 0;
     });
 
-    return Promise.all(sassFiles.map(sassFile => parseSass(sassFile, sassImportPaths)));
+    return Promise.all(sassFiles.map((sassFile) => parseSass(sassFile, sassImportPaths)));
 }
 
 /**
@@ -193,19 +193,19 @@ async function createCSSFromSCSS() {
  */
 function createJSONFromCSS() {
     const cssFilesPath = "./nativescript-theme-core/css/**/*.css";
-    const cssFiles = glob.sync(cssFilesPath)
+    const cssFiles = glob.sync(cssFilesPath);
 
     const registerModules = [];
-    registerModules.push(`require("@nativescript/core/globals/core");`)
+    registerModules.push("require(\"@nativescript/core/globals/core\");");
 
-    cssFiles.forEach(cssFilePath =>{
+    cssFiles.forEach((cssFilePath) => {
         const cssFileContent = fs.readFileSync(cssFilePath, { encoding: "utf8" });
         const cssFileName = cssFilePath.substring(cssFilePath.lastIndexOf("/"));
         const jsonFileName = cssFileName.replace(".css", ".json");
         const jsonFilePath = `nativescript-theme-core/json${jsonFileName}`;
 
         const ast = parse(cssFileContent, undefined);
-        const jsonContent = JSON.stringify(ast, (k, v) => k === "position" ? undefined : v);
+        const jsonContent = JSON.stringify(ast, (k, v) => (k === "position" ? undefined : v));
         fs.writeFileSync(jsonFilePath, jsonContent, "utf8");
 
 
@@ -254,7 +254,7 @@ function parseSass(sassFile, importPaths) {
                 resolve();
             }
         });
-    })
+    });
 }
 
 // ----------------------------------------------------------------------

From a4e2719e4bf0ca3f82a1f341682da596803b1b8e Mon Sep 17 00:00:00 2001
From: "Bundyo (Kamen Bundev)" <bundyo@gmail.com>
Date: Fri, 25 Oct 2019 15:00:12 +0300
Subject: [PATCH 10/13] fix: make the dark complementary color closer to the
 light one (#201)

---
 src/scss/core/colors/_dark.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/scss/core/colors/_dark.scss b/src/scss/core/colors/_dark.scss
index 96aa02b..c379302 100644
--- a/src/scss/core/colors/_dark.scss
+++ b/src/scss/core/colors/_dark.scss
@@ -60,7 +60,7 @@ $dark-colors: map-merge($dark-colors, (
     background-alt-20: lighten(dark(background), 20%),
     disabled: mix(dark(accent), dark(background), 40%),
 
-    complementary: if($complementary-dark != transparent, $complementary-dark, mix(dark(complementary), dark(background), 50%)),
+    complementary: if($complementary-dark != transparent, $complementary-dark, mix(dark(complementary), $black, 90%)),
 
     text-color: dark(primary),
     headings-color: dark(primary),

From 65cb2df5623e0208233963f3dc6fbf7e5dcf5c97 Mon Sep 17 00:00:00 2001
From: Manol Donev <manoldonev@users.noreply.github.com>
Date: Mon, 28 Oct 2019 17:25:50 +0200
Subject: [PATCH 11/13] chore: update dependencies (#203)

---
 package.json | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index b5b8b93..306cc7f 100644
--- a/package.json
+++ b/package.json
@@ -14,14 +14,14 @@
   "nativescript": {
     "id": "org.nativescript.theme",
     "tns-ios": {
-      "version": "6.1.1"
+      "version": "6.2.0-rc-2019-10-21-153440-02"
     },
     "tns-android": {
-      "version": "6.1.2"
+      "version": "6.2.0-rc-2019-10-23-094316-01"
     }
   },
   "dependencies": {
-    "@nativescript/core": "6.2.0-rc-2019-10-24-132340-02",
+    "@nativescript/core": "rc",
     "@nativescript/theme": "./src",
     "bootstrap": "4.3.1",
     "nativescript-picker": "2.1.2",
@@ -31,7 +31,7 @@
     "nativescript-ui-sidedrawer": "7.0.3",
     "nativescript-ui-dataform": "5.1.1",
     "nativescript-ui-listview": "7.1.0",
-    "tns-core-modules": "6.2.0-rc-2019-10-24-132340-02"
+    "tns-core-modules": "rc"
   },
   "devDependencies": {
     "@babel/core": "7.6.4",
@@ -41,7 +41,7 @@
     "eslint": "6.4.0",
     "glob": "7.1.4",
     "lazy": "1.0.11",
-    "nativescript-dev-webpack": "1.3.0-rc-2019-10-23-205429-04",
+    "nativescript-dev-webpack": "rc",
     "resolve-url-loader": "3.1.0",
     "sass": "1.23.0",
     "sass-lint": "1.13.1",

From cf3a87d90feb107a4d1dd19c683a249264772a3a Mon Sep 17 00:00:00 2001
From: "Bundyo (Kamen Bundev)" <bundyo@gmail.com>
Date: Tue, 29 Oct 2019 15:20:35 +0200
Subject: [PATCH 12/13] Make HtmlView white in dark mode, as its internal
 colors are currently not dependent on mode (#205)

Fix PickerField modal in dark mode
Fix SegmentedBar selection colors (it doesn't support changing the color in selected state)
Update CHANGELOG
Update README
Up the version
---
 CHANGELOG.md                              | 23 +++++++++++++++
 README.md                                 | 11 +++----
 app/pages/tabs.js                         |  2 +-
 app/pages/tabs.xml                        |  2 +-
 package-lock.json                         | 36 +++++++++++------------
 package.json                              |  2 +-
 src/package.json                          |  2 +-
 src/scss/mixins/components/_controls.scss |  3 +-
 src/scss/mixins/components/_forms.scss    |  6 ++++
 9 files changed, 58 insertions(+), 29 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index eca85b6..b7732e2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,26 @@
+<a name="2.2.0"></a>
+## [2.2.0](https://github.com/NativeScript/theme/compare/v2.1.2...v2.2.0) (2019-10-29)
+
+### Breaking changes
+
+* Separate default core styling again to reduce the core CSS with 20k (breaking)
+
+### Features
+
+* Ship pre-parsed JSON files for all CSS (used with css2json-loader)
+* Return $accent input variable, use $focus as internal abstraction
+* Rename $ab-background and $ab-color to respectively $complementary and $complementary-color, keep backwards compatibility
+* Introduce $...-dark input colors to be able to override the main dark mode colors specifically 
+
+### Fixes
+
+* Stop importing view-common in app, use view instead
+* Add more padding to action items
+* Make the dark complementary color closer to the light one
+* Make HtmlView white in dark mode, as its internal colors are currently not dependent on mode
+* Fix PickerField modal in dark mode
+* Fix SegmentedBar selection colors (it doesn't support changing the color in selected state)
+
 <a name="2.1.2"></a>
 ## [2.1.2](https://github.com/NativeScript/theme/compare/v2.1.1...v2.1.2) (2019-10-16)
 
diff --git a/README.md b/README.md
index a15c047..cf59011 100644
--- a/README.md
+++ b/README.md
@@ -35,21 +35,22 @@ It does still work with node-sass though.
 ## Usage
 
 The core theme supports light and dark core styling and skins on top of that. To load the core theme styling, just
-load the core CSS (the default skin was added in 2.0.18):
+load the core CSS and its default skin:
 
 ```css
- @import "~@nativescript/theme/css/core.css";
+@import "~@nativescript/theme/css/core.css";
+@import "~@nativescript/theme/css/default.css";
 ```
 
 or alternatively SCSS:
 
 ```scss
 @import "~@nativescript/theme/core";
+@import "~@nativescript/theme/default";
 ```
 
-If you want, you can choose from several different skins. To do that, you can include a second CSS/SCC file just after
-you load the core CSS/SCSS (if you use Theme 2.017 or earlier, you will have to include both files for the styling
-to work.
+If you want, you can choose from several different skins. To do that, you can change the second CSS/SCSS file to the
+preferred skin name:
 
 ```css
 @import "~@nativescript/theme/css/core.css";
diff --git a/app/pages/tabs.js b/app/pages/tabs.js
index fb60e5d..42ea933 100644
--- a/app/pages/tabs.js
+++ b/app/pages/tabs.js
@@ -4,7 +4,7 @@ export class TabsModel extends BaseModel {
     constructor() {
         super();
 
-        this.tab1 = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget libero sed diam congue tristique. Nullam convallis dapibus nunc, et maximus lectus scelerisque quis. Ut ut urna tellus. Vivamus pharetra venenatis urna, vel interdum turpis vestibulum quis. Duis varius feugiat elit, vel ultricies quam ullamcorper non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id risus tellus.Vestibulum consectetur leo nec sapien gravida, ut tincidunt turpis laoreet. Nulla quis nisi nec lectus mattis luctus a sit amet elit. Aliquam nec ipsum vitae ex luctus elementum ut ut nisi. Integer vehicula dignissim scelerisque. Nullam ut felis et orci semper tincidunt efficitur in ante. Praesent rutrum bibendum arcu, id porttitor odio ultrices nec. Pellentesque nulla nibh, mattis sit amet magna sit amet, ultrices vestibulum velit. Sed at ante ipsum. Nullam justo nisl, volutpat in lobortis id, eleifend eu justo. Nunc dui metus, faucibus gravida viverra et, varius in nisi. Mauris vitae accumsan odio.";
+        this.tab1 = "<p>Lorem ipsum dolor sit amet, <b>consectetur adipiscing elit</b>. Fusce eget libero sed diam congue tristique.</p> <p>Nullam convallis dapibus nunc, et maximus lectus scelerisque quis. Ut ut urna tellus. Vivamus pharetra venenatis urna, vel interdum turpis vestibulum quis. Duis varius feugiat elit, vel ultricies quam ullamcorper non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id risus tellus.Vestibulum consectetur leo nec sapien gravida, ut tincidunt turpis laoreet. Nulla quis nisi nec lectus mattis luctus a sit amet elit. Aliquam nec ipsum vitae ex luctus elementum ut ut nisi. Integer vehicula dignissim scelerisque. Nullam ut felis et orci semper tincidunt efficitur in ante. Praesent rutrum bibendum arcu, id porttitor odio ultrices nec. Pellentesque nulla nibh, mattis sit amet magna sit amet, ultrices vestibulum velit. Sed at ante ipsum. Nullam justo nisl, volutpat in lobortis id, eleifend eu justo. Nunc dui metus, faucibus gravida viverra et, varius in nisi. Mauris vitae accumsan odio.</p>";
         this.tab2 = "Vestibulum consectetur leo nec sapien gravida, ut tincidunt turpis laoreet. Nulla quis nisi nec lectus mattis luctus a sit amet elit. Aliquam nec ipsum vitae ex luctus elementum ut ut nisi. Integer vehicula dignissim scelerisque. Nullam ut felis et orci semper tincidunt efficitur in ante. Praesent rutrum bibendum arcu, id porttitor odio ultrices nec. Pellentesque nulla nibh, mattis sit amet magna sit amet, ultrices vestibulum velit. Sed at ante ipsum. Nullam justo nisl, volutpat in lobortis id, eleifend eu justo. Nunc dui metus, faucibus gravida viverra et, varius in nisi. Mauris vitae accumsan odio.Nulla facilisi. Morbi sed mauris at nisl sagittis gravida. Aliquam tincidunt magna arcu, et posuere nibh porttitor molestie. Nam laoreet semper purus sed ornare. Aliquam erat volutpat. Vestibulum vulputate rhoncus sem ut euismod. Pellentesque condimentum dignissim ligula, eget viverra nulla luctus non. Praesent orci dui, malesuada non sollicitudin molestie, varius eget sem. Sed aliquet malesuada nunc sed suscipit. Phasellus egestas lectus sed enim pellentesque, vitae interdum est eleifend. Nulla commodo ligula eget libero suscipit imperdiet. Suspendisse ornare erat sit amet fermentum volutpat. Cras sollicitudin eget libero et bibendum. Mauris mattis feugiat ante, sit amet pharetra ante ullamcorper id.";
         this.tab3 = "Phasellus at nunc consectetur, maximus diam nec, tristique neque. Ut volutpat facilisis ex, vel mollis tortor rutrum nec. Aenean tempus risus eu velit tincidunt, at viverra magna finibus. Mauris in eleifend ante. Donec varius vestibulum urna nec aliquam. In id erat lacus. Vestibulum viverra odio orci. Cras tortor elit, sagittis ac facilisis id, ultricies id ex. Donec malesuada metus vel dolor pharetra imperdiet. Integer quis orci laoreet eros elementum pellentesque. Mauris ornare dignissim mauris in vehicula. Fusce in malesuada dui. Sed tristique sollicitudin fringilla.";
 
diff --git a/app/pages/tabs.xml b/app/pages/tabs.xml
index c2ad232..98ebbdc 100644
--- a/app/pages/tabs.xml
+++ b/app/pages/tabs.xml
@@ -9,7 +9,7 @@
         </TabStrip>
 
         <TabContentItem>
-            <TextView text="{{ tab1 }}" class="p-20" editable="false"/>
+            <HtmlView html="{{ tab1 }}" class="p-20" />
         </TabContentItem>
 
         <TabContentItem>
diff --git a/package-lock.json b/package-lock.json
index 9c22d7e..d1818f6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/theme",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -421,14 +421,14 @@
       }
     },
     "@nativescript/core": {
-      "version": "6.2.0-rc-2019-10-24-132340-02",
-      "resolved": "https://registry.npmjs.org/@nativescript/core/-/core-6.2.0-rc-2019-10-24-132340-02.tgz",
-      "integrity": "sha512-3ilaXY2hvCkGnXRFoNT0iqm9PulXK9VeutKAVjmUzfl/AwSei7RMgjUdEMgS0Rf2dSpH2GhAO/LurCmZSWK5XA==",
+      "version": "6.2.0-rc-2019-10-28-141128-01",
+      "resolved": "https://registry.npmjs.org/@nativescript/core/-/core-6.2.0-rc-2019-10-28-141128-01.tgz",
+      "integrity": "sha512-JuXEpDaMpUEpSM8c7ZYe4RY5aHt3kLk4oYCJg2J7u7XAjrcsSGa7ZHucRM91h4MjcRhOAuYr9UPMQXaNtjxFtA==",
       "requires": {
         "nativescript-hook": "0.2.5",
         "reduce-css-calc": "^2.1.6",
         "semver": "6.3.0",
-        "tns-core-modules-widgets": "6.2.0-rc-2019-10-24-132340-02",
+        "tns-core-modules-widgets": "6.2.0-rc-2019-10-28-141128-01",
         "tslib": "1.10.0"
       },
       "dependencies": {
@@ -4903,9 +4903,9 @@
       "integrity": "sha512-vCKwFX3u4Sty3fnlCO4pim0jcya4PPlYE7WxmVYODOQXzTswhiZ4GUwIkEJQgffUzGWe1dToTZG0RV48qBgi/A=="
     },
     "nativescript-dev-webpack": {
-      "version": "1.3.0-rc-2019-10-23-205429-04",
-      "resolved": "https://registry.npmjs.org/nativescript-dev-webpack/-/nativescript-dev-webpack-1.3.0-rc-2019-10-23-205429-04.tgz",
-      "integrity": "sha512-IiNLPE4ZYp1qwCImrySlUaev9U27AMZmlcOBeYUd7onn0kXKKjmVQk43EgC/lI8S+2l1wmNtAKrH9b8TT9BaTA==",
+      "version": "1.3.0-rc-2019-10-25-214000-02",
+      "resolved": "https://registry.npmjs.org/nativescript-dev-webpack/-/nativescript-dev-webpack-1.3.0-rc-2019-10-25-214000-02.tgz",
+      "integrity": "sha512-OxoeMjKxZVUTYbcPii4wE+Ed4nN7iYCdFvC3CbeoQOTepOZr3XwIqgKZxqjcdHGa4JUyOzXpytGl4x03BSob8Q==",
       "dev": true,
       "requires": {
         "@angular-devkit/core": "8.2.0",
@@ -5751,9 +5751,9 @@
       "dev": true
     },
     "postcss": {
-      "version": "7.0.18",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.18.tgz",
-      "integrity": "sha512-/7g1QXXgegpF+9GJj4iN7ChGF40sYuGYJ8WZu8DZWnmhQ/G36hfdk3q9LBJmoK+lZ+yzZ5KYpOoxq7LF1BxE8g==",
+      "version": "7.0.21",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.21.tgz",
+      "integrity": "sha512-uIFtJElxJo29QC753JzhidoAhvp/e/Exezkdhfmt8AymWT6/5B7W1WmponYWkHk2eg6sONyTch0A3nkMPun3SQ==",
       "dev": true,
       "requires": {
         "chalk": "^2.4.2",
@@ -7695,17 +7695,17 @@
       }
     },
     "tns-core-modules": {
-      "version": "6.2.0-rc-2019-10-24-132340-02",
-      "resolved": "https://registry.npmjs.org/tns-core-modules/-/tns-core-modules-6.2.0-rc-2019-10-24-132340-02.tgz",
-      "integrity": "sha512-te6GRyH0xsjQrRmDfqwTf5dIgZOz3LccIeWcb78TQSesJvRxf3+YsjTFRli3TvEHlA8C/G5xpFfNFYRrR1TuXA==",
+      "version": "6.2.0-rc-2019-10-28-141128-01",
+      "resolved": "https://registry.npmjs.org/tns-core-modules/-/tns-core-modules-6.2.0-rc-2019-10-28-141128-01.tgz",
+      "integrity": "sha512-k2h+rnglDUQfKPUqrWQb0r02/v0OWabthXTUE7BLwEreKoSKHzJ5vigEo0P7TY+xElxiinLMy79OlOFogX2N7A==",
       "requires": {
-        "@nativescript/core": "6.2.0-rc-2019-10-24-132340-02"
+        "@nativescript/core": "6.2.0-rc-2019-10-28-141128-01"
       }
     },
     "tns-core-modules-widgets": {
-      "version": "6.2.0-rc-2019-10-24-132340-02",
-      "resolved": "https://registry.npmjs.org/tns-core-modules-widgets/-/tns-core-modules-widgets-6.2.0-rc-2019-10-24-132340-02.tgz",
-      "integrity": "sha512-HoYV1/DBEldftJSw2GTRpUw7C06a5AMrVZCkJalMEbCkLvgURC98Rta4SvSINgtDyK6LkRnyZYzHG402q/2xqw=="
+      "version": "6.2.0-rc-2019-10-28-141128-01",
+      "resolved": "https://registry.npmjs.org/tns-core-modules-widgets/-/tns-core-modules-widgets-6.2.0-rc-2019-10-28-141128-01.tgz",
+      "integrity": "sha512-XUUdWtwRv8Gm6c6+/m5ln+TF3rUEwmq1AINXUEA1vyqjTSrK+o+0aYOjVHRV1HMlFOoMcXk9z4Dd4yp0ZPxhsQ=="
     },
     "to-arraybuffer": {
       "version": "1.0.1",
diff --git a/package.json b/package.json
index 306cc7f..ccb032a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/theme",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "description": "Telerik NativeScript Core Theme",
   "author": "Telerik <support@telerik.com>",
   "homepage": "https://www.nativescript.org",
diff --git a/src/package.json b/src/package.json
index cfe14cc..fa5c0a7 100644
--- a/src/package.json
+++ b/src/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/theme",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "description": "Telerik NativeScript Core Theme",
   "author": "Telerik <support@telerik.com>",
   "main": "index",
diff --git a/src/scss/mixins/components/_controls.scss b/src/scss/mixins/components/_controls.scss
index ddc2cd9..c482523 100644
--- a/src/scss/mixins/components/_controls.scss
+++ b/src/scss/mixins/components/_controls.scss
@@ -102,12 +102,11 @@
         @include colorize(
             $color: primary,
             $background-color: background,
-            $selected-background-color: accent
+            $contrasted-selected-background-color: accent background -20%
         );
 
         .ns-ios & {
             margin: 0 15;
-            @include colorize($color: accent);
         }
     }
 }
diff --git a/src/scss/mixins/components/_forms.scss b/src/scss/mixins/components/_forms.scss
index 2ccf7d7..4c35eef 100644
--- a/src/scss/mixins/components/_forms.scss
+++ b/src/scss/mixins/components/_forms.scss
@@ -244,6 +244,7 @@
             background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKgAAAAwBAMAAAB3UCypAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAtUExURUdwTP///////////////////////////////////////////////////////81e3QIAAAAOdFJOUwBAYODAECDQUHDwsKCAaxMi1gAAAZxJREFUSMfll89Kw0AQxmPa1EppMQ9QCHgPIngtPkEpeJecPfkEoWdB8O5dPHr1JYrePLY2NZfyPYMxYbNkk51sshuo+F2yh5lfZv/NzFpWKgDCwID+BNSZo6RoQTgMnkIgfgsoaB8VupLb22FmEnsEdFIF/ZYzZ8xm61HQRWlNsZHOPVms6MN1p7/fgIBaDaD3wEW64M4Z8GIGaidMNk6oHgkVT5gM6mOfHwxnhS8T0GEhuCTspQHobTE2H88GoPMsUOZiI9KH2tgXXVayrWoA7eGy6HKN8wY3aiPZe68ItWX73wAabsXJzWJd6IDFxaE+As01PcFOdLnBoyZ0xDIid+njVRPaw7voMpZsvzp0glPRZYi1eejRwUMzHTB02QaaWa8l0GN2pLjGuNOEjsrtgMrhp6H5NeVSuaY0dFBOdCoJhYbmqY9LnvqUob5YPYgkrQxl5SQXUU6Uoazw5VIqfDVQVqL5T1RKdB20VTNRB23V9tRBO2nQumklGzW9ytC0Pf903Ye69rxCO82HRCdPnk4eZ5bjlhRY/0Q/Hn4/DfXSncYAAAAASUVORK5CYII=');
         }
 
+        PickerField,
         DatePickerField,
         TimePickerField,
         DateTimePickerFields,
@@ -361,6 +362,11 @@
         }
     }
 
+    HtmlView {
+        color: light(primary);
+        background: light(background);
+    }
+
     PropertyEditor:focus DataFormEditorCore {
         @include colorize($contrasted-border-color: accent background 20%);
     }

From 56e7d09ad3d5ae45052baa56a896a53946877901 Mon Sep 17 00:00:00 2001
From: Manol Donev <manoldonev@users.noreply.github.com>
Date: Tue, 29 Oct 2019 15:24:34 +0200
Subject: [PATCH 13/13] chore: unify issue templates (#206)

---
 .github/ISSUE_TEMPLATE/bug_report.md      | 29 ++++++++++++++++++
 .github/ISSUE_TEMPLATE/feature_request.md | 17 +++++++++++
 .github/PULL_REQUEST_TEMPLATE.md          | 37 +++++++++++++++++++++++
 3 files changed, 83 insertions(+)
 create mode 100644 .github/ISSUE_TEMPLATE/bug_report.md
 create mode 100644 .github/ISSUE_TEMPLATE/feature_request.md
 create mode 100644 .github/PULL_REQUEST_TEMPLATE.md

diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
new file mode 100644
index 0000000..5ef9b1b
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,29 @@
+---
+name: Bug report
+about: 'We really appreciate your effort to provide feedback. Before opening a new
+  issue, please make sure that this case is not already reported in GitHub as an
+  issue or in StackOverflow as a question.'
+
+---
+
+**Environment**
+Provide version numbers for the following components (information can be retrieved by running `tns info` in your project folder or by inspecting the `package.json` of the project):
+ - CLI: 
+ - Cross-platform modules:
+ - Android Runtime:
+ - iOS Runtime:
+ - Plugin(s):
+
+**Describe the bug**
+<!-- A clear and concise description of what the bug is. Please, explain whether it's a build time error or a runtime error. More detailed logs can be easily obtained by following the instructions in this guide: https://docs.nativescript.org/get-support#how-to-obtain-diagnostic-reports. -->
+
+**To Reproduce**
+<!-- Add commands used or steps taken to reproduce the behaviour. -->
+
+**Expected behavior**
+
+**Sample project**
+<!-- If possible, provide a link from the [Playground](https://play.nativescript.org) with reproduction of the problem. If not, consider attaching a sample project or link to a repository with such project. -->
+
+**Additional context**
+<!-- Add any other context about the problem here. -->
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
new file mode 100644
index 0000000..3970909
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -0,0 +1,17 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+<!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]. --> 
+
+**Describe the solution you'd like**
+<!-- A clear and concise description of what you want to happen. -->
+
+**Describe alternatives you've considered**
+<!-- A clear and concise description of any alternative solutions or features you've considered. -->
+
+**Additional context**
+<!-- Add any other context or screenshots about the feature request here. -->
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 0000000..b382cc4
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,37 @@
+<!--
+We, the rest of the NativeScript community, thank you for your
+contribution! 
+To help the rest of the community review your change, please follow the instructions in the template.
+-->
+
+<!-- PULL REQUEST TEMPLATE -->
+<!-- (Update "[ ]" to "[x]" to check a box) -->
+
+## PR Checklist
+
+- [ ] The PR title follows our guidelines: https://github.com/NativeScript/NativeScript/blob/master/CONTRIBUTING.md#commit-messages.
+- [ ] There is an issue for the bug/feature this PR is for. To avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it.
+- [ ] You have signed the [CLA](http://www.nativescript.org/cla).
+- [ ] All existing tests are passing: https://github.com/NativeScript/NativeScript/blob/master/DevelopmentWorkflow.md#running-unit-tests.
+- [ ] Tests for the changes are included - https://github.com/NativeScript/NativeScript/blob/master/WritingUnitTests.md.
+
+## What is the current behavior?
+<!-- Please describe the current behavior that you are modifying, or link to a relevant issue. -->
+
+## What is the new behavior?
+<!-- Describe the changes. -->
+
+Fixes/Implements/Closes #[Issue Number].
+
+<!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. -->
+
+<!-- 
+BREAKING CHANGES:
+
+
+[Describe the impact of the changes here.]
+
+Migration steps:
+[Provide a migration path for existing applications.]
+-->
+