Lemoncode · RamiroRodriguezC · Jun 1, 2026 · Jun 1, 2026
diff --git a/apps/web/src/common/components/forms/input-formik/input-formik.component.module.css b/apps/web/src/common/components/forms/input-formik/input-formik.component.module.css
@@ -6,7 +6,108 @@
 }
 
 .label {
-  font-size: 60%;
+  font-size: var(--fs-m);
+  margin: 0;
+}
+
+.select {
+  display: flex;
+  align-items: center;
+  text-align: left;
+  gap: 10px;
+}
+
+.selectContainer {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.selectLabel {
+  min-width: 20ch;
+  margin: 0;
+  font-size: var(--fs-m);
+  line-height: 1.5;
+}
+
+.colorInput {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 40px;
+  padding: 0;
+  border: 1px solid var(--input-border-color);
+  background-color: var(--bg-input);
+  border-radius: var(--border-radius-xs);
+  cursor: pointer;
+  font-size: var(--fs-m);
+  line-height: 1.5em;
+  transition: all 0.2s ease;
+  color: inherit;
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  accent-color: inherit;
+  box-sizing: border-box;
+}
+
+.colorInput:hover,
+.colorInput:focus,
+.colorInput:active {
+  border-color: var(--input-border-color-active);
+  background-color: var(--hover-input);
+}
+
+.colorInput:hover,
+.colorInput:focus {
+  box-shadow: 0 0 4px var(--hover-checkbox);
+}
+
+.colorInput::-webkit-color-swatch-wrapper {
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+}
+
+.colorInput::-webkit-color-swatch {
+  border: none;
+  border-radius: 0;
+  width: 100%;
+  height: 100%;
+  background-clip: padding-box;
+}
+
+.colorInput::-moz-color-swatch {
+  border: none;
+  border-radius: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.colorInput:hover {
+  border-color: var(--input-border-color-active);
+}
+
+.colorInput:focus {
+  border-color: var(--input-border-color-active);
+  box-shadow: 0 0 4px var(--hover-checkbox);
+}
+
+.colorInput::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+.colorInput::-webkit-color-swatch {
+  border: none;
+  border-radius: var(--border-radius-xs);
+}
+
+.colorInput::-moz-color-swatch {
+  border: none;
+  border-radius: var(--border-radius-xs);
 }
 
 .error {

diff --git a/apps/web/src/common/components/forms/input-formik/input-formik.component.tsx b/apps/web/src/common/components/forms/input-formik/input-formik.component.tsx
@@ -25,16 +25,59 @@ export const InputFormik: React.FC<InputFormikProps> = props => {
   // of error a the initial state
   const hasError = Boolean(meta && meta.touched && meta.error);
 
-  return (
+  const isColorInput = props.type === 'color';
+  const inputStyle: React.CSSProperties = {
+    flex: isColorInput ? '1 1 auto' : undefined,
+    minWidth: isColorInput ? 0 : undefined,
+    height: isColorInput ? '40px' : undefined,
+    padding: isColorInput ? '0' : undefined,
+    borderRadius: isColorInput ? 'var(--border-radius-xs)' : undefined,
+    border: isColorInput ? '1px solid var(--input-border-color)' : undefined,
+    backgroundColor: isColorInput ? 'var(--bg-input)' : undefined,
+    cursor: isColorInput ? 'pointer' : undefined,
+    fontSize: isColorInput ? 'var(--fs-m)' : undefined,
+    lineHeight: isColorInput ? '1.5em' : undefined,
+    boxSizing: isColorInput ? 'border-box' : undefined,
+    WebkitAppearance: isColorInput ? 'none' : undefined,
+    MozAppearance: isColorInput ? 'none' : undefined,
+    appearance: isColorInput ? 'none' : undefined,
+    ...props.style,
+  };
+
+  const labelStyle: React.CSSProperties | undefined = isColorInput
+    ? { minWidth: '20ch', margin: 0 }
+    : undefined;
+
+  return isColorInput ? (
+    <div className={classes.select}>
+      {label ? <p className={classes.selectLabel}>{label}</p> : null}
+      <div className={classes.selectContainer}>
+        <input
+          {...props}
+          className={classes.colorInput}
+          name={inputFieldProps.name}
+          onChange={inputFieldProps.onChange}
+          onBlur={inputFieldProps.onBlur}
+          value={inputFieldProps.value}
+          style={inputStyle}
+        />
+        <span className={classes.error}>{hasError ? meta.error : ''}</span>
+      </div>
+    </div>
+  ) : (
     <div className={classes.container}>
-      {label ? <span>{label}</span> : null}
+      {label ? (
+        <p className={classes.label} style={labelStyle}>
+          {label}
+        </p>
+      ) : null}
       <input
         {...props}
         name={inputFieldProps.name}
         onChange={inputFieldProps.onChange}
         onBlur={inputFieldProps.onBlur}
         value={inputFieldProps.value}
-        style={{ width: '100%' }}
+        style={inputStyle}
       />
       <span className={classes.error}>{hasError ? meta.error : ''}</span>
     </div>

diff --git a/apps/web/src/core/providers/canvas-schema/canvas-schema-vlatest.model.ts b/apps/web/src/core/providers/canvas-schema/canvas-schema-vlatest.model.ts
@@ -29,6 +29,7 @@ export interface RelationVm {
   fromFieldId: string;
   toFieldId: string;
   type: RelationType;
+  color?: string;  //
 }
 
 export interface NoteVm {

diff --git a/apps/web/src/pods/canvas/components/relation/components/fork.component.tsx b/apps/web/src/pods/canvas/components/relation/components/fork.component.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Coords } from '@/core/model';
 import { FORK_LINE_SPACING, FORK_WIDTH } from '../relation.vm';
 import classes from './fork.component.module.css';
@@ -6,11 +7,15 @@ interface Props {
   isSelected: boolean;
   forkCoords: Coords;
   drawLeftToRight: boolean;
+  relationColor?: string;
 }
 
 export const ForkComponent: React.FC<Props> = props => {
-  const { forkCoords, drawLeftToRight, isSelected } = props;
+  const { forkCoords, drawLeftToRight, isSelected, relationColor } = props;
   const direction = drawLeftToRight ? 1 : -1;
+  const relationStrokeStyle = relationColor
+    ? { stroke: relationColor }
+    : undefined;
 
   return (
     <g>
@@ -23,6 +28,7 @@ export const ForkComponent: React.FC<Props> = props => {
         className={
           isSelected ? classes.selectedRelation : classes.nonSelectedRelation
         }
+        style={relationStrokeStyle}
       />
       <line
         x1={forkCoords.x}
@@ -32,6 +38,7 @@ export const ForkComponent: React.FC<Props> = props => {
         className={
           isSelected ? classes.selectedRelation : classes.nonSelectedRelation
         }
+        style={relationStrokeStyle}
       />
       <line
         x1={forkCoords.x}
@@ -41,6 +48,7 @@ export const ForkComponent: React.FC<Props> = props => {
         className={
           isSelected ? classes.selectedRelation : classes.nonSelectedRelation
         }
+        style={relationStrokeStyle}
       />
     </g>
   );

diff --git a/apps/web/src/pods/canvas/components/relation/database-relation-collection.component.tsx b/apps/web/src/pods/canvas/components/relation/database-relation-collection.component.tsx
@@ -75,6 +75,7 @@ export const DatabaseRelationCollectionComponent: React.FC<
               endCoords={endCoords}
               isSelected={relation.id === schema.selectedElementId}
               tableWidth={fromTable.width ?? TABLE_CONST.DEFAULT_TABLE_WIDTH}
+              relationColor={relation.color}
             />
           );
         case 'overlapping':
@@ -91,6 +92,7 @@ export const DatabaseRelationCollectionComponent: React.FC<
                 fromTable.width ?? TABLE_CONST.DEFAULT_TABLE_WIDTH
               }
               endTableWidth={toTable.width ?? TABLE_CONST.DEFAULT_TABLE_WIDTH}
+              relationColor={relation.color}
             />
           );
         case 'straight':
@@ -107,6 +109,7 @@ export const DatabaseRelationCollectionComponent: React.FC<
                 fromTable.width ?? TABLE_CONST.DEFAULT_TABLE_WIDTH
               }
               endTableWidth={toTable.width ?? TABLE_CONST.DEFAULT_TABLE_WIDTH}
+              relationColor={relation.color}
             />
           );
       }

diff --git a/apps/web/src/pods/canvas/components/relation/database-relation-self.component.tsx b/apps/web/src/pods/canvas/components/relation/database-relation-self.component.tsx
@@ -15,6 +15,7 @@ interface DatabaseSelfRelationshipProps {
   onDoubleClick: (relationId: GUID) => void;
   isSelected: boolean;
   tableWidth: number;
+  relationColor?: string;
 }
 
 export const DatabaseRelationSelfComponent: React.FC<
@@ -29,6 +30,7 @@ export const DatabaseRelationSelfComponent: React.FC<
     onClick,
     onDoubleClick,
     tableWidth,
+    relationColor,
   } = props;
 
   // Determine the direction of the fork
@@ -72,6 +74,10 @@ export const DatabaseRelationSelfComponent: React.FC<
     }
   };
 
+  const relationStrokeStyle = relationColor
+    ? { stroke: relationColor }
+    : undefined;
+
   return (
     <svg>
       {/* Glow filter if selected */}
@@ -89,6 +95,7 @@ export const DatabaseRelationSelfComponent: React.FC<
         className={
           isSelected ? classes.selectedRelation : classes.nonSelectedRelation
         }
+        style={relationStrokeStyle}
         filter={isSelected ? `url(#table_glow)` : ''}
       />
 
@@ -98,13 +105,15 @@ export const DatabaseRelationSelfComponent: React.FC<
           isSelected={isSelected}
           forkCoords={{ x: originXMinusFork, y: endCoords.y }}
           drawLeftToRight={isDrawLeftToRight}
+          relationColor={relationColor}
         />
       )}
       {relationType === 'M:1' && (
         <ForkComponent
           isSelected={isSelected}
           forkCoords={{ x: originXMinusFork, y: startCoords.y }}
           drawLeftToRight={!isDrawLeftToRight}
+          relationColor={relationColor}
         />
       )}
 

diff --git a/apps/web/src/pods/canvas/components/relation/database-relation-two-tables-path.component.tsx b/apps/web/src/pods/canvas/components/relation/database-relation-two-tables-path.component.tsx
@@ -19,6 +19,7 @@ interface DatabaseRelationshipTwoTablesProps {
   isSelected: boolean;
   startTableWidth?: number;
   endTableWidth?: number;
+  relationColor?: string;
 }
 
 export const DatabaseRelationshipTwoTablePathComponent: React.FC<
@@ -33,13 +34,18 @@ export const DatabaseRelationshipTwoTablePathComponent: React.FC<
   onDoubleClick,
   startTableWidth,
   endTableWidth,
+  relationColor,
 }) => {
   const isDrawLeftToRight = isDrawLeftToRightLogic(
     relationType,
     startCoords,
     endCoords
   );
 
+  const relationStrokeStyle = relationColor
+    ? { stroke: relationColor }
+    : undefined;
+
   return (
     <svg>
       {/* Glow filter if selected */}
@@ -63,6 +69,7 @@ export const DatabaseRelationshipTwoTablePathComponent: React.FC<
         className={
           isSelected ? classes.selectedRelation : classes.nonSelectedRelation
         }
+        style={relationStrokeStyle}
         filter={isSelected ? `url(#table_glow)` : ''}
       />
 
@@ -78,6 +85,7 @@ export const DatabaseRelationshipTwoTablePathComponent: React.FC<
             endTableWidth
           )}
           drawLeftToRight={!isDrawLeftToRight}
+          relationColor={relationColor}
         />
       )}
       {relationType === 'M:1' && (
@@ -91,6 +99,7 @@ export const DatabaseRelationshipTwoTablePathComponent: React.FC<
             endTableWidth
           )}
           drawLeftToRight={isDrawLeftToRight}
+          relationColor={relationColor}
         />
       )}