fix(table colors): switch to default table color (#841)

src/context/chartdb-context/chartdb-provider.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import type { DBTable } from '@/lib/domain/db-table';
 import { deepCopy, generateId } from '@/lib/utils';
-import { randomColor } from '@/lib/colors';
+import { defaultTableColor, defaultAreaColor } from '@/lib/colors';
 import type { ChartDBContext, ChartDBEvent } from './chartdb-context';
 import { chartDBContext } from './chartdb-context';
 import { DatabaseType } from '@/lib/domain/database-type';
@@ -337,7 +337,7 @@ export const ChartDBProvider: React.FC<
                     },
                 ],
                 indexes: [],
-                color: randomColor(),
+                color: defaultTableColor,
                 createdAt: Date.now(),
                 isView: false,
                 order: tables.length,
@@ -1412,7 +1412,7 @@ export const ChartDBProvider: React.FC<
                 y: 0,
                 width: 300,
                 height: 200,
-                color: randomColor(),
+                color: defaultAreaColor,
                 ...attributes,
             };
 

src/lib/colors.ts

@@ -19,3 +19,5 @@ export const randomColor = () => {
 
 export const viewColor = '#b0b0b0';
 export const materializedViewColor = '#7d7d7d';
+export const defaultTableColor = '#8eb7ff';
+export const defaultAreaColor = '#b067e9';

src/lib/data/sql-import/common.ts

@@ -6,7 +6,7 @@ import type { DBField } from '@/lib/domain/db-field';
 import type { DBIndex } from '@/lib/domain/db-index';
 import type { DataType } from '@/lib/data/data-types/data-types';
 import { genericDataTypes } from '@/lib/data/data-types/generic-data-types';
-import { randomColor } from '@/lib/colors';
+import { defaultTableColor } from '@/lib/colors';
 import { DatabaseType } from '@/lib/domain/database-type';
 import type { DBCustomType } from '@/lib/domain/db-custom-type';
 import { DBCustomTypeKind } from '@/lib/domain/db-custom-type';
@@ -727,10 +727,10 @@ export function convertToChartDBDiagram(
             indexes,
             x: col * tableSpacing,
             y: row * tableSpacing,
-            color: randomColor(),
+            color: defaultTableColor,
             isView: false,
             createdAt: Date.now(),
-        };
+        } satisfies DBTable;
     });
 
     // Process relationships

src/lib/dbml/dbml-import/dbml-import.ts

@@ -6,7 +6,7 @@ import type { Cardinality, DBRelationship } from '@/lib/domain/db-relationship';
 import type { DBField } from '@/lib/domain/db-field';
 import type { DataTypeData } from '@/lib/data/data-types/data-types';
 import { findDataTypeDataById } from '@/lib/data/data-types/data-types';
-import { randomColor } from '@/lib/colors';
+import { defaultTableColor } from '@/lib/colors';
 import { DatabaseType } from '@/lib/domain/database-type';
 import type Field from '@dbml/core/types/model_structure/field';
 import type { DBIndex } from '@/lib/domain';
@@ -507,11 +507,11 @@ export const importDBMLToDiagram = async (
                 indexes,
                 x: col * tableSpacing,
                 y: row * tableSpacing,
-                color: randomColor(),
+                color: defaultTableColor,
                 isView: false,
                 createdAt: Date.now(),
                 comments: tableComment,
-            } as DBTable;
+            } satisfies DBTable;
         });
 
         // Create relationships using the refs

src/lib/domain/db-table.ts

@@ -10,7 +10,11 @@ import {
 } from './db-field';
 import type { TableInfo } from '../data/import-metadata/metadata-types/table-info';
 import { createAggregatedIndexes } from '../data/import-metadata/metadata-types/index-info';
-import { materializedViewColor, viewColor, randomColor } from '@/lib/colors';
+import {
+    materializedViewColor,
+    viewColor,
+    defaultTableColor,
+} from '@/lib/colors';
 import type { DBRelationship } from './db-relationship';
 import {
     decodeBase64ToUtf16LE,
@@ -224,7 +228,7 @@ export const createTablesFromMetadata = ({
                 ? materializedViewColor
                 : isView
                   ? viewColor
-                  : randomColor(),
+                  : defaultTableColor,
             isView: isView,
             isMaterializedView: isMaterializedView,
             createdAt: Date.now(),