fix: add border radius to focussed nav item (#2175)

* fix: add border radius to focussed nav item * fix: update design-tokens, use new radius token
telekom · Nov 3, 2023 · 2d9795c · 2d9795c
1 parent 4f86750
commit 2d9795c
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 5 deletions.
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -72,7 +72,7 @@
     "@duetds/date-picker": "1.2.0",
     "@floating-ui/dom": "^0.5.4",
     "@stencil/core": "^2.17.0",
-    "@telekom/design-tokens": "1.0.0-beta.8",
+    "@telekom/design-tokens": "1.0.0-beta.10",
     "@telekom/scale-design-tokens": "^3.0.0-beta.142",
     "classnames": "^2.2.6",
     "stencil-inline-svg": "^1.0.1"

diff --git a/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css b/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css
@@ -132,6 +132,7 @@
 }
 
 .scale-telekom-nav-item > :where(a, button):focus {
+  border-radius: var(--telekom-radius-extra-small);
   outline: var(--focus-outline);
 }
 

diff --git a/yarn.lock b/yarn.lock
@@ -5768,10 +5768,10 @@
     vue-docgen-loader "^1.5.0"
     webpack "4"
 
-"@telekom/[email protected].8":
-  version "1.0.0-beta.8"
-  resolved "https://registry.yarnpkg.com/@telekom/design-tokens/-/design-tokens-1.0.0-beta.8.tgz#afee8cf9c3a1fafc2fed230ab02a5bb79c7abc97"
-  integrity sha512-8wVJyKXHjEyv7MZgAIGN0pUvZgI2wK5MGC5QxH/YSUgnp6baxC3iBaoMATfatt1krdBu7TGKwmHEdUOefJhQWA==
+"@telekom/[email protected].10":
+  version "1.0.0-beta.10"
+  resolved "https://registry.yarnpkg.com/@telekom/design-tokens/-/design-tokens-1.0.0-beta.10.tgz#381956d229bd1c4d096c96e51de371323a60de10"
+  integrity sha512-57BFgDxDkvOOrQf7wmS1u5jQmPRdhh6Y/qOHwTvYlS5GwGlkr3EeGeuwePL5pJ7z0jTnxEIVhmwbZnIx9AIX8w==
 
 "@telekom/design-tokens@^1.0.0-beta.2":
   version "1.0.0-beta.2"
-Original file line number
+Diff line change
@@ Expand Up / @@ -132,6 +132,7 @@ @@
     }
     .scale-telekom-nav-item > :where(a, button):focus {
+      border-radius: var(--telekom-radius-extra-small);
       outline: var(--focus-outline);
     }
@@ Expand Down @@