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**
+
+
+**To Reproduce**
+
+
+**Expected behavior**
+
+**Sample project**
+
+
+**Additional context**
+
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.**
+
+
+**Describe the solution you'd like**
+
+
+**Describe alternatives you've considered**
+
+
+**Additional context**
+
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 @@
+
+
+
+
+
+## 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?
+
+
+## What is the new behavior?
+
+
+Fixes/Implements/Closes #[Issue Number].
+
+
+
+
+
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/CHANGELOG.md b/CHANGELOG.md
index eca85b6..b7732e2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,26 @@
+
+## [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)
+
## [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 44671fd..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";
@@ -220,13 +221,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 +240,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/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/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..b557f8e 100644
--- a/app-compat/customized.compat.scss
+++ b/app-compat/customized.compat.scss
@@ -13,14 +13,13 @@ $compat: true;
@import '~@nativescript/theme/scss/variables';
// Colors
-$focus: #09A52e;
+$accent: #09A52e;
$error: #F74E2F;
-$ab-background: #F74E2F;
+$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/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..24d19b9 100644
--- a/app/customized.scss
+++ b/app/customized.scss
@@ -11,14 +11,13 @@
@import '~@nativescript/theme/scss/variables';
// Colors
-$focus: #09A52e;
+$accent: #09A52e;
$error: #F74E2F;
-$ab-background: #F74E2F;
+$complementary: #F74E2F;
// Skin
$background: #F0EED2;
-$text-color: $primary;
// Buttons
$btn-color: $focus;
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/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 = "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.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 @@
-
+
diff --git a/package-lock.json b/package-lock.json
index f5bf19f..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": {
@@ -420,6 +420,41 @@
}
}
},
+ "@nativescript/core": {
+ "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-28-141128-01",
+ "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-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",
"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",
@@ -5754,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",
@@ -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-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": {
- "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-28-141128-01"
}
},
"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-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",
@@ -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..ccb032a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@nativescript/theme",
- "version": "2.1.2",
+ "version": "2.2.0",
"description": "Telerik NativeScript Core Theme",
"author": "Telerik ",
"homepage": "https://www.nativescript.org",
@@ -14,13 +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": "rc",
"@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": "rc"
},
"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": "rc",
"resolve-url-loader": "3.1.0",
"sass": "1.23.0",
"sass-lint": "1.13.1",
diff --git a/scripts/builder.js b/scripts/builder.js
index d25fddc..47cacd2 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,34 +222,38 @@ 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();
+ }
+ });
});
}
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/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()}`)
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 ",
"main": "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/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/_controls.scss b/src/scss/core/_controls.scss
index 50cbab2..5c225d2 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')
@@ -74,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')
);
@@ -106,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/_dark.scss b/src/scss/core/colors/_dark.scss
index bc47a81..c379302 100644
--- a/src/scss/core/colors/_dark.scss
+++ b/src/scss/core/colors/_dark.scss
@@ -1,58 +1,66 @@
// Core dark colors
$dark-colors: (
- primary: $white,
- background: $charcoal,
- accent: $focus,
- border-color: $focus,
+ primary: $primary-dark,
+ background: $background-dark,
+ secondary: $secondary-dark,
- btn-color: $white
+ 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%)
);
@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%),
- 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), $black, 90%)),
text-color: dark(primary),
headings-color: dark(primary),
@@ -71,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/_index.scss b/src/scss/core/colors/_index.scss
index 9550d1e..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: (
@@ -11,7 +28,7 @@ $colors: (
// Accents
aqua: #00caab,
- blue: #3d5afe,
+ blue: #3a53ff,
brown: #795548,
forest: #006968,
grey-dark: #5c687c,
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/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/_action-bar.scss b/src/scss/mixins/components/_action-bar.scss
index f50c6f5..130394a 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 10 12 0;
margin: 0;
min-width: 0;
width: auto;
@@ -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/_controls.scss b/src/scss/mixins/components/_controls.scss
index 4944725..c482523 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(
@@ -96,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 288b5d3..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,
@@ -313,7 +314,6 @@
}
@if not $compat {
- & > NTIcon,
& > .nt-icon {
font-size: const(icon-font-size-lg);
vertical-align: center;
@@ -362,6 +362,11 @@
}
}
+ HtmlView {
+ color: light(primary);
+ background: light(background);
+ }
+
PropertyEditor:focus DataFormEditorCore {
@include colorize($contrasted-border-color: accent background 20%);
}
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 a7e1648..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;
@@ -114,10 +113,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 +125,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 4395148..bed5d19 100644
--- a/src/scss/variables/_blue.scss
+++ b/src/scss/variables/_blue.scss
@@ -5,14 +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);
-
-// Buttons
-$btn-color-inverse: const(white);
+$accent: const(sky);
@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/_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/_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..be9e98d 100644
--- a/src/scss/variables/_grey.scss
+++ b/src/scss/variables/_grey.scss
@@ -5,16 +5,16 @@
* 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);
-$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 92985d3..eb13c57 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;
@@ -51,29 +51,33 @@ $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;
$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('primary-palette-name')) {
- $focus: $primary-palette-name;
+@if (global_variable_exists('ab-color')) {
+ $complementary-color: $ab-color;
}
@if (global_variable_exists('secondary-palette-name')) {
@@ -104,14 +108,12 @@ $material-colors: () !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
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
}));
}