الألوان

نظام الألوان مبني على أخضر علم المملكة.

اللون الأساسي - الأخضر

الأخضر هو لون العلامة الأساسي.

25
50
100
200
300
400
500
600
700
800
900
950
Primary / 600
#1b8354
تمرير / 700
#166a45
ساطع / 500
#25935f
خلفية / 100
#dff6e7

اللون الثانوي - الذهبي

الذهبي لونٌ ثانوي يُستخدم بحذر.

25
50
100
200
300
400
500
600
700
800
900
950
Gold / 600
#dba102
Gold / 500
#f5bd02
خلفية / 200
#fcf3bd

الرماديات المحايدة

تدرّج رمادي محايد يحمل النصوص والحدود.

25
50
100
200
300
400
500
600
700
800
900
950
الاستخدام القيمة الرمز
عناوين#111927neutral-900
نص المتن#384250neutral-700
نص خافت#6c727eneutral-500
حدود#e5e7ebneutral-200
سطح ناعم#f9fafbneutral-50

اللوحات الخام الكاملة

تتضمن المكتبة كل درجات المصدر من 25 حتى 950.

الأساسي - أخضر العلم

25
50
100
200
300
400
500
600
700
800
900
950

الثانوي - ذهبي

25
50
100
200
300
400
500
600
700
800
900
950

المحايد

25
50
100
200
300
400
500
600
700
800
900
950

الخزامي

25
50
100
200
300
400
500
600
700
800
900
950

المعلومات - أزرق

25
50
100
200
300
400
500
600
700
800
900
950

النجاح - أخضر

25
50
100
200
300
400
500
600
700
800
900
950

التحذير - أصفر

25
50
100
200
300
400
500
600
700
800
900
950

الخطأ - أحمر

25
50
100
200
300
400
500
600
700
800
900
950

الرموز الدلالية والشفافية

RoleTextBackgroundBorder
Primary--pfc-text-primary--pfc-bg-primary--pfc-border-primary
Success--pfc-text-success--pfc-bg-success--pfc-border-success
Info--pfc-text-info--pfc-bg-info--pfc-border-info
Warning--pfc-text-warning--pfc-bg-warning--pfc-border-warning
Error--pfc-text-error--pfc-bg-error--pfc-border-error

تتوفر سلالم الشفافية الكاملة.

White alpha

0
10
20
30
40
50
60
70
80
90
100

Black alpha

0
10
20
30
40
50
60
70
80
90
100

Primary green alpha

10
20
30
40
50
60
70
80
90
100

الاستخدام في الكود

الألوان متاحة كمتغيّرات CSS.

نصّ بلون الأساسي فوق خلفية محايدة
CSS 
.my-element {
  color: var(--bs-primary);          /* #1b8354 */
  background: var(--bs-secondary);   /* #dba102 */
  border-color: var(--bs-gray-200);  /* #e5e7eb */
}
JSX 
// The same tokens work in React unchanged
import 'platformscode-core/css/icons.css';
import 'platformscode-core/css/main.css';

export function Badge() {
  return (
    <span style={{
      color: 'var(--bs-primary)',        /* #1b8354 */
      background: 'var(--bs-gray-100)',
    }}>Approved</span>
  );
}

// Or through the package components
import { DgaTag } from 'platformscode-new-react';
<DgaTag variant="success" label="Approved" />