الإصدارات

1. 0.2.0

   2026-11-05

   The docs are now in Arabic and English. This reverses the earlier English-only decision.

   Added

   • Arabic locale. The site lives at /en and /ar (English is the default). A request without a language is sent to the one the visitor chose with the switcher (the dga_locale cookie, SameSite=Lax, path /, one year), then to the one in Accept-Language, then to English. The header has an EN | العربية switcher that keeps you on the same page; <html lang dir> follows the locale; every page has hreflang alternates and a per-locale sitemap (/sitemap/en.xml, /sitemap/ar.xml). Old URLs without a language redirect.
   • Arabic pages for the whole site: home, Introduction, Installation, Deviations, all Foundations, Contrast, the changelog page and the nine component pages, written in Modern Standard Arabic. Code, prop names, token names, CLI commands and component names stay in English, and code blocks stay left-to-right with bidi isolation. The API reference has an Arabic description for every prop.
   • UI strings in both languages for the whole shell: sidebar groups, table of contents, search, Copy page menu, previous and next, footer, 404, the preview toolbar, code block labels and the theme toggle. The two dictionaries are typed against each other, so a missing key fails the build.
   • Search per locale. One index per language; results never cross languages. Arabic text is normalised before matching (diacritics and tatweel removed, alef variants, taa marbuta, yaa and alef maqsura folded, Arabic-Indic digits to Western), and a leading "ال" is ignored in the query, so "الوان" finds "ألوان".
   • Open Graph images in Arabic. IBM Plex Sans Arabic is loaded into the OG renderer. The renderer has no bidi support, so Arabic lines are laid out word by word, right to left.
   • llms.txt, llms-full.txt and every page as Markdown per locale (/ar/llms.txt, /ar/docs/components/button.md); the English ones keep their old URLs.
   • Translation drift check. Each Arabic page records the hash of the English source it was translated from (sourceHash). bun run translations:check fails when an English page changes without its Arabic page, when an Arabic page is missing, or when the two differ in components, headings or code fences; bun run translations:stamp records a reviewed translation. CI runs it. If an outdated page is ever published, it shows a "Translation outdated" banner.
   • Typography > Arabic text on the Typography page, with the CSS to copy: IBM Plex Sans Arabic, line height 1.8 for body and 1.5 for headings, no letter spacing, and the numerals rule (Western digits in prose and every technical value; Arabic-Indic digits only in sample content that imitates a citizen-facing service; never both in one view). Logged under Typography on the Deviations page.
   • CONTRIBUTING.md and a README.md, and bun run test:e2e (browser checks for the locale cookie, the header, and layout at 375, 768, 1024 and 1280px in LTR and RTL, light and dark; runs in CI).

   Changed

   • Product name: Platform Code (كود المنصات). "DGA UI" is gone from the UI, metadata, Open Graph images, web app manifest, llms.txt, README, registry titles and docs; "DGA" now appears only where it means the DGA design system. The page title template is "… | Platform Code" in English and "… | كود المنصات" in Arabic, and the web app manifest is per language (/en/manifest.webmanifest, /ar/manifest.webmanifest). Earlier changelog entries keep the old name because they record what shipped then.
   • Lockup. The DGA logo icon followed by the wordmark ("Platform Code" in English, "كود المنصات" in Arabic), mirrored in RTL so the icon is on the start side, in the header, footer, 404 and Open Graph images. Favicons and app icons are the icon alone.
   • Header matches the shared omqkhafi docs layout (okm, oke): a bar 44px high (48px from 1024px) under a 1px border; from 1024px the lockup sits in a pane as wide as the docs sidebar, followed by three equal tabs (README, DOCS, CHANGELOG; الرئيسية، التوثيق، سجل التغييرات) with a 2px bar under the current one, then the theme toggle, the language link and a solid GitHub block. Below 1024px it is the lockup with search, language, theme and menu buttons. Search sits at the top of the sidebar on desktop. The sidebar and the table of contents use the same header height and sidebar width.
   • Logo. The header, footer, 404, favicon set, web app manifest icons and Open Graph images now use the DGA logo icon instead of the placeholder star.
   • Arabic terminology: "destructive" is المدمّر everywhere (not الحاذف), "on colour" is للخلفيات الملونة, and the source code is الشيفرة المصدرية.
   • The Arabic citizen demo on the home page uses Arabic-Indic digits throughout (٤ نوفمبر ٢٠٢٦، ١٤ يومًا، الطلب ٢٤٨١٠).
   • Sitemap alternates include x-default (the English URL).
   • Every new component phase ships its English and Arabic docs together (see ROADMAP.md and CONTRIBUTING.md).
   • Lighthouse in CI also runs on the Arabic home page and the Arabic Button page.

2. 0.1.2

   2026-11-05

   A site that reads as a design-systems product, a second pass on the dark theme, and a stricter bidi setup for Arabic in code.

   Changed

   • Dark theme, soft tints. Badge, Tag, Status Tag, Featured Icon and alert surfaces no longer use solid saturated fills in dark mode. Every hue uses one rule: the hue of its own base step (the 400 step for amber and purple) at one fixed OKLCH lightness and chroma, with text and icons at step 300 and borders at 700 to 800. Red reads red, warning and orange stay amber and orange (no brown), purple is a visible tint, and all hues look like one family. The strongest dark fill (hard Featured Icon, inverted Status Tag) is the same tint at a higher strength, still under a white label. Contrast audit: 2,320 pairs, all passing. Every changed token is listed under Dark theme on the Deviations page (now 409 entries); button fills are still unchanged and logged as such.
   • Arabic in code blocks. Every code line is its own left-to-right isolate (dir="ltr", unicode-bidi: isolate) and the per-token isolation is gone, so an Arabic string split over several tokens keeps its reading order.
   • Home page rewritten. A split hero with the headline "The Saudi government design system, as copy-paste React components", the init command, and a live government service card ("Renew national address") that switches between English and Arabic, and light and dark, in place, with the other script shown next to it. Under it: four facts from the repository, each linking to its proof (components, 2,320 contrast pairs, 409 deviations, RTL and LTR), a bento of component compositions, the three install commands, and "Built in the open" with the GitHub repository, the latest version and the licence.
   • Identity. A DGA UI mark (an eight-point star with a star at its centre; it is not the DGA logo), the eight-point star lattice as a low-opacity background in the hero and as section dividers in both themes, and the brand green as the only accent in the header, hero and footer.
   • Type scale. display, h1, h2, h3, body and small, with tighter tracking on headings and one line-height per step. Tracking is switched off in Arabic and in any RTL subtree, because negative letter-spacing breaks the joins between Arabic letters.
   • Shell. A 56px header with the tabs as underlined links, no separators between them, a 2px bar on the inline-start edge of the current sidebar item, 150ms transitions on links, tabs and cards (none under prefers-reduced-motion), and one icon style (Hugeicons stroke, 1.5 weight, 18px) in the shell.
   • Docs pages show the version and, when the git history is available, the date of the last change, and component pages have a small preview thumbnail next to the title.
   • All site copy rewritten to be specific and plain.

   Added

   • Footer on every page: product, docs and project links, the MIT licence, "not an official DGA product", and a credit to design.dga.gov.sa.
   • A DGA-style 404 page (also for URLs that match no route), the full favicon set (SVG, ICO, Apple touch icon, 192 and 512px) with a web app manifest, and Open Graph images with the pattern and the page title.
   • One Callout for notes and warnings in the docs, built from the tokens an Alert component will use. (There is no Alert component yet; it is on the roadmap with Phase 4.)

3. 0.1.1

   2026-11-04

   Docs polish after the 0.1.0 visual audit, and a rebuilt dark theme.

   Changed

   • Dark theme rebuilt from scratch. One green-tinted neutral ramp (colors-neutral-dark-25 … 950) replaces the cool blue-grey; page 950, surface 900, raised 850, border 800, border-strong 700, text 50, secondary 300, muted 400. Text, icons and borders use step 300 and 500 of each colour's own ramp, subtle backgrounds are the 500 step at 9–15% opacity, and solid fills keep their light value (white labels need it). Figma Dark bugs fixed (light surfaces darker than the page, hardcoded hex, light tints on dark). No shadows in dark mode. Every change is listed under Dark theme on the Deviations page (190+ entries). New page: Dark mode, with Button, Badge, Tag, Link and status surfaces in light and dark side by side.
   • Component pages share one structure: preview, Installation (bun, npm, pnpm, yarn or Manual), Usage, Anatomy, Examples, RTL (LTR and RTL side by side), Accessibility, API Reference (generated from the TypeScript types), Deviations (key rows and a link to all of them for that component), one collapsed Contrast table, then related components, Previous and Next, and Edit on GitHub.
   • Docs typography: 16px body, sidebar, table of contents and toolbar at 13–14px, nothing under 12px in the docs shell. Sidebar section labels, inactive tabs and toggles, table columns and code line numbers all pass AA, and the docs UI chrome is now in the contrast audit (ui-chrome, 60+ pairs in both modes).
   • Previews: a skeleton holds the frame's height until the iframe has loaded, below-the-fold previews load lazily, desktop previews run at the column's own width instead of a scaled-down tablet, and mobile and tablet frames sit centred in a device outline. New Fullscreen (new tab) and Reset (also replays animations) buttons.
   • Code blocks: line numbers, a language pill, collapse past 16 lines with "Expand code", and dir="ltr" with unicode-bidi: isolate so Arabic strings inside JSX render in the right order. Code now uses the high-contrast GitHub themes.
   • Search (⌘K / Ctrl+K) is prebuilt: one search-index.json, filtered in memory. Results are grouped by page, show a breadcrumb, a title and one highlighted line (up to 120 characters), at most 8 per search. Arrow keys and Enter work.
   • Props tables: each row opens to show the full type, default and description, by click or with Enter and Space on the prop name.
   • Home page: hero with the init command, Get started and Components buttons, a grid of live component previews that link to their pages, and a row of features.
   • Mobile docs shell: the navigation is a bottom sheet, the sticky header keeps a search icon, and the table of contents is a dropdown under the header.
   • Visible focus rings (the DGA focus token) on every interactive element in the docs shell, hover and pressed states on the sidebar, tabs and table of contents, and prefers-reduced-motion is respected.
   • "Copy page" is a menu: copy as Markdown, view the Markdown, open in ChatGPT or Claude.
   • shadcn --muted is now background-neutral-50. text-secondary-paragraph on background-neutral-100 is 4.34:1 in light mode, which fails AA for muted text on muted fills (logged in Deviations).

   Added

   • button-border-neutral token and class on the neutral and secondary buttons: the fills sit 1.1–1.4:1 from the page in dark mode, so their edge was not visible. A 1px border shows it; it is transparent in light mode (logged in Deviations).
   • /docs/contrast: every audited pair for each component and for the docs UI chrome, in light and dark.
   • bun run api generates apps/docs/lib/generated/api.json (props, types, defaults, JSDoc) from the registry sources; CI fails if it is stale.
   • Lighthouse in CI on the home and Button pages: performance, accessibility, best practices and SEO must all be at least 95 on desktop (median of three runs); mobile accessibility, best practices and SEO are enforced too and mobile performance is reported as a warning.
   • Favicon.

   Fixed

   • test:install takes the production registry from DGA_REGISTRY_URL instead of REGISTRY_URL, which the shadcn CLI also reads as its own default registry. The 0.1.0 entry now says DGA_REGISTRY_URL too.
   • Props table rows did not reveal their description or default.
   • Preview iframes flashed blank before loading.

4. 0.1.0

   2026-11-04

   Added

   • dga (registry:base): npx shadcn@latest init https://dga.omqkhafi.dev/r/dga.json sets iconLibrary: "hugeicons", rtl: true, the base-nova style and the @dga registry in components.json, then installs dga-style.

   • dga-tokens (registry:theme): every DGA token on its own, for projects that want the tokens without components.

   • test:install covers three paths (init dga.json, init dga-style.json, add dga-tokens.json), checks dga-style.json stays under 10 KB, and can target the production registry with DGA_REGISTRY_URL.

   • Button (@dga/button): primary, neutral, secondary, outline, subtle and transparent; destructive and on-colour versions of each; sizes sm 24, md 32 and lg 40px; leading and trailing icons, icon-only, selected (aria-pressed), disabled and loading. 1,210 colour pairs audited.

   • Spinner (@dga/spinner): the Figma Loading indicator in seven sizes (20 to 44px), primary, neutral, on-colour and current. Turns slowly with reduced motion.

   • Link (@dga/link): primary, neutral and on-colour, sm and md, inline (always underlined), external (new tab, icon, screen-reader hint) and disabled. Works with Next.js Link through render. On-colour hovered, pressed and visited colours are white (contrast fix, logged in Deviations).

   • Badge (@dga/badge): from the design.dga.gov.sa CSS (not in Figma). Neutral, success, error, warning, info, purple, orange and on-colour; filled or outlined; sm 20, md 24 and lg 32px; rounded and icon-only. New badge-* tokens, logged in Deviations as added from site CSS.

   • Tag and Status Tag (@dga/tag): Tag in neutral, success, info, warning, error and on-colour; filled or outlined; xs 20, sm 24 and md 32px; rounded, icon-only and dismissible (onDismiss, 24px hit area). Status Tag in subtle, inverted and ghost with a coloured dot. tag-background-on-color darkens instead of lightens (contrast fix).

   • Divider (@dga/divider): Base UI Separator in neutral, primary, alpha-white and white; horizontal or vertical.

   • Avatar and Avatar Group (@dga/avatar): Base UI Avatar with image, initials or icon fallback; 24, 32, 40, 48, 64, 80 and 120px; circle or square; optional ring; stacked or spaced groups.

   • Featured Icon (@dga/featured-icon): from the design.dga.gov.sa CSS (not in Figma). Light, hard and outlined; brand, neutral, success, error, warning and info; sm 32 to xl 56px; square or circle. New featured-icon-* tokens, logged as added from site CSS.

   • Skeleton (@dga/skeleton): rectangle, square, circle and line in the Figma sizes, with the five Figma layouts as examples. New skeleton-background token. Static with reduced motion.

   • Component contrast audit (scripts/tokens/components.ts): every state of every component is checked in light and dark mode on each surface it can sit on, and the build fails on any regression. Each component page lists its checks and its deviations.

   • Component docs pages with previews, install commands, props tables, accessibility notes, contrast checks and deviations.

   • Docs site shell in the DGA identity (colours, IBM Plex Sans Arabic, radius, focus rings), light and dark, built with the registry's own components: top tabs README / DOCS / CHANGELOG, a numbered docs sidebar with the latest-release badge and ⌘K search, "On this page" table of contents, "Copy page" (and every page as Markdown at its URL plus .md), code blocks with file headers, and a mobile drawer.

   • /changelog, generated from CHANGELOG.md.

   • llms.txt, llms-full.txt, sitemap.xml, robots.txt and OG images for the home page and every docs page, all on https://dga.omqkhafi.dev.

   • Test that package.json version matches the latest CHANGELOG release.

   Changed

   • Button token fixes for contrast (all logged on the Deviations page): on-colour secondary, outline and subtle fills darken instead of lighten; on-colour transparent and destructive labels stay white; dark-mode destructive secondary uses a red tint; new button-label-transparent-*, button-label-danger-* and on-colour destructive secondary tokens.

   • The registry build inlines cn-* classes with its own transform, which also covers compoundVariants and cn() arguments and fails on unknown classes. The docs site renders the transformed components from apps/docs/registry, the same code users install.

   • dga-style no longer carries the tokens (169 KB → 1 KB); it depends on dga-tokens, so existing init …/dga-style.json installs get the same result.

   • Colour swatches take their white and black text from text-oncolor-primary and text-default instead of hardcoded hex values.

   • Bun workspaces monorepo: apps/docs (Next.js 16 + Fumadocs) and registry (shadcn registry source).

   • Biome for lint and format, TypeScript 5.9 strict, GitHub Actions CI (lint, tests, token check, registry build and diff, typecheck, docs build).

   • Token generator (bun run tokens): builds registry/styles/dga/tokens.css and theme.css from tokens/tokens.json (Figma). It includes light and dark themes (.dark and [data-theme="dark"], also on any subtree) and mobile-first responsive modes.

   • Tailwind v4 theme: every DGA token in @theme, Figma-identical utilities (text-text-primary), short aliases (text-primary, bg-body, border-primary) and the shadcn variable mapping.

   • Contrast audit: 466 foundation pairs are checked against WCAG 2.1 AA in both modes, and the build fails on any regression.

   • Breakpoints sm 640, md 768, lg 1024, xl 1280, 2xl 1536 (px).

   • @dga registry with dga-style (registry:style) and font-ibm-plex-sans-arabic (registry:font). Install with npx shadcn@latest init https://dga.omqkhafi.dev/r/dga-style.json.

   • utils (registry:lib): lib/utils.ts re-exports cn from the cn package. dga-style depends on it by URL instead of shadcn's bare utils.

   • bun run test:install: creates a fresh Next.js app, installs dga-style from a local registry, checks the result (including that lib/utils.ts is ours and imports from cn) and builds it. It also runs in CI.

   • Registry build that inlines the cn-* style map into components (the shadcn base-style pipeline), ready for Phase 2.

   • Docs: Introduction, Installation, Deviations from DGA, and foundation pages for Colors, Typography, Spacing, Radius, Shadows and Icons. Every preview has direction, theme and viewport toggles.

   • Test that fails on physical left/right utilities or CSS anywhere in the registry or docs source.

   Changed (from DGA Figma; full list on the Deviations page)

   • Fixed Figma naming typos: line-hight → line-height, lavendar → lavender, diabled → disabled, lable → label, iable-container → label-container. Physical names are now logical (padding-left → padding-start, padding-left-right → padding-inline).
   • Fixed contrast failures across 31 tokens (39 light/dark value changes). These cover status fills, gold and lavender text, link hover/pressed/visited states, dark-mode links, icon colours and on-colour text. Added --text-on-gold.
   • Body text sizes no longer shrink on mobile; display sizes follow the Figma modes.
   • Dropped the legacy site-CSS radius set; rounded-2xl and above clamp to radius-xl. Dropped italic weight tokens (IBM Plex Sans Arabic has no italic).