@acorex/styles 5.8.0 → 5.9.0

package/src/icons/style.scss

@@ -1,215 +1,215 @@
-@import "variables";
-
-@font-face {
-  font-family: '#{$icomoon-font-family}';
-  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?bc3pev');
-  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?bc3pev#iefix') format('embedded-opentype'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?bc3pev') format('truetype'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?bc3pev') format('woff'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?bc3pev##{$icomoon-font-family}') format('svg');
-  font-weight: normal;
-  font-style: normal;
-  font-display: block;
-}
-
-[class^="ax-ic-"], [class*=" ax-ic-"] {
-  /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: '#{$icomoon-font-family}' !important;
-  speak: never;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.ax-ic-empty-box {
-  &:before {
-    content: $ax-ic-empty-box; 
-  }
-}
-.ax-ic-colorize {
-  &:before {
-    content: $ax-ic-colorize; 
-  }
-}
-.ax-ic-pase {
-  &:before {
-    content: $ax-ic-pase; 
-  }
-}
-.ax-ic-copy {
-  &:before {
-    content: $ax-ic-copy; 
-  }
-}
-.ax-ic-star-filled {
-  &:before {
-    content: $ax-ic-star-filled; 
-  }
-}
-.ax-ic-star-half-filled {
-  &:before {
-    content: $ax-ic-star-half-filled; 
-  }
-}
-.ax-ic-star-outline {
-  &:before {
-    content: $ax-ic-star-outline; 
-  }
-}
-.ax-ic-remove {
-  &:before {
-    content: $ax-ic-remove; 
-  }
-}
-.ax-ic-plus {
-  &:before {
-    content: $ax-ic-plus; 
-  }
-}
-.ax-ic-magnify {
-  &:before {
-    content: $ax-ic-magnify; 
-  }
-}
-.ax-ic-arrow-circle {
-  &:before {
-    content: $ax-ic-arrow-circle; 
-  }
-}
-.ax-ic-arrow-circle-fill {
-  &:before {
-    content: $ax-ic-arrow-circle-fill; 
-  }
-}
-.ax-ic-arrow-half {
-  &:before {
-    content: $ax-ic-arrow-half; 
-  }
-}
-.ax-ic-arrow-fill {
-  &:before {
-    content: $ax-ic-arrow-fill; 
-  }
-}
-.ax-ic-arrow {
-  &:before {
-    content: $ax-ic-arrow; 
-  }
-}
-.ax-ic-unfold {
-  &:before {
-    content: $ax-ic-unfold; 
-  }
-}
-.ax-ic-half-arrow {
-  &:before {
-    content: $ax-ic-half-arrow; 
-  }
-}
-.ax-ic-fullscreen {
-  &:before {
-    content: $ax-ic-fullscreen; 
-  }
-}
-.ax-ic-close-fullscreen {
-  &:before {
-    content: $ax-ic-close-fullscreen; 
-  }
-}
-.ax-ic-fold {
-  &:before {
-    content: $ax-ic-fold; 
-  }
-}
-.ax-ic-eye {
-  &:before {
-    content: $ax-ic-eye; 
-  }
-}
-.ax-ic-eye-off {
-  &:before {
-    content: $ax-ic-eye-off; 
-  }
-}
-.ax-ic-calendar {
-  &:before {
-    content: $ax-ic-calendar; 
-  }
-}
-.ax-ic-time {
-  &:before {
-    content: $ax-ic-time; 
-  }
-}
-.ax-ic-check {
-  &:before {
-    content: $ax-ic-check; 
-  }
-}
-.ax-ic-check-filled {
-  &:before {
-    content: $ax-ic-check-filled; 
-  }
-}
-.ax-ic-chevron {
-  &:before {
-    content: $ax-ic-chevron; 
-  }
-}
-.ax-ic-close {
-  &:before {
-    content: $ax-ic-close; 
-  }
-}
-.ax-ic-error-filled {
-  &:before {
-    content: $ax-ic-error-filled; 
-  }
-}
-.ax-ic-chevron-page {
-  &:before {
-    content: $ax-ic-chevron-page; 
-  }
-}
-.ax-ic-info-filled {
-  &:before {
-    content: $ax-ic-info-filled; 
-  }
-}
-.ax-ic-chevron-double {
-  &:before {
-    content: $ax-ic-chevron-double; 
-  }
-}
-.ax-ic-menu {
-  &:before {
-    content: $ax-ic-menu; 
-  }
-}
-.ax-ic-more {
-  &:before {
-    content: $ax-ic-more; 
-  }
-}
-.ax-ic-warning-filled {
-  &:before {
-    content: $ax-ic-warning-filled; 
-  }
-}
-.ax-ic-chevron-page-filled {
-  &:before {
-    content: $ax-ic-chevron-page-filled; 
-  }
-}
-.ax-ic-calendar-today {
-  &:before {
-    content: $ax-ic-calendar-today; 
-  }
-}
-
+@import "variables";
+
+@font-face {
+  font-family: '#{$icomoon-font-family}';
+  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?bc3pev');
+  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?bc3pev#iefix') format('embedded-opentype'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?bc3pev') format('truetype'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?bc3pev') format('woff'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?bc3pev##{$icomoon-font-family}') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="ax-ic-"], [class*=" ax-ic-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: '#{$icomoon-font-family}' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.ax-ic-empty-box {
+  &:before {
+    content: $ax-ic-empty-box; 
+  }
+}
+.ax-ic-colorize {
+  &:before {
+    content: $ax-ic-colorize; 
+  }
+}
+.ax-ic-pase {
+  &:before {
+    content: $ax-ic-pase; 
+  }
+}
+.ax-ic-copy {
+  &:before {
+    content: $ax-ic-copy; 
+  }
+}
+.ax-ic-star-filled {
+  &:before {
+    content: $ax-ic-star-filled; 
+  }
+}
+.ax-ic-star-half-filled {
+  &:before {
+    content: $ax-ic-star-half-filled; 
+  }
+}
+.ax-ic-star-outline {
+  &:before {
+    content: $ax-ic-star-outline; 
+  }
+}
+.ax-ic-remove {
+  &:before {
+    content: $ax-ic-remove; 
+  }
+}
+.ax-ic-plus {
+  &:before {
+    content: $ax-ic-plus; 
+  }
+}
+.ax-ic-magnify {
+  &:before {
+    content: $ax-ic-magnify; 
+  }
+}
+.ax-ic-arrow-circle {
+  &:before {
+    content: $ax-ic-arrow-circle; 
+  }
+}
+.ax-ic-arrow-circle-fill {
+  &:before {
+    content: $ax-ic-arrow-circle-fill; 
+  }
+}
+.ax-ic-arrow-half {
+  &:before {
+    content: $ax-ic-arrow-half; 
+  }
+}
+.ax-ic-arrow-fill {
+  &:before {
+    content: $ax-ic-arrow-fill; 
+  }
+}
+.ax-ic-arrow {
+  &:before {
+    content: $ax-ic-arrow; 
+  }
+}
+.ax-ic-unfold {
+  &:before {
+    content: $ax-ic-unfold; 
+  }
+}
+.ax-ic-half-arrow {
+  &:before {
+    content: $ax-ic-half-arrow; 
+  }
+}
+.ax-ic-fullscreen {
+  &:before {
+    content: $ax-ic-fullscreen; 
+  }
+}
+.ax-ic-close-fullscreen {
+  &:before {
+    content: $ax-ic-close-fullscreen; 
+  }
+}
+.ax-ic-fold {
+  &:before {
+    content: $ax-ic-fold; 
+  }
+}
+.ax-ic-eye {
+  &:before {
+    content: $ax-ic-eye; 
+  }
+}
+.ax-ic-eye-off {
+  &:before {
+    content: $ax-ic-eye-off; 
+  }
+}
+.ax-ic-calendar {
+  &:before {
+    content: $ax-ic-calendar; 
+  }
+}
+.ax-ic-time {
+  &:before {
+    content: $ax-ic-time; 
+  }
+}
+.ax-ic-check {
+  &:before {
+    content: $ax-ic-check; 
+  }
+}
+.ax-ic-check-filled {
+  &:before {
+    content: $ax-ic-check-filled; 
+  }
+}
+.ax-ic-chevron {
+  &:before {
+    content: $ax-ic-chevron; 
+  }
+}
+.ax-ic-close {
+  &:before {
+    content: $ax-ic-close; 
+  }
+}
+.ax-ic-error-filled {
+  &:before {
+    content: $ax-ic-error-filled; 
+  }
+}
+.ax-ic-chevron-page {
+  &:before {
+    content: $ax-ic-chevron-page; 
+  }
+}
+.ax-ic-info-filled {
+  &:before {
+    content: $ax-ic-info-filled; 
+  }
+}
+.ax-ic-chevron-double {
+  &:before {
+    content: $ax-ic-chevron-double; 
+  }
+}
+.ax-ic-menu {
+  &:before {
+    content: $ax-ic-menu; 
+  }
+}
+.ax-ic-more {
+  &:before {
+    content: $ax-ic-more; 
+  }
+}
+.ax-ic-warning-filled {
+  &:before {
+    content: $ax-ic-warning-filled; 
+  }
+}
+.ax-ic-chevron-page-filled {
+  &:before {
+    content: $ax-ic-chevron-page-filled; 
+  }
+}
+.ax-ic-calendar-today {
+  &:before {
+    content: $ax-ic-calendar-today; 
+  }
+}
+

package/src/icons/variables.scss

@@ -1,41 +1,41 @@
-$icomoon-font-family: "acorex-icon" !default;
-$icomoon-font-path: "fonts" !default;
-
-$ax-ic-empty-box: "\e924";
-$ax-ic-colorize: "\e921";
-$ax-ic-pase: "\e922";
-$ax-ic-copy: "\e923";
-$ax-ic-star-filled: "\e91e";
-$ax-ic-star-half-filled: "\e91f";
-$ax-ic-star-outline: "\e920";
-$ax-ic-remove: "\e91b";
-$ax-ic-plus: "\e91c";
-$ax-ic-magnify: "\e91d";
-$ax-ic-arrow-circle: "\e911";
-$ax-ic-arrow-circle-fill: "\e912";
-$ax-ic-arrow-half: "\e913";
-$ax-ic-arrow-fill: "\e914";
-$ax-ic-arrow: "\e915";
-$ax-ic-unfold: "\e916";
-$ax-ic-half-arrow: "\e917";
-$ax-ic-fullscreen: "\e918";
-$ax-ic-close-fullscreen: "\e919";
-$ax-ic-fold: "\e91a";
-$ax-ic-eye: "\e901";
-$ax-ic-eye-off: "\e902";
-$ax-ic-calendar: "\e903";
-$ax-ic-time: "\e900";
-$ax-ic-check: "\e904";
-$ax-ic-check-filled: "\e905";
-$ax-ic-chevron: "\e906";
-$ax-ic-close: "\e907";
-$ax-ic-error-filled: "\e908";
-$ax-ic-chevron-page: "\e909";
-$ax-ic-info-filled: "\e90a";
-$ax-ic-chevron-double: "\e90b";
-$ax-ic-menu: "\e90c";
-$ax-ic-more: "\e90d";
-$ax-ic-warning-filled: "\e90e";
-$ax-ic-chevron-page-filled: "\e90f";
-$ax-ic-calendar-today: "\e910";
-
+$icomoon-font-family: "acorex-icon" !default;
+$icomoon-font-path: "fonts" !default;
+
+$ax-ic-empty-box: "\e924";
+$ax-ic-colorize: "\e921";
+$ax-ic-pase: "\e922";
+$ax-ic-copy: "\e923";
+$ax-ic-star-filled: "\e91e";
+$ax-ic-star-half-filled: "\e91f";
+$ax-ic-star-outline: "\e920";
+$ax-ic-remove: "\e91b";
+$ax-ic-plus: "\e91c";
+$ax-ic-magnify: "\e91d";
+$ax-ic-arrow-circle: "\e911";
+$ax-ic-arrow-circle-fill: "\e912";
+$ax-ic-arrow-half: "\e913";
+$ax-ic-arrow-fill: "\e914";
+$ax-ic-arrow: "\e915";
+$ax-ic-unfold: "\e916";
+$ax-ic-half-arrow: "\e917";
+$ax-ic-fullscreen: "\e918";
+$ax-ic-close-fullscreen: "\e919";
+$ax-ic-fold: "\e91a";
+$ax-ic-eye: "\e901";
+$ax-ic-eye-off: "\e902";
+$ax-ic-calendar: "\e903";
+$ax-ic-time: "\e900";
+$ax-ic-check: "\e904";
+$ax-ic-check-filled: "\e905";
+$ax-ic-chevron: "\e906";
+$ax-ic-close: "\e907";
+$ax-ic-error-filled: "\e908";
+$ax-ic-chevron-page: "\e909";
+$ax-ic-info-filled: "\e90a";
+$ax-ic-chevron-double: "\e90b";
+$ax-ic-menu: "\e90c";
+$ax-ic-more: "\e90d";
+$ax-ic-warning-filled: "\e90e";
+$ax-ic-chevron-page-filled: "\e90f";
+$ax-ic-calendar-today: "\e910";
+

package/src/utility/_mixins.scss

@@ -41,80 +41,17 @@
 
 @mixin control-states($type) {
     @if ($type == "editor") {
-        @apply dark:ax-border-white/[0.07] dark:ax-bg-white/[0.07] dark:ax-backdrop-blur-3xl;
+        @apply dark:ax-border-white/10 dark:ax-bg-white/10 dark:ax-backdrop-blur-3xl;
     }
     @if ($type == "editor-disabled") {
-        @apply ax-bg-light-100 ax-text-light-fore dark:ax-border-white/[0.07] dark:ax-bg-white/[0.-04] dark:ax-text-opacity-60 ax-cursor-not-allowed #{!important};
+        @apply ax-bg-light-100 ax-text-light-fore dark:ax-border-white/10 dark:ax-bg-white/[0.-04] dark:ax-text-opacity-60 ax-cursor-not-allowed #{!important};
     }
     @if ($type == "surface") {
-        @apply dark:ax-bg-default-background dark:ax-border-white/[0.16] dark:ax-shadow-md;
+        @apply dark:ax-bg-default-background dark:ax-border-white/10 dark:ax-shadow-md;
     }
 }
 
-@mixin color-look($color, $look) {
-    @if ($look == "default") {
-        @if ($color == "light") {
-            @apply ax-bg-#{$color}-100 ax-text-#{$color}-fore;
-        } @else {
-            @apply ax-bg-#{$color}-500 ax-text-#{$color}-fore;
-        }
-        .ax-alert-progress{
-            @apply ax-bg-#{$color}-800;
-        }
-    }
-    @if ($look == "outline") {
-        @apply ax-bg-transparent ax-text-#{$color}-500 ax-border ax-rounded-md ax-border-#{$color}-500;
-        ax-header {
-            @apply ax-bg-#{$color}-50;
-        }
-        .ax-alert-progress{
-            @apply ax-bg-#{$color}-100;
-        }
-    }
-    @if ($look == "twotone") {
-        @apply ax-bg-#{$color}-100 ax-text-#{$color}-500;
-        .ax-alert-progress{
-            @apply ax-bg-#{$color}-500;
-        }
-    }
-    @if ($look == "blank") {
-        @apply ax-bg-transparent ax-text-#{$color}-500;
-        .ax-alert-progress{
-            @apply ax-bg-#{$color}-100;
-        }
-        
-    }
-}
-
-@mixin color-look-generator() {
-    $colors: ("primary", "secondary", "success", "warning", "danger", "info", "light", "dark");
-    $looks: ("default", "outline", "twotone", "blank");
-    @each $c in $colors {
-        @each $l in $looks {
-            &.ax-#{$c}-#{$l} {
-                @include color-look($c, $l);
-            }
-        }
-    }
-}
 
-// @mixin button-on-colorful-bg {
-//     ax-button {
-//         @apply ax-bg-black/20 ax-text-sm ax-border-0 ax-outline-0 ax-ring-0 ax-ring-transparent ax-h-auto ax-shadow-none ax-font-semibold #{!important};
-//         & > button {
-//             @apply ax-py-1.5 ax-px-2;
-//         }
-//         &:focus,
-//         &:focus-within,
-//         &:active,
-//         &:hover {
-//             @apply ax-bg-black/30 ax-ring-0 ax-border-0 ax-outline-0 ax-shadow-none ax-ring-transparent ax-ring-offset-0  #{!important};
-//         }
-//         &:active {
-//             @apply ax-bg-black/40 #{!important};
-//         }
-//     }
-// }
 
 @mixin rtl {
     .ax-rtl {

package/src/utility/index.scss

@@ -1,20 +1,20 @@
 @layer utilities {
     .ax-sm {
-        --ax-base-size: 6px;
+        --ax-base-size: calc(var(--ax-size) - 2px);
         font-size: 0.75rem;
         * {
             font-size: 0.75rem;
         }
     }
     .ax-md {
-        --ax-base-size: 8px;
+        --ax-base-size: var(--ax-size);
         font-size: 1rem;
         * {
             font-size: 1rem;
         }
     }
     .ax-lg {
-        --ax-base-size: 10px;
+        --ax-base-size: calc(var(--ax-size) + 2px);
         font-size: 1.125rem;
         * {
             font-size: 1.125rem;