ar-design 0.2.81 → 0.2.83

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 */

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

@@ -0,0 +1,373 @@
+/* #region BLUE */
+.borderless:not(.disabled) {
+  &.blue {
+    color: var(--blue-500);
+
+    &.active {
+      animation: clicked-blue ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+
+input.borderless:not(.disabled),
+iframe.borderless:not(.disabled) {
+  &.blue {
+    &:focus,
+    &.focused {
+      border-color: var(--);
+      box-shadow: 0 0 0 3.5px rgba(var(---rgb), 0.25);
+    }
+  }
+}
+
+button.borderless:not(.disabled) {
+  &.blue { 
+    &:hover,
+    &:focus {
+      background-color: var(--blue-500);
+      color: var(--white)
+    }
+  }
+}
+/* #endregion */
+/* BLUE */
+
+/* #region PURPLE */
+.borderless:not(.disabled) {
+  &.purple {
+    color: var(--purple-500);
+
+    &.active {
+      animation: clicked-purple ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+
+input.borderless:not(.disabled),
+iframe.borderless:not(.disabled) {
+  &.purple {
+    &:focus,
+    &.focused {
+      border-color: var(--);
+      box-shadow: 0 0 0 3.5px rgba(var(---rgb), 0.25);
+    }
+  }
+}
+
+button.borderless:not(.disabled) {
+  &.purple { 
+    &:hover,
+    &:focus {
+      background-color: var(--purple-500);
+      color: var(--white)
+    }
+  }
+}
+/* #endregion */
+/* PURPLE */
+
+/* #region PINK */
+.borderless:not(.disabled) {
+  &.pink {
+    color: var(--pink-500);
+
+    &.active {
+      animation: clicked-pink ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+
+input.borderless:not(.disabled),
+iframe.borderless:not(.disabled) {
+  &.pink {
+    &:focus,
+    &.focused {
+      border-color: var(--);
+      box-shadow: 0 0 0 3.5px rgba(var(---rgb), 0.25);
+    }
+  }
+}
+
+button.borderless:not(.disabled) {
+  &.pink { 
+    &:hover,
+    &:focus {
+      background-color: var(--pink-500);
+      color: var(--white)
+    }
+  }
+}
+/* #endregion */
+/* PINK */
+
+/* #region RED */
+.borderless:not(.disabled) {
+  &.red {
+    color: var(--red-500);
+
+    &.active {
+      animation: clicked-red ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+
+input.borderless:not(.disabled),
+iframe.borderless:not(.disabled) {
+  &.red {
+    &:focus,
+    &.focused {
+      border-color: var(--);
+      box-shadow: 0 0 0 3.5px rgba(var(---rgb), 0.25);
+    }
+  }
+}
+
+button.borderless:not(.disabled) {
+  &.red { 
+    &:hover,
+    &:focus {
+      background-color: var(--red-500);
+      color: var(--white)
+    }
+  }
+}
+/* #endregion */
+/* RED */
+
+/* #region ORANGE */
+.borderless:not(.disabled) {
+  &.orange {
+    color: var(--orange-500);
+
+    &.active {
+      animation: clicked-orange ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+
+input.borderless:not(.disabled),
+iframe.borderless:not(.disabled) {
+  &.orange {
+    &:focus,
+    &.focused {
+      border-color: var(--);
+      box-shadow: 0 0 0 3.5px rgba(var(---rgb), 0.25);
+    }
+  }
+}
+
+button.borderless:not(.disabled) {
+  &.orange { 
+    &:hover,
+    &:focus {
+      background-color: var(--orange-500);
+      color: var(--white)
+    }
+  }
+}
+/* #endregion */
+/* ORANGE */
+
+/* #region YELLOW */
+.borderless:not(.disabled) {
+  &.yellow {
+    color: var(--yellow-500);
+
+    &.active {
+      animation: clicked-yellow ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+
+input.borderless:not(.disabled),
+iframe.borderless:not(.disabled) {
+  &.yellow {
+    &:focus,
+    &.focused {
+      border-color: var(--);
+      box-shadow: 0 0 0 3.5px rgba(var(---rgb), 0.25);
+    }
+  }
+}
+
+button.borderless:not(.disabled) {
+  &.yellow { 
+    &:hover,
+    &:focus {
+      background-color: var(--yellow-500);
+      color: var(--white)
+    }
+  }
+}
+/* #endregion */
+/* YELLOW */
+
+/* #region GREEN */
+.borderless:not(.disabled) {
+  &.green {
+    color: var(--green-500);
+
+    &.active {
+      animation: clicked-green ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+
+input.borderless:not(.disabled),
+iframe.borderless:not(.disabled) {
+  &.green {
+    &:focus,
+    &.focused {
+      border-color: var(--);
+      box-shadow: 0 0 0 3.5px rgba(var(---rgb), 0.25);
+    }
+  }
+}
+
+button.borderless:not(.disabled) {
+  &.green { 
+    &:hover,
+    &:focus {
+      background-color: var(--green-500);
+      color: var(--white)
+    }
+  }
+}
+/* #endregion */
+/* GREEN */
+
+/* #region TEAL */
+.borderless:not(.disabled) {
+  &.teal {
+    color: var(--teal-500);
+
+    &.active {
+      animation: clicked-teal ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+
+input.borderless:not(.disabled),
+iframe.borderless:not(.disabled) {
+  &.teal {
+    &:focus,
+    &.focused {
+      border-color: var(--);
+      box-shadow: 0 0 0 3.5px rgba(var(---rgb), 0.25);
+    }
+  }
+}
+
+button.borderless:not(.disabled) {
+  &.teal { 
+    &:hover,
+    &:focus {
+      background-color: var(--teal-500);
+      color: var(--white)
+    }
+  }
+}
+/* #endregion */
+/* TEAL */
+
+/* #region CYAN */
+.borderless:not(.disabled) {
+  &.cyan {
+    color: var(--cyan-500);
+
+    &.active {
+      animation: clicked-cyan ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+
+input.borderless:not(.disabled),
+iframe.borderless:not(.disabled) {
+  &.cyan {
+    &:focus,
+    &.focused {
+      border-color: var(--);
+      box-shadow: 0 0 0 3.5px rgba(var(---rgb), 0.25);
+    }
+  }
+}
+
+button.borderless:not(.disabled) {
+  &.cyan { 
+    &:hover,
+    &:focus {
+      background-color: var(--cyan-500);
+      color: var(--white)
+    }
+  }
+}
+/* #endregion */
+/* CYAN */
+
+/* #region GRAY */
+.borderless:not(.disabled) {
+  &.gray {
+    color: var(--gray-500);
+
+    &.active {
+      animation: clicked-gray ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+
+input.borderless:not(.disabled),
+iframe.borderless:not(.disabled) {
+  &.gray {
+    &:focus,
+    &.focused {
+      border-color: var(--);
+      box-shadow: 0 0 0 3.5px rgba(var(---rgb), 0.25);
+    }
+  }
+}
+
+button.borderless:not(.disabled) {
+  &.gray { 
+    &:hover,
+    &:focus {
+      background-color: var(--gray-500);
+      color: var(--white)
+    }
+  }
+}
+/* #endregion */
+/* GRAY */
+
+/* #region LIGHT */
+.borderless:not(.disabled) {
+  &.light {
+    color: var(--light-500);
+
+    &.active {
+      animation: clicked-light ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+
+input.borderless:not(.disabled),
+iframe.borderless:not(.disabled) {
+  &.light {
+    &:focus,
+    &.focused {
+      border-color: var(--);
+      box-shadow: 0 0 0 3.5px rgba(var(---rgb), 0.25);
+    }
+  }
+}
+
+button.borderless:not(.disabled) {
+  &.light { 
+    &:hover,
+    &:focus {
+      background-color: var(--light-500);
+      color: var(--white)
+    }
+  }
+}
+/* #endregion */
+/* LIGHT */