@rededor/cura 0.3.0 → 0.3.2

package/dist/collection/components/text/cura-display/cura-display.js

@@ -7,10 +7,20 @@ export class CuraDisplay {
      */
     this.level = 1;
     /**
-     * Heading style size.
-     * Values: small | regular(default) | large.
-     */
+    * Heading style size.
+    * Values: small | regular(default) | large.
+    */
     this.size = 'regular';
+    /**
+    * Apply light color to text in dark background.
+    * Values: boolean.
+    */
+    this.inverted = false;
+    /**
+    * Apply base system color to elements like <a> and <abbr>.
+    * Values: String primary(default) | secondary | accent | neutral | success | error | warning | info.
+    */
+    this.spotColor = 'primary';
   }
   connectedCallback() {
     this.weights = window.CuraAPI.theme.fonts.getWeights();
@@ -30,11 +40,16 @@ export class CuraDisplay {
       '--font-weight-black': this.weights.black
     };
     this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
+    this.setHostProperty('--block-margin', '0.5em');
   }
   setColors() {
-    const fontColor = window.CuraAPI.theme.fonts.getColor();
+    const fontColor = this.inverted
+      ? window.CuraAPI.theme.colors.getColor('neutral-100')
+      : window.CuraAPI.theme.fonts.getColor();
     this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');
-    this.styles['--color-link'] = window.CuraAPI.theme.colors.getColor('primary-700');
+    this.styles['--color-link'] = this.inverted
+      ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-100`)
+      : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-700`);
   }
   setHostProperty(prop, value) {
     this.host.style.setProperty(prop, value);
@@ -103,6 +118,42 @@ export class CuraDisplay {
         "attribute": "size",
         "reflect": true,
         "defaultValue": "'regular'"
+      },
+      "inverted": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Apply light color to text in dark background.\nValues: boolean."
+        },
+        "attribute": "inverted",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "spotColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Apply base system color to elements like <a> and <abbr>.\nValues: String primary(default) | secondary | accent | neutral | success | error | warning | info."
+        },
+        "attribute": "spot-color",
+        "reflect": true,
+        "defaultValue": "'primary'"
       }
     };
   }

package/dist/collection/components/text/cura-heading/cura-heading.css

@@ -1,3 +1,24 @@
+/* Breakpoints variables */
+/**
+ * Responsive media for mobile (small) only.
+ * Use: @include mobile-only() { ... }
+ */
+/**
+ * Responsive media for medium only.
+ * Use: @include medium-only() { ... }
+ */
+/**
+ * Responsive media for large only.
+ * Use: @include large-only() { ... }
+ */
+/**
+ * Responsive media for large and up.
+ * Use: @include large-up() { ... }
+ */
+/**
+ * Responsive media for xlarge only.
+ * Use: @include xlarge-only() { ... }
+ */
 :host {
   display: block;
   font-size: var(--font-size);
@@ -9,6 +30,8 @@
   color: var(--color-body);
   line-height: 130%;
   letter-spacing: 0%;
+  margin-block-start: var(--block-margin);
+  margin-block-end: var(--block-margin);
 }
 :host h1.bold-weight, :host h2.bold-weight, :host h3.bold-weight, :host h4.bold-weight, :host h5.bold-weight, :host h6.bold-weight {
   font-weight: var(--font-weight-medium);
@@ -25,7 +48,7 @@
 :host h1.small.bold-weight, :host h2.small.bold-weight, :host h3.small.bold-weight, :host h4.small.bold-weight, :host h5.small.bold-weight, :host h6.small.bold-weight {
   font-weight: var(--font-weight-bold);
 }
-@media screen and (min-width: 768px) and (max-width: 1366px) {
+@media (min-width: 768px) and (max-width: 1365px) {
   :host h1, :host h2, :host h3, :host h4, :host h5, :host h6 {
     font-size: 2em;
   }
@@ -36,7 +59,7 @@
     font-size: 1.357em;
   }
 }
-@media screen and (min-width: 1367px) {
+@media (min-width: 1366px) {
   :host h1, :host h2, :host h3, :host h4, :host h5, :host h6 {
     font-size: 2.5em;
     line-height: 135%;

package/dist/collection/components/text/cura-heading/cura-heading.js

@@ -16,6 +16,16 @@ export class CuraHeading {
      * Values: regular(default) | bold.
      */
     this.weight = 'regular';
+    /**
+    * Apply light color to text in dark background.
+    * Values: boolean.
+    */
+    this.inverted = false;
+    /**
+    * Apply base system color to elements like <a> and <abbr>.
+    * Values: String primary(default) | secondary | accent | neutral | success | error | warning | info.
+    */
+    this.spotColor = 'primary';
   }
   connectedCallback() {
     this.weights = window.CuraAPI.theme.fonts.getWeights();
@@ -38,11 +48,16 @@ export class CuraHeading {
       '--font-weight-black': this.weights.black
     };
     this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
+    this.setHostProperty('--block-margin', '0.5em');
   }
   setColors() {
-    const fontColor = window.CuraAPI.theme.fonts.getColor();
+    const fontColor = this.inverted
+      ? window.CuraAPI.theme.colors.getColor('neutral-100')
+      : window.CuraAPI.theme.fonts.getColor();
     this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');
-    this.styles['--color-link'] = window.CuraAPI.theme.colors.getColor('primary-700');
+    this.styles['--color-link'] = this.inverted
+      ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-100`)
+      : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-700`);
   }
   setHostProperty(prop, value) {
     this.host.style.setProperty(prop, value);
@@ -129,6 +144,42 @@ export class CuraHeading {
         "attribute": "weight",
         "reflect": true,
         "defaultValue": "'regular'"
+      },
+      "inverted": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Apply light color to text in dark background.\nValues: boolean."
+        },
+        "attribute": "inverted",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "spotColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Apply base system color to elements like <a> and <abbr>.\nValues: String primary(default) | secondary | accent | neutral | success | error | warning | info."
+        },
+        "attribute": "spot-color",
+        "reflect": true,
+        "defaultValue": "'primary'"
       }
     };
   }

package/dist/collection/components/text/cura-paragraph/cura-paragraph.css

@@ -1,3 +1,24 @@
+/* Breakpoints variables */
+/**
+ * Responsive media for mobile (small) only.
+ * Use: @include mobile-only() { ... }
+ */
+/**
+ * Responsive media for medium only.
+ * Use: @include medium-only() { ... }
+ */
+/**
+ * Responsive media for large only.
+ * Use: @include large-only() { ... }
+ */
+/**
+ * Responsive media for large and up.
+ * Use: @include large-up() { ... }
+ */
+/**
+ * Responsive media for xlarge only.
+ * Use: @include xlarge-only() { ... }
+ */
 :host {
   display: block;
   font-size: var(--font-size);
@@ -9,6 +30,8 @@
   color: var(--color-body);
   line-height: 140%;
   letter-spacing: 2%;
+  margin-block-start: var(--block-margin);
+  margin-block-end: var(--block-margin);
 }
 :host p.large {
   font-size: 1.21em;
@@ -25,7 +48,7 @@
   line-height: 135%;
   letter-spacing: 6%;
 }
-@media screen and (min-width: 768px) and (max-width: 1366px) {
+@media (min-width: 768px) and (max-width: 1365px) {
   :host p {
     font-size: 1.14em;
     line-height: 145%;
@@ -44,7 +67,7 @@
     letter-spacing: 6%;
   }
 }
-@media screen and (min-width: 1367px) {
+@media (min-width: 1366px) {
   :host p {
     font-size: 1.42em;
     line-height: 150%;

package/dist/collection/components/text/cura-paragraph/cura-paragraph.js

@@ -6,6 +6,16 @@ export class CuraParagraph {
      * Values: regular (default) | large | small | caption.
      */
     this.size = 'regular';
+    /**
+    * Apply light color to text in dark background.
+    * Values: boolean.
+    */
+    this.inverted = false;
+    /**
+    * Apply base system color to elements like <a> and <abbr>.
+    * Values: String primary(default) | secondary | accent | neutral | success | error | warning | info.
+    */
+    this.spotColor = 'primary';
   }
   connectedCallback() {
     this.weights = window.CuraAPI.theme.fonts.getWeights();
@@ -26,11 +36,16 @@ export class CuraParagraph {
       '--font-weight-bold': this.weights.bold
     };
     this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
+    this.setHostProperty('--block-margin', '1.25em');
   }
   setColors() {
-    const fontColor = window.CuraAPI.theme.fonts.getColor();
-    this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor(`neutral-darker`);
-    this.styles['--color-link'] = window.CuraAPI.theme.colors.getColor('primary-700');
+    const fontColor = this.inverted
+      ? window.CuraAPI.theme.colors.getColor('neutral-100')
+      : window.CuraAPI.theme.fonts.getColor();
+    this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');
+    this.styles['--color-link'] = this.inverted
+      ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-100`)
+      : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-700`);
   }
   setHostProperty(prop, value) {
     this.host.style.setProperty(prop, value);
@@ -69,6 +84,42 @@ export class CuraParagraph {
         "attribute": "size",
         "reflect": true,
         "defaultValue": "'regular'"
+      },
+      "inverted": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Apply light color to text in dark background.\nValues: boolean."
+        },
+        "attribute": "inverted",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "spotColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Apply base system color to elements like <a> and <abbr>.\nValues: String primary(default) | secondary | accent | neutral | success | error | warning | info."
+        },
+        "attribute": "spot-color",
+        "reflect": true,
+        "defaultValue": "'primary'"
       }
     };
   }

package/dist/components/cura-display.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const curaDisplayCss = ":host{display:block;font-size:var(--font-size);text-transform:uppercase}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:4.285em;font-weight:var(--font-weight-black);color:var(--color-body);line-height:120%;letter-spacing:-4%}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:6.21em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:3em;font-weight:var(--font-weight-bold)}@media screen and (min-width: 768px) and (max-width: 1366px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:4.92em}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:7.07em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:3.428em}}@media screen and (min-width: 1367px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:6.14em;line-height:125%}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:8.857em;letter-spacing:-6%}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:4.285em;letter-spacing:-2%}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-bold)}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-decoration:none;text-underline-offset:10%;cursor:pointer}:host ::slotted(abbr){color:var(--color-link);-webkit-text-decoration:underline dashed 1px var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";
+const curaDisplayCss = ":host{display:block;font-size:var(--font-size);text-transform:uppercase}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:4.285em;font-weight:var(--font-weight-black);color:var(--color-body);line-height:120%;letter-spacing:-4%;-webkit-margin-before:var(--block-margin);margin-block-start:var(--block-margin);-webkit-margin-after:var(--block-margin);margin-block-end:var(--block-margin)}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:6.21em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:3em;font-weight:var(--font-weight-bold)}@media (min-width: 768px) and (max-width: 1365px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:4.92em}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:7.07em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:3.428em}}@media (min-width: 1366px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:6.14em;line-height:125%}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:8.857em;letter-spacing:-6%}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:4.285em;letter-spacing:-2%}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-bold)}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-decoration:none;text-underline-offset:10%;cursor:pointer}:host ::slotted(abbr){color:var(--color-link);-webkit-text-decoration:underline dashed 1px var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";
 
 const CuraDisplay$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -13,10 +13,20 @@ const CuraDisplay$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
      */
     this.level = 1;
     /**
-     * Heading style size.
-     * Values: small | regular(default) | large.
-     */
+    * Heading style size.
+    * Values: small | regular(default) | large.
+    */
     this.size = 'regular';
+    /**
+    * Apply light color to text in dark background.
+    * Values: boolean.
+    */
+    this.inverted = false;
+    /**
+    * Apply base system color to elements like <a> and <abbr>.
+    * Values: String primary(default) | secondary | accent | neutral | success | error | warning | info.
+    */
+    this.spotColor = 'primary';
   }
   connectedCallback() {
     this.weights = window.CuraAPI.theme.fonts.getWeights();
@@ -36,11 +46,16 @@ const CuraDisplay$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       '--font-weight-black': this.weights.black
     };
     this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
+    this.setHostProperty('--block-margin', '0.5em');
   }
   setColors() {
-    const fontColor = window.CuraAPI.theme.fonts.getColor();
+    const fontColor = this.inverted
+      ? window.CuraAPI.theme.colors.getColor('neutral-100')
+      : window.CuraAPI.theme.fonts.getColor();
     this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');
-    this.styles['--color-link'] = window.CuraAPI.theme.colors.getColor('primary-700');
+    this.styles['--color-link'] = this.inverted
+      ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-100`)
+      : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-700`);
   }
   setHostProperty(prop, value) {
     this.host.style.setProperty(prop, value);
@@ -64,7 +79,9 @@ const CuraDisplay$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   static get style() { return curaDisplayCss; }
 }, [1, "cura-display", {
     "level": [514],
-    "size": [513]
+    "size": [513],
+    "inverted": [516],
+    "spotColor": [513, "spot-color"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/cura-heading.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const curaHeadingCss = ":host{display:block;font-size:var(--font-size)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:1.71em;font-weight:var(--font-weight-regular);color:var(--color-body);line-height:130%;letter-spacing:0%}:host h1.bold-weight,:host h2.bold-weight,:host h3.bold-weight,:host h4.bold-weight,:host h5.bold-weight,:host h6.bold-weight{font-weight:var(--font-weight-medium)}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.07em;letter-spacing:-2%}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.214em;line-height:150%;letter-spacing:0%}:host h1.small.bold-weight,:host h2.small.bold-weight,:host h3.small.bold-weight,:host h4.small.bold-weight,:host h5.small.bold-weight,:host h6.small.bold-weight{font-weight:var(--font-weight-bold)}@media screen and (min-width: 768px) and (max-width: 1366px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2em}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.357em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.357em}}@media screen and (min-width: 1367px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2.5em;line-height:135%;letter-spacing:-2%}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.92em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.71em;line-height:160%;letter-spacing:0%}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-bold)}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-decoration:none;text-underline-offset:10%;cursor:pointer}:host ::slotted(abbr){color:var(--color-link);-webkit-text-decoration:underline dashed 1px var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";
+const curaHeadingCss = ":host{display:block;font-size:var(--font-size)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:1.71em;font-weight:var(--font-weight-regular);color:var(--color-body);line-height:130%;letter-spacing:0%;-webkit-margin-before:var(--block-margin);margin-block-start:var(--block-margin);-webkit-margin-after:var(--block-margin);margin-block-end:var(--block-margin)}:host h1.bold-weight,:host h2.bold-weight,:host h3.bold-weight,:host h4.bold-weight,:host h5.bold-weight,:host h6.bold-weight{font-weight:var(--font-weight-medium)}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.07em;letter-spacing:-2%}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.214em;line-height:150%;letter-spacing:0%}:host h1.small.bold-weight,:host h2.small.bold-weight,:host h3.small.bold-weight,:host h4.small.bold-weight,:host h5.small.bold-weight,:host h6.small.bold-weight{font-weight:var(--font-weight-bold)}@media (min-width: 768px) and (max-width: 1365px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2em}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.357em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.357em}}@media (min-width: 1366px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2.5em;line-height:135%;letter-spacing:-2%}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.92em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.71em;line-height:160%;letter-spacing:0%}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-bold)}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-decoration:none;text-underline-offset:10%;cursor:pointer}:host ::slotted(abbr){color:var(--color-link);-webkit-text-decoration:underline dashed 1px var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";
 
 const CuraHeading$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -22,6 +22,16 @@ const CuraHeading$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
      * Values: regular(default) | bold.
      */
     this.weight = 'regular';
+    /**
+    * Apply light color to text in dark background.
+    * Values: boolean.
+    */
+    this.inverted = false;
+    /**
+    * Apply base system color to elements like <a> and <abbr>.
+    * Values: String primary(default) | secondary | accent | neutral | success | error | warning | info.
+    */
+    this.spotColor = 'primary';
   }
   connectedCallback() {
     this.weights = window.CuraAPI.theme.fonts.getWeights();
@@ -44,11 +54,16 @@ const CuraHeading$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       '--font-weight-black': this.weights.black
     };
     this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
+    this.setHostProperty('--block-margin', '0.5em');
   }
   setColors() {
-    const fontColor = window.CuraAPI.theme.fonts.getColor();
+    const fontColor = this.inverted
+      ? window.CuraAPI.theme.colors.getColor('neutral-100')
+      : window.CuraAPI.theme.fonts.getColor();
     this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');
-    this.styles['--color-link'] = window.CuraAPI.theme.colors.getColor('primary-700');
+    this.styles['--color-link'] = this.inverted
+      ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-100`)
+      : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-700`);
   }
   setHostProperty(prop, value) {
     this.host.style.setProperty(prop, value);
@@ -73,7 +88,9 @@ const CuraHeading$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
 }, [1, "cura-heading", {
     "level": [514],
     "size": [513],
-    "weight": [513]
+    "weight": [513],
+    "inverted": [516],
+    "spotColor": [513, "spot-color"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/cura-icons-view.js

@@ -1,9 +1,9 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './cura-icon2.js';
 
-const iconsetdefaulticons = ["360", "accessibility", "alertCircle", "alertTriangle", "arrowDown", "arrowDownCircle", "arrowLeft", "arrowLeftCircle", "arrowRight", "arrowRightCircle", "arrowUp", "arrowUpCircle", "attach", "avatarF", "avatarM", "biometry", "bloodGroup", "calendar", "cam", "camOff", "central", "chatCircle", "check", "checkBadge", "checkCircle", "checkDouble", "clock", "close", "closeCircle", "collapse", "config", "delete", "desktop", "deslike", "download", "duplicate", "edit", "exam", "expand", "fileBmp", "fileJpg", "filePdf", "filePng", "fileUpload", "fileXls", "filter", "fullscreen", "gallery", "geotag", "hate", "healthPlan", "height", "height2", "home", "horizontalList", "imageUp", "info2", "infoCircle", "key", "language", "language2", "languageEN", "languagePT", "like", "link", "linkExternal", "list", "login", "logout", "love", "mail", "mail2", "medical", "menuHamburguer", "menuKebab", "menuMeatballs", "mic", "micOff", "minus", "minusCircle", "minusSquare", "mobile", "neutral", "news", "notification", "order", "partner", "phone", "play", "plus", "plusCircle", "plusSquare", "print", "profile", "profile2", "pulldownG", "pulldownP", "pullupG", "pullupP", "questionCircle", "questionSquare", "range", "reload", "schedule", "search", "secure", "share", "share2", "sound", "soundOff", "subItem", "target", "team", "unLink", "unSecure", "upload", "verticalList", "viewFalse", "viewTrue", "weight", "wifi", "zoomIn", "zoomOut"];
+const iconsetdefaulticons = ["360", "accessibility", "alertCircle", "alertTriangle", "arrowDown", "arrowDownCircle", "arrowLeft", "arrowLeftCircle", "arrowRight", "arrowRightCircle", "arrowUp", "arrowUpCircle", "attach", "avatarF", "avatarM", "biometry", "bloodGroup", "calendar", "cam", "camOff", "central", "chatCircle", "check", "checkBadge", "checkCircle", "checkDouble", "clock", "close", "closeCircle", "collapse", "config", "delete", "desktop", "deslike", "download", "duplicate", "edit", "exam", "expand", "facebook", "fileBmp", "fileJpg", "filePdf", "filePng", "fileUpload", "fileXls", "filter", "fullscreen", "gallery", "geotag", "google", "hate", "healthPlan", "height", "height2", "home", "horizontalList", "imageUp", "info2", "infoCircle", "instagram", "key", "language", "language2", "languageEN", "languagePT", "lattes", "like", "likeHand", "link", "linkExternal", "linkedin", "list", "login", "logout", "love", "mail", "mail2", "medical", "menuHamburguer", "menuKebab", "menuMeatballs", "mic", "micOff", "minus", "minusCircle", "minusSquare", "mobile", "neutral", "news", "notification", "order", "partner", "phone", "play", "plus", "plusCircle", "plusSquare", "print", "profile", "profile2", "pulldownG", "pulldownP", "pullupG", "pullupP", "questionCircle", "questionSquare", "range", "reload", "schedule", "search", "secure", "share", "share2", "sound", "soundOff", "subItem", "target", "team", "twitter", "unLink", "unSecure", "unlikeHand", "upload", "verticalList", "viewFalse", "viewTrue", "weight", "whatsapp", "wifi", "youtube", "zoomIn", "zoomOut"];
 
-const curaIconsViewCss = ":host{display:block;padding:24px;font-family:var(--cura-font-family-body)}.iconDetail{display:block}.iconSizes{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.iconSizes .size{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;text-align:center;margin-right:9px;padding:8px}.iconSizes .size:last-child{margin-right:0}.iconSizes .size span{font-size:10px}.iconSizes.invert{margin-top:12px}.iconSizes.invert .size{background-color:#262626;color:#F6F6F6;border-radius:3px}.icons{margin-top:28px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;position:relative}.icons .icon{position:relative;padding:4px;cursor:pointer;opacity:0.6;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear}.icons .icon span{font-size:12px;padding:6px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#000;color:#FFF;border-radius:2px;position:absolute;top:-2px;left:50%;-webkit-transform:translateX(-50%) translateY(-100%);transform:translateX(-50%) translateY(-100%);display:none}.icons .icon:hover{opacity:1}.icons .icon:hover span{display:block}";
+const curaIconsViewCss = ":host{display:block;padding:24px;font-family:\"Roboto\", Arial, Helvetica, sans-serif}.iconDetail{display:block}.iconSizes{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.iconSizes .size{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;text-align:center;margin-right:9px;padding:8px}.iconSizes .size:last-child{margin-right:0}.iconSizes .size span{font-size:10px}.iconSizes.invert{margin-top:12px}.iconSizes.invert .size{background-color:#262626;color:#F6F6F6;border-radius:3px}.icons{margin-top:28px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;position:relative}.icons .icon{position:relative;padding:4px;cursor:pointer;opacity:0.6;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear}.icons .icon span{font-size:12px;padding:6px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#000;color:#FFF;border-radius:2px;position:absolute;top:-2px;left:50%;-webkit-transform:translateX(-50%) translateY(-100%);transform:translateX(-50%) translateY(-100%);display:none}.icons .icon:hover{opacity:1}.icons .icon:hover span{display:block}";
 
 const CuraIconsView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/cura-page-template.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CuraPageTemplate extends Components.CuraPageTemplate, HTMLElement {}
+export const CuraPageTemplate: {
+  prototype: CuraPageTemplate;
+  new (): CuraPageTemplate;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/cura-page-template.js

@@ -0,0 +1,47 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const curaPageTemplateCss = ":host{display:block}:host .grid-template{display:grid;grid-template-rows:auto;grid-template-columns:auto;grid-template-areas:\"sub-header\" \"header\" \"pre-content\" \"content-container\" \"post-body\" \"footer\" \"sub-footer\"}:host .grid-template #sub-header{grid-area:sub-header}:host .grid-template #header{grid-area:header}:host .grid-template #pre-content{grid-area:pre-content}:host .grid-template #content-container{grid-area:content-container}:host .grid-template #post-body{grid-area:post-body}:host .grid-template #footer{grid-area:footer}:host .grid-template #sub-footer{grid-area:sub-footer}@media (max-width: 360px){:host .grid-template{padding:0px}:host .grid-template #pre-content,:host .grid-template #content-container,:host .grid-template #post-body,:host .grid-template #footer{margin-top:calc(var(--spacing) * 4px)}}@media (min-width: 768px) and (max-width: 1365px){:host .grid-template{padding:0px}:host .grid-template #pre-content,:host .grid-template #content-container,:host .grid-template #post-body,:host .grid-template #footer{margin-top:calc(var(--spacing) * 5px)}}@media (min-width: 1366px) and (max-width: 1919px){:host .grid-template{padding:0px}:host .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left]){margin-right:calc(var(--spacing) * 5px)}:host .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right]){margin-left:calc(var(--spacing) * 5px)}:host .grid-template #pre-content,:host .grid-template #content-container,:host .grid-template #post-body,:host .grid-template #footer{margin-top:calc(var(--spacing) * 5px)}:host .grid-template #content-container{display:-ms-flexbox;display:flex}:host .grid-template #content-container #sidebar-left,:host .grid-template #content-container #sidebar-right{max-width:20%}}@media (min-width: 1920px){:host .grid-template{padding:0px}:host .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left]){margin-right:calc(var(--spacing) * 7px)}:host .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right]){margin-left:calc(var(--spacing) * 7px)}:host .grid-template #pre-content,:host .grid-template #content-container,:host .grid-template #post-body,:host .grid-template #footer{margin-top:calc(var(--spacing) * 7px)}:host .grid-template #content-container{display:-ms-flexbox;display:flex}:host .grid-template #content-container #sidebar-left,:host .grid-template #content-container #sidebar-right{max-width:20%}:host .grid-template #content-container.centered{max-width:1920px;justify-self:center}}";
+
+const CuraPageTemplate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.contentwidth = 'default';
+  }
+  connectedCallback() {
+    this.styles = {
+      '--spacing': window.CuraAPI.theme.spacing.getSpacing(),
+    };
+  }
+  getClasses() {
+    const classes = {};
+    classes[this.contentwidth.toLowerCase()] = true;
+    return classes;
+  }
+  render() {
+    return (h(Host, null, h("div", { style: this.styles, class: "grid-template" }, h("div", { id: "sub-header" }, h("slot", { name: 'sub-header' })), h("div", { id: "header" }, h("slot", { name: 'header' })), h("div", { id: "pre-content" }, h("slot", { name: 'pre-content' })), h("div", { id: "content-container", class: this.getClasses() }, h("div", { id: "sidebar-left" }, h("slot", { name: 'sidebar-left' })), h("div", { id: "content" }, h("slot", { name: "content" }), h("slot", null)), h("div", { id: "sidebar-right" }, h("slot", { name: 'sidebar-right' }))), h("div", { id: "post-body" }, h("slot", { name: 'post-body' })), h("div", { id: "footer" }, h("slot", { name: 'footer' })), h("div", { id: "sub-footer" }, h("slot", { name: 'sub-footer' })))));
+  }
+  get host() { return this; }
+  static get style() { return curaPageTemplateCss; }
+}, [1, "cura-page-template", {
+    "contentwidth": [513]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["cura-page-template"];
+  components.forEach(tagName => { switch (tagName) {
+    case "cura-page-template":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CuraPageTemplate$1);
+      }
+      break;
+  } });
+}
+
+const CuraPageTemplate = CuraPageTemplate$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CuraPageTemplate, defineCustomElement };

package/dist/components/cura-paragraph.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const curaParagraphCss = ":host{display:block;font-size:var(--font-size)}:host p{font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight-regular);color:var(--color-body);line-height:140%;letter-spacing:2%}:host p.large{font-size:1.21em;line-height:150%;letter-spacing:0%}:host p.small{font-size:0.85em;line-height:135%;letter-spacing:4%}:host p.caption{font-size:0.71em;line-height:135%;letter-spacing:6%}@media screen and (min-width: 768px) and (max-width: 1366px){:host p{font-size:1.14em;line-height:145%}:host p.large{font-size:1.35em;line-height:150%}:host p.small{font-size:1em;line-height:135%}:host p.caption{font-size:0.85em;line-height:135%;letter-spacing:6%}}@media screen and (min-width: 1367px){:host p{font-size:1.42em;line-height:150%;letter-spacing:0%}:host p.large{font-size:1.71em;line-height:160%}:host p.small{font-size:1.21em;line-height:145%;letter-spacing:0%}:host p.caption{font-size:1em;line-height:145%;letter-spacing:2%}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-bold)}:host ::slotted(a){font-weight:var(--font-weight-medium);color:var(--color-link);text-underline-offset:10%}:host ::slotted(abbr){color:var(--color-link);-webkit-text-decoration:underline dashed 1px var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";
+const curaParagraphCss = ":host{display:block;font-size:var(--font-size)}:host p{font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight-regular);color:var(--color-body);line-height:140%;letter-spacing:2%;-webkit-margin-before:var(--block-margin);margin-block-start:var(--block-margin);-webkit-margin-after:var(--block-margin);margin-block-end:var(--block-margin)}:host p.large{font-size:1.21em;line-height:150%;letter-spacing:0%}:host p.small{font-size:0.85em;line-height:135%;letter-spacing:4%}:host p.caption{font-size:0.71em;line-height:135%;letter-spacing:6%}@media (min-width: 768px) and (max-width: 1365px){:host p{font-size:1.14em;line-height:145%}:host p.large{font-size:1.35em;line-height:150%}:host p.small{font-size:1em;line-height:135%}:host p.caption{font-size:0.85em;line-height:135%;letter-spacing:6%}}@media (min-width: 1366px){:host p{font-size:1.42em;line-height:150%;letter-spacing:0%}:host p.large{font-size:1.71em;line-height:160%}:host p.small{font-size:1.21em;line-height:145%;letter-spacing:0%}:host p.caption{font-size:1em;line-height:145%;letter-spacing:2%}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-bold)}:host ::slotted(a){font-weight:var(--font-weight-medium);color:var(--color-link);text-underline-offset:10%}:host ::slotted(abbr){color:var(--color-link);-webkit-text-decoration:underline dashed 1px var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";
 
 const CuraParagraph$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -12,6 +12,16 @@ const CuraParagraph$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
      * Values: regular (default) | large | small | caption.
      */
     this.size = 'regular';
+    /**
+    * Apply light color to text in dark background.
+    * Values: boolean.
+    */
+    this.inverted = false;
+    /**
+    * Apply base system color to elements like <a> and <abbr>.
+    * Values: String primary(default) | secondary | accent | neutral | success | error | warning | info.
+    */
+    this.spotColor = 'primary';
   }
   connectedCallback() {
     this.weights = window.CuraAPI.theme.fonts.getWeights();
@@ -32,11 +42,16 @@ const CuraParagraph$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       '--font-weight-bold': this.weights.bold
     };
     this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
+    this.setHostProperty('--block-margin', '1.25em');
   }
   setColors() {
-    const fontColor = window.CuraAPI.theme.fonts.getColor();
-    this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor(`neutral-darker`);
-    this.styles['--color-link'] = window.CuraAPI.theme.colors.getColor('primary-700');
+    const fontColor = this.inverted
+      ? window.CuraAPI.theme.colors.getColor('neutral-100')
+      : window.CuraAPI.theme.fonts.getColor();
+    this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');
+    this.styles['--color-link'] = this.inverted
+      ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-100`)
+      : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-700`);
   }
   setHostProperty(prop, value) {
     this.host.style.setProperty(prop, value);
@@ -47,7 +62,9 @@ const CuraParagraph$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   get host() { return this; }
   static get style() { return curaParagraphCss; }
 }, [1, "cura-paragraph", {
-    "size": [513]
+    "size": [513],
+    "inverted": [516],
+    "spotColor": [513, "spot-color"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/index.d.ts

@@ -3,6 +3,7 @@ export { CuraDisplay as CuraDisplay } from '../types/components/text/cura-displa
 export { CuraHeading as CuraHeading } from '../types/components/text/cura-heading/cura-heading';
 export { CuraIcon as CuraIcon } from '../types/components/cura-icon/cura-icon';
 export { CuraIconsView as CuraIconsView } from '../types/components/cura-icons-view/cura-icons-view';
+export { CuraPageTemplate as CuraPageTemplate } from '../types/components/cura-page-template/cura-page-template';
 export { CuraParagraph as CuraParagraph } from '../types/components/text/cura-paragraph/cura-paragraph';
 
 /**