عن المشروع

GlassKit هي مكتبة مكونات CSS نقية مبنية حول جمالية glassmorphism، والتي يصفها ملف README بأنها مستوحاة من لغة تصميم "Liquid Glass" في iOS 26 وvisionOS من Apple. وهي تستهدف التطبيقات والواجهات التي يجب أن تبدو أصلية وحديثة دون الحاجة إلى إطار عمل JavaScript أو خطوة بناء. محتويات المستودع: - glasskit.css: المكتبة الأساسية التي تحتوي على جميع المكونات ورموز التصميم. - glasskit.min.css: نسخة مصغرة يتم إنشاؤها عند الإصدار. - glasskit-styles.js: عبارة عن Constructable Stylesheet للاستخدام داخل Shadow DOM. - theme-override.css: قالب لسمات العلامات التجارية المخصصة يتضمن أربعة سمات نموذجية (Ocean Blue، Emerald Green، Rose، ومكان مخصص فارغ). - index.html و showcase.html و docs.html، بالإضافة إلى ترجمات ألمانية لهذه الصفحات في مجلد de/. - SKILL.md: مرجع مكونات مهيكل موجه لنماذج اللغات الكبيرة (LLMs) ومساعدي البرمجة. - المشروع مرخص بموجب رخصة MIT وتم تطويره بواسطة Jungherz GmbH. تتوفر نسخة تجريبية عامة وتوثيق وعرض أعمال على glasskit.jungherz.com. المكونات ولبنات البناء: يصنف ملف README المكونات إلى: الملاحة والتخطيط (خلفية بتدرج aurora، شريط ملاحة، زر أيقونة حبوب مستدير، شريط تبويب سفلي ثابت، نسخة شريط تبويب عائم على شكل حبوب مع كبسولة ملحقة اختيارية، أكورديون، فاصل)، والمحتوى (عنوان، بطاقة، نسخة بطاقة متوهجة، شارة، صورة رمزية، إشعار حالة، وقائمة مجمعة بأسلوب iOS)، والإجراءات والتغذية الراجعة (أزرار أساسية وثانوية وثالثية، نافذة منبثقة مع غطاء ضبابي، رسالة toast، نافذة popover مثبتة مع رسوم متحركة للتلاشي والتوسع)، وعناصر النماذج (حقل إدخال، منطقة نص، قائمة اختيار، حقل بحث، مفتاح تبديل بأسلوب iOS، مربع اختيار، زر اختيار، منزلق نطاق وشريط تقدم). في المجمل، يصف المشروع نفسه بأنه يقدم 24 مكوناً. بالإضافة إلى المكونات، توفر المكتبة فئات مساعدة ببادئة gl- منفصلة لتخطيط flex، والتباعد، ومحاذاة النص والحجم، إلى جانب فئات المكونات التي تبدأ بـ glass-. تتبع التسميات اتفاقية تشبه BEM بحيث لا تتعارض الفئات مع أوراق الأنماط الموجودة. السمات ورموز التصميم: يدعم النظام الوضعين الداكن والفاتح ويتم التبديل بينهما عن طريق تعيين سمة data-theme على عنصر html؛ كما يتوفر مكون جاهز لتبديل السمات. يتم عرض كل قيمة بصرية تقريباً كخاصية CSS مخصصة: ألوان أساسية ونصية، خمس تدرجات لأسطح الزجاج، ثلاثة مستويات من الضبابية، أنصاف أقطار للبطاقات والأزرار والمدخلات، مقياس تباعد، ورموز للظلال والداخل. يتم تخصيص العلامة التجارية عن طريق التصريح بـ --gl-color-primary ونسختها الداكنة؛ وبدءاً من الإصدار 1.11.0، يتم اشتقاق نقطة منتصف التدرج، وحلقة التركيز، وتوهج الزر، ومقبض النطاق من هذه القيم. يشير ملف README إلى ضرورة التصريح بمتغيرات العلامة التجارية على :root لأن الخصائص المخصصة يتم استبدالها حيث يتم التصريح بها. مكونات الويب وShadow DOM: بما أن أوراق الأنماط الخارجية لا تعبر حدود shadow، تصدر المكتبة وحدة ES توفر glassSheet، وهي CSSStyleSheet مشتركة يمكن تعيينها لـ adoptedStyleSheets، بالإضافة إلى تصدير سلسلة css كبديل. يوضح ملف README الاستخدام مع عنصر مخصص بسيط، ومع Hybrids.js وLit، ويشير إلى أن الخصائص المخصصة --gl-* وتبديل السمات لا يزالان يعملان عبر shadow roots. التثبيت والتوافق: يمكن تحميل GlassKit من jsDelivr أو unpkg عبر وسوم link، أو تثبيتها من npm كـ @jungherz-de/glasskit واستيرادها من CSS أو JavaScript، أو تحميلها مباشرة من إصدارات GitHub. يذكر ملف README أن حجمها 51 كيلوبايت خام، و39 كيلوبايت مصغرة، و6.5 كيلوبايت مضغوطة بـ gzip بدون تبعيات خارجية. يعتمد تأثير الزجاج على backdrop-filter؛ ويسرد ملف README دعماً كاملاً في Safari وChrome/Edge وSamsung Internet، ودعماً في Firefox بدءاً من الإصدار 103، مع ملاحظة أنه بدون backdrop-filter تظل الواجهة قابلة للاستخدام بألوان خلفية محددة بسيطة. تُقدم المكتبة كأساس CSS لعائلة مكونة من ثلاثة أجزاء: GlassKit Elements التي توفر عناصر مخصصة بلغة JavaScript الخام لواجهات التطبيقات، وGlassKit Web وهو قالب موقع Astro يحتوي على أقسام وi18n وSEO مبني على نفس لغة التصميم. ترحب المكتبة بالمساهمات التي تتبع تسميات BEM، ورموز التصميم الحالية، وتغطية الوضعين الداكن والفاتح، وأهداف لمس لا تقل عن 44 بكسل.