92 lines
3.0 KiB
CSS
92 lines
3.0 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* 在 shadow DOM 内 :root 不匹配，用 :host 给 Web Component 自身定义主题 token。
|
|
颜色名称跟主前端 frontend/src/index.css 保持一致——这样组件里的 bg-bg-card / text-accent
|
|
等类名在插件 build 时也能解析到对应的 var()。 */
|
|
@theme {
|
|
--color-bg-primary: var(--bg-primary);
|
|
--color-bg-secondary: var(--bg-secondary);
|
|
--color-bg-tertiary: var(--bg-tertiary);
|
|
--color-bg-card: var(--bg-card);
|
|
--color-bg-sidebar: var(--bg-sidebar);
|
|
--color-bg-input: var(--bg-input);
|
|
--color-bg-hover: var(--bg-hover);
|
|
--color-bg-active: var(--bg-active);
|
|
--color-bg-base: var(--bg-base);
|
|
--color-border-primary: var(--border-primary);
|
|
--color-border-secondary: var(--border-secondary);
|
|
--color-text-primary: var(--text-primary);
|
|
--color-text-secondary: var(--text-secondary);
|
|
--color-text-tertiary: var(--text-tertiary);
|
|
--color-text-muted: var(--text-muted);
|
|
--color-accent: var(--accent);
|
|
--color-accent-hover: var(--accent-hover);
|
|
--color-accent-light: var(--accent-light);
|
|
--color-danger: var(--danger);
|
|
--color-danger-bg: var(--danger-bg);
|
|
--color-success: var(--success);
|
|
--color-success-bg: var(--success-bg);
|
|
--color-warning: var(--warning);
|
|
--color-warning-bg: var(--warning-bg);
|
|
}
|
|
|
|
:host {
|
|
/* light theme defaults — 跟主前端保持一致 */
|
|
--bg-primary: #f2f0ed;
|
|
--bg-secondary: #eae8e4;
|
|
--bg-tertiary: #e0ddd8;
|
|
--bg-card: #faf9f7;
|
|
--bg-sidebar: #eae8e4;
|
|
--bg-input: #f2f0ed;
|
|
--bg-hover: rgba(255, 255, 255, 0.4);
|
|
--bg-active: rgba(156, 175, 136, 0.08);
|
|
--bg-base: #f2f0ed;
|
|
--border-primary: #e0ddd8;
|
|
--border-secondary: #eae8e4;
|
|
--text-primary: #3d3d3d;
|
|
--text-secondary: #5a5a5a;
|
|
--text-tertiary: #8c8680;
|
|
--text-muted: #b5afa8;
|
|
--accent: #9caf88;
|
|
--accent-hover: #8a9e78;
|
|
--accent-light: rgba(156, 175, 136, 0.12);
|
|
--danger: #c4917a;
|
|
--danger-bg: rgba(196, 145, 122, 0.08);
|
|
--success: #7a8e6a;
|
|
--success-bg: rgba(122, 142, 106, 0.08);
|
|
--warning: #c4a882;
|
|
--warning-bg: rgba(196, 168, 130, 0.08);
|
|
|
|
display: block;
|
|
height: 100%;
|
|
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
}
|
|
|
|
/* 跟随系统/主前端的暗色主题：宿主元素加 [data-theme="dark"] 时切换 */
|
|
:host([data-theme="dark"]) {
|
|
--bg-primary: #1c1b19;
|
|
--bg-secondary: #232220;
|
|
--bg-tertiary: #2d2b28;
|
|
--bg-card: #252421;
|
|
--bg-sidebar: #1e1d1b;
|
|
--bg-input: #2d2b28;
|
|
--bg-hover: rgba(255, 255, 255, 0.04);
|
|
--bg-active: rgba(156, 175, 136, 0.1);
|
|
--bg-base: #1c1b19;
|
|
--border-primary: rgba(255, 255, 255, 0.06);
|
|
--border-secondary: rgba(255, 255, 255, 0.03);
|
|
--text-primary: #e8e6e3;
|
|
--text-secondary: #c8c5c0;
|
|
--text-tertiary: #a09c96;
|
|
--text-muted: #7a7772;
|
|
--accent: #a8bc94;
|
|
--accent-hover: #b8caa6;
|
|
--accent-light: rgba(156, 175, 136, 0.15);
|
|
--danger: #d4a894;
|
|
--danger-bg: rgba(196, 145, 122, 0.1);
|
|
--success: #9caf88;
|
|
--success-bg: rgba(156, 175, 136, 0.1);
|
|
--warning: #c4a882;
|
|
--warning-bg: rgba(196, 168, 130, 0.1);
|
|
}
|