@acorex/styles 5.2.0 → 5.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@acorex/styles",
-    "version": "5.2.0",
+    "version": "5.3.0",
     "description": "",
     "main": "index.js",
     "scripts": {

package/src/components/_alert.scss

@@ -1,64 +1,101 @@
 @layer components {
-    .ax-alert {
-        @apply ax-flex ax-bg-light-100 ax-text-light-fore ax-px-3.5 ax-py-4 ax-items-center ax-rounded ;
+    ax-alert {
+        @apply ax-relative ax-flex ax-flex-col ax-bg-light-100 ax-text-light-fore ax-rounded ax-overflow-hidden;
         transition: visibility 0s, opacity 0.5s ease-in-out;
+
         &.ax-state-hidden {
             visibility: hidden;
             opacity: 0;
         }
+
         &.ax-state-visible {
             visibility: visible;
             opacity: 1;
         }
-        .ax-alert-icon {
-            @apply ax-text-xl ax-self-baseline ax-me-2;
+
+        & > ax-header {
+            @apply ax-px-3.5 ax-py-3 ax-bg-transparent ax-border-none ax-justify-start ax-text-sm;
+            & > ax-icon {
+                @apply ax-me-3 ax-text-2xl;
+            }
         }
         .ax-alert-body {
-            @apply ax-ml-2 ax-flex-1;
-            .ax-alert-title {
-                @apply ax-inline-flex ax-text-sm ax-font-bold ax-mb-2.5;
-                a {
-                    @apply ax-text-current ax-font-bold;
-                }
+            @apply ax-flex-1 ax-p-3.5 ax-text-sm;
+            ax-icon {
+                @apply ax-me-3 ax-text-2xl;
             }
-            .ax-alert-content {
+            & > ax-content {
                 @apply ax-block ax-text-sm ax-break-words;
 
                 ul {
                     @apply ax-my-2 ax-ms-5 ax-list-disc;
                 }
+
                 a {
                     @apply ax-text-current ax-font-bold ax-underline;
+
                     &:hover {
                         @apply ax-underline;
                     }
                 }
             }
-            .ax-alert-footer {
-                .ax-alert-buttons {
-                    @apply ax-flex ax-mt-4;
-                    .ax-alert-button {
-                        @apply ax-text-sm ax-font-semibold ax-me-4 ax-cursor-pointer;
-                    }
+
+            ax-suffix {
+                @apply ax-block ax-mt-3;
+                ax-button {
+                    @apply ax-ms-2 ax-me-0 #{!important};
+                }
+            }
+
+            ax-footer {
+                @apply ax-bg-transparent ax-border-none ax-p-0 ax-mt-3;
+                ax-button {
+                    @apply ax-me-2;
                 }
             }
         }
-        .ax-alert-prefix {
-            .ax-alert-buttons {
-                @apply ax-flex;
+        &.ax-light-default {
+            ax-header {
+                @apply ax-bg-light-200;
+            }
+            .ax-alert-body {
+                @applyax-bg-light-300;
+            }
+            .ax-alert-progress {
+                @apply ax-absolute ax-bg-light-400;
             }
         }
-        .ax-alert-suffix {
-            .ax-alert-buttons {
-                @apply ax-flex;
-                .ax-alert-button {
-                    @apply ax-me-0.5 ax-text-sm ax-font-semibold ax-cursor-pointer;
-                    i {
-                        @apply ax-mx-1;
-                    }
+        &.ax-dark-default {
+            ax-button {
+                @apply ax-bg-white/30 #{!important};
+                &:hover,
+                &:active,
+                &:focus {
+                    @apply ax-bg-white/20 #{!important};
                 }
             }
         }
+        &[class*="dark"] {
+            .ax-alert-progress {
+                @apply ax-bg-white/50;
+            }
+        }
+        .ax-alert-progress {
+            @apply ax-absolute ax-bg-black/30 ax-start-0 ax-bottom-0 ax-h-1.5 ax-w-0;
+            animation-duration: 4s;
+            animation-timing-function: linear;
+            animation-name: progressBar;
+        }
+        @keyframes progressBar {
+            0% {
+                width: 100%;
+            }
+            100% {
+                width: 0%;
+            }
+        }
+        @include button-on-colorful-bg();
+
         @include color-look-generator();
     }
 }

package/src/components/_button.scss

@@ -117,7 +117,7 @@
                     @apply ax-ring-2 ax-ring-offset-2 ax-ring-warning-500;
                 }
                 &:active {
-                    @apply ax-bg-warning-600 ax-text-warning-100 ax-ring-2 ax-ring-offset-2 ax-ring-warning-700;
+                    @apply ax-bg-warning-600 ax-text-warning-fore ax-ring-2 ax-ring-offset-2 ax-ring-warning-700;
                 }
             }
 
@@ -249,19 +249,19 @@
             }
         }
         &.ax-warning-twotone {
-            @apply ax-bg-warning-100 ax-text-warning-500 ax-border-transparent dark:ax-bg-warning-300 dark:ax-text-warning-700;
+            @apply ax-bg-warning-100 ax-text-warning-900 ax-border-transparent dark:ax-bg-warning-300 dark:ax-text-warning-fore;
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
-                    @apply ax-bg-warning-200 ax-text-warning-700;
+                    @apply ax-bg-warning-200 ax-text-warning-fore;
                 }
                 &:active {
-                    @apply ax-bg-warning-300 ax-text-warning-700;
+                    @apply ax-bg-warning-300 ax-text-warning-fore;
                 }
             }
 
             &.ax-state-selected {
-                @apply ax-bg-warning-200 ax-text-warning-700;
+                @apply ax-bg-warning-200 ax-text-warning-fore;
             }
         }
         &.ax-danger-twotone {
@@ -515,10 +515,10 @@
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
-                    @apply ax-bg-warning-50 ax-text-warning-600 dark:ax-bg-transparent;
+                    @apply ax-bg-warning-50 ax-text-warning-fore dark:ax-bg-transparent;
                 }
                 &:active {
-                    @apply ax-bg-warning-100 ax-text-warning-700;
+                    @apply ax-bg-warning-100 ax-text-warning-fore;
                 }
             }
 
@@ -644,10 +644,10 @@
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
-                    @apply ax-text-warning-600 ax-border-warning-600;
+                    @apply ax-text-warning-fore ax-border-warning-600;
                 }
                 &:active {
-                    @apply ax-text-warning-500 ax-border-warning-500;
+                    @apply ax-text-warning-fore ax-border-warning-500;
                 }
             }
 

package/src/components/_calendar.scss

@@ -155,7 +155,7 @@
             @apply ax-flex ax-justify-center ax-p-2 ax-bg-light-100 dark:ax-bg-transparent dark:ax-border-transparent;
         }
     }
-    ax-inline-calendar{
+    .ax-calendar-picker{
         @apply ax-flex ax-w-full;
         ax-picker{
             @apply ax-flex-1;

package/src/components/_decoration.scss

@@ -0,0 +1,36 @@
+@layer components {
+    ax-header,
+    ax-footer {
+        @apply ax-bg-white ax-p-3   ax-border-light-300 dark:ax-border-light-700 ax-flex ax-justify-between ax-items-center;
+    }
+
+    ax-header {
+        @apply ax-border-b;
+
+        & > ax-prefix,
+        & > ax-suffix {
+            @apply ax-flex ax-items-center;
+        }
+    }
+
+    ax-footer {
+        @apply ax-border-t;
+    }
+
+    ax-title {
+        @apply ax-font-medium;
+    }
+
+    ax-icon {
+        @apply ax-font-medium;
+    }
+
+    ax-close-button {
+        ax-icon {
+            @apply ax-text-light-300 dark:ax-text-light-200 ax-cursor-pointer ax-text-xl;
+            &:hover {
+                @apply ax-text-light-500 dark:ax-text-light-100;
+            }
+        }
+    }
+}

package/src/components/_drawer.scss

@@ -1,126 +1,100 @@
 @layer components {
-    .ax-drawer-container {
+    ax-drawer-container {
         @apply ax-flex ax-relative ax-w-full ax-h-full ax-overflow-hidden;
 
-        .ax-drawer-backdrop {
-            @apply ax-absolute ax-w-full ax-h-full ax-z-[990] ax-transition-all ax-top-0 ax-bottom-0 ax-bg-black/50;
-          
+        &.ax-fixed {
+            @apply ax-hidden ax-top-0 ax-right-0 ax-left-0 ax-bottom-0 ax-z-[1000];
+
+            &.ax-visible {
+                @apply ax-flex;
+            }
         }
 
-        .ax-drawer {
-          
+        .ax-backdrop {
+            @apply ax-bg-black/30 ax-absolute ax-w-full ax-h-full ax-z-[1] ax-top-0 ax-bottom-0 ax-transition-all;
+        }
 
-            // &.ax-animated {
-            //     transition: all 500ms;
-            // }
+        ax-drawer {
+            @apply ax-flex ax-flex-col ax-max-w-[95%] ax-h-full ax-animate-duration-300 ax-transition-all #{!important};
 
-            &.ax-drawer-overlay {
-                @apply ax-absolute ax-z-[999];
-                z-index: 9999;
+            &.ax-preload {
+                @apply ax-animate-duration-[0ms] ax-transition-none #{!important};
             }
 
-            &.ax-drawer-start {
-                @apply ax-h-full;
-                &.ax-hide {
-                    position: absolute;
-                    left: -9999px;
-                }
 
-                &.ax-collapsed {
-                    margin-inline-start: calc(-2 * var(--attr-width));
-                }
+            &>ax-content
+            {
+                @apply ax-overflow-auto ax-bg-white ax-flex-1 ax-h-full;
+            }
+
+            &.ax-drawer-overlay {
+                @apply ax-absolute;
 
                 &.ax-expanded {
-                    margin-inline-start: 0;
+                    @apply ax-z-[2];
                 }
-            }
 
-            &.ax-drawer-end {
-                @apply ax-h-full;
-                &.ax-hide {
-                    position: absolute;
-                    right: -9999px;
+                &.ax-collapsed {
+                    @apply ax-z-[0];
                 }
 
-                &.ax-drawer-overlay {
-                    &.ax-collapsed {
-                        right: calc(-2 * var(--attr-width));
-                    }
+                &.ax-drawer-start {
 
                     &.ax-expanded {
-                        right: calc(-2 * var(--attr-diff));
+                        left:0;
                     }
-                }
 
-                &.ax-drawer-push {
                     &.ax-collapsed {
-                        margin-inline-end: calc(-2 * var(--attr-width));
+                        left: calc(-1 * var(--ax-el-width));
                     }
 
-                    &.ax-expanded {
-                        margin-inline-end: 0;
-                    }
-                }
-            }
-            &.ax-drawer-top {
-                @apply ax-w-full;
-                &.ax-hide {
-                    position: absolute;
-                    top: -9999px;
                 }
 
-                &.ax-drawer-overlay {
-                    &.ax-collapsed {
-                        top: calc(-2 * var(--attr-height));
-                    }
+                &.ax-drawer-end {
 
                     &.ax-expanded {
-                        top: calc(-2 * var(--attr-diff));
+                       right:0;
                     }
-                }
 
-                &.ax-drawer-push {
                     &.ax-collapsed {
-                        margin-block-start: calc(-2 * var(--attr-height));
-                    }
-
-                    &.ax-expanded {
-                        margin-block-start: 0;
+                        right: calc(-1 * var(--ax-el-width));
                     }
                 }
             }
-            &.ax-drawer-bottom {
-                @apply ax-w-full;
-                &.ax-hide {
-                    position: absolute;
-                    bottom: -9999px;
-                }
 
-                &.ax-drawer-overlay {
-                    &.ax-collapsed {
-                        bottom: calc(-2 * var(--attr-height));
-                    }
+            &.ax-drawer-push {
+                @apply ax-flex-initial;
+
+                &.ax-drawer-start {
+                    @apply ax-order-first;
 
                     &.ax-expanded {
-                        bottom: calc(-2 * var(--attr-diff));
+                        margin-inline-start: 0%
                     }
-                }
 
-                &.ax-drawer-push {
                     &.ax-collapsed {
-                        margin-block-start: calc(-2 * var(--attr-height));
+                        margin-inline-start: calc(-1 * var(--ax-el-width));
                     }
 
+                }
+
+                &.ax-drawer-end {
+                    @apply ax-order-last;
+
                     &.ax-expanded {
-                        margin-block-start: 0;
+                        margin-inline-end: 0%;
+                    }
+
+                    &.ax-collapsed {
+                        margin-inline-end: calc(-1 * var(--ax-el-width));
                     }
                 }
             }
+
         }
 
-        .ax-drawer-content {
-            @apply ax-flex-1 ax-overflow-auto;
-            width: var(--attr-content-width);
+        &>ax-content {
+            @apply ax-flex-1 ax-h-full ax-overflow-auto;
         }
     }
-}
+}

package/src/components/_dropdown.scss

@@ -11,14 +11,6 @@
         }
     }
 
-    .ax-backdrop-light {
-        @apply cdk-overlay-backdrop ax-bg-white ax-bg-opacity-50;
-    }
-
-    .ax-backdrop-dark {
-        @apply cdk-overlay-backdrop ax-bg-black ax-bg-opacity-50;
-    }
-
     .ax-overlay-pane {
         @apply ax-bg-white ax-border ax-rounded ax-border-light-300;
         @include control-states("surface");
@@ -50,21 +42,6 @@
             @apply ax-w-screen ax-h-screen;
         }
 
-        .ax-header {
-            @apply ax-p-4 ax-border-b ax-border-light-300 dark:ax-border-light-700 ax-flex ax-justify-between ax-items-center;
-
-            span {
-                @apply ax-font-medium;
-            }
-
-            i {
-                @apply ax-text-light-300 dark:ax-text-light-200 ax-cursor-pointer ax-text-xl;
-                &:hover {
-                    @apply ax-text-light-500 dark:ax-text-light-100;
-                }
-            }
-        }
-
         &.ax-dropdown-list {
             @apply ax-border ax-border-solid ax-flex ax-flex-col ax-py-1 ax-rounded ax-shadow-sm;
 

package/src/components/_list.scss

@@ -3,13 +3,7 @@
         display: block;
         @apply ax-h-full ax-flex ax-flex-col ax-overflow-hidden md:ax-max-h-80;
 
-        .ax-header {
-            @apply ax-flex ax-items-center ax-justify-between ax-px-3 ax-py-2.5;
-        }
-
         .ax-content {
-
-
             @apply ax-flex-1 ax-overflow-y-auto ax-overflow-x-hidden;
 
             &.ax-list-items-container {

package/src/components/_menu.scss

@@ -2,8 +2,14 @@
     ax-menu,
     .ax-menu {
         > ul {
-            @apply ax-flex ax-flex-col ax-text-sm;
-
+            @apply ax-flex  ax-text-sm;
+            &.vertical-mode {
+                @apply ax-flex-col
+            }
+            &.horizontal-mode{
+                 @apply ax-flex-row ax-whitespace-nowrap
+            }
+            
             li {
                 @apply ax-cursor-pointer;
 

package/src/components/_picker.scss

@@ -1,59 +1,179 @@
-@layer components {
-    ax-picker,
-    .ax-picker {
-        @apply ax-relative;
-        ax-carousel {
-            &::before {
-                @apply ax-top-0;
-                /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.08+0,0+100;Neutral+Density */
-                background: -moz-linear-gradient(
-                    top,
-                    rgba(226, 232, 240, 0.08) 0%,
-                    rgba(226, 232, 240, 0) 100%
-                ); /* FF3.6-15 */
-                background: -webkit-linear-gradient(
-                    top,
-                    rgba(226, 232, 240, 0.70) 0%,
-                    rgba(226, 232, 240, 0) 100%
-                ); /* Chrome10-25,Safari5.1-6 */
-                background: linear-gradient(
-                    to bottom,
-                    rgba(226, 232, 240, 0.70) 0%,
-                    rgba(226, 232, 240, 0) 100%
-                ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
-            }
-            &::after {
-                @apply ax-bottom-0;
-                /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.70+0,0+100;Neutral+Density */
-                background: -moz-linear-gradient(
-                    bottom,
-                    rgba(226, 232, 240, 0.70) 0%,
-                    rgba(226, 232, 240, 0) 100%
-                ); /* FF3.6-15 */
-                background: -webkit-linear-gradient(
-                    bottom,
-                    rgba(226, 232, 240, 0.70) 0%,
-                    rgba(226, 232, 240, 0) 100%
-                ); /* Chrome10-25,Safari5.1-6 */
-                background: linear-gradient(
-                    to top,
-                    rgba(226, 232, 240, 0.70) 0%,
-                    rgba(226, 232, 240, 0) 100%
-                ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
-            }
-            &::before,
-            &::after {
-                @apply ax-absolute ax-h-1/2 ax-w-full ax-start-0 ax-pointer-events-none;
-                content: "";
-            }
-        }
-        .ax-picker-item {
-            @apply ax-block ax-p-4 ax-text-sm;
-            &.is-active {
-                @apply ax-text-base ax-text-primary-500 ax-transition-all;
-            }
-        }
-    }
+// @layer components {
+//     ax-picker,
+//     .ax-picker {
+//         @apply ax-relative;
+//         ax-carousel {
+//             &::before {
+//                 @apply ax-top-0;
+//                 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.08+0,0+100;Neutral+Density */
+//                 background: -moz-linear-gradient(
+//                     top,
+//                     rgba(226, 232, 240, 0.08) 0%,
+//                     rgba(226, 232, 240, 0) 100%
+//                 ); /* FF3.6-15 */
+//                 background: -webkit-linear-gradient(
+//                     top,
+//                     rgba(226, 232, 240, 0.70) 0%,
+//                     rgba(226, 232, 240, 0) 100%
+//                 ); /* Chrome10-25,Safari5.1-6 */
+//                 background: linear-gradient(
+//                     to bottom,
+//                     rgba(226, 232, 240, 0.70) 0%,
+//                     rgba(226, 232, 240, 0) 100%
+//                 ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+//                 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
+//             }
+//             &::after {
+//                 @apply ax-bottom-0;
+//                 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.70+0,0+100;Neutral+Density */
+//                 background: -moz-linear-gradient(
+//                     bottom,
+//                     rgba(226, 232, 240, 0.70) 0%,
+//                     rgba(226, 232, 240, 0) 100%
+//                 ); /* FF3.6-15 */
+//                 background: -webkit-linear-gradient(
+//                     bottom,
+//                     rgba(226, 232, 240, 0.70) 0%,
+//                     rgba(226, 232, 240, 0) 100%
+//                 ); /* Chrome10-25,Safari5.1-6 */
+//                 background: linear-gradient(
+//                     to top,
+//                     rgba(226, 232, 240, 0.70) 0%,
+//                     rgba(226, 232, 240, 0) 100%
+//                 ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+//                 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
+//             }
+//             &::before,
+//             &::after {
+//                 @apply ax-absolute ax-h-1/2 ax-w-full ax-start-0 ax-pointer-events-none;
+//                 content: "";
+//             }
+//         }
+//         .ax-picker-item {
+//             @apply ax-block ax-p-4 ax-text-sm;
+//             &.is-active {
+//                 @apply ax-text-base ax-text-primary-500 ax-transition-all;
+//             }
+//         }
+//     }
+// }
+
+// @layer components {
+//     ax-picker {
+//         @apply ax-max-h-full ax-overflow-y-scroll;
+//         scroll-snap-type: mandatory;
+//         scroll-snap-points-y: repeat(1rem);
+//         scroll-snap-type: y mandatory;
+//         li {
+//             @apply ax-py-4 ax-flex ax-flex-col ax-items-center ax-justify-center ax-snap-start ax-text-sm;
+//         }
+//     }
+// }
+.ng-data-picker {
+    font-size: 1rem;
+    height: 10em;
+    position: relative;
+    background-color: white;
+    overflow: hidden;
+}
+.ng-data-picker.black {
+    color: white;
+}
+.ng-data-picker .picker-group {
+}
+.ng-data-picker .picker-list {
+    height: 6.25em;
+    position: relative;
+    top: 4em; // half of picker height - half of item height
+}
+.ng-data-picker .picker-item {
+    position: absolute;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+    text-align: center;
+    will-change: transform;
+    contain: strict;
+    height: 2em;
+    line-height: 2;
+    font-size: 1em;
+}
+.ng-data-picker .selected-item {
+}
+
+/* picker handle layer */
+.ng-data-picker .picker-handle-layer {
+    position: absolute;
+    width: 100%;
+    height: calc(100% + 2px);
+    left: 0;
+    right: 0;
+    top: -1px;
+    bottom: -1px;
+}
+.ng-data-picker .picker-handle-layer .picker-top {
+    border-bottom: 0.55px solid rgba(74, 73, 89, 0.5);
+    background: linear-gradient(to bottom, white 2%, rgba(255, 255, 255, 0.1) 100%);
+    transform: translate3d(0, 0, 5.625em);
+}
+.ng-data-picker .picker-handle-layer .picker-middle {
+    height: 2em;
+}
+.ng-data-picker .picker-handle-layer .picker-bottom {
+    border-top: 0.55px solid rgba(74, 73, 89, 0.5);
+    background: linear-gradient(to top, white 2%, rgba(255, 255, 255, 0.1) 100%);
+    transform: translate3d(0, 0, 5.625em);
+}
+
+/* flex system */
+.flex-box {
+    display: flex;
+}
+.flex-box.dir-column {
+    flex-direction: column;
+}
+.flex-box.dir-row {
+    flex-direction: row;
+}
+
+/* flex system - for items */
+.flex-box .weight-1 {
+    flex: 1;
+}
+.flex-box .weight-2 {
+    flex: 2;
+}
+.flex-box .weight-3 {
+    flex: 3;
+}
+.flex-box .weight-4 {
+    flex: 4;
+}
+.flex-box .weight-5 {
+    flex: 5;
+}
+.flex-box .weight-6 {
+    flex: 6;
+}
+.flex-box .weight-7 {
+    flex: 7;
+}
+.flex-box .weight-8 {
+    flex: 8;
+}
+.flex-box .weight-9 {
+    flex: 9;
+}
+.flex-box .weight-10 {
+    flex: 10;
+}
+.flex-box .weight-11 {
+    flex: 11;
+}
+.flex-box .weight-12 {
+    flex: 12;
 }

package/src/components/_popup.scss

@@ -1,44 +1,9 @@
 @layer components {
-    ax-page-footer,
-    ax-page-header {
-        @apply ax-flex ax-items-center ax-justify-between ax-px-3 ax-py-2 ax-border-solid ax-border-light-300 dark:ax-border-light-700;
-
-        ax-prefix {
-            @apply ax-flex ax-col-span-6 ax-col-start-1 ax-col-end-7 ax-justify-start;
-        }
-
-        ax-suffix {
-            @apply ax-flex ax-col-span-6 ax-col-start-7 ax-col-end-13 ax-justify-end;
-        }
-    }
-
-    ax-page-footer {
-        @apply ax-border-t;
-    }
-
-    ax-page-header {
-        @apply ax-border-b;
-    }
 
     .ax-popup {
         @apply ax-flex ax-flex-col ax-bg-white ax-w-6/12 ax-shadow-lg ax-border ax-border-solid ax-border-light-300 ax-rounded ax-outline-none ax-p-0 ax-max-h-[98vh] ax-min-h-fit ax-mx-auto;
         @include control-states("surface");
 
-        .ax-popup-header {
-            @apply ax-p-4 ax-border-b ax-border-light-300 dark:ax-border-light-700 ax-flex ax-justify-between ax-items-center ax-cursor-move;
-
-            span {
-                @apply ax-font-medium;
-            }
-
-            i {
-                @apply ax-text-light-300 dark:ax-text-light-200 ax-cursor-pointer ax-text-xl;
-                &:hover {
-                    @apply ax-text-light-500 dark:ax-text-light-100;
-                }
-            }
-        }
-
         .ax-popup-main-container {
             @apply ax-overflow-auto ax-flex-1;
         }

package/src/components/_toast.scss

@@ -1,82 +1,12 @@
 @layer components {
-    .ax-toast {
-        @apply ax-grid ax-grid-cols-12 ax-gap-4 ax-relative ax-bg-white ax-shadow-md ax-border-light-200 ax-border ax-border-solid ax-rounded-md ax-px-4 ax-py-2 ax-overflow-hidden ax-items-center;
-        @include control-states('surface');
+    ax-toast {
+
         @screen sm {
             width: 98vw;
         }
         @screen md {
             width: max(20vw, 350px);
         }
-        .ax-toast-icon-side {
-            @apply ax-col-span-1 ax-h-full;
-        }
-        .ax-toast-content-side {
-            @apply ax-col-span-10;
-            .ax-toast-title {
-                @apply ax-text-sm ax-font-semibold ax-text-light-700 dark:ax-text-light-100;
-            }
-            .ax-toast-content {
-                @apply ax-py-2 ax-text-sm ax-text-light-400 dark:ax-text-light-200;
-            }
-        }
-        .ax-toast-dismiss-icon {
-            @apply ax-col-span-1 ax-cursor-pointer ax-h-full;
-            .ax-ic {
-                @apply ax-text-base;
-            }
-        }
-        .ax-toast-dismiss-icon {
-            @apply ax-text-light-400;
-        }
-        .ax-toast-buttons {
-            @apply ax-col-span-12;
-        }
-        .ax-toast-progress {
-            @apply ax-absolute ax-bottom-0 ax-h-1 ax-w-0;
-            animation-duration: 4s;
-            animation-timing-function: linear;
-            animation-name: progressBar;
-        }
-        @keyframes progressBar {
-            0% {
-                width: 100%;
-            }
-            100% {
-                width: 0%;
-            }
-        }
-        &.ax-success {
-            .ax-toast-icon {
-                @apply ax-text-success-500;
-            }
-            .ax-toast-progress {
-                @apply ax-bg-success-400;
-            }
-        }
-        &.ax-danger {
-            .ax-toast-icon {
-                @apply ax-text-danger-500;
-            }
-            .ax-toast-progress {
-                @apply ax-bg-danger-400;
-            }
-        }
-        &.ax-warning {
-            .ax-toast-icon {
-                @apply ax-text-warning-500;
-            }
-            .ax-toast-progress {
-                @apply ax-bg-warning-400;
-            }
-        }
-        &.ax-info {
-            .ax-toast-icon {
-                @apply ax-text-info-500;
-            }
-            .ax-toast-progress {
-                @apply ax-bg-info-400;
-            }
-        }
+        
     }
-}
+}

package/src/components/index.scss

@@ -39,4 +39,5 @@
 @import "./textarea";
 @import "./toast";
 @import "./tooltip";
-@import "./treeview";
+@import "./treeview";
+@import "./decoration";

package/src/utility/_mixins.scss

@@ -61,12 +61,34 @@
     }
     @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-body {
+            @apply ax-bg-transparent #{!important};
+            ax-button {
+                @apply ax-bg-#{$color}-500 #{!important};
+            }
+        }
     }
     @if ($look == "twotone") {
-        @apply ax-bg-#{$color}-50 ax-text-#{$color}-500;
+        @apply ax-bg-#{$color}-100 ax-text-#{$color}-500;
+        .ax-alert-body {
+            @apply ax-bg-#{$color}-50 #{!important};
+            ax-button {
+                @apply ax-bg-#{$color}-500 #{!important};
+            }
+        }
     }
     @if ($look == "blank") {
         @apply ax-bg-transparent ax-text-#{$color}-500;
+
+        .ax-alert-body {
+            @apply ax-bg-transparent #{!important};
+            ax-button {
+                @apply ax-bg-#{$color}-500 #{!important};
+            }
+        }
     }
 }
 
@@ -81,3 +103,14 @@
         }
     }
 }
+
+@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 ax-py-1.5 ax-px-2 #{!important};
+        &:focus,
+        &: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};
+        }
+    }
+}

package/src/variables/_colors.scss

@@ -63,18 +63,18 @@ $theme-colors: (
         "900": "127 29 29",
     ),
     "warning": (
-        "": "251 191 36",
-        "fore": "120 53 15",
-        "50": "255 251 235",
-        "100": "254 243 199",
-        "200": "253 230 138",
-        "300": "252 211 77",
-        "400": "251 191 36",
-        "500": "245 158 11",
-        "600": "217 119 6",
-        "700": "180 83 9",
-        "800": "146 64 14",
-        "900": "120 53 15",
+        "": "255 193 7",
+        "fore": "33 37 41",
+        "50": "255 248 225",
+        "100": "255 236 181",
+        "200": "255 224 131",
+        "300": "255 212 81",
+        "400": "255 202 44",
+        "500": "255 193 7",
+        "600": "255 187 6",
+        "700": "255 179 5",
+        "800": "255 171 4",
+        "900": "255 158 2",
     ),
     "info": (
         "": "139 92 246",