feat(frontend): adapt TDesign themes
This commit is contained in:
董宏凯 committed
1 parent
a699545c4c
commit
2d6992d656
4 files changed
+356
-10
No files matched your search
@@ -2,9 +2,10 @@ import "@fontsource/noto-sans-sc/chinese-simplified-400.css";
|
||||
import "@fontsource/noto-sans-sc/chinese-simplified-500.css";
|
||||
import "@fontsource/noto-sans-sc/chinese-simplified-600.css";
|
||||
import "@fontsource/noto-sans-sc/chinese-simplified-700.css";
|
||||
import "./styles/globals.css";
|
||||
import "tdesign-react/es/style/index.css";
|
||||
import "katex/dist/katex.min.css";
|
||||
import "./styles/globals.css";
|
||||
import "tdesign-react/es/style/index.css";
|
||||
import "./styles/tdesign-theme.css";
|
||||
import "katex/dist/katex.min.css";
|
||||
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
|
||||
@@ -651,15 +651,25 @@
|
||||
box-shadow: 0 0 0 2px rgba(0, 98, 217, 0.16);
|
||||
}
|
||||
|
||||
/* ── TDesign Select focus / hover ────────────────────────────────────── */
|
||||
/* ── TDesign Select interaction ──────────────────────────────────────── */
|
||||
[data-theme="lightblue"] .light-app-management-page .t-select:hover .t-input,
|
||||
[data-theme="lightblue"] .light-app-management-page .t-select:hover .t-input__wrap {
|
||||
border-color: rgba(0, 98, 217, 0.5);
|
||||
border-color: #A6A6A6;
|
||||
}
|
||||
[data-theme="lightblue"] .light-app-management-page .t-select.t-is-focused .t-input,
|
||||
[data-theme="lightblue"] .light-app-management-page .t-select.t-is-focused .t-input__wrap {
|
||||
border-color: #0062D9;
|
||||
box-shadow: 0 0 0 2px rgba(0, 98, 217, 0.16);
|
||||
/* Opening the options with a mouse is not a validation or selected state. */
|
||||
border-color: #DBDBDB;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Keep a visible focus ring for keyboard navigation only. */
|
||||
@supports selector(.t-select:has(.t-input__inner:focus-visible)) {
|
||||
[data-theme="lightblue"] .light-app-management-page .t-select.t-is-focused:has(.t-input__inner:focus-visible) .t-input,
|
||||
[data-theme="lightblue"] .light-app-management-page .t-select.t-is-focused:has(.t-input__inner:focus-visible) .t-input__wrap {
|
||||
border-color: #0062D9;
|
||||
box-shadow: 0 0 0 2px rgba(0, 98, 217, 0.16);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 启用开关 ───────────────────────────────────────────────────────── */
|
||||
|
||||
@@ -8,7 +8,6 @@
|
||||
/* ── CSS variables (light - red) ─────────────────────────────────────── */
|
||||
.strategy-data {
|
||||
--color-main: #cf1322;
|
||||
--td-brand-color: #ce2d39;
|
||||
--bg-color: #fef6f6;
|
||||
--card-border: #fa9196;
|
||||
--text-color: #222222;
|
||||
@@ -23,7 +22,6 @@
|
||||
/* ── CSS variables (light - blue) ────────────────────────────────────── */
|
||||
[data-theme="lightblue"] .strategy-data {
|
||||
--color-main: #0062D9;
|
||||
--td-brand-color: #0062D9;
|
||||
--bg-color: #EAF4FF;
|
||||
--card-border: #80BCFF;
|
||||
|
||||
@@ -35,7 +33,6 @@
|
||||
/* ── CSS variables (dark) ────────────────────────────────────────────── */
|
||||
.dark .strategy-data {
|
||||
--color-main: var(--color-primary);
|
||||
--td-brand-color: var(--color-primary);
|
||||
--bg-color: rgba(22, 119, 255, 0.12);
|
||||
--card-border: rgba(43, 143, 254, 0.55);
|
||||
--text-color: var(--color-text-strong);
|
||||
|
||||
@@ -0,0 +1,338 @@
|
||||
/**
|
||||
* TDesign React theme bridge.
|
||||
*
|
||||
* Keep this file loaded after `tdesign-react/es/style/index.css`. TDesign
|
||||
* overlays are mounted below <body>, so the tokens intentionally live on the
|
||||
* document root instead of a page container.
|
||||
*
|
||||
* Sources:
|
||||
* - docs/浅红色UI规范/01-基础样式.md
|
||||
* - docs/ui规范-浅蓝/浅蓝色ui规范.md
|
||||
* - docs/ui规范-深蓝/00-基础-色彩字体间距.md
|
||||
*/
|
||||
|
||||
/* Shared light-theme functional palettes and neutral scale. */
|
||||
:root {
|
||||
--td-gray-color-1: #fafafa;
|
||||
--td-gray-color-2: #f5f5f5;
|
||||
--td-gray-color-3: #e8e8e8;
|
||||
--td-gray-color-4: #dbdbdb;
|
||||
--td-gray-color-5: #c1c1c1;
|
||||
--td-gray-color-6: #a6a6a6;
|
||||
--td-gray-color-7: #7f7f7f;
|
||||
--td-gray-color-8: #6b6b6b;
|
||||
--td-gray-color-9: #575757;
|
||||
--td-gray-color-10: #3d3d3d;
|
||||
--td-gray-color-11: #333333;
|
||||
--td-gray-color-12: #2b2b2b;
|
||||
--td-gray-color-13: #222222;
|
||||
--td-gray-color-14: #181818;
|
||||
|
||||
--td-warning-color-1: #fffcf9;
|
||||
--td-warning-color-2: #fffaf4;
|
||||
--td-warning-color-3: #fff6ea;
|
||||
--td-warning-color-4: #ffeed4;
|
||||
--td-warning-color-5: #ffddaa;
|
||||
--td-warning-color-6: #ffcc80;
|
||||
--td-warning-color-7: #ffbb55;
|
||||
--td-warning-color-8: #ffaa2b;
|
||||
--td-warning-color-9: #ff9900;
|
||||
--td-warning-color-10: #b35f00;
|
||||
|
||||
--td-success-color-1: #fafefd;
|
||||
--td-success-color-2: #f6fdfb;
|
||||
--td-success-color-3: #eefcf7;
|
||||
--td-success-color-4: #dcf8ee;
|
||||
--td-success-color-5: #baf1dd;
|
||||
--td-success-color-6: #97ebcd;
|
||||
--td-success-color-7: #74e4bc;
|
||||
--td-success-color-8: #52ddab;
|
||||
--td-success-color-9: #2fd69a;
|
||||
--td-success-color-10: #118a65;
|
||||
|
||||
--td-error-color-1: #fefafa;
|
||||
--td-error-color-2: #fef6f6;
|
||||
--td-error-color-3: #feeded;
|
||||
--td-error-color-4: #fddadc;
|
||||
--td-error-color-5: #fcb5b9;
|
||||
--td-error-color-6: #f5222d;
|
||||
--td-error-color-7: #cf1322;
|
||||
--td-error-color-8: #a8071a;
|
||||
--td-error-color-9: #820014;
|
||||
--td-error-color-10: #5c0011;
|
||||
|
||||
--td-warning-color: #ff9900;
|
||||
--td-warning-color-hover: #c66d00;
|
||||
--td-warning-color-focus: #fff6ea;
|
||||
--td-warning-color-active: #b35f00;
|
||||
--td-warning-color-disabled: #ffcc80;
|
||||
--td-warning-color-light: #fffaf4;
|
||||
--td-warning-color-light-hover: #fff6ea;
|
||||
|
||||
--td-success-color: #2fd69a;
|
||||
--td-success-color-hover: #189d72;
|
||||
--td-success-color-focus: #eefcf7;
|
||||
--td-success-color-active: #118a65;
|
||||
--td-success-color-disabled: #97ebcd;
|
||||
--td-success-color-light: #f6fdfb;
|
||||
--td-success-color-light-hover: #eefcf7;
|
||||
|
||||
--td-error-color: #f5222d;
|
||||
--td-error-color-hover: #cf1322;
|
||||
--td-error-color-focus: #feeded;
|
||||
--td-error-color-active: #a8071a;
|
||||
--td-error-color-disabled: #fa9196;
|
||||
--td-error-color-light: #fef6f6;
|
||||
--td-error-color-light-hover: #feeded;
|
||||
|
||||
--td-font-white-1: #ffffff;
|
||||
--td-font-white-2: rgba(255, 255, 255, 0.72);
|
||||
--td-font-white-3: rgba(255, 255, 255, 0.48);
|
||||
--td-font-white-4: rgba(255, 255, 255, 0.32);
|
||||
--td-font-gray-1: #222222;
|
||||
--td-font-gray-2: #575757;
|
||||
--td-font-gray-3: #a6a6a6;
|
||||
--td-font-gray-4: #c1c1c1;
|
||||
|
||||
--td-mask-active: rgba(0, 0, 0, 0.6);
|
||||
--td-mask-disabled: rgba(255, 255, 255, 0.6);
|
||||
--td-mask-background: rgba(255, 255, 255, 0.96);
|
||||
|
||||
--td-bg-color-page: #fafafa;
|
||||
--td-bg-color-container: #ffffff;
|
||||
--td-bg-color-container-hover: #fafafa;
|
||||
--td-bg-color-container-active: #f5f5f5;
|
||||
--td-bg-color-container-select: #ffffff;
|
||||
--td-bg-color-secondarycontainer: #fafafa;
|
||||
--td-bg-color-secondarycontainer-hover: #f5f5f5;
|
||||
--td-bg-color-secondarycontainer-active: #e8e8e8;
|
||||
--td-bg-color-component: #f5f5f5;
|
||||
--td-bg-color-component-hover: #e8e8e8;
|
||||
--td-bg-color-component-active: #dbdbdb;
|
||||
--td-bg-color-secondarycomponent: #e8e8e8;
|
||||
--td-bg-color-secondarycomponent-hover: #dbdbdb;
|
||||
--td-bg-color-secondarycomponent-active: #c1c1c1;
|
||||
--td-bg-color-component-disabled: #f5f5f5;
|
||||
--td-bg-color-specialcomponent: #ffffff;
|
||||
|
||||
--td-text-color-primary: #222222;
|
||||
--td-text-color-secondary: #575757;
|
||||
--td-text-color-placeholder: #a6a6a6;
|
||||
--td-text-color-disabled: #c1c1c1;
|
||||
--td-text-color-anti: #ffffff;
|
||||
--td-text-color-watermark: rgba(34, 34, 34, 0.1);
|
||||
|
||||
--td-border-level-1-color: #e8e8e8;
|
||||
--td-component-stroke: #e8e8e8;
|
||||
--td-border-level-2-color: #dbdbdb;
|
||||
--td-component-border: #dbdbdb;
|
||||
|
||||
--td-shadow-1: 0 2px 8px rgba(34, 34, 34, 0.08);
|
||||
--td-shadow-2: 0 6px 18px rgba(34, 34, 34, 0.12);
|
||||
--td-shadow-3: 0 12px 32px rgba(34, 34, 34, 0.16);
|
||||
--td-shadow-inset-top: inset 0 0.5px 0 #e8e8e8;
|
||||
--td-shadow-inset-right: inset 0.5px 0 0 #e8e8e8;
|
||||
--td-shadow-inset-bottom: inset 0 -0.5px 0 #e8e8e8;
|
||||
--td-shadow-inset-left: inset -0.5px 0 0 #e8e8e8;
|
||||
--td-table-shadow-color: rgba(34, 34, 34, 0.08);
|
||||
--td-scrollbar-color: rgba(34, 34, 34, 0.12);
|
||||
--td-scrollbar-hover-color: rgba(34, 34, 34, 0.3);
|
||||
--td-scroll-track-color: #ffffff;
|
||||
}
|
||||
|
||||
/* Light red: the default DeerFlow theme. */
|
||||
:root {
|
||||
--td-brand-color-1: #fefafa;
|
||||
--td-brand-color-2: #fef6f6;
|
||||
--td-brand-color-3: #feeded;
|
||||
--td-brand-color-4: #fddadc;
|
||||
--td-brand-color-5: #fcb5b9;
|
||||
--td-brand-color-6: #f74750;
|
||||
--td-brand-color-7: #f5222d;
|
||||
--td-brand-color-8: #bc0d1e;
|
||||
--td-brand-color-9: #a8071a;
|
||||
--td-brand-color-10: #5c0011;
|
||||
|
||||
--td-brand-color: #f5222d;
|
||||
--td-brand-color-hover: #bc0d1e;
|
||||
--td-brand-color-focus: #feeded;
|
||||
--td-brand-color-active: #a8071a;
|
||||
--td-brand-color-disabled: #fa9196;
|
||||
--td-brand-color-light: #fef6f6;
|
||||
--td-brand-color-light-hover: #feeded;
|
||||
--td-text-color-brand: #f5222d;
|
||||
--td-text-color-link: #0079fe;
|
||||
}
|
||||
|
||||
/* Light blue: selected by ThemeContext through data-theme="lightblue". */
|
||||
:root[data-theme="lightblue"] {
|
||||
--td-brand-color-1: #f9fcff;
|
||||
--td-brand-color-2: #f4f9ff;
|
||||
--td-brand-color-3: #eaf4ff;
|
||||
--td-brand-color-4: #d4e9ff;
|
||||
--td-brand-color-5: #aad2ff;
|
||||
--td-brand-color-6: #0079fe;
|
||||
--td-brand-color-7: #0062d9;
|
||||
--td-brand-color-8: #0056c6;
|
||||
--td-brand-color-9: #004ab3;
|
||||
--td-brand-color-10: #002466;
|
||||
|
||||
--td-brand-color: #0062d9;
|
||||
--td-brand-color-hover: #0079fe;
|
||||
--td-brand-color-focus: #eaf4ff;
|
||||
--td-brand-color-active: #0056c6;
|
||||
--td-brand-color-disabled: #a6a6a6;
|
||||
--td-brand-color-light: #eaf4ff;
|
||||
--td-brand-color-light-hover: #d4e9ff;
|
||||
--td-text-color-primary: #3d3d3d;
|
||||
--td-text-color-secondary: #7f7f7f;
|
||||
--td-text-color-brand: #0062d9;
|
||||
--td-text-color-link: #0062d9;
|
||||
--td-bg-color-container-hover: #f9fcff;
|
||||
--td-bg-color-container-active: #eaf4ff;
|
||||
--td-bg-color-secondarycontainer: #f9fcff;
|
||||
--td-bg-color-secondarycontainer-hover: #f4f9ff;
|
||||
--td-bg-color-secondarycontainer-active: #eaf4ff;
|
||||
}
|
||||
|
||||
/* Deep blue: selected by ThemeContext through .dark + theme-mode="dark". */
|
||||
:root.dark,
|
||||
:root[theme-mode="dark"] {
|
||||
--td-brand-color-1: #e6f4ff;
|
||||
--td-brand-color-2: #bae0ff;
|
||||
--td-brand-color-3: #91caff;
|
||||
--td-brand-color-4: #69b1ff;
|
||||
--td-brand-color-5: #4096ff;
|
||||
--td-brand-color-6: #1677ff;
|
||||
--td-brand-color-7: #0958d9;
|
||||
--td-brand-color-8: #003eb3;
|
||||
--td-brand-color-9: #002c8c;
|
||||
--td-brand-color-10: #001d6c;
|
||||
|
||||
--td-success-color-1: #e6fffb;
|
||||
--td-success-color-2: #b5f5ec;
|
||||
--td-success-color-3: #87e8de;
|
||||
--td-success-color-4: #5cdbd3;
|
||||
--td-success-color-5: #36cfc9;
|
||||
--td-success-color-6: #13c2c2;
|
||||
--td-success-color-7: #08979c;
|
||||
--td-success-color-8: #006d75;
|
||||
--td-success-color-9: #00474f;
|
||||
--td-success-color-10: #002329;
|
||||
|
||||
--td-error-color-1: #fff1f0;
|
||||
--td-error-color-2: #ffccc7;
|
||||
--td-error-color-3: #ffa39e;
|
||||
--td-error-color-4: #ff7875;
|
||||
--td-error-color-5: #ff4d4f;
|
||||
--td-error-color-6: #f5222d;
|
||||
--td-error-color-7: #cf1322;
|
||||
--td-error-color-8: #a8071a;
|
||||
--td-error-color-9: #820014;
|
||||
--td-error-color-10: #5c0011;
|
||||
|
||||
--td-brand-color: #1677ff;
|
||||
--td-brand-color-hover: #0958d9;
|
||||
--td-brand-color-focus: rgba(22, 119, 255, 0.24);
|
||||
--td-brand-color-active: #003eb3;
|
||||
--td-brand-color-disabled: rgba(22, 119, 255, 0.35);
|
||||
--td-brand-color-light: rgba(22, 119, 255, 0.16);
|
||||
--td-brand-color-light-hover: rgba(22, 119, 255, 0.24);
|
||||
|
||||
--td-success-color: #52c41a;
|
||||
--td-success-color-hover: #73d13d;
|
||||
--td-success-color-focus: rgba(82, 196, 26, 0.24);
|
||||
--td-success-color-active: #389e0d;
|
||||
--td-success-color-disabled: rgba(82, 196, 26, 0.35);
|
||||
--td-success-color-light: rgba(82, 196, 26, 0.16);
|
||||
--td-success-color-light-hover: rgba(82, 196, 26, 0.24);
|
||||
|
||||
--td-warning-color: #faad14;
|
||||
--td-warning-color-hover: #ffc53d;
|
||||
--td-warning-color-focus: rgba(250, 173, 20, 0.24);
|
||||
--td-warning-color-active: #d48806;
|
||||
--td-warning-color-disabled: rgba(250, 173, 20, 0.35);
|
||||
--td-warning-color-light: rgba(250, 173, 20, 0.16);
|
||||
--td-warning-color-light-hover: rgba(250, 173, 20, 0.24);
|
||||
|
||||
--td-error-color: #f5222d;
|
||||
--td-error-color-hover: #cf1322;
|
||||
--td-error-color-focus: rgba(245, 34, 45, 0.24);
|
||||
--td-error-color-active: #a8071a;
|
||||
--td-error-color-disabled: rgba(245, 34, 45, 0.35);
|
||||
--td-error-color-light: rgba(245, 34, 45, 0.16);
|
||||
--td-error-color-light-hover: rgba(245, 34, 45, 0.24);
|
||||
|
||||
--td-gray-color-1: #e8edf5;
|
||||
--td-gray-color-2: #c5cfe0;
|
||||
--td-gray-color-3: #9badc8;
|
||||
--td-gray-color-4: #6e88b0;
|
||||
--td-gray-color-5: #4a6491;
|
||||
--td-gray-color-6: #3b5683;
|
||||
--td-gray-color-7: #2d4473;
|
||||
--td-gray-color-8: #243b68;
|
||||
--td-gray-color-9: #1a2f5a;
|
||||
--td-gray-color-10: #162952;
|
||||
--td-gray-color-11: #122347;
|
||||
--td-gray-color-12: #0f1d3e;
|
||||
--td-gray-color-13: #0c1836;
|
||||
--td-gray-color-14: #060e24;
|
||||
|
||||
--td-font-white-1: #c5cfe0;
|
||||
--td-font-white-2: #9badc8;
|
||||
--td-font-white-3: #6e88b0;
|
||||
--td-font-white-4: #4a6491;
|
||||
|
||||
--td-mask-active: rgba(6, 14, 36, 0.6);
|
||||
--td-mask-disabled: rgba(6, 14, 36, 0.72);
|
||||
--td-mask-background: rgba(6, 14, 36, 0.96);
|
||||
|
||||
--td-bg-color-page: #0c1836;
|
||||
--td-bg-color-container: #1a2f5a;
|
||||
--td-bg-color-container-hover: #243b68;
|
||||
--td-bg-color-container-active: #2d4473;
|
||||
--td-bg-color-container-select: #122347;
|
||||
--td-bg-color-secondarycontainer: #122347;
|
||||
--td-bg-color-secondarycontainer-hover: #1a2f5a;
|
||||
--td-bg-color-secondarycontainer-active: #2d4473;
|
||||
--td-bg-color-component: #122347;
|
||||
--td-bg-color-component-hover: #1a2f5a;
|
||||
--td-bg-color-component-active: #2d4473;
|
||||
--td-bg-color-secondarycomponent: #1a2f5a;
|
||||
--td-bg-color-secondarycomponent-hover: #2d4473;
|
||||
--td-bg-color-secondarycomponent-active: #4a6491;
|
||||
--td-bg-color-component-disabled: #122347;
|
||||
--td-bg-color-specialcomponent: transparent;
|
||||
|
||||
--td-text-color-primary: #c5cfe0;
|
||||
--td-text-color-secondary: #6e88b0;
|
||||
--td-text-color-placeholder: #6e88b0;
|
||||
--td-text-color-disabled: #4a6491;
|
||||
--td-text-color-anti: #ffffff;
|
||||
--td-text-color-brand: #4096ff;
|
||||
--td-text-color-link: #4096ff;
|
||||
--td-text-color-watermark: rgba(197, 207, 224, 0.1);
|
||||
|
||||
--td-border-level-1-color: #2d4473;
|
||||
--td-component-stroke: #2d4473;
|
||||
--td-border-level-2-color: #4a6491;
|
||||
--td-component-border: #4a6491;
|
||||
|
||||
/*
|
||||
* Keep menus and selects crisp on the deep-blue canvas. A blue glow here
|
||||
* makes every floating layer look like it has an oversized blurred border.
|
||||
* The blue accent remains on focus/selected states; elevation uses the
|
||||
* neutral navy shadow instead.
|
||||
*/
|
||||
--td-shadow-1: 0 1px 4px rgba(6, 14, 36, 0.22);
|
||||
--td-shadow-2: 0 4px 12px rgba(6, 14, 36, 0.34);
|
||||
--td-shadow-3: 0 10px 24px rgba(6, 14, 36, 0.48);
|
||||
--td-shadow-inset-top: inset 0 0.5px 0 #2d4473;
|
||||
--td-shadow-inset-right: inset 0.5px 0 0 #2d4473;
|
||||
--td-shadow-inset-bottom: inset 0 -0.5px 0 #2d4473;
|
||||
--td-shadow-inset-left: inset -0.5px 0 0 #2d4473;
|
||||
--td-table-shadow-color: rgba(6, 14, 36, 0.55);
|
||||
--td-scrollbar-color: rgba(197, 207, 224, 0.16);
|
||||
--td-scrollbar-hover-color: rgba(197, 207, 224, 0.36);
|
||||
--td-scroll-track-color: #122347;
|
||||
}
|
||||
Reference in new issue
Block a user