carfdevcss 0.0.1 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carfdevcss",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Tailwind CSS adapter for carfdev design system",
   "style": "./src/index.css",
   "exports": {

package/src/index.css

@@ -853,3 +853,176 @@
 @layer utilities {
   @tailwind utilities;
 }
+
+@theme inline {
+  --animate-bouncing: bouncing 1s ease-in-out both;
+  --animate-fade-in-up: fade-in-up 0.6s ease-in-out both;
+
+  @keyframes bouncing {
+    0% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-10px);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes fade-in-up {
+    0% {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}
+
+/* ============================================
+   Utility Classes - Animation Delay
+   ============================================ */
+
+@utility animate-delay-* {
+  animation-delay: calc(--value(integer) * 1ms);
+  animation-delay: --value(--tw-anim-delay-*, [duration], [*]);
+}
+
+/* ============================================
+   Utility Classes - Animation Duration
+   ============================================ */
+
+@utility animate-duration-* {
+  animation-duration: calc(--value(integer) * 1ms);
+  animation-duration: --value(--tw-anim-duration-*, [duration], [*]);
+}
+
+/* ============================================
+   Utility Classes - Animation Iteration Count
+   ============================================ */
+
+@utility animate-iteration-count-* {
+  animation-iteration-count: --value(
+    --tw-anim-iteration-count-*,
+    number,
+    [number],
+    [*]
+  );
+}
+
+/* ============================================
+   Utility Classes - Animation Fill Mode
+   ============================================ */
+
+@utility animate-fill-mode-* {
+  animation-fill-mode: --value(--tw-anim-fill-mode-*, [*]);
+}
+
+/* ============================================
+   Utility Classes - Animation Steps
+   ============================================ */
+
+@utility animate-steps-* {
+  animation-timing-function: steps(
+    --value(--tw-anim-steps-*, integer, [integer])
+  );
+}
+
+/* ============================================
+   Utility Classes - Animation Timing Functions
+   ============================================ */
+
+@utility animate-ease {
+  animation-timing-function: ease;
+}
+
+@utility animate-ease-in {
+  animation-timing-function: ease-in;
+}
+
+@utility animate-ease-out {
+  animation-timing-function: ease-out;
+}
+
+@utility animate-ease-in-out {
+  animation-timing-function: ease-in-out;
+}
+
+@utility animate-linear {
+  animation-timing-function: linear;
+}
+
+/* ============================================
+   Utility Classes - Animation Bezier Curves
+   ============================================ */
+
+@utility animate-bezier-* {
+  animation-timing-function: --value(--tw-anim-bezier-*, [*]);
+}
+
+/* ============================================
+   Utility Classes - Animation Direction
+   ============================================ */
+
+@utility animate-direction-normal {
+  animation-direction: normal;
+}
+
+@utility animate-direction-reverse {
+  animation-direction: reverse;
+}
+
+@utility animate-direction-alternate {
+  animation-direction: alternate;
+}
+
+@utility animate-direction-alternate-reverse {
+  animation-direction: alternate-reverse;
+}
+
+/* ============================================
+   Utility Classes - Animation Play State
+   ============================================ */
+
+@utility animate-play-running {
+  animation-play-state: running;
+}
+
+@utility animate-play-paused {
+  animation-play-state: paused;
+}
+
+/* ============================================
+   Utility Classes - Animation Timeline
+   ============================================ */
+
+@utility timeline-* {
+  animation-timeline: --value(--tw-timeline-*, [ident], [*]) !important;
+}
+
+/* ============================================
+   Utility Classes - Scroll Timeline Axis
+   ============================================ */
+
+@utility scroll-timeline-axis-* {
+  scroll-timeline-axis: --value(--tw-scroll-timeline-axis-*, [ident], [*]);
+}
+
+/* ============================================
+   Utility Classes - View Timeline Axis
+   ============================================ */
+
+@utility view-timeline-axis-* {
+  view-timeline-axis: --value(--tw-view-timeline-axis-*, [ident], [*]);
+}
+
+/* ============================================
+   Utility Classes - Animation Range
+   ============================================ */
+
+@utility animate-range-* {
+  animation-range: --value(--tw-anim-range-*, [*]);
+}