چکباکس گرد
وضعیت
هدفِ normative. وب ردیفهای وظیفه را با کنترلهای ad hoc نشانهگذاری میکند؛
پذیرش در وضعیت پذیرش طراحی. کلاس .ccheck prototype-only.
هدف
امضای بصری وظایف تقویمم: دایرهای و رنگپذیر — از رنگ تقویمِ والد رنگ میگیرد
(--c)، نه همیشه از برند. تکمیل وظیفه با یک کلیک، بدون دکمهٔ تأیید.
ساختار
<button class="ccheck" style="--c: var(--ev-4)"
role="checkbox" aria-checked="true"><svg…/></button>
دکمه است نه input — تا اندازه و رنگ کامل کنترل شود؛ نقش و حالت با ARIA.
گونهها و اندازهها
یک گونه: ۲۲px؛ تیک SVG درونخطی. رنگ پیشفرض برند؛ با --c رنگ تقویم والد.
حالتها
| حالت | ظاهر |
|---|---|
| default | دایرهٔ خطدار با رنگ --c |
| hover | پرشدن ملایم ۸٪ از --c |
| focus-visible | حلقهٔ ۲px برند بیرون دایره |
| active (checked) | پر --c + تیک سفید؛ تیک با مقیاس ۰٫۵→۱ میآید |
| disabled | کمرنگ؛ معمولاً برای وظیفهٔ انجامشدهٔ آرشیوی |
| loading | ندارد — toggle آنی است (نپذیرفتن) |
| error / success | خطا با متنِ ردیف اعلام میشود؛ «موفقیت» خودِ پرشدن است |
رفتار
- کلیک = toggle آنی
isCompleted؛ عنوان وظیفه خطمیخورد و کمرنگ میشود. - تغییر رنگ/وضعیت sync میشود (از مسیر همان
/api/sync)؛ در آفلاین فوری اعمال و در outbox صف میشود.
کیبورد و دسترسپذیری
role="checkbox"+aria-checked+Spaceبرای toggle.- نام دسترسپذیر از
aria-labelبا عنوان وظیفه («تكمیل: ارسال گزارش هفتگی»). - هدف لمسی: دایرهٔ ۲۲px خودش کوچکتر از ۴۴ است — hit area ردیف یا padding به حداقل ۴۴px گسترش مییابد.
رفتار واکنشگرا
در همهٔ کلاسها یکسان؛ در نمای وظایفِ compact همیشه در ابتدای ردیف (سمت start).
قواعد محتوا
- ✅ رنگ از تقویم والد؛ شعاع کامل؛ تیک فقط در حالت checked.
- ❌ چکباکس مربعی؛ رنگ ثابت برند وقتی والد رنگ دارد.
توکنها
--c (رنگ والد) · تیک #FFF/--on-brand · پرشدن هاور ۸٪ · انیمیشن مقیاس
--ease ۱۲۰ms.
پیادهسازی پلتفرمها
- وب: ردیف وظیفه با کنترل ad hoc — مرجع:
AgendaView.tsxو صفحهٔ وظایف (TasksPage)؛ ردیفهای فهرست تقویم همrole="checkbox"دارند. - اندروید:
component/CheckBox.kt. .ccheckفقط درui-design/prototypes/assets/app.css(prototype-only).