refactor: move pill colors to css variables

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))',
 });