style: adjust settings style (#3083)

packages/component/src/ui/button/styles.ts

@@ -174,7 +174,6 @@ export const StyledButton = styled('button', {
           color: 'var(--affine-text-disable-color)',
         }
       : {}),
-    transition: 'background .15s',
     // TODO: Implement circle shape
     borderRadius: shape === 'default' ? borderRadius : height / 2,
     fontSize,

packages/component/src/ui/button/utils.ts

@@ -50,9 +50,14 @@ export const getButtonColors = (
         background: 'var(--affine-primary-color)',
         color: 'var(--affine-white)',
         borderColor: 'var(--affine-primary-color)',
+        backgroundBlendMode: 'overlay',
         '.affine-button-icon': {
           color: 'var(--affine-white)',
         },
+        ':hover': {
+          background:
+            'linear-gradient(var(--affine-primary-color),var(--affine-primary-color)),var(--affine-hover-color)',
+        },
       };
     case 'light':
       return {