From eddfd4e3fda02fc33b4854590ed04a71d9281994 Mon Sep 17 00:00:00 2001
From: yuyang <uyarnchen@gmail.com>
Date: Tue, 17 Jan 2023 17:42:27 +0800
Subject: [PATCH] feat: generate color by tvision-color (#144)

* feat: generate color by tvision-color

* chore: remove built-in theme
---
 package.json                                  |   4 +-
 src/components/Board/index.tsx                |   2 +-
 src/configs/color.ts                          |  21 --
 src/main.tsx                                  |   1 -
 src/modules/global/index.ts                   |  23 +--
 .../Dashboard/Base/components/MiddleChart.tsx |   4 +-
 .../Dashboard/Base/components/RankList.tsx    |   4 +-
 .../Detail/components/MonthPurchase.tsx       |   2 +-
 .../Detail/components/PurchaseTrend.tsx       |   2 +-
 .../Detail/components/Satisfaction.tsx        |   1 +
 src/pages/Detail/Advanced/components/Base.tsx |   2 +-
 .../Detail/Advanced/components/Detail.tsx     |   2 +-
 .../Detail/Advanced/components/Product.tsx    |   2 +-
 .../Detail/Advanced/components/Progress.tsx   |   2 +-
 src/pages/Detail/Base/index.tsx               |   4 +-
 .../Detail/Deploy/components/BottomTable.tsx  |   2 +-
 .../Detail/Deploy/components/TopChart.tsx     |   5 +-
 src/pages/List/Base/index.tsx                 |  17 +-
 .../List/Card/components/ProductCard.tsx      |   1 +
 src/pages/User/index.tsx                      |   7 +-
 src/styles/theme.less                         | 194 ------------------
 src/utils/color.ts                            |  11 +-
 22 files changed, 49 insertions(+), 264 deletions(-)
 delete mode 100644 src/styles/theme.less

diff --git a/package.json b/package.json
index 6e9c579..0431f75 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tdesign-react-starter",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "private": true,
   "scripts": {
     "dev:mock": "vite --open --mode mock",
@@ -59,7 +59,7 @@
     "react-router-dom": "^6.3.0",
     "tdesign-icons-react": "^0.1.6",
     "tdesign-react": "^0.45.1",
-    "tvision-color": "^1.4.0"
+    "tvision-color": "^1.5.0"
   },
   "browserslist": {
     "production": [
diff --git a/src/components/Board/index.tsx b/src/components/Board/index.tsx
index f968571..feb6ccf 100644
--- a/src/components/Board/index.tsx
+++ b/src/components/Board/index.tsx
@@ -49,7 +49,7 @@ export const TrendIcon = ({ trend, trendNum }: { trend?: ETrend; trendNum?: stri
   </div>
 );
 
-const Board = ({ title, count, desc, trend, trendNum, Icon, dark, border }: IBoardProps) => (
+const Board = ({ title, count, desc, trend, trendNum, Icon, dark, border = false }: IBoardProps) => (
   <Card
     title={<span className={Style.boardTitle}>{title}</span>}
     className={classnames({
diff --git a/src/configs/color.ts b/src/configs/color.ts
index 34c9add..46b4fff 100644
--- a/src/configs/color.ts
+++ b/src/configs/color.ts
@@ -4,27 +4,6 @@ export const defaultColor = ['#0052d9', '#0594fa', '#00a870', '#ebb105', '#ed7b2
 
 export const darkColor = ['#4582e6', '#29a4fb', '#03a56f', '#ca8d03', '#ed7b2f', '#ea7b84', '#f172c5', '#ab87d5'];
 
-export const colorMap: {
-  [key: string]: string;
-} = {
-  '#0052d9': '',
-  '#0594fa': 'cyan',
-  '#00a870': 'green',
-  '#ebb105': 'yellow',
-  '#ed7b2f': 'orange',
-  '#e34d59': 'red',
-  '#ed49b4': 'pink',
-  '#834ec2': 'purple',
-
-  '#4582e6': '',
-  '#29a4fb': 'cyan',
-  '#03a56f': 'green',
-  '#ca8d03': 'yellow',
-  '#ea7b84': 'red',
-  '#f172c5': 'pink',
-  '#ab87d5': 'purple',
-};
-
 export const CHART_COLORS = {
   [ETheme.light]: {
     textColor: 'rgba(0, 0, 0, 0.9)',
diff --git a/src/main.tsx b/src/main.tsx
index 64e21a4..5b2e825 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -7,7 +7,6 @@ import App from 'layouts/index';
 
 import 'tdesign-react/es/style/index.css';
 
-import './styles/theme.less';
 import './styles/index.less';
 
 const env = import.meta.env.MODE || 'development';
diff --git a/src/modules/global/index.ts b/src/modules/global/index.ts
index d23eb67..9f68e32 100644
--- a/src/modules/global/index.ts
+++ b/src/modules/global/index.ts
@@ -1,7 +1,7 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { ETheme } from 'types/index.d';
 import { Color } from 'tvision-color';
-import { CHART_COLORS, defaultColor, colorMap } from 'configs/color';
+import { CHART_COLORS, defaultColor } from 'configs/color';
 import { generateColorMap, insertThemeStylesheet } from 'utils/color';
 import { RootState } from '../store';
 import { version } from '../../../package.json';
@@ -108,18 +108,17 @@ const globalSlice = createSlice({
         state.color = action?.payload;
         const mode = state.theme;
 
-        let colorType = colorMap?.[action?.payload];
-        if (!colorType) {
-          colorType = action?.payload;
-          const newPalette = Color.getPaletteByGradation({
-            colors: [colorType],
-            step: 10,
-          })[0];
-          const newColorMap = generateColorMap(colorType, newPalette, mode);
-          insertThemeStylesheet(colorType, newColorMap, mode);
-        }
+        const hex = action?.payload;
 
-        document.documentElement.setAttribute('theme-color', colorType || '');
+        const { colors: newPalette, primary: brandColorIndex } = Color.getColorGradations({
+          colors: [hex],
+          step: 10,
+          remainInput: false, // 是否保留输入 不保留会矫正不合适的主题色
+        })[0];
+        const newColorMap = generateColorMap(hex, newPalette, mode, brandColorIndex);
+        insertThemeStylesheet(hex, newColorMap, mode);
+
+        document.documentElement.setAttribute('theme-color', hex || '');
       }
     },
     switchLayout: (state, action) => {
diff --git a/src/pages/Dashboard/Base/components/MiddleChart.tsx b/src/pages/Dashboard/Base/components/MiddleChart.tsx
index a731cf9..c3d4c17 100644
--- a/src/pages/Dashboard/Base/components/MiddleChart.tsx
+++ b/src/pages/Dashboard/Base/components/MiddleChart.tsx
@@ -31,12 +31,12 @@ const MiddleChart = () => {
   return (
     <Row gutter={[16, 16]} className={Style.middleChartPanel}>
       <Col xs={12} xl={9}>
-        <Card title='统计数据' subtitle='(万元)' actions={LastWeekDatePicker(onTimeChange)}>
+        <Card title='统计数据' subtitle='(万元)' actions={LastWeekDatePicker(onTimeChange)} bordered={false}>
           <ReactEcharts option={dynamicLineChartOption} notMerge={true} lazyUpdate={false} />
         </Card>
       </Col>
       <Col xs={12} xl={3}>
-        <Card title='销售渠道' subtitle='2021-12'>
+        <Card title='销售渠道' subtitle='2021-12' bordered={false}>
           <ReactEcharts option={dynamicPieChartOption} notMerge={true} lazyUpdate={true} />
         </Card>
       </Col>
diff --git a/src/pages/Dashboard/Base/components/RankList.tsx b/src/pages/Dashboard/Base/components/RankList.tsx
index 953f187..e04de55 100644
--- a/src/pages/Dashboard/Base/components/RankList.tsx
+++ b/src/pages/Dashboard/Base/components/RankList.tsx
@@ -118,12 +118,12 @@ const PURCHASE_COLUMNS: TdPrimaryTableProps['columns'] = [
 const RankList = () => (
   <Row gutter={[16, 16]} className={Style.rankListPanel}>
     <Col xs={12} xl={6} span={12}>
-      <Card title='销售订单排名' actions={DateRadioGroup}>
+      <Card title='销售订单排名' actions={DateRadioGroup} bordered={false}>
         <Table columns={SALE_COLUMNS} rowKey='productName' size='medium' data={SALE_TREND_LIST} />
       </Card>
     </Col>
     <Col xs={12} xl={6} span={12}>
-      <Card title='采购订单排名' actions={DateRadioGroup}>
+      <Card title='采购订单排名' actions={DateRadioGroup} bordered={false}>
         <Table columns={PURCHASE_COLUMNS} rowKey='productName' size='medium' data={PURCHASE_TREND_LIST} />
       </Card>
     </Col>
diff --git a/src/pages/Dashboard/Detail/components/MonthPurchase.tsx b/src/pages/Dashboard/Detail/components/MonthPurchase.tsx
index c7a66ef..c00afd4 100644
--- a/src/pages/Dashboard/Detail/components/MonthPurchase.tsx
+++ b/src/pages/Dashboard/Detail/components/MonthPurchase.tsx
@@ -4,7 +4,7 @@ import Board from 'components/Board';
 import { PANE_LIST } from '../constant';
 
 const MonthPurchase = () => (
-  <Card title='本月采购申请情况'>
+  <Card title='本月采购申请情况' bordered={false}>
     <Row gutter={[16, 16]}>
       {PANE_LIST.map((item) => (
         <Col key={item.title} xs={6} xl={3} span={12}>
diff --git a/src/pages/Dashboard/Detail/components/PurchaseTrend.tsx b/src/pages/Dashboard/Detail/components/PurchaseTrend.tsx
index 1f6ff37..36726a0 100644
--- a/src/pages/Dashboard/Detail/components/PurchaseTrend.tsx
+++ b/src/pages/Dashboard/Detail/components/PurchaseTrend.tsx
@@ -70,7 +70,7 @@ const PurchaseTrend = () => {
   return (
     <Row className={Style.purchaseTrendPanel} gutter={[16, 16]}>
       <Col xs={12} xl={9}>
-        <Card title='采购商品申请趋势' subtitle='(件)' actions={LastWeekDatePicker(onTimeChange)}>
+        <Card title='采购商品申请趋势' subtitle='(件)' actions={LastWeekDatePicker(onTimeChange)} bordered={false}>
           <ReactEcharts
             option={dynamicChartOptions} // option：图表配置项
             notMerge={true}
diff --git a/src/pages/Dashboard/Detail/components/Satisfaction.tsx b/src/pages/Dashboard/Detail/components/Satisfaction.tsx
index a327120..15e15eb 100644
--- a/src/pages/Dashboard/Detail/components/Satisfaction.tsx
+++ b/src/pages/Dashboard/Detail/components/Satisfaction.tsx
@@ -28,6 +28,7 @@ const Satisfaction = () => {
             <Button className={Style.exportBtn}>导出数据</Button>
           </div>
         }
+        bordered={false}
       >
         <ReactEcharts
           option={dynamicChartOption} // option：图表配置项
diff --git a/src/pages/Detail/Advanced/components/Base.tsx b/src/pages/Detail/Advanced/components/Base.tsx
index 870ce5c..488d9c1 100644
--- a/src/pages/Detail/Advanced/components/Base.tsx
+++ b/src/pages/Detail/Advanced/components/Base.tsx
@@ -5,7 +5,7 @@ import { dataInfo } from '../consts';
 import Style from './Base.module.less';
 
 const Base = () => (
-  <Card title='基本信息'>
+  <Card title='基本信息' bordered={false}>
     <div className={Style.infoBox}>
       {dataInfo.map((item) => (
         <div key={item.id} className={Style.infoBoxItem}>
diff --git a/src/pages/Detail/Advanced/components/Detail.tsx b/src/pages/Detail/Advanced/components/Detail.tsx
index 7cc7e16..664090e 100644
--- a/src/pages/Detail/Advanced/components/Detail.tsx
+++ b/src/pages/Detail/Advanced/components/Detail.tsx
@@ -4,7 +4,7 @@ import { dataBuyList, total } from '../consts';
 import Style from '../index.module.less';
 
 const Detail = () => (
-  <Card title='产品采购明细' className={Style.cardBox}>
+  <Card title='产品采购明细' className={Style.cardBox} bordered={false}>
     <Table
       data={dataBuyList}
       columns={[
diff --git a/src/pages/Detail/Advanced/components/Product.tsx b/src/pages/Detail/Advanced/components/Product.tsx
index b8e0e22..4370f62 100644
--- a/src/pages/Detail/Advanced/components/Product.tsx
+++ b/src/pages/Detail/Advanced/components/Product.tsx
@@ -4,7 +4,7 @@ import ProductCard from './ProductCard';
 import Style from '../index.module.less';
 
 const Product = () => (
-  <Card title='产品目录' className={Style.cardBox}>
+  <Card title='产品目录' className={Style.cardBox} bordered={false}>
     <div>
       <Row gutter={[16, 16]}>
         <Col xs={12} xl={4}>
diff --git a/src/pages/Detail/Advanced/components/Progress.tsx b/src/pages/Detail/Advanced/components/Progress.tsx
index c4db55a..084201c 100644
--- a/src/pages/Detail/Advanced/components/Progress.tsx
+++ b/src/pages/Detail/Advanced/components/Progress.tsx
@@ -6,7 +6,7 @@ import Style from '../index.module.less';
 const { StepItem } = Steps;
 
 const Progress = () => (
-  <Card title='发票进度' className={Style.cardBox}>
+  <Card title='发票进度' className={Style.cardBox} bordered={false}>
     <Steps current={stepCurrent}>
       {dataStep.map((item) => (
         <StepItem key={item.id} title={item.name} content={item.detail} />
diff --git a/src/pages/Detail/Base/index.tsx b/src/pages/Detail/Base/index.tsx
index ba105f5..df945d7 100644
--- a/src/pages/Detail/Base/index.tsx
+++ b/src/pages/Detail/Base/index.tsx
@@ -8,7 +8,7 @@ const { StepItem } = Steps;
 
 export default memo(() => (
   <div>
-    <Card title='基本信息'>
+    <Card title='基本信息' bordered={false}>
       <div className={classnames(Style.infoBox)}>
         {dataInfo.map((item) => (
           <div key={item.id} className={classnames(Style.infoBoxItem)}>
@@ -26,7 +26,7 @@ export default memo(() => (
         ))}
       </div>
     </Card>
-    <Card title='变更记录' className={Style.logBox}>
+    <Card title='变更记录' className={Style.logBox} bordered={false}>
       <div>
         <Steps layout='vertical' theme='dot' current={1}>
           {dataStep.map((item) => (
diff --git a/src/pages/Detail/Deploy/components/BottomTable.tsx b/src/pages/Detail/Deploy/components/BottomTable.tsx
index df7376a..c384a73 100644
--- a/src/pages/Detail/Deploy/components/BottomTable.tsx
+++ b/src/pages/Detail/Deploy/components/BottomTable.tsx
@@ -54,7 +54,7 @@ const BottomTable = () => {
 
   return (
     <>
-      <Card title='项目列表'>
+      <Card title='项目列表' bordered={false}>
         <Table
           columns={getTableColumns(TABLE_COLUMNS)}
           rowKey='index'
diff --git a/src/pages/Detail/Deploy/components/TopChart.tsx b/src/pages/Detail/Deploy/components/TopChart.tsx
index 61746f0..1e0f4cd 100644
--- a/src/pages/Detail/Deploy/components/TopChart.tsx
+++ b/src/pages/Detail/Deploy/components/TopChart.tsx
@@ -19,7 +19,7 @@ const TopChart = () => {
   return (
     <Row gutter={16} className={Style.panel}>
       <Col span={6}>
-        <Card title='部署趋势'>
+        <Card title='部署趋势' bordered={false}>
           <div className={Style.deployPanelLeft}>
             <DynamicLineChart />
           </div>
@@ -34,12 +34,13 @@ const TopChart = () => {
               <Radio.Button value='month'>本月</Radio.Button>
             </Radio.Group>
           }
+          bordered={false}
         >
           <ReactEcharts
             option={dynamicBarChartOptions} // option：图表配置项
             notMerge={true}
             lazyUpdate={true}
-            style={{ height: 265 }}
+            style={{ height: 255 }}
           />
         </Card>
       </Col>
diff --git a/src/pages/List/Base/index.tsx b/src/pages/List/Base/index.tsx
index de53c57..346bd36 100644
--- a/src/pages/List/Base/index.tsx
+++ b/src/pages/List/Base/index.tsx
@@ -1,27 +1,18 @@
 import React, { useState, memo, useEffect } from 'react';
 import { Table, Tag, Row, Col, Button, Input } from 'tdesign-react';
-import { ChevronUpCircleIcon, SearchIcon, ChevronDownCircleIcon } from 'tdesign-icons-react';
+import { SearchIcon } from 'tdesign-icons-react';
 import classnames from 'classnames';
 import { useAppDispatch, useAppSelector } from 'modules/store';
 import { selectListBase, getList, clearPageState } from 'modules/list/base';
 import CommonStyle from 'styles/common.module.less';
 import style from './index.module.less';
+import { TrendIcon, ETrend } from 'components/Board';
 
 export const PaymentTypeMap: {
   [key: number]: React.ReactElement;
 } = {
-  0: (
-    <>
-      付款
-      <ChevronUpCircleIcon style={{ color: 'red', marginLeft: 4 }} />
-    </>
-  ),
-  1: (
-    <>
-      收款
-      <ChevronDownCircleIcon style={{ color: 'green', marginLeft: 4 }} />
-    </>
-  ),
+  0: <TrendIcon trend={ETrend.down} trendNum='付款' />,
+  1: <TrendIcon trend={ETrend.up} trendNum='收款' />,
 };
 
 export const StatusMap: {
diff --git a/src/pages/List/Card/components/ProductCard.tsx b/src/pages/List/Card/components/ProductCard.tsx
index c948a6d..becb452 100644
--- a/src/pages/List/Card/components/ProductCard.tsx
+++ b/src/pages/List/Card/components/ProductCard.tsx
@@ -18,6 +18,7 @@ const ProductCard = ({ product }: { product: IProduct }) => {
   return (
     <Card
       className={Style.panel}
+      bordered={false}
       actions={
         disabled ? (
           <Tag theme='default' disabled={true}>
diff --git a/src/pages/User/index.tsx b/src/pages/User/index.tsx
index 031e169..21bcaad 100644
--- a/src/pages/User/index.tsx
+++ b/src/pages/User/index.tsx
@@ -23,7 +23,7 @@ const User: React.FC<BrowserRouterProps> = () => {
     <div>
       <Row gutter={[16, 16]}>
         <Col xs={12} lg={12} xl={9}>
-          <Card className={styles.welcome}>
+          <Card className={styles.welcome} bordered={false}>
             <Row justify='space-between'>
               <Col className={styles.name}>
                 Hi，Image <span className={styles.regular}>下午好，今天是你加入鹅厂的第 100 天～</span>
@@ -36,6 +36,7 @@ const User: React.FC<BrowserRouterProps> = () => {
           <Card
             className={styles.userinfo}
             title='个人信息'
+            bordered={false}
             actions={
               <Button shape='square' theme='default' variant='text'>
                 <IconFont name='edit' />
@@ -86,7 +87,7 @@ const User: React.FC<BrowserRouterProps> = () => {
               </Col>
             </Row>
           </Card>
-          <Card className={styles.statistics} title='主页访问数据' subtitle='（次）'>
+          <Card className={styles.statistics} title='主页访问数据' subtitle='（次）' bordered={false}>
             <ReactEcharts option={chartData} notMerge={true} lazyUpdate={true} style={{ height: 360, marginTop: 16 }} />
           </Card>
         </Col>
@@ -100,6 +101,7 @@ const User: React.FC<BrowserRouterProps> = () => {
           </Card>
           <Card
             className={styles.teams}
+            bordered={false}
             title='团队成员'
             actions={
               <Button shape='square' theme='default' variant='text'>
@@ -118,6 +120,7 @@ const User: React.FC<BrowserRouterProps> = () => {
           <Card
             title='服务产品'
             className={styles.product}
+            bordered={false}
             actions={
               <Button shape='square' theme='default' variant='text'>
                 <IconFont name='edit' />
diff --git a/src/styles/theme.less b/src/styles/theme.less
deleted file mode 100644
index dc01c4e..0000000
--- a/src/styles/theme.less
+++ /dev/null
@@ -1,194 +0,0 @@
-:root[theme-color=cyan] {
-  --td-brand-color: #0594fa;
-  --td-brand-color-1: #d7eefe;
-  --td-brand-color-2: #aeddfd;
-  --td-brand-color-3: #84cafd;
-  --td-brand-color-4: #58b8fc;
-  --td-brand-color-5: #29a4fb;
-  --td-brand-color-6: #0594fa;
-  --td-brand-color-7: #29a4fb;
-  --td-brand-color-8: #0594fa;
-  --td-brand-color-9: #0378df;
-  --td-brand-color-10: #01409b;
-}
-
-:root[theme-color=green] {
-  --td-brand-color-1: #e8f8f2;
-  --td-brand-color-2: #bcebdc;
-  --td-brand-color-3: #85dbbe;
-  --td-brand-color-4: #48c79c;
-  --td-brand-color-5: #00a870;
-  --td-brand-color-6: #078d5c;
-  --td-brand-color-7: #067945;
-  --td-brand-color-8: #00a870;
-  --td-brand-color-9: #044f2a;
-  --td-brand-color-10: #033017;
-}
-
-:root[theme-color=yellow] {
-  --td-brand-color: #ebb105;
-  --td-brand-color-1: #fde9ab;
-  --td-brand-color-2: #fbd152;
-  --td-brand-color-3: #ebb105;
-  --td-brand-color-4: #dda204;
-  --td-brand-color-5: #ca8d03;
-  --td-brand-color-6: #b67803;
-  --td-brand-color-7: #fbd152;
-  --td-brand-color-8: #ebb105;
-  --td-brand-color-9: #dda204;
-  --td-brand-color-10: #603100;
-}
-
-:root[theme-color=orange] {
-  --td-brand-color-1: #fce5d7;
-  --td-brand-color-2: #f8cdaf;
-  --td-brand-color-3: #f4b285;
-  --td-brand-color-4: #f19659;
-  --td-brand-color-5: #ed7b2f;
-  --td-brand-color-6: #e75510;
-  --td-brand-color-7: #f19659;
-  --td-brand-color-8: #ed7b2f;
-  --td-brand-color-9: #e75510;
-  --td-brand-color-10: #7f0a02;
-  --td-brand-color: #ed7b2f;
-}
-
-:root[theme-color=red] {
-  ---td-brand-color: #e34d59;
-  --td-brand-color-1: #fbe5e7;
-  --td-brand-color-2: #f7ccd0;
-  --td-brand-color-3: #f3b2b8;
-  --td-brand-color-4: #ef989f;
-  --td-brand-color-5: #ea7b84;
-  --td-brand-color-6: #e34d59;
-  --td-brand-color-7: #ea7b84;
-  --td-brand-color-8: #e34d59;
-  --td-brand-color-9: #e42c3a;
-  --td-brand-color-10: #8d0309;
-}
-
-:root[theme-color=pink] {
-  --td-brand-color: #ed49b4;
-  --td-brand-color-1: #fce5f4;
-  --td-brand-color-2: #facae9;
-  --td-brand-color-3: #f7aede;
-  --td-brand-color-4: #f491d2;
-  --td-brand-color-5: #f172c5;
-  --td-brand-color-6: #ed49b4;
-  --td-brand-color-7: #f172c5;
-  --td-brand-color-8: #ed49b4;
-  --td-brand-color-9: #e80f9d;
-  --td-brand-color-10: #8f025e;
-}
-
-:root[theme-color=purple] {
-  --td-brand-color: #834ec2;
-  --td-brand-color-1: #eee6f7;
-  --td-brand-color-2: #ddceee;
-  --td-brand-color-3: #ccb6e6;
-  --td-brand-color-4: #bb9edc;
-  --td-brand-color-5: #ab87d5;
-  --td-brand-color-6: #9a6fce;
-  --td-brand-color-7: #9a6fce;
-  --td-brand-color-8: #834ec2;
-  --td-brand-color-9: #783ac3;
-  --td-brand-color-10: #4c1397;
-}
-
-:root[theme-color=cyan][theme-mode=dark] {
-  --td-brand-color: #29a4fb;
-  --td-brand-color-1: #01409b;
-  --td-brand-color-2: #0152b3;
-  --td-brand-color-3: #0264ca;
-  --td-brand-color-4: #0378df;
-  --td-brand-color-5: #0594fa;
-  --td-brand-color-6: #29a4fb;
-  --td-brand-color-7: #0594fa;
-  --td-brand-color-8: #29a4fb;
-  --td-brand-color-9: #58b8fc;
-  --td-brand-color-10: #d7eefe;
-}
-
-:root[theme-color=green][theme-mode=dark] {
-  --td-brand-color: #03a56f;
-  --td-brand-color-1: #024b15;
-  --td-brand-color-2: #03965c;
-  --td-brand-color-3: #03a56f;
-  --td-brand-color-4: #04c383;
-  --td-brand-color-5: #03965c;
-  --td-brand-color-6: #03a56f;
-  --td-brand-color-7: #04c383;
-  --td-brand-color-8: #03a56f;
-  --td-brand-color-9: #05eb9f;
-  --td-brand-color-10: #91fdd9;
-}
-
-:root[theme-color=yellow][theme-mode=dark] {
-  --td-brand-color: #ca8d03;
-  --td-brand-color-1: #603100;
-  --td-brand-color-2: #764101;
-  --td-brand-color-3: #8c5201;
-  --td-brand-color-4: #a16502;
-  --td-brand-color-5: #b67803;
-  --td-brand-color-6: #ca8d03;
-  --td-brand-color-7: #764101;
-  --td-brand-color-8: #ca8d03;
-  --td-brand-color-9: #a16502;
-  --td-brand-color-10: #fde9ab;
-}
-
-:root[theme-color=orange][theme-mode=dark] {
-  --td-brand-color: #ed7b2f;
-  --td-brand-color-1: #692204;
-  --td-brand-color-2: #873105;
-  --td-brand-color-3: #a24006;
-  --td-brand-color-4: #c25110;
-  --td-brand-color-5: #d66724;
-  --td-brand-color-6: #ed8139;
-  --td-brand-color-7: #ff9852;
-  --td-brand-color-8: #ed7b2f;
-  --td-brand-color-9: #ed7b2f;
-  --td-brand-color-10: #fce5d7;
-}
-
-:root[theme-color=red][theme-mode=dark] {
-  --td-brand-color: #fb6e77;
-  --td-brand-color-1: #4f3335;
-  --td-brand-color-2: #960627;
-  --td-brand-color-3: #b01c37;
-  --td-brand-color-4: #c9384a;
-  --td-brand-color-5: #e35661;
-  --td-brand-color-6: #fb6e77;
-  --td-brand-color-7: #ff9195;
-  --td-brand-color-8: #fb6e77;
-  --td-brand-color-9: #ffd6d8;
-  --td-brand-color-10: #fff2f2;
-}
-
-root[theme-color=pink][theme-mode=dark] {
-  --td-brand-color: #ff70cf;
-  --td-brand-color-1: #5b374f;
-  --td-brand-color-2: #9b066d;
-  --td-brand-color-3: #bc088a;
-  --td-brand-color-4: #d435a0;
-  --td-brand-color-5: #ed53b7;
-  --td-brand-color-6: #ff70cf;
-  --td-brand-color-7: #ff99e4;
-  --td-brand-color-8: #ff70cf;
-  --td-brand-color-9: #ffdbfd;
-  --td-brand-color-10: #fff2ff;
-}
-
-root[theme-color=purple][theme-mode=dark] {
-  --td-brand-color: #ab87d5;
-  --td-brand-color-1: #4c1397;
-  --td-brand-color-2: #6325b0;
-  --td-brand-color-3: #783ac3;
-  --td-brand-color-4: #834ec2;
-  --td-brand-color-5: #9a6fce;
-  --td-brand-color-6: #ab87d5;
-  --td-brand-color-7: #ab87d5;
-  --td-brand-color-8: #ab87d5;
-  --td-brand-color-9: #ccb6e6;
-  --td-brand-color-10: #eee6f7;
-}
diff --git a/src/utils/color.ts b/src/utils/color.ts
index 20b7454..95b98c3 100644
--- a/src/utils/color.ts
+++ b/src/utils/color.ts
@@ -40,9 +40,13 @@ export function getChartColor(theme: ETheme, themeColor: string) {
   return { ...chartColors, colorList };
 }
 
-export function generateColorMap(theme: string, colorPalette: Array<string>, mode: 'light' | 'dark') {
+export function generateColorMap(
+  theme: string,
+  colorPalette: Array<string>,
+  mode: 'light' | 'dark',
+  brandColorIdx: number,
+) {
   const isDarkMode = mode === 'dark';
-  let brandColorIdx = colorPalette.indexOf(theme);
 
   if (isDarkMode) {
     // eslint-disable-next-line no-use-before-define
@@ -50,7 +54,8 @@ export function generateColorMap(theme: string, colorPalette: Array<string>, mod
       const [h, s, l] = Color.colorTransform(color, 'hex', 'hsl');
       return Color.colorTransform([h, Number(s) - 4, l], 'hsl', 'hex');
     });
-    brandColorIdx = 5;
+    // eslint-disable-next-line no-param-reassign
+    brandColorIdx = 10 - brandColorIdx;
     colorPalette[0] = `${colorPalette[brandColorIdx]}20`;
   }