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

Refactored tokens of Data components

pull/5701/head
Cagatay Civici 2024-05-05 00:57:50 +03:00
parent 0d488b1ba9
commit c617766c77
14 changed files with 227 additions and 431 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/lib/datatable/style/DataTableStyle.js
View File

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

6
components/lib/organizationchart/style/OrganizationChartStyle.js
View File

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

6
components/lib/paginator/style/PaginatorStyle.js
View File

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

179
components/lib/themes/aura/datatable/index.js
View File

@ -1,165 +1,88 @@
export default {
colorScheme: {
light: {
header: {
background: '{surface.0}',
borderColor: '{surface.200}',
color: '{surface.700}'
background: '{content.background}',
borderColor: '{datatable.border.color}',
color: '{content.color}'
},
headerCell: {
background: '{surface.0}',
hoverBackground: '{surface.100}',
borderColor: '{surface.200}',
color: '{surface.700}',
hoverColor: '{surface.800}'
background: '{content.background}',
hoverBackground: '{content.hover.background}',
borderColor: '{datatable.border.color}',
color: '{content.color}',
hoverColor: '{content.hover.color}'
},
row: {
background: '{surface.0}',
stripedBackground: '{surface.50}',
hoverBackground: '{surface.100}',
color: '{surface.700}',
hoverColor: '{surface.800}'
background: '{content.background}',
hoverBackground: '{content.hover.background}',
color: '{content.color}',
hoverColor: '{content.hover.color}'
},
bodyCell: {
borderColor: '{surface.200}',
selectedBorderColor: '{primary.100}'
borderColor: '{datatable.border.color}'
},
footerCell: {
background: '{surface.0}',
borderColor: '{surface.200}',
color: '{surface.700}'
background: '{content.background}',
borderColor: '{datatable.border.color}',
color: '{content.color}'
},
footer: {
background: '{surface.0}',
borderColor: '{surface.200}',
color: '{surface.700}'
background: '{content.background}',
borderColor: '{datatable.border.color}',
color: '{content.color}'
},
dropPointColor: '{primary.color}',
resizerColor: '{primary.color}',
resizeIndicatorColor: '{primary.color}',
sortIcon: {
color: '{surface.500}',
hoverColor: '{surface.600}'
color: '{text.muted.color}',
hoverColor: '{text.hover.muted.color}'
},
rowAction: {
hoverBackground: '{surface.100}',
highlightHoverBackground: '{surface.0}',
color: '{surface.500}',
hoverColor: '{surface.500}'
rowToggleButton: {
hoverBackground: '{content.hover.background}',
highlightHoverBackground: '{content.background}',
color: '{text.color}',
hoverColor: '{text.muted.color}'
},
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}'
background: '{content.background}',
borderColor: '{content.border.color}',
color: '{content.color}'
},
constraint: {
borderColor: '{surface.200}'
rule: {
borderColor: '{content.border.color}'
},
matchmodeItem: {
focusBackground: '{surface.100}',
filterConstraint: {
hoverBackground: '{content.hover.background}',
selectedBackground: '{highlight.background}',
color: '{surface.700}',
focusColor: '{surface.800}',
color: '{text.color}',
hoverColor: '{text.hover.color}',
selectedColor: '{highlight.color}',
separator: {
borderColor: '{surface.200}'
borderColor: '{content.border.color}'
}
}
},
colorScheme: {
light: {
root: {
borderColor: '{content.border.color}'
},
row: {
stripedBackground: '{surface.50}'
},
bodyCell: {
selectedBorderColor: '{primary.100}'
}
},
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}'
}
}
}
}
}

36
components/lib/themes/aura/dataview/index.js
View File

@ -1,36 +1,16 @@
export default {
colorScheme: {
light: {
header: {
background: '{surface.0}',
borderColor: '{surface.200}',
color: '{surface.700}'
background: '{content.background}',
borderColor: '{content.border.color}',
color: '{content.color}'
},
content: {
background: '{surface.0}',
color: '{surface.700}'
background: '{content.background}',
color: '{content.color}'
},
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}'
}
}
background: '{content.background}',
borderColor: '{content.border.color}',
color: '{content.color}'
}
};

41
components/lib/themes/aura/organizationchart/index.js
View File

@ -1,38 +1,17 @@
export default {
colorScheme: {
light: {
node: {
background: '{surface.0}',
hoverBackground: '{surface.100}',
borderColor: '{surface.200}',
color: '{surface.700}',
hoverColor: '{surface.800}'
background: '{content.background}',
hoverBackground: '{content.hover.background}',
borderColor: '{content.border.color}',
color: '{text.color}',
hoverColor: '{text.hover.color}'
},
toggleIcon: {
background: '{surface.0}',
borderColor: '{surface.200}',
color: '{surface.500}'
nodeToggleButton: {
background: '{content.background}',
borderColor: '{content.border.color}',
color: '{text.muted.color}'
},
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}'
}
}
color: '{content.border.color}'
}
};

32
components/lib/themes/aura/paginator/index.js
View File

@ -1,32 +1,14 @@
export default {
colorScheme: {
light: {
root: {
background: '{surface.0}',
color: '{surface.700}'
background: '{content.background}',
color: '{content.color}'
},
navigator: {
hoverBackground: '{surface.100}',
color: '{surface.500}',
hoverColor: '{surface.600}'
navButton: {
hoverBackground: '{content.hover.background}',
color: '{text.muted.color}',
hoverColor: '{text.hover.muted.color}'
},
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}'
}
}
color: '{text.muted.color}'
}
};

24
components/lib/themes/aura/timeline/index.js
View File

@ -1,24 +1,10 @@
export default {
colorScheme: {
light: {
marker: {
background: '{surface.0}',
borderColor: '{surface.200}',
eventMarker: {
background: '{content.background}',
borderColor: '{content.border.color}',
contentColor: '{primary.color}'
},
connector: {
color: '{surface.200}'
}
},
dark: {
marker: {
background: '{surface.900}',
borderColor: '{surface.700}',
contentColor: '{primary.color}'
},
connector: {
color: '{surface.700}'
}
}
eventConnector: {
color: '{content.border.color}'
}
};

52
components/lib/themes/aura/tree/index.js
View File

@ -1,52 +1,24 @@
export default {
colorScheme: {
light: {
root: {
background: '{surface.0}',
color: '{surface.700}'
background: '{content.background}',
color: '{content.color}'
},
node: {
hoverBackground: '{surface.100}',
color: '{surface.700}',
hoverColor: '{surface.800}'
hoverBackground: '{content.hover.background}',
color: '{text.color}',
hoverColor: '{text.hover.color}'
},
nodeIcon: {
color: '{surface.500}',
hoverColor: '{surface.600}'
color: '{text.muted.color}',
hoverColor: '{text.hover.muted.color}'
},
toggle: {
hoverBackground: '{surface.100}',
highlightHoverBackground: '{surface.0}',
color: '{surface.500}',
hoverColor: '{surface.600}'
nodeToggleButton: {
hoverBackground: '{content.hover.background}',
highlightHoverBackground: '{content.background}',
color: '{text.muted.color}',
hoverColor: '{text.hover.muted.color}'
},
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}'
}
}
}
};

108
components/lib/themes/aura/treetable/index.js
View File

@ -1,93 +1,67 @@
export default {
colorScheme: {
light: {
header: {
background: '{surface.0}',
borderColor: '{surface.200}',
color: '{surface.700}'
background: '{content.background}',
borderColor: '{datatable.border.color}',
color: '{content.color}'
},
headerCell: {
background: '{surface.0}',
hoverBackground: '{surface.100}',
borderColor: '{surface.200}',
color: '{surface.700}',
hoverColor: '{surface.800}'
background: '{content.background}',
hoverBackground: '{content.hover.background}',
borderColor: '{datatable.border.color}',
color: '{content.color}',
hoverColor: '{content.hover.color}'
},
row: {
background: '{surface.0}',
hoverBackground: '{surface.100}',
color: '{surface.700}',
hoverColor: '{surface.800}'
background: '{content.background}',
hoverBackground: '{content.hover.background}',
color: '{content.color}',
hoverColor: '{content.hover.color}'
},
bodyCell: {
borderColor: '{surface.200}',
selectedBorderColor: '{primary.100}'
borderColor: '{datatable.border.color}'
},
footerCell: {
background: '{surface.0}',
borderColor: '{surface.200}',
color: '{surface.700}'
background: '{content.background}',
borderColor: '{datatable.border.color}',
color: '{content.color}'
},
footer: {
background: '{surface.0}',
borderColor: '{surface.200}',
color: '{surface.700}'
background: '{content.background}',
borderColor: '{datatable.border.color}',
color: '{content.color}'
},
resizerColor: '{primary.color}',
resizeIndicatorColor: '{primary.color}',
sortIcon: {
color: '{surface.500}',
hoverColor: '{surface.600}'
color: '{text.muted.color}',
hoverColor: '{text.hover.muted.color}'
},
rowAction: {
hoverBackground: '{surface.100}',
highlightHoverBackground: '{surface.0}',
color: '{surface.500}',
hoverColor: '{surface.500}'
nodeToggleButton: {
hoverBackground: '{content.hover.background}',
highlightHoverBackground: '{content.background}',
color: '{text.color}',
hoverColor: '{text.muted.color}'
},
colorScheme: {
light: {
root: {
borderColor: '{content.border.color}'
},
row: {
stripedBackground: '{surface.50}'
},
bodyCell: {
selectedBorderColor: '{primary.100}'
}
},
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}'
}
}
}

8
components/lib/timeline/style/TimelineStyle.js
View File

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

14
components/lib/tree/style/TreeStyle.js
View File

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

6
components/lib/treetable/BodyCell.vue
View File

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

24
components/lib/treetable/style/TreeTableStyle.js
View File

@ -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 }) => [