مشاكل متغير SCSS $primary-medium

مطور
1

لديّ لون أساسي افتراضي: #4d238c. والمشكلة هي أن اللون المُولَّد لـ $primary-medium (#a179de) لا يتوافق مع إرشادات إمكانية الوصول، لذا أحتاج إلى جعله أكثر قتامة.

يبدو أن تغييره في جميع الأماكن التي يستخدم فيها النظام اللون المتوسط أمر شاق، بينما يمكنني ببساطة الكتابة فوق $primary-medium وتعيينه إلى أحمر، على سبيل المثال.

2

نعم، نفهم هذا تمامًا. حاليًا، لا توجد طريقة لتجاوز أي من المتغيرات الثانوية التي نولّدها تلقائيًا، لأن جميعها محددة بشكل نهائي عند بناء ملف CSS. لذا، على المدى القصير، ستحتاج إلى إجراء هذه التغييرات يدويًا.

بعض التوضيحات:

تُعد مخططات الألوان وسيلة بسيطة للغاية لتحديد الألوان، وأي شيء أكثر تفصيلاً من ذلك يتطلب CSS مخصصًا. تم مناقشة هذا الأمر بشكل أوسع هنا: Customizing colors - #2 by awesomerobot

بعض النقاط التي يجب علينا التفكير فيها:

لا أعتقد أن محرر متقدم لمخططات الألوان يسمح بتجاوز تلك المتغيرات الثانوية فكرة سيئة، لكن نظرًا لاستخدامها على نطاق واسع، فستحتاج على الأرجح إلى كتابة بعض CSS على أي حال.

على سبيل المثال… قد ترغب في تجاوز جميع حالات ظهور النص لـ $primary-medium… لكنها موجودة أيضًا في أماكن للحدود وعناصر أخرى حيث لا يكون التباين الأعلى لـ $primary-medium مرغوبًا فيه. لذا، في أحسن الأحوال، سيؤدي محرر الألوان المتقدم إلى تقليل كمية CSS المخصص المطلوبة، لكنه لن يلغيها بالكامل.

مع ذلك… المشكلة الأساسية هنا هي تباين النص لإمكانية الوصول، أليس كذلك؟ تفشل أنماطنا الافتراضية في بعض المناطق فيما يتعلق بتباين النص، ومن الممكن أن يؤدي تحسين ذلك إلى عدم وجود هذه المشكلة بالنسبة لك من الأساس…

لذا، أعتقد أنه في المستقبل القريب، يمكن لفريقنا النظر في إمكانية الوصول الافتراضي للنص، وفي وقت لاحق يمكننا العمل على تحسين أدوات مخططات الألوان لدينا لمراعاة إمكانية الوصول (https://cloudflare.design/color/ تجربة رائعة تأخذ في الاعتبار تباين النص، على سبيل المثال).

3

مرحبًا كريس،

شكرًا لك على الرد السريع.

نعم، فإن اهتمامنا الأساسي هو إمكانية الوصول، نظرًا لأننا نستخدم منتجكم في سياق حكومي.

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

ومع ذلك، فإن الموقع لا يفشل فقط في معايير التباين؛ فمثلاً، عناصر أخرى تفشل غالبًا هي: (عناصر القائمة <li> غير محصورة داخل عناصر أب <ul> أو <ol>).

لكن في الوقت الحالي، التباين هو الشيء الوحيد الذي يمكنني التحكم فيه، لذا فهو مقبول حتى يتم تطبيق الإصلاح.

5

لقد صادفنا هذا الموضوع بسبب مشكلة مماثلة، وقد حللناها باستخدام حل بديل بإضافة ما يلي إلى CSS العام للقالب:

:root {
  --primary-medium: #666666;
}