feat(ld-input-message): add theme colors to icons

screenshot/builds/master.json

@@ -4738,7 +4738,7 @@
     },
     {
       "id": "90a3534d",
-      "image": "f38a4676497ec52a9829ee4e678f6139.png",
+      "image": "c40b75479b747fab1f4f0dc91a26feb5.png",
       "userAgent": "default",
       "desc": "ld-label position renders at the top by default with input message at the bottom",
       "testPath": "./src/liquid/components/ld-label/test/ld-label.e2e.ts",
@@ -4790,7 +4790,7 @@
     },
     {
       "id": "59a24750",
-      "image": "cacd122a3d646a26d43fc349e1a52c2a.png",
+      "image": "b05d4134e3f35fe58a6d1d44c8043176.png",
       "userAgent": "default",
       "desc": "ld-label position renders on the left with input message at the bottom",
       "testPath": "./src/liquid/components/ld-label/test/ld-label.e2e.ts",
@@ -4816,7 +4816,7 @@
     },
     {
       "id": "2aba4500",
-      "image": "284ac51f2a3e7a6b0e4eeab73de9cda9.png",
+      "image": "47b50ab9ebefbe4e7bb68338cb52066d.png",
       "userAgent": "default",
       "desc": "ld-label position renders on the left with left-aligned input message at the bottom",
       "testPath": "./src/liquid/components/ld-label/test/ld-label.e2e.ts",
@@ -4868,7 +4868,7 @@
     },
     {
       "id": "8e808ff3",
-      "image": "486edec90dfc7db1875c255158d5222a.png",
+      "image": "f99aa6b83e089e4ca6c2463399deb187.png",
       "userAgent": "default",
       "desc": "ld-label position renders on the right with input message at the bottom",
       "testPath": "./src/liquid/components/ld-label/test/ld-label.e2e.ts",
@@ -4894,7 +4894,7 @@
     },
     {
       "id": "e32c3429",
-      "image": "e593efc7fd500de27bda173d520a932d.png",
+      "image": "18202831627e0238d8e26f730d746e6f.png",
       "userAgent": "default",
       "desc": "ld-label position renders on the right with left-aligned input message at the bottom",
       "testPath": "./src/liquid/components/ld-label/test/ld-label.e2e.ts",

src/liquid/components/ld-icon/readme.md

@@ -265,6 +265,19 @@ Liquid's icons use the [`currentColor`](https://developer.mozilla.org/en-US/docs
 | `"icon"` | Actual SVG element |
 
 
+## Dependencies
+
+### Used by
+
+ - [ld-input-message](../ld-input-message)
+
+### Graph
+```mermaid
+graph TD;
+  ld-input-message --> ld-icon
+  style ld-icon fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 

src/liquid/components/ld-input-message/ld-input-message.css

@@ -4,7 +4,7 @@
   --ld-input-message-error-text-col: var(--ld-thm-error);
 
   display: inline-flex;
-  align-items: flex-start;
+  align-items: baseline;
   font: var(--ld-typo-body-s);
   line-height: 1.5;
 }

src/liquid/components/ld-input-message/ld-input-message.tsx

@@ -1,5 +1,5 @@
 import '../../components' // type definitions for type checks and intelliSense
-import { Component, h, Prop, getAssetPath, Host } from '@stencil/core'
+import { Component, h, Prop, Host } from '@stencil/core'
 
 /**
  * @virtualProp ref - reference to component
@@ -19,12 +19,11 @@ export class LdInputMessage {
   render() {
     return (
       <Host class={`ld-input-message ld-input-message--${this.mode}`}>
-        <img
-          alt=""
+        <ld-icon
           class="ld-input-message__icon"
+          name={this.mode}
           part="icon"
-          role="presentation"
-          src={getAssetPath(`./assets/${this.mode}.svg`)}
+          size="sm"
         />
         <span aria-live="assertive">
           <slot></slot>

src/liquid/components/ld-input-message/readme.md

@@ -91,6 +91,19 @@ This component is meant to be used in conjunction with the [`ld-input`](componen
 | `"icon"` | Image tag used for the icon |
 
 
+## Dependencies
+
+### Depends on
+
+- [ld-icon](../ld-icon)
+
+### Graph
+```mermaid
+graph TD;
+  ld-input-message --> ld-icon
+  style ld-input-message fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------