ar-design 0.2.82 → 0.2.84

package/dist/assets/css/components/feedback/alert/alert.css

@@ -1,8 +1,9 @@
 .ar-alert {
-  padding: 1rem 1rem 1rem 1rem;
+  padding: 1rem;
   border-radius: var(--border-radius-sm);
   border: solid 1px transparent;
   font-family: var(--system);
+  font-weight: 400;
 }
 
 .ar-alert > p > .ar-alert-tag {
@@ -55,6 +56,3 @@
 .ar-alert ul li ul {
   margin-left: 0.1rem;
 }
-
-/* Core Css */
-@import url("./core/color.css");

package/dist/assets/css/components/feedback/tooltip/styles.css

@@ -2,13 +2,12 @@
   width: max-content;
 }
 .ar-tooltip {
-  position: absolute;
+  position: fixed;
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
-  background-color: var(--white);
+  background-color: var(--black);
   padding: 0.25rem 0.5rem;
-  border: solid 1px var(--gray-300);
   border-radius: var(--border-radius-sm);
   z-index: 1052;
 }
@@ -21,42 +20,40 @@
   display: flex;
   flex-direction: row;
   gap: 0.5rem;
-  color: var(--gray-700);
-  font-size: 0.85rem;
+  color: var(--white);
+  font-size: 0.75rem;
   text-wrap: nowrap;
-  /* -webkit-text-stroke: 0.75px var(--gray-700); */
 }
 .ar-tooltip > .text > .bullet {
   color: var(--gray-400);
-  /* -webkit-text-stroke: 0px; */
 }
 
 .ar-tooltip::before {
   position: absolute;
   content: "";
-  border: solid 7.5px transparent;
+  border: solid 5px transparent;
 }
 .ar-tooltip.top::before {
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
-  border-top-color: var(--gray-300);
+  border-top-color: var(--black);
 }
 .ar-tooltip.right::before {
   top: 50%;
   transform: translateY(-50%);
   right: 100%;
-  border-right-color: var(--gray-300);
+  border-right-color: var(--black);
 }
 .ar-tooltip.bottom::before {
   left: 50%;
   transform: translateX(-50%);
   bottom: 100%;
-  border-bottom-color: var(--gray-300);
+  border-bottom-color: var(--black);
 }
 .ar-tooltip.left::before {
   top: 50%;
   transform: translateY(-50%);
   left: 100%;
-  border-left-color: var(--gray-300);
+  border-left-color: var(--black);
 }

package/dist/assets/css/components/form/switch/styles.css

@@ -4,40 +4,54 @@
   align-items: center;
   width: 100%;
   height: var(--input-height);
-}
-.ar-switch-wrapper > label {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 0 0.5rem;
-  user-select: none;
-}
-.ar-switch-wrapper > label > input[type="checkbox"] {
-  display: none;
-}
 
-.ar-switch-wrapper > label > .ar-switch {
-  position: relative;
-  display: inline-block;
-  width: 2.25rem;
-  height: 1.25rem;
-  transition: box-shadow 250ms ease-in-out;
-}
+  > label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0 0.5rem;
+    font-weight: 400;
+    user-select: none;
 
-.ar-switch-wrapper > label > input[type="checkbox"] + .ar-switch > .handle {
-  position: absolute;
-  top: 50%;
-  left: 0.15rem;
-  transform: translateY(-50%);
-  display: inline-block;
-  content: "";
-  background-color: var(--white);
-  width: 0.85rem;
-  height: 0.85rem;
-  transition: left 150ms, width 150ms 150ms, height 150ms 150ms, box-shadow 150ms 150ms ease-in-out;
-}
-.ar-switch-wrapper > label > input[type="checkbox"].checked + .ar-switch > .handle {
-  left: calc(2.25rem - 1rem);
+    > input[type="checkbox"] {
+      display: none;
+
+      + .ar-switch {
+        > .handle {
+          position: absolute;
+          top: 50%;
+          left: 0;
+          transform: translateY(-50%);
+          display: inline-block;
+          content: "";
+          background-color: var(--white);
+          width: 1rem;
+          height: 1rem;
+          border: solid 1px var(--gray-300);
+          box-shadow: 0 0 0 0 rgba(var(--black-rgb), 0.2);
+          transition: left 150ms, width 150ms 150ms, height 150ms 150ms, box-shadow 150ms 150ms ease-in-out;
+        }
+      }
+
+      &.checked {
+        + .ar-switch {
+          > .handle {
+            left: calc(2.25rem - 1rem);
+            border: none;
+            box-shadow: 0 0 0 5px rgba(var(--black-rgb), 0.2);
+          }
+        }
+      }
+    }
+
+    > .ar-switch {
+      position: relative;
+      display: inline-block;
+      width: 2.25rem;
+      height: 1rem;
+      transition: box-shadow 250ms ease-in-out;
+    }
+  }
 }
 
 @import url("./core/border.css");

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

@@ -0,0 +1,164 @@
+/* #region Animation -> BLUE */
+@keyframes clicked-blue {
+  0% {
+    box-shadow: 0 0 0 0px var(--blue-500);
+  }
+  50% {
+    box-shadow: 0 0 0 5px var(--blue-100);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px transparent;
+  }
+}
+/* #endregion */
+/* Animation -> BLUE */
+
+/* #region Animation -> PURPLE */
+@keyframes clicked-purple {
+  0% {
+    box-shadow: 0 0 0 0px var(--purple-500);
+  }
+  50% {
+    box-shadow: 0 0 0 5px var(--purple-100);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px transparent;
+  }
+}
+/* #endregion */
+/* Animation -> PURPLE */
+
+/* #region Animation -> PINK */
+@keyframes clicked-pink {
+  0% {
+    box-shadow: 0 0 0 0px var(--pink-500);
+  }
+  50% {
+    box-shadow: 0 0 0 5px var(--pink-100);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px transparent;
+  }
+}
+/* #endregion */
+/* Animation -> PINK */
+
+/* #region Animation -> RED */
+@keyframes clicked-red {
+  0% {
+    box-shadow: 0 0 0 0px var(--red-500);
+  }
+  50% {
+    box-shadow: 0 0 0 5px var(--red-100);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px transparent;
+  }
+}
+/* #endregion */
+/* Animation -> RED */
+
+/* #region Animation -> ORANGE */
+@keyframes clicked-orange {
+  0% {
+    box-shadow: 0 0 0 0px var(--orange-500);
+  }
+  50% {
+    box-shadow: 0 0 0 5px var(--orange-100);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px transparent;
+  }
+}
+/* #endregion */
+/* Animation -> ORANGE */
+
+/* #region Animation -> YELLOW */
+@keyframes clicked-yellow {
+  0% {
+    box-shadow: 0 0 0 0px var(--yellow-500);
+  }
+  50% {
+    box-shadow: 0 0 0 5px var(--yellow-100);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px transparent;
+  }
+}
+/* #endregion */
+/* Animation -> YELLOW */
+
+/* #region Animation -> GREEN */
+@keyframes clicked-green {
+  0% {
+    box-shadow: 0 0 0 0px var(--green-500);
+  }
+  50% {
+    box-shadow: 0 0 0 5px var(--green-100);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px transparent;
+  }
+}
+/* #endregion */
+/* Animation -> GREEN */
+
+/* #region Animation -> TEAL */
+@keyframes clicked-teal {
+  0% {
+    box-shadow: 0 0 0 0px var(--teal-500);
+  }
+  50% {
+    box-shadow: 0 0 0 5px var(--teal-100);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px transparent;
+  }
+}
+/* #endregion */
+/* 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 var(--light-500);
+  }
+  50% {
+    box-shadow: 0 0 0 5px var(--light-100);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px transparent;
+  }
+}
+/* #endregion */
+/* Animation -> LIGHT */

package/dist/assets/css/core/ar-core.css

@@ -29,49 +29,24 @@
   --white-rgb: 255, 255, 255;
   --black: #000000;
   --black-rgb: 0, 0, 0;
-  --gray-100: #f8f9fa;
-  --gray-200: #e9ecef;
-  --gray-300: #dee2e6;
-  --gray-400: #ced4da;
-  --gray-500: #adb5bd;
-  --gray-600: #6c757d;
-  --gray-700: #495057;
-  --gray-800: #343a40;
-  --gray-900: #212529;
-  --gray-dark: #343a40;
-  --red: #ff0000;
-  --red-rgb: 255, 0, 0;
-  --green: #00ff00;
-  --green-rgb: 0, 255, 0;
-  --blue: #0000ff;
-  --blue-rgb: 0, 0, 255;
 
   /* ... */
-  --primary: #007bff;
-  --primary-active: #005abb;
+  --primary: var(--blue-500);
   --primary-light: #92c7ff;
-  --primary-rgb: 0, 123, 255;
-  --secondary: #6c757d;
-  --secondary-active: #495055;
+  --primary-rgb: 13, 110, 253;
+  --secondary: var(--gray-500);
   --secondary-rgb: 108, 117, 125;
-  --success: #28a745;
-  --success-active: #1c7a32;
+  --success: var(--green-500);
   --success-rgb: 40, 167, 69;
-  --warning: #ffc107;
-  --warning-active: #cf9c05;
+  --warning: var(--orange-500);
   --warning-rgb: 255, 193, 7;
-  --warning-font-color: #463500;
-  --danger: #dc3545;
-  --danger-active: #af2936;
+  --danger: var(--red-500);
   --danger-rgb: 220, 53, 69;
-  --information: #17a2b8;
-  --information-active: #107c8c;
+  --information: var(--cyan-500);
   --information-rgb: 23, 162, 184;
-  --light: #e4e6e9;
-  --light-active: #dde0e3;
+  --light: var(--light-500);
   --light-rgb: 222, 226, 230;
-  --dark: var(--gray-600);
-  --dark-active: var(--gray-700);
+  --dark: var(--gray-500);
   --dark-rgb: 52, 58, 64;
 }
 /* #endregion */
@@ -128,20 +103,20 @@
 /* Box Shadow */
 
 /* #region Variants */
-@import url("./variants/animation.css");
+@import url("./animation.css");
 
 .filled {
   border-color: transparent;
   transition: border 250ms, box-shadow 250ms ease-in-out;
 }
 
-@import url("./variants/filled/styles.css");
+@import url("./variants/filled.css");
 
 .surface {
   transition: border 250ms, box-shadow 250ms ease-in-out;
 }
 
-@import url("./variants/surface/styles.css");
+@import url("./variants/surface.css");
 
 .outlined {
   background-color: transparent;
@@ -151,7 +126,7 @@
   transition: border 250ms, box-shadow 250ms ease-in-out;
 }
 
-@import url("./variants/outlined/styles.css");
+@import url("./variants/outlined.css");
 
 .dashed {
   background-color: transparent;
@@ -161,7 +136,7 @@
   transition: border 250ms, box-shadow 250ms ease-in-out;
 }
 
-@import url("./variants/dashed/dashed.css");
+@import url("./variants/dashed.css");
 
 .borderless {
   background-color: transparent;
@@ -176,8 +151,9 @@
   cursor: no-drop !important;
 }
 
-@import url("./variants/borderless/borderless.css");
+@import url("./variants/borderless.css");
 @import url("./variants/border.css");
+@import url("./statuses.css");
 
 :is(input) {
   border: solid 1px transparent;
@@ -195,18 +171,8 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 }
 :is(input, button):disabled,
 :is(input[type="checkbox"]):disabled + span > .ar-checkbox:is(.filled, .outlined) {
-  /* background-color: var(--gray-100) !important; */
-  /* border: solid 1px var(--gray-500) !important; */
-  /* color: var(--gray-500) !important; */
   cursor: no-drop !important;
 }
-/* :is(input, button):is(.outlined):disabled {
-  background-color: transparent !important;
-} */
-/* :is(input, button):is(.dashed):disabled {
-  background-color: transparent !important;
-  border: dashed 1px var(--gray-500) !important;
-} */
 :is(input[type="checkbox"]):disabled + span > .ar-checkbox:is(.borderless) {
   background-color: var(--gray-100) !important;
   color: var(--gray-500) !important;

package/dist/assets/css/core/statuses.css

@@ -0,0 +1,206 @@
+/* #region PRIMARY */
+.filled {
+  &.primary {
+    background-color: var(--blue-100);
+    color: var(--blue-700);
+  }
+}
+.surface {
+  &.primary {
+    background-color: var(--blue-100);
+    border: solid 1px var(--blue-300);
+    color: var(--blue-700);
+  }
+}
+.dashed {
+  &.primary {
+    border: dashed 1px var(--blue-300);
+    color: var(--blue-700);
+  }
+}
+/* #endregion */
+/* PRIMARY */
+
+/* #region PRIMARY-LIGHT */
+.filled {
+  &.primary-light {
+    background-color: var(--blue-100);
+    color: var(--blue-700);
+  }
+}
+.surface {
+  &.primary-light {
+    background-color: var(--blue-100);
+    border: solid 1px var(--blue-300);
+    color: var(--blue-700);
+  }
+}
+.dashed {
+  &.primary-light {
+    border: dashed 1px var(--blue-300);
+    color: var(--blue-700);
+  }
+}
+/* #endregion */
+/* PRIMARY-LIGHT */
+
+/* #region SECONDARY */
+.filled {
+  &.secondary {
+    background-color: var(--blue-100);
+    color: var(--blue-700);
+  }
+}
+.surface {
+  &.secondary {
+    background-color: var(--blue-100);
+    border: solid 1px var(--blue-300);
+    color: var(--blue-700);
+  }
+}
+.dashed {
+  &.secondary {
+    border: dashed 1px var(--blue-300);
+    color: var(--blue-700);
+  }
+}
+/* #endregion */
+/* SECONDARY */
+
+/* #region SUCCESS */
+.filled {
+  &.success {
+    background-color: var(--green-100);
+    color: var(--green-700);
+  }
+}
+.surface {
+  &.success {
+    background-color: var(--green-100);
+    border: solid 1px var(--green-300);
+    color: var(--green-700);
+  }
+}
+.dashed {
+  &.success {
+    border: dashed 1px var(--green-300);
+    color: var(--green-700);
+  }
+}
+/* #endregion */
+/* SUCCESS */
+
+/* #region WARNING */
+.filled {
+  &.warning {
+    background-color: var(--orange-100);
+    color: var(--orange-700);
+  }
+}
+.surface {
+  &.warning {
+    background-color: var(--orange-100);
+    border: solid 1px var(--orange-300);
+    color: var(--orange-700);
+  }
+}
+.dashed {
+  &.warning {
+    border: dashed 1px var(--orange-300);
+    color: var(--orange-700);
+  }
+}
+/* #endregion */
+/* WARNING */
+
+/* #region DANGER */
+.filled {
+  &.danger {
+    background-color: var(--red-100);
+    color: var(--red-700);
+  }
+}
+.surface {
+  &.danger {
+    background-color: var(--red-100);
+    border: solid 1px var(--red-300);
+    color: var(--red-700);
+  }
+}
+.dashed {
+  &.danger {
+    border: dashed 1px var(--red-300);
+    color: var(--red-700);
+  }
+}
+/* #endregion */
+/* DANGER */
+
+/* #region INFORMATION */
+.filled {
+  &.information {
+    background-color: var(--red-100);
+    color: var(--red-700);
+  }
+}
+.surface {
+  &.information {
+    background-color: var(--red-100);
+    border: solid 1px var(--red-300);
+    color: var(--red-700);
+  }
+}
+.dashed {
+  &.information {
+    border: dashed 1px var(--red-300);
+    color: var(--red-700);
+  }
+}
+/* #endregion */
+/* INFORMATION */
+
+/* #region DARK */
+.filled {
+  &.dark {
+    background-color: var(--red-100);
+    color: var(--red-700);
+  }
+}
+.surface {
+  &.dark {
+    background-color: var(--red-100);
+    border: solid 1px var(--red-300);
+    color: var(--red-700);
+  }
+}
+.dashed {
+  &.dark {
+    border: dashed 1px var(--red-300);
+    color: var(--red-700);
+  }
+}
+/* #endregion */
+/* DARK */
+
+/* #region LIGHT */
+.filled {
+  &.light {
+    background-color: var(--red-100);
+    color: var(--red-700);
+  }
+}
+.surface {
+  &.light {
+    background-color: var(--red-100);
+    border: solid 1px var(--red-300);
+    color: var(--red-700);
+  }
+}
+.dashed {
+  &.light {
+    border: dashed 1px var(--red-300);
+    color: var(--red-700);
+  }
+}
+/* #endregion */
+/* LIGHT */

package/dist/assets/css/core/variants/{filled/styles.css → filled.css}

@@ -402,7 +402,7 @@ button.filled:not(.disabled) {
 .filled:not(.disabled) {
   &.light {
     background-color: var(--light-500);
-    color: var(--white);
+    color: var(--gray-500);
     
     &.active {
       animation: clicked-light ease-in-out 750ms 0s 1 normal both;