Feat/performance-refactor-styled-component (#5516)

In this PR I'm optimizing a whole RecordTableCell in real conditions
with a complex RelationFieldDisplay component :
- Broke down getObjectRecordIdentifier into multiple utils
- Precompute memoized function for getting chip data per field with
useRecordChipDataGenerator()
- Refactored RelationFieldDisplay
- Use CSS modules where performance is needed instead of styled
components
- Create a CSS theme with global CSS variables to be used by CSS modules

packages/twenty-ui/src/display/chip/components/Chip.module.css

@@ -0,0 +1,84 @@
+.label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chip {
+  --chip-horizontal-padding: calc(var(--twentycrm-spacing-multiplicator) * 1px);
+  --chip-vertical-padding: calc(var(--twentycrm-spacing-multiplicator) * 1px);
+
+  align-items: center;
+  border-radius: var(--twentycrm-border-radius-sm);
+
+  color: var(--twentycrm-font-color-secondary);
+
+  display: inline-flex;
+  justify-content: center;
+
+  gap: calc(var(--twentycrm-spacing-multiplicator) * 1px);
+  height: calc(var(--twentycrm-spacing-multiplicator) * 3px);
+
+  max-width: calc(100% - var(--chip-horizontal-padding) * 2px);
+  overflow: hidden;
+
+  padding: var(--chip-vertical-padding) var(--chip-horizontal-padding);
+
+  user-select: none;
+}
+
+.disabled {
+  cursor: not-allowed;
+
+  color: var(--twentycrm-font-color-light);
+
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.accent-text-primary {
+  color: var(--twentycrm-font-color-primary);
+}
+
+.accent-text-secondary {
+  font-weight: var(--twentycrm-font-weight-medium);
+}
+
+.size-large {
+  height: calc(var(--twentycrm-spacing-multiplicator) * 4px);
+}
+
+.variant-regular:hover {
+  background-color: var(--twentycrm-background-transparent-light);
+}
+
+.variant-regular:active {
+  background-color: var(--twentycrm-background-transparent-medium);
+}
+
+.variant-highlighted {
+  background-color: var(--twentycrm-background-transparent-light);
+}
+
+.variant-highlighted:hover {
+  background-color: var(--twentycrm-background-transparent-medium);
+}
+
+.variant-highlighted:active {
+  background-color: var(--twentycrm-background-transparent-strong);
+}
+
+.variant-rounded {
+  --chip-horizontal-padding: calc(var(--twentycrm-spacing-multiplicator) * 2px);
+  --chip-vertical-padding: 3px;
+
+  background-color: var(--twentycrm-background-transparent-light);
+  border: 1px solid var(--twentycrm-border-color-medium);
+  border-radius: 50px;
+}
+
+.variant-transparent {
+  cursor: inherit;
+}