Review this generated alert API before adding it to a component library.
Generate one public class per alert token, reject unknown names clearly, keep shared declarations in one place, and use a verified readable foreground without animating color changes.
scss
@use "sass:map";
@use "sass:color";
$alert-colors: (
info: #2563eb,
danger: #b91c1c,
);
@mixin alert($name) {
$color: map.get($alert-colors, $name);
color: color.adjust($color, $lightness: 40%);
background: $color;
padding: 0.75rem;
transition: all 0.2s;
}
.page {
.notifications {
@each $name, $color in $alert-colors {
.alert-#{$name} {
@include alert($name);
}
}
}
}
generated code is illustrative, not from any one model