@acorex/styles 5.0.12 → 5.0.16

package/src/components/_calendar.scss

@@ -1,19 +1,15 @@
-@import "../variables/mixins";
-
 @layer components {
     ax-calendar {
-        @apply ax-block ax-border ax-border-solid ax-border-default ax-rounded ax-bg-white ax-select-none;
+        @apply ax-block ax-border ax-border-solid ax-border-light-300 ax-rounded ax-bg-white ax-select-none dark:ax-bg-white/[0.03] dark:ax-border-transparent;
 
-        &.ax-state-disabled
-        {
-            .ax-calendar-slots
-            {
+        &.ax-state-disabled {
+            .ax-calendar-slots {
                 @apply ax-opacity-50 ax-cursor-default;
             }
         }
 
         .ax-calendar-header {
-            @apply ax-grid ax-grid-cols-12 ax-py-1 ax-px-2 ax-border-b ax-border-default ax-border-solid;
+            @apply ax-grid ax-grid-cols-12 ax-py-1 ax-px-2 ax-border-b ax-border-light-300 ax-border-solid dark:ax-border-transparent;
 
             .ax-nav-button {
                 @apply ax-col-span-8 ax-justify-start;
@@ -26,34 +22,34 @@
         }
 
         .ax-calendar-body {
-            @apply ax-m-2;
+            @apply ax-m-2 ;
 
             .ax-calendar-slots {
                 @apply ax-grid;
 
-                &>div {
-                    @apply ax-text-sm ax-text-black ax-text-center ax-relative ax-flex ax-items-center ax-justify-center ax-cursor-pointer ax-m-0.5 ax-rounded;
+                & > div {
+                    @apply ax-text-sm ax-text-black dark:ax-text-light-200 ax-text-center ax-relative ax-flex ax-items-center ax-justify-center ax-cursor-pointer ax-m-0.5 ax-rounded;
 
                     &::before {
-                        content: '';
+                        content: "";
                         padding-top: 100%;
                         float: left;
                     }
 
                     &::after {
-                        content: '';
+                        content: "";
                         display: block;
                         clear: both;
                     }
 
                     &:hover {
-                        @apply ax-bg-light-100;
+                        @apply ax-bg-light-100 dark:ax-bg-white/[0.07];
                     }
 
                     &.ax-state-disabled {
-                        @apply ax-text-gray-300 ax-cursor-default;
+                        @apply ax-text-light-300 ax-cursor-not-allowed;
                         &:hover {
-                            @apply ax-bg-transparent ax-text-gray-300;
+                            @apply ax-bg-transparent ax-text-light-300;
                         }
                         // &::after {
                         //     @apply ax-text-sm ax-cursor-not-allowed ax-text-danger-600;
@@ -66,14 +62,14 @@
                     &.ax-state-holiday {
                         @apply ax-text-danger;
                         &:hover {
-                            @apply ax-text-black;
+                            @apply ax-text-black dark:ax-text-light-100;
                         }
                     }
 
                     &.ax-state-today {
-                        @apply ax-bg-opacity-70 ax-bg-primary-100 ax-text-primary;
+                        @apply ax-bg-opacity-70 ax-bg-primary-100 ax-text-primary dark:ax-bg-primary dark:ax-text-primary-fore;
                         &:hover {
-                            @apply ax-text-primary;
+                            @apply ax-text-primary dark:ax-text-primary-fore;
                         }
                     }
 
@@ -92,7 +88,7 @@
                     &.ax-state-event {
                         &::after {
                             @apply ax-absolute ax-bottom-0.5 ax-rounded-full ax-h-0.5 ax-w-4 ax-bg-dark;
-                            content: ''
+                            content: "";
                         }
 
                         &.ax-state-event-primary {
@@ -146,14 +142,14 @@
             .ax-calendar-week {
                 @apply ax-grid ax-grid-cols-7 ax-my-2;
 
-                &>div {
-                    @apply ax-text-sm ax-text-black ax-text-center ax-relative ax-flex ax-items-center ax-justify-center ax-cursor-text ax-m-0.5;
+                & > div {
+                    @apply ax-text-sm ax-text-black dark:ax-text-light-200 ax-text-center ax-relative ax-flex ax-items-center ax-justify-center ax-cursor-text ax-m-0.5;
                 }
             }
         }
 
         .ax-calendar-footer {
-            @apply ax-flex ax-justify-center ax-p-2 ax-bg-light-100;
+            @apply ax-flex ax-justify-center ax-p-2 ax-bg-light-100 dark:ax-bg-transparent dark:ax-border-transparent;
         }
     }
-}
+}

package/src/components/_checkbox.scss

@@ -1,10 +1,7 @@
-@import "../variables/mixins";
 @layer components {
     ax-check-box {
         @apply ax-justify-start ax-w-max ax-flex;
-        @include respond(mobile) {
-            @apply ax-text-base;
-        }
+       
         .ax-wrapper {
             &.ax-state-disabled {
                 @apply ax-cursor-not-allowed ax-opacity-60;
@@ -14,7 +11,7 @@
             }
         }
         input[type=checkbox] {
-            @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-default ax-rounded ax-bg-white ax-text-primary ax-m-0 ax-outline-none ax-align-middle ax-appearance-none;
+            @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-light-300 ax-rounded ax-bg-white ax-text-primary ax-m-0 ax-outline-none ax-align-middle ax-appearance-none ax-controll;
             &:checked,
             &:indeterminate {
                 @apply ax-border-primary ax-bg-no-repeat ax-bg-current ax-bg-contain;

package/src/components/_datapager.scss

@@ -1,6 +1,6 @@
 @layer components {
     .ax-datapager {
-        @apply ax-flex ax-flex-row ax-items-center ax-px-1 ax-py-1 ax-text-black ax-border ax-border-solid ax-border-default ax-border-opacity-50 ax-bg-light-50 ax-rounded ax-shadow-md ax-max-w-full;
+        @apply ax-flex ax-flex-row ax-items-center ax-px-1 ax-py-1 ax-text-black ax-border ax-border-solid ax-border-light-300 ax-border-opacity-50 ax-bg-light-50 ax-rounded ax-shadow-md ax-max-w-full;
         .ax-button-group {
             @apply ax-border-none;
             ax-button {

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-default ax-border-none;
+        @apply ax-m-auto ax-shadow-sm ax-w-full ax-rounded ax-border ax-border-light-300 ax-border-none;
     }
 }

package/src/components/_dialog.scss

@@ -1,29 +1,26 @@
-@import "../variables/mixins";
 @layer components {
     .ax-dialog {
-        max-width: 512px;
-        width: 25vw;
-        @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-default ax-rounded-lg ax-outline-none ax-overflow-hidden;
-        @include respond(mobile) {
+        @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 ax-surface;
+        @screen sm {
             width: 98vw;
         }
-        @include respond(tablet) {
-            width: 35vw;
+        @screen md {
+            width: 25vw;
         }
         .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;
+                @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;
+                @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;
+                @apply ax-text-sm ax-my-1.5 ax-text-light-500 dark:ax-text-light-200;
             }
         }
         .ax-dialog-dismiss-icon {
@@ -33,30 +30,31 @@
         .ax-dialog-footer {
             @apply ax-col-span-12 ax-flex ax-justify-end;
         }
+        &.ax-primary {
+            .ax-dialog-icon {
+                @apply ax-text-primary ax-bg-primary-200;
+            }
+        }
         &.ax-success {
             .ax-dialog-icon {
-                @apply ax-text-success ax-bg-success-100;
+                @apply ax-text-success ax-bg-success-200;
             }
         }
         &.ax-danger {
             .ax-dialog-icon {
-                @apply ax-text-danger ax-bg-danger-100;
+                @apply ax-text-danger ax-bg-danger-200;
             }
         }
         &.ax-warning {
             .ax-dialog-icon {
-                @apply ax-text-warning ax-bg-warning-100;
+                @apply ax-text-warning ax-bg-warning-200;
             }
         }
         &.ax-info {
             .ax-dialog-icon {
-                @apply ax-text-info ax-bg-info-100;
-            }
-        }
-        &.ax-primary {
-            .ax-dialog-icon {
-                @apply ax-text-primary ax-bg-primary-100;
+                @apply ax-text-info ax-bg-info-200;
             }
         }
+     
     }
 }

package/src/components/_dropdown.scss

@@ -1,136 +1,180 @@
 @layer components {
-    ax-drop-down {
+
+    ax-drop-down,
+    .ax-drop-down {
         display: contents;
+
         .ax-dropdown-content {
-            @apply ax-text-sm ax-flex-1 ax-overflow-y-hidden ax-overscroll-x-auto;
+            @apply ax-flex ax-flex-auto ax-text-sm ax-overflow-y-hidden ax-overscroll-x-auto;
         }
     }
+
     .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;
+        @apply ax-bg-white ax-controll;
+
         &.ax-dropdown-list {
             @apply ax-border ax-border-solid ax-flex ax-flex-col ax-py-1 ax-rounded ax-shadow-sm;
+
             ax-button-item {
                 height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
                 line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2) !important;
                 @apply ax-relative ax-inline-flex ax-items-center ax-justify-start ax-px-4 ax-text-sm ax-text-light-600 ax-cursor-pointer;
+
                 &.ax-divide {
                     @apply ax-border-t ax-border ax-border-solid;
                 }
+
                 &.ax-state-disabled {
                     @apply ax-cursor-not-allowed ax-opacity-60;
                 }
+
                 ax-prefix {
                     @apply ax-flex ax-flex-row ax-pe-2;
                 }
+
                 ax-suffix {
                     @apply ax-flex ax-flex-row ax-ps-2;
                 }
+
                 &.ax-primary {
                     @apply ax-bg-transparent ax-text-primary-500 ax-border-transparent;
+
                     &:hover,
                     &:focus {
                         @apply ax-bg-primary-50 ax-text-primary-600;
                     }
+
                     &:active {
                         @apply ax-bg-primary-100 ax-text-primary-700;
                     }
+
                     &.ax-state-selected {
                         @apply ax-bg-primary-200;
                     }
                 }
+
                 &.ax-secondary {
                     @apply ax-bg-transparent ax-text-secondary-500 ax-border-transparent;
+
                     &:hover,
                     &:focus {
                         @apply ax-bg-secondary-50 ax-text-secondary-600;
                     }
+
                     &:active {
                         @apply ax-bg-secondary-100 ax-text-secondary-700;
                     }
+
                     &.ax-state-selected {
                         @apply ax-bg-secondary-200;
                     }
                 }
+
                 &.ax-warning {
                     @apply ax-bg-transparent ax-text-warning-500 ax-border-transparent;
+
                     &:hover,
                     &:focus {
                         @apply ax-bg-warning-50 ax-text-warning-600;
                     }
+
                     &:active {
                         @apply ax-bg-warning-100 ax-text-warning-700;
                     }
+
                     &.ax-state-selected {
                         @apply ax-bg-warning-200;
                     }
                 }
+
                 &.ax-danger {
                     @apply ax-bg-transparent ax-text-danger-500 ax-border-transparent;
+
                     &:hover,
                     &:focus {
                         @apply ax-bg-danger-50 ax-text-danger-600;
                     }
+
                     &:active {
                         @apply ax-bg-danger-100 ax-text-danger-700;
                     }
+
                     &.ax-state-selected {
                         @apply ax-bg-danger-200;
                     }
                 }
+
                 &.ax-success {
                     @apply ax-bg-transparent ax-text-success-500 ax-border-transparent;
+
                     &:hover,
                     &:focus {
                         @apply ax-bg-success-50 ax-text-success-600;
                     }
+
                     &:active {
                         @apply ax-bg-success-100 ax-text-success-700;
                     }
+
                     &.ax-state-selected {
                         @apply ax-bg-success-200;
                     }
                 }
+
                 &.ax-info {
                     @apply ax-bg-transparent ax-text-info-500 ax-border-transparent;
+
                     &:hover,
                     &:focus {
                         @apply ax-bg-info-50 ax-text-info-600;
                     }
+
                     &:active {
                         @apply ax-bg-info-100 ax-text-info-700;
                     }
+
                     &.ax-state-selected {
                         @apply ax-bg-info-200;
                     }
                 }
+
                 &.ax-dark {
                     @apply ax-bg-transparent ax-text-dark-500 ax-border-transparent;
+
                     &:hover,
                     &:focus {
                         @apply ax-bg-dark-50 ax-text-dark-600;
                     }
+
                     &:active {
                         @apply ax-bg-dark-100 ax-text-dark-700;
                     }
+
                     &.ax-state-selected {
                         @apply ax-bg-dark-200;
                     }
                 }
+
                 &.ax-light {
                     @apply ax-bg-transparent ax-text-light-fore ax-border-transparent;
+
                     &:hover,
                     &:focus {
                         @apply ax-bg-light-500 ax-text-light-800;
                     }
+
                     &:active {
                         @apply ax-bg-light-100 ax-text-light-700;
                     }
+
                     &.ax-state-selected {
                         @apply ax-bg-light-600;
                     }

package/src/components/_editor-container.scss

@@ -1,30 +1,47 @@
-@import "../variables/mixins";
 @layer components {
     .ax-editor-container {
         height: calc(var(--ax-base-size) * var(--ax-base-ratio));
-        @apply ax-flex ax-rounded ax-bg-white ax-bg-opacity-50 ax-overflow-hidden ax-shadow-sm ax-border ax-border-solid ax-border-default;
+        @apply ax-flex ax-rounded ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300 ax-controll;
         &:focus-within {
             @apply ax-ring-2 ax-ring-primary ax-ring-opacity-100 ax-border-transparent;
         }
         &.ax-button-icon {
             @apply ax-px-2;
         }
+        &:first-child {
+        }
         [class*=" ax-ic-"],
-        [class^=ax-ic-] {
+        [class^="ax-ic-"] {
             font-size: 1.2rem !important;
             line-height: 1 !important;
         }
         .ax-input {
             line-height: 4 !important;
             min-width: 1%;
-            @apply ax-text-sm ax-flex-1 ax-bg-transparent ax-border-none ax-px-2;
-            @include respond(mobile) {
-                @apply ax-text-base;
+            @apply ax-text-base ax-flex-1 ax-bg-transparent ax-border-none ax-px-2;
+            @screen md {
+                @apply ax-text-sm;
             }
             &:focus {
                 box-shadow: none;
             }
         }
+        ax-prefix {
+            * {
+                @apply ax-rounded-s;
+            }
+        }
+        ax-suffix {
+            * {
+                @apply ax-rounded-e;
+            }
+        }
+        ax-prefix,
+        ax-suffix {
+            * {
+                @apply ax-h-full ax-flex ax-justify-center ax-items-center ax-rounded-none;
+            }
+        }
         ax-button {
             height: 100% !important;
             @apply ax-rounded-none;
@@ -38,12 +55,7 @@
                 }
             }
         }
-        ax-suffix,
-        ax-prefix {
-            * {
-                @apply ax-h-full ax-flex ax-justify-center ax-items-center ax-rounded-none;
-            }
-        }
+        
         &.ax-state-disabled {
             background-color: rgb(var(--ax-color-disabled)) !important;
             color: rgb(var(--ax-color-disabled-fore)) !important;
@@ -74,4 +86,4 @@
             }
         }
     }
-}
+}

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;
+            @apply ax-block ax-font-medium ax-mb-2 ax-text-sm ax-text-light-700 dark:ax-text-light-100;
         }
     }
 }

package/src/components/_list.scss

@@ -4,7 +4,7 @@
     }
     .ax-list-container {
         .ax-list-items-container {
-            @apply ax-bg-white ax-py-1 ax-rounded ax-shadow ax-overflow-y-auto ax-h-full ax-border ax-border-solid ax-border-default;
+            @apply ax-py-1 ax-rounded ax-shadow ax-overflow-y-auto ax-h-full ax-border ax-border-solid ax-border-light-300 dark:ax-border-transparent;
             &.ax-vertical {
                 @apply ax-grid ax-grid-cols-1;
                 &.ax-divide {
@@ -22,11 +22,11 @@
                     }
                     &:hover {
                         &:not(.ax-state-selected) {
-                            @apply ax-bg-light-100 ax-text-light-fore;
+                            @apply ax-bg-light-100 ax-text-light-fore dark:ax-bg-white/[0.09] dark:ax-text-light-50;
                         }
                     }
                     &.ax-state-selected {
-                        @apply ax-bg-primary-100 ax-text-primary ax-font-medium;
+                        @apply ax-bg-primary-100 ax-text-primary ax-font-medium dark:ax-bg-primary dark:ax-text-primary-50;
                     }
                     &:focus,
                     &.ax-state-focus {

package/src/components/_popup.scss

@@ -1,7 +1,7 @@
 @layer components {
 
     ax-page-footer {
-        @apply ax-grid ax-grid-cols-12 ax-gap-2 ax-px-3 ax-py-2 ax-border-t ax-border-solid ax-border-default;
+        @apply ax-grid ax-grid-cols-12 ax-gap-2 ax-px-3 ax-py-2 ax-border-t 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;
@@ -15,7 +15,7 @@
     .ax-popup {
         max-height: 98vh;
         min-height: fit-content;
-        @apply ax-flex ax-flex-col ax-bg-white ax-w-6/12 ax-shadow-lg ax-border ax-border-solid ax-border-default ax-rounded ax-outline-none ax-p-0;
+        @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-surface;
 
         header {
             @apply ax-flex ax-justify-between ax-px-3 ax-py-2;
@@ -26,7 +26,7 @@
         }
 
         footer {
-            @apply ax-grid ax-grid-cols-12 ax-gap-2 ax-px-3 ax-py-2 ax-border-t ax-border-solid ax-border-default;
+            @apply ax-grid ax-grid-cols-12 ax-gap-2 ax-px-3 ax-py-2 ax-border-t ax-border-solid ax-border-light-300 dark:ax-border-white/[0.2];
 
             ax-prefix {
                 @apply ax-flex ax-col-span-6 ax-col-start-1 ax-col-end-7 ax-justify-start;

package/src/components/_radio.scss

@@ -1,12 +1,9 @@
-@import "../variables/mixins";
 @layer components {
     ax-radio {
         @apply ax-text-sm ax-font-medium ax-text-light-700;
-        @include respond(mobile) {
-            @apply ax-text-base;
-        }
+      
         .ax-radio {
-            @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-default ax-rounded-full ax-bg-white ax-text-primary ax-m-0 ax-outline-none ax-align-middle ax-appearance-none;
+            @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-light-300 ax-rounded-full ax-bg-white ax-text-primary ax-m-0 ax-outline-none ax-align-middle ax-appearance-none ax-controll;
             &:checked {
                 @apply ax-border-primary ax-bg-no-repeat ax-bg-current ax-bg-contain;
                 background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");

package/src/components/_range-slider.scss

@@ -2,13 +2,14 @@
     .ax-range-slider {
         @apply ax-w-full;
         .ax-range-slider-input {
-            @apply ax-appearance-none ax-w-full ax-h-2 ax-bg-light-100 ax-rounded-full ax-outline-none ax-transition-all;
+            @apply ax-appearance-none ax-w-full ax-h-2 ax-bg-light-100 ax-rounded-full ax-outline-none ax-transition-all dark:ax-bg-light-600;
             &::-webkit-slider-thumb {
-                @apply ax-appearance-none ax-w-5 ax-h-5 ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-default ax-rounded-full ax-cursor-pointer;
+                @apply ax-appearance-none ax-w-5 ax-h-5 ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300 ax-rounded-full ax-cursor-pointer dark:ax-bg-light-500;
             }
             &::-moz-range-thumb {
-                @apply ax-appearance-none ax-w-5 ax-h-5 ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-default ax-rounded-full ax-cursor-pointer;
+                @apply ax-appearance-none ax-w-5 ax-h-5 ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300 ax-rounded-full ax-cursor-pointer dark:ax-bg-light-500;
             }
+            
         }
     }
 }

package/src/components/_skeleton.scss

@@ -1,9 +1,7 @@
 @layer utilities {
-    $base-color: #ddd;
     $shine-color: #eeeeee;
     .ax-skeleton {
-        @apply ax-relative ax-overflow-hidden;
-        background-color: $base-color;
+        @apply ax-relative ax-overflow-hidden ax-bg-light-200 dark:ax-bg-light-700;
         &.ax-skeleton-animate {
             &::before {
                 content: "";

package/src/components/_switch.scss

@@ -12,6 +12,7 @@
             &:checked {
                 &+.ax-switch-slider {
                     background-color: rgb(var(--ax-color-primary));
+                    
                     &::before {
                         -webkit-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 18px));
                         -ms-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 18px));
@@ -31,6 +32,7 @@
             -webkit-transition: 0.2s;
             transition: 0.2s;
             border-radius: 25px;
+            @apply ax-controll;
             &::before {
                 content: "";
                 position: absolute;