@rededor/cura 0.3.1 → 0.3.2

package/dist/collection/components/cura-page-template/cura-page-template.css

@@ -0,0 +1,123 @@
+/* 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;
+}
+: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: 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: 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;
+  }
+}

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

@@ -0,0 +1,54 @@
+import { Host, h } from '@stencil/core';
+export class CuraPageTemplate {
+  constructor() {
+    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' })))));
+  }
+  static get is() { return "cura-page-template"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["cura-page-template.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["cura-page-template.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "contentwidth": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'default' | 'centered'",
+          "resolved": "\"centered\" | \"default\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "contentwidth",
+        "reflect": true,
+        "defaultValue": "'default'"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/text/cura-display/cura-display.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);
@@ -10,6 +31,8 @@
   color: var(--color-body);
   line-height: 120%;
   letter-spacing: -4%;
+  margin-block-start: 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;
@@ -18,7 +41,7 @@
   font-size: 3em;
   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: 4.92em;
   }
@@ -29,7 +52,7 @@
     font-size: 3.428em;
   }
 }
-@media screen and (min-width: 1367px) {
+@media (min-width: 1366px) {
   :host h1, :host h2, :host h3, :host h4, :host h5, :host h6 {
     font-size: 6.14em;
     line-height: 125%;

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") {