@casoon/atlas-styles 0.0.4 → 0.0.5

package/dist/animations.css

@@ -96,7 +96,7 @@
    ========================================================= */
 
 /* === ENTRANCE ANIMATIONS === */
-@keyframes csFadeIn, anim-fade-in {
+@keyframes csFadeIn {
   0% {
     opacity: 0;
   }
@@ -105,7 +105,25 @@
   }
 }
 
-@keyframes csFadeOut, anim-fade-out {
+@keyframes anim-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes csFadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes anim-fade-out {
   0% {
     opacity: 1;
   }
@@ -114,7 +132,18 @@
   }
 }
 
-@keyframes csScaleIn, anim-scale-in {
+@keyframes csScaleIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes anim-scale-in {
   0% {
     opacity: 0;
     transform: scale(0.9);
@@ -125,7 +154,18 @@
   }
 }
 
-@keyframes csScaleOut, anim-scale-out {
+@keyframes csScaleOut {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+
+@keyframes anim-scale-out {
   0% {
     opacity: 1;
     transform: scale(1);
@@ -136,7 +176,7 @@
   }
 }
 
-@keyframes csSlideUp, anim-slide-up {
+@keyframes csSlideUp {
   0% {
     opacity: 0;
     transform: translateY(20px);
@@ -147,7 +187,29 @@
   }
 }
 
-@keyframes csSlideDown, anim-slide-down {
+@keyframes anim-slide-up {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes csSlideDown {
+  0% {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes anim-slide-down {
   0% {
     opacity: 0;
     transform: translateY(-20px);
@@ -158,7 +220,18 @@
   }
 }
 
-@keyframes csSlideLeft, anim-slide-left {
+@keyframes csSlideLeft {
+  0% {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes anim-slide-left {
   0% {
     opacity: 0;
     transform: translateX(20px);
@@ -169,7 +242,18 @@
   }
 }
 
-@keyframes csSlideRight, anim-slide-right {
+@keyframes csSlideRight {
+  0% {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes anim-slide-right {
   0% {
     opacity: 0;
     transform: translateX(-20px);
@@ -180,7 +264,18 @@
   }
 }
 
-@keyframes csBlurIn, anim-blur-in {
+@keyframes csBlurIn {
+  0% {
+    opacity: 0;
+    filter: blur(4px);
+  }
+  100% {
+    opacity: 1;
+    filter: blur(0);
+  }
+}
+
+@keyframes anim-blur-in {
   0% {
     opacity: 0;
     filter: blur(4px);
@@ -191,7 +286,18 @@
   }
 }
 
-@keyframes csBlurOut, anim-blur-out {
+@keyframes csBlurOut {
+  0% {
+    opacity: 1;
+    filter: blur(0);
+  }
+  100% {
+    opacity: 0;
+    filter: blur(4px);
+  }
+}
+
+@keyframes anim-blur-out {
   0% {
     opacity: 1;
     filter: blur(0);
@@ -202,7 +308,18 @@
   }
 }
 
-@keyframes csRotateIn, anim-rotate-in {
+@keyframes csRotateIn {
+  0% {
+    opacity: 0;
+    transform: rotate(-5deg);
+  }
+  100% {
+    opacity: 1;
+    transform: rotate(0);
+  }
+}
+
+@keyframes anim-rotate-in {
   0% {
     opacity: 0;
     transform: rotate(-5deg);
@@ -247,7 +364,16 @@
 }
 
 /* === CONTINUOUS ANIMATIONS === */
-@keyframes csRotate, anim-rotate {
+@keyframes csRotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes anim-rotate {
   0% {
     transform: rotate(0deg);
   }
@@ -256,7 +382,17 @@
   }
 }
 
-@keyframes csPulse, anim-pulse {
+@keyframes csPulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes anim-pulse {
   0%,
   100% {
     opacity: 1;
@@ -266,7 +402,17 @@
   }
 }
 
-@keyframes csBounce, anim-bounce {
+@keyframes csBounce {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-25%);
+  }
+}
+
+@keyframes anim-bounce {
   0%,
   100% {
     transform: translateY(0);
@@ -276,7 +422,20 @@
   }
 }
 
-@keyframes csWiggle, anim-wiggle {
+@keyframes csWiggle {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(-3deg);
+  }
+  75% {
+    transform: rotate(3deg);
+  }
+}
+
+@keyframes anim-wiggle {
   0%,
   100% {
     transform: rotate(0deg);

package/dist/index.css

@@ -112,7 +112,16 @@
    ========================================================= */
 
 /* === ENTRANCE ANIMATIONS === */
-@keyframes csFadeIn, anim-fade-in {
+@keyframes csFadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes anim-fade-in {
   0% {
     opacity: 0;
   }
@@ -121,7 +130,7 @@
   }
 }
 
-@keyframes csFadeOut, anim-fade-out {
+@keyframes csFadeOut {
   0% {
     opacity: 1;
   }
@@ -130,7 +139,16 @@
   }
 }
 
-@keyframes csScaleIn, anim-scale-in {
+@keyframes anim-fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes csScaleIn {
   0% {
     opacity: 0;
     transform: scale(0.9);
@@ -141,7 +159,29 @@
   }
 }
 
-@keyframes csScaleOut, anim-scale-out {
+@keyframes anim-scale-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes csScaleOut {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+
+@keyframes anim-scale-out {
   0% {
     opacity: 1;
     transform: scale(1);
@@ -152,7 +192,7 @@
   }
 }
 
-@keyframes csSlideUp, anim-slide-up {
+@keyframes csSlideUp {
   0% {
     opacity: 0;
     transform: translateY(20px);
@@ -163,7 +203,29 @@
   }
 }
 
-@keyframes csSlideDown, anim-slide-down {
+@keyframes anim-slide-up {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes csSlideDown {
+  0% {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes anim-slide-down {
   0% {
     opacity: 0;
     transform: translateY(-20px);
@@ -174,7 +236,18 @@
   }
 }
 
-@keyframes csSlideLeft, anim-slide-left {
+@keyframes csSlideLeft {
+  0% {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes anim-slide-left {
   0% {
     opacity: 0;
     transform: translateX(20px);
@@ -185,7 +258,18 @@
   }
 }
 
-@keyframes csSlideRight, anim-slide-right {
+@keyframes csSlideRight {
+  0% {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes anim-slide-right {
   0% {
     opacity: 0;
     transform: translateX(-20px);
@@ -196,7 +280,7 @@
   }
 }
 
-@keyframes csBlurIn, anim-blur-in {
+@keyframes csBlurIn {
   0% {
     opacity: 0;
     filter: blur(4px);
@@ -207,7 +291,18 @@
   }
 }
 
-@keyframes csBlurOut, anim-blur-out {
+@keyframes anim-blur-in {
+  0% {
+    opacity: 0;
+    filter: blur(4px);
+  }
+  100% {
+    opacity: 1;
+    filter: blur(0);
+  }
+}
+
+@keyframes csBlurOut {
   0% {
     opacity: 1;
     filter: blur(0);
@@ -218,7 +313,29 @@
   }
 }
 
-@keyframes csRotateIn, anim-rotate-in {
+@keyframes anim-blur-out {
+  0% {
+    opacity: 1;
+    filter: blur(0);
+  }
+  100% {
+    opacity: 0;
+    filter: blur(4px);
+  }
+}
+
+@keyframes csRotateIn {
+  0% {
+    opacity: 0;
+    transform: rotate(-5deg);
+  }
+  100% {
+    opacity: 1;
+    transform: rotate(0);
+  }
+}
+
+@keyframes anim-rotate-in {
   0% {
     opacity: 0;
     transform: rotate(-5deg);
@@ -263,7 +380,7 @@
 }
 
 /* === CONTINUOUS ANIMATIONS === */
-@keyframes csRotate, anim-rotate {
+@keyframes csRotate {
   0% {
     transform: rotate(0deg);
   }
@@ -272,7 +389,26 @@
   }
 }
 
-@keyframes csPulse, anim-pulse {
+@keyframes anim-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes csPulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes anim-pulse {
   0%,
   100% {
     opacity: 1;
@@ -282,7 +418,17 @@
   }
 }
 
-@keyframes csBounce, anim-bounce {
+@keyframes csBounce {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-25%);
+  }
+}
+
+@keyframes anim-bounce {
   0%,
   100% {
     transform: translateY(0);
@@ -292,7 +438,20 @@
   }
 }
 
-@keyframes csWiggle, anim-wiggle {
+@keyframes csWiggle {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(-3deg);
+  }
+  75% {
+    transform: rotate(3deg);
+  }
+}
+
+@keyframes anim-wiggle {
   0%,
   100% {
     transform: rotate(0deg);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casoon/atlas-styles",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Pure CSS design system with glass effects, gradients, and utilities for Tailwind v4",
   "type": "module",
   "files": [
@@ -23,6 +23,10 @@
     "./animations.css": "./dist/animations.css",
     "./utilities.css": "./dist/utilities.css"
   },
+  "scripts": {
+    "build": "rimraf dist && node build.js",
+    "clean": "rimraf dist"
+  },
   "keywords": [
     "tailwind",
     "css",
@@ -52,9 +56,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "scripts": {
-    "build": "rimraf dist && node build.js",
-    "clean": "rimraf dist"
   }
-}
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2024 Jörn Seidel (CASOON)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.