Deviations from DGA
Every place Platform Code differs from the DGA Figma source, with the original value, ours, and the reason.
Version 0.2.0 ·
Platform Code follows the DGA Foundations Figma file. When a value is wrong (a typo, a contrast failure, a missing definition), we change it and record the change here. This page is generated from the same list the token build uses (scripts/tokens/fixes.ts), so the two cannot drift apart.
| Token / component | DGA original | Ours | Reason |
|---|---|---|---|
Naming --line-hight-* (21 primitives) | DGA original:line-hight | Ours:line-height | Typo: Hight → Height. |
Naming --colors-tertiary-lavendar-*, --charts-lavendar | DGA original:lavendar | Ours:lavender | Typo: Lavendar → Lavender. |
Naming --chip-background-on-color-diabled | DGA original:diabled | Ours:disabled | Typo: diabled → disabled. |
Naming --iable-container | DGA original:iable-container | Ours: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 original:lable | Ours:label | Typo: lable → label. |
Naming --dropdown-container-padding-left-right, --textarea-container-padding-left-right | DGA original:padding-left-right | Ours: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 original:padding-top-bottom | Ours:padding-block | Matches the logical inline naming (top/bottom → block). |
Naming --input-container-padding-left, --prefix-suffix-padding-left | DGA original:padding-left | Ours:padding-start | RTL: left → logical start. |
Naming --input-container-padding-right, --prefix-suffix-padding-right | DGA original:padding-right | Ours:padding-end | RTL: right → logical end. |
Contrast --background-success (light) | DGA original:--colors-green-600 | Ours:--colors-green-700 | White text on green-600 is 3.91:1. Green-700 gives 5.69:1. |
Contrast --background-success (dark) | DGA original:--colors-green-600 | Ours:--colors-green-700 | White text on green-600 is 3.91:1. Green-700 gives 5.69:1. |
Contrast --background-warning (light) | DGA original:--colors-yellow-600 | Ours:--colors-yellow-700 | White text on yellow-600 is 3.49:1. Yellow-700 gives 5.43:1. |
Contrast --background-warning (dark) | DGA original:--colors-yellow-600 | Ours:--colors-yellow-700 | White text on yellow-600 is 3.49:1. Yellow-700 gives 5.43:1. |
Contrast --text-secondary (light) | DGA original:--colors-secondary-gold-600-primary | Ours:--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 original:--colors-tertiary-lavender-500-primary | Ours:--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 original:--alpha-white-80 | Ours:--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 original:--alpha-white-70 | Ours:--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 original:--colors-primary-sa-flag-400 | Ours:--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 original:--colors-secondary-gold-600-primary | Ours:--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 original:--colors-tertiary-lavender-300 | Ours:--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 original:--colors-primary-sa-flag-400 | Ours:--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 original:--colors-primary-sa-flag-400 | Ours:--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 original:--colors-primary-sa-flag-300 | Ours:--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 original:--colors-primary-sa-flag-300 | Ours:--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 original:--colors-neutral-400 | Ours:--colors-neutral-600 | Neutral-400 on white is 2.41:1. Neutral-600 gives 7.36:1. |
Contrast --link-icon-neutral-pressed (light) | DGA original:--colors-neutral-400 | Ours:--colors-neutral-600 | Neutral-400 on white is 2.41:1. Neutral-600 gives 7.36:1. |
Contrast --link-primary (dark) | DGA original:--colors-primary-sa-flag-600-primary | Ours:--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 original:--colors-primary-sa-flag-600-primary | Ours:--colors-primary-sa-flag-400 | Matches the dark default link (sa-flag-600 was 3.06:1). |
Contrast --link-icon-primary-focused (dark) | DGA original:--colors-primary-sa-flag-600-primary | Ours:--colors-primary-sa-flag-400 | Matches the dark default link (sa-flag-600 was 3.06:1). |
Contrast --link-primary-hovered (dark) | DGA original:--colors-primary-sa-flag-400 | Ours:--colors-primary-sa-flag-300 | Dark hover lightens one step from the new default. |
Contrast --link-icon-primary-hovered (dark) | DGA original:--colors-primary-sa-flag-400 | Ours:--colors-primary-sa-flag-300 | Dark hover lightens one step from the new default. |
Contrast --link-primary-pressed (dark) | DGA original:--colors-primary-sa-flag-300 | Ours:--colors-primary-sa-flag-200 | Dark pressed lightens two steps from the new default. |
Contrast --link-icon-primary-pressed (dark) | DGA original:--colors-primary-sa-flag-300 | Ours:--colors-primary-sa-flag-200 | Dark pressed lightens two steps from the new default. |
Contrast --link-primary-visited (dark) | DGA original:--colors-primary-sa-flag-800 | Ours:--colors-primary-sa-flag-200 | Sa-flag-800 on dark card is 1.70:1. |
Contrast --link-icon-primary-visited (dark) | DGA original:--colors-primary-sa-flag-800 | Ours:--colors-primary-sa-flag-200 | Sa-flag-800 on dark card is 1.70:1. |
Contrast --link-danger (dark) | DGA original:--colors-red-600 | Ours:--colors-red-400 | Red-600 on dark card is 3.01:1. Red-400 gives 5.22:1. |
Contrast --link-danger-focused (dark) | DGA original:--colors-red-600 | Ours:--colors-red-400 | Matches the dark default danger link. |
Contrast --link-icon-danger-focused (dark) | DGA original:--colors-red-600 | Ours:--colors-red-400 | Matches the dark default danger link. |
Contrast --link-danger-hovered (dark) | DGA original:--colors-red-700 | Ours:--colors-red-300 | Red-700 on dark card is 2.21:1. |
Contrast --link-icon-danger-hovered (dark) | DGA original:--colors-red-700 | Ours:--colors-red-300 | Red-700 on dark card is 2.21:1. |
Contrast --link-danger-pressed (dark) | DGA original:--colors-red-900 | Ours:--colors-red-200 | Red-900 on dark card is 1.48:1. |
Contrast --link-icon-danger-pressed (dark) | DGA original:--colors-red-900 | Ours:--colors-red-200 | Red-900 on dark card is 1.48:1. |
Contrast --link-danger-visited (dark) | DGA original:--colors-red-800 | Ours:--colors-red-300 | Red-800 on dark card is 1.68:1. |
Contrast --link-icon-danger-visited (dark) | DGA original:--colors-red-800 | Ours:--colors-red-300 | Red-800 on dark card is 1.68:1. |
Contrast --button-background-transparent-hovered (light) | DGA original:--alpha-white-20 | Ours:--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 original:--alpha-white-40 | Ours:--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 original:--alpha-white-30 | Ours:--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 original:--colors-primary-sa-flag-400 | Ours:--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 original:--colors-primary-sa-flag-400 | Ours:--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 original:--background-primary-400 | Ours:--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 original:--colors-primary-sa-flag-400 | Ours:--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 original:--colors-primary-sa-flag-300 | Ours:--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 original:--colors-primary-sa-flag-300 | Ours:--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 original:--colors-primary-sa-flag-300 | Ours:--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 original:--colors-primary-sa-flag-300 | Ours:--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 original:--colors-primary-sa-flag-400 | Ours:--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 original:--colors-primary-sa-flag-400 | Ours:--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 original:--colors-primary-sa-flag-400 | Ours:--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 original:--colors-primary-sa-flag-400 | Ours:--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 original:--colors-red-200 | Ours:--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 original:--colors-red-200 | Ours:--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 original:--colors-red-300 | Ours:--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 original:--colors-red-300 | Ours:--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 original:--colors-red-400 | Ours:--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 original:--colors-red-400 | Ours:--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 original:--colors-red-50 | Ours:--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 original:--colors-red-50 | Ours:--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 original:--colors-red-50 | Ours:--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 original:--colors-red-100 | Ours:--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 original:--colors-red-200 | Ours:#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 original:--colors-alpha-alpha-white-80 | Ours:--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 original:--colors-alpha-alpha-white-80 | Ours:--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 original:--colors-alpha-alpha-white-60 | Ours:--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 original:--colors-alpha-alpha-white-60 | Ours:--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 original:--colors-alpha-alpha-white-90 | Ours:--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 original:--colors-alpha-alpha-white-90 | Ours:--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 original:--colors-alpha-alpha-white-20 | Ours:--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 original:--colors-alpha-alpha-white-20 | Ours:--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 original:— | Ours:--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 original:— | Ours:--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 original:— | Ours:--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 original:— | Ours:--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 original:— | Ours:--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 original:— | Ours:--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 original:— | Ours:--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 original:— | Ours:--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 original:— | Ours:--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 original:— | Ours:--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 original:— | Ours:--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 original:— | Ours:--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 original:— | Ours:--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 original:— | Ours:--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 original:— | Ours:--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 original:Added from site CSS (.badge) | Ours:--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 original:Added from site CSS (.badge) | Ours:--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 original:Added from site CSS (.badge) | Ours:--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 original:Added from site CSS (.badge) | Ours:--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 original:Added from site CSS (.badge) | Ours:--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 original:Added from site CSS (.badge) | Ours:--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 original:Added from site CSS (.badge) | Ours:--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 original:Added from site CSS (.badge) | Ours:--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 original:Added from site CSS (.badge) | Ours:--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 original:Added from site CSS (.badge) | Ours:--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 original:Added from site CSS (.badge) | Ours:--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 original:Added from site CSS (.badge) | Ours:--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 original:Added from site CSS (.badge) | Ours:--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 original:Added from site CSS (.badge) | Ours:--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 original:Added from site CSS (.badge) | Ours:--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 original:Added from site CSS (.badge) | Ours:--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 original:Added from site CSS (.badge) | Ours:--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 original:Added from site CSS (.badge) | Ours:--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 original:Added from site CSS (.badge) | Ours:--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 original:Added from site CSS (.badge) | Ours:--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 original:Added from site CSS (.badge) | Ours:--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 original:Added from site CSS (.badge) | Ours:--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 original:Added from site CSS (.badge) | Ours:--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 original:Added from site CSS (.badge) | Ours:--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 original:Added from site CSS (.badge) | Ours:--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 original:Added from site CSS (.badge) | Ours:--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 original:Added from site CSS (.badge) | Ours:--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 original:Added from site CSS (.badge) | Ours:--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 original:Added from site CSS (.badge--on-color: white 30%) | Ours:--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 original:Added from site CSS (.badge) | Ours:--colors-alpha-alpha-white-90 | On-colour outlined border, white 90% as on the site. |
Tokens --featured-icon-brand-background (new) | DGA original:Added from site CSS (.featured-icon) | Ours:--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 original:Added from site CSS (.featured-icon) | Ours:--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 original:Added from site CSS (.featured-icon) | Ours:--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 original:Added from site CSS (.featured-icon) | Ours:--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 original:Added from site CSS (.featured-icon) | Ours:--colors-neutral-500 | Featured icon neutral hard fill (white icon): neutral-500. |
Tokens --featured-icon-neutral-background-light (new) | DGA original:Added from site CSS (.featured-icon) | Ours:--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 original:Added from site CSS (.featured-icon) | Ours:--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 original:Added from site CSS (.featured-icon) | Ours:--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 original:Added from site CSS (.featured-icon) | Ours:--colors-green-700 | Featured icon success hard fill (white icon): green-700. |
Tokens --featured-icon-success-background-light (new) | DGA original:Added from site CSS (.featured-icon) | Ours:--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 original:Added from site CSS (.featured-icon) | Ours:--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 original:Added from site CSS (.featured-icon) | Ours:--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 original:Added from site CSS (.featured-icon) | Ours:--colors-red-600 | Featured icon error hard fill (white icon): red-600. |
Tokens --featured-icon-error-background-light (new) | DGA original:Added from site CSS (.featured-icon) | Ours:--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 original:Added from site CSS (.featured-icon) | Ours:--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 original:Added from site CSS (.featured-icon) | Ours:--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 original:Added from site CSS (.featured-icon) | Ours:--colors-yellow-700 | Featured icon warning hard fill (white icon): yellow-700. |
Tokens --featured-icon-warning-background-light (new) | DGA original:Added from site CSS (.featured-icon) | Ours:--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 original:Added from site CSS (.featured-icon) | Ours:--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 original:Added from site CSS (.featured-icon) | Ours:--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 original:Added from site CSS (.featured-icon) | Ours:--colors-blue-600 | Featured icon info hard fill (white icon): blue-600. |
Tokens --featured-icon-info-background-light (new) | DGA original:Added from site CSS (.featured-icon) | Ours:--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 original:Added from site CSS (.featured-icon) | Ours:--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 original:Added from site CSS (.featured-icon) | Ours:--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 original:No fill token on the Figma Skeleton components | Ours:--colors-neutral-200 (light), --colors-neutral-700 (dark) | Placeholder fill: neutral-200, neutral-700 in dark mode. |
Dark theme --background-white (dark) | DGA original:--colors-neutral-950 | Ours:--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 original:--colors-neutral-900 | Ours:--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 original:--colors-primary-sa-flag-400 | Ours:--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 original:--text-secondary-paragraph | Ours:--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 original:--colors-neutral-400 | Ours:--colors-neutral-dark-700 | Border roles on the tinted ramp: border 800, border-strong 700, subtle 850. |
Dark theme --border-neutral-primary (dark) | DGA original:--colors-neutral-500 | Ours:--colors-neutral-dark-700 | Border roles on the tinted ramp: border 800, border-strong 700, subtle 850. |
Dark theme --border-neutral-secondary (dark) | DGA original:--colors-neutral-700 | Ours:--colors-neutral-dark-800 | Border roles on the tinted ramp: border 800, border-strong 700, subtle 850. |
Dark theme --border-neutral-tertiary (dark) | DGA original:--colors-neutral-800 | Ours:--colors-neutral-dark-850 | Border roles on the tinted ramp: border 800, border-strong 700, subtle 850. |
Dark theme --border-white (dark) | DGA original:--colors-base-black | Ours:--colors-neutral-dark-950 | Figma Dark uses pure black. The tinted 950. |
Dark theme --link-neutral (dark) | DGA original:--colors-neutral-200 | Ours:--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 original:--colors-neutral-400 | Ours:--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 original:--colors-neutral-500 | Ours:--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 original:--colors-neutral-300 | Ours:--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 original:--colors-alpha-alpha-600-primary-10 | Ours:--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 original:--colors-neutral-800 | Ours:#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 original:--colors-neutral-800 | Ours:#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 original:--colors-neutral-50 | Ours:--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 original:--colors-neutral-100 | Ours:--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 original:--colors-neutral-200 | Ours:--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 original:--colors-green-400 | Ours:--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 original:--colors-blue-400 | Ours:--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 original:--colors-yellow-400 | Ours:--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 original:--colors-red-400 | Ours:--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 original:--colors-blue-700 | Ours:--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 original:--colors-yellow-700 | Ours:--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 original:--colors-red-700 | Ours:--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 original:--colors-neutral-600 | Ours:--colors-neutral-dark-800 | Border roles on the tinted ramp: border 800, border-strong 700, subtle 850. |
Dark theme --border-background-neutral (dark) | DGA original:--colors-neutral-600 | Ours:--colors-neutral-dark-700 | Border roles on the tinted ramp: border 800, border-strong 700, subtle 850. |
Dark theme --border-primary-light (dark) | DGA original:--colors-green-200 | Ours:--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 original:--colors-base-white | Ours:--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 original:--colors-primary-sa-flag-400 | Ours:--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 original:--colors-neutral-950 | Ours:--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 original:--colors-neutral-400 | Ours:--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 original:--colors-base-white | Ours:--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 original:--text-primary-paragraph | Ours:--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 original:--text-default | Ours:--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 original:--text-secondary-paragraph | Ours:--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 original:--text-default | Ours:--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 original:--colors-neutral-800 | Ours:--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 original:--colors-neutral-700 | Ours:--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 original:--colors-neutral-600 | Ours:--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 original:--colors-neutral-700 | Ours:--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 original:--colors-neutral-800 | Ours:--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 original:--colors-primary-sa-flag-300 | Ours:--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 original:--colors-green-400 | Ours:--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 original:--colors-blue-400 | Ours:--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 original:--colors-yellow-400 | Ours:--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 original:--colors-red-400 | Ours:--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 original:--colors-neutral-400 | Ours:--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 original:--colors-neutral-800 | Ours:--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 original:--colors-green-200 | Ours:--colors-green-800 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --border-info-light (dark) | DGA original:--colors-blue-200 | Ours:--colors-blue-800 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --border-warning-light (dark) | DGA original:--colors-yellow-200 | Ours:--colors-yellow-800 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --border-error-light (dark) | DGA original:--colors-red-200 | Ours:--colors-red-800 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --background-sa-flag-50 (dark) | DGA original:--colors-neutral-800 | Ours:--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 original:--colors-neutral-950 | Ours:--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 original:--colors-neutral-800 | Ours:--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 original:--colors-neutral-600 | Ours:--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 original:--colors-neutral-700 | Ours:--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 original:--colors-neutral-950 | Ours:--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 original:--colors-neutral-400 | Ours:--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 original:--colors-base-black | Ours:--colors-neutral-dark-950 | Figma Dark uses pure black. The tinted 950. |
Dark theme --background-neutral-800 (dark) | DGA original:--colors-neutral-600 | Ours:--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 original:--colors-neutral-400 | Ours:--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 original:--colors-neutral-600 | Ours:--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 original:--colors-neutral-400 | Ours:--colors-neutral-dark-200 | Hover is lighter than checked, as in the other states. |
Dark theme --control-neutral-pressed (dark) | DGA original:--colors-neutral-400 | Ours:--colors-neutral-dark-400 | Pressed is dimmer than checked. |
Dark theme --control-neutral-focused (dark) | DGA original:--colors-neutral-600 | Ours:--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 original:--colors-neutral-600 | Ours:--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 original:--colors-neutral-900 | Ours:--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 original:--colors-neutral-200 | Ours:--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 original:--colors-neutral-500 | Ours:--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 original:--colors-neutral-500 | Ours:--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 original:--colors-neutral-600 | Ours:--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 original:--colors-neutral-950 | Ours:--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 original:--colors-neutral-700 | Ours:--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 original:--colors-neutral-200 | Ours:--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 original:--colors-neutral-800 | Ours:--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 original:--colors-neutral-600 | Ours:--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 original:--colors-neutral-800 | Ours:--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 original:#4d5761 | Ours:--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 original:--colors-neutral-500 | Ours:--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 original:--colors-neutral-200 | Ours:--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 original:--colors-neutral-25 | Ours:--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 original:--text-default | Ours:--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 original:--text-default | Ours:--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 original:--text-primary-paragraph | Ours:--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 original:--colors-neutral-900 | Ours:--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 original:--colors-neutral-600 | Ours:--colors-neutral-dark-800 | Border roles on the tinted ramp: border 800, border-strong 700, subtle 850. |
Dark theme --table-text-head (dark) | DGA original:--colors-neutral-300 | Ours:--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 original:--text-default | Ours:--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 original:--colors-neutral-900 | Ours:--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 original:--colors-neutral-600 | Ours:--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 original:--colors-neutral-600 | Ours:--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 original:--colors-base-white | Ours:--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 original:--text-default | Ours:--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 original:--text-primary-paragraph | Ours:--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 original:--text-secondary-paragraph | Ours:--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 original:--colors-neutral-700 | Ours:--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 original:--colors-neutral-700 | Ours:--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 original:--colors-neutral-700 | Ours:--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 original:--colors-neutral-900 | Ours:--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 original:--colors-neutral-900 | Ours:--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 original:--colors-primary-sa-flag-950 | Ours:--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 original:--colors-neutral-900 | Ours:#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 original:--colors-neutral-900 | Ours:#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 original:--colors-neutral-900 | Ours:--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 original:--colors-neutral-800 | Ours:--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 original:--colors-neutral-600 | Ours:--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 original:--colors-neutral-800 | Ours:--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 original:--colors-green-700 | Ours:#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 original:--alpha-success-10 | Ours:#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 original:--colors-blue-600 | Ours:#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 original:--alpha-info-10 | Ours:#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 original:--colors-yellow-700 | Ours:#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 original:--alpha-warning-10 | Ours:#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 original:--colors-red-600 | Ours:#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 original:--alpha-error-10 | Ours:#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 original:--colors-green-300 | Ours:--colors-green-700 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --tag-border-success-light (dark) | DGA original:--colors-green-200 | Ours:--colors-green-800 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --tag-border-info (dark) | DGA original:--colors-blue-300 | Ours:--colors-blue-700 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --tag-border-info-light (dark) | DGA original:--colors-blue-200 | Ours:--colors-blue-800 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --tag-border-warning (dark) | DGA original:--colors-yellow-300 | Ours:--colors-yellow-700 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --tag-border-warning-light (dark) | DGA original:--colors-yellow-200 | Ours:--colors-yellow-800 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --tag-border-error (dark) | DGA original:--colors-red-300 | Ours:--colors-red-700 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --tag-border-error-light (dark) | DGA original:--colors-red-200 | Ours:--colors-red-800 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --tag-border-neutral (dark) | DGA original:--colors-neutral-300 | Ours:--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 original:--colors-neutral-800 | Ours:--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 original:--colors-green-400 | Ours:--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 original:--colors-blue-400 | Ours:--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 original:--colors-yellow-400 | Ours:--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 original:--colors-red-400 | Ours:--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 original:--colors-green-400 | Ours:--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 original:--colors-blue-400 | Ours:--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 original:--colors-yellow-400 | Ours:--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 original:--colors-red-400 | Ours:--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 original:--colors-neutral-100 | Ours:--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 original:--colors-neutral-100 | Ours:--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 original:--colors-neutral-700 | Ours:--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 original:--colors-primary-sa-flag-400 | Ours:--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 original:--colors-neutral-500 | Ours:--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 original:--colors-neutral-700 | Ours:--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 original:--colors-neutral-700 | Ours:--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 original:--colors-neutral-600 | Ours:--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 original:--colors-neutral-800 | Ours:--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 original:--colors-neutral-800 | Ours:--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 original:--colors-neutral-800 | Ours:--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 original:--colors-neutral-700 | Ours:--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 original:--colors-neutral-900 | Ours:--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 original:--colors-neutral-700 | Ours:--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 original:--colors-neutral-400 | Ours:--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 original:--colors-neutral-500 | Ours:--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 original:--colors-neutral-200 | Ours:--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 original:--colors-neutral-300 | Ours:--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 original:#166a451a | Ours:#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 original:--colors-neutral-400 | Ours:--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 original:#ffffff | Ours:--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 original:#166a4533 | Ours:#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 original:#b547081a | Ours:#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 original:#b5470833 | Ours:#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 original:#b423181a | Ours:#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 original:#b4231833 | Ours:#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 original:#175cd31a | Ours:#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 original:#175cd333 | Ours:#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 original:#0676471a | Ours:#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 original:#06764733 | Ours:#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 original:--colors-neutral-600 | Ours:--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 original:--colors-neutral-300 | Ours:--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 original:--colors-neutral-500 | Ours:--colors-neutral-dark-700 | Border roles on the tinted ramp: border 800, border-strong 700, subtle 850. |
Dark theme --unselected-tab-icon (dark) | DGA original:--colors-neutral-100 | Ours:--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 original:--colors-primary-sa-flag-50 | Ours:--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 original:--colors-neutral-100 | Ours:--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 original:--colors-primary-sa-flag-50 | Ours:--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 original:--colors-neutral-100 | Ours:--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 original:#ffffff | Ours:--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 original:--colors-neutral-800 | Ours:--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 original:--colors-neutral-800 | Ours:--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 original:--colors-base-black | Ours:--colors-neutral-dark-950 | Figma Dark uses pure black. The tinted 950. |
Dark theme --chip-background-neutral-hovered (dark) | DGA original:--colors-neutral-600 | Ours:--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 original:--colors-neutral-700 | Ours:--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 original:--colors-neutral-700 | Ours:--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 original:--colors-neutral-900 | Ours:--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 original:--colors-secondary-gold-600-primary | Ours:--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 original:--colors-secondary-gold-600-primary | Ours:--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 original:--colors-tertiary-lavender-500-primary | Ours:--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 original:--colors-secondary-gold-600-primary | Ours:--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 original:--colors-tertiary-lavender-500-primary | Ours:--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 original:--colors-neutral-800 | Ours:--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 original:--colors-neutral-700 | Ours:--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 original:--colors-neutral-200 | Ours:--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 original:--colors-neutral-400 | Ours:--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 original:--colors-primary-sa-flag-950 | Ours:#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 original:--colors-primary-sa-flag-200 | Ours:--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 original:--colors-primary-sa-flag-400 | Ours:--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 original:--colors-red-950 | Ours:#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 original:--colors-red-200 | Ours:--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 original:--colors-red-400 | Ours:--colors-red-700 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --badge-warning-background (dark) | DGA original:--colors-yellow-950 | Ours:#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 original:--colors-yellow-200 | Ours:--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 original:--colors-yellow-400 | Ours:--colors-yellow-700 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --badge-info-background (dark) | DGA original:--colors-blue-950 | Ours:#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 original:--colors-blue-200 | Ours:--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 original:--colors-blue-400 | Ours:--colors-blue-700 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --badge-purple-background (dark) | DGA original:--colors-tertiary-lavender-950 | Ours:#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 original:--colors-tertiary-lavender-200 | Ours:--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 original:--colors-tertiary-lavender-400 | Ours:--colors-tertiary-lavender-700 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --badge-orange-background (dark) | DGA original:--colors-orange-950 | Ours:#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 original:--colors-orange-200 | Ours:--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 original:--colors-orange-400 | Ours:--colors-orange-700 | Hue 700 (outlined) or 800 (soft and alert), subtle on the dark surface. |
Dark theme --featured-icon-brand-background (dark) | DGA original:--colors-primary-sa-flag-600-primary | Ours:#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 original:--colors-primary-sa-flag-950 | Ours:#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 original:--colors-neutral-500 | Ours:--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 original:--colors-neutral-800 | Ours:--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 original:--colors-neutral-300 | Ours:--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 original:--colors-neutral-700 | Ours:--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 original:--colors-green-700 | Ours:#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 original:--colors-green-950 | Ours:#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 original:--colors-red-600 | Ours:#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 original:--colors-red-950 | Ours:#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 original:--colors-yellow-700 | Ours:#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 original:--colors-yellow-950 | Ours:#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 original:--colors-blue-600 | Ours:#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 original:--colors-blue-950 | Ours:#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 original:--colors-neutral-700 | Ours:--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 original:--muted: --background-neutral-100 with --muted-foreground: --text-secondary-paragraph | Ours:--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 original:Figma effect styles, same in both modes | Ours: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 original:Cool blue-grey ramp (colors-neutral-*), reused for dark | Ours: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 original:Same value as light mode | Ours: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 original:Font Wieght/font-weight-* | Ours: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 original:Not defined. Figma has Desktop, Tablet and Mobile modes with no pixel widths. | Ours: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 original:tokens.css (extraction guess): Desktop default, Tablet at max-width 1024px, Mobile at max-width 640px | Ours: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 original:Mobile mode: text-md 12px, text-sm 10px, text-xs 8px; Tablet: text-md 14px | Ours: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 original:Token line heights 1.4 to 1.6 and -2% letter spacing on display sizes, for every language | Ours: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 original:design.dga.gov.sa compiled CSS values | Ours: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 original:Legacy site-CSS radius set (2, 16, 20, 24px) | Ours: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 original:Site CSS shadow values | Ours: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 original:[data-theme="dark"] | Ours:[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 original:shadcn derives radius-sm…4xl from --radius with calc() | Ours: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 original:--spacing-N in px (spacing-N = N × 4px) | Ours: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 original:Not audited | Ours: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 original:Flips to white in dark mode | Ours: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 original:No usage rule (80% and 70% white) | Ours: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 original:Not in the DGA Figma file. Defined only in the design.dga.gov.sa CSS (.featured-icon). | Ours: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 original:Hard warning: white on warning-400. Hard success: white on brand-600 (the same as brand). | Ours: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 original:Five composite Skeleton Components (Image Button and Text, Icon and List, Image Content and Button, Chart and Content, Image Profile Content and Button) | Ours: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 original:Static | Ours:Pulses (opacity); static with reduced motion | A gentle pulse shows that content is loading. prefers-reduced-motion turns it off. |
Components Divider: colours | DGA original:Neutral, Primary, Alpha-white and White, with no colour tokens in the export | Ours: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 original:Initials use Text xs/Semibold on every size in the export | Ours: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 original:Text 2xs/SemiBold on every size in the exported variant table | Ours: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 original:Optional trailing icon | Ours: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 original:Ghost: neutral label with no fill | Ours: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 original:Not in the DGA Figma file. Defined only in the design.dga.gov.sa CSS (.badge). | Ours: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 original:.badge--pink and .badge--pink-outlined | Ours:Dropped | DGA has no pink palette, in Figma or in the token set. |
Components Badge: on-colour outlined label | DGA original:White 90% text | Ours: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 original:Focused: border-black stroke (border-white on colour). Disabled: a separate variant. | Ours: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 original:Optional swap icon | Ours: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 original:Figma defines only the Default state for destructive buttons (Primary, Secondary-Solid, Secondary-Outline, Subtle, Transparent). | Ours: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 original:No destructive variant of Primary-Neutral | Ours: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 original:Focused is a separate Figma state with a 2px border-black (border-white on colour) stroke inside the button. | Ours: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 original:Hovered, pressed and selected change the label to green-400/300 | Ours: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 original:A separate Figma variant | Ours: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 original:Not in Figma | Ours: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. |
How contrast is checked
The token build fails if any of these pairs is below WCAG 2.1 AA, in light or dark mode:
- Text and link colours on
background-white,background-bodyandbackground-card(4.5:1). - Icons and link icons on the same surfaces (3:1, non-text).
text-oncolor-primaryandicon-oncoloron every solid fill (primary, status, nav header, button fills).- Status text on its own tinted background (
text-successonbackground-success-50, and so on).
Disabled states are exempt (WCAG 1.4.3). Component-level pairs are checked as each component is added.
Site CSS vs Figma
tokens/TOKEN_CONFLICTS.md lists the 39 material and 87 rounding-only differences between Figma and the design.dga.gov.sa CSS. Figma is used in every case.