@rededor/cura 0.2.1 → 0.3.0

package/dist/components/cura-heading.js

@@ -0,0 +1,95 @@
+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 CuraHeading$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';
+    /**
+     * 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()));
+  }
+  get host() { return this; }
+  static get style() { return curaHeadingCss; }
+}, [1, "cura-heading", {
+    "level": [514],
+    "size": [513],
+    "weight": [513]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["cura-heading"];
+  components.forEach(tagName => { switch (tagName) {
+    case "cura-heading":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CuraHeading$1);
+      }
+      break;
+  } });
+}
+
+const CuraHeading = CuraHeading$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CuraHeading, defineCustomElement };

package/dist/components/cura-icon2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const curaIconCss = ":host{--stroke-color:#B7B7B7}:host svg.icon-neutral{--stroke-color:#B7B7B7}:host svg.icon-primary{--stroke-color:var(--cura-color-primary-base, #004186)}:host svg.icon-secondary{--stroke-color:var(--cura-color-secondary-base, #AA8E0B)}:host svg.icon-accent{--stroke-color:var(--cura-color-accent-base, #DF8D2C)}:host svg.icon-success{--stroke-color:#5FD290}:host svg.icon-info{--stroke-color:#6EA8FF}:host svg.icon-error{--stroke-color:#EB5757}:host svg.icon-warning{--stroke-color:#FFCF3C}:host svg.icon-white{--stroke-color:#F6F6F6}:host svg.icon-black{--stroke-color:#262626}:host svg.icon-disabled{--stroke-color:#D4D4D4}:host{width:var(--size);height:var(--size);display:inline-block}:host svg{display:inline-block;stroke:var(--stroke-color);width:var(--size);height:var(--size);stroke-width:var(--stroke);fill:none}";
+const curaIconCss = ":host{width:var(--size);height:var(--size)}:host svg{display:inline-block;stroke:var(--color);width:var(--size);height:var(--size);stroke-width:var(--stroke);fill:none}";
 
 const CuraIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -8,7 +8,7 @@ const CuraIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.__attachShadow();
     this.name = '';
-    this.color = 'neutral';
+    this.color = 'neutral-base';
     this.iconset = 'default';
     this.disabled = false;
     this.sizes = {
@@ -31,34 +31,33 @@ const CuraIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.setHostProperty('--size', this.sizes[`${size}`] ? `${this.sizes[size].size}px` : `${this.sizes.default.size}px`);
     this.setHostProperty('--stroke', this.sizes[`${size}`] ? scaledStroke(size) : scaledStroke("default"));
   }
+  colorHandler() {
+    this.setHostProperty('--color', window.CuraAPI.theme.colors.getColor(this.disabled ? 'neutral-light' : this.color));
+  }
   connectedCallback() {
     this.assetsPath = window.CuraAPI.localAssetsPath;
     this.sizeHandler(this.size);
-  }
-  getClasses() {
-    const classes = {};
-    classes[`icon-${this.color}`] = true;
-    if (this.disabled)
-      classes[`icon-disabled`] = true;
-    return classes;
+    this.colorHandler();
   }
   setHostProperty(prop, value) {
     this.host.style.setProperty(prop, value);
   }
   render() {
-    return (h(Host, null, h("svg", { version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg", class: this.getClasses() }, h("use", { xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
+    return (h(Host, null, h("svg", { version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg" }, h("use", { xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
   }
   get host() { return this; }
   static get watchers() { return {
-    "size": ["sizeHandler"]
+    "size": ["sizeHandler"],
+    "color": ["colorHandler"],
+    "disabled": ["colorHandler"]
   }; }
   static get style() { return curaIconCss; }
 }, [1, "cura-icon", {
     "name": [513],
-    "color": [513],
+    "color": [1],
     "size": [8],
     "iconset": [513],
-    "disabled": [516]
+    "disabled": [4]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

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

@@ -18,7 +18,7 @@ const CuraIconsView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     };
   }
   render() {
-    return (h(Host, null, h("div", { class: "iconDetail" }, h("h4", null, this.selected), h("div", { class: "iconSizes" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size }), h("span", null, size)))), h("div", { class: "iconSizes invert" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size, color: "white" }), h("span", null, size)))), h("div", { class: "iconSizes" }, this.colors.map(color => h("div", { class: "size" }, h("cura-icon", { name: this.selected, color: color }), h("span", null, color))), h("div", { class: "size" }, h("cura-icon", { name: this.selected, disabled: true }), h("span", null, "Disabled")))), h("div", { class: "icons" }, iconsetdefaulticons.map(icon => h("div", { class: "icon", onClick: () => this.setSelected(icon) }, h("cura-icon", { name: icon }), h("span", null, icon))))));
+    return (h(Host, null, h("div", { class: "iconDetail" }, h("h4", null, this.selected), h("div", { class: "iconSizes" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size }), h("span", null, size)))), h("div", { class: "iconSizes invert" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), h("span", null, size)))), h("div", { class: "iconSizes" }, this.colors.map(color => h("div", { class: "size" }, h("cura-icon", { name: this.selected, color: color }), h("span", null, color))), h("div", { class: "size" }, h("cura-icon", { name: this.selected, disabled: true }), h("span", null, "Disabled")))), h("div", { class: "icons" }, iconsetdefaulticons.map(icon => h("div", { class: "icon", onClick: () => this.setSelected(icon) }, h("cura-icon", { name: icon }), h("span", null, icon))))));
   }
   static get style() { return curaIconsViewCss; }
 }, [1, "cura-icons-view", {

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

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

package/dist/components/cura-paragraph.js

@@ -0,0 +1,69 @@
+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 CuraParagraph$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * 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))));
+  }
+  get host() { return this; }
+  static get style() { return curaParagraphCss; }
+}, [1, "cura-paragraph", {
+    "size": [513]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["cura-paragraph"];
+  components.forEach(tagName => { switch (tagName) {
+    case "cura-paragraph":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CuraParagraph$1);
+      }
+      break;
+  } });
+}
+
+const CuraParagraph = CuraParagraph$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CuraParagraph, defineCustomElement };

package/dist/components/index.d.ts

@@ -1,7 +1,9 @@
 /* cura custom elements */
+export { CuraDisplay as CuraDisplay } from '../types/components/text/cura-display/cura-display';
+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 { DummyComponent as DummyComponent } from '../types/components/dummy-component/dummy-component';
+export { CuraParagraph as CuraParagraph } from '../types/components/text/cura-paragraph/cura-paragraph';
 
 /**
  * Used to manually set the base path where assets can be found.

package/dist/components/index.js

@@ -1,7 +1,9 @@
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
+export { CuraDisplay, defineCustomElement as defineCustomElementCuraDisplay } from './cura-display.js';
+export { CuraHeading, defineCustomElement as defineCustomElementCuraHeading } from './cura-heading.js';
 export { CuraIcon, defineCustomElement as defineCustomElementCuraIcon } from './cura-icon.js';
 export { CuraIconsView, defineCustomElement as defineCustomElementCuraIconsView } from './cura-icons-view.js';
-export { DummyComponent, defineCustomElement as defineCustomElementDummyComponent } from './dummy-component.js';
+export { CuraParagraph, defineCustomElement as defineCustomElementCuraParagraph } from './cura-paragraph.js';
 
 /**
  * Cura Default Theme
@@ -10,40 +12,46 @@ const ThemeDefault = {
   /* Colors */
   color: {
     primary: {
-      depth100: '#CCD9E7',
-      depth300: '#5580AE',
-      base: '#004186',
-      depth700: '#002B59',
-      depth900: '#00133B'
+      '100': '#71C5E8',
+      '300': '#449CD5',
+      '500': '#005EB8',
+      '700': '#004890',
+      '900': '#002855'
     },
     secondary: {
-      depth100: '#EEE8CE',
-      depth300: '#C6B45C',
-      base: '#AA8E0B',
-      depth700: '#715F07',
-      depth900: '#221C02'
+      '100': '#F5ECE3',
+      '300': '#DDC0A2',
+      '500': '#CCA074',
+      '700': '#886B4D',
+      '900': '#292017'
     },
     accent: {
-      depth100: '#F9E8D5',
-      depth300: '#E4A04F',
-      base: '#DF8D2C',
-      depth700: '#955E1D',
-      depth900: '#2D1C09'
+      '100': '#F9E8D5',
+      '300': '#E4A04F',
+      '500': '#DF8D2C',
+      '700': '#955E1D',
+      '900': '#2D1C09'
     }
   },
   /* Spacing */
   spacing: {
-    base: '8px',
+    base: 4,
   },
   /* Fonts */
   font: {
-    family: {
-      title: 'serif',
-      body: '"Roboto", Helvetica, Arial, sans-serif'
+    size: '14px',
+    color: '#4A4A4A',
+    body: "'Roboto', Arial, Helvetica, sans-serif",
+    heading: "'Roboto', Arial, Helvetica, sans-serif",
+    display: "'Roboto', Arial, Helvetica, sans-serif",
+    weights: {
+      thin: 100,
+      light: 300,
+      regular: 400,
+      medium: 500,
+      bold: 700,
+      black: 900
     },
-    size: {
-      base: '16px',
-    }
   }
 };
 
@@ -55,20 +63,18 @@ const ThemeMaternity = Object.assign(Object.assign({}, ThemeDefault), {
   /* Colors */
   color: {
     primary: {
-      base: '#CD4D9A',
-      depth100: '#FCEFF6',
-      depth300: '#FFBFE5',
-      depth500: '#FF7FCB',
-      depth700: '#99126C',
-      depth900: '#00133B'
+      '100': '#FCEFF6',
+      '300': '#FFBFE5',
+      '500': '#CD4D9A',
+      '700': '#99126C',
+      '900': '#00133B'
     },
     secondary: {
-      base: '#189AB4',
-      depth100: '#EDF3FF',
-      depth300: '#BDD2FF',
-      depth500: '#496BB6',
-      depth700: '#001C58',
-      depth900: '#430E31'
+      '100': '#EDF3FF',
+      '300': '#BDD2FF',
+      '500': '#189AB4',
+      '700': '#001C58',
+      '900': '#430E31'
     }
   } });
 
@@ -77,9 +83,219 @@ const ThemePresets = {
   'maternidade': ThemeMaternity
 };
 
+/**
+ * Static
+ */
+const Static = {
+  /* Colors */
+  color: {
+    success: {
+      lighter: '#DFF6E9',
+      light: '#94E1B5',
+      base: '#5FD290',
+      dark: '#3F8C60',
+      darker: '#132A1D',
+      depth100: '#DFF6E9',
+      depth300: '#94E1B5',
+      depth500: '#5FD290',
+      depth700: '#3F8C60',
+      depth900: '#132A1D',
+    },
+    info: {
+      lighter: '#CFE2FF',
+      light: '#95BFFF',
+      base: '#6EA8FF',
+      dark: '#517BBB',
+      darker: '#253855',
+      depth100: '#CFE2FF',
+      depth300: '#95BFFF',
+      depth500: '#6EA8FF',
+      depth700: '#517BBB',
+      depth900: '#253855',
+    },
+    error: {
+      lighter: '#FBDDDD',
+      light: '#F28F8F',
+      base: '#EB5757',
+      dark: '#9D3A3A',
+      darker: '#2F1111',
+      depth100: '#FBDDDD',
+      depth300: '#F28F8F',
+      depth500: '#EB5757',
+      depth700: '#9D3A3A',
+      depth900: '#2F1111',
+    },
+    warning: {
+      lighter: '#FCFAC4',
+      light: '#F8F489',
+      base: '#F5EF4E',
+      dark: '#A39F34',
+      darker: '#313010',
+      depth100: '#FCFAC4',
+      depth300: '#F8F489',
+      depth500: '#F5EF4E',
+      depth700: '#A39F34',
+      depth900: '#313010',
+    },
+    /* neutral: {
+      'pure-white': '#FFFFFF',
+      white: '#F6F6F6',
+      pale: '#E9E9E9',
+      lighter: '#E2E2E2',
+      light: '#D4D4D4',
+      base: '#B7B7B7',
+      medium: '#929292',
+      dark: '#6E6E6E',
+      darker: '#4A4A4A',
+      black: '#262626',
+      depth0: '#FFFFFF',
+      depth100: '#F6F6F6',
+      depth200: '#E9E9E9',
+      depth300: '#E2E2E2',
+      depth400: '#D4D4D4',
+      depth500: '#B7B7B7',
+      depth600: '#929292',
+      depth700: '#6E6E6E',
+      depth800: '#4A4A4A',
+      depth900: '#262626',
+    }, */
+    neutral: {
+      '0': '#FFFFFF',
+      '100': '#F6F6F6',
+      '200': '#E9E9E9',
+      '300': '#E2E2E2',
+      '400': '#D4D4D4',
+      '500': '#B7B7B7',
+      '600': '#929292',
+      '700': '#6E6E6E',
+      '800': '#4A4A4A',
+      '900': '#262626',
+    },
+  },
+  /* Icons */
+  icons: {
+    'sizes': ['128', '72', '64', '48', '40', '32', '24', '20', '16'],
+    'strokes': ['5.25', '3.5', '3.25', '2.75', '2.5', '2.25', '2', '1.75', '1.5'],
+    'default-size': '24',
+  },
+  /* Breakpoints */
+  breakpoints: {
+    small: '576px',
+    medium: '768px',
+    large: '992px',
+    xlarge: '1200px',
+  },
+};
+
+class CuraThemeColorsModule {
+  constructor() {
+    this.NeutralDepthAlias = {
+      'purewhite': '0',
+      'white': '100',
+      'pale': '200',
+      'lighter': '300',
+      'light': '400',
+      'base': '500',
+      'medium': '600',
+      'dark': '700',
+      'darker': '800',
+      'black': '900',
+    };
+    this.ColorDepthAlias = {
+      'lighter': '100',
+      'light': '300',
+      'base': '500',
+      'dark': '700',
+      'darker': '900'
+    };
+  }
+  /**
+   * Get theme color.
+   * @param colorWithDepth string Ex.: primary-light
+   * @returns css color property. Color definition or related css var from the theme.
+   */
+  getColor(colorWithDepth = "primary-base") {
+    const { color, depth } = this.splitColorDepth(colorWithDepth);
+    const staticColor = this.getStatic(color, depth);
+    if (staticColor)
+      return staticColor;
+    return this.getDynamic(color, depth);
+  }
+  /**
+   * Internal: Look for static color by name and depth.
+   * @param color Color name.
+   * @param depth Depth number or alias.
+   * @returns Static color definition.
+   */
+  getStatic(color, depth) {
+    var _a, _b;
+    return ((_a = Static.color[color]) === null || _a === void 0 ? void 0 : _a[depth]) || ((_b = Static.color[color]) === null || _b === void 0 ? void 0 : _b[this.NeutralDepthAlias[depth]]) || null;
+  }
+  /**
+   * Internal: Look for theme dynamic colors.
+   * @param color Color name.
+   * @param depth Depth number or alias.
+   * @returns Related CSS variable defined by the theme.
+   */
+  getDynamic(color, depth) {
+    const themeVar = this.ColorDepthAlias[depth]
+      ? `--cura-color-${color}-${this.ColorDepthAlias[depth]}`
+      : `--cura-color-${color}-${depth}`;
+    return getComputedStyle(document.body).getPropertyValue(themeVar)
+      ? `var(${themeVar})`
+      : `var(--cura-color-primary-500)`;
+  }
+  /**
+   * Internal: Split color strings
+   * @param colorWithDepth Color string [color]-[depth]. Ex.: primary-dark or primary-700.
+   * @returns Object { color: string, depth: string }.
+   */
+  splitColorDepth(colorWithDepth) {
+    const [color, depth] = colorWithDepth.toLowerCase().split(/-(.*)/);
+    return { color: color !== null && color !== void 0 ? color : "primary", depth: depth !== null && depth !== void 0 ? depth : "base" };
+  }
+}
+
+class CuraThemeFontsModule {
+  constructor() {
+    /**
+     * Get the CSS variable related to the font size base defined by the theme.
+     * @returns Related CSS variable as a string.
+     */
+    this.getSize = () => `var(--cura-font-size)`;
+    /**
+     * Get CSS variable related to the font color defined by the theme.
+     * @returns Related CSS variable as a string.
+     */
+    this.getColor = () => `var(--cura-font-color)`;
+  }
+  /**
+   * Get the CSS variable related to the font family defined by the theme.
+   * @param type 'body' | 'heading' | 'display'
+   * @returns Related css variable as a string.
+   */
+  getFamily(type = "body") {
+    const curaFontFamilyCSSVar = `--cura-font-${type.toLowerCase()}`;
+    return getComputedStyle(document.body).getPropertyValue(curaFontFamilyCSSVar)
+      ? `var(${curaFontFamilyCSSVar})`
+      : 'var(--cura-font-body)';
+  }
+  /**
+   * Get the CSS variables related to font weights defined by the theme.
+   * @returns Object with CSS vars weights definitions for thin, light, regular, medium, bold and black fonts.
+   */
+  getWeights() {
+    const weights = {};
+    Object.keys(ThemeDefault.font.weights).forEach((key) => weights[key] = `var(--cura-font-weights-${key})`);
+    return weights;
+  }
+}
+
 class CuraThemeModule {
   constructor() {
     this.prefix = '--cura';
+    this.colors = new CuraThemeColorsModule();
+    this.fonts = new CuraThemeFontsModule();
     /* Private */
     /** Set css var based on object structure */
     this.setCssVar = (prop, path) => {
@@ -152,7 +368,16 @@ class CuraAPI {
     const themeModule = new CuraThemeModule();
     this.theme = {
       load: function (themeTag) { themeModule.load(themeTag); },
-      setCustom: function (customThemeDefinitions) { themeModule.setCustom(customThemeDefinitions); }
+      setCustom: function (customThemeDefinitions) { themeModule.setCustom(customThemeDefinitions); },
+      colors: {
+        getColor: function (colorWithDepth) { return themeModule.colors.getColor(colorWithDepth); },
+      },
+      fonts: {
+        getFamily: function (type) { return themeModule.fonts.getFamily(type); },
+        getWeights: function () { return themeModule.fonts.getWeights(); },
+        getSize: function () { return themeModule.fonts.getSize(); },
+        getColor: function () { return themeModule.fonts.getColor(); }
+      }
     };
     if (config && config.customTheme) {
       this.theme.setCustom(config.customTheme);

package/dist/cura/cura.esm.js

@@ -1 +1 @@
-import{p as o,b as c}from"./p-abcda1d1.js";import{g as e}from"./p-d2dcd470.js";(()=>{const c=import.meta.url,e={};return""!==c&&(e.resourcesUrl=new URL(".",c).href),o(e)})().then((o=>(e(),c([["p-ac79f9d1",[[1,"dummy-component"]]],["p-5f113376",[[1,"cura-icons-view",{selected:[32]}],[1,"cura-icon",{name:[513],color:[513],size:[8],iconset:[513],disabled:[516]}]]]],o))));
+import{p as e,b as a}from"./p-a50716bc.js";import{g as c}from"./p-265c1706.js";(()=>{const a=import.meta.url,c={};return""!==a&&(c.resourcesUrl=new URL(".",a).href),e(c)})().then((e=>(c(),a([["p-22290742",[[1,"cura-icon",{name:[513],color:[1],size:[8],iconset:[513],disabled:[4]}]]],["p-80dc1c9f",[[1,"cura-icons-view",{selected:[32]}]]],["p-d29b9e16",[[1,"cura-display",{level:[514],size:[513]}],[1,"cura-heading",{level:[514],size:[513],weight:[513]}],[1,"cura-paragraph",{size:[513]}]]]],e))));

package/dist/cura/cura.js

@@ -115,7 +115,7 @@ DOMTokenList
   var resourcesUrl = scriptElm ? scriptElm.getAttribute('data-resources-url') || scriptElm.src : '';
   var start = function() {
     // if src is not present then origin is "null", and new URL() throws TypeError: Failed to construct 'URL': Invalid base URL
-    var url = new URL('./p-70abb532.system.js', new URL(resourcesUrl, window.location.origin !== 'null' ? window.location.origin : undefined));
+    var url = new URL('./p-a8dcaaed.system.js', new URL(resourcesUrl, window.location.origin !== 'null' ? window.location.origin : undefined));
     System.import(url.href);
   };
 

package/dist/cura/p-22290742.entry.js

@@ -0,0 +1 @@
+import{r as s,h as t,H as e,g as i}from"./p-a50716bc.js";const r=class{constructor(t){s(this,t),this.name="",this.color="neutral-base",this.iconset="default",this.disabled=!1,this.sizes={128:{size:128,stroke:5.25},72:{size:72,stroke:3.5},64:{size:64,stroke:3.25},48:{size:48,stroke:2.75},40:{size:40,stroke:2.5},32:{size:32,stroke:2.25},24:{size:24,stroke:2},20:{size:20,stroke:1.75},16:{size:16,stroke:1.5},default:{size:24,stroke:2}}}sizeHandler(s){this.setHostProperty("--size",this.sizes[`${s}`]?`${this.sizes[s].size}px`:`${this.sizes.default.size}px`),this.setHostProperty("--stroke",(s=>this.sizes[s].stroke*(this.sizes.default.size/this.sizes[s].size)+"px")(this.sizes[`${s}`]?s:"default"))}colorHandler(){this.setHostProperty("--color",window.CuraAPI.theme.colors.getColor(this.disabled?"neutral-light":this.color))}connectedCallback(){this.assetsPath=window.CuraAPI.localAssetsPath,this.sizeHandler(this.size),this.colorHandler()}setHostProperty(s,t){this.host.style.setProperty(s,t)}render(){return t(e,null,t("svg",{version:"1.1",viewBox:"0 0 24 24",preserveAspectRatio:"xMidYMid meet",xmlns:"http://www.w3.org/2000/svg"},t("use",{xlinkHref:`${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}`})))}get host(){return i(this)}static get watchers(){return{size:["sizeHandler"],color:["colorHandler"],disabled:["colorHandler"]}}};r.style=":host{width:var(--size);height:var(--size)}:host svg{display:inline-block;stroke:var(--color);width:var(--size);height:var(--size);stroke-width:var(--stroke);fill:none}";export{r as cura_icon}

package/dist/cura/p-265c1706.js

@@ -0,0 +1 @@
+const t={color:{primary:{100:"#71C5E8",300:"#449CD5",500:"#005EB8",700:"#004890",900:"#002855"},secondary:{100:"#F5ECE3",300:"#DDC0A2",500:"#CCA074",700:"#886B4D",900:"#292017"},accent:{100:"#F9E8D5",300:"#E4A04F",500:"#DF8D2C",700:"#955E1D",900:"#2D1C09"}},spacing:{base:4},font:{size:"14px",color:"#4A4A4A",body:"'Roboto', Arial, Helvetica, sans-serif",heading:"'Roboto', Arial, Helvetica, sans-serif",display:"'Roboto', Arial, Helvetica, sans-serif",weights:{thin:100,light:300,regular:400,medium:500,bold:700,black:900}}},e=Object.assign(Object.assign({},t),{color:{primary:{100:"#FCEFF6",300:"#FFBFE5",500:"#CD4D9A",700:"#99126C",900:"#00133B"},secondary:{100:"#EDF3FF",300:"#BDD2FF",500:"#189AB4",700:"#001C58",900:"#430E31"}}}),r={default:t,maternidade:e},o={color:{success:{lighter:"#DFF6E9",light:"#94E1B5",base:"#5FD290",dark:"#3F8C60",darker:"#132A1D",depth100:"#DFF6E9",depth300:"#94E1B5",depth500:"#5FD290",depth700:"#3F8C60",depth900:"#132A1D"},info:{lighter:"#CFE2FF",light:"#95BFFF",base:"#6EA8FF",dark:"#517BBB",darker:"#253855",depth100:"#CFE2FF",depth300:"#95BFFF",depth500:"#6EA8FF",depth700:"#517BBB",depth900:"#253855"},error:{lighter:"#FBDDDD",light:"#F28F8F",base:"#EB5757",dark:"#9D3A3A",darker:"#2F1111",depth100:"#FBDDDD",depth300:"#F28F8F",depth500:"#EB5757",depth700:"#9D3A3A",depth900:"#2F1111"},warning:{lighter:"#FCFAC4",light:"#F8F489",base:"#F5EF4E",dark:"#A39F34",darker:"#313010",depth100:"#FCFAC4",depth300:"#F8F489",depth500:"#F5EF4E",depth700:"#A39F34",depth900:"#313010"},neutral:{0:"#FFFFFF",100:"#F6F6F6",200:"#E9E9E9",300:"#E2E2E2",400:"#D4D4D4",500:"#B7B7B7",600:"#929292",700:"#6E6E6E",800:"#4A4A4A",900:"#262626"}},icons:{sizes:["128","72","64","48","40","32","24","20","16"],strokes:["5.25","3.5","3.25","2.75","2.5","2.25","2","1.75","1.5"],"default-size":"24"},breakpoints:{small:"576px",medium:"768px",large:"992px",xlarge:"1200px"}};class s{constructor(){this.NeutralDepthAlias={purewhite:"0",white:"100",pale:"200",lighter:"300",light:"400",base:"500",medium:"600",dark:"700",darker:"800",black:"900"},this.ColorDepthAlias={lighter:"100",light:"300",base:"500",dark:"700",darker:"900"}}getColor(t="primary-base"){const{color:e,depth:r}=this.splitColorDepth(t);return this.getStatic(e,r)||this.getDynamic(e,r)}getStatic(t,e){var r,s;return(null===(r=o.color[t])||void 0===r?void 0:r[e])||(null===(s=o.color[t])||void 0===s?void 0:s[this.NeutralDepthAlias[e]])||null}getDynamic(t,e){const r=this.ColorDepthAlias[e]?`--cura-color-${t}-${this.ColorDepthAlias[e]}`:`--cura-color-${t}-${e}`;return getComputedStyle(document.body).getPropertyValue(r)?`var(${r})`:"var(--cura-color-primary-500)"}splitColorDepth(t){const[e,r]=t.toLowerCase().split(/-(.*)/);return{color:null!=e?e:"primary",depth:null!=r?r:"base"}}}class i{constructor(){this.getSize=()=>"var(--cura-font-size)",this.getColor=()=>"var(--cura-font-color)"}getFamily(t="body"){const e="--cura-font-"+t.toLowerCase();return getComputedStyle(document.body).getPropertyValue(e)?`var(${e})`:"var(--cura-font-body)"}getWeights(){const e={};return Object.keys(t.font.weights).forEach((t=>e[t]=`var(--cura-font-weights-${t})`)),e}}class a{constructor(){this.prefix="--cura",this.colors=new s,this.fonts=new i,this.setCssVar=(t,e)=>{const r=this.groupPath(e,t[0]);this.body.style.setProperty(r,t[1])},this.groupPath=(t,e)=>`${t}-${e}`,this.isObject=t=>t&&"object"==typeof t&&!Array.isArray(t),this.mergeObject=(t,e)=>{const r=Object.entries(t);for(let t of r)this.isObject(t[1])?this.mergeObject(t[1],e[t[0]]):e[t[0]]=t[1]},this.buildCssVars=(t,e)=>{const r=Object.entries(e);for(let e of r)this.isObject(e[1])?this.buildCssVars(this.groupPath(t,e[0]),e[1]):this.setCssVar(e,t)},this.body=window.document.documentElement.querySelector("body")}load(t="default"){this.buildCssVars(this.prefix,r[t]?r[t]:r.default)}setCustom(t){const e=t.name;if(e in r)console.log("Error building custom theme. Theme %s already exists. Loading default theme.",e),this.load("default");else{const o=Object.assign({},JSON.parse(JSON.stringify(t.fromPreset&&t.fromPreset in r?r[t.fromPreset]:r.default)));this.mergeObject(t.definitions,o),r[e]=o,this.load(e)}}}class n{constructor(t){this.localAssetsPath=t&&t.localAssetsPath?t.localAssetsPath:"/assets";const e=new a;this.theme={load:function(t){e.load(t)},setCustom:function(t){e.setCustom(t)},colors:{getColor:function(t){return e.colors.getColor(t)}},fonts:{getFamily:function(t){return e.fonts.getFamily(t)},getWeights:function(){return e.fonts.getWeights()},getSize:function(){return e.fonts.getSize()},getColor:function(){return e.fonts.getColor()}}},t&&t.customTheme?this.theme.setCustom(t.customTheme):this.theme.load(t&&t.theme?t.theme:"default")}}const h=function(){const t=window.CuraInit;window.CuraAPI=t?new n(t):new n;const e=window.CuraAPI;window.dispatchEvent(new CustomEvent("CuraAPIReady",{detail:{api:e}})),t&&"function"==typeof t.onReady&&t.onReady(e)};export{h as g}