ar-design 0.2.80 → 0.2.82

package/dist/assets/css/core/color-palette.css

@@ -0,0 +1,111 @@
+:root {
+  --blue-100: #cfe2ff;
+  --blue-200: #9ec5fe;
+  --blue-300: #6ea8fe;
+  --blue-400: #3d8bfd;
+  --blue-500: #0d6efd;
+  --blue-600: #0a58ca;
+  --blue-700: #084298;
+  --blue-800: #052c65;
+  --blue-900: #031633;
+
+  --purple-100: #e2d9f3;
+  --purple-200: #c5b3e6;
+  --purple-300: #a98eda;
+  --purple-400: #8c68cd;
+  --purple-500: #6f42c1;
+  --purple-600: #59359a;
+  --purple-700: #432874;
+  --purple-800: #2c1a4d;
+  --purple-900: #160d27;
+
+  --pink-100: #f7d6e6;
+  --pink-200: #efadce;
+  --pink-300: #e685b5;
+  --pink-400: #de5c9d;
+  --pink-500: #d63384;
+  --pink-600: #ab296a;
+  --pink-700: #801f4f;
+  --pink-800: #561435;
+  --pink-900: #2b0a1a;
+
+  --red-100: #f8d7da;
+  --red-200: #f1aeb5;
+  --red-300: #ea868f;
+  --red-400: #e35d6a;
+  --red-500: #dc3545;
+  --red-600: #b02a37;
+  --red-700: #842029;
+  --red-800: #58151c;
+  --red-900: #2c0b0e;
+
+  --orange-100: #ffe5d0;
+  --orange-200: #fecba1;
+  --orange-300: #feb272;
+  --orange-400: #fd9843;
+  --orange-500: #fd7e14;
+  --orange-600: #ca6510;
+  --orange-700: #984c0c;
+  --orange-800: #653208;
+  --orange-900: #331904;
+
+  --yellow-100: #fff3cd;
+  --yellow-200: #ffe69c;
+  --yellow-300: #ffda6a;
+  --yellow-400: #ffcd39;
+  --yellow-500: #ffc107;
+  --yellow-600: #cc9a06;
+  --yellow-700: #997404;
+  --yellow-800: #664d03;
+  --yellow-900: #332701;
+
+  --green-100: #d1e7dd;
+  --green-200: #a3cfbb;
+  --green-300: #75b798;
+  --green-400: #479f76;
+  --green-500: #198754;
+  --green-600: #146c43;
+  --green-700: #0f5132;
+  --green-800: #0a3622;
+  --green-900: #051b11;
+
+  --teal-100: #d2f4ea;
+  --teal-200: #a6e9d5;
+  --teal-300: #79dfc1;
+  --teal-400: #4dd4ac;
+  --teal-500: #20c997;
+  --teal-600: #1aa179;
+  --teal-700: #13795b;
+  --teal-800: #0d503c;
+  --teal-900: #06281e;
+
+  --cyan-100: #cff4fc;
+  --cyan-200: #9eeaf9;
+  --cyan-300: #6edff6;
+  --cyan-400: #3dd5f3;
+  --cyan-500: #0dcaf0;
+  --cyan-600: #0aa2c0;
+  --cyan-700: #087990;
+  --cyan-800: #055160;
+  --cyan-900: #032830;
+
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+
+  --light-100: #fbfbfc;
+  --light-200: #f7f8f9;
+  --light-300: #f0f2f4;
+  --light-400: #e1e5e9;
+  --light-500: #d1d7dd;
+  --light-600: #b8c1ca;
+  --light-700: #9eaab6;
+  --light-800: #7e8e9d;
+  --light-900: #647688;
+}

package/dist/assets/css/core/variants/animation.css

@@ -1,133 +1,163 @@
-/* #region Animation -> PRIMARY */
-@keyframes clicked-primary {
+/* #region Animation -> BLUE */
+@keyframes clicked-blue {
   0% {
-    box-shadow: 0 0 0 0px rgba(var(--primary-rgb), 0);
+    box-shadow: 0 0 0 0px var(--blue-500);
   }
-  25% {
-    box-shadow: 0 0 0 5px rgba(var(--primary-rgb), 0.25);
+  50% {
+    box-shadow: 0 0 0 5px var(--blue-100);
   }
   100% {
-    box-shadow: 0 0 0 7.5px rgba(var(--primary-rgb), 0);
+    box-shadow: 0 0 0 7.5px transparent;
   }
 }
 /* #endregion */
-/* Animation -> PRIMARY */
+/* Animation -> BLUE */
 
-/* #region Animation -> PRIMARY-LIGHT */
-@keyframes clicked-primary-light {
+/* #region Animation -> PURPLE */
+@keyframes clicked-purple {
   0% {
-    box-shadow: 0 0 0 0px rgba(var(--primary-light-rgb), 0);
+    box-shadow: 0 0 0 0px var(--purple-500);
   }
-  25% {
-    box-shadow: 0 0 0 5px rgba(var(--primary-light-rgb), 0.25);
+  50% {
+    box-shadow: 0 0 0 5px var(--purple-100);
   }
   100% {
-    box-shadow: 0 0 0 7.5px rgba(var(--primary-light-rgb), 0);
+    box-shadow: 0 0 0 7.5px transparent;
   }
 }
 /* #endregion */
-/* Animation -> PRIMARY-LIGHT */
+/* Animation -> PURPLE */
 
-/* #region Animation -> SECONDARY */
-@keyframes clicked-secondary {
+/* #region Animation -> PINK */
+@keyframes clicked-pink {
   0% {
-    box-shadow: 0 0 0 0px rgba(var(--secondary-rgb), 0);
+    box-shadow: 0 0 0 0px var(--pink-500);
   }
-  25% {
-    box-shadow: 0 0 0 5px rgba(var(--secondary-rgb), 0.25);
+  50% {
+    box-shadow: 0 0 0 5px var(--pink-100);
   }
   100% {
-    box-shadow: 0 0 0 7.5px rgba(var(--secondary-rgb), 0);
+    box-shadow: 0 0 0 7.5px transparent;
   }
 }
 /* #endregion */
-/* Animation -> SECONDARY */
+/* Animation -> PINK */
 
-/* #region Animation -> SUCCESS */
-@keyframes clicked-success {
+/* #region Animation -> RED */
+@keyframes clicked-red {
   0% {
-    box-shadow: 0 0 0 0px rgba(var(--success-rgb), 0);
+    box-shadow: 0 0 0 0px var(--red-500);
   }
-  25% {
-    box-shadow: 0 0 0 5px rgba(var(--success-rgb), 0.25);
+  50% {
+    box-shadow: 0 0 0 5px var(--red-100);
   }
   100% {
-    box-shadow: 0 0 0 7.5px rgba(var(--success-rgb), 0);
+    box-shadow: 0 0 0 7.5px transparent;
   }
 }
 /* #endregion */
-/* Animation -> SUCCESS */
+/* Animation -> RED */
 
-/* #region Animation -> WARNING */
-@keyframes clicked-warning {
+/* #region Animation -> ORANGE */
+@keyframes clicked-orange {
   0% {
-    box-shadow: 0 0 0 0px rgba(var(--warning-rgb), 0);
+    box-shadow: 0 0 0 0px var(--orange-500);
   }
-  25% {
-    box-shadow: 0 0 0 5px rgba(var(--warning-rgb), 0.25);
+  50% {
+    box-shadow: 0 0 0 5px var(--orange-100);
   }
   100% {
-    box-shadow: 0 0 0 7.5px rgba(var(--warning-rgb), 0);
+    box-shadow: 0 0 0 7.5px transparent;
   }
 }
 /* #endregion */
-/* Animation -> WARNING */
+/* Animation -> ORANGE */
 
-/* #region Animation -> DANGER */
-@keyframes clicked-danger {
+/* #region Animation -> YELLOW */
+@keyframes clicked-yellow {
   0% {
-    box-shadow: 0 0 0 0px rgba(var(--danger-rgb), 0);
+    box-shadow: 0 0 0 0px var(--yellow-500);
   }
-  25% {
-    box-shadow: 0 0 0 5px rgba(var(--danger-rgb), 0.25);
+  50% {
+    box-shadow: 0 0 0 5px var(--yellow-100);
   }
   100% {
-    box-shadow: 0 0 0 7.5px rgba(var(--danger-rgb), 0);
+    box-shadow: 0 0 0 7.5px transparent;
   }
 }
 /* #endregion */
-/* Animation -> DANGER */
+/* Animation -> YELLOW */
 
-/* #region Animation -> INFORMATION */
-@keyframes clicked-information {
+/* #region Animation -> GREEN */
+@keyframes clicked-green {
   0% {
-    box-shadow: 0 0 0 0px rgba(var(--information-rgb), 0);
+    box-shadow: 0 0 0 0px var(--green-500);
   }
-  25% {
-    box-shadow: 0 0 0 5px rgba(var(--information-rgb), 0.25);
+  50% {
+    box-shadow: 0 0 0 5px var(--green-100);
   }
   100% {
-    box-shadow: 0 0 0 7.5px rgba(var(--information-rgb), 0);
+    box-shadow: 0 0 0 7.5px transparent;
   }
 }
 /* #endregion */
-/* Animation -> INFORMATION */
+/* Animation -> GREEN */
 
-/* #region Animation -> DARK */
-@keyframes clicked-dark {
+/* #region Animation -> TEAL */
+@keyframes clicked-teal {
   0% {
-    box-shadow: 0 0 0 0px rgba(var(--dark-rgb), 0);
+    box-shadow: 0 0 0 0px var(--teal-500);
   }
-  25% {
-    box-shadow: 0 0 0 5px rgba(var(--dark-rgb), 0.25);
+  50% {
+    box-shadow: 0 0 0 5px var(--teal-100);
   }
   100% {
-    box-shadow: 0 0 0 7.5px rgba(var(--dark-rgb), 0);
+    box-shadow: 0 0 0 7.5px transparent;
   }
 }
 /* #endregion */
-/* Animation -> DARK */
+/* Animation -> TEAL */
+
+/* #region Animation -> CYAN */
+@keyframes clicked-cyan {
+  0% {
+    box-shadow: 0 0 0 0px var(--cyan-500);
+  }
+  50% {
+    box-shadow: 0 0 0 5px var(--cyan-100);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px transparent;
+  }
+}
+/* #endregion */
+/* Animation -> CYAN */
+
+/* #region Animation -> GRAY */
+@keyframes clicked-gray {
+  0% {
+    box-shadow: 0 0 0 0px var(--gray-500);
+  }
+  50% {
+    box-shadow: 0 0 0 5px var(--gray-100);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px transparent;
+  }
+}
+/* #endregion */
+/* Animation -> GRAY */
 
 /* #region Animation -> LIGHT */
 @keyframes clicked-light {
   0% {
-    box-shadow: 0 0 0 0px rgba(var(--light-rgb), 0);
+    box-shadow: 0 0 0 0px var(--light-500);
   }
-  25% {
-    box-shadow: 0 0 0 5px rgba(var(--light-rgb), 0.25);
+  50% {
+    box-shadow: 0 0 0 5px var(--light-100);
   }
   100% {
-    box-shadow: 0 0 0 7.5px rgba(var(--light-rgb), 0);
+    box-shadow: 0 0 0 7.5px transparent;
   }
 }
 /* #endregion */