DOKU Design System for Angular

Angular component library for the DOKU payment gateway design system. Built for rapid prototyping with consistent design tokens, dark mode, and 30+ production-ready components.

Installation

npm install doku-ng-design-system

Setup

1. Import global styles

In your styles.scss:

@use 'doku-ng-design-system/src/lib/styles/doku-design-system';

2. Import the tooltip styles (if using tooltips)

@use 'doku-ng-design-system/src/lib/components/tooltip/tooltip';

3. Add fonts (optional — uses Google Fonts)

The library loads Inter and JetBrains Mono via Google Fonts. For DIN Next Pro (brand font), add it from your font provider.

Usage

All components are standalone — import them directly:

import { DokuButtonComponent, DokuInputComponent, DokuBadgeComponent } from 'doku-ng-design-system';

@Component({
  imports: [DokuButtonComponent, DokuInputComponent, DokuBadgeComponent],
  template: `
    <doku-button variant="primary" size="md" (clicked)="onSave()">Save</doku-button>
    <doku-input label="Email" placeholder="Enter email" [(ngModel)]="email" />
    <doku-badge variant="success">Active</doku-badge>
  `
})

Theme (Dark Mode)

import { DokuThemeService } from 'doku-ng-design-system';

export class AppComponent {
  constructor(private theme: DokuThemeService) {}
  toggleTheme() { this.theme.toggle(); }
}

Design Tokens

SCSS

@use 'doku-ng-design-system/src/lib/tokens' as tokens;

.my-class {
  color: tokens.$red-50;
  padding: tokens.$space-4;
  border-radius: tokens.$radius-md;
  @include tokens.typography('heading-xl');
}

TypeScript

import { DokuColors, DokuSpacing, DokuRadius, DokuShadows, DokuTypography } from 'doku-ng-design-system';

CSS Custom Properties

All tokens are available as CSS custom properties with the --doku- prefix:

.my-class {
  color: var(--doku-primary);
  background: var(--doku-bg-card);
  border: 1px solid var(--doku-border);
  border-radius: var(--doku-radius-md);
  box-shadow: var(--doku-shadow-sm);
}

Components

| Component | Selector | Key Inputs | |-----------|----------|------------| | Button | doku-button | variant, size, loading, disabled, iconOnly | | Input | doku-input | label, size, state, helperText, prefixText | | Select | doku-select | options, searchable, label, size | | Badge | doku-badge | variant, size, shape, showDot, dismissible | | Card | doku-card | variant, noPadding, hasHeader, hasFooter | | Table | doku-table | columns, striped, loading, hasActions | | Modal | doku-modal | isOpen, title, size, showClose | | Toast | doku-toast | variant, title, visible, duration | | Checkbox | doku-checkbox | label, size, indeterminate | | Radio Group | doku-radio-group | options, layout, size | | Tabs | doku-tabs | tabs, activeTab, variant, size | | Sidebar | doku-sidebar | groups, activeItemId, collapsed | | Avatar | doku-avatar | src, initials, size, status | | Pagination | doku-pagination | currentPage, totalPages, variant | | Progress Bar | doku-progress-bar | value, variant, label, showLabel | | Breadcrumb | doku-breadcrumb | items, size | | Form Field | doku-form-field | label, hint, error, required | | Form Group | doku-form-group | title, description, columns | | Datepicker | doku-datepicker | label, placeholder, format | | Tooltip | [dokuTooltip] | dokuTooltip (text), tooltipPosition | | Empty State | doku-empty-state | title, description, actionLabel | | Skeleton | doku-skeleton | variant, width, height, columns | | Switch | doku-switch | label, size | | Alert | doku-alert | variant, title, dismissible | | Search | doku-search | placeholder, size, shortcutHint | | Stepper | doku-stepper | steps, currentStep, orientation | | Command Palette | doku-command-palette | isOpen, items, placeholder | | Filter Bar | doku-filter-bar | activeFilters | | Stat Card | doku-stat-card | label, value, trend, trendDirection | | File Upload | doku-file-upload | label, accept, multiple, maxSize | | Popover | doku-popover | position, closeOnClickOutside | | Drawer | doku-drawer | isOpen, title, position, size |

Color Palette

| Token | Hex | Usage | |-------|-----|-------| | $red-50 | #E1251B | Brand accent (max 10%) | | $neutral-100 | #09090D | Primary buttons/text | | $dark-crimson | #B91C1C | Danger actions | | $success-primary | #008856 | Success states | | $warning-primary | #B45309 | Warning states | | $info-primary | #1D4ED8 | Info states |

Build

ng build doku-design-system

Publishing

cd dist/doku-design-system
npm publish