refactor(theme): remove use of scss functions (akveo#1256)

BREAKING CHANGES:
- calendar - use primary button in cosmic theme
- checkbox - `opacity` instead of `lightning`
- context-menu, popover, datepicker - `calc` instead of `round` and scss calculations
- input - `opacity` for placeholder instead of `lightning`
- tabs - remove gradient for tab bottom separator in cosmic theme
- toastr - use `background-color` instead of the gradient in cosmic theme
- text colors are now used from success/primary/warning/etc colors
- add color palette instead of generating colors using scss-functions, an example for `primary`
`color-primary-200`
`color-primary-300`
`color-primary-400`
`color-primary-600`
`color-primary-700`

`create-colors-palette()` scss function that can be used during the theme installation process to generate palette automatically

Closes akveo#1228

src/app/playground-components.ts

@@ -1677,6 +1677,17 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
       },
     ],
   },
+  {
+    path: 'typography',
+    children: [
+      {
+        path: 'typography-showcase.component',
+        link: '/typography/typography-showcase.component',
+        component: 'TypographyShowcaseComponent',
+        name: 'Typography Showcase',
+      },
+    ],
+  },
   {
     path: 'bootstrap',
     children: [

src/framework/theme/styles/_theming.scss

@@ -87,6 +87,35 @@ $nb-themes-export: () !global;
   @return $theme;
 }
 
+@function create-colors-palette($theme) {
+  $color-keys: (
+    color-primary: 20deg,
+    color-success:  20deg,
+    color-info: -10deg,
+    color-warning: 10deg,
+    color-danger: -20deg,
+  );
+
+  @each $key, $degree in $color-keys {
+    $color: map-get($theme, $key);
+
+    $color-300: tint($color, 14%);
+    $color-400: adjust-hue($color, $degree);
+    $color-200: tint($color-400, 14%);
+    $color-600: mix($color-400, $color);
+    $color-700: shade($color, 14%);
+    $color-800: shade($color-600, 14%);
+
+    $theme: map-set($theme, #{$key}-300, $color-300);
+    $theme: map-set($theme, #{$key}-200, $color-200);
+    $theme: map-set($theme, #{$key}-400, $color-400);
+    $theme: map-set($theme, #{$key}-600, $color-600);
+    $theme: map-set($theme, #{$key}-700, $color-700);
+    $theme: map-set($theme, #{$key}-600, $color-800);
+  }
+  @return $theme;
+}
+
 @function nb-register-theme($theme, $name, $default: null) {
 
   $theme-data: ();