@kit-ng-ui/core

Foundation for the Kit UI library: design tokens, theming, and shared utilities.

Install

pnpm add @kit-ng-ui/core

Use

1. Register at app bootstrap

import { bootstrapApplication } from '@angular/platform-browser';
import { provideKitUi } from '@kit-ng-ui/core';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideKitUi({
      theme: { colorScheme: 'system', density: 'comfortable' },
    }),
  ],
});

2. Import the stylesheet

In your global styles.scss:

@use '@kit-ng-ui/core/styles';

This loads:

• the raw color palette as CSS custom properties (--kit-violet-6, ...)
• the semantic token layer (--kit-color-brand, --kit-color-text, ...)
• non-color tokens (spacing, typography, radius, elevation, motion, z-index)
• the minimal element reset

3. Switch themes at runtime

import { Component, inject } from '@angular/core';
import { KitThemeService } from '@kit-ng-ui/core';

@Component({ selector: 'app-toolbar', template: `<button (click)="theme.toggleColorScheme()">Toggle</button>` })
export class ToolbarComponent {
  protected theme = inject(KitThemeService);
}

Token layers

Raw palette  →  Semantic tokens  →  Component CSS
--kit-violet-6   --kit-color-brand   color: var(--kit-color-brand)

Components reference only semantic tokens. Apps that need to rebrand override the semantic layer in their own stylesheet.

What's exported

• provideKitUi(options) — environment providers
• provideKitUiServer(options) — SSR-friendly variant (see ADR-008)
• KitThemeService — colorScheme + density signals
• KIT_TOKENS, KIT_THEME_CONFIG — injection tokens
• tokens — TS token bundle (palette, spacing, font, radius, controlDensity, ...)
• Utilities: cn(...), KitIdGenerator (inject-and-call .next(prefix)), coerceBoolean, coerceNumber