ColorSample

import { ColorSample } from 'twenty-ui/primitives/data-display';
import { Text } from 'twenty-ui/primitives/typography';

export const PriorityColor = () => (
  <Text style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
    <ColorSample colorName="red" render={<span />} aria-hidden="true" />
    High priority
  </Text>
);

import { ColorSample } from 'twenty-ui/primitives/data-display';
import { Text } from 'twenty-ui/primitives/typography';

export const BrandColor = () => (
  <Text style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
    <ColorSample
      colorName="blue"
      color="#2563eb"
      render={<span />}
      aria-hidden="true"
    />
    Brand blue
  </Text>
);