:global(.ui-group) {
  &[data-state~="primary"] {
    color: var(--primary-color);
  }
  &[data-state~="secondary"] {
    color: var(--secondary-color);
  }
  &[data-state~="accent"] {
    color: var(--accent-color);
  }
  &[data-state~="triadic"] {
    color: var(--triadic-color);
  }
  &[data-state~="split"] {
    color: var(--split-color);
  }
  &[data-state~="dark"] {
    color: var(--palette-dark-02);
  }
  &[data-state~="gray"] {
    color: var(--palette-light-01);
    &:hover {
      color: var(--palette-light-00);
    }
  }
}