@taskon/widget-react 0.0.1 → 0.0.2

package/dist/LeaderboardWidget.css

@@ -5,57 +5,15 @@
  * 前缀: taskon-leaderboard
  */
 
-/* ============================================================================
-   CSS 变量定义
-   ============================================================================ */
-
-.taskon-leaderboard {
-  /* 颜色系统 - 与 Quest Widget 保持一致 */
-  --taskon-leaderboard-bg-body: #111111;
-  --taskon-leaderboard-text-lightest: #ffffff;
-  --taskon-leaderboard-text-lighter: rgba(255, 255, 255, 0.8);
-  --taskon-leaderboard-text-light: rgba(255, 255, 255, 0.6);
-  --taskon-leaderboard-text-dark: rgba(255, 255, 255, 0.4);
-  --taskon-leaderboard-text-darkest: rgba(255, 255, 255, 0.1);
-  --taskon-leaderboard-text-invisible: rgba(255, 255, 255, 0.04);
-  --taskon-leaderboard-primary: #cbff01;
-  --taskon-leaderboard-secondary: #1affab;
-  --taskon-leaderboard-link: #58afff;
-  --taskon-leaderboard-error: #ef4444;
-
-  /* 排名徽章颜色 */
-  --taskon-leaderboard-rank-gold: #ffbf29;
-  --taskon-leaderboard-rank-gold-stroke: #ffd465;
-  --taskon-leaderboard-rank-silver: #c0c0c0;
-  --taskon-leaderboard-rank-silver-stroke: #d8d8d8;
-  --taskon-leaderboard-rank-bronze: #cd7f32;
-  --taskon-leaderboard-rank-bronze-stroke: #e0a060;
-
-  /* 间距系统 */
-  --taskon-leaderboard-spacing-xxs: 4px;
-  --taskon-leaderboard-spacing-xs: 8px;
-  --taskon-leaderboard-spacing-s: 12px;
-  --taskon-leaderboard-spacing-m: 16px;
-  --taskon-leaderboard-spacing-l: 20px;
-  --taskon-leaderboard-spacing-xl: 24px;
-  --taskon-leaderboard-spacing-xxl: 32px;
-
-  /* 圆角系统 */
-  --taskon-leaderboard-radius-s: 4px;
-  --taskon-leaderboard-radius-m: 6px;
-  --taskon-leaderboard-radius-l: 8px;
-  --taskon-leaderboard-radius-xl: 12px;
-}
-
 /* ============================================================================
    容器
    ============================================================================ */
 
 .taskon-leaderboard {
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   line-height: 1.5;
-  color: var(--taskon-leaderboard-text-lightest);
-  background-color: var(--taskon-leaderboard-bg-body);
+  color: var(--taskon-color-text);
+  background-color: var(--taskon-color-bg-canvas);
   overflow: hidden;
 }
 
@@ -68,30 +26,32 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--taskon-leaderboard-spacing-s);
+  gap: var(--taskon-spacing-sm);
 }
 
 .taskon-leaderboard__error-text {
-  color: var(--taskon-leaderboard-error);
-  font-size: 14px;
+  color: var(--taskon-color-error);
+  font-size: var(--taskon-font-size);
   margin: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .taskon-leaderboard__retry-btn {
-  padding: var(--taskon-leaderboard-spacing-xs) var(--taskon-leaderboard-spacing-m);
-  font-size: 14px;
+  padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
+  font-size: var(--taskon-font-size);
   font-weight: 500;
-  color: var(--taskon-leaderboard-primary);
+  color: var(--taskon-color-primary);
   background-color: transparent;
-  border: 1px solid var(--taskon-leaderboard-primary);
-  border-radius: var(--taskon-leaderboard-radius-m);
+  border: 1px solid var(--taskon-color-primary);
+  border-radius: var(--taskon-border-radius);
   cursor: pointer;
   transition: all 0.2s ease;
 }
 
 .taskon-leaderboard__retry-btn:hover {
-  background-color: var(--taskon-leaderboard-primary);
-  color: var(--taskon-leaderboard-bg-body);
+  background-color: var(--taskon-color-primary);
+  color: var(--taskon-color-text-on-primary);
 }
 
 /* ============================================================================
@@ -103,40 +63,44 @@
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-start;
-  gap: var(--taskon-leaderboard-spacing-s);
-  padding: var(--taskon-leaderboard-spacing-m) var(--taskon-leaderboard-spacing-l) var(--taskon-leaderboard-spacing-xs);
+  gap: var(--taskon-spacing-sm);
+  padding: var(--taskon-spacing-md) var(--taskon-spacing-md)
+    var(--taskon-spacing-sm);
   background-color: transparent;
 }
 
 /* Tab 按钮 - 默认状态：透明背景 (text-invisible) */
+
 .taskon-leaderboard-tabs__tab {
-  padding: var(--taskon-leaderboard-spacing-xs) var(--taskon-leaderboard-spacing-m);
-  font-size: 14px;
+  padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
+  font-size: var(--taskon-font-size);
   font-weight: 500;
-  line-height: 20px;
-  color: var(--taskon-leaderboard-text-lightest);
-  background-color: var(--taskon-leaderboard-text-invisible);
+  line-height: 1.43;
+  color: var(--taskon-color-text);
+  background-color: var(--taskon-color-bg-surface-subtle);
   border: 1px solid transparent;
-  border-radius: var(--taskon-leaderboard-radius-l);
+  border-radius: var(--taskon-border-radius);
   cursor: pointer;
   transition: all 0.2s ease;
 }
 
 /* Tab 悬停状态：较亮背景 (text-darkest) */
+
 .taskon-leaderboard-tabs__tab:hover {
-  background-color: var(--taskon-leaderboard-text-darkest);
+  background-color: var(--taskon-color-bg-surface-strong);
 }
 
 /* Tab 激活状态：白色背景，黑色文字，边框 */
+
 .taskon-leaderboard-tabs__tab--active {
-  background-color: var(--taskon-leaderboard-text-lightest);
-  color: #0d0d0d;
-  border-color: rgba(13, 13, 13, 0.1);
+  background-color: var(--taskon-color-text);
+  color: var(--taskon-color-bg-canvas);
+  border-color: var(--taskon-color-border);
 }
 
 .taskon-leaderboard-tabs__tab--active:hover {
-  background-color: var(--taskon-leaderboard-text-lightest);
-  color: #0d0d0d;
+  background-color: var(--taskon-color-text);
+  color: var(--taskon-color-bg-canvas);
 }
 
 /* ============================================================================
@@ -146,76 +110,84 @@
 .taskon-leaderboard-header {
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-leaderboard-spacing-xxs);
-  padding: var(--taskon-leaderboard-spacing-xs) var(--taskon-leaderboard-spacing-l) var(--taskon-leaderboard-spacing-s);
+  gap: var(--taskon-spacing-xs);
+  padding: var(--taskon-spacing-sm) var(--taskon-spacing-md)
+    var(--taskon-spacing-sm);
 }
 
 /* 状态和时间容器 */
+
 .taskon-leaderboard-header__info {
   display: flex;
   align-items: center;
-  gap: var(--taskon-leaderboard-spacing-s);
+  gap: var(--taskon-spacing-sm);
 }
 
 /* 状态徽章 - 11px SemiBold，绿色文字，深色背景 */
+
 .taskon-leaderboard-header__status {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 20px;
-  padding: 0 var(--taskon-leaderboard-spacing-xs);
-  font-size: 11px;
+  padding: 0 var(--taskon-spacing-sm);
+  font-size: var(--taskon-font-size-sm);
   font-weight: 600;
-  line-height: 12px;
-  border-radius: var(--taskon-leaderboard-radius-s);
-  background-color: var(--taskon-leaderboard-text-darkest);
+  line-height: 1;
+  border-radius: var(--taskon-border-radius-sm);
+  background-color: var(--taskon-color-border);
 }
 
 .taskon-leaderboard-header__status--ongoing {
-  color: var(--taskon-leaderboard-secondary);
+  color: var(--taskon-color-secondary);
 }
 
 .taskon-leaderboard-header__status--ended {
-  color: var(--taskon-leaderboard-error);
+  color: var(--taskon-color-error);
 }
 
 .taskon-leaderboard-header__status--upcoming {
-  color: var(--taskon-leaderboard-primary);
+  color: var(--taskon-color-primary);
 }
 
 /* 时间范围 - 16px Regular，80% 白色 */
+
 .taskon-leaderboard-header__time {
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 400;
-  line-height: 24px;
-  color: var(--taskon-leaderboard-text-lighter);
+  line-height: 1.5;
+  color: var(--taskon-color-text-secondary);
 }
 
 /* 分隔线 - 竖线 */
+
 .taskon-leaderboard-header__separator {
   width: 1px;
   height: 16px;
-  background-color: var(--taskon-leaderboard-text-dark);
+  background-color: var(--taskon-color-text-disabled);
 }
 
 /* 参与人数容器 */
+
 .taskon-leaderboard-header__participants {
   display: flex;
   align-items: center;
-  gap: var(--taskon-leaderboard-spacing-xs);
-  font-size: 16px;
+  gap: var(--taskon-spacing-sm);
+  font-size: var(--taskon-font-size-lg);
   font-weight: 500;
-  line-height: 24px;
+  line-height: 1.5;
 }
 
 /* 参与人数标签 - 60% 白色 */
+
 .taskon-leaderboard-header__participants-label {
-  color: var(--taskon-leaderboard-text-light);
+  color: var(--taskon-color-text-tertiary);
 }
 
 /* 参与人数值 - 80% 白色 */
+
 .taskon-leaderboard-header__participants-value {
-  color: var(--taskon-leaderboard-text-lighter);
+  color: var(--taskon-color-text-secondary);
 }
 
 /* ============================================================================
@@ -225,69 +197,74 @@
 .taskon-leaderboard-header__title-row {
   display: flex;
   align-items: center;
-  gap: var(--taskon-leaderboard-spacing-s);
-  margin-bottom: var(--taskon-leaderboard-spacing-xs);
+  gap: var(--taskon-spacing-sm);
+  margin-bottom: var(--taskon-spacing-sm);
 }
 
 .taskon-leaderboard-header__title {
   margin: 0;
-  font-size: 18px;
+  font-size: var(--taskon-font-size-xl);
   font-weight: 600;
-  color: var(--taskon-leaderboard-text-lightest);
+  color: var(--taskon-color-text);
 }
 
 /* 奖励信息容器 - 参考 Figma 设计：水平布局，16px 间距 */
+
 .taskon-leaderboard-header__reward-info {
   display: flex;
   align-items: center;
-  gap: var(--taskon-leaderboard-spacing-m);
+  gap: var(--taskon-spacing-md);
 }
 
 /* 奖励项 - 水平布局，8px 间距 */
+
 .taskon-leaderboard-header__reward-item {
   display: flex;
   align-items: center;
-  gap: var(--taskon-leaderboard-spacing-xs);
-  font-size: 16px;
-  line-height: 24px;
+  gap: var(--taskon-spacing-sm);
+  font-size: var(--taskon-font-size-lg);
+  line-height: 1.5;
   white-space: nowrap;
 }
 
 /* 奖励标签 - 16px Regular 白色 */
+
 .taskon-leaderboard-header__reward-label {
   font-weight: 400;
-  color: var(--taskon-leaderboard-text-lightest);
+  color: var(--taskon-color-text);
 }
 
 /* 奖励数值 - 16px SemiBold 主色 */
+
 .taskon-leaderboard-header__reward-value {
   font-weight: 600;
-  color: var(--taskon-leaderboard-primary);
+  color: var(--taskon-color-primary);
 }
 
 /* 奖励分隔线 - 12px 高度 */
+
 .taskon-leaderboard-header__reward-separator {
   width: 1px;
   height: 12px;
-  background-color: var(--taskon-leaderboard-text-darkest);
+  background-color: var(--taskon-color-border);
 }
 
 .taskon-leaderboard-header__reward-rules-btn {
   margin-left: auto;
-  padding: var(--taskon-leaderboard-spacing-xxs) var(--taskon-leaderboard-spacing-s);
-  font-size: 13px;
+  padding: var(--taskon-spacing-xs) var(--taskon-spacing-sm);
+  font-size: var(--taskon-font-size-sm);
   font-weight: 500;
-  color: var(--taskon-leaderboard-primary);
+  color: var(--taskon-color-primary);
   background-color: transparent;
-  border: 1px solid var(--taskon-leaderboard-primary);
-  border-radius: var(--taskon-leaderboard-radius-m);
+  border: 1px solid var(--taskon-color-primary);
+  border-radius: var(--taskon-border-radius);
   cursor: pointer;
   transition: all 0.2s ease;
 }
 
 .taskon-leaderboard-header__reward-rules-btn:hover {
-  background-color: var(--taskon-leaderboard-primary);
-  color: var(--taskon-leaderboard-bg-body);
+  background-color: var(--taskon-color-primary);
+  color: var(--taskon-color-text-on-primary);
 }
 
 /* ============================================================================
@@ -295,7 +272,50 @@
    ============================================================================ */
 
 .taskon-leaderboard-table {
-  padding: 0 var(--taskon-leaderboard-spacing-l);
+  padding: 0 var(--taskon-spacing-md);
+}
+
+/* Bridge generic Table defaults to unified theme tokens inside Leaderboard. */
+
+.taskon-leaderboard .taskon-table__header {
+  color: var(--taskon-color-text-disabled);
+  background-color: var(--taskon-color-bg-surface-subtle);
+}
+
+.taskon-leaderboard .taskon-table__row:hover {
+  background-color: var(--taskon-color-bg-surface-subtle);
+}
+
+.taskon-leaderboard .taskon-table--striped .taskon-table__row:nth-child(even) {
+  background-color: var(--taskon-color-bg-surface-subtle);
+}
+
+.taskon-leaderboard .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-leaderboard .taskon-table__cell {
+  color: var(--taskon-color-text);
+}
+
+.taskon-leaderboard .taskon-table__loading,
+.taskon-leaderboard .taskon-table__empty,
+.taskon-leaderboard .taskon-table__empty-desc {
+  color: var(--taskon-color-text-disabled);
+}
+
+.taskon-leaderboard .taskon-table__empty-title {
+  color: var(--taskon-color-text);
+}
+
+.taskon-leaderboard .taskon-table__loading-spinner {
+  border: 2px solid var(--taskon-color-text-disabled);
+  border-top-color: var(--taskon-color-primary);
+}
+
+.taskon-leaderboard .taskon-table__loading-overlay {
+  background-color: var(--taskon-color-bg-mask);
 }
 
 /* ============================================================================
@@ -303,29 +323,33 @@
    ============================================================================ */
 
 /* 奖励显示 - 参考 Figma 设计：16px SemiBold 白色 */
+
 .taskon-leaderboard-table__reward {
   display: inline-flex;
   align-items: center;
-  gap: var(--taskon-leaderboard-spacing-xs);
-  font-size: 16px;
+  gap: var(--taskon-spacing-sm);
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
-  line-height: 24px;
-  color: var(--taskon-leaderboard-text-lightest);
+  line-height: 1.5;
+  color: var(--taskon-color-text);
   white-space: nowrap;
   flex-wrap: nowrap;
 }
 
 /* 奖励类型标签（如 "积分名:"） */
+
 .taskon-leaderboard-table__reward-type {
-  color: var(--taskon-leaderboard-text-lightest);
+  color: var(--taskon-color-text);
 }
 
 /* 奖励值（高亮显示） */
+
 .taskon-leaderboard-table__reward-value {
-  color: var(--taskon-leaderboard-secondary);
+  color: var(--taskon-color-secondary);
 }
 
 /* 奖励图标 */
+
 .taskon-leaderboard-table__reward-icon {
   width: 18px;
   height: 18px;
@@ -333,62 +357,67 @@
 }
 
 /* 潜在奖励（尚未获得） */
+
 .taskon-leaderboard-table__reward--potential {
   opacity: 0.8;
 }
 
 /* 链信息 */
+
 .taskon-leaderboard-table__reward-chain {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 400;
-  color: var(--taskon-leaderboard-text-dark);
+  color: var(--taskon-color-text-disabled);
 }
 
 /* 未达标状态 - Not Qualified: rgba(255,255,255,0.6) */
+
 .taskon-leaderboard-table__reward--not-qualified {
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
-  line-height: 24px;
-  color: var(--taskon-leaderboard-text-light);
+  line-height: 1.5;
+  color: var(--taskon-color-text-tertiary);
 }
 
 /* 禁用提示文本 */
+
 .taskon-leaderboard-table__disabled-tip {
   width: 100%;
-  padding-top: var(--taskon-leaderboard-spacing-xs);
-  font-size: 14px;
+  padding-top: var(--taskon-spacing-sm);
+  font-size: var(--taskon-font-size);
   font-weight: 500;
-  line-height: 20px;
-  color: var(--taskon-leaderboard-text-lightest);
+  line-height: 1.43;
+  color: var(--taskon-color-text);
 }
 
 .taskon-leaderboard-table__disabled-link {
-  color: var(--taskon-leaderboard-primary);
+  color: var(--taskon-color-link);
   text-decoration: underline;
   cursor: pointer;
 }
 
 /* 操作按钮 */
+
 .taskon-leaderboard-table__action-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 34px;
-  padding: var(--taskon-leaderboard-spacing-xs) var(--taskon-leaderboard-spacing-l);
-  font-size: 14px;
+  padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
+  font-size: var(--taskon-font-size);
   font-weight: 500;
-  line-height: 20px;
-  color: var(--taskon-leaderboard-text-lightest);
+  line-height: 1.43;
+  color: var(--taskon-color-text);
   background-color: transparent;
-  border: 1px solid var(--taskon-leaderboard-text-darkest);
-  border-radius: var(--taskon-leaderboard-radius-m);
+  border: 1px solid var(--taskon-color-border);
+  border-radius: var(--taskon-border-radius);
   cursor: pointer;
   transition: all 0.2s ease;
 }
 
 .taskon-leaderboard-table__action-btn:hover:not(:disabled) {
-  background-color: var(--taskon-leaderboard-text-invisible);
-  border-color: var(--taskon-leaderboard-text-dark);
+  background-color: var(--taskon-color-bg-surface-subtle);
+  border-color: var(--taskon-color-text-disabled);
 }
 
 .taskon-leaderboard-table__action-btn:disabled {
@@ -407,13 +436,14 @@
   justify-content: center;
   min-width: 27px;
   height: 27px;
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 500;
   line-height: normal;
-  color: var(--taskon-leaderboard-text-lightest);
+  color: var(--taskon-color-text);
 }
 
 /* 六边形徽章样式 */
+
 .taskon-leaderboard-rank--badge {
   position: relative;
   width: 27px;
@@ -425,49 +455,57 @@
 }
 
 /* 六边形路径 - 通过 CSS 变量控制颜色 */
+
 .taskon-leaderboard-rank__hexagon-path {
   stroke-width: 1;
 }
 
 /* 金色徽章 - 第1名 */
+
 .taskon-leaderboard-rank--gold .taskon-leaderboard-rank__hexagon-path {
-  fill: var(--taskon-leaderboard-rank-gold);
-  stroke: var(--taskon-leaderboard-rank-gold-stroke);
+  /* Decorative medal colors are intentionally fixed. */
+  fill: #ffbf29;
+  stroke: #ffd465;
 }
 
 /* 银色徽章 - 第2名 */
+
 .taskon-leaderboard-rank--silver .taskon-leaderboard-rank__hexagon-path {
-  fill: var(--taskon-leaderboard-rank-silver);
-  stroke: var(--taskon-leaderboard-rank-silver-stroke);
+  fill: #c0c0c0;
+  stroke: #d8d8d8;
 }
 
 /* 铜色徽章 - 第3名 */
+
 .taskon-leaderboard-rank--bronze .taskon-leaderboard-rank__hexagon-path {
-  fill: var(--taskon-leaderboard-rank-bronze);
-  stroke: var(--taskon-leaderboard-rank-bronze-stroke);
+  fill: #cd7f32;
+  stroke: #e0a060;
 }
 
 /* 徽章上的数字 */
+
 .taskon-leaderboard-rank__number-overlay {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 600;
-  color: var(--taskon-leaderboard-text-lightest);
+  color: var(--taskon-color-text);
   text-align: center;
 }
 
 /* 未排名状态 */
+
 .taskon-leaderboard-rank--na,
 .taskon-leaderboard-rank--unranked {
-  color: var(--taskon-leaderboard-text-light);
+  color: var(--taskon-color-text-tertiary);
 }
 
 /* 普通数字排名 */
+
 .taskon-leaderboard-rank--number {
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 500;
 }
 
@@ -491,11 +529,12 @@
 }
 
 /* 用户名 - 16px SemiBold 白色 */
+
 .taskon-leaderboard-user__name {
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
-  line-height: 24px;
-  color: var(--taskon-leaderboard-text-lightest);
+  line-height: 1.5;
+  color: var(--taskon-color-text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -503,11 +542,12 @@
 }
 
 /* YOU 标签 - 16px SemiBold 绿色 (#1affab) */
+
 .taskon-leaderboard-user__you-badge {
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
   line-height: normal;
-  color: var(--taskon-leaderboard-secondary);
+  color: var(--taskon-color-secondary);
   text-transform: uppercase;
 }
 
@@ -519,12 +559,13 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--taskon-leaderboard-spacing-m);
-  padding: var(--taskon-leaderboard-spacing-l) var(--taskon-leaderboard-spacing-m);
+  gap: var(--taskon-spacing-md);
+  padding: var(--taskon-spacing-md) var(--taskon-spacing-md);
   border-top: none;
 }
 
 /* 分页按钮 - 圆形 30px */
+
 .taskon-leaderboard-pagination .taskon-pagination-btn {
   width: 30px;
   height: 30px;
@@ -535,14 +576,14 @@
   align-items: center;
   justify-content: center;
   background-color: transparent;
-  border: 1px solid var(--taskon-leaderboard-text-darkest);
-  color: var(--taskon-leaderboard-text-lightest);
+  border: 1px solid var(--taskon-color-border);
+  color: var(--taskon-color-text);
   transition: all 0.2s ease;
 }
 
 .taskon-leaderboard-pagination .taskon-pagination-btn:hover:not(:disabled) {
-  background-color: var(--taskon-leaderboard-text-invisible);
-  border-color: var(--taskon-leaderboard-text-dark);
+  background-color: var(--taskon-color-bg-surface-subtle);
+  border-color: var(--taskon-color-text-disabled);
 }
 
 .taskon-leaderboard-pagination .taskon-pagination-btn:disabled {
@@ -551,31 +592,36 @@
 }
 
 /* 分页图标 */
+
 .taskon-leaderboard-pagination .taskon-pagination-icon {
   width: 16px;
   height: 16px;
 }
 
 /* 页码信息 - 16px Regular，格式：1 / 5 */
+
 .taskon-leaderboard-pagination .taskon-pagination-info {
   display: flex;
   align-items: center;
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 400;
 }
 
 /* 当前页码 - 白色 */
+
 .taskon-leaderboard-pagination .taskon-pagination-info-current {
-  color: var(--taskon-leaderboard-text-lightest);
+  color: var(--taskon-color-text);
 }
 
 /* 分隔符和总页数 - 灰色 */
+
 .taskon-leaderboard-pagination .taskon-pagination-info-separator,
 .taskon-leaderboard-pagination .taskon-pagination-info-total {
-  color: var(--taskon-leaderboard-text-dark);
+  color: var(--taskon-color-text-disabled);
 }
 
 /* 隐藏范围文字 */
+
 .taskon-leaderboard-pagination .taskon-pagination-range {
   display: none;
 }
@@ -591,8 +637,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--taskon-leaderboard-spacing-l);
-  background-color: rgba(0, 0, 0, 0.5);
+  padding: var(--taskon-spacing-md);
+  background-color: var(--taskon-color-bg-mask);
 }
 
 .taskon-leaderboard-modal {
@@ -600,8 +646,8 @@
   width: 100%;
   max-width: 520px;
   max-height: 80vh;
-  background-color: var(--taskon-leaderboard-bg-body);
-  border-radius: var(--taskon-leaderboard-radius-xl);
+  background-color: var(--taskon-color-bg-canvas);
+  border-radius: var(--taskon-border-radius-lg);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -611,17 +657,18 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--taskon-leaderboard-spacing-m) var(--taskon-leaderboard-spacing-l);
-  border-bottom: 1px solid var(--taskon-leaderboard-text-darkest);
+  padding: var(--taskon-spacing-md) var(--taskon-spacing-md);
+  border-bottom: 1px solid var(--taskon-color-border);
 }
 
 /* 弹窗标题 - 24px SemiBold 白色 */
+
 .taskon-leaderboard-modal__title {
   margin: 0;
-  font-size: 24px;
+  font-size: var(--taskon-font-size-xxxl);
   font-weight: 600;
-  line-height: 32px;
-  color: var(--taskon-leaderboard-text-lightest);
+  line-height: 1.33;
+  color: var(--taskon-color-text);
 }
 
 .taskon-leaderboard-modal__close {
@@ -633,15 +680,15 @@
   padding: 0;
   background-color: transparent;
   border: none;
-  border-radius: var(--taskon-leaderboard-radius-m);
+  border-radius: var(--taskon-border-radius);
   cursor: pointer;
-  color: var(--taskon-leaderboard-text-dark);
+  color: var(--taskon-color-text-disabled);
   transition: all 0.2s ease;
 }
 
 .taskon-leaderboard-modal__close:hover {
-  background-color: var(--taskon-leaderboard-text-darkest);
-  color: var(--taskon-leaderboard-text-lightest);
+  background-color: var(--taskon-color-border);
+  color: var(--taskon-color-text);
 }
 
 .taskon-leaderboard-modal__close svg {
@@ -650,107 +697,119 @@
 }
 
 /* 弹窗内容容器 - gap 20px */
+
 .taskon-leaderboard-modal__content {
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-leaderboard-spacing-l);
-  padding: var(--taskon-leaderboard-spacing-l);
+  gap: var(--taskon-spacing-md);
+  padding: var(--taskon-spacing-md);
   overflow-y: auto;
 }
 
 /* 描述文本 - 16px Regular 暗色 */
+
 .taskon-leaderboard-modal__desc {
   margin: 0;
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 400;
-  line-height: 24px;
-  color: var(--taskon-leaderboard-text-dark);
+  line-height: 1.5;
+  color: var(--taskon-color-text-disabled);
 }
 
 /* 章节容器 - gap 8px */
+
 .taskon-leaderboard-modal__section {
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-leaderboard-spacing-xs);
+  gap: var(--taskon-spacing-sm);
 }
 
 /* 章节标题 - 16px Regular 稍亮暗色 */
+
 .taskon-leaderboard-modal__section-title {
   margin: 0;
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 400;
-  line-height: 24px;
-  color: var(--taskon-leaderboard-text-light);
+  line-height: 1.5;
+  color: var(--taskon-color-text-tertiary);
 }
 
 /* 时间范围 - 14px Medium 白色 */
+
 .taskon-leaderboard-modal__period {
   margin: 0;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
   line-height: normal;
-  color: var(--taskon-leaderboard-text-lightest);
+  color: var(--taskon-color-text);
   text-overflow: ellipsis;
   overflow: hidden;
 }
 
 /* 奖励层级列表 - 无背景无边框，紧凑列表 */
+
 .taskon-leaderboard-modal__tiers {
   display: flex;
   flex-direction: column;
-  gap: var(--taskon-leaderboard-spacing-xs);
+  gap: var(--taskon-spacing-sm);
 }
 
 /* 奖励层级行 - flex 布局，gap 20px */
+
 .taskon-leaderboard-modal__tier {
   display: flex;
   align-items: center;
-  gap: var(--taskon-leaderboard-spacing-l);
+  gap: var(--taskon-spacing-md);
   padding: 0;
   background-color: transparent;
   border-radius: 0;
 }
 
 /* 排名范围 - 14px Regular 白色 */
+
 .taskon-leaderboard-modal__tier-rank {
   flex-shrink: 0;
   min-width: 70px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 400;
-  line-height: 20px;
-  color: var(--taskon-leaderboard-text-lightest);
+  line-height: 1.43;
+  color: var(--taskon-color-text);
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
 }
 
 /* 奖励内容容器 */
+
 .taskon-leaderboard-modal__tier-reward {
   display: flex;
   align-items: center;
   gap: 10px;
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
-  line-height: 24px;
-  color: var(--taskon-leaderboard-text-lightest);
+  line-height: 1.5;
+  color: var(--taskon-color-text);
 }
 
 /* 分配方式文本 - 16px SemiBold 白色 */
+
 .taskon-leaderboard-modal__tier-distribute {
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
-  line-height: 24px;
-  color: var(--taskon-leaderboard-text-lightest);
+  line-height: 1.5;
+  color: var(--taskon-color-text);
 }
 
 /* Token 图标容器 */
+
 .taskon-leaderboard-modal__tier-token {
   display: flex;
   align-items: center;
-  gap: var(--taskon-leaderboard-spacing-xs);
+  gap: var(--taskon-spacing-sm);
 }
 
 /* Token 图标 */
+
 .taskon-leaderboard-modal__tier-token-icon {
   width: 26px;
   height: 24px;
@@ -758,21 +817,23 @@
 }
 
 /* 奖励金额 - 数字绿色，单位白色 */
+
 .taskon-leaderboard-modal__tier-amount {
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
-  line-height: 24px;
+  line-height: 1.5;
 }
 
 .taskon-leaderboard-modal__tier-amount-value {
-  color: var(--taskon-leaderboard-primary);
+  color: var(--taskon-color-primary);
 }
 
 .taskon-leaderboard-modal__tier-amount-symbol {
-  color: var(--taskon-leaderboard-text-lightest);
+  color: var(--taskon-color-text);
 }
 
 /* 隐藏旧的 tier-header 和 tier-count */
+
 .taskon-leaderboard-modal__tier-header {
   display: none;
 }
@@ -786,23 +847,167 @@
    ============================================================================ */
 
 @media (max-width: 640px) {
+  .taskon-leaderboard {
+    font-size: var(--taskon-font-size);
+  }
+
   .taskon-leaderboard-tabs {
+    flex-wrap: nowrap;
+    gap: var(--taskon-spacing-xs);
+    padding: var(--taskon-spacing-sm);
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
   }
 
   .taskon-leaderboard-tabs__tab {
+    flex-shrink: 0;
+    padding: var(--taskon-spacing-xs) var(--taskon-spacing-sm);
+    font-size: var(--taskon-font-size-sm);
+    line-height: 1.5;
     white-space: nowrap;
   }
 
+  .taskon-leaderboard-header {
+    gap: var(--taskon-spacing-sm);
+    padding: 0 var(--taskon-spacing-sm) var(--taskon-spacing-sm);
+  }
+
+  .taskon-leaderboard-header__info {
+    flex-wrap: wrap;
+    gap: var(--taskon-spacing-xs);
+  }
+
+  .taskon-leaderboard-header__time {
+    width: 100%;
+    font-size: var(--taskon-font-size-sm);
+    line-height: 1.5;
+  }
+
+  .taskon-leaderboard-header__separator,
+  .taskon-leaderboard-header__reward-separator {
+    display: none;
+  }
+
+  .taskon-leaderboard-header__participants {
+    font-size: var(--taskon-font-size-sm);
+    line-height: 1.5;
+  }
+
   .taskon-leaderboard-header__reward-info {
     flex-direction: column;
     align-items: flex-start;
+    gap: var(--taskon-spacing-xs);
+  }
+
+  .taskon-leaderboard-header__reward-item {
+    font-size: var(--taskon-font-size-sm);
+    line-height: 1.5;
   }
 
   .taskon-leaderboard-header__reward-rules-btn {
     margin-left: 0;
     width: 100%;
+    justify-content: center;
+  }
+
+  .taskon-leaderboard-table {
+    padding: 0 var(--taskon-spacing-sm);
+  }
+
+  .taskon-leaderboard .taskon-table__header,
+  .taskon-leaderboard .taskon-table__cell {
+    padding: var(--taskon-spacing-xs) var(--taskon-spacing-sm);
+    font-size: var(--taskon-font-size-sm);
+    line-height: 1.5;
+  }
+
+  .taskon-leaderboard .taskon-table__row {
+    height: 60px;
+  }
+
+  .taskon-leaderboard-user__name,
+  .taskon-leaderboard-user__you-badge,
+  .taskon-leaderboard-table__reward,
+  .taskon-leaderboard-table__reward--not-qualified {
+    font-size: var(--taskon-font-size-sm);
+    line-height: 1.5;
+  }
+
+  .taskon-leaderboard-table__reward {
+    white-space: normal;
+  }
+
+  .taskon-leaderboard-table__reward-chain {
+    font-size: var(--taskon-font-size-sm);
+    line-height: 1.33;
+  }
+
+  .taskon-leaderboard-pagination {
+    gap: var(--taskon-spacing-sm);
+    padding: var(--taskon-spacing-sm);
+  }
+
+  .taskon-leaderboard-pagination .taskon-pagination-btn {
+    width: 28px;
+    height: 28px;
+    min-width: 28px;
+  }
+
+  .taskon-leaderboard-pagination .taskon-pagination-info {
+    font-size: var(--taskon-font-size);
+  }
+
+  .taskon-leaderboard-modal {
+    max-height: 88vh;
+  }
+
+  .taskon-leaderboard-modal__content {
+    gap: var(--taskon-spacing-sm);
+    padding: var(--taskon-spacing-sm);
+  }
+
+  .taskon-leaderboard-modal__title {
+    font-size: 20px;
+    line-height: 1.4;
+  }
+
+  .taskon-leaderboard-modal__desc,
+  .taskon-leaderboard-modal__section-title,
+  .taskon-leaderboard-modal__tier-distribute,
+  .taskon-leaderboard-modal__tier-amount {
+    font-size: var(--taskon-font-size);
+    line-height: 1.43;
+  }
+
+  .taskon-leaderboard-modal__period {
+    font-size: var(--taskon-font-size-sm);
+    line-height: 1.5;
+  }
+
+  .taskon-leaderboard-modal__tier {
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: var(--taskon-spacing-xs);
+  }
+
+  .taskon-leaderboard-modal__tier-rank {
+    min-width: 0;
+    width: 100%;
+    font-size: var(--taskon-font-size-sm);
+    line-height: 1.5;
+  }
+
+  .taskon-leaderboard-modal__tier-reward {
+    width: 100%;
+    flex-wrap: wrap;
+    gap: var(--taskon-spacing-xs);
+    font-size: var(--taskon-font-size);
+    line-height: 1.43;
+  }
+
+  .taskon-leaderboard-modal__tier-token-icon {
+    width: 20px;
+    height: 20px;
   }
 
   .taskon-leaderboard-pagination {