سیال (Liquid) — توکن‌ها و پیکربندی
سیال هویت مشترک TDS برای سطح‌هایی است که مثل قطرهٔ روغن شیشه‌ای روی صفحه می‌نشینند. همان حس آشنایی در آشنایی درون‌صفحه‌ای (قطرهٔ روغن از داکت لوگو) در Toast هم دیده می‌شود: بدنهٔ شیشه‌ای مات‌کم و نشستن نرم هنگام ورود.
این صفحه سه چیز را تعریف می‌کند: توکن‌های مشترک، روش پیکربندی در سه لایه، و قواعدی که باید هر مصرف‌کننده‌ای رعایت کند.
۱. اصل: بنیان ثابت، هویت متغیر
طبق کپی کد (بخش‌های ۲ و ۶):
- بنیان (Bones) ثابت است: ساختار DOM، کپی کد، کپی کد، ترتیب اسلات‌ها و ARIA در کامپوننت تعریف می‌شود و هیچ تمی آن را بازتعریف نمی‌کند.
- تم فقط زمان، منحنی و انیمیشن اسلات‌های مجاز را تغییر می‌دهد: کپی کد، کپی کد و توکن‌های کپی کد و کپی کد.
- ممنوع: تغییر اندازهٔ پایه، فاصلهٔ حرکت، ترتیب DOM، رنگ خام، گرادیان و کپی کد.
۲. توکن‌های مشترک
تعریف در کپی کد (لایهٔ ۱٫۵). TUK نمی‌تواند از کپی کد وارد شود، پس این مشترک‌ها در لایهٔ توکن هستند.
| توکن | پیش‌فرض | نقش |
|---|---|---|
| کپی کد | کپی کد | مدت حرکت ورود سیال |
| کپی کد | کپی کد | منحنی حرکت ورود سیال |
| کپی کد | کپی کد سطح + متن | رنگ پایهٔ شیشه: در تم روشن کمی تیره‌تر و در تم تاریک کمی روشن‌تر از سطح تا متن خوانا بماند؛ رنگ وضعیت با سهم کپی کد با آن مخلوط می‌شود |
| کپی کد | برق لبهٔ بالا | کپی کد درونی برای حس شیشه |
| کپی کد | سایهٔ نرم | سایهٔ بیرونی زیر قطره |
توکن کامپوننتی Toast: کپی کد (پیش‌فرض کپی کد، سهم تینت وضعیت روی بدنهٔ مات) در کپی کد.
تفکیک: کپی کد مخصوص آشنایی درون‌صفحه‌ای (پترن) است و با کپی کد جایگزین نمی‌شود.
۳. پیکربندی در سه لایه
ترتیب تأثیر (از اولویت بالاتر به پایین‌تر، طبق ARCH.md بخش ۷): ترجیح کاربر و کاهش حرکت ← prop صریح در کد ← تم ← پیش‌فرض توکن.
لایهٔ ۱: توکن (پیش‌فرض سراسری)
/* هر فایلی که توکن‌ها را بارگذاری می‌کند؛ مقدار سراسری */:root { --tds-liquid-duration: 320ms; --tds-liquid-ease: cubic-bezier(0.2, 0.8, 0.2, 1);}لایهٔ ۲: تم (هویت حرکتی)
هر تم در کپی کد منحنی و keyframe مخصوص خودش را دارد. برای سفارشی‌سازی یک تم محصولی، فقط زمان و منحنی را در کپی کد بازنویسی کنید:
/* آرام‌تر برای یک محصول با همان تم funding */[data-theme="funding"] { --tds-liquid-duration: var(--tds-dur-slow); --tds-liquid-ease: var(--tds-ease-soft);}| تم | حرکت | امضا |
|---|---|---|
| tokapps | glide | محو و کوچک‌شدن نرم |
| ideation | pulse | تپش کوتاه مثل ایده‌ای در حال شکل‌گیری |
| funding | tide | بالا و پایین مثل موج |
| product-hunt | orbit | کمی کج و صاف‌شدن در مدار |
| stories | breathe | بسیار آرام و محو با نفس |
| enterprise | steady | فقط محو کوتاه، بدون جابه‌جایی |
لایهٔ ۳: prop در کامپوننت
هشدارها (کپی کد) همیشه سیال‌اند و سیال قابل خاموش‌کردن نیست؛ محل نمایش‌شان از تنظیم داک می‌آید. برای ارسال:
import { toast } from '@tokapps/tuk/feedback';toast.success('ثبت شد', { description: 'ایدهٔ شما با موفقیت ارسال شد.' });۴. کاهش حرکت و ترجیح کاربر
- با کپی کد یا ترجیح سیستم‌عامل (کپی کد)، زمان‌ها ۱ms می‌شوند و انیمیشن سیال حذف می‌شود (کپی کد).
- این قاعده بر تنظیم تم و prop مقدم است: حتی اگر تم یا محصول انیمیشن بخواهد، کاربر کاهش حرکت آن را لغو نمی‌کند.
- در کنتراست بالا (کپی کد) شفافیت سیال حذف می‌شود تا کنتراست متن ثابت بماند.
- در چاپ انیمیشن و سایه حذف می‌شوند؛ پیام با آیکون و برچسب متنی منتقل می‌شود.
۵. قواعد (الزامی برای هر مصرف‌کننده)
- فقط از توکن‌های معنایی و کپی کد استفاده کنید؛ مقدار خام رنگ یا گرادیان در CSS سفارشی ممنوع است.
- حرکت فقط با کپی کد و کپی کد باشد؛ کپی کد و تغییر اندازهٔ پایه ممنوع است.
- سیال هیچ‌وقت تنها نشانهٔ وضعیت نیست؛ هر وضعیت آیکون و برچسب متنی دارد.
- سیال فقط ظاهر و حرکت است و هیچ رفتار یا معنای دسترس‌پذیری را تغییر نمی‌دهد.
۶. کجا استفاده شده است
| کامپوننت / پترن | وضعیت سیال | پیکربندی |
|---|---|---|
| Toast | همیشه روشن | — (محل نمایش از تنظیم داک) |
| آشنایی درون‌صفحه‌ای | قطرهٔ روغن کامل | کپی کد (توکن کپی کد) |
برای نمونه‌های زنده و پلی‌گراند کد، به صفحهٔ Toast بروید.