diff --git a/apps/showcase/doc/breadcrumb/BasicDoc.vue b/apps/showcase/doc/breadcrumb/BasicDoc.vue
index 73473e7e1..b839de05a 100644
--- a/apps/showcase/doc/breadcrumb/BasicDoc.vue
+++ b/apps/showcase/doc/breadcrumb/BasicDoc.vue
@@ -15,7 +15,7 @@ export default {
home: {
icon: 'pi pi-home'
},
- items: [{ label: 'Electronics' }, { label: 'Computer' }, { label: 'Accessories' }, { label: 'Keyboard' }, { label: 'Wireless' }],
+ items: [{ label: 'Electronics' }, { label: 'Computer', icon: 'pi pi-desktop' }, { label: 'Accessories' }, { label: 'Keyboard' }, { label: 'Wireless' }],
code: {
basic: `
diff --git a/packages/primevue/src/badge/style/BadgeStyle.js b/packages/primevue/src/badge/style/BadgeStyle.js
index c53280d98..b151333f9 100644
--- a/packages/primevue/src/badge/style/BadgeStyle.js
+++ b/packages/primevue/src/badge/style/BadgeStyle.js
@@ -5,6 +5,7 @@ const theme = ({ dt }) => `
.p-badge {
display: inline-flex;
border-radius: ${dt('badge.border.radius')};
+ align-items: center;
justify-content: center;
padding: ${dt('badge.padding')};
background: ${dt('badge.primary.background')};
@@ -13,7 +14,6 @@ const theme = ({ dt }) => `
font-weight: ${dt('badge.font.weight')};
min-width: ${dt('badge.min.width')};
height: ${dt('badge.height')};
- line-height: ${dt('badge.height')};
}
.p-badge-dot {
@@ -63,21 +63,18 @@ const theme = ({ dt }) => `
font-size: ${dt('badge.sm.font.size')};
min-width: ${dt('badge.sm.min.width')};
height: ${dt('badge.sm.height')};
- line-height: ${dt('badge.sm.height')};
}
.p-badge-lg {
font-size: ${dt('badge.lg.font.size')};
min-width: ${dt('badge.lg.min.width')};
height: ${dt('badge.lg.height')};
- line-height: ${dt('badge.lg.height')};
}
.p-badge-xl {
font-size: ${dt('badge.xl.font.size')};
min-width: ${dt('badge.xl.min.width')};
height: ${dt('badge.xl.height')};
- line-height: ${dt('badge.xl.height')};
}
`;
diff --git a/packages/primevue/src/breadcrumb/style/BreadcrumbStyle.js b/packages/primevue/src/breadcrumb/style/BreadcrumbStyle.js
index 77e7b28a3..f5115e725 100644
--- a/packages/primevue/src/breadcrumb/style/BreadcrumbStyle.js
+++ b/packages/primevue/src/breadcrumb/style/BreadcrumbStyle.js
@@ -31,6 +31,7 @@ const theme = ({ dt }) => `
text-decoration: none;
display: flex;
align-items: center;
+ gap: ${dt('breadcrumb.item.gap')};
transition: background ${dt('breadcrumb.transition.duration')}, color ${dt('breadcrumb.transition.duration')}, outline-color ${dt('breadcrumb.transition.duration')}, box-shadow ${dt('breadcrumb.transition.duration')};
border-radius: ${dt('breadcrumb.item.border.radius')};
outline-color: transparent;
@@ -43,13 +44,21 @@ const theme = ({ dt }) => `
outline-offset: ${dt('breadcrumb.item.focus.ring.offset')};
}
-.p-breadcrumb-item-label:hover {
+.p-breadcrumb-item-link:hover .p-breadcrumb-item-label {
color: ${dt('breadcrumb.item.hover.color')};
- line-height: 1;
+}
+
+.p-breadcrumb-item-label {
+ transition: inherit;
}
.p-breadcrumb-item-icon {
color: ${dt('breadcrumb.item.icon.color')};
+ transition: inherit;
+}
+
+.p-breadcrumb-item-link:hover .p-breadcrumb-item-icon {
+ color: ${dt('breadcrumb.item.icon.hover.color')};
}
`;
diff --git a/packages/primevue/src/chip/style/ChipStyle.js b/packages/primevue/src/chip/style/ChipStyle.js
index 7878f1837..388e3efa2 100644
--- a/packages/primevue/src/chip/style/ChipStyle.js
+++ b/packages/primevue/src/chip/style/ChipStyle.js
@@ -36,7 +36,7 @@ const theme = ({ dt }) => `
.p-chip-remove-icon {
cursor: pointer;
- font-size: ${dt('chip.remove.icon.font.size')};
+ font-size: ${dt('chip.remove.icon.size')};
width: ${dt('chip.remove.icon.size')};
height: ${dt('chip.remove.icon.size')};
color: ${dt('chip.remove.icon.color')};
diff --git a/packages/primevue/src/datepicker/style/DatePickerStyle.js b/packages/primevue/src/datepicker/style/DatePickerStyle.js
index 67f73ce16..130f5f6ac 100644
--- a/packages/primevue/src/datepicker/style/DatePickerStyle.js
+++ b/packages/primevue/src/datepicker/style/DatePickerStyle.js
@@ -131,25 +131,25 @@ const theme = ({ dt }) => `
}
.p-datepicker-select-month {
- padding: ${dt('datepicker.view.month.padding')};
- color: ${dt('datepicker.view.month.color')};
- border-radius: ${dt('datepicker.view.month.border.radius')};
+ padding: ${dt('datepicker.select.month.padding')};
+ color: ${dt('datepicker.select.month.color')};
+ border-radius: ${dt('datepicker.select.month.border.radius')};
}
.p-datepicker-select-year {
- padding: ${dt('datepicker.view.year.padding')};
- color: ${dt('datepicker.view.year.color')};
- border-radius: ${dt('datepicker.view.year.border.radius')};
+ padding: ${dt('datepicker.select.year.padding')};
+ color: ${dt('datepicker.select.year.color')};
+ border-radius: ${dt('datepicker.select.year.border.radius')};
}
.p-datepicker-select-month:enabled:hover {
- background: ${dt('datepicker.view.month.hover.background')};
- color: ${dt('datepicker.view.month.hover.color')};
+ background: ${dt('datepicker.select.month.hover.background')};
+ color: ${dt('datepicker.select.month.hover.color')};
}
.p-datepicker-select-year:enabled:hover {
- background: ${dt('datepicker.view.year.hover.background')};
- color: ${dt('datepicker.view.year.hover.color')};
+ background: ${dt('datepicker.select.year.hover.background')};
+ color: ${dt('datepicker.select.year.hover.color')};
}
.p-datepicker-calendar-container {
diff --git a/packages/themes/src/presets/aura/breadcrumb/index.js b/packages/themes/src/presets/aura/breadcrumb/index.js
index d2a8ccaf8..fc4dc333d 100644
--- a/packages/themes/src/presets/aura/breadcrumb/index.js
+++ b/packages/themes/src/presets/aura/breadcrumb/index.js
@@ -8,8 +8,12 @@ export default {
item: {
color: '{text.muted.color}',
hoverColor: '{text.color}',
- iconColor: '{navigation.item.icon.color}',
borderRadius: '{content.border.radius}',
+ gap: '{navigation.item.gap}',
+ icon: {
+ color: '{navigation.item.icon.color}',
+ hoverColor: '{navigation.item.icon.focus.color}'
+ },
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
diff --git a/packages/themes/src/presets/aura/chip/index.js b/packages/themes/src/presets/aura/chip/index.js
index 20bf7710d..d66b303da 100644
--- a/packages/themes/src/presets/aura/chip/index.js
+++ b/packages/themes/src/presets/aura/chip/index.js
@@ -14,6 +14,7 @@ export default {
size: '1rem'
},
removeIcon: {
+ size: '1rem',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
diff --git a/packages/themes/src/presets/lara/breadcrumb/index.js b/packages/themes/src/presets/lara/breadcrumb/index.js
index 52fd1afe4..31f17735c 100644
--- a/packages/themes/src/presets/lara/breadcrumb/index.js
+++ b/packages/themes/src/presets/lara/breadcrumb/index.js
@@ -8,8 +8,12 @@ export default {
item: {
color: '{text.muted.color}',
hoverColor: '{text.color}',
- iconColor: '{navigation.item.icon.color}',
borderRadius: '{content.border.radius}',
+ gap: '{navigation.item.gap}',
+ icon: {
+ color: '{navigation.item.icon.color}',
+ hoverColor: '{navigation.item.icon.focus.color}'
+ },
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
diff --git a/packages/themes/src/presets/lara/chip/index.js b/packages/themes/src/presets/lara/chip/index.js
index ea71d2486..9519eee23 100644
--- a/packages/themes/src/presets/lara/chip/index.js
+++ b/packages/themes/src/presets/lara/chip/index.js
@@ -14,6 +14,7 @@ export default {
size: '1rem'
},
removeIcon: {
+ size: '1rem',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
diff --git a/packages/themes/src/presets/nora/breadcrumb/index.js b/packages/themes/src/presets/nora/breadcrumb/index.js
index d2a8ccaf8..1827024c3 100644
--- a/packages/themes/src/presets/nora/breadcrumb/index.js
+++ b/packages/themes/src/presets/nora/breadcrumb/index.js
@@ -8,8 +8,12 @@ export default {
item: {
color: '{text.muted.color}',
hoverColor: '{text.color}',
- iconColor: '{navigation.item.icon.color}',
borderRadius: '{content.border.radius}',
+ gap: '{navigation.item.gap}',
+ icon: {
+ color: '{text.muted.color}',
+ hoverColor: '{text.color}'
+ },
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
diff --git a/packages/themes/src/presets/nora/chip/index.js b/packages/themes/src/presets/nora/chip/index.js
index 23040c3a2..82e4aa2d2 100644
--- a/packages/themes/src/presets/nora/chip/index.js
+++ b/packages/themes/src/presets/nora/chip/index.js
@@ -14,6 +14,7 @@ export default {
size: '1rem'
},
removeIcon: {
+ size: '1rem',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
diff --git a/packages/themes/types/breadcrumb/index.d.ts b/packages/themes/types/breadcrumb/index.d.ts
index 2af333e22..80b96aa0c 100644
--- a/packages/themes/types/breadcrumb/index.d.ts
+++ b/packages/themes/types/breadcrumb/index.d.ts
@@ -62,6 +62,18 @@ export interface BreadcrumbDesignTokens extends ColorSchemeDesignToken