Theme-Skin

pedrojrivera commented 6 years ago

That worked great for creating classes based on the skin!

Next question: How would I go about generating scss variables based on the skin now?

@import "~ng-uikit-pro-standard/assets/scss/core/colors";
@import "~ng-uikit-pro-standard/assets/scss/core/variables";
@import "~ng-uikit-pro-standard/assets/scss/pro/variables";
@import "~ng-uikit-pro-standard/assets/scss/core/mixins";
@import "~ng-uikit-pro-standard/assets/scss/pro/skins";


@each $skin, $data in $skins {
  .#{$skin}-skin {

    $skinPrimary: map-get($data, skin-btn-primary) !important;
    $skinSecondary: map-get($data, skin-btn-primary) !important;

    .skin-primary {
      background-color: map-get($data, skin-btn-primary) !important;
    }
    .skin-secondary {
      background-color: map-get($data, skin-btn-secondary) !important;
    }
    .testingtesting {
      background-color: map-get($data, skin-btn-default) !important;
    }


  }
}

This is what I am passing into the skins loops. I'm not sure if this in generating the variables or not as you can't really see variables after render. All I get is undefined errors when trying to use these variables despite importing the whole MDB library in the file where the variable is being called.

Arkadiusz Idzikowski staff commented 6 years ago

Could you provide more information about the errors?

pedrojrivera commented 6 years ago

It's a simple undefined error. I am trying to use a scss variable ($skinPrimary) and it isn't defined. I have an scss file with the above code in it. The file itself is just an scss partial being imported into my main.scss file for the whole application. Creating new classes based off of the skin works great (.skin-primary etc.).

Any thoughts on if it's even possible to create these scss variables using the skins loop?

   @import "~ng-uikit-pro-standard/assets/scss/core/colors";
    @import "~ng-uikit-pro-standard/assets/scss/core/variables";
    @import "~ng-uikit-pro-standard/assets/scss/pro/variables";
    @import "~ng-uikit-pro-standard/assets/scss/core/mixins";
    @import "~ng-uikit-pro-standard/assets/scss/pro/skins";


    @each $skin, $data in $skins {
      .#{$skin}-skin {

        $skinPrimary: map-get($data, skin-btn-primary) !important;
        $skinSecondary: map-get($data, skin-btn-primary) !important;

        .skin-primary {
          background-color: map-get($data, skin-btn-primary) !important;
        }
        .skin-secondary {
          background-color: map-get($data, skin-btn-secondary) !important;
        }
        .testingtesting {
          background-color: map-get($data, skin-btn-default) !important;
        }


      }
    }


h1 { color: $skinPrimary;}

Failed to compile.

./src/assets/stylesheets/main.scss (./node\_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node\_modules/postcss-loader/src??embedded!./node\_modules/sass-loader/lib/loader.js??ref--14-3!./src/assets/stylesheets/main.scss)Module build failed (from ./node\_modules/sass-loader/lib/loader.js):

undefined ^ Undefined variable: "$skinPrimary". in C:\\Users\\username\\Documents\\Company\\Work\\app\\src\\assets\\stylesheets\\themes\\default\_customThemeClasses.scss (line 25, column 10)

Arkadiusz Idzikowski staff commented 6 years ago

I'm afraid it's impossible to create a new variable like that.

pedrojrivera commented 6 years ago

Is there a different way to create a variable from the library skins file or do I just need to customize the loop myself?

Arkadiusz Idzikowski staff commented 6 years ago

You need to customize the loop with new classes like in the example I provided.

pedrojrivera commented 6 years ago

Hey so I'm in a similar boat. I need to be able to use the colors of a skin in areas not explicitly defined in the _skins.scss file.

Example: I make a custom card component and I want the top of the card to have a color inherited from the skin being applied to the application. Besides using the primary-color css class, what are my options?