@acorex/styles 5.0.35 → 5.0.39

package/package.json

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

package/src/components/_button.scss

@@ -81,7 +81,7 @@
                     @apply ax-ring-2 ax-ring-offset-2 ax-ring-primary-500;
                 }
                 &:active {
-                    @apply ax-bg-primary-700 ax-ring-2 ax-ring-offset-2 ax-ring-primary-700;
+                    @apply ax-bg-primary-800 ax-ring-2 ax-ring-offset-2 ax-ring-primary-800;
                 }
             }
 

package/src/components/_calendar.scss

@@ -45,6 +45,9 @@
                     &:hover {
                         @apply ax-bg-light-100 dark:ax-bg-white/[0.07];
                     }
+                    &:focus {
+                        @apply ax-ring-2 ax-ring-primary-500 ax-outline-none;
+                    }
 
                     &.ax-state-disabled {
                         @apply ax-text-light-300 ax-cursor-not-allowed;
@@ -152,4 +155,12 @@
             @apply ax-flex ax-justify-center ax-p-2 ax-bg-light-100 dark:ax-bg-transparent dark:ax-border-transparent;
         }
     }
+
+    .ax-overlay-pane
+    {
+        ax-calendar
+        {
+            @apply ax-border-none
+        }
+    }
 }

package/src/components/_checkbox.scss

@@ -1,38 +1,63 @@
 @layer components {
-    ax-check-box,
-    .ax-check-box {
-        @apply ax-justify-start ax-w-max ax-flex;
+
+    .ax-check-box,
+    ax-check-box {
+
+        .ax-state-error {
+            @apply ax-text-danger-500;
+
+            input[type="checkbox"] {
+                @apply ax-border-danger-500;
+            }
+        }
+        .ax-state-success {
+            @apply  ax-text-success-600;
+
+            input[type="checkbox"] {
+                @apply ax-border-success-600;
+            }
+        }
+
 
         .ax-wrapper {
             &.ax-state-disabled {
                 @apply ax-cursor-not-allowed ax-opacity-80;
+
                 input[type="checkbox"] {
                     @apply ax-cursor-not-allowed;
                 }
             }
         }
+
         input[type="checkbox"] {
             @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-light-300 ax-rounded ax-bg-white ax-text-primary-500 ax-m-0 ax-outline-none ax-align-middle ax-appearance-none;
             @include control-dark("editor");
+
             &:checked,
             &:indeterminate {
                 @apply ax-border-primary-500 ax-bg-no-repeat ax-bg-primary-500 ax-bg-contain #{!important};
             }
+
             &:checked {
                 background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
             }
+
             &:indeterminate {
                 background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==");
             }
+
             &:focus {
                 @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2;
             }
-        }
-        ax-label {
-            @apply ax-items-center ax-mb-0 ax-font-semibold ax-text-sm ax-text-light-700;
-            label {
-                @apply ax-mb-0;
+
+            &.ax-state-disabled {
+                @apply ax-opacity-70;
             }
+
+            &.ax-state-disabled {
+                @apply ax-opacity-60;
+            }
+
         }
     }
-}
+}

package/src/components/_dropdown.scss

@@ -20,6 +20,37 @@
         @apply ax-bg-white ax-border ax-rounded ax-border-light-300;
         @include control-dark("surface");
 
+        &.ax-overlay-center {
+            @apply ax-h-fit;
+            max-height: 90vh;
+            width: 80vw;
+        }
+
+        &.ax-overlay-actionsheet {
+            @apply ax-w-full;
+            height: 50vh;
+            max-height: 70vh;
+        }
+
+        &.ax-overlay-full {
+            @apply ax-w-screen ax-h-screen;
+        }
+
+        .ax-overlay-pane-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;
 
@@ -91,7 +122,7 @@
                     }
 
                     &.ax-state-selected {
-                        @apply ax-bg-warning-200  dark:ax-bg-warning-600 dark:ax-text-warning-100;
+                        @apply ax-bg-warning-200 dark:ax-bg-warning-600 dark:ax-text-warning-100;
                     }
                 }
 
@@ -108,7 +139,7 @@
                     }
 
                     &.ax-state-selected {
-                        @apply ax-bg-danger-200  dark:ax-bg-danger-600 dark:ax-text-danger-100;
+                        @apply ax-bg-danger-200 dark:ax-bg-danger-600 dark:ax-text-danger-100;
                     }
                 }
 
@@ -125,7 +156,7 @@
                     }
 
                     &.ax-state-selected {
-                        @apply ax-bg-success-200  dark:ax-bg-success-600 dark:ax-text-success-100;
+                        @apply ax-bg-success-200 dark:ax-bg-success-600 dark:ax-text-success-100;
                     }
                 }
 
@@ -142,16 +173,16 @@
                     }
 
                     &.ax-state-selected {
-                        @apply ax-bg-info-200  dark:ax-bg-info-600 dark:ax-text-info-100;
+                        @apply ax-bg-info-200 dark:ax-bg-info-600 dark:ax-text-info-100;
                     }
                 }
 
                 &.ax-dark-default {
-                    @apply ax-bg-transparent ax-text-dark-500 ax-border-transparent  dark:ax-text-dark-100;
+                    @apply ax-bg-transparent ax-text-dark-500 ax-border-transparent dark:ax-text-dark-100;
 
                     &:hover,
                     &:focus {
-                        @apply ax-bg-dark-50 ax-text-dark-600 dark:ax-bg-dark-400  dark:ax-text-dark-50;
+                        @apply ax-bg-dark-50 ax-text-dark-600 dark:ax-bg-dark-400 dark:ax-text-dark-50;
                     }
 
                     &:active {
@@ -159,7 +190,7 @@
                     }
 
                     &.ax-state-selected {
-                        @apply ax-bg-dark-200  dark:ax-bg-dark-400 dark:ax-text-dark-100;
+                        @apply ax-bg-dark-200 dark:ax-bg-dark-400 dark:ax-text-dark-100;
                     }
                 }
 
@@ -176,7 +207,7 @@
                     }
 
                     &.ax-state-selected {
-                        @apply ax-bg-light-200  dark:ax-bg-light-600 dark:ax-text-light-100;
+                        @apply ax-bg-light-200 dark:ax-bg-light-600 dark:ax-text-light-100;
                     }
                 }
             }

package/src/components/_editor-container.scss

@@ -2,81 +2,123 @@
     .ax-editor-container {
         height: calc(var(--ax-base-size) * var(--ax-base-ratio));
         @apply ax-flex ax-rounded ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300;
-        @include control-dark('editor');
+        @include control-dark("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;
         }
-        &:first-child {
-        }
+
+        &:first-child {}
+
         [class*=" ax-ic-"],
         [class^="ax-ic-"] {
             font-size: 1.2rem !important;
             line-height: 1 !important;
         }
-        .ax-input {
-            line-height: 4 !important;
-            min-width: 1%;
-        foont-size:inherit;
 
+        .ax-input {
+            width: 1%;
             @apply ax-flex-1 ax-bg-transparent ax-border-none ax-px-2.5;
-            
+
             &:focus {
                 box-shadow: none;
             }
         }
+
+
         ax-prefix {
-            *,ax-button {
+
+            *,
+            ax-button,ax-addon {
                 @apply ax-rounded-s;
             }
+            
         }
+
         ax-suffix {
-            *,ax-button {
+
+            *,
+            ax-button, ax-addon {
                 @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-addon{
+                @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-state-disabled {
             background-color: rgb(var(--ax-color-disabled)) !important;
             color: rgb(var(--ax-color-disabled-fore)) !important;
             @apply ax-cursor-not-allowed;
+
             &:hover {
                 background-color: rgb(var(--ax-color-disabled)) !important;
             }
         }
+
         &.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-sm {
         //     height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - var(--ax-base-size)) !important;
         //     .ax-input {
@@ -90,4 +132,4 @@
         //     }
         // }
     }
-}
+}

package/src/components/_fieldset.scss

@@ -0,0 +1,8 @@
+@layer components{
+    fieldset{
+        @apply ax-grid ax-col-span-6 ax-grid-cols-6 ax-gap-4 ax-border ax-border-solid ax-border-gray-300 ax-p-3 ax-rounded;
+        legend{
+            @apply ax-text-sm ax-px-1;
+        }
+    }
+}

package/src/components/_form.scss

@@ -2,7 +2,7 @@
     ax-form-field {
         @apply ax-mb-2 ax-relative;
         .ax-error-msg {
-            @apply ax-absolute ax--bottom-5 ax-text-danger-500 ax-text-xs;
+            @apply ax-block ax-text-danger-500 ax-text-xs ax-py-2;
         }
     }
 }

package/src/components/_input.scss

@@ -1,8 +1,7 @@
 @layer components {
     .ax-input {
         @apply ax-outline-none ax-p-0;
-        foont-size:inherit;
-        line-height: 20px;
+        font-size:inherit;
         &:focus {
             @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent;
         }

package/src/components/_list.scss

@@ -2,48 +2,72 @@
     .ax-list {
         display: block;
     }
+
     .ax-list-container {
         .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 {
                     height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
                     @apply ax-text-sm ax-flex ax-items-center ax-px-3;
+
                     &:focus,
                     &:focus-visible {
                         @apply ax-outline-none;
                     }
+
                     &:hover {
-                        &:not(.ax-state-selected) {
-                            @apply ax-bg-light-100 ax-text-light-fore dark:ax-bg-white/[0.09] dark:ax-text-light-50;
-                        }
+                        @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-500 ax-font-medium dark:ax-bg-primary-500 dark:ax-text-primary-50;
+                        @apply ax-text-primary-500 ax-font-medium dark:ax-text-primary-50;
+                    }
+                    
+                    &:not(.ax-check-box)
+                    {
+                        &.ax-state-selected {
+                            @apply ax-bg-primary-50 dark:ax-bg-white/[0.16];
+                        }
+                    }
+
+                    &.ax-state-disabled {
+                        @apply ax-cursor-not-allowed ax-opacity-70;
                     }
+
                     &:focus,
                     &.ax-state-focus {
                         &:not(.ax-state-selected) {
-                            @apply ax-outline-none ax-bg-primary-50 ax-text-primary-500;
+                            @apply ax-outline-none ax-bg-primary-50 ax-text-primary-500 dark:ax-bg-white/[0.16] dark:ax-text-white;
                         }
                     }
                 }
             }
         }
+
         .ax-list-loading-container {
             @apply ax-flex ax-justify-center ax-p-2;
         }
     }
+
     .cdk-overlay-container {
         .ax-list-items-container {
             max-height: 25vh;
+
+            &.ax-full {
+                max-height: 75vh;
+                height: fit-content;
+            }
         }
     }
 }

package/src/components/_loading.scss

@@ -1,4 +1,5 @@
 @layer components {
+    
     .ax-loading {
     }
 
@@ -38,6 +39,10 @@
         background: rgba(var(--ax-color-white) 2);
     }
 
+    ax-loading-spinner{
+        @apply ax-flex;
+    }
+
     @keyframes pulse2 {
 
         0%,

package/src/components/_numberbox.scss

@@ -0,0 +1,17 @@
+@layer components {
+
+    ax-number-box,
+    .ax-number-box {
+        .ax-number-box-arrows {
+            @apply ax-grid ax-invisible;
+        }
+
+        &:focus,
+        &:focus-within,
+        &:hover {
+            .ax-number-box-arrows {
+                @apply ax-visible;
+            }
+        }
+    }
+}

package/src/components/_popup.scss

@@ -1,5 +1,4 @@
 @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-light-300 dark:ax-border-light-700;
 
@@ -14,10 +13,21 @@
 
     .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;
-        @include control-dark('surface');
+        @include control-dark("surface");
 
         header {
-            @apply ax-flex ax-justify-between ax-px-3 ax-py-2;
+            @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;
+                }
+            }
         }
 
         main {
@@ -38,13 +48,13 @@
 
         header,
         footer {
-            >div {
+            > div {
                 @apply ax-flex ax-items-center;
             }
         }
 
         &.ax-popup-full {
-            @apply ax-w-screen ax-h-screen ax-max-h-screen;
+            @apply ax-w-screen ax-h-full ax-max-h-full;
         }
 
         &.ax-fit {
@@ -109,14 +119,13 @@
         }
 
         @media all and (min-width: 0px) and (max-width: 424px) {
-
             &.ax-popup-sm,
             &.ax-popup-md,
             &.ax-popup-lg {
                 width: 100vw;
-                height: 100vh;
-                max-height: 100vh;
+                height: 100%;
+                max-height: 100%;
             }
         }
     }
-}
+}

package/src/components/_radio.scss

@@ -13,6 +13,15 @@
             &:focus {
                 @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2;
             }
+            &.ax-state-disabled{
+                @apply ax-opacity-70;
+            }
+            &.ax-state-disabled{
+                @apply ax-opacity-60;
+            }
+            &.ax-state-error{
+                @apply ax-border-danger-500;
+            }
         }
         ax-label {
             label {

package/src/components/index.scss

@@ -10,10 +10,12 @@
 @import "./drawer";
 @import "./dropdown";
 @import "./editor-container";
+@import "./fieldset";
 @import "./form";
 @import "./input";
 @import "./label";
 @import "./list";
+@import "./numberbox";
 @import "./loading";
 @import "./popup";
 @import "./radio";

package/src/variables/_colors.scss

@@ -105,17 +105,17 @@ $theme-colors: (
         "900": "6 6 6",
     ),
     "light": (
-        "": "107 114 128",
-        "fore": "17 24 39",
-        "50": "249 250 251",
-        "100": "243 244 246",
-        "200": "229 231 235",
-        "300": "209 213 219",
-        "400": "156 163 175",
-        "500": "107 114 128",
-        "600": "75 85 99",
-        "700": "55 65 81",
-        "800": "31 41 55",
-        "900": "17 24 39",
+        "": "100 116 139",
+        "fore": "15 23 42",
+        "50": "248 250 252",
+        "100": "241 245 249",
+        "200": "226 232 240",
+        "300": "203 213 225",
+        "400": "148 163 184",
+        "500": "100 116 139",
+        "600": "71 85 105",
+        "700": "51 65 85",
+        "800": "30 41 59",
+        "900": "15 23 42",
     )
 );