@dialpad/dialtone-css/lib/build/less/variables/sizes.less

Dialpad's design system

//
//  DIALTONE
//  TOKENS: SIZES
//
//  These are shared sizes for buttons, inputs, select menus (native),
//  and text-areas.
//  ============================================================================
//  $   SHARED INPUT & BUTTON SIZES
//  ============================================================================
//  $$  EXTRA SMALL
//  ----------------------------------------------------------------------------

#d-internal__input-and-select-xs() {
    --input-padding-y: calc(calc(var(--dt-space-400) - var(--dt-space-100)) - var(--input-border-width));
    --input-padding-x: calc(var(--dt-space-400) - var(--input-border-width));
    --input-border-radius: var(--dt-inputs-size-radius-xs);
    --input-typography: var(--dt-typography-inputs-xs);

    .d-btn__icon {
        width: var(--dt-icon-size-100);
        height: var(--dt-icon-size-100);
    }
}

//  $$  SMALL
//  ----------------------------------------------------------------------------
#d-internal__input-and-select-sm() {
    --input-padding-y: calc(var(--dt-space-400) - var(--input-border-width));
    --input-padding-x: calc((var(--dt-space-500) - var(--dt-space-300)) - var(--input-border-width));
    --input-typography: var(--dt-typography-inputs-sm);
    --input-border-radius: var(--dt-inputs-size-radius-sm);

    .d-btn__icon {
        width: var(--dt-icon-size-200);
        height: var(--dt-icon-size-200);
    }
}

//  $$  LARGE
//  ----------------------------------------------------------------------------
#d-internal__input-and-select-lg() {
    --input-padding-y: calc((var(--dt-space-400) + var(--dt-space-200)) - var(--input-border-width));
    --input-padding-x: calc(var(--dt-space-500) - var(--input-border-width));
    --input-border-radius: var(--dt-inputs-size-radius-lg);
    --input-typography: var(--dt-typography-inputs-lg);

    .d-btn__icon {
        width: var(--dt-icon-size-400);
        height: var(--dt-icon-size-400);
    }
}

//  $$  EXTRA LARGE
//  ----------------------------------------------------------------------------
#d-internal__input-and-select-xl() {
    --input-padding-y: calc((var(--dt-space-500) - var(--dt-space-300)) - var(--input-border-width));
    --input-padding-x: calc(var(--dt-space-500) - var(--input-border-width));
    --input-border-radius: var(--dt-inputs-size-radius-xl);
    --input-typography: var(--dt-typography-inputs-xl);

    .d-btn__icon {
        width: var(--dt-icon-size-500);
        height: var(--dt-icon-size-500);
    }
}