feat: added navigation-toggle-button hover state tokens

Author: Marwa

components/navigation/src/_mixin.scss

@@ -236,6 +236,11 @@
   padding-inline-end: var(--utrecht-navigation-toggle-button-padding-inline-end);
 }
 
+@mixin utrecht-navigation__toggle-button--hover {
+  --utrecht-button-subtle-hover-color: var(--utrecht-navigation-toggle-button-hover-color);
+  --utrecht-button-subtle-hover-border-color: var(--utrecht-navigation-toggle-button-hover-border-color);
+}
+
 @mixin utrecht-icon-custom {
   margin-inline-end: var(--utrecht-icon-custom-margin-inline-end);
 }

components/navigation/src/index.scss

@@ -90,7 +90,11 @@
 
 .utrecht-navigation__toggle-button {
   @include utrecht-navigation__toggle-button;
+  & button:hover {
+    @include utrecht-navigation__toggle-button--hover;
+  }
 }
+
 .utrecht-icon-custom {
   @include utrecht-icon-custom;
 }

components/navigation/src/tokens.json

@@ -783,6 +783,28 @@
             "nl.nldesignsystem.figma.supports-token": false
           },
           "type": "spacing"
+        },
+        "hover": {
+          "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"
+          }
         }
       }
     },

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

@@ -215,7 +215,11 @@
         "offset-start": {
           "value": "16px"
         },
-        "padding-inline-end": {}
+        "padding-inline-end": {},
+        "hover": {
+          "color": {},
+          "border-color": {}
+        }
       }
     },
     "icon": {