@flusys/ng-ui 6.2.2 → 6.4.0

package/README.md

@@ -108,7 +108,19 @@ PRESET_NAMES; // ['Aura', 'Lara', 'Nora']
 PRESETS["Nora"]; // ThemePreset — border radius, shadows, focus ring, card + select-button tokens
 ```
 
-Each `ThemePreset` controls border radius scale, shadow scale, transition duration, focus ring style, card tokens, and select-button tokens. `Aura` is soft/rounded, `Lara` is Bootstrap-like, `Nora` is sharp/high-contrast with solid highlights.
+Each `ThemePreset` is a whole design language, not a palette. It controls the radius scale, border width, shadow scale, transition duration, focus ring, **control density** (field and button padding), button weight and tracking, overlay shape and elevation, card tokens, shell chrome (sidebar / topbar / active menu item), and select-button tokens.
+
+| Preset | Language                                                                                            |
+| ------ | --------------------------------------------------------------------------------------------------- |
+| `Aura` | Soft and elevated — rounded controls, compact rows, diffuse shadows, hairline borders. The default.  |
+| `Lara` | Structural and flat — tighter corners, noticeably taller rows, shadows replaced by linework, bolder type. |
+| `Nora` | Sharp and brutalist — zero radius, 2px borders, no motion, solid highlights, heaviest type.          |
+
+Preset tokens reach the UI through three routes, and a new token should use one of them rather than being read directly in a component:
+
+1. **Tailwind's own scales** — `@theme inline` in `themes/tailwind.scss` maps `--radius-*`, `--shadow-*` and `--default-border-width` onto preset tokens, so every existing `rounded-*`, `shadow-*` and `border` utility in the app is already preset-driven.
+2. **The `f-*` control utilities** — `f-field` / `f-field-sm` / `f-field-lg` / `f-field-compact` / `f-field-shape`, `f-btn` / `f-btn-sm` / `f-btn-lg` / `f-btn-icon*` / `f-btn-round`, and `f-overlay` / `f-overlay-shape`. Form fields and buttons use these instead of fixed padding and radius classes; that is what lets a preset change how dense the UI reads. Never hard-code a control's padding or radius.
+3. **`--f-*` custom properties** — read directly by the layout SCSS for shell chrome. The applier also stamps `data-f-preset="<name>"` on `<html>` for the rare shell rule that has to know the design language as a whole rather than one token's value.
 
 ### Palettes