@pine-ds/core 2.15.0-mercury.0 → 2.15.0

package/dist/collection/components/pds-text/pds-text.css

@@ -0,0 +1,210 @@
+:host {
+  display: inline;
+}
+
+:host([decoration=underline-dotted]) > * {
+  text-decoration-color: var(--pine-color-grey-600);
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-thickness: 12%;
+  text-underline-offset: 0.3rem;
+  text-underline-position: under;
+}
+
+:host([decoration=strikethrough]) > * {
+  text-decoration: line-through;
+}
+
+/* stylelint-disable */
+h1 {
+  font: var(--pine-typography-heading-1);
+  letter-spacing: 0.26px;
+}
+
+h2 {
+  font: var(--pine-typography-heading-2);
+  letter-spacing: 0.24px;
+}
+
+h3 {
+  font: var(--pine-typography-heading-3);
+  letter-spacing: 0.22px;
+}
+
+h4 {
+  font: var(--pine-typography-heading-4);
+  letter-spacing: 0.2px;
+}
+
+h5 {
+  font: var(--pine-typography-heading-5);
+  letter-spacing: 0.18px;
+}
+
+h6 {
+  font: var(--pine-typography-heading-6);
+  letter-spacing: 0.16px;
+}
+
+code, em, p, pre, strong {
+  font: var(--pine-typography-body);
+  letter-spacing: -0.16px;
+}
+
+/* stylelint-enable */
+code, pre {
+  font-family: monospace;
+  letter-spacing: 0;
+  line-height: 1;
+}
+
+em {
+  font-style: normal;
+}
+
+strong {
+  font-weight: bolder;
+}
+
+h1, h2, h3, h4, h5, h6, p, code, pre, em, strong {
+  color: var(--pine-color-text);
+  margin: var(--pine-dimension-none);
+}
+
+:host([truncate]) > * {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:host([italic]) > * {
+  font-style: italic;
+}
+
+.pds-text--color-primary {
+  color: var(--pine-color-text-primary);
+}
+
+.pds-text--color-secondary {
+  color: var(--pine-color-text-secondary);
+}
+
+.pds-text--color-neutral {
+  color: var(--pine-color-text-neutral);
+}
+
+.pds-text--color-accent {
+  color: var(--pine-color-text-accent);
+}
+
+.pds-text--color-danger {
+  color: var(--pine-color-text-danger);
+}
+
+.pds-text--color-info {
+  color: var(--pine-color-text-info);
+}
+
+.pds-text--color-success {
+  color: var(--pine-color-text-success);
+}
+
+.pds-text--color-warning {
+  color: var(--pine-color-text-warning);
+}
+
+.pds-text--size-2xl {
+  font-size: var(--pine-font-size-body-2xl);
+}
+
+.pds-text--size-xl {
+  font-size: var(--pine-font-size-body-xl);
+}
+
+.pds-text--size-lg {
+  font-size: var(--pine-font-size-body-lg);
+}
+
+.pds-text--size-md {
+  font-size: var(--pine-font-size-body-md);
+}
+
+.pds-text--size-sm {
+  font-size: var(--pine-font-size-body-sm);
+}
+
+.pds-text--size-xs {
+  font-size: var(--pine-font-size-body-xs);
+}
+
+.pds-text--size-2xs {
+  font-size: var(--pine-font-size-body-2xs);
+}
+
+.pds-text--weight-extra-light {
+  font-weight: var(--pine-font-weight-extra-light);
+}
+
+.pds-text--weight-light {
+  font-weight: var(--pine-font-weight-light);
+}
+
+.pds-text--weight-regular {
+  font-weight: var(--pine-font-weight-regular);
+}
+
+.pds-text--weight-medium {
+  font-weight: var(--pine-font-weight-medium);
+}
+
+.pds-text--weight-semibold {
+  font-weight: var(--pine-font-weight-semi-bold);
+}
+
+.pds-text--weight-bold {
+  font-weight: var(--pine-font-weight-bold);
+}
+
+.pds-text--gutter-2xl {
+  margin-block-end: var(--pine-dimension-2xl);
+}
+
+.pds-text--gutter-xl {
+  margin-block-end: var(--pine-dimension-xl);
+}
+
+.pds-text--gutter-lg {
+  margin-block-end: var(--pine-dimension-lg);
+}
+
+.pds-text--gutter-md {
+  margin-block-end: var(--pine-dimension-md);
+}
+
+.pds-text--gutter-sm {
+  margin-block-end: var(--pine-dimension-sm);
+}
+
+.pds-text--gutter-xs {
+  margin-block-end: var(--pine-dimension-xs);
+}
+
+.pds-text--gutter-2xs {
+  margin-block-end: var(--pine-dimension-2xs);
+}
+
+.pds-text--align-start {
+  text-align: start;
+}
+
+.pds-text--align-center {
+  text-align: center;
+}
+
+.pds-text--align-end {
+  text-align: end;
+}
+
+.pds-text--align-justify {
+  text-align: justify;
+}

package/dist/collection/components/pds-text/pds-text.js

@@ -0,0 +1,162 @@
+import { h } from "@stencil/core";
+export class PdsText {
+    constructor() {
+        this.align = undefined;
+        this.color = undefined;
+        this.decoration = undefined;
+        this.gutter = undefined;
+        this.size = undefined;
+        this.weight = undefined;
+        this.tag = "p";
+    }
+    render() {
+        const Tag = this.tag;
+        const typeClasses = `
+      pds-text
+      ${this.align !== undefined && this.align.trim() !== '' ? `pds-text--align-${this.align}` : ''}
+      ${this.color !== undefined && this.color.trim() !== '' ? `pds-text--color-${this.color}` : ''}
+      ${this.gutter !== undefined && this.gutter.trim() !== '' ? `pds-text--gutter-${this.gutter}` : ''}
+      ${this.size !== undefined && this.size.trim() !== '' ? `pds-text--size-${this.size}` : ''}
+      ${this.weight !== undefined && this.weight.trim() !== '' ? `pds-text--weight-${this.weight}` : ''}
+      ${this.decoration !== undefined && this.decoration.trim() !== '' ? `pds-text--decoration-${this.decoration}` : ''}
+    `;
+        return (h(Tag, { key: '1f4e66d525057dea787cafa3e553572333dc1f1d', class: typeClasses }, h("slot", { key: '035a577c6c1b67b200362c0bf6431714ac8c52ba' })));
+    }
+    static get is() { return "pds-text"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-text.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-text.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'center' | 'end' | 'justify'",
+                    "resolved": "\"center\" | \"end\" | \"justify\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the text alignment."
+                },
+                "attribute": "align",
+                "reflect": false
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| 'primary'\n  | 'secondary'\n  | 'neutral'\n  | 'accent'\n  | 'danger'\n  | 'info'\n  | 'success'\n  | 'warning'",
+                    "resolved": "\"accent\" | \"danger\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the text color."
+                },
+                "attribute": "color",
+                "reflect": false
+            },
+            "decoration": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| 'strikethrough'\n  | 'underline-dotted'",
+                    "resolved": "\"strikethrough\" | \"underline-dotted\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the text decoration."
+                },
+                "attribute": "decoration",
+                "reflect": false
+            },
+            "gutter": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| '2xl'\n  | 'xl'\n  | 'lg'\n  | 'md'\n  | 'sm'\n  | 'xs'\n  | '2xs'",
+                    "resolved": "\"2xl\" | \"2xs\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the bottom margin for the text."
+                },
+                "attribute": "gutter",
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| '2xl'\n  | 'xl'\n  | 'lg'\n  | 'md'\n  | 'sm'\n  | 'xs'\n  | '2xs'",
+                    "resolved": "\"2xl\" | \"2xs\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the font size."
+                },
+                "attribute": "size",
+                "reflect": false
+            },
+            "weight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| 'extra-light'\n  | 'light'\n  | 'regular'\n  | 'medium'\n  | 'semibold'\n  | 'bold'",
+                    "resolved": "\"bold\" | \"extra-light\" | \"light\" | \"medium\" | \"regular\" | \"semibold\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the font weight."
+                },
+                "attribute": "weight",
+                "reflect": false
+            },
+            "tag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'p'\n  | 'code'\n  | 'pre'\n  | 'strong'\n  | 'em'",
+                    "resolved": "\"code\" | \"em\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\" | \"pre\" | \"strong\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines what semantic text tag to render."
+                },
+                "attribute": "tag",
+                "reflect": false,
+                "defaultValue": "\"p\""
+            }
+        };
+    }
+}
+//# sourceMappingURL=pds-text.js.map

package/dist/collection/components/pds-text/pds-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pds-text.js","sourceRoot":"","sources":["../../../src/components/pds-text/pds-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,OAAO;;;;;;;;mBA4ET,GAAG;;IAEZ,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;QAErB,MAAM,WAAW,GAAG;;QAEhB,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE;QAC3F,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE;QAC3F,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,oBAAoB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;QAC/F,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,kBAAkB,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QACvF,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,oBAAoB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;QAC/F,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,wBAAwB,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE;KAClH,CAAC;QAEF,OAAO,CACL,EAAC,GAAG,qDAAC,KAAK,EAAE,WAAW;YACrB,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-text',\n  styleUrl: 'pds-text.scss',\n  shadow: true,\n})\nexport class PdsText {\n\n  /**\n   * Sets the text alignment.\n   */\n  @Prop() align?: 'start' | 'center' | 'end' | 'justify';\n\n  /**\n   * Sets the text color.\n   */\n  @Prop() color?:\n  | 'primary'\n  | 'secondary'\n  | 'neutral'\n  | 'accent'\n  | 'danger'\n  | 'info'\n  | 'success'\n  | 'warning';\n\n  /**\n   * Sets the text decoration.\n   */\n  @Prop() decoration?:\n  | 'strikethrough'\n  | 'underline-dotted';\n\n  /**\n   * Set the bottom margin for the text.\n   */\n  @Prop() gutter?:\n  | '2xl'\n  | 'xl'\n  | 'lg'\n  | 'md'\n  | 'sm'\n  | 'xs'\n  | '2xs';\n\n  /**\n   * Sets the font size.\n   */\n  @Prop() size?:\n  | '2xl'\n  | 'xl'\n  | 'lg'\n  | 'md'\n  | 'sm'\n  | 'xs'\n  | '2xs';\n\n  /**\n   * Sets the font weight.\n   */\n  @Prop() weight?:\n  | 'extra-light'\n  | 'light'\n  | 'regular'\n  | 'medium'\n  | 'semibold'\n  | 'bold';\n\n  /**\n   * Determines what semantic text tag to render.\n   */\n  @Prop() tag:\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'p'\n  | 'code'\n  | 'pre'\n  | 'strong'\n  | 'em' = \"p\";\n\n  render() {\n    const Tag = this.tag;\n\n    const typeClasses = `\n      pds-text\n      ${this.align !== undefined && this.align.trim() !== '' ? `pds-text--align-${this.align}` : ''}\n      ${this.color !== undefined && this.color.trim() !== '' ? `pds-text--color-${this.color}` : ''}\n      ${this.gutter !== undefined && this.gutter.trim() !== '' ? `pds-text--gutter-${this.gutter}` : ''}\n      ${this.size !== undefined && this.size.trim() !== '' ? `pds-text--size-${this.size}` : ''}\n      ${this.weight !== undefined && this.weight.trim() !== '' ? `pds-text--weight-${this.weight}` : ''}\n      ${this.decoration !== undefined && this.decoration.trim() !== '' ? `pds-text--decoration-${this.decoration}` : ''}\n    `;\n\n    return (\n      <Tag class={typeClasses}>\n        <slot />\n      </Tag>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-text/stories/pds-text.stories.js

@@ -0,0 +1,119 @@
+import { html } from 'lit';
+
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+
+export default {
+  argTypes: extractArgTypes('pds-text'),
+  component: 'pds-text',
+  title: 'components/Text',
+}
+
+const BaseTemplate = (args) => html`
+<pds-text
+  align="${args.align}"
+  color="${args.color}"
+  size="${args.size}"
+  tag="${args.tag}"
+  weight="${args.weight}"
+  decoration="${args.decoration}"
+>
+  ${args.slot}
+</pds-text>`;
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  slot: 'Hello World',
+  tag: 'h1',
+};
+
+export const Align = BaseTemplate.bind();
+Align.args = {
+  slot: '"Had to be me. Someone else might have gotten it wrong."',
+  align: 'center',
+  tag: 'em',
+};
+
+export const Color = BaseTemplate.bind();
+Color.args = {
+  slot: 'Hello World',
+  color: 'accent',
+  tag: 'p',
+};
+
+export const Decoration = BaseTemplate.bind();
+Decoration.args = {
+  slot: 'Hello World',
+  tag: 'p',
+  decoration: 'underline-dotted',
+};
+
+export const FontSize = BaseTemplate.bind();
+FontSize.args = {
+  slot: 'Hello World',
+  size: '2xl',
+  tag: 'p',
+};
+
+export const FontWeight = BaseTemplate.bind();
+FontWeight.args = {
+  slot: 'Hello World',
+  weight: 'bold',
+  tag: 'p',
+};
+
+const GutterTemplate = (args) => html`
+<pds-text
+  align="${args.align}"
+  color="${args.color}"
+  gutter="${args.gutter}"
+  size="${args.size}"
+  tag="${args.tag}"
+  weight="${args.weight}"
+  truncate
+>
+  ${args.slot}
+</pds-text>
+<pds-text tag="p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed</pds-text>`;
+
+export const Gutter = GutterTemplate.bind();
+Gutter.args = {
+  slot: 'Title',
+  gutter: 'lg',
+  tag: 'h2',
+};
+
+const ItalicTemplate = (args) => html`
+<pds-text
+  align="${args.align}"
+  color="${args.color}"
+  size="${args.size}"
+  tag="${args.tag}"
+  weight="${args.weight}"
+  italic
+>
+  ${args.slot}
+</pds-text>`;
+
+export const Italic = ItalicTemplate.bind();
+Italic.args = {
+  slot: 'Id irure id magna ipsum voluptate irure esse eu nulla',
+  tag: 'p',
+};
+
+const TruncateTemplate = (args) => html`
+<pds-text
+  align="${args.align}"
+  color="${args.color}"
+  size="${args.size}"
+  tag="${args.tag}"
+  weight="${args.weight}"
+  truncate
+>
+  ${args.slot}
+</pds-text>`;
+
+export const Truncate = TruncateTemplate.bind();
+Truncate.args = {
+  slot: 'Id irure id magna ipsum voluptate irure esse eu nulla. Ullamco officia adipisicing qui nulla non sint. Mollit tempor veniam quis nisi aliqua duis elit eu laborum et incididunt ut sit irure. Nisi aute veniam sint do amet consectetur velit. Quis sunt enim mollit deserunt laboris dolor elit exercitation. Id labore deserunt sint consequat laboris nulla do ut magna. Aliquip labore esse sint consequat voluptate tempor consectetur sit sint culpa occaecat ut velit est.',
+  tag: 'p',
+};

package/dist/collection/components/pds-textarea/pds-textarea.css

@@ -1,35 +1,14 @@
 :host {
-  --border-interactive-default: var(--pine-border-width-thin) solid var(--pine-color-grey-400);
-  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline);
-  --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline-error);
-  --color: var(--pine-color-grey-900);
-  --color-background: var(--pine-color-white);
-  --color-background-disabled: var(--pine-color-grey-200);
-  --color-border-default: var(--pine-color-grey-400);
-  --color-border-error: var(--pine-color-red-300);
-  --color-border-focus-visible: var(--pine-color-grey-300);
-  --color-border-hover: var(--pine-color-grey-500);
-  --color-disabled-default: var(--pine-color-grey-700);
-  --color-error-default: var(--pine-color-red-300);
-  --color-focus-visible-outline: var(--pine-color-purple-300);
-  --color-focus-visible-outline-error: var(--pine-color-red-200);
-  --color-placeholder-default: var(--pine-color-grey-700);
-  --font-size-field: var(--pine-font-size-100);
-  --font-size-helper-message: var(--pine-font-size-100);
-  --font-size-label: var(--pine-font-size-100);
-  --font-weight-field: var(--pine-font-weight-normal);
-  --font-weight-helper-message: var(--pine-font-weight-normal);
-  --font-weight-label: var(--pine-font-weight-medium);
-  --line-height-field: var(--pine-line-height-150);
-  --line-height-helper-message: var(--pine-line-height-125);
-  --line-height-label: var(--pine-line-height-150);
-  --spacing-margin-block-end-label: var(--pine-spacing-100);
-  --spacing-margin-block-start-helper-message: var(--pine-spacing-100);
-  --spacing-padding-block-field: var(--pine-spacing-100);
-  --spacing-padding-inline-field: var(--pine-spacing-200);
+  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);
+  --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);
   display: inline;
 }
 
+:host([aria-readonly=true]) textarea {
+  background-color: var(--pine-color-background-container-disabled);
+  color: var(--pine-color-text-readonly);
+}
+
 .pds-textarea {
   display: flex;
   flex-direction: column;
@@ -37,28 +16,22 @@
 
 label {
   display: block;
-  font-size: var(--font-size-label);
-  font-weight: var(--font-weight-label);
-  line-height: var(--line-height-label);
-  margin-block-end: var(--spacing-margin-block-end-label);
+  font-weight: var(--pine-font-weight-medium);
+  margin-block-end: var(--pine-dimension-xs);
 }
 
 .pds-textarea__field {
-  background-color: var(--color-background);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--pine-border-radius-100);
-  font-family: inherit;
-  font-size: var(--font-size-field);
-  font-weight: var(--font-weight-field);
-  line-height: var(--line-height-field);
-  padding: var(--spacing-padding-block-field) var(--spacing-padding-inline-field);
+  background-color: var(--pine-color-background-container);
+  border: var(--pine-border);
+  border-radius: calc(var(--pine-dimension-xs) * 1.25);
+  padding: var(--pine-dimension-xs) var(--pine-dimension-sm);
 }
 .pds-textarea__field:hover:not(:disabled, .is-invalid) {
-  border-color: var(--color-border-hover);
+  border: var(--pine-border-hover);
 }
 .pds-textarea__field:disabled {
-  background-color: var(--color-background-disabled);
-  color: var(--color-disabled-default);
+  background-color: var(--pine-color-background-container-disabled);
+  color: var(--pine-color-text-disabled);
   cursor: not-allowed;
 }
 .pds-textarea__field:focus-visible {
@@ -66,10 +39,11 @@ label {
   outline: none;
 }
 .pds-textarea__field::placeholder {
-  color: var(--color-placeholder-default);
+  color: var(--pine-color-text-placeholder);
 }
 .pds-textarea__field.is-invalid {
-  border-color: var(--color-border-error);
+  background-color: var(--pine-input-color-background-danger);
+  border-color: var(--pine-color-border-danger);
 }
 .pds-textarea__field.is-invalid:focus-visible {
   box-shadow: var(--box-shadow-focus-error);
@@ -77,12 +51,13 @@ label {
 
 .pds-textarea__error-message,
 .pds-textarea__helper-message {
-  font-size: var(--font-size-helper-message);
-  font-weight: var(--font-weight-helper-message);
-  line-height: var(--line-height-helper-message);
-  margin-block-start: var(--spacing-margin-block-start-helper-message);
+  font: var(--pine-typography-body-sm-medium);
+  margin-block-start: var(--pine-dimension-xs);
 }
 
 .pds-textarea__error-message {
-  color: var(--color-error-default);
+  align-items: center;
+  color: var(--pine-color-text-message-danger);
+  display: flex;
+  gap: var(--pine-dimension-2xs);
 }