sdga-ui 1.0.6 → 1.0.8

package/theme/components/_buttons.scss

@@ -62,7 +62,7 @@ $btn-link-disabled-color: $gray-600;
 // Button close
 $btn-close-width: .7031rem;
 $btn-close-height: $btn-close-width;
-$btn-close-padding-x: .6481rem;
+$btn-close-padding-x: .5rem;
 $btn-close-padding-y: $btn-close-padding-x;
 $btn-close-color: $black;
 $btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>");
@@ -72,199 +72,3 @@ $btn-close-hover-opacity: 0.75;
 $btn-close-focus-opacity: 1;
 $btn-close-disabled-opacity: 0.25;
 $btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
-
-// ============================================
-// CUSTOM BUTTON VARIANTS
-// ============================================
-
-// Primary Button Variant
-$btn-primary-color: $white;
-$btn-primary-bg: $primary-600;
-$btn-primary-border-color: $primary-600;
-$btn-primary-hover-color: $white;
-$btn-primary-hover-bg: $primary-700;
-$btn-primary-hover-border-color: $primary-700;
-$btn-primary-active-color: $white;
-$btn-primary-active-bg: $primary-800;
-$btn-primary-active-border-color: $primary-800;
-$btn-primary-focus-color: $white;
-$btn-primary-focus-bg: $primary-600;
-$btn-primary-focus-border-color: $black;
-$btn-primary-focus-shadow-rgb: null;
-$btn-primary-disabled-color: $white;
-$btn-primary-disabled-bg: $primary-200;
-$btn-primary-disabled-border-color: $primary-200;
-
-// Primary Outline Button Variant
-$btn-outline-primary-color: $primary-600;
-$btn-outline-primary-border-color: $primary-600;
-$btn-outline-primary-hover-color: $white;
-$btn-outline-primary-hover-bg: $primary-600;
-$btn-outline-primary-hover-border-color: $primary-600;
-$btn-outline-primary-active-color: $white;
-$btn-outline-primary-active-bg: $primary-700;
-$btn-outline-primary-active-border-color: $primary-700;
-$btn-outline-primary-focus-color: $primary-700;
-$btn-outline-primary-focus-bg: transparent;
-$btn-outline-primary-focus-border-color: $black;
-$btn-outline-primary-focus-shadow-rgb: null;
-$btn-outline-primary-disabled-color: $primary-400;
-$btn-outline-primary-disabled-bg: transparent;
-$btn-outline-primary-disabled-border-color: $primary-400;
-
-// Secondary Button Variant
-$btn-secondary-color: $black;
-$btn-secondary-bg: $secondary-100;
-$btn-secondary-border-color: $secondary-100;
-$btn-secondary-hover-color: $black;
-$btn-secondary-hover-bg: $secondary-200;
-$btn-secondary-hover-border-color: $secondary-200;
-$btn-secondary-active-color: $black;
-$btn-secondary-active-bg: $secondary-200;
-$btn-secondary-active-border-color: $secondary-200;
-$btn-secondary-focus-color: $black;
-$btn-secondary-focus-bg: $secondary-100;
-$btn-secondary-focus-border-color: $black;
-$btn-secondary-focus-shadow-rgb: null;
-$btn-secondary-disabled-color: $secondary-400;
-$btn-secondary-disabled-bg: $secondary-200;
-$btn-secondary-disabled-border-color: $secondary-200;
-
-// Secondary Outline Button Variant
-$btn-outline-secondary-color: $black;
-$btn-outline-secondary-border-color: $secondary-300;
-$btn-outline-secondary-hover-color: $black;
-$btn-outline-secondary-hover-bg: $secondary-100;
-$btn-outline-secondary-hover-border-color: $secondary-200;
-$btn-outline-secondary-active-color: $black;
-$btn-outline-secondary-active-bg: $secondary-200;
-$btn-outline-secondary-active-border-color: $secondary-300;
-$btn-outline-secondary-focus-color: $black;
-$btn-outline-secondary-focus-bg: transparent;
-$btn-outline-secondary-focus-border-color: $black;
-$btn-outline-secondary-focus-shadow-rgb: null;
-$btn-outline-secondary-disabled-color: $secondary-400;
-$btn-outline-secondary-disabled-bg: transparent;
-$btn-outline-secondary-disabled-border-color: $secondary-400;
-
-// Danger/Destructive Button Variant
-$btn-danger-color: $white;
-$btn-danger-bg: $danger-600;
-$btn-danger-border-color: $danger-600;
-$btn-danger-hover-color: $white;
-$btn-danger-hover-bg: $danger-700;
-$btn-danger-hover-border-color: $danger-700;
-$btn-danger-active-color: $white;
-$btn-danger-active-bg: $danger-800;
-$btn-danger-active-border-color: $danger-800;
-$btn-danger-focus-color: $white;
-$btn-danger-focus-bg: $danger-600;
-$btn-danger-focus-border-color: $black;
-$btn-danger-focus-shadow-rgb: null;
-$btn-danger-disabled-color: $white;
-$btn-danger-disabled-bg: $danger-200;
-$btn-danger-disabled-border-color: $danger-200;
-
-// Danger Outline Button Variant
-$btn-outline-danger-color: $danger-600;
-$btn-outline-danger-border-color: $danger-600;
-$btn-outline-danger-hover-color: $white;
-$btn-outline-danger-hover-bg: $danger-600;
-$btn-outline-danger-hover-border-color: $danger-600;
-$btn-outline-danger-active-color: $white;
-$btn-outline-danger-active-bg: $danger-700;
-$btn-outline-danger-active-border-color: $danger-700;
-$btn-outline-danger-focus-color: $danger-700;
-$btn-outline-danger-focus-bg: transparent;
-$btn-outline-danger-focus-border-color: $black;
-$btn-outline-danger-focus-shadow-rgb: null;
-$btn-outline-danger-disabled-color: $danger-400;
-$btn-outline-danger-disabled-bg: transparent;
-$btn-outline-danger-disabled-border-color: $danger-400;
-
-// Neutral Button Variant
-$btn-neutral-color: $white;
-$btn-neutral-bg: $neutral-950;
-$btn-neutral-border-color: $neutral-950;
-$btn-neutral-hover-color: $white;
-$btn-neutral-hover-bg: $neutral-800;
-$btn-neutral-hover-border-color: $neutral-800;
-$btn-neutral-active-color: $white;
-$btn-neutral-active-bg: $neutral-600;
-$btn-neutral-active-border-color: $neutral-600;
-$btn-neutral-focus-color: $white;
-$btn-neutral-focus-bg: $neutral-950;
-$btn-neutral-focus-border-color: $black;
-$btn-neutral-focus-shadow-rgb: 77, 87, 97;
-$btn-neutral-disabled-color: $neutral-400;
-$btn-neutral-disabled-bg: $neutral-200;
-$btn-neutral-disabled-border-color: $neutral-200;
-
-// Neutral Outline Button Variant
-$btn-outline-neutral-color: $neutral-600;
-$btn-outline-neutral-border-color: $neutral-600;
-$btn-outline-neutral-hover-color: $white;
-$btn-outline-neutral-hover-bg: $neutral-600;
-$btn-outline-neutral-hover-border-color: $neutral-600;
-$btn-outline-neutral-active-color: $white;
-$btn-outline-neutral-active-bg: $neutral-700;
-$btn-outline-neutral-active-border-color: $neutral-700;
-$btn-outline-neutral-focus-color: $neutral-700;
-$btn-outline-neutral-focus-bg: transparent;
-$btn-outline-neutral-focus-border-color: $neutral-600;
-$btn-outline-neutral-focus-shadow-rgb: null;
-$btn-outline-neutral-disabled-color: $neutral-400;
-$btn-outline-neutral-disabled-bg: transparent;
-$btn-outline-neutral-disabled-border-color: $neutral-400;
-
-// Subtle Outline Button Variant
-$btn-subtle-color: $black;
-$btn-subtle-border-color: transparent;
-$btn-subtle-hover-color: $black;
-$btn-subtle-hover-bg: transparent;
-$btn-subtle-hover-border-color: transparent;
-$btn-subtle-active-color: $black;
-$btn-subtle-active-bg: transparent;
-$btn-subtle-active-border-color: transparent;
-$btn-subtle-focus-color: $black;
-$btn-subtle-focus-bg: transparent;
-$btn-subtle-focus-border-color: transparent;
-$btn-subtle-focus-shadow-rgb: null;
-$btn-subtle-disabled-color: $neutral-400;
-$btn-subtle-disabled-bg: transparent;
-$btn-subtle-disabled-border-color: transparent;
-
-// Lavender Button Variant
-$btn-lavender-color: $white;
-$btn-lavender-bg: $lavender-600;
-$btn-lavender-border-color: $lavender-600;
-$btn-lavender-hover-color: $white;
-$btn-lavender-hover-bg: $lavender-700;
-$btn-lavender-hover-border-color: $lavender-700;
-$btn-lavender-active-color: $white;
-$btn-lavender-active-bg: $lavender-800;
-$btn-lavender-active-border-color: $lavender-800;
-$btn-lavender-focus-color: $white;
-$btn-lavender-focus-bg: $lavender-600;
-$btn-lavender-focus-border-color: $lavender-700;
-$btn-lavender-focus-shadow-rgb: null;
-$btn-lavender-disabled-color: $white;
-$btn-lavender-disabled-bg: $lavender-400;
-$btn-lavender-disabled-border-color: $lavender-400;
-
-// Lavender Outline Button Variant
-$btn-outline-lavender-color: $lavender-600;
-$btn-outline-lavender-border-color: $lavender-600;
-$btn-outline-lavender-hover-color: $white;
-$btn-outline-lavender-hover-bg: $lavender-600;
-$btn-outline-lavender-hover-border-color: $lavender-600;
-$btn-outline-lavender-active-color: $white;
-$btn-outline-lavender-active-bg: $lavender-700;
-$btn-outline-lavender-active-border-color: $lavender-700;
-$btn-outline-lavender-focus-color: $lavender-700;
-$btn-outline-lavender-focus-bg: transparent;
-$btn-outline-lavender-focus-border-color: $lavender-600;
-$btn-outline-lavender-focus-shadow-rgb: null;
-$btn-outline-lavender-disabled-color: $lavender-400;
-$btn-outline-lavender-disabled-bg: transparent;
-$btn-outline-lavender-disabled-border-color: $lavender-400;

package/theme/config/_base.scss

@@ -17,6 +17,16 @@ $body-bg: $white;
 $body-color: $black;
 $body-text-align: start;
 
+// ============================================
+// LINKS
+// ============================================
+
+$link-color: $primary;
+$link-decoration: none;
+$link-hover-color: color.scale($link-color, $lightness: -30%);
+$link-hover-decoration: underline;
+
+
 // ============================================
 // COMPONENTS BASE
 // ============================================
@@ -27,7 +37,7 @@ $component-active-bg: $primary;
 
 // Shadow base color (using SDGA neutral-900 shade)
 $shadow-color: $gray-900;
-$border-color: $gray-500;
+$border-color: $gray-300;
 
 // Focus
 $focus-ring-width: 0.25rem;

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%;
@@ -198,23 +186,24 @@
       flex-direction: column;
       margin-inline-start: 0;
 
+
       button {
         width: 100%;
         justify-content: center;
         &:first-of-type {
-          --#{$prefix}btn-color: #{$btn-secondary-color};
-          --#{$prefix}btn-bg: #{$btn-secondary-bg};
-          --#{$prefix}btn-border-color: #{$btn-secondary-border-color};
-          --#{$prefix}btn-hover-color: #{$btn-secondary-hover-color};
-          --#{$prefix}btn-hover-bg: #{$btn-secondary-hover-bg};
-          --#{$prefix}btn-hover-border-color: #{$btn-secondary-hover-border-color};
-          --#{$prefix}btn-focus-shadow-rgb: #{$btn-secondary-focus-shadow-rgb};
-          --#{$prefix}btn-active-color: #{$btn-secondary-active-color};
-          --#{$prefix}btn-active-bg: #{$btn-secondary-active-bg};
-          --#{$prefix}btn-active-border-color: #{$btn-secondary-active-border-color};
-          --#{$prefix}btn-disabled-color: #{$btn-secondary-disabled-color};
-          --#{$prefix}btn-disabled-bg: #{$btn-secondary-disabled-bg};
-          --#{$prefix}btn-disabled-border-color: #{$btn-secondary-disabled-border-color};
+          --#{$prefix}btn-color: #{$black};
+          --#{$prefix}btn-bg: #{$secondary-100};
+          --#{$prefix}btn-border-color: #{$secondary-100};
+          --#{$prefix}btn-hover-color: #{$black};
+          --#{$prefix}btn-hover-bg: #{$secondary-200};
+          --#{$prefix}btn-hover-border-color: #{$secondary-200};
+          --#{$prefix}btn-focus-shadow-rgb: null;
+          --#{$prefix}btn-active-color: #{$black};
+          --#{$prefix}btn-active-bg: #{$secondary-200};
+          --#{$prefix}btn-active-border-color: #{$secondary-200};
+          --#{$prefix}btn-disabled-color: #{$secondary-400};
+          --#{$prefix}btn-disabled-bg: #{$secondary-200};
+          --#{$prefix}btn-disabled-border-color: #{$secondary-200};
         }
       }
     }
@@ -225,7 +214,7 @@
 // ============================================
 .alert-dismissible {
   .btn-close {
-    padding: 0.5rem;
+    padding: $btn-close-padding-y $btn-close-padding-x;
     position: absolute;
     top: 1rem;
     right: unset;

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;