ui/src/runtime/index.css

@theme {
  --color-gray-*: initial;
  --color-cool-50: #f9fafb;
  --color-cool-100: #f3f4f6;
  --color-cool-200: #e5e7eb;
  --color-cool-300: #d1d5db;
  --color-cool-400: #9ca3af;
  --color-cool-500: #6b7280;
  --color-cool-600: #4b5563;
  --color-cool-700: #374151;
  --color-cool-800: #1f2937;
  --color-cool-900: #111827;
  --color-cool-950: #030712;

  --spacing-4_5: 1.125rem;

  --color-primary-50: var(--color-primary-50);
  --color-primary-100: var(--color-primary-100);
  --color-primary-200: var(--color-primary-200);
  --color-primary-300: var(--color-primary-300);
  --color-primary-400: var(--color-primary-400);
  --color-primary-500: var(--color-primary-500);
  --color-primary-600: var(--color-primary-600);
  --color-primary-700: var(--color-primary-700);
  --color-primary-800: var(--color-primary-800);
  --color-primary-900: var(--color-primary-900);
  --color-primary-950: var(--color-primary-950);
  --color-error-50: var(--color-error-50);
  --color-error-100: var(--color-error-100);
  --color-error-200: var(--color-error-200);
  --color-error-300: var(--color-error-300);
  --color-error-400: var(--color-error-400);
  --color-error-500: var(--color-error-500);
  --color-error-600: var(--color-error-600);
  --color-error-700: var(--color-error-700);
  --color-error-800: var(--color-error-800);
  --color-error-900: var(--color-error-900);
  --color-error-950: var(--color-error-950);
  --color-gray-50: var(--color-gray-50);
  --color-gray-100: var(--color-gray-100);
  --color-gray-200: var(--color-gray-200);
  --color-gray-300: var(--color-gray-300);
  --color-gray-400: var(--color-gray-400);
  --color-gray-500: var(--color-gray-500);
  --color-gray-600: var(--color-gray-600);
  --color-gray-700: var(--color-gray-700);
  --color-gray-800: var(--color-gray-800);
  --color-gray-900: var(--color-gray-900);
  --color-gray-950: var(--color-gray-950);
}

@layer base {
  :root {
    color-scheme: light dark;
  }

  @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%;
    }
  }
}