@rededor/cura 0.2.0 → 0.3.0

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

@@ -0,0 +1,61 @@
+: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);
+  text-decoration: underline dashed 1px var(--color-link);
+  text-underline-offset: 10%;
+  cursor: default;
+}

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

@@ -0,0 +1,110 @@
+import { Host, h } from '@stencil/core';
+export class CuraDisplay {
+  constructor() {
+    /**
+     * Heading level for semantics.
+     * Values: 1(default)-6.
+     */
+    this.level = 1;
+    /**
+     * Heading style size.
+     * Values: small | regular(default) | large.
+     */
+    this.size = 'regular';
+  }
+  connectedCallback() {
+    this.weights = window.CuraAPI.theme.fonts.getWeights();
+    this.setFontProperties();
+    this.setColors();
+  }
+  getClasses() {
+    const classes = {};
+    classes[this.size.toLowerCase()] = true;
+    return classes;
+  }
+  setFontProperties() {
+    this.styles = {
+      '--font-family': window.CuraAPI.theme.fonts.getFamily('display'),
+      '--font-size': window.CuraAPI.theme.fonts.getSize(),
+      '--font-weight-bold': this.weights.bold,
+      '--font-weight-black': this.weights.black
+    };
+    this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
+  }
+  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');
+  }
+  setHostProperty(prop, value) {
+    this.host.style.setProperty(prop, value);
+  }
+  getHeadingTag() {
+    const tags = {
+      '1': h("h1", { style: this.styles, class: this.getClasses() }, h("slot", null)),
+      '2': h("h2", { style: this.styles, class: this.getClasses() }, h("slot", null)),
+      '3': h("h3", { style: this.styles, class: this.getClasses() }, h("slot", null)),
+      '4': h("h4", { style: this.styles, class: this.getClasses() }, h("slot", null)),
+      '5': h("h5", { style: this.styles, class: this.getClasses() }, h("slot", null)),
+      '6': h("h6", { style: this.styles, class: this.getClasses() }, h("slot", null)),
+      'default': h("h1", { style: this.styles, class: this.getClasses() }, h("slot", null))
+    };
+    return tags[`${this.level}`] || tags['default'];
+  }
+  render() {
+    return (h(Host, null, this.getHeadingTag()));
+  }
+  static get is() { return "cura-display"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["cura-display.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["cura-display.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "level": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Heading level for semantics.\nValues: 1(default)-6."
+        },
+        "attribute": "level",
+        "reflect": true,
+        "defaultValue": "1"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Heading style size.\nValues: small | regular(default) | large."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'regular'"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,69 @@
+: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);
+  text-decoration: underline dashed 1px var(--color-link);
+  text-underline-offset: 10%;
+  cursor: default;
+}

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

@@ -0,0 +1,136 @@
+import { Host, h } from '@stencil/core';
+export class CuraHeading {
+  constructor() {
+    /**
+     * Heading level for semantics.
+     * Values: 1(default)-6.
+     */
+    this.level = 1;
+    /**
+     * Heading style size.
+     * Values: small | regular(default) | large.
+     */
+    this.size = 'regular';
+    /**
+     * Heading font weight.
+     * Values: regular(default) | bold.
+     */
+    this.weight = 'regular';
+  }
+  connectedCallback() {
+    this.weights = window.CuraAPI.theme.fonts.getWeights();
+    this.setFontProperties();
+    this.setColors();
+  }
+  getClasses() {
+    const classes = {};
+    classes[this.size.toLowerCase()] = true;
+    classes[`${this.weight.toLowerCase()}-weight`] = true;
+    return classes;
+  }
+  setFontProperties() {
+    this.styles = {
+      '--font-family': window.CuraAPI.theme.fonts.getFamily('heading'),
+      '--font-size': window.CuraAPI.theme.fonts.getSize(),
+      '--font-weight-regular': this.weights.regular,
+      '--font-weight-medium': this.weights.medium,
+      '--font-weight-bold': this.weights.bold,
+      '--font-weight-black': this.weights.black
+    };
+    this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
+  }
+  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');
+  }
+  setHostProperty(prop, value) {
+    this.host.style.setProperty(prop, value);
+  }
+  getHeadingTag() {
+    const tags = {
+      '1': h("h1", { style: this.styles, class: this.getClasses() }, h("slot", null)),
+      '2': h("h2", { style: this.styles, class: this.getClasses() }, h("slot", null)),
+      '3': h("h3", { style: this.styles, class: this.getClasses() }, h("slot", null)),
+      '4': h("h4", { style: this.styles, class: this.getClasses() }, h("slot", null)),
+      '5': h("h5", { style: this.styles, class: this.getClasses() }, h("slot", null)),
+      '6': h("h6", { style: this.styles, class: this.getClasses() }, h("slot", null)),
+      'default': h("h1", { style: this.styles, class: this.getClasses() }, h("slot", null))
+    };
+    return tags[`${this.level}`] || tags['default'];
+  }
+  render() {
+    return (h(Host, null, this.getHeadingTag()));
+  }
+  static get is() { return "cura-heading"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["cura-heading.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["cura-heading.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "level": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Heading level for semantics.\nValues: 1(default)-6."
+        },
+        "attribute": "level",
+        "reflect": true,
+        "defaultValue": "1"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Heading style size.\nValues: small | regular(default) | large."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'regular'"
+      },
+      "weight": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Heading font weight.\nValues: regular(default) | bold."
+        },
+        "attribute": "weight",
+        "reflect": true,
+        "defaultValue": "'regular'"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,81 @@
+: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);
+  text-decoration: underline dashed 1px var(--color-link);
+  text-underline-offset: 10%;
+  cursor: default;
+}

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

@@ -0,0 +1,76 @@
+import { Host, h } from '@stencil/core';
+export class CuraParagraph {
+  constructor() {
+    /**
+     * Set size of body text.
+     * Values: regular (default) | large | small | caption.
+     */
+    this.size = 'regular';
+  }
+  connectedCallback() {
+    this.weights = window.CuraAPI.theme.fonts.getWeights();
+    this.setFontProperties();
+    this.setColors();
+  }
+  setsizeClass() {
+    const sizeclass = {};
+    sizeclass[this.size.toLowerCase()] = true;
+    return sizeclass;
+  }
+  setFontProperties() {
+    this.styles = {
+      '--font-family': window.CuraAPI.theme.fonts.getFamily('body'),
+      '--font-size': window.CuraAPI.theme.fonts.getSize(),
+      '--font-weight-regular': this.weights.regular,
+      '--font-weight-medium': this.weights.medium,
+      '--font-weight-bold': this.weights.bold
+    };
+    this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
+  }
+  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');
+  }
+  setHostProperty(prop, value) {
+    this.host.style.setProperty(prop, value);
+  }
+  render() {
+    return (h(Host, null, h("p", { style: this.styles, class: this.setsizeClass() }, h("slot", null))));
+  }
+  static get is() { return "cura-paragraph"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["cura-paragraph.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["cura-paragraph.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set size of body text.\nValues: regular (default) | large | small | caption."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'regular'"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}

package/dist/components/{dummy-component.d.ts → cura-display.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface DummyComponent extends Components.DummyComponent, HTMLElement {}
-export const DummyComponent: {
-  prototype: DummyComponent;
-  new (): DummyComponent;
+interface CuraDisplay extends Components.CuraDisplay, HTMLElement {}
+export const CuraDisplay: {
+  prototype: CuraDisplay;
+  new (): CuraDisplay;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/cura-display.js

@@ -0,0 +1,86 @@
+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 CuraDisplay$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Heading level for semantics.
+     * Values: 1(default)-6.
+     */
+    this.level = 1;
+    /**
+     * Heading style size.
+     * Values: small | regular(default) | large.
+     */
+    this.size = 'regular';
+  }
+  connectedCallback() {
+    this.weights = window.CuraAPI.theme.fonts.getWeights();
+    this.setFontProperties();
+    this.setColors();
+  }
+  getClasses() {
+    const classes = {};
+    classes[this.size.toLowerCase()] = true;
+    return classes;
+  }
+  setFontProperties() {
+    this.styles = {
+      '--font-family': window.CuraAPI.theme.fonts.getFamily('display'),
+      '--font-size': window.CuraAPI.theme.fonts.getSize(),
+      '--font-weight-bold': this.weights.bold,
+      '--font-weight-black': this.weights.black
+    };
+    this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
+  }
+  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');
+  }
+  setHostProperty(prop, value) {
+    this.host.style.setProperty(prop, value);
+  }
+  getHeadingTag() {
+    const tags = {
+      '1': h("h1", { style: this.styles, class: this.getClasses() }, h("slot", null)),
+      '2': h("h2", { style: this.styles, class: this.getClasses() }, h("slot", null)),
+      '3': h("h3", { style: this.styles, class: this.getClasses() }, h("slot", null)),
+      '4': h("h4", { style: this.styles, class: this.getClasses() }, h("slot", null)),
+      '5': h("h5", { style: this.styles, class: this.getClasses() }, h("slot", null)),
+      '6': h("h6", { style: this.styles, class: this.getClasses() }, h("slot", null)),
+      'default': h("h1", { style: this.styles, class: this.getClasses() }, h("slot", null))
+    };
+    return tags[`${this.level}`] || tags['default'];
+  }
+  render() {
+    return (h(Host, null, this.getHeadingTag()));
+  }
+  get host() { return this; }
+  static get style() { return curaDisplayCss; }
+}, [1, "cura-display", {
+    "level": [514],
+    "size": [513]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["cura-display"];
+  components.forEach(tagName => { switch (tagName) {
+    case "cura-display":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CuraDisplay$1);
+      }
+      break;
+  } });
+}
+
+const CuraDisplay = CuraDisplay$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CuraDisplay, defineCustomElement };

package/dist/components/cura-heading.d.ts

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