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

Material cosmetics on chips,panelmenu and button

pull/6537/head
Cagatay Civici 2024-10-02 01:04:30 +03:00
parent 7e66f6db89
commit 933f9a279d
4 changed files with 123 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/themes/src/presets/material/base/index.js
View File

@ -37,8 +37,7 @@ export default {
width: '0',
style: 'none',
color: 'unset',
offset: '0',
shadow: '0 0 1px 4px color-mix(in srgb, {surface.900}, transparent 88%)'
offset: '0'
},
disabledOpacity: '0.38',
iconSize: '1rem',
@ -129,6 +128,9 @@ export default {
},
colorScheme: {
light: {
focusRing: {
shadow: '0 0 1px 4px {surface.200}'
},
surface: {
0: '#ffffff',
50: '{slate.50}',
@ -253,6 +255,9 @@ export default {
}
},
dark: {
focusRing: {
shadow: '0 0 1px 4px {surface.700}'
},
surface: {
0: '#ffffff',
50: '{zinc.50}',

113
packages/themes/src/presets/material/button/index.js
View File

@ -486,31 +486,130 @@ export default {
},
style: ({ dt }) => `
.p-button:focus-visible {
background: ${dt('button.primary.hover.background')};
background: ${dt('button.primary.active.background')};
border-color: ${dt('button.primary.active.background')};
}
.p-button-secondary:focus-visible {
background: ${dt('button.secondary.hover.background')};
background: ${dt('button.secondary.active.background')};
border-color: ${dt('button.secondary.active.background')};
}
.p-button-success:focus-visible {
background: ${dt('button.success.hover.background')};
background: ${dt('button.success.active.background')};
border-color: ${dt('button.success.active.background')};
}
.p-button-info:focus-visible {
background: ${dt('button.info.active.background')};
border-color: ${dt('button.info.active.background')};
}
.p-button-warn:focus-visible {
background: ${dt('button.warn.hover.background')};
background: ${dt('button.warn.active.background')};
border-color: ${dt('button.warn.active.background')};
}
.p-button-help:focus-visible {
background: ${dt('button.help.hover.background')};
background: ${dt('button.help.active.background')};
border-color: ${dt('button.help.active.background')};
}
.p-button-danger:focus-visible {
background: ${dt('button.danger.hover.background')};
background: ${dt('button.danger.active.background')};
border-color: ${dt('button.danger.active.background')};
}
.p-button-contrast:focus-visible {
background: ${dt('button.contrast.hover.background')};
background: ${dt('button.contrast.active.background')};
border-color: ${dt('button.contrast.active.background')};
}
.p-button-link:focus-visible {
background: color-mix(in srgb, ${dt('primary.color')}, transparent 84%);
border-color: transparent;
}
.p-button-text:focus-visible {
background: ${dt('button.text.primary.active.background')};
border-color: transparent;
}
.p-button-secondary.p-button-text:focus-visible {
background: ${dt('button.text.secondary.active.background')};
border-color: transparent;
}
.p-button-success.p-button-text:focus-visible {
background: ${dt('button.text.success.active.background')};
border-color: transparent;
}
.p-button-info.p-button-text:focus-visible {
background: ${dt('button.text.info.active.background')};
border-color: transparent;
}
.p-button-warn.p-button-text:focus-visible {
background: ${dt('button.text.warn.active.background')};
border-color: transparent;
}
.p-button-help.p-button-text:focus-visible {
background: ${dt('button.text.help.active.background')};
border-color: transparent;
}
.p-button-danger.p-button-text:focus-visible {
background: ${dt('button.text.danger.active.background')};
border-color: transparent;
}
.p-button-contrast.p-button-text:focus-visible {
background: ${dt('button.text.contrast.active.background')};
border-color: transparent;
}
.p-button-plain.p-button-text:focus-visible {
background: ${dt('button.text.plain.active.background')};
border-color: transparent;
}
.p-button-outlined:focus-visible {
background: ${dt('button.outlined.primary.active.background')};
}
.p-button-secondary.p-button-outlined:focus-visible {
background: ${dt('button.outlined.secondary.active.background')};
border-color: ${dt('button.outlined.secondary.border.color')};
}
.p-button-success.p-button-outlined:focus-visible {
background: ${dt('button.outlined.success.active.background')};
}
.p-button-info.p-button-outlined:focus-visible {
background: ${dt('button.outlined.info.active.background')};
}
.p-button-warn.p-button-outlined:focus-visible {
background: ${dt('button.outlined.warn.active.background')};
}
.p-button-help.p-button-outlined:focus-visible {
background: ${dt('button.outlined.help.active.background')};
}
.p-button-danger.p-button-outlined:focus-visible {
background: ${dt('button.outlined.danger.active.background')};
}
.p-button-contrast.p-button-outlined:focus-visible {
background: ${dt('button.outlined.contrast.active.background')};
}
.p-button-plain.p-button-outlined:focus-visible {
background: ${dt('button.outlined.plain.active.background')};
}
`
};

13
packages/themes/src/presets/material/chip/index.js
View File

@ -19,8 +19,7 @@ export default {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
offset: '{focus.ring.offset}'
}
},
colorScheme: {
@ -33,7 +32,10 @@ export default {
color: '{surface.600}'
},
removeIcon: {
color: '{surface.600}'
color: '{surface.600}',
focusRing: {
shadow: '0 0 1px 4px {surface.300}'
}
}
},
dark: {
@ -45,7 +47,10 @@ export default {
color: '{surface.0}'
},
removeIcon: {
color: '{surface.0}'
color: '{surface.0}',
focusRing: {
shadow: '0 0 1px 4px {surface.600}'
}
}
}
}

2
packages/themes/src/presets/material/panelmenu/index.js
View File

@ -40,7 +40,7 @@ export default {
},
style: ({ dt }) => `
.p-panelmenu-panel {
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
box-shadow: 0 0 0 1px ${dt('panelmenu.panel.border.color')};
transition: margin ${dt('panelmenu.transition.duration')};
}