sdga-ui 1.0.8 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sdga-ui",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "DGA UI - Government-Style Bootstrap Theme",
   "keywords": [
     "sdga",
@@ -26,24 +26,40 @@
   "author": "Mahmoud Adel",
   "type": "module",
   "main": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./css/dga-ui.css": "./css/dga-ui.css",
+    "./css/*": "./css/*",
+    "./fonts/*": "./fonts/*",
+    "./theme/*": "./theme/*"
+  },
+  "files": [
+    "css",
+    "fonts",
+    "theme",
+    "README.md",
+    "LICENSE"
+  ],
   "scripts": {
     "test": "echo \"No tests yet\" && exit 0",
     "format": "prettier --write \"**/*.{js,json,md,css,scss}\"",
     "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.version=pkg.version;demoPkg.dependencies['sdga-ui']='^'+pkg.version;fs.writeFileSync('demo-angular/package.json',JSON.stringify(demoPkg,null,2)+'\\n');console.log('Synced demo-angular version to',pkg.version);\"",
+    "update-docs-version": "node -e \"const fs=require('fs');const pkg=JSON.parse(fs.readFileSync('package.json'));const docsPkg=JSON.parse(fs.readFileSync('docs/package.json'));docsPkg.version=pkg.version;fs.writeFileSync('docs/package.json',JSON.stringify(docsPkg,null,2)+'\\n');console.log('Synced docs version to',pkg.version);\"",
     "prepublishOnly": "npm run build-css",
     "preversion": "npm run build-css",
-    "version": "npm run update-demo-version && git add .",
+    "version": "npm run update-docs-version && git add .",
     "postversion": "git push --follow-tags"
   },
   "peerDependencies": {
-    "bootstrap": "^5.3.8"
+    "bootstrap": "^5.3.8",
+    "bootstrap-icons": "^1.13.1"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.19",
     "bootstrap": "^5.3.8",
+    "bootstrap-icons": "^1.13.1",
     "postcss": "^8.4.38",
     "prettier": "^3.7.3",
     "sass": "^1.69.5"

package/theme/_variables.scss

@@ -35,8 +35,8 @@
 @import 'components/dropdowns';
 @import 'components/cards';
 @import 'components/tables';
-
 @import 'components/navbar';
+
 @import 'components/modals';
 @import 'components/tooltips';
 @import 'components/popovers';

package/theme/components/_buttons.scss

@@ -60,9 +60,9 @@ $btn-link-focus-shadow-rgb: none;
 $btn-link-disabled-color: $gray-600;
 
 // Button close
-$btn-close-width: .7031rem;
+$btn-close-width: .56rem;
 $btn-close-height: $btn-close-width;
-$btn-close-padding-x: .5rem;
+$btn-close-padding-x: .3rem;
 $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>");

package/theme/components/_dropdowns.scss

@@ -19,8 +19,8 @@ $dropdown-link-color: $gray-900;
 $dropdown-link-hover-color: darken($gray-900, 5%);
 $dropdown-link-hover-bg: $gray-100;
 
-$dropdown-link-active-color: $white;
-$dropdown-link-active-bg: $primary;
+$dropdown-link-active-color: $black;
+$dropdown-link-active-bg: $neutral-200;
 
 $dropdown-link-disabled-color: $gray-500;
 

package/theme/components/_navbar.scss

@@ -1,9 +1,10 @@
 // Bootstrap 5.3 - Navbar Component Variables
 
-$navbar-padding-y: 0.5rem;
-$navbar-padding-x: 1rem;
+$navbar-padding-y: 0;
+$navbar-padding-x: 2rem;
 
-$navbar-nav-link-padding-x: 0.5rem;
+$navbar-nav-link-padding-x: 1rem;
+$navbar-nav-link-padding-y: 0.5rem;
 
 $navbar-brand-font-size: $font-size-lg;
 $navbar-brand-height: null;
@@ -29,12 +30,12 @@ $navbar-dark-brand-color: $navbar-dark-active-color;
 $navbar-dark-brand-hover-color: $navbar-dark-active-color;
 
 // Navbar light theme
-$navbar-light-color: rgba($black, 0.55);
-$navbar-light-hover-color: rgba($black, 0.7);
-$navbar-light-active-color: rgba($black, 0.9);
+$navbar-light-color: $black;
+$navbar-light-hover-color: $black;
+$navbar-light-active-color: $black;
 $navbar-light-disabled-color: rgba($black, 0.3);
-$navbar-light-icon-color: rgba($black, 0.5);
+$navbar-light-icon-color: $black;
 $navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
-$navbar-light-toggler-border-color: rgba($black, 0.1);
+$navbar-light-toggler-border-color: transparent;
 $navbar-light-brand-color: $navbar-light-active-color;
-$navbar-light-brand-hover-color: $navbar-light-active-color;
+$navbar-light-brand-hover-color: $navbar-light-active-color;

package/theme/config/_base.scss

@@ -44,7 +44,7 @@ $focus-ring-width: 0.25rem;
 $focus-ring-opacity: 0.25;
 $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;
+$focus-ring-box-shadow: none;
 
 // ============================================
 // UTILITIES

package/theme/customizations/_alerts.scss

@@ -7,78 +7,62 @@
 
 // Define alert color variants
 $alert-variants: (
-  "primary": (
-    border-color: rgba($primary-600, 0.7),
+  "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),
+    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),
+    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),
+    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),
+    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),
+    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),
+    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),
+    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)
-  )
+    mobile-border-top: rgba($secondary-200, 0.7))
 );
 
 // ============================================
@@ -131,6 +115,11 @@ $alert-variants: (
     padding-right: unset;
     padding-inline-end: $alert-dismissible-padding-r;
     padding-inline-start: $alert-padding-x;
+    
+    .btn-close {
+      right: unset;
+      inset-inline-end: 0;
+    }
   }
 
   // Generate alert variant classes
@@ -151,13 +140,14 @@ $alert-variants: (
     --#{$prefix}alert-title-color: #{$gray-800};
   }
 
-  .alert-footer{
+  .alert-footer {
     display: flex;
     gap: 1.25rem;
     margin-top: 1rem;
     margin-inline-start: -0.75rem;
   }
 
+
   // ============================================
   // MOBILE RESPONSIVE
   // ============================================
@@ -166,6 +156,7 @@ $alert-variants: (
     gap: 1rem;
     border-inline-start-width: $alert-border-width;
     border-top-width: 0.5rem;
+    position: relative;
 
     @each $name, $colors in $alert-variants {
       &.alert-#{$name} {
@@ -190,6 +181,7 @@ $alert-variants: (
       button {
         width: 100%;
         justify-content: center;
+
         &:first-of-type {
           --#{$prefix}btn-color: #{$black};
           --#{$prefix}btn-bg: #{$secondary-100};
@@ -207,17 +199,9 @@ $alert-variants: (
         }
       }
     }
-  }
-}
-// ============================================
-// DISMISSIBLE ALERTS
-// ============================================
-.alert-dismissible {
-  .btn-close {
-    padding: $btn-close-padding-y $btn-close-padding-x;
-    position: absolute;
-    top: 1rem;
-    right: unset;
-    inset-inline-end: 1.5rem;
+
+    &.alert-dismissible {
+      padding: $alert-padding-y $alert-padding-x;
+    }
   }
 }

package/theme/customizations/_cards.scss

@@ -5,37 +5,7 @@
 // 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
@@ -84,45 +54,6 @@ $card-icon-variants: (
   &.disabled {
     background-color: $gray-200;
     cursor: not-allowed;
-
-    .card-title-icon {
-        &::after {
-            background-color: $gray-100;
-        }
-        color: $gray-400;
-    }
-    
-  }
-
-  .card-title-icon {
-    &::after {
-      content: '';
-      width: 3rem;
-      height: 3rem;
-      border-radius: $radius-full;
-      background-color: $primary-50;
-      position: absolute;
-      z-index: -1;
-    }
-    width: 3rem;
-    height: 3rem;
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    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 {
@@ -166,4 +97,4 @@ $card-icon-variants: (
       }
     }
   }
-}
+}

package/theme/customizations/_global.scss

@@ -18,16 +18,19 @@
   --#{$prefix}text-muted: #{rgba($white, 0.8)};
   --#{$prefix}border-color: #{rgba($white, 0.3)};
 
-  *:focus-visible {
+  *:focus-visible,
+  *:focus {
     outline-color: $white !important;
   }
 }
 
 .list-unstyled {
-    padding-left: unset;
-    padding-right: unset;
+  padding-left: unset;
+  padding-inline-start: 0;
 }
 
+
+
 // ============================================
 // SAFARI COMPATIBILITY
 // ============================================
@@ -40,4 +43,4 @@ th {
 // Fix text-size-adjust for modern browsers
 html {
   text-size-adjust: 100%;
-}
+}

package/theme/customizations/_icon-featured.scss

@@ -0,0 +1,122 @@
+// 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 )
+);
+
+.dga-featured-icon {
+    display: flex;
+    width: 3rem;
+    height: 3rem;
+    justify-content: center;
+    align-items: center;
+    gap: .5rem;
+    background: $primary-50;
+    font-size: 1.3rem;
+
+    &.dga-featured-icon-sm {
+        width: 2.5rem;
+        height: 2.5rem;
+        font-size: 0.875rem;
+    }
+
+    &.dga-featured-icon-md {
+        width: 3rem;
+        height: 3rem;
+        font-size: 1.3rem;
+    }
+
+    &.dga-featured-icon-lg {
+        width: 4rem;
+        height: 4rem;
+        font-size: 1.875rem;
+    }
+
+    &.dga-featured-icon-circle {
+        border-radius: $radius-full;
+    }
+
+    &.dga-featured-icon-rounded-lg {
+        border-radius: $radius-lg;
+    }
+
+    &.dga-featured-icon-rounded-sm {
+        border-radius: $radius-sm;
+    }
+
+    &.dga-featured-icon-rounded-md,
+    &.dga-featured-icon-rounded {
+        border-radius: $radius-md;
+    }
+
+    @each $name, $colors in $card-icon-variants {
+        &.dga-featured-icon-#{$name} {
+            background-color: map-get($colors, icon-bg);
+
+            svg,
+            i {
+                fill: map-get($colors, icon-color);
+                color: map-get($colors, icon-color);
+                stroke: map-get($colors, icon-color);
+            }
+
+            &.disabled {
+                background-color: $gray-100;
+
+                svg,
+                i {
+                    fill: $gray-400;
+                    color: $gray-400;
+                    stroke: $gray-400;
+                }
+            }
+        }
+    }
+
+    &.disabled {
+        background-color: $gray-100;
+
+        svg,
+        i {
+            fill: $gray-400;
+            color: $gray-400;
+            stroke: $gray-400;
+        }
+    }
+
+    svg,
+    i {
+        fill: $primary-600;
+        color: $primary-600;
+        font-size: 1em;
+        display: grid;
+        place-items: center;
+    }
+}
+
+
+.on-primary {
+    .dga-featured-icon,
+    &.dga-featured-icon {
+        background: rgba($white, 0.1);
+
+        svg,
+        i {
+            stroke: $white;
+            fill: $white;
+            color: $white;
+        }
+    }
+}

package/theme/customizations/_links.scss

@@ -7,37 +7,33 @@
 
 // Define link color variants with their shades
 $link-variants: (
-  "primary": (
-    base: rgba($primary-600, var(--#{$prefix}link-opacity, 1)),
+  "primary": (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: rgba($neutral-700, var(--#{$prefix}link-opacity, 1)),
+    active-decoration: rgba($primary-300, var(--#{$prefix}link-decoration-opacity, 1))),
+  "neutral": (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)) )
+    active-decoration: rgba($neutral-400, var(--#{$prefix}link-decoration-opacity, 1)))
 );
 
 $on-primary-link-variants: (
-  "primary": (
-    base: rgba($white, var(--#{$prefix}link-opacity, 1)),
+  "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)),
+    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)) )
+    active-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 0.6)))
 );
 
 // Generate link variant classes
@@ -63,10 +59,16 @@ $on-primary-link-variants: (
       color: map-get($colors, active) !important;
       text-decoration-color: map-get($colors, active-decoration) !important;
     }
+
+    &.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;
+    }
   }
 }
 
-.on-primary  {
+.on-primary {
   @each $name, $colors in $on-primary-link-variants {
     .link-#{$name} {
       color: map-get($colors, base) !important;
@@ -88,13 +90,12 @@ $on-primary-link-variants: (
         color: map-get($colors, active) !important;
         text-decoration-color: map-get($colors, active-decoration) !important;
       }
+
+      &.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;
+      }
     }
   }
-}
-
-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;
-}
-
+}