feat: added navigation-toggle-button active state tokens

Author: Marwa

components/navigation/src/_mixin.scss

@@ -247,6 +247,12 @@
   --utrecht-button-subtle-focus-background-color: var(--utrecht-navigation-toggle-button-focus-background-color);
 }
 
+@mixin utrecht-navigation__toggle-button--active {
+  --utrecht-button-subtle-active-color: var(--utrecht-navigation-toggle-button-active-color);
+  --utrecht-button-subtle-active-border-color: var(--utrecht-navigation-toggle-button-active-border-color);
+  --utrecht-button-subtle-active-background-color: var(--utrecht-navigation-toggle-button-active-background-color);
+}
+
 @mixin utrecht-icon-custom {
   margin-inline-end: var(--utrecht-icon-custom-margin-inline-end);
 }

components/navigation/src/index.scss

@@ -96,6 +96,9 @@
   & button:focus {
     @include utrecht-navigation__toggle-button--focus;
   }
+  & button:active {
+    @include utrecht-navigation__toggle-button--active;
+  }
 }
 
 .utrecht-icon-custom {

components/navigation/src/tokens.json

@@ -837,6 +837,38 @@
             },
             "type": "color"
           }
+        },
+        "active": {
+          "color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": false
+            },
+            "type": "color"
+          },
+          "border-color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": false
+            },
+            "type": "color"
+          },
+          "background-color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": false
+            },
+            "type": "color"
+          }
         }
       }
     },

proprietary/design-tokens/src/component/utrecht/navigation.tokens.json

@@ -224,6 +224,11 @@
           "color": {},
           "border-color": {},
           "background-color": {}
+        },
+        "active": {
+          "color": {},
+          "border-color": {},
+          "background-color": {}
         }
       }
     },