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