tailwindcss-radix-colors/dist/pluma.css

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

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