feat(theme): enable CSS custom properties mode by default

[yggg]

Please read and mark the following check list before creating a pull request:

• I read and followed the CONTRIBUTING.md guide.

Short description of what this resolves:

• Enable custom properties mode by default.
• Migrate to @use syntax.
• Add prebuilt themes with custom properties.

BREAKING CHANGE:
Custom properties mode is enabled by default.

@nebular/theme/styles/_components.scss file removed. Replace imports from this files with:

@import 'theming';
@import 'themes';

Removes layout-window-mode-max-width, tabset-tab-text-hide-breakpoint, route-tabset-tab-text-hide-breakpoint theme properties. Use $layout-window-mode-max-width, $tabset-tab-text-hide-breakpoint, $route-tabset-tab-text-hide-breakpoint variables instead.

[yggg]

Disable CSS Custom Properties mode

If you use prebuilt Nebular themes you could skip this section.

You could switch to the previous default theming mode by setting $nb-enable-css-custom-properties: false; in the file where you register custom themes (usually themes.scss). Notice, starting from the 13 version Angular removed the ability to use the node-sass package and always use Dart Sass to compile sass. Because of it, styles build time would increase greatly (30 - 40 seconds).

[yggg]

layout-window-mode-max-width, tabset-tab-text-hide-breakpoint, route-tabset-tab-text-hide-breakpoint theme properties migration

If you don't use these properties in your app you could skip this section.

We no longer can use theming properties for media query conditions as CSS custom properties aren't allowed there. Remove following properties from theme maps (the first parameter of nb-register-theme calls, usually located in the themes.scss file):

layout-window-mode-max-width
tabset-tab-text-hide-breakpoint
route-tabset-tab-text-hide-breakpoint

And set values used in the removed properties to the according variables:

$layout-window-mode-max-width
$tabset-tab-text-hide-breakpoint
$route-tabset-tab-text-hide-breakpoint

For example, if you used to change layout-window-mode-max-width value, your themes.scss file would look something like that:

@import '@nebular/theme/styles/theming';
@import '@nebular/theme/styles/themes/default';

$nb-themes: nb-register-theme((
  layout-window-mode-max-width: 1920px,
  // ... other theme properties
), default, default);

And you need to change it to:

@import '@nebular/theme/styles/theming';
@import '@nebular/theme/styles/themes/default';

$layout-window-mode-max-width: 1920px;

$nb-themes: nb-register-theme((
  // layout-window-mode-max-width property removed
  // ... other theme properties
), default, default);

Or if you use @use syntax instead of @import:

@use '@nebular/theme/styles/theming' as *;
@use '@nebular/theme/styles/themes/default' as *;

$layout-window-mode-max-width: 1920px;

$nb-themes: nb-register-theme((
  // layout-window-mode-max-width property removed
  // ... other theme properties
), default, default);