Added color selection for relationship lines

[RamiroRodriguezC]

Change Report

Objective

Implement relation line color support across the Mongo Modeler web app and make the new color picker fully consistent with the existing relation edit form UI.

Work completed

1. Data model and schema wiring

• Added color?: string to RelationVm in apps/web/src/core/providers/canvas-schema/canvas-schema-vlatest.model.ts.
• Ensured the relation view model can now carry a color value for each relation line.

2. Form value mapping and defaults

• Updated apps/web/src/pods/edit-relation/edit-relation.business.ts to include color in the mapping between form values and relation model values.
• Set a default relation color for new relations to #ecad5a.
• Kept fallback handling for existing relation edits so missing color values default safely without breaking form behavior.

3. Relation edit form field

• Added a Relation color field to apps/web/src/pods/edit-relation/edit-relation.component.tsx using InputFormik and type="color".
• Removed hard-coded width styling from the form field so the color input can inherit the standard form layout.

4. Relation rendering support

• Updated apps/web/src/pods/canvas/components/relation/...tsx to accept and use relation color values when rendering the SVG lines and forks.
• Ensured relation line components receive the color from the relation model and apply it consistently in the stroke style.

5. Form styling and consistency fixes

• Enhanced apps/web/src/common/components/forms/input-formik/input-formik.component.tsx to detect type="color" and render the color picker using the same layout structure as other form controls.
• Reused the .select / .selectLabel / .selectContainer layout pattern from dropdown form fields, preventing the color label from drifting out of alignment.
• Standardized the color picker label font size to var(--fs-m) and aligned it vertically with the control.
• Changed the color input CSS so it uses flex: 1 1 auto, box-sizing: border-box, and consistent height and border-radius values.
• Normalized browser color-swatch rendering by adjusting ::-webkit-color-swatch-wrapper, ::-webkit-color-swatch, and ::-moz-color-swatch so the swatch fills the full control without an internal grey border.
• Unified hover/focus behavior to use border-color: var(--input-border-color-active), background-color: var(--hover-input), and box-shadow: 0 0 4px var(--hover-checkbox).

Modified files

• apps/web/src/core/providers/canvas-schema/canvas-schema-vlatest.model.ts
• apps/web/src/pods/edit-relation/edit-relation.business.ts
• apps/web/src/pods/edit-relation/edit-relation.component.tsx
• apps/web/src/common/components/forms/input-formik/input-formik.component.tsx
• apps/web/src/common/components/forms/input-formik/input-formik.component.module.css

Expected result

• Users can choose a relation line color in the edit relation form.
• The Relation color label is aligned with the rest of the form labels.
• The color picker control has the same hover and focus styling as the other dropdown/select controls.
• Relation lines render using the selected color after saving.

Closes #610

[RamiroRodriguezC]

Cause found to error in #610

The SVG/PNG exporter was using a fixed color (exportStylesVariables.RELATION_COLOR) in the export relations, instead of using relation.color which is used in the canvas.

What was corrected?

src/pods/export/components/relation/database-relation-collection.component.tsx

now passes relation.color to the export components.
src/pods/export/components/relation/components/database-relation-two-tables-straight-export.component.tsx

src/pods/export/components/relation/components/database-relation-two-tables-path-export.component.tsx

src/pods/export/components/relation/components/database-relation-self-export.component.tsx

each component now accepts relationColor and uses it in stroke.
src/pods/export/components/relation/components/fork-export.component.tsx

Result

With this change, the generated SVG should retain the relationship colors defined in the model, and the PNG derived from the SVG should reflect them as well.

example .png with the the color lines