Tokens for breadcrumb

components/lib/breadcrumb/style/BreadcrumbStyle.js

@@ -3,9 +3,7 @@ import BaseStyle from 'primevue/base/style';
 const theme = ({ dt }) => `
 .p-breadcrumb {
     background: ${dt('breadcrumb.background')};
-    border: 0 none;
+    padding: ${dt('breadcrumb.padding')};
-    border-radius: ${dt('border.radius.md')};
-    padding: 1rem;
     overflow-x: auto;
 }
 
@@ -16,12 +14,12 @@ const theme = ({ dt }) => `
     display: flex;
     align-items: center;
     flex-wrap: nowrap;
+    gap: ${dt('breadcrumb.gap')};
 }
 
 .p-breadcrumb-separator {
     display: flex;
     align-items: center;
-    margin: 0 0.5rem 0 0.5rem;
     color: ${dt('breadcrumb.separator.color')};
 }
 
@@ -33,20 +31,16 @@ const theme = ({ dt }) => `
     text-decoration: none;
     display: flex;
     align-items: center;
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
-    border-radius: ${dt('border.radius.md')};
+    border-radius: ${dt('breadcrumb.item.border.radius')};
     outline-color: transparent;
+    color: ${dt('breadcrumb.item.color')};
 }
 
 .p-breadcrumb-item-link:focus-visible {
-    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    box-shadow: ${dt('breadcrumb.item.focus.ring.shadow')};
-    outline-offset: ${dt('focus.ring.offset')};
+    outline: ${dt('breadcrumb.item.focus.ring.width')} ${dt('breadcrumb.item.focus.ring.style')} ${dt('breadcrumb.item.focus.ring.color')};
-}
+    outline-offset: ${dt('breadcrumb.item.focus.ring.offset')};
-
-.p-breadcrumb-item-link {
-    color: ${dt('breadcrumb.item.color')};
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
-    line-height: 1;
 }
 
 .p-breadcrumb-item-label:hover {

components/lib/themes/aura/breadcrumb/index.js

@@ -1,11 +1,21 @@
 export default {
     root: {
-        background: '{content.background}'
+        padding: '1rem',
+        background: '{content.background}',
+        gap: '0.5rem'
     },
     item: {
         color: '{text.muted.color}',
         hoverColor: '{text.color}',
-        iconColor: '{navigation.item.icon.color}'
+        iconColor: '{navigation.item.icon.color}',
+        borderRadius: '{content.border.radius}',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
     },
     separator: {
         color: '{navigation.item.icon.color}'

components/lib/themes/aura/index.js

@@ -287,7 +287,7 @@ export default {
                     item: {
                         focusBackground: '{surface.100}',
                         color: '{text.color}',
-                        hoverColor: '{text.hover.color}',
+                        focusColor: '{text.hover.color}',
                         icon: {
                             color: '{surface.400}',
                             focusColor: '{surface.500}'
@@ -397,7 +397,7 @@ export default {
                     item: {
                         focusBackground: '{surface.800}',
                         color: '{text.color}',
-                        hoverColor: '{text.hover.color}',
+                        focusColor: '{text.hover.color}',
                         icon: {
                             color: '{surface.500}',
                             focusColor: '{surface.400}'

components/lib/themes/lara/breadcrumb/index.js

@@ -1,11 +1,21 @@
 export default {
     root: {
-        background: '{content.background}'
+        padding: '1.25rem',
+        background: '{content.background}',
+        gap: '0.5rem'
     },
     item: {
         color: '{text.muted.color}',
         hoverColor: '{text.color}',
-        iconColor: '{navigation.item.icon.color}'
+        iconColor: '{navigation.item.icon.color}',
+        borderRadius: '{content.border.radius}',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
     },
     separator: {
         color: '{navigation.item.icon.color}'

components/lib/themes/lara/index.js

@@ -289,7 +289,7 @@ export default {
                     item: {
                         focusBackground: '{surface.100}',
                         color: '{text.color}',
-                        hoverColor: '{text.hover.color}',
+                        focusColor: '{text.hover.color}',
                         icon: {
                             color: '{surface.400}',
                             focusColor: '{surface.500}'
@@ -402,7 +402,7 @@ export default {
                     item: {
                         focusBackground: '{surface.800}',
                         color: '{text.color}',
-                        hoverColor: '{text.hover.color}',
+                        focusColor: '{text.hover.color}',
                         icon: {
                             color: '{surface.500}',
                             focusColor: '{surface.400}'