@autional/ui 0.1.0-rc.47 → 0.1.0-rc.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autional/ui",
-  "version": "0.1.0-rc.47",
+  "version": "0.1.0-rc.48",
   "description": "Autional shared React component library (atoms + molecules) �?the canonical home of the component layer",
   "license": "AGPL-3.0",
   "main": "./src/index.ts",
@@ -82,7 +82,7 @@
     "react-i18next": "17.0.7",
     "typescript": "5.8.3",
     "vitest": "3.2.0",
-    "@autional/tokens": "0.1.0-rc.15"
+    "@autional/tokens": "0.1.0-rc.16"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",

package/src/molecules/AppShell.tsx

@@ -69,7 +69,7 @@ export const AppShell = React.memo(function AppShell({
 			{/* 移动端遮罩：点它关闭抽屉。桌面端不渲染（lg:hidden）。 */}
 			{mobileOpen && (
 				<div
-					className="fixed inset-0 z-40 bg-black/30 lg:hidden"
+					className="fixed inset-0 z-40 bg-scrim/30 lg:hidden"
 					onClick={onMobileClose}
 					aria-hidden="true"
 				/>

package/src/molecules/ConfirmDialog.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { AlertTriangle, X } from 'lucide-react';
 
 interface ConfirmDialogProps {
@@ -59,9 +60,11 @@ export const ConfirmDialog = React.memo(function ConfirmDialog({
 
 	const style = variantStyles[variant];
 
-	return (
+	// 与 Modal 同因同解（第 63 轮补·四）：portal 到 body，否则「有 backdrop-filter 的祖先」
+	// 会成为 fixed 后代的包含块，遮罩只覆盖那一小块。
+	const content = (
 		<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-			<div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={onCancel} />
+			<div className="absolute inset-0 bg-scrim/50 backdrop-blur-sm" onClick={onCancel} />
 			<div className="relative w-full max-w-md rounded-xl border border-[var(--color-border-subtle)] bg-[var(--color-bg-surface)] p-6 shadow-brand">
 				<button
 					onClick={onCancel}
@@ -98,4 +101,7 @@ export const ConfirmDialog = React.memo(function ConfirmDialog({
 			</div>
 		</div>
 	);
+
+	if (typeof document === 'undefined') return content;
+	return createPortal(content, document.body);
 });

package/src/molecules/Modal.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useId, useRef } from 'react';
+import { createPortal } from 'react-dom';
 import { X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { UI_I18N_NS, uiText } from '../i18n';
@@ -128,8 +129,14 @@ export const Modal = React.memo(function Modal({
 
 	if (!open) return null;
 
-	return (
-		<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
+	// ⚠ 必须 portal 到 document.body（第 63 轮补·四实测）：
+	// `position: fixed` 的包含块**不是视口**，而是最近的「有 transform / filter / backdrop-filter /
+	// will-change / contain」的祖先。站点的顶栏内层写了 `backdrop-blur-xl`，于是**在顶栏里打开的浮层**
+	// 的 inset-0 只覆盖顶栏那一小块 —— 实测 www.autional.cn 的搜索面板：遮罩是 976x135 的一条，
+	// 而不是整屏（用户的原话是「弹出一个黑色遮罩，怪怪的」）。
+	// 浮层属于顶层，不属于触发它的那棵子树；portal 是这条规则的结构性实现。
+	const content = (
+		<div className="fixed inset-0 z-50 flex items-center justify-center bg-scrim/50 p-4">
 			<div className="absolute inset-0" onClick={onClose} />
 			<div
 				ref={panelRef}
@@ -175,4 +182,8 @@ export const Modal = React.memo(function Modal({
 			</div>
 		</div>
 	);
+
+	// SSR / 测试环境没有 document 时退回就地渲染（portal 的目标不存在）
+	if (typeof document === 'undefined') return content;
+	return createPortal(content, document.body);
 });

package/src/molecules/Toast.tsx

@@ -8,6 +8,7 @@ import {
 	type ReactNode,
 } from 'react';
 import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from 'lucide-react';
+import { SOFT_BORDER, SOFT_TEXT } from '../internal/semantic-styles';
 
 export type ToastType = 'success' | 'error' | 'warning' | 'info';
 
@@ -42,11 +43,18 @@ const ICONS: Record<ToastType, typeof CheckCircle> = {
 	info: Info,
 };
 
+// 第 63 轮补·四：改用与 Alert / StatusBadge **同一份**语义配对（internal/semantic-styles.ts 的 SOFT_TEXT）。
+// 此前是「实底 + 白字」，实测对白字的对比度 ≈ success 2.6 / error 3.4 / warning 2.2 : 1 —— 三档都不达 AA 4.5:1，
+// 而 Toast 不在任何对比度目标页里，所以这条判据从未扫到它（「不是判据错了，是判据没扫到」）。
+// 换成 -soft / -text 配对后，对比度是设计系统建这一份配对时就验过的：
+// success 5.51 / warning 4.85 / danger 4.65 / info 6.70 —— 与 Alert 同一个来源，不再有第二套。
+// 底 + 字 + 边框三件都取自那一份配对（Alert / StatusBadge 同源）：软底若不带边框，
+// 贴在白卡上分不出边界 —— Alert 早就是这么做的，Toast 直接跟它对齐。
 const STYLES: Record<ToastType, string> = {
-	success: 'bg-success text-white',
-	error: 'bg-danger text-white',
-	warning: 'bg-warning text-white',
-	info: 'bg-[var(--color-brand)] text-white',
+	success: SOFT_TEXT.success + ' ' + SOFT_BORDER.success,
+	error: SOFT_TEXT.danger + ' ' + SOFT_BORDER.danger,
+	warning: SOFT_TEXT.warning + ' ' + SOFT_BORDER.warning,
+	info: SOFT_TEXT.info + ' ' + SOFT_BORDER.info,
 };
 
 export function ToastProvider({ children }: { children: ReactNode }) {
@@ -87,13 +95,13 @@ export function ToastProvider({ children }: { children: ReactNode }) {
 					return (
 						<div
 							key={toast.id}
-							className={`pointer-events-auto flex items-center gap-2 rounded-xl px-4 py-2.5 text-sm font-medium shadow-brand ${STYLES[toast.type]}`}
+							className={`pointer-events-auto flex items-center gap-2 rounded-xl border px-4 py-2.5 text-sm font-medium shadow-card ${STYLES[toast.type]}`}
 						>
 							<Icon className="h-4 w-4 shrink-0" />
 							<span className="flex-1">{toast.message}</span>
 							<button
 								onClick={() => removeToast(toast.id)}
-								className="ml-1 shrink-0 rounded-xs p-0.5 opacity-70 hover:bg-white/20 hover:opacity-100"
+								className="ml-1 shrink-0 rounded-xs p-0.5 opacity-70 hover:opacity-100"
 							>
 								<X className="h-3.5 w-3.5" />
 							</button>