Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Dec 25, 2025

  • Analyze existing theme structure in /packages/s2-core/src/theme
  • Understand palette structure (basicColors, semanticColors, others)
  • Review existing palettes (default, gray, colorful, dark)
  • Understand how PALETTE_MAP registers themes
  • Create Microsoft Excel theme palette file (excel.ts)
  • Register Excel palette in PALETTE_MAP
  • Add G2 theme type mapping for Excel theme
  • Add test coverage for the new Excel theme
  • Manually verify the theme renders correctly
  • Run code review (passed)
  • Run CodeQL security scan (no alerts)
  • Add Excel theme example to s2-site demos
  • Fix hover/selection colors to match Excel style

Summary

This PR adds a new theme palette that replicates the default visual style of Microsoft Excel spreadsheets.

Changes

  • Created new excel.ts palette file in /packages/s2-core/src/theme/palette/
  • Registered the Excel palette in PALETTE_MAP
  • Added G2 theme type mapping for Excel theme
  • Updated theme tests to include the new Excel theme
  • Added Excel theme example in s2-site/examples/theme/default/demo/

Excel Theme Colors (Updated)

Color Usage
#217346 Brand Color (Excel green)
#E6E6E6 Header Background
#D4D4D4 Gridline Color
#FFFFFF Cell Background
#F2F2F2 Hover/Selected Background (gray)
#D9D9D9 Header Hover Background (gray)
#217346 Selection Border (Excel green)
#0563C1 Link Color (Excel hyperlink blue)
#000000 Text Color

Usage

import { PivotSheet, ThemeCfg } from '@antv/s2';

const themeCfg: ThemeCfg = {
  name: 'excel'
};

const s2 = new PivotSheet(container, dataCfg, { themeCfg });

Preview

Excel Theme Preview

Original prompt

Act as a frontend developer. Your task is to create a new theme object for the AntV S2 spreadsheet library. This theme must perfectly replicate the default visual style of Microsoft Excel. Use the existing S2 theme structure as your starting point. Pay close attention to gridline colors, header styles (background, font), and the cell selection styles. Read [packages/s2-core/src/theme] and start


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copilot AI changed the title [WIP] Add new theme for AntV S2 to replicate Microsoft Excel style feat: add Microsoft Excel style theme palette Dec 25, 2025
Copilot AI requested a review from Alexzjt December 25, 2025 03:33
@Alexzjt
Copy link
Contributor

Alexzjt commented Dec 25, 2025

@copilot 在s2-site/examples/theme/default/demo处增加对应的示例。

Copy link
Contributor Author

Copilot AI commented Dec 25, 2025

@copilot 在s2-site/examples/theme/default/demo处增加对应的示例。

Added the Excel theme example at s2-site/examples/theme/default/demo/excel.ts and updated meta.json with the new demo entry (commit c7fa136).

Excel Theme Preview

@codecov-commenter
Copy link

codecov-commenter commented Dec 25, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 75.61%. Comparing base (ecdc9c8) to head (34ace9d).
⚠️ Report is 736 commits behind head on next.

Additional details and impacted files
@@            Coverage Diff             @@
##             next    #3268      +/-   ##
==========================================
- Coverage   75.77%   75.61%   -0.16%     
==========================================
  Files         257       51     -206     
  Lines       11994     1505   -10489     
  Branches     2464      285    -2179     
==========================================
- Hits         9088     1138    -7950     
+ Misses       1398      216    -1182     
+ Partials     1508      151    -1357     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@Alexzjt
Copy link
Contributor

Alexzjt commented Dec 25, 2025

@copilot 配色还是有问题,hover到单元格之后,被hover的单元格border应该是绿色系,background颜色应该接近灰色。选中之后的background颜色也不对。参考Excel的配色重新调整颜色

@github-actions
Copy link
Contributor

Size Change: +114 B (+0.02%)

Total Size: 628 kB

Filename Size Change
./packages/s2-core/dist/s2.min.js 263 kB +114 B (+0.04%)
ℹ️ View Unchanged
Filename Size
./packages/s2-core/dist/s2-extends.min.js 158 kB
./packages/s2-core/dist/s2.min.css 581 B
./packages/s2-react-components/dist/s2-react-components.min.css 2.55 kB
./packages/s2-react-components/dist/s2-react-components.min.js 124 kB
./packages/s2-react/dist/s2-react.min.css 1.3 kB
./packages/s2-react/dist/s2-react.min.js 38.5 kB
./packages/s2-vue/dist/s2-vue.min.css 1.59 kB
./packages/s2-vue/dist/s2-vue.min.js 38.3 kB

compressed-size-action

Copy link
Contributor Author

Copilot AI commented Dec 25, 2025

@copilot 配色还是有问题,hover到单元格之后,被hover的单元格border应该是绿色系,background颜色应该接近灰色。选中之后的background颜色也不对。参考Excel的...

Updated the Excel theme colors (commit 8ef2f8f):

  • Hover/Selected background: Changed from #D6EAF8 (light blue) to #F2F2F2 (Excel light gray)
  • Header hover: Changed from #C4D7B2 (light green) to #D9D9D9 (gray)
  • Selection border: Changed from #000000 (black) to #217346 (Excel green)

Updated Excel Theme

@github-actions
Copy link
Contributor

你好, @Copilot CI 执行失败, 请点击 [Details] 按钮查看, 并根据日志修复。

Hello, @Copilot CI run failed, please click the [Details] button for detailed log information and fix it.

@github-actions github-actions bot added the 🚨 test failed 单元测试挂了 label Dec 25, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🚨 test failed 单元测试挂了

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants