mixin nb-for-theme() does not work when customPropertiesMode is enabled

[alexander-balan-akveo]

Issue type

I'm submitting a ... (check one with "x")

• bug report
• feature request

Issue description

Current behavior:
mixin nb-for-theme() does not apply rules putted in when $nb-enable-css-custom-properties: true

Expected behavior:
mixin nb-for-theme() should work for both modes (css-props/scss-vars)

Steps to reproduce:

• make sure that $nb-enable-css-custom-properties: true
• use nb-for-theme() properly by passing one of registered theme name as $name argument and put some rules into body of the mixin to be applied just for this theme
• include the code described above into body of nb-install() to apply it within theme installation process

Related code:

nb-for-theme() relies on theming-variables.$nb-theme-name to understand when exactly need to apply rules

@mixin nb-for-theme($name) {
  @if (theming-variables.$nb-theme-name == $name) {
    @content;
  }
}

---

Lets start step-by-step:

my root file where installation process runs

@include nb-install() {
// ...some rules
  @include nb-for-theme(fancy-theme-name) {
    // ..some rules
  }
// ...some rules
}

includes nb-install-global-with-css-props() or nb-install-global-with-scss-vars() by theming-variables.$nb-enable-css-custom-properties

@mixin nb-install() {
  @if (theming-variables.$nb-enable-css-custom-properties) {
    @include nb-install-global-with-css-props() {
      @content;
    }
  } @else {
    @include nb-install-global-with-scss-vars() {
      @content;
    }
  }
}

1. $nb-enable-css-custom-properties: false (scss-vars)

creates specific host .nb-theme-#{$theme-name} for each registered theme and puts rules under it.

@mixin nb-install-global-with-scss-vars() {
  @each $theme-name in register.nb-get-enabled-themes() {
    @include nb-pre-process-context($theme-name);

    .nb-theme-#{$theme-name} {
      @content;
    }
  }
}

sets process-context by including nb-pre-process-context($theme-name)
theming-variables.$nb-theme-name: $theme-name line is important because here context is setting and then reading in @if (theming-variables.$nb-theme-name == $name) within nb-for-theme() when my rules is projected into @content under .nb-theme-#{$theme-name} (step above)

@mixin nb-pre-process-context($theme-name) {
  theming-variables.$nb-theme-process-mode: 'pre-process';

  theming-variables.$nb-theme-name: $theme-name;
  theming-variables.$nb-processed-theme: get-value.nb-process-theme(register.nb-get-registered-theme($theme-name));
}

2. $nb-enable-css-custom-properties: true (css-props)

projects my rules into @content but process-context is not set (theming-variables.$nb-theme-name is empty) so when @if (theming-variables.$nb-theme-name == $name) checks within nb-for-theme() it gets '' and rules is not applied

@mixin nb-install-global-with-css-props() {
  @content;

  @if (theming-variables.$nb-global-styles-on-install) {
    @each $theme-name in register.nb-get-enabled-themes() {
      @include nb-install-css-properties($theme-name, register.nb-get-registered-theme($theme-name));
    }
  }
}