@taskon/widget-react 0.0.1-beta.3 → 0.0.1-beta.4

package/dist/dynamic-import-helper.css

@@ -4,7 +4,21 @@
  * 使用 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;
@@ -40,6 +54,7 @@
 }
 
 /* ==================== 弹窗内容 ==================== */
+
 .taskon-dialog-content {
   position: fixed;
   top: 50%;
@@ -48,14 +63,14 @@
   z-index: 9999;
 
   /* 尺寸 */
-  width: 90vw;
+  width: 95vw;
   max-width: 500px;
-  max-height: 85vh;
+  max-height: 90vh;
 
   /* 弹层统一使用 floating 背景 token */
   background-color: var(--taskon-color-bg-floating);
   color: var(--taskon-color-text);
-  border-radius: var(--taskon-border-radius-lg);
+  border-radius: var(--taskon-border-radius);
   box-shadow: 0 25px 50px -12px var(--taskon-color-bg-mask);
 
   /* 布局 */
@@ -97,6 +112,7 @@
 }
 
 /* ==================== 无障碍标题/描述（屏幕阅读器可见） ==================== */
+
 .taskon-dialog-title--sr-only,
 .taskon-dialog-description--sr-only {
   position: absolute;
@@ -111,10 +127,11 @@
 }
 
 /* ==================== 头部操作区 ==================== */
+
 .taskon-dialog-header {
   position: absolute;
-  top: 16px;
-  right: 16px;
+  top: 12px;
+  right: 12px;
   z-index: 1;
 
   display: flex;
@@ -128,6 +145,7 @@
 }
 
 /* ==================== 关闭按钮 ==================== */
+
 .taskon-dialog-close {
   display: flex;
   align-items: center;
@@ -157,361 +175,435 @@
 }
 
 /* ==================== 主体内容 ==================== */
+
 .taskon-dialog-body {
   flex: 1;
   overflow-y: auto;
-  padding: 24px;
+  padding: 20px;
 }
 
 .taskon-dialog-body--no-padding {
   padding: 0;
 }
 
-/* ==================== 响应式 ==================== */
-@media (max-width: 750px) {
+/* ==================== Desktop 增强 ==================== */
+
+@supports (container-type: inline-size) {
+    @container (min-width: 751px) {
   .taskon-dialog-content {
-    width: 95vw;
-    max-height: 90vh;
-    border-radius: var(--taskon-border-radius);
+    width: 90vw;
+    max-height: 85vh;
+    border-radius: var(--taskon-border-radius-lg);
   }
 
   .taskon-dialog-body {
-    padding: 20px;
+    padding: 24px;
   }
 
   .taskon-dialog-header {
-    top: 12px;
-    right: 12px;
+    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;
+  }
+    }
+  }
+/**
+ * Pagination 通用分页组件样式
+ * @description 使用 taskon-pagination 命名空间
+ *
+ * 设计参考 Figma: node-id=4000-1995
+ * - 按钮: 30x30px 圆形
+ * - 页码: 16px Regular
+ * - 当前页: 高强调文字
+ * - 分隔符+总页数: 次级文字
+ */
+
+/*
+ * 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-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  gap: var(--taskon-spacing-sm);
+  padding: 12px 0;
 }
-/**
- * Pagination 通用分页组件样式
- * @description 使用 taskon-pagination 命名空间
- *
- * 设计参考 Figma: node-id=4000-1995
- * - 按钮: 30x30px 圆形
- * - 页码: 16px Regular
- * - 当前页: 白色
- * - 分隔符+总页数: rgba(255,255,255,0.4)
- */
-
-/* ==================== 容器 ==================== */
-.taskon-pagination {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  gap: 16px;
-  padding: 12px 0;
-}
-
-/* ==================== 范围信息 ==================== */
-.taskon-pagination-range {
-  font-size: 14px;
-  color: var(--taskon-color-text-secondary, rgba(255, 255, 255, 0.4));
-}
-
-/* ==================== 控制区 ==================== */
-.taskon-pagination-controls {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-/* ==================== 页码信息 - 基于 Figma 设计 ==================== */
-.taskon-pagination-info {
-  display: flex;
-  align-items: center;
-  font-size: 16px;
-  font-weight: 400;
-  white-space: nowrap;
-}
-
-/* 当前页码 - 白色 */
-.taskon-pagination-info-current {
-  color: var(--taskon-color-text-lightest, #ffffff);
-}
-
-/* 分隔符 - 灰色 */
-.taskon-pagination-info-separator {
-  color: var(--taskon-color-text-dark, rgba(255, 255, 255, 0.4));
-}
-
-/* 总页数 - 灰色 */
-.taskon-pagination-info-total {
-  color: var(--taskon-color-text-dark, rgba(255, 255, 255, 0.4));
-}
-
-/* ==================== 图标 ==================== */
-.taskon-pagination-icon {
-  width: 16px;
-  height: 16px;
-}
-
-/* ==================== 按钮样式 - 圆形按钮 ==================== */
-.taskon-pagination-btn {
-  display: inline-flex;
-  align-items: center;
+
+/* ==================== 范围信息 ==================== */
+
+.taskon-pagination-range {
+  font-size: 14px;
+  color: var(--taskon-color-text-secondary);
+}
+
+/* ==================== 控制区 ==================== */
+
+.taskon-pagination-controls {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+/* ==================== 页码信息 - 基于 Figma 设计 ==================== */
+
+.taskon-pagination-info {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 400;
+  white-space: nowrap;
+}
+
+/* 当前页码 */
+
+.taskon-pagination-info-current {
+  color: var(--taskon-color-text);
+}
+
+/* 分隔符 */
+
+.taskon-pagination-info-separator {
+  color: var(--taskon-color-text-disabled);
+}
+
+/* 总页数 */
+
+.taskon-pagination-info-total {
+  color: var(--taskon-color-text-disabled);
+}
+
+/* ==================== 图标 ==================== */
+
+.taskon-pagination-icon {
+  width: 16px;
+  height: 16px;
+}
+
+/* ==================== 按钮样式 - 圆形按钮 ==================== */
+
+.taskon-pagination-btn {
+  display: inline-flex;
+  align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
-  min-width: 30px !important;
-  padding: 0 !important;
-  border-radius: 50% !important;
-  background-color: transparent !important;
-  border: 1px solid var(--taskon-color-border, rgba(255, 255, 255, 0.1)) !important;
-  color: var(--taskon-color-text-lightest, #ffffff) !important;
-  transition: all 0.2s ease;
-}
-
-.taskon-pagination-btn:hover:not(:disabled) {
-  background-color: var(--taskon-color-bg-hover, rgba(255, 255, 255, 0.04)) !important;
-  border-color: var(--taskon-color-border-hover, rgba(255, 255, 255, 0.2)) !important;
-}
-
+  min-width: 30px !important;
+  padding: 0 !important;
+  border-radius: 50% !important;
+  background-color: transparent !important;
+  border: 1px solid var(--taskon-color-border-secondary) !important;
+  color: var(--taskon-color-text) !important;
+  transition: all 0.2s ease;
+}
+
+.taskon-pagination-btn:hover:not(:disabled) {
+  background-color: var(--taskon-color-bg-surface-subtle) !important;
+  border-color: var(--taskon-color-border) !important;
+}
+
 .taskon-pagination-btn:disabled {
   opacity: 0.4;
   cursor: not-allowed;
-}
-
-/* ==================== 尺寸变体 ==================== */
+}
+
+/* ==================== 尺寸变体 ==================== */
+
 .taskon-pagination--small .taskon-pagination-range {
   font-size: 12px;
-}
-
+}
+
 .taskon-pagination--small .taskon-pagination-info {
   font-size: 14px;
-}
-
+}
+
 .taskon-pagination--small .taskon-pagination-icon {
   width: 14px;
   height: 14px;
-}
-
-.taskon-pagination--small .taskon-pagination-btn {
-  width: 24px;
-  height: 24px;
-  min-width: 24px !important;
-}
-
-/* ==================== 响应式 ==================== */
-@media (max-width: 750px) {
-  .taskon-pagination {
-    gap: 12px;
-  }
-
-  .taskon-pagination-range {
-    font-size: 3.2vw;
-  }
-
-  .taskon-pagination-info {
-    font-size: 14px;
-  }
-}
-/**
- * Table 通用表格组件样式
- *
+}
+
+.taskon-pagination--small .taskon-pagination-btn {
+  width: 24px;
+  height: 24px;
+  min-width: 24px !important;
+}
+
+/* ==================== Desktop 增强 ==================== */
+
+@supports (container-type: inline-size) {
+    @container (min-width: 751px) {
+  .taskon-pagination {
+    gap: var(--taskon-spacing-md);
+  }
+    }
+  }
+
+@supports not (container-type: inline-size) {
+    @media (min-width: 751px) {
+  .taskon-pagination {
+    gap: var(--taskon-spacing-md);
+  }
+    }
+  }
+/**
+ * Table 通用表格组件样式
+ *
  * 采用 BEM 命名规范
  * 前缀: taskon-table
  *
  * 设计参考 Figma: node-id=4000-1908
  * - 表头: 半透明背景、圆角、暗色文字
- * - 行: 边框分隔、悬停效果、交替背景
- * - 单元格: 可配置宽度和对齐方式
- */
-
+ * - 行: 边框分隔、悬停效果、交替背景
+ * - 单元格: 可配置宽度和对齐方式
+ */
+
+/*
+ * 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-table-container {
   width: 100%;
   overflow-x: auto;
   position: relative;
-}
-
+}
+
 .taskon-table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
-}
-
+}
+
 /* ============================================================================
    表头 - 参考 Figma 设计：45px 高度，深色半透明背景，无圆角
-   ============================================================================ */
-
+   ============================================================================ */
+
 .taskon-table__head {
   /* 不在 thead 上设置背景，由 th 元素控制 */
-}
-
+}
+
 .taskon-table__head tr {
   height: 45px;
-}
-
-/* 表头单元格 - 16px Regular，深色半透明背景 */
-.taskon-table__header {
-  padding: 10px 20px;
-  font-size: 16px;
-  font-weight: 400;
-  text-align: left;
-  line-height: 24px;
-  color: var(--taskon-color-text-dark, rgba(255, 255, 255, 0.4));
-  white-space: nowrap;
-  vertical-align: middle;
-  background-color: var(--taskon-color-table-header-bg, rgba(255, 255, 255, 0.04));
-}
-
-/* 表头对齐方式 */
+}
+
+/* 表头单元格 - 16px Regular，深色半透明背景 */
+
+.taskon-table__header {
+  padding: var(--taskon-spacing-sm) 12px;
+  font-size: 16px;
+  font-weight: 400;
+  text-align: left;
+  line-height: 24px;
+  color: var(--taskon-color-text-disabled);
+  white-space: nowrap;
+  vertical-align: middle;
+  background-color: var(--taskon-color-bg-surface-subtle);
+}
+
+/* 表头对齐方式 */
+
 .taskon-table__header--left {
   text-align: left;
-}
-
+}
+
 .taskon-table__header--center {
   text-align: center;
-}
-
+}
+
 .taskon-table__header--right {
   text-align: right;
-}
-
+}
+
 /* ============================================================================
    表体
-   ============================================================================ */
-
+   ============================================================================ */
+
 .taskon-table__body {
   /* 默认样式 */
-}
-
+}
+
 /* ============================================================================
    数据行 - 参考 Figma 设计：更大行高（76px），无边框
-   ============================================================================ */
-
+   ============================================================================ */
+
 .taskon-table__row {
   transition: background-color 0.2s ease;
   height: 76px;
-}
-
-/* 行边框 - 默认不显示，使用 borderless 类控制 */
+}
+
+/* 行边框 - 默认不显示，使用 borderless 类控制 */
+
 .taskon-table__row td {
   border-top: none;
   border-bottom: none;
-}
-
-/* 需要边框时的样式 */
-.taskon-table--bordered .taskon-table__row td {
-  border-top: 1px solid var(--taskon-color-table-border, rgba(255, 255, 255, 0.04));
-  border-bottom: 1px solid var(--taskon-color-table-border, rgba(255, 255, 255, 0.04));
-}
-
-/* 悬停效果 */
-.taskon-table__row:hover {
-  background-color: var(--taskon-color-table-row-hover, rgba(255, 255, 255, 0.04));
-}
-
-/* 交替行背景 (striped) */
-.taskon-table--striped .taskon-table__row:nth-child(even) {
-  background-color: var(--taskon-color-table-row-alt, rgba(255, 255, 255, 0.04));
-}
-
-/* 高亮行 */
-.taskon-table__row--highlighted {
-  background-color: var(--taskon-color-primary-bg, rgba(99, 102, 241, 0.1));
-}
-
-.taskon-table__row--highlighted:hover {
-  background-color: var(--taskon-color-primary-bg-hover, rgba(99, 102, 241, 0.15));
-}
-
-/* 禁用行 */
+}
+
+/* 需要边框时的样式 */
+
+.taskon-table--bordered .taskon-table__row td {
+  border-top: 1px solid var(--taskon-color-border-secondary);
+  border-bottom: 1px solid var(--taskon-color-border-secondary);
+}
+
+/* 悬停效果 */
+
+.taskon-table__row:hover {
+  background-color: var(--taskon-color-bg-surface-strong);
+}
+
+/* 交替行背景 (striped) */
+
+.taskon-table--striped .taskon-table__row:nth-child(even) {
+  background-color: var(--taskon-color-bg-surface-subtle);
+}
+
+/* 高亮行 */
+
+.taskon-table__row--highlighted {
+  background-color: var(--taskon-color-primary-bg);
+}
+
+.taskon-table__row--highlighted:hover {
+  background-color: var(--taskon-color-primary-bg);
+}
+
+/* 禁用行 */
+
 .taskon-table__row--disabled {
   opacity: 0.4;
-}
-
-/* 可点击行 */
+}
+
+/* 可点击行 */
+
 .taskon-table__row--clickable {
   cursor: pointer;
-}
-
+}
+
 /* ============================================================================
    单元格 - 参考 Figma 设计：16px SemiBold，白色文字
-   ============================================================================ */
-
-.taskon-table__cell {
-  padding: 16px 20px;
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 24px;
-  color: var(--taskon-color-text-lightest, #ffffff);
-  vertical-align: middle;
-}
-
-/* 单元格对齐方式 */
+   ============================================================================ */
+
+.taskon-table__cell {
+  padding: var(--taskon-spacing-sm) 12px;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  color: var(--taskon-color-text);
+  vertical-align: middle;
+}
+
+/* 单元格对齐方式 */
+
 .taskon-table__cell--left {
   text-align: left;
-}
-
+}
+
 .taskon-table__cell--center {
   text-align: center;
-}
-
+}
+
 .taskon-table__cell--right {
   text-align: right;
-}
-
-/* 单元格文本溢出 */
+}
+
+/* 单元格文本溢出 */
+
 .taskon-table__cell--ellipsis {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
-}
-
+}
+
 /* ============================================================================
    空状态和加载状态
-   ============================================================================ */
-
-.taskon-table__loading,
-.taskon-table__empty {
-  padding: 40px 16px;
-  text-align: center;
-  color: var(--taskon-color-text-dark, rgba(255, 255, 255, 0.4));
-}
-
+   ============================================================================ */
+
+.taskon-table__loading,
+.taskon-table__empty {
+  padding: 40px 16px;
+  text-align: center;
+  color: var(--taskon-color-text-disabled);
+}
+
 .taskon-table__empty-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
-}
-
+}
+
 .taskon-table__empty-icon {
   font-size: 48px;
   opacity: 0.5;
-}
-
-.taskon-table__empty-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--taskon-color-text-lightest, #ffffff);
-  margin: 0;
-}
-
-.taskon-table__empty-desc {
-  font-size: 14px;
-  color: var(--taskon-color-text-dark, rgba(255, 255, 255, 0.4));
-  margin: 0;
-}
-
-/* 加载指示器 */
-.taskon-table__loading-spinner {
-  display: inline-block;
-  width: 24px;
-  height: 24px;
-  border: 2px solid var(--taskon-color-text-dark, rgba(255, 255, 255, 0.4));
-  border-top-color: var(--taskon-color-primary, #6366f1);
-  border-radius: 50%;
-  animation: taskon-table-spin 0.8s linear infinite;
-}
-
+}
+
+.taskon-table__empty-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--taskon-color-text);
+  margin: 0;
+}
+
+.taskon-table__empty-desc {
+  font-size: 14px;
+  color: var(--taskon-color-text-disabled);
+  margin: 0;
+}
+
+/* 加载指示器 */
+
+.taskon-table__loading-spinner {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--taskon-color-text-disabled);
+  border-top-color: var(--taskon-color-primary);
+  border-radius: 50%;
+  animation: taskon-table-spin 0.8s linear infinite;
+}
+
 @keyframes taskon-table-spin {
   from {
     transform: rotate(0deg);
@@ -519,10 +611,11 @@
   to {
     transform: rotate(360deg);
   }
-}
-
-/* Overlay loading - 覆盖在表格数据上方 */
-.taskon-table__loading-overlay {
+}
+
+/* Overlay loading - 覆盖在表格数据上方 */
+
+.taskon-table__loading-overlay {
   position: absolute;
   top: 0;
   left: 0;
@@ -531,45 +624,73 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--taskon-color-overlay-bg, rgba(0, 0, 0, 0.5));
-  backdrop-filter: blur(2px);
-  z-index: 10;
-  border-radius: 4px;
-}
-
+  background-color: var(--taskon-color-bg-mask);
+  backdrop-filter: blur(2px);
+  z-index: 10;
+  border-radius: var(--taskon-border-radius-sm);
+}
+
 /* ============================================================================
    紧凑模式
-   ============================================================================ */
-
-.taskon-table--compact .taskon-table__header {
-  padding: 4px 12px;
-}
-
-.taskon-table--compact .taskon-table__cell {
-  padding: 12px;
-}
-
+   ============================================================================ */
+
+.taskon-table--compact .taskon-table__header {
+  padding: var(--taskon-spacing-xs) var(--taskon-spacing-sm);
+}
+
+.taskon-table--compact .taskon-table__cell {
+  padding: var(--taskon-spacing-xs) var(--taskon-spacing-sm);
+}
+
 /* ============================================================================
    无边框模式
-   ============================================================================ */
-
+   ============================================================================ */
+
 .taskon-table--borderless .taskon-table__row td {
   border-top: none;
   border-bottom: none;
-}
-
-/* ============================================================================
-   响应式
-   ============================================================================ */
-
-@media (max-width: 640px) {
-  .taskon-table__header,
-  .taskon-table__cell {
-    padding: 8px 12px;
-  }
-
-  .taskon-table--compact .taskon-table__header,
-  .taskon-table--compact .taskon-table__cell {
-    padding: 4px 8px;
-  }
-}
+}
+
+/* ============================================================================
+   Desktop 增强
+   ============================================================================ */
+
+@supports (container-type: inline-size) {
+    @container (min-width: 751px) {
+  .taskon-table__header {
+    padding: 10px 20px;
+  }
+
+  .taskon-table__cell {
+    padding: var(--taskon-spacing-md) 20px;
+  }
+
+  .taskon-table--compact .taskon-table__header {
+    padding: var(--taskon-spacing-xs) 12px;
+  }
+
+  .taskon-table--compact .taskon-table__cell {
+    padding: 12px;
+  }
+    }
+  }
+
+@supports not (container-type: inline-size) {
+    @media (min-width: 751px) {
+  .taskon-table__header {
+    padding: 10px 20px;
+  }
+
+  .taskon-table__cell {
+    padding: var(--taskon-spacing-md) 20px;
+  }
+
+  .taskon-table--compact .taskon-table__header {
+    padding: var(--taskon-spacing-xs) 12px;
+  }
+
+  .taskon-table--compact .taskon-table__cell {
+    padding: 12px;
+  }
+    }
+  }