@cobuildlab/8base-chat/src/styles/global.css

Chat component that uses 8base

/* CSS VARIABLES */

:global(:root) {
  --chat-primary-color: #3eb7f9;
  --chat-primary-bg-color: #fff;
  --chat-hover-bg-color: #f4f7f9;
  --chat-primary-text-color: #323c47;
  --chat-secondary-text-color: #939ea7;
  --chat-primary-border-color: #d0d7dd;
  --chat-placeholder-color: var(--chat-secondary-text-color);
  --chat-active-presence-color: #00bb6e;
  --chat-message-bg-color: #4da1ff;
  --chat-message-text-color: #fff;
  --chat-message-link-color: var(--chat-message-text-color);
  --chat-my-message-bg-color: var(--chat-primary-bg-color);
  --chat-my-message-text-color: var(--chat-primary-text-color);
  --chat-my-message-link-color: var(--chat-primary-color);
}

/* EMOJI-MART */

:global(.emoji-mart.emoji-mart) {
  font-family: inherit;
  color: var(--chat-primary-text-color);
  border: 1px solid var(--chat-primary-border-color);
  background: var(--chat-primary-bg-color);
}

:global(.emoji-mart.emoji-mart .emoji-mart-category-label span) {
  background: var(--chat-primary-bg-color);
}

:global(.emoji-mart.emoji-mart .emoji-mart-anchor-bar) {
  background-color: var(--chat-primary-color);
}