@acorex/styles 7.0.16 → 7.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acorex/styles",
-  "version": "7.0.16",
+  "version": "7.0.18",
   "description": "",
   "main": "index.js",
   "author": "",

package/src/base/_theme.scss

@@ -1,19 +1,18 @@
 @mixin light-variables() {
-    --ax-color-border-default: 0, 0, 0, 0.12;
-    --ax-color-background-default: 250, 250, 250;
-    --ax-color-text-default: 18, 18, 18;
-    --ax-color-surface: 255, 255, 255;
-    --ax-color-on-surface: 242, 242, 242;
-    --ax-color-ghost: 0, 0, 0;
-    --ax-color-ghost-fore: 255, 255, 255;
+  --ax-color-border-default: 30, 41, 59, 0.12;
+  --ax-color-background-default: 250, 250, 250;
+  --ax-color-text-default: 18, 18, 18;
+  --ax-color-surface: 255, 255, 255;
+  --ax-color-on-surface: 242, 242, 242;
+  --ax-color-ghost: 30, 41, 59;
+  --ax-color-ghost-fore: 255, 255, 255;
 }
 @mixin dark-variables() {
-    --ax-color-background-default: 21, 27, 36;
-    --ax-color-text-default: 224, 224, 224;
-    --ax-color-border-default: 255, 255, 255, 0.12;
-    --ax-color-surface: 23, 31, 45;
-    --ax-color-on-surface: 25, 36, 54;
-    --ax-color-ghost: 255, 255, 255;
-    --ax-color-ghost-fore: 0, 0, 0;
-
+  --ax-color-background-default: 21, 27, 36;
+  --ax-color-text-default: 224, 224, 224;
+  --ax-color-border-default: 255, 255, 255, 0.12;
+  --ax-color-surface: 23, 31, 45;
+  --ax-color-on-surface: 25, 36, 54;
+  --ax-color-ghost: 255, 255, 255;
+  --ax-color-ghost-fore: 0, 0, 0;
 }

package/src/base/index.scss

@@ -1,26 +1,27 @@
-@import "../mixins/index.scss";
-@import "./normalize";
-@import "./theme";
+@import '../mixins/index.scss';
+@import './normalize';
+@import './theme';
 
 :root {
-    --ax-size-default: 2.5rem;
-    --ax-rounded-border-default: 0.375rem;
-    @include light-variables();
-    @include color-variable-genterator($theme-colors);
+  --ax-size-default: 2.5rem;
+  --ax-rounded-border-default: 0.375rem;
+  --ax-overlay-full-width: 93;
+  @include light-variables();
+  @include color-variable-genterator($theme-colors);
 }
 
 @include darkMode() {
-    &:root {
-        @include dark-variables();
-    }
+  &:root {
+    @include dark-variables();
+  }
 
-    .cdk-overlay-neutral-backdrop {
-        background: rgba(0, 0, 0, 0.5) !important;
-    }
+  .cdk-overlay-neutral-backdrop {
+    background: rgba(0, 0, 0, 0.5) !important;
+  }
 }
 
 html,
 body {
-    background-color: rgb(var(--ax-color-background-default));
-    color: rgba(var(--ax-color-text-default));
-}
+  background-color: rgb(var(--ax-color-background-default));
+  color: rgba(var(--ax-color-text-default));
+}

package/src/icons/Read Me.txt

@@ -1,7 +1,7 @@
-Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
-
-To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
-
-You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
-
-You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.
+Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
+
+To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
+
+You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
+
+You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.

package/src/icons/demo-files/demo.css

@@ -1,152 +1,152 @@
-body {
-  padding: 0;
-  margin: 0;
-  font-family: sans-serif;
-  font-size: 1em;
-  line-height: 1.5;
-  color: #555;
-  background: #fff;
-}
-h1 {
-  font-size: 1.5em;
-  font-weight: normal;
-}
-small {
-  font-size: .66666667em;
-}
-a {
-  color: #e74c3c;
-  text-decoration: none;
-}
-a:hover, a:focus {
-  box-shadow: 0 1px #e74c3c;
-}
-.bshadow0, input {
-  box-shadow: inset 0 -2px #e7e7e7;
-}
-input:hover {
-  box-shadow: inset 0 -2px #ccc;
-}
-input, fieldset {
-  font-family: sans-serif;
-  font-size: 1em;
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-input {
-  color: inherit;
-  line-height: 1.5;
-  height: 1.5em;
-  padding: .25em 0;
-}
-input:focus {
-  outline: none;
-  box-shadow: inset 0 -2px #449fdb;
-}
-.glyph {
-  font-size: 16px;
-  width: 15em;
-  padding-bottom: 1em;
-  margin-right: 4em;
-  margin-bottom: 1em;
-  float: left;
-  overflow: hidden;
-}
-.liga {
-  width: 80%;
-  width: calc(100% - 2.5em);
-}
-.talign-right {
-  text-align: right;
-}
-.talign-center {
-  text-align: center;
-}
-.bgc1 {
-  background: #f1f1f1;
-}
-.fgc1 {
-  color: #999;
-}
-.fgc0 {
-  color: #000;
-}
-p {
-  margin-top: 1em;
-  margin-bottom: 1em;
-}
-.mvm {
-  margin-top: .75em;
-  margin-bottom: .75em;
-}
-.mtn {
-  margin-top: 0;
-}
-.mtl, .mal {
-  margin-top: 1.5em;
-}
-.mbl, .mal {
-  margin-bottom: 1.5em;
-}
-.mal, .mhl {
-  margin-left: 1.5em;
-  margin-right: 1.5em;
-}
-.mhmm {
-  margin-left: 1em;
-  margin-right: 1em;
-}
-.mls {
-  margin-left: .25em;
-}
-.ptl {
-  padding-top: 1.5em;
-}
-.pbs, .pvs {
-  padding-bottom: .25em;
-}
-.pvs, .pts {
-  padding-top: .25em;
-}
-.unit {
-  float: left;
-}
-.unitRight {
-  float: right;
-}
-.size1of2 {
-  width: 50%;
-}
-.size1of1 {
-  width: 100%;
-}
-.clearfix:before, .clearfix:after {
-  content: " ";
-  display: table;
-}
-.clearfix:after {
-  clear: both;
-}
-.hidden-true {
-  display: none;
-}
-.textbox0 {
-  width: 3em;
-  background: #f1f1f1;
-  padding: .25em .5em;
-  line-height: 1.5;
-  height: 1.5em;
-}
-#testDrive {
-  display: block;
-  padding-top: 24px;
-  line-height: 1.5;
-}
-.fs0 {
-  font-size: 16px;
-}
-.fs1 {
-  font-size: 32px;
-}
-
+body {
+  padding: 0;
+  margin: 0;
+  font-family: sans-serif;
+  font-size: 1em;
+  line-height: 1.5;
+  color: #555;
+  background: #fff;
+}
+h1 {
+  font-size: 1.5em;
+  font-weight: normal;
+}
+small {
+  font-size: .66666667em;
+}
+a {
+  color: #e74c3c;
+  text-decoration: none;
+}
+a:hover, a:focus {
+  box-shadow: 0 1px #e74c3c;
+}
+.bshadow0, input {
+  box-shadow: inset 0 -2px #e7e7e7;
+}
+input:hover {
+  box-shadow: inset 0 -2px #ccc;
+}
+input, fieldset {
+  font-family: sans-serif;
+  font-size: 1em;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+input {
+  color: inherit;
+  line-height: 1.5;
+  height: 1.5em;
+  padding: .25em 0;
+}
+input:focus {
+  outline: none;
+  box-shadow: inset 0 -2px #449fdb;
+}
+.glyph {
+  font-size: 16px;
+  width: 15em;
+  padding-bottom: 1em;
+  margin-right: 4em;
+  margin-bottom: 1em;
+  float: left;
+  overflow: hidden;
+}
+.liga {
+  width: 80%;
+  width: calc(100% - 2.5em);
+}
+.talign-right {
+  text-align: right;
+}
+.talign-center {
+  text-align: center;
+}
+.bgc1 {
+  background: #f1f1f1;
+}
+.fgc1 {
+  color: #999;
+}
+.fgc0 {
+  color: #000;
+}
+p {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+.mvm {
+  margin-top: .75em;
+  margin-bottom: .75em;
+}
+.mtn {
+  margin-top: 0;
+}
+.mtl, .mal {
+  margin-top: 1.5em;
+}
+.mbl, .mal {
+  margin-bottom: 1.5em;
+}
+.mal, .mhl {
+  margin-left: 1.5em;
+  margin-right: 1.5em;
+}
+.mhmm {
+  margin-left: 1em;
+  margin-right: 1em;
+}
+.mls {
+  margin-left: .25em;
+}
+.ptl {
+  padding-top: 1.5em;
+}
+.pbs, .pvs {
+  padding-bottom: .25em;
+}
+.pvs, .pts {
+  padding-top: .25em;
+}
+.unit {
+  float: left;
+}
+.unitRight {
+  float: right;
+}
+.size1of2 {
+  width: 50%;
+}
+.size1of1 {
+  width: 100%;
+}
+.clearfix:before, .clearfix:after {
+  content: " ";
+  display: table;
+}
+.clearfix:after {
+  clear: both;
+}
+.hidden-true {
+  display: none;
+}
+.textbox0 {
+  width: 3em;
+  background: #f1f1f1;
+  padding: .25em .5em;
+  line-height: 1.5;
+  height: 1.5em;
+}
+#testDrive {
+  display: block;
+  padding-top: 24px;
+  line-height: 1.5;
+}
+.fs0 {
+  font-size: 16px;
+}
+.fs1 {
+  font-size: 32px;
+}
+

package/src/icons/demo-files/demo.js

@@ -1,30 +1,30 @@
-if (!('boxShadow' in document.body.style)) {
-    document.body.setAttribute('class', 'noBoxShadow');
-}
-
-document.body.addEventListener("click", function(e) {
-    var target = e.target;
-    if (target.tagName === "INPUT" &&
-        target.getAttribute('class').indexOf('liga') === -1) {
-        target.select();
-    }
-});
-
-(function() {
-    var fontSize = document.getElementById('fontSize'),
-        testDrive = document.getElementById('testDrive'),
-        testText = document.getElementById('testText');
-    function updateTest() {
-        testDrive.innerHTML = testText.value || String.fromCharCode(160);
-        if (window.icomoonLiga) {
-            window.icomoonLiga(testDrive);
-        }
-    }
-    function updateSize() {
-        testDrive.style.fontSize = fontSize.value + 'px';
-    }
-    fontSize.addEventListener('change', updateSize, false);
-    testText.addEventListener('input', updateTest, false);
-    testText.addEventListener('change', updateTest, false);
-    updateSize();
-}());
+if (!('boxShadow' in document.body.style)) {
+    document.body.setAttribute('class', 'noBoxShadow');
+}
+
+document.body.addEventListener("click", function(e) {
+    var target = e.target;
+    if (target.tagName === "INPUT" &&
+        target.getAttribute('class').indexOf('liga') === -1) {
+        target.select();
+    }
+});
+
+(function() {
+    var fontSize = document.getElementById('fontSize'),
+        testDrive = document.getElementById('testDrive'),
+        testText = document.getElementById('testText');
+    function updateTest() {
+        testDrive.innerHTML = testText.value || String.fromCharCode(160);
+        if (window.icomoonLiga) {
+            window.icomoonLiga(testDrive);
+        }
+    }
+    function updateSize() {
+        testDrive.style.fontSize = fontSize.value + 'px';
+    }
+    fontSize.addEventListener('change', updateSize, false);
+    testText.addEventListener('input', updateTest, false);
+    testText.addEventListener('change', updateTest, false);
+    updateSize();
+}());

package/src/shared/_check-box.scss

@@ -1,48 +1,47 @@
-@import "../mixins/index.scss";
+@import '../mixins/index.scss';
 
-@include darkMode(){
-    .ax-checkbox {
-        background-color: rgba(var(--ax-color-ghost), 0.05);
-      
-    }
+@include darkMode() {
+  .ax-checkbox {
+    background-color: rgba(var(--ax-color-ghost), 0.05);
+  }
 }
 .ax-checkbox {
-    width: 1rem;
-    height: 1rem;
-    border: 1px solid;
-    border-color: rgba(var(--ax-color-border-default));
-    background-color: rgb(var(--ax-color-surface));
-    border-radius: 0.2rem;
-    margin: 0;
-    outline: none;
-    vertical-align: middle;
-    appearance: none;
+  width: 1rem;
+  height: 1rem;
+  border: 1px solid;
+  border-color: rgba(var(--ax-color-ghost), 0.3);
+  background-color: rgb(var(--ax-color-surface));
+  border-radius: 0.2rem;
+  margin: 0;
+  outline: none;
+  vertical-align: middle;
+  appearance: none;
 
-    &:checked,
-    &:indeterminate {
-        border-color: rgba(var(--ax-color-primary)) !important;
-        background-color: rgba(var(--ax-color-primary)) !important;
-        background-repeat: no-repeat;
-        background-size: contain;
-    }
+  &:checked,
+  &:indeterminate {
+    border-color: rgba(var(--ax-color-primary)) !important;
+    background-color: rgba(var(--ax-color-primary)) !important;
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
 
-    &:checked {
-        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
-    }
+  &:checked {
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+  }
 
-    &:indeterminate {
-        background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==");
-    }
+  &:indeterminate {
+    background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==');
+  }
 
-    &:focus-visible {
-        outline-offset: 2px;
-        outline-width: 2px;
-        outline-style: solid;
-        outline-color: rgba(var(--ax-color-primary));
-    }
+  &:focus-visible {
+    outline-offset: 2px;
+    outline-width: 2px;
+    outline-style: solid;
+    outline-color: rgba(var(--ax-color-primary));
+  }
 
-    &:disabled {
-        cursor: not-allowed;
-        opacity: 0.5;
-    }
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
 }

package/src/shared/_decoration.scss

@@ -1,45 +1,42 @@
 .ax-decoration-container,
 ax-header,
 ax-footer {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+  & > ax-prefix,
+  & > ax-suffix {
     display: flex;
-    justify-content: space-between;
+    flex: 1 1 auto;
+    flex-direction: row;
     gap: 0.5rem;
-    & > ax-prefix,
-    & > ax-suffix {
-        display: flex;
-        flex: 1 1 auto;
-        flex-direction: row;
-        gap: 0.5rem;
-        align-items: center;
-    }
-    & > ax-prefix {
-        order: -9999;
-        justify-content: flex-start;
-        align-items: center;
-    }
-    & > ax-suffix {
-        order: 9999;
-        justify-content: flex-end;
-        align-items: center;
-    }
+    align-items: center;
+  }
+  & > ax-prefix {
+    order: -9999;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  & > ax-suffix {
+    order: 9999;
+    justify-content: flex-end;
+    align-items: center;
+  }
 }
 
-ax-icon{
-    display: contents;
-}
 ax-close-button {
-    width: 1.5rem;
-    height: 1.5rem;
-    display: grid;
-    place-items: center;
-    cursor: pointer;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
 
-    ax-icon {
-        color: rgba(var(--ax-color-ghost), 0.5);
-        font-size: 1.25rem;
+  ax-icon {
+    color: rgba(var(--ax-color-ghost), 0.5);
+    font-size: 1.25rem;
 
-        &:hover {
-            color: rgba(var(--ax-color-ghost), 0.75);
-        }
+    &:hover {
+      color: rgba(var(--ax-color-ghost), 0.75);
     }
+  }
 }

package/src/shared/_drop-down.scss

@@ -1,163 +1,157 @@
-@import "../variables/index.scss";
+@import '../variables/index.scss';
 
 @mixin drop-down-item-apperance() {
-    @each $color in $color_names {
-        &.ax-#{$color}-default {
-            background-color: transparent;
-            color: rgb(var(--ax-color-#{$color}-500));
-            border: transparent;
-
-            &:hover,
-            &:focus {
-
-                background-color: rgba(var(--ax-color-ghost), 0.05);
-                color: rgb(var(--ax-color-#{$color}-600));
-            }
-
-            &:active {
-                color: rgb(var(--ax-color-#{$color}-400));
-            }
-
-            &.ax-state-selected {
-                background-color: rgb(var(--ax-color-#{$color}-500));
-                color: rgb(var(--ax-color-#{$color}-fore));
-            }
-        }
+  @each $color in $color_names {
+    &.ax-#{$color}-default {
+      background-color: transparent;
+      color: rgb(var(--ax-color-#{$color}-500));
+      border: transparent;
+
+      &:hover,
+      &:focus {
+        background-color: rgba(var(--ax-color-ghost), 0.05);
+        color: rgb(var(--ax-color-#{$color}-600));
+      }
+
+      &:active {
+        color: rgb(var(--ax-color-#{$color}-400));
+      }
+
+      &.ax-state-selected {
+        background-color: rgb(var(--ax-color-#{$color}-500));
+        color: rgb(var(--ax-color-#{$color}-fore));
+      }
     }
-
-    &.ax-ghost-default {
-        background-color: transparent;
-        color: rgb(var(--ax-color-ghost));
-        border: transparent;
-
-        &:hover,
-        &:focus,
-        &:active {
-            background-color: rgba(var(--ax-color-ghost), 0.05);
-            color: rgb(var(--ax-color-ghost), 0.87);
-        }
-
-        &.ax-state-selected {
-            background-color: rgb(var(--ax-color-primary-500));
-            color: rgb(var(--ax-color-primary-fore));
-        }
+  }
+
+  &.ax-ghost-default {
+    background-color: transparent;
+    color: rgb(var(--ax-color-ghost));
+    border: transparent;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: rgba(var(--ax-color-ghost), 0.05);
+      color: rgb(var(--ax-color-ghost), 0.87);
     }
 
+    &.ax-state-selected {
+      background-color: rgb(var(--ax-color-primary-500));
+      color: rgb(var(--ax-color-primary-fore));
+    }
+  }
 }
 
-
 .ax-drop-down {
-    display: contents;
-
-    .ax-dropdown-content {
-        display: flex;
-        align-items: center;
-        flex: 1 1 auto;
-        font-size: 0.875rem;
-        overflow-y: hidden;
-        overflow-x: auto;
-
-        &.ax-state-disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
+  display: contents;
+
+  .ax-dropdown-content {
+    display: flex;
+    align-items: center;
+    flex: 1 1 auto;
+    font-size: 0.875rem;
+    overflow-y: hidden;
+    overflow-x: auto;
+
+    &.ax-state-disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
     }
+  }
 }
 
 .ax-overlay-pane {
+  background-color: rgba(var(--ax-color-surface));
+  border: 1px solid;
+  border-color: rgba(var(--ax-color-border-default));
+  border-radius: var(--ax-rounded-border-default);
+  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0px 4px 6px -2px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+
+  ax-header,
+  ax-footer {
     background-color: rgba(var(--ax-color-surface));
-    border: 1px solid;
-    border-color: rgba(var(--ax-color-border-default));
-    border-radius: var(--ax-rounded-border-default);
-    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
-    overflow: hidden;
+    padding: 0.75rem;
+  }
 
-    ax-header,
-    ax-footer {
-        background-color: rgba(var(--ax-color-surface));
-        padding: 0.75rem;
-        border-color: rgba(var(--ax-color-border-default));
-        border-top: 1px solid;
+  @include media('phone') {
+    border-bottom-right-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
 
-    }
+  &.ax-overlay-center {
+    height: fit-content;
+    max-height: 90vh;
+    width: 80vw;
+  }
 
-    @include media("phone") {
-        border-bottom-right-radius: 0px;
-        border-bottom-left-radius: 0px;
-    }
+  &.ax-overlay-actionsheet {
+    background-color: rgba(var(--ax-color-surface));
+    width: 100%;
+    height: auto;
+    max-height: 85vh;
 
-    &.ax-overlay-center {
-        height: fit-content;
-        max-height: 90vh;
-        width: 80vw;
+    &.ax-full {
+      max-height: 95vh;
+      height: 95vh;
     }
+  }
 
-    &.ax-overlay-actionsheet {
-        background-color: rgba(var(--ax-color-surface));
-        width: 100%;
-        height: auto;
-        max-height: 85vh;
+  &.ax-overlay-full {
+    width: 100vw;
+    height: 100vh;
+  }
 
-        &.ax-full {
-            max-height: 95vh;
-            height: 95vh;
-        }
-    }
+  &.ax-dropdown-list {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid;
+    border-color: rgba(var(--ax-color-border-default));
+    border-radius: var(--ax-rounded-border-default);
+    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
+      0px 4px 6px -2px rgba(0, 0, 0, 0.05);
+    padding: 0.5rem 0;
+
+    .ax-button-item {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: flex-start;
+      padding: 0.5rem;
+      padding-inline-start: 0.5rem;
+      padding-inline-end: 1rem;
+      font-size: 0.875rem;
+      color: rgba(var(--ax-color-text-default));
+      user-select: none;
+      cursor: pointer;
+
+      &.ax-divide {
+        border: 1px solid;
+        border-color: rgba(var(--ax-color-border-default));
+      }
 
-    &.ax-overlay-full {
-        width: 100vw;
-        height: 100vh;
-    }
+      &.ax-state-disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
 
-    &.ax-dropdown-list {
+      ax-prefix,
+      ax-suffix {
         display: flex;
-        flex-direction: column;
-        border: 1px solid;
-        border-color: rgba(var(--ax-color-border-default));
-        border-radius: var(--ax-rounded-border-default);
-        box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
-        padding: 0.5rem 0;
-
-        .ax-button-item {
-            position: relative;
-            display: inline-flex;
-            align-items: center;
-            justify-content: flex-start;
-            padding: 0.5rem;
-            padding-inline-start: 0.5rem;
-            padding-inline-end: 1rem;
-            font-size: 0.875rem;
-            color: rgba(var(--ax-color-text-default));
-            user-select: none;
-            cursor: pointer;
-
-            &.ax-divide {
-                border: 1px solid;
-                border-color: rgba(var(--ax-color-border-default));
-
-            }
-
-            &.ax-state-disabled {
-                opacity: 0.5;
-                cursor: not-allowed;
-            }
-
-            ax-prefix,
-            ax-suffix {
-                display: flex;
-                flex-direction: row;
-            }
-
-            ax-prefix {
-                padding-inline-end: 0.5rem;
-            }
-
-            ax-suffix {
-                padding-inline-start: 0.5rem
-            }
-
-            @include drop-down-item-apperance();
-
-        }
+        flex-direction: row;
+      }
+
+      ax-prefix {
+        padding-inline-end: 0.5rem;
+      }
+
+      ax-suffix {
+        padding-inline-start: 0.5rem;
+      }
+
+      @include drop-down-item-apperance();
     }
-}
+  }
+}

package/src/shared/_editor-container.scss

@@ -48,11 +48,8 @@
     color: rgba(var(--ax-color-ghost), 0.63);
   }
   &:focus-within {
-    outline-offset: 0px;
-    outline-width: 1px;
-    outline-style: solid;
-    outline-color: rgb(var(--ax-color-primary-500));
     border-color: rgb(var(--ax-color-primary-500));
+    box-shadow: 0px 0 0px 1px rgb(var(--ax-color-primary-500));
   }
 
   &.ax-button-icon {
@@ -136,7 +133,7 @@
   &.ax-state-error {
     border-color: rgb(var(--ax-color-danger-500));
     &:focus-within {
-      outline-color: rgb(var(--ax-color-danger-500));
+      box-shadow: 0px 0 0px 1px rgb(var(--ax-color-danger-500));
     }
     .ax-input {
       &::placeholder {
@@ -149,7 +146,7 @@
     outline-color: rgb(var(--ax-color-success-500));
     border-color: rgb(var(--ax-color-success-500));
     &:focus-within {
-      outline-color: rgb(var(--ax-color-success-500));
+      box-shadow: 0px 0 0px 1px rgb(var(--ax-color-success-500));
     }
     .ax-input {
       &::placeholder {

package/src/shared/_radio.scss

@@ -1,38 +1,38 @@
-@import "../mixins/index.scss";
+@import '../mixins/index.scss';
 @include darkMode() {
-    .ax-radio {
-        background-color: rgba(var(--ax-color-ghost), 0.05);
-    }
+  .ax-radio {
+    background-color: rgba(var(--ax-color-ghost), 0.05);
+  }
 }
 .ax-radio {
-    width: 1rem;
-    height: 1rem;
-    border: 1px solid;
-    border-color: rgb(var(--ax-color-border-default));
-    border-radius: 999rem;
-    background-color: rgb(var(--ax-color-surface));
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-    vertical-align: middle;
-    appearance: none;
+  width: 1rem;
+  height: 1rem;
+  border: 1px solid;
+  border-color: rgba(var(--ax-color-ghost), 0.3);
+  border-radius: 999rem;
+  background-color: rgb(var(--ax-color-surface));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  vertical-align: middle;
+  appearance: none;
 
-    &:checked {
-        border-color: rgb(var(--ax-color-primary));
-        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
-        background-color: rgb(var(--ax-color-primary));
-        background-repeat: no-repeat;
-        background-size: contain;
-    }
+  &:checked {
+    border-color: rgb(var(--ax-color-primary));
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+    background-color: rgb(var(--ax-color-primary));
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
 
-    &:focus-visible {
-        outline-offset: 2px;
-        outline-width: 2px;
-        outline-style: solid;
-        outline-color: rgba(var(--ax-color-primary));
-    }
+  &:focus-visible {
+    outline-offset: 2px;
+    outline-width: 2px;
+    outline-style: solid;
+    outline-color: rgba(var(--ax-color-primary));
+  }
 
-    &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-    }
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 }

package/src/shared/_skeleton.scss

@@ -1,26 +1,31 @@
 .ax-skeleton {
-    position: relative;
-    overflow: hidden;
-    background-color: rgba(var(--ax-color-ghost),0.05);
-    &.ax-skeleton-animate {
-        &::before {
-            content: "";
-            display: block;
-            position: absolute;
-            top: 0;
-            height: 100%;
-            width: 14rem;
-            left: -200px;
-            background: linear-gradient(to right, transparent 0%, rgba(var(--ax-color-ghost),0.03) 50%, transparent 100%);
-            animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-        }
+  position: relative;
+  overflow: hidden;
+  background-color: rgba(var(--ax-color-ghost), 0.15);
+  &.ax-skeleton-animate {
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      height: 100%;
+      width: 14rem;
+      left: -200px;
+      background: linear-gradient(
+        to right,
+        transparent 0%,
+        rgba(var(--ax-color-ghost), 0.03) 50%,
+        transparent 100%
+      );
+      animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
     }
+  }
 }
 @keyframes load {
-    from {
-        left: -200px;
-    }
-    to {
-        left: 100%;
-    }
-}
+  from {
+    left: -200px;
+  }
+  to {
+    left: 100%;
+  }
+}

package/src/shared/_table.scss

@@ -1,116 +1,110 @@
 @layer components {
-    .ax-table {
-        width: 100%;
-        border-radius: var(--ax-rounded-border-default);
-        border-collapse: collapse;
-        border: 1px solid;
-        border-color: rgb(var(--ax-color-border-default));
-        overflow: hidden;
-        font-size: 0.875rem;
-        td {
-            border-bottom: 1px solid;
-            border-color: rgb(var(--ax-color-border-default));
-            padding: 1rem 1.5rem;
-        }
-        thead {
-            background-color: rgb(var(--ax-color-ghost), 0.05);
-            box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
-            border-bottom: 1px solid;
-            border-color: rgb(var(--ax-color-border-default));
-            th {
-                font-weight: bold;
-                text-align: start;
-                padding: 1rem 1.5rem;
-
-            }
+  .ax-table {
+    width: 100%;
+    border-radius: var(--ax-rounded-border-default);
+    border-spacing: 0px;
+    border-collapse: separate;
+    border: 1px solid;
+    border-color: rgb(var(--ax-color-border-default));
+    overflow: hidden;
+    font-size: 0.875rem;
+    td {
+      border-bottom: 1px solid;
+      border-color: rgb(var(--ax-color-border-default));
+      padding: 1rem;
+    }
+    thead {
+      background-color: rgb(var(--ax-color-ghost), 0.05);
+      border-bottom: 1px solid;
+      border-color: rgb(var(--ax-color-border-default));
+      th {
+        font-weight: 500;
+        text-align: start;
+        padding: 1rem;
+      }
+    }
+    &.ax-table-alternate {
+      tbody {
+        tr {
+          &:nth-child(even) {
+            background-color: rgb(var(--ax-color-ghost), 0.03);
+          }
         }
-        &.ax-table-alternate {
-            tbody {
-                tr {
-                    &:nth-child(even) {
-                        background-color: rgb(var(--ax-color-ghost), 0.03);
-                    }
-                }
-            }
+      }
+    }
+    &.ax-table-bordered {
+      thead {
+        th {
+          border-top: 0 !important;
         }
-        &.ax-table-bordered {
-            thead {
-                th {
-                    border-top: 0 !important;
-                }
+      }
+      tbody {
+        tr {
+          &:last-child {
+            td {
+              border-bottom: 0 !important;
             }
-            tbody {
-                tr {
-                    &:last-child {
-                        td {
-                            border-bottom: 0 !important;
-                        }
-                    }
-                    td {
-                        &:last-child {
-                            border-bottom: 0 !important;
-
-                        }
-                    }
-                }
-            }
-
-            td,
-            th {
-                border: 1px solid;
-                border-color: rgb(var(--ax-color-border-default));
-                &:first-child {
-                    border-inline-start-width: 0px;
-
-                }
-                &:last-child {
-                    border-inline-end-width: 0px;
-
-                }
+          }
+          td {
+            &:last-child {
+              border-bottom: 0 !important;
             }
+          }
         }
-        @media screen and (max-width: 601px) {
-            &.ax-table-responsive {
-                overflow-wrap: break-word;
-                display: block;
-                border: 0px;
-                thead {
-                    position: absolute;
-                    inset-inline-start: -100%;
-                    top: -100%;
+      }
 
-                }
+      td,
+      th {
+        border: 1px solid;
+        border-color: rgb(var(--ax-color-border-default));
+        &:first-child {
+          border-inline-start-width: 0px;
+        }
+        &:last-child {
+          border-inline-end-width: 0px;
+        }
+      }
+    }
+    @media screen and (max-width: 601px) {
+      &.ax-table-responsive {
+        overflow-wrap: break-word;
+        display: block;
+        border: 0px;
+        thead {
+          position: absolute;
+          inset-inline-start: -100%;
+          top: -100%;
+        }
 
-                td {
-                    
-                    display: block;
-                    float: inline-start;
-                    width: 100%;
-                    clear: both;
-                    background: rgb(var(--ax-color-surface));
-                    padding: 0.375rem 0.625rem;
-                    box-sizing: border-box;
-                    &:last-child{
-                        border: 0;
-                    }
-                    &:before {
-                        content: attr(data-label);
-                        display: block;
-                        font-weight: bold;
-                    }
-                }
-                tr {
-                    border: 1px solid;
-                    border-color: rgb(var(--ax-color-border-default));
-                }
-                tr,
-                tbody {
-                    display: block;
-                    width: 100%;
-                    float: inline-start;
-                    margin-bottom: 0.625rem;
-                }
-            }
+        td {
+          display: block;
+          float: inline-start;
+          width: 100%;
+          clear: both;
+          background: rgb(var(--ax-color-surface));
+          padding: 0.375rem 0.625rem;
+          box-sizing: border-box;
+          &:last-child {
+            border: 0;
+          }
+          &:before {
+            content: attr(data-label);
+            display: block;
+            font-weight: bold;
+          }
+        }
+        tr {
+          border: 1px solid;
+          border-color: rgb(var(--ax-color-border-default));
+        }
+        tr,
+        tbody {
+          display: block;
+          width: 100%;
+          float: inline-start;
+          margin-bottom: 0.625rem;
         }
+      }
     }
+  }
 }