Revert "Mixins for alerts in BMF Theme" (#6421)

packages/themes/bmf/src/components/alert.scss

@@ -1,9 +1,343 @@
-@import '../mixins/alert.scss';
-
 @layer kol-theme-component {
 	:host {
 		font-family: var(--font-family);
 	}
 
-	@include kol-alert;
+	.kol-alert-wc {
+		border-width: 2px;
+		border-style: solid;
+		border-radius: 5px;
+		display: flex;
+		width: 100%;
+		overflow: unset;
+		border-color: transparent;
+		background-color: white;
+
+		> .heading {
+			display: flex;
+			gap: 0.5em;
+			place-items: center;
+
+			.heading-icon {
+				padding: 0;
+			}
+
+			> div {
+				display: grid;
+				gap: 0;
+			}
+		}
+	}
+
+	.msg {
+		background-color: transparent;
+		align-items: start;
+		border-width: 0 !important;
+
+		> .heading {
+			place-items: flex-start;
+
+			> .kol-icon {
+				place-self: baseline;
+			}
+
+			> .heading-icon {
+				padding-top: 0;
+				place-items: baseline;
+
+				&::part(icon) {
+					line-height: 1.375rem;
+				}
+			}
+
+			> div {
+				display: grid;
+
+				> .kol-heading-wc {
+					line-height: 20px;
+					padding-top: 0.125rem;
+				}
+			}
+
+			.kol-button-wc.close {
+				place-self: center;
+			}
+		}
+
+		&.default {
+			.close .icon {
+				color: var(--color-grey);
+			}
+			.heading > div > .kol-heading-wc {
+				color: var(--color-grey);
+			}
+		}
+
+		&.error {
+			.close .icon {
+				color: var(--color-red);
+			}
+			.heading > div > .kol-heading-wc {
+				color: var(--color-red);
+			}
+		}
+
+		&.info {
+			.close .icon {
+				color: var(--color-midnight);
+			}
+			.heading > div > .kol-heading-wc {
+				color: var(--color-midnight);
+			}
+		}
+
+		&.success {
+			.close .icon {
+				color: var(--color-green);
+			}
+			.heading > div > .kol-heading-wc {
+				color: var(--color-green);
+			}
+		}
+
+		&.warning {
+			.close .icon {
+				color: var(--color-orange);
+			}
+			.heading > div > .kol-heading-wc {
+				color: var(--color-orange);
+			}
+		}
+	}
+
+	.default {
+		border-color: var(--color-grey);
+
+		&.msg .heading-icon {
+			color: var(--color-grey);
+		}
+	}
+
+	.error {
+		border-color: var(--color-red);
+
+		&.msg .heading-icon {
+			color: var(--color-red);
+		}
+		.heading-icon::part(icon)::before {
+			content: 'error';
+		}
+	}
+
+	.info {
+		border-color: var(--color-midnight);
+
+		&.msg .heading-icon {
+			color: var(--color-midnight);
+		}
+		.heading-icon::part(icon)::before {
+			content: 'info';
+		}
+	}
+
+	.success {
+		border-color: var(--color-green);
+
+		&.msg .heading-icon {
+			color: var(--color-green);
+		}
+		.heading-icon::part(icon)::before {
+			content: 'check_circle';
+		}
+	}
+
+	.warning {
+		border-color: var(--color-orange);
+
+		&.msg .heading-icon {
+			color: var(--color-orange);
+		}
+		.heading-icon::part(icon)::before {
+			content: 'warning';
+		}
+	}
+
+	.heading-icon {
+		color: white;
+	}
+
+	.card {
+		border-width: 2px;
+		border-style: solid;
+		filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));
+		flex-direction: column;
+
+		&.hasCloser > .heading {
+			padding-top: 0;
+			padding-bottom: 0;
+			padding-right: 0;
+		}
+
+		> .heading {
+			padding: 0.5rem 1rem;
+
+			> div {
+				width: 100%;
+				min-height: 1.25rem;
+			}
+
+			.heading-icon {
+				justify-self: right;
+			}
+
+			.kol-heading-wc {
+				width: 100%;
+				color: white;
+				display: flex;
+				font-size: 1.25rem;
+				line-height: 1.25rem;
+
+				> * {
+					margin: auto 0;
+				}
+
+				.headline {
+					font-size: 1rem;
+				}
+			}
+
+			.kol-button-wc button {
+				&:focus {
+					outline-color: var(--color-white);
+					outline-offset: -3px;
+					outline-style: solid;
+					outline-width: 3px;
+					transition: outline 0.1s linear;
+				}
+				&:hover {
+					background-color: rgba(32, 32, 32, 0.2);
+				}
+				&:active {
+					background-color: rgba(32, 32, 32, 0.4);
+				}
+				&:hover:focus {
+					background-color: rgba(32, 32, 32, 0.1);
+				}
+			}
+		}
+
+		> .content {
+			padding: 1rem;
+			max-height: 9.5rem;
+			overflow-y: auto;
+		}
+		> div > .content {
+			grid-row: 2;
+			grid-column: 1 / span 2;
+		}
+
+		&.default,
+		&.error,
+		&.info,
+		&.success,
+		&.warning {
+			.close .icon {
+				color: var(--color-white);
+			}
+		}
+		&.default {
+			> .heading,
+			.close {
+				background-color: var(--color-grey);
+			}
+		}
+		&.error {
+			> .heading,
+			.close {
+				background-color: var(--color-red);
+			}
+		}
+		&.info {
+			> .heading,
+			.close {
+				background-color: var(--color-midnight);
+			}
+		}
+		&.success {
+			> .heading,
+			.close {
+				background-color: var(--color-green);
+			}
+		}
+		&.warning {
+			> .heading,
+			.close {
+				background-color: var(--color-orange);
+			}
+		}
+	}
+
+	.error,
+	.info,
+	.success,
+	.warning {
+		.heading-icon {
+			font-size: 1.25rem !important;
+
+			&::part(icon) {
+				font-family: 'Material Symbols Rounded';
+				font-weight: 900;
+				font-variation-settings: 'FILL' 1;
+				height: 1.25rem;
+				width: 1.25rem;
+			}
+		}
+	}
+
+	.close > button {
+		min-width: 44px;
+		color: var(--color-white);
+		min-height: 44px;
+		display: grid;
+		gap: 0.25em;
+		line-height: 1.5rem;
+		font-family: var(--font-family);
+		font-weight: 700;
+		cursor: pointer;
+		border-radius: 1.5em;
+		border-style: solid;
+		border-width: 2px;
+		font-size: 1rem;
+		align-items: center;
+		padding: 8px;
+		justify-content: center;
+		font-style: normal;
+		text-align: center;
+		width: inherit;
+		transition-duration: 0.5s;
+		transition-property: background-color, color, border-color;
+		background-color: rgba(0, 0, 0, 0);
+		border-color: rgba(0, 0, 0, 0);
+
+		&:active {
+			box-shadow: none;
+			outline: none;
+		}
+
+		.kol-icon {
+			display: flex;
+			width: 1em;
+			height: 1em;
+			font-size: 1rem;
+
+			&::part(icon) {
+				font-family: 'Material Symbols Rounded';
+				font-weight: 900;
+
+				&::before {
+					content: 'close';
+				}
+			}
+		}
+	}
 }

packages/themes/bmf/src/components/input-checkbox.scss

@@ -1,5 +1,3 @@
-@import '../mixins/alert.scss';
-
 @layer kol-theme-component {
 	:host {
 		font-family: var(--font-family);
@@ -674,6 +672,4 @@
 		box-shadow: none;
 		outline: none;
 	}
-
-	@include kol-alert;
 }