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