@pine-ds/core 2.14.0 → 2.15.0

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

@@ -1,18 +1,6 @@
-:host {
-  --color-background-default: var(--pine-color-grey-200);
-  --spacing-offset-xxs: var(--pine-spacing-050);
-  --spacing-offset-xs: var(--pine-spacing-100);
-  --spacing-offset-sm: var(--pine-spacing-200);
-  --spacing-offset-md: var(--pine-spacing-300);
-  --spacing-offset-lg: var(--pine-spacing-450);
-  --spacing-offset-xxl: var(--pine-spacing-800);
-}
-
 .pds-divider {
-  background: var(--color-background-default);
-  border: 0;
+  background: var(--pine-color-border);
   display: flex;
-  height: 1px;
   margin: 0;
   width: 100%;
 }
@@ -23,66 +11,66 @@
 }
 
 .pds-divider--offset-xxs {
-  margin: 0 calc(var(--spacing-offset-xxs) * -1);
-  padding: 0 var(--spacing-offset-xxs);
+  margin: 0 calc(var(--pine-dimension-2xs) * -1);
+  padding: 0 var(--pine-dimension-2xs);
 }
 .pds-divider--offset-xxs.pds-divider--vertical {
-  margin: calc(var(--spacing-offset-xxs) * -1) 0;
-  padding: var(--spacing-offset-xxs) 0;
+  margin: calc(var(--pine-dimension-2xs) * -1) 0;
+  padding: var(--pine-dimension-2xs) 0;
 }
 
 .pds-divider--offset-xs {
-  margin: 0 calc(var(--spacing-offset-xs) * -1);
-  padding: 0 var(--spacing-offset-xs);
+  margin: 0 calc(var(--pine-dimension-xs) * -1);
+  padding: 0 var(--pine-dimension-xs);
 }
 .pds-divider--offset-xs.pds-divider--vertical {
-  margin: calc(var(--spacing-offset-xs) * -1) 0;
-  padding: var(--spacing-offset-xs) 0;
+  margin: calc(var(--pine-dimension-xs) * -1) 0;
+  padding: var(--pine-dimension-xs) 0;
 }
 
 .pds-divider--offset-sm {
-  margin: 0 calc(var(--spacing-offset-sm) * -1);
-  padding: 0 var(--spacing-offset-sm);
+  margin: 0 calc(var(--pine-dimension-sm) * -1);
+  padding: 0 var(--pine-dimension-sm);
 }
 .pds-divider--offset-sm.pds-divider--vertical {
-  margin: calc(var(--spacing-offset-sm) * -1) 0;
-  padding: var(--spacing-offset-sm) 0;
+  margin: calc(var(--pine-dimension-sm) * -1) 0;
+  padding: var(--pine-dimension-sm) 0;
 }
 
 .pds-divider--offset-md {
-  margin: 0 calc(var(--spacing-offset-md) * -1);
-  padding: 0 var(--spacing-offset-md);
+  margin: 0 calc(var(--pine-dimension-md) * -1);
+  padding: 0 var(--pine-dimension-md);
 }
 .pds-divider--offset-md.pds-divider--vertical {
-  margin: calc(var(--spacing-offset-md) * -1) 0;
-  padding: var(--spacing-offset-md) 0;
+  margin: calc(var(--pine-dimension-md) * -1) 0;
+  padding: var(--pine-dimension-md) 0;
 }
 
 .pds-divider--offset-lg {
-  margin: 0 calc(var(--spacing-offset-lg) * -1);
-  padding: 0 var(--spacing-offset-lg);
+  margin: 0 calc(var(--pine-dimension-lg) * -1);
+  padding: 0 var(--pine-dimension-lg);
 }
 .pds-divider--offset-lg.pds-divider--vertical {
-  margin: calc(var(--spacing-offset-lg) * -1) 0;
-  padding: var(--spacing-offset-lg) 0;
+  margin: calc(var(--pine-dimension-lg) * -1) 0;
+  padding: var(--pine-dimension-lg) 0;
 }
 
 .pds-divider--offset-xl {
-  margin: 0 calc(var(--spacing-offset-xl) * -1);
-  padding: 0 var(--spacing-offset-xl);
+  margin: 0 calc(var(--pine-dimension-xl) * -1);
+  padding: 0 var(--pine-dimension-xl);
 }
 .pds-divider--offset-xl.pds-divider--vertical {
-  margin: calc(var(--spacing-offset-xl) * -1) 0;
-  padding: var(--spacing-offset-xl) 0;
+  margin: calc(var(--pine-dimension-xl) * -1) 0;
+  padding: var(--pine-dimension-xl) 0;
 }
 
 .pds-divider--offset-xxl {
-  margin: 0 calc(var(--spacing-offset-xxl) * -1);
-  padding: 0 var(--spacing-offset-xxl);
+  margin: 0 calc(var(--pine-dimension-2xl) * -1);
+  padding: 0 var(--pine-dimension-2xl);
 }
 .pds-divider--offset-xxl.pds-divider--vertical {
-  margin: calc(var(--spacing-offset-xxl) * -1) 0;
-  padding: var(--spacing-offset-xxl) 0;
+  margin: calc(var(--pine-dimension-2xl) * -1) 0;
+  padding: var(--pine-dimension-2xl) 0;
 }
 
 @media (max-width: 767px) {

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

@@ -17,18 +17,18 @@ export class PdsDivider {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: 'cb64d56832d159848ac7d45959b5f1d9874715d7', id: this.componentId }, h("hr", { key: '10a7b11448b031b24174fe9278ac05504cf8523c', class: this.classNames() })));
+        return (h(Host, { key: '655b579ae9137c8a6c663bc57928a0825d054d2d', id: this.componentId }, h("hr", { key: 'dcbc46f0b0bfa8553b577684775ab631022f73a0', class: this.classNames() })));
     }
     static get is() { return "pds-divider"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["../../global/styles/base.scss", "pds-divider.scss"]
+            "$": ["pds-divider.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["../../global/styles/base.css", "pds-divider.css"]
+            "$": ["pds-divider.css"]
         };
     }
     static get properties() {

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

@@ -1 +1 @@
-{"version":3,"file":"pds-divider.js","sourceRoot":"","sources":["../../../src/components/pds-divider/pds-divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,UAAU;;;;wBAeF,KAAK;;IAEhB,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,aAAa,CAAC,CAAC;QAEnC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QAC3C,CAAC;QAED,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,MAAM,eAAe,GAAG,sBAAsB,GAAG,IAAI,CAAC,MAAM,CAAC;YAC7D,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACnC,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,EAAE,EAAE,IAAI,CAAC,WAAW;YACxB,2DAAI,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,GAAI,CAC3B,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'pds-divider',\n  styleUrls: ['../../global/styles/base.scss', 'pds-divider.scss'],\n  shadow: true,\n})\nexport class PdsDivider {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Adds offset margin/padding to expand the width (horizontal) or the height (vertical) of divider.\n   */\n  @Prop() offset: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';\n\n  /**\n   * Sets divider to display vertically.\n   * @defaultValue false\n   */\n  @Prop() vertical = false;\n\n  private classNames() {\n    const classNames = ['pds-divider'];\n\n    if (this.vertical) {\n      classNames.push('pds-divider--vertical');\n    }\n\n    if (this.offset) {\n      const offsetClassName = 'pds-divider--offset-' + this.offset;\n      classNames.push(offsetClassName);\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n    return (\n      <Host id={this.componentId}>\n        <hr class={this.classNames()} />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-divider.js","sourceRoot":"","sources":["../../../src/components/pds-divider/pds-divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,UAAU;;;;wBAeF,KAAK;;IAEhB,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,aAAa,CAAC,CAAC;QAEnC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QAC3C,CAAC;QAED,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,MAAM,eAAe,GAAG,sBAAsB,GAAG,IAAI,CAAC,MAAM,CAAC;YAC7D,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACnC,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,EAAE,EAAE,IAAI,CAAC,WAAW;YACxB,2DAAI,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,GAAI,CAC3B,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'pds-divider',\n  styleUrls: ['pds-divider.scss'],\n  shadow: true,\n})\nexport class PdsDivider {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Adds offset margin/padding to expand the width (horizontal) or the height (vertical) of divider.\n   */\n  @Prop() offset: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';\n\n  /**\n   * Sets divider to display vertically.\n   * @defaultValue false\n   */\n  @Prop() vertical = false;\n\n  private classNames() {\n    const classNames = ['pds-divider'];\n\n    if (this.vertical) {\n      classNames.push('pds-divider--vertical');\n    }\n\n    if (this.offset) {\n      const offsetClassName = 'pds-divider--offset-' + this.offset;\n      classNames.push(offsetClassName);\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n    return (\n      <Host id={this.componentId}>\n        <hr class={this.classNames()} />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,6 +1,6 @@
 :host {
   /**
-   * @prop --image-aspect-ratio: The image's aspect ratio.
+   * @prop --dimension-aspect-ratio: The image's aspect ratio.
   */
   --dimension-aspect-ratio: auto;
   display: inline-block;

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

@@ -11,20 +11,20 @@ export class PdsImage {
         this.width = undefined;
     }
     render() {
-        return (h(Host, { key: 'b74f7f59eadec75c48052e0760ef07ea0b5eb848', class: {
+        return (h(Host, { key: '784f2478acc28f043613c4c8fa67b5bef85820b1', class: {
                 'pds-image': true,
-            }, id: this.componentId }, h("img", { key: '0e993e6d4cb70d73562cbcd3cf193080406adf7a', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
+            }, id: this.componentId }, h("img", { key: '766a8230a6ea0ae45746fae832206785f963d215', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
     }
     static get is() { return "pds-image"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["../../global/styles/base.scss", "pds-image.scss"]
+            "$": ["pds-image.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["../../global/styles/base.css", "pds-image.css"]
+            "$": ["pds-image.css"]
         };
     }
     static get properties() {

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

@@ -1 +1 @@
-{"version":3,"file":"pds-image.js","sourceRoot":"","sources":["../../../src/components/pds-image/pds-image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,QAAQ;;mBAOJ,EAAE;;;uBAkBoB,OAAO;;;;;;IA2B5C,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;aAClB,EACD,EAAE,EAAE,IAAI,CAAC,WAAW;YAEpB,4DACE,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-image',\n  styleUrls: ['../../global/styles/base.scss', 'pds-image.scss'],\n  shadow: true,\n})\nexport class PdsImage {\n  /**\n   * The image's alt tag. If none is provided,\n   * it will default to an empty string, which is desired for\n   * decorative images.\n   * @defaultValue ''\n   */\n  @Prop() alt? = '';\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * The height of the image in pixels. Setting this will\n   * devote space in the layout to prevent layout\n   * shifts when the image is loaded.\n   */\n  @Prop() height?: number;\n\n  /**\n   * Indicates how the browser should load the image.\n   * @defaultValue eager\n   */\n  @Prop() loading?: 'eager' | 'lazy' = 'eager';\n\n  /**\n   * Determines the intended display size of an image\n   * within certain breakpoints. Has no effect if `srcset`\n   * is not set or value has no width descriptor.\n   */\n  @Prop() sizes?: string;\n\n  /**\n   * The image's source.\n   */\n  @Prop() src: string;\n\n  /**\n   * A set of image sources for the browser to use\n   * for responsiveness.\n   */\n  @Prop() srcset?: string\n\n  /**\n   * The width of the image in pixels. Setting this will\n   * devote space in the layout to prevent layout\n   * shifts when the image is loaded.\n   */\n  @Prop() width?: number;\n\n  render() {\n    return (\n      <Host\n        class={{\n          'pds-image': true,\n        }}\n        id={this.componentId}\n      >\n        <img\n          alt={this.alt}\n          height={this.height}\n          loading={this.loading}\n          sizes={this.sizes}\n          src={this.src}\n          srcset={this.srcset}\n          width={this.width}\n        />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-image.js","sourceRoot":"","sources":["../../../src/components/pds-image/pds-image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,QAAQ;;mBAOJ,EAAE;;;uBAkBoB,OAAO;;;;;;IA2B5C,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;aAClB,EACD,EAAE,EAAE,IAAI,CAAC,WAAW;YAEpB,4DACE,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-image',\n  styleUrls: ['pds-image.scss'],\n  shadow: true,\n})\nexport class PdsImage {\n  /**\n   * The image's alt tag. If none is provided,\n   * it will default to an empty string, which is desired for\n   * decorative images.\n   * @defaultValue ''\n   */\n  @Prop() alt? = '';\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * The height of the image in pixels. Setting this will\n   * devote space in the layout to prevent layout\n   * shifts when the image is loaded.\n   */\n  @Prop() height?: number;\n\n  /**\n   * Indicates how the browser should load the image.\n   * @defaultValue eager\n   */\n  @Prop() loading?: 'eager' | 'lazy' = 'eager';\n\n  /**\n   * Determines the intended display size of an image\n   * within certain breakpoints. Has no effect if `srcset`\n   * is not set or value has no width descriptor.\n   */\n  @Prop() sizes?: string;\n\n  /**\n   * The image's source.\n   */\n  @Prop() src: string;\n\n  /**\n   * A set of image sources for the browser to use\n   * for responsiveness.\n   */\n  @Prop() srcset?: string\n\n  /**\n   * The width of the image in pixels. Setting this will\n   * devote space in the layout to prevent layout\n   * shifts when the image is loaded.\n   */\n  @Prop() width?: number;\n\n  render() {\n    return (\n      <Host\n        class={{\n          'pds-image': true,\n        }}\n        id={this.componentId}\n      >\n        <img\n          alt={this.alt}\n          height={this.height}\n          loading={this.loading}\n          sizes={this.sizes}\n          src={this.src}\n          srcset={this.srcset}\n          width={this.width}\n        />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-input/input-interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=input-interface.js.map

package/dist/collection/components/pds-input/input-interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-interface.js","sourceRoot":"","sources":["../../../src/components/pds-input/input-interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface InputChangeEventDetail {\n  value?: string | number | null;\n  event?: Event;\n}\n\nexport interface InputInputEventDetail {\n  value?: string | number | null;\n  event?: Event;\n}\n\nexport interface InputEvent <T = InputChangeEventDetail> extends CustomEvent {\n  detai: T;\n  target: HTMLPdsInputElement;\n}\n"]}

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

@@ -1,100 +1,78 @@
 :host {
-  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);
-  --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-red-300);
-  --color-background-disabled: var(--pine-color-grey-100);
-  --color-background-error: var(--pine-color-red-050);
-  --color-border-active: var(--pine-color-grey-400);
-  --color-border-default: var(--pine-color-grey-300);
-  --color-border-disabled: var(--pine-color-grey-200);
-  --color-border-error: var(--pine-color-red-600);
-  --color-border-hover: var(--pine-color-grey-500);
-  --color-text-default: var(--pine-color-grey-950);
-  --color-text-disabled: var(--pine-color-grey-600);
-  --color-text-error: var(--pine-color-red-600);
-  --color-text-placeholder: var(--pine-color-grey-600);
-  --color-text-placeholder-disabled: var(--pine-color-grey-400);
-  --font-size-helper-message: var(--pine-font-size-085);
-  --font-size-input-field: var(--pine-font-size-100);
-  --font-size-label: var(--pine-font-size-100);
-  --font-weight-helper-message: var(--pine-font-weight-normal);
-  --font-weight-input-field: var(--pine-font-weight-normal);
-  --font-weight-label: var(--pine-font-weight-medium);
-  --line-height-label: var(--pine-line-height-150);
-  --line-height-helper-message: var(--pine-line-height-125);
-  --line-height-input-field: var(--pine-line-height-150);
-  --spacing-field-padding-block: var(--pine-spacing-100);
-  --spacing-input-field-padding-inline: var(--pine-spacing-200);
-  --spacing-label-margin-block-end: var(--pine-spacing-100);
-  --spacing-margin-top-helper-message: var(--pine-spacing-100);
-  --spacing-icon-error-message: var(--pine-spacing-050);
+  --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]) input {
+  background-color: var(--pine-color-background-container-disabled);
+  color: var(--pine-color-text-readonly);
+}
+
 .pds-input {
   display: flex;
   flex-direction: column;
 }
 
 label {
-  font-size: var(--font-size-label);
-  font-weight: var(--font-weight-label);
-  line-height: var(--line-height-label);
-  margin-block-end: var(--spacing-label-margin-block-end);
+  color: var(--pine-color-text-label);
+  font-weight: var(--pine-font-weight-medium);
 }
 
 input {
-  border: 1px solid var(--color-border-default);
+  border: 1px solid var(--pine-color-border);
   border-radius: 10px;
-  font-size: var(--font-size-input-field);
-  font-weight: var(--font-weight-input-field);
-  line-height: var(--line-height-input-field);
-  padding: var(--spacing-field-padding-block) var(--spacing-input-field-padding-inline);
+  color: var(--pine-color-text-active);
+  font-size: var(--pine-font-size);
+  font-weight: var(--pine-font-weight-regular);
+  line-height: var(--pine-line-height-body);
+  padding: var(--pine-dimension-xs) var(--pine-dimension-sm);
   /* stylelint-disable */
   /* stylelint-enable */
 }
 input:disabled {
-  background-color: var(--color-background-disabled);
-  border-color: var(--color-border-disabled);
-  color: var(--color-text-disabled);
+  background-color: var(--pine-color-background-container-disabled);
+  border-color: var(--pine-color-border-disabled);
+  color: var(--pine-color-text-disabled);
   cursor: not-allowed;
   /* stylelint-disable */
   /* stylelint-enable */
 }
 input:disabled::-webkit-input-placeholder {
-  color: var(--color-text-placeholder-disabled);
+  color: var(--pine-color-text-placeholder-disabled);
 }
 input:disabled::-moz-placeholder {
-  color: var(--color-text-placeholder-disabled);
+  color: var(--pine-color-text-placeholder-disabled);
 }
 input:disabled::-moz-placeholder {
-  color: var(--color-text-placeholder-disabled);
+  color: var(--pine-color-text-placeholder-disabled);
 }
 input:disabled:-ms-input-placeholder {
-  color: var(--color-text-placeholder-disabled);
+  color: var(--pine-color-text-placeholder-disabled);
 }
 input:hover {
-  border-color: var(--color-border-hover);
+  border-color: var(--pine-color-border-hover);
 }
 input:focus-visible {
-  border-color: var(--color-border-active);
+  border-color: var(--pine-color-border-active);
   box-shadow: var(--box-shadow-focus);
   outline: none;
 }
 input::-webkit-input-placeholder {
-  color: var(--color-text-placeholder);
+  color: var(--pine-color-text-placeholder);
 }
 input::-moz-placeholder {
-  color: var(--color-text-placeholder);
+  color: var(--pine-color-text-placeholder);
 }
 input::-moz-placeholder {
-  color: var(--color-text-placeholder);
+  color: var(--pine-color-text-placeholder);
 }
 input:-ms-input-placeholder {
-  color: var(--color-text-placeholder);
+  color: var(--pine-color-text-placeholder);
 }
 input:has(~ .pds-input__error-message) {
-  background-color: var(--color-background-error);
-  border-color: var(--color-border-error);
+  background-color: var(--pine-input-color-background-danger);
+  border-color: var(--pine-color-border-danger);
 }
 input:has(~ .pds-input__error-message):focus-visible {
   box-shadow: var(--box-shadow-focus-error);
@@ -103,17 +81,14 @@ input:has(~ .pds-input__error-message):focus-visible {
 
 .pds-input__error-message,
 .pds-input__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(--pine-typography-body-sm-medium);
   margin-block-end: 0;
-  margin-block-start: var(--spacing-margin-top-helper-message);
+  margin-block-start: var(--pine-dimension-xs);
 }
 
 .pds-input__error-message {
   align-items: center;
-  color: var(--color-text-error);
+  color: var(--pine-color-text-message-danger);
   display: flex;
-  font-size: var(--font-size-helper-message);
-  gap: var(--spacing-icon-error-message);
+  gap: var(--pine-dimension-2xs);
 }