From 7b6e00d84afdd4d48e6dd7708b4d395f81e02af3 Mon Sep 17 00:00:00 2001 From: zzj3720 <17165520+zzj3720@users.noreply.github.com> Date: Fri, 9 May 2025 10:08:03 +0000 Subject: [PATCH] refactor(editor): replace @vanilla-extract/css with @emotion/css (#12195) close: BS-3446 ## Summary by CodeRabbit - **Refactor** - Migrated all styling from vanilla-extract to Emotion for improved CSS-in-JS consistency across database, table, and data view components. - Updated import paths for style modules to reflect the new Emotion-based file naming. - Removed unused or redundant style exports and updated selector syntax where necessary. - **Chores** - Updated dependencies: removed vanilla-extract and added Emotion in relevant package files. - **Style** - No visual changes to existing components; all style definitions remain consistent with previous designs. - **New Features** - Introduced new reusable CSS classes for data view and table components using Emotion. --- .../affine/blocks/database/package.json | 1 - ...l-renderer.css.ts => cell-renderer-css.ts} | 30 ++--- .../src/properties/link/cell-renderer.ts | 2 +- ...l-renderer.css.ts => cell-renderer-css.ts} | 6 +- .../src/properties/rich-text/cell-renderer.ts | 2 +- ...l-renderer.css.ts => cell-renderer-css.ts} | 8 +- .../database/src/properties/title/text.ts | 2 +- blocksuite/affine/blocks/table/package.json | 2 +- .../{add-button.css.ts => add-button-css.ts} | 55 +++++---- .../affine/blocks/table/src/add-button.ts | 2 +- .../blocks/table/src/table-block-css.ts | 40 +++++++ .../blocks/table/src/table-block.css.ts | 42 ------- .../affine/blocks/table/src/table-block.ts | 2 +- .../{table-cell.css.ts => table-cell-css.ts} | 81 ++++++------- .../affine/blocks/table/src/table-cell.ts | 2 +- blocksuite/affine/data-view/package.json | 2 +- .../data-view/src/core/common/dv-css.ts | 72 ++++++++++++ .../data-view/src/core/common/dv.css.ts | 85 -------------- .../core/component/tags/multi-tag-select.ts | 2 +- .../tags/{styles.css.ts => styles-css.ts} | 42 +++---- ...l-renderer.css.ts => cell-renderer-css.ts} | 8 +- .../property-presets/date/cell-renderer.ts | 2 +- ...l-renderer.css.ts => cell-renderer-css.ts} | 4 +- .../multi-select/cell-renderer.ts | 2 +- ...l-renderer.css.ts => cell-renderer-css.ts} | 6 +- .../property-presets/number/cell-renderer.ts | 2 +- ...l-renderer.css.ts => cell-renderer-css.ts} | 16 +-- .../progress/cell-renderer.ts | 2 +- ...l-renderer.css.ts => cell-renderer-css.ts} | 4 +- .../property-presets/select/cell-renderer.ts | 2 +- ...l-renderer.css.ts => cell-renderer-css.ts} | 6 +- .../property-presets/text/cell-renderer.ts | 2 +- ...roup-footer.css.ts => group-footer-css.ts} | 10 +- .../pc-virtual/group/bottom/group-footer.ts | 2 +- .../pc-virtual/group/top/group-header-css.ts | 5 + .../pc-virtual/group/top/group-header.css.ts | 5 - .../pc-virtual/group/top/group-header.ts | 2 +- ...{group-title.css.ts => group-title-css.ts} | 33 ++---- .../table/pc-virtual/group/top/group-title.ts | 2 +- ...umn-header.css.ts => column-header-css.ts} | 37 +----- .../group/top/header/column-header.ts | 2 +- .../view-presets/table/pc-virtual/row/cell.ts | 2 +- .../{row-header.css.ts => row-header-css.ts} | 18 +-- .../table/pc-virtual/row/row-header.ts | 2 +- .../table/pc-virtual/row/row-last.ts | 2 +- .../table/pc-virtual/table-view-css.ts | 60 ++++++++++ .../table/pc-virtual/table-view.css.ts | 111 ------------------ .../table/pc-virtual/table-view.ts | 4 +- .../pc-virtual/virtual/virtual-cell-css.ts | 6 + .../pc-virtual/virtual/virtual-cell.css.ts | 12 -- yarn.lock | 5 +- 51 files changed, 374 insertions(+), 482 deletions(-) rename blocksuite/affine/blocks/database/src/properties/link/{cell-renderer.css.ts => cell-renderer-css.ts} (78%) rename blocksuite/affine/blocks/database/src/properties/rich-text/{cell-renderer.css.ts => cell-renderer-css.ts} (72%) rename blocksuite/affine/blocks/database/src/properties/title/{cell-renderer.css.ts => cell-renderer-css.ts} (78%) rename blocksuite/affine/blocks/table/src/{add-button.css.ts => add-button-css.ts} (64%) create mode 100644 blocksuite/affine/blocks/table/src/table-block-css.ts delete mode 100644 blocksuite/affine/blocks/table/src/table-block.css.ts rename blocksuite/affine/blocks/table/src/{table-cell.css.ts => table-cell-css.ts} (59%) create mode 100644 blocksuite/affine/data-view/src/core/common/dv-css.ts delete mode 100644 blocksuite/affine/data-view/src/core/common/dv.css.ts rename blocksuite/affine/data-view/src/core/component/tags/{styles.css.ts => styles-css.ts} (75%) rename blocksuite/affine/data-view/src/property-presets/date/{cell-renderer.css.ts => cell-renderer-css.ts} (80%) rename blocksuite/affine/data-view/src/property-presets/multi-select/{cell-renderer.css.ts => cell-renderer-css.ts} (82%) rename blocksuite/affine/data-view/src/property-presets/number/{cell-renderer.css.ts => cell-renderer-css.ts} (87%) rename blocksuite/affine/data-view/src/property-presets/progress/{cell-renderer.css.ts => cell-renderer-css.ts} (72%) rename blocksuite/affine/data-view/src/property-presets/select/{cell-renderer.css.ts => cell-renderer-css.ts} (84%) rename blocksuite/affine/data-view/src/property-presets/text/{cell-renderer.css.ts => cell-renderer-css.ts} (88%) rename blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/bottom/{group-footer.css.ts => group-footer-css.ts} (74%) create mode 100644 blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/group-header-css.ts delete mode 100644 blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/group-header.css.ts rename blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/{group-title.css.ts => group-title-css.ts} (63%) rename blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/header/{column-header.css.ts => column-header-css.ts} (54%) rename blocksuite/affine/data-view/src/view-presets/table/pc-virtual/row/{row-header.css.ts => row-header-css.ts} (70%) create mode 100644 blocksuite/affine/data-view/src/view-presets/table/pc-virtual/table-view-css.ts delete mode 100644 blocksuite/affine/data-view/src/view-presets/table/pc-virtual/table-view.css.ts create mode 100644 blocksuite/affine/data-view/src/view-presets/table/pc-virtual/virtual/virtual-cell-css.ts delete mode 100644 blocksuite/affine/data-view/src/view-presets/table/pc-virtual/virtual/virtual-cell.css.ts diff --git a/blocksuite/affine/blocks/database/package.json b/blocksuite/affine/blocks/database/package.json index 949e32591..ebd863c0a 100644 --- a/blocksuite/affine/blocks/database/package.json +++ b/blocksuite/affine/blocks/database/package.json @@ -30,7 +30,6 @@ "@preact/signals-core": "^1.8.0", "@toeverything/theme": "^1.1.14", "@types/mdast": "^4.0.4", - "@vanilla-extract/css": "^1.17.0", "date-fns": "^4.0.0", "lit": "^3.2.0", "minimatch": "^10.0.1", diff --git a/blocksuite/affine/blocks/database/src/properties/link/cell-renderer.css.ts b/blocksuite/affine/blocks/database/src/properties/link/cell-renderer-css.ts similarity index 78% rename from blocksuite/affine/blocks/database/src/properties/link/cell-renderer.css.ts rename to blocksuite/affine/blocks/database/src/properties/link/cell-renderer-css.ts index 7b7c33eb8..ccc403e8d 100644 --- a/blocksuite/affine/blocks/database/src/properties/link/cell-renderer.css.ts +++ b/blocksuite/affine/blocks/database/src/properties/link/cell-renderer-css.ts @@ -1,15 +1,15 @@ import { cssVarV2 } from '@blocksuite/affine-shared/theme'; +import { css } from '@emotion/css'; import { baseTheme } from '@toeverything/theme'; -import { style } from '@vanilla-extract/css'; -export const linkCellStyle = style({ +export const linkCellStyle = css({ width: '100%', height: '100%', userSelect: 'none', position: 'relative', }); -export const linkContainerStyle = style({ +export const linkContainerStyle = css({ display: 'flex', position: 'relative', alignItems: 'center', @@ -21,7 +21,8 @@ export const linkContainerStyle = style({ lineHeight: 'var(--data-view-cell-text-line-height)', wordBreak: 'break-all', }); -export const linkIconContainerStyle = style({ + +export const linkIconContainerStyle = css({ position: 'absolute', right: '8px', top: '8px', @@ -34,7 +35,8 @@ export const linkIconContainerStyle = style({ overflow: 'hidden', zIndex: 1, }); -export const linkIconStyle = style({ + +export const linkIconStyle = css({ width: '100%', height: '100%', display: 'flex', @@ -48,15 +50,13 @@ export const linkIconStyle = style({ }, }); -export const showLinkIconStyle = style({ - selectors: { - [`${linkCellStyle}:hover &`]: { - visibility: 'visible', - }, +export const showLinkIconStyle = css({ + [`.${linkCellStyle}:hover &`]: { + visibility: 'visible', }, }); -export const linkedDocStyle = style({ +export const linkedDocStyle = css({ textDecoration: 'underline', textDecorationColor: 'var(--affine-divider-color)', transition: 'text-decoration-color 0.2s ease-out', @@ -66,7 +66,7 @@ export const linkedDocStyle = style({ }, }); -export const linkEditingStyle = style({ +export const linkEditingStyle = css({ display: 'flex', alignItems: 'center', width: '100%', @@ -74,7 +74,7 @@ export const linkEditingStyle = style({ border: 'none', fontFamily: baseTheme.fontSansFamily, color: 'var(--affine-text-primary-color)', - fontWeight: '400', + fontWeight: 400, backgroundColor: 'transparent', fontSize: 'var(--data-view-cell-text-size)', lineHeight: 'var(--data-view-cell-text-line-height)', @@ -84,7 +84,7 @@ export const linkEditingStyle = style({ }, }); -export const inlineLinkNodeStyle = style({ +export const inlineLinkNodeStyle = css({ wordBreak: 'break-all', color: 'var(--affine-link-color)', fill: 'var(--affine-link-color)', @@ -94,6 +94,6 @@ export const inlineLinkNodeStyle = style({ textDecoration: 'none', }); -export const normalTextStyle = style({ +export const normalTextStyle = css({ wordBreak: 'break-all', }); diff --git a/blocksuite/affine/blocks/database/src/properties/link/cell-renderer.ts b/blocksuite/affine/blocks/database/src/properties/link/cell-renderer.ts index ed793dd08..8ff76cdf5 100644 --- a/blocksuite/affine/blocks/database/src/properties/link/cell-renderer.ts +++ b/blocksuite/affine/blocks/database/src/properties/link/cell-renderer.ts @@ -26,7 +26,7 @@ import { linkIconStyle, normalTextStyle, showLinkIconStyle, -} from './cell-renderer.css.js'; +} from './cell-renderer-css.js'; import { linkPropertyModelConfig } from './define.js'; export class LinkCell extends BaseCellRenderer { diff --git a/blocksuite/affine/blocks/database/src/properties/rich-text/cell-renderer.css.ts b/blocksuite/affine/blocks/database/src/properties/rich-text/cell-renderer-css.ts similarity index 72% rename from blocksuite/affine/blocks/database/src/properties/rich-text/cell-renderer.css.ts rename to blocksuite/affine/blocks/database/src/properties/rich-text/cell-renderer-css.ts index 8e2792e41..bf5a4f91c 100644 --- a/blocksuite/affine/blocks/database/src/properties/rich-text/cell-renderer.css.ts +++ b/blocksuite/affine/blocks/database/src/properties/rich-text/cell-renderer-css.ts @@ -1,13 +1,13 @@ -import { style } from '@vanilla-extract/css'; +import { css } from '@emotion/css'; -export const richTextCellStyle = style({ +export const richTextCellStyle = css({ display: 'flex', alignItems: 'center', width: '100%', userSelect: 'none', }); -export const richTextContainerStyle = style({ +export const richTextContainerStyle = css({ display: 'flex', flexDirection: 'column', justifyContent: 'center', diff --git a/blocksuite/affine/blocks/database/src/properties/rich-text/cell-renderer.ts b/blocksuite/affine/blocks/database/src/properties/rich-text/cell-renderer.ts index 4351f386a..7b7e01c51 100644 --- a/blocksuite/affine/blocks/database/src/properties/rich-text/cell-renderer.ts +++ b/blocksuite/affine/blocks/database/src/properties/rich-text/cell-renderer.ts @@ -29,7 +29,7 @@ import type { DatabaseBlockComponent } from '../../database-block.js'; import { richTextCellStyle, richTextContainerStyle, -} from './cell-renderer.css.js'; +} from './cell-renderer-css.js'; import { richTextPropertyModelConfig } from './define.js'; function toggleStyle( diff --git a/blocksuite/affine/blocks/database/src/properties/title/cell-renderer.css.ts b/blocksuite/affine/blocks/database/src/properties/title/cell-renderer-css.ts similarity index 78% rename from blocksuite/affine/blocks/database/src/properties/title/cell-renderer.css.ts rename to blocksuite/affine/blocks/database/src/properties/title/cell-renderer-css.ts index edfe5c048..685262ae9 100644 --- a/blocksuite/affine/blocks/database/src/properties/title/cell-renderer.css.ts +++ b/blocksuite/affine/blocks/database/src/properties/title/cell-renderer-css.ts @@ -1,12 +1,12 @@ import { cssVarV2 } from '@blocksuite/affine-shared/theme'; -import { style } from '@vanilla-extract/css'; +import { css } from '@emotion/css'; -export const titleCellStyle = style({ +export const titleCellStyle = css({ width: '100%', display: 'flex', }); -export const titleRichTextStyle = style({ +export const titleRichTextStyle = css({ display: 'flex', flexDirection: 'column', justifyContent: 'center', @@ -18,7 +18,7 @@ export const titleRichTextStyle = style({ lineHeight: 'var(--data-view-cell-text-line-height)', }); -export const headerAreaIconStyle = style({ +export const headerAreaIconStyle = css({ height: 'max-content', display: 'flex', alignItems: 'center', diff --git a/blocksuite/affine/blocks/database/src/properties/title/text.ts b/blocksuite/affine/blocks/database/src/properties/title/text.ts index edea276e5..fbad7f071 100644 --- a/blocksuite/affine/blocks/database/src/properties/title/text.ts +++ b/blocksuite/affine/blocks/database/src/properties/title/text.ts @@ -24,7 +24,7 @@ import { headerAreaIconStyle, titleCellStyle, titleRichTextStyle, -} from './cell-renderer.css.js'; +} from './cell-renderer-css.js'; export class HeaderAreaTextCell extends BaseCellRenderer { activity = true; diff --git a/blocksuite/affine/blocks/table/package.json b/blocksuite/affine/blocks/table/package.json index 7d611142b..7a1d3b552 100644 --- a/blocksuite/affine/blocks/table/package.json +++ b/blocksuite/affine/blocks/table/package.json @@ -23,9 +23,9 @@ "@blocksuite/icons": "^2.2.12", "@blocksuite/std": "workspace:*", "@blocksuite/store": "workspace:*", + "@emotion/css": "^11.13.5", "@floating-ui/dom": "^1.6.13", "@preact/signals-core": "^1.8.0", - "@vanilla-extract/css": "^1.17.0", "lit": "^3.2.0", "rxjs": "^7.8.1", "yjs": "^13.6.21", diff --git a/blocksuite/affine/blocks/table/src/add-button.css.ts b/blocksuite/affine/blocks/table/src/add-button-css.ts similarity index 64% rename from blocksuite/affine/blocks/table/src/add-button.css.ts rename to blocksuite/affine/blocks/table/src/add-button-css.ts index ebbc88fbb..4c8a06c1f 100644 --- a/blocksuite/affine/blocks/table/src/add-button.css.ts +++ b/blocksuite/affine/blocks/table/src/add-button-css.ts @@ -1,7 +1,7 @@ import { cssVar, cssVarV2 } from '@blocksuite/affine-shared/theme'; -import { style } from '@vanilla-extract/css'; +import { css } from '@emotion/css'; -export const addColumnButtonStyle = style({ +export const addColumnButtonStyle = css({ cursor: 'col-resize', backgroundColor: cssVarV2.layer.background.hoverOverlay, fontSize: '16px', @@ -18,16 +18,19 @@ export const addColumnButtonStyle = style({ 'opacity 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out', borderRadius: '2px', opacity: 0, - selectors: { - '&:hover, &.active': { - backgroundColor: cssVarV2.table.indicator.drag, - color: cssVarV2.icon.primary, - opacity: 1, - }, + ':hover': { + backgroundColor: cssVarV2.table.indicator.drag, + color: cssVarV2.icon.primary, + opacity: 1, + }, + '&.active': { + backgroundColor: cssVarV2.table.indicator.drag, + color: cssVarV2.icon.primary, + opacity: 1, }, }); -export const addRowButtonStyle = style({ +export const addRowButtonStyle = css({ cursor: 'row-resize', backgroundColor: cssVarV2.layer.background.hoverOverlay, fontSize: '16px', @@ -44,16 +47,19 @@ export const addRowButtonStyle = style({ 'opacity 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out', borderRadius: '2px', opacity: 0, - selectors: { - '&:hover, &.active': { - backgroundColor: cssVarV2.table.indicator.drag, - color: cssVarV2.icon.primary, - opacity: 1, - }, + ':hover': { + backgroundColor: cssVarV2.table.indicator.drag, + color: cssVarV2.icon.primary, + opacity: 1, + }, + '&.active': { + backgroundColor: cssVarV2.table.indicator.drag, + color: cssVarV2.icon.primary, + opacity: 1, }, }); -export const addRowColumnButtonStyle = style({ +export const addRowColumnButtonStyle = css({ cursor: 'nwse-resize', backgroundColor: cssVarV2.layer.background.hoverOverlay, fontSize: '16px', @@ -70,16 +76,19 @@ export const addRowColumnButtonStyle = style({ opacity: 0, transition: 'opacity 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out', - selectors: { - '&:hover, &.active': { - backgroundColor: cssVarV2.table.indicator.drag, - color: cssVarV2.icon.primary, - opacity: 1, - }, + ':hover': { + backgroundColor: cssVarV2.table.indicator.drag, + color: cssVarV2.icon.primary, + opacity: 1, + }, + '&.active': { + backgroundColor: cssVarV2.table.indicator.drag, + color: cssVarV2.icon.primary, + opacity: 1, }, }); -export const cellCountTipsStyle = style({ +export const cellCountTipsStyle = css({ position: 'absolute', backgroundColor: cssVarV2.tooltips.background, borderRadius: '4px', diff --git a/blocksuite/affine/blocks/table/src/add-button.ts b/blocksuite/affine/blocks/table/src/add-button.ts index 1263c97f9..ebd51f828 100644 --- a/blocksuite/affine/blocks/table/src/add-button.ts +++ b/blocksuite/affine/blocks/table/src/add-button.ts @@ -20,7 +20,7 @@ import { addRowButtonStyle, addRowColumnButtonStyle, cellCountTipsStyle, -} from './add-button.css'; +} from './add-button-css'; import { DefaultColumnWidth, DefaultRowHeight } from './consts'; import type { TableDataManager } from './table-data-manager'; diff --git a/blocksuite/affine/blocks/table/src/table-block-css.ts b/blocksuite/affine/blocks/table/src/table-block-css.ts new file mode 100644 index 000000000..7e39f270b --- /dev/null +++ b/blocksuite/affine/blocks/table/src/table-block-css.ts @@ -0,0 +1,40 @@ +import { css } from '@emotion/css'; + +export const tableContainer = css({ + display: 'block', + padding: '10px 0 18px 10px', + overflowX: 'auto', + overflowY: 'visible', + '::-webkit-scrollbar': { + height: '8px', + }, + '::-webkit-scrollbar-thumb:horizontal': { + borderRadius: '4px', + backgroundColor: 'transparent', + }, + '::-webkit-scrollbar-track:horizontal': { + backgroundColor: 'transparent', + height: '8px', + }, + '&:hover::-webkit-scrollbar-thumb:horizontal': { + borderRadius: '4px', + backgroundColor: 'var(--affine-black-30)', + }, + '&:hover::-webkit-scrollbar-track:horizontal': { + backgroundColor: 'var(--affine-hover-color)', + height: '8px', + }, +}); + +export const tableWrapper = css({ + overflow: 'visible', + display: 'flex', + flexDirection: 'row', + gap: '8px', + position: 'relative', + width: 'max-content', +}); + +export const table = css({}); + +export const rowStyle = css({}); diff --git a/blocksuite/affine/blocks/table/src/table-block.css.ts b/blocksuite/affine/blocks/table/src/table-block.css.ts deleted file mode 100644 index d6f176a70..000000000 --- a/blocksuite/affine/blocks/table/src/table-block.css.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { style } from '@vanilla-extract/css'; - -export const tableContainer = style({ - display: 'block', - padding: '10px 0 18px 10px', - overflowX: 'auto', - overflowY: 'visible', - selectors: { - '&::-webkit-scrollbar': { - height: '8px', - }, - '&::-webkit-scrollbar-thumb:horizontal': { - borderRadius: '4px', - backgroundColor: 'transparent', - }, - '&::-webkit-scrollbar-track:horizontal': { - backgroundColor: 'transparent', - height: '8px', - }, - '&:hover::-webkit-scrollbar-thumb:horizontal': { - borderRadius: '4px', - backgroundColor: 'var(--affine-black-30)', - }, - '&:hover::-webkit-scrollbar-track:horizontal': { - backgroundColor: 'var(--affine-hover-color)', - height: '8px', - }, - }, -}); - -export const tableWrapper = style({ - overflow: 'visible', - display: 'flex', - flexDirection: 'row', - gap: '8px', - position: 'relative', - width: 'max-content', -}); - -export const table = style({}); - -export const rowStyle = style({}); diff --git a/blocksuite/affine/blocks/table/src/table-block.ts b/blocksuite/affine/blocks/table/src/table-block.ts index ce0f07118..8c5b424e5 100644 --- a/blocksuite/affine/blocks/table/src/table-block.ts +++ b/blocksuite/affine/blocks/table/src/table-block.ts @@ -18,7 +18,7 @@ import { table, tableContainer, tableWrapper, -} from './table-block.css'; +} from './table-block-css'; import { TableDataManager } from './table-data-manager'; export const TableBlockComponentName = 'affine-table'; diff --git a/blocksuite/affine/blocks/table/src/table-cell.css.ts b/blocksuite/affine/blocks/table/src/table-cell-css.ts similarity index 59% rename from blocksuite/affine/blocks/table/src/table-cell.css.ts rename to blocksuite/affine/blocks/table/src/table-cell-css.ts index 53e3e4823..56811c0e8 100644 --- a/blocksuite/affine/blocks/table/src/table-cell.css.ts +++ b/blocksuite/affine/blocks/table/src/table-cell-css.ts @@ -1,7 +1,7 @@ import { cssVar, cssVarV2 } from '@blocksuite/affine-shared/theme'; -import { createVar, style } from '@vanilla-extract/css'; +import { css } from '@emotion/css'; -export const cellContainerStyle = style({ +export const cellContainerStyle = css({ position: 'relative', alignItems: 'center', border: '1px solid', @@ -12,7 +12,7 @@ export const cellContainerStyle = style({ verticalAlign: 'top', }); -export const columnOptionsCellStyle = style({ +export const columnOptionsCellStyle = css({ position: 'absolute', height: '0', top: '0', @@ -23,8 +23,7 @@ export const columnOptionsCellStyle = style({ justifyContent: 'center', }); -const threePointerIconColorVar = createVar(); -export const columnOptionsStyle = style({ +export const columnOptionsStyle = css({ cursor: 'pointer', zIndex: 2, width: '28px', @@ -37,24 +36,18 @@ export const columnOptionsStyle = style({ display: 'flex', alignItems: 'center', justifyContent: 'center', - vars: { - [threePointerIconColorVar]: cssVarV2.icon.secondary, + '--three-pointer-icon-color': cssVarV2.icon.secondary, + ':hover': { + opacity: 1, }, - selectors: { - '&:hover': { - opacity: 1, - }, - '&.active': { - opacity: 1, - backgroundColor: cssVarV2.table.indicator.activated, - vars: { - [threePointerIconColorVar]: cssVarV2.table.indicator.pointerActive, - }, - }, + '&.active': { + opacity: 1, + backgroundColor: cssVarV2.table.indicator.activated, + '--three-pointer-icon-color': cssVarV2.table.indicator.pointerActive, }, }); -export const rowOptionsCellStyle = style({ +export const rowOptionsCellStyle = css({ position: 'absolute', top: '0', left: '0', @@ -65,7 +58,8 @@ export const rowOptionsCellStyle = style({ alignItems: 'center', justifyContent: 'center', }); -export const rowOptionsStyle = style({ + +export const rowOptionsStyle = css({ cursor: 'pointer', zIndex: 2, width: '16px', @@ -78,44 +72,40 @@ export const rowOptionsStyle = style({ display: 'flex', alignItems: 'center', justifyContent: 'center', - vars: { - [threePointerIconColorVar]: cssVarV2.icon.secondary, + '--three-pointer-icon-color': cssVarV2.icon.secondary, + ':hover': { + opacity: 1, }, - selectors: { - '&:hover': { - opacity: 1, - }, - '&.active': { - opacity: 1, - backgroundColor: cssVarV2.table.indicator.activated, - vars: { - [threePointerIconColorVar]: cssVarV2.table.indicator.pointerActive, - }, - }, + '&.active': { + opacity: 1, + backgroundColor: cssVarV2.table.indicator.activated, + '--three-pointer-icon-color': cssVarV2.table.indicator.pointerActive, }, }); -export const threePointerIconStyle = style({ +export const threePointerIconStyle = css({ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '2px', }); -export const threePointerIconDotStyle = style({ +export const threePointerIconDotStyle = css({ width: '3px', height: '3px', - backgroundColor: threePointerIconColorVar, + backgroundColor: 'var(--three-pointer-icon-color)', borderRadius: '50%', }); -export const indicatorStyle = style({ + +export const indicatorStyle = css({ position: 'absolute', backgroundColor: cssVarV2.table.indicator.activated, zIndex: 2, transition: 'opacity 0.2s ease-in-out', pointerEvents: 'none', }); -export const columnIndicatorStyle = style([ + +export const columnIndicatorStyle = css([ indicatorStyle, { top: '-1px', @@ -123,7 +113,8 @@ export const columnIndicatorStyle = style([ width: '5px', }, ]); -export const columnRightIndicatorStyle = style([ + +export const columnRightIndicatorStyle = css([ columnIndicatorStyle, { cursor: 'ew-resize', @@ -131,13 +122,15 @@ export const columnRightIndicatorStyle = style([ pointerEvents: 'auto', }, ]); -export const columnLeftIndicatorStyle = style([ + +export const columnLeftIndicatorStyle = css([ columnIndicatorStyle, { left: '-2px', }, ]); -export const rowIndicatorStyle = style([ + +export const rowIndicatorStyle = css([ indicatorStyle, { left: '-1px', @@ -145,13 +138,15 @@ export const rowIndicatorStyle = style([ height: '5px', }, ]); -export const rowBottomIndicatorStyle = style([ + +export const rowBottomIndicatorStyle = css([ rowIndicatorStyle, { bottom: '-3px', }, ]); -export const rowTopIndicatorStyle = style([ + +export const rowTopIndicatorStyle = css([ rowIndicatorStyle, { top: '-2px', diff --git a/blocksuite/affine/blocks/table/src/table-cell.ts b/blocksuite/affine/blocks/table/src/table-cell.ts index 2a6b0f5a2..06d7c4947 100644 --- a/blocksuite/affine/blocks/table/src/table-cell.ts +++ b/blocksuite/affine/blocks/table/src/table-cell.ts @@ -57,7 +57,7 @@ import { rowTopIndicatorStyle, threePointerIconDotStyle, threePointerIconStyle, -} from './table-cell.css'; +} from './table-cell-css'; import type { TableDataManager } from './table-data-manager'; export const TableCellComponentName = 'affine-table-cell'; export class TableCell extends SignalWatcher( diff --git a/blocksuite/affine/data-view/package.json b/blocksuite/affine/data-view/package.json index 9965cdaee..710393fb9 100644 --- a/blocksuite/affine/data-view/package.json +++ b/blocksuite/affine/data-view/package.json @@ -16,13 +16,13 @@ "@blocksuite/icons": "^2.2.12", "@blocksuite/std": "workspace:*", "@blocksuite/store": "workspace:*", + "@emotion/css": "^11.13.5", "@emotion/hash": "^0.9.2", "@floating-ui/dom": "^1.6.13", "@lit/context": "^1.1.2", "@preact/signals-core": "^1.8.0", "@toeverything/theme": "^1.1.14", "@types/lodash-es": "^4.17.12", - "@vanilla-extract/css": "^1.17.0", "clsx": "^2.1.1", "date-fns": "^4.0.0", "lit": "^3.2.0", diff --git a/blocksuite/affine/data-view/src/core/common/dv-css.ts b/blocksuite/affine/data-view/src/core/common/dv-css.ts new file mode 100644 index 000000000..241a8a4d8 --- /dev/null +++ b/blocksuite/affine/data-view/src/core/common/dv-css.ts @@ -0,0 +1,72 @@ +import { css } from '@emotion/css'; +import { cssVarV2 } from '@toeverything/theme/v2'; + +export const dataViewVars = { + cellTextSize: '--affine-data-view-cell-text-size', + cellTextLineHeight: '--affine-data-view-cell-text-line-height', +}; + +export const dataViewRoot = css({ + fontFamily: 'var(--affine-font-family)', + [dataViewVars.cellTextSize]: '14px', + [dataViewVars.cellTextLineHeight]: '22px', +}); + +export const withDataViewCssVariable = css({ + fontFamily: 'var(--affine-font-family)', + [dataViewVars.cellTextSize]: '14px', + [dataViewVars.cellTextLineHeight]: '22px', +}); + +export const p2 = css({ + padding: '2px', +}); +export const p4 = css({ + padding: '4px', +}); +export const p8 = css({ + padding: '8px', +}); + +export const hover = css({ + '&:hover, &.active': { + backgroundColor: 'var(--affine-hover-color)', + cursor: 'pointer', + }, +}); + +export const icon16 = css({ + fontSize: '16px', + color: cssVarV2.icon.primary, +}); +export const icon20 = css({ + fontSize: '20px', + color: cssVarV2.icon.primary, +}); + +export const border = css({ + border: `1px solid ${cssVarV2.layer.insideBorder.border}`, +}); +export const round4 = css({ + borderRadius: '4px', +}); +export const round8 = css({ + borderRadius: '8px', +}); +export const color2 = css({ + color: 'var(--affine-text-secondary-color)', +}); +export const shadow2 = css({ + boxShadow: 'var(--affine-shadow-2)', +}); + +export const dividerH = css({ + height: '1px', + backgroundColor: 'var(--affine-divider-color)', + margin: '8px 0', +}); +export const dividerV = css({ + width: '1px', + backgroundColor: 'var(--affine-divider-color)', + margin: '0 8px', +}); diff --git a/blocksuite/affine/data-view/src/core/common/dv.css.ts b/blocksuite/affine/data-view/src/core/common/dv.css.ts deleted file mode 100644 index 64053d2ed..000000000 --- a/blocksuite/affine/data-view/src/core/common/dv.css.ts +++ /dev/null @@ -1,85 +0,0 @@ -import { cssVarV2 } from '@toeverything/theme/v2'; -import { createVar, style } from '@vanilla-extract/css'; - -export const dataViewVars = { - cellTextSize: createVar(), - cellTextLineHeight: createVar(), -}; - -export const dataViewRoot = style({ - vars: { - [dataViewVars.cellTextSize]: '14px', - [dataViewVars.cellTextLineHeight]: '22px', - }, -}); - -export const withDataViewCssVariable = style({ - vars: { - [dataViewVars.cellTextSize]: '14px', - [dataViewVars.cellTextLineHeight]: '22px', - }, - fontFamily: 'var(--affine-font-family)', -}); - -export const p2 = style({ - padding: '2px', -}); - -export const p4 = style({ - padding: '4px', -}); - -export const p8 = style({ - padding: '8px', -}); - -export const hover = style({ - selectors: { - '&:hover, &.active': { - backgroundColor: 'var(--affine-hover-color)', - cursor: 'pointer', - }, - }, -}); - -export const icon16 = style({ - fontSize: '16px', - color: cssVarV2.icon.primary, -}); - -export const icon20 = style({ - fontSize: '20px', - color: cssVarV2.icon.primary, -}); - -export const border = style({ - border: `1px solid ${cssVarV2.layer.insideBorder.border}`, -}); - -export const round4 = style({ - borderRadius: '4px', -}); - -export const round8 = style({ - borderRadius: '8px', -}); - -export const color2 = style({ - color: 'var(--affine-text-secondary-color)', -}); - -export const shadow2 = style({ - boxShadow: 'var(--affine-shadow-2)', -}); - -export const dividerH = style({ - height: '1px', - backgroundColor: 'var(--affine-divider-color)', - margin: '8px 0', -}); - -export const dividerV = style({ - width: '1px', - backgroundColor: 'var(--affine-divider-color)', - margin: '0 8px', -}); diff --git a/blocksuite/affine/data-view/src/core/component/tags/multi-tag-select.ts b/blocksuite/affine/data-view/src/core/component/tags/multi-tag-select.ts index e5779c884..0b30903b7 100644 --- a/blocksuite/affine/data-view/src/core/component/tags/multi-tag-select.ts +++ b/blocksuite/affine/data-view/src/core/component/tags/multi-tag-select.ts @@ -53,7 +53,7 @@ import { tagSelectInputContainerStyle, tagSelectInputStyle, tagTextStyle, -} from './styles.css.js'; +} from './styles-css.js'; type RenderOption = { value: string; diff --git a/blocksuite/affine/data-view/src/core/component/tags/styles.css.ts b/blocksuite/affine/data-view/src/core/component/tags/styles-css.ts similarity index 75% rename from blocksuite/affine/data-view/src/core/component/tags/styles.css.ts rename to blocksuite/affine/data-view/src/core/component/tags/styles-css.ts index 5d01e4844..3ef48ea73 100644 --- a/blocksuite/affine/data-view/src/core/component/tags/styles.css.ts +++ b/blocksuite/affine/data-view/src/core/component/tags/styles-css.ts @@ -1,8 +1,8 @@ +import { css } from '@emotion/css'; import { baseTheme } from '@toeverything/theme'; import { cssVarV2 } from '@toeverything/theme/v2'; -import { style } from '@vanilla-extract/css'; -export const tagSelectContainerStyle = style({ +export const tagSelectContainerStyle = css({ position: 'absolute', zIndex: 2, color: cssVarV2('text/primary'), @@ -16,14 +16,12 @@ export const tagSelectContainerStyle = style({ display: 'flex', flexDirection: 'column', gap: '4px', - '@media': { - print: { - display: 'none', - }, + '@media print': { + display: 'none', }, }); -export const tagSelectInputContainerStyle = style({ +export const tagSelectInputContainerStyle = css({ display: 'flex', alignItems: 'center', flexWrap: 'wrap', @@ -31,7 +29,7 @@ export const tagSelectInputContainerStyle = style({ padding: '4px', }); -export const tagSelectInputStyle = style({ +export const tagSelectInputStyle = css({ flex: '1 1 0', border: 'none', fontFamily: baseTheme.fontSansFamily, @@ -45,7 +43,7 @@ export const tagSelectInputStyle = style({ }, }); -export const selectOptionsTipsStyle = style({ +export const selectOptionsTipsStyle = css({ padding: '4px', color: cssVarV2('text/secondary'), fontSize: '14px', @@ -54,7 +52,7 @@ export const selectOptionsTipsStyle = style({ userSelect: 'none', }); -export const selectOptionsContainerStyle = style({ +export const selectOptionsContainerStyle = css({ maxHeight: '400px', overflowY: 'auto', userSelect: 'none', @@ -63,7 +61,7 @@ export const selectOptionsContainerStyle = style({ gap: '4px', }); -export const selectOptionStyle = style({ +export const selectOptionStyle = css({ display: 'flex', justifyContent: 'space-between', alignItems: 'center', @@ -72,11 +70,11 @@ export const selectOptionStyle = style({ cursor: 'pointer', }); -export const selectedStyle = style({ +export const selectedStyle = css({ background: cssVarV2('layer/background/hoverOverlay'), }); -export const tagContainerStyle = style({ +export const tagContainerStyle = css({ display: 'flex', alignItems: 'center', padding: '0 8px', @@ -89,26 +87,26 @@ export const tagContainerStyle = style({ userSelect: 'none', }); -export const tagTextStyle = style({ +export const tagTextStyle = css({ fontSize: '14px', lineHeight: '22px', overflow: 'hidden', textOverflow: 'ellipsis', }); -export const tagDeleteIconStyle = style({ +export const tagDeleteIconStyle = css({ display: 'flex', alignItems: 'center', color: cssVarV2('chip/label/text'), }); -export const selectOptionContentStyle = style({ +export const selectOptionContentStyle = css({ display: 'flex', alignItems: 'center', overflow: 'hidden', }); -export const selectOptionIconStyle = style({ +export const selectOptionIconStyle = css({ display: 'flex', justifyContent: 'center', alignItems: 'center', @@ -121,14 +119,12 @@ export const selectOptionIconStyle = style({ ':hover': { background: cssVarV2('layer/background/hoverOverlay'), }, - selectors: { - [`${selectedStyle} &`]: { - visibility: 'visible', - }, + [`.${selectedStyle} &`]: { + visibility: 'visible', }, }); -export const selectOptionDragHandlerStyle = style({ +export const selectOptionDragHandlerStyle = css({ width: '4px', height: '12px', borderRadius: '1px', @@ -138,7 +134,7 @@ export const selectOptionDragHandlerStyle = style({ flexShrink: 0, }); -export const selectOptionNewIconStyle = style({ +export const selectOptionNewIconStyle = css({ fontSize: '14px', lineHeight: '22px', color: cssVarV2('text/primary'), diff --git a/blocksuite/affine/data-view/src/property-presets/date/cell-renderer.css.ts b/blocksuite/affine/data-view/src/property-presets/date/cell-renderer-css.ts similarity index 80% rename from blocksuite/affine/data-view/src/property-presets/date/cell-renderer.css.ts rename to blocksuite/affine/data-view/src/property-presets/date/cell-renderer-css.ts index b4ae5af0e..82573604b 100644 --- a/blocksuite/affine/data-view/src/property-presets/date/cell-renderer.css.ts +++ b/blocksuite/affine/data-view/src/property-presets/date/cell-renderer-css.ts @@ -1,7 +1,7 @@ +import { css } from '@emotion/css'; import { baseTheme } from '@toeverything/theme'; -import { style } from '@vanilla-extract/css'; -export const dateCellStyle = style({ +export const dateCellStyle = css({ display: 'flex', alignItems: 'center', width: '100%', @@ -16,7 +16,7 @@ export const dateCellStyle = style({ height: 'var(--data-view-cell-text-line-height)', }); -export const dateValueContainerStyle = style({ +export const dateValueContainerStyle = css({ padding: '12px', backgroundColor: 'var(--layer-background-primary)', borderRadius: '12px', @@ -26,7 +26,7 @@ export const dateValueContainerStyle = style({ height: '46px', }); -export const datePickerContainerStyle = style({ +export const datePickerContainerStyle = css({ padding: '12px', backgroundColor: 'var(--layer-background-primary)', borderRadius: '12px', diff --git a/blocksuite/affine/data-view/src/property-presets/date/cell-renderer.ts b/blocksuite/affine/data-view/src/property-presets/date/cell-renderer.ts index 53ddb668c..79d349330 100644 --- a/blocksuite/affine/data-view/src/property-presets/date/cell-renderer.ts +++ b/blocksuite/affine/data-view/src/property-presets/date/cell-renderer.ts @@ -17,7 +17,7 @@ import { dateCellStyle, datePickerContainerStyle, dateValueContainerStyle, -} from './cell-renderer.css.js'; +} from './cell-renderer-css.js'; import { datePropertyModelConfig } from './define.js'; export class DateCell extends BaseCellRenderer { diff --git a/blocksuite/affine/data-view/src/property-presets/multi-select/cell-renderer.css.ts b/blocksuite/affine/data-view/src/property-presets/multi-select/cell-renderer-css.ts similarity index 82% rename from blocksuite/affine/data-view/src/property-presets/multi-select/cell-renderer.css.ts rename to blocksuite/affine/data-view/src/property-presets/multi-select/cell-renderer-css.ts index a4286fd49..8fcf36b2b 100644 --- a/blocksuite/affine/data-view/src/property-presets/multi-select/cell-renderer.css.ts +++ b/blocksuite/affine/data-view/src/property-presets/multi-select/cell-renderer-css.ts @@ -1,7 +1,7 @@ +import { css } from '@emotion/css'; import { baseTheme } from '@toeverything/theme'; -import { style } from '@vanilla-extract/css'; -export const multiSelectStyle = style({ +export const multiSelectStyle = css({ display: 'flex', alignItems: 'center', width: '100%', diff --git a/blocksuite/affine/data-view/src/property-presets/multi-select/cell-renderer.ts b/blocksuite/affine/data-view/src/property-presets/multi-select/cell-renderer.ts index d9d6a0b14..c424cf65d 100644 --- a/blocksuite/affine/data-view/src/property-presets/multi-select/cell-renderer.ts +++ b/blocksuite/affine/data-view/src/property-presets/multi-select/cell-renderer.ts @@ -9,7 +9,7 @@ import { createFromBaseCellRenderer } from '../../core/property/renderer.js'; import { stopPropagation } from '../../core/utils/event.js'; import { createIcon } from '../../core/utils/uni-icon.js'; import type { SelectPropertyData } from '../select/define.js'; -import { multiSelectStyle } from './cell-renderer.css.js'; +import { multiSelectStyle } from './cell-renderer-css.js'; import { multiSelectPropertyModelConfig } from './define.js'; export class MultiSelectCell extends BaseCellRenderer< diff --git a/blocksuite/affine/data-view/src/property-presets/number/cell-renderer.css.ts b/blocksuite/affine/data-view/src/property-presets/number/cell-renderer-css.ts similarity index 87% rename from blocksuite/affine/data-view/src/property-presets/number/cell-renderer.css.ts rename to blocksuite/affine/data-view/src/property-presets/number/cell-renderer-css.ts index a387df76e..edc461a8e 100644 --- a/blocksuite/affine/data-view/src/property-presets/number/cell-renderer.css.ts +++ b/blocksuite/affine/data-view/src/property-presets/number/cell-renderer-css.ts @@ -1,7 +1,7 @@ +import { css } from '@emotion/css'; import { baseTheme } from '@toeverything/theme'; -import { style } from '@vanilla-extract/css'; -export const numberStyle = style({ +export const numberStyle = css({ overflow: 'hidden', display: 'flex', alignItems: 'center', @@ -18,7 +18,7 @@ export const numberStyle = style({ wordBreak: 'break-all', }); -export const numberInputStyle = style({ +export const numberInputStyle = css({ display: 'flex', alignItems: 'center', width: '100%', diff --git a/blocksuite/affine/data-view/src/property-presets/number/cell-renderer.ts b/blocksuite/affine/data-view/src/property-presets/number/cell-renderer.ts index 4c844313c..6c7a4d879 100644 --- a/blocksuite/affine/data-view/src/property-presets/number/cell-renderer.ts +++ b/blocksuite/affine/data-view/src/property-presets/number/cell-renderer.ts @@ -6,7 +6,7 @@ import { BaseCellRenderer } from '../../core/property/index.js'; import { createFromBaseCellRenderer } from '../../core/property/renderer.js'; import { stopPropagation } from '../../core/utils/event.js'; import { createIcon } from '../../core/utils/uni-icon.js'; -import { numberInputStyle, numberStyle } from './cell-renderer.css.js'; +import { numberInputStyle, numberStyle } from './cell-renderer-css.js'; import { numberPropertyModelConfig } from './define.js'; import type { NumberPropertyDataType } from './types.js'; import { diff --git a/blocksuite/affine/data-view/src/property-presets/progress/cell-renderer.css.ts b/blocksuite/affine/data-view/src/property-presets/progress/cell-renderer-css.ts similarity index 72% rename from blocksuite/affine/data-view/src/property-presets/progress/cell-renderer.css.ts rename to blocksuite/affine/data-view/src/property-presets/progress/cell-renderer-css.ts index 4a1ca5f07..6d3b526d9 100644 --- a/blocksuite/affine/data-view/src/property-presets/progress/cell-renderer.css.ts +++ b/blocksuite/affine/data-view/src/property-presets/progress/cell-renderer-css.ts @@ -1,37 +1,37 @@ +import { css } from '@emotion/css'; import { baseTheme } from '@toeverything/theme'; -import { style } from '@vanilla-extract/css'; -export const progressCellStyle = style({ +export const progressCellStyle = css({ display: 'block', width: '100%', padding: '0 4px', userSelect: 'none', }); -export const progressContainerStyle = style({ +export const progressContainerStyle = css({ display: 'flex', alignItems: 'center', height: 'var(--data-view-cell-text-line-height)', gap: '4px', }); -export const progressBarStyle = style({ +export const progressBarStyle = css({ position: 'relative', width: '100%', }); -export const progressBgStyle = style({ +export const progressBgStyle = css({ overflow: 'hidden', width: '100%', height: '10px', borderRadius: '22px', }); -export const progressFgStyle = style({ +export const progressFgStyle = css({ height: '100%', }); -export const progressDragHandleStyle = style({ +export const progressDragHandleStyle = css({ position: 'absolute', top: '0', left: '0', @@ -45,7 +45,7 @@ export const progressDragHandleStyle = style({ transition: 'opacity 0.2s ease-in-out', }); -export const progressNumberStyle = style({ +export const progressNumberStyle = css({ display: 'flex', justifyContent: 'center', alignItems: 'center', diff --git a/blocksuite/affine/data-view/src/property-presets/progress/cell-renderer.ts b/blocksuite/affine/data-view/src/property-presets/progress/cell-renderer.ts index c514c42d6..e54d8f1ba 100644 --- a/blocksuite/affine/data-view/src/property-presets/progress/cell-renderer.ts +++ b/blocksuite/affine/data-view/src/property-presets/progress/cell-renderer.ts @@ -14,7 +14,7 @@ import { progressDragHandleStyle, progressFgStyle, progressNumberStyle, -} from './cell-renderer.css.js'; +} from './cell-renderer-css.js'; import { progressPropertyModelConfig } from './define.js'; const progressColors = { diff --git a/blocksuite/affine/data-view/src/property-presets/select/cell-renderer.css.ts b/blocksuite/affine/data-view/src/property-presets/select/cell-renderer-css.ts similarity index 84% rename from blocksuite/affine/data-view/src/property-presets/select/cell-renderer.css.ts rename to blocksuite/affine/data-view/src/property-presets/select/cell-renderer-css.ts index ea8dfe25d..95e99b34f 100644 --- a/blocksuite/affine/data-view/src/property-presets/select/cell-renderer.css.ts +++ b/blocksuite/affine/data-view/src/property-presets/select/cell-renderer-css.ts @@ -1,7 +1,7 @@ +import { css } from '@emotion/css'; import { baseTheme } from '@toeverything/theme'; -import { style } from '@vanilla-extract/css'; -export const selectStyle = style({ +export const selectStyle = css({ overflow: 'hidden', display: 'flex', alignItems: 'center', diff --git a/blocksuite/affine/data-view/src/property-presets/select/cell-renderer.ts b/blocksuite/affine/data-view/src/property-presets/select/cell-renderer.ts index 4ce1923d7..617c57525 100644 --- a/blocksuite/affine/data-view/src/property-presets/select/cell-renderer.ts +++ b/blocksuite/affine/data-view/src/property-presets/select/cell-renderer.ts @@ -7,7 +7,7 @@ import type { SelectTag } from '../../core/index.js'; import { BaseCellRenderer } from '../../core/property/index.js'; import { createFromBaseCellRenderer } from '../../core/property/renderer.js'; import { createIcon } from '../../core/utils/uni-icon.js'; -import { selectStyle } from './cell-renderer.css.js'; +import { selectStyle } from './cell-renderer-css.js'; import { type SelectPropertyData, selectPropertyModelConfig, diff --git a/blocksuite/affine/data-view/src/property-presets/text/cell-renderer.css.ts b/blocksuite/affine/data-view/src/property-presets/text/cell-renderer-css.ts similarity index 88% rename from blocksuite/affine/data-view/src/property-presets/text/cell-renderer.css.ts rename to blocksuite/affine/data-view/src/property-presets/text/cell-renderer-css.ts index 60b828f12..afa9bc0b2 100644 --- a/blocksuite/affine/data-view/src/property-presets/text/cell-renderer.css.ts +++ b/blocksuite/affine/data-view/src/property-presets/text/cell-renderer-css.ts @@ -1,7 +1,7 @@ +import { css } from '@emotion/css'; import { baseTheme } from '@toeverything/theme'; -import { style } from '@vanilla-extract/css'; -export const textStyle = style({ +export const textStyle = css({ display: 'flex', alignItems: 'center', height: '100%', @@ -19,7 +19,7 @@ export const textStyle = style({ whiteSpace: 'nowrap', }); -export const textInputStyle = style({ +export const textInputStyle = css({ display: 'flex', alignItems: 'center', height: '100%', diff --git a/blocksuite/affine/data-view/src/property-presets/text/cell-renderer.ts b/blocksuite/affine/data-view/src/property-presets/text/cell-renderer.ts index 77a77f5ea..a0b87ddea 100644 --- a/blocksuite/affine/data-view/src/property-presets/text/cell-renderer.ts +++ b/blocksuite/affine/data-view/src/property-presets/text/cell-renderer.ts @@ -4,7 +4,7 @@ import { query } from 'lit/decorators.js'; import { BaseCellRenderer } from '../../core/property/index.js'; import { createFromBaseCellRenderer } from '../../core/property/renderer.js'; import { createIcon } from '../../core/utils/uni-icon.js'; -import { textInputStyle, textStyle } from './cell-renderer.css.js'; +import { textInputStyle, textStyle } from './cell-renderer-css.js'; import { textPropertyModelConfig } from './define.js'; export class TextCell extends BaseCellRenderer { diff --git a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/bottom/group-footer.css.ts b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/bottom/group-footer-css.ts similarity index 74% rename from blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/bottom/group-footer.css.ts rename to blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/bottom/group-footer-css.ts index c47e9a39b..02c411886 100644 --- a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/bottom/group-footer.css.ts +++ b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/bottom/group-footer-css.ts @@ -1,10 +1,10 @@ +import { css } from '@emotion/css'; import { cssVarV2 } from '@toeverything/theme/v2'; -import { style } from '@vanilla-extract/css'; -export const groupFooter = style({ +export const groupFooter = css({ display: 'block', }); -export const addRowWrapper = style({ +export const addRowWrapper = css({ display: 'flex', width: '100%', height: '28px', @@ -16,7 +16,7 @@ export const addRowWrapper = style({ borderBottom: `1px solid ${cssVarV2.database.border}`, }); -export const addRowButton = style({ +export const addRowButton = css({ display: 'flex', alignItems: 'center', justifyContent: 'center', @@ -25,7 +25,7 @@ export const addRowButton = style({ left: '8px', }); -export const addRowText = style({ +export const addRowText = css({ userSelect: 'none', fontSize: '12px', lineHeight: '20px', diff --git a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/bottom/group-footer.ts b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/bottom/group-footer.ts index 2f4263d1a..877697686 100644 --- a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/bottom/group-footer.ts +++ b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/bottom/group-footer.ts @@ -8,7 +8,7 @@ import { property } from 'lit/decorators.js'; import { TableViewAreaSelection } from '../../../selection'; import type { VirtualTableView } from '../../table-view'; import type { TableGridGroup } from '../../types'; -import * as styles from './group-footer.css'; +import * as styles from './group-footer-css'; export class TableGroupFooter extends WithDisposable(ShadowlessElement) { @property({ attribute: false }) diff --git a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/group-header-css.ts b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/group-header-css.ts new file mode 100644 index 000000000..4a423f2ee --- /dev/null +++ b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/group-header-css.ts @@ -0,0 +1,5 @@ +import { css } from '@emotion/css'; + +export const groupHeader = css({ + display: 'block', +}); diff --git a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/group-header.css.ts b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/group-header.css.ts deleted file mode 100644 index 4168c0c40..000000000 --- a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/group-header.css.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { style } from '@vanilla-extract/css'; - -export const groupHeader = style({ - display: 'block', -}); diff --git a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/group-header.ts b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/group-header.ts index 240861950..244f301b1 100644 --- a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/group-header.ts +++ b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/group-header.ts @@ -12,7 +12,7 @@ import { property } from 'lit/decorators.js'; import { TableViewAreaSelection } from '../../../selection'; import type { VirtualTableView } from '../../table-view'; import type { TableGridGroup } from '../../types'; -import * as styles from './group-header.css'; +import * as styles from './group-header-css'; import { GroupTitle } from './group-title'; export class TableGroupHeader extends SignalWatcher( WithDisposable(ShadowlessElement) diff --git a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/group-title.css.ts b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/group-title-css.ts similarity index 63% rename from blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/group-title.css.ts rename to blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/group-title-css.ts index 32513f601..095f83342 100644 --- a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/group-title.css.ts +++ b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/group-title-css.ts @@ -1,7 +1,7 @@ import { cssVarV2 } from '@blocksuite/affine-shared/theme'; -import { style } from '@vanilla-extract/css'; +import { css } from '@emotion/css'; -export const groupHeaderCount = style({ +export const groupHeaderCount = css({ flexShrink: 0, width: '20px', height: '20px', @@ -14,27 +14,20 @@ export const groupHeaderCount = style({ fontSize: 'var(--data-view-cell-text-size)', }); -export const groupHeaderName = style({ - flex: 1, - overflow: 'hidden', -}); - -export const groupHeaderOps = style({ +export const groupHeaderOps = css({ display: 'flex', alignItems: 'center', opacity: 0, - selectors: { - '&:has(.active)': { - opacity: 1, - }, + '&:has(.active)': { + opacity: 1, }, }); -export const show = style({ +export const show = css({ opacity: 1, }); -export const groupHeaderOp = style({ +export const groupHeaderOp = css({ display: 'flex', alignItems: 'center', cursor: 'pointer', @@ -42,14 +35,12 @@ export const groupHeaderOp = style({ borderRadius: '4px', transition: 'all 150ms cubic-bezier(0.42, 0, 1, 1)', color: cssVarV2.icon.primary, - selectors: { - '&:hover, &.active': { - backgroundColor: cssVarV2.layer.background.hoverOverlay, - }, + '&:hover, &.active': { + backgroundColor: cssVarV2.layer.background.hoverOverlay, }, }); -export const groupHeaderIcon = style({ +export const groupHeaderIcon = css({ display: 'flex', alignItems: 'center', marginRight: '-4px', @@ -57,13 +48,13 @@ export const groupHeaderIcon = style({ fontSize: '16px', }); -export const groupHeaderTitle = style({ +export const groupHeaderTitle = css({ color: cssVarV2.text.primary, fontSize: 'var(--data-view-cell-text-size)', marginLeft: '4px', }); -export const groupTitleRow = style({ +export const groupTitleRow = css({ display: 'flex', alignItems: 'center', gap: '8px', diff --git a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/group-title.ts b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/group-title.ts index b5a3c8fb9..0712e9c4f 100644 --- a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/group-title.ts +++ b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/group-title.ts @@ -16,7 +16,7 @@ import { groupHeaderTitle, groupTitleRow, show, -} from './group-title.css'; +} from './group-title-css'; function GroupHeaderCount(group: GroupData) { const cards = group.rows; diff --git a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/header/column-header.css.ts b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/header/column-header-css.ts similarity index 54% rename from blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/header/column-header.css.ts rename to blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/header/column-header-css.ts index 4e3256419..699ca493b 100644 --- a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/header/column-header.css.ts +++ b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/header/column-header-css.ts @@ -1,16 +1,16 @@ +import { css } from '@emotion/css'; import { cssVarV2 } from '@toeverything/theme/v2'; -import { globalStyle, style } from '@vanilla-extract/css'; import { DEFAULT_COLUMN_TITLE_HEIGHT } from '../../../../consts'; -export const columnHeaderContainer = style({ +export const columnHeaderContainer = css({ display: 'block', backgroundColor: 'var(--affine-background-primary-color)', position: 'relative', zIndex: 2, }); -export const columnHeader = style({ +export const columnHeader = css({ position: 'relative', display: 'flex', flexDirection: 'row', @@ -21,40 +21,15 @@ export const columnHeader = style({ backgroundColor: 'var(--affine-background-primary-color)', }); -export const column = style({ +export const column = css({ cursor: 'pointer', }); -export const cell = style({ +export const cell = css({ userSelect: 'none', }); -export const columnMove = style({ - display: 'flex', - alignItems: 'center', - vars: { - '--color': 'var(--affine-placeholder-color)', - '--active': 'var(--affine-black-10)', - '--bw': '1px', - '--bw2': '-1px', - }, - cursor: 'grab', - background: 'none', - border: 'none', - borderRadius: 0, - position: 'absolute', - inset: 0, -}); - -globalStyle(`${columnMove} svg`, { - width: '10px', - height: '14px', - color: 'var(--affine-black-10)', - cursor: 'grab', - opacity: 0, -}); - -export const headerAddColumnButton = style({ +export const headerAddColumnButton = css({ height: `${DEFAULT_COLUMN_TITLE_HEIGHT}px`, backgroundColor: 'var(--affine-background-primary-color)', display: 'flex', diff --git a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/header/column-header.ts b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/header/column-header.ts index 1f45c1d0f..ad94518f1 100644 --- a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/header/column-header.ts +++ b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/header/column-header.ts @@ -8,7 +8,7 @@ import { styleMap } from 'lit/directives/style-map.js'; import { html } from 'lit/static-html.js'; import type { TableSingleView } from '../../../../table-view-manager'; -import * as styles from './column-header.css'; +import * as styles from './column-header-css'; export class VirtualTableHeader extends SignalWatcher( WithDisposable(ShadowlessElement) diff --git a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/row/cell.ts b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/row/cell.ts index 2fa550068..892266820 100644 --- a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/row/cell.ts +++ b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/row/cell.ts @@ -19,7 +19,7 @@ import { import type { VirtualTableView } from '../table-view'; import type { TableGridCell } from '../types'; import { popRowMenu } from './menu'; -import { rowSelectedBg } from './row-header.css'; +import { rowSelectedBg } from './row-header-css'; export class DatabaseCellContainer extends SignalWatcher( WithDisposable(ShadowlessElement) ) { diff --git a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/row/row-header.css.ts b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/row/row-header-css.ts similarity index 70% rename from blocksuite/affine/data-view/src/view-presets/table/pc-virtual/row/row-header.css.ts rename to blocksuite/affine/data-view/src/view-presets/table/pc-virtual/row/row-header-css.ts index d55916584..6f7d69dfd 100644 --- a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/row/row-header.css.ts +++ b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/row/row-header-css.ts @@ -1,18 +1,18 @@ +import { css } from '@emotion/css'; import { cssVarV2 } from '@toeverything/theme/v2'; -import { style } from '@vanilla-extract/css'; -export const leftBar = style({ +export const leftBar = css({ display: 'flex', height: '34px', }); -export const dragHandlerWrapper = style({ +export const dragHandlerWrapper = css({ backgroundColor: cssVarV2.layer.background.primary, marginBottom: '1px', display: 'flex', }); -export const dragHandler = style({ +export const dragHandler = css({ width: '4px', display: 'flex', alignItems: 'center', @@ -22,24 +22,24 @@ export const dragHandler = style({ opacity: 0, }); -export const checkboxWrapper = style({ +export const checkboxWrapper = css({ backgroundColor: cssVarV2.layer.background.primary, marginBottom: '1px', display: 'flex', }); -export const rowSelectedBg = style({ +export const rowSelectedBg = css({ backgroundColor: 'var(--affine-primary-color-04)', }); -export const dragHandlerIndicator = style({ +export const dragHandlerIndicator = css({ width: '4px', borderRadius: '2px', height: '12px', backgroundColor: 'var(--affine-placeholder-color)', }); -export const rowSelectCheckbox = style({ +export const rowSelectCheckbox = css({ display: 'flex', alignItems: 'center', opacity: 0, @@ -48,6 +48,6 @@ export const rowSelectCheckbox = style({ color: cssVarV2.icon.primary, }); -export const show = style({ +export const show = css({ opacity: 1, }); diff --git a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/row/row-header.ts b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/row/row-header.ts index 09d085dfc..3fdcee977 100644 --- a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/row/row-header.ts +++ b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/row/row-header.ts @@ -10,7 +10,7 @@ import { html } from 'lit/static-html.js'; import type { TableSingleView } from '../../table-view-manager.js'; import type { VirtualTableView } from '../table-view.js'; import type { TableGridCell } from '../types.js'; -import * as styles from './row-header.css.js'; +import * as styles from './row-header-css.js'; export class TableRowHeader extends SignalWatcher( WithDisposable(ShadowlessElement) diff --git a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/row/row-last.ts b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/row/row-last.ts index a021cfc26..fcaf5ff6f 100644 --- a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/row/row-last.ts +++ b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/row/row-last.ts @@ -8,7 +8,7 @@ import { html } from 'lit/static-html.js'; import type { TableSingleView } from '../../table-view-manager.js'; import type { VirtualTableView } from '../table-view.js'; import type { TableGridCell } from '../types.js'; -import * as styles from './row-header.css.js'; +import * as styles from './row-header-css.js'; export class TableRowLast extends SignalWatcher( WithDisposable(ShadowlessElement) diff --git a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/table-view-css.ts b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/table-view-css.ts new file mode 100644 index 000000000..00c91a8e0 --- /dev/null +++ b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/table-view-css.ts @@ -0,0 +1,60 @@ +import { css } from '@emotion/css'; +import { cssVarV2 } from '@toeverything/theme/v2'; + +import { LEFT_TOOL_BAR_WIDTH } from '../consts.js'; + +export const tableView = css({ + position: 'relative', + display: 'flex', + flexDirection: 'column', +}); + +export const tableContainer = css({ + overflowY: 'auto', +}); + +export const tableBlockTable = css({ + position: 'relative', + width: '100%', + paddingBottom: '4px', + zIndex: 1, + overflowX: 'scroll', + overflowY: 'hidden', + '&::-webkit-scrollbar': { + height: '8px', + }, + '&::-webkit-scrollbar-thumb:horizontal': { + borderRadius: '4px', + backgroundColor: 'transparent', + }, + '&::-webkit-scrollbar-track:horizontal': { + backgroundColor: 'transparent', + height: '8px', + }, + '&:hover::-webkit-scrollbar-thumb:horizontal': { + borderRadius: '4px', + backgroundColor: 'var(--affine-black-30)', + }, + '&:hover::-webkit-scrollbar-track:horizontal': { + backgroundColor: 'var(--affine-hover-color)', + height: '8px', + }, +}); + +export const tableContainer2 = css({ + position: 'relative', + width: 'fit-content', + minWidth: '100%', +}); + +export const addGroup = css({ + display: 'flex', + alignItems: 'center', + gap: '10px', + padding: '6px 12px 6px 8px', + color: cssVarV2.text.secondary, + fontSize: '12px', + lineHeight: '20px', + position: 'sticky', + left: `${LEFT_TOOL_BAR_WIDTH}px`, +}); diff --git a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/table-view.css.ts b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/table-view.css.ts deleted file mode 100644 index 912d50adf..000000000 --- a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/table-view.css.ts +++ /dev/null @@ -1,111 +0,0 @@ -import { cssVarV2 } from '@toeverything/theme/v2'; -import { style } from '@vanilla-extract/css'; - -import { LEFT_TOOL_BAR_WIDTH } from '../consts.js'; - -export const tableView = style({ - position: 'relative', - display: 'flex', - flexDirection: 'column', -}); - -export const tableViewAllElements = style({ - boxSizing: 'border-box', -}); - -export const tableContainer = style({ - overflowY: 'auto', -}); - -export const tableTitleContainer = style({ - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - height: '44px', - margin: '2px 0 2px', -}); - -export const tableBlockTable = style({ - position: 'relative', - width: '100%', - paddingBottom: '4px', - zIndex: 1, - overflowX: 'scroll', - overflowY: 'hidden', - selectors: { - '&::-webkit-scrollbar': { - height: '8px', - }, - '&::-webkit-scrollbar-thumb:horizontal': { - borderRadius: '4px', - backgroundColor: 'transparent', - }, - '&::-webkit-scrollbar-track:horizontal': { - backgroundColor: 'transparent', - height: '8px', - }, - '&:hover::-webkit-scrollbar-thumb:horizontal': { - borderRadius: '4px', - backgroundColor: 'var(--affine-black-30)', - }, - '&:hover::-webkit-scrollbar-track:horizontal': { - backgroundColor: 'var(--affine-hover-color)', - height: '8px', - }, - }, -}); - -export const tableContainer2 = style({ - position: 'relative', - width: 'fit-content', - minWidth: '100%', -}); - -export const tableBlockTagCircle = style({ - width: '12px', - height: '12px', - borderRadius: '50%', - display: 'inline-block', -}); - -export const tableBlockTag = style({ - display: 'inline-flex', - borderRadius: '11px', - alignItems: 'center', - padding: '0 8px', - cursor: 'pointer', -}); - -export const cellDivider = style({ - width: '1px', - height: '100%', - backgroundColor: cssVarV2.layer.insideBorder.border, -}); - -export const tableLeftBar = style({ - display: 'flex', - alignItems: 'center', - position: 'sticky', - zIndex: 1, - left: 0, - width: `${LEFT_TOOL_BAR_WIDTH}px`, - flexShrink: 0, -}); - -export const tableBlockRows = style({ - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'flex-start', -}); -export const addGroup = style({ - display: 'flex', - alignItems: 'center', - gap: '10px', - padding: '6px 12px 6px 8px', - color: cssVarV2.text.secondary, - fontSize: '12px', - lineHeight: '20px', - position: 'sticky', - left: `${LEFT_TOOL_BAR_WIDTH}px`, -}); diff --git a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/table-view.ts b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/table-view.ts index 5a629df0e..c262b7ad5 100644 --- a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/table-view.ts +++ b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/table-view.ts @@ -9,7 +9,7 @@ import { cssVarV2 } from '@toeverything/theme/v2'; import { styleMap } from 'lit/directives/style-map.js'; import { html } from 'lit/static-html.js'; -import * as dv from '../../../core/common/dv.css.js'; +import * as dv from '../../../core/common/dv-css.js'; import { type GroupTrait, groupTraitKey, @@ -31,7 +31,7 @@ import { TableGroupHeader } from './group/top/group-header'; import { DatabaseCellContainer } from './row/cell'; import { TableRowHeader } from './row/row-header.js'; import { TableRowLast } from './row/row-last.js'; -import * as styles from './table-view.css.js'; +import * as styles from './table-view-css.js'; import type { TableCellData, TableGrid, diff --git a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/virtual/virtual-cell-css.ts b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/virtual/virtual-cell-css.ts new file mode 100644 index 000000000..99e894967 --- /dev/null +++ b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/virtual/virtual-cell-css.ts @@ -0,0 +1,6 @@ +import { css } from '@emotion/css'; + +export const cell = css({ + position: 'absolute', + padding: '6px', +}); diff --git a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/virtual/virtual-cell.css.ts b/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/virtual/virtual-cell.css.ts deleted file mode 100644 index b2290198c..000000000 --- a/blocksuite/affine/data-view/src/view-presets/table/pc-virtual/virtual/virtual-cell.css.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { style } from '@vanilla-extract/css'; - -export const cell = style({ - position: 'absolute', - padding: '6px', -}); - -export const cellContent = style({ - padding: '6px', - width: '100%', - height: '100%', -}); diff --git a/yarn.lock b/yarn.lock index 36894d9c1..cbdd3a008 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2544,7 +2544,6 @@ __metadata: "@preact/signals-core": "npm:^1.8.0" "@toeverything/theme": "npm:^1.1.14" "@types/mdast": "npm:^4.0.4" - "@vanilla-extract/css": "npm:^1.17.0" date-fns: "npm:^4.0.0" lit: "npm:^3.2.0" minimatch: "npm:^10.0.1" @@ -2971,9 +2970,9 @@ __metadata: "@blocksuite/icons": "npm:^2.2.12" "@blocksuite/std": "workspace:*" "@blocksuite/store": "workspace:*" + "@emotion/css": "npm:^11.13.5" "@floating-ui/dom": "npm:^1.6.13" "@preact/signals-core": "npm:^1.8.0" - "@vanilla-extract/css": "npm:^1.17.0" lit: "npm:^3.2.0" rxjs: "npm:^7.8.1" yjs: "npm:^13.6.21" @@ -4128,13 +4127,13 @@ __metadata: "@blocksuite/icons": "npm:^2.2.12" "@blocksuite/std": "workspace:*" "@blocksuite/store": "workspace:*" + "@emotion/css": "npm:^11.13.5" "@emotion/hash": "npm:^0.9.2" "@floating-ui/dom": "npm:^1.6.13" "@lit/context": "npm:^1.1.2" "@preact/signals-core": "npm:^1.8.0" "@toeverything/theme": "npm:^1.1.14" "@types/lodash-es": "npm:^4.17.12" - "@vanilla-extract/css": "npm:^1.17.0" clsx: "npm:^2.1.1" date-fns: "npm:^4.0.0" lit: "npm:^3.2.0"