feat: add Microsoft Excel style theme palette

packages/s2-core/__tests__/spreadsheet/theme-spec.ts

@@ -71,7 +71,7 @@ describe('SpreadSheet Theme Tests', () => {
       expect(tableSheet.theme).toMatchSnapshot();
     });
 
-    test.each(['dark', 'gray', 'colorful', 'default'] as ThemeName[])(
+    test.each(['dark', 'gray', 'colorful', 'default', 'excel'] as ThemeName[])(
       'should get %s theme',
       (name) => {
         s2.setThemeCfg({

packages/s2-core/__tests__/unit/utils/theme-spec.ts

@@ -6,5 +6,6 @@ describe('Theme Utils Tests', () => {
     expect(getPalette('default')).toMatchSnapshot();
     expect(getPalette('colorful')).toMatchSnapshot();
     expect(getPalette('gray')).toMatchSnapshot();
+    expect(getPalette('excel')).toMatchSnapshot();
   });
 });

packages/s2-core/src/common/constant/theme.ts

@@ -1,6 +1,7 @@
 import { paletteColorful } from '../../theme/palette/colorful';
 import { paletteDark } from '../../theme/palette/dark';
 import { paletteDefault } from '../../theme/palette/default';
+import { paletteExcel } from '../../theme/palette/excel';
 import { paletteGray } from '../../theme/palette/gray';
 import type { ThemeName } from '../interface';
 import { S2_PREFIX_CLS } from './classnames';
@@ -10,6 +11,7 @@ export const PALETTE_MAP = {
   colorful: paletteColorful,
   gray: paletteGray,
   dark: paletteDark,
+  excel: paletteExcel,
 } as const;
 
 /**
@@ -34,6 +36,7 @@ export const G2_THEME_TYPE: Record<ThemeName, string> = {
   colorful: 'light',
   gray: 'light',
   dark: 'dark',
+  excel: 'light',
 };
 
 export const CELL_PADDING = 8;

packages/s2-core/src/theme/palette/excel.ts

@@ -0,0 +1,73 @@
+import type { Palette } from '../../common';
+
+/**
+ * Microsoft Excel style palette
+ * Replicates the default visual style of Microsoft Excel spreadsheets
+ */
+export const paletteExcel: Palette = {
+  // Excel's primary accent color (green)
+  brandColor: '#217346',
+  // Semantic colors for conditional formatting
+  semanticColors: {
+    red: '#FF0000',
+    green: '#00B050',
+    yellow: '#FFFF00',
+  },
+  others: {
+    // Search results highlight
+    results: '#FFFF00',
+    // Cell highlight
+    highlight: '#E2EFDA',
+  },
+  /**
+   * Basic colors mapping for Excel theme:
+   * 0:  Corner header text, column header text (#000000 - black)
+   * 1:  Row header background, data cell background zebra (#FFFFFF - white)
+   * 2:  Row & data cell interactions hover/selected (#F2F2F2 - Excel light gray hover)
+   * 3:  Corner header background, column header background (#E6E6E6 - Excel gray header)
+   * 4:  Column header interaction hover/selected (#D9D9D9 - Excel header hover gray)
+   * 5:  Brush selection mask (#217346 - Excel green)
+   * 6:  Row header link (#0563C1 - Excel hyperlink blue)
+   * 7:  Mini bar, resize interaction (#217346 - Excel green)
+   * 8:  Data cell background (non-zebra), table background (#FFFFFF - white)
+   * 9:  Row header border, data cell border (#D4D4D4 - Excel gridline gray)
+   * 10: Corner header border, column header border (#B4B4B4 - darker gray for header)
+   * 11: Vertical split line (#217346 - Excel green)
+   * 12: Horizontal split line (#217346 - Excel green)
+   * 13: Data cell text (#000000 - black)
+   * 14: Row header text, hover/selection border color (#217346 - Excel green for selection border)
+   */
+  basicColors: [
+    // 0: header text color
+    '#000000',
+    // 1: row header bg / data cell zebra bg
+    '#FFFFFF',
+    // 2: row & data cell interaction (hover, selected) - Excel light gray
+    '#F2F2F2',
+    // 3: corner/col header background
+    '#E6E6E6',
+    // 4: col header interaction (hover, selected) - Excel header hover gray
+    '#D9D9D9',
+    // 5: brush selection mask
+    '#217346',
+    // 6: link color (Excel hyperlink blue)
+    '#0563C1',
+    // 7: mini bar, resize guide line (Excel green)
+    '#217346',
+    // 8: data cell bg / table background
+    '#FFFFFF',
+    // 9: row header border, data cell border (Excel gridline)
+    '#D4D4D4',
+    // 10: corner/col header border
+    '#B4B4B4',
+    // 11: vertical split line
+    '#217346',
+    // 12: horizontal split line
+    '#217346',
+    // 13: data cell text
+    '#000000',
+    // 14: row header text, hover/selection border color (Excel green)
+    '#217346',
+  ],
+  basicColorRelations: [],
+};

s2-site/examples/theme/default/demo/excel.ts

@@ -0,0 +1,48 @@
+import { TableSheet, S2DataConfig, S2Options } from '@antv/s2';
+
+fetch(
+  'https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json',
+)
+  .then((res) => res.json())
+  .then(async (data) => {
+    const container = document.getElementById('container');
+    const s2DataConfig: S2DataConfig = {
+      fields: {
+        columns: ['province', 'city','type','price', 'cost'],
+      },
+      meta: [
+        {
+          field: 'province',
+          name: '省份',
+        },
+        {
+          field: 'city',
+          name: '城市',
+        },
+        {
+          field: 'type',
+          name: '商品类别',
+        },
+        {
+          field: 'price',
+          name: '价格',
+        },
+        {
+          field: 'cost',
+          name: '成本',
+        },
+      ],
+      data,
+    };
+
+    const s2Options: S2Options = {
+      width: 600,
+      height: 480,
+    };
+
+    const s2 = new TableSheet(container, s2DataConfig, s2Options);
+
+    s2.setThemeCfg({ name: 'excel' });
+
+    await s2.render();
+  });

s2-site/examples/theme/default/demo/meta.json

@@ -35,6 +35,14 @@
         "en": "Dark"
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*eRu9R7b1pGwAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "excel.ts",
+      "title": {
+        "zh": "Excel 风格",
+        "en": "Excel Style"
+      },
+      "screenshot": "https://github.com/user-attachments/assets/84de7b77-7b6a-4df9-835d-197a593a23eb"
     }
   ]
 }