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

@@ -1619,6 +1619,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/bootstrap/styles/_default-buttons.scss

@@ -98,22 +98,9 @@
   }
 }
 
-@function btn-hover-color($bg, $percentage: 14%) {
-  @return tint(nb-theme($bg), $percentage);
-}
-
-@function btn-focus-color($bg, $percentage: 14%) {
-  @return tint(nb-theme($bg), $percentage);
-}
-
-@function btn-active-color($bg, $percentage: 14%) {
-  @return shade(nb-theme($bg), $percentage);
-}
-
 @mixin btn-outline-focus($focus) {
   &:focus,
   &.focus {
-    color: nb-theme(btn-outline-focus-fg);
     border-color: $focus;
     box-shadow: none;
   }
@@ -151,90 +138,87 @@
 
 // Focus
 @mixin btn-primary-focus() {
-  @include btn-focus(btn-focus-color(btn-primary-bg));
+  @include btn-focus(nb-theme(btn-primary-hover-bg));
 }
 
 @mixin btn-success-focus() {
-  @include btn-focus(btn-focus-color(btn-success-bg));
+  @include btn-focus(nb-theme(btn-success-hover-bg));
 }
 
 @mixin btn-warning-focus() {
-  @include btn-focus(btn-focus-color(btn-warning-bg));
+  @include btn-focus(nb-theme(btn-warning-hover-bg));
 }
 
 @mixin btn-info-focus() {
-  @include btn-focus(btn-focus-color(btn-info-bg));
+  @include btn-focus(nb-theme(btn-info-hover-bg));
 }
 
 @mixin btn-danger-focus() {
-  @include btn-focus(btn-focus-color(btn-danger-bg));
+  @include btn-focus(nb-theme(btn-danger-hover-bg));
 }
 
 @mixin btn-secondary-focus() {
-  @include btn-outline-focus(btn-focus-color(btn-secondary-border, 20%));
+  @include btn-outline-focus(nb-theme(btn-secondary-hover-bg));
 }
 
-
 // Hover
 @mixin btn-primary-hover() {
-  @include btn-hover(btn-hover-color(btn-primary-bg));
+  @include btn-hover(nb-theme(btn-primary-hover-bg));
 }
 
 @mixin btn-success-hover() {
-  @include btn-hover(btn-hover-color(btn-success-bg));
+  @include btn-hover(nb-theme(btn-success-hover-bg));
 }
 
 @mixin btn-warning-hover() {
-  @include btn-hover(btn-hover-color(btn-warning-bg));
+  @include btn-hover(nb-theme(btn-warning-hover-bg));
 }
 
 @mixin btn-info-hover() {
-  @include btn-hover(btn-hover-color(btn-info-bg));
+  @include btn-hover(nb-theme(btn-info-hover-bg));
 }
 
 @mixin btn-danger-hover() {
-  @include btn-hover(btn-hover-color(btn-danger-bg));
+  @include btn-hover(nb-theme(btn-danger-hover-bg));
 }
 
 @mixin btn-secondary-hover() {
-  @include btn-hover(btn-hover-color(btn-secondary-border));
+  @include btn-hover(nb-theme(btn-secondary-hover-bg));
 }
 
-
 // Active
 @mixin btn-primary-active() {
-  @include btn-active(btn-active-color(btn-primary-bg));
+  @include btn-active(nb-theme(btn-primary-active-bg));
 }
 
 @mixin btn-success-active() {
-  @include btn-active(btn-active-color(btn-success-bg));
+  @include btn-active(nb-theme(btn-success-active-bg));
 }
 
 @mixin btn-warning-active() {
-  @include btn-active(btn-active-color(btn-warning-bg));
+  @include btn-active(nb-theme(btn-warning-active-bg));
 }
 
 @mixin btn-info-active() {
-  @include btn-active(btn-active-color(btn-info-bg));
+  @include btn-active(nb-theme(btn-info-active-bg));
 }
 
 @mixin btn-danger-active() {
-  @include btn-active(btn-active-color(btn-danger-bg));
+  @include btn-active(nb-theme(btn-danger-active-bg));
 }
 
 @mixin btn-secondary-active() {
-  @include btn-active(btn-active-color(btn-secondary-border));
+  @include btn-active(nb-theme(btn-secondary-active-bg));
 }
 
-
 // Disabled
 @mixin btn-disabled() {
   &:disabled, &.btn-disabled {
     opacity: nb-theme(btn-disabled-opacity);
+    cursor: default;
   }
 }
 
-
 @mixin btn-secondary-border() {
   border: 2px solid nb-theme(btn-secondary-border);
 }

src/framework/bootstrap/styles/_forms.scss

@@ -160,7 +160,7 @@
     }
 
     &:hover {
-      @include label(lighten(nb-theme(checkbox-checked-border-color), 10%), 1);
+      @include label(nb-theme(checkbox-checked-border-color), 1);
     }
 
     &:disabled {
@@ -216,7 +216,7 @@
     }
 
     &:hover {
-      @include label(lighten(nb-theme(checkbox-checked-border-color), 10%), 1);
+      @include label(nb-theme(checkbox-checked-border-color), 1);
     }
 
     &:disabled {