sdga-ui 1.0.2 → 1.0.4

package/README.md

@@ -1,167 +1,175 @@
-# **DGA UI – Government-Style Bootstrap Theme**
-
-**DGA UI** is a customizable UI theme inspired by modern government and authority design systems.
-Built on top of **Bootstrap**, it provides consistent colors, typography, spacing, and reusable UI patterns suitable for official portals, administrative dashboards, and public-sector applications.
-
-This package helps you apply a clean, structured, and authoritative look across your web interfaces with minimal setup.
-
----
-
-## **✨ Features**
-
-* Government-inspired design system
-* Full compatibility with Bootstrap
-* Custom color palette and typography
-* Standardized spacing & component overrides
-* Utility classes for layout and theming
-* Light / dark mode friendly (optional)
-* Easy to integrate into any frontend project
-
----
-
-## **📦 Installation**
-
-Install via npm:
-
-```bash
-npm install sdga-ui
-```
-
-Or with yarn:
-
-```bash
-yarn add sdga-ui
-```
-
----
-
-## **🔧 Usage**
-
-### **Using the Compiled CSS**
-
-Include the compiled CSS file in your HTML:
-
-```html
-<link rel="stylesheet" href="node_modules/sdga-ui/css/dga-ui.css">
-```
-
-Or import it in your JavaScript/CSS:
-
-```css
-@import "sdga-ui/css/dga-ui.css";
-```
-
-### **Using SCSS Source Files**
-
-Import the theme in your SCSS file:
-
-```scss
-@import "sdga-ui/theme/dga-ui";
-```
-
-All Bootstrap components automatically adopt the DGA UI theme.
-
----
-
-## **📁 File Structure**
-
-```
-dga-ui/
-│
-├─ css/                 # Compiled CSS output
-│  └─ dga-ui.css
-├─ fonts/               # Font files (IBM Plex Sans Arabic)
-├─ theme/               # Source SCSS theme files
-│  ├─ dga-ui.scss       # Main theme entry point
-│  ├─ _fonts.scss
-│  ├─ _functions.scss
-│  ├─ _variables.scss
-│  ├─ config/           # Base configuration
-│  ├─ components/       # Component styles
-│  └─ customizations/   # Theme customizations
-├─ package.json
-├─ LICENSE
-└─ README.md
-```
-
----
-
-## **🛠 Development**
-
-### **Building the CSS**
-
-Compile the SCSS to CSS:
-
-```bash
-npm run build-css
-```
-
-### **Watch Mode**
-
-Watch for changes and auto-compile:
-
-```bash
-npm run watch-css
-```
-
-### **Customization**
-
-You can override SCSS variables before importing the theme:
-
-```scss
-// Your custom variables
-$primary: #0d47a1;
-$secondary: #ffc107;
-
-// Import the DGA UI theme
-@import "dga-ui/theme/dga-ui";
-```
-
----
-
-## **🎨 Theme Structure**
-
-The theme is organized into three main sections:
-
-- **config/** - Base configuration (colors, typography, spacing, etc.)
-- **components/** - Bootstrap component overrides
-- **customizations/** - Additional styling and utilities
-
----
-
-## **📚 Roadmap**
-
-* React / Angular UI components
-* Icon set
-* Forms enhancement
-* Grid templates
-* Additional themes (municipal, ministry, authority variants)
-
----
-
-## **🤝 Contributing**
-
-Contributions are welcome!
-Feel free to open issues, submit pull requests, or suggest improvements.
-
----
-
-## **📄 License**
-
-MIT License — free for personal and commercial use.
-
----
-
-## **👤 Author**
-
-Created and maintained by **Mahmoud**.
-
----
-
-If you want, I can also generate:
-
-✅ A logo
-✅ A color palette for the authority theme
-✅ Example screenshots/mockups
-✅ NPM keywords
-Just tell me!
+# **DGA UI – Government-Style Bootstrap Theme**
+
+**DGA UI** is a customizable UI theme inspired by modern government and authority design systems.
+Built on top of **Bootstrap**, it provides consistent colors, typography, spacing, and reusable UI patterns suitable for official portals, administrative dashboards, and public-sector applications.
+
+This package helps you apply a clean, structured, and authoritative look across your web interfaces with minimal setup.
+
+---
+
+## **🌐 Live Demo**
+
+Check out the live demo and explore all components:
+
+**[https://mahmoudadel1996.github.io/dga-ui/](https://mahmoudadel1996.github.io/dga-ui/)**
+
+---
+
+## **✨ Features**
+
+* Government-inspired design system
+* Full compatibility with Bootstrap
+* Custom color palette and typography
+* Standardized spacing & component overrides
+* Utility classes for layout and theming
+* Light / dark mode friendly (optional)
+* Easy to integrate into any frontend project
+
+---
+
+## **📦 Installation**
+
+Install via npm:
+
+```bash
+npm install sdga-ui
+```
+
+Or with yarn:
+
+```bash
+yarn add sdga-ui
+```
+
+---
+
+## **🔧 Usage**
+
+### **Using the Compiled CSS**
+
+Include the compiled CSS file in your HTML:
+
+```html
+<link rel="stylesheet" href="node_modules/sdga-ui/css/dga-ui.css">
+```
+
+Or import it in your JavaScript/CSS:
+
+```css
+@import "sdga-ui/css/dga-ui.css";
+```
+
+### **Using SCSS Source Files**
+
+Import the theme in your SCSS file:
+
+```scss
+@import "sdga-ui/theme/dga-ui";
+```
+
+All Bootstrap components automatically adopt the DGA UI theme.
+
+---
+
+## **📁 File Structure**
+
+```
+dga-ui/
+│
+├─ css/                 # Compiled CSS output
+│  └─ dga-ui.css
+├─ fonts/               # Font files (IBM Plex Sans Arabic)
+├─ theme/               # Source SCSS theme files
+│  ├─ dga-ui.scss       # Main theme entry point
+│  ├─ _fonts.scss
+│  ├─ _functions.scss
+│  ├─ _variables.scss
+│  ├─ config/           # Base configuration
+│  ├─ components/       # Component styles
+│  └─ customizations/   # Theme customizations
+├─ package.json
+├─ LICENSE
+└─ README.md
+```
+
+---
+
+## **🛠 Development**
+
+### **Building the CSS**
+
+Compile the SCSS to CSS:
+
+```bash
+npm run build-css
+```
+
+### **Watch Mode**
+
+Watch for changes and auto-compile:
+
+```bash
+npm run watch-css
+```
+
+### **Customization**
+
+You can override SCSS variables before importing the theme:
+
+```scss
+// Your custom variables
+$primary: #0d47a1;
+$secondary: #ffc107;
+
+// Import the DGA UI theme
+@import "dga-ui/theme/dga-ui";
+```
+
+---
+
+## **🎨 Theme Structure**
+
+The theme is organized into three main sections:
+
+- **config/** - Base configuration (colors, typography, spacing, etc.)
+- **components/** - Bootstrap component overrides
+- **customizations/** - Additional styling and utilities
+
+---
+
+## **📚 Roadmap**
+
+* React / Angular UI components
+* Icon set
+* Forms enhancement
+* Grid templates
+* Additional themes (municipal, ministry, authority variants)
+
+---
+
+## **🤝 Contributing**
+
+Contributions are welcome!
+Feel free to open issues, submit pull requests, or suggest improvements.
+
+---
+
+## **📄 License**
+
+MIT License — free for personal and commercial use.
+
+---
+
+## **👤 Author**
+
+Created and maintained by **Mahmoud**.
+
+---
+
+If you want, I can also generate:
+
+✅ A logo
+✅ A color palette for the authority theme
+✅ Example screenshots/mockups
+✅ NPM keywords
+Just tell me!

package/css/dga-ui.css

@@ -8613,14 +8613,14 @@ textarea.form-control-lg {
   --dga-btn-color: #1B8354;
   --dga-btn-bg: transparent;
   --dga-btn-border-color: transparent;
-  --dga-btn-hover-color: rgb(18.36, 89.08, 57.12);
+  --dga-btn-hover-color: #1B8354;
   --dga-btn-hover-border-color: transparent;
-  --dga-btn-active-color: rgb(18.36, 89.08, 57.12);
+  --dga-btn-active-color: #1B8354;
   --dga-btn-active-border-color: transparent;
   --dga-btn-disabled-color: #4D5761;
   --dga-btn-disabled-border-color: transparent;
   --dga-btn-box-shadow: 0 0 0 #000;
-  --dga-btn-focus-shadow-rgb: rgba(27, 131, 84, 0.5);
+  --dga-btn-focus-shadow-rgb: none;
   text-decoration: none;
 }
 .btn-link:hover, .btn-link:focus-visible {
@@ -26421,9 +26421,9 @@ html {
 }
 .card .card-title-checked {
   margin-inline-start: auto;
-  margin-inline-end: 4%;
-  margin-top: 4%;
-  margin-bottom: 4%;
+  margin-inline-end: 1rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 .card .card-text {
   margin: 0;
@@ -27152,45 +27152,75 @@ html {
 }
 
 .link-primary {
-  --dga-link-color: #1B8354;
-  --dga-link-color-rgb: 27, 131, 84;
-  --dga-link-hover-color: #54C08A;
-  --dga-link-hover-color-rgb: 84, 192, 138;
+  color: #1B8354 !important;
+}
+.link-primary:hover, .link-primary:focus {
+  color: #54C08A !important;
+  text-decoration-color: #54C08A !important;
+}
+.link-primary:active {
+  color: #88D8AD !important;
+  text-decoration-color: #88D8AD !important;
 }
 
 .link-secondary {
-  --dga-link-color: #4D5761;
-  --dga-link-color-rgb: 77, 87, 97;
-  --dga-link-hover-color: #9DA4AE;
-  --dga-link-hover-color-rgb: 157, 164, 174;
+  color: #4D5761 !important;
+}
+.link-secondary:hover, .link-secondary:focus {
+  color: #9DA4AE !important;
+  text-decoration-color: #9DA4AE !important;
+}
+.link-secondary:active {
+  color: #D2D6DB !important;
+  text-decoration-color: #D2D6DB !important;
 }
 
 .link-success {
-  --dga-link-color: #079455;
-  --dga-link-color-rgb: 7, 148, 85;
-  --dga-link-hover-color: #47CD89;
-  --dga-link-hover-color-rgb: 71, 205, 137;
+  color: #079455 !important;
+}
+.link-success:hover, .link-success:focus {
+  color: #47CD89 !important;
+  text-decoration-color: #47CD89 !important;
+}
+.link-success:active {
+  color: #75E0A7 !important;
+  text-decoration-color: #75E0A7 !important;
 }
 
 .link-danger {
-  --dga-link-color: #D92D20;
-  --dga-link-color-rgb: 217, 45, 32;
-  --dga-link-hover-color: #F97066;
-  --dga-link-hover-color-rgb: 249, 112, 102;
+  color: #D92D20 !important;
+}
+.link-danger:hover, .link-danger:focus {
+  color: #F97066 !important;
+  text-decoration-color: #F97066 !important;
+}
+.link-danger:active {
+  color: #FDA29B !important;
+  text-decoration-color: #FDA29B !important;
 }
 
 .link-warning {
-  --dga-link-color: #DC6803;
-  --dga-link-color-rgb: 220, 104, 3;
-  --dga-link-hover-color: #FDB022;
-  --dga-link-hover-color-rgb: 253, 176, 34;
+  color: #DC6803 !important;
+}
+.link-warning:hover, .link-warning:focus {
+  color: #FDB022 !important;
+  text-decoration-color: #FDB022 !important;
+}
+.link-warning:active {
+  color: #FEC84B !important;
+  text-decoration-color: #FEC84B !important;
 }
 
 .link-info {
-  --dga-link-color: #1570EF;
-  --dga-link-color-rgb: 21, 112, 239;
-  --dga-link-hover-color: #53B1FD;
-  --dga-link-hover-color-rgb: 83, 177, 253;
+  color: #1570EF !important;
+}
+.link-info:hover, .link-info:focus {
+  color: #53B1FD !important;
+  text-decoration-color: #53B1FD !important;
+}
+.link-info:active {
+  color: #84CAFF !important;
+  text-decoration-color: #84CAFF !important;
 }
 
 .bg-neutral {