Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Nettalco/nettalco-theme/llms.txt

Use this file to discover all available pages before exploring further.

Nettalco Theme (@nettalco/nettalco-theme) is a fully crafted PrimeNG preset built specifically for Nettalco’s Angular applications. It extends the official Aura base preset via @primeuix/themes’s definePreset, layering Nettalco’s brand identity — five carefully curated color palettes, precise semantic role mappings, and per-component token overrides — on top of PrimeNG’s robust styling engine. Drop it in, configure one provider, and every one of PrimeNG’s 75+ components instantly reflects the Nettalco look and feel.

​
What’s Inside

Two-Level Token Architecture

Primitive palettes define raw color scales; semantic tokens map those scales to roles like primary, success, warn, and error — keeping customization predictable and coherent.

5 Brand Color Palettes

nettalcoPrimary, nettalcoSecondary, nettalcoSuccess, nettalcoWarn, and nettalcoInfo — each a full 50–950 scale tuned to Nettalco’s brand guidelines.

Light & Dark Mode

Full light and dark color schemes built in. Dark mode uses a custom dark-blue surface scale rather than the default zinc gray, keeping the Nettalco aesthetic in both modes.

75+ Components Covered

Every PrimeNG component — from Button and DataTable to TreeSelect and VirtualScroller — is covered with tailored token overrides.

​
Brand Color Palettes

The preset ships with five custom primitive palettes that replace PrimeNG’s default Aura colors:
PaletteKey ColorHexRole
nettalcoPrimaryNavy#112A46Primary actions, focus rings
nettalcoSecondarySky Blue#3F8CF9Secondary actions, accents
nettalcoSuccessCyan#2BA5CDSuccess states, confirmations
nettalcoWarnOrange#D57952Warnings, caution indicators
nettalcoInfoBlue Info#66A6FBInformational messages
Standard palettes (emerald, red, slate, blue, etc.) from the Aura base are retained and available for component-level use; the error semantic role maps to the standard red palette.

​
Package Details

Package: @nettalco/nettalco-theme v1.1.1
Registry: GitHub Packages — https://npm.pkg.github.com
License: Private — internal Nettalco use only

​
Peer Dependencies

PackageRequired Version
@angular/core^21.2.0
@angular/common^21.2.0
@primeuix/themes^2.0.0
primeng^21.0.0

​
Architecture Overview

Nettalco Theme uses the definePreset(Aura, overrides) API from @primeuix/themes. The override object has four top-level sections: 
definePreset(Aura, {
  primitive: { /* raw color palettes */ },
  semantic: { /* role-based token mappings */ },
  css:       { /* global CSS string overrides */ },
  components: { /* per-component token objects */ },
})
Primitive tokens are raw values — color hex codes organized into numbered scales (50, 100 … 950). Semantic tokens reference primitive tokens using the {palette.shade} syntax and give them functional meaning (primary, success, etc.). Component tokens are the most specific layer and control individual parts of a given component (e.g. button.root.borderRadius).

​
Navigate the Docs

Installation

Authenticate with GitHub Packages and install the library with npm, yarn, or pnpm.

Quickstart

Configure providePrimeNG and have themed components rendering in under 5 minutes.

Design Tokens

Deep dive into the primitive → semantic → component token hierarchy.

Color Palette

Full 50–950 swatch tables for all five brand palettes and semantic role mappings.

Build docs developers (and LLMs) love

Get started for freeTalk to us