@acorex/styles 5.0.6 → 5.0.10

package/index.scss

@@ -1,2 +1,10 @@
+
 @import "./src/base/index.scss";
-@import "./src/components/index.scss";
+@import "./src/icons/style.scss";
+
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "./src/components/index.scss";
+
+@import "tailwindcss/utilities";
+@import "./src/utility/index.scss";

package/package.json

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

package/src/base/_colors.scss

@@ -1,16 +1,20 @@
 @import "../variables/colors";
-@mixin colors() {
-    @each $name, $color in $theme-colors {
-        @if (type-of($color) == "map") {
-            @each $subname, $variant in $color {
-                @if ($subname != "") {
+@mixin colors($array) {
+    @each $name,
+    $color in $array {
+        @if (type-of($color)=="map") {
+            @each $subname,
+            $variant in $color {
+                @if ($subname !="") {
                     --ax-color-#{$name}-#{$subname}: #{$variant};
-                } @else {
+                }
+                @else {
                     --ax-color-#{$name}: #{$variant};
                 }
             }
-        } @else {
+        }
+        @else {
             --ax-color-#{$name}: #{$color};
         }
     }
-}
+}

package/src/base/index.scss

@@ -1,7 +1,24 @@
 @import "./colors";
+[class*=" ax-ic-"],
+[class^=ax-ic-] {
+    vertical-align: middle;
+}
 
 :root {
     --ax-base-size: 8px;
     --ax-base-ratio: 5;
-    @include colors();
+    // --ax-default-background: 240, 240, 240;
+    // --ax-default-color: 107, 114, 128;
+    @include colors($theme-colors);
+}
+
+html,
+body {
+    background-color: rgb(var(--ax-color-default-background));
+    color: rgba(var(--ax-color-default-color));
 }
+
+// .ax-dark-mode,
+// .ax-dark-mode * {
+//     @include colors($theme-dark-colors);
+// }

package/src/components/_alert.scss

@@ -63,7 +63,7 @@
             }
         }
         &.ax-primary {
-            @apply ax-bg-primary-50 ax-text-primary;
+            @apply ax-bg-primary-50 ax-text-primary dark:ax-bg-primary-500 dark:ax-text-primary-fore;
             .ax-alert-content {
                 @apply ax-block ax-text-sm;
             }

package/src/components/_badge.scss

@@ -1,39 +1,11 @@
 @layer components {
     .ax-badge {
-        @apply ax-flex ax-items-center ax-justify-center ax-max-w-max ax-py-1 ax-px-2 ax-rounded ax-cursor-pointer ax-text-sm ax-whitespace-nowrap;
-        .ax-ic {
-            @apply ax-text-sm ax-ms-1;
+        @apply ax-rounded ax-py-1 ax-px-2 ax-align-middle ax-flex ax-justify-center ax-items-center ax-max-w-max ax-text-sm;
+        ax-prefix {
+            @apply ax-me-1.5
         }
-        &.ax-badge-rounded-full {
-            @apply ax-rounded-full;
-        }
-        &.ax-primary {
-            @apply ax-bg-primary-100 ax-text-primary;
-        }
-        &.ax-secondary {
-            @apply ax-bg-secondary-100 ax-text-secondary;
-        }
-        &.ax-warning {
-            @apply ax-bg-warning-100 ax-text-warning;
-        }
-        &.ax-danger {
-            @apply ax-bg-danger-100 ax-text-danger;
-        }
-        &.ax-success {
-            @apply ax-bg-success-100 ax-text-success;
-        }
-        &.ax-info {
-            @apply ax-bg-info-100 ax-text-info;
-        }
-        &.ax-light {
-            @apply ax-bg-light-100 ax-text-light-fore;
-        }
-        &.ax-dark {
-            @apply ax-bg-dark-100 ax-text-dark;
-        }
-        &.ax-sm {
-        }
-        &.ax-lg {
+        ax-suffix {
+            @apply ax-ms-1.5
         }
     }
-}
+}

package/src/components/_button.scss

@@ -3,7 +3,7 @@
     ax-button {
         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-center ax-rounded-md ax-border ax-px-4 ax-text-sm ax-font-medium ax-border-light-300 ax-text-light-600;
+        @apply ax-relative ax-inline-flex ax-items-center ax-justify-center ax-rounded-md ax-border ax-px-4 ax-text-sm ax-font-medium ax-border-light-300 ax-text-light-600 ax-select-none ax-whitespace-nowrap;
         @include respond(mobile) {
             @apply ax-text-base;
         }
@@ -13,6 +13,9 @@
         ax-suffix {
             @apply ax-flex ax-flex-row ax-ps-2;
         }
+        .ax-badge {
+            @apply ax-text-xs;
+        }
         &:focus {
             @apply ax-outline-none ax-z-10;
         }
@@ -31,16 +34,16 @@
             }
         }
         &.ax-sm {
-            height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 10px) !important;
-            line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 - 10px) !important;
+            height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - var(--ax-base-size)) !important;
+            line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 - var(--ax-base-size)) !important;
             @apply ax-text-sm;
             .ax-ic {
                 @apply ax-text-sm;
             }
         }
         &.ax-lg {
-            height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + 10px) !important;
-            line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 + 10px) !important;
+            height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + var(--ax-base-size)) !important;
+            line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 + var(--ax-base-size)) !important;
             @apply ax-text-lg;
             &.ax-button-icon {
                 @apply ax-px-3;
@@ -268,13 +271,13 @@
             }
         }
         &.ax-dark-twotone {
-            @apply ax-bg-dark-100 ax-text-dark ax-border-transparent;
+            @apply ax-bg-dark-300 ax-text-dark-fore ax-border-transparent;
             &:hover {}
             &:focus {
-                @apply ax-bg-dark-100 ax-text-dark-700;
+                @apply ax-bg-dark-100;
             }
             &:active {
-                @apply ax-bg-dark-200 ax-text-dark-700;
+                @apply ax-bg-dark-200;
             }
             &.ax-state-selected {
                 @apply ax-bg-dark-300 ax-text-dark-fore;

package/src/components/_calendar.scss

@@ -1,86 +1,130 @@
 @import "../variables/mixins";
+
 @layer components {
-    .ax-calendar {
-        @apply ax-border ax-border-solid ax-border-default ax-rounded ax-bg-white;
+    ax-calendar {
+        @apply ax-block ax-border ax-border-solid ax-border-default ax-rounded ax-bg-white ax-select-none;
+
+        &.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;
+
             .ax-nav-button {
                 @apply ax-col-span-8 ax-justify-start;
             }
+
             .ax-prev-button,
             .ax-next-button {
                 @apply ax-col-span-2 ax-justify-center ax-ms-1;
             }
         }
+
         .ax-calendar-body {
             @apply ax-m-2;
-            .ax-month-items,
-            .ax-day-items {
-                @apply ax-grid ax-grid-cols-7;
-            }
-            .ax-month-items {
-                .ax-month-item {
-                    @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;
-                }
-            }
-            .ax-day-items {
-                .ax-day-item {
+
+            .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;
+
                     &::before {
                         content: '';
                         padding-top: 100%;
                         float: left;
                     }
+
                     &::after {
                         content: '';
                         display: block;
                         clear: both;
                     }
+
                     &:hover {
                         @apply ax-bg-light-100;
                     }
+
+                    &.ax-state-disabled {
+                        @apply ax-text-gray-300 ax-cursor-default;
+                        &:hover {
+                            @apply ax-bg-transparent ax-text-gray-300;
+                        }
+                        // &::after {
+                        //     @apply ax-text-sm ax-cursor-not-allowed ax-text-danger-600;
+                        //     position: absolute;
+                        //     content: "\03a7";
+                        //     margin: auto;
+                        // }
+                    }
+
                     &.ax-state-holiday {
                         @apply ax-text-danger;
                         &:hover {
                             @apply ax-text-black;
                         }
                     }
+
                     &.ax-state-today {
-                        @apply ax-bg-success ax-text-success-fore;
+                        @apply ax-bg-opacity-70 ax-bg-primary-100 ax-text-primary;
+                        &:hover {
+                            @apply ax-text-primary;
+                        }
+                    }
+
+                    &.ax-state-other {
+                        @apply ax-opacity-50;
                     }
+
                     &.ax-state-selected {
-                        @apply ax-bg-primary ax-text-primary-fore;
+                        @apply ax-bg-primary ax-text-primary-fore ax-opacity-100;
+
+                        &:hover {
+                            @apply ax-text-primary-fore;
+                        }
                     }
+
                     &.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: ''
                         }
+
                         &.ax-state-event-primary {
                             &::after {
                                 @apply ax-bg-primary;
                             }
                         }
+
                         &.ax-state-event-secondary {
                             &::after {
                                 @apply ax-bg-secondary;
                             }
                         }
+
                         &.ax-state-event-success {
                             &::after {
                                 @apply ax-bg-success;
                             }
                         }
+
                         &.ax-state-event-warning {
                             &::after {
                                 @apply ax-bg-warning;
                             }
                         }
+
                         &.ax-state-event-danger {
                             &::after {
                                 @apply ax-bg-danger;
                             }
                         }
+
                         &.ax-state-event-info {
                             &::after {
                                 @apply ax-bg-info;
@@ -88,10 +132,28 @@
                         }
                     }
                 }
+
+                &.ax-calendar-slots-day {
+                    @apply ax-grid-cols-7;
+                }
+
+                &.ax-calendar-slots-year,
+                &.ax-calendar-slots-month {
+                    @apply ax-grid-cols-4;
+                }
+            }
+
+            .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;
+                }
             }
         }
+
         .ax-calendar-footer {
-            @apply ax-p-2 ax-bg-light-100;
+            @apply ax-flex ax-justify-center ax-p-2 ax-bg-light-100;
         }
     }
 }

package/src/components/_checkbox.scss

@@ -1,11 +1,19 @@
 @import "../variables/mixins";
 @layer components {
-    .ax-checkbox-container {
-        @apply ax-text-sm ax-font-medium ax-text-light-700;
+    ax-check-box {
+        @apply ax-justify-start ax-w-max ax-flex;
         @include respond(mobile) {
             @apply ax-text-base;
         }
-        .ax-checkbox {
+        .ax-wrapper {
+            &.ax-state-disabled {
+                @apply ax-cursor-not-allowed ax-opacity-60;
+                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-default ax-rounded ax-bg-white ax-text-primary ax-m-0 ax-outline-none ax-align-middle ax-appearance-none;
             &:checked,
             &:indeterminate {
@@ -21,5 +29,11 @@
                 @apply ax-ring-2 ax-ring-primary 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;
+            }
+        }
     }
 }

package/src/components/_editor-container.scss

@@ -2,7 +2,7 @@
 @layer components {
     .ax-editor-container {
         height: calc(var(--ax-base-size) * var(--ax-base-ratio));
-        @apply ax-flex ax-rounded ax-bg-white ax-overflow-hidden ax-shadow-sm ax-border ax-border-solid ax-border-default;
+        @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;
         &:focus-within {
             @apply ax-ring-2 ax-ring-primary ax-ring-opacity-100 ax-border-transparent;
         }
@@ -26,19 +26,20 @@
             }
         }
         ax-button {
-                @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;
-                    }
+            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-suffix,
-        .ax-prefix {
+        ax-suffix,
+        ax-prefix {
             * {
                 @apply ax-h-full ax-flex ax-justify-center ax-items-center ax-rounded-none;
             }
@@ -61,13 +62,13 @@
             }
         }
         &.ax-sm {
-            height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 10px) !important;
+            height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - var(--ax-base-size)) !important;
             .ax-input {
                 @apply ax-text-xs;
             }
         }
         &.ax-lg {
-            height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + 10px) !important;
+            height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + var(--ax-base-size)) !important;
             .ax-input {
                 @apply ax-text-lg;
             }

package/src/components/_label.scss

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

package/src/components/_popup.scss

@@ -1,81 +1,115 @@
 @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;
+
+        ax-prefix {
+            @apply ax-flex ax-col-span-6 ax-col-start-1 ax-col-end-7 ax-justify-start;
+        }
+
+        ax-suffix {
+            @apply ax-flex ax-col-span-6 ax-col-start-7 ax-col-end-13 ax-justify-end;
+        }
+    }
+
     .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;
+
         header {
             @apply ax-flex ax-justify-between ax-px-3 ax-py-2;
         }
+
         main {
             @apply ax-flex-1 ax-overflow-auto;
         }
+
         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;
-            .ax-prefix {
+
+            ax-prefix {
                 @apply ax-flex ax-col-span-6 ax-col-start-1 ax-col-end-7 ax-justify-start;
             }
-            .ax-suffix {
+
+            ax-suffix {
                 @apply ax-flex ax-col-span-6 ax-col-start-7 ax-col-end-13 ax-justify-end;
             }
         }
+
         header,
         footer {
             >div {
                 @apply ax-flex ax-items-center;
             }
         }
+
         &.ax-full {
             @apply ax-w-screen ax-h-screen;
         }
+
         &.ax-fit {
             width: fit-content;
         }
+
         @media all and (min-width: 1280px) {
             &.ax-sm {
                 width: 420px !important;
             }
+
             &.ax-md {
                 width: 680px !important;
             }
+
             &.ax-lg {
                 width: 1024px !important;
             }
         }
+
         @media all and (min-width: 1024px) and (max-width: 1279px) {
             &.ax-sm {
                 width: 100vw;
                 max-height: 100vh;
             }
+
             &.ax-md {
                 width: 500px !important;
             }
+
             &.ax-lg {
                 width: 900px !important;
             }
         }
+
         @media all and (min-width: 768px) and (max-width: 1023px) {
             &.ax-sm {
                 width: 100vw;
                 max-height: 100vh;
             }
+
             &.ax-md {
                 width: 500px !important;
             }
+
             &.ax-lg {
                 width: 700px !important;
             }
         }
+
         @media all and (min-width: 425px) and (max-width: 767px) {
             &.ax-sm {
                 width: 100vw;
                 max-height: 100vh;
             }
+
             &.ax-md,
             &.ax-lg {
                 width: 460px !important;
             }
         }
+
         @media all and (min-width: 0px) and (max-width: 424px) {
+
             &.ax-sm,
             &.ax-md,
             &.ax-lg {

package/src/components/_radio.scss

@@ -1,6 +1,6 @@
 @import "../variables/mixins";
 @layer components {
-    .ax-radio-container {
+    ax-radio {
         @apply ax-text-sm ax-font-medium ax-text-light-700;
         @include respond(mobile) {
             @apply ax-text-base;
@@ -15,5 +15,10 @@
                 @apply ax-ring-2 ax-ring-primary ax-ring-offset-2;
             }
         }
+        ax-label {
+            label {
+                @apply ax-mb-0;
+            }
+        }
     }
 }