@acorex/styles 5.0.10 → 5.0.14

package/dark.scss

@@ -0,0 +1,37 @@
+.ax-dark,
+.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 {
+                content: "";
+                background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
+            }
+        }
+    }
+
+    .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];
+        }
+    }
+}

package/index.scss

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

package/package.json

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

package/src/base/index.scss

@@ -1,4 +1,5 @@
-@import "./colors";
+@import "../utility/mixins";
+
 [class*=" ax-ic-"],
 [class^=ax-ic-] {
     vertical-align: middle;
@@ -7,8 +8,8 @@
 :root {
     --ax-base-size: 8px;
     --ax-base-ratio: 5;
-    // --ax-default-background: 240, 240, 240;
-    // --ax-default-color: 107, 114, 128;
+    --ax-color-default-background: 255, 255, 255;
+    --ax-color-default-color: 107, 114, 128;
     @include colors($theme-colors);
 }
 
@@ -16,9 +17,14 @@ html,
 body {
     background-color: rgb(var(--ax-color-default-background));
     color: rgba(var(--ax-color-default-color));
+    height: 100%;
+    font-size: 16px
+}
+
+.ax-controll {
+    @apply ax-border-light-300 ax-bg-white;
 }
 
-// .ax-dark-mode,
-// .ax-dark-mode * {
-//     @include colors($theme-dark-colors);
-// }
+.ax-surface {
+    @apply ax-bg-white ax-border-light-300;
+}

package/src/components/_alert.scss

@@ -1,4 +1,3 @@
-@import "../variables/mixins";
 @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;
@@ -13,26 +12,19 @@
         }
         .ax-alert-icon {
             @apply ax-text-xl ax-align-text-bottom;
-            @include respond(mobile) {
-                @apply ax-text-2xl;
-            }
+           
         }
         .ax-alert-body {
             @apply ax-ml-2 ax-flex-1;
             .ax-alert-title {
                 @apply ax-inline-flex ax-text-sm ax-font-bold ax-mb-2.5;
-                @include respond(mobile) {
-                    @apply ax-text-base;
-                }
                 a {
                     @apply ax-text-current ax-font-bold;
                 }
             }
             .ax-alert-content {
                 @apply ax-block ax-text-sm;
-                @include respond(mobile) {
-                    @apply ax-text-base;
-                }
+               
                 ul {
                     @apply ax-my-2 ax-ms-5 ax-list-disc;
                 }
@@ -63,12 +55,9 @@
             }
         }
         &.ax-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;
-            }
+            @apply ax-bg-primary-50 ax-text-primary dark:ax-bg-primary-500 dark:ax-text-primary-50;
             .ax-alert-title {
-                @apply ax-text-primary-700;
+                @apply ax-text-primary-700  dark:ax-text-primary-100;
             }
             .ax-alert-button {
                 &:hover {
@@ -77,9 +66,9 @@
             }
         }
         &.ax-secondary {
-            @apply ax-bg-secondary-50 ax-text-secondary;
+            @apply ax-bg-secondary-50 ax-text-secondary dark:ax-bg-secondary-500 dark:ax-text-secondary-50;
             .ax-alert-title {
-                @apply ax-text-secondary-700;
+                @apply ax-text-secondary-700 dark:ax-text-secondary-100;
             }
             .ax-alert-button {
                 &:hover {
@@ -88,9 +77,9 @@
             }
         }
         &.ax-success {
-            @apply ax-bg-success-50 ax-text-success;
+            @apply ax-bg-success-50 ax-text-success dark:ax-bg-success-500 dark:ax-text-success-50;
             .ax-alert-title {
-                @apply ax-text-success-700;
+                @apply ax-text-success-700 dark:ax-text-success-100;
             }
             .ax-alert-button {
                 &:hover {
@@ -99,9 +88,9 @@
             }
         }
         &.ax-warning {
-            @apply ax-bg-warning-50 ax-text-warning;
+            @apply ax-bg-warning-50 ax-text-warning dark:ax-bg-warning-500 dark:ax-text-warning-50;
             .ax-alert-title {
-                @apply ax-text-warning-700;
+                @apply ax-text-warning-700 dark:ax-text-warning-100;
             }
             .ax-alert-button {
                 &:hover {
@@ -110,9 +99,9 @@
             }
         }
         &.ax-danger {
-            @apply ax-bg-danger-50 ax-text-danger;
+            @apply ax-bg-danger-50 ax-text-danger dark:ax-bg-danger-500 dark:ax-text-danger-50;
             .ax-alert-title {
-                @apply ax-text-danger-700;
+                @apply ax-text-danger-700 dark:ax-text-danger-100;
             }
             .ax-alert-button {
                 &:hover {
@@ -121,9 +110,9 @@
             }
         }
         &.ax-info {
-            @apply ax-bg-info-50 ax-text-info;
+            @apply ax-bg-info-50 ax-text-info dark:ax-bg-info-500 dark:ax-text-info-50;
             .ax-alert-title {
-                @apply ax-text-info-700;
+                @apply ax-text-info-700 dark:ax-text-info-100;
             }
             .ax-alert-button {
                 &:hover {
@@ -132,9 +121,9 @@
             }
         }
         &.ax-light {
-            @apply ax-bg-light-50 ax-text-light-fore;
+            @apply ax-bg-light-50 ax-text-light-fore dark:ax-bg-light-500 dark:ax-text-light-50;
             .ax-alert-title {
-                @apply ax-text-light-fore;
+                @apply ax-text-light-fore dark:ax-text-light-100;
             }
             .ax-alert-button {
                 &:hover {
@@ -143,13 +132,13 @@
             }
         }
         &.ax-dark {
-            @apply ax-bg-dark ax-text-dark-fore;
+            @apply ax-bg-dark ax-text-dark-fore dark:ax-bg-dark-500 dark:ax-text-dark-50;
             .ax-alert-title {
-                @apply ax-text-dark-fore;
+                @apply ax-text-dark-fore dark:ax-text-dark-100;
             }
             .ax-alert-button {
                 &:hover {
-                    @apply ax-bg-dark;
+                    @apply ax-text-dark-200;
                 }
             }
         }

package/src/components/_badge.scss

@@ -1,6 +1,6 @@
 @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;
+        @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;
         ax-prefix {
             @apply ax-me-1.5
         }