ui/src/runtime/index.css

@theme {
  --spacing-4_5: 1.125rem;
}

@variant dark (&:where(.dark, .dark *));

@layer base {
  body {
    @apply antialiased font-sans text-[--ui-text] bg-[--ui-bg];
  }

  :root {
    color-scheme: light;

    --ui-text-dimmed: var(--ui-color-neutral-400);
    --ui-text-muted: var(--ui-color-neutral-500);
    --ui-text-toned: var(--ui-color-neutral-600);
    --ui-text: var(--ui-color-neutral-700);
    --ui-text-highlighted: var(--ui-color-neutral-900);

    --ui-bg: var(--color-white);
    --ui-bg-elevated: var(--ui-color-neutral-100);
    --ui-bg-accented: var(--ui-color-neutral-200);
    --ui-bg-inverted: var(--ui-color-neutral-900);

    --ui-border: var(--ui-color-neutral-200);
    --ui-border-accented: var(--ui-color-neutral-300);
    --ui-border-inverted: var(--ui-color-neutral-900);

    --ui-radius: var(--radius);
  }

  .dark {
    color-scheme: dark;

    --ui-text-dimmed: var(--ui-color-neutral-500);
    --ui-text-muted: var(--ui-color-neutral-400);
    --ui-text-toned: var(--ui-color-neutral-300);
    --ui-text: var(--ui-color-neutral-200);
    --ui-text-highlighted: var(--color-white);

    --ui-bg: var(--ui-color-neutral-900);
    --ui-bg-elevated: var(--ui-color-neutral-800);
    --ui-bg-accented: var(--ui-color-neutral-700);
    --ui-bg-inverted: var(--color-white);

    --ui-border: var(--ui-color-neutral-800);
    --ui-border-accented: var(--ui-color-neutral-700);
    --ui-border-inverted: var(--color-white);
  }

  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }

    to {
      height: 0;
    }
  }

  @keyframes accordion-down {
    from {
      height: 0;
    }

    to {
      height: var(--radix-accordion-content-height);
    }
  }

  @keyframes collapsible-up {
    from {
      height: var(--radix-collapsible-content-height);
    }

    to {
      height: 0;
    }
  }

  @keyframes collapsible-down {
    from {
      height: 0;
    }

    to {
      height: var(--radix-collapsible-content-height);
    }
  }

  @keyframes toast-collapsed-closed {
    from {
      transform: var(--transform);
    }

    to {
      transform: translateY(calc((var(--before) - var(--height)) * var(--gap))) scale(var(--scale));
    }
  }

  @keyframes toast-closed {
    from {
      transform: var(--transform);
    }

    to {
      transform: translateY(calc((var(--offset) - var(--height)) * var(--translate-factor)));
    }
  }

  @keyframes toast-slide-left {
    from {
      transform: translateX(0) translateY(var(--translate));
    }

    to {
      transform: translateX(-100%) translateY(var(--translate));
    }
  }

  @keyframes toast-slide-right {
    from {
      transform: translateX(0) translateY(var(--translate));
    }

    to {
      transform: translateX(100%) translateY(var(--translate));
    }
  }

  @keyframes fade-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes fade-out {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  @keyframes scale-in {
    from {
      opacity: 0;
      transform: scale(0.95);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes scale-out {
    from {
      opacity: 1;
      transform: scale(1);
    }

    to {
      opacity: 0;
      transform: scale(0.95);
    }
  }

  @keyframes slide-in-from-top {
    from {
      transform: translateY(-100%);
    }

    to {
      transform: translateY(0);
    }
  }

  @keyframes slide-out-to-top {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(-100%);
    }
  }

  @keyframes slide-in-from-right {
    from {
      transform: translateX(100%);
    }

    to {
      transform: translateX(0);
    }
  }

  @keyframes slide-out-to-right {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(100%);
    }
  }

  @keyframes slide-in-from-bottom {
    from {
      transform: translateY(100%);
    }

    to {
      transform: translateY(0);
    }
  }

  @keyframes slide-out-to-bottom {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(100%);
    }
  }

  @keyframes slide-in-from-left {
    from {
      transform: translateX(-100%);
    }

    to {
      transform: translateX(0);
    }
  }

  @keyframes slide-out-to-left {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-100%);
    }
  }

  @keyframes slide-in-from-top-and-fade {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slide-out-to-top-and-fade {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(-4px);
    }
  }

  @keyframes slide-in-from-right-and-fade {
    from {
      opacity: 0;
      transform: translateX(4px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slide-out-to-right-and-fade {
    from {
      opacity: 1;
      transform: translateX(0);
    }

    to {
      opacity: 0;
      transform: translateX(4px);
    }
  }

  @keyframes slide-in-from-bottom-and-fade {
    from {
      opacity: 0;
      transform: translateY(4px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slide-out-to-bottom-and-fade {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(4px);
    }
  }

  @keyframes slide-in-from-left-and-fade {
    from {
      opacity: 0;
      transform: translateX(-4px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slide-out-to-left-and-fade {
    from {
      opacity: 1;
      transform: translateX(0);
    }

    to {
      opacity: 0;
      transform: translateX(-4px);
    }
  }

  @keyframes enter-from-right {
    from {
      opacity: 0;
      transform: translateX(200px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes enter-from-left {
    from {
      opacity: 0;
      transform: translateX(-200px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes exit-to-right {
    from {
      opacity: 1;
      transform: translateX(0);
    }

    to {
      opacity: 0;
      transform: translateX(200px);
    }
  }

  @keyframes exit-to-left {
    from {
      opacity: 1;
      transform: translateX(0);
    }

    to {
      opacity: 0;
      transform: translateX(-200px);
    }
  }

  @keyframes carousel {

    0%,
    100% {
      width: 50%
    }

    0% {
      transform: translateX(-100%)
    }

    100% {
      transform: translateX(200%)
    }
  }

  @keyframes carousel-vertical {

    0%,
    100% {
      height: 50%
    }

    0% {
      transform: translateY(-100%)
    }

    100% {
      transform: translateY(200%)
    }
  }

  @keyframes carousel-inverse {

    0%,
    100% {
      width: 50%
    }

    0% {
      transform: translateX(200%)
    }

    100% {
      transform: translateX(-100%)
    }
  }

  @keyframes carousel-inverse-vertical {

    0%,
    100% {
      height: 50%
    }

    0% {
      transform: translateY(200%)
    }

    100% {
      transform: translateY(-100%)
    }
  }

  @keyframes swing {

    0%,
    100% {
      width: 50%
    }

    0%,
    100% {
      transform: translateX(-25%)
    }

    50% {
      transform: translateX(125%)
    }
  }

  @keyframes swing-vertical {

    0%,
    100% {
      height: 50%
    }

    0%,
    100% {
      transform: translateY(-25%)
    }

    50% {
      transform: translateY(125%)
    }
  }

  @keyframes elastic {

    /* Firefox doesn't do "margin: 0 auto", we have to play with margin-left */
    0%,
    100% {
      width: 50%;
      margin-left: 25%;
    }

    50% {
      width: 90%;
      margin-left: 5%;
    }
  }

  @keyframes elastic-vertical {

    0%,
    100% {
      height: 50%;
      margin-top: 25%;
    }

    50% {
      height: 90%;
      margin-top: 5%;
    }
  }
}