From c617766c772530e5ad21e0ee3faed5bb2bc02d49 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 5 May 2024 00:57:50 +0300
Subject: [PATCH] Refactored tokens of Data components

---
 .../lib/datatable/style/DataTableStyle.js     |  24 +-
 .../style/OrganizationChartStyle.js           |   6 +-
 .../lib/paginator/style/PaginatorStyle.js     |   6 +-
 components/lib/themes/aura/datatable/index.js | 215 ++++++------------
 components/lib/themes/aura/dataview/index.js  |  46 ++--
 .../themes/aura/organizationchart/index.js    |  49 ++--
 components/lib/themes/aura/paginator/index.js |  40 +---
 components/lib/themes/aura/timeline/index.js  |  28 +--
 components/lib/themes/aura/tree/index.js      |  70 ++----
 components/lib/themes/aura/treetable/index.js | 122 ++++------
 .../lib/timeline/style/TimelineStyle.js       |   8 +-
 components/lib/tree/style/TreeStyle.js        |  14 +-
 components/lib/treetable/BodyCell.vue         |   6 +-
 .../lib/treetable/style/TreeTableStyle.js     |  24 +-
 14 files changed, 227 insertions(+), 431 deletions(-)

diff --git a/components/lib/datatable/style/DataTableStyle.js b/components/lib/datatable/style/DataTableStyle.js
index 3be5d78bd..098cd7100 100644
--- a/components/lib/datatable/style/DataTableStyle.js
+++ b/components/lib/datatable/style/DataTableStyle.js
@@ -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;
 }
 `;
diff --git a/components/lib/organizationchart/style/OrganizationChartStyle.js b/components/lib/organizationchart/style/OrganizationChartStyle.js
index 8cfedb47e..bcb758525 100644
--- a/components/lib/organizationchart/style/OrganizationChartStyle.js
+++ b/components/lib/organizationchart/style/OrganizationChartStyle.js
@@ -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;
diff --git a/components/lib/paginator/style/PaginatorStyle.js b/components/lib/paginator/style/PaginatorStyle.js
index 27ff60b1b..668e398aa 100644
--- a/components/lib/paginator/style/PaginatorStyle.js
+++ b/components/lib/paginator/style/PaginatorStyle.js
@@ -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 {
diff --git a/components/lib/themes/aura/datatable/index.js b/components/lib/themes/aura/datatable/index.js
index 45a466a91..969d26e8e 100644
--- a/components/lib/themes/aura/datatable/index.js
+++ b/components/lib/themes/aura/datatable/index.js
@@ -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}'
-                    }
-                }
             }
         }
     }
diff --git a/components/lib/themes/aura/dataview/index.js b/components/lib/themes/aura/dataview/index.js
index 7cd90ed20..3995b628f 100644
--- a/components/lib/themes/aura/dataview/index.js
+++ b/components/lib/themes/aura/dataview/index.js
@@ -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}'
     }
 };
diff --git a/components/lib/themes/aura/organizationchart/index.js b/components/lib/themes/aura/organizationchart/index.js
index 945f8e6d6..3b4277704 100644
--- a/components/lib/themes/aura/organizationchart/index.js
+++ b/components/lib/themes/aura/organizationchart/index.js
@@ -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}'
     }
 };
diff --git a/components/lib/themes/aura/paginator/index.js b/components/lib/themes/aura/paginator/index.js
index 55a4c761e..b7315cdb9 100644
--- a/components/lib/themes/aura/paginator/index.js
+++ b/components/lib/themes/aura/paginator/index.js
@@ -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}'
     }
 };
diff --git a/components/lib/themes/aura/timeline/index.js b/components/lib/themes/aura/timeline/index.js
index c80c4e3a9..16f32a615 100644
--- a/components/lib/themes/aura/timeline/index.js
+++ b/components/lib/themes/aura/timeline/index.js
@@ -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}'
     }
 };
diff --git a/components/lib/themes/aura/tree/index.js b/components/lib/themes/aura/tree/index.js
index f06864e15..3e08dc3e5 100644
--- a/components/lib/themes/aura/tree/index.js
+++ b/components/lib/themes/aura/tree/index.js
@@ -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}'
     }
 };
diff --git a/components/lib/themes/aura/treetable/index.js b/components/lib/themes/aura/treetable/index.js
index fcb4ec6f4..dfee366ca 100644
--- a/components/lib/themes/aura/treetable/index.js
+++ b/components/lib/themes/aura/treetable/index.js
@@ -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}'
             }
         }
     }
diff --git a/components/lib/timeline/style/TimelineStyle.js b/components/lib/timeline/style/TimelineStyle.js
index 999c5e523..9b32d8184 100644
--- a/components/lib/timeline/style/TimelineStyle.js
+++ b/components/lib/timeline/style/TimelineStyle.js
@@ -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 {
diff --git a/components/lib/tree/style/TreeStyle.js b/components/lib/tree/style/TreeStyle.js
index b9483d545..10e4cf450 100644
--- a/components/lib/tree/style/TreeStyle.js
+++ b/components/lib/tree/style/TreeStyle.js
@@ -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')};
 }
 
diff --git a/components/lib/treetable/BodyCell.vue b/components/lib/treetable/BodyCell.vue
index 0c3642b20..5602f8f86 100644
--- a/components/lib/treetable/BodyCell.vue
+++ b/components/lib/treetable/BodyCell.vue
@@ -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">
diff --git a/components/lib/treetable/style/TreeTableStyle.js b/components/lib/treetable/style/TreeTableStyle.js
index 1e58c5a72..1f201c9d3 100644
--- a/components/lib/treetable/style/TreeTableStyle.js
+++ b/components/lib/treetable/style/TreeTableStyle.js
@@ -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 }) => [