diff --git a/src/components/button/themes/button/light/button.base.scss b/src/components/button/themes/button/light/button.base.scss
index abff08661..3c9be637e 100644
--- a/src/components/button/themes/button/light/button.base.scss
+++ b/src/components/button/themes/button/light/button.base.scss
@@ -1,14 +1,8 @@
 @use '../../../../../styles/common/component';
 @use '../../../../../styles/utilities' as *;
 
-$slot-spacing: var(--igc-spacing-large);
-$padding-sm: calc(var(--igc-spacing-small) * 4);
-$padding-md: calc(var(--igc-spacing-medium) * 3);
-$padding-lg: calc(var(--igc-spacing-large) * 2);
-
 :host {
     --size: #{sizable(rem(24px), rem(30px), rem(36px))};
-    --spacing: #{sizable($padding-sm, $padding-md, $padding-lg)};
 
     display: inline-flex;
     vertical-align: middle;
@@ -44,7 +38,7 @@ $padding-lg: calc(var(--igc-spacing-large) * 2);
     text-decoration: none;
     z-index: 0;
     height: var(--size);
-    padding: 0 var(--spacing);
+    padding: 0 pad(8px, 12px, 16px);
 
     &::before {
         position: absolute;
@@ -72,11 +66,11 @@ $padding-lg: calc(var(--igc-spacing-large) * 2);
 }
 
 [name='prefix']::slotted(*) {
-    margin-inline-end: $slot-spacing;
+    margin-inline-end: pad(8px);
 }
 
 [name='suffix']::slotted(*) {
-    margin-inline-start: $slot-spacing;
+    margin-inline-start: pad(8px);
 }
 
 span[part='prefix'],
diff --git a/src/components/button/themes/button/light/button.fluent.scss b/src/components/button/themes/button/light/button.fluent.scss
index f4a2b2445..2281feb14 100644
--- a/src/components/button/themes/button/light/button.fluent.scss
+++ b/src/components/button/themes/button/light/button.fluent.scss
@@ -3,17 +3,14 @@
 $text-color: var(--text-color, #{utils.contrast-color(primary, 600)}) !default;
 $hover-background: var(--hover-background, #{utils.color(primary, 600)}) !default;
 $active-background: var(--active-background, #{utils.color(primary, 700)}) !default;
-$padding-sm: calc(var(--igc-spacing-small) * 4);
-$padding-md: calc(var(--igc-spacing-medium) * 4);
-$padding-lg: calc(var(--igc-spacing-large) * 2);
 
 :host {
     --size: #{utils.sizable(utils.rem(24px), utils.rem(32px), utils.rem(38px))};
-    --spacing: #{utils.sizable($padding-sm, $padding-md, $padding-lg)};
 }
 
 [part='base'] {
     @include utils.border-radius(utils.rem(2px));
+    padding: 0 utils.pad(8px, 16px, 16px);
 }
 
 // FLAT
diff --git a/src/components/button/themes/icon-button/light/icon-button.base.scss b/src/components/button/themes/icon-button/light/icon-button.base.scss
index da9a6eb97..a344e2ecd 100644
--- a/src/components/button/themes/icon-button/light/icon-button.base.scss
+++ b/src/components/button/themes/icon-button/light/icon-button.base.scss
@@ -1,13 +1,8 @@
 @use '../../../../../styles/common/component';
 @use '../../../../../styles/utilities' as *;
 
-$padding-sm: calc(var(--igc-spacing-small) * 4);
-$padding-md: calc(var(--igc-spacing-medium) * 1.25);
-$padding-lg: calc(var(--igc-spacing-large) * .75);
-
 :host {
     --icon-size: #{sizable(rem(16px), rem(20px), rem(24px))};
-    --spacing: #{sizable($padding-sm, $padding-md, $padding-lg)};
 
     display: inline-flex;
     vertical-align: middle;
@@ -33,7 +28,7 @@ slot {
     border: none;
     outline-style: none;
     background: transparent;
-    padding: var(--spacing);
+    padding: pad(4px, 5px, 6px);
     color: color(gray, 900);
     user-select: none;
     -webkit-tap-highlight-color: transparent;
diff --git a/src/components/button/themes/icon-button/light/icon-button.bootstrap.scss b/src/components/button/themes/icon-button/light/icon-button.bootstrap.scss
index 91ca09dd6..ce7137fc3 100644
--- a/src/components/button/themes/icon-button/light/icon-button.bootstrap.scss
+++ b/src/components/button/themes/icon-button/light/icon-button.bootstrap.scss
@@ -1,86 +1,82 @@
-@use '../../../../../styles/utilities' as utils;
-
-$padding-sm: calc(var(--igc-spacing-small) * 3.75);
-$padding-md: calc(var(--igc-spacing-medium) * 2.25);
-$padding-lg: calc(var(--igc-spacing-large) * 1.5);
+@use '../../../../../styles/utilities' as *;
 
 :host {
-    --size: #{utils.sizable(utils.rem(31px), utils.rem(38px), utils.rem(48px))};
-    --spacing: #{utils.sizable($padding-sm, $padding-md, $padding-lg)};
+    --size: #{sizable(rem(31px), rem(38px), rem(48px))};
 }
 
 [part='base'] {
-    @include utils.border-radius(utils.rem(4px));
+    @include border-radius(rem(4px));
 
     width: var(--size);
     height: var(--size);
     transition: box-shadow .15s ease-out, color .15s ease-out, background .15s ease-out;
-    color: #{utils.color(primary, 500)};
+    color: #{color(primary, 500)};
+    padding: pad(7.5px, 9px, 12px);
 
     &:hover {
-        color: #{utils.color(primary, 800)};
+        color: #{color(primary, 800)};
     }
 
     &:focus,
     &:active {
-        color: #{utils.color(primary, 600)};
-        background: #{utils.color(gray, 100)};
+        color: #{color(primary, 600)};
+        background: #{color(gray, 100)};
         box-shadow: none;
     }
 }
 
 :host([variant='contained']) {
     [part='base'] {
-        color: #{utils.contrast-color(primary, 600)};
-        background: #{utils.color(primary, 500)};
+        color: #{contrast-color(primary, 600)};
+        background: #{color(primary, 500)};
 
         &:hover {
-            background: #{utils.color(primary, 600)};
+            background: #{color(primary, 600)};
         }
 
         &:focus,
         &:active {
-            background: #{utils.color(primary, 600)};
-            box-shadow: 0 0 0 utils.rem(4px) utils.color(primary, 200, .5);
+            background: #{color(primary, 600)};
+            box-shadow: 0 0 0 rem(4px) color(primary, 200, .5);
         }
     }
 }
 
 :host([variant='outlined']) {
     [part='base'] {
-        box-shadow: 0 0 0 utils.rem(1px) utils.color(primary, 500);
+        box-shadow: 0 0 0 rem(1px) color(primary, 500);
 
         &:hover {
-            color: #{utils.contrast-color(primary, 600)};
-            background: #{utils.color(primary, 600)};
+            color: #{contrast-color(primary, 600)};
+            background: #{color(primary, 600)};
         }
 
         &:focus,
         &:active {
-            color: #{utils.contrast-color(primary, 600)};
-            background: #{utils.color(primary, 600)};
-            box-shadow: 0 0 0 utils.rem(4px) utils.color(primary, 200, .5);
+            color: #{contrast-color(primary, 600)};
+            background: #{color(primary, 600)};
+            box-shadow: 0 0 0 rem(4px) color(primary, 200, .5);
         }
     }
 }
 
 :host([disabled]) {
     [part='base'] {
-        color: #{utils.color(primary, 100)};
+        color: #{color(primary, 100)};
         background: transparent;
     }
 }
 
 :host([disabled][variant='contained']) {
     [part='base'] {
-        background: #{utils.color(primary, 100)};
-        color: #{utils.color(primary, 300)};
+        background: #{color(primary, 100)};
+        color: #{color(primary, 300)};
     }
 }
 
 :host([disabled][variant='outlined']) {
     [part='base'] {
-        color: #{utils.color(primary, 100)};
-        box-shadow: 0 0 0 utils.rem(1px) utils.color(primary, 100);
+        color: #{color(primary, 100)};
+        box-shadow: 0 0 0 rem(1px) color(primary, 100);
     }
 }
diff --git a/src/components/button/themes/icon-button/light/icon-button.fluent.scss b/src/components/button/themes/icon-button/light/icon-button.fluent.scss
index 3fbd861f7..fdedfd06c 100644
--- a/src/components/button/themes/icon-button/light/icon-button.fluent.scss
+++ b/src/components/button/themes/icon-button/light/icon-button.fluent.scss
@@ -1,25 +1,22 @@
-@use '../../../../../styles/utilities' as utils;
+@use '../../../../../styles/utilities' as *;
 
-$text-color: var(--text-color, #{utils.contrast-color(primary, 600)}) !default;
-$hover-background: var(--hover-background, #{utils.color(primary, 600)}) !default;
-$padding-sm: calc(var(--igc-spacing-small) * 2);
-$padding-md: calc(var(--igc-spacing-medium) * 1.5);
-$padding-lg: calc(var(--igc-spacing-large) * .875);
+$text-color: var(--text-color, #{contrast-color(primary, 600)}) !default;
+$hover-background: var(--hover-background, #{color(primary, 600)}) !default;
 
 :host {
-    --size: #{utils.sizable(utils.rem(24px), utils.rem(32px), utils.rem(38px))};
-    --spacing: #{utils.sizable($padding-sm, $padding-md, $padding-lg)};
+    --size: #{sizable(rem(24px), rem(32px), rem(38px))};
 }
 
 [part='base'] {
-    @include utils.border-radius(utils.rem(2px));
+    @include border-radius(rem(2px));
 
     background: transparent;
-    color: utils.color(primary, 500);
+    color: color(primary, 500);
     transition: color .15s ease-out, background .15s ease-out;
     box-shadow: none;
     width: var(--size);
     height: var(--size);
+    padding: pad(4px, 6px, 7px);
 
     &::after {
         position: absolute;
@@ -32,44 +29,44 @@ $padding-lg: calc(var(--igc-spacing-large) * .875);
     }
 
     &:hover {
-        color: utils.color(primary, 500);
-        background: utils.color(gray, 200);
+        color: color(primary, 500);
+        background: color(gray, 200);
     }
 
     &:active {
-        color: utils.color(primary, 500);
-        background: utils.color(gray, 300);
+        color: color(primary, 500);
+        background: color(gray, 300);
     }
 
     &:focus-visible::after {
-        box-shadow: 0 0 0 utils.rem(1px) utils.color(gray, 500);
+        box-shadow: 0 0 0 rem(1px) color(gray, 500);
     }
 }
 
 :host([variant='contained']) {
     [part='base'] {
         color: $text-color;
-        background: utils.color(primary, 500);
+        background: color(primary, 500);
 
         &:hover {
             background: $hover-background;
         }
 
         &:active {
-            color: utils.contrast-color(primary, 800);
-            background: utils.color(primary, 800);
+            color: contrast-color(primary, 800);
+            background: color(primary, 800);
         }
 
         &:focus-visible::after {
-            box-shadow: 0 0 0 utils.rem(1px) utils.contrast-color(primary, 600);
+            box-shadow: 0 0 0 rem(1px) contrast-color(primary, 600);
         }
     }
 }
 
 :host([variant='outlined']) {
     [part='base'] {
-        color: utils.color(gray, 900);
-        box-shadow: 0 0 0 1px utils.color(gray, 700);
+        color: color(gray, 900);
+        box-shadow: 0 0 0 1px color(gray, 700);
 
         &:focus {
             background: transparent;
@@ -77,25 +74,25 @@ $padding-lg: calc(var(--igc-spacing-large) * .875);
 
         &:hover,
         &:focus:hover {
-            background: utils.color(gray, 100);
+            background: color(gray, 100);
         }
 
         &:focus:active {
-            background: utils.color(gray, 200);
+            background: color(gray, 200);
         }
     }
 }
 
 :host([disabled]) {
     [part='base'] {
-        color: utils.color(gray, 400);
-        background: utils.color(gray, 100);
+        color: color(gray, 400);
+        background: color(gray, 100);
     }
 }
 
 :host([disabled][variant='contained']),
 :host([disabled][variant='outlined']) {
     [part='base'] {
-        color: utils.color(gray, 500);
+        color: color(gray, 500);
     }
 }
diff --git a/src/components/button/themes/icon-button/light/icon-button.indigo.scss b/src/components/button/themes/icon-button/light/icon-button.indigo.scss
index 9fe3da63a..caa440a43 100644
--- a/src/components/button/themes/icon-button/light/icon-button.indigo.scss
+++ b/src/components/button/themes/icon-button/light/icon-button.indigo.scss
@@ -1,45 +1,42 @@
-@use '../../../../../styles/utilities' as utils;
-
-$padding-sm: calc(var(--igc-spacing-small) * 3);
-$padding-md: calc(var(--igc-spacing-medium) * 1.5);
+@use '../../../../../styles/utilities' as *;
 
 :host {
-    --size: #{utils.sizable(utils.rem(28px), utils.rem(32px), utils.rem(36px))};
-    --spacing: #{utils.sizable($padding-sm, $padding-md)};
+    --size: #{sizable(rem(28px), rem(32px), rem(36px))};
 }
 
 [part='base'] {
     transition: color .15s ease-in-out, box-shadow .15s ease-in-out, background .15s ease-in-out;
-    color: utils.color(gray, 700);
+    color: color(gray, 700);
     width: var(--size);
     height: var(--size);
+    padding: pad(6px);
 
     &:hover {
-        color: utils.color(gray, 900);
+        color: color(gray, 900);
         background: transparent;
     }
 
     &:focus,
     &:active {
-        color: utils.color(gray, 900);
+        color: color(gray, 900);
         background: transparent;
-        box-shadow: 0 0 0 utils.rem(3px) utils.color(gray, 300);
+        box-shadow: 0 0 0 rem(3px) color(gray, 300);
     }
 }
 
 :host([variant='contained']) {
     [part='base'] {
-        color: utils.contrast-color(primary, 600);
-        background: utils.color(primary, 500);
+        color: contrast-color(primary, 600);
+        background: color(primary, 500);
 
         &:hover {
-            background: #{utils.color(primary, 400)};
+            background: #{color(primary, 400)};
         }
 
         &:focus,
         &:active {
-            background: #{utils.color(primary, 400)};
-            box-shadow: 0 0 0 utils.rem(3px) utils.color(primary, 200);
+            background: #{color(primary, 400)};
+            box-shadow: 0 0 0 rem(3px) color(primary, 200);
         }
     }
 }
@@ -51,28 +48,28 @@ $padding-md: calc(var(--igc-spacing-medium) * 1.5);
         &::after {
             position: absolute;
             content: '';
-            box-shadow: inset 0 0 0 utils.rem(2px) utils.color(gray, 500);
+            box-shadow: inset 0 0 0 rem(2px) color(gray, 500);
             width: 100%;
             height: 100%;
             border-radius: inherit;
         }
 
         &:hover {
-            color: utils.color(gray, 900);
-            background: utils.color(gray, 100);
+            color: color(gray, 900);
+            background: color(gray, 100);
         }
 
         &:focus,
         &:active {
-            color: utils.color(gray, 900);
-            box-shadow: 0 0 0 utils.rem(3px) utils.color(gray, 300);
+            color: color(gray, 900);
+            box-shadow: 0 0 0 rem(3px) color(gray, 300);
         }
     }
 }
 
 :host([disabled]) {
     [part='base'] {
-        color: utils.color(gray, 400);
+        color: color(gray, 400);
         background: transparent;
         box-shadow: none;
     }
@@ -80,7 +77,7 @@ $padding-md: calc(var(--igc-spacing-medium) * 1.5);
 
 :host([disabled][variant='contained']) {
     [part='base'] {
-        background: utils.color(gray, 100);
-        color: utils.color(gray, 400);
+        background: color(gray, 100);
+        color: color(gray, 400);
     }
 }
diff --git a/src/components/button/themes/icon-button/light/icon-button.material.scss b/src/components/button/themes/icon-button/light/icon-button.material.scss
index 78f49e1e5..bbc1d7449 100644
--- a/src/components/button/themes/icon-button/light/icon-button.material.scss
+++ b/src/components/button/themes/icon-button/light/icon-button.material.scss
@@ -1,16 +1,13 @@
 @use '../../../../../styles/utilities' as *;
 
-$padding-sm: calc(var(--igc-spacing-small) * 3);
-$padding-md: calc(var(--igc-spacing-medium) * 1.5);
-
 :host {
     --size: #{sizable(rem(24px), rem(30px), rem(36px))};
-    --spacing: #{sizable($padding-sm, $padding-md)};
 }
 
 [part='base'] {
     width: var(--size);
     height: var(--size);
+    padding: pad(6px);
 }
 
 :host([variant='contained']) {
diff --git a/src/components/calendar/themes/calendar.base.scss b/src/components/calendar/themes/calendar.base.scss
index 109df3a9e..d7abe56df 100644
--- a/src/components/calendar/themes/calendar.base.scss
+++ b/src/components/calendar/themes/calendar.base.scss
@@ -4,6 +4,8 @@
 @use 'sass:map';
 @use 'sass:math';
 
+$border-radius: calc(#{var(--size)} / 2);
+
 :host(igc-calendar) {
     --size: #{sizable(#{rem(24px)}, #{rem(28px)}, #{rem(32px)})};
 
@@ -37,7 +39,7 @@
     }
 
     igc-days-view::part(date-inner) {
-        @include border-radius(math.div(#{var(--size)}, 2) + rem(2px));
+        @include border-radius(calc($border-radius + rem(2px)));
     }
 
     igc-months-view {
@@ -46,7 +48,7 @@
         &::part(month-inner) {
             height: var(--size);
 
-            @include border-radius(math.div(#{var(--size)}, 2) + rem(2px));
+            @include border-radius(calc($border-radius + rem(2px)));
         }
     }
 
@@ -56,7 +58,7 @@
         &::part(year-inner) {
             height: var(--size);
 
-            @include border-radius(math.div(var(--size), 2) + rem(2px));
+            @include border-radius(calc($border-radius + rem(2px)));
         }
     }
 }
diff --git a/src/components/chip/themes/chip.base.scss b/src/components/chip/themes/chip.base.scss
index 2a00f13fd..cdef54cc9 100644
--- a/src/components/chip/themes/chip.base.scss
+++ b/src/components/chip/themes/chip.base.scss
@@ -2,33 +2,14 @@
 @use '../../../styles/utilities' as *;
 
 :host {
+    --size: #{sizable(rem(20px), rem(24px), rem(32px))};
+
     display: inline-flex;
     vertical-align: top;
 }
 
-:host button {
-    @include type-style('body-2');
-    @include border-radius(rem(16px));
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-family: var(--ig-font-family);
-    border-style: none;
-    box-shadow: none;
-    cursor: pointer;
-
-    &[disabled] {
-        pointer-events: none;
-        color: color(gray, 500);
-    }
-}
-
 :host([size='small']) {
-    button {
-        height: rem(20px);
-        padding: rem(2px);
-    }
+    --component-size: var(--ig-size, var(--ig-size-small));
 
     [part='prefix'] {
         margin-inline-end: rem(3px);
@@ -40,10 +21,7 @@
 }
 
 :host([size='medium']) {
-    button {
-        height: rem(24px);
-        padding: rem(6px);
-    }
+    --component-size: var(--ig-size, var(--ig-size-medium));
 
     [part='prefix'] {
         margin-inline-end: rem(6px);
@@ -55,10 +33,7 @@
 }
 
 :host([size='large']) {
-    button {
-        height: rem(32px);
-        padding: rem(12px);
-    }
+    --component-size: var(--ig-size, var(--ig-size-large));
 
     [part='prefix'] {
         margin-inline-end: rem(8px);
@@ -73,6 +48,26 @@
     }
 }
 
+:host button {
+    @include type-style('body-2');
+    @include border-radius(rem(16px));
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: var(--ig-font-family);
+    border-style: none;
+    box-shadow: none;
+    cursor: pointer;
+    height: var(--size);
+    padding: pad(2px, 6px, 12px);
+
+    &[disabled] {
+        pointer-events: none;
+        color: color(gray, 500);
+    }
+}
+
 :host([variant='primary']) button,
 :host([selected][variant='primary']) button:not([disabled]) {
     background: color(primary, 500);
diff --git a/src/components/dropdown/dropdown-header.ts b/src/components/dropdown/dropdown-header.ts
index 3fc6b3603..d6996b84d 100644
--- a/src/components/dropdown/dropdown-header.ts
+++ b/src/components/dropdown/dropdown-header.ts
@@ -2,13 +2,14 @@ import { html, LitElement } from 'lit';
 import { themes } from '../../theming/theming-decorator.js';
 import { styles } from './themes/light/dropdown-header.base.css.js';
 import { styles as bootstrap } from './themes/light/dropdown-header.bootstrap.css.js';
+import { styles as fluent } from './themes/light/dropdown-header.fluent.css.js';
 
 /**
  * @element igc-dropdown-header - Represents a header item in a dropdown list.
  *
  * @slot - Renders the header.
  */
-@themes({ bootstrap })
+@themes({ bootstrap, fluent })
 export default class IgcDropdownHeaderComponent extends LitElement {
   public static readonly tagName: string = 'igc-dropdown-header';
 
diff --git a/src/components/dropdown/themes/light/dropdown-group.base.scss b/src/components/dropdown/themes/light/dropdown-group.base.scss
index d0878c9ae..425ebb476 100644
--- a/src/components/dropdown/themes/light/dropdown-group.base.scss
+++ b/src/components/dropdown/themes/light/dropdown-group.base.scss
@@ -13,38 +13,7 @@
         position: relative;
         color: color(secondary, 500);
         pointer-events: none;
-    }
-}
-
-:host([size='small']) {
-    ::slotted(igc-dropdown-item),
-    ::slotted(igc-select-item) {
-        padding: var(--igc-spacing-small) calc(var(--igc-spacing-small) * 3);
-    }
-
-    ::slotted([slot='label']) {
-        padding: var(--igc-spacing-small) calc(var(--igc-spacing-small) * 2);
-    }
-}
-
-:host([size='medium']) {
-    ::slotted(igc-dropdown-item),
-    ::slotted(igc-select-item) {
-        padding: var(--igc-spacing-medium) calc(var(--igc-spacing-medium) * 3);
-    }
-
-    ::slotted([slot='label']) {
-        padding: var(--igc-spacing-medium) calc(var(--igc-spacing-medium) * 2);
-    }
-}
-
-:host([size='large']) {
-    ::slotted(igc-dropdown-item),
-    ::slotted(igc-select-item) {
-        padding: var(--igc-spacing-large) calc(var(--igc-spacing-large) * 3);
-    }
-
-    ::slotted([slot='label']) {
-        padding: var(--igc-spacing-large) calc(var(--igc-spacing-large) * 2);
+        padding-inline: pad-inline(4px, 8px, 16px);
+        padding-block: pad-block(2px, 4px, 8px);
     }
 }
diff --git a/src/components/dropdown/themes/light/dropdown-group.fluent.scss b/src/components/dropdown/themes/light/dropdown-group.fluent.scss
index 16cfa222d..4230d083e 100644
--- a/src/components/dropdown/themes/light/dropdown-group.fluent.scss
+++ b/src/components/dropdown/themes/light/dropdown-group.fluent.scss
@@ -1,19 +1,7 @@
 @use '../../../../styles/utilities' as *;
 
-:host([size='small']) ::slotted(igc-dropdown-item),
-:host([size='small']) ::slotted(igc-select-item),
-:host([size='small']) ::slotted([slot='label']) {
-    padding: var(--igc-spacing-small);
-}
-
-:host([size='medium']) ::slotted(igc-dropdown-item),
-:host([size='medium']) ::slotted(igc-select-item),
-:host([size='medium']) ::slotted([slot='label']) {
-    padding: var(--igc-spacing-medium);
-}
-
-:host([size='large']) ::slotted(igc-dropdown-item),
-:host([size='large']) ::slotted(igc-select-item),
-:host([size='large']) ::slotted([slot='label']) {
-    padding: var(--igc-spacing-large);
+:host {
+    ::slotted([slot='label']) {
+        padding: pad(2px, 4px, 8px);
+    }
 }
diff --git a/src/components/dropdown/themes/light/dropdown-header.base.scss b/src/components/dropdown/themes/light/dropdown-header.base.scss
index 5f9d0c794..5770b68be 100644
--- a/src/components/dropdown/themes/light/dropdown-header.base.scss
+++ b/src/components/dropdown/themes/light/dropdown-header.base.scss
@@ -12,6 +12,8 @@ $header-color: var(--header-color, color(secondary, 500)) !default;
     position: relative;
     color: $header-color;
     pointer-events: none;
+    padding-inline: pad-inline(4px, 8px, 16px);
+    padding-block: pad-block(2px, 4px, 8px);
 }
 
 ::slotted(*) {
diff --git a/src/components/dropdown/themes/light/dropdown-header.fluent.scss b/src/components/dropdown/themes/light/dropdown-header.fluent.scss
new file mode 100644
index 000000000..8ab7a28fc
--- /dev/null
+++ b/src/components/dropdown/themes/light/dropdown-header.fluent.scss
@@ -0,0 +1,5 @@
+@use '../../../../styles/utilities' as *;
+
+:host {
+    padding: pad(2px, 4px, 8px);
+}
diff --git a/src/components/dropdown/themes/light/dropdown-item.base.scss b/src/components/dropdown/themes/light/dropdown-item.base.scss
index 1f8beb415..1ba40b693 100644
--- a/src/components/dropdown/themes/light/dropdown-item.base.scss
+++ b/src/components/dropdown/themes/light/dropdown-item.base.scss
@@ -13,6 +13,8 @@
     cursor: pointer;
     color: color(gray, 800);
     outline-style: none;
+    padding-inline: pad-inline(6px, 12px, 24px);
+    padding-block: pad-block(2px, 4px, 8px);
 }
 
 :host(:hover),
@@ -57,9 +59,9 @@
 }
 
 [name='prefix']::slotted(*) {
-    margin-inline-end: calc(var(--igc-spacing-large) * 2);
+    margin-inline-end: pad(16px);
 }
 
 [name='suffix']::slotted(*) {
-    margin-inline-start: calc(var(--igc-spacing-large) * 2);
+    margin-inline-start: pad(16px);
 }
diff --git a/src/components/dropdown/themes/light/dropdown-item.fluent.scss b/src/components/dropdown/themes/light/dropdown-item.fluent.scss
index 548a1e7fa..5df5fe6d0 100644
--- a/src/components/dropdown/themes/light/dropdown-item.fluent.scss
+++ b/src/components/dropdown/themes/light/dropdown-item.fluent.scss
@@ -2,6 +2,10 @@
 
 $selected-item-color: var(--selected-item-color, contrast-color(gray, 200)) !default;
 
+:host {
+    padding: pad(2px, 4px, 8px);
+}
+
 :host(:hover),
 :host([active]) {
     background: color(gray, 100);
diff --git a/src/components/dropdown/themes/light/dropdown.base.scss b/src/components/dropdown/themes/light/dropdown.base.scss
index 221db1f46..66a975f75 100644
--- a/src/components/dropdown/themes/light/dropdown.base.scss
+++ b/src/components/dropdown/themes/light/dropdown.base.scss
@@ -19,34 +19,13 @@
 }
 
 :host([size='small']) {
-    ::slotted(igc-dropdown-item),
-    ::slotted(igc-select-item) {
-        padding: var(--igc-spacing-small) calc(var(--igc-spacing-small) * 3);
-    }
-
-    ::slotted(igc-dropdown-header) {
-        padding: var(--igc-spacing-small) calc(var(--igc-spacing-small) * 2);
-    }
+    --component-size: var(--ig-size, var(--ig-size-small));
 }
 
 :host([size='medium']) {
-    ::slotted(igc-dropdown-item),
-    ::slotted(igc-select-item) {
-        padding: var(--igc-spacing-medium) calc(var(--igc-spacing-medium) * 3);
-    }
-
-    ::slotted(igc-dropdown-header) {
-        padding: var(--igc-spacing-medium) calc(var(--igc-spacing-medium) * 2);
-    }
+    --component-size: var(--ig-size, var(--ig-size-medium));
 }
 
 :host([size='large']) {
-    ::slotted(igc-dropdown-item),
-    ::slotted(igc-select-item) {
-        padding: var(--igc-spacing-large) calc(var(--igc-spacing-large) * 3);
-    }
-
-    ::slotted(igc-dropdown-header) {
-        padding: var(--igc-spacing-large) calc(var(--igc-spacing-large) * 2);
-    }
+    --component-size: var(--ig-size, var(--ig-size-large));
 }
diff --git a/src/components/dropdown/themes/light/dropdown.fluent.scss b/src/components/dropdown/themes/light/dropdown.fluent.scss
index b88acd528..8c98255a4 100644
--- a/src/components/dropdown/themes/light/dropdown.fluent.scss
+++ b/src/components/dropdown/themes/light/dropdown.fluent.scss
@@ -1,23 +1,5 @@
 @use '../../../../styles/utilities' as *;
 
-:host([size='small']) ::slotted(igc-dropdown-item),
-:host([size='small']) ::slotted(igc-select-item),
-:host([size='small']) ::slotted(igc-dropdown-header) {
-    padding: var(--igc-spacing-small);
-}
-
-:host([size='medium']) ::slotted(igc-dropdown-item),
-:host([size='medium']) ::slotted(igc-select-item),
-:host([size='medium']) ::slotted(igc-dropdown-header) {
-    padding: var(--igc-spacing-medium);
-}
-
-:host([size='large']) ::slotted(igc-dropdown-item),
-:host([size='large']) ::slotted(igc-select-item),
-:host([size='large']) ::slotted(igc-dropdown-header) {
-    padding: var(--igc-spacing-large);
-}
-
 [part='base'] {
     @include border-radius(rem(2px));
 
diff --git a/src/components/expansion-panel/themes/light/expansion-panel.base.scss b/src/components/expansion-panel/themes/light/expansion-panel.base.scss
index f1963de57..987f0c95a 100644
--- a/src/components/expansion-panel/themes/light/expansion-panel.base.scss
+++ b/src/components/expansion-panel/themes/light/expansion-panel.base.scss
@@ -1,7 +1,6 @@
 @use '../../../../styles/utilities/index' as *;
 
 $disabled-color: var(--disabled-color, color(gray, 500)) !default;
-$padding: calc(var(--igc-spacing-large) * 2) calc(var(--igc-spacing-large) * 3);
 
 :host {
     --lines-clamped: 1;
@@ -18,7 +17,8 @@ $padding: calc(var(--igc-spacing-large) * 2) calc(var(--igc-spacing-large) * 3);
     display: flex;
     align-items: center;
     cursor: pointer;
-    padding: $padding;
+    padding-inline: pad-inline(24px);
+    padding-block: pad-block(16px);
 
     &:focus,
     &:active {
@@ -56,7 +56,8 @@ $padding: calc(var(--igc-spacing-large) * 2) calc(var(--igc-spacing-large) * 3);
     @include type-style('body-2');
 
     overflow: hidden;
-    padding: $padding;
+    padding-inline: pad-inline(24px);
+    padding-block: pad-block(16px);
 }
 
 [part~='indicator'] {
@@ -68,12 +69,12 @@ $padding: calc(var(--igc-spacing-large) * 2) calc(var(--igc-spacing-large) * 3);
 }
 
 :host([indicator-position='start']) [part~='indicator'] {
-    margin-inline-end: calc(var(--igc-spacing-large) * 2);
+    margin-inline-end: pad(16px);
 }
 
 :host([indicator-position='end']) [part~='indicator'] {
     order: 2;
-    margin-inline-start: calc(var(--igc-spacing-large) * 2);
+    margin-inline-start: pad(16px);
 }
 
 :host([indicator-position='none']) [part~='indicator'] {
diff --git a/src/components/icon/icon.material.scss b/src/components/icon/icon.material.scss
index 29bcf9f44..7ae361dad 100644
--- a/src/components/icon/icon.material.scss
+++ b/src/components/icon/icon.material.scss
@@ -1,32 +1,32 @@
 @use '../../styles/common/component';
 @use '../../styles/utilities' as *;
 
-$size: rem(20px);
-
 svg {
     height: 100%;
     width: 100%;
 }
 
 :host {
+    --size: #{sizable(rem(16px), rem(20px), rem(24px))};
+
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--size, $size);
-    height: var(--size, $size);
+    width: var(--size);
+    height: var(--size);
     fill: currentcolor;
 }
 
 :host([size='small']) {
-    --size: #{rem(16px)};
+    --component-size: var(--ig-size, var(--ig-size-small));
 }
 
 :host([size='medium']) {
-    --size: #{$size};
+    --component-size: var(--ig-size, var(--ig-size-medium));
 }
 
 :host([size='large']) {
-    --size: #{rem(24px)};
+    --component-size: var(--ig-size, var(--ig-size-large));
 }
 
 :host([mirrored]) {
diff --git a/src/components/input/themes/light/input.base.scss b/src/components/input/themes/light/input.base.scss
index 47edb28b0..27f5bf0fc 100644
--- a/src/components/input/themes/light/input.base.scss
+++ b/src/components/input/themes/light/input.base.scss
@@ -1,13 +1,6 @@
-@use 'sass:map';
 @use '../../../../styles/common/component';
 @use '../../../../styles/utilities' as *;
 
-$input-height: (
-    large: rem(56px),
-    medium: rem(48px),
-    small: rem(40px)
-);
-
 %starfix {
     display: flex;
     align-items: center;
@@ -16,12 +9,26 @@ $input-height: (
 }
 
 :host {
+    --size: #{sizable(rem(40px), rem(48px), rem(56px))};
+
     position: relative;
     display: block;
     font-family: var(--ig-font-family);
     outline-style: none;
 }
 
+:host([size='large']) {
+    --component-size: var(--ig-size, var(--ig-size-large));
+}
+
+:host([size='medium']) {
+    --component-size: var(--ig-size, var(--ig-size-medium));
+}
+
+:host([size='small']) {
+    --component-size: var(--ig-size, var(--ig-size-small));
+}
+
 [part='label'] {
     display: inline-block;
     white-space: nowrap;
@@ -29,7 +36,7 @@ $input-height: (
 
 [part~='input'] {
     width: 100%;
-    height: 100%;
+    height: var(--size);
     border: none;
     outline-style: none;
     color: inherit;
@@ -41,6 +48,7 @@ $input-height: (
     position: relative;
     display: grid;
     color: color(gray, 900);
+    height: var(--size);
 }
 
 [part='prefix'],
@@ -70,24 +78,3 @@ $input-height: (
 [part='helper-text'] {
     @include type-style('caption');
 }
-
-:host([size='large']) {
-    [part~='input'],
-    [part~='container'] {
-        height: map.get($input-height, 'large');
-    }
-}
-
-:host([size='medium']) {
-    [part~='input'],
-    [part~='container'] {
-        height: map.get($input-height, 'medium');
-    }
-}
-
-:host([size='small']) {
-    [part~='input'],
-    [part~='container'] {
-        height: map.get($input-height, 'small');
-    }
-}
diff --git a/src/components/input/themes/light/input.bootstrap.scss b/src/components/input/themes/light/input.bootstrap.scss
index b8b672a97..1d6a534bc 100644
--- a/src/components/input/themes/light/input.bootstrap.scss
+++ b/src/components/input/themes/light/input.bootstrap.scss
@@ -1,18 +1,35 @@
-@use '../../../../styles/utilities' as utils;
+@use '../../../../styles/utilities' as *;
 
 $input-background: var(--input-background, #fff) !default;
 
+:host([size='large']) {
+    --component-size: var(--ig-size, var(--ig-size-large));
+}
+
+:host([size='medium']) {
+    --component-size: var(--ig-size, var(--ig-size-medium));
+}
+
+:host([size='small']) {
+    --component-size: var(--ig-size, var(--ig-size-small));
+}
+
 :host {
+    --size: #{sizable(rem(31px), rem(38px), rem(48px))};
+    --font: #{sizable(rem(14px), rem(16px), rem(20px))};
+    --input-font: #{sizable(rem(16px), rem(16px), rem(20px))};
+
     &::after {
         background: none;
     }
 
     [part~='container'] {
-        @include utils.border-radius(utils.rem(4px));
+        @include border-radius(rem(4px));
 
         border-style: none;
         grid-template-columns: auto 1fr auto;
         background: $input-background;
+        height: var(--size);
 
         &::after {
             display: none;
@@ -20,13 +37,16 @@ $input-background: var(--input-background, #fff) !default;
     }
 
     [part~='input'] {
-        @include utils.border-radius(utils.rem(4px));
+        @include border-radius(rem(4px));
 
-        padding: initial;
+        height: var(--size);
+        font-size: var(--input-font);
+        padding-inline: pad-inline(8px, 12px, 16px);
+        padding-block: pad-block(4px, 6px, 8px);
         background: inherit;
         box-shadow: 0 0 0 0 transparent;
         z-index: 1;
-        border: 1px solid utils.color(gray, 400);
+        border: 1px solid color(gray, 400);
         transition: box-shadow .15s ease-out, border .15s ease-out;
         grid-area: 1 / 2;
     }
@@ -46,9 +66,9 @@ $input-background: var(--input-background, #fff) !default;
     }
 
     label {
-        line-height: utils.rem(24px);
-        margin-bottom: utils.rem(4px);
-        color: utils.color(gray, 700);
+        line-height: rem(24px);
+        margin-bottom: rem(4px);
+        color: color(gray, 700);
 
         &:empty {
             display: none;
@@ -58,15 +78,17 @@ $input-background: var(--input-background, #fff) !default;
     [part='prefix'],
     [part='suffix'] {
         position: relative;
-        padding: rem(16px);
         border-radius: none;
         min-width: auto;
-        color: utils.color(gray, 800);
-        background: utils.color(gray, 300);
+        color: color(gray, 800);
+        background: color(gray, 300);
         transition: box-shadow .15s ease-out, border .15s ease-out;
+        font-size: var(--font);
+        padding-inline: pad-inline(8px, 12px, 16px);
+        padding-block: pad-block(4px, 6px, 8px);
 
         &:focus-within {
-            box-shadow: 0 0 0 utils.rem(4px) utils.color(gray, 300, .38);
+            box-shadow: 0 0 0 rem(4px) color(gray, 300, .38);
         }
     }
 
@@ -74,7 +96,7 @@ $input-background: var(--input-background, #fff) !default;
         grid-area: 1 / 1;
         border: {
             style: solid;
-            color: utils.color(gray, 400);
+            color: color(gray, 400);
             inline: {
                 start-width: 1px;
                 end-width: 0;
@@ -84,10 +106,10 @@ $input-background: var(--input-background, #fff) !default;
                 end-width: 1px;
             };
             start: {
-                start-radius: utils.rem(4px);
+                start-radius: rem(4px);
             };
             end: {
-                start-radius: utils.rem(4px);
+                start-radius: rem(4px);
             };
         }
     }
@@ -97,7 +119,7 @@ $input-background: var(--input-background, #fff) !default;
 
         border: {
             style: solid;
-            color: utils.color(gray, 400);
+            color: color(gray, 400);
             inline: {
                 start-width: 0;
                 end-width: 1px;
@@ -107,87 +129,33 @@ $input-background: var(--input-background, #fff) !default;
                 end-width: 1px;
             };
             start: {
-                end-radius: utils.rem(4px);
+                end-radius: rem(4px);
             };
             end: {
-                end-radius: utils.rem(4px);
+                end-radius: rem(4px);
             };
         }
     }
 
     [part='helper-text'] {
-        @include utils.type-style('body-2');
+        @include type-style('body-2');
 
         margin-top: rem(4px);
-        color: utils.color(gray, 700);
-    }
-}
-
-:host([size='large']) {
-    [part~='container'],
-    [part~='input'] {
-        height: utils.rem(48px);
-    }
-
-    [part~='input'] {
-        font-size: utils.rem(20px);
-        padding: utils.rem(8px) utils.rem(16px);
-    }
-
-    [part='prefix'],
-    [part='suffix'] {
-        font-size: rem(20px);
-        padding: utils.rem(8px) utils.rem(16px);
-    }
-}
-
-:host([size='medium']) {
-    [part~='container'],
-    [part~='input'] {
-        height: utils.rem(38px);
-    }
-
-    [part~='input'] {
-        font-size: utils.rem(16px);
-        padding: utils.rem(6px) utils.rem(12px);
-    }
-
-    [part='prefix'],
-    [part='suffix'] {
-        font-size: utils.rem(16px);
-        padding: utils.rem(6px) utils.rem(12px);
-    }
-}
-
-:host([size='small']) {
-    [part~='container'],
-    [part~='input'] {
-        height: utils.rem(31px);
-    }
-
-    [part~='input'] {
-        font-size: utils.rem(16px);
-        padding: utils.rem(4px) utils.rem(8px);
-    }
-
-    [part='prefix'],
-    [part='suffix'] {
-        font-size: utils.rem(14px);
-        padding: utils.rem(4px) utils.rem(8px);
+        color: color(gray, 700);
     }
 }
 
 :host(:focus-within) {
     [part~='input'] {
-        box-shadow: 0 0 0 utils.rem(4px) utils.color(primary, 500, .38);
-        border-color: utils.color(primary, 500);
+        box-shadow: 0 0 0 rem(4px) color(primary, 500, .38);
+        border-color: color(primary, 500);
     }
 }
 
 :host([invalid]:focus-within) {
     [part~='input'] {
-        box-shadow: 0 0 0 utils.rem(4px) utils.color(error, 500, .38);
-        border-color: utils.color(error, 500);
+        box-shadow: 0 0 0 rem(4px) color(error, 500, .38);
+        border-color: color(error, 500);
     }
 }
 
@@ -196,12 +164,12 @@ $input-background: var(--input-background, #fff) !default;
     [part='prefix'],
     [part='suffix'],
     [part~='container'] {
-        background: utils.color(gray, 100);
-        color: utils.color(gray, 400);
+        background: color(gray, 100);
+        color: color(gray, 400);
     }
 
     [part~='input'] {
-        border-color: utils.color(gray, 300);
+        border-color: color(gray, 300);
     }
 }
 
@@ -209,13 +177,13 @@ $input-background: var(--input-background, #fff) !default;
     [part='prefix'],
     [part='suffix'],
     [part~='container'] {
-        color: utils.color(gray, 800);
+        color: color(gray, 800);
     }
 }
 
 :host(:focus-within[readonly]) {
     [part~='input'] {
-        box-shadow: 0 0 0 utils.rem(4px) utils.color(gray, 400, .38);
-        border-color: utils.color(gray, 400);
+        box-shadow: 0 0 0 rem(4px) color(gray, 400, .38);
+        border-color: color(gray, 400);
     }
 }
diff --git a/src/components/input/themes/light/input.fluent.scss b/src/components/input/themes/light/input.fluent.scss
index 4c3379d70..8b9b0000d 100644
--- a/src/components/input/themes/light/input.fluent.scss
+++ b/src/components/input/themes/light/input.fluent.scss
@@ -1,22 +1,32 @@
-@use 'sass:map';
-@use '../../../../styles/utilities' as utils;
-
-$container-background: var(--container-background, utils.color(surface, 500)) !default;
-$input-height: (
-    large: utils.rem(48px),
-    medium: utils.rem(40px),
-    small: utils.rem(32px)
-);
-$resting-border-width: utils.rem(1px);
-$focused-border-width: utils.rem(2px);
+@use '../../../../styles/utilities' as *;
+
+$container-background: var(--container-background, color(surface, 500)) !default;
+$resting-border-width: rem(1px);
+$focused-border-width: rem(2px);
+$resting-height: calc(var(--size) - #{($resting-border-width * 2)});
+$focused-height: calc(var(--size) - #{($focused-border-width * 2)});
+
+:host([size='large']) {
+    --component-size: var(--ig-size, var(--ig-size-large));
+}
+
+:host([size='medium']) {
+    --component-size: var(--ig-size, var(--ig-size-medium));
+}
+
+:host([size='small']) {
+    --component-size: var(--ig-size, var(--ig-size-small));
+}
 
 :host {
+    --size: #{sizable(rem(32px), rem(40px), rem(48px))};
+
     [part='prefix'],
     [part='suffix'] {
-        padding: 0 utils.rem(10px);
-        color: utils.color(gray, 700);
-        background: utils.color(gray, 100);
-        font-size: utils.rem(14px);
+        padding: 0 rem(10px);
+        color: color(gray, 700);
+        background: color(gray, 100);
+        font-size: rem(14px);
     }
 
     [part='prefix'] {
@@ -28,21 +38,22 @@ $focused-border-width: utils.rem(2px);
     }
 
     [part='label'] {
-        margin-bottom: utils.rem(8px);
-        font-size: utils.rem(14px);
+        margin-bottom: rem(8px);
+        font-size: rem(14px);
         font-weight: 600;
-        color: utils.color(gray, 900);
+        color: color(gray, 900);
     }
 
     [part^='container'] {
-        @include utils.border-radius(2px);
+        @include border-radius(2px);
 
-        border: #{$resting-border-width} solid utils.color(gray, 500);
+        border: #{$resting-border-width} solid color(gray, 500);
         transition: none;
         background: $container-background;
         cursor: text;
         grid-template-columns: auto 1fr auto;
         overflow: hidden;
+        height: var(--size);
 
         &::after {
             background: transparent;
@@ -52,10 +63,10 @@ $focused-border-width: utils.rem(2px);
     }
 
     [part~='input'] {
+        height: $resting-height;
         background: initial;
-        font-size: utils.rem(14px);
-        padding: utils.rem(8px);
-        height: 100%;
+        font-size: rem(14px);
+        padding: rem(8px);
         max-height: 100%;
         border: none;
         grid-area: 1 / 2;
@@ -63,62 +74,14 @@ $focused-border-width: utils.rem(2px);
 
     [part='helper-text'] {
         padding: 0;
-        margin-top: utils.rem(8px);
-        color: utils.color(gray, 600);
-    }
-}
-
-:host([size='large']) {
-    [part^='container'] {
-        height: map.get($input-height, 'large');
-    }
-
-    [part~='input'] {
-        height: #{map.get($input-height, 'large') - ($resting-border-width * 2)};
-    }
-}
-
-:host([size='medium']) {
-    [part^='container'] {
-        height: map.get($input-height, 'medium');
-    }
-
-    [part~='input'] {
-        height: #{map.get($input-height, 'medium') - ($resting-border-width * 2)};
-    }
-}
-
-:host([size='small']) {
-    [part^='container'] {
-        height: map.get($input-height, 'small');
-    }
-
-    [part~='input'] {
-        height: #{map.get($input-height, 'small') - ($resting-border-width * 2)};
-    }
-}
-
-:host([size='large']:focus-within) {
-    [part~='input'] {
-        height: #{map.get($input-height, 'large') - ($focused-border-width * 2)};
-    }
-}
-
-:host([size='medium']:focus-within) {
-    [part~='input'] {
-        height: #{map.get($input-height, 'medium') - ($focused-border-width * 2)};
-    }
-}
-
-:host([size='small']:focus-within) {
-    [part~='input'] {
-        height: #{map.get($input-height, 'small') - ($focused-border-width * 2)};
+        margin-top: rem(8px);
+        color: color(gray, 600);
     }
 }
 
 :host(:not([invalid]):hover) {
     [part^='container'] {
-        border-color: utils.color(gray, 700);
+        border-color: color(gray, 700);
     }
 }
 
@@ -127,37 +90,41 @@ $focused-border-width: utils.rem(2px);
         border-width: #{$focused-border-width};
     }
 
+    [part~='input'] {
+        height: $focused-height;
+    }
+
     [part='prefix'] {
-        margin-inline-start: utils.rem(-1px);
+        margin-inline-start: rem(-1px);
     }
 
     [part='suffix'] {
-        margin-inline-end: utils.rem(-1px);
+        margin-inline-end: rem(-1px);
     }
 }
 
 :host(:not([invalid]):focus-within),
 :host(:not([invalid]):focus-within:hover) {
     [part^='container'] {
-        border-color: utils.color(primary, 500);
+        border-color: color(primary, 500);
     }
 }
 
 :host([required]),
 :host([outlined][required]) {
     [part='label']::after {
-        color: utils.color(error, 500);
+        color: color(error, 500);
     }
 }
 
 :host([invalid]),
 :host([outlined][invalid]) {
     [part^='container'] {
-        border-color: utils.color(error, 500);
+        border-color: color(error, 500);
     }
 
     [part='helper-text'] {
-        color: utils.color(error, 500);
+        color: color(error, 500);
     }
 }
 
@@ -165,20 +132,20 @@ $focused-border-width: utils.rem(2px);
     pointer-events: none;
 
     [part^='container'] {
-        border-color: utils.color(gray, 100);
-        color: utils.color(gray, 400);
+        border-color: color(gray, 100);
+        color: color(gray, 400);
     }
 
     [part^='container'],
     [part='prefix'],
     [part='suffix'] {
-        background: utils.color(gray, 100);
+        background: color(gray, 100);
     }
 
     [part='prefix'],
     [part='suffix'],
     [part='label'],
     [part='helper-text'] {
-        color: utils.color(gray, 400);
+        color: color(gray, 400);
     }
 }
diff --git a/src/components/list/themes/light/list-header.base.scss b/src/components/list/themes/light/list-header.base.scss
index 5c8113a66..a55111d94 100644
--- a/src/components/list/themes/light/list-header.base.scss
+++ b/src/components/list/themes/light/list-header.base.scss
@@ -7,6 +7,8 @@
     justify-content: flex-start;
     color: color(secondary, 500);
     background: inherit;
+    padding-inline: pad-inline(4px, 8px, 16px);
+    padding-block: pad-block(2px, 4px, 8px);
 
     @include type-style('overline');
 }
diff --git a/src/components/list/themes/light/list-item.base.scss b/src/components/list/themes/light/list-item.base.scss
index fcec1ce91..9cc2d99aa 100644
--- a/src/components/list/themes/light/list-item.base.scss
+++ b/src/components/list/themes/light/list-item.base.scss
@@ -8,6 +8,8 @@
     color: color(gray, 800);
     background: color(surface, 500);
     transition: background .15s ease-out;
+    padding-inline: pad-inline(4px, 8px, 16px);
+    padding-block: pad-block(2px, 4px, 8px);
 }
 
 :host(:hover),
@@ -33,11 +35,11 @@
 }
 
 [name='start']::slotted(*) {
-    margin-inline-end: calc(var(--igc-spacing-large) * 2);
+    margin-inline-end: pad(16px);
 }
 
 [name='end']::slotted(*) {
-    margin-inline-start: calc(var(--igc-spacing-large) * 2);
+    margin-inline-start: pad(16px);
 }
 
 [part='title'] {
diff --git a/src/components/list/themes/light/list.base.scss b/src/components/list/themes/light/list.base.scss
index aacadf943..145195267 100644
--- a/src/components/list/themes/light/list.base.scss
+++ b/src/components/list/themes/light/list.base.scss
@@ -10,17 +10,14 @@
     background: color(surface, 500);
 }
 
-:host([size='small']) ::slotted(igc-list-item),
-:host([size='small']) ::slotted(igc-list-header) {
-    padding: var(--igc-spacing-small) calc(var(--igc-spacing-small) * 2);
+:host([size='small']) {
+    --component-size: var(--ig-size, var(--ig-size-small));
 }
 
-:host([size='medium']) ::slotted(igc-list-item),
-:host([size='medium']) ::slotted(igc-list-header) {
-    padding: var(--igc-spacing-medium) calc(var(--igc-spacing-medium) * 2);
+:host([size='medium']) {
+    --component-size: var(--ig-size, var(--ig-size-medium));
 }
 
-:host([size='large']) ::slotted(igc-list-item),
-:host([size='large']) ::slotted(igc-list-header) {
-    padding: var(--igc-spacing-large) calc(var(--igc-spacing-large) * 2);
+:host([size='large']) {
+    --component-size: var(--ig-size, var(--ig-size-large));
 }
diff --git a/src/components/rating/rating-symbol.base.scss b/src/components/rating/rating-symbol.base.scss
index d380a117d..be1effac6 100644
--- a/src/components/rating/rating-symbol.base.scss
+++ b/src/components/rating/rating-symbol.base.scss
@@ -3,6 +3,8 @@
 @use '../../styles/utilities' as *;
 
 :host {
+    --symbol-size: #{sizable(rem(18px), rem(24px), rem(36px))};
+
     display: flex;
     justify-content: center;
     align-items: center;
diff --git a/src/components/rating/rating.base.scss b/src/components/rating/rating.base.scss
index 8da8a7431..2e4004988 100644
--- a/src/components/rating/rating.base.scss
+++ b/src/components/rating/rating.base.scss
@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use '../../styles/common/component';
 @use '../../styles/utilities' as *;
 
@@ -13,19 +12,16 @@
     gap: rem(4px);
 }
 
-@each $s in 'small', 'medium', 'large' {
-    $size: map.get(
-        (
-            small: rem(18px),
-            medium: rem(24px),
-            large: rem(36px)
-        ),
-        $s
-    );
+:host([size='large']) {
+    --component-size: var(--ig-size, var(--ig-size-large));
+}
 
-    :host([size='#{$s}']) {
-        --symbol-size: #{$size};
-    }
+:host([size='medium']) {
+    --component-size: var(--ig-size, var(--ig-size-medium));
+}
+
+:host([size='small']) {
+    --component-size: var(--ig-size, var(--ig-size-small));
 }
 
 [part='base'] {
diff --git a/src/components/select/themes/light/select.fluent.scss b/src/components/select/themes/light/select.fluent.scss
index 2806143ee..f8a514060 100644
--- a/src/components/select/themes/light/select.fluent.scss
+++ b/src/components/select/themes/light/select.fluent.scss
@@ -1,12 +1,11 @@
-@use 'sass:map';
-@use '../../../../styles/utilities' as utils;
+@use '../../../../styles/utilities' as *;
 
-$focused-border-width: utils.rem(2px);
-$input-height: (
-    large: utils.rem(48px),
-    medium: utils.rem(40px),
-    small: utils.rem(32px)
-);
+$focused-border-width: rem(2px);
+$focused-height: calc(var(--size) - #{($focused-border-width * 2)});
+
+:host {
+    --size: #{sizable(rem(32px), rem(40px), rem(48px))};
+}
 
 :host(:focus-within) {
     igc-input[readonly]:not([disabled])::part(container) {
@@ -16,27 +15,19 @@ $input-height: (
 
 :host(:not([invalid]):focus-within) {
     igc-input[readonly]:not([disabled])::part(container) {
-        border-color: utils.color(primary, 500);
+        border-color: color(primary, 500);
         border-width: #{$focused-border-width};
     }
 
     igc-input[readonly]:not([disabled])::part(prefix) {
-        margin-inline-start: utils.rem(-1px);
+        margin-inline-start: rem(-1px);
     }
 
     igc-input[readonly]:not([disabled])::part(suffix) {
-        margin-inline-end: utils.rem(-1px);
-    }
-
-    igc-input[readonly][size='large']:not([disabled])::part(input) {
-        height: #{map.get($input-height, 'large') - ($focused-border-width * 2)};
-    }
-
-    igc-input[readonly][size='medium']:not([disabled])::part(input) {
-        height: #{map.get($input-height, 'medium') - ($focused-border-width * 2)};
+        margin-inline-end: rem(-1px);
     }
 
-    igc-input[readonly][size='small']:not([disabled])::part(input) {
-        height: #{map.get($input-height, 'small') - ($focused-border-width * 2)};
+    igc-input[readonly]:not([disabled])::part(input) {
+        height: $focused-height;
     }
 }
diff --git a/src/components/tree/themes/light/tree-item.base.scss b/src/components/tree/themes/light/tree-item.base.scss
index 38e1f9923..cf303e901 100644
--- a/src/components/tree/themes/light/tree-item.base.scss
+++ b/src/components/tree/themes/light/tree-item.base.scss
@@ -1,17 +1,6 @@
 @use '../../../../styles/common/component';
-@use '../../../../styles/utilities/index' as *;
-@use 'sass:map';
-
-$node-height: (
-    large: rem(50px),
-    medium: rem(40px),
-    small: rem(32px)
-);
-$node-padding: (
-    large: 0 rem(24px),
-    medium: 0 rem(16px),
-    small: 0 rem(12px)
-);
+@use '../../../../styles/utilities' as *;
+
 $disabled-color: color(gray, 500);
 $disabled-background: color(surface);
 $background: color(surface);
@@ -27,11 +16,12 @@ $focused-border-color: color(secondary, 500);
 $toggle-icon-size: rem(24px);
 
 :host {
+    --size: #{sizable(rem(32px), rem(40px), rem(50px))};
+    --igc-tree-indentation-size: 24px;
+
     display: flex;
     flex-direction: column;
     font-family: inherit;
-
-    --igc-tree-indentation-size: 24px;
 }
 
 :host(:focus-within) {
@@ -49,6 +39,8 @@ $toggle-icon-size: rem(24px);
     position: relative;
     background: $background;
     color: $color;
+    height: var(--size);
+    padding: 0 pad(12px, 16px, 24px);
 
     &::after {
         content: '';
@@ -139,34 +131,16 @@ $toggle-icon-size: rem(24px);
     igc-circular-progress {
         --diameter: #{rem(24px)};
     }
-
-    height: map.get($node-height, 'large');
 }
 
 [part~='medium'] {
     igc-circular-progress {
         --diameter: #{rem(20px)};
     }
-
-    height: map.get($node-height, 'medium');
 }
 
 [part~='small'] {
     igc-circular-progress {
         --diameter: #{rem(18px)};
     }
-
-    height: map.get($node-height, 'small');
-}
-
-[part~='wrapper'][part~='large'] {
-    padding: map.get($node-padding, 'large');
-}
-
-[part~='wrapper'][part~='medium'] {
-    padding: map.get($node-padding, 'medium');
-}
-
-[part~='wrapper'][part~='small'] {
-    padding: map.get($node-padding, 'small');
 }
diff --git a/src/components/tree/themes/light/tree.base.scss b/src/components/tree/themes/light/tree.base.scss
index 2082c970e..80305aa1a 100644
--- a/src/components/tree/themes/light/tree.base.scss
+++ b/src/components/tree/themes/light/tree.base.scss
@@ -6,3 +6,15 @@
     overflow: auto;
     font-family: var(--ig-font-family);
 }
+
+:host([size='small']) {
+    --component-size: var(--ig-size, var(--ig-size-small));
+}
+
+:host([size='medium']) {
+    --component-size: var(--ig-size, var(--ig-size-medium));
+}
+
+:host([size='large']) {
+    --component-size: var(--ig-size, var(--ig-size-large));
+}
diff --git a/src/styles/themes/base/_bootstrap.scss b/src/styles/themes/base/_bootstrap.scss
index afb062c67..8b1517db0 100644
--- a/src/styles/themes/base/_bootstrap.scss
+++ b/src/styles/themes/base/_bootstrap.scss
@@ -12,9 +12,9 @@
     :root {
         --igc-theme: bootstrap;
         --ig-radius-factor: 1;
-        --igc-spacing-small: #{rem(2px)};
-        --igc-spacing-medium: #{rem(4px)};
-        --igc-spacing-large: #{rem(8px)};
+        --ig-spacing: 1;
+        --ig-spacing-inline: 1;
+        --ig-spacing-block: 1;
         --ig-size-small: 1;
         --ig-size-medium: 2;
         --ig-size-large: 3;
diff --git a/src/styles/themes/base/_fluent.scss b/src/styles/themes/base/_fluent.scss
index 337734f7d..5ba67ba34 100644
--- a/src/styles/themes/base/_fluent.scss
+++ b/src/styles/themes/base/_fluent.scss
@@ -12,9 +12,9 @@
     :root {
         --igc-theme: fluent;
         --ig-radius-factor: 1;
-        --igc-spacing-small: #{rem(2px)};
-        --igc-spacing-medium: #{rem(4px)};
-        --igc-spacing-large: #{rem(8px)};
+        --ig-spacing: 1;
+        --ig-spacing-inline: 1;
+        --ig-spacing-block: 1;
         --ig-size-small: 1;
         --ig-size-medium: 2;
         --ig-size-large: 3;
diff --git a/src/styles/themes/base/_indigo.scss b/src/styles/themes/base/_indigo.scss
index 35291c6d6..dec66d08c 100644
--- a/src/styles/themes/base/_indigo.scss
+++ b/src/styles/themes/base/_indigo.scss
@@ -12,9 +12,9 @@
     :root {
         --igc-theme: indigo;
         --ig-radius-factor: 1;
-        --igc-spacing-small: #{rem(2px)};
-        --igc-spacing-medium: #{rem(4px)};
-        --igc-spacing-large: #{rem(8px)};
+        --ig-spacing: 1;
+        --ig-spacing-inline: 1;
+        --ig-spacing-block: 1;
         --ig-size-small: 1;
         --ig-size-medium: 2;
         --ig-size-large: 3;
diff --git a/src/styles/themes/base/_material.scss b/src/styles/themes/base/_material.scss
index 49c952d50..9a08b1467 100644
--- a/src/styles/themes/base/_material.scss
+++ b/src/styles/themes/base/_material.scss
@@ -12,9 +12,9 @@
     :root {
         --igc-theme: material;
         --ig-radius-factor: 1;
-        --igc-spacing-small: #{rem(2px)};
-        --igc-spacing-medium: #{rem(4px)};
-        --igc-spacing-large: #{rem(8px)};
+        --ig-spacing: 1;
+        --ig-spacing-inline: 1;
+        --ig-spacing-block: 1;
         --ig-size-small: 1;
         --ig-size-medium: 2;
         --ig-size-large: 3;