@acorex/styles 5.0.21 → 5.0.25

package/dark.scss

@@ -1,11 +1,10 @@
-.ax-dark,
-.ax-dark * {
+html.ax-dark,
+html.ax-dark * {
     --tw-ring-offset-color: #151b24;
     --ax-color-default-background: 21 27 36;
     --ax-color-default-color: 255 255 255;
     --ax-color-border: 55 65 81;
     --ax-color-placeholder: 161 161 161;
-
     .ax-skeleton {
         &.ax-skeleton-animate {
             &::before {
@@ -14,24 +13,7 @@
             }
         }
     }
-
     .cdk-overlay-dark-backdrop {
-        background: rgba(0, 0, 0, 0.8) !important;
-    }
-
-    .ax-controll {
-        @apply ax-border-transparent ax-bg-white/[0.16] ax-backdrop-blur-3xl;
-    }
-
-    .ax-surface {
-        @apply ax-bg-white/20 ax-border-white/[0.1] ax-backdrop-blur-3xl;
-    }
-
-    .cdk-overlay-pane {
-        .ax-editor-container,
-        input[type="checkbox"],
-        input[type="radio"] {
-            @apply ax-bg-black/[0.2];
-        }
+        background: rgba(0, 0, 0, 0.5) !important;
     }
 }

package/package.json

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

package/src/base/index.scss

@@ -1,7 +1,7 @@
 @import "../utility/mixins";
 
 [class*=" ax-ic-"],
-[class^=ax-ic-] {
+[class^="ax-ic-"] {
     vertical-align: middle;
 }
 
@@ -18,13 +18,14 @@ body {
     background-color: rgb(var(--ax-color-default-background));
     color: rgba(var(--ax-color-default-color));
     height: 100%;
-    font-size: 16px
+    font-size: 16px;
 }
 
-.ax-controll {
-    @apply ax-border-light-300 ax-bg-white;
+.ax-sm {
+    --ax-base-size: 6px;
+    font-size: 0.75rem
 }
-
-.ax-surface {
-    @apply ax-bg-white ax-border-light-300;
+.ax-lg {
+    --ax-base-size: 10px;
+    font-size: 1.125rem
 }

package/src/components/_alert.scss

@@ -1,6 +1,6 @@
 @layer components {
     .ax-alert {
-        @apply ax-flex ax-bg-light-100 ax-text-light-fore ax-px-3.5 ax-py-4 ax-items-baseline ax-rounded;
+        @apply ax-flex ax-bg-light-100 ax-text-light-fore ax-px-3.5 ax-py-4 ax-items-center ax-rounded ax-border;
         transition: visibility 0s, opacity 0.5s ease-in-out;
         &.ax-state-hidden {
             visibility: hidden;
@@ -11,7 +11,7 @@
             opacity: 1;
         }
         .ax-alert-icon {
-            @apply ax-text-xl ax-align-text-bottom;
+            @apply ax-text-xl ax-self-baseline;
            
         }
         .ax-alert-body {
@@ -23,7 +23,7 @@
                 }
             }
             .ax-alert-content {
-                @apply ax-block ax-text-sm;
+                @apply ax-block ax-text-sm ax-break-words;
                
                 ul {
                     @apply ax-my-2 ax-ms-5 ax-list-disc;
@@ -37,102 +37,110 @@
             }
             .ax-alert-footer {
                 .ax-alert-buttons {
-                    @apply ax-flex ax-mt-2;
+                    @apply ax-flex ax-mt-4;
                     .ax-alert-button {
-                        @apply ax-font-bold ax-me-4 ax-cursor-pointer ax-rounded;
+                        @apply ax-text-sm ax-font-semibold ax-me-4 ax-cursor-pointer;
                     }
                 }
             }
+            
+        }
+        .ax-alert-prefix {
+            .ax-alert-buttons{
+                @apply ax-flex;
+            }
+            
         }
         .ax-alert-suffix {
             .ax-alert-buttons {
+                @apply ax-flex;
                 .ax-alert-button {
-                    @apply ax-font-bold ax-me-0.5 ax-cursor-pointer ax-rounded;
+                    @apply ax-me-0.5 ax-text-sm ax-font-semibold ax-cursor-pointer;
                     i {
                         @apply ax-mx-1;
                     }
                 }
             }
         }
-        &.ax-primary {
-            @apply ax-bg-primary-50 ax-text-primary dark:ax-bg-primary-500 dark:ax-text-primary-50;
+        &.ax-primary-default {
+            @apply ax-bg-primary-50 ax-text-primary-500 dark:ax-bg-primary-600 dark:ax-text-primary-50 ax-border-primary-500/10;
             .ax-alert-title {
                 @apply ax-text-primary-700  dark:ax-text-primary-100;
             }
             .ax-alert-button {
                 &:hover {
-                    @apply ax-text-primary-800;
+                    @apply ax-text-primary-900;
                 }
             }
         }
-        &.ax-secondary {
-            @apply ax-bg-secondary-50 ax-text-secondary dark:ax-bg-secondary-500 dark:ax-text-secondary-50;
+        &.ax-secondary-default {
+            @apply ax-bg-secondary-50 ax-text-secondary-500 dark:ax-bg-secondary-600 dark:ax-text-secondary-50 ax-border-secondary-500/10;
             .ax-alert-title {
                 @apply ax-text-secondary-700 dark:ax-text-secondary-100;
             }
             .ax-alert-button {
                 &:hover {
-                    @apply ax-text-secondary-800;
+                    @apply ax-text-secondary-900;
                 }
             }
         }
-        &.ax-success {
-            @apply ax-bg-success-50 ax-text-success dark:ax-bg-success-500 dark:ax-text-success-50;
+        &.ax-success-default {
+            @apply ax-bg-success-50 ax-text-success-500 dark:ax-bg-success-600 dark:ax-text-success-50 ax-border-success-500/10;
             .ax-alert-title {
                 @apply ax-text-success-700 dark:ax-text-success-100;
             }
             .ax-alert-button {
                 &:hover {
-                    @apply ax-text-success-800;
+                    @apply ax-text-success-900;
                 }
             }
         }
-        &.ax-warning {
-            @apply ax-bg-warning-50 ax-text-warning dark:ax-bg-warning-500 dark:ax-text-warning-50;
+        &.ax-warning-default {
+            @apply ax-bg-warning-50 ax-text-warning-500 dark:ax-bg-warning-600 dark:ax-text-white ax-border-warning-500/10;
             .ax-alert-title {
                 @apply ax-text-warning-700 dark:ax-text-warning-100;
             }
             .ax-alert-button {
                 &:hover {
-                    @apply ax-text-warning-800;
+                    @apply ax-text-warning-900;
                 }
             }
         }
-        &.ax-danger {
-            @apply ax-bg-danger-50 ax-text-danger dark:ax-bg-danger-500 dark:ax-text-danger-50;
+        &.ax-danger-default {
+            @apply ax-bg-danger-50 ax-text-danger-500 dark:ax-bg-danger-600 dark:ax-text-danger-50 ax-border-danger-500/10;
             .ax-alert-title {
                 @apply ax-text-danger-700 dark:ax-text-danger-100;
             }
             .ax-alert-button {
                 &:hover {
-                    @apply ax-text-danger-800;
+                    @apply ax-text-danger-900;
                 }
             }
         }
-        &.ax-info {
-            @apply ax-bg-info-50 ax-text-info dark:ax-bg-info-500 dark:ax-text-info-50;
+        &.ax-info-default {
+            @apply ax-bg-info-50 ax-text-info-500 dark:ax-bg-info-600 dark:ax-text-info-50 ax-border-info-500/10;
             .ax-alert-title {
                 @apply ax-text-info-700 dark:ax-text-info-100;
             }
             .ax-alert-button {
                 &:hover {
-                    @apply ax-text-info-800;
+                    @apply ax-text-info-900;
                 }
             }
         }
-        &.ax-light {
-            @apply ax-bg-light-50 ax-text-light-fore dark:ax-bg-light-500 dark:ax-text-light-50;
+        &.ax-light-default {
+            @apply ax-bg-light-50 ax-text-light-fore dark:ax-bg-light-500 dark:ax-text-light-50 ax-border-light-500/10;
             .ax-alert-title {
                 @apply ax-text-light-fore dark:ax-text-light-100;
             }
             .ax-alert-button {
                 &:hover {
-                    @apply ax-text-light-800;
+                    @apply ax-text-light-900;
                 }
             }
         }
-        &.ax-dark {
-            @apply ax-bg-dark ax-text-dark-fore dark:ax-bg-dark-500 dark:ax-text-dark-50;
+        &.ax-dark-default {
+            @apply ax-bg-dark-500 ax-text-dark-fore dark:ax-bg-dark-400 dark:ax-text-dark-50 ax-border-dark-500/10;
             .ax-alert-title {
                 @apply ax-text-dark-fore dark:ax-text-dark-100;
             }

package/src/components/_badge.scss

@@ -1,11 +1,44 @@
 @layer components {
     .ax-badge {
-        @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 dark:ax-bg-white/[0.16] dark:ax-text-light-100;
+        @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)) - 10px);
+        height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 10px);
+        
         ax-prefix {
-            @apply ax-me-1.5
+            @apply ax-me-1.5;
         }
         ax-suffix {
-            @apply ax-ms-1.5
+            @apply ax-ms-1.5;
+        }
+        &.ax-badge-icon {
+            ax-prefix,
+            ax-suffix {
+                @apply ax-m-0;
+            }
+        }
+        &.ax-primary-default{
+            @apply ax-bg-primary-100 ax-text-primary-600 dark:ax-bg-primary-300;
+        }
+        &.ax-secondary-default{
+            @apply ax-bg-secondary-100 ax-text-secondary-600 dark:ax-bg-secondary-300 ;
+        }
+        &.ax-success-default{
+            @apply ax-bg-success-100 ax-text-success-600 dark:ax-bg-success-300 ;
+        }
+        &.ax-warning-default{
+            @apply ax-bg-warning-100 ax-text-warning-700 dark:ax-bg-warning-300 ;
+        }
+        &.ax-danger-default{
+            @apply ax-bg-danger-100 ax-text-danger-600 dark:ax-bg-danger-300 ;
+        }
+        &.ax-info-default{
+            @apply ax-bg-info-100 ax-text-info-600 dark:ax-bg-info-300 ;
+        }
+        &.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-300 dark:ax-text-dark-50;
         }
     }
-}
+}