Make HtmlView white in dark mode, as its internal colors are currently not dependent on mode (#205)

bundyo · manoldonev · commit cf3a87d90feb · 2019-10-29T15:20:35.000+02:00
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
diff --git 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
@@ -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
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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%);
     }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@nativescript/theme",`
`3`		`- "version": "2.1.3",`
	`3`	`+ "version": "2.2.0",`
`4`	`4`	`"description": "Telerik NativeScript Core Theme",`
`5`	`5`	`"author": "Telerik <support@telerik.com>",`
`6`	`6`	`"homepage": "https://www.nativescript.org",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@nativescript/theme",`
`3`		`- "version": "2.1.2",`
	`3`	`+ "version": "2.2.0",`
`4`	`4`	`"description": "Telerik NativeScript Core Theme",`
`5`	`5`	`"author": "Telerik <support@telerik.com>",`
`6`	`6`	`"main": "index",`
Original file line number	Diff line number	Diff line change
`@@ -102,12 +102,11 @@`
`102`	`102`	`@include colorize(`
`103`	`103`	`$color: primary,`
`104`	`104`	`$background-color: background,`
`105`		`- $selected-background-color: accent`
	`105`	`+ $contrasted-selected-background-color: accent background -20%`
`106`	`106`	`);`
`107`	`107`
`108`	`108`	`.ns-ios & {`
`109`	`109`	`margin: 0 15;`
`110`		`- @include colorize($color: accent);`
`111`	`110`	`}`
`112`	`111`	`}`
`113`	`112`	`}`
Original file line number	Diff line number	Diff line change
`@@ -244,6 +244,7 @@`
`244`	`244`	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKgAAAAwBAMAAAB3UCypAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAtUExURUdwTP///////////////////////////////////////////////////////81e3QIAAAAOdFJOUwBAYODAECDQUHDwsKCAaxMi1gAAAZxJREFUSMfll89Kw0AQxmPa1EppMQ9QCHgPIngtPkEpeJecPfkEoWdB8O5dPHr1JYrePLY2NZfyPYMxYbNkk51sshuo+F2yh5lfZv/NzFpWKgDCwID+BNSZo6RoQTgMnkIgfgsoaB8VupLb22FmEnsEdFIF/ZYzZ8xm61HQRWlNsZHOPVms6MN1p7/fgIBaDaD3wEW64M4Z8GIGaidMNk6oHgkVT5gM6mOfHwxnhS8T0GEhuCTspQHobTE2H88GoPMsUOZiI9KH2tgXXVayrWoA7eGy6HKN8wY3aiPZe68ItWX73wAabsXJzWJd6IDFxaE+As01PcFOdLnBoyZ0xDIid+njVRPaw7voMpZsvzp0glPRZYi1eejRwUMzHTB02QaaWa8l0GN2pLjGuNOEjsrtgMrhp6H5NeVSuaY0dFBOdCoJhYbmqY9LnvqUob5YPYgkrQxl5SQXUU6Uoazw5VIqfDVQVqL5T1RKdB20VTNRB23V9tRBO2nQumklGzW9ytC0Pf903Ye69rxCO82HRCdPnk4eZ5bjlhRY/0Q/Hn4/DfXSncYAAAAASUVORK5CYII=');
`245`	`245`	`}`
`246`	`246`
	`247`	`+ PickerField,`
`247`	`248`	`DatePickerField,`
`248`	`249`	`TimePickerField,`
`249`	`250`	`DateTimePickerFields,`
`@@ -361,6 +362,11 @@`
`361`	`362`	`}`
`362`	`363`	`}`
`363`	`364`
	`365`	`+ HtmlView {`
	`366`	`+ color: light(primary);`
	`367`	`+ background: light(background);`
	`368`	`+ }`
	`369`	`+`
`364`	`370`	`PropertyEditor:focus DataFormEditorCore {`
`365`	`371`	`@include colorize($contrasted-border-color: accent background 20%);`
`366`	`372`	`}`