‏Astryx 0.6: تم‌هایی که خودشون رو با صفحه وفق می‌دن

تیم Astryx نسخه ۰.۶.۰ این دیزاین سیستم رو منتشر کرده و محور اصلی‌ش اینه که تم دیگه یه مشت مقدار ثابت نیست. تا قبل از این اگه می‌خواستی دکمه روی موبایل بزرگ‌تر بشه باید سراغ کد کامپوننت می‌رفتی؛ حالا خود تم می‌تونه توکن‌ها، استایل کامپوننت‌ها، تایپوگرافی، رنگ، شعاع گوشه و مدت انیمیشن رو بر اساس شرایط محیط عوض کنه.

شرط‌هایی که تم می‌تونه بهشون واکنش نشون بده چهارتان: عرض صفحه با اسم‌هایی که خود تم تعریفشون می‌کنه، دقت اشاره‌گر (coarse یعنی لمسی و fine یعنی ماوس)، ترجیح کنتراست، و ترجیح کم‌شدن انیمیشن. چند شرط رو هم می‌شه با هم ترکیب کرد، مثلاً صفحه‌ی کوچیک به‌علاوه‌ی لمسی، و اگه دو قانون همپوشانی داشتن، قانون بعدی اولویت داره.

defineTheme({
  name: 'acme',
  adaptations: {
    widthBreakpoints: {sm: 640, md: 768, lg: 1024},
    rules: [
      {when: {width: {below: 'md'}, pointer: 'coarse'},
       value: {tokens: {'--size-element-md': '44px'}}},
    ],
  },
});

نکته‌ی مهمش اینه که خروجی این قانون‌ها CSS خالصه، پس مرورگر بلافاصله اعمالش می‌کنه و لازم نیست منتظر یه دور چیدمان جاوااسکریپت بمونه. AppShell هم از همین نقشه‌ی عرض که مال تمه برای بریک‌پوینت‌های ناوبری موبایلش استفاده می‌کنه و دو مقدار xl و 2xl بهش اضافه شده.

به گفته‌ی تیم، واکنش‌گرا بودن فقط بحث فاصله‌ها نیست. Selector و MultiSelector حالا حالت adaptive دارن: روی صفحه‌ی کوچیک به شکل یه پنل که از پایین صفحه بالا میاد و ردیف‌های لمسی و درشت داره ظاهر می‌شن، ولی روی صفحه‌ی بزرگ همون popover چسبیده به عنصر می‌مونن، بدون اینکه گزینه‌ها و مقدار انتخاب‌شده فرق کنه. isReadOnly هم اومده تا مقدار انتخاب‌شده فوکوس‌پذیر و قابل ارسال با فرم بمونه ولی کنترل‌های ویرایش دیده نشن. کنارش شش قالب آماده‌ی جدید اضافه شده: پنج ویزارد و یک صفحه‌ی جزئیات آیتم کاری.

تم Neutral هم روی یه پالت OKLCH بازسازی شده که خودِ تم مالکشه و قابل بازتولیده، یعنی رنگ‌های معنایی و سینتکس و دسته‌بندی همه به استاپ‌های نام‌دار همون پالت ارجاع می‌دن. تغییرات دیداری‌ش عمدیه: فورگراند حالت روشن تیره‌تر شده، رمپ‌های رنگی حالت تیره لحن آروم‌تری دارن و بنرهای اطلاع‌رسانی آبی ملایم‌تری گرفتن.

برای مهاجرت ترتیب کار مهمه: اول پکیج‌ها رو روی 0.6.0 نصب کن و بعد دستور upgrade رو بزن، چون CLI نسخه‌ی هدفش رو از روی Core نصب‌شده درمیاره و اگه Core هنوز روی 0.5.x باشه می‌گه پروژه به‌روزه و کلاً مهاجرت‌های ۰.۶ رو رد می‌کنه. بزرگ‌ترین تغییر CSS هم اینه که پراپ‌ها و حالت‌های ظاهری به جای کلاس خالی با اتریبیوت‌های data-* منعکس می‌شن، پس سلکتورهای دستی و اونایی که توی جاوااسکریپت ذخیره شدن رو باید خودت چک کنی.

نکات کلیدی:

• قانون‌های واکنش‌گرای تم به عرض صفحه، دقت اشاره‌گر، کنتراست و reduced-motion واکنش نشون می‌دن و خروجی‌شون CSS خالصه
• وقتی چند قانون همپوشانی دارن، قانونی که بعدتر تعریف شده برنده‌ست
• AppShell دو بریک‌پوینت xl و 2xl گرفته و روی مرز دقیق بریک‌پوینت، چیدمان عریض رندر می‌شه نه موبایل
• Selector و MultiSelector با حالت adaptive بین پنل پایین‌صفحه و popover جابه‌جا می‌شن و isReadOnly هم اضافه شده
• شش قالب جدید اضافه شده: پنج ویزارد به‌علاوه‌ی صفحه‌ی Work Item Detail
• isImeKeyEvent حالا از @astryxdesign/core/utils میاد و تم‌های سفارشیِ از پیش بیلدشده باید با Core 0.6.0 دوباره بیلد و دیپلوی بشن