feat: update text color for OnyxNavButton and OnyxUserMenu (#2464)

Relates to #2381

- update text color for nav button and user menu
- fixed the mobile user menu spacings to be aligned with Figma (was 10px
but should be 8px)
- fix mobile NavBar screenshots (backdrop was overlaying nav bar)
because of default browser body margin

## Checklist

- [x] If a new component is added, at least one [Playwright screenshot
test](https://github.com/SchwarzIT/onyx/actions/workflows/playwright-screenshots.yml)
is added
- [x] A changeset is added with `npx changeset add` if your changes
should be released as npm package (because they affect the library
usage)

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.changeset/grumpy-lobsters-flash.md

@@ -0,0 +1,5 @@
+---
+"sit-onyx": minor
+---
+
+feat: update text color for OnyxNavButton and OnyxUserMenu to improve color contrast

packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.ct.tsx

@@ -84,7 +84,8 @@ test.describe("Screenshot tests", () => {
 });
 
 test("Screenshot tests (mobile)", async ({ mount, page }) => {
-  await page.setViewportSize({ height: 512, width: ONYX_BREAKPOINTS.sm });
+  await page.addStyleTag({ content: "body { margin: 0 }" });
+  await page.setViewportSize({ height: 512, width: ONYX_BREAKPOINTS.sm - 1 });
 
   const clickEvents: string[] = [];
 
@@ -199,6 +200,7 @@ test("Screenshot tests (mobile)", async ({ mount, page }) => {
 
 ["", " with context"].forEach((showContext) => {
   test(`Screenshot tests (mobile truncated labels${showContext})`, async ({ mount, page }) => {
+    await page.addStyleTag({ content: "body { margin: 0 }" });
     await page.setViewportSize({ height: 350, width: ONYX_BREAKPOINTS["2xs"] });
     const longLabel = "Item with a very long truncated name";
 

packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavButton/OnyxNavButton.vue

@@ -127,7 +127,7 @@ $border-radius: var(--onyx-radius-sm);
       background: var(--onyx-color-base-background-blank);
       text-decoration: none;
       font-family: var(--onyx-font-family);
-      color: var(--onyx-color-text-icons-neutral-medium);
+      color: var(--onyx-color-text-icons-neutral-intense);
       border: none;
 
       &:focus-visible {

packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavSeparator/OnyxNavSeparator.vue

@@ -38,7 +38,7 @@ const isMobile = inject(
       min-height: unset;
       height: var(--onyx-1px-in-rem);
       width: 100%;
-      margin: var(--onyx-spacing-xs) 0;
+      margin: var(--onyx-spacing-2xs) 0;
     }
   }
 }

packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/OnyxUserMenu.vue

@@ -108,7 +108,7 @@ const isMobile = inject(
       display: flex;
       align-items: center;
       gap: var(--onyx-spacing-2xs);
-      color: var(--onyx-color-text-icons-neutral-medium);
+      color: var(--onyx-color-text-icons-neutral-intense);
       margin-left: auto;
       font-weight: 600;
 
@@ -153,7 +153,7 @@ const isMobile = inject(
         border: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral);
         background-color: var(--onyx-color-base-background-blank);
         border-radius: var(--onyx-radius-sm);
-        margin-bottom: var(--onyx-spacing-xs); // TODO: use density
+        margin-bottom: var(--onyx-spacing-2xs);
       }
 
       .onyx-user-menu__options {

packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/UserMenuLayout.vue

@@ -93,18 +93,19 @@ const { t } = injectI18n();
     &__footer,
     &__mobile-footer {
       color: var(--onyx-color-text-icons-neutral-soft);
-
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: var(--onyx-spacing-2xs);
     }
+
     &__footer {
       border-top: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral);
       padding: var(--onyx-spacing-4xs) var(--onyx-spacing-md);
     }
+
     &__mobile-footer {
-      margin-top: var(--onyx-spacing-xs);
+      margin-top: var(--onyx-spacing-2xs);
       border: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral);
       border-radius: var(--onyx-radius-sm);
       font-size: 0.8125rem;