:root[theme-mode="yellow"], :root[theme-mode="yellow-dark"] {
  --brand-main: var(--td-brand-color-3);
  --td-brand-color-light: var(--td-brand-color-1);
  --td-brand-color-focus: var(--td-brand-color-2);
  --td-brand-color-disabled: var(--td-brand-color-3);
  --td-brand-color-hover: var(--td-brand-color-2);
  --td-brand-color: var(--td-brand-color-3);
  --td-brand-color-active: var(--td-brand-color-4);
  --td-brand-color-1: #fbe8b5;
  --td-brand-color-2: #f7d065;
  --td-brand-color-3: #f3b814;
  --td-brand-color-4: #e19f0a;
  --td-brand-color-5: #cd8b08;
  --td-brand-color-6: #b87606;
  --td-brand-color-7: #a36304;
  --td-brand-color-8: #8d5103;
  --td-brand-color-9: #764001;
  --td-brand-color-10: #603001;
}


:root[theme-mode="purple"], :root[theme-mode="purple-dark"] {
  --brand-main: var(--td-brand-color-7);
  --td-brand-color-light: var(--td-brand-color-1);
  --td-brand-color-focus: var(--td-brand-color-2);
  --td-brand-color-disabled: var(--td-brand-color-3);
  --td-brand-color-hover: var(--td-brand-color-6);
  --td-brand-color: var(--td-brand-color-7);
  --td-brand-color-active: var(--td-brand-color-8);
  --td-brand-color-1: #ebe7fe;
  --td-brand-color-2: #d8cffd;
  --td-brand-color-3: #c5b7fc;
  --td-brand-color-4: #b19ffb;
  --td-brand-color-5: #9e87fa;
  --td-brand-color-6: #8a6ef9;
  --td-brand-color-7: #7a5af8;
  --td-brand-color-8: #5537f8;
  --td-brand-color-9: #250df9;
  --td-brand-color-10: #0703ce;
}


:root[theme-mode="lightblue"], :root[theme-mode="lightblue-dark"] {
  --brand-main: var(--td-brand-color-6);
  --td-brand-color-light: var(--td-brand-color-1);
  --td-brand-color-focus: var(--td-brand-color-2);
  --td-brand-color-disabled: var(--td-brand-color-3);
  --td-brand-color-hover: var(--td-brand-color-5);
  --td-brand-color: var(--td-brand-color-6);
  --td-brand-color-active: var(--td-brand-color-7);
  --td-brand-color-1: #d7eefe;
  --td-brand-color-2: #afddfd;
  --td-brand-color-3: #86cafd;
  --td-brand-color-4: #5ab8fc;
  --td-brand-color-5: #2ca4fb;
  --td-brand-color-6: #0894fa;
  --td-brand-color-7: #0379e1;
  --td-brand-color-8: #0264cb;
  --td-brand-color-9: #0152b4;
  --td-brand-color-10: #013f9c;
}


:root[theme-mode="pink"], :root[theme-mode="pink-dark"] {
  --brand-main: var(--td-brand-color-6);
  --td-brand-color-light: var(--td-brand-color-1);
  --td-brand-color-focus: var(--td-brand-color-2);
  --td-brand-color-disabled: var(--td-brand-color-3);
  --td-brand-color-hover: var(--td-brand-color-5);
  --td-brand-color: var(--td-brand-color-6);
  --td-brand-color-active: var(--td-brand-color-7);
  --td-brand-color-1: #fde4f4;
  --td-brand-color-2: #facbea;
  --td-brand-color-3: #f8aede;
  --td-brand-color-4: #f691d2;
  --td-brand-color-5: #f371c5;
  --td-brand-color-6: #ef45b3;
  --td-brand-color-7: #ea0d9b;
  --td-brand-color-8: #cc0886;
  --td-brand-color-9: #ae0571;
  --td-brand-color-10: #90025d;
}


:root[theme-mode="orange"], :root[theme-mode="orange-dark"]  {
  --brand-main: var(--td-brand-color-6);
  --td-brand-color-light: var(--td-brand-color-1);
  --td-brand-color-focus: var(--td-brand-color-2);
  --td-brand-color-disabled: var(--td-brand-color-3);
  --td-brand-color-hover: var(--td-brand-color-5);
  --td-brand-color: var(--td-brand-color-6);
  --td-brand-color-active: var(--td-brand-color-7);
  --td-brand-color-1: #fee6e6;
  --td-brand-color-2: #fccccc;
  --td-brand-color-3: #fbb1b1;
  --td-brand-color-4: #f99797;
  --td-brand-color-5: #f87777;
  --td-brand-color-6: #f54343;
  --td-brand-color-7: #f60c0c;
  --td-brand-color-8: #d50606;
  --td-brand-color-9: #b70303;
  --td-brand-color-10: #970101;
}


:root[theme-mode="ching"], :root[theme-mode="ching-dark"] {
  --brand-main: var(--td-brand-color-4);
  --td-brand-color-light: var(--td-brand-color-1);
  --td-brand-color-focus: var(--td-brand-color-2);
  --td-brand-color-disabled: var(--td-brand-color-3);
  --td-brand-color-hover: var(--td-brand-color-3);
  --td-brand-color: var(--td-brand-color-4);
  --td-brand-color-active: var(--td-brand-color-5);
  --td-brand-color-1: #c7f3e8;
  --td-brand-color-2: #8ae6ce;
  --td-brand-color-3: #43d7b0;
  --td-brand-color-4: #27ba93;
  --td-brand-color-5: #1fad83;
  --td-brand-color-6: #15976b;
  --td-brand-color-7: #0d8357;
  --td-brand-color-8: #087045;
  --td-brand-color-9: #045c35;
  --td-brand-color-10: #024927;
}


:root[theme-mode="brown"], :root[theme-mode="brown-dark"] {
  --brand-main: var(--td-brand-color-6);
  --td-brand-color-light: var(--td-brand-color-1);
  --td-brand-color-focus: var(--td-brand-color-2);
  --td-brand-color-disabled: var(--td-brand-color-3);
  --td-brand-color-hover: var(--td-brand-color-5);
  --td-brand-color: var(--td-brand-color-6);
  --td-brand-color-active: var(--td-brand-color-7);
  --td-brand-color-1: #f6e7e0;
  --td-brand-color-2: #eccec2;
  --td-brand-color-3: #e3b6a3;
  --td-brand-color-4: #d99d85;
  --td-brand-color-5: #d08566;
  --td-brand-color-6: #c9724f;
  --td-brand-color-7: #bd4e27;
  --td-brand-color-8: #a63918;
  --td-brand-color-9: #8d280d;
  --td-brand-color-10: #731a05;
}
/* 暗黑模式补充样式 */
:root[theme-mode$="-dark"] {
  --brand-main: var(--td-brand-color-6);
  --td-brand-color-light: var(--td-brand-color-1);
  --td-brand-color-focus: var(--td-brand-color-2);
  --td-brand-color-disabled: var(--td-brand-color-3);
  --td-brand-color-hover: var(--td-brand-color-5);
  --td-brand-color: var(--td-brand-color-7);
  --td-brand-color-active: var(--td-brand-color-7);
  --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);
  --td-bg-color-container: var(--td-gray-color-13);
  --td-bg-color-container-hover: var(--td-gray-color-12);
  --td-bg-color-container-active: var(--td-gray-color-10);
  --td-bg-color-container-select: var(--td-gray-color-9);
  --td-bg-color-secondarycontainer: var(--td-gray-color-12);
  --td-bg-color-secondarycontainer-hover: var(--td-gray-color-11);
  --td-bg-color-secondarycontainer-active: var(--td-gray-color-9);
  --td-bg-color-component: var(--td-gray-color-11);
  --td-bg-color-component-hover: var(--td-gray-color-10);
  --td-bg-color-component-active: var(--td-gray-color-9);
  --td-bg-color-secondarycomponent: var(--td-gray-color-10);
  --td-bg-color-secondarycomponent-hover: var(--td-gray-color-9);
  --td-bg-color-secondarycomponent-active: var(--td-gray-color-8);
  --td-bg-color-component-disabled: var(--td-gray-color-12);
  --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);
}