diff --git a/.github/workflows/prerelease-notify.yml b/.github/workflows/prerelease-notify.yml
index b6e93ef37f..09b5040cb6 100644
--- a/.github/workflows/prerelease-notify.yml
+++ b/.github/workflows/prerelease-notify.yml
@@ -19,7 +19,7 @@ jobs:
${{ secrets.DING_TALK_GROUP_TOKEN }}
${{ secrets.DING_TALK_PUBLIC_TOKEN }}
notify_title: '🎉 AntV/S2 测试版发布 🎉'
- notify_body: '🎉 AntV/S2 新版本发布啦 🎉
[**点击查看更新日志**](https://github.com/antvis/S2/releases)
'
+ notify_body: '🎉 **AntV/S2 新版本发布啦** 🎉
[**点击查看更新日志**](https://github.com/antvis/S2/releases)
'
notify_footer: '> 该版本为测试版, 请谨慎使用 ([AntV/S2 Releases](https://github.com/antvis/S2/releases))'
at_all: false
enable_prerelease: true
diff --git a/.github/workflows/release-notify.yml b/.github/workflows/release-notify.yml
index e0a25a61c9..31429c6389 100644
--- a/.github/workflows/release-notify.yml
+++ b/.github/workflows/release-notify.yml
@@ -19,7 +19,7 @@ jobs:
${{ secrets.DING_TALK_GROUP_TOKEN }}
${{ secrets.DING_TALK_PUBLIC_TOKEN }}
notify_title: '🎉 AntV/S2 新版本发布啦 🎉'
- notify_body: '🎉 AntV/S2 新版本发布啦 🎉
[**点击查看更新日志**](https://github.com/antvis/S2/releases)
'
+ notify_body: '🎉 **AntV/S2 新版本发布啦** 🎉
[**点击查看更新日志**](https://github.com/antvis/S2/releases)
'
notify_footer: '> [AntV/S2 Releases](https://github.com/antvis/S2/releases)'
at_all: false
enable_prerelease: false
diff --git a/build.config.base.mjs b/build.config.base.mjs
index 04968185cb..8a5aac453a 100644
--- a/build.config.base.mjs
+++ b/build.config.base.mjs
@@ -40,10 +40,6 @@ export const getBaseConfig = ({
// 防止开发模式下直接加载 s2-core 中的主题 less
resolve.alias.push(
...[
- {
- find: /^(.*)\/theme\/(.*)\.less$/,
- replacement: '$1/theme/$2.less?inline',
- },
{
find: /^@antv\/s2$/,
replacement: path.join(__dirname, './packages/s2-core/src'),
diff --git a/packages/s2-core/__tests__/spreadsheet/tooltip-spec.ts b/packages/s2-core/__tests__/spreadsheet/tooltip-spec.ts
index 531a477fda..2cf0d00d6c 100644
--- a/packages/s2-core/__tests__/spreadsheet/tooltip-spec.ts
+++ b/packages/s2-core/__tests__/spreadsheet/tooltip-spec.ts
@@ -1,4 +1,5 @@
import type { S2Options } from '@/common/interface';
+import { DARK_THEME_CLS } from '@antv/s2';
import { createPivotSheet } from 'tests/util/helpers';
const s2Options: S2Options = {
@@ -106,4 +107,19 @@ describe('Tooltip Tests', () => {
s2.destroy();
});
+
+ test('should render dark theme tooltip style', async () => {
+ const s2 = createS2({ enable: true });
+
+ s2.setThemeCfg({
+ name: 'dark',
+ });
+
+ await s2.render();
+ s2.showTooltip({ position: { x: 0, y: 0 } });
+
+ expect(document.querySelector(`body > .${DARK_THEME_CLS}`)).toBeTruthy();
+
+ s2.destroy();
+ });
});
diff --git a/packages/s2-core/__tests__/unit/utils/tooltip-spec.ts b/packages/s2-core/__tests__/unit/utils/tooltip-spec.ts
index 062823c0e5..a3ef6b164d 100644
--- a/packages/s2-core/__tests__/unit/utils/tooltip-spec.ts
+++ b/packages/s2-core/__tests__/unit/utils/tooltip-spec.ts
@@ -29,6 +29,7 @@ import {
getTooltipOptions,
setTooltipContainerStyle,
} from '@/utils/tooltip';
+import { DARK_THEME_CLS } from '@antv/s2';
import { omit } from 'lodash';
import * as dataConfig from 'tests/data/mock-dataset.json';
import {
@@ -1221,6 +1222,16 @@ describe('Tooltip Utils Tests', () => {
);
});
+ test('should set container dark style', () => {
+ const container = document.createElement('div');
+
+ setTooltipContainerStyle(container, {
+ dark: true,
+ });
+
+ expect(container.classList.contains(DARK_THEME_CLS)).toBeTruthy();
+ });
+
test('should get custom fields summaries of custom tree', () => {
const mockData = [
{
diff --git a/packages/s2-core/__tests__/util/helpers.ts b/packages/s2-core/__tests__/util/helpers.ts
index b66bb26d5b..a74cb9a577 100644
--- a/packages/s2-core/__tests__/util/helpers.ts
+++ b/packages/s2-core/__tests__/util/helpers.ts
@@ -215,6 +215,7 @@ export const createFakeSpreadSheet = (config?: {
s2.hideTooltip = jest.fn();
s2.showTooltip = jest.fn();
s2.showTooltipWithInfo = jest.fn();
+ s2.getThemeName = jest.fn();
s2.isTableMode = jest.fn();
s2.isPivotMode = jest.fn();
s2.getCell = jest.fn();
diff --git a/packages/s2-core/rollup.config.mjs b/packages/s2-core/rollup.config.mjs
index 4fd868cdc3..a3d1d2046a 100644
--- a/packages/s2-core/rollup.config.mjs
+++ b/packages/s2-core/rollup.config.mjs
@@ -1,5 +1,4 @@
/* eslint-disable import/no-extraneous-dependencies */
-import alias from '@rollup/plugin-alias';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
@@ -32,14 +31,6 @@ const output = {
const plugins = [
peerDepsExternal(),
- alias({
- entries: [
- {
- find: /^(?.*).less\?inline$/,
- replacement: '$1.less',
- },
- ],
- }),
replace({
'process.env.NODE_ENV': JSON.stringify('production'),
preventAssignment: true,
diff --git a/packages/s2-core/src/common/constant/theme.ts b/packages/s2-core/src/common/constant/theme.ts
index 12d307d31d..56d6c82aee 100644
--- a/packages/s2-core/src/common/constant/theme.ts
+++ b/packages/s2-core/src/common/constant/theme.ts
@@ -23,10 +23,7 @@ export const FONT_FAMILY =
export const INTERVAL_BAR_HEIGHT = 12;
-/**
- * 注入主题 css 变量的节点名
- */
-export const STYLE_ELEMENT_ID = `${S2_PREFIX_CLS}-core-vars`;
+export const DARK_THEME_CLS = `${S2_PREFIX_CLS}-dark-theme`;
/**
* 兼容 G2 主题: S2 和 G2 的主题名转换
diff --git a/packages/s2-core/src/shared/constant/theme.ts b/packages/s2-core/src/shared/constant/theme.ts
deleted file mode 100644
index 8bb0c51171..0000000000
--- a/packages/s2-core/src/shared/constant/theme.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { S2_PREFIX_CLS } from '../../common';
-
-/**
- * 注入主题 css 变量的节点名
- */
-export const STYLE_ELEMENT_ID = `${S2_PREFIX_CLS}-component-vars`;
diff --git a/packages/s2-core/src/shared/styles/theme/dark.less b/packages/s2-core/src/shared/styles/theme/dark.less
deleted file mode 100644
index ba9a811a39..0000000000
--- a/packages/s2-core/src/shared/styles/theme/dark.less
+++ /dev/null
@@ -1,20 +0,0 @@
-@import '../variables.less';
-
-:root {
- @white: #fff;
-
- // container
- @{css-var-prefix}-container-background: #191919;
- @{css-var-prefix}-block-background: #232323;
-
- // text
- @{css-var-prefix}-font: @white;
- each(range(19), {
- @fadePercent: 100 - @value * 5;
- @{css-var-prefix}-font-@{fadePercent}: fade(@white, @fadePercent);
- });
-
- // border
- @{css-var-prefix}-border: fade(@white, 15);
- @{css-var-prefix}-divider: fade(@white, 10);
-}
diff --git a/packages/s2-core/src/shared/styles/tooltip/operator.less b/packages/s2-core/src/shared/styles/tooltip/operator.less
index d55b166b3f..873b87f7c8 100644
--- a/packages/s2-core/src/shared/styles/tooltip/operator.less
+++ b/packages/s2-core/src/shared/styles/tooltip/operator.less
@@ -54,7 +54,7 @@
&.ant-menu-submenu-selected {
background-color: var(
- --antv-s2-tooltip-operator-menu-selected-background,
+ ~'@{css-var-prefix}-tooltip-operator-menu-selected-background',
#e6f4ff
);
}
diff --git a/packages/s2-core/src/sheet-type/spread-sheet.ts b/packages/s2-core/src/sheet-type/spread-sheet.ts
index 14e48d5816..4d213c23e3 100644
--- a/packages/s2-core/src/sheet-type/spread-sheet.ts
+++ b/packages/s2-core/src/sheet-type/spread-sheet.ts
@@ -70,7 +70,6 @@ import { clearValueRangeState } from '../utils/condition/state-controller';
import { hideColumnsByThunkGroup } from '../utils/hide-columns';
import { isMobile } from '../utils/is-mobile';
import { customMerge, setupDataConfig, setupOptions } from '../utils/merge';
-import { injectThemeVars } from '../utils/theme';
import { getTooltipData, getTooltipOptions } from '../utils/tooltip';
import type { PivotSheet } from './pivot-sheet';
import type { TableSheet } from './table-sheet';
@@ -548,7 +547,6 @@ export abstract class SpreadSheet extends EE {
this.theme = customMerge(newTheme, theme);
this.setThemeName(themeCfg?.name!);
- injectThemeVars(themeCfg?.name);
}
public setTheme(theme: S2Theme) {
diff --git a/packages/s2-core/src/styles/theme/dark.less b/packages/s2-core/src/styles/theme/dark.less
index 3a2fd87c3a..f5907e92ae 100644
--- a/packages/s2-core/src/styles/theme/dark.less
+++ b/packages/s2-core/src/styles/theme/dark.less
@@ -1,9 +1,27 @@
@import '../variables.less';
-:root {
+.@{s2-cls-prefix}-dark-theme {
+ @white: #fff;
+
// container
@{css-var-prefix}-background: #000;
@{css-var-prefix}-tooltip-background: rgba(43, 43, 43, 0.95);
@{css-var-prefix}-tooltip-operator-background: rgba(43, 43, 43, 0.95);
@{css-var-prefix}-tooltip-operator-menu-selected-background: #1677ff;
+
+ // container
+ @{css-var-prefix}-container-background: #191919;
+ @{css-var-prefix}-block-background: #232323;
+
+ // text
+ @{css-var-prefix}-font: @white;
+
+ each(range(19), {
+ @fadePercent: 100 - @value * 5;
+ @{css-var-prefix}-font-@{fadePercent}: fade(@white, @fadePercent);
+ });
+
+ // border
+ @{css-var-prefix}-border: fade(@white, 15);
+ @{css-var-prefix}-divider: fade(@white, 10);
}
diff --git a/packages/s2-core/src/ui/tooltip/index.less b/packages/s2-core/src/ui/tooltip/index.less
index a5be94f521..075d337a43 100644
--- a/packages/s2-core/src/ui/tooltip/index.less
+++ b/packages/s2-core/src/ui/tooltip/index.less
@@ -1,4 +1,5 @@
@import '../../styles/variables.less';
+@import '../../styles/theme/dark.less';
.@{tooltip-cls-prefix} {
&-container {
diff --git a/packages/s2-core/src/ui/tooltip/index.ts b/packages/s2-core/src/ui/tooltip/index.ts
index fa34348899..b971c3db96 100644
--- a/packages/s2-core/src/ui/tooltip/index.ts
+++ b/packages/s2-core/src/ui/tooltip/index.ts
@@ -11,7 +11,6 @@ import {
getAutoAdjustPosition,
setTooltipContainerStyle,
} from '../../utils/tooltip';
-
import './index.less';
/**
@@ -73,6 +72,7 @@ export class BaseTooltip<
pointerEvents: 'all',
},
visible: true,
+ dark: this.spreadsheet.getThemeName() === 'dark',
});
}
diff --git a/packages/s2-core/src/utils/theme.ts b/packages/s2-core/src/utils/theme.ts
index 6cbf01a3e5..6681c78bdf 100644
--- a/packages/s2-core/src/utils/theme.ts
+++ b/packages/s2-core/src/utils/theme.ts
@@ -1,7 +1,5 @@
-import { PALETTE_MAP, STYLE_ELEMENT_ID } from '../common/constant';
+import { PALETTE_MAP } from '../common/constant';
import type { Palette, ThemeName } from '../common/interface/theme';
-import DarkVars from '../styles/theme/dark.less';
-import { injectCssText } from './inject-css-text';
/**
* 获取当前的主题色板
@@ -9,14 +7,3 @@ import { injectCssText } from './inject-css-text';
export const getPalette = (themeName?: ThemeName): Palette => {
return PALETTE_MAP[themeName!] || PALETTE_MAP['default'];
};
-
-/**
- * 根据主题注入组件的 CSS 变量
- */
-export const injectThemeVars = (themeName?: ThemeName) => {
- // 目前仅 dark 主题需要定制
- injectCssText(
- STYLE_ELEMENT_ID,
- themeName === 'dark' ? (DarkVars as string) : '',
- );
-};
diff --git a/packages/s2-core/src/utils/tooltip.ts b/packages/s2-core/src/utils/tooltip.ts
index 87822b2c6f..d8627ec71a 100644
--- a/packages/s2-core/src/utils/tooltip.ts
+++ b/packages/s2-core/src/utils/tooltip.ts
@@ -29,6 +29,7 @@ import {
} from 'lodash';
import {
CellType,
+ DARK_THEME_CLS,
EXTRA_FIELD,
PRECISION,
VALUE_FIELD,
@@ -153,13 +154,14 @@ export const setTooltipContainerStyle = (
visible?: boolean;
style?: CSS.Properties;
className?: string[];
+ dark?: boolean;
},
) => {
if (!container) {
return;
}
- const { style, className = [], visible } = options;
+ const { style, className = [], visible, dark = false } = options;
if (style) {
Object.assign(container.style, style);
@@ -173,6 +175,7 @@ export const setTooltipContainerStyle = (
container.classList.toggle(TOOLTIP_CONTAINER_SHOW_CLS, visible);
container.classList.toggle(TOOLTIP_CONTAINER_HIDE_CLS, !visible);
+ container.classList.toggle(DARK_THEME_CLS, dark);
};
export const getListItem = (
diff --git a/packages/s2-react/playground/index.tsx b/packages/s2-react/playground/index.tsx
index e6e82a73e7..d912454e6b 100644
--- a/packages/s2-react/playground/index.tsx
+++ b/packages/s2-react/playground/index.tsx
@@ -2,6 +2,7 @@
/* eslint-disable @typescript-eslint/ban-ts-comment */
/* eslint-disable no-console */
import {
+ DARK_THEME_CLS,
DEFAULT_FROZEN_COUNTS,
DEFAULT_STYLE,
Node,
@@ -22,6 +23,7 @@ import {
type ThemeCfg,
type TooltipAutoAdjustBoundary,
} from '@antv/s2';
+import '@antv/s2/src/styles/theme/dark.less';
import { useUpdateEffect } from 'ahooks';
import {
Button,
@@ -40,6 +42,7 @@ import {
Tooltip,
type RadioChangeEvent,
} from 'antd';
+import cls from 'classnames';
import { debounce, isEmpty, random } from 'lodash';
import React from 'react';
import { ChromePicker } from 'react-color';
@@ -391,7 +394,11 @@ function MainLayout() {
logHandler,
}}
>
-
+
= React.memo((props) => {
? props.children({ pagination })
: props.children;
- React.useEffect(() => {
- injectThemeVars(props.themeCfg?.name);
- }, [props.themeCfg?.name]);
-
return (