Overview

NativeScript theme revamp effort for easier css styling and better compatibility / compliance with Kinvey Studio.

Design

Tasks

NativeScript 6.1

• Make sure Travis CI builds pass
• Merge next branch in master for better visibility
• Incorporate Add CSS classes to root views to target platform/device/orientation/modals NativeScript#7313 instead of custom solution implemented in the theme codebase.
• Make sure compat styles are working and up to date.
• Add export of CSS variables, now that feat: implement css-variables and css-calc NativeScript#7553 is merged.
• Provide documentation for NativeScript Theme 2.0
  • 1.x to 2.x migration guide.
  • TBD articles

NativeScript 6.2

• Transform nativescript-theme-core to a scoped @nativescript/theme package: feat: scoped package #189
• Migrate {N} templates to use NativeScript Theme 2.0
  • @MartoYankov blank
  • @MartoYankov hello world
  • @MartoYankov drawer navigation
  • @MartoYankov tab navigation
  • @vchimev master/detail
  • @manoldonev temporarily hardcode light mode for health survey & patient care
  • @bundyo issues: feat: add theme v2 to drawer navigation templates nativescript-app-templates#89
• @bundyo ability to import Theme variables from css (like scss scenario described in https://github.com/NativeScript/theme#usage)
• @bundyo divider colors (hr divider color is too dark/strong for light theme, while hr-light divider does not seem to apply)
• @bundyo do not set default font-weight in ns-root (src/scss/core/primitives/_index.scss)
• @bundyo remove implicit fa class (move it to compat?)
• @bundyo Move Button default padding to core theme (padding: 0 5;)

• @NickIliev Migrate the JavaScript SDK examples app (generates snippets for docs > UI widgets)
• Migrate the Angular SDK examples app (generates the Angular snippets for docs > UI widgets)
• @vchimev check templates compatibility with tns preview
• @bundyo write a migration guide

NativeScript vNext

• Migrate NativeScript Playground to use the latest version of the theme
  • migrate templates
  • migrate tutorials
  • compatibility export for core light and core dark
  • refer to a migration guide when only a skin is referenced; list of skins from the migration guide
  • known issue for referencing the theme in an Angular project
• Migrate Marketplace samples
• Migrate {N} templates to use NativeScript Theme 2.0
  • health survey
  • patient care
• Use CSS variables for colors, after feat(css): Add HSL/HSLA support NativeScript#7730 gets merged to allow color changes on the fly.
• Fix [Bug] 2.0 - Using Tag/Element name caused unsettable properties. #157 - will add PR later.
• Component authors style guide and best practices.

Ongoing tasks

• Style the remaining nativescript-ui components, when they become styleable.
  • nativescript-ui-dataform
  • nativescript-ui-autocomplete
  • nativescript-ui-chart
  • nativescript-ui-calendar
  • nativescript-ui-gauge

Contributing

If you want to work on a task from the list, tell us and we will do our best to help you!
If you have another great idea on how to make the tab view even cooler, share it in the comments!

Discussion

Please, don't report problems here. Instead, open a new issue and link it to this one.
Let's use this discussion for suggestions and improvement ideas. We would love to hear from you!