@acorex/styles 5.0.17 → 5.0.23

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.17",
+    "version": "5.0.23",
     "description": "",
     "main": "index.js",
     "scripts": {

package/src/base/index.scss

@@ -21,10 +21,10 @@ body {
     font-size: 16px
 }
 
-.ax-controll {
-    @apply ax-border-light-300 ax-bg-white;
-}
+// .ax-control {
+//     @apply ax-border-light-300 ax-bg-white;
+// }
 
-.ax-surface {
-    @apply ax-bg-white ax-border-light-300;
-}
+// .ax-surface {
+//     @apply ax-bg-white ax-border-light-300;
+// }

package/src/components/_alert.scss

@@ -37,102 +37,103 @@
             }
             .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-base lg:ax-text-sm ax-font-semibold ax-me-4 ax-cursor-pointer;
                     }
                 }
             }
+            
         }
         .ax-alert-suffix {
             .ax-alert-buttons {
                 .ax-alert-button {
-                    @apply ax-font-bold ax-me-0.5 ax-cursor-pointer ax-rounded;
+                    @apply ax-me-0.5 ax-text-base lg: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-500 dark:ax-text-primary-50;
             .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-500 dark:ax-text-secondary-50;
             .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-500 dark:ax-text-success-50;
             .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-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-500 dark:ax-text-danger-50;
             .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-500 dark:ax-text-info-50;
             .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 {
+        &.ax-light-default {
             @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 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-alert-title {
                 @apply ax-text-dark-fore dark:ax-text-dark-100;
             }

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 dark:ax-bg-white/[0.16] dark:ax-text-light-100;
+        @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
         }

package/src/components/_button.scss

@@ -70,7 +70,7 @@
             @apply ax-cursor-not-allowed ax-opacity-60;
         }
         // normal
-        &.ax-primary {
+        &.ax-primary-default {
             @apply ax-shadow-sm ax-bg-primary-500 ax-text-primary-fore ax-border-transparent;
             &:not(.ax-state-disabled) {
                 &:hover {
@@ -88,7 +88,7 @@
                 @apply ax-bg-primary-700;
             }
         }
-        &.ax-secondary {
+        &.ax-secondary-default {
             @apply ax-shadow-sm ax-bg-secondary-500 ax-text-secondary-fore ax-border-transparent;
             &:not(.ax-state-disabled) {
                 &:hover {
@@ -106,7 +106,7 @@
                 @apply ax-bg-secondary-700;
             }
         }
-        &.ax-warning {
+        &.ax-warning-default {
             @apply ax-shadow-sm ax-bg-warning-500 ax-text-warning-fore ax-border-transparent;
             &:not(.ax-state-disabled) {
                 &:hover {
@@ -124,7 +124,7 @@
                 @apply ax-bg-warning-700 ax-text-warning-50;
             }
         }
-        &.ax-danger {
+        &.ax-danger-default {
             @apply ax-shadow-sm ax-bg-danger-500 ax-text-danger-fore ax-border-transparent;
             &:not(.ax-state-disabled) {
                 &:hover {
@@ -142,7 +142,7 @@
                 @apply ax-bg-danger-700;
             }
         }
-        &.ax-success {
+        &.ax-success-default {
             @apply ax-shadow-sm ax-bg-success-500 ax-text-success-fore ax-border-transparent;
             &:not(.ax-state-disabled) {
                 &:hover {
@@ -160,7 +160,7 @@
                 @apply ax-bg-success-700;
             }
         }
-        &.ax-info {
+        &.ax-info-default {
             @apply ax-shadow-sm ax-bg-info-500 ax-text-info-fore ax-border-transparent;
             &:not(.ax-state-disabled) {
                 &:hover {
@@ -178,17 +178,17 @@
                 @apply ax-bg-info-700;
             }
         }
-        &.ax-dark {
-            @apply ax-shadow-sm ax-bg-dark-500 ax-text-dark-fore ax-border-transparent;
+        &.ax-dark-default {
+            @apply ax-shadow-sm ax-bg-dark-500 ax-text-dark-fore ax-border-transparent dark:ax-bg-dark-400;
             &:not(.ax-state-disabled) {
                 &:hover {
-                    @apply ax-bg-dark-400;
+                    @apply ax-bg-dark-400 dark:ax-bg-dark-400;
                 }
                 &:focus {
-                    @apply ax-ring-2 ax-ring-offset-2 ax-ring-dark-500;
+                    @apply ax-ring-2 ax-ring-offset-2 ax-ring-dark-500 dark:ax-ring-dark-300 dark:ax-bg-dark-300;
                 }
                 &:active {
-                    @apply ax-bg-dark-700 ax-ring-2 ax-ring-offset-2 ax-ring-dark-700;
+                    @apply ax-bg-dark-700 ax-ring-2 ax-ring-offset-2 ax-ring-dark-200 dark:ax-ring-dark-300 dark:ax-bg-dark-300;
                 }
             }
 
@@ -196,17 +196,17 @@
                 @apply ax-bg-dark-300;
             }
         }
-        &.ax-light {
-            @apply ax-shadow-sm ax-bg-light-50 ax-text-light-fore ax-border ax-border-light-300;
+        &.ax-light-default {
+            @apply ax-shadow-sm ax-bg-light-50 ax-text-light-fore ax-border ax-border-light-300 dark:ax-bg-light-600 dark:ax-border-light-600 dark:ax-text-light-100;
             &:not(.ax-state-disabled) {
                 &:hover {
-                    @apply ax-bg-light-100;
+                    @apply ax-bg-light-100 dark:ax-bg-light-600;
                 }
                 &:focus {
-                    @apply ax-ring-2 ax-ring-offset-2 ax-ring-light-200;
+                    @apply ax-ring-2 ax-ring-offset-2 ax-ring-light-200 dark:ax-bg-light-500 dark:ax-ring-light-500;
                 }
                 &:active {
-                    @apply ax-bg-light-200 ax-ring-2 ax-ring-offset-2 ax-ring-light-200;
+                    @apply ax-bg-light-200 ax-ring-2 ax-ring-offset-2 ax-ring-light-200 dark:ax-bg-light-500 dark:ax-ring-light-500;
                 }
             }
 
@@ -216,7 +216,7 @@
         }
         // twotone
         &.ax-primary-twotone {
-            @apply ax-bg-primary-100 ax-text-primary-500 ax-border-transparent;
+            @apply ax-bg-primary-100 ax-text-primary-500 ax-border-transparent dark:ax-bg-primary-300 dark:ax-text-primary-700;
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
@@ -232,7 +232,7 @@
             }
         }
         &.ax-secondary-twotone {
-            @apply ax-bg-secondary-100 ax-text-secondary-500 ax-border-transparent;
+            @apply ax-bg-secondary-100 ax-text-secondary-500 ax-border-transparent dark:ax-bg-secondary-300 dark:ax-text-secondary-700;
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
@@ -248,7 +248,7 @@
             }
         }
         &.ax-warning-twotone {
-            @apply ax-bg-warning-100 ax-text-warning-500 ax-border-transparent;
+            @apply ax-bg-warning-100 ax-text-warning-500 ax-border-transparent dark:ax-bg-warning-300 dark:ax-text-warning-700;
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
@@ -264,7 +264,7 @@
             }
         }
         &.ax-danger-twotone {
-            @apply ax-bg-danger-100 ax-text-danger-500 ax-border-transparent;
+            @apply ax-bg-danger-100 ax-text-danger-500 ax-border-transparent dark:ax-bg-danger-300 dark:ax-text-danger-700;
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
@@ -280,7 +280,7 @@
             }
         }
         &.ax-success-twotone {
-            @apply ax-bg-success-100 ax-text-success-500 ax-border-transparent;
+            @apply ax-bg-success-100 ax-text-success-500 ax-border-transparent dark:ax-bg-success-300 dark:ax-text-success-700;
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
@@ -296,14 +296,14 @@
             }
         }
         &.ax-info-twotone {
-            @apply ax-bg-info-100 ax-text-info-500 ax-border-transparent;
+            @apply ax-bg-info-100 ax-text-info-500 ax-border-transparent dark:ax-bg-info-300 dark:ax-text-info-700;
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
-                    @apply ax-bg-info-200 ax-text-primary-700;
+                    @apply ax-bg-info-200 ax-text-info-700;
                 }
                 &:active {
-                    @apply ax-bg-info-300 ax-text-primary-700;
+                    @apply ax-bg-info-300 ax-text-info-700;
                 }
             }
 
@@ -312,7 +312,7 @@
             }
         }
         &.ax-dark-twotone {
-            @apply ax-bg-dark-100 ax-text-dark ax-border-transparent;
+            @apply ax-bg-dark-100 ax-text-dark-500 ax-border-transparent dark:ax-bg-dark-300 dark:ax-text-dark-700;
             &:not(.ax-state-disabled) {
                 &:hover {
                 }
@@ -328,7 +328,7 @@
             }
         }
         &.ax-light-twotone {
-            @apply ax-bg-light-200 ax-text-light-fore ax-border-transparent;
+            @apply ax-bg-light-200 ax-text-light-fore ax-border-transparent  dark:ax-bg-light-300 dark:ax-text-light-700;
             &:not(.ax-state-disabled) {
                 &:hover {
                     @apply ax-bg-light-300;
@@ -351,7 +351,7 @@
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
-                    @apply ax-bg-primary ax-border-primary ax-text-primary-fore;
+                    @apply ax-bg-primary-500 ax-border-primary-500 ax-text-primary-fore;
                 }
                 &:active {
                     @apply ax-bg-primary-700 ax-border-primary-700 ax-text-primary-fore;
@@ -359,7 +359,7 @@
             }
 
             &.ax-state-selected {
-                @apply ax-bg-primary ax-text-primary-fore;
+                @apply ax-bg-primary-500 ax-text-primary-fore;
             }
         }
         &.ax-secondary-outline {
@@ -367,7 +367,7 @@
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
-                    @apply ax-bg-secondary ax-border-secondary ax-text-secondary-fore;
+                    @apply ax-bg-secondary-500 ax-border-secondary-500 ax-text-secondary-fore;
                 }
                 &:active {
                     @apply ax-bg-secondary-700 ax-border-secondary-700 ax-text-primary-fore;
@@ -375,7 +375,7 @@
             }
 
             &.ax-state-selected {
-                @apply ax-bg-secondary ax-text-secondary-fore;
+                @apply ax-bg-secondary-500 ax-text-secondary-fore;
             }
         }
         &.ax-warning-outline {
@@ -383,7 +383,7 @@
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
-                    @apply ax-bg-warning ax-border-warning ax-text-warning-fore;
+                    @apply ax-bg-warning-500 ax-border-warning-500 ax-text-warning-fore;
                 }
                 &:active {
                     @apply ax-bg-warning-700 ax-border-warning-700 ax-text-primary-fore;
@@ -391,7 +391,7 @@
             }
 
             &.ax-state-selected {
-                @apply ax-bg-warning ax-text-warning-fore;
+                @apply ax-bg-warning-500 ax-text-warning-fore;
             }
         }
         &.ax-danger-outline {
@@ -399,7 +399,7 @@
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
-                    @apply ax-bg-danger ax-border-danger ax-text-danger-fore;
+                    @apply ax-bg-danger-500 ax-border-danger-500 ax-text-danger-fore;
                 }
                 &:active {
                     @apply ax-bg-danger-700 ax-border-danger-700 ax-text-primary-fore;
@@ -407,7 +407,7 @@
             }
 
             &.ax-state-selected {
-                @apply ax-bg-danger ax-text-danger-fore;
+                @apply ax-bg-danger-500 ax-text-danger-fore;
             }
         }
         &.ax-success-outline {
@@ -415,7 +415,7 @@
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
-                    @apply ax-bg-success ax-border-success ax-text-success-fore;
+                    @apply ax-bg-success-500 ax-border-success-500 ax-text-success-fore;
                 }
                 &:active {
                     @apply ax-bg-success-700 ax-border-success-700 ax-text-success-fore;
@@ -423,7 +423,7 @@
             }
 
             &.ax-state-selected {
-                @apply ax-bg-success ax-text-success-fore;
+                @apply ax-bg-success-500 ax-text-success-fore;
             }
         }
         &.ax-info-outline {
@@ -431,7 +431,7 @@
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
-                    @apply ax-bg-info ax-border-info ax-text-info-fore;
+                    @apply ax-bg-info-500 ax-border-info-500 ax-text-info-fore;
                 }
                 &:active {
                     @apply ax-bg-info-700 ax-border-info-700 ax-text-info-fore;
@@ -439,29 +439,29 @@
             }
 
             &.ax-state-selected {
-                @apply ax-bg-info ax-text-info-fore;
+                @apply ax-bg-info-500 ax-text-info-fore;
             }
         }
         &.ax-dark-outline {
-            @apply ax-bg-transparent ax-text-dark-500 ax-border-dark-500 hover:ax-bg-danger-500 dark:ax-text-dark-fore dark:ax-border-dark-50;
+            @apply ax-bg-transparent ax-text-dark-500 ax-border-dark-500 hover:ax-bg-danger-500 dark:ax-text-dark-100 dark:ax-border-dark-100;
             &:not(.ax-state-disabled) {
                 &:hover {
-                    @apply ax-bg-dark-50 ax-border-dark ax-text-dark;
+                    @apply ax-bg-dark-50 ax-border-dark-500 ax-text-dark-500 dark:ax-border-dark-300 dark:ax-bg-dark-300 dark:ax-text-light-100;
                 }
                 &:focus {
-                    @apply ax-bg-dark-500 ax-border-dark-500 ax-text-dark-fore;
+                    @apply ax-bg-dark-500 ax-border-dark-500 ax-text-dark-fore dark:ax-border-dark-300 dark:ax-bg-dark-300 dark:ax-text-light-100;
                 }
                 &:active {
-                    @apply ax-bg-dark-700 ax-border-dark-700 ax-text-dark-fore;
+                    @apply ax-bg-dark-700 ax-border-dark-700 ax-text-dark-fore dark:ax-bg-dark-200 ;
                 }
             }
 
             &.ax-state-selected {
-                @apply ax-bg-dark ax-text-dark-fore;
+                @apply ax-bg-dark-500 ax-text-dark-fore;
             }
         }
         &.ax-light-outline {
-            @apply ax-bg-transparent ax-text-light-fore ax-border-light-300 dark:ax-text-light-200;
+            @apply ax-bg-transparent ax-text-light-fore ax-border-light-300 dark:ax-text-light-200 dark:ax-border-light-400;
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
@@ -590,11 +590,11 @@
             }
         }
         &.ax-light-blank {
-            @apply ax-bg-transparent ax-text-light-400 ax-border-transparent dark:ax-text-light-300;
+            @apply ax-bg-transparent ax-text-light-600 ax-border-transparent dark:ax-text-light-300;
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
-                    @apply ax-bg-light-100 ax-text-light-500 dark:ax-bg-transparent dark:ax-text-light-500;
+                    @apply ax-bg-light-50 ax-text-light-500 dark:ax-bg-transparent dark:ax-text-light-500;
                 }
                 &:active {
                     @apply ax-bg-light-200 ax-text-light-700 dark:ax-text-light-300;
@@ -607,7 +607,7 @@
         }
         // link
         &.ax-primary-link {
-            @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-primary-500 ax-border-primary;
+            @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-primary-500 ax-border-primary-500;
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
@@ -623,7 +623,7 @@
             }
         }
         &.ax-secondary-link {
-            @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-secondary-500 ax-border-secondary;
+            @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-secondary-500 ax-border-secondary-500;
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
@@ -639,7 +639,7 @@
             }
         }
         &.ax-warning-link {
-            @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-warning-500 ax-border-warning;
+            @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-warning-500 ax-border-warning-500;
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
@@ -655,7 +655,7 @@
             }
         }
         &.ax-danger-link {
-            @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-danger-500 ax-border-danger;
+            @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-danger-500 ax-border-danger-500;
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
@@ -671,7 +671,7 @@
             }
         }
         &.ax-success-link {
-            @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-success-500 ax-border-success;
+            @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-success-500 ax-border-success-500;
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
@@ -687,7 +687,7 @@
             }
         }
         &.ax-info-link {
-            @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-info-500 ax-border-info;
+            @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-info-500 ax-border-info-500;
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
@@ -703,11 +703,11 @@
             }
         }
         &.ax-dark-link {
-            @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-dark-500 ax-border-dark dark:ax-border-dark-50 dark:ax-text-dark-50;
+            @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-dark-500 ax-border-dark-500 dark:ax-border-dark-50 dark:ax-text-dark-50;
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
-                    @apply ax-text-dark-600 ax-border-dark-600 dark:ax-border-dark-300 dark:ax-text-dark-300;
+                    @apply ax-text-dark-600 ax-border-dark-600 dark:ax-border-dark-200 dark:ax-text-dark-200;
                 }
                 &:active {
                     @apply ax-text-dark-300 ax-border-dark-300 dark:ax-border-dark-100 dark:ax-text-dark-100;
@@ -728,7 +728,7 @@
                     @apply ax-text-light-500 ax-border-y-light-500;
                 }
                 &:active {
-                    @apply ax-text-light-600 ax-border-light-600;
+                    @apply ax-text-light-600 ax-border-light-600 dark:ax-border-light-200 dark:ax-text-light-200;
                 }
             }