fix(component): adjust dialog and input style (#4566)

packages/component/src/ui/input/style.css.ts

@@ -8,16 +8,17 @@ export const inputWrapper = style({
   },
   width: widthVar,
   height: 28,
-  lineHeight: '22px',
-  padding: '0 10px',
-  color: 'var(--affine-text-primary-color)',
-  border: '1px solid',
-  backgroundColor: 'var(--affine-white)',
+  padding: '4px 10px',
+  color: 'var(--affine-icon-color)',
+  border: '1px solid var(--affine-border-color)',
+  backgroundColor: 'var(--affine-white-10)',
   borderRadius: 8,
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  fontSize: 'var(--affine-font-base)',
+  gap: 8,
+  // icon size
+  fontSize: '16px',
 
   selectors: {
     '&.no-border': {
@@ -26,10 +27,14 @@ export const inputWrapper = style({
     // size
     '&.large': {
       height: 32,
+      // icon size
+      fontSize: '20px',
     },
     '&.extra-large': {
       height: 40,
-      fontWeight: 600,
+      padding: '8px 10px',
+      // icon size
+      fontSize: '20px',
     },
     // color
     '&.disabled': {
@@ -44,20 +49,20 @@ export const inputWrapper = style({
     '&.warning': {
       borderColor: 'var(--affine-warning-color)',
     },
-    '&.default': {
-      borderColor: 'var(--affine-border-color)',
-    },
     '&.default.focus': {
       borderColor: 'var(--affine-primary-color)',
-      boxShadow: '0px 0px 0px 2px rgba(30, 150, 235, 0.30);',
+      boxShadow: 'var(--affine-active-shadow)',
     },
   },
 });
 
 export const input = style({
-  height: '100%',
   width: '0',
   flex: 1,
+  fontSize: 'var(--affine-font-xs)',
+  lineHeight: '20px',
+  fontWeight: '500',
+  color: 'var(--affine-text-primary-color)',
   boxSizing: 'border-box',
   // prevent default style
   WebkitAppearance: 'none',
@@ -72,5 +77,9 @@ export const input = style({
     '&:disabled': {
       color: 'var(--affine-text-disable-color)',
     },
+    '&.large, &.extra-large': {
+      fontSize: 'var(--affine-font-base)',
+      lineHeight: '24px',
+    },
   },
 });