الاختلافات عن DGA
كل موضع يختلف فيه كود المنصات عن ملف DGA في Figma، مع القيمة الأصلية وما اعتمدناه والسبب.
الإصدار 0.2.0 ·
يتبع كود المنصات ملف أساسيات DGA في Figma. وعندما تكون قيمة ما خاطئة (خطأ إملائي أو إخفاق في التباين أو تعريف ناقص) نغيّرها وندوّن التغيير هنا. تُولَّد هذه الصفحة من القائمة نفسها التي يستخدمها بناء الرموز (scripts/tokens/fixes.ts)، لذلك لا يمكن أن يختلف الاثنان. الجدول أدناه مولَّد، فعناصره وأسبابه مكتوبة بالإنجليزية.
| الرمز / المكوّن | أصل DGA | ما اعتمدناه | السبب |
|---|---|---|---|
Naming --line-hight-* (21 primitives) | أصل DGA:line-hight | ما اعتمدناه:line-height | Typo: Hight → Height. |
Naming --colors-tertiary-lavendar-*, --charts-lavendar | أصل DGA:lavendar | ما اعتمدناه:lavender | Typo: Lavendar → Lavender. |
Naming --chip-background-on-color-diabled | أصل DGA:diabled | ما اعتمدناه:disabled | Typo: diabled → disabled. |
Naming --iable-container | أصل DGA:iable-container | ما اعتمدناه:label-container | Typo: Figma "Form/Iable-container" (capital I for l). Figma uses it as the gap between the label and the input container in Textarea and Dropdown input, so it is "Label-container". |
Naming --prefix-suffix-lable-icon | أصل DGA:lable | ما اعتمدناه:label | Typo: lable → label. |
Naming --dropdown-container-padding-left-right, --textarea-container-padding-left-right | أصل DGA:padding-left-right | ما اعتمدناه:padding-inline | RTL: left/right → logical inline, so the names stay correct in Arabic layouts. |
Naming --textarea-container-padding-top-bottom, --prefix-suffix-padding-top-bottom | أصل DGA:padding-top-bottom | ما اعتمدناه:padding-block | Matches the logical inline naming (top/bottom → block). |
Naming --input-container-padding-left, --prefix-suffix-padding-left | أصل DGA:padding-left | ما اعتمدناه:padding-start | RTL: left → logical start. |
Naming --input-container-padding-right, --prefix-suffix-padding-right | أصل DGA:padding-right | ما اعتمدناه:padding-end | RTL: right → logical end. |
Contrast --background-success (light) | أصل DGA:--colors-green-600 | ما اعتمدناه:--colors-green-700 | White text on green-600 is 3.91:1. Green-700 gives 5.69:1. |
Contrast --background-success (dark) | أصل DGA:--colors-green-600 | ما اعتمدناه:--colors-green-700 | White text on green-600 is 3.91:1. Green-700 gives 5.69:1. |
Contrast --background-warning (light) | أصل DGA:--colors-yellow-600 | ما اعتمدناه:--colors-yellow-700 | White text on yellow-600 is 3.49:1. Yellow-700 gives 5.43:1. |
Contrast --background-warning (dark) | أصل DGA:--colors-yellow-600 | ما اعتمدناه:--colors-yellow-700 | White text on yellow-600 is 3.49:1. Yellow-700 gives 5.43:1. |
Contrast --text-secondary (light) | أصل DGA:--colors-secondary-gold-600-primary | ما اعتمدناه:--colors-secondary-gold-800 | Gold-600 text on white is 2.30:1 and gold-700 is 3.58:1. Gold-800 gives 5.54:1 and stays recognisably gold. |
Contrast --text-tertiary (dark) | أصل DGA:--colors-tertiary-lavender-500-primary | ما اعتمدناه:--colors-tertiary-lavender-300 | Lavender-500 on dark surfaces is 2.49:1. Lavender-300 gives 7.30:1. |
Contrast --text-oncolor-secondary (dark) | أصل DGA:--alpha-white-80 | ما اعتمدناه:--colors-alpha-alpha-white-80 | In dark mode alpha-white-80 flips to 80% black, which is unreadable on fills. Uses literal white at 80%, the same as light mode. |
Contrast --text-oncolor-tertiary (dark) | أصل DGA:--alpha-white-70 | ما اعتمدناه:--colors-alpha-alpha-white-70 | In dark mode alpha-white-70 flips to 70% black, which is unreadable on fills. Uses literal white at 70%, the same as light mode. |
Contrast --icon-primary-400 (light) | أصل DGA:--colors-primary-sa-flag-400 | ما اعتمدناه:--colors-primary-sa-flag-800 | Sa-flag-400 icons on white are 2.26:1. Used for pressed/selected transparent-button icons, so it now matches link-primary-pressed (sa-flag-800). |
Contrast --icon-secondary (light) | أصل DGA:--colors-secondary-gold-600-primary | ما اعتمدناه:--colors-secondary-gold-700 | Gold-600 icons on white are 2.30:1. Gold-700 gives 3.58:1 (non-text needs 3:1). |
Contrast --text-tertiary-light (light) | أصل DGA:--colors-tertiary-lavender-300 | ما اعتمدناه:--colors-tertiary-lavender-200 | Lavender-300 on the nav-header green is 4.30:1. Lavender-200 gives 5.71:1. |
Contrast --link-primary-hovered (light) | أصل DGA:--colors-primary-sa-flag-400 | ما اعتمدناه:--colors-primary-sa-flag-700 | Sa-flag-400 on white is 2.16:1. Hover darkens to sa-flag-700 (6.60:1) instead of lightening. |
Contrast --link-icon-primary-hovered (light) | أصل DGA:--colors-primary-sa-flag-400 | ما اعتمدناه:--colors-primary-sa-flag-700 | Sa-flag-400 on white is 2.16:1. Hover darkens to sa-flag-700 (6.60:1) instead of lightening. |
Contrast --link-primary-pressed (light) | أصل DGA:--colors-primary-sa-flag-300 | ما اعتمدناه:--colors-primary-sa-flag-800 | Sa-flag-300 on white is 1.61:1. Pressed uses sa-flag-800 (8.56:1). |
Contrast --link-icon-primary-pressed (light) | أصل DGA:--colors-primary-sa-flag-300 | ما اعتمدناه:--colors-primary-sa-flag-800 | Sa-flag-300 on white is 1.61:1. Pressed uses sa-flag-800 (8.56:1). |
Contrast --link-neutral-pressed (light) | أصل DGA:--colors-neutral-400 | ما اعتمدناه:--colors-neutral-600 | Neutral-400 on white is 2.41:1. Neutral-600 gives 7.36:1. |
Contrast --link-icon-neutral-pressed (light) | أصل DGA:--colors-neutral-400 | ما اعتمدناه:--colors-neutral-600 | Neutral-400 on white is 2.41:1. Neutral-600 gives 7.36:1. |
Contrast --link-primary (dark) | أصل DGA:--colors-primary-sa-flag-600-primary | ما اعتمدناه:--colors-primary-sa-flag-400 | Sa-flag-600 on dark card is 3.06:1. Sa-flag-400 gives 6.43:1. |
Contrast --link-primary-focused (dark) | أصل DGA:--colors-primary-sa-flag-600-primary | ما اعتمدناه:--colors-primary-sa-flag-400 | Matches the dark default link (sa-flag-600 was 3.06:1). |
Contrast --link-icon-primary-focused (dark) | أصل DGA:--colors-primary-sa-flag-600-primary | ما اعتمدناه:--colors-primary-sa-flag-400 | Matches the dark default link (sa-flag-600 was 3.06:1). |
Contrast --link-primary-hovered (dark) | أصل DGA:--colors-primary-sa-flag-400 | ما اعتمدناه:--colors-primary-sa-flag-300 | Dark hover lightens one step from the new default. |
Contrast --link-icon-primary-hovered (dark) | أصل DGA:--colors-primary-sa-flag-400 | ما اعتمدناه:--colors-primary-sa-flag-300 | Dark hover lightens one step from the new default. |
Contrast --link-primary-pressed (dark) | أصل DGA:--colors-primary-sa-flag-300 | ما اعتمدناه:--colors-primary-sa-flag-200 | Dark pressed lightens two steps from the new default. |
Contrast --link-icon-primary-pressed (dark) | أصل DGA:--colors-primary-sa-flag-300 | ما اعتمدناه:--colors-primary-sa-flag-200 | Dark pressed lightens two steps from the new default. |
Contrast --link-primary-visited (dark) | أصل DGA:--colors-primary-sa-flag-800 | ما اعتمدناه:--colors-primary-sa-flag-200 | Sa-flag-800 on dark card is 1.70:1. |
Contrast --link-icon-primary-visited (dark) | أصل DGA:--colors-primary-sa-flag-800 | ما اعتمدناه:--colors-primary-sa-flag-200 | Sa-flag-800 on dark card is 1.70:1. |
Contrast --link-danger (dark) | أصل DGA:--colors-red-600 | ما اعتمدناه:--colors-red-400 | Red-600 on dark card is 3.01:1. Red-400 gives 5.22:1. |
Contrast --link-danger-focused (dark) | أصل DGA:--colors-red-600 | ما اعتمدناه:--colors-red-400 | Matches the dark default danger link. |
Contrast --link-icon-danger-focused (dark) | أصل DGA:--colors-red-600 | ما اعتمدناه:--colors-red-400 | Matches the dark default danger link. |
Contrast --link-danger-hovered (dark) | أصل DGA:--colors-red-700 | ما اعتمدناه:--colors-red-300 | Red-700 on dark card is 2.21:1. |
Contrast --link-icon-danger-hovered (dark) | أصل DGA:--colors-red-700 | ما اعتمدناه:--colors-red-300 | Red-700 on dark card is 2.21:1. |
Contrast --link-danger-pressed (dark) | أصل DGA:--colors-red-900 | ما اعتمدناه:--colors-red-200 | Red-900 on dark card is 1.48:1. |
Contrast --link-icon-danger-pressed (dark) | أصل DGA:--colors-red-900 | ما اعتمدناه:--colors-red-200 | Red-900 on dark card is 1.48:1. |
Contrast --link-danger-visited (dark) | أصل DGA:--colors-red-800 | ما اعتمدناه:--colors-red-300 | Red-800 on dark card is 1.68:1. |
Contrast --link-icon-danger-visited (dark) | أصل DGA:--colors-red-800 | ما اعتمدناه:--colors-red-300 | Red-800 on dark card is 1.68:1. |
Contrast --button-background-transparent-hovered (light) | أصل DGA:--alpha-white-20 | ما اعتمدناه:--colors-alpha-alpha-black-20 | White label on white-20 over the brand fill fails AA (down to 2.38:1). Black-20 darkens the fill instead (6.30:1 or better), as dark mode already does. |
Contrast --button-background-transparent-pressed (light) | أصل DGA:--alpha-white-40 | ما اعتمدناه:--colors-alpha-alpha-black-40 | White label on white-40 over the brand fill fails AA (down to 2.38:1). Black-40 darkens the fill instead (6.30:1 or better), as dark mode already does. |
Contrast --button-background-transparent-selected (light) | أصل DGA:--alpha-white-30 | ما اعتمدناه:--colors-alpha-alpha-black-30 | White label on white-30 over the brand fill fails AA (down to 2.38:1). Black-30 darkens the fill instead (6.30:1 or better), as dark mode already does. |
Contrast --button-label-transparent-hovered-on-color (light) | أصل DGA:--colors-primary-sa-flag-400 | ما اعتمدناه:--colors-base-white | Green-300/400 on the brand fill is 2.10–2.82:1. The label stays white and the state is shown with an underline instead. |
Contrast --button-label-transparent-hovered-on-color (dark) | أصل DGA:--colors-primary-sa-flag-400 | ما اعتمدناه:--colors-base-white | Green-300/400 on the brand fill is 2.10–2.82:1. The label stays white and the state is shown with an underline instead. |
Contrast --button-icon-transparent-hovered-on-color (light) | أصل DGA:--background-primary-400 | ما اعتمدناه:--colors-base-white | Green-300/400 on the brand fill is 2.10–2.82:1. The label stays white and the state is shown with an underline instead. |
Contrast --button-icon-transparent-hovered-on-color (dark) | أصل DGA:--colors-primary-sa-flag-400 | ما اعتمدناه:--colors-base-white | Green-300/400 on the brand fill is 2.10–2.82:1. The label stays white and the state is shown with an underline instead. |
Contrast --button-label-transparent-pressed-on-color (light) | أصل DGA:--colors-primary-sa-flag-300 | ما اعتمدناه:--colors-base-white | Green-300/400 on the brand fill is 2.10–2.82:1. The label stays white and the state is shown with an underline instead. |
Contrast --button-label-transparent-pressed-on-color (dark) | أصل DGA:--colors-primary-sa-flag-300 | ما اعتمدناه:--colors-base-white | Green-300/400 on the brand fill is 2.10–2.82:1. The label stays white and the state is shown with an underline instead. |
Contrast --button-icon-transparent-pressed-on-color (light) | أصل DGA:--colors-primary-sa-flag-300 | ما اعتمدناه:--colors-base-white | Green-300/400 on the brand fill is 2.10–2.82:1. The label stays white and the state is shown with an underline instead. |
Contrast --button-icon-transparent-pressed-on-color (dark) | أصل DGA:--colors-primary-sa-flag-300 | ما اعتمدناه:--colors-base-white | Green-300/400 on the brand fill is 2.10–2.82:1. The label stays white and the state is shown with an underline instead. |
Contrast --button-label-transparent-selected-on-color (light) | أصل DGA:--colors-primary-sa-flag-400 | ما اعتمدناه:--colors-base-white | Green-300/400 on the brand fill is 2.10–2.82:1. The label stays white and the state is shown with an underline instead. |
Contrast --button-label-transparent-selected-on-color (dark) | أصل DGA:--colors-primary-sa-flag-400 | ما اعتمدناه:--colors-base-white | Green-300/400 on the brand fill is 2.10–2.82:1. The label stays white and the state is shown with an underline instead. |
Contrast --button-icon-transparent-selected-on-color (light) | أصل DGA:--colors-primary-sa-flag-400 | ما اعتمدناه:--colors-base-white | Green-300/400 on the brand fill is 2.10–2.82:1. The label stays white and the state is shown with an underline instead. |
Contrast --button-icon-transparent-selected-on-color (dark) | أصل DGA:--colors-primary-sa-flag-400 | ما اعتمدناه:--colors-base-white | Green-300/400 on the brand fill is 2.10–2.82:1. The label stays white and the state is shown with an underline instead. |
Contrast --button-label-danger-primary-default-oncolor (light) | أصل DGA:--colors-red-200 | ما اعتمدناه:--colors-base-white | Red-200/300/400 on the green brand fill is 1.01–3.35:1 and relies on red/green colour difference. On brand fills, destructive outline, subtle and transparent buttons use white labels; the label text carries the meaning. |
Contrast --button-label-danger-primary-default-oncolor (dark) | أصل DGA:--colors-red-200 | ما اعتمدناه:--colors-base-white | Red-200/300/400 on the green brand fill is 1.01–3.35:1 and relies on red/green colour difference. On brand fills, destructive outline, subtle and transparent buttons use white labels; the label text carries the meaning. |
Contrast --button-label-danger-primary-hovered-oncolor (light) | أصل DGA:--colors-red-300 | ما اعتمدناه:--colors-base-white | Red-200/300/400 on the green brand fill is 1.01–3.35:1 and relies on red/green colour difference. On brand fills, destructive outline, subtle and transparent buttons use white labels; the label text carries the meaning. |
Contrast --button-label-danger-primary-hovered-oncolor (dark) | أصل DGA:--colors-red-300 | ما اعتمدناه:--colors-base-white | Red-200/300/400 on the green brand fill is 1.01–3.35:1 and relies on red/green colour difference. On brand fills, destructive outline, subtle and transparent buttons use white labels; the label text carries the meaning. |
Contrast --button-label-danger-primary-pressed-oncolor (light) | أصل DGA:--colors-red-400 | ما اعتمدناه:--colors-base-white | Red-200/300/400 on the green brand fill is 1.01–3.35:1 and relies on red/green colour difference. On brand fills, destructive outline, subtle and transparent buttons use white labels; the label text carries the meaning. |
Contrast --button-label-danger-primary-pressed-oncolor (dark) | أصل DGA:--colors-red-400 | ما اعتمدناه:--colors-base-white | Red-200/300/400 on the green brand fill is 1.01–3.35:1 and relies on red/green colour difference. On brand fills, destructive outline, subtle and transparent buttons use white labels; the label text carries the meaning. |
Contrast --button-background-danger-secondary-default (dark) | أصل DGA:--colors-red-50 | ما اعتمدناه:--alpha-error-10 | Figma keeps the light red-50 fill in dark mode, so dark-mode error text (red-400) is 1.96–2.56:1. A translucent red tint (10/20/30%) matches the dark tag and status tints and gives 4.57:1 or better. |
Contrast --button-background-danger-secondary-focused (dark) | أصل DGA:--colors-red-50 | ما اعتمدناه:--alpha-error-10 | Figma keeps the light red-50 fill in dark mode, so dark-mode error text (red-400) is 1.96–2.56:1. A translucent red tint (10/20/30%) matches the dark tag and status tints and gives 4.57:1 or better. |
Contrast --button-background-danger-secondary-selected (dark) | أصل DGA:--colors-red-50 | ما اعتمدناه:--alpha-error-10 | Figma keeps the light red-50 fill in dark mode, so dark-mode error text (red-400) is 1.96–2.56:1. A translucent red tint (10/20/30%) matches the dark tag and status tints and gives 4.57:1 or better. |
Contrast --button-background-danger-secondary-hovered (dark) | أصل DGA:--colors-red-100 | ما اعتمدناه:--alpha-error-20 | Figma keeps the light red-50 fill in dark mode, so dark-mode error text (red-400) is 1.96–2.56:1. A translucent red tint (10/20/30%) matches the dark tag and status tints and gives 4.57:1 or better. |
Contrast --button-background-danger-secondary-pressed (dark) | أصل DGA:--colors-red-200 | ما اعتمدناه:#b423184d | Figma keeps the light red-50 fill in dark mode, so dark-mode error text (red-400) is 1.96–2.56:1. A translucent red tint (10/20/30%) matches the dark tag and status tints and gives 4.57:1 or better. |
Contrast --link-oncolor-hovered (light) | أصل DGA:--colors-alpha-alpha-white-80 | ما اعتمدناه:--colors-base-white | Translucent white (60–90%) on the brand fill is 2.73–4.21:1. On-colour links stay white; hovered and pressed are shown by the underline. |
Contrast --link-oncolor-hovered (dark) | أصل DGA:--colors-alpha-alpha-white-80 | ما اعتمدناه:--colors-base-white | Translucent white (60–90%) on the brand fill is 2.73–4.21:1. On-colour links stay white; hovered and pressed are shown by the underline. |
Contrast --link-oncolor-pressed (light) | أصل DGA:--colors-alpha-alpha-white-60 | ما اعتمدناه:--colors-base-white | Translucent white (60–90%) on the brand fill is 2.73–4.21:1. On-colour links stay white; hovered and pressed are shown by the underline. |
Contrast --link-oncolor-pressed (dark) | أصل DGA:--colors-alpha-alpha-white-60 | ما اعتمدناه:--colors-base-white | Translucent white (60–90%) on the brand fill is 2.73–4.21:1. On-colour links stay white; hovered and pressed are shown by the underline. |
Contrast --link-oncolor-visited (light) | أصل DGA:--colors-alpha-alpha-white-90 | ما اعتمدناه:--colors-base-white | Translucent white (60–90%) on the brand fill is 2.73–4.21:1. On-colour links stay white; hovered and pressed are shown by the underline. |
Contrast --link-oncolor-visited (dark) | أصل DGA:--colors-alpha-alpha-white-90 | ما اعتمدناه:--colors-base-white | Translucent white (60–90%) on the brand fill is 2.73–4.21:1. On-colour links stay white; hovered and pressed are shown by the underline. |
Contrast --tag-background-on-color (light) | أصل DGA:--colors-alpha-alpha-white-20 | ما اعتمدناه:--colors-alpha-alpha-black-20 | White label on white-20 over the brand fill is 3.34:1. A black-20 tint keeps the tag visible and gives 6.30:1. |
Contrast --tag-background-on-color (dark) | أصل DGA:--colors-alpha-alpha-white-20 | ما اعتمدناه:--colors-alpha-alpha-black-20 | White label on white-20 over the brand fill is 3.34:1. A black-20 tint keeps the tag visible and gives 6.30:1. |
Contrast --text-on-gold (new) | أصل DGA:— | ما اعتمدناه:--colors-base-black | White on the gold fill (background-secondary, gold-600) is 2.30:1. Text on gold uses black (7.85:1), which keeps the brand gold fill. |
Contrast --button-border-neutral (new) | أصل DGA:— | ما اعتمدناه:--colors-alpha-alpha-white-0 (light), --colors-neutral-dark-700 (dark) | In dark mode the neutral and secondary button fills are 1.1–1.4:1 against the page, so their edge was not visible. A 1px border (neutral dark 700) shows it. Transparent in light mode, so nothing changes there. |
Contrast --button-label-transparent-hovered (new) | أصل DGA:— | ما اعتمدناه:--colors-primary-sa-flag-700 (light), --colors-primary-sa-flag-300 (dark) | Figma uses button-background-primary-hovered as the label colour. It is a fill token and stays dark in dark mode (1.34–2.84:1 on dark surfaces). This label token keeps the Figma value in light mode and uses green-300 in dark mode. |
Contrast --button-label-transparent-pressed (new) | أصل DGA:— | ما اعتمدناه:--colors-primary-sa-flag-900 (light), --colors-primary-sa-flag-200 (dark) | Figma uses button-background-primary-pressed as the label colour. It is a fill token and stays dark in dark mode (1.34–2.84:1 on dark surfaces). This label token keeps the Figma value in light mode and uses green-200 in dark mode. |
Contrast --button-label-transparent-selected (new) | أصل DGA:— | ما اعتمدناه:--colors-primary-sa-flag-800 (light), --colors-primary-sa-flag-300 (dark) | Figma uses button-background-primary-selected as the label colour. It is a fill token and stays dark in dark mode (1.34–2.84:1 on dark surfaces). This label token keeps the Figma value in light mode and uses green-300 in dark mode. |
Contrast --button-label-danger-default (new) | أصل DGA:— | ما اعتمدناه:--colors-red-600 (light), --colors-red-400 (dark) | Destructive transparent label (default). Figma only defines the default state and colours it with the danger fill token, which stays red-600 in dark mode (3.01:1 on dark card). States follow the primary transparent pattern; dark mode uses red-400. |
Contrast --button-label-danger-hovered (new) | أصل DGA:— | ما اعتمدناه:--colors-red-700 (light), --colors-red-300 (dark) | Destructive transparent label (hovered). Figma only defines the default state and colours it with the danger fill token, which stays red-600 in dark mode (3.01:1 on dark card). States follow the primary transparent pattern; dark mode uses red-300. |
Contrast --button-label-danger-pressed (new) | أصل DGA:— | ما اعتمدناه:--colors-red-900 (light), --colors-red-200 (dark) | Destructive transparent label (pressed). Figma only defines the default state and colours it with the danger fill token, which stays red-600 in dark mode (3.01:1 on dark card). States follow the primary transparent pattern; dark mode uses red-200. |
Contrast --button-label-danger-selected (new) | أصل DGA:— | ما اعتمدناه:--colors-red-800 (light), --colors-red-300 (dark) | Destructive transparent label (selected). Figma only defines the default state and colours it with the danger fill token, which stays red-600 in dark mode (3.01:1 on dark card). States follow the primary transparent pattern; dark mode uses red-300. |
Contrast --button-background-danger-secondary-oncolor-default (new) | أصل DGA:— | ما اعتمدناه:--colors-red-50 | On brand fills the dark-mode translucent tint lets the green show through (1.91:1). On-colour destructive secondary buttons keep Figma's opaque red-50/100/200 fill in both modes. |
Contrast --button-background-danger-secondary-oncolor-hovered (new) | أصل DGA:— | ما اعتمدناه:--colors-red-100 | On brand fills the dark-mode translucent tint lets the green show through (1.91:1). On-colour destructive secondary buttons keep Figma's opaque red-50/100/200 fill in both modes. |
Contrast --button-background-danger-secondary-oncolor-pressed (new) | أصل DGA:— | ما اعتمدناه:--colors-red-200 | On brand fills the dark-mode translucent tint lets the green show through (1.91:1). On-colour destructive secondary buttons keep Figma's opaque red-50/100/200 fill in both modes. |
Contrast --button-background-danger-secondary-oncolor-selected (new) | أصل DGA:— | ما اعتمدناه:--colors-red-50 | On brand fills the dark-mode translucent tint lets the green show through (1.91:1). On-colour destructive secondary buttons keep Figma's opaque red-50/100/200 fill in both modes. |
Contrast --button-background-danger-secondary-oncolor-focused (new) | أصل DGA:— | ما اعتمدناه:--colors-red-50 | On brand fills the dark-mode translucent tint lets the green show through (1.91:1). On-colour destructive secondary buttons keep Figma's opaque red-50/100/200 fill in both modes. |
Contrast --button-label-danger-secondary-oncolor (new) | أصل DGA:— | ما اعتمدناه:--colors-red-700 | Label for the opaque on-colour destructive secondary fill. text-error flips to red-400 in dark mode, which is 2.56:1 on red-50; red-700 is used in both modes. |
Tokens --badge-neutral-background (new) | أصل DGA:Added from site CSS (.badge) | ما اعتمدناه:--colors-neutral-50 (light), --colors-neutral-800 (dark) | Badge neutral fill: neutral-50 as on the site; neutral-800 in dark mode. |
Tokens --badge-neutral-border (new) | أصل DGA:Added from site CSS (.badge) | ما اعتمدناه:--colors-neutral-200 (light), --colors-neutral-700 (dark) | Badge neutral border: neutral-200 as on the site; neutral-700 in dark mode. |
Tokens --badge-neutral-text (new) | أصل DGA:Added from site CSS (.badge) | ما اعتمدناه:--colors-neutral-700 (light), --colors-neutral-200 (dark) | Badge neutral label and icon: neutral-700 as on the site; neutral-200 in dark mode. |
Tokens --badge-neutral-border-outlined (new) | أصل DGA:Added from site CSS (.badge) | ما اعتمدناه:--colors-neutral-500 (light), --colors-neutral-400 (dark) | Badge neutral outlined border: neutral-500 as on the site; neutral-400 in dark mode. |
Tokens --badge-success-background (new) | أصل DGA:Added from site CSS (.badge) | ما اعتمدناه:--colors-primary-sa-flag-50 (light), --colors-primary-sa-flag-950 (dark) | Badge success fill: primary-sa-flag-50 as on the site; primary-sa-flag-950 in dark mode. |
Tokens --badge-success-border (new) | أصل DGA:Added from site CSS (.badge) | ما اعتمدناه:--colors-primary-sa-flag-200 (light), --colors-primary-sa-flag-800 (dark) | Badge success border: primary-sa-flag-200 as on the site; primary-sa-flag-800 in dark mode. |
Tokens --badge-success-text (new) | أصل DGA:Added from site CSS (.badge) | ما اعتمدناه:--colors-primary-sa-flag-700 (light), --colors-primary-sa-flag-200 (dark) | Badge success label and icon: primary-sa-flag-700 as on the site; primary-sa-flag-200 in dark mode. |
Tokens --badge-success-border-outlined (new) | أصل DGA:Added from site CSS (.badge) | ما اعتمدناه:--colors-primary-sa-flag-500 (light), --colors-primary-sa-flag-400 (dark) | Badge success outlined border: primary-sa-flag-500 as on the site; primary-sa-flag-400 in dark mode. |
Tokens --badge-error-background (new) | أصل DGA:Added from site CSS (.badge) | ما اعتمدناه:--colors-red-50 (light), --colors-red-950 (dark) | Badge error fill: red-50 as on the site; red-950 in dark mode. |
Tokens --badge-error-border (new) | أصل DGA:Added from site CSS (.badge) | ما اعتمدناه:--colors-red-200 (light), --colors-red-800 (dark) | Badge error border: red-200 as on the site; red-800 in dark mode. |
Tokens --badge-error-text (new) | أصل DGA:Added from site CSS (.badge) | ما اعتمدناه:--colors-red-700 (light), --colors-red-200 (dark) | Badge error label and icon: red-700 as on the site; red-200 in dark mode. |
Tokens --badge-error-border-outlined (new) | أصل DGA:Added from site CSS (.badge) | ما اعتمدناه:--colors-red-500 (light), --colors-red-400 (dark) | Badge error outlined border: red-500 as on the site; red-400 in dark mode. |
Tokens --badge-warning-background (new) | أصل DGA:Added from site CSS (.badge) | ما اعتمدناه:--colors-yellow-50 (light), --colors-yellow-950 (dark) | Badge warning fill: yellow-50 as on the site; yellow-950 in dark mode. |
Tokens --badge-warning-border (new) | أصل DGA:Added from site CSS (.badge) | ما اعتمدناه:--colors-yellow-200 (light), --colors-yellow-800 (dark) | Badge warning border: yellow-200 as on the site; yellow-800 in dark mode. |
Tokens --badge-warning-text (new) | أصل DGA:Added from site CSS (.badge) | ما اعتمدناه:--colors-yellow-700 (light), --colors-yellow-200 (dark) | Badge warning label and icon: yellow-700 as on the site; yellow-200 in dark mode. |
Tokens --badge-warning-border-outlined (new) | أصل DGA:Added from site CSS (.badge) | ما اعتمدناه:--colors-yellow-500 (light), --colors-yellow-400 (dark) | Badge warning outlined border: yellow-500 as on the site; yellow-400 in dark mode. |
Tokens --badge-info-background (new) | أصل DGA:Added from site CSS (.badge) | ما اعتمدناه:--colors-blue-50 (light), --colors-blue-950 (dark) | Badge info fill: blue-50 as on the site; blue-950 in dark mode. |
Tokens --badge-info-border (new) | أصل DGA:Added from site CSS (.badge) | ما اعتمدناه:--colors-blue-200 (light), --colors-blue-800 (dark) | Badge info border: blue-200 as on the site; blue-800 in dark mode. |
Tokens --badge-info-text (new) | أصل DGA:Added from site CSS (.badge) | ما اعتمدناه:--colors-blue-700 (light), --colors-blue-200 (dark) | Badge info label and icon: blue-700 as on the site; blue-200 in dark mode. |
Tokens --badge-info-border-outlined (new) | أصل DGA:Added from site CSS (.badge) | ما اعتمدناه:--colors-blue-500 (light), --colors-blue-400 (dark) | Badge info outlined border: blue-500 as on the site; blue-400 in dark mode. |
Tokens --badge-purple-background (new) | أصل DGA:Added from site CSS (.badge) | ما اعتمدناه:--colors-tertiary-lavender-50 (light), --colors-tertiary-lavender-950 (dark) | Badge purple fill: tertiary-lavender-50 as on the site; tertiary-lavender-950 in dark mode. |
Tokens --badge-purple-border (new) | أصل DGA:Added from site CSS (.badge) | ما اعتمدناه:--colors-tertiary-lavender-200 (light), --colors-tertiary-lavender-800 (dark) | Badge purple border: tertiary-lavender-200 as on the site; tertiary-lavender-800 in dark mode. |
Tokens --badge-purple-text (new) | أصل DGA:Added from site CSS (.badge) | ما اعتمدناه:--colors-tertiary-lavender-700 (light), --colors-tertiary-lavender-200 (dark) | Badge purple label and icon: tertiary-lavender-700 as on the site; tertiary-lavender-200 in dark mode. |
Tokens --badge-purple-border-outlined (new) | أصل DGA:Added from site CSS (.badge) | ما اعتمدناه:--colors-tertiary-lavender-500-primary (light), --colors-tertiary-lavender-400 (dark) | Badge purple outlined border: tertiary-lavender-500 as on the site; tertiary-lavender-400 in dark mode. |
Tokens --badge-orange-background (new) | أصل DGA:Added from site CSS (.badge) | ما اعتمدناه:--colors-orange-50 (light), --colors-orange-950 (dark) | Badge orange fill: orange-50 as on the site; orange-950 in dark mode. |
Tokens --badge-orange-border (new) | أصل DGA:Added from site CSS (.badge) | ما اعتمدناه:--colors-orange-200 (light), --colors-orange-800 (dark) | Badge orange border: orange-200 as on the site; orange-800 in dark mode. |
Tokens --badge-orange-text (new) | أصل DGA:Added from site CSS (.badge) | ما اعتمدناه:--colors-orange-700 (light), --colors-orange-200 (dark) | Badge orange label and icon: orange-700 as on the site; orange-200 in dark mode. |
Tokens --badge-orange-border-outlined (new) | أصل DGA:Added from site CSS (.badge) | ما اعتمدناه:--colors-orange-500 (light), --colors-orange-400 (dark) | Badge orange outlined border: orange-500 as on the site; orange-400 in dark mode. |
Tokens --badge-on-color-background (new) | أصل DGA:Added from site CSS (.badge--on-color: white 30%) | ما اعتمدناه:--colors-alpha-alpha-black-20 | White text on white-30 over the brand fill is 3.13:1. A black-20 tint keeps the badge visible and gives 6.30:1. |
Tokens --badge-on-color-border-outlined (new) | أصل DGA:Added from site CSS (.badge) | ما اعتمدناه:--colors-alpha-alpha-white-90 | On-colour outlined border, white 90% as on the site. |
Tokens --featured-icon-brand-background (new) | أصل DGA:Added from site CSS (.featured-icon) | ما اعتمدناه:--colors-primary-sa-flag-600-primary | Featured icon brand hard fill (white icon): primary-sa-flag-600. |
Tokens --featured-icon-brand-background-light (new) | أصل DGA:Added from site CSS (.featured-icon) | ما اعتمدناه:--colors-primary-sa-flag-50 (light), --colors-primary-sa-flag-950 (dark) | Featured icon brand light fill: primary-sa-flag-50, primary-sa-flag-950 in dark mode. |
Tokens --featured-icon-brand-icon (new) | أصل DGA:Added from site CSS (.featured-icon) | ما اعتمدناه:--colors-primary-sa-flag-600-primary (light), --colors-primary-sa-flag-300 (dark) | Featured icon brand icon on the light fill and outlined: primary-sa-flag-600, primary-sa-flag-300 in dark mode. |
Tokens --featured-icon-brand-border (new) | أصل DGA:Added from site CSS (.featured-icon) | ما اعتمدناه:--colors-primary-sa-flag-200 (light), --colors-primary-sa-flag-800 (dark) | Featured icon brand outlined border: primary-sa-flag-200, primary-sa-flag-800 in dark mode. |
Tokens --featured-icon-neutral-background (new) | أصل DGA:Added from site CSS (.featured-icon) | ما اعتمدناه:--colors-neutral-500 | Featured icon neutral hard fill (white icon): neutral-500. |
Tokens --featured-icon-neutral-background-light (new) | أصل DGA:Added from site CSS (.featured-icon) | ما اعتمدناه:--colors-neutral-100 (light), --colors-neutral-800 (dark) | Featured icon neutral light fill: neutral-100, neutral-800 in dark mode. |
Tokens --featured-icon-neutral-icon (new) | أصل DGA:Added from site CSS (.featured-icon) | ما اعتمدناه:--colors-neutral-500 (light), --colors-neutral-300 (dark) | Featured icon neutral icon on the light fill and outlined: neutral-500, neutral-300 in dark mode. |
Tokens --featured-icon-neutral-border (new) | أصل DGA:Added from site CSS (.featured-icon) | ما اعتمدناه:--colors-neutral-200 (light), --colors-neutral-700 (dark) | Featured icon neutral outlined border: neutral-200, neutral-700 in dark mode. |
Tokens --featured-icon-success-background (new) | أصل DGA:Added from site CSS (.featured-icon) | ما اعتمدناه:--colors-green-700 | Featured icon success hard fill (white icon): green-700. |
Tokens --featured-icon-success-background-light (new) | أصل DGA:Added from site CSS (.featured-icon) | ما اعتمدناه:--colors-green-50 (light), --colors-green-950 (dark) | Featured icon success light fill: green-50, green-950 in dark mode. |
Tokens --featured-icon-success-icon (new) | أصل DGA:Added from site CSS (.featured-icon) | ما اعتمدناه:--colors-green-700 (light), --colors-green-300 (dark) | Featured icon success icon on the light fill and outlined: green-700, green-300 in dark mode. |
Tokens --featured-icon-success-border (new) | أصل DGA:Added from site CSS (.featured-icon) | ما اعتمدناه:--colors-green-200 (light), --colors-green-800 (dark) | Featured icon success outlined border: green-200, green-800 in dark mode. |
Tokens --featured-icon-error-background (new) | أصل DGA:Added from site CSS (.featured-icon) | ما اعتمدناه:--colors-red-600 | Featured icon error hard fill (white icon): red-600. |
Tokens --featured-icon-error-background-light (new) | أصل DGA:Added from site CSS (.featured-icon) | ما اعتمدناه:--colors-red-50 (light), --colors-red-950 (dark) | Featured icon error light fill: red-50, red-950 in dark mode. |
Tokens --featured-icon-error-icon (new) | أصل DGA:Added from site CSS (.featured-icon) | ما اعتمدناه:--colors-red-600 (light), --colors-red-300 (dark) | Featured icon error icon on the light fill and outlined: red-600, red-300 in dark mode. |
Tokens --featured-icon-error-border (new) | أصل DGA:Added from site CSS (.featured-icon) | ما اعتمدناه:--colors-red-200 (light), --colors-red-800 (dark) | Featured icon error outlined border: red-200, red-800 in dark mode. |
Tokens --featured-icon-warning-background (new) | أصل DGA:Added from site CSS (.featured-icon) | ما اعتمدناه:--colors-yellow-700 | Featured icon warning hard fill (white icon): yellow-700. |
Tokens --featured-icon-warning-background-light (new) | أصل DGA:Added from site CSS (.featured-icon) | ما اعتمدناه:--colors-yellow-50 (light), --colors-yellow-950 (dark) | Featured icon warning light fill: yellow-50, yellow-950 in dark mode. |
Tokens --featured-icon-warning-icon (new) | أصل DGA:Added from site CSS (.featured-icon) | ما اعتمدناه:--colors-yellow-700 (light), --colors-yellow-300 (dark) | Featured icon warning icon on the light fill and outlined: yellow-700, yellow-300 in dark mode. |
Tokens --featured-icon-warning-border (new) | أصل DGA:Added from site CSS (.featured-icon) | ما اعتمدناه:--colors-yellow-200 (light), --colors-yellow-800 (dark) | Featured icon warning outlined border: yellow-200, yellow-800 in dark mode. |
Tokens --featured-icon-info-background (new) | أصل DGA:Added from site CSS (.featured-icon) | ما اعتمدناه:--colors-blue-600 | Featured icon info hard fill (white icon): blue-600. |
Tokens --featured-icon-info-background-light (new) | أصل DGA:Added from site CSS (.featured-icon) | ما اعتمدناه:--colors-blue-50 (light), --colors-blue-950 (dark) | Featured icon info light fill: blue-50, blue-950 in dark mode. |
Tokens --featured-icon-info-icon (new) | أصل DGA:Added from site CSS (.featured-icon) | ما اعتمدناه:--colors-blue-600 (light), --colors-blue-300 (dark) | Featured icon info icon on the light fill and outlined: blue-600, blue-300 in dark mode. |
Tokens --featured-icon-info-border (new) | أصل DGA:Added from site CSS (.featured-icon) | ما اعتمدناه:--colors-blue-200 (light), --colors-blue-800 (dark) | Featured icon info outlined border: blue-200, blue-800 in dark mode. |
Tokens --skeleton-background (new) | أصل DGA:No fill token on the Figma Skeleton components | ما اعتمدناه:--colors-neutral-200 (light), --colors-neutral-700 (dark) | Placeholder fill: neutral-200, neutral-700 in dark mode. |
Dark theme --background-white (dark) | أصل DGA:--colors-neutral-950 | ما اعتمدناه:--colors-neutral-dark-900 | Figma Dark has the white surface darker than the page and the card two steps lighter. Rebuilt as bg 950, surface 900, raised 850, so each layer is lighter than the one under it. |
Dark theme --background-neutral-50 (dark) | أصل DGA:--colors-neutral-900 | ما اعتمدناه:--colors-neutral-dark-950 | Figma Dark has the white surface darker than the page and the card two steps lighter. Rebuilt as bg 950, surface 900, raised 850, so each layer is lighter than the one under it. |
Dark theme --text-primary (dark) | أصل DGA:--colors-primary-sa-flag-400 | ما اعتمدناه:--colors-primary-sa-flag-300 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --field-text-placeholder (dark) | أصل DGA:--text-secondary-paragraph | ما اعتمدناه:--colors-neutral-dark-400 | Text roles on the tinted ramp: text 50, primary paragraph 200, secondary 300, muted 400. |
Dark theme --global-border-disabled (dark) | أصل DGA:--colors-neutral-400 | ما اعتمدناه:--colors-neutral-dark-700 | Border roles on the tinted ramp: border 800, border-strong 700, subtle 850. |
Dark theme --border-neutral-primary (dark) | أصل DGA:--colors-neutral-500 | ما اعتمدناه:--colors-neutral-dark-700 | Border roles on the tinted ramp: border 800, border-strong 700, subtle 850. |
Dark theme --border-neutral-secondary (dark) | أصل DGA:--colors-neutral-700 | ما اعتمدناه:--colors-neutral-dark-800 | Border roles on the tinted ramp: border 800, border-strong 700, subtle 850. |
Dark theme --border-neutral-tertiary (dark) | أصل DGA:--colors-neutral-800 | ما اعتمدناه:--colors-neutral-dark-850 | Border roles on the tinted ramp: border 800, border-strong 700, subtle 850. |
Dark theme --border-white (dark) | أصل DGA:--colors-base-black | ما اعتمدناه:--colors-neutral-dark-950 | Figma Dark uses pure black. The tinted 950. |
Dark theme --link-neutral (dark) | أصل DGA:--colors-neutral-200 | ما اعتمدناه:--colors-neutral-dark-200 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --link-neutral-hovered (dark) | أصل DGA:--colors-neutral-400 | ما اعتمدناه:--colors-neutral-dark-400 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --link-neutral-pressed (dark) | أصل DGA:--colors-neutral-500 | ما اعتمدناه:--colors-neutral-dark-400 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --link-neutral-visited (dark) | أصل DGA:--colors-neutral-300 | ما اعتمدناه:--colors-neutral-dark-300 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --background-primary-50 (dark) | أصل DGA:--colors-alpha-alpha-600-primary-10 | ما اعتمدناه:--alpha-primary-20 | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --background-secondary-50 (dark) | أصل DGA:--colors-neutral-800 | ما اعتمدناه:#2f2600 | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --background-tertiary-50 (dark) | أصل DGA:--colors-neutral-800 | ما اعتمدناه:#311d3b | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --text-display (dark) | أصل DGA:--colors-neutral-50 | ما اعتمدناه:--colors-neutral-dark-50 | Text roles on the tinted ramp: text 50, primary paragraph 200, secondary 300, muted 400. |
Dark theme --text-primary-paragraph (dark) | أصل DGA:--colors-neutral-100 | ما اعتمدناه:--colors-neutral-dark-200 | Text roles on the tinted ramp: text 50, primary paragraph 200, secondary 300, muted 400. |
Dark theme --text-secondary-paragraph (dark) | أصل DGA:--colors-neutral-200 | ما اعتمدناه:--colors-neutral-dark-300 | Text roles on the tinted ramp: text 50, primary paragraph 200, secondary 300, muted 400. |
Dark theme --text-success (dark) | أصل DGA:--colors-green-400 | ما اعتمدناه:--colors-green-300 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --text-info (dark) | أصل DGA:--colors-blue-400 | ما اعتمدناه:--colors-blue-300 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --text-warning (dark) | أصل DGA:--colors-yellow-400 | ما اعتمدناه:--colors-yellow-300 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --text-error (dark) | أصل DGA:--colors-red-400 | ما اعتمدناه:--colors-red-300 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --border-info (dark) | أصل DGA:--colors-blue-700 | ما اعتمدناه:--colors-blue-500 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --border-warning (dark) | أصل DGA:--colors-yellow-700 | ما اعتمدناه:--colors-yellow-500 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --border-error (dark) | أصل DGA:--colors-red-700 | ما اعتمدناه:--colors-red-500 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --border-background-white (dark) | أصل DGA:--colors-neutral-600 | ما اعتمدناه:--colors-neutral-dark-800 | Border roles on the tinted ramp: border 800, border-strong 700, subtle 850. |
Dark theme --border-background-neutral (dark) | أصل DGA:--colors-neutral-600 | ما اعتمدناه:--colors-neutral-dark-700 | Border roles on the tinted ramp: border 800, border-strong 700, subtle 850. |
Dark theme --border-primary-light (dark) | أصل DGA:--colors-green-200 | ما اعتمدناه:--colors-primary-sa-flag-800 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --icon-default (dark) | أصل DGA:--colors-base-white | ما اعتمدناه:--colors-neutral-dark-50 | Text roles on the tinted ramp: text 50, primary paragraph 200, secondary 300, muted 400. |
Dark theme --icon-primary (dark) | أصل DGA:--colors-primary-sa-flag-400 | ما اعتمدناه:--colors-primary-sa-flag-300 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --icon-neutral-light (dark) | أصل DGA:--colors-neutral-950 | ما اعتمدناه:--colors-neutral-dark-950 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --icon-neutral (dark) | أصل DGA:--colors-neutral-400 | ما اعتمدناه:--colors-neutral-dark-400 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --text-default (dark) | أصل DGA:--colors-base-white | ما اعتمدناه:--colors-neutral-dark-50 | Text roles on the tinted ramp: text 50, primary paragraph 200, secondary 300, muted 400. |
Dark theme --field-text-focused (dark) | أصل DGA:--text-primary-paragraph | ما اعتمدناه:--colors-neutral-dark-200 | Text roles on the tinted ramp: text 50, primary paragraph 200, secondary 300, muted 400. |
Dark theme --field-text-filled (dark) | أصل DGA:--text-default | ما اعتمدناه:--colors-neutral-dark-50 | Text roles on the tinted ramp: text 50, primary paragraph 200, secondary 300, muted 400. |
Dark theme --field-text-helper (dark) | أصل DGA:--text-secondary-paragraph | ما اعتمدناه:--colors-neutral-dark-400 | Text roles on the tinted ramp: text 50, primary paragraph 200, secondary 300, muted 400. |
Dark theme --field-text-label (dark) | أصل DGA:--text-default | ما اعتمدناه:--colors-neutral-dark-50 | Text roles on the tinted ramp: text 50, primary paragraph 200, secondary 300, muted 400. |
Dark theme --button-background-neutral-default (dark) | أصل DGA:--colors-neutral-800 | ما اعتمدناه:--colors-neutral-dark-800 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --button-background-neutral-hovered (dark) | أصل DGA:--colors-neutral-700 | ما اعتمدناه:--colors-neutral-dark-700 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --button-background-neutral-pressed (dark) | أصل DGA:--colors-neutral-600 | ما اعتمدناه:--colors-neutral-dark-600 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --button-background-neutral-selected (dark) | أصل DGA:--colors-neutral-700 | ما اعتمدناه:--colors-neutral-dark-700 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --button-background-neutral-focused (dark) | أصل DGA:--colors-neutral-800 | ما اعتمدناه:--colors-neutral-dark-800 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --border-primary (dark) | أصل DGA:--colors-primary-sa-flag-300 | ما اعتمدناه:--colors-primary-sa-flag-400 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --icon-success (dark) | أصل DGA:--colors-green-400 | ما اعتمدناه:--colors-green-300 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --icon-info (dark) | أصل DGA:--colors-blue-400 | ما اعتمدناه:--colors-blue-300 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --icon-warning (dark) | أصل DGA:--colors-yellow-400 | ما اعتمدناه:--colors-yellow-300 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --icon-error (dark) | أصل DGA:--colors-red-400 | ما اعتمدناه:--colors-red-300 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --background-neutral-400 (dark) | أصل DGA:--colors-neutral-400 | ما اعتمدناه:--colors-neutral-dark-500 | Figma Dark has the white surface darker than the page and the card two steps lighter. Rebuilt as bg 950, surface 900, raised 850, so each layer is lighter than the one under it. |
Dark theme --background-neutral-100 (dark) | أصل DGA:--colors-neutral-800 | ما اعتمدناه:--colors-neutral-dark-850 | Figma Dark has the white surface darker than the page and the card two steps lighter. Rebuilt as bg 950, surface 900, raised 850, so each layer is lighter than the one under it. |
Dark theme --border-success-light (dark) | أصل DGA:--colors-green-200 | ما اعتمدناه:--colors-green-800 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --border-info-light (dark) | أصل DGA:--colors-blue-200 | ما اعتمدناه:--colors-blue-800 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --border-warning-light (dark) | أصل DGA:--colors-yellow-200 | ما اعتمدناه:--colors-yellow-800 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --border-error-light (dark) | أصل DGA:--colors-red-200 | ما اعتمدناه:--colors-red-800 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --background-sa-flag-50 (dark) | أصل DGA:--colors-neutral-800 | ما اعتمدناه:--alpha-primary-20 | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --button-background-black-default (dark) | أصل DGA:--colors-neutral-950 | ما اعتمدناه:--colors-neutral-dark-850 | On the 950 page the black button and the neutral fills lose their edge. Lifted one step and given a border (button-border-neutral). |
Dark theme --button-background-black-hovered (dark) | أصل DGA:--colors-neutral-800 | ما اعتمدناه:--colors-neutral-dark-700 | On the 950 page the black button and the neutral fills lose their edge. Lifted one step and given a border (button-border-neutral). |
Dark theme --button-background-black-pressed (dark) | أصل DGA:--colors-neutral-600 | ما اعتمدناه:--colors-neutral-dark-600 | On the 950 page the black button and the neutral fills lose their edge. Lifted one step and given a border (button-border-neutral). |
Dark theme --button-background-black-selected (dark) | أصل DGA:--colors-neutral-700 | ما اعتمدناه:--colors-neutral-dark-700 | On the 950 page the black button and the neutral fills lose their edge. Lifted one step and given a border (button-border-neutral). |
Dark theme --button-background-black-focused (dark) | أصل DGA:--colors-neutral-950 | ما اعتمدناه:--colors-neutral-dark-850 | On the 950 page the black button and the neutral fills lose their edge. Lifted one step and given a border (button-border-neutral). |
Dark theme --text-default-disabled (dark) | أصل DGA:--colors-neutral-400 | ما اعتمدناه:--colors-neutral-dark-400 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --button-background-oncolor-default (dark) | أصل DGA:--colors-base-black | ما اعتمدناه:--colors-neutral-dark-950 | Figma Dark uses pure black. The tinted 950. |
Dark theme --background-neutral-800 (dark) | أصل DGA:--colors-neutral-600 | ما اعتمدناه:--colors-neutral-dark-600 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --control-border (dark) | أصل DGA:--colors-neutral-400 | ما اعتمدناه:--colors-neutral-dark-500 | Input boundaries need 3:1 on the surface (WCAG 1.4.11). Step 500 on the tinted ramp. |
Dark theme --control-neutral-checked (dark) | أصل DGA:--colors-neutral-600 | ما اعتمدناه:--colors-neutral-dark-300 | Checked neutral controls need 3:1 on the surface. Step 600 is 2.1:1. |
Dark theme --control-neutral-hovered (dark) | أصل DGA:--colors-neutral-400 | ما اعتمدناه:--colors-neutral-dark-200 | Hover is lighter than checked, as in the other states. |
Dark theme --control-neutral-pressed (dark) | أصل DGA:--colors-neutral-400 | ما اعتمدناه:--colors-neutral-dark-400 | Pressed is dimmer than checked. |
Dark theme --control-neutral-focused (dark) | أصل DGA:--colors-neutral-600 | ما اعتمدناه:--colors-neutral-dark-300 | Checked neutral controls need 3:1 on the surface. Step 600 is 2.1:1. |
Dark theme --control-pressed (dark) | أصل DGA:--colors-neutral-600 | ما اعتمدناه:--colors-neutral-dark-600 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --control-ripple-effect (dark) | أصل DGA:--colors-neutral-900 | ما اعتمدناه:--colors-neutral-dark-850 | Figma Dark has the white surface darker than the page and the card two steps lighter. Rebuilt as bg 950, surface 900, raised 850, so each layer is lighter than the one under it. |
Dark theme --link-neutral-focused (dark) | أصل DGA:--colors-neutral-200 | ما اعتمدناه:--colors-neutral-dark-200 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --icon-default-400 (dark) | أصل DGA:--colors-neutral-500 | ما اعتمدناه:--colors-neutral-dark-500 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --background-neutral-300 (dark) | أصل DGA:--colors-neutral-500 | ما اعتمدناه:--colors-neutral-dark-700 | Figma Dark has the white surface darker than the page and the card two steps lighter. Rebuilt as bg 950, surface 900, raised 850, so each layer is lighter than the one under it. |
Dark theme --background-neutral-200 (dark) | أصل DGA:--colors-neutral-600 | ما اعتمدناه:--colors-neutral-dark-800 | Figma Dark has the white surface darker than the page and the card two steps lighter. Rebuilt as bg 950, surface 900, raised 850, so each layer is lighter than the one under it. |
Dark theme --background-neutral-25 (dark) | أصل DGA:--colors-neutral-950 | ما اعتمدناه:--colors-neutral-dark-900 | Figma Dark has the white surface darker than the page and the card two steps lighter. Rebuilt as bg 950, surface 900, raised 850, so each layer is lighter than the one under it. |
Dark theme --background-disabled (dark) | أصل DGA:--colors-neutral-700 | ما اعتمدناه:--colors-neutral-dark-850 | Figma Dark has the white surface darker than the page and the card two steps lighter. Rebuilt as bg 950, surface 900, raised 850, so each layer is lighter than the one under it. |
Dark theme --icon-default-500 (dark) | أصل DGA:--colors-neutral-200 | ما اعتمدناه:--colors-neutral-dark-300 | Text roles on the tinted ramp: text 50, primary paragraph 200, secondary 300, muted 400. |
Dark theme --field-background-default (dark) | أصل DGA:--colors-neutral-800 | ما اعتمدناه:--background-card | Figma Dark keeps a light value (or hardcoded hex) on a dark surface here. Mapped to the tinted ramp. |
Dark theme --field-background-lighter (dark) | أصل DGA:--colors-neutral-600 | ما اعتمدناه:--colors-neutral-dark-850 | Figma Dark keeps a light value (or hardcoded hex) on a dark surface here. Mapped to the tinted ramp. |
Dark theme --field-background-darker (dark) | أصل DGA:--colors-neutral-800 | ما اعتمدناه:--colors-neutral-dark-950 | Figma Dark keeps a light value (or hardcoded hex) on a dark surface here. Mapped to the tinted ramp. |
Dark theme --field-background-pressed (dark) | أصل DGA:#4d5761 | ما اعتمدناه:--colors-neutral-dark-800 | Figma Dark keeps a light value (or hardcoded hex) on a dark surface here. Mapped to the tinted ramp. |
Dark theme --field-border-default (dark) | أصل DGA:--colors-neutral-500 | ما اعتمدناه:--colors-neutral-dark-500 | Input boundaries need 3:1 on the surface (WCAG 1.4.11). Step 500 on the tinted ramp. |
Dark theme --field-border-hovered (dark) | أصل DGA:--colors-neutral-200 | ما اعتمدناه:--colors-neutral-dark-200 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --field-border-pressed (dark) | أصل DGA:--colors-neutral-25 | ما اعتمدناه:--colors-neutral-dark-25 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --field-text-readonly (dark) | أصل DGA:--text-default | ما اعتمدناه:--colors-neutral-dark-50 | Text roles on the tinted ramp: text 50, primary paragraph 200, secondary 300, muted 400. |
Dark theme --field-text-hovered (dark) | أصل DGA:--text-default | ما اعتمدناه:--colors-neutral-dark-50 | Text roles on the tinted ramp: text 50, primary paragraph 200, secondary 300, muted 400. |
Dark theme --field-text-pressed (dark) | أصل DGA:--text-primary-paragraph | ما اعتمدناه:--colors-neutral-dark-200 | Text roles on the tinted ramp: text 50, primary paragraph 200, secondary 300, muted 400. |
Dark theme --background-body (dark) | أصل DGA:--colors-neutral-900 | ما اعتمدناه:--colors-neutral-dark-950 | Figma Dark has the white surface darker than the page and the card two steps lighter. Rebuilt as bg 950, surface 900, raised 850, so each layer is lighter than the one under it. |
Dark theme --table-cell-border (dark) | أصل DGA:--colors-neutral-600 | ما اعتمدناه:--colors-neutral-dark-800 | Border roles on the tinted ramp: border 800, border-strong 700, subtle 850. |
Dark theme --table-text-head (dark) | أصل DGA:--colors-neutral-300 | ما اعتمدناه:--colors-neutral-dark-200 | Text roles on the tinted ramp: text 50, primary paragraph 200, secondary 300, muted 400. |
Dark theme --table-text-body (dark) | أصل DGA:--text-default | ما اعتمدناه:--colors-neutral-dark-50 | Text roles on the tinted ramp: text 50, primary paragraph 200, secondary 300, muted 400. |
Dark theme --table-background-hover-selected (dark) | أصل DGA:--colors-neutral-900 | ما اعتمدناه:--colors-neutral-dark-850 | Figma Dark keeps a light value (or hardcoded hex) on a dark surface here. Mapped to the tinted ramp. |
Dark theme --stepper-button-upcomming (dark) | أصل DGA:--colors-neutral-600 | ما اعتمدناه:--colors-neutral-dark-600 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --stepper-button-upcomming-hovered (dark) | أصل DGA:--colors-neutral-600 | ما اعتمدناه:--colors-neutral-dark-600 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --stepper-button-background (dark) | أصل DGA:--colors-base-white | ما اعتمدناه:--colors-neutral-dark-900 | Figma Dark keeps a light value (or hardcoded hex) on a dark surface here. Mapped to the tinted ramp. |
Dark theme --stepper-text-primary (dark) | أصل DGA:--text-default | ما اعتمدناه:--colors-neutral-dark-50 | Text roles on the tinted ramp: text 50, primary paragraph 200, secondary 300, muted 400. |
Dark theme --stepper-text-secondary (dark) | أصل DGA:--text-primary-paragraph | ما اعتمدناه:--colors-neutral-dark-200 | Text roles on the tinted ramp: text 50, primary paragraph 200, secondary 300, muted 400. |
Dark theme --stepper-text-tertiary (dark) | أصل DGA:--text-secondary-paragraph | ما اعتمدناه:--colors-neutral-dark-300 | Text roles on the tinted ramp: text 50, primary paragraph 200, secondary 300, muted 400. |
Dark theme --stepper-line-upcomming (dark) | أصل DGA:--colors-neutral-700 | ما اعتمدناه:--colors-neutral-dark-700 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --stepper-line-upcomming-hovered (dark) | أصل DGA:--colors-neutral-700 | ما اعتمدناه:--colors-neutral-dark-700 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --stepper-line-current (dark) | أصل DGA:--colors-neutral-700 | ما اعتمدناه:--colors-neutral-dark-700 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --table-background-header (dark) | أصل DGA:--colors-neutral-900 | ما اعتمدناه:--colors-neutral-dark-850 | Figma Dark keeps a light value (or hardcoded hex) on a dark surface here. Mapped to the tinted ramp. |
Dark theme --table-background-row (dark) | أصل DGA:--colors-neutral-900 | ما اعتمدناه:--colors-neutral-dark-900 | Figma Dark keeps a light value (or hardcoded hex) on a dark surface here. Mapped to the tinted ramp. |
Dark theme --background-primary-25 (dark) | أصل DGA:--colors-primary-sa-flag-950 | ما اعتمدناه:--alpha-primary-10 | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --background-secondary-25 (dark) | أصل DGA:--colors-neutral-900 | ما اعتمدناه:#251f06 | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --background-tertiary-25 (dark) | أصل DGA:--colors-neutral-900 | ما اعتمدناه:#26192d | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --background-sa-flag-25 (dark) | أصل DGA:--colors-neutral-900 | ما اعتمدناه:--alpha-primary-10 | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --background-menu (dark) | أصل DGA:--colors-neutral-800 | ما اعتمدناه:--colors-neutral-dark-850 | Figma Dark has the white surface darker than the page and the card two steps lighter. Rebuilt as bg 950, surface 900, raised 850, so each layer is lighter than the one under it. |
Dark theme --tag-background-neutral (dark) | أصل DGA:--colors-neutral-600 | ما اعتمدناه:--colors-neutral-dark-600 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --tag-background-neutral-light (dark) | أصل DGA:--colors-neutral-800 | ما اعتمدناه:--colors-neutral-dark-800 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --tag-background-success (dark) | أصل DGA:--colors-green-700 | ما اعتمدناه:#005730 | The strongest dark fill: the same tint at a higher opacity, never a solid saturated colour. White label on top. |
Dark theme --tag-background-success-light (dark) | أصل DGA:--alpha-success-10 | ما اعتمدناه:#003b1f | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --tag-background-info (dark) | أصل DGA:--colors-blue-600 | ما اعتمدناه:#134881 | The strongest dark fill: the same tint at a higher opacity, never a solid saturated colour. White label on top. |
Dark theme --tag-background-info-light (dark) | أصل DGA:--alpha-info-10 | ما اعتمدناه:#0b305a | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --tag-background-warning (dark) | أصل DGA:--colors-yellow-700 | ما اعتمدناه:#624000 | The strongest dark fill: the same tint at a higher opacity, never a solid saturated colour. White label on top. |
Dark theme --tag-background-warning-light (dark) | أصل DGA:--alpha-warning-10 | ما اعتمدناه:#432b00 | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --tag-background-error (dark) | أصل DGA:--colors-red-600 | ما اعتمدناه:#782b23 | The strongest dark fill: the same tint at a higher opacity, never a solid saturated colour. White label on top. |
Dark theme --tag-background-error-light (dark) | أصل DGA:--alpha-error-10 | ما اعتمدناه:#531b16 | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --tag-border-success (dark) | أصل DGA:--colors-green-300 | ما اعتمدناه:--colors-green-700 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --tag-border-success-light (dark) | أصل DGA:--colors-green-200 | ما اعتمدناه:--colors-green-800 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --tag-border-info (dark) | أصل DGA:--colors-blue-300 | ما اعتمدناه:--colors-blue-700 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --tag-border-info-light (dark) | أصل DGA:--colors-blue-200 | ما اعتمدناه:--colors-blue-800 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --tag-border-warning (dark) | أصل DGA:--colors-yellow-300 | ما اعتمدناه:--colors-yellow-700 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --tag-border-warning-light (dark) | أصل DGA:--colors-yellow-200 | ما اعتمدناه:--colors-yellow-800 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --tag-border-error (dark) | أصل DGA:--colors-red-300 | ما اعتمدناه:--colors-red-700 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --tag-border-error-light (dark) | أصل DGA:--colors-red-200 | ما اعتمدناه:--colors-red-800 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --tag-border-neutral (dark) | أصل DGA:--colors-neutral-300 | ما اعتمدناه:--colors-neutral-dark-300 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --tag-border-neutral-light (dark) | أصل DGA:--colors-neutral-800 | ما اعتمدناه:--colors-neutral-dark-800 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --tag-text-success (dark) | أصل DGA:--colors-green-400 | ما اعتمدناه:--colors-green-300 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --tag-text-info (dark) | أصل DGA:--colors-blue-400 | ما اعتمدناه:--colors-blue-300 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --tag-text-warning (dark) | أصل DGA:--colors-yellow-400 | ما اعتمدناه:--colors-yellow-300 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --tag-text-error (dark) | أصل DGA:--colors-red-400 | ما اعتمدناه:--colors-red-300 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --tag-icon-success (dark) | أصل DGA:--colors-green-400 | ما اعتمدناه:--colors-green-300 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --tag-icon-info (dark) | أصل DGA:--colors-blue-400 | ما اعتمدناه:--colors-blue-300 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --tag-icon-warning (dark) | أصل DGA:--colors-yellow-400 | ما اعتمدناه:--colors-yellow-300 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --tag-icon-error (dark) | أصل DGA:--colors-red-400 | ما اعتمدناه:--colors-red-300 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --tag-text-neutral (dark) | أصل DGA:--colors-neutral-100 | ما اعتمدناه:--colors-neutral-dark-100 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --tag-icon-neutral (dark) | أصل DGA:--colors-neutral-100 | ما اعتمدناه:--colors-neutral-dark-100 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --background-inverse-disabled (dark) | أصل DGA:--colors-neutral-700 | ما اعتمدناه:--colors-neutral-dark-800 | Figma Dark has the white surface darker than the page and the card two steps lighter. Rebuilt as bg 950, surface 900, raised 850, so each layer is lighter than the one under it. |
Dark theme --text-primary-light (dark) | أصل DGA:--colors-primary-sa-flag-400 | ما اعتمدناه:--colors-primary-sa-flag-300 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --option-background-hover (dark) | أصل DGA:--colors-neutral-500 | ما اعتمدناه:--colors-neutral-dark-500 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --option-background-pressed (dark) | أصل DGA:--colors-neutral-700 | ما اعتمدناه:--colors-neutral-dark-700 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --datecell-today-background-hovered (dark) | أصل DGA:--colors-neutral-700 | ما اعتمدناه:--colors-neutral-dark-700 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --datecell-today-background-pressed (dark) | أصل DGA:--colors-neutral-600 | ما اعتمدناه:--colors-neutral-dark-600 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --background-card (dark) | أصل DGA:--colors-neutral-800 | ما اعتمدناه:--colors-neutral-dark-900 | Figma Dark has the white surface darker than the page and the card two steps lighter. Rebuilt as bg 950, surface 900, raised 850, so each layer is lighter than the one under it. |
Dark theme --tooltip-background-light (dark) | أصل DGA:--colors-neutral-800 | ما اعتمدناه:--colors-neutral-dark-850 | Figma Dark has the white surface darker than the page and the card two steps lighter. Rebuilt as bg 950, surface 900, raised 850, so each layer is lighter than the one under it. |
Dark theme --tooltip-text-heading-dark (dark) | أصل DGA:--colors-neutral-800 | ما اعتمدناه:--colors-neutral-dark-800 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --tooltip-text-paragraph-dark (dark) | أصل DGA:--colors-neutral-700 | ما اعتمدناه:--colors-neutral-dark-700 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --background-notification-white (dark) | أصل DGA:--colors-neutral-900 | ما اعتمدناه:--colors-neutral-dark-850 | Figma Dark has the white surface darker than the page and the card two steps lighter. Rebuilt as bg 950, surface 900, raised 850, so each layer is lighter than the one under it. |
Dark theme --background-primary-200 (dark) | أصل DGA:--colors-neutral-700 | ما اعتمدناه:--colors-primary-sa-flag-900 | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --link-icon-neutral-hovered (dark) | أصل DGA:--colors-neutral-400 | ما اعتمدناه:--colors-neutral-dark-400 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --link-icon-neutral-pressed (dark) | أصل DGA:--colors-neutral-500 | ما اعتمدناه:--colors-neutral-dark-400 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --link-icon-neutral-focused (dark) | أصل DGA:--colors-neutral-200 | ما اعتمدناه:--colors-neutral-dark-200 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --link-icon-neutral-visited (dark) | أصل DGA:--colors-neutral-300 | ما اعتمدناه:--colors-neutral-dark-300 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --alpha-primary-10 (dark) | أصل DGA:#166a451a | ما اعتمدناه:#0d2518 | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --control-icon-disabled (dark) | أصل DGA:--colors-neutral-400 | ما اعتمدناه:--colors-neutral-dark-400 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --datecell-background-disabled (dark) | أصل DGA:#ffffff | ما اعتمدناه:--colors-neutral-dark-900 | Figma Dark keeps a light value (or hardcoded hex) on a dark surface here. Mapped to the tinted ramp. |
Dark theme --alpha-primary-20 (dark) | أصل DGA:#166a4533 | ما اعتمدناه:#032f1b | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --alpha-warning-10 (dark) | أصل DGA:#b547081a | ما اعتمدناه:#2a1c07 | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --alpha-warning-20 (dark) | أصل DGA:#b5470833 | ما اعتمدناه:#372200 | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --alpha-error-10 (dark) | أصل DGA:#b423181a | ما اعتمدناه:#301714 | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --alpha-error-20 (dark) | أصل DGA:#b4231833 | ما اعتمدناه:#3f1915 | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --alpha-info-10 (dark) | أصل DGA:#175cd31a | ما اعتمدناه:#112032 | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --alpha-info-20 (dark) | أصل DGA:#175cd333 | ما اعتمدناه:#0f2743 | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --alpha-success-10 (dark) | أصل DGA:#0676471a | ما اعتمدناه:#0e2517 | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --alpha-success-20 (dark) | أصل DGA:#06764733 | ما اعتمدناه:#062f19 | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --textarea-scrollbar-bar (dark) | أصل DGA:--colors-neutral-600 | ما اعتمدناه:--colors-neutral-dark-600 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --control-disabled (dark) | أصل DGA:--colors-neutral-300 | ما اعتمدناه:--colors-neutral-dark-300 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --border-disabled (dark) | أصل DGA:--colors-neutral-500 | ما اعتمدناه:--colors-neutral-dark-700 | Border roles on the tinted ramp: border 800, border-strong 700, subtle 850. |
Dark theme --unselected-tab-icon (dark) | أصل DGA:--colors-neutral-100 | ما اعتمدناه:--colors-neutral-dark-200 | Text roles on the tinted ramp: text 50, primary paragraph 200, secondary 300, muted 400. |
Dark theme --table-background-row-selected-hovered (dark) | أصل DGA:--colors-primary-sa-flag-50 | ما اعتمدناه:--alpha-primary-20 | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --table-boarder-row-selected-hovered (dark) | أصل DGA:--colors-neutral-100 | ما اعتمدناه:--colors-neutral-dark-800 | Figma Dark keeps a light value (or hardcoded hex) on a dark surface here. Mapped to the tinted ramp. |
Dark theme --table-background-row-select (dark) | أصل DGA:--colors-primary-sa-flag-50 | ما اعتمدناه:--alpha-primary-20 | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --table-background-row-hovered (dark) | أصل DGA:--colors-neutral-100 | ما اعتمدناه:--colors-neutral-dark-850 | Figma Dark keeps a light value (or hardcoded hex) on a dark surface here. Mapped to the tinted ramp. |
Dark theme --table-background-row-alt (dark) | أصل DGA:#ffffff | ما اعتمدناه:--colors-neutral-dark-900 | Figma Dark keeps a light value (or hardcoded hex) on a dark surface here. Mapped to the tinted ramp. |
Dark theme --chip-background-neutral-default (dark) | أصل DGA:--colors-neutral-800 | ما اعتمدناه:--colors-neutral-dark-800 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --chip-background-neutral-focused (dark) | أصل DGA:--colors-neutral-800 | ما اعتمدناه:--colors-neutral-dark-800 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --chip-background-on-color-default (dark) | أصل DGA:--colors-base-black | ما اعتمدناه:--colors-neutral-dark-950 | Figma Dark uses pure black. The tinted 950. |
Dark theme --chip-background-neutral-hovered (dark) | أصل DGA:--colors-neutral-600 | ما اعتمدناه:--colors-neutral-dark-600 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --chip-background-neutral-selected (dark) | أصل DGA:--colors-neutral-700 | ما اعتمدناه:--colors-neutral-dark-700 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --progress-bar-neutral (dark) | أصل DGA:--colors-neutral-700 | ما اعتمدناه:--colors-neutral-dark-700 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --icon-neutral-ring (dark) | أصل DGA:--colors-neutral-900 | ما اعتمدناه:--colors-neutral-dark-850 | Figma Dark has the white surface darker than the page and the card two steps lighter. Rebuilt as bg 950, surface 900, raised 850, so each layer is lighter than the one under it. |
Dark theme --text-secondary (dark) | أصل DGA:--colors-secondary-gold-600-primary | ما اعتمدناه:--colors-secondary-gold-400 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --border-secondary (dark) | أصل DGA:--colors-secondary-gold-600-primary | ما اعتمدناه:--colors-secondary-gold-500 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --border-tertiary (dark) | أصل DGA:--colors-tertiary-lavender-500-primary | ما اعتمدناه:--colors-tertiary-lavender-400 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --icon-secondary (dark) | أصل DGA:--colors-secondary-gold-600-primary | ما اعتمدناه:--colors-secondary-gold-400 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --icon-tertiary (dark) | أصل DGA:--colors-tertiary-lavender-500-primary | ما اعتمدناه:--colors-tertiary-lavender-300 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --badge-neutral-background (dark) | أصل DGA:--colors-neutral-800 | ما اعتمدناه:--colors-neutral-dark-800 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --badge-neutral-border (dark) | أصل DGA:--colors-neutral-700 | ما اعتمدناه:--colors-neutral-dark-700 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --badge-neutral-text (dark) | أصل DGA:--colors-neutral-200 | ما اعتمدناه:--colors-neutral-dark-200 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --badge-neutral-border-outlined (dark) | أصل DGA:--colors-neutral-400 | ما اعتمدناه:--colors-neutral-dark-400 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --badge-success-background (dark) | أصل DGA:--colors-primary-sa-flag-950 | ما اعتمدناه:#003b21 | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --badge-success-text (dark) | أصل DGA:--colors-primary-sa-flag-200 | ما اعتمدناه:--colors-primary-sa-flag-300 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --badge-success-border-outlined (dark) | أصل DGA:--colors-primary-sa-flag-400 | ما اعتمدناه:--colors-primary-sa-flag-700 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --badge-error-background (dark) | أصل DGA:--colors-red-950 | ما اعتمدناه:#531b16 | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --badge-error-text (dark) | أصل DGA:--colors-red-200 | ما اعتمدناه:--colors-red-300 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --badge-error-border-outlined (dark) | أصل DGA:--colors-red-400 | ما اعتمدناه:--colors-red-700 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --badge-warning-background (dark) | أصل DGA:--colors-yellow-950 | ما اعتمدناه:#432b00 | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --badge-warning-text (dark) | أصل DGA:--colors-yellow-200 | ما اعتمدناه:--colors-yellow-300 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --badge-warning-border-outlined (dark) | أصل DGA:--colors-yellow-400 | ما اعتمدناه:--colors-yellow-700 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --badge-info-background (dark) | أصل DGA:--colors-blue-950 | ما اعتمدناه:#0b305a | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --badge-info-text (dark) | أصل DGA:--colors-blue-200 | ما اعتمدناه:--colors-blue-300 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --badge-info-border-outlined (dark) | أصل DGA:--colors-blue-400 | ما اعتمدناه:--colors-blue-700 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --badge-purple-background (dark) | أصل DGA:--colors-tertiary-lavender-950 | ما اعتمدناه:#40214e | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --badge-purple-text (dark) | أصل DGA:--colors-tertiary-lavender-200 | ما اعتمدناه:--colors-tertiary-lavender-300 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --badge-purple-border-outlined (dark) | أصل DGA:--colors-tertiary-lavender-400 | ما اعتمدناه:--colors-tertiary-lavender-700 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --badge-orange-background (dark) | أصل DGA:--colors-orange-950 | ما اعتمدناه:#521e04 | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --badge-orange-text (dark) | أصل DGA:--colors-orange-200 | ما اعتمدناه:--colors-orange-300 | Step 300 of the colour's own ramp for text and icons on dark surfaces, 500 for strong borders (same hue as light). |
Dark theme --badge-orange-border-outlined (dark) | أصل DGA:--colors-orange-400 | ما اعتمدناه:--colors-orange-700 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --featured-icon-brand-background (dark) | أصل DGA:--colors-primary-sa-flag-600-primary | ما اعتمدناه:#005633 | The strongest dark fill: the same tint at a higher opacity, never a solid saturated colour. White label on top. |
Dark theme --featured-icon-brand-background-light (dark) | أصل DGA:--colors-primary-sa-flag-950 | ما اعتمدناه:#003b21 | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --featured-icon-neutral-background (dark) | أصل DGA:--colors-neutral-500 | ما اعتمدناه:--colors-neutral-dark-500 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --featured-icon-neutral-background-light (dark) | أصل DGA:--colors-neutral-800 | ما اعتمدناه:--colors-neutral-dark-800 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --featured-icon-neutral-icon (dark) | أصل DGA:--colors-neutral-300 | ما اعتمدناه:--colors-neutral-dark-300 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --featured-icon-neutral-border (dark) | أصل DGA:--colors-neutral-700 | ما اعتمدناه:--colors-neutral-dark-700 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Dark theme --featured-icon-success-background (dark) | أصل DGA:--colors-green-700 | ما اعتمدناه:#005730 | The strongest dark fill: the same tint at a higher opacity, never a solid saturated colour. White label on top. |
Dark theme --featured-icon-success-background-light (dark) | أصل DGA:--colors-green-950 | ما اعتمدناه:#003b1f | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --featured-icon-error-background (dark) | أصل DGA:--colors-red-600 | ما اعتمدناه:#782b23 | The strongest dark fill: the same tint at a higher opacity, never a solid saturated colour. White label on top. |
Dark theme --featured-icon-error-background-light (dark) | أصل DGA:--colors-red-950 | ما اعتمدناه:#531b16 | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --featured-icon-warning-background (dark) | أصل DGA:--colors-yellow-700 | ما اعتمدناه:#624000 | The strongest dark fill: the same tint at a higher opacity, never a solid saturated colour. White label on top. |
Dark theme --featured-icon-warning-background-light (dark) | أصل DGA:--colors-yellow-950 | ما اعتمدناه:#432b00 | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --featured-icon-info-background (dark) | أصل DGA:--colors-blue-600 | ما اعتمدناه:#134881 | The strongest dark fill: the same tint at a higher opacity, never a solid saturated colour. White label on top. |
Dark theme --featured-icon-info-background-light (dark) | أصل DGA:--colors-blue-950 | ما اعتمدناه:#0b305a | Soft tint of the colour's own 500 step (400 for amber and purple) at the opacity that gives every hue the same OKLab lightness over the surface, instead of a solid saturated fill or a 950 step. Reads as the light-mode soft tint, never brown. |
Dark theme --skeleton-background (dark) | أصل DGA:--colors-neutral-700 | ما اعتمدناه:--colors-neutral-dark-700 | Same step on the tinted neutral ramp (green-tinted) instead of the cool-blue grey. |
Contrast shadcn --muted (background-neutral-100 → background-neutral-50) | أصل DGA:--muted: --background-neutral-100 with --muted-foreground: --text-secondary-paragraph | ما اعتمدناه:--muted: --background-neutral-50 | text-secondary-paragraph (#6c737f) on neutral-100 is 4.34:1 in light mode, which fails AA for the muted text shadcn components put on muted fills. On neutral-50 it is 4.65:1. |
Dark theme --shadow-* (dark) | أصل DGA:Figma effect styles, same in both modes | ما اعتمدناه:none (0 0 #0000) | Shadows are invisible on near-black surfaces and only add haze. In dark mode elevation is a lighter surface (raised 850) plus a border. |
Dark theme Neutral ramp (dark) | أصل DGA:Cool blue-grey ramp (colors-neutral-*), reused for dark | ما اعتمدناه:colors-neutral-dark-25 … 950: a green-tinted ramp (OKLCH hue 172, chroma 0.004–0.016) | Figma Dark reuses the light neutral ramp, a blue-grey that clashes with the green brand and makes dark mode look off-brand. The tinted ramp keeps the same lightness steps. |
Dark theme Solid button and status fills (dark) | أصل DGA:Same value as light mode | ما اعتمدناه:Unchanged for buttons and --background-*: primary 600, success 700, info 600, warning 700, error 600 | The label on these fills is white in both modes, and a lighter step (400–500) drops white text below 4.5:1 (3.2–3.9:1). Kept on purpose. Badges, tags, status tags, alerts and featured icons do not use these: they get the soft tints logged under Dark theme. |
Naming Figma group "Font Wieght" | أصل DGA:Font Wieght/font-weight-* | ما اعتمدناه:Font Weight (CSS names were already --font-weight-*) | Typo: Wieght → Weight. Only the Figma group name was wrong. |
Breakpoints sm / md / lg / xl / 2xl | أصل DGA:Not defined. Figma has Desktop, Tablet and Mobile modes with no pixel widths. | ما اعتمدناه:sm 640px (40rem), md 768px (48rem), lg 1024px (64rem), xl 1280px (80rem), 2xl 1536px (96rem) | These are the widths the design.dga.gov.sa CSS uses and also Tailwind's defaults. Figma's tablet frame is 704 + 2×32 = 768px wide, which matches md. |
Breakpoints Responsive token modes | أصل DGA:tokens.css (extraction guess): Desktop default, Tablet at max-width 1024px, Mobile at max-width 640px | ما اعتمدناه:Mobile-first: Mobile is the base, Tablet from 768px (md), Desktop from 1024px (lg) | Mobile-first matches Tailwind's min-width breakpoints, and 768px is where Figma's tablet grid starts. |
Typography --typo-size-text-*, --line-heights-text-*, --paragraph-spacing-text-* | أصل DGA:Mobile mode: text-md 12px, text-sm 10px, text-xs 8px; Tablet: text-md 14px | ما اعتمدناه:Body text sizes stay at their desktop values on every viewport. Display sizes still follow the Figma modes. | 8–12px body text is hard to read on phones, iOS zooms into inputs under 16px, and the mobile mode made text-lg (14px) smaller than text-md. |
Typography --typo-line-height-*, --typo-letter-spacing-* in Arabic (lang="ar", dir="rtl") | أصل DGA:Token line heights 1.4 to 1.6 and -2% letter spacing on display sizes, for every language | ما اعتمدناه:In Arabic: line height 1.8 for body text and 1.5 for headings, letter spacing 0 on every element. | The marks above and below Arabic letters need more room than the Latin line heights give, and negative tracking breaks the joins between letters. Latin text keeps the Figma values. |
Tokens Site CSS vs Figma (39 material conflicts, 87 rounding-only, shadow-sm) | أصل DGA:design.dga.gov.sa compiled CSS values | ما اعتمدناه:Figma values everywhere | Figma is the source of truth. The full list is in tokens/TOKEN_CONFLICTS.md. |
Tokens --radius-xxs, --radius-2xl, --radius-3xl, --radius-4xl | أصل DGA:Legacy site-CSS radius set (2, 16, 20, 24px) | ما اعتمدناه:Dropped. rounded-2xl, rounded-3xl and rounded-4xl clamp to radius-xl (24px) so shadcn class names still work. | Not in Figma, and it clashes with the Figma scale (site radius-2xl is 16px, the same as Figma radius-lg). |
Tokens --shadow-* (css-only copies) | أصل DGA:Site CSS shadow values | ما اعتمدناه:Figma effect styles (Shadows/shadow-xs … shadow-3xl) | Figma is the source of truth. Only shadow-sm differed (5% vs 6%/10% opacity). |
Theming Dark mode selector | أصل DGA:[data-theme="dark"] | ما اعتمدناه:[data-theme="dark"] and .dark (both work, also on any subtree) | shadcn and next-themes use the .dark class. All semantic tokens are re-declared in the dark scope so nested dark sections resolve correctly. |
Tailwind shadcn --radius scale | أصل DGA:shadcn derives radius-sm…4xl from --radius with calc() | ما اعتمدناه:Fixed DGA radii: none 0, xs 2, sm 4, md 8, lg 16, xl 24, full 9999px; --radius = radius-sm (4px) | DGA defines exact radii. Buttons and inputs use radius-sm (4px). |
Tailwind Spacing scale | أصل DGA:--spacing-N in px (spacing-N = N × 4px) | ما اعتمدناه:Tailwind's --spacing: 0.25rem, so p-4 = 16px and p-80 = 320px, matching DGA one-to-one | rem keeps spacing in step with the user's root font size. The raw --spacing-* variables keep their px values. |
Contrast Component-level pairs | أصل DGA:Not audited | ما اعتمدناه:Every state of every component, on each surface it can sit on, in light and dark mode (scripts/tokens/components.ts). Phase 2: Button, Spinner, Link, Badge, Tag, Avatar and Featured Icon. | Foundation pairs alone miss component states such as hovered labels and on-colour fills. Each component page lists its checks. |
Contrast --background-black in dark mode | أصل DGA:Flips to white in dark mode | ما اعتمدناه:Unchanged | It is an inverse surface (white in dark mode), so text on it must use the inverse colour, not text-oncolor-primary. Primary-neutral buttons use button-background-black-*, which stays dark. |
Contrast --text-oncolor-secondary, --text-oncolor-tertiary | أصل DGA:No usage rule (80% and 70% white) | ما اعتمدناه:Use only on deep fills: nav header, pressed/selected primary, black. On mid-tone fills use --text-oncolor-primary. | White itself is only 4.57–4.83:1 on the 600-level fills, so no lower opacity can pass there. On deep fills 80% and 70% white pass AA. |
Components Featured Icon | أصل DGA:Not in the DGA Figma file. Defined only in the design.dga.gov.sa CSS (.featured-icon). | ما اعتمدناه:Built from the site CSS: hard, light and outlined; brand, neutral, success, error, warning and info; sm 32, md 40, lg 48 and xl 56px; square or circle. | Figma is the source of truth where it exists; here only the site CSS does. |
Components Featured Icon: hard warning and success | أصل DGA:Hard warning: white on warning-400. Hard success: white on brand-600 (the same as brand). | ما اعتمدناه:Hard warning uses yellow-700; hard success uses green-700 (DGA status green). | White on yellow-400 is 1.9:1, below the 3:1 non-text minimum. Success uses the status palette so it differs from brand, as the site's semantic block (text-success) does. |
Components Skeleton: composite types | أصل DGA:Five composite Skeleton Components (Image Button and Text, Icon and List, Image Content and Button, Chart and Content, Image Profile Content and Button) | ما اعتمدناه:One Skeleton primitive (rectangle, square, circle, line) and the five layouts as copy-paste examples on the docs page | The composites are layouts of the primitives; real pages need their own shapes. |
Components Skeleton: animation | أصل DGA:Static | ما اعتمدناه:Pulses (opacity); static with reduced motion | A gentle pulse shows that content is loading. prefers-reduced-motion turns it off. |
Components Divider: colours | أصل DGA:Neutral, Primary, Alpha-white and White, with no colour tokens in the export | ما اعتمدناه:neutral → border-neutral-secondary, primary → border-primary, alpha-white → border-oncolor-transparent-30, white → icon-oncolor (white in both modes) | Mapped to the closest semantic border tokens. border-white flips to black in dark mode, so white uses a token that stays white. |
Components Avatar: sizes and text | أصل DGA:Initials use Text xs/Semibold on every size in the export | ما اعتمدناه:Text style per size from the site CSS: 24 Text 2xs Bold, 32 Text xs SemiBold, 40 Text sm SemiBold, 48 Text md SemiBold, 64 Text xl Medium, 80 Display sm, 120 Display md | One text size cannot fit avatars from 24 to 120px. |
Components Tag: text size | أصل DGA:Text 2xs/SemiBold on every size in the exported variant table | ما اعتمدناه:Text sm (md, 32px), Text xs (sm, 24px) and Text 2xs (xs, 20px), SemiBold | The export lists one sample text style. A 10px label in a 32px tag is hard to read; the sizes follow the site CSS (.tag--lg uses 14px). |
Components Tag: dismiss | أصل DGA:Optional trailing icon | ما اعتمدناه:onDismiss adds a trailing close button (Cancel icon) with an aria-label (dismissLabel). The tag itself is not interactive. | Removable filter tags need a real button for keyboard and screen-reader users. |
Components Status Tag: ghost and dot | أصل DGA:Ghost: neutral label with no fill | ما اعتمدناه:Every status tag starts with a coloured dot (tag-icon-*; tag-dot on inverted) so ghost tags still show their colour. | Ghost tags would otherwise all look the same; the dot is decorative and the label carries the status. |
Components Badge | أصل DGA:Not in the DGA Figma file. Defined only in the design.dga.gov.sa CSS (.badge). | ما اعتمدناه:Built from the site CSS: sizes sm 20, md 24 and lg 32px, filled and outlined, square and rounded, icon-only. Colours map to DGA palettes (brand → success, purple → lavender). | The badge is used across DGA sites. Figma is the source of truth where it exists; here only the site CSS does. |
Components Badge: pink | أصل DGA:.badge--pink and .badge--pink-outlined | ما اعتمدناه:Dropped | DGA has no pink palette, in Figma or in the token set. |
Components Badge: on-colour outlined label | أصل DGA:White 90% text | ما اعتمدناه:White text (text-oncolor-primary) | White 90% on the brand fill is 4.16:1; white is 4.57:1 or better. |
Components Link: focus ring and disabled | أصل DGA:Focused: border-black stroke (border-white on colour). Disabled: a separate variant. | ما اعتمدناه:2px outline on :focus-visible with a 2px offset (white on colour, both modes). disabled removes the href and sets aria-disabled. | Keyboard-only focus (WCAG 2.4.7). A link without an href cannot be followed or focused. |
Components Link: external | أصل DGA:Optional swap icon | ما اعتمدناه:external opens a new tab with rel="noopener noreferrer", shows the external-link icon (mirrored in RTL) and adds "(opens in a new tab)" for screen readers. | WCAG 3.2.5: warn before opening a new window. |
Components Button: destructive states | أصل DGA:Figma defines only the Default state for destructive buttons (Primary, Secondary-Solid, Secondary-Outline, Subtle, Transparent). | ما اعتمدناه:Hovered, pressed, selected, focused and disabled follow the same pattern as the non-destructive styles, using the button-background-danger-* tokens (which already have every state). | A button needs every state. The danger fill tokens exist in Figma for all states. |
Components Button: destructive neutral | أصل DGA:No destructive variant of Primary-Neutral | ما اعتمدناه:variant="neutral" with destructive renders as destructive primary | Figma has no neutral destructive style. Falling back keeps every prop combination valid. |
Components Button: focus ring | أصل DGA:Focused is a separate Figma state with a 2px border-black (border-white on colour) stroke inside the button. | ما اعتمدناه:Shown on :focus-visible only (keyboard), as a 2px outline outside the button with a 1px inner ring in the button's surface colour. On-colour buttons use white (icon-oncolor) in both modes. | WCAG 2.4.7 / 2.4.11. An outside outline does not shift the label, and border-white flips to black in dark mode (2.11:1 on the nav header). |
Components Button: transparent on-colour states | أصل DGA:Hovered, pressed and selected change the label to green-400/300 | ما اعتمدناه:The label stays white; hovered and selected add an underline, pressed adds an underline and 80% opacity. | Colour alone cannot meet 4.5:1 on the brand fill (see the label token fixes). |
Components Button: selected state | أصل DGA:A separate Figma variant | ما اعتمدناه:Applied with aria-pressed="true" (toggle buttons) or data-selected | Screen readers announce aria-pressed; data-selected covers buttons in menus and groups. |
Components Button: loading | أصل DGA:Not in Figma | ما اعتمدناه:loading prop: a Spinner replaces the leading icon, the width is kept, aria-busy is set and the button is disabled for clicks but stays focusable. | Async actions need a busy state. Keeping focus avoids losing the user's place. |
كيف يُفحص التباين
يفشل بناء الرموز إن كان أي من هذه الأزواج دون WCAG 2.1 AA، في الوضع الفاتح أو الداكن:
- ألوان النص والروابط على
background-whiteوbackground-bodyوbackground-card(نسبة 4.5:1). - الأيقونات وأيقونات الروابط على الأسطح نفسها (3:1، لغير النص).
text-oncolor-primaryوicon-oncolorعلى كل تعبئة مصمتة (الأساسي والحالات وترويسة التنقل وتعبئات الأزرار).- نص الحالة على خلفيته المظلّلة (
text-successعلىbackground-success-50وهكذا).
الحالات المعطّلة مستثناة (WCAG 1.4.3). وتُفحص أزواج المكوّنات عند إضافة كل مكوّن.
CSS الموقع مقابل Figma
يسرد الملف tokens/TOKEN_CONFLICTS.md الاختلافات بين Figma وCSS الموقع design.dga.gov.sa: 39 اختلافًا جوهريًا و87 اختلافًا في التقريب فقط. يُعتمد Figma في كل الحالات.