feat(ValidationMessage): support all severity colors

packages/css/src/validation-message.css

@@ -1,25 +1,38 @@
 .ds-validation-message {
-  --dsc-validation-message-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill-rule='evenodd' d='M11.15 4.5a.98.98 0 0 1 1.7 0l8.52 14.74a.98.98 0 0 1-.85 1.48H3.48a.98.98 0 0 1-.85-1.48L11.15 4.5ZM12 9.24a1 1 0 0 1 1 1V14a1 1 0 1 1-2 0v-3.75a1 1 0 0 1 1-1ZM12 18a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z' /%3E%3C/svg%3E");
+  /* Default is danger */
+  --dsc-validation-message-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7.74 2.47a.75.75 0 0 1 .53-.22h7.46a.75.75 0 0 1 .53.22l5.27 5.27c.14.14.22.33.22.53v7.46a.75.75 0 0 1-.22.53l-5.27 5.27a.75.75 0 0 1-.53.22H8.27a.75.75 0 0 1-.53-.22l-5.27-5.27a.75.75 0 0 1-.22-.53V8.27a.75.75 0 0 1 .22-.53zm1.29 5.5a.75.75 0 0 0-1.06 1.06L10.94 12l-2.97 2.97a.75.75 0 1 0 1.06 1.06L12 13.06l2.97 2.97a.75.75 0 1 0 1.06-1.06L13.06 12l2.97-2.97a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");
   --dsc-validation-message-icon-size: var(--ds-sizing-7);
   --dsc-validation-message-gap: var(--ds-spacing-2);
+  --dsc-validation-message-color: var(--ds-color-danger-text-subtle);
 
+  color: var(--dsc-validation-message-color);
   margin: 0; /* Reset if rendered with <p> */
   position: relative;
+  padding-inline-start: calc(var(--dsc-validation-message-icon-size) + var(--dsc-validation-message-gap));
 
-  /* Only render error icon if the ValidationMessage actually contains an error message */
-  &:not([data-color='success']):not(:empty) {
-    color: var(--ds-color-danger-text-subtle);
-    padding-inline-start: calc(var(--dsc-validation-message-icon-size) + var(--dsc-validation-message-gap));
+  &::before {
+    background: currentcolor;
+    content: '';
+    height: var(--dsc-validation-message-icon-size);
+    margin-inline: calc((var(--dsc-validation-message-icon-size) + var(--dsc-validation-message-gap)) * -1); /* Using margin instead of top/left to avoid position: relative and to support dir="rtl" */
+    mask: var(--dsc-validation-message-icon-url) center / contain no-repeat;
+    position: absolute;
+    translate: 0 calc((1lh - var(--dsc-validation-message-icon-size)) / 2); /* Center icon to line height */
+    width: var(--dsc-validation-message-icon-size);
+  }
+
+  &[data-color='success'] {
+    --dsc-validation-message-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 21.75a9.75 9.75 0 1 0 0-19.5 9.75 9.75 0 0 0 0 19.5m4.95-12.47a.81.81 0 0 0-1.24-1.05l-5.39 6.36-2.62-2.62a.81.81 0 0 0-1.15 1.15l3.25 3.25a.81.81 0 0 0 1.2-.05z'/%3E%3C/svg%3E");
+    --dsc-validation-message-color: var(--ds-color-success-text-subtle);
+  }
+
+  &[data-color='warning'] {
+    --dsc-validation-message-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.25a.75.75 0 0 1 .66.39l9.52 17.25a.75.75 0 0 1-.65 1.11H2.47a.75.75 0 0 1-.65-1.11l9.52-17.25a.75.75 0 0 1 .66-.39m0 6.5a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-1.5 0v-4a.75.75 0 0 1 .75-.75m-1 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0'/%3E%3C/svg%3E");
+    --dsc-validation-message-color: var(--ds-color-warning-text-subtle);
+  }
 
-    &::before {
-      background: currentcolor;
-      content: '';
-      height: var(--dsc-validation-message-icon-size);
-      margin-inline: calc((var(--dsc-validation-message-icon-size) + var(--dsc-validation-message-gap)) * -1); /* Using margin instead of top/left to avoid position: relative and to support dir="rtl" */
-      mask: var(--dsc-validation-message-icon-url) center / contain no-repeat;
-      position: absolute;
-      translate: 0 calc((1lh - var(--dsc-validation-message-icon-size)) / 2); /* Center icon to line height */
-      width: var(--dsc-validation-message-icon-size);
-    }
+  &[data-color='info'] {
+    --dsc-validation-message-icon-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v16a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75zM11 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0m-1.25 3a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 .75.75v4.75h.75a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75v-4h-.75a.75.75 0 0 1-.75-.75'/%3E%3C/svg%3E");
+    --dsc-validation-message-color: var(--ds-color-info-text-subtle);
   }
 }

packages/react/src/components/ValidationMessage/ValidationMessage.tsx

@@ -13,7 +13,7 @@ export type ValidationMessageProps = MergeRight<
      * Sets color and icon.
      * @default 'danger'
      */
-    'data-color'?: Extract<SeverityColors, 'success' | 'danger'>;
+    'data-color'?: SeverityColors;
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
      * @default false