\n\n[](https://www.npmjs.com/package/@a.nemreen/dga-tokens)\n[](https://github.com/nemreen/dga-angular/blob/main/LICENSE)\n[](https://angular.dev)\n[](https://tailwindcss.com)\n[](https://nemreen.info/dga/)\n\nDesign tokens and Tailwind v4 theme for DGA (Digital Government Authority) Angular apps — CSS variables, semantic colors, spacing, type scale, and Angular services for **theme**, **locale (RTL/LTR)**, **fonts**, and **brand**.\n\nPair with [`@a.nemreen/dga-ui`](https://www.npmjs.com/package/@a.nemreen/dga-ui) for components. \n**Live demo:** [nemreen.info/dga](https://nemreen.info/dga/)\n\n> Version **0.2.x** — API may still evolve until 1.0.0.\n\n## Changelog\n\n[CHANGELOG.md](https://github.com/nemreen/dga-angular/blob/main/CHANGELOG.md) ships with this package. Live notes: [nemreen.info/dga/docs/changelog](https://nemreen.info/dga/docs/changelog).\n\n## Features\n\n- Semantic CSS custom properties (palette → primitives → semantic → theme)\n- Tailwind v4 `@theme` bridge for utility classes\n- Light / dark via `DgaThemeService` (`data-theme`)\n- Configurable locales + RTL/LTR via `DgaLocaleService` / `provideDgaLocales` (`lang` / `dir`)\n- Arabic font switching via `DgaFontService`\n- Brand color ramps via `DgaBrandService`\n- Optional content icon font (`styles/icon-font.css`) — HugeIcons Stroke Rounded\n\n## Install\n\n```bash\nnpm install @a.nemreen/dga-tokens\n```\n\nRequires Angular **19+** and Tailwind CSS **v4** (`tailwindcss` + `@tailwindcss/postcss`).\n\n## Public entry points\n\n| Import | Purpose |\n|--------|---------|\n| `@a.nemreen/dga-tokens` | `DgaThemeService`, `DgaLocaleService`, `provideDgaLocales`, `DgaFontService`, `DgaBrandService` |\n| `@a.nemreen/dga-tokens/styles.css` | Full token + Tailwind `@theme` stylesheet (includes `host-compat.css`) |\n| `@a.nemreen/dga-tokens/styles/host-compat.css` | Unlayered isolation vs host `*` / `a` / `button` globals (already in `styles.css`) |\n| `@a.nemreen/dga-tokens/styles/icon-font.css` | Optional HugeIcons Stroke Rounded font for content icons |\n| `@a.nemreen/dga-tokens/styles/prefs-boot.js` | Allowlisted FOUC boot script for `index.html` |\n\nDo not depend on undocumented files under `styles/` except the entries above.\n\n## Styles\n\n```css\n@import 'tailwindcss';\n@import '@a.nemreen/dga-tokens/styles.css';\n/* or, with some tooling: */\n@import 'dga-tokens/styles.css';\n```\n\n`styles.css` ends with unlayered `host-compat.css`. That scoped sheet beats leftover host globals such as `* { margin: 0; padding: 0 }` and `a { color: var(--color-mainColor) }` inside `dga-*` components and `[dgaButton]` / `[dgaLink]` hosts. **You do not need to delete those rules** for DGA UI to layout and color correctly.\n\nStill wrap host leftovers in `@layer base` if *your own* Tailwind classes should also win (the `*` reset is unlayered and otherwise beats `@layer utilities` on the rest of the page):\n\n```css\n@layer base {\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n a {\n color: var(--color-mainColor);\n font-weight: 400;\n transition: color 0.2s ease-in-out;\n }\n}\n```\n\n## Content icon font (optional)\n\nFor icons in editorial content, feature grids, and lists, opt into the self-hosted Stroke Rounded font. Chrome controls should keep using `` (inline SVG from HugeIcons) so they paint without waiting on the font.\n\n```css\n@import '@a.nemreen/dga-tokens/styles/icon-font.css';\n```\n\n```html\n\n\n\n```\n\nGlyph names match [hugeicons.com](https://hugeicons.com/icons/stroke-rounded) (Stroke Rounded). The font carries ~4k glyphs; a name that is missing from the font renders nothing. See `styles/THIRD-PARTY-ICONS.md` for the MIT notice.\n\n## Typography (Arabic Google Fonts)\n\nPlatforms Code defaults to **IBM Plex Sans Arabic** at weights **400 / 500 / 600 / 700**. Tokens declare the family; **apps must load the font files**.\n\nSwitch families at runtime with `DgaFontService` (sets `data-font` on ``):\n\n```ts\nconst font = inject(DgaFontService);\nfont.setFont('cairo'); // ibm-plex | noto-sans | cairo | tajawal | almarai | changa | readex-pro | amiri\n```\n\n## Brand themes\n\nSwitch the primary color ramp with `DgaBrandService` (sets `data-brand` on ``). Independent of light/dark.\n\n```ts\nconst brand = inject(DgaBrandService);\nbrand.setBrand('blue'); // green | blue | purple | gold | teal | hajj | foundation | national\n// Seasonal brand IDs remap primary colors only; occasion imagery lives in the app/demo layer.\n```\n\n## Preference persistence\n\nThese services save to `localStorage` and restore on load:\n\n| Key | Service | Values |\n|-----|---------|--------|\n| `dga-theme` | `DgaThemeService` | `dark` (light = key removed) |\n| `dga-locale` | `DgaLocaleService` | registered locale code (default `ar` \\| `en`) |\n| `dga-locale-dir` | `DgaLocaleService` | companion `rtl` \\| `ltr` for FOUC boot |\n| `dga-font` | `DgaFontService` | font id (default `ibm-plex` = key removed) |\n| `dga-brand` | `DgaBrandService` | brand id (default `green` = key removed) |\n\nIn production apps, apply prefs **before first paint** with the shipped boot script (allowlists font/brand IDs):\n\n```html\n\n```\n\nOr inline the same logic from that file. Services also clear invalid `data-font` / `data-brand` attributes on hydrate and skip DOM/storage work during SSR.\n\n## Locales (multi-language + RTL/LTR)\n\nDefault languages are **Arabic (rtl)** and **English (ltr)**. Register more in `app.config.ts` — each entry sets its own direction:\n\n```ts\nimport { provideDgaLocales, DgaLocaleService } from '@a.nemreen/dga-tokens';\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideDgaLocales([\n { code: 'ar', dir: 'rtl', nativeName: 'العربية' },\n { code: 'en', dir: 'ltr', nativeName: 'English' },\n { code: 'ur', dir: 'rtl', nativeName: 'اردو' }, // Urdu = RTL\n ]),\n ],\n};\n\nconst locale = inject(DgaLocaleService);\nlocale.locales; // registered list (for language pickers)\nlocale.setLocale('ur'); // applies lang + dir from the registry\nlocale.cycleLocale(); // next in the list\n```\n\nDirection always comes from the registry (`dir`), never from “is Arabic?”. Localized labels should be maps keyed by code:\n\n```ts\n{ ar: '…', en: '…', ur: '…' } // missing keys fall back to en, then ar\n```\n\nLoad **IBM Plex Sans Arabic** (400–700) off the critical path so the Google Fonts CSS does not block first paint. `DgaFontService` injects other curated families when the user switches (`prefs-boot.js` does the same before paint for a stored choice):\n\n```html\n\n\n\n\n\n```\n\nSelf-hosting the same weights is preferred for production government apps.\n\nType scale utilities: `text-display-*` / `text-body-*` (including `text-body-2xs` at 10px/14px).\n\n## Content width\n\nPortal shells use a fluid content column with side gutters:\n\n| Token | Value | Role |\n|-------|-------|------|\n| `--dga-content-max-width` / `--container-7xl` | `1280px` | Content column max width |\n| `--dga-viewport-padding` | `32px` (`16px` < 600px) | Minimum side gutter |\n| `--dga-wrapper-padding` / `--wrapper-padding` | `max(viewport, (100% − 1280px) / 2)` | Actual `padding-inline` |\n\nUse **`w-full px-(--wrapper-padding)`** on shells. Do **not** pair `max-w-(--container-7xl)` with large inner padding (`lg:px-8xl`) - that double-shrinks the content column.\n\n## Breakpoints\n\nAligned with [layout & spacing](https://design.dga.gov.sa/guidelines/foundations/layout-and-spacing):\n\n| Token | Min-width | Guideline |\n|-------|-----------|-----------|\n| `sm` | 600px | Small / mobile |\n| `md` | 960px | Medium / tablet |\n| `lg` | 1280px | Large / desktop |\n| `xl` | 1440px | X large / desktop |\n\nThese override Tailwind’s default screens via `@theme` (literal `px` values - required so `@media` queries work). `md:` / `lg:` therefore follow DGA.\n\n## Spacing\n\nNamed scale (`none` … `11xl`) plus large layout numerics (`48` … `480`, e.g. `p-48`, `max-w-(--spacing-320)`). Paragraph measure: `--dga-paragraph-max-width` → 720px (`spacing-180`).\n\n## Theme service\n\n```ts\nimport { DgaThemeService } from '@a.nemreen/dga-tokens';\n\ninject(DgaThemeService).toggle();\n```\n\n## License\n\nMIT — see [LICENSE](./LICENSE). Copyright (c) 2026 Ahmed Nemreen.\n\nUse it in any project. **Do not rebrand and sell it as your own unique product.**\n","readmeFilename":"README.md"}
![\"DGA](\"https://cdn.jsdelivr.net/npm/@a.nemreen/dga-tokens@0.2.1/cover.jpg\")
\n