sdga-ui 1.0.6 → 1.0.8

package/theme/customizations/_footer.scss

@@ -0,0 +1,160 @@
+.dga-footer {
+    padding: 0 2rem;
+
+    .dga-footer-content {
+        justify-self: center;
+        display: flex;
+        max-width: 80rem;
+        width: 100%;
+        padding: var(--spacing-5xl, 2.5rem) 0 var(--spacing-3xl, 1.5rem) 0;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--Global-spacing-6xl, 3rem);
+        flex: 1 0 0;
+    }
+
+    .dga-footer-section-title {
+        display: flex;
+        padding-bottom: var(--spacing-md, 0.5rem);
+        flex-direction: column;
+        align-items: flex-start;
+        align-self: stretch;
+
+        border-bottom: 1px solid var(--#{$prefix}border-color);
+        margin-bottom: 0;
+        font-size: $font-size-base;
+        font-weight: $font-weight-medium;
+    }
+
+    .dga-footer-nav-wrapper {
+        display: flex;
+        padding: var(--spacing-xl, 1rem) 0 var(--spacing-5xl, 2.5rem) 0;
+        align-items: flex-start;
+        align-content: flex-start;
+        gap: 1.5rem var(--spacing-3xl, 1.5rem);
+        align-self: stretch;
+        flex-wrap: wrap;
+    }
+
+    .dga-footer-nav-group {
+        display: flex;
+        min-width: 11.9rem;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--spacing-md, 0.5rem);
+        flex: 1 0 0;
+    }
+
+    .dga-footer-social {
+        display: flex;
+        min-width: 11.9rem;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--spacing-4xl, 2rem);
+        flex: 1 0 0;
+
+        .dga-footer-nav-group {
+            width: 100%;
+        }
+    }
+
+    .dga-footer-meta {
+        display: flex;
+        padding: var(--spacing-xl, 1rem) 0;
+        align-items: center;
+        gap: var(--spacing-3xl, 1.5rem);
+        align-self: stretch;
+
+        .dga-footer-copyright-container {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: var(--spacing-md, 0.5rem);
+            align-self: stretch;
+        }
+
+        .dga-footer-meta-content {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: var(--spacing-5xl, 2.5rem);
+            flex: 1 0 0;
+        }
+
+        .dga-footer-meta-links {
+            display: flex;
+            align-items: flex-start;
+            align-content: flex-start;
+            gap: 1rem var(--spacing-xl, 1rem);
+            align-self: stretch;
+            flex-wrap: wrap;
+        }
+
+        .dga-footer-copyright {
+            font-size: var(--Size-Text-typo-size-text-sm, 0.875rem);
+            font-style: normal;
+            font-weight: 600;
+            line-height: var(--Line-Height-Text-line-heights-text-sm, 1.25rem);
+
+            margin-bottom: 0;
+        }
+
+        .dga-footer-legal-links {
+            display: flex;
+            align-items: flex-start;
+            align-content: flex-start;
+            gap: 1rem var(--spacing-xl, 1rem);
+            flex-wrap: wrap;
+        }
+
+        .dga-footer-logo {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            gap: var(--spacing-xl, 1rem);
+        }
+
+    }
+
+    @media (max-width: $tablet) {
+        .dga-footer-social {
+            padding: var(--spacing-xl, 1rem) 0;
+            gap: var(--spacing-5xl, 2.5rem);
+            flex-basis: 100%;
+            flex-direction: row;
+            flex-wrap: wrap;
+        }
+
+        .dga-footer-content {
+            gap: 2.5;
+        }
+
+        .dga-footer-meta {
+            flex-direction: column;
+
+            .dga-footer-meta-content {
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                gap: var(--spacing-4xl, 4rem);
+            }
+
+            .dga-footer-meta-links {
+                justify-content: center;
+            }
+
+            .dga-footer-copyright-container {
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                gap: var(--spacing-md, 0.5rem);
+            }
+
+            .dga-footer-logo {
+                width: 100%;
+                justify-content: space-between;
+                margin-top: 1rem;
+            }
+        }
+    }
+}

package/theme/customizations/_global.scss

@@ -6,8 +6,26 @@
 // Global button focus styling - applies to all button variants
 *:focus-visible {
   outline-offset: 2px !important;
-  outline: 2px solid #161616 !important;
-  border-color: $border-color !important;
+  outline: 2px solid $black !important;
+}
+
+.on-primary {
+  background-color: $primary-900;
+  color: $white;
+
+  --#{$prefix}body-bg: #{$primary-900};
+  --#{$prefix}body-color: #{$white};
+  --#{$prefix}text-muted: #{rgba($white, 0.8)};
+  --#{$prefix}border-color: #{rgba($white, 0.3)};
+
+  *:focus-visible {
+    outline-color: $white !important;
+  }
+}
+
+.list-unstyled {
+    padding-left: unset;
+    padding-right: unset;
 }
 
 // ============================================

package/theme/customizations/_links.scss

@@ -8,76 +8,93 @@
 // Define link color variants with their shades
 $link-variants: (
   "primary": (
-    base: $primary-600,
-    hover: $primary-400,
-    active: $primary-300 ),
-  "secondary": (
-    base: $secondary-600,
-    hover: $secondary-400,
-    active: $secondary-300 ),
-  "success": (
-    base: $success-600,
-    hover: $success-400,
-    active: $success-300 ),
-  "danger": (
-    base: $danger-600,
-    hover: $danger-400,
-    active: $danger-300 ),
-  "warning": (
-    base: $warning-600,
-    hover: $warning-400,
-    active: $warning-300 ),
-  "info": (
-    base: $info-600,
-    hover: $info-400,
-    active: $info-300 ),
+    base: rgba($primary-600, var(--#{$prefix}link-opacity, 1)),
+    base-decoration: rgba($primary-600, var(--#{$prefix}link-decoration-opacity, 1)),
+    hover: rgba($primary-400, var(--#{$prefix}link-opacity, 1)),
+    hover-decoration: rgba($primary-400, var(--#{$prefix}link-decoration-opacity, 1)),
+    active: rgba($primary-300, var(--#{$prefix}link-opacity, 1)),
+    active-decoration: rgba($primary-300, var(--#{$prefix}link-decoration-opacity, 1)) ),
   "neutral": (
-    base: $neutral-700,
-    hover: $neutral-500,
-    active: $neutral-400 ),
-  "lavender": (
-    base: $lavender-600,
-    hover: $lavender-500,
-    active: $lavender-400 ),
-  "oncolor": (
-    base: $white,
-    hover: rgba($white, 0.8),
-    active: rgba($white, 0.6) )
+    base: rgba($neutral-700, var(--#{$prefix}link-opacity, 1)),
+    base-decoration: rgba($neutral-700, var(--#{$prefix}link-decoration-opacity, 1)),
+    hover: rgba($neutral-500, var(--#{$prefix}link-opacity, 1)),
+    hover-decoration: rgba($neutral-500, var(--#{$prefix}link-decoration-opacity, 1)),
+    active: rgba($neutral-400, var(--#{$prefix}link-opacity, 1)),
+    active-decoration: rgba($neutral-400, var(--#{$prefix}link-decoration-opacity, 1)) )
+);
+
+$on-primary-link-variants: (
+  "primary": (
+    base: rgba($white, var(--#{$prefix}link-opacity, 1)),
+    base-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 1)),
+    hover: rgba($white, var(--#{$prefix}link-opacity, 0.8)),
+    hover-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 0.8)),
+    active: rgba($white, var(--#{$prefix}link-opacity, 0.6)),
+    active-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 0.6)) ),
+  "neutral": (
+    base: rgba($white, var(--#{$prefix}link-opacity, 1)),
+    base-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 1)),
+    hover: rgba($white, var(--#{$prefix}link-opacity, 0.8)),
+    hover-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 0.8)),
+    active: rgba($white, var(--#{$prefix}link-opacity, 0.6)),
+    active-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 0.6)) )
 );
 
 // Generate link variant classes
+
 @each $name, $colors in $link-variants {
   .link-#{$name} {
     color: map-get($colors, base) !important;
-    text-decoration-color: map-get($colors, base) !important;
+    text-decoration-color: map-get($colors, base-decoration) !important;
 
     &:visited,
     &:focus-visible {
       color: map-get($colors, base) !important;
-      text-decoration-color: map-get($colors, base) !important;
+      text-decoration-color: map-get($colors, base-decoration) !important;
     }
 
     &:hover,
     &:focus {
       color: map-get($colors, hover) !important;
-      text-decoration-color: map-get($colors, hover) !important;
+      text-decoration-color: map-get($colors, hover-decoration) !important;
     }
 
     &:active {
       color: map-get($colors, active) !important;
-      text-decoration-color: map-get($colors, active) !important;
+      text-decoration-color: map-get($colors, active-decoration) !important;
     }
   }
 }
 
-a.disabled {
-  color: $gray-400 !important;
-  text-decoration-color: $gray-400 !important;
-  pointer-events: none;
+.on-primary  {
+  @each $name, $colors in $on-primary-link-variants {
+    .link-#{$name} {
+      color: map-get($colors, base) !important;
+      text-decoration-color: map-get($colors, base-decoration) !important;
 
-  &.link-oncolor {
-    color: rgba($white, 0.3) !important;
-    text-decoration-color: rgba($white, 0.3) !important;
+      &:visited,
+      &:focus-visible {
+        color: map-get($colors, base) !important;
+        text-decoration-color: map-get($colors, base-decoration) !important;
+      }
+
+      &:hover,
+      &:focus {
+        color: map-get($colors, hover) !important;
+        text-decoration-color: map-get($colors, hover-decoration) !important;
+      }
+
+      &:active {
+        color: map-get($colors, active) !important;
+        text-decoration-color: map-get($colors, active-decoration) !important;
+      }
+    }
   }
 }
 
+a.disabled {
+  color: rgba($gray-400, var(--#{$prefix}link-opacity, 1)) !important;
+  text-decoration-color: rgba($gray-400, var(--#{$prefix}link-opacity, 1)) !important;
+  pointer-events: none;
+}
+

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,7 +86,6 @@
     gap: .75rem;
 
     .btn-close {
-        padding: 0.5rem;
         position: absolute;
         top: 1rem;
         right: unset;
@@ -83,68 +147,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)};
+        }
     }
 
     // ============================================
@@ -158,44 +169,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 {
@@ -204,19 +182,19 @@
             margin-inline-start: 0;
 
             button {
-                --#{$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};
             }
         }
     }

package/theme/dga-ui.scss

@@ -15,8 +15,8 @@
 // ============================================
 
 // Import all component customizations
-@import './customizations/links';
 @import './customizations/global';
+@import './customizations/links';
 @import './customizations/buttons';
 @import './customizations/cards';
 @import './customizations/alerts';
@@ -25,3 +25,4 @@
 @import './customizations/forms';
 @import './customizations/forms-switch';
 @import './customizations/tables';
+@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;
-}