@circutor/primeng

PrimeNG theme preset for the Croma Design System. Provides the component layer for Angular apps: @circutor/ui ships the foundations (tokens, color, typography, icons, grid, layout) and this package maps them onto PrimeNG's design tokens.

Install

npm install @circutor/primeng @circutor/ui primeng @primeng/themes

Usage

1. Apply the preset

// app.config.ts
import { providePrimeNG } from 'primeng/config';
import { definePreset } from '@primeng/themes';
import { PrimeNgTheme } from '@circutor/primeng/primeng-theme';

export const appConfig: ApplicationConfig = {
  providers: [
    providePrimeNG({
      theme: {
        preset: definePreset(PrimeNgTheme),
        options: { darkModeSelector: '.dark' }
      }
    })
  ]
};

2. Load the CDS foundations and the PrimeNG overrides

// styles.scss
@use '@circutor/ui/bundle' with ($brand: 'circutor');
@use '@circutor/primeng/primeng-common';

primeng-common.scss carries the .p-* overrides that PrimeNG's own tokens cannot express (scrollbars, password mask icon, sticky messages, …). It is not part of @circutor/ui.

What's in the package

| File | What it is | | --- | --- | | primeng-theme.ts | The preset object, wired to var(--cds-scale-*) / var(--cds-br-*) / var(--cds-color-*) | | primeng-common.scss | .p-* overrides applied on top of the preset | | primeng-theme-vars.css | The resolved token values, for reference and debugging |

Notes

• The preset resolves CDS tokens at runtime through CSS custom properties, so @circutor/ui@>=7 must be loaded for the theme to render correctly. It is not declared as a peer dependency because the coupling is through CSS variables, which npm cannot verify anyway.
• primeng-theme is published as compiled ESM + type declarations (dist/primeng-theme.js and dist/primeng-theme.d.ts), generated from primeng-theme.ts by the package's prepack. The .ts source is not published: shipping raw TypeScript made the package unimportable from node_modules, because a consumer's compiler refuses files outside its own tsconfig include.

Local development

npm run build -w primeng     # tsc -p primeng/tsconfig.json -> primeng/dist

dist/ is generated and git-ignored. prepack rebuilds it on every npm publish -w primeng, so the published output can never drift from the source.