Refactored tokens of Data components
parent
0d488b1ba9
commit
c617766c77
|
@ -162,7 +162,7 @@ const theme = ({ dt }) => `
|
|||
position: absolute;
|
||||
z-index: 10;
|
||||
display: none;
|
||||
background: ${dt('datatable.resizer.color')};
|
||||
background: ${dt('datatable.resize.indicator.color')};
|
||||
}
|
||||
|
||||
.p-datatable-row-reorder-indicator-up,
|
||||
|
@ -215,7 +215,7 @@ const theme = ({ dt }) => `
|
|||
margin: 2px 0;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 0 none;
|
||||
color: ${dt('datatable.filter.matchmode.item.color')};
|
||||
color: ${dt('datatable.filter.constraint.color')};
|
||||
background: transparent;
|
||||
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')},;
|
||||
border-radius: ${dt('rounded.sm')};
|
||||
|
@ -231,13 +231,13 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-datatable-filter-constraint-selected {
|
||||
background: ${dt('datatable.filter.matchmode.item.selected.background')};
|
||||
color: ${dt('datatable.filter.matchmode.item.selected.color')};
|
||||
background: ${dt('datatable.filter.constraint.selected.background')};
|
||||
color: ${dt('datatable.filter.constraint.selected.color')};
|
||||
}
|
||||
|
||||
.p-datatable-filter-constraint:not(.p-datatable-filter-constraint-selected):not(.p-disabled):hover {
|
||||
background: ${dt('datatable.filter.matchmode.item.focus.background')};
|
||||
color: ${dt('datatable.filter.matchmode.item.focus.color')};
|
||||
background: ${dt('datatable.filter.constraint.focus.background')};
|
||||
color: ${dt('datatable.filter.constraint.focus.color')};
|
||||
}
|
||||
|
||||
.p-datatable-filter-constraint:focus-visible {
|
||||
|
@ -247,7 +247,7 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-datatable-filter-constraint-separator {
|
||||
border-top: 1px solid ${dt('datatable.filter.matchmode.item.separator.border.color')};
|
||||
border-top: 1px solid ${dt('datatable.filter.constraint.separator.border.color')};
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
|
@ -268,7 +268,7 @@ const theme = ({ dt }) => `
|
|||
|
||||
.p-datatable-filter-rule {
|
||||
padding: 0;
|
||||
border-bottom: 1px solid ${dt('datatable.filter.constraint.border.color')};
|
||||
border-bottom: 1px solid ${dt('datatable.filter.rule.border.color')};
|
||||
}
|
||||
|
||||
.p-datatable-filter-rule:last-child {
|
||||
|
@ -554,7 +554,7 @@ p-datatable-gridlines .p-datatable-tbody > tr:last-child>td {
|
|||
position: relative;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
color: ${dt('datatable.row.action.color')};
|
||||
color: ${dt('datatable.row.toggle.button.color')};
|
||||
border: 0 none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
|
@ -565,8 +565,8 @@ p-datatable-gridlines .p-datatable-tbody > tr:last-child>td {
|
|||
}
|
||||
|
||||
.p-datatable-row-toggle-button:enabled:hover {
|
||||
color: ${dt('datatable.row.action.hover.color')};
|
||||
background: ${dt('datatable.row.action.hover.background')};
|
||||
color: ${dt('datatable.row.toggle.button.hover.color')};
|
||||
background: ${dt('datatable.row.toggle.button.hover.background')};
|
||||
}
|
||||
|
||||
.p-datatable-row-toggle-button:focus-visible {
|
||||
|
@ -575,7 +575,7 @@ p-datatable-gridlines .p-datatable-tbody > tr:last-child>td {
|
|||
}
|
||||
|
||||
.p-datatable-tbody > tr.p-datatable-row-selected .p-datatable-row-toggle-button:hover{
|
||||
background: ${dt('datatable.row.action.highlight.hover.background')};
|
||||
background: ${dt('datatable.row.toggle.button.highlight.hover.background')};
|
||||
color: inherit;
|
||||
}
|
||||
`;
|
||||
|
|
|
@ -49,10 +49,10 @@ const theme = ({ dt }) => `
|
|||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
text-decoration: none;
|
||||
background: ${dt('organizationchart.toggle.icon.background')};
|
||||
color: ${dt('organizationchart.toggle.icon.color')};
|
||||
background: ${dt('organizationchart.node.toggle.button.background')};
|
||||
color: ${dt('organizationchart.node.toggle.button.color')};
|
||||
border-radius: 50%;
|
||||
border: 1px solid ${dt('organizationchart.toggle.icon.border.color')};
|
||||
border: 1px solid ${dt('organizationchart.node.toggle.button.border.color')};
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
|
@ -37,7 +37,7 @@ const theme = ({ dt }) => `
|
|||
position: relative;
|
||||
background: transparent;
|
||||
border: 0 none;
|
||||
color: ${dt('paginator.navigator.color')};
|
||||
color: ${dt('paginator.nav.button.color')};
|
||||
min-width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
|
||||
|
@ -60,8 +60,8 @@ const theme = ({ dt }) => `
|
|||
.p-paginator-prev:not(.p-disabled):hover,
|
||||
.p-paginator-next:not(.p-disabled):hover,
|
||||
.p-paginator-last:not(.p-disabled):hover {
|
||||
background: ${dt('paginator.navigator.hover.background')};
|
||||
color: ${dt('paginator.navigator.hover.color')};
|
||||
background: ${dt('paginator.nav.button.hover.background')};
|
||||
color: ${dt('paginator.nav.button.hover.color')};
|
||||
}
|
||||
|
||||
.p-paginator-current {
|
||||
|
|
|
@ -1,165 +1,88 @@
|
|||
export default {
|
||||
header: {
|
||||
background: '{content.background}',
|
||||
borderColor: '{datatable.border.color}',
|
||||
color: '{content.color}'
|
||||
},
|
||||
headerCell: {
|
||||
background: '{content.background}',
|
||||
hoverBackground: '{content.hover.background}',
|
||||
borderColor: '{datatable.border.color}',
|
||||
color: '{content.color}',
|
||||
hoverColor: '{content.hover.color}'
|
||||
},
|
||||
row: {
|
||||
background: '{content.background}',
|
||||
hoverBackground: '{content.hover.background}',
|
||||
color: '{content.color}',
|
||||
hoverColor: '{content.hover.color}'
|
||||
},
|
||||
bodyCell: {
|
||||
borderColor: '{datatable.border.color}'
|
||||
},
|
||||
footerCell: {
|
||||
background: '{content.background}',
|
||||
borderColor: '{datatable.border.color}',
|
||||
color: '{content.color}'
|
||||
},
|
||||
footer: {
|
||||
background: '{content.background}',
|
||||
borderColor: '{datatable.border.color}',
|
||||
color: '{content.color}'
|
||||
},
|
||||
dropPointColor: '{primary.color}',
|
||||
resizeIndicatorColor: '{primary.color}',
|
||||
sortIcon: {
|
||||
color: '{text.muted.color}',
|
||||
hoverColor: '{text.hover.muted.color}'
|
||||
},
|
||||
rowToggleButton: {
|
||||
hoverBackground: '{content.hover.background}',
|
||||
highlightHoverBackground: '{content.background}',
|
||||
color: '{text.color}',
|
||||
hoverColor: '{text.muted.color}'
|
||||
},
|
||||
filter: {
|
||||
overlay: {
|
||||
background: '{content.background}',
|
||||
borderColor: '{content.border.color}',
|
||||
color: '{content.color}'
|
||||
},
|
||||
rule: {
|
||||
borderColor: '{content.border.color}'
|
||||
},
|
||||
filterConstraint: {
|
||||
hoverBackground: '{content.hover.background}',
|
||||
selectedBackground: '{highlight.background}',
|
||||
color: '{text.color}',
|
||||
hoverColor: '{text.hover.color}',
|
||||
selectedColor: '{highlight.color}',
|
||||
separator: {
|
||||
borderColor: '{content.border.color}'
|
||||
}
|
||||
}
|
||||
},
|
||||
colorScheme: {
|
||||
light: {
|
||||
header: {
|
||||
background: '{surface.0}',
|
||||
borderColor: '{surface.200}',
|
||||
color: '{surface.700}'
|
||||
},
|
||||
headerCell: {
|
||||
background: '{surface.0}',
|
||||
hoverBackground: '{surface.100}',
|
||||
borderColor: '{surface.200}',
|
||||
color: '{surface.700}',
|
||||
hoverColor: '{surface.800}'
|
||||
root: {
|
||||
borderColor: '{content.border.color}'
|
||||
},
|
||||
row: {
|
||||
background: '{surface.0}',
|
||||
stripedBackground: '{surface.50}',
|
||||
hoverBackground: '{surface.100}',
|
||||
color: '{surface.700}',
|
||||
hoverColor: '{surface.800}'
|
||||
stripedBackground: '{surface.50}'
|
||||
},
|
||||
bodyCell: {
|
||||
borderColor: '{surface.200}',
|
||||
selectedBorderColor: '{primary.100}'
|
||||
},
|
||||
footerCell: {
|
||||
background: '{surface.0}',
|
||||
borderColor: '{surface.200}',
|
||||
color: '{surface.700}'
|
||||
},
|
||||
footer: {
|
||||
background: '{surface.0}',
|
||||
borderColor: '{surface.200}',
|
||||
color: '{surface.700}'
|
||||
},
|
||||
dropPointColor: '{primary.color}',
|
||||
resizerColor: '{primary.color}',
|
||||
sortIcon: {
|
||||
color: '{surface.500}',
|
||||
hoverColor: '{surface.600}'
|
||||
},
|
||||
rowAction: {
|
||||
hoverBackground: '{surface.100}',
|
||||
highlightHoverBackground: '{surface.0}',
|
||||
color: '{surface.500}',
|
||||
hoverColor: '{surface.500}'
|
||||
},
|
||||
filter: {
|
||||
menuButton: {
|
||||
hoverBackground: '{surface.100}',
|
||||
openBackground: '{surface.100}',
|
||||
activeBackground: '{highlight.background}',
|
||||
color: '{surface.500}',
|
||||
openColor: '{surface.500}',
|
||||
hoverColor: '{surface.600}',
|
||||
activeColor: '{highlight.color}'
|
||||
},
|
||||
clearButton: {
|
||||
hoverBackground: '{surface.100}',
|
||||
color: '{surface.500}',
|
||||
hoverColor: '{surface.600}'
|
||||
},
|
||||
overlay: {
|
||||
background: '{surface.0}',
|
||||
borderColor: '{surface.200}',
|
||||
color: '{surface.700}'
|
||||
},
|
||||
constraint: {
|
||||
borderColor: '{surface.200}'
|
||||
},
|
||||
matchmodeItem: {
|
||||
focusBackground: '{surface.100}',
|
||||
selectedBackground: '{highlight.background}',
|
||||
color: '{surface.700}',
|
||||
focusColor: '{surface.800}',
|
||||
selectedColor: '{highlight.color}',
|
||||
separator: {
|
||||
borderColor: '{surface.200}'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
header: {
|
||||
background: '{surface.900}',
|
||||
borderColor: '{surface.800}',
|
||||
color: '{surface.0}'
|
||||
},
|
||||
headerCell: {
|
||||
background: '{surface.900}',
|
||||
hoverBackground: '{surface.800}',
|
||||
borderColor: '{surface.800}',
|
||||
color: '{surface.0}',
|
||||
hoverColor: '{surface.0}'
|
||||
root: {
|
||||
borderColor: '{surface.800}'
|
||||
},
|
||||
row: {
|
||||
background: '{surface.900}',
|
||||
stripedBackground: '{surface.950}',
|
||||
hoverBackground: '{surface.800}',
|
||||
color: '{surface.0}',
|
||||
hoverColor: '{surface.0}'
|
||||
stripedBackground: '{surface.950}'
|
||||
},
|
||||
bodyCell: {
|
||||
borderColor: '{surface.800}',
|
||||
selectedBorderColor: '{primary.900}'
|
||||
},
|
||||
footerCell: {
|
||||
background: '{surface.900}',
|
||||
borderColor: '{surface.800}',
|
||||
color: '{surface.0}'
|
||||
},
|
||||
footer: {
|
||||
background: '{surface.900}',
|
||||
borderColor: '{surface.800}',
|
||||
color: '{surface.0}'
|
||||
},
|
||||
dropPointColor: '{primary.color}',
|
||||
resizerColor: '{primary.color}',
|
||||
sortIcon: {
|
||||
color: '{surface.400}',
|
||||
hoverColor: '{surface.300}'
|
||||
},
|
||||
rowAction: {
|
||||
hoverBackground: '{surface.800}',
|
||||
highlightHoverBackground: '{surface.900}',
|
||||
color: '{surface.400}',
|
||||
hoverColor: '{surface.300}'
|
||||
},
|
||||
filter: {
|
||||
menuButton: {
|
||||
hoverBackground: '{surface.800}',
|
||||
openBackground: '{surface.800}',
|
||||
activeBackground: '{highlight.background}',
|
||||
color: '{surface.400}',
|
||||
openColor: '{surface.300}',
|
||||
hoverColor: '{surface.300}',
|
||||
activeColor: '{highlight.color}'
|
||||
},
|
||||
clearButton: {
|
||||
hoverBackground: '{surface.800}',
|
||||
color: '{surface.400}',
|
||||
hoverColor: '{surface.300}'
|
||||
},
|
||||
overlay: {
|
||||
background: '{surface.900}',
|
||||
borderColor: '{surface.700}',
|
||||
color: '{surface.0}'
|
||||
},
|
||||
constraint: {
|
||||
borderColor: '{surface.700}'
|
||||
},
|
||||
matchmodeItem: {
|
||||
focusBackground: '{surface.800}',
|
||||
selectedBackground: '{highlight.background}',
|
||||
color: '{surface.0}',
|
||||
focusColor: '{surface.0}',
|
||||
selectedColor: '{highlight.color}',
|
||||
separator: {
|
||||
borderColor: '{surface.700}'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,36 +1,16 @@
|
|||
export default {
|
||||
colorScheme: {
|
||||
light: {
|
||||
header: {
|
||||
background: '{surface.0}',
|
||||
borderColor: '{surface.200}',
|
||||
color: '{surface.700}'
|
||||
},
|
||||
content: {
|
||||
background: '{surface.0}',
|
||||
color: '{surface.700}'
|
||||
},
|
||||
footer: {
|
||||
background: '{surface.0}',
|
||||
borderColor: '{surface.200}',
|
||||
color: '{surface.700}'
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
header: {
|
||||
background: '{surface.900}',
|
||||
borderColor: '{surface.700}',
|
||||
color: '{surface.0}'
|
||||
},
|
||||
content: {
|
||||
background: '{surface.900}',
|
||||
color: '{surface.0}'
|
||||
},
|
||||
footer: {
|
||||
background: '{surface.900}',
|
||||
borderColor: '{surface.700}',
|
||||
color: '{surface.0}'
|
||||
}
|
||||
}
|
||||
header: {
|
||||
background: '{content.background}',
|
||||
borderColor: '{content.border.color}',
|
||||
color: '{content.color}'
|
||||
},
|
||||
content: {
|
||||
background: '{content.background}',
|
||||
color: '{content.color}'
|
||||
},
|
||||
footer: {
|
||||
background: '{content.background}',
|
||||
borderColor: '{content.border.color}',
|
||||
color: '{content.color}'
|
||||
}
|
||||
};
|
||||
|
|
|
@ -1,38 +1,17 @@
|
|||
export default {
|
||||
colorScheme: {
|
||||
light: {
|
||||
node: {
|
||||
background: '{surface.0}',
|
||||
hoverBackground: '{surface.100}',
|
||||
borderColor: '{surface.200}',
|
||||
color: '{surface.700}',
|
||||
hoverColor: '{surface.800}'
|
||||
},
|
||||
toggleIcon: {
|
||||
background: '{surface.0}',
|
||||
borderColor: '{surface.200}',
|
||||
color: '{surface.500}'
|
||||
},
|
||||
connector: {
|
||||
color: '{surface.200}'
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
node: {
|
||||
background: '{surface.900}',
|
||||
hoverBackground: '{surface.800}',
|
||||
borderColor: '{surface.700}',
|
||||
color: '{surface.0}',
|
||||
hoverColor: '{surface.0}'
|
||||
},
|
||||
toggleIcon: {
|
||||
background: '{surface.800}',
|
||||
borderColor: '{surface.700}',
|
||||
color: '{surface.400}'
|
||||
},
|
||||
connector: {
|
||||
color: '{surface.700}'
|
||||
}
|
||||
}
|
||||
node: {
|
||||
background: '{content.background}',
|
||||
hoverBackground: '{content.hover.background}',
|
||||
borderColor: '{content.border.color}',
|
||||
color: '{text.color}',
|
||||
hoverColor: '{text.hover.color}'
|
||||
},
|
||||
nodeToggleButton: {
|
||||
background: '{content.background}',
|
||||
borderColor: '{content.border.color}',
|
||||
color: '{text.muted.color}'
|
||||
},
|
||||
connector: {
|
||||
color: '{content.border.color}'
|
||||
}
|
||||
};
|
||||
|
|
|
@ -1,32 +1,14 @@
|
|||
export default {
|
||||
colorScheme: {
|
||||
light: {
|
||||
root: {
|
||||
background: '{surface.0}',
|
||||
color: '{surface.700}'
|
||||
},
|
||||
navigator: {
|
||||
hoverBackground: '{surface.100}',
|
||||
color: '{surface.500}',
|
||||
hoverColor: '{surface.600}'
|
||||
},
|
||||
currentPageReport: {
|
||||
color: '{surface.500}'
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
root: {
|
||||
background: '{surface.900}',
|
||||
color: '{surface.0}'
|
||||
},
|
||||
navigator: {
|
||||
hoverBackground: '{surface.800}',
|
||||
color: '{surface.400}',
|
||||
hoverColor: '{surface.300}'
|
||||
},
|
||||
currentPageReport: {
|
||||
color: '{surface.400}'
|
||||
}
|
||||
}
|
||||
root: {
|
||||
background: '{content.background}',
|
||||
color: '{content.color}'
|
||||
},
|
||||
navButton: {
|
||||
hoverBackground: '{content.hover.background}',
|
||||
color: '{text.muted.color}',
|
||||
hoverColor: '{text.hover.muted.color}'
|
||||
},
|
||||
currentPageReport: {
|
||||
color: '{text.muted.color}'
|
||||
}
|
||||
};
|
||||
|
|
|
@ -1,24 +1,10 @@
|
|||
export default {
|
||||
colorScheme: {
|
||||
light: {
|
||||
marker: {
|
||||
background: '{surface.0}',
|
||||
borderColor: '{surface.200}',
|
||||
contentColor: '{primary.color}'
|
||||
},
|
||||
connector: {
|
||||
color: '{surface.200}'
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
marker: {
|
||||
background: '{surface.900}',
|
||||
borderColor: '{surface.700}',
|
||||
contentColor: '{primary.color}'
|
||||
},
|
||||
connector: {
|
||||
color: '{surface.700}'
|
||||
}
|
||||
}
|
||||
eventMarker: {
|
||||
background: '{content.background}',
|
||||
borderColor: '{content.border.color}',
|
||||
contentColor: '{primary.color}'
|
||||
},
|
||||
eventConnector: {
|
||||
color: '{content.border.color}'
|
||||
}
|
||||
};
|
||||
|
|
|
@ -1,52 +1,24 @@
|
|||
export default {
|
||||
colorScheme: {
|
||||
light: {
|
||||
root: {
|
||||
background: '{surface.0}',
|
||||
color: '{surface.700}'
|
||||
},
|
||||
node: {
|
||||
hoverBackground: '{surface.100}',
|
||||
color: '{surface.700}',
|
||||
hoverColor: '{surface.800}'
|
||||
},
|
||||
nodeIcon: {
|
||||
color: '{surface.500}',
|
||||
hoverColor: '{surface.600}'
|
||||
},
|
||||
toggle: {
|
||||
hoverBackground: '{surface.100}',
|
||||
highlightHoverBackground: '{surface.0}',
|
||||
color: '{surface.500}',
|
||||
hoverColor: '{surface.600}'
|
||||
},
|
||||
filterIcon: {
|
||||
color: '{surface.400}'
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
root: {
|
||||
background: '{surface.900}',
|
||||
color: '{surface.0}'
|
||||
},
|
||||
node: {
|
||||
hoverBackground: '{surface.800}',
|
||||
color: '{surface.0}',
|
||||
hoverColor: '{surface.0}'
|
||||
},
|
||||
nodeIcon: {
|
||||
color: '{surface.400}',
|
||||
hoverColor: '{surface.300}'
|
||||
},
|
||||
toggle: {
|
||||
hoverBackground: '{surface.800}',
|
||||
highlightHoverBackground: '{surface.900}',
|
||||
color: '{surface.400}',
|
||||
hoverColor: '{surface.300}'
|
||||
},
|
||||
filterIcon: {
|
||||
color: '{surface.400}'
|
||||
}
|
||||
}
|
||||
root: {
|
||||
background: '{content.background}',
|
||||
color: '{content.color}'
|
||||
},
|
||||
node: {
|
||||
hoverBackground: '{content.hover.background}',
|
||||
color: '{text.color}',
|
||||
hoverColor: '{text.hover.color}'
|
||||
},
|
||||
nodeIcon: {
|
||||
color: '{text.muted.color}',
|
||||
hoverColor: '{text.hover.muted.color}'
|
||||
},
|
||||
nodeToggleButton: {
|
||||
hoverBackground: '{content.hover.background}',
|
||||
highlightHoverBackground: '{content.background}',
|
||||
color: '{text.muted.color}',
|
||||
hoverColor: '{text.hover.muted.color}'
|
||||
},
|
||||
filterIcon: {
|
||||
color: '{surface.400}'
|
||||
}
|
||||
};
|
||||
|
|
|
@ -1,93 +1,67 @@
|
|||
export default {
|
||||
header: {
|
||||
background: '{content.background}',
|
||||
borderColor: '{datatable.border.color}',
|
||||
color: '{content.color}'
|
||||
},
|
||||
headerCell: {
|
||||
background: '{content.background}',
|
||||
hoverBackground: '{content.hover.background}',
|
||||
borderColor: '{datatable.border.color}',
|
||||
color: '{content.color}',
|
||||
hoverColor: '{content.hover.color}'
|
||||
},
|
||||
row: {
|
||||
background: '{content.background}',
|
||||
hoverBackground: '{content.hover.background}',
|
||||
color: '{content.color}',
|
||||
hoverColor: '{content.hover.color}'
|
||||
},
|
||||
bodyCell: {
|
||||
borderColor: '{datatable.border.color}'
|
||||
},
|
||||
footerCell: {
|
||||
background: '{content.background}',
|
||||
borderColor: '{datatable.border.color}',
|
||||
color: '{content.color}'
|
||||
},
|
||||
footer: {
|
||||
background: '{content.background}',
|
||||
borderColor: '{datatable.border.color}',
|
||||
color: '{content.color}'
|
||||
},
|
||||
resizeIndicatorColor: '{primary.color}',
|
||||
sortIcon: {
|
||||
color: '{text.muted.color}',
|
||||
hoverColor: '{text.hover.muted.color}'
|
||||
},
|
||||
nodeToggleButton: {
|
||||
hoverBackground: '{content.hover.background}',
|
||||
highlightHoverBackground: '{content.background}',
|
||||
color: '{text.color}',
|
||||
hoverColor: '{text.muted.color}'
|
||||
},
|
||||
colorScheme: {
|
||||
light: {
|
||||
header: {
|
||||
background: '{surface.0}',
|
||||
borderColor: '{surface.200}',
|
||||
color: '{surface.700}'
|
||||
},
|
||||
headerCell: {
|
||||
background: '{surface.0}',
|
||||
hoverBackground: '{surface.100}',
|
||||
borderColor: '{surface.200}',
|
||||
color: '{surface.700}',
|
||||
hoverColor: '{surface.800}'
|
||||
root: {
|
||||
borderColor: '{content.border.color}'
|
||||
},
|
||||
row: {
|
||||
background: '{surface.0}',
|
||||
hoverBackground: '{surface.100}',
|
||||
color: '{surface.700}',
|
||||
hoverColor: '{surface.800}'
|
||||
stripedBackground: '{surface.50}'
|
||||
},
|
||||
bodyCell: {
|
||||
borderColor: '{surface.200}',
|
||||
selectedBorderColor: '{primary.100}'
|
||||
},
|
||||
footerCell: {
|
||||
background: '{surface.0}',
|
||||
borderColor: '{surface.200}',
|
||||
color: '{surface.700}'
|
||||
},
|
||||
footer: {
|
||||
background: '{surface.0}',
|
||||
borderColor: '{surface.200}',
|
||||
color: '{surface.700}'
|
||||
},
|
||||
resizerColor: '{primary.color}',
|
||||
sortIcon: {
|
||||
color: '{surface.500}',
|
||||
hoverColor: '{surface.600}'
|
||||
},
|
||||
rowAction: {
|
||||
hoverBackground: '{surface.100}',
|
||||
highlightHoverBackground: '{surface.0}',
|
||||
color: '{surface.500}',
|
||||
hoverColor: '{surface.500}'
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
header: {
|
||||
background: '{surface.900}',
|
||||
borderColor: '{surface.800}',
|
||||
color: '{surface.0}'
|
||||
},
|
||||
headerCell: {
|
||||
background: '{surface.900}',
|
||||
hoverBackground: '{surface.800}',
|
||||
borderColor: '{surface.800}',
|
||||
color: '{surface.0}',
|
||||
hoverColor: '{surface.0}'
|
||||
root: {
|
||||
borderColor: '{surface.800}'
|
||||
},
|
||||
row: {
|
||||
background: '{surface.900}',
|
||||
hoverBackground: '{surface.800}',
|
||||
color: '{surface.0}',
|
||||
hoverColor: '{surface.0}'
|
||||
stripedBackground: '{surface.950}'
|
||||
},
|
||||
bodyCell: {
|
||||
borderColor: '{surface.800}',
|
||||
selectedBorderColor: '{primary.900}'
|
||||
},
|
||||
footerCell: {
|
||||
background: '{surface.900}',
|
||||
borderColor: '{surface.800}',
|
||||
color: '{surface.0}'
|
||||
},
|
||||
footer: {
|
||||
background: '{surface.900}',
|
||||
borderColor: '{surface.800}',
|
||||
color: '{surface.0}'
|
||||
},
|
||||
resizerColor: '{primary.color}',
|
||||
sortIcon: {
|
||||
color: '{surface.400}',
|
||||
hoverColor: '{surface.300}'
|
||||
},
|
||||
rowAction: {
|
||||
hoverBackground: '{surface.800}',
|
||||
highlightHoverBackground: '{surface.900}',
|
||||
color: '{surface.400}',
|
||||
hoverColor: '{surface.300}'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -89,11 +89,11 @@ const theme = ({ dt }) => `
|
|||
justify-content: center;
|
||||
position: relative;
|
||||
align-self: baseline;
|
||||
border: 2px solid ${dt('timeline.marker.border.color')};
|
||||
border: 2px solid ${dt('timeline.event.marker.border.color')};
|
||||
border-radius: 50%;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
background-color: ${dt('timeline.marker.background')};
|
||||
background-color: ${dt('timeline.event.marker.background')};
|
||||
}
|
||||
|
||||
.p-timeline-event-marker::before {
|
||||
|
@ -101,7 +101,7 @@ const theme = ({ dt }) => `
|
|||
border-radius: 50%;
|
||||
width: 0.375rem;
|
||||
height: 0.375rem;
|
||||
background: ${dt('timeline.marker.content.color')};
|
||||
background: ${dt('timeline.event.marker.content.color')};
|
||||
}
|
||||
|
||||
.p-timeline-event-marker::after {
|
||||
|
@ -115,7 +115,7 @@ const theme = ({ dt }) => `
|
|||
|
||||
.p-timeline-event-connector {
|
||||
flex-grow: 1;
|
||||
background-color: ${dt('timeline.connector.color')};
|
||||
background-color: ${dt('timeline.event.connector.color')};
|
||||
}
|
||||
|
||||
.p-timeline-horizontal {
|
||||
|
|
|
@ -62,7 +62,7 @@ const theme = ({ dt }) => `
|
|||
margin: 0 0.5rem 0 0;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
color: ${dt('tree.toggle.color')};
|
||||
color: ${dt('tree.node.toggle.button.color')};
|
||||
border: 0 none;
|
||||
background: transparent;
|
||||
border-radius: 50%;
|
||||
|
@ -72,8 +72,8 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-tree-node-toggle-button:enabled:hover {
|
||||
background: ${dt('tree.toggle.hover.background')};
|
||||
color: ${dt('tree.toggle.hover.color')};
|
||||
background: ${dt('tree.node.toggle.button.hover.background')};
|
||||
color: ${dt('tree.node.toggle.button.hover.color')};
|
||||
}
|
||||
|
||||
.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button,
|
||||
|
@ -82,7 +82,7 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button:hover {
|
||||
background: ${dt('tree.toggle.highlight.hover.background')};
|
||||
background: ${dt('tree.node.toggle.button.highlight.hover.background')};
|
||||
}
|
||||
|
||||
.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover {
|
||||
|
@ -91,11 +91,11 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover .p-tree-node-toggle-button {
|
||||
color: ${dt('tree.toggle.hover.color')};
|
||||
color: ${dt('tree.node.toggle.button.hover.color')};
|
||||
}
|
||||
|
||||
.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover .p-tree-node-icon {
|
||||
color: ${dt('tree.icon.hover.color')};
|
||||
color: ${dt('tree.node.icon.hover.color')};
|
||||
}
|
||||
|
||||
.p-tree-node-children {
|
||||
|
@ -120,7 +120,7 @@ const theme = ({ dt }) => `
|
|||
|
||||
.p-tree-node-icon {
|
||||
margin-right: 0.5rem;
|
||||
color: ${dt('tree.icon.color')};
|
||||
color: ${dt('tree.node.icon.color')};
|
||||
transition: color ${dt('transition.duration')};
|
||||
}
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }" :data-p-frozen-column="columnProp('frozen')">
|
||||
<button v-if="columnProp('expander')" v-ripple type="button" :class="cx('rowToggleButton')" @click="toggle" :style="togglerStyle" tabindex="-1" v-bind="getColumnPT('rowToggleButton')" data-pc-group-section="rowactionbutton">
|
||||
<button v-if="columnProp('expander')" v-ripple type="button" :class="cx('nodeToggleButton')" @click="toggle" :style="togglerStyle" tabindex="-1" v-bind="getColumnPT('nodeToggleButton')" data-pc-group-section="rowactionbutton">
|
||||
<template v-if="node.loading && loadingMode === 'icon'">
|
||||
<component v-if="templates['nodetoggleicon']" :is="templates['nodetoggleicon']" />
|
||||
<!-- TODO: Deprecated since v4.0-->
|
||||
|
@ -19,12 +19,12 @@
|
|||
v-if="checkboxSelectionMode && columnProp('expander')"
|
||||
:modelValue="checked"
|
||||
:binary="true"
|
||||
:class="cx('rowCheckbox')"
|
||||
:class="cx('nodeCheckbox')"
|
||||
@change="toggleCheckbox"
|
||||
:tabindex="-1"
|
||||
:indeterminate="partialChecked"
|
||||
:unstyled="unstyled"
|
||||
:pt="getColumnCheckboxPT('rowCheckbox')"
|
||||
:pt="getColumnCheckboxPT('nodeCheckbox')"
|
||||
:data-p-partialchecked="partialChecked"
|
||||
>
|
||||
<template #icon="slotProps">
|
||||
|
|
|
@ -162,7 +162,7 @@ const theme = ({ dt }) => `
|
|||
position: absolute;
|
||||
z-index: 10;
|
||||
display: none;
|
||||
background: ${dt('treetable.resizer.color')};
|
||||
background: ${dt('treetable.resize.indicator.color')};
|
||||
}
|
||||
|
||||
.p-treetable-row-reorder-indicator-up,
|
||||
|
@ -411,7 +411,7 @@ p-treetable-gridlines .p-treetable-tbody > tr:last-child>td {
|
|||
padding: 0.9375rem 1.25rem;
|
||||
}
|
||||
|
||||
.p-treetable-row-toggle-button {
|
||||
.p-treetable-node-toggle-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
@ -419,7 +419,7 @@ p-treetable-gridlines .p-treetable-tbody > tr:last-child>td {
|
|||
position: relative;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
color: ${dt('treetable.row.action.color')};
|
||||
color: ${dt('treetable.node.toggle.button.color')};
|
||||
border: 0 none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
|
@ -430,18 +430,18 @@ p-treetable-gridlines .p-treetable-tbody > tr:last-child>td {
|
|||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.p-treetable-row-toggle-button:enabled:hover {
|
||||
color: ${dt('treetable.row.action.hover.color')};
|
||||
background: ${dt('treetable.row.action.hover.background')};
|
||||
.p-treetable-node-toggle-button:enabled:hover {
|
||||
color: ${dt('treetable.node.toggle.button.hover.color')};
|
||||
background: ${dt('treetable.node.toggle.button.hover.background')};
|
||||
}
|
||||
|
||||
.p-treetable-row-toggle-button:focus-visible {
|
||||
.p-treetable-node-toggle-button:focus-visible {
|
||||
outline: 1px solid ${dt('focus.ring.color')};
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-row-toggle-button:hover{
|
||||
background: ${dt('treetable.row.action.highlight.hover.background')};
|
||||
.p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-node-toggle-button:hover{
|
||||
background: ${dt('treetable.node.toggle.button.highlight.hover.background')};
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
@ -503,9 +503,9 @@ const classes = {
|
|||
'p-treetable-frozen-column': instance.columnProp('frozen')
|
||||
}
|
||||
],
|
||||
rowToggleButton: 'p-treetable-row-toggle-button',
|
||||
rowToggleIcon: 'p-treetable-row-toggle-icon',
|
||||
rowCheckbox: 'p-treetable-row-checkbox',
|
||||
nodeToggleButton: 'p-treetable-node-toggle-button',
|
||||
nodeToggleIcon: 'p-treetable-node-toggle-icon',
|
||||
nodeCheckbox: 'p-treetable-node-checkbox',
|
||||
emptyMessage: 'p-treetable-empty-message',
|
||||
tfoot: 'p-treetable-tfoot',
|
||||
footerCell: ({ instance }) => [
|
||||
|
|
Loading…
Reference in New Issue