tdesign-mobile-vue/esm/_common/style/mobile/components/switch/v2/_var.less

tdesign-mobile-vue

@switch-checked-color: var(--td-switch-checked-color, @brand-color);
@switch-checked-disabled-color: var(--td-switch-checked-disabled-color, @brand-color-disabled);
@switch-unchecked-color: var(--td-switch-unchecked-color, @text-color-disabled);
@switch-unchecked-disabled-color: var(--td-switch-unchecked-disabled-color, @bg-color-component-disabled);

@switch-width: var(--td-switch-width, 45px);
@switch-height: var(--td-switch-height, 28px);
@switch-radius: var(--td-switch-radius, calc(@switch-height / 2));

// large
@switch-large-width: var(--td-switch-large-width, 52px);
@switch-large-height: var(--td-switch-large-height, 32px);
@switch-large-radius: var(--td-switch-large-radius, calc(@switch-large-height / 2));

// small
@switch-small-width: var(--td-switch-small-width, 39px);
@switch-small-height: var(--td-switch-small-height, 24px);
@switch-small-radius: var(--td-switch-small-radius, calc(@switch-small-height / 2));

@switch-dot-size: var(--td-switch-dot-size, 22px);
@switch-dot-plain-size: var(--td-switch-dot-plain-size, 18px);
@switch-dot-horizontal-margin: var(--td-switch-dot-horizontal-margin, 3px);
@switch-dot-plain-horizontal-margin: var(--td-switch-dot-plain-horizontal-margin, 5px);
@switch-dot-shadow: var(--td-switch-dot-shadow, @shadow-1);
@switch-dot-border-color: var(--td-switch-dot-border-color, @bg-color-secondarycontainer);

// large dot
@switch-dot-large-size: var(--td-switch-dot-large-size, 26px);
@switch-dot-plain-large-size: var(--td-switch-dot-plain-large-size, 22px);

// small dot
@switch-dot-small-size: var(--td-switch-dot-small-size, 18px);
@switch-dot-plain-small-size: var(--td-switch-dot-plain-small-size, 14px);

@switch-label-font-size: var(--td-switch-label-font-size, 14px);
@switch-label-large-font-size: var(--td-switch-label-font-size, 16px);
@switch-label-small-font-size: var(--td-switch-label-font-size, 12px);

@switch-label-color: var(--td-switch-label-color, @text-color-disabled);
@switch-label-checked-color: var(--td-switch-label-checked-color, @switch-checked-color);

// icon
@switch-icon-size: var(--td-switch-icon-size, 20px);
@switch-icon-large-size: var(--td-switch-icon-large-size, 24px);
@switch-icon-small-size: var(--td-switch-icon-small-size, 16px);