tailwindcss-radix-colors/dist/mauve.css

A Tailwind CSS plugin that brings Radix UI's color system to Tailwind CSS

@import "./mauve-colors-only.css";
@utility bg-mauve-app {
  @apply bg-mauve-1 dark:bg-mauvedark-1;
}
@utility bg-mauve-subtle {
  @apply bg-mauve-2 dark:bg-mauvedark-2;
}
@utility bg-mauve-ui {
  @apply bg-mauve-3 dark:bg-mauvedark-3 hover:bg-mauve-4 dark:hover:bg-mauvedark-4 active:bg-mauve-5 dark:active:bg-mauvedark-5;
}
@utility bg-mauve-ghost {
  @apply bg-transparent dark:bg-transparent hover:bg-mauve-3 dark:hover:bg-mauvedark-3 active:bg-mauve-4 dark:active:bg-mauvedark-4;
}
@utility bg-mauve-action {
  @apply bg-mauve-4 dark:bg-mauvedark-4 hover:bg-mauve-5 dark:hover:bg-mauvedark-5 active:bg-mauve-6 dark:active:bg-mauvedark-6;
}
@utility bg-mauve-solid {
  @apply bg-mauve-9 dark:bg-mauvedark-9 hover:bg-mauve-10 dark:hover:bg-mauvedark-10;
}
@utility border-mauve-dim {
  @apply border-mauve-6 dark:border-mauvedark-6;
}
@utility border-mauve-normal {
  @apply border-mauve-7 dark:border-mauvedark-7 hover:border-mauve-8 dark:hover:border-mauvedark-8;
}
@utility divide-mauve-dim {
  @apply divide-mauve-6 dark:divide-mauvedark-6;
}
@utility divide-mauve-normal {
  @apply divide-mauve-7 dark:divide-mauvedark-7 hover:divide-mauve-8 dark:hover:divide-mauvedark-8;
}
@utility text-mauve-dim {
  @apply text-mauve-11 dark:text-mauvedark-11;
}
@utility text-mauve-normal {
  @apply text-mauve-12 dark:text-mauvedark-12;
}