sdga-ui 1.0.4 → 1.0.6

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

@@ -10,114 +10,10 @@ import { CodeExampleComponent } from '../../shared/code-example/code-example.com
   styleUrl: './links.component.scss'
 })
 export class LinksComponent {
-  // Basic link colors
-  basicLinksCode = `<a href="#" class="link-primary">Primary link</a>
-<a href="#" class="link-secondary">Secondary link</a>
-<a href="#" class="link-success">Success link</a>
-<a href="#" class="link-danger">Danger link</a>
-<a href="#" class="link-warning">Warning link</a>
-<a href="#" class="link-info">Info link</a>`;
+  // Basic link variants (primary, neutral, on-color, disabled)
+  basicLinksCode = `<a href=\"javascript:void(0);\" class=\"link-primary link-offset-2\">Primary link</a>
+<a href=\"javascript:void(0);\" class=\"link-neutral link-offset-2\">Neutral link</a>
+<div class=\"p-3 bg-primary rounded-2\"><a href=\"javascript:void(0);\" class=\"link-oncolor link-offset-2\">On-color link</a></div>
+<a href=\"javascript:void(0);\" class=\"link-primary disabled link-offset-2\" aria-disabled=\"true\" tabindex=\"-1\">Disabled link</a>`;
 
-  // Underline utilities with opacity variants
-  underlineLinksCode = `<!-- Default underline -->
-<a href="#" class="link-underline">Link with underline</a>
-
-<!-- Opacity variants -->
-<a href="#" class="link-underline-opacity-0">No underline (opacity 0)</a>
-<a href="#" class="link-underline-opacity-25">25% underline opacity</a>
-<a href="#" class="link-underline-opacity-50">50% underline opacity</a>
-<a href="#" class="link-underline-opacity-75">75% underline opacity</a>
-<a href="#" class="link-underline-opacity-100">100% underline opacity</a>`;
-
-  // Hover underline effects
-  hoverLinksCode = `<!-- Show underline on hover -->
-<a href="#" class="link-primary link-underline-opacity-0 link-underline-opacity-100-hover">
-  Underline appears on hover
-</a>
-
-<!-- Hide underline on hover -->
-<a href="#" class="link-secondary link-underline-opacity-100 link-underline-opacity-0-hover">
-  Underline disappears on hover
-</a>`;
-
-  // Underline offset utilities
-  offsetLinksCode = `<a href="#" class="link-offset-1">Link with offset 1</a>
-<a href="#" class="link-offset-2">Link with offset 2</a>
-<a href="#" class="link-offset-3">Link with offset 3</a>`;
-
-  // Combined offset and hover
-  offsetHoverCode = `<a href="#" class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover">
-  Link with offset that changes on hover
-</a>`;
-
-  // Links with icons
-  iconLinksCode = `<!-- Icon before text -->
-<a href="#" class="link-primary">
-  <i class="hgi hgi-stroke hgi-link-01 me-2"></i>
-  Link with leading icon
-</a>
-
-<!-- Icon after text -->
-<a href="#" class="link-secondary">
-  External link
-  <i class="hgi hgi-stroke hgi-link-external-01 ms-2"></i>
-</a>
-
-<!-- Icon with arrow -->
-<a href="#" class="link-success">
-  <i class="hgi hgi-stroke hgi-arrow-right-01 me-2"></i>
-  Arrow link
-</a>`;
-
-  // Custom link styles - subtle
-  subtleLinkCode = `<a href="#" class="custom-link-subtle">Subtle link style</a>`;
-
-  subtleLinkScss = `.custom-link-subtle {
-  color: var(--dga-neutral-600);
-  text-decoration: none;
-  
-  &:hover {
-    color: var(--dga-primary);
-    text-decoration: underline;
-  }
-}`;
-
-  // Custom link styles - bold
-  boldLinkCode = `<a href="#" class="custom-link-bold">Bold link style</a>`;
-
-  boldLinkScss = `.custom-link-bold {
-  color: var(--dga-primary);
-  font-weight: 600;
-  text-decoration: none;
-  
-  &:hover {
-    color: var(--dga-primary-dark);
-    text-decoration: underline;
-  }
-}`;
-
-  // Custom link styles - decorated
-  decoratedLinkCode = `<a href="#" class="custom-link-decorated">Decorated link with animated underline</a>`;
-
-  decoratedLinkScss = `.custom-link-decorated {
-  color: var(--dga-secondary);
-  text-decoration: none;
-  position: relative;
-  padding-bottom: 2px;
-  
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 0;
-    height: 2px;
-    background-color: var(--dga-secondary);
-    transition: width 0.3s ease;
-  }
-  
-  &:hover::after {
-    width: 100%;
-  }
-}`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sdga-ui",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "DGA UI - Government-Style Bootstrap Theme",
   "keywords": [
     "sdga",
@@ -14,7 +14,7 @@
     "design",
     "template"
   ],
-  "homepage": "https://github.com/MahmoudAdel1996/dga-ui#readme",
+  "homepage": "https://mahmoudadel1996.github.io/dga-ui/",
   "bugs": {
     "url": "https://github.com/MahmoudAdel1996/dga-ui/issues"
   },
@@ -32,9 +32,10 @@
     "format:check": "prettier --check \"**/*.{js,json,md,css,scss}\"",
     "build-css": "sass --load-path=node_modules theme/dga-ui.scss css/dga-ui.css",
     "watch-css": "sass --load-path=node_modules --watch theme/dga-ui.scss css/dga-ui.css",
+    "update-demo-version": "node -e \"const fs=require('fs');const pkg=JSON.parse(fs.readFileSync('package.json'));const demoPkg=JSON.parse(fs.readFileSync('demo-angular/package.json'));demoPkg.dependencies['sdga-ui']='^'+pkg.version;fs.writeFileSync('demo-angular/package.json',JSON.stringify(demoPkg,null,2)+'\\n');\"",
     "prepublishOnly": "npm run build-css",
     "preversion": "npm run build-css",
-    "version": "git add .",
+    "version": "npm run update-demo-version && git add .",
     "postversion": "git push --follow-tags"
   },
   "peerDependencies": {

package/theme/components/_cards.scss

@@ -18,4 +18,3 @@ $card-height: null;
 $card-color: null;
 $card-bg: var(--#{$prefix}body-bg);
 $card-img-overlay-padding: $spacer;
-$card-group-margin: $grid-gutter-width * .5;

package/theme/components/_pagination.scss

@@ -16,12 +16,12 @@ $pagination-border-width: 1px;
 $pagination-margin-start: calc(#{$pagination-border-width} * -1);
 $pagination-border-color: $gray-300;
 
-$pagination-focus-color: $link-hover-color;
+$pagination-focus-color: null;
 $pagination-focus-bg: $gray-200;
 $pagination-focus-box-shadow: $input-focus-box-shadow;
 $pagination-focus-outline: 0;
 
-$pagination-hover-color: $link-hover-color;
+$pagination-hover-color: null;
 $pagination-hover-bg: $gray-200;
 $pagination-hover-border-color: $gray-300;
 

package/theme/config/_base.scss

@@ -17,15 +17,6 @@ $body-bg: $white;
 $body-color: $black;
 $body-text-align: start;
 
-// ============================================
-// LINKS
-// ============================================
-
-$link-color: $primary;
-$link-decoration: none;
-$link-hover-color: color.scale($primary, $lightness: -32%);
-$link-hover-decoration: underline;
-
 // ============================================
 // COMPONENTS BASE
 // ============================================
@@ -33,16 +24,7 @@ $link-hover-decoration: underline;
 $component-active-color: $white;
 $component-active-bg: $primary;
 
-// Border
-$border-width: 1px;
-$border-widths: (
-  0: 0,
-  1: 1px,
-  2: 2px,
-  3: 3px,
-  4: 4px,
-  5: 5px
-);
+
 // Shadow base color (using SDGA neutral-900 shade)
 $shadow-color: $gray-900;
 $border-color: $gray-500;
@@ -50,7 +32,7 @@ $border-color: $gray-500;
 // Focus
 $focus-ring-width: 0.25rem;
 $focus-ring-opacity: 0.25;
-$focus-ring-color: rgba($shadow-color, $focus-ring-opacity);
+$focus-ring-color: shadow-rgba($focus-ring-opacity);
 $focus-ring-blur: 0;
 $focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color;
 
@@ -65,27 +47,6 @@ $enable-rfs: true;
 $enable-important-utilities: true;
 $enable-ripple-effect: true !default;
 
-// ============================================
-// CONTAINER
-// ============================================
-
-$container-max-widths: (
-  sm: 540px,
-  md: 720px,
-  lg: 960px,
-  xl: 1140px,
-  xxl: 1320px
-);
-
-$container-padding-x: 1rem;
-
-// ============================================
-// GRID
-// ============================================
-
-$grid-columns: 12;
-$grid-gutter-width: 1.5rem;
-$grid-row-columns: 6;
 
 // ============================================
 // Z-INDEX

package/theme/customizations/_alerts.scss

@@ -218,17 +218,6 @@
         }
       }
     }
-
-    &.alert-dismissible {
-      padding-inline-end: $alert-padding-x;
-      padding-inline-start: $alert-padding-x;
-
-      .btn-close {
-        position: absolute;
-        top: 0.5rem;
-        inset-inline-end: 0.5rem;
-      }
-    }
   }
 }
 // ============================================
@@ -236,7 +225,10 @@
 // ============================================
 .alert-dismissible {
   .btn-close {
+    padding: 0.5rem;
+    position: absolute;
+    top: 1rem;
     right: unset;
-    inset-inline-end: 0;
+    inset-inline-end: 1.5rem;
   }
-}
+}

package/theme/customizations/_links.scss

@@ -1,95 +1,83 @@
 // Links Customizations - SDGA Custom Enhancements
+// Following Bootstrap 5.3 recommended practices
 
 // ============================================
-// LINK COLOR VARIANTS
+// LINK COLOR VARIANTS - Using Sass map and @each loop
 // ============================================
 
-.link-primary {
-  color: $primary-600 !important;
-
-  &:hover,
-  &:focus {
-    color: $primary-400 !important;
-    text-decoration-color: $primary-400 !important;
-  }
-
-  &:active {
-    color: $primary-300 !important;
-    text-decoration-color: $primary-300 !important;
-  }
-}
-
-.link-secondary {
-  color: $secondary-600 !important;
-
-  &:hover,
-  &:focus {
-    color: $secondary-400 !important;
-    text-decoration-color: $secondary-400 !important;
-  }
-
-  &:active {
-    color: $secondary-300 !important;
-    text-decoration-color: $secondary-300 !important;
+// 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 ),
+  "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) )
+);
+
+// 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;
+
+    &:visited,
+    &:focus-visible {
+      color: map-get($colors, base) !important;
+      text-decoration-color: map-get($colors, base) !important;
+    }
+
+    &:hover,
+    &:focus {
+      color: map-get($colors, hover) !important;
+      text-decoration-color: map-get($colors, hover) !important;
+    }
+
+    &:active {
+      color: map-get($colors, active) !important;
+      text-decoration-color: map-get($colors, active) !important;
+    }
   }
 }
 
-.link-success {
-  color: $success-600 !important;
-
-  &:hover,
-  &:focus {
-    color: $success-400 !important;
-    text-decoration-color: $success-400 !important;
-  }
+a.disabled {
+  color: $gray-400 !important;
+  text-decoration-color: $gray-400 !important;
+  pointer-events: none;
 
-  &:active {
-    color: $success-300 !important;
-    text-decoration-color: $success-300 !important;
+  &.link-oncolor {
+    color: rgba($white, 0.3) !important;
+    text-decoration-color: rgba($white, 0.3) !important;
   }
 }
 
-.link-danger {
-  color: $danger-600 !important;
-
-  &:hover,
-  &:focus {
-    color: $danger-400 !important;
-    text-decoration-color: $danger-400 !important;
-  }
-
-  &:active {
-    color: $danger-300 !important;
-    text-decoration-color: $danger-300 !important;
-  }
-}
-
-.link-warning {
-  color: $warning-600 !important;
-
-  &:hover,
-  &:focus {
-    color: $warning-400 !important;
-    text-decoration-color: $warning-400 !important;
-  }
-
-  &:active {
-    color: $warning-300 !important;
-    text-decoration-color: $warning-300 !important;
-  }
-}
-
-.link-info {
-  color: $info-600 !important;
-
-  &:hover,
-  &:focus {
-    color: $info-400 !important;
-    text-decoration-color: $info-400 !important;
-  }
-
-  &:active {
-    color: $info-300 !important;
-    text-decoration-color: $info-300 !important;
-  }
-}

package/theme/customizations/_toasts.scss

@@ -21,10 +21,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%;

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,3 @@
 @import './customizations/forms';
 @import './customizations/forms-switch';
 @import './customizations/tables';
-@import './customizations/links';
-@import './customizations/utilities';

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;
-  }
-}