feat(component): add storybook (#5079)

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

@@ -8,17 +8,17 @@ export const inputWrapper = style({
   },
   width: widthVar,
   height: 28,
-  padding: '4px 10px',
-  color: 'var(--affine-icon-color)',
-  border: '1px solid var(--affine-border-color)',
-  backgroundColor: 'var(--affine-white-10)',
+  lineHeight: '22px',
+  padding: '0 10px',
+  color: 'var(--affine-text-primary-color)',
+  border: '1px solid',
+  backgroundColor: 'var(--affine-white)',
   borderRadius: 8,
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  gap: 8,
-  // icon size
-  fontSize: '16px',
+  fontSize: 'var(--affine-font-base)',
+  boxSizing: 'border-box',
 
   selectors: {
     '&.no-border': {
@@ -27,14 +27,10 @@ export const inputWrapper = style({
     // size
     '&.large': {
       height: 32,
-      // icon size
-      fontSize: '20px',
     },
     '&.extra-large': {
       height: 40,
-      padding: '8px 10px',
-      // icon size
-      fontSize: '20px',
+      fontWeight: 600,
     },
     // color
     '&.disabled': {
@@ -49,45 +45,34 @@ export const inputWrapper = style({
     '&.warning': {
       borderColor: 'var(--affine-warning-color)',
     },
+    '&.default': {
+      borderColor: 'var(--affine-border-color)',
+    },
     '&.default.focus': {
       borderColor: 'var(--affine-primary-color)',
-      boxShadow: 'var(--affine-active-shadow)',
+      boxShadow: '0px 0px 0px 2px rgba(30, 150, 235, 0.30);',
     },
   },
 });
 
 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',
   WebkitTapHighlightColor: 'transparent',
   outline: 'none',
   border: 'none',
+  background: 'transparent',
 
   selectors: {
     '&::placeholder': {
       color: 'var(--affine-placeholder-color)',
     },
-    '&:autofill, &:-webkit-autofill, &:-internal-autofill-selected, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active':
-      {
-        // The reason for using ‘!important’ here is:
-        // The user agent style sheets of many browsers utilise !important in their :-webkit-autofill style declarations.
-        // https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill#:~:text=%2C%20254)-,!important,-%3B%0Abackground%2Dimage
-        backgroundColor: 'var(--affine-white-10) !important',
-        ['-webkit-box-shadow' as string]: 'none !important',
-      },
     '&:disabled': {
       color: 'var(--affine-text-disable-color)',
     },
-    '&.large, &.extra-large': {
-      fontSize: 'var(--affine-font-base)',
-      lineHeight: '24px',
-    },
   },
 });