فكرة صنع بواسطة عبقرينو
فكرة · إصدار ١٫٠ · مبنيّ على سلة Twilight

فكرة fi · kra

ثيم متجر سلة عربي بطبعه — وضع داكن ناضج، مكوّنات قابلة للتخصيص، وأداء يحترم الأساسيات.

استكشف المكوّنات
37
مكوّنات للصفحة الرئيسية
18
بلوكات مخصّصة (S_*)
2
وضع داكن وفاتح
AR · EN
دعم ثنائي اللغة
LIVE PREVIEW · واجهة فكرة معاينة واجهة ثيم فكرة على منصّة سلة
تمرير
المميزات الجوهرية

ثيم متجر أُهتمَّ بكل تفاصيله — من الوضع الداكن إلى آخر متغيّر CSS.

01

وضع داكن وفاتح ناضج

كل سطح، نص، حدّ وظلّ له قيمة مزدوجة بين html.light و html.dark — يُبدَّل بضغطة واحدة دون وميض.

SPEC master.twig · :184 → :288
02

عربيّ قبل كل شيء

الاتجاه الافتراضي RTL، وكل المسافات تستخدم الخصائص المنطقية (margin-inline, inset-inline) ليعمل التبديل لـ LTR فورًا.

SPEC dir="rtl" · lang="ar"
03

٣٧ مكوّنًا للصفحة الرئيسية

١٨ بلوكًا مخصّصًا بسابقة S_* (سلايدر شامل، شبكة عرض، أعلى الاختيارات، أسئلة شائعة…) إلى جانب ١٩ بلوكًا قياسيًا — كلها قابلة للتعديل من محرّر سلة.

SPEC src/views/components/home/
04

بطاقة منتج بثلاث تخطيطات

عمودي · أفقي · مبسّط. كل تخطيط فيه أكثر من ١٢ خاصيّة قابلة للتفعيل من اللوحة: عرض سريع، أمنيات، وسوم، نسبة خصم، عدّاد عرض، حالة المخزون…

SPEC window.product_card_features
05

قائمة ميجا للتنقّل

قائمة ضخمة متعدّدة المستويات مع دعم لصور التصنيفات، تستخدم mmenu-light على الموبايل وتُعدّل اتجاهها تلقائيًا.

SPEC twilight.json · features → mega-menu
06

حركات الكشف عند التمرير

قائم على IntersectionObserver مع تدرّج زمني يحسبه لكل عنصر داخل قسمه — هذه الصفحة نفسها تستخدم نسخة منه.

SPEC app.js · S_Animation()
07

سلّة جانبية ودرج منتج

السلّة الجانبية تنفتح فور إضافة منتج (إعداد قابل للتعطيل)، ودرج منتج منزلق لعرض سريع دون مغادرة الصفحة.

SPEC open_side_cart_on_add
08

تخصيص كامل عبر متغيّرات CSS

كل لون ومسافة ونصف قطر هو --var يقرأ قيمته من theme.settings.get(...) — التاجر يضبط، الثيم ينعكس فورًا.

SPEC master.twig · :162
بطاقة المنتج · تجربة مباشرة

ثلاث تخطيطات. عشرات الخيارات. شغّل ما تشاء أدناه — البطاقات تتفاعل لحظيًا.

FEATURES →
VERTICAL · عمودي
خصم آخر السنة -35%
متوفر في المخزن
عود فاخرإصدار محدود

عطر العود الملكي

تركيز فاخر · ٥٠ مل

290 ر.س 450 ر.س
ينتهي خلال ٠٢:١٥:٤٢
HORIZONTAL · أفقي
خصم آخر السنة -35%
متوفر في المخزن
عود فاخر

عطر العود الملكي

تركيز فاخر · ٥٠ مل

290 ر.س 450 ر.س
ينتهي خلال ٠٢:١٥:٤٢
MINIMAL · مبسّط
خصم آخر السنة -35%

عطر العود الملكي

290 ر.س 450 ر.س
المكوّنات · ١٨ بلوكًا مخصّصًا

كل ما يبني الصفحة الرئيسية — ترسمه فكرة وتعدّله من محرّر سلة.

نظام التصميم · ورقة المواصفات

ألوان، طباعة، وحاويات — كلها متغيّرات CSS قابلة للضبط من محرّر سلة.

· 01 PALETTE اللوحة اللونية

--brand LIGHT #674931 DARK #C29977
--ink LIGHT #1a1714 DARK #F0E9DE
--surface LIGHT #FAF7F2 DARK #14110E
--surface-2 LIGHT #F0E9DE DARK #1F1A15
--accent LIGHT #C29977 DARK #8B6142
--hairline LIGHT 12% INK DARK 10% INK

· 02 TYPE السلّم الطباعي

DISPLAY · REEM KUFI · 600 · clamp(2rem, 5vw, 3.5rem)

فكرة Twilight

TITLE · REEM KUFI · 600 · 1.85rem

ثيم متجر سلة عربي بطبعه

BODY · CAIRO · 400 · 1.05rem · line-height 1.7

يستخدم Cairo للمحتوى الطويل لأنه إنسانيّ، واضح، يدعم العربية والإنجليزية بنفس الجودة، ويبقى مريحًا للقراءة في الأحجام الصغيرة.

CAPTION · JETBRAINS MONO · 500 · 11px · 0.18em tracking

META · SPEC · BUILD V1.0

· 03 CONTAINERS عرض الحاويات

narrow
1400
base
1280
wide
1600
full
100%

· 04 TOKENS الرموز التصميمية

RADIUS · نصف القطر

--radius-sm 6 px
--radius-md 12 px
--radius-lg 20 px
pill 999 px

SPACING · المسافات

2xs8 px
xs12 px
sm16 px
md24 px
lg40 px
xl64 px

· 05 NOTE ملاحظة على الاتجاه

RTL FIRST · العربية أوّلًا

الاتجاه الافتراضي للثيم والموقع هو RTL. لا توجد قواعد direction مكرّرة، لأن جميع المسافات والمواضع تستخدم الخصائص المنطقية: margin-inline, inset-inline-start/end, padding-block.

جرّب التبديل لـ LTR من زرّ "EN" في أعلى الصفحة — كل شيء ينعكس فورًا، بما في ذلك السهام والأيقونات الاتجاهية.

التقنية تحت الغطاء

ثيم سلة، حُزَم Webpack مفصولة، طبقات ITCSS، ومكتبة مكوّنات سلة الرسمية.

· 01 ENGINE المحرّك

SALLA TWILIGHT · v2.14

محرّك سلة Twilight

منصّة الثيمات الرسمية لسلة: قوالب Twig، وقاعدة كائنات JavaScript عبر window.salla، وأحداث للتسوّق (سلة، عملة، لغة)، إضافةً إلى مكوّنات ويب جاهزة (salla-search, salla-login-modal...).

Twig ThemeWatcher salla.* i18n Web Components

· 02 PIPELINE خط الإنتاج

SOURCE
  • src/views/*.twig
  • src/assets/js/*.js
  • src/assets/styles/*.scss
  • src/assets/images/
WEBPACK · TRANSFORMS
  • babel · preset-env
  • postcss-import
  • tailwindcss + nesting
  • postcss-preset-env
  • terser · keep names
  • CssMinimizer
  • ThemeWatcher · live-reload
OUTPUT (public/)
  • app.css
  • 12 bundles ↓
  • fonts/sallaicons.css
  • images/ (copied)

· 03 BUNDLES ١٢ حُزمة

appPAGE
homePAGE
productPAGE
checkoutPAGE
pagesPAGE
orderPAGE
testimonialsPAGE
product-cardPARTIAL
main-menuPARTIAL
wishlist-cardPARTIAL
add-product-toastPARTIAL
digital-filesPARTIAL

· 04 ITCSS طبقات الأنماط

01settings المتغيّرات، الكسور النقطية، Tailwind و خطوط الواجهة
02generic إعادة الضبط، الميكسنات، الحركات، RTL/LTR، LazyLoad، Tooltip
03elements الأزرار، النماذج، أزرار الراديو والصور
04components الهيدر، الفوتر، السلايدر، البطاقة، أنماط الـ S_*
05utilities إصلاحات Safari، تخصيص الخطوط، SweetAlert، Chat Bots

· 05 DEPS الاعتماديات الرئيسية

@salla.sa/twilight^2.14.466

SDK سلة + ThemeWatcher للمعاينة المباشرة

@salla.sa/twilight-tailwind-theme^2.14.466

إعدادات Tailwind القياسية للمتجر

@salla.sa/twilight-components^2.14.466

مكوّنات ويب جاهزة (salla-search...)

tailwindcss^3.4.19

فئات الأدوات + ‎@apply داخل SCSS

webpack^5.107.1

١٢ مدخل، فصل صفحاتي، keep_classnames

mmenu-light^3.0.9

قائمة الموبايل المنزلقة

sweetalert2^11.26.17

إشعارات Toast وحوارات الـ Notifier

animejs^3.2.1

حركات دقيقة عند الحاجة

fslightbox^3.7.5

عرض الصور والمنتجات في Lightbox

تواصل · GET IN TOUCH

متجرك يستحقّ ثيمًا بـفكرة.

فكرة هو ثيم سلة كامل ومدفوع لمتجرك. للاطّلاع على دليل الاستخدام، أو لمناقشة التركيب والتخصيص، تواصل معنا على أيّ من القنوات أدناه.

دليل الاستخدام
قنوات عبقرينو · APQRINU CHANNELS

القناة الأقرب لك — اختر وتواصل.

تواصل واتساب معاينة الثيم