vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Tokens for DataTable

Browse source
This commit is contained in:
Cagatay Civici 2024-05-13 02:28:17 +03:00
parent 3301bfe624
commit 8d3559c9ef
6 changed files with 344 additions and 174 deletions
Download patch file Download diff file Expand all files Collapse all files

150
components/lib/themes/lara/datatable/index.js
View file

@ -1,72 +1,156 @@
export default {
header: {
background: '{content.background}',
borderColor: '{datatable.border.color}',
color: '{content.color}'
borderWidth: '1px 0 1px 0',
padding: '0.75rem 1rem',
fontWeight: '700'
},
headerCell: {
background: '{content.background}',
hoverBackground: '{content.hover.background}',
selectedBackground: '{highlight.background}',
borderColor: '{datatable.border.color}',
color: '{content.color}',
hoverColor: '{content.hover.color}'
hoverColor: '{content.hover.color}',
selectedColor: '{highlight.color}',
gap: '0.5rem',
padding: '0.75rem 1rem',
fontWeight: '700',
align: 'left',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: 'inset {focus.ring.shadow}'
}
},
row: {
background: '{content.background}',
hoverBackground: '{content.hover.background}',
selectedBackground: '{highlight.background}',
color: '{content.color}',
hoverColor: '{content.hover.color}'
hoverColor: '{content.hover.color}',
selectedColor: '{highlight.color}',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: 'inset {focus.ring.shadow}'
}
},
bodyCell: {
borderColor: '{datatable.border.color}'
borderColor: '{datatable.border.color}',
padding: '0.75rem 1rem'
},
footerCell: {
background: '{content.background}',
borderColor: '{datatable.border.color}',
color: '{content.color}'
padding: '0.75rem 1rem',
fontWeight: '700'
},
footer: {
background: '{content.background}',
borderColor: '{datatable.border.color}',
color: '{content.color}'
borderWidth: '0 0 1px',
padding: '0.75rem 1rem',
fontWeight: '700'
},
dropPointColor: '{primary.color}',
resizeIndicatorColor: '{primary.color}',
columnResizerWidth: '0.5rem',
resizeIndicator: {
width: '1px',
color: '{primary.color}'
},
sortIcon: {
color: '{text.muted.color}',
hoverColor: '{text.hover.muted.color}'
},
loadingIcon: {
size: '2rem'
},
rowToggleButton: {
hoverBackground: '{content.hover.background}',
highlightHoverBackground: '{content.background}',
selectedHoverBackground: '{content.background}',
color: '{text.color}',
hoverColor: '{text.muted.color}'
hoverColor: '{text.muted.color}',
selectedHoverColor: '{primary.color}',
size: '1.75rem',
borderRadius: '50%',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
},
filter: {
overlay: {
background: '{content.background}',
borderColor: '{content.border.color}',
color: '{content.color}'
inlineGap: '0.5rem',
overlaySelect: {
background: '{overlay.select.background}',
borderColor: '{overlay.select.border.color}',
borderRadius: '{overlay.select.border.radius}',
color: '{overlay.select.color}',
shadow: '{overlay.select.shadow}'
},
overlayPopover: {
background: '{overlay.popover.background}',
borderColor: '{overlay.popover.border.color}',
borderRadius: '{overlay.popover.border.radius}',
color: '{overlay.popover.color}',
shadow: '{overlay.popover.shadow}',
padding: '{overlay.popover.padding}',
gap: '0.5rem'
},
rule: {
borderColor: '{content.border.color}'
},
filterConstraint: {
hoverBackground: '{content.hover.background}',
selectedBackground: '{highlight.background}',
color: '{text.color}',
hoverColor: '{text.hover.color}',
selectedColor: '{highlight.color}',
constraintList: {
padding: '{list.padding}',
gap: '{list.gap}'
},
constraint: {
focusBackground: '{list.option.focus.background}',
selectedBackground: '{list.option.selected.background}',
selectedFocusBackground: '{list.option.selected.focus.background}',
color: '{list.option.color}',
focusColor: '{list.option.focus.color}',
selectedColor: '{list.option.selected.color}',
selectedFocusColor: '{list.option.selected.focus.color}',
separator: {
borderColor: '{content.border.color}'
}
},
padding: '{list.option.padding}',
borderRadius: '{list.option.border.radius}'
}
},
paginatorTop: {
borderColor: '{content.border.color}',
borderWidth: '0 0 1px 0'
},
paginatorBottom: {
borderColor: '{content.border.color}',
borderWidth: '0 0 1px 0'
},
colorScheme: {
light: {
root: {
borderColor: '{content.border.color}'
},
header: {
background: '{surface.100}',
color: '{text.color}'
},
headerCell: {
background: '{surface.100}',
color: '{text.color}'
},
footer: {
background: '{surface.100}',
color: '{text.color}'
},
footerCell: {
background: '{surface.100}',
color: '{text.color}'
},
row: {
stripedBackground: '{surface.50}'
},
@ -78,6 +162,22 @@ export default {
root: {
borderColor: '{surface.800}'
},
header: {
background: '{surface.800}',
color: '{text.color}'
},
headerCell: {
background: '{surface.800}',
color: '{text.color}'
},
footer: {
background: '{surface.800}',
color: '{text.color}'
},
footerCell: {
background: '{surface.800}',
color: '{text.color}'
},
row: {
stripedBackground: '{surface.950}'
},

2
components/lib/themes/lara/index.js
View file

@ -196,7 +196,7 @@ export default {
popover: {
borderRadius: '{border.radius.sm}',
padding: '1rem',
shadow: '0 1px 3px rgba(0, 0, 0, 0.3)'
shadow: '0 1px 3px rgba(0, 0, 0, 0.1)'
},
modal: {
borderRadius: '{border.radius.lg}',