From 6eaf2457b0ac40fcc2014de0298b1714fb56fa7a Mon Sep 17 00:00:00 2001
From: Rozerin <84851545+Rozerinay@users.noreply.github.com>
Date: Thu, 11 Dec 2025 13:37:12 +0100
Subject: [PATCH 1/4] style: change ma color tokens

---
 packages/ma-design-tokens/src/tokens.json | 464 +++++++++++-----------
 1 file changed, 232 insertions(+), 232 deletions(-)

diff --git a/packages/ma-design-tokens/src/tokens.json b/packages/ma-design-tokens/src/tokens.json
index 153577761..790214245 100644
--- a/packages/ma-design-tokens/src/tokens.json
+++ b/packages/ma-design-tokens/src/tokens.json
@@ -608,124 +608,124 @@
         }
       },
       "color": {
+        "transparent": {
+          "$type": "color",
+          "$value": "transparent"
+        },
         "default": {
           "bg-document": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FCFCFC"
           },
           "bg-subtle": {
             "$type": "color",
-            "$value": "{ma.color.neutral.1}"
+            "$value": "#F6F6F7"
           },
           "bg-default": {
             "$type": "color",
-            "$value": "{ma.color.neutral.2}"
+            "$value": "#F0F1F1"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "{ma.color.neutral.3}"
+            "$value": "#EAEBEC"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "{ma.color.neutral.4}"
+            "$value": "#E5E5E6"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "{ma.color.neutral.4}"
+            "$value": "#C2C4C6"
           },
           "border-default": {
             "$type": "color",
-            "$value": "{ma.color.neutral.8}"
+            "$value": "#575A5E"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "{ma.color.neutral.9}"
+            "$value": "#494B4F"
           },
           "border-active": {
             "$type": "color",
-            "$value": "{ma.color.neutral.10}"
+            "$value": "#3C3E41"
           },
           "color-default": {
             "$type": "color",
-            "$value": "{ma.color.neutral.9}"
+            "$value": "#575A5E"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "{ma.color.neutral.10}"
+            "$value": "#494B4F"
           },
           "color-active": {
             "$type": "color",
-            "$value": "{ma.color.neutral.11}"
+            "$value": "#3C3E41"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "{ma.color.neutral.8}"
+            "$value": "#616368"
           },
           "color-document": {
             "$type": "color",
-            "$value": "{ma.color.neutral.12}"
+            "$value": "#1B1C1D"
           }
         },
-        "transparent": {
-          "$type": "color",
-          "$value": "transparent"
-        },
         "accent-1": {
           "bg-document": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FDFCFE"
           },
           "bg-subtle": {
             "$type": "color",
-            "$value": "{ma.color.paars.1}"
+            "$value": "#FAF5FB"
           },
           "bg-default": {
             "$type": "color",
-            "$value": "{ma.color.paars.2}"
+            "$value": "#F6EEF9"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "{ma.color.paars.3}"
+            "$value": "#F3E7F7"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "{ma.color.paars.4}"
+            "$value": "#EFE0F4"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "{ma.color.paars.4}"
+            "$value": "#DBB8E6"
           },
           "border-default": {
             "$type": "color",
-            "$value": "{ma.color.paars.8}"
+            "$value": "#803D95"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "{ma.color.paars.9}"
+            "$value": "#6C337E"
           },
           "border-active": {
             "$type": "color",
-            "$value": "{ma.color.paars.10}"
+            "$value": "#592A67"
           },
           "color-default": {
             "$type": "color",
-            "$value": "{ma.color.paars.9}"
+            "$value": "#803D95"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "{ma.color.paars.10}"
+            "$value": "#6C337E"
           },
           "color-active": {
             "$type": "color",
-            "$value": "{ma.color.paars.11}"
+            "$value": "#592A67"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "{ma.color.paars.9}"
+            "$value": "#8E43A5"
           },
           "color-document": {
             "$type": "color",
-            "$value": "{ma.color.paars.12}"
+            "$value": "#28132F"
           }
         },
         "accent-2": {
@@ -905,59 +905,59 @@
         "action-2": {
           "bg-document": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FBFCFE"
           },
           "bg-subtle": {
             "$type": "color",
-            "$value": "{ma.color.blauw.1}"
+            "$value": "#F2F7FC"
           },
           "bg-default": {
             "$type": "color",
-            "$value": "{ma.color.blauw.2}"
+            "$value": "#E9F2F9"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "{ma.color.blauw.3}"
+            "$value": "#E1EDF7"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "{ma.color.blauw.4}"
+            "$value": "#D8E7F5"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "{ma.color.blauw.4}"
+            "$value": "#A4C8E7"
           },
           "border-default": {
             "$type": "color",
-            "$value": "{ma.color.blauw.8}"
+            "$value": "#255D8D"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "{ma.color.blauw.9}"
+            "$value": "#1F4E77"
           },
           "border-active": {
             "$type": "color",
-            "$value": "{ma.color.blauw.10}"
+            "$value": "#1A4061"
           },
           "color-default": {
             "$type": "color",
-            "$value": "{ma.color.blauw.9}"
+            "$value": "#255D8D"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "{ma.color.blauw.10}"
+            "$value": "#1F4E77"
           },
           "color-active": {
             "$type": "color",
-            "$value": "{ma.color.blauw.11}"
+            "$value": "#1A4061"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "{ma.color.blauw.9}"
+            "$value": "#29679C"
           },
           "color-document": {
             "$type": "color",
-            "$value": "{ma.color.blauw.12}"
+            "$value": "#0B1D2C"
           }
         },
         "disabled": {
@@ -1021,291 +1021,291 @@
         "info": {
           "bg-document": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FBFCFE"
           },
           "bg-subtle": {
             "$type": "color",
-            "$value": "{ma.color.blauw.1}"
+            "$value": "#F2F7FC"
           },
           "bg-default": {
             "$type": "color",
-            "$value": "{ma.color.blauw.2}"
+            "$value": "#E9F2F9"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "{ma.color.blauw.3}"
+            "$value": "#E1EDF7"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "{ma.color.blauw.4}"
+            "$value": "#D8E7F5"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "{ma.color.blauw.4}"
+            "$value": "#A4C8E7"
           },
           "border-default": {
             "$type": "color",
-            "$value": "{ma.color.blauw.8}"
+            "$value": "#255D8D"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "{ma.color.blauw.9}"
+            "$value": "#1F4E77"
           },
           "border-active": {
             "$type": "color",
-            "$value": "{ma.color.blauw.10}"
+            "$value": "#1A4061"
           },
           "color-default": {
             "$type": "color",
-            "$value": "{ma.color.blauw.9}"
+            "$value": "#255D8D"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "{ma.color.blauw.10}"
+            "$value": "#1F4E77"
           },
           "color-active": {
             "$type": "color",
-            "$value": "{ma.color.blauw.11}"
+            "$value": "#1A4061"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "{ma.color.blauw.9}"
+            "$value": "#29679C"
           },
           "color-document": {
             "$type": "color",
-            "$value": "{ma.color.blauw.12}"
+            "$value": "#0B1D2C"
           }
         },
         "negative": {
           "bg-document": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FEFCFC"
           },
           "bg-subtle": {
             "$type": "color",
-            "$value": "{ma.color.roze.1}"
+            "$value": "#FCF5F5"
           },
           "bg-default": {
             "$type": "color",
-            "$value": "{ma.color.roze.2}"
+            "$value": "#FAEEEF"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "{ma.color.roze.3}"
+            "$value": "#F8E7E9"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "{ma.color.roze.4}"
+            "$value": "#F6E0E2"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "{ma.color.roze.4}"
+            "$value": "#EAB7BC"
           },
           "border-default": {
             "$type": "color",
-            "$value": "{ma.color.roze.8}"
+            "$value": "#A1313C"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "{ma.color.roze.9}"
+            "$value": "#882932"
           },
           "border-active": {
             "$type": "color",
-            "$value": "{ma.color.roze.10}"
+            "$value": "#702229"
           },
           "color-default": {
             "$type": "color",
-            "$value": "{ma.color.roze.9}"
+            "$value": "#A1313C"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "{ma.color.roze.10}"
+            "$value": "#882932"
           },
           "color-active": {
             "$type": "color",
-            "$value": "{ma.color.roze.11}"
+            "$value": "#702229"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "{ma.color.roze.9}"
+            "$value": "#B23642"
           },
           "color-document": {
             "$type": "color",
-            "$value": "{ma.color.roze.12}"
+            "$value": "#341013"
           }
         },
         "positive": {
           "bg-document": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FAFDFA"
           },
           "bg-subtle": {
             "$type": "color",
-            "$value": "{ma.color.groen.1}"
+            "$value": "#F1F9EF"
           },
           "bg-default": {
             "$type": "color",
-            "$value": "{ma.color.groen.2}"
+            "$value": "#E7F4E5"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "{ma.color.groen.3}"
+            "$value": "#DDF0DA"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "{ma.color.groen.4}"
+            "$value": "#D4ECD0"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "{ma.color.groen.4}"
+            "$value": "#99D290"
           },
           "border-default": {
             "$type": "color",
-            "$value": "{ma.color.groen.8}"
+            "$value": "#32652A"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "{ma.color.groen.9}"
+            "$value": "#2A5523"
           },
           "border-active": {
             "$type": "color",
-            "$value": "{ma.color.groen.10}"
+            "$value": "#23451D"
           },
           "color-default": {
             "$type": "color",
-            "$value": "{ma.color.groen.9}"
+            "$value": "#32652A"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "{ma.color.groen.10}"
+            "$value": "#2A5523"
           },
           "color-active": {
             "$type": "color",
-            "$value": "{ma.color.groen.11}"
+            "$value": "#23451D"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "{ma.color.groen.9}"
+            "$value": "#376F2E"
           },
           "color-document": {
             "$type": "color",
-            "$value": "{ma.color.groen.12}"
+            "$value": "#101F0D"
           }
         },
         "warning": {
           "bg-document": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFCF9"
           },
           "bg-subtle": {
             "$type": "color",
-            "$value": "{ma.color.oranje.1}"
+            "$value": "#FFF5ED"
           },
           "bg-default": {
             "$type": "color",
-            "$value": "{ma.color.oranje.2}"
+            "$value": "#FFEEE0"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "{ma.color.oranje.3}"
+            "$value": "#FFE7D4"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "{ma.color.oranje.4}"
+            "$value": "#FFE0C7"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "{ma.color.oranje.4}"
+            "$value": "#FCB47C"
           },
           "border-default": {
             "$type": "color",
-            "$value": "{ma.color.oranje.8}"
+            "$value": "#834C1A"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "{ma.color.oranje.9}"
+            "$value": "#6E4018"
           },
           "border-active": {
             "$type": "color",
-            "$value": "{ma.color.oranje.10}"
+            "$value": "#593516"
           },
           "color-default": {
             "$type": "color",
-            "$value": "{ma.color.oranje.9}"
+            "$value": "#834C1A"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "{ma.color.oranje.10}"
+            "$value": "#6E4018"
           },
           "color-active": {
             "$type": "color",
-            "$value": "{ma.color.oranje.11}"
+            "$value": "#593516"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "{ma.color.oranje.9}"
+            "$value": "#92541B"
           },
           "color-document": {
             "$type": "color",
-            "$value": "{ma.color.oranje.12}"
+            "$value": "#26190C"
           }
         },
         "highlight": {
           "bg-document": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFCF6"
           },
           "bg-subtle": {
             "$type": "color",
-            "$value": "{ma.color.geel.1}"
+            "$value": "#FFF5E4"
           },
           "bg-default": {
             "$type": "color",
-            "$value": "{ma.color.geel.2}"
+            "$value": "#FFEFD1"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "{ma.color.geel.3}"
+            "$value": "#FEE9BE"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "{ma.color.geel.4}"
+            "$value": "#FCE3AC"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "{ma.color.geel.4}"
+            "$value": "#EABF3C"
           },
           "border-default": {
             "$type": "color",
-            "$value": "{ma.color.geel.9}"
+            "$value": "#6A5723"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "{ma.color.geel.10}"
+            "$value": "#5A4A1F"
           },
           "border-active": {
             "$type": "color",
-            "$value": "{ma.color.geel.11}"
+            "$value": "#493C1B"
           },
           "color-default": {
             "$type": "color",
-            "$value": "{ma.color.geel.10}"
+            "$value": "#6A5723"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "{ma.color.geel.11}"
+            "$value": "#5A4A1F"
           },
           "color-active": {
             "$type": "color",
-            "$value": "{ma.color.geel.12}"
+            "$value": "#493C1B"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "{ma.color.geel.10}"
+            "$value": "#766125"
           },
           "color-document": {
             "$type": "color",
-            "$value": "{ma.color.geel.12}"
+            "$value": "#201B0F"
           }
         },
         "selected": {
@@ -1369,117 +1369,117 @@
         "default-inverse": {
           "bg-document": {
             "$type": "color",
-            "$value": "{ma.color.neutral.11}"
+            "$value": "#232425"
           },
           "bg-subtle": {
             "$type": "color",
-            "$value": "{ma.color.neutral.12}"
+            "$value": "#1B1C1D"
           },
           "bg-default": {
             "$type": "color",
-            "$value": "{ma.color.neutral.9}"
+            "$value": "#575A5E"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "{ma.color.neutral.10}"
+            "$value": "#494B4F"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "{ma.color.neutral.11}"
+            "$value": "#3C3E41"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "{ma.color.neutral.8}"
+            "$value": "#45474A"
           },
           "border-default": {
             "$type": "color",
-            "$value": "{ma.color.neutral.4}"
+            "$value": "#FFFFFF"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "{ma.color.neutral.3}"
+            "$value": "#FFFFFF"
           },
           "border-active": {
             "$type": "color",
-            "$value": "{ma.color.neutral.2}"
+            "$value": "#FFFFFF"
           },
           "color-default": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           },
           "color-active": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "{ma.color.neutral.4}"
+            "$value": "#C2C4C6"
           },
           "color-document": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           }
         },
         "accent-1-inverse": {
           "bg-document": {
             "$type": "color",
-            "$value": "{ma.color.paars.11}"
+            "$value": "#34183C"
           },
           "bg-subtle": {
             "$type": "color",
-            "$value": "{ma.color.paars.12}"
+            "$value": "#28132F"
           },
           "bg-default": {
             "$type": "color",
-            "$value": "{ma.color.paars.9}"
+            "$value": "#803D95"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "{ma.color.paars.10}"
+            "$value": "#6C337E"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "{ma.color.paars.11}"
+            "$value": "#592A67"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "{ma.color.paars.8}"
+            "$value": "#663076"
           },
           "border-default": {
             "$type": "color",
-            "$value": "{ma.color.paars.4}"
+            "$value": "#FFFFFF"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "{ma.color.paars.3}"
+            "$value": "#FFFFFF"
           },
           "border-active": {
             "$type": "color",
-            "$value": "{ma.color.paars.2}"
+            "$value": "#FFFFFF"
           },
           "color-default": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           },
           "color-active": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "{ma.color.paars.4}"
+            "$value": "#DBB8E6"
           },
           "color-document": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           }
         },
         "accent-2-inverse": {
@@ -1659,59 +1659,59 @@
         "action-2-inverse": {
           "bg-document": {
             "$type": "color",
-            "$value": "{ma.color.blauw.11}"
+            "$value": "#0F2539"
           },
           "bg-subtle": {
             "$type": "color",
-            "$value": "{ma.color.blauw.12}"
+            "$value": "#0B1D2C"
           },
           "bg-default": {
             "$type": "color",
-            "$value": "{ma.color.blauw.9}"
+            "$value": "#255D8D"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "{ma.color.blauw.10}"
+            "$value": "#1F4E77"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "{ma.color.blauw.11}"
+            "$value": "#1A4061"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "{ma.color.blauw.8}"
+            "$value": "#1D496F"
           },
           "border-default": {
             "$type": "color",
-            "$value": "{ma.color.blauw.4}"
+            "$value": "#FFFFFF"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "{ma.color.blauw.3}"
+            "$value": "#FFFFFF"
           },
           "border-active": {
             "$type": "color",
-            "$value": "{ma.color.blauw.2}"
+            "$value": "#FFFFFF"
           },
           "color-default": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           },
           "color-active": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "{ma.color.blauw.4}"
+            "$value": "#A4C8E7"
           },
           "color-document": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           }
         },
         "disabled-inverse": {
@@ -1775,291 +1775,291 @@
         "negative-inverse": {
           "bg-document": {
             "$type": "color",
-            "$value": "{ma.color.roze.11}"
+            "$value": "#421418"
           },
           "bg-subtle": {
             "$type": "color",
-            "$value": "{ma.color.roze.12}"
+            "$value": "#341013"
           },
           "bg-default": {
             "$type": "color",
-            "$value": "{ma.color.roze.9}"
+            "$value": "#A1313C"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "{ma.color.roze.10}"
+            "$value": "#882932"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "{ma.color.roze.11}"
+            "$value": "#702229"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "{ma.color.roze.8}"
+            "$value": "#80272F"
           },
           "border-default": {
             "$type": "color",
-            "$value": "{ma.color.roze.4}"
+            "$value": "#FFFFFF"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "{ma.color.roze.3}"
+            "$value": "#FFFFFF"
           },
           "border-active": {
             "$type": "color",
-            "$value": "{ma.color.roze.2}"
+            "$value": "#FFFFFF"
           },
           "color-default": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           },
           "color-active": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "{ma.color.roze.4}"
+            "$value": "#EAB7BC"
           },
           "color-document": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           }
         },
         "info-inverse": {
           "bg-document": {
             "$type": "color",
-            "$value": "{ma.color.blauw.11}"
+            "$value": "#0F2539"
           },
           "bg-subtle": {
             "$type": "color",
-            "$value": "{ma.color.blauw.12}"
+            "$value": "#0B1D2C"
           },
           "bg-default": {
             "$type": "color",
-            "$value": "{ma.color.blauw.9}"
+            "$value": "#255D8D"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "{ma.color.blauw.10}"
+            "$value": "#1F4E77"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "{ma.color.blauw.11}"
+            "$value": "#1A4061"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "{ma.color.blauw.8}"
+            "$value": "#1D496F"
           },
           "border-default": {
             "$type": "color",
-            "$value": "{ma.color.blauw.4}"
+            "$value": "#FFFFFF"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "{ma.color.blauw.3}"
+            "$value": "#FFFFFF"
           },
           "border-active": {
             "$type": "color",
-            "$value": "{ma.color.blauw.2}"
+            "$value": "#FFFFFF"
           },
           "color-default": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           },
           "color-active": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "{ma.color.blauw.4}"
+            "$value": "#A4C8E7"
           },
           "color-document": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           }
         },
         "positive-inverse": {
           "bg-document": {
             "$type": "color",
-            "$value": "{ma.color.groen.11}"
+            "$value": "#142811"
           },
           "bg-subtle": {
             "$type": "color",
-            "$value": "{ma.color.groen.12}"
+            "$value": "#101F0D"
           },
           "bg-default": {
             "$type": "color",
-            "$value": "{ma.color.groen.9}"
+            "$value": "#32652A"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "{ma.color.groen.10}"
+            "$value": "#2A5523"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "{ma.color.groen.11}"
+            "$value": "#23451D"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "{ma.color.groen.8}"
+            "$value": "#285021"
           },
           "border-default": {
             "$type": "color",
-            "$value": "{ma.color.groen.4}"
+            "$value": "#FFFFFF"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "{ma.color.groen.3}"
+            "$value": "#FFFFFF"
           },
           "border-active": {
             "$type": "color",
-            "$value": "{ma.color.groen.2}"
+            "$value": "#FFFFFF"
           },
           "color-default": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           },
           "color-active": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "{ma.color.groen.4}"
+            "$value": "#99D290"
           },
           "color-document": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           }
         },
         "warning-inverse": {
           "bg-document": {
             "$type": "color",
-            "$value": "{ma.color.oranje.11}"
+            "$value": "#321F10"
           },
           "bg-subtle": {
             "$type": "color",
-            "$value": "{ma.color.oranje.12}"
+            "$value": "#26190C"
           },
           "bg-default": {
             "$type": "color",
-            "$value": "{ma.color.oranje.9}"
+            "$value": "#834C1A"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "{ma.color.oranje.10}"
+            "$value": "#6E4018"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "{ma.color.oranje.11}"
+            "$value": "#593516"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "{ma.color.oranje.8}"
+            "$value": "#673D17"
           },
           "border-default": {
             "$type": "color",
-            "$value": "{ma.color.oranje.4}"
+            "$value": "#FFFFFF"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "{ma.color.oranje.3}"
+            "$value": "#FFFFFF"
           },
           "border-active": {
             "$type": "color",
-            "$value": "{ma.color.oranje.2}"
+            "$value": "#FFFFFF"
           },
           "color-default": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           },
           "color-active": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "{ma.color.oranje.4}"
+            "$value": "#FCB47C"
           },
           "color-document": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           }
         },
         "highlight-inverse": {
           "bg-document": {
             "$type": "color",
-            "$value": "{ma.color.geel.11}"
+            "$value": "#2A2313"
           },
           "bg-subtle": {
             "$type": "color",
-            "$value": "{ma.color.geel.12}"
+            "$value": "#201B0F"
           },
           "bg-default": {
             "$type": "color",
-            "$value": "{ma.color.geel.10}"
+            "$value": "#6A5723"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "{ma.color.geel.11}"
+            "$value": "#5A4A1F"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "{ma.color.geel.11}"
+            "$value": "#493C1B"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "{ma.color.geel.8}"
+            "$value": "#54451E"
           },
           "border-default": {
             "$type": "color",
-            "$value": "{ma.color.geel.4}"
+            "$value": "#FFFFFF"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "{ma.color.geel.3}"
+            "$value": "#FFFFFF"
           },
           "border-active": {
             "$type": "color",
-            "$value": "{ma.color.geel.2}"
+            "$value": "#FFFFFF"
           },
           "color-default": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           },
           "color-active": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "{ma.color.geel.4}"
+            "$value": "#EABF3C"
           },
           "color-document": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "#FFFFFF"
           }
         },
         "selected-inverse": {
@@ -3726,20 +3726,20 @@
       "focus": {
         "background-color": {
           "$type": "color",
-          "$value": "{ma.color.signal.focus}"
+          "$value": "#A6FF00"
         },
         "color": {
           "$type": "color",
-          "$value": "{ma.color.black}"
+          "$value": "{basis.color.default.color-document}"
         },
         "outline-color": {
           "$type": "color",
-          "$value": "{ma.color.black}"
+          "$value": "{basis.color.default.color-document}"
         },
         "inverse": {
           "outline-color": {
             "$type": "color",
-            "$value": "{ma.color.white}"
+            "$value": "{basis.color.default-inverse.color-document}"
           }
         },
         "outline-offset": {

From 94877a058219664193b87717b4d345d9128eccf1 Mon Sep 17 00:00:00 2001
From: Rozerin <84851545+Rozerinay@users.noreply.github.com>
Date: Thu, 11 Dec 2025 14:24:43 +0100
Subject: [PATCH 2/4] feat: add dark-mode colors

---
 packages/ma-design-tokens/src/tokens.json | 452 +++++++++++-----------
 1 file changed, 226 insertions(+), 226 deletions(-)

diff --git a/packages/ma-design-tokens/src/tokens.json b/packages/ma-design-tokens/src/tokens.json
index 790214245..296482670 100644
--- a/packages/ma-design-tokens/src/tokens.json
+++ b/packages/ma-design-tokens/src/tokens.json
@@ -12863,7 +12863,7 @@
         "default": {
           "bg-document": {
             "$type": "color",
-            "$value": "#111111"
+            "$value": "#101112"
           },
           "bg-subtle": {
             "$type": "color",
@@ -12871,109 +12871,109 @@
           },
           "bg-default": {
             "$type": "color",
-            "$value": "#1D1D1D"
+            "$value": "#1D1E1F"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "#262626"
+            "$value": "#252628"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "#2E2E2E"
+            "$value": "#2D2E30"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "#3E3E3E"
+            "$value": "#3C3E41"
           },
           "border-default": {
             "$type": "color",
-            "$value": "#686868"
+            "$value": "#A9ABAE"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "#727272"
+            "$value": "#BABBBE"
           },
           "border-active": {
             "$type": "color",
-            "$value": "#7C7C7C"
+            "$value": "#CBCCCE"
           },
           "color-default": {
             "$type": "color",
-            "$value": "#ABABAB"
+            "$value": "#A9ABAE"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "#BBBBBB"
+            "$value": "#BABBBE"
           },
           "color-active": {
             "$type": "color",
-            "$value": "#CCCCCC"
+            "$value": "#CBCCCE"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "#8B8B8B"
+            "$value": "#898C8F"
           },
           "color-document": {
             "$type": "color",
-            "$value": "#F1F1F1"
+            "$value": "#F0F1F1"
           }
         },
         "accent-1": {
           "bg-document": {
             "$type": "color",
-            "$value": "#001126"
+            "$value": "#190C1D"
           },
           "bg-subtle": {
             "$type": "color",
-            "$value": "#000409"
+            "$value": "#060307"
           },
           "bg-default": {
             "$type": "color",
-            "$value": "#001D40"
+            "$value": "#2B1432"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "#002551"
+            "$value": "#371A40"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "#002D62"
+            "$value": "#43204E"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "#003B81"
+            "$value": "#592A67"
           },
           "border-default": {
             "$type": "color",
-            "$value": "#3169AD"
+            "$value": "#CB99DB"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "#3F74B2"
+            "$value": "#D6AEE2"
           },
           "border-active": {
             "$type": "color",
-            "$value": "#4E7FB8"
+            "$value": "#E0C2E9"
           },
           "color-default": {
             "$type": "color",
-            "$value": "#8FAED2"
+            "$value": "#CB99DB"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "#A5BEDB"
+            "$value": "#D6AEE2"
           },
           "color-active": {
             "$type": "color",
-            "$value": "#BBCEE4"
+            "$value": "#E0C2E9"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "#648EC1"
+            "$value": "#B670CC"
           },
           "color-document": {
             "$type": "color",
-            "$value": "#ECF1F7"
+            "$value": "#F6EEF9"
           }
         },
         "accent-2": {
@@ -13153,59 +13153,59 @@
         "action-2": {
           "bg-document": {
             "$type": "color",
-            "$value": "{basis.color.accent-1.bg-document}"
+            "$value": "#07121B"
           },
           "bg-subtle": {
             "$type": "color",
-            "$value": "{basis.color.accent-1.bg-subtle}"
+            "$value": "#020406"
           },
           "bg-default": {
             "$type": "color",
-            "$value": "{basis.color.accent-1.bg-default}"
+            "$value": "#0C1F2F"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "{basis.color.accent-1.bg-hover}"
+            "$value": "#10273C"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "{basis.color.accent-1.bg-active}"
+            "$value": "#133049"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "{basis.color.accent-1.border-subtle}"
+            "$value": "#1A4061"
           },
           "border-default": {
             "$type": "color",
-            "$value": "{basis.color.accent-1.border-default}"
+            "$value": "#7DB0DD"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "{basis.color.accent-1.border-hover}"
+            "$value": "#97C0E4"
           },
           "border-active": {
             "$type": "color",
-            "$value": "{basis.color.accent-1.border-active}"
+            "$value": "#B1D0EA"
           },
           "color-default": {
             "$type": "color",
-            "$value": "{basis.color.accent-1.color-default}"
+            "$value": "#7DB0DD"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "{basis.color.accent-1.color-hover}"
+            "$value": "#97C0E4"
           },
           "color-active": {
             "$type": "color",
-            "$value": "{basis.color.accent-1.color-active}"
+            "$value": "#B1D0EA"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "{basis.color.accent-1.color-subtle}"
+            "$value": "#4890CF"
           },
           "color-document": {
             "$type": "color",
-            "$value": "{basis.color.accent-1.color-document}"
+            "$value": "#E9F2F9"
           }
         },
         "disabled": {
@@ -13269,181 +13269,181 @@
         "info": {
           "bg-document": {
             "$type": "color",
-            "$value": "#001126"
+            "$value": "#07121B"
           },
           "bg-subtle": {
             "$type": "color",
-            "$value": "#000409"
+            "$value": "#020406"
           },
           "bg-default": {
             "$type": "color",
-            "$value": "#001D40"
+            "$value": "#0C1F2F"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "#002551"
+            "$value": "#10273C"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "#002D62"
+            "$value": "#133049"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "#003B81"
+            "$value": "#1A4061"
           },
           "border-default": {
             "$type": "color",
-            "$value": "#3169AD"
+            "$value": "#7DB0DD"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "#3F74B2"
+            "$value": "#97C0E4"
           },
           "border-active": {
             "$type": "color",
-            "$value": "#4E7FB8"
+            "$value": "#B1D0EA"
           },
           "color-default": {
             "$type": "color",
-            "$value": "#8FAED2"
+            "$value": "#7DB0DD"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "#A5BEDB"
+            "$value": "#97C0E4"
           },
           "color-active": {
             "$type": "color",
-            "$value": "#BBCEE4"
+            "$value": "#B1D0EA"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "#648EC1"
+            "$value": "#4890CF"
           },
           "color-document": {
             "$type": "color",
-            "$value": "#ECF1F7"
+            "$value": "#E9F2F9"
           }
         },
         "negative": {
           "bg-document": {
             "$type": "color",
-            "$value": "#2D0000"
+            "$value": "#200A0C"
           },
           "bg-subtle": {
             "$type": "color",
-            "$value": "#100000"
+            "$value": "#080203"
           },
           "bg-default": {
             "$type": "color",
-            "$value": "#450000"
+            "$value": "#371114"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "#550000"
+            "$value": "#46151A"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "#650000"
+            "$value": "#551A1F"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "#820000"
+            "$value": "#702229"
           },
           "border-default": {
             "$type": "color",
-            "$value": "#D30000"
+            "$value": "#E2979E"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "#E60000"
+            "$value": "#E8ACB2"
           },
           "border-active": {
             "$type": "color",
-            "$value": "#EF2929"
+            "$value": "#EDC1C5"
           },
           "color-default": {
             "$type": "color",
-            "$value": "#F78D8D"
+            "$value": "#E2979E"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "#F8A6A6"
+            "$value": "#E8ACB2"
           },
           "color-active": {
             "$type": "color",
-            "$value": "#FABDBD"
+            "$value": "#EDC1C5"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "#F25454"
+            "$value": "#D56B75"
           },
           "color-document": {
             "$type": "color",
-            "$value": "#FEEDED"
+            "$value": "#FAEEEF"
           }
         },
         "positive": {
           "bg-document": {
             "$type": "color",
-            "$value": "#001508"
+            "$value": "#0A1308"
           },
           "bg-subtle": {
             "$type": "color",
-            "$value": "#000502"
+            "$value": "#020402"
           },
           "bg-default": {
             "$type": "color",
-            "$value": "#00230D"
+            "$value": "#11210E"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "#002D11"
+            "$value": "#152B12"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "#003714"
+            "$value": "#1A3416"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "#00481B"
+            "$value": "#23451D"
           },
           "border-default": {
             "$type": "color",
-            "$value": "#00792D"
+            "$value": "#6BBE5D"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "#008432"
+            "$value": "#8ACC7F"
           },
           "border-active": {
             "$type": "color",
-            "$value": "#009036"
+            "$value": "#A8D9A0"
           },
           "color-default": {
             "$type": "color",
-            "$value": "#54BF7C"
+            "$value": "#6BBE5D"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "#78CD98"
+            "$value": "#8ACC7F"
           },
           "color-active": {
             "$type": "color",
-            "$value": "#9BDAB3"
+            "$value": "#A8D9A0"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "#03A13F"
+            "$value": "#4E9D41"
           },
           "color-document": {
             "$type": "color",
-            "$value": "#E4F5EA"
+            "$value": "#E7F4E5"
           }
         },
         "warning": {
           "bg-document": {
             "$type": "color",
-            "$value": "#190F05"
+            "$value": "#1A0F04"
           },
           "bg-subtle": {
             "$type": "color",
@@ -13451,109 +13451,109 @@
           },
           "bg-default": {
             "$type": "color",
-            "$value": "#2A1A0B"
+            "$value": "#2D1906"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "#36210E"
+            "$value": "#392008"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "#432810"
+            "$value": "#452709"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "#5A3511"
+            "$value": "#593516"
           },
           "border-default": {
             "$type": "color",
-            "$value": "#9A5812"
+            "$value": "#ED9743"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "#A96011"
+            "$value": "#F1AE6B"
           },
           "border-active": {
             "$type": "color",
-            "$value": "#B86810"
+            "$value": "#F5C392"
           },
           "color-default": {
             "$type": "color",
-            "$value": "#FC9016"
+            "$value": "#ED9743"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "#FFA853"
+            "$value": "#F1AE6B"
           },
           "color-active": {
             "$type": "color",
-            "$value": "#FFBF82"
+            "$value": "#F5C392"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "#CF750C"
+            "$value": "#CF751C"
           },
           "color-document": {
             "$type": "color",
-            "$value": "#FFEEDD"
+            "$value": "#FCEEE1"
           }
         },
         "highlight": {
           "bg-document": {
             "$type": "color",
-            "$value": "#141106"
+            "$value": "#141008"
           },
           "bg-subtle": {
             "$type": "color",
-            "$value": "#050401"
+            "$value": "#050402"
           },
           "bg-default": {
             "$type": "color",
-            "$value": "#231D0D"
+            "$value": "#231D10"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "#2C2510"
+            "$value": "#2C2513"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "#362D12"
+            "$value": "#372D16"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "#483D14"
+            "$value": "#493C1B"
           },
           "border-default": {
             "$type": "color",
-            "$value": "#7A6718"
+            "$value": "#CCA736"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "#867018"
+            "$value": "#E0B73A"
           },
           "border-active": {
             "$type": "color",
-            "$value": "#927A18"
+            "$value": "#F0C758"
           },
           "color-default": {
             "$type": "color",
-            "$value": "#C9A913"
+            "$value": "#CCA736"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "#DCB90F"
+            "$value": "#E0B73A"
           },
           "color-active": {
             "$type": "color",
-            "$value": "#F0C908"
+            "$value": "#F0C758"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "#A48917"
+            "$value": "#A6882F"
           },
           "color-document": {
             "$type": "color",
-            "$value": "#FFF1BB"
+            "$value": "#FFEFD1"
           }
         },
         "selected": {
@@ -13617,117 +13617,117 @@
         "default-inverse": {
           "bg-document": {
             "$type": "color",
-            "$value": "#242424"
+            "$value": "#232425"
           },
           "bg-subtle": {
             "$type": "color",
-            "$value": "#1B1B1B"
+            "$value": "#1B1C1D"
           },
           "bg-default": {
             "$type": "color",
-            "$value": "#595959"
+            "$value": "#5E6165"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "#4B4B4B"
+            "$value": "#65686D"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "#3E3E3E"
+            "$value": "#6A6D72"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "#474747"
+            "$value": "#45474A"
           },
           "border-default": {
             "$type": "color",
-            "$value": "#C9C9C9"
+            "$value": "#F0F1F1"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "#D4D4D4"
+            "$value": "#F0F1F1"
           },
           "border-active": {
             "$type": "color",
-            "$value": "#DFDFDF"
+            "$value": "#F0F1F1"
           },
           "color-default": {
             "$type": "color",
-            "$value": "#F1F1F1"
+            "$value": "#F0F1F1"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "#F1F1F1"
+            "$value": "#F0F1F1"
           },
           "color-active": {
             "$type": "color",
-            "$value": "#F1F1F1"
+            "$value": "#F0F1F1"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "#C4C4C4"
+            "$value": "#C2C4C6"
           },
           "color-document": {
             "$type": "color",
-            "$value": "#F1F1F1"
+            "$value": "#F0F1F1"
           }
         },
         "accent-1-inverse": {
           "bg-document": {
             "$type": "color",
-            "$value": "#00234D"
+            "$value": "#34183C"
           },
           "bg-subtle": {
             "$type": "color",
-            "$value": "#001B3C"
+            "$value": "#28132F"
           },
           "bg-default": {
             "$type": "color",
-            "$value": "#2661A8"
+            "$value": "#8B41A1"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "#3169AD"
+            "$value": "#9546AD"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "#386FAF"
+            "$value": "#9C4AB5"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "#004494"
+            "$value": "#663076"
           },
           "border-default": {
             "$type": "color",
-            "$value": "#B8CBE2"
+            "$value": "#F6EEF9"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "#C6D6E8"
+            "$value": "#F6EEF9"
           },
           "border-active": {
             "$type": "color",
-            "$value": "#D5E1EE"
+            "$value": "#F6EEF9"
           },
           "color-default": {
             "$type": "color",
-            "$value": "#ECF1F7"
+            "$value": "#F6EEF9"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "#ECF1F7"
+            "$value": "#F6EEF9"
           },
           "color-active": {
             "$type": "color",
-            "$value": "#ECF1F7"
+            "$value": "#F6EEF9"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "#B0C6DF"
+            "$value": "#DBB8E6"
           },
           "color-document": {
             "$type": "color",
-            "$value": "#ECF1F7"
+            "$value": "#F6EEF9"
           }
         },
         "accent-2-inverse": {
@@ -13907,59 +13907,59 @@
         "action-2-inverse": {
           "bg-document": {
             "$type": "color",
-            "$value": "{basis.color.accent-1-inverse.bg-document}"
+            "$value": "#0F2539"
           },
           "bg-subtle": {
             "$type": "color",
-            "$value": "{basis.color.accent-1-inverse.bg-subtle}"
+            "$value": "#0B1D2C"
           },
           "bg-default": {
             "$type": "color",
-            "$value": "{basis.color.accent-1-inverse.bg-default}"
+            "$value": "#286498"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "{basis.color.accent-1-inverse.bg-hover}"
+            "$value": "#2B6CA4"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "{basis.color.accent-1-inverse.bg-active}"
+            "$value": "#2D71AB"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "{basis.color.accent-1-inverse.border-subtle}"
+            "$value": "#1D496F"
           },
           "border-default": {
             "$type": "color",
-            "$value": "{basis.color.accent-1-inverse.border-default}"
+            "$value": "#E9F2F9"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "{basis.color.accent-1-inverse.border-hover}"
+            "$value": "#E9F2F9"
           },
           "border-active": {
             "$type": "color",
-            "$value": "{basis.color.accent-1-inverse.border-active}"
+            "$value": "#E9F2F9"
           },
           "color-default": {
             "$type": "color",
-            "$value": "{basis.color.accent-1-inverse.color-default}"
+            "$value": "#E9F2F9"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "{basis.color.accent-1-inverse.color-hover}"
+            "$value": "#E9F2F9"
           },
           "color-active": {
             "$type": "color",
-            "$value": "{basis.color.accent-1-inverse.color-active}"
+            "$value": "#E9F2F9"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "{basis.color.accent-1-inverse.color-subtle}"
+            "$value": "#A4C8E7"
           },
           "color-document": {
             "$type": "color",
-            "$value": "{basis.color.accent-1-inverse.color-document}"
+            "$value": "#E9F2F9"
           }
         },
         "disabled-inverse": {
@@ -14023,291 +14023,291 @@
         "info-inverse": {
           "bg-document": {
             "$type": "color",
-            "$value": "#00234D"
+            "$value": "#0F2539"
           },
           "bg-subtle": {
             "$type": "color",
-            "$value": "#001B3C"
+            "$value": "#0B1D2C"
           },
           "bg-default": {
             "$type": "color",
-            "$value": "#2661A8"
+            "$value": "#286498"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "#3169AD"
+            "$value": "#2B6CA4"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "#386FAF"
+            "$value": "#2D71AB"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "#004494"
+            "$value": "#1D496F"
           },
           "border-default": {
             "$type": "color",
-            "$value": "#B8CBE2"
+            "$value": "#E9F2F9"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "#C6D6E8"
+            "$value": "#E9F2F9"
           },
           "border-active": {
             "$type": "color",
-            "$value": "#D5E1EE"
+            "$value": "#E9F2F9"
           },
           "color-default": {
             "$type": "color",
-            "$value": "#ECF1F7"
+            "$value": "#E9F2F9"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "#ECF1F7"
+            "$value": "#E9F2F9"
           },
           "color-active": {
             "$type": "color",
-            "$value": "#ECF1F7"
+            "$value": "#E9F2F9"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "#B0C6DF"
+            "$value": "#A4C8E7"
           },
           "color-document": {
             "$type": "color",
-            "$value": "#ECF1F7"
+            "$value": "#E9F2F9"
           }
         },
         "negative-inverse": {
           "bg-document": {
             "$type": "color",
-            "$value": "#510000"
+            "$value": "#421418"
           },
           "bg-subtle": {
             "$type": "color",
-            "$value": "#410000"
+            "$value": "#341013"
           },
           "bg-default": {
             "$type": "color",
-            "$value": "#C50000"
+            "$value": "#AE3540"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "#D30000"
+            "$value": "#BA3945"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "#DC0000"
+            "$value": "#C33B48"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "#930000"
+            "$value": "#80272F"
           },
           "border-default": {
             "$type": "color",
-            "$value": "#FAB9B9"
+            "$value": "#FAEEEF"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "#FBC8C8"
+            "$value": "#FAEEEF"
           },
           "border-active": {
             "$type": "color",
-            "$value": "#FCD7D7"
+            "$value": "#FAEEEF"
           },
           "color-default": {
             "$type": "color",
-            "$value": "#FEEDED"
+            "$value": "#FAEEEF"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "#FEEDED"
+            "$value": "#FAEEEF"
           },
           "color-active": {
             "$type": "color",
-            "$value": "#FEEDED"
+            "$value": "#FAEEEF"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "#F9B1B1"
+            "$value": "#EAB7BC"
           },
           "color-document": {
             "$type": "color",
-            "$value": "#FEEDED"
+            "$value": "#FAEEEF"
           }
         },
         "positive-inverse": {
           "bg-document": {
             "$type": "color",
-            "$value": "#002B10"
+            "$value": "#142811"
           },
           "bg-subtle": {
             "$type": "color",
-            "$value": "#00210C"
+            "$value": "#101F0D"
           },
           "bg-default": {
             "$type": "color",
-            "$value": "#00702A"
+            "$value": "#366D2D"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "#00792D"
+            "$value": "#3A7531"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "#007F2F"
+            "$value": "#3D7A33"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "#00531F"
+            "$value": "#285021"
           },
           "border-default": {
             "$type": "color",
-            "$value": "#96D8AE"
+            "$value": "#E7F4E5"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "#ACE0C0"
+            "$value": "#E7F4E5"
           },
           "border-active": {
             "$type": "color",
-            "$value": "#C3E9D1"
+            "$value": "#E7F4E5"
           },
           "color-default": {
             "$type": "color",
-            "$value": "#E4F5EA"
+            "$value": "#E7F4E5"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "#E4F5EA"
+            "$value": "#E7F4E5"
           },
           "color-active": {
             "$type": "color",
-            "$value": "#E4F5EA"
+            "$value": "#E7F4E5"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "#8AD3A6"
+            "$value": "#99D290"
           },
           "color-document": {
             "$type": "color",
-            "$value": "#E4F5EA"
+            "$value": "#E7F4E5"
           }
         },
         "warning-inverse": {
           "bg-document": {
             "$type": "color",
-            "$value": "#331F0D"
+            "$value": "#321F10"
           },
           "bg-subtle": {
             "$type": "color",
-            "$value": "#27190A"
+            "$value": "#26190C"
           },
           "bg-default": {
             "$type": "color",
-            "$value": "#8F5212"
+            "$value": "#8E521B"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "#9A5812"
+            "$value": "#99581C"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "#A15C11"
+            "$value": "#A05C1C"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "#683C12"
+            "$value": "#673D17"
           },
           "border-default": {
             "$type": "color",
-            "$value": "#FFBC7A"
+            "$value": "#FFEEE0"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "#FFCB98"
+            "$value": "#FFEEE0"
           },
           "border-active": {
             "$type": "color",
-            "$value": "#FFD9B4"
+            "$value": "#FFEEE0"
           },
           "color-default": {
             "$type": "color",
-            "$value": "#FFEEDD"
+            "$value": "#FFEEE0"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "#FFEEDD"
+            "$value": "#FFEEE0"
           },
           "color-active": {
             "$type": "color",
-            "$value": "#FFEEDD"
+            "$value": "#FFEEE0"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "#FFB46B"
+            "$value": "#FCB47C"
           },
           "color-document": {
             "$type": "color",
-            "$value": "#FFEEDD"
+            "$value": "#FFEEE0"
           }
         },
         "highlight-inverse": {
           "bg-document": {
             "$type": "color",
-            "$value": "#201B0C"
+            "$value": "#2A2313"
           },
           "bg-subtle": {
             "$type": "color",
-            "$value": "#211C00"
+            "$value": "#201B0F"
           },
           "bg-default": {
             "$type": "color",
-            "$value": "#725F18"
+            "$value": "#735E25"
           },
           "bg-hover": {
             "$type": "color",
-            "$value": "#7A6718"
+            "$value": "#7C6627"
           },
           "bg-active": {
             "$type": "color",
-            "$value": "#806B18"
+            "$value": "#826A28"
           },
           "border-subtle": {
             "$type": "color",
-            "$value": "#534615"
+            "$value": "#54451E"
           },
           "border-default": {
             "$type": "color",
-            "$value": "#ECC609"
+            "$value": "#FFEFD1"
           },
           "border-hover": {
             "$type": "color",
-            "$value": "#F9D103"
+            "$value": "#FFEFD1"
           },
           "border-active": {
             "$type": "color",
-            "$value": "#FFDE56"
+            "$value": "#FFEFD1"
           },
           "color-default": {
             "$type": "color",
-            "$value": "#FFF1BB"
+            "$value": "#FFEFD1"
           },
           "color-hover": {
             "$type": "color",
-            "$value": "#FFF1BB"
+            "$value": "#FFEFD1"
           },
           "color-active": {
             "$type": "color",
-            "$value": "#FFF1BB"
+            "$value": "#FFEFD1"
           },
           "color-subtle": {
             "$type": "color",
-            "$value": "#E6C10C"
+            "$value": "#EABF3C"
           },
           "color-document": {
             "$type": "color",
-            "$value": "#FFF1BB"
+            "$value": "#FFEFD1"
           }
         },
         "selected-inverse": {
@@ -14407,20 +14407,20 @@
       "focus": {
         "background-color": {
           "$type": "color",
-          "$value": "#ffdd00"
+          "$value": "#A6FF00"
         },
         "color": {
           "$type": "color",
-          "$value": "#0b0c0c"
+          "$value": "#FFFFFF"
         },
         "outline-color": {
           "$type": "color",
-          "$value": "#ffffff"
+          "$value": "#FFFFFF"
         },
         "inverse": {
           "outline-color": {
             "$type": "color",
-            "$value": "#0b0c0c"
+            "$value": "#000000"
           }
         }
       },

From 4a0117396c926055fa8abab388c0b2dc9a67864f Mon Sep 17 00:00:00 2001
From: Rozerin <84851545+Rozerinay@users.noreply.github.com>
Date: Thu, 11 Dec 2025 14:46:17 +0100
Subject: [PATCH 3/4] style: fix focus colors

---
 packages/ma-design-tokens/src/tokens.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ma-design-tokens/src/tokens.json b/packages/ma-design-tokens/src/tokens.json
index 296482670..f10d0d72d 100644
--- a/packages/ma-design-tokens/src/tokens.json
+++ b/packages/ma-design-tokens/src/tokens.json
@@ -3730,16 +3730,16 @@
         },
         "color": {
           "$type": "color",
-          "$value": "{basis.color.default.color-document}"
+          "$value": "#000000"
         },
         "outline-color": {
           "$type": "color",
-          "$value": "{basis.color.default.color-document}"
+          "$value": "#000000"
         },
         "inverse": {
           "outline-color": {
             "$type": "color",
-            "$value": "{basis.color.default-inverse.color-document}"
+            "$value": "#FFFFFF"
           }
         },
         "outline-offset": {

From 0fbd5aa8b5bb37a8e8446b1599ee8239378fca9c Mon Sep 17 00:00:00 2001
From: Rozerin <84851545+Rozerinay@users.noreply.github.com>
Date: Thu, 11 Dec 2025 17:36:51 +0100
Subject: [PATCH 4/4] docs: add changeset

---
 .changeset/color-tokens-ma.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/color-tokens-ma.md

diff --git a/.changeset/color-tokens-ma.md b/.changeset/color-tokens-ma.md
new file mode 100644
index 000000000..481fee3d5
--- /dev/null
+++ b/.changeset/color-tokens-ma.md
@@ -0,0 +1,6 @@
+---
+"@nl-design-system-community/ma-design-tokens": minor
+---
+
+De waarden van de common color tokens zijn bijgewerkt (met uitzondering van de dataset kleuren).
+De waarden van de color-scheme-dark tokens zijn eveneens gewijzigd.