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

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

@@ -1,4 +1,4 @@
-import { html, render } from 'lit';
+import { html } from 'lit';
 import { withActions } from '@storybook/addon-actions/decorator';
 import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
 
@@ -12,7 +12,7 @@ export default {
     },
   },
   title: 'components/Tabs',
-}
+};
 
 const BaseTemplate = (args) => html`
 <pds-tabs active-tab-name=${args.activeTabName} variant=${args.variant} component-id=${args.componentId} tablist-label=${args.tablistLabel}>
@@ -25,6 +25,22 @@ const BaseTemplate = (args) => html`
 </pds-tabs>
 `;
 
+export const Default = BaseTemplate.bind({});
+Default.args = {
+  activeTabName: "Dollop",
+  componentId: "primary",
+  variant: "primary",
+  tablistLabel: "Foo",
+}
+
+export const Filter = BaseTemplate.bind({});
+Filter.args = {
+  activeTabName: "Sturdy",
+  componentId: "filter",
+  variant: 'filter',
+  tablistLabel: "Foo",
+}
+
 const AvailabilityTemplate = (args) => html`
 <div style="background-color: #ddd; padding: 20px;">
   <pds-tabs active-tab-name=${args.activeTabName} variant=${args.variant} component-id=${args.componentId} tablist-label=${args.tablistLabel}>
@@ -38,14 +54,6 @@ const AvailabilityTemplate = (args) => html`
 </div>
 `;
 
-export const Primary = BaseTemplate.bind({});
-Primary.args = {
-  activeTabName: "Dollop",
-  componentId: "primary",
-  variant: "primary",
-  tablistLabel: "Foo",
-}
-
 export const Availability = AvailabilityTemplate.bind({});
 Availability.args = {
   activeTabName: "tuesday",
@@ -53,11 +61,3 @@ Availability.args = {
   variant: 'availability',
   tablistLabel: "Foo",
 }
-
-export const Filter = BaseTemplate.bind({});
-Filter.args = {
-  activeTabName: "Sturdy",
-  componentId: "filter",
-  variant: 'filter',
-  tablistLabel: "Foo",
-}

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

@@ -0,0 +1,231 @@
+: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-family: "GreetStandard";
+  font-size: 28px;
+  font-weight: 600;
+  letter-spacing: 0.26px;
+  line-height: 1.25;
+}
+
+h2 {
+  font-family: "GreetStandard";
+  font-size: 26px;
+  font-weight: 600;
+  letter-spacing: 0.24px;
+  line-height: 1.25;
+}
+
+h3 {
+  font-family: "GreetStandard";
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: 0.22px;
+  line-height: 1.25;
+}
+
+h4 {
+  font-family: "GreetStandard";
+  font-size: 20px;
+  font-weight: 600;
+  letter-spacing: 0.2px;
+  line-height: 1.25;
+}
+
+h5 {
+  font-family: "GreetStandard";
+  font-size: 18px;
+  font-weight: 500;
+  letter-spacing: 0.18px;
+  line-height: 1.25;
+}
+
+h6 {
+  font-family: "GreetStandard";
+  font-size: 16px;
+  font-weight: 500;
+  letter-spacing: 0.16px;
+  line-height: 1.25;
+}
+
+code, em, p, pre, strong {
+  font-family: "Inter";
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: -0.16px;
+  line-height: 1.425;
+}
+
+/* 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-default);
+  margin: 0;
+}
+
+:host([truncate]) > * {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:host([italic]) > * {
+  font-style: italic;
+}
+
+.pds-text--color-primary {
+  color: var(--pine-color-white);
+}
+
+.pds-text--color-secondary {
+  color: var(--pine-color-grey-800);
+}
+
+.pds-text--color-neutral {
+  color: var(--pine-color-grey-900);
+}
+
+.pds-text--color-accent {
+  color: var(--pine-color-purple-900);
+}
+
+.pds-text--color-danger {
+  color: var(--pine-color-red-900);
+}
+
+.pds-text--color-info {
+  color: var(--pine-color-blue-900);
+}
+
+.pds-text--color-success {
+  color: var(--pine-color-green-900);
+}
+
+.pds-text--color-warning {
+  color: var(--pine-color-yellow-900);
+}
+
+.pds-text--size-2xl {
+  font-size: 20px;
+}
+
+.pds-text--size-xl {
+  font-size: 18px;
+}
+
+.pds-text--size-lg {
+  font-size: 16px;
+}
+
+.pds-text--size-md {
+  font-size: 14px;
+}
+
+.pds-text--size-sm {
+  font-size: 12px;
+}
+
+.pds-text--size-xs {
+  font-size: 10px;
+}
+
+.pds-text--size-2xs {
+  font-size: 8px;
+}
+
+.pds-text--weight-extra-light {
+  font-weight: 200;
+}
+
+.pds-text--weight-light {
+  font-weight: 300;
+}
+
+.pds-text--weight-regular {
+  font-weight: 400;
+}
+
+.pds-text--weight-medium {
+  font-weight: 500;
+}
+
+.pds-text--weight-semibold {
+  font-weight: 600;
+}
+
+.pds-text--weight-bold {
+  font-weight: 700;
+}
+
+.pds-text--gutter-2xl {
+  margin-block-end: 48px;
+}
+
+.pds-text--gutter-xl {
+  margin-block-end: 40px;
+}
+
+.pds-text--gutter-lg {
+  margin-block-end: 32px;
+}
+
+.pds-text--gutter-md {
+  margin-block-end: 24px;
+}
+
+.pds-text--gutter-sm {
+  margin-block-end: 16px;
+}
+
+.pds-text--gutter-xs {
+  margin-block-end: 8px;
+}
+
+.pds-text--gutter-2xs {
+  margin-block-end: 4px;
+}
+
+.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,32 +1,28 @@
 :host {
-  --border-interactive-default: var(--pine-border-width-thin) solid var(--pine-color-grey-400);
+  --border-interactive-default: var(--pine-border-interactive-default);
+  --border-interactive-hover: var(--pine-border-interactive-hover);
   --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-background-default: var(--pine-color-white);
+  --color-background-disabled: var(--pine-color-grey-100);
+  --color-background-hover: var(--pine-color-grey-050);
+  --color-background-error-default: var(--pine-color-red-050);
+  --color-border-error-default: var(--pine-color-red-600);
+  --color-border-focus-visible: var(--pine-color-grey-400);
+  --color-border-hover: var(--pine-color-grey-400);
   --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);
+  --color-focus-visible-outline-error: var(--pine-color-red-300);
+  --color-text-disabled-default: var(--pine-color-grey-400);
+  --color-text-message-error-default: var(--pine-color-red-600);
+  --color-text-placeholder-default: var(--pine-color-grey-600);
+  --color-text-placeholder-disabled: var(--pine-color-grey-400);
+  --font-weight-label-default: var(--pine-font-weight-body-medium);
   --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);
+  --spacing-icon-error-message: var(--pine-spacing-050);
+  --typography-message-default: var(--pine-typography-body-sm-default);
   display: inline;
 }
 
@@ -37,28 +33,22 @@
 
 label {
   display: block;
-  font-size: var(--font-size-label);
-  font-weight: var(--font-weight-label);
-  line-height: var(--line-height-label);
+  font-weight: var(--font-weight-label-default);
   margin-block-end: var(--spacing-margin-block-end-label);
 }
 
 .pds-textarea__field {
-  background-color: var(--color-background);
-  border: 1px solid var(--color-border-default);
+  background-color: var(--color-background-default);
+  border: var(--border-interactive-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);
 }
 .pds-textarea__field:hover:not(:disabled, .is-invalid) {
-  border-color: var(--color-border-hover);
+  border: var(--border-interactive-hover);
 }
 .pds-textarea__field:disabled {
   background-color: var(--color-background-disabled);
-  color: var(--color-disabled-default);
+  color: var(--color-text-disabled-default);
   cursor: not-allowed;
 }
 .pds-textarea__field:focus-visible {
@@ -66,10 +56,10 @@ label {
   outline: none;
 }
 .pds-textarea__field::placeholder {
-  color: var(--color-placeholder-default);
+  color: var(--color-text-placeholder-default);
 }
 .pds-textarea__field.is-invalid {
-  border-color: var(--color-border-error);
+  border-color: var(--color-border-error-default);
 }
 .pds-textarea__field.is-invalid:focus-visible {
   box-shadow: var(--box-shadow-focus-error);
@@ -77,12 +67,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);
+  font: var(--typography-message-default);
   margin-block-start: var(--spacing-margin-block-start-helper-message);
 }
 
 .pds-textarea__error-message {
-  color: var(--color-error-default);
+  align-items: center;
+  color: var(--color-text-message-error-default);
+  display: flex;
+  gap: var(--spacing-icon-error-message);
 }