libs/config/styling/variables.css

@@ -97,6 +97,11 @@
     --clr-cat-12: var(--clr-neutral-50);
     --clr-cat-13: var(--clr-neutral-50);
     --clr-cat-14: var(--clr-neutral-50);
+
+    /* Colors pills */
+    --clr-node: var(--clr-acc);
+    --clr-relation: var(--clr-pri);
+    --clr-filter: var(--clr-acc--800);
   }
 
   body.light-mode {

libs/shared/lib/components/DesignGuides/styleGuide.mdx

@@ -57,6 +57,7 @@ import { visualizationColors } from '../../../../config/src/colors.ts';
     }}
   />
 
+  {' '}
   <ColorItem
     title="Extra"
     colors={{
@@ -64,6 +65,16 @@ import { visualizationColors } from '../../../../config/src/colors.ts';
       dark: 'hsl(var(--clr-dark))',
     }}
   />
+
+  {' '}
+  <ColorItem
+    title="Entities"
+    colors={{
+      node: 'hsl(var(--clr-node))',
+      relation: 'hsl(var(--clr-relation))',
+      filter: 'hsl(var(--clr-filter))',
+    }}
+  />
 </ColorPalette>
 
 #### Usage of colors

libs/shared/lib/components/pills/Pill.tsx

@@ -156,7 +156,7 @@ export const EntityPill = React.memo((props: Omit<PillI, 'topColor'> & { withHan
     </>
   );
   return (
-    <PillContext.Provider value={{ color: 'hsl(29 96 60)' }}>
+    <PillContext.Provider value={{ color: 'hsl(var(--clr-node))' }}>
       <Pill {...props} corner="rounded" handles={handles} />
     </PillContext.Provider>
   );
@@ -184,7 +184,7 @@ export const RelationPill = React.memo((props: Omit<PillI, 'topColor'> & { withH
   );
 
   return (
-    <PillContext.Provider value={{ color: '#0676C1' }}>
+    <PillContext.Provider value={{ color: 'hsl(var(--clr-relation))' }}>
       <Pill {...props} corner="diamond" handles={handles} />
     </PillContext.Provider>
   );
@@ -198,7 +198,7 @@ export const LogicPill = React.memo((props: Omit<PillI, 'topColor'>) => {
   );
 
   return (
-    <PillContext.Provider value={{ color: '#543719' }}>
+    <PillContext.Provider value={{ color: 'hsl(var(--clr-filter))' }}>
       <Pill {...props} corner="square" handles={handles} />
     </PillContext.Provider>
   );

libs/shared/lib/components/pills/PillContext.tsx

 import { createContext } from 'react';
 
 export const PillContext = createContext({
-  color: 'hsl(29 96 60)',
+  color: 'hsl(var(--clr-node))',
 });

libs/shared/lib/data-access/store/schemaSlice.ts

@@ -12,6 +12,7 @@ export type SchemaSettings = {
   connectionType: SchemaConnectionTypes;
   layoutName: AllLayoutAlgorithms;
   animatedEdges: boolean;
+  showMinimap: boolean;
 };
 
 type schemaSliceI = {
@@ -37,6 +38,7 @@ export const initialState: schemaSliceI = {
     connectionType: 'connection',
     layoutName: Layouts.DAGRE,
     animatedEdges: false,
+    showMinimap: true,
   },
 };
 export const schemaSlice = createSlice({

libs/shared/lib/schema/panel/SchemaSettings.tsx

@@ -19,6 +19,14 @@ export const SchemaSettings = () => {
           dispatch(setSchemaSettings({ ...settings, animatedEdges: value as any }));
         }}
       />
+      <Input
+        type="boolean"
+        value={settings.showMinimap}
+        label="Show Minimap"
+        onChange={(value: boolean) => {
+          dispatch(setSchemaSettings({ ...settings, showMinimap: value as any }));
+        }}
+      />
       <Input
         type="dropdown"
         label="Type of Connection"