@acorex/styles 5.9.0 → 6.0.0

package/index.js

@@ -1,5 +1,6 @@
 const plugin = require("tailwindcss/plugin");
 const withAnimations = require("animated-tailwindcss");
+
 function withOpacityValue(variable) {
   return ({ opacityValue }) => {
     if (opacityValue === undefined) {
@@ -11,15 +12,12 @@ function withOpacityValue(variable) {
 
 module.exports = withAnimations({
   prefix: "ax-",
-  darkMode: "class",
-  mode: "jit",
-  content:['./projects/documentation/**/*.{html,ts,scss}",'],
-  // content: [
-  //   "./src/**/*.{html,ts,scss}",
-  //   "./projects/**/*.{html,ts,scss}",
-  //   "./dist/acorex/**/*.{html,ts,scss}",
-  //   "./node_modules/@acorex/**/*.{html,ts,js,mjs,scss}",
-  // ],
+  content: [
+    "./src/**/*.{html,ts,scss}",
+    "./projects/**/*.{html,ts,scss}",
+    "./dist/acorex/**/*.{html,ts,scss}",
+    "./node_modules/@acorex/**/*.{html,ts,js,mjs,scss}",
+  ],
   darkMode: "class", // or 'media' or 'class'
   theme: {
     extend: {
@@ -157,9 +155,7 @@ module.exports = withAnimations({
       },
     },
   },
-  variants: {
-    extend: {},
-  },
+ 
   plugins: [
     plugin(function ({ addUtilities }) {
       const acorexClasses = {

package/index.scss

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

package/package.json

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

package/src/components/_action-sheet.scss

@@ -1,5 +1,4 @@
 @layer components {
-    ax-action-sheet,
     .ax-action-sheet {
         .ax-action-sheet-container {
             @apply ax-fixed ax-bottom-0 ax-left-1/2 -ax-translate-x-1/2 ax-z-[9999] ax-w-1/3 ax-rounded-t-default ax-overflow-hidden;
@@ -12,7 +11,7 @@
             }
             .ax-action-sheet-items {
                 @apply ax-flex ax-flex-col ax-pb-3 ax-overflow-x-hidden ax-overflow-y-auto;
-                    ax-button {
+                    .ax-button {
                         @apply ax-rounded-none ax-w-full ax-text-start ax-justify-start;
                     }
             }

package/src/components/_alert.scss

@@ -1,5 +1,5 @@
 @layer components {
-    ax-alert {
+    .ax-alert {
         @apply ax-relative ax-w-full ax-flex ax-flex-col ax-bg-light-100 ax-text-light-fore ax-rounded ax-overflow-hidden ax-text-sm;
         transition: visibility 0s, opacity 0.5s ease-in-out;
 
@@ -13,23 +13,23 @@
             opacity: 1;
         }
 
-        ax-header {
+        .ax-header {
             @apply ax-flex ax-px-3.5 ax-items-center ax-py-3 ax-bg-transparent ax-border-none ax-justify-start;
-            ax-icon {
+            .ax-icon {
                 @apply ax-text-2xl;
             }
         }
 
         .ax-alert-body {
             @apply ax-flex-1 ax-p-3.5;
-            ax-icon {
+            .ax-icon {
                 @apply ax-me-3 ax-text-2xl;
             }
-            ax-button {
+            .ax-button {
                 --ax-base-size: 6px;
                 @apply ax-ring-offset-0 #{!important};
             }
-            ax-content {
+            .ax-content {
                 @apply ax-flex ax-items-center ax-break-words ax-whitespace-pre-wrap;
 
                 ul {
@@ -45,19 +45,19 @@
                 }
             }
 
-            ax-suffix {
+            .ax-suffix {
                 @apply ax-block;
 
-                ax-button {
+                .ax-button {
                     @apply ax-ms-2 #{!important};
                 }
             }
 
-            ax-footer {
+            .ax-footer {
                 @apply ax-bg-transparent ax-p-0 ax-mt-3;
 
-                ax-suffix {
-                    ax-button {
+                .ax-suffix {
+                    .ax-button {
                         @apply ax-ms-0 ax-me-2 #{!important};
                     }
 
@@ -71,22 +71,25 @@
             animation-duration: 4s;
             animation-timing-function: linear;
             animation-name: progressBar;
-        }
-
-        @keyframes progressBar {
-            0% {
-                width: 100%;
-            }
+            @keyframes progressBar {
+                0% {
+                    width: 100%;
+                }
 
-            100% {
-                width: 0%;
+                100% {
+                    width: 0%;
+                }
             }
         }
 
+        // @include button-on-colorful-bg();
+
+        // @include color-look-generator();
+
         // primary
         &.ax-primary-default {
             @apply ax-bg-primary-500 ax-text-primary-fore dark:ax-bg-primary-800 dark:ax-text-primary-100;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-primary-600;
             }
             .ax-alert-progress {
@@ -95,7 +98,7 @@
         }
         &.ax-primary-twotone {
             @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-bg-primary-800 dark:ax-text-primary-100;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-primary-200 dark:ax-bg-primary-600;
             }
             .ax-alert-progress {
@@ -104,7 +107,7 @@
         }
         &.ax-primary-outline {
             @apply ax-bg-transparent ax-text-primary-500 ax-border ax-border-primary-500 dark:ax-border-primary-400 dark:ax-text-primary-300;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-primary-100 dark:ax-bg-transparent;
             }
             .ax-alert-progress {
@@ -113,7 +116,7 @@
         }
         &.ax-primary-blank {
             @apply ax-bg-transparent ax-text-primary-500 dark:ax-text-primary-300 ax-rounded-none;
-            ax-header {
+            .ax-header {
                 @apply ax-border-b ax-border-solid ax-border-primary-200 dark:ax-border-primary-800;
             }
             .ax-alert-progress {
@@ -124,7 +127,7 @@
         // secondary
         &.ax-secondary-default {
             @apply ax-bg-secondary-500 ax-text-secondary-fore dark:ax-bg-secondary-800 dark:ax-text-secondary-100;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-secondary-600;
             }
             .ax-alert-progress {
@@ -133,7 +136,7 @@
         }
         &.ax-secondary-twotone {
             @apply ax-bg-secondary-100 ax-text-secondary-500 dark:ax-bg-secondary-800 dark:ax-text-secondary-100;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-secondary-200 dark:ax-bg-secondary-600;
             }
             .ax-alert-progress {
@@ -142,7 +145,7 @@
         }
         &.ax-secondary-outline {
             @apply ax-bg-transparent ax-text-secondary-500 ax-border ax-border-secondary-500 dark:ax-border-secondary-400 dark:ax-text-secondary-300;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-secondary-100 dark:ax-bg-transparent;
             }
             .ax-alert-progress {
@@ -151,7 +154,7 @@
         }
         &.ax-secondary-blank {
             @apply ax-bg-transparent ax-text-secondary-500 dark:ax-text-secondary-300 ax-rounded-none;
-            ax-header {
+            .ax-header {
                 @apply ax-border-b ax-border-solid ax-border-secondary-200 dark:ax-border-secondary-800;
             }
             .ax-alert-progress {
@@ -162,7 +165,7 @@
         // success
         &.ax-success-default {
             @apply ax-bg-success-500 ax-text-success-fore dark:ax-bg-success-800 dark:ax-text-success-100;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-success-600;
             }
             .ax-alert-progress {
@@ -171,7 +174,7 @@
         }
         &.ax-success-twotone {
             @apply ax-bg-success-100 ax-text-success-500 dark:ax-bg-success-800 dark:ax-text-success-100;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-success-200 dark:ax-bg-success-600;
             }
             .ax-alert-progress {
@@ -180,7 +183,7 @@
         }
         &.ax-success-outline {
             @apply ax-bg-transparent ax-text-success-500 ax-border ax-border-success-500 dark:ax-border-success-400 dark:ax-text-success-300;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-success-100 dark:ax-bg-transparent;
             }
             .ax-alert-progress {
@@ -189,7 +192,7 @@
         }
         &.ax-success-blank {
             @apply ax-bg-transparent ax-text-success-500 dark:ax-text-success-300 ax-rounded-none;
-            ax-header {
+            .ax-header {
                 @apply ax-border-b ax-border-solid ax-border-success-200 dark:ax-border-success-800;
             }
             .ax-alert-progress {
@@ -200,7 +203,7 @@
         // warning
         &.ax-warning-default {
             @apply ax-bg-warning-800 ax-text-warning-fore dark:ax-bg-warning-800;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-warning-600;
             }
             .ax-alert-progress {
@@ -209,17 +212,16 @@
         }
         &.ax-warning-twotone {
             @apply ax-bg-warning-100 ax-text-warning-900 dark:ax-bg-warning-800 dark:ax-text-warning-fore;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-warning-200 dark:ax-bg-warning-600;
             }
             .ax-alert-progress {
                 @apply ax-bg-warning-300 dark:ax-bg-warning-500;
             }
-           
         }
         &.ax-warning-outline {
             @apply ax-bg-transparent ax-text-warning-900 ax-border ax-border-warning-500 dark:ax-border-warning-400 dark:ax-text-warning-300;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-warning-100 dark:ax-bg-transparent;
             }
             .ax-alert-progress {
@@ -228,7 +230,7 @@
         }
         &.ax-warning-blank {
             @apply ax-bg-transparent ax-text-warning-500 dark:ax-text-warning-300 ax-rounded-none;
-            ax-header {
+            .ax-header {
                 @apply ax-border-b ax-border-solid ax-border-warning-200 dark:ax-border-warning-800;
             }
             .ax-alert-progress {
@@ -239,7 +241,7 @@
         // danger
         &.ax-danger-default {
             @apply ax-bg-danger-500 ax-text-danger-fore dark:ax-bg-danger-800 dark:ax-text-danger-100;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-danger-600;
             }
             .ax-alert-progress {
@@ -248,7 +250,7 @@
         }
         &.ax-danger-twotone {
             @apply ax-bg-danger-100 ax-text-danger-500 dark:ax-bg-danger-800 dark:ax-text-danger-100;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-danger-200 dark:ax-bg-danger-600;
             }
             .ax-alert-progress {
@@ -257,7 +259,7 @@
         }
         &.ax-danger-outline {
             @apply ax-bg-transparent ax-text-danger-500 ax-border ax-border-danger-500 dark:ax-border-danger-400 dark:ax-text-danger-300;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-danger-100 dark:ax-bg-transparent;
             }
             .ax-alert-progress {
@@ -266,7 +268,7 @@
         }
         &.ax-danger-blank {
             @apply ax-bg-transparent ax-text-danger-500 dark:ax-text-danger-300 ax-rounded-none;
-            ax-header {
+            .ax-header {
                 @apply ax-border-b ax-border-solid ax-border-danger-200 dark:ax-border-danger-800;
             }
             .ax-alert-progress {
@@ -277,7 +279,7 @@
         // info
         &.ax-info-default {
             @apply ax-bg-info-500 ax-text-info-fore dark:ax-bg-info-800 dark:ax-text-info-100;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-info-600;
             }
             .ax-alert-progress {
@@ -286,7 +288,7 @@
         }
         &.ax-info-twotone {
             @apply ax-bg-info-100 ax-text-info-500 dark:ax-bg-info-800 dark:ax-text-info-100;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-info-200 dark:ax-bg-info-600;
             }
             .ax-alert-progress {
@@ -295,7 +297,7 @@
         }
         &.ax-info-outline {
             @apply ax-bg-transparent ax-text-info-500 ax-border ax-border-info-500 dark:ax-border-info-400 dark:ax-text-info-300;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-info-100 dark:ax-bg-transparent;
             }
             .ax-alert-progress {
@@ -304,7 +306,7 @@
         }
         &.ax-info-blank {
             @apply ax-bg-transparent ax-text-info-500 dark:ax-text-info-300 ax-rounded-none;
-            ax-header {
+            .ax-header {
                 @apply ax-border-b ax-border-solid ax-border-info-200 dark:ax-border-info-800;
             }
             .ax-alert-progress {
@@ -315,8 +317,8 @@
         // light
         &.ax-light-default {
             @apply ax-bg-light-100 dark:ax-bg-light-800 ax-text-light-fore dark:ax-text-light-100 ax-border ax-border-light-200 dark:ax-border-light-900;
-            ax-header {
-                @apply ax-bg-light-200 dark:ax-bg-light-600 ;
+            .ax-header {
+                @apply ax-bg-light-200 dark:ax-bg-light-600;
             }
             .ax-alert-progress {
                 @apply ax-bg-light-300 dark:ax-bg-light-600;
@@ -324,8 +326,8 @@
         }
         &.ax-light-twotone {
             @apply ax-bg-light-100 ax-text-light-500 dark:ax-bg-light-800 dark:ax-text-light-100;
-            ax-header {
-                @apply ax-bg-light-200 dark:ax-bg-light-600 ;
+            .ax-header {
+                @apply ax-bg-light-200 dark:ax-bg-light-600;
             }
             .ax-alert-progress {
                 @apply ax-bg-light-300 dark:ax-bg-light-600;
@@ -333,7 +335,7 @@
         }
         &.ax-light-outline {
             @apply ax-bg-transparent ax-text-light-500 ax-border ax-border-light-200 dark:ax-border-light-400 dark:ax-text-light-300;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-light-100;
             }
             .ax-alert-progress {
@@ -342,7 +344,7 @@
         }
         &.ax-light-blank {
             @apply ax-bg-transparent ax-text-light-500 dark:ax-text-light-300;
-            ax-header {
+            .ax-header {
                 @apply ax-border-b ax-border-solid ax-border-light-200 dark:ax-border-light-500;
             }
             .ax-alert-progress {
@@ -352,7 +354,7 @@
         // dark
         &.ax-dark-default {
             @apply ax-bg-dark-500 ax-text-dark-fore dark:ax-bg-dark-800 dark:ax-text-dark-100;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-dark-600;
             }
             .ax-alert-progress {
@@ -361,7 +363,7 @@
         }
         &.ax-dark-twotone {
             @apply ax-bg-dark-100 ax-text-dark-500 dark:ax-bg-dark-800 dark:ax-text-dark-100;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-dark-200;
             }
             .ax-alert-progress {
@@ -370,7 +372,7 @@
         }
         &.ax-dark-outline {
             @apply ax-bg-transparent ax-text-dark-500 ax-border ax-border-dark-100 dark:ax-border-dark-400 dark:ax-text-dark-300;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-dark-50;
             }
             .ax-alert-progress {
@@ -379,7 +381,7 @@
         }
         &.ax-dark-blank {
             @apply ax-bg-transparent ax-text-dark-500 dark:ax-text-dark-100;
-            ax-header {
+            .ax-header {
                 @apply ax-border-b ax-border-solid ax-border-dark-200 dark:ax-border-dark-200;
             }
             .ax-alert-progress {

package/src/components/_avatar.scss

@@ -1,12 +1,10 @@
 @layer components {
-    ax-avatar-group,
     .ax-avatar-group {
         @apply ax-flex;
         ax-avatar {
             @apply ax-border-2 ax-border-white -ax-m-1 dark:ax-border-dark-500;
         }
     }
-    ax-avatar,
     .ax-avatar {
         @apply ax-relative ax-flex ax-items-center ax-justify-center ax-w-16 ax-h-16;
         ax-badge {

package/src/components/_badge.scss

@@ -3,15 +3,15 @@
         @apply ax-rounded ax-align-middle ax-flex ax-justify-center ax-items-center ax-max-w-max ax-text-sm ax-px-2;
         min-width: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 15px);
         height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 15px);
-        ax-prefix {
+        .ax-prefix {
             @apply ax-me-1.5;
         }
-        ax-suffix {
+        .ax-suffix {
             @apply ax-ms-1.5;
         }
         &.ax-badge-icon {
-            ax-prefix,
-            ax-suffix {
+            .ax-prefix,
+            .ax-suffix {
                 @apply ax-m-0;
             }
         }
@@ -160,6 +160,30 @@
             @apply ax-text-light-fore dark:ax-border-light-600 dark:ax-text-light-100;
         }
 
-        
+        // @include color-look-generator();
+        // &.ax-primary-default {
+        //     @apply ax-bg-primary-50 ax-text-primary-500 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
+        // }
+        // &.ax-secondary-default {
+        //     @apply ax-bg-secondary-50 ax-text-secondary-500 dark:ax-bg-secondary-500 dark:ax-text-secondary-fore;
+        // }
+        // &.ax-success-default {
+        //     @apply ax-bg-success-50 ax-text-success-500 dark:ax-bg-success-500 dark:ax-text-success-fore;
+        // }
+        // &.ax-warning-default {
+        //     @apply ax-bg-warning-50 ax-text-warning-700 dark:ax-bg-warning-500 dark:ax-text-warning-fore;
+        // }
+        // &.ax-danger-default {
+        //     @apply ax-bg-danger-50 ax-text-danger-500 dark:ax-bg-danger-500 dark:ax-text-danger-fore;
+        // }
+        // &.ax-info-default {
+        //     @apply ax-bg-info-50 ax-text-info-500 dark:ax-bg-info-500 dark:ax-text-info-fore;
+        // }
+        // &.ax-light-default {
+        //     @apply ax-bg-light-200 ax-text-light-700;
+        // }
+        // &.ax-dark-default {
+        //     @apply ax-bg-dark-500 ax-text-dark-fore dark:ax-bg-dark-500 dark:ax-text-dark-50;
+        // }
     }
 }

package/src/components/_breadcrumbs.scss

@@ -1,5 +1,4 @@
 @layer components {
-    ax-breadcrumbs,
     .ax-breadcrumbs {
         @apply ax-inline-flex ax-items-center ax-space-x-1 md:ax-space-x-3;
         ax-breadcrumbs-item,
@@ -8,10 +7,10 @@
             .ax-breadcrumbs-item-text {
                 @apply ax-pe-2 hover:ax-text-light-900 dark:hover:ax-text-white;
             }
-            ax-prefix {
+            .ax-prefix {
                 @apply ax-pe-2;
             }
-            ax-suffix {
+            .ax-suffix {
                 @apply ax-ps-2;
             }
             .ax-breadcrumb-divider {

package/src/components/_button.scss

@@ -1,5 +1,5 @@
 @layer components {
-    ax-button {
+    .ax-button {
         @apply ax-text-sm ax-relative ax-inline-flex ax-items-center ax-justify-center ax-rounded-default ax-select-none ax-font-medium ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis ax-transition-all;
         height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
         line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2) !important;
@@ -15,11 +15,11 @@
         &:focus {
             @apply ax-outline-none;
         }
-        ax-prefix {
+        .ax-prefix {
             @apply ax-flex ax-flex-row ax-pe-2;
         }
 
-        ax-suffix {
+        .ax-suffix {
             @apply ax-flex ax-flex-row ax-ps-2;
         }
         &[class*="-outline"] {
@@ -29,28 +29,24 @@
             @apply ax-text-xs;
         }
 
-        &.ax-rounded {
-            @apply ax-rounded-full;
-        }
-
         &.ax-button-icon {
             width: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
             & > button {
                 @apply ax-px-3;
             }
 
-            ax-prefix,
-            ax-suffix {
+            .ax-prefix,
+            .ax-suffix {
                 @apply ax-p-0;
             }
 
-            ax-icon,
+            .ax-icon,
             i {
                 @apply ax-text-base;
             }
         }
 
-        ax-loading-spinner {
+        .ax-loading-spinner {
             @apply ax-flex ax-pe-1;
 
             svg {
@@ -884,10 +880,10 @@
         }
     }
 
-    ax-button-group {
+    .ax-button-group {
         @apply ax-flex;
 
-        ax-button {
+        .ax-button {
             @apply ax-rounded-none;
 
             &[class*="-link"] {

package/src/components/_calendar.scss

@@ -1,5 +1,5 @@
 @layer components {
-    ax-calendar {
+    .ax-calendar {
         @apply ax-w-80 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;
         @include screen(mobile) {
             @apply ax-w-full;
@@ -8,12 +8,12 @@
             .ax-calendar-header {
                 .ax-calendar-header-buttons {
                     .ax-prev-button {
-                        ax-icon {
+                        .ax-icon {
                             @apply ax-rotate-180;
                         }
                     }
                     .ax-next-button {
-                        ax-icon {
+                        .ax-icon {
                             @apply ax-rotate-0;
                         }
                     }
@@ -31,12 +31,12 @@
             .ax-calendar-header-buttons {
                 @apply ax-flex;
                 .ax-prev-button {
-                    ax-icon {
+                    .ax-icon {
                         @apply ax-rotate-0;
                     }
                 }
                 .ax-next-button {
-                    ax-icon {
+                    .ax-icon {
                         @apply ax-rotate-180;
                     }
                 }

package/src/components/_checkbox.scss

@@ -1,8 +1,5 @@
 @layer components {
-
-    .ax-check-box,
-    ax-check-box {
-
+    .ax-check-box {
         .ax-state-error {
             @apply ax-text-danger-500;
 
@@ -11,14 +8,13 @@
             }
         }
         .ax-state-success {
-            @apply  ax-text-success-600;
+            @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;
@@ -57,7 +53,6 @@
             &.ax-state-disabled {
                 @apply ax-opacity-60;
             }
-
         }
     }
-}
+}

package/src/components/_collapse.scss

@@ -1,5 +1,4 @@
 @layer components {
-    ax-collpase,
     .ax-collapse {
         @apply ax-border ax-border-light-200 dark:ax-border-white/10 ax-block ax-text-sm ax-rounded-default ax-overflow-hidden;