@acorex/styles 5.0.38 → 5.0.39

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@acorex/styles",
-    "version": "5.0.38",
+    "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;

package/src/components/_checkbox.scss

@@ -3,6 +3,21 @@
     .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 {
@@ -42,9 +57,7 @@
             &.ax-state-disabled {
                 @apply ax-opacity-60;
             }
-            &.ax-state-error{
-                @apply ax-border-danger-500;
-            }
+
         }
     }
 }

package/src/components/_dropdown.scss

@@ -1,5 +1,4 @@
 @layer components {
-
     ax-drop-down,
     .ax-drop-down {
         display: contents;
@@ -45,7 +44,10 @@
             }
 
             i {
-                @apply ax-text-primary-500 ax-cursor-pointer ax-text-xl;
+                @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;
+                }
             }
         }
 
@@ -211,4 +213,4 @@
             }
         }
     }
-}
+}

package/src/components/_editor-container.scss

@@ -3,56 +3,82 @@
         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");
+
         @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 {
-            min-width: 1%;
+            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;
                 }
@@ -63,19 +89,36 @@
             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 {
@@ -89,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-block ax-text-danger-500 ax-text-xs;
+            @apply ax-block ax-text-danger-500 ax-text-xs ax-py-2;
         }
     }
 }

package/src/components/_list.scss

@@ -28,9 +28,7 @@
                     }
 
                     &: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-text-primary-500 ax-font-medium dark:ax-text-primary-50;
@@ -39,7 +37,7 @@
                     &:not(.ax-check-box)
                     {
                         &.ax-state-selected {
-                            @apply ax-bg-primary-50;
+                            @apply ax-bg-primary-50 dark:ax-bg-white/[0.16];
                         }
                     }
 
@@ -50,7 +48,7 @@
                     &: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;
                         }
                     }
                 }

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,7 +48,7 @@
 
         header,
         footer {
-            >div {
+            > div {
                 @apply ax-flex ax-items-center;
             }
         }
@@ -109,7 +119,6 @@
         }
 
         @media all and (min-width: 0px) and (max-width: 424px) {
-
             &.ax-popup-sm,
             &.ax-popup-md,
             &.ax-popup-lg {
@@ -119,4 +128,4 @@
             }
         }
     }
-}
+}

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",
     )
 );