Tolle UI

Config-first theming for Angular

Tolle UI is designed to be globally configurable. Instead of styling every component individually, you define your design tokens once at the root of your application.

This config-first approach allows you to rebrand your entire application in seconds.

Installation

Tolle UI is built for Angular 18 and relies on a small set of peer dependencies to stay lightweight and flexible.

1. Install Tolle UI

npm install @tolle_/tolle-ui

or with pnpm:

pnpm add @tolle_/tolle-ui

2. Install Peer Dependencies

npm install @angular/core@^18.2.0 @angular/common@^18.2.0 @floating-ui/dom@^1.7.4 class-variance-authority@^0.7.1 tailwind-merge@^3.4.0 clsx@^2.1.1 date-fns@^4.1.0

💡 If you already have Angular 18 installed, you only need to install the non-Angular dependencies.

Angular Provider

The provideTolleConfig function is the brain of the library. It injects your brand settings into all components using Angular’s Dependency Injection system.

app.config.ts

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideTolleConfig } from '@tolle_/tolle-ui';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),

    provideTolleConfig({
      primaryColor: '#551a65',
      radius: '0.75rem',
      darkByDefault: false,
    }),
  ],
};

Tailwind Integration

Tolle UI components use Tailwind utility classes that reference CSS variables generated by your configuration.

Update tailwind.config.js

module.exports = {
  darkMode: 'class',
  presets: [require('@tolle_/tolle-ui/preset')],
  content: [
    './src/**/*.{html,ts}',
    './projects/**/*.{html,ts}',
    './node_modules/@tolle_/tolle-ui/**/*.{html,ts,mjs}',
  ],
};

Global Styles

"styles": [
  "src/styles.css",
  "node_modules/@tolle_/tolle-ui/theme.css"
]

Theme Variables

Tolle UI generates a comprehensive system of CSS custom properties (CSS variables) based on your configuration. These variables ensure consistent theming across all components and enable easy customization.

Core Configuration Variables

These are the variables you define in your provideTolleConfig() function:

| Variable | Type | Default | Description | |------------|-------|-----------|------------------------------------| | --primary | Color | #2563eb | The primary brand color (blue-600) | | --radius | Size | 0.5rem | Global border radius for components |