@acorex/styles 6.1.12 → 7.0.0

package/src/components/_collapse.scss

@@ -1,51 +1,51 @@
-@layer components {
-    .ax-collapse {
-        @apply ax-border ax-border-light-200 dark:ax-border-white/10 ax-block ax-text-sm ax-rounded-default ax-overflow-hidden;
+// @layer components {
+//     .ax-collapse {
+//         @apply ax-border ax-border-neutral-200 dark:ax-border-white/10 ax-block ax-text-sm ax-rounded-default ax-overflow-hidden;
         
-        .ax-collapse-header {
-            @apply ax-cursor-pointer ax-select-none;
+//         .ax-collapse-header {
+//             @apply ax-cursor-pointer ax-select-none;
 
-            &.ax-state-collapsed {
-                .ax-collapse-header-container {
-                    @apply ax-border-b-0;
-                    .ax-collapse-arrow {
-                        @apply -ax-rotate-90;
-                    }
-                }
-                .ax-collapse-custom-header-container {
-                    @apply ax-border-b-0;
-                }
-            }
-            .ax-collapse-custom-header-container,.ax-collapse-header-container {
-                @apply ax-bg-light-100 dark:ax-bg-white/10 ax-border-b ax-border-light-100 dark:ax-border-white/10;
-            }
-            .ax-collapse-header-container {
-                @apply ax-flex ax-justify-between ax-p-3 ;
-                .ax-collapse-arrow {
-                    @apply ax-inline-block ax-text-xl ax-me-2 ax-rotate-90;
-                }
-            }
-        }
-        .ax-collapse-body {
-            @apply ax-p-3;
-        }
-    }
-    .ax-collapse-group {
-        @apply ax-block ax-border ax-border-light-200 dark:ax-border-white/10 ax-rounded-default ax-overflow-hidden;
+//             &.ax-state-collapsed {
+//                 .ax-collapse-header-container {
+//                     @apply ax-border-b-0;
+//                     .ax-collapse-arrow {
+//                         @apply -ax-rotate-90;
+//                     }
+//                 }
+//                 .ax-collapse-custom-header-container {
+//                     @apply ax-border-b-0;
+//                 }
+//             }
+//             .ax-collapse-custom-header-container,.ax-collapse-header-container {
+//                 @apply ax-bg-neutral-100 dark:ax-bg-white/10 ax-border-b ax-border-neutral-100 dark:ax-border-white/10;
+//             }
+//             .ax-collapse-header-container {
+//                 @apply ax-flex ax-justify-between ax-p-3 ;
+//                 .ax-collapse-arrow {
+//                     @apply ax-inline-block ax-text-xl ax-me-2 ax-rotate-90;
+//                 }
+//             }
+//         }
+//         .ax-collapse-body {
+//             @apply ax-p-3;
+//         }
+//     }
+//     .ax-collapse-group {
+//         @apply ax-block ax-border ax-border-neutral-200 dark:ax-border-white/10 ax-rounded-default ax-overflow-hidden;
 
-        ax-collpase,
-        .ax-collapse {
-            @apply ax-rounded-none ax-border-none;
-            .ax-collapse-header-container {
-                @apply ax-border-t ax-border-light-100;
-            }
-        }
-        ax-collapse {
-            &:first-child {
-                .ax-collapse-header-container {
-                    @apply ax-border-t-0;
-                }
-            }
-        }
-    }
-}
+//         ax-collpase,
+//         .ax-collapse {
+//             @apply ax-rounded-none ax-border-none;
+//             .ax-collapse-header-container {
+//                 @apply ax-border-t ax-border-neutral-100;
+//             }
+//         }
+//         ax-collapse {
+//             &:first-child {
+//                 .ax-collapse-header-container {
+//                     @apply ax-border-t-0;
+//                 }
+//             }
+//         }
+//     }
+// }

package/src/components/_color-palette.scss

@@ -1,6 +1,6 @@
 @layer components {
     .ax-color-palette {
-        @apply ax-flex ax-flex-col ax-w-72 ax-border ax-border-light-200 ax-rounded ax-gap-2;
+        @apply ax-flex ax-flex-col ax-w-72 ax-border ax-border-neutral-200 ax-rounded ax-gap-2;
         @include control-states("surface");
         --ax-base-ratio: 4;
 
@@ -19,11 +19,11 @@
 
         .ax-header,
         .ax-footer {
-            @apply ax-border-t ax-bg-white ax-p-3 ax-border-light-300 dark:ax-border-light-700 ax-flex;
+            @apply ax-border-t ax-bg-white ax-p-3 ax-border-neutral-300 dark:ax-border-neutral-700 ax-flex;
             @include control-states("editor");
         }
         ax-color-palette-preview {
-            @apply ax-relative ax-h-20 ax-w-full  ax-rounded-t ax-bg-primary-50 ax-flex ax-justify-center ax-items-center ax-font-semibold ax-shadow-sm ax-border-b ax-border-light-200 dark:ax-border-white/10 ax-transition-all;
+            @apply ax-relative ax-h-20 ax-w-full  ax-rounded-t ax-bg-primary-50 ax-flex ax-justify-center ax-items-center ax-font-semibold ax-shadow-sm ax-border-b ax-border-neutral-200 dark:ax-border-white/10 ax-transition-all;
             background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=")
                 left center;
             .palette-preview-overlay {
@@ -32,14 +32,14 @@
         }
 
         ax-color-palette-favorite {
-            @apply ax-border-t ax-border-light-200 dark:ax-border-white/10 ax-block;
+            @apply ax-border-t ax-border-neutral-200 dark:ax-border-white/10 ax-block;
         }
 
         ax-color-palette-swatches,
         ax-color-palette-favorite {
             @apply ax-p-2 ax-grid-cols-8 ax-gap-0.5 ax-grid ax-max-h-36 ax-overflow-y-auto ax-overflow-x-hidden;
             div {
-                @apply ax-relative ax-bg-dark-100 ax-flex ax-items-center ax-justify-center ax-cursor-pointer ax-m-0.5 ax-rounded ax-shadow-sm ax-border ax-border-light-200 dark:ax-border-white/10;
+                @apply ax-relative ax-bg-neutral-100 ax-flex ax-items-center ax-justify-center ax-cursor-pointer ax-m-0.5 ax-rounded ax-shadow-sm ax-border ax-border-neutral-200 dark:ax-border-white/10;
 
                 &::before {
                     content: "";

package/src/components/_color-picker.scss

@@ -1,28 +1,28 @@
-@layer components {
-    ax-color-picker {
-        .ax-dropdown-content {
-            @apply ax-mx-2 ax-flex ax-items-center;
+// @layer components {
+//     ax-color-picker {
+//         .ax-dropdown-content {
+//             @apply ax-mx-2 ax-flex ax-items-center;
 
-            .color-badge {
-                @apply ax-block ax-rounded ax-me-2 ax-shadow-sm ax-border ax-border-light-200 dark:ax-border-white/10;
-                width: calc(var(--ax-base-size) * var(--ax-base-ratio) / 2);
-                height: calc(var(--ax-base-size) * var(--ax-base-ratio) / 2);
-            }
-        }
-    }
+//             .color-badge {
+//                 @apply ax-block ax-rounded ax-me-2 ax-shadow-sm ax-border ax-border-neutral-200 dark:ax-border-white/10;
+//                 width: calc(var(--ax-base-size) * var(--ax-base-ratio) / 2);
+//                 height: calc(var(--ax-base-size) * var(--ax-base-ratio) / 2);
+//             }
+//         }
+//     }
 
-    .ax-overlay-pane {
-        ax-color-palette {
-            @apply ax-border-none;
+//     .ax-overlay-pane {
+//         ax-color-palette {
+//             @apply ax-border-none;
 
-            @include screen(mobile) {
-                @apply ax-w-full;
-                .palette-items {
-                    @apply ax-max-h-[30vh] #{!important};
-                }
-            }
+//             @include screen(mobile) {
+//                 @apply ax-w-full;
+//                 .palette-items {
+//                     @apply ax-max-h-[30vh] #{!important};
+//                 }
+//             }
 
-        }
+//         }
 
-    }
-}
+//     }
+// }

package/src/components/_context-menu.scss

@@ -1,19 +1,3 @@
 @layer components {
-    .ax-context-menu {
-        @apply ax-min-w-[12rem] ax-max-w-xs ax-bg-white ax-border ax-border-light-200 dark:ax-border-dark-500 ax-sm ax-rounded-default ax-py-2 ax-px-1;
-        @include control-states("surface");
-        > ul {
-            @apply ax-space-y-2 #{!important};
 
-            > li {
-                &:not(.ax-state-disabled, .ax-divider) {
-                    @apply ax-p-1;
-                    &:hover {
-                        @apply ax-bg-light-200 dark:ax-bg-white/10 dark:ax-text-light-50;
-                    }
-                }
-             
-            }
-        }
-    }
 }

package/src/components/_data-table.scss

@@ -1,6 +1,6 @@
 @layer components {
     .ax-data-table {
-        @apply ax-flex ax-flex-col  ax-rounded-default  ax-border ax-border-light-200 dark:ax-border-white/10;
+        @apply ax-flex ax-flex-col  ax-rounded-default  ax-border ax-border-neutral-200 dark:ax-border-white/10;
 
         .ax-wrapper
         {

package/src/components/_datepicker.scss

@@ -1,5 +1,5 @@
-@layer components {
-    .ax-datepicker-body {
-        @apply ax-m-auto ax-shadow-sm ax-w-full ax-rounded ax-border ax-border-light-300 ax-border-none;
-    }
-}
+// @layer components {
+//     .ax-datepicker-body {
+//         @apply ax-m-auto ax-shadow-sm ax-w-full ax-rounded ax-border ax-border-neutral-300 ax-border-none;
+//     }
+// }

package/src/components/_decoration.scss

@@ -1,39 +0,0 @@
-@layer components {
-    .ax-decoration-container,
-    .ax-header,
-    .ax-footer {
-        @apply ax-flex ax-justify-between ax-items-center ax-gap-2 ax-bg-white;
-        @include control-states("surface");
-        & > .ax-prefix,
-        & > .ax-suffix {
-            @apply ax-flex ax-flex-auto ax-flex-row ax-gap-2 ax-items-center;
-        }
-        & > .ax-prefix {
-            @apply ax-order-first ax-justify-start ax-items-center;
-        }
-        & > .ax-suffix {
-            @apply ax-order-last ax-justify-end ax-items-center;
-        }
-    }
-
-    .ax-title,
-    .ax-icon {
-        @apply ax-font-medium;
-    }
-
-    .ax-title{
-        @apply ax-text-base ax-text-black/[0.87] dark:ax-text-white;
-    }
-    .ax-sub-title {
-        @apply ax-text-sm ax-font-normal ax-text-black/60 dark:ax-text-white;
-    }
-    .ax-close-button {
-        @apply ax-w-6 ax-h-6 ax-grid ax-place-items-center ax-cursor-pointer;
-        .ax-icon {
-            @apply ax-text-black/50 dark:ax-text-white ax-text-xl;
-            &:hover {
-                @apply ax-text-black/75 dark:ax-text-white;
-            }
-        }
-    }
-}

package/src/components/_dialog.scss

@@ -1,82 +1,83 @@
-@layer components {
-    .ax-dialog {
-        @apply ax-grid ax-grid-cols-12 ax-gap-4 ax-px-6 ax-py-5 ax-relative ax-bg-white ax-shadow-md ax-border ax-border-solid ax-border-light-300 ax-rounded-lg ax-outline-none ax-overflow-hidden;
-        width: 25vw;
-        @include control-states("surface");
-        // @include screen("mobile"){
-        //     width: calc(var(--ax-overlay-full-width) * 1vw);
-        // }
-        // @include screen("tablet"){
-        //     width: 60vw;
-        // }
-        // @include screen("laptop"){
-        //     width: 25vw;
-        // }
-        // @include screen("extraSmall"){
-        //     width: 95vw;
-        // }
+// @layer components {
+//     .ax-dialog {
+//         @apply ax-grid ax-grid-cols-12 ax-gap-4 ax-px-6 ax-py-5 ax-relative ax-bg-white ax-shadow-md ax-border ax-border-solid ax-border-neutral-300 ax-rounded-lg ax-outline-none ax-overflow-hidden;
+//         width: 25vw;
+//         background-color: #fff;
+//         @include control-states("surface");
+//         // @include screen("mobile"){
+//         //     width: calc(var(--ax-overlay-full-width) * 1vw);
+//         // }
+//         // @include screen("tablet"){
+//         //     width: 60vw;
+//         // }
+//         // @include screen("laptop"){
+//         //     width: 25vw;
+//         // }
+//         // @include screen("extraSmall"){
+//         //     width: 95vw;
+//         // }
 
-        @include responsive('phone'){
-            width: 98vw;
-        }
-        @include responsive('tablet'){
-            width: 75vw;
-        }
-        @include responsive('desktop'){
-            width: 30vw;
-        }
-        @include responsive('desktop-large'){
-            width: 33vw;
-        }
+//         @include media('phone'){
+//             width: 98vw;
+//         }
+//         @include media('tablet'){
+//             width: 75vw;
+//         }
+//         @include media('desktop'){
+//             width: 30vw;
+//         }
+//         @include media('desktop-large'){
+//             width: 33vw;
+//         }
        
-        .ax-dialog-icon-side {
-            @apply ax-flex ax-justify-center ax-col-span-2;
-            .ax-dialog-icon {
-                min-width: 3rem;
-                @apply ax-w-12 ax-h-12 ax-flex ax-justify-center ax-items-center ax-rounded-full ax-cursor-move ax-text-2xl;
-            }
-        }
-        .ax-dialog-content-side {
-            @apply ax-col-span-9;
-            .ax-dialog-title {
-                @apply ax-text-lg ax-font-bold ax-text-light-700 dark:ax-text-light-100;
-            }
-            .ax-dialog-content {
-                @apply ax-text-sm ax-my-1.5 ax-text-light-500 dark:ax-text-light-200;
-            }
-        }
-        .ax-dialog-dismiss-icon {
-            @apply ax-col-span-1;
-            @apply ax-cursor-pointer ax-text-light-400 ax--mt-2.5;
-        }
-        .ax-footer {
-            @apply ax-flex ax-gap-2 ax-col-span-12  ax-justify-end;
-        }
-        &.ax-primary-default {
-            .ax-dialog-icon {
-                @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 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 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 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 dark:ax-bg-info-500 dark:ax-text-info-fore;
-            }
-        }
-    }
+//         .ax-dialog-icon-side {
+//             @apply ax-flex ax-justify-center ax-col-span-2;
+//             .ax-dialog-icon {
+//                 min-width: 3rem;
+//                 @apply ax-w-12 ax-h-12 ax-flex ax-justify-center ax-items-center ax-rounded-full ax-cursor-move ax-text-2xl;
+//             }
+//         }
+//         .ax-dialog-content-side {
+//             @apply ax-col-span-9;
+//             .ax-dialog-title {
+//                 @apply ax-text-lg ax-font-bold ax-text-neutral-700 dark:ax-text-neutral-100;
+//             }
+//             .ax-dialog-content {
+//                 @apply ax-text-sm ax-my-1.5 ax-text-neutral-500 dark:ax-text-neutral-200;
+//             }
+//         }
+//         .ax-dialog-dismiss-icon {
+//             @apply ax-col-span-1;
+//             @apply ax-cursor-pointer ax-text-neutral-400 ax--mt-2.5;
+//         }
+//         .ax-footer {
+//             @apply ax-flex ax-gap-2 ax-col-span-12  ax-justify-end;
+//         }
+//         &.ax-primary-default {
+//             .ax-dialog-icon {
+//                 @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 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 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 dark:ax-bg-warning-500 dark:ax-text-warning-fore;
+//             }
+//         }
+//         &.ax-primary-default {
+//             .ax-dialog-icon {
+//                 @apply ax-text-primary-500 ax-bg-primary-50 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
+//             }
+//         }
+//     }
     
-}
+// }