refactor(component): input component (#2275)

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

@@ -0,0 +1,34 @@
+import { createVar, style } from '@vanilla-extract/css';
+
+export const heightVar = createVar('heightVar');
+export const widthVar = createVar('widthVar');
+
+export const inputStyle = style({
+  vars: {
+    [heightVar]: 'unset',
+    [widthVar]: '100%',
+  },
+  width: widthVar,
+  height: heightVar,
+  lineHeight: '22px',
+  padding: '8px 12px',
+  color: 'var(--affine-text-primary-color)',
+  border: '1px solid',
+  borderColor: 'var(--affine-border-color)', // TODO: check out disableColor,
+  backgroundColor: 'var(--affine-white)',
+  borderRadius: '10px',
+  selectors: {
+    '&[data-no-border="true"]': {
+      border: 'unset',
+    },
+    '&[data-disabled="true"]': {
+      color: 'var(--affine-text-disable-color)',
+    },
+    '&::placeholder': {
+      color: 'var(--affine-placeholder-color)',
+    },
+    '&:focus': {
+      borderColor: 'var(--affine-primary-color)',
+    },
+  },
+});