From dcaeb764118dcb46369789ff09ed1580adef13b3 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 14 Jan 2025 15:10:50 +0300
Subject: [PATCH] Fixed #6738 - DataTable: size variant still using hardcode
 size

---
 .../src/datatable/style/DataTableStyle.js     |  20 ++--
 .../src/presets/aura/datatable/index.js       |  38 +++++-
 .../src/presets/lara/datatable/index.js       |  38 +++++-
 .../src/presets/material/datatable/index.js   |  38 +++++-
 .../src/presets/nora/datatable/index.js       |  38 +++++-
 packages/themes/types/datatable/index.d.ts    | 110 ++++++++++++++++++
 6 files changed, 256 insertions(+), 26 deletions(-)

diff --git a/packages/primevue/src/datatable/style/DataTableStyle.js b/packages/primevue/src/datatable/style/DataTableStyle.js
index 525db9d6b..69e1225ed 100644
--- a/packages/primevue/src/datatable/style/DataTableStyle.js
+++ b/packages/primevue/src/datatable/style/DataTableStyle.js
@@ -511,43 +511,43 @@ const theme = ({ dt }) => `
 }
 
 .p-datatable.p-datatable-sm .p-datatable-header {
-    padding: 0.375rem 0.5rem;
+    padding: ${dt('datatable.header.sm.padding')};
 }
 
 .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
-    padding: 0.375rem 0.5rem;
+    padding: ${dt('datatable.header.cell.sm.padding')};
 }
 
 .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
-    padding: 0.375rem 0.5rem;
+    padding: ${dt('datatable.body.cell.sm.padding')};
 }
 
 .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
-    padding: 0.375rem 0.5rem;
+    padding: ${dt('datatable.footer.cell.sm.padding')};
 }
 
 .p-datatable.p-datatable-sm .p-datatable-footer {
-    padding: 0.375rem 0.5rem;
+    padding: ${dt('datatable.footer.sm.padding')};
 }
 
 .p-datatable.p-datatable-lg .p-datatable-header {
-    padding: 1rem 1.25rem;
+    padding: ${dt('datatable.header.lg.padding')};
 }
 
 .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
-    padding: 1rem 1.25rem;
+    padding: ${dt('datatable.header.cell.lg.padding')};
 }
 
 .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
-    padding: 1rem 1.25rem;
+    padding: ${dt('datatable.body.lg.padding')};
 }
 
 .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
-    padding: 1rem 1.25rem;
+    padding: ${dt('datatable.footer.cell.lg.padding')};
 }
 
 .p-datatable.p-datatable-lg .p-datatable-footer {
-    padding: 1rem 1.25rem;
+    padding: ${dt('datatable.footer.lg.padding')};
 }
 
 .p-datatable-row-toggle-button {
diff --git a/packages/themes/src/presets/aura/datatable/index.js b/packages/themes/src/presets/aura/datatable/index.js
index 2c0235551..44aae65bf 100644
--- a/packages/themes/src/presets/aura/datatable/index.js
+++ b/packages/themes/src/presets/aura/datatable/index.js
@@ -7,7 +7,13 @@ export default {
         borderColor: '{datatable.border.color}',
         color: '{content.color}',
         borderWidth: '0 0 1px 0',
-        padding: '0.75rem 1rem'
+        padding: '0.75rem 1rem',
+        sm: {
+            padding: '0.375rem 0.5rem'
+        },
+        lg: {
+            padding: '1rem 1.25rem'
+        }
     },
     headerCell: {
         background: '{content.background}',
@@ -25,6 +31,12 @@ export default {
             color: '{focus.ring.color}',
             offset: '-1px',
             shadow: '{focus.ring.shadow}'
+        },
+        sm: {
+            padding: '0.375rem 0.5rem'
+        },
+        lg: {
+            padding: '1rem 1.25rem'
         }
     },
     columnTitle: {
@@ -47,13 +59,25 @@ export default {
     },
     bodyCell: {
         borderColor: '{datatable.border.color}',
-        padding: '0.75rem 1rem'
+        padding: '0.75rem 1rem',
+        sm: {
+            padding: '0.375rem 0.5rem'
+        },
+        lg: {
+            padding: '1rem 1.25rem'
+        }
     },
     footerCell: {
         background: '{content.background}',
         borderColor: '{datatable.border.color}',
         color: '{content.color}',
-        padding: '0.75rem 1rem'
+        padding: '0.75rem 1rem',
+        sm: {
+            padding: '0.375rem 0.5rem'
+        },
+        lg: {
+            padding: '1rem 1.25rem'
+        }
     },
     columnFooter: {
         fontWeight: '600'
@@ -63,7 +87,13 @@ export default {
         borderColor: '{datatable.border.color}',
         color: '{content.color}',
         borderWidth: '0 0 1px 0',
-        padding: '0.75rem 1rem'
+        padding: '0.75rem 1rem',
+        sm: {
+            padding: '0.375rem 0.5rem'
+        },
+        lg: {
+            padding: '1rem 1.25rem'
+        }
     },
     dropPoint: {
         color: '{primary.color}'
diff --git a/packages/themes/src/presets/lara/datatable/index.js b/packages/themes/src/presets/lara/datatable/index.js
index 7b06a3667..96fe187df 100644
--- a/packages/themes/src/presets/lara/datatable/index.js
+++ b/packages/themes/src/presets/lara/datatable/index.js
@@ -5,7 +5,13 @@ export default {
     header: {
         borderColor: '{datatable.border.color}',
         borderWidth: '1px 0 1px 0',
-        padding: '0.75rem 1rem'
+        padding: '0.75rem 1rem',
+        sm: {
+            padding: '0.375rem 0.5rem'
+        },
+        lg: {
+            padding: '1rem 1.25rem'
+        }
     },
     headerCell: {
         selectedBackground: '{highlight.background}',
@@ -20,6 +26,12 @@ export default {
             color: '{focus.ring.color}',
             offset: '{focus.ring.offset}',
             shadow: 'inset {focus.ring.shadow}'
+        },
+        sm: {
+            padding: '0.375rem 0.5rem'
+        },
+        lg: {
+            padding: '1rem 1.25rem'
         }
     },
     columnTitle: {
@@ -42,11 +54,23 @@ export default {
     },
     bodyCell: {
         borderColor: '{datatable.border.color}',
-        padding: '0.75rem 1rem'
+        padding: '0.75rem 1rem',
+        sm: {
+            padding: '0.375rem 0.5rem'
+        },
+        lg: {
+            padding: '1rem 1.25rem'
+        }
     },
     footerCell: {
         borderColor: '{datatable.border.color}',
-        padding: '0.75rem 1rem'
+        padding: '0.75rem 1rem',
+        sm: {
+            padding: '0.375rem 0.5rem'
+        },
+        lg: {
+            padding: '1rem 1.25rem'
+        }
     },
     columnFooter: {
         fontWeight: '700'
@@ -54,7 +78,13 @@ export default {
     footer: {
         borderColor: '{datatable.border.color}',
         borderWidth: '0 0 1px 0',
-        padding: '0.75rem 1rem'
+        padding: '0.75rem 1rem',
+        sm: {
+            padding: '0.375rem 0.5rem'
+        },
+        lg: {
+            padding: '1rem 1.25rem'
+        }
     },
     dropPoint: {
         color: '{primary.color}'
diff --git a/packages/themes/src/presets/material/datatable/index.js b/packages/themes/src/presets/material/datatable/index.js
index 3309ff373..47f0a5db5 100644
--- a/packages/themes/src/presets/material/datatable/index.js
+++ b/packages/themes/src/presets/material/datatable/index.js
@@ -7,7 +7,13 @@ export default {
         borderColor: '{datatable.border.color}',
         color: '{content.color}',
         borderWidth: '0 0 1px 0',
-        padding: '0.75rem 1rem'
+        padding: '0.75rem 1rem',
+        sm: {
+            padding: '0.375rem 0.5rem'
+        },
+        lg: {
+            padding: '1rem 1.25rem'
+        }
     },
     headerCell: {
         background: '{content.background}',
@@ -25,6 +31,12 @@ export default {
             color: '{focus.ring.color}',
             offset: '-1px',
             shadow: '{focus.ring.shadow}'
+        },
+        sm: {
+            padding: '0.375rem 0.5rem'
+        },
+        lg: {
+            padding: '1rem 1.25rem'
         }
     },
     columnTitle: {
@@ -47,13 +59,25 @@ export default {
     },
     bodyCell: {
         borderColor: '{datatable.border.color}',
-        padding: '0.75rem 1rem'
+        padding: '0.75rem 1rem',
+        sm: {
+            padding: '0.375rem 0.5rem'
+        },
+        lg: {
+            padding: '1rem 1.25rem'
+        }
     },
     footerCell: {
         background: '{content.background}',
         borderColor: '{datatable.border.color}',
         color: '{content.color}',
-        padding: '0.75rem 1rem'
+        padding: '0.75rem 1rem',
+        sm: {
+            padding: '0.375rem 0.5rem'
+        },
+        lg: {
+            padding: '1rem 1.25rem'
+        }
     },
     columnFooter: {
         fontWeight: '600'
@@ -63,7 +87,13 @@ export default {
         borderColor: '{datatable.border.color}',
         color: '{content.color}',
         borderWidth: '0 0 1px 0',
-        padding: '0.75rem 1rem'
+        padding: '0.75rem 1rem',
+        sm: {
+            padding: '0.375rem 0.5rem'
+        },
+        lg: {
+            padding: '1rem 1.25rem'
+        }
     },
     dropPoint: {
         color: '{primary.color}'
diff --git a/packages/themes/src/presets/nora/datatable/index.js b/packages/themes/src/presets/nora/datatable/index.js
index 0399ce410..5f56d15d3 100644
--- a/packages/themes/src/presets/nora/datatable/index.js
+++ b/packages/themes/src/presets/nora/datatable/index.js
@@ -7,7 +7,13 @@ export default {
         borderColor: '{datatable.border.color}',
         color: '{content.color}',
         borderWidth: '1px 0 1px 0',
-        padding: '0.75rem 1rem'
+        padding: '0.75rem 1rem',
+        sm: {
+            padding: '0.375rem 0.5rem'
+        },
+        lg: {
+            padding: '1rem 1.25rem'
+        }
     },
     headerCell: {
         background: '{content.background}',
@@ -25,6 +31,12 @@ export default {
             color: '{focus.ring.color}',
             offset: '-1px',
             shadow: '{focus.ring.shadow}'
+        },
+        sm: {
+            padding: '0.375rem 0.5rem'
+        },
+        lg: {
+            padding: '1rem 1.25rem'
         }
     },
     columnTitle: {
@@ -47,13 +59,25 @@ export default {
     },
     bodyCell: {
         borderColor: '{datatable.border.color}',
-        padding: '0.75rem 1rem'
+        padding: '0.75rem 1rem',
+        sm: {
+            padding: '0.375rem 0.5rem'
+        },
+        lg: {
+            padding: '1rem 1.25rem'
+        }
     },
     footerCell: {
         background: '{content.background}',
         borderColor: '{datatable.border.color}',
         color: '{content.color}',
-        padding: '0.75rem 1rem'
+        padding: '0.75rem 1rem',
+        sm: {
+            padding: '0.375rem 0.5rem'
+        },
+        lg: {
+            padding: '1rem 1.25rem'
+        }
     },
     columnFooter: {
         fontWeight: '700'
@@ -63,7 +87,13 @@ export default {
         borderColor: '{datatable.border.color}',
         color: '{content.color}',
         borderWidth: '0 0 1px 0',
-        padding: '0.75rem 1rem'
+        padding: '0.75rem 1rem',
+        sm: {
+            padding: '0.375rem 0.5rem'
+        },
+        lg: {
+            padding: '1rem 1.25rem'
+        }
     },
     dropPoint: {
         color: '{primary.color}'
diff --git a/packages/themes/types/datatable/index.d.ts b/packages/themes/types/datatable/index.d.ts
index 5ae65b9d1..4f7e48a7b 100644
--- a/packages/themes/types/datatable/index.d.ts
+++ b/packages/themes/types/datatable/index.d.ts
@@ -62,6 +62,28 @@ export interface DataTableDesignTokens extends ColorSchemeDesignToken<DataTableD
          * @designToken datatable.header.padding
          */
         padding?: string;
+        /**
+         * Sm of header
+         */
+        sm?: {
+            /**
+             * Sm padding of header
+             *
+             * @designToken datatable.header.sm.padding
+             */
+            padding?: string;
+        };
+        /**
+         * Lg of header
+         */
+        lg?: {
+            /**
+             * Lg padding of header
+             *
+             * @designToken datatable.header.lg.padding
+             */
+            padding?: string;
+        };
     };
     /**
      * Used to pass tokens of the header cell section
@@ -156,6 +178,28 @@ export interface DataTableDesignTokens extends ColorSchemeDesignToken<DataTableD
              */
             shadow?: string;
         };
+        /**
+         * Sm of header cell
+         */
+        sm?: {
+            /**
+             * Sm padding of header cell
+             *
+             * @designToken datatable.header.cell.sm.padding
+             */
+            padding?: string;
+        };
+        /**
+         * Lg of header cell
+         */
+        lg?: {
+            /**
+             * Lg padding of header cell
+             *
+             * @designToken datatable.header.cell.lg.padding
+             */
+            padding?: string;
+        };
     };
     /**
      * Used to pass tokens of the column title section
@@ -272,6 +316,28 @@ export interface DataTableDesignTokens extends ColorSchemeDesignToken<DataTableD
          * @designToken datatable.body.cell.selected.border.color
          */
         selectedBorderColor?: string;
+        /**
+         * Sm of body cell
+         */
+        sm?: {
+            /**
+             * Sm padding of body cell
+             *
+             * @designToken datatable.body.cell.sm.padding
+             */
+            padding?: string;
+        };
+        /**
+         * Lg of body cell
+         */
+        lg?: {
+            /**
+             * Lg padding of body cell
+             *
+             * @designToken datatable.body.cell.lg.padding
+             */
+            padding?: string;
+        };
     };
     /**
      * Used to pass tokens of the footer cell section
@@ -301,6 +367,28 @@ export interface DataTableDesignTokens extends ColorSchemeDesignToken<DataTableD
          * @designToken datatable.footer.cell.padding
          */
         padding?: string;
+        /**
+         * Sm of footer cell
+         */
+        sm?: {
+            /**
+             * Sm padding of footer cell
+             *
+             * @designToken datatable.footer.cell.sm.padding
+             */
+            padding?: string;
+        };
+        /**
+         * Lg of footer cell
+         */
+        lg?: {
+            /**
+             * Lg padding of footer cell
+             *
+             * @designToken datatable.footer.cell.lg.padding
+             */
+            padding?: string;
+        };
     };
     /**
      * Used to pass tokens of the column footer section
@@ -347,6 +435,28 @@ export interface DataTableDesignTokens extends ColorSchemeDesignToken<DataTableD
          * @designToken datatable.footer.padding
          */
         padding?: string;
+        /**
+         * Sm of footer
+         */
+        sm?: {
+            /**
+             * Sm padding of footer
+             *
+             * @designToken datatable.footer.sm.padding
+             */
+            padding?: string;
+        };
+        /**
+         * Lg of footer
+         */
+        lg?: {
+            /**
+             * Lg padding of footer
+             *
+             * @designToken datatable.footer.lg.padding
+             */
+            padding?: string;
+        };
     };
     /**
      * Used to pass tokens of the drop point section