Update error list to use Alert-Card variant in form

Refs: #7035
public-ui · Nov 8, 2024 · cb01d57 · cb01d57
1 parent c4d1706
commit cb01d57
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/packages/components/src/components/form/shadow.tsx b/packages/components/src/components/form/shadow.tsx
@@ -53,8 +53,7 @@ export class KolForm implements FormAPI {
 
 	private renderErrorList(errorList?: ErrorListPropType[]): JSX.Element {
 		return (
-			<KolAlertFc type="error" variant="msg">
-				{translate('kol-error-list-message')}
+			<KolAlertFc type="error" variant="card" label={translate('kol-error-list-message')}>
 				<nav aria-label={translate('kol-error-list')}>
 					<ul>
 						{errorList?.map((error, index) => (

diff --git a/packages/themes/default/src/components/form.scss b/packages/themes/default/src/components/form.scss
@@ -1,16 +1,25 @@
 @import '../mixins/alert-wc';
 @import '../mixins/indented-text';
 @import '../mixins/link';
+@import '../mixins/rem';
 
 @layer kol-theme-component {
 	:host {
 		font-family: var(--font-family);
 		@include kol-alert-theme;
+
+		.card > .content ul {
+			color: var(--color-danger);
+		}
 	}
 
 	.kol-link-wc {
 		@include kol-link;
 		display: inline-block;
+
+		:is(a, button) {
+			color: var(--color-danger);
+		}
 	}
 
 	.mandatory-fields-hint {