From 973023a04ee1cc2537e34faa3b738c99be8f3b22 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 17 Oct 2024 22:32:26 +0200
Subject: [PATCH] chore(css): move `keyframes` into separate file

---
 src/runtime/index.css     | 477 +-------------------------------------
 src/runtime/keyframes.css | 474 +++++++++++++++++++++++++++++++++++++
 2 files changed, 476 insertions(+), 475 deletions(-)
 create mode 100644 src/runtime/keyframes.css

diff --git a/src/runtime/index.css b/src/runtime/index.css
index 1ec59ee0..c4c5516b 100644
--- a/src/runtime/index.css
+++ b/src/runtime/index.css
@@ -1,3 +1,5 @@
+@import './keyframes.css';
+
 @theme default {
   --spacing-4_5: 1.125rem;
 }
@@ -48,479 +50,4 @@
     --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%;
-    }
-  }
 }
diff --git a/src/runtime/keyframes.css b/src/runtime/keyframes.css
new file mode 100644
index 00000000..17c0104d
--- /dev/null
+++ b/src/runtime/keyframes.css
@@ -0,0 +1,474 @@
+@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%;
+  }
+}