feat: new sidebar (app shell) styles (#2303)

packages/component/src/components/app-sidebar/quick-search-input/index.css.ts

@@ -0,0 +1,35 @@
+import { style } from '@vanilla-extract/css';
+
+export const root = style({
+  display: 'inline-flex',
+  background: 'var(--affine-white-10)',
+  alignItems: 'center',
+  borderRadius: '8px',
+  border: '1px solid var(--affine-black-10)',
+  fontSize: 'var(--affine-font-sm)',
+  width: '100%',
+  height: '36px',
+  userSelect: 'none',
+  cursor: 'pointer',
+  padding: '0 12px',
+  margin: '12px 0',
+  selectors: {
+    '&:hover': {
+      background: 'var(--affine-hover-color)',
+    },
+  },
+});
+
+export const icon = style({
+  marginRight: '14px',
+  color: 'var(--affine-icon-color)',
+});
+
+export const spacer = style({
+  flex: 1,
+});
+
+export const shortcutHint = style({
+  color: 'var(--affine-black-30)',
+  fontSize: 'var(--affine-font-base)',
+});