Expose sizing variables for individual components

[bzupancic]

Let me start off by saying the framework you have in place to customize color is a thing of beauty and brings a smile to my nerdy face as I dig into the SCSS.

Our application requires every igx component be touched and modified in some way, be it color, typography, or sizing. My wish is that the padding, margin, and gap properties could be manipulated in the same manner as the colors and radii i.e.

$custom-button-theme: button-theme(
$foreground: #fdfdfd,
$background: #345779,
$padding-right-comfortable: 64px,
$padding-right-cosy: 48px,
$padding-right-compact: 40px
);

[simeonoff]

Hi, we are most likely not gonna expose every single padding and margin used. However, as we plan on shifting the configuration of the themes more and more towards custom CSS properties/variables we may make it possible to generally set sizing variables to control spacing on a more global level.

Here's what I mean:

:root {
    --igx-spacing-large: 16px;
    --igx-spacing-medium: 8px;
    --igx-spacing-small: 4px;
}

The same CSS variables will be used internally by all component themes when defining margins and paddings. So, changing them globally will in turn affect the sizing of all components. Since CSS variables can be scoped, you will be able to define different spacing values for different components.