ar-design 0.1.7 → 0.1.9

package/dist/assets/css/components/data-display/chip/chip.css

@@ -0,0 +1,4 @@
+.ar-chip {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+}

package/dist/{assest/css/css → assets/css/components/data-display}/syntax-highlighter/syntax-highlighter.css

@@ -3,18 +3,15 @@
   flex-direction: column;
   border: solid 1px var(--gray-200);
   border-radius: var(--border-radius-lg);
-  overflow: hidden;
 }
+
 .ar-syntax > .preview {
   position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
   gap: 1rem;
   background-color: var(--white);
   padding: 1rem;
+  border-radius: var(--border-radius-lg);
 }
-
 .ar-syntax > .preview.left {
   justify-content: left;
 }

package/dist/{assest/css → assets/css/components}/form/button/button.css

@@ -5,6 +5,7 @@
   border: none;
   border-radius: var(--border-radius-sm);
   font-family: var(--system);
+  font-size: 1rem;
   cursor: pointer;
   transition: background-color 150ms, border 150ms, color 150ms ease-in-out;
   overflow: hidden;
@@ -20,11 +21,5 @@
 /* Core Css */
 @import url("./core/shape.css");
 @import url("./core/icon.css");
-@import url("./core/border.css");
 @import url("./core/position.css");
 @import url("./core/size.css");
-
-/* Variant Css */
-@import url("./variant/filled/core.css");
-@import url("./variant/outlined/core.css");
-@import url("./variant/text/core.css");

package/dist/{assest/css → assets/css/components}/form/button/core/size.css

@@ -4,7 +4,7 @@
   font-size: 1.25rem;
 }
 .ar-button.normal {
-  height: 2.25rem;
+  height: var(--input-height);
   padding: 0 1rem;
 }
 .ar-button.small {

package/dist/assets/css/components/form/checkbox/checkbox.css

@@ -0,0 +1,28 @@
+.ar-checkbox-wrapper {
+}
+.ar-checkbox-wrapper > label > input[type="checkbox"] {
+  display: none;
+}
+.ar-checkbox-wrapper > label > span {
+  display: flex;
+  align-items: center;
+}
+.ar-checkbox-wrapper > label > span > .ar-checkbox {
+  position: relative;
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+}
+.ar-checkbox-wrapper > label > input[type="checkbox"]:checked + span > .ar-checkbox::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(45deg);
+  display: inline-block;
+  content: "";
+  width: 0.25rem;
+  height: 0.5rem;
+  border: solid 1px transparent;
+}
+
+@import url("./core/border.css");

package/dist/assets/css/components/form/checkbox/core/border.css

@@ -0,0 +1,96 @@
+/* #region Border Color -> PRIMARY */
+.ar-checkbox-wrapper > label > input[type="checkbox"]:checked + span > .ar-checkbox.filled.primary::before {
+  border-right-color: var(--white);
+  border-bottom-color: var(--white);
+}
+.ar-checkbox-wrapper > label > input[type="checkbox"]:checked + span > .ar-checkbox.outlined.primary::before {
+  border-right-color: var(--primary);
+  border-bottom-color: var(--primary);
+}
+/* #endregion */
+/* Border Color -> PRIMARY */
+
+/* #region Border Color -> SECONDARY */
+.ar-checkbox-wrapper > label > input[type="checkbox"]:checked + span > .ar-checkbox.filled.secondary::before {
+  border-right-color: var(--white);
+  border-bottom-color: var(--white);
+}
+.ar-checkbox-wrapper > label > input[type="checkbox"]:checked + span > .ar-checkbox.outlined.secondary::before {
+  border-right-color: var(--secondary);
+  border-bottom-color: var(--secondary);
+}
+/* #endregion */
+/* Border Color -> SECONDARY */
+
+/* #region Border Color -> SUCCESS */
+.ar-checkbox-wrapper > label > input[type="checkbox"]:checked + span > .ar-checkbox.filled.success::before {
+  border-right-color: var(--white);
+  border-bottom-color: var(--white);
+}
+.ar-checkbox-wrapper > label > input[type="checkbox"]:checked + span > .ar-checkbox.outlined.success::before {
+  border-right-color: var(--success);
+  border-bottom-color: var(--success);
+}
+/* #endregion */
+/* Border Color -> SUCCESS */
+
+/* #region Border Color -> WARNING */
+.ar-checkbox-wrapper > label > input[type="checkbox"]:checked + span > .ar-checkbox.filled.warning::before {
+  border-right-color: var(--dark);
+  border-bottom-color: var(--dark);
+}
+.ar-checkbox-wrapper > label > input[type="checkbox"]:checked + span > .ar-checkbox.outlined.warning::before {
+  border-right-color: var(--warning);
+  border-bottom-color: var(--warning);
+}
+/* #endregion */
+/* Border Color -> WARNING */
+
+/* #region Border Color -> DANGER */
+.ar-checkbox-wrapper > label > input[type="checkbox"]:checked + span > .ar-checkbox.filled.danger::before {
+  border-right-color: var(--white);
+  border-bottom-color: var(--white);
+}
+.ar-checkbox-wrapper > label > input[type="checkbox"]:checked + span > .ar-checkbox.outlined.danger::before {
+  border-right-color: var(--danger);
+  border-bottom-color: var(--danger);
+}
+/* #endregion */
+/* Border Color -> DANGER */
+
+/* #region Border Color -> INFORMATION */
+.ar-checkbox-wrapper > label > input[type="checkbox"]:checked + span > .ar-checkbox.filled.information::before {
+  border-right-color: var(--white);
+  border-bottom-color: var(--white);
+}
+.ar-checkbox-wrapper > label > input[type="checkbox"]:checked + span > .ar-checkbox.outlined.information::before {
+  border-right-color: var(--information);
+  border-bottom-color: var(--information);
+}
+/* #endregion */
+/* Border Color -> INFORMATION */
+
+/* #region Border Color -> DARK */
+.ar-checkbox-wrapper > label > input[type="checkbox"]:checked + span > .ar-checkbox.filled.dark::before {
+  border-right-color: var(--white);
+  border-bottom-color: var(--white);
+}
+.ar-checkbox-wrapper > label > input[type="checkbox"]:checked + span > .ar-checkbox.outlined.dark::before {
+  border-right-color: var(--dark);
+  border-bottom-color: var(--dark);
+}
+/* #endregion */
+/* Border Color -> DARK */
+
+/* #region Border Color -> LIGHT */
+.ar-checkbox-wrapper > label > input[type="checkbox"]:checked + span > .ar-checkbox.filled.light::before {
+  border-right-color: var(--dark);
+  border-bottom-color: var(--dark);
+}
+.ar-checkbox-wrapper > label > input[type="checkbox"]:checked + span > .ar-checkbox.outlined.light::before {
+  border-right-color: var(--light);
+  border-bottom-color: var(--light);
+}
+/* #endregion */
+/* Border Color -> LIGHT */
+

package/dist/{assest/css/css → assets/css/components}/form/input/core/addon.css

@@ -1,12 +1,11 @@
 .ar-input-wrapper > .addon-before,
 .ar-input-wrapper > .addon-after {
-  background-color: var(--gray-100);
-  height: 2.25rem;
+  height: var(--input-height);
   padding: 0 0.75rem;
   color: var(--gray-600);
   font-size: 0.9rem;
   font-weight: 600;
-  line-height: 2.25rem;
+  line-height: var(--input-height);
   user-select: none;
   cursor: no-drop;
 }

package/dist/assets/css/components/form/input/core/border.css

@@ -0,0 +1,115 @@
+/* #region Border Radius -> SM */
+.ar-input-wrapper.addon > span.addon-before.border-radius-sm {
+  border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm) !important;
+}
+.ar-input-wrapper.addon > span.addon-after.border-radius-sm {
+  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0 !important;
+}
+
+.ar-input-wrapper.addon:has(> .addon-before) > .ar-input > input.border-radius-sm {
+  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0 !important;
+}
+.ar-input-wrapper.addon:has(> .addon-after) > .ar-input > input.border-radius-sm,
+.ar-input-wrapper:has(> .ar-button) > .ar-input > input.border-radius-sm {
+  border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm) !important;
+}
+.ar-input-wrapper.addon:has(> .addon-before):has(> .addon-after)
+  > .ar-input
+  > input.border-radius-sm {
+  border-radius: 0 !important;
+}
+/* #endregion */
+/* Border Radius -> SM */
+
+/* #region Border Radius -> LG */
+.ar-input-wrapper.addon > span.addon-before.border-radius-lg {
+  border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg) !important;
+}
+.ar-input-wrapper.addon > span.addon-after.border-radius-lg {
+  border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0 !important;
+}
+
+.ar-input-wrapper.addon:has(> .addon-before) > .ar-input > input.border-radius-lg {
+  border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0 !important;
+}
+.ar-input-wrapper.addon:has(> .addon-after) > .ar-input > input.border-radius-lg,
+.ar-input-wrapper:has(> .ar-button) > .ar-input > input.border-radius-lg {
+  border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg) !important;
+}
+.ar-input-wrapper.addon:has(> .addon-before):has(> .addon-after)
+  > .ar-input
+  > input.border-radius-lg {
+  border-radius: 0 !important;
+}
+/* #endregion */
+/* Border Radius -> LG */
+
+/* #region Border Radius -> XL */
+.ar-input-wrapper.addon > span.addon-before.border-radius-xl {
+  border-radius: var(--border-radius-xl) 0 0 var(--border-radius-xl) !important;
+}
+.ar-input-wrapper.addon > span.addon-after.border-radius-xl {
+  border-radius: 0 var(--border-radius-xl) var(--border-radius-xl) 0 !important;
+}
+
+.ar-input-wrapper.addon:has(> .addon-before) > .ar-input > input.border-radius-xl {
+  border-radius: 0 var(--border-radius-xl) var(--border-radius-xl) 0 !important;
+}
+.ar-input-wrapper.addon:has(> .addon-after) > .ar-input > input.border-radius-xl,
+.ar-input-wrapper:has(> .ar-button) > .ar-input > input.border-radius-xl {
+  border-radius: var(--border-radius-xl) 0 0 var(--border-radius-xl) !important;
+}
+.ar-input-wrapper.addon:has(> .addon-before):has(> .addon-after)
+  > .ar-input
+  > input.border-radius-xl {
+  border-radius: 0 !important;
+}
+/* #endregion */
+/* Border Radius -> XL */
+
+/* #region Border Radius -> XXL */
+.ar-input-wrapper.addon > span.addon-before.border-radius-xxl {
+  border-radius: var(--border-radius-xxl) 0 0 var(--border-radius-xxl) !important;
+}
+.ar-input-wrapper.addon > span.addon-after.border-radius-xxl {
+  border-radius: 0 var(--border-radius-xxl) var(--border-radius-xxl) 0 !important;
+}
+
+.ar-input-wrapper.addon:has(> .addon-before) > .ar-input > input.border-radius-xxl {
+  border-radius: 0 var(--border-radius-xxl) var(--border-radius-xxl) 0 !important;
+}
+.ar-input-wrapper.addon:has(> .addon-after) > .ar-input > input.border-radius-xxl,
+.ar-input-wrapper:has(> .ar-button) > .ar-input > input.border-radius-xxl {
+  border-radius: var(--border-radius-xxl) 0 0 var(--border-radius-xxl) !important;
+}
+.ar-input-wrapper.addon:has(> .addon-before):has(> .addon-after)
+  > .ar-input
+  > input.border-radius-xxl {
+  border-radius: 0 !important;
+}
+/* #endregion */
+/* Border Radius -> XXL */
+
+/* #region Border Radius -> PILL */
+.ar-input-wrapper.addon > span.addon-before.border-radius-pill {
+  border-radius: var(--border-radius-pill) 0 0 var(--border-radius-pill) !important;
+}
+.ar-input-wrapper.addon > span.addon-after.border-radius-pill {
+  border-radius: 0 var(--border-radius-pill) var(--border-radius-pill) 0 !important;
+}
+
+.ar-input-wrapper.addon:has(> .addon-before) > .ar-input > input.border-radius-pill {
+  border-radius: 0 var(--border-radius-pill) var(--border-radius-pill) 0 !important;
+}
+.ar-input-wrapper.addon:has(> .addon-after) > .ar-input > input.border-radius-pill,
+.ar-input-wrapper:has(> .ar-button) > .ar-input > input.border-radius-pill {
+  border-radius: var(--border-radius-pill) 0 0 var(--border-radius-pill) !important;
+}
+.ar-input-wrapper.addon:has(> .addon-before):has(> .addon-after)
+  > .ar-input
+  > input.border-radius-pill {
+  border-radius: 0 !important;
+}
+/* #endregion */
+/* Border Radius -> PILL */
+

package/dist/assets/css/components/form/input/core/button.css

@@ -0,0 +1,35 @@
+/* #region Border Radius -> SM */
+.ar-input-wrapper > .ar-button.border-radius-sm {
+  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
+}
+/* #endregion */
+/* Border Radius -> SM */
+
+/* #region Border Radius -> LG */
+.ar-input-wrapper > .ar-button.border-radius-lg {
+  border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
+}
+/* #endregion */
+/* Border Radius -> LG */
+
+/* #region Border Radius -> XL */
+.ar-input-wrapper > .ar-button.border-radius-xl {
+  border-radius: 0 var(--border-radius-xl) var(--border-radius-xl) 0;
+}
+/* #endregion */
+/* Border Radius -> XL */
+
+/* #region Border Radius -> XXL */
+.ar-input-wrapper > .ar-button.border-radius-xxl {
+  border-radius: 0 var(--border-radius-xxl) var(--border-radius-xxl) 0;
+}
+/* #endregion */
+/* Border Radius -> XXL */
+
+/* #region Border Radius -> PILL */
+.ar-input-wrapper > .ar-button.border-radius-pill {
+  border-radius: 0 var(--border-radius-pill) var(--border-radius-pill) 0;
+}
+/* #endregion */
+/* Border Radius -> PILL */
+

package/dist/{assest/css → assets/css/components}/form/input/input.css

@@ -12,7 +12,7 @@
 .ar-input-wrapper > .ar-input > input {
   background-color: transparent;
   width: 100%;
-  height: 2.25rem;
+  height: var(--input-height);
   padding: 0 0.5rem;
   border: solid 1px transparent;
   font-family: var(--system);
@@ -27,8 +27,3 @@
 @import url("./core/border.css");
 @import url("./core/button.css");
 @import url("./core/addon.css");
-
-/* Variant Css */
-@import url("./variant/filled/core.css");
-@import url("./variant/outlined/core.css");
-@import url("./variant/borderless/core.css");

package/dist/assets/css/components/form/select/options.css

@@ -0,0 +1,63 @@
+.ar-select-wrapper > .options {
+  position: absolute;
+  inset: auto 0 auto 0;
+  background-color: var(--white);
+  border-radius: var(--border-radius-sm);
+  overflow: hidden;
+  z-index: 5;
+  transition: visibility 250ms, opacity 250ms, transform 250ms ease-in-out;
+}
+.ar-select-wrapper > .options.top {
+  inset: var(--input-height) 0 auto 0;
+  box-shadow: 0 5px 15px -2.5px rgba(var(--black-rgb), 0.1);
+}
+.ar-select-wrapper > .options.bottom {
+  inset: auto 0 var(--input-height) 0;
+  box-shadow: 0 -5px 15px -2.5px rgba(var(--black-rgb), 0.1);
+}
+
+.ar-select-wrapper > .options > .search-field {
+  padding: 0.5rem;
+  border-bottom: solid 1px var(--gray-200);
+}
+
+.ar-select-wrapper > .options > ul {
+  width: 100%;
+}
+.ar-select-wrapper > .options > ul > li {
+  display: flex;
+  align-items: center;
+  gap: 0 0.5rem;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+}
+.ar-select-wrapper > .options > ul > li:hover {
+  background-color: var(--gray-200);
+}
+.ar-select-wrapper > .options > ul > li.selectedItem {
+  /* background-color: rgba(var(--success-rgb), 0.1); */
+}
+.ar-select-wrapper > .options > ul > li.navigate-with-arrow-keys {
+  background-color: var(--gray-100);
+}
+
+.ar-select-wrapper > .options:is(.opened) {
+  visibility: visible;
+  opacity: 1;
+  background-color: var(--white);
+  transform: scaleY(1);
+}
+.ar-select-wrapper > .options:is(.closed) {
+  visibility: hidden;
+  opacity: 0;
+  transform: scaleY(0.8);
+}
+
+.ar-select-wrapper > .options.top:is(.opened, .closed),
+.ar-select-wrapper > .options.top:is(.opened, .closed) {
+  transform-origin: top;
+}
+.ar-select-wrapper > .options.bottom:is(.opened, .closed),
+.ar-select-wrapper > .options.bottom:is(.opened, .closed) {
+  transform-origin: bottom;
+}

package/dist/assets/css/components/form/select/select.css

@@ -0,0 +1,50 @@
+.ar-select-wrapper {
+  position: relative;
+  width: 100%;
+  user-select: none;
+}
+.ar-select-wrapper > .ar-select {
+  position: relative;
+  width: 100%;
+}
+
+.ar-select-wrapper > .ar-select > .selections {
+  display: flex;
+  align-items: center;
+  gap: 0 0.25rem;
+  height: var(--input-height);
+  padding: 0 0.35rem;
+}
+.ar-select-wrapper > .ar-select > .selections > ul {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+}
+.ar-select-wrapper > .ar-select > .selections > ul > li {
+  background-color: var(--gray-100);
+  padding: 0 0.5rem;
+  border: solid 1px var(--gray-200);
+  border-radius: var(--border-radius-sm);
+}
+
+.ar-select-wrapper > .ar-select > .button-clear {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 0.5rem;
+  background-color: rgba(var(--black-rgb), 0.25);
+  backdrop-filter: blur(5px);
+  width: 1rem;
+  height: 1rem;
+  border-radius: var(--border-radius-pill);
+  text-align: center;
+  line-height: 0.7rem;
+  cursor: pointer;
+}
+.ar-select-wrapper > .ar-select > .button-clear::before {
+  content: "x";
+  color: var(--white);
+  font-size: 0.75rem;
+}
+
+@import url("./options.css");

package/dist/{assest/css/css → assets/css/core}/ar-core.css

@@ -4,14 +4,21 @@
 
 @font-face {
   font-family: "JetBrainsMono-Bold";
-  src: url("../../assest/fonts/JetBrainsMono-Bold.ttf");
+  src: url("../../../assets/fonts/JetBrainsMono-Bold.ttf");
 }
 
 @font-face {
   font-family: "JetBrainsMono-Regular";
-  src: url("../../assest/fonts/JetBrainsMono-Regular.ttf");
+  src: url("../../../assets/fonts/JetBrainsMono-Regular.ttf");
 }
 
+/* #region Height */
+:root {
+  --input-height: 2.25rem;
+}
+/* #endregion */
+/* Height */
+
 /* #region Color Palette */
 :root {
   --white: #fff;
@@ -28,8 +35,8 @@
   --gray-800: #343a40;
   --gray-900: #212529;
   --gray-dark: #343a40;
-  --red: #f11a7b;
-  --red-rgb: 241, 26, 123;
+  --red: #ff0000;
+  --red-rgb: 255, 0, 0;
   --green: #00ff00;
   --green-rgb: 0, 255, 0;
   --blue: #0000ff;
@@ -62,6 +69,8 @@
   --dark-active: #23272b;
   --dark-rgb: 52, 58, 64;
 }
+/* #endregion */
+/* Color Palette */
 
 /* #region Fonts */
 :root {
@@ -111,3 +120,41 @@
 }
 /* #endregion */
 /* Box Shadow */
+
+/* #region Variants */
+@import url("./variants/animation.css");
+
+.filled {
+  border-color: transparent;
+  transition: border 250ms, box-shadow 250ms ease-in-out;
+}
+
+@import url("./variants/filled/filled.css");
+
+.outlined {
+  background-color: transparent;
+  border-style: solid;
+  border-width: 1px !important;
+  border-color: transparent;
+  transition: border 250ms, box-shadow 250ms ease-in-out;
+}
+
+@import url("./variants/outlined/outlined.css");
+
+.borderless {
+  background-color: transparent;
+  border-width: 1px;
+  border-color: transparent;
+  transition: border 250ms, box-shadow 250ms ease-in-out;
+}
+@import url("./variants/borderless/borderless.css");
+@import url("./variants/border.css");
+
+:is(input, button):disabled {
+  background-color: var(--gray-100) !important;
+  border: solid 1px var(--gray-500) !important;
+  color: var(--gray-500) !important;
+  cursor: no-drop !important;
+}
+/* #endregion */
+/* Variants */

package/dist/{assest/css/css/form/button/variant/filled → assets/css/core/variants}/animation.css

@@ -1,4 +1,5 @@
-@keyframes filled-primary-active-animation {
+/* #region Animation -> PRIMARY */
+@keyframes clicked-primary {
   0% {
     box-shadow: 0 0 0 0px rgba(var(--primary-rgb), 0);
   }
@@ -9,8 +10,11 @@
     box-shadow: 0 0 0 7.5px rgba(var(--primary-rgb), 0);
   }
 }
+/* #endregion */
+/* Animation -> PRIMARY */
 
-@keyframes filled-secondary-active-animation {
+/* #region Animation -> SECONDARY */
+@keyframes clicked-secondary {
   0% {
     box-shadow: 0 0 0 0px rgba(var(--secondary-rgb), 0);
   }
@@ -21,8 +25,11 @@
     box-shadow: 0 0 0 7.5px rgba(var(--secondary-rgb), 0);
   }
 }
+/* #endregion */
+/* Animation -> SECONDARY */
 
-@keyframes filled-success-active-animation {
+/* #region Animation -> SUCCESS */
+@keyframes clicked-success {
   0% {
     box-shadow: 0 0 0 0px rgba(var(--success-rgb), 0);
   }
@@ -33,8 +40,11 @@
     box-shadow: 0 0 0 7.5px rgba(var(--success-rgb), 0);
   }
 }
+/* #endregion */
+/* Animation -> SUCCESS */
 
-@keyframes filled-warning-active-animation {
+/* #region Animation -> WARNING */
+@keyframes clicked-warning {
   0% {
     box-shadow: 0 0 0 0px rgba(var(--warning-rgb), 0);
   }
@@ -45,8 +55,11 @@
     box-shadow: 0 0 0 7.5px rgba(var(--warning-rgb), 0);
   }
 }
+/* #endregion */
+/* Animation -> WARNING */
 
-@keyframes filled-danger-active-animation {
+/* #region Animation -> DANGER */
+@keyframes clicked-danger {
   0% {
     box-shadow: 0 0 0 0px rgba(var(--danger-rgb), 0);
   }
@@ -57,8 +70,11 @@
     box-shadow: 0 0 0 7.5px rgba(var(--danger-rgb), 0);
   }
 }
+/* #endregion */
+/* Animation -> DANGER */
 
-@keyframes filled-information-active-animation {
+/* #region Animation -> INFORMATION */
+@keyframes clicked-information {
   0% {
     box-shadow: 0 0 0 0px rgba(var(--information-rgb), 0);
   }
@@ -69,8 +85,11 @@
     box-shadow: 0 0 0 7.5px rgba(var(--information-rgb), 0);
   }
 }
+/* #endregion */
+/* Animation -> INFORMATION */
 
-@keyframes filled-light-active-animation {
+/* #region Animation -> DARK */
+@keyframes clicked-dark {
   0% {
     box-shadow: 0 0 0 0px rgba(var(--dark-rgb), 0);
   }
@@ -81,15 +100,21 @@
     box-shadow: 0 0 0 7.5px rgba(var(--dark-rgb), 0);
   }
 }
+/* #endregion */
+/* Animation -> DARK */
 
-@keyframes filled-dark-active-animation {
+/* #region Animation -> LIGHT */
+@keyframes clicked-light {
   0% {
-    box-shadow: 0 0 0 0px rgba(var(--dark-rgb), 0);
+    box-shadow: 0 0 0 0px rgba(var(--light-rgb), 0);
   }
   25% {
-    box-shadow: 0 0 0 5px rgba(var(--dark-rgb), 0.25);
+    box-shadow: 0 0 0 5px rgba(var(--light-rgb), 0.25);
   }
   100% {
-    box-shadow: 0 0 0 7.5px rgba(var(--dark-rgb), 0);
+    box-shadow: 0 0 0 7.5px rgba(var(--light-rgb), 0);
   }
 }
+/* #endregion */
+/* Animation -> LIGHT */
+