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";
@layer components {
  .bg-mauve-app {
    @apply bg-mauve-1 dark:bg-mauvedark-1;
  }
  .bg-mauve-subtle {
    @apply bg-mauve-2 dark:bg-mauvedark-2;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .bg-mauve-solid {
    @apply bg-mauve-9 dark:bg-mauvedark-9 hover:bg-mauve-10 dark:hover:bg-mauvedark-10;
  }
  .border-mauve-dim {
    @apply border-mauve-6 dark:border-mauvedark-6;
  }
  .border-mauve-normal {
    @apply border-mauve-7 dark:border-mauvedark-7 hover:border-mauve-8 dark:hover:border-mauvedark-8;
  }
  .divide-mauve-dim {
    @apply divide-mauve-6 dark:divide-mauvedark-6;
  }
  .divide-mauve-normal {
    @apply divide-mauve-7 dark:divide-mauvedark-7 hover:divide-mauve-8 dark:hover:divide-mauvedark-8;
  }
  .text-mauve-dim {
    @apply text-mauve-11 dark:text-mauvedark-11;
  }
  .text-mauve-normal {
    @apply text-mauve-12 dark:text-mauvedark-12;
  }
}