fix(Button): optimize styles * 6

Author: tenphi

src/components/actions/Button/Button.stories.tsx

@@ -156,6 +156,17 @@ const TemplateStates: StoryFn<CubeButtonProps> = ({
     >
       {label || 'Focused'}
     </Button>
+    <Button
+      {...props}
+      isDisabled
+      mods={{
+        hovered: false,
+        pressed: false,
+        focused: false,
+      }}
+    >
+      {label || 'Disabled'}
+    </Button>
     {['outline', 'neutral', 'clear'].includes(props.type) || !props.type ? (
       <Button
         {...props}
@@ -169,17 +180,6 @@ const TemplateStates: StoryFn<CubeButtonProps> = ({
         {label || 'Selected'}
       </Button>
     ) : null}
-    <Button
-      {...props}
-      isDisabled
-      mods={{
-        hovered: false,
-        pressed: false,
-        focused: false,
-      }}
-    >
-      {label || 'Disabled'}
-    </Button>
   </Space>
 );
 
@@ -244,6 +244,17 @@ const DarkTemplateStates: StoryFn<CubeButtonProps> = ({
     >
       {label || 'Focused'}
     </Button>
+    <Button
+      {...props}
+      isDisabled
+      mods={{
+        hovered: false,
+        pressed: false,
+        focused: false,
+      }}
+    >
+      {label || 'Disabled'}
+    </Button>
     {['outline', 'neutral'].includes(props.type) || !props.type ? (
       <Button
         {...props}
@@ -257,17 +268,6 @@ const DarkTemplateStates: StoryFn<CubeButtonProps> = ({
         {label || 'Selected'}
       </Button>
     ) : null}
-    <Button
-      {...props}
-      isDisabled
-      mods={{
-        hovered: false,
-        pressed: false,
-        focused: false,
-      }}
-    >
-      {label || 'Disabled'}
-    </Button>
   </Space>
 );
 

src/components/actions/Button/Button.tsx

@@ -489,8 +489,9 @@ export const SPECIAL_NEUTRAL_STYLES: Styles = {
   },
   fill: {
     '': '#white.0',
-    hovered: '#white.18',
-    'pressed | selected | [disabled]': '#white.12',
+    hovered: '#white.12',
+    'pressed | selected': '#white.18',
+    '[disabled]': 'white.12',
   },
   color: {
     '': '#white',