diff --git a/.vscode/settings.json b/.vscode/settings.json index 0edfb1a40c..bfcd780a3c 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -198,7 +198,6 @@ "jsonc", "yaml", "toml", - "less", "css" ], diff --git a/common/shared/package.json b/common/shared/package.json index 71cd67cfc7..72a0b3a46f 100644 --- a/common/shared/package.json +++ b/common/shared/package.json @@ -24,10 +24,11 @@ "univer-cli": "bin/index.ts" }, "dependencies": { - "@typescript-eslint/parser": "^8.31.1", + "@typescript-eslint/parser": "^8.32.0", + "@univerjs/themes": "workspace:*", "@vitejs/plugin-react": "^4.4.1", "@vitejs/plugin-vue": "^5.2.3", - "@vitest/coverage-istanbul": "^3.1.2", + "@vitest/coverage-istanbul": "^3.1.3", "autoprefixer": "^10.4.21", "eslint-plugin-readable-tailwind": "^1.9.1", "fs-extra": "^11.3.0", @@ -35,13 +36,13 @@ "javascript-obfuscator": "^4.1.1", "postcss-preset-env": "^10.1.6", "sort-keys": "^5.1.0", - "tailwind-scrollbar": "^3.1.0", + "tailwind-scrollbar": "^4.0.2", "tailwindcss": "^3.4.17", "tailwindcss-rem-to-px": "^0.1.1", - "vite": "^6.3.4", + "vite": "^6.3.5", "vite-plugin-dts": "^4.5.3", "vite-plugin-external": "^6.2.1", - "vitest": "^3.1.2" + "vitest": "^3.1.3" }, "devDependencies": { "@types/fs-extra": "^11.0.4", diff --git a/common/shared/tailwind/tailwind.config.ts b/common/shared/tailwind/tailwind.config.ts index 1208cb2460..3b8a8f9c3f 100644 --- a/common/shared/tailwind/tailwind.config.ts +++ b/common/shared/tailwind/tailwind.config.ts @@ -15,6 +15,7 @@ */ import type { Config } from 'tailwindcss'; +import { defaultTheme } from '@univerjs/themes'; import scrollbar from 'tailwind-scrollbar'; import remToPx from 'tailwindcss-rem-to-px'; @@ -26,140 +27,7 @@ const config: Omit = { }, theme: { extend: { - colors: { - primary: { - 50: '#F3F5FF', - 100: '#E9EDFF', - 200: '#D2DAFA', - 300: '#BAC6F8', - 400: '#6280F9', - 500: '#466AF7', - 600: '#2C53F1', - 700: '#143EE3', - 800: '#083AD1', - 900: '#1033BF', - }, - gray: { - 50: '#F9FAFB', - 100: '#EEEFF1', - 200: '#E3E5EA', - 300: '#A8B0BD', - 400: '#7D8698', - 500: '#4E5565', - 600: '#31363F', - 700: '#272A2F', - 800: '#1F2124', - 900: '#1B1C1F', - }, - blue: { - 50: '#EBF5FF', - 100: '#E1EFFE', - 200: '#C3DDFD', - 300: '#A4CAFE', - 400: '#76A9FA', - 500: '#3F83F8', - 600: '#1C64F2', - 700: '#1A56DB', - 800: '#1E429F', - 900: '#233876', - }, - red: { - 50: '#FDF2F2', - 100: '#FDE8E8', - 200: '#FBD5D5', - 300: '#F8B4B4', - 400: '#F98080', - 500: '#F05252', - 600: '#E02424', - 700: '#C81E1E', - 800: '#9B1C1C', - 900: '#771D1D', - }, - orange: { - 50: '#FFF8F1', - 100: '#FEECDC', - 200: '#FCD9BD', - 300: '#FDBA8C', - 400: '#FF8A4C', - 500: '#FF5A1F', - 600: '#D03801', - 700: '#B43403', - 800: '#8A2C0D', - 900: '#771D1D', - }, - yellow: { - 50: '#FDFCEA', - 100: '#FFF4B9', - 200: '#FCDC6A', - 300: '#FAC815', - 400: '#F1B312', - 500: '#D49D0F', - 600: '#AB7F0E', - 700: '#9A6D15', - 800: '#725213', - 900: '#634312', - }, - green: { - 50: '#F3FAF7', - 100: '#DEF7EC', - 200: '#BCF0DA', - 300: '#84E1BC', - 400: '#31C48D', - 500: '#0DA471', - 600: '#057A55', - 700: '#046C4E', - 800: '#03543F', - 900: '#014737', - }, - jiqing: { - 50: '#EDFAFA', - 100: '#D5F5F6', - 200: '#AFECEF', - 300: '#7EDCE2', - 400: '#16BDCA', - 500: '#0694A2', - 600: '#047481', - 700: '#036672', - 800: '#05505C', - 900: '#014451', - }, - indigo: { - 50: '#F3F5FF', - 100: '#E9EDFF', - 200: '#D2DAFA', - 300: '#BAC6F8', - 400: '#6280F9', - 500: '#466AF7', - 600: '#2C53F1', - 700: '#143EE3', - 800: '#083AD1', - 900: '#1033BF', - }, - purple: { - 50: '#F6F5FF', - 100: '#EDEBFE', - 200: '#DCD7FE', - 300: '#CABFFD', - 400: '#AC94FA', - 500: '#9061F9', - 600: '#7E3AF2', - 700: '#6C2BD9', - 800: '#5521B5', - 900: '#4A1D96', - }, - pink: { - 50: '#FDF2F8', - 100: '#FCE8F3', - 200: '#FAD1E8', - 300: '#F8B4D9', - 400: '#F17EB8', - 500: '#E74694', - 600: '#D61F69', - 700: '#BF125D', - 800: '#99154B', - 900: '#751A3D', - }, - }, + colors: defaultTheme, boxShadow: { sm: '0px 1px 2px 0px rgba(30, 40, 77, 0.08)', md: '0px 1px 6px -2px rgba(30, 40, 77, 0.08), 0px 2px 6px -1px rgba(30, 40, 77, 0.10)', diff --git a/common/storybook/.storybook/preview.tsx b/common/storybook/.storybook/preview.tsx index c224bbea8a..90ccc8aece 100644 --- a/common/storybook/.storybook/preview.tsx +++ b/common/storybook/.storybook/preview.tsx @@ -40,7 +40,7 @@ import { ThemeService, UniverInstanceService, } from '@univerjs/core'; -import { ConfigProvider, defaultTheme, greenTheme, themeInstance } from '@univerjs/design'; +import { ConfigProvider } from '@univerjs/design'; import enUS from '@univerjs/design/locale/en-US'; import zhCN from '@univerjs/design/locale/zh-CN'; import { DesktopLocalStorageService, RediContext } from '@univerjs/ui'; @@ -49,8 +49,8 @@ import React, { useMemo } from 'react'; import './global.css'; export const themes: Record> = { - default: defaultTheme, - green: greenTheme, + // default: defaultTheme, + // green: greenTheme, }; const preview: Preview = { @@ -104,7 +104,7 @@ const preview: Preview = { }, decorators: [(Story, context) => { - themeInstance.setTheme(document.body, themes[context.globals.theme]); + // themeInstance.setTheme(document.body, themes[context.globals.theme]); const designLocale = context.globals.i18n === LocaleType.ZH_CN ? zhCN.design : enUS.design; if (context.globals.darkMode === 'dark') { diff --git a/e2e/visual-comparison/docs/docs-visual-comparison.spec.ts-snapshots/default-doc-ci-chromium-linux.png b/e2e/visual-comparison/docs/docs-visual-comparison.spec.ts-snapshots/default-doc-ci-chromium-linux.png index 94a5378fec..a9389860d6 100644 Binary files a/e2e/visual-comparison/docs/docs-visual-comparison.spec.ts-snapshots/default-doc-ci-chromium-linux.png and b/e2e/visual-comparison/docs/docs-visual-comparison.spec.ts-snapshots/default-doc-ci-chromium-linux.png differ diff --git a/e2e/visual-comparison/sheets/sheets-switching-render-unit.spec.ts-snapshots/switching-render-unit-ci-chromium-linux.png b/e2e/visual-comparison/sheets/sheets-switching-render-unit.spec.ts-snapshots/switching-render-unit-ci-chromium-linux.png index b30552dc06..2d9e6d0fbe 100644 Binary files a/e2e/visual-comparison/sheets/sheets-switching-render-unit.spec.ts-snapshots/switching-render-unit-ci-chromium-linux.png and b/e2e/visual-comparison/sheets/sheets-switching-render-unit.spec.ts-snapshots/switching-render-unit-ci-chromium-linux.png differ diff --git a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/dark-mode-ci-chromium-linux.png b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/dark-mode-ci-chromium-linux.png index f14f5c930e..07ce346a6f 100644 Binary files a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/dark-mode-ci-chromium-linux.png and b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/dark-mode-ci-chromium-linux.png differ diff --git a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/default-sheet-fullpage-ci-chromium-linux.png b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/default-sheet-fullpage-ci-chromium-linux.png index e789059066..e7bdfa5d9f 100644 Binary files a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/default-sheet-fullpage-ci-chromium-linux.png and b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/default-sheet-fullpage-ci-chromium-linux.png differ diff --git a/examples/src/docs-uniscript/main.ts b/examples/src/docs-uniscript/main.ts index 19ee4b345c..ce4f227084 100644 --- a/examples/src/docs-uniscript/main.ts +++ b/examples/src/docs-uniscript/main.ts @@ -15,7 +15,6 @@ */ import { LocaleType, LogLevel, Univer, UniverInstanceType } from '@univerjs/core'; -import { defaultTheme } from '@univerjs/design'; import { UniverDocsPlugin } from '@univerjs/docs'; import { UniverDocsUIPlugin } from '@univerjs/docs-ui'; import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula'; @@ -32,7 +31,6 @@ import '../global.css'; // univer const univer = new Univer({ - theme: defaultTheme, locale: LocaleType.ZH_CN, locales: { [LocaleType.ZH_CN]: zhCN, diff --git a/examples/src/docs/main.ts b/examples/src/docs/main.ts index f4b1521f41..fd60e4dda0 100644 --- a/examples/src/docs/main.ts +++ b/examples/src/docs/main.ts @@ -17,7 +17,6 @@ import { LocaleType, LogLevel, Univer, UniverInstanceType, UserManagerService } from '@univerjs/core'; import { FUniver } from '@univerjs/core/facade'; import { UniverDebuggerPlugin } from '@univerjs/debugger'; -import { defaultTheme } from '@univerjs/design'; import { UniverDocsPlugin } from '@univerjs/docs'; import { UniverDocsDrawingUIPlugin } from '@univerjs/docs-drawing-ui'; import { UniverDocsHyperLinkUIPlugin } from '@univerjs/docs-hyper-link-ui'; @@ -38,7 +37,6 @@ const IS_E2E: boolean = !!process.env.IS_E2E; // univer const univer = new Univer({ - theme: defaultTheme, locale: LocaleType.ZH_CN, locales: { [LocaleType.ZH_CN]: zhCN, diff --git a/examples/src/mobile-s/main.ts b/examples/src/mobile-s/main.ts index 86ed8981a0..2696978f83 100644 --- a/examples/src/mobile-s/main.ts +++ b/examples/src/mobile-s/main.ts @@ -16,7 +16,6 @@ import type { FUniver } from '@univerjs/core/facade'; import { LocaleType, LogLevel, Univer, UniverInstanceType, UserManagerService } from '@univerjs/core'; -import { defaultTheme } from '@univerjs/design'; import { UniverDocsPlugin } from '@univerjs/docs'; import { UniverDocsUIPlugin } from '@univerjs/docs-ui'; import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula'; @@ -39,7 +38,6 @@ import '../global.css'; // univer const univer = new Univer({ - theme: defaultTheme, locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: enUS, diff --git a/examples/src/sheets-multi-units/main.ts b/examples/src/sheets-multi-units/main.ts index 470d06366c..7a0009cac7 100644 --- a/examples/src/sheets-multi-units/main.ts +++ b/examples/src/sheets-multi-units/main.ts @@ -16,7 +16,6 @@ import { CellValueType, LocaleType, LogLevel, Univer, UserManagerService } from '@univerjs/core'; import { FUniver } from '@univerjs/core/facade'; -import { defaultTheme } from '@univerjs/design'; import { UniverDocsPlugin } from '@univerjs/docs'; import { UniverDocsDrawingUIPlugin } from '@univerjs/docs-drawing-ui'; import { UniverDocsMentionUIPlugin } from '@univerjs/docs-mention-ui'; @@ -78,7 +77,6 @@ export const mockUser = { // univer const univer = new Univer({ - theme: defaultTheme, locale: LocaleType.ZH_CN, locales: { [LocaleType.ZH_CN]: zhCN, diff --git a/examples/src/sheets-multi/main.tsx b/examples/src/sheets-multi/main.tsx index 344a15dafb..243b1023a6 100644 --- a/examples/src/sheets-multi/main.tsx +++ b/examples/src/sheets-multi/main.tsx @@ -15,8 +15,7 @@ */ import { LocaleType, LogLevel, Tools, Univer, UniverInstanceType } from '@univerjs/core'; -import { defaultTheme, render } from '@univerjs/design'; - +import { render } from '@univerjs/design'; import { UniverDocsPlugin } from '@univerjs/docs'; import { UniverDocsUIPlugin } from '@univerjs/docs-ui'; import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula'; @@ -29,7 +28,7 @@ import { UniverSheetsNumfmtPlugin } from '@univerjs/sheets-numfmt'; import { UniverSheetsNumfmtUIPlugin } from '@univerjs/sheets-numfmt-ui'; import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui'; import { UniverUIPlugin } from '@univerjs/ui'; -import React, { useEffect } from 'react'; +import { useEffect } from 'react'; import { Mosaic, MosaicWindow } from 'react-mosaic-component'; import { enUS, faIR, frFR, ruRU, zhCN } from '../locales'; @@ -40,7 +39,6 @@ import '../global.css'; function factory(id: string) { return function createUniverOnContainer() { const univer = new Univer({ - theme: defaultTheme, locale: LocaleType.ZH_CN, locales: { [LocaleType.ZH_CN]: zhCN, diff --git a/examples/src/sheets-uniscript/main.ts b/examples/src/sheets-uniscript/main.ts index a026d97959..4b93646345 100644 --- a/examples/src/sheets-uniscript/main.ts +++ b/examples/src/sheets-uniscript/main.ts @@ -16,7 +16,6 @@ import { LocaleType, LogLevel, Univer, UniverInstanceType } from '@univerjs/core'; import { UniverDebuggerPlugin } from '@univerjs/debugger'; -import { defaultTheme } from '@univerjs/design'; import { UniverDocsPlugin } from '@univerjs/docs'; import { UniverDocsUIPlugin } from '@univerjs/docs-ui'; import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula'; @@ -35,7 +34,6 @@ import '../global.css'; // univer const univer = new Univer({ - theme: defaultTheme, locale: LocaleType.ZH_CN, locales: { [LocaleType.ZH_CN]: zhCN, diff --git a/examples/src/sheets/main.ts b/examples/src/sheets/main.ts index bded80ba8b..5ddb3d26d4 100644 --- a/examples/src/sheets/main.ts +++ b/examples/src/sheets/main.ts @@ -17,7 +17,6 @@ import { LocaleType, LogLevel, Univer, UniverInstanceType, UserManagerService } from '@univerjs/core'; import { FUniver } from '@univerjs/core/facade'; import { UniverDebuggerPlugin } from '@univerjs/debugger'; -import { defaultTheme } from '@univerjs/design'; import { UniverDocsPlugin } from '@univerjs/docs'; import { UniverDocsUIPlugin } from '@univerjs/docs-ui'; import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula'; @@ -89,8 +88,6 @@ export const mockUser = { function createNewInstance() { // univer const univer = new Univer({ - theme: defaultTheme, - locale: LocaleType.ZH_CN, locales: { [LocaleType.ZH_CN]: zhCN, [LocaleType.EN_US]: enUS, diff --git a/examples/src/slides/main.ts b/examples/src/slides/main.ts index cae5d4617b..5e2c091d60 100644 --- a/examples/src/slides/main.ts +++ b/examples/src/slides/main.ts @@ -15,7 +15,6 @@ */ import { LocaleType, Univer, UniverInstanceType } from '@univerjs/core'; -import { greenTheme } from '@univerjs/design'; import { UniverDocsPlugin } from '@univerjs/docs'; import { UniverDocsUIPlugin } from '@univerjs/docs-ui'; import { UniverDrawingPlugin } from '@univerjs/drawing'; @@ -32,7 +31,6 @@ import '../global.css'; // univer const univer = new Univer({ - theme: greenTheme, locale: LocaleType.ZH_CN, locales: { [LocaleType.ZH_CN]: zhCN, diff --git a/examples/src/uni/main.ts b/examples/src/uni/main.ts index 56266cf4e7..b09e66e16b 100644 --- a/examples/src/uni/main.ts +++ b/examples/src/uni/main.ts @@ -17,7 +17,6 @@ import { Injector, LocaleType, LogLevel, Univer, UniverInstanceType } from '@univerjs/core'; import { FUniver } from '@univerjs/core/facade'; import { UniverDebuggerPlugin } from '@univerjs/debugger'; -import { defaultTheme } from '@univerjs/design'; import { UniverDocsPlugin } from '@univerjs/docs'; import { UniverDocsDrawingUIPlugin } from '@univerjs/docs-drawing-ui'; import { DocUIController, UniverDocsUIPlugin } from '@univerjs/docs-ui'; @@ -53,7 +52,6 @@ const LOAD_LAZY_PLUGINS_TIMEOUT = 4_000; // univer const univer = new Univer({ - theme: defaultTheme, locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: enUS, diff --git a/package.json b/package.json index 8020fb5431..9a2f4ab6d5 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "type": "module", "version": "0.7.0-beta.0", "private": true, - "packageManager": "pnpm@10.8.0", + "packageManager": "pnpm@10.10.0", "author": "DreamNum Co., Ltd. ", "license": "Apache-2.0", "funding": { @@ -48,7 +48,7 @@ "@antfu/eslint-config": "4.12.0", "@commitlint/cli": "^19.8.0", "@commitlint/config-conventional": "^19.8.0", - "@eslint-react/eslint-plugin": "^1.48.5", + "@eslint-react/eslint-plugin": "^1.49.0", "@playwright/test": "^1.52.0", "@release-it-plugins/workspaces": "^4.2.0", "@release-it/conventional-changelog": "^9.0.4", @@ -60,7 +60,7 @@ "@univerjs-infra/shared": "workspace:*", "@univerjs/design": "workspace:*", "@vitejs/plugin-react": "^4.4.1", - "eslint": "9.25.1", + "eslint": "9.26.0", "eslint-plugin-format": "^1.0.1", "eslint-plugin-header": "^3.1.1", "eslint-plugin-jsdoc": "^50.6.11", @@ -72,7 +72,7 @@ "fs-extra": "^11.3.0", "husky": "^9.1.7", "lint-staged": "^15.5.1", - "posthog-node": "^4.15.0", + "posthog-node": "^4.17.1", "react": "^19.1.0", "react-dom": "^19.1.0", "release-it": "^17.11.0", @@ -80,7 +80,7 @@ "tsx": "^4.19.4", "turbo": "^2.5.2", "typescript": "^5.8.3", - "vitest": "^3.1.2" + "vitest": "^3.1.3" }, "pnpm": { "onlyBuiltDependencies": [ diff --git a/packages-experimental/action-recorder/package.json b/packages-experimental/action-recorder/package.json index ad0f3f7d81..a84c4d9a7a 100644 --- a/packages-experimental/action-recorder/package.json +++ b/packages-experimental/action-recorder/package.json @@ -80,7 +80,7 @@ "rxjs": "^7.8.1", "tailwindcss": "^3.4.17", "typescript": "^5.8.3", - "vite": "^6.3.4", - "vitest": "^3.1.2" + "vite": "^6.3.5", + "vitest": "^3.1.3" } } diff --git a/packages-experimental/debugger/package.json b/packages-experimental/debugger/package.json index 2354700032..db18fde58a 100644 --- a/packages-experimental/debugger/package.json +++ b/packages-experimental/debugger/package.json @@ -72,6 +72,7 @@ "@univerjs/mockdata": "workspace:*", "@univerjs/sheets": "workspace:*", "@univerjs/sheets-drawing-ui": "workspace:*", + "@univerjs/themes": "workspace:*", "@univerjs/ui": "workspace:*", "@univerjs/watermark": "workspace:*" }, @@ -85,8 +86,8 @@ "rxjs": "^7.8.1", "tailwindcss": "^3.4.17", "typescript": "^5.8.3", - "vite": "^6.3.4", - "vitest": "^3.1.2", + "vite": "^6.3.5", + "vitest": "^3.1.3", "vue": "^3.5.13" } } diff --git a/packages-experimental/debugger/src/commands/operations/theme.operation.ts b/packages-experimental/debugger/src/commands/operations/theme.operation.ts index 7b72976e8c..4784b35f48 100644 --- a/packages-experimental/debugger/src/commands/operations/theme.operation.ts +++ b/packages-experimental/debugger/src/commands/operations/theme.operation.ts @@ -14,11 +14,12 @@ * limitations under the License. */ -import type { IAccessor, ICommand, IStyleSheet } from '@univerjs/core'; +import type { IAccessor, ICommand } from '@univerjs/core'; +import type { Theme } from '@univerjs/themes'; import { CommandType, ThemeService } from '@univerjs/core'; export interface IThemeCommandParams { - value?: IStyleSheet; + value?: Theme; } export const ThemeOperation: ICommand = { diff --git a/packages-experimental/debugger/src/controllers/menu.ts b/packages-experimental/debugger/src/controllers/menu.ts index e02edec9fb..cf93c7e795 100644 --- a/packages-experimental/debugger/src/controllers/menu.ts +++ b/packages-experimental/debugger/src/controllers/menu.ts @@ -17,9 +17,9 @@ import type { IAccessor } from '@univerjs/core'; import type { IMenuButtonItem, IMenuSelectorItem } from '@univerjs/ui'; import { LocaleType } from '@univerjs/core'; -import { defaultTheme, greenTheme } from '@univerjs/design'; +import { defaultTheme, greenTheme } from '@univerjs/themes'; +// import { defaultTheme } from '@univerjs/themes'; import { MenuItemType } from '@univerjs/ui'; - import { CreateFloatDomCommand } from '../commands/commands/float-dom.command'; import { CreateEmptySheetCommand, DisposeCurrentUnitCommand, DisposeUniverCommand, LoadSheetSnapshotCommand } from '../commands/commands/unit.command'; import { ShowCellContentOperation } from '../commands/operations/cell.operation'; diff --git a/packages-experimental/sheets-source-binding/package.json b/packages-experimental/sheets-source-binding/package.json index e57b53f0b7..f5b881e162 100644 --- a/packages-experimental/sheets-source-binding/package.json +++ b/packages-experimental/sheets-source-binding/package.json @@ -77,7 +77,7 @@ "@univerjs-infra/shared": "workspace:*", "rxjs": "^7.8.1", "typescript": "^5.8.3", - "vite": "^6.3.4", - "vitest": "^3.1.2" + "vite": "^6.3.5", + "vitest": "^3.1.3" } } diff --git a/packages-experimental/uni-docs-ui/package.json b/packages-experimental/uni-docs-ui/package.json index 72076fff79..6f92f1851d 100644 --- a/packages-experimental/uni-docs-ui/package.json +++ b/packages-experimental/uni-docs-ui/package.json @@ -73,7 +73,7 @@ "rxjs": "^7.8.1", "tailwindcss": "^3.4.17", "typescript": "^5.8.3", - "vite": "^6.3.4", - "vitest": "^3.1.2" + "vite": "^6.3.5", + "vitest": "^3.1.3" } } diff --git a/packages-experimental/uni-formula-ui/package.json b/packages-experimental/uni-formula-ui/package.json index d4e701a1d1..79cc4687c6 100644 --- a/packages-experimental/uni-formula-ui/package.json +++ b/packages-experimental/uni-formula-ui/package.json @@ -85,7 +85,7 @@ "rxjs": "^7.8.1", "tailwindcss": "^3.4.17", "typescript": "^5.8.3", - "vite": "^6.3.4", - "vitest": "^3.1.2" + "vite": "^6.3.5", + "vitest": "^3.1.3" } } diff --git a/packages-experimental/uni-formula/package.json b/packages-experimental/uni-formula/package.json index fe81c9a4ca..4f28aef93f 100644 --- a/packages-experimental/uni-formula/package.json +++ b/packages-experimental/uni-formula/package.json @@ -61,7 +61,7 @@ "devDependencies": { "@univerjs-infra/shared": "workspace:*", "typescript": "^5.8.3", - "vite": "^6.3.4", - "vitest": "^3.1.2" + "vite": "^6.3.5", + "vitest": "^3.1.3" } } diff --git a/packages-experimental/uni-sheets-ui/package.json b/packages-experimental/uni-sheets-ui/package.json index 4aafdb03c8..c3c64176b6 100644 --- a/packages-experimental/uni-sheets-ui/package.json +++ b/packages-experimental/uni-sheets-ui/package.json @@ -78,7 +78,7 @@ "rxjs": "^7.8.1", "tailwindcss": "^3.4.17", "typescript": "^5.8.3", - "vite": "^6.3.4", - "vitest": "^3.1.2" + "vite": "^6.3.5", + "vitest": "^3.1.3" } } diff --git a/packages-experimental/uni-slides-ui/package.json b/packages-experimental/uni-slides-ui/package.json index 5c802c88ff..17b9a64b07 100644 --- a/packages-experimental/uni-slides-ui/package.json +++ b/packages-experimental/uni-slides-ui/package.json @@ -74,7 +74,7 @@ "rxjs": "^7.8.1", "tailwindcss": "^3.4.17", "typescript": "^5.8.3", - "vite": "^6.3.4", - "vitest": "^3.1.2" + "vite": "^6.3.5", + "vitest": "^3.1.3" } } diff --git a/packages-experimental/uni-slides-ui/src/views/UniSlideSideBar.tsx b/packages-experimental/uni-slides-ui/src/views/UniSlideSideBar.tsx index 9d03bf6bb0..8343a6084b 100644 --- a/packages-experimental/uni-slides-ui/src/views/UniSlideSideBar.tsx +++ b/packages-experimental/uni-slides-ui/src/views/UniSlideSideBar.tsx @@ -132,8 +132,7 @@ export function UniSlideSideBar() { univer-relative univer-mt-4 univer-flex univer-h-8 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-lg univer-border-0 univer-bg-transparent univer-px-1 univer-text-primary-500 - before:absolute before:left-0 before:top-0 before:h-[1px] before:content-[''] - before:univer-bg-gray-200 + before:absolute before:left-0 before:top-0 before:h-px before:content-[''] before:univer-bg-gray-200 hover:univer-bg-gray-100 `} onClick={handleAppendSlide} diff --git a/packages-experimental/uniui/package.json b/packages-experimental/uniui/package.json index 53c43f3bee..5555e9c7b4 100644 --- a/packages-experimental/uniui/package.json +++ b/packages-experimental/uniui/package.json @@ -69,17 +69,18 @@ "@univerjs/sheets": "workspace:*", "@univerjs/sheets-ui": "workspace:*", "@univerjs/ui": "workspace:*", - "@xyflow/react": "^12.5.5" + "@xyflow/react": "^12.6.0" }, "devDependencies": { "@univerjs-infra/shared": "workspace:*", + "@univerjs/themes": "workspace:*", "postcss": "^8.5.3", "react": "18.3.1", "react-dom": "18.3.1", "rxjs": "^7.8.1", "tailwindcss": "^3.4.17", "typescript": "^5.8.3", - "vite": "^6.3.4", - "vitest": "^3.1.2" + "vite": "^6.3.5", + "vitest": "^3.1.3" } } diff --git a/packages-experimental/uniui/src/views/uni-controls/UniControls.tsx b/packages-experimental/uniui/src/views/uni-controls/UniControls.tsx index 27d2f6392d..2abc1cef02 100644 --- a/packages-experimental/uniui/src/views/uni-controls/UniControls.tsx +++ b/packages-experimental/uniui/src/views/uni-controls/UniControls.tsx @@ -185,7 +185,7 @@ export const UniControls = ({ zoom, onItemClick }: { zoom: number; onItemClick?: ; + return
; } export function UnitName({ unitId }: { unitId: string }) { diff --git a/packages-experimental/uniui/src/views/workbench/UniWorkbench.tsx b/packages-experimental/uniui/src/views/workbench/UniWorkbench.tsx index 313b4bc0c7..bea28c2581 100644 --- a/packages-experimental/uniui/src/views/workbench/UniWorkbench.tsx +++ b/packages-experimental/uniui/src/views/workbench/UniWorkbench.tsx @@ -25,7 +25,7 @@ import type { } from '@xyflow/react'; import type { IFloatingToolbarRef } from '../uni-toolbar/UniFloatToolbar'; import { debounce, ICommandService, IContextService, IUniverInstanceService, LocaleService, ThemeService } from '@univerjs/core'; -import { clsx, ConfigContext, ConfigProvider, defaultTheme, themeInstance } from '@univerjs/design'; +import { clsx, ConfigContext, ConfigProvider } from '@univerjs/design'; import { IRenderManagerService } from '@univerjs/engine-render'; import { MenuSingle } from '@univerjs/icons'; import { @@ -45,7 +45,7 @@ import { ReactFlowProvider, useNodesState, } from '@xyflow/react'; -import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'; +import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; import { UniFocusUnitOperation } from '../../commands/operations/uni-focus-unit.operation'; import { FlowManagerService } from '../../services/flow/flow-manager.service'; @@ -91,12 +91,6 @@ export function UniWorkbench(props: IUniWorkbenchProps) { const focusedUnit = useObservable(instanceService.focused$); - useEffect(() => { - if (!themeService.getCurrentTheme()) { - themeService.setTheme(defaultTheme); - } - }, []); - useEffect(() => { if (contentRef.current) { onRendered?.(contentRef.current); @@ -129,10 +123,6 @@ export function UniWorkbench(props: IUniWorkbenchProps) { localeService.localeChanged$.subscribe(() => { setLocale(localeService.getLocales() as unknown as ILocale); }), - themeService.currentTheme$.subscribe((theme) => { - themeInstance.setTheme(mountContainer, theme); - portalContainer && themeInstance.setTheme(portalContainer, theme); - }), ]; return () => { diff --git a/packages/core/package.json b/packages/core/package.json index 854258aace..80d6c779e0 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -74,6 +74,7 @@ }, "dependencies": { "@univerjs/protocol": "0.1.45", + "@univerjs/themes": "workspace:*", "@wendellhu/redi": "0.18.0", "async-lock": "^1.4.1", "dayjs": "^1.11.13", @@ -94,7 +95,7 @@ "@univerjs-infra/shared": "workspace:*", "rxjs": "^7.8.1", "typescript": "^5.8.3", - "vite": "^6.3.4", - "vitest": "^3.1.2" + "vite": "^6.3.5", + "vitest": "^3.1.3" } } diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 6f0c2b1e08..d75456efe1 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -124,7 +124,7 @@ export { IResourceLoaderService } from './services/resource-loader/type'; export { ResourceManagerService } from './services/resource-manager/resource-manager.service'; export type { IResourceHook, IResources } from './services/resource-manager/type'; export { IResourceManagerService } from './services/resource-manager/type'; -export { type IStyleSheet, ThemeService } from './services/theme/theme.service'; +export { ThemeService } from './services/theme/theme.service'; // #region sheet diff --git a/packages/core/src/services/theme/theme.service.ts b/packages/core/src/services/theme/theme.service.ts index d19482e134..1e03f76d82 100644 --- a/packages/core/src/services/theme/theme.service.ts +++ b/packages/core/src/services/theme/theme.service.ts @@ -15,23 +15,20 @@ */ import type { Observable } from 'rxjs'; -import type { Nullable } from '../../shared/types'; - +import { defaultTheme } from '@univerjs/themes'; import { BehaviorSubject } from 'rxjs'; import { Disposable, toDisposable } from '../../shared/lifecycle'; -export interface IStyleSheet { - [key: string]: string; -} +export type Theme = typeof defaultTheme; export class ThemeService extends Disposable { private readonly _darkMode$ = new BehaviorSubject(false); readonly darkMode$: Observable = this._darkMode$.asObservable(); get darkMode(): boolean { return this._darkMode$.getValue(); } - private _currentTheme: Nullable; - private readonly _currentTheme$ = new BehaviorSubject({}); - readonly currentTheme$: Observable = this._currentTheme$.asObservable(); + private _currentTheme: Theme = defaultTheme; + private readonly _currentTheme$ = new BehaviorSubject(this._currentTheme); + readonly currentTheme$: Observable = this._currentTheme$.asObservable(); constructor() { super(); @@ -42,15 +39,11 @@ export class ThemeService extends Disposable { })); } - getCurrentTheme(): IStyleSheet { - if (!this._currentTheme) { - throw new Error('[ThemeService]: current theme is not set!'); - } - + getCurrentTheme(): Theme { return this._currentTheme; } - setTheme(theme: IStyleSheet): void { + setTheme(theme: Theme): void { this._currentTheme = theme; this._currentTheme$.next(theme); } diff --git a/packages/core/src/univer.ts b/packages/core/src/univer.ts index b46551a43c..bbad1ec0dc 100644 --- a/packages/core/src/univer.ts +++ b/packages/core/src/univer.ts @@ -14,12 +14,12 @@ * limitations under the License. */ +import type { Theme } from '@univerjs/themes'; import type { Dependency, IDisposable } from './common/di'; import type { UnitModel, UnitType } from './common/unit'; import type { LogLevel } from './services/log/log.service'; import type { DependencyOverride } from './services/plugin/plugin-override'; import type { Plugin, PluginCtor } from './services/plugin/plugin.service'; -import type { IStyleSheet } from './services/theme/theme.service'; import type { ILocales } from './shared'; import type { IWorkbookData } from './sheets/typedef'; import type { LocaleType } from './types/enum/locale-type'; @@ -56,7 +56,7 @@ import { Workbook } from './sheets/workbook'; import { SlideDataModel } from './slides/slide-model'; export interface IUniverConfig { - theme: IStyleSheet; + theme?: Theme; locale: LocaleType; locales: ILocales; logLevel: LogLevel; diff --git a/packages/data-validation/package.json b/packages/data-validation/package.json index 02646986d1..1d9f5b5493 100644 --- a/packages/data-validation/package.json +++ b/packages/data-validation/package.json @@ -70,7 +70,7 @@ "@univerjs/sheets": "workspace:*", "rxjs": "^7.8.1", "typescript": "^5.8.3", - "vite": "^6.3.4", - "vitest": "^3.1.2" + "vite": "^6.3.5", + "vitest": "^3.1.3" } } diff --git a/packages/design/README.md b/packages/design/README.md index 54420b5e68..e542aa38e8 100644 --- a/packages/design/README.md +++ b/packages/design/README.md @@ -32,21 +32,6 @@ pnpm add @univerjs/design This package contains CSS and has the highest priority. Please import it before importing any other Univer style files. -### Built-in themes - -The package provides two built-in themes: `defaultTheme` and `greenTheme`. You can import them directly and use them in your application. - -```typescript -import { defaultTheme } from '@univerjs/design'; -// import { greenTheme } from '@univerjs/design'; - -// Use the default theme -new Univer({ - theme: defaultTheme, - // theme: greenTheme, -}); -``` - [npm-version-shield]: https://img.shields.io/npm/v/@univerjs/design?style=flat-square [npm-version-link]: https://npmjs.com/package/@univerjs/design diff --git a/packages/design/package.json b/packages/design/package.json index 2d51a935de..776c46a82a 100644 --- a/packages/design/package.json +++ b/packages/design/package.json @@ -68,14 +68,15 @@ "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "dependencies": { - "@radix-ui/react-dialog": "^1.1.11", - "@radix-ui/react-dropdown-menu": "^2.1.12", - "@radix-ui/react-popover": "^1.1.11", - "@radix-ui/react-separator": "^1.1.4", - "@radix-ui/react-slot": "^1.2.0", - "@radix-ui/react-tooltip": "^1.2.4", + "@radix-ui/react-dialog": "^1.1.13", + "@radix-ui/react-dropdown-menu": "^2.1.14", + "@radix-ui/react-popover": "^1.1.13", + "@radix-ui/react-separator": "^1.1.6", + "@radix-ui/react-slot": "^1.2.2", + "@radix-ui/react-tooltip": "^1.2.6", "@rc-component/trigger": "^2.2.6", "@univerjs/icons": "^0.3.24", + "@univerjs/themes": "workspace:*", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "dayjs": "^1.11.13", @@ -95,14 +96,13 @@ "@types/react-transition-group": "^4.4.12", "@univerjs-infra/shared": "workspace:*", "@univerjs/core": "workspace:*", - "less": "^4.3.0", "postcss": "^8.5.3", "react": "18.3.1", "react-dom": "18.3.1", "tailwindcss": "^3.4.17", "tailwindcss-animate": "^1.0.7", "typescript": "^5.8.3", - "vite": "^6.3.4", - "vitest": "^3.1.2" + "vite": "^6.3.5", + "vitest": "^3.1.3" } } diff --git a/packages/design/src/components/button/index.module.less b/packages/design/src/components/button/index.module.less deleted file mode 100644 index 4cc4d2b5ab..0000000000 --- a/packages/design/src/components/button/index.module.less +++ /dev/null @@ -1,118 +0,0 @@ -.button { - cursor: pointer; - user-select: none; - - position: relative; - - display: inline-block; - - line-height: 1; - text-align: center; - white-space: nowrap; - - border: 1px solid rgb(var(--border-color)); - border-radius: var(--border-radius-base); - - transition: all 0.15s; - - &[disabled] { - cursor: not-allowed; - color: rgb(var(--grey-300)); - } - - /** type */ - &-default { - font-weight: 400; - color: rgb(var(--text-color)); - background-color: rgb(var(--bg-color-secondary)); - - &[disabled] { - &:hover { - color: rgb(var(--grey-300)); - border-color: rgb(var(--border-color)); - } - } - - &:hover { - color: rgb(var(--primary-color)); - border-color: rgb(var(--primary-color)); - } - } - - &-primary { - font-weight: 500; - color: rgb(var(--color-white)); - background-color: rgb(var(--primary-color)); - border-color: rgb(var(--primary-color)); - - &[disabled] { - background-color: rgb(var(--bg-color-secondary)); - border-color: rgb(var(--border-color)); - - &:hover { - color: rgb(var(--grey-300)); - background-color: rgb(var(--bg-color-secondary)); - border-color: rgb(var(--border-color)); - } - } - - &:hover { - color: rgb(var(--color-white)); - background-color: rgb(var(--primary-color-hover)); - border-color: rgb(var(--primary-color-hover)); - } - } - - &-text { - color: rgb(var(--text-color)); - background-color: transparent; - border-color: transparent; - - &[disabled] { - &:hover { - background-color: transparent; - } - } - - &:hover { - background-color: rgb(var(--bg-color-hover)); - } - } - - &-link { - color: rgb(var(--primary-color)); - background-color: transparent; - border-color: transparent; - - &[disabled] { - &:hover { - background-color: transparent; - } - } - - &:hover { - background-color: rgb(var(--bg-color-hover)); - } - } - - /** size */ - &-small { - padding: 6px 8px; - font-size: var(--font-size-sm); - } - - &-middle { - padding: 8px 12px; - font-size: var(--font-size-base); - } - - &-large { - padding: 10px 20px; - font-size: var(--font-size-base); - } - - /** block */ - &-block { - width: 100%; - } -} diff --git a/packages/design/src/components/date-picker/DatePanel.tsx b/packages/design/src/components/date-picker/DatePanel.tsx index 69002587e8..0ac636e9a4 100644 --- a/packages/design/src/components/date-picker/DatePanel.tsx +++ b/packages/design/src/components/date-picker/DatePanel.tsx @@ -20,7 +20,7 @@ import { PickerPanel } from 'rc-picker'; import generateConfig from 'rc-picker/lib/generate/dayjs'; import { useContext } from 'react'; import { ConfigContext } from '../config-provider'; -import styles from './index.module.less'; +import styles from './index.module.css'; export type IDatePanelProps = Omit, 'prefixCls' | 'locale' | 'generateConfig'> & { multiple?: boolean; diff --git a/packages/design/src/components/date-picker/DatePicker.tsx b/packages/design/src/components/date-picker/DatePicker.tsx index 4802431a84..96f2b41774 100644 --- a/packages/design/src/components/date-picker/DatePicker.tsx +++ b/packages/design/src/components/date-picker/DatePicker.tsx @@ -19,9 +19,9 @@ import type { PickerProps } from 'rc-picker'; import { CalendarSingle } from '@univerjs/icons'; import RcPicker from 'rc-picker'; import generateConfig from 'rc-picker/lib/generate/dayjs'; -import React, { useContext } from 'react'; +import { useContext } from 'react'; import { ConfigContext } from '../config-provider/ConfigProvider'; -import styles from './index.module.less'; +import styles from './index.module.css'; export interface IDatePickerProps extends Omit, 'value' | 'onChange' | 'locale' | 'generateConfig' | 'prefixCls'> { /** diff --git a/packages/design/src/components/date-picker/index.module.css b/packages/design/src/components/date-picker/index.module.css new file mode 100644 index 0000000000..2654f26d85 --- /dev/null +++ b/packages/design/src/components/date-picker/index.module.css @@ -0,0 +1,307 @@ +.date-picker { + position: relative; + width: 200px; + height: 32px; + border-radius: 4px; + box-sizing: border-box; + display: inline-flex; + @apply univer-bg-white univer-border univer-border-solid univer-border-gray-200; +} + +.date-picker-rtl { + direction: rtl; +} + +.date-picker-invalid { + box-shadow: 0 0 2px red; +} + +.date-picker-panel { + display: inline-block; + vertical-align: top; +} + +.date-picker-panel-focused { + border-color: blue; +} + +.date-picker-panel-rtl { + direction: rtl; +} + +.date-picker-suffix-icon { + position: absolute; + top: 50%; + right: 0; + bottom: 0; + display: flex; + align-items: center; + padding: 0 8px; + transform: translateY(-50%); + cursor: pointer; + @apply univer-text-gray-600; +} + +.date-picker-decade-panel, +.date-picker-year-panel, +.date-picker-month-panel, +.date-picker-week-panel, +.date-picker-date-panel, +.date-picker-time-panel { + display: flex; + flex-direction: column; +} + +.date-picker-decade-panel table, +.date-picker-year-panel table, +.date-picker-month-panel table, +.date-picker-week-panel table, +.date-picker-date-panel table, +.date-picker-time-panel table { + text-align: center; + border-collapse: collapse; +} + +/* Header */ +.date-picker-header { + margin-bottom: 12px; + display: flex; + align-items: center; +} + +.date-picker-header > * { + flex: none; +} + +.date-picker-header-view { + height: 16px; + flex: auto; + display: flex; + justify-content: center; + align-items: center; + gap: 8px; +} + +.date-picker-header-view > button { + padding: 0; + border: 0; + background-color: transparent; + cursor: pointer; +} + +.date-picker-header-super-prev-btn, +.date-picker-header-super-next-btn, +.date-picker-header-prev-btn, +.date-picker-header-next-btn { + width: 16px; + height: 16px; + padding: 0; + line-height: 16px; + font-size: 16px; + border: none; + background-color: transparent; + cursor: pointer; +} + +/* Content */ +.date-picker-cell { + color: #aaa; +} + +.date-picker-cell-disabled { + opacity: 0.2; +} + +.date-picker-cell-inner { + display: inline-block; + box-sizing: border-box; + width: 100%; + height: 24px; + margin: 0; + padding: 0; + font-size: 12px; + line-height: 24px; + background: transparent; + border: 0; + border-radius: 4px; + outline: none; + cursor: pointer; + transition: background 0.3s; +} + +.date-picker-cell-in-view { + color: #333; +} + +.date-picker-cell-in-range > .date-picker-cell-inner { + background: rgba(0, 0, 255, 0.05); +} + +.date-picker-cell-hover > .date-picker-cell-inner { + @apply univer-bg-gray-100; +} + +.date-picker-cell-range-hover-start::after, +.date-picker-cell-range-hover-end::after, +.date-picker-cell-range-hover::after { + position: absolute; + top: 3px; + right: 0; + bottom: 0; + left: 0; + border: 1px solid green; + border-right: 0; + border-left: 0; + content: ''; + pointer-events: none; +} + +.date-picker-cell-range-hover-start::after { + border-left: 1px solid green !important; +} + +.date-picker-cell-range-hover-end::after { + border-right: 1px solid green !important; +} + +.date-picker-cell-today > .date-picker-cell-inner { + @apply univer-border univer-border-solid univer-border-primary-600; +} + +.date-picker-cell-range-start > .date-picker-cell-inner, +.date-picker-cell-range-end > .date-picker-cell-inner, +.date-picker-cell-selected > .date-picker-cell-inner { + color: #fff; + @apply univer-bg-primary-600; +} + +/* Preset */ +.date-picker-presets { + background: #ccccff; +} + +.date-picker-presets ul { + margin: 0; + padding: 0; + list-style: none; +} + +/* Now Button */ +.date-picker-now { + padding-top: 12px; +} + +.date-picker-now-btn { + font-size: 13px; + cursor: pointer; + @apply univer-text-primary-600; +} + +/* Footer */ +.date-picker-footer, +.date-picker-picker-footer { + margin-top: 12px; + @apply univer-border-0 univer-border-t univer-border-solid univer-border-t-gray-200; +} + +/* Clear Button */ +.date-picker-clear { + position: absolute; + top: 7px; + right: 8px; + cursor: pointer; +} + +.date-picker-clear-btn { + width: 16px; + height: 16px; + text-align: center; + line-height: 16px; + border-radius: 50%; + display: block; + @apply univer-bg-gray-500; +} + +.date-picker-clear-btn::before { + content: '×'; + position: absolute; + top: -1px; + left: 0; + right: 0; + bottom: 0; + color: white; + font-size: 16px; + line-height: 16px; +} + +/* Dropdown */ +.date-picker-dropdown { + position: absolute; + pointer-events: none; +} + +.date-picker-dropdown-range { + padding: 10px 0; +} + +.date-picker-dropdown-hidden { + display: none; +} + +/* Range Picker */ +.date-picker-range { + position: relative; + display: inline-flex; +} + +.date-picker-range-wrapper { + display: flex; +} + +.date-picker-active-bar { + bottom: 0; + height: 3px; + background: green; + opacity: 0; + transition: all 0.3s; + pointer-events: none; +} + +.date-picker-focused .date-picker-active-bar { + opacity: 1; +} + +/* Panel Container */ +.date-picker-panel-container { + display: inline-block; + vertical-align: top; + transition: margin 0.3s; + pointer-events: all; +} + +.date-picker-panel-layout { + display: flex; + flex-wrap: nowrap; + align-items: stretch; + overflow: hidden; + @apply univer-bg-white univer-border univer-border-solid univer-border-gray-200 univer-rounded univer-shadow univer-p-4; +} + +/* Input */ +.date-picker-input { + position: relative; + display: inline-flex; + width: 100%; +} + +.date-picker-input > input { + width: 100%; + padding-left: 12px; + border: none; + border-radius: 4px; + box-sizing: border-box; +} + +.date-picker-input > input:focus { + outline: none; +} diff --git a/packages/design/src/components/date-picker/index.module.less b/packages/design/src/components/date-picker/index.module.less deleted file mode 100644 index 76539170c0..0000000000 --- a/packages/design/src/components/date-picker/index.module.less +++ /dev/null @@ -1,682 +0,0 @@ -@prefix-cls: date-picker; - -@background-color: rgb(var(--bg-color-secondary)); - -@input-placeholder-color: hsv(0, 0, 75%); - -@time-panel-padding-total: 180px; -// @time-panel-padding-top: 90px; -@time-panel-padding-top: 0; - -@cell-size: 24px; - -.placeholder(@color: @input-placeholder-color) { - // Firefox - &::-moz-placeholder { - opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526 - } - - &::placeholder { - color: @color; - } - - &:placeholder-shown { - text-overflow: ellipsis; - } -} - -.@{prefix-cls} { - position: relative; - width: 200px; - height: 32px; - border: 1px solid rgb(var(--border-color)); - border-radius: 4px; - box-sizing: border-box; - display: inline-flex; - - &-rtl { - direction: rtl; - } - - &-focused { - // border: 1px solid rgb(var(--primary-color)); - } - &-invalid { - box-shadow: 0 0 2px red; - } - &-panel { - display: inline-block; - vertical-align: top; - - &-focused { - border-color: blue; - } - - &-rtl { - direction: rtl; - } - } - - &-suffix-icon { - position: absolute; - top: 50%; - right: 0; - bottom: 0; - display: flex; - align-items: center; - padding: 0 8px; - color: rgb(var(--text-color-secondary)); - transform: translateY(-50%); - cursor: pointer; - } - - // ===================== Shared Panel ===================== - &-decade-panel, - &-year-panel, - &-month-panel, - &-week-panel, - &-date-panel, - &-time-panel { - display: flex; - flex-direction: column; - - table { - text-align: center; - border-collapse: collapse; - } - } - - // Header - &-header { - margin-bottom: var(--margin-base); - display: flex; - align-items: center; - - > * { - flex: none; - } - - &-view { - height: 16px; - flex: auto; - display: flex; - justify-content: center; - align-items: center; - gap: var(--margin-xs); - - > button { - padding: 0; - border: 0; - background-color: transparent; - cursor: pointer; - } - } - - .btn () { - width: 16px; - height: 16px; - padding: 0; - line-height: 16px; - font-size: var(--font-size-lg); - border: none; - background-color: transparent; - cursor: pointer; - } - - &-super { - &-prev, - &-next { - &-btn { - .btn(); - } - } - } - - &-prev, - &-next { - &-btn { - .btn(); - } - } - } - - // Content - &-cell { - color: #aaa; - - &-disabled { - opacity: 0.2; - } - - &-inner { - display: inline-block; - box-sizing: border-box; - width: 100%; - height: @cell-size; - margin: 0; - padding: 0; - font-size: 12px; - line-height: @cell-size; - background: transparent; - border: 0; - border-radius: var(--border-radius-base); - outline: none; - cursor: pointer; - transition: background 0.3s; - } - - &-in-view { - color: #333; - } - - &-in-range > &-inner { - background: fade(blue, 5%); - } - - &-hover > &-inner { - background: rgb(var(--bg-color)); - } - - &-range-hover-start, - &-range-hover-end, - &-range-hover { - position: relative; - &::after { - position: absolute; - top: 3px; - right: 0; - bottom: 0; - left: 0; - border: 1px solid green; - border-right: 0; - border-left: 0; - content: ''; - pointer-events: none; - } - } - - &-range-hover-start::after { - border-left: 1px solid green !important; - } - &-range-hover-end::after { - border-right: 1px solid green !important; - } - - &-today > &-inner { - border: 1px solid rgb(var(--primary-color)); - } - &-range-start > &-inner, - &-range-end > &-inner, - &-selected > &-inner { - // TODO: - // background: fade(blue, 20%); - color: #fff; - background: rgb(var(--primary-color)); - } - } - - // Preset - &-presets { - background: #ccccff; - - ul { - margin: 0; - padding: 0; - list-style: none; - } - } - - &-now { - padding-top: var(--padding-base); - - &-btn { - font-size: var(--font-size-xs); - color: rgb(var(--primary-color)); - cursor: pointer; - } - } - - &-footer, - &-picker-footer { - margin-top: var(--margin-sm); - border-top: 1px solid rgb(var(--border-color)); - } - - &-ranges { - margin: 0; - padding: 0; - overflow: hidden; - list-style: none; - - > li { - text-align: center; - display: block; - } - } - - &-ok { - float: right; - } - - &-decade-panel { - .@{prefix-cls}-content { - tbody { - display: grid; - gap: 20px; - } - } - - .@{prefix-cls}-cell-inner { - width: 78px; - height: 24px; - } - } - - // ================== Year & Month Panel ================== - &-year-panel, - &-month-panel { - .@{prefix-cls}-content { - tbody { - display: grid; - gap: 20px; - } - } - .@{prefix-cls}-cell-inner { - width: 48px; - height: 24px; - } - } - - // ====================== Week Panel ====================== - &-week-panel { - &-row { - &:hover { - .@{prefix-cls}-cell { - background: red; - } - } - - &-selected { - .@{prefix-cls}-cell { - background: rgba(0, 0, 255, 0.3); - } - } - - &-range { - &-hover { - .@{prefix-cls}-cell { - background: rgba(0, 255, 0, 0.1); - } - } - - &-start, - &-end { - .@{prefix-cls}-cell { - background: rgba(0, 255, 0, 0.3); - } - } - } - } - - .@{prefix-cls}-cell, - .@{prefix-cls}-cell-inner { - width: @cell-size; - } - - .@{prefix-cls}-cell-week { - color: #999; - font-weight: bold; - font-size: 12px; - } - - .@{prefix-cls}-cell:hover > .@{prefix-cls}-cell-inner, - .@{prefix-cls}-cell-selected > .@{prefix-cls}-cell-inner { - background: transparent; - } - } - - // ====================== Date Panel ====================== - &-date-panel { - .@{prefix-cls}-cell-inner { - width: @cell-size; - height: @cell-size; - font-size: var(--font-size-xs); - } - } - - // ====================== Time Panel ====================== - &-time-panel { - width: auto; - - .@{prefix-cls}-content { - position: relative; - display: flex; - max-height: 200px; - - // &::after { - // position: absolute; - // top: @time-panel-padding-top; - // right: -5px; - // left: -5px; - // height: 20px; - // background: rgba(255, 0, 0, 0.05); - // content: ''; - // pointer-events: none; - // } - } - - // &-column-holder { - // display: flex; - // flex-direction: column; - // text-align: center; - // } - - &-column-title { - font-size: 14px; - line-height: @cell-size; - } - - &-column { - flex: auto; - width: 50px; - margin: 0; - // padding: 0 0 180px 0; - padding: @time-panel-padding-top 0 (@time-panel-padding-total - @time-panel-padding-top); - overflow-x: hidden; - overflow-y: hidden; - font-size: 12px; - text-align: left; - list-style: none; - transition: background 0.3s; - - &-active { - background: rgba(0, 0, 255, 0.1); - } - - &:hover { - overflow-y: auto; - } - - > li { - width: 50px; - margin: 0; - padding: 0; - cursor: pointer; - - &.@{prefix-cls}-time-panel-cell { - &-disabled { - opacity: 0.5; - } - - &-selected { - background: rgba(0, 0, 255, 0.5); - } - } - - .@{prefix-cls}-time-panel-cell-inner { - display: block; - width: 100%; - height: @cell-size; - margin: 0; - // padding: 0 0 0 12px; - color: #333; - line-height: @cell-size; - text-align: center; - - .@{prefix-cls}-panel-rtl & { - padding: 0 12px 0 0; - text-align: right; - } - } - } - } - } - - // ====================== Date Time ======================= - &-datetime-panel { - display: flex; - - .@{prefix-cls}-time-panel { - border-left: 1px solid #999; - } - - .@{prefix-cls}-date-panel, - .@{prefix-cls}-time-panel { - transition: opacity 0.3s; - } - - // Keyboard - &-active { - .@{prefix-cls}-date-panel, - .@{prefix-cls}-time-panel { - opacity: 0.3; - - &-active { - opacity: 1; - } - } - } - } - - // ======================== Input ========================= - &-input { - position: relative; - display: inline-flex; - width: 100%; - - .@{prefix-cls}-rtl & { - text-align: right; - } - - &-active { - > input { - background: rgba(0, 0, 255, 0.05); - } - } - - > input { - width: 100%; - padding-left: 12px; - border: none; - border-radius: var(--border-radius-base); - box-sizing: border-box; - .placeholder(); - &:focus { - outline: none; - } - } - - &-placeholder { - > input { - color: @input-placeholder-color; - } - } - } - - &-clear { - position: absolute; - top: 7px; - right: 8px; - cursor: pointer; - - .@{prefix-cls}-rtl & { - right: auto; - left: 4px; - } - - &-btn { - width: 16px; - height: 16px; - text-align: center; - line-height: 16px; - background-color: rgb(var(--grey-500)); - border-radius: 50%; - display: block; - - &::before { - content: '×'; - position: absolute; - top: -1px; - left: 0; - right: 0; - bottom: 0; - color: white; - font-size: 16px; - line-height: 16px; - } - } - } - - // ======================= Dropdown ======================= - &-dropdown { - position: absolute; - pointer-events: none; - - &-range { - padding: 10px 0; - } - - &-hidden { - display: none; - } - - // Panel - @arrow-size: 10px; - - &-placement-topLeft, - &-placement-topRight { - .@{prefix-cls}-range-arrow { - bottom: (@arrow-size / 2 + 1px); - transform: rotate(135deg); - } - } - &-placement-bottomLeft, - &-placement-bottomright { - .@{prefix-cls}-range-arrow { - top: (@arrow-size / 2 + 1px); - transform: rotate(-45deg); - } - } - - .@{prefix-cls}-range-arrow { - position: absolute; - left: @arrow-size; - z-index: 1; - width: @arrow-size; - height: @arrow-size; - margin-left: 10px; - transition: all 0.3s; - - .@{prefix-cls}-dropdown-rtl& { - right: @arrow-size; - left: auto; - margin-right: 10px; - margin-left: 0; - } - - &::before, - &::after { - position: absolute; - top: 50%; - left: 50%; - box-sizing: border-box; - transform: translate(-50%, -50%); - content: ''; - - .@{prefix-cls}-dropdown-rtl& { - right: 50%; - left: auto; - transform: translate(50%, -50%); - } - } - - &::before { - width: @arrow-size; - height: @arrow-size; - border: (@arrow-size / 2) solid blue; - border-color: blue blue transparent transparent; - } - &::after { - width: @arrow-size - 2px; - height: @arrow-size - 2px; - border: (@arrow-size - 2px) / 2 solid blue; - border-color: @background-color @background-color transparent transparent; - } - } - } - - // ======================================================== - // = Range Picker = - // ======================================================== - &-range { - position: relative; - display: inline-flex; - - &-wrapper { - display: flex; - } - - .@{prefix-cls}-active-bar { - bottom: 0; - height: 3px; - background: green; - opacity: 0; - transition: all 0.3s; - pointer-events: none; - } - - &.@{prefix-cls}-focused { - .@{prefix-cls}-active-bar { - opacity: 1; - } - } - } - - &-panel-container { - display: inline-block; - vertical-align: top; - transition: margin 0.3s; - pointer-events: all; - } - - &-panel-layout { - padding: var(--padding-lg); - background: rgb(var(--bg-color-secondary)); - border: 1px solid rgb(var(--border-color)); - border-radius: var(--border-radius-lg); - box-shadow: var(--box-shadow-base); - display: flex; - flex-wrap: nowrap; - align-items: stretch; - overflow: hidden; - } - - // ======================================================== - // = Overflow = - // ======================================================== - &-selector { - width: 100%; - } - - &-selection-overflow { - display: flex; - flex-wrap: wrap; - box-sizing: border-box; - width: 100%; - border: 1px solid green; - - &-item { - flex: none; - max-width: 100%; - } - } - - &-selection-item { - border: 1px solid blue; - } - - &-multiple-input { - width: 10px; - opacity: 0.1; - } -} diff --git a/packages/design/src/components/date-range-picker/DateRangePicker.stories.tsx b/packages/design/src/components/date-range-picker/DateRangePicker.stories.tsx index 02ee04d329..2b2aaed8a0 100644 --- a/packages/design/src/components/date-range-picker/DateRangePicker.stories.tsx +++ b/packages/design/src/components/date-range-picker/DateRangePicker.stories.tsx @@ -18,7 +18,7 @@ import type { Meta } from '@storybook/react'; import type { NoUndefinedRangeValueType } from 'rc-picker/lib/PickerInput/RangePicker'; import { dayjs } from '@univerjs/core'; -import React, { useState } from 'react'; +import { useState } from 'react'; import { DateRangePicker } from './DateRangePicker'; const meta: Meta = { diff --git a/packages/design/src/components/date-range-picker/DateRangePicker.tsx b/packages/design/src/components/date-range-picker/DateRangePicker.tsx index 0fc0efd4f2..1dd4c99899 100644 --- a/packages/design/src/components/date-range-picker/DateRangePicker.tsx +++ b/packages/design/src/components/date-range-picker/DateRangePicker.tsx @@ -19,9 +19,9 @@ import type { NoUndefinedRangeValueType, RangePickerProps } from 'rc-picker/lib/ import { CalendarSingle, GuideSingle } from '@univerjs/icons'; import { RangePicker } from 'rc-picker'; import generateConfig from 'rc-picker/lib/generate/dayjs'; -import React, { useContext } from 'react'; +import { useContext } from 'react'; import { ConfigContext } from '../config-provider/ConfigProvider'; -import styles from './index.module.less'; +import styles from './index.module.css'; export interface IDateRangePickerProps extends Omit, 'value' | 'onChange' | 'locale' | 'generateConfig' | 'prefixCls'> { /** diff --git a/packages/design/src/components/date-range-picker/index.module.css b/packages/design/src/components/date-range-picker/index.module.css new file mode 100644 index 0000000000..dda0127e54 --- /dev/null +++ b/packages/design/src/components/date-range-picker/index.module.css @@ -0,0 +1,277 @@ +.date-range-picker { + position: relative; + width: 280px; + height: 32px; + border-radius: 4px; + box-sizing: border-box; + display: inline-flex; + @apply univer-border univer-border-solid univer-border-gray-200; +} + +.date-range-picker-rtl { + direction: rtl; +} + +.date-range-picker-invalid { + box-shadow: 0 0 2px red; +} + +.date-range-picker-panel { + display: inline-block; + vertical-align: top; +} + +.date-range-picker-panel-focused { + border-color: blue; +} + +.date-range-picker-panel-rtl { + direction: rtl; +} + +.date-range-picker-suffix-icon { + position: absolute; + top: 50%; + right: 0; + bottom: 0; + display: flex; + align-items: center; + padding: 0 8px; + transform: translateY(-50%); + cursor: pointer; + @apply univer-text-gray-600; +} + +/* Shared Panels */ +.date-range-picker-decade-panel, +.date-range-picker-year-panel, +.date-range-picker-month-panel, +.date-range-picker-week-panel, +.date-range-picker-date-panel, +.date-range-picker-time-panel { + display: flex; + flex-direction: column; +} + +.date-range-picker-decade-panel table, +.date-range-picker-year-panel table, +.date-range-picker-month-panel table, +.date-range-picker-week-panel table, +.date-range-picker-date-panel table, +.date-range-picker-time-panel table { + text-align: center; + border-collapse: collapse; +} + +/* Header */ +.date-range-picker-header { + margin-bottom: 12px; + display: flex; + align-items: center; +} + +.date-range-picker-header > * { + flex: none; +} + +.date-range-picker-header-view { + height: 16px; + flex: auto; + display: flex; + justify-content: center; + align-items: center; + gap: 8px; +} + +.date-range-picker-header-view > button { + padding: 0; + border: 0; + background-color: transparent; + cursor: pointer; +} + +.date-range-picker-header-super-prev-btn, +.date-range-picker-header-super-next-btn, +.date-range-picker-header-prev-btn, +.date-range-picker-header-next-btn { + width: 16px; + height: 16px; + padding: 0; + line-height: 16px; + font-size: 16px; + border: none; + background-color: transparent; + cursor: pointer; +} + +/* Content */ +.date-range-picker-cell { + color: #aaa; +} + +.date-range-picker-cell-disabled { + opacity: 0.2; +} + +.date-range-picker-cell-inner { + display: inline-block; + box-sizing: border-box; + width: 100%; + height: 24px; + margin: 0; + padding: 0; + font-size: 12px; + line-height: 24px; + background: transparent; + border: 0; + border-radius: 4px; + outline: none; + cursor: pointer; + transition: background 0.3s; +} + +.date-range-picker-cell-in-view { + color: #333; +} + +.date-range-picker-cell-in-range > .date-range-picker-cell-inner { + background: rgba(0, 0, 255, 0.05); +} + +.date-range-picker-cell-hover > .date-range-picker-cell-inner { + @apply univer-bg-gray-100; +} + +.date-range-picker-cell-range-hover-start::after, +.date-range-picker-cell-range-hover-end::after, +.date-range-picker-cell-range-hover::after { + position: absolute; + top: 3px; + right: 0; + bottom: 0; + left: 0; + border: 1px solid green; + border-right: 0; + border-left: 0; + content: ''; + pointer-events: none; +} + +.date-range-picker-cell-range-hover-start::after { + border-left: 1px solid green !important; +} + +.date-range-picker-cell-range-hover-end::after { + border-right: 1px solid green !important; +} + +.date-range-picker-cell-today > .date-range-picker-cell-inner { + @apply univer-border univer-border-solid univer-border-primary-600; +} + +.date-range-picker-cell-range-start > .date-range-picker-cell-inner, +.date-range-picker-cell-range-end > .date-range-picker-cell-inner, +.date-range-picker-cell-selected > .date-range-picker-cell-inner { + color: #fff; + @apply univer-bg-primary-600; +} + +/* Preset */ +.date-range-picker-presets { + background: #ccccff; +} + +.date-range-picker-presets ul { + margin: 0; + padding: 0; + list-style: none; +} + +/* Now Button */ +.date-range-picker-now { + padding-top: 12px; +} + +.date-range-picker-now-btn { + font-size: 13px; + cursor: pointer; + @apply univer-text-primary-600; +} + +/* Footer */ +.date-range-picker-footer, +.date-range-picker-picker-footer { + margin-top: 12px; + @apply univer-border-0 univer-border-t univer-border-solid univer-border-t-gray-200; +} + +/* Dropdown */ +.date-range-picker-dropdown { + position: absolute; + pointer-events: none; +} + +.date-range-picker-dropdown-range { + padding: 10px 0; +} + +.date-range-picker-dropdown-hidden { + display: none; +} + +/* Range Picker */ +.date-range-picker-range { + position: relative; + display: inline-flex; +} + +.date-range-picker-range-wrapper { + display: flex; +} + +.date-range-picker-active-bar { + bottom: 0; + height: 3px; + opacity: 0; + transition: all 0.3s; + pointer-events: none; + @apply univer-bg-primary-600; +} + +.date-range-picker-focused .date-range-picker-active-bar { + opacity: 1; +} + +.date-range-picker-panel-container { + display: inline-block; + vertical-align: top; + transition: margin 0.3s; + pointer-events: all; +} + +.date-range-picker-panel-layout { + display: flex; + flex-wrap: nowrap; + align-items: stretch; + overflow: hidden; + @apply univer-bg-white univer-border univer-border-solid univer-border-gray-200 univer-rounded univer-shadow univer-p-4; +} + +/* Input */ +.date-range-picker-input { + position: relative; + display: inline-flex; + width: 100%; +} + +.date-range-picker-input > input { + width: 100%; + padding-left: 12px; + border: none; + border-radius: 4px; + box-sizing: border-box; +} + +.date-range-picker-input > input:focus { + outline: none; +} diff --git a/packages/design/src/components/date-range-picker/index.module.less b/packages/design/src/components/date-range-picker/index.module.less deleted file mode 100644 index 032447bce2..0000000000 --- a/packages/design/src/components/date-range-picker/index.module.less +++ /dev/null @@ -1,689 +0,0 @@ -@prefix-cls: date-range-picker; - -@background-color: rgb(var(--bg-color-secondary)); - -@input-placeholder-color: hsv(0, 0, 75%); - -@time-panel-padding-total: 180px; -// @time-panel-padding-top: 90px; -@time-panel-padding-top: 0; - -@cell-size: 24px; - -.placeholder(@color: @input-placeholder-color) { - // Firefox - &::-moz-placeholder { - opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526 - } - - &::placeholder { - color: @color; - } - - &:placeholder-shown { - text-overflow: ellipsis; - } -} - -.@{prefix-cls} { - position: relative; - width: 280px; - height: 32px; - border: 1px solid rgb(var(--border-color)); - border-radius: 4px; - box-sizing: border-box; - display: inline-flex; - - &-rtl { - direction: rtl; - } - - &-focused { - // border: 1px solid rgb(var(--primary-color)); - } - &-invalid { - box-shadow: 0 0 2px red; - } - &-panel { - display: inline-block; - vertical-align: top; - - &-focused { - border-color: blue; - } - - &-rtl { - direction: rtl; - } - } - - &-suffix-icon { - position: absolute; - top: 50%; - right: 0; - bottom: 0; - display: flex; - align-items: center; - padding: 0 8px; - color: rgb(var(--text-color-secondary)); - transform: translateY(-50%); - cursor: pointer; - } - - // ===================== Shared Panel ===================== - &-decade-panel, - &-year-panel, - &-month-panel, - &-week-panel, - &-date-panel, - &-time-panel { - display: flex; - flex-direction: column; - - table { - text-align: center; - border-collapse: collapse; - } - } - - // Header - &-header { - margin-bottom: var(--margin-base); - display: flex; - align-items: center; - - > * { - flex: none; - } - - &-view { - height: 16px; - flex: auto; - display: flex; - justify-content: center; - align-items: center; - gap: var(--margin-xs); - - > button { - padding: 0; - border: 0; - background-color: transparent; - cursor: pointer; - } - } - - .btn () { - width: 16px; - height: 16px; - padding: 0; - line-height: 16px; - font-size: var(--font-size-lg); - border: none; - background-color: transparent; - cursor: pointer; - } - - &-super { - &-prev, - &-next { - &-btn { - .btn(); - } - } - } - - &-prev, - &-next { - &-btn { - .btn(); - } - } - } - - // Content - &-cell { - color: #aaa; - - &-disabled { - opacity: 0.2; - } - - &-inner { - display: inline-block; - box-sizing: border-box; - width: 100%; - height: @cell-size; - margin: 0; - padding: 0; - font-size: 12px; - line-height: @cell-size; - background: transparent; - border: 0; - border-radius: var(--border-radius-base); - outline: none; - cursor: pointer; - transition: background 0.3s; - } - - &-in-view { - color: #333; - } - - &-in-range > &-inner { - background: fade(blue, 5%); - } - - &-hover > &-inner { - background: rgb(var(--bg-color)); - } - - &-range-hover-start, - &-range-hover-end, - &-range-hover { - position: relative; - &::after { - position: absolute; - top: 3px; - right: 0; - bottom: 0; - left: 0; - border: 1px solid green; - border-right: 0; - border-left: 0; - content: ''; - pointer-events: none; - } - } - - &-range-hover-start::after { - border-left: 1px solid green !important; - } - &-range-hover-end::after { - border-right: 1px solid green !important; - } - - &-today > &-inner { - border: 1px solid rgb(var(--primary-color)); - } - &-range-start > &-inner, - &-range-end > &-inner, - &-selected > &-inner { - // TODO: - // background: fade(blue, 20%); - color: #fff; - background: rgb(var(--primary-color)); - } - } - - // Preset - &-presets { - background: #ccccff; - - ul { - margin: 0; - padding: 0; - list-style: none; - } - } - - &-now { - padding-top: var(--padding-base); - - &-btn { - font-size: var(--font-size-xs); - color: rgb(var(--primary-color)); - cursor: pointer; - } - } - - &-footer, - &-picker-footer { - margin-top: var(--margin-sm); - border-top: 1px solid rgb(var(--border-color)); - } - - &-ranges { - margin: 0; - padding: 0; - overflow: hidden; - list-style: none; - - > li { - text-align: center; - display: block; - } - } - - &-ok { - float: right; - } - - &-decade-panel { - .@{prefix-cls}-content { - tbody { - display: grid; - gap: 20px; - } - } - - .@{prefix-cls}-cell-inner { - width: 78px; - height: 24px; - } - } - - // ================== Year & Month Panel ================== - &-year-panel, - &-month-panel { - .@{prefix-cls}-content { - tbody { - display: grid; - gap: 20px; - } - } - .@{prefix-cls}-cell-inner { - width: 48px; - height: 24px; - } - } - - // ====================== Week Panel ====================== - &-week-panel { - &-row { - &:hover { - .@{prefix-cls}-cell { - background: red; - } - } - - &-selected { - .@{prefix-cls}-cell { - background: rgba(0, 0, 255, 0.3); - } - } - - &-range { - &-hover { - .@{prefix-cls}-cell { - background: rgba(0, 255, 0, 0.1); - } - } - - &-start, - &-end { - .@{prefix-cls}-cell { - background: rgba(0, 255, 0, 0.3); - } - } - } - } - - .@{prefix-cls}-cell, - .@{prefix-cls}-cell-inner { - width: @cell-size; - } - - .@{prefix-cls}-cell-week { - color: #999; - font-weight: bold; - font-size: 12px; - } - - .@{prefix-cls}-cell:hover > .@{prefix-cls}-cell-inner, - .@{prefix-cls}-cell-selected > .@{prefix-cls}-cell-inner { - background: transparent; - } - } - - // ====================== Date Panel ====================== - &-date-panel { - .@{prefix-cls}-cell-inner { - width: @cell-size; - height: @cell-size; - font-size: var(--font-size-xs); - } - } - - // ====================== Time Panel ====================== - &-time-panel { - width: auto; - - .@{prefix-cls}-content { - position: relative; - display: flex; - max-height: 200px; - - // &::after { - // position: absolute; - // top: @time-panel-padding-top; - // right: -5px; - // left: -5px; - // height: 20px; - // background: rgba(255, 0, 0, 0.05); - // content: ''; - // pointer-events: none; - // } - } - - // &-column-holder { - // display: flex; - // flex-direction: column; - // text-align: center; - // } - - &-column-title { - font-size: 14px; - line-height: @cell-size; - } - - &-column { - flex: auto; - width: 50px; - margin: 0; - // padding: 0 0 180px 0; - padding: @time-panel-padding-top 0 (@time-panel-padding-total - @time-panel-padding-top); - overflow-x: hidden; - overflow-y: hidden; - font-size: 12px; - text-align: left; - list-style: none; - transition: background 0.3s; - - &-active { - background: rgba(0, 0, 255, 0.1); - } - - &:hover { - overflow-y: auto; - } - - > li { - width: 50px; - margin: 0; - padding: 0; - cursor: pointer; - - &.@{prefix-cls}-time-panel-cell { - &-disabled { - opacity: 0.5; - } - - &-selected { - background: rgba(0, 0, 255, 0.5); - } - } - - .@{prefix-cls}-time-panel-cell-inner { - display: block; - width: 100%; - height: @cell-size; - margin: 0; - // padding: 0 0 0 12px; - color: #333; - line-height: @cell-size; - text-align: center; - - .@{prefix-cls}-panel-rtl & { - padding: 0 12px 0 0; - text-align: right; - } - } - } - } - } - - // ====================== Date Time ======================= - &-datetime-panel { - display: flex; - - .@{prefix-cls}-time-panel { - border-left: 1px solid #999; - } - - .@{prefix-cls}-date-panel, - .@{prefix-cls}-time-panel { - transition: opacity 0.3s; - } - - // Keyboard - &-active { - .@{prefix-cls}-date-panel, - .@{prefix-cls}-time-panel { - opacity: 0.3; - - &-active { - opacity: 1; - } - } - } - } - - // ======================== Input ========================= - &-input { - position: relative; - display: inline-flex; - width: 100%; - - .@{prefix-cls}-rtl & { - text-align: right; - } - - &-active { - > input { - background: rgba(0, 0, 255, 0.05); - } - } - - > input { - width: 100%; - padding-left: 12px; - border: none; - border-radius: var(--border-radius-base); - box-sizing: border-box; - .placeholder(); - &:focus { - outline: none; - } - } - - &-placeholder { - > input { - color: @input-placeholder-color; - } - } - } - - &-clear { - position: absolute; - top: 7px; - right: 8px; - cursor: pointer; - - .@{prefix-cls}-rtl & { - right: auto; - left: 4px; - } - - &-btn { - width: 16px; - height: 16px; - text-align: center; - line-height: 16px; - background-color: rgb(var(--grey-500)); - border-radius: 50%; - display: block; - - &::before { - content: '×'; - position: absolute; - top: -1px; - left: 0; - right: 0; - bottom: 0; - color: white; - font-size: 16px; - line-height: 16px; - } - } - } - - // ======================= Dropdown ======================= - &-dropdown { - position: absolute; - pointer-events: none; - - &-range { - padding: 10px 0; - } - - &-hidden { - display: none; - } - - // Panel - @arrow-size: 10px; - - &-placement-topLeft, - &-placement-topRight { - .@{prefix-cls}-range-arrow { - bottom: (@arrow-size / 2 + 1px); - transform: rotate(135deg); - } - } - &-placement-bottomLeft, - &-placement-bottomright { - .@{prefix-cls}-range-arrow { - top: (@arrow-size / 2 + 1px); - transform: rotate(-45deg); - } - } - - .@{prefix-cls}-range-arrow { - position: absolute; - left: @arrow-size; - z-index: 1; - width: @arrow-size; - height: @arrow-size; - margin-left: 10px; - transition: all 0.3s; - - .@{prefix-cls}-dropdown-rtl& { - right: @arrow-size; - left: auto; - margin-right: 10px; - margin-left: 0; - } - - &::before, - &::after { - position: absolute; - top: 50%; - left: 50%; - box-sizing: border-box; - transform: translate(-50%, -50%); - content: ''; - - .@{prefix-cls}-dropdown-rtl& { - right: 50%; - left: auto; - transform: translate(50%, -50%); - } - } - - &::before { - width: @arrow-size; - height: @arrow-size; - border: (@arrow-size / 2) solid blue; - border-color: blue blue transparent transparent; - } - &::after { - width: @arrow-size - 2px; - height: @arrow-size - 2px; - border: (@arrow-size - 2px) / 2 solid blue; - border-color: @background-color @background-color transparent transparent; - } - } - } - - // ======================================================== - // = Range Picker = - // ======================================================== - &-range { - position: relative; - display: inline-flex; - - &-wrapper { - display: flex; - } - - .@{prefix-cls}-active-bar { - bottom: 0; - height: 3px; - background: rgb(var(--primary-color)); - opacity: 0; - transition: all 0.3s; - pointer-events: none; - } - - &.@{prefix-cls}-focused { - .@{prefix-cls}-active-bar { - opacity: 1; - } - } - - &-separator { - height: 100%; - color: rgb(var(--text-color-tertiary)); - display: inline-flex; - align-items: center; - } - } - - &-panel-container { - display: inline-block; - vertical-align: top; - transition: margin 0.3s; - pointer-events: all; - } - - &-panel-layout { - padding: var(--padding-lg); - background: rgb(var(--bg-color-secondary)); - border: 1px solid rgb(var(--border-color)); - border-radius: var(--border-radius-lg); - box-shadow: var(--box-shadow-base); - display: flex; - flex-wrap: nowrap; - align-items: stretch; - overflow: hidden; - } - - // ======================================================== - // = Overflow = - // ======================================================== - &-selector { - width: 100%; - } - - &-selection-overflow { - display: flex; - flex-wrap: wrap; - box-sizing: border-box; - width: 100%; - border: 1px solid green; - - &-item { - flex: none; - max-width: 100%; - } - } - - &-selection-item { - border: 1px solid blue; - } - - &-multiple-input { - width: 10px; - opacity: 0.1; - } -} diff --git a/packages/design/src/components/dropdown-legacy/DropdownLegacy.tsx b/packages/design/src/components/dropdown-legacy/DropdownLegacy.tsx index fd8159634a..d6183d0b0e 100644 --- a/packages/design/src/components/dropdown-legacy/DropdownLegacy.tsx +++ b/packages/design/src/components/dropdown-legacy/DropdownLegacy.tsx @@ -16,11 +16,11 @@ import type { ActionType, AlignType } from '@rc-component/trigger'; import type Placements from 'rc-dropdown/lib/placements'; +import type { ReactElement } from 'react'; import RcDropdown from 'rc-dropdown'; -import React, { useContext } from 'react'; - +import { useContext } from 'react'; import { ConfigContext } from '../config-provider/ConfigProvider'; -import styles from './index.module.less'; +import styles from './index.module.css'; export interface IDropdownLegacyProps { /** Semantic DOM class */ @@ -29,7 +29,7 @@ export interface IDropdownLegacyProps { /** * The dropdown content */ - children: React.ReactElement; + children: ReactElement; /** * Whether the dropdown is visible diff --git a/packages/design/src/components/dropdown-legacy/index.module.css b/packages/design/src/components/dropdown-legacy/index.module.css new file mode 100644 index 0000000000..0d077ffeca --- /dev/null +++ b/packages/design/src/components/dropdown-legacy/index.module.css @@ -0,0 +1,122 @@ +.dropdown { + position: absolute; + z-index: 1070; + top: -9999px; + left: -9999px; + display: block; +} + +.dropdown-hidden { + display: none; +} + +.dropdown-slide-up-enter, +.dropdown-slide-up-appear { + transform-origin: 0 0; + display: block !important; + animation-duration: 0.15s; + animation-fill-mode: both; + opacity: 0; + animation-play-state: paused; + animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); +} + +.dropdown-slide-up-leave { + transform-origin: 0 0; + display: block !important; + animation-duration: 0.15s; + animation-fill-mode: both; + opacity: 1; + animation-play-state: paused; + animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); +} + +.dropdown-slide-up-enter.dropdown-slide-up-enter-active.dropdown-placement-bottomLeft, +.dropdown-slide-up-appear.dropdown-slide-up-appear-active.dropdown-placement-bottomLeft, +.dropdown-slide-up-enter.dropdown-slide-up-enter-active.dropdown-placement-bottomCenter, +.dropdown-slide-up-appear.dropdown-slide-up-appear-active.dropdown-placement-bottomCenter, +.dropdown-slide-up-enter.dropdown-slide-up-enter-active.dropdown-placement-bottomRight, +.dropdown-slide-up-appear.dropdown-slide-up-appear-active.dropdown-placement-bottomRight { + animation-name: dropdown-slide-up-in; + animation-play-state: running; +} + +.dropdown-slide-up-enter.dropdown-slide-up-enter-active.dropdown-placement-topLeft, +.dropdown-slide-up-appear.dropdown-slide-up-appear-active.dropdown-placement-topLeft, +.dropdown-slide-up-enter.dropdown-slide-up-enter-active.dropdown-placement-topCenter, +.dropdown-slide-up-appear.dropdown-slide-up-appear-active.dropdown-placement-topCenter, +.dropdown-slide-up-enter.dropdown-slide-up-enter-active.dropdown-placement-topRight, +.dropdown-slide-up-appear.dropdown-slide-up-appear-active.dropdown-placement-topRight { + animation-name: dropdown-slide-down-in; + animation-play-state: running; +} + +.dropdown-slide-up-leave.dropdown-slide-up-leave-active.dropdown-placement-bottomLeft, +.dropdown-slide-up-leave.dropdown-slide-up-leave-active.dropdown-placement-bottomCenter, +.dropdown-slide-up-leave.dropdown-slide-up-leave-active.dropdown-placement-bottomRight { + animation-name: dropdown-slide-up-out; + animation-play-state: running; +} + +.dropdown-slide-up-leave.dropdown-slide-up-leave-active.dropdown-placement-topLeft, +.dropdown-slide-up-leave.dropdown-slide-up-leave-active.dropdown-placement-topCenter, +.dropdown-slide-up-leave.dropdown-slide-up-leave-active.dropdown-placement-topRight { + animation-name: dropdown-slide-down-out; + animation-play-state: running; +} + +@keyframes dropdown-slide-up-in { + 0% { + transform-origin: 0% 0%; + transform: scaleY(0); + opacity: 0; + } + + 100% { + transform-origin: 0% 0%; + transform: scaleY(1); + opacity: 1; + } +} + +@keyframes dropdown-slide-up-out { + 0% { + transform-origin: 0% 0%; + transform: scaleY(1); + opacity: 1; + } + + 100% { + transform-origin: 0% 0%; + transform: scaleY(0); + opacity: 0; + } +} + +@keyframes dropdown-slide-down-in { + 0% { + transform-origin: 0% 100%; + transform: scaleY(0); + opacity: 0; + } + + 100% { + transform-origin: 0% 100%; + transform: scaleY(1); + opacity: 1; + } +} + +@keyframes dropdown-slide-down-out { + 0% { + transform-origin: 0% 100%; + transform: scaleY(1); + opacity: 1; + } + + 100% { + transform-origin: 0% 100%; + transform: scaleY(0); + opacity: 0; + } +} diff --git a/packages/design/src/components/dropdown-legacy/index.module.less b/packages/design/src/components/dropdown-legacy/index.module.less deleted file mode 100644 index 83fdb95d86..0000000000 --- a/packages/design/src/components/dropdown-legacy/index.module.less +++ /dev/null @@ -1,126 +0,0 @@ -.dropdown { - position: absolute; - z-index: 1070; - top: -9999px; - left: -9999px; - - display: block; - - &-hidden { - display: none; - } - - .effect() { - transform-origin: 0 0; - display: block !important; - animation-duration: 0.15s; - animation-fill-mode: both; - } - - &-slide-up-enter, - &-slide-up-appear { - .effect(); - - opacity: 0; - animation-play-state: paused; - animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); - } - - &-slide-up-leave { - .effect(); - - opacity: 1; - animation-play-state: paused; - animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); - } - - &-slide-up-enter&-slide-up-enter-active&-placement-bottomLeft, - &-slide-up-appear&-slide-up-appear-active&-placement-bottomLeft, - &-slide-up-enter&-slide-up-enter-active&-placement-bottomCenter, - &-slide-up-appear&-slide-up-appear-active&-placement-bottomCenter, - &-slide-up-enter&-slide-up-enter-active&-placement-bottomRight, - &-slide-up-appear&-slide-up-appear-active&-placement-bottomRight { - animation-name: dropdown-slide-up-in; - animation-play-state: running; - } - - &-slide-up-enter&-slide-up-enter-active&-placement-topLeft, - &-slide-up-appear&-slide-up-appear-active&-placement-topLeft, - &-slide-up-enter&-slide-up-enter-active&-placement-topCenter, - &-slide-up-appear&-slide-up-appear-active&-placement-topCenter, - &-slide-up-enter&-slide-up-enter-active&-placement-topRight, - &-slide-up-appear&-slide-up-appear-active&-placement-topRight { - animation-name: dropdown-slide-down-in; - animation-play-state: running; - } - - &-slide-up-leave&-slide-up-leave-active&-placement-bottomLeft, - &-slide-up-leave&-slide-up-leave-active&-placement-bottomCenter, - &-slide-up-leave&-slide-up-leave-active&-placement-bottomRight { - animation-name: dropdown-slide-up-out; - animation-play-state: running; - } - - &-slide-up-leave&-slide-up-leave-active&-placement-topLeft, - &-slide-up-leave&-slide-up-leave-active&-placement-topCenter, - &-slide-up-leave&-slide-up-leave-active&-placement-topRight { - animation-name: dropdown-slide-down-out; - animation-play-state: running; - } - - @keyframes dropdown-slide-up-in { - 0% { - transform-origin: 0% 0%; - transform: scaleY(0); - opacity: 0; - } - - 100% { - transform-origin: 0% 0%; - transform: scaleY(1); - opacity: 1; - } - } - - @keyframes dropdown-slide-up-out { - 0% { - transform-origin: 0% 0%; - transform: scaleY(1); - opacity: 1; - } - - 100% { - transform-origin: 0% 0%; - transform: scaleY(0); - opacity: 0; - } - } - - @keyframes dropdown-slide-down-in { - 0% { - transform-origin: 0% 100%; - transform: scaleY(0); - opacity: 0; - } - - 100% { - transform-origin: 0% 100%; - transform: scaleY(1); - opacity: 1; - } - } - - @keyframes dropdown-slide-down-out { - 0% { - transform-origin: 0% 100%; - transform: scaleY(1); - opacity: 1; - } - - 100% { - transform-origin: 0% 100%; - transform: scaleY(0); - opacity: 0; - } - } -} diff --git a/packages/design/src/components/form-layout/FormLayout.tsx b/packages/design/src/components/form-layout/FormLayout.tsx index 7103c105da..69f908d65b 100644 --- a/packages/design/src/components/form-layout/FormLayout.tsx +++ b/packages/design/src/components/form-layout/FormLayout.tsx @@ -14,21 +14,19 @@ * limitations under the License. */ -import type { PropsWithChildren } from 'react'; +import type { CSSProperties, PropsWithChildren, ReactNode } from 'react'; import { MoreUpSingle } from '@univerjs/icons'; -import React, { createContext, useContext, useState } from 'react'; +import { createContext, useState } from 'react'; import { clsx } from '../../helper/clsx'; -import styles from './index.module.less'; - export interface IFormLayoutProps { - label?: React.ReactNode; - desc?: React.ReactNode; - children?: React.ReactNode; + label?: ReactNode; + desc?: ReactNode; + children?: ReactNode; - style?: React.CSSProperties; + style?: CSSProperties; className?: string; - contentStyle?: React.CSSProperties; + contentStyle?: CSSProperties; error?: string; collapsable?: boolean; defaultCollapsed?: boolean; @@ -39,22 +37,27 @@ const FormLayoutContext = createContext(false); export const FormLayout = (props: IFormLayoutProps) => { const { label, desc, children, style, className, error, contentStyle, collapsable = false, defaultCollapsed = false } = props; const [collapsed, setCollapsed] = useState(defaultCollapsed); - const isInner = useContext(FormLayoutContext); return ( -
+
{label && ( -
setCollapsed(!collapsed)}> +
setCollapsed(!collapsed)} + > {label} {collapsable ? ( ) : null} @@ -64,14 +67,24 @@ export const FormLayout = (props: IFormLayoutProps) => { ? null : ( <> - {desc &&
{desc}
} + {desc &&
{desc}
} {children ? ( -
+
{children} {error ? ( -
+
{error}
) @@ -94,7 +107,13 @@ export type IFormDualColumnLayoutProps = PropsWithChildren; */ export const FormDualColumnLayout = (props: IFormDualColumnLayoutProps) => { return ( -
+
{props.children}
); diff --git a/packages/design/src/components/form-layout/index.module.less b/packages/design/src/components/form-layout/index.module.less deleted file mode 100644 index ea071574c6..0000000000 --- a/packages/design/src/components/form-layout/index.module.less +++ /dev/null @@ -1,65 +0,0 @@ -.form-layout { - display: flex; - flex-direction: column; - margin-bottom: var(--margin-sm); - - &-label { - font-size: var(--font-size-sm); - min-height: var(--font-size-sm); - color: rgba(var(--color-black)); - margin-bottom: var(--margin-xs); - display: flex; - align-items: center; - } - - &-desc { - margin-top: var(--margin-xxs); - font-size: var(--font-size-xs); - color: rgba(var(--grey-500)); - } - - &-content { - .input-affix-wrapper { - width: 100%; - } - - .select { - width: 100%; - } - - .range-selector { - width: 100% !important; - } - - :last-child { - margin-bottom: 0; - } - } - - &-content-error { - .input-affix-wrapper { - border: 1px solid rgba(var(--red-400)); - } - - .select-single:not(.select-customize-input) .select-selector { - border: 1px solid rgba(var(--red-400)); - } - } - - &-error { - color: rgba(var(--red-400)); - font-size: var(--font-size-xxs); - margin-top: var(--margin-xxs); - } -} - -.form-dual-column-layout { - display: flex; - justify-content: space-between; - - .form-layout { - flex-grow: 1; - flex-shrink: 1; - max-width: calc(50% - 8px); - } -} diff --git a/packages/design/src/components/input/Input.tsx b/packages/design/src/components/input/Input.tsx index 3b48817203..d29d77e1ee 100644 --- a/packages/design/src/components/input/Input.tsx +++ b/packages/design/src/components/input/Input.tsx @@ -118,6 +118,7 @@ export const Input = forwardRef( return (
span { - width: 100%; - } - } - - &-slot { - position: absolute; - top: 0; - right: 8px; - - display: inline-flex; - - height: 100%; - } -} diff --git a/packages/design/src/components/menu/Menu.tsx b/packages/design/src/components/menu/Menu.tsx index 46426db705..c9beb58cd5 100644 --- a/packages/design/src/components/menu/Menu.tsx +++ b/packages/design/src/components/menu/Menu.tsx @@ -20,7 +20,7 @@ import React, { useContext } from 'react'; import { clsx } from '../../helper/clsx'; import { ConfigContext } from '../config-provider/ConfigProvider'; import { Tooltip } from '../tooltip'; -import styles from './index.module.less'; +import styles from './index.module.css'; /** @deprecated */ export const Menu = React.forwardRef((props, ref) => { @@ -76,16 +76,16 @@ export function TinyMenuGroup({ items }: ITinyMenuGroupProps) { const ele = (
item.onClick()} className={` - univer-flex univer-h-6 univer-w-6 univer-cursor-pointer univer-items-center - univer-justify-center univer-rounded-md - hover:univer-bg-[#EEEFF1] - ${item.active ? 'univer-bg-[#EEEFF1]' : ''} + univer-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center + univer-rounded-md + hover:univer-bg-gray-50 + ${item.active ? 'univer-bg-gray-50' : ''} ${item.className} `} + onClick={() => item.onClick()} > - +
); return item.tooltip diff --git a/packages/design/src/components/menu/index.module.css b/packages/design/src/components/menu/index.module.css new file mode 100644 index 0000000000..7e02a211db --- /dev/null +++ b/packages/design/src/components/menu/index.module.css @@ -0,0 +1,304 @@ +.menu { + @apply univer-m-0 univer-py-1 univer-px-2 univer-text-sm univer-list-none univer-rounded-md univer-box-border univer-shadow-md univer-border-solid univer-border univer-border-gray-200 univer-min-w-52 univer-max-w-52 univer-bg-white; +} + +.menu-vertical { + display: grid; +} + +.menu-hidden, +.menu-submenu-hidden { + display: none; +} + +.menu-item-group { + @apply univer-py-1; +} + +.menu-item-group:not(:last-child) { + border-bottom: 1px solid #e3e5ea; +} + +.menu-item-group-list { + display: grid; + margin: 0; + padding: 0; + @apply univer-gap-1; +} + +.menu-item-group-title { + font-weight: 600; + line-height: 1.5em; + padding: 4px; + padding-top: 6px; + @apply univer-text-gray-600 univer-text-xs univer-px-2; +} + +.menu-item-group-title:empty { + display: none; +} + +.menu-item-active, +.menu-submenu-active { + @apply univer-bg-gray-50 univer-rounded-md; +} + +.menu-item-selected { + transform: translateZ(0); + @apply univer-bg-gray-50 univer-rounded-md; +} + +.menu-submenu-selected { + @apply univer-bg-gray-50 univer-rounded-md; +} + +.menu > li.menu-submenu { + padding: 0; +} + +.menu-horizontal-sub, +.menu-vertical-sub, +.menu-vertical-left-sub, +.menu-vertical-right-sub { + min-width: 160px; + margin-top: 0; +} + +.menu-item { + display: flex; + align-items: center; + min-height: 32px; + line-height: 1.5em; + @apply univer-rounded-md univer-text-sm univer-text-gray-900 univer-px-2 univer-gap-3; +} + +.menu-item:hover { + @apply univer-bg-gray-50; +} + +.menu-item .icon { + @apply univer-text-gray-600; +} + +.menu-item, +.menu-submenu { + cursor: pointer; + position: relative; + box-sizing: border-box; + margin: 0; + white-space: nowrap; + list-style: none; +} + +.menu-item.menu-item-disabled, +.menu-submenu.menu-submenu-disabled { + cursor: not-allowed; + @apply !univer-text-gray-400; +} + +.menu-submenu-popup { + position: absolute; + z-index: 1070; +} + +.menu-submenu-popup .submenu-title-wrapper { + @apply univer-pr-5; +} + +.menu-submenu-title { + display: flex; + align-items: center; + justify-content: space-between; + height: 100%; + min-height: 32px; + line-height: 1.5em; + @apply univer-text-gray-900 univer-text-sm univer-px-2; +} + +.menu-submenu-title-more-icon, +.menu-item-more-icon { + @apply univer-text-gray-400 univer-text-sm univer-ml-2; +} + +.menu-horizontal { + overflow: hidden; + white-space: nowrap; + border: none; + border-bottom: 1px solid #e3e5ea; + box-shadow: none; +} + +.menu-horizontal > .menu-item, +.menu-horizontal > .menu-submenu > .menu-submenu-title { + padding: 15px 20px; +} + +.menu-horizontal > .menu-submenu, +.menu-horizontal > .menu-item { + display: inline-block; + vertical-align: bottom; + border-bottom: 2px solid transparent; +} + +.menu-vertical, +.menu-vertical-left, +.menu-vertical-right, +.menu-inline { + width: 100%; +} + +.menu-vertical > .menu-item, +.menu-vertical > .menu-submenu > .menu-submenu-title, +.menu-vertical-left > .menu-item, +.menu-vertical-left > .menu-submenu > .menu-submenu-title, +.menu-vertical-right > .menu-item, +.menu-vertical-right > .menu-submenu > .menu-submenu-title, +.menu-inline > .menu-item, +.menu-inline > .menu-submenu > .menu-submenu-title { + display: flex; + align-items: center; + justify-content: space-between; + box-sizing: border-box; + width: 100%; + min-height: 28px; + @apply univer-p-1; +} + +.menu-vertical .menu-submenu-arrow, +.menu-vertical-left .menu-submenu-arrow, +.menu-vertical-right .menu-submenu-arrow, +.menu-inline .menu-submenu-arrow { + position: absolute; + right: 16px; + display: inline-block; + font-size: inherit; + line-height: 1.5em; + text-align: center; + text-transform: none; + text-rendering: auto; + vertical-align: baseline; +} + +.menu-sub-inline { + padding: 0; + border: none; + border-radius: 0; + box-shadow: none; +} + +.menu-sub-inline > .menu-item, +.menu-sub-inline > .menu-submenu > .menu-submenu-title { + padding-top: 8px; + padding-right: 0; + padding-bottom: 8px; +} + +.menu-open-slide-up-enter, +.menu-open-slide-up-appear { + opacity: 0; + animation-play-state: paused; + animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); + transform-origin: 0 0; + animation-duration: 0.3s; + animation-fill-mode: both; +} + +.menu-open-slide-up-leave { + opacity: 1; + animation-play-state: paused; + animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); + transform-origin: 0 0; + animation-duration: 0.3s; + animation-fill-mode: both; +} + +.menu-open-slide-up-enter.menu-open-slide-up-enter-active, +.menu-open-slide-up-appear.menu-open-slide-up-appear-active { + animation-name: menu-open-slide-up-in; + animation-play-state: running; +} + +.menu-open-slide-up-leave.menu-open-slide-up-leave-active { + animation-name: menu-open-slide-up-out; + animation-play-state: running; +} + +@keyframes menu-open-slide-up-in { + 0% { + transform-origin: 0% 0%; + transform: scaleY(0); + opacity: 0; + } + + 100% { + transform-origin: 0% 0%; + transform: scaleY(1); + opacity: 1; + } +} + +@keyframes menu-open-slide-up-out { + 0% { + transform-origin: 0% 0%; + transform: scaleY(1); + opacity: 1; + } + + 100% { + transform-origin: 0% 0%; + transform: scaleY(0); + opacity: 0; + } +} + +.menu-open-zoom-enter, +.menu-open-zoom-appear { + opacity: 0; + animation-play-state: paused; + animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); + transform-origin: 0 0; + animation-duration: 0.3s; + animation-fill-mode: both; +} + +.menu-open-zoom-leave { + animation-play-state: paused; + animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); + transform-origin: 0 0; + animation-duration: 0.3s; + animation-fill-mode: both; +} + +.menu-open-zoom-enter.menu-open-zoom-enter-active, +.menu-open-zoom-appear.menu-open-zoom-appear-active { + animation-name: menu-open-zoom-in; + animation-play-state: running; +} + +.menu-open-zoom-leave.menu-open-zoom-leave-active { + animation-name: menu-open-zoom-out; + animation-play-state: running; +} + +@keyframes menu-open-zoom-in { + 0% { + transform: scale(0, 0); + opacity: 0; + } + + 100% { + transform: scale(1, 1); + opacity: 1; + } +} + +@keyframes menu-open-zoom-out { + 0% { + transform: scale(1, 1); + } + + 100% { + transform: scale(0, 0); + opacity: 0; + } +} diff --git a/packages/design/src/components/menu/index.module.less b/packages/design/src/components/menu/index.module.less deleted file mode 100644 index 0da3988e28..0000000000 --- a/packages/design/src/components/menu/index.module.less +++ /dev/null @@ -1,334 +0,0 @@ -.menu { - box-sizing: border-box; - margin: 0; - padding: var(--padding-xs) var(--padding-sm); - - font-size: var(--font-size-xs); - list-style: none; - - background-color: rgb(var(--bg-color-secondary)); - border-radius: var(--border-radius-xl); - outline: none; - box-shadow: var(--box-shadow-lg); - border: 1px solid rgb(var(--border-color)); - min-width: 212px; - - &-vertical { - display: grid; - } - - &-hidden, - &-submenu-hidden { - display: none; - } - - &-item { - &-group { - padding: var(--padding-xs) 0; - - &:not(:last-child) { - border-bottom: 1px solid rgb(var(--border-color)); - } - } - } - - &-item-group-list { - display: grid; - gap: var(--margin-xxs); - margin: 0; - padding: 0; - } - - &-item-group-title { - padding: 0 var(--padding-sm); - color: rgb(var(--grey-500)); - font-size: var(--font-size-xxs); - font-weight: 600; - line-height: 1.5em; - padding: 4px; - padding-top: 6px; - } - - &-item-group-title:empty { - display: none; - } - - &-item-active, - &-submenu-active { - background-color: rgb(var(--bg-color-hover-light)); - border-radius: var(--border-radius-lg); - } - - &-item-selected { - // fix chrome render bug - transform: translateZ(0); - background-color: rgb(var(--bg-color-hover-light)); - border-radius: var(--border-radius-lg); - } - - &-submenu-selected { - background-color: rgb(var(--bg-color-hover-light)); - border-radius: var(--border-radius-lg); - } - - & > li&-submenu { - padding: 0; - } - - &-horizontal&-sub, - &-vertical&-sub, - &-vertical-left&-sub, - &-vertical-right&-sub { - min-width: 160px; - margin-top: 0; - } - - &-item { - display: flex; - gap: var(--margin-sm); - align-items: center; - padding: 0 var(--padding-sm); - min-height: 32px; - color: rgb(var(--text-color)); - font-size: var(--font-size-sm); - line-height: 1.5em; - border-radius: var(--border-radius-lg); - - &:hover { - background-color: rgb(var(--bg-color-hover-light)); - } - - .icon { - color: rgb(var(--text-color-secondary)); - } - } - - &-item, - &-submenu { - cursor: pointer; - position: relative; - box-sizing: border-box; - margin: 0; - white-space: nowrap; - list-style: none; - - // Disabled state sets text to gray and nukes hover/tab effects - &.menu-item-disabled, - &.menu-submenu-disabled { - color: rgb(var(--text-color-tertiary)) !important; - cursor: not-allowed; - } - } - - &-submenu { - &-popup { - position: absolute; - z-index: 1070; - - .submenu-title-wrapper { - padding-right: var(--padding-xl); - } - } - - &-title { - display: flex; - align-items: center; - justify-content: space-between; - height: 100%; - padding: 0 var(--padding-sm); - min-height: 32px; - color: rgb(var(--text-color)); - font-size: var(--font-size-sm); - line-height: 1.5em; - } - } - - .menu-submenu-title, - .menu-item { - &-more-icon { - margin-left: var(--margin-xs); - font-size: var(--font-size-sm); - color: rgb(var(--text-color-secondary)); - } - } - - &-horizontal { - overflow: hidden; - - white-space: nowrap; - - border: none; - border-bottom: 1px solid rgb(var(--border-color)); - box-shadow: none; - - & > .menu-item, - & > .menu-submenu > .menu-submenu-title { - padding: 15px 20px; - } - - & > .menu-submenu, - & > .menu-item { - display: inline-block; - vertical-align: bottom; - border-bottom: 2px solid transparent; - } - } - - &-vertical, - &-vertical-left, - &-vertical-right, - &-inline { - & > .menu-item, - & > .menu-submenu > .menu-submenu-title { - display: flex; - align-items: center; - justify-content: space-between; - - box-sizing: border-box; - width: 100%; - min-height: 28px; - padding: var(--padding-xs); - } - - .menu-submenu-arrow { - position: absolute; - right: 16px; - - display: inline-block; - - font-size: inherit; - line-height: 1.5em; - text-align: center; - text-transform: none; - text-rendering: auto; - vertical-align: baseline; - } - } - - &-sub&-inline { - padding: 0; - border: none; - border-radius: 0; - box-shadow: none; - - & > .menu-item, - & > .menu-submenu > .menu-submenu-title { - padding-top: 8px; - padding-right: 0; - padding-bottom: 8px; - } - } - - .effect() { - transform-origin: 0 0; - animation-duration: 0.3s; - animation-fill-mode: both; - } - - &-open { - &-slide-up-enter, - &-slide-up-appear { - .effect(); - - opacity: 0; - animation-play-state: paused; - animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); - } - - &-slide-up-leave { - .effect(); - - opacity: 1; - animation-play-state: paused; - animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); - } - - &-slide-up-enter&-slide-up-enter-active, - &-slide-up-appear&-slide-up-appear-active { - animation-name: menu-open-slide-up-in; - animation-play-state: running; - } - - &-slide-up-leave&-slide-up-leave-active { - animation-name: menu-open-slide-up-out; - animation-play-state: running; - } - - @keyframes menu-open-slide-up-in { - 0% { - transform-origin: 0% 0%; - transform: scaleY(0); - opacity: 0; - } - - 100% { - transform-origin: 0% 0%; - transform: scaleY(1); - opacity: 1; - } - } - - @keyframes menu-open-slide-up-out { - 0% { - transform-origin: 0% 0%; - transform: scaleY(1); - opacity: 1; - } - - 100% { - transform-origin: 0% 0%; - transform: scaleY(0); - opacity: 0; - } - } - - &-zoom-enter, - &-zoom-appear { - opacity: 0; - animation-play-state: paused; - animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); - .effect(); - } - - &-zoom-leave { - .effect(); - - animation-play-state: paused; - animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); - } - - &-zoom-enter&-zoom-enter-active, - &-zoom-appear&-zoom-appear-active { - animation-name: menu-open-zoom-in; - animation-play-state: running; - } - - &-zoom-leave&-zoom-leave-active { - animation-name: menu-open-zoom-out; - animation-play-state: running; - } - - @keyframes menu-open-zoom-in { - 0% { - transform: scale(0, 0); - opacity: 0; - } - - 100% { - transform: scale(1, 1); - opacity: 1; - } - } - - @keyframes menu-open-zoom-out { - 0% { - transform: scale(1, 1); - } - - 100% { - transform: scale(0, 0); - opacity: 0; - } - } - } -} diff --git a/packages/design/src/components/popup/Popup.tsx b/packages/design/src/components/popup/Popup.tsx index a332d5669c..f2adb2261c 100644 --- a/packages/design/src/components/popup/Popup.tsx +++ b/packages/design/src/components/popup/Popup.tsx @@ -14,15 +14,15 @@ * limitations under the License. */ -import React, { useContext, useEffect, useRef, useState } from 'react'; +import type { ReactElement } from 'react'; +import { useContext, useEffect, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; import { CSSTransition } from 'react-transition-group'; - import { ConfigContext } from '../config-provider/ConfigProvider'; -import styles from './index.module.less'; +import styles from './index.module.css'; export interface IPopupProps { - children: React.ReactElement; + children: ReactElement; /** * whether popup is visible diff --git a/packages/design/src/components/popup/index.module.css b/packages/design/src/components/popup/index.module.css new file mode 100644 index 0000000000..7c1eac78e7 --- /dev/null +++ b/packages/design/src/components/popup/index.module.css @@ -0,0 +1,74 @@ +.popup { + position: fixed; + z-index: 1070; + top: -9999px; + left: -9999px; + border-radius: 6px; + overflow: hidden; + @apply univer-shadow; +} + +.popup-enter { + transform-origin: 0 0; + animation-duration: 0.15s; + animation-fill-mode: both; + opacity: 0; + animation-play-state: paused; + animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); +} + +.popup-enter-active { + animation-name: popup-slide-up-in; + animation-play-state: running; +} + +.popup-exit { + transform-origin: 0 0; + animation-duration: 0.15s; + animation-fill-mode: both; + opacity: 1; + animation-name: popup-slide-up-out; + animation-play-state: running; + animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); +} + +.popup-exit-active { + display: none; +} + +@keyframes popup-slide-up-in { + 0% { + transform-origin: 0 0; + transform: scaleY(0); + opacity: 0; + } + + 100% { + transform-origin: 0 0; + transform: scaleY(1); + opacity: 1; + } +} + +@keyframes popup-slide-up-out { + 0% { + transform-origin: 0 0; + transform: scaleY(1); + opacity: 1; + } + + 100% { + transform-origin: 0 0; + transform: scaleY(0); + opacity: 0; + } +} + +.popup-mask { + position: fixed; + z-index: 1060; + top: 0; + left: 0; + right: 0; + bottom: 0; +} diff --git a/packages/design/src/components/popup/index.module.less b/packages/design/src/components/popup/index.module.less deleted file mode 100644 index 110368cd06..0000000000 --- a/packages/design/src/components/popup/index.module.less +++ /dev/null @@ -1,79 +0,0 @@ -.popup { - position: fixed; - z-index: 1070; - top: -9999px; - left: -9999px; - // background-color: rgb(var(--bg-color-secondary)); - border-radius: 6px; - overflow: hidden; - box-shadow: var(--box-shadow-base); - - &-enter { - .effect(); - - opacity: 0; - animation-play-state: paused; - animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); - } - - &-enter-active { - animation-name: popup-slide-up-in; - animation-play-state: running; - } - - &-exit { - .effect(); - - opacity: 1; - animation-name: popup-slide-up-out; - animation-play-state: running; - animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); - } - - &-exit-active { - display: none; - } - - .effect() { - transform-origin: 0 0; - animation-duration: 0.15s; - animation-fill-mode: both; - } - - @keyframes popup-slide-up-in { - 0% { - transform-origin: 0 0; - transform: scaleY(0); - opacity: 0; - } - - 100% { - transform-origin: 0 0; - transform: scaleY(1); - opacity: 1; - } - } - - @keyframes popup-slide-up-out { - 0% { - transform-origin: 0 0; - transform: scaleY(1); - opacity: 1; - } - - 100% { - transform-origin: 0 0; - transform: scaleY(0); - opacity: 0; - } - } -} - -.popup-mask { - position: fixed; - z-index: 1060; - top: 0; - left: 0; - right: 0; - bottom: 0; -} diff --git a/packages/design/src/components/segmented/index.module.less b/packages/design/src/components/segmented/index.module.less deleted file mode 100644 index 82d82d0f4d..0000000000 --- a/packages/design/src/components/segmented/index.module.less +++ /dev/null @@ -1,115 +0,0 @@ -@segmented-prefix-cls: segmented; - -.segmented-disabled-item() { - &, - &:hover, - &:focus { - color: fade(#000, 25%); - cursor: not-allowed; - } -} - -.segmented-item-selected() { - background-color: white; - box-shadow: 0px 4px 16px 0px rgba(var(--color-black), 0.08); -} - -.@{segmented-prefix-cls} { - display: inline-flex; - padding: 2px; - height: 32px; - width: 100%; - border-radius: 6px; - background-color: rgb(var(--grey-50)); - box-sizing: border-box; - - &-group { - position: relative; - display: flex; - align-items: stretch; - justify-items: flex-start; - - width: 100%; - border-radius: 2px; - } - - &-item { - position: relative; - height: 100%; - padding: 4px 10px; - border-radius: 4px; - height: 100%; - flex: 1; - flex-grow: 1; - flex-shrink: 1; - box-sizing: border-box; - - color: rgba(var(--color-black)); - text-align: center; - overflow: hidden; - text-overflow: ellipsis; - cursor: pointer; - font-size: 13px; - - &-selected { - .segmented-item-selected(); - color: rgba(var(--color-black)); - } - - &:hover, - &:focus { - color: rgba(var(--color-black)); - } - - &-disabled { - .segmented-disabled-item(); - } - - &-label { - z-index: 2; - line-height: 20px; - } - - &-input { - position: absolute; - top: 0; - left: 0; - - width: 0; - height: 0; - opacity: 0; - pointer-events: none; - } - } - - // disabled styles - &-disabled &-item, - &-disabled &-item:hover, - &-disabled &-item:focus { - .segmented-disabled-item(); - } - - &-thumb { - .segmented-item-selected(); - - position: absolute; - box-sizing: border-box; - width: 0; - height: 100%; - border-radius: 4px; - padding: 4px 0; - } - - // transition effect when `enter-active` - &-thumb-motion-appear-active, - &-thumb-motion-enter-active { - transition: - transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), - width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); - will-change: transform, width; - } - - &-rtl { - direction: rtl; - } -} diff --git a/packages/design/src/components/select/LegacySelect.tsx b/packages/design/src/components/select/LegacySelect.tsx index 1b35d3be15..a0d1b3a14c 100644 --- a/packages/design/src/components/select/LegacySelect.tsx +++ b/packages/design/src/components/select/LegacySelect.tsx @@ -21,7 +21,7 @@ import RcSelect from 'rc-select'; import { useContext } from 'react'; import { clsx } from '../../helper/clsx'; import { ConfigContext } from '../config-provider/ConfigProvider'; -import styles from './index.module.less'; +import styles from './index.module.css'; /** @deprecated */ interface ILegacyOption { diff --git a/packages/design/src/components/select/Select.tsx b/packages/design/src/components/select/Select.tsx index 07cd37a3f0..2fd218efb0 100644 --- a/packages/design/src/components/select/Select.tsx +++ b/packages/design/src/components/select/Select.tsx @@ -154,6 +154,7 @@ export function Select(props: ISelectProps) { onOpenChange={handleOpenChange} >
>> Group - &-group { - // font-size: 80%; - // font-weight: bold; - // color: #999; - padding: 0; - - &:not(:first-child) { - border-top: 1px solid rgb(var(--border-color)); - } - } - - // >>> Option - &-option { - position: relative; - transition: all 0.15s; - - &-grouped { - // padding-left: 24px; - } - - .@{select-prefix}-item-option-state { - pointer-events: none; - position: absolute; - top: 4px; - right: 0; - } - - // ------- Active ------- - &-active { - background: #ddd; - } - - // ------ Disabled ------ - &-disabled { - color: rgb(var(--text-color-tertiary)); - } - } - - // >>> Empty - &-empty { - padding: var(--padding-xs) 0; - color: rgb(var(--text-color-tertiary)); - font-size: var(--font-size-sm); - text-align: center; - } - } -} - -.@{select-prefix}-selection__choice-zoom { - transition: all 0.3s; -} - -.@{select-prefix}-selection__choice-zoom-appear { - transform: scale(0.5); - opacity: 0; - - &&-active { - transform: scale(1); - opacity: 1; - } -} -.@{select-prefix}-selection__choice-zoom-leave { - transform: scale(1); - opacity: 1; - - &&-active { - transform: scale(0.5); - opacity: 0; - } -} - -.effect() { - transform-origin: 0 0; - animation-duration: 0.3s; - animation-fill-mode: both; -} - -.@{select-prefix}-dropdown { - &-slide-up-enter, - &-slide-up-appear { - .effect(); - - opacity: 0; - animation-play-state: paused; - animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); - } - - &-slide-up-leave { - .effect(); - - opacity: 1; - animation-play-state: paused; - animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); - } - - &-slide-up-enter&-slide-up-enter-active&-placement-bottomLeft, - &-slide-up-appear&-slide-up-appear-active&-placement-bottomLeft, - &-slide-up-enter&-slide-up-enter-active&-placement-bottomRight, - &-slide-up-appear&-slide-up-appear-active&-placement-bottomRight { - animation-name: select-dropdown-slide-up-in; - animation-play-state: running; - } - - &-slide-up-leave&-slide-up-leave-active&-placement-bottomLeft, - &-slide-up-leave&-slide-up-leave-active&-placement-bottomRight { - animation-name: select-dropdown-slide-up-out; - animation-play-state: running; - } - - &-slide-up-enter&-slide-up-enter-active&-placement-topLeft, - &-slide-up-appear&-slide-up-appear-active&-placement-topLeft, - &-slide-up-enter&-slide-up-enter-active&-placement-topRight, - &-slide-up-appear&-slide-up-appear-active&-placement-topRight { - animation-name: select-dropdown-slide-down-in; - animation-play-state: running; - } - - &-slide-up-leave&-slide-up-leave-active&-placement-topLeft, - &-slide-up-leave&-slide-up-leave-active&-placement-topRight { - animation-name: select-dropdown-slide-down-out; - animation-play-state: running; - } -} - -@keyframes select-dropdown-slide-up-in { - 0% { - transform-origin: 0% 0%; - transform: scaleY(0); - opacity: 0; - } - - 100% { - transform-origin: 0% 0%; - transform: scaleY(1); - opacity: 1; - } -} - -@keyframes select-dropdown-slide-up-out { - 0% { - transform-origin: 0% 0%; - transform: scaleY(1); - opacity: 1; - } - - 100% { - transform-origin: 0% 0%; - transform: scaleY(0); - opacity: 0; - } -} - -@keyframes select-dropdown-slide-down-in { - 0% { - transform-origin: 100% 100%; - transform: scaleY(0); - opacity: 0; - } - - 100% { - transform-origin: 100% 100%; - transform: scaleY(1); - opacity: 1; - } -} - -@keyframes select-dropdown-slide-down-out { - 0% { - transform-origin: 100% 100%; - transform: scaleY(1); - opacity: 1; - } - - 100% { - transform-origin: 100% 100%; - transform: scaleY(0); - opacity: 0; - } -} - -@keyframes select-loading-icon { - 0% { - transform: rotate(0); - } - - 100% { - transform: rotate(360deg); - } -} diff --git a/packages/design/src/components/tree/Tree.tsx b/packages/design/src/components/tree/Tree.tsx index 5720b3fe62..2b8523d62d 100644 --- a/packages/design/src/components/tree/Tree.tsx +++ b/packages/design/src/components/tree/Tree.tsx @@ -14,13 +14,14 @@ * limitations under the License. */ +import type { CSSProperties, ReactNode } from 'react'; import { DropdownSingle } from '@univerjs/icons'; import VirtualList from 'rc-virtual-list'; -import React, { useEffect, useMemo, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import { clsx } from '../../helper/clsx'; import { Checkbox } from '../checkbox'; import { Tooltip } from '../tooltip'; -import styles from './index.module.less'; +import styles from './index.module.css'; import { createCacheWithFindNodePathFromTree, isIntermediated } from './util'; export enum TreeSelectionMode { @@ -58,11 +59,11 @@ export interface ITreeProps { itemHeight?: number; - attachRender?: (node: ITreeItemProps) => React.ReactNode; + attachRender?: (node: ITreeItemProps) => ReactNode; treeNodeClassName?: string; - style?: React.CSSProperties; + style?: CSSProperties; defaultCache?: Map; } @@ -115,10 +116,6 @@ export function Tree(props: ITreeProps) { const flatData = useMemo(() => flattenTree(data, expandKeySet), [data, update, expandKeySet]); - function handleChange(treeItem: ITreeItemProps) { - const path: string[] = findNode.findNodePathFromTreeWithCache(treeItem.key); - } - function handleExpendItem(treeItem: ITreeItemProps) { if (treeItem.children?.length) { if (expandKeySet.has(treeItem.key)) { @@ -204,7 +201,6 @@ export function Tree(props: ITreeProps) { {(item: ITreeItemProps) => renderTreeItem(item)}
- ); } diff --git a/packages/design/src/components/tree/index.module.css b/packages/design/src/components/tree/index.module.css new file mode 100644 index 0000000000..8d57eb87dc --- /dev/null +++ b/packages/design/src/components/tree/index.module.css @@ -0,0 +1,78 @@ +.tree { + user-select: none; + position: relative; + @apply univer-text-gray-900; +} + +.tree-icon { + position: absolute; + top: 50%; + left: calc(-1 * 16px); + transform: translateY(-50%) rotateZ(-90deg); + display: flex; + align-items: center; + justify-content: center; + font-size: 8px; +} + +.tree-icon-expand { + transform: translateY(-50%); +} + +.tree-list { + margin: 0; + padding: 0; + list-style: none; + height: 100%; +} + +.tree-list .tree-list { + overflow: hidden; + height: 0; +} + +.tree-list .tree-list-expand { + height: inherit; +} + +.tree-list-item { + position: relative; + padding-left: 20px; + font-size: 13px; +} + +.tree-list-item > a { + position: relative; + display: flex; + align-items: center; + cursor: pointer; +} + +.tree-list-item-title { + display: inline-block; + height: 100%; + margin: 0 4px; + flex-shrink: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.tree-list-item-content { + margin: 4px 0; + width: 100%; + position: relative; + display: flex; + align-items: center; +} + +.tree-list-item-content-selected-icon { + position: absolute; + top: 50%; + left: calc(-1 * 20px); + transform: translateY(-50%); + display: flex; + align-items: center; + justify-content: center; + @apply univer-text-base; +} diff --git a/packages/design/src/components/tree/index.module.less b/packages/design/src/components/tree/index.module.less deleted file mode 100644 index 845edfd7af..0000000000 --- a/packages/design/src/components/tree/index.module.less +++ /dev/null @@ -1,86 +0,0 @@ -.tree { - user-select: none; - position: relative; - color: rgb(var(--text-color)); - - &-icon { - position: absolute; - top: 50%; - left: calc(-1 * var(--padding-lg)); - transform: translateY(-50%) rotateZ(-90deg); - display: flex; - align-items: center; - justify-content: center; - - font-size: 8px; - - &-expand { - transform: translateY(-50%); - } - } - - &-list { - margin: 0; - padding: 0; - list-style: none; - height: 100%; - - .tree-list { - overflow: hidden; - height: 0; - - &-expand { - height: inherit; - } - } - - &-item { - position: relative; - padding-left: var(--padding-xl); - font-size: 13px; - - > a { - position: relative; - display: flex; - align-items: center; - cursor: pointer; - } - - &-title { - display: inline-block; - height: 100%; - margin: 0 4px; - flex-shrink: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - &-content { - margin: 4px 0; - width: 100%; - position: relative; - display: flex; - align-items: center; - - &-selected { - // font-weight: 500; - // color: rgb(var(--primary-color)); - - &-icon { - position: absolute; - top: 50%; - left: calc(-1 * var(--padding-xl)); - transform: translateY(-50%); - - display: flex; - align-items: center; - justify-content: center; - - font-size: var(--font-size-lg); - } - } - } - } - } -} diff --git a/packages/design/src/index.ts b/packages/design/src/index.ts index 9197d5737c..0cd9cd5dc7 100644 --- a/packages/design/src/index.ts +++ b/packages/design/src/index.ts @@ -45,7 +45,6 @@ export { type ITooltipProps, Tooltip } from './components/tooltip'; export { filterLeafNode, findNodePathFromTree, findSubTreeFromPath, type ITreeNodeProps, type ITreeProps, mergeTreeSelected, Tree, TreeSelectionMode } from './components/tree'; export { Switch } from './components/switch'; export { type ILocale } from './locale/interface'; -export { defaultTheme, greenTheme, themeInstance } from './themes'; export { DraggableList, type IDraggableListProps } from './components/draggable-list'; export { clsx } from './helper/clsx'; export { resizeObserverCtor } from './helper/resize-observer'; @@ -57,3 +56,6 @@ export { DateRangePicker } from './components/date-range-picker'; export { type IKBDProps, KBD } from './components/kbd'; export { type IToasterProps, toast, Toaster } from './components/toaster/Toaster'; export { scrollbarClassName } from './helper/scrollbar-cls'; + +/** @deprecated Only for compatibility with versions before 0.7.0, will be removed in future versions */ +export { defaultTheme, greenTheme } from '@univerjs/themes'; diff --git a/packages/design/src/themes/base.less b/packages/design/src/themes/base.less deleted file mode 100644 index 7b858e2efc..0000000000 --- a/packages/design/src/themes/base.less +++ /dev/null @@ -1,481 +0,0 @@ -/** - * ===================================== - * Ramu / 瑞木 / Red - * ===================================== - */ -@red-50: #fee7e7; -@red-100: #fdcece; -@red-200: #fb9d9d; -@red-300: #fa7979; -@red-400: #fe4b4b; -@red-500: #f30b0b; -@red-600: #e30909; -@red-700: #cd0f0f; -@red-800: #b20000; -@red-900: #9d0000; - -:export { - --red-50: @red-50; - --red-100: @red-100; - --red-200: @red-200; - --red-300: @red-300; - --red-400: @red-400; - --red-500: @red-500; - --red-600: @red-600; - --red-700: @red-700; - --red-800: @red-800; - --red-900: @red-900; -} - -/** - * ===================================== - * Hemerocallis / 萱草 / Orange - * ===================================== - */ -@orange-50: #fef0e6; -@orange-100: #fee1cd; -@orange-200: #fdc49b; -@orange-300: #fca669; -@orange-400: #ff8c51; -@orange-500: #fb8937; -@orange-600: #f96800; -@orange-700: #df5d00; -@orange-800: #cc4f10; -@orange-900: #b24000; - -:export { - --orange-50: @orange-50; - --orange-100: @orange-100; - --orange-200: @orange-200; - --orange-300: @orange-300; - --orange-400: @orange-400; - --orange-500: @orange-500; - --orange-600: @orange-600; - --orange-700: @orange-700; - --orange-800: @orange-800; - --orange-900: @orange-900; -} - -/** - * ===================================== - * Marigold / 万寿菊 / Gold - * ===================================== - */ -@gold-50: #fef6e6; -@gold-100: #feeecd; -@gold-200: #fddc9b; -@gold-300: #fccb69; -@gold-400: #ffbd37; -@gold-500: #faad14; -@gold-600: #e59b07; -@gold-700: #c68400; -@gold-800: #a97100; -@gold-900: #8f5f00; - -:export { - --gold-50: @gold-50; - --gold-100: @gold-100; - --gold-200: @gold-200; - --gold-300: @gold-300; - --gold-400: @gold-400; - --gold-500: @gold-500; - --gold-600: @gold-600; - --gold-700: @gold-700; - --gold-800: @gold-800; - --gold-900: @gold-900; -} - -/** - * ===================================== - * Forsythia Suspensa / 连翘 / Yellow - * ===================================== - */ -@yellow-50: #fefbe6; -@yellow-100: #fef7cd; -@yellow-200: #fdf09b; -@yellow-300: #fce869; -@yellow-400: #fbe137; -@yellow-500: #f9d700; -@yellow-600: #ebc301; -@yellow-700: #d8b300; -@yellow-800: #c5a300; -@yellow-900: #b19401; - -:export { - --yellow-50: @yellow-50; - --yellow-100: @yellow-100; - --yellow-200: @yellow-200; - --yellow-300: @yellow-300; - --yellow-400: @yellow-400; - --yellow-500: @yellow-500; - --yellow-600: @yellow-600; - --yellow-700: @yellow-700; - --yellow-800: @yellow-800; - --yellow-900: @yellow-900; -} - -/** - * ===================================== - * Eustoma Grandiflorum / 洋桔梗 / Verdancy - * ===================================== - */ -@verdancy-50: #f7fde8; -@verdancy-100: #effbd0; -@verdancy-200: #def6a2; -@verdancy-300: #cef273; -@verdancy-400: #beee44; -@verdancy-500: #a4dc16; -@verdancy-600: #8bbb11; -@verdancy-700: #7aa017; -@verdancy-800: #688c0d; -@verdancy-900: #58770a; - -:export { - --verdancy-50: @verdancy-50; - --verdancy-100: @verdancy-100; - --verdancy-200: @verdancy-200; - --verdancy-300: @verdancy-300; - --verdancy-400: @verdancy-400; - --verdancy-500: @verdancy-500; - --verdancy-600: @verdancy-600; - --verdancy-700: @verdancy-700; - --verdancy-800: @verdancy-800; - --verdancy-900: @verdancy-900; -} - -/** - * ===================================== - * Asparagus Fern / 文竹 / Green - * ===================================== - */ -@green-50: #effce8; -@green-100: #dff9d2; -@green-200: #bff3a5; -@green-300: #9fed78; -@green-400: #7fe74b; -@green-500: #59d01e; -@green-600: #49b811; -@green-700: #409f11; -@green-800: #398712; -@green-900: #317310; - -:export { - --green-50: @green-50; - --green-100: @green-100; - --green-200: @green-200; - --green-300: @green-300; - --green-400: @green-400; - --green-500: @green-500; - --green-600: @green-600; - --green-700: @green-700; - --green-800: @green-800; - --green-900: @green-900; -} - -/** - * ===================================== - * 霁 / Jiqing - * ===================================== - */ -@jiqing-50: #e5fffb; -@jiqing-100: #ccfff7; -@jiqing-200: #a9fff2; -@jiqing-300: #78fce8; -@jiqing-400: #2afede; -@jiqing-500: #10e8c7; -@jiqing-600: #00d2b2; -@jiqing-700: #00b298; -@jiqing-800: #009e87; -@jiqing-900: #008b76; - -:export { - --jiqing-50: @jiqing-50; - --jiqing-100: @jiqing-100; - --jiqing-200: @jiqing-200; - --jiqing-300: @jiqing-300; - --jiqing-400: @jiqing-400; - --jiqing-500: @jiqing-500; - --jiqing-600: @jiqing-600; - --jiqing-700: @jiqing-700; - --jiqing-800: @jiqing-800; - --jiqing-900: @jiqing-900; -} - -/** - * ===================================== - * Cornflower / 矢车菊 / Blue - * ===================================== - */ -@blue-50: #e4f4fe; -@blue-100: #d0edff; -@blue-200: #9fdaff; -@blue-300: #62c2ff; -@blue-400: #2daeff; -@blue-500: #0b9efb; -@blue-600: #0493ee; -@blue-700: #0080d2; -@blue-800: #006cae; -@blue-900: #005f9a; - -:export { - --blue-50: @blue-50; - --blue-100: @blue-100; - --blue-200: @blue-200; - --blue-300: @blue-300; - --blue-400: @blue-400; - --blue-500: @blue-500; - --blue-600: @blue-600; - --blue-700: @blue-700; - --blue-800: @blue-800; - --blue-900: @blue-900; -} - -/** - * ===================================== - * Hyacinth / 风信子 / Hyacinth Blue - * ===================================== - */ -@hyacinth-50: #e8ecfd; -@hyacinth-100: #d0d9fb; -@hyacinth-200: #a2b3f6; -@hyacinth-300: #738df2; -@hyacinth-400: #3a60f7; -@hyacinth-500: #274fee; -@hyacinth-600: #143ee3; -@hyacinth-700: #012bd2; -@hyacinth-800: #0025b7; -@hyacinth-900: #001f9c; - -:export { - --hyacinth-50: @hyacinth-50; - --hyacinth-100: @hyacinth-100; - --hyacinth-200: @hyacinth-200; - --hyacinth-300: @hyacinth-300; - --hyacinth-400: @hyacinth-400; - --hyacinth-500: @hyacinth-500; - --hyacinth-600: @hyacinth-600; - --hyacinth-700: @hyacinth-700; - --hyacinth-800: @hyacinth-800; - --hyacinth-900: @hyacinth-900; -} - -/** - * ===================================== - * Violet / 紫罗兰 / Purple - * ===================================== - */ -@purple-50: #f1eafa; -@purple-100: #e3d5f6; -@purple-200: #c7abed; -@purple-300: #aa82e3; -@purple-400: #9e6de3; -@purple-500: #894ede; -@purple-600: #7735d4; -@purple-700: #6721cb; -@purple-800: #510eb0; -@purple-900: #3f0198; - -:export { - --purple-50: @purple-50; - --purple-100: @purple-100; - --purple-200: @purple-200; - --purple-300: @purple-300; - --purple-400: @purple-400; - --purple-500: @purple-500; - --purple-600: @purple-600; - --purple-700: @purple-700; - --purple-800: @purple-800; - --purple-900: @purple-900; -} - -/** - * ===================================== - * Sorrel pulp / 酢浆 / Magenta - * ===================================== - */ -@magenta-50: #fde8f3; -@magenta-100: #fbd0e8; -@magenta-200: #f6a2d0; -@magenta-300: #f273b9; -@magenta-400: #f248a6; -@magenta-500: #e7258f; -@magenta-600: #d4157e; -@magenta-700: #c1026b; -@magenta-800: #a1095c; -@magenta-900: #8f0550; - -:export { - --magenta-50: @magenta-50; - --magenta-100: @magenta-100; - --magenta-200: @magenta-200; - --magenta-300: @magenta-300; - --magenta-400: @magenta-400; - --magenta-500: @magenta-500; - --magenta-600: @magenta-600; - --magenta-700: @magenta-700; - --magenta-800: @magenta-800; - --magenta-900: @magenta-900; -} - -/** - * ===================================== - * 灰 / Grey - * ===================================== - */ -@grey-50: #f5f5f5; -@grey-100: #eeeff1; -@grey-200: #e5e5e5; -@grey-300: #d8d8d8; -@grey-400: #bcbcbc; -@grey-500: #999999; -@grey-600: #7a7a7a; -@grey-700: #656565; -@grey-800: #565656; -@grey-900: #4b4b4b; - -:export { - --grey-50: @grey-50; - --grey-100: @grey-100; - --grey-200: @grey-200; - --grey-300: @grey-300; - --grey-400: @grey-400; - --grey-500: @grey-500; - --grey-600: @grey-600; - --grey-700: @grey-700; - --grey-800: @grey-800; - --grey-900: @grey-900; -} - -// 黑 / 白 / Black / White -@color-black: #1e222b; -@color-white: #ffffff; - -:export { - // 黑 / 白 / Black / White - --color-black: @color-black; - --color-white: @color-white; -} - -// Box Shadow -@box-shadow-base: 0 4px 12px rgba(@color-black, 0.08); -@box-shadow-lg: 0 4px 24px 0 rgba(@color-black, 0.08); - -// Background -@bg-color: @grey-100; -@bg-color-hover: @grey-300; -@bg-color-hover-light: @grey-100; -@bg-color-secondary: @color-white; -@bg-color-overlay: @color-white; - -// Text Color -@text-color: @color-black; -@text-color-secondary: @grey-600; -@text-color-secondary-darker: @grey-900; -@text-color-tertiary: @grey-400; - -// Border Color -@border-color: @grey-200; - -// Scrollbar Color -@scrollbar-color: @grey-400; -@scrollbar-color-hover: @grey-500; -@scrollbar-color-active: @grey-600; - -// Border Radius -@border-radius-base: 4px; -@border-radius-lg: 8px; -@border-radius-xl: 12px; - -// Margin -@margin-xxl: 28px; -@margin-xl: 24px; -@margin-lg: 20px; -@margin-base: 16px; -@margin-sm: 12px; -@margin-xs: 8px; -@margin-xxs: 4px; - -// Padding -@padding-xl: 20px; -@padding-lg: 16px; -@padding-base: 12px; -@padding-sm: 8px; -@padding-xs: 4px; - -// Font Size -@font-size-xxl: 20px; -@font-size-xl: 18px; -@font-size-lg: 16px; -@font-size-base: 15px; -@font-size-sm: 14px; -@font-size-xs: 13px; -@font-size-xxs: 12px; - -:export { - // Box Shadow - --box-shadow-base: @box-shadow-base; - --box-shadow-lg: @box-shadow-lg; - - // Background - --bg-color: @bg-color; - --bg-color-hover: @bg-color-hover; - --bg-color-hover-light: @bg-color-hover-light; - --bg-color-secondary: @bg-color-secondary; - --bg-color-overlay: @bg-color-overlay; - - // Text Color - --text-color: @text-color; - --text-color-secondary: @text-color-secondary; - --text-color-secondary-darker: @text-color-secondary-darker; - --text-color-tertiary: @text-color-tertiary; - - // Border Color - --border-color: @border-color; - - // Scrollbar Color - --scrollbar-color: @scrollbar-color; - --scrollbar-color-hover: @scrollbar-color-hover; - --scrollbar-color-active: @scrollbar-color-active; - - // Border Radius - --border-radius-base: @border-radius-base; - --border-radius-lg: @border-radius-lg; - --border-radius-xl: @border-radius-xl; - - // Margin - --margin-xl: @margin-xl; - --margin-lg: @margin-lg; - --margin-base: @margin-base; - --margin-sm: @margin-sm; - --margin-xs: @margin-xs; - --margin-xxs: @margin-xxs; - - // Padding - --padding-xl: @padding-xl; - --padding-lg: @padding-lg; - --padding-base: @padding-base; - --padding-sm: @padding-sm; - --padding-xs: @padding-xs; - - // Font Size - --font-size-xxl: @font-size-xxl; - --font-size-xl: @font-size-xl; - --font-size-lg: @font-size-lg; - --font-size-base: @font-size-base; - --font-size-sm: @font-size-sm; - --font-size-xs: @font-size-xs; - --font-size-xxs: @font-size-xxs; -} - -// Breakpoint -@breakpoint-xs: 768px; -@breakpoint-sm: 1024px; -@breakpoint-base: 1280px; -@breakpoint-lg: 1536px; - -:export { - --breakpoint-xs: @breakpoint-xs; - --breakpoint-sm: @breakpoint-sm; - --breakpoint-base: @breakpoint-base; - --breakpoint-lg: @breakpoint-lg; -} diff --git a/packages/design/src/themes/default.module.less b/packages/design/src/themes/default.module.less deleted file mode 100644 index 2b2457be76..0000000000 --- a/packages/design/src/themes/default.module.less +++ /dev/null @@ -1,61 +0,0 @@ -@import './base.less'; - -/** - * new design system - */ -// Functional / 功能 -@info-color: @blue-400; -@success-color: @green-500; -@warning-color: @gold-400; -@error-color: @red-400; - -// Brand / 品牌 -@primary-color: @hyacinth-500; -@primary-color-hover: @hyacinth-400; - -// Link -@link-color: @blue-500; - -:export { - // Functional / 功能 - --info-color: @info-color; - --success-color: @success-color; - --warning-color: @warning-color; - --error-color: @error-color; - - // Brand / 品牌 - --primary-color: @primary-color; - --primary-color-hover: @primary-color-hover; - - // Link - --link-color: @link-color; -} - -// Loop Color / 循环色 -@loop-color-1: @purple-400; -@loop-color-2: @green-600; -@loop-color-3: @blue-500; -@loop-color-4: @gold-400; -@loop-color-5: @magenta-300; -@loop-color-6: @jiqing-600; -@loop-color-7: @orange-400; -@loop-color-8: @grey-800; -@loop-color-9: @hyacinth-500; -@loop-color-10: @red-300; -@loop-color-11: @verdancy-600; -@loop-color-12: @yellow-700; - -:export { - --loop-color-1: @loop-color-1; - --loop-color-2: @loop-color-2; - --loop-color-3: @loop-color-3; - --loop-color-4: @loop-color-4; - --loop-color-5: @loop-color-5; - --loop-color-6: @loop-color-6; - --loop-color-7: @loop-color-7; - --loop-color-8: @loop-color-8; - --loop-color-9: @loop-color-9; - --loop-color-10: @loop-color-10; - --loop-color-11: @loop-color-11; - --loop-color-12: @loop-color-12; -} diff --git a/packages/design/src/themes/green.module.less b/packages/design/src/themes/green.module.less deleted file mode 100644 index cd851e6351..0000000000 --- a/packages/design/src/themes/green.module.less +++ /dev/null @@ -1,61 +0,0 @@ -@import './base.less'; - -/** - * new design system - */ -// Functional -@info-color: @blue-400; -@success-color: @green-500; -@warning-color: @gold-400; -@error-color: @red-400; - -// Brand / 品牌 -@primary-color: @green-700; -@primary-color-hover: @green-600; - -// Link -@link-color: @blue-500; - -:export { - // Functional / 功能 - --info-color: @info-color; - --success-color: @success-color; - --warning-color: @warning-color; - --error-color: @error-color; - - // Brand / 品牌 - --primary-color: @primary-color; - --primary-color-hover: @primary-color-hover; - - // Link - --link-color: @link-color; -} - -// Loop Color / 循环色 -@loop-color-1: @purple-400; -@loop-color-2: @green-600; -@loop-color-3: @blue-500; -@loop-color-4: @gold-400; -@loop-color-5: @magenta-300; -@loop-color-6: @jiqing-600; -@loop-color-7: @orange-400; -@loop-color-8: @grey-800; -@loop-color-9: @hyacinth-500; -@loop-color-10: @red-300; -@loop-color-11: @verdancy-600; -@loop-color-12: @yellow-700; - -:export { - --loop-color-1: @loop-color-1; - --loop-color-2: @loop-color-2; - --loop-color-3: @loop-color-3; - --loop-color-4: @loop-color-4; - --loop-color-5: @loop-color-5; - --loop-color-6: @loop-color-6; - --loop-color-7: @loop-color-7; - --loop-color-8: @loop-color-8; - --loop-color-9: @loop-color-9; - --loop-color-10: @loop-color-10; - --loop-color-11: @loop-color-11; - --loop-color-12: @loop-color-12; -} diff --git a/packages/design/src/themes/theme-root.module.less b/packages/design/src/themes/theme-root.module.less deleted file mode 100644 index 0f457cef59..0000000000 --- a/packages/design/src/themes/theme-root.module.less +++ /dev/null @@ -1,23 +0,0 @@ -.theme { - color: rgb(var(--text-color)); - font-family: - Inter, - -apple-system, - BlinkMacSystemFont, - 'PingFang SC', - 'Hiragino Sans GB', - 'noto sans', - 'Microsoft YaHei', - 'Helvetica Neue', - Helvetica, - Arial, - sans-serif; - - -webkit-font-smoothing: antialiased; -} - -.render-canvas { - &::selection { - pointer-events: none; - } -} diff --git a/packages/design/src/themes/theme.ts b/packages/design/src/themes/theme.ts deleted file mode 100644 index f64e4b9588..0000000000 --- a/packages/design/src/themes/theme.ts +++ /dev/null @@ -1,95 +0,0 @@ -/** - * Copyright 2023-present DreamNum Co., Ltd. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { isBrowser } from '../helper/is-browser'; -import styles from './theme-root.module.less'; - -function convertToDashCase(input: string): string { - const dashCase = input.replace(/([A-Z])/g, (match) => `-${match.toLowerCase()}`).replace(/(\d+)/g, '-$1'); - - return `--${dashCase}`; -} - -function convertHexToRgb(input: string): string { - if (input.startsWith('#')) { - const hex = input.replace('#', ''); - const r = Number.parseInt(hex.substring(0, 2), 16); - const g = Number.parseInt(hex.substring(2, 4), 16); - const b = Number.parseInt(hex.substring(4, 6), 16); - - return `${r}, ${g}, ${b}`; - } - - return input; -} - -class Theme { - private static _instance: Theme | null = null; - private _styleSheet: HTMLStyleElement | null = null; - private _themeRootName = styles.theme; - - private constructor() { - if (!isBrowser()) return; - - const $style = document.createElement('style'); - $style.id = this._themeRootName; - - // Determine the mount point for the stylesheet - let mountPoint: HTMLElement | ShadowRoot | null = null; - const currentRoot = document.getRootNode(); - - if (currentRoot === document) { - // Normal DOM environment - mountPoint = document.head; - } else if (currentRoot instanceof ShadowRoot) { - // Shadow DOM environment - mountPoint = currentRoot; - } else { - // Inside an iframe or other environment - mountPoint = (currentRoot as Document).head; - } - - if (mountPoint) { - mountPoint.appendChild($style); - this._styleSheet = $style; - } - } - - static getInstance(): Theme { - if (!Theme._instance) { - Theme._instance = new Theme(); - } - return Theme._instance; - } - - setTheme(root: HTMLElement, theme: Record) { - if (!this._styleSheet) return; - - // 1. set theme root class - root.classList.remove(this._themeRootName); - root.classList.add(this._themeRootName); - - // 2. remove old theme - this._styleSheet.innerHTML = ''; - - // 3. set new theme - this._styleSheet.innerHTML = `.${this._themeRootName} {${Object.keys(theme) - .map((key) => `${convertToDashCase(key)}: ${convertHexToRgb(theme[key])};`) - .join('')}}`; - } -} - -export const themeInstance = Theme.getInstance(); diff --git a/packages/docs-drawing-ui/package.json b/packages/docs-drawing-ui/package.json index cb51d60a30..3b4c1799c9 100644 --- a/packages/docs-drawing-ui/package.json +++ b/packages/docs-drawing-ui/package.json @@ -79,13 +79,12 @@ }, "devDependencies": { "@univerjs-infra/shared": "workspace:*", - "less": "^4.3.0", "postcss": "^8.5.3", "react": "18.3.1", "rxjs": "^7.8.1", "tailwindcss": "^3.4.17", "typescript": "^5.8.3", - "vite": "^6.3.4", - "vitest": "^3.1.2" + "vite": "^6.3.5", + "vitest": "^3.1.3" } } diff --git a/packages/docs-drawing/package.json b/packages/docs-drawing/package.json index 3fc0694e2e..dd41f3f77f 100644 --- a/packages/docs-drawing/package.json +++ b/packages/docs-drawing/package.json @@ -62,7 +62,7 @@ "devDependencies": { "@univerjs-infra/shared": "workspace:*", "typescript": "^5.8.3", - "vite": "^6.3.4", - "vitest": "^3.1.2" + "vite": "^6.3.5", + "vitest": "^3.1.3" } } diff --git a/packages/docs-hyper-link-ui/package.json b/packages/docs-hyper-link-ui/package.json index 30ae6a11bb..ad336eb467 100644 --- a/packages/docs-hyper-link-ui/package.json +++ b/packages/docs-hyper-link-ui/package.json @@ -82,7 +82,7 @@ "rxjs": "^7.8.1", "tailwindcss": "^3.4.17", "typescript": "^5.8.3", - "vite": "^6.3.4", - "vitest": "^3.1.2" + "vite": "^6.3.5", + "vitest": "^3.1.3" } } diff --git a/packages/docs-hyper-link/package.json b/packages/docs-hyper-link/package.json index a318add5c6..e2b637532b 100644 --- a/packages/docs-hyper-link/package.json +++ b/packages/docs-hyper-link/package.json @@ -61,7 +61,7 @@ "devDependencies": { "@univerjs-infra/shared": "workspace:*", "typescript": "^5.8.3", - "vite": "^6.3.4", - "vitest": "^3.1.2" + "vite": "^6.3.5", + "vitest": "^3.1.3" } } diff --git a/packages/docs-mention-ui/package.json b/packages/docs-mention-ui/package.json index a2171a29d2..75d8044326 100644 --- a/packages/docs-mention-ui/package.json +++ b/packages/docs-mention-ui/package.json @@ -75,7 +75,7 @@ "rxjs": "^7.8.1", "tailwindcss": "^3.4.17", "typescript": "^5.8.3", - "vite": "^6.3.4", - "vitest": "^3.1.2" + "vite": "^6.3.5", + "vitest": "^3.1.3" } } diff --git a/packages/docs-quick-insert-ui/package.json b/packages/docs-quick-insert-ui/package.json index ec0a9038f1..211576b7fa 100644 --- a/packages/docs-quick-insert-ui/package.json +++ b/packages/docs-quick-insert-ui/package.json @@ -85,7 +85,7 @@ "rxjs": "^7.8.1", "tailwindcss": "^3.4.17", "typescript": "^5.8.3", - "vite": "^6.3.4", - "vitest": "^3.1.2" + "vite": "^6.3.5", + "vitest": "^3.1.3" } } diff --git a/packages/docs-thread-comment-ui/package.json b/packages/docs-thread-comment-ui/package.json index 92b41b95a3..baa8f58f8e 100644 --- a/packages/docs-thread-comment-ui/package.json +++ b/packages/docs-thread-comment-ui/package.json @@ -76,7 +76,7 @@ "rxjs": "^7.8.1", "tailwindcss": "^3.4.17", "typescript": "^5.8.3", - "vite": "^6.3.4", - "vitest": "^3.1.2" + "vite": "^6.3.5", + "vitest": "^3.1.3" } } diff --git a/packages/docs-ui/package.json b/packages/docs-ui/package.json index a064f9fb38..b7d6438657 100644 --- a/packages/docs-ui/package.json +++ b/packages/docs-ui/package.json @@ -97,7 +97,7 @@ "rxjs": "^7.8.1", "tailwindcss": "^3.4.17", "typescript": "^5.8.3", - "vite": "^6.3.4", - "vitest": "^3.1.2" + "vite": "^6.3.5", + "vitest": "^3.1.3" } } diff --git a/packages/docs-ui/src/components/float-toolbar/FloatToolbar.stories.tsx b/packages/docs-ui/src/components/float-toolbar/FloatToolbar.stories.tsx index c238e2cbac..c4a8ee418d 100644 --- a/packages/docs-ui/src/components/float-toolbar/FloatToolbar.stories.tsx +++ b/packages/docs-ui/src/components/float-toolbar/FloatToolbar.stories.tsx @@ -17,8 +17,8 @@ import type { Meta } from '@storybook/react'; import type { Dependency } from '@univerjs/core'; -import { LocaleService, LocaleType, ThemeService } from '@univerjs/core'; -import { ColorPicker, defaultTheme } from '@univerjs/design'; +import { LocaleService, LocaleType } from '@univerjs/core'; +import { ColorPicker } from '@univerjs/design'; import { DocSelectionManagerService } from '@univerjs/docs'; import { IRenderManagerService, RenderManagerService } from '@univerjs/engine-render'; import { ComponentManager, DesktopLayoutService, FontFamily, FontFamilyItem, FontSize, ILayoutService, IMenuManagerService, MenuManagerService, RediContext } from '@univerjs/ui'; @@ -82,8 +82,6 @@ export const Playground = { useEffect(() => { if (!inject) return; - const themeService = inject.get(ThemeService); - themeService.setTheme(defaultTheme); const componentManager = inject.get(ComponentManager); componentManager.register(COLOR_PICKER_COMPONENT, ColorPicker); diff --git a/packages/docs-ui/src/components/float-toolbar/FloatToolbar.tsx b/packages/docs-ui/src/components/float-toolbar/FloatToolbar.tsx index f19e067146..0ac5341f78 100644 --- a/packages/docs-ui/src/components/float-toolbar/FloatToolbar.tsx +++ b/packages/docs-ui/src/components/float-toolbar/FloatToolbar.tsx @@ -79,8 +79,7 @@ export function FloatToolbar(props: IFloatToolbarProps) {
{menus.map((groupItem) => groupItem.item && ( diff --git a/packages/docs-ui/src/controllers/menu/menu.ts b/packages/docs-ui/src/controllers/menu/menu.ts index f73d99ddb5..ada8af594a 100644 --- a/packages/docs-ui/src/controllers/menu/menu.ts +++ b/packages/docs-ui/src/controllers/menu/menu.ts @@ -25,6 +25,7 @@ import { DEFAULT_STYLES, DOCS_ZEN_EDITOR_UNIT_ID_KEY, DocumentFlavor, + get, HorizontalAlign, ICommandService, IUniverInstanceService, @@ -636,7 +637,9 @@ export function TextColorSelectorMenuItemFactory(accessor: IAccessor): IMenuSele }, ], value$: new Observable((subscriber) => { - const defaultColor = themeService.getCurrentTheme().textColor; + const theme = themeService.getCurrentTheme(); + const defaultColor = get(theme, 'gray.900'); + const disposable = commandService.onCommandExecuted((c) => { if (c.id === SetInlineFormatTextColorCommand.id) { const color = (c.params as { value: string }).value; @@ -999,7 +1002,9 @@ export function BackgroundColorSelectorMenuItemFactory(accessor: IAccessor): IMe }, ], value$: new Observable((subscriber) => { - const defaultColor = themeService.getCurrentTheme().primaryColor; + const theme = themeService.getCurrentTheme(); + const defaultColor = get(theme, 'primary.600'); + const disposable = commandService.onCommandExecuted((c) => { if (c.id === SetInlineFormatTextBackgroundColorCommand.id) { const color = (c.params as { value: string }).value; diff --git a/packages/docs-ui/src/views/page-settings/index.tsx b/packages/docs-ui/src/views/page-settings/index.tsx index 66e5326dd4..027c410c95 100644 --- a/packages/docs-ui/src/views/page-settings/index.tsx +++ b/packages/docs-ui/src/views/page-settings/index.tsx @@ -100,7 +100,7 @@ export function PageSettings(props: IConfirmChildrenProps) { return (
-