changelogs.md


nativescript/theme/tree/next

Repository  -  API  -  Source

2.3.4

December 5, 2020

Fixes

  • setMode should work correctly in all cases
  • Disables system theme so that NS themes can work properly...
  • Theme should work on NS 6 & 7 properly

2.3.3

March 17, 2020

Fixes

  • Fix wrong ActionBar colors, introduced with node-sass fix
  • Fix missing bootstrap bg-primary accented background-color

2.3.2

February 20, 2020

Fixes

  • CSS variables output with node-sass is causing crashes

2.3.1

January 13, 2020

Features

  • Add support for hard changing the mode in {N} 6.2+ (Theme.Light/Theme.Dark/Theme.Auto).
  • toggleMode now takes into account systemAppearance to decide the alternate mode (6.2+).

2.2.1

November 13, 2019

Features

  • Add default style for modal dialogs

2.2.0

October 29, 2019

Breaking changes

  • Separate default core styling again to reduce the core CSS with 20k

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)

2.1.2

October 16, 2019

Features

  • Make the Button color modifiers work as such (applies to primary and outline buttons)

Fixes

  • Fix the iOS landscape custom ActionBar items displacement
  • Fix the not properly distributed custom ActionBar title and iOS buttons
  • Update blue skin accent color (to blue:)
  • Make the outline button borders use accent color
  • Return the thumb/-thumb classes for Listview (Playground compatibility)
  • Fix app-compat to use scoped packages
  • Make the default Image height only 20pt
  • Increase the side drawer header padding
  • Add -circle class to complement -rounded/rounded
  • Fix the esm to cjs transpilation (was breaking Angular projects in Playground)

Potential breaking changes

  • Remove border-radius-rounded variable - use border-radius-sm instead (they had 1pt difference).

2.1.1

October 14, 2019

Features

  • Export CSS variables in Core CSS

Fixes

  • Fix divider colors
  • Add 5pt Button default padding
  • Remove default font-weight from .ns-root
  • Fix vertical SideDrawer header centering in iOS - remove height, use padding

Breaking changes

  • Remove default FontAwesome 4 rule as it doesn't belong in the theme. Leave it for compat mode.

2.1.0

October 11, 2019

Version 2.0.24 Beta was promoted to stable and was published as a scoped @nativescript/theme package.

2.0.24

October 10, 2019

Features

  • Add platform API classes in .ns-{platform}-{sdkVersion} format to the root element, which should allow targeting both platform and sdkVersion
  • Make .hr to depend on background color by default

Fixes

  • Fix SideDrawer styling to be more like in templates
  • Update Kendo skin colors to be more alike their web counterparts
  • Fix .ns-statusbar-transparent to not target or break API 19
  • Fix compat theme setting in app
  • Make sure app-compat to target compat theming with the variable

2.0.23

September 30, 2019

Fixes

  • Don't set default colors to labels, as it overrides dialog colors in iOS
  • Make the ActionBar colors defaults so they can be overridden

2.0.22

September 26, 2019

Fixes

  • Added a workaround for node-sass still not getting updated to 3.6.x - to be able to import variables as listed in the README
  • Fix large border-radius not applied in iOS, up the small to 4pt (to differ from Android defaults) (thanks @kulikala)
  • Remove the default Image margin - not needed and confusing
  • Sync app and app-compat, some housekeeping

2.0.21

September 21, 2019

Features

  • Add focus state support for the RadDataForm
  • Adjust RadAutoCompleteTextView paddings after its CSS fixes in 5.1.1

Fixes

  • Remove bold from ActionBar title to make it consistent across OSes
  • Fix .action-bar-title in compat
  • Fix the missing Roboto font in iOS - font now set to sans-serif normal
  • Fix RadAutoCompleteTextView clear button in iOS

2.0.20

September 13, 2019

Fixes

  • Fix a node-sass incompatibility

2.0.19

September 13, 2019

Features

  • Export CSS variables to .ns-modal too

2.0.18

September 12, 2019

Features

  • Apply a default skin over the Core theme, similar to core in 1.x
  • Add styling for custom ActionBar (GridLayout, Label and Buttons in the TitleView), check the example

Fixes

  • Fix some issues in the app
  • Move all colorization in the skins
  • Fix some issues in Slider, SearchBar, SegmentedBar
  • Fix the aqua accent

2.0.17

September 6, 2019

Features

  • Export all variable maps to CSS variables. Check the README.md 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

2.0.16

September 4, 2019

Features

  • Add .t-36 class

Fixes

  • Fix the dark DateTimePicker's missing icons
  • Fix a crash on orientation change

2.0.15

September 4, 2019

Fixes

  • Fix TextField borders
  • Compat fixes

2.0.14

September 3, 2019

Features

  • Add typings to make Angular projects in Playground happy

Fixes

  • Fix setMode resets the classes set manually on root

2.0.13

September 3, 2019

Fixes

  • Workaround the folder issue in Playground

2.0.12

September 3, 2019

Features

  • Add scss/variables folder with SCSS skin variables for easier import
  • Add variable map for generic variables, accessible with const()
  • Add toggleMode to the API with optional boolean state enforcer, used like this:
    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

Fixes

  • Fix dark mode for Switches and several other components
  • Fix ActionBar Label title background, fix dark buttons
  • Fix the colorize function to produce better organized code, to work with consts and to properly prepend .ns-dark on root classes

2.0.11

September 1, 2019

Features

  • Add JS transpilation to work in non-transpiling projects and Playground

Fixes

  • Fix setMode in Playground
  • Move bootstrap-based skin outside of theme-core to make the theme importable in Playground

2.0.10

September 1, 2019

Features

  • Revise the Button styling, now all buttons have elevation in Android

Fixes

  • Fix the missing root view crash
  • Only load root class modifier if no support in core modules
  • Fix the jumping iOS Switch
  • Fix the Switch styling

2.0.9

August 29, 2019

Features

  • Add small API for setMode. Usage:

    import Theme from "nativescript-theme-core";
    
    Theme.setMode(Theme.Dark); // Or Theme.Light
    

    It would set light or dark mode even before the app is initialized.

Fixes

  • Simplify ClassList, use Set
  • Fix dark mode for TabView, BottomNavigation and Tabs if they are root views

2.0.8

August 28, 2019

Fixes

  • Remove folder imports while the Playground has issues with them

2.0.7

August 28, 2019

Fixes

  • Fix headings
  • Fix the RadAutoCompleteTextView iOS TokenClearButton
  • Fix compat .btn styling, other compat fixes

2.0.6

August 22, 2019

Features

  • Add styling and demo for nativescript-ui-autocomplete

Maintenance

  • Fix the bootstrap links in the bootstrap-based theme (Playground compatibility)
  • Update dependencies

2.0.5

July 30, 2019

Maintenance

  • Remove PostCSS loader, as it doesn't do anything at this point
  • Fix the repo URL

2.0.4

July 30, 2019

Maintenance

  • All SASS imports are now from same folder qualifiers to allow working in a folder (e.g. in Playground)

2.0.0

July 17, 2019

Breaking Changes

  • The theme is now applied using Element selectors, for instance Button, Label, etc. This means it will style the app it is added to directly, without the need to add classes to every element. The old classes are moved to .compat CSS/SCSS. New namespaced classes are introduced to avoid clashes with user CSS.
  • The theme supports a core light or dark theme and skins on top of it - 2 files should be imported for it to work. A simple change of a class on root level controls if the core theme is light or dark. Skins can be changed on the fly, without changing the core theme. However special steps are needed with the new Webpack workflow.
  • Theme 2.0 beta requires some JavaScript to be loaded which helps with the styling. It should be included in core modules before the theme goes final.
  • Theme 2.0 replaces node-sass with dart-sass which is more up to date feature-wise and doesn't have a native dependency.

Features

  • Introduced several classes that are set on the root view and used to control light/dark theme and other platform features.
  • Several helper SASS functions and mixins are introduced to ease app/component styling
  • Theme is now compatible with Kendo UI ThemeBuilder, allowing for shared Web/Mobile themes
  • Added styling for the new Tabs and BottomNavigation.
  • Added styling for several nativescript-ui components that are CSS stylable - RadListView, RadDataForm.
  • Added styling for nativescript-picker and nativescript-datetimepicker components.

1.0.4

April 18, 2017

Maintenance

  • maintenance release

1.0.3

March 1, 2017

Bug Fixes

  • ListView: dark skin ListView background (79d5d8e)

1.0.2

December 6, 2016

Bug Fixes

  • 2.4.0 is minimum required version (b399a3d)
  • forms spacing when same controls are used in a vertical stack (ce9db89)

1.0.1

November 27, 2016

Bug Fixes

  • ActionBar: action-bar-title vertical-align centered for android, plus name migrate in platform (e7a96c3)

Features

  • Colors: add color classes for color/background-color with demo page (997b336)

1.0.0

November 23, 2016

Bug Fixes

  • add node-sass dep (453d8c0)
  • android button shadow/border, updated demo app to 2.4.0 (46369ba)
  • correct version in compiled css for published versions (d8ab630)
  • custom sass hook (69166e0)
  • dark skin for list view and custom actionbar (9ed6676)
  • demo styles no longer published with compiled css (4ab677d)
  • drawer for demo (#50) (346fef8)
  • gitignore (53ec861)
  • listview (109baea)
  • postinstall (19bdd3f)
  • print correct version on publish (571a41b)
  • switch disabled on (65df221)
  • tabs setup (a8d4f20)
  • text fixes (6c956b5)
  • theme page (6cbc4ad)
  • theme skins now apply properly (4979153)
  • ActionBar: action-bar-title (4e5eb2c)
  • js: Append theme sheet to app.css (#102) (15b9695)
  • ListView: item padding/margin fixes (b382028)

Features

  • ci: Set up travis build (#103) (64fbf30)
  • build support for distribution (#61) (1397438)
  • Organization: renaming and organization of theme files per discussion (08552a9)
  • forms and demo app improvements (#51) (e6eda4d)
  • Page: page level classes (cc625d8)
  • Skins: ActionBar skins with theme'd sets (#108) (3e7b2b8)
  • Skins: theme aware classes, also fixes to button styles for android (8580319)
  • actionbar improvements. modal to test out action-bar class on custom setup. also fixed errors with demo. (525200b)
  • base color variables, label classes, and beginning actionbar (063ac15)
  • multiples of 4 spacing utility classes, also heading variables (7c27856)
  • pages for forms, sliders, switches (3840497)
  • pages for other components (999fc9b)
  • platform specific base (ff13779)
  • text utility classes (d5b4b37)

BREAKING CHANGES

  • ActionBar: action-title > action-bar-title

    Before:

    <Label class=“action-title”></Label>
    

    After:

    <Label class=“action-bar-title”></Label>