sdga-ui 1.0.5 → 1.0.7

package/theme/customizations/_toasts.scss

@@ -1,4 +1,69 @@
 // Toast Customizations - SDGA Custom Enhancements
+// Following Bootstrap 5.3 recommended practices
+
+// ============================================
+// TOAST VARIANTS - Using Sass map and @each loop
+// ============================================
+
+// Define toast color variants
+$toast-variants: (
+  "primary": (
+    border-color: rgba($primary-600, 0.7),
+    border: $primary-200,
+    icon-bg: $primary-50,
+    icon-color: $primary-700,
+    title-color: $primary-700
+  ),
+  "secondary": (
+    border-color: rgba($secondary-200, 0.7),
+    border: $secondary-200,
+    icon-bg: $secondary-50,
+    icon-color: $black,
+    title-color: $black
+  ),
+  "success": (
+    border-color: rgba($success-600, 0.7),
+    border: $success-200,
+    icon-bg: $success-50,
+    icon-color: $success-700,
+    title-color: $success-700
+  ),
+  "danger": (
+    border-color: rgba($danger-600, 0.7),
+    border: $danger-200,
+    icon-bg: $danger-50,
+    icon-color: $danger-700,
+    title-color: $danger-700
+  ),
+  "warning": (
+    border-color: rgba($warning-600, 0.7),
+    border: $warning-200,
+    icon-bg: $warning-50,
+    icon-color: $warning-700,
+    title-color: $warning-700
+  ),
+  "info": (
+    border-color: rgba($info-600, 0.7),
+    border: $info-200,
+    icon-bg: $info-50,
+    icon-color: $info-700,
+    title-color: $info-700
+  ),
+  "lavender": (
+    border-color: rgba($lavender-600, 0.7),
+    border: $lavender-200,
+    icon-bg: $lavender-50,
+    icon-color: $lavender-700,
+    title-color: $lavender-700
+  ),
+  "neutral": (
+    border-color: rgba($neutral-300, 0.7),
+    border: $neutral-300,
+    icon-bg: $neutral-50,
+    icon-color: $black,
+    title-color: $black
+  )
+);
 
 // ============================================
 // TOAST BASE STYLES
@@ -21,10 +86,11 @@
     gap: .75rem;
 
     .btn-close {
+        padding: 0.5rem;
         position: absolute;
         top: 1rem;
+        right: unset;
         inset-inline-end: 1.5rem;
-        margin: 0;
     }
     .toast-content {
         width: 100%;
@@ -82,68 +148,15 @@
     // TOAST VARIANTS
     // ============================================
 
-    &.toast-primary {
-        border-inline-start-color: rgba($primary-600, 0.7);
-        --#{$prefix}border-color: #{$primary-200};
-        --#{$prefix}toast-icon-bg: #{$primary-50};
-        --#{$prefix}toast-icon-color: #{$primary-700};
-        --#{$prefix}toast-title-color: #{$primary-700};
-    }
-
-    &.toast-secondary {
-        border-inline-start-color: rgba($secondary-200, 0.7);
-        --#{$prefix}border-color: #{$secondary-200};
-        --#{$prefix}toast-icon-bg: #{$secondary-50};
-        --#{$prefix}toast-icon-color: #{$black};
-        --#{$prefix}toast-title-color: #{$black};
-    }
-
-    &.toast-success {
-        border-inline-start-color: rgba($success-600, 0.7);
-        --#{$prefix}border-color: #{$success-200};
-        --#{$prefix}toast-icon-bg: #{$success-50};
-        --#{$prefix}toast-icon-color: #{$success-700};
-        --#{$prefix}toast-title-color: #{$success-700};
-    }
-
-    &.toast-danger {
-        border-inline-start-color: rgba($danger-600, 0.7);
-        --#{$prefix}border-color: #{$danger-200};
-        --#{$prefix}toast-icon-bg: #{$danger-50};
-        --#{$prefix}toast-icon-color: #{$danger-700};
-        --#{$prefix}toast-title-color: #{$danger-700};
-    }
-
-    &.toast-warning {
-        border-inline-start-color: rgba($warning-600, 0.7);
-        --#{$prefix}border-color: #{$warning-200};
-        --#{$prefix}toast-icon-bg: #{$warning-50};
-        --#{$prefix}toast-icon-color: #{$warning-700};
-        --#{$prefix}toast-title-color: #{$warning-700};
-    }
-
-    &.toast-info {
-        border-inline-start-color: rgba($info-600, 0.7);
-        --#{$prefix}border-color: #{$info-200};
-        --#{$prefix}toast-icon-bg: #{$info-50};
-        --#{$prefix}toast-icon-color: #{$info-700};
-        --#{$prefix}toast-title-color: #{$info-700};
-    }
-
-    &.toast-lavender {
-        border-inline-start-color: rgba($lavender-600, 0.7);
-        --#{$prefix}border-color: #{$lavender-200};
-        --#{$prefix}toast-icon-bg: #{$lavender-50};
-        --#{$prefix}toast-icon-color: #{$lavender-700};
-        --#{$prefix}toast-title-color: #{$lavender-700};
-    }
-
-    &.toast-neutral {
-        border-inline-start-color: rgba($neutral-300, 0.7);
-        --#{$prefix}border-color: #{$neutral-300};
-        --#{$prefix}toast-icon-bg: #{$neutral-50};
-        --#{$prefix}toast-icon-color: #{$black};
-        --#{$prefix}toast-title-color: #{$black};
+    // Generate toast variant classes
+    @each $name, $colors in $toast-variants {
+        &.toast-#{$name} {
+            border-inline-start-color: map-get($colors, border-color);
+            --#{$prefix}border-color: #{map-get($colors, border)};
+            --#{$prefix}toast-icon-bg: #{map-get($colors, icon-bg)};
+            --#{$prefix}toast-icon-color: #{map-get($colors, icon-color)};
+            --#{$prefix}toast-title-color: #{map-get($colors, title-color)};
+        }
     }
 
     // ============================================
@@ -157,44 +170,11 @@
         width: 100%;
         flex-direction: column;
 
-        &.toast-primary {
-            border-inline-start-color: $toast-border-color;
-            border-top-color: rgba($primary-600, 0.7);
-        }
-
-        &.toast-secondary {
-            border-inline-start-color: $toast-border-color;
-            border-top-color: rgba($secondary-200, 0.7);
-        }
-
-        &.toast-success {
-            border-inline-start-color: $toast-border-color;
-            border-top-color: rgba($success-600, 0.7);
-        }
-
-        &.toast-danger {
-            border-inline-start-color: $toast-border-color;
-            border-top-color: rgba($danger-600, 0.7);
-        }
-
-        &.toast-warning {
-            border-inline-start-color: $toast-border-color;
-            border-top-color: rgba($warning-600, 0.7);
-        }
-
-        &.toast-info {
-            border-inline-start-color: $toast-border-color;
-            border-top-color: rgba($info-600, 0.7);
-        }
-
-        &.toast-lavender {
-            border-inline-start-color: $toast-border-color;
-            border-top-color: rgba($lavender-600, 0.7);
-        }
-
-        &.toast-neutral {
-            border-inline-start-color: $toast-border-color;
-            border-top-color: rgba($neutral-300, 0.7);
+        @each $name, $colors in $toast-variants {
+            &.toast-#{$name} {
+                border-inline-start-color: $toast-border-color;
+                border-top-color: map-get($colors, border-color);
+            }
         }
 
         .toast-footer {

package/theme/dga-ui.scss

@@ -15,6 +15,7 @@
 // ============================================
 
 // Import all component customizations
+@import './customizations/links';
 @import './customizations/global';
 @import './customizations/buttons';
 @import './customizations/cards';
@@ -24,5 +25,5 @@
 @import './customizations/forms';
 @import './customizations/forms-switch';
 @import './customizations/tables';
-@import './customizations/links';
-@import './customizations/utilities';
+@import './customizations/contexts';
+@import './customizations/footer';

package/demo-angular/src/app/views/bootstrap/bootstrap.component.html

@@ -1,14 +0,0 @@
-<div class="container py-5">
-  <h1 class="display-4 mb-4">{{ 'bootstrap.title' | translate }}</h1>
-  <p class="lead mb-5">{{ 'bootstrap.subtitle' | translate }}</p>
-
-  <app-alerts />
-  
-  <app-buttons />
-  
-  <app-cards />
-  
-  <app-forms />
-  
-  <app-tables />
-</div>

package/demo-angular/src/app/views/bootstrap/bootstrap.component.scss

@@ -1,91 +0,0 @@
-.demo-section {
-  margin-bottom: 3rem;
-  padding-bottom: 2rem;
-  border-bottom: 1px solid #e5e7eb;
-  
-  &:last-child {
-    border-bottom: none;
-  }
-  
-  h2 {
-    margin-bottom: 1.5rem;
-    padding-bottom: 0.5rem;
-    border-bottom: 2px solid #1B8354;
-  }
-  
-  h3 {
-    margin-top: 2rem;
-    margin-bottom: 1rem;
-    font-size: 1.25rem;
-    color: #384250;
-  }
-}
-
-.component-showcase {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-  margin-bottom: 1.5rem;
-  align-items: flex-start;
-  
-  > * {
-    flex: 0 0 auto;
-  }
-}
-
-.demo-card-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-  align-items: flex-start;
-}
-
-.toast-container-demo {
-  position: fixed;
-  top: 1rem;
-  right: 1rem;
-  z-index: 1090;
-}
-
-// Radius Showcase
-.radius-showcase {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: 1.5rem;
-  margin-bottom: 2rem;
-}
-
-.radius-item {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.5rem;
-}
-
-.radius-box {
-  width: 180px;
-  height: 140px;
-  background-color: #ffffff;
-  border: 1px solid #D2D6DB;
-  
-  &.circle {
-    width: 140px;
-    height: 140px;
-  }
-}
-
-.radius-label {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: #111927;
-}
-
-.radius-value {
-  font-size: 0.875rem;
-  color: #4D5761;
-}
-
-.radius-pixels {
-  font-size: 0.75rem;
-  color: #6C737F;
-}

package/demo-angular/src/app/views/bootstrap/bootstrap.component.ts

@@ -1,23 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
-import { AlertsComponent } from '../alerts/alerts.component';
-import { ButtonsComponent } from '../buttons/buttons.component';
-import { CardsComponent } from '../cards/cards.component';
-import { FormsComponent } from '../forms/forms.component';
-import { TablesComponent } from '../tables/tables.component';
-
-@Component({
-  selector: 'app-bootstrap',
-  imports: [
-    TranslateModule,
-    AlertsComponent,
-    ButtonsComponent,
-    CardsComponent,
-    FormsComponent,
-    TablesComponent
-  ],
-  templateUrl: './bootstrap.component.html',
-  styleUrl: './bootstrap.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class BootstrapComponent {}

package/theme/customizations/_utilities.scss

@@ -1,138 +0,0 @@
-// Utility Customizations - SDGA Custom Enhancements
-
-@use 'sass:color';
-
-// ============================================
-// COLOR UTILITIES
-// ============================================
-
-// Neutral color utilities
-.bg-neutral {
-  background-color: $gray-600 !important;
-}
-
-.text-neutral {
-  color: $gray-600 !important;
-}
-
-.border-neutral {
-  border-color: $gray-600 !important;
-}
-
-// ============================================
-// SHADOW UTILITIES
-// ============================================
-
-.shadow-xs {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
-}
-
-.shadow-2xl {
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
-}
-
-// ============================================
-// GRADIENT UTILITIES
-// ============================================
-
-.bg-gradient-primary {
-  background: linear-gradient(135deg, $primary 0%, color.scale($primary, $lightness: -48%) 100%) !important;
-}
-
-.bg-gradient-secondary {
-  background: linear-gradient(135deg, $secondary 0%, color.scale($secondary, $lightness: -48%) 100%) !important;
-}
-
-.bg-gradient-lavender {
-  background: linear-gradient(135deg, $lavender-600 0%, color.scale($lavender-600, $lightness: -48%) 100%) !important;
-}
-
-// ============================================
-// LINK VARIANTS
-// ============================================
-
-.link-lavender {
-  color: $lavender-600 !important;
-  
-  &:hover,
-  &:focus {
-    color: color.scale($lavender-600, $lightness: -32%) !important;
-  }
-}
-
-.link-neutral {
-  color: $gray-600 !important;
-  
-  &:hover,
-  &:focus {
-    color: color.scale($gray-600, $lightness: -32%) !important;
-  }
-}
-
-// ============================================
-// TEXT UTILITIES
-// ============================================
-
-.text-muted-light {
-  color: $gray-400 !important;
-}
-
-.text-muted-dark {
-  color: $gray-600 !important;
-}
-
-// ============================================
-// RESPONSIVE SPACING
-// ============================================
-
-@media (min-width: 768px) {
-  .py-md-6 {
-    padding-top: 2rem !important;
-    padding-bottom: 2rem !important;
-  }
-  
-  .py-md-7 {
-    padding-top: 2.5rem !important;
-    padding-bottom: 2.5rem !important;
-  }
-  
-  .py-md-8 {
-    padding-top: 3rem !important;
-    padding-bottom: 3rem !important;
-  }
-}
-
-// ============================================
-// SCROLLBAR UTILITIES
-// ============================================
-
-.custom-scrollbar {
-  &::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-  
-  &::-webkit-scrollbar-track {
-    background: $gray-100;
-    border-radius: $radius-sm;
-  }
-  
-  &::-webkit-scrollbar-thumb {
-    background: $gray-400;
-    border-radius: $radius-sm;
-    
-    &:hover {
-      background: $gray-500;
-    }
-  }
-}
-
-// ============================================
-// PRINT UTILITIES
-// ============================================
-
-@media print {
-  .no-print {
-    display: none !important;
-  }
-}