DGA Design System — Documentation

Documentation for @waaelg/dga-design-system: Saudi DGA design system utilities, components, and optional JavaScript.

Package: npm · Demo: run npm run dev in the repo root

---

Getting Started

Doc	Description
Installation	npm, HTML, ASP.NET, Vue, React
JavaScript API	Interactive component classes
Web Components	<dga-*> custom elements
RTL & Arabic	Right-to-left setup

---

Foundations

Doc	Description
Colors	Palettes, semantic colors, utilities
Colors cheatsheet	Quick class reference
Color swatches	Hex values per shade
Typography	Display, text sizes, weights
Spacing	Padding, margin, gap
Grid & Flex	Layout, flexbox, display
Width & Height	dga-w-*, dga-h-*
Border radius	Radius utilities

---

Components

Component	Doc	Demo	JS / WC
Button	button.md	index.html	No
Alert	alert.md	alerts.html	WC or class
Accordion	accordion.md	index.html	WC or class
Navbar	navbar.md	index.html	Yes
Card	card.md	index.html	No
Forms	forms.md	index.html	No
Table	table.md	index.html	No
Breadcrumb	breadcrumb.md	index.html	No
Link	link.md	index.html	No
Tag	tag.md	index.html	No
Divider	divider.md	index.html	No
Code snippet	code-snippet.md	index.html	WC or class
Pie chart	chart.md	index.html	WC or class
Verify bar	verify-bar.md	verify-bar.html	WC or class
Avatar	avatar.md	—	No

WC = web component (<dga-*>) registered on package import.

---

Changelog

See changelog.md.

---

Doc conventions

Every component page includes:

1. Overview
2. HTML structure
3. Classes and variants (from source SCSS)
4. Copy-paste examples (from demo HTML)
5. JavaScript setup (if needed)
6. Accessibility notes

Class names are verified against dist/style.css after npm run build.