@acorex/styles 5.7.0 → 6.0.0

package/src/components/_button.scss

@@ -1,11 +1,11 @@
 @layer components {
-    ax-button {
-        @apply ax-text-sm ax-relative ax-inline-flex ax-items-center ax-justify-center ax-rounded-md ax-select-none  ax-font-medium ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis ax-transition-all;
+    .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;
 
         & > button {
-            @apply ax-inline-flex ax-items-center ax-justify-center  ax-font-medium  ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis ax-px-4 ax-w-full ax-h-full;
+            @apply ax-inline-flex ax-items-center ax-justify-center ax-font-medium ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis ax-px-4 ax-w-full ax-h-full;
             &:focus,
             &:focus-visible {
                 @apply ax-outline-none;
@@ -14,13 +14,12 @@
         }
         &:focus {
             @apply ax-outline-none;
-            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"] {
@@ -30,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 {
@@ -72,8 +67,8 @@
         }
 
         // primary
-        &.ax-primary-normal {
-            @apply ax-bg-primary-500 ax-text-primary-fore ax-border-transparent;
+        &.ax-primary-default {
+            @apply ax-bg-primary-500 ax-text-primary-fore ax-border-transparent dark:ax-bg-primary-800;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
                 &:hover {
@@ -90,21 +85,21 @@
                 }
             }
             &.ax-state-selected {
-                @apply ax-bg-primary-800;
+                @apply ax-bg-primary-800 dark:ax-bg-primary-500;
             }
         }
         &.ax-primary-twotone {
-            @apply ax-bg-primary-100 ax-text-primary-500 ax-border-transparent dark:ax-bg-primary-300 dark:ax-text-primary-700;
+            @apply ax-bg-primary-100 ax-text-primary-500 ax-border-transparent dark:ax-bg-primary-800 dark:ax-text-primary-100;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
                 &:hover,
                 &:focus,
                 &:focus-within {
-                    @apply ax-bg-primary-200 ax-text-primary-700;
+                    @apply ax-bg-primary-200 ax-text-primary-700 dark:ax-bg-primary-700 dark:ax-text-primary-100;
                 }
 
                 &:active {
-                    @apply ax-bg-primary-300 ax-text-primary-700;
+                    @apply ax-bg-primary-300 ax-text-primary-700 dark:ax-bg-primary-500;
                 }
             }
             &.ax-state-selected {
@@ -112,17 +107,19 @@
             }
         }
         &.ax-primary-outline {
-            @apply ax-text-primary-500 ax-border-primary-500;
+            @apply ax-text-primary-500 ax-border-primary-500 dark:ax-border-primary-400 dark:ax-text-primary-300;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
-                &:hover,
+                &:hover {
+                    @apply ax-border-primary-300 ax-text-primary-300 dark:ax-text-primary-200 dark:ax-border-primary-500;
+                }
                 &:focus,
                 &:focus-within {
-                    @apply ax-border-primary-300 ax-text-primary-300;
+                    @apply ax-border-primary-400 ax-ring-2 ax-text-primary-400 dark:ax-text-primary-200 dark:ax-border-primary-500 ax-ring-primary-100 dark:ax-ring-primary-900;
                 }
 
                 &:active {
-                    @apply ax-border-primary-600 ax-text-primary-800;
+                    @apply ax-border-primary-600 ax-text-primary-800 dark:ax-border-primary-400 dark:ax-text-primary-100;
                 }
             }
             &.ax-state-selected {
@@ -130,17 +127,19 @@
             }
         }
         &.ax-primary-blank {
-            @apply ax-text-primary-500 ax-border-transparent;
+            @apply ax-text-primary-500 ax-border-transparent dark:ax-text-primary-300;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
-                &:hover,
+                &:hover {
+                    @apply ax-text-primary-600 dark:ax-text-primary-100;
+                }
                 &:focus,
                 &:focus-within {
-                    @apply ax-bg-primary-50 ax-text-primary-600 dark:ax-bg-transparent;
+                    @apply ax-text-primary-700 dark:ax-text-primary-200 ax-ring-2 ax-ring-primary-100 dark:ax-ring-primary-900;
                 }
 
                 &:active {
-                    @apply ax-bg-primary-100 ax-text-primary-700;
+                    @apply ax-text-primary-700 ax-ring-0 dark:ax-text-primary-300;
                 }
             }
             &.ax-state-selected {
@@ -148,17 +147,19 @@
             }
         }
         &.ax-primary-link {
-            @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-primary-500 ax-border-primary-500;
+            @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-primary-500 ax-border-primary-500 dark:ax-border-primary-400 dark:ax-text-primary-300;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
-                &:hover,
+                &:hover {
+                    @apply ax-text-primary-700 ax-border-primary-800 dark:ax-border-primary-200 dark:ax-text-primary-200;
+                }
                 &:focus,
                 &:focus-within {
-                    @apply ax-text-primary-800 ax-border-primary-800;
+                    @apply ax-text-primary-900 dark:ax-text-primary-500 ax-border-primary-800 dark:ax-border-primary-500 ax-ring-2 ax-ring-primary-100 dark:ax-ring-primary-900;
                 }
 
                 &:active {
-                    @apply ax-text-primary-500 ax-border-primary-500;
+                    @apply ax-text-primary-500 dark:ax-text-primary-400 ax-border-primary-500 dark:ax-border-primary-400;
                 }
             }
             &.ax-state-selected {
@@ -167,8 +168,8 @@
         }
 
         // secondary
-        &.ax-secondary-normal {
-            @apply ax-bg-secondary-500 ax-text-secondary-fore ax-border-transparent;
+        &.ax-secondary-default {
+            @apply ax-bg-secondary-500 ax-text-secondary-fore ax-border-transparent dark:ax-bg-secondary-800;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
                 &:hover {
@@ -185,21 +186,21 @@
                 }
             }
             &.ax-state-selected {
-                @apply ax-bg-secondary-800;
+                @apply ax-bg-secondary-800 dark:ax-bg-secondary-500;
             }
         }
         &.ax-secondary-twotone {
-            @apply ax-bg-secondary-100 ax-text-secondary-500 ax-border-transparent dark:ax-bg-secondary-300 dark:ax-text-secondary-700;
+            @apply ax-bg-secondary-100 ax-text-secondary-500 ax-border-transparent dark:ax-bg-secondary-800 dark:ax-text-secondary-100;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
                 &:hover,
                 &:focus,
                 &:focus-within {
-                    @apply ax-bg-secondary-200 ax-text-secondary-700;
+                    @apply ax-bg-secondary-200 ax-text-secondary-700 dark:ax-bg-secondary-700 dark:ax-text-secondary-100;
                 }
 
                 &:active {
-                    @apply ax-bg-secondary-300 ax-text-secondary-700;
+                    @apply ax-bg-secondary-300 ax-text-secondary-700 dark:ax-bg-secondary-500;
                 }
             }
             &.ax-state-selected {
@@ -207,17 +208,19 @@
             }
         }
         &.ax-secondary-outline {
-            @apply ax-text-secondary-500 ax-border-secondary-500;
+            @apply ax-text-secondary-500 ax-border-secondary-500 dark:ax-border-secondary-400 dark:ax-text-secondary-300;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
-                &:hover,
+                &:hover {
+                    @apply ax-border-secondary-300 ax-text-secondary-300 dark:ax-text-secondary-200 dark:ax-border-secondary-500;
+                }
                 &:focus,
                 &:focus-within {
-                    @apply ax-border-secondary-300 ax-text-secondary-300;
+                    @apply ax-border-secondary-400 ax-ring-2 ax-text-secondary-400 dark:ax-text-secondary-200 dark:ax-border-secondary-500 ax-ring-secondary-100 dark:ax-ring-secondary-900;
                 }
 
                 &:active {
-                    @apply ax-border-secondary-600 ax-text-secondary-800;
+                    @apply ax-border-secondary-600 ax-text-secondary-800 dark:ax-border-secondary-400 dark:ax-text-secondary-100;
                 }
             }
             &.ax-state-selected {
@@ -225,17 +228,19 @@
             }
         }
         &.ax-secondary-blank {
-            @apply ax-text-secondary-500 ax-border-transparent;
+            @apply ax-text-secondary-500 ax-border-transparent dark:ax-text-secondary-300;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
-                &:hover,
+                &:hover {
+                    @apply ax-text-secondary-600 dark:ax-text-secondary-100;
+                }
                 &:focus,
                 &:focus-within {
-                    @apply ax-bg-secondary-50 ax-text-secondary-600 dark:ax-bg-transparent;
+                    @apply ax-text-secondary-700 dark:ax-text-secondary-200 ax-ring-2 ax-ring-secondary-100 dark:ax-ring-secondary-900;
                 }
 
                 &:active {
-                    @apply ax-bg-secondary-100 ax-text-secondary-700;
+                    @apply ax-text-secondary-700 ax-ring-0 dark:ax-text-secondary-300;
                 }
             }
             &.ax-state-selected {
@@ -243,17 +248,19 @@
             }
         }
         &.ax-secondary-link {
-            @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-secondary-500 ax-border-secondary-500;
+            @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-secondary-500 ax-border-secondary-500 dark:ax-border-secondary-400 dark:ax-text-secondary-300;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
-                &:hover,
+                &:hover {
+                    @apply ax-text-secondary-700 ax-border-secondary-800 dark:ax-border-secondary-200 dark:ax-text-secondary-200;
+                }
                 &:focus,
                 &:focus-within {
-                    @apply ax-text-secondary-800 ax-border-secondary-800;
+                    @apply ax-text-secondary-900 dark:ax-text-secondary-500 ax-border-secondary-800 dark:ax-border-secondary-500 ax-ring-2 ax-ring-secondary-100 dark:ax-ring-secondary-900;
                 }
 
                 &:active {
-                    @apply ax-text-secondary-500 ax-border-secondary-500;
+                    @apply ax-text-secondary-500 dark:ax-text-secondary-400 ax-border-secondary-500 dark:ax-border-secondary-400;
                 }
             }
             &.ax-state-selected {
@@ -262,8 +269,8 @@
         }
 
         // success
-        &.ax-success-normal {
-            @apply ax-bg-success-500 ax-text-success-fore ax-border-transparent;
+        &.ax-success-default {
+            @apply ax-bg-success-500 ax-text-success-fore ax-border-transparent dark:ax-bg-success-800;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
                 &:hover {
@@ -280,21 +287,21 @@
                 }
             }
             &.ax-state-selected {
-                @apply ax-bg-success-800;
+                @apply ax-bg-success-800 dark:ax-bg-success-500;
             }
         }
         &.ax-success-twotone {
-            @apply ax-bg-success-100 ax-text-success-500 ax-border-transparent dark:ax-bg-success-300 dark:ax-text-success-700;
+            @apply ax-bg-success-100 ax-text-success-500 ax-border-transparent dark:ax-bg-success-800 dark:ax-text-success-100;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
                 &:hover,
                 &:focus,
                 &:focus-within {
-                    @apply ax-bg-success-200 ax-text-success-700;
+                    @apply ax-bg-success-200 ax-text-success-700 dark:ax-bg-success-700 dark:ax-text-success-100;
                 }
 
                 &:active {
-                    @apply ax-bg-success-300 ax-text-success-700;
+                    @apply ax-bg-success-300 ax-text-success-700 dark:ax-bg-success-500;
                 }
             }
             &.ax-state-selected {
@@ -302,17 +309,19 @@
             }
         }
         &.ax-success-outline {
-            @apply ax-text-success-500 ax-border-success-500;
+            @apply ax-text-success-500 ax-border-success-500 dark:ax-border-success-400 dark:ax-text-success-300;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
-                &:hover,
+                &:hover {
+                    @apply ax-border-success-300 ax-text-success-300 dark:ax-text-success-200 dark:ax-border-success-500;
+                }
                 &:focus,
                 &:focus-within {
-                    @apply ax-border-success-300 ax-text-success-300;
+                    @apply ax-border-success-400 ax-ring-2 ax-text-success-400 dark:ax-text-success-200 dark:ax-border-success-500 ax-ring-success-100 dark:ax-ring-success-900;
                 }
 
                 &:active {
-                    @apply ax-border-success-600 ax-text-success-800;
+                    @apply ax-border-success-600 ax-text-success-800 dark:ax-border-success-400 dark:ax-text-success-100;
                 }
             }
             &.ax-state-selected {
@@ -320,17 +329,19 @@
             }
         }
         &.ax-success-blank {
-            @apply ax-text-success-500 ax-border-transparent;
+            @apply ax-text-success-500 ax-border-transparent dark:ax-text-success-300;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
-                &:hover,
+                &:hover {
+                    @apply ax-text-success-600 dark:ax-text-success-100;
+                }
                 &:focus,
                 &:focus-within {
-                    @apply ax-bg-success-50 ax-text-success-600 dark:ax-bg-transparent;
+                    @apply ax-text-success-700 dark:ax-text-success-200 ax-ring-2 ax-ring-success-100 dark:ax-ring-success-900;
                 }
 
                 &:active {
-                    @apply ax-bg-success-100 ax-text-success-700;
+                    @apply ax-text-success-700 ax-ring-0 dark:ax-text-success-300;
                 }
             }
             &.ax-state-selected {
@@ -338,17 +349,19 @@
             }
         }
         &.ax-success-link {
-            @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-success-500 ax-border-success-500;
+            @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-success-500 ax-border-success-500 dark:ax-border-success-400 dark:ax-text-success-300;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
-                &:hover,
+                &:hover {
+                    @apply ax-text-success-700 ax-border-success-800 dark:ax-border-success-200 dark:ax-text-success-200;
+                }
                 &:focus,
                 &:focus-within {
-                    @apply ax-text-success-800 ax-border-success-800;
+                    @apply ax-text-success-900 dark:ax-text-success-500 ax-border-success-800 dark:ax-border-success-500 ax-ring-2 ax-ring-success-100 dark:ax-ring-success-900;
                 }
 
                 &:active {
-                    @apply ax-text-success-500 ax-border-success-500;
+                    @apply ax-text-success-500 dark:ax-text-success-400 ax-border-success-500 dark:ax-border-success-400;
                 }
             }
             &.ax-state-selected {
@@ -357,8 +370,8 @@
         }
 
         // warning
-        &.ax-warning-normal {
-            @apply ax-bg-warning-500 ax-text-warning-fore ax-border-transparent;
+        &.ax-warning-default {
+            @apply ax-bg-warning-500 ax-text-warning-fore ax-border-transparent dark:ax-bg-warning-800;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
                 &:hover {
@@ -375,21 +388,21 @@
                 }
             }
             &.ax-state-selected {
-                @apply ax-bg-warning-800;
+                @apply ax-bg-warning-800 dark:ax-bg-warning-500;
             }
         }
         &.ax-warning-twotone {
-            @apply ax-bg-warning-100 ax-text-warning-900 ax-border-transparent dark:ax-bg-warning-300 dark:ax-text-warning-700;
+            @apply ax-bg-warning-100 ax-text-warning-900 ax-border-transparent dark:ax-bg-warning-700 dark:ax-text-warning-fore;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
                 &:hover,
                 &:focus,
                 &:focus-within {
-                    @apply ax-bg-warning-200 ax-text-warning-800;
+                    @apply ax-bg-warning-200 ax-text-warning-fore dark:ax-bg-warning-700 dark:ax-text-warning-fore;
                 }
 
                 &:active {
-                    @apply ax-bg-warning-300 ax-text-warning-fore;
+                    @apply ax-bg-warning-300 ax-text-warning-fore dark:ax-bg-warning-500 dark:ax-text-warning-fore;
                 }
             }
             &.ax-state-selected {
@@ -397,17 +410,19 @@
             }
         }
         &.ax-warning-outline {
-            @apply ax-text-warning-500 ax-border-warning-500;
+            @apply ax-text-warning-500 ax-border-warning-500 dark:ax-border-warning-400 dark:ax-text-warning-300;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
-                &:hover,
+                &:hover {
+                    @apply ax-border-warning-300 ax-text-warning-300 dark:ax-text-warning-200 dark:ax-border-warning-500;
+                }
                 &:focus,
                 &:focus-within {
-                    @apply ax-border-warning-300 ax-text-warning-300;
+                    @apply ax-border-warning-400 ax-ring-2 ax-text-warning-400 dark:ax-text-warning-200 dark:ax-border-warning-500 ax-ring-warning-100 dark:ax-ring-warning-900;
                 }
 
                 &:active {
-                    @apply ax-border-warning-600 ax-text-warning-800;
+                    @apply ax-border-warning-600 ax-text-warning-800 dark:ax-border-warning-400 dark:ax-text-warning-100;
                 }
             }
             &.ax-state-selected {
@@ -415,17 +430,19 @@
             }
         }
         &.ax-warning-blank {
-            @apply ax-text-warning-500 ax-border-transparent;
+            @apply ax-text-warning-500 ax-border-transparent dark:ax-text-warning-300;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
-                &:hover,
+                &:hover {
+                    @apply ax-text-warning-600 dark:ax-text-warning-100;
+                }
                 &:focus,
                 &:focus-within {
-                    @apply ax-bg-warning-50 ax-text-warning-600 dark:ax-bg-transparent;
+                    @apply ax-text-warning-700 dark:ax-text-warning-200 ax-ring-2 ax-ring-warning-100 dark:ax-ring-warning-900;
                 }
 
                 &:active {
-                    @apply ax-bg-warning-100 ax-text-warning-700;
+                    @apply ax-text-warning-700 ax-ring-0 dark:ax-text-warning-300;
                 }
             }
             &.ax-state-selected {
@@ -433,17 +450,19 @@
             }
         }
         &.ax-warning-link {
-            @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-warning-500 ax-border-warning-500;
+            @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-warning-500 ax-border-warning-500 dark:ax-border-warning-400 dark:ax-text-warning-300;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
-                &:hover,
+                &:hover {
+                    @apply ax-text-warning-700 ax-border-warning-800 dark:ax-border-warning-200 dark:ax-text-warning-200;
+                }
                 &:focus,
                 &:focus-within {
-                    @apply ax-text-warning-800 ax-border-warning-800;
+                    @apply ax-text-warning-900 dark:ax-text-warning-500 ax-border-warning-800 dark:ax-border-warning-500 ax-ring-2 ax-ring-warning-100 dark:ax-ring-warning-900;
                 }
 
                 &:active {
-                    @apply ax-text-warning-500 ax-border-warning-500;
+                    @apply ax-text-warning-500 dark:ax-text-warning-400 ax-border-warning-500 dark:ax-border-warning-400;
                 }
             }
             &.ax-state-selected {
@@ -452,8 +471,8 @@
         }
 
         // danger
-        &.ax-danger-normal {
-            @apply ax-bg-danger-500 ax-text-danger-fore ax-border-transparent;
+        &.ax-danger-default {
+            @apply ax-bg-danger-500 ax-text-danger-fore ax-border-transparent dark:ax-bg-danger-800;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
                 &:hover {
@@ -470,21 +489,21 @@
                 }
             }
             &.ax-state-selected {
-                @apply ax-bg-danger-800;
+                @apply ax-bg-danger-800 dark:ax-bg-danger-500;
             }
         }
         &.ax-danger-twotone {
-            @apply ax-bg-danger-100 ax-text-danger-500 ax-border-transparent dark:ax-bg-danger-300 dark:ax-text-danger-700;
+            @apply ax-bg-danger-100 ax-text-danger-500 ax-border-transparent dark:ax-bg-danger-800 dark:ax-text-danger-100;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
                 &:hover,
                 &:focus,
                 &:focus-within {
-                    @apply ax-bg-danger-200 ax-text-danger-700;
+                    @apply ax-bg-danger-200 ax-text-danger-700 dark:ax-bg-danger-700 dark:ax-text-danger-100;
                 }
 
                 &:active {
-                    @apply ax-bg-danger-300 ax-text-danger-700;
+                    @apply ax-bg-danger-300 ax-text-danger-700 dark:ax-bg-danger-500;
                 }
             }
             &.ax-state-selected {
@@ -492,17 +511,19 @@
             }
         }
         &.ax-danger-outline {
-            @apply ax-text-danger-500 ax-border-danger-500;
+            @apply ax-text-danger-500 ax-border-danger-500 dark:ax-border-danger-400 dark:ax-text-danger-300;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
-                &:hover,
+                &:hover {
+                    @apply ax-border-danger-300 ax-text-danger-300 dark:ax-text-danger-200 dark:ax-border-danger-500;
+                }
                 &:focus,
                 &:focus-within {
-                    @apply ax-border-danger-300 ax-text-danger-300;
+                    @apply ax-border-danger-400 ax-ring-2 ax-text-danger-400 dark:ax-text-danger-200 dark:ax-border-danger-500 ax-ring-danger-100 dark:ax-ring-danger-900;
                 }
 
                 &:active {
-                    @apply ax-border-danger-600 ax-text-danger-800;
+                    @apply ax-border-danger-600 ax-text-danger-800 dark:ax-border-danger-400 dark:ax-text-danger-100;
                 }
             }
             &.ax-state-selected {
@@ -510,17 +531,19 @@
             }
         }
         &.ax-danger-blank {
-            @apply ax-text-danger-500 ax-border-transparent;
+            @apply ax-text-danger-500 ax-border-transparent dark:ax-text-danger-300;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
-                &:hover,
+                &:hover {
+                    @apply ax-text-danger-600 dark:ax-text-danger-100;
+                }
                 &:focus,
                 &:focus-within {
-                    @apply ax-bg-danger-50 ax-text-danger-600 dark:ax-bg-transparent;
+                    @apply ax-text-danger-700 dark:ax-text-danger-200 ax-ring-2 ax-ring-danger-100 dark:ax-ring-danger-900;
                 }
 
                 &:active {
-                    @apply ax-bg-danger-100 ax-text-danger-700;
+                    @apply ax-text-danger-700 ax-ring-0 dark:ax-text-danger-300;
                 }
             }
             &.ax-state-selected {
@@ -528,17 +551,19 @@
             }
         }
         &.ax-danger-link {
-            @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-danger-500 ax-border-danger-500;
+            @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-danger-500 ax-border-danger-500 dark:ax-border-danger-400 dark:ax-text-danger-300;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
-                &:hover,
+                &:hover {
+                    @apply ax-text-danger-700 ax-border-danger-800 dark:ax-border-danger-200 dark:ax-text-danger-200;
+                }
                 &:focus,
                 &:focus-within {
-                    @apply ax-text-danger-800 ax-border-danger-800;
+                    @apply ax-text-danger-900 dark:ax-text-danger-500 ax-border-danger-800 dark:ax-border-danger-500 ax-ring-2 ax-ring-danger-100 dark:ax-ring-danger-900;
                 }
 
                 &:active {
-                    @apply ax-text-danger-500 ax-border-danger-500;
+                    @apply ax-text-danger-500 dark:ax-text-danger-400 ax-border-danger-500 dark:ax-border-danger-400;
                 }
             }
             &.ax-state-selected {
@@ -547,8 +572,8 @@
         }
 
         // info
-        &.ax-info-normal {
-            @apply ax-bg-info-500 ax-text-info-fore ax-border-transparent;
+        &.ax-info-default {
+            @apply ax-bg-info-500 ax-text-info-fore ax-border-transparent dark:ax-bg-info-800;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
                 &:hover {
@@ -565,21 +590,21 @@
                 }
             }
             &.ax-state-selected {
-                @apply ax-bg-info-800;
+                @apply ax-bg-info-800 dark:ax-bg-info-500;
             }
         }
         &.ax-info-twotone {
-            @apply ax-bg-info-100 ax-text-info-500 ax-border-transparent dark:ax-bg-info-300 dark:ax-text-info-700;
+            @apply ax-bg-info-100 ax-text-info-500 ax-border-transparent dark:ax-bg-info-800 dark:ax-text-info-100;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
                 &:hover,
                 &:focus,
                 &:focus-within {
-                    @apply ax-bg-info-200 ax-text-info-700;
+                    @apply ax-bg-info-200 ax-text-info-700 dark:ax-bg-info-700 dark:ax-text-info-100;
                 }
 
                 &:active {
-                    @apply ax-bg-info-300 ax-text-info-700;
+                    @apply ax-bg-info-300 ax-text-info-700 dark:ax-bg-info-500;
                 }
             }
             &.ax-state-selected {
@@ -587,17 +612,19 @@
             }
         }
         &.ax-info-outline {
-            @apply ax-text-info-500 ax-border-info-500;
+            @apply ax-text-info-500 ax-border-info-500 dark:ax-border-info-400 dark:ax-text-info-300;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
-                &:hover,
+                &:hover {
+                    @apply ax-border-info-300 ax-text-info-300 dark:ax-text-info-200 dark:ax-border-info-500;
+                }
                 &:focus,
                 &:focus-within {
-                    @apply ax-border-info-300 ax-text-info-300;
+                    @apply ax-border-info-400 ax-ring-2 ax-text-info-400 dark:ax-text-info-200 dark:ax-border-info-500 ax-ring-info-100 dark:ax-ring-info-900;
                 }
 
                 &:active {
-                    @apply ax-border-info-600 ax-text-info-800;
+                    @apply ax-border-info-600 ax-text-info-800 dark:ax-border-info-400 dark:ax-text-info-100;
                 }
             }
             &.ax-state-selected {
@@ -605,17 +632,19 @@
             }
         }
         &.ax-info-blank {
-            @apply ax-text-info-500 ax-border-transparent;
+            @apply ax-text-info-500 ax-border-transparent dark:ax-text-info-300;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
-                &:hover,
+                &:hover {
+                    @apply ax-text-info-600 dark:ax-text-info-100;
+                }
                 &:focus,
                 &:focus-within {
-                    @apply ax-bg-info-50 ax-text-info-600 dark:ax-bg-transparent;
+                    @apply ax-text-info-700 dark:ax-text-info-200 ax-ring-2 ax-ring-info-100 dark:ax-ring-info-900;
                 }
 
                 &:active {
-                    @apply ax-bg-info-100 ax-text-info-700;
+                    @apply ax-text-info-700 ax-ring-0 dark:ax-text-info-300;
                 }
             }
             &.ax-state-selected {
@@ -623,17 +652,19 @@
             }
         }
         &.ax-info-link {
-            @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-info-500 ax-border-info-500;
+            @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-info-500 ax-border-info-500 dark:ax-border-info-400 dark:ax-text-info-300;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
-                &:hover,
+                &:hover {
+                    @apply ax-text-info-700 ax-border-info-800 dark:ax-border-info-200 dark:ax-text-info-200;
+                }
                 &:focus,
                 &:focus-within {
-                    @apply ax-text-info-800 ax-border-info-800;
+                    @apply ax-text-info-900 dark:ax-text-info-500 ax-border-info-800 dark:ax-border-info-500 ax-ring-2 ax-ring-info-100 dark:ax-ring-info-900;
                 }
 
                 &:active {
-                    @apply ax-text-info-500 ax-border-info-500;
+                    @apply ax-text-info-500 dark:ax-text-info-400 ax-border-info-500 dark:ax-border-info-400;
                 }
             }
             &.ax-state-selected {
@@ -642,7 +673,7 @@
         }
 
         // dark
-        &.ax-dark-normal {
+        &.ax-dark-default {
             @apply ax-bg-dark-500 ax-text-dark-fore ax-border-transparent dark:ax-bg-dark-600;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
@@ -659,7 +690,7 @@
                     @apply ax-bg-dark-700 ax-ring-2 ax-ring-offset-2 ax-ring-dark-500 dark:ax-ring-dark-500 dark:ax-bg-dark-500;
                 }
             }
-            &.ax-state-selected{
+            &.ax-state-selected {
                 @apply ax-bg-dark-300  ax-text-dark-fore;
             }
         }
@@ -679,7 +710,7 @@
                     @apply ax-bg-dark-200 ax-text-dark-700;
                 }
             }
-            &.ax-state-selected{
+            &.ax-state-selected {
                 @apply ax-bg-dark-300 ax-text-dark-fore;
             }
         }
@@ -700,7 +731,7 @@
                     @apply ax-border-dark-100;
                 }
             }
-            &.ax-state-selected{
+            &.ax-state-selected {
                 @apply ax-bg-dark-300 ax-border-dark-300 ax-text-dark-fore;
             }
         }
@@ -718,7 +749,7 @@
                     @apply ax-bg-dark-600 ax-text-dark-fore dark:ax-text-dark-50;
                 }
             }
-            &.ax-state-selected{
+            &.ax-state-selected {
                 @apply ax-bg-dark-300 ax-text-dark-fore;
             }
         }
@@ -736,13 +767,13 @@
                     @apply ax-text-dark-300 ax-border-dark-300 dark:ax-border-dark-100 dark:ax-text-dark-100;
                 }
             }
-            &.ax-state-selected{
+            &.ax-state-selected {
                 @apply ax-bg-dark-300 ax-text-dark-fore;
             }
         }
 
         // light
-        &.ax-light-normal {
+        &.ax-light-default {
             @apply ax-bg-light-100 ax-text-light-fore dark:ax-bg-light-800 dark:ax-border-light-800 dark:ax-text-light-100;
 
             &:not(.ax-state-disabled, .ax-state-selected) {
@@ -849,10 +880,10 @@
         }
     }
 
-    ax-button-group {
+    .ax-button-group {
         @apply ax-flex;
 
-        ax-button {
+        .ax-button {
             @apply ax-rounded-none;
 
             &[class*="-link"] {