nativescript-theme-core - npm Package Compare versions

Comparing version 2.0.15 to 2.0.17

CHANGELOG.md

@@ -0,1 +1,29 @@
+<a name="2.0.17 beta"></a>
+## [2.0.17 beta](https://github.com/NativeScript/theme/compare/v2.0.16...v2.0.17) (2019-09-06)
+
+### Features
+
+* Export all variable maps to CSS variables. Check the [README.md](README.md#css-variables) for a full list.
+* Revise font-sizes, make them the same for both platforms
+
+### Fixes
+
+* Fix the modal ActionBar with ns-statusbar-transparent
+* Fix the aqua skin colors
+* Revamp the Button animations to work in ActionBar
+* Return accent var in maps
+* Remove the ghost StackLayout padding in RadListView
+
+<a name="2.0.16 beta"></a>
+## [2.0.16 beta](https://github.com/NativeScript/theme/compare/v2.0.15...v2.0.16) (2019-09-04)
+
+### Features
+
+* Add .t-36 class
+
+### Fixes
+
+* Fix the dark DateTimePicker's missing icons
+* Fix a crash on orientation change
+
 <a name="2.0.15 beta"></a>
@@ -2,0 +30,0 @@ ## [2.0.15 beta](https://github.com/NativeScript/theme/compare/v2.0.14...v2.0.15) (2019-09-04)

index.js

@@ -124,3 +124,3 @@ "use strict";
 
-        viewCommon._rootModalViews.forEach(view => updateRootClasses(orientation, view, classList.list.concat("ns-modal")));
+        viewCommon._rootModalViews.forEach(view => updateRootClasses(orientation, view, classList.add("ns-modal").list));
     }
@@ -141,3 +141,3 @@ }
 
-                updateRootClasses(getOrientation(), desc.value, classList.list.concat("ns-modal"));
+                updateRootClasses(getOrientation(), desc.value, classList.add("ns-modal").list);
             }
@@ -144,0 +144,0 @@ }

package.json

 {
   "name": "nativescript-theme-core",
-  "version": "2.0.15",
+  "version": "2.0.17",
   "description": "Telerik NativeScript Core Theme",
@@ -5,0 +5,0 @@ "main": "index",

README.md

@@ -12,2 +12,3 @@ # NativeScript Theme: Core V2
 - [Helper Functions and Mixins](#helper-functions-and-mixins)
+- [CSS Variables](#css-variables)
 - [Kendo UI ThemeBuilder Support](#kendo-ui-themebuilder-support)
@@ -93,2 +94,27 @@ - [Theme Classes and Compatibility](#theme-classes-and-compatibility)
 
+Additionally there is another helper method - toggleMode, which can be used without parameters to just toggle the mode
+or with a boolean parameter to ensure light or dark mode is set:
+
+```javascript
+import Theme from "nativescript-theme-core";
+
+Theme.toggleMode(); // to toggle between the modes
+
+// or
+
+Theme.toggleMode(true);  // to ensure dark mode
+Theme.toggleMode(false); // to ensure light mode
+```
+
+##### A note of warning
+
+Due to limitation in Playground the JS Theme API cannot be imported like an ES6 module in a TS/Angular projects. You'll
+have to resort to requiring it:
+
+```javascript
+const Theme = require("nativescript-theme-core");
+
+Theme.setMode(Theme.Dark); // Or Theme.Light
+```
+
 ## More Root Classes
@@ -100,9 +126,22 @@
 Of course `.ns-portrait/.ns-landscape` get updated on orientation change, so you can use it to show a two pane layout 
-in landscape, for instance. The newest addition is `.ns-statusbar-transparent` since 2.0.4 - add this class to your root 
-element, if you have enabled transparent status bar in the OS and your ActionBar gets underneath it.   
+in landscape, for instance. 
 
+The newest addition is `.ns-statusbar-transparent` since 2.0.4 - add this class to your root element, if you have enabled 
+transparent status bar in the OS and your ActionBar gets underneath it. Keep in mind that **Android APIs before 21** don't
+support transparent status bars and this will result in an undesired top ActionBar padding.
+
 ## Helper Functions and Mixins
 
-There are several functions and mixins in the core theme, that can be used in your projects, as long as you're using SASS/SCSS.
+There are several functions and mixins in the core theme, that can be used in your projects, as long as you're using 
+SASS/SCSS.
 
+If you need to access specific theme variables like simple colors or sizes, do it through the `const` function:
+
+```scss
+Button {
+    background-color: const(forest);
+    height: const(btn-height);
+}
+``` 
+
 You can easily get light/dark colors:
@@ -139,2 +178,39 @@
 
+## CSS Variables
+
+Since 2.0.17 beta, the Theme now exports all its internal variables to CSS ones. This is also done for Kendo based skins.
+You can use them to inherit your styles from the Theme. A list of the supported CSS variables follows:
+
+| Simple Colors | Constants | Light Colors | Dark Colors |
+|---------|---------|---------|---------|
+| --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-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 |
+| --color-lime | --const-headings-font-weight | --light-accent-dark | --dark-accent-dark |
+| --color-orange | --const-border-width | --light-accent-light | --dark-accent-light |
+| --color-ruby | --const-border-radius | --light-accent-transparent | --dark-accent-transparent |
+| --color-sky | --const-border-radius-sm | --light-primary-accent | --dark-primary-accent |
+| --color-error | --const-border-radius-lg | --light-background-accent | --dark-background-accent |
+|  | --const-border-radius-rounded | --light-background-dark-accent | --dark-background-dark-accent |
+|  | --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 |
+|  | --const-disabled-opacity | --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 |
+
+For now these CSS variables are not used internally, so changing them won't change the look of your skin. This is planned 
+for after HSL color support comes in NativeScript 6.2. 
+
 ## Kendo UI ThemeBuilder Support
@@ -141,0 +217,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

442427

increased by6.33%

Number of package files

94

increased by1.08%

Number of lines in readme file

350

increased by27.74%

No dependency changes