zmp-ui/button/styles/variables.less

Zalo Mini App framework

//===== LIGHT ======
@light-button-primary-background: var(--zaui-light-button-primary-background, @b60);
@light-button-primary-background-pressed: var(--zaui-light-button-primary-background-pressed, @b70);
@light-button-primary-text: var(--zaui-light-button-primary-text, @wht-a100);
@light-button-primary-icon: var(--zaui-light-button-primary-icon, @wht-a100);
@light-button-primary-danger-background: var(--zaui-light-button-primary-danger-background, @r60);
@light-button-primary-danger-background-pressed: var(--zaui-light-button-primary-danger-background-pressed, @r70);
@light-button-primary-danger-text: var(--zaui-light-button-primary-danger-text, @wht-a100);
@light-button-primary-icon: var(--zaui-light-button-primary-icon, @wht-a100);

@light-button-secondary-background: var(--zaui-light-button-secondary-background, @b20);
@light-button-secondary-background-pressed: var(--zaui-light-button-secondary-background-pressed, @b30);
@light-button-secondary-text: var(--zaui-light-button-secondary-text, @b60);
@light-button-secondary-icon: var(--zaui-light-button-secondary-icon, @b60);
@light-button-secondary-danger-background: var(--zaui-light-button-secondary-danger-background, @r20);
@light-button-secondary-danger-background-pressed: var(--zaui-light-button-secondary-danger-background-pressed, @r30);
@light-button-secondary-danger-text: var(--zaui-light-button-secondary-danger-text, @r60);
@light-button-secondary-danger-icon: var(--zaui-light-button-secondary-danger-icon, @r60);
@light-button-secondary-neutral-background: var(--zaui-light-button-secondary-neutral-background, @ng20);
@light-button-secondary-neutral-background-pressed: var(--zaui-light-button-secondary-neutral-background-pressed, @ng30);
@light-button-secondary-neutral-text: var(--zaui-light-button-secondary-neutral-text, @ng100);
@light-button-secondary-neutral-icon: var(--zaui-light-button-secondary-neutral-icon, @ng100);

@light-button-tertiary-background: transparent;
@light-button-tertiary-background-pressed: var(--zaui-light-button-tertiary-background-pressed, @b10);
@light-button-tertiary-text: var(--zaui-light-button-tertiary-text, @b60);
@light-button-tertiary-icon: var(--zaui-light-button-tertiary-icon, @b60);
@light-button-tertiary-danger-background: transparent;
@light-button-tertiary-danger-background-pressed: var(--zaui-light-button-tertiary-danger-background-pressed, @r10);
@light-button-tertiary-danger-text: var(--zaui-light-button-tertiary-danger-text, @r60);
@light-button-tertiary-danger-icon: var(--zaui-light-button-tertiary-danger-icon, @r60);
@light-button-tertiary-neutral-background: transparent;
@light-button-tertiary-neutral-background-pressed: var(--zaui-light-button-tertiary-neutral-background-pressed, @ng20);
@light-button-tertiary-neutral-text: var(--zaui-light-button-tertiary-neutral-text, @ng100);
@light-button-tertiary-neutral-icon: var(--zaui-light-button-tertiary-neutral-icon, @ng100);

@light-button-background-disabled: var(--zaui-light-button-background-disabled, @ng30);
@light-button-text-disabled: var(--zaui-light-button-text-disabled, @ng40);
@light-button-icon-disabled: var(--zaui-light-button-icon-disabled, @ng40);

//========= =======

//===== DARK ======
@dark-button-primary-background: var(--zaui-dark-button-primary-background, @b60);
@dark-button-primary-background-pressed: var(--zaui-dark-button-primary-background-pressed, @b70);
@dark-button-primary-text: var(--zaui-dark-button-primary-text, @wht-a100);
@dark-button-primary-icon: var(--zaui-dark-button-primary-icon, @wht-a100);

@dark-button-primary-danger-background: var(--zaui-dark-button-primary-danger-background, @r60);
@dark-button-primary-danger-background-pressed: var(--zaui-dark-button-primary-danger-background-pressed, @r70);
@dark-button-primary-danger-text: var(--zaui-dark-button-primary-danger-text, @wht-a100);
@dark-button-primary-danger-icon: var(--zaui-dark-button-primary-danger-icon, @wht-a100);

@dark-button-secondary-background: var(--zaui-dark-button-secondary-background, @b90);
@dark-button-secondary-background-pressed: var(--zaui-dark-button-secondary-background-pressed, @b100);
@dark-button-secondary-text: var(--zaui-dark-button-secondary-text, @b40);
@dark-button-secondary-icon: var(--zaui-dark-button-secondary-icon, @b40);

@dark-button-secondary-danger-background: var(--zaui-dark-button-secondary-danger-background, @r90);
@dark-button-secondary-danger-background-pressed: var(--zaui-dark-button-secondary-danger-background-pressed, @r100);
@dark-button-secondary-danger-text: var(--zaui-dark-button-secondary-danger-text, @r40);
@dark-button-secondary-danger-icon: var(--zaui-dark-button-secondary-danger-icon, @r40);

@dark-button-secondary-neutral-background: var(--zaui-dark-button-secondary-neutral-background, @ng80);
@dark-button-secondary-neutral-background-pressed: var(--zaui-dark-button-secondary-neutral-background-pressed, @ng90);
@dark-button-secondary-neutral-text: var(--zaui-dark-button-secondary-neutral-text, @wht-a100);
@dark-button-secondary-neutral-icon: var(--zaui-dark-button-secondary-neutral-icon, @wht-a100);

@dark-button-tertiary-background: transparent;
@dark-button-tertiary-background-pressed: var(--zaui-dark-button-tertiary-background-pressed, @b90);
@dark-button-tertiary-text: var(--zaui-dark-button-tertiary-text, @b50);
@dark-button-tertiary-icon: var(--zaui-dark-button-tertiary-icon, @b50);

@dark-button-tertiary-danger-background: transparent;
@dark-button-tertiary-danger-background-pressed: var(--zaui-dark-button-tertiary-danger-background-pressed, @r90);
@dark-button-tertiary-danger-text: var(--zaui-dark-button-tertiary-danger-text, @r50);
@dark-button-tertiary-danger-icon: var(--zaui-dark-button-tertiary-danger-icon, @r50);

@dark-button-tertiary-neutral-background: transparent;
@dark-button-tertiary-neutral-background-pressed: var(--zaui-dark-button-tertiary-neutral-background-pressed, @ng80);
@dark-button-tertiary-neutral-text: var(--zaui-dark-button-tertiary-neutral-text, @wht-a100);
@dark-button-tertiary-neutral-icon: var(--zaui-dark-button-tertiary-neutral-icon, @wht-a100);

@dark-button-background-disabled: var(--zaui-dark-button-background-disabled, @ng80);
@dark-button-text-disabled: var(--zaui-dark-button-text-disabled, @ng70);
@dark-button-icon-disabled: var(--zaui-dark-button-icon-disabled, @ng70);

//========= =======
@btn-prefix-cls: ~"@{zaui-prefix}-btn";
@btn-height-large: 48px;
@btn-min-width-large: 120px;
@btn-min-width-large-tertiary: 88px;
@btn-height-medium: 40px;
@btn-min-width-medium: 96px;
@btn-min-width-medium-tertiary: 64px;
@btn-height-small: 32px;
@btn-min-width-small: 72px;
@btn-min-width-small-tertiary: 56px;
@btn-icon-only-size-medium: 40px;
@btn-icon-only-size-large: 48px;
@btn-icon-only-size-small: 32px;

@btn-padding: 8px 24px;
@btn-padding-large: 12px 24px;
@btn-padding-small: 8px 16px;

@btn-font-weight: 500;
@btn-font-size: 15px;
@btn-line-height: 20px;
@btn-font-size-small: 14px;
@btn-line-height-small: 18px;

@btn-icon-size: 24px;
@btn-icon-size-small: 16px;