ar-design 0.1.0 → 0.1.2

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

@@ -1,3 +1,13 @@
+@font-face {
+  font-family: "JetBrainsMono-Bold";
+  src: url("../../assest/fonts/JetBrainsMono-Bold.ttf");
+}
+
+@font-face {
+  font-family: "JetBrainsMono-Regular";
+  src: url("../../assest/fonts/JetBrainsMono-Regular.ttf");
+}
+
 /* #region Color Palette */
 :root {
   --white: #fff;
@@ -49,7 +59,15 @@
   --dark-rgb: 52, 58, 64;
 }
 
-/* Code Editor */
+/* #region Fonts */
+:root {
+  --jetBrainsMonoBold: "JetBrainsMono-Bold";
+  --jetBrainsMonoRegular: "JetBrainsMono-Regular";
+}
+/* #endregion */
+/* Fonts */
+
+/* #region Code Editor */
 :root {
   --bg-color: #282c34;
   --color: #abb2bf;

package/dist/{libs/styles → assest/css}/button/button.css

@@ -2,5 +2,6 @@
 @import url("./core/shape.css");
 @import url("./core/icon.css");
 @import url("./core/border.css");
+@import url("./core/position.css");
 @import url("./variant/filled/core.css");
 @import url("./variant/outlined/core.css");

package/dist/{libs/styles → assest/css}/button/core/core.css

@@ -1,6 +1,7 @@
 .ar-button {
   position: relative;
-  padding: 0.5rem 1rem;
+  height: 2.5rem;
+  padding: 0 1rem;
   border: none;
   border-radius: var(--border-radius-sm);
   cursor: pointer;

package/dist/{libs/styles → assest/css}/button/core/icon.css

@@ -1,4 +1,4 @@
-.ar-button.icon {
+.ar-button > .icon {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -7,15 +7,15 @@
   align-items: flex-start;
   gap: 0 0.5rem;
 }
-.ar-button.icon-row {
+.ar-button > .icon-row {
   flex-direction: row;
 }
-.ar-button.icon-row-end {
+.ar-button > .icon-row-end {
   flex-direction: row-reverse;
 }
-.ar-button.icon-column {
+.ar-button > .icon-column {
   flex-direction: column;
 }
-.ar-button.icon-column-end {
+.ar-button > .icon-column-end {
   flex-direction: column-reverse;
 }

package/dist/assest/css/button/core/position.css

@@ -0,0 +1,19 @@
+.ar-button.fixed {
+  position: fixed;
+}
+.ar-button.absolute {
+  position: absolute;
+}
+
+.ar-button.top {
+  top: 0.5rem;
+}
+.ar-button.right {
+  right: 0.5rem;
+}
+.ar-button.bottom {
+  bottom: 0.5rem;
+}
+.ar-button.left {
+  left: 0.5rem;
+}

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

@@ -0,0 +1,107 @@
+@font-face {
+  font-family: "JetBrainsMono-Bold";
+  src: url("../../assest/fonts/JetBrainsMono-Bold.ttf");
+}
+
+@font-face {
+  font-family: "JetBrainsMono-Regular";
+  src: url("../../assest/fonts/JetBrainsMono-Regular.ttf");
+}
+
+/* #region Color Palette */
+:root {
+  --white: #fff;
+  --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: #f11a7b;
+  --red-rgb: 241, 26, 123;
+  --green: #00ff00;
+  --green-rgb: 0, 255, 0;
+  --blue: #0000ff;
+  --blue-rgb: 0, 0, 255;
+
+  /* ... */
+  --primary: #007bff;
+  --primary-active: #005abb;
+  --primary-rgb: 0, 123, 255;
+  --secondary: #6c757d;
+  --secondary-active: #495055;
+  --secondary-rgb: 108, 117, 125;
+  --success: #28a745;
+  --success-active: #1c7a32;
+  --success-rgb: 40, 167, 69;
+  --warning: #ffc107;
+  --warning-active: #cf9c05;
+  --warning-rgb: 255, 193, 7;
+  --warning-font-color: #463500;
+  --danger: #dc3545;
+  --danger-active: #af2936;
+  --danger-rgb: 220, 53, 69;
+  --information: #17a2b8;
+  --information-active: #107c8c;
+  --information-rgb: 23, 162, 184;
+  --light: #f8f9fa;
+  --light-active: #a0a1a3;
+  --light-rgb: 248, 249, 250;
+  --dark: #343a40;
+  --dark-active: #23272b;
+  --dark-rgb: 52, 58, 64;
+}
+
+/* #region Fonts */
+:root {
+  --jetBrainsMonoBold: "JetBrainsMono-Bold";
+  --jetBrainsMonoRegular: "JetBrainsMono-Regular";
+}
+/* #endregion */
+/* Fonts */
+
+/* #region Code Editor */
+:root {
+  --bg-color: #282c34;
+  --color: #abb2bf;
+  --tag-color: #679ad1;
+  --custom-tag-color: #6fc2ae;
+  --attribute-key-color: #a9d9f9;
+  --string-value-color: #c5947c;
+  --number-value-color: #bacdab;
+  --boolean-value-color: #57b0fe;
+  --object-value-color: #57b0fe;
+  --curly-bracket-color: #e4e49c;
+  --child-curly-bracket-color: #df6ed2;
+}
+/* #endregion */
+/* Color Palette */
+
+/* #region Border */
+:root {
+  /* Border */
+
+  /* Border Radius */
+  --border-radius: 0.465rem;
+  --border-radius-sm: 0.25rem;
+  --border-radius-lg: 0.5rem;
+  --border-radius-xl: 1rem;
+  --border-radius-xxl: 2rem;
+  --border-radius-pill: 50rem;
+}
+/* #endregion */
+/* Border */
+
+/* #region Box Shadow */
+:root {
+  --box-shadow: 0 0.5rem 1.5rem -0.5rem var(--gray-500);
+}
+/* #endregion */
+/* Box Shadow */

package/dist/assest/css/css/button/button.css

@@ -0,0 +1,7 @@
+@import url("./core/core.css");
+@import url("./core/shape.css");
+@import url("./core/icon.css");
+@import url("./core/border.css");
+@import url("./core/position.css");
+@import url("./variant/filled/core.css");
+@import url("./variant/outlined/core.css");

package/dist/assest/css/css/button/core/border.css

@@ -0,0 +1,18 @@
+.ar-button.border-radius-sm {
+  border-radius: var(--border-radius-sm);
+}
+.ar-button.border-radius-lg {
+  border-radius: var(--border-radius-lg);
+}
+.ar-button.border-radius-xl {
+  border-radius: var(--border-radius-xl);
+}
+.ar-button.border-radius-xxl {
+  border-radius: var(--border-radius-xxl);
+}
+.ar-button.border-radius-pill {
+  border-radius: var(--border-radius-pill);
+}
+.ar-button.border-radius-none {
+  border-radius: 0;
+}

package/dist/assest/css/css/button/core/core.css

@@ -0,0 +1,17 @@
+.ar-button {
+  position: relative;
+  height: 2.5rem;
+  padding: 0 1rem;
+  border: none;
+  border-radius: var(--border-radius-sm);
+  cursor: pointer;
+  transition: background-color 150ms, border 150ms, color 150ms ease-in-out;
+  overflow: hidden;
+}
+.ar-button.disabled {
+  cursor: no-drop;
+}
+
+.ar-button.max-width {
+  width: 100%;
+}

package/dist/assest/css/css/button/core/icon.css

@@ -0,0 +1,21 @@
+.ar-button > .icon {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+  gap: 0 0.5rem;
+}
+.ar-button > .icon-row {
+  flex-direction: row;
+}
+.ar-button > .icon-row-end {
+  flex-direction: row-reverse;
+}
+.ar-button > .icon-column {
+  flex-direction: column;
+}
+.ar-button > .icon-column-end {
+  flex-direction: column-reverse;
+}

package/dist/assest/css/css/button/core/position.css

@@ -0,0 +1,19 @@
+.ar-button.fixed {
+  position: fixed;
+}
+.ar-button.absolute {
+  position: absolute;
+}
+
+.ar-button.top {
+  top: 0.5rem;
+}
+.ar-button.right {
+  right: 0.5rem;
+}
+.ar-button.bottom {
+  bottom: 0.5rem;
+}
+.ar-button.left {
+  left: 0.5rem;
+}

package/dist/assest/css/css/button/core/shape.css

@@ -0,0 +1,11 @@
+.ar-button.ar-button-shape {
+  align-items: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0 !important;
+}
+.ar-button.ar-button-shape.circle {
+  border-radius: var(--border-radius-pill);
+}
+.ar-button.ar-button-shape.square {
+}

package/dist/assest/css/css/button/variant/filled/animation.css

@@ -0,0 +1,95 @@
+@keyframes filled-primary-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--primary-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--primary-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--primary-rgb), 0);
+  }
+}
+
+@keyframes filled-secondary-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--secondary-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--secondary-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--secondary-rgb), 0);
+  }
+}
+
+@keyframes filled-success-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--success-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--success-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--success-rgb), 0);
+  }
+}
+
+@keyframes filled-warning-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--warning-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--warning-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--warning-rgb), 0);
+  }
+}
+
+@keyframes filled-danger-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--danger-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--danger-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--danger-rgb), 0);
+  }
+}
+
+@keyframes filled-information-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--information-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--information-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--information-rgb), 0);
+  }
+}
+
+@keyframes filled-light-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--dark-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--dark-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--dark-rgb), 0);
+  }
+}
+
+@keyframes filled-dark-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--dark-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--dark-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--dark-rgb), 0);
+  }
+}

package/dist/assest/css/css/button/variant/filled/core.css

@@ -0,0 +1,84 @@
+@import url("./animation.css");
+
+.ar-button.filled {
+  border-color: transparent;
+  color: var(--white);
+}
+
+.ar-button.filled.disabled {
+  background-color: var(--gray-100);
+  color: var(--gray-500);
+  border: solid 1px var(--gray-500);
+}
+.ar-button.filled:not(.disabled):active::before {
+  position: absolute;
+  inset: 0;
+  content: "";
+  background-color: rgba(var(--black-rgb), 0.25);
+}
+
+.ar-button.filled:not(.disabled).primary {
+  background-color: var(--primary);
+}
+.ar-button.filled:not(.disabled).primary.active {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: filled-primary-active-animation ease-in-out 750ms 0s 1 normal both;
+}
+
+.ar-button.filled:not(.disabled).secondary {
+  background-color: var(--secondary);
+}
+.ar-button.filled:not(.disabled).secondary.active {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: filled-secondary-active-animation ease-in-out 750ms 0s 1 normal both;
+}
+
+.ar-button.filled:not(.disabled).success {
+  background-color: var(--success);
+}
+.ar-button.filled:not(.disabled).success.active {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: filled-success-active-animation ease-in-out 750ms 0s 1 normal both;
+}
+
+.ar-button.filled:not(.disabled).warning {
+  background-color: var(--warning);
+  color: var(--warning-font-color);
+}
+.ar-button.filled:not(.disabled).warning.active {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: filled-warning-active-animation ease-in-out 750ms 0s 1 normal both;
+}
+
+.ar-button.filled:not(.disabled).danger {
+  background-color: var(--danger);
+}
+.ar-button.filled:not(.disabled).danger.active {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: filled-danger-active-animation ease-in-out 750ms 0s 1 normal both;
+}
+
+.ar-button.filled:not(.disabled).information {
+  background-color: var(--information);
+}
+.ar-button.filled:not(.disabled).information.active {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: filled-information-active-animation ease-in-out 750ms 0s 1 normal both;
+}
+
+.ar-button.filled:not(.disabled).light {
+  background-color: var(--light);
+  color: var(--gray-800);
+}
+.ar-button.filled:not(.disabled).light.active {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: filled-light-active-animation ease-in-out 750ms 0s 1 normal both;
+}
+
+.ar-button.filled:not(.disabled).dark {
+  background-color: var(--dark);
+}
+.ar-button.filled:not(.disabled).dark.active {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: filled-dark-active-animation ease-in-out 750ms 0s 1 normal both;
+}

package/dist/assest/css/css/button/variant/outlined/animation.css

@@ -0,0 +1,95 @@
+@keyframes outlined-primary-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--primary-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--primary-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--primary-rgb), 0);
+  }
+}
+
+@keyframes outlined-secondary-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--secondary-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--secondary-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--secondary-rgb), 0);
+  }
+}
+
+@keyframes outlined-success-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--success-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--success-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--success-rgb), 0);
+  }
+}
+
+@keyframes outlined-warning-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--warning-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--warning-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--warning-rgb), 0);
+  }
+}
+
+@keyframes outlined-danger-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--danger-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--danger-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--danger-rgb), 0);
+  }
+}
+
+@keyframes outlined-information-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--information-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--information-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--information-rgb), 0);
+  }
+}
+
+@keyframes outlined-light-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--dark-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--dark-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--dark-rgb), 0);
+  }
+}
+
+@keyframes outlined-dark-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--dark-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--dark-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--dark-rgb), 0);
+  }
+}

package/dist/assest/css/css/button/variant/outlined/border.css

@@ -0,0 +1,64 @@
+.ar-button.outlined.border-style-solid {
+  border-style: solid;
+}
+.ar-button.outlined.border-style-dashed {
+  border-style: dashed;
+}
+.ar-button.outlined.border-style-none {
+  border-style: none;
+}
+
+.ar-button.outlined.border-style-none:not(.disabled)::before {
+  position: absolute;
+  inset: 0;
+  content: "";
+}
+
+.ar-button.outlined.primary.border-style-none:not(.disabled):hover::before {
+  background-color: rgba(var(--primary-rgb), 0.1);
+}
+.ar-button.outlined.primary.border-style-none:not(.disabled):active::before {
+  background-color: rgba(var(--primary-rgb), 0.2);
+}
+
+.ar-button.outlined.secondary.border-style-none:not(.disabled):hover::before {
+  background-color: rgba(var(--secondary-rgb), 0.1);
+}
+.ar-button.outlined.secondary.border-style-none:not(.disabled):active::before {
+  background-color: rgba(var(--secondary-rgb), 0.2);
+}
+
+.ar-button.outlined.success.border-style-none:not(.disabled):hover::before {
+  background-color: rgba(var(--success-rgb), 0.1);
+}
+.ar-button.outlined.success.border-style-none:not(.disabled):active::before {
+  background-color: rgba(var(--success-rgb), 0.2);
+}
+
+.ar-button.outlined.warning.border-style-none:not(.disabled):hover::before {
+  background-color: rgba(var(--warning-rgb), 0.1);
+}
+.ar-button.outlined.warning.border-style-none:not(.disabled):active::before {
+  background-color: rgba(var(--warning-rgb), 0.2);
+}
+
+.ar-button.outlined.danger.border-style-none:not(.disabled):hover::before {
+  background-color: rgba(var(--danger-rgb), 0.1);
+}
+.ar-button.outlined.danger.border-style-none:not(.disabled):active::before {
+  background-color: rgba(var(--danger-rgb), 0.2);
+}
+
+.ar-button.outlined.information.border-style-none:not(.disabled):hover::before {
+  background-color: rgba(var(--information-rgb), 0.1);
+}
+.ar-button.outlined.information.border-style-none:not(.disabled):active::before {
+  background-color: rgba(var(--information-rgb), 0.2);
+}
+
+.ar-button.outlined.dark.border-style-none:not(.disabled):hover::before {
+  background-color: rgba(var(--dark-rgb), 0.1);
+}
+.ar-button.outlined.dark.border-style-none:not(.disabled):active::before {
+  background-color: rgba(var(--dark-rgb), 0.2);
+}