wip: 临时提交

src/styles/wot-theme.scss

@@ -0,0 +1,235 @@
+/**
+ * Wot Design Uni 主题变量定制
+ * 基于 ConfigProvider 的 CSS 变量系统
+ */
+
+/* 
+ * 全局 Wot 主题变量
+ * 这些变量会被 ConfigProvider 自动应用到所有 Wot 组件
+ */
+:root,
+page {
+  /* ===== 主题色系 ===== */
+  --wot-color-theme: #165dff;
+  --wot-color-success: #0fc6c2;
+  --wot-color-warning: #ff7d00;
+  --wot-color-danger: #f5222d;
+  --wot-color-info: #86909c;
+
+  /* ===== 中性色系 ===== */
+  --wot-color-white: #ffffff;
+  --wot-color-black: #000000;
+  --wot-color-gray-1: #f7f8fa;
+  --wot-color-gray-2: #f2f3f5;
+  --wot-color-gray-3: #e5e6eb;
+  --wot-color-gray-4: #c9cdd4;
+  --wot-color-gray-5: #86909c;
+  --wot-color-gray-6: #4e5969;
+  --wot-color-gray-7: #272e3b;
+  --wot-color-gray-8: #1d2129;
+
+  /* ===== 文本颜色 ===== */
+  --wot-color-text: #1d2129;
+  --wot-color-text-secondary: #4e5969;
+  --wot-color-text-placeholder: #86909c;
+  --wot-color-text-disabled: #c9cdd4;
+
+  /* ===== 背景颜色 ===== */
+  --wot-color-bg: #ffffff;
+  --wot-color-bg-light: #f7f8fa;
+  --wot-color-bg-dark: #f2f3f5;
+
+  /* ===== 边框颜色 ===== */
+  --wot-color-border: #e5e6eb;
+  --wot-color-border-light: #f2f3f5;
+
+  /* ===== 按钮相关变量 ===== */
+  --wot-button-primary-bg-color: var(--wot-color-theme);
+  --wot-button-primary-color: #ffffff;
+  --wot-button-primary-border-color: var(--wot-color-theme);
+
+  --wot-button-success-bg-color: var(--wot-color-success);
+  --wot-button-success-color: #ffffff;
+  --wot-button-success-border-color: var(--wot-color-success);
+
+  --wot-button-warning-bg-color: var(--wot-color-warning);
+  --wot-button-warning-color: #ffffff;
+  --wot-button-warning-border-color: var(--wot-color-warning);
+
+  --wot-button-danger-bg-color: var(--wot-color-danger);
+  --wot-button-danger-color: #ffffff;
+  --wot-button-danger-border-color: var(--wot-color-danger);
+
+  --wot-button-info-bg-color: var(--wot-color-info);
+  --wot-button-info-color: #ffffff;
+  --wot-button-info-border-color: var(--wot-color-info);
+
+  /* ===== 输入框相关变量 ===== */
+  --wot-input-border-color: var(--wot-color-border);
+  --wot-input-focus-border-color: var(--wot-color-theme);
+  --wot-input-placeholder-color: var(--wot-color-text-placeholder);
+  --wot-input-disabled-bg-color: var(--wot-color-bg-light);
+
+  /* ===== 开关相关变量 ===== */
+  --wot-switch-on-bg-color: var(--wot-color-theme);
+  --wot-switch-off-bg-color: var(--wot-color-gray-3);
+
+  /* ===== 卡片相关变量 ===== */
+  --wot-card-bg-color: #ffffff;
+  --wot-card-border-color: var(--wot-color-border);
+  --wot-card-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
+
+  /* ===== Cell 相关变量 ===== */
+  --wot-cell-bg-color: #ffffff;
+  --wot-cell-border-color: var(--wot-color-border);
+  --wot-cell-title-color: var(--wot-color-text);
+  --wot-cell-value-color: var(--wot-color-text-secondary);
+
+  /* ===== 标签相关变量 ===== */
+  --wot-tag-primary-bg-color: var(--wot-color-theme);
+  --wot-tag-primary-color: #ffffff;
+  --wot-tag-success-bg-color: var(--wot-color-success);
+  --wot-tag-success-color: #ffffff;
+  --wot-tag-warning-bg-color: var(--wot-color-warning);
+  --wot-tag-warning-color: #ffffff;
+  --wot-tag-danger-bg-color: var(--wot-color-danger);
+  --wot-tag-danger-color: #ffffff;
+
+  /* ===== 图标相关变量 ===== */
+  --wot-icon-color: var(--wot-color-text-secondary);
+
+  /* ===== 分割线相关变量 ===== */
+  --wot-divider-color: var(--wot-color-border);
+
+  /* ===== 弹窗相关变量 ===== */
+  --wot-popup-bg-color: #ffffff;
+  --wot-popup-border-radius: 16rpx;
+
+  /* ===== 网格相关变量 ===== */
+  --wot-grid-border-color: var(--wot-color-border);
+}
+
+/* ===== 暗黑模式变量 ===== */
+[data-theme="dark"],
+.wot-theme-dark {
+  /* 主题色在暗黑模式下稍微调亮 */
+  --wot-color-theme: #4080ff;
+  --wot-color-success: #1dd1cc;
+  --wot-color-warning: #ff8c1a;
+  --wot-color-danger: #ff4757;
+  --wot-color-info: #9ca3af;
+
+  /* 中性色系 - 暗黑模式 */
+  --wot-color-white: #1a1a1a;
+  --wot-color-black: #ffffff;
+  --wot-color-gray-1: #2a2a2a;
+  --wot-color-gray-2: #404040;
+  --wot-color-gray-3: #606060;
+  --wot-color-gray-4: #808080;
+  --wot-color-gray-5: #9ca3af;
+  --wot-color-gray-6: #d1d5db;
+  --wot-color-gray-7: #e5e7eb;
+  --wot-color-gray-8: #f3f4f6;
+
+  /* 文本颜色 - 暗黑模式 */
+  --wot-color-text: #ffffff;
+  --wot-color-text-secondary: #d1d5db;
+  --wot-color-text-placeholder: #9ca3af;
+  --wot-color-text-disabled: #6b7280;
+
+  /* 背景颜色 - 暗黑模式 */
+  --wot-color-bg: #1a1a1a;
+  --wot-color-bg-light: #2a2a2a;
+  --wot-color-bg-dark: #404040;
+
+  /* 边框颜色 - 暗黑模式 */
+  --wot-color-border: #404040;
+  --wot-color-border-light: #606060;
+
+  /* 卡片相关变量 - 暗黑模式 */
+  --wot-card-bg-color: #2a2a2a;
+  --wot-card-border-color: var(--wot-color-border);
+  --wot-card-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.3);
+
+  /* Cell 相关变量 - 暗黑模式 */
+  --wot-cell-bg-color: #2a2a2a;
+
+  /* 弹窗相关变量 - 暗黑模式 */
+  --wot-popup-bg-color: #2a2a2a;
+
+  /* 输入框相关变量 - 暗黑模式 */
+  --wot-input-disabled-bg-color: var(--wot-color-bg-light);
+}
+
+/* ===== 动态主题色支持 ===== */
+/* 这些变量会被 useTheme composable 动态设置 */
+.theme-blue {
+  --wot-color-theme: #165dff;
+}
+
+.theme-green {
+  --wot-color-theme: #0fc6c2;
+}
+
+.theme-orange {
+  --wot-color-theme: #ff7d00;
+}
+
+.theme-red {
+  --wot-color-theme: #f5222d;
+}
+
+.theme-purple {
+  --wot-color-theme: #722ed1;
+}
+
+.theme-pink {
+  --wot-color-theme: #eb2f96;
+}
+
+.theme-cyan {
+  --wot-color-theme: #13c2c2;
+}
+
+.theme-yellow {
+  --wot-color-theme: #faad14;
+}
+
+.theme-lime {
+  --wot-color-theme: #a0d911;
+}
+
+.theme-indigo {
+  --wot-color-theme: #2f54eb;
+}
+
+.theme-teal {
+  --wot-color-theme: #08979c;
+}
+
+.theme-brown {
+  --wot-color-theme: #8c6239;
+}
+
+/* ===== 全局样式增强 ===== */
+/* 确保暗黑模式下的全局样式 */
+[data-theme="dark"] {
+  color: var(--wot-color-text);
+  background-color: var(--wot-color-bg);
+}
+
+/* H5 环境下的 body 样式 */
+/* #ifdef H5 */
+body.dark {
+  color: #ffffff !important;
+  background-color: #1a1a1a !important;
+}
+/* #endif */
+
+/* 小程序环境下的 page 样式 */
+/* #ifndef H5 */
+page.dark {
+  color: #ffffff !important;
+  background-color: #1a1a1a !important;
+}
+/* #endif */