alert ready

Author: BF150

packages/themes/ecl/src/ecl-ec/@shared/input-core.scss

@@ -5,7 +5,7 @@
 @use '../mixins/input-container' as *;
 
 @layer kol-theme-component {
-	@include kol-alert-theme;
+	@include alert;
 	@include kol-form-field-order-theme;
 	@include kol-form-field-theme;
 	@include kol-input-container-theme;

packages/themes/ecl/src/ecl-ec/components/alert.scss

@@ -1,5 +1,5 @@
 @use '../mixins/alert' as *;
 
 @layer kol-theme-component {
-	@include kol-alert-theme;
+	@include alert;
 }

packages/themes/ecl/src/ecl-ec/components/combobox.scss

@@ -9,7 +9,7 @@ $option-height: to-rem(40);
 $visible-options: 5;
 
 @layer kol-theme-component {
-	@include kol-alert-theme;
+	@include alert;
 	@include kol-custom-suggestions-option-theme($option-height);
 	@include kol-custom-suggestions-options-group-theme($option-height, $visible-options);
 	@include kol-custom-suggestions-toggle-theme;

packages/themes/ecl/src/ecl-ec/components/form.scss

@@ -4,7 +4,7 @@
 
 @layer kol-theme-component {
 	@include kol-link('kol-link');
-	@include kol-alert-theme;
+	@include alert;
 
 	.kol-form {
 		width: 100%;

packages/themes/ecl/src/ecl-ec/components/input-checkbox.scss

@@ -3,7 +3,7 @@
 @use '../mixins/required' as *;
 
 @layer kol-theme-component {
-	@include kol-alert-theme;
+	@include alert;
 
 	.kol-form-field {
 		color: var(--color-grey);

packages/themes/ecl/src/ecl-ec/components/input-radio.scss

@@ -4,7 +4,7 @@
 @use '../mixins/required' as *;
 
 @layer kol-theme-component {
-	@include kol-alert-theme;
+	@include alert;
 
 	/**
 	 * normalizes the layout of form elements.

packages/themes/ecl/src/ecl-ec/components/single-select.scss

@@ -9,7 +9,7 @@ $option-height: to-rem(40);
 $visible-options: 5;
 
 @layer kol-theme-component {
-	@include kol-alert-theme;
+	@include alert;
 	@include kol-custom-suggestions-option-theme($option-height);
 	@include kol-custom-suggestions-options-group-theme($option-height, $visible-options);
 	@include kol-custom-suggestions-toggle-theme;

packages/themes/ecl/src/ecl-ec/components/toast-container.scss

@@ -10,7 +10,7 @@
 	}
 
 	.kol-toast-item {
-		@include kol-alert-theme;
+		@include alert;
 		background-color: #fff;
 		display: block;
 		margin-top: to-rem(16);

packages/themes/ecl/src/ecl-ec/mixins/alert.scss

@@ -1,89 +1,80 @@
 @use '../../mixins/to-rem' as *;
+@use './icon' as *;
+@use './button' as *;
 
 @mixin kol-alert($color: null) {
 	color: var($color);
-	margin-left: calc(-1 * var(--spacing-2xs));
+	margin-left: calc(-1 * var(--ecl-spacing-2xs));
 
 	font-size: 0.875em;
 }
 
-@mixin kol-alert-theme {
+@mixin alert {
 	.kol-alert {
+		@include icons();
+		@include button('kol-button');
 		$root: &;
 
 		&--variant-msg {
-			border: none;
+			.kol-alert__icon {
+				margin: var(--ecl-spacing-2xs);
+
+				font-size: 1.5em;
+			}
 		}
 
 		&--variant-card {
-			border-style: solid;
-			padding-top: to-rem(24);
-			padding-bottom: to-rem(24);
-			border-width: 2px;
-			padding-inline-end: to-rem(8);
-			padding-inline-start: to-rem(24);
+			border: solid 1px var(--ecl-color-neutral);
+			border-inline-start: 4px solid var(--alert-accent-color);
+			padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);
+			background-color: var(--ecl-color-neutral-20);
+
+			.kol-alert__icon {
+				font-size: to-rem(32);
+				margin-right: var(--ecl-spacing-xs);
+			}
 		}
 
 		&--type-default {
-			--alert-accent-color: var(--color-grey);
+			--alert-accent-color: var(--ecl-color-dark);
 		}
 
 		&--type-error {
-			--alert-accent-color: var(--color-red);
+			--alert-accent-color: var(--ecl-color-error);
 		}
 
 		&--type-info {
-			--alert-accent-color: var(--color-blue);
+			--alert-accent-color: var(--ecl-color-info);
 		}
 
 		&--type-success {
-			--alert-accent-color: var(--color-green);
+			--alert-accent-color: var(--ecl-color-success);
 		}
 
 		&--type-warning {
-			--alert-accent-color: var(--color-orange);
+			--alert-accent-color: var(--ecl-color-warning);
 		}
 
-		&__container {
-			background-color: var(--color-white);
-
-			@at-root #{$root}--variant-card & {
-				gap: to-rem(8);
-			}
+		&__icon {
+			color: var(--alert-accent-color);
 		}
 
-		&__container-content {
-			@at-root #{$root}--variant-msg & {
-				padding: var(--spacing-2xs);
-			}
+		&__heading {
+			font-size: var(--ecl-font-size-l);
+			line-height: var(--ecl-line-height-l);
 		}
 
 		&__closer {
 			.kol-button {
-				color: var(--alert-accent-color);
-			}
+				@include ghost-button();
+				height: var(--a11y-min-size);
 
-			.kol-icon {
-				@at-root #{$root}--variant-card & {
-					font-size: to-rem(32);
+				.kol-icon {
+					font-size: to-rem(24);
 				}
 			}
 		}
 
-		&__icon {
-			color: var(--alert-accent-color);
-
-			@at-root #{$root}--variant-msg & {
-				margin: var(--spacing-2xs);
-
-				font-size: 1.5em;
-			}
-
-			@at-root #{$root}--variant-card & {
-				font-size: to-rem(32);
-			}
-		}
-
 		&__content {
 			@at-root #{$root}--variant-card & {
 				margin-left: to-rem(40);

packages/themes/ecl/src/ecl-ec/mixins/button.scss

@@ -109,8 +109,11 @@
 			padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);
 			border-width: var(--button-border-width);
 
-			font-weight: var(--font-weight-bold);
 			line-height: 1.2;
+
+			&.kol-span--hide-label {
+				padding: var(--ecl-spacing-xs);
+			}
 		}
 	}
 }