From 082982da29b6c359c5b09694a6c25cdaf0aee673 Mon Sep 17 00:00:00 2001 From: MiniPear Date: Mon, 9 Oct 2023 20:25:33 +0800 Subject: [PATCH] feat: add more attributes to theme set (#5613) --- site/.dumi/theme/components/ColorPicker.less | 30 +++ site/.dumi/theme/components/ColorPicker.tsx | 40 ++++ site/.dumi/theme/components/ConfigPanel.less | 13 ++ site/.dumi/theme/components/ConfigPanel.tsx | 171 +++++++++++++++--- site/.dumi/theme/components/DemosView.tsx | 8 +- site/.dumi/theme/components/builtins.ts | 86 +++++++++ site/.dumi/theme/examples/bar-aggregated.ts | 4 +- site/.dumi/theme/examples/bar-dodged.ts | 4 +- site/.dumi/theme/examples/bar-range.ts | 4 +- site/.dumi/theme/examples/grouped-box.ts | 4 +- site/.dumi/theme/examples/line-bar.ts | 10 +- .../theme/examples/line-connect-nulls.ts | 10 +- site/.dumi/theme/examples/line-normalized.ts | 4 +- .../.dumi/theme/examples/missing-data-area.ts | 10 +- site/.dumi/theme/examples/point-log.ts | 4 +- site/.dumi/theme/examples/rose-label.ts | 4 +- site/.dumi/theme/examples/sankey.ts | 4 +- site/.dumi/theme/examples/spider-label.ts | 4 +- site/.dumi/theme/examples/stacked-area.ts | 6 +- site/.dumi/theme/examples/treemap.ts | 4 +- site/.dumi/theme/index.tsx | 35 +++- site/.dumi/theme/utils/getG2Tokens.ts | 32 ++++ site/package.json | 3 +- src/theme/academy.ts | 32 +++- src/theme/dark.ts | 6 +- src/theme/light.ts | 8 +- 26 files changed, 463 insertions(+), 77 deletions(-) create mode 100644 site/.dumi/theme/components/ColorPicker.less create mode 100644 site/.dumi/theme/components/ColorPicker.tsx create mode 100644 site/.dumi/theme/components/builtins.ts create mode 100644 site/.dumi/theme/utils/getG2Tokens.ts diff --git a/site/.dumi/theme/components/ColorPicker.less b/site/.dumi/theme/components/ColorPicker.less new file mode 100644 index 0000000000..e9be7d57e0 --- /dev/null +++ b/site/.dumi/theme/components/ColorPicker.less @@ -0,0 +1,30 @@ +.color-picker-overlay { + // 重写颜色选择器样式 + + // 中间颜色滑轨部分 + .flexbox-fix:nth-last-child(3) { + & > :last-child { + display: none; + } + } + + // 中间 rgb 手动输入部分 + .flexbox-fix:nth-last-child(2) { + input { + width: 100% !important; + color: rgba(0, 0, 0, 0.65); + text-align: center; + } + label { + color: rgba(0, 0, 0, 0.45) !important; + } + } + + // 底部推荐色部分 + .flexbox-fix:last-child { + & > div { + width: 18px !important; + height: 18px !important; + } + } +} diff --git a/site/.dumi/theme/components/ColorPicker.tsx b/site/.dumi/theme/components/ColorPicker.tsx new file mode 100644 index 0000000000..03873dcb12 --- /dev/null +++ b/site/.dumi/theme/components/ColorPicker.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { SketchPicker } from 'react-color'; +import { Dropdown } from 'antd'; +import { BUILT_COLORS } from './builtins'; + +export function ColorPicker({ value, onChange, style = {}, className = '' }) { + function onColorChange(newColor) { + const { + rgb: { r, g, b, a }, + } = newColor; + const alpha = + value === undefined || value.toLowerCase() === 'transparent' ? 1 : a; + onChange(`rgba(${r}, ${g}, ${b}, ${alpha})`); + } + + return ( + + } + trigger={['click', 'hover']} + > + + + ); +} diff --git a/site/.dumi/theme/components/ConfigPanel.less b/site/.dumi/theme/components/ConfigPanel.less index 785ef249c4..a0b9cd2789 100644 --- a/site/.dumi/theme/components/ConfigPanel.less +++ b/site/.dumi/theme/components/ConfigPanel.less @@ -14,3 +14,16 @@ margin-right: 8px; } } + +.config-palette { + padding: 0px 0px !important; + width: 100%; + border-radius: 5px !important; + overflow: hidden; + + & > span { + display: grid; + grid-template-columns: repeat(10, 10%); + height: 100%; + } +} diff --git a/site/.dumi/theme/components/ConfigPanel.tsx b/site/.dumi/theme/components/ConfigPanel.tsx index 6f9e91e43b..b1b0d697a4 100644 --- a/site/.dumi/theme/components/ConfigPanel.tsx +++ b/site/.dumi/theme/components/ConfigPanel.tsx @@ -1,26 +1,18 @@ import * as React from 'react'; -import { Button, Collapse, Radio } from 'antd'; +import { Button, Collapse, Radio, Space, Divider, InputNumber } from 'antd'; import { UploadOutlined, CopyOutlined } from '@ant-design/icons'; -import { stdlib } from '@antv/g2'; import { copyToClipboard } from '../utils/copyToBoard'; import { exportDataToLocal } from '../utils/exportDataToLocal'; +import { ColorPicker } from './ColorPicker'; +import { + BUILT_CATEGORIES, + BUILT_THEMES, + BUILT_COLOR_ATTRIBUTES, + BUILT_PADDING_ATTRIBUTES, +} from './builtins'; import './ConfigPanel.less'; -const BUILT_THEMES = [ - { label: '默认风格', key: 'light' }, - { label: '暗色风格', key: 'dark' }, - { label: '学术风格', key: 'academy' }, -]; - -function getG2Theme(theme: string | Record) { - if (typeof theme === 'object') return theme; - - const library = stdlib(); - const themeToken = library[`theme.${theme}`](); - return themeToken; -} - -const Operations = ({ theme }) => { +const Operations = ({ tokens }) => { return (
Theme
@@ -30,10 +22,7 @@ const Operations = ({ theme }) => { type="primary" className="config-panel-button" onClick={() => - exportDataToLocal( - JSON.stringify(getG2Theme(theme)), - 'g2-theme.json', - ) + exportDataToLocal(JSON.stringify(tokens), 'g2-theme.json') } > 导出 @@ -41,7 +30,7 @@ const Operations = ({ theme }) => { @@ -51,17 +40,48 @@ const Operations = ({ theme }) => { }; export const ConfigPanel = (props) => { - const { theme, changeTheme, className = '' } = props; + const { + theme, + changeTheme, + tokens, + changeTokens, + changeSeed, + seed, + className = '', + } = props; + const { category10 } = tokens; + const encodePalette = (d) => d.join('-'); + const decodePalette = (d) => d.split('-'); + + function onThemeChange(e) { + changeTheme(e.target.value); + } + + function onPaletteChange(e) { + const { value } = e.target; + const palette = decodePalette(value); + const [defaultColor] = palette; + const { category20 } = tokens; + changeTokens({ + category10: palette, + category20: [...palette, ...category20.slice(10)], + color: defaultColor, + }); + } + + function onColorChange(d, i) { + const { category10 } = tokens; + const newCategory10 = [...category10]; + newCategory10.splice(i, 1, d); + onPaletteChange({ target: { value: newCategory10.join('-') } }); + } return (
- + - - changeTheme(e.target.value)} - value={theme} - > + + {BUILT_THEMES.map((d) => ( {d.label} @@ -69,6 +89,99 @@ export const ConfigPanel = (props) => { ))} + + + + {BUILT_CATEGORIES.map((category10) => ( + + {category10.map((d) => ( + + ))} + + ))} + + + 自定义 + +
encodePalette(d) === encodePalette(category10), + ) + ? '#d9d9d9' + : '#873bf4', + }} + > + {category10.map((d, i) => ( + onColorChange(d, i)} /> + ))} +
+ + + + + {BUILT_COLOR_ATTRIBUTES.map((d) => ( +
+ {d.name} + changeSeed(d.value, color)} + style={{ + display: 'block', + height: 32, + width: 32, + borderRadius: 5, + border: '1px solid #d9d9d9', + }} + /> +
+ ))} + + + + + {BUILT_PADDING_ATTRIBUTES.map((d) => ( +
+ {d.name} + changeSeed(d.value, value)} + value={seed[d.value]} + /> +
+ ))} + +
); diff --git a/site/.dumi/theme/components/DemosView.tsx b/site/.dumi/theme/components/DemosView.tsx index d248b81c8d..6b36df83ee 100644 --- a/site/.dumi/theme/components/DemosView.tsx +++ b/site/.dumi/theme/components/DemosView.tsx @@ -4,7 +4,7 @@ import { Chart } from '@antv/g2'; import { examples } from '../examples'; import './DemosView.less'; -const DemoContainer = ({ theme, className = '', render }) => { +const DemoContainer = ({ theme, className = '', render, tokens = {} }) => { const domRef = React.useRef(null); const chartRef = React.useRef(null); @@ -15,6 +15,7 @@ const DemoContainer = ({ theme, className = '', render }) => { theme, width: container.clientWidth, height: container.clientHeight, + tokens, }); } @@ -26,7 +27,7 @@ const DemoContainer = ({ theme, className = '', render }) => { chart.destroy(); init(theme); } - }, [theme]); + }, [theme, tokens]); React.useLayoutEffect(() => { const el = domRef.current; @@ -47,7 +48,7 @@ const DemoContainer = ({ theme, className = '', render }) => { return
; }; -export const DemosView = ({ theme, className = '' }) => { +export const DemosView = ({ theme, tokens, className = '' }) => { function openExample(example) { // @ts-ignore window.open(`/examples/${example.link}`); @@ -66,6 +67,7 @@ export const DemosView = ({ theme, className = '' }) => { className="demo-container" theme={theme} render={example.render} + tokens={tokens} />
diff --git a/site/.dumi/theme/components/builtins.ts b/site/.dumi/theme/components/builtins.ts new file mode 100644 index 0000000000..e9b14599cd --- /dev/null +++ b/site/.dumi/theme/components/builtins.ts @@ -0,0 +1,86 @@ +export const BUILT_THEMES = [ + { label: '默认风格', key: 'light' }, + { label: '暗色风格', key: 'dark' }, + { label: '学术风格', key: 'academy' }, +]; + +export const BUILT_COLOR_ATTRIBUTES = [ + { name: '默认颜色', value: 'colorDefault' }, + { name: '边框颜色', value: 'colorStroke' }, + { name: '主要颜色', value: 'colorBlack' }, + { name: '次要颜色', value: 'colorWhite' }, + { name: '背景颜色', value: 'colorBackground' }, +]; + +export const BUILT_PADDING_ATTRIBUTES = [ + { name: '间距1', value: 'padding1' }, + { name: '间距2', value: 'padding2' }, + { name: '间距3', value: 'padding3' }, +]; + +export const BUILT_CATEGORIES = [ + [ + '#1783FF', + '#00C9C9', + '#F0884D', + '#D580FF', + '#7863FF', + '#60C42D', + '#BD8F24', + '#FF80CA', + '#2491B3', + '#17C76F', + ], + [ + '#5B8FF9', + '#5AD8A6', + '#5D7092', + '#F6BD16', + '#6F5EF9', + '#6DC8EC', + '#945FB9', + '#FF9845', + '#1E9493', + '#FF99C3', + ], + [ + '#FF6B3B', + '#626681', + '#FFC100', + '#9FB40F', + '#76523B', + '#DAD5B5', + '#0E8E89', + '#E19348', + '#F383A2', + '#247FEA', + ], + [ + '#025DF4', + '#DB6BCF', + '#2498D1', + '#BBBDE6', + '#4045B2', + '#21A97A', + '#FF745A', + '#007E99', + '#FFA8A8', + '#2391FF', + ], +]; + +export const BUILT_COLORS = [ + '#F4664A', + '#E86452', + '#FF9845', + '#FAAD14', + '#F6BD16', + '#5AD8A6', + '#30BF78', + '#6DC8EC', + '#5B8FF9', + '#1E9493', + '#945FB9', + '#FF99C3', + '#5D7092', +]; diff --git a/site/.dumi/theme/examples/bar-aggregated.ts b/site/.dumi/theme/examples/bar-aggregated.ts index 28116fca43..4a17f86022 100644 --- a/site/.dumi/theme/examples/bar-aggregated.ts +++ b/site/.dumi/theme/examples/bar-aggregated.ts @@ -1,13 +1,13 @@ import { Chart } from '@antv/g2'; -export const barAggregated = ({ container, theme, width, height }) => { +export const barAggregated = ({ container, theme, width, height, tokens }) => { const chart = new Chart({ container, width, height, }); - chart.theme({ type: theme }); + chart.theme({ type: theme, ...tokens }); chart .interval() diff --git a/site/.dumi/theme/examples/bar-dodged.ts b/site/.dumi/theme/examples/bar-dodged.ts index 631e5d21a4..89c7bacd07 100644 --- a/site/.dumi/theme/examples/bar-dodged.ts +++ b/site/.dumi/theme/examples/bar-dodged.ts @@ -3,14 +3,14 @@ */ import { Chart } from '@antv/g2'; -export const BarDodged = ({ container, theme, width, height }) => { +export const BarDodged = ({ container, theme, width, height, tokens }) => { const chart = new Chart({ container, width, height, }); - chart.theme({ type: theme }); + chart.theme({ type: theme, ...tokens }); chart .interval() diff --git a/site/.dumi/theme/examples/bar-range.ts b/site/.dumi/theme/examples/bar-range.ts index 192d290c25..c31cc8c586 100644 --- a/site/.dumi/theme/examples/bar-range.ts +++ b/site/.dumi/theme/examples/bar-range.ts @@ -1,13 +1,13 @@ import { Chart } from '@antv/g2'; -export const BarRange = ({ container, theme, width, height }) => { +export const BarRange = ({ container, theme, width, height, tokens }) => { const chart = new Chart({ container, width, height, }); - chart.theme({ type: theme }); + chart.theme({ type: theme, ...tokens }); chart .interval() diff --git a/site/.dumi/theme/examples/grouped-box.ts b/site/.dumi/theme/examples/grouped-box.ts index 1f74681c0d..593f2b5ab8 100644 --- a/site/.dumi/theme/examples/grouped-box.ts +++ b/site/.dumi/theme/examples/grouped-box.ts @@ -1,6 +1,6 @@ import { Chart } from '@antv/g2'; -export const groupedBox = ({ container, theme, width, height }) => { +export const groupedBox = ({ container, theme, width, height, tokens }) => { const data = [ { Species: 'I. setosa', @@ -101,7 +101,7 @@ export const groupedBox = ({ container, theme, width, height }) => { { name: 'max', channel: 'y4' }, ]); - chart.theme({ type: theme }); + chart.theme({ type: theme, ...tokens }); chart.render(); diff --git a/site/.dumi/theme/examples/line-bar.ts b/site/.dumi/theme/examples/line-bar.ts index 9f57d5f90b..0be50bb675 100644 --- a/site/.dumi/theme/examples/line-bar.ts +++ b/site/.dumi/theme/examples/line-bar.ts @@ -1,6 +1,6 @@ import { Chart } from '@antv/g2'; -export const lineBar = ({ container, theme, width, height }) => { +export const lineBar = ({ container, theme, width, height, tokens }) => { const data = [ { time: '10:10', call: 4, waiting: 2, people: 2 }, { time: '10:15', call: 2, waiting: 6, people: 3 }, @@ -17,7 +17,7 @@ export const lineBar = ({ container, theme, width, height }) => { height, }); - chart.theme({ type: theme }); + chart.theme({ type: theme, ...tokens }); chart.data(data); @@ -25,7 +25,8 @@ export const lineBar = ({ container, theme, width, height }) => { .interval() .encode('x', 'time') .encode('y', 'waiting') - .axis('y', { titleFill: '#5B8FF9', title: 'Waiting' }) + .encode('color', () => 'waiting') + .axis('y', { title: 'Waiting' }) .scale('y', { nice: true }); chart @@ -33,14 +34,13 @@ export const lineBar = ({ container, theme, width, height }) => { .encode('x', 'time') .encode('y', 'people') .encode('shape', 'smooth') - .style('stroke', '#fdae6b') + .encode('color', () => 'people') .style('lineWidth', 2) .scale('y', { independent: true, nice: true }) .axis('y', { position: 'right', grid: null, title: 'People', - titleFill: '#fdae6b', }); chart.render(); diff --git a/site/.dumi/theme/examples/line-connect-nulls.ts b/site/.dumi/theme/examples/line-connect-nulls.ts index d8ea8880c6..1f35480876 100644 --- a/site/.dumi/theme/examples/line-connect-nulls.ts +++ b/site/.dumi/theme/examples/line-connect-nulls.ts @@ -3,14 +3,20 @@ */ import { Chart } from '@antv/g2'; -export const lineConnectNulls = ({ container, theme, width, height }) => { +export const lineConnectNulls = ({ + container, + theme, + width, + height, + tokens, +}) => { const chart = new Chart({ container, width, height, }); - chart.theme({ type: theme }); + chart.theme({ type: theme, ...tokens }); chart .line() diff --git a/site/.dumi/theme/examples/line-normalized.ts b/site/.dumi/theme/examples/line-normalized.ts index 97b7756a0b..bc94e4a802 100644 --- a/site/.dumi/theme/examples/line-normalized.ts +++ b/site/.dumi/theme/examples/line-normalized.ts @@ -1,13 +1,13 @@ import { Chart } from '@antv/g2'; -export const lineNormalized = ({ container, theme, width, height }) => { +export const lineNormalized = ({ container, theme, width, height, tokens }) => { const chart = new Chart({ container, width, height, }); - chart.theme({ type: theme }); + chart.theme({ type: theme, ...tokens }); chart .line() diff --git a/site/.dumi/theme/examples/missing-data-area.ts b/site/.dumi/theme/examples/missing-data-area.ts index 4da464c8da..8f6069ffbf 100644 --- a/site/.dumi/theme/examples/missing-data-area.ts +++ b/site/.dumi/theme/examples/missing-data-area.ts @@ -1,13 +1,19 @@ import { Chart } from '@antv/g2'; -export const missingDataArea = ({ container, theme, width, height }) => { +export const missingDataArea = ({ + container, + theme, + width, + height, + tokens, +}) => { const chart = new Chart({ container, width, height, }); - chart.theme({ type: theme }); + chart.theme({ type: theme, ...tokens }); chart.data({ type: 'fetch', diff --git a/site/.dumi/theme/examples/point-log.ts b/site/.dumi/theme/examples/point-log.ts index 7fcc012e0f..1f9eae6069 100644 --- a/site/.dumi/theme/examples/point-log.ts +++ b/site/.dumi/theme/examples/point-log.ts @@ -1,13 +1,13 @@ import { Chart } from '@antv/g2'; -export const pointLog = ({ container, theme, width, height }) => { +export const pointLog = ({ container, theme, width, height, tokens }) => { const chart = new Chart({ container, width, height, }); - chart.theme({ type: theme }); + chart.theme({ type: theme, ...tokens }); chart .point() diff --git a/site/.dumi/theme/examples/rose-label.ts b/site/.dumi/theme/examples/rose-label.ts index 15d5b84cad..8c6aaf3c04 100644 --- a/site/.dumi/theme/examples/rose-label.ts +++ b/site/.dumi/theme/examples/rose-label.ts @@ -1,13 +1,13 @@ import { Chart } from '@antv/g2'; -export const roseLabel = ({ container, theme, width, height }) => { +export const roseLabel = ({ container, theme, width, height, tokens }) => { const chart = new Chart({ container, width, height, }); - chart.theme({ type: theme }); + chart.theme({ type: theme, tokens }); chart .interval() diff --git a/site/.dumi/theme/examples/sankey.ts b/site/.dumi/theme/examples/sankey.ts index ddd108bc7b..4ba0070c6e 100644 --- a/site/.dumi/theme/examples/sankey.ts +++ b/site/.dumi/theme/examples/sankey.ts @@ -1,13 +1,13 @@ import { Chart } from '@antv/g2'; -export const sankey = ({ container, theme, width, height }) => { +export const sankey = ({ container, theme, width, height, tokens }) => { const chart = new Chart({ container, width, height, }); - chart.theme({ type: theme }); + chart.theme({ type: theme, ...tokens }); chart .sankey() diff --git a/site/.dumi/theme/examples/spider-label.ts b/site/.dumi/theme/examples/spider-label.ts index f5783976f1..d86c8e4b74 100644 --- a/site/.dumi/theme/examples/spider-label.ts +++ b/site/.dumi/theme/examples/spider-label.ts @@ -1,6 +1,6 @@ import { Chart } from '@antv/g2'; -export const spiderLabel = ({ container, theme, width, height }) => { +export const spiderLabel = ({ container, theme, width, height, tokens }) => { const chart = new Chart({ container, width, @@ -13,7 +13,7 @@ export const spiderLabel = ({ container, theme, width, height }) => { outerRadius: 0.8, }); - chart.theme({ type: theme }); + chart.theme({ type: theme, ...tokens }); chart .interval() diff --git a/site/.dumi/theme/examples/stacked-area.ts b/site/.dumi/theme/examples/stacked-area.ts index c8084c4649..d1efd3ae55 100644 --- a/site/.dumi/theme/examples/stacked-area.ts +++ b/site/.dumi/theme/examples/stacked-area.ts @@ -1,13 +1,13 @@ import { Chart } from '@antv/g2'; -export const stackedArea = ({ container, theme, width, height }) => { +export const stackedArea = ({ container, theme, width, height, tokens }) => { const chart = new Chart({ container, width, height, }); - chart.theme({ type: theme }); + chart.theme({ type: theme, ...tokens }); chart.data({ type: 'fetch', @@ -23,7 +23,7 @@ export const stackedArea = ({ container, theme, width, height }) => { .encode('y', 'unemployed') .encode('color', 'industry') .encode('shape', 'smooth') - .legend('color', { size: 20 }); + .legend(false); chart.render(); diff --git a/site/.dumi/theme/examples/treemap.ts b/site/.dumi/theme/examples/treemap.ts index fc5518a157..c42e49d97d 100644 --- a/site/.dumi/theme/examples/treemap.ts +++ b/site/.dumi/theme/examples/treemap.ts @@ -1,13 +1,13 @@ import { Chart } from '@antv/g2'; -export const treemap = ({ container, theme, width, height }) => { +export const treemap = ({ container, theme, width, height, tokens }) => { const chart = new Chart({ container, width, height, }); - chart.theme({ type: theme }); + chart.theme({ type: theme, ...tokens }); chart .treemap() diff --git a/site/.dumi/theme/index.tsx b/site/.dumi/theme/index.tsx index b65bd4fcd6..ed94b531cb 100644 --- a/site/.dumi/theme/index.tsx +++ b/site/.dumi/theme/index.tsx @@ -3,16 +3,41 @@ import { Layout } from 'antd'; import { RightOutlined } from '@ant-design/icons'; import { ConfigPanel } from './components/ConfigPanel'; import { DemosView } from './components/DemosView'; +import { getG2SeedTokens, getG2Tokens } from './utils/getG2Tokens'; +import { create } from '../../../src/theme/create'; import './index.less'; +import { deepMix } from '@antv/util'; const Page: React.FC = () => { - const [theme, changeTheme] = React.useState('light'); + const [theme, setTheme] = React.useState('light'); + const [tokens, setTokens] = React.useState(getG2Tokens(theme)); + const [seed, setSeed] = React.useState(getG2SeedTokens(theme)); + const [tmpTokens, setTmpTokens] = React.useState({}); const [collapsed, toggleCollapsed] = React.useState(false); + function onChangeTheme(theme) { + setTheme(theme); + setTokens(getG2Tokens(theme)); + setSeed(getG2SeedTokens(theme)); + setTmpTokens({}); + } + + function onChangeTokens(tmp) { + setTmpTokens(tmp); + setTokens(deepMix({}, tokens, tmp)); + } + + function onChangeSeed(name, value) { + const newSeed = { ...seed, [name]: value }; + const defaults = create(newSeed); + setSeed(newSeed); + setTokens(deepMix(defaults, tmpTokens)); + } + return (
- +
{ /> diff --git a/site/.dumi/theme/utils/getG2Tokens.ts b/site/.dumi/theme/utils/getG2Tokens.ts new file mode 100644 index 0000000000..04103b03b1 --- /dev/null +++ b/site/.dumi/theme/utils/getG2Tokens.ts @@ -0,0 +1,32 @@ +import { stdlib } from '@antv/g2'; +import { tokens as lightSeedTokens } from '../../../../src/theme/light'; +import { tokens as darkSeedTokens } from '../../../../src/theme/dark'; +import { tokens as academySeedTokens } from '../../../../src/theme/academy'; + +function normalizePalette(palette) { + if (Array.isArray(palette)) return palette; + const library = stdlib(); + const colors = library[`palette.${palette}`](); + return colors; +} + +export function getG2Tokens(theme: string | Record) { + if (typeof theme === 'object') return theme; + const library = stdlib(); + const themeToken = library[`theme.${theme}`](); + const { category10, category20 } = themeToken; + return { + ...themeToken, + category10: normalizePalette(category10), + category20: normalizePalette(category20), + }; +} + +export function getG2SeedTokens(theme) { + const map = { + light: lightSeedTokens, + dark: darkSeedTokens, + academy: academySeedTokens, + }; + return map[theme] || lightSeedTokens; +} diff --git a/site/package.json b/site/package.json index 1cc768ff9b..ef0f72776b 100644 --- a/site/package.json +++ b/site/package.json @@ -12,8 +12,8 @@ "@antv/dumi-theme-antv": "^0.3.0", "@antv/g-lottie-player": "^0.2.7", "@antv/g-pattern": "^1.2.7", - "@antv/g-plugin-a11y": "^0.6.7", "@antv/g-plugin-3d": "^1.9.5", + "@antv/g-plugin-a11y": "^0.6.7", "@antv/g-plugin-control": "^1.9.5", "@antv/g-plugin-rough-canvas-renderer": "^1.9.7", "@antv/g-svg": "^1.10.7", @@ -32,6 +32,7 @@ "dumi": "^2.0.0", "fecha": "^4.2.3", "lodash": "^4.17.21", + "react-color": "^2.19.3", "topojson": "^3.0.2", "webfontloader": "1.6.28" }, diff --git a/src/theme/academy.ts b/src/theme/academy.ts index f6dd092dd7..17a1f12823 100644 --- a/src/theme/academy.ts +++ b/src/theme/academy.ts @@ -2,14 +2,36 @@ import { deepMix } from '@antv/util'; import { ThemeComponent as TC, Theme } from '../runtime'; import { create } from './create'; -const defaults = create({ +export const tokens = { colorBlack: '#000', colorWhite: '#fff', colorStroke: '#888', colorDefault: '#4e79a7', colorBackground: 'transparent', - category10: 'tableau10', - category20: 'tableau10', + category10: [ + '#4e79a7', + '#f28e2c', + '#e15759', + '#76b7b2', + '#59a14f', + '#edc949', + '#af7aa1', + '#ff9da7', + '#9c755f', + '#bab0ab', + ], + category20: [ + '#4e79a7', + '#f28e2c', + '#e15759', + '#76b7b2', + '#59a14f', + '#edc949', + '#af7aa1', + '#ff9da7', + '#9c755f', + '#bab0ab', + ], padding1: 8, padding2: 12, padding3: 20, @@ -18,7 +40,9 @@ const defaults = create({ alpha45: 0.45, alpha25: 0.25, alpha10: 0.1, -}); +}; + +const defaults = create(tokens); export type AcademyOptions = Theme; diff --git a/src/theme/dark.ts b/src/theme/dark.ts index 0a8d9ea667..c4e6a476c8 100644 --- a/src/theme/dark.ts +++ b/src/theme/dark.ts @@ -4,7 +4,7 @@ import { create } from './create'; export type DarkOptions = Theme; -const defaults = create({ +export const tokens = { colorBlack: '#fff', colorWhite: '#000', colorStroke: '#416180', @@ -52,7 +52,9 @@ const defaults = create({ alpha45: 0.45, alpha25: 0.25, alpha10: 0.25, -}); +}; + +const defaults = create(tokens); export const Dark: TC = (options) => { return deepMix( diff --git a/src/theme/light.ts b/src/theme/light.ts index dc577dbd34..ba0ff04f5c 100644 --- a/src/theme/light.ts +++ b/src/theme/light.ts @@ -2,9 +2,9 @@ import { deepMix } from '@antv/util'; import { ThemeComponent as TC, Theme } from '../runtime'; import { create } from './create'; -const defaults = create({ +export const tokens = { colorBlack: '#1D2129', - colorWhite: '#fff', + colorWhite: '#ffffff', colorStroke: '#416180', colorDefault: '#1783FF', colorBackground: 'transparent', @@ -50,7 +50,9 @@ const defaults = create({ alpha45: 0.45, alpha25: 0.25, alpha10: 0.1, -}); +}; + +const defaults = create(tokens); export type LightOptions = Theme;