NibCSS

@nibcss/angular

Every export of the Angular package: the builders, provideNib, the [nib] directive, NibService, the nibClass pipe and nibDarkToggle.

2 min readv1

The builders#

Target

Builder

build

@nibcss/angular:application

serve

@nibcss/angular:dev-server

Both accept everything @angular/build:application and @angular/build:dev-server accept, unchanged. A nib block on the build target covers only where files are:

Option

Default

What it does

out

<sourceRoot>/nib.css

where the stylesheet goes

config

auto-detected

path to nibcss.config.ts

include / exclude

project sources

globs to scan, or skip

devtools

true

mount the overlay on ng serve (needs debug: true)

scaffold

true

false stops the builder creating the config file

Providing the runtime#

TypeScript
import { provideNib } from "@nibcss/angular";

export const appConfig: ApplicationConfig = {
  providers: [provideNib()],                                        // config comes from the bundle
  // providers: [provideNib({ tokens: { color: { accent: "#f0f" } } })],  // or override part of it
};

Exports#

Export

What it is

provideNib(options?)

start the runtime as the environment injector is built

NibDirective — [nib]="…"

a string, a record ({ 'cl=red': cond }) or an array; applies through Renderer2, so it does not fight [class]

NibService

isDark, darkModeStrategy, canToggleDarkMode (signals), toggleDarkMode(), setDarkMode(), useSystemDarkMode(), classes(), token(), configure(), css(), scan(), config, runtime

NibClassPipe — | nibClass

a class string in a template

NibDarkToggleDirective — nibDarkToggle

toggles on click, hides itself when darkMode is not "class"

NIB_DIRECTIVES

all three, for a standalone component's imports

NIB_RUNTIME, NIB_OPTIONS

the injection tokens

nibValueToAttr(value)

the string/record/array normaliser the directive uses

resetSharedNibRuntime()

drop the shared instance (tests)

mergeConfig, buildInjectedConfig

the config helpers the provider uses

The three binding shapes#

HTML
<div [nib]="'p=16px; bdrd=8px'"></div>
<div [nib]="{ 'cl=#b91c1c': invalid(), 'ftw=700': true }"></div>
<div [nib]="['p=16px', condition ? 'bgc=#eef2ff' : '']"></div>

NibService in a component#

TypeScript
export class Header {
  constructor(private nib: NibService) {}

  readonly isDark = this.nib.isDark;             // a signal
  readonly brand = this.nib.token("color.brand");

  highlight(level: string) {
    return this.nib.classes(level === "error" ? "cl=#b91c1c; ftw=700" : "cl=#b45309");
  }
}

Next steps#