@taskon/widget-react 0.0.1 → 0.0.2

package/dist/TaskOnProvider.css

@@ -3,16 +3,31 @@
  * 遵循 TaskOn Widget 命名规范
  */
 
+/*
+ * Responsive base styles
+ *
+ * Keep mobile breakpoints and fallback patterns centralized here.
+ * Components should reuse these mixins instead of duplicating query logic.
+ */
+
+/*
+ * Desktop-up mixin:
+ * 1) Enable desktop enhancement in wider containers
+ * 2) Keep viewport media query as fallback
+ */
+
 /* ==================== Viewport 容器 ==================== */
+
 .taskon-toast-viewport {
   position: fixed;
-  top: 20px;
-  right: 20px;
+  top: 10px;
+  right: 10px;
+  left: 10px;
   display: flex;
   flex-direction: column;
   gap: 10px;
-  width: 320px;
-  max-width: calc(100vw - 40px);
+  width: auto;
+  max-width: none;
   margin: 0;
   padding: 0;
   list-style: none;
@@ -21,20 +36,22 @@
 }
 
 /* ==================== Toast 基础样式 ==================== */
+
 .taskon-toast {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 14px 16px;
   border-radius: 8px;
-  background: #1a1a1a;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  color: #fff;
+  background: var(--taskon-color-bg-floating);
+  box-shadow: 0 4px 12px var(--taskon-color-bg-mask);
+  color: var(--taskon-color-text);
   font-size: 14px;
   line-height: 1.4;
 }
 
 /* 动画 */
+
 .taskon-toast[data-state="open"] {
   animation: taskon-toast-slide-in 200ms ease-out;
 }
@@ -86,6 +103,7 @@
 }
 
 /* ==================== Toast 图标 ==================== */
+
 .taskon-toast-icon {
   flex-shrink: 0;
   width: 20px;
@@ -99,65 +117,355 @@
 }
 
 /* ==================== Toast 消息 ==================== */
+
 .taskon-toast-message {
   flex: 1;
   margin: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 /* ==================== Toast 类型变体 ==================== */
 
 /* Success */
+
 .taskon-toast--success {
-  border-left: 3px solid #00ffa3;
+  border-left: 3px solid var(--taskon-color-success);
 }
 
 .taskon-toast--success .taskon-toast-icon {
-  background: rgba(0, 255, 163, 0.2);
-  color: #00ffa3;
+  background: var(--taskon-color-success-bg);
+  color: var(--taskon-color-success);
 }
 
 /* Error */
+
 .taskon-toast--error {
-  border-left: 3px solid #eb5757;
+  border-left: 3px solid var(--taskon-color-error);
 }
 
 .taskon-toast--error .taskon-toast-icon {
-  background: rgba(235, 87, 87, 0.2);
-  color: #eb5757;
+  background: var(--taskon-color-error-bg);
+  color: var(--taskon-color-error);
 }
 
 /* Warning */
+
 .taskon-toast--warning {
-  border-left: 3px solid #f2c94c;
+  border-left: 3px solid var(--taskon-color-warning);
 }
 
 .taskon-toast--warning .taskon-toast-icon {
-  background: rgba(242, 201, 76, 0.2);
-  color: #f2c94c;
+  background: var(--taskon-color-warning-bg);
+  color: var(--taskon-color-warning);
 }
 
 /* Info */
+
 .taskon-toast--info {
-  border-left: 3px solid #2f80ed;
+  border-left: 3px solid var(--taskon-color-link);
 }
 
 .taskon-toast--info .taskon-toast-icon {
-  background: rgba(47, 128, 237, 0.2);
-  color: #2f80ed;
+  background: var(--taskon-color-bg-surface-strong);
+  color: var(--taskon-color-link);
 }
 
-/* ==================== 响应式 ==================== */
-@media (max-width: 750px) {
+/* ==================== Desktop 增强 ==================== */
+
+@media (min-width: 751px) {
   .taskon-toast-viewport {
-    top: 10px;
-    right: 10px;
-    left: 10px;
-    width: auto;
-    max-width: none;
+    top: 20px;
+    right: 20px;
+    left: auto;
+    width: 320px;
+    max-width: calc(100vw - 40px);
   }
+}
+/**
+ * WalletPickerDialog 组件样式
+ * 使用 taskon-bind-wallet-* 命名空间
+ * 与 taskon-website 保持一致
+ */
+
+/*
+ * Responsive base styles
+ *
+ * Keep mobile breakpoints and fallback patterns centralized here.
+ * Components should reuse these mixins instead of duplicating query logic.
+ */
+
+/*
+ * Desktop-up mixin:
+ * 1) Enable desktop enhancement in wider containers
+ * 2) Keep viewport media query as fallback
+ */
+
+/* Ensure wallet picker always appears above other SDK dialogs */
+
+.taskon-wallet-picker-overlay {
+  z-index: 10008;
+}
+
+.taskon-wallet-picker-content {
+  z-index: 10009;
+}
+
+/* ==================== 容器 ==================== */
+
+.taskon-bind-wallet-dialog {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ==================== 标题 ==================== */
 
-  .taskon-toast {
-    padding: 12px 14px;
-    font-size: 13px;
+.taskon-bind-wallet-dialog-title {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 28px;
+  color: var(--taskon-color-text);
+}
+
+/* ==================== 链类型标签 ==================== */
+
+.taskon-bind-wallet-dialog-chain-label {
+  margin-top: var(--taskon-spacing-md);
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 20px;
+  color: var(--taskon-color-text);
+}
+
+/* ==================== 钱包网格 ==================== */
+
+.taskon-bind-wallet-dialog-grid {
+  margin-top: var(--taskon-spacing-sm);
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--taskon-spacing-md);
+}
+
+/* ==================== 钱包项 ==================== */
+
+.taskon-bind-wallet-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+  padding: 0 12px;
+
+  background: transparent;
+  border: 1px solid var(--taskon-color-border);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.taskon-bind-wallet-item:hover,
+.taskon-bind-wallet-item:focus {
+  background: var(--taskon-color-bg-surface-strong);
+}
+
+.taskon-bind-wallet-item:active {
+  transform: scale(0.98);
+}
+
+/* 钱包图标 */
+
+.taskon-bind-wallet-item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.taskon-bind-wallet-item-icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+/* 钱包名称 */
+
+.taskon-bind-wallet-item-name {
+  margin-left: 10px;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 20px;
+  color: var(--taskon-color-text);
+}
+
+/* 已安装标签 */
+
+.taskon-bind-wallet-item-installed {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  padding: 4px 8px;
+  font-size: 10px;
+  line-height: 14px;
+  color: var(--taskon-color-secondary);
+  background: var(--taskon-color-secondary-bg);
+  border-radius: 8px 0;
+  transform-origin: bottom right;
+}
+
+/* ==================== 连接中状态 ==================== */
+
+.taskon-bind-wallet-item--connecting {
+  opacity: 0.7;
+  cursor: wait;
+}
+
+.taskon-bind-wallet-item--connecting:hover,
+.taskon-bind-wallet-item--connecting:focus {
+  background: transparent;
+}
+
+/* ==================== 禁用状态 ==================== */
+
+.taskon-bind-wallet-item--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.taskon-bind-wallet-item--disabled:hover,
+.taskon-bind-wallet-item--disabled:focus {
+  background: transparent;
+}
+
+.taskon-bind-wallet-item--disabled:active {
+  transform: none;
+}
+
+/* 不可用标签 */
+
+.taskon-bind-wallet-item-unavailable {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  padding: 4px 8px;
+  font-size: 10px;
+  line-height: 14px;
+  color: var(--taskon-color-text-tertiary);
+  background: var(--taskon-color-bg-surface-subtle);
+  border-radius: 8px 0;
+}
+
+/* 连接中 spinner */
+
+.taskon-bind-wallet-item-connecting {
+  position: absolute;
+  right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.taskon-bind-wallet-spinner {
+  width: 16px;
+  height: 16px;
+  color: var(--taskon-color-primary);
+  animation: taskon-bind-wallet-spin 1s linear infinite;
+}
+
+@keyframes taskon-bind-wallet-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
   }
 }
+
+/* ==================== 提示文字 ==================== */
+
+.taskon-bind-wallet-dialog-tip {
+  margin: var(--taskon-spacing-md) 0 0;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--taskon-color-text-tertiary);
+  text-align: center;
+}
+
+/* ==================== 连接中遮层 ==================== */
+
+.taskon-bind-wallet-loading-overlay {
+  position: absolute;
+  /* 使用负值覆盖 Dialog body 的 padding */
+  inset: -20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: var(--taskon-color-bg-mask);
+  backdrop-filter: blur(4px);
+  border-radius: 12px;
+}
+
+.taskon-bind-wallet-loading-spinner {
+  width: 40px;
+  height: 40px;
+  color: var(--taskon-color-text-secondary);
+  animation: taskon-bind-wallet-spin 1s linear infinite;
+}
+
+.taskon-bind-wallet-loading-text {
+  margin: 20px 0 0;
+  max-width: 60%;
+  font-size: 16px;
+  line-height: 20px;
+  color: var(--taskon-color-text-secondary);
+  text-align: center;
+}
+
+@supports (container-type: inline-size) {
+    @container (min-width: 751px) {
+  .taskon-bind-wallet-dialog-chain-label {
+    margin-top: 20px;
+  }
+
+  .taskon-bind-wallet-dialog-grid {
+    margin-top: 10px;
+    grid-template-columns: 1fr 1fr;
+    gap: 18px;
+  }
+
+  .taskon-bind-wallet-dialog-tip {
+    margin-top: 20px;
+  }
+
+  .taskon-bind-wallet-loading-overlay {
+    inset: -24px;
+    border-radius: 16px;
+  }
+    }
+  }
+
+@supports not (container-type: inline-size) {
+    @media (min-width: 751px) {
+  .taskon-bind-wallet-dialog-chain-label {
+    margin-top: 20px;
+  }
+
+  .taskon-bind-wallet-dialog-grid {
+    margin-top: 10px;
+    grid-template-columns: 1fr 1fr;
+    gap: 18px;
+  }
+
+  .taskon-bind-wallet-dialog-tip {
+    margin-top: 20px;
+  }
+
+  .taskon-bind-wallet-loading-overlay {
+    inset: -24px;
+    border-radius: 16px;
+  }
+    }
+  }

package/dist/ThemeProvider.css

@@ -0,0 +1,228 @@
+/**
+ * Dialog 组件样式
+ * 基于 Radix UI Dialog 封装
+ * 使用 taskon-dialog-* 命名空间
+ */
+
+/*
+ * Responsive base styles
+ *
+ * Keep mobile breakpoints and fallback patterns centralized here.
+ * Components should reuse these mixins instead of duplicating query logic.
+ */
+
+/*
+ * Desktop-up mixin:
+ * 1) Enable desktop enhancement in wider containers
+ * 2) Keep viewport media query as fallback
+ */
+
+/* ==================== 遮罩层 ==================== */
+
+.taskon-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9998;
+  /* 遮罩层统一使用通用 mask token */
+  background-color: var(--taskon-color-bg-mask);
+  backdrop-filter: blur(24px);
+
+  /* 动画 */
+  animation: taskon-dialog-overlay-fade-in 150ms ease-out;
+}
+
+.taskon-dialog-overlay[data-state="closed"] {
+  animation: taskon-dialog-overlay-fade-out 150ms ease-in;
+}
+
+@keyframes taskon-dialog-overlay-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes taskon-dialog-overlay-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* ==================== 弹窗内容 ==================== */
+
+.taskon-dialog-content {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9999;
+
+  /* 尺寸 */
+  width: 95vw;
+  max-width: 500px;
+  max-height: 90vh;
+
+  /* 弹层使用浮层背景，避免 dark + 深色页面时与遮罩层融为一体 */
+  background-color: var(--taskon-color-bg-floating);
+  color: var(--taskon-color-text);
+  border: 1px solid var(--taskon-color-border-secondary);
+  border-radius: var(--taskon-border-radius);
+  box-shadow: 0 28px 56px -20px var(--taskon-color-bg-mask);
+
+  /* 布局 */
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  /* 移除默认的 focus outline */
+  outline: none;
+
+  /* 动画 */
+  animation: taskon-dialog-content-fade-in 200ms ease-out;
+}
+
+.taskon-dialog-content[data-state="closed"] {
+  animation: taskon-dialog-content-fade-out 150ms ease-in;
+}
+
+@keyframes taskon-dialog-content-fade-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes taskon-dialog-content-fade-out {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+}
+
+/* ==================== 无障碍标题/描述（屏幕阅读器可见） ==================== */
+
+.taskon-dialog-title--sr-only,
+.taskon-dialog-description--sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ==================== 头部操作区 ==================== */
+
+.taskon-dialog-header {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 1;
+
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.taskon-dialog-header-slot {
+  display: flex;
+  align-items: center;
+}
+
+/* ==================== 关闭按钮 ==================== */
+
+.taskon-dialog-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 32px;
+  height: 32px;
+  padding: 0;
+
+  background: var(--taskon-color-bg-surface-subtle);
+  border: none;
+  border-radius: var(--taskon-border-radius-sm);
+  cursor: pointer;
+
+  color: var(--taskon-color-text-secondary);
+  transition: all 0.2s ease;
+}
+
+.taskon-dialog-close:hover {
+  background-color: var(--taskon-color-bg-surface);
+  color: var(--taskon-color-text);
+}
+
+.taskon-dialog-close:focus-visible {
+  outline: 2px solid var(--taskon-color-primary);
+  outline-offset: 2px;
+}
+
+/* ==================== 主体内容 ==================== */
+
+.taskon-dialog-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+}
+
+.taskon-dialog-body--no-padding {
+  padding: 0;
+}
+
+/* ==================== Desktop 增强 ==================== */
+
+@supports (container-type: inline-size) {
+    @container (min-width: 751px) {
+  .taskon-dialog-content {
+    width: 90vw;
+    max-height: 85vh;
+    border-radius: var(--taskon-border-radius-lg);
+  }
+
+  .taskon-dialog-body {
+    padding: 24px;
+  }
+
+  .taskon-dialog-header {
+    top: 16px;
+    right: 16px;
+  }
+    }
+  }
+
+@supports not (container-type: inline-size) {
+    @media (min-width: 751px) {
+  .taskon-dialog-content {
+    width: 90vw;
+    max-height: 85vh;
+    border-radius: var(--taskon-border-radius-lg);
+  }
+
+  .taskon-dialog-body {
+    padding: 24px;
+  }
+
+  .taskon-dialog-header {
+    top: 16px;
+    right: 16px;
+  }
+    }
+  }