refactor(editor): extract frame title widget (#9458)

blocksuite/affine/widget-frame-title/src/styles.ts

@@ -0,0 +1,35 @@
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+import { css } from 'lit';
+
+export const frameTitleStyleVars = {
+  nestedFrameOffset: 4,
+  height: 22,
+  fontSize: 14,
+};
+
+export const frameTitleStyle = css`
+  :host {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    z-index: 1;
+    border: 1px solid ${unsafeCSSVarV2('edgeless/frame/border/default')};
+    border-radius: 4px;
+    width: fit-content;
+    height: ${frameTitleStyleVars.height}px;
+    padding: 0px 4px;
+    transform-origin: left bottom;
+    background-color: var(--bg-color);
+
+    font-family: var(--affine-font-family);
+    font-size: ${frameTitleStyleVars.fontSize}px;
+    cursor: default;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  :hover {
+    background-color: color-mix(in srgb, var(--bg-color), #000000 7%);
+  }
+`;