Similarly to #289 many components use paddings internally but they are defined as individual values instead of using variables from diete.css. For example the Input component have many definitions of paddings setting to values like 0.75rem. This does not change automatically when the values are changed in diete.css. Ideally all paddings, margins, top, left, right, bottom variables should be calculated as a multiplier of var(--padding).
For example the padding in input is 0.75rem. Since the default padding in diete.css is defined as 1rem, this could be rewritten as calc(0.75 * var(--padding)). To simplify things we could create variables for the most used values, such as
Similarly to #289 many components use paddings internally but they are defined as individual values instead of using variables from
diete.css. For example theInputcomponent have many definitions of paddings setting to values like0.75rem. This does not change automatically when the values are changed indiete.css. Ideally all paddings, margins, top, left, right, bottom variables should be calculated as a multiplier ofvar(--padding).For example the padding in input is
0.75rem. Since the default padding indiete.cssis defined as1rem, this could be rewritten ascalc(0.75 * var(--padding)). To simplify things we could create variables for the most used values, such as0.25:--quarter-padding0.5: there is already--half-paddingdefined0.75:--three-quarters-padding--one-and-a-half-padding)--double-paddingalready defined--triple-padding