✨ feat(base): Add all remaining base folder styles, upgrade a few gen…

…erators to v2

next/src/base/_index.scss

@@ -1,9 +1,9 @@
-// @forward "./default";
+@forward "./default";
 
-// @forward "./animations";
-// @forward "./font";
-// @forward "./grid";
+@forward "./animations";
+@forward "./font";
+@forward "./grid";
 @forward "./layout";
-// @forward "./media";
-// @forward "./modifiers";
-// @forward "./spacing";
+@forward "./media";
+@forward "./modifiers";
+@forward "./spacing";

next/src/base/animations.scss

@@ -0,0 +1,225 @@
+@use '../../../src/internal' as *;
+
+/* ANIMATIONS */
+
+// TODO move to animations in config
+
+/* Keyframes */
+
+/* Spinning loading animation */
+@keyframes loading {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(359deg);
+    }
+}
+
+/* Heart animation */
+@keyframes pound {
+    to {
+        transform: scale(1.1);
+    }
+}
+
+/* Bounce animations */
+@keyframes bounce {
+
+    from,
+    20%,
+    53%,
+    80%,
+    to {
+        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+        transform: translate3d(0, 0, 0);
+    }
+
+    40%,
+    43% {
+        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+        transform: translate3d(0, -30px, 0);
+    }
+
+    70% {
+        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+        transform: translate3d(0, -15px, 0);
+    }
+
+    90% {
+        transform: translate3d(0, -4px, 0);
+    }
+}
+
+@keyframes bounceIn {
+
+    from,
+    20%,
+    40%,
+    60%,
+    80%,
+    to {
+        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+
+    0% {
+        opacity: 0;
+        transform: scale3d(0.3, 0.3, 0.3);
+    }
+
+    20% {
+        transform: scale3d(1.1, 1.1, 1.1);
+    }
+
+    40% {
+        transform: scale3d(0.9, 0.9, 0.9);
+    }
+
+    60% {
+        opacity: 1;
+        transform: scale3d(1.03, 1.03, 1.03);
+    }
+
+    80% {
+        transform: scale3d(0.97, 0.97, 0.97);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale3d(1, 1, 1);
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes pulse {
+    50% {
+        opacity: 0.5;
+    }
+}
+
+@keyframes ping {
+
+    75%,
+    100% {
+        transform: scale(2);
+        opacity: 0;
+    }
+}
+
+/* Hover animation */
+.hover-grow {
+    /* Mouse leave */
+    transition-duration: 0.32s;
+
+    &:hover {
+        /* Mouse enter */
+        transform: scale(1.1);
+        transition-duration: 0.08s;
+    }
+}
+
+.animated {
+    animation-duration: 1s;
+    animation-fill-mode: both;
+
+    /* Loading button position relatively for loading spinner location */
+    &.loading {
+        display: block;
+        position: relative;
+
+        /* Loading Spinner, align center by default */
+        &::after {
+            border: 2px solid fill('gray', '400');
+            border-radius: 50%;
+            border-right-color: transparent;
+            border-top-color: transparent;
+            content: '';
+            display: block;
+            height: 1rem;
+            width: 1rem;
+            left: calc(50% - .5rem);
+            top: calc(50% - .5rem);
+            position: absolute;
+            animation: loading 500ms infinite linear;
+        }
+
+        &.loading-white::after {
+            border-left-color: #fff;
+            border-bottom-color: #fff;
+        }
+
+        &.loading-left {
+            padding-left: 3rem;
+
+            /* Align spinner left */
+            &::after {
+                left: 1rem;
+                right: auto;
+            }
+        }
+
+        &.loading-right {
+            padding-right: 3rem;
+
+            /* Align spinner right */
+            &::after {
+                left: auto;
+                right: 1rem;
+            }
+        }
+
+        /* Hide text in loading button */
+        &.hide-text {
+            color: transparent !important;
+        }
+    }
+
+    &.pound {
+        animation: pound 0.35s infinite alternate;
+        vertical-align: baseline;
+    }
+
+    &.bounce {
+        animation-name: bounce;
+        transform-origin: center bottom;
+    }
+
+    &.bounceIn {
+        animation-name: bounceIn;
+    }
+
+    &.fadeIn {
+        animation-name: fadeIn;
+    }
+
+    &.infinite {
+        animation-iteration-count: infinite;
+
+        &.alternate {
+            animation-direction: alternate;
+        }
+    }
+
+    &.paused {
+        animation-play-state: paused !important;
+    }
+
+    // Useful for loaders
+    &.pulse {
+        animation: pulse 1.25s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    }
+
+    &.ping {
+        animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+    }
+}