@acorex/styles 5.9.0 → 6.0.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

@@ -51,7 +51,70 @@
     }
 }
 
+@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-default 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 {