feat: updates palette

src/components/Connectors/Connector/Connector.tsx

@@ -5,7 +5,8 @@ import { UNPROJECTED_TILE_SIZE } from 'src/config';
 import {
   getAnchorPosition,
   getRectangleFromSize,
-  CoordsUtils
+  CoordsUtils,
+  getColorVariant
 } from 'src/utils';
 import { IsoTileArea } from 'src/components/IsoTileArea/IsoTileArea';
 import { Circle } from 'src/components/Circle/Circle';
@@ -90,7 +91,7 @@ export const Connector = ({ connector }: Props) => {
       />
       <polyline
         points={pathString}
-        stroke={connector.color}
+        stroke={getColorVariant(connector.color, 'dark', { grade: 1 })}
         strokeWidth={connectorWidthPx}
         strokeLinecap="round"
         strokeLinejoin="round"

src/styles/theme.ts

@@ -32,13 +32,13 @@ export const customVars: CustomThemeVars = {
     height: 40
   },
   diagramPalette: {
-    purple: '#cabffa',
-    blue: '#b4c7f6',
-    yellow: '#efe9a3',
-    red: '#efbcba',
-    orange: '#f9debe',
-    green: '#b5dcad',
-    torquise: '#c2e7e6'
+    blue: '#a0b9f8',
+    purple: '#bbadfb',
+    yellow: '#f4eb8e',
+    red: '#f0aca9',
+    orange: '#fad6ac',
+    green: '#a8dc9d',
+    torquise: '#b3e5e3'
   }
 };
 

src/utils/common.ts

@@ -25,19 +25,13 @@ interface GetColorVariantOpts {
 export const getColorVariant = (
   color: string,
   variant: 'light' | 'dark',
-  { alpha = 1, grade = 0 }: GetColorVariantOpts
+  { alpha = 1, grade = 1 }: GetColorVariantOpts
 ) => {
   switch (variant) {
     case 'light':
-      return chroma(color)
-        .brighten(grade ?? 1)
-        .alpha(alpha)
-        .css();
+      return chroma(color).brighten(grade).alpha(alpha).css();
     case 'dark':
-      return chroma(color)
-        .darken(grade ?? 1)
-        .alpha(alpha)
-        .css();
+      return chroma(color).darken(grade).saturate(grade).alpha(alpha).css();
     default:
       return chroma(color).alpha(alpha).css();
   }