vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Token refactor

pull/6011/head
Cagatay Civici 2024-07-01 16:51:09 +03:00
parent 09e1273571
commit d992509165
13 changed files with 60 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/showcase/doc/breadcrumb/BasicDoc.vue
View File

@ -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: `
<Breadcrumb :home="home" :model="items" />

5
packages/primevue/src/badge/style/BadgeStyle.js
View File

@ -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')};
}
`;

13
packages/primevue/src/breadcrumb/style/BreadcrumbStyle.js
View File

@ -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')};
}
`;

2
packages/primevue/src/chip/style/ChipStyle.js
View File

@ -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')};

20
packages/primevue/src/datepicker/style/DatePickerStyle.js
View File

@ -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 {

6
packages/themes/src/presets/aura/breadcrumb/index.js
View File

@ -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}',

1
packages/themes/src/presets/aura/chip/index.js
View File

@ -14,6 +14,7 @@ export default {
size: '1rem'
},
removeIcon: {
size: '1rem',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',

6
packages/themes/src/presets/lara/breadcrumb/index.js
View File

@ -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}',

1
packages/themes/src/presets/lara/chip/index.js
View File

@ -14,6 +14,7 @@ export default {
size: '1rem'
},
removeIcon: {
size: '1rem',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',

6
packages/themes/src/presets/nora/breadcrumb/index.js
View File

@ -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}',

1
packages/themes/src/presets/nora/chip/index.js
View File

@ -14,6 +14,7 @@ export default {
size: '1rem'
},
removeIcon: {
size: '1rem',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',

12
packages/themes/types/breadcrumb/index.d.ts vendored
View File

@ -62,6 +62,18 @@ export interface BreadcrumbDesignTokens extends ColorSchemeDesignToken<Breadcrum
* @designToken breadcrumb.item.icon.color
*/
iconColor?: string;
/**
* Hover color of item icon
*
* @designToken breadcrumb.item.icon.hover.color
*/
iconHoverColor?: string;
/**
* Gap of item
*
* @designToken breadcrumb.item.gap
*/
gap?: string;
/**
* Border radius of item
*

6
packages/themes/types/chip/index.d.ts vendored
View File

@ -96,6 +96,12 @@ export interface ChipDesignTokens extends ColorSchemeDesignToken<ChipDesignToken
* Used to pass tokens of the remove icon section
*/
removeIcon?: {
/**
* Size of remove icon
*
* @designToken chip.remove.icon.size
*/
size?: string;
/**
* Focus ring of remove icon
*/