Skip to content

Commit 620906f

Browse files
bundyobundyo
committed
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
1 parent a7f6202 commit 620906f

30 files changed

+246
-206
lines changed

‎README.md‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -220,13 +220,13 @@ A list of the supported CSS variables follows:
220220
| --color-black | --const-font-size | --light-primary | --dark-primary |
221221
| --color-white | --const-background-alt-10 | --light-background | --dark-background |
222222
| --color-grey | --const-btn-color-secondary | --light-accent | --dark-accent |
223-
| --color-grey-light | --const-btn-color-disabled | --light-ab-color | --dark-background-alt-5 |
224-
| --color-charcoal | --const-btn-font-size | --light-ab-background | --dark-background-alt-10 |
225-
| --color-transparent | --const-btn-min-width | --light-background-alt-5 | --dark-background-alt-20 |
226-
| --color-aqua | --const-btn-height | --light-background-alt-10 | --dark-secondary |
227-
| --color-blue | --const-btn-padding-x | --light-background-alt-20 | --dark-disabled |
228-
| --color-brown | --const-btn-padding-y | --light-secondary | --dark-ab-color |
229-
| --color-forest | --const-btn-margin-x | --light-disabled | --dark-ab-background |
223+
| --color-grey-light | --const-btn-color-disabled | --light-complementary-color | --dark-complementary-color |
224+
| --color-charcoal | --const-btn-font-size | --light-complementary | --dark-complementary |
225+
| --color-transparent | --const-btn-min-width | --light-background-alt-5 | --dark-background-alt-5 |
226+
| --color-aqua | --const-btn-height | --light-background-alt-10 | --dark-background-alt-10 |
227+
| --color-blue | --const-btn-padding-x | --light-background-alt-20 | --dark-background-alt-20 |
228+
| --color-brown | --const-btn-padding-y | --light-secondary | --dark-secondary |
229+
| --color-forest | --const-btn-margin-x | --light-disabled | --dark-disabled |
230230
| --color-grey-dark | --const-btn-margin-y | --light-text-color | --dark-text-color |
231231
| --color-purple | --const-btn-radius | --light-headings-color | --dark-headings-color |
232232
| --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:
239239
| | --const-icon-font-size | --light-item-active-color | --dark-item-active-color |
240240
| | --const-icon-font-size-lg | --light-item-active-background | --dark-item-active-background |
241241
| | | --light-btn-color | --dark-btn-color |
242-
| | | --light-ab-background-dark | --dark-ab-background-dark |
243242
| | | --light-item-active-icon-color | --dark-item-active-icon-color |
244243
| | | --light-btn-color-inverse | --dark-btn-color-inverse |
245244
| | | --light-btn-color-secondary | --dark-btn-color-secondary |

‎app-compat/bootstrap-based.compat.scss‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,17 @@
77

88
$compat: true;
99

10-
@import '~@nativescript/theme/scss/variables';
11-
1210
// Variables form bootstrap v4 dependency
1311
@import '~bootstrap/scss/functions', '~bootstrap/scss/variables';
1412

15-
// Import bootstrap map to apply variable mapping
16-
@import '~@nativescript/theme/scss/bootstrap/map';
13+
// Map NS theme variables to variables from the bootstrap v4 theme
14+
15+
$background: theme-color("light");
16+
$background-dark: theme-color("dark");
17+
18+
$accent: theme-color("primary");
19+
$complementary: theme-color("secondary");
20+
$error: theme-color("danger");
1721

1822
// Import theme
1923
@import '~@nativescript/theme/index';

‎app-compat/customized.compat.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@ $compat: true;
1313
@import '~@nativescript/theme/scss/variables';
1414

1515
// Colors
16-
$focus: #09A52e;
16+
$accent: #09A52e;
1717
$error: #F74E2F;
1818

19-
$ab-background: #F74E2F;
19+
$complementary: #F74E2F;
2020

2121
// Skin
2222
$background: #F0EED2;

‎app/bootstrap-based.scss‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,17 @@
55
* Licensed under Apache 2.0 (https://github.com/NativeScript/theme/blob/master/LICENSE)
66
*/
77

8-
@import '~@nativescript/theme/scss/variables';
9-
108
// Variables form bootstrap v4 dependency
119
@import '~bootstrap/scss/functions', '~bootstrap/scss/variables';
1210

13-
// Import bootstrap map to apply variable mapping
14-
@import '~@nativescript/theme/scss/bootstrap/map';
11+
// Map NS theme variables to variables from the bootstrap v4 theme
12+
13+
$background: theme-color("light");
14+
$background-dark: theme-color("dark");
15+
16+
$accent: theme-color("primary");
17+
$complementary: theme-color("secondary");
18+
$error: theme-color("danger");
1519

1620
// Import theme
1721
@import '~@nativescript/theme/index';

‎app/customized.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@
1111
@import '~@nativescript/theme/scss/variables';
1212

1313
// Colors
14-
$focus: #09A52e;
14+
$accent: #09A52e;
1515
$error: #F74E2F;
1616

17-
$ab-background: #F74E2F;
17+
$complementary: #F74E2F;
1818

1919
// Skin
2020
$background: #F0EED2;

‎app/navigation-vm.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { topmost } from "tns-core-modules/ui/frame";
1+
import { Frame } from "tns-core-modules/ui/frame";
22
import { BaseModel } from "./pages/base";
33
import * as application from "tns-core-modules/application";
44
import { ObservableArray } from "tns-core-modules/data/observable-array";
@@ -95,7 +95,7 @@ export class NavigationViewModel extends BaseModel {
9595
return this.openModal();
9696
}
9797

98-
topmost().navigate({
98+
Frame.topmost().navigate({
9999
moduleName: `pages/${page.toLowerCase()}`,
100100
transition: {
101101
name: "slide"
@@ -115,7 +115,7 @@ export class NavigationViewModel extends BaseModel {
115115
moduleName: `pages/${pageName}`,
116116
clearHistory: true
117117
};
118-
topmost().navigate(navigationEntry);
118+
Frame.topmost().navigate(navigationEntry);
119119

120120
this.bindingContext.selectedPage = pageName;
121121
}

‎app/pages/base.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Observable } from "tns-core-modules/data/observable";
2-
import { topmost } from "tns-core-modules/ui/frame";
2+
import { Frame } from "tns-core-modules/ui/frame";
33
import * as app from "tns-core-modules/application";
44

55
export class BaseModel extends Observable {
@@ -8,7 +8,7 @@ export class BaseModel extends Observable {
88
super();
99
// Initialize default values.
1010
this.page = page;
11-
this.topFrame = topmost();
11+
this.topFrame = Frame.topmost();
1212
this.sideDrawer = app.getRootView();
1313
this.title = page && page.actionBarTitle;
1414
}

‎app/pages/login-form.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { BaseModel } from "./base";
2-
import { topmost } from "tns-core-modules/ui/frame";
2+
import { Frame } from "tns-core-modules/ui/frame";
33

44
export class LoginModel extends BaseModel {}
55

@@ -8,7 +8,7 @@ export function navigatingTo({ object: page }) {
88
}
99

1010
export function goBack() {
11-
topmost().navigate({
11+
Frame.topmost().navigate({
1212
moduleName: "pages/login-landing",
1313
clearHistory: true,
1414
transition: {

‎app/pages/login-landing.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { BaseModel } from "./base";
2-
import { topmost } from "tns-core-modules/ui/frame";
2+
import { Frame } from "tns-core-modules/ui/frame";
33

44
export class LandingModel extends BaseModel {}
55

@@ -8,7 +8,7 @@ export function navigatingTo({ object: page }) {
88
}
99

1010
export function signIn() {
11-
topmost().navigate({
11+
Frame.topmost().navigate({
1212
moduleName: "pages/login-form",
1313
transition: {
1414
name: "slide"
@@ -17,7 +17,7 @@ export function signIn() {
1717
}
1818

1919
export function goBack() {
20-
topmost().navigate({
20+
Frame.topmost().navigate({
2121
moduleName: "pages/root",
2222
clearHistory: true,
2323
transition: {

0 commit comments

Comments
 (0)