Angular 2 theme / style component reuse libraries

a common problem

I want to create reusable Angular components to match the style of a specific client project.

I maintain reusable components in a separate project and generate an npm package from it. This package is published to a private NPM repository (Sinopia) and then installed into several client projects.

The general style is - of course - component specific, but the color and font - for example - must match the client's design.

How can I best apply styles such as color and font defined in a client project to reusable components?

Current implementation

I am currently using https://github.com/jvandemo/generator-angular2-library to fake a reusable component library. It generates some Gulp tasks that allow me to create a dist version. Publishing this distro and using the published package works very well, but the embedded code makes it difficult for me to develop a text strategy.

The Gulp build task will contain both HTML and CSS assets in the final code.

Sample Component

@Component({
    selector: 'app-messages',
    templateUrl: './messages.component.html',
    styleUrls: ['./messages.component.scss'],
})
export class MessagesComponent {

    constructor(private messagesService: MessagesService) {

    }

}

      

        
        
        
      

    

Gets "flattened" during build before

var MessagesComponent = (function () {
    /**
     * @param {?} messagesService
     */
    function MessagesComponent(messagesService) {
        this.messagesService = messagesService;
    }
    ...
    return MessagesComponent;
}());

MessagesComponent.decorators = [
    { type: Component, args: [{
                selector: 'app-messages',
                template: "<div *ngFor=\"let message of messages\"> <div class=\"message {{message.type}}-message\"> {{message.message}} <i class=\"fa fa-remove\" (click)=\"removeMessage(message)\">x</i> </div> </div>",
                styles: [".message { line-height: 36px; padding: 4px 20px; margin: 2px; position: relative; } .message .fa-remove { position: absolute; right: 20px; cursor: pointer; } .info-message { background-color: #005CAB; color: white; } .error-message { background-color: red; color: white; } "],
            },] },
];

      

        
        
        
      

    

MessagesComponent.decorators

now contains on-line style.

Concrete questions

• Is using generator https://github.com/jvandemo/generator-angular2-library a good choice for building component libraries? Or are there better ways?

• How do I override the font color and style of my reusable components?

I was hoping I could use scss variables in the component library that could be (re) defined in the client project. Something like

Repeatable component messages.component.scss

:

.info-message {
   background-color: $primary-color;
   color: white;
 }

      

        
        
        
      

    

Client project /style/_style-vars.scss

:

$primary-color: #005CAB;

      

        
        
        
      

    

Any ideas on how to handle this?

FOLLOW UP

I took one more step:

I am now using CSS3 variables and this almost supports me:

In a reusable component, I define my SCSS variables like this:

$primary-color: var(--ang-ux-primary-color, #5FB0FD);

.ang-ux-primary {
  background-color: $primary-color;
}

      

        
        
        
      

    

and in my client project I define styles like this (style.scss):

// styling reusable components
:root {
  --ang-ux-primary-color: #666666;
}

      

        
        
        
      

    

This works, but I can't seem to use SCSS variables in my CSS variable definition:

$primary-color: #666666;

// styling reusable components
:root {
  --ang-ux-primary-color: $primary-color;
}

      

        
        
        
      

    

results in an empty $ primary-color in the reusable component. I opened a separate thread for this issue: Using SCSS variable in CSS3 variable definition doesn't work?