@autional/ui 0.1.0-rc.42 → 0.1.0-rc.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autional/ui",
-  "version": "0.1.0-rc.42",
+  "version": "0.1.0-rc.43",
   "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.10"
+    "@autional/tokens": "0.1.0-rc.11"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",

package/src/atoms/Toggle.tsx

@@ -34,7 +34,7 @@ export const Toggle = React.memo(function Toggle({
 			} ${s.track} ${className}`}
 		>
 			<span
-				className={`inline-block rounded-full bg-white shadow-sm transition-transform ${
+				className={`inline-block rounded-full bg-white shadow-soft transition-transform ${
 					checked ? s.translate : 'translate-x-0.5'
 				} ${s.circle}`}
 			/>

package/src/molecules/ConfirmDialog.tsx

@@ -62,7 +62,7 @@ export const ConfirmDialog = React.memo(function ConfirmDialog({
 	return (
 		<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="relative w-full max-w-md rounded-xl border border-[var(--color-border-subtle)] bg-[var(--color-bg-surface)] p-6 shadow-lg">
+			<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}
 					className="absolute right-4 top-4 text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"

package/src/molecules/ErrorBoundary.tsx

@@ -106,7 +106,7 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
 							{this.state.error?.message || T.unknown}
 						</p>
 						{this.state.error?.stack && (
-							<pre className="mt-4 max-h-60 max-w-2xl overflow-auto rounded bg-neutral-100 p-3 text-left text-xs text-neutral-600 dark:bg-neutral-800 dark:text-neutral-400">
+							<pre className="mt-4 max-h-60 max-w-2xl overflow-auto rounded-xs bg-neutral-100 p-3 text-left text-xs text-neutral-600 dark:bg-neutral-800 dark:text-neutral-400">
 								{this.state.error.stack}
 							</pre>
 						)}

package/src/molecules/Modal.tsx

@@ -138,7 +138,7 @@ export const Modal = React.memo(function Modal({
 				aria-labelledby={title ? titleId : undefined}
 				aria-describedby={title && description ? descriptionId : undefined}
 				tabIndex={-1}
-				className={`relative w-full ${maxWidthClasses[maxWidth]} rounded-xl border border-[var(--color-border-subtle)] bg-[var(--color-bg-surface)] shadow-lg outline-none ${className}`}
+				className={`relative w-full ${maxWidthClasses[maxWidth]} rounded-xl border border-[var(--color-border-subtle)] bg-[var(--color-bg-surface)] shadow-brand outline-none ${className}`}
 			>
 				{title && (
 					<div className="flex items-start justify-between gap-4 border-b border-[var(--color-border-subtle)] px-6 py-4">

package/src/molecules/PageContainer.tsx

@@ -26,7 +26,7 @@ export const PageContainer = React.memo(function PageContainer({
 			className={`flex min-h-screen items-center justify-center px-4 ${padding ? 'py-8' : ''} ${className}`}
 		>
 			<div
-				className={`w-full ${maxWidthClasses[maxWidth]} space-y-6 rounded-2xl bg-[var(--color-bg-surface)] p-8 shadow-lg`}
+				className={`w-full ${maxWidthClasses[maxWidth]} space-y-6 rounded-lg bg-[var(--color-bg-surface)] p-8 shadow-brand`}
 			>
 				{children}
 			</div>

package/src/molecules/PortalSwitcher.tsx

@@ -96,7 +96,7 @@ export function PortalSwitcher({
 				<div
 					{...menuProps}
 					ref={menuRef}
-					className={`absolute top-full z-50 mt-2 w-56 rounded-lg border border-[var(--color-border-subtle)] bg-[var(--color-bg-elevated)] py-1 shadow-lg ${
+					className={`absolute top-full z-50 mt-2 w-56 rounded-lg border border-[var(--color-border-subtle)] bg-[var(--color-bg-elevated)] py-1 shadow-brand ${
 						align === 'left' ? 'left-0' : 'right-0'
 					} ${menuClassName}`}
 				>

package/src/molecules/Result.tsx

@@ -65,7 +65,7 @@ export const Result = React.memo(function Result({
 	// 徽标：白底卡片上用同色浅底，整块浅底上退回白色面 —— 两种都保证徽标里的图标仍压在同色浅底上。
 	const badgeCls = tinted ? 'bg-[var(--color-bg-surface)]' : SOFT_TEXT[variant];
 	return (
-		<div className={`flex flex-col items-center rounded-lg border p-8 text-center shadow-sm ${surfaceCls} ${className}`}>
+		<div className={`flex flex-col items-center rounded-lg border p-8 text-center shadow-card ${surfaceCls} ${className}`}>
 			{glyph ? (
 				<span className={`flex h-16 w-16 items-center justify-center rounded-full ${badgeCls} ${tinted ? textTone(variant) : ''}`}>
 					{glyph}

package/src/molecules/SectionCard.tsx

@@ -34,7 +34,7 @@ export const SectionCard = React.memo(function SectionCard({
 }: SectionCardProps) {
 	return (
 		<div
-			className={`rounded-lg border border-[var(--color-border-subtle)] bg-[var(--color-bg-surface)] shadow-sm ${paddingMap[padding]} ${className}`}
+			className={`rounded-lg border border-[var(--color-border-subtle)] bg-[var(--color-bg-surface)] shadow-card ${paddingMap[padding]} ${className}`}
 		>
 			{title && (
 				<h2 className="mb-4 text-base font-semibold text-[var(--color-text-primary)]">{title}</h2>

package/src/molecules/Toast.tsx

@@ -87,13 +87,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-lg ${STYLES[toast.type]}`}
+							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]}`}
 						>
 							<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 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:bg-white/20 hover:opacity-100"
 							>
 								<X className="h-3.5 w-3.5" />
 							</button>

package/src/molecules/UserMenu.tsx

@@ -111,7 +111,7 @@ export function UserMenu({
 				<div
 					{...menuProps}
 					ref={menuRef}
-					className={`absolute top-full z-50 mt-2 w-56 rounded-lg border border-[var(--color-border-subtle)] bg-[var(--color-bg-elevated)] py-1 shadow-lg ${
+					className={`absolute top-full z-50 mt-2 w-56 rounded-lg border border-[var(--color-border-subtle)] bg-[var(--color-bg-elevated)] py-1 shadow-brand ${
 						align === 'left' ? 'left-0' : 'right-0'
 					} ${menuClassName}`}
 				>