fix: accents, separate default core styling (#199)

bundyo · manoldonev · commit 950f396d22a6 · 2019-10-25T11:00:31.000+03:00
diff --git 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
@@ -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
@@ -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
@@ -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
diff --git 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
@@ -1 +1,2 @@
 @import './scss/core/index';
+@import './scss/index';
diff --git a/src/default.compat.scss 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -38,15 +38,15 @@
 
 // Contextual colors and backgrounds http://v4-alpha.getbootstrap.com/components/utilities/#contextual-colors-and-backgrounds
 .text-primary {
-  color: $accent;
+  color: light(accent);
 }
 
 .text-danger {
   color: const(error);
 }
 
 .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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`	`1`	`@import './scss/core/index';`
	`2`	`+@import './scss/index';`