@acorex/styles 6.1.12 → 7.0.1

package/src/components/_editor-container.scss

@@ -1,155 +0,0 @@
-@layer components {
-    .ax-editor-container {
-        height: calc(var(--ax-base-size) * var(--ax-base-ratio));
-        line-height: calc(var(--ax-base-size) * var(--ax-base-ratio));
-        @apply ax-flex ax-rounded-default ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300;
-        @include control-states("editor");
-
-        @screen md {
-            @apply ax-text-sm;
-        }
-
-        &:focus-within {
-            @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent;
-        }
-
-        &.ax-button-icon {
-            @apply ax-px-2;
-        }
-
-        .ax-placeholder {
-            @apply ax-flex ax-mx-2 ax-text-sm;
-            --tw-placeholder-opacity: 1;
-            color: rgb(var(--ax-color-placeholder) / var(--tw-placeholder-opacity));
-        }
-
-        &:first-child {
-        }
-
-        [class*=" ax-ic-"],
-        [class^="ax-ic-"] {
-            font-size: 1.2rem !important;
-            line-height: 1 !important;
-        }
-        .ax-input,
-        .ax-textarea {
-            &::-webkit-input-placeholder {
-                @apply ax-text-sm;
-            }
-
-            &:-ms-input-placeholder {
-                @apply ax-text-sm;
-            }
-
-            &::placeholder {
-                @apply ax-text-sm;
-            }
-        }
-        .ax-input {
-            width: 1%;
-            text-align: inherit;
-            font: inherit;
-            @apply ax-flex-1 ax-bg-transparent ax-border-none ax-ps-4 ax-pe-3 ax-rounded;
-
-            &:focus {
-                box-shadow: none;
-            }
-        }
-        .ax-textarea {
-            width: 1%;
-            text-align: inherit;
-            font: inherit;
-            @apply ax-w-full ax-flex-1 ax-bg-transparent ax-border-none ax-p-2.5 ax-rounded;
-
-            &:focus {
-                box-shadow: none;
-            }
-        }
-        & > .ax-prefix {
-            *,
-            .ax-button,
-            .ax-title {
-                @apply ax-rounded-s;
-            }
-        }
-
-        & > .ax-suffix {
-            *,
-            .ax-button,
-            .ax-title {
-                @apply ax-rounded-e;
-            }
-        }
-
-        & > .ax-prefix,
-        & > .ax-suffix {
-            * {
-                @apply ax-h-full ax-flex ax-justify-center ax-items-center ax-rounded-none;
-            }
-
-            .ax-icon {
-                @apply ax-px-2;
-            }
-
-            .ax-title {
-                @apply ax-bg-light-100 ax-text-light-fore ax-px-4;
-            }
-        }
-
-        .ax-button {
-            height: 100% !important;
-            @apply ax-rounded-none;
-
-            &:focus {
-                @apply ax-ring-0;
-            }
-
-            &.ax-button-icon {
-                min-width: calc(var(--ax-base-size) * var(--ax-base-ratio));
-
-                .ax-ic {
-                    @apply ax-text-base;
-                }
-            }
-            &.ax-light-blank {
-                &:hover {
-                    @apply ax-bg-transparent #{!important};
-                }
-            }
-        }
-
-        &.ax-state-disabled {
-            @include control-states("editor-disabled");
-        }
-
-        &.ax-state-error {
-            @apply ax-border-danger-500;
-
-            .ax-input {
-                @apply ax-placeholder-danger-500;
-            }
-
-            &:focus-within {
-                @apply ax-ring-0 ax-ring-transparent;
-            }
-        }
-
-        &.ax-state-success {
-            @apply ax-border-success-600;
-
-            .ax-input {
-                @apply ax-placeholder-success-600;
-            }
-
-            &:focus-within {
-                @apply ax-ring-0 ax-ring-transparent;
-            }
-        }
-
-        .ax-button {
-            &.ax-state-disabled {
-                @apply ax-bg-light-100 ax-text-light-fore ax-opacity-100 #{!important};
-            }
-        }
-    }
-}

package/src/components/_fieldset.scss

@@ -1,8 +1,3 @@
 @layer components {
-    .ax-fieldset {
-        @apply ax-border ax-border-solid ax-border-light-300 ax-p-3 ax-rounded dark:ax-border-white/10;
-        legend {
-            @apply ax-text-sm ax-px-1;
-        }
-    }
+    
 }

package/src/components/_image.scss

@@ -18,7 +18,7 @@ ax-image {
         @apply ax-hidden;
     }
     ax-loading {
-        @apply  ax-w-full ax-h-full ax-bg-light-200 dark:ax-bg-white/10 ax-flex ax-items-center ax-justify-center;
+        @apply  ax-w-full ax-h-full ax-bg-neutral-200 dark:ax-bg-white/10 ax-flex ax-items-center ax-justify-center;
     }
 
 }

package/src/components/_label.scss

@@ -1,7 +1,7 @@
 @layer components {
     .ax-label {
         label {
-            @apply ax-block ax-font-medium ax-mb-2 ax-text-sm ax-text-light-700 dark:ax-text-light-100;
+            @apply ax-block ax-font-medium ax-mb-2 ax-text-sm ax-text-neutral-700 dark:ax-text-neutral-100;
         }
     }
 }

package/src/components/_list.scss

@@ -1,83 +0,0 @@
-@layer components {
-    .ax-list {
-        @apply ax-h-full ax-flex ax-flex-col ax-overflow-hidden md:ax-max-h-80;
-        .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-footer {
-            @apply ax-border-t;
-        }
-        .ax-content {
-            @apply ax-flex-1 ax-overflow-y-auto ax-overflow-x-hidden;
-
-            &.ax-list-items-container {
-                @apply ax-py-1 ax-rounded ax-overflow-y-auto ax-h-full dark:ax-border-transparent;
-
-                &.ax-vertical {
-                    @apply ax-grid ax-grid-cols-1;
-
-                    &.ax-divide {
-                        @apply ax-divide-y ax-divide-x-0 ax-divide-light-600 ax-divide-opacity-30 ax-divide-solid;
-                    }
-                }
-
-                &.ax-default {
-                    @apply ax-cursor-pointer;
-
-                    .ax-list-item-group {
-                        & > span {
-                            @apply ax-font-bold ax-flex ax-items-center ax-px-3 ax-text-sm ax-text-light-900;
-                            height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
-                        }
-
-                        & > ul {
-                            @apply ax-px-3;
-                        }
-                    }
-
-                    .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 dark:ax-text-light-100;
-
-                        &:focus,
-                        &:focus-visible {
-                            @apply ax-outline-none;
-                        }
-
-                        &.ax-state-selected {
-                            @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-primary-500 dark:ax-text-primary-fore;
-                            }
-                        }
-
-                        &.ax-state-disabled {
-                            @apply ax-cursor-not-allowed ax-opacity-70;
-                        }
-
-                        &:focus,
-                        &:hover,
-                        &.ax-state-focus {
-                            &:not(.ax-state-selected) {
-                                @apply ax-outline-none ax-bg-light-100 dark:ax-bg-white/[0.16] dark:ax-text-white;
-                            }
-                        }
-                    }
-                }
-
-                .ax-list-loading-container {
-                    @apply ax-flex ax-justify-center ax-p-2;
-                }
-            }
-        }
-
-        .ax-footer {
-        }
-    }
-}
-

package/src/components/_loading.scss

@@ -1,52 +1,3 @@
 @layer components {
-    .ax-loading-host {
-        .ax-loading {
-            position: relative;
-            background: rgba(var(--ax-color-white) 2);
-            width: 4rem;
-            height: 4rem;
-
-            &::before,
-            &::after {
-                content: "";
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                width: 100%;
-                height: 100%;
-                border-radius: 50%;
-                transform: translate(-50%, -50%) scale(0);
-            }
-
-            &::before {
-                @apply ax-bg-primary-500;
-                animation: pulse2 2s ease-in-out infinite;
-            }
-
-            &::after {
-                @apply ax-bg-primary-500;
-                animation: pulse2 2s 1s ease-in-out infinite;
-            }
-            @keyframes pulse2 {
-                0%,
-                100% {
-                    transform: translate(-50%, -50%) scale(0);
-                    opacity: 1;
-                }
-
-                50% {
-                    transform: translate(-50%, -50%) scale(1);
-                    opacity: 0;
-                }
-            }
-        }
-    }
-
-    .ax-loading-overlay {
-        background: rgba(var(--ax-color-white) 2);
-    }
-
-    .ax-loading-spinner {
-        @apply ax-flex;
-    }
+ 
 }

package/src/components/_menu copy.scss

@@ -37,7 +37,7 @@ ax-menu {
             > li {
                 padding-inline-end: 0.5rem;
                 &:hover {
-                    @apply ax-text-light-600;
+                    @apply ax-text-neutral-600;
                 }
             }
         }
@@ -47,7 +47,7 @@ ax-menu {
                 &.ax-divider {
                     &::before {
                         content: "";
-                        @apply -ax-bottom-1 ax-start-0 ax-absolute ax-w-full ax-h-[1px] ax-bg-light-200 dark:ax-bg-white/20;
+                        @apply -ax-bottom-1 ax-start-0 ax-absolute ax-w-full ax-h-[1px] ax-bg-neutral-200 dark:ax-bg-white/20;
                     }
                 }
             }
@@ -66,7 +66,7 @@ ax-menu {
                 &:not(.ax-state-disabled) {
                     > .ax-menu-item {
                         &:hover {
-                            @apply ax-bg-light-100 dark:ax-bg-white/20 ax-rounded-default;
+                            @apply ax-bg-neutral-100 dark:ax-bg-white/20 ax-rounded-default;
                         }
                     }
                 }
@@ -79,7 +79,7 @@ ax-menu {
     }
 
     .ax-submenu-ul {
-        @apply ax-bg-white ax-border ax-border-light-200 dark:ax-border-dark-500 ax-sm ax-rounded-default ax-py-2;
+        @apply ax-bg-white ax-border ax-border-neutral-200 dark:ax-border-neutral-500 ax-sm ax-rounded-default ax-py-2;
         @include control-states("surface");
         li {
             @apply ax-py-3 ax-px-4 ax-cursor-pointer ax-flex ax-items-center ax-justify-between;
@@ -88,7 +88,7 @@ ax-menu {
             }
             &:not(.ax-state-disabled) {
                 &:hover {
-                    @apply ax-bg-light-200 dark:ax-bg-white/[0.16];
+                    @apply ax-bg-neutral-200 dark:ax-bg-white/[0.16];
                 }
             }
         }

package/src/components/_menu.scss

@@ -1,117 +1,117 @@
-ax-menu {
-    ul {
-        &.ax-rtl {
-            li {
-                ax-icon {
-                    &.ax-ic-chevron {
-                        @apply ax-block ax-rotate-0;
-                    }
-                }
-            }
-        }
-        li {
-            @apply ax-cursor-pointer ax-text-light-500 dark:ax-text-light-50 ax-rounded-default;
-            &:not(.ax-state-disabled) {
-                &:hover {
-                    @apply ax-text-light-800 dark:ax-text-light-200;
-                }
-            }
+// ax-menu {
+//     ul {
+//         &.ax-rtl {
+//             li {
+//                 ax-icon {
+//                     &.ax-icon-chevron {
+//                         @apply ax-block ax-rotate-0;
+//                     }
+//                 }
+//             }
+//         }
+//         li {
+//             @apply ax-cursor-pointer ax-text-neutral-500 dark:ax-text-neutral-50 ax-rounded-default;
+//             &:not(.ax-state-disabled) {
+//                 &:hover {
+//                     @apply ax-text-neutral-800 dark:ax-text-neutral-200;
+//                 }
+//             }
 
-            .ax-menu-item {
-                @apply ax-flex ax-justify-between ax-items-center ax-w-full ax-gap-1;
-            }
-            .ax-menu-item-prefix,
-            .ax-menu-item-suffix {
-                @apply ax-flex ax-items-center ax-gap-2 ax-h-6;
-                ax-icon {
-                    @apply ax-transition-all ax-text-xl;
-                }
-            }
-            .ax-menu-item-prefix {
-            }
-            .ax-menu-item-suffix {
-                ax-icon {
-                    @apply ax-block ax-rotate-180;
-                    &.ax-menu-active-icon {
-                        @apply -ax-rotate-90;
-                    }
-                }
-            }
-            &.ax-state-disabled {
-                @apply ax-cursor-not-allowed;
-                .ax-menu-item-prefix,
-                .ax-menu-item-suffix {
-                    @apply ax-opacity-40;
-                }
-            }
-        }
-    }
-    > ul {
-        &.ax-rtl {
-            .ax-menu-item-suffix {
-                ax-icon {
-                    @apply ax-block ax-rotate-180;
-                    &.ax-menu-active-icon {
-                        @apply ax-rotate-90;
-                    }
-                }
-            }
-        }
-        &.ax-horizontal {
-            @apply ax-flex ax-items-center ax-gap-4;
-            li {
-                &.ax-divider {
-                    @apply ax-w-[1px] ax-h-4;
-                }
-            }
-            > li {
-                @apply ax-cursor-pointer;
-                .ax-menu-item {
-                    @apply ax-flex ax-items-start ax-justify-between;
-                }
-            }
-        }
-        &.ax-vertical {
-            @apply ax-w-full;
-            &:not(&.ax-submenu-ul) {
-                @apply ax-space-y-4;
-            }
-            li {
-                &.ax-divider {
-                    @apply ax-h-[1px] ax-my-2;
-                }
-            }
-            &.ax-submenu-ul {
-                @apply ax-p-2 ax-bg-white ax-border ax-border-light-200 ax-rounded-default ax-shadow;
-                @include control-states("surface");
+//             .ax-menu-item {
+//                 @apply ax-flex ax-justify-between ax-items-center ax-w-full ax-gap-1;
+//             }
+//             .ax-menu-item-prefix,
+//             .ax-menu-item-suffix {
+//                 @apply ax-flex ax-items-center ax-gap-2 ax-h-6;
+//                 ax-icon {
+//                     @apply ax-transition-all ax-text-xl;
+//                 }
+//             }
+//             .ax-menu-item-prefix {
+//             }
+//             .ax-menu-item-suffix {
+//                 ax-icon {
+//                     @apply ax-block ax-rotate-180;
+//                     &.ax-menu-active-icon {
+//                         @apply -ax-rotate-90;
+//                     }
+//                 }
+//             }
+//             &.ax-state-disabled {
+//                 @apply ax-cursor-not-allowed;
+//                 .ax-menu-item-prefix,
+//                 .ax-menu-item-suffix {
+//                     @apply ax-opacity-40;
+//                 }
+//             }
+//         }
+//     }
+//     > ul {
+//         &.ax-rtl {
+//             .ax-menu-item-suffix {
+//                 ax-icon {
+//                     @apply ax-block ax-rotate-180;
+//                     &.ax-menu-active-icon {
+//                         @apply ax-rotate-90;
+//                     }
+//                 }
+//             }
+//         }
+//         &.ax-horizontal {
+//             @apply ax-flex ax-items-center ax-gap-4;
+//             li {
+//                 &.ax-divider {
+//                     @apply ax-w-[1px] ax-h-4;
+//                 }
+//             }
+//             > li {
+//                 @apply ax-cursor-pointer;
+//                 .ax-menu-item {
+//                     @apply ax-flex ax-items-start ax-justify-between;
+//                 }
+//             }
+//         }
+//         &.ax-vertical {
+//             @apply ax-w-full;
+//             &:not(&.ax-submenu-ul) {
+//                 @apply ax-space-y-4;
+//             }
+//             li {
+//                 &.ax-divider {
+//                     @apply ax-h-[1px] ax-my-2;
+//                 }
+//             }
+//             &.ax-submenu-ul {
+//                 @apply ax-p-2 ax-bg-white ax-border ax-border-neutral-200 ax-rounded-default ax-shadow;
+//                 @include control-states("surface");
 
-                li {
-                    &:not(.ax-state-disabled, .ax-divider) {
-                        @apply ax-py-1 ax-ps-4 ax-pe-2;
-                        &:hover {
-                            @apply ax-bg-light-200 dark:ax-bg-white/10 dark:ax-text-light-50;
-                        }
-                    }
-                    &.ax-divider {
-                        @apply ax-h-[1px] ax-my-2;
-                    }
-                }
-            }
-        }
-        &.ax-side-menu {
-            @apply ax-space-y-4;
-            li {
-                &.ax-divider {
-                    @apply ax-h-[1px] ax-my-2;
-                }
-                ul {
-                    @apply ax-ps-4 ax-space-y-4 ax-mt-4;
-                }
-            }
-        }
-    }
+//                 li {
+//                     &:not(.ax-state-disabled, .ax-divider) {
+//                         @apply ax-py-1 ax-ps-4 ax-pe-2;
+//                         &:hover {
+//                             @apply ax-bg-neutral-200 dark:ax-bg-white/10 dark:ax-text-neutral-50;
+//                         }
+//                     }
+//                     &.ax-divider {
+//                         @apply ax-h-[1px] ax-my-2;
+//                     }
+//                 }
+//             }
+//         }
+//         &.ax-side-menu {
+//             @apply ax-space-y-4;
+//             li {
+//                 &.ax-divider {
+//                     @apply ax-h-[1px] ax-my-2;
+//                 }
+//                 ul {
+//                     @apply ax-ps-4 ax-space-y-4 ax-mt-4;
+//                 }
+//             }
+//         }
+//     }
 
-    .ax-divider {
-        @apply ax-bg-light-200 ax-p-0 ax-cursor-auto dark:ax-bg-white/20;
-    }
-}
+//     .ax-divider {
+//         @apply ax-bg-neutral-200 ax-p-0 ax-cursor-auto dark:ax-bg-white/20;
+//     }
+// }