DGA Design System — Documentation

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

Package: npm · Preview: run npm run docs:dev

---

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	Preview	JS / WC
Button	button.md	Docs	No
Alert	alert.md	Docs	WC or class
Accordion	accordion.md	Docs	WC or class
Navbar	navbar.md	Docs	Yes
Card	card.md	Docs	No
Forms	forms.md	Docs	No
Table	table.md	Docs	No
Breadcrumb	breadcrumb.md	Docs	No
Link	link.md	Docs	No
Tag	tag.md	Docs	No
Divider	divider.md	Docs	No
Code snippet	code-snippet.md	Docs	WC or class
Pie chart	chart.md	Docs	WC or class
Verify bar	verify-bar.md	Docs	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.