feat(theme): css variables support (#1257)

Closes #46

src/app/playground-components.ts

@@ -1309,6 +1309,17 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
       },
     ],
   },
+  {
+    path: 'typography',
+    children: [
+      {
+        path: 'typography-showcase.component',
+        link: '/typography/typography-showcase.component',
+        component: 'TypographyShowcaseComponent',
+        name: 'Typography Showcase',
+      },
+    ],
+  },
   {
     path: 'context-menu',
     children: [
@@ -1625,17 +1636,6 @@ 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/_button-group.scss

@@ -6,61 +6,57 @@
 
 @import 'default-buttons';
 
-@mixin btn-group-separator($color) {
-  background-color: shade($color, 20%);
-}
-
 @mixin btn-group-primary-separator() {
-  @include btn-group-separator(nb-theme(color-primary));
+  @include nb-theme(color-primary-600);
 }
 
 @mixin btn-group-success-separator() {
-  @include btn-group-separator(nb-theme(color-success));
+  @include nb-theme(color-success-600);
 }
 
 @mixin btn-group-warning-separator() {
-  @include btn-group-separator(nb-theme(color-warning));
+  @include nb-theme(color-warning-600);
 }
 
 @mixin btn-group-info-separator() {
-  @include btn-group-separator(nb-theme(color-info));
+  @include nb-theme(color-info-600);
 }
 
 @mixin btn-group-danger-separator() {
-  @include btn-group-separator(nb-theme(color-danger));
+  @include nb-theme(color-danger-600);
 }
 
 @mixin btn-group-secondary-separator() {
-  @include btn-group-separator(nb-theme(color-primary));
+  @include nb-theme(color-primary-600);
 }
 
 
 @mixin dropdown-separator($color) {
-  border-left: 1px solid shade($color, 14%);
+  border-left: 1px solid $color;
 }
 
 @mixin dropdown-primary-separator() {
-  @include dropdown-separator(nb-theme(btn-primary-bg));
+  @include dropdown-separator(nb-theme(btn-primary-active-bg));
 }
 
 @mixin dropdown-success-separator() {
-  @include dropdown-separator(nb-theme(btn-success-bg));
+  @include dropdown-separator(nb-theme(btn-success-active-bg));
 }
 
 @mixin dropdown-warning-separator() {
-  @include dropdown-separator(nb-theme(btn-warning-bg));
+  @include dropdown-separator(nb-theme(btn-warning-active-bg));
 }
 
 @mixin dropdown-info-separator() {
-  @include dropdown-separator(nb-theme(btn-info-bg));
+  @include dropdown-separator(nb-theme(btn-info-active-bg));
 }
 
 @mixin dropdown-danger-separator() {
-  @include dropdown-separator(nb-theme(btn-danger-bg));
+  @include dropdown-separator(nb-theme(btn-danger-active-bg));
 }
 
 @mixin dropdown-secondary-separator() {
-  @include dropdown-separator(nb-theme(btn-secondary-bg));
+  @include dropdown-separator(nb-theme(btn-secondary-active-bg));
 }
 
 

src/framework/bootstrap/styles/_dropdowns.scss

@@ -34,13 +34,8 @@
   @include dropdown-menu-background(nb-theme(btn-secondary-border));
 }
 
-
-@function dropdown-divider($color) {
-  @return shade($color, 14%);
-}
-
 @mixin dropdown-menu-border($color) {
-  border-top: 1px solid dropdown-divider($color);
+  border-top: 1px solid $color;
 }
 
 @mixin dropdown-menu-primary-border() {
@@ -69,7 +64,7 @@
 
 
 @mixin dropdown-menu-divider($color) {
-  background-color: dropdown-divider($color);
+  background-color: $color;
 }
 
 @mixin dropdown-menu-primary-divider() {

src/framework/theme/styles/_theming.scss

@@ -14,7 +14,7 @@
 @import 'core/breaking-notice';
 
 $nb-enabled-themes: () !global;
-$nb-enable-css-variables: false !global;
+$nb-enable-css-custom-properties: false !global !default;
 
 $nb-themes: () !global;
 $nb-themes-non-processed: () !global;
@@ -29,17 +29,21 @@ $nb-themes-export: () !global;
     $tmp: map-get($theme, $value);
 
     @if ($tmp != null) {
-      @return nb-get-value($theme, $value, $tmp);
+      @if ($nb-enable-css-custom-properties) {
+        @return var(--#{$value});
+      } @else {
+        @return nb-get-value($theme, $value, $tmp);
+      }
     }
   }
 
   @return map-get($theme, $key);
 }
 
-@function convert-to-css-variables($variables) {
+@function convert-to-css-custom-properties($variables) {
   $result: ();
   @each $var, $value in $variables {
-    $result: map-set($result, $var, '--var(#{$var})');
+    $result: map-set($result, $var, unquote('var(--#{$var})'));
   }
 
   @return $result;
@@ -48,8 +52,8 @@ $nb-themes-export: () !global;
 @function set-global-theme-vars($theme, $theme-name) {
   $theme: $theme !global;
   $theme-name: $theme-name !global;
-  @if ($nb-enable-css-variables) {
-    $theme: convert-to-css-variables($theme) !global;
+  @if ($nb-enable-css-custom-properties) {
+    $theme: convert-to-css-custom-properties($theme) !global;
   }
   @return $theme;
 }
@@ -130,14 +134,19 @@ $nb-themes-export: () !global;
 @mixin install-css-variables($theme-name, $variables) {
   .nb-theme-#{$theme-name} {
     @each $var, $value in $variables {
-      --#{$var}: $value;
+      --#{$var}: #{$value};
     }
   }
 }
 
-// TODO: we hide :host inside of it which is not obvious
-@mixin nb-install-component() {
+@mixin nb-install-component-with-css-props() {
+  @warn '`nb-install-component` is unnecessary with css-variables. Deprecated and will be removed as of 5.0.0';
+  :host {
+    @content;
+  }
+}
 
+@mixin nb-install-component-with-scss-vars() {
   $themes-to-install: get-enabled-themes();
 
   @each $theme-name, $theme in $themes-to-install {
@@ -168,6 +177,23 @@ $nb-themes-export: () !global;
   }
 }
 
+// TODO: we hide :host inside of it which is not obvious
+@mixin nb-install-component() {
+
+  @if ($nb-enable-css-custom-properties) {
+
+    @include nb-install-component-with-css-props() {
+      @content;
+    }
+
+  } @else {
+
+    @include nb-install-component-with-scss-vars() {
+      @content;
+    }
+  }
+}
+
 @mixin nb-for-theme($name) {
   @if ($theme-name == $name) {
     @content;
@@ -200,14 +226,26 @@ $nb-themes-export: () !global;
 
 // TODO: another mixing for the almost same thing
 @mixin nb-install-root-component() {
-  @warn '`nb-install-root-component` is depricated, replace with `nb-install-component`, as `body` is root element now';
+  @warn '`nb-install-root-component` is deprecated, replace with `nb-install-component`, as `body` is root element now';
 
   @include nb-install-component() {
     @content;
   }
 }
 
-@mixin nb-install-global() {
+@mixin nb-install-global-with-css-props() {
+  $themes-to-install: get-enabled-themes();
+
+  $theme: map-get($themes-to-install, 'default');
+  $theme: set-global-theme-vars($theme, 'default');
+  @content;
+
+  @each $theme-name, $theme in $themes-to-install {
+    @include install-css-variables($theme-name, $theme);
+  }
+}
+
+@mixin nb-install-global-with-scss-vars() {
   $themes-to-install: get-enabled-themes();
 
   @each $theme-name, $theme in $themes-to-install {
@@ -219,3 +257,15 @@ $nb-themes-export: () !global;
 
   $temp: nb-breaking-notice-show($theme);
 }
+
+@mixin nb-install-global() {
+  @if ($nb-enable-css-custom-properties) {
+    @include nb-install-global-with-css-props() {
+      @content;
+    }
+  } @else {
+    @include nb-install-global-with-scss-vars() {
+      @content;
+    }
+  }
+}

src/playground/with-layout/typography/typography-showcase.component.html

@@ -1,4 +1,4 @@
-<nb-card size="xxlarge">
+<nb-card [size]="xxlarge">
   <nb-card-header>
     Font Colors
   </nb-card-header>