refactor(infra): directory structure (#4615)

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

@@ -0,0 +1,85 @@
+import { createVar, style } from '@vanilla-extract/css';
+
+export const widthVar = createVar('widthVar');
+
+export const inputWrapper = style({
+  vars: {
+    [widthVar]: '100%',
+  },
+  width: widthVar,
+  height: 28,
+  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',
+  gap: 8,
+  // icon size
+  fontSize: '16px',
+
+  selectors: {
+    '&.no-border': {
+      border: 'unset',
+    },
+    // size
+    '&.large': {
+      height: 32,
+      // icon size
+      fontSize: '20px',
+    },
+    '&.extra-large': {
+      height: 40,
+      padding: '8px 10px',
+      // icon size
+      fontSize: '20px',
+    },
+    // color
+    '&.disabled': {
+      background: 'var(--affine-hover-color)',
+    },
+    '&.error': {
+      borderColor: 'var(--affine-error-color)',
+    },
+    '&.success': {
+      borderColor: 'var(--affine-success-color)',
+    },
+    '&.warning': {
+      borderColor: 'var(--affine-warning-color)',
+    },
+    '&.default.focus': {
+      borderColor: 'var(--affine-primary-color)',
+      boxShadow: 'var(--affine-active-shadow)',
+    },
+  },
+});
+
+export const input = style({
+  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',
+
+  selectors: {
+    '&::placeholder': {
+      color: 'var(--affine-placeholder-color)',
+    },
+    '&:disabled': {
+      color: 'var(--affine-text-disable-color)',
+    },
+    '&.large, &.extra-large': {
+      fontSize: 'var(--affine-font-base)',
+      lineHeight: '24px',
+    },
+  },
+});