From dcaab15d44f23036920385f95581b8f8fe820c9b Mon Sep 17 00:00:00 2001
From: MarcosPierasNL <pieras.marcos@gmail.com>
Date: Thu, 22 Aug 2024 11:54:25 +0200
Subject: [PATCH] refactor: move pill colors to css variables
---
libs/config/styling/variables.css | 5 +++++
.../shared/lib/components/DesignGuides/styleGuide.mdx | 11 +++++++++++
libs/shared/lib/components/pills/Pill.tsx | 6 +++---
libs/shared/lib/components/pills/PillContext.tsx | 2 +-
4 files changed, 20 insertions(+), 4 deletions(-)
diff --git a/libs/config/styling/variables.css b/libs/config/styling/variables.css
index 47bab4049..09ef3956b 100644
--- a/libs/config/styling/variables.css
+++ b/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 {
diff --git a/libs/shared/lib/components/DesignGuides/styleGuide.mdx b/libs/shared/lib/components/DesignGuides/styleGuide.mdx
index 6847394b8..fd0755de1 100644
--- a/libs/shared/lib/components/DesignGuides/styleGuide.mdx
+++ b/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
diff --git a/libs/shared/lib/components/pills/Pill.tsx b/libs/shared/lib/components/pills/Pill.tsx
index a479ef713..56492a5ed 100644
--- a/libs/shared/lib/components/pills/Pill.tsx
+++ b/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>
);
diff --git a/libs/shared/lib/components/pills/PillContext.tsx b/libs/shared/lib/components/pills/PillContext.tsx
index 3ec61a12a..34cf06e2e 100644
--- a/libs/shared/lib/components/pills/PillContext.tsx
+++ b/libs/shared/lib/components/pills/PillContext.tsx
@@ -1,5 +1,5 @@
import { createContext } from 'react';
export const PillContext = createContext({
- color: 'hsl(29 96 60)',
+ color: 'hsl(var(--clr-node))',
});
--
GitLab