Merge branch 'master' of https://github.com/primefaces/primevue

apps/showcase/doc/common/apidoc/index.json

@@ -13463,7 +13463,7 @@
                             "optional": true,
                             "readonly": false,
                             "type": "boolean",
-                            "default": "true",
+                            "default": "false",
                             "description": "Displays a button to clear the column filtering."
                         },
                         {
@@ -80226,6 +80226,24 @@
                             "default": "",
                             "description": "Padding of header"
                         },
+                        {
+                            "name": "sm.padding",
+                            "token": "datatable.header.sm.padding",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Sm padding of header"
+                        },
+                        {
+                            "name": "lg.padding",
+                            "token": "datatable.header.lg.padding",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Lg padding of header"
+                        },
                         {
                             "name": "headerCell.background",
                             "token": "datatable.header.cell.background",
@@ -80352,6 +80370,24 @@
                             "default": "",
                             "description": "Focus ring shadow of header cell"
                         },
+                        {
+                            "name": "sm.padding",
+                            "token": "datatable.header.cell.sm.padding",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Sm padding of header cell"
+                        },
+                        {
+                            "name": "lg.padding",
+                            "token": "datatable.header.cell.lg.padding",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Lg padding of header cell"
+                        },
                         {
                             "name": "columnTitle.fontWeight",
                             "token": "datatable.column.title.font.weight",
@@ -80487,6 +80523,24 @@
                             "default": "",
                             "description": "Padding of body cell"
                         },
+                        {
+                            "name": "sm.padding",
+                            "token": "datatable.body.cell.sm.padding",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Sm padding of body cell"
+                        },
+                        {
+                            "name": "lg.padding",
+                            "token": "datatable.body.cell.lg.padding",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Lg padding of body cell"
+                        },
                         {
                             "name": "bodyCell.selectedBorderColor",
                             "token": "datatable.body.cell.selected.border.color",
@@ -80532,6 +80586,24 @@
                             "default": "",
                             "description": "Padding of footer cell"
                         },
+                        {
+                            "name": "sm.padding",
+                            "token": "datatable.footer.cell.sm.padding",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Sm padding of footer cell"
+                        },
+                        {
+                            "name": "lg.padding",
+                            "token": "datatable.footer.cell.lg.padding",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Lg padding of footer cell"
+                        },
                         {
                             "name": "columnFooter.fontWeight",
                             "token": "datatable.column.footer.font.weight",
@@ -80586,6 +80658,24 @@
                             "default": "",
                             "description": "Padding of footer"
                         },
+                        {
+                            "name": "sm.padding",
+                            "token": "datatable.footer.sm.padding",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Sm padding of footer"
+                        },
+                        {
+                            "name": "lg.padding",
+                            "token": "datatable.footer.lg.padding",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Lg padding of footer"
+                        },
                         {
                             "name": "dropPoint.color",
                             "token": "datatable.drop.point.color",
@@ -92222,40 +92312,40 @@
                 "ProgressSpinnerDesignTokens": {
                     "props": [
                         {
-                            "name": "root.color.1",
+                            "name": "root.colorOne",
-                            "token": "progressspinner.color.1",
+                            "token": "progressspinner.color.one",
                             "optional": true,
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Color.1 of root"
+                            "description": "Color one of root"
                         },
                         {
-                            "name": "root.color.2",
+                            "name": "root.colorTwo",
-                            "token": "progressspinner.color.2",
+                            "token": "progressspinner.color.two",
                             "optional": true,
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Color.2 of root"
+                            "description": "Color two of root"
                         },
                         {
-                            "name": "root.color.3",
+                            "name": "root.colorThree",
-                            "token": "progressspinner.color.3",
+                            "token": "progressspinner.color.three",
                             "optional": true,
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Color.3 of root"
+                            "description": "Color three of root"
                         },
                         {
-                            "name": "root.color.4",
+                            "name": "root.colorFour",
-                            "token": "progressspinner.color.4",
+                            "token": "progressspinner.color.four",
                             "optional": true,
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Color.4 of root"
+                            "description": "Color four of root"
                         }
                     ]
                 }
@@ -98288,22 +98378,22 @@
                             "description": "Checked color of icon"
                         },
                         {
-                            "name": "content.left",
+                            "name": "content.padding",
-                            "token": "togglebutton.content.left",
+                            "token": "togglebutton.content.padding",
                             "optional": true,
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Left of content"
+                            "description": "Padding of content"
                         },
                         {
-                            "name": "content.top",
+                            "name": "content.borderRadius",
-                            "token": "togglebutton.content.top",
+                            "token": "togglebutton.content.border.radius",
                             "optional": true,
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Top of content"
+                            "description": "Border radius of content"
                         },
                         {
                             "name": "content.checkedShadow",
@@ -98314,6 +98404,24 @@
                             "default": "",
                             "description": "Checked shadow of content"
                         },
+                        {
+                            "name": "sm.padding",
+                            "token": "togglebutton.content.sm.padding",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Sm padding of content"
+                        },
+                        {
+                            "name": "lg.padding",
+                            "token": "togglebutton.content.lg.padding",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Lg padding of content"
+                        },
                         {
                             "name": "content.checkedBackground",
                             "token": "togglebutton.content.checked.background",

packages/primevue/src/column/BaseColumn.vue

@@ -80,7 +80,7 @@ export default {
         },
         showClearButton: {
             type: Boolean,
-            default: true
+            default: false
         },
         showApplyButton: {
             type: Boolean,

packages/primevue/src/column/Column.d.ts

@@ -431,7 +431,7 @@ export interface ColumnProps {
     showFilterOperator?: boolean | undefined;
     /**
      * Displays a button to clear the column filtering.
-     * @defaultValue true
+     * @defaultValue false
      */
     showClearButton?: boolean | undefined;
     /**

packages/primevue/src/datatable/ColumnFilter.vue

@@ -17,7 +17,7 @@
             v-bind="{ ...getColumnPT('pcColumnFilterButton', ptmFilterMenuParams), ...filterButtonProps.filter }"
         >
             <template #icon="slotProps">
-                <component :is="filterIconTemplate || 'FilterIcon'" :class="slotProps.class" v-bind="getColumnPT('filterMenuIcon')" />
+                <component :is="filterIconTemplate || hasRowFilter() ? 'FilterFillIcon' : 'FilterIcon'" :class="slotProps.class" v-bind="getColumnPT('filterMenuIcon')" />
             </template>
         </Button>
         <Button
@@ -170,6 +170,7 @@ import { FilterOperator } from '@primevue/core/api';
 import BaseComponent from '@primevue/core/basecomponent';
 import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
 import FilterIcon from '@primevue/icons/filter';
+import FilterFillIcon from '@primevue/icons/filterfill';
 import FilterSlashIcon from '@primevue/icons/filterslash';
 import PlusIcon from '@primevue/icons/plus';
 import TrashIcon from '@primevue/icons/trash';
@@ -212,7 +213,7 @@ export default {
         },
         showClearButton: {
             type: Boolean,
-            default: true
+            default: false
         },
         showApplyButton: {
             type: Boolean,
@@ -718,6 +719,7 @@ export default {
         Button,
         Portal,
         FilterSlashIcon,
+        FilterFillIcon,
         FilterIcon,
         TrashIcon,
         PlusIcon

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 {

packages/primevue/src/progressspinner/style/ProgressSpinnerStyle.js

@@ -31,7 +31,7 @@ const theme = ({ dt }) => `
 .p-progressspinner-circle {
     stroke-dasharray: 89, 200;
     stroke-dashoffset: 0;
-    stroke: ${dt('progressspinner.color.1')};
+    stroke: ${dt('progressspinner.colorOne')};
     animation: p-progressspinner-dash 1.5s ease-in-out infinite, p-progressspinner-color 6s ease-in-out infinite;
     stroke-linecap: round;
 }
@@ -58,17 +58,17 @@ const theme = ({ dt }) => `
 @keyframes p-progressspinner-color {
     100%,
     0% {
-        stroke: ${dt('progressspinner.color.1')};
+        stroke: ${dt('progressspinner.colorOne')};
     }
     40% {
-        stroke: ${dt('progressspinner.color.2')};
+        stroke: ${dt('progressspinner.colorTwo')};
     }
     66% {
-        stroke: ${dt('progressspinner.color.3')};
+        stroke: ${dt('progressspinner.colorThree')};
     }
     80%,
     90% {
-        stroke: ${dt('progressspinner.color.4')};
+        stroke: ${dt('progressspinner.colorFour')};
     }
 }
 `;

packages/primevue/src/togglebutton/style/ToggleButtonStyle.js

@@ -5,8 +5,6 @@ const theme = ({ dt }) => `
     display: inline-flex;
     cursor: pointer;
     user-select: none;
-    align-items: center;
-    justify-content: center;
     overflow: hidden;
     position: relative;
     color: ${dt('togglebutton.color')};
@@ -24,35 +22,16 @@ const theme = ({ dt }) => `
 }
 
 .p-togglebutton-content {
-    position: relative;
     display: inline-flex;
+    flex: 1 1 auto;
     align-items: center;
     justify-content: center;
     gap: ${dt('togglebutton.gap')};
-}
+    padding: ${dt('togglebutton.content.padding')};
-
-.p-togglebutton-label,
-.p-togglebutton-icon {
-    position: relative;
-    transition: none;
-}
-
-.p-togglebutton::before {
-    content: "";
     background: transparent;
+    border-radius: ${dt('togglebutton.content.border.radius')};
     transition: background ${dt('togglebutton.transition.duration')}, color ${dt('togglebutton.transition.duration')}, border-color ${dt('togglebutton.transition.duration')},
             outline-color ${dt('togglebutton.transition.duration')}, box-shadow ${dt('togglebutton.transition.duration')};
-    position: absolute;
-    inset-inline-start: ${dt('togglebutton.content.left')};
-    inset-block-start: ${dt('togglebutton.content.top')};
-    width: calc(100% - calc(2 * ${dt('togglebutton.content.left')}));
-    height: calc(100% - calc(2 * ${dt('togglebutton.content.top')}));
-    border-radius: ${dt('togglebutton.border.radius')};
-}
-
-.p-togglebutton.p-togglebutton-checked::before {
-    background: ${dt('togglebutton.content.checked.background')};
-    box-shadow: ${dt('togglebutton.content.checked.shadow')};
 }
 
 .p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover {
@@ -66,6 +45,11 @@ const theme = ({ dt }) => `
     color: ${dt('togglebutton.checked.color')};
 }
 
+.p-togglebutton-checked .p-togglebutton-content {
+    background: ${dt('togglebutton.content.checked.background')};
+    box-shadow: ${dt('togglebutton.content.checked.shadow')};
+}
+
 .p-togglebutton:focus-visible {
     box-shadow: ${dt('togglebutton.focus.ring.shadow')};
     outline: ${dt('togglebutton.focus.ring.width')} ${dt('togglebutton.focus.ring.style')} ${dt('togglebutton.focus.ring.color')};
@@ -84,6 +68,12 @@ const theme = ({ dt }) => `
     color: ${dt('togglebutton.disabled.color')};
 }
 
+.p-togglebutton-label,
+.p-togglebutton-icon {
+    position: relative;
+    transition: none;
+}
+
 .p-togglebutton-icon {
     color: ${dt('togglebutton.icon.color')};
 }
@@ -105,10 +95,18 @@ const theme = ({ dt }) => `
     font-size: ${dt('togglebutton.sm.font.size')};
 }
 
+.p-togglebutton-sm .p-togglebutton-content {
+    padding: ${dt('togglebutton.content.sm.padding')};
+}
+
 .p-togglebutton-lg {
     padding: ${dt('togglebutton.lg.padding')};
     font-size: ${dt('togglebutton.lg.font.size')};
 }
+
+.p-togglebutton-lg .p-togglebutton-content {
+    padding: ${dt('togglebutton.content.lg.padding')};
+}
 `;
 
 const classes = {

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}'

packages/themes/src/presets/aura/progressspinner/index.js

@@ -2,18 +2,18 @@ export default {
     colorScheme: {
         light: {
             root: {
-                'color.1': '{red.500}',
+                colorOne: '{red.500}',
-                'color.2': '{blue.500}',
+                colorTwo: '{blue.500}',
-                'color.3': '{green.500}',
+                colorThree: '{green.500}',
-                'color.4': '{yellow.500}'
+                colorFour: '{yellow.500}'
             }
         },
         dark: {
             root: {
-                'color.1': '{red.400}',
+                colorOne: '{red.400}',
-                'color.2': '{blue.400}',
+                colorTwo: '{blue.400}',
-                'color.3': '{green.400}',
+                colorThree: '{green.400}',
-                'color.4': '{yellow.400}'
+                colorFour: '{yellow.400}'
             }
         }
     }

packages/themes/src/presets/aura/togglebutton/index.js

@@ -1,6 +1,6 @@
 export default {
     root: {
-        padding: '0.5rem 1rem',
+        padding: '0.25rem',
         borderRadius: '{content.border.radius}',
         gap: '0.5rem',
         fontWeight: '500',
@@ -18,20 +18,26 @@ export default {
         transitionDuration: '{form.field.transition.duration}',
         sm: {
             fontSize: '{form.field.sm.font.size}',
-            padding: '0.375rem 0.75rem'
+            padding: '0.25rem'
         },
         lg: {
             fontSize: '{form.field.lg.font.size}',
-            padding: '0.625rem 1.25rem'
+            padding: '0.25rem'
         }
     },
     icon: {
         disabledColor: '{form.field.disabled.color}'
     },
     content: {
-        left: '0.25rem',
+        padding: '0.25rem 0.75rem',
-        top: '0.25rem',
+        borderRadius: '{content.border.radius}',
-        checkedShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04)'
+        checkedShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04)',
+        sm: {
+            padding: '0.25rem 0.75rem'
+        },
+        lg: {
+            padding: '0.25rem 0.75rem'
+        }
     },
     colorScheme: {
         light: {

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}'

packages/themes/src/presets/lara/progressspinner/index.js

@@ -2,18 +2,18 @@ export default {
     colorScheme: {
         light: {
             root: {
-                'color.1': '{pink.500}',
+                colorOne: '{pink.500}',
-                'color.2': '{sky.500}',
+                colorTwo: '{sky.500}',
-                'color.3': '{emerald.500}',
+                colorThree: '{emerald.500}',
-                'color.4': '{amber.500}'
+                colorFour: '{amber.500}'
             }
         },
         dark: {
             root: {
-                'color.1': '{pink.400}',
+                colorOne: '{pink.400}',
-                'color.2': '{sky.400}',
+                colorTwo: '{sky.400}',
-                'color.3': '{emerald.400}',
+                colorThree: '{emerald.400}',
-                'color.4': '{amber.400}'
+                colorFour: '{amber.400}'
             }
         }
     }

packages/themes/src/presets/lara/togglebutton/index.js

@@ -39,10 +39,16 @@ export default {
         disabledColor: '{form.field.disabled.color}'
     },
     content: {
-        left: '0.25rem',
-        top: '0.25rem',
         checkedBackground: 'transparent',
-        checkedShadow: 'none'
+        checkedShadow: 'none',
+        padding: '0',
+        borderRadius: '0',
+        sm: {
+            padding: '0'
+        },
+        lg: {
+            padding: '0'
+        }
     },
     colorScheme: {
         light: {

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}'

packages/themes/src/presets/material/progressspinner/index.js

@@ -2,18 +2,18 @@ export default {
     colorScheme: {
         light: {
             root: {
-                'color.1': '{red.500}',
+                colorOne: '{red.500}',
-                'color.2': '{blue.500}',
+                colorTwo: '{blue.500}',
-                'color.3': '{green.500}',
+                colorThree: '{green.500}',
-                'color.4': '{yellow.500}'
+                colorFour: '{yellow.500}'
             }
         },
         dark: {
             root: {
-                'color.1': '{red.400}',
+                colorOne: '{red.400}',
-                'color.2': '{blue.400}',
+                colorTwo: '{blue.400}',
-                'color.3': '{green.400}',
+                colorThree: '{green.400}',
-                'color.4': '{yellow.400}'
+                colorFour: '{yellow.400}'
             }
         }
     }

packages/themes/src/presets/material/togglebutton/index.js

@@ -38,10 +38,16 @@ export default {
         disabledColor: '{form.field.disabled.color}'
     },
     content: {
-        left: '0.25rem',
-        top: '0.25rem',
         checkedBackground: 'transparent',
-        checkedShadow: 'none'
+        checkedShadow: 'none',
+        padding: '0',
+        borderRadius: '0',
+        sm: {
+            padding: '0'
+        },
+        lg: {
+            padding: '0'
+        }
     },
     colorScheme: {
         light: {

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}'

packages/themes/src/presets/nora/progressspinner/index.js

@@ -2,18 +2,18 @@ export default {
     colorScheme: {
         light: {
             root: {
-                'color.1': '{red.500}',
+                colorOne: '{red.500}',
-                'color.2': '{blue.500}',
+                colorTwo: '{blue.500}',
-                'color.3': '{green.500}',
+                colorThree: '{green.500}',
-                'color.4': '{yellow.500}'
+                colorFour: '{yellow.500}'
             }
         },
         dark: {
             root: {
-                'color.1': '{red.400}',
+                colorOne: '{red.400}',
-                'color.2': '{blue.400}',
+                colorTwo: '{blue.400}',
-                'color.3': '{green.400}',
+                colorThree: '{green.400}',
-                'color.4': '{yellow.400}'
+                colorFour: '{yellow.400}'
             }
         }
     }

packages/themes/src/presets/nora/togglebutton/index.js

@@ -39,10 +39,16 @@ export default {
         disabledColor: '{form.field.disabled.color}'
     },
     content: {
-        left: '0.25rem',
-        top: '0.25rem',
         checkedBackground: 'transparent',
-        checkedShadow: 'none'
+        checkedShadow: 'none',
+        padding: '0',
+        borderRadius: '0',
+        sm: {
+            padding: '0'
+        },
+        lg: {
+            padding: '0'
+        }
     },
     colorScheme: {
         light: {

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
@@ -266,6 +310,28 @@ export interface DataTableDesignTokens extends ColorSchemeDesignToken<DataTableD
          * @designToken datatable.body.cell.padding
          */
         padding?: 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;
+        };
         /**
          * Selected border color of body cell
          *
@@ -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

packages/themes/types/progressspinner/index.d.ts

@@ -16,28 +16,28 @@ export interface ProgressSpinnerDesignTokens extends ColorSchemeDesignToken<Prog
      */
     root?: {
         /**
-         * Color.1 of root
+         * Color one of root
          *
-         * @designToken progressspinner.color.1
+         * @designToken progressspinner.color.one
          */
-        'color.1'?: string;
+        colorOne?: string;
         /**
-         * Color.2 of root
+         * Color two of root
          *
-         * @designToken progressspinner.color.2
+         * @designToken progressspinner.color.two
          */
-        'color.2'?: string;
+        colorTwo?: string;
         /**
-         * Color.3 of root
+         * Color three of root
          *
-         * @designToken progressspinner.color.3
+         * @designToken progressspinner.color.three
          */
-        'color.3'?: string;
+        colorThree?: string;
         /**
-         * Color.4 of root
+         * Color four of root
          *
-         * @designToken progressspinner.color.4
+         * @designToken progressspinner.color.four
          */
-        'color.4'?: string;
+        colorFour?: string;
     };
 }

packages/themes/types/togglebutton/index.d.ts

@@ -221,23 +221,45 @@ export interface ToggleButtonDesignTokens extends ColorSchemeDesignToken<ToggleB
      */
     content?: {
         /**
-         * Left of content
+         * Padding of content
          *
-         * @designToken togglebutton.content.left
+         * @designToken togglebutton.content.padding
          */
-        left?: string;
+        padding?: string;
         /**
-         * Top of content
+         * Border radius of content
          *
-         * @designToken togglebutton.content.top
+         * @designToken togglebutton.content.border.radius
          */
-        top?: string;
+        borderRadius?: string;
         /**
          * Checked shadow of content
          *
          * @designToken togglebutton.content.checked.shadow
          */
         checkedShadow?: string;
+        /**
+         * Sm of content
+         */
+        sm?: {
+            /**
+             * Sm padding of content
+             *
+             * @designToken togglebutton.content.sm.padding
+             */
+            padding?: string;
+        };
+        /**
+         * Lg of content
+         */
+        lg?: {
+            /**
+             * Lg padding of content
+             *
+             * @designToken togglebutton.content.lg.padding
+             */
+            padding?: string;
+        };
         /**
          * Checked background of content
          *