@rededor/cura 0.5.1 → 0.5.2

package/dist/collection/components/forms/cura-label/cura-label.js

@@ -0,0 +1,190 @@
+import { Host, h } from '@stencil/core';
+export class CuraLabel {
+  constructor() {
+    this.theme = window.CuraAPI.theme;
+    this.size = 'medium';
+    this.weight = 'regular';
+    this.spotColor = 'accent-dark';
+    this.color = undefined;
+    this.marginBlock = '0';
+    this.lineHeight = '125%';
+    this.styles = {};
+  }
+  handleChangeColor() {
+    this.setColors();
+  }
+  connectedCallback() {
+    this.setFontProperties();
+    this.setColors();
+  }
+  getClasses() {
+    const sizeclass = {};
+    sizeclass[this.size.toLowerCase()] = true;
+    sizeclass[`${this.weight.toLowerCase()}-weight`] = true;
+    return sizeclass;
+  }
+  setFontProperties() {
+    this.weights = this.theme.fonts.getWeights();
+    this.fontSizeBase = this.theme.fonts.getSize();
+    this.styles = {
+      '--font-family': this.theme.fonts.getFamily('body'),
+      '--font-weight-medium': this.weights.medium,
+      '--font-weight-bold': this.weights.bold
+    };
+  }
+  setColors() {
+    const fontColor = this.color
+      ? this.theme.colors.getColor(this.color)
+      : this.theme.fonts.getColor();
+    this.styles = Object.assign(Object.assign({}, this.styles), { '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'), '--color-link': this.theme.colors.getColor(`${this.spotColor}`) });
+  }
+  hostCSSProperties() {
+    return {
+      '--margin-block': this.marginBlock,
+      '--font-size-base': this.fontSizeBase,
+      '--line-height': this.lineHeight
+    };
+  }
+  render() {
+    return (h(Host, { style: this.hostCSSProperties() }, h("p", { style: this.styles, class: this.getClasses() }, h("slot", null))));
+  }
+  static get is() { return "cura-label"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["cura-label.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["cura-label.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'medium' | 'large' | 'small' | 'xsmall'",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"xsmall\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set size of body text.\nValues: medium (default) | large | small | xsmall."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'medium'"
+      },
+      "weight": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'regular' | 'bold'",
+          "resolved": "\"bold\" | \"regular\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label font weight. It is possible to use regular HTML tags like <b> or <strong> as well.\nValues: regular (default) | bold."
+        },
+        "attribute": "weight",
+        "reflect": true,
+        "defaultValue": "'regular'"
+      },
+      "spotColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Apply design system color to interactive elements like <a> and <abbr> inside the text.\nValues: Color from design system scheme. Default to 'accent-dark'."
+        },
+        "attribute": "spot-color",
+        "reflect": true,
+        "defaultValue": "'accent-dark'"
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Text color.\nValues: Color from design system scheme. Default to the font color from the theme."
+        },
+        "attribute": "color",
+        "reflect": false
+      },
+      "marginBlock": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "CSS margin-block property values.\nDefault to 1.25em"
+        },
+        "attribute": "margin-block",
+        "reflect": true,
+        "defaultValue": "'0'"
+      },
+      "lineHeight": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "CSS line-height property values.\nDefault to 140%"
+        },
+        "attribute": "line-height",
+        "reflect": true,
+        "defaultValue": "'125%'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "styles": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "color",
+        "methodName": "handleChangeColor"
+      }, {
+        "propName": "spotColor",
+        "methodName": "handleChangeColor"
+      }];
+  }
+}
+//# sourceMappingURL=cura-label.js.map

package/dist/collection/components/forms/cura-label/cura-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-label.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-label/cura-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOhF,MAAM,OAAO,SAAS;;IAsDpB,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;gBAhD0C,QAAQ;kBAM3B,SAAS;qBAM1B,aAAa;;uBAiBX,GAAG;sBAMJ,MAAM;kBAYxB,EAAE;;EA1BpB,iBAAiB;IACf,IAAI,CAAC,SAAS,EAAE,CAAC;EACnB,CAAC;EA2BD,iBAAiB;IACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACzB,IAAI,CAAC,SAAS,EAAE,CAAC;EACnB,CAAC;EAED,UAAU;IACR,MAAM,SAAS,GAAG,EAAE,CAAC;IACrB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,IAAI,CAAC;IAC1C,SAAS,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG,IAAI,CAAC;IACxD,OAAO,SAAS,CAAC;EACnB,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;IAC7C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;IAC/C,IAAI,CAAC,MAAM,GAAG;MACZ,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC;MACnD,sBAAsB,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM;MAC3C,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI;KACxC,CAAC;EACJ,CAAC;EAED,SAAS;IACP,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK;MAC1B,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;MACxC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;IAChC,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,cAAc,EAAE,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAC,EACzE,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,GAChE,CAAC;EACJ,CAAC;EAED,iBAAiB;IACf,OAAO;MACL,gBAAgB,EAAE,IAAI,CAAC,WAAW;MAClC,kBAAkB,EAAE,IAAI,CAAC,YAAY;MACrC,eAAe,EAAE,IAAI,CAAC,UAAU;KACjC,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE;MACnC,SAAG,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;QAC7C,eAAa,CACX,CACC,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, Prop, h, Element, Watch, State } from '@stencil/core';\n\n@Component({\n  tag: 'cura-label',\n  styleUrl: 'cura-label.scss',\n  shadow: true,\n})\nexport class CuraLabel {\n\n  /**\n   * Set size of body text.\n   * Values: medium (default) | large | small | xsmall.\n   */\n  @Prop({reflect: true}) size: 'medium' | 'large' | 'small' | 'xsmall' = 'medium';\n\n  /**\n   * Label font weight. It is possible to use regular HTML tags like <b> or <strong> as well.\n   * Values: regular (default) | bold.\n   */\n  @Prop({reflect: true}) weight: 'regular' | 'bold' = 'regular';\n\n  /**\n  * Apply design system color to interactive elements like <a> and <abbr> inside the text.\n  * Values: Color from design system scheme. Default to 'accent-dark'.\n  */\n  @Prop({reflect: true}) spotColor = 'accent-dark';\n\n  /**\n   * Text color.\n   * Values: Color from design system scheme. Default to the font color from the theme.\n   */\n  @Prop() color: string;\n  @Watch('color')\n  @Watch('spotColor')\n  handleChangeColor() {\n    this.setColors();\n  }\n\n  /**\n   * CSS margin-block property values.\n   * Default to 1.25em\n   */\n  @Prop({reflect: true}) marginBlock = '0';\n\n  /**\n   * CSS line-height property values.\n   * Default to 140%\n   */\n  @Prop({reflect: true}) lineHeight = '125%';\n\n  /**\n   * Host element <cura-label>\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Internal Props\n   */\n  weights: any;\n  fontSizeBase: string;\n  @State() styles = {};\n  theme = window.CuraAPI.theme;\n\n  connectedCallback() {\n    this.setFontProperties();\n    this.setColors();\n  }\n\n  getClasses() {\n    const sizeclass = {};\n    sizeclass[this.size.toLowerCase()] = true;\n    sizeclass[`${this.weight.toLowerCase()}-weight`] = true;\n    return sizeclass;\n  }\n\n  setFontProperties() {\n    this.weights = this.theme.fonts.getWeights();\n    this.fontSizeBase = this.theme.fonts.getSize();\n    this.styles = {\n      '--font-family': this.theme.fonts.getFamily('body'),\n      '--font-weight-medium': this.weights.medium,\n      '--font-weight-bold': this.weights.bold\n    };\n  }\n\n  setColors() {\n    const fontColor = this.color\n      ? this.theme.colors.getColor(this.color)\n      : this.theme.fonts.getColor();\n    this.styles = {\n      ...this.styles,\n      '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'),\n      '--color-link': this.theme.colors.getColor(`${this.spotColor}`)\n    };\n  }\n\n  hostCSSProperties() {\n    return {\n      '--margin-block': this.marginBlock,\n      '--font-size-base': this.fontSizeBase,\n      '--line-height': this.lineHeight\n    };\n  }\n\n  render() {\n    return (\n      <Host style={this.hostCSSProperties()}>\n        <p style={this.styles} class={this.getClasses()}>\n          <slot></slot>\n        </p>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/forms/cura-label/cura-label.stories.js

@@ -0,0 +1,137 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+import { getColorsWithDepths } from "../../../utils/utils";
+const colors = getColorsWithDepths();
+const renderCuraLabel = (label, args) => {
+  const styles = args.cssMarginBlock || args.cssLineHeight ? `<style>
+  cura-heading { ${args.cssMarginBlock ? `
+    --margin-block: ${args.cssMarginBlock} !important;` : ``}${args.cssLineHeight ? `
+    --line-height: ${args.cssLineHeight} !important;` : ``}
+  }
+</style>
+
+` : '';
+  const block = `<cura-label${args.size && (args.size !== 'medium' && args.size !== 'regular') ? `
+  size="${args.size}"` : ``}${args.weight ? `
+  weight="${args.weight}"` : ''}${args.color ? `
+  color="${args.color}"` : ''}${args.spotColor ? `
+  spot-color="${args.spotColor}"` : ''}${args.marginBlock ? `
+  margin-block="${args.marginBlock}"` : ''}${args.lineHeight ? `
+  line-height="${args.lineHeight}"` : ''}>
+  ${label}
+</cura-label>
+`;
+  return `${styles}${block}${block}${block}`;
+};
+export default {
+  title: 'Componentes/Forms/Label',
+  tags: ['autodocs'],
+  render: (_a) => {
+    var { label } = _a, args = __rest(_a, ["label"]);
+    return renderCuraLabel(label, args);
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Define o texto do componente diretamente. Aceita tags HTML <i>Phrasing Content</i>.',
+      name: 'Content'
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['xsmall', 'small', 'medium', 'large'],
+      description: 'Define o tamanho do bloco de texto considerando `xsmall`, `small`, `medium` (default) e `large` como valores válidos.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'medium' }
+      }
+    },
+    weight: {
+      control: { type: 'inline-radio' },
+      options: ['regular', 'bold'],
+      description: 'Espessura de fonte `regular` (default) ou `bold` para todo o texto. É possível aplicar parcialmente utilizando as tags `<b>` e `<strong>`.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'regular' }
+      }
+    },
+    color: {
+      control: { type: 'select' },
+      options: ['', ...colors],
+      description: 'Define a cor de texto do bloco. Aceita qualquer valor do esquema de cores do design system.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'Cor de texto padrão do tema' }
+      }
+    },
+    spotColor: {
+      control: { type: 'select' },
+      options: ['', ...colors],
+      description: 'Define a cor dos itens de interação dentro do bloco de texto como as tags `<a>`. Aceita qualquer valor do esquema de cores do design system.',
+      name: 'spot-color',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'accent-dark' }
+      }
+    },
+    marginBlock: {
+      control: 'text',
+      description: 'Define o tamanho do espaçamento superior e inferior do bloco. Valores válidos para a propriedade CSS `margin-block`.',
+      name: 'margin-block',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: '0' }
+      }
+    },
+    lineHeight: {
+      control: 'text',
+      description: 'Define a altura de linha base a ser considerada pelo componente em sua responsividade. Valores válidos para a propriedade CSS `line-height`.',
+      name: 'line-height',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: '125%' }
+      }
+    },
+    cssMarginBlock: {
+      control: 'text',
+      description: 'Permite a definição da propriedade `margin-block` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código.',
+      name: '--margin-block',
+      table: {
+        category: 'CSS Properties',
+        defaultValue: { summary: '0' }
+      }
+    },
+    cssLineHeight: {
+      control: 'text',
+      description: 'Permite a definição da propriedade `line-height` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código.',
+      name: '--line-height',
+      table: {
+        category: 'CSS Properties',
+        defaultValue: { summary: '125%' }
+      }
+    },
+  },
+};
+export const Label = {
+  args: {
+    label: 'Dolor sit consectetur <a href="https://www.rededorsaoluiz.com.br" target="_blank">adipiscing</a> elit.',
+    size: 'medium',
+    weight: '',
+    color: '',
+    spotColor: '',
+    marginBlock: '',
+    lineHeight: '',
+    cssMarginBlock: '',
+    cssLineHeight: ''
+  },
+};
+//# sourceMappingURL=cura-label.stories.js.map

package/dist/collection/components/forms/cura-label/cura-label.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-label.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-label/cura-label.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { getColorsWithDepths } from \"../../../utils/utils\";\n\nconst colors = getColorsWithDepths();\n\nconst renderCuraLabel = (label: string, args: any) => {\n  const styles = args.cssMarginBlock || args.cssLineHeight ? `<style>\n  cura-heading { ${args.cssMarginBlock ? `\n    --margin-block: ${args.cssMarginBlock} !important;` : ``}${ args.cssLineHeight ? `\n    --line-height: ${args.cssLineHeight} !important;` : ``}\n  }\n</style>\n\n` : '';\n  const block = `<cura-label${args.size && (args.size !== 'medium' && args.size !== 'regular') ? `\n  size=\"${args.size}\"` : ``}${args.weight ? `\n  weight=\"${args.weight}\"` : ''}${args.color ? `\n  color=\"${args.color}\"` : ''}${args.spotColor ? `\n  spot-color=\"${args.spotColor}\"` : ''}${args.marginBlock ? `\n  margin-block=\"${args.marginBlock}\"` : ''}${args.lineHeight ? `\n  line-height=\"${args.lineHeight}\"` : ''}>\n  ${label}\n</cura-label>\n`;\n  return `${styles}${block}${block}${block}`;\n}\n\nexport default {\n  title: 'Componentes/Forms/Label',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    return renderCuraLabel(label, args);\n  },\n  argTypes: {\n    label: {\n      control: 'text',\n      description: 'Define o texto do componente diretamente. Aceita tags HTML <i>Phrasing Content</i>.',\n      name: 'Content'\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['xsmall', 'small', 'medium', 'large'],\n      description: 'Define o tamanho do bloco de texto considerando `xsmall`, `small`, `medium` (default) e `large` como valores válidos.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'medium'}\n      }\n    },\n    weight: {\n      control: { type: 'inline-radio' },\n      options: ['regular', 'bold'],\n      description: 'Espessura de fonte `regular` (default) ou `bold` para todo o texto. É possível aplicar parcialmente utilizando as tags `<b>` e `<strong>`.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'regular'}\n      }\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['', ...colors],\n      description: 'Define a cor de texto do bloco. Aceita qualquer valor do esquema de cores do design system.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'Cor de texto padrão do tema'}\n      }\n    },\n    spotColor: {\n      control: { type: 'select' },\n      options: ['', ...colors],\n      description: 'Define a cor dos itens de interação dentro do bloco de texto como as tags `<a>`. Aceita qualquer valor do esquema de cores do design system.',\n      name: 'spot-color',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'accent-dark'}\n      }\n    },\n    marginBlock: {\n      control: 'text',\n      description: 'Define o tamanho do espaçamento superior e inferior do bloco. Valores válidos para a propriedade CSS `margin-block`.',\n      name: 'margin-block',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '0'}\n      }\n    },\n    lineHeight: {\n      control: 'text',\n      description: 'Define a altura de linha base a ser considerada pelo componente em sua responsividade. Valores válidos para a propriedade CSS `line-height`.',\n      name: 'line-height',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '125%'}\n      }\n    },\n    cssMarginBlock: {\n      control: 'text',\n      description: 'Permite a definição da propriedade `margin-block` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código.',\n      name: '--margin-block',\n      table: {\n        category: 'CSS Properties',\n        defaultValue: { summary: '0'}\n      }\n    },\n    cssLineHeight: {\n      control: 'text',\n      description: 'Permite a definição da propriedade `line-height` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código.',\n      name: '--line-height',\n      table: {\n        category: 'CSS Properties',\n        defaultValue: { summary: '125%'}\n      }\n    },\n  },\n};\n\nexport const Label = {\n  args: {\n    label: 'Dolor sit consectetur <a href=\"https://www.rededorsaoluiz.com.br\" target=\"_blank\">adipiscing</a> elit.',\n    size: 'medium',\n    weight: '',\n    color: '',\n    spotColor: '',\n    marginBlock: '',\n    lineHeight: '',\n    cssMarginBlock: '',\n    cssLineHeight: ''\n  },\n};\n"]}

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

@@ -11,59 +11,40 @@
  * 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() { ... }
  */
+/**
+ * Responsive media for medium to large.
+ * Use: @include medium-large() { ... }
+ */
+/**
+ * Responsive media for large and up.
+ * Use: @include large-up() { ... }
+ */
 :host {
   display: block;
-  font-size: var(--font-size);
-  text-transform: uppercase;
+  font-size: var(--font-size-base);
 }
 :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%;
-  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;
-}
-: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);
+  color: var(--color-body);
+  line-height: var(--line-height);
+  margin-block: var(--margin-block);
+  letter-spacing: 0px;
 }
-@media (min-width: 768px) and (max-width: 1365px) {
+@media (min-width: 769px) and (max-width: 1920px) {
   :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;
+    font-size: 3.429em;
   }
 }
-@media (min-width: 1366px) {
+@media (min-width: 1921px) {
   :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%;
+    font-size: 4.286em;
+    line-height: calc(var(--line-height) + 5%);
   }
 }
 :host ::slotted(b), :host ::slotted(strong) {
@@ -72,10 +53,12 @@
 :host ::slotted(a) {
   font-weight: var(--font-weight-bold);
   color: var(--color-link);
-  text-decoration: none;
   text-underline-offset: 10%;
   cursor: pointer;
 }
+:host ::slotted(u) {
+  text-underline-offset: 10%;
+}
 :host ::slotted(abbr) {
   color: var(--color-link);
   text-decoration: underline dashed 1px var(--color-link);

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

@@ -1,57 +1,57 @@
 import { Host, h } from '@stencil/core';
 export class CuraDisplay {
   constructor() {
+    this.theme = window.CuraAPI.theme;
     this.level = 1;
-    this.size = 'regular';
-    this.inverted = false;
-    this.spotColor = 'primary';
+    this.spotColor = 'accent-dark';
+    this.color = undefined;
+    this.marginBlock = '1.25em';
+    this.lineHeight = '120%';
+    this.styles = {};
+  }
+  handleChangeColor() {
+    this.setColors();
   }
   connectedCallback() {
-    this.weights = window.CuraAPI.theme.fonts.getWeights();
     this.setFontProperties();
     this.setColors();
   }
-  getClasses() {
-    const classes = {};
-    classes[this.size.toLowerCase()] = true;
-    return classes;
-  }
   setFontProperties() {
+    this.weights = this.theme.fonts.getWeights();
+    this.fontSizeBase = this.theme.fonts.getSize();
     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
+      '--font-weight-bold': this.weights.bold
     };
-    this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
-    this.setHostProperty('--block-margin', '0.5em');
   }
-  setColors() {
-    const fontColor = this.inverted
-      ? window.CuraAPI.theme.colors.getColor('neutral-white')
-      : 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}-lighter`)
-      : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`);
+  hostCSSProperties() {
+    return {
+      '--margin-block': this.marginBlock,
+      '--font-size-base': this.fontSizeBase,
+      '--line-height': this.lineHeight
+    };
   }
-  setHostProperty(prop, value) {
-    this.host.style.setProperty(prop, value);
+  setColors() {
+    const fontColor = this.color
+      ? this.theme.colors.getColor(this.color)
+      : this.theme.fonts.getColor();
+    this.styles = Object.assign(Object.assign({}, this.styles), { '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'), '--color-link': this.theme.colors.getColor(`${this.spotColor}`) });
   }
   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))
+      '1': h("h1", { style: this.styles }, h("slot", null)),
+      '2': h("h2", { style: this.styles }, h("slot", null)),
+      '3': h("h3", { style: this.styles }, h("slot", null)),
+      '4': h("h4", { style: this.styles }, h("slot", null)),
+      '5': h("h5", { style: this.styles }, h("slot", null)),
+      '6': h("h6", { style: this.styles }, h("slot", null)),
+      'default': h("h1", { style: this.styles }, h("slot", null))
     };
     return tags[`${this.level}`] || tags['default'];
   }
   render() {
-    return (h(Host, null, this.getHeadingTag()));
+    return (h(Host, { style: this.hostCSSProperties() }, this.getHeadingTag()));
   }
   static get is() { return "cura-display"; }
   static get encapsulation() { return "shadow"; }
@@ -71,21 +71,21 @@ export class CuraDisplay {
         "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "1 | 2 | 3 | 4 | 5 | 6",
+          "resolved": "1 | 2 | 3 | 4 | 5 | 6",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Heading level for semantics.\nValues: 1(default)-6."
+          "text": "Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...\nValues: 1(default) to 6."
         },
         "attribute": "level",
         "reflect": true,
         "defaultValue": "1"
       },
-      "size": {
+      "spotColor": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -97,31 +97,48 @@ export class CuraDisplay {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Heading style size.\nValues: small | regular(default) | large."
+          "text": "Apply design system color to interactive elements like <a> and <abbr> inside the text.\nValues: Color from design system scheme. Default to 'accent-dark'."
         },
-        "attribute": "size",
+        "attribute": "spot-color",
         "reflect": true,
-        "defaultValue": "'regular'"
+        "defaultValue": "'accent-dark'"
       },
-      "inverted": {
-        "type": "boolean",
+      "color": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Apply light color to text in dark background.\nValues: boolean."
+          "text": "Text color.\nValues: Color from design system scheme. Default to the font color from the theme."
         },
-        "attribute": "inverted",
+        "attribute": "color",
+        "reflect": false
+      },
+      "marginBlock": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "CSS margin-block property values.\nDefault to 1.25em"
+        },
+        "attribute": "margin-block",
         "reflect": true,
-        "defaultValue": "false"
+        "defaultValue": "'1.25em'"
       },
-      "spotColor": {
+      "lineHeight": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -133,14 +150,28 @@ export class CuraDisplay {
         "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."
+          "text": "CSS line-height property values.\nDefault to 140%"
         },
-        "attribute": "spot-color",
+        "attribute": "line-height",
         "reflect": true,
-        "defaultValue": "'primary'"
+        "defaultValue": "'120%'"
       }
     };
   }
+  static get states() {
+    return {
+      "styles": {}
+    };
+  }
   static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "color",
+        "methodName": "handleChangeColor"
+      }, {
+        "propName": "spotColor",
+        "methodName": "handleChangeColor"
+      }];
+  }
 }
 //# sourceMappingURL=cura-display.js.map