sdga-ui 1.0.6 → 1.0.8

package/theme/customizations/_buttons.scss

@@ -1,160 +1,363 @@
 // Button Customizations - SDGA Custom Enhancements
+// Following Bootstrap 5.3 recommended practices
 
 @use 'sass:color';
 
 // ============================================
-// BUTTON VARIANTS - Primary
+// BUTTON VARIANTS - Using Sass map and @each loop
 // ============================================
 
-.btn-primary {
-  --#{$prefix}btn-color: #{$btn-primary-color};
-  --#{$prefix}btn-bg: #{$btn-primary-bg};
-  --#{$prefix}btn-border-color: #{$btn-primary-border-color};
-  --#{$prefix}btn-hover-color: #{$btn-primary-hover-color};
-  --#{$prefix}btn-hover-bg: #{$btn-primary-hover-bg};
-  --#{$prefix}btn-hover-border-color: #{$btn-primary-hover-border-color};
-  --#{$prefix}btn-focus-shadow-rgb: #{$btn-primary-focus-shadow-rgb};
-  --#{$prefix}btn-active-color: #{$btn-primary-active-color};
-  --#{$prefix}btn-active-bg: #{$btn-primary-active-bg};
-  --#{$prefix}btn-active-border-color: #{$btn-primary-active-border-color};
-  --#{$prefix}btn-disabled-color: #{$btn-primary-disabled-color};
-  --#{$prefix}btn-disabled-bg: #{$btn-primary-disabled-bg};
-  --#{$prefix}btn-disabled-border-color: #{$btn-primary-disabled-border-color};
-}
-
-.btn-outline-primary {
-  --#{$prefix}btn-color: #{$btn-outline-primary-color};
-  --#{$prefix}btn-border-color: #{$btn-outline-primary-border-color};
-  --#{$prefix}btn-hover-color: #{$btn-outline-primary-hover-color};
-  --#{$prefix}btn-hover-bg: #{$btn-outline-primary-hover-bg};
-  --#{$prefix}btn-hover-border-color: #{$btn-outline-primary-hover-border-color};
-  --#{$prefix}btn-focus-shadow-rgb: #{$btn-outline-primary-focus-shadow-rgb};
-  --#{$prefix}btn-active-color: #{$btn-outline-primary-active-color};
-  --#{$prefix}btn-active-bg: #{$btn-outline-primary-active-bg};
-  --#{$prefix}btn-active-border-color: #{$btn-outline-primary-active-border-color};
-  --#{$prefix}btn-disabled-color: #{$btn-outline-primary-disabled-color};
-  --#{$prefix}btn-disabled-bg: #{$btn-outline-primary-disabled-bg};
-  --#{$prefix}btn-disabled-border-color: #{$btn-outline-primary-disabled-border-color};
-}
-
-// ============================================
-// BUTTON VARIANTS - Secondary
-// ============================================
+// Define button variants with their CSS custom properties
+$button-variants: (
+  "neutral": (
+    color: $white,
+    bg: $neutral-950,
+    border-color: $neutral-950,
+    hover-color: $white,
+    hover-bg: $neutral-800,
+    hover-border-color: $neutral-800,
+    active-color: $white,
+    active-bg: $neutral-600,
+    active-border-color: $neutral-600,
+    disabled-color: $neutral-400,
+    disabled-bg: $neutral-200,
+    disabled-border-color: $neutral-200
+  ),
+  "primary": (
+    color: $white,
+    bg: $primary-600,
+    border-color: $primary-600,
+    hover-color: $white,
+    hover-bg: $primary-700,
+    hover-border-color: $primary-700,
+    active-color: $white,
+    active-bg: $primary-800,
+    active-border-color: $primary-800,
+    disabled-color: $white,
+    disabled-bg: $primary-200,
+    disabled-border-color: $primary-200
+  ),
+  "secondary": (
+    color: $black,
+    bg: $secondary-100,
+    border-color: $secondary-100,
+    hover-color: $black,
+    hover-bg: $secondary-200,
+    hover-border-color: $secondary-200,
+    active-color: $black,
+    active-bg: $secondary-200,
+    active-border-color: $secondary-200,
+    disabled-color: $secondary-400,
+    disabled-bg: $secondary-200,
+    disabled-border-color: $secondary-200
+  ),
+  "outline-secondary": (
+    color: $black,
+    border-color: $secondary-300,
+    hover-color: $black,
+    hover-bg: $secondary-100,
+    hover-border-color: $secondary-200,
+    active-color: $black,
+    active-bg: $secondary-200,
+    active-border-color: $secondary-300,
+    disabled-color: $secondary-400,
+    disabled-bg: transparent,
+    disabled-border-color: $secondary-400
+  ),
+  "subtle": (
+    color: $black,
+    bg: transparent,
+    border-color: transparent,
+    hover-color: $black,
+    hover-bg: transparent,
+    hover-border-color: transparent,
+    active-color: $black,
+    active-bg: transparent,
+    active-border-color: transparent,
+    disabled-color: $neutral-400,
+    disabled-bg: transparent,
+    disabled-border-color: transparent
+  ),
+  "transparent": (
+    color: $black,
+    bg: transparent,
+    border-color: transparent,
+    hover-color: $primary-700,
+    hover-bg: transparent,
+    hover-border-color: transparent,
+    active-color: $primary-900,
+    active-bg: transparent,
+    active-border-color: transparent,
+    disabled-color: $neutral-400,
+    disabled-bg: transparent,
+    disabled-border-color: transparent
+  ),
+  "destructive-primary": (
+    color: $white,
+    bg: $error-600,
+    border-color: transparent,
+    hover-color: $white,
+    hover-bg: $error-700,
+    hover-border-color: transparent,
+    active-color: $white,
+    active-bg: $error-900,
+    active-border-color: transparent,
+    disabled-color: $neutral-400,
+    disabled-bg: transparent,
+    disabled-border-color: transparent
+  ),
+  "destructive-secondary": (
+    color: $error-700,
+    bg: $error-50,
+    border-color: transparent,
+    hover-color: $error-700,
+    hover-bg: $error-100,
+    hover-border-color: transparent,
+    active-color: $error-700,
+    active-bg: $error-200,
+    active-border-color: transparent,
+    disabled-color: $neutral-400,
+    disabled-bg: transparent,
+    disabled-border-color: transparent
+  ),
+  "destructive-outline-secondary": (
+    color: $error-700,
+    bg: transparent,
+    border-color: $error-200,
+    hover-color: $error-700,
+    hover-bg: $error-100,
+    hover-border-color: $error-100,
+    active-color: $error-700,
+    active-bg: $error-200,
+    active-border-color: transparent,
+    disabled-color: $neutral-400,
+    disabled-bg: transparent,
+    disabled-border-color: transparent
+  ),
+  "destructive-subtle": (
+    color: $error-700,
+    bg: transparent,
+    border-color: transparent,
+    hover-color: $error-700,
+    hover-bg: $error-100,
+    hover-border-color: transparent,
+    active-color: $error-700,
+    active-bg: $error-200,
+    active-border-color: transparent,
+    disabled-color: $neutral-400,
+    disabled-bg: transparent,
+    disabled-border-color: transparent
+  ),
+  "destructive-transparent": (
+    color: $error-600,
+    bg: transparent,
+    border-color: transparent,
+    hover-color: $error-700,
+    hover-bg: transparent,
+    hover-border-color: transparent,
+    active-color: $error-900,
+    active-bg: transparent,
+    active-border-color: transparent,
+    disabled-color: $neutral-400,
+    disabled-bg: transparent,
+    disabled-border-color: transparent
+  )
+);
 
-.btn-secondary {
-  --#{$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};
-}
-
-.btn-outline-secondary {
-  --#{$prefix}btn-color: #{$btn-outline-secondary-color};
-  --#{$prefix}btn-border-color: #{$btn-outline-secondary-border-color};
-  --#{$prefix}btn-hover-color: #{$btn-outline-secondary-hover-color};
-  --#{$prefix}btn-hover-bg: #{$btn-outline-secondary-hover-bg};
-  --#{$prefix}btn-hover-border-color: #{$btn-outline-secondary-hover-border-color};
-  --#{$prefix}btn-focus-shadow-rgb: #{$btn-outline-secondary-focus-shadow-rgb};
-  --#{$prefix}btn-active-color: #{$btn-outline-secondary-active-color};
-  --#{$prefix}btn-active-bg: #{$btn-outline-secondary-active-bg};
-  --#{$prefix}btn-active-border-color: #{$btn-outline-secondary-active-border-color};
-  --#{$prefix}btn-disabled-color: #{$btn-outline-secondary-disabled-color};
-  --#{$prefix}btn-disabled-bg: #{$btn-outline-secondary-disabled-bg};
-  --#{$prefix}btn-disabled-border-color: #{$btn-outline-secondary-disabled-border-color};
-}
-
-// ============================================
-// BUTTON VARIANTS - Danger/Destructive
-// ============================================
-
-.btn-danger {
-  --#{$prefix}btn-color: #{$btn-danger-color};
-  --#{$prefix}btn-bg: #{$btn-danger-bg};
-  --#{$prefix}btn-border-color: #{$btn-danger-border-color};
-  --#{$prefix}btn-hover-color: #{$btn-danger-hover-color};
-  --#{$prefix}btn-hover-bg: #{$btn-danger-hover-bg};
-  --#{$prefix}btn-hover-border-color: #{$btn-danger-hover-border-color};
-  --#{$prefix}btn-focus-shadow-rgb: #{$btn-danger-focus-shadow-rgb};
-  --#{$prefix}btn-active-color: #{$btn-danger-active-color};
-  --#{$prefix}btn-active-bg: #{$btn-danger-active-bg};
-  --#{$prefix}btn-active-border-color: #{$btn-danger-active-border-color};
-  --#{$prefix}btn-disabled-color: #{$btn-danger-disabled-color};
-  --#{$prefix}btn-disabled-bg: #{$btn-danger-disabled-bg};
-  --#{$prefix}btn-disabled-border-color: #{$btn-danger-disabled-border-color};
-}
-
-.btn-outline-danger {
-  --#{$prefix}btn-color: #{$btn-outline-danger-color};
-  --#{$prefix}btn-border-color: #{$btn-outline-danger-border-color};
-  --#{$prefix}btn-hover-color: #{$btn-outline-danger-hover-color};
-  --#{$prefix}btn-hover-bg: #{$btn-outline-danger-hover-bg};
-  --#{$prefix}btn-hover-border-color: #{$btn-outline-danger-hover-border-color};
-  --#{$prefix}btn-focus-shadow-rgb: #{$btn-outline-danger-focus-shadow-rgb};
-  --#{$prefix}btn-active-color: #{$btn-outline-danger-active-color};
-  --#{$prefix}btn-active-bg: #{$btn-outline-danger-active-bg};
-  --#{$prefix}btn-active-border-color: #{$btn-outline-danger-active-border-color};
-  --#{$prefix}btn-disabled-color: #{$btn-outline-danger-disabled-color};
-  --#{$prefix}btn-disabled-bg: #{$btn-outline-danger-disabled-bg};
-  --#{$prefix}btn-disabled-border-color: #{$btn-outline-danger-disabled-border-color};
-}
-
-// ============================================
-// BUTTON VARIANTS - Neutral
-// ============================================
-
-.btn-neutral {
-  --#{$prefix}btn-color: #{$btn-neutral-color};
-  --#{$prefix}btn-bg: #{$btn-neutral-bg};
-  --#{$prefix}btn-border-color: #{$btn-neutral-border-color};
-  --#{$prefix}btn-hover-color: #{$btn-neutral-hover-color};
-  --#{$prefix}btn-hover-bg: #{$btn-neutral-hover-bg};
-  --#{$prefix}btn-hover-border-color: #{$btn-neutral-hover-border-color};
-  --#{$prefix}btn-focus-shadow-rgb: #{$btn-neutral-focus-shadow-rgb};
-  --#{$prefix}btn-active-color: #{$btn-neutral-active-color};
-  --#{$prefix}btn-active-bg: #{$btn-neutral-active-bg};
-  --#{$prefix}btn-active-border-color: #{$btn-neutral-active-border-color};
-  --#{$prefix}btn-disabled-color: #{$btn-neutral-disabled-color};
-  --#{$prefix}btn-disabled-bg: #{$btn-neutral-disabled-bg};
-  --#{$prefix}btn-disabled-border-color: #{$btn-neutral-disabled-border-color};
-}
+$on-primary-button-variants: (
+  "neutral": (
+    color: $black,
+    bg: $white,
+    border-color: transparent,
+    hover-color: $black,
+    hover-bg: rgba($white, 0.8),
+    hover-border-color: transparent,
+    active-color: $black,
+    active-bg: rgba($white, 0.6),
+    active-border-color: transparent,
+    disabled-color: rgba($white, 0.4),
+    disabled-bg: rgba($white, 0.2),
+    disabled-border-color: transparent
+  ),
+  "primary": (
+    color: $black,
+    bg: $white,
+    border-color: transparent,
+    hover-color: $black,
+    hover-bg: rgba($white, 0.8),
+    hover-border-color: transparent,
+    active-color: $black,
+    active-bg: rgba($white, 0.6),
+    active-border-color: transparent,
+    disabled-color: rgba($white, 0.4),
+    disabled-bg: rgba($white, 0.2),
+    disabled-border-color: transparent
+  ),
+  "secondary": (
+    color: $white,
+    bg: rgba($white, 0.2),
+    border-color: transparent,
+    hover-color: $white,
+    hover-bg: rgba($white, 0.2),
+    hover-border-color: transparent,
+    active-color: $white,
+    active-bg: rgba($white, 0.4),
+    active-border-color: transparent,
+    disabled-color: rgba($white, 0.4),
+    disabled-bg: rgba($white, 0.2),
+    disabled-border-color: transparent
+  ),
+  "outline-secondary": (
+    color: $white,
+    bg: transparent,
+    border-color: rgba($white, 0.4),
+    hover-color: $white,
+    hover-bg: rgba($white, 0.2),
+    hover-border-color: rgba($white, 0.4),
+    active-color: $white,
+    active-bg: rgba($white, 0.4),
+    active-border-color: rgba($white, 0.4),
+    disabled-color: rgba($white, 0.4),
+    disabled-bg: transparent,
+    disabled-border-color: rgba($white, 0.4)
+  ),
+  "subtle": (
+    color: $white,
+    bg: transparent,
+    border-color: transparent,
+    hover-color: $white,
+    hover-bg: rgba($white, 0.2),
+    hover-border-color: transparent,
+    active-color: $white,
+    active-bg: rgba($white, 0.4),
+    active-border-color: transparent,
+    disabled-color: rgba($white, 0.4),
+    disabled-bg: transparent,
+    disabled-border-color: transparent
+  ),
+  "transparent": (
+    color: $white,
+    bg: transparent,
+    border-color: transparent,
+    hover-color: $primary-400,
+    hover-bg: transparent,
+    hover-border-color: transparent,
+    active-color: $primary-300,
+    active-bg: transparent,
+    active-border-color: transparent,
+    disabled-color: rgba($white, 0.4),
+    disabled-bg: transparent,
+    disabled-border-color: transparent
+  ),
+  "destructive-primary": (
+    color: $white,
+    bg: $error-600,
+    border-color: transparent,
+    hover-color: $white,
+    hover-bg: $error-700,
+    hover-border-color: transparent,
+    active-color: $white,
+    active-bg: $error-900,
+    active-border-color: transparent,
+    disabled-color: rgba($white, 0.4),
+    disabled-bg: rgba($error-600, 0.2),
+    disabled-border-color: transparent
+  ),
+  "destructive-secondary": (
+    color: $error-700,
+    bg: $error-50,
+    border-color: transparent,
+    hover-color: $error-700,
+    hover-bg: $error-100,
+    hover-border-color: transparent,
+    active-color: $error-700,
+    active-bg: $error-200,
+    active-border-color: transparent,
+    disabled-color: rgba($error-700, 0.4),
+    disabled-bg: rgba($error-50, 0.2),
+    disabled-border-color: transparent
+  ),
+  "destructive-outline-secondary": (
+    color: $error-200,
+    bg: transparent,
+    border-color: $error-200,
+    hover-color: $error-700,
+    hover-bg: $error-100,
+    hover-border-color: $error-200,
+    active-color: $error-700,
+    active-bg: $error-200,
+    active-border-color: $error-200,
+    disabled-color: rgba($error-700, 0.4),
+    disabled-bg: transparent,
+    disabled-border-color: rgba($error-200, 0.4)
+  ),
+  "destructive-subtle": (
+    color: $error-200,
+    bg: transparent,
+    border-color: transparent,
+    hover-color: $error-700,
+    hover-bg: $error-100,
+    hover-border-color: transparent,
+    active-color: $error-700,
+    active-bg: $error-200,
+    active-border-color: transparent,
+    disabled-color: rgba($error-200, 0.4),
+    disabled-bg: transparent,
+    disabled-border-color: transparent
+  ),
+  "destructive-transparent": (
+    color: $error-200,
+    bg: transparent,
+    border-color: transparent,
+    hover-color: $error-300,
+    hover-bg: transparent,
+    hover-border-color: transparent,
+    active-color: $error-400,
+    active-bg: transparent,
+    active-border-color: transparent,
+    disabled-color: rgba($error-200, 0.4),
+    disabled-bg: transparent,
+    disabled-border-color: transparent
+  )
+);
 
-.btn-outline-neutral {
-  --#{$prefix}btn-color: #{$btn-outline-neutral-color};
-  --#{$prefix}btn-border-color: #{$btn-outline-neutral-border-color};
-  --#{$prefix}btn-hover-color: #{$btn-outline-neutral-hover-color};
-  --#{$prefix}btn-hover-bg: #{$btn-outline-neutral-hover-bg};
-  --#{$prefix}btn-hover-border-color: #{$btn-outline-neutral-hover-border-color};
-  --#{$prefix}btn-focus-shadow-rgb: #{$btn-outline-neutral-focus-shadow-rgb};
-  --#{$prefix}btn-active-color: #{$btn-outline-neutral-active-color};
-  --#{$prefix}btn-active-bg: #{$btn-outline-neutral-active-bg};
-  --#{$prefix}btn-active-border-color: #{$btn-outline-neutral-active-border-color};
-  --#{$prefix}btn-disabled-color: #{$btn-outline-neutral-disabled-color};
-  --#{$prefix}btn-disabled-bg: #{$btn-outline-neutral-disabled-bg};
-  --#{$prefix}btn-disabled-border-color: #{$btn-outline-neutral-disabled-border-color};
+// Generate button variant classes
+@each $name, $props in $button-variants {
+  .btn-#{$name} {
+    --#{$prefix}btn-color: #{map-get($props, color)};
+    --#{$prefix}btn-bg: #{map-get($props, bg)};
+    --#{$prefix}btn-border-color: #{map-get($props, border-color)};
+    --#{$prefix}btn-hover-color: #{map-get($props, hover-color)};
+    --#{$prefix}btn-hover-bg: #{map-get($props, hover-bg)};
+    --#{$prefix}btn-hover-border-color: #{map-get($props, hover-border-color)};
+    --#{$prefix}btn-focus-shadow-rgb: #{map-get($props, focus-shadow-rgb)};
+    --#{$prefix}btn-active-color: #{map-get($props, active-color)};
+    --#{$prefix}btn-active-bg: #{map-get($props, active-bg)};
+    --#{$prefix}btn-active-border-color: #{map-get($props, active-border-color)};
+    --#{$prefix}btn-disabled-color: #{map-get($props, disabled-color)};
+    --#{$prefix}btn-disabled-bg: #{map-get($props, disabled-bg)};
+    --#{$prefix}btn-disabled-border-color: #{map-get($props, disabled-border-color)};
+  };
 }
 
-.btn-subtle {
-  --#{$prefix}btn-color: #{$btn-subtle-color};
-  --#{$prefix}btn-border-color: #{$btn-subtle-border-color};
-  --#{$prefix}btn-hover-color: #{$btn-subtle-hover-color};
-  --#{$prefix}btn-hover-bg: #{$btn-subtle-hover-bg};
-  --#{$prefix}btn-hover-border-color: #{$btn-subtle-hover-border-color};
-  --#{$prefix}btn-focus-shadow-rgb: #{$btn-subtle-focus-shadow-rgb};
-  --#{$prefix}btn-active-color: #{$btn-subtle-active-color};
-  --#{$prefix}btn-active-bg: #{$btn-subtle-active-bg};
-  --#{$prefix}btn-active-border-color: #{$btn-subtle-active-border-color};
-  --#{$prefix}btn-disabled-color: #{$btn-subtle-disabled-color};
-  --#{$prefix}btn-disabled-bg: #{$btn-subtle-disabled-bg};
-  --#{$prefix}btn-disabled-border-color: #{$btn-subtle-disabled-border-color};
+.on-primary {
+  @each $name, $props in $on-primary-button-variants  {
+    .btn-#{$name} {
+      --#{$prefix}btn-color: #{map-get($props, color)};
+      --#{$prefix}btn-bg: #{map-get($props, bg)};
+      --#{$prefix}btn-border-color: #{map-get($props, border-color)};
+      --#{$prefix}btn-hover-color: #{map-get($props, hover-color)};
+      --#{$prefix}btn-hover-bg: #{map-get($props, hover-bg)};
+      --#{$prefix}btn-hover-border-color: #{map-get($props, hover-border-color)};
+      --#{$prefix}btn-focus-shadow-rgb: #{map-get($props, focus-shadow-rgb)};
+      --#{$prefix}btn-active-color: #{map-get($props, active-color)};
+      --#{$prefix}btn-active-bg: #{map-get($props, active-bg)};
+      --#{$prefix}btn-active-border-color: #{map-get($props, active-border-color)};
+      --#{$prefix}btn-disabled-color: #{map-get($props, disabled-color)};
+      --#{$prefix}btn-disabled-bg: #{map-get($props, disabled-bg)};
+      --#{$prefix}btn-disabled-border-color: #{map-get($props, disabled-border-color)};
+    }
+  };
 }
 
 // ============================================

package/theme/customizations/_cards.scss

@@ -1,4 +1,45 @@
 // Card Customizations - SDGA Custom Enhancements
+// Following Bootstrap 5.3 recommended practices
+
+// ============================================
+// CARD ICON VARIANTS - Using Sass map and @each loop
+// ============================================
+
+// Define card icon color variants
+$card-icon-variants: (
+  "success": (
+    icon-bg: $success-50,
+    icon-color: $success-700
+  ),
+  "primary": (
+    icon-bg: $primary-50,
+    icon-color: $primary-700
+  ),
+  "danger": (
+    icon-bg: $danger-50,
+    icon-color: $danger-700
+  ),
+  "warning": (
+    icon-bg: $warning-50,
+    icon-color: $warning-700
+  ),
+  "info": (
+    icon-bg: $info-50,
+    icon-color: $info-700
+  ),
+  "secondary": (
+    icon-bg: $secondary-50,
+    icon-color: $secondary-700
+  ),
+  "neutral": (
+    icon-bg: $neutral-50,
+    icon-color: $neutral-700
+  )
+);
+
+// ============================================
+// CARD BASE STYLES
+// ============================================
 
 .card {
   transition: transform 0.3s ease;
@@ -71,6 +112,17 @@
     justify-content: center;
     color: $success-700;
     z-index: 1;
+
+    // Generate card icon variant classes
+    @each $name, $colors in $card-icon-variants {
+      &.card-title-icon-#{$name} {
+        color: map-get($colors, icon-color);
+        
+        &::after {
+          background-color: map-get($colors, icon-bg);
+        }
+      }
+    }
   }
 
   .card-title-checked {