@dev-dga/tokens

Design tokens for DGA React components: an independent, MIT-licensed implementation of the SDGA Platforms Code (DGA, Digital Government Authority) design system, Saudi Arabia's (KSA) national reference for government digital platforms.

Colors, typography, spacing, radius, shadows, and breakpoints exported as fully-typed TypeScript objects. This package is the source of truth; @dev-dga/css is generated from it.

Independent implementation, free to use under the MIT license. Not affiliated with, nor endorsed by, the Saudi Digital Government Authority (DGA).

Install

npm install @dev-dga/tokens

Usage

import * as tokens from '@dev-dga/tokens';

Token groups are exported as named objects. Hover any import in your editor for full type information.

Semantic tokens (theme-aware, dark mode flips them):

• colors , primary, secondary, background, foreground, muted, border, card, destructive, error, success, warning, info, ring
• text , primary, secondary, tertiary, placeholder

Palette scales (12 steps each, 25 → 950, absolute hex , same in light and dark):

• saGreen , Saudi-Arabia-aligned brand green (saGreen[500] = #25935F)
• gray , neutral
• error, warning, success, info , semantic palettes (the semantic colors.* tokens above sit at step 600)
• gold, lavender , secondary brand accents (DGA Phase 4)

Other groups: typography, spacing, radius, shadows, breakpoints.

When consuming via @dev-dga/css, every leaf becomes a CSS variable: scales as --ddga-{name}-{step} (e.g. --ddga-sa-500, --ddga-gray-200), semantic tokens as --ddga-color-* / --ddga-text-*.

Most consumers want @dev-dga/react (components) and @dev-dga/css (styles). Reach for @dev-dga/tokens directly only when you're building tooling on top of the raw values.

Tailwind v3 preset

@dev-dga/tokens/tailwind-preset (ESM and CommonJS) exposes the DGA scale as Tailwind v3 utilities: bg-primary, text-ink, rounded-lg, shadow-md, text-display-md, max-w-dga, and every palette step. Every value is a var(--ddga-*) reference, and dark: follows [data-theme="dark"].

// tailwind.config.js
import { dgaPreset } from '@dev-dga/tokens/tailwind-preset';
export default { presets: [dgaPreset], content: ['./src/**/*.{ts,tsx}'] };

/* app.css */
@layer tailwind-base, ddga-base, ddga-components, tailwind-utilities;
@import '@dev-dga/css';
@layer tailwind-base {
  @tailwind base;
}
@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}

The order statement must come first and the @layer tailwind-base wrap is mandatory: an unlayered preflight strips the border from every component. Tailwind v4 uses the generated @dev-dga/css/tailwind.css instead; the preset and that file are built from one shared key list.

Docs

Live Storybook · Docs, examples & issues

License

MIT