sdga-ui 1.0.6 → 1.0.7

package/theme/customizations/_alerts.scss

@@ -1,7 +1,88 @@
 // Alert Customizations - SDGA Custom Enhancements
+// Following Bootstrap 5.3 recommended practices
 
 // ============================================
-// ALERT VARIANTS
+// ALERT VARIANTS - Using Sass map and @each loop
+// ============================================
+
+// Define alert color variants
+$alert-variants: (
+  "primary": (
+    border-color: rgba($primary-600, 0.7),
+    bg: $primary-25,
+    border: $primary-200,
+    icon-bg: $primary-50,
+    icon-color: $primary-700,
+    title-color: $primary-700,
+    mobile-border-top: $primary-600
+  ),
+  "lavender": (
+    border-color: rgba($lavender-600, 0.7),
+    bg: $lavender-25,
+    border: $lavender-200,
+    icon-bg: $lavender-50,
+    icon-color: $lavender-700,
+    title-color: $lavender-700,
+    mobile-border-top: rgba($lavender-600, 0.7)
+  ),
+  "neutral": (
+    border-color: rgba($neutral-300, 0.7),
+    bg: $neutral-25,
+    border: $neutral-300,
+    icon-bg: $neutral-50,
+    icon-color: $black,
+    title-color: $black,
+    mobile-border-top: rgba($neutral-300, 0.7)
+  ),
+  "success": (
+    border-color: rgba($success-600, 0.7),
+    bg: $success-25,
+    border: $success-200,
+    icon-bg: $success-50,
+    icon-color: $success-700,
+    title-color: $success-700,
+    mobile-border-top: rgba($success-600, 0.7)
+  ),
+  "danger": (
+    border-color: rgba($danger-600, 0.7),
+    bg: $danger-25,
+    border: $danger-200,
+    icon-bg: $danger-50,
+    icon-color: $danger-700,
+    title-color: $danger-700,
+    mobile-border-top: rgba($danger-600, 0.7)
+  ),
+  "warning": (
+    border-color: rgba($warning-600, 0.7),
+    bg: $warning-25,
+    border: $warning-200,
+    icon-bg: $warning-50,
+    icon-color: $warning-700,
+    title-color: $warning-700,
+    mobile-border-top: rgba($warning-600, 0.7)
+  ),
+  "info": (
+    border-color: rgba($info-600, 0.7),
+    bg: $info-25,
+    border: $info-200,
+    icon-bg: $info-50,
+    icon-color: $info-700,
+    title-color: $info-700,
+    mobile-border-top: rgba($info-600, 0.7)
+  ),
+  "secondary": (
+    border-color: rgba($secondary-200, 0.7),
+    bg: $secondary-25,
+    border: $secondary-200,
+    icon-bg: $secondary-50,
+    icon-color: $black,
+    title-color: $black,
+    mobile-border-top: rgba($secondary-200, 0.7)
+  )
+);
+
+// ============================================
+// ALERT BASE STYLES
 // ============================================
 
 .alert {
@@ -52,76 +133,16 @@
     padding-inline-start: $alert-padding-x;
   }
 
-  &.alert-primary {
-    border-inline-start-color: rgba($primary-600, 0.7);
-    --#{$prefix}alert-bg: #{$primary-25};
-    --#{$prefix}border-color: #{$primary-200};
-    --#{$prefix}alert-icon-bg: #{$primary-50};
-    --#{$prefix}alert-icon-color: #{$primary-700};
-    --#{$prefix}alert-title-color: #{$primary-700};
-  }
-
-  &.alert-lavender {
-    border-inline-start-color: rgba($lavender-600, 0.7);
-    --#{$prefix}alert-bg: #{$lavender-25};
-    --#{$prefix}border-color: #{$lavender-200};
-    --#{$prefix}alert-icon-bg: #{$lavender-50};
-    --#{$prefix}alert-icon-color: #{$lavender-700};
-    --#{$prefix}alert-title-color: #{$lavender-700};
-  }
-
-  &.alert-neutral {
-    border-inline-start-color: rgba($neutral-300, 0.7);
-    --#{$prefix}alert-bg: #{$neutral-25};
-    --#{$prefix}border-color: #{$neutral-300};
-    --#{$prefix}alert-icon-bg: #{$neutral-50};
-    --#{$prefix}alert-icon-color: #{$black};
-    --#{$prefix}alert-title-color: #{$black};
-  }
-
-  &.alert-success {
-    border-inline-start-color: rgba($success-600, 0.7);
-    --#{$prefix}alert-bg: #{$success-25};
-    --#{$prefix}border-color: #{$success-200};
-    --#{$prefix}alert-icon-bg: #{$success-50};
-    --#{$prefix}alert-icon-color: #{$success-700};
-    --#{$prefix}alert-title-color: #{$success-700};
-  }
-
-  &.alert-danger {
-    border-inline-start-color: rgba($danger-600, 0.7);
-    --#{$prefix}alert-bg: #{$danger-25};
-    --#{$prefix}border-color: #{$danger-200};
-    --#{$prefix}alert-icon-bg: #{$danger-50};
-    --#{$prefix}alert-icon-color: #{$danger-700};
-    --#{$prefix}alert-title-color: #{$danger-700};
-  }
-
-  &.alert-warning {
-    border-inline-start-color: rgba($warning-600, 0.7);
-    --#{$prefix}alert-bg: #{$warning-25};
-    --#{$prefix}border-color: #{$warning-200};
-    --#{$prefix}alert-icon-bg: #{$warning-50};
-    --#{$prefix}alert-icon-color: #{$warning-700};
-    --#{$prefix}alert-title-color: #{$warning-700};
-  }
-
-  &.alert-info {
-    border-inline-start-color: rgba($info-600, 0.7);
-    --#{$prefix}alert-bg: #{$info-25};
-    --#{$prefix}border-color: #{$info-200};
-    --#{$prefix}alert-icon-bg: #{$info-50};
-    --#{$prefix}alert-icon-color: #{$info-700};
-    --#{$prefix}alert-title-color: #{$info-700};
-  }
-
-  &.alert-secondary {
-    border-inline-start-color: rgba($secondary-200, 0.7);
-    --#{$prefix}alert-bg: #{$secondary-25};
-    --#{$prefix}border-color: #{$secondary-200};
-    --#{$prefix}alert-icon-bg: #{$secondary-50};
-    --#{$prefix}alert-icon-color: #{$black};
-    --#{$prefix}alert-title-color: #{$black};
+  // Generate alert variant classes
+  @each $name, $colors in $alert-variants {
+    &.alert-#{$name} {
+      border-inline-start-color: map-get($colors, border-color);
+      --#{$prefix}alert-bg: #{map-get($colors, bg)};
+      --#{$prefix}border-color: #{map-get($colors, border)};
+      --#{$prefix}alert-icon-bg: #{map-get($colors, icon-bg)};
+      --#{$prefix}alert-icon-color: #{map-get($colors, icon-color)};
+      --#{$prefix}alert-title-color: #{map-get($colors, title-color)};
+    }
   }
 
   &.alert-side {
@@ -146,49 +167,16 @@
     border-inline-start-width: $alert-border-width;
     border-top-width: 0.5rem;
 
-    &.alert-primary {
-    border-inline-start-color: $alert-border-color;
-    border-top-color: $primary-600;
+    @each $name, $colors in $alert-variants {
+      &.alert-#{$name} {
+        border-inline-start-color: $alert-border-color;
+        border-top-color: map-get($colors, mobile-border-top);
 
-    &.alert-side {
-      border-top-color: rgba($primary-600, 0.7);
+        &.alert-side {
+          border-top-color: map-get($colors, border-color);
+        }
+      }
     }
-  }
-
-  &.alert-lavender {
-    border-inline-start-color: $alert-border-color;
-    border-top-color: rgba($lavender-600, 0.7);
-  }
-
-  &.alert-neutral {
-    border-inline-start-color: $alert-border-color;
-    border-top-color: rgba($neutral-300, 0.7);
-  }
-
-  &.alert-success {
-    border-inline-start-color: $alert-border-color;
-    border-top-color: rgba($success-600, 0.7);
-  }
-
-  &.alert-danger {
-    border-inline-start-color: $alert-border-color;
-    border-top-color: rgba($danger-600, 0.7);
-  }
-
-  &.alert-warning {
-    border-inline-start-color: $alert-border-color;
-    border-top-color: rgba($warning-600, 0.7);
-  }
-
-  &.alert-info {
-    border-inline-start-color: $alert-border-color;
-    border-top-color: rgba($info-600, 0.7);
-  }
-
-  &.alert-secondary {
-    border-inline-start-color: $alert-border-color;
-    border-top-color: rgba($secondary-200, 0.7);
-  }
 
     div {
       width: 100%;

package/theme/customizations/_badges.scss

@@ -4,6 +4,21 @@
 // BADGE VARIANTS
 // ============================================
 
+.badge-success {
+  background-color: $success-600;
+  color: $white;
+}
+
+.badge-warning {
+  background-color: $warning-600;
+  color: $white;
+}
+
+.badge-info {
+  background-color: $info-600;
+  color: $white;
+}
+
 .badge-lavender {
   background-color: $lavender-600;
   color: $white;