sdga-ui 1.0.7 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sdga-ui",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "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

@@ -26,7 +26,6 @@
 @import 'config/base';
 @import 'config/effects';
 @import 'config/radius';
-@import 'config/contexts'; // Context-aware theming system
 
 // Component Variables
 @import 'components/buttons';

package/theme/components/_buttons.scss

@@ -62,7 +62,7 @@ $btn-link-disabled-color: $gray-600;
 // Button close
 $btn-close-width: .7031rem;
 $btn-close-height: $btn-close-width;
-$btn-close-padding-x: .6481rem;
+$btn-close-padding-x: .5rem;
 $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>");
@@ -72,304 +72,3 @@ $btn-close-hover-opacity: 0.75;
 $btn-close-focus-opacity: 1;
 $btn-close-disabled-opacity: 0.25;
 $btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
-
-// ============================================
-// CUSTOM BUTTON VARIANTS
-// ============================================
-
-// Primary Button Variant
-$btn-primary-color: $white;
-$btn-primary-bg: $primary-600;
-$btn-primary-border-color: $primary-600;
-$btn-primary-hover-color: $white;
-$btn-primary-hover-bg: $primary-700;
-$btn-primary-hover-border-color: $primary-700;
-$btn-primary-active-color: $white;
-$btn-primary-active-bg: $primary-800;
-$btn-primary-active-border-color: $primary-800;
-$btn-primary-focus-color: $white;
-$btn-primary-focus-bg: $primary-600;
-$btn-primary-focus-border-color: $black;
-$btn-primary-focus-shadow-rgb: null;
-$btn-primary-disabled-color: $white;
-$btn-primary-disabled-bg: $primary-200;
-$btn-primary-disabled-border-color: $primary-200;
-
-// Primary Outline Button Variant
-$btn-outline-primary-color: $primary-600;
-$btn-outline-primary-border-color: $primary-600;
-$btn-outline-primary-hover-color: $white;
-$btn-outline-primary-hover-bg: $primary-600;
-$btn-outline-primary-hover-border-color: $primary-600;
-$btn-outline-primary-active-color: $white;
-$btn-outline-primary-active-bg: $primary-700;
-$btn-outline-primary-active-border-color: $primary-700;
-$btn-outline-primary-focus-color: $primary-700;
-$btn-outline-primary-focus-bg: transparent;
-$btn-outline-primary-focus-border-color: $black;
-$btn-outline-primary-focus-shadow-rgb: null;
-$btn-outline-primary-disabled-color: $primary-400;
-$btn-outline-primary-disabled-bg: transparent;
-$btn-outline-primary-disabled-border-color: $primary-400;
-
-// Secondary Button Variant
-$btn-secondary-color: $black;
-$btn-secondary-bg: $secondary-100;
-$btn-secondary-border-color: $secondary-100;
-$btn-secondary-hover-color: $black;
-$btn-secondary-hover-bg: $secondary-200;
-$btn-secondary-hover-border-color: $secondary-200;
-$btn-secondary-active-color: $black;
-$btn-secondary-active-bg: $secondary-200;
-$btn-secondary-active-border-color: $secondary-200;
-$btn-secondary-focus-color: $black;
-$btn-secondary-focus-bg: $secondary-100;
-$btn-secondary-focus-border-color: $black;
-$btn-secondary-focus-shadow-rgb: null;
-$btn-secondary-disabled-color: $secondary-400;
-$btn-secondary-disabled-bg: $secondary-200;
-$btn-secondary-disabled-border-color: $secondary-200;
-
-// Secondary Outline Button Variant
-$btn-outline-secondary-color: $black;
-$btn-outline-secondary-border-color: $secondary-300;
-$btn-outline-secondary-hover-color: $black;
-$btn-outline-secondary-hover-bg: $secondary-100;
-$btn-outline-secondary-hover-border-color: $secondary-200;
-$btn-outline-secondary-active-color: $black;
-$btn-outline-secondary-active-bg: $secondary-200;
-$btn-outline-secondary-active-border-color: $secondary-300;
-$btn-outline-secondary-focus-color: $black;
-$btn-outline-secondary-focus-bg: transparent;
-$btn-outline-secondary-focus-border-color: $black;
-$btn-outline-secondary-focus-shadow-rgb: null;
-$btn-outline-secondary-disabled-color: $secondary-400;
-$btn-outline-secondary-disabled-bg: transparent;
-$btn-outline-secondary-disabled-border-color: $secondary-400;
-
-// Danger/Destructive Button Variant
-$btn-danger-color: $white;
-$btn-danger-bg: $danger-600;
-$btn-danger-border-color: $danger-600;
-$btn-danger-hover-color: $white;
-$btn-danger-hover-bg: $danger-700;
-$btn-danger-hover-border-color: $danger-700;
-$btn-danger-active-color: $white;
-$btn-danger-active-bg: $danger-800;
-$btn-danger-active-border-color: $danger-800;
-$btn-danger-focus-color: $white;
-$btn-danger-focus-bg: $danger-600;
-$btn-danger-focus-border-color: $black;
-$btn-danger-focus-shadow-rgb: null;
-$btn-danger-disabled-color: $white;
-$btn-danger-disabled-bg: $danger-200;
-$btn-danger-disabled-border-color: $danger-200;
-
-// Danger Outline Button Variant
-$btn-outline-danger-color: $danger-600;
-$btn-outline-danger-border-color: $danger-600;
-$btn-outline-danger-hover-color: $white;
-$btn-outline-danger-hover-bg: $danger-600;
-$btn-outline-danger-hover-border-color: $danger-600;
-$btn-outline-danger-active-color: $white;
-$btn-outline-danger-active-bg: $danger-700;
-$btn-outline-danger-active-border-color: $danger-700;
-$btn-outline-danger-focus-color: $danger-700;
-$btn-outline-danger-focus-bg: transparent;
-$btn-outline-danger-focus-border-color: $black;
-$btn-outline-danger-focus-shadow-rgb: null;
-$btn-outline-danger-disabled-color: $danger-400;
-$btn-outline-danger-disabled-bg: transparent;
-$btn-outline-danger-disabled-border-color: $danger-400;
-
-// Success Button Variant
-$btn-success-color: $white;
-$btn-success-bg: $success-600;
-$btn-success-border-color: $success-600;
-$btn-success-hover-color: $white;
-$btn-success-hover-bg: $success-700;
-$btn-success-hover-border-color: $success-700;
-$btn-success-active-color: $white;
-$btn-success-active-bg: $success-800;
-$btn-success-active-border-color: $success-800;
-$btn-success-focus-color: $white;
-$btn-success-focus-bg: $success-600;
-$btn-success-focus-border-color: $black;
-$btn-success-focus-shadow-rgb: null;
-$btn-success-disabled-color: $white;
-$btn-success-disabled-bg: $success-200;
-$btn-success-disabled-border-color: $success-200;
-
-// Success Outline Button Variant
-$btn-outline-success-color: $success-600;
-$btn-outline-success-border-color: $success-600;
-$btn-outline-success-hover-color: $white;
-$btn-outline-success-hover-bg: $success-600;
-$btn-outline-success-hover-border-color: $success-600;
-$btn-outline-success-active-color: $white;
-$btn-outline-success-active-bg: $success-700;
-$btn-outline-success-active-border-color: $success-700;
-$btn-outline-success-focus-color: $success-700;
-$btn-outline-success-focus-bg: transparent;
-$btn-outline-success-focus-border-color: $black;
-$btn-outline-success-focus-shadow-rgb: null;
-$btn-outline-success-disabled-color: $success-400;
-$btn-outline-success-disabled-bg: transparent;
-$btn-outline-success-disabled-border-color: $success-400;
-
-// Warning Button Variant
-$btn-warning-color: $white;
-$btn-warning-bg: $warning-600;
-$btn-warning-border-color: $warning-600;
-$btn-warning-hover-color: $white;
-$btn-warning-hover-bg: $warning-700;
-$btn-warning-hover-border-color: $warning-700;
-$btn-warning-active-color: $white;
-$btn-warning-active-bg: $warning-800;
-$btn-warning-active-border-color: $warning-800;
-$btn-warning-focus-color: $white;
-$btn-warning-focus-bg: $warning-600;
-$btn-warning-focus-border-color: $black;
-$btn-warning-focus-shadow-rgb: null;
-$btn-warning-disabled-color: $white;
-$btn-warning-disabled-bg: $warning-200;
-$btn-warning-disabled-border-color: $warning-200;
-
-// Warning Outline Button Variant
-$btn-outline-warning-color: $warning-600;
-$btn-outline-warning-border-color: $warning-600;
-$btn-outline-warning-hover-color: $white;
-$btn-outline-warning-hover-bg: $warning-600;
-$btn-outline-warning-hover-border-color: $warning-600;
-$btn-outline-warning-active-color: $white;
-$btn-outline-warning-active-bg: $warning-700;
-$btn-outline-warning-active-border-color: $warning-700;
-$btn-outline-warning-focus-color: $warning-700;
-$btn-outline-warning-focus-bg: transparent;
-$btn-outline-warning-focus-border-color: $black;
-$btn-outline-warning-focus-shadow-rgb: null;
-$btn-outline-warning-disabled-color: $warning-400;
-$btn-outline-warning-disabled-bg: transparent;
-$btn-outline-warning-disabled-border-color: $warning-400;
-
-// Info Button Variant
-$btn-info-color: $white;
-$btn-info-bg: $info-600;
-$btn-info-border-color: $info-600;
-$btn-info-hover-color: $white;
-$btn-info-hover-bg: $info-700;
-$btn-info-hover-border-color: $info-700;
-$btn-info-active-color: $white;
-$btn-info-active-bg: $info-800;
-$btn-info-active-border-color: $info-800;
-$btn-info-focus-color: $white;
-$btn-info-focus-bg: $info-600;
-$btn-info-focus-border-color: $black;
-$btn-info-focus-shadow-rgb: null;
-$btn-info-disabled-color: $white;
-$btn-info-disabled-bg: $info-200;
-$btn-info-disabled-border-color: $info-200;
-
-// Info Outline Button Variant
-$btn-outline-info-color: $info-600;
-$btn-outline-info-border-color: $info-600;
-$btn-outline-info-hover-color: $white;
-$btn-outline-info-hover-bg: $info-600;
-$btn-outline-info-hover-border-color: $info-600;
-$btn-outline-info-active-color: $white;
-$btn-outline-info-active-bg: $info-700;
-$btn-outline-info-active-border-color: $info-700;
-$btn-outline-info-focus-color: $info-700;
-$btn-outline-info-focus-bg: transparent;
-$btn-outline-info-focus-border-color: $black;
-$btn-outline-info-focus-shadow-rgb: null;
-$btn-outline-info-disabled-color: $info-400;
-$btn-outline-info-disabled-bg: transparent;
-$btn-outline-info-disabled-border-color: $info-400;
-
-// Neutral Button Variant
-$btn-neutral-color: $white;
-$btn-neutral-bg: $neutral-950;
-$btn-neutral-border-color: $neutral-950;
-$btn-neutral-hover-color: $white;
-$btn-neutral-hover-bg: $neutral-800;
-$btn-neutral-hover-border-color: $neutral-800;
-$btn-neutral-active-color: $white;
-$btn-neutral-active-bg: $neutral-600;
-$btn-neutral-active-border-color: $neutral-600;
-$btn-neutral-focus-color: $white;
-$btn-neutral-focus-bg: $neutral-950;
-$btn-neutral-focus-border-color: $black;
-$btn-neutral-focus-shadow-rgb: 77, 87, 97;
-$btn-neutral-disabled-color: $neutral-400;
-$btn-neutral-disabled-bg: $neutral-200;
-$btn-neutral-disabled-border-color: $neutral-200;
-
-// Neutral Outline Button Variant
-$btn-outline-neutral-color: $neutral-600;
-$btn-outline-neutral-border-color: $neutral-600;
-$btn-outline-neutral-hover-color: $white;
-$btn-outline-neutral-hover-bg: $neutral-600;
-$btn-outline-neutral-hover-border-color: $neutral-600;
-$btn-outline-neutral-active-color: $white;
-$btn-outline-neutral-active-bg: $neutral-700;
-$btn-outline-neutral-active-border-color: $neutral-700;
-$btn-outline-neutral-focus-color: $neutral-700;
-$btn-outline-neutral-focus-bg: transparent;
-$btn-outline-neutral-focus-border-color: $neutral-600;
-$btn-outline-neutral-focus-shadow-rgb: null;
-$btn-outline-neutral-disabled-color: $neutral-400;
-$btn-outline-neutral-disabled-bg: transparent;
-$btn-outline-neutral-disabled-border-color: $neutral-400;
-
-// Subtle Outline Button Variant
-$btn-subtle-color: $black;
-$btn-subtle-border-color: transparent;
-$btn-subtle-hover-color: $black;
-$btn-subtle-hover-bg: transparent;
-$btn-subtle-hover-border-color: transparent;
-$btn-subtle-active-color: $black;
-$btn-subtle-active-bg: transparent;
-$btn-subtle-active-border-color: transparent;
-$btn-subtle-focus-color: $black;
-$btn-subtle-focus-bg: transparent;
-$btn-subtle-focus-border-color: transparent;
-$btn-subtle-focus-shadow-rgb: null;
-$btn-subtle-disabled-color: $neutral-400;
-$btn-subtle-disabled-bg: transparent;
-$btn-subtle-disabled-border-color: transparent;
-
-// Lavender Button Variant
-$btn-lavender-color: $white;
-$btn-lavender-bg: $lavender-600;
-$btn-lavender-border-color: $lavender-600;
-$btn-lavender-hover-color: $white;
-$btn-lavender-hover-bg: $lavender-700;
-$btn-lavender-hover-border-color: $lavender-700;
-$btn-lavender-active-color: $white;
-$btn-lavender-active-bg: $lavender-800;
-$btn-lavender-active-border-color: $lavender-800;
-$btn-lavender-focus-color: $white;
-$btn-lavender-focus-bg: $lavender-600;
-$btn-lavender-focus-border-color: $lavender-700;
-$btn-lavender-focus-shadow-rgb: null;
-$btn-lavender-disabled-color: $white;
-$btn-lavender-disabled-bg: $lavender-400;
-$btn-lavender-disabled-border-color: $lavender-400;
-
-// Lavender Outline Button Variant
-$btn-outline-lavender-color: $lavender-600;
-$btn-outline-lavender-border-color: $lavender-600;
-$btn-outline-lavender-hover-color: $white;
-$btn-outline-lavender-hover-bg: $lavender-600;
-$btn-outline-lavender-hover-border-color: $lavender-600;
-$btn-outline-lavender-active-color: $white;
-$btn-outline-lavender-active-bg: $lavender-700;
-$btn-outline-lavender-active-border-color: $lavender-700;
-$btn-outline-lavender-focus-color: $lavender-700;
-$btn-outline-lavender-focus-bg: transparent;
-$btn-outline-lavender-focus-border-color: $lavender-600;
-$btn-outline-lavender-focus-shadow-rgb: null;
-$btn-outline-lavender-disabled-color: $lavender-400;
-$btn-outline-lavender-disabled-bg: transparent;
-$btn-outline-lavender-disabled-border-color: $lavender-400;

package/theme/config/_base.scss

@@ -37,7 +37,7 @@ $component-active-bg: $primary;
 
 // Shadow base color (using SDGA neutral-900 shade)
 $shadow-color: $gray-900;
-$border-color: $gray-500;
+$border-color: $gray-300;
 
 // Focus
 $focus-ring-width: 0.25rem;

package/theme/customizations/_alerts.scss

@@ -186,23 +186,24 @@ $alert-variants: (
       flex-direction: column;
       margin-inline-start: 0;
 
+
       button {
         width: 100%;
         justify-content: center;
         &:first-of-type {
-          --#{$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};
         }
       }
     }
@@ -213,7 +214,7 @@ $alert-variants: (
 // ============================================
 .alert-dismissible {
   .btn-close {
-    padding: 0.5rem;
+    padding: $btn-close-padding-y $btn-close-padding-x;
     position: absolute;
     top: 1rem;
     right: unset;