feat(color): remove extra dependencies

.github/workflows/pr-spelling.template.yml

@@ -0,0 +1,12 @@
+# force copy from tencent/tdesign
+name: pr-spell-check
+on: [pull_request]
+
+jobs:
+  run:
+    name: Spell Check with Typos
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Check spelling
+        uses: crate-ci/typos@master

package.json

@@ -21,7 +21,6 @@
     "axios": "^0.26.0",
     "dayjs": "^1.10.6",
     "echarts": "~5.1.2",
-    "hex-to-hsl": "^1.0.2",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.11",
     "qrcode.vue": "^3.2.2",
@@ -29,7 +28,6 @@
     "tdesign-vue-next": "~0.11.2",
     "tvision-color": "^1.3.1",
     "vue": "^3.2.31",
-    "vue-color-kit": "^1.0.5",
     "vue-router": "^4.0.11",
     "vue-clipboard3": "^1.0.0"
   },

src/config/color.ts

@@ -1,5 +1,6 @@
-import hexToHsl from 'hex-to-hsl';
 /* eslint-disable indent */
+import { Color } from 'tvision-color';
+
 export type TColorToken = Record<string, string>;
 export type TColorSeries = Record<string, TColorToken>;
 
@@ -24,59 +25,6 @@ export const defaultDarkColor = [
   '#ab87d5',
 ];
 
-export const BACKGROUND_TOKEN: TColorSeries = {
-  BLUE_GREY: {
-    '@gray-color-1': '#F1F2F5',
-    '@gray-color-2': '#EBEDF1',
-    '@gray-color-3': '#E3E6EB',
-    '@gray-color-4': '#D6DBE3',
-    '@gray-color-5': '#BCC4D0',
-    '@gray-color-6': '#97A3B7',
-    '@gray-color-7': '#7787A2',
-    '@gray-color-8': '#5F7292',
-    '@gray-color-9': '#4B5B76',
-    '@gray-color-10': '#3C485C',
-    '@gray-color-11': '#2C3645',
-    '@gray-color-12': '#232A35',
-    '@gray-color-13': '#1C222B',
-    '@gray-color-14': '#13161B',
-  },
-  NEUTRAL_GREY: {
-    '@gray-color-1': '#F3F3F3',
-    '@gray-color-2': '#EEEEEE',
-    '@gray-color-3': '#E7E7E7',
-    '@gray-color-4': '#DCDCDC',
-    '@gray-color-5': '#C5C5C5',
-    '@gray-color-6': '#A6A6A6',
-    '@gray-color-7': '#8B8B8B',
-    '@gray-color-8': '#777777',
-    '@gray-color-9': '#5E5E5E',
-    '@gray-color-10': '#4B4B4B',
-    '@gray-color-11': '#383838',
-    '@gray-color-12': '#2C2C2C',
-    '@gray-color-13': '#242424',
-    '@gray-color-14': '#181818',
-  },
-};
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const NEUTRAL_GREY_TOKEN: TColorToken = {
-  '@gray-color-1': '#F3F3F3',
-  '@gray-color-2': '#EEEEEE',
-  '@gray-color-3': '#E7E7E7',
-  '@gray-color-4': '#DCDCDC',
-  '@gray-color-5': '#C5C5C5',
-  '@gray-color-6': '#A6A6A6',
-  '@gray-color-7': '#8B8B8B',
-  '@gray-color-8': '#777777',
-  '@gray-color-9': '#5E5E5E',
-  '@gray-color-10': '#4B4B4B',
-  '@gray-color-11': '#383838',
-  '@gray-color-12': '#2C2C2C',
-  '@gray-color-13': '#242424',
-  '@gray-color-14': '#181818',
-};
-
 export const COLOR_TOKEN: TColorSeries = {
   DEFAULT: {
     '@brand-color': '#0052D9',
@@ -205,11 +153,6 @@ function toUnderline(name: string): string {
   return name.replace(/([A-Z])/g, '_$1').toUpperCase();
 }
 
-export function getGreyColor(type: string): TColorToken {
-  const name = toUnderline(type);
-  return BACKGROUND_TOKEN[name] || {};
-}
-
 export function getBrandColor(type: string, colorList: TColorSeries): TColorToken {
   const name = /^#[A-F\d]{6}$/i.test(type) ? type : toUnderline(type);
   return colorList[name || 'DEFAULT'];
@@ -221,19 +164,6 @@ export function getColorList(colorArray: Array<TColorToken>): Array<string> {
 
   return pureColorList;
 }
-// inspired by https://stackoverflow.com/questions/36721830/convert-hsl-to-rgb-and-hex
-export function hslToHex(h: number, s: number, l: number) {
-  l /= 100;
-  const a = (s * Math.min(l, 1 - l)) / 100;
-  const f = (n: number) => {
-    const k = (n + h / 30) % 12;
-    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
-    return Math.round(255 * color)
-      .toString(16)
-      .padStart(2, '0');
-  };
-  return `#${f(0)}${f(8)}${f(4)}`;
-}
 
 export function generateColorMap(theme: string, colorPalette: Array<string>, mode: 'light' | 'dark') {
   const isDarkMode = mode === 'dark';
@@ -242,8 +172,8 @@ export function generateColorMap(theme: string, colorPalette: Array<string>, mod
   if (isDarkMode) {
     // eslint-disable-next-line no-use-before-define
     colorPalette.reverse().map((color) => {
-      const [h, s, l] = hexToHsl(color);
+      const [h, s, l] = Color.colorTransform(color, 'hex', 'hsl');
-      return hslToHex(h, s - 4, l);
+      return Color.colorTransform([h, Number(s) - 4, l], 'hsl', 'hex');
     });
     brandColorIdx = 5;
     colorPalette[0] = `${colorPalette[brandColorIdx]}20`;

src/layouts/setting.vue

@@ -22,7 +22,7 @@
           </div>
         </t-radio-group>
         <div class="setting-group-title">主题色</div>
-        <t-radio-group v-model="formData.brandTheme" default-vaule="default">
+        <t-radio-group v-model="formData.brandTheme">
           <div
             v-for="(item, index) in COLOR_OPTIONS.slice(0, COLOR_OPTIONS.length - 1)"
             :key="index"
@@ -43,7 +43,12 @@
               @visible-change="onPopupVisibleChange"
             >
               <template #content>
-                <color-picker :theme="mode" @changeColor="changeColor" />
+                <t-color-picker-panel
+                  :on-change="changeColor"
+                  :color-modes="['monochrome']"
+                  format="HEX"
+                  :swatch-colors="[]"
+                />
               </template>
               <t-radio-button
                 :value="COLOR_OPTIONS[COLOR_OPTIONS.length - 1]"
@@ -94,17 +99,15 @@
   </t-drawer>
 </template>
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, watchEffect } from 'vue';
+import { ref, computed, onMounted, watchEffect } from 'vue';
-import { ColorPicker } from 'vue-color-kit';
 import { MessagePlugin, PopupVisibleChangeContext } from 'tdesign-vue-next';
 import { Color } from 'tvision-color';
 import useClipboard from 'vue-clipboard3';
+
 import { useSettingStore } from '@/store';
 import Thumbnail from '@/components/thumbnail/index.vue';
 import ColorContainer from '@/components/color/index.vue';
 
-import 'vue-color-kit/dist/vue-color-kit.css';
-
 import STYLE_CONFIG from '@/config/style';
 import { insertThemeStylesheet, generateColorMap } from '@/config/color';
 
@@ -123,7 +126,6 @@ const MODE_OPTIONS = [
 ];
 
 const formData = ref({ ...STYLE_CONFIG });
-const colors = ref();
 const isColoPickerDisplay = ref(false);
 
 const showSettingPanel = computed({
@@ -137,35 +139,7 @@ const showSettingPanel = computed({
   },
 });
 
-const mode = computed(() => {
+const changeColor = (hex: string) => {
-  return settingStore.displayMode;
-});
-
-watch(
-  () => colors.value,
-  (newColor) => {
-    const { hex } = newColor;
-
-    // hex 主题色
-    const newPalette = Color.getPaletteByGradation({
-      colors: [hex],
-      step: 10,
-    })[0];
-    const { mode } = settingStore;
-    const colorMap = generateColorMap(hex, newPalette, mode as 'light' | 'dark');
-
-    insertThemeStylesheet(hex, colorMap, mode as 'light' | 'dark');
-
-    settingStore.updateConfig({
-      [hex]: colorMap,
-    });
-    settingStore.changeBrandTheme(hex);
-  },
-);
-
-const changeColor = (val) => {
-  const { hex } = val;
-  // hex 主题色
   const newPalette = Color.getPaletteByGradation({
     colors: [hex],
     step: 10,
@@ -173,13 +147,9 @@ const changeColor = (val) => {
   const { mode } = settingStore;
   const colorMap = generateColorMap(hex, newPalette, mode as 'light' | 'dark');
 
-  settingStore.updateConfig({
+  settingStore.addColor({ [hex]: colorMap });
-    [hex]: colorMap,
+  settingStore.updateConfig({ ...formData.value, brandTheme: hex });
-  });
-
   insertThemeStylesheet(hex, colorMap, mode as 'light' | 'dark');
-
-  settingStore.changeBrandTheme(hex);
 };
 
 onMounted(() => {
@@ -233,9 +203,7 @@ watchEffect(() => {
 </script>
 <style lang="less">
 @import '@/style/variables';
-.hu-color-picker {
+
-  width: 220px !important;
-}
 .tdesign-setting {
   z-index: 100;
   position: fixed;

src/store/modules/setting.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { COLOR_TOKEN, LIGHT_CHART_COLORS, DARK_CHART_COLORS } from '@/config/color';
+import { COLOR_TOKEN, LIGHT_CHART_COLORS, DARK_CHART_COLORS, TColorSeries } from '@/config/color';
 import STYLE_CONFIG from '@/config/style';
 import { store } from '@/store';
 
@@ -50,6 +50,9 @@ export const useSettingStore = defineStore('setting', {
     changeBrandTheme(brandTheme: string) {
       document.documentElement.setAttribute('theme-color', brandTheme);
     },
+    addColor(payload: TColorSeries) {
+      this.colorList = { ...this.colorList, ...payload };
+    },
     updateConfig(payload: Partial<TState>) {
       for (const key in payload) {
         if (payload[key] !== undefined) {

src/style/layout.less

@@ -67,7 +67,7 @@
       max-width: 100%;
       position: fixed;
       overflow: visible;
-      z-index: 999;
+      z-index: 100;
     }
     &-tabs-nav + .@{prefix}-content-layout {
       padding-top:  @spacer-3;

src/style/theme/dark.less

@@ -1,163 +0,0 @@
-:root[theme-mode='dark'] {
-  --td-brand-color-1: #1b2f51;
-  --td-brand-color-2: #173463;
-  --td-brand-color-3: #143975;
-  --td-brand-color-4: #103d88;
-  --td-brand-color-5: #0d429a;
-  --td-brand-color-6: #054bbe;
-  --td-brand-color-7: #2667d4;
-  --td-brand-color-8: #4582e6;
-  --td-brand-color-9: #699ef5;
-  --td-brand-color-10: #96bbf8;
-
-  --td-warning-color-1: #4f2a1d;
-  --td-warning-color-2: #582f21;
-  --td-warning-color-3: #733c23;
-  --td-warning-color-4: #a75d2b;
-  --td-warning-color-5: #cf6e2d;
-  --td-warning-color-6: #dc7633;
-  --td-warning-color-7: #e8935c;
-  --td-warning-color-8: #ecbf91;
-  --td-warning-color-9: #eed7bf;
-  --td-warning-color-10: #f3e9dc;
-
-  --td-error-color-1: #472324;
-  --td-error-color-2: #5e2a2d;
-  --td-error-color-3: #703439;
-  --td-error-color-4: #83383e;
-  --td-error-color-5: #a03f46;
-  --td-error-color-6: #c64751;
-  --td-error-color-7: #de6670;
-  --td-error-color-8: #ec888e;
-  --td-error-color-9: #edb1b6;
-  --td-error-color-10: #eeced0;
-
-  --td-success-color-1: #193a2a;
-  --td-success-color-2: #1a4230;
-  --td-success-color-3: #17533d;
-  --td-success-color-4: #0d7a55;
-  --td-success-color-5: #059465;
-  --td-success-color-6: #43af8a;
-  --td-success-color-7: #46bf96;
-  --td-success-color-8: #80d2b6;
-  --td-success-color-9: #b4e1d3;
-  --td-success-color-10: #deede8;
-
-  --td-gray-color-1: #f3f3f3;
-  --td-gray-color-2: #eeeeee;
-  --td-gray-color-3: #e7e7e7;
-  --td-gray-color-4: #dcdcdc;
-  --td-gray-color-5: #c5c5c5;
-  --td-gray-color-6: #a6a6a6;
-  --td-gray-color-7: #8b8b8b;
-  --td-gray-color-8: #777777;
-  --td-gray-color-9: #5e5e5e;
-  --td-gray-color-10: #4b4b4b;
-  --td-gray-color-11: #383838;
-  --td-gray-color-12: #2c2c2c;
-  --td-gray-color-13: #242424;
-  --td-gray-color-14: #181818;
-
-  // 文字 & 图标 颜色
-  --td-font-white-1: rgba(255, 255, 255, 0.9);
-  --td-font-white-2: rgba(255, 255, 255, 0.55);
-  --td-font-white-3: rgba(255, 255, 255, 0.35);
-  --td-font-white-4: rgba(255, 255, 255, 0.22);
-
-  --td-font-gray-1: rgba(0, 0, 0, 0.9);
-  --td-font-gray-2: rgba(0, 0, 0, 0.6);
-  --td-font-gray-3: rgba(0, 0, 0, 0.4);
-  --td-font-gray-4: rgba(0, 0, 0, 0.26);
-
-  // 基础颜色
-  --td-brand-color: var(--td-brand-color-8); // 色彩-品牌-可操作
-  --td-warning-color: var(--td-warning-color-5); // 色彩-功能-警告
-  --td-error-color: var(--td-error-color-6); // 色彩-功能-失败
-  --td-success-color: var(--td-success-color-5); // 色彩-功能-成功
-
-  // 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
-  --td-brand-color-hover: var(--td-brand-color-7); // hover态
-  --td-brand-color-focus: var(--td-brand-color-2); // focus态，包括鼠标和键盘
-  --td-brand-color-active: var(--td-brand-color-9); // 点击态
-  --td-brand-color-disabled: var(--td-brand-color-3); // 禁用态
-  --td-brand-color-light: var(--td-brand-color-1); // 浅色的选中态
-
-  // 警告色扩展
-  --td-warning-color-hover: var(--td-warning-color-4);
-  --td-warning-color-focus: var(--td-warning-color-2);
-  --td-warning-color-active: var(--td-warning-color-6);
-  --td-warning-color-disabled: var(--td-warning-color-3);
-  --td-warning-color-light: var(--td-warning-color-1);
-
-  // 失败/错误色扩展
-  --td-error-color-hover: var(--td-error-color-5);
-  --td-error-color-focus: var(--td-error-color-2);
-  --td-error-color-active: var(--td-error-color-7);
-  --td-error-color-disabled: var(--td-error-color-3);
-  --td-error-color-light: var(--td-error-color-1);
-
-  // 成功色扩展
-  --td-success-color-hover: var(--td-success-color-4);
-  --td-success-color-focus: var(--td-success-color-2);
-  --td-success-color-active: var(--td-success-color-6);
-  --td-success-color-disabled: var(--td-success-color-3);
-  --td-success-color-light: var(--td-success-color-1);
-
-  // 遮罩
-  --td-mask-active: rgba(0, 0, 0, 0.4); // 遮罩-弹出
-  --td-mask-disabled: rgba(0, 0, 0, 0.6); // 遮罩-禁用
-
-  // 背景色
-  --td-bg-color-page: var(--td-gray-color-14); // 色彩 - page
-  --td-bg-color-container: var(--td-gray-color-13); // 色彩 - 容器
-  --td-bg-color-container-hover: var(--td-gray-color-12); // 色彩 - 容器 - hover
-  --td-bg-color-container-active: var(--td-gray-color-10); // 色彩 - 容器 - active
-  --td-bg-color-container-select: var(--td-gray-color-9); // 色彩 - 容器 - select
-
-  --td-bg-color-secondarycontainer: var(--td-gray-color-12); // 色彩 - 次级容器
-  --td-bg-color-secondarycontainer-hover: var(--td-gray-color-11); // 色彩 - 次级容器 - hover
-  --td-bg-color-secondarycontainer-active: var(--td-gray-color-9); // 色彩 - 次级容器 - active
-
-  --td-bg-color-component: var(--td-gray-color-11); // 色彩  - 组件
-  --td-bg-color-component-hover: var(--td-gray-color-10); // 色彩 - 组件 - hover
-  --td-bg-color-component-active: var(--td-gray-color-9); // 色彩 - 组件 - active
-  --td-bg-color-component-disabled: var(--td-gray-color-12); // 色彩 - 组件 - disabled
-
-  // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
-  --td-bg-color-specialcomponent: transparent;
-
-  // 文本颜色
-  --td-text-color-primary: var(--td-font-white-1); // 色彩-文字-主要
-  --td-text-color-secondary: var(--td-font-white-2); // 色彩-文字-次要
-  --td-text-color-placeholder: var(--td-font-white-3); // 色彩-文字-占位符/说明
-  --td-text-color-disabled: var(--td-font-white-4); // 色彩-文字-禁用
-  --td-text-color-anti: #fff; // 色彩-文字-反色
-  --td-text-color-brand: var(--td-brand-color-8); // 色彩-文字-品牌
-  --td-text-color-link: var(--td-brand-color-8); // 色彩-文字-链接
-
-  // 分割线
-  --td-border-level-1-color: var(--td-gray-color-11);
-  --td-component-stroke: var(--td-gray-color-11);
-  // 边框
-  --td-border-level-2-color: var(--td-gray-color-9);
-  --td-component-border: var(--td-gray-color-9);
-
-  // 基础/下层 投影 hover 使用的组件包括：表格 /
-  --td-shadow-1: 0px 4px 6px rgba(0, 0, 0, 0.06), 0px 1px 10px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.12);
-  // 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
-  --td-shadow-2: 0px 8px 10px rgba(0, 0, 0, 0.12), 0px 3px 14px rgba(0, 0, 0, 0.1), 0px 5px 5px rgba(0, 0, 0, 0.16);
-  // 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
-  --td-shadow-3: 0px 16px 24px rgba(0, 0, 0, 0.14), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 8px 10px rgba(0, 0, 0, 0.2);
-  // 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边
-
-  --td-shadow-inset-top: inset 0px 0.5px 0px #5e5e5e;
-  --td-shadow-inset-right: inset 0.5px 0px 0px #5e5e5e;
-  --td-shadow-inset-bottom: inset 0px -0.5px 0px #5e5e5e;
-  --td-shadow-inset-left: inset -0.5px 0px 0px #5e5e5e;
-
-  // table 特定阴影
-  --td-table-shadow-color: rgba(0, 0, 0, 0.55);
-
-  // 滚动条颜色
-  --td-scrollbar-color: rgba(255, 255, 255, 0.1);
-}

src/style/theme/default.less

@@ -0,0 +1,26 @@
+:root,
+:root[theme-mode='light'] {
+  --td-brand-color-1: #e0ebff;
+  --td-brand-color-2: #c0d8ff;
+  --td-brand-color-3: #a1c4ff;
+  --td-brand-color-4: #81b1ff;
+  --td-brand-color-5: #5f9bff;
+  --td-brand-color-6: #3d87ff;
+  --td-brand-color-7: #176eff;
+  --td-brand-color-8: #0052d9;
+  --td-brand-color-9: #0048cd;
+  --td-brand-color-10: #0035b5;
+}
+
+:root[theme-mode='dark'] {
+  --td-brand-color-1: #1b2f51;
+  --td-brand-color-2: #173463;
+  --td-brand-color-3: #143975;
+  --td-brand-color-4: #103d88;
+  --td-brand-color-5: #0d429a;
+  --td-brand-color-6: #054bbe;
+  --td-brand-color-7: #2667d4;
+  --td-brand-color-8: #4582e6;
+  --td-brand-color-9: #699ef5;
+  --td-brand-color-10: #96bbf8;
+}

src/style/theme/index.less

@@ -1,9 +1,9 @@
+@import './default.less';
+
 @import './cyan.less';
 
 @import './green.less';
 
-@import './light.less';
-
 @import './orange.less';
 
 @import './pink.less';
@@ -13,5 +13,3 @@
 @import './red.less';
 
 @import './yellow.less';
-
-@import './dark.less';

src/style/theme/light.less

@@ -1,169 +0,0 @@
-:root,
-:root[theme-mode='light'] {
-  --td-brand-color-1: #e0ebff;
-  --td-brand-color-2: #c0d8ff;
-  --td-brand-color-3: #a1c4ff;
-  --td-brand-color-4: #81b1ff;
-  --td-brand-color-5: #5f9bff;
-  --td-brand-color-6: #3d87ff;
-  --td-brand-color-7: #176eff;
-  --td-brand-color-8: #0052d9;
-  --td-brand-color-9: #0048cd;
-  --td-brand-color-10: #0035b5;
-
-  --td-warning-color-1: #fef3e6;
-  --td-warning-color-2: #f9e0c7;
-  --td-warning-color-3: #f7c797;
-  --td-warning-color-4: #f2995f;
-  --td-warning-color-5: #ed7b2f;
-  --td-warning-color-6: #d35a21;
-  --td-warning-color-7: #ba431b;
-  --td-warning-color-8: #9e3610;
-  --td-warning-color-9: #842b0b;
-  --td-warning-color-10: #5a1907;
-
-  --td-error-color-1: #fdecee;
-  --td-error-color-2: #f9d7d9;
-  --td-error-color-3: #f8b9be;
-  --td-error-color-4: #f78d94;
-  --td-error-color-5: #f36d78;
-  --td-error-color-6: #e34d59;
-  --td-error-color-7: #c9353f;
-  --td-error-color-8: #b11f26;
-  --td-error-color-9: #951114;
-  --td-error-color-10: #680506;
-
-  --td-success-color-1: #e8f8f2;
-  --td-success-color-2: #bcebdc;
-  --td-success-color-3: #85dbbe;
-  --td-success-color-4: #48c79c;
-  --td-success-color-5: #00a870;
-  --td-success-color-6: #078d5c;
-  --td-success-color-7: #067945;
-  --td-success-color-8: #056334;
-  --td-success-color-9: #044f2a;
-  --td-success-color-10: #033017;
-
-  --td-gray-color-1: #f3f3f3;
-  --td-gray-color-2: #eeeeee;
-  --td-gray-color-3: #e7e7e7;
-  --td-gray-color-4: #dcdcdc;
-  --td-gray-color-5: #c5c5c5;
-  --td-gray-color-6: #a6a6a6;
-  --td-gray-color-7: #8b8b8b;
-  --td-gray-color-8: #777777;
-  --td-gray-color-9: #5e5e5e;
-  --td-gray-color-10: #4b4b4b;
-  --td-gray-color-11: #383838;
-  --td-gray-color-12: #2c2c2c;
-  --td-gray-color-13: #242424;
-  --td-gray-color-14: #181818;
-
-  // 文字 & 图标 颜色
-  --td-font-white-1: rgba(255, 255, 255, 1);
-  --td-font-white-2: rgba(255, 255, 255, 0.55);
-  --td-font-white-3: rgba(255, 255, 255, 0.35);
-  --td-font-white-4: rgba(255, 255, 255, 0.22);
-
-  --td-font-gray-1: rgba(0, 0, 0, 0.9);
-  --td-font-gray-2: rgba(0, 0, 0, 0.6);
-  --td-font-gray-3: rgba(0, 0, 0, 0.4);
-  --td-font-gray-4: rgba(0, 0, 0, 0.26);
-
-  // 基础颜色
-  --td-brand-color: var(--td-brand-color-8); // 色彩-品牌-可操作
-  --td-warning-color: var(--td-warning-color-5); // 色彩-功能-警告
-  --td-error-color: var(--td-error-color-6); // 色彩-功能-失败
-  --td-success-color: var(--td-success-color-5); // 色彩-功能-成功
-
-  // 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
-  --td-brand-color-hover: var(--td-brand-color-7); // hover态
-  --td-brand-color-focus: var(--td-brand-color-2); // focus态，包括鼠标和键盘
-  --td-brand-color-active: var(--td-brand-color-9); // 点击态
-  --td-brand-color-disabled: var(--td-brand-color-3); // 禁用态
-  --td-brand-color-light: var(--td-brand-color-1); // 浅色的选中态
-
-  // 警告色扩展
-  --td-warning-color-hover: var(--td-warning-color-4);
-  --td-warning-color-focus: var(--td-warning-color-2);
-  --td-warning-color-active: var(--td-warning-color-6);
-  --td-warning-color-disabled: var(--td-warning-color-3);
-  --td-warning-color-light: var(--td-warning-color-1);
-
-  // 失败/错误色扩展
-  --td-error-color-hover: var(--td-error-color-5);
-  --td-error-color-focus: var(--td-error-color-2);
-  --td-error-color-active: var(--td-error-color-7);
-  --td-error-color-disabled: var(--td-error-color-3);
-  --td-error-color-light: var(--td-error-color-1);
-
-  // 成功色扩展
-  --td-success-color-hover: var(--td-success-color-4);
-  --td-success-color-focus: var(--td-success-color-2);
-  --td-success-color-active: var(--td-success-color-6);
-  --td-success-color-disabled: var(--td-success-color-3);
-  --td-success-color-light: var(--td-success-color-1);
-
-  // 遮罩
-  --td-mask-active: rgba(0, 0, 0, 0.6); // 遮罩-弹出
-  --td-mask-disabled: rgba(255, 255, 255, 0.6); // 遮罩-禁用
-
-  // 背景色
-  --td-bg-color-page: var(--td-gray-color-2); // 色彩 - page
-  --td-bg-color-container: #fff; // 色彩 - 容器
-  --td-bg-color-container-hover: var(--td-gray-color-1); // 色彩 - 容器 - hover
-  --td-bg-color-container-active: var(--td-gray-color-3); // 色彩 - 容器 - active
-  --td-bg-color-container-select: #fff; // 色彩 - 容器 - select
-
-  --td-bg-color-secondarycontainer: var(--td-gray-color-1); // 色彩 - 次级容器
-  --td-bg-color-secondarycontainer-hover: var(--td-gray-color-2); // 色彩 - 次级容器 - hover
-  --td-bg-color-secondarycontainer-active: var(--td-gray-color-4); // 色彩 - 次级容器 - active
-
-  --td-bg-color-component: var(--td-gray-color-3); // 色彩 - 组件
-  --td-bg-color-component-hover: var(--td-gray-color-4); // 色彩 - 组件 - hover
-  --td-bg-color-component-active: var(--td-gray-color-6); // 色彩 - 组件 - active
-  --td-bg-color-component-disabled: var(--td-gray-color-2); // 色彩 - 组件 - disabled
-
-  // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
-  --td-bg-color-specialcomponent: #fff;
-
-  // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
-  --td-bg-color-specialcomponent: #fff;
-
-  // 文本颜色
-  --td-text-color-primary: var(--td-font-gray-1); // 色彩-文字-主要
-  --td-text-color-secondary: var(--td-font-gray-2); // 色彩-文字-次要
-  --td-text-color-placeholder: var(--td-font-gray-3); // 色彩-文字-占位符/说明
-  --td-text-color-disabled: var(--td-font-gray-4); // 色彩-文字-禁用
-  --td-text-color-anti: #fff; // 色彩-文字-反色
-  --td-text-color-brand: var(--td-brand-color-8); // 色彩-文字-品牌
-  --td-text-color-link: var(--td-brand-color-8); // 色彩-文字-链接
-
-  // 分割线
-  --td-border-level-1-color: var(--td-gray-color-3);
-  --td-component-stroke: var(--td-gray-color-3);
-  // 边框
-  --td-border-level-2-color: var(--td-gray-color-4);
-  --td-component-border: var(--td-gray-color-4);
-
-  // 基础/下层 投影 hover 使用的组件包括：表格 /
-  --td-shadow-1: 0px 1px 10px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.08), 0px 2px 4px -1px rgba(0, 0, 0, 0.12);
-  // 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
-  --td-shadow-2: 0px 3px 14px 2px rgba(0, 0, 0, 0.05), 0px 8px 10px 1px rgba(0, 0, 0, 0.06),
-    0px 5px 5px -3px rgba(0, 0, 0, 0.1);
-  // 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
-  --td-shadow-3: 0px 6px 30px 5px rgba(0, 0, 0, 0.05), 0px 16px 24px 2px rgba(0, 0, 0, 0.04),
-    0px 8px 10px -5px rgba(0, 0, 0, 0.08);
-
-  // 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边
-  --td-shadow-inset-top: inset 0px 0.5px 0px #dcdcdc;
-  --td-shadow-inset-right: inset 0.5px 0px 0px #dcdcdc;
-  --td-shadow-inset-bottom: inset 0px -0.5px 0px #dcdcdc;
-  --td-shadow-inset-left: inset -0.5px 0px 0px #dcdcdc;
-
-  // table 特定阴影
-  --td-table-shadow-color: rgba(0, 0, 0, 0.08);
-
-  // 滚动条颜色
-  --td-scrollbar-color: rgba(0, 0, 0, 0.1);
-}