ngx-t-forms 2.0.29 → 2.0.31

package/styles/_json-editor-syntax.scss

@@ -0,0 +1,26 @@
+// ngx-t-forms — JSON Editor Syntax Highlighting (consumer-opt-in)
+//
+// The <app-json-editor> component renders its syntax highlights via
+// [innerHTML], which Angular's emulated view encapsulation cannot scope.
+// To keep the component itself on `ViewEncapsulation.Emulated` (per
+// CLAUDE.md §3 and DECISIONS.md D-012), the five `.json-*` classes that
+// colour keys, strings, numbers, booleans, and null tokens live here as
+// a global partial.
+//
+// Usage — from the consumer's GLOBAL SCSS entry (e.g. `styles.scss`):
+//
+//     @use 'ngx-t-forms/styles/json-editor-syntax';
+//
+// If you do not render <app-json-editor> visually, you can skip this
+// import — the editor will still function, but the highlighted text will
+// render with the default text colour (no syntax colouring).
+//
+// Colour palette: VS Code Dark inspired, now driven by the `--lib-forms-code-*`
+// tokens defined in `styles/tokens` (Phase 6). The hex fallbacks keep this
+// partial self-contained if the consumer loads it without the token sheet.
+
+.json-key     { color: var(--lib-forms-code-key, #9cdcfe); }     // Light Blue (VS Code key)
+.json-string  { color: var(--lib-forms-code-string, #ce9178); }  // Orange/Red
+.json-number  { color: var(--lib-forms-code-number, #b5cea8); }  // Light Green
+.json-boolean { color: var(--lib-forms-code-boolean, #569cd6); } // Dark Blue
+.json-null    { color: var(--lib-forms-code-null, #569cd6); }    // Dark Blue

package/styles/_signature-pad.scss

@@ -0,0 +1,26 @@
+// ngx-t-forms — Signature Pad Canvas Sizing (consumer-opt-in)
+//
+// <lib-signature-pad-input> creates its drawing <canvas> imperatively
+// (document.createElement('canvas') + host.appendChild(canvas)) inside the
+// `.signature-container` host div. Because that element is injected at
+// runtime rather than rendered from the template, Angular's emulated view
+// encapsulation never stamps it with the component's `_ngcontent` attribute,
+// so a component-scoped `.signature-container canvas` rule would no longer
+// match the canvas after moving off ViewEncapsulation.None.
+//
+// To keep the component itself on `ViewEncapsulation.Emulated` (per
+// CLAUDE.md §3 and DECISIONS.md D-012, following the json-editor precedent),
+// the single canvas-sizing rule lives here as a global partial.
+//
+// Usage — from the consumer's GLOBAL SCSS entry (e.g. `styles.scss`):
+//
+//     @use 'ngx-t-forms/styles/signature-pad';
+//
+// Without this import the signature pad still functions, but the imperatively
+// created canvas falls back to its intrinsic size (the component sets an
+// explicit pixel height in TS; width fills the host via this rule).
+
+.signature-container canvas {
+  width: 100%;
+  height: 200px;
+}

package/styles/_tokens.scss

@@ -0,0 +1,148 @@
+// ngx-t-forms — Design Tokens (Phase 6 · Visual debt)
+// =====================================================
+//
+// THE single source of truth for every customizable visual value in the
+// library. Component SCSS references these via `var(--lib-forms-*)` /
+// `var(--sem-*)` and NEVER hardcodes a hex literal (CLAUDE.md §3 Visual;
+// MIGRATION_PLAN.md §12). Token files are the one place a hex is allowed —
+// here it is only ever a *fallback* behind a Material system variable.
+//
+// Source of truth for light/dark: Angular Material M3 system variables
+// (`--mat-sys-*`). When the consumer sets up `mat.theme()`, these tokens
+// inherit the active theme automatically. The hex fallbacks below match
+// Material's M3 baseline (purple) so rendering is unchanged when no theme
+// is loaded — preserving pre-migration parity (MIGRATION_PLAN.md §12.3).
+//
+// Re-theming (exit criterion, MIGRATION_PLAN.md §12.4): a consumer overrides
+// any `--lib-forms-*` / `--sem-*` on `:root` (or a `.dark` / `[data-theme]`
+// scope) in their GLOBAL styles and the whole library re-themes.
+//
+// USAGE — from the consumer's GLOBAL SCSS entry (e.g. `styles.scss`):
+//
+//     @use 'ngx-t-forms/styles/tokens';
+//
+// This is a required integration step (additive, same convention as the
+// Material theme and `ngx-t-forms/styles/json-editor-syntax`, DECISIONS.md
+// D-012 / D-017).
+
+:root {
+  // ---- Surface & text scale (Material M3 neutrals) -----------------------
+  --lib-forms-surface:                   var(--mat-sys-surface, #fef7ff);
+  --lib-forms-surface-container-lowest:  var(--mat-sys-surface-container-lowest, #ffffff);
+  --lib-forms-surface-container-low:     var(--mat-sys-surface-container-low, #f7f2fa);
+  --lib-forms-surface-container:         var(--mat-sys-surface-container, #f3edf7);
+  --lib-forms-surface-container-high:    var(--mat-sys-surface-container-high, #ece6f0);
+  --lib-forms-surface-container-highest: var(--mat-sys-surface-container-highest, #e6e0e9);
+  --lib-forms-surface-dim:               var(--mat-sys-surface-dim, #ded8e1);
+
+  --lib-forms-on-surface:                var(--mat-sys-on-surface, #1c1b1f);
+  --lib-forms-on-surface-variant:        var(--mat-sys-on-surface-variant, #49454f);
+
+  --lib-forms-outline:                   var(--mat-sys-outline, #79747e);
+  --lib-forms-outline-variant:           var(--mat-sys-outline-variant, #cac4d0);
+
+  // ---- Single accent (Material M3 primary) -------------------------------
+  --lib-forms-primary:                   var(--mat-sys-primary, #6750a4);
+  --lib-forms-on-primary:                var(--mat-sys-on-primary, #ffffff);
+  --lib-forms-primary-container:         var(--mat-sys-primary-container, #eaddff);
+  --lib-forms-on-primary-container:      var(--mat-sys-on-primary-container, #21005d);
+
+  // ---- Error (structural; mirrors --sem-error) ---------------------------
+  --lib-forms-error:                     var(--mat-sys-error, #b3261e);
+  --lib-forms-on-error:                  var(--mat-sys-on-error, #ffffff);
+  --lib-forms-error-container:           var(--mat-sys-error-container, #f9dedc);
+  --lib-forms-on-error-container:        var(--mat-sys-on-error-container, #410e0b);
+
+  // ---- Shadow colour (so component shadows stay tokenised) ---------------
+  --lib-forms-shadow-color:              var(--mat-sys-shadow, #000000);
+
+  // ---- Radius (preserves pre-migration values; not a Phase 6 gap) --------
+  --lib-forms-radius-sm:   8px;
+  --lib-forms-radius-md:   10px;
+  --lib-forms-radius-lg:   12px;
+  --lib-forms-radius-pill: 999px;
+
+  // ---- Elevation (GDP §17 — wide, soft, monochromatic) -------------------
+  --lib-forms-shadow-edge:     0 1px 2px  color-mix(in srgb, var(--lib-forms-shadow-color) 4%,  transparent);
+  --lib-forms-shadow-resting:  0 4px 24px color-mix(in srgb, var(--lib-forms-shadow-color) 6%,  transparent);
+  --lib-forms-shadow-hover:    0 8px 40px color-mix(in srgb, var(--lib-forms-shadow-color) 10%, transparent);
+  --lib-forms-shadow-floating: 0 16px 56px color-mix(in srgb, var(--lib-forms-shadow-color) 14%, transparent);
+
+  // ---- Motion (GDP §16 / L-05) -------------------------------------------
+  // The luxury easing: fast start, slow decelerate — never mechanical.
+  --lib-forms-easing:          cubic-bezier(0.16, 1, 0.3, 1);
+  --lib-forms-duration-hover:  300ms; // hover / border / outline changes
+  --lib-forms-duration:        400ms; // entrance / exit / toggle / expand
+
+  // ---- Semantic palette (GDP §2c) — chips / badges / alerts / inline -----
+  // Status hues. Never used as structural/decorative colour (SC-01..SC-07).
+  --sem-error:    var(--mat-sys-error, #b3261e);
+  --sem-success:  #1a6b3a;
+  --sem-warning:  #7c5800;
+  --sem-info:     #2c4393;
+  --sem-premium:  #8b3a00;
+
+  --sem-error-surface:   color-mix(in srgb, var(--sem-error)   10%, var(--lib-forms-surface));
+  --sem-success-surface: color-mix(in srgb, var(--sem-success) 10%, var(--lib-forms-surface));
+  --sem-warning-surface: color-mix(in srgb, #c87800            10%, var(--lib-forms-surface));
+  --sem-info-surface:    color-mix(in srgb, var(--sem-info)    10%, var(--lib-forms-surface));
+  --sem-premium-surface: color-mix(in srgb, #c45000            10%, var(--lib-forms-surface));
+
+  // ---- Workflow-state hues (GDP §2c hue map) -----------------------------
+  // Amber=user action needed · Red=viewer accountable/blocking ·
+  // Rust=someone else blocking · Blue=automated · Emerald=terminal success ·
+  // Slate=archived · Charcoal=concurrency lock.
+  --sem-amber:    #b06f00;
+  --sem-red:      var(--mat-sys-error, #b3261e);
+  --sem-rust:     #8a3b1e;
+  --sem-blue:     #2c4393;
+  --sem-emerald:  #1a6b3a;
+  --sem-slate:    #4a5568;
+  --sem-charcoal: #3a3a3a;
+
+  --sem-amber-surface:    color-mix(in srgb, var(--sem-amber)    12%, var(--lib-forms-surface));
+  --sem-red-surface:      color-mix(in srgb, var(--sem-red)      12%, var(--lib-forms-surface));
+  --sem-rust-surface:     color-mix(in srgb, var(--sem-rust)     12%, var(--lib-forms-surface));
+  --sem-blue-surface:     color-mix(in srgb, var(--sem-blue)     12%, var(--lib-forms-surface));
+  --sem-emerald-surface:  color-mix(in srgb, var(--sem-emerald)  12%, var(--lib-forms-surface));
+  --sem-slate-surface:    color-mix(in srgb, var(--sem-slate)    12%, var(--lib-forms-surface));
+  --sem-charcoal-surface: color-mix(in srgb, var(--sem-charcoal) 12%, var(--lib-forms-surface));
+
+  // ---- Code / syntax-highlight palette (json-editor; opt-in) -------------
+  // VS Code Dark inspired. Consumed by `styles/json-editor-syntax`.
+  --lib-forms-code-bg:       #1e1e1e;
+  --lib-forms-code-surface:  #252526;
+  --lib-forms-code-border:   #3e3e42;
+  --lib-forms-code-fg:       #d4d4d4;
+  --lib-forms-code-key:      #9cdcfe; // light blue
+  --lib-forms-code-string:   #ce9178; // orange/red
+  --lib-forms-code-number:   #b5cea8; // light green
+  --lib-forms-code-boolean:  #569cd6; // dark blue
+  --lib-forms-code-null:     #569cd6; // dark blue
+  --lib-forms-code-error:    #f48771; // soft red
+
+  // ---- HTTP method hues (REST / Postman editors) -------------------------
+  // Reuse the semantic palette so they adapt in dark mode (SC-* compliant —
+  // only ever used as a small method badge, never structural colour).
+  --lib-forms-method-get:    var(--sem-emerald, #1a6b3a);
+  --lib-forms-method-post:   var(--sem-blue, #2c4393);
+  --lib-forms-method-put:    var(--sem-amber, #b06f00);
+  --lib-forms-method-patch:  var(--sem-rust, #8a3b1e);
+  --lib-forms-method-delete: var(--sem-error, #b3261e);
+}
+
+// Dark-mode text overrides (GDP §2c — surfaces adapt via color-mix; only
+// the semantic text hues need lightening). Library reacts to a consumer-set
+// `.dark` / `[data-theme="dark"]` scope — it never declares the switch itself.
+:root.dark,
+.dark,
+[data-theme='dark'] {
+  --sem-success: #4caf82;
+  --sem-warning: #e6a817;
+  --sem-premium: #d4743a;
+
+  --sem-amber:   #e6a817;
+  --sem-rust:    #c5734f;
+  --sem-emerald: #4caf82;
+  --sem-slate:   #94a3b8;
+}