angular-tailwind-components 1.3.1 → 1.5.0

package/README.md

@@ -11,7 +11,7 @@ A comprehensive Angular component library built entirely with **Tailwind CSS v4*
 - ♿ **Accessible** — WCAG-compliant with proper ARIA roles and keyboard support
 - 🧪 **Tested** — Unit tests with Vitest
 - 📖 **Storybook** — Visual documentation for all components
-- 🎭 **Customizable** — Override theme tokens via Tailwind `@theme` directive
+- 🎭 **Customizable** — **`defineTheme()`** for injection-token defaults and runtime semantic colors; optional CSS overrides via `@theme`
 
 ## Installation
 
@@ -30,12 +30,9 @@ Your consuming project must have **Tailwind CSS v4** configured. Add the library
 The published `styles/tailwind.css` scans the sibling `fesm2022` bundle plus library `.html` / `.ts` sources for development. You do **not** need a separate `@source` to `node_modules/.../fesm2022` in the consumer.
 
 The same import also pulls in:
-
-```css
 @import 'tailwindcss';
-```
 
-Or define your own theme tokens following the design system schema.
+So you don't need to import the base styles
 
 ## Quick Start
 
@@ -64,6 +61,113 @@ export class ExampleComponent {
 }
 ```
 
+## Application configuration (`defineTheme`)
+
+Use **`defineTheme`** from `angular-tailwind-components` as the single app-level entry: it registers **`EnvironmentProviders`** for optional **injection tokens** (`iconSize`, `datetimeLanguage`, `componentsSize`, `paginationSummary`) and, when you pass **`colors`**, an app initializer that applies semantic CSS variables on `document.documentElement` in the browser. Add **one** entry to `providers` without spreading.
+
+`TailwindDefineThemeConfig` extends **`TailwindComponentsConfig`** with an optional **`colors`** field.
+
+### Example (tokens + colors)
+
+```typescript
+import { ApplicationConfig } from '@angular/core';
+import { defineTheme } from 'angular-tailwind-components';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    defineTheme({
+      iconSize: 20,
+      datetimeLanguage: 'it',
+      componentsSize: 'md',
+      paginationSummary: 'Visualizzati {start}-{end} di {total}',
+      colors: {
+        primary: 'violet', // Forma oggetto: { 600: '#4f46e5', 700: '#4338ca' }
+        danger: 'rose',
+        neutral: 'zinc'
+      }
+    })
+  ]
+};
+```
+
+### Example: tokens only
+
+```typescript
+providers: [
+  defineTheme({
+    iconSize: 20,
+    datetimeLanguage: 'it',
+    componentsSize: 'md',
+    paginationSummary: 'Items {start}-{end} of {total}'
+  })
+];
+```
+
+### Example: colors only
+
+```typescript
+providers: [defineTheme({ colors: { primary: 'indigo', neutral: 'zinc' } })];
+```
+
+### Example: spread a shared config object
+
+```typescript
+import { ApplicationConfig } from '@angular/core';
+import { defineTheme, type TailwindComponentsConfig } from 'angular-tailwind-components';
+
+const shared: TailwindComponentsConfig = {
+  componentsSize: 'md',
+  datetimeLanguage: 'it'
+};
+
+export const appConfig: ApplicationConfig = {
+  providers: [defineTheme({ ...shared, colors: { primary: 'indigo' } })]
+};
+```
+
+You can omit **`colors`** if you only need token defaults, or omit token keys if you only need theme colors.
+
+| Config key | Token |
+| --- | --- |
+| `iconSize` | `TAILWIND_ICON_SIZE` |
+| `datetimeLanguage` | `TAILWIND_DATETIME_LANGUAGE` |
+| `componentsSize` | `TAILWIND_COMPONENTS_SIZE` |
+| `paginationSummary` | `TAILWIND_PAGINATION_SUMMARY` |
+
+**`provideTailwindComponents`** is still exported for backward compatibility (token providers only, same implementation as the token slice of `defineTheme`). It is **deprecated**; prefer **`defineTheme`**.
+
+## Theme colors (`defineTheme`)
+
+The optional **`colors`** object remaps semantic design tokens (`primary`, `neutral`, `success`, `warning`, `danger`, `info`) at **runtime** using the same `--color-*` names as the library `@theme` block (for example `--color-primary-500`), so classes like `bg-primary-600` update without changing templates. Color application is a **no-op during SSR** (browser only).
+
+| `colors` key | CSS variables | Default palette in `tailwind.css` |
+| --- | --- | --- |
+| `primary` | `--color-primary-*` | Tailwind `blue` |
+| `neutral` | `--color-neutral-*` | Tailwind `slate` |
+| `success` | `--color-success-*` | Tailwind `green` |
+| `warning` | `--color-warning-*` | Tailwind `amber` |
+| `danger` | `--color-danger-*` | Tailwind `red` |
+| `error` | Same as `danger` if `danger` is omitted | — |
+| `info` | `--color-info-*` | Tailwind `sky` |
+
+### `TailwindThemeSeverityColor`
+
+Each `colors.*` field uses the exported type **`TailwindThemeSeverityColor`**. It can be either of the following:
+
+1. **A string — Tailwind palette name**  
+   Use the lowercase **family name** only (the segment between the utility prefix and the shade), e.g. `bg-indigo-600` → `'indigo'`, `text-slate-500` → `'slate'`.  
+   The full list of built-in names and swatches is in the official **[Tailwind CSS color reference](https://tailwindcss.com/docs/colors)** — pick any name from that page for the string form.  
+   For each configured shade, `defineTheme` sets `--color-<semantic>-<shade>` to `var(--color-<that-name>-<shade>)`.
+
+2. **A partial object — per-shade CSS**  
+   Keys are optional shade steps: `'50'`, `'100'`, …, `'950'`. Values are any valid CSS color (`#hex`, `rgb()`, `oklch()`, `var(--color-fuchsia-600)`, etc.). Only the keys you pass are overridden.
+
+   When you use a **string**, shade coverage matches the library tokens: `primary` and `neutral` include `950`; `success`, `warning`, `danger`, and `info` stop at `900`.
+
+When you pass a **palette string** (e.g. `primary: 'indigo'`), the target variables `--color-indigo-*` must exist in the compiled CSS. Tailwind v4 only emits palette variables that are referenced at build time, so the library’s `tailwind.css` **safelists** the default Tailwind families (`slate`, `gray`, `indigo`, …) with `@source inline(...)`. For a custom family name not covered there, use the object form with explicit colors, or add your own `@source inline("bg-<name>-{50,{100..900..100},950}")` in your app stylesheet.
+
+`defineTheme` is a no-op during **SSR** (browser only).
+
 ## Content slots
 
 Some components (for example `tailwind-card`, `tailwind-modal`, `tailwind-toolbar`, `tailwind-drawer`, `tailwind-notification`) support **named slots** via **attribute selectors** on native elements, matching `ng-content select="[…]"` in the library. Example: `<div tailwind-card-header>…</div>`, `<div tailwind-modal-content>…</div>`. Optional helper components for modal (`TailwindModalTitle`, and so on) use the same attribute on the host.
@@ -91,7 +195,7 @@ Some components (for example `tailwind-card`, `tailwind-modal`, `tailwind-toolba
 - **Card** (`tailwind-card`): Content card with header/body/footer
 - **Chip** (`tailwind-chip`): Removable tags
 - **Tag** (`tailwind-tag`): Semantic labels
-- **Title** (`tailwind-title`): Semantic headings (`h1`–`h6`) with required `text` and optional Solar Line Duotone icon
+- **Title** (`tailwind-title`): Semantic headings (`h1`–`h6`) with required `text` and optional Heroicons outline icon
 
 ### Feedback
 
@@ -124,7 +228,7 @@ Some components (for example `tailwind-card`, `tailwind-modal`, `tailwind-toolba
 
 The library uses a comprehensive design system defined via Tailwind CSS v4 `@theme` directive:
 
-- **Colors**: Primary (blue), Success (green), Warning (amber), Danger (red), Info (cyan), Neutral surfaces
+- **Colors**: Semantic tokens alias Tailwind default palettes — Primary (`blue`), neutral (`slate`), Success (`green`), Warning (`amber`), Danger (`red`), Info (`sky`)
 - **Typography**: Inter (sans), JetBrains Mono (mono)
 - **Spacing**: Tailwind default scale
 - **Border Radius**: xs through full
@@ -133,12 +237,14 @@ The library uses a comprehensive design system defined via Tailwind CSS v4 `@the
 
 ### Customization
 
-Override tokens in your main CSS:
+Prefer **`defineTheme({ … })`** in `ApplicationConfig.providers` for tokens and semantic colors (see [Application configuration](#application-configuration-definetheme)).
+
+You can still override any token in your own CSS, for example:
 
 ```css
 @theme {
-  --color-primary-500: oklch(0.55 0.2 280); /* Change primary to purple */
-  --color-primary-600: oklch(0.48 0.22 280);
+  --color-primary-500: var(--color-violet-500);
+  --color-primary-600: var(--color-violet-600);
 }
 ```
 
@@ -164,4 +270,4 @@ npm run storybook
 
 MIT
 
-The bundled **Solar Line Duotone** SVG icons are © [480 Design](https://www.figma.com/@480design) / [Solar Icons](https://solar-icons.vercel.app/icons), licensed under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/).
+The bundled **[Heroicons](https://heroicons.com/)** outline SVG icons are © [Tailwind Labs](https://tailwindcss.com/), licensed under the [MIT License](https://github.com/tailwindlabs/heroicons/blob/master/LICENSE).