FIX: Border Color value and component modifier setup during generate

src/component.js

@@ -525,8 +525,9 @@ class Component extends StyleAndScriptStoringComponent {
         this._wenity = new WebTrinity();
 
         /* DEAL WITH COMPONENT MODIFICATION FIRST */
+        this._styles.push(new SStoreDefinition(this._compName, this._modifier, this._stylesExtStore));
 
-
+        /* DEAL WITH CHILDREN */
         let collectedWenities = [];
 
         for (let i = 0; i < this._children.length; i++) {
@@ -551,6 +552,7 @@ class Component extends StyleAndScriptStoringComponent {
             }
         }
 
+        /* DEAL WITH STYLING AND PROCESSING */
         /**
          * @type {Array<SStoreDefinition>}
          */

src/modifier.js

@@ -97,11 +97,11 @@ class Modifier {
         if (parentalPadding) {
             let pval = parentalPadding.getValues();
             if (pval["horizontal"] > 0) {
-                this._modifications = updateDirection("width", this._modifications, pval["horizontal"]+parentalPadding._unit);
+                this._modifications = updateDirection("width", this._modifications, pval["horizontal"] + parentalPadding._unit);
             }
 
             if (pval["vertical"] > 0) {
-                this._modifications = updateDirection("height", this._modifications, pval["vertical"]+parentalPadding._unit);
+                this._modifications = updateDirection("height", this._modifications, pval["vertical"] + parentalPadding._unit);
             }
         }
 
@@ -165,21 +165,33 @@ class Modifier {
 
     /**
      * Sets the background-color as a rgb color.
+     * If no color is given/specified the styling will be set to "inherit" 
+     * and use the color setting from (one of) the parent.
      * @param {Color} color 
      * @returns {Modifier} this modifier object
      */
     background(color) {
-        this._modifications["background-color"] = color.cssRGBString();
+        this._modifications["background-color"] = (
+            color
+                ? color.cssRGBString()
+                : "inherit"
+        );
         return this;
     }
 
     /**
-     * Sets the color as a rgb color.
+     * Sets the color as a rgb color. 
+     * If no color is given/specified the styling will be set to "inherit" 
+     * and use the color setting from (one of) the parent.
      * @param {Color} color 
      * @returns {Modifier} this modifier object
      */
     color(color) {
-        this._modifications["color"] = color.cssRGBString();
+        this._modifications["color"] = (
+            color
+                ? color.cssRGBString()
+                : "inherit"
+        );
         return this;
     }
 
@@ -193,7 +205,7 @@ class Modifier {
      * extended with the modifications of the given Modifier.
      */
     join(modifier, modifications = {}) {
-        var keys = Object.keys(modifier.ensureModifier()._modifications);
+        let keys = Object.keys(modifier.ensureModifier()._modifications);
         for (let i = 0; i < keys.length; i++) {
             /* if (!this._modifications.hasOwnProperty(keys[i])) */
             this._modifications[keys[i]] = modifier.ensureModifier()._modifications[keys[i]];

src/sizeSide/border.js

@@ -162,7 +162,7 @@ class Border extends Sides {
 
                 return [
                     { key: `border-${names[i]}-width`, value: bdef._width + this._unit },
-                    { key: `border-${names[i]}-color`, value: bdef._color },
+                    { key: `border-${names[i]}-color`, value: bdef._color.cssRGBString() },
                     { key: `border-${names[i]}-style`, value: bdef._style }
                 ]
             })