@acorex/styles 5.2.2 → 5.3.3

package/package.json

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

package/src/components/_alert.scss

@@ -1,64 +1,106 @@
 @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-w-full 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-button {
+                    @apply ax-ms-2 #{!important};
+                }
+            }
+
+            ax-footer {
+                @apply ax-bg-transparent ax-border-none ax-p-0 ax-mt-3;
+                
+                ax-suffix {
+                    ax-button{
+                        @apply ax-ms-0 ax-me-2 #{!important};
                     }
+                    @apply ax-mt-3;
                 }
             }
         }
-        .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/_collapse.scss

@@ -2,10 +2,10 @@
     ax-collpase,
     .ax-collapse {
         @apply ax-border ax-border-light-200 ax-block ax-text-sm ax-rounded ax-overflow-hidden;
-
+        @include control-states("editor");
         .ax-collapse-header {
             @apply ax-cursor-pointer ax-select-none;
-         
+
             &.ax-state-collapsed {
                 .ax-collapse-header-container {
                     @apply ax-border-b-0;
@@ -13,15 +13,19 @@
                         @apply -ax-rotate-90;
                     }
                 }
-                .ax-collapse-custom-header-container{
+                .ax-collapse-custom-header-container {
                     @apply ax-border-b-0;
                 }
             }
-            .ax-collapse-custom-header-container{
-                @apply ax-bg-light-50 ax-border-b ax-border-light-200;
+            .ax-collapse-custom-header-container {
+                @apply ax-bg-light-100 ax-border-b ax-border-light-200;
+                @include control-states("editor");
+
             }
             .ax-collapse-header-container {
-                @apply ax-flex ax-justify-between ax-px-3 ax-py-1.5 ax-bg-light-50 ax-border-b ax-border-light-200;
+                @apply ax-flex ax-justify-between ax-px-3 ax-py-1.5 ax-bg-light-100 ax-border-b ax-border-light-100;
+                @include control-states("editor");
+
                 .ax-collapse-arrow {
                     @apply ax-inline-block ax-text-xl ax-me-2 ax-rotate-90;
                 }
@@ -33,12 +37,13 @@
     }
     .ax-collapse-group {
         @apply ax-block ax-border ax-border-light-200 ax-rounded ax-overflow-hidden;
+        @include control-states('editor');
 
         ax-collpase,
         .ax-collapse {
             @apply ax-rounded-none ax-border-none;
             .ax-collapse-header-container {
-                @apply ax-border-t ax-border-light-200;
+                @apply ax-border-t ax-border-light-100;
             }
         }
         ax-collapse {

package/src/components/_decoration.scss

@@ -0,0 +1,37 @@
+@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;
+        @include control-states("editor");
+    }
+
+    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/_dialog.scss

@@ -35,27 +35,27 @@
         }
         &.ax-primary-default {
             .ax-dialog-icon {
-                @apply ax-text-primary-500 ax-bg-primary-50;
+                @apply ax-text-primary-500 ax-bg-primary-50 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
             }
         }
         &.ax-success-default {
             .ax-dialog-icon {
-                @apply ax-text-success-500 ax-bg-success-50;
+                @apply ax-text-success-500 ax-bg-success-50 dark:ax-bg-success-500 dark:ax-text-success-fore;
             }
         }
         &.ax-danger-default {
             .ax-dialog-icon {
-                @apply ax-text-danger-500 ax-bg-danger-50;
+                @apply ax-text-danger-500 ax-bg-danger-50 dark:ax-bg-danger-500 dark:ax-text-danger-fore;
             }
         }
         &.ax-warning-default {
             .ax-dialog-icon {
-                @apply ax-text-warning-500 ax-bg-warning-50;
+                @apply ax-text-warning-500 ax-bg-warning-50 dark:ax-bg-warning-500 dark:ax-text-warning-fore;
             }
         }
         &.ax-info-default {
             .ax-dialog-icon {
-                @apply ax-text-info-500 ax-bg-info-50;
+                @apply ax-text-info-500 ax-bg-info-50 dark:ax-bg-info-500 dark:ax-text-info-fore;
             }
         }
     }

package/src/components/_drawer.scss

@@ -1,126 +1,99 @@
 @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-drawer {
-          
+            &.ax-visible {
+                @apply ax-flex;
+            }
+        }
 
-            // &.ax-animated {
-            //     transition: all 500ms;
-            // }
+        .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-drawer-overlay {
-                @apply ax-absolute ax-z-[999];
-                z-index: 9999;
+        ax-drawer {
+            @apply ax-flex ax-flex-col ax-max-w-[95%] ax-h-full ax-animate-duration-300 ax-transition-[left] #{!important};
+            &.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,16 +11,8 @@
         }
     }
 
-    .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;
+        @apply ax-bg-white ax-border ax-rounded ax-border-light-200 ax-shadow-lg;
         @include control-states("surface");
 
 
@@ -38,6 +30,7 @@
 
         &.ax-overlay-actionsheet {
             @apply ax-w-full ax-h-auto ax-bg-white;
+            @include control-states("surface");
             max-height: 85vh;
             &.ax-full
             {
@@ -50,21 +43,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 {
@@ -39,7 +33,7 @@
 
                     .ax-list-item {
                         height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
-                        @apply ax-text-sm ax-flex ax-items-center ax-px-3 ax-text-light-700;
+                        @apply ax-text-sm ax-flex ax-items-center ax-px-3 ax-text-light-700 dark:ax-text-light-100;
 
                         &:focus,
                         &:focus-visible {
@@ -47,12 +41,12 @@
                         }
 
                         &.ax-state-selected {
-                            @apply ax-bg-light-200 ax-text-light-900 ax-font-medium dark:ax-text-primary-50;
+                            @apply ax-bg-light-200 ax-text-light-900 ax-font-medium ;
                         }
 
                         &:not(.ax-check-box) {
                             &.ax-state-selected {
-                                @apply ax-bg-light-200 ax-text-light-900 dark:ax-bg-white/[0.16];
+                                @apply ax-bg-light-200 ax-text-light-900 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
                             }
                         }
 

package/src/components/_picker.scss

@@ -58,14 +58,122 @@
 //     }
 // }
 
-@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;
-        }
-    }
+// @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/_progress.scss

@@ -2,7 +2,6 @@
     ax-progress-bar,
     .ax-progress-bar {
         @apply ax-flex ax-justify-between ax-items-center ax-text-sm;
-        @include control-states("editor");
         ax-prefix{
             @apply ax-pe-2;
         }
@@ -11,6 +10,7 @@
         }
         .ax-progress-bar-container {
             @apply ax-w-full ax-h-2 ax-relative ax-bg-light-200 ax-flex ax-rounded-full;
+            @include control-states("editor");
             .ax-progress-bar-rise {
                 max-width: 100%;
                 transition: width 1s;

package/src/components/_selection-list.scss

@@ -34,7 +34,7 @@
     .ax-selection-list {
       &.ax-vertical {
         & > div {
-          @apply ax-pb-3.5 ax-border-b ax-border-light-300 last:ax-border-0;
+          @apply ax-pb-3.5 ax-border-b ax-border-light-300 dark:ax-border-white/[0.09] last:ax-border-0;
         }
       }
     }
@@ -43,7 +43,7 @@
     .ax-selection-list {
       &.ax-vertical,&.ax-horizontal {
         & > div {
-          @apply ax-p-4 ax-border ax-border-light-300 ax-rounded-md ax-shadow-sm;
+          @apply ax-p-4 ax-border ax-border-light-300 dark:ax-border-white/[0.09] ax-rounded-md ax-shadow-sm;
           &.ax-state-selected {
             @apply ax-border-primary-500 ax-ring-1 ax-ring-primary-500 ax-shadow-primary-500; 
           }

package/src/components/_tabs.scss

@@ -141,7 +141,7 @@
 
         &.ax-vertical {
             .ax-items-wrapper {
-                @apply ax-flex-col;
+                @apply ax-flex-col ax-h-full;
 
                 ax-tab-item {
                     @apply ax-text-center ax-justify-start ax-py-2;

package/src/components/_textarea.scss

@@ -3,6 +3,8 @@
     .ax-textarea {
         min-height: calc(var(--ax-base-size) * var(--ax-base-ratio));
         @apply ax-relative ax-flex ax-flex-col ax-rounded ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300 ax-overflow-hidden ax-w-full;
+        @include control-states("editor");
+
         &:focus-within {
             @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent;
         }

package/src/components/_toast.scss

@@ -1,82 +1,8 @@
 @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');
-        @screen sm {
+    ax-toast {
+        width: max(20vw, 350px);
+        @include screen("mobile") {
             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/_treeview.scss

@@ -23,7 +23,7 @@
                         &::before {
                             content: "";
                             width: 1px;
-                            @apply ax-absolute ax-bottom-0 ax-bg-light-200 ax-h-full ax-start-2;
+                            @apply ax-absolute ax-bottom-0 ax-bg-light-200 ax-h-full ax-start-2 dark:ax-bg-white/30;
                         }
                         li {
                             &::before {

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

@@ -41,10 +41,10 @@
 
 @mixin control-states($type) {
     @if ($type == "editor") {
-        @apply dark:ax-border-white/[0.06] dark:ax-bg-white/[0.06] dark:ax-backdrop-blur-3xl;
+        @apply dark:ax-border-white/[0.07] dark:ax-bg-white/[0.07] dark:ax-backdrop-blur-3xl;
     }
     @if ($type == "editor-disabled") {
-        @apply ax-bg-light-100 ax-text-light-fore dark:ax-border-white/[0.06] dark:ax-bg-white/[0.-04] dark:ax-text-opacity-60 ax-cursor-not-allowed;
+        @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;
     }
     @if ($type == "surface") {
         @apply dark:ax-bg-default-background dark:ax-border-white/[0.16] dark:ax-shadow-md;
@@ -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",