@rededor/cura 0.5.1 → 0.5.2

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

@@ -10,82 +10,138 @@ var __rest = (this && this.__rest) || function (s, e) {
     }
   return t;
 };
+import { getColorsWithDepths } from "../../../utils/utils";
+const colors = getColorsWithDepths();
+const renderCuraHeading = (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-heading${args.size && (args.size !== 'medium' && args.size !== 'regular') ? `
+  size="${args.size}"` : ``}${args.level ? `
+  level="${args.level}"` : ''}${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-heading>
+`;
+  return `${styles}${block}${block}${block}`;
+};
 export default {
   title: 'Componentes/Text/Heading',
   tags: ['autodocs'],
   render: (_a) => {
     var { label } = _a, args = __rest(_a, ["label"]);
-    // You can either use a function to create DOM elements or use a plain html string!
-    // return `<div>${label}</div>`;
-    return `<cura-heading
-  level="${args.level}"
-  spot-color="${args.spotColor}"
-  size="${args.size}"
-  inverted="${args.inverted}"
-  weight="${args.weight}">
-  ${label}
-</cura-heading>
-<cura-paragraph>Proin quis turpis et turpis efficitur dictum. Suspendisse egestas posuere libero. Sed non dapibus urna. Sed luctus tincidunt nibh, eu tincidunt justo. Curabitur at ullamcorper mauris, feugiat fermentum nulla. Quisque sed nibh in odio blandit mollis at quis dolor. Sed urna lacus, ultricies ac vulputate at, luctus eu ex. Duis at elit facilisis, iaculis orci sed, suscipit nisl. Phasellus semper lorem sed tincidunt semper. Morbi lobortis eu mi sed ultricies. Sed consequat id orci at iaculis.</cura-paragraph>`;
+    return renderCuraHeading(label, args);
   },
   argTypes: {
     label: {
       control: 'text',
-      description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',
+      description: 'Define o texto do componente diretamente. Aceita tags HTML <i>Phrasing Content</i>.',
       name: 'Content'
     },
-    inverted: {
-      control: 'boolean',
-      description: 'Inverte cores do texto para aplicação em fundo escuro.',
-      table: {
-        category: 'Properties',
-        defaultValue: { summary: 'false' }
-      }
-    },
     size: {
       control: { type: 'select' },
-      options: ['small', 'regular', 'large'],
-      description: 'Tamanhos disponíveis.',
+      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: 'regular' }
+        defaultValue: { summary: 'medium' }
       }
     },
     weight: {
       control: { type: 'inline-radio' },
       options: ['regular', 'bold'],
-      description: 'Espessura de fonte',
+      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: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],
-      description: 'Cor fundamental do Design System sem profundidade (ex: primary).',
+      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: 'primary' }
+        defaultValue: { summary: 'accent-dark' }
       }
     },
     level: {
       control: { type: 'number', min: 1, max: 6, step: 1 },
-      description: 'Define a tag semântica do título. Ex. h1, h2, h3, etc.',
+      description: 'Define a tag semântica do título. Ex. h1, h2, h3, etc. A semântica é independente do estilo aplicado.',
       table: {
         category: 'Properties',
-        defaultValue: { summary: 'primary' }
+        defaultValue: { summary: 1 }
       }
-    }
+    },
+    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: '1.25em' }
+      }
+    },
+    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: '130%' }
+      }
+    },
+    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: '1.25em' }
+      }
+    },
+    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: '130%' }
+      }
+    },
   },
 };
 export const Heading = {
   args: {
-    label: 'Dolor sit <a href="https://www.rededorsaoluiz.com.br" target="_blank">amet</a>, consectetur adipiscing elit.',
-    size: 'regular',
-    weight: 'regular',
-    level: 1,
-    spotColor: 'primary',
-    inverted: false,
+    label: 'Dolor sit <a href="https://www.rededorsaoluiz.com.br" target="_blank">amet</a>, consectetur <i>adipiscing</i> elit.',
+    size: 'medium',
+    weight: '',
+    level: '',
+    color: '',
+    spotColor: '',
+    marginBlock: '',
+    lineHeight: '',
+    cssMarginBlock: '',
+    cssLineHeight: ''
   },
 };
 //# sourceMappingURL=cura-heading.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"cura-heading.stories.js","sourceRoot":"","sources":["../../../../src/components/text/cura-heading/cura-heading.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,eAAe;EACb,KAAK,EAAE,0BAA0B;EACjC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClB,MAAM,EAAE,CAAC,EAAkB,EAAE,EAAE;QAAtB,EAAE,KAAK,OAAW,EAAN,IAAI,cAAhB,SAAkB,CAAF;IACvB,mFAAmF;IACnF,gCAAgC;IAChC,OAAO;WACA,IAAI,CAAC,KAAK;gBACL,IAAI,CAAC,SAAS;UACpB,IAAI,CAAC,IAAI;cACL,IAAI,CAAC,QAAQ;YACf,IAAI,CAAC,MAAM;IACnB,KAAK;;8gBAEqgB,CAAC;EAC7gB,CAAC;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,OAAO,EAAE,MAAM;MACf,WAAW,EAAE,qFAAqF;MAClG,IAAI,EAAE,SAAS;KAChB;IACD,QAAQ,EAAE;MACR,OAAO,EAAE,SAAS;MAClB,WAAW,EAAE,wDAAwD;MACrE,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAC;OAClC;KACF;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC;MACtC,WAAW,EAAE,uBAAuB;MACpC,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;OACpC;KACF;IACD,MAAM,EAAE;MACN,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;MACjC,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC;MAC5B,WAAW,EAAE,oBAAoB;MACjC,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;OACpC;KACF;IACD,SAAS,EAAE;MACT,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC;MAC7F,WAAW,EAAE,kEAAkE;MAC/E,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;OACpC;KACF;IACD,KAAK,EAAE;MACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE;MACpD,WAAW,EAAE,wDAAwD;MACrE,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;OACpC;KACF;GACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;EACrB,IAAI,EAAE;IACJ,KAAK,EAAE,8GAA8G;IACrH,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,CAAC;IACR,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC","sourcesContent":["\nexport default {\n  title: 'Componentes/Text/Heading',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    // You can either use a function to create DOM elements or use a plain html string!\n    // return `<div>${label}</div>`;\n    return `<cura-heading\n  level=\"${args.level}\"\n  spot-color=\"${args.spotColor}\"\n  size=\"${args.size}\"\n  inverted=\"${args.inverted}\"\n  weight=\"${args.weight}\">\n  ${label}\n</cura-heading>\n<cura-paragraph>Proin quis turpis et turpis efficitur dictum. Suspendisse egestas posuere libero. Sed non dapibus urna. Sed luctus tincidunt nibh, eu tincidunt justo. Curabitur at ullamcorper mauris, feugiat fermentum nulla. Quisque sed nibh in odio blandit mollis at quis dolor. Sed urna lacus, ultricies ac vulputate at, luctus eu ex. Duis at elit facilisis, iaculis orci sed, suscipit nisl. Phasellus semper lorem sed tincidunt semper. Morbi lobortis eu mi sed ultricies. Sed consequat id orci at iaculis.</cura-paragraph>`;\n  },\n  argTypes: {\n    label: {\n      control: 'text',\n      description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',\n      name: 'Content'\n    },\n    inverted: {\n      control: 'boolean',\n      description: 'Inverte cores do texto para aplicação em fundo escuro.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'false'}\n      }\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['small', 'regular', 'large'],\n      description: 'Tamanhos disponíveis.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'regular'}\n      }\n    },\n    weight: {\n      control: { type: 'inline-radio' },\n      options: ['regular', 'bold'],\n      description: 'Espessura de fonte',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'regular'}\n      }\n    },\n    spotColor: {\n      control: { type: 'select' },\n      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],\n      description: 'Cor fundamental do Design System sem profundidade (ex: primary).',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'primary'}\n      }\n    },\n    level: {\n      control: { type: 'number', min: 1, max: 6, step: 1 },\n      description: 'Define a tag semântica do título. Ex. h1, h2, h3, etc.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'primary'}\n      }\n    }\n  },\n};\n\nexport const Heading = {\n  args: {\n    label: 'Dolor sit <a href=\"https://www.rededorsaoluiz.com.br\" target=\"_blank\">amet</a>, consectetur adipiscing elit.',\n    size: 'regular',\n    weight: 'regular',\n    level: 1,\n    spotColor: 'primary',\n    inverted: false,\n  },\n};\n"]}
+{"version":3,"file":"cura-heading.stories.js","sourceRoot":"","sources":["../../../../src/components/text/cura-heading/cura-heading.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { getColorsWithDepths } from \"../../../utils/utils\";\n\nconst colors = getColorsWithDepths();\n\nconst renderCuraHeading = (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-heading${args.size && (args.size !== 'medium' && args.size !== 'regular') ? `\n  size=\"${args.size}\"` : ``}${args.level ? `\n  level=\"${args.level}\"` : ''}${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-heading>\n`;\n  return `${styles}${block}${block}${block}`;\n}\n\nexport default {\n  title: 'Componentes/Text/Heading',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    return renderCuraHeading(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    level: {\n      control: { type: 'number', min: 1, max: 6, step: 1 },\n      description: 'Define a tag semântica do título. Ex. h1, h2, h3, etc. A semântica é independente do estilo aplicado.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 1}\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: '1.25em'}\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: '130%'}\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: '1.25em'}\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: '130%'}\n      }\n    },\n  },\n};\n\nexport const Heading = {\n  args: {\n    label: 'Dolor sit <a href=\"https://www.rededorsaoluiz.com.br\" target=\"_blank\">amet</a>, consectetur <i>adipiscing</i> elit.',\n    size: 'medium',\n    weight: '',\n    level: '',\n    color: '',\n    spotColor: '',\n    marginBlock: '',\n    lineHeight: '',\n    cssMarginBlock: '',\n    cssLineHeight: ''\n  },\n};\n"]}

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

@@ -11,92 +11,87 @@
  * 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);
+  font-size: var(--font-size-base);
 }
 :host p {
   font-family: var(--font-family);
-  font-size: var(--font-size);
+  font-size: var(--font-size-base);
   font-weight: var(--font-weight-regular);
   color: var(--color-body);
   line-height: var(--line-height);
-  /* letter-spacing: 0.02em; */
-  margin-block-start: var(--block-margin);
-  margin-block-end: var(--block-margin);
+  margin-block: var(--margin-block);
+  letter-spacing: 0.28px;
 }
 :host p.large {
-  font-size: 1.21em;
+  font-size: 1.214em;
   line-height: calc(var(--line-height) + 10%);
-  /* line-height: 150%; */
-  /* letter-spacing: normal; */
+  letter-spacing: 0px;
 }
 :host p.small {
   font-size: 0.85em;
   line-height: calc(var(--line-height) - 5%);
-  /* line-height: 135%; */
-  /* letter-spacing: 0.04em; */
+  letter-spacing: 0.48px;
 }
-:host p.caption {
-  font-size: 0.71em;
+:host p.caption, :host p.xsmall {
+  font-size: 0.714em;
   line-height: calc(var(--line-height) - 5%);
-  /* line-height: 135%; */
-  /* letter-spacing: 0.06em; */
+  letter-spacing: 0.6px;
 }
-@media (min-width: 768px) and (max-width: 1365px) {
+@media (min-width: 769px) and (max-width: 1920px) {
   :host p {
-    font-size: 1.14em;
+    font-size: 1.143em;
     line-height: calc(var(--line-height) + 5%);
-    /* line-height: 145%; */
+    letter-spacing: 0.32px;
   }
   :host p.large {
-    font-size: 1.35em;
+    font-size: 1.357em;
     line-height: calc(var(--line-height) + 10%);
-    /* line-height: 150%; */
+    letter-spacing: 0px;
   }
   :host p.small {
     font-size: 1em;
     line-height: calc(var(--line-height) - 5%);
-    /* line-height: 135%; */
+    letter-spacing: 0.56px;
   }
-  :host p.caption {
+  :host p.caption, :host p.xsmall {
     font-size: 0.85em;
     line-height: calc(var(--line-height) - 5%);
-    /* line-height: 135%; */
-    /* letter-spacing: 0.06em; */
+    letter-spacing: 0.72px;
   }
 }
-@media (min-width: 1366px) {
+@media (min-width: 1921px) {
   :host p {
-    font-size: 1.42em;
+    font-size: 1.429em;
     line-height: calc(var(--line-height) + 10%);
-    /* line-height: 150%; */
-    /* letter-spacing: normal; */
+    letter-spacing: 0px;
   }
   :host p.large {
-    font-size: 1.71em;
+    font-size: 1.714em;
     line-height: calc(var(--line-height) + 20%);
-    /* line-height: 160%; */
   }
   :host p.small {
     font-size: 1.21em;
     line-height: calc(var(--line-height) + 5%);
-    /* line-height: 145%; */
-    /* letter-spacing: normal; */
+    letter-spacing: 0px;
   }
-  :host p.caption {
+  :host p.caption, :host p.xsmall {
     font-size: 1em;
     line-height: calc(var(--line-height) + 5%);
-    /* line-height: 145%; */
-    /* letter-spacing: 0.02em; */
+    letter-spacing: 0.28px;
   }
 }
 :host ::slotted(b), :host ::slotted(strong) {
@@ -107,6 +102,10 @@
   color: var(--color-link);
   text-underline-offset: 10%;
 }
+:host ::slotted(u) {
+  font-weight: var(--font-weight-medium);
+  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-paragraph/cura-paragraph.js

@@ -1,17 +1,18 @@
 import { Host, h } from '@stencil/core';
 export class CuraParagraph {
   constructor() {
-    this.size = 'regular';
-    this.inverted = false;
-    this.spotColor = 'primary';
+    this.theme = window.CuraAPI.theme;
+    this.size = 'medium';
+    this.spotColor = 'accent-dark';
     this.color = undefined;
+    this.marginBlock = '1.25em';
+    this.lineHeight = '140%';
     this.styles = {};
   }
   handleChangeColor() {
     this.setColors();
   }
   connectedCallback() {
-    this.weights = window.CuraAPI.theme.fonts.getWeights();
     this.setFontProperties();
     this.setColors();
   }
@@ -21,31 +22,30 @@ export class CuraParagraph {
     return sizeclass;
   }
   setFontProperties() {
+    this.weights = this.theme.fonts.getWeights();
+    this.fontSizeBase = this.theme.fonts.getSize();
     this.styles = {
-      '--font-family': window.CuraAPI.theme.fonts.getFamily('body'),
-      '--font-size': window.CuraAPI.theme.fonts.getSize(),
+      '--font-family': this.theme.fonts.getFamily('body'),
       '--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());
-    this.setHostProperty('--block-margin', '1.25em');
-    this.setHostProperty('--line-height', '140%');
   }
   setColors() {
-    const fontColor = this.color ? window.CuraAPI.theme.colors.getColor(this.color) :
-      this.inverted
-        ? window.CuraAPI.theme.colors.getColor('neutral-white')
-        : window.CuraAPI.theme.fonts.getColor();
-    this.styles = Object.assign(Object.assign({}, this.styles), { '--color-body': fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker'), '--color-link': this.inverted
-        ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)
-        : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`) });
+    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}`) });
   }
-  setHostProperty(prop, value) {
-    this.host.style.setProperty(prop, value);
+  hostCSSProperties() {
+    return {
+      '--margin-block': this.marginBlock,
+      '--font-size-base': this.fontSizeBase,
+      '--line-height': this.lineHeight
+    };
   }
   render() {
-    return (h(Host, null, h("p", { style: this.styles, class: this.setsizeClass() }, h("slot", null))));
+    return (h(Host, { style: this.hostCSSProperties() }, h("p", { style: this.styles, class: this.setsizeClass() }, h("slot", null))));
   }
   static get is() { return "cura-paragraph"; }
   static get encapsulation() { return "shadow"; }
@@ -65,39 +65,39 @@ export class CuraParagraph {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'regular' | 'large' | 'small' | 'caption'",
-          "resolved": "\"caption\" | \"large\" | \"regular\" | \"small\"",
+          "original": "'regular' | 'medium' | 'large' | 'small' | 'caption' | 'xsmall'",
+          "resolved": "\"caption\" | \"large\" | \"medium\" | \"regular\" | \"small\" | \"xsmall\"",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set size of body text.\nValues: regular (default) | large | small | caption."
+          "text": "Set size of body text.\nValues: regular (deprecated), medium (default) | large | small | caption (deprecated) | xsmall."
         },
         "attribute": "size",
         "reflect": true,
-        "defaultValue": "'regular'"
+        "defaultValue": "'medium'"
       },
-      "inverted": {
-        "type": "boolean",
+      "spotColor": {
+        "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": "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": "inverted",
+        "attribute": "spot-color",
         "reflect": true,
-        "defaultValue": "false"
+        "defaultValue": "'accent-dark'"
       },
-      "spotColor": {
+      "color": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -109,28 +109,46 @@ export class CuraParagraph {
         "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": "Text color.\nValues: Color from design system scheme. Default to the font color from the theme."
         },
-        "attribute": "spot-color",
+        "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": "'primary'"
+        "defaultValue": "'1.25em'"
       },
-      "color": {
-        "type": "any",
+      "lineHeight": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Color base from color scheme. Default: theme font color."
+          "text": "CSS line-height property values.\nDefault to 140%"
         },
-        "attribute": "color",
-        "reflect": false
+        "attribute": "line-height",
+        "reflect": true,
+        "defaultValue": "'140%'"
       }
     };
   }
@@ -144,6 +162,9 @@ export class CuraParagraph {
     return [{
         "propName": "color",
         "methodName": "handleChangeColor"
+      }, {
+        "propName": "spotColor",
+        "methodName": "handleChangeColor"
       }];
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"cura-paragraph.js","sourceRoot":"","sources":["../../../../src/components/text/cura-paragraph/cura-paragraph.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Element, Watch, State } from '@stencil/core';\n\n@Component({\n  tag: 'cura-paragraph',\n  styleUrl: 'cura-paragraph.scss',\n  shadow: true,\n})\nexport class CuraParagraph {\n\n  /**\n   * Set size of body text.\n   * Values: regular (default) | large | small | caption.\n   */\n  @Prop({reflect: true}) size: 'regular' | 'large' | 'small' | 'caption' = 'regular';\n  /**\n  * Apply light color to text in dark background.\n  * Values: boolean.\n  */\n  @Prop({reflect: true}) inverted = false;\n  /**\n  * Apply base system color to elements like <a> and <abbr>.\n  * Values: String primary(default) | secondary | accent | neutral | success | error | warning | info.\n  */\n  @Prop({reflect: true}) spotColor = 'primary';\n  /**\n   * Color base from color scheme. Default: theme font color.\n   */\n  @Prop() color;\n  @Watch('color')\n  handleChangeColor() {\n    this.setColors();\n  }\n\n  /**\n   * Host element <cura-paragraph>\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Internal Props\n   */\n  weights: any;\n  @State() styles = {};\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.setFontProperties();\n    this.setColors();\n  }\n\n  setsizeClass() {\n    const sizeclass = {};\n    sizeclass[this.size.toLowerCase()] = true;\n    return sizeclass;\n  }\n\n  setFontProperties() {\n    this.styles = {\n      '--font-family': window.CuraAPI.theme.fonts.getFamily('body'),\n      '--font-size': window.CuraAPI.theme.fonts.getSize(),\n      '--font-weight-regular': this.weights.regular,\n      '--font-weight-medium': this.weights.medium,\n      '--font-weight-bold': this.weights.bold\n    }\n    this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());\n    this.setHostProperty('--block-margin', '1.25em');\n    this.setHostProperty('--line-height', '140%');\n  }\n\n  setColors() {\n    const fontColor = this.color ? window.CuraAPI.theme.colors.getColor(this.color) :\n      this.inverted\n      ? window.CuraAPI.theme.colors.getColor('neutral-white')\n      : window.CuraAPI.theme.fonts.getColor();\n    this.styles = {\n      ...this.styles,\n      '--color-body': fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker'),\n      '--color-link': this.inverted\n        ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)\n        : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`)\n    };\n  }\n\n  setHostProperty(prop: string, value: string) {\n    this.host.style.setProperty(prop, value);\n  }\n\n  render() {\n    return (\n      <Host>\n        <p style={this.styles} class={this.setsizeClass()}>\n          <slot></slot>\n        </p>\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"cura-paragraph.js","sourceRoot":"","sources":["../../../../src/components/text/cura-paragraph/cura-paragraph.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,aAAa;;IAgDxB,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;gBA1CkE,QAAQ;qBAMpE,aAAa;;uBAiBX,QAAQ;sBAMT,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,YAAY;IACV,MAAM,SAAS,GAAG,EAAE,CAAC;IACrB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,IAAI,CAAC;IAC1C,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,uBAAuB,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO;MAC7C,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,YAAY,EAAE;QAC/C,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-paragraph',\n  styleUrl: 'cura-paragraph.scss',\n  shadow: true,\n})\nexport class CuraParagraph {\n\n  /**\n   * Set size of body text.\n   * Values: regular (deprecated), medium (default) | large | small | caption (deprecated) | xsmall.\n   */\n  @Prop({reflect: true}) size: 'regular' | 'medium' | 'large' | 'small' | 'caption' | 'xsmall' = 'medium';\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 = '1.25em';\n\n  /**\n   * CSS line-height property values.\n   * Default to 140%\n   */\n  @Prop({reflect: true}) lineHeight = '140%';\n\n  /**\n   * Host element <cura-paragraph>\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  setsizeClass() {\n    const sizeclass = {};\n    sizeclass[this.size.toLowerCase()] = 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-regular': this.weights.regular,\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.setsizeClass()}>\n          <slot></slot>\n        </p>\n      </Host>\n    );\n  }\n\n}\n"]}